@fluentui/react-menu 9.24.0 → 9.25.0

package/lib/components/MenuList/useMenuList.js

@@ -7,92 +7,112 @@ import { useHasParentContext } from '@fluentui/react-context-selector';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { MenuContext } from '../../contexts/menuContext';
 import { useValidateNesting } from '../../utils/useValidateNesting';
+const MENU_ITEM_ROLES = [
+    'menuitem',
+    'menuitemcheckbox',
+    'menuitemradio'
+];
+const MENU_ITEM_ROLES_SELECTOR = MENU_ITEM_ROLES.map((role)=>`[role="${role}"]`).join(',');
 /**
- * Returns the props and state required to render the component
+ * Returns the props and state required to render the component.
+ *
+ * Composes with `useMenuListBase_unstable` and adds Tabster-driven keyboard
+ * navigation: circular arrow-key focus, a `TabsterMoveFocusEvent` listener
+ * that lets `useMenuPopover_unstable` handle Tab key presses, a focus-aware
+ * `setFocusByFirstCharacter`, and the `hasIcons` / `hasCheckmarks` slot
+ * alignment hints sourced from the parent `MenuContext`.
  */ export const useMenuList_unstable = (props, ref)=>{
-    const { findAllFocusable } = useFocusFinders();
-    const { targetDocument } = useFluent();
     const menuContext = useMenuContextSelectors();
     const hasMenuContext = useHasParentContext(MenuContext);
-    const focusAttributes = useArrowNavigationGroup({
-        circular: true
-    });
     if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {
         // TODO throw warnings in development safely
         // eslint-disable-next-line no-console
         console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');
     }
-    const innerRef = React.useRef(null);
-    const validateNestingRef = useValidateNesting('MenuList');
+    const wrapperRef = React.useRef(null);
+    const { findAllFocusable } = useFocusFinders();
+    const { targetDocument } = useFluent();
+    const focusAttributes = useArrowNavigationGroup({
+        circular: true
+    });
+    const baseState = useMenuListBase_unstable(props, ref);
+    // recreate root non-mutatively: merge wrapperRef so the effect below can
+    // observe the rendered DOM element, and add Tabster arrow-nav attributes
+    const mergedRootRef = useMergedRefs(baseState.root.ref, wrapperRef);
     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);
-            };
+        const element = wrapperRef.current;
+        if (!hasMenuContext || !targetDocument || !element) {
+            return;
         }
+        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
+        hasMenuContext,
+        targetDocument
     ]);
     const setFocusByFirstCharacter = React.useCallback((e, itemEl)=>{
-        // TODO use some kind of children registration to reduce dependency on DOM roles
-        const acceptedRoles = [
-            'menuitem',
-            'menuitemcheckbox',
-            'menuitemradio'
-        ];
-        if (!innerRef.current) {
+        if (!wrapperRef.current) {
             return;
         }
-        const menuItems = findAllFocusable(innerRef.current, (el)=>el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')) !== -1);
-        let startIndex = menuItems.indexOf(itemEl) + 1;
-        if (startIndex === menuItems.length) {
-            startIndex = 0;
-        }
-        const firstChars = menuItems.map((menuItem)=>{
-            var _menuItem_textContent;
-            return (_menuItem_textContent = menuItem.textContent) === null || _menuItem_textContent === void 0 ? void 0 : _menuItem_textContent.charAt(0).toLowerCase();
-        });
-        const char = e.key.toLowerCase();
-        const getIndexFirstChars = (start, firstChar)=>{
-            for(let i = start; i < firstChars.length; i++){
-                if (char === firstChars[i]) {
-                    return i;
-                }
-            }
-            return -1;
-        };
-        // Check remaining slots in the menu
-        let index = getIndexFirstChars(startIndex, char);
-        // If not found in remaining slots, check from beginning
-        if (index === -1) {
-            index = getIndexFirstChars(0, char);
-        }
-        // If match was found...
-        if (index > -1) {
-            menuItems[index].focus();
-        }
+        const menuItems = findAllFocusable(wrapperRef.current, (el)=>el.hasAttribute('role') && MENU_ITEM_ROLES.indexOf(el.getAttribute('role')) !== -1);
+        focusItemMatchingFirstCharacter(menuItems, e.key, itemEl);
     }, [
         findAllFocusable
     ]);
+    return {
+        ...baseState,
+        root: {
+            ...focusAttributes,
+            ...baseState.root,
+            ref: mergedRootRef
+        },
+        setFocusByFirstCharacter
+    };
+};
+/**
+ * Base hook for MenuList component, produces state required to render the component.
+ *
+ * Does not invoke any Tabster APIs internally: arrow-key navigation and the
+ * focus-aware `setFocusByFirstCharacter` are added by the wrapper
+ * `useMenuList_unstable`. The base's `setFocusByFirstCharacter` walks the DOM
+ * via `querySelectorAll` and does not filter by Tabster's focusability rules,
+ * so consumers integrating their own focus management should layer that on top.
+ *
+ * @param props - props from this instance of MenuList
+ * @param ref - reference to root HTMLElement of MenuList
+ */ export const useMenuListBase_unstable = (props, ref)=>{
+    const triggerId = useMenuContext_unstable((context)=>context.triggerId);
+    const checkedValuesContext = useMenuContext_unstable((context)=>context.checkedValues);
+    const onCheckedValueChangeContext = useMenuContext_unstable((context)=>context.onCheckedValueChange);
+    const hasIconsContext = useMenuContext_unstable((context)=>context.hasIcons);
+    const hasCheckmarksContext = useMenuContext_unstable((context)=>context.hasCheckmarks);
+    const hasMenuContext = useHasParentContext(MenuContext);
+    const innerRef = React.useRef(null);
+    const validateNestingRef = useValidateNesting('MenuList');
+    const setFocusByFirstCharacter = React.useCallback((e, itemEl)=>{
+        if (!innerRef.current) {
+            return;
+        }
+        const menuItems = Array.from(innerRef.current.querySelectorAll(MENU_ITEM_ROLES_SELECTOR));
+        focusItemMatchingFirstCharacter(menuItems, e.key, itemEl);
+    }, []);
     var _props_checkedValues;
     const [checkedValues, setCheckedValues] = useControllableState({
-        state: (_props_checkedValues = props.checkedValues) !== null && _props_checkedValues !== void 0 ? _props_checkedValues : hasMenuContext ? menuContext.checkedValues : undefined,
+        state: (_props_checkedValues = props.checkedValues) !== null && _props_checkedValues !== void 0 ? _props_checkedValues : hasMenuContext ? checkedValuesContext : undefined,
         defaultState: props.defaultCheckedValues,
         initialState: {}
     });
     var _props_onCheckedValueChange;
-    const handleCheckedValueChange = (_props_onCheckedValueChange = props.onCheckedValueChange) !== null && _props_onCheckedValueChange !== void 0 ? _props_onCheckedValueChange : hasMenuContext ? menuContext.onCheckedValueChange : undefined;
+    const handleCheckedValueChange = (_props_onCheckedValueChange = props.onCheckedValueChange) !== null && _props_onCheckedValueChange !== void 0 ? _props_onCheckedValueChange : hasMenuContext ? onCheckedValueChangeContext : undefined;
     const toggleCheckbox = useEventCallback((e, name, value, checked)=>{
         const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
         const newCheckedItems = [
@@ -125,6 +145,7 @@ import { useValidateNesting } from '../../utils/useValidateNesting';
             checkedItems: newCheckedItems
         });
     });
+    var _props_hasIcons, _ref, _props_hasCheckmarks, _ref1;
     return {
         components: {
             root: 'div'
@@ -135,21 +156,50 @@ import { useValidateNesting } from '../../utils/useValidateNesting';
             // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: useMergedRefs(ref, innerRef, validateNestingRef),
             role: 'menu',
-            'aria-labelledby': menuContext.triggerId,
-            ...focusAttributes,
+            'aria-labelledby': triggerId,
             ...props
         }), {
             elementType: 'div'
         }),
-        hasIcons: menuContext.hasIcons || false,
-        hasCheckmarks: menuContext.hasCheckmarks || false,
         checkedValues,
+        hasIcons: (_ref = (_props_hasIcons = props.hasIcons) !== null && _props_hasIcons !== void 0 ? _props_hasIcons : hasIconsContext) !== null && _ref !== void 0 ? _ref : false,
+        hasCheckmarks: (_ref1 = (_props_hasCheckmarks = props.hasCheckmarks) !== null && _props_hasCheckmarks !== void 0 ? _props_hasCheckmarks : hasCheckmarksContext) !== null && _ref1 !== void 0 ? _ref1 : false,
         hasMenuContext,
         setFocusByFirstCharacter,
         selectRadio,
         toggleCheckbox
     };
 };
+/**
+ * Focuses the next menu item whose textContent starts with the typed character,
+ * wrapping around the list. Shared between the Tabster-free base impl and the
+ * Tabster-aware wrapper.
+ */ const focusItemMatchingFirstCharacter = (menuItems, key, current)=>{
+    let startIndex = menuItems.indexOf(current) + 1;
+    if (startIndex === menuItems.length) {
+        startIndex = 0;
+    }
+    const firstChars = menuItems.map((menuItem)=>{
+        var _menuItem_textContent;
+        return (_menuItem_textContent = menuItem.textContent) === null || _menuItem_textContent === void 0 ? void 0 : _menuItem_textContent.charAt(0).toLowerCase();
+    });
+    const char = key.toLowerCase();
+    const getIndexFirstChars = (start)=>{
+        for(let i = start; i < firstChars.length; i++){
+            if (char === firstChars[i]) {
+                return i;
+            }
+        }
+        return -1;
+    };
+    let index = getIndexFirstChars(startIndex);
+    if (index === -1) {
+        index = getIndexFirstChars(0);
+    }
+    if (index > -1) {
+        menuItems[index].focus();
+    }
+};
 /**
  * Adds some sugar to fetching multiple context selector values
  */ const useMenuContextSelectors = ()=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuList/useMenuList.ts"],"sourcesContent":["'use client';\n\nimport * 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';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\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  const validateNestingRef = useValidateNesting('MenuList');\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, validateNestingRef) 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","useValidateNesting","useMenuList_unstable","props","ref","findAllFocusable","targetDocument","menuContext","useMenuContextSelectors","hasMenuContext","focusAttributes","circular","usingPropsAndMenuContext","console","warn","innerRef","useRef","validateNestingRef","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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"}
+{"version":3,"sources":["../src/components/MenuList/useMenuList.ts"],"sourcesContent":["'use client';\n\nimport * 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';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\nconst MENU_ITEM_ROLES = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];\nconst MENU_ITEM_ROLES_SELECTOR = MENU_ITEM_ROLES.map(role => `[role=\"${role}\"]`).join(',');\n\n/**\n * Returns the props and state required to render the component.\n *\n * Composes with `useMenuListBase_unstable` and adds Tabster-driven keyboard\n * navigation: circular arrow-key focus, a `TabsterMoveFocusEvent` listener\n * that lets `useMenuPopover_unstable` handle Tab key presses, a focus-aware\n * `setFocusByFirstCharacter`, and the `hasIcons` / `hasCheckmarks` slot\n * alignment hints sourced from the parent `MenuContext`.\n */\nexport const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n  const menuContext = useMenuContextSelectors();\n  const hasMenuContext = useHasParentContext(MenuContext);\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 wrapperRef = React.useRef<HTMLElement>(null);\n  const { findAllFocusable } = useFocusFinders();\n  const { targetDocument } = useFluent();\n  const focusAttributes = useArrowNavigationGroup({ circular: true });\n\n  const baseState = useMenuListBase_unstable(props, ref);\n  // recreate root non-mutatively: merge wrapperRef so the effect below can\n  // observe the rendered DOM element, and add Tabster arrow-nav attributes\n  const mergedRootRef = useMergedRefs(baseState.root.ref, wrapperRef) as React.Ref<HTMLDivElement>;\n\n  React.useEffect(() => {\n    const element = wrapperRef.current;\n\n    if (!hasMenuContext || !targetDocument || !element) {\n      return;\n    }\n\n    const onTabsterMoveFocus = (e: TabsterMoveFocusEvent) => {\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\n    targetDocument.addEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);\n    return () => {\n      targetDocument.removeEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);\n    };\n  }, [hasMenuContext, targetDocument]);\n\n  const setFocusByFirstCharacter = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n      if (!wrapperRef.current) {\n        return;\n      }\n      const menuItems = findAllFocusable(\n        wrapperRef.current,\n        (el: HTMLElement) => el.hasAttribute('role') && MENU_ITEM_ROLES.indexOf(el.getAttribute('role')!) !== -1,\n      );\n      focusItemMatchingFirstCharacter(menuItems, e.key, itemEl);\n    },\n    [findAllFocusable],\n  );\n\n  return {\n    ...baseState,\n    root: {\n      ...focusAttributes,\n      ...baseState.root,\n      ref: mergedRootRef,\n    },\n    setFocusByFirstCharacter,\n  };\n};\n\n/**\n * Base hook for MenuList component, produces state required to render the component.\n *\n * Does not invoke any Tabster APIs internally: arrow-key navigation and the\n * focus-aware `setFocusByFirstCharacter` are added by the wrapper\n * `useMenuList_unstable`. The base's `setFocusByFirstCharacter` walks the DOM\n * via `querySelectorAll` and does not filter by Tabster's focusability rules,\n * so consumers integrating their own focus management should layer that on top.\n *\n * @param props - props from this instance of MenuList\n * @param ref - reference to root HTMLElement of MenuList\n */\nexport const useMenuListBase_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const checkedValuesContext = useMenuContext_unstable(context => context.checkedValues);\n  const onCheckedValueChangeContext = useMenuContext_unstable(context => context.onCheckedValueChange);\n  const hasIconsContext = useMenuContext_unstable(context => context.hasIcons);\n  const hasCheckmarksContext = useMenuContext_unstable(context => context.hasCheckmarks);\n  const hasMenuContext = useHasParentContext(MenuContext);\n\n  const innerRef = React.useRef<HTMLElement>(null);\n  const validateNestingRef = useValidateNesting('MenuList');\n\n  const setFocusByFirstCharacter = React.useCallback((e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n    if (!innerRef.current) {\n      return;\n    }\n    const menuItems = Array.from(innerRef.current.querySelectorAll<HTMLElement>(MENU_ITEM_ROLES_SELECTOR));\n    focusItemMatchingFirstCharacter(menuItems, e.key, itemEl);\n  }, []);\n\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues ?? (hasMenuContext ? checkedValuesContext : undefined),\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n\n  const handleCheckedValueChange =\n    props.onCheckedValueChange ?? (hasMenuContext ? onCheckedValueChangeContext : 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, validateNestingRef) as React.Ref<HTMLDivElement>,\n        role: 'menu',\n        'aria-labelledby': triggerId,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    checkedValues,\n    hasIcons: props.hasIcons ?? hasIconsContext ?? false,\n    hasCheckmarks: props.hasCheckmarks ?? hasCheckmarksContext ?? false,\n    hasMenuContext,\n    setFocusByFirstCharacter,\n    selectRadio,\n    toggleCheckbox,\n  };\n};\n\n/**\n * Focuses the next menu item whose textContent starts with the typed character,\n * wrapping around the list. Shared between the Tabster-free base impl and the\n * Tabster-aware wrapper.\n */\nconst focusItemMatchingFirstCharacter = (menuItems: HTMLElement[], key: string, current: HTMLElement) => {\n  let startIndex = menuItems.indexOf(current) + 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 = key.toLowerCase();\n\n  const getIndexFirstChars = (start: number) => {\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  let index = getIndexFirstChars(startIndex);\n  if (index === -1) {\n    index = getIndexFirstChars(0);\n  }\n  if (index > -1) {\n    menuItems[index].focus();\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","useValidateNesting","MENU_ITEM_ROLES","MENU_ITEM_ROLES_SELECTOR","map","role","join","useMenuList_unstable","props","ref","menuContext","useMenuContextSelectors","hasMenuContext","usingPropsAndMenuContext","console","warn","wrapperRef","useRef","findAllFocusable","targetDocument","focusAttributes","circular","baseState","useMenuListBase_unstable","mergedRootRef","root","useEffect","element","current","onTabsterMoveFocus","e","nextElement","detail","next","contains","activeElement","preventDefault","addEventListener","removeEventListener","setFocusByFirstCharacter","useCallback","itemEl","menuItems","el","hasAttribute","indexOf","getAttribute","focusItemMatchingFirstCharacter","key","triggerId","context","checkedValuesContext","checkedValues","onCheckedValueChangeContext","onCheckedValueChange","hasIconsContext","hasIcons","hasCheckmarksContext","hasCheckmarks","innerRef","validateNestingRef","Array","from","querySelectorAll","setCheckedValues","state","undefined","defaultState","defaultCheckedValues","initialState","handleCheckedValueChange","toggleCheckbox","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","always","elementType","startIndex","length","firstChars","menuItem","textContent","charAt","toLowerCase","char","getIndexFirstChars","start","i","index","focus","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}

package/lib/components/MenuList/useMenuListContextValues.js

@@ -1,14 +1,22 @@
+'use client';
+import * as React from 'react';
 export function useMenuListContextValues_unstable(state) {
     const { checkedValues, hasCheckmarks, hasIcons, selectRadio, setFocusByFirstCharacter, toggleCheckbox } = state;
-    // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
-    const menuList = {
+    const menuList = React.useMemo(()=>({
+            checkedValues,
+            hasCheckmarks,
+            hasIcons,
+            selectRadio,
+            setFocusByFirstCharacter,
+            toggleCheckbox
+        }), [
         checkedValues,
         hasCheckmarks,
         hasIcons,
         selectRadio,
         setFocusByFirstCharacter,
         toggleCheckbox
-    };
+    ]);
     return {
         menuList
     };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuList/useMenuListContextValues.ts"],"sourcesContent":["import type { MenuListContextValues, MenuListState } from './MenuList.types';\n\nexport function useMenuListContextValues_unstable(state: MenuListState): MenuListContextValues {\n  const { checkedValues, hasCheckmarks, hasIcons, selectRadio, setFocusByFirstCharacter, toggleCheckbox } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const menuList = {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    selectRadio,\n    setFocusByFirstCharacter,\n    toggleCheckbox,\n  };\n\n  return { menuList };\n}\n"],"names":["useMenuListContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","selectRadio","setFocusByFirstCharacter","toggleCheckbox","menuList"],"mappings":"AAEA,OAAO,SAASA,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,wBAAwB,EAAEC,cAAc,EAAE,GAAGN;IAE1G,mGAAmG;IACnG,MAAMO,WAAW;QACfN;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAS;AACpB"}
+{"version":3,"sources":["../src/components/MenuList/useMenuListContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { MenuListContextValues, MenuListState } from './MenuList.types';\n\nexport function useMenuListContextValues_unstable(state: MenuListState): MenuListContextValues {\n  const { checkedValues, hasCheckmarks, hasIcons, selectRadio, setFocusByFirstCharacter, toggleCheckbox } = state;\n\n  const menuList = React.useMemo(\n    () => ({\n      checkedValues,\n      hasCheckmarks,\n      hasIcons,\n      selectRadio,\n      setFocusByFirstCharacter,\n      toggleCheckbox,\n    }),\n    [checkedValues, hasCheckmarks, hasIcons, selectRadio, setFocusByFirstCharacter, toggleCheckbox],\n  );\n\n  return { menuList };\n}\n"],"names":["React","useMenuListContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","selectRadio","setFocusByFirstCharacter","toggleCheckbox","menuList","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,wBAAwB,EAAEC,cAAc,EAAE,GAAGN;IAE1G,MAAMO,WAAWT,MAAMU,OAAO,CAC5B,IAAO,CAAA;YACLP;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACL;QAAeC;QAAeC;QAAUC;QAAaC;QAA0BC;KAAe;IAGjG,OAAO;QAAEC;IAAS;AACpB"}

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

@@ -27,6 +27,7 @@ export const useMenuListStyles_unstable = state => {
   'use no memo';
 
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","menuListClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","hasMenuContext","Bqenvij","d","p","useMenuListStyles_unstable","state","styles","className"],"sources":["useMenuListStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nexport const menuListClassNames = {\n    root: 'fui-MenuList'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '2px'\n    },\n    hasMenuContext: {\n        height: '100%'\n    }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuListStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGH,QAAA;EAAAE,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGjB,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACL,cAAc,IAAIM,MAAM,CAACN,cAAc,EAAEK,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EAC9I,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","__styles","menuListClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","hasMenuContext","Bqenvij","d","p","useMenuListStyles_unstable","state","styles","className"],"sources":["useMenuListStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nexport const menuListClassNames = {\n    root: 'fui-MenuList'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '2px'\n    },\n    hasMenuContext: {\n        height: '100%'\n    }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuListStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGH,QAAA;EAAAE,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1B;EACAW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGjB,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACL,cAAc,IAAIM,MAAM,CAACN,cAAc,EAAEK,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EAC9I,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -18,6 +18,7 @@ const useStyles = makeStyles({
  */ export const useMenuListStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuList/useMenuListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuListSlots, MenuListState } from './MenuList.types';\n\nexport const menuListClassNames: SlotClassNames<MenuListSlots> = {\n  root: 'fui-MenuList',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '2px',\n  },\n  hasMenuContext: {\n    height: '100%',\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    menuListClassNames.root,\n    styles.root,\n    state.hasMenuContext && styles.hasMenuContext,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","menuListClassNames","root","useStyles","display","flexDirection","gap","hasMenuContext","height","useMenuListStyles_unstable","state","styles","className"],"mappings":"AAAA;AAGA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYH,WAAW;IAC3BE,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAC,gBAAgB;QACdC,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,GAAGb,aACrBE,mBAAmBC,IAAI,EACvBS,OAAOT,IAAI,EACXQ,MAAMH,cAAc,IAAII,OAAOJ,cAAc,EAC7CG,MAAMR,IAAI,CAACU,SAAS;IAEtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuList/useMenuListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuListSlots, MenuListState } from './MenuList.types';\n\nexport const menuListClassNames: SlotClassNames<MenuListSlots> = {\n  root: 'fui-MenuList',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '2px',\n  },\n  hasMenuContext: {\n    height: '100%',\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n  'use no memo';\n\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    menuListClassNames.root,\n    styles.root,\n    state.hasMenuContext && styles.hasMenuContext,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","menuListClassNames","root","useStyles","display","flexDirection","gap","hasMenuContext","height","useMenuListStyles_unstable","state","styles","className"],"mappings":"AAAA;AAGA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYH,WAAW;IAC3BE,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAC,gBAAgB;QACdC,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASR;IACf,oDAAoD;IACpDO,MAAMR,IAAI,CAACU,SAAS,GAAGb,aACrBE,mBAAmBC,IAAI,EACvBS,OAAOT,IAAI,EACXQ,MAAMH,cAAc,IAAII,OAAOJ,cAAc,EAC7CG,MAAMR,IAAI,CAACU,SAAS;IAEtB,OAAOF;AACT,EAAE"}

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

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

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

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

package/lib/components/MenuPopover/index.js

@@ -1,4 +1,4 @@
 export { MenuPopover } from './MenuPopover';
 export { renderMenuPopover_unstable } from './renderMenuPopover';
-export { useMenuPopover_unstable } from './useMenuPopover';
+export { useMenuPopover_unstable, useMenuPopoverBase_unstable } from './useMenuPopover';
 export { menuPopoverClassNames, useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuPopover/index.ts"],"sourcesContent":["export { MenuPopover } from './MenuPopover';\nexport type { MenuPopoverProps, MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nexport { renderMenuPopover_unstable } from './renderMenuPopover';\nexport { useMenuPopover_unstable } from './useMenuPopover';\nexport { menuPopoverClassNames, useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles';\n"],"names":["MenuPopover","renderMenuPopover_unstable","useMenuPopover_unstable","menuPopoverClassNames","useMenuPopoverStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}
+{"version":3,"sources":["../src/components/MenuPopover/index.ts"],"sourcesContent":["export { MenuPopover } from './MenuPopover';\nexport type { MenuPopoverProps, MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nexport { renderMenuPopover_unstable } from './renderMenuPopover';\nexport { useMenuPopover_unstable, useMenuPopoverBase_unstable } from './useMenuPopover';\nexport { menuPopoverClassNames, useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles';\n"],"names":["MenuPopover","renderMenuPopover_unstable","useMenuPopover_unstable","useMenuPopoverBase_unstable","menuPopoverClassNames","useMenuPopoverStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,mBAAmB;AACxF,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}

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

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

package/lib/components/MenuPopover/useMenuPopover.js

@@ -9,14 +9,15 @@ import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { useMenuListContext_unstable } from '../../contexts/menuListContext';
 import { dispatchMenuEnterEvent, useIsSubmenu } from '../../utils/index';
 /**
- * Create the state required to render MenuPopover.
+ * Base hook for MenuPopover, produces state required to render the component.
  *
- * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,
- * before being passed to renderMenuPopover_unstable.
+ * Does not invoke `@fluentui/react-tabster` focus-restoration or
+ * `@fluentui/react-motion` ref-forwarding APIs internally; the wrapper
+ * `useMenuPopover_unstable` layers those on top.
  *
  * @param props - props from this instance of MenuPopover
  * @param ref - reference to root HTMLElement of MenuPopover
- */ export const useMenuPopover_unstable = (props, ref)=>{
+ */ export const useMenuPopoverBase_unstable = (props, ref)=>{
     'use no memo';
     const safeZone = useMenuContext_unstable((context)=>context.safeZone);
     const popoverRef = useMenuContext_unstable((context)=>context.menuPopoverRef);
@@ -30,7 +31,6 @@ import { dispatchMenuEnterEvent, useIsSubmenu } from '../../utils/index';
         return (_ctx_shouldCloseOnArrowLeft = ctx.shouldCloseOnArrowLeft) !== null && _ctx_shouldCloseOnArrowLeft !== void 0 ? _ctx_shouldCloseOnArrowLeft : true;
     });
     const canDispatchCustomEventRef = React.useRef(true);
-    const restoreFocusSourceAttributes = useRestoreFocusSource();
     const [setThrottleTimeout, clearThrottleTimeout] = useTimeout();
     const { dir } = useFluent();
     const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;
@@ -65,12 +65,11 @@ import { dispatchMenuEnterEvent, useIsSubmenu } from '../../utils/index';
     const mountNode = useMenuContext_unstable((context)=>context.mountNode);
     const rootProps = slot.always(getIntrinsicElementProps('div', {
         role: 'presentation',
-        ...restoreFocusSourceAttributes,
         ...props,
         // FIXME:
         // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
         // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-        ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef, useMotionForwardedRef())
+        ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef)
     }), {
         elementType: 'div'
     });
@@ -126,3 +125,24 @@ import { dispatchMenuEnterEvent, useIsSubmenu } from '../../utils/index';
         root: rootProps
     };
 };
+/**
+ * Create the state required to render MenuPopover.
+ *
+ * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,
+ * before being passed to renderMenuPopover_unstable.
+ *
+ * @param props - props from this instance of MenuPopover
+ * @param ref - reference to root HTMLElement of MenuPopover
+ */ export const useMenuPopover_unstable = (props, ref)=>{
+    const restoreFocusSourceAttributes = useRestoreFocusSource();
+    const motionRef = useMotionForwardedRef();
+    const baseState = useMenuPopoverBase_unstable(props, ref);
+    return {
+        ...baseState,
+        root: {
+            ...restoreFocusSourceAttributes,
+            ...baseState.root,
+            ref: useMergedRefs(baseState.root.ref, motionRef)
+        }
+    };
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuPopover/useMenuPopover.ts"],"sourcesContent":["'use client';\n\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot, useTimeout } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { dispatchMenuEnterEvent, useIsSubmenu } from '../../utils/index';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n  'use no memo';\n\n  const safeZone = useMenuContext_unstable(context => context.safeZone);\n  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n\n  const isSubmenu = useIsSubmenu();\n  const shouldCloseOnArrowLeft = useMenuListContext_unstable(ctx => ctx.shouldCloseOnArrowLeft ?? true);\n\n  const canDispatchCustomEventRef = React.useRef(true);\n  const restoreFocusSourceAttributes = useRestoreFocusSource();\n  const [setThrottleTimeout, clearThrottleTimeout] = useTimeout();\n\n  const { dir } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(\n    (node: HTMLElement) => {\n      if (node) {\n        // Dispatches the custom menu mouse enter event with throttling\n        // Needs to trigger on mouseover to support keyboard + mouse together\n        // i.e. keyboard opens submenus while cursor is still on the parent\n        node.addEventListener('mouseover', e => {\n          if (canDispatchCustomEventRef.current) {\n            canDispatchCustomEventRef.current = false;\n            dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n            setThrottleTimeout(() => {\n              canDispatchCustomEventRef.current = true;\n            }, 250);\n          }\n        });\n      }\n    },\n    [popoverRef, setThrottleTimeout],\n  );\n\n  React.useEffect(() => {\n    return () => clearThrottleTimeout();\n  }, [clearThrottleTimeout]);\n\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const mountNode = useMenuContext_unstable(context => context.mountNode);\n\n  const rootProps = slot.always(\n    getIntrinsicElementProps('div', {\n      role: 'presentation',\n      ...restoreFocusSourceAttributes,\n      ...props,\n      // FIXME:\n      // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n      // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n      ref: useMergedRefs(\n        ref,\n        popoverRef,\n        mouseOverListenerCallbackRef,\n        useMotionForwardedRef(),\n      ) 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 && shouldCloseOnArrowLeft && key === CloseArrowKey)) {\n      if (open && popoverRef.current?.contains(event.target as HTMLElement) && !event.isDefaultPrevented()) {\n        setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n        // stop propagation to avoid conflicting with other elements that listen for `Escape`\n        // e,g: Dialog, Popover, Menu and Tooltip\n        event.preventDefault();\n      }\n    }\n    if (key === Tab) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n      if (!isSubmenu) {\n        triggerRef.current?.focus();\n      }\n    }\n    onKeyDownOriginal?.(event);\n  });\n\n  return {\n    inline,\n    mountNode,\n    safeZone,\n    components: { root: 'div' },\n    root: rootProps,\n  };\n};\n"],"names":["ArrowLeft","Tab","ArrowRight","Escape","useFluent_unstable","useFluent","useMotionForwardedRef","useRestoreFocusSource","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useTimeout","React","useMenuContext_unstable","useMenuListContext_unstable","dispatchMenuEnterEvent","useIsSubmenu","useMenuPopover_unstable","props","ref","safeZone","context","popoverRef","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","shouldCloseOnArrowLeft","ctx","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":"AAAA;AAEA,SAASA,SAAS,EAAEC,GAAG,EAAEC,UAAU,EAAEC,MAAM,QAAQ,0BAA0B;AAC7E,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,aAAa,EAAEC,IAAI,EAAEC,UAAU,QAAQ,4BAA4B;AACxH,YAAYC,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,sBAAsB,EAAEC,YAAY,QAAQ,oBAAoB;AAGzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D;IAEA,MAAMC,WAAWP,wBAAwBQ,CAAAA,UAAWA,QAAQD,QAAQ;IACpE,MAAME,aAAaT,wBAAwBQ,CAAAA,UAAWA,QAAQE,cAAc;IAC5E,MAAMC,UAAUX,wBAAwBQ,CAAAA,UAAWA,QAAQG,OAAO;IAClE,MAAMC,OAAOZ,wBAAwBQ,CAAAA,UAAWA,QAAQI,IAAI;IAC5D,MAAMC,cAAcb,wBAAwBQ,CAAAA,UAAWA,QAAQK,WAAW;IAC1E,MAAMC,aAAad,wBAAwBQ,CAAAA,UAAWA,QAAQM,UAAU;IAExE,MAAMC,YAAYZ;IAClB,MAAMa,yBAAyBf,4BAA4BgB,CAAAA;YAAOA;eAAAA,CAAAA,8BAAAA,IAAID,sBAAsB,cAA1BC,yCAAAA,8BAA8B;;IAEhG,MAAMC,4BAA4BnB,MAAMoB,MAAM,CAAC;IAC/C,MAAMC,+BAA+B3B;IACrC,MAAM,CAAC4B,oBAAoBC,qBAAqB,GAAGxB;IAEnD,MAAM,EAAEyB,GAAG,EAAE,GAAGhC;IAChB,MAAMiC,gBAAgBD,QAAQ,QAAQrC,YAAYE;IAElD,kEAAkE;IAClE,kFAAkF;IAClF,MAAMqC,+BAA+B1B,MAAM2B,WAAW,CACpD,CAACC;QACC,IAAIA,MAAM;YACR,+DAA+D;YAC/D,qEAAqE;YACrE,mEAAmE;YACnEA,KAAKC,gBAAgB,CAAC,aAAaC,CAAAA;gBACjC,IAAIX,0BAA0BY,OAAO,EAAE;oBACrCZ,0BAA0BY,OAAO,GAAG;oBACpC5B,uBAAuBO,WAAWqB,OAAO,EAAiBD;oBAC1DR,mBAAmB;wBACjBH,0BAA0BY,OAAO,GAAG;oBACtC,GAAG;gBACL;YACF;QACF;IACF,GACA;QAACrB;QAAYY;KAAmB;IAGlCtB,MAAMgC,SAAS,CAAC;QACd,OAAO,IAAMT;IACf,GAAG;QAACA;KAAqB;QAEVtB;IAAf,MAAMgC,SAAShC,CAAAA,2BAAAA,wBAAwBQ,CAAAA,UAAWA,QAAQwB,MAAM,eAAjDhC,sCAAAA,2BAAsD;IACrE,MAAMiC,YAAYjC,wBAAwBQ,CAAAA,UAAWA,QAAQyB,SAAS;IAEtE,MAAMC,YAAYrC,KAAKsC,MAAM,CAC3BzC,yBAAyB,OAAO;QAC9B0C,MAAM;QACN,GAAGhB,4BAA4B;QAC/B,GAAGf,KAAK;QACR,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FC,KAAKV,cACHU,KACAG,YACAgB,8BACAjC;IAEJ,IACA;QAAE6C,aAAa;IAAM;IAEvB,MAAM,EAAEC,cAAcC,oBAAoB,EAAEC,WAAWC,iBAAiB,EAAE,GAAGP;IAC7EA,UAAUI,YAAY,GAAG3C,iBAAiB,CAAC+C;QACzC,IAAI7B,eAAeE,WAAW;YAC5BJ,QAAQ+B,OAAO;gBAAE9B,MAAM;gBAAM+B,UAAU;gBAAOC,MAAM;gBAAyBF;YAAM;QACrF;QACAH,iCAAAA,2CAAAA,qBAAuBG;IACzB;IACAR,UAAUM,SAAS,GAAG7C,iBAAiB,CAAC+C;QACtC,MAAMG,MAAMH,MAAMG,GAAG;QACrB,IAAIA,QAAQxD,UAAW0B,aAAaC,0BAA0B6B,QAAQrB,eAAgB;gBACxEf;YAAZ,IAAIG,UAAQH,sBAAAA,WAAWqB,OAAO,cAAlBrB,0CAAAA,oBAAoBqC,QAAQ,CAACJ,MAAMK,MAAM,MAAoB,CAACL,MAAMM,kBAAkB,IAAI;gBACpGrC,QAAQ+B,OAAO;oBAAE9B,MAAM;oBAAO+B,UAAU;oBAAMC,MAAM;oBAAsBF;gBAAM;gBAChF,qFAAqF;gBACrF,yCAAyC;gBACzCA,MAAMO,cAAc;YACtB;QACF;QACA,IAAIJ,QAAQ1D,KAAK;YACfwB,QAAQ+B,OAAO;gBAAE9B,MAAM;gBAAO+B,UAAU;gBAAMC,MAAM;gBAAsBF;YAAM;YAChF,IAAI,CAAC3B,WAAW;oBACdD;iBAAAA,sBAAAA,WAAWgB,OAAO,cAAlBhB,0CAAAA,oBAAoBoC,KAAK;YAC3B;QACF;QACAT,8BAAAA,wCAAAA,kBAAoBC;IACtB;IAEA,OAAO;QACLV;QACAC;QACA1B;QACA4C,YAAY;YAAEC,MAAM;QAAM;QAC1BA,MAAMlB;IACR;AACF,EAAE"}
+{"version":3,"sources":["../src/components/MenuPopover/useMenuPopover.ts"],"sourcesContent":["'use client';\n\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot, useTimeout } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { dispatchMenuEnterEvent, useIsSubmenu } from '../../utils/index';\nimport type { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\n\n/**\n * Base hook for MenuPopover, produces state required to render the component.\n *\n * Does not invoke `@fluentui/react-tabster` focus-restoration or\n * `@fluentui/react-motion` ref-forwarding APIs internally; the wrapper\n * `useMenuPopover_unstable` layers those on top.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopoverBase_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n  'use no memo';\n\n  const safeZone = useMenuContext_unstable(context => context.safeZone);\n  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n\n  const isSubmenu = useIsSubmenu();\n  const shouldCloseOnArrowLeft = useMenuListContext_unstable(ctx => ctx.shouldCloseOnArrowLeft ?? true);\n\n  const canDispatchCustomEventRef = React.useRef(true);\n  const [setThrottleTimeout, clearThrottleTimeout] = useTimeout();\n\n  const { dir } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(\n    (node: HTMLElement) => {\n      if (node) {\n        // Dispatches the custom menu mouse enter event with throttling\n        // Needs to trigger on mouseover to support keyboard + mouse together\n        // i.e. keyboard opens submenus while cursor is still on the parent\n        node.addEventListener('mouseover', e => {\n          if (canDispatchCustomEventRef.current) {\n            canDispatchCustomEventRef.current = false;\n            dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n            setThrottleTimeout(() => {\n              canDispatchCustomEventRef.current = true;\n            }, 250);\n          }\n        });\n      }\n    },\n    [popoverRef, setThrottleTimeout],\n  );\n\n  React.useEffect(() => {\n    return () => clearThrottleTimeout();\n  }, [clearThrottleTimeout]);\n\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const mountNode = useMenuContext_unstable(context => context.mountNode);\n\n  const rootProps = slot.always(\n    getIntrinsicElementProps('div', {\n      role: 'presentation',\n      ...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\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\n  rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    const key = event.key;\n    if (key === Escape || (isSubmenu && shouldCloseOnArrowLeft && key === CloseArrowKey)) {\n      if (open && popoverRef.current?.contains(event.target as HTMLElement) && !event.isDefaultPrevented()) {\n        setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n        // stop propagation to avoid conflicting with other elements that listen for `Escape`\n        // e,g: Dialog, Popover, Menu and Tooltip\n        event.preventDefault();\n      }\n    }\n    if (key === Tab) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n      if (!isSubmenu) {\n        triggerRef.current?.focus();\n      }\n    }\n    onKeyDownOriginal?.(event);\n  });\n\n  return {\n    inline,\n    mountNode,\n    safeZone,\n    components: { root: 'div' },\n    root: rootProps,\n  };\n};\n\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 restoreFocusSourceAttributes = useRestoreFocusSource();\n  const motionRef = useMotionForwardedRef();\n  const baseState = useMenuPopoverBase_unstable(props, ref);\n\n  return {\n    ...baseState,\n    root: {\n      ...restoreFocusSourceAttributes,\n      ...baseState.root,\n      ref: useMergedRefs(baseState.root.ref, motionRef) as React.Ref<HTMLDivElement>,\n    },\n  };\n};\n"],"names":["ArrowLeft","Tab","ArrowRight","Escape","useFluent_unstable","useFluent","useMotionForwardedRef","useRestoreFocusSource","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useTimeout","React","useMenuContext_unstable","useMenuListContext_unstable","dispatchMenuEnterEvent","useIsSubmenu","useMenuPopoverBase_unstable","props","ref","safeZone","context","popoverRef","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","shouldCloseOnArrowLeft","ctx","canDispatchCustomEventRef","useRef","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","useMenuPopover_unstable","restoreFocusSourceAttributes","motionRef","baseState"],"mappings":"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"}

package/lib/components/MenuPopover/useMenuPopoverStyles.styles.js

@@ -63,6 +63,7 @@ export const useMenuPopoverStyles_unstable = state => {
   'use no memo';
 
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);
   return state;
 };

package/lib/components/MenuPopover/useMenuPopoverStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","tokens","typographyStyles","menuPopoverClassNames","root","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","De3pzq","sj55zd","B7ck84d","Bf4jedk","B2u0y6b","B68tc82","a9b677","E5pizo","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","useMenuPopoverStyles_unstable","state","styles","className"],"sources":["useMenuPopoverStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const menuPopoverClassNames = {\n    root: 'fui-MenuPopover'\n};\nconst useStyles = makeStyles({\n    root: {\n        borderRadius: tokens.borderRadiusMedium,\n        backgroundColor: tokens.colorNeutralBackground1,\n        color: tokens.colorNeutralForeground1,\n        boxSizing: 'border-box',\n        minWidth: '138px',\n        maxWidth: '300px',\n        overflowX: 'hidden',\n        width: 'max-content',\n        boxShadow: `${tokens.shadow16}`,\n        padding: '4px',\n        border: `1px solid ${tokens.colorTransparentStroke}`,\n        ...typographyStyles.body1\n    }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuPopoverStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAejB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAG5C,SAAS,CAAC,CAAC;EAC1B2C,KAAK,CAAC5C,IAAI,CAAC8C,SAAS,GAAGnD,YAAY,CAACI,qBAAqB,CAACC,IAAI,EAAE6C,MAAM,CAAC7C,IAAI,EAAE4C,KAAK,CAAC5C,IAAI,CAAC8C,SAAS,CAAC;EAClG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","__styles","tokens","typographyStyles","menuPopoverClassNames","root","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","De3pzq","sj55zd","B7ck84d","Bf4jedk","B2u0y6b","B68tc82","a9b677","E5pizo","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","useMenuPopoverStyles_unstable","state","styles","className"],"sources":["useMenuPopoverStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const menuPopoverClassNames = {\n    root: 'fui-MenuPopover'\n};\nconst useStyles = makeStyles({\n    root: {\n        borderRadius: tokens.borderRadiusMedium,\n        backgroundColor: tokens.colorNeutralBackground1,\n        color: tokens.colorNeutralForeground1,\n        boxSizing: 'border-box',\n        minWidth: '138px',\n        maxWidth: '300px',\n        overflowX: 'hidden',\n        width: 'max-content',\n        boxShadow: `${tokens.shadow16}`,\n        padding: '4px',\n        border: `1px solid ${tokens.colorTransparentStroke}`,\n        ...typographyStyles.body1\n    }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuPopoverStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAejB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAG5C,SAAS,CAAC,CAAC;EAC1B;EACA2C,KAAK,CAAC5C,IAAI,CAAC8C,SAAS,GAAGnD,YAAY,CAACI,qBAAqB,CAACC,IAAI,EAAE6C,MAAM,CAAC7C,IAAI,EAAE4C,KAAK,CAAC5C,IAAI,CAAC8C,SAAS,CAAC;EAClG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js

@@ -25,6 +25,7 @@ const useStyles = makeStyles({
  */ export const useMenuPopoverStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuPopover/useMenuPopoverStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {\n  root: 'fui-MenuPopover',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    borderRadius: tokens.borderRadiusMedium,\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    boxSizing: 'border-box',\n    minWidth: '138px',\n    maxWidth: '300px',\n    overflowX: 'hidden',\n    width: 'max-content',\n    boxShadow: `${tokens.shadow16}`,\n    padding: '4px',\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    ...typographyStyles.body1,\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","typographyStyles","menuPopoverClassNames","root","useStyles","borderRadius","borderRadiusMedium","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxSizing","minWidth","maxWidth","overflowX","width","boxShadow","shadow16","padding","border","colorTransparentStroke","body1","useMenuPopoverStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAIjE,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,cAAcL,OAAOM,kBAAkB;QACvCC,iBAAiBP,OAAOQ,uBAAuB;QAC/CC,OAAOT,OAAOU,uBAAuB;QACrCC,WAAW;QACXC,UAAU;QACVC,UAAU;QACVC,WAAW;QACXC,OAAO;QACPC,WAAW,GAAGhB,OAAOiB,QAAQ,EAAE;QAC/BC,SAAS;QACTC,QAAQ,CAAC,UAAU,EAAEnB,OAAOoB,sBAAsB,EAAE;QACpD,GAAGnB,iBAAiBoB,KAAK;IAC3B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASpB;IACfmB,MAAMpB,IAAI,CAACsB,SAAS,GAAG3B,aAAaI,sBAAsBC,IAAI,EAAEqB,OAAOrB,IAAI,EAAEoB,MAAMpB,IAAI,CAACsB,SAAS;IACjG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuPopover/useMenuPopoverStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {\n  root: 'fui-MenuPopover',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    borderRadius: tokens.borderRadiusMedium,\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    boxSizing: 'border-box',\n    minWidth: '138px',\n    maxWidth: '300px',\n    overflowX: 'hidden',\n    width: 'max-content',\n    boxShadow: `${tokens.shadow16}`,\n    padding: '4px',\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    ...typographyStyles.body1,\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n  'use no memo';\n\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","typographyStyles","menuPopoverClassNames","root","useStyles","borderRadius","borderRadiusMedium","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxSizing","minWidth","maxWidth","overflowX","width","boxShadow","shadow16","padding","border","colorTransparentStroke","body1","useMenuPopoverStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAIjE,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,cAAcL,OAAOM,kBAAkB;QACvCC,iBAAiBP,OAAOQ,uBAAuB;QAC/CC,OAAOT,OAAOU,uBAAuB;QACrCC,WAAW;QACXC,UAAU;QACVC,UAAU;QACVC,WAAW;QACXC,OAAO;QACPC,WAAW,GAAGhB,OAAOiB,QAAQ,EAAE;QAC/BC,SAAS;QACTC,QAAQ,CAAC,UAAU,EAAEnB,OAAOoB,sBAAsB,EAAE;QACpD,GAAGnB,iBAAiBoB,KAAK;IAC3B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASpB;IACf,oDAAoD;IACpDmB,MAAMpB,IAAI,CAACsB,SAAS,GAAG3B,aAAaI,sBAAsBC,IAAI,EAAEqB,OAAOrB,IAAI,EAAEoB,MAAMpB,IAAI,CAACsB,SAAS;IACjG,OAAOF;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuSplitGroup/MenuSplitGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { MenuSplitGroupContextValue } from '../../contexts/menuSplitGroupContext';\n\nexport type MenuSplitGroupSlots = {\n  root: Slot<'div'>;\n};\n\nexport type MenuSplitGroupContextValues = {\n  menuSplitGroup: MenuSplitGroupContextValue;\n};\n\n/**\n * MenuSplitGroup Props\n */\nexport type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots>;\n\n/**\n * State used in rendering MenuSplitGroup\n */\nexport type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots> &\n  Pick<MenuSplitGroupContextValue, 'setMultiline'>;\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WACmD"}
+{"version":3,"sources":["../src/components/MenuSplitGroup/MenuSplitGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MenuSplitGroupContextValue } from '../../contexts/menuSplitGroupContext';\n\nexport type MenuSplitGroupSlots = {\n  root: Slot<'div'>;\n};\n\nexport type MenuSplitGroupContextValues = {\n  menuSplitGroup: MenuSplitGroupContextValue;\n};\n\n/**\n * MenuSplitGroup Props\n */\nexport type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots>;\n\n/**\n * State used in rendering MenuSplitGroup\n */\nexport type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots> &\n  Pick<MenuSplitGroupContextValue, 'setMultiline'>;\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WACmD"}