@fluentui/react-menu 9.0.0-rc.7 → 9.0.0

package/dist/{react-menu.d.ts → index.d.ts}

@@ -1,14 +1,15 @@
-import { ComponentProps } from '@fluentui/react-utilities';
-import { ComponentState } from '@fluentui/react-utilities';
-import type { Context } from '@fluentui/react-context-selector';
+/// <reference types="react" />
+
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
 import type { ContextSelector } from '@fluentui/react-context-selector';
 import type { FluentTriggerComponent } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { PositioningShorthand } from '@fluentui/react-positioning';
+import type { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { usePopperMouseTarget } from '@fluentui/react-positioning';
+import { usePositioningMouseTarget } from '@fluentui/react-positioning';
 
 /**
  * Wrapper component that manages state for a popup MenuList and a MenuTrigger
@@ -16,50 +17,14 @@ import { usePopperMouseTarget } from '@fluentui/react-positioning';
 export declare const Menu: React_2.FC<MenuProps>;
 
 export declare type MenuCheckedValueChangeData = {
-    /** The name of the value */
-    name: string;
     /** The items for this value that are checked */
     checkedItems: string[];
+    /** The name of the value */
+    name: string;
 };
 
 export declare type MenuCheckedValueChangeEvent = React_2.MouseEvent | React_2.KeyboardEvent;
 
-declare type MenuCommons = MenuListCommons & {
-    /**
-     * Whether the popup is open
-     */
-    open: boolean;
-    /**
-     * Call back when the component requests to change value
-     * The `open` value is used as a hint when directly controlling the component
-     */
-    onOpenChange?: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;
-    /**
-     * Whether the popup is open by default
-     */
-    defaultOpen?: boolean;
-    openOnHover: boolean;
-    /**
-     * Opens the menu on right click (context menu), removes all other menu open interactions
-     */
-    openOnContext?: boolean;
-    /**
-     * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order
-     * This option is disregarded for submenus
-     */
-    inline?: boolean;
-    /**
-     * Do not dismiss the menu when a menu item is clicked
-     */
-    persistOnItemClick?: boolean;
-    /**
-     * Sets the delay for mouse open/close for the popover one mouse enter/leave
-     */
-    hoverDelay?: number;
-};
-
-export declare const MenuContext: Context<MenuContextValue>;
-
 /**
  * Context shared between Menu and its children components
  *
@@ -79,11 +44,6 @@ export declare type MenuContextValues = {
  */
 export declare const MenuDivider: ForwardRefComponent<MenuDividerProps>;
 
-/**
- * @deprecated Use `menuDividerClassNames.root` instead.
- */
-export declare const menuDividerClassName = "fui-MenuDivider";
-
 export declare const menuDividerClassNames: SlotClassNames<MenuDividerSlots>;
 
 export declare type MenuDividerProps = ComponentProps<MenuDividerSlots>;
@@ -99,11 +59,6 @@ export declare type MenuDividerState = ComponentState<MenuDividerSlots>;
  */
 export declare const MenuGroup: ForwardRefComponent<MenuGroupProps>;
 
-/**
- * @deprecated Use `menuGroupClassNames.root` instead.
- */
-export declare const menuGroupClassName = "fui-MenuGroup";
-
 export declare const menuGroupClassNames: SlotClassNames<MenuGroupSlots>;
 
 export declare const MenuGroupContextProvider: React_2.Provider<MenuGroupContextValue>;
@@ -128,11 +83,6 @@ export declare type MenuGroupContextValues = {
  */
 export declare const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps>;
 
-/**
- * @deprecated Use `menuGroupHeaderClassNames.root` instead.
- */
-export declare const menuGroupHeaderClassName = "fui-MenuGroupHeader";
-
 export declare const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots>;
 
 export declare type MenuGroupHeaderProps = ComponentProps<MenuGroupHeaderSlots>;
@@ -166,51 +116,40 @@ export declare const MenuItem: ForwardRefComponent<MenuItemProps>;
  */
 export declare const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps>;
 
-/**
- * @deprecated Use `menuItemCheckboxClassNames.root` instead.
- */
-export declare const menuItemCheckboxClassName = "fui-MenuItemCheckbox";
-
 export declare const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;
 
 export declare type MenuItemCheckboxProps = MenuItemProps & MenuItemSelectableProps;
 
 export declare type MenuItemCheckboxState = MenuItemState & MenuItemSelectableState;
 
-/**
- * @deprecated Use `menuItemClassNames.root` instead.
- */
-export declare const menuItemClassName = "fui-MenuItem";
-
 export declare const menuItemClassNames: SlotClassNames<MenuItemSlots>;
 
-declare type MenuItemCommons = {
-    /**
-     * If the menu item is a trigger for a submenu
-     */
-    hasSubmenu?: boolean;
+export declare type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {
     /**
      * Applies disabled styles to menu item but remains focusable
+     *
+     * @default false
      */
     disabled?: boolean;
+    /**
+     * If the menu item is a trigger for a submenu
+     *
+     * @default false
+     */
+    hasSubmenu?: boolean;
     /**
      * Clicking on the menu item will not dismiss an open menu
+     *
+     * @default false
      */
     persistOnClick?: boolean;
 };
 
-export declare type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & MenuItemCommons;
-
 /**
  * Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.
  */
 export declare const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps>;
 
-/**
- * @deprecated Use `menuItemRadioClassNames.root` instead.
- */
-export declare const menuItemRadioClassName = "fui-MenuItemRadio";
-
 export declare const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;
 
 export declare type MenuItemRadioProps = MenuItemProps & MenuItemSelectableProps;
@@ -277,111 +216,97 @@ export declare type MenuItemSlots = {
     secondaryContent?: Slot<'span'>;
 };
 
-export declare type MenuItemState = ComponentState<MenuItemSlots> & MenuItemCommons;
+export declare type MenuItemState = ComponentState<MenuItemSlots> & Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>;
 
 /**
  * Define a styled MenuList, using the `useMenuList_unstable` hook.
  */
 export declare const MenuList: ForwardRefComponent<MenuListProps>;
 
+export declare const menuListClassNames: SlotClassNames<MenuListSlots>;
+
 /**
- * @deprecated Use `menuListClassNames.root` instead.
+ * Context shared between MenuList and its children components
  */
-export declare const menuListClassName = "fui-MenuList";
+export declare type MenuListContextValue = Pick<MenuListProps, 'checkedValues' | 'onCheckedValueChange' | 'hasIcons' | 'hasCheckmarks'> & {
+    setFocusByFirstCharacter?: (e: React_2.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;
+    toggleCheckbox?: SelectableHandler;
+    selectRadio?: SelectableHandler;
+};
 
-export declare const menuListClassNames: SlotClassNames<MenuListSlots>;
+export declare type MenuListContextValues = {
+    menuList: MenuListContextValue;
+};
 
-declare type MenuListCommons = {
-    /**
-     * Callback when checked items change for value with a name
-     *
-     * @param event - React's original SyntheticEvent
-     * @param data - A data object with relevant information
-     */
-    onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;
+export declare type MenuListProps = ComponentProps<MenuListSlots> & {
     /**
      * Map of all checked values
      */
-    checkedValues: Record<string, string[]>;
+    checkedValues?: Record<string, string[]>;
     /**
      * Default values to be checked on mount
      */
     defaultCheckedValues?: Record<string, string[]>;
+    /**
+     * States that menu items can contain selectable items and reserve slots for item alignment
+     */
+    hasCheckmarks?: boolean;
     /**
      * States that menu items can contain icons and reserve slots for item alignment
      */
     hasIcons?: boolean;
     /**
-     * States that menu items can contain selectable items and reserve slots for item alignment
+     * Callback when checked items change for value with a name
+     *
+     * @param event - React's original SyntheticEvent
+     * @param data - A data object with relevant information
      */
-    hasCheckmarks?: boolean;
-};
-
-export declare const MenuListContext: Context<MenuListContextValue>;
-
-/**
- * Context shared between MenuList and its children components
- */
-export declare type MenuListContextValue = Pick<MenuListProps, 'checkedValues' | 'onCheckedValueChange' | 'hasIcons' | 'hasCheckmarks'> & {
-    setFocusByFirstCharacter?: (e: React_2.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;
-    toggleCheckbox?: SelectableHandler;
-    selectRadio?: SelectableHandler;
-};
-
-export declare type MenuListContextValues = {
-    menuList: MenuListContextValue;
+    onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;
 };
 
-export declare type MenuListProps = ComponentProps<MenuListSlots> & Partial<MenuListCommons>;
-
 export declare const MenuListProvider: React_2.Provider<MenuListContextValue> & React_2.FC<React_2.ProviderProps<MenuListContextValue>>;
 
 export declare type MenuListSlots = {
     root: Slot<'div'>;
 };
 
-export declare type MenuListState = ComponentState<MenuListSlots> & MenuListCommons & {
+export declare type MenuListState = ComponentState<MenuListSlots> & Pick<MenuListProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & Required<Pick<MenuListProps, 'checkedValues' | 'hasCheckmarks' | 'hasIcons'>> & {
+    /**
+     * Selects a radio item, will de-select the currently selected ratio item
+     */
+    selectRadio: SelectableHandler;
     /**
      * Callback to set focus on the next menu item by first character
      */
     setFocusByFirstCharacter: NonNullable<MenuListContextValue['setFocusByFirstCharacter']>;
     toggleCheckbox: SelectableHandler;
-    /**
-     * Selects a radio item, will de-select the currently selected ratio item
-     */
-    selectRadio: SelectableHandler;
 };
 
 /**
  * Data attached to open/close events
  */
 export declare type MenuOpenChangeData = {
-    open: boolean;
-    /**
-     * Indicates whether the change of state was a keyboard interaction
-     */
-    keyboard?: boolean;
     /**
      * indicates whether the request for the open state was bubbled from a nested menu
      */
     bubble?: boolean;
+    /**
+     * Indicates whether the change of state was a keyboard interaction
+     */
+    keyboard?: boolean;
+    open: boolean;
 };
 
 /**
  * The supported events that will trigger open/close of the menu
  */
-export declare type MenuOpenEvents = MouseEvent | TouchEvent | React_2.MouseEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.FocusEvent<HTMLElement>;
+export declare type MenuOpenEvents = MouseEvent | TouchEvent | React_2.FocusEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.MouseEvent<HTMLElement>;
 
 /**
  * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus
  */
 export declare const MenuPopover: ForwardRefComponent<MenuPopoverProps>;
 
-/**
- * @deprecated Use `menuPopoverClassNames.root` instead.
- */
-export declare const menuPopoverClassName = "fui-MenuPopover";
-
 export declare const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots>;
 
 /**
@@ -407,16 +332,68 @@ export declare type MenuPopoverState = ComponentState<MenuPopoverSlots> & {
 /**
  * Extends and drills down Menulist props to simplify API
  */
-export declare type MenuProps = Partial<MenuCommons> & ComponentProps<MenuSlots> & {
+export declare type MenuProps = ComponentProps<MenuSlots> & Pick<MenuListProps, 'checkedValues' | 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'onCheckedValueChange'> & {
     /**
      * Can contain two children including {@link MenuTrigger} and {@link MenuPopover}.
      * Alternatively can only contain {@link MenuPopover} if using a custom `target`.
      */
     children: [JSX.Element, JSX.Element] | JSX.Element;
+    /**
+     * Whether the popup is open by default
+     *
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Sets the delay for mouse open/close for the popover one mouse enter/leave
+     */
+    hoverDelay?: number;
+    /**
+     * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order
+     * This option is disregarded for submenus
+     *
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Call back when the component requests to change value
+     * The `open` value is used as a hint when directly controlling the component
+     */
+    onOpenChange?: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;
+    /**
+     * Whether the popup is open
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Opens the menu on right click (context menu), removes all other menu open interactions
+     *
+     * @default false
+     */
+    openOnContext?: boolean;
+    /**
+     * Opens the menu on hover
+     *
+     * @default false
+     */
+    openOnHover?: boolean;
+    /**
+     * Do not dismiss the menu when a menu item is clicked
+     *
+     * @default false
+     */
+    persistOnItemClick?: boolean;
     /**
      * Configures the positioned menu
      */
     positioning?: PositioningShorthand;
+    /**
+     * Close when scroll outside of it
+     *
+     * @default false
+     */
+    closeOnScroll?: boolean;
 };
 
 export declare const MenuProvider: React_2.Provider<MenuContextValue> & React_2.FC<React_2.ProviderProps<MenuContextValue>>;
@@ -428,19 +405,12 @@ export declare type MenuSlots = {};
  */
 export declare const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps>;
 
-/**
- * @deprecated Use `menuSplitGroupClassNames.root` instead.
- */
-export declare const menuSplitGroupClassName = "fui-MenuSplitGroup";
-
 export declare const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots>;
 
-declare type MenuSplitGroupCommons = {};
-
 /**
  * MenuSplitGroup Props
  */
-export declare type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots> & MenuSplitGroupCommons;
+export declare type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots>;
 
 export declare type MenuSplitGroupSlots = {
     root: Slot<'div'>;
@@ -449,45 +419,45 @@ export declare type MenuSplitGroupSlots = {
 /**
  * State used in rendering MenuSplitGroup
  */
-export declare type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots> & MenuSplitGroupCommons;
+export declare type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots>;
 
-export declare type MenuState = MenuCommons & ComponentState<MenuSlots> & {
+export declare type MenuState = ComponentState<MenuSlots> & Pick<MenuProps, 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'inline' | 'onOpenChange' | 'openOnContext' | 'persistOnItemClick'> & Required<Pick<MenuProps, 'checkedValues' | 'onCheckedValueChange' | 'open' | 'openOnHover' | 'closeOnScroll'>> & {
     /**
-     * Callback to open/close the popup
+     * Anchors the popper to the mouse click for context events
      */
-    setOpen: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;
+    contextTarget: ReturnType<typeof usePositioningMouseTarget>[0];
     /**
-     * Internal react node that just simplifies handling children
+     * Whether this menu is a submenu
      */
-    menuPopover: React_2.ReactNode;
+    isSubmenu: boolean;
     /**
      * Internal react node that just simplifies handling children
      */
-    menuTrigger: React_2.ReactNode;
+    menuPopover: React_2.ReactNode;
     /**
      * The ref for the popup
      */
     menuPopoverRef: React_2.MutableRefObject<HTMLElement>;
     /**
-     * The ref for the MenuTrigger, used for popup positioning
+     * Internal react node that just simplifies handling children
      */
-    triggerRef: React_2.MutableRefObject<HTMLElement>;
+    menuTrigger: React_2.ReactNode;
     /**
-     * Id for the MenuTrigger element for aria relationship
+     * A callback to set the target of the popper to the mouse click for context events
      */
-    triggerId: string;
+    setContextTarget: ReturnType<typeof usePositioningMouseTarget>[1];
     /**
-     * Whether this menu is a submenu
+     * Callback to open/close the popup
      */
-    isSubmenu: boolean;
+    setOpen: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;
     /**
-     * Anchors the popper to the mouse click for context events
+     * Id for the MenuTrigger element for aria relationship
      */
-    contextTarget: ReturnType<typeof usePopperMouseTarget>[0];
+    triggerId: string;
     /**
-     * A callback to set the target of the popper to the mouse click for context events
+     * The ref for the MenuTrigger, used for popup positioning
      */
-    setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
+    triggerRef: React_2.MutableRefObject<HTMLElement>;
 };
 
 /**
@@ -581,7 +551,7 @@ export declare const renderMenuTrigger_unstable: (state: MenuTriggerState) => JS
 
 export declare type SelectableHandler = (e: React_2.MouseEvent | React_2.KeyboardEvent, name: string, value: string, checked: boolean) => void;
 
-export declare type UninitializedMenuListState = Omit<MenuListState, 'setFocusByFirstCharacter' | 'toggleCheckbox' | 'selectRadio' | 'checkedValues'> & Partial<Pick<MenuListState, 'checkedValues'>>;
+export declare type UninitializedMenuListState = Omit<MenuListState, 'checkedValues' | 'selectRadio' | 'setFocusByFirstCharacter' | 'toggleCheckbox'> & Partial<Pick<MenuListState, 'checkedValues'>>;
 
 /**
  * Applies styles to a checkmark slot for selectable menu items

package/lib/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Menu/Menu.tsx"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,WAAjC;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,mBAAT,QAAoC,cAApC;AAGA;;AAEG;;AACH,OAAO,MAAM,IAAI,GAAwB,KAAK,IAAG;AAC/C,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAD,CAA9B;AACA,QAAM,aAAa,GAAG,6BAA6B,CAAC,KAAD,CAAnD;AAEA,SAAO,mBAAmB,CAAC,KAAD,EAAQ,aAAR,CAA1B;AACD,CALM;AAOP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from 'react';\nimport { useMenu_unstable } from './useMenu';\nimport { useMenuContextValues_unstable } from './useMenuContextValues';\nimport { renderMenu_unstable } from './renderMenu';\nimport type { MenuProps } from './Menu.types';\n\n/**\n * Wrapper component that manages state for a popup MenuList and a MenuTrigger\n */\nexport const Menu: React.FC<MenuProps> = props => {\n  const state = useMenu_unstable(props);\n  const contextValues = useMenuContextValues_unstable(state);\n\n  return renderMenu_unstable(state, contextValues);\n};\n\nMenu.displayName = 'Menu';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Menu/Menu.tsx"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,WAAjC;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,mBAAT,QAAoC,cAApC;AAGA;;AAEG;;AACH,OAAO,MAAM,IAAI,GAAwB,KAAK,IAAG;EAC/C,MAAM,KAAK,GAAG,gBAAgB,CAAC,KAAD,CAA9B;EACA,MAAM,aAAa,GAAG,6BAA6B,CAAC,KAAD,CAAnD;EAEA,OAAO,mBAAmB,CAAC,KAAD,EAAQ,aAAR,CAA1B;AACD,CALM;AAOP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from 'react';\nimport { useMenu_unstable } from './useMenu';\nimport { useMenuContextValues_unstable } from './useMenuContextValues';\nimport { renderMenu_unstable } from './renderMenu';\nimport type { MenuProps } from './Menu.types';\n\n/**\n * Wrapper component that manages state for a popup MenuList and a MenuTrigger\n */\nexport const Menu: React.FC<MenuProps> = props => {\n  const state = useMenu_unstable(props);\n  const contextValues = useMenuContextValues_unstable(state);\n\n  return renderMenu_unstable(state, contextValues);\n};\n\nMenu.displayName = 'Menu';\n"],"sourceRoot":"../src/"}

package/lib/components/Menu/Menu.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.types.js","sourceRoot":"../src/","sources":["components/Menu/Menu.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { usePopperMouseTarget, PositioningShorthand } from '@fluentui/react-positioning';\nimport { MenuListCommons } from '../MenuList/MenuList.types';\nimport { MenuContextValue } from '../../contexts/menuContext';\n\ntype MenuCommons = MenuListCommons & {\n  /**\n   * Whether the popup is open\n   */\n  open: boolean;\n\n  /**\n   * Call back when the component requests to change value\n   * The `open` value is used as a hint when directly controlling the component\n   */\n  onOpenChange?: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;\n\n  /**\n   * Whether the popup is open by default\n   */\n  defaultOpen?: boolean;\n\n  /*\n   * Opens the menu on hover\n   */\n  openOnHover: boolean;\n\n  /**\n   * Opens the menu on right click (context menu), removes all other menu open interactions\n   */\n  openOnContext?: boolean;\n\n  /**\n   * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n   * This option is disregarded for submenus\n   */\n  inline?: boolean;\n\n  /**\n   * Do not dismiss the menu when a menu item is clicked\n   */\n  persistOnItemClick?: boolean;\n\n  /**\n   * Sets the delay for mouse open/close for the popover one mouse enter/leave\n   */\n  hoverDelay?: number;\n};\n\nexport type MenuSlots = {};\n\n/**\n * Extends and drills down Menulist props to simplify API\n */\nexport type MenuProps = Partial<MenuCommons> &\n  ComponentProps<MenuSlots> & {\n    /**\n     * Can contain two children including {@link MenuTrigger} and {@link MenuPopover}.\n     * Alternatively can only contain {@link MenuPopover} if using a custom `target`.\n     */\n    children: [JSX.Element, JSX.Element] | JSX.Element;\n\n    /**\n     * Configures the positioned menu\n     */\n    positioning?: PositioningShorthand;\n  };\n\nexport type MenuState = MenuCommons &\n  ComponentState<MenuSlots> & {\n    /**\n     * Callback to open/close the popup\n     */\n    setOpen: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuPopover: React.ReactNode;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuTrigger: React.ReactNode;\n\n    /**\n     * The ref for the popup\n     */\n    menuPopoverRef: React.MutableRefObject<HTMLElement>;\n\n    /**\n     * The ref for the MenuTrigger, used for popup positioning\n     */\n    triggerRef: React.MutableRefObject<HTMLElement>;\n\n    /**\n     * Id for the MenuTrigger element for aria relationship\n     */\n    triggerId: string;\n\n    /**\n     * Whether this menu is a submenu\n     */\n    isSubmenu: boolean;\n\n    /**\n     * Anchors the popper to the mouse click for context events\n     */\n    contextTarget: ReturnType<typeof usePopperMouseTarget>[0];\n\n    /**\n     * A callback to set the target of the popper to the mouse click for context events\n     */\n    setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];\n  };\n\n/**\n * Data attached to open/close events\n */\nexport type MenuOpenChangeData = {\n  open: boolean;\n  /**\n   * Indicates whether the change of state was a keyboard interaction\n   */\n  keyboard?: boolean;\n  /**\n   * indicates whether the request for the open state was bubbled from a nested menu\n   */\n  bubble?: boolean;\n};\n\nexport type MenuContextValues = {\n  menu: MenuContextValue;\n};\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type MenuOpenEvents =\n  | MouseEvent\n  | TouchEvent\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n"]}
+{"version":3,"file":"Menu.types.js","sourceRoot":"../src/","sources":["components/Menu/Menu.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { usePositioningMouseTarget } from '@fluentui/react-positioning';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { MenuContextValue } from '../../contexts/menuContext';\nimport type { MenuListProps } from '../MenuList/MenuList.types';\n\nexport type MenuSlots = {};\n\n/**\n * Extends and drills down Menulist props to simplify API\n */\nexport type MenuProps = ComponentProps<MenuSlots> &\n  Pick<\n    MenuListProps,\n    'checkedValues' | 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'onCheckedValueChange'\n  > & {\n    /**\n     * Can contain two children including {@link MenuTrigger} and {@link MenuPopover}.\n     * Alternatively can only contain {@link MenuPopover} if using a custom `target`.\n     */\n    children: [JSX.Element, JSX.Element] | JSX.Element;\n\n    /**\n     * Whether the popup is open by default\n     *\n     * @default false\n     */\n    defaultOpen?: boolean;\n\n    /**\n     * Sets the delay for mouse open/close for the popover one mouse enter/leave\n     */\n    hoverDelay?: number;\n\n    /**\n     * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n     * This option is disregarded for submenus\n     *\n     * @default false\n     */\n    inline?: boolean;\n\n    /**\n     * Call back when the component requests to change value\n     * The `open` value is used as a hint when directly controlling the component\n     */\n    onOpenChange?: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;\n\n    /**\n     * Whether the popup is open\n     *\n     * @default false\n     */\n    open?: boolean;\n\n    /**\n     * Opens the menu on right click (context menu), removes all other menu open interactions\n     *\n     * @default false\n     */\n    openOnContext?: boolean;\n\n    /**\n     * Opens the menu on hover\n     *\n     * @default false\n     */\n    openOnHover?: boolean;\n\n    /**\n     * Do not dismiss the menu when a menu item is clicked\n     *\n     * @default false\n     */\n    persistOnItemClick?: boolean;\n\n    /**\n     * Configures the positioned menu\n     */\n    positioning?: PositioningShorthand;\n\n    /**\n     * Close when scroll outside of it\n     *\n     * @default false\n     */\n    closeOnScroll?: boolean;\n  };\n\nexport type MenuState = ComponentState<MenuSlots> &\n  Pick<\n    MenuProps,\n    | 'defaultCheckedValues'\n    | 'hasCheckmarks'\n    | 'hasIcons'\n    | 'inline'\n    | 'onOpenChange'\n    | 'openOnContext'\n    | 'persistOnItemClick'\n  > &\n  Required<Pick<MenuProps, 'checkedValues' | 'onCheckedValueChange' | 'open' | 'openOnHover' | 'closeOnScroll'>> & {\n    /**\n     * Anchors the popper to the mouse click for context events\n     */\n    contextTarget: ReturnType<typeof usePositioningMouseTarget>[0];\n\n    /**\n     * Whether this menu is a submenu\n     */\n    isSubmenu: boolean;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuPopover: React.ReactNode;\n\n    /**\n     * The ref for the popup\n     */\n    menuPopoverRef: React.MutableRefObject<HTMLElement>;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuTrigger: React.ReactNode;\n\n    /**\n     * A callback to set the target of the popper to the mouse click for context events\n     */\n    setContextTarget: ReturnType<typeof usePositioningMouseTarget>[1];\n\n    /**\n     * Callback to open/close the popup\n     */\n    setOpen: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;\n\n    /**\n     * Id for the MenuTrigger element for aria relationship\n     */\n    triggerId: string;\n\n    /**\n     * The ref for the MenuTrigger, used for popup positioning\n     */\n    triggerRef: React.MutableRefObject<HTMLElement>;\n  };\n\n/**\n * Data attached to open/close events\n */\nexport type MenuOpenChangeData = {\n  /**\n   * indicates whether the request for the open state was bubbled from a nested menu\n   */\n  bubble?: boolean;\n  /**\n   * Indicates whether the change of state was a keyboard interaction\n   */\n  keyboard?: boolean;\n  open: boolean;\n};\n\nexport type MenuContextValues = {\n  menu: MenuContextValue;\n};\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type MenuOpenEvents =\n  | MouseEvent\n  | TouchEvent\n  | React.FocusEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.MouseEvent<HTMLElement>;\n"]}

package/lib/components/Menu/renderMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Menu/renderMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,4BAA7B;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAmB,aAAnB,KAAuD;AACxF,sBACE,KAAA,CAAA,aAAA,CAAC,YAAD,EAAa;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAb,EACG,KAAK,CAAC,WADT,EAEG,KAAK,CAAC,IAAN,IAAc,KAAK,CAAC,WAFvB,CADF;AAMD,CAPM","sourcesContent":["import * as React from 'react';\nimport { MenuProvider } from '../../contexts/menuContext';\nimport type { MenuContextValues, MenuState } from './Menu.types';\n\n/**\n * Render the final JSX of Menu\n */\nexport const renderMenu_unstable = (state: MenuState, contextValues: MenuContextValues) => {\n  return (\n    <MenuProvider value={contextValues.menu}>\n      {state.menuTrigger}\n      {state.open && state.menuPopover}\n    </MenuProvider>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Menu/renderMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,4BAA7B;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAmB,aAAnB,KAAuD;EACxF,oBACE,KAAA,CAAA,aAAA,CAAC,YAAD,EAAa;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAb,EACG,KAAK,CAAC,WADT,EAEG,KAAK,CAAC,IAAN,IAAc,KAAK,CAAC,WAFvB,CADF;AAMD,CAPM","sourcesContent":["import * as React from 'react';\nimport { MenuProvider } from '../../contexts/menuContext';\nimport type { MenuContextValues, MenuState } from './Menu.types';\n\n/**\n * Render the final JSX of Menu\n */\nexport const renderMenu_unstable = (state: MenuState, contextValues: MenuContextValues) => {\n  return (\n    <MenuProvider value={contextValues.menu}>\n      {state.menuTrigger}\n      {state.open && state.menuPopover}\n    </MenuProvider>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Menu/useMenu.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { usePopperMouseTarget, usePopper, resolvePositioningShorthand } from '@fluentui/react-positioning';
-import { useControllableState, useId, useOnClickOutside, useEventCallback } from '@fluentui/react-utilities';
-import { useFluent } from '@fluentui/react-shared-contexts';
+import { usePositioningMouseTarget, usePositioning, resolvePositioningShorthand } from '@fluentui/react-positioning';
+import { useControllableState, useId, useOnClickOutside, useEventCallback, useOnScrollOutside } from '@fluentui/react-utilities';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { elementContains } from '@fluentui/react-portal';
 import { useFocusFinders } from '@fluentui/react-tabster';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
@@ -17,10 +17,12 @@ import { useIsSubmenu } from '../../utils/useIsSubmenu';
  */
 
 export const useMenu_unstable = props => {
+  var _a;
+
   const triggerId = useId('menu');
   const isSubmenu = useIsSubmenu();
-  const [contextTarget, setContextTarget] = usePopperMouseTarget();
-  const popperState = {
+  const [contextTarget, setContextTarget] = usePositioningMouseTarget();
+  const positioningState = {
     position: isSubmenu ? 'after' : 'below',
     align: isSubmenu ? 'top' : 'start',
     target: props.openOnContext ? contextTarget : undefined,
@@ -53,7 +55,7 @@ export const useMenu_unstable = props => {
   const {
     targetRef: triggerRef,
     containerRef: menuPopoverRef
-  } = usePopper(popperState);
+  } = usePositioning(positioningState);
   const initialState = {
     hoverDelay: 500,
     triggerId,
@@ -62,6 +64,7 @@ export const useMenu_unstable = props => {
     contextTarget,
     setContextTarget,
     ...props,
+    closeOnScroll: (_a = props.closeOnScroll) !== null && _a !== void 0 ? _a : false,
     menuTrigger,
     menuPopover,
     triggerRef,
@@ -187,10 +190,21 @@ const useMenuOpenState = state => {
     contains: elementContains,
     disabled: !open,
     element: targetDocument,
-    refs: [state.menuPopoverRef, state.triggerRef],
+    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(Boolean),
     callback: e => setOpen(e, {
       open: false
     })
+  }); // only close on scroll for context, or when closeOnScroll is specified
+
+  const closeOnScroll = state.openOnContext || state.closeOnScroll;
+  useOnScrollOutside({
+    contains: elementContains,
+    element: targetDocument,
+    callback: ev => setOpen(ev, {
+      open: false
+    }),
+    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(Boolean),
+    disabled: !open || !closeOnScroll
   });
   useOnMenuMouseEnter({
     element: targetDocument,