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

package/lib-amd/components/MenuItem/useMenuItem.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { MenuItemProps, MenuItemState } from './MenuItem.types';
+import type { MenuItemProps, MenuItemSlots, MenuItemState } from './MenuItem.types';
 /**
  * Consts listing which props are shorthand props.
  */
-export declare const menuItemShorthandProps: readonly ["icon", "submenuIndicator", "content", "secondaryContent", "checkmark"];
+export declare const menuItemSlots: Array<keyof MenuItemSlots>;
 /**
  * Returns the props and state required to render the component
  */
-export declare const useMenuItem: (props: MenuItemProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuItemProps | undefined) => MenuItemState;
+export declare const useMenuItem: (props: MenuItemProps, ref: React.Ref<HTMLElement>) => MenuItemState;

package/lib-amd/components/MenuItem/useMenuItem.js

@@ -1,63 +1,84 @@
-define(["require", "exports", "react", "@fluentui/react-utilities", "./useCharacterSearch", "../../contexts/menuTriggerContext", "../../utils/DefaultIcons", "../../contexts/menuListContext"], function (require, exports, React, react_utilities_1, useCharacterSearch_1, menuTriggerContext_1, DefaultIcons_1, menuListContext_1) {
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-shared-contexts", "./useCharacterSearch", "../../contexts/menuTriggerContext", "@fluentui/react-icons", "../../contexts/menuListContext", "../../contexts/menuContext"], function (require, exports, tslib_1, React, react_utilities_1, react_shared_contexts_1, useCharacterSearch_1, menuTriggerContext_1, react_icons_1, menuListContext_1, menuContext_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useMenuItem = exports.menuItemSlots = void 0;
     /**
      * Consts listing which props are shorthand props.
      */
-    exports.menuItemShorthandProps = ['icon', 'submenuIndicator', 'content', 'secondaryContent', 'checkmark'];
-    // eslint-disable-next-line deprecation/deprecation
-    var mergeProps = react_utilities_1.makeMergePropsCompat({ deepMerge: exports.menuItemShorthandProps });
+    exports.menuItemSlots = [
+        'root',
+        'icon',
+        'submenuIndicator',
+        'content',
+        'secondaryContent',
+        'checkmark',
+    ];
     /**
      * Returns the props and state required to render the component
      */
-    exports.useMenuItem = function (props, ref, defaultProps) {
+    var useMenuItem = function (props, ref) {
         var hasSubmenu = menuTriggerContext_1.useMenuTriggerContext();
         var hasIcons = menuListContext_1.useMenuListContext(function (context) { return context.hasIcons; });
         var hasCheckmarks = menuListContext_1.useMenuListContext(function (context) { return context.hasCheckmarks; });
-        var state = mergeProps({
-            ref: react_utilities_1.useMergedRefs(ref, React.useRef(null)),
-            icon: { as: 'span', children: hasIcons ? '' : undefined },
-            checkmark: { as: 'span', children: hasCheckmarks ? '' : undefined },
-            submenuIndicator: { as: 'span', children: React.createElement(DefaultIcons_1.ChevronRightIcon, null) },
-            content: { as: 'span', children: props.children },
-            secondaryContent: { as: 'span' },
-            role: 'menuitem',
-            tabIndex: 0,
-            hasSubmenu: hasSubmenu,
-            'aria-disabled': props.disabled,
-            dummy: { foo: 'xxx ' },
-        }, defaultProps && react_utilities_1.resolveShorthandProps(defaultProps, exports.menuItemShorthandProps), react_utilities_1.resolveShorthandProps(props, exports.menuItemShorthandProps));
-        var onClickOriginal = state.onClick, onKeyDownOriginal = state.onKeyDown;
-        state.onKeyDown = function (e) {
-            var _a, _b;
+        var setOpen = menuContext_1.useMenuContext(function (context) { return context.setOpen; });
+        var persistOnClickContext = menuContext_1.useMenuContext(function (context) { return context.persistOnItemClick; });
+        var dismissedWithKeyboardRef = React.useRef(false);
+        var dir = react_shared_contexts_1.useFluent().dir;
+        var innerRef = React.useRef(null);
+        var state = tslib_1.__assign(tslib_1.__assign({ hasSubmenu: hasSubmenu }, props), { components: {
+                root: 'div',
+                icon: 'span',
+                checkmark: 'span',
+                submenuIndicator: 'span',
+                content: 'span',
+                secondaryContent: 'span',
+            }, root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign({ ref: react_utilities_1.useMergedRefs(ref, innerRef), role: 'menuitem', tabIndex: 0, 'aria-disabled': props.disabled }, props)), icon: react_utilities_1.resolveShorthand(props.icon, { required: hasIcons }), checkmark: react_utilities_1.resolveShorthand(props.checkmark, { required: hasCheckmarks }), submenuIndicator: react_utilities_1.resolveShorthand(props.submenuIndicator, {
+                required: hasSubmenu,
+                defaultProps: {
+                    children: dir === 'ltr' ? React.createElement(react_icons_1.ChevronRight20Regular, null) : React.createElement(react_icons_1.ChevronLeft20Regular, null),
+                },
+            }), content: react_utilities_1.resolveShorthand(props.content, { required: true, defaultProps: { children: props.children } }), secondaryContent: react_utilities_1.resolveShorthand(props.secondaryContent) });
+        var _a = state.root, onClickOriginal = _a.onClick, onKeyDownOriginal = _a.onKeyDown;
+        state.root.onKeyDown = function (e) {
+            var _a;
             if (react_utilities_1.shouldPreventDefaultOnKeyDown(e)) {
                 if (state.disabled) {
                     e.preventDefault();
                     e.stopPropagation();
                     return;
                 }
+                dismissedWithKeyboardRef.current = true;
                 e.preventDefault();
                 (_a = e.target) === null || _a === void 0 ? void 0 : _a.click();
             }
-            (_b = onKeyDownOriginal) === null || _b === void 0 ? void 0 : _b(e);
+            onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
         };
-        state.onClick = function (e) {
-            var _a;
+        state.root.onClick = function (e) {
             if (state.disabled) {
                 e.preventDefault();
                 e.stopPropagation();
                 return;
             }
-            (_a = onClickOriginal) === null || _a === void 0 ? void 0 : _a(e);
+            var shouldPersist = persistOnClickContext;
+            // prop wins over context;
+            if (state.persistOnClick !== undefined && persistOnClickContext !== state.persistOnClick) {
+                shouldPersist = state.persistOnClick;
+            }
+            if (!hasSubmenu && !shouldPersist) {
+                setOpen(e, { open: false, keyboard: dismissedWithKeyboardRef.current, bubble: true });
+                dismissedWithKeyboardRef.current = false;
+            }
+            onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
         };
-        var onMouseEnterOriginal = state.onMouseEnter;
-        state.onMouseEnter = react_utilities_1.useEventCallback(function (e) {
-            var _a, _b;
-            (_a = state.ref.current) === null || _a === void 0 ? void 0 : _a.focus();
-            (_b = onMouseEnterOriginal) === null || _b === void 0 ? void 0 : _b(e);
+        var onMouseEnterOriginal = state.root.onMouseEnter;
+        state.root.onMouseEnter = react_utilities_1.useEventCallback(function (e) {
+            var _a;
+            (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(e);
         });
-        useCharacterSearch_1.useCharacterSearch(state);
+        useCharacterSearch_1.useCharacterSearch(state, innerRef);
         return state;
     };
+    exports.useMenuItem = useMenuItem;
 });
 //# sourceMappingURL=useMenuItem.js.map

package/lib-amd/components/MenuItem/useMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuItem.js","sourceRoot":"../src/","sources":["components/MenuItem/useMenuItem.tsx"],"names":[],"mappings":";;;IAcA;;OAEG;IACU,QAAA,sBAAsB,GAAG,CAAC,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAE,kBAAkB,EAAE,WAAW,CAAU,CAAC;IAExH,mDAAmD;IACnD,IAAM,UAAU,GAAG,sCAAoB,CAAgB,EAAE,SAAS,EAAE,8BAAsB,EAAE,CAAC,CAAC;IAE9F;;OAEG;IACU,QAAA,WAAW,GAAG,UACzB,KAAoB,EACpB,GAA2B,EAC3B,YAA4B;QAE5B,IAAM,UAAU,GAAG,0CAAqB,EAAE,CAAC;QAC3C,IAAM,QAAQ,GAAG,oCAAkB,CAAC,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,QAAQ,EAAhB,CAAgB,CAAC,CAAC;QACjE,IAAM,aAAa,GAAG,oCAAkB,CAAC,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,aAAa,EAArB,CAAqB,CAAC,CAAC;QAE3E,IAAM,KAAK,GAAG,UAAU,CACtB;YACE,GAAG,EAAE,+BAAa,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YAC3C,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE;YACzD,SAAS,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE;YACnE,gBAAgB,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,oBAAC,+BAAgB,OAAG,EAAE;YAChE,OAAO,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE;YACjD,gBAAgB,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;YAChC,IAAI,EAAE,UAAU;YAChB,QAAQ,EAAE,CAAC;YACX,UAAU,YAAA;YACV,eAAe,EAAE,KAAK,CAAC,QAAQ;YAC/B,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE;SACvB,EACD,YAAY,IAAI,uCAAqB,CAAC,YAAY,EAAE,8BAAsB,CAAC,EAC3E,uCAAqB,CAAC,KAAK,EAAE,8BAAsB,CAAC,CACrD,CAAC;QAEM,IAAA,+BAAwB,EAAE,mCAA4B,CAAW;QACzE,KAAK,CAAC,SAAS,GAAG,UAAC,CAAmC;;YACpD,IAAI,+CAA6B,CAAC,CAAC,CAAC,EAAE;gBACpC,IAAI,KAAK,CAAC,QAAQ,EAAE;oBAClB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,OAAO;iBACR;gBAED,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,MAAC,CAAC,CAAC,MAAsB,0CAAE,KAAK,GAAG;aACpC;YAED,MAAA,iBAAiB,0CAAG,CAAC,EAAE;QACzB,CAAC,CAAC;QAEF,KAAK,CAAC,OAAO,GAAG,UAAC,CAAgC;;YAC/C,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAClB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,OAAO;aACR;YAED,MAAA,eAAe,0CAAG,CAAC,EAAE;QACvB,CAAC,CAAC;QAEM,IAAA,yCAAkC,CAAW;QACrD,KAAK,CAAC,YAAY,GAAG,kCAAgB,CAAC,UAAC,CAAgC;;YACrE,MAAA,KAAK,CAAC,GAAG,CAAC,OAAO,0CAAE,KAAK,GAAG;YAE3B,MAAA,oBAAoB,0CAAG,CAAC,EAAE;QAC5B,CAAC,CAAC,CAAC;QAEH,uCAAkB,CAAC,KAAK,CAAC,CAAC;QAC1B,OAAO,KAAK,CAAC;IACf,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport {\n  makeMergePropsCompat,\n  resolveShorthandProps,\n  useMergedRefs,\n  useEventCallback,\n  shouldPreventDefaultOnKeyDown,\n} from '@fluentui/react-utilities';\nimport { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext } from '../../contexts/menuTriggerContext';\nimport { ChevronRightIcon } from '../../utils/DefaultIcons';\nimport { useMenuListContext } from '../../contexts/menuListContext';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const menuItemShorthandProps = ['icon', 'submenuIndicator', 'content', 'secondaryContent', 'checkmark'] as const;\n\n// eslint-disable-next-line deprecation/deprecation\nconst mergeProps = makeMergePropsCompat<MenuItemState>({ deepMerge: menuItemShorthandProps });\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem = (\n  props: MenuItemProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: MenuItemProps,\n): MenuItemState => {\n  const hasSubmenu = useMenuTriggerContext();\n  const hasIcons = useMenuListContext(context => context.hasIcons);\n  const hasCheckmarks = useMenuListContext(context => context.hasCheckmarks);\n\n  const state = mergeProps(\n    {\n      ref: useMergedRefs(ref, React.useRef(null)),\n      icon: { as: 'span', children: hasIcons ? '' : undefined },\n      checkmark: { as: 'span', children: hasCheckmarks ? '' : undefined },\n      submenuIndicator: { as: 'span', children: <ChevronRightIcon /> },\n      content: { as: 'span', children: props.children },\n      secondaryContent: { as: 'span' },\n      role: 'menuitem',\n      tabIndex: 0,\n      hasSubmenu,\n      'aria-disabled': props.disabled,\n      dummy: { foo: 'xxx ' },\n    },\n    defaultProps && resolveShorthandProps(defaultProps, menuItemShorthandProps),\n    resolveShorthandProps(props, menuItemShorthandProps),\n  );\n\n  const { onClick: onClickOriginal, onKeyDown: onKeyDownOriginal } = state;\n  state.onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (shouldPreventDefaultOnKeyDown(e)) {\n      if (state.disabled) {\n        e.preventDefault();\n        e.stopPropagation();\n        return;\n      }\n\n      e.preventDefault();\n      (e.target as HTMLElement)?.click();\n    }\n\n    onKeyDownOriginal?.(e);\n  };\n\n  state.onClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (state.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    onClickOriginal?.(e);\n  };\n\n  const { onMouseEnter: onMouseEnterOriginal } = state;\n  state.onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    state.ref.current?.focus();\n\n    onMouseEnterOriginal?.(e);\n  });\n\n  useCharacterSearch(state);\n  return state;\n};\n"]}
+{"version":3,"file":"useMenuItem.js","sourceRoot":"../src/","sources":["components/MenuItem/useMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  useEventCallback,\n  shouldPreventDefaultOnKeyDown,\n  resolveShorthand,\n  useMergedRefs,\n  getNativeElementProps,\n} from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext } from '../../contexts/menuTriggerContext';\nimport {\n  ChevronRight20Regular as ChevronRightIcon,\n  ChevronLeft20Regular as ChevronLeftIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext } from '../../contexts/menuListContext';\nimport { useMenuContext } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemSlots, MenuItemState } from './MenuItem.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const menuItemSlots: Array<keyof MenuItemSlots> = [\n  'root',\n  'icon',\n  'submenuIndicator',\n  'content',\n  'secondaryContent',\n  'checkmark',\n];\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem = (props: MenuItemProps, ref: React.Ref<HTMLElement>): MenuItemState => {\n  const hasSubmenu = useMenuTriggerContext();\n  const hasIcons = useMenuListContext(context => context.hasIcons);\n  const hasCheckmarks = useMenuListContext(context => context.hasCheckmarks);\n  const setOpen = useMenuContext(context => context.setOpen);\n  const persistOnClickContext = useMenuContext(context => context.persistOnItemClick);\n  const dismissedWithKeyboardRef = React.useRef(false);\n\n  const { dir } = useFluent();\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const state: MenuItemState = {\n    hasSubmenu,\n    ...props,\n    components: {\n      root: 'div',\n      icon: 'span',\n      checkmark: 'span',\n      submenuIndicator: 'span',\n      content: 'span',\n      secondaryContent: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'menuitem',\n      tabIndex: 0,\n      'aria-disabled': props.disabled,\n      ...props,\n    }),\n    icon: resolveShorthand(props.icon, { required: hasIcons }),\n    checkmark: resolveShorthand(props.checkmark, { required: hasCheckmarks }),\n    submenuIndicator: resolveShorthand(props.submenuIndicator, {\n      required: hasSubmenu,\n      defaultProps: {\n        children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n      },\n    }),\n    content: resolveShorthand(props.content, { required: true, defaultProps: { children: props.children } }),\n    secondaryContent: resolveShorthand(props.secondaryContent),\n  };\n\n  const { onClick: onClickOriginal, onKeyDown: onKeyDownOriginal } = state.root;\n  state.root.onKeyDown = e => {\n    if (shouldPreventDefaultOnKeyDown(e)) {\n      if (state.disabled) {\n        e.preventDefault();\n        e.stopPropagation();\n        return;\n      }\n\n      dismissedWithKeyboardRef.current = true;\n      e.preventDefault();\n      (e.target as HTMLElement)?.click();\n    }\n\n    onKeyDownOriginal?.(e);\n  };\n\n  state.root.onClick = e => {\n    if (state.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    let shouldPersist = persistOnClickContext;\n    // prop wins over context;\n    if (state.persistOnClick !== undefined && persistOnClickContext !== state.persistOnClick) {\n      shouldPersist = state.persistOnClick;\n    }\n\n    if (!hasSubmenu && !shouldPersist) {\n      setOpen(e, { open: false, keyboard: dismissedWithKeyboardRef.current, bubble: true });\n      dismissedWithKeyboardRef.current = false;\n    }\n\n    onClickOriginal?.(e);\n  };\n\n  const { onMouseEnter: onMouseEnterOriginal } = state.root;\n  state.root.onMouseEnter = useEventCallback(e => {\n    innerRef.current?.focus();\n\n    onMouseEnterOriginal?.(e);\n  });\n\n  useCharacterSearch(state, innerRef);\n  return state;\n};\n"]}

package/lib-amd/components/MenuItem/useMenuItemStyles.d.ts

@@ -1,3 +1,3 @@
-import { MenuItemState } from './MenuItem.types';
+import type { MenuItemState } from './MenuItem.types';
 /** Applies style classnames to slots */
 export declare const useMenuItemStyles: (state: MenuItemState) => void;

package/lib-amd/components/MenuItem/useMenuItemStyles.js

@@ -1,17 +1,20 @@
-define(["require", "exports", "@fluentui/react-make-styles"], function (require, exports, react_make_styles_1) {
+define(["require", "exports", "@fluentui/react-make-styles", "@fluentui/react-tabster"], function (require, exports, react_make_styles_1, react_tabster_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useMenuItemStyles = void 0;
     var useStyles = react_make_styles_1.makeStyles({
+        focusIndicator: react_tabster_1.createFocusIndicatorStyleRule(),
         root: function (theme) { return ({
             color: theme.alias.color.neutral.neutralForeground1,
             backgroundColor: theme.alias.color.neutral.neutralBackground1,
-            paddingRight: '8px',
-            paddingLeft: '12px',
+            paddingRight: '10px',
+            paddingLeft: '10px',
             height: '32px',
             display: 'flex',
             alignItems: 'center',
             fontSize: theme.global.type.fontSizes.base[300],
             cursor: 'pointer',
+            gap: '4px',
             ':hover': {
                 backgroundColor: theme.alias.color.neutral.neutralBackground1Hover,
                 color: theme.alias.color.neutral.neutralForeground2Hover,
@@ -20,13 +23,17 @@ define(["require", "exports", "@fluentui/react-make-styles"], function (require,
                 backgroundColor: theme.alias.color.neutral.neutralBackground1Hover,
                 color: theme.alias.color.neutral.neutralForeground2Hover,
             },
+            userSelect: 'none',
         }); },
         content: {
-            marginRight: '8px',
+            paddingLeft: '2px',
+            paddingRight: '2px',
             backgroundColor: 'transparent',
             flexGrow: 1,
         },
         secondaryContent: function (theme) { return ({
+            paddingLeft: '2px',
+            paddingRight: '2px',
             color: theme.alias.color.neutral.neutralForeground3,
             ':hover': {
                 color: theme.alias.color.neutral.neutralForeground3Hover,
@@ -39,7 +46,6 @@ define(["require", "exports", "@fluentui/react-make-styles"], function (require,
         icon: {
             width: '20px',
             height: '20px',
-            marginRight: '8px',
         },
         submenuIndicator: {
             width: '20px',
@@ -59,19 +65,20 @@ define(["require", "exports", "@fluentui/react-make-styles"], function (require,
         }); },
     });
     /** Applies style classnames to slots */
-    exports.useMenuItemStyles = function (state) {
+    var useMenuItemStyles = function (state) {
         var styles = useStyles();
-        state.className = react_make_styles_1.ax(styles.root, state.disabled && styles.disabled, state.className);
-        state.content.className = react_make_styles_1.ax(styles.content, state.content.className);
+        state.root.className = react_make_styles_1.mergeClasses(styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
+        state.content.className = react_make_styles_1.mergeClasses(styles.content, state.content.className);
         if (state.secondaryContent) {
-            state.secondaryContent.className = react_make_styles_1.ax(!state.disabled && styles.secondaryContent, state.secondaryContent.className);
+            state.secondaryContent.className = react_make_styles_1.mergeClasses(!state.disabled && styles.secondaryContent, state.secondaryContent.className);
         }
         if (state.icon) {
-            state.icon.className = react_make_styles_1.ax(styles.icon, state.icon.className);
+            state.icon.className = react_make_styles_1.mergeClasses(styles.icon, state.icon.className);
         }
         if (state.submenuIndicator) {
-            state.submenuIndicator.className = react_make_styles_1.ax(styles.submenuIndicator, state.submenuIndicator.className);
+            state.submenuIndicator.className = react_make_styles_1.mergeClasses(styles.submenuIndicator, state.submenuIndicator.className);
         }
     };
+    exports.useMenuItemStyles = useMenuItemStyles;
 });
 //# sourceMappingURL=useMenuItemStyles.js.map

package/lib-amd/components/MenuItem/useMenuItemStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuItemStyles.js","sourceRoot":"../src/","sources":["components/MenuItem/useMenuItemStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { ax, makeStyles } from '@fluentui/react-make-styles';\nimport { MenuItemState } from './MenuItem.types';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    backgroundColor: theme.alias.color.neutral.neutralBackground1,\n    paddingRight: '8px',\n    paddingLeft: '12px',\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: theme.global.type.fontSizes.base[300],\n    cursor: 'pointer',\n\n    ':hover': {\n      backgroundColor: theme.alias.color.neutral.neutralBackground1Hover,\n      color: theme.alias.color.neutral.neutralForeground2Hover,\n    },\n\n    ':focus': {\n      backgroundColor: theme.alias.color.neutral.neutralBackground1Hover,\n      color: theme.alias.color.neutral.neutralForeground2Hover,\n    },\n  }),\n  content: {\n    marginRight: '8px',\n    backgroundColor: 'transparent',\n    flexGrow: 1,\n  },\n  secondaryContent: theme => ({\n    color: theme.alias.color.neutral.neutralForeground3,\n    ':hover': {\n      color: theme.alias.color.neutral.neutralForeground3Hover,\n    },\n\n    ':focus': {\n      backgroundColor: theme.alias.color.neutral.neutralBackground1Hover,\n      color: theme.alias.color.neutral.neutralForeground3Hover,\n    },\n  }),\n  icon: {\n    width: '20px',\n    height: '20px',\n    marginRight: '8px',\n  },\n  submenuIndicator: {\n    width: '20px',\n    height: '20px',\n  },\n  disabled: theme => ({\n    backgroundColor: theme.alias.color.neutral.neutralBackgroundDisabled,\n    color: theme.alias.color.neutral.neutralForegroundDisabled,\n    ':hover': {\n      backgroundColor: theme.alias.color.neutral.neutralBackgroundDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n    },\n\n    ':focus': {\n      backgroundColor: theme.alias.color.neutral.neutralBackgroundDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n    },\n  }),\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles = (state: MenuItemState) => {\n  const styles = useStyles();\n  state.className = ax(styles.root, state.disabled && styles.disabled, state.className);\n  state.content.className = ax(styles.content, state.content.className);\n  if (state.secondaryContent) {\n    state.secondaryContent.className = ax(!state.disabled && styles.secondaryContent, state.secondaryContent.className);\n  }\n\n  if (state.icon) {\n    state.icon.className = ax(styles.icon, state.icon.className);\n  }\n\n  if (state.submenuIndicator) {\n    state.submenuIndicator.className = ax(styles.submenuIndicator, state.submenuIndicator.className);\n  }\n};\n"]}
+{"version":3,"file":"useMenuItemStyles.js","sourceRoot":"../src/","sources":["components/MenuItem/useMenuItemStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { MenuItemState } from './MenuItem.types';\n\nconst useStyles = makeStyles({\n  focusIndicator: createFocusIndicatorStyleRule(),\n  root: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    backgroundColor: theme.alias.color.neutral.neutralBackground1,\n    paddingRight: '10px',\n    paddingLeft: '10px',\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: theme.global.type.fontSizes.base[300],\n    cursor: 'pointer',\n    gap: '4px',\n\n    ':hover': {\n      backgroundColor: theme.alias.color.neutral.neutralBackground1Hover,\n      color: theme.alias.color.neutral.neutralForeground2Hover,\n    },\n\n    ':focus': {\n      backgroundColor: theme.alias.color.neutral.neutralBackground1Hover,\n      color: theme.alias.color.neutral.neutralForeground2Hover,\n    },\n\n    userSelect: 'none',\n  }),\n  content: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1,\n  },\n  secondaryContent: theme => ({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    color: theme.alias.color.neutral.neutralForeground3,\n    ':hover': {\n      color: theme.alias.color.neutral.neutralForeground3Hover,\n    },\n\n    ':focus': {\n      backgroundColor: theme.alias.color.neutral.neutralBackground1Hover,\n      color: theme.alias.color.neutral.neutralForeground3Hover,\n    },\n  }),\n  icon: {\n    width: '20px',\n    height: '20px',\n  },\n  submenuIndicator: {\n    width: '20px',\n    height: '20px',\n  },\n  disabled: theme => ({\n    backgroundColor: theme.alias.color.neutral.neutralBackgroundDisabled,\n    color: theme.alias.color.neutral.neutralForegroundDisabled,\n    ':hover': {\n      backgroundColor: theme.alias.color.neutral.neutralBackgroundDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n    },\n\n    ':focus': {\n      backgroundColor: theme.alias.color.neutral.neutralBackgroundDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n    },\n  }),\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles = (state: MenuItemState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    styles.root,\n    styles.focusIndicator,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n  state.content.className = mergeClasses(styles.content, state.content.className);\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      !state.disabled && styles.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(styles.icon, state.icon.className);\n  }\n\n  if (state.submenuIndicator) {\n    state.submenuIndicator.className = mergeClasses(styles.submenuIndicator, state.submenuIndicator.className);\n  }\n};\n"]}

package/lib-amd/components/MenuItemCheckbox/MenuItemCheckbox.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { MenuItemCheckboxProps } from './MenuItemCheckbox.types';
+import type { MenuItemCheckboxProps } from './MenuItemCheckbox.types';
 /**
  * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox` hook.
- * {@docCategory MenuItemCheckbox}
  */
-export declare const MenuItemCheckbox: React.ForwardRefExoticComponent<MenuItemCheckboxProps & React.RefAttributes<HTMLElement>>;
+export declare const MenuItemCheckbox: React.ForwardRefExoticComponent<Pick<MenuItemCheckboxProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "icon" | "checkmark" | "submenuIndicator" | "content" | "secondaryContent" | "as" | "value" | "disabled" | "hasSubmenu" | "persistOnClick" | "name"> & React.RefAttributes<HTMLElement>>;

package/lib-amd/components/MenuItemCheckbox/MenuItemCheckbox.js

@@ -1,9 +1,9 @@
 define(["require", "exports", "react", "./useMenuItemCheckbox", "./renderMenuItemCheckbox", "./useMenuItemCheckboxStyles"], function (require, exports, React, useMenuItemCheckbox_1, renderMenuItemCheckbox_1, useMenuItemCheckboxStyles_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.MenuItemCheckbox = void 0;
     /**
      * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox` hook.
-     * {@docCategory MenuItemCheckbox}
      */
     exports.MenuItemCheckbox = React.forwardRef(function (props, ref) {
         var state = useMenuItemCheckbox_1.useMenuItemCheckbox(props, ref);

package/lib-amd/components/MenuItemCheckbox/MenuItemCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemCheckbox.js","sourceRoot":"../src/","sources":["components/MenuItemCheckbox/MenuItemCheckbox.tsx"],"names":[],"mappings":";;;IAMA;;;OAGG;IACU,QAAA,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAAqC,UAAC,KAAK,EAAE,GAAG;QAC9F,IAAM,KAAK,GAAG,yCAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC9C,qDAAyB,CAAC,KAAK,CAAC,CAAC;QAEjC,OAAO,+CAAsB,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,wBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC","sourcesContent":["import * as React from 'react';\nimport { useMenuItemCheckbox } from './useMenuItemCheckbox';\nimport { MenuItemCheckboxProps } from './MenuItemCheckbox.types';\nimport { renderMenuItemCheckbox } from './renderMenuItemCheckbox';\nimport { useMenuItemCheckBoxStyles } from './useMenuItemCheckboxStyles';\n\n/**\n * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox` hook.\n * {@docCategory MenuItemCheckbox}\n */\nexport const MenuItemCheckbox = React.forwardRef<HTMLElement, MenuItemCheckboxProps>((props, ref) => {\n  const state = useMenuItemCheckbox(props, ref);\n  useMenuItemCheckBoxStyles(state);\n\n  return renderMenuItemCheckbox(state);\n});\n\nMenuItemCheckbox.displayName = 'MenuItemCheckbox';\n"]}
+{"version":3,"file":"MenuItemCheckbox.js","sourceRoot":"../src/","sources":["components/MenuItemCheckbox/MenuItemCheckbox.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACU,QAAA,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAAqC,UAAC,KAAK,EAAE,GAAG;QAC9F,IAAM,KAAK,GAAG,yCAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC9C,qDAAyB,CAAC,KAAK,CAAC,CAAC;QAEjC,OAAO,+CAAsB,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,wBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC","sourcesContent":["import * as React from 'react';\nimport { useMenuItemCheckbox } from './useMenuItemCheckbox';\nimport { renderMenuItemCheckbox } from './renderMenuItemCheckbox';\nimport { useMenuItemCheckBoxStyles } from './useMenuItemCheckboxStyles';\nimport type { MenuItemCheckboxProps } from './MenuItemCheckbox.types';\n\n/**\n * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox` hook.\n */\nexport const MenuItemCheckbox = React.forwardRef<HTMLElement, MenuItemCheckboxProps>((props, ref) => {\n  const state = useMenuItemCheckbox(props, ref);\n  useMenuItemCheckBoxStyles(state);\n\n  return renderMenuItemCheckbox(state);\n});\n\nMenuItemCheckbox.displayName = 'MenuItemCheckbox';\n"]}

package/lib-amd/components/MenuItemCheckbox/MenuItemCheckbox.types.d.ts

@@ -1,23 +1,4 @@
-import * as React from 'react';
-import { ComponentProps, ObjectShorthandProps, ShorthandProps } from '@fluentui/react-utilities';
-import { MenuItemSelectableProps, MenuItemSelectableState } from '../../selectable/index';
-import { MenuItemProps, MenuItemState } from '../MenuItem/MenuItem.types';
-/**
- * {@docCategory MenuItemCheckbox}
- */
-export interface MenuItemCheckboxProps extends ComponentProps, React.HTMLAttributes<HTMLElement>, MenuItemProps, MenuItemSelectableProps {
-    /**
-     * Slot for the checkmark indicator
-     */
-    checkmark?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
-}
-/**
- * {@docCategory MenuItemCheckbox}
- */
-export interface MenuItemCheckboxState extends MenuItemState, MenuItemSelectableState {
-    ref: React.MutableRefObject<HTMLElement>;
-    /**
-     * Slot for the checkmark indicator
-     */
-    checkmark: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;
-}
+import type { MenuItemSelectableProps, MenuItemSelectableState } from '../../selectable/index';
+import type { MenuItemProps, MenuItemState } from '../MenuItem/MenuItem.types';
+export declare type MenuItemCheckboxProps = MenuItemProps & MenuItemSelectableProps;
+export declare type MenuItemCheckboxState = MenuItemState & MenuItemSelectableState;

package/lib-amd/components/MenuItemCheckbox/MenuItemCheckbox.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemCheckbox.types.js","sourceRoot":"../src/","sources":["components/MenuItemCheckbox/MenuItemCheckbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentProps, ObjectShorthandProps, ShorthandProps } from '@fluentui/react-utilities';\nimport { MenuItemSelectableProps, MenuItemSelectableState } from '../../selectable/index';\nimport { MenuItemProps, MenuItemState } from '../MenuItem/MenuItem.types';\n\n/**\n * {@docCategory MenuItemCheckbox}\n */\nexport interface MenuItemCheckboxProps\n  extends ComponentProps,\n    React.HTMLAttributes<HTMLElement>,\n    MenuItemProps,\n    MenuItemSelectableProps {\n  /**\n   * Slot for the checkmark indicator\n   */\n  checkmark?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;\n}\n\n/**\n * {@docCategory MenuItemCheckbox}\n */\nexport interface MenuItemCheckboxState extends MenuItemState, MenuItemSelectableState {\n  ref: React.MutableRefObject<HTMLElement>;\n\n  /**\n   * Slot for the checkmark indicator\n   */\n  checkmark: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;\n}\n"]}
+{"version":3,"file":"MenuItemCheckbox.types.js","sourceRoot":"../src/","sources":["components/MenuItemCheckbox/MenuItemCheckbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MenuItemSelectableProps, MenuItemSelectableState } from '../../selectable/index';\nimport type { MenuItemProps, MenuItemState } from '../MenuItem/MenuItem.types';\n\nexport type MenuItemCheckboxProps = MenuItemProps & MenuItemSelectableProps;\n\nexport type MenuItemCheckboxState = MenuItemState & MenuItemSelectableState;\n"]}

package/lib-amd/components/MenuItemCheckbox/index.js

@@ -1,6 +1,7 @@
-define(["require", "exports", "tslib", "./MenuItemCheckbox", "./renderMenuItemCheckbox", "./useMenuItemCheckbox"], function (require, exports, tslib_1, MenuItemCheckbox_1, renderMenuItemCheckbox_1, useMenuItemCheckbox_1) {
+define(["require", "exports", "tslib", "./MenuItemCheckbox.types", "./MenuItemCheckbox", "./renderMenuItemCheckbox", "./useMenuItemCheckbox"], function (require, exports, tslib_1, MenuItemCheckbox_types_1, MenuItemCheckbox_1, renderMenuItemCheckbox_1, useMenuItemCheckbox_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(MenuItemCheckbox_types_1, exports);
     tslib_1.__exportStar(MenuItemCheckbox_1, exports);
     tslib_1.__exportStar(renderMenuItemCheckbox_1, exports);
     tslib_1.__exportStar(useMenuItemCheckbox_1, exports);

package/lib-amd/components/MenuItemCheckbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/MenuItemCheckbox/index.ts"],"names":[],"mappings":";;;IACA,kDAAmC;IACnC,wDAAyC;IACzC,qDAAsC","sourcesContent":["export * from './MenuItemCheckbox.types';\nexport * from './MenuItemCheckbox';\nexport * from './renderMenuItemCheckbox';\nexport * from './useMenuItemCheckbox';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/MenuItemCheckbox/index.ts"],"names":[],"mappings":";;;IAAA,wDAAyC;IACzC,kDAAmC;IACnC,wDAAyC;IACzC,qDAAsC","sourcesContent":["export * from './MenuItemCheckbox.types';\nexport * from './MenuItemCheckbox';\nexport * from './renderMenuItemCheckbox';\nexport * from './useMenuItemCheckbox';\n"]}

package/lib-amd/components/MenuItemCheckbox/renderMenuItemCheckbox.d.ts

@@ -1,3 +1,3 @@
-import { MenuItemCheckboxState } from './MenuItemCheckbox.types';
+import type { MenuItemCheckboxState } from './MenuItemCheckbox.types';
 /** Function that renders the final JSX of the component  */
 export declare const renderMenuItemCheckbox: (state: MenuItemCheckboxState) => JSX.Element;

package/lib-amd/components/MenuItemCheckbox/renderMenuItemCheckbox.js

@@ -1,14 +1,16 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "./useMenuItemCheckbox"], function (require, exports, tslib_1, React, react_utilities_1, useMenuItemCheckbox_1) {
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../MenuItem/index"], function (require, exports, tslib_1, React, react_utilities_1, index_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderMenuItemCheckbox = void 0;
     /** Function that renders the final JSX of the component  */
-    exports.renderMenuItemCheckbox = function (state) {
-        var _a = react_utilities_1.getSlots(state, useMenuItemCheckbox_1.menuItemCheckboxShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
+    var renderMenuItemCheckbox = function (state) {
+        var _a = react_utilities_1.getSlots(state, index_1.menuItemSlots), slots = _a.slots, slotProps = _a.slotProps;
         return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
             React.createElement(slots.checkmark, tslib_1.__assign({}, slotProps.checkmark)),
             React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)),
             React.createElement(slots.content, tslib_1.__assign({}, slotProps.content)),
             React.createElement(slots.secondaryContent, tslib_1.__assign({}, slotProps.secondaryContent))));
     };
+    exports.renderMenuItemCheckbox = renderMenuItemCheckbox;
 });
 //# sourceMappingURL=renderMenuItemCheckbox.js.map

package/lib-amd/components/MenuItemCheckbox/renderMenuItemCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderMenuItemCheckbox.js","sourceRoot":"../src/","sources":["components/MenuItemCheckbox/renderMenuItemCheckbox.tsx"],"names":[],"mappings":";;;IAKA,4DAA4D;IAC/C,QAAA,sBAAsB,GAAG,UAAC,KAA4B;QAC3D,IAAA,4FAAsE,EAApE,gBAAK,EAAE,wBAA6D,CAAC;QAE7E,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,KAAK,CAAC,SAAS,uBAAK,SAAS,CAAC,SAAS,EAAI;YAC5C,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAClC,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO,EAAI;YACxC,oBAAC,KAAK,CAAC,gBAAgB,uBAAK,SAAS,CAAC,gBAAgB,EAAI,CAC/C,CACd,CAAC;IACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuItemCheckboxState } from './MenuItemCheckbox.types';\nimport { menuItemCheckboxShorthandProps } from './useMenuItemCheckbox';\n\n/** Function that renders the final JSX of the component  */\nexport const renderMenuItemCheckbox = (state: MenuItemCheckboxState) => {\n  const { slots, slotProps } = getSlots(state, menuItemCheckboxShorthandProps);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.checkmark {...slotProps.checkmark} />\n      <slots.icon {...slotProps.icon} />\n      <slots.content {...slotProps.content} />\n      <slots.secondaryContent {...slotProps.secondaryContent} />\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"file":"renderMenuItemCheckbox.js","sourceRoot":"../src/","sources":["components/MenuItemCheckbox/renderMenuItemCheckbox.tsx"],"names":[],"mappings":";;;;IAMA,4DAA4D;IACrD,IAAM,sBAAsB,GAAG,UAAC,KAA4B;QAC3D,IAAA,KAAuB,0BAAQ,CAAgB,KAAK,EAAE,qBAAa,CAAC,EAAlE,KAAK,WAAA,EAAE,SAAS,eAAkD,CAAC;QAE3E,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,KAAK,CAAC,SAAS,uBAAK,SAAS,CAAC,SAAS,EAAI;YAC5C,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAClC,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO,EAAI;YACxC,oBAAC,KAAK,CAAC,gBAAgB,uBAAK,SAAS,CAAC,gBAAgB,EAAI,CAC/C,CACd,CAAC;IACJ,CAAC,CAAC;IAXW,QAAA,sBAAsB,0BAWjC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { menuItemSlots } from '../MenuItem/index';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\nimport type { MenuItemSlots } from '../MenuItem/MenuItem.types';\n\n/** Function that renders the final JSX of the component  */\nexport const renderMenuItemCheckbox = (state: MenuItemCheckboxState) => {\n  const { slots, slotProps } = getSlots<MenuItemSlots>(state, menuItemSlots);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.checkmark {...slotProps.checkmark} />\n      <slots.icon {...slotProps.icon} />\n      <slots.content {...slotProps.content} />\n      <slots.secondaryContent {...slotProps.secondaryContent} />\n    </slots.root>\n  );\n};\n"]}

package/lib-amd/components/MenuItemCheckbox/useMenuItemCheckbox.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-import { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';
-/**
- * Consts listing which props are shorthand props.
- */
-export declare const menuItemCheckboxShorthandProps: readonly ("content" | "icon" | "submenuIndicator" | "secondaryContent" | "checkmark")[];
+import type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';
 /** Returns the props and state required to render the component */
-export declare const useMenuItemCheckbox: (props: MenuItemCheckboxProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuItemCheckboxProps | undefined) => MenuItemCheckboxState;
+export declare const useMenuItemCheckbox: (props: MenuItemCheckboxProps, ref: React.Ref<HTMLElement>) => MenuItemCheckboxState;

package/lib-amd/components/MenuItemCheckbox/useMenuItemCheckbox.js

@@ -1,37 +1,34 @@
-define(["require", "exports", "tslib", "react", "../../contexts/menuListContext", "../MenuItem/useMenuItem", "../../utils/DefaultIcons"], function (require, exports, tslib_1, React, menuListContext_1, useMenuItem_1, DefaultIcons_1) {
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-icons", "../../contexts/menuListContext", "../MenuItem/useMenuItem"], function (require, exports, tslib_1, React, react_utilities_1, react_icons_1, menuListContext_1, useMenuItem_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Consts listing which props are shorthand props.
-     */
-    exports.menuItemCheckboxShorthandProps = tslib_1.__spreadArrays(useMenuItem_1.menuItemShorthandProps);
+    exports.useMenuItemCheckbox = void 0;
     /** Returns the props and state required to render the component */
-    exports.useMenuItemCheckbox = function (props, ref, defaultProps) {
-        var state = useMenuItem_1.useMenuItem(props, ref, {
-            role: 'menuitemcheckbox',
-            checkmark: { as: 'span', children: React.createElement(DefaultIcons_1.AcceptIcon, null) },
-        });
+    var useMenuItemCheckbox = function (props, ref) {
+        var state = useMenuItem_1.useMenuItem(tslib_1.__assign(tslib_1.__assign({ role: 'menuitemcheckbox', persistOnClick: true }, props), { checkmark: react_utilities_1.resolveShorthand(props.checkmark, {
+                defaultProps: { children: React.createElement(react_icons_1.Checkmark16Filled, null) },
+                required: true,
+            }) }), ref);
         var toggleCheckbox = menuListContext_1.useMenuListContext(function (context) { return context.toggleCheckbox; });
-        var onClickOriginal = state.onClick;
+        var onClickOriginal = state.root.onClick;
         var checked = menuListContext_1.useMenuListContext(function (context) {
             var _a;
             var checkedItems = ((_a = context.checkedValues) === null || _a === void 0 ? void 0 : _a[state.name]) || [];
             return checkedItems.indexOf(state.value) !== -1;
         });
         state.checked = checked;
-        state['aria-checked'] = state.checked;
+        state.root['aria-checked'] = state.checked;
         // MenuItem state already transforms keyDown to click events
-        state.onClick = function (e) {
-            var _a, _b;
+        state.root.onClick = function (e) {
             if (state.disabled) {
                 e.preventDefault();
                 e.stopPropagation();
                 return;
             }
-            (_a = toggleCheckbox) === null || _a === void 0 ? void 0 : _a(e, state.name, state.value, state.checked);
-            (_b = onClickOriginal) === null || _b === void 0 ? void 0 : _b(e);
+            toggleCheckbox === null || toggleCheckbox === void 0 ? void 0 : toggleCheckbox(e, state.name, state.value, state.checked);
+            onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
         };
         return state;
     };
+    exports.useMenuItemCheckbox = useMenuItemCheckbox;
 });
 //# sourceMappingURL=useMenuItemCheckbox.js.map

package/lib-amd/components/MenuItemCheckbox/useMenuItemCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuItemCheckbox.js","sourceRoot":"../src/","sources":["components/MenuItemCheckbox/useMenuItemCheckbox.tsx"],"names":[],"mappings":";;;IAMA;;OAEG;IACU,QAAA,8BAA8B,GAAG,uBAAI,oCAAsB,CAAU,CAAC;IAEnF,mEAAmE;IACtD,QAAA,mBAAmB,GAAG,UACjC,KAA4B,EAC5B,GAA2B,EAC3B,YAAoC;QAEpC,IAAM,KAAK,GAAG,yBAAW,CAAC,KAAK,EAAE,GAAG,EAAE;YACpC,IAAI,EAAE,kBAAkB;YACxB,SAAS,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,oBAAC,yBAAU,OAAG,EAAE;SACpD,CAA0B,CAAC;QAE5B,IAAM,cAAc,GAAG,oCAAkB,CAAC,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,cAAc,EAAtB,CAAsB,CAAC,CAAC;QACrE,IAAA,+BAAwB,CAAW;QAC3C,IAAM,OAAO,GAAG,oCAAkB,CAAC,UAAA,OAAO;;YACxC,IAAM,YAAY,GAAG,OAAA,OAAO,CAAC,aAAa,0CAAG,KAAK,CAAC,IAAI,MAAK,EAAE,CAAC;YAC/D,OAAO,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAClD,CAAC,CAAC,CAAC;QAEH,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QACxB,KAAK,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC;QAEtC,4DAA4D;QAC5D,KAAK,CAAC,OAAO,GAAG,UAAA,CAAC;;YACf,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAClB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,OAAO;aACR;YAED,MAAA,cAAc,0CAAG,CAAC,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE;YAC5D,MAAA,eAAe,0CAAG,CAAC,EAAE;QACvB,CAAC,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';\nimport { useMenuListContext } from '../../contexts/menuListContext';\nimport { useMenuItem, menuItemShorthandProps } from '../MenuItem/useMenuItem';\nimport { AcceptIcon } from '../../utils/DefaultIcons';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const menuItemCheckboxShorthandProps = [...menuItemShorthandProps] as const;\n\n/** Returns the props and state required to render the component */\nexport const useMenuItemCheckbox = (\n  props: MenuItemCheckboxProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: MenuItemCheckboxProps,\n): MenuItemCheckboxState => {\n  const state = useMenuItem(props, ref, {\n    role: 'menuitemcheckbox',\n    checkmark: { as: 'span', children: <AcceptIcon /> },\n  }) as MenuItemCheckboxState;\n\n  const toggleCheckbox = useMenuListContext(context => context.toggleCheckbox);\n  const { onClick: onClickOriginal } = state;\n  const checked = useMenuListContext(context => {\n    const checkedItems = context.checkedValues?.[state.name] || [];\n    return checkedItems.indexOf(state.value) !== -1;\n  });\n\n  state.checked = checked;\n  state['aria-checked'] = state.checked;\n\n  // MenuItem state already transforms keyDown to click events\n  state.onClick = e => {\n    if (state.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    toggleCheckbox?.(e, state.name, state.value, state.checked);\n    onClickOriginal?.(e);\n  };\n\n  return state;\n};\n"]}
+{"version":3,"file":"useMenuItemCheckbox.js","sourceRoot":"../src/","sources":["components/MenuItemCheckbox/useMenuItemCheckbox.tsx"],"names":[],"mappings":";;;;IAOA,mEAAmE;IAC5D,IAAM,mBAAmB,GAAG,UACjC,KAA4B,EAC5B,GAA2B;QAE3B,IAAM,KAAK,GAAG,yBAAW,qCAErB,IAAI,EAAE,kBAAkB,EACxB,cAAc,EAAE,IAAI,IACjB,KAAK,KACR,SAAS,EAAE,kCAAgB,CAAC,KAAK,CAAC,SAAS,EAAE;gBAC3C,YAAY,EAAE,EAAE,QAAQ,EAAE,oBAAC,+BAAiB,OAAG,EAAE;gBACjD,QAAQ,EAAE,IAAI;aACf,CAAC,KAEJ,GAAG,CACqB,CAAC;QAE3B,IAAM,cAAc,GAAG,oCAAkB,CAAC,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,cAAc,EAAtB,CAAsB,CAAC,CAAC;QACrE,IAAS,eAAe,GAAK,KAAK,CAAC,IAAI,QAAf,CAAgB;QAChD,IAAM,OAAO,GAAG,oCAAkB,CAAC,UAAA,OAAO;;YACxC,IAAM,YAAY,GAAG,OAAA,OAAO,CAAC,aAAa,0CAAG,KAAK,CAAC,IAAI,MAAK,EAAE,CAAC;YAC/D,OAAO,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAClD,CAAC,CAAC,CAAC;QAEH,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QACxB,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC;QAE3C,4DAA4D;QAC5D,KAAK,CAAC,IAAI,CAAC,OAAO,GAAG,UAAA,CAAC;YACpB,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAClB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,OAAO;aACR;YAED,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,CAAC,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE;YAC5D,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,CAAC,EAAE;QACvB,CAAC,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAxCW,QAAA,mBAAmB,uBAwC9B","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext } from '../../contexts/menuListContext';\nimport { useMenuItem } from '../MenuItem/useMenuItem';\nimport type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\n/** Returns the props and state required to render the component */\nexport const useMenuItemCheckbox = (\n  props: MenuItemCheckboxProps,\n  ref: React.Ref<HTMLElement>,\n): MenuItemCheckboxState => {\n  const state = useMenuItem(\n    {\n      role: 'menuitemcheckbox',\n      persistOnClick: true,\n      ...props,\n      checkmark: resolveShorthand(props.checkmark, {\n        defaultProps: { children: <Checkmark16Filled /> },\n        required: true,\n      }),\n    },\n    ref,\n  ) as MenuItemCheckboxState;\n\n  const toggleCheckbox = useMenuListContext(context => context.toggleCheckbox);\n  const { onClick: onClickOriginal } = state.root;\n  const checked = useMenuListContext(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    toggleCheckbox?.(e, state.name, state.value, state.checked);\n    onClickOriginal?.(e);\n  };\n\n  return state;\n};\n"]}

package/lib-amd/components/MenuItemCheckbox/useMenuItemCheckboxStyles.d.ts

@@ -1,2 +1,2 @@
-import { MenuItemCheckboxState } from './MenuItemCheckbox.types';
+import type { MenuItemCheckboxState } from './MenuItemCheckbox.types';
 export declare const useMenuItemCheckBoxStyles: (state: MenuItemCheckboxState) => void;

package/lib-amd/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js

@@ -1,9 +1,11 @@
 define(["require", "exports", "../../selectable/index", "../MenuItem/useMenuItemStyles"], function (require, exports, index_1, useMenuItemStyles_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useMenuItemCheckBoxStyles = function (state) {
+    exports.useMenuItemCheckBoxStyles = void 0;
+    var useMenuItemCheckBoxStyles = function (state) {
         useMenuItemStyles_1.useMenuItemStyles(state);
         index_1.useCheckmarkStyles(state);
     };
+    exports.useMenuItemCheckBoxStyles = useMenuItemCheckBoxStyles;
 });
 //# sourceMappingURL=useMenuItemCheckboxStyles.js.map

package/lib-amd/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuItemCheckboxStyles.js","sourceRoot":"../src/","sources":["components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts"],"names":[],"mappings":";;;IAIa,QAAA,yBAAyB,GAAG,UAAC,KAA4B;QACpE,qCAAiB,CAAC,KAAK,CAAC,CAAC;QACzB,0BAAkB,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC","sourcesContent":["import { useCheckmarkStyles } from '../../selectable/index';\nimport { useMenuItemStyles } from '../MenuItem/useMenuItemStyles';\nimport { MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\nexport const useMenuItemCheckBoxStyles = (state: MenuItemCheckboxState) => {\n  useMenuItemStyles(state);\n  useCheckmarkStyles(state);\n};\n"]}
+{"version":3,"file":"useMenuItemCheckboxStyles.js","sourceRoot":"../src/","sources":["components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts"],"names":[],"mappings":";;;;IAIO,IAAM,yBAAyB,GAAG,UAAC,KAA4B;QACpE,qCAAiB,CAAC,KAAK,CAAC,CAAC;QACzB,0BAAkB,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;IAHW,QAAA,yBAAyB,6BAGpC","sourcesContent":["import { useCheckmarkStyles } from '../../selectable/index';\nimport { useMenuItemStyles } from '../MenuItem/useMenuItemStyles';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\nexport const useMenuItemCheckBoxStyles = (state: MenuItemCheckboxState) => {\n  useMenuItemStyles(state);\n  useCheckmarkStyles(state);\n};\n"]}

package/lib-amd/components/MenuItemRadio/MenuItemRadio.d.ts

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { MenuItemRadioProps } from './MenuItemRadio.types';
 /**
  * Define a styled MenuItemRadio, using the `useMenuItemRadio` hook.
- * {@docCategory MenuItemRadio}
  */
-export declare const MenuItemRadio: React.ForwardRefExoticComponent<MenuItemRadioProps & React.RefAttributes<HTMLElement>>;
+export declare const MenuItemRadio: React.ForwardRefExoticComponent<Pick<import("../MenuItemCheckbox").MenuItemCheckboxProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "icon" | "checkmark" | "submenuIndicator" | "content" | "secondaryContent" | "as" | "value" | "disabled" | "hasSubmenu" | "persistOnClick" | "name"> & React.RefAttributes<HTMLElement>>;

package/lib-amd/components/MenuItemRadio/MenuItemRadio.js

@@ -1,9 +1,9 @@
 define(["require", "exports", "react", "./useMenuItemRadio", "./renderMenuItemRadio", "./useMenuItemRadioStyles"], function (require, exports, React, useMenuItemRadio_1, renderMenuItemRadio_1, useMenuItemRadioStyles_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.MenuItemRadio = void 0;
     /**
      * Define a styled MenuItemRadio, using the `useMenuItemRadio` hook.
-     * {@docCategory MenuItemRadio}
      */
     exports.MenuItemRadio = React.forwardRef(function (props, ref) {
         var state = useMenuItemRadio_1.useMenuItemRadio(props, ref);

package/lib-amd/components/MenuItemRadio/MenuItemRadio.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemRadio.js","sourceRoot":"../src/","sources":["components/MenuItemRadio/MenuItemRadio.tsx"],"names":[],"mappings":";;;IAMA;;;OAGG;IACU,QAAA,aAAa,GAAG,KAAK,CAAC,UAAU,CAAkC,UAAC,KAAK,EAAE,GAAG;QACxF,IAAM,KAAK,GAAG,mCAAgB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC3C,+CAAsB,CAAC,KAAK,CAAC,CAAC;QAE9B,OAAO,yCAAmB,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import * as React from 'react';\nimport { useMenuItemRadio } from './useMenuItemRadio';\nimport { MenuItemRadioProps } from './MenuItemRadio.types';\nimport { renderMenuItemRadio } from './renderMenuItemRadio';\nimport { useMenuItemRadioStyles } from './useMenuItemRadioStyles';\n\n/**\n * Define a styled MenuItemRadio, using the `useMenuItemRadio` hook.\n * {@docCategory MenuItemRadio}\n */\nexport const MenuItemRadio = React.forwardRef<HTMLElement, MenuItemRadioProps>((props, ref) => {\n  const state = useMenuItemRadio(props, ref);\n  useMenuItemRadioStyles(state);\n\n  return renderMenuItemRadio(state);\n});\n\nMenuItemRadio.displayName = 'MenuItemRadio';\n"]}
+{"version":3,"file":"MenuItemRadio.js","sourceRoot":"../src/","sources":["components/MenuItemRadio/MenuItemRadio.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACU,QAAA,aAAa,GAAG,KAAK,CAAC,UAAU,CAAkC,UAAC,KAAK,EAAE,GAAG;QACxF,IAAM,KAAK,GAAG,mCAAgB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC3C,+CAAsB,CAAC,KAAK,CAAC,CAAC;QAE9B,OAAO,yCAAmB,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import * as React from 'react';\nimport { useMenuItemRadio } from './useMenuItemRadio';\nimport { renderMenuItemRadio } from './renderMenuItemRadio';\nimport { useMenuItemRadioStyles } from './useMenuItemRadioStyles';\nimport type { MenuItemRadioProps } from './MenuItemRadio.types';\n\n/**\n * Define a styled MenuItemRadio, using the `useMenuItemRadio` hook.\n */\nexport const MenuItemRadio = React.forwardRef<HTMLElement, MenuItemRadioProps>((props, ref) => {\n  const state = useMenuItemRadio(props, ref);\n  useMenuItemRadioStyles(state);\n\n  return renderMenuItemRadio(state);\n});\n\nMenuItemRadio.displayName = 'MenuItemRadio';\n"]}