@fluentui/react-menu 0.0.0-nightly-20230724-0415.1 → 0.0.0-nightly-20230726-0415.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-menu",
   "entries": [
     {
-      "date": "Mon, 24 Jul 2023 04:21:51 GMT",
-      "tag": "@fluentui/react-menu_v0.0.0-nightly-20230724-0415.1",
-      "version": "0.0.0-nightly-20230724-0415.1",
+      "date": "Wed, 26 Jul 2023 04:22:01 GMT",
+      "tag": "@fluentui/react-menu_v0.0.0-nightly-20230726-0415.1",
+      "version": "0.0.0-nightly-20230726-0415.1",
       "comments": {
         "prerelease": [
           {
@@ -16,74 +16,107 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230724-0415.1",
-            "commit": "5d700930cd6b571365e6cfcb177dbab34c39cbf0"
+            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230726-0415.1",
+            "commit": "e38637401bb1ed42fefca7e7d8edc2fa0727f765"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20230724-0415.1",
-            "commit": "5d700930cd6b571365e6cfcb177dbab34c39cbf0"
+            "comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20230726-0415.1",
+            "commit": "e38637401bb1ed42fefca7e7d8edc2fa0727f765"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230724-0415.1",
-            "commit": "5d700930cd6b571365e6cfcb177dbab34c39cbf0"
+            "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230726-0415.1",
+            "commit": "e38637401bb1ed42fefca7e7d8edc2fa0727f765"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-portal to v0.0.0-nightly-20230724-0415.1",
-            "commit": "5d700930cd6b571365e6cfcb177dbab34c39cbf0"
+            "comment": "Bump @fluentui/react-portal to v0.0.0-nightly-20230726-0415.1",
+            "commit": "e38637401bb1ed42fefca7e7d8edc2fa0727f765"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-positioning to v0.0.0-nightly-20230724-0415.1",
-            "commit": "5d700930cd6b571365e6cfcb177dbab34c39cbf0"
+            "comment": "Bump @fluentui/react-positioning to v0.0.0-nightly-20230726-0415.1",
+            "commit": "e38637401bb1ed42fefca7e7d8edc2fa0727f765"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230724-0415.1",
-            "commit": "5d700930cd6b571365e6cfcb177dbab34c39cbf0"
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230726-0415.1",
+            "commit": "e38637401bb1ed42fefca7e7d8edc2fa0727f765"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230724-0415.1",
-            "commit": "5d700930cd6b571365e6cfcb177dbab34c39cbf0"
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230726-0415.1",
+            "commit": "e38637401bb1ed42fefca7e7d8edc2fa0727f765"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230724-0415.1",
-            "commit": "5d700930cd6b571365e6cfcb177dbab34c39cbf0"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230726-0415.1",
+            "commit": "e38637401bb1ed42fefca7e7d8edc2fa0727f765"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230724-0415.1",
-            "commit": "5d700930cd6b571365e6cfcb177dbab34c39cbf0"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230726-0415.1",
+            "commit": "e38637401bb1ed42fefca7e7d8edc2fa0727f765"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230724-0415.1",
-            "commit": "5d700930cd6b571365e6cfcb177dbab34c39cbf0"
+            "comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230726-0415.1",
+            "commit": "e38637401bb1ed42fefca7e7d8edc2fa0727f765"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-conformance to v0.0.0-nightly-20230724-0415.1",
-            "commit": "5d700930cd6b571365e6cfcb177dbab34c39cbf0"
+            "comment": "Bump @fluentui/react-conformance to v0.0.0-nightly-20230726-0415.1",
+            "commit": "e38637401bb1ed42fefca7e7d8edc2fa0727f765"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230724-0415.1",
-            "commit": "5d700930cd6b571365e6cfcb177dbab34c39cbf0"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230726-0415.1",
+            "commit": "e38637401bb1ed42fefca7e7d8edc2fa0727f765"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 25 Jul 2023 13:29:19 GMT",
+      "tag": "@fluentui/react-menu_v9.11.1",
+      "version": "9.11.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "lingfan.gao@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2",
+            "comment": "refactor: Remove custom focus code in favour of useRestoreFocus hooks"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-portal to v9.3.3",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,29 +1,41 @@
 # Change Log - @fluentui/react-menu
 
-This log was last generated on Mon, 24 Jul 2023 04:21:51 GMT and should not be manually modified.
+This log was last generated on Wed, 26 Jul 2023 04:22:01 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230724-0415.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v0.0.0-nightly-20230724-0415.1)
+## [0.0.0-nightly-20230726-0415.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v0.0.0-nightly-20230726-0415.1)
 
-Mon, 24 Jul 2023 04:21:51 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.11.0..@fluentui/react-menu_v0.0.0-nightly-20230724-0415.1)
+Wed, 26 Jul 2023 04:22:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.11.1..@fluentui/react-menu_v0.0.0-nightly-20230726-0415.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230724-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/5d700930cd6b571365e6cfcb177dbab34c39cbf0) by beachball)
-- Bump @fluentui/react-aria to v0.0.0-nightly-20230724-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/5d700930cd6b571365e6cfcb177dbab34c39cbf0) by beachball)
-- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230724-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/5d700930cd6b571365e6cfcb177dbab34c39cbf0) by beachball)
-- Bump @fluentui/react-portal to v0.0.0-nightly-20230724-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/5d700930cd6b571365e6cfcb177dbab34c39cbf0) by beachball)
-- Bump @fluentui/react-positioning to v0.0.0-nightly-20230724-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/5d700930cd6b571365e6cfcb177dbab34c39cbf0) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230724-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/5d700930cd6b571365e6cfcb177dbab34c39cbf0) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20230724-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/5d700930cd6b571365e6cfcb177dbab34c39cbf0) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230724-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/5d700930cd6b571365e6cfcb177dbab34c39cbf0) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230724-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/5d700930cd6b571365e6cfcb177dbab34c39cbf0) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230724-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/5d700930cd6b571365e6cfcb177dbab34c39cbf0) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20230724-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/5d700930cd6b571365e6cfcb177dbab34c39cbf0) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230724-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/5d700930cd6b571365e6cfcb177dbab34c39cbf0) by beachball)
+- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230726-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/e38637401bb1ed42fefca7e7d8edc2fa0727f765) by beachball)
+- Bump @fluentui/react-aria to v0.0.0-nightly-20230726-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/e38637401bb1ed42fefca7e7d8edc2fa0727f765) by beachball)
+- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230726-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/e38637401bb1ed42fefca7e7d8edc2fa0727f765) by beachball)
+- Bump @fluentui/react-portal to v0.0.0-nightly-20230726-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/e38637401bb1ed42fefca7e7d8edc2fa0727f765) by beachball)
+- Bump @fluentui/react-positioning to v0.0.0-nightly-20230726-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/e38637401bb1ed42fefca7e7d8edc2fa0727f765) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230726-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/e38637401bb1ed42fefca7e7d8edc2fa0727f765) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20230726-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/e38637401bb1ed42fefca7e7d8edc2fa0727f765) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230726-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/e38637401bb1ed42fefca7e7d8edc2fa0727f765) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230726-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/e38637401bb1ed42fefca7e7d8edc2fa0727f765) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230726-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/e38637401bb1ed42fefca7e7d8edc2fa0727f765) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20230726-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/e38637401bb1ed42fefca7e7d8edc2fa0727f765) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230726-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/e38637401bb1ed42fefca7e7d8edc2fa0727f765) by beachball)
+
+## [9.11.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.11.1)
+
+Tue, 25 Jul 2023 13:29:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.11.0..@fluentui/react-menu_v9.11.1)
+
+### Patches
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- refactor: Remove custom focus code in favour of useRestoreFocus hooks ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by lingfan.gao@microsoft.com)
+- Bump @fluentui/react-portal to v9.3.3 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
 
 ## [9.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.11.0)
 

package/dist/index.d.ts

@@ -329,6 +329,10 @@ export declare type MenuListState = ComponentState<MenuListSlots> & Required<Pic
      */
     setFocusByFirstCharacter: NonNullable<MenuListContextValue['setFocusByFirstCharacter']>;
     toggleCheckbox: SelectableHandler;
+    /**
+     * States if the MenuList is inside MenuContext
+     */
+    hasMenuContext?: boolean;
 };
 
 /**

package/lib/components/Menu/useMenu.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { usePositioningMouseTarget, usePositioning, resolvePositioningShorthand } from '@fluentui/react-positioning';
-import { useControllableState, useId, useOnClickOutside, useEventCallback, useOnScrollOutside, useFirstMount } from '@fluentui/react-utilities';
+import { useControllableState, useId, useOnClickOutside, useEventCallback, useOnScrollOutside } from '@fluentui/react-utilities';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { elementContains } from '@fluentui/react-portal';
 import { useFocusFinders } from '@fluentui/react-tabster';
@@ -239,33 +239,13 @@ const useMenuOpenState = (state)=>{
         findFirstFocusable,
         state.menuPopoverRef
     ]);
-    const firstMount = useFirstMount();
     React.useEffect(()=>{
         if (open) {
             focusFirst();
-        } else {
-            if (!firstMount) {
-                if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body)) {
-                    var // We know that React effects are sync so we focus the trigger here
-                    // after any event handler (event handlers will update state and re-render).
-                    // Since the browser only performs the default behaviour for the Tab key once
-                    // keyboard events have fully bubbled up the window, the browser will move
-                    // focus to the next tabbable element before/after the trigger if needed.
-                    // If the Tab key was not pressed, focus will remain on the trigger as expected.
-                    _state_triggerRef_current;
-                    (_state_triggerRef_current = state.triggerRef.current) === null || _state_triggerRef_current === void 0 ? void 0 : _state_triggerRef_current.focus();
-                }
-            }
         }
-    // firstMount change should not re-run this effect
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
-        state.triggerRef,
-        state.isSubmenu,
         open,
-        focusFirst,
-        targetDocument,
-        state.menuPopoverRef
+        focusFirst
     ]);
     return [
         open,

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  usePositioningMouseTarget,\n  usePositioning,\n  resolvePositioningShorthand,\n  PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n  useControllableState,\n  useId,\n  useOnClickOutside,\n  useEventCallback,\n  useOnScrollOutside,\n  useFirstMount,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuOpenChangeData, MenuOpenEvent, MenuProps, MenuState } from './Menu.types';\n\n// If it's not possible to position the submenu in smaller viewports, try\n// and fallback to this order of positions\nconst submenuFallbackPositions: PositioningShorthandValue[] = [\n  'after',\n  'after-bottom',\n  'before-top',\n  'before',\n  'before-bottom',\n  'above',\n];\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n  const isSubmenu = useIsSubmenu();\n  const {\n    hoverDelay = 500,\n    inline = false,\n    hasCheckmarks = false,\n    hasIcons = false,\n    closeOnScroll = false,\n    openOnContext = false,\n    persistOnItemClick = false,\n    openOnHover = isSubmenu,\n    defaultCheckedValues,\n    mountNode = null,\n  } = props;\n  const triggerId = useId('menu');\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n  const positioningState = {\n    position: isSubmenu ? 'after' : 'below',\n    align: isSubmenu ? 'top' : 'start',\n    target: props.openOnContext ? contextTarget : undefined,\n    fallbackPositions: isSubmenu ? submenuFallbackPositions : undefined,\n    ...resolvePositioningShorthand(props.positioning),\n  } as const;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Menu must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Menu must contain at most two children');\n    }\n  }\n\n  let menuTrigger: React.ReactElement | undefined = undefined;\n  let menuPopover: React.ReactElement | undefined = undefined;\n  if (children.length === 2) {\n    menuTrigger = children[0];\n    menuPopover = children[1];\n  } else if (children.length === 1) {\n    menuPopover = children[0];\n  }\n\n  const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n  // TODO Better way to narrow types ?\n  const [open, setOpen] = useMenuOpenState({\n    hoverDelay,\n    isSubmenu,\n    setContextTarget,\n    closeOnScroll,\n    menuPopoverRef,\n    triggerRef,\n    open: props.open,\n    defaultOpen: props.defaultOpen,\n    onOpenChange: props.onOpenChange,\n    openOnContext,\n  });\n\n  const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\n\n  return {\n    inline,\n    hoverDelay,\n    triggerId,\n    isSubmenu,\n    openOnHover,\n    contextTarget,\n    setContextTarget,\n    hasCheckmarks,\n    hasIcons,\n    closeOnScroll,\n    menuTrigger,\n    menuPopover,\n    mountNode,\n    triggerRef,\n    menuPopoverRef,\n    components: {},\n    openOnContext,\n    open,\n    setOpen,\n    checkedValues,\n    onCheckedValueChange,\n    persistOnItemClick,\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n  props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues,\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n  const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    props.onCheckedValueChange?.(e, { name, checkedItems });\n\n    setCheckedValues(currentValue => ({\n      ...currentValue,\n      [name]: checkedItems,\n    }));\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n  state: Pick<\n    MenuState,\n    | 'isSubmenu'\n    | 'menuPopoverRef'\n    | 'setContextTarget'\n    | 'triggerRef'\n    | 'openOnContext'\n    | 'closeOnScroll'\n    | 'hoverDelay'\n  > &\n    Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n  const { targetDocument } = useFluent();\n  const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n  const onOpenChange: MenuProps['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const setOpenTimeout = React.useRef(0);\n  const enteringTriggerRef = React.useRef(false);\n\n  const [open, setOpenState] = useControllableState({\n    state: state.open,\n    defaultState: state.defaultOpen,\n    initialState: false,\n  });\n\n  const trySetOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n    const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n    onOpenChange?.(event, { ...data });\n    if (data.open && e.type === 'contextmenu') {\n      state.setContextTarget(e as React.MouseEvent);\n    }\n\n    if (!data.open) {\n      state.setContextTarget(undefined);\n    }\n\n    if (data.bubble) {\n      parentSetOpen(e, { ...data });\n    }\n\n    setOpenState(data.open);\n  });\n\n  const setOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n    clearTimeout(setOpenTimeout.current);\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n      if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n        enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n      }\n\n      // FIXME leaking Node timeout type\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      setOpenTimeout.current = setTimeout(() => trySetOpen(e, data), state.hoverDelay);\n    } else {\n      trySetOpen(e, data);\n    }\n  });\n\n  useOnClickOutside({\n    contains: elementContains,\n    disabled: !open,\n    element: targetDocument,\n    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n      Boolean,\n    ) as React.MutableRefObject<HTMLElement>[],\n    callback: event => setOpen(event, { open: false, type: 'clickOutside', event }),\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = state.openOnContext || state.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }),\n    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n      Boolean,\n    ) as React.MutableRefObject<HTMLElement>[],\n    disabled: !open || !closeOnScroll,\n  });\n\n  useOnMenuMouseEnter({\n    element: targetDocument,\n    callback: event => {\n      // When moving from a menu directly back to its trigger, this handler can close the menu\n      // Explicitly check a flag to see if this situation happens\n      if (!enteringTriggerRef.current) {\n        setOpen(event, { open: false, type: 'menuMouseEnter', event });\n      }\n    },\n    disabled: !open,\n    refs: [state.menuPopoverRef],\n  });\n\n  // Clear timeout on unmount\n  // Setting state after a component unmounts can cause memory leaks\n  React.useEffect(() => {\n    return () => {\n      clearTimeout(setOpenTimeout.current);\n    };\n  }, []);\n\n  // Manage focus for open state\n  const { findFirstFocusable } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, state.menuPopoverRef]);\n\n  const firstMount = useFirstMount();\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    } else {\n      if (!firstMount) {\n        if (targetDocument?.activeElement === targetDocument?.body) {\n          // We know that React effects are sync so we focus the trigger here\n          // after any event handler (event handlers will update state and re-render).\n          // Since the browser only performs the default behaviour for the Tab key once\n          // keyboard events have fully bubbled up the window, the browser will move\n          // focus to the next tabbable element before/after the trigger if needed.\n          // If the Tab key was not pressed, focus will remain on the trigger as expected.\n          state.triggerRef.current?.focus();\n        }\n      }\n    }\n    // firstMount change should not re-run this effect\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef]);\n\n  return [open, setOpen] as const;\n};\n"],"names":["React","usePositioningMouseTarget","usePositioning","resolvePositioningShorthand","useControllableState","useId","useOnClickOutside","useEventCallback","useOnScrollOutside","useFirstMount","useFluent_unstable","useFluent","elementContains","useFocusFinders","useMenuContext_unstable","MENU_ENTER_EVENT","useOnMenuMouseEnter","useIsSubmenu","submenuFallbackPositions","useMenu_unstable","props","isSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","mountNode","triggerId","contextTarget","setContextTarget","positioningState","position","align","target","undefined","fallbackPositions","positioning","children","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","triggerRef","containerRef","menuPopoverRef","open","setOpen","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","setCheckedValues","state","defaultState","initialState","e","name","checkedItems","currentValue","targetDocument","parentSetOpen","context","data","setOpenTimeout","useRef","enteringTriggerRef","setOpenState","trySetOpen","event","CustomEvent","type","detail","nativeEvent","bubble","clearTimeout","current","Event","persist","contains","setTimeout","disabled","element","refs","filter","Boolean","callback","useEffect","findFirstFocusable","focusFirst","useCallback","firstFocusable","focus","firstMount","activeElement","body"],"mappings":"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"}
+{"version":3,"sources":["useMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  usePositioningMouseTarget,\n  usePositioning,\n  resolvePositioningShorthand,\n  PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n  useControllableState,\n  useId,\n  useOnClickOutside,\n  useEventCallback,\n  useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuOpenChangeData, MenuOpenEvent, MenuProps, MenuState } from './Menu.types';\n\n// If it's not possible to position the submenu in smaller viewports, try\n// and fallback to this order of positions\nconst submenuFallbackPositions: PositioningShorthandValue[] = [\n  'after',\n  'after-bottom',\n  'before-top',\n  'before',\n  'before-bottom',\n  'above',\n];\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n  const isSubmenu = useIsSubmenu();\n  const {\n    hoverDelay = 500,\n    inline = false,\n    hasCheckmarks = false,\n    hasIcons = false,\n    closeOnScroll = false,\n    openOnContext = false,\n    persistOnItemClick = false,\n    openOnHover = isSubmenu,\n    defaultCheckedValues,\n    mountNode = null,\n  } = props;\n  const triggerId = useId('menu');\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n  const positioningState = {\n    position: isSubmenu ? 'after' : 'below',\n    align: isSubmenu ? 'top' : 'start',\n    target: props.openOnContext ? contextTarget : undefined,\n    fallbackPositions: isSubmenu ? submenuFallbackPositions : undefined,\n    ...resolvePositioningShorthand(props.positioning),\n  } as const;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Menu must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Menu must contain at most two children');\n    }\n  }\n\n  let menuTrigger: React.ReactElement | undefined = undefined;\n  let menuPopover: React.ReactElement | undefined = undefined;\n  if (children.length === 2) {\n    menuTrigger = children[0];\n    menuPopover = children[1];\n  } else if (children.length === 1) {\n    menuPopover = children[0];\n  }\n\n  const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n  // TODO Better way to narrow types ?\n  const [open, setOpen] = useMenuOpenState({\n    hoverDelay,\n    isSubmenu,\n    setContextTarget,\n    closeOnScroll,\n    menuPopoverRef,\n    triggerRef,\n    open: props.open,\n    defaultOpen: props.defaultOpen,\n    onOpenChange: props.onOpenChange,\n    openOnContext,\n  });\n\n  const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\n\n  return {\n    inline,\n    hoverDelay,\n    triggerId,\n    isSubmenu,\n    openOnHover,\n    contextTarget,\n    setContextTarget,\n    hasCheckmarks,\n    hasIcons,\n    closeOnScroll,\n    menuTrigger,\n    menuPopover,\n    mountNode,\n    triggerRef,\n    menuPopoverRef,\n    components: {},\n    openOnContext,\n    open,\n    setOpen,\n    checkedValues,\n    onCheckedValueChange,\n    persistOnItemClick,\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n  props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues,\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n  const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    props.onCheckedValueChange?.(e, { name, checkedItems });\n\n    setCheckedValues(currentValue => ({\n      ...currentValue,\n      [name]: checkedItems,\n    }));\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n  state: Pick<\n    MenuState,\n    | 'isSubmenu'\n    | 'menuPopoverRef'\n    | 'setContextTarget'\n    | 'triggerRef'\n    | 'openOnContext'\n    | 'closeOnScroll'\n    | 'hoverDelay'\n  > &\n    Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n  const { targetDocument } = useFluent();\n  const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n  const onOpenChange: MenuProps['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const setOpenTimeout = React.useRef(0);\n  const enteringTriggerRef = React.useRef(false);\n\n  const [open, setOpenState] = useControllableState({\n    state: state.open,\n    defaultState: state.defaultOpen,\n    initialState: false,\n  });\n\n  const trySetOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n    const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n    onOpenChange?.(event, { ...data });\n    if (data.open && e.type === 'contextmenu') {\n      state.setContextTarget(e as React.MouseEvent);\n    }\n\n    if (!data.open) {\n      state.setContextTarget(undefined);\n    }\n\n    if (data.bubble) {\n      parentSetOpen(e, { ...data });\n    }\n\n    setOpenState(data.open);\n  });\n\n  const setOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n    clearTimeout(setOpenTimeout.current);\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n      if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n        enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n      }\n\n      // FIXME leaking Node timeout type\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      setOpenTimeout.current = setTimeout(() => trySetOpen(e, data), state.hoverDelay);\n    } else {\n      trySetOpen(e, data);\n    }\n  });\n\n  useOnClickOutside({\n    contains: elementContains,\n    disabled: !open,\n    element: targetDocument,\n    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n      Boolean,\n    ) as React.MutableRefObject<HTMLElement>[],\n    callback: event => setOpen(event, { open: false, type: 'clickOutside', event }),\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = state.openOnContext || state.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }),\n    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n      Boolean,\n    ) as React.MutableRefObject<HTMLElement>[],\n    disabled: !open || !closeOnScroll,\n  });\n\n  useOnMenuMouseEnter({\n    element: targetDocument,\n    callback: event => {\n      // When moving from a menu directly back to its trigger, this handler can close the menu\n      // Explicitly check a flag to see if this situation happens\n      if (!enteringTriggerRef.current) {\n        setOpen(event, { open: false, type: 'menuMouseEnter', event });\n      }\n    },\n    disabled: !open,\n    refs: [state.menuPopoverRef],\n  });\n\n  // Clear timeout on unmount\n  // Setting state after a component unmounts can cause memory leaks\n  React.useEffect(() => {\n    return () => {\n      clearTimeout(setOpenTimeout.current);\n    };\n  }, []);\n\n  // Manage focus for open state\n  const { findFirstFocusable } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, state.menuPopoverRef]);\n\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    }\n  }, [open, focusFirst]);\n\n  return [open, setOpen] as const;\n};\n"],"names":["React","usePositioningMouseTarget","usePositioning","resolvePositioningShorthand","useControllableState","useId","useOnClickOutside","useEventCallback","useOnScrollOutside","useFluent_unstable","useFluent","elementContains","useFocusFinders","useMenuContext_unstable","MENU_ENTER_EVENT","useOnMenuMouseEnter","useIsSubmenu","submenuFallbackPositions","useMenu_unstable","props","isSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","mountNode","triggerId","contextTarget","setContextTarget","positioningState","position","align","target","undefined","fallbackPositions","positioning","children","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","triggerRef","containerRef","menuPopoverRef","open","setOpen","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","setCheckedValues","state","defaultState","initialState","e","name","checkedItems","currentValue","targetDocument","parentSetOpen","context","data","setOpenTimeout","useRef","enteringTriggerRef","setOpenState","trySetOpen","event","CustomEvent","type","detail","nativeEvent","bubble","clearTimeout","current","Event","persist","contains","setTimeout","disabled","element","refs","filter","Boolean","callback","useEffect","findFirstFocusable","focusFirst","useCallback","firstFocusable","focus"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,yBAAyB,EACzBC,cAAc,EACdC,2BAA2B,QAEtB,8BAA8B;AACrC,SACEC,oBAAoB,EACpBC,KAAK,EACLC,iBAAiB,EACjBC,gBAAgB,EAChBC,kBAAkB,QACb,4BAA4B;AACnC,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,eAAe,QAAQ,yBAAyB;AACzD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,gBAAgB,EAAEC,mBAAmB,QAAQ,oBAAoB;AAC1E,SAASC,YAAY,QAAQ,2BAA2B;AAGxD,yEAAyE;AACzE,0CAA0C;AAC1C,MAAMC,2BAAwD;IAC5D;IACA;IACA;IACA;IACA;IACA;CACD;AAED;;;;;;;CAOC,GACD,OAAO,MAAMC,mBAAmB,CAACC,QAAgC;IAC/D,MAAMC,YAAYJ;IAClB,MAAM,EACJK,YAAa,IAAG,EAChBC,QAAS,KAAK,CAAA,EACdC,eAAgB,KAAK,CAAA,EACrBC,UAAW,KAAK,CAAA,EAChBC,eAAgB,KAAK,CAAA,EACrBC,eAAgB,KAAK,CAAA,EACrBC,oBAAqB,KAAK,CAAA,EAC1BC,aAAcR,UAAS,EACvBS,qBAAoB,EACpBC,WAAY,IAAI,CAAA,EACjB,GAAGX;IACJ,MAAMY,YAAY1B,MAAM;IACxB,MAAM,CAAC2B,eAAeC,iBAAiB,GAAGhC;IAE1C,MAAMiC,mBAAmB;QACvBC,UAAUf,YAAY,UAAU,OAAO;QACvCgB,OAAOhB,YAAY,QAAQ,OAAO;QAClCiB,QAAQlB,MAAMO,aAAa,GAAGM,gBAAgBM,SAAS;QACvDC,mBAAmBnB,YAAYH,2BAA2BqB,SAAS;QACnE,GAAGnC,4BAA4BgB,MAAMqB,WAAW,CAAC;IACnD;IAEA,MAAMC,WAAWzC,MAAM0C,QAAQ,CAACC,OAAO,CAACxB,MAAMsB,QAAQ;IAEtD,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIL,SAASM,MAAM,KAAK,GAAG;YACzB,sCAAsC;YACtCC,QAAQC,IAAI,CAAC;QACf,CAAC;QAED,IAAIR,SAASM,MAAM,GAAG,GAAG;YACvB,sCAAsC;YACtCC,QAAQC,IAAI,CAAC;QACf,CAAC;IACH,CAAC;IAED,IAAIC,cAA8CZ;IAClD,IAAIa,cAA8Cb;IAClD,IAAIG,SAASM,MAAM,KAAK,GAAG;QACzBG,cAAcT,QAAQ,CAAC,EAAE;QACzBU,cAAcV,QAAQ,CAAC,EAAE;IAC3B,OAAO,IAAIA,SAASM,MAAM,KAAK,GAAG;QAChCI,cAAcV,QAAQ,CAAC,EAAE;IAC3B,CAAC;IAED,MAAM,EAAEW,WAAWC,WAAU,EAAEC,cAAcC,eAAc,EAAE,GAAGrD,eAAegC;IAE/E,oCAAoC;IACpC,MAAM,CAACsB,MAAMC,QAAQ,GAAGC,iBAAiB;QACvCrC;QACAD;QACAa;QACAR;QACA8B;QACAF;QACAG,MAAMrC,MAAMqC,IAAI;QAChBG,aAAaxC,MAAMwC,WAAW;QAC9BC,cAAczC,MAAMyC,YAAY;QAChClC;IACF;IAEA,MAAM,CAACmC,eAAeC,qBAAqB,GAAGC,uBAAuB;QACnEF,eAAe1C,MAAM0C,aAAa;QAClChC;QACAiC,sBAAsB3C,MAAM2C,oBAAoB;IAClD;IAEA,OAAO;QACLxC;QACAD;QACAU;QACAX;QACAQ;QACAI;QACAC;QACAV;QACAC;QACAC;QACAyB;QACAC;QACArB;QACAuB;QACAE;QACAS,YAAY,CAAC;QACbtC;QACA8B;QACAC;QACAI;QACAC;QACAnC;IACF;AACF,EAAE;AAEF;;;CAGC,GACD,MAAMoC,yBAAyB,CAC7B5C,QACG;IACH,MAAM,CAAC0C,eAAeI,iBAAiB,GAAG7D,qBAAqB;QAC7D8D,OAAO/C,MAAM0C,aAAa;QAC1BM,cAAchD,MAAMU,oBAAoB;QACxCuC,cAAc,CAAC;IACjB;IACA,MAAMN,uBAA0DvD,iBAAiB,CAAC8D,GAAG,EAAEC,KAAI,EAAEC,aAAY,EAAE,GAAK;YAC9GpD;QAAAA,CAAAA,8BAAAA,MAAM2C,oBAAoB,cAA1B3C,yCAAAA,KAAAA,IAAAA,4BAAAA,KAAAA,OAA6BkD,GAAG;YAAEC;YAAMC;QAAa;QAErDN,iBAAiBO,CAAAA,eAAiB,CAAA;gBAChC,GAAGA,YAAY;gBACf,CAACF,KAAK,EAAEC;YACV,CAAA;IACF;IAEA,OAAO;QAACV;QAAeC;KAAqB;AAC9C;AAEA,MAAMJ,mBAAmB,CACvBQ,QAWG;IACH,MAAM,EAAEO,eAAc,EAAE,GAAG/D;IAC3B,MAAMgE,gBAAgB7D,wBAAwB8D,CAAAA,UAAWA,QAAQlB,OAAO;IACxE,MAAMG,eAA0CrD,iBAAiB,CAAC8D,GAAGO;YAASV;QAAAA,OAAAA,CAAAA,sBAAAA,MAAMN,YAAY,cAAlBM,iCAAAA,KAAAA,IAAAA,oBAAAA,KAAAA,OAAqBG,GAAGO;;IAEtG,MAAMC,iBAAiB7E,MAAM8E,MAAM,CAAC;IACpC,MAAMC,qBAAqB/E,MAAM8E,MAAM,CAAC,KAAK;IAE7C,MAAM,CAACtB,MAAMwB,aAAa,GAAG5E,qBAAqB;QAChD8D,OAAOA,MAAMV,IAAI;QACjBW,cAAcD,MAAMP,WAAW;QAC/BS,cAAc,KAAK;IACrB;IAEA,MAAMa,aAAa1E,iBAAiB,CAAC8D,GAAkBO,OAA6B;QAClF,MAAMM,QAAQb,aAAac,eAAed,EAAEe,IAAI,KAAKtE,mBAAmBuD,EAAEgB,MAAM,CAACC,WAAW,GAAGjB,CAAC;QAChGT,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAesB,OAAO;YAAE,GAAGN,IAAI;QAAC;QAChC,IAAIA,KAAKpB,IAAI,IAAIa,EAAEe,IAAI,KAAK,eAAe;YACzClB,MAAMjC,gBAAgB,CAACoC;QACzB,CAAC;QAED,IAAI,CAACO,KAAKpB,IAAI,EAAE;YACdU,MAAMjC,gBAAgB,CAACK;QACzB,CAAC;QAED,IAAIsC,KAAKW,MAAM,EAAE;YACfb,cAAcL,GAAG;gBAAE,GAAGO,IAAI;YAAC;QAC7B,CAAC;QAEDI,aAAaJ,KAAKpB,IAAI;IACxB;IAEA,MAAMC,UAAUlD,iBAAiB,CAAC8D,GAAkBO,OAA6B;QAC/EY,aAAaX,eAAeY,OAAO;QACnC,IAAI,CAAEpB,CAAAA,aAAaqB,KAAI,KAAMrB,EAAEsB,OAAO,EAAE;YACtC,gDAAgD;YAChDtB,EAAEsB,OAAO;QACX,CAAC;QAED,IAAItB,EAAEe,IAAI,KAAK,gBAAgBf,EAAEe,IAAI,KAAK,gBAAgBf,EAAEe,IAAI,KAAK,eAAef,EAAEe,IAAI,KAAKtE,kBAAkB;gBAC3GoD;YAAJ,IAAIA,CAAAA,4BAAAA,MAAMb,UAAU,CAACoC,OAAO,cAAxBvB,uCAAAA,KAAAA,IAAAA,0BAA0B0B,SAASvB,EAAEhC,MAAM,GAAkB;gBAC/D0C,mBAAmBU,OAAO,GAAGpB,EAAEe,IAAI,KAAK,gBAAgBf,EAAEe,IAAI,KAAK;YACrE,CAAC;YAED,kCAAkC;YAClC,6DAA6D;YAC7D,aAAa;YACbP,eAAeY,OAAO,GAAGI,WAAW,IAAMZ,WAAWZ,GAAGO,OAAOV,MAAM7C,UAAU;QACjF,OAAO;YACL4D,WAAWZ,GAAGO;QAChB,CAAC;IACH;IAEAtE,kBAAkB;QAChBsF,UAAUjF;QACVmF,UAAU,CAACtC;QACXuC,SAAStB;QACTuB,MAAM;YAAC9B,MAAMX,cAAc;YAAE,CAACW,MAAMxC,aAAa,IAAIwC,MAAMb,UAAU;SAAC,CAAC4C,MAAM,CAC3EC;QAEFC,UAAUjB,CAAAA,QAASzB,QAAQyB,OAAO;gBAAE1B,MAAM,KAAK;gBAAE4B,MAAM;gBAAgBF;YAAM;IAC/E;IAEA,uEAAuE;IACvE,MAAMzD,gBAAgByC,MAAMxC,aAAa,IAAIwC,MAAMzC,aAAa;IAChEjB,mBAAmB;QACjBoF,UAAUjF;QACVoF,SAAStB;QACT0B,UAAUjB,CAAAA,QAASzB,QAAQyB,OAAO;gBAAE1B,MAAM,KAAK;gBAAE4B,MAAM;gBAAiBF;YAAM;QAC9Ec,MAAM;YAAC9B,MAAMX,cAAc;YAAE,CAACW,MAAMxC,aAAa,IAAIwC,MAAMb,UAAU;SAAC,CAAC4C,MAAM,CAC3EC;QAEFJ,UAAU,CAACtC,QAAQ,CAAC/B;IACtB;IAEAV,oBAAoB;QAClBgF,SAAStB;QACT0B,UAAUjB,CAAAA,QAAS;YACjB,wFAAwF;YACxF,2DAA2D;YAC3D,IAAI,CAACH,mBAAmBU,OAAO,EAAE;gBAC/BhC,QAAQyB,OAAO;oBAAE1B,MAAM,KAAK;oBAAE4B,MAAM;oBAAkBF;gBAAM;YAC9D,CAAC;QACH;QACAY,UAAU,CAACtC;QACXwC,MAAM;YAAC9B,MAAMX,cAAc;SAAC;IAC9B;IAEA,2BAA2B;IAC3B,kEAAkE;IAClEvD,MAAMoG,SAAS,CAAC,IAAM;QACpB,OAAO,IAAM;YACXZ,aAAaX,eAAeY,OAAO;QACrC;IACF,GAAG,EAAE;IAEL,8BAA8B;IAC9B,MAAM,EAAEY,mBAAkB,EAAE,GAAGzF;IAC/B,MAAM0F,aAAatG,MAAMuG,WAAW,CAAC,IAAM;QACzC,MAAMC,iBAAiBH,mBAAmBnC,MAAMX,cAAc,CAACkC,OAAO;QACtEe,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBC,KAAK;IACvB,GAAG;QAACJ;QAAoBnC,MAAMX,cAAc;KAAC;IAE7CvD,MAAMoG,SAAS,CAAC,IAAM;QACpB,IAAI5C,MAAM;YACR8C;QACF,CAAC;IACH,GAAG;QAAC9C;QAAM8C;KAAW;IAErB,OAAO;QAAC9C;QAAMC;KAAQ;AACxB"}

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

@@ -55,6 +55,7 @@ const useStyles = /*#__PURE__*/__styles({
     z189sj: ["f1sgzk6v", "f1bg5zqg"],
     uwmqm3: ["f1bg5zqg", "f1sgzk6v"],
     Bqenvij: "f1d2rq10",
+    sshi5w: "f1nxs5xn",
     mc9l5x: "f22iagw",
     Bt984gj: "f122n59",
     Be2twd7: "fkhj508",
@@ -116,7 +117,7 @@ const useStyles = /*#__PURE__*/__styles({
 }, {
   f: [".ftqa4ok:focus{outline-style:none;}", ".fc1cou1:focus{color:var(--colorNeutralForeground3Hover);}", ".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"],
   i: [".f2hkw1w:focus-visible{outline-style:none;}"],
-  d: [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d2rq10{height:32px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1k6fduh{cursor:pointer;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}", ".f3rmtva{background-color:transparent;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fe5j1ua{font-size:20px;}", ".fez10in{line-height:0;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
+  d: [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d2rq10{height:32px;}", ".f1nxs5xn{min-height:32px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1k6fduh{cursor:pointer;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}", ".f3rmtva{background-color:transparent;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fe5j1ua{font-size:20px;}", ".fez10in{line-height:0;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
   h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fp258yr:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}", ".f1jp5ecu:hover{color:var(--colorNeutralForeground3Hover);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".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);}"],
   m: [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
     m: "(forced-colors: active)"

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","shorthands","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bule8hv","Bjwuhne","Ghsupd","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","qhf8xq","sj55zd","De3pzq","z189sj","uwmqm3","Bqenvij","mc9l5x","Bt984gj","Be2twd7","Bceei9c","i8kkvl","Belr9w4","Jwef8y","Bi91k9c","Bk3fhr4","Bmfj8id","Bg7n49j","famaaq","Bh6795r","t0hwav","a9b677","Bg96gwp","Brf1p80","disabled","eoavqd","Bbusuzp","ze5xyy","Bctn1xl","Bh6z0a4","f","i","d","h","m","useMenuItemStyles_unstable","state","styles","className"],"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\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 useStyles = makeStyles({\n    focusIndicator: createFocusOutlineStyle(),\n    // TODO: this should be extracted to another package\n    root: {\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        position: 'relative',\n        color: tokens.colorNeutralForeground2,\n        backgroundColor: tokens.colorNeutralBackground1,\n        paddingRight: '6px',\n        paddingLeft: '6px',\n        height: '32px',\n        display: 'flex',\n        alignItems: 'center',\n        fontSize: tokens.fontSizeBase300,\n        cursor: 'pointer',\n        ...shorthands.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        userSelect: 'none'\n    },\n    content: {\n        paddingLeft: '2px',\n        paddingRight: '2px',\n        backgroundColor: 'transparent',\n        flexGrow: 1\n    },\n    secondaryContent: {\n        paddingLeft: '2px',\n        paddingRight: '2px',\n        color: tokens.colorNeutralForeground3,\n        ':hover': {\n            color: tokens.colorNeutralForeground3Hover\n        },\n        ':focus': {\n            color: tokens.colorNeutralForeground3Hover\n        }\n    },\n    icon: {\n        width: '20px',\n        height: '20px',\n        fontSize: '20px',\n        lineHeight: 0,\n        alignItems: 'center',\n        display: 'inline-flex',\n        justifyContent: 'center'\n    },\n    submenuIndicator: {\n        width: '20px',\n        height: '20px',\n        fontSize: '20px',\n        lineHeight: 0,\n        alignItems: 'center',\n        display: 'inline-flex',\n        justifyContent: 'center'\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            color: tokens.colorNeutralForegroundDisabled,\n            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        ':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    state.root.className = mergeClasses(menuItemClassNames.root, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && styles.secondaryContent, state.secondaryContent.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n    }\n    if (state.submenuIndicator) {\n        state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, styles.submenuIndicator, state.submenuIndicator.className);\n    }\n    useCheckmarkStyles_unstable(state);\n};\n"],"mappings":"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"}
+{"version":3,"names":["mergeClasses","__styles","shorthands","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bule8hv","Bjwuhne","Ghsupd","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","qhf8xq","sj55zd","De3pzq","z189sj","uwmqm3","Bqenvij","sshi5w","mc9l5x","Bt984gj","Be2twd7","Bceei9c","i8kkvl","Belr9w4","Jwef8y","Bi91k9c","Bk3fhr4","Bmfj8id","Bg7n49j","famaaq","Bh6795r","t0hwav","a9b677","Bg96gwp","Brf1p80","disabled","eoavqd","Bbusuzp","ze5xyy","Bctn1xl","Bh6z0a4","f","i","d","h","m","useMenuItemStyles_unstable","state","styles","className"],"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\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 useStyles = makeStyles({\n    focusIndicator: createFocusOutlineStyle(),\n    // TODO: this should be extracted to another package\n    root: {\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        position: 'relative',\n        color: tokens.colorNeutralForeground2,\n        backgroundColor: tokens.colorNeutralBackground1,\n        paddingRight: '6px',\n        paddingLeft: '6px',\n        height: '32px',\n        minHeight: '32px',\n        display: 'flex',\n        alignItems: 'center',\n        fontSize: tokens.fontSizeBase300,\n        cursor: 'pointer',\n        ...shorthands.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        userSelect: 'none'\n    },\n    content: {\n        paddingLeft: '2px',\n        paddingRight: '2px',\n        backgroundColor: 'transparent',\n        flexGrow: 1\n    },\n    secondaryContent: {\n        paddingLeft: '2px',\n        paddingRight: '2px',\n        color: tokens.colorNeutralForeground3,\n        ':hover': {\n            color: tokens.colorNeutralForeground3Hover\n        },\n        ':focus': {\n            color: tokens.colorNeutralForeground3Hover\n        }\n    },\n    icon: {\n        width: '20px',\n        height: '20px',\n        fontSize: '20px',\n        lineHeight: 0,\n        alignItems: 'center',\n        display: 'inline-flex',\n        justifyContent: 'center'\n    },\n    submenuIndicator: {\n        width: '20px',\n        height: '20px',\n        fontSize: '20px',\n        lineHeight: 0,\n        alignItems: 'center',\n        display: 'inline-flex',\n        justifyContent: 'center'\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            color: tokens.colorNeutralForegroundDisabled,\n            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        ':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    state.root.className = mergeClasses(menuItemClassNames.root, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && styles.secondaryContent, state.secondaryContent.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n    }\n    if (state.submenuIndicator) {\n        state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, styles.submenuIndicator, state.submenuIndicator.className);\n    }\n    useCheckmarkStyles_unstable(state);\n};\n"],"mappings":"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"}

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\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  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/MenuList/useMenuList.js

@@ -117,6 +117,7 @@ import { MenuContext } from '../../contexts/menuContext';
         hasIcons: menuContext.hasIcons || false,
         hasCheckmarks: menuContext.hasCheckmarks || false,
         checkedValues,
+        hasMenuContext,
         setFocusByFirstCharacter,
         selectRadio,
         toggleCheckbox

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  useControllableState,\n  getNativeElementProps,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\nimport type { MenuListProps, MenuListState } from './MenuList.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n  const { findAllFocusable } = useFocusFinders();\n  const menuContext = useMenuContextSelectors();\n  const hasMenuContext = useHasParentContext(MenuContext);\n  const focusAttributes = useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: hasMenuContext } });\n\n  if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n    // TODO throw warnings in development safely\n    // eslint-disable-next-line no-console\n    console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n  }\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const setFocusByFirstCharacter = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n      // TODO use some kind of children registration to reduce dependency on DOM roles\n      const acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];\n      if (!innerRef.current) {\n        return;\n      }\n\n      const menuItems = findAllFocusable(\n        innerRef.current,\n        (el: HTMLElement) => el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')!) !== -1,\n      );\n\n      let startIndex = menuItems.indexOf(itemEl) + 1;\n      if (startIndex === menuItems.length) {\n        startIndex = 0;\n      }\n\n      const firstChars = menuItems.map(menuItem => menuItem.textContent?.charAt(0).toLowerCase());\n      const char = e.key.toLowerCase();\n\n      const getIndexFirstChars = (start: number, firstChar: string) => {\n        for (let i = start; i < firstChars.length; i++) {\n          if (char === firstChars[i]) {\n            return i;\n          }\n        }\n        return -1;\n      };\n\n      // Check remaining slots in the menu\n      let index = getIndexFirstChars(startIndex, char);\n\n      // If not found in remaining slots, check from beginning\n      if (index === -1) {\n        index = getIndexFirstChars(0, char);\n      }\n\n      // If match was found...\n      if (index > -1) {\n        menuItems[index].focus();\n      }\n    },\n    [findAllFocusable],\n  );\n\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues ?? (hasMenuContext ? menuContext.checkedValues : undefined),\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n\n  const handleCheckedValueChange =\n    props.onCheckedValueChange ?? (hasMenuContext ? menuContext.onCheckedValueChange : undefined);\n\n  const toggleCheckbox = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked: boolean) => {\n      const checkedItems = checkedValues?.[name] || [];\n      const newCheckedItems = [...checkedItems];\n      if (checked) {\n        newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n      } else {\n        newCheckedItems.push(value);\n      }\n\n      handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n      setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n    },\n  );\n\n  const selectRadio = useEventCallback((e: React.MouseEvent | React.KeyboardEvent, name: string, value: string) => {\n    const newCheckedItems = [value];\n    setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n    handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'menu',\n      'aria-labelledby': menuContext.triggerId,\n      ...focusAttributes,\n      ...props,\n    }),\n    hasIcons: menuContext.hasIcons || false,\n    hasCheckmarks: menuContext.hasCheckmarks || false,\n    checkedValues,\n    setFocusByFirstCharacter,\n    selectRadio,\n    toggleCheckbox,\n  };\n};\n\n/**\n * Adds some sugar to fetching multiple context selector values\n */\nconst useMenuContextSelectors = () => {\n  const checkedValues = useMenuContext_unstable(context => context.checkedValues);\n  const onCheckedValueChange = useMenuContext_unstable(context => context.onCheckedValueChange);\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const hasIcons = useMenuContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuContext_unstable(context => context.hasCheckmarks);\n\n  return {\n    checkedValues,\n    onCheckedValueChange,\n    triggerId,\n    hasIcons,\n    hasCheckmarks,\n  };\n};\n\n/**\n * Helper function to detect if props and MenuContext values are both used\n */\nconst usingPropsAndMenuContext = (\n  props: MenuListProps,\n  contextValue: ReturnType<typeof useMenuContextSelectors>,\n  hasMenuContext: boolean,\n) => {\n  let isUsingPropsAndContext = false;\n  for (const val in contextValue) {\n    if (props[val as keyof Omit<typeof contextValue, 'hasMenuContext' | 'onCheckedValueChange' | 'triggerId'>]) {\n      isUsingPropsAndContext = true;\n    }\n  }\n\n  return hasMenuContext && isUsingPropsAndContext;\n};\n"],"names":["React","useMergedRefs","useEventCallback","useControllableState","getNativeElementProps","useArrowNavigationGroup","useFocusFinders","useHasParentContext","useMenuContext_unstable","MenuContext","useMenuList_unstable","props","ref","findAllFocusable","menuContext","useMenuContextSelectors","hasMenuContext","focusAttributes","circular","ignoreDefaultKeydown","Tab","usingPropsAndMenuContext","console","warn","innerRef","useRef","setFocusByFirstCharacter","useCallback","e","itemEl","acceptedRoles","current","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","checkedValues","setCheckedValues","state","undefined","defaultState","defaultCheckedValues","initialState","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","role","triggerId","hasIcons","hasCheckmarks","context","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}
+{"version":3,"sources":["useMenuList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  useControllableState,\n  getNativeElementProps,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\nimport type { MenuListProps, MenuListState } from './MenuList.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n  const { findAllFocusable } = useFocusFinders();\n  const menuContext = useMenuContextSelectors();\n  const hasMenuContext = useHasParentContext(MenuContext);\n  const focusAttributes = useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: hasMenuContext } });\n\n  if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n    // TODO throw warnings in development safely\n    // eslint-disable-next-line no-console\n    console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n  }\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const setFocusByFirstCharacter = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n      // TODO use some kind of children registration to reduce dependency on DOM roles\n      const acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];\n      if (!innerRef.current) {\n        return;\n      }\n\n      const menuItems = findAllFocusable(\n        innerRef.current,\n        (el: HTMLElement) => el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')!) !== -1,\n      );\n\n      let startIndex = menuItems.indexOf(itemEl) + 1;\n      if (startIndex === menuItems.length) {\n        startIndex = 0;\n      }\n\n      const firstChars = menuItems.map(menuItem => menuItem.textContent?.charAt(0).toLowerCase());\n      const char = e.key.toLowerCase();\n\n      const getIndexFirstChars = (start: number, firstChar: string) => {\n        for (let i = start; i < firstChars.length; i++) {\n          if (char === firstChars[i]) {\n            return i;\n          }\n        }\n        return -1;\n      };\n\n      // Check remaining slots in the menu\n      let index = getIndexFirstChars(startIndex, char);\n\n      // If not found in remaining slots, check from beginning\n      if (index === -1) {\n        index = getIndexFirstChars(0, char);\n      }\n\n      // If match was found...\n      if (index > -1) {\n        menuItems[index].focus();\n      }\n    },\n    [findAllFocusable],\n  );\n\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues ?? (hasMenuContext ? menuContext.checkedValues : undefined),\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n\n  const handleCheckedValueChange =\n    props.onCheckedValueChange ?? (hasMenuContext ? menuContext.onCheckedValueChange : undefined);\n\n  const toggleCheckbox = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked: boolean) => {\n      const checkedItems = checkedValues?.[name] || [];\n      const newCheckedItems = [...checkedItems];\n      if (checked) {\n        newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n      } else {\n        newCheckedItems.push(value);\n      }\n\n      handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n      setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n    },\n  );\n\n  const selectRadio = useEventCallback((e: React.MouseEvent | React.KeyboardEvent, name: string, value: string) => {\n    const newCheckedItems = [value];\n    setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n    handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'menu',\n      'aria-labelledby': menuContext.triggerId,\n      ...focusAttributes,\n      ...props,\n    }),\n    hasIcons: menuContext.hasIcons || false,\n    hasCheckmarks: menuContext.hasCheckmarks || false,\n    checkedValues,\n    hasMenuContext,\n    setFocusByFirstCharacter,\n    selectRadio,\n    toggleCheckbox,\n  };\n};\n\n/**\n * Adds some sugar to fetching multiple context selector values\n */\nconst useMenuContextSelectors = () => {\n  const checkedValues = useMenuContext_unstable(context => context.checkedValues);\n  const onCheckedValueChange = useMenuContext_unstable(context => context.onCheckedValueChange);\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const hasIcons = useMenuContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuContext_unstable(context => context.hasCheckmarks);\n\n  return {\n    checkedValues,\n    onCheckedValueChange,\n    triggerId,\n    hasIcons,\n    hasCheckmarks,\n  };\n};\n\n/**\n * Helper function to detect if props and MenuContext values are both used\n */\nconst usingPropsAndMenuContext = (\n  props: MenuListProps,\n  contextValue: ReturnType<typeof useMenuContextSelectors>,\n  hasMenuContext: boolean,\n) => {\n  let isUsingPropsAndContext = false;\n  for (const val in contextValue) {\n    if (props[val as keyof Omit<typeof contextValue, 'hasMenuContext' | 'onCheckedValueChange' | 'triggerId'>]) {\n      isUsingPropsAndContext = true;\n    }\n  }\n\n  return hasMenuContext && isUsingPropsAndContext;\n};\n"],"names":["React","useMergedRefs","useEventCallback","useControllableState","getNativeElementProps","useArrowNavigationGroup","useFocusFinders","useHasParentContext","useMenuContext_unstable","MenuContext","useMenuList_unstable","props","ref","findAllFocusable","menuContext","useMenuContextSelectors","hasMenuContext","focusAttributes","circular","ignoreDefaultKeydown","Tab","usingPropsAndMenuContext","console","warn","innerRef","useRef","setFocusByFirstCharacter","useCallback","e","itemEl","acceptedRoles","current","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","checkedValues","setCheckedValues","state","undefined","defaultState","defaultCheckedValues","initialState","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","role","triggerId","hasIcons","hasCheckmarks","context","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}

package/lib/components/MenuList/useMenuListStyles.styles.js

@@ -8,16 +8,19 @@ const useStyles = /*#__PURE__*/__styles({
     Beiy3e4: "f1vx9l62",
     i8kkvl: "f16mnhsx",
     Belr9w4: "fbi42co"
+  },
+  hasMenuContext: {
+    Bqenvij: "f1l02sjl"
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}", ".f1l02sjl{height:100%;}"]
 });
 /**
  * Apply styling to the Menu slots based on the state
  */
 export const useMenuListStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);
+  state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);
   return state;
 };
 //# sourceMappingURL=useMenuListStyles.styles.js.map

package/lib/components/MenuList/useMenuListStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","shorthands","menuListClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","d","useMenuListStyles_unstable","state","styles","className"],"sources":["useMenuListStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nexport const menuListClassNames = {\n    root: 'fui-MenuList'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.gap('2px')\n    }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuListStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,EAAcC,UAAU,QAAQ,gBAAgB;AACrE,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1BO,KAAK,CAACR,IAAI,CAACU,SAAS,GAAGd,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"names":["mergeClasses","__styles","shorthands","menuListClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","hasMenuContext","Bqenvij","d","useMenuListStyles_unstable","state","styles","className"],"sources":["useMenuListStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nexport const menuListClassNames = {\n    root: 'fui-MenuList'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.gap('2px')\n    },\n    hasMenuContext: {\n        height: '100%'\n    }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuListStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,EAAcC,UAAU,QAAQ,gBAAgB;AACrE,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;EAC1BS,KAAK,CAACV,IAAI,CAACY,SAAS,GAAGhB,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACJ,cAAc,IAAIK,MAAM,CAACL,cAAc,EAAEI,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;EAC9I,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/MenuPopover/useMenuPopover.js

@@ -5,6 +5,7 @@ import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { dispatchMenuEnterEvent } from '../../utils/index';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useIsSubmenu } from '../../utils/useIsSubmenu';
+import { useRestoreFocusSource } from '@fluentui/react-tabster';
 /**
  * Create the state required to render MenuPopover.
  *
@@ -18,9 +19,11 @@ import { useIsSubmenu } from '../../utils/useIsSubmenu';
     const setOpen = useMenuContext_unstable((context)=>context.setOpen);
     const open = useMenuContext_unstable((context)=>context.open);
     const openOnHover = useMenuContext_unstable((context)=>context.openOnHover);
+    const triggerRef = useMenuContext_unstable((context)=>context.triggerRef);
     const isSubmenu = useIsSubmenu();
     const canDispatchCustomEventRef = React.useRef(true);
     const throttleDispatchTimerRef = React.useRef(0);
+    const restoreFocusSourceAttributes = useRestoreFocusSource();
     const { dir  } = useFluent();
     const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;
     // use DOM listener since react events propagate up the react tree
@@ -52,6 +55,7 @@ import { useIsSubmenu } from '../../utils/useIsSubmenu';
     const mountNode = useMenuContext_unstable((context)=>context.mountNode);
     const rootProps = getNativeElementProps('div', {
         role: 'presentation',
+        ...restoreFocusSourceAttributes,
         ...props,
         ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef)
     });
@@ -90,6 +94,10 @@ import { useIsSubmenu } from '../../utils/useIsSubmenu';
                 type: 'menuPopoverKeyDown',
                 event
             });
+            if (!isSubmenu) {
+                var _triggerRef_current;
+                (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
+            }
         }
         onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);
     });