MenuPopover should have overflow styles when using autoSize

packages/react-components/react-menu/etc/react-menu.api.md

@@ -34,7 +34,7 @@ export type MenuCheckedValueChangeData = {
 export type MenuCheckedValueChangeEvent = React_2.MouseEvent | React_2.KeyboardEvent;
 
 // @public
-export type MenuContextValue = Pick<MenuState, 'openOnHover' | 'openOnContext' | 'triggerRef' | 'menuPopoverRef' | 'setOpen' | 'isSubmenu' | 'triggerId' | 'hasIcons' | 'hasCheckmarks' | 'persistOnItemClick' | 'inline' | 'checkedValues' | 'onCheckedValueChange'> & {
+export type MenuContextValue = Pick<MenuState, 'openOnHover' | 'openOnContext' | 'triggerRef' | 'menuPopoverRef' | 'setOpen' | 'isSubmenu' | 'triggerId' | 'hasIcons' | 'hasCheckmarks' | 'persistOnItemClick' | 'inline' | 'checkedValues' | 'onCheckedValueChange' | 'autoSize'> & {
     open: boolean;
     triggerId: string;
     defaultCheckedValues?: Record<string, string[]>;
@@ -282,6 +282,7 @@ export type MenuPopoverSlots = {
 // @public
 export type MenuPopoverState = ComponentState<MenuPopoverSlots> & {
     inline: boolean;
+    autoSize: boolean;
 };
 
 // @public
@@ -335,6 +336,7 @@ export type MenuState = ComponentState<MenuSlots> & Required<Pick<MenuProps, 'ha
     triggerRef: React_2.MutableRefObject<HTMLElement>;
     onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;
     defaultCheckedValues?: Record<string, string[]>;
+    autoSize: boolean;
 };
 
 // @public

packages/react-components/react-menu/src/components/Menu/Menu.types.ts

@@ -163,6 +163,8 @@ export type MenuState = ComponentState<MenuSlots> &
      * the signature remains just to avoid breaking changes
      */
     defaultCheckedValues?: Record<string, string[]>;
+
+    autoSize: boolean;
   };
 
 export type MenuContextValues = {

packages/react-components/react-menu/src/components/Menu/useMenu.tsx

@@ -113,6 +113,7 @@ export const useMenu_unstable = (props: MenuProps): MenuState => {
     checkedValues,
     onCheckedValueChange,
     persistOnItemClick,
+    autoSize: !!positioningState.autoSize,
   };
 };
 

packages/react-components/react-menu/src/components/Menu/useMenuContextValues.ts

@@ -16,6 +16,7 @@ export function useMenuContextValues_unstable(state: MenuState): MenuContextValu
     setOpen,
     triggerId,
     triggerRef,
+    autoSize,
   } = state;
 
   // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
@@ -34,6 +35,7 @@ export function useMenuContextValues_unstable(state: MenuState): MenuContextValu
     setOpen,
     triggerId,
     triggerRef,
+    autoSize,
   };
 
   return { menu };

packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.types.ts

@@ -18,4 +18,6 @@ export type MenuPopoverState = ComponentState<MenuPopoverSlots> & {
    * This option is disregarded for submenus
    */
   inline: boolean;
+
+  autoSize: boolean;
 };

packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts

@@ -21,6 +21,7 @@ export const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<
   const setOpen = useMenuContext_unstable(context => context.setOpen);
   const open = useMenuContext_unstable(context => context.open);
   const openOnHover = useMenuContext_unstable(context => context.openOnHover);
+  const autoSize = useMenuContext_unstable(context => context.autoSize);
   const isSubmenu = useIsSubmenu();
   const canDispatchCustomEventRef = React.useRef(true);
   const throttleDispatchTimerRef = React.useRef(0);
@@ -96,5 +97,6 @@ export const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<
       root: 'div',
     },
     root: rootProps,
+    autoSize,
   };
 };

packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts

@@ -20,13 +20,23 @@ const useStyles = makeStyles({
     ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),
     ...typographyStyles.body1,
   },
+
+  autoSize: {
+    overflowX: 'auto',
+    overflowY: 'auto',
+  },
 });
 
 /**
  * Apply styling to the Menu slots based on the state
  */
 export const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);
+  state.root.className = mergeClasses(
+    menuPopoverClassNames.root,
+    styles.root,
+    state.root.className,
+    state.autoSize && styles.autoSize,
+  );
   return state;
 };

packages/react-components/react-menu/src/contexts/menuContext.ts

@@ -22,6 +22,7 @@ const menuContextDefaultValue: MenuContextValue = {
   hasCheckmarks: false,
   inline: false,
   persistOnItemClick: false,
+  autoSize: false,
 };
 
 /**
@@ -44,6 +45,7 @@ export type MenuContextValue = Pick<
   | 'inline'
   | 'checkedValues'
   | 'onCheckedValueChange'
+  | 'autoSize'
 > & {
   open: boolean;
   triggerId: string;