@fluentui/react-menu 9.14.6 → 9.14.8

package/lib/components/MenuList/useMenuList.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useMergedRefs, useEventCallback, useControllableState, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
+import { useArrowNavigationGroup, useFocusFinders, TabsterMoveFocusEventName } from '@fluentui/react-tabster';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useHasParentContext } from '@fluentui/react-context-selector';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { MenuContext } from '../../contexts/menuContext';
@@ -8,13 +9,11 @@ import { MenuContext } from '../../contexts/menuContext';
  * Returns the props and state required to render the component
  */ export const useMenuList_unstable = (props, ref)=>{
     const { findAllFocusable } = useFocusFinders();
+    const { targetDocument } = useFluent();
     const menuContext = useMenuContextSelectors();
     const hasMenuContext = useHasParentContext(MenuContext);
     const focusAttributes = useArrowNavigationGroup({
-        circular: true,
-        ignoreDefaultKeydown: {
-            Tab: hasMenuContext
-        }
+        circular: true
     });
     if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {
         // TODO throw warnings in development safely
@@ -22,6 +21,26 @@ import { MenuContext } from '../../contexts/menuContext';
         console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');
     }
     const innerRef = React.useRef(null);
+    React.useEffect(()=>{
+        const element = innerRef.current;
+        if (hasMenuContext && targetDocument && element) {
+            const onTabsterMoveFocus = (e)=>{
+                const nextElement = e.detail.next;
+                if (nextElement && element.contains(targetDocument.activeElement) && !element.contains(nextElement)) {
+                    // Preventing Tabster from handling Tab press, useMenuPopover will handle it.
+                    e.preventDefault();
+                }
+            };
+            targetDocument.addEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);
+            return ()=>{
+                targetDocument.removeEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);
+            };
+        }
+    }, [
+        innerRef,
+        targetDocument,
+        hasMenuContext
+    ]);
     const setFocusByFirstCharacter = React.useCallback((e, itemEl)=>{
         // TODO use some kind of children registration to reduce dependency on DOM roles
         const acceptedRoles = [

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  getIntrinsicElementProps,\n  slot,\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: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role: 'menu',\n        'aria-labelledby': menuContext.triggerId,\n        ...focusAttributes,\n        ...props,\n      }),\n      { elementType: 'div' },\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","getIntrinsicElementProps","slot","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","always","role","triggerId","elementType","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  getIntrinsicElementProps,\n  slot,\n} from '@fluentui/react-utilities';\nimport {\n  useArrowNavigationGroup,\n  useFocusFinders,\n  TabsterMoveFocusEventName,\n  type TabsterMoveFocusEvent,\n} from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\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 { targetDocument } = useFluent();\n  const menuContext = useMenuContextSelectors();\n  const hasMenuContext = useHasParentContext(MenuContext);\n  const focusAttributes = useArrowNavigationGroup({ circular: true });\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  React.useEffect(() => {\n    const element = innerRef.current;\n\n    if (hasMenuContext && targetDocument && element) {\n      const onTabsterMoveFocus = (e: TabsterMoveFocusEvent) => {\n        const nextElement = e.detail.next;\n\n        if (nextElement && element.contains(targetDocument.activeElement) && !element.contains(nextElement)) {\n          // Preventing Tabster from handling Tab press, useMenuPopover will handle it.\n          e.preventDefault();\n        }\n      };\n\n      targetDocument.addEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);\n\n      return () => {\n        targetDocument.removeEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);\n      };\n    }\n  }, [innerRef, targetDocument, hasMenuContext]);\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: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role: 'menu',\n        'aria-labelledby': menuContext.triggerId,\n        ...focusAttributes,\n        ...props,\n      }),\n      { elementType: 'div' },\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","getIntrinsicElementProps","slot","useArrowNavigationGroup","useFocusFinders","TabsterMoveFocusEventName","useFluent_unstable","useFluent","useHasParentContext","useMenuContext_unstable","MenuContext","useMenuList_unstable","props","ref","findAllFocusable","targetDocument","menuContext","useMenuContextSelectors","hasMenuContext","focusAttributes","circular","usingPropsAndMenuContext","console","warn","innerRef","useRef","useEffect","element","current","onTabsterMoveFocus","e","nextElement","detail","next","contains","activeElement","preventDefault","addEventListener","removeEventListener","setFocusByFirstCharacter","useCallback","itemEl","acceptedRoles","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","always","role","triggerId","elementType","hasIcons","hasCheckmarks","context","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}

package/lib/components/MenuPopover/useMenuPopover.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';
-import { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot, useTimeout } from '@fluentui/react-utilities';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { dispatchMenuEnterEvent } from '../../utils/index';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
@@ -22,8 +22,8 @@ import { useRestoreFocusSource } from '@fluentui/react-tabster';
     const triggerRef = useMenuContext_unstable((context)=>context.triggerRef);
     const isSubmenu = useIsSubmenu();
     const canDispatchCustomEventRef = React.useRef(true);
-    const throttleDispatchTimerRef = React.useRef(0);
     const restoreFocusSourceAttributes = useRestoreFocusSource();
+    const [setThrottleTimeout, clearThrottleTimeout] = useTimeout();
     const { dir } = useFluent();
     const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;
     // use DOM listener since react events propagate up the react tree
@@ -37,19 +37,19 @@ import { useRestoreFocusSource } from '@fluentui/react-tabster';
                 if (canDispatchCustomEventRef.current) {
                     canDispatchCustomEventRef.current = false;
                     dispatchMenuEnterEvent(popoverRef.current, e);
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore #16889 Node setTimeout type leaking
-                    throttleDispatchTimerRef.current = setTimeout(()=>canDispatchCustomEventRef.current = true, 250);
+                    setThrottleTimeout(()=>canDispatchCustomEventRef.current = true, 250);
                 }
             });
         }
     }, [
         popoverRef,
-        throttleDispatchTimerRef
+        setThrottleTimeout
     ]);
     React.useEffect(()=>{
-        ()=>clearTimeout(throttleDispatchTimerRef.current);
-    }, []);
+        ()=>clearThrottleTimeout();
+    }, [
+        clearThrottleTimeout
+    ]);
     var _useMenuContext_unstable;
     const inline = (_useMenuContext_unstable = useMenuContext_unstable((context)=>context.inline)) !== null && _useMenuContext_unstable !== void 0 ? _useMenuContext_unstable : false;
     const mountNode = useMenuContext_unstable((context)=>context.mountNode);

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

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

package/lib-commonjs/components/MenuList/useMenuList.js

@@ -12,17 +12,16 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _reacttabster = require("@fluentui/react-tabster");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _reactcontextselector = require("@fluentui/react-context-selector");
 const _menuContext = require("../../contexts/menuContext");
 const useMenuList_unstable = (props, ref)=>{
     const { findAllFocusable } = (0, _reacttabster.useFocusFinders)();
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
     const menuContext = useMenuContextSelectors();
     const hasMenuContext = (0, _reactcontextselector.useHasParentContext)(_menuContext.MenuContext);
     const focusAttributes = (0, _reacttabster.useArrowNavigationGroup)({
-        circular: true,
-        ignoreDefaultKeydown: {
-            Tab: hasMenuContext
-        }
+        circular: true
     });
     if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {
         // TODO throw warnings in development safely
@@ -30,6 +29,26 @@ const useMenuList_unstable = (props, ref)=>{
         console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');
     }
     const innerRef = _react.useRef(null);
+    _react.useEffect(()=>{
+        const element = innerRef.current;
+        if (hasMenuContext && targetDocument && element) {
+            const onTabsterMoveFocus = (e)=>{
+                const nextElement = e.detail.next;
+                if (nextElement && element.contains(targetDocument.activeElement) && !element.contains(nextElement)) {
+                    // Preventing Tabster from handling Tab press, useMenuPopover will handle it.
+                    e.preventDefault();
+                }
+            };
+            targetDocument.addEventListener(_reacttabster.TabsterMoveFocusEventName, onTabsterMoveFocus);
+            return ()=>{
+                targetDocument.removeEventListener(_reacttabster.TabsterMoveFocusEventName, onTabsterMoveFocus);
+            };
+        }
+    }, [
+        innerRef,
+        targetDocument,
+        hasMenuContext
+    ]);
     const setFocusByFirstCharacter = _react.useCallback((e, itemEl)=>{
         // TODO use some kind of children registration to reduce dependency on DOM roles
         const acceptedRoles = [

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuList.js"],"sourcesContent":["import * as React from 'react';\nimport { useMergedRefs, useEventCallback, useControllableState, getIntrinsicElementProps, slot } 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';\n/**\n * Returns the props and state required to render the component\n */ export const useMenuList_unstable = (props, ref)=>{\n    const { findAllFocusable } = useFocusFinders();\n    const menuContext = useMenuContextSelectors();\n    const hasMenuContext = useHasParentContext(MenuContext);\n    const focusAttributes = useArrowNavigationGroup({\n        circular: true,\n        ignoreDefaultKeydown: {\n            Tab: hasMenuContext\n        }\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    const innerRef = React.useRef(null);\n    const setFocusByFirstCharacter = React.useCallback((e, itemEl)=>{\n        // TODO use some kind of children registration to reduce dependency on DOM roles\n        const acceptedRoles = [\n            'menuitem',\n            'menuitemcheckbox',\n            'menuitemradio'\n        ];\n        if (!innerRef.current) {\n            return;\n        }\n        const menuItems = findAllFocusable(innerRef.current, (el)=>el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')) !== -1);\n        let startIndex = menuItems.indexOf(itemEl) + 1;\n        if (startIndex === menuItems.length) {\n            startIndex = 0;\n        }\n        const firstChars = menuItems.map((menuItem)=>{\n            var _menuItem_textContent;\n            return (_menuItem_textContent = menuItem.textContent) === null || _menuItem_textContent === void 0 ? void 0 : _menuItem_textContent.charAt(0).toLowerCase();\n        });\n        const char = e.key.toLowerCase();\n        const getIndexFirstChars = (start, firstChar)=>{\n            for(let i = start; i < firstChars.length; i++){\n                if (char === firstChars[i]) {\n                    return i;\n                }\n            }\n            return -1;\n        };\n        // Check remaining slots in the menu\n        let index = getIndexFirstChars(startIndex, char);\n        // If not found in remaining slots, check from beginning\n        if (index === -1) {\n            index = getIndexFirstChars(0, char);\n        }\n        // If match was found...\n        if (index > -1) {\n            menuItems[index].focus();\n        }\n    }, [\n        findAllFocusable\n    ]);\n    var _props_checkedValues;\n    const [checkedValues, setCheckedValues] = useControllableState({\n        state: (_props_checkedValues = props.checkedValues) !== null && _props_checkedValues !== void 0 ? _props_checkedValues : hasMenuContext ? menuContext.checkedValues : undefined,\n        defaultState: props.defaultCheckedValues,\n        initialState: {}\n    });\n    var _props_onCheckedValueChange;\n    const handleCheckedValueChange = (_props_onCheckedValueChange = props.onCheckedValueChange) !== null && _props_onCheckedValueChange !== void 0 ? _props_onCheckedValueChange : hasMenuContext ? menuContext.onCheckedValueChange : undefined;\n    const toggleCheckbox = useEventCallback((e, name, value, checked)=>{\n        const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];\n        const newCheckedItems = [\n            ...checkedItems\n        ];\n        if (checked) {\n            newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n        } else {\n            newCheckedItems.push(value);\n        }\n        handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {\n            name,\n            checkedItems: newCheckedItems\n        });\n        setCheckedValues((s)=>({\n                ...s,\n                [name]: newCheckedItems\n            }));\n    });\n    const selectRadio = useEventCallback((e, name, value)=>{\n        const newCheckedItems = [\n            value\n        ];\n        setCheckedValues((s)=>({\n                ...s,\n                [name]: newCheckedItems\n            }));\n        handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {\n            name,\n            checkedItems: newCheckedItems\n        });\n    });\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, innerRef),\n            role: 'menu',\n            'aria-labelledby': menuContext.triggerId,\n            ...focusAttributes,\n            ...props\n        }), {\n            elementType: 'div'\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 * Adds some sugar to fetching multiple context selector values\n */ const 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    return {\n        checkedValues,\n        onCheckedValueChange,\n        triggerId,\n        hasIcons,\n        hasCheckmarks\n    };\n};\n/**\n * Helper function to detect if props and MenuContext values are both used\n */ const usingPropsAndMenuContext = (props, contextValue, hasMenuContext)=>{\n    let isUsingPropsAndContext = false;\n    for(const val in contextValue){\n        if (props[val]) {\n            isUsingPropsAndContext = true;\n        }\n    }\n    return hasMenuContext && isUsingPropsAndContext;\n};\n"],"names":["useMenuList_unstable","props","ref","findAllFocusable","useFocusFinders","menuContext","useMenuContextSelectors","hasMenuContext","useHasParentContext","MenuContext","focusAttributes","useArrowNavigationGroup","circular","ignoreDefaultKeydown","Tab","usingPropsAndMenuContext","console","warn","innerRef","React","useRef","setFocusByFirstCharacter","useCallback","e","itemEl","acceptedRoles","current","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","_menuItem_textContent","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","_props_checkedValues","checkedValues","setCheckedValues","useControllableState","state","undefined","defaultState","defaultCheckedValues","initialState","_props_onCheckedValueChange","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","useEventCallback","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","role","triggerId","elementType","hasIcons","hasCheckmarks","useMenuContext_unstable","context","contextValue","isUsingPropsAndContext","val"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;gCAC+E;8BAC7C;sCACrB;6BACI;AAI7B,MAAMA,uBAAuB,CAACC,OAAOC;IAC5C,MAAM,EAAEC,gBAAgB,EAAE,GAAGC,IAAAA,6BAAe;IAC5C,MAAMC,cAAcC;IACpB,MAAMC,iBAAiBC,IAAAA,yCAAmB,EAACC,wBAAW;IACtD,MAAMC,kBAAkBC,IAAAA,qCAAuB,EAAC;QAC5CC,UAAU;QACVC,sBAAsB;YAClBC,KAAKP;QACT;IACJ;IACA,IAAIQ,yBAAyBd,OAAOI,aAAaE,iBAAiB;QAC9D,4CAA4C;QAC5C,sCAAsC;QACtCS,QAAQC,IAAI,CAAC;IACjB;IACA,MAAMC,WAAWC,OAAMC,MAAM,CAAC;IAC9B,MAAMC,2BAA2BF,OAAMG,WAAW,CAAC,CAACC,GAAGC;QACnD,gFAAgF;QAChF,MAAMC,gBAAgB;YAClB;YACA;YACA;SACH;QACD,IAAI,CAACP,SAASQ,OAAO,EAAE;YACnB;QACJ;QACA,MAAMC,YAAYxB,iBAAiBe,SAASQ,OAAO,EAAE,CAACE,KAAKA,GAAGC,YAAY,CAAC,WAAWJ,cAAcK,OAAO,CAACF,GAAGG,YAAY,CAAC,aAAa,CAAC;QAC1I,IAAIC,aAAaL,UAAUG,OAAO,CAACN,UAAU;QAC7C,IAAIQ,eAAeL,UAAUM,MAAM,EAAE;YACjCD,aAAa;QACjB;QACA,MAAME,aAAaP,UAAUQ,GAAG,CAAC,CAACC;YAC9B,IAAIC;YACJ,OAAO,AAACA,CAAAA,wBAAwBD,SAASE,WAAW,AAAD,MAAO,QAAQD,0BAA0B,KAAK,IAAI,KAAK,IAAIA,sBAAsBE,MAAM,CAAC,GAAGC,WAAW;QAC7J;QACA,MAAMC,OAAOlB,EAAEmB,GAAG,CAACF,WAAW;QAC9B,MAAMG,qBAAqB,CAACC,OAAOC;YAC/B,IAAI,IAAIC,IAAIF,OAAOE,IAAIZ,WAAWD,MAAM,EAAEa,IAAI;gBAC1C,IAAIL,SAASP,UAAU,CAACY,EAAE,EAAE;oBACxB,OAAOA;gBACX;YACJ;YACA,OAAO,CAAC;QACZ;QACA,oCAAoC;QACpC,IAAIC,QAAQJ,mBAAmBX,YAAYS;QAC3C,wDAAwD;QACxD,IAAIM,UAAU,CAAC,GAAG;YACdA,QAAQJ,mBAAmB,GAAGF;QAClC;QACA,wBAAwB;QACxB,IAAIM,QAAQ,CAAC,GAAG;YACZpB,SAAS,CAACoB,MAAM,CAACC,KAAK;QAC1B;IACJ,GAAG;QACC7C;KACH;IACD,IAAI8C;IACJ,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,IAAAA,oCAAoB,EAAC;QAC3DC,OAAO,AAACJ,CAAAA,uBAAuBhD,MAAMiD,aAAa,AAAD,MAAO,QAAQD,yBAAyB,KAAK,IAAIA,uBAAuB1C,iBAAiBF,YAAY6C,aAAa,GAAGI;QACtKC,cAActD,MAAMuD,oBAAoB;QACxCC,cAAc,CAAC;IACnB;IACA,IAAIC;IACJ,MAAMC,2BAA2B,AAACD,CAAAA,8BAA8BzD,MAAM2D,oBAAoB,AAAD,MAAO,QAAQF,gCAAgC,KAAK,IAAIA,8BAA8BnD,iBAAiBF,YAAYuD,oBAAoB,GAAGN;IACnO,MAAMO,iBAAiBC,IAAAA,gCAAgB,EAAC,CAACvC,GAAGwC,MAAMC,OAAOC;QACrD,MAAMC,eAAe,AAAChB,CAAAA,kBAAkB,QAAQA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,aAAa,CAACa,KAAK,AAAD,KAAM,EAAE;QAC9G,MAAMI,kBAAkB;eACjBD;SACN;QACD,IAAID,SAAS;YACTE,gBAAgBC,MAAM,CAACD,gBAAgBrC,OAAO,CAACkC,QAAQ;QAC3D,OAAO;YACHG,gBAAgBE,IAAI,CAACL;QACzB;QACAL,6BAA6B,QAAQA,6BAA6B,KAAK,IAAI,KAAK,IAAIA,yBAAyBpC,GAAG;YAC5GwC;YACAG,cAAcC;QAClB;QACAhB,iBAAiB,CAACmB,IAAK,CAAA;gBACf,GAAGA,CAAC;gBACJ,CAACP,KAAK,EAAEI;YACZ,CAAA;IACR;IACA,MAAMI,cAAcT,IAAAA,gCAAgB,EAAC,CAACvC,GAAGwC,MAAMC;QAC3C,MAAMG,kBAAkB;YACpBH;SACH;QACDb,iBAAiB,CAACmB,IAAK,CAAA;gBACf,GAAGA,CAAC;gBACJ,CAACP,KAAK,EAAEI;YACZ,CAAA;QACJR,6BAA6B,QAAQA,6BAA6B,KAAK,IAAI,KAAK,IAAIA,yBAAyBpC,GAAG;YAC5GwC;YACAG,cAAcC;QAClB;IACJ;IACA,OAAO;QACHK,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5F1E,KAAK2E,IAAAA,6BAAa,EAAC3E,KAAKgB;YACxB4D,MAAM;YACN,mBAAmBzE,YAAY0E,SAAS;YACxC,GAAGrE,eAAe;YAClB,GAAGT,KAAK;QACZ,IAAI;YACA+E,aAAa;QACjB;QACAC,UAAU5E,YAAY4E,QAAQ,IAAI;QAClCC,eAAe7E,YAAY6E,aAAa,IAAI;QAC5ChC;QACA3C;QACAc;QACAkD;QACAV;IACJ;AACJ;AACA;;CAEC,GAAG,MAAMvD,0BAA0B;IAChC,MAAM4C,gBAAgBiC,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQlC,aAAa;IAC9E,MAAMU,uBAAuBuB,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQxB,oBAAoB;IAC5F,MAAMmB,YAAYI,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQL,SAAS;IACtE,MAAME,WAAWE,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQH,QAAQ;IACpE,MAAMC,gBAAgBC,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQF,aAAa;IAC9E,OAAO;QACHhC;QACAU;QACAmB;QACAE;QACAC;IACJ;AACJ;AACA;;CAEC,GAAG,MAAMnE,2BAA2B,CAACd,OAAOoF,cAAc9E;IACvD,IAAI+E,yBAAyB;IAC7B,IAAI,MAAMC,OAAOF,aAAa;QAC1B,IAAIpF,KAAK,CAACsF,IAAI,EAAE;YACZD,yBAAyB;QAC7B;IACJ;IACA,OAAO/E,kBAAkB+E;AAC7B"}
+{"version":3,"sources":["useMenuList.js"],"sourcesContent":["import * as React from 'react';\nimport { useMergedRefs, useEventCallback, useControllableState, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders, TabsterMoveFocusEventName } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\n/**\n * Returns the props and state required to render the component\n */ export const useMenuList_unstable = (props, ref)=>{\n    const { findAllFocusable } = useFocusFinders();\n    const { targetDocument } = useFluent();\n    const menuContext = useMenuContextSelectors();\n    const hasMenuContext = useHasParentContext(MenuContext);\n    const focusAttributes = useArrowNavigationGroup({\n        circular: true\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    const innerRef = React.useRef(null);\n    React.useEffect(()=>{\n        const element = innerRef.current;\n        if (hasMenuContext && targetDocument && element) {\n            const onTabsterMoveFocus = (e)=>{\n                const nextElement = e.detail.next;\n                if (nextElement && element.contains(targetDocument.activeElement) && !element.contains(nextElement)) {\n                    // Preventing Tabster from handling Tab press, useMenuPopover will handle it.\n                    e.preventDefault();\n                }\n            };\n            targetDocument.addEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);\n            return ()=>{\n                targetDocument.removeEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);\n            };\n        }\n    }, [\n        innerRef,\n        targetDocument,\n        hasMenuContext\n    ]);\n    const setFocusByFirstCharacter = React.useCallback((e, itemEl)=>{\n        // TODO use some kind of children registration to reduce dependency on DOM roles\n        const acceptedRoles = [\n            'menuitem',\n            'menuitemcheckbox',\n            'menuitemradio'\n        ];\n        if (!innerRef.current) {\n            return;\n        }\n        const menuItems = findAllFocusable(innerRef.current, (el)=>el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')) !== -1);\n        let startIndex = menuItems.indexOf(itemEl) + 1;\n        if (startIndex === menuItems.length) {\n            startIndex = 0;\n        }\n        const firstChars = menuItems.map((menuItem)=>{\n            var _menuItem_textContent;\n            return (_menuItem_textContent = menuItem.textContent) === null || _menuItem_textContent === void 0 ? void 0 : _menuItem_textContent.charAt(0).toLowerCase();\n        });\n        const char = e.key.toLowerCase();\n        const getIndexFirstChars = (start, firstChar)=>{\n            for(let i = start; i < firstChars.length; i++){\n                if (char === firstChars[i]) {\n                    return i;\n                }\n            }\n            return -1;\n        };\n        // Check remaining slots in the menu\n        let index = getIndexFirstChars(startIndex, char);\n        // If not found in remaining slots, check from beginning\n        if (index === -1) {\n            index = getIndexFirstChars(0, char);\n        }\n        // If match was found...\n        if (index > -1) {\n            menuItems[index].focus();\n        }\n    }, [\n        findAllFocusable\n    ]);\n    var _props_checkedValues;\n    const [checkedValues, setCheckedValues] = useControllableState({\n        state: (_props_checkedValues = props.checkedValues) !== null && _props_checkedValues !== void 0 ? _props_checkedValues : hasMenuContext ? menuContext.checkedValues : undefined,\n        defaultState: props.defaultCheckedValues,\n        initialState: {}\n    });\n    var _props_onCheckedValueChange;\n    const handleCheckedValueChange = (_props_onCheckedValueChange = props.onCheckedValueChange) !== null && _props_onCheckedValueChange !== void 0 ? _props_onCheckedValueChange : hasMenuContext ? menuContext.onCheckedValueChange : undefined;\n    const toggleCheckbox = useEventCallback((e, name, value, checked)=>{\n        const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];\n        const newCheckedItems = [\n            ...checkedItems\n        ];\n        if (checked) {\n            newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n        } else {\n            newCheckedItems.push(value);\n        }\n        handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {\n            name,\n            checkedItems: newCheckedItems\n        });\n        setCheckedValues((s)=>({\n                ...s,\n                [name]: newCheckedItems\n            }));\n    });\n    const selectRadio = useEventCallback((e, name, value)=>{\n        const newCheckedItems = [\n            value\n        ];\n        setCheckedValues((s)=>({\n                ...s,\n                [name]: newCheckedItems\n            }));\n        handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {\n            name,\n            checkedItems: newCheckedItems\n        });\n    });\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, innerRef),\n            role: 'menu',\n            'aria-labelledby': menuContext.triggerId,\n            ...focusAttributes,\n            ...props\n        }), {\n            elementType: 'div'\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 * Adds some sugar to fetching multiple context selector values\n */ const 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    return {\n        checkedValues,\n        onCheckedValueChange,\n        triggerId,\n        hasIcons,\n        hasCheckmarks\n    };\n};\n/**\n * Helper function to detect if props and MenuContext values are both used\n */ const usingPropsAndMenuContext = (props, contextValue, hasMenuContext)=>{\n    let isUsingPropsAndContext = false;\n    for(const val in contextValue){\n        if (props[val]) {\n            isUsingPropsAndContext = true;\n        }\n    }\n    return hasMenuContext && isUsingPropsAndContext;\n};\n"],"names":["useMenuList_unstable","props","ref","findAllFocusable","useFocusFinders","targetDocument","useFluent","menuContext","useMenuContextSelectors","hasMenuContext","useHasParentContext","MenuContext","focusAttributes","useArrowNavigationGroup","circular","usingPropsAndMenuContext","console","warn","innerRef","React","useRef","useEffect","element","current","onTabsterMoveFocus","e","nextElement","detail","next","contains","activeElement","preventDefault","addEventListener","TabsterMoveFocusEventName","removeEventListener","setFocusByFirstCharacter","useCallback","itemEl","acceptedRoles","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","_menuItem_textContent","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","_props_checkedValues","checkedValues","setCheckedValues","useControllableState","state","undefined","defaultState","defaultCheckedValues","initialState","_props_onCheckedValueChange","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","useEventCallback","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","role","triggerId","elementType","hasIcons","hasCheckmarks","useMenuContext_unstable","context","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}

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

@@ -25,8 +25,8 @@ const useMenuPopover_unstable = (props, ref)=>{
     const triggerRef = (0, _menuContext.useMenuContext_unstable)((context)=>context.triggerRef);
     const isSubmenu = (0, _useIsSubmenu.useIsSubmenu)();
     const canDispatchCustomEventRef = _react.useRef(true);
-    const throttleDispatchTimerRef = _react.useRef(0);
     const restoreFocusSourceAttributes = (0, _reacttabster.useRestoreFocusSource)();
+    const [setThrottleTimeout, clearThrottleTimeout] = (0, _reactutilities.useTimeout)();
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
     const CloseArrowKey = dir === 'ltr' ? _keyboardkeys.ArrowLeft : _keyboardkeys.ArrowRight;
     // use DOM listener since react events propagate up the react tree
@@ -40,19 +40,19 @@ const useMenuPopover_unstable = (props, ref)=>{
                 if (canDispatchCustomEventRef.current) {
                     canDispatchCustomEventRef.current = false;
                     (0, _index.dispatchMenuEnterEvent)(popoverRef.current, e);
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore #16889 Node setTimeout type leaking
-                    throttleDispatchTimerRef.current = setTimeout(()=>canDispatchCustomEventRef.current = true, 250);
+                    setThrottleTimeout(()=>canDispatchCustomEventRef.current = true, 250);
                 }
             });
         }
     }, [
         popoverRef,
-        throttleDispatchTimerRef
+        setThrottleTimeout
     ]);
     _react.useEffect(()=>{
-        ()=>clearTimeout(throttleDispatchTimerRef.current);
-    }, []);
+        ()=>clearThrottleTimeout();
+    }, [
+        clearThrottleTimeout
+    ]);
     var _useMenuContext_unstable;
     const inline = (_useMenuContext_unstable = (0, _menuContext.useMenuContext_unstable)((context)=>context.inline)) !== null && _useMenuContext_unstable !== void 0 ? _useMenuContext_unstable : false;
     const mountNode = (0, _menuContext.useMenuContext_unstable)((context)=>context.mountNode);

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuPopover.js"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */ export const useMenuPopover_unstable = (props, ref)=>{\n    const popoverRef = useMenuContext_unstable((context)=>context.menuPopoverRef);\n    const setOpen = useMenuContext_unstable((context)=>context.setOpen);\n    const open = useMenuContext_unstable((context)=>context.open);\n    const openOnHover = useMenuContext_unstable((context)=>context.openOnHover);\n    const triggerRef = useMenuContext_unstable((context)=>context.triggerRef);\n    const isSubmenu = useIsSubmenu();\n    const canDispatchCustomEventRef = React.useRef(true);\n    const throttleDispatchTimerRef = React.useRef(0);\n    const restoreFocusSourceAttributes = useRestoreFocusSource();\n    const { dir } = useFluent();\n    const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n    // use DOM listener since react events propagate up the react tree\n    // no need to do `contains` logic as menus are all positioned in different portals\n    const mouseOverListenerCallbackRef = React.useCallback((node)=>{\n        if (node) {\n            // Dispatches the custom menu mouse enter event with throttling\n            // Needs to trigger on mouseover to support keyboard + mouse together\n            // i.e. keyboard opens submenus while cursor is still on the parent\n            node.addEventListener('mouseover', (e)=>{\n                if (canDispatchCustomEventRef.current) {\n                    canDispatchCustomEventRef.current = false;\n                    dispatchMenuEnterEvent(popoverRef.current, e);\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore #16889 Node setTimeout type leaking\n                    throttleDispatchTimerRef.current = setTimeout(()=>canDispatchCustomEventRef.current = true, 250);\n                }\n            });\n        }\n    }, [\n        popoverRef,\n        throttleDispatchTimerRef\n    ]);\n    React.useEffect(()=>{\n        ()=>clearTimeout(throttleDispatchTimerRef.current);\n    }, []);\n    var _useMenuContext_unstable;\n    const inline = (_useMenuContext_unstable = useMenuContext_unstable((context)=>context.inline)) !== null && _useMenuContext_unstable !== void 0 ? _useMenuContext_unstable : false;\n    const mountNode = useMenuContext_unstable((context)=>context.mountNode);\n    const rootProps = slot.always(getIntrinsicElementProps('div', {\n        role: 'presentation',\n        ...restoreFocusSourceAttributes,\n        ...props,\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef)\n    }), {\n        elementType: 'div'\n    });\n    const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n    rootProps.onMouseEnter = useEventCallback((event)=>{\n        if (openOnHover || isSubmenu) {\n            setOpen(event, {\n                open: true,\n                keyboard: false,\n                type: 'menuPopoverMouseEnter',\n                event\n            });\n        }\n        onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);\n    });\n    rootProps.onKeyDown = useEventCallback((event)=>{\n        const key = event.key;\n        if (key === Escape || isSubmenu && key === CloseArrowKey) {\n            var _popoverRef_current;\n            if (open && ((_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.contains(event.target)) && !event.isDefaultPrevented()) {\n                setOpen(event, {\n                    open: false,\n                    keyboard: true,\n                    type: 'menuPopoverKeyDown',\n                    event\n                });\n                // stop propagation to avoid conflicting with other elements that listen for `Escape`\n                // e,g: Dialog, Popover, Menu and Tooltip\n                event.preventDefault();\n            }\n        }\n        if (key === Tab) {\n            setOpen(event, {\n                open: false,\n                keyboard: true,\n                type: 'menuPopoverKeyDown',\n                event\n            });\n            if (!isSubmenu) {\n                var _triggerRef_current;\n                (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n            }\n        }\n        onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);\n    });\n    return {\n        inline,\n        mountNode,\n        components: {\n            root: 'div'\n        },\n        root: rootProps\n    };\n};\n"],"names":["useMenuPopover_unstable","props","ref","popoverRef","useMenuContext_unstable","context","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","useIsSubmenu","canDispatchCustomEventRef","React","useRef","throttleDispatchTimerRef","restoreFocusSourceAttributes","useRestoreFocusSource","dir","useFluent","CloseArrowKey","ArrowLeft","ArrowRight","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","dispatchMenuEnterEvent","setTimeout","useEffect","clearTimeout","_useMenuContext_unstable","inline","mountNode","rootProps","slot","always","getIntrinsicElementProps","role","useMergedRefs","elementType","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","useEventCallback","event","keyboard","type","key","Escape","_popoverRef_current","contains","target","isDefaultPrevented","preventDefault","Tab","_triggerRef_current","focus","components","root"],"mappings":"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"}
+{"version":3,"sources":["useMenuPopover.js"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot, useTimeout } from '@fluentui/react-utilities';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */ export const useMenuPopover_unstable = (props, ref)=>{\n    const popoverRef = useMenuContext_unstable((context)=>context.menuPopoverRef);\n    const setOpen = useMenuContext_unstable((context)=>context.setOpen);\n    const open = useMenuContext_unstable((context)=>context.open);\n    const openOnHover = useMenuContext_unstable((context)=>context.openOnHover);\n    const triggerRef = useMenuContext_unstable((context)=>context.triggerRef);\n    const isSubmenu = useIsSubmenu();\n    const canDispatchCustomEventRef = React.useRef(true);\n    const restoreFocusSourceAttributes = useRestoreFocusSource();\n    const [setThrottleTimeout, clearThrottleTimeout] = useTimeout();\n    const { dir } = useFluent();\n    const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n    // use DOM listener since react events propagate up the react tree\n    // no need to do `contains` logic as menus are all positioned in different portals\n    const mouseOverListenerCallbackRef = React.useCallback((node)=>{\n        if (node) {\n            // Dispatches the custom menu mouse enter event with throttling\n            // Needs to trigger on mouseover to support keyboard + mouse together\n            // i.e. keyboard opens submenus while cursor is still on the parent\n            node.addEventListener('mouseover', (e)=>{\n                if (canDispatchCustomEventRef.current) {\n                    canDispatchCustomEventRef.current = false;\n                    dispatchMenuEnterEvent(popoverRef.current, e);\n                    setThrottleTimeout(()=>canDispatchCustomEventRef.current = true, 250);\n                }\n            });\n        }\n    }, [\n        popoverRef,\n        setThrottleTimeout\n    ]);\n    React.useEffect(()=>{\n        ()=>clearThrottleTimeout();\n    }, [\n        clearThrottleTimeout\n    ]);\n    var _useMenuContext_unstable;\n    const inline = (_useMenuContext_unstable = useMenuContext_unstable((context)=>context.inline)) !== null && _useMenuContext_unstable !== void 0 ? _useMenuContext_unstable : false;\n    const mountNode = useMenuContext_unstable((context)=>context.mountNode);\n    const rootProps = slot.always(getIntrinsicElementProps('div', {\n        role: 'presentation',\n        ...restoreFocusSourceAttributes,\n        ...props,\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef)\n    }), {\n        elementType: 'div'\n    });\n    const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n    rootProps.onMouseEnter = useEventCallback((event)=>{\n        if (openOnHover || isSubmenu) {\n            setOpen(event, {\n                open: true,\n                keyboard: false,\n                type: 'menuPopoverMouseEnter',\n                event\n            });\n        }\n        onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);\n    });\n    rootProps.onKeyDown = useEventCallback((event)=>{\n        const key = event.key;\n        if (key === Escape || isSubmenu && key === CloseArrowKey) {\n            var _popoverRef_current;\n            if (open && ((_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.contains(event.target)) && !event.isDefaultPrevented()) {\n                setOpen(event, {\n                    open: false,\n                    keyboard: true,\n                    type: 'menuPopoverKeyDown',\n                    event\n                });\n                // stop propagation to avoid conflicting with other elements that listen for `Escape`\n                // e,g: Dialog, Popover, Menu and Tooltip\n                event.preventDefault();\n            }\n        }\n        if (key === Tab) {\n            setOpen(event, {\n                open: false,\n                keyboard: true,\n                type: 'menuPopoverKeyDown',\n                event\n            });\n            if (!isSubmenu) {\n                var _triggerRef_current;\n                (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n            }\n        }\n        onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);\n    });\n    return {\n        inline,\n        mountNode,\n        components: {\n            root: 'div'\n        },\n        root: rootProps\n    };\n};\n"],"names":["useMenuPopover_unstable","props","ref","popoverRef","useMenuContext_unstable","context","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","useIsSubmenu","canDispatchCustomEventRef","React","useRef","restoreFocusSourceAttributes","useRestoreFocusSource","setThrottleTimeout","clearThrottleTimeout","useTimeout","dir","useFluent","CloseArrowKey","ArrowLeft","ArrowRight","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","dispatchMenuEnterEvent","useEffect","_useMenuContext_unstable","inline","mountNode","rootProps","slot","always","getIntrinsicElementProps","role","useMergedRefs","elementType","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","useEventCallback","event","keyboard","type","key","Escape","_popoverRef_current","contains","target","isDefaultPrevented","preventDefault","Tab","_triggerRef_current","focus","components","root"],"mappings":";;;;+BAgBiBA;;;eAAAA;;;;iEAhBM;8BAC4B;gCACyC;6BACpD;uBACD;qCACS;8BACnB;8BACS;AAS3B,MAAMA,0BAA0B,CAACC,OAAOC;IAC/C,MAAMC,aAAaC,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQC,cAAc;IAC5E,MAAMC,UAAUH,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQE,OAAO;IAClE,MAAMC,OAAOJ,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQG,IAAI;IAC5D,MAAMC,cAAcL,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQI,WAAW;IAC1E,MAAMC,aAAaN,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQK,UAAU;IACxE,MAAMC,YAAYC,IAAAA,0BAAY;IAC9B,MAAMC,4BAA4BC,OAAMC,MAAM,CAAC;IAC/C,MAAMC,+BAA+BC,IAAAA,mCAAqB;IAC1D,MAAM,CAACC,oBAAoBC,qBAAqB,GAAGC,IAAAA,0BAAU;IAC7D,MAAM,EAAEC,GAAG,EAAE,GAAGC,IAAAA,uCAAS;IACzB,MAAMC,gBAAgBF,QAAQ,QAAQG,uBAAS,GAAGC,wBAAU;IAC5D,kEAAkE;IAClE,kFAAkF;IAClF,MAAMC,+BAA+BZ,OAAMa,WAAW,CAAC,CAACC;QACpD,IAAIA,MAAM;YACN,+DAA+D;YAC/D,qEAAqE;YACrE,mEAAmE;YACnEA,KAAKC,gBAAgB,CAAC,aAAa,CAACC;gBAChC,IAAIjB,0BAA0BkB,OAAO,EAAE;oBACnClB,0BAA0BkB,OAAO,GAAG;oBACpCC,IAAAA,6BAAsB,EAAC7B,WAAW4B,OAAO,EAAED;oBAC3CZ,mBAAmB,IAAIL,0BAA0BkB,OAAO,GAAG,MAAM;gBACrE;YACJ;QACJ;IACJ,GAAG;QACC5B;QACAe;KACH;IACDJ,OAAMmB,SAAS,CAAC;QACZ,IAAId;IACR,GAAG;QACCA;KACH;IACD,IAAIe;IACJ,MAAMC,SAAS,AAACD,CAAAA,2BAA2B9B,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQ8B,MAAM,CAAA,MAAO,QAAQD,6BAA6B,KAAK,IAAIA,2BAA2B;IAC5K,MAAME,YAAYhC,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQ+B,SAAS;IACtE,MAAMC,YAAYC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;QAC1DC,MAAM;QACN,GAAGzB,4BAA4B;QAC/B,GAAGf,KAAK;QACR,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FC,KAAKwC,IAAAA,6BAAa,EAACxC,KAAKC,YAAYuB;IACxC,IAAI;QACAiB,aAAa;IACjB;IACA,MAAM,EAAEC,cAAcC,oBAAoB,EAAEC,WAAWC,iBAAiB,EAAE,GAAGV;IAC7EA,UAAUO,YAAY,GAAGI,IAAAA,gCAAgB,EAAC,CAACC;QACvC,IAAIxC,eAAeE,WAAW;YAC1BJ,QAAQ0C,OAAO;gBACXzC,MAAM;gBACN0C,UAAU;gBACVC,MAAM;gBACNF;YACJ;QACJ;QACAJ,yBAAyB,QAAQA,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBI;IACrG;IACAZ,UAAUS,SAAS,GAAGE,IAAAA,gCAAgB,EAAC,CAACC;QACpC,MAAMG,MAAMH,MAAMG,GAAG;QACrB,IAAIA,QAAQC,oBAAM,IAAI1C,aAAayC,QAAQ7B,eAAe;YACtD,IAAI+B;YACJ,IAAI9C,QAAS,CAAA,AAAC8C,CAAAA,sBAAsBnD,WAAW4B,OAAO,AAAD,MAAO,QAAQuB,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBC,QAAQ,CAACN,MAAMO,MAAM,CAAA,KAAM,CAACP,MAAMQ,kBAAkB,IAAI;gBACtLlD,QAAQ0C,OAAO;oBACXzC,MAAM;oBACN0C,UAAU;oBACVC,MAAM;oBACNF;gBACJ;gBACA,qFAAqF;gBACrF,yCAAyC;gBACzCA,MAAMS,cAAc;YACxB;QACJ;QACA,IAAIN,QAAQO,iBAAG,EAAE;YACbpD,QAAQ0C,OAAO;gBACXzC,MAAM;gBACN0C,UAAU;gBACVC,MAAM;gBACNF;YACJ;YACA,IAAI,CAACtC,WAAW;gBACZ,IAAIiD;gBACHA,CAAAA,sBAAsBlD,WAAWqB,OAAO,AAAD,MAAO,QAAQ6B,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBC,KAAK;YAC9H;QACJ;QACAd,sBAAsB,QAAQA,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBE;IAC5F;IACA,OAAO;QACHd;QACAC;QACA0B,YAAY;YACRC,MAAM;QACV;QACAA,MAAM1B;IACV;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-menu",
-  "version": "9.14.6",
+  "version": "9.14.8",
   "description": "Fluent UI menu component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -21,13 +21,13 @@
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "start": "yarn storybook",
-    "storybook": "start-storybook",
+    "storybook": "yarn --cwd ../stories storybook",
     "test": "jest --passWithNoTests",
-    "type-check": "tsc -b tsconfig.json",
-    "generate-api": "just-scripts generate-api",
-    "test-ssr": "test-ssr \"./stories/**/*.stories.tsx\""
+    "type-check": "just-scripts type-check",
+    "generate-api": "just-scripts generate-api"
   },
   "devDependencies": {
+    "@fluentui/react-provider": "*",
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
     "@fluentui/react-conformance-griffel": "*",
@@ -37,16 +37,16 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-aria": "^9.11.4",
-    "@fluentui/react-context-selector": "^9.1.60",
+    "@fluentui/react-aria": "^9.12.1",
+    "@fluentui/react-context-selector": "^9.1.62",
     "@fluentui/react-icons": "^2.0.239",
-    "@fluentui/react-portal": "^9.4.26",
-    "@fluentui/react-positioning": "^9.15.2",
+    "@fluentui/react-portal": "^9.4.28",
+    "@fluentui/react-positioning": "^9.15.3",
     "@fluentui/react-shared-contexts": "^9.19.0",
-    "@fluentui/react-tabster": "^9.21.4",
+    "@fluentui/react-tabster": "^9.22.0",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.9",
-    "@fluentui/react-jsx-runtime": "^9.0.38",
+    "@fluentui/react-utilities": "^9.18.10",
+    "@fluentui/react-jsx-runtime": "^9.0.39",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },