@fluentui/react-menu 9.7.15 → 9.8.0

package/lib/components/MenuList/useMenuList.js

@@ -6,142 +6,146 @@ import { useMenuContext_unstable } from '../../contexts/menuContext';
 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 menuContext = useMenuContextSelectors();
-  const hasMenuContext = useHasParentContext(MenuContext);
-  const focusAttributes = useArrowNavigationGroup({
-    circular: true,
-    ignoreDefaultKeydown: {
-      Tab: hasMenuContext
-    }
-  });
-  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 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) {
-      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;
+ */ export const useMenuList_unstable = (props, ref)=>{
+    const { findAllFocusable  } = useFocusFinders();
+    const menuContext = useMenuContextSelectors();
+    const hasMenuContext = useHasParentContext(MenuContext);
+    const focusAttributes = useArrowNavigationGroup({
+        circular: true,
+        ignoreDefaultKeydown: {
+            Tab: hasMenuContext
+        }
+    });
+    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 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 innerRef = React.useRef(null);
+    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) {
+            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();
+        }
+    }, [
+        findAllFocusable
+    ]);
+    var _props_checkedValues;
+    const [checkedValues, setCheckedValues] = useControllableState({
+        state: (_props_checkedValues = props.checkedValues) !== null && _props_checkedValues !== void 0 ? _props_checkedValues : hasMenuContext ? menuContext.checkedValues : undefined,
+        defaultState: props.defaultCheckedValues,
+        initialState: {}
     });
-    const char = e.key.toLowerCase();
-    const getIndexFirstChars = (start, firstChar) => {
-      for (let i = start; i < firstChars.length; i++) {
-        if (char === firstChars[i]) {
-          return i;
+    var _props_onCheckedValueChange;
+    const handleCheckedValueChange = (_props_onCheckedValueChange = props.onCheckedValueChange) !== null && _props_onCheckedValueChange !== void 0 ? _props_onCheckedValueChange : hasMenuContext ? menuContext.onCheckedValueChange : undefined;
+    const toggleCheckbox = useEventCallback((e, name, value, checked)=>{
+        const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
+        const newCheckedItems = [
+            ...checkedItems
+        ];
+        if (checked) {
+            newCheckedItems.splice(newCheckedItems.indexOf(value), 1);
+        } else {
+            newCheckedItems.push(value);
         }
-      }
-      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();
-    }
-  }, [findAllFocusable]);
-  var _props_checkedValues;
-  const [checkedValues, setCheckedValues] = useControllableState({
-    state: (_props_checkedValues = props.checkedValues) !== null && _props_checkedValues !== void 0 ? _props_checkedValues : hasMenuContext ? menuContext.checkedValues : 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 toggleCheckbox = useEventCallback((e, name, value, checked) => {
-    const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
-    const newCheckedItems = [...checkedItems];
-    if (checked) {
-      newCheckedItems.splice(newCheckedItems.indexOf(value), 1);
-    } else {
-      newCheckedItems.push(value);
-    }
-    handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {
-      name,
-      checkedItems: newCheckedItems
+        handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {
+            name,
+            checkedItems: newCheckedItems
+        });
+        setCheckedValues((s)=>({
+                ...s,
+                [name]: newCheckedItems
+            }));
     });
-    setCheckedValues(s => ({
-      ...s,
-      [name]: newCheckedItems
-    }));
-  });
-  const selectRadio = useEventCallback((e, name, value) => {
-    const newCheckedItems = [value];
-    setCheckedValues(s => ({
-      ...s,
-      [name]: newCheckedItems
-    }));
-    handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {
-      name,
-      checkedItems: newCheckedItems
+    const selectRadio = useEventCallback((e, name, value)=>{
+        const newCheckedItems = [
+            value
+        ];
+        setCheckedValues((s)=>({
+                ...s,
+                [name]: newCheckedItems
+            }));
+        handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {
+            name,
+            checkedItems: newCheckedItems
+        });
     });
-  });
-  return {
-    components: {
-      root: 'div'
-    },
-    root: getNativeElementProps('div', {
-      ref: useMergedRefs(ref, innerRef),
-      role: 'menu',
-      'aria-labelledby': menuContext.triggerId,
-      ...focusAttributes,
-      ...props
-    }),
-    hasIcons: menuContext.hasIcons || false,
-    hasCheckmarks: menuContext.hasCheckmarks || false,
-    checkedValues,
-    setFocusByFirstCharacter,
-    selectRadio,
-    toggleCheckbox
-  };
+    return {
+        components: {
+            root: 'div'
+        },
+        root: getNativeElementProps('div', {
+            ref: useMergedRefs(ref, innerRef),
+            role: 'menu',
+            'aria-labelledby': menuContext.triggerId,
+            ...focusAttributes,
+            ...props
+        }),
+        hasIcons: menuContext.hasIcons || false,
+        hasCheckmarks: menuContext.hasCheckmarks || false,
+        checkedValues,
+        setFocusByFirstCharacter,
+        selectRadio,
+        toggleCheckbox
+    };
 };
 /**
  * Adds some sugar to fetching multiple context selector values
- */
-const useMenuContextSelectors = () => {
-  const checkedValues = useMenuContext_unstable(context => context.checkedValues);
-  const onCheckedValueChange = useMenuContext_unstable(context => context.onCheckedValueChange);
-  const triggerId = useMenuContext_unstable(context => context.triggerId);
-  const hasIcons = useMenuContext_unstable(context => context.hasIcons);
-  const hasCheckmarks = useMenuContext_unstable(context => context.hasCheckmarks);
-  return {
-    checkedValues,
-    onCheckedValueChange,
-    triggerId,
-    hasIcons,
-    hasCheckmarks
-  };
+ */ const useMenuContextSelectors = ()=>{
+    const checkedValues = useMenuContext_unstable((context)=>context.checkedValues);
+    const onCheckedValueChange = useMenuContext_unstable((context)=>context.onCheckedValueChange);
+    const triggerId = useMenuContext_unstable((context)=>context.triggerId);
+    const hasIcons = useMenuContext_unstable((context)=>context.hasIcons);
+    const hasCheckmarks = useMenuContext_unstable((context)=>context.hasCheckmarks);
+    return {
+        checkedValues,
+        onCheckedValueChange,
+        triggerId,
+        hasIcons,
+        hasCheckmarks
+    };
 };
 /**
  * Helper function to detect if props and MenuContext values are both used
- */
-const usingPropsAndMenuContext = (props, contextValue, hasMenuContext) => {
-  let isUsingPropsAndContext = false;
-  for (const val in contextValue) {
-    if (props[val]) {
-      isUsingPropsAndContext = true;
+ */ const usingPropsAndMenuContext = (props, contextValue, hasMenuContext)=>{
+    let isUsingPropsAndContext = false;
+    for(const val in contextValue){
+        if (props[val]) {
+            isUsingPropsAndContext = true;
+        }
     }
-  }
-  return hasMenuContext && isUsingPropsAndContext;
+    return hasMenuContext && isUsingPropsAndContext;
 };
-//# sourceMappingURL=useMenuList.js.map

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

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

package/lib/components/MenuList/useMenuListContextValues.js

@@ -1,23 +1,15 @@
 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 = {
-    checkedValues,
-    hasCheckmarks,
-    hasIcons,
-    selectRadio,
-    setFocusByFirstCharacter,
-    toggleCheckbox
-  };
-  return {
-    menuList
-  };
+    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 = {
+        checkedValues,
+        hasCheckmarks,
+        hasIcons,
+        selectRadio,
+        setFocusByFirstCharacter,
+        toggleCheckbox
+    };
+    return {
+        menuList
+    };
 }
-//# sourceMappingURL=useMenuListContextValues.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useMenuListContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","selectRadio","setFocusByFirstCharacter","toggleCheckbox","menuList"],"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"],"mappings":"AAEA,OAAO,SAASA,kCAAkCC,KAAoB,EAAyB;EAC7F,MAAM;IAAEC,aAAA;IAAeC,aAAA;IAAeC,QAAA;IAAUC,WAAA;IAAaC,wBAAA;IAA0BC;EAAc,CAAE,GAAGN,KAAA;EAE1G;EACA,MAAMO,QAAA,GAAW;IACfN,aAAA;IACAC,aAAA;IACAC,QAAA;IACAC,WAAA;IACAC,wBAAA;IACAC;EACF;EAEA,OAAO;IAAEC;EAAS;AACpB"}
+{"version":3,"sources":["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,EAAyB;IAC7F,MAAM,EAAEC,cAAa,EAAEC,cAAa,EAAEC,SAAQ,EAAEC,YAAW,EAAEC,yBAAwB,EAAEC,eAAc,EAAE,GAAGN;IAE1G,mGAAmG;IACnG,MAAMO,WAAW;QACfN;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAS;AACpB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","shorthands","menuListClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","d","useMenuListStyles_unstable","state","styles","className"],"sources":["../../../src/components/MenuList/useMenuListStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } 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    ...shorthands.gap('2px'),\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"mappings":"AACA,SAASA,YAAY,EAAAC,QAAA,EAAcC,UAAU,QAAQ;AAGrD,OAAO,MAAMC,kBAAA,GAAoD;EAC/DC,IAAA,EAAM;AACR;AAEA,MAAMC,SAAA,gBAAYJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAMlB;AAEA;;;AAGA,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAAwC;EACjF,MAAMC,MAAA,GAASR,SAAA;EACfO,KAAA,CAAMR,IAAI,CAACU,SAAS,GAAGd,YAAA,CAAaG,kBAAA,CAAmBC,IAAI,EAAES,MAAA,CAAOT,IAAI,EAAEQ,KAAA,CAAMR,IAAI,CAACU,SAAS;EAC9F,OAAOF,KAAA;AACT"}
+{"version":3,"names":["mergeClasses","__styles","shorthands","menuListClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","d","useMenuListStyles_unstable","state","styles","className"],"sources":["useMenuListStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nexport const menuListClassNames = {\n    root: 'fui-MenuList'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.gap('2px')\n    }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuListStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,EAAcC,UAAU,QAAQ,gBAAgB;AACrE,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1BO,KAAK,CAACR,IAAI,CAACU,SAAS,GAAGd,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/MenuPopover/MenuPopover.js

@@ -5,12 +5,10 @@ import { renderMenuPopover_unstable } from './renderMenuPopover';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus
- */
-export const MenuPopover = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useMenuPopover_unstable(props, ref);
-  useMenuPopoverStyles_unstable(state);
-  useCustomStyleHook_unstable('useMenuPopoverStyles_unstable')(state);
-  return renderMenuPopover_unstable(state);
+ */ export const MenuPopover = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useMenuPopover_unstable(props, ref);
+    useMenuPopoverStyles_unstable(state);
+    useCustomStyleHook_unstable('useMenuPopoverStyles_unstable')(state);
+    return renderMenuPopover_unstable(state);
 });
 MenuPopover.displayName = 'MenuPopover';
-//# sourceMappingURL=MenuPopover.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useMenuPopover_unstable","useMenuPopoverStyles_unstable","renderMenuPopover_unstable","useCustomStyleHook_unstable","MenuPopover","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/MenuPopover/MenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuPopover_unstable } from './useMenuPopover';\nimport { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles';\nimport { renderMenuPopover_unstable } from './renderMenuPopover';\nimport type { MenuPopoverProps } from './MenuPopover.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus\n */\nexport const MenuPopover: ForwardRefComponent<MenuPopoverProps> = React.forwardRef((props, ref) => {\n  const state = useMenuPopover_unstable(props, ref);\n\n  useMenuPopoverStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useMenuPopoverStyles_unstable')(state);\n\n  return renderMenuPopover_unstable(state);\n});\n\nMenuPopover.displayName = 'MenuPopover';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,uBAAuB,QAAQ;AACxC,SAASC,6BAA6B,QAAQ;AAC9C,SAASC,0BAA0B,QAAQ;AAG3C,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,WAAA,gBAAqDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACjG,MAAMC,KAAA,GAAQR,uBAAA,CAAwBM,KAAA,EAAOC,GAAA;EAE7CN,6BAAA,CAA8BO,KAAA;EAE9BL,2BAAA,CAA4B,iCAAiCK,KAAA;EAE7D,OAAON,0BAAA,CAA2BM,KAAA;AACpC;AAEAJ,WAAA,CAAYK,WAAW,GAAG"}
+{"version":3,"sources":["MenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuPopover_unstable } from './useMenuPopover';\nimport { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles';\nimport { renderMenuPopover_unstable } from './renderMenuPopover';\nimport type { MenuPopoverProps } from './MenuPopover.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus\n */\nexport const MenuPopover: ForwardRefComponent<MenuPopoverProps> = React.forwardRef((props, ref) => {\n  const state = useMenuPopover_unstable(props, ref);\n\n  useMenuPopoverStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useMenuPopoverStyles_unstable')(state);\n\n  return renderMenuPopover_unstable(state);\n});\n\nMenuPopover.displayName = 'MenuPopover';\n"],"names":["React","useMenuPopover_unstable","useMenuPopoverStyles_unstable","renderMenuPopover_unstable","useCustomStyleHook_unstable","MenuPopover","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,6BAA6B,QAAQ,gCAAgC;AAC9E,SAASC,0BAA0B,QAAQ,sBAAsB;AAGjE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjG,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CN,8BAA8BO;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAON,2BAA2BM;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

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

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=MenuPopover.types.js.map
+export { };

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/MenuPopover/MenuPopover.types.ts"],"sourcesContent":["import type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\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"],"mappings":"AAAA"}
+{"version":3,"sources":["MenuPopover.types.ts"],"sourcesContent":["import type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\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"],"names":[],"mappings":"AAAA,WAsBI"}

package/lib/components/MenuPopover/index.js

@@ -3,4 +3,3 @@ export * from './MenuPopover.types';
 export * from './renderMenuPopover';
 export * from './useMenuPopover';
 export * from './useMenuPopoverStyles.styles';
-//# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/MenuPopover/index.ts"],"sourcesContent":["export * from './MenuPopover';\nexport * from './MenuPopover.types';\nexport * from './renderMenuPopover';\nexport * from './useMenuPopover';\nexport * from './useMenuPopoverStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './MenuPopover';\nexport * from './MenuPopover.types';\nexport * from './renderMenuPopover';\nexport * from './useMenuPopover';\nexport * from './useMenuPopoverStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,gCAAgC"}

package/lib/components/MenuPopover/renderMenuPopover.js

@@ -1,19 +1,14 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 import { Portal } from '@fluentui/react-portal';
 /**
  * Render the final JSX of MenuPopover
- */
-export const renderMenuPopover_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  if (state.inline) {
-    return /*#__PURE__*/createElement(slots.root, slotProps.root);
-  }
-  return /*#__PURE__*/createElement(Portal, {
-    mountNode: state.mountNode
-  }, /*#__PURE__*/createElement(slots.root, slotProps.root));
+ */ export const renderMenuPopover_unstable = (state)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    if (state.inline) {
+        return /*#__PURE__*/ createElement(slots.root, slotProps.root);
+    }
+    return /*#__PURE__*/ createElement(Portal, {
+        mountNode: state.mountNode
+    }, /*#__PURE__*/ createElement(slots.root, slotProps.root));
 };
-//# sourceMappingURL=renderMenuPopover.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","Portal","renderMenuPopover_unstable","state","slots","slotProps","inline","root","mountNode"],"sources":["../../../src/components/MenuPopover/renderMenuPopover.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } 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) => {\n  const { slots, slotProps } = getSlotsNext<MenuPopoverSlots>(state);\n\n  if (state.inline) {\n    return <slots.root {...slotProps.root} />;\n  }\n\n  return (\n    <Portal mountNode={state.mountNode}>\n      <slots.root {...slotProps.root} />\n    </Portal>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAE7B,SAASC,MAAM,QAAQ;AAEvB;;;AAGA,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAA4B;EACrE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGL,YAAA,CAA+BG,KAAA;EAE5D,IAAIA,KAAA,CAAMG,MAAM,EAAE;IAChB,oBAAOP,aAdX,CAcYK,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI;EACvC;EAEA,oBACER,aAlBJ,CAkBKE,MAAA;IAAOO,SAAA,EAAWL,KAAA,CAAMK;kBACvBT,aAnBN,CAmBOK,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI;AAGpC"}
+{"version":3,"sources":["renderMenuPopover.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } 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) => {\n  const { slots, slotProps } = getSlotsNext<MenuPopoverSlots>(state);\n\n  if (state.inline) {\n    return <slots.root {...slotProps.root} />;\n  }\n\n  return (\n    <Portal mountNode={state.mountNode}>\n      <slots.root {...slotProps.root} />\n    </Portal>\n  );\n};\n"],"names":["createElement","getSlotsNext","Portal","renderMenuPopover_unstable","state","slots","slotProps","inline","root","mountNode"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAA4B;IACrE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGL,aAA+BG;IAE5D,IAAIA,MAAMG,MAAM,EAAE;QAChB,qBAAO,AAdX,cAcYF,MAAMG,IAAI,EAAKF,UAAUE,IAAI;IACvC,CAAC;IAED,qBACE,AAlBJ,cAkBKN;QAAOO,WAAWL,MAAMK,SAAS;qBAChC,AAnBN,cAmBOJ,MAAMG,IAAI,EAAKF,UAAUE,IAAI;AAGpC,EAAE"}