refactor(MenuPopover): migrate opacity transition to Fade component

microsoft · Dec 9, 2024 · 9fbffc9 · 9fbffc9
1 parent 9a2d769
commit 9fbffc9
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/packages/react-components/react-menu/library/package.json b/packages/react-components/react-menu/library/package.json
@@ -24,6 +24,7 @@
     "@fluentui/react-aria": "^9.13.10",
     "@fluentui/react-context-selector": "^9.1.70",
     "@fluentui/react-icons": "^2.0.245",
+    "@fluentui/react-motion-components-preview": "^0.3.2",
     "@fluentui/react-portal": "^9.4.39",
     "@fluentui/react-positioning": "^9.15.13",
     "@fluentui/react-shared-contexts": "^9.21.1",

diff --git a/packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.types.ts b/packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.types.ts
@@ -1,5 +1,6 @@
 import type { PortalProps } from '@fluentui/react-portal';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { MenuContextValue } from '../../contexts/menuContext';
 
 export type MenuPopoverSlots = {
   root: Slot<'div'>;
@@ -14,6 +15,7 @@ export type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;
  * State used in rendering MenuPopover
  */
 export type MenuPopoverState = ComponentState<MenuPopoverSlots> &
+  Pick<MenuContextValue, 'open'> &
   Pick<PortalProps, 'mountNode'> & {
     /**
      * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order

diff --git a/...ages/react-components/react-menu/library/src/components/MenuPopover/renderMenuPopover.tsx b/...ages/react-components/react-menu/library/src/components/MenuPopover/renderMenuPopover.tsx
@@ -3,20 +3,23 @@
 import { assertSlots } from '@fluentui/react-utilities';
 import { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';
 import { Portal } from '@fluentui/react-portal';
+import { Fade } from '@fluentui/react-motion-components-preview';
 
 /**
  * Render the final JSX of MenuPopover
  */
 export const renderMenuPopover_unstable = (state: MenuPopoverState) => {
   assertSlots<MenuPopoverSlots>(state);
 
+  const surface = (
+    <Fade visible={state.open}>
+      <state.root />
+    </Fade>
+  );
+
   if (state.inline) {
-    return <state.root />;
+    return surface;
   }
 
-  return (
-    <Portal mountNode={state.mountNode}>
-      <state.root />
-    </Portal>
-  );
+  return <Portal mountNode={state.mountNode}>{surface}</Portal>;
 };
diff --git a/packages/react-components/react-menu/library/src/components/MenuPopover/useMenuPopover.ts b/packages/react-components/react-menu/library/src/components/MenuPopover/useMenuPopover.ts
@@ -97,5 +97,5 @@ export const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<
     }
     onKeyDownOriginal?.(event);
   });
-  return { inline, mountNode, components: { root: 'div' }, root: rootProps };
+  return { inline, mountNode, open, components: { root: 'div' }, root: rootProps };
 };