@fluentui/react-menu 0.0.0-nightlyf1be0a972820211214.1 → 0.0.0-nightlyf3017f159620220222.1

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

@@ -3,41 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuItemStyles = exports.menuItemClassName = void 0;
+exports.useMenuItemStyles_unstable = exports.menuItemClassName = void 0;
 
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
 const index_1 = /*#__PURE__*/require("../../selectable/index");
 
 exports.menuItemClassName = 'fui-MenuItem';
 
-const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_1.__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"],
@@ -79,11 +69,15 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__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",
@@ -92,32 +86,35 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__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;}", ".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;}", ".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 */
 
 
-const useMenuItemStyles = state => {
+const useMenuItemStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(exports.menuItemClassName, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
-  state.content.className = react_make_styles_1.mergeClasses(styles.content, state.content.className);
+  state.root.className = react_1.mergeClasses(exports.menuItemClassName, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
+
+  if (state.content) {
+    state.content.className = react_1.mergeClasses(styles.content, state.content.className);
+  }
 
   if (state.secondaryContent) {
-    state.secondaryContent.className = react_make_styles_1.mergeClasses(!state.disabled && styles.secondaryContent, state.secondaryContent.className);
+    state.secondaryContent.className = react_1.mergeClasses(!state.disabled && styles.secondaryContent, state.secondaryContent.className);
   }
 
   if (state.icon) {
-    state.icon.className = react_make_styles_1.mergeClasses(styles.icon, state.icon.className);
+    state.icon.className = react_1.mergeClasses(styles.icon, state.icon.className);
   }
 
   if (state.submenuIndicator) {
-    state.submenuIndicator.className = react_make_styles_1.mergeClasses(styles.submenuIndicator, state.submenuIndicator.className);
+    state.submenuIndicator.className = react_1.mergeClasses(styles.submenuIndicator, state.submenuIndicator.className);
   }
 
-  index_1.useCheckmarkStyles(state);
+  index_1.useCheckmarkStyles_unstable(state);
 };
 
-exports.useMenuItemStyles = useMenuItemStyles;
+exports.useMenuItemStyles_unstable = useMenuItemStyles_unstable;
 //# sourceMappingURL=useMenuItemStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItem/useMenuItemStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAIa,OAAA,CAAA,iBAAA,GAAoB,cAApB;;AAEb,MAAM,SAAS,gBAAG,mBAAA,SAAA;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;AAAA;AAAA;AAAA;AAAA,EAAlB;AA4DA;;;AACO,MAAM,iBAAiB,GAAI,KAAD,IAAyB;AACxD,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CACrB,OAAA,CAAA,iBADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,MAAM,CAAC,cAHc,EAIrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJJ,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;AAOA,EAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,OAApB,EAA6B,KAAK,CAAC,OAAN,CAAc,SAA3C,CAA1B;;AACA,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,mBAAA,CAAA,YAAA,CACjC,CAAC,KAAK,CAAC,QAAP,IAAmB,MAAM,CAAC,gBADO,EAEjC,KAAK,CAAC,gBAAN,CAAuB,SAFU,CAAnC;AAID;;AAED,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,IAApB,EAA0B,KAAK,CAAC,IAAN,CAAW,SAArC,CAAvB;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,gBAApB,EAAsC,KAAK,CAAC,gBAAN,CAAuB,SAA7D,CAAnC;AACD;;AACD,EAAA,OAAA,CAAA,kBAAA,CAAmB,KAAnB;AACD,CAzBM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourceRoot":""}
+{"version":3,"sources":["components/MenuItem/useMenuItemStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAIa,OAAA,CAAA,iBAAA,GAAoB,cAApB;;AAEb,MAAM,SAAS,gBAAG,OAAA,SAAA;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;;;AACO,MAAM,0BAA0B,GAAI,KAAD,IAAyB;AACjE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,iBADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,MAAM,CAAC,cAHc,EAIrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJJ,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;;AAQA,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,OAApB,EAA6B,KAAK,CAAC,OAAN,CAAc,SAA3C,CAA1B;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,OAAA,CAAA,YAAA,CACjC,CAAC,KAAK,CAAC,QAAP,IAAmB,MAAM,CAAC,gBADO,EAEjC,KAAK,CAAC,gBAAN,CAAuB,SAFU,CAAnC;AAID;;AAED,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,IAApB,EAA0B,KAAK,CAAC,IAAN,CAAW,SAArC,CAAvB;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,gBAApB,EAAsC,KAAK,CAAC,gBAAN,CAAuB,SAA7D,CAAnC;AACD;;AACD,EAAA,OAAA,CAAA,2BAAA,CAA4B,KAA5B;AACD,CA7BM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","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-commonjs/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-commonjs/components/MenuItemCheckbox/MenuItemCheckbox.js

@@ -13,14 +13,14 @@ const renderMenuItemCheckbox_1 = /*#__PURE__*/require("./renderMenuItemCheckbox"
 
 const useMenuItemCheckboxStyles_1 = /*#__PURE__*/require("./useMenuItemCheckboxStyles");
 /**
- * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox` hook.
+ * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.
  */
 
 
 exports.MenuItemCheckbox = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useMenuItemCheckbox_1.useMenuItemCheckbox(props, ref);
-  useMenuItemCheckboxStyles_1.useMenuItemCheckboxStyles(state);
-  return renderMenuItemCheckbox_1.renderMenuItemCheckbox(state);
+  const state = useMenuItemCheckbox_1.useMenuItemCheckbox_unstable(props, ref);
+  useMenuItemCheckboxStyles_1.useMenuItemCheckboxStyles_unstable(state);
+  return renderMenuItemCheckbox_1.renderMenuItemCheckbox_unstable(state);
 });
 exports.MenuItemCheckbox.displayName = 'MenuItemCheckbox';
 //# sourceMappingURL=MenuItemCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItemCheckbox/MenuItemCheckbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AACA,MAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,gBAAA,gBAA+D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC1G,QAAM,KAAK,GAAG,qBAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;AACA,EAAA,2BAAA,CAAA,yBAAA,CAA0B,KAA1B;AAEA,SAAO,wBAAA,CAAA,sBAAA,CAAuB,KAAvB,CAAP;AACD,CAL2E,CAA/D;AAOb,OAAA,CAAA,gBAAA,CAAiB,WAAjB,GAA+B,kBAA/B","sourceRoot":""}
+{"version":3,"sources":["components/MenuItemCheckbox/MenuItemCheckbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AACA,MAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,gBAAA,gBAA+D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC1G,QAAM,KAAK,GAAG,qBAAA,CAAA,4BAAA,CAA6B,KAA7B,EAAoC,GAApC,CAAd;AACA,EAAA,2BAAA,CAAA,kCAAA,CAAmC,KAAnC;AAEA,SAAO,wBAAA,CAAA,+BAAA,CAAgC,KAAhC,CAAP;AACD,CAL2E,CAA/D;AAOb,OAAA,CAAA,gBAAA,CAAiB,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-commonjs/components/MenuItemCheckbox/MenuItemCheckbox.types.js.map

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

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

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

package/lib-commonjs/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-commonjs/components/MenuItemCheckbox/renderMenuItemCheckbox.js

@@ -3,28 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderMenuItemCheckbox = void 0;
+exports.renderMenuItemCheckbox_unstable = void 0;
 
 const React = /*#__PURE__*/require("react");
 
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-const index_1 = /*#__PURE__*/require("../MenuItem/index");
 /** Function that renders the final JSX of the component  */
 
 
-const renderMenuItemCheckbox = state => {
+const renderMenuItemCheckbox_unstable = state => {
   const {
     slots,
     slotProps
-  } = react_utilities_1.getSlots(state, index_1.menuItemSlots);
+  } = react_utilities_1.getSlots(state);
   return React.createElement(slots.root, { ...slotProps.root
-  }, React.createElement(slots.checkmark, { ...slotProps.checkmark
-  }), React.createElement(slots.icon, { ...slotProps.icon
-  }), React.createElement(slots.content, { ...slotProps.content
-  }), React.createElement(slots.secondaryContent, { ...slotProps.secondaryContent
+  }, slots.checkmark && React.createElement(slots.checkmark, { ...slotProps.checkmark
+  }), slots.icon && React.createElement(slots.icon, { ...slotProps.icon
+  }), slots.content && React.createElement(slots.content, { ...slotProps.content
+  }), slots.secondaryContent && React.createElement(slots.secondaryContent, { ...slotProps.secondaryContent
   }));
 };
 
-exports.renderMenuItemCheckbox = renderMenuItemCheckbox;
+exports.renderMenuItemCheckbox_unstable = renderMenuItemCheckbox_unstable;
 //# sourceMappingURL=renderMenuItemCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItemCheckbox/renderMenuItemCheckbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;;AACO,MAAM,sBAAsB,GAAI,KAAD,IAAiC;AACrE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,EAA+B,OAAA,CAAA,aAA/B,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAhB,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFF,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,CAHF,EAIE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,CAJF,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourceRoot":""}
+{"version":3,"sources":["components/MenuItemCheckbox/renderMenuItemCheckbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;;AACO,MAAM,+BAA+B,GAAI,KAAD,IAAiC;AAC9E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,SAAN,IAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAhB,CADtB,EAEG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFjB,EAGG,KAAK,CAAC,OAAN,IAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,CAHpB,EAIG,KAAK,CAAC,gBAAN,IAA0B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,CAJ7B,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","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-commonjs/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-commonjs/components/MenuItemCheckbox/useMenuItemCheckbox.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuItemCheckbox = void 0;
+exports.useMenuItemCheckbox_unstable = void 0;
 
 const React = /*#__PURE__*/require("react");
 
@@ -17,8 +17,8 @@ const useMenuItem_1 = /*#__PURE__*/require("../MenuItem/useMenuItem");
 /** Returns the props and state required to render the component */
 
 
-const useMenuItemCheckbox = (props, ref) => {
-  const state = useMenuItem_1.useMenuItem({
+const useMenuItemCheckbox_unstable = (props, ref) => {
+  const state = useMenuItem_1.useMenuItem_unstable({
     role: 'menuitemcheckbox',
     persistOnClick: true,
     ...props,
@@ -29,11 +29,11 @@ const useMenuItemCheckbox = (props, ref) => {
       required: true
     })
   }, ref);
-  const toggleCheckbox = menuListContext_1.useMenuListContext(context => context.toggleCheckbox);
+  const toggleCheckbox = menuListContext_1.useMenuListContext_unstable(context => context.toggleCheckbox);
   const {
     onClick: onClickOriginal
   } = state.root;
-  const checked = menuListContext_1.useMenuListContext(context => {
+  const checked = menuListContext_1.useMenuListContext_unstable(context => {
     var _a;
 
     const checkedItems = ((_a = context.checkedValues) === null || _a === void 0 ? void 0 : _a[state.name]) || [];
@@ -56,5 +56,5 @@ const useMenuItemCheckbox = (props, ref) => {
   return state;
 };
 
-exports.useMenuItemCheckbox = useMenuItemCheckbox;
+exports.useMenuItemCheckbox_unstable = useMenuItemCheckbox_unstable;
 //# sourceMappingURL=useMenuItemCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAGA;;;AACO,MAAM,mBAAmB,GAAG,CACjC,KADiC,EAEjC,GAFiC,KAGR;AACzB,QAAM,KAAK,GAAG,aAAA,CAAA,WAAA,CACZ;AACE,IAAA,IAAI,EAAE,kBADR;AAEE,IAAA,cAAc,EAAE,IAFlB;AAGE,OAAG,KAHL;AAIE,IAAA,SAAS,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,SAAvB,EAAkC;AAC3C,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,iBAAD,EAAkB,IAAlB;AAAZ,OAD6B;AAE3C,MAAA,QAAQ,EAAE;AAFiC,KAAlC;AAJb,GADY,EAUZ,GAVY,CAAd;AAaA,QAAM,cAAc,GAAG,iBAAA,CAAA,kBAAA,CAAmB,OAAO,IAAI,OAAO,CAAC,cAAtC,CAAvB;AACA,QAAM;AAAE,IAAA,OAAO,EAAE;AAAX,MAA+B,KAAK,CAAC,IAA3C;AACA,QAAM,OAAO,GAAG,iBAAA,CAAA,kBAAA,CAAmB,OAAO,IAAG;;;AAC3C,UAAM,YAAY,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAR,MAAqB,IAArB,IAAqB,EAAA,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAqB,EAAA,CAAG,KAAK,CAAC,IAAT,CAArB,KAAuC,EAA5D;AACA,WAAO,YAAY,CAAC,OAAb,CAAqB,KAAK,CAAC,KAA3B,MAAsC,CAAC,CAA9C;AACD,GAHe,CAAhB;AAKA,EAAA,KAAK,CAAC,OAAN,GAAgB,OAAhB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,cAAX,IAA6B,KAAK,CAAC,OAAnC,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;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourceRoot":""}
+{"version":3,"sources":["components/MenuItemCheckbox/useMenuItemCheckbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAGA;;;AACO,MAAM,4BAA4B,GAAG,CAC1C,KAD0C,EAE1C,GAF0C,KAGjB;AACzB,QAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CACZ;AACE,IAAA,IAAI,EAAE,kBADR;AAEE,IAAA,cAAc,EAAE,IAFlB;AAGE,OAAG,KAHL;AAIE,IAAA,SAAS,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,SAAvB,EAAkC;AAC3C,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,iBAAD,EAAkB,IAAlB;AAAZ,OAD6B;AAE3C,MAAA,QAAQ,EAAE;AAFiC,KAAlC;AAJb,GADY,EAUZ,GAVY,CAAd;AAaA,QAAM,cAAc,GAAG,iBAAA,CAAA,2BAAA,CAA4B,OAAO,IAAI,OAAO,CAAC,cAA/C,CAAvB;AACA,QAAM;AAAE,IAAA,OAAO,EAAE;AAAX,MAA+B,KAAK,CAAC,IAA3C;AACA,QAAM,OAAO,GAAG,iBAAA,CAAA,2BAAA,CAA4B,OAAO,IAAG;;;AACpD,UAAM,YAAY,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAR,MAAqB,IAArB,IAAqB,EAAA,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAqB,EAAA,CAAG,KAAK,CAAC,IAAT,CAArB,KAAuC,EAA5D;AACA,WAAO,YAAY,CAAC,OAAb,CAAqB,KAAK,CAAC,KAA3B,MAAsC,CAAC,CAA9C;AACD,GAHe,CAAhB;AAKA,EAAA,KAAK,CAAC,OAAN,GAAgB,OAAhB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,cAAX,IAA6B,KAAK,CAAC,OAAnC,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;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","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-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.d.ts

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

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuItemCheckboxStyles = exports.menuItemCheckboxClassName = void 0;
+exports.useMenuItemCheckboxStyles_unstable = exports.menuItemCheckboxClassName = void 0;
 
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const index_1 = /*#__PURE__*/require("../../selectable/index");
 
@@ -13,11 +13,11 @@ const useMenuItemStyles_1 = /*#__PURE__*/require("../MenuItem/useMenuItemStyles"
 
 exports.menuItemCheckboxClassName = 'fui-MenuItemCheckbox';
 
-const useMenuItemCheckboxStyles = state => {
-  state.root.className = react_make_styles_1.mergeClasses(exports.menuItemCheckboxClassName, state.root.className);
-  useMenuItemStyles_1.useMenuItemStyles(state);
-  index_1.useCheckmarkStyles(state);
+const useMenuItemCheckboxStyles_unstable = state => {
+  state.root.className = react_1.mergeClasses(exports.menuItemCheckboxClassName, state.root.className);
+  useMenuItemStyles_1.useMenuItemStyles_unstable(state);
+  index_1.useCheckmarkStyles_unstable(state);
 };
 
-exports.useMenuItemCheckboxStyles = useMenuItemCheckboxStyles;
+exports.useMenuItemCheckboxStyles_unstable = useMenuItemCheckboxStyles_unstable;
 //# sourceMappingURL=useMenuItemCheckboxStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AAGa,OAAA,CAAA,yBAAA,GAA4B,sBAA5B;;AAEN,MAAM,yBAAyB,GAAI,KAAD,IAAiC;AACxE,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,OAAA,CAAA,yBAAb,EAAwC,KAAK,CAAC,IAAN,CAAW,SAAnD,CAAvB;AAEA,EAAA,mBAAA,CAAA,iBAAA,CAAkB,KAAlB;AACA,EAAA,OAAA,CAAA,kBAAA,CAAmB,KAAnB;AACD,CALM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourceRoot":""}
+{"version":3,"sources":["components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AAGa,OAAA,CAAA,yBAAA,GAA4B,sBAA5B;;AAEN,MAAM,kCAAkC,GAAI,KAAD,IAAiC;AACjF,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,yBAAb,EAAwC,KAAK,CAAC,IAAN,CAAW,SAAnD,CAAvB;AAEA,EAAA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;AACA,EAAA,OAAA,CAAA,2BAAA,CAA4B,KAA5B;AACD,CALM;;AAAM,OAAA,CAAA,kCAAA,GAAkC,kCAAlC","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\nexport const menuItemCheckboxClassName = 'fui-MenuItemCheckbox';\n\nexport const useMenuItemCheckboxStyles_unstable = (state: MenuItemCheckboxState) => {\n  state.root.className = mergeClasses(menuItemCheckboxClassName, state.root.className);\n\n  useMenuItemStyles_unstable(state);\n  useCheckmarkStyles_unstable(state);\n};\n"],"sourceRoot":"../src/"}

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

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

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

@@ -13,14 +13,14 @@ const renderMenuItemRadio_1 = /*#__PURE__*/require("./renderMenuItemRadio");
 
 const useMenuItemRadioStyles_1 = /*#__PURE__*/require("./useMenuItemRadioStyles");
 /**
- * Define a styled MenuItemRadio, using the `useMenuItemRadio` hook.
+ * Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.
  */
 
 
 exports.MenuItemRadio = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useMenuItemRadio_1.useMenuItemRadio(props, ref);
-  useMenuItemRadioStyles_1.useMenuItemRadioStyles(state);
-  return renderMenuItemRadio_1.renderMenuItemRadio(state);
+  const state = useMenuItemRadio_1.useMenuItemRadio_unstable(props, ref);
+  useMenuItemRadioStyles_1.useMenuItemRadioStyles_unstable(state);
+  return renderMenuItemRadio_1.renderMenuItemRadio_unstable(state);
 });
 exports.MenuItemRadio.displayName = 'MenuItemRadio';
 //# sourceMappingURL=MenuItemRadio.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItemRadio/MenuItemRadio.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpG,QAAM,KAAK,GAAG,kBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB,GAAxB,CAAd;AACA,EAAA,wBAAA,CAAA,sBAAA,CAAuB,KAAvB;AAEA,SAAO,qBAAA,CAAA,mBAAA,CAAoB,KAApB,CAAP;AACD,CALqE,CAAzD;AAOb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourceRoot":""}
+{"version":3,"sources":["components/MenuItemRadio/MenuItemRadio.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpG,QAAM,KAAK,GAAG,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,EAAiC,GAAjC,CAAd;AACA,EAAA,wBAAA,CAAA,+BAAA,CAAgC,KAAhC;AAEA,SAAO,qBAAA,CAAA,4BAAA,CAA6B,KAA7B,CAAP;AACD,CALqE,CAAzD;AAOb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { useMenuItemRadio_unstable } from './useMenuItemRadio';\nimport { renderMenuItemRadio_unstable } from './renderMenuItemRadio';\nimport { useMenuItemRadioStyles_unstable } from './useMenuItemRadioStyles';\nimport type { MenuItemRadioProps } from './MenuItemRadio.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.\n */\nexport const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps> = React.forwardRef((props, ref) => {\n  const state = useMenuItemRadio_unstable(props, ref);\n  useMenuItemRadioStyles_unstable(state);\n\n  return renderMenuItemRadio_unstable(state);\n});\n\nMenuItemRadio.displayName = 'MenuItemRadio';\n"],"sourceRoot":"../src/"}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuItemRadio = void 0;
+exports.useMenuItemRadio_unstable = void 0;
 
 const React = /*#__PURE__*/require("react");
 
@@ -19,11 +19,11 @@ const useMenuItem_1 = /*#__PURE__*/require("../MenuItem/useMenuItem");
  */
 
 
-const useMenuItemRadio = (props, ref) => {
+const useMenuItemRadio_unstable = (props, ref) => {
   const radioProps = {
     role: 'menuitemradio'
   };
-  const state = useMenuItem_1.useMenuItem({ ...radioProps,
+  const state = useMenuItem_1.useMenuItem_unstable({ ...radioProps,
     ...props,
     checkmark: react_utilities_1.resolveShorthand(props.checkmark, {
       defaultProps: {
@@ -32,11 +32,11 @@ const useMenuItemRadio = (props, ref) => {
       required: true
     })
   }, ref);
-  const selectRadio = menuListContext_1.useMenuListContext(context => context.selectRadio);
+  const selectRadio = menuListContext_1.useMenuListContext_unstable(context => context.selectRadio);
   const {
     onClick: onClickOriginal
   } = state.root;
-  const checked = menuListContext_1.useMenuListContext(context => {
+  const checked = menuListContext_1.useMenuListContext_unstable(context => {
     var _a;
 
     const checkedItems = ((_a = context.checkedValues) === null || _a === void 0 ? void 0 : _a[state.name]) || [];
@@ -59,5 +59,5 @@ const useMenuItemRadio = (props, ref) => {
   return state;
 };
 
-exports.useMenuItemRadio = useMenuItemRadio;
+exports.useMenuItemRadio_unstable = useMenuItemRadio_unstable;
 //# sourceMappingURL=useMenuItemRadio.js.map

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

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

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

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

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

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

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

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

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

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

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

@@ -15,15 +15,15 @@ const useMenuListContextValues_1 = /*#__PURE__*/require("./useMenuListContextVal
 
 const useMenuListStyles_1 = /*#__PURE__*/require("./useMenuListStyles");
 /**
- * Define a styled MenuList, using the `useMenuList` hook.
+ * Define a styled MenuList, using the `useMenuList_unstable` hook.
  */
 
 
 exports.MenuList = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useMenuList_1.useMenuList(props, ref);
-  const contextValues = useMenuListContextValues_1.useMenuListContextValues(state);
-  useMenuListStyles_1.useMenuListStyles(state);
-  return renderMenuList_1.renderMenuList(state, contextValues);
+  const state = useMenuList_1.useMenuList_unstable(props, ref);
+  const contextValues = useMenuListContextValues_1.useMenuListContextValues_unstable(state);
+  useMenuListStyles_1.useMenuListStyles_unstable(state);
+  return renderMenuList_1.renderMenuList_unstable(state, contextValues);
 });
 exports.MenuList.displayName = 'MenuList';
 //# sourceMappingURL=MenuList.js.map