From 9fbffc91473b721e1c2b1b43c2a6393dc035cb68 Mon Sep 17 00:00:00 2001
From: Robert Penner <robertpenner@microsoft.com>
Date: Mon, 9 Dec 2024 13:56:01 +0000
Subject: [PATCH] refactor(MenuPopover): migrate opacity transition to Fade
 component

---
 .../react-menu/library/package.json               |  1 +
 .../components/MenuPopover/MenuPopover.types.ts   |  2 ++
 .../components/MenuPopover/renderMenuPopover.tsx  | 15 +++++++++------
 .../src/components/MenuPopover/useMenuPopover.ts  |  2 +-
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/react-components/react-menu/library/package.json b/packages/react-components/react-menu/library/package.json
index cb1698fff1be98..10f8043db99cad 100644
--- 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
index b460bce616691e..e5c0ea85c97b81 100644
--- 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/packages/react-components/react-menu/library/src/components/MenuPopover/renderMenuPopover.tsx b/packages/react-components/react-menu/library/src/components/MenuPopover/renderMenuPopover.tsx
index 3fa0c19f2619f3..a5ed27b3dcb5ad 100644
--- a/packages/react-components/react-menu/library/src/components/MenuPopover/renderMenuPopover.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuPopover/renderMenuPopover.tsx
@@ -3,6 +3,7 @@
 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
@@ -10,13 +11,15 @@ import { Portal } from '@fluentui/react-portal';
 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
index a555f0dd69a13b..5eb7a4ffb17c8e 100644
--- 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 };
 };