@fluentui/react-menu 0.0.0-nightly-20230223-2115.1 → 0.0.0-nightly-20230228-0425.1

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

@@ -1,23 +1,22 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "MenuList", {
-    enumerable: true,
-    get: ()=>MenuList
+  value: true
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _useMenuList = require("./useMenuList");
-const _renderMenuList = require("./renderMenuList");
-const _useMenuListContextValues = require("./useMenuListContextValues");
-const _useMenuListStyles = require("./useMenuListStyles");
-const MenuList = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
-    const state = (0, _useMenuList.useMenuList_unstable)(props, ref);
-    const contextValues = (0, _useMenuListContextValues.useMenuListContextValues_unstable)(state);
-    (0, _useMenuListStyles.useMenuListStyles_unstable)(state);
-    return (0, _renderMenuList.renderMenuList_unstable)(state, contextValues);
+exports.MenuList = void 0;
+const React = /*#__PURE__*/require("react");
+const useMenuList_1 = /*#__PURE__*/require("./useMenuList");
+const renderMenuList_1 = /*#__PURE__*/require("./renderMenuList");
+const useMenuListContextValues_1 = /*#__PURE__*/require("./useMenuListContextValues");
+const useMenuListStyles_1 = /*#__PURE__*/require("./useMenuListStyles");
+/**
+ * Define a styled MenuList, using the `useMenuList_unstable` hook.
+ */
+exports.MenuList = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useMenuList_1.useMenuList_unstable(props, ref);
+  const contextValues = useMenuListContextValues_1.useMenuListContextValues_unstable(state);
+  useMenuListStyles_1.useMenuListStyles_unstable(state);
+  return renderMenuList_1.renderMenuList_unstable(state, contextValues);
 });
-MenuList.displayName = 'MenuList'; //# sourceMappingURL=MenuList.js.map
-
+exports.MenuList.displayName = 'MenuList';
 //# sourceMappingURL=MenuList.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/MenuList/MenuList.js"],"sourcesContent":["import * as React from 'react';\nimport { useMenuList_unstable } from './useMenuList';\nimport { renderMenuList_unstable } from './renderMenuList';\nimport { useMenuListContextValues_unstable } from './useMenuListContextValues';\nimport { useMenuListStyles_unstable } from './useMenuListStyles';\n/**\n * Define a styled MenuList, using the `useMenuList_unstable` hook.\n */\nexport const MenuList = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useMenuList_unstable(props, ref);\n  const contextValues = useMenuListContextValues_unstable(state);\n  useMenuListStyles_unstable(state);\n  return renderMenuList_unstable(state, contextValues);\n});\nMenuList.displayName = 'MenuList';\n//# sourceMappingURL=MenuList.js.map"],"names":["MenuList","React","forwardRef","props","ref","state","useMenuList_unstable","contextValues","useMenuListContextValues_unstable","useMenuListStyles_unstable","renderMenuList_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;6BACc;gCACG;0CACU;mCACP;AAIpC,MAAMA,WAAW,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACpE,MAAMC,QAAQC,IAAAA,iCAAoB,EAACH,OAAOC;IAC1C,MAAMG,gBAAgBC,IAAAA,2DAAiC,EAACH;IACxDI,IAAAA,6CAA0B,EAACJ;IAC3B,OAAOK,IAAAA,uCAAuB,EAACL,OAAOE;AACxC;AACAP,SAASW,WAAW,GAAG,YACvB,oCAAoC"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAIA;;;AAGaA,gBAAQ,gBAAuCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGC,kCAAoB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC9C,MAAMG,aAAa,GAAGC,4DAAiC,CAACH,KAAK,CAAC;EAC9DI,8CAA0B,CAACJ,KAAK,CAAC;EAEjC,OAAOK,wCAAuB,CAACL,KAAK,EAAEE,aAAa,CAAC;AACtD,CAAC,CAAC;AAEFP,gBAAQ,CAACW,WAAW,GAAG,UAAU","names":["exports","React","forwardRef","props","ref","state","useMenuList_1","contextValues","useMenuListContextValues_1","useMenuListStyles_1","renderMenuList_1","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/MenuList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuList_unstable } from './useMenuList';\nimport { renderMenuList_unstable } from './renderMenuList';\nimport { useMenuListContextValues_unstable } from './useMenuListContextValues';\nimport { useMenuListStyles_unstable } from './useMenuListStyles';\nimport type { MenuListProps } from './MenuList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled MenuList, using the `useMenuList_unstable` hook.\n */\nexport const MenuList: ForwardRefComponent<MenuListProps> = React.forwardRef((props, ref) => {\n  const state = useMenuList_unstable(props, ref);\n  const contextValues = useMenuListContextValues_unstable(state);\n  useMenuListStyles_unstable(state);\n\n  return renderMenuList_unstable(state, contextValues);\n});\n\nMenuList.displayName = 'MenuList';\n"]}

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

@@ -1,9 +1,6 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
- //# sourceMappingURL=MenuList.types.js.map
-
 //# sourceMappingURL=MenuList.types.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/MenuList/MenuList.types.js"],"sourcesContent":["import * as React from 'react';\n//# sourceMappingURL=MenuList.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,0CAA0C"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"","sources":[],"sourcesContent":[]}

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

@@ -1,14 +1,13 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
-_exportStar(require("./MenuList"), exports);
-_exportStar(require("./MenuList.types"), exports);
-_exportStar(require("./renderMenuList"), exports);
-_exportStar(require("./useMenuList"), exports);
-_exportStar(require("./useMenuListStyles"), exports);
-_exportStar(require("./useMenuListContextValues"), exports);
- //# sourceMappingURL=index.js.map
-
+const tslib_1 = /*#__PURE__*/require("tslib");
+tslib_1.__exportStar(require("./MenuList"), exports);
+tslib_1.__exportStar(require("./MenuList.types"), exports);
+tslib_1.__exportStar(require("./renderMenuList"), exports);
+tslib_1.__exportStar(require("./useMenuList"), exports);
+tslib_1.__exportStar(require("./useMenuListStyles"), exports);
+tslib_1.__exportStar(require("./useMenuListContextValues"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/MenuList/index.js"],"sourcesContent":["export * from './MenuList';\nexport * from './MenuList.types';\nexport * from './renderMenuList';\nexport * from './useMenuList';\nexport * from './useMenuListStyles';\nexport * from './useMenuListContextValues';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/index.ts"],"sourcesContent":["export * from './MenuList';\nexport * from './MenuList.types';\nexport * from './renderMenuList';\nexport * from './useMenuList';\nexport * from './useMenuListStyles';\nexport * from './useMenuListContextValues';\n"]}

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

@@ -1,22 +1,25 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "renderMenuList_unstable", {
-    enumerable: true,
-    get: ()=>renderMenuList_unstable
+  value: true
 });
-const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _extends = require("@swc/helpers/lib/_extends.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _reactUtilities = require("@fluentui/react-utilities");
-const _menuListContext = require("../../contexts/menuListContext");
-const renderMenuList_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlots)(state);
-    return /*#__PURE__*/ _react.createElement(_menuListContext.MenuListProvider, {
-        value: contextValues.menuList
-    }, /*#__PURE__*/ _react.createElement(slots.root, _extends({}, slotProps.root)));
-}; //# sourceMappingURL=renderMenuList.js.map
-
+exports.renderMenuList_unstable = void 0;
+const React = /*#__PURE__*/require("react");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const menuListContext_1 = /*#__PURE__*/require("../../contexts/menuListContext");
+/**
+ * Function that renders the final JSX of the component
+ */
+const renderMenuList_unstable = (state, contextValues) => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(menuListContext_1.MenuListProvider, {
+    value: contextValues.menuList
+  }, React.createElement(slots.root, {
+    ...slotProps.root
+  }));
+};
+exports.renderMenuList_unstable = renderMenuList_unstable;
 //# sourceMappingURL=renderMenuList.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/MenuList/renderMenuList.js"],"sourcesContent":["import _extends from \"@swc/helpers/src/_extends.mjs\";\nimport * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuListProvider } from '../../contexts/menuListContext';\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuList_unstable = (state, contextValues) => {\n  const {\n    slots,\n    slotProps\n  } = getSlots(state);\n  return /*#__PURE__*/React.createElement(MenuListProvider, {\n    value: contextValues.menuList\n  }, /*#__PURE__*/React.createElement(slots.root, _extends({}, slotProps.root)));\n};\n//# sourceMappingURL=renderMenuList.js.map"],"names":["renderMenuList_unstable","state","contextValues","slots","slotProps","getSlots","React","createElement","MenuListProvider","value","menuList","root","_extends"],"mappings":";;;;+BAOaA;;aAAAA;;;;yBAPQ;6DACE;gCACE;iCACQ;AAI1B,MAAMA,0BAA0B,CAACC,OAAOC,gBAAkB;IAC/D,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACJ;IACb,OAAO,WAAW,GAAEK,OAAMC,aAAa,CAACC,iCAAgB,EAAE;QACxDC,OAAOP,cAAcQ,QAAQ;IAC/B,GAAG,WAAW,GAAEJ,OAAMC,aAAa,CAACJ,MAAMQ,IAAI,EAAEC,SAAS,CAAC,GAAGR,UAAUO,IAAI;AAC7E,GACA,0CAA0C"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAEA;;;AAGO,MAAMA,uBAAuB,GAAG,CAACC,KAAoB,EAAEC,aAAoC,KAAI;EACpG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAgBJ,KAAK,CAAC;EAE3D,OACEK,oBAACC,kCAAgB;IAACC,KAAK,EAAEN,aAAa,CAACO;EAAQ,GAC7CH,oBAACH,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,EAAI,CACjB;AAEvB,CAAC;AARYC,+BAAuB","names":["renderMenuList_unstable","state","contextValues","slots","slotProps","react_utilities_1","React","menuListContext_1","value","menuList","root","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/renderMenuList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuListContextValues, MenuListSlots, MenuListState } from './MenuList.types';\nimport { MenuListProvider } from '../../contexts/menuListContext';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuList_unstable = (state: MenuListState, contextValues: MenuListContextValues) => {\n  const { slots, slotProps } = getSlots<MenuListSlots>(state);\n\n  return (\n    <MenuListProvider value={contextValues.menuList}>\n      <slots.root {...slotProps.root} />\n    </MenuListProvider>\n  );\n};\n"]}

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

@@ -1,157 +1,153 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "useMenuList_unstable", {
-    enumerable: true,
-    get: ()=>useMenuList_unstable
+  value: true
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _reactUtilities = require("@fluentui/react-utilities");
-const _reactTabster = require("@fluentui/react-tabster");
-const _reactContextSelector = require("@fluentui/react-context-selector");
-const _menuContext = require("../../contexts/menuContext");
-const useMenuList_unstable = (props, ref)=>{
-    const { findAllFocusable  } = (0, _reactTabster.useFocusFinders)();
-    const menuContext = useMenuContextSelectors();
-    const hasMenuContext = (0, _reactContextSelector.useHasParentContext)(_menuContext.MenuContext);
-    const focusAttributes = (0, _reactTabster.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');
+exports.useMenuList_unstable = void 0;
+const React = /*#__PURE__*/require("react");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
+const menuContext_1 = /*#__PURE__*/require("../../contexts/menuContext");
+const menuContext_2 = /*#__PURE__*/require("../../contexts/menuContext");
+/**
+ * Returns the props and state required to render the component
+ */
+const useMenuList_unstable = (props, ref) => {
+  var _a, _b;
+  const {
+    findAllFocusable
+  } = react_tabster_1.useFocusFinders();
+  const menuContext = useMenuContextSelectors();
+  const hasMenuContext = react_context_selector_1.useHasParentContext(menuContext_2.MenuContext);
+  const focusAttributes = react_tabster_1.useArrowNavigationGroup({
+    circular: true,
+    ignoreDefaultKeydown: {
+      Tab: hasMenuContext
     }
-    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
-    ]);
-    const [checkedValues, setCheckedValues] = (0, _reactUtilities.useControllableState)({
-        state: props.checkedValues ?? (hasMenuContext ? menuContext.checkedValues : undefined),
-        defaultState: props.defaultCheckedValues,
-        initialState: {}
+  });
+  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;
+    }
+    const firstChars = menuItems.map(menuItem => {
+      var _a;
+      return (_a = menuItem.textContent) === null || _a === void 0 ? void 0 : _a.charAt(0).toLowerCase();
     });
-    const handleCheckedValueChange = props.onCheckedValueChange ?? (hasMenuContext ? menuContext.onCheckedValueChange : undefined);
-    const toggleCheckbox = (0, _reactUtilities.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);
+    const char = e.key.toLowerCase();
+    const getIndexFirstChars = (start, firstChar) => {
+      for (let i = start; i < firstChars.length; i++) {
+        if (char === firstChars[i]) {
+          return i;
         }
-        handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {
-            name,
-            checkedItems: newCheckedItems
-        });
-        setCheckedValues((s)=>({
-                ...s,
-                [name]: newCheckedItems
-            }));
+      }
+      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]);
+  const [checkedValues, setCheckedValues] = react_utilities_1.useControllableState({
+    state: (_a = props.checkedValues) !== null && _a !== void 0 ? _a : hasMenuContext ? menuContext.checkedValues : undefined,
+    defaultState: props.defaultCheckedValues,
+    initialState: {}
+  });
+  const handleCheckedValueChange = (_b = props.onCheckedValueChange) !== null && _b !== void 0 ? _b : hasMenuContext ? menuContext.onCheckedValueChange : undefined;
+  const toggleCheckbox = react_utilities_1.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
     });
-    const selectRadio = (0, _reactUtilities.useEventCallback)((e, name, value)=>{
-        const newCheckedItems = [
-            value
-        ];
-        setCheckedValues((s)=>({
-                ...s,
-                [name]: newCheckedItems
-            }));
-        handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {
-            name,
-            checkedItems: newCheckedItems
-        });
+    setCheckedValues(s => ({
+      ...s,
+      [name]: newCheckedItems
+    }));
+  });
+  const selectRadio = react_utilities_1.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: (0, _reactUtilities.getNativeElementProps)('div', {
-            ref: (0, _reactUtilities.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: react_utilities_1.getNativeElementProps('div', {
+      ref: react_utilities_1.useMergedRefs(ref, innerRef),
+      role: 'menu',
+      'aria-labelledby': menuContext.triggerId,
+      ...focusAttributes,
+      ...props
+    }),
+    hasIcons: menuContext.hasIcons || false,
+    hasCheckmarks: menuContext.hasCheckmarks || false,
+    checkedValues,
+    setFocusByFirstCharacter,
+    selectRadio,
+    toggleCheckbox
+  };
 };
+exports.useMenuList_unstable = useMenuList_unstable;
 /**
  * Adds some sugar to fetching multiple context selector values
- */ const useMenuContextSelectors = ()=>{
-    const checkedValues = (0, _menuContext.useMenuContext_unstable)((context)=>context.checkedValues);
-    const onCheckedValueChange = (0, _menuContext.useMenuContext_unstable)((context)=>context.onCheckedValueChange);
-    const triggerId = (0, _menuContext.useMenuContext_unstable)((context)=>context.triggerId);
-    const hasIcons = (0, _menuContext.useMenuContext_unstable)((context)=>context.hasIcons);
-    const hasCheckmarks = (0, _menuContext.useMenuContext_unstable)((context)=>context.hasCheckmarks);
-    return {
-        checkedValues,
-        onCheckedValueChange,
-        triggerId,
-        hasIcons,
-        hasCheckmarks
-    };
+ */
+const useMenuContextSelectors = () => {
+  const checkedValues = menuContext_1.useMenuContext_unstable(context => context.checkedValues);
+  const onCheckedValueChange = menuContext_1.useMenuContext_unstable(context => context.onCheckedValueChange);
+  const triggerId = menuContext_1.useMenuContext_unstable(context => context.triggerId);
+  const hasIcons = menuContext_1.useMenuContext_unstable(context => context.hasIcons);
+  const hasCheckmarks = menuContext_1.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;
-}; //# sourceMappingURL=useMenuList.js.map
-
+  }
+  return hasMenuContext && isUsingPropsAndContext;
+};
 //# sourceMappingURL=useMenuList.js.map

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

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

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

@@ -1,25 +1,30 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "useMenuListContextValues_unstable", {
-    enumerable: true,
-    get: ()=>useMenuListContextValues_unstable
+  value: true
 });
+exports.useMenuListContextValues_unstable = void 0;
 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
-    };
-} //# sourceMappingURL=useMenuListContextValues.js.map
-
+  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
+  };
+}
+exports.useMenuListContextValues_unstable = useMenuListContextValues_unstable;
 //# sourceMappingURL=useMenuListContextValues.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/MenuList/useMenuListContextValues.js"],"sourcesContent":["export function useMenuListContextValues_unstable(state) {\n  const {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    selectRadio,\n    setFocusByFirstCharacter,\n    toggleCheckbox\n  } = state;\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  return {\n    menuList\n  };\n}\n//# sourceMappingURL=useMenuListContextValues.js.map"],"names":["useMenuListContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","selectRadio","setFocusByFirstCharacter","toggleCheckbox","menuList"],"mappings":";;;;+BAAgBA;;aAAAA;;AAAT,SAASA,kCAAkCC,KAAK,EAAE;IACvD,MAAM,EACJC,cAAa,EACbC,cAAa,EACbC,SAAQ,EACRC,YAAW,EACXC,yBAAwB,EACxBC,eAAc,EACf,GAAGN;IACJ,mGAAmG;IACnG,MAAMO,WAAW;QACfN;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IACA,OAAO;QACLC;IACF;AACF,EACA,oDAAoD"}
+{"version":3,"mappings":";;;;;;AAEA,SAAgBA,iCAAiC,CAACC,KAAoB;EACpE,MAAM;IAAEC,aAAa;IAAEC,aAAa;IAAEC,QAAQ;IAAEC,WAAW;IAAEC,wBAAwB;IAAEC;EAAc,CAAE,GAAGN,KAAK;EAE/G;EACA,MAAMO,QAAQ,GAAG;IACfN,aAAa;IACbC,aAAa;IACbC,QAAQ;IACRC,WAAW;IACXC,wBAAwB;IACxBC;GACD;EAED,OAAO;IAAEC;EAAQ,CAAE;AACrB;AAdAC","names":["useMenuListContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","selectRadio","setFocusByFirstCharacter","toggleCheckbox","menuList","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/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"]}