@fluentui/react-menu 0.0.0-nightly-20230302-0419.1 → 0.0.0-nightly-20230306-0424.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-menu",
   "entries": [
     {
-      "date": "Thu, 02 Mar 2023 04:26:39 GMT",
-      "tag": "@fluentui/react-menu_v0.0.0-nightly-20230302-0419.1",
-      "version": "0.0.0-nightly-20230302-0419.1",
+      "date": "Mon, 06 Mar 2023 04:32:59 GMT",
+      "tag": "@fluentui/react-menu_v0.0.0-nightly-20230306-0424.1",
+      "version": "0.0.0-nightly-20230306-0424.1",
       "comments": {
         "prerelease": [
           {
@@ -16,62 +16,62 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20230302-0419.1",
-            "commit": "d9553f50e6b7a448d4825354c6f585b060c69a7e"
+            "comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20230306-0424.1",
+            "commit": "21155fb094f73d947066cedf7577d2483dfab473"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230302-0419.1",
-            "commit": "d9553f50e6b7a448d4825354c6f585b060c69a7e"
+            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230306-0424.1",
+            "commit": "21155fb094f73d947066cedf7577d2483dfab473"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230302-0419.1",
-            "commit": "d9553f50e6b7a448d4825354c6f585b060c69a7e"
+            "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230306-0424.1",
+            "commit": "21155fb094f73d947066cedf7577d2483dfab473"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-portal to v0.0.0-nightly-20230302-0419.1",
-            "commit": "d9553f50e6b7a448d4825354c6f585b060c69a7e"
+            "comment": "Bump @fluentui/react-portal to v0.0.0-nightly-20230306-0424.1",
+            "commit": "21155fb094f73d947066cedf7577d2483dfab473"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-positioning to v0.0.0-nightly-20230302-0419.1",
-            "commit": "d9553f50e6b7a448d4825354c6f585b060c69a7e"
+            "comment": "Bump @fluentui/react-positioning to v0.0.0-nightly-20230306-0424.1",
+            "commit": "21155fb094f73d947066cedf7577d2483dfab473"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230302-0419.1",
-            "commit": "d9553f50e6b7a448d4825354c6f585b060c69a7e"
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230306-0424.1",
+            "commit": "21155fb094f73d947066cedf7577d2483dfab473"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230302-0419.1",
-            "commit": "d9553f50e6b7a448d4825354c6f585b060c69a7e"
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230306-0424.1",
+            "commit": "21155fb094f73d947066cedf7577d2483dfab473"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230302-0419.1",
-            "commit": "d9553f50e6b7a448d4825354c6f585b060c69a7e"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230306-0424.1",
+            "commit": "21155fb094f73d947066cedf7577d2483dfab473"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230302-0419.1",
-            "commit": "d9553f50e6b7a448d4825354c6f585b060c69a7e"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230306-0424.1",
+            "commit": "21155fb094f73d947066cedf7577d2483dfab473"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230302-0419.1",
-            "commit": "d9553f50e6b7a448d4825354c6f585b060c69a7e"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230306-0424.1",
+            "commit": "21155fb094f73d947066cedf7577d2483dfab473"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,27 +1,27 @@
 # Change Log - @fluentui/react-menu
 
-This log was last generated on Thu, 02 Mar 2023 04:26:39 GMT and should not be manually modified.
+This log was last generated on Mon, 06 Mar 2023 04:32:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230302-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v0.0.0-nightly-20230302-0419.1)
+## [0.0.0-nightly-20230306-0424.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v0.0.0-nightly-20230306-0424.1)
 
-Thu, 02 Mar 2023 04:26:39 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.6.12..@fluentui/react-menu_v0.0.0-nightly-20230302-0419.1)
+Mon, 06 Mar 2023 04:32:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.6.12..@fluentui/react-menu_v0.0.0-nightly-20230306-0424.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-aria to v0.0.0-nightly-20230302-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/d9553f50e6b7a448d4825354c6f585b060c69a7e) by beachball)
-- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230302-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/d9553f50e6b7a448d4825354c6f585b060c69a7e) by beachball)
-- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230302-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/d9553f50e6b7a448d4825354c6f585b060c69a7e) by beachball)
-- Bump @fluentui/react-portal to v0.0.0-nightly-20230302-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/d9553f50e6b7a448d4825354c6f585b060c69a7e) by beachball)
-- Bump @fluentui/react-positioning to v0.0.0-nightly-20230302-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/d9553f50e6b7a448d4825354c6f585b060c69a7e) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230302-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/d9553f50e6b7a448d4825354c6f585b060c69a7e) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20230302-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/d9553f50e6b7a448d4825354c6f585b060c69a7e) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230302-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/d9553f50e6b7a448d4825354c6f585b060c69a7e) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230302-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/d9553f50e6b7a448d4825354c6f585b060c69a7e) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230302-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/d9553f50e6b7a448d4825354c6f585b060c69a7e) by beachball)
+- Bump @fluentui/react-aria to v0.0.0-nightly-20230306-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/21155fb094f73d947066cedf7577d2483dfab473) by beachball)
+- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230306-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/21155fb094f73d947066cedf7577d2483dfab473) by beachball)
+- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230306-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/21155fb094f73d947066cedf7577d2483dfab473) by beachball)
+- Bump @fluentui/react-portal to v0.0.0-nightly-20230306-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/21155fb094f73d947066cedf7577d2483dfab473) by beachball)
+- Bump @fluentui/react-positioning to v0.0.0-nightly-20230306-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/21155fb094f73d947066cedf7577d2483dfab473) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230306-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/21155fb094f73d947066cedf7577d2483dfab473) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20230306-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/21155fb094f73d947066cedf7577d2483dfab473) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230306-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/21155fb094f73d947066cedf7577d2483dfab473) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230306-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/21155fb094f73d947066cedf7577d2483dfab473) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230306-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/21155fb094f73d947066cedf7577d2483dfab473) by beachball)
 
 ## [9.6.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.6.12)
 

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ContextSelector } from '@fluentui/react-context-selector';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { PortalProps } from '@fluentui/react-portal';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
 import { PositioningVirtualElement } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
@@ -34,7 +35,7 @@ export declare type MenuCheckedValueChangeEvent = React_2.MouseEvent | React_2.K
  *
  * Extends and drills down MenuList props to simplify API
  */
-export declare type MenuContextValue = Pick<MenuState, 'openOnHover' | 'openOnContext' | 'triggerRef' | 'menuPopoverRef' | 'setOpen' | 'isSubmenu' | 'triggerId' | 'hasIcons' | 'hasCheckmarks' | 'persistOnItemClick' | 'inline' | 'checkedValues' | 'onCheckedValueChange'> & {
+export declare type MenuContextValue = Pick<MenuState, 'openOnHover' | 'openOnContext' | 'triggerRef' | 'menuPopoverRef' | 'setOpen' | 'isSubmenu' | 'mountNode' | 'triggerId' | 'hasIcons' | 'hasCheckmarks' | 'persistOnItemClick' | 'inline' | 'checkedValues' | 'onCheckedValueChange'> & {
     open: boolean;
     triggerId: string;
     /**
@@ -376,7 +377,7 @@ export declare type MenuPopoverSlots = {
 /**
  * State used in rendering MenuPopover
  */
-export declare type MenuPopoverState = ComponentState<MenuPopoverSlots> & {
+export declare type MenuPopoverState = ComponentState<MenuPopoverSlots> & Pick<PortalProps, 'mountNode'> & {
     /**
      * 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
@@ -387,7 +388,7 @@ export declare type MenuPopoverState = ComponentState<MenuPopoverSlots> & {
 /**
  * Extends and drills down Menulist props to simplify API
  */
-export declare type MenuProps = ComponentProps<MenuSlots> & Pick<MenuListProps, 'checkedValues' | 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'onCheckedValueChange'> & {
+export declare type MenuProps = ComponentProps<MenuSlots> & Pick<PortalProps, 'mountNode'> & 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`.
@@ -476,7 +477,7 @@ export declare type MenuSplitGroupSlots = {
  */
 export declare type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots>;
 
-export declare type MenuState = ComponentState<MenuSlots> & Required<Pick<MenuProps, 'hasCheckmarks' | 'hasIcons' | 'inline' | 'checkedValues' | 'onCheckedValueChange' | 'open' | 'openOnHover' | 'closeOnScroll' | 'hoverDelay' | 'openOnContext' | 'persistOnItemClick'>> & {
+export declare type MenuState = ComponentState<MenuSlots> & Required<Pick<MenuProps, 'hasCheckmarks' | 'hasIcons' | 'mountNode' | 'inline' | 'checkedValues' | 'onCheckedValueChange' | 'open' | 'openOnHover' | 'closeOnScroll' | 'hoverDelay' | 'openOnContext' | 'persistOnItemClick'>> & {
     /**
      * Anchors the popper to the mouse click for context events
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/Menu/Menu.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { PositioningVirtualElement, SetVirtualMouseTarget } 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     * 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: MenuOpenEvent, data: MenuOpenChangeData) => void;\n\n    /**\n     * Whether the popup is open\n     *\n     * @default false\n     */\n    open?: boolean;\n\n    /**\n     * Whether the popup is open by default\n     *\n     * @default false\n     */\n    defaultOpen?: 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  Required<\n    Pick<\n      MenuProps,\n      | 'hasCheckmarks'\n      | 'hasIcons'\n      | 'inline'\n      | 'checkedValues'\n      | 'onCheckedValueChange'\n      | 'open'\n      | 'openOnHover'\n      | 'closeOnScroll'\n      | 'hoverDelay'\n      | 'openOnContext'\n      | 'persistOnItemClick'\n    >\n  > & {\n    /**\n     * Anchors the popper to the mouse click for context events\n     */\n    contextTarget?: PositioningVirtualElement;\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: SetVirtualMouseTarget;\n\n    /**\n     * Callback to open/close the popup\n     */\n    setOpen: (e: MenuOpenEvent, 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     * Call back when the component requests to change value\n     * The `open` value is used as a hint when directly controlling the component\n     * @deprecated this property is not used internally anymore,\n     * the signature remains just to avoid breaking changes\n     */\n    onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n    /**\n     * Default values to be checked on mount\n     @deprecated this property is not used internally anymore,\n     * the signature remains just to avoid breaking changes\n     */\n    defaultCheckedValues?: Record<string, string[]>;\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 MenuOpenEvent = MenuOpenChangeData['event'];\n/**\n * @deprecated use MenuOpenEvent instead\n */\nexport type MenuOpenEvents = MenuOpenEvent;\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   * @deprecated\n   * This should not be used, since `Enter`, `Space` and click should be interpreted as the same thing as a click\n   */\n  keyboard?: boolean;\n  open: boolean;\n} & (\n  | {\n      type: 'menuTriggerContextMenu';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerClick';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseEnter';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseLeave';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseMove';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerKeyDown';\n      event: React.KeyboardEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuItemClick';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuPopoverMouseEnter';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuPopoverKeyDown';\n      event: React.KeyboardEvent<HTMLElement>;\n    }\n  | {\n      type: 'clickOutside';\n      event: MouseEvent | TouchEvent;\n    }\n  | {\n      type: 'scrollOutside';\n      event: MouseEvent | TouchEvent;\n    }\n  | {\n      type: 'menuMouseEnter';\n      event: MouseEvent | TouchEvent;\n    }\n);\n"]}
+{"version":3,"file":"Menu.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/Menu/Menu.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { PositioningVirtualElement, SetVirtualMouseTarget } from '@fluentui/react-positioning';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\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<PortalProps, 'mountNode'> &\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     * 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: MenuOpenEvent, data: MenuOpenChangeData) => void;\n\n    /**\n     * Whether the popup is open\n     *\n     * @default false\n     */\n    open?: boolean;\n\n    /**\n     * Whether the popup is open by default\n     *\n     * @default false\n     */\n    defaultOpen?: 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  Required<\n    Pick<\n      MenuProps,\n      | 'hasCheckmarks'\n      | 'hasIcons'\n      | 'mountNode'\n      | 'inline'\n      | 'checkedValues'\n      | 'onCheckedValueChange'\n      | 'open'\n      | 'openOnHover'\n      | 'closeOnScroll'\n      | 'hoverDelay'\n      | 'openOnContext'\n      | 'persistOnItemClick'\n    >\n  > & {\n    /**\n     * Anchors the popper to the mouse click for context events\n     */\n    contextTarget?: PositioningVirtualElement;\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: SetVirtualMouseTarget;\n\n    /**\n     * Callback to open/close the popup\n     */\n    setOpen: (e: MenuOpenEvent, 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     * Call back when the component requests to change value\n     * The `open` value is used as a hint when directly controlling the component\n     * @deprecated this property is not used internally anymore,\n     * the signature remains just to avoid breaking changes\n     */\n    onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n    /**\n     * Default values to be checked on mount\n     @deprecated this property is not used internally anymore,\n     * the signature remains just to avoid breaking changes\n     */\n    defaultCheckedValues?: Record<string, string[]>;\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 MenuOpenEvent = MenuOpenChangeData['event'];\n/**\n * @deprecated use MenuOpenEvent instead\n */\nexport type MenuOpenEvents = MenuOpenEvent;\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   * @deprecated\n   * This should not be used, since `Enter`, `Space` and click should be interpreted as the same thing as a click\n   */\n  keyboard?: boolean;\n  open: boolean;\n} & (\n  | {\n      type: 'menuTriggerContextMenu';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerClick';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseEnter';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseLeave';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseMove';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerKeyDown';\n      event: React.KeyboardEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuItemClick';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuPopoverMouseEnter';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuPopoverKeyDown';\n      event: React.KeyboardEvent<HTMLElement>;\n    }\n  | {\n      type: 'clickOutside';\n      event: MouseEvent | TouchEvent;\n    }\n  | {\n      type: 'scrollOutside';\n      event: MouseEvent | TouchEvent;\n    }\n  | {\n      type: 'menuMouseEnter';\n      event: MouseEvent | TouchEvent;\n    }\n);\n"]}

package/lib/components/Menu/useMenu.js

@@ -29,7 +29,8 @@ export const useMenu_unstable = props => {
     openOnContext = false,
     persistOnItemClick = false,
     openOnHover = isSubmenu,
-    defaultCheckedValues
+    defaultCheckedValues,
+    mountNode = null
   } = props;
   const triggerId = useId('menu');
   const [contextTarget, setContextTarget] = usePositioningMouseTarget();
@@ -94,6 +95,7 @@ export const useMenu_unstable = props => {
     closeOnScroll,
     menuTrigger,
     menuPopover,
+    mountNode,
     triggerRef,
     menuPopoverRef,
     components: {},

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

@@ -1 +1 @@
-{"version":3,"names":["React","usePositioningMouseTarget","usePositioning","resolvePositioningShorthand","useControllableState","useId","useOnClickOutside","useEventCallback","useOnScrollOutside","useFluent_unstable","useFluent","elementContains","useFocusFinders","useMenuContext_unstable","MENU_ENTER_EVENT","useOnMenuMouseEnter","useIsSubmenu","submenuFallbackPositions","useMenu_unstable","props","isSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","triggerId","contextTarget","setContextTarget","positioningState","position","align","target","undefined","fallbackPositions","positioning","children","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","triggerRef","containerRef","menuPopoverRef","open","setOpen","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","setCheckedValues","state","defaultState","initialState","e","name","checkedItems","_a","call","currentValue","targetDocument","parentSetOpen","context","data","shouldHandleCloseRef","useRef","setOpenTimeout","enteringTriggerRef","setOpenState","trySetOpen","event","CustomEvent","type","detail","nativeEvent","current","bubble","clearTimeout","Event","persist","contains","setTimeout","disabled","element","refs","filter","Boolean","callback","useEffect","findFirstFocusable","focusFirst","useCallback","firstFocusable","focus"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/Menu/useMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  usePositioningMouseTarget,\n  usePositioning,\n  resolvePositioningShorthand,\n  PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n  useControllableState,\n  useId,\n  useOnClickOutside,\n  useEventCallback,\n  useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuOpenChangeData, MenuOpenEvent, MenuProps, MenuState } from './Menu.types';\n\n// If it's not possible to position the submenu in smaller viewports, try\n// and fallback to this order of positions\nconst submenuFallbackPositions: PositioningShorthandValue[] = [\n  'after',\n  'after-bottom',\n  'before-top',\n  'before',\n  'before-bottom',\n  'above',\n];\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n  const isSubmenu = useIsSubmenu();\n  const {\n    hoverDelay = 500,\n    inline = false,\n    hasCheckmarks = false,\n    hasIcons = false,\n    closeOnScroll = false,\n    openOnContext = false,\n    persistOnItemClick = false,\n    openOnHover = isSubmenu,\n    defaultCheckedValues,\n  } = props;\n  const triggerId = useId('menu');\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n  const positioningState = {\n    position: isSubmenu ? 'after' : 'below',\n    align: isSubmenu ? 'top' : 'start',\n    target: props.openOnContext ? contextTarget : undefined,\n    fallbackPositions: isSubmenu ? submenuFallbackPositions : undefined,\n    ...resolvePositioningShorthand(props.positioning),\n  } as const;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Menu must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Menu must contain at most two children');\n    }\n  }\n\n  let menuTrigger: React.ReactElement | undefined = undefined;\n  let menuPopover: React.ReactElement | undefined = undefined;\n  if (children.length === 2) {\n    menuTrigger = children[0];\n    menuPopover = children[1];\n  } else if (children.length === 1) {\n    menuPopover = children[0];\n  }\n\n  const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n  // TODO Better way to narrow types ?\n  const [open, setOpen] = useMenuOpenState({\n    hoverDelay,\n    isSubmenu,\n    setContextTarget,\n    closeOnScroll,\n    menuPopoverRef,\n    triggerRef,\n    open: props.open,\n    defaultOpen: props.defaultOpen,\n    onOpenChange: props.onOpenChange,\n    openOnContext,\n  });\n\n  const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\n\n  return {\n    inline,\n    hoverDelay,\n    triggerId,\n    isSubmenu,\n    openOnHover,\n    contextTarget,\n    setContextTarget,\n    hasCheckmarks,\n    hasIcons,\n    closeOnScroll,\n    menuTrigger,\n    menuPopover,\n    triggerRef,\n    menuPopoverRef,\n    components: {},\n    openOnContext,\n    open,\n    setOpen,\n    checkedValues,\n    onCheckedValueChange,\n    persistOnItemClick,\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n  props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues,\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n  const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    props.onCheckedValueChange?.(e, { name, checkedItems });\n\n    setCheckedValues(currentValue => ({\n      ...currentValue,\n      [name]: checkedItems,\n    }));\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n  state: Pick<\n    MenuState,\n    | 'isSubmenu'\n    | 'menuPopoverRef'\n    | 'setContextTarget'\n    | 'triggerRef'\n    | 'openOnContext'\n    | 'closeOnScroll'\n    | 'hoverDelay'\n  > &\n    Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n  const { targetDocument } = useFluent();\n  const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n  const onOpenChange: MenuProps['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const shouldHandleCloseRef = React.useRef(false);\n  const setOpenTimeout = React.useRef(0);\n  const enteringTriggerRef = React.useRef(false);\n\n  const [open, setOpenState] = useControllableState({\n    state: state.open,\n    defaultState: state.defaultOpen,\n    initialState: false,\n  });\n\n  const trySetOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n    const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n    onOpenChange?.(event, { ...data });\n    if (data.open && e.type === 'contextmenu') {\n      state.setContextTarget(e as React.MouseEvent);\n    }\n\n    if (!data.open) {\n      state.setContextTarget(undefined);\n      shouldHandleCloseRef.current = true;\n    }\n\n    if (data.bubble) {\n      parentSetOpen(e, { ...data });\n    }\n\n    setOpenState(data.open);\n  });\n\n  const setOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n    clearTimeout(setOpenTimeout.current);\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n      if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n        enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n      }\n\n      // FIXME leaking Node timeout type\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      setOpenTimeout.current = setTimeout(() => trySetOpen(e, data), state.hoverDelay);\n    } else {\n      trySetOpen(e, data);\n    }\n  });\n\n  useOnClickOutside({\n    contains: elementContains,\n    disabled: !open,\n    element: targetDocument,\n    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n      Boolean,\n    ) as React.MutableRefObject<HTMLElement>[],\n    callback: event => setOpen(event, { open: false, type: 'clickOutside', event }),\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = state.openOnContext || state.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }),\n    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n      Boolean,\n    ) as React.MutableRefObject<HTMLElement>[],\n    disabled: !open || !closeOnScroll,\n  });\n\n  useOnMenuMouseEnter({\n    element: targetDocument,\n    callback: event => {\n      // When moving from a menu directly back to its trigger, this handler can close the menu\n      // Explicitly check a flag to see if this situation happens\n      if (!enteringTriggerRef.current) {\n        setOpen(event, { open: false, type: 'menuMouseEnter', event });\n      }\n    },\n    disabled: !open,\n    refs: [state.menuPopoverRef],\n  });\n\n  // Clear timeout on unmount\n  // Setting state after a component unmounts can cause memory leaks\n  React.useEffect(() => {\n    return () => {\n      clearTimeout(setOpenTimeout.current);\n    };\n  }, []);\n\n  // Manage focus for open state\n  const { findFirstFocusable } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, state.menuPopoverRef]);\n\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    } else {\n      if (shouldHandleCloseRef.current) {\n        // We know that React effects are sync so we focus the trigger here\n        // after any event handler (event handlers will update state and re-render).\n        // Since the browser only performs the default behaviour for the Tab key once\n        // keyboard events have fully bubbled up the window, the browser will move\n        // focus to the next tabbable element before/after the trigger if needed.\n        // If the Tab key was not pressed, focus will remain on the trigger as expected.\n        state.triggerRef.current?.focus();\n      }\n    }\n\n    shouldHandleCloseRef.current = false;\n  }, [state.triggerRef, state.isSubmenu, open, focusFirst]);\n\n  return [open, setOpen] as const;\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","usePositioningMouseTarget","usePositioning","resolvePositioningShorthand","useControllableState","useId","useOnClickOutside","useEventCallback","useOnScrollOutside","useFluent_unstable","useFluent","elementContains","useFocusFinders","useMenuContext_unstable","MENU_ENTER_EVENT","useOnMenuMouseEnter","useIsSubmenu","submenuFallbackPositions","useMenu_unstable","props","isSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","mountNode","triggerId","contextTarget","setContextTarget","positioningState","position","align","target","undefined","fallbackPositions","positioning","children","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","triggerRef","containerRef","menuPopoverRef","open","setOpen","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","setCheckedValues","state","defaultState","initialState","e","name","checkedItems","_a","call","currentValue","targetDocument","parentSetOpen","context","data","shouldHandleCloseRef","useRef","setOpenTimeout","enteringTriggerRef","setOpenState","trySetOpen","event","CustomEvent","type","detail","nativeEvent","current","bubble","clearTimeout","Event","persist","contains","setTimeout","disabled","element","refs","filter","Boolean","callback","useEffect","findFirstFocusable","focusFirst","useCallback","firstFocusable","focus"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/Menu/useMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  usePositioningMouseTarget,\n  usePositioning,\n  resolvePositioningShorthand,\n  PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n  useControllableState,\n  useId,\n  useOnClickOutside,\n  useEventCallback,\n  useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuOpenChangeData, MenuOpenEvent, MenuProps, MenuState } from './Menu.types';\n\n// If it's not possible to position the submenu in smaller viewports, try\n// and fallback to this order of positions\nconst submenuFallbackPositions: PositioningShorthandValue[] = [\n  'after',\n  'after-bottom',\n  'before-top',\n  'before',\n  'before-bottom',\n  'above',\n];\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n  const isSubmenu = useIsSubmenu();\n  const {\n    hoverDelay = 500,\n    inline = false,\n    hasCheckmarks = false,\n    hasIcons = false,\n    closeOnScroll = false,\n    openOnContext = false,\n    persistOnItemClick = false,\n    openOnHover = isSubmenu,\n    defaultCheckedValues,\n    mountNode = null,\n  } = props;\n  const triggerId = useId('menu');\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n  const positioningState = {\n    position: isSubmenu ? 'after' : 'below',\n    align: isSubmenu ? 'top' : 'start',\n    target: props.openOnContext ? contextTarget : undefined,\n    fallbackPositions: isSubmenu ? submenuFallbackPositions : undefined,\n    ...resolvePositioningShorthand(props.positioning),\n  } as const;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Menu must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Menu must contain at most two children');\n    }\n  }\n\n  let menuTrigger: React.ReactElement | undefined = undefined;\n  let menuPopover: React.ReactElement | undefined = undefined;\n  if (children.length === 2) {\n    menuTrigger = children[0];\n    menuPopover = children[1];\n  } else if (children.length === 1) {\n    menuPopover = children[0];\n  }\n\n  const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n  // TODO Better way to narrow types ?\n  const [open, setOpen] = useMenuOpenState({\n    hoverDelay,\n    isSubmenu,\n    setContextTarget,\n    closeOnScroll,\n    menuPopoverRef,\n    triggerRef,\n    open: props.open,\n    defaultOpen: props.defaultOpen,\n    onOpenChange: props.onOpenChange,\n    openOnContext,\n  });\n\n  const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\n\n  return {\n    inline,\n    hoverDelay,\n    triggerId,\n    isSubmenu,\n    openOnHover,\n    contextTarget,\n    setContextTarget,\n    hasCheckmarks,\n    hasIcons,\n    closeOnScroll,\n    menuTrigger,\n    menuPopover,\n    mountNode,\n    triggerRef,\n    menuPopoverRef,\n    components: {},\n    openOnContext,\n    open,\n    setOpen,\n    checkedValues,\n    onCheckedValueChange,\n    persistOnItemClick,\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n  props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues,\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n  const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    props.onCheckedValueChange?.(e, { name, checkedItems });\n\n    setCheckedValues(currentValue => ({\n      ...currentValue,\n      [name]: checkedItems,\n    }));\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n  state: Pick<\n    MenuState,\n    | 'isSubmenu'\n    | 'menuPopoverRef'\n    | 'setContextTarget'\n    | 'triggerRef'\n    | 'openOnContext'\n    | 'closeOnScroll'\n    | 'hoverDelay'\n  > &\n    Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n  const { targetDocument } = useFluent();\n  const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n  const onOpenChange: MenuProps['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const shouldHandleCloseRef = React.useRef(false);\n  const setOpenTimeout = React.useRef(0);\n  const enteringTriggerRef = React.useRef(false);\n\n  const [open, setOpenState] = useControllableState({\n    state: state.open,\n    defaultState: state.defaultOpen,\n    initialState: false,\n  });\n\n  const trySetOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n    const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n    onOpenChange?.(event, { ...data });\n    if (data.open && e.type === 'contextmenu') {\n      state.setContextTarget(e as React.MouseEvent);\n    }\n\n    if (!data.open) {\n      state.setContextTarget(undefined);\n      shouldHandleCloseRef.current = true;\n    }\n\n    if (data.bubble) {\n      parentSetOpen(e, { ...data });\n    }\n\n    setOpenState(data.open);\n  });\n\n  const setOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n    clearTimeout(setOpenTimeout.current);\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n      if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n        enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n      }\n\n      // FIXME leaking Node timeout type\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      setOpenTimeout.current = setTimeout(() => trySetOpen(e, data), state.hoverDelay);\n    } else {\n      trySetOpen(e, data);\n    }\n  });\n\n  useOnClickOutside({\n    contains: elementContains,\n    disabled: !open,\n    element: targetDocument,\n    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n      Boolean,\n    ) as React.MutableRefObject<HTMLElement>[],\n    callback: event => setOpen(event, { open: false, type: 'clickOutside', event }),\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = state.openOnContext || state.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }),\n    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n      Boolean,\n    ) as React.MutableRefObject<HTMLElement>[],\n    disabled: !open || !closeOnScroll,\n  });\n\n  useOnMenuMouseEnter({\n    element: targetDocument,\n    callback: event => {\n      // When moving from a menu directly back to its trigger, this handler can close the menu\n      // Explicitly check a flag to see if this situation happens\n      if (!enteringTriggerRef.current) {\n        setOpen(event, { open: false, type: 'menuMouseEnter', event });\n      }\n    },\n    disabled: !open,\n    refs: [state.menuPopoverRef],\n  });\n\n  // Clear timeout on unmount\n  // Setting state after a component unmounts can cause memory leaks\n  React.useEffect(() => {\n    return () => {\n      clearTimeout(setOpenTimeout.current);\n    };\n  }, []);\n\n  // Manage focus for open state\n  const { findFirstFocusable } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, state.menuPopoverRef]);\n\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    } else {\n      if (shouldHandleCloseRef.current) {\n        // We know that React effects are sync so we focus the trigger here\n        // after any event handler (event handlers will update state and re-render).\n        // Since the browser only performs the default behaviour for the Tab key once\n        // keyboard events have fully bubbled up the window, the browser will move\n        // focus to the next tabbable element before/after the trigger if needed.\n        // If the Tab key was not pressed, focus will remain on the trigger as expected.\n        state.triggerRef.current?.focus();\n      }\n    }\n\n    shouldHandleCloseRef.current = false;\n  }, [state.triggerRef, state.isSubmenu, open, focusFirst]);\n\n  return [open, setOpen] as const;\n};\n"],"mappings":"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"}

package/lib/components/Menu/useMenuContextValues.js

@@ -6,6 +6,7 @@ export function useMenuContextValues_unstable(state) {
     inline,
     isSubmenu,
     menuPopoverRef,
+    mountNode,
     onCheckedValueChange,
     open,
     openOnContext,
@@ -23,6 +24,7 @@ export function useMenuContextValues_unstable(state) {
     inline,
     isSubmenu,
     menuPopoverRef,
+    mountNode,
     onCheckedValueChange,
     open,
     openOnContext,

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

@@ -1 +1 @@
-{"version":3,"names":["useMenuContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","inline","isSubmenu","menuPopoverRef","onCheckedValueChange","open","openOnContext","openOnHover","persistOnItemClick","setOpen","triggerId","triggerRef","menu"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/Menu/useMenuContextValues.ts"],"sourcesContent":["import type { MenuContextValues, MenuState } from './Menu.types';\n\nexport function useMenuContextValues_unstable(state: MenuState): MenuContextValues {\n  const {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    inline,\n    isSubmenu,\n    menuPopoverRef,\n    onCheckedValueChange,\n    open,\n    openOnContext,\n    openOnHover,\n    persistOnItemClick,\n    setOpen,\n    triggerId,\n    triggerRef,\n  } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const menu = {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    inline,\n    isSubmenu,\n    menuPopoverRef,\n    onCheckedValueChange,\n    open,\n    openOnContext,\n    openOnHover,\n    persistOnItemClick,\n    setOpen,\n    triggerId,\n    triggerRef,\n  };\n\n  return { menu };\n}\n"],"mappings":"AAEA,OAAM,SAAUA,6BAA6BA,CAACC,KAAgB;EAC5D,MAAM;IACJC,aAAa;IACbC,aAAa;IACbC,QAAQ;IACRC,MAAM;IACNC,SAAS;IACTC,cAAc;IACdC,oBAAoB;IACpBC,IAAI;IACJC,aAAa;IACbC,WAAW;IACXC,kBAAkB;IAClBC,OAAO;IACPC,SAAS;IACTC;EAAU,CACX,GAAGd,KAAK;EAET;EACA,MAAMe,IAAI,GAAG;IACXd,aAAa;IACbC,aAAa;IACbC,QAAQ;IACRC,MAAM;IACNC,SAAS;IACTC,cAAc;IACdC,oBAAoB;IACpBC,IAAI;IACJC,aAAa;IACbC,WAAW;IACXC,kBAAkB;IAClBC,OAAO;IACPC,SAAS;IACTC;GACD;EAED,OAAO;IAAEC;EAAI,CAAE;AACjB"}
+{"version":3,"names":["useMenuContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","inline","isSubmenu","menuPopoverRef","mountNode","onCheckedValueChange","open","openOnContext","openOnHover","persistOnItemClick","setOpen","triggerId","triggerRef","menu"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/Menu/useMenuContextValues.ts"],"sourcesContent":["import type { MenuContextValues, MenuState } from './Menu.types';\n\nexport function useMenuContextValues_unstable(state: MenuState): MenuContextValues {\n  const {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    inline,\n    isSubmenu,\n    menuPopoverRef,\n    mountNode,\n    onCheckedValueChange,\n    open,\n    openOnContext,\n    openOnHover,\n    persistOnItemClick,\n    setOpen,\n    triggerId,\n    triggerRef,\n  } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const menu = {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    inline,\n    isSubmenu,\n    menuPopoverRef,\n    mountNode,\n    onCheckedValueChange,\n    open,\n    openOnContext,\n    openOnHover,\n    persistOnItemClick,\n    setOpen,\n    triggerId,\n    triggerRef,\n  };\n\n  return { menu };\n}\n"],"mappings":"AAEA,OAAM,SAAUA,6BAA6BA,CAACC,KAAgB;EAC5D,MAAM;IACJC,aAAa;IACbC,aAAa;IACbC,QAAQ;IACRC,MAAM;IACNC,SAAS;IACTC,cAAc;IACdC,SAAS;IACTC,oBAAoB;IACpBC,IAAI;IACJC,aAAa;IACbC,WAAW;IACXC,kBAAkB;IAClBC,OAAO;IACPC,SAAS;IACTC;EAAU,CACX,GAAGf,KAAK;EAET;EACA,MAAMgB,IAAI,GAAG;IACXf,aAAa;IACbC,aAAa;IACbC,QAAQ;IACRC,MAAM;IACNC,SAAS;IACTC,cAAc;IACdC,SAAS;IACTC,oBAAoB;IACpBC,IAAI;IACJC,aAAa;IACbC,WAAW;IACXC,kBAAkB;IAClBC,OAAO;IACPC,SAAS;IACTC;GACD;EAED,OAAO;IAAEC;EAAI,CAAE;AACjB"}

package/lib/components/MenuItem/useMenuItemStyles.js

@@ -102,13 +102,16 @@ const useStyles = /*#__PURE__*/__styles({
   disabled: {
     sj55zd: "f1s2aq7o",
     Bi91k9c: "fvgxktp",
+    Bk3fhr4: "f19vpps7",
+    Bmfj8id: "fv5swzo",
+    Bg7n49j: "f1q1x1ba",
     t0hwav: "ft33916"
   }
 }, {
   f: [".ftqa4ok:focus{outline-style:none;}", ".fc1cou1:focus{color:var(--colorNeutralForeground3Hover);}", ".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"],
   i: [".f2hkw1w:focus-visible{outline-style:none;}"],
   d: [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".f1d2rq10{height:32px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1k6fduh{cursor:pointer;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}", ".f3rmtva{background-color:transparent;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fe5j1ua{font-size:20px;}", ".fez10in{line-height:0;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
-  h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fp258yr:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}", ".f1jp5ecu:hover{color:var(--colorNeutralForeground3Hover);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}"]
+  h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fp258yr:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}", ".f1jp5ecu:hover{color:var(--colorNeutralForeground3Hover);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}"]
 });
 /** Applies style classnames to slots */
 export const useMenuItemStyles_unstable = state => {

package/lib/components/MenuItem/useMenuItemStyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","shorthands","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","qhf8xq","sj55zd","De3pzq","z189sj","uwmqm3","Bqenvij","mc9l5x","Bt984gj","Be2twd7","Bceei9c","i8kkvl","Belr9w4","Jwef8y","Bi91k9c","Bk3fhr4","Bmfj8id","Bg7n49j","famaaq","Bh6795r","t0hwav","a9b677","Bg96gwp","Brf1p80","disabled","f","i","d","h","useMenuItemStyles_unstable","state","styles","className"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n  root: 'fui-MenuItem',\n  icon: 'fui-MenuItem__icon',\n  checkmark: 'fui-MenuItem__checkmark',\n  submenuIndicator: 'fui-MenuItem__submenuIndicator',\n  content: 'fui-MenuItem__content',\n  secondaryContent: 'fui-MenuItem__secondaryContent',\n};\n\nconst useStyles = makeStyles({\n  focusIndicator: createFocusOutlineStyle(),\n  // TODO: this should be extracted to another package\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: '10px',\n    paddingLeft: '10px',\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    ...shorthands.gap('4px'),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      color: tokens.colorNeutralForeground2Hover,\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n      [`& .${menuItemClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandSelected,\n      },\n    },\n\n    userSelect: 'none',\n  },\n  content: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1,\n  },\n  secondaryContent: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n    ':focus': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n  icon: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  submenuIndicator: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':hover': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':focus': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    menuItemClassNames.root,\n    styles.root,\n    styles.focusIndicator,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemClassNames.secondaryContent,\n      !state.disabled && styles.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n  }\n\n  if (state.submenuIndicator) {\n    state.submenuIndicator.className = mergeClasses(\n      menuItemClassNames.submenuIndicator,\n      styles.submenuIndicator,\n      state.submenuIndicator.className,\n    );\n  }\n  useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"],"mappings":"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"}
+{"version":3,"names":["mergeClasses","__styles","shorthands","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","qhf8xq","sj55zd","De3pzq","z189sj","uwmqm3","Bqenvij","mc9l5x","Bt984gj","Be2twd7","Bceei9c","i8kkvl","Belr9w4","Jwef8y","Bi91k9c","Bk3fhr4","Bmfj8id","Bg7n49j","famaaq","Bh6795r","t0hwav","a9b677","Bg96gwp","Brf1p80","disabled","f","i","d","h","useMenuItemStyles_unstable","state","styles","className"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n  root: 'fui-MenuItem',\n  icon: 'fui-MenuItem__icon',\n  checkmark: 'fui-MenuItem__checkmark',\n  submenuIndicator: 'fui-MenuItem__submenuIndicator',\n  content: 'fui-MenuItem__content',\n  secondaryContent: 'fui-MenuItem__secondaryContent',\n};\n\nconst useStyles = makeStyles({\n  focusIndicator: createFocusOutlineStyle(),\n  // TODO: this should be extracted to another package\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: '10px',\n    paddingLeft: '10px',\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    ...shorthands.gap('4px'),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      color: tokens.colorNeutralForeground2Hover,\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n      [`& .${menuItemClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandSelected,\n      },\n    },\n\n    userSelect: 'none',\n  },\n  content: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1,\n  },\n  secondaryContent: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n    ':focus': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n  icon: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  submenuIndicator: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':hover': {\n      color: tokens.colorNeutralForegroundDisabled,\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${menuItemClassNames.icon}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':focus': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    menuItemClassNames.root,\n    styles.root,\n    styles.focusIndicator,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemClassNames.secondaryContent,\n      !state.disabled && styles.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n  }\n\n  if (state.submenuIndicator) {\n    state.submenuIndicator.className = mergeClasses(\n      menuItemClassNames.submenuIndicator,\n      styles.submenuIndicator,\n      state.submenuIndicator.className,\n    );\n  }\n  useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"MenuPopover.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuPopoverSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MenuPopover Props\n */\nexport type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;\n\n/**\n * State used in rendering MenuPopover\n */\nexport type MenuPopoverState = ComponentState<MenuPopoverSlots> & {\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"]}
+{"version":3,"file":"MenuPopover.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuPopoverSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MenuPopover Props\n */\nexport type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;\n\n/**\n * State used in rendering MenuPopover\n */\nexport type MenuPopoverState = ComponentState<MenuPopoverSlots> &\n  Pick<PortalProps, 'mountNode'> & {\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"]}

package/lib/components/MenuPopover/renderMenuPopover.js

@@ -14,7 +14,9 @@ export const renderMenuPopover_unstable = state => {
       ...slotProps.root
     });
   }
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.root, {
+  return /*#__PURE__*/React.createElement(Portal, {
+    mountNode: state.mountNode
+  }, /*#__PURE__*/React.createElement(slots.root, {
     ...slotProps.root
   }));
 };

package/lib/components/MenuPopover/renderMenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","Portal","renderMenuPopover_unstable","state","slots","slotProps","inline","createElement","root"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/renderMenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n  const { slots, slotProps } = getSlots<MenuPopoverSlots>(state);\n\n  if (state.inline) {\n    return <slots.root {...slotProps.root} />;\n  }\n\n  return (\n    <Portal>\n      <slots.root {...slotProps.root} />\n    </Portal>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,MAAM,QAAQ,wBAAwB;AAE/C;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAmBG,KAAK,CAAC;EAE9D,IAAIA,KAAK,CAACG,MAAM,EAAE;IAChB,oBAAOP,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;MAAA,GAAKH,SAAS,CAACG;IAAI,EAAI;;EAG3C,oBACET,KAAA,CAAAQ,aAAA,CAACN,MAAM,qBACLF,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI,CAC3B;AAEb,CAAC"}
+{"version":3,"names":["React","getSlots","Portal","renderMenuPopover_unstable","state","slots","slotProps","inline","createElement","root","mountNode"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/renderMenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n  const { slots, slotProps } = getSlots<MenuPopoverSlots>(state);\n\n  if (state.inline) {\n    return <slots.root {...slotProps.root} />;\n  }\n\n  return (\n    <Portal mountNode={state.mountNode}>\n      <slots.root {...slotProps.root} />\n    </Portal>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,MAAM,QAAQ,wBAAwB;AAE/C;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAmBG,KAAK,CAAC;EAE9D,IAAIA,KAAK,CAACG,MAAM,EAAE;IAChB,oBAAOP,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;MAAA,GAAKH,SAAS,CAACG;IAAI,EAAI;;EAG3C,oBACET,KAAA,CAAAQ,aAAA,CAACN,MAAM;IAACQ,SAAS,EAAEN,KAAK,CAACM;EAAS,gBAChCV,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI,CAC3B;AAEb,CAAC"}

package/lib/components/MenuPopover/useMenuPopover.js

@@ -49,6 +49,7 @@ export const useMenuPopover_unstable = (props, ref) => {
     () => clearTimeout(throttleDispatchTimerRef.current);
   }, []);
   const inline = (_a = useMenuContext_unstable(context => context.inline)) !== null && _a !== void 0 ? _a : false;
+  const mountNode = useMenuContext_unstable(context => context.mountNode);
   const rootProps = getNativeElementProps('div', {
     role: 'presentation',
     ...props,
@@ -97,6 +98,7 @@ export const useMenuPopover_unstable = (props, ref) => {
   });
   return {
     inline,
+    mountNode,
     components: {
       root: 'div'
     },

package/lib/components/MenuPopover/useMenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ArrowLeft","Tab","ArrowRight","Escape","getNativeElementProps","useEventCallback","useMergedRefs","useMenuContext_unstable","dispatchMenuEnterEvent","useFluent_unstable","useFluent","useIsSubmenu","useMenuPopover_unstable","props","ref","popoverRef","context","menuPopoverRef","setOpen","open","openOnHover","isSubmenu","canDispatchCustomEventRef","useRef","throttleDispatchTimerRef","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","setTimeout","useEffect","clearTimeout","inline","_a","rootProps","role","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","stopPropagation","components","root"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const isSubmenu = useIsSubmenu();\n  const canDispatchCustomEventRef = React.useRef(true);\n  const throttleDispatchTimerRef = React.useRef(0);\n\n  const { dir } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(\n    (node: HTMLElement) => {\n      if (node) {\n        // Dispatches the custom menu mouse enter event with throttling\n        // Needs to trigger on mouseover to support keyboard + mouse together\n        // i.e. keyboard opens submenus while cursor is still on the parent\n        node.addEventListener('mouseover', e => {\n          if (canDispatchCustomEventRef.current) {\n            canDispatchCustomEventRef.current = false;\n            dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore #16889 Node setTimeout type leaking\n            throttleDispatchTimerRef.current = setTimeout(() => (canDispatchCustomEventRef.current = true), 250);\n          }\n        });\n      }\n    },\n    [popoverRef, throttleDispatchTimerRef],\n  );\n\n  React.useEffect(() => {\n    () => clearTimeout(throttleDispatchTimerRef.current);\n  }, []);\n\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const rootProps = getNativeElementProps('div', {\n    role: 'presentation',\n    ...props,\n    ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef),\n  });\n\n  const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n\n  rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n    }\n\n    onMouseEnterOriginal?.(event);\n  });\n\n  rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    const key = event.key;\n\n    if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n      if (open && popoverRef.current?.contains(event.target as HTMLElement)) {\n        setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n        // stop propagation to avoid conflicting with other elements that listen for `Escape`\n        // e,g: Dialog, Popover and Tooltip\n        event.stopPropagation();\n      }\n    }\n\n    if (key === Tab) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n    }\n\n    onKeyDownOriginal?.(event);\n  });\n\n  return {\n    inline,\n    components: {\n      root: 'div',\n    },\n    root: rootProps,\n  };\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,EAAEC,GAAG,EAAEC,UAAU,EAAEC,MAAM,QAAQ,yBAAyB;AAC5E,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,2BAA2B;AAElG,SAASC,uBAAuB,QAAQ,4BAA4B;AACpE,SAASC,sBAAsB,QAAQ,mBAAmB;AAC1D,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AACjF,SAASC,YAAY,QAAQ,0BAA0B;AAEvD;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAGA,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;;EAChH,MAAMC,UAAU,GAAGR,uBAAuB,CAACS,OAAO,IAAIA,OAAO,CAACC,cAAc,CAAC;EAC7E,MAAMC,OAAO,GAAGX,uBAAuB,CAACS,OAAO,IAAIA,OAAO,CAACE,OAAO,CAAC;EACnE,MAAMC,IAAI,GAAGZ,uBAAuB,CAACS,OAAO,IAAIA,OAAO,CAACG,IAAI,CAAC;EAC7D,MAAMC,WAAW,GAAGb,uBAAuB,CAACS,OAAO,IAAIA,OAAO,CAACI,WAAW,CAAC;EAC3E,MAAMC,SAAS,GAAGV,YAAY,EAAE;EAChC,MAAMW,yBAAyB,GAAGvB,KAAK,CAACwB,MAAM,CAAC,IAAI,CAAC;EACpD,MAAMC,wBAAwB,GAAGzB,KAAK,CAACwB,MAAM,CAAC,CAAC,CAAC;EAEhD,MAAM;IAAEE;EAAG,CAAE,GAAGf,SAAS,EAAE;EAC3B,MAAMgB,aAAa,GAAGD,GAAG,KAAK,KAAK,GAAGzB,SAAS,GAAGE,UAAU;EAE5D;EACA;EACA,MAAMyB,4BAA4B,GAAG5B,KAAK,CAAC6B,WAAW,CACnDC,IAAiB,IAAI;IACpB,IAAIA,IAAI,EAAE;MACR;MACA;MACA;MACAA,IAAI,CAACC,gBAAgB,CAAC,WAAW,EAAEC,CAAC,IAAG;QACrC,IAAIT,yBAAyB,CAACU,OAAO,EAAE;UACrCV,yBAAyB,CAACU,OAAO,GAAG,KAAK;UACzCxB,sBAAsB,CAACO,UAAU,CAACiB,OAAsB,EAAED,CAAC,CAAC;UAC5D;UACA;UACAP,wBAAwB,CAACQ,OAAO,GAAGC,UAAU,CAAC,MAAOX,yBAAyB,CAACU,OAAO,GAAG,IAAK,EAAE,GAAG,CAAC;;MAExG,CAAC,CAAC;;EAEN,CAAC,EACD,CAACjB,UAAU,EAAES,wBAAwB,CAAC,CACvC;EAEDzB,KAAK,CAACmC,SAAS,CAAC,MAAK;IACnB,MAAMC,YAAY,CAACX,wBAAwB,CAACQ,OAAO,CAAC;EACtD,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMI,MAAM,GAAG,CAAAC,EAAA,GAAA9B,uBAAuB,CAACS,OAAO,IAAIA,OAAO,CAACoB,MAAM,CAAC,cAAAC,EAAA,cAAAA,EAAA,GAAI,KAAK;EAC1E,MAAMC,SAAS,GAAGlC,qBAAqB,CAAC,KAAK,EAAE;IAC7CmC,IAAI,EAAE,cAAc;IACpB,GAAG1B,KAAK;IACRC,GAAG,EAAER,aAAa,CAACQ,GAAG,EAAEC,UAAU,EAAEY,4BAA4B;GACjE,CAAC;EAEF,MAAM;IAAEa,YAAY,EAAEC,oBAAoB;IAAEC,SAAS,EAAEC;EAAiB,CAAE,GAAGL,SAAS;EAEtFA,SAAS,CAACE,YAAY,GAAGnC,gBAAgB,CAAEuC,KAAoC,IAAI;IACjF,IAAIxB,WAAW,EAAE;MACfF,OAAO,CAAC0B,KAAK,EAAE;QAAEzB,IAAI,EAAE,IAAI;QAAE0B,QAAQ,EAAE,KAAK;QAAEC,IAAI,EAAE,uBAAuB;QAAEF;MAAK,CAAE,CAAC;;IAGvFH,oBAAoB,aAApBA,oBAAoB,uBAApBA,oBAAoB,CAAGG,KAAK,CAAC;EAC/B,CAAC,CAAC;EAEFN,SAAS,CAACI,SAAS,GAAGrC,gBAAgB,CAAEuC,KAAuC,IAAI;;IACjF,MAAMG,GAAG,GAAGH,KAAK,CAACG,GAAG;IAErB,IAAIA,GAAG,KAAK5C,MAAM,IAAKkB,SAAS,IAAI0B,GAAG,KAAKrB,aAAc,EAAE;MAC1D,IAAIP,IAAI,KAAI,CAAAkB,EAAA,GAAAtB,UAAU,CAACiB,OAAO,cAAAK,EAAA,uBAAAA,EAAA,CAAEW,QAAQ,CAACJ,KAAK,CAACK,MAAqB,CAAC,GAAE;QACrE/B,OAAO,CAAC0B,KAAK,EAAE;UAAEzB,IAAI,EAAE,KAAK;UAAE0B,QAAQ,EAAE,IAAI;UAAEC,IAAI,EAAE,oBAAoB;UAAEF;QAAK,CAAE,CAAC;QAClF;QACA;QACAA,KAAK,CAACM,eAAe,EAAE;;;IAI3B,IAAIH,GAAG,KAAK9C,GAAG,EAAE;MACfiB,OAAO,CAAC0B,KAAK,EAAE;QAAEzB,IAAI,EAAE,KAAK;QAAE0B,QAAQ,EAAE,IAAI;QAAEC,IAAI,EAAE,oBAAoB;QAAEF;MAAK,CAAE,CAAC;;IAGpFD,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAGC,KAAK,CAAC;EAC5B,CAAC,CAAC;EAEF,OAAO;IACLR,MAAM;IACNe,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAEd;GACP;AACH,CAAC"}
+{"version":3,"names":["React","ArrowLeft","Tab","ArrowRight","Escape","getNativeElementProps","useEventCallback","useMergedRefs","useMenuContext_unstable","dispatchMenuEnterEvent","useFluent_unstable","useFluent","useIsSubmenu","useMenuPopover_unstable","props","ref","popoverRef","context","menuPopoverRef","setOpen","open","openOnHover","isSubmenu","canDispatchCustomEventRef","useRef","throttleDispatchTimerRef","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","setTimeout","useEffect","clearTimeout","inline","_a","mountNode","rootProps","role","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","stopPropagation","components","root"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const isSubmenu = useIsSubmenu();\n  const canDispatchCustomEventRef = React.useRef(true);\n  const throttleDispatchTimerRef = React.useRef(0);\n\n  const { dir } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(\n    (node: HTMLElement) => {\n      if (node) {\n        // Dispatches the custom menu mouse enter event with throttling\n        // Needs to trigger on mouseover to support keyboard + mouse together\n        // i.e. keyboard opens submenus while cursor is still on the parent\n        node.addEventListener('mouseover', e => {\n          if (canDispatchCustomEventRef.current) {\n            canDispatchCustomEventRef.current = false;\n            dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore #16889 Node setTimeout type leaking\n            throttleDispatchTimerRef.current = setTimeout(() => (canDispatchCustomEventRef.current = true), 250);\n          }\n        });\n      }\n    },\n    [popoverRef, throttleDispatchTimerRef],\n  );\n\n  React.useEffect(() => {\n    () => clearTimeout(throttleDispatchTimerRef.current);\n  }, []);\n\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const mountNode = useMenuContext_unstable(context => context.mountNode);\n\n  const rootProps = getNativeElementProps('div', {\n    role: 'presentation',\n    ...props,\n    ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef),\n  });\n\n  const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n\n  rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n    }\n\n    onMouseEnterOriginal?.(event);\n  });\n\n  rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    const key = event.key;\n\n    if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n      if (open && popoverRef.current?.contains(event.target as HTMLElement)) {\n        setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n        // stop propagation to avoid conflicting with other elements that listen for `Escape`\n        // e,g: Dialog, Popover and Tooltip\n        event.stopPropagation();\n      }\n    }\n\n    if (key === Tab) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n    }\n\n    onKeyDownOriginal?.(event);\n  });\n\n  return {\n    inline,\n    mountNode,\n    components: {\n      root: 'div',\n    },\n    root: rootProps,\n  };\n};\n"],"mappings":"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"}

package/lib/contexts/menuContext.js

@@ -12,6 +12,7 @@ const menuContextDefaultValue = {
   menuPopoverRef: {
     current: null
   },
+  mountNode: null,
   triggerId: '',
   openOnContext: false,
   openOnHover: false,

package/lib/contexts/menuContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","useContextSelector","MenuContext","undefined","menuContextDefaultValue","open","setOpen","checkedValues","onCheckedValueChange","isSubmenu","triggerRef","current","menuPopoverRef","triggerId","openOnContext","openOnHover","hasIcons","hasCheckmarks","inline","persistOnItemClick","MenuProvider","Provider","useMenuContext_unstable","selector","ctx"],"sources":["../../../../../../../../packages/react-components/react-menu/src/contexts/menuContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue | undefined>(\n  undefined,\n) as Context<MenuContextValue>;\n\nconst menuContextDefaultValue: MenuContextValue = {\n  open: false,\n  setOpen: () => false,\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  isSubmenu: false,\n  triggerRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n  menuPopoverRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n  triggerId: '',\n  openOnContext: false,\n  openOnHover: false,\n  hasIcons: false,\n  hasCheckmarks: false,\n  inline: false,\n  persistOnItemClick: false,\n};\n\n/**\n * Context shared between Menu and its children components\n *\n * Extends and drills down MenuList props to simplify API\n */\nexport type MenuContextValue = Pick<\n  MenuState,\n  | 'openOnHover'\n  | 'openOnContext'\n  | 'triggerRef'\n  | 'menuPopoverRef'\n  | 'setOpen'\n  | 'isSubmenu'\n  | 'triggerId'\n  | 'hasIcons'\n  | 'hasCheckmarks'\n  | 'persistOnItemClick'\n  | 'inline'\n  | 'checkedValues'\n  | 'onCheckedValueChange'\n> & {\n  open: boolean;\n  triggerId: string;\n  /**\n   * Default values to be checked on mount\n   * @deprecated this property is not used internally anymore,\n   * the signature remains just to avoid breaking changes\n   */\n  defaultCheckedValues?: Record<string, string[]>;\n};\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext_unstable = <T>(selector: ContextSelector<MenuContextValue, T>) =>\n  useContextSelector(MenuContext, (ctx = menuContextDefaultValue) => selector(ctx));\n"],"mappings":"AACA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,kCAAkC;AAIpF,OAAO,MAAMC,WAAW,gBAA8BF,aAAa,CACjEG,SAAS,CACmB;AAE9B,MAAMC,uBAAuB,GAAqB;EAChDC,IAAI,EAAE,KAAK;EACXC,OAAO,EAAEA,CAAA,KAAM,KAAK;EACpBC,aAAa,EAAE,EAAE;EACjBC,oBAAoB,EAAEA,CAAA,KAAM,IAAI;EAChCC,SAAS,EAAE,KAAK;EAChBC,UAAU,EAAG;IAAEC,OAAO,EAAE;EAAI,CAAqD;EACjFC,cAAc,EAAG;IAAED,OAAO,EAAE;EAAI,CAAqD;EACrFE,SAAS,EAAE,EAAE;EACbC,aAAa,EAAE,KAAK;EACpBC,WAAW,EAAE,KAAK;EAClBC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAE,KAAK;EACpBC,MAAM,EAAE,KAAK;EACbC,kBAAkB,EAAE;CACrB;AAiCD,OAAO,MAAMC,YAAY,GAAGlB,WAAW,CAACmB,QAAQ;AAEhD,OAAO,MAAMC,uBAAuB,GAAOC,QAA8C,IACvFtB,kBAAkB,CAACC,WAAW,EAAE,CAACsB,GAAG,GAAGpB,uBAAuB,KAAKmB,QAAQ,CAACC,GAAG,CAAC,CAAC"}
+{"version":3,"names":["createContext","useContextSelector","MenuContext","undefined","menuContextDefaultValue","open","setOpen","checkedValues","onCheckedValueChange","isSubmenu","triggerRef","current","menuPopoverRef","mountNode","triggerId","openOnContext","openOnHover","hasIcons","hasCheckmarks","inline","persistOnItemClick","MenuProvider","Provider","useMenuContext_unstable","selector","ctx"],"sources":["../../../../../../../../packages/react-components/react-menu/src/contexts/menuContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue | undefined>(\n  undefined,\n) as Context<MenuContextValue>;\n\nconst menuContextDefaultValue: MenuContextValue = {\n  open: false,\n  setOpen: () => false,\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  isSubmenu: false,\n  triggerRef: { current: null } as unknown as React.MutableRefObject<HTMLElement>,\n  menuPopoverRef: { current: null } as unknown as React.MutableRefObject<HTMLElement>,\n  mountNode: null,\n  triggerId: '',\n  openOnContext: false,\n  openOnHover: false,\n  hasIcons: false,\n  hasCheckmarks: false,\n  inline: false,\n  persistOnItemClick: false,\n};\n\n/**\n * Context shared between Menu and its children components\n *\n * Extends and drills down MenuList props to simplify API\n */\nexport type MenuContextValue = Pick<\n  MenuState,\n  | 'openOnHover'\n  | 'openOnContext'\n  | 'triggerRef'\n  | 'menuPopoverRef'\n  | 'setOpen'\n  | 'isSubmenu'\n  | 'mountNode'\n  | 'triggerId'\n  | 'hasIcons'\n  | 'hasCheckmarks'\n  | 'persistOnItemClick'\n  | 'inline'\n  | 'checkedValues'\n  | 'onCheckedValueChange'\n> & {\n  open: boolean;\n  triggerId: string;\n  /**\n   * Default values to be checked on mount\n   * @deprecated this property is not used internally anymore,\n   * the signature remains just to avoid breaking changes\n   */\n  defaultCheckedValues?: Record<string, string[]>;\n};\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext_unstable = <T>(selector: ContextSelector<MenuContextValue, T>) =>\n  useContextSelector(MenuContext, (ctx = menuContextDefaultValue) => selector(ctx));\n"],"mappings":"AACA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,kCAAkC;AAIpF,OAAO,MAAMC,WAAW,gBAA8BF,aAAa,CACjEG,SAAS,CACmB;AAE9B,MAAMC,uBAAuB,GAAqB;EAChDC,IAAI,EAAE,KAAK;EACXC,OAAO,EAAEA,CAAA,KAAM,KAAK;EACpBC,aAAa,EAAE,EAAE;EACjBC,oBAAoB,EAAEA,CAAA,KAAM,IAAI;EAChCC,SAAS,EAAE,KAAK;EAChBC,UAAU,EAAE;IAAEC,OAAO,EAAE;EAAI,CAAoD;EAC/EC,cAAc,EAAE;IAAED,OAAO,EAAE;EAAI,CAAoD;EACnFE,SAAS,EAAE,IAAI;EACfC,SAAS,EAAE,EAAE;EACbC,aAAa,EAAE,KAAK;EACpBC,WAAW,EAAE,KAAK;EAClBC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAE,KAAK;EACpBC,MAAM,EAAE,KAAK;EACbC,kBAAkB,EAAE;CACrB;AAkCD,OAAO,MAAMC,YAAY,GAAGnB,WAAW,CAACoB,QAAQ;AAEhD,OAAO,MAAMC,uBAAuB,GAAOC,QAA8C,IACvFvB,kBAAkB,CAACC,WAAW,EAAE,CAACuB,GAAG,GAAGrB,uBAAuB,KAAKoB,QAAQ,CAACC,GAAG,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/Menu/Menu.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { PositioningVirtualElement, SetVirtualMouseTarget } 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     * 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: MenuOpenEvent, data: MenuOpenChangeData) => void;\n\n    /**\n     * Whether the popup is open\n     *\n     * @default false\n     */\n    open?: boolean;\n\n    /**\n     * Whether the popup is open by default\n     *\n     * @default false\n     */\n    defaultOpen?: 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  Required<\n    Pick<\n      MenuProps,\n      | 'hasCheckmarks'\n      | 'hasIcons'\n      | 'inline'\n      | 'checkedValues'\n      | 'onCheckedValueChange'\n      | 'open'\n      | 'openOnHover'\n      | 'closeOnScroll'\n      | 'hoverDelay'\n      | 'openOnContext'\n      | 'persistOnItemClick'\n    >\n  > & {\n    /**\n     * Anchors the popper to the mouse click for context events\n     */\n    contextTarget?: PositioningVirtualElement;\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: SetVirtualMouseTarget;\n\n    /**\n     * Callback to open/close the popup\n     */\n    setOpen: (e: MenuOpenEvent, 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     * Call back when the component requests to change value\n     * The `open` value is used as a hint when directly controlling the component\n     * @deprecated this property is not used internally anymore,\n     * the signature remains just to avoid breaking changes\n     */\n    onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n    /**\n     * Default values to be checked on mount\n     @deprecated this property is not used internally anymore,\n     * the signature remains just to avoid breaking changes\n     */\n    defaultCheckedValues?: Record<string, string[]>;\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 MenuOpenEvent = MenuOpenChangeData['event'];\n/**\n * @deprecated use MenuOpenEvent instead\n */\nexport type MenuOpenEvents = MenuOpenEvent;\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   * @deprecated\n   * This should not be used, since `Enter`, `Space` and click should be interpreted as the same thing as a click\n   */\n  keyboard?: boolean;\n  open: boolean;\n} & (\n  | {\n      type: 'menuTriggerContextMenu';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerClick';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseEnter';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseLeave';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseMove';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerKeyDown';\n      event: React.KeyboardEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuItemClick';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuPopoverMouseEnter';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuPopoverKeyDown';\n      event: React.KeyboardEvent<HTMLElement>;\n    }\n  | {\n      type: 'clickOutside';\n      event: MouseEvent | TouchEvent;\n    }\n  | {\n      type: 'scrollOutside';\n      event: MouseEvent | TouchEvent;\n    }\n  | {\n      type: 'menuMouseEnter';\n      event: MouseEvent | TouchEvent;\n    }\n);\n"],"mappings":""}
+{"version":3,"names":[],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/Menu/Menu.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { PositioningVirtualElement, SetVirtualMouseTarget } from '@fluentui/react-positioning';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\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<PortalProps, 'mountNode'> &\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     * 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: MenuOpenEvent, data: MenuOpenChangeData) => void;\n\n    /**\n     * Whether the popup is open\n     *\n     * @default false\n     */\n    open?: boolean;\n\n    /**\n     * Whether the popup is open by default\n     *\n     * @default false\n     */\n    defaultOpen?: 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  Required<\n    Pick<\n      MenuProps,\n      | 'hasCheckmarks'\n      | 'hasIcons'\n      | 'mountNode'\n      | 'inline'\n      | 'checkedValues'\n      | 'onCheckedValueChange'\n      | 'open'\n      | 'openOnHover'\n      | 'closeOnScroll'\n      | 'hoverDelay'\n      | 'openOnContext'\n      | 'persistOnItemClick'\n    >\n  > & {\n    /**\n     * Anchors the popper to the mouse click for context events\n     */\n    contextTarget?: PositioningVirtualElement;\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: SetVirtualMouseTarget;\n\n    /**\n     * Callback to open/close the popup\n     */\n    setOpen: (e: MenuOpenEvent, 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     * Call back when the component requests to change value\n     * The `open` value is used as a hint when directly controlling the component\n     * @deprecated this property is not used internally anymore,\n     * the signature remains just to avoid breaking changes\n     */\n    onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n    /**\n     * Default values to be checked on mount\n     @deprecated this property is not used internally anymore,\n     * the signature remains just to avoid breaking changes\n     */\n    defaultCheckedValues?: Record<string, string[]>;\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 MenuOpenEvent = MenuOpenChangeData['event'];\n/**\n * @deprecated use MenuOpenEvent instead\n */\nexport type MenuOpenEvents = MenuOpenEvent;\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   * @deprecated\n   * This should not be used, since `Enter`, `Space` and click should be interpreted as the same thing as a click\n   */\n  keyboard?: boolean;\n  open: boolean;\n} & (\n  | {\n      type: 'menuTriggerContextMenu';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerClick';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseEnter';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseLeave';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseMove';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerKeyDown';\n      event: React.KeyboardEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuItemClick';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuPopoverMouseEnter';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuPopoverKeyDown';\n      event: React.KeyboardEvent<HTMLElement>;\n    }\n  | {\n      type: 'clickOutside';\n      event: MouseEvent | TouchEvent;\n    }\n  | {\n      type: 'scrollOutside';\n      event: MouseEvent | TouchEvent;\n    }\n  | {\n      type: 'menuMouseEnter';\n      event: MouseEvent | TouchEvent;\n    }\n);\n"],"mappings":""}

package/lib-commonjs/components/Menu/useMenu.js

@@ -35,7 +35,8 @@ const useMenu_unstable = props => {
     openOnContext = false,
     persistOnItemClick = false,
     openOnHover = isSubmenu,
-    defaultCheckedValues
+    defaultCheckedValues,
+    mountNode = null
   } = props;
   const triggerId = react_utilities_1.useId('menu');
   const [contextTarget, setContextTarget] = react_positioning_1.usePositioningMouseTarget();
@@ -100,6 +101,7 @@ const useMenu_unstable = props => {
     closeOnScroll,
     menuTrigger,
     menuPopover,
+    mountNode,
     triggerRef,
     menuPopoverRef,
     components: {},

package/lib-commonjs/components/Menu/useMenu.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","require","react_positioning_1","react_utilities_1","react_shared_contexts_1","react_portal_1","react_tabster_1","menuContext_1","index_1","useIsSubmenu_1","submenuFallbackPositions","useMenu_unstable","props","isSubmenu","useIsSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","triggerId","useId","contextTarget","setContextTarget","usePositioningMouseTarget","positioningState","position","align","target","undefined","fallbackPositions","resolvePositioningShorthand","positioning","children","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","triggerRef","containerRef","menuPopoverRef","usePositioning","open","setOpen","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","exports","setCheckedValues","useControllableState","state","defaultState","initialState","useEventCallback","e","name","checkedItems","_a","call","currentValue","targetDocument","useFluent_unstable","parentSetOpen","useMenuContext_unstable","context","data","shouldHandleCloseRef","useRef","setOpenTimeout","enteringTriggerRef","setOpenState","trySetOpen","event","CustomEvent","type","MENU_ENTER_EVENT","detail","nativeEvent","current","bubble","clearTimeout","Event","persist","contains","setTimeout","useOnClickOutside","elementContains","disabled","element","refs","filter","Boolean","callback","useOnScrollOutside","useOnMenuMouseEnter","useEffect","findFirstFocusable","useFocusFinders","focusFirst","useCallback","firstFocusable","focus"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/Menu/useMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  usePositioningMouseTarget,\n  usePositioning,\n  resolvePositioningShorthand,\n  PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n  useControllableState,\n  useId,\n  useOnClickOutside,\n  useEventCallback,\n  useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuOpenChangeData, MenuOpenEvent, MenuProps, MenuState } from './Menu.types';\n\n// If it's not possible to position the submenu in smaller viewports, try\n// and fallback to this order of positions\nconst submenuFallbackPositions: PositioningShorthandValue[] = [\n  'after',\n  'after-bottom',\n  'before-top',\n  'before',\n  'before-bottom',\n  'above',\n];\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n  const isSubmenu = useIsSubmenu();\n  const {\n    hoverDelay = 500,\n    inline = false,\n    hasCheckmarks = false,\n    hasIcons = false,\n    closeOnScroll = false,\n    openOnContext = false,\n    persistOnItemClick = false,\n    openOnHover = isSubmenu,\n    defaultCheckedValues,\n  } = props;\n  const triggerId = useId('menu');\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n  const positioningState = {\n    position: isSubmenu ? 'after' : 'below',\n    align: isSubmenu ? 'top' : 'start',\n    target: props.openOnContext ? contextTarget : undefined,\n    fallbackPositions: isSubmenu ? submenuFallbackPositions : undefined,\n    ...resolvePositioningShorthand(props.positioning),\n  } as const;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Menu must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Menu must contain at most two children');\n    }\n  }\n\n  let menuTrigger: React.ReactElement | undefined = undefined;\n  let menuPopover: React.ReactElement | undefined = undefined;\n  if (children.length === 2) {\n    menuTrigger = children[0];\n    menuPopover = children[1];\n  } else if (children.length === 1) {\n    menuPopover = children[0];\n  }\n\n  const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n  // TODO Better way to narrow types ?\n  const [open, setOpen] = useMenuOpenState({\n    hoverDelay,\n    isSubmenu,\n    setContextTarget,\n    closeOnScroll,\n    menuPopoverRef,\n    triggerRef,\n    open: props.open,\n    defaultOpen: props.defaultOpen,\n    onOpenChange: props.onOpenChange,\n    openOnContext,\n  });\n\n  const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\n\n  return {\n    inline,\n    hoverDelay,\n    triggerId,\n    isSubmenu,\n    openOnHover,\n    contextTarget,\n    setContextTarget,\n    hasCheckmarks,\n    hasIcons,\n    closeOnScroll,\n    menuTrigger,\n    menuPopover,\n    triggerRef,\n    menuPopoverRef,\n    components: {},\n    openOnContext,\n    open,\n    setOpen,\n    checkedValues,\n    onCheckedValueChange,\n    persistOnItemClick,\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n  props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues,\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n  const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    props.onCheckedValueChange?.(e, { name, checkedItems });\n\n    setCheckedValues(currentValue => ({\n      ...currentValue,\n      [name]: checkedItems,\n    }));\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n  state: Pick<\n    MenuState,\n    | 'isSubmenu'\n    | 'menuPopoverRef'\n    | 'setContextTarget'\n    | 'triggerRef'\n    | 'openOnContext'\n    | 'closeOnScroll'\n    | 'hoverDelay'\n  > &\n    Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n  const { targetDocument } = useFluent();\n  const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n  const onOpenChange: MenuProps['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const shouldHandleCloseRef = React.useRef(false);\n  const setOpenTimeout = React.useRef(0);\n  const enteringTriggerRef = React.useRef(false);\n\n  const [open, setOpenState] = useControllableState({\n    state: state.open,\n    defaultState: state.defaultOpen,\n    initialState: false,\n  });\n\n  const trySetOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n    const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n    onOpenChange?.(event, { ...data });\n    if (data.open && e.type === 'contextmenu') {\n      state.setContextTarget(e as React.MouseEvent);\n    }\n\n    if (!data.open) {\n      state.setContextTarget(undefined);\n      shouldHandleCloseRef.current = true;\n    }\n\n    if (data.bubble) {\n      parentSetOpen(e, { ...data });\n    }\n\n    setOpenState(data.open);\n  });\n\n  const setOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n    clearTimeout(setOpenTimeout.current);\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n      if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n        enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n      }\n\n      // FIXME leaking Node timeout type\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      setOpenTimeout.current = setTimeout(() => trySetOpen(e, data), state.hoverDelay);\n    } else {\n      trySetOpen(e, data);\n    }\n  });\n\n  useOnClickOutside({\n    contains: elementContains,\n    disabled: !open,\n    element: targetDocument,\n    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n      Boolean,\n    ) as React.MutableRefObject<HTMLElement>[],\n    callback: event => setOpen(event, { open: false, type: 'clickOutside', event }),\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = state.openOnContext || state.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }),\n    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n      Boolean,\n    ) as React.MutableRefObject<HTMLElement>[],\n    disabled: !open || !closeOnScroll,\n  });\n\n  useOnMenuMouseEnter({\n    element: targetDocument,\n    callback: event => {\n      // When moving from a menu directly back to its trigger, this handler can close the menu\n      // Explicitly check a flag to see if this situation happens\n      if (!enteringTriggerRef.current) {\n        setOpen(event, { open: false, type: 'menuMouseEnter', event });\n      }\n    },\n    disabled: !open,\n    refs: [state.menuPopoverRef],\n  });\n\n  // Clear timeout on unmount\n  // Setting state after a component unmounts can cause memory leaks\n  React.useEffect(() => {\n    return () => {\n      clearTimeout(setOpenTimeout.current);\n    };\n  }, []);\n\n  // Manage focus for open state\n  const { findFirstFocusable } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, state.menuPopoverRef]);\n\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    } else {\n      if (shouldHandleCloseRef.current) {\n        // We know that React effects are sync so we focus the trigger here\n        // after any event handler (event handlers will update state and re-render).\n        // Since the browser only performs the default behaviour for the Tab key once\n        // keyboard events have fully bubbled up the window, the browser will move\n        // focus to the next tabbable element before/after the trigger if needed.\n        // If the Tab key was not pressed, focus will remain on the trigger as expected.\n        state.triggerRef.current?.focus();\n      }\n    }\n\n    shouldHandleCloseRef.current = false;\n  }, [state.triggerRef, state.isSubmenu, open, focusFirst]);\n\n  return [open, setOpen] as const;\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","require","react_positioning_1","react_utilities_1","react_shared_contexts_1","react_portal_1","react_tabster_1","menuContext_1","index_1","useIsSubmenu_1","submenuFallbackPositions","useMenu_unstable","props","isSubmenu","useIsSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","mountNode","triggerId","useId","contextTarget","setContextTarget","usePositioningMouseTarget","positioningState","position","align","target","undefined","fallbackPositions","resolvePositioningShorthand","positioning","children","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","triggerRef","containerRef","menuPopoverRef","usePositioning","open","setOpen","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","exports","setCheckedValues","useControllableState","state","defaultState","initialState","useEventCallback","e","name","checkedItems","_a","call","currentValue","targetDocument","useFluent_unstable","parentSetOpen","useMenuContext_unstable","context","data","shouldHandleCloseRef","useRef","setOpenTimeout","enteringTriggerRef","setOpenState","trySetOpen","event","CustomEvent","type","MENU_ENTER_EVENT","detail","nativeEvent","current","bubble","clearTimeout","Event","persist","contains","setTimeout","useOnClickOutside","elementContains","disabled","element","refs","filter","Boolean","callback","useOnScrollOutside","useOnMenuMouseEnter","useEffect","findFirstFocusable","useFocusFinders","focusFirst","useCallback","firstFocusable","focus"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/Menu/useMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  usePositioningMouseTarget,\n  usePositioning,\n  resolvePositioningShorthand,\n  PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n  useControllableState,\n  useId,\n  useOnClickOutside,\n  useEventCallback,\n  useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuOpenChangeData, MenuOpenEvent, MenuProps, MenuState } from './Menu.types';\n\n// If it's not possible to position the submenu in smaller viewports, try\n// and fallback to this order of positions\nconst submenuFallbackPositions: PositioningShorthandValue[] = [\n  'after',\n  'after-bottom',\n  'before-top',\n  'before',\n  'before-bottom',\n  'above',\n];\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n  const isSubmenu = useIsSubmenu();\n  const {\n    hoverDelay = 500,\n    inline = false,\n    hasCheckmarks = false,\n    hasIcons = false,\n    closeOnScroll = false,\n    openOnContext = false,\n    persistOnItemClick = false,\n    openOnHover = isSubmenu,\n    defaultCheckedValues,\n    mountNode = null,\n  } = props;\n  const triggerId = useId('menu');\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n  const positioningState = {\n    position: isSubmenu ? 'after' : 'below',\n    align: isSubmenu ? 'top' : 'start',\n    target: props.openOnContext ? contextTarget : undefined,\n    fallbackPositions: isSubmenu ? submenuFallbackPositions : undefined,\n    ...resolvePositioningShorthand(props.positioning),\n  } as const;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Menu must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Menu must contain at most two children');\n    }\n  }\n\n  let menuTrigger: React.ReactElement | undefined = undefined;\n  let menuPopover: React.ReactElement | undefined = undefined;\n  if (children.length === 2) {\n    menuTrigger = children[0];\n    menuPopover = children[1];\n  } else if (children.length === 1) {\n    menuPopover = children[0];\n  }\n\n  const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n  // TODO Better way to narrow types ?\n  const [open, setOpen] = useMenuOpenState({\n    hoverDelay,\n    isSubmenu,\n    setContextTarget,\n    closeOnScroll,\n    menuPopoverRef,\n    triggerRef,\n    open: props.open,\n    defaultOpen: props.defaultOpen,\n    onOpenChange: props.onOpenChange,\n    openOnContext,\n  });\n\n  const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\n\n  return {\n    inline,\n    hoverDelay,\n    triggerId,\n    isSubmenu,\n    openOnHover,\n    contextTarget,\n    setContextTarget,\n    hasCheckmarks,\n    hasIcons,\n    closeOnScroll,\n    menuTrigger,\n    menuPopover,\n    mountNode,\n    triggerRef,\n    menuPopoverRef,\n    components: {},\n    openOnContext,\n    open,\n    setOpen,\n    checkedValues,\n    onCheckedValueChange,\n    persistOnItemClick,\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n  props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues,\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n  const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    props.onCheckedValueChange?.(e, { name, checkedItems });\n\n    setCheckedValues(currentValue => ({\n      ...currentValue,\n      [name]: checkedItems,\n    }));\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n  state: Pick<\n    MenuState,\n    | 'isSubmenu'\n    | 'menuPopoverRef'\n    | 'setContextTarget'\n    | 'triggerRef'\n    | 'openOnContext'\n    | 'closeOnScroll'\n    | 'hoverDelay'\n  > &\n    Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n  const { targetDocument } = useFluent();\n  const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n  const onOpenChange: MenuProps['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const shouldHandleCloseRef = React.useRef(false);\n  const setOpenTimeout = React.useRef(0);\n  const enteringTriggerRef = React.useRef(false);\n\n  const [open, setOpenState] = useControllableState({\n    state: state.open,\n    defaultState: state.defaultOpen,\n    initialState: false,\n  });\n\n  const trySetOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n    const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n    onOpenChange?.(event, { ...data });\n    if (data.open && e.type === 'contextmenu') {\n      state.setContextTarget(e as React.MouseEvent);\n    }\n\n    if (!data.open) {\n      state.setContextTarget(undefined);\n      shouldHandleCloseRef.current = true;\n    }\n\n    if (data.bubble) {\n      parentSetOpen(e, { ...data });\n    }\n\n    setOpenState(data.open);\n  });\n\n  const setOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n    clearTimeout(setOpenTimeout.current);\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n      if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n        enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n      }\n\n      // FIXME leaking Node timeout type\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      setOpenTimeout.current = setTimeout(() => trySetOpen(e, data), state.hoverDelay);\n    } else {\n      trySetOpen(e, data);\n    }\n  });\n\n  useOnClickOutside({\n    contains: elementContains,\n    disabled: !open,\n    element: targetDocument,\n    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n      Boolean,\n    ) as React.MutableRefObject<HTMLElement>[],\n    callback: event => setOpen(event, { open: false, type: 'clickOutside', event }),\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = state.openOnContext || state.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }),\n    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n      Boolean,\n    ) as React.MutableRefObject<HTMLElement>[],\n    disabled: !open || !closeOnScroll,\n  });\n\n  useOnMenuMouseEnter({\n    element: targetDocument,\n    callback: event => {\n      // When moving from a menu directly back to its trigger, this handler can close the menu\n      // Explicitly check a flag to see if this situation happens\n      if (!enteringTriggerRef.current) {\n        setOpen(event, { open: false, type: 'menuMouseEnter', event });\n      }\n    },\n    disabled: !open,\n    refs: [state.menuPopoverRef],\n  });\n\n  // Clear timeout on unmount\n  // Setting state after a component unmounts can cause memory leaks\n  React.useEffect(() => {\n    return () => {\n      clearTimeout(setOpenTimeout.current);\n    };\n  }, []);\n\n  // Manage focus for open state\n  const { findFirstFocusable } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, state.menuPopoverRef]);\n\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    } else {\n      if (shouldHandleCloseRef.current) {\n        // We know that React effects are sync so we focus the trigger here\n        // after any event handler (event handlers will update state and re-render).\n        // Since the browser only performs the default behaviour for the Tab key once\n        // keyboard events have fully bubbled up the window, the browser will move\n        // focus to the next tabbable element before/after the trigger if needed.\n        // If the Tab key was not pressed, focus will remain on the trigger as expected.\n        state.triggerRef.current?.focus();\n      }\n    }\n\n    shouldHandleCloseRef.current = false;\n  }, [state.triggerRef, state.isSubmenu, open, focusFirst]);\n\n  return [open, setOpen] as const;\n};\n"],"mappings":"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"}

package/lib-commonjs/components/Menu/useMenuContextValues.js

@@ -12,6 +12,7 @@ function useMenuContextValues_unstable(state) {
     inline,
     isSubmenu,
     menuPopoverRef,
+    mountNode,
     onCheckedValueChange,
     open,
     openOnContext,
@@ -29,6 +30,7 @@ function useMenuContextValues_unstable(state) {
     inline,
     isSubmenu,
     menuPopoverRef,
+    mountNode,
     onCheckedValueChange,
     open,
     openOnContext,

package/lib-commonjs/components/Menu/useMenuContextValues.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMenuContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","inline","isSubmenu","menuPopoverRef","onCheckedValueChange","open","openOnContext","openOnHover","persistOnItemClick","setOpen","triggerId","triggerRef","menu","exports"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/Menu/useMenuContextValues.ts"],"sourcesContent":["import type { MenuContextValues, MenuState } from './Menu.types';\n\nexport function useMenuContextValues_unstable(state: MenuState): MenuContextValues {\n  const {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    inline,\n    isSubmenu,\n    menuPopoverRef,\n    onCheckedValueChange,\n    open,\n    openOnContext,\n    openOnHover,\n    persistOnItemClick,\n    setOpen,\n    triggerId,\n    triggerRef,\n  } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const menu = {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    inline,\n    isSubmenu,\n    menuPopoverRef,\n    onCheckedValueChange,\n    open,\n    openOnContext,\n    openOnHover,\n    persistOnItemClick,\n    setOpen,\n    triggerId,\n    triggerRef,\n  };\n\n  return { menu };\n}\n"],"mappings":";;;;;;AAEA,SAAgBA,6BAA6BA,CAACC,KAAgB;EAC5D,MAAM;IACJC,aAAa;IACbC,aAAa;IACbC,QAAQ;IACRC,MAAM;IACNC,SAAS;IACTC,cAAc;IACdC,oBAAoB;IACpBC,IAAI;IACJC,aAAa;IACbC,WAAW;IACXC,kBAAkB;IAClBC,OAAO;IACPC,SAAS;IACTC;EAAU,CACX,GAAGd,KAAK;EAET;EACA,MAAMe,IAAI,GAAG;IACXd,aAAa;IACbC,aAAa;IACbC,QAAQ;IACRC,MAAM;IACNC,SAAS;IACTC,cAAc;IACdC,oBAAoB;IACpBC,IAAI;IACJC,aAAa;IACbC,WAAW;IACXC,kBAAkB;IAClBC,OAAO;IACPC,SAAS;IACTC;GACD;EAED,OAAO;IAAEC;EAAI,CAAE;AACjB;AArCAC,OAAA,CAAAjB,6BAAA,GAAAA,6BAAA"}
+{"version":3,"names":["useMenuContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","inline","isSubmenu","menuPopoverRef","mountNode","onCheckedValueChange","open","openOnContext","openOnHover","persistOnItemClick","setOpen","triggerId","triggerRef","menu","exports"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/Menu/useMenuContextValues.ts"],"sourcesContent":["import type { MenuContextValues, MenuState } from './Menu.types';\n\nexport function useMenuContextValues_unstable(state: MenuState): MenuContextValues {\n  const {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    inline,\n    isSubmenu,\n    menuPopoverRef,\n    mountNode,\n    onCheckedValueChange,\n    open,\n    openOnContext,\n    openOnHover,\n    persistOnItemClick,\n    setOpen,\n    triggerId,\n    triggerRef,\n  } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const menu = {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    inline,\n    isSubmenu,\n    menuPopoverRef,\n    mountNode,\n    onCheckedValueChange,\n    open,\n    openOnContext,\n    openOnHover,\n    persistOnItemClick,\n    setOpen,\n    triggerId,\n    triggerRef,\n  };\n\n  return { menu };\n}\n"],"mappings":";;;;;;AAEA,SAAgBA,6BAA6BA,CAACC,KAAgB;EAC5D,MAAM;IACJC,aAAa;IACbC,aAAa;IACbC,QAAQ;IACRC,MAAM;IACNC,SAAS;IACTC,cAAc;IACdC,SAAS;IACTC,oBAAoB;IACpBC,IAAI;IACJC,aAAa;IACbC,WAAW;IACXC,kBAAkB;IAClBC,OAAO;IACPC,SAAS;IACTC;EAAU,CACX,GAAGf,KAAK;EAET;EACA,MAAMgB,IAAI,GAAG;IACXf,aAAa;IACbC,aAAa;IACbC,QAAQ;IACRC,MAAM;IACNC,SAAS;IACTC,cAAc;IACdC,SAAS;IACTC,oBAAoB;IACpBC,IAAI;IACJC,aAAa;IACbC,WAAW;IACXC,kBAAkB;IAClBC,OAAO;IACPC,SAAS;IACTC;GACD;EAED,OAAO;IAAEC;EAAI,CAAE;AACjB;AAvCAC,OAAA,CAAAlB,6BAAA,GAAAA,6BAAA"}

package/lib-commonjs/components/MenuItem/useMenuItemStyles.js

@@ -108,13 +108,16 @@ const useStyles = /*#__PURE__*/react_1.__styles({
   disabled: {
     sj55zd: "f1s2aq7o",
     Bi91k9c: "fvgxktp",
+    Bk3fhr4: "f19vpps7",
+    Bmfj8id: "fv5swzo",
+    Bg7n49j: "f1q1x1ba",
     t0hwav: "ft33916"
   }
 }, {
   f: [".ftqa4ok:focus{outline-style:none;}", ".fc1cou1:focus{color:var(--colorNeutralForeground3Hover);}", ".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"],
   i: [".f2hkw1w:focus-visible{outline-style:none;}"],
   d: [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".f1d2rq10{height:32px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1k6fduh{cursor:pointer;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}", ".f3rmtva{background-color:transparent;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fe5j1ua{font-size:20px;}", ".fez10in{line-height:0;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
-  h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fp258yr:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}", ".f1jp5ecu:hover{color:var(--colorNeutralForeground3Hover);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}"]
+  h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fp258yr:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}", ".f1jp5ecu:hover{color:var(--colorNeutralForeground3Hover);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}"]
 });
 /** Applies style classnames to slots */
 const useMenuItemStyles_unstable = state => {

package/lib-commonjs/components/MenuItem/useMenuItemStyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["react_1","require","react_icons_1","react_tabster_1","react_theme_1","index_1","exports","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","__styles","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","qhf8xq","sj55zd","De3pzq","z189sj","uwmqm3","Bqenvij","mc9l5x","Bt984gj","Be2twd7","Bceei9c","i8kkvl","Belr9w4","Jwef8y","Bi91k9c","Bk3fhr4","Bmfj8id","Bg7n49j","famaaq","Bh6795r","t0hwav","a9b677","Bg96gwp","Brf1p80","disabled","f","i","d","h","useMenuItemStyles_unstable","state","styles","className","mergeClasses","useCheckmarkStyles_unstable"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n  root: 'fui-MenuItem',\n  icon: 'fui-MenuItem__icon',\n  checkmark: 'fui-MenuItem__checkmark',\n  submenuIndicator: 'fui-MenuItem__submenuIndicator',\n  content: 'fui-MenuItem__content',\n  secondaryContent: 'fui-MenuItem__secondaryContent',\n};\n\nconst useStyles = makeStyles({\n  focusIndicator: createFocusOutlineStyle(),\n  // TODO: this should be extracted to another package\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: '10px',\n    paddingLeft: '10px',\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    ...shorthands.gap('4px'),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      color: tokens.colorNeutralForeground2Hover,\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n      [`& .${menuItemClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandSelected,\n      },\n    },\n\n    userSelect: 'none',\n  },\n  content: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1,\n  },\n  secondaryContent: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n    ':focus': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n  icon: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  submenuIndicator: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':hover': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':focus': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    menuItemClassNames.root,\n    styles.root,\n    styles.focusIndicator,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemClassNames.secondaryContent,\n      !state.disabled && styles.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n  }\n\n  if (state.submenuIndicator) {\n    state.submenuIndicator.className = mergeClasses(\n      menuItemClassNames.submenuIndicator,\n      styles.submenuIndicator,\n      state.submenuIndicator.className,\n    );\n  }\n  useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"],"mappings":";;;;;;AAAA,MAAAA,OAAA,gBAAAC,OAAA;AACA,MAAAC,aAAA,gBAAAD,OAAA;AACA,MAAAE,eAAA,gBAAAF,OAAA;AACA,MAAAG,aAAA,gBAAAH,OAAA;AACA,MAAAI,OAAA,gBAAAJ,OAAA;AAKaK,OAAA,CAAAC,kBAAkB,GAAkC;EAC/DC,IAAI,EAAE,cAAc;EACpBC,IAAI,EAAE,oBAAoB;EAC1BC,SAAS,EAAE,yBAAyB;EACpCC,gBAAgB,EAAE,gCAAgC;EAClDC,OAAO,EAAE,uBAAuB;EAChCC,gBAAgB,EAAE;CACnB;AAED,MAAMC,SAAS,gBAAGd,OAAA,CAAAe,QAAU;EAAAC,cAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAtC,IAAA;IAAAuC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAxD,OAAA;IAAA2C,MAAA;IAAAD,MAAA;IAAAD,MAAA;IAAAgB,OAAA;EAAA;EAAAxD,gBAAA;IAAA0C,MAAA;IAAAD,MAAA;IAAAF,MAAA;IAAAY,OAAA;IAAAM,MAAA;EAAA;EAAA7D,IAAA;IAAA8D,MAAA;IAAAf,OAAA;IAAAG,OAAA;IAAAa,OAAA;IAAAd,OAAA;IAAAD,MAAA;IAAAgB,OAAA;EAAA;EAAA9D,gBAAA;IAAA4D,MAAA;IAAAf,OAAA;IAAAG,OAAA;IAAAa,OAAA;IAAAd,OAAA;IAAAD,MAAA;IAAAgB,OAAA;EAAA;EAAAC,QAAA;IAAAtB,MAAA;IAAAY,OAAA;IAAAM,MAAA;EAAA;AAAA;EAAAK,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,EA+E1B;AAEF;AACO,MAAMC,0BAA0B,GAAIC,KAAoB,IAAI;EACjE,MAAMC,MAAM,GAAGnE,SAAS,EAAE;EAC1BkE,KAAK,CAACxE,IAAI,CAAC0E,SAAS,GAAGlF,OAAA,CAAAmF,YAAY,CACjC7E,OAAA,CAAAC,kBAAkB,CAACC,IAAI,EACvByE,MAAM,CAACzE,IAAI,EACXyE,MAAM,CAACjE,cAAc,EACrBgE,KAAK,CAACN,QAAQ,IAAIO,MAAM,CAACP,QAAQ,EACjCM,KAAK,CAACxE,IAAI,CAAC0E,SAAS,CACrB;EAED,IAAIF,KAAK,CAACpE,OAAO,EAAE;IACjBoE,KAAK,CAACpE,OAAO,CAACsE,SAAS,GAAGlF,OAAA,CAAAmF,YAAY,CAAC7E,OAAA,CAAAC,kBAAkB,CAACK,OAAO,EAAEqE,MAAM,CAACrE,OAAO,EAAEoE,KAAK,CAACpE,OAAO,CAACsE,SAAS,CAAC;;EAG7G,IAAIF,KAAK,CAACtE,SAAS,EAAE;IACnBsE,KAAK,CAACtE,SAAS,CAACwE,SAAS,GAAGlF,OAAA,CAAAmF,YAAY,CAAC7E,OAAA,CAAAC,kBAAkB,CAACG,SAAS,EAAEsE,KAAK,CAACtE,SAAS,CAACwE,SAAS,CAAC;;EAGnG,IAAIF,KAAK,CAACnE,gBAAgB,EAAE;IAC1BmE,KAAK,CAACnE,gBAAgB,CAACqE,SAAS,GAAGlF,OAAA,CAAAmF,YAAY,CAC7C7E,OAAA,CAAAC,kBAAkB,CAACM,gBAAgB,EACnC,CAACmE,KAAK,CAACN,QAAQ,IAAIO,MAAM,CAACpE,gBAAgB,EAC1CmE,KAAK,CAACnE,gBAAgB,CAACqE,SAAS,CACjC;;EAGH,IAAIF,KAAK,CAACvE,IAAI,EAAE;IACduE,KAAK,CAACvE,IAAI,CAACyE,SAAS,GAAGlF,OAAA,CAAAmF,YAAY,CAAC7E,OAAA,CAAAC,kBAAkB,CAACE,IAAI,EAAEwE,MAAM,CAACxE,IAAI,EAAEuE,KAAK,CAACvE,IAAI,CAACyE,SAAS,CAAC;;EAGjG,IAAIF,KAAK,CAACrE,gBAAgB,EAAE;IAC1BqE,KAAK,CAACrE,gBAAgB,CAACuE,SAAS,GAAGlF,OAAA,CAAAmF,YAAY,CAC7C7E,OAAA,CAAAC,kBAAkB,CAACI,gBAAgB,EACnCsE,MAAM,CAACtE,gBAAgB,EACvBqE,KAAK,CAACrE,gBAAgB,CAACuE,SAAS,CACjC;;EAEH7E,OAAA,CAAA+E,2BAA2B,CAACJ,KAA8B,CAAC;AAC7D,CAAC;AAtCY1E,OAAA,CAAAyE,0BAA0B,GAAAA,0BAAA"}
+{"version":3,"names":["react_1","require","react_icons_1","react_tabster_1","react_theme_1","index_1","exports","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","__styles","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","qhf8xq","sj55zd","De3pzq","z189sj","uwmqm3","Bqenvij","mc9l5x","Bt984gj","Be2twd7","Bceei9c","i8kkvl","Belr9w4","Jwef8y","Bi91k9c","Bk3fhr4","Bmfj8id","Bg7n49j","famaaq","Bh6795r","t0hwav","a9b677","Bg96gwp","Brf1p80","disabled","f","i","d","h","useMenuItemStyles_unstable","state","styles","className","mergeClasses","useCheckmarkStyles_unstable"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n  root: 'fui-MenuItem',\n  icon: 'fui-MenuItem__icon',\n  checkmark: 'fui-MenuItem__checkmark',\n  submenuIndicator: 'fui-MenuItem__submenuIndicator',\n  content: 'fui-MenuItem__content',\n  secondaryContent: 'fui-MenuItem__secondaryContent',\n};\n\nconst useStyles = makeStyles({\n  focusIndicator: createFocusOutlineStyle(),\n  // TODO: this should be extracted to another package\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: '10px',\n    paddingLeft: '10px',\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    ...shorthands.gap('4px'),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      color: tokens.colorNeutralForeground2Hover,\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n      [`& .${menuItemClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandSelected,\n      },\n    },\n\n    userSelect: 'none',\n  },\n  content: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1,\n  },\n  secondaryContent: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n    ':focus': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n  icon: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  submenuIndicator: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':hover': {\n      color: tokens.colorNeutralForegroundDisabled,\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${menuItemClassNames.icon}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':focus': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    menuItemClassNames.root,\n    styles.root,\n    styles.focusIndicator,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemClassNames.secondaryContent,\n      !state.disabled && styles.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n  }\n\n  if (state.submenuIndicator) {\n    state.submenuIndicator.className = mergeClasses(\n      menuItemClassNames.submenuIndicator,\n      styles.submenuIndicator,\n      state.submenuIndicator.className,\n    );\n  }\n  useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"],"mappings":"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"}

package/lib-commonjs/components/MenuPopover/MenuPopover.types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuPopoverSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MenuPopover Props\n */\nexport type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;\n\n/**\n * State used in rendering MenuPopover\n */\nexport type MenuPopoverState = ComponentState<MenuPopoverSlots> & {\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"],"mappings":""}
+{"version":3,"names":[],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.types.ts"],"sourcesContent":["import type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuPopoverSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MenuPopover Props\n */\nexport type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;\n\n/**\n * State used in rendering MenuPopover\n */\nexport type MenuPopoverState = ComponentState<MenuPopoverSlots> &\n  Pick<PortalProps, 'mountNode'> & {\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"],"mappings":""}

package/lib-commonjs/components/MenuPopover/renderMenuPopover.js

@@ -20,7 +20,9 @@ const renderMenuPopover_unstable = state => {
       ...slotProps.root
     });
   }
-  return React.createElement(react_portal_1.Portal, null, React.createElement(slots.root, {
+  return React.createElement(react_portal_1.Portal, {
+    mountNode: state.mountNode
+  }, React.createElement(slots.root, {
     ...slotProps.root
   }));
 };

package/lib-commonjs/components/MenuPopover/renderMenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","require","react_utilities_1","react_portal_1","renderMenuPopover_unstable","state","slots","slotProps","getSlots","inline","createElement","root","Portal","exports"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/renderMenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n  const { slots, slotProps } = getSlots<MenuPopoverSlots>(state);\n\n  if (state.inline) {\n    return <slots.root {...slotProps.root} />;\n  }\n\n  return (\n    <Portal>\n      <slots.root {...slotProps.root} />\n    </Portal>\n  );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAEA,MAAAE,cAAA,gBAAAF,OAAA;AAEA;;;AAGO,MAAMG,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,iBAAA,CAAAM,QAAQ,CAAmBH,KAAK,CAAC;EAE9D,IAAIA,KAAK,CAACI,MAAM,EAAE;IAChB,OAAOT,KAAA,CAAAU,aAAA,CAACJ,KAAK,CAACK,IAAI;MAAA,GAAKJ,SAAS,CAACI;IAAI,EAAI;;EAG3C,OACEX,KAAA,CAAAU,aAAA,CAACP,cAAA,CAAAS,MAAM,QACLZ,KAAA,CAAAU,aAAA,CAACJ,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,CAC3B;AAEb,CAAC;AAZYE,OAAA,CAAAT,0BAA0B,GAAAA,0BAAA"}
+{"version":3,"names":["React","require","react_utilities_1","react_portal_1","renderMenuPopover_unstable","state","slots","slotProps","getSlots","inline","createElement","root","Portal","mountNode","exports"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/renderMenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n  const { slots, slotProps } = getSlots<MenuPopoverSlots>(state);\n\n  if (state.inline) {\n    return <slots.root {...slotProps.root} />;\n  }\n\n  return (\n    <Portal mountNode={state.mountNode}>\n      <slots.root {...slotProps.root} />\n    </Portal>\n  );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAEA,MAAAE,cAAA,gBAAAF,OAAA;AAEA;;;AAGO,MAAMG,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,iBAAA,CAAAM,QAAQ,CAAmBH,KAAK,CAAC;EAE9D,IAAIA,KAAK,CAACI,MAAM,EAAE;IAChB,OAAOT,KAAA,CAAAU,aAAA,CAACJ,KAAK,CAACK,IAAI;MAAA,GAAKJ,SAAS,CAACI;IAAI,EAAI;;EAG3C,OACEX,KAAA,CAAAU,aAAA,CAACP,cAAA,CAAAS,MAAM;IAACC,SAAS,EAAER,KAAK,CAACQ;EAAS,GAChCb,KAAA,CAAAU,aAAA,CAACJ,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,CAC3B;AAEb,CAAC;AAZYG,OAAA,CAAAV,0BAA0B,GAAAA,0BAAA"}

package/lib-commonjs/components/MenuPopover/useMenuPopover.js

@@ -55,6 +55,7 @@ const useMenuPopover_unstable = (props, ref) => {
     () => clearTimeout(throttleDispatchTimerRef.current);
   }, []);
   const inline = (_a = menuContext_1.useMenuContext_unstable(context => context.inline)) !== null && _a !== void 0 ? _a : false;
+  const mountNode = menuContext_1.useMenuContext_unstable(context => context.mountNode);
   const rootProps = react_utilities_1.getNativeElementProps('div', {
     role: 'presentation',
     ...props,
@@ -103,6 +104,7 @@ const useMenuPopover_unstable = (props, ref) => {
   });
   return {
     inline,
+    mountNode,
     components: {
       root: 'div'
     },

package/lib-commonjs/components/MenuPopover/useMenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","require","keyboard_keys_1","react_utilities_1","menuContext_1","index_1","react_shared_contexts_1","useIsSubmenu_1","useMenuPopover_unstable","props","ref","popoverRef","useMenuContext_unstable","context","menuPopoverRef","setOpen","open","openOnHover","isSubmenu","useIsSubmenu","canDispatchCustomEventRef","useRef","throttleDispatchTimerRef","dir","useFluent_unstable","CloseArrowKey","ArrowLeft","ArrowRight","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","dispatchMenuEnterEvent","setTimeout","useEffect","clearTimeout","inline","_a","rootProps","getNativeElementProps","role","useMergedRefs","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","useEventCallback","event","keyboard","type","key","Escape","contains","target","stopPropagation","Tab","components","root","exports"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const isSubmenu = useIsSubmenu();\n  const canDispatchCustomEventRef = React.useRef(true);\n  const throttleDispatchTimerRef = React.useRef(0);\n\n  const { dir } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(\n    (node: HTMLElement) => {\n      if (node) {\n        // Dispatches the custom menu mouse enter event with throttling\n        // Needs to trigger on mouseover to support keyboard + mouse together\n        // i.e. keyboard opens submenus while cursor is still on the parent\n        node.addEventListener('mouseover', e => {\n          if (canDispatchCustomEventRef.current) {\n            canDispatchCustomEventRef.current = false;\n            dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore #16889 Node setTimeout type leaking\n            throttleDispatchTimerRef.current = setTimeout(() => (canDispatchCustomEventRef.current = true), 250);\n          }\n        });\n      }\n    },\n    [popoverRef, throttleDispatchTimerRef],\n  );\n\n  React.useEffect(() => {\n    () => clearTimeout(throttleDispatchTimerRef.current);\n  }, []);\n\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const rootProps = getNativeElementProps('div', {\n    role: 'presentation',\n    ...props,\n    ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef),\n  });\n\n  const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n\n  rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n    }\n\n    onMouseEnterOriginal?.(event);\n  });\n\n  rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    const key = event.key;\n\n    if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n      if (open && popoverRef.current?.contains(event.target as HTMLElement)) {\n        setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n        // stop propagation to avoid conflicting with other elements that listen for `Escape`\n        // e,g: Dialog, Popover and Tooltip\n        event.stopPropagation();\n      }\n    }\n\n    if (key === Tab) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n    }\n\n    onKeyDownOriginal?.(event);\n  });\n\n  return {\n    inline,\n    components: {\n      root: 'div',\n    },\n    root: rootProps,\n  };\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","require","keyboard_keys_1","react_utilities_1","menuContext_1","index_1","react_shared_contexts_1","useIsSubmenu_1","useMenuPopover_unstable","props","ref","popoverRef","useMenuContext_unstable","context","menuPopoverRef","setOpen","open","openOnHover","isSubmenu","useIsSubmenu","canDispatchCustomEventRef","useRef","throttleDispatchTimerRef","dir","useFluent_unstable","CloseArrowKey","ArrowLeft","ArrowRight","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","dispatchMenuEnterEvent","setTimeout","useEffect","clearTimeout","inline","_a","mountNode","rootProps","getNativeElementProps","role","useMergedRefs","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","useEventCallback","event","keyboard","type","key","Escape","contains","target","stopPropagation","Tab","components","root","exports"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const isSubmenu = useIsSubmenu();\n  const canDispatchCustomEventRef = React.useRef(true);\n  const throttleDispatchTimerRef = React.useRef(0);\n\n  const { dir } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(\n    (node: HTMLElement) => {\n      if (node) {\n        // Dispatches the custom menu mouse enter event with throttling\n        // Needs to trigger on mouseover to support keyboard + mouse together\n        // i.e. keyboard opens submenus while cursor is still on the parent\n        node.addEventListener('mouseover', e => {\n          if (canDispatchCustomEventRef.current) {\n            canDispatchCustomEventRef.current = false;\n            dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore #16889 Node setTimeout type leaking\n            throttleDispatchTimerRef.current = setTimeout(() => (canDispatchCustomEventRef.current = true), 250);\n          }\n        });\n      }\n    },\n    [popoverRef, throttleDispatchTimerRef],\n  );\n\n  React.useEffect(() => {\n    () => clearTimeout(throttleDispatchTimerRef.current);\n  }, []);\n\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const mountNode = useMenuContext_unstable(context => context.mountNode);\n\n  const rootProps = getNativeElementProps('div', {\n    role: 'presentation',\n    ...props,\n    ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef),\n  });\n\n  const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n\n  rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n    }\n\n    onMouseEnterOriginal?.(event);\n  });\n\n  rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    const key = event.key;\n\n    if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n      if (open && popoverRef.current?.contains(event.target as HTMLElement)) {\n        setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n        // stop propagation to avoid conflicting with other elements that listen for `Escape`\n        // e,g: Dialog, Popover and Tooltip\n        event.stopPropagation();\n      }\n    }\n\n    if (key === Tab) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n    }\n\n    onKeyDownOriginal?.(event);\n  });\n\n  return {\n    inline,\n    mountNode,\n    components: {\n      root: 'div',\n    },\n    root: rootProps,\n  };\n};\n"],"mappings":"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"}

package/lib-commonjs/contexts/menuContext.js

@@ -18,6 +18,7 @@ const menuContextDefaultValue = {
   menuPopoverRef: {
     current: null
   },
+  mountNode: null,
   triggerId: '',
   openOnContext: false,
   openOnHover: false,

package/lib-commonjs/contexts/menuContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["react_context_selector_1","require","exports","MenuContext","createContext","undefined","menuContextDefaultValue","open","setOpen","checkedValues","onCheckedValueChange","isSubmenu","triggerRef","current","menuPopoverRef","triggerId","openOnContext","openOnHover","hasIcons","hasCheckmarks","inline","persistOnItemClick","MenuProvider","Provider","useMenuContext_unstable","selector","useContextSelector","ctx"],"sources":["../../../../../../../../packages/react-components/react-menu/src/contexts/menuContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue | undefined>(\n  undefined,\n) as Context<MenuContextValue>;\n\nconst menuContextDefaultValue: MenuContextValue = {\n  open: false,\n  setOpen: () => false,\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  isSubmenu: false,\n  triggerRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n  menuPopoverRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n  triggerId: '',\n  openOnContext: false,\n  openOnHover: false,\n  hasIcons: false,\n  hasCheckmarks: false,\n  inline: false,\n  persistOnItemClick: false,\n};\n\n/**\n * Context shared between Menu and its children components\n *\n * Extends and drills down MenuList props to simplify API\n */\nexport type MenuContextValue = Pick<\n  MenuState,\n  | 'openOnHover'\n  | 'openOnContext'\n  | 'triggerRef'\n  | 'menuPopoverRef'\n  | 'setOpen'\n  | 'isSubmenu'\n  | 'triggerId'\n  | 'hasIcons'\n  | 'hasCheckmarks'\n  | 'persistOnItemClick'\n  | 'inline'\n  | 'checkedValues'\n  | 'onCheckedValueChange'\n> & {\n  open: boolean;\n  triggerId: string;\n  /**\n   * Default values to be checked on mount\n   * @deprecated this property is not used internally anymore,\n   * the signature remains just to avoid breaking changes\n   */\n  defaultCheckedValues?: Record<string, string[]>;\n};\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext_unstable = <T>(selector: ContextSelector<MenuContextValue, T>) =>\n  useContextSelector(MenuContext, (ctx = menuContextDefaultValue) => selector(ctx));\n"],"mappings":";;;;;;AACA,MAAAA,wBAAA,gBAAAC,OAAA;AAIaC,OAAA,CAAAC,WAAW,gBAA8BH,wBAAA,CAAAI,aAAa,CACjEC,SAAS,CACmB;AAE9B,MAAMC,uBAAuB,GAAqB;EAChDC,IAAI,EAAE,KAAK;EACXC,OAAO,EAAEA,CAAA,KAAM,KAAK;EACpBC,aAAa,EAAE,EAAE;EACjBC,oBAAoB,EAAEA,CAAA,KAAM,IAAI;EAChCC,SAAS,EAAE,KAAK;EAChBC,UAAU,EAAG;IAAEC,OAAO,EAAE;EAAI,CAAqD;EACjFC,cAAc,EAAG;IAAED,OAAO,EAAE;EAAI,CAAqD;EACrFE,SAAS,EAAE,EAAE;EACbC,aAAa,EAAE,KAAK;EACpBC,WAAW,EAAE,KAAK;EAClBC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAE,KAAK;EACpBC,MAAM,EAAE,KAAK;EACbC,kBAAkB,EAAE;CACrB;AAiCYnB,OAAA,CAAAoB,YAAY,GAAGpB,OAAA,CAAAC,WAAW,CAACoB,QAAQ;AAEzC,MAAMC,uBAAuB,GAAOC,QAA8C,IACvFzB,wBAAA,CAAA0B,kBAAkB,CAACxB,OAAA,CAAAC,WAAW,EAAE,CAACwB,GAAG,GAAGrB,uBAAuB,KAAKmB,QAAQ,CAACE,GAAG,CAAC,CAAC;AADtEzB,OAAA,CAAAsB,uBAAuB,GAAAA,uBAAA"}
+{"version":3,"names":["react_context_selector_1","require","exports","MenuContext","createContext","undefined","menuContextDefaultValue","open","setOpen","checkedValues","onCheckedValueChange","isSubmenu","triggerRef","current","menuPopoverRef","mountNode","triggerId","openOnContext","openOnHover","hasIcons","hasCheckmarks","inline","persistOnItemClick","MenuProvider","Provider","useMenuContext_unstable","selector","useContextSelector","ctx"],"sources":["../../../../../../../../packages/react-components/react-menu/src/contexts/menuContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue | undefined>(\n  undefined,\n) as Context<MenuContextValue>;\n\nconst menuContextDefaultValue: MenuContextValue = {\n  open: false,\n  setOpen: () => false,\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  isSubmenu: false,\n  triggerRef: { current: null } as unknown as React.MutableRefObject<HTMLElement>,\n  menuPopoverRef: { current: null } as unknown as React.MutableRefObject<HTMLElement>,\n  mountNode: null,\n  triggerId: '',\n  openOnContext: false,\n  openOnHover: false,\n  hasIcons: false,\n  hasCheckmarks: false,\n  inline: false,\n  persistOnItemClick: false,\n};\n\n/**\n * Context shared between Menu and its children components\n *\n * Extends and drills down MenuList props to simplify API\n */\nexport type MenuContextValue = Pick<\n  MenuState,\n  | 'openOnHover'\n  | 'openOnContext'\n  | 'triggerRef'\n  | 'menuPopoverRef'\n  | 'setOpen'\n  | 'isSubmenu'\n  | 'mountNode'\n  | 'triggerId'\n  | 'hasIcons'\n  | 'hasCheckmarks'\n  | 'persistOnItemClick'\n  | 'inline'\n  | 'checkedValues'\n  | 'onCheckedValueChange'\n> & {\n  open: boolean;\n  triggerId: string;\n  /**\n   * Default values to be checked on mount\n   * @deprecated this property is not used internally anymore,\n   * the signature remains just to avoid breaking changes\n   */\n  defaultCheckedValues?: Record<string, string[]>;\n};\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext_unstable = <T>(selector: ContextSelector<MenuContextValue, T>) =>\n  useContextSelector(MenuContext, (ctx = menuContextDefaultValue) => selector(ctx));\n"],"mappings":";;;;;;AACA,MAAAA,wBAAA,gBAAAC,OAAA;AAIaC,OAAA,CAAAC,WAAW,gBAA8BH,wBAAA,CAAAI,aAAa,CACjEC,SAAS,CACmB;AAE9B,MAAMC,uBAAuB,GAAqB;EAChDC,IAAI,EAAE,KAAK;EACXC,OAAO,EAAEA,CAAA,KAAM,KAAK;EACpBC,aAAa,EAAE,EAAE;EACjBC,oBAAoB,EAAEA,CAAA,KAAM,IAAI;EAChCC,SAAS,EAAE,KAAK;EAChBC,UAAU,EAAE;IAAEC,OAAO,EAAE;EAAI,CAAoD;EAC/EC,cAAc,EAAE;IAAED,OAAO,EAAE;EAAI,CAAoD;EACnFE,SAAS,EAAE,IAAI;EACfC,SAAS,EAAE,EAAE;EACbC,aAAa,EAAE,KAAK;EACpBC,WAAW,EAAE,KAAK;EAClBC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAE,KAAK;EACpBC,MAAM,EAAE,KAAK;EACbC,kBAAkB,EAAE;CACrB;AAkCYpB,OAAA,CAAAqB,YAAY,GAAGrB,OAAA,CAAAC,WAAW,CAACqB,QAAQ;AAEzC,MAAMC,uBAAuB,GAAOC,QAA8C,IACvF1B,wBAAA,CAAA2B,kBAAkB,CAACzB,OAAA,CAAAC,WAAW,EAAE,CAACyB,GAAG,GAAGtB,uBAAuB,KAAKoB,QAAQ,CAACE,GAAG,CAAC,CAAC;AADtE1B,OAAA,CAAAuB,uBAAuB,GAAAA,uBAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-menu",
-  "version": "0.0.0-nightly-20230302-0419.1",
+  "version": "0.0.0-nightly-20230306-0424.1",
   "description": "Fluent UI menu component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -29,22 +29,22 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230302-0419.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230306-0424.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-cypress": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-aria": "0.0.0-nightly-20230302-0419.1",
-    "@fluentui/keyboard-keys": "0.0.0-nightly-20230302-0419.1",
-    "@fluentui/react-context-selector": "0.0.0-nightly-20230302-0419.1",
+    "@fluentui/react-aria": "0.0.0-nightly-20230306-0424.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightly-20230306-0424.1",
+    "@fluentui/react-context-selector": "0.0.0-nightly-20230306-0424.1",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-portal": "0.0.0-nightly-20230302-0419.1",
-    "@fluentui/react-positioning": "0.0.0-nightly-20230302-0419.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20230302-0419.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20230302-0419.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20230302-0419.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20230302-0419.1",
+    "@fluentui/react-portal": "0.0.0-nightly-20230306-0424.1",
+    "@fluentui/react-positioning": "0.0.0-nightly-20230306-0424.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20230306-0424.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20230306-0424.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20230306-0424.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20230306-0424.1",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },