@fluentui/react-menu 9.12.50 → 9.13.0

package/CHANGELOG.md

@@ -1,20 +1,41 @@
 # Change Log - @fluentui/react-menu
 
-This log was last generated on Tue, 06 Feb 2024 17:52:10 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Feb 2024 14:15:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.13.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.13.0)
+
+Tue, 20 Feb 2024 14:15:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.12.50..@fluentui/react-menu_v9.13.0)
+
+### Minor changes
+
+- Dismiss Menu when MenuLinkItem is clicked. ([PR #30497](https://github.com/microsoft/fluentui/pull/30497) by santoshsrisai36@gmail.com)
+- Bump @fluentui/react-aria to v9.9.0 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.52 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+- Bump @fluentui/react-portal to v9.4.14 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+- Bump @fluentui/react-positioning to v9.13.4 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+- Bump @fluentui/react-tabster to v9.19.1 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+- Bump @fluentui/react-utilities to v9.18.1 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.30 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+
+### Patches
+
+- fix: MenuPopover should stay open for submenu even when not openOnHover ([PR #30486](https://github.com/microsoft/fluentui/pull/30486) by lingfangao@hotmail.com)
+- chore: update style hooks to return state ([PR #30513](https://github.com/microsoft/fluentui/pull/30513) by olfedias@microsoft.com)
+
 ## [9.12.50](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.12.50)
 
-Tue, 06 Feb 2024 17:52:10 GMT 
+Tue, 06 Feb 2024 17:55:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.12.49..@fluentui/react-menu_v9.12.50)
 
 ### Patches
 
-- Bump @fluentui/react-aria to v9.8.2 ([PR #26681](https://github.com/microsoft/fluentui/pull/26681) by beachball)
-- Bump @fluentui/react-portal to v9.4.13 ([PR #26681](https://github.com/microsoft/fluentui/pull/26681) by beachball)
-- Bump @fluentui/react-positioning to v9.13.3 ([PR #26681](https://github.com/microsoft/fluentui/pull/26681) by beachball)
-- Bump @fluentui/react-tabster to v9.19.0 ([PR #26681](https://github.com/microsoft/fluentui/pull/26681) by beachball)
+- Bump @fluentui/react-aria to v9.8.2 ([PR #30392](https://github.com/microsoft/fluentui/pull/30392) by beachball)
+- Bump @fluentui/react-portal to v9.4.13 ([PR #30392](https://github.com/microsoft/fluentui/pull/30392) by beachball)
+- Bump @fluentui/react-positioning to v9.13.3 ([PR #30392](https://github.com/microsoft/fluentui/pull/30392) by beachball)
+- Bump @fluentui/react-tabster to v9.19.0 ([PR #30392](https://github.com/microsoft/fluentui/pull/30392) by beachball)
 
 ## [9.12.49](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.12.49)
 

package/dist/index.d.ts

@@ -729,7 +729,7 @@ export declare const useMenuItem_unstable: (props: MenuItemProps, ref: React_2.R
 /** Returns the props and state required to render the component */
 export declare const useMenuItemCheckbox_unstable: (props: MenuItemCheckboxProps, ref: React_2.Ref<ARIAButtonElement<'div'>>) => MenuItemCheckboxState;
 
-export declare const useMenuItemCheckboxStyles_unstable: (state: MenuItemCheckboxState) => void;
+export declare const useMenuItemCheckboxStyles_unstable: (state: MenuItemCheckboxState) => MenuItemCheckboxState;
 
 /**
  * Create the state required to render MenuItemLink.
@@ -755,7 +755,7 @@ export declare const useMenuItemRadio_unstable: (props: MenuItemRadioProps, ref:
 export declare const useMenuItemRadioStyles_unstable: (state: MenuItemRadioState) => void;
 
 /** Applies style classnames to slots */
-export declare const useMenuItemStyles_unstable: (state: MenuItemState) => void;
+export declare const useMenuItemStyles_unstable: (state: MenuItemState) => MenuItemState;
 
 /**
  * Returns the props and state required to render the component

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

@@ -1 +1 @@
-{"version":3,"sources":["Menu.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { PositioningVirtualElement, SetVirtualMouseTarget } from '@fluentui/react-positioning';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { MenuContextValue } from '../../contexts/menuContext';\nimport type { MenuListProps } from '../MenuList/MenuList.types';\n\nexport type MenuSlots = {};\n\n/**\n * Extends and drills down Menulist props to simplify API\n */\nexport type MenuProps = ComponentProps<MenuSlots> &\n  Pick<PortalProps, 'mountNode'> &\n  Pick<\n    MenuListProps,\n    'checkedValues' | 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'onCheckedValueChange'\n  > & {\n    /**\n     * Can contain two children including {@link MenuTrigger} and {@link MenuPopover}.\n     * Alternatively can only contain {@link MenuPopover} if using a custom `target`.\n     */\n    children: [JSX.Element, JSX.Element] | JSX.Element;\n\n    /**\n     * Sets the delay for mouse open/close for the popover one mouse enter/leave\n     */\n    hoverDelay?: number;\n\n    /**\n     * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n     * This option is disregarded for submenus\n     *\n     * @default false\n     */\n    inline?: boolean;\n\n    /**\n     * Call back when the component requests to change value\n     * The `open` value is used as a hint when directly controlling the component\n     */\n    onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n\n    /**\n     * Whether the popup is open\n     *\n     * @default false\n     */\n    open?: boolean;\n\n    /**\n     * Whether the popup is open by default\n     *\n     * @default false\n     */\n    defaultOpen?: boolean;\n\n    /**\n     * Opens the menu on right click (context menu), removes all other menu open interactions\n     *\n     * @default false\n     */\n    openOnContext?: boolean;\n\n    /**\n     * Opens the menu on hover\n     *\n     * @default false\n     */\n    openOnHover?: boolean;\n\n    /**\n     * Do not dismiss the menu when a menu item is clicked\n     *\n     * @default false\n     */\n    persistOnItemClick?: boolean;\n\n    /**\n     * Configures the positioned menu\n     */\n    positioning?: PositioningShorthand;\n\n    /**\n     * Close when scroll outside of it\n     *\n     * @default false\n     */\n    closeOnScroll?: boolean;\n  };\n\nexport type MenuState = ComponentState<MenuSlots> &\n  Required<\n    Pick<\n      MenuProps,\n      | 'hasCheckmarks'\n      | 'hasIcons'\n      | 'mountNode'\n      | 'inline'\n      | 'checkedValues'\n      | 'onCheckedValueChange'\n      | 'open'\n      | 'openOnHover'\n      | 'closeOnScroll'\n      | 'hoverDelay'\n      | 'openOnContext'\n      | 'persistOnItemClick'\n    >\n  > & {\n    /**\n     * Anchors the popper to the mouse click for context events\n     */\n    contextTarget?: PositioningVirtualElement;\n\n    /**\n     * Whether this menu is a submenu\n     */\n    isSubmenu: boolean;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuPopover: React.ReactNode;\n\n    /**\n     * The ref for the popup\n     */\n    menuPopoverRef: React.MutableRefObject<HTMLElement>;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuTrigger: React.ReactNode;\n\n    /**\n     * A callback to set the target of the popper to the mouse click for context events\n     */\n    setContextTarget: SetVirtualMouseTarget;\n\n    /**\n     * Callback to open/close the popup\n     */\n    setOpen: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n\n    /**\n     * Id for the MenuTrigger element for aria relationship\n     */\n    triggerId: string;\n\n    /**\n     * The ref for the MenuTrigger, used for popup positioning\n     */\n    triggerRef: React.MutableRefObject<HTMLElement>;\n\n    /**\n     * Call back when the component requests to change value\n     * The `open` value is used as a hint when directly controlling the component\n     * @deprecated this property is not used internally anymore,\n     * the signature remains just to avoid breaking changes\n     */\n    onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n    /**\n     * Default values to be checked on mount\n     @deprecated this property is not used internally anymore,\n     * the signature remains just to avoid breaking changes\n     */\n    defaultCheckedValues?: Record<string, string[]>;\n  };\n\nexport type MenuContextValues = {\n  menu: MenuContextValue;\n};\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type MenuOpenEvent = MenuOpenChangeData['event'];\n/**\n * @deprecated use MenuOpenEvent instead\n */\nexport type MenuOpenEvents = MenuOpenEvent;\n\n/**\n * Data attached to open/close events\n */\nexport type MenuOpenChangeData = {\n  /**\n   * indicates whether the request for the open state was bubbled from a nested menu\n   */\n  bubble?: boolean;\n  /**\n   * Indicates whether the change of state was a keyboard interaction\n   * @deprecated\n   * This should not be used, since `Enter`, `Space` and click should be interpreted as the same thing as a click\n   */\n  keyboard?: boolean;\n  open: boolean;\n} & (\n  | {\n      type: 'menuTriggerContextMenu';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerClick';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseEnter';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseLeave';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseMove';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerKeyDown';\n      event: React.KeyboardEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuItemClick';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuPopoverMouseEnter';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuPopoverKeyDown';\n      event: React.KeyboardEvent<HTMLElement>;\n    }\n  | {\n      type: 'clickOutside';\n      event: MouseEvent | TouchEvent;\n    }\n  | {\n      type: 'scrollOutside';\n      event: MouseEvent | TouchEvent;\n    }\n  | {\n      type: 'menuMouseEnter';\n      event: MouseEvent | TouchEvent;\n    }\n);\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["Menu.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { PositioningVirtualElement, SetVirtualMouseTarget } from '@fluentui/react-positioning';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { MenuContextValue } from '../../contexts/menuContext';\nimport type { MenuListProps } from '../MenuList/MenuList.types';\n\nexport type MenuSlots = {};\n\n/**\n * Extends and drills down Menulist props to simplify API\n */\nexport type MenuProps = ComponentProps<MenuSlots> &\n  Pick<PortalProps, 'mountNode'> &\n  Pick<\n    MenuListProps,\n    'checkedValues' | 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'onCheckedValueChange'\n  > & {\n    /**\n     * Can contain two children including {@link MenuTrigger} and {@link MenuPopover}.\n     * Alternatively can only contain {@link MenuPopover} if using a custom `target`.\n     */\n    children: [JSX.Element, JSX.Element] | JSX.Element;\n\n    /**\n     * Sets the delay for mouse open/close for the popover one mouse enter/leave\n     */\n    hoverDelay?: number;\n\n    /**\n     * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n     * This option is disregarded for submenus\n     *\n     * @default false\n     */\n    inline?: boolean;\n\n    /**\n     * Call back when the component requests to change value\n     * The `open` value is used as a hint when directly controlling the component\n     */\n    // 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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -90,5 +90,6 @@ export const useMenuItemStyles_unstable = state => {
     state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className);
   }
   useCheckmarkStyles_unstable(state);
+  return state;
 };
 //# sourceMappingURL=useMenuItemStyles.styles.js.map

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","useRootBaseStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","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","Bctn1xl","Bh6z0a4","d","h","f","m","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","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};\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    },\n    ':hover:active': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        color: tokens.colorNeutralForeground2Pressed\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});\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 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                [`& .${menuItemClassNames.icon}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':focus': {\n                color: 'GrayText'\n            }\n        }\n    }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\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    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);\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);\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);\n    }\n    useCheckmarkStyles_unstable(state);\n};\n"],"mappings":"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"}
+{"version":3,"names":["mergeClasses","__styles","__resetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useRootBaseStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","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","Bctn1xl","Bh6z0a4","d","h","f","m","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","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};\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    },\n    ':hover:active': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        color: tokens.colorNeutralForeground2Pressed\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});\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 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                [`& .${menuItemClassNames.icon}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':focus': {\n                color: 'GrayText'\n            }\n        }\n    }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\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    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);\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);\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);\n    }\n    useCheckmarkStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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"}

package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.js

@@ -24,5 +24,6 @@ export const useMenuItemCheckboxStyles_unstable = state => {
   }
   useMenuItemStyles_unstable(state);
   useCheckmarkStyles_unstable(state);
+  return state;
 };
 //# sourceMappingURL=useMenuItemCheckboxStyles.styles.js.map

package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemCheckboxClassNames","root","icon","checkmark","content","secondaryContent","useMenuItemCheckboxStyles_unstable","state","className"],"sources":["useMenuItemCheckboxStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemCheckboxClassNames = {\n    root: 'fui-MenuItemCheckbox',\n    icon: 'fui-MenuItemCheckbox__icon',\n    checkmark: 'fui-MenuItemCheckbox__checkmark',\n    content: 'fui-MenuItemCheckbox__content',\n    secondaryContent: 'fui-MenuItemCheckbox__secondaryContent'\n};\nexport const useMenuItemCheckboxStyles_unstable = (state)=>{\n    state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n    }\n    useMenuItemStyles_unstable(state);\n    useCheckmarkStyles_unstable(state);\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE,sBAAsB;EAC5BC,IAAI,EAAE,4BAA4B;EAClCC,SAAS,EAAE,iCAAiC;EAC5CC,OAAO,EAAE,+BAA+B;EACxCC,gBAAgB,EAAE;AACtB,CAAC;AACD,OAAO,MAAMC,kCAAkC,GAAIC,KAAK,IAAG;EACvDA,KAAK,CAACN,IAAI,CAACO,SAAS,GAAGX,YAAY,CAACG,0BAA0B,CAACC,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACO,SAAS,CAAC;EAC1F,IAAID,KAAK,CAACH,OAAO,EAAE;IACfG,KAAK,CAACH,OAAO,CAACI,SAAS,GAAGX,YAAY,CAACG,0BAA0B,CAACI,OAAO,EAAEG,KAAK,CAACH,OAAO,CAACI,SAAS,CAAC;EACvG;EACA,IAAID,KAAK,CAACF,gBAAgB,EAAE;IACxBE,KAAK,CAACF,gBAAgB,CAACG,SAAS,GAAGX,YAAY,CAACG,0BAA0B,CAACK,gBAAgB,EAAEE,KAAK,CAACF,gBAAgB,CAACG,SAAS,CAAC;EAClI;EACA,IAAID,KAAK,CAACL,IAAI,EAAE;IACZK,KAAK,CAACL,IAAI,CAACM,SAAS,GAAGX,YAAY,CAACG,0BAA0B,CAACE,IAAI,EAAEK,KAAK,CAACL,IAAI,CAACM,SAAS,CAAC;EAC9F;EACA,IAAID,KAAK,CAACJ,SAAS,EAAE;IACjBI,KAAK,CAACJ,SAAS,CAACK,SAAS,GAAGX,YAAY,CAACG,0BAA0B,CAACG,SAAS,EAAEI,KAAK,CAACJ,SAAS,CAACK,SAAS,CAAC;EAC7G;EACAT,0BAA0B,CAACQ,KAAK,CAAC;EACjCT,2BAA2B,CAACS,KAAK,CAAC;AACtC,CAAC"}
+{"version":3,"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemCheckboxClassNames","root","icon","checkmark","content","secondaryContent","useMenuItemCheckboxStyles_unstable","state","className"],"sources":["useMenuItemCheckboxStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemCheckboxClassNames = {\n    root: 'fui-MenuItemCheckbox',\n    icon: 'fui-MenuItemCheckbox__icon',\n    checkmark: 'fui-MenuItemCheckbox__checkmark',\n    content: 'fui-MenuItemCheckbox__content',\n    secondaryContent: 'fui-MenuItemCheckbox__secondaryContent'\n};\nexport const useMenuItemCheckboxStyles_unstable = (state)=>{\n    state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n    }\n    useMenuItemStyles_unstable(state);\n    useCheckmarkStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE,sBAAsB;EAC5BC,IAAI,EAAE,4BAA4B;EAClCC,SAAS,EAAE,iCAAiC;EAC5CC,OAAO,EAAE,+BAA+B;EACxCC,gBAAgB,EAAE;AACtB,CAAC;AACD,OAAO,MAAMC,kCAAkC,GAAIC,KAAK,IAAG;EACvDA,KAAK,CAACN,IAAI,CAACO,SAAS,GAAGX,YAAY,CAACG,0BAA0B,CAACC,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACO,SAAS,CAAC;EAC1F,IAAID,KAAK,CAACH,OAAO,EAAE;IACfG,KAAK,CAACH,OAAO,CAACI,SAAS,GAAGX,YAAY,CAACG,0BAA0B,CAACI,OAAO,EAAEG,KAAK,CAACH,OAAO,CAACI,SAAS,CAAC;EACvG;EACA,IAAID,KAAK,CAACF,gBAAgB,EAAE;IACxBE,KAAK,CAACF,gBAAgB,CAACG,SAAS,GAAGX,YAAY,CAACG,0BAA0B,CAACK,gBAAgB,EAAEE,KAAK,CAACF,gBAAgB,CAACG,SAAS,CAAC;EAClI;EACA,IAAID,KAAK,CAACL,IAAI,EAAE;IACZK,KAAK,CAACL,IAAI,CAACM,SAAS,GAAGX,YAAY,CAACG,0BAA0B,CAACE,IAAI,EAAEK,KAAK,CAACL,IAAI,CAACM,SAAS,CAAC;EAC9F;EACA,IAAID,KAAK,CAACJ,SAAS,EAAE;IACjBI,KAAK,CAACJ,SAAS,CAACK,SAAS,GAAGX,YAAY,CAACG,0BAA0B,CAACG,SAAS,EAAEI,KAAK,CAACJ,SAAS,CAACK,SAAS,CAAC;EAC7G;EACAT,0BAA0B,CAACQ,KAAK,CAAC;EACjCT,2BAA2B,CAACS,KAAK,CAAC;EAClC,OAAOA,KAAK;AAChB,CAAC"}

package/lib/components/MenuItemLink/useMenuItemLink.js

@@ -12,6 +12,15 @@ import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
  */ export const useMenuItemLink_unstable = (props, ref)=>{
     // casting because the root slot changes from div to a
     const baseState = useMenuItem_unstable(props, null);
+    // FIXME: casting because the root slot changes from div to a,
+    // ideal solution would be to extract common logic from useMenuItem_unstable root
+    // and use it in both without assuming element type
+    const _props = {
+        ...props,
+        ...baseState.root,
+        ref,
+        tabIndex: props.tabIndex
+    };
     return {
         ...baseState,
         components: {
@@ -19,9 +28,8 @@ import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
             root: 'a'
         },
         root: slot.always(getIntrinsicElementProps('a', {
-            ref,
             role: 'menuitem',
-            ...props
+            ..._props
         }), {
             elementType: 'a'
         })

package/lib/components/MenuItemLink/useMenuItemLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuItemLink.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n  props: MenuItemLinkProps,\n  ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n  // casting because the root slot changes from div to a\n  const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n  return {\n    ...baseState,\n    components: {\n      ...baseState.components,\n      root: 'a',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('a', {\n        ref,\n        role: 'menuitem',\n        ...props,\n      }),\n      { elementType: 'a' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMenuItem_unstable","useMenuItemLink_unstable","props","ref","baseState","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oBAAoB,QAAQ,0BAA0B;AAG/D;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,YAAYJ,qBAAqBE,OAAwB;IAC/D,OAAO;QACL,GAAGE,SAAS;QACZC,YAAY;YACV,GAAGD,UAAUC,UAAU;YACvBC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,KAAK;YAC5BK;YACAK,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAI;IAEvB;AACF,EAAE"}
+{"version":3,"sources":["useMenuItemLink.ts"],"sourcesContent":["import * as React from 'react';\nimport { ExtractSlotProps, Slot, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n  props: MenuItemLinkProps,\n  ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n  // casting because the root slot changes from div to a\n  const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n  // FIXME: casting because the root slot changes from div to a,\n  // ideal solution would be to extract common logic from useMenuItem_unstable root\n  // and use it in both without assuming element type\n  const _props = { ...props, ...(baseState.root as ExtractSlotProps<Slot<'a'>>), ref, tabIndex: props.tabIndex };\n\n  return {\n    ...baseState,\n    components: {\n      ...baseState.components,\n      root: 'a',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('a', {\n        role: 'menuitem',\n        ..._props,\n      }),\n      { elementType: 'a' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMenuItem_unstable","useMenuItemLink_unstable","props","ref","baseState","_props","root","tabIndex","components","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAiCC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAEnG,SAASC,oBAAoB,QAAQ,0BAA0B;AAG/D;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,YAAYJ,qBAAqBE,OAAwB;IAC/D,8DAA8D;IAC9D,iFAAiF;IACjF,mDAAmD;IACnD,MAAMG,SAAS;QAAE,GAAGH,KAAK;QAAE,GAAIE,UAAUE,IAAI;QAAkCH;QAAKI,UAAUL,MAAMK,QAAQ;IAAC;IAE7G,OAAO;QACL,GAAGH,SAAS;QACZI,YAAY;YACV,GAAGJ,UAAUI,UAAU;YACvBF,MAAM;QACR;QACAA,MAAMP,KAAKU,MAAM,CACfX,yBAAyB,KAAK;YAC5BY,MAAM;YACN,GAAGL,MAAM;QACX,IACA;YAAEM,aAAa;QAAI;IAEvB;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuList.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MenuListContextValue } from '../../contexts/menuListContext';\nimport type { SelectableHandler } from '../../selectable/index';\n\nexport type MenuCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;\n\nexport type MenuCheckedValueChangeData = {\n  /** The items for this value that are checked */\n  checkedItems: string[];\n  /** The name of the value */\n  name: string;\n};\n\nexport type MenuListSlots = {\n  root: Slot<'div'>;\n};\n\nexport type MenuListProps = ComponentProps<MenuListSlots> & {\n  /**\n   * Map of all checked values\n   */\n  checkedValues?: Record<string, string[]>;\n\n  /**\n   * Default values to be checked on mount\n   */\n  defaultCheckedValues?: Record<string, string[]>;\n\n  /**\n   * States that menu items can contain selectable items and reserve slots for item alignment\n   */\n  hasCheckmarks?: boolean;\n\n  /**\n   * States that menu items can contain icons and reserve slots for item alignment\n   */\n  hasIcons?: boolean;\n\n  /**\n   * Callback when checked items change for value with a name\n   *\n   * @param event - React's original SyntheticEvent\n   * @param data - A data object with relevant information\n   */\n  onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;\n};\n\nexport type MenuListState = ComponentState<MenuListSlots> &\n  Required<Pick<MenuListProps, 'checkedValues' | 'hasCheckmarks' | 'hasIcons'>> &\n  Pick<MenuListProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {\n    /**\n     * Selects a radio item, will de-select the currently selected ratio item\n     */\n    selectRadio: SelectableHandler;\n\n    /**\n     * Callback to set focus on the next menu item by first character\n     */\n    setFocusByFirstCharacter: NonNullable<MenuListContextValue['setFocusByFirstCharacter']>;\n\n    /*\n     * Toggles the state of a checkbox item\n     */\n    toggleCheckbox: SelectableHandler;\n\n    /**\n     * States if the MenuList is inside MenuContext\n     */\n    hasMenuContext?: boolean;\n  };\n\nexport type MenuListContextValues = {\n  menuList: MenuListContextValue;\n};\n\n/**\n * @deprecated this type is not being used internally anymore\n */\nexport type UninitializedMenuListState = Omit<\n  MenuListState,\n  'checkedValues' | 'selectRadio' | 'setFocusByFirstCharacter' | 'toggleCheckbox'\n> &\n  Partial<Pick<MenuListState, 'checkedValues'>>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["MenuList.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MenuListContextValue } from '../../contexts/menuListContext';\nimport type { SelectableHandler } from '../../selectable/index';\n\nexport type MenuCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;\n\nexport type MenuCheckedValueChangeData = {\n  /** The items for this value that are checked */\n  checkedItems: string[];\n  /** The name of the value */\n  name: string;\n};\n\nexport type MenuListSlots = {\n  root: Slot<'div'>;\n};\n\nexport type MenuListProps = ComponentProps<MenuListSlots> & {\n  /**\n   * Map of all checked values\n   */\n  checkedValues?: Record<string, string[]>;\n\n  /**\n   * Default values to be checked on mount\n   */\n  defaultCheckedValues?: Record<string, string[]>;\n\n  /**\n   * States that menu items can contain selectable items and reserve slots for item alignment\n   */\n  hasCheckmarks?: boolean;\n\n  /**\n   * States that menu items can contain icons and reserve slots for item alignment\n   */\n  hasIcons?: boolean;\n\n  /**\n   * Callback when checked items change for value with a name\n   *\n   * @param event - React's original SyntheticEvent\n   * @param data - A data object with relevant information\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;\n};\n\nexport type MenuListState = ComponentState<MenuListSlots> &\n  Required<Pick<MenuListProps, 'checkedValues' | 'hasCheckmarks' | 'hasIcons'>> &\n  Pick<MenuListProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {\n    /**\n     * Selects a radio item, will de-select the currently selected ratio item\n     */\n    selectRadio: SelectableHandler;\n\n    /**\n     * Callback to set focus on the next menu item by first character\n     */\n    setFocusByFirstCharacter: NonNullable<MenuListContextValue['setFocusByFirstCharacter']>;\n\n    /*\n     * Toggles the state of a checkbox item\n     */\n    toggleCheckbox: SelectableHandler;\n\n    /**\n     * States if the MenuList is inside MenuContext\n     */\n    hasMenuContext?: boolean;\n  };\n\nexport type MenuListContextValues = {\n  menuList: MenuListContextValue;\n};\n\n/**\n * @deprecated this type is not being used internally anymore\n */\nexport type UninitializedMenuListState = Omit<\n  MenuListState,\n  'checkedValues' | 'selectRadio' | 'setFocusByFirstCharacter' | 'toggleCheckbox'\n> &\n  Partial<Pick<MenuListState, 'checkedValues'>>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/MenuPopover/useMenuPopover.js

@@ -66,7 +66,7 @@ import { useRestoreFocusSource } from '@fluentui/react-tabster';
     });
     const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;
     rootProps.onMouseEnter = useEventCallback((event)=>{
-        if (openOnHover) {
+        if (openOnHover || isSubmenu) {
             setOpen(event, {
                 open: true,
                 keyboard: false,

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuPopover.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } 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  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 throttleDispatchTimerRef = React.useRef(0);\n  const restoreFocusSourceAttributes = useRestoreFocusSource();\n\n  const { dir } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(\n    (node: HTMLElement) => {\n      if (node) {\n        // Dispatches the custom menu mouse enter event with throttling\n        // Needs to trigger on mouseover to support keyboard + mouse together\n        // i.e. keyboard opens submenus while cursor is still on the parent\n        node.addEventListener('mouseover', e => {\n          if (canDispatchCustomEventRef.current) {\n            canDispatchCustomEventRef.current = false;\n            dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore #16889 Node setTimeout type leaking\n            throttleDispatchTimerRef.current = setTimeout(() => (canDispatchCustomEventRef.current = true), 250);\n          }\n        });\n      }\n    },\n    [popoverRef, throttleDispatchTimerRef],\n  );\n\n  React.useEffect(() => {\n    () => clearTimeout(throttleDispatchTimerRef.current);\n  }, []);\n\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const mountNode = useMenuContext_unstable(context => context.mountNode);\n\n  const rootProps = 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) {\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","useMenuContext_unstable","dispatchMenuEnterEvent","useFluent_unstable","useFluent","useIsSubmenu","useRestoreFocusSource","useMenuPopover_unstable","props","ref","popoverRef","context","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","canDispatchCustomEventRef","useRef","throttleDispatchTimerRef","restoreFocusSourceAttributes","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","setTimeout","useEffect","clearTimeout","inline","mountNode","rootProps","always","role","elementType","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","isDefaultPrevented","preventDefault","focus","components","root"],"mappings":"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"}
+{"version":3,"sources":["useMenuPopover.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } 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  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 throttleDispatchTimerRef = React.useRef(0);\n  const restoreFocusSourceAttributes = useRestoreFocusSource();\n\n  const { dir } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(\n    (node: HTMLElement) => {\n      if (node) {\n        // Dispatches the custom menu mouse enter event with throttling\n        // Needs to trigger on mouseover to support keyboard + mouse together\n        // i.e. keyboard opens submenus while cursor is still on the parent\n        node.addEventListener('mouseover', e => {\n          if (canDispatchCustomEventRef.current) {\n            canDispatchCustomEventRef.current = false;\n            dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore #16889 Node setTimeout type leaking\n            throttleDispatchTimerRef.current = setTimeout(() => (canDispatchCustomEventRef.current = true), 250);\n          }\n        });\n      }\n    },\n    [popoverRef, throttleDispatchTimerRef],\n  );\n\n  React.useEffect(() => {\n    () => clearTimeout(throttleDispatchTimerRef.current);\n  }, []);\n\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const mountNode = useMenuContext_unstable(context => context.mountNode);\n\n  const rootProps = 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","useMenuContext_unstable","dispatchMenuEnterEvent","useFluent_unstable","useFluent","useIsSubmenu","useRestoreFocusSource","useMenuPopover_unstable","props","ref","popoverRef","context","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","canDispatchCustomEventRef","useRef","throttleDispatchTimerRef","restoreFocusSourceAttributes","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","setTimeout","useEffect","clearTimeout","inline","mountNode","rootProps","always","role","elementType","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","isDefaultPrevented","preventDefault","focus","components","root"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["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    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  }\n>;\n\nexport type MenuTriggerState = {\n  children: React.ReactElement | null;\n  isSubmenu: boolean;\n};\n"],"names":["React"],"mappings":"AAEA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["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"],"mappings":"AAEA,YAAYA,WAAW,QAAQ"}

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

@@ -193,4 +193,5 @@ const useMenuItemStyles_unstable = (state)=>{
         state.submenuIndicator.className = (0, _react.mergeClasses)(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className);
     }
     (0, _index.useCheckmarkStyles_unstable)(state);
+    return state;
 }; //# sourceMappingURL=useMenuItemStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, __styles, __resetStyles } 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};\nconst useRootBaseStyles = /*#__PURE__*/__resetStyles(\"rf4m57v\", \"rsbw0a0\", {\n  r: [\".rf4m57v{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding-right:var(--spacingVerticalSNudge);padding-left:var(--spacingVerticalSNudge);padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}\", \".rf4m57v:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}\", \".rf4m57v:hover .fui-Icon-filled{display:inline;}\", \".rf4m57v:hover .fui-Icon-regular{display:none;}\", \".rf4m57v:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}\", \".rf4m57v:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}\", \".rf4m57v:focus{outline-style:none;}\", \".rf4m57v:focus-visible{outline-style:none;}\", \".rf4m57v[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".rf4m57v[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".rsbw0a0{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding-left:var(--spacingVerticalSNudge);padding-right:var(--spacingVerticalSNudge);padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}\", \".rsbw0a0:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}\", \".rsbw0a0:hover .fui-Icon-filled{display:inline;}\", \".rsbw0a0:hover .fui-Icon-regular{display:none;}\", \".rsbw0a0:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}\", \".rsbw0a0:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}\", \".rsbw0a0:focus{outline-style:none;}\", \".rsbw0a0:focus-visible{outline-style:none;}\", \".rsbw0a0[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rsbw0a0[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n  s: [\"@media (forced-colors: active){.rf4m57v[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media (forced-colors: active){.rsbw0a0[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\"]\n});\nconst useContentBaseStyles = /*#__PURE__*/__resetStyles(\"r1ls86vo\", \"rpbc5dr\", [\".r1ls86vo{padding-left:2px;padding-right:2px;background-color:transparent;flex-grow:1;}\", \".rpbc5dr{padding-right:2px;padding-left:2px;background-color:transparent;flex-grow:1;}\"]);\nconst useSecondaryContentBaseStyles = /*#__PURE__*/__resetStyles(\"r12mwwux\", \"r1ewgu5j\", [\".r12mwwux{padding-left:2px;padding-right:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3);}\", \".r12mwwux:hover{color:var(--colorNeutralForeground3Hover);}\", \".r12mwwux:focus{color:var(--colorNeutralForeground3Hover);}\", \".r1ewgu5j{padding-right:2px;padding-left:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3);}\", \".r1ewgu5j:hover{color:var(--colorNeutralForeground3Hover);}\", \".r1ewgu5j:focus{color:var(--colorNeutralForeground3Hover);}\"]);\nconst useIconBaseStyles = /*#__PURE__*/__resetStyles(\"r9c34qo\", null, [\".r9c34qo{width:20px;height:20px;font-size:20px;line-height:0;align-items:center;display:inline-flex;justify-content:center;}\"]);\nconst useSubmenuIndicatorBaseStyles = /*#__PURE__*/__resetStyles(\"r9c34qo\", null, [\".r9c34qo{width:20px;height:20px;font-size:20px;line-height:0;align-items:center;display:inline-flex;justify-content:center;}\"]);\nconst useStyles = /*#__PURE__*/__styles({\n  checkmark: {\n    B6of3ja: \"fmnzpld\"\n  },\n  splitItemMain: {\n    Bh6795r: \"fqerorx\"\n  },\n  splitItemTrigger: {\n    Btl43ni: [\"f1ozlkrg\", \"f10ostut\"],\n    Beyfa6y: [\"f1deotkl\", \"f1krrbdw\"],\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"],\n    Ftih45: \"f1wl9k8s\",\n    Ccq8qp: \"f1yn80uh\",\n    Baz25je: \"f68mna0\",\n    cmx5o7: \"f1p5zmk\"\n  },\n  disabled: {\n    sj55zd: \"f1s2aq7o\",\n    Bi91k9c: \"fvgxktp\",\n    Jwef8y: \"f1ijtazh\",\n    eoavqd: \"fphbwmw\",\n    Bk3fhr4: \"f19vpps7\",\n    Bmfj8id: \"fv5swzo\",\n    Bg7n49j: \"f1q1x1ba\",\n    B2d53fq: \"fcvwxyo\",\n    iro3zm: \"f1to34ca\",\n    t0hwav: \"ft33916\",\n    Bbusuzp: \"f1dcs8yz\",\n    ze5xyy: \"f1kc2mi9\",\n    Bctn1xl: \"fk56vqo\",\n    Bh6z0a4: \"f1ikwg0d\"\n  }\n}, {\n  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);}\"],\n  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);}\"],\n  f: [\".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}\"],\n  m: [[\"@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1kc2mi9:hover{color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fk56vqo:hover .fui-MenuItem__icon{color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1ikwg0d:focus{color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }]]\n});\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = state => {\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  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);\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);\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);\n  }\n  useCheckmarkStyles_unstable(state);\n};\n//# sourceMappingURL=useMenuItemStyles.styles.js.map"],"names":["menuItemClassNames","useMenuItemStyles_unstable","root","icon","checkmark","submenuIndicator","content","secondaryContent","useRootBaseStyles","__resetStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","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","Bctn1xl","Bh6z0a4","d","h","f","m","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","className","mergeClasses","useCheckmarkStyles_unstable"],"mappings":"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"}
+{"version":3,"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, __styles, __resetStyles } 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};\nconst useRootBaseStyles = /*#__PURE__*/__resetStyles(\"rf4m57v\", \"rsbw0a0\", {\n  r: [\".rf4m57v{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding-right:var(--spacingVerticalSNudge);padding-left:var(--spacingVerticalSNudge);padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}\", \".rf4m57v:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}\", \".rf4m57v:hover .fui-Icon-filled{display:inline;}\", \".rf4m57v:hover .fui-Icon-regular{display:none;}\", \".rf4m57v:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}\", \".rf4m57v:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}\", \".rf4m57v:focus{outline-style:none;}\", \".rf4m57v:focus-visible{outline-style:none;}\", \".rf4m57v[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".rf4m57v[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".rsbw0a0{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding-left:var(--spacingVerticalSNudge);padding-right:var(--spacingVerticalSNudge);padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}\", \".rsbw0a0:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}\", \".rsbw0a0:hover .fui-Icon-filled{display:inline;}\", \".rsbw0a0:hover .fui-Icon-regular{display:none;}\", \".rsbw0a0:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}\", \".rsbw0a0:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}\", \".rsbw0a0:focus{outline-style:none;}\", \".rsbw0a0:focus-visible{outline-style:none;}\", \".rsbw0a0[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rsbw0a0[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n  s: [\"@media (forced-colors: active){.rf4m57v[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media (forced-colors: active){.rsbw0a0[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\"]\n});\nconst useContentBaseStyles = /*#__PURE__*/__resetStyles(\"r1ls86vo\", \"rpbc5dr\", [\".r1ls86vo{padding-left:2px;padding-right:2px;background-color:transparent;flex-grow:1;}\", \".rpbc5dr{padding-right:2px;padding-left:2px;background-color:transparent;flex-grow:1;}\"]);\nconst useSecondaryContentBaseStyles = /*#__PURE__*/__resetStyles(\"r12mwwux\", \"r1ewgu5j\", [\".r12mwwux{padding-left:2px;padding-right:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3);}\", \".r12mwwux:hover{color:var(--colorNeutralForeground3Hover);}\", \".r12mwwux:focus{color:var(--colorNeutralForeground3Hover);}\", \".r1ewgu5j{padding-right:2px;padding-left:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3);}\", \".r1ewgu5j:hover{color:var(--colorNeutralForeground3Hover);}\", \".r1ewgu5j:focus{color:var(--colorNeutralForeground3Hover);}\"]);\nconst useIconBaseStyles = /*#__PURE__*/__resetStyles(\"r9c34qo\", null, [\".r9c34qo{width:20px;height:20px;font-size:20px;line-height:0;align-items:center;display:inline-flex;justify-content:center;}\"]);\nconst useSubmenuIndicatorBaseStyles = /*#__PURE__*/__resetStyles(\"r9c34qo\", null, [\".r9c34qo{width:20px;height:20px;font-size:20px;line-height:0;align-items:center;display:inline-flex;justify-content:center;}\"]);\nconst useStyles = /*#__PURE__*/__styles({\n  checkmark: {\n    B6of3ja: \"fmnzpld\"\n  },\n  splitItemMain: {\n    Bh6795r: \"fqerorx\"\n  },\n  splitItemTrigger: {\n    Btl43ni: [\"f1ozlkrg\", \"f10ostut\"],\n    Beyfa6y: [\"f1deotkl\", \"f1krrbdw\"],\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"],\n    Ftih45: \"f1wl9k8s\",\n    Ccq8qp: \"f1yn80uh\",\n    Baz25je: \"f68mna0\",\n    cmx5o7: \"f1p5zmk\"\n  },\n  disabled: {\n    sj55zd: \"f1s2aq7o\",\n    Bi91k9c: \"fvgxktp\",\n    Jwef8y: \"f1ijtazh\",\n    eoavqd: \"fphbwmw\",\n    Bk3fhr4: \"f19vpps7\",\n    Bmfj8id: \"fv5swzo\",\n    Bg7n49j: \"f1q1x1ba\",\n    B2d53fq: \"fcvwxyo\",\n    iro3zm: \"f1to34ca\",\n    t0hwav: \"ft33916\",\n    Bbusuzp: \"f1dcs8yz\",\n    ze5xyy: \"f1kc2mi9\",\n    Bctn1xl: \"fk56vqo\",\n    Bh6z0a4: \"f1ikwg0d\"\n  }\n}, {\n  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);}\"],\n  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);}\"],\n  f: [\".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}\"],\n  m: [[\"@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1kc2mi9:hover{color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fk56vqo:hover .fui-MenuItem__icon{color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1ikwg0d:focus{color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }]]\n});\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = state => {\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  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);\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);\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);\n  }\n  useCheckmarkStyles_unstable(state);\n  return state;\n};\n//# sourceMappingURL=useMenuItemStyles.styles.js.map"],"names":["menuItemClassNames","useMenuItemStyles_unstable","root","icon","checkmark","submenuIndicator","content","secondaryContent","useRootBaseStyles","__resetStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","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","Bctn1xl","Bh6z0a4","d","h","f","m","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","className","mergeClasses","useCheckmarkStyles_unstable"],"mappings":"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"}

package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.js

@@ -42,4 +42,5 @@ const useMenuItemCheckboxStyles_unstable = (state)=>{
     }
     (0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)(state);
     (0, _index.useCheckmarkStyles_unstable)(state);
+    return state;
 }; //# sourceMappingURL=useMenuItemCheckboxStyles.styles.js.map

package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuItemCheckboxStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemCheckboxClassNames = {\n  root: 'fui-MenuItemCheckbox',\n  icon: 'fui-MenuItemCheckbox__icon',\n  checkmark: 'fui-MenuItemCheckbox__checkmark',\n  content: 'fui-MenuItemCheckbox__content',\n  secondaryContent: 'fui-MenuItemCheckbox__secondaryContent'\n};\nexport const useMenuItemCheckboxStyles_unstable = state => {\n  state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n  }\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);\n  }\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);\n  }\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n  }\n  useMenuItemStyles_unstable(state);\n  useCheckmarkStyles_unstable(state);\n};\n//# sourceMappingURL=useMenuItemCheckboxStyles.styles.js.map"],"names":["menuItemCheckboxClassNames","useMenuItemCheckboxStyles_unstable","root","icon","checkmark","content","secondaryContent","state","className","mergeClasses","useMenuItemStyles_unstable","useCheckmarkStyles_unstable"],"mappings":";;;;;;;;;;;IAGaA,0BAA0B;eAA1BA;;IAOAC,kCAAkC;eAAlCA;;;uBAVgB;uBACe;yCACD;AACpC,MAAMD,6BAA6B;IACxCE,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;AACpB;AACO,MAAML,qCAAqCM,CAAAA;IAChDA,MAAML,IAAI,CAACM,SAAS,GAAGC,IAAAA,mBAAY,EAACT,2BAA2BE,IAAI,EAAEK,MAAML,IAAI,CAACM,SAAS;IACzF,IAAID,MAAMF,OAAO,EAAE;QACjBE,MAAMF,OAAO,CAACG,SAAS,GAAGC,IAAAA,mBAAY,EAACT,2BAA2BK,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACpG;IACA,IAAID,MAAMD,gBAAgB,EAAE;QAC1BC,MAAMD,gBAAgB,CAACE,SAAS,GAAGC,IAAAA,mBAAY,EAACT,2BAA2BM,gBAAgB,EAAEC,MAAMD,gBAAgB,CAACE,SAAS;IAC/H;IACA,IAAID,MAAMJ,IAAI,EAAE;QACdI,MAAMJ,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACT,2BAA2BG,IAAI,EAAEI,MAAMJ,IAAI,CAACK,SAAS;IAC3F;IACA,IAAID,MAAMH,SAAS,EAAE;QACnBG,MAAMH,SAAS,CAACI,SAAS,GAAGC,IAAAA,mBAAY,EAACT,2BAA2BI,SAAS,EAAEG,MAAMH,SAAS,CAACI,SAAS;IAC1G;IACAE,IAAAA,mDAA0B,EAACH;IAC3BI,IAAAA,kCAA2B,EAACJ;AAC9B,GACA,4DAA4D"}
+{"version":3,"sources":["useMenuItemCheckboxStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemCheckboxClassNames = {\n  root: 'fui-MenuItemCheckbox',\n  icon: 'fui-MenuItemCheckbox__icon',\n  checkmark: 'fui-MenuItemCheckbox__checkmark',\n  content: 'fui-MenuItemCheckbox__content',\n  secondaryContent: 'fui-MenuItemCheckbox__secondaryContent'\n};\nexport const useMenuItemCheckboxStyles_unstable = state => {\n  state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n  }\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);\n  }\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);\n  }\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n  }\n  useMenuItemStyles_unstable(state);\n  useCheckmarkStyles_unstable(state);\n  return state;\n};\n//# sourceMappingURL=useMenuItemCheckboxStyles.styles.js.map"],"names":["menuItemCheckboxClassNames","useMenuItemCheckboxStyles_unstable","root","icon","checkmark","content","secondaryContent","state","className","mergeClasses","useMenuItemStyles_unstable","useCheckmarkStyles_unstable"],"mappings":";;;;;;;;;;;IAGaA,0BAA0B;eAA1BA;;IAOAC,kCAAkC;eAAlCA;;;uBAVgB;uBACe;yCACD;AACpC,MAAMD,6BAA6B;IACxCE,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;AACpB;AACO,MAAML,qCAAqCM,CAAAA;IAChDA,MAAML,IAAI,CAACM,SAAS,GAAGC,IAAAA,mBAAY,EAACT,2BAA2BE,IAAI,EAAEK,MAAML,IAAI,CAACM,SAAS;IACzF,IAAID,MAAMF,OAAO,EAAE;QACjBE,MAAMF,OAAO,CAACG,SAAS,GAAGC,IAAAA,mBAAY,EAACT,2BAA2BK,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACpG;IACA,IAAID,MAAMD,gBAAgB,EAAE;QAC1BC,MAAMD,gBAAgB,CAACE,SAAS,GAAGC,IAAAA,mBAAY,EAACT,2BAA2BM,gBAAgB,EAAEC,MAAMD,gBAAgB,CAACE,SAAS;IAC/H;IACA,IAAID,MAAMJ,IAAI,EAAE;QACdI,MAAMJ,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACT,2BAA2BG,IAAI,EAAEI,MAAMJ,IAAI,CAACK,SAAS;IAC3F;IACA,IAAID,MAAMH,SAAS,EAAE;QACnBG,MAAMH,SAAS,CAACI,SAAS,GAAGC,IAAAA,mBAAY,EAACT,2BAA2BI,SAAS,EAAEG,MAAMH,SAAS,CAACI,SAAS;IAC1G;IACAE,IAAAA,mDAA0B,EAACH;IAC3BI,IAAAA,kCAA2B,EAACJ;IAC5B,OAAOA;AACT,GACA,4DAA4D"}

package/lib-commonjs/components/MenuItemLink/useMenuItemLink.js

@@ -15,6 +15,15 @@ const _useMenuItem = require("../MenuItem/useMenuItem");
 const useMenuItemLink_unstable = (props, ref)=>{
     // casting because the root slot changes from div to a
     const baseState = (0, _useMenuItem.useMenuItem_unstable)(props, null);
+    // FIXME: casting because the root slot changes from div to a,
+    // ideal solution would be to extract common logic from useMenuItem_unstable root
+    // and use it in both without assuming element type
+    const _props = {
+        ...props,
+        ...baseState.root,
+        ref,
+        tabIndex: props.tabIndex
+    };
     return {
         ...baseState,
         components: {
@@ -22,9 +31,8 @@ const useMenuItemLink_unstable = (props, ref)=>{
             root: 'a'
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('a', {
-            ref,
             role: 'menuitem',
-            ...props
+            ..._props
         }), {
             elementType: 'a'
         })

package/lib-commonjs/components/MenuItemLink/useMenuItemLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuItemLink.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */ export const useMenuItemLink_unstable = (props, ref)=>{\n    // casting because the root slot changes from div to a\n    const baseState = useMenuItem_unstable(props, null);\n    return {\n        ...baseState,\n        components: {\n            ...baseState.components,\n            root: 'a'\n        },\n        root: slot.always(getIntrinsicElementProps('a', {\n            ref,\n            role: 'menuitem',\n            ...props\n        }), {\n            elementType: 'a'\n        })\n    };\n};\n"],"names":["useMenuItemLink_unstable","props","ref","baseState","useMenuItem_unstable","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCACwB;6BACV;AAS1B,MAAMA,2BAA2B,CAACC,OAAOC;IAChD,sDAAsD;IACtD,MAAMC,YAAYC,IAAAA,iCAAoB,EAACH,OAAO;IAC9C,OAAO;QACH,GAAGE,SAAS;QACZE,YAAY;YACR,GAAGF,UAAUE,UAAU;YACvBC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,KAAK;YAC5CP;YACAQ,MAAM;YACN,GAAGT,KAAK;QACZ,IAAI;YACAU,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["useMenuItemLink.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */ export const useMenuItemLink_unstable = (props, ref)=>{\n    // casting because the root slot changes from div to a\n    const baseState = useMenuItem_unstable(props, null);\n    // FIXME: casting because the root slot changes from div to a,\n    // ideal solution would be to extract common logic from useMenuItem_unstable root\n    // and use it in both without assuming element type\n    const _props = {\n        ...props,\n        ...baseState.root,\n        ref,\n        tabIndex: props.tabIndex\n    };\n    return {\n        ...baseState,\n        components: {\n            ...baseState.components,\n            root: 'a'\n        },\n        root: slot.always(getIntrinsicElementProps('a', {\n            role: 'menuitem',\n            ..._props\n        }), {\n            elementType: 'a'\n        })\n    };\n};\n"],"names":["useMenuItemLink_unstable","props","ref","baseState","useMenuItem_unstable","_props","root","tabIndex","components","slot","always","getIntrinsicElementProps","role","elementType"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCACwB;6BACV;AAS1B,MAAMA,2BAA2B,CAACC,OAAOC;IAChD,sDAAsD;IACtD,MAAMC,YAAYC,IAAAA,iCAAoB,EAACH,OAAO;IAC9C,8DAA8D;IAC9D,iFAAiF;IACjF,mDAAmD;IACnD,MAAMI,SAAS;QACX,GAAGJ,KAAK;QACR,GAAGE,UAAUG,IAAI;QACjBJ;QACAK,UAAUN,MAAMM,QAAQ;IAC5B;IACA,OAAO;QACH,GAAGJ,SAAS;QACZK,YAAY;YACR,GAAGL,UAAUK,UAAU;YACvBF,MAAM;QACV;QACAA,MAAMG,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,KAAK;YAC5CC,MAAM;YACN,GAAGP,MAAM;QACb,IAAI;YACAQ,aAAa;QACjB;IACJ;AACJ"}

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

@@ -69,7 +69,7 @@ const useMenuPopover_unstable = (props, ref)=>{
     });
     const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;
     rootProps.onMouseEnter = (0, _reactutilities.useEventCallback)((event)=>{
-        if (openOnHover) {
+        if (openOnHover || isSubmenu) {
             setOpen(event, {
                 open: true,
                 keyboard: false,

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuPopover.js"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\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 * 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 */ export const useMenuPopover_unstable = (props, ref)=>{\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 throttleDispatchTimerRef = React.useRef(0);\n    const restoreFocusSourceAttributes = useRestoreFocusSource();\n    const { dir } = useFluent();\n    const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\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((node)=>{\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, e);\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore #16889 Node setTimeout type leaking\n                    throttleDispatchTimerRef.current = setTimeout(()=>canDispatchCustomEventRef.current = true, 250);\n                }\n            });\n        }\n    }, [\n        popoverRef,\n        throttleDispatchTimerRef\n    ]);\n    React.useEffect(()=>{\n        ()=>clearTimeout(throttleDispatchTimerRef.current);\n    }, []);\n    var _useMenuContext_unstable;\n    const inline = (_useMenuContext_unstable = useMenuContext_unstable((context)=>context.inline)) !== null && _useMenuContext_unstable !== void 0 ? _useMenuContext_unstable : false;\n    const mountNode = useMenuContext_unstable((context)=>context.mountNode);\n    const rootProps = slot.always(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)\n    }), {\n        elementType: 'div'\n    });\n    const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n    rootProps.onMouseEnter = useEventCallback((event)=>{\n        if (openOnHover) {\n            setOpen(event, {\n                open: true,\n                keyboard: false,\n                type: 'menuPopoverMouseEnter',\n                event\n            });\n        }\n        onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);\n    });\n    rootProps.onKeyDown = useEventCallback((event)=>{\n        const key = event.key;\n        if (key === Escape || isSubmenu && key === CloseArrowKey) {\n            var _popoverRef_current;\n            if (open && ((_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.contains(event.target)) && !event.isDefaultPrevented()) {\n                setOpen(event, {\n                    open: false,\n                    keyboard: true,\n                    type: 'menuPopoverKeyDown',\n                    event\n                });\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, {\n                open: false,\n                keyboard: true,\n                type: 'menuPopoverKeyDown',\n                event\n            });\n            if (!isSubmenu) {\n                var _triggerRef_current;\n                (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n            }\n        }\n        onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);\n    });\n    return {\n        inline,\n        mountNode,\n        components: {\n            root: 'div'\n        },\n        root: rootProps\n    };\n};\n"],"names":["useMenuPopover_unstable","props","ref","popoverRef","useMenuContext_unstable","context","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","useIsSubmenu","canDispatchCustomEventRef","React","useRef","throttleDispatchTimerRef","restoreFocusSourceAttributes","useRestoreFocusSource","dir","useFluent","CloseArrowKey","ArrowLeft","ArrowRight","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","dispatchMenuEnterEvent","setTimeout","useEffect","clearTimeout","_useMenuContext_unstable","inline","mountNode","rootProps","slot","always","getIntrinsicElementProps","role","useMergedRefs","elementType","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","useEventCallback","event","keyboard","type","key","Escape","_popoverRef_current","contains","target","isDefaultPrevented","preventDefault","Tab","_triggerRef_current","focus","components","root"],"mappings":"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"}
+{"version":3,"sources":["useMenuPopover.js"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\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 * 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 */ export const useMenuPopover_unstable = (props, ref)=>{\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 throttleDispatchTimerRef = React.useRef(0);\n    const restoreFocusSourceAttributes = useRestoreFocusSource();\n    const { dir } = useFluent();\n    const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\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((node)=>{\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, e);\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore #16889 Node setTimeout type leaking\n                    throttleDispatchTimerRef.current = setTimeout(()=>canDispatchCustomEventRef.current = true, 250);\n                }\n            });\n        }\n    }, [\n        popoverRef,\n        throttleDispatchTimerRef\n    ]);\n    React.useEffect(()=>{\n        ()=>clearTimeout(throttleDispatchTimerRef.current);\n    }, []);\n    var _useMenuContext_unstable;\n    const inline = (_useMenuContext_unstable = useMenuContext_unstable((context)=>context.inline)) !== null && _useMenuContext_unstable !== void 0 ? _useMenuContext_unstable : false;\n    const mountNode = useMenuContext_unstable((context)=>context.mountNode);\n    const rootProps = slot.always(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)\n    }), {\n        elementType: 'div'\n    });\n    const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n    rootProps.onMouseEnter = useEventCallback((event)=>{\n        if (openOnHover || isSubmenu) {\n            setOpen(event, {\n                open: true,\n                keyboard: false,\n                type: 'menuPopoverMouseEnter',\n                event\n            });\n        }\n        onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);\n    });\n    rootProps.onKeyDown = useEventCallback((event)=>{\n        const key = event.key;\n        if (key === Escape || isSubmenu && key === CloseArrowKey) {\n            var _popoverRef_current;\n            if (open && ((_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.contains(event.target)) && !event.isDefaultPrevented()) {\n                setOpen(event, {\n                    open: false,\n                    keyboard: true,\n                    type: 'menuPopoverKeyDown',\n                    event\n                });\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, {\n                open: false,\n                keyboard: true,\n                type: 'menuPopoverKeyDown',\n                event\n            });\n            if (!isSubmenu) {\n                var _triggerRef_current;\n                (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n            }\n        }\n        onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);\n    });\n    return {\n        inline,\n        mountNode,\n        components: {\n            root: 'div'\n        },\n        root: rootProps\n    };\n};\n"],"names":["useMenuPopover_unstable","props","ref","popoverRef","useMenuContext_unstable","context","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","useIsSubmenu","canDispatchCustomEventRef","React","useRef","throttleDispatchTimerRef","restoreFocusSourceAttributes","useRestoreFocusSource","dir","useFluent","CloseArrowKey","ArrowLeft","ArrowRight","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","dispatchMenuEnterEvent","setTimeout","useEffect","clearTimeout","_useMenuContext_unstable","inline","mountNode","rootProps","slot","always","getIntrinsicElementProps","role","useMergedRefs","elementType","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","useEventCallback","event","keyboard","type","key","Escape","_popoverRef_current","contains","target","isDefaultPrevented","preventDefault","Tab","_triggerRef_current","focus","components","root"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-menu",
-  "version": "9.12.50",
+  "version": "9.13.0",
   "description": "Fluent UI menu component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,16 +37,16 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-aria": "^9.8.2",
-    "@fluentui/react-context-selector": "^9.1.51",
+    "@fluentui/react-aria": "^9.9.0",
+    "@fluentui/react-context-selector": "^9.1.52",
     "@fluentui/react-icons": "^2.0.224",
-    "@fluentui/react-portal": "^9.4.13",
-    "@fluentui/react-positioning": "^9.13.3",
+    "@fluentui/react-portal": "^9.4.14",
+    "@fluentui/react-positioning": "^9.13.4",
     "@fluentui/react-shared-contexts": "^9.14.0",
-    "@fluentui/react-tabster": "^9.19.0",
+    "@fluentui/react-tabster": "^9.19.1",
     "@fluentui/react-theme": "^9.1.16",
-    "@fluentui/react-utilities": "^9.18.0",
-    "@fluentui/react-jsx-runtime": "^9.0.29",
+    "@fluentui/react-utilities": "^9.18.1",
+    "@fluentui/react-jsx-runtime": "^9.0.30",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },