npm - @fluentui/react-menu - Versions diffs - 9.0.0-alpha.8 → 9.0.0-alpha.80 - Mend

@fluentui/react-menu 9.0.0-alpha.8 → 9.0.0-alpha.80

Files changed (1314) hide show

package/lib/components/MenuList/MenuList.types.d.ts CHANGED Viewed

@@ -1,19 +1,24 @@
 import * as React from 'react';
-import { ComponentProps } from '@fluentui/react-utilities';
+import { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
 import { MenuListContextValue } from '../../contexts/menuListContext';
 import { SelectableHandler } from '../../selectable/index';
-export interface MenuListProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
+export declare type MenuListCommons = {
     /**
      * Callback when checked items change for value with a name
      *
-     * @param name - the name of the value
-     * @param checkedItems - the items for this value that are checked
+     * @param event - React's original SyntheticEvent
+     * @param data - A data object with relevant information
      */
-    onCheckedValueChange?: (e: React.MouseEvent | React.KeyboardEvent, name: string, checkedItems: string[]) => void;
+    onCheckedValueChange?: (e: React.MouseEvent | React.KeyboardEvent, data: {
+        /** The name of the value */
+        name: string;
+        /** The items for this value that are checked */
+        checkedItems: string[];
+    }) => void;
     /**
      * Map of all checked values
      */
-    checkedValues?: Record<string, string[]>;
+    checkedValues: Record<string, string[]>;
     /**
      * Default values to be checked on mount
      */
@@ -26,19 +31,23 @@ export interface MenuListProps extends ComponentProps, React.HTMLAttributes<HTML
      * States that menu items can contain selectable items and reserve slots for item alignment
      */
     hasCheckmarks?: boolean;
-}
-export interface MenuListState extends MenuListProps {
-    /**
-     * Ref to the root slot
-     */
-    ref: React.MutableRefObject<HTMLElement>;
+};
+export declare type MenuListSlots = {
+    root: IntrinsicShorthandProps<'div'>;
+};
+export declare type MenuListProps = ComponentProps<MenuListSlots> & Partial<MenuListCommons>;
+export declare type MenuListState = ComponentState<MenuListSlots> & MenuListCommons & {
     /**
      * Callback to set focus on the next menu item by first character
      */
-    setFocusByFirstCharacter: MenuListContextValue['setFocusByFirstCharacter'];
+    setFocusByFirstCharacter: NonNullable<MenuListContextValue['setFocusByFirstCharacter']>;
     toggleCheckbox: SelectableHandler;
     /**
      * Selects a radio item, will de-select the currently selected ratio item
      */
     selectRadio: SelectableHandler;
-}
+};
+export declare type MenuListContextValues = {
+    menuList: MenuListContextValue;
+};
+export declare type UninitializedMenuListState = Omit<MenuListState, 'setFocusByFirstCharacter' | 'toggleCheckbox' | 'selectRadio' | 'checkedValues'> & Partial<Pick<MenuListState, 'checkedValues'>>;

package/lib/components/MenuList/MenuList.types.js CHANGED Viewed

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

package/lib/components/MenuList/MenuList.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuList.types.js","sourceRoot":"../src/","sources":["components/MenuList/MenuList.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentProps } from '@fluentui/react-utilities';\nimport { MenuListContextValue } from '../../contexts/menuListContext';\nimport { SelectableHandler } from '../../selectable/index';\n\nexport ~~interface~~ ~~MenuListProps~~ ~~extends~~ ~~ComponentProps, React.HTMLAttributes<HTMLElement>~~ {\n /*\n Callback when checked items change for value with a name\n \n @param ~~name~~ - ~~the~~ ~~name~~ ~~of the value~~\n * @param ~~checkedItems~~ - ~~the~~ ~~items~~ ~~for~~ ~~this~~ ~~value~~ ~~that are checked~~\n /\n onCheckedValueChange?: (e: React.MouseEvent \| React.KeyboardEvent, name: string, checkedItems: string[]) => void;\n\n /\n Map of all checked values\n /\n checkedValues?: Record<string, string[]>;\n\n /\n Default values to be checked on mount\n /\n defaultCheckedValues?: Record<string, string[]>;\n\n /\n States that menu items can contain icons and reserve slots for item alignment\n /\n hasIcons?: boolean;\n\n /\n States that menu items can contain selectable items and reserve slots for item alignment\n /\n hasCheckmarks?: boolean;\n}\n\nexport ~~interface~~ ~~MenuListState~~ ~~extends~~ ~~MenuListProps~~ {\n ~~/\~~n ~~Ref~~ to ~~the~~ ~~root~~ ~~slot\n /\n ref:~~ ~~React.MutableRefObject~~<~~HTMLElement~~>;\n\n /\n Callback to set focus on the next menu item by first character\n /\n setFocusByFirstCharacter: MenuListContextValue['setFocusByFirstCharacter'];\n\n /\n * Toggles the state of a checkbox item\n /\n toggleCheckbox: SelectableHandler;\n\n /\n Selects a radio item, will de-select the currently selected ratio item\n */\n selectRadio: SelectableHandler;\n}\n"]}
1	+ {"version":3,"file":"MenuList.types.js","sourceRoot":"../src/","sources":["components/MenuList/MenuList.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';\nimport { MenuListContextValue } from '../../contexts/menuListContext';\nimport { SelectableHandler } from '../../selectable/index';\n\nexport type MenuListCommons = {\n /*\n Callback when checked items change for value with a name\n \n @param event - React's original SyntheticEvent\n * @param data - A data object with relevant information\n /\n onCheckedValueChange?: (\n e: React.MouseEvent \| React.KeyboardEvent,\n data: {\n /* The name of the value /\n name: string;\n /* The items for this value that are checked /\n checkedItems: string[];\n },\n ) => void;\n\n /\n Map of all checked values\n /\n checkedValues: Record<string, string[]>;\n\n /\n Default values to be checked on mount\n /\n defaultCheckedValues?: Record<string, string[]>;\n\n /\n States that menu items can contain icons and reserve slots for item alignment\n /\n hasIcons?: boolean;\n\n /\n States that menu items can contain selectable items and reserve slots for item alignment\n /\n hasCheckmarks?: boolean;\n};\n\nexport type MenuListSlots = {\n root: IntrinsicShorthandProps<'div'>;\n};\n\nexport type MenuListProps = ComponentProps<MenuListSlots> & Partial<MenuListCommons>;\n\nexport type MenuListState = ComponentState<MenuListSlots> &\n MenuListCommons & {\n /\n Callback to set focus on the next menu item by first character\n /\n setFocusByFirstCharacter: NonNullable<MenuListContextValue['setFocusByFirstCharacter']>;\n\n /\n * Toggles the state of a checkbox item\n /\n toggleCheckbox: SelectableHandler;\n\n /\n Selects a radio item, will de-select the currently selected ratio item\n */\n selectRadio: SelectableHandler;\n };\n\nexport type MenuListContextValues = {\n menuList: MenuListContextValue;\n};\n\nexport type UninitializedMenuListState = Omit<\n MenuListState,\n 'setFocusByFirstCharacter' \| 'toggleCheckbox' \| 'selectRadio' \| 'checkedValues'\n> &\n Partial<Pick<MenuListState, 'checkedValues'>>;\n"]}

package/lib/components/MenuList/index.d.ts CHANGED Viewed

@@ -2,3 +2,4 @@ export * from './MenuList';
 export * from './MenuList.types';
 export * from './renderMenuList';
 export * from './useMenuList';
+export * from './useMenuListContextValues';

package/lib/components/MenuList/index.js CHANGED Viewed

@@ -1,4 +1,6 @@
 export * from './MenuList';
+export * from './MenuList.types';
 export * from './renderMenuList';
 export * from './useMenuList';
+export * from './useMenuListContextValues';
 //# sourceMappingURL=index.js.map

package/lib/components/MenuList/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/MenuList/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;~~AAE3B~~,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC","sourcesContent":["export * from './MenuList';\nexport * from './MenuList.types';\nexport * from './renderMenuList';\nexport * from './useMenuList';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/MenuList/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './MenuList';\nexport * from './MenuList.types';\nexport * from './renderMenuList';\nexport * from './useMenuList';\nexport * from './useMenuListContextValues';\n"]}

package/lib/components/MenuList/renderMenuList.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { MenuListState } from './MenuList.types';
+import { MenuListContextValues, MenuListState } from './MenuList.types';
 /**
  * Function that renders the final JSX of the component
  */
-export declare const renderMenuList: (state: MenuListState) => JSX.Element;
+export declare const renderMenuList: (state: MenuListState, contextValues: MenuListContextValues) => JSX.Element;

package/lib/components/MenuList/renderMenuList.js CHANGED Viewed

@@ -5,18 +5,14 @@ import { MenuListProvider } from '../../contexts/menuListContext';
 /**
  * Function that renders the final JSX of the component
  */
-export var renderMenuList = function (state) {
-    var _a = getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
-    var onCheckedValueChange = state.onCheckedValueChange, checkedValues = state.checkedValues, toggleCheckbox = state.toggleCheckbox, selectRadio = state.selectRadio, setFocusByFirstCharacter = state.setFocusByFirstCharacter, hasIcons = state.hasIcons, hasCheckmarks = state.hasCheckmarks;
-    return (React.createElement(MenuListProvider, { value: {
-            onCheckedValueChange: onCheckedValueChange,
-            checkedValues: checkedValues,
-            toggleCheckbox: toggleCheckbox,
-            selectRadio: selectRadio,
-            setFocusByFirstCharacter: setFocusByFirstCharacter,
-            hasIcons: hasIcons,
-            hasCheckmarks: hasCheckmarks,
-        } },
-        React.createElement(slots.root, __assign({}, slotProps.root), state.children)));
+export var renderMenuList = function (state, contextValues) {
+  var _a = getSlots(state),
+      slots = _a.slots,
+      slotProps = _a.slotProps;
+  return /*#__PURE__*/React.createElement(MenuListProvider, {
+    value: contextValues.menuList
+  }, /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root)));
 };
 //# sourceMappingURL=renderMenuList.js.map

package/lib/components/MenuList/renderMenuList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~file":"renderMenuList.js","sourceRoot":"../src/","~~sources":["components/MenuList/renderMenuList.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,~~KAAK~~,~~MAAM~~,~~OAAO,CAAC~~;~~AAC/B~~,~~OAAO~~,~~EAAE~~,~~QAAQ~~,~~EAAE,MAAM,2BAA2B,CAAC~~;~~AAErD~~,~~OAAO~~,~~EAAE~~,~~gBAAgB~~,~~EAAE,MAAM,gCAAgC,CAAC~~;~~AAElE~~;;~~GAEG;~~AACH,~~MAAM~~,~~CAAC,~~IAAM,cAAc,GAAG,UAAC,~~KAAoB~~;~~IAC3C~~,~~IAAA~~,~~oBAAsC~~,~~EAApC~~,~~gBAAK~~,~~EAAE~~,~~wBAA6B~~,~~CAAC~~;~~IAE3C~~,~~IAAA~~,~~iDAAoB~~,~~EACpB~~,~~mCAAa~~,~~EACb~~,~~qCAAc~~,~~EACd,+BAAW~~,~~EACX~~,~~yDAAwB~~,~~EACxB~~,~~yBAAQ~~,~~EACR~~,~~mCAAa~~,~~CACL;IAEV~~,~~OAAO~~,~~CACL~~,~~oBAAC~~,~~gBAAgB~~,~~IACf~~,KAAK,EAAE~~;YACL~~,~~oBAAoB~~,~~sBAAA~~;~~YACpB~~,~~aAAa~~,~~eAAA;YACb~~,~~cAAc~~,~~gBAAA;YACd~~,~~WAAW,~~aAAA~~;YACX~~,~~wBAAwB~~,~~0BAAA;YACxB,QAAQ,UAAA;YACR,aAAa,eAAA;SACd;QAED,oBAAC,~~KAAK,CAAC,~~IAAI~~,~~eAAK~~,~~SAAS~~,~~CAAC~~,~~IAAI~~,~~GAAG~~,~~KAAK~~,CAAC,~~QAAQ~~,~~CAAc~~,~~CAC5C~~,~~CACpB,CAAC~~;~~AACJ~~,~~CAAC,CAAC~~","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { 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 = (state: MenuListState) => {\n const { slots, slotProps } = getSlots(state);\n ~~const {~~\n ~~onCheckedValueChange,\n checkedValues,\n toggleCheckbox,\n selectRadio,\n setFocusByFirstCharacter,\n hasIcons,\n hasCheckmarks,\n~~ ~~} = state;\n\n~~ return (\n <MenuListProvider\n value={~~{\n onCheckedValueChange,\n checkedValues,\n toggleCheckbox,\n selectRadio,\n setFocusByFirstCharacter,\n hasIcons,\n hasCheckmarks,\n~~ }~~}\n~~ >\n <slots.root {...slotProps.root}~~>{state.children}</slots.root>\~~n </MenuListProvider>\n );\n};\n"]}
1	+ {"version":3,"sources":["components/MenuList/renderMenuList.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,gBAAT,QAAiC,gCAAjC;AAEA;;AAEG;;AACH,OAAO,IAAM,cAAc,GAAG,UAAC,KAAD,EAAuB,aAAvB,EAA2D;AACjF,MAAA,EAAA,GAAuB,QAAQ,CAAgB,KAAhB,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAiB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAjB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CADF,CADF;AAKD,CARM","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 = (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"],"sourceRoot":"../src/"}

package/lib/components/MenuList/useMenuList.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { MenuListProps, MenuListState } from './MenuList.types';
+import type { MenuListProps, MenuListState } from './MenuList.types';
 /**
  * Returns the props and state required to render the component
  */
-export declare const useMenuList: (props: MenuListProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuListProps | undefined) => MenuListState;
+export declare const useMenuList: (props: MenuListProps, ref: React.Ref<HTMLElement>) => MenuListState;

package/lib/components/MenuList/useMenuList.js CHANGED Viewed

@@ -1,113 +1,185 @@
 import { __assign, __spreadArrays } from "tslib";
 import * as React from 'react';
-import { makeMergePropsCompat, resolveShorthandProps, useMergedRefs, useEventCallback, useControllableValue, } from '@fluentui/react-utilities';
+import { useMergedRefs, useEventCallback, useControllableState, getNativeElementProps } from '@fluentui/react-utilities';
 import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
+import { useHasParentContext } from '@fluentui/react-context-selector';
 import { useMenuContext } from '../../contexts/menuContext';
-// eslint-disable-next-line deprecation/deprecation
-var mergeProps = makeMergePropsCompat();
+import { MenuContext } from '../../contexts/menuContext';
 /**
  * Returns the props and state required to render the component
  */
-export var useMenuList = function (props, ref, defaultProps) {
-    var focusAttributes = useArrowNavigationGroup({ circular: true });
-    var findAllFocusable = useFocusFinders().findAllFocusable;
-    var menuContext = useMenuContextSelectors();
-    if (usingPropsAndMenuContext(props, menuContext)) {
-        // 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');
+export var useMenuList = function (props, ref) {
+  var focusAttributes = useArrowNavigationGroup({
+    circular: true
+  });
+  var findAllFocusable = useFocusFinders().findAllFocusable;
+  var menuContext = useMenuContextSelectors();
+  var hasMenuContext = useHasParentContext(MenuContext);
+  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');
+  }
+  var innerRef = React.useRef(null);
+  var initialState = __assign(__assign({
+    root: getNativeElementProps('div', __assign(__assign({
+      ref: useMergedRefs(ref, innerRef),
+      role: 'menu',
+      'aria-labelledby': menuContext.triggerId
+    }, focusAttributes), props)),
+    hasIcons: menuContext.hasIcons,
+    hasCheckmarks: menuContext.hasCheckmarks
+  }, hasMenuContext && menuContext), props);
+  var setFocusByFirstCharacter = React.useCallback(function (e, itemEl) {
+    // TODO use some kind of children registration to reduce dependency on DOM roles
+    var acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];
+    if (!innerRef.current) {
+      return;
     }
-    var state = mergeProps(__assign(__assign({ ref: useMergedRefs(ref, React.useRef(null)), role: 'menu', 'aria-labelledby': menuContext.triggerId, hasIcons: menuContext.hasIcons, hasCheckmarks: menuContext.hasCheckmarks }, focusAttributes), (menuContext.hasMenuContext && __assign({}, menuContext))), defaultProps, resolveShorthandProps(props, []));
-    state.setFocusByFirstCharacter = React.useCallback(function (e, itemEl) {
-        // TODO use some kind of children registration to reduce dependency on DOM roles
-        var acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];
-        var menuItems = findAllFocusable(state.ref.current, function (el) { return el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')) !== -1; });
-        var startIndex = menuItems.indexOf(itemEl) + 1;
-        if (startIndex === menuItems.length) {
-            startIndex = 0;
-        }
-        var firstChars = menuItems.map(function (menuItem) { var _a; return (_a = menuItem.textContent) === null || _a === void 0 ? void 0 : _a.charAt(0).toLowerCase(); });
-        var char = e.key.toLowerCase();
-        var getIndexFirstChars = function (start, firstChar) {
-            for (var i = start; i < firstChars.length; i++) {
-                if (char === firstChars[i]) {
-                    return i;
-                }
-            }
-            return -1;
-        };
-        // Check remaining slots in the menu
-        var 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, state.ref]);
-    var _a = useControllableValue(state.checkedValues, state.defaultCheckedValues), checkedValues = _a[0], setCheckedValues = _a[1];
-    state.checkedValues = checkedValues;
-    var onCheckedValueChange = state.onCheckedValueChange;
-    state.toggleCheckbox = useEventCallback(function (e, name, value, checked) {
-        var _a, _b;
-        var checkedItems = ((_a = checkedValues) === null || _a === void 0 ? void 0 : _a[name]) || [];
-        var newCheckedItems = __spreadArrays(checkedItems);
-        if (checked) {
-            newCheckedItems.splice(newCheckedItems.indexOf(value), 1);
-        }
-        else {
-            newCheckedItems.push(value);
+    var menuItems = findAllFocusable(innerRef.current, function (el) {
+      return el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')) !== -1;
+    });
+    var startIndex = menuItems.indexOf(itemEl) + 1;
+    if (startIndex === menuItems.length) {
+      startIndex = 0;
+    }
+    var firstChars = menuItems.map(function (menuItem) {
+      var _a;
+      return (_a = menuItem.textContent) === null || _a === void 0 ? void 0 : _a.charAt(0).toLowerCase();
+    });
+    var char = e.key.toLowerCase();
+    var getIndexFirstChars = function (start, firstChar) {
+      for (var i = start; i < firstChars.length; i++) {
+        if (char === firstChars[i]) {
+          return i;
         }
-        (_b = onCheckedValueChange) === null || _b === void 0 ? void 0 : _b(e, name, newCheckedItems);
-        setCheckedValues(function (s) {
-            var _a;
-            return (__assign(__assign({}, s), (_a = {}, _a[name] = newCheckedItems, _a)));
-        });
+      }
+      return -1;
+    }; // Check remaining slots in the menu
+    var 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 _a = useControllableState({
+    state: initialState.checkedValues,
+    defaultState: initialState.defaultCheckedValues,
+    initialState: {}
+  }),
+      checkedValues = _a[0],
+      setCheckedValues = _a[1];
+  var onCheckedValueChange = initialState.onCheckedValueChange;
+  var toggleCheckbox = useEventCallback(function (e, name, value, checked) {
+    var checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
+    var newCheckedItems = __spreadArrays(checkedItems);
+    if (checked) {
+      newCheckedItems.splice(newCheckedItems.indexOf(value), 1);
+    } else {
+      newCheckedItems.push(value);
+    }
+    onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
+      name: name,
+      checkedItems: newCheckedItems
     });
-    state.selectRadio = useEventCallback(function (e, name, value) {
-        var _a;
-        var newCheckedItems = [value];
-        setCheckedValues(function (s) {
-            var _a;
-            return (__assign(__assign({}, s), (_a = {}, _a[name] = newCheckedItems, _a)));
-        });
-        (_a = onCheckedValueChange) === null || _a === void 0 ? void 0 : _a(e, name, newCheckedItems);
+    setCheckedValues(function (s) {
+      var _a;
+      return __assign(__assign({}, s), (_a = {}, _a[name] = newCheckedItems, _a));
     });
-    return state;
+  });
+  var selectRadio = useEventCallback(function (e, name, value) {
+    var newCheckedItems = [value];
+    setCheckedValues(function (s) {
+      var _a;
+      return __assign(__assign({}, s), (_a = {}, _a[name] = newCheckedItems, _a));
+    });
+    onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
+      name: name,
+      checkedItems: newCheckedItems
+    });
+  });
+  var state = __assign(__assign({}, initialState), {
+    setFocusByFirstCharacter: setFocusByFirstCharacter,
+    selectRadio: selectRadio,
+    toggleCheckbox: toggleCheckbox,
+    checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {}
+  });
+  return state;
 };
 /**
  * Adds some sugar to fetching multiple context selector values
  */
 var useMenuContextSelectors = function () {
-    var hasMenuContext = useMenuContext(function (context) { return context.hasMenuContext; });
-    var checkedValues = useMenuContext(function (context) { return context.checkedValues; });
-    var onCheckedValueChange = useMenuContext(function (context) { return context.onCheckedValueChange; });
-    var defaultCheckedValues = useMenuContext(function (context) { return context.defaultCheckedValues; });
-    var triggerId = useMenuContext(function (context) { return context.triggerId; });
-    var hasIcons = useMenuContext(function (context) { return context.hasIcons; });
-    var hasCheckmarks = useMenuContext(function (context) { return context.hasCheckmarks; });
-    return {
-        hasMenuContext: hasMenuContext,
-        checkedValues: checkedValues,
-        onCheckedValueChange: onCheckedValueChange,
-        defaultCheckedValues: defaultCheckedValues,
-        triggerId: triggerId,
-        hasIcons: hasIcons,
-        hasCheckmarks: hasCheckmarks,
-    };
+  var checkedValues = useMenuContext(function (context) {
+    return context.checkedValues;
+  });
+  var onCheckedValueChange = useMenuContext(function (context) {
+    return context.onCheckedValueChange;
+  });
+  var defaultCheckedValues = useMenuContext(function (context) {
+    return context.defaultCheckedValues;
+  });
+  var triggerId = useMenuContext(function (context) {
+    return context.triggerId;
+  });
+  var hasIcons = useMenuContext(function (context) {
+    return context.hasIcons;
+  });
+  var hasCheckmarks = useMenuContext(function (context) {
+    return context.hasCheckmarks;
+  });
+  return {
+    checkedValues: checkedValues,
+    onCheckedValueChange: onCheckedValueChange,
+    defaultCheckedValues: defaultCheckedValues,
+    triggerId: triggerId,
+    hasIcons: hasIcons,
+    hasCheckmarks: hasCheckmarks
+  };
 };
 /**
  * Helper function to detect if props and MenuContext values are both used
  */
-var usingPropsAndMenuContext = function (props, contextValue) {
-    var isUsingPropsAndContext = false;
-    for (var val in contextValue) {
-        if (props[val]) {
-            isUsingPropsAndContext = true;
-        }
+var usingPropsAndMenuContext = function (props, contextValue, hasMenuContext) {
+  var isUsingPropsAndContext = false;
+  for (var val in contextValue) {
+    if (props[val]) {
+      isUsingPropsAndContext = true;
     }
-    return contextValue.hasMenuContext && isUsingPropsAndContext;
+  }
+  return hasMenuContext && isUsingPropsAndContext;
 };
 //# sourceMappingURL=useMenuList.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useMenuList.js","sourceRoot":"../src/","sources":["components/MenuList/useMenuList.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n makeMergePropsCompat,\n resolveShorthandProps,\n useMergedRefs,\n useEventCallback,\n useControllableValue,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { MenuListProps, MenuListState } from './MenuList.types';\nimport { useMenuContext } from '../../contexts/menuContext';\n\n// eslint-disable-next-line deprecation/deprecation\nconst mergeProps = makeMergePropsCompat<MenuListState>();\n\n/*\n Returns the props and state required to render the component\n /\nexport const useMenuList = (\n props: MenuListProps,\n ref: React.Ref<HTMLElement>,\n defaultProps?: MenuListProps,\n): MenuListState => {\n const focusAttributes = useArrowNavigationGroup({ circular: true });\n const { findAllFocusable } = useFocusFinders();\n const menuContext = useMenuContextSelectors();\n\n if (usingPropsAndMenuContext(props, menuContext)) {\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 state = mergeProps(\n {\n ref: useMergedRefs(ref, React.useRef(null)),\n role: 'menu',\n 'aria-labelledby': menuContext.triggerId,\n hasIcons: menuContext.hasIcons,\n hasCheckmarks: menuContext.hasCheckmarks,\n ...focusAttributes,\n ...(menuContext.hasMenuContext && { ...menuContext }),\n },\n defaultProps,\n resolveShorthandProps(props, []),\n );\n\n state.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 const menuItems = findAllFocusable(\n state.ref.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, state.ref],\n );\n\n const [checkedValues, setCheckedValues] = useControllableValue(state.checkedValues, state.defaultCheckedValues);\n state.checkedValues = checkedValues;\n const { onCheckedValueChange } = state;\n state.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 onCheckedValueChange?.(e, name, newCheckedItems);\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n },\n );\n\n state.selectRadio = useEventCallback((e: React.MouseEvent \| React.KeyboardEvent, name: string, value: string) => {\n const newCheckedItems = [value];\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n onCheckedValueChange?.(e, name, newCheckedItems);\n });\n\n return state;\n};\n\n/\n Adds some sugar to fetching multiple context selector values\n /\nconst useMenuContextSelectors = () => {\n const hasMenuContext = useMenuContext(context => context.hasMenuContext);\n const checkedValues = useMenuContext(context => context.checkedValues);\n const onCheckedValueChange = useMenuContext(context => context.onCheckedValueChange);\n const defaultCheckedValues = useMenuContext(context => context.defaultCheckedValues);\n const triggerId = useMenuContext(context => context.triggerId);\n const hasIcons = useMenuContext(context => context.hasIcons);\n const hasCheckmarks = useMenuContext(context => context.hasCheckmarks);\n\n return {\n hasMenuContext,\n checkedValues,\n onCheckedValueChange,\n defaultCheckedValues,\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 = (props: MenuListProps, contextValue: ReturnType<typeof useMenuContextSelectors>) => {\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 contextValue.hasMenuContext && isUsingPropsAndContext;\n};\n"]}
1	+ {"version":3,"sources":["components/MenuList/useMenuList.ts"],"names":[],"mappings":"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","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 } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\nimport type { MenuListProps, MenuListState, UninitializedMenuListState } from './MenuList.types';\n\n/*\n Returns the props and state required to render the component\n /\nexport const useMenuList = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n const focusAttributes = useArrowNavigationGroup({ circular: true });\n const { findAllFocusable } = useFocusFinders();\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 innerRef = React.useRef<HTMLElement>(null);\n const initialState: UninitializedMenuListState = {\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,\n hasCheckmarks: menuContext.hasCheckmarks,\n ...(hasMenuContext && menuContext),\n ...props,\n };\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: initialState.checkedValues,\n defaultState: initialState.defaultCheckedValues,\n initialState: {},\n });\n\n const { onCheckedValueChange } = initialState;\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 onCheckedValueChange?.(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 onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n });\n\n const state = {\n ...initialState,\n setFocusByFirstCharacter,\n selectRadio,\n toggleCheckbox,\n checkedValues: checkedValues ?? {},\n };\n\n return state;\n};\n\n/\n Adds some sugar to fetching multiple context selector values\n /\nconst useMenuContextSelectors = () => {\n const checkedValues = useMenuContext(context => context.checkedValues);\n const onCheckedValueChange = useMenuContext(context => context.onCheckedValueChange);\n const defaultCheckedValues = useMenuContext(context => context.defaultCheckedValues);\n const triggerId = useMenuContext(context => context.triggerId);\n const hasIcons = useMenuContext(context => context.hasIcons);\n const hasCheckmarks = useMenuContext(context => context.hasCheckmarks);\n\n return {\n checkedValues,\n onCheckedValueChange,\n defaultCheckedValues,\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"],"sourceRoot":"../src/"}

package/lib/components/MenuList/useMenuListContextValues.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { MenuListContextValues, MenuListState } from './MenuList.types';
2	+ export declare function useMenuListContextValues(state: MenuListState): MenuListContextValues;

package/lib/components/MenuList/useMenuListContextValues.js ADDED Viewed

@@ -0,0 +1,23 @@
+export function useMenuListContextValues(state) {
+  var onCheckedValueChange = state.onCheckedValueChange,
+      checkedValues = state.checkedValues,
+      toggleCheckbox = state.toggleCheckbox,
+      selectRadio = state.selectRadio,
+      setFocusByFirstCharacter = state.setFocusByFirstCharacter,
+      hasIcons = state.hasIcons,
+      hasCheckmarks = state.hasCheckmarks; // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
+  var menuList = {
+    onCheckedValueChange: onCheckedValueChange,
+    checkedValues: checkedValues,
+    toggleCheckbox: toggleCheckbox,
+    selectRadio: selectRadio,
+    setFocusByFirstCharacter: setFocusByFirstCharacter,
+    hasIcons: hasIcons,
+    hasCheckmarks: hasCheckmarks
+  };
+  return {
+    menuList: menuList
+  };
+}
+//# sourceMappingURL=useMenuListContextValues.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["components/MenuList/useMenuListContextValues.ts"],"names":[],"mappings":"AAEA,OAAM,SAAU,wBAAV,CAAmC,KAAnC,EAAuD;AAEzD,MAAA,oBAAoB,GAOlB,KAAK,CAPa,oBAApB;AAAA,MACA,aAAa,GAMX,KAAK,CANM,aADb;AAAA,MAEA,cAAc,GAKZ,KAAK,CALO,cAFd;AAAA,MAGA,WAAW,GAIT,KAAK,CAJI,WAHX;AAAA,MAIA,wBAAwB,GAGtB,KAAK,CAHiB,wBAJxB;AAAA,MAKA,QAAQ,GAEN,KAAK,CAFC,QALR;AAAA,MAMA,aAAa,GACX,KAAK,CADM,aANb,CAFyD,CAW3D;;AACA,MAAM,QAAQ,GAAG;AACf,IAAA,oBAAoB,EAAA,oBADL;AAEf,IAAA,aAAa,EAAA,aAFE;AAGf,IAAA,cAAc,EAAA,cAHC;AAIf,IAAA,WAAW,EAAA,WAJI;AAKf,IAAA,wBAAwB,EAAA,wBALT;AAMf,IAAA,QAAQ,EAAA,QANO;AAOf,IAAA,aAAa,EAAA;AAPE,GAAjB;AAUA,SAAO;AAAE,IAAA,QAAQ,EAAA;AAAV,GAAP;AACD","sourcesContent":["import type { MenuListContextValues, MenuListState } from './MenuList.types';\n\nexport function useMenuListContextValues(state: MenuListState): MenuListContextValues {\n const {\n onCheckedValueChange,\n checkedValues,\n toggleCheckbox,\n selectRadio,\n setFocusByFirstCharacter,\n hasIcons,\n hasCheckmarks,\n } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const menuList = {\n onCheckedValueChange,\n checkedValues,\n toggleCheckbox,\n selectRadio,\n setFocusByFirstCharacter,\n hasIcons,\n hasCheckmarks,\n };\n\n return { menuList };\n}\n"],"sourceRoot":"../src/"}