@fluentui/react-menu 9.6.0 → 9.6.2

package/CHANGELOG.json

@@ -2,7 +2,69 @@
   "name": "@fluentui/react-menu",
   "entries": [
     {
-      "date": "Mon, 09 Jan 2023 14:31:44 GMT",
+      "date": "Mon, 16 Jan 2023 08:35:40 GMT",
+      "tag": "@fluentui/react-menu_v9.6.2",
+      "version": "9.6.2",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "commit": "64bb45980d68de1219c6b36a7db5363f0a9cff9f",
+            "comment": "chore: migrate to packaged scripts"
+          }
+        ],
+        "patch": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-menu",
+            "commit": "ab5942ae2f6805832d2f6f6dd3b01b293df7ef89",
+            "comment": "fix: Tab should focus the window if trigger is the last focusable element"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-portal to v9.1.1",
+            "commit": "a870d8360e47f3ea03358c4e75e89e08a74845d7"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-positioning to v9.3.8",
+            "commit": "a870d8360e47f3ea03358c4e75e89e08a74845d7"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.1.5",
+            "commit": "a870d8360e47f3ea03358c4e75e89e08a74845d7"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-tabster to v9.3.7",
+            "commit": "a870d8360e47f3ea03358c4e75e89e08a74845d7"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 09 Jan 2023 21:51:23 GMT",
+      "tag": "@fluentui/react-menu_v9.6.1",
+      "version": "9.6.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-menu",
+            "commit": "fb5708446f369a57f48b87a0141d6a651acddbde",
+            "comment": "revert: MenuItem root slot only supports div"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 09 Jan 2023 14:34:57 GMT",
       "tag": "@fluentui/react-menu_v9.6.0",
       "version": "9.6.0",
       "comments": {
@@ -25,37 +87,37 @@
             "author": "beachball",
             "package": "@fluentui/react-menu",
             "comment": "Bump @fluentui/react-aria to v9.3.5",
-            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
             "comment": "Bump @fluentui/react-context-selector to v9.1.5",
-            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
             "comment": "Bump @fluentui/react-portal to v9.1.0",
-            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
             "comment": "Bump @fluentui/react-positioning to v9.3.7",
-            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
             "comment": "Bump @fluentui/react-tabster to v9.3.6",
-            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-menu",
             "comment": "Bump @fluentui/react-utilities to v9.4.0",
-            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
           }
         ],
         "none": [

package/CHANGELOG.md

@@ -1,23 +1,45 @@
 # Change Log - @fluentui/react-menu
 
-This log was last generated on Mon, 09 Jan 2023 14:31:44 GMT and should not be manually modified.
+This log was last generated on Mon, 16 Jan 2023 08:35:40 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.6.2)
+
+Mon, 16 Jan 2023 08:35:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.6.1..@fluentui/react-menu_v9.6.2)
+
+### Patches
+
+- fix: Tab should focus the window if trigger is the last focusable element ([PR #26163](https://github.com/microsoft/fluentui/pull/26163) by lingfangao@hotmail.com)
+- Bump @fluentui/react-portal to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/a870d8360e47f3ea03358c4e75e89e08a74845d7) by beachball)
+- Bump @fluentui/react-positioning to v9.3.8 ([commit](https://github.com/microsoft/fluentui/commit/a870d8360e47f3ea03358c4e75e89e08a74845d7) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.1.5 ([commit](https://github.com/microsoft/fluentui/commit/a870d8360e47f3ea03358c4e75e89e08a74845d7) by beachball)
+- Bump @fluentui/react-tabster to v9.3.7 ([commit](https://github.com/microsoft/fluentui/commit/a870d8360e47f3ea03358c4e75e89e08a74845d7) by beachball)
+
+## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.6.1)
+
+Mon, 09 Jan 2023 21:51:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.6.0..@fluentui/react-menu_v9.6.1)
+
+### Patches
+
+- revert: MenuItem root slot only supports div ([PR #26261](https://github.com/microsoft/fluentui/pull/26261) by lingfangao@hotmail.com)
+
 ## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.6.0)
 
-Mon, 09 Jan 2023 14:31:44 GMT 
+Mon, 09 Jan 2023 14:34:57 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.5.4..@fluentui/react-menu_v9.6.0)
 
 ### Minor changes
 
 - Stops using ARIAButton types for MenuItem root ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by bernardo.sunderhus@gmail.com)
-- Bump @fluentui/react-aria to v9.3.5 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
-- Bump @fluentui/react-context-selector to v9.1.5 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
-- Bump @fluentui/react-portal to v9.1.0 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
-- Bump @fluentui/react-positioning to v9.3.7 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
-- Bump @fluentui/react-tabster to v9.3.6 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
-- Bump @fluentui/react-utilities to v9.4.0 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
+- Bump @fluentui/react-aria to v9.3.5 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.5 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
+- Bump @fluentui/react-portal to v9.1.0 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
+- Bump @fluentui/react-positioning to v9.3.7 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
+- Bump @fluentui/react-tabster to v9.3.6 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
+- Bump @fluentui/react-utilities to v9.4.0 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
 
 ### Patches
 

package/dist/index.d.ts

@@ -193,7 +193,7 @@ export declare type MenuItemSelectableState = MenuItemSelectableProps & {
 };
 
 export declare type MenuItemSlots = {
-    root: Slot<'div', 'button'>;
+    root: Slot<'div'>;
     /**
      * Icon slot rendered before children content
      */
@@ -218,9 +218,7 @@ export declare type MenuItemSlots = {
     secondaryContent?: Slot<'span'>;
 };
 
-export declare type MenuItemState = ComponentState<MenuItemSlots> & Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>> & {
-    isNativeButton: boolean;
-};
+export declare type MenuItemState = ComponentState<MenuItemSlots> & Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;
 
 /**
  * Define a styled MenuList, using the `useMenuList_unstable` hook.

package/lib/components/Menu/useMenu.js

@@ -7,7 +7,6 @@ import { useFocusFinders } from '@fluentui/react-tabster';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';
 import { useIsSubmenu } from '../../utils/useIsSubmenu';
-import { Tab } from '@fluentui/keyboard-keys';
 /**
  * Create the state required to render Menu.
  *
@@ -138,8 +137,6 @@ const useMenuOpenState = state => {
     return (_a = state.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(state, e, data);
   });
   const shouldHandleCloseRef = React.useRef(false);
-  const shouldHandleTabRef = React.useRef(false);
-  const pressedShiftRef = React.useRef(false);
   const setOpenTimeout = React.useRef(0);
   const enteringTriggerRef = React.useRef(false);
   const [open, setOpenState] = useControllableState({
@@ -159,12 +156,6 @@ const useMenuOpenState = state => {
       state.setContextTarget(undefined);
       shouldHandleCloseRef.current = true;
     }
-    if (e.type === 'keydown') {
-      if (e.key === Tab) {
-        shouldHandleTabRef.current = true;
-        pressedShiftRef.current = e.shiftKey;
-      }
-    }
     if (data.bubble) {
       parentSetOpen(e, {
         ...data
@@ -240,39 +231,29 @@ const useMenuOpenState = state => {
   }, []);
   // Manage focus for open state
   const {
-    findFirstFocusable,
-    findNextFocusable,
-    findPrevFocusable
+    findFirstFocusable
   } = useFocusFinders();
   const focusFirst = React.useCallback(() => {
     const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);
     firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
   }, [findFirstFocusable, state.menuPopoverRef]);
-  const focusAfterMenuTrigger = React.useCallback(() => {
-    const nextFocusable = findNextFocusable(state.triggerRef.current);
-    nextFocusable === null || nextFocusable === void 0 ? void 0 : nextFocusable.focus();
-  }, [findNextFocusable, state.triggerRef]);
-  const focusBeforeMenuTrigger = React.useCallback(() => {
-    const prevFocusable = findPrevFocusable(state.triggerRef.current);
-    prevFocusable === null || prevFocusable === void 0 ? void 0 : prevFocusable.focus();
-  }, [findPrevFocusable, state.triggerRef]);
   React.useEffect(() => {
     var _a;
     if (open) {
       focusFirst();
     } else {
       if (shouldHandleCloseRef.current) {
-        if (shouldHandleTabRef.current && !state.isSubmenu) {
-          pressedShiftRef.current ? focusBeforeMenuTrigger() : focusAfterMenuTrigger();
-        } else {
-          (_a = state.triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
+        // 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.
+        (_a = state.triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       }
     }
     shouldHandleCloseRef.current = false;
-    shouldHandleTabRef.current = false;
-    pressedShiftRef.current = false;
-  }, [state.triggerRef, state.isSubmenu, open, focusFirst, focusAfterMenuTrigger, focusBeforeMenuTrigger]);
+  }, [state.triggerRef, state.isSubmenu, open, focusFirst]);
   return [open, setOpen];
 };
 //# sourceMappingURL=useMenu.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuItem/MenuItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuItemSlots = {\n  root: Slot<'div', 'button'>;\n\n  /**\n   * Icon slot rendered before children content\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * A helper slot for alignment when a menu item is used with selectable menuitems\n   * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n   */\n  checkmark?: Slot<'span'>;\n\n  /**\n   * Icon slot that shows the indicator for a submenu\n   */\n  submenuIndicator?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible\n   */\n  content?: Slot<'span'>;\n\n  /**\n   * Secondary content rendered opposite the primary content (e.g Shortcut text)\n   */\n  secondaryContent?: Slot<'span'>;\n};\n\nexport type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {\n  /**\n   * If the menu item is a trigger for a submenu\n   *\n   * @default false\n   */\n  hasSubmenu?: boolean;\n\n  /**\n   * Clicking on the menu item will not dismiss an open menu\n   *\n   * @default false\n   */\n  persistOnClick?: boolean;\n\n  disabled?: boolean;\n  /**\n   * @deprecated this property does nothing.\n   * disabled focusable is by default by simply using `disabled` property\n   */\n  disabledFocusable?: boolean;\n};\n\nexport type MenuItemState = ComponentState<MenuItemSlots> &\n  Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>> & {\n    isNativeButton: boolean;\n  };\n"]}
+{"version":3,"file":"MenuItem.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuItem/MenuItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuItemSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * Icon slot rendered before children content\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * A helper slot for alignment when a menu item is used with selectable menuitems\n   * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n   */\n  checkmark?: Slot<'span'>;\n\n  /**\n   * Icon slot that shows the indicator for a submenu\n   */\n  submenuIndicator?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible\n   */\n  content?: Slot<'span'>;\n\n  /**\n   * Secondary content rendered opposite the primary content (e.g Shortcut text)\n   */\n  secondaryContent?: Slot<'span'>;\n};\n\nexport type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {\n  /**\n   * If the menu item is a trigger for a submenu\n   *\n   * @default false\n   */\n  hasSubmenu?: boolean;\n\n  /**\n   * Clicking on the menu item will not dismiss an open menu\n   *\n   * @default false\n   */\n  persistOnClick?: boolean;\n\n  disabled?: boolean;\n  /**\n   * @deprecated this property does nothing.\n   * disabled focusable is by default by simply using `disabled` property\n   */\n  disabledFocusable?: boolean;\n};\n\nexport type MenuItemState = ComponentState<MenuItemSlots> &\n  Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;\n"]}

package/lib/components/MenuItem/useMenuItem.js

@@ -42,7 +42,6 @@ export const useMenuItem_unstable = (props, ref) => {
       content: 'span',
       secondaryContent: 'span'
     },
-    isNativeButton: as === 'button',
     root: getNativeElementProps(as, useARIAButtonProps(as, {
       role: 'menuitem',
       ...props,

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["React","useEventCallback","resolveShorthand","useMergedRefs","getNativeElementProps","useFluent_unstable","useFluent","useCharacterSearch","useMenuTriggerContext_unstable","ChevronRightFilled","ChevronRightRegular","ChevronLeftFilled","ChevronLeftRegular","bundleIcon","useMenuListContext_unstable","useMenuContext_unstable","useARIAButtonProps","Enter","Space","ChevronRightIcon","ChevronLeftIcon","useMenuItem_unstable","props","ref","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","hasIcons","hasCheckmarks","setOpen","dir","innerRef","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","content","secondaryContent","isNativeButton","role","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseEnter","focus","onClick","open","keyboard","bubble","type","required","defaultProps","children"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, resolveShorthand, useMergedRefs, getNativeElementProps } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n  ChevronRightFilled,\n  ChevronRightRegular,\n  ChevronLeftFilled,\n  ChevronLeftRegular,\n  bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport { ARIAButtonElement, ARIAButtonElementIntersection, useARIAButtonProps } from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n  const isSubmenuTrigger = useMenuTriggerContext_unstable();\n  const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n  const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;\n  const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n\n  const { dir } = useFluent();\n  const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n  const dismissedWithKeyboardRef = React.useRef(false);\n\n  const state: MenuItemState = {\n    hasSubmenu,\n    disabled,\n    persistOnClick,\n    components: {\n      root: 'div',\n      icon: 'span',\n      checkmark: 'span',\n      submenuIndicator: 'span',\n      content: 'span',\n      secondaryContent: 'span',\n    },\n    isNativeButton: as === 'button',\n    root: getNativeElementProps(\n      as,\n      useARIAButtonProps(as, {\n        role: 'menuitem',\n        ...props,\n        disabled: false,\n        disabledFocusable: disabled,\n        ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n        onKeyDown: useEventCallback(event => {\n          props.onKeyDown?.(event);\n          if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n            dismissedWithKeyboardRef.current = true;\n          }\n        }),\n        onMouseEnter: useEventCallback(event => {\n          innerRef.current?.focus();\n\n          props.onMouseEnter?.(event);\n        }),\n        onClick: useEventCallback(event => {\n          if (!hasSubmenu && !persistOnClick) {\n            setOpen(event, {\n              open: false,\n              keyboard: dismissedWithKeyboardRef.current,\n              bubble: true,\n              type: 'menuItemClick',\n              event,\n            });\n            dismissedWithKeyboardRef.current = false;\n          }\n\n          props.onClick?.(event);\n        }),\n      }),\n    ),\n    icon: resolveShorthand(props.icon, { required: hasIcons }),\n    checkmark: resolveShorthand(props.checkmark, { required: hasCheckmarks }),\n    submenuIndicator: resolveShorthand(props.submenuIndicator, {\n      required: hasSubmenu,\n      defaultProps: {\n        children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n      },\n    }),\n    content: resolveShorthand(props.content, {\n      required: !!props.children,\n      defaultProps: { children: props.children },\n    }),\n    secondaryContent: resolveShorthand(props.secondaryContent),\n  };\n  useCharacterSearch(state, innerRef);\n  return state;\n};\n"]}
+{"version":3,"mappings":"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","names":["React","useEventCallback","resolveShorthand","useMergedRefs","getNativeElementProps","useFluent_unstable","useFluent","useCharacterSearch","useMenuTriggerContext_unstable","ChevronRightFilled","ChevronRightRegular","ChevronLeftFilled","ChevronLeftRegular","bundleIcon","useMenuListContext_unstable","useMenuContext_unstable","useARIAButtonProps","Enter","Space","ChevronRightIcon","ChevronLeftIcon","useMenuItem_unstable","props","ref","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","hasIcons","hasCheckmarks","setOpen","dir","innerRef","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","content","secondaryContent","role","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseEnter","focus","onClick","open","keyboard","bubble","type","required","defaultProps","children"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, resolveShorthand, useMergedRefs, getNativeElementProps } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n  ChevronRightFilled,\n  ChevronRightRegular,\n  ChevronLeftFilled,\n  ChevronLeftRegular,\n  bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport { ARIAButtonElement, ARIAButtonElementIntersection, useARIAButtonProps } from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n  const isSubmenuTrigger = useMenuTriggerContext_unstable();\n  const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n  const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;\n  const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n\n  const { dir } = useFluent();\n  const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n  const dismissedWithKeyboardRef = React.useRef(false);\n\n  const state: MenuItemState = {\n    hasSubmenu,\n    disabled,\n    persistOnClick,\n    components: {\n      root: 'div',\n      icon: 'span',\n      checkmark: 'span',\n      submenuIndicator: 'span',\n      content: 'span',\n      secondaryContent: 'span',\n    },\n    root: getNativeElementProps(\n      as,\n      useARIAButtonProps(as, {\n        role: 'menuitem',\n        ...props,\n        disabled: false,\n        disabledFocusable: disabled,\n        ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n        onKeyDown: useEventCallback(event => {\n          props.onKeyDown?.(event);\n          if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n            dismissedWithKeyboardRef.current = true;\n          }\n        }),\n        onMouseEnter: useEventCallback(event => {\n          innerRef.current?.focus();\n\n          props.onMouseEnter?.(event);\n        }),\n        onClick: useEventCallback(event => {\n          if (!hasSubmenu && !persistOnClick) {\n            setOpen(event, {\n              open: false,\n              keyboard: dismissedWithKeyboardRef.current,\n              bubble: true,\n              type: 'menuItemClick',\n              event,\n            });\n            dismissedWithKeyboardRef.current = false;\n          }\n\n          props.onClick?.(event);\n        }),\n      }),\n    ),\n    icon: resolveShorthand(props.icon, { required: hasIcons }),\n    checkmark: resolveShorthand(props.checkmark, { required: hasCheckmarks }),\n    submenuIndicator: resolveShorthand(props.submenuIndicator, {\n      required: hasSubmenu,\n      defaultProps: {\n        children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n      },\n    }),\n    content: resolveShorthand(props.content, {\n      required: !!props.children,\n      defaultProps: { children: props.children },\n    }),\n    secondaryContent: resolveShorthand(props.secondaryContent),\n  };\n  useCharacterSearch(state, innerRef);\n  return state;\n};\n"]}

package/lib/components/MenuItem/useMenuItemStyles.js

@@ -44,26 +44,6 @@ const useStyles = /*#__PURE__*/__styles({
     Ghsupd: ["fq22d5a", "f1jw7pan"],
     Bule8hv: ["f1jw7pan", "fq22d5a"]
   },
-  resetButton: {
-    B7ck84d: "f1e4lqlz",
-    De3pzq: "f1u2r49w",
-    sj55zd: "f1ym3bx4",
-    Bahqtrf: "f1mo0ibp",
-    Be2twd7: "fjoy568",
-    Bg96gwp: "fytdu2e",
-    g2u3we: "f1p3nwhy",
-    h3c5rm: ["f11589ue", "f1pdflbu"],
-    B9xav0g: "f1q5o8ev",
-    zhjwy3: ["f1pdflbu", "f11589ue"],
-    B68tc82: "f1mtd64y",
-    Bmxbyg5: "f1y7q3j9",
-    z8tnut: "f1g0x7ka",
-    z189sj: ["fhxju0i", "f1cnd47f"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["f1cnd47f", "fhxju0i"],
-    Bv0vk6g: "f37px4s",
-    fsow6f: "fgusgyc"
-  },
   root: {
     Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
     Beyfa6y: ["f16jpd5f", "f1aa9q02"],
@@ -127,13 +107,13 @@ 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);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".f1d2rq10{height:32px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1k6fduh{cursor:pointer;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}", ".f3rmtva{background-color:transparent;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fe5j1ua{font-size:20px;}", ".fez10in{line-height:0;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
+  d: [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".f1d2rq10{height:32px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1k6fduh{cursor:pointer;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}", ".f3rmtva{background-color:transparent;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fe5j1ua{font-size:20px;}", ".fez10in{line-height:0;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
   h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fp258yr:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}", ".f1jp5ecu:hover{color:var(--colorNeutralForeground3Hover);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}"]
 });
 /** Applies style classnames to slots */
 export const useMenuItemStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuItemClassNames.root, state.isNativeButton && styles.resetButton, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
+  state.root.className = mergeClasses(menuItemClassNames.root, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
   if (state.content) {
     state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);
   }

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SAASA,YAAY,YAAcC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,2BAA2B,QAAQ,wBAAwB;AAKpE,OAAO,MAAMC,kBAAkB,GAAkC;EAC/DC,IAAI,EAAE,cAAc;EACpBC,IAAI,EAAE,oBAAoB;EAC1BC,SAAS,EAAE,yBAAyB;EACpCC,gBAAgB,EAAE,gCAAgC;EAClDC,OAAO,EAAE,uBAAuB;EAChCC,gBAAgB,EAAE;CACnB;AAED,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA,EA4FhB;AAEF;AACA,OAAO,MAAMC,0BAA0B,GAAIC,KAAoB,IAAI;EACjE,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACR,IAAI,CAACU,SAAS,GAAGlB,YAAY,CACjCO,kBAAkB,CAACC,IAAI,EACvBQ,KAAK,CAACG,cAAc,IAAIF,MAAM,CAACG,WAAW,EAC1CH,MAAM,CAACT,IAAI,EACXS,MAAM,CAACI,cAAc,EACrBL,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACK,QAAQ,EACjCN,KAAK,CAACR,IAAI,CAACU,SAAS,CACrB;EAED,IAAIF,KAAK,CAACJ,OAAO,EAAE;IACjBI,KAAK,CAACJ,OAAO,CAACM,SAAS,GAAGlB,YAAY,CAACO,kBAAkB,CAACK,OAAO,EAAEK,MAAM,CAACL,OAAO,EAAEI,KAAK,CAACJ,OAAO,CAACM,SAAS,CAAC;;EAG7G,IAAIF,KAAK,CAACN,SAAS,EAAE;IACnBM,KAAK,CAACN,SAAS,CAACQ,SAAS,GAAGlB,YAAY,CAACO,kBAAkB,CAACG,SAAS,EAAEM,KAAK,CAACN,SAAS,CAACQ,SAAS,CAAC;;EAGnG,IAAIF,KAAK,CAACH,gBAAgB,EAAE;IAC1BG,KAAK,CAACH,gBAAgB,CAACK,SAAS,GAAGlB,YAAY,CAC7CO,kBAAkB,CAACM,gBAAgB,EACnC,CAACG,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACJ,gBAAgB,EAC1CG,KAAK,CAACH,gBAAgB,CAACK,SAAS,CACjC;;EAGH,IAAIF,KAAK,CAACP,IAAI,EAAE;IACdO,KAAK,CAACP,IAAI,CAACS,SAAS,GAAGlB,YAAY,CAACO,kBAAkB,CAACE,IAAI,EAAEQ,MAAM,CAACR,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACS,SAAS,CAAC;;EAGjG,IAAIF,KAAK,CAACL,gBAAgB,EAAE;IAC1BK,KAAK,CAACL,gBAAgB,CAACO,SAAS,GAAGlB,YAAY,CAC7CO,kBAAkB,CAACI,gBAAgB,EACnCM,MAAM,CAACN,gBAAgB,EACvBK,KAAK,CAACL,gBAAgB,CAACO,SAAS,CACjC;;EAEHZ,2BAA2B,CAACU,KAA8B,CAAC;AAC7D,CAAC","names":["mergeClasses","shorthands","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","useMenuItemStyles_unstable","state","styles","className","isNativeButton","resetButton","focusIndicator","disabled"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n  root: 'fui-MenuItem',\n  icon: 'fui-MenuItem__icon',\n  checkmark: 'fui-MenuItem__checkmark',\n  submenuIndicator: 'fui-MenuItem__submenuIndicator',\n  content: 'fui-MenuItem__content',\n  secondaryContent: 'fui-MenuItem__secondaryContent',\n};\n\nconst useStyles = makeStyles({\n  focusIndicator: createFocusOutlineStyle(),\n  // TODO: this should be extracted to another package\n  resetButton: {\n    boxSizing: 'content-box',\n    backgroundColor: 'inherit',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'normal',\n    ...shorthands.borderColor('transparent'),\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    WebkitAppearance: 'button',\n    textAlign: 'unset',\n  },\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: '10px',\n    paddingLeft: '10px',\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    ...shorthands.gap('4px'),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      color: tokens.colorNeutralForeground2Hover,\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n      [`& .${menuItemClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandSelected,\n      },\n    },\n\n    userSelect: 'none',\n  },\n  content: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1,\n  },\n  secondaryContent: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n    ':focus': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n  icon: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  submenuIndicator: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':hover': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':focus': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    menuItemClassNames.root,\n    state.isNativeButton && styles.resetButton,\n    styles.root,\n    styles.focusIndicator,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemClassNames.secondaryContent,\n      !state.disabled && styles.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n  }\n\n  if (state.submenuIndicator) {\n    state.submenuIndicator.className = mergeClasses(\n      menuItemClassNames.submenuIndicator,\n      styles.submenuIndicator,\n      state.submenuIndicator.className,\n    );\n  }\n  useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"]}
+{"version":3,"mappings":"AAAA,SAASA,YAAY,YAAcC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,2BAA2B,QAAQ,wBAAwB;AAKpE,OAAO,MAAMC,kBAAkB,GAAkC;EAC/DC,IAAI,EAAE,cAAc;EACpBC,IAAI,EAAE,oBAAoB;EAC1BC,SAAS,EAAE,yBAAyB;EACpCC,gBAAgB,EAAE,gCAAgC;EAClDC,OAAO,EAAE,uBAAuB;EAChCC,gBAAgB,EAAE;CACnB;AAED,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA,EA+EhB;AAEF;AACA,OAAO,MAAMC,0BAA0B,GAAIC,KAAoB,IAAI;EACjE,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACR,IAAI,CAACU,SAAS,GAAGlB,YAAY,CACjCO,kBAAkB,CAACC,IAAI,EACvBS,MAAM,CAACT,IAAI,EACXS,MAAM,CAACE,cAAc,EACrBH,KAAK,CAACI,QAAQ,IAAIH,MAAM,CAACG,QAAQ,EACjCJ,KAAK,CAACR,IAAI,CAACU,SAAS,CACrB;EAED,IAAIF,KAAK,CAACJ,OAAO,EAAE;IACjBI,KAAK,CAACJ,OAAO,CAACM,SAAS,GAAGlB,YAAY,CAACO,kBAAkB,CAACK,OAAO,EAAEK,MAAM,CAACL,OAAO,EAAEI,KAAK,CAACJ,OAAO,CAACM,SAAS,CAAC;;EAG7G,IAAIF,KAAK,CAACN,SAAS,EAAE;IACnBM,KAAK,CAACN,SAAS,CAACQ,SAAS,GAAGlB,YAAY,CAACO,kBAAkB,CAACG,SAAS,EAAEM,KAAK,CAACN,SAAS,CAACQ,SAAS,CAAC;;EAGnG,IAAIF,KAAK,CAACH,gBAAgB,EAAE;IAC1BG,KAAK,CAACH,gBAAgB,CAACK,SAAS,GAAGlB,YAAY,CAC7CO,kBAAkB,CAACM,gBAAgB,EACnC,CAACG,KAAK,CAACI,QAAQ,IAAIH,MAAM,CAACJ,gBAAgB,EAC1CG,KAAK,CAACH,gBAAgB,CAACK,SAAS,CACjC;;EAGH,IAAIF,KAAK,CAACP,IAAI,EAAE;IACdO,KAAK,CAACP,IAAI,CAACS,SAAS,GAAGlB,YAAY,CAACO,kBAAkB,CAACE,IAAI,EAAEQ,MAAM,CAACR,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACS,SAAS,CAAC;;EAGjG,IAAIF,KAAK,CAACL,gBAAgB,EAAE;IAC1BK,KAAK,CAACL,gBAAgB,CAACO,SAAS,GAAGlB,YAAY,CAC7CO,kBAAkB,CAACI,gBAAgB,EACnCM,MAAM,CAACN,gBAAgB,EACvBK,KAAK,CAACL,gBAAgB,CAACO,SAAS,CACjC;;EAEHZ,2BAA2B,CAACU,KAA8B,CAAC;AAC7D,CAAC","names":["mergeClasses","shorthands","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","useMenuItemStyles_unstable","state","styles","className","focusIndicator","disabled"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n  root: 'fui-MenuItem',\n  icon: 'fui-MenuItem__icon',\n  checkmark: 'fui-MenuItem__checkmark',\n  submenuIndicator: 'fui-MenuItem__submenuIndicator',\n  content: 'fui-MenuItem__content',\n  secondaryContent: 'fui-MenuItem__secondaryContent',\n};\n\nconst useStyles = makeStyles({\n  focusIndicator: createFocusOutlineStyle(),\n  // TODO: this should be extracted to another package\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: '10px',\n    paddingLeft: '10px',\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    ...shorthands.gap('4px'),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      color: tokens.colorNeutralForeground2Hover,\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n      [`& .${menuItemClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandSelected,\n      },\n    },\n\n    userSelect: 'none',\n  },\n  content: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1,\n  },\n  secondaryContent: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n    ':focus': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n  icon: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  submenuIndicator: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':hover': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':focus': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    menuItemClassNames.root,\n    styles.root,\n    styles.focusIndicator,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemClassNames.secondaryContent,\n      !state.disabled && styles.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n  }\n\n  if (state.submenuIndicator) {\n    state.submenuIndicator.className = mergeClasses(\n      menuItemClassNames.submenuIndicator,\n      styles.submenuIndicator,\n      state.submenuIndicator.className,\n    );\n  }\n  useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"]}

package/lib/components/MenuPopover/useMenuPopover.js

@@ -92,7 +92,6 @@ export const useMenuPopover_unstable = (props, ref) => {
         type: 'menuPopoverKeyDown',
         event
       });
-      event.preventDefault();
     }
     onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);
   });

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

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