@fluentui/react-menu 0.0.0-nightlyfbae36b19b20211111.1 → 0.0.0-nightlyfc5cfdc52420220215.1

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

@@ -3,13 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuDividerStyles = exports.menuDividerClassName = void 0;
+exports.useMenuDividerStyles_unstable = exports.menuDividerClassName = void 0;
 
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
 exports.menuDividerClassName = 'fui-MenuDivider';
 
-const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "Bqenvij": "f1mpe4l3",
     "B6of3ja": "fvjh0tl",
@@ -23,11 +25,11 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "d": [".f1mpe4l3{height:1px;}", ".fvjh0tl{margin-top:4px;}", ".f1rnx978{margin-right:-5px;}", ".f1q7jvqi{margin-left:-5px;}", ".fd1gkq{margin-bottom:4px;}", ".f14z66ap{width:auto;}", ".fn4h89p{background-color:var(--colorNeutralStroke2);}"]
 });
 
-const useMenuDividerStyles = state => {
+const useMenuDividerStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(exports.menuDividerClassName, styles.root, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.menuDividerClassName, styles.root, state.root.className);
   return state;
 };
 
-exports.useMenuDividerStyles = useMenuDividerStyles;
+exports.useMenuDividerStyles_unstable = useMenuDividerStyles_unstable;
 //# sourceMappingURL=useMenuDividerStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuDivider/useMenuDividerStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGa,OAAA,CAAA,oBAAA,GAAuB,iBAAvB;;AAEb,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AASO,MAAM,oBAAoB,GAAI,KAAD,IAA4B;AAC9D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,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,oBAAA,GAAoB,oBAApB","sourceRoot":""}
+{"version":3,"sources":["../../../src/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","sourceRoot":""}

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

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

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

@@ -15,15 +15,15 @@ const useMenuGroupContextValues_1 = /*#__PURE__*/require("./useMenuGroupContextV
 
 const useMenuGroupStyles_1 = /*#__PURE__*/require("./useMenuGroupStyles");
 /**
- * Define a styled MenuGroup, using the `useMenuGroup` hook.
+ * Define a styled MenuGroup, using the `useMenuGroup_unstable` hook.
  */
 
 
 exports.MenuGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useMenuGroup_1.useMenuGroup(props, ref);
-  const contextValues = useMenuGroupContextValues_1.useMenuGroupContextValues(state);
-  useMenuGroupStyles_1.useMenuGroupStyles(state);
-  return renderMenuGroup_1.renderMenuGroup(state, contextValues);
+  const state = useMenuGroup_1.useMenuGroup_unstable(props, ref);
+  const contextValues = useMenuGroupContextValues_1.useMenuGroupContextValues_unstable(state);
+  useMenuGroupStyles_1.useMenuGroupStyles_unstable(state);
+  return renderMenuGroup_1.renderMenuGroup_unstable(state, contextValues);
 });
 exports.MenuGroup.displayName = 'MenuGroup';
 //# sourceMappingURL=MenuGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroup/MenuGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGA,MAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,SAAA,gBAAiD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC5F,QAAM,KAAK,GAAG,cAAA,CAAA,YAAA,CAAa,KAAb,EAAoB,GAApB,CAAd;AACA,QAAM,aAAa,GAAG,2BAAA,CAAA,yBAAA,CAA0B,KAA1B,CAAtB;AAEA,EAAA,oBAAA,CAAA,kBAAA,CAAmB,KAAnB;AAEA,SAAO,iBAAA,CAAA,eAAA,CAAgB,KAAhB,EAAuB,aAAvB,CAAP;AACD,CAP6D,CAAjD;AASb,OAAA,CAAA,SAAA,CAAU,WAAV,GAAwB,WAAxB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuGroup/MenuGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGA,MAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,SAAA,gBAAiD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC5F,QAAM,KAAK,GAAG,cAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,GAA7B,CAAd;AACA,QAAM,aAAa,GAAG,2BAAA,CAAA,kCAAA,CAAmC,KAAnC,CAAtB;AAEA,EAAA,oBAAA,CAAA,2BAAA,CAA4B,KAA5B;AAEA,SAAO,iBAAA,CAAA,wBAAA,CAAyB,KAAzB,EAAgC,aAAhC,CAAP;AACD,CAP6D,CAAjD;AASb,OAAA,CAAA,SAAA,CAAU,WAAV,GAAwB,WAAxB","sourceRoot":""}

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

@@ -1,7 +1,7 @@
-import { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
-import { MenuGroupContextValue } from '../../contexts/menuGroupContext';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { MenuGroupContextValue } from '../../contexts/menuGroupContext';
 export declare type MenuGroupSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 export declare type MenuGroupProps = ComponentProps<MenuGroupSlots>;
 export declare type MenuGroupState = ComponentState<MenuGroupSlots> & {

package/lib-commonjs/components/MenuGroup/renderMenuGroup.d.ts

@@ -3,4 +3,4 @@ import { MenuGroupContextValues, MenuGroupState } from './MenuGroup.types';
  * Redefine the render function to add slots. Reuse the menugroup structure but add
  * slots to children.
  */
-export declare const renderMenuGroup: (state: MenuGroupState, contextValues: MenuGroupContextValues) => JSX.Element;
+export declare const renderMenuGroup_unstable: (state: MenuGroupState, contextValues: MenuGroupContextValues) => JSX.Element;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderMenuGroup = void 0;
+exports.renderMenuGroup_unstable = void 0;
 
 const React = /*#__PURE__*/require("react");
 
@@ -16,15 +16,16 @@ const menuGroupContext_1 = /*#__PURE__*/require("../../contexts/menuGroupContext
  */
 
 
-const renderMenuGroup = (state, contextValues) => {
+const renderMenuGroup_unstable = (state, contextValues) => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
   return React.createElement(menuGroupContext_1.MenuGroupContextProvider, {
     value: contextValues.menuGroup
-  }, React.createElement(slots.root, Object.assign({}, slotProps.root)));
+  }, React.createElement(slots.root, { ...slotProps.root
+  }));
 };
 
-exports.renderMenuGroup = renderMenuGroup;
+exports.renderMenuGroup_unstable = renderMenuGroup_unstable;
 //# sourceMappingURL=renderMenuGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroup/renderMenuGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,kBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;AAEA;;;AAGG;;;AACI,MAAM,eAAe,GAAG,CAAC,KAAD,EAAwB,aAAxB,KAAiE;AAC9F,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAyB,KAAzB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,kBAAA,CAAA,wBAAD,EAAyB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAzB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuGroup/renderMenuGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,kBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;AAEA;;;AAGG;;;AACI,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAAwB,aAAxB,KAAiE;AACvG,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAyB,KAAzB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,kBAAA,CAAA,wBAAD,EAAyB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAzB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourceRoot":""}

package/lib-commonjs/components/MenuGroup/useMenuGroup.d.ts

@@ -3,4 +3,4 @@ import { MenuGroupProps, MenuGroupState } from './MenuGroup.types';
 /**
  * Given user props, returns state and render function for a MenuGroup.
  */
-export declare function useMenuGroup(props: MenuGroupProps, ref: React.Ref<HTMLElement>): MenuGroupState;
+export declare function useMenuGroup_unstable(props: MenuGroupProps, ref: React.Ref<HTMLElement>): MenuGroupState;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuGroup = void 0;
+exports.useMenuGroup_unstable = void 0;
 
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
@@ -11,9 +11,12 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
  */
 
 
-function useMenuGroup(props, ref) {
+function useMenuGroup_unstable(props, ref) {
   const headerId = react_utilities_1.useId('menu-group');
   return {
+    components: {
+      root: 'div'
+    },
     root: react_utilities_1.getNativeElementProps('div', {
       ref,
       'aria-labelledby': headerId,
@@ -24,5 +27,5 @@ function useMenuGroup(props, ref) {
   };
 }
 
-exports.useMenuGroup = useMenuGroup;
+exports.useMenuGroup_unstable = useMenuGroup_unstable;
 //# sourceMappingURL=useMenuGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroup.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACH,SAAgB,YAAhB,CAA6B,KAA7B,EAAoD,GAApD,EAA+E;AAC7E,QAAM,QAAQ,GAAG,iBAAA,CAAA,KAAA,CAAM,YAAN,CAAjB;AAEA,SAAO;AACL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,yBAAmB,QAFc;AAGjC,MAAA,IAAI,EAAE,OAH2B;AAIjC,SAAG;AAJ8B,KAA7B,CADD;AAOL,IAAA,QAAQ,EAAE;AAPL,GAAP;AASD;;AAZD,OAAA,CAAA,YAAA,GAAA,YAAA","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroup.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACH,SAAgB,qBAAhB,CAAsC,KAAtC,EAA6D,GAA7D,EAAwF;AACtF,QAAM,QAAQ,GAAG,iBAAA,CAAA,KAAA,CAAM,YAAN,CAAjB;AAEA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KADP;AAIL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,yBAAmB,QAFc;AAGjC,MAAA,IAAI,EAAE,OAH2B;AAIjC,SAAG;AAJ8B,KAA7B,CAJD;AAUL,IAAA,QAAQ,EAAE;AAVL,GAAP;AAYD;;AAfD,OAAA,CAAA,qBAAA,GAAA,qBAAA","sourceRoot":""}

package/lib-commonjs/components/MenuGroup/useMenuGroupContextValues.d.ts

@@ -1,2 +1,2 @@
 import type { MenuGroupContextValues, MenuGroupState } from './MenuGroup.types';
-export declare function useMenuGroupContextValues(state: MenuGroupState): MenuGroupContextValues;
+export declare function useMenuGroupContextValues_unstable(state: MenuGroupState): MenuGroupContextValues;

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuGroupContextValues = void 0;
+exports.useMenuGroupContextValues_unstable = void 0;
 
 const React = /*#__PURE__*/require("react");
 
-function useMenuGroupContextValues(state) {
+function useMenuGroupContextValues_unstable(state) {
   const {
     headerId
   } = state;
@@ -19,5 +19,5 @@ function useMenuGroupContextValues(state) {
   };
 }
 
-exports.useMenuGroupContextValues = useMenuGroupContextValues;
+exports.useMenuGroupContextValues_unstable = useMenuGroupContextValues_unstable;
 //# sourceMappingURL=useMenuGroupContextValues.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroupContextValues.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,SAAgB,yBAAhB,CAA0C,KAA1C,EAA+D;AAC7D,QAAM;AAAE,IAAA;AAAF,MAAe,KAArB;AACA,QAAM,SAAS,GAAG,KAAK,CAAC,OAAN,CAAc,OAAO;AAAE,IAAA;AAAF,GAAP,CAAd,EAAoC,CAAC,QAAD,CAApC,CAAlB;AAEA,SAAO;AAAE,IAAA;AAAF,GAAP;AACD;;AALD,OAAA,CAAA,yBAAA,GAAA,yBAAA","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroupContextValues.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,SAAgB,kCAAhB,CAAmD,KAAnD,EAAwE;AACtE,QAAM;AAAE,IAAA;AAAF,MAAe,KAArB;AACA,QAAM,SAAS,GAAG,KAAK,CAAC,OAAN,CAAc,OAAO;AAAE,IAAA;AAAF,GAAP,CAAd,EAAoC,CAAC,QAAD,CAApC,CAAlB;AAEA,SAAO;AAAE,IAAA;AAAF,GAAP;AACD;;AALD,OAAA,CAAA,kCAAA,GAAA,kCAAA","sourceRoot":""}

package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.d.ts

@@ -1,3 +1,3 @@
 import type { MenuGroupState } from './MenuGroup.types';
 export declare const menuGroupClassName = "fui-MenuGroup";
-export declare const useMenuGroupStyles: (state: MenuGroupState) => MenuGroupState;
+export declare const useMenuGroupStyles_unstable: (state: MenuGroupState) => MenuGroupState;

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

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuGroupStyles = exports.menuGroupClassName = void 0;
+exports.useMenuGroupStyles_unstable = exports.menuGroupClassName = void 0;
 
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 
 exports.menuGroupClassName = 'fui-MenuGroup';
 
-const useMenuGroupStyles = state => {
-  state.root.className = react_make_styles_1.mergeClasses(exports.menuGroupClassName, state.root.className);
+const useMenuGroupStyles_unstable = state => {
+  state.root.className = react_1.mergeClasses(exports.menuGroupClassName, state.root.className);
   return state;
 };
 
-exports.useMenuGroupStyles = useMenuGroupStyles;
+exports.useMenuGroupStyles_unstable = useMenuGroupStyles_unstable;
 //# sourceMappingURL=useMenuGroupStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGa,OAAA,CAAA,kBAAA,GAAqB,eAArB;;AAEN,MAAM,kBAAkB,GAAI,KAAD,IAA0C;AAC1E,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAb,EAAiC,KAAK,CAAC,IAAN,CAAW,SAA5C,CAAvB;AAEA,SAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourceRoot":""}
+{"version":3,"sources":["../../../src/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","sourceRoot":""}

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

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

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

@@ -13,14 +13,14 @@ const useMenuGroupHeaderStyles_1 = /*#__PURE__*/require("./useMenuGroupHeaderSty
 
 const renderMenuGroupHeader_1 = /*#__PURE__*/require("./renderMenuGroupHeader");
 /**
- * Define a styled MenuGroupHeader, using the `useMenuGroupHeader` hook.
+ * Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook.
  */
 
 
 exports.MenuGroupHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useMenuGroupHeader_1.useMenuGroupHeader(props, ref);
-  useMenuGroupHeaderStyles_1.useMenuGroupHeaderStyles(state);
-  return renderMenuGroupHeader_1.renderMenuGroupHeader(state);
+  const state = useMenuGroupHeader_1.useMenuGroupHeader_unstable(props, ref);
+  useMenuGroupHeaderStyles_1.useMenuGroupHeaderStyles_unstable(state);
+  return renderMenuGroupHeader_1.renderMenuGroupHeader_unstable(state);
 });
 exports.MenuGroupHeader.displayName = 'MenuGroupHeader';
 //# sourceMappingURL=MenuGroupHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroupHeader/MenuGroupHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,0BAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,eAAA,gBAA6D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACxG,QAAM,KAAK,GAAG,oBAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;AACA,EAAA,0BAAA,CAAA,wBAAA,CAAyB,KAAzB;AAEA,SAAO,uBAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CALyE,CAA7D;AAOb,OAAA,CAAA,eAAA,CAAgB,WAAhB,GAA8B,iBAA9B","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuGroupHeader/MenuGroupHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,0BAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,eAAA,gBAA6D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACxG,QAAM,KAAK,GAAG,oBAAA,CAAA,2BAAA,CAA4B,KAA5B,EAAmC,GAAnC,CAAd;AACA,EAAA,0BAAA,CAAA,iCAAA,CAAkC,KAAlC;AAEA,SAAO,uBAAA,CAAA,8BAAA,CAA+B,KAA/B,CAAP;AACD,CALyE,CAA7D;AAOb,OAAA,CAAA,eAAA,CAAgB,WAAhB,GAA8B,iBAA9B","sourceRoot":""}

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

@@ -1,6 +1,6 @@
-import { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 export declare type MenuGroupHeaderSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 export declare type MenuGroupHeaderProps = ComponentProps<MenuGroupHeaderSlots>;
 export declare type MenuGroupHeaderState = ComponentState<MenuGroupHeaderSlots>;

package/lib-commonjs/components/MenuGroupHeader/renderMenuGroupHeader.d.ts

@@ -3,4 +3,4 @@ import { MenuGroupHeaderState } from './MenuGroupHeader.types';
  * Redefine the render function to add slots. Reuse the menugroupheader structure but add
  * slots to children.
  */
-export declare const renderMenuGroupHeader: (state: MenuGroupHeaderState) => JSX.Element;
+export declare const renderMenuGroupHeader_unstable: (state: MenuGroupHeaderState) => JSX.Element;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderMenuGroupHeader = void 0;
+exports.renderMenuGroupHeader_unstable = void 0;
 
 const React = /*#__PURE__*/require("react");
 
@@ -14,13 +14,14 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
  */
 
 
-const renderMenuGroupHeader = state => {
+const renderMenuGroupHeader_unstable = state => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, Object.assign({}, slotProps.root));
+  return React.createElement(slots.root, { ...slotProps.root
+  });
 };
 
-exports.renderMenuGroupHeader = renderMenuGroupHeader;
+exports.renderMenuGroupHeader_unstable = renderMenuGroupHeader_unstable;
 //# sourceMappingURL=renderMenuGroupHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroupHeader/renderMenuGroupHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;AAGG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAgC;AACnE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA+B,KAA/B,CAA7B;AAEA,SAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuGroupHeader/renderMenuGroupHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;AAGG;;;AACI,MAAM,8BAA8B,GAAI,KAAD,IAAgC;AAC5E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA+B,KAA/B,CAA7B;AAEA,SAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourceRoot":""}

package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeader.d.ts

@@ -3,4 +3,4 @@ import { MenuGroupHeaderProps, MenuGroupHeaderState } from './MenuGroupHeader.ty
 /**
  * Given user props, returns state and render function for a MenuGroupHeader.
  */
-export declare function useMenuGroupHeader(props: MenuGroupHeaderProps, ref: React.Ref<HTMLElement>): MenuGroupHeaderState;
+export declare function useMenuGroupHeader_unstable(props: MenuGroupHeaderProps, ref: React.Ref<HTMLElement>): MenuGroupHeaderState;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuGroupHeader = void 0;
+exports.useMenuGroupHeader_unstable = void 0;
 
 const menuGroupContext_1 = /*#__PURE__*/require("../../contexts/menuGroupContext");
 
@@ -13,11 +13,14 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
  */
 
 
-function useMenuGroupHeader(props, ref) {
+function useMenuGroupHeader_unstable(props, ref) {
   const {
     headerId: id
-  } = menuGroupContext_1.useMenuGroupContext();
+  } = menuGroupContext_1.useMenuGroupContext_unstable();
   return {
+    components: {
+      root: 'div'
+    },
     root: react_utilities_1.getNativeElementProps('div', {
       ref,
       id,
@@ -26,5 +29,5 @@ function useMenuGroupHeader(props, ref) {
   };
 }
 
-exports.useMenuGroupHeader = useMenuGroupHeader;
+exports.useMenuGroupHeader_unstable = useMenuGroupHeader_unstable;
 //# sourceMappingURL=useMenuGroupHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroupHeader/useMenuGroupHeader.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACH,SAAgB,kBAAhB,CAAmC,KAAnC,EAAgE,GAAhE,EAA2F;AACzF,QAAM;AAAE,IAAA,QAAQ,EAAE;AAAZ,MAAmB,kBAAA,CAAA,mBAAA,EAAzB;AAEA,SAAO;AACL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,MAAA,EAFiC;AAGjC,SAAG;AAH8B,KAA7B;AADD,GAAP;AAOD;;AAVD,OAAA,CAAA,kBAAA,GAAA,kBAAA","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuGroupHeader/useMenuGroupHeader.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACH,SAAgB,2BAAhB,CACE,KADF,EAEE,GAFF,EAE6B;AAE3B,QAAM;AAAE,IAAA,QAAQ,EAAE;AAAZ,MAAmB,kBAAA,CAAA,4BAAA,EAAzB;AAEA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KADP;AAIL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,MAAA,EAFiC;AAGjC,SAAG;AAH8B,KAA7B;AAJD,GAAP;AAUD;;AAhBD,OAAA,CAAA,2BAAA,GAAA,2BAAA","sourceRoot":""}

package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.d.ts

@@ -1,3 +1,3 @@
 import type { MenuGroupHeaderState } from './MenuGroupHeader.types';
 export declare const menuGroupHeaderClassName = "fui-MenuGroupHeader";
-export declare const useMenuGroupHeaderStyles: (state: MenuGroupHeaderState) => import("@fluentui/react-utilities").ComponentState<import("./MenuGroupHeader.types").MenuGroupHeaderSlots>;
+export declare const useMenuGroupHeaderStyles_unstable: (state: MenuGroupHeaderState) => MenuGroupHeaderState;

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

@@ -3,13 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuGroupHeaderStyles = exports.menuGroupHeaderClassName = void 0;
+exports.useMenuGroupHeaderStyles_unstable = exports.menuGroupHeaderClassName = void 0;
 
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
 exports.menuGroupHeaderClassName = 'fui-MenuGroupHeader';
 
-const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "Be2twd7": "fy9rknc",
     "sj55zd": "f11d4kpn",
@@ -24,11 +26,11 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "d": [".fy9rknc{font-size:var(--fontSizeBase200);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fjlbh76{padding-left:12px;}", ".f11qrl6u{padding-right:12px;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".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;}"]
 });
 
-const useMenuGroupHeaderStyles = state => {
+const useMenuGroupHeaderStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(exports.menuGroupHeaderClassName, styles.root, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.menuGroupHeaderClassName, styles.root, state.root.className);
   return state;
 };
 
-exports.useMenuGroupHeaderStyles = useMenuGroupHeaderStyles;
+exports.useMenuGroupHeaderStyles_unstable = useMenuGroupHeaderStyles_unstable;
 //# sourceMappingURL=useMenuGroupHeaderStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGa,OAAA,CAAA,wBAAA,GAA2B,qBAA3B;;AAEb,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAaO,MAAM,wBAAwB,GAAI,KAAD,IAAgC;AACtE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,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,wBAAA,GAAwB,wBAAxB","sourceRoot":""}
+{"version":3,"sources":["../../../src/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","sourceRoot":""}

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

@@ -1,6 +1,6 @@
 import type { MenuItemProps } from './MenuItem.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
- * Define a styled MenuItem, using the `useMenuItem` and `useMenuItemStyles` hook.
+ * Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.
  */
 export declare const MenuItem: ForwardRefComponent<MenuItemProps>;

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

@@ -12,18 +12,15 @@ const useMenuItem_1 = /*#__PURE__*/require("./useMenuItem");
 const renderMenuItem_1 = /*#__PURE__*/require("./renderMenuItem");
 
 const useMenuItemStyles_1 = /*#__PURE__*/require("./useMenuItemStyles");
-
-const index_1 = /*#__PURE__*/require("../../selectable/index");
 /**
- * Define a styled MenuItem, using the `useMenuItem` and `useMenuItemStyles` hook.
+ * Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.
  */
 
 
 exports.MenuItem = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useMenuItem_1.useMenuItem(props, ref);
-  useMenuItemStyles_1.useMenuItemStyles(state);
-  index_1.useCheckmarkStyles(state);
-  return renderMenuItem_1.renderMenuItem(state);
+  const state = useMenuItem_1.useMenuItem_unstable(props, ref);
+  useMenuItemStyles_1.useMenuItemStyles_unstable(state);
+  return renderMenuItem_1.renderMenuItem_unstable(state);
 });
 exports.MenuItem.displayName = 'MenuItem';
 //# sourceMappingURL=MenuItem.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItem/MenuItem.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAKA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC1F,QAAM,KAAK,GAAG,aAAA,CAAA,WAAA,CAAY,KAAZ,EAAmB,GAAnB,CAAd;AAEA,EAAA,mBAAA,CAAA,iBAAA,CAAkB,KAAlB;AACA,EAAA,OAAA,CAAA,kBAAA,CAAmB,KAAnB;AACA,SAAO,gBAAA,CAAA,cAAA,CAAe,KAAf,CAAP;AACD,CAN2D,CAA/C;AAQb,OAAA,CAAA,QAAA,CAAS,WAAT,GAAuB,UAAvB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuItem/MenuItem.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC1F,QAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;AAEA,EAAA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;AACA,SAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAL2D,CAA/C;AAOb,OAAA,CAAA,QAAA,CAAS,WAAT,GAAuB,UAAvB","sourceRoot":""}

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

@@ -1,28 +1,28 @@
-import { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 export declare type MenuItemSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
     /**
      * Icon slot rendered before children content
      */
-    icon?: IntrinsicShorthandProps<'span'>;
+    icon?: Slot<'span'>;
     /**
      * A helper slot for alignment when a menu item is used with selectable menuitems
      * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components
      */
-    checkmark?: IntrinsicShorthandProps<'span'>;
+    checkmark?: Slot<'span'>;
     /**
      * Icon slot that shows the indicator for a submenu
      */
-    submenuIndicator?: IntrinsicShorthandProps<'span'>;
+    submenuIndicator?: Slot<'span'>;
     /**
      * Component children are placed in this slot
      * Avoid using the `children` property in this slot in favour of Component children whenever possible
      */
-    content: IntrinsicShorthandProps<'span'>;
+    content?: Slot<'span'>;
     /**
      * Secondary content rendered opposite the primary content (e.g Shortcut text)
      */
-    secondaryContent?: IntrinsicShorthandProps<'span'>;
+    secondaryContent?: Slot<'span'>;
 };
 declare type MenuItemCommons = {
     /**

package/lib-commonjs/components/MenuItem/renderMenuItem.d.ts

@@ -2,4 +2,4 @@ import type { MenuItemState } from './MenuItem.types';
 /**
  * Function that renders the final JSX of the component
  */
-export declare const renderMenuItem: (state: MenuItemState) => JSX.Element;
+export declare const renderMenuItem_unstable: (state: MenuItemState) => JSX.Element;

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

@@ -3,25 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderMenuItem = void 0;
+exports.renderMenuItem_unstable = void 0;
 
 const React = /*#__PURE__*/require("react");
 
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-const useMenuItem_1 = /*#__PURE__*/require("./useMenuItem");
 /**
  * Function that renders the final JSX of the component
  */
 
 
-const renderMenuItem = state => {
+const renderMenuItem_unstable = state => {
   const {
     slots,
     slotProps
-  } = react_utilities_1.getSlots(state, useMenuItem_1.menuItemSlots);
-  return React.createElement(slots.root, Object.assign({}, slotProps.root), React.createElement(slots.checkmark, Object.assign({}, slotProps.checkmark)), React.createElement(slots.icon, Object.assign({}, slotProps.icon)), React.createElement(slots.content, Object.assign({}, slotProps.content)), React.createElement(slots.secondaryContent, Object.assign({}, slotProps.secondaryContent)), React.createElement(slots.submenuIndicator, Object.assign({}, slotProps.submenuIndicator)));
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, { ...slotProps.root
+  }, slots.checkmark && React.createElement(slots.checkmark, { ...slotProps.checkmark
+  }), slots.icon && React.createElement(slots.icon, { ...slotProps.icon
+  }), slots.content && React.createElement(slots.content, { ...slotProps.content
+  }), slots.secondaryContent && React.createElement(slots.secondaryContent, { ...slotProps.secondaryContent
+  }), slots.submenuIndicator && React.createElement(slots.submenuIndicator, { ...slotProps.submenuIndicator
+  }));
 };
 
-exports.renderMenuItem = renderMenuItem;
+exports.renderMenuItem_unstable = renderMenuItem_unstable;
 //# sourceMappingURL=renderMenuItem.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItem/renderMenuItem.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,eAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,cAAc,GAAI,KAAD,IAAyB;AACrD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,EAA+B,aAAA,CAAA,aAA/B,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,SAAf,CAAhB,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAFF,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,OAAf,CAAd,CAHF,EAIE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,CAJF,EAKE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,CALF,CADF;AASD,CAZM;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuItem/renderMenuItem.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAyB;AAC9D,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,EAKG,KAAK,CAAC,gBAAN,IAA0B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,CAL7B,CADF;AASD,CAZM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourceRoot":""}

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

@@ -8,7 +8,7 @@ exports.useCharacterSearch = void 0;
 const menuListContext_1 = /*#__PURE__*/require("../../contexts/menuListContext");
 
 const useCharacterSearch = (state, ref) => {
-  const setFocusByFirstCharacter = menuListContext_1.useMenuListContext(context => context.setFocusByFirstCharacter);
+  const setFocusByFirstCharacter = menuListContext_1.useMenuListContext_unstable(context => context.setFocusByFirstCharacter);
   const {
     onKeyDown: onKeyDownBase
   } = state.root;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItem/useCharacterSearch.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AAGO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAA4D;AAC5F,QAAM,wBAAwB,GAAG,iBAAA,CAAA,kBAAA,CAAmB,OAAO,IAAI,OAAO,CAAC,wBAAtC,CAAjC;AAEA,QAAM;AAAE,IAAA,SAAS,EAAE;AAAb,MAA+B,KAAK,CAAC,IAA3C;;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,CAAC,IAAG;;;AACzB,QAAI,aAAJ,EAAmB;AACjB,MAAA,aAAa,CAAC,CAAD,CAAb;AACD;;AAED,QAAI,CAAA,CAAA,EAAA,GAAA,CAAC,CAAC,GAAF,MAAK,IAAL,IAAK,EAAA,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAK,EAAA,CAAE,MAAP,IAAgB,CAApB,EAAuB;AACrB;AACD;;AAED,QAAI,GAAG,CAAC,OAAR,EAAiB;AACf,MAAA,wBAAwB,KAAA,IAAxB,IAAA,wBAAwB,KAAA,KAAA,CAAxB,GAAwB,KAAA,CAAxB,GAAA,wBAAwB,CAAG,CAAH,EAAM,GAAG,CAAC,OAAV,CAAxB;AACD;AACF,GAZD;;AAcA,SAAO,KAAP;AACD,CAnBM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuItem/useCharacterSearch.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AAGO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAA4D;AAC5F,QAAM,wBAAwB,GAAG,iBAAA,CAAA,2BAAA,CAA4B,OAAO,IAAI,OAAO,CAAC,wBAA/C,CAAjC;AAEA,QAAM;AAAE,IAAA,SAAS,EAAE;AAAb,MAA+B,KAAK,CAAC,IAA3C;;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,CAAC,IAAG;;;AACzB,QAAI,aAAJ,EAAmB;AACjB,MAAA,aAAa,CAAC,CAAD,CAAb;AACD;;AAED,QAAI,CAAA,CAAA,EAAA,GAAA,CAAC,CAAC,GAAF,MAAK,IAAL,IAAK,EAAA,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAK,EAAA,CAAE,MAAP,IAAgB,CAApB,EAAuB;AACrB;AACD;;AAED,QAAI,GAAG,CAAC,OAAR,EAAiB;AACf,MAAA,wBAAwB,KAAA,IAAxB,IAAA,wBAAwB,KAAA,KAAA,CAAxB,GAAwB,KAAA,CAAxB,GAAA,wBAAwB,CAAG,CAAH,EAAM,GAAG,CAAC,OAAV,CAAxB;AACD;AACF,GAZD;;AAcA,SAAO,KAAP;AACD,CAnBM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourceRoot":""}

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

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