@fluentui/react-menu 9.0.0-rc.5 → 9.0.0-rc.8

package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuDivider/useMenuDividerStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGa,OAAA,CAAA,oBAAA,GAAuB,iBAAvB;;AAEb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AASO,MAAM,6BAA6B,GAAI,KAAD,IAA4B;AACvE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAb,EAAmC,MAAM,CAAC,IAA1C,EAAgD,KAAK,CAAC,IAAN,CAAW,SAA3D,CAAvB;AAEA,SAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuDividerState } from './MenuDivider.types';\n\nexport const menuDividerClassName = 'fui-MenuDivider';\n\nconst useStyles = makeStyles({\n  root: {\n    height: '1px',\n    ...shorthands.margin('4px', '-5px', '4px', '-5px'),\n    width: 'auto',\n    backgroundColor: tokens.colorNeutralStroke2,\n  },\n});\n\nexport const useMenuDividerStyles_unstable = (state: MenuDividerState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuDividerClassName, styles.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuDivider/useMenuDividerStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,oBAAA,GAAuB,iBAAvB;AACA,OAAA,CAAA,qBAAA,GAA0D;AACrE,EAAA,IAAI,EAAE;AAD+D,CAA1D;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AASO,MAAM,6BAA6B,GAAI,KAAD,IAA4B;AACvE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,IAAnC,EAAyC,MAAM,CAAC,IAAhD,EAAsD,KAAK,CAAC,IAAN,CAAW,SAAjE,CAAvB;AAEA,SAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `menuDividerClassNames.root` instead.\n */\nexport const menuDividerClassName = 'fui-MenuDivider';\nexport const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {\n  root: 'fui-MenuDivider',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    height: '1px',\n    ...shorthands.margin('4px', '-5px', '4px', '-5px'),\n    width: 'auto',\n    backgroundColor: tokens.colorNeutralStroke2,\n  },\n});\n\nexport const useMenuDividerStyles_unstable = (state: MenuDividerState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.js

@@ -3,14 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuGroupStyles_unstable = exports.menuGroupClassName = void 0;
+exports.useMenuGroupStyles_unstable = exports.menuGroupClassNames = exports.menuGroupClassName = void 0;
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
+/**
+ * @deprecated Use `menuGroupClassNames.root` instead.
+ */
+
 
 exports.menuGroupClassName = 'fui-MenuGroup';
+exports.menuGroupClassNames = {
+  root: 'fui-MenuGroup'
+};
 
 const useMenuGroupStyles_unstable = state => {
-  state.root.className = react_1.mergeClasses(exports.menuGroupClassName, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.menuGroupClassNames.root, state.root.className);
   return state;
 };
 

package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuGroup/useMenuGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,kBAAA,GAAqB,eAArB;;AAEN,MAAM,2BAA2B,GAAI,KAAD,IAA0C;AACnF,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAb,EAAiC,KAAK,CAAC,IAAN,CAAW,SAA5C,CAAvB;AAEA,SAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { MenuGroupState } from './MenuGroup.types';\n\nexport const menuGroupClassName = 'fui-MenuGroup';\n\nexport const useMenuGroupStyles_unstable = (state: MenuGroupState): MenuGroupState => {\n  state.root.className = mergeClasses(menuGroupClassName, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuGroup/useMenuGroupStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,kBAAA,GAAqB,eAArB;AACA,OAAA,CAAA,mBAAA,GAAsD;AACjE,EAAA,IAAI,EAAE;AAD2D,CAAtD;;AAIN,MAAM,2BAA2B,GAAI,KAAD,IAA0C;AACnF,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,mBAAA,CAAoB,IAAjC,EAAuC,KAAK,CAAC,IAAN,CAAW,SAAlD,CAAvB;AAEA,SAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\n\n/**\n * @deprecated Use `menuGroupClassNames.root` instead.\n */\nexport const menuGroupClassName = 'fui-MenuGroup';\nexport const menuGroupClassNames: SlotClassNames<MenuGroupSlots> = {\n  root: 'fui-MenuGroup',\n};\n\nexport const useMenuGroupStyles_unstable = (state: MenuGroupState): MenuGroupState => {\n  state.root.className = mergeClasses(menuGroupClassNames.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.js

@@ -3,13 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuGroupHeaderStyles_unstable = exports.menuGroupHeaderClassName = void 0;
+exports.useMenuGroupHeaderStyles_unstable = exports.menuGroupHeaderClassNames = exports.menuGroupHeaderClassName = void 0;
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+/**
+ * @deprecated Use `menuGroupHeaderClassNames.root` instead.
+ */
+
 
 exports.menuGroupHeaderClassName = 'fui-MenuGroupHeader';
+exports.menuGroupHeaderClassNames = {
+  root: 'fui-MenuGroupHeader'
+};
 
 const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
@@ -28,7 +35,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 
 const useMenuGroupHeaderStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_1.mergeClasses(exports.menuGroupHeaderClassName, styles.root, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.menuGroupHeaderClassNames.root, styles.root, state.root.className);
   return state;
 };
 

package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuGroupHeader/useMenuGroupHeaderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGa,OAAA,CAAA,wBAAA,GAA2B,qBAA3B;;AAEb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAaO,MAAM,iCAAiC,GAAI,KAAD,IAAgC;AAC/E,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,wBAAb,EAAuC,MAAM,CAAC,IAA9C,EAAoD,KAAK,CAAC,IAAN,CAAW,SAA/D,CAAvB;AAEA,SAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuGroupHeaderState } from './MenuGroupHeader.types';\n\nexport const menuGroupHeaderClassName = 'fui-MenuGroupHeader';\n\nconst useStyles = makeStyles({\n  root: {\n    fontSize: tokens.fontSizeBase200,\n    color: tokens.colorNeutralForeground3,\n    paddingLeft: '12px',\n    paddingRight: '12px',\n    fontWeight: tokens.fontWeightSemibold,\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuGroupHeaderClassName, styles.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuGroupHeader/useMenuGroupHeaderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,wBAAA,GAA2B,qBAA3B;AACA,OAAA,CAAA,yBAAA,GAAkE;AAC7E,EAAA,IAAI,EAAE;AADuE,CAAlE;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAaO,MAAM,iCAAiC,GAAI,KAAD,IAAgC;AAC/E,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,yBAAA,CAA0B,IAAvC,EAA6C,MAAM,CAAC,IAApD,EAA0D,KAAK,CAAC,IAAN,CAAW,SAArE,CAAvB;AAEA,SAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `menuGroupHeaderClassNames.root` instead.\n */\nexport const menuGroupHeaderClassName = 'fui-MenuGroupHeader';\nexport const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {\n  root: 'fui-MenuGroupHeader',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    fontSize: tokens.fontSizeBase200,\n    color: tokens.colorNeutralForeground3,\n    paddingLeft: '12px',\n    paddingRight: '12px',\n    fontWeight: tokens.fontWeightSemibold,\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuItemStyles_unstable = exports.menuItemClassName = void 0;
+exports.useMenuItemStyles_unstable = exports.menuItemClassNames = exports.menuItemClassName = void 0;
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
 
@@ -12,22 +12,48 @@ 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");
+/**
+ * @deprecated Use `menuItemClassNames.root` instead.
+ */
+
 
 exports.menuItemClassName = 'fui-MenuItem';
+exports.menuItemClassNames = {
+  root: 'fui-MenuItem',
+  icon: 'fui-MenuItem__icon',
+  checkmark: 'fui-MenuItem__checkmark',
+  submenuIndicator: 'fui-MenuItem__submenuIndicator',
+  content: 'fui-MenuItem__content',
+  secondaryContent: 'fui-MenuItem__secondaryContent'
+};
 
 const useStyles = /*#__PURE__*/react_1.__styles({
   "focusIndicator": {
     "B486eqv": "f2hkw1w",
-    "B1bra5l": "fc85khu",
+    "Bnmjwt4": "flfsvnh",
+    "Jopkrh": ["f1781m5e", "flvaaa9"],
+    "hhrs2v": "f50u1b5",
+    "B7jbng7": ["flvaaa9", "f1781m5e"],
     "e8izhr": "f1pxpxw8",
     "in3gf6": "f1149fnl",
     "B1i23sz": "fd1orka",
-    "ln9as": "fgtqheg",
     "Bfgg0yq": "fq7mjg8",
-    "i16j1i": "fq9bj62",
-    "yxydaw": "fy07e8r",
-    "B9sa02e": "f1ha6shg",
-    "yaquy9": "f4ltwxu",
+    "B7231uf": "fmqgchs",
+    "Bxoolf0": ["f1lv6wi8", "famjx04"],
+    "fo1iai": "f1nbyjd2",
+    "Bh81ga8": ["famjx04", "f1lv6wi8"],
+    "qztvpn": "f5n18is",
+    "ge3ubn": ["f13az7yk", "f14kwzu1"],
+    "F41yt0": "fneogx5",
+    "Bxrdl85": ["f14kwzu1", "f13az7yk"],
+    "Bb63s14": ["f1f0b0sl", "flsib9d"],
+    "Ikxprv": ["flsib9d", "f1f0b0sl"],
+    "Bhxvgo6": ["fbewl49", "fs55jlu"],
+    "J01dyq": ["fs55jlu", "fbewl49"],
+    "hzsgvt": "f1f43d5r",
+    "Ba9tnbb": ["f1ib27sc", "f14s7j5v"],
+    "Fpkomr": "f13oqbgc",
+    "Bttdqvk": ["f14s7j5v", "f1ib27sc"],
     "Bl8qd6i": "f1284xzw",
     "Byzgy54": "f14dru39",
     "mq8cyt": ["fvabyfg", "f12y1wz2"],
@@ -71,13 +97,19 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "a9b677": "f64fuq3",
     "Bqenvij": "fjamq6b",
     "Be2twd7": "fe5j1ua",
-    "Bg96gwp": "fez10in"
+    "Bg96gwp": "fez10in",
+    "Bt984gj": "f122n59",
+    "mc9l5x": "ftuwxu6",
+    "Brf1p80": "f4d9j23"
   },
   "submenuIndicator": {
     "a9b677": "f64fuq3",
     "Bqenvij": "fjamq6b",
     "Be2twd7": "fe5j1ua",
-    "Bg96gwp": "fez10in"
+    "Bg96gwp": "fez10in",
+    "Bt984gj": "f122n59",
+    "mc9l5x": "ftuwxu6",
+    "Brf1p80": "f4d9j23"
   },
   "disabled": {
     "sj55zd": "f1s2aq7o",
@@ -86,7 +118,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
   }
 }, {
   "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
-  "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);}"],
+  "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] .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] .f1f0b0sl:focus:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .flsib9d:focus:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fbewl49:focus:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fs55jlu:focus:after{border-top-left-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;}", ".fe5j1ua{font-size:20px;}", ".fez10in{line-height:0;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".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);}"]
 });
@@ -95,22 +127,26 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 
 const useMenuItemStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_1.mergeClasses(exports.menuItemClassName, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.menuItemClassNames.root, 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);
+    state.content.className = react_1.mergeClasses(exports.menuItemClassNames.content, styles.content, state.content.className);
+  }
+
+  if (state.checkmark) {
+    state.checkmark.className = react_1.mergeClasses(exports.menuItemClassNames.checkmark, state.checkmark.className);
   }
 
   if (state.secondaryContent) {
-    state.secondaryContent.className = react_1.mergeClasses(!state.disabled && styles.secondaryContent, state.secondaryContent.className);
+    state.secondaryContent.className = react_1.mergeClasses(exports.menuItemClassNames.secondaryContent, !state.disabled && styles.secondaryContent, state.secondaryContent.className);
   }
 
   if (state.icon) {
-    state.icon.className = react_1.mergeClasses(styles.icon, state.icon.className);
+    state.icon.className = react_1.mergeClasses(exports.menuItemClassNames.icon, styles.icon, state.icon.className);
   }
 
   if (state.submenuIndicator) {
-    state.submenuIndicator.className = react_1.mergeClasses(styles.submenuIndicator, state.submenuIndicator.className);
+    state.submenuIndicator.className = react_1.mergeClasses(exports.menuItemClassNames.submenuIndicator, styles.submenuIndicator, state.submenuIndicator.className);
   }
 
   index_1.useCheckmarkStyles_unstable(state);

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

@@ -1 +1 @@
-{"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/"}
+{"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;AAKA;;AAEG;;;AACU,OAAA,CAAA,iBAAA,GAAoB,cAApB;AACA,OAAA,CAAA,kBAAA,GAAoD;AAC/D,EAAA,IAAI,EAAE,cADyD;AAE/D,EAAA,IAAI,EAAE,oBAFyD;AAG/D,EAAA,SAAS,EAAE,yBAHoD;AAI/D,EAAA,gBAAgB,EAAE,gCAJ6C;AAK/D,EAAA,OAAO,EAAE,uBALsD;AAM/D,EAAA,gBAAgB,EAAE;AAN6C,CAApD;;AASb,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAsEA;;;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,kBAAA,CAAmB,IADE,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,OAAA,CAAA,kBAAA,CAAmB,OAAhC,EAAyC,MAAM,CAAC,OAAhD,EAAyD,KAAK,CAAC,OAAN,CAAc,SAAvE,CAA1B;AACD;;AAED,MAAI,KAAK,CAAC,SAAV,EAAqB;AACnB,IAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAA,CAAmB,SAAhC,EAA2C,KAAK,CAAC,SAAN,CAAgB,SAA3D,CAA5B;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,OAAA,CAAA,YAAA,CACjC,OAAA,CAAA,kBAAA,CAAmB,gBADc,EAEjC,CAAC,KAAK,CAAC,QAAP,IAAmB,MAAM,CAAC,gBAFO,EAGjC,KAAK,CAAC,gBAAN,CAAuB,SAHU,CAAnC;AAKD;;AAED,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAA,CAAmB,IAAhC,EAAsC,MAAM,CAAC,IAA7C,EAAmD,KAAK,CAAC,IAAN,CAAW,SAA9D,CAAvB;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,OAAA,CAAA,YAAA,CACjC,OAAA,CAAA,kBAAA,CAAmB,gBADc,EAEjC,MAAM,CAAC,gBAF0B,EAGjC,KAAK,CAAC,gBAAN,CAAuB,SAHU,CAAnC;AAKD;;AACD,EAAA,OAAA,CAAA,2BAAA,CAA4B,KAA5B;AACD,CAtCM;;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 { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `menuItemClassNames.root` instead.\n */\nexport const menuItemClassName = 'fui-MenuItem';\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n  root: 'fui-MenuItem',\n  icon: 'fui-MenuItem__icon',\n  checkmark: 'fui-MenuItem__checkmark',\n  submenuIndicator: 'fui-MenuItem__submenuIndicator',\n  content: 'fui-MenuItem__content',\n  secondaryContent: 'fui-MenuItem__secondaryContent',\n};\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    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  submenuIndicator: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\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    menuItemClassNames.root,\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(menuItemClassNames.content, styles.content, state.content.className);\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemClassNames.secondaryContent,\n      !state.disabled && styles.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n  }\n\n  if (state.submenuIndicator) {\n    state.submenuIndicator.className = mergeClasses(\n      menuItemClassNames.submenuIndicator,\n      styles.submenuIndicator,\n      state.submenuIndicator.className,\n    );\n  }\n  useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"],"sourceRoot":"../src/"}

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

@@ -3,18 +3,46 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuItemCheckboxStyles_unstable = exports.menuItemCheckboxClassName = void 0;
+exports.useMenuItemCheckboxStyles_unstable = exports.menuItemCheckboxClassNames = exports.menuItemCheckboxClassName = void 0;
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const index_1 = /*#__PURE__*/require("../../selectable/index");
 
 const useMenuItemStyles_1 = /*#__PURE__*/require("../MenuItem/useMenuItemStyles");
+/**
+ * @deprecated Use `menuItemCheckboxClassNames.root` instead.
+ */
+
 
 exports.menuItemCheckboxClassName = 'fui-MenuItemCheckbox';
+exports.menuItemCheckboxClassNames = {
+  root: 'fui-MenuItemCheckbox',
+  icon: 'fui-MenuItemCheckbox__icon',
+  checkmark: 'fui-MenuItemCheckbox__checkmark',
+  content: 'fui-MenuItemCheckbox__content',
+  secondaryContent: 'fui-MenuItemCheckbox__secondaryContent'
+};
 
 const useMenuItemCheckboxStyles_unstable = state => {
-  state.root.className = react_1.mergeClasses(exports.menuItemCheckboxClassName, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.menuItemCheckboxClassNames.root, state.root.className);
+
+  if (state.content) {
+    state.content.className = react_1.mergeClasses(exports.menuItemCheckboxClassNames.content, state.content.className);
+  }
+
+  if (state.secondaryContent) {
+    state.secondaryContent.className = react_1.mergeClasses(exports.menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);
+  }
+
+  if (state.icon) {
+    state.icon.className = react_1.mergeClasses(exports.menuItemCheckboxClassNames.icon, state.icon.className);
+  }
+
+  if (state.checkmark) {
+    state.checkmark.className = react_1.mergeClasses(exports.menuItemCheckboxClassNames.checkmark, state.checkmark.className);
+  }
+
   useMenuItemStyles_1.useMenuItemStyles_unstable(state);
   index_1.useCheckmarkStyles_unstable(state);
 };

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

@@ -1 +1 @@
-{"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/"}
+{"version":3,"sources":["components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAEA,MAAA,mBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,yBAAA,GAA4B,sBAA5B;AACA,OAAA,CAAA,0BAAA,GAAsF;AACjG,EAAA,IAAI,EAAE,sBAD2F;AAEjG,EAAA,IAAI,EAAE,4BAF2F;AAGjG,EAAA,SAAS,EAAE,iCAHsF;AAIjG,EAAA,OAAO,EAAE,+BAJwF;AAKjG,EAAA,gBAAgB,EAAE;AAL+E,CAAtF;;AAQN,MAAM,kCAAkC,GAAI,KAAD,IAAiC;AACjF,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,0BAAA,CAA2B,IAAxC,EAA8C,KAAK,CAAC,IAAN,CAAW,SAAzD,CAAvB;;AAEA,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,0BAAA,CAA2B,OAAxC,EAAiD,KAAK,CAAC,OAAN,CAAc,SAA/D,CAA1B;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,OAAA,CAAA,YAAA,CACjC,OAAA,CAAA,0BAAA,CAA2B,gBADM,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,OAAA,CAAA,0BAAA,CAA2B,IAAxC,EAA8C,KAAK,CAAC,IAAN,CAAW,SAAzD,CAAvB;AACD;;AAED,MAAI,KAAK,CAAC,SAAV,EAAqB;AACnB,IAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,0BAAA,CAA2B,SAAxC,EAAmD,KAAK,CAAC,SAAN,CAAgB,SAAnE,CAA5B;AACD;;AAED,EAAA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;AACA,EAAA,OAAA,CAAA,2BAAA,CAA4B,KAA5B;AACD,CAxBM;;AAAM,OAAA,CAAA,kCAAA,GAAkC,kCAAlC","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { MenuItemSlots } from '../index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\n/**\n * @deprecated Use `menuItemCheckboxClassNames.root` instead.\n */\nexport const menuItemCheckboxClassName = 'fui-MenuItemCheckbox';\nexport const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n  root: 'fui-MenuItemCheckbox',\n  icon: 'fui-MenuItemCheckbox__icon',\n  checkmark: 'fui-MenuItemCheckbox__checkmark',\n  content: 'fui-MenuItemCheckbox__content',\n  secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',\n};\n\nexport const useMenuItemCheckboxStyles_unstable = (state: MenuItemCheckboxState) => {\n  state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemCheckboxClassNames.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n  }\n\n  useMenuItemStyles_unstable(state);\n  useCheckmarkStyles_unstable(state);\n};\n"],"sourceRoot":"../src/"}

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

@@ -3,18 +3,46 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuItemRadioStyles_unstable = exports.menuItemRadioClassName = void 0;
+exports.useMenuItemRadioStyles_unstable = exports.menuItemRadioClassNames = exports.menuItemRadioClassName = void 0;
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const index_1 = /*#__PURE__*/require("../../selectable/index");
 
 const useMenuItemStyles_1 = /*#__PURE__*/require("../MenuItem/useMenuItemStyles");
+/**
+ * @deprecated Use `menuItemRadioClassNames.root` instead.
+ */
+
 
 exports.menuItemRadioClassName = 'fui-MenuItemRadio';
+exports.menuItemRadioClassNames = {
+  root: 'fui-MenuItemRadio',
+  icon: 'fui-MenuItemRadio__icon',
+  checkmark: 'fui-MenuItemRadio__checkmark',
+  content: 'fui-MenuItemRadio__content',
+  secondaryContent: 'fui-MenuItemRadio__secondaryContent'
+};
 
 const useMenuItemRadioStyles_unstable = state => {
-  state.root.className = react_1.mergeClasses(exports.menuItemRadioClassName, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.menuItemRadioClassNames.root, state.root.className);
+
+  if (state.content) {
+    state.content.className = react_1.mergeClasses(exports.menuItemRadioClassNames.content, state.content.className);
+  }
+
+  if (state.secondaryContent) {
+    state.secondaryContent.className = react_1.mergeClasses(exports.menuItemRadioClassNames.secondaryContent, state.secondaryContent.className);
+  }
+
+  if (state.icon) {
+    state.icon.className = react_1.mergeClasses(exports.menuItemRadioClassNames.icon, state.icon.className);
+  }
+
+  if (state.checkmark) {
+    state.checkmark.className = react_1.mergeClasses(exports.menuItemRadioClassNames.checkmark, state.checkmark.className);
+  }
+
   useMenuItemStyles_1.useMenuItemStyles_unstable(state);
   index_1.useCheckmarkStyles_unstable(state);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuItemRadio/useMenuItemRadioStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AAGa,OAAA,CAAA,sBAAA,GAAyB,mBAAzB;;AAEN,MAAM,+BAA+B,GAAI,KAAD,IAA8B;AAC3E,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,sBAAb,EAAqC,KAAK,CAAC,IAAN,CAAW,SAAhD,CAAvB;AAEA,EAAA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;AACA,EAAA,OAAA,CAAA,2BAAA,CAA4B,KAA5B;AACD,CALM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\n\nexport const menuItemRadioClassName = 'fui-MenuItemRadio';\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState) => {\n  state.root.className = mergeClasses(menuItemRadioClassName, state.root.className);\n\n  useMenuItemStyles_unstable(state);\n  useCheckmarkStyles_unstable(state);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuItemRadio/useMenuItemRadioStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAEA,MAAA,mBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,sBAAA,GAAyB,mBAAzB;AACA,OAAA,CAAA,uBAAA,GAAmF;AAC9F,EAAA,IAAI,EAAE,mBADwF;AAE9F,EAAA,IAAI,EAAE,yBAFwF;AAG9F,EAAA,SAAS,EAAE,8BAHmF;AAI9F,EAAA,OAAO,EAAE,4BAJqF;AAK9F,EAAA,gBAAgB,EAAE;AAL4E,CAAnF;;AAQN,MAAM,+BAA+B,GAAI,KAAD,IAA8B;AAC3E,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,uBAAA,CAAwB,IAArC,EAA2C,KAAK,CAAC,IAAN,CAAW,SAAtD,CAAvB;;AAEA,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,uBAAA,CAAwB,OAArC,EAA8C,KAAK,CAAC,OAAN,CAAc,SAA5D,CAA1B;AACD;;AAED,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,OAAA,CAAA,YAAA,CACjC,OAAA,CAAA,uBAAA,CAAwB,gBADS,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,OAAA,CAAA,uBAAA,CAAwB,IAArC,EAA2C,KAAK,CAAC,IAAN,CAAW,SAAtD,CAAvB;AACD;;AAED,MAAI,KAAK,CAAC,SAAV,EAAqB;AACnB,IAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,uBAAA,CAAwB,SAArC,EAAgD,KAAK,CAAC,SAAN,CAAgB,SAAhE,CAA5B;AACD;;AAED,EAAA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;AACA,EAAA,OAAA,CAAA,2BAAA,CAA4B,KAA5B;AACD,CAxBM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { MenuItemSlots } from '../index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\n\n/**\n * @deprecated Use `menuItemRadioClassNames.root` instead.\n */\nexport const menuItemRadioClassName = 'fui-MenuItemRadio';\nexport const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n  root: 'fui-MenuItemRadio',\n  icon: 'fui-MenuItemRadio__icon',\n  checkmark: 'fui-MenuItemRadio__checkmark',\n  content: 'fui-MenuItemRadio__content',\n  secondaryContent: 'fui-MenuItemRadio__secondaryContent',\n};\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState) => {\n  state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemRadioClassNames.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);\n  }\n\n  useMenuItemStyles_unstable(state);\n  useCheckmarkStyles_unstable(state);\n};\n"],"sourceRoot":"../src/"}

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

@@ -3,11 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuListStyles_unstable = exports.menuListClassName = void 0;
+exports.useMenuListStyles_unstable = exports.menuListClassNames = exports.menuListClassName = void 0;
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
+/**
+ * @deprecated Use `menuListClassNames.root` instead.
+ */
+
 
 exports.menuListClassName = 'fui-MenuList';
+exports.menuListClassNames = {
+  root: 'fui-MenuList'
+};
 
 const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
@@ -26,7 +33,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 
 const useMenuListStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_1.mergeClasses(exports.menuListClassName, styles.root, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.menuListClassNames.root, styles.root, state.root.className);
   return state;
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuList/useMenuListStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,iBAAA,GAAoB,cAApB;;AAEb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAQA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAAwC;AAChF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,iBAAb,EAAgC,MAAM,CAAC,IAAvC,EAA6C,KAAK,CAAC,IAAN,CAAW,SAAxD,CAAvB;AACA,SAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport type { MenuListState } from './MenuList.types';\n\nexport const menuListClassName = 'fui-MenuList';\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.gap('2px'),\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuListClassName, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuList/useMenuListStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,iBAAA,GAAoB,cAApB;AACA,OAAA,CAAA,kBAAA,GAAoD;AAC/D,EAAA,IAAI,EAAE;AADyD,CAApD;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAQA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAAwC;AAChF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAA,CAAmB,IAAhC,EAAsC,MAAM,CAAC,IAA7C,EAAmD,KAAK,CAAC,IAAN,CAAW,SAA9D,CAAvB;AACA,SAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport type { MenuListSlots, MenuListState } from './MenuList.types';\n\n/**\n * @deprecated Use `menuListClassNames.root` instead.\n */\nexport const menuListClassName = 'fui-MenuList';\nexport const menuListClassNames: SlotClassNames<MenuListSlots> = {\n  root: 'fui-MenuList',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.gap('2px'),\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.js

@@ -3,13 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuPopoverStyles_unstable = exports.menuPopoverClassName = void 0;
+exports.useMenuPopoverStyles_unstable = exports.menuPopoverClassNames = exports.menuPopoverClassName = void 0;
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+/**
+ * @deprecated Use `menuPopoverClassNames.root` instead.
+ */
+
 
 exports.menuPopoverClassName = 'fui-MenuPopover';
+exports.menuPopoverClassNames = {
+  root: 'fui-MenuPopover'
+};
 
 const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
@@ -49,7 +56,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 
 const useMenuPopoverStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_1.mergeClasses(exports.menuPopoverClassName, styles.root, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.menuPopoverClassNames.root, styles.root, state.root.className);
   return state;
 };
 

package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuPopover/useMenuPopoverStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGa,OAAA,CAAA,oBAAA,GAAuB,iBAAvB;;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,EAAlB;AAaA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAb,EAAmC,MAAM,CAAC,IAA1C,EAAgD,KAAK,CAAC,IAAN,CAAW,SAA3D,CAAvB;AACA,SAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuPopoverState } from './MenuPopover.types';\n\nexport const menuPopoverClassName = 'fui-MenuPopover';\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    backgroundColor: tokens.colorNeutralBackground1,\n    minWidth: '128px',\n    maxWidth: '300px',\n    width: 'max-content',\n    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.padding('4px'),\n    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuPopoverClassName, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuPopover/useMenuPopoverStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,oBAAA,GAAuB,iBAAvB;AACA,OAAA,CAAA,qBAAA,GAA0D;AACrE,EAAA,IAAI,EAAE;AAD+D,CAA1D;;AAIb,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,EAAlB;AAaA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,IAAnC,EAAyC,MAAM,CAAC,IAAhD,EAAsD,KAAK,CAAC,IAAN,CAAW,SAAjE,CAAvB;AACA,SAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `menuPopoverClassNames.root` instead.\n */\nexport const menuPopoverClassName = 'fui-MenuPopover';\nexport const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {\n  root: 'fui-MenuPopover',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    backgroundColor: tokens.colorNeutralBackground1,\n    minWidth: '128px',\n    maxWidth: '300px',\n    width: 'max-content',\n    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.padding('4px'),\n    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.js

@@ -3,15 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuSplitGroupStyles_unstable = exports.menuSplitGroupClassName = void 0;
+exports.useMenuSplitGroupStyles_unstable = exports.menuSplitGroupClassNames = exports.menuSplitGroupClassName = void 0;
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
 const useMenuItemStyles_1 = /*#__PURE__*/require("../MenuItem/useMenuItemStyles");
+/**
+ * @deprecated Use `menuSplitGroupClassNames.root` instead.
+ */
+
 
 exports.menuSplitGroupClassName = 'fui-MenuSplitGroup';
+exports.menuSplitGroupClassNames = {
+  root: 'fui-MenuSplitGroup'
+};
 /**
  * Styles for the root slot
  */
@@ -39,7 +46,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 
 const useMenuSplitGroupStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_1.mergeClasses(exports.menuSplitGroupClassName, styles.root, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.menuSplitGroupClassNames.root, styles.root, state.root.className);
   return state;
 };
 

package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuSplitGroup/useMenuSplitGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AAGa,OAAA,CAAA,uBAAA,GAA0B,oBAA1B;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqBA;;AAEG;;;AACI,MAAM,gCAAgC,GAAI,KAAD,IAAoD;AAClG,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,uBAAb,EAAsC,MAAM,CAAC,IAA7C,EAAmD,KAAK,CAAC,IAAN,CAAW,SAA9D,CAAvB;AACA,SAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassName } from '../MenuItem/useMenuItemStyles';\nimport type { MenuSplitGroupState } from './MenuSplitGroup.types';\n\nexport const menuSplitGroupClassName = 'fui-MenuSplitGroup';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    [`& > .${menuItemClassName}:nth-child(1)`]: {\n      width: '100%',\n    },\n    [`& > .${menuItemClassName}:nth-child(2)`]: {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      paddingLeft: 0,\n      marginLeft: 'auto',\n      ':before': {\n        content: '\"\"',\n        width: tokens.strokeWidthThin,\n        height: '24px',\n        backgroundColor: tokens.colorNeutralStroke1,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */\nexport const useMenuSplitGroupStyles_unstable = (state: MenuSplitGroupState): MenuSplitGroupState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuSplitGroupClassName, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuSplitGroup/useMenuSplitGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,uBAAA,GAA0B,oBAA1B;AACA,OAAA,CAAA,wBAAA,GAAgE;AAC3E,EAAA,IAAI,EAAE;AADqE,CAAhE;AAGb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqBA;;AAEG;;;AACI,MAAM,gCAAgC,GAAI,KAAD,IAAoD;AAClG,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,wBAAA,CAAyB,IAAtC,EAA4C,MAAM,CAAC,IAAnD,EAAyD,KAAK,CAAC,IAAN,CAAW,SAApE,CAAvB;AACA,SAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles';\nimport type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `menuSplitGroupClassNames.root` instead.\n */\nexport const menuSplitGroupClassName = 'fui-MenuSplitGroup';\nexport const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots> = {\n  root: 'fui-MenuSplitGroup',\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    [`& > .${menuItemClassNames.root}:nth-child(1)`]: {\n      width: '100%',\n    },\n    [`& > .${menuItemClassNames.root}:nth-child(2)`]: {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      paddingLeft: 0,\n      marginLeft: 'auto',\n      ':before': {\n        content: '\"\"',\n        width: tokens.strokeWidthThin,\n        height: '24px',\n        backgroundColor: tokens.colorNeutralStroke1,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */\nexport const useMenuSplitGroupStyles_unstable = (state: MenuSplitGroupState): MenuSplitGroupState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@fluentui/react-menu",
-  "version": "9.0.0-rc.5",
+  "version": "9.0.0-rc.8",
   "description": "Fluent UI menu component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "lib/index.d.ts",
+  "typings": "dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -13,7 +13,7 @@
   "license": "MIT",
   "scripts": {
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-menu/src && yarn docs",
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-menu/src && yarn docs",
     "build": "just-scripts build",
     "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
@@ -22,37 +22,27 @@
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "start": "yarn storybook",
-    "storybook": "node ../../scripts/storybook/runner",
+    "storybook": "node ../../../scripts/storybook/runner",
     "test": "jest --passWithNoTests",
     "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.3",
-    "@fluentui/scripts": "^1.0.0",
-    "@types/enzyme": "3.10.3",
-    "@types/enzyme-adapter-react-16": "1.0.3",
-    "@types/react": "16.9.42",
-    "@types/react-dom": "16.9.10",
-    "@types/react-test-renderer": "^16.0.0",
-    "enzyme": "~3.10.0",
-    "enzyme-adapter-react-16": "^1.15.0",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-test-renderer": "^16.3.0"
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.4",
+    "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "9.0.0-rc.4",
-    "@fluentui/react-context-selector": "9.0.0-rc.5",
-    "@fluentui/react-icons": "^2.0.159-beta.10",
-    "@griffel/react": "1.0.0",
-    "@fluentui/react-portal": "9.0.0-rc.5",
-    "@fluentui/react-positioning": "9.0.0-rc.5",
-    "@fluentui/react-shared-contexts": "9.0.0-rc.4",
-    "@fluentui/react-tabster": "9.0.0-rc.5",
-    "@fluentui/react-theme": "9.0.0-rc.4",
-    "@fluentui/react-utilities": "9.0.0-rc.5",
+    "@fluentui/keyboard-keys": "9.0.0-rc.5",
+    "@fluentui/react-context-selector": "9.0.0-rc.7",
+    "@fluentui/react-icons": "^2.0.166-rc.3",
+    "@griffel/react": "1.0.3",
+    "@fluentui/react-portal": "9.0.0-rc.8",
+    "@fluentui/react-positioning": "9.0.0-rc.7",
+    "@fluentui/react-shared-contexts": "9.0.0-rc.6",
+    "@fluentui/react-tabster": "9.0.0-rc.8",
+    "@fluentui/react-theme": "9.0.0-rc.6",
+    "@fluentui/react-utilities": "9.0.0-rc.7",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

package/lib/Menu.d.ts

@@ -1 +0,0 @@
-export * from './components/Menu/index';

package/lib/MenuDivider.d.ts

@@ -1 +0,0 @@
-export * from './components/MenuDivider/index';

package/lib/MenuGroup.d.ts

@@ -1 +0,0 @@
-export * from './components/MenuGroup/index';

package/lib/MenuGroupHeader.d.ts

@@ -1 +0,0 @@
-export * from './components/MenuGroupHeader/index';

package/lib/MenuItem.d.ts

@@ -1 +0,0 @@
-export * from './components/MenuItem/index';

package/lib/MenuItemCheckbox.d.ts

@@ -1 +0,0 @@
-export * from './components/MenuItemCheckbox/index';

package/lib/MenuItemRadio.d.ts

@@ -1 +0,0 @@
-export * from './components/MenuItemRadio/index';

package/lib/MenuList.d.ts

@@ -1 +0,0 @@
-export * from './components/MenuList/index';

package/lib/MenuPopover.d.ts

@@ -1 +0,0 @@
-export * from './components/MenuPopover/index';