@fluentui/react-menu 9.17.6 → 9.18.0

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @fluentui/react-menu
 
-This log was last generated on Fri, 04 Jul 2025 10:00:04 GMT and should not be manually modified.
+This log was last generated on Fri, 11 Jul 2025 15:56:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.18.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.18.0)
+
+Fri, 11 Jul 2025 15:56:55 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.17.6..@fluentui/react-menu_v9.18.0)
+
+### Minor changes
+
+- feat: Add timeout configuration to safezone prop ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by lingfangao@hotmail.com)
+- Bump @fluentui/react-positioning to v9.19.0 ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by beachball)
+
+### Patches
+
+- fix(react-menu): Fix disabled styles for secondaryContent and subText ([PR #34795](https://github.com/microsoft/fluentui/pull/34795) by jiangemma@microsoft.com)
+- fix: resolve regression with ".hoverDelay" handling ([PR #34793](https://github.com/microsoft/fluentui/pull/34793) by olfedias@microsoft.com)
+
 ## [9.17.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.17.6)
 
-Fri, 04 Jul 2025 10:00:04 GMT 
+Fri, 04 Jul 2025 10:02:44 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.17.5..@fluentui/react-menu_v9.17.6)
 
 ### Patches

package/dist/index.d.ts

@@ -582,7 +582,9 @@ export declare type MenuState = ComponentState<MenuSlots> & Required<Pick<MenuPr
     /**
      * Callback to open/close the popup
      */
-    setOpen: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;
+    setOpen: (e: MenuOpenEvent, data: MenuOpenChangeData & {
+        ignoreHoverDelay?: boolean;
+    }) => void;
     /**
      * Id for the MenuTrigger element for aria relationship
      */
@@ -738,7 +740,9 @@ export declare const useCheckmarkStyles_unstable: (state: MenuItemSelectableStat
  * @param props - props from this instance of Menu
  */
 export declare const useMenu_unstable: (props: MenuProps & {
-    safeZone?: boolean;
+    safeZone?: boolean | {
+        timeout?: number;
+    };
 }) => MenuState;
 
 export declare const useMenuContext_unstable: <T>(selector: ContextSelector<MenuContextValue, T>) => T;

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

@@ -1 +1 @@
-{"version":3,"sources":["../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 `MenuTrigger` and `MenuPopover`.\n     * Alternatively can only contain `MenuPopover` if using a custom `target`.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\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    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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    /**\n     * An optional safe zone area to be rendered around the menu\n     */\n    safeZone?: React.ReactElement | null;\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: 'menuSafeZoneMouseEnter';\n      event: React.MouseEvent;\n    }\n  | {\n      type: 'menuSafeZoneTimeout';\n      event: Event;\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"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../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 `MenuTrigger` and `MenuPopover`.\n     * Alternatively can only contain `MenuPopover` if using a custom `target`.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\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    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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 & { ignoreHoverDelay?: boolean }) => 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    /**\n     * An optional safe zone area to be rendered around the menu\n     */\n    safeZone?: React.ReactElement | null;\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: 'menuSafeZoneMouseEnter';\n      event: React.MouseEvent;\n    }\n  | {\n      type: 'menuSafeZoneTimeout';\n      event: Event;\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"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/Menu/useMenu.js

@@ -66,7 +66,7 @@ const submenuFallbackPositions = [
     });
     const safeZoneHandle = useSafeZoneArea({
         disabled: !enableSafeZone,
-        timeout: 1500,
+        timeout: typeof safeZone === 'object' ? safeZone.timeout : 300,
         onSafeZoneEnter: (e)=>{
             setOpen(e, {
                 open: true,
@@ -212,10 +212,11 @@ const useMenuOpenState = (state)=>{
             // < React 17 still uses pooled synthetic events
             e.persist();
         }
-        if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {
+        const shouldUseDelay = !data.ignoreHoverDelay && (e.type === 'mouseleave' || e.type === 'mouseover' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT);
+        if (shouldUseDelay) {
             var _state_triggerRef_current;
             if ((_state_triggerRef_current = state.triggerRef.current) === null || _state_triggerRef_current === void 0 ? void 0 : _state_triggerRef_current.contains(e.target)) {
-                enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';
+                enteringTriggerRef.current = e.type === 'mouseover' || e.type === 'mousemove';
             }
             setOpenTimeout(()=>trySetOpen(e, data), state.hoverDelay);
         } else {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Menu/useMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  resolvePositioningShorthand,\n  usePositioningMouseTarget,\n  usePositioning,\n  useSafeZoneArea,\n  type PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n  useControllableState,\n  useId,\n  useOnClickOutside,\n  useEventCallback,\n  useOnScrollOutside,\n  elementContains,\n  useTimeout,\n  useFirstMount,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_SAFEZONE_TIMEOUT_EVENT, MENU_ENTER_EVENT, useOnMenuMouseEnter, useIsSubmenu } from '../../utils';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\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 & { safeZone?: boolean }): 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    safeZone,\n  } = props;\n\n  const { targetDocument } = useFluent();\n  const triggerId = useId('menu');\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n  const positioningOptions = {\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, containerRef } = usePositioning(positioningOptions);\n\n  const enableSafeZone = safeZone && openOnHover;\n  const safeZoneDescriptorRef = React.useRef({\n    isInside: false,\n    mouseCoordinates: { x: 0, y: 0 },\n  });\n\n  const safeZoneHandle = useSafeZoneArea({\n    disabled: !enableSafeZone,\n    timeout: 1500,\n\n    onSafeZoneEnter: e => {\n      setOpen(e, { open: true, keyboard: false, type: 'menuSafeZoneMouseEnter', event: e });\n      safeZoneDescriptorRef.current.isInside = true;\n    },\n    onSafeZoneLeave: () => {\n      safeZoneDescriptorRef.current.isInside = false;\n    },\n    onSafeZoneMove: e => {\n      safeZoneDescriptorRef.current.mouseCoordinates = {\n        x: e.clientX,\n        y: e.clientY,\n      };\n    },\n    onSafeZoneTimeout: () => {\n      const event = new CustomEvent(MENU_SAFEZONE_TIMEOUT_EVENT);\n\n      setOpen(event, { open: false, keyboard: false, type: 'menuSafeZoneTimeout', event });\n\n      if (safeZoneDescriptorRef.current.isInside && targetDocument) {\n        const elementsInPoint = targetDocument.elementsFromPoint(\n          safeZoneDescriptorRef.current.mouseCoordinates.x,\n          safeZoneDescriptorRef.current.mouseCoordinates.y,\n        );\n        const menuItemEl = elementsInPoint.find(el => {\n          return el.classList.contains(menuItemClassNames.root);\n        }) as HTMLElement | null;\n\n        menuItemEl?.dispatchEvent(event);\n      }\n    },\n  });\n\n  const triggerRef = useMergedRefs(targetRef, safeZoneHandle.targetRef);\n  const menuPopoverRef = useMergedRefs(containerRef, safeZoneHandle.containerRef);\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    safeZone: safeZoneHandle.elementToRender,\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  'use no memo';\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 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    }\n\n    if (data.bubble) {\n      parentSetOpen(e, { ...data });\n    }\n\n    setOpenState(data.open);\n  });\n\n  const [setOpenTimeout, clearOpenTimeout] = useTimeout();\n\n  const setOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n    clearOpenTimeout();\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      setOpenTimeout(() => 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  // 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  const firstMount = useFirstMount();\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    } else {\n      if (!firstMount) {\n        if (targetDocument?.activeElement === targetDocument?.body) {\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    // firstMount change should not re-run this effect\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef]);\n\n  return [open, setOpen] as const;\n};\n"],"names":["React","resolvePositioningShorthand","usePositioningMouseTarget","usePositioning","useSafeZoneArea","useControllableState","useId","useOnClickOutside","useEventCallback","useOnScrollOutside","elementContains","useTimeout","useFirstMount","useMergedRefs","useFluent_unstable","useFluent","useFocusFinders","useMenuContext_unstable","MENU_SAFEZONE_TIMEOUT_EVENT","MENU_ENTER_EVENT","useOnMenuMouseEnter","useIsSubmenu","menuItemClassNames","submenuFallbackPositions","useMenu_unstable","props","isSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","mountNode","safeZone","targetDocument","triggerId","contextTarget","setContextTarget","positioningOptions","position","align","target","undefined","fallbackPositions","positioning","children","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","containerRef","enableSafeZone","safeZoneDescriptorRef","useRef","isInside","mouseCoordinates","x","y","safeZoneHandle","disabled","timeout","onSafeZoneEnter","e","setOpen","open","keyboard","type","event","current","onSafeZoneLeave","onSafeZoneMove","clientX","clientY","onSafeZoneTimeout","CustomEvent","elementsInPoint","elementsFromPoint","menuItemEl","find","el","classList","contains","root","dispatchEvent","triggerRef","menuPopoverRef","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","elementToRender","setCheckedValues","state","defaultState","initialState","name","checkedItems","currentValue","parentSetOpen","context","data","enteringTriggerRef","setOpenState","trySetOpen","detail","nativeEvent","bubble","setOpenTimeout","clearOpenTimeout","Event","persist","element","refs","filter","Boolean","callback","findFirstFocusable","focusFirst","useCallback","firstFocusable","focus","firstMount","useEffect","activeElement","body"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/Menu/useMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  resolvePositioningShorthand,\n  usePositioningMouseTarget,\n  usePositioning,\n  useSafeZoneArea,\n  type PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n  useControllableState,\n  useId,\n  useOnClickOutside,\n  useEventCallback,\n  useOnScrollOutside,\n  elementContains,\n  useTimeout,\n  useFirstMount,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_SAFEZONE_TIMEOUT_EVENT, MENU_ENTER_EVENT, useOnMenuMouseEnter, useIsSubmenu } from '../../utils';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\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 & { safeZone?: boolean | { timeout?: number } }): 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    safeZone,\n  } = props;\n\n  const { targetDocument } = useFluent();\n  const triggerId = useId('menu');\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n  const positioningOptions = {\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, containerRef } = usePositioning(positioningOptions);\n\n  const enableSafeZone = safeZone && openOnHover;\n  const safeZoneDescriptorRef = React.useRef({\n    isInside: false,\n    mouseCoordinates: { x: 0, y: 0 },\n  });\n\n  const safeZoneHandle = useSafeZoneArea({\n    disabled: !enableSafeZone,\n    timeout: typeof safeZone === 'object' ? safeZone.timeout : 300,\n\n    onSafeZoneEnter: e => {\n      setOpen(e, { open: true, keyboard: false, type: 'menuSafeZoneMouseEnter', event: e });\n      safeZoneDescriptorRef.current.isInside = true;\n    },\n    onSafeZoneLeave: () => {\n      safeZoneDescriptorRef.current.isInside = false;\n    },\n    onSafeZoneMove: e => {\n      safeZoneDescriptorRef.current.mouseCoordinates = {\n        x: e.clientX,\n        y: e.clientY,\n      };\n    },\n    onSafeZoneTimeout: () => {\n      const event = new CustomEvent(MENU_SAFEZONE_TIMEOUT_EVENT);\n\n      setOpen(event, { open: false, keyboard: false, type: 'menuSafeZoneTimeout', event });\n\n      if (safeZoneDescriptorRef.current.isInside && targetDocument) {\n        const elementsInPoint = targetDocument.elementsFromPoint(\n          safeZoneDescriptorRef.current.mouseCoordinates.x,\n          safeZoneDescriptorRef.current.mouseCoordinates.y,\n        );\n        const menuItemEl = elementsInPoint.find(el => {\n          return el.classList.contains(menuItemClassNames.root);\n        }) as HTMLElement | null;\n\n        menuItemEl?.dispatchEvent(event);\n      }\n    },\n  });\n\n  const triggerRef = useMergedRefs(targetRef, safeZoneHandle.targetRef);\n  const menuPopoverRef = useMergedRefs(containerRef, safeZoneHandle.containerRef);\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    safeZone: safeZoneHandle.elementToRender,\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  'use no memo';\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 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    }\n\n    if (data.bubble) {\n      parentSetOpen(e, { ...data });\n    }\n\n    setOpenState(data.open);\n  });\n\n  const [setOpenTimeout, clearOpenTimeout] = useTimeout();\n\n  const setOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData & { ignoreHoverDelay?: boolean }) => {\n    clearOpenTimeout();\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    const shouldUseDelay =\n      !data.ignoreHoverDelay &&\n      (e.type === 'mouseleave' || e.type === 'mouseover' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT);\n\n    if (shouldUseDelay) {\n      if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n        enteringTriggerRef.current = e.type === 'mouseover' || e.type === 'mousemove';\n      }\n\n      setOpenTimeout(() => 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  // 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  const firstMount = useFirstMount();\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    } else {\n      if (!firstMount) {\n        if (targetDocument?.activeElement === targetDocument?.body) {\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    // firstMount change should not re-run this effect\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef]);\n\n  return [open, setOpen] as const;\n};\n"],"names":["React","resolvePositioningShorthand","usePositioningMouseTarget","usePositioning","useSafeZoneArea","useControllableState","useId","useOnClickOutside","useEventCallback","useOnScrollOutside","elementContains","useTimeout","useFirstMount","useMergedRefs","useFluent_unstable","useFluent","useFocusFinders","useMenuContext_unstable","MENU_SAFEZONE_TIMEOUT_EVENT","MENU_ENTER_EVENT","useOnMenuMouseEnter","useIsSubmenu","menuItemClassNames","submenuFallbackPositions","useMenu_unstable","props","isSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","mountNode","safeZone","targetDocument","triggerId","contextTarget","setContextTarget","positioningOptions","position","align","target","undefined","fallbackPositions","positioning","children","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","containerRef","enableSafeZone","safeZoneDescriptorRef","useRef","isInside","mouseCoordinates","x","y","safeZoneHandle","disabled","timeout","onSafeZoneEnter","e","setOpen","open","keyboard","type","event","current","onSafeZoneLeave","onSafeZoneMove","clientX","clientY","onSafeZoneTimeout","CustomEvent","elementsInPoint","elementsFromPoint","menuItemEl","find","el","classList","contains","root","dispatchEvent","triggerRef","menuPopoverRef","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","elementToRender","setCheckedValues","state","defaultState","initialState","name","checkedItems","currentValue","parentSetOpen","context","data","enteringTriggerRef","setOpenState","trySetOpen","detail","nativeEvent","bubble","setOpenTimeout","clearOpenTimeout","Event","persist","shouldUseDelay","ignoreHoverDelay","element","refs","filter","Boolean","callback","findFirstFocusable","focusFirst","useCallback","firstFocusable","focus","firstMount","useEffect","activeElement","body"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -45,20 +45,26 @@ const useStyles = /*#__PURE__*/__styles({
     Bk3fhr4: "f19vpps7",
     Bmfj8id: "fv5swzo",
     Bg7n49j: "f1q1x1ba",
+    c7f7en: "ff3wrqt",
     B2d53fq: "fcvwxyo",
     iro3zm: "f1to34ca",
+    Bumww26: "fszh5vc",
     t0hwav: "ft33916",
     Bbusuzp: "f1dcs8yz",
     ze5xyy: "f1kc2mi9",
     Bqrx1nm: "fkavljg",
     Bctn1xl: "fk56vqo",
     h5esng: "ff3wi9b",
+    Bsk3rfj: "fduv4kr",
+    pc6evw: "fb3rf2x",
+    g2kj27: "f183y0b2",
+    evg1t5: "f12is0ou",
     Bh6z0a4: "f1ikwg0d",
     Bh953qp: "f10l1t5h"
   }
 }, {
   d: [".fmnzpld{margin-top:2px;}", ".fqerorx{flex-grow:1;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".f1wl9k8s::before{content:\"\";}", ".f1yn80uh::before{width:var(--strokeWidthThin);}", ".f68mna0::before{height:24px;}", ".f1p5zmk::before{background-color:var(--colorNeutralStroke1);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
-  h: [".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1ijtazh:hover{background-color:var(--colorNeutralBackground1);}", ".fphbwmw:hover{cursor:not-allowed;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f1to34ca:hover:active{background-color:var(--colorNeutralBackground1);}"],
+  h: [".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1ijtazh:hover{background-color:var(--colorNeutralBackground1);}", ".fphbwmw:hover{cursor:not-allowed;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}", ".ff3wrqt:hover .fui-MenuItem__subText{color:var(--colorNeutralForegroundDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f1to34ca:hover:active{background-color:var(--colorNeutralBackground1);}", ".fszh5vc:hover:active .fui-MenuItem__subText{color:var(--colorNeutralForegroundDisabled);}"],
   f: [".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"],
   m: [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
     m: "(forced-colors: active)"
@@ -70,12 +76,31 @@ const useStyles = /*#__PURE__*/__styles({
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.ff3wi9b:hover .fui-MenuItem__icon{background-color:Canvas;}}", {
     m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fduv4kr:hover .fui-MenuItem__subText{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fb3rf2x:hover:active{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f183y0b2:hover:active{background-color:Canvas;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f12is0ou:hover:active .fui-MenuItem__subText{color:GrayText;}}", {
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1ikwg0d:focus{color:GrayText;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f10l1t5h:focus{background-color:Canvas;}}", {
     m: "(forced-colors: active)"
   }]]
 });
+const useSubTextStyles = /*#__PURE__*/__styles({
+  disabled: {
+    sj55zd: "f1s2aq7o",
+    Bbusuzp: "f1dcs8yz"
+  }
+}, {
+  d: [".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
+  m: [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
 const useMultilineStyles = /*#__PURE__*/__styles({
   content: {
     mc9l5x: "f22iagw",
@@ -102,6 +127,7 @@ export const useMenuItemStyles_unstable = state => {
   const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();
   const multilineStyles = useMultilineStyles();
   const subtextBaseStyles = useSubtextBaseStyles();
+  const subTextStyles = useSubTextStyles();
   const multiline = !!state.subText;
   state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);
   if (state.content) {
@@ -111,7 +137,7 @@ export const useMenuItemStyles_unstable = state => {
     state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);
   }
   if (state.secondaryContent) {
-    state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && secondaryContentBaseStyles, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);
+    state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);
   }
   if (state.icon) {
     state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);
@@ -120,7 +146,7 @@ export const useMenuItemStyles_unstable = state => {
     state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);
   }
   if (state.subText) {
-    state.subText.className = mergeClasses(menuItemClassNames.subText, state.subText.className, subtextBaseStyles);
+    state.subText.className = mergeClasses(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);
   }
   useCheckmarkStyles_unstable(state);
   return state;

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","__resetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useRootBaseStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useSubtextBaseStyles","useStyles","B6of3ja","splitItemMain","Bh6795r","splitItemTrigger","Btl43ni","Beyfa6y","uwmqm3","Ftih45","Ccq8qp","Baz25je","cmx5o7","disabled","sj55zd","Bi91k9c","Jwef8y","eoavqd","Bk3fhr4","Bmfj8id","Bg7n49j","B2d53fq","iro3zm","t0hwav","Bbusuzp","ze5xyy","Bqrx1nm","Bctn1xl","h5esng","Bh6z0a4","Bh953qp","d","h","f","m","useMultilineStyles","mc9l5x","Beiy3e4","qb2dma","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","multilineStyles","subtextBaseStyles","multiline","className"],"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nexport const menuItemClassNames = {\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    subText: 'fui-MenuItem__subText'\n};\nconst useRootBaseStyles = makeResetStyles({\n    borderRadius: tokens.borderRadiusMedium,\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: tokens.spacingVerticalSNudge,\n    paddingLeft: tokens.spacingVerticalSNudge,\n    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n    boxSizing: 'border-box',\n    maxWidth: '290px',\n    minHeight: '32px',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'start',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    gap: '4px',\n    ':hover': {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        color: tokens.colorNeutralForeground2Hover,\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        },\n        [`& .${menuItemClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2BrandSelected\n        },\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Hover\n        }\n    },\n    ':hover:active': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        color: tokens.colorNeutralForeground2Pressed,\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Pressed\n        }\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        ':hover': {\n            backgroundColor: 'Canvas',\n            borderColor: 'Highlight',\n            color: 'Highlight'\n        },\n        ...createFocusOutlineStyle({\n            style: {\n                outlineColor: 'Highlight'\n            }\n        })\n    },\n    userSelect: 'none',\n    ...createFocusOutlineStyle()\n});\nconst useContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1\n});\nconst useSecondaryContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    ...typographyStyles.caption1,\n    lineHeight: tokens.lineHeightBase300,\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n        color: tokens.colorNeutralForeground3Hover\n    },\n    ':focus': {\n        color: tokens.colorNeutralForeground3Hover\n    }\n});\nconst useIconBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    flexShrink: 0\n});\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center'\n});\nconst useSubtextBaseStyles = makeResetStyles({\n    ...typographyStyles.caption2,\n    color: tokens.colorNeutralForeground3\n});\nconst useStyles = makeStyles({\n    checkmark: {\n        marginTop: '2px'\n    },\n    splitItemMain: {\n        flexGrow: 1\n    },\n    splitItemTrigger: {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n        paddingLeft: 0,\n        '::before': {\n            content: '\"\"',\n            width: tokens.strokeWidthThin,\n            height: '24px',\n            backgroundColor: tokens.colorNeutralStroke1\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1,\n            cursor: 'not-allowed',\n            [`& .${iconFilledClassName}`]: {\n                display: 'none'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${menuItemClassNames.icon}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1\n        },\n        ':focus': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        '@media (forced-colors: active)': {\n            color: 'GrayText',\n            ':hover': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas',\n                [`& .${menuItemClassNames.icon}`]: {\n                    color: 'GrayText',\n                    backgroundColor: 'Canvas'\n                }\n            },\n            ':focus': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas'\n            }\n        }\n    }\n});\nconst useMultilineStyles = makeStyles({\n    content: {\n        display: 'flex',\n        flexDirection: 'column'\n    },\n    secondaryContent: {\n        alignSelf: 'center'\n    },\n    submenuIndicator: {\n        alignSelf: 'center'\n    }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const rootBaseStyles = useRootBaseStyles();\n    const contentBaseStyles = useContentBaseStyles();\n    const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n    const multilineStyles = useMultilineStyles();\n    const subtextBaseStyles = useSubtextBaseStyles();\n    const multiline = !!state.subText;\n    state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && secondaryContentBaseStyles, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n    }\n    if (state.submenuIndicator) {\n        state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);\n    }\n    if (state.subText) {\n        state.subText.className = mergeClasses(menuItemClassNames.subText, state.subText.className, subtextBaseStyles);\n    }\n    useCheckmarkStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["mergeClasses","__styles","__resetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useRootBaseStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useSubtextBaseStyles","useStyles","B6of3ja","splitItemMain","Bh6795r","splitItemTrigger","Btl43ni","Beyfa6y","uwmqm3","Ftih45","Ccq8qp","Baz25je","cmx5o7","disabled","sj55zd","Bi91k9c","Jwef8y","eoavqd","Bk3fhr4","Bmfj8id","Bg7n49j","c7f7en","B2d53fq","iro3zm","Bumww26","t0hwav","Bbusuzp","ze5xyy","Bqrx1nm","Bctn1xl","h5esng","Bsk3rfj","pc6evw","g2kj27","evg1t5","Bh6z0a4","Bh953qp","d","h","f","m","useSubTextStyles","useMultilineStyles","mc9l5x","Beiy3e4","qb2dma","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","multilineStyles","subtextBaseStyles","subTextStyles","multiline","className"],"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nexport const menuItemClassNames = {\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    subText: 'fui-MenuItem__subText'\n};\nconst useRootBaseStyles = makeResetStyles({\n    borderRadius: tokens.borderRadiusMedium,\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: tokens.spacingVerticalSNudge,\n    paddingLeft: tokens.spacingVerticalSNudge,\n    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n    boxSizing: 'border-box',\n    maxWidth: '290px',\n    minHeight: '32px',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'start',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    gap: '4px',\n    ':hover': {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        color: tokens.colorNeutralForeground2Hover,\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        },\n        [`& .${menuItemClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2BrandSelected\n        },\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Hover\n        }\n    },\n    ':hover:active': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        color: tokens.colorNeutralForeground2Pressed,\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Pressed\n        }\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        ':hover': {\n            backgroundColor: 'Canvas',\n            borderColor: 'Highlight',\n            color: 'Highlight'\n        },\n        ...createFocusOutlineStyle({\n            style: {\n                outlineColor: 'Highlight'\n            }\n        })\n    },\n    userSelect: 'none',\n    ...createFocusOutlineStyle()\n});\nconst useContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1\n});\nconst useSecondaryContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    ...typographyStyles.caption1,\n    lineHeight: tokens.lineHeightBase300,\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n        color: tokens.colorNeutralForeground3Hover\n    },\n    ':focus': {\n        color: tokens.colorNeutralForeground3Hover\n    }\n});\nconst useIconBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    flexShrink: 0\n});\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center'\n});\nconst useSubtextBaseStyles = makeResetStyles({\n    ...typographyStyles.caption2,\n    color: tokens.colorNeutralForeground3\n});\nconst useStyles = makeStyles({\n    checkmark: {\n        marginTop: '2px'\n    },\n    splitItemMain: {\n        flexGrow: 1\n    },\n    splitItemTrigger: {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n        paddingLeft: 0,\n        '::before': {\n            content: '\"\"',\n            width: tokens.strokeWidthThin,\n            height: '24px',\n            backgroundColor: tokens.colorNeutralStroke1\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1,\n            cursor: 'not-allowed',\n            [`& .${iconFilledClassName}`]: {\n                display: 'none'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${menuItemClassNames.icon}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            },\n            [`& .${menuItemClassNames.subText}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1,\n            [`& .${menuItemClassNames.subText}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':focus': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        '@media (forced-colors: active)': {\n            color: 'GrayText',\n            ':hover': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas',\n                [`& .${menuItemClassNames.icon}`]: {\n                    color: 'GrayText',\n                    backgroundColor: 'Canvas'\n                },\n                [`& .${menuItemClassNames.subText}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':hover:active': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas',\n                [`& .${menuItemClassNames.subText}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':focus': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas'\n            }\n        }\n    }\n});\nconst useSubTextStyles = makeStyles({\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    }\n});\nconst useMultilineStyles = makeStyles({\n    content: {\n        display: 'flex',\n        flexDirection: 'column'\n    },\n    secondaryContent: {\n        alignSelf: 'center'\n    },\n    submenuIndicator: {\n        alignSelf: 'center'\n    }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const rootBaseStyles = useRootBaseStyles();\n    const contentBaseStyles = useContentBaseStyles();\n    const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n    const multilineStyles = useMultilineStyles();\n    const subtextBaseStyles = useSubtextBaseStyles();\n    const subTextStyles = useSubTextStyles();\n    const multiline = !!state.subText;\n    state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n    }\n    if (state.submenuIndicator) {\n        state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);\n    }\n    if (state.subText) {\n        state.subText.className = mergeClasses(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);\n    }\n    useCheckmarkStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,EAAAC,aAAA,QAAqC,gBAAgB;AAC1E,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,IAAI,EAAE,oBAAoB;EAC1BC,SAAS,EAAE,yBAAyB;EACpCC,gBAAgB,EAAE,gCAAgC;EAClDC,OAAO,EAAE,uBAAuB;EAChCC,gBAAgB,EAAE,gCAAgC;EAClDC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,iBAAiB,gBAAGf,aAAA;EAAAgB,CAAA;EAAAC,CAAA;AAAA,CAwDzB,CAAC;AACF,MAAMC,oBAAoB,gBAAGlB,aAAA,6MAK5B,CAAC;AACF,MAAMmB,6BAA6B,gBAAGnB,aAAA,6tBAYrC,CAAC;AACF,MAAMoB,iBAAiB,gBAAGpB,aAAA,gKASzB,CAAC;AACF,MAAMqB,6BAA6B,gBAAGrB,aAAA,kJAQrC,CAAC;AACF,MAAMsB,oBAAoB,gBAAGtB,aAAA,kNAG5B,CAAC;AACF,MAAMuB,SAAS,gBAAGxB,QAAA;EAAAW,SAAA;IAAAc,OAAA;EAAA;EAAAC,aAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyEjB,CAAC;AACF,MAAMC,gBAAgB,gBAAGhE,QAAA;EAAAoC,QAAA;IAAAC,MAAA;IAAAY,OAAA;EAAA;AAAA;EAAAW,CAAA;EAAAG,CAAA;IAAAA,CAAA;EAAA;AAAA,CAOxB,CAAC;AACF,MAAME,kBAAkB,gBAAGjE,QAAA;EAAAa,OAAA;IAAAqD,MAAA;IAAAC,OAAA;EAAA;EAAArD,gBAAA;IAAAsD,MAAA;EAAA;EAAAxD,gBAAA;IAAAwD,MAAA;EAAA;AAAA;EAAAR,CAAA;AAAA,CAW1B,CAAC;AACF;AAAyC,OAAO,MAAMS,0BAA0B,GAAIC,KAAK,IAAG;EACxF,aAAa;;EACb,MAAMC,MAAM,GAAG/C,SAAS,CAAC,CAAC;EAC1B,MAAMgD,cAAc,GAAGxD,iBAAiB,CAAC,CAAC;EAC1C,MAAMyD,iBAAiB,GAAGtD,oBAAoB,CAAC,CAAC;EAChD,MAAMuD,0BAA0B,GAAGtD,6BAA6B,CAAC,CAAC;EAClE,MAAMuD,cAAc,GAAGtD,iBAAiB,CAAC,CAAC;EAC1C,MAAMuD,0BAA0B,GAAGtD,6BAA6B,CAAC,CAAC;EAClE,MAAMuD,eAAe,GAAGZ,kBAAkB,CAAC,CAAC;EAC5C,MAAMa,iBAAiB,GAAGvD,oBAAoB,CAAC,CAAC;EAChD,MAAMwD,aAAa,GAAGf,gBAAgB,CAAC,CAAC;EACxC,MAAMgB,SAAS,GAAG,CAAC,CAACV,KAAK,CAACvD,OAAO;EACjCuD,KAAK,CAAC7D,IAAI,CAACwE,SAAS,GAAGlF,YAAY,CAACS,kBAAkB,CAACC,IAAI,EAAE+D,cAAc,EAAEF,KAAK,CAAClC,QAAQ,IAAImC,MAAM,CAACnC,QAAQ,EAAEkC,KAAK,CAAC7D,IAAI,CAACwE,SAAS,CAAC;EACrI,IAAIX,KAAK,CAACzD,OAAO,EAAE;IACfyD,KAAK,CAACzD,OAAO,CAACoE,SAAS,GAAGlF,YAAY,CAACS,kBAAkB,CAACK,OAAO,EAAE4D,iBAAiB,EAAEH,KAAK,CAACzD,OAAO,CAACoE,SAAS,EAAED,SAAS,IAAIH,eAAe,CAAChE,OAAO,CAAC;EACxJ;EACA,IAAIyD,KAAK,CAAC3D,SAAS,EAAE;IACjB2D,KAAK,CAAC3D,SAAS,CAACsE,SAAS,GAAGlF,YAAY,CAACS,kBAAkB,CAACG,SAAS,EAAE4D,MAAM,CAAC5D,SAAS,EAAE2D,KAAK,CAAC3D,SAAS,CAACsE,SAAS,CAAC;EACvH;EACA,IAAIX,KAAK,CAACxD,gBAAgB,EAAE;IACxBwD,KAAK,CAACxD,gBAAgB,CAACmE,SAAS,GAAGlF,YAAY,CAACS,kBAAkB,CAACM,gBAAgB,EAAE4D,0BAA0B,EAAEJ,KAAK,CAAClC,QAAQ,IAAImC,MAAM,CAACnC,QAAQ,EAAEkC,KAAK,CAACxD,gBAAgB,CAACmE,SAAS,EAAED,SAAS,IAAIH,eAAe,CAAC/D,gBAAgB,CAAC;EACxO;EACA,IAAIwD,KAAK,CAAC5D,IAAI,EAAE;IACZ4D,KAAK,CAAC5D,IAAI,CAACuE,SAAS,GAAGlF,YAAY,CAACS,kBAAkB,CAACE,IAAI,EAAEiE,cAAc,EAAEL,KAAK,CAAC5D,IAAI,CAACuE,SAAS,CAAC;EACtG;EACA,IAAIX,KAAK,CAAC1D,gBAAgB,EAAE;IACxB0D,KAAK,CAAC1D,gBAAgB,CAACqE,SAAS,GAAGlF,YAAY,CAACS,kBAAkB,CAACI,gBAAgB,EAAEgE,0BAA0B,EAAEN,KAAK,CAAC1D,gBAAgB,CAACqE,SAAS,EAAED,SAAS,IAAIH,eAAe,CAACjE,gBAAgB,CAAC;EACrM;EACA,IAAI0D,KAAK,CAACvD,OAAO,EAAE;IACfuD,KAAK,CAACvD,OAAO,CAACkE,SAAS,GAAGlF,YAAY,CAACS,kBAAkB,CAACO,OAAO,EAAEuD,KAAK,CAAClC,QAAQ,IAAI2C,aAAa,CAAC3C,QAAQ,EAAEkC,KAAK,CAACvD,OAAO,CAACkE,SAAS,EAAEH,iBAAiB,CAAC;EAC5J;EACAvE,2BAA2B,CAAC+D,KAAK,CAAC;EAClC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/MenuTrigger/useMenuTrigger.js

@@ -33,7 +33,8 @@ function noop() {
         menuPopoverRef
     ]);
     const openedWithKeyboardRef = React.useRef(false);
-    const hasMouseMoved = React.useRef(false);
+    const openedViaSafeZoneRef = React.useRef(false);
+    const hasMouseMovedRef = React.useRef(false);
     const { dir } = useFluent();
     const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;
     const child = getTriggerChild(children);
@@ -43,7 +44,7 @@ function noop() {
     // but the cursor is already over the menu trigger.
     const safeZoneHandlerRef = useOnMenuSafeZoneTimeout(useEventCallback(()=>{
         if (isSubmenu) {
-            hasMouseMoved.current = true;
+            openedViaSafeZoneRef.current = true;
         }
     }));
     const onContextMenu = (event)=>{
@@ -104,13 +105,24 @@ function noop() {
         if (isTargetDisabled(event)) {
             return;
         }
-        if (openOnHover && hasMouseMoved.current) {
-            setOpen(event, {
-                open: true,
-                keyboard: false,
-                type: 'menuTriggerMouseEnter',
-                event
-            });
+        if (openOnHover) {
+            if (hasMouseMovedRef.current) {
+                setOpen(event, {
+                    open: true,
+                    keyboard: false,
+                    type: 'menuTriggerMouseEnter',
+                    event
+                });
+            } else if (openedViaSafeZoneRef.current) {
+                setOpen(event, {
+                    open: true,
+                    keyboard: false,
+                    ignoreHoverDelay: true,
+                    type: 'menuTriggerMouseEnter',
+                    event
+                });
+                openedViaSafeZoneRef.current = false;
+            }
         }
     };
     // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience
@@ -120,14 +132,14 @@ function noop() {
         if (isTargetDisabled(event)) {
             return;
         }
-        if (openOnHover && !hasMouseMoved.current) {
+        if (openOnHover && !hasMouseMovedRef.current) {
             setOpen(event, {
                 open: true,
                 keyboard: false,
                 type: 'menuTriggerMouseMove',
                 event
             });
-            hasMouseMoved.current = true;
+            hasMouseMovedRef.current = true;
         }
     };
     const onMouseLeave = (event)=>{

package/lib/components/MenuTrigger/useMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuTrigger/useMenuTrigger.ts"],"sourcesContent":["import { useARIAButtonProps } from '@fluentui/react-aria';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport {\n  applyTriggerPropsToChildren,\n  getTriggerChild,\n  isHTMLElement,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useIsSubmenu, useOnMenuSafeZoneTimeout } from '../../utils';\n\nfunction noop() {\n  // does nothing\n}\n\n/**\n * Create the state required to render MenuTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup menu\n *\n * @param props - props from this instance of MenuTrigger\n */\nexport const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerState => {\n  const { children, disableButtonEnhancement = false } = props;\n\n  const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n  const menuPopoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const openOnContext = useMenuContext_unstable(context => context.openOnContext);\n\n  const isSubmenu = useIsSubmenu();\n\n  const { findFirstFocusable } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, menuPopoverRef]);\n\n  const openedWithKeyboardRef = React.useRef(false);\n  const hasMouseMoved = React.useRef(false);\n\n  const { dir } = useFluent();\n  const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n  const child = getTriggerChild(children);\n\n  // Heads up!\n  //\n  // Handles an edge case where mouse movement over the menu trigger didn't happen as safe zone blocked pointer events,\n  // but the cursor is already over the menu trigger.\n  const safeZoneHandlerRef = useOnMenuSafeZoneTimeout(\n    useEventCallback(() => {\n      if (isSubmenu) {\n        hasMouseMoved.current = true;\n      }\n    }),\n  );\n\n  const onContextMenu = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event) || event.isDefaultPrevented()) {\n      return;\n    }\n\n    if (openOnContext) {\n      event.preventDefault();\n      setOpen(event, { open: true, keyboard: false, type: 'menuTriggerContextMenu', event });\n    }\n  };\n\n  const onClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n\n    if (!openOnContext) {\n      setOpen(event, { open: !open, keyboard: openedWithKeyboardRef.current, type: 'menuTriggerClick', event });\n      openedWithKeyboardRef.current = false;\n    }\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n\n    const key = event.key;\n\n    if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\n      setOpen(event, { open: true, keyboard: true, type: 'menuTriggerKeyDown', event });\n    }\n\n    if (key === Escape && !isSubmenu) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuTriggerKeyDown', event });\n    }\n\n    // if menu is already open, can't rely on effects to focus\n    if (open && key === OpenArrowKey && isSubmenu) {\n      focusFirst();\n    }\n  };\n\n  const onMouseOver = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n    if (openOnHover && hasMouseMoved.current) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseEnter', event });\n    }\n  };\n\n  // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience\n  // First time open the mouse using mousemove and then continue with mouseenter\n  // Only use once to determine that the user is using the mouse since it is an expensive event to handle\n  const onMouseMove = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n    if (openOnHover && !hasMouseMoved.current) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseMove', event });\n      hasMouseMoved.current = true;\n    }\n  };\n\n  const onMouseLeave = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n    if (openOnHover) {\n      setOpen(event, { open: false, keyboard: false, type: 'menuTriggerMouseLeave', event });\n    }\n  };\n\n  const contextMenuProps = {\n    id: triggerId,\n    ...child?.props,\n    ref: useMergedRefs(triggerRef, child?.ref, safeZoneHandlerRef),\n    onMouseEnter: useEventCallback(child?.props.onMouseEnter ?? noop),\n    onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n    onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n    onMouseMove: useEventCallback(mergeCallbacks(child?.props.onMouseMove, onMouseMove)),\n    onMouseOver: useEventCallback(mergeCallbacks(child?.props.onMouseOver, onMouseOver)),\n  };\n\n  const triggerChildProps = {\n    'aria-haspopup': 'menu',\n    'aria-expanded': !open && !isSubmenu ? undefined : open,\n    ...contextMenuProps,\n    onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n    onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n  } as const;\n\n  const ariaButtonTriggerChildProps = useARIAButtonProps(\n    child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n    triggerChildProps,\n  );\n\n  return {\n    isSubmenu,\n    children: applyTriggerPropsToChildren(\n      children,\n      openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n    ),\n  };\n};\n\nconst isTargetDisabled = (event: React.SyntheticEvent | Event) => {\n  const isDisabled = (el: HTMLElement) =>\n    el.hasAttribute('disabled') || (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true');\n  if (isHTMLElement(event.target) && isDisabled(event.target)) {\n    return true;\n  }\n\n  return isHTMLElement(event.currentTarget) && isDisabled(event.currentTarget);\n};\n"],"names":["useARIAButtonProps","ArrowRight","ArrowLeft","Escape","ArrowDown","useFluent_unstable","useFluent","useFocusFinders","applyTriggerPropsToChildren","getTriggerChild","isHTMLElement","mergeCallbacks","useEventCallback","useMergedRefs","React","useMenuContext_unstable","useIsSubmenu","useOnMenuSafeZoneTimeout","noop","useMenuTrigger_unstable","props","children","disableButtonEnhancement","triggerRef","context","menuPopoverRef","setOpen","open","triggerId","openOnHover","openOnContext","isSubmenu","findFirstFocusable","focusFirst","useCallback","firstFocusable","current","focus","openedWithKeyboardRef","useRef","hasMouseMoved","dir","OpenArrowKey","child","safeZoneHandlerRef","onContextMenu","event","isTargetDisabled","isDefaultPrevented","preventDefault","keyboard","type","onClick","onKeyDown","key","onMouseOver","onMouseMove","onMouseLeave","contextMenuProps","id","ref","onMouseEnter","triggerChildProps","undefined","ariaButtonTriggerChildProps","isDisabled","el","hasAttribute","getAttribute","target","currentTarget"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/MenuTrigger/useMenuTrigger.ts"],"sourcesContent":["import { useARIAButtonProps } from '@fluentui/react-aria';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport {\n  applyTriggerPropsToChildren,\n  getTriggerChild,\n  isHTMLElement,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useIsSubmenu, useOnMenuSafeZoneTimeout } from '../../utils';\n\nfunction noop() {\n  // does nothing\n}\n\n/**\n * Create the state required to render MenuTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup menu\n *\n * @param props - props from this instance of MenuTrigger\n */\nexport const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerState => {\n  const { children, disableButtonEnhancement = false } = props;\n\n  const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n  const menuPopoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const openOnContext = useMenuContext_unstable(context => context.openOnContext);\n\n  const isSubmenu = useIsSubmenu();\n\n  const { findFirstFocusable } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, menuPopoverRef]);\n\n  const openedWithKeyboardRef = React.useRef(false);\n  const openedViaSafeZoneRef = React.useRef(false);\n  const hasMouseMovedRef = React.useRef(false);\n\n  const { dir } = useFluent();\n  const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n  const child = getTriggerChild(children);\n\n  // Heads up!\n  //\n  // Handles an edge case where mouse movement over the menu trigger didn't happen as safe zone blocked pointer events,\n  // but the cursor is already over the menu trigger.\n  const safeZoneHandlerRef = useOnMenuSafeZoneTimeout(\n    useEventCallback(() => {\n      if (isSubmenu) {\n        openedViaSafeZoneRef.current = true;\n      }\n    }),\n  );\n\n  const onContextMenu = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event) || event.isDefaultPrevented()) {\n      return;\n    }\n\n    if (openOnContext) {\n      event.preventDefault();\n      setOpen(event, { open: true, keyboard: false, type: 'menuTriggerContextMenu', event });\n    }\n  };\n\n  const onClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n\n    if (!openOnContext) {\n      setOpen(event, { open: !open, keyboard: openedWithKeyboardRef.current, type: 'menuTriggerClick', event });\n      openedWithKeyboardRef.current = false;\n    }\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n\n    const key = event.key;\n\n    if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\n      setOpen(event, { open: true, keyboard: true, type: 'menuTriggerKeyDown', event });\n    }\n\n    if (key === Escape && !isSubmenu) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuTriggerKeyDown', event });\n    }\n\n    // if menu is already open, can't rely on effects to focus\n    if (open && key === OpenArrowKey && isSubmenu) {\n      focusFirst();\n    }\n  };\n\n  const onMouseOver = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n\n    if (openOnHover) {\n      if (hasMouseMovedRef.current) {\n        setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseEnter', event });\n      } else if (openedViaSafeZoneRef.current) {\n        setOpen(event, { open: true, keyboard: false, ignoreHoverDelay: true, type: 'menuTriggerMouseEnter', event });\n        openedViaSafeZoneRef.current = false;\n      }\n    }\n  };\n\n  // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience\n  // First time open the mouse using mousemove and then continue with mouseenter\n  // Only use once to determine that the user is using the mouse since it is an expensive event to handle\n  const onMouseMove = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n    if (openOnHover && !hasMouseMovedRef.current) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseMove', event });\n      hasMouseMovedRef.current = true;\n    }\n  };\n\n  const onMouseLeave = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n    if (openOnHover) {\n      setOpen(event, { open: false, keyboard: false, type: 'menuTriggerMouseLeave', event });\n    }\n  };\n\n  const contextMenuProps = {\n    id: triggerId,\n    ...child?.props,\n    ref: useMergedRefs(triggerRef, child?.ref, safeZoneHandlerRef),\n    onMouseEnter: useEventCallback(child?.props.onMouseEnter ?? noop),\n    onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n    onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n    onMouseMove: useEventCallback(mergeCallbacks(child?.props.onMouseMove, onMouseMove)),\n    onMouseOver: useEventCallback(mergeCallbacks(child?.props.onMouseOver, onMouseOver)),\n  };\n\n  const triggerChildProps = {\n    'aria-haspopup': 'menu',\n    'aria-expanded': !open && !isSubmenu ? undefined : open,\n    ...contextMenuProps,\n    onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n    onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n  } as const;\n\n  const ariaButtonTriggerChildProps = useARIAButtonProps(\n    child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n    triggerChildProps,\n  );\n\n  return {\n    isSubmenu,\n    children: applyTriggerPropsToChildren(\n      children,\n      openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n    ),\n  };\n};\n\nconst isTargetDisabled = (event: React.SyntheticEvent | Event) => {\n  const isDisabled = (el: HTMLElement) =>\n    el.hasAttribute('disabled') || (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true');\n  if (isHTMLElement(event.target) && isDisabled(event.target)) {\n    return true;\n  }\n\n  return isHTMLElement(event.currentTarget) && isDisabled(event.currentTarget);\n};\n"],"names":["useARIAButtonProps","ArrowRight","ArrowLeft","Escape","ArrowDown","useFluent_unstable","useFluent","useFocusFinders","applyTriggerPropsToChildren","getTriggerChild","isHTMLElement","mergeCallbacks","useEventCallback","useMergedRefs","React","useMenuContext_unstable","useIsSubmenu","useOnMenuSafeZoneTimeout","noop","useMenuTrigger_unstable","props","children","disableButtonEnhancement","triggerRef","context","menuPopoverRef","setOpen","open","triggerId","openOnHover","openOnContext","isSubmenu","findFirstFocusable","focusFirst","useCallback","firstFocusable","current","focus","openedWithKeyboardRef","useRef","openedViaSafeZoneRef","hasMouseMovedRef","dir","OpenArrowKey","child","safeZoneHandlerRef","onContextMenu","event","isTargetDisabled","isDefaultPrevented","preventDefault","keyboard","type","onClick","onKeyDown","key","onMouseOver","ignoreHoverDelay","onMouseMove","onMouseLeave","contextMenuProps","id","ref","onMouseEnter","triggerChildProps","undefined","ariaButtonTriggerChildProps","isDisabled","el","hasAttribute","getAttribute","target","currentTarget"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,SAAS,QAAQ,0BAA0B;AACnF,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SACEC,2BAA2B,EAC3BC,eAAe,EACfC,aAAa,EACbC,cAAc,EACdC,gBAAgB,EAChBC,aAAa,QACR,4BAA4B;AACnC,YAAYC,WAAW,QAAQ;AAG/B,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,YAAY,EAAEC,wBAAwB,QAAQ,cAAc;AAErE,SAASC;AACP,eAAe;AACjB;AAEA;;;;;CAKC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtC,MAAM,EAAEC,QAAQ,EAAEC,2BAA2B,KAAK,EAAE,GAAGF;IAEvD,MAAMG,aAAaR,wBAAwBS,CAAAA,UAAWA,QAAQD,UAAU;IACxE,MAAME,iBAAiBV,wBAAwBS,CAAAA,UAAWA,QAAQC,cAAc;IAChF,MAAMC,UAAUX,wBAAwBS,CAAAA,UAAWA,QAAQE,OAAO;IAClE,MAAMC,OAAOZ,wBAAwBS,CAAAA,UAAWA,QAAQG,IAAI;IAC5D,MAAMC,YAAYb,wBAAwBS,CAAAA,UAAWA,QAAQI,SAAS;IACtE,MAAMC,cAAcd,wBAAwBS,CAAAA,UAAWA,QAAQK,WAAW;IAC1E,MAAMC,gBAAgBf,wBAAwBS,CAAAA,UAAWA,QAAQM,aAAa;IAE9E,MAAMC,YAAYf;IAElB,MAAM,EAAEgB,kBAAkB,EAAE,GAAGzB;IAC/B,MAAM0B,aAAanB,MAAMoB,WAAW,CAAC;QACnC,MAAMC,iBAAiBH,mBAAmBP,eAAeW,OAAO;QAChED,2BAAAA,qCAAAA,eAAgBE,KAAK;IACvB,GAAG;QAACL;QAAoBP;KAAe;IAEvC,MAAMa,wBAAwBxB,MAAMyB,MAAM,CAAC;IAC3C,MAAMC,uBAAuB1B,MAAMyB,MAAM,CAAC;IAC1C,MAAME,mBAAmB3B,MAAMyB,MAAM,CAAC;IAEtC,MAAM,EAAEG,GAAG,EAAE,GAAGpC;IAChB,MAAMqC,eAAeD,QAAQ,QAAQzC,aAAaC;IAElD,MAAM0C,QAAQnC,gBAAgBY;IAE9B,YAAY;IACZ,EAAE;IACF,qHAAqH;IACrH,mDAAmD;IACnD,MAAMwB,qBAAqB5B,yBACzBL,iBAAiB;QACf,IAAImB,WAAW;YACbS,qBAAqBJ,OAAO,GAAG;QACjC;IACF;IAGF,MAAMU,gBAAgB,CAACC;QACrB,IAAIC,iBAAiBD,UAAUA,MAAME,kBAAkB,IAAI;YACzD;QACF;QAEA,IAAInB,eAAe;YACjBiB,MAAMG,cAAc;YACpBxB,QAAQqB,OAAO;gBAAEpB,MAAM;gBAAMwB,UAAU;gBAAOC,MAAM;gBAA0BL;YAAM;QACtF;IACF;IAEA,MAAMM,UAAU,CAACN;QACf,IAAIC,iBAAiBD,QAAQ;YAC3B;QACF;QAEA,IAAI,CAACjB,eAAe;YAClBJ,QAAQqB,OAAO;gBAAEpB,MAAM,CAACA;gBAAMwB,UAAUb,sBAAsBF,OAAO;gBAAEgB,MAAM;gBAAoBL;YAAM;YACvGT,sBAAsBF,OAAO,GAAG;QAClC;IACF;IAEA,MAAMkB,YAAY,CAACP;QACjB,IAAIC,iBAAiBD,QAAQ;YAC3B;QACF;QAEA,MAAMQ,MAAMR,MAAMQ,GAAG;QAErB,IAAI,CAACzB,iBAAkB,CAAA,AAACC,aAAawB,QAAQZ,gBAAkB,CAACZ,aAAawB,QAAQnD,SAAS,GAAI;YAChGsB,QAAQqB,OAAO;gBAAEpB,MAAM;gBAAMwB,UAAU;gBAAMC,MAAM;gBAAsBL;YAAM;QACjF;QAEA,IAAIQ,QAAQpD,UAAU,CAAC4B,WAAW;YAChCL,QAAQqB,OAAO;gBAAEpB,MAAM;gBAAOwB,UAAU;gBAAMC,MAAM;gBAAsBL;YAAM;QAClF;QAEA,0DAA0D;QAC1D,IAAIpB,QAAQ4B,QAAQZ,gBAAgBZ,WAAW;YAC7CE;QACF;IACF;IAEA,MAAMuB,cAAc,CAACT;QACnB,IAAIC,iBAAiBD,QAAQ;YAC3B;QACF;QAEA,IAAIlB,aAAa;YACf,IAAIY,iBAAiBL,OAAO,EAAE;gBAC5BV,QAAQqB,OAAO;oBAAEpB,MAAM;oBAAMwB,UAAU;oBAAOC,MAAM;oBAAyBL;gBAAM;YACrF,OAAO,IAAIP,qBAAqBJ,OAAO,EAAE;gBACvCV,QAAQqB,OAAO;oBAAEpB,MAAM;oBAAMwB,UAAU;oBAAOM,kBAAkB;oBAAML,MAAM;oBAAyBL;gBAAM;gBAC3GP,qBAAqBJ,OAAO,GAAG;YACjC;QACF;IACF;IAEA,kGAAkG;IAClG,8EAA8E;IAC9E,uGAAuG;IACvG,MAAMsB,cAAc,CAACX;QACnB,IAAIC,iBAAiBD,QAAQ;YAC3B;QACF;QACA,IAAIlB,eAAe,CAACY,iBAAiBL,OAAO,EAAE;YAC5CV,QAAQqB,OAAO;gBAAEpB,MAAM;gBAAMwB,UAAU;gBAAOC,MAAM;gBAAwBL;YAAM;YAClFN,iBAAiBL,OAAO,GAAG;QAC7B;IACF;IAEA,MAAMuB,eAAe,CAACZ;QACpB,IAAIC,iBAAiBD,QAAQ;YAC3B;QACF;QACA,IAAIlB,aAAa;YACfH,QAAQqB,OAAO;gBAAEpB,MAAM;gBAAOwB,UAAU;gBAAOC,MAAM;gBAAyBL;YAAM;QACtF;IACF;QAMiCH;IAJjC,MAAMgB,mBAAmB;QACvBC,IAAIjC;WACDgB,kBAAAA,4BAAAA,MAAOxB,KAAK,AAAf;QACA0C,KAAKjD,cAAcU,YAAYqB,kBAAAA,4BAAAA,MAAOkB,GAAG,EAAEjB;QAC3CkB,cAAcnD,iBAAiBgC,CAAAA,4BAAAA,kBAAAA,4BAAAA,MAAOxB,KAAK,CAAC2C,YAAY,cAAzBnB,uCAAAA,4BAA6B1B;QAC5DyC,cAAc/C,iBAAiBD,eAAeiC,kBAAAA,4BAAAA,MAAOxB,KAAK,CAACuC,YAAY,EAAEA;QACzEb,eAAelC,iBAAiBD,eAAeiC,kBAAAA,4BAAAA,MAAOxB,KAAK,CAAC0B,aAAa,EAAEA;QAC3EY,aAAa9C,iBAAiBD,eAAeiC,kBAAAA,4BAAAA,MAAOxB,KAAK,CAACsC,WAAW,EAAEA;QACvEF,aAAa5C,iBAAiBD,eAAeiC,kBAAAA,4BAAAA,MAAOxB,KAAK,CAACoC,WAAW,EAAEA;IACzE;IAEA,MAAMQ,oBAAoB;QACxB,iBAAiB;QACjB,iBAAiB,CAACrC,QAAQ,CAACI,YAAYkC,YAAYtC;QACnD,GAAGiC,gBAAgB;QACnBP,SAASzC,iBAAiBD,eAAeiC,kBAAAA,4BAAAA,MAAOxB,KAAK,CAACiC,OAAO,EAAEA;QAC/DC,WAAW1C,iBAAiBD,eAAeiC,kBAAAA,4BAAAA,MAAOxB,KAAK,CAACkC,SAAS,EAAEA;IACrE;IAEA,MAAMY,8BAA8BlE,mBAClC4C,CAAAA,kBAAAA,4BAAAA,MAAOQ,IAAI,MAAK,YAAYR,CAAAA,kBAAAA,4BAAAA,MAAOQ,IAAI,MAAK,MAAMR,MAAMQ,IAAI,GAAG,OAC/DY;IAGF,OAAO;QACLjC;QACAV,UAAUb,4BACRa,UACAS,gBAAgB8B,mBAAmBtC,2BAA2B0C,oBAAoBE;IAEtF;AACF,EAAE;AAEF,MAAMlB,mBAAmB,CAACD;IACxB,MAAMoB,aAAa,CAACC,KAClBA,GAAGC,YAAY,CAAC,eAAgBD,GAAGC,YAAY,CAAC,oBAAoBD,GAAGE,YAAY,CAAC,qBAAqB;IAC3G,IAAI5D,cAAcqC,MAAMwB,MAAM,KAAKJ,WAAWpB,MAAMwB,MAAM,GAAG;QAC3D,OAAO;IACT;IAEA,OAAO7D,cAAcqC,MAAMyB,aAAa,KAAKL,WAAWpB,MAAMyB,aAAa;AAC7E"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../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 `MenuTrigger` and `MenuPopover`.\n     * Alternatively can only contain `MenuPopover` if using a custom `target`.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\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    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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    /**\n     * An optional safe zone area to be rendered around the menu\n     */\n    safeZone?: React.ReactElement | null;\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: 'menuSafeZoneMouseEnter';\n      event: React.MouseEvent;\n    }\n  | {\n      type: 'menuSafeZoneTimeout';\n      event: Event;\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"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
+{"version":3,"sources":["../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 `MenuTrigger` and `MenuPopover`.\n     * Alternatively can only contain `MenuPopover` if using a custom `target`.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\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    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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 & { ignoreHoverDelay?: boolean }) => 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    /**\n     * An optional safe zone area to be rendered around the menu\n     */\n    safeZone?: React.ReactElement | null;\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: 'menuSafeZoneMouseEnter';\n      event: React.MouseEvent;\n    }\n  | {\n      type: 'menuSafeZoneTimeout';\n      event: Event;\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"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}

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

@@ -70,7 +70,7 @@ const useMenu_unstable = (props)=>{
     });
     const safeZoneHandle = (0, _reactpositioning.useSafeZoneArea)({
         disabled: !enableSafeZone,
-        timeout: 1500,
+        timeout: typeof safeZone === 'object' ? safeZone.timeout : 300,
         onSafeZoneEnter: (e)=>{
             setOpen(e, {
                 open: true,
@@ -216,10 +216,11 @@ const useMenuOpenState = (state)=>{
             // < React 17 still uses pooled synthetic events
             e.persist();
         }
-        if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === _utils.MENU_ENTER_EVENT) {
+        const shouldUseDelay = !data.ignoreHoverDelay && (e.type === 'mouseleave' || e.type === 'mouseover' || e.type === 'mousemove' || e.type === _utils.MENU_ENTER_EVENT);
+        if (shouldUseDelay) {
             var _state_triggerRef_current;
             if ((_state_triggerRef_current = state.triggerRef.current) === null || _state_triggerRef_current === void 0 ? void 0 : _state_triggerRef_current.contains(e.target)) {
-                enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';
+                enteringTriggerRef.current = e.type === 'mouseover' || e.type === 'mousemove';
             }
             setOpenTimeout(()=>trySetOpen(e, data), state.hoverDelay);
         } else {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Menu/useMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  resolvePositioningShorthand,\n  usePositioningMouseTarget,\n  usePositioning,\n  useSafeZoneArea,\n  type PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n  useControllableState,\n  useId,\n  useOnClickOutside,\n  useEventCallback,\n  useOnScrollOutside,\n  elementContains,\n  useTimeout,\n  useFirstMount,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_SAFEZONE_TIMEOUT_EVENT, MENU_ENTER_EVENT, useOnMenuMouseEnter, useIsSubmenu } from '../../utils';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\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 & { safeZone?: boolean }): 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    safeZone,\n  } = props;\n\n  const { targetDocument } = useFluent();\n  const triggerId = useId('menu');\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n  const positioningOptions = {\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, containerRef } = usePositioning(positioningOptions);\n\n  const enableSafeZone = safeZone && openOnHover;\n  const safeZoneDescriptorRef = React.useRef({\n    isInside: false,\n    mouseCoordinates: { x: 0, y: 0 },\n  });\n\n  const safeZoneHandle = useSafeZoneArea({\n    disabled: !enableSafeZone,\n    timeout: 1500,\n\n    onSafeZoneEnter: e => {\n      setOpen(e, { open: true, keyboard: false, type: 'menuSafeZoneMouseEnter', event: e });\n      safeZoneDescriptorRef.current.isInside = true;\n    },\n    onSafeZoneLeave: () => {\n      safeZoneDescriptorRef.current.isInside = false;\n    },\n    onSafeZoneMove: e => {\n      safeZoneDescriptorRef.current.mouseCoordinates = {\n        x: e.clientX,\n        y: e.clientY,\n      };\n    },\n    onSafeZoneTimeout: () => {\n      const event = new CustomEvent(MENU_SAFEZONE_TIMEOUT_EVENT);\n\n      setOpen(event, { open: false, keyboard: false, type: 'menuSafeZoneTimeout', event });\n\n      if (safeZoneDescriptorRef.current.isInside && targetDocument) {\n        const elementsInPoint = targetDocument.elementsFromPoint(\n          safeZoneDescriptorRef.current.mouseCoordinates.x,\n          safeZoneDescriptorRef.current.mouseCoordinates.y,\n        );\n        const menuItemEl = elementsInPoint.find(el => {\n          return el.classList.contains(menuItemClassNames.root);\n        }) as HTMLElement | null;\n\n        menuItemEl?.dispatchEvent(event);\n      }\n    },\n  });\n\n  const triggerRef = useMergedRefs(targetRef, safeZoneHandle.targetRef);\n  const menuPopoverRef = useMergedRefs(containerRef, safeZoneHandle.containerRef);\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    safeZone: safeZoneHandle.elementToRender,\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  'use no memo';\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 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    }\n\n    if (data.bubble) {\n      parentSetOpen(e, { ...data });\n    }\n\n    setOpenState(data.open);\n  });\n\n  const [setOpenTimeout, clearOpenTimeout] = useTimeout();\n\n  const setOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n    clearOpenTimeout();\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      setOpenTimeout(() => 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  // 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  const firstMount = useFirstMount();\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    } else {\n      if (!firstMount) {\n        if (targetDocument?.activeElement === targetDocument?.body) {\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    // firstMount change should not re-run this effect\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef]);\n\n  return [open, setOpen] as const;\n};\n"],"names":["useMenu_unstable","submenuFallbackPositions","props","isSubmenu","useIsSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","mountNode","safeZone","targetDocument","useFluent","triggerId","useId","contextTarget","setContextTarget","usePositioningMouseTarget","positioningOptions","position","align","target","undefined","fallbackPositions","resolvePositioningShorthand","positioning","children","React","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","containerRef","usePositioning","enableSafeZone","safeZoneDescriptorRef","useRef","isInside","mouseCoordinates","x","y","safeZoneHandle","useSafeZoneArea","disabled","timeout","onSafeZoneEnter","e","setOpen","open","keyboard","type","event","current","onSafeZoneLeave","onSafeZoneMove","clientX","clientY","onSafeZoneTimeout","CustomEvent","MENU_SAFEZONE_TIMEOUT_EVENT","elementsInPoint","elementsFromPoint","menuItemEl","find","el","classList","contains","menuItemClassNames","root","dispatchEvent","triggerRef","useMergedRefs","menuPopoverRef","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","elementToRender","setCheckedValues","useControllableState","state","defaultState","initialState","useEventCallback","name","checkedItems","currentValue","parentSetOpen","useMenuContext_unstable","context","data","enteringTriggerRef","setOpenState","trySetOpen","MENU_ENTER_EVENT","detail","nativeEvent","bubble","setOpenTimeout","clearOpenTimeout","useTimeout","Event","persist","useOnClickOutside","elementContains","element","refs","filter","Boolean","callback","useOnScrollOutside","useOnMenuMouseEnter","findFirstFocusable","useFocusFinders","focusFirst","useCallback","firstFocusable","focus","firstMount","useFirstMount","useEffect","activeElement","body"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/Menu/useMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  resolvePositioningShorthand,\n  usePositioningMouseTarget,\n  usePositioning,\n  useSafeZoneArea,\n  type PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n  useControllableState,\n  useId,\n  useOnClickOutside,\n  useEventCallback,\n  useOnScrollOutside,\n  elementContains,\n  useTimeout,\n  useFirstMount,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_SAFEZONE_TIMEOUT_EVENT, MENU_ENTER_EVENT, useOnMenuMouseEnter, useIsSubmenu } from '../../utils';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\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 & { safeZone?: boolean | { timeout?: number } }): 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    safeZone,\n  } = props;\n\n  const { targetDocument } = useFluent();\n  const triggerId = useId('menu');\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n  const positioningOptions = {\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, containerRef } = usePositioning(positioningOptions);\n\n  const enableSafeZone = safeZone && openOnHover;\n  const safeZoneDescriptorRef = React.useRef({\n    isInside: false,\n    mouseCoordinates: { x: 0, y: 0 },\n  });\n\n  const safeZoneHandle = useSafeZoneArea({\n    disabled: !enableSafeZone,\n    timeout: typeof safeZone === 'object' ? safeZone.timeout : 300,\n\n    onSafeZoneEnter: e => {\n      setOpen(e, { open: true, keyboard: false, type: 'menuSafeZoneMouseEnter', event: e });\n      safeZoneDescriptorRef.current.isInside = true;\n    },\n    onSafeZoneLeave: () => {\n      safeZoneDescriptorRef.current.isInside = false;\n    },\n    onSafeZoneMove: e => {\n      safeZoneDescriptorRef.current.mouseCoordinates = {\n        x: e.clientX,\n        y: e.clientY,\n      };\n    },\n    onSafeZoneTimeout: () => {\n      const event = new CustomEvent(MENU_SAFEZONE_TIMEOUT_EVENT);\n\n      setOpen(event, { open: false, keyboard: false, type: 'menuSafeZoneTimeout', event });\n\n      if (safeZoneDescriptorRef.current.isInside && targetDocument) {\n        const elementsInPoint = targetDocument.elementsFromPoint(\n          safeZoneDescriptorRef.current.mouseCoordinates.x,\n          safeZoneDescriptorRef.current.mouseCoordinates.y,\n        );\n        const menuItemEl = elementsInPoint.find(el => {\n          return el.classList.contains(menuItemClassNames.root);\n        }) as HTMLElement | null;\n\n        menuItemEl?.dispatchEvent(event);\n      }\n    },\n  });\n\n  const triggerRef = useMergedRefs(targetRef, safeZoneHandle.targetRef);\n  const menuPopoverRef = useMergedRefs(containerRef, safeZoneHandle.containerRef);\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    safeZone: safeZoneHandle.elementToRender,\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  'use no memo';\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 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    }\n\n    if (data.bubble) {\n      parentSetOpen(e, { ...data });\n    }\n\n    setOpenState(data.open);\n  });\n\n  const [setOpenTimeout, clearOpenTimeout] = useTimeout();\n\n  const setOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData & { ignoreHoverDelay?: boolean }) => {\n    clearOpenTimeout();\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    const shouldUseDelay =\n      !data.ignoreHoverDelay &&\n      (e.type === 'mouseleave' || e.type === 'mouseover' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT);\n\n    if (shouldUseDelay) {\n      if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n        enteringTriggerRef.current = e.type === 'mouseover' || e.type === 'mousemove';\n      }\n\n      setOpenTimeout(() => 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  // 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  const firstMount = useFirstMount();\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    } else {\n      if (!firstMount) {\n        if (targetDocument?.activeElement === targetDocument?.body) {\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    // firstMount change should not re-run this effect\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef]);\n\n  return [open, setOpen] as const;\n};\n"],"names":["useMenu_unstable","submenuFallbackPositions","props","isSubmenu","useIsSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","mountNode","safeZone","targetDocument","useFluent","triggerId","useId","contextTarget","setContextTarget","usePositioningMouseTarget","positioningOptions","position","align","target","undefined","fallbackPositions","resolvePositioningShorthand","positioning","children","React","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","containerRef","usePositioning","enableSafeZone","safeZoneDescriptorRef","useRef","isInside","mouseCoordinates","x","y","safeZoneHandle","useSafeZoneArea","disabled","timeout","onSafeZoneEnter","e","setOpen","open","keyboard","type","event","current","onSafeZoneLeave","onSafeZoneMove","clientX","clientY","onSafeZoneTimeout","CustomEvent","MENU_SAFEZONE_TIMEOUT_EVENT","elementsInPoint","elementsFromPoint","menuItemEl","find","el","classList","contains","menuItemClassNames","root","dispatchEvent","triggerRef","useMergedRefs","menuPopoverRef","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","elementToRender","setCheckedValues","useControllableState","state","defaultState","initialState","useEventCallback","name","checkedItems","currentValue","parentSetOpen","useMenuContext_unstable","context","data","enteringTriggerRef","setOpenState","trySetOpen","MENU_ENTER_EVENT","detail","nativeEvent","bubble","setOpenTimeout","clearOpenTimeout","useTimeout","Event","persist","shouldUseDelay","ignoreHoverDelay","useOnClickOutside","elementContains","element","refs","filter","Boolean","callback","useOnScrollOutside","useOnMenuMouseEnter","findFirstFocusable","useFocusFinders","focusFirst","useCallback","firstFocusable","focus","firstMount","useFirstMount","useEffect","activeElement","body"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -115,14 +115,20 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         Bk3fhr4: "f19vpps7",
         Bmfj8id: "fv5swzo",
         Bg7n49j: "f1q1x1ba",
+        c7f7en: "ff3wrqt",
         B2d53fq: "fcvwxyo",
         iro3zm: "f1to34ca",
+        Bumww26: "fszh5vc",
         t0hwav: "ft33916",
         Bbusuzp: "f1dcs8yz",
         ze5xyy: "f1kc2mi9",
         Bqrx1nm: "fkavljg",
         Bctn1xl: "fk56vqo",
         h5esng: "ff3wi9b",
+        Bsk3rfj: "fduv4kr",
+        pc6evw: "fb3rf2x",
+        g2kj27: "f183y0b2",
+        evg1t5: "f12is0ou",
         Bh6z0a4: "f1ikwg0d",
         Bh953qp: "f10l1t5h"
     }
@@ -149,8 +155,10 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".f19vpps7:hover .fui-Icon-filled{display:none;}",
         ".fv5swzo:hover .fui-Icon-regular{display:inline;}",
         ".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}",
+        ".ff3wrqt:hover .fui-MenuItem__subText{color:var(--colorNeutralForegroundDisabled);}",
         ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}",
-        ".f1to34ca:hover:active{background-color:var(--colorNeutralBackground1);}"
+        ".f1to34ca:hover:active{background-color:var(--colorNeutralBackground1);}",
+        ".fszh5vc:hover:active .fui-MenuItem__subText{color:var(--colorNeutralForegroundDisabled);}"
     ],
     f: [
         ".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"
@@ -186,6 +194,30 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
                 m: "(forced-colors: active)"
             }
         ],
+        [
+            "@media (forced-colors: active){.fduv4kr:hover .fui-MenuItem__subText{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fb3rf2x:hover:active{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f183y0b2:hover:active{background-color:Canvas;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f12is0ou:hover:active .fui-MenuItem__subText{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
         [
             "@media (forced-colors: active){.f1ikwg0d:focus{color:GrayText;}}",
             {
@@ -200,6 +232,24 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         ]
     ]
 });
+const useSubTextStyles = /*#__PURE__*/ (0, _react.__styles)({
+    disabled: {
+        sj55zd: "f1s2aq7o",
+        Bbusuzp: "f1dcs8yz"
+    }
+}, {
+    d: [
+        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
+});
 const useMultilineStyles = /*#__PURE__*/ (0, _react.__styles)({
     content: {
         mc9l5x: "f22iagw",
@@ -228,6 +278,7 @@ const useMenuItemStyles_unstable = (state)=>{
     const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();
     const multilineStyles = useMultilineStyles();
     const subtextBaseStyles = useSubtextBaseStyles();
+    const subTextStyles = useSubTextStyles();
     const multiline = !!state.subText;
     state.root.className = (0, _react.mergeClasses)(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);
     if (state.content) {
@@ -237,7 +288,7 @@ const useMenuItemStyles_unstable = (state)=>{
         state.checkmark.className = (0, _react.mergeClasses)(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);
     }
     if (state.secondaryContent) {
-        state.secondaryContent.className = (0, _react.mergeClasses)(menuItemClassNames.secondaryContent, !state.disabled && secondaryContentBaseStyles, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);
+        state.secondaryContent.className = (0, _react.mergeClasses)(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);
     }
     if (state.icon) {
         state.icon.className = (0, _react.mergeClasses)(menuItemClassNames.icon, iconBaseStyles, state.icon.className);
@@ -246,7 +297,7 @@ const useMenuItemStyles_unstable = (state)=>{
         state.submenuIndicator.className = (0, _react.mergeClasses)(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);
     }
     if (state.subText) {
-        state.subText.className = (0, _react.mergeClasses)(menuItemClassNames.subText, state.subText.className, subtextBaseStyles);
+        state.subText.className = (0, _react.mergeClasses)(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);
     }
     (0, _index.useCheckmarkStyles_unstable)(state);
     return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nexport const menuItemClassNames = {\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    subText: 'fui-MenuItem__subText'\n};\nconst useRootBaseStyles = makeResetStyles({\n    borderRadius: tokens.borderRadiusMedium,\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: tokens.spacingVerticalSNudge,\n    paddingLeft: tokens.spacingVerticalSNudge,\n    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n    boxSizing: 'border-box',\n    maxWidth: '290px',\n    minHeight: '32px',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'start',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    gap: '4px',\n    ':hover': {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        color: tokens.colorNeutralForeground2Hover,\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        },\n        [`& .${menuItemClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2BrandSelected\n        },\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Hover\n        }\n    },\n    ':hover:active': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        color: tokens.colorNeutralForeground2Pressed,\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Pressed\n        }\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        ':hover': {\n            backgroundColor: 'Canvas',\n            borderColor: 'Highlight',\n            color: 'Highlight'\n        },\n        ...createFocusOutlineStyle({\n            style: {\n                outlineColor: 'Highlight'\n            }\n        })\n    },\n    userSelect: 'none',\n    ...createFocusOutlineStyle()\n});\nconst useContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1\n});\nconst useSecondaryContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    ...typographyStyles.caption1,\n    lineHeight: tokens.lineHeightBase300,\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n        color: tokens.colorNeutralForeground3Hover\n    },\n    ':focus': {\n        color: tokens.colorNeutralForeground3Hover\n    }\n});\nconst useIconBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    flexShrink: 0\n});\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center'\n});\nconst useSubtextBaseStyles = makeResetStyles({\n    ...typographyStyles.caption2,\n    color: tokens.colorNeutralForeground3\n});\nconst useStyles = makeStyles({\n    checkmark: {\n        marginTop: '2px'\n    },\n    splitItemMain: {\n        flexGrow: 1\n    },\n    splitItemTrigger: {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n        paddingLeft: 0,\n        '::before': {\n            content: '\"\"',\n            width: tokens.strokeWidthThin,\n            height: '24px',\n            backgroundColor: tokens.colorNeutralStroke1\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1,\n            cursor: 'not-allowed',\n            [`& .${iconFilledClassName}`]: {\n                display: 'none'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${menuItemClassNames.icon}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1\n        },\n        ':focus': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        '@media (forced-colors: active)': {\n            color: 'GrayText',\n            ':hover': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas',\n                [`& .${menuItemClassNames.icon}`]: {\n                    color: 'GrayText',\n                    backgroundColor: 'Canvas'\n                }\n            },\n            ':focus': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas'\n            }\n        }\n    }\n});\nconst useMultilineStyles = makeStyles({\n    content: {\n        display: 'flex',\n        flexDirection: 'column'\n    },\n    secondaryContent: {\n        alignSelf: 'center'\n    },\n    submenuIndicator: {\n        alignSelf: 'center'\n    }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const rootBaseStyles = useRootBaseStyles();\n    const contentBaseStyles = useContentBaseStyles();\n    const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n    const multilineStyles = useMultilineStyles();\n    const subtextBaseStyles = useSubtextBaseStyles();\n    const multiline = !!state.subText;\n    state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && secondaryContentBaseStyles, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n    }\n    if (state.submenuIndicator) {\n        state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);\n    }\n    if (state.subText) {\n        state.subText.className = mergeClasses(menuItemClassNames.subText, state.subText.className, subtextBaseStyles);\n    }\n    useCheckmarkStyles_unstable(state);\n    return state;\n};\n"],"names":["menuItemClassNames","useMenuItemStyles_unstable","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useRootBaseStyles","__resetStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useSubtextBaseStyles","useStyles","__styles","B6of3ja","splitItemMain","Bh6795r","splitItemTrigger","Btl43ni","Beyfa6y","uwmqm3","Ftih45","Ccq8qp","Baz25je","cmx5o7","disabled","sj55zd","Bi91k9c","Jwef8y","eoavqd","Bk3fhr4","Bmfj8id","Bg7n49j","B2d53fq","iro3zm","t0hwav","Bbusuzp","ze5xyy","Bqrx1nm","Bctn1xl","h5esng","Bh6z0a4","Bh953qp","d","h","f","m","useMultilineStyles","mc9l5x","Beiy3e4","qb2dma","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","multilineStyles","subtextBaseStyles","multiline","className","mergeClasses","useCheckmarkStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nexport const menuItemClassNames = {\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    subText: 'fui-MenuItem__subText'\n};\nconst useRootBaseStyles = makeResetStyles({\n    borderRadius: tokens.borderRadiusMedium,\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: tokens.spacingVerticalSNudge,\n    paddingLeft: tokens.spacingVerticalSNudge,\n    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n    boxSizing: 'border-box',\n    maxWidth: '290px',\n    minHeight: '32px',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'start',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    gap: '4px',\n    ':hover': {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        color: tokens.colorNeutralForeground2Hover,\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        },\n        [`& .${menuItemClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2BrandSelected\n        },\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Hover\n        }\n    },\n    ':hover:active': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        color: tokens.colorNeutralForeground2Pressed,\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Pressed\n        }\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        ':hover': {\n            backgroundColor: 'Canvas',\n            borderColor: 'Highlight',\n            color: 'Highlight'\n        },\n        ...createFocusOutlineStyle({\n            style: {\n                outlineColor: 'Highlight'\n            }\n        })\n    },\n    userSelect: 'none',\n    ...createFocusOutlineStyle()\n});\nconst useContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1\n});\nconst useSecondaryContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    ...typographyStyles.caption1,\n    lineHeight: tokens.lineHeightBase300,\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n        color: tokens.colorNeutralForeground3Hover\n    },\n    ':focus': {\n        color: tokens.colorNeutralForeground3Hover\n    }\n});\nconst useIconBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    flexShrink: 0\n});\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center'\n});\nconst useSubtextBaseStyles = makeResetStyles({\n    ...typographyStyles.caption2,\n    color: tokens.colorNeutralForeground3\n});\nconst useStyles = makeStyles({\n    checkmark: {\n        marginTop: '2px'\n    },\n    splitItemMain: {\n        flexGrow: 1\n    },\n    splitItemTrigger: {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n        paddingLeft: 0,\n        '::before': {\n            content: '\"\"',\n            width: tokens.strokeWidthThin,\n            height: '24px',\n            backgroundColor: tokens.colorNeutralStroke1\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1,\n            cursor: 'not-allowed',\n            [`& .${iconFilledClassName}`]: {\n                display: 'none'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${menuItemClassNames.icon}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            },\n            [`& .${menuItemClassNames.subText}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1,\n            [`& .${menuItemClassNames.subText}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':focus': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        '@media (forced-colors: active)': {\n            color: 'GrayText',\n            ':hover': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas',\n                [`& .${menuItemClassNames.icon}`]: {\n                    color: 'GrayText',\n                    backgroundColor: 'Canvas'\n                },\n                [`& .${menuItemClassNames.subText}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':hover:active': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas',\n                [`& .${menuItemClassNames.subText}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':focus': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas'\n            }\n        }\n    }\n});\nconst useSubTextStyles = makeStyles({\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    }\n});\nconst useMultilineStyles = makeStyles({\n    content: {\n        display: 'flex',\n        flexDirection: 'column'\n    },\n    secondaryContent: {\n        alignSelf: 'center'\n    },\n    submenuIndicator: {\n        alignSelf: 'center'\n    }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const rootBaseStyles = useRootBaseStyles();\n    const contentBaseStyles = useContentBaseStyles();\n    const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n    const multilineStyles = useMultilineStyles();\n    const subtextBaseStyles = useSubtextBaseStyles();\n    const subTextStyles = useSubTextStyles();\n    const multiline = !!state.subText;\n    state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n    }\n    if (state.submenuIndicator) {\n        state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);\n    }\n    if (state.subText) {\n        state.subText.className = mergeClasses(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);\n    }\n    useCheckmarkStyles_unstable(state);\n    return state;\n};\n"],"names":["menuItemClassNames","useMenuItemStyles_unstable","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useRootBaseStyles","__resetStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useSubtextBaseStyles","useStyles","__styles","B6of3ja","splitItemMain","Bh6795r","splitItemTrigger","Btl43ni","Beyfa6y","uwmqm3","Ftih45","Ccq8qp","Baz25je","cmx5o7","disabled","sj55zd","Bi91k9c","Jwef8y","eoavqd","Bk3fhr4","Bmfj8id","Bg7n49j","c7f7en","B2d53fq","iro3zm","Bumww26","t0hwav","Bbusuzp","ze5xyy","Bqrx1nm","Bctn1xl","h5esng","Bsk3rfj","pc6evw","g2kj27","evg1t5","Bh6z0a4","Bh953qp","d","h","f","m","useSubTextStyles","useMultilineStyles","mc9l5x","Beiy3e4","qb2dma","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","multilineStyles","subtextBaseStyles","subTextStyles","multiline","className","mergeClasses","useCheckmarkStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js

@@ -39,7 +39,8 @@ const useMenuTrigger_unstable = (props)=>{
         menuPopoverRef
     ]);
     const openedWithKeyboardRef = _react.useRef(false);
-    const hasMouseMoved = _react.useRef(false);
+    const openedViaSafeZoneRef = _react.useRef(false);
+    const hasMouseMovedRef = _react.useRef(false);
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
     const OpenArrowKey = dir === 'ltr' ? _keyboardkeys.ArrowRight : _keyboardkeys.ArrowLeft;
     const child = (0, _reactutilities.getTriggerChild)(children);
@@ -49,7 +50,7 @@ const useMenuTrigger_unstable = (props)=>{
     // but the cursor is already over the menu trigger.
     const safeZoneHandlerRef = (0, _utils.useOnMenuSafeZoneTimeout)((0, _reactutilities.useEventCallback)(()=>{
         if (isSubmenu) {
-            hasMouseMoved.current = true;
+            openedViaSafeZoneRef.current = true;
         }
     }));
     const onContextMenu = (event)=>{
@@ -110,13 +111,24 @@ const useMenuTrigger_unstable = (props)=>{
         if (isTargetDisabled(event)) {
             return;
         }
-        if (openOnHover && hasMouseMoved.current) {
-            setOpen(event, {
-                open: true,
-                keyboard: false,
-                type: 'menuTriggerMouseEnter',
-                event
-            });
+        if (openOnHover) {
+            if (hasMouseMovedRef.current) {
+                setOpen(event, {
+                    open: true,
+                    keyboard: false,
+                    type: 'menuTriggerMouseEnter',
+                    event
+                });
+            } else if (openedViaSafeZoneRef.current) {
+                setOpen(event, {
+                    open: true,
+                    keyboard: false,
+                    ignoreHoverDelay: true,
+                    type: 'menuTriggerMouseEnter',
+                    event
+                });
+                openedViaSafeZoneRef.current = false;
+            }
         }
     };
     // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience
@@ -126,14 +138,14 @@ const useMenuTrigger_unstable = (props)=>{
         if (isTargetDisabled(event)) {
             return;
         }
-        if (openOnHover && !hasMouseMoved.current) {
+        if (openOnHover && !hasMouseMovedRef.current) {
             setOpen(event, {
                 open: true,
                 keyboard: false,
                 type: 'menuTriggerMouseMove',
                 event
             });
-            hasMouseMoved.current = true;
+            hasMouseMovedRef.current = true;
         }
     };
     const onMouseLeave = (event)=>{

package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuTrigger/useMenuTrigger.ts"],"sourcesContent":["import { useARIAButtonProps } from '@fluentui/react-aria';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport {\n  applyTriggerPropsToChildren,\n  getTriggerChild,\n  isHTMLElement,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useIsSubmenu, useOnMenuSafeZoneTimeout } from '../../utils';\n\nfunction noop() {\n  // does nothing\n}\n\n/**\n * Create the state required to render MenuTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup menu\n *\n * @param props - props from this instance of MenuTrigger\n */\nexport const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerState => {\n  const { children, disableButtonEnhancement = false } = props;\n\n  const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n  const menuPopoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const openOnContext = useMenuContext_unstable(context => context.openOnContext);\n\n  const isSubmenu = useIsSubmenu();\n\n  const { findFirstFocusable } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, menuPopoverRef]);\n\n  const openedWithKeyboardRef = React.useRef(false);\n  const hasMouseMoved = React.useRef(false);\n\n  const { dir } = useFluent();\n  const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n  const child = getTriggerChild(children);\n\n  // Heads up!\n  //\n  // Handles an edge case where mouse movement over the menu trigger didn't happen as safe zone blocked pointer events,\n  // but the cursor is already over the menu trigger.\n  const safeZoneHandlerRef = useOnMenuSafeZoneTimeout(\n    useEventCallback(() => {\n      if (isSubmenu) {\n        hasMouseMoved.current = true;\n      }\n    }),\n  );\n\n  const onContextMenu = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event) || event.isDefaultPrevented()) {\n      return;\n    }\n\n    if (openOnContext) {\n      event.preventDefault();\n      setOpen(event, { open: true, keyboard: false, type: 'menuTriggerContextMenu', event });\n    }\n  };\n\n  const onClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n\n    if (!openOnContext) {\n      setOpen(event, { open: !open, keyboard: openedWithKeyboardRef.current, type: 'menuTriggerClick', event });\n      openedWithKeyboardRef.current = false;\n    }\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n\n    const key = event.key;\n\n    if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\n      setOpen(event, { open: true, keyboard: true, type: 'menuTriggerKeyDown', event });\n    }\n\n    if (key === Escape && !isSubmenu) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuTriggerKeyDown', event });\n    }\n\n    // if menu is already open, can't rely on effects to focus\n    if (open && key === OpenArrowKey && isSubmenu) {\n      focusFirst();\n    }\n  };\n\n  const onMouseOver = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n    if (openOnHover && hasMouseMoved.current) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseEnter', event });\n    }\n  };\n\n  // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience\n  // First time open the mouse using mousemove and then continue with mouseenter\n  // Only use once to determine that the user is using the mouse since it is an expensive event to handle\n  const onMouseMove = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n    if (openOnHover && !hasMouseMoved.current) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseMove', event });\n      hasMouseMoved.current = true;\n    }\n  };\n\n  const onMouseLeave = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n    if (openOnHover) {\n      setOpen(event, { open: false, keyboard: false, type: 'menuTriggerMouseLeave', event });\n    }\n  };\n\n  const contextMenuProps = {\n    id: triggerId,\n    ...child?.props,\n    ref: useMergedRefs(triggerRef, child?.ref, safeZoneHandlerRef),\n    onMouseEnter: useEventCallback(child?.props.onMouseEnter ?? noop),\n    onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n    onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n    onMouseMove: useEventCallback(mergeCallbacks(child?.props.onMouseMove, onMouseMove)),\n    onMouseOver: useEventCallback(mergeCallbacks(child?.props.onMouseOver, onMouseOver)),\n  };\n\n  const triggerChildProps = {\n    'aria-haspopup': 'menu',\n    'aria-expanded': !open && !isSubmenu ? undefined : open,\n    ...contextMenuProps,\n    onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n    onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n  } as const;\n\n  const ariaButtonTriggerChildProps = useARIAButtonProps(\n    child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n    triggerChildProps,\n  );\n\n  return {\n    isSubmenu,\n    children: applyTriggerPropsToChildren(\n      children,\n      openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n    ),\n  };\n};\n\nconst isTargetDisabled = (event: React.SyntheticEvent | Event) => {\n  const isDisabled = (el: HTMLElement) =>\n    el.hasAttribute('disabled') || (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true');\n  if (isHTMLElement(event.target) && isDisabled(event.target)) {\n    return true;\n  }\n\n  return isHTMLElement(event.currentTarget) && isDisabled(event.currentTarget);\n};\n"],"names":["useMenuTrigger_unstable","noop","props","children","disableButtonEnhancement","triggerRef","useMenuContext_unstable","context","menuPopoverRef","setOpen","open","triggerId","openOnHover","openOnContext","isSubmenu","useIsSubmenu","findFirstFocusable","useFocusFinders","focusFirst","React","useCallback","firstFocusable","current","focus","openedWithKeyboardRef","useRef","hasMouseMoved","dir","useFluent","OpenArrowKey","ArrowRight","ArrowLeft","child","getTriggerChild","safeZoneHandlerRef","useOnMenuSafeZoneTimeout","useEventCallback","onContextMenu","event","isTargetDisabled","isDefaultPrevented","preventDefault","keyboard","type","onClick","onKeyDown","key","ArrowDown","Escape","onMouseOver","onMouseMove","onMouseLeave","contextMenuProps","id","ref","useMergedRefs","onMouseEnter","mergeCallbacks","triggerChildProps","undefined","ariaButtonTriggerChildProps","useARIAButtonProps","applyTriggerPropsToChildren","isDisabled","el","hasAttribute","getAttribute","isHTMLElement","target","currentTarget"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/MenuTrigger/useMenuTrigger.ts"],"sourcesContent":["import { useARIAButtonProps } from '@fluentui/react-aria';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport {\n  applyTriggerPropsToChildren,\n  getTriggerChild,\n  isHTMLElement,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useIsSubmenu, useOnMenuSafeZoneTimeout } from '../../utils';\n\nfunction noop() {\n  // does nothing\n}\n\n/**\n * Create the state required to render MenuTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup menu\n *\n * @param props - props from this instance of MenuTrigger\n */\nexport const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerState => {\n  const { children, disableButtonEnhancement = false } = props;\n\n  const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n  const menuPopoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const openOnContext = useMenuContext_unstable(context => context.openOnContext);\n\n  const isSubmenu = useIsSubmenu();\n\n  const { findFirstFocusable } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, menuPopoverRef]);\n\n  const openedWithKeyboardRef = React.useRef(false);\n  const openedViaSafeZoneRef = React.useRef(false);\n  const hasMouseMovedRef = React.useRef(false);\n\n  const { dir } = useFluent();\n  const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n  const child = getTriggerChild(children);\n\n  // Heads up!\n  //\n  // Handles an edge case where mouse movement over the menu trigger didn't happen as safe zone blocked pointer events,\n  // but the cursor is already over the menu trigger.\n  const safeZoneHandlerRef = useOnMenuSafeZoneTimeout(\n    useEventCallback(() => {\n      if (isSubmenu) {\n        openedViaSafeZoneRef.current = true;\n      }\n    }),\n  );\n\n  const onContextMenu = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event) || event.isDefaultPrevented()) {\n      return;\n    }\n\n    if (openOnContext) {\n      event.preventDefault();\n      setOpen(event, { open: true, keyboard: false, type: 'menuTriggerContextMenu', event });\n    }\n  };\n\n  const onClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n\n    if (!openOnContext) {\n      setOpen(event, { open: !open, keyboard: openedWithKeyboardRef.current, type: 'menuTriggerClick', event });\n      openedWithKeyboardRef.current = false;\n    }\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n\n    const key = event.key;\n\n    if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\n      setOpen(event, { open: true, keyboard: true, type: 'menuTriggerKeyDown', event });\n    }\n\n    if (key === Escape && !isSubmenu) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuTriggerKeyDown', event });\n    }\n\n    // if menu is already open, can't rely on effects to focus\n    if (open && key === OpenArrowKey && isSubmenu) {\n      focusFirst();\n    }\n  };\n\n  const onMouseOver = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n\n    if (openOnHover) {\n      if (hasMouseMovedRef.current) {\n        setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseEnter', event });\n      } else if (openedViaSafeZoneRef.current) {\n        setOpen(event, { open: true, keyboard: false, ignoreHoverDelay: true, type: 'menuTriggerMouseEnter', event });\n        openedViaSafeZoneRef.current = false;\n      }\n    }\n  };\n\n  // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience\n  // First time open the mouse using mousemove and then continue with mouseenter\n  // Only use once to determine that the user is using the mouse since it is an expensive event to handle\n  const onMouseMove = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n    if (openOnHover && !hasMouseMovedRef.current) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseMove', event });\n      hasMouseMovedRef.current = true;\n    }\n  };\n\n  const onMouseLeave = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n    if (openOnHover) {\n      setOpen(event, { open: false, keyboard: false, type: 'menuTriggerMouseLeave', event });\n    }\n  };\n\n  const contextMenuProps = {\n    id: triggerId,\n    ...child?.props,\n    ref: useMergedRefs(triggerRef, child?.ref, safeZoneHandlerRef),\n    onMouseEnter: useEventCallback(child?.props.onMouseEnter ?? noop),\n    onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n    onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n    onMouseMove: useEventCallback(mergeCallbacks(child?.props.onMouseMove, onMouseMove)),\n    onMouseOver: useEventCallback(mergeCallbacks(child?.props.onMouseOver, onMouseOver)),\n  };\n\n  const triggerChildProps = {\n    'aria-haspopup': 'menu',\n    'aria-expanded': !open && !isSubmenu ? undefined : open,\n    ...contextMenuProps,\n    onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n    onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n  } as const;\n\n  const ariaButtonTriggerChildProps = useARIAButtonProps(\n    child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n    triggerChildProps,\n  );\n\n  return {\n    isSubmenu,\n    children: applyTriggerPropsToChildren(\n      children,\n      openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n    ),\n  };\n};\n\nconst isTargetDisabled = (event: React.SyntheticEvent | Event) => {\n  const isDisabled = (el: HTMLElement) =>\n    el.hasAttribute('disabled') || (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true');\n  if (isHTMLElement(event.target) && isDisabled(event.target)) {\n    return true;\n  }\n\n  return isHTMLElement(event.currentTarget) && isDisabled(event.currentTarget);\n};\n"],"names":["useMenuTrigger_unstable","noop","props","children","disableButtonEnhancement","triggerRef","useMenuContext_unstable","context","menuPopoverRef","setOpen","open","triggerId","openOnHover","openOnContext","isSubmenu","useIsSubmenu","findFirstFocusable","useFocusFinders","focusFirst","React","useCallback","firstFocusable","current","focus","openedWithKeyboardRef","useRef","openedViaSafeZoneRef","hasMouseMovedRef","dir","useFluent","OpenArrowKey","ArrowRight","ArrowLeft","child","getTriggerChild","safeZoneHandlerRef","useOnMenuSafeZoneTimeout","useEventCallback","onContextMenu","event","isTargetDisabled","isDefaultPrevented","preventDefault","keyboard","type","onClick","onKeyDown","key","ArrowDown","Escape","onMouseOver","ignoreHoverDelay","onMouseMove","onMouseLeave","contextMenuProps","id","ref","useMergedRefs","onMouseEnter","mergeCallbacks","triggerChildProps","undefined","ariaButtonTriggerChildProps","useARIAButtonProps","applyTriggerPropsToChildren","isDisabled","el","hasAttribute","getAttribute","isHTMLElement","target","currentTarget"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-menu",
-  "version": "9.17.6",
+  "version": "9.18.0",
   "description": "Fluent UI menu component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -25,7 +25,7 @@
     "@fluentui/react-context-selector": "^9.2.2",
     "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-portal": "^9.6.4",
-    "@fluentui/react-positioning": "^9.18.5",
+    "@fluentui/react-positioning": "^9.19.0",
     "@fluentui/react-shared-contexts": "^9.24.0",
     "@fluentui/react-tabster": "^9.25.3",
     "@fluentui/react-theme": "^9.1.24",