@fluentui/react-menu 0.0.0-nightly-20220302-0405.1

package/lib-commonjs/components/MenuItemRadio/MenuItemRadio.types.d.ts

@@ -0,0 +1,4 @@
+import type { MenuItemSelectableProps, MenuItemSelectableState } from '../../selectable/index';
+import type { MenuItemProps, MenuItemState } from '../MenuItem/MenuItem.types';
+export declare type MenuItemRadioProps = MenuItemProps & MenuItemSelectableProps;
+export declare type MenuItemRadioState = MenuItemState & MenuItemSelectableState;

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

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=MenuItemRadio.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

package/lib-commonjs/components/MenuItemRadio/index.d.ts

@@ -0,0 +1,5 @@
+export * from './MenuItemRadio.types';
+export * from './MenuItemRadio';
+export * from './renderMenuItemRadio';
+export * from './useMenuItemRadio';
+export * from './useMenuItemRadioStyles';

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./MenuItemRadio.types"), exports);
+
+tslib_1.__exportStar(require("./MenuItemRadio"), exports);
+
+tslib_1.__exportStar(require("./renderMenuItemRadio"), exports);
+
+tslib_1.__exportStar(require("./useMenuItemRadio"), exports);
+
+tslib_1.__exportStar(require("./useMenuItemRadioStyles"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/MenuItemRadio/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './MenuItemRadio.types';\nexport * from './MenuItemRadio';\nexport * from './renderMenuItemRadio';\nexport * from './useMenuItemRadio';\nexport * from './useMenuItemRadioStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuItemRadio/renderMenuItemRadio.d.ts

@@ -0,0 +1,6 @@
+import type { MenuItemRadioState } from './MenuItemRadio.types';
+/**
+ * Redefine the render function to add slots. Reuse the menuitemradio structure but add
+ * slots to children.
+ */
+export declare const renderMenuItemRadio_unstable: (state: MenuItemRadioState) => JSX.Element;

package/lib-commonjs/components/MenuItemRadio/renderMenuItemRadio.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderMenuItemRadio_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Redefine the render function to add slots. Reuse the menuitemradio structure but add
+ * slots to children.
+ */
+
+
+const renderMenuItemRadio_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, { ...slotProps.root
+  }, slots.checkmark && React.createElement(slots.checkmark, { ...slotProps.checkmark
+  }), slots.icon && React.createElement(slots.icon, { ...slotProps.icon
+  }), slots.content && React.createElement(slots.content, { ...slotProps.content
+  }), slots.secondaryContent && React.createElement(slots.secondaryContent, { ...slotProps.secondaryContent
+  }));
+};
+
+exports.renderMenuItemRadio_unstable = renderMenuItemRadio_unstable;
+//# sourceMappingURL=renderMenuItemRadio.js.map

package/lib-commonjs/components/MenuItemRadio/renderMenuItemRadio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/MenuItemRadio/renderMenuItemRadio.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;;AAGG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA8B;AACxE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,SAAN,IAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAhB,CADtB,EAEG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFjB,EAGG,KAAK,CAAC,OAAN,IAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,CAHpB,EAIG,KAAK,CAAC,gBAAN,IAA0B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,CAJ7B,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\nimport type { MenuItemSlots } from '../MenuItem/MenuItem.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menuitemradio structure but add\n * slots to children.\n */\nexport const renderMenuItemRadio_unstable = (state: MenuItemRadioState) => {\n  const { slots, slotProps } = getSlots<MenuItemSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.checkmark && <slots.checkmark {...slotProps.checkmark} />}\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {slots.content && <slots.content {...slotProps.content} />}\n      {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuItemRadio/useMenuItemRadio.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { MenuItemRadioProps, MenuItemRadioState } from './MenuItemRadio.types';
+/**
+ * Given user props, returns state and render function for a MenuItemRadio.
+ */
+export declare const useMenuItemRadio_unstable: (props: MenuItemRadioProps, ref: React.Ref<HTMLElement>) => MenuItemRadioState;

package/lib-commonjs/components/MenuItemRadio/useMenuItemRadio.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMenuItemRadio_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
+
+const menuListContext_1 = /*#__PURE__*/require("../../contexts/menuListContext");
+
+const useMenuItem_1 = /*#__PURE__*/require("../MenuItem/useMenuItem");
+/**
+ * Given user props, returns state and render function for a MenuItemRadio.
+ */
+
+
+const useMenuItemRadio_unstable = (props, ref) => {
+  const radioProps = {
+    role: 'menuitemradio'
+  };
+  const state = useMenuItem_1.useMenuItem_unstable({ ...radioProps,
+    ...props,
+    checkmark: react_utilities_1.resolveShorthand(props.checkmark, {
+      defaultProps: {
+        children: React.createElement(react_icons_1.Checkmark16Filled, null)
+      },
+      required: true
+    })
+  }, ref);
+  const selectRadio = menuListContext_1.useMenuListContext_unstable(context => context.selectRadio);
+  const {
+    onClick: onClickOriginal
+  } = state.root;
+  const checked = menuListContext_1.useMenuListContext_unstable(context => {
+    var _a;
+
+    const checkedItems = ((_a = context.checkedValues) === null || _a === void 0 ? void 0 : _a[state.name]) || [];
+    return checkedItems.indexOf(state.value) !== -1;
+  });
+  state.checked = checked;
+  state.root['aria-checked'] = state.checked; // MenuItem state already transforms keyDown to click events
+
+  state.root.onClick = e => {
+    if (state.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
+    selectRadio === null || selectRadio === void 0 ? void 0 : selectRadio(e, state.name, state.value, state.checked);
+    onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
+  };
+
+  return state;
+};
+
+exports.useMenuItemRadio_unstable = useMenuItemRadio_unstable;
+//# sourceMappingURL=useMenuItemRadio.js.map

package/lib-commonjs/components/MenuItemRadio/useMenuItemRadio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/MenuItemRadio/useMenuItemRadio.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;AACtB,QAAM,UAAU,GAAG;AACjB,IAAA,IAAI,EAAE;AADW,GAAnB;AAIA,QAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CACZ,EACE,GAAG,UADL;AAEE,OAAG,KAFL;AAGE,IAAA,SAAS,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,SAAvB,EAAkC;AAC3C,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,iBAAD,EAAkB,IAAlB;AAAZ,OAD6B;AAE3C,MAAA,QAAQ,EAAE;AAFiC,KAAlC;AAHb,GADY,EASZ,GATY,CAAd;AAYA,QAAM,WAAW,GAAG,iBAAA,CAAA,2BAAA,CAA4B,OAAO,IAAI,OAAO,CAAC,WAA/C,CAApB;AACA,QAAM;AAAE,IAAA,OAAO,EAAE;AAAX,MAA+B,KAAK,CAAC,IAA3C;AACA,QAAM,OAAO,GAAG,iBAAA,CAAA,2BAAA,CAA4B,OAAO,IAAG;;;AACpD,UAAM,YAAY,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAR,MAAqB,IAArB,IAAqB,EAAA,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAqB,EAAA,CAAG,KAAK,CAAC,IAAT,CAArB,KAAuC,EAA5D;AACA,WAAO,YAAY,CAAC,OAAb,CAAqB,KAAK,CAAC,KAA3B,MAAsC,CAAC,CAA9C;AACD,GAHe,CAAhB;AAKA,EAAA,KAAK,CAAC,OAAN,GAAgB,OAAhB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,cAAX,IAA6B,KAAK,CAAC,OAAnC,CAzBsB,CA2BtB;;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,CAAC,IAAG;AACvB,QAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,MAAA,CAAC,CAAC,cAAF;AACA,MAAA,CAAC,CAAC,eAAF;AACA;AACD;;AAED,IAAA,WAAW,KAAA,IAAX,IAAA,WAAW,KAAA,KAAA,CAAX,GAAW,KAAA,CAAX,GAAA,WAAW,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAX;AACA,IAAA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;AACD,GATD;;AAWA,SAAO,KAAP;AACD,CA3CM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport type { MenuItemRadioProps, MenuItemRadioState } from './MenuItemRadio.types';\n\n/**\n * Given user props, returns state and render function for a MenuItemRadio.\n */\nexport const useMenuItemRadio_unstable = (\n  props: MenuItemRadioProps,\n  ref: React.Ref<HTMLElement>,\n): MenuItemRadioState => {\n  const radioProps = {\n    role: 'menuitemradio',\n  };\n\n  const state = useMenuItem_unstable(\n    {\n      ...radioProps,\n      ...props,\n      checkmark: resolveShorthand(props.checkmark, {\n        defaultProps: { children: <Checkmark16Filled /> },\n        required: true,\n      }),\n    },\n    ref,\n  ) as MenuItemRadioState;\n\n  const selectRadio = useMenuListContext_unstable(context => context.selectRadio);\n  const { onClick: onClickOriginal } = state.root;\n  const checked = useMenuListContext_unstable(context => {\n    const checkedItems = context.checkedValues?.[state.name] || [];\n    return checkedItems.indexOf(state.value) !== -1;\n  });\n\n  state.checked = checked;\n  state.root['aria-checked'] = state.checked;\n\n  // MenuItem state already transforms keyDown to click events\n  state.root.onClick = e => {\n    if (state.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    selectRadio?.(e, state.name, state.value, state.checked);\n    onClickOriginal?.(e);\n  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.d.ts

@@ -0,0 +1,3 @@
+import type { MenuItemRadioState } from './MenuItemRadio.types';
+export declare const menuItemRadioClassName = "fui-MenuItemRadio";
+export declare const useMenuItemRadioStyles_unstable: (state: MenuItemRadioState) => void;

package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMenuItemRadioStyles_unstable = exports.menuItemRadioClassName = void 0;
+
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const index_1 = /*#__PURE__*/require("../../selectable/index");
+
+const useMenuItemStyles_1 = /*#__PURE__*/require("../MenuItem/useMenuItemStyles");
+
+exports.menuItemRadioClassName = 'fui-MenuItemRadio';
+
+const useMenuItemRadioStyles_unstable = state => {
+  state.root.className = react_1.mergeClasses(exports.menuItemRadioClassName, state.root.className);
+  useMenuItemStyles_1.useMenuItemStyles_unstable(state);
+  index_1.useCheckmarkStyles_unstable(state);
+};
+
+exports.useMenuItemRadioStyles_unstable = useMenuItemRadioStyles_unstable;
+//# sourceMappingURL=useMenuItemRadioStyles.js.map

package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/MenuItemRadio/useMenuItemRadioStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AAGa,OAAA,CAAA,sBAAA,GAAyB,mBAAzB;;AAEN,MAAM,+BAA+B,GAAI,KAAD,IAA8B;AAC3E,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,sBAAb,EAAqC,KAAK,CAAC,IAAN,CAAW,SAAhD,CAAvB;AAEA,EAAA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;AACA,EAAA,OAAA,CAAA,2BAAA,CAA4B,KAA5B;AACD,CALM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\n\nexport const menuItemRadioClassName = 'fui-MenuItemRadio';\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState) => {\n  state.root.className = mergeClasses(menuItemRadioClassName, state.root.className);\n\n  useMenuItemStyles_unstable(state);\n  useCheckmarkStyles_unstable(state);\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuList/MenuList.d.ts

@@ -0,0 +1,6 @@
+import type { MenuListProps } from './MenuList.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+/**
+ * Define a styled MenuList, using the `useMenuList_unstable` hook.
+ */
+export declare const MenuList: ForwardRefComponent<MenuListProps>;

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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);
+});
+exports.MenuList.displayName = 'MenuList';
+//# sourceMappingURL=MenuList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/MenuList/MenuList.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,0BAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC1F,QAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;AACA,QAAM,aAAa,GAAG,0BAAA,CAAA,iCAAA,CAAkC,KAAlC,CAAtB;AACA,EAAA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;AAEA,SAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,EAA+B,aAA/B,CAAP;AACD,CAN2D,CAA/C;AAQb,OAAA,CAAA,QAAA,CAAS,WAAT,GAAuB,UAAvB","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"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuList/MenuList.types.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { MenuListContextValue } from '../../contexts/menuListContext';
+import type { SelectableHandler } from '../../selectable/index';
+export declare type MenuCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;
+export declare type MenuCheckedValueChangeData = {
+    /** The name of the value */
+    name: string;
+    /** The items for this value that are checked */
+    checkedItems: string[];
+};
+export declare type MenuListCommons = {
+    /**
+     * Callback when checked items change for value with a name
+     *
+     * @param event - React's original SyntheticEvent
+     * @param data - A data object with relevant information
+     */
+    onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;
+    /**
+     * Map of all checked values
+     */
+    checkedValues: Record<string, string[]>;
+    /**
+     * Default values to be checked on mount
+     */
+    defaultCheckedValues?: Record<string, string[]>;
+    /**
+     * States that menu items can contain icons and reserve slots for item alignment
+     */
+    hasIcons?: boolean;
+    /**
+     * States that menu items can contain selectable items and reserve slots for item alignment
+     */
+    hasCheckmarks?: boolean;
+};
+export declare type MenuListSlots = {
+    root: Slot<'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: 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-commonjs/components/MenuList/MenuList.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=MenuList.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

package/lib-commonjs/components/MenuList/index.d.ts

@@ -0,0 +1,6 @@
+export * from './MenuList';
+export type { MenuCheckedValueChangeData, MenuCheckedValueChangeEvent, MenuListContextValues, MenuListProps, MenuListSlots, MenuListState, UninitializedMenuListState, } from './MenuList.types';
+export * from './renderMenuList';
+export * from './useMenuList';
+export * from './useMenuListStyles';
+export * from './useMenuListContextValues';

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./MenuList"), 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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/MenuList/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AAWA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './MenuList';\n// Explicit exports to omit MenuListCommons\nexport type {\n  MenuCheckedValueChangeData,\n  MenuCheckedValueChangeEvent,\n  MenuListContextValues,\n  MenuListProps,\n  MenuListSlots,\n  MenuListState,\n  UninitializedMenuListState,\n} from './MenuList.types';\nexport * from './renderMenuList';\nexport * from './useMenuList';\nexport * from './useMenuListStyles';\nexport * from './useMenuListContextValues';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuList/renderMenuList.d.ts

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

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/MenuList/renderMenuList.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAAuB,aAAvB,KAA+D;AACpG,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,iBAAA,CAAA,gBAAD,EAAiB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAjB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","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"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuList/useMenuList.d.ts

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

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

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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) => {
+  const focusAttributes = react_tabster_1.useArrowNavigationGroup({
+    circular: true
+  });
+  const {
+    findAllFocusable
+  } = react_tabster_1.useFocusFinders();
+  const menuContext = useMenuContextSelectors();
+  const hasMenuContext = react_context_selector_1.useHasParentContext(menuContext_2.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');
+  }
+
+  const innerRef = React.useRef(null);
+  const initialState = {
+    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,
+    hasCheckmarks: menuContext.hasCheckmarks,
+    ...(hasMenuContext && menuContext),
+    ...props
+  };
+  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 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] = react_utilities_1.useControllableState({
+    state: initialState.checkedValues,
+    defaultState: initialState.defaultCheckedValues,
+    initialState: {}
+  });
+  const {
+    onCheckedValueChange
+  } = initialState;
+  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);
+    }
+
+    onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(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
+    }));
+    onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
+      name,
+      checkedItems: newCheckedItems
+    });
+  });
+  const state = { ...initialState,
+    setFocusByFirstCharacter,
+    selectRadio,
+    toggleCheckbox,
+    checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {}
+  };
+  return state;
+};
+
+exports.useMenuList_unstable = useMenuList_unstable;
+/**
+ * Adds some sugar to fetching multiple context selector values
+ */
+
+const useMenuContextSelectors = () => {
+  const checkedValues = menuContext_1.useMenuContext_unstable(context => context.checkedValues);
+  const onCheckedValueChange = menuContext_1.useMenuContext_unstable(context => context.onCheckedValueChange);
+  const defaultCheckedValues = menuContext_1.useMenuContext_unstable(context => context.defaultCheckedValues);
+  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,
+    defaultCheckedValues,
+    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;
+    }
+  }
+
+  return hasMenuContext && isUsingPropsAndContext;
+};
+//# sourceMappingURL=useMenuList.js.map

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

@@ -0,0 +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_unstable } 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_unstable = (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    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,\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_unstable(context => context.checkedValues);\n  const onCheckedValueChange = useMenuContext_unstable(context => context.onCheckedValueChange);\n  const defaultCheckedValues = useMenuContext_unstable(context => context.defaultCheckedValues);\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    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-commonjs/components/MenuList/useMenuListContextValues.d.ts

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