@fluentui/react-menu 9.0.0-nightly.b5b7401007.0 → 9.0.0-rc.3

package/lib/components/MenuItem/renderMenuItem.js

@@ -1,16 +1,20 @@
-import { __assign } from "tslib";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { menuItemSlots } from './useMenuItem';
 /**
  * Function that renders the final JSX of the component
  */
 
-export var renderMenuItem = function (state) {
-  var _a = getSlots(state, menuItemSlots),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.checkmark, __assign({}, slotProps.checkmark)), /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)), /*#__PURE__*/React.createElement(slots.content, __assign({}, slotProps.content)), /*#__PURE__*/React.createElement(slots.secondaryContent, __assign({}, slotProps.secondaryContent)), /*#__PURE__*/React.createElement(slots.submenuIndicator, __assign({}, slotProps.submenuIndicator)));
+export const renderMenuItem_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, slots.checkmark && /*#__PURE__*/React.createElement(slots.checkmark, { ...slotProps.checkmark
+  }), slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
+  }), slots.content && /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
+  }), slots.secondaryContent && /*#__PURE__*/React.createElement(slots.secondaryContent, { ...slotProps.secondaryContent
+  }), slots.submenuIndicator && /*#__PURE__*/React.createElement(slots.submenuIndicator, { ...slotProps.submenuIndicator
+  }));
 };
 //# sourceMappingURL=renderMenuItem.js.map

package/lib/components/MenuItem/renderMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItem/renderMenuItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,aAAT,QAA8B,eAA9B;AAGA;;AAEG;;AACH,OAAO,IAAM,cAAc,GAAG,UAAC,KAAD,EAAqB;AAC3C,MAAA,EAAA,GAAuB,QAAQ,CAAgB,KAAhB,EAAuB,aAAvB,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,SAAf,CAAhB,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,OAAf,CAAd,CAHF,eAIE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,CAJF,eAKE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,CALF,CADF;AASD,CAZM","sourceRoot":""}
+{"version":3,"sources":["components/MenuItem/renderMenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;AAC9D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAgB,KAAhB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,SAAN,iBAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAhB,CADtB,EAEG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFjB,EAGG,KAAK,CAAC,OAAN,iBAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,CAHpB,EAIG,KAAK,CAAC,gBAAN,iBAA0B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,CAJ7B,EAKG,KAAK,CAAC,gBAAN,iBAA0B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,CAL7B,CADF;AASD,CAZM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuItem_unstable = (state: MenuItemState) => {\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.submenuIndicator && <slots.submenuIndicator {...slotProps.submenuIndicator} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuItem/useCharacterSearch.js

@@ -1,11 +1,11 @@
-import { useMenuListContext } from '../../contexts/menuListContext';
-export var useCharacterSearch = function (state, ref) {
-  var setFocusByFirstCharacter = useMenuListContext(function (context) {
-    return context.setFocusByFirstCharacter;
-  });
-  var onKeyDownBase = state.root.onKeyDown;
+import { useMenuListContext_unstable } from '../../contexts/menuListContext';
+export const useCharacterSearch = (state, ref) => {
+  const setFocusByFirstCharacter = useMenuListContext_unstable(context => context.setFocusByFirstCharacter);
+  const {
+    onKeyDown: onKeyDownBase
+  } = state.root;
 
-  state.root.onKeyDown = function (e) {
+  state.root.onKeyDown = e => {
     var _a;
 
     if (onKeyDownBase) {

package/lib/components/MenuItem/useCharacterSearch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItem/useCharacterSearch.ts"],"names":[],"mappings":"AACA,SAAS,kBAAT,QAAmC,gCAAnC;AAGA,OAAO,IAAM,kBAAkB,GAAG,UAAC,KAAD,EAAuB,GAAvB,EAAwD;AACxF,MAAM,wBAAwB,GAAG,kBAAkB,CAAC,UAAA,OAAA,EAAO;AAAI,WAAA,OAAO,CAAP,wBAAA;AAAgC,GAA5C,CAAnD;AAEQ,MAAW,aAAa,GAAK,KAAK,CAAC,IAAN,CAAL,SAAxB;;AACR,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,UAAA,CAAA,EAAC;;;AACtB,QAAI,aAAJ,EAAmB;AACjB,MAAA,aAAa,CAAC,CAAD,CAAb;AACD;;AAED,QAAI,CAAA,CAAA,EAAA,GAAA,CAAC,CAAC,GAAF,MAAK,IAAL,IAAK,EAAA,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAK,EAAA,CAAE,MAAP,IAAgB,CAApB,EAAuB;AACrB;AACD;;AAED,QAAI,GAAG,CAAC,OAAR,EAAiB;AACf,MAAA,wBAAwB,KAAA,IAAxB,IAAA,wBAAwB,KAAA,KAAA,CAAxB,GAAwB,KAAA,CAAxB,GAAA,wBAAwB,CAAG,CAAH,EAAM,GAAG,CAAC,OAAV,CAAxB;AACD;AACF,GAZD;;AAcA,SAAO,KAAP;AACD,CAnBM","sourceRoot":""}
+{"version":3,"sources":["components/MenuItem/useCharacterSearch.ts"],"names":[],"mappings":"AACA,SAAS,2BAAT,QAA4C,gCAA5C;AAGA,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAA4D;AAC5F,QAAM,wBAAwB,GAAG,2BAA2B,CAAC,OAAO,IAAI,OAAO,CAAC,wBAApB,CAA5D;AAEA,QAAM;AAAE,IAAA,SAAS,EAAE;AAAb,MAA+B,KAAK,CAAC,IAA3C;;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,CAAC,IAAG;;;AACzB,QAAI,aAAJ,EAAmB;AACjB,MAAA,aAAa,CAAC,CAAD,CAAb;AACD;;AAED,QAAI,CAAA,CAAA,EAAA,GAAA,CAAC,CAAC,GAAF,MAAK,IAAL,IAAK,EAAA,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAK,EAAA,CAAE,MAAP,IAAgB,CAApB,EAAuB;AACrB;AACD;;AAED,QAAI,GAAG,CAAC,OAAR,EAAiB;AACf,MAAA,wBAAwB,KAAA,IAAxB,IAAA,wBAAwB,KAAA,KAAA,CAAxB,GAAwB,KAAA,CAAxB,GAAA,wBAAwB,CAAG,CAAH,EAAM,GAAG,CAAC,OAAV,CAAxB;AACD;AACF,GAZD;;AAcA,SAAO,KAAP;AACD,CAnBM","sourcesContent":["import * as React from 'react';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport type { MenuItemState } from '../../components/index';\n\nexport const useCharacterSearch = (state: MenuItemState, ref: React.RefObject<HTMLElement>) => {\n  const setFocusByFirstCharacter = useMenuListContext_unstable(context => context.setFocusByFirstCharacter);\n\n  const { onKeyDown: onKeyDownBase } = state.root;\n  state.root.onKeyDown = e => {\n    if (onKeyDownBase) {\n      onKeyDownBase(e);\n    }\n\n    if (e.key?.length > 1) {\n      return;\n    }\n\n    if (ref.current) {\n      setFocusByFirstCharacter?.(e, ref.current);\n    }\n  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,10 +1,6 @@
 import * as React from 'react';
-import type { MenuItemProps, MenuItemSlots, MenuItemState } from './MenuItem.types';
-/**
- * Consts listing which props are shorthand props.
- */
-export declare const menuItemSlots: Array<keyof MenuItemSlots>;
+import type { MenuItemProps, MenuItemState } from './MenuItem.types';
 /**
  * Returns the props and state required to render the component
  */
-export declare const useMenuItem: (props: MenuItemProps, ref: React.Ref<HTMLElement>) => MenuItemState;
+export declare const useMenuItem_unstable: (props: MenuItemProps, ref: React.Ref<HTMLElement>) => MenuItemState;

package/lib/components/MenuItem/useMenuItem.js

@@ -1,42 +1,32 @@
-import { __assign } from "tslib";
 import * as React from 'react';
 import { useEventCallback, shouldPreventDefaultOnKeyDown, resolveShorthand, useMergedRefs, getNativeElementProps } from '@fluentui/react-utilities';
 import { useFluent } from '@fluentui/react-shared-contexts';
 import { useCharacterSearch } from './useCharacterSearch';
-import { useMenuTriggerContext } from '../../contexts/menuTriggerContext';
-import { ChevronRight20Regular as ChevronRightIcon, ChevronLeft20Regular as ChevronLeftIcon } from '@fluentui/react-icons';
-import { useMenuListContext } from '../../contexts/menuListContext';
-import { useMenuContext } from '../../contexts/menuContext';
-/**
- * Consts listing which props are shorthand props.
- */
-
-export var menuItemSlots = ['root', 'icon', 'submenuIndicator', 'content', 'secondaryContent', 'checkmark'];
+import { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';
+import { ChevronRightRegular as ChevronRightIcon, ChevronLeftRegular as ChevronLeftIcon } from '@fluentui/react-icons';
+import { useMenuListContext_unstable } from '../../contexts/menuListContext';
+import { useMenuContext_unstable } from '../../contexts/menuContext';
 /**
  * Returns the props and state required to render the component
  */
 
-export var useMenuItem = function (props, ref) {
-  var hasSubmenu = useMenuTriggerContext();
-  var hasIcons = useMenuListContext(function (context) {
-    return context.hasIcons;
-  });
-  var hasCheckmarks = useMenuListContext(function (context) {
-    return context.hasCheckmarks;
-  });
-  var setOpen = useMenuContext(function (context) {
-    return context.setOpen;
-  });
-  var persistOnClickContext = useMenuContext(function (context) {
-    return context.persistOnItemClick;
-  });
-  var dismissedWithKeyboardRef = React.useRef(false);
-  var dir = useFluent().dir;
-  var innerRef = React.useRef(null);
+export const useMenuItem_unstable = (props, ref) => {
+  var _a;
 
-  var state = __assign(__assign({
-    hasSubmenu: hasSubmenu
-  }, props), {
+  const hasIcons = useMenuListContext_unstable(context => context.hasIcons);
+  const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);
+  const setOpen = useMenuContext_unstable(context => context.setOpen);
+  const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);
+  const dismissedWithKeyboardRef = React.useRef(false);
+  const isSubmenuTrigger = useMenuTriggerContext_unstable();
+  const hasSubmenu = (_a = props.hasSubmenu) !== null && _a !== void 0 ? _a : isSubmenuTrigger;
+  const {
+    dir
+  } = useFluent();
+  const innerRef = React.useRef(null);
+  const state = {
+    hasSubmenu,
+    ...props,
     components: {
       root: 'div',
       icon: 'span',
@@ -45,12 +35,13 @@ export var useMenuItem = function (props, ref) {
       content: 'span',
       secondaryContent: 'span'
     },
-    root: getNativeElementProps('div', __assign({
+    root: getNativeElementProps('div', {
       ref: useMergedRefs(ref, innerRef),
       role: 'menuitem',
       tabIndex: 0,
-      'aria-disabled': props.disabled
-    }, props)),
+      'aria-disabled': props.disabled,
+      ...props
+    }),
     icon: resolveShorthand(props.icon, {
       required: hasIcons
     }),
@@ -64,19 +55,19 @@ export var useMenuItem = function (props, ref) {
       }
     }),
     content: resolveShorthand(props.content, {
-      required: true,
+      required: !!props.children,
       defaultProps: {
         children: props.children
       }
     }),
     secondaryContent: resolveShorthand(props.secondaryContent)
-  });
-
-  var _a = state.root,
-      onClickOriginal = _a.onClick,
-      onKeyDownOriginal = _a.onKeyDown;
+  };
+  const {
+    onClick: onClickOriginal,
+    onKeyDown: onKeyDownOriginal
+  } = state.root;
 
-  state.root.onKeyDown = function (e) {
+  state.root.onKeyDown = e => {
     var _a;
 
     if (shouldPreventDefaultOnKeyDown(e)) {
@@ -94,14 +85,14 @@ export var useMenuItem = function (props, ref) {
     onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
   };
 
-  state.root.onClick = function (e) {
+  state.root.onClick = e => {
     if (state.disabled) {
       e.preventDefault();
       e.stopPropagation();
       return;
     }
 
-    var shouldPersist = persistOnClickContext; // prop wins over context;
+    let shouldPersist = persistOnClickContext; // prop wins over context;
 
     if (state.persistOnClick !== undefined && persistOnClickContext !== state.persistOnClick) {
       shouldPersist = state.persistOnClick;
@@ -119,8 +110,10 @@ export var useMenuItem = function (props, ref) {
     onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
   };
 
-  var onMouseEnterOriginal = state.root.onMouseEnter;
-  state.root.onMouseEnter = useEventCallback(function (e) {
+  const {
+    onMouseEnter: onMouseEnterOriginal
+  } = state.root;
+  state.root.onMouseEnter = useEventCallback(e => {
     var _a;
 
     (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItem/useMenuItem.tsx"],"names":[],"mappings":"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","sourceRoot":""}
+{"version":3,"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_unstable } from '../../contexts/menuTriggerContext';\nimport { ChevronRightRegular as ChevronRightIcon, ChevronLeftRegular as ChevronLeftIcon } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<HTMLElement>): MenuItemState => {\n  const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n  const dismissedWithKeyboardRef = React.useRef(false);\n\n  const isSubmenuTrigger = useMenuTriggerContext_unstable();\n  const hasSubmenu = props.hasSubmenu ?? isSubmenuTrigger;\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, {\n      required: !!props.children,\n      defaultProps: { children: props.children },\n    }),\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"],"sourceRoot":"../src/"}

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

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

package/lib/components/MenuItem/useMenuItemStyles.js

@@ -1,38 +1,32 @@
-import { mergeClasses, __styles } from '@fluentui/react-make-styles';
+import { mergeClasses, __styles, shorthands } from '@griffel/react';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+import { useCheckmarkStyles_unstable } from '../../selectable/index';
+export const menuItemClassName = 'fui-MenuItem';
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "focusIndicator": {
     "B486eqv": "f2hkw1w",
-    "Bnmjwt4": "flfsvnh",
-    "Jopkrh": ["f1781m5e", "flvaaa9"],
-    "hhrs2v": "f50u1b5",
-    "B7jbng7": ["flvaaa9", "f1781m5e"],
+    "B1bra5l": "fc85khu",
     "e8izhr": "f1pxpxw8",
     "in3gf6": "f1149fnl",
     "B1i23sz": "fd1orka",
     "ln9as": "fgtqheg",
     "Bfgg0yq": "fq7mjg8",
-    "B7231uf": "fmqgchs",
-    "Bxoolf0": ["f1lv6wi8", "famjx04"],
-    "fo1iai": "f1nbyjd2",
-    "Bh81ga8": ["famjx04", "f1lv6wi8"],
-    "qztvpn": "f5n18is",
-    "ge3ubn": ["f13az7yk", "f14kwzu1"],
-    "F41yt0": "fneogx5",
-    "Bxrdl85": ["f14kwzu1", "f13az7yk"],
+    "i16j1i": "fq9bj62",
+    "yxydaw": "fy07e8r",
     "B9sa02e": "f1ha6shg",
-    "hzsgvt": "f1f43d5r",
-    "Ba9tnbb": ["f1ib27sc", "f14s7j5v"],
-    "Fpkomr": "f13oqbgc",
-    "Bttdqvk": ["f14s7j5v", "f1ib27sc"],
+    "yaquy9": "f4ltwxu",
     "Bl8qd6i": "f1284xzw",
     "Byzgy54": "f14dru39",
     "mq8cyt": ["fvabyfg", "f12y1wz2"],
     "B1a67j7": ["f12y1wz2", "fvabyfg"]
   },
   "root": {
-    "Dimara": "ft85np5",
+    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
+    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
+    "B7oj6ja": ["f1jar5jt", "fyu767a"],
+    "Btl43ni": ["fyu767a", "f1jar5jt"],
     "qhf8xq": "f10pi13n",
     "sj55zd": "f19n0e5",
     "De3pzq": "fxugw4r",
@@ -43,7 +37,8 @@ var useStyles = /*#__PURE__*/__styles({
     "Bt984gj": "f122n59",
     "Be2twd7": "fkhj508",
     "Bceei9c": "f1k6fduh",
-    "rmohyg": "f4xv25i",
+    "i8kkvl": "f1q8lukm",
+    "Belr9w4": "f1ma2n7n",
     "Jwef8y": "f1knas48",
     "Bi91k9c": "fnwyq0v",
     "famaaq": "f1xqy1su"
@@ -63,11 +58,15 @@ var useStyles = /*#__PURE__*/__styles({
   },
   "icon": {
     "a9b677": "f64fuq3",
-    "Bqenvij": "fjamq6b"
+    "Bqenvij": "fjamq6b",
+    "Be2twd7": "fe5j1ua",
+    "Bg96gwp": "fez10in"
   },
   "submenuIndicator": {
     "a9b677": "f64fuq3",
-    "Bqenvij": "fjamq6b"
+    "Bqenvij": "fjamq6b",
+    "Be2twd7": "fe5j1ua",
+    "Bg96gwp": "fez10in"
   },
   "disabled": {
     "sj55zd": "f1s2aq7o",
@@ -76,17 +75,20 @@ var useStyles = /*#__PURE__*/__styles({
   }
 }, {
   "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
-  "d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .f1pxpxw8:focus:after{content:\"\";}", "[data-keyboard-nav] .f1149fnl:focus:after{position:absolute;}", "[data-keyboard-nav] .fd1orka:focus:after{pointer-events:none;}", "[data-keyboard-nav] .fgtqheg:focus:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fq7mjg8:focus:after{z-index:1;}", "[data-keyboard-nav] .fmqgchs:focus:after{border-top-style:solid;}", "[data-keyboard-nav] .f1lv6wi8:focus:after{border-right-style:solid;}", "[data-keyboard-nav] .famjx04:focus:after{border-left-style:solid;}", "[data-keyboard-nav] .f1nbyjd2:focus:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f5n18is:focus:after{border-top-width:2px;}", "[data-keyboard-nav] .f13az7yk:focus:after{border-right-width:2px;}", "[data-keyboard-nav] .f14kwzu1:focus:after{border-left-width:2px;}", "[data-keyboard-nav] .fneogx5:focus:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1ha6shg:focus:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1f43d5r:focus:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1ib27sc:focus:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f14s7j5v:focus:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f13oqbgc:focus:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1284xzw:focus:after{top:-2px;}", "[data-keyboard-nav] .f14dru39:focus:after{bottom:-2px;}", "[data-keyboard-nav] .fvabyfg:focus:after{left:-2px;}", "[data-keyboard-nav] .f12y1wz2:focus:after{right:-2px;}", ".ft85np5{border-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".f1d2rq10{height:32px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1k6fduh{cursor:pointer;}", ".f4xv25i{gap:4px;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}", ".f3rmtva{background-color:transparent;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
+  "d": ["[data-keyboard-nav] .fc85khu:focus{border-color:transparent;}", "[data-keyboard-nav] .f1pxpxw8:focus:after{content:\"\";}", "[data-keyboard-nav] .f1149fnl:focus:after{position:absolute;}", "[data-keyboard-nav] .fd1orka:focus:after{pointer-events:none;}", "[data-keyboard-nav] .fgtqheg:focus:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fq7mjg8:focus:after{z-index:1;}", "[data-keyboard-nav] .fq9bj62:focus:after{border-style:solid;}", "[data-keyboard-nav] .fy07e8r:focus:after{border-width:2px;}", "[data-keyboard-nav] .f1ha6shg:focus:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f4ltwxu:focus:after{border-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1284xzw:focus:after{top:-2px;}", "[data-keyboard-nav] .f14dru39:focus:after{bottom:-2px;}", "[data-keyboard-nav] .fvabyfg:focus:after{left:-2px;}", "[data-keyboard-nav] .f12y1wz2:focus:after{right:-2px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".f1d2rq10{height:32px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1k6fduh{cursor:pointer;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}", ".f3rmtva{background-color:transparent;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fe5j1ua{font-size:20px;}", ".fez10in{line-height:0;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
   "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1jp5ecu:hover{color:var(--colorNeutralForeground3Hover);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}"],
   "f": [".fc1cou1:focus{color:var(--colorNeutralForeground3Hover);}", ".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"]
 });
 /** Applies style classnames to slots */
 
 
-export var useMenuItemStyles = function (state) {
-  var styles = useStyles();
-  state.root.className = mergeClasses(styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
-  state.content.className = mergeClasses(styles.content, state.content.className);
+export const useMenuItemStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(menuItemClassName, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
+
+  if (state.content) {
+    state.content.className = mergeClasses(styles.content, state.content.className);
+  }
 
   if (state.secondaryContent) {
     state.secondaryContent.className = mergeClasses(!state.disabled && styles.secondaryContent, state.secondaryContent.className);
@@ -99,5 +101,7 @@ export var useMenuItemStyles = function (state) {
   if (state.submenuIndicator) {
     state.submenuIndicator.className = mergeClasses(styles.submenuIndicator, state.submenuIndicator.className);
   }
+
+  useCheckmarkStyles_unstable(state);
 };
 //# sourceMappingURL=useMenuItemStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItem/useMenuItemStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;AACA,SAAS,uBAAT,QAAwC,yBAAxC;;AAGA,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AA4DA;;;AACA,OAAO,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAAqB;AACpD,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,MAAM,CAAC,IAD0B,EAEjC,MAAM,CAAC,cAF0B,EAGjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAHQ,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;AAMA,EAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,MAAM,CAAC,OAAR,EAAiB,KAAK,CAAC,OAAN,CAAc,SAA/B,CAAtC;;AACA,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,CAAC,KAAK,CAAC,QAAP,IAAmB,MAAM,CAAC,gBADmB,EAE7C,KAAK,CAAC,gBAAN,CAAuB,SAFsB,CAA/C;AAID;;AAED,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,IAAN,CAAW,SAAzB,CAAnC;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAAC,MAAM,CAAC,gBAAR,EAA0B,KAAK,CAAC,gBAAN,CAAuB,SAAjD,CAA/C;AACD;AACF,CAvBM","sourceRoot":""}
+{"version":3,"sources":["components/MenuItem/useMenuItemStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,YAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,2BAAT,QAA4C,wBAA5C;AAIA,OAAO,MAAM,iBAAiB,GAAG,cAA1B;;AAEP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAgEA;;;AACA,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAyB;AACjE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,iBADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,MAAM,CAAC,cAH0B,EAIjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJQ,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;;AAQA,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,MAAM,CAAC,OAAR,EAAiB,KAAK,CAAC,OAAN,CAAc,SAA/B,CAAtC;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,CAAC,KAAK,CAAC,QAAP,IAAmB,MAAM,CAAC,gBADmB,EAE7C,KAAK,CAAC,gBAAN,CAAuB,SAFsB,CAA/C;AAID;;AAED,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,IAAN,CAAW,SAAzB,CAAnC;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAAC,MAAM,CAAC,gBAAR,EAA0B,KAAK,CAAC,gBAAN,CAAuB,SAAjD,CAA/C;AACD;;AACD,EAAA,2BAA2B,CAAC,KAAD,CAA3B;AACD,CA7BM","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemState } from './MenuItem.types';\n\nexport const menuItemClassName = 'fui-MenuItem';\n\nconst useStyles = makeStyles({\n  focusIndicator: createFocusOutlineStyle(),\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    position: 'relative',\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: '10px',\n    paddingLeft: '10px',\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    ...shorthands.gap('4px'),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      color: tokens.colorNeutralForeground2Hover,\n    },\n\n    userSelect: 'none',\n  },\n  content: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1,\n  },\n  secondaryContent: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n    ':focus': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n  icon: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n  },\n  submenuIndicator: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':hover': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':focus': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    menuItemClassName,\n    styles.root,\n    styles.focusIndicator,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.content) {\n    state.content.className = mergeClasses(styles.content, state.content.className);\n  }\n\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  useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"],"sourceRoot":"../src/"}

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

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

package/lib/components/MenuItemCheckbox/MenuItemCheckbox.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useMenuItemCheckbox } from './useMenuItemCheckbox';
-import { renderMenuItemCheckbox } from './renderMenuItemCheckbox';
-import { useMenuItemCheckBoxStyles } from './useMenuItemCheckboxStyles';
+import { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox';
+import { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox';
+import { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles';
 /**
- * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox` hook.
+ * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.
  */
 
-export var MenuItemCheckbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useMenuItemCheckbox(props, ref);
-  useMenuItemCheckBoxStyles(state);
-  return renderMenuItemCheckbox(state);
+export const MenuItemCheckbox = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useMenuItemCheckbox_unstable(props, ref);
+  useMenuItemCheckboxStyles_unstable(state);
+  return renderMenuItemCheckbox_unstable(state);
 });
 MenuItemCheckbox.displayName = 'MenuItemCheckbox';
 //# sourceMappingURL=MenuItemCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItemCheckbox/MenuItemCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,mBAAT,QAAoC,uBAApC;AACA,SAAS,sBAAT,QAAuC,0BAAvC;AACA,SAAS,yBAAT,QAA0C,6BAA1C;AAIA;;AAEG;;AACH,OAAO,IAAM,gBAAgB,gBAA+C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AACtG,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,EAAQ,GAAR,CAAjC;AACA,EAAA,yBAAyB,CAAC,KAAD,CAAzB;AAEA,SAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CAL2E,CAArE;AAOP,gBAAgB,CAAC,WAAjB,GAA+B,kBAA/B","sourceRoot":""}
+{"version":3,"sources":["components/MenuItemCheckbox/MenuItemCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AACA,SAAS,kCAAT,QAAmD,6BAAnD;AAIA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC1G,QAAM,KAAK,GAAG,4BAA4B,CAAC,KAAD,EAAQ,GAAR,CAA1C;AACA,EAAA,kCAAkC,CAAC,KAAD,CAAlC;AAEA,SAAO,+BAA+B,CAAC,KAAD,CAAtC;AACD,CAL2E,CAArE;AAOP,gBAAgB,CAAC,WAAjB,GAA+B,kBAA/B","sourcesContent":["import * as React from 'react';\nimport { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox';\nimport { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox';\nimport { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles';\nimport type { MenuItemCheckboxProps } from './MenuItemCheckbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.\n */\nexport const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps> = React.forwardRef((props, ref) => {\n  const state = useMenuItemCheckbox_unstable(props, ref);\n  useMenuItemCheckboxStyles_unstable(state);\n\n  return renderMenuItemCheckbox_unstable(state);\n});\n\nMenuItemCheckbox.displayName = 'MenuItemCheckbox';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItemCheckbox.types.js","sourceRoot":"","sources":["../../../src/components/MenuItemCheckbox/MenuItemCheckbox.types.ts"],"names":[],"mappings":""}
+{"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/components/MenuItemCheckbox/index.d.ts

@@ -2,3 +2,4 @@ export * from './MenuItemCheckbox.types';
 export * from './MenuItemCheckbox';
 export * from './renderMenuItemCheckbox';
 export * from './useMenuItemCheckbox';
+export * from './useMenuItemCheckboxStyles';

package/lib/components/MenuItemCheckbox/index.js

@@ -2,4 +2,5 @@ export * from './MenuItemCheckbox.types';
 export * from './MenuItemCheckbox';
 export * from './renderMenuItemCheckbox';
 export * from './useMenuItemCheckbox';
+export * from './useMenuItemCheckboxStyles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuItemCheckbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/MenuItemCheckbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './MenuItemCheckbox.types';\nexport * from './MenuItemCheckbox';\nexport * from './renderMenuItemCheckbox';\nexport * from './useMenuItemCheckbox';\nexport * from './useMenuItemCheckboxStyles';\n"]}

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

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

package/lib/components/MenuItemCheckbox/renderMenuItemCheckbox.js

@@ -1,14 +1,17 @@
-import { __assign } from "tslib";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { menuItemSlots } from '../MenuItem/index';
 /** Function that renders the final JSX of the component  */
 
-export var renderMenuItemCheckbox = function (state) {
-  var _a = getSlots(state, menuItemSlots),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.checkmark, __assign({}, slotProps.checkmark)), /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)), /*#__PURE__*/React.createElement(slots.content, __assign({}, slotProps.content)), /*#__PURE__*/React.createElement(slots.secondaryContent, __assign({}, slotProps.secondaryContent)));
+export const renderMenuItemCheckbox_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, slots.checkmark && /*#__PURE__*/React.createElement(slots.checkmark, { ...slotProps.checkmark
+  }), slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
+  }), slots.content && /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
+  }), slots.secondaryContent && /*#__PURE__*/React.createElement(slots.secondaryContent, { ...slotProps.secondaryContent
+  }));
 };
 //# sourceMappingURL=renderMenuItemCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItemCheckbox/renderMenuItemCheckbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,aAAT,QAA8B,mBAA9B;AAIA;;AACA,OAAO,IAAM,sBAAsB,GAAG,UAAC,KAAD,EAA6B;AAC3D,MAAA,EAAA,GAAuB,QAAQ,CAAgB,KAAhB,EAAuB,aAAvB,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,SAAf,CAAhB,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,OAAf,CAAd,CAHF,eAIE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,CAJF,CADF;AAQD,CAXM","sourceRoot":""}
+{"version":3,"sources":["components/MenuItemCheckbox/renderMenuItemCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAIA;;AACA,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAAiC;AAC9E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAgB,KAAhB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,SAAN,iBAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAhB,CADtB,EAEG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFjB,EAGG,KAAK,CAAC,OAAN,iBAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,CAHpB,EAIG,KAAK,CAAC,gBAAN,iBAA0B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,CAJ7B,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\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_unstable = (state: MenuItemCheckboxState) => {\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/components/MenuItemCheckbox/useMenuItemCheckbox.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 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>) => MenuItemCheckboxState;
+export declare const useMenuItemCheckbox_unstable: (props: MenuItemCheckboxProps, ref: React.Ref<HTMLElement>) => MenuItemCheckboxState;

package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js

@@ -1,37 +1,36 @@
-import { __assign } from "tslib";
 import * as React from 'react';
 import { resolveShorthand } from '@fluentui/react-utilities';
 import { Checkmark16Filled } from '@fluentui/react-icons';
-import { useMenuListContext } from '../../contexts/menuListContext';
-import { useMenuItem } from '../MenuItem/useMenuItem';
+import { useMenuListContext_unstable } from '../../contexts/menuListContext';
+import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
 /** Returns the props and state required to render the component */
 
-export var useMenuItemCheckbox = function (props, ref) {
-  var state = useMenuItem(__assign(__assign({
+export const useMenuItemCheckbox_unstable = (props, ref) => {
+  const state = useMenuItem_unstable({
     role: 'menuitemcheckbox',
-    persistOnClick: true
-  }, props), {
+    persistOnClick: true,
+    ...props,
     checkmark: resolveShorthand(props.checkmark, {
       defaultProps: {
         children: /*#__PURE__*/React.createElement(Checkmark16Filled, null)
       },
       required: true
     })
-  }), ref);
-  var toggleCheckbox = useMenuListContext(function (context) {
-    return context.toggleCheckbox;
-  });
-  var onClickOriginal = state.root.onClick;
-  var checked = useMenuListContext(function (context) {
+  }, ref);
+  const toggleCheckbox = useMenuListContext_unstable(context => context.toggleCheckbox);
+  const {
+    onClick: onClickOriginal
+  } = state.root;
+  const checked = useMenuListContext_unstable(context => {
     var _a;
 
-    var checkedItems = ((_a = context.checkedValues) === null || _a === void 0 ? void 0 : _a[state.name]) || [];
+    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 = function (e) {
+  state.root.onClick = e => {
     if (state.disabled) {
       e.preventDefault();
       e.stopPropagation();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,iBAAT,QAAkC,uBAAlC;AACA,SAAS,kBAAT,QAAmC,gCAAnC;AACA,SAAS,WAAT,QAA4B,yBAA5B;AAGA;;AACA,OAAO,IAAM,mBAAmB,GAAG,UACjC,KADiC,EAEjC,GAFiC,EAEN;AAE3B,MAAM,KAAK,GAAG,WAAW,CAAA,QAAA,CAAA,QAAA,CAAA;AAErB,IAAA,IAAI,EAAE,kBAFe;AAGrB,IAAA,cAAc,EAAE;AAHK,GAAA,EAIlB,KAJkB,CAAA,EAIb;AACR,IAAA,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB;AAC3C,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB;AAAZ,OAD6B;AAE3C,MAAA,QAAQ,EAAE;AAFiC,KAAlB;AADnB,GAJa,CAAA,EAUvB,GAVuB,CAAzB;AAaA,MAAM,cAAc,GAAG,kBAAkB,CAAC,UAAA,OAAA,EAAO;AAAI,WAAA,OAAO,CAAP,cAAA;AAAsB,GAAlC,CAAzC;AACQ,MAAS,eAAe,GAAK,KAAK,CAAC,IAAN,CAAL,OAAxB;AACR,MAAM,OAAO,GAAG,kBAAkB,CAAC,UAAA,OAAA,EAAO;;;AACxC,QAAM,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,GAHiC,CAAlC;AAKA,EAAA,KAAK,CAAC,OAAN,GAAgB,OAAhB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,cAAX,IAA6B,KAAK,CAAC,OAAnC,CAvB2B,CAyB3B;;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,UAAA,CAAA,EAAC;AACpB,QAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,MAAA,CAAC,CAAC,cAAF;AACA,MAAA,CAAC,CAAC,eAAF;AACA;AACD;;AAED,IAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAd;AACA,IAAA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;AACD,GATD;;AAWA,SAAO,KAAP;AACD,CAxCM","sourceRoot":""}
+{"version":3,"sources":["components/MenuItemCheckbox/useMenuItemCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,iBAAT,QAAkC,uBAAlC;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AACA,SAAS,oBAAT,QAAqC,yBAArC;AAGA;;AACA,OAAO,MAAM,4BAA4B,GAAG,CAC1C,KAD0C,EAE1C,GAF0C,KAGjB;AACzB,QAAM,KAAK,GAAG,oBAAoB,CAChC;AACE,IAAA,IAAI,EAAE,kBADR;AAEE,IAAA,cAAc,EAAE,IAFlB;AAGE,OAAG,KAHL;AAIE,IAAA,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB;AAC3C,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB;AAAZ,OAD6B;AAE3C,MAAA,QAAQ,EAAE;AAFiC,KAAlB;AAJ7B,GADgC,EAUhC,GAVgC,CAAlC;AAaA,QAAM,cAAc,GAAG,2BAA2B,CAAC,OAAO,IAAI,OAAO,CAAC,cAApB,CAAlD;AACA,QAAM;AAAE,IAAA,OAAO,EAAE;AAAX,MAA+B,KAAK,CAAC,IAA3C;AACA,QAAM,OAAO,GAAG,2BAA2B,CAAC,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,GAH0C,CAA3C;AAKA,EAAA,KAAK,CAAC,OAAN,GAAgB,OAAhB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,cAAX,IAA6B,KAAK,CAAC,OAAnC,CAtByB,CAwBzB;;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,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAd;AACA,IAAA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;AACD,GATD;;AAWA,SAAO,KAAP;AACD,CAxCM","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 { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\n/** Returns the props and state required to render the component */\nexport const useMenuItemCheckbox_unstable = (\n  props: MenuItemCheckboxProps,\n  ref: React.Ref<HTMLElement>,\n): MenuItemCheckboxState => {\n  const state = useMenuItem_unstable(\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_unstable(context => context.toggleCheckbox);\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    toggleCheckbox?.(e, state.name, state.value, state.checked);\n    onClickOriginal?.(e);\n  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

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