@fluentui/react-menu 9.17.4 → 9.17.6

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @fluentui/react-menu
 
-This log was last generated on Thu, 26 Jun 2025 14:07:54 GMT and should not be manually modified.
+This log was last generated on Fri, 04 Jul 2025 10:00:04 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.17.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.17.6)
+
+Fri, 04 Jul 2025 10:00:04 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.17.5..@fluentui/react-menu_v9.17.6)
+
+### Patches
+
+- feat: integrate useSafeZoneArea() ([PR #34457](https://github.com/microsoft/fluentui/pull/34457) by olfedias@microsoft.com)
+- Bump @fluentui/react-portal to v9.6.4 ([PR #34457](https://github.com/microsoft/fluentui/pull/34457) by beachball)
+
+## [9.17.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.17.5)
+
+Fri, 27 Jun 2025 13:39:41 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.17.4..@fluentui/react-menu_v9.17.5)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.15.3 ([PR #34734](https://github.com/microsoft/fluentui/pull/34734) by beachball)
+- Bump @fluentui/react-portal to v9.6.3 ([PR #34734](https://github.com/microsoft/fluentui/pull/34734) by beachball)
+- Bump @fluentui/react-positioning to v9.18.5 ([PR #34734](https://github.com/microsoft/fluentui/pull/34734) by beachball)
+- Bump @fluentui/react-tabster to v9.25.3 ([PR #34734](https://github.com/microsoft/fluentui/pull/34734) by beachball)
+
 ## [9.17.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.17.4)
 
-Thu, 26 Jun 2025 14:07:54 GMT 
+Thu, 26 Jun 2025 14:11:55 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.17.3..@fluentui/react-menu_v9.17.4)
 
 ### Patches

package/dist/index.d.ts

@@ -48,7 +48,7 @@ export declare type MenuCheckedValueChangeEvent = React_2.MouseEvent | React_2.K
  *
  * Extends and drills down MenuList props to simplify API
  */
-export declare type MenuContextValue = Pick<MenuState, 'openOnHover' | 'openOnContext' | 'triggerRef' | 'menuPopoverRef' | 'setOpen' | 'isSubmenu' | 'mountNode' | 'triggerId' | 'hasIcons' | 'hasCheckmarks' | 'persistOnItemClick' | 'inline' | 'checkedValues' | 'onCheckedValueChange'> & {
+export declare type MenuContextValue = Pick<MenuState, 'openOnHover' | 'openOnContext' | 'triggerRef' | 'menuPopoverRef' | 'setOpen' | 'isSubmenu' | 'mountNode' | 'triggerId' | 'hasIcons' | 'hasCheckmarks' | 'persistOnItemClick' | 'inline' | 'checkedValues' | 'onCheckedValueChange' | 'safeZone'> & {
     open: boolean;
     triggerId: string;
     /**
@@ -381,6 +381,12 @@ export declare type MenuOpenChangeData = {
 } | {
     type: 'menuTriggerMouseEnter';
     event: React_2.MouseEvent<HTMLElement>;
+} | {
+    type: 'menuSafeZoneMouseEnter';
+    event: React_2.MouseEvent;
+} | {
+    type: 'menuSafeZoneTimeout';
+    event: Event;
 } | {
     type: 'menuTriggerMouseLeave';
     event: React_2.MouseEvent<HTMLElement>;
@@ -445,6 +451,7 @@ export declare type MenuPopoverState = ComponentState<MenuPopoverSlots> & Pick<P
      * This option is disregarded for submenus
      */
     inline: boolean;
+    safeZone?: React_2.ReactElement | null;
 };
 
 /**
@@ -597,6 +604,10 @@ export declare type MenuState = ComponentState<MenuSlots> & Required<Pick<MenuPr
      * the signature remains just to avoid breaking changes
      */
     defaultCheckedValues?: Record<string, string[]>;
+    /**
+     * An optional safe zone area to be rendered around the menu
+     */
+    safeZone?: React_2.ReactElement | null;
 };
 
 /**
@@ -616,6 +627,7 @@ export declare type MenuTriggerChildProps<Type extends ARIAButtonType = ARIAButt
     onMouseEnter: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
     onMouseLeave: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
     onMouseMove: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
+    onMouseOver?: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
     onContextMenu: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
 }>;
 
@@ -725,7 +737,9 @@ export declare const useCheckmarkStyles_unstable: (state: MenuItemSelectableStat
  *
  * @param props - props from this instance of Menu
  */
-export declare const useMenu_unstable: (props: MenuProps) => MenuState;
+export declare const useMenu_unstable: (props: MenuProps & {
+    safeZone?: boolean;
+}) => 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    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\nexport type MenuContextValues = {\n  menu: MenuContextValue;\n};\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type MenuOpenEvent = MenuOpenChangeData['event'];\n/**\n * @deprecated use MenuOpenEvent instead\n */\nexport type MenuOpenEvents = MenuOpenEvent;\n\n/**\n * Data attached to open/close events\n */\nexport type MenuOpenChangeData = {\n  /**\n   * indicates whether the request for the open state was bubbled from a nested menu\n   */\n  bubble?: boolean;\n  /**\n   * Indicates whether the change of state was a keyboard interaction\n   * @deprecated\n   * This should not be used, since `Enter`, `Space` and click should be interpreted as the same thing as a click\n   */\n  keyboard?: boolean;\n  open: boolean;\n} & (\n  | {\n      type: 'menuTriggerContextMenu';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerClick';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseEnter';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseLeave';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseMove';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerKeyDown';\n      event: React.KeyboardEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuItemClick';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuPopoverMouseEnter';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuPopoverKeyDown';\n      event: React.KeyboardEvent<HTMLElement>;\n    }\n  | {\n      type: 'clickOutside';\n      event: MouseEvent | TouchEvent;\n    }\n  | {\n      type: 'scrollOutside';\n      event: MouseEvent | TouchEvent;\n    }\n  | {\n      type: 'menuMouseEnter';\n      event: MouseEvent | TouchEvent;\n    }\n);\n"],"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) => 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/renderMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Menu/renderMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MenuProvider } from '../../contexts/menuContext';\nimport type { MenuContextValues, MenuState } from './Menu.types';\n\n/**\n * Render the final JSX of Menu\n */\nexport const renderMenu_unstable = (state: MenuState, contextValues: MenuContextValues) => {\n  return (\n    <MenuProvider value={contextValues.menu}>\n      {state.menuTrigger}\n      {state.open && state.menuPopover}\n    </MenuProvider>\n  );\n};\n"],"names":["React","MenuProvider","renderMenu_unstable","state","contextValues","value","menu","menuTrigger","open","menuPopover"],"rangeMappings":";;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,6BAA6B;AAG1D;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC;IACpD,qBACE,oBAACH;QAAaI,OAAOD,cAAcE,IAAI;OACpCH,MAAMI,WAAW,EACjBJ,MAAMK,IAAI,IAAIL,MAAMM,WAAW;AAGtC,EAAE"}
+{"version":3,"sources":["../src/components/Menu/renderMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MenuProvider } from '../../contexts/menuContext';\nimport type { MenuContextValues, MenuState } from './Menu.types';\n\n/**\n * Render the final JSX of Menu\n */\nexport const renderMenu_unstable = (\n  state: MenuState,\n  contextValues: MenuContextValues,\n): // eslint-disable-next-line @typescript-eslint/no-deprecated\nJSX.Element => {\n  return (\n    <MenuProvider value={contextValues.menu}>\n      {state.menuTrigger}\n      {state.open && state.menuPopover}\n    </MenuProvider>\n  );\n};\n"],"names":["React","MenuProvider","renderMenu_unstable","state","contextValues","value","menu","menuTrigger","open","menuPopover"],"rangeMappings":";;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,6BAA6B;AAG1D;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CACjCC,OACAC;IAGA,qBACE,oBAACH;QAAaI,OAAOD,cAAcE,IAAI;OACpCH,MAAMI,WAAW,EACjBJ,MAAMK,IAAI,IAAIL,MAAMM,WAAW;AAGtC,EAAE"}

package/lib/components/Menu/useMenu.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { usePositioningMouseTarget, usePositioning, resolvePositioningShorthand } from '@fluentui/react-positioning';
-import { useControllableState, useId, useOnClickOutside, useEventCallback, useOnScrollOutside, elementContains, useTimeout, useFirstMount } from '@fluentui/react-utilities';
+import { resolvePositioningShorthand, usePositioningMouseTarget, usePositioning, useSafeZoneArea } from '@fluentui/react-positioning';
+import { useControllableState, useId, useOnClickOutside, useEventCallback, useOnScrollOutside, elementContains, useTimeout, useFirstMount, useMergedRefs } from '@fluentui/react-utilities';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useFocusFinders } from '@fluentui/react-tabster';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
-import { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';
-import { useIsSubmenu } from '../../utils/useIsSubmenu';
+import { MENU_SAFEZONE_TIMEOUT_EVENT, MENU_ENTER_EVENT, useOnMenuMouseEnter, useIsSubmenu } from '../../utils';
+import { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';
 // If it's not possible to position the submenu in smaller viewports, try
 // and fallback to this order of positions
 const submenuFallbackPositions = [
@@ -25,10 +25,11 @@ const submenuFallbackPositions = [
  * @param props - props from this instance of Menu
  */ export const useMenu_unstable = (props)=>{
     const isSubmenu = useIsSubmenu();
-    const { hoverDelay = 500, inline = false, hasCheckmarks = false, hasIcons = false, closeOnScroll = false, openOnContext = false, persistOnItemClick = false, openOnHover = isSubmenu, defaultCheckedValues, mountNode = null } = props;
+    const { hoverDelay = 500, inline = false, hasCheckmarks = false, hasIcons = false, closeOnScroll = false, openOnContext = false, persistOnItemClick = false, openOnHover = isSubmenu, defaultCheckedValues, mountNode = null, safeZone } = props;
+    const { targetDocument } = useFluent();
     const triggerId = useId('menu');
     const [contextTarget, setContextTarget] = usePositioningMouseTarget();
-    const positioningState = {
+    const positioningOptions = {
         position: isSubmenu ? 'after' : 'below',
         align: isSubmenu ? 'top' : 'start',
         target: props.openOnContext ? contextTarget : undefined,
@@ -54,7 +55,55 @@ const submenuFallbackPositions = [
     } else if (children.length === 1) {
         menuPopover = children[0];
     }
-    const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);
+    const { targetRef, containerRef } = usePositioning(positioningOptions);
+    const enableSafeZone = safeZone && openOnHover;
+    const safeZoneDescriptorRef = React.useRef({
+        isInside: false,
+        mouseCoordinates: {
+            x: 0,
+            y: 0
+        }
+    });
+    const safeZoneHandle = useSafeZoneArea({
+        disabled: !enableSafeZone,
+        timeout: 1500,
+        onSafeZoneEnter: (e)=>{
+            setOpen(e, {
+                open: true,
+                keyboard: false,
+                type: 'menuSafeZoneMouseEnter',
+                event: e
+            });
+            safeZoneDescriptorRef.current.isInside = true;
+        },
+        onSafeZoneLeave: ()=>{
+            safeZoneDescriptorRef.current.isInside = false;
+        },
+        onSafeZoneMove: (e)=>{
+            safeZoneDescriptorRef.current.mouseCoordinates = {
+                x: e.clientX,
+                y: e.clientY
+            };
+        },
+        onSafeZoneTimeout: ()=>{
+            const event = new CustomEvent(MENU_SAFEZONE_TIMEOUT_EVENT);
+            setOpen(event, {
+                open: false,
+                keyboard: false,
+                type: 'menuSafeZoneTimeout',
+                event
+            });
+            if (safeZoneDescriptorRef.current.isInside && targetDocument) {
+                const elementsInPoint = targetDocument.elementsFromPoint(safeZoneDescriptorRef.current.mouseCoordinates.x, safeZoneDescriptorRef.current.mouseCoordinates.y);
+                const menuItemEl = elementsInPoint.find((el)=>{
+                    return el.classList.contains(menuItemClassNames.root);
+                });
+                menuItemEl === null || menuItemEl === void 0 ? void 0 : menuItemEl.dispatchEvent(event);
+            }
+        }
+    });
+    const triggerRef = useMergedRefs(targetRef, safeZoneHandle.targetRef);
+    const menuPopoverRef = useMergedRefs(containerRef, safeZoneHandle.containerRef);
     // TODO Better way to narrow types ?
     const [open, setOpen] = useMenuOpenState({
         hoverDelay,
@@ -95,7 +144,8 @@ const submenuFallbackPositions = [
         setOpen,
         checkedValues,
         onCheckedValueChange,
-        persistOnItemClick
+        persistOnItemClick,
+        safeZone: safeZoneHandle.elementToRender
     };
 };
 /**

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  usePositioningMouseTarget,\n  usePositioning,\n  resolvePositioningShorthand,\n  PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n  useControllableState,\n  useId,\n  useOnClickOutside,\n  useEventCallback,\n  useOnScrollOutside,\n  elementContains,\n  useTimeout,\n  useFirstMount,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuOpenChangeData, MenuOpenEvent, MenuProps, MenuState } from './Menu.types';\n\n// If it's not possible to position the submenu in smaller viewports, try\n// and fallback to this order of positions\nconst submenuFallbackPositions: PositioningShorthandValue[] = [\n  'after',\n  'after-bottom',\n  'before-top',\n  'before',\n  'before-bottom',\n  'above',\n];\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n  const isSubmenu = useIsSubmenu();\n  const {\n    hoverDelay = 500,\n    inline = false,\n    hasCheckmarks = false,\n    hasIcons = false,\n    closeOnScroll = false,\n    openOnContext = false,\n    persistOnItemClick = false,\n    openOnHover = isSubmenu,\n    defaultCheckedValues,\n    mountNode = null,\n  } = props;\n  const triggerId = useId('menu');\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n  const positioningState = {\n    position: isSubmenu ? 'after' : 'below',\n    align: isSubmenu ? 'top' : 'start',\n    target: props.openOnContext ? contextTarget : undefined,\n    fallbackPositions: isSubmenu ? submenuFallbackPositions : undefined,\n    ...resolvePositioningShorthand(props.positioning),\n  } as const;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Menu must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Menu must contain at most two children');\n    }\n  }\n\n  let menuTrigger: React.ReactElement | undefined = undefined;\n  let menuPopover: React.ReactElement | undefined = undefined;\n  if (children.length === 2) {\n    menuTrigger = children[0];\n    menuPopover = children[1];\n  } else if (children.length === 1) {\n    menuPopover = children[0];\n  }\n\n  const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n  // TODO Better way to narrow types ?\n  const [open, setOpen] = useMenuOpenState({\n    hoverDelay,\n    isSubmenu,\n    setContextTarget,\n    closeOnScroll,\n    menuPopoverRef,\n    triggerRef,\n    open: props.open,\n    defaultOpen: props.defaultOpen,\n    onOpenChange: props.onOpenChange,\n    openOnContext,\n  });\n\n  const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\n\n  return {\n    inline,\n    hoverDelay,\n    triggerId,\n    isSubmenu,\n    openOnHover,\n    contextTarget,\n    setContextTarget,\n    hasCheckmarks,\n    hasIcons,\n    closeOnScroll,\n    menuTrigger,\n    menuPopover,\n    mountNode,\n    triggerRef,\n    menuPopoverRef,\n    components: {},\n    openOnContext,\n    open,\n    setOpen,\n    checkedValues,\n    onCheckedValueChange,\n    persistOnItemClick,\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n  props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues,\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n  const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    props.onCheckedValueChange?.(e, { name, checkedItems });\n\n    setCheckedValues(currentValue => ({\n      ...currentValue,\n      [name]: checkedItems,\n    }));\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n  state: Pick<\n    MenuState,\n    | 'isSubmenu'\n    | 'menuPopoverRef'\n    | 'setContextTarget'\n    | 'triggerRef'\n    | 'openOnContext'\n    | 'closeOnScroll'\n    | 'hoverDelay'\n  > &\n    Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n  '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","usePositioningMouseTarget","usePositioning","resolvePositioningShorthand","useControllableState","useId","useOnClickOutside","useEventCallback","useOnScrollOutside","elementContains","useTimeout","useFirstMount","useFluent_unstable","useFluent","useFocusFinders","useMenuContext_unstable","MENU_ENTER_EVENT","useOnMenuMouseEnter","useIsSubmenu","submenuFallbackPositions","useMenu_unstable","props","isSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","mountNode","triggerId","contextTarget","setContextTarget","positioningState","position","align","target","undefined","fallbackPositions","positioning","children","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","triggerRef","containerRef","menuPopoverRef","open","setOpen","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","setCheckedValues","state","defaultState","initialState","e","name","checkedItems","currentValue","targetDocument","parentSetOpen","context","data","enteringTriggerRef","useRef","setOpenState","trySetOpen","event","CustomEvent","type","detail","nativeEvent","bubble","setOpenTimeout","clearOpenTimeout","Event","persist","current","contains","disabled","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 }): 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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"}

package/lib/components/Menu/useMenuContextValues.js

@@ -1,5 +1,5 @@
 export function useMenuContextValues_unstable(state) {
-    const { checkedValues, hasCheckmarks, hasIcons, inline, isSubmenu, menuPopoverRef, mountNode, onCheckedValueChange, open, openOnContext, openOnHover, persistOnItemClick, setOpen, triggerId, triggerRef } = state;
+    const { checkedValues, hasCheckmarks, hasIcons, inline, isSubmenu, menuPopoverRef, mountNode, onCheckedValueChange, open, openOnContext, openOnHover, persistOnItemClick, safeZone, setOpen, triggerId, triggerRef } = state;
     // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
     const menu = {
         checkedValues,
@@ -14,6 +14,7 @@ export function useMenuContextValues_unstable(state) {
         openOnContext,
         openOnHover,
         persistOnItemClick,
+        safeZone,
         setOpen,
         triggerId,
         triggerRef

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Menu/useMenuContextValues.ts"],"sourcesContent":["import type { MenuContextValues, MenuState } from './Menu.types';\n\nexport function useMenuContextValues_unstable(state: MenuState): MenuContextValues {\n  const {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    inline,\n    isSubmenu,\n    menuPopoverRef,\n    mountNode,\n    onCheckedValueChange,\n    open,\n    openOnContext,\n    openOnHover,\n    persistOnItemClick,\n    setOpen,\n    triggerId,\n    triggerRef,\n  } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const menu = {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    inline,\n    isSubmenu,\n    menuPopoverRef,\n    mountNode,\n    onCheckedValueChange,\n    open,\n    openOnContext,\n    openOnHover,\n    persistOnItemClick,\n    setOpen,\n    triggerId,\n    triggerRef,\n  };\n\n  return { menu };\n}\n"],"names":["useMenuContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","inline","isSubmenu","menuPopoverRef","mountNode","onCheckedValueChange","open","openOnContext","openOnHover","persistOnItemClick","setOpen","triggerId","triggerRef","menu"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,OAAO,SAASA,8BAA8BC,KAAgB;IAC5D,MAAM,EACJC,aAAa,EACbC,aAAa,EACbC,QAAQ,EACRC,MAAM,EACNC,SAAS,EACTC,cAAc,EACdC,SAAS,EACTC,oBAAoB,EACpBC,IAAI,EACJC,aAAa,EACbC,WAAW,EACXC,kBAAkB,EAClBC,OAAO,EACPC,SAAS,EACTC,UAAU,EACX,GAAGf;IAEJ,mGAAmG;IACnG,MAAMgB,OAAO;QACXf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB"}
+{"version":3,"sources":["../src/components/Menu/useMenuContextValues.ts"],"sourcesContent":["import type { MenuContextValues, MenuState } from './Menu.types';\n\nexport function useMenuContextValues_unstable(state: MenuState): MenuContextValues {\n  const {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    inline,\n    isSubmenu,\n    menuPopoverRef,\n    mountNode,\n    onCheckedValueChange,\n    open,\n    openOnContext,\n    openOnHover,\n    persistOnItemClick,\n    safeZone,\n    setOpen,\n    triggerId,\n    triggerRef,\n  } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const menu = {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    inline,\n    isSubmenu,\n    menuPopoverRef,\n    mountNode,\n    onCheckedValueChange,\n    open,\n    openOnContext,\n    openOnHover,\n    persistOnItemClick,\n    safeZone,\n    setOpen,\n    triggerId,\n    triggerRef,\n  };\n\n  return { menu };\n}\n"],"names":["useMenuContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","inline","isSubmenu","menuPopoverRef","mountNode","onCheckedValueChange","open","openOnContext","openOnHover","persistOnItemClick","safeZone","setOpen","triggerId","triggerRef","menu"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,OAAO,SAASA,8BAA8BC,KAAgB;IAC5D,MAAM,EACJC,aAAa,EACbC,aAAa,EACbC,QAAQ,EACRC,MAAM,EACNC,SAAS,EACTC,cAAc,EACdC,SAAS,EACTC,oBAAoB,EACpBC,IAAI,EACJC,aAAa,EACbC,WAAW,EACXC,kBAAkB,EAClBC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACTC,UAAU,EACX,GAAGhB;IAEJ,mGAAmG;IACnG,MAAMiB,OAAO;QACXhB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB"}

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

@@ -1,3 +1 @@
-/**
- * State used in rendering MenuPopover
- */ export { };
+import * as React from 'react';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuPopover/MenuPopover.types.ts"],"sourcesContent":["import type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuPopoverSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MenuPopover Props\n */\nexport type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;\n\n/**\n * State used in rendering MenuPopover\n */\nexport type MenuPopoverState = ComponentState<MenuPopoverSlots> &\n  Pick<PortalProps, 'mountNode'> & {\n    /**\n     * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n     * This option is disregarded for submenus\n     */\n    inline: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAYA;;CAEC,GACD,WAOI"}
+{"version":3,"sources":["../src/components/MenuPopover/MenuPopover.types.ts"],"sourcesContent":["import type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type MenuPopoverSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MenuPopover Props\n */\nexport type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;\n\n/**\n * State used in rendering MenuPopover\n */\nexport type MenuPopoverState = ComponentState<MenuPopoverSlots> &\n  Pick<PortalProps, 'mountNode'> & {\n    /**\n     * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n     * This option is disregarded for submenus\n     */\n    inline: boolean;\n\n    safeZone?: React.ReactElement | null;\n  };\n"],"names":["React"],"rangeMappings":"","mappings":"AAEA,YAAYA,WAAW,QAAQ"}

package/lib/components/MenuPopover/renderMenuPopover.js

@@ -1,4 +1,4 @@
-  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 import { Portal } from '@fluentui/react-portal';
 /**
@@ -6,10 +6,18 @@ import { Portal } from '@fluentui/react-portal';
  */ export const renderMenuPopover_unstable = (state)=>{
     assertSlots(state);
     if (state.inline) {
-        return /*#__PURE__*/ _jsx(state.root, {});
+        return /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx(state.root, {}),
+                state.safeZone
+            ]
+        });
     }
-    return /*#__PURE__*/ _jsx(Portal, {
+    return /*#__PURE__*/ _jsxs(Portal, {
         mountNode: state.mountNode,
-        children: /*#__PURE__*/ _jsx(state.root, {})
+        children: [
+            /*#__PURE__*/ _jsx(state.root, {}),
+            state.safeZone
+        ]
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuPopover/renderMenuPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n  assertSlots<MenuPopoverSlots>(state);\n\n  if (state.inline) {\n    return <state.root />;\n  }\n\n  return (\n    <Portal mountNode={state.mountNode}>\n      <state.root />\n    </Portal>\n  );\n};\n"],"names":["assertSlots","Portal","renderMenuPopover_unstable","state","inline","root","mountNode"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCH,YAA8BG;IAE9B,IAAIA,MAAMC,MAAM,EAAE;QAChB,qBAAO,KAACD,MAAME,IAAI;IACpB;IAEA,qBACE,KAACJ;QAAOK,WAAWH,MAAMG,SAAS;kBAChC,cAAA,KAACH,MAAME,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["../src/components/MenuPopover/renderMenuPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n  assertSlots<MenuPopoverSlots>(state);\n\n  if (state.inline) {\n    return (\n      <>\n        <state.root />\n        {state.safeZone}\n      </>\n    );\n  }\n\n  return (\n    <Portal mountNode={state.mountNode}>\n      <state.root />\n      {state.safeZone}\n    </Portal>\n  );\n};\n"],"names":["assertSlots","Portal","renderMenuPopover_unstable","state","inline","root","safeZone","mountNode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCH,YAA8BG;IAE9B,IAAIA,MAAMC,MAAM,EAAE;QAChB,qBACE;;8BACE,KAACD,MAAME,IAAI;gBACVF,MAAMG,QAAQ;;;IAGrB;IAEA,qBACE,MAACL;QAAOM,WAAWJ,MAAMI,SAAS;;0BAChC,KAACJ,MAAME,IAAI;YACVF,MAAMG,QAAQ;;;AAGrB,EAAE"}

package/lib/components/MenuPopover/useMenuPopover.js

@@ -1,11 +1,10 @@
-import * as React from 'react';
 import { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';
-import { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot, useTimeout } from '@fluentui/react-utilities';
-import { useMenuContext_unstable } from '../../contexts/menuContext';
-import { dispatchMenuEnterEvent } from '../../utils/index';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { useIsSubmenu } from '../../utils/useIsSubmenu';
 import { useRestoreFocusSource } from '@fluentui/react-tabster';
+import { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot, useTimeout } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useMenuContext_unstable } from '../../contexts/menuContext';
+import { dispatchMenuEnterEvent, useIsSubmenu } from '../../utils/index';
 /**
  * Create the state required to render MenuPopover.
  *
@@ -16,6 +15,7 @@ import { useRestoreFocusSource } from '@fluentui/react-tabster';
  * @param ref - reference to root HTMLElement of MenuPopover
  */ export const useMenuPopover_unstable = (props, ref)=>{
     'use no memo';
+    const safeZone = useMenuContext_unstable((context)=>context.safeZone);
     const popoverRef = useMenuContext_unstable((context)=>context.menuPopoverRef);
     const setOpen = useMenuContext_unstable((context)=>context.setOpen);
     const open = useMenuContext_unstable((context)=>context.open);
@@ -38,7 +38,9 @@ import { useRestoreFocusSource } from '@fluentui/react-tabster';
                 if (canDispatchCustomEventRef.current) {
                     canDispatchCustomEventRef.current = false;
                     dispatchMenuEnterEvent(popoverRef.current, e);
-                    setThrottleTimeout(()=>canDispatchCustomEventRef.current = true, 250);
+                    setThrottleTimeout(()=>{
+                        canDispatchCustomEventRef.current = true;
+                    }, 250);
                 }
             });
         }
@@ -47,7 +49,7 @@ import { useRestoreFocusSource } from '@fluentui/react-tabster';
         setThrottleTimeout
     ]);
     React.useEffect(()=>{
-        ()=>clearThrottleTimeout();
+        return ()=>clearThrottleTimeout();
     }, [
         clearThrottleTimeout
     ]);
@@ -110,6 +112,7 @@ import { useRestoreFocusSource } from '@fluentui/react-tabster';
     return {
         inline,
         mountNode,
+        safeZone,
         components: {
             root: 'div'
         },

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuPopover/useMenuPopover.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot, useTimeout } from '@fluentui/react-utilities';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n  'use no memo';\n\n  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n  const isSubmenu = useIsSubmenu();\n  const canDispatchCustomEventRef = React.useRef(true);\n  const restoreFocusSourceAttributes = useRestoreFocusSource();\n  const [setThrottleTimeout, clearThrottleTimeout] = useTimeout();\n\n  const { dir } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(\n    (node: HTMLElement) => {\n      if (node) {\n        // Dispatches the custom menu mouse enter event with throttling\n        // Needs to trigger on mouseover to support keyboard + mouse together\n        // i.e. keyboard opens submenus while cursor is still on the parent\n        node.addEventListener('mouseover', e => {\n          if (canDispatchCustomEventRef.current) {\n            canDispatchCustomEventRef.current = false;\n            dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n            setThrottleTimeout(() => (canDispatchCustomEventRef.current = true), 250);\n          }\n        });\n      }\n    },\n    [popoverRef, setThrottleTimeout],\n  );\n\n  React.useEffect(() => {\n    () => clearThrottleTimeout();\n  }, [clearThrottleTimeout]);\n\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const mountNode = useMenuContext_unstable(context => context.mountNode);\n\n  const rootProps = slot.always(\n    getIntrinsicElementProps('div', {\n      role: 'presentation',\n      ...restoreFocusSourceAttributes,\n      ...props,\n      // FIXME:\n      // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n      // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n      ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef) as React.Ref<HTMLDivElement>,\n    }),\n    { elementType: 'div' },\n  );\n  const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n  rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (openOnHover || isSubmenu) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n    }\n    onMouseEnterOriginal?.(event);\n  });\n  rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    const key = event.key;\n    if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n      if (open && popoverRef.current?.contains(event.target as HTMLElement) && !event.isDefaultPrevented()) {\n        setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n        // stop propagation to avoid conflicting with other elements that listen for `Escape`\n        // e,g: Dialog, Popover, Menu and Tooltip\n        event.preventDefault();\n      }\n    }\n    if (key === Tab) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n      if (!isSubmenu) {\n        triggerRef.current?.focus();\n      }\n    }\n    onKeyDownOriginal?.(event);\n  });\n  return { inline, mountNode, components: { root: 'div' }, root: rootProps };\n};\n"],"names":["React","ArrowLeft","Tab","ArrowRight","Escape","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useTimeout","useMenuContext_unstable","dispatchMenuEnterEvent","useFluent_unstable","useFluent","useIsSubmenu","useRestoreFocusSource","useMenuPopover_unstable","props","ref","popoverRef","context","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","canDispatchCustomEventRef","useRef","restoreFocusSourceAttributes","setThrottleTimeout","clearThrottleTimeout","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","useEffect","inline","mountNode","rootProps","always","role","elementType","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","isDefaultPrevented","preventDefault","focus","components","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/MenuPopover/useMenuPopover.ts"],"sourcesContent":["import { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot, useTimeout } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent, useIsSubmenu } from '../../utils/index';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n  'use no memo';\n\n  const safeZone = useMenuContext_unstable(context => context.safeZone);\n  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n\n  const isSubmenu = useIsSubmenu();\n  const canDispatchCustomEventRef = React.useRef(true);\n  const restoreFocusSourceAttributes = useRestoreFocusSource();\n  const [setThrottleTimeout, clearThrottleTimeout] = useTimeout();\n\n  const { dir } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(\n    (node: HTMLElement) => {\n      if (node) {\n        // Dispatches the custom menu mouse enter event with throttling\n        // Needs to trigger on mouseover to support keyboard + mouse together\n        // i.e. keyboard opens submenus while cursor is still on the parent\n        node.addEventListener('mouseover', e => {\n          if (canDispatchCustomEventRef.current) {\n            canDispatchCustomEventRef.current = false;\n            dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n            setThrottleTimeout(() => {\n              canDispatchCustomEventRef.current = true;\n            }, 250);\n          }\n        });\n      }\n    },\n    [popoverRef, setThrottleTimeout],\n  );\n\n  React.useEffect(() => {\n    return () => clearThrottleTimeout();\n  }, [clearThrottleTimeout]);\n\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const mountNode = useMenuContext_unstable(context => context.mountNode);\n\n  const rootProps = slot.always(\n    getIntrinsicElementProps('div', {\n      role: 'presentation',\n      ...restoreFocusSourceAttributes,\n      ...props,\n      // FIXME:\n      // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n      // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n      ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef) as React.Ref<HTMLDivElement>,\n    }),\n    { elementType: 'div' },\n  );\n  const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n  rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (openOnHover || isSubmenu) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n    }\n    onMouseEnterOriginal?.(event);\n  });\n  rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    const key = event.key;\n    if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n      if (open && popoverRef.current?.contains(event.target as HTMLElement) && !event.isDefaultPrevented()) {\n        setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n        // stop propagation to avoid conflicting with other elements that listen for `Escape`\n        // e,g: Dialog, Popover, Menu and Tooltip\n        event.preventDefault();\n      }\n    }\n    if (key === Tab) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n      if (!isSubmenu) {\n        triggerRef.current?.focus();\n      }\n    }\n    onKeyDownOriginal?.(event);\n  });\n\n  return {\n    inline,\n    mountNode,\n    safeZone,\n    components: { root: 'div' },\n    root: rootProps,\n  };\n};\n"],"names":["ArrowLeft","Tab","ArrowRight","Escape","useFluent_unstable","useFluent","useRestoreFocusSource","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useTimeout","React","useMenuContext_unstable","dispatchMenuEnterEvent","useIsSubmenu","useMenuPopover_unstable","props","ref","safeZone","context","popoverRef","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","canDispatchCustomEventRef","useRef","restoreFocusSourceAttributes","setThrottleTimeout","clearThrottleTimeout","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","useEffect","inline","mountNode","rootProps","always","role","elementType","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","isDefaultPrevented","preventDefault","focus","components","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuTrigger/MenuTrigger.types.ts"],"sourcesContent":["import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';\nimport type { TriggerProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type MenuTriggerProps = TriggerProps<MenuTriggerChildProps> & {\n  /**\n   * Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.\n   * @default false\n   */\n  disableButtonEnhancement?: boolean;\n};\n\n/**\n * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu\n */\nexport type MenuTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<\n  Type,\n  Props & {\n    'aria-haspopup'?: 'menu';\n    'aria-expanded'?: boolean;\n    id: string;\n    ref: React.Ref<never>;\n    /* eslint-disable @nx/workspace-consistent-callback-type -- can't change type of existing callback */\n    onMouseEnter: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n    onMouseLeave: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n    onMouseMove: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n    onContextMenu: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n    /* eslint-enable @nx/workspace-consistent-callback-type */\n  }\n>;\n\nexport type MenuTriggerState = {\n  children: React.ReactElement | null;\n  isSubmenu: boolean;\n};\n"],"names":["React"],"rangeMappings":"","mappings":"AAEA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/MenuTrigger/MenuTrigger.types.ts"],"sourcesContent":["import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';\nimport type { TriggerProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type MenuTriggerProps = TriggerProps<MenuTriggerChildProps> & {\n  /**\n   * Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.\n   * @default false\n   */\n  disableButtonEnhancement?: boolean;\n};\n\n/**\n * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu\n */\nexport type MenuTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<\n  Type,\n  Props & {\n    'aria-haspopup'?: 'menu';\n    'aria-expanded'?: boolean;\n    id: string;\n    ref: React.Ref<never>;\n    /* eslint-disable @nx/workspace-consistent-callback-type -- can't change type of existing callback */\n    onMouseEnter: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n    onMouseLeave: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n    onMouseMove: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n    onMouseOver?: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n    onContextMenu: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n    /* eslint-enable @nx/workspace-consistent-callback-type */\n  }\n>;\n\nexport type MenuTriggerState = {\n  children: React.ReactElement | null;\n  isSubmenu: boolean;\n};\n"],"names":["React"],"rangeMappings":"","mappings":"AAEA,YAAYA,WAAW,QAAQ"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuTrigger/renderMenuTrigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';\nimport type { MenuTriggerState } from './MenuTrigger.types';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n */\nexport const renderMenuTrigger_unstable = (state: MenuTriggerState) => {\n  return <MenuTriggerContextProvider value={state.isSubmenu}>{state.children}</MenuTriggerContextProvider>;\n};\n"],"names":["React","MenuTriggerContextProvider","renderMenuTrigger_unstable","state","value","isSubmenu","children"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,oCAAoC;AAG/E;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC,qBAAO,oBAACF;QAA2BG,OAAOD,MAAME,SAAS;OAAGF,MAAMG,QAAQ;AAC5E,EAAE"}
+{"version":3,"sources":["../src/components/MenuTrigger/renderMenuTrigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';\nimport type { MenuTriggerState } from './MenuTrigger.types';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n */\nexport const renderMenuTrigger_unstable = (\n  state: MenuTriggerState,\n): // eslint-disable-next-line @typescript-eslint/no-deprecated\nJSX.Element => {\n  return <MenuTriggerContextProvider value={state.isSubmenu}>{state.children}</MenuTriggerContextProvider>;\n};\n"],"names":["React","MenuTriggerContextProvider","renderMenuTrigger_unstable","state","value","isSubmenu","children"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,oCAAoC;AAG/E;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxCC;IAGA,qBAAO,oBAACF;QAA2BG,OAAOD,MAAME,SAAS;OAAGF,MAAMG,QAAQ;AAC5E,EAAE"}

package/lib/components/MenuTrigger/useMenuTrigger.js

@@ -1,11 +1,14 @@
-import * as React from 'react';
-import { useMenuContext_unstable } from '../../contexts/menuContext';
-import { useIsSubmenu } from '../../utils/useIsSubmenu';
-import { useFocusFinders } from '@fluentui/react-tabster';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useARIAButtonProps } from '@fluentui/react-aria';
 import { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useFocusFinders } from '@fluentui/react-tabster';
 import { applyTriggerPropsToChildren, getTriggerChild, isHTMLElement, mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
-import { useARIAButtonProps } from '@fluentui/react-aria';
+import * as React from 'react';
+import { useMenuContext_unstable } from '../../contexts/menuContext';
+import { useIsSubmenu, useOnMenuSafeZoneTimeout } from '../../utils';
+function noop() {
+// does nothing
+}
 /**
  * Create the state required to render MenuTrigger.
  * Clones the only child component and adds necessary event handling behaviours to open a popup menu
@@ -34,6 +37,15 @@ import { useARIAButtonProps } from '@fluentui/react-aria';
     const { dir } = useFluent();
     const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;
     const child = getTriggerChild(children);
+    // Heads up!
+    //
+    // Handles an edge case where mouse movement over the menu trigger didn't happen as safe zone blocked pointer events,
+    // but the cursor is already over the menu trigger.
+    const safeZoneHandlerRef = useOnMenuSafeZoneTimeout(useEventCallback(()=>{
+        if (isSubmenu) {
+            hasMouseMoved.current = true;
+        }
+    }));
     const onContextMenu = (event)=>{
         if (isTargetDisabled(event) || event.isDefaultPrevented()) {
             return;
@@ -88,7 +100,7 @@ import { useARIAButtonProps } from '@fluentui/react-aria';
             focusFirst();
         }
     };
-    const onMouseEnter = (event)=>{
+    const onMouseOver = (event)=>{
         if (isTargetDisabled(event)) {
             return;
         }
@@ -131,14 +143,16 @@ import { useARIAButtonProps } from '@fluentui/react-aria';
             });
         }
     };
+    var _child_props_onMouseEnter;
     const contextMenuProps = {
         id: triggerId,
         ...child === null || child === void 0 ? void 0 : child.props,
-        ref: useMergedRefs(triggerRef, child === null || child === void 0 ? void 0 : child.ref),
-        onMouseEnter: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseEnter, onMouseEnter)),
+        ref: useMergedRefs(triggerRef, child === null || child === void 0 ? void 0 : child.ref, safeZoneHandlerRef),
+        onMouseEnter: useEventCallback((_child_props_onMouseEnter = child === null || child === void 0 ? void 0 : child.props.onMouseEnter) !== null && _child_props_onMouseEnter !== void 0 ? _child_props_onMouseEnter : noop),
         onMouseLeave: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseLeave, onMouseLeave)),
         onContextMenu: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onContextMenu, onContextMenu)),
-        onMouseMove: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseMove, onMouseMove))
+        onMouseMove: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseMove, onMouseMove)),
+        onMouseOver: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseOver, onMouseOver))
     };
     const triggerChildProps = {
         'aria-haspopup': 'menu',