@fluentui/react-menu 0.0.0-nightlycc44f3625c20211220.1 → 0.0.0-nightlye0b8e1fa6920220128.1

package/lib/components/MenuDivider/MenuDivider.d.ts

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

package/lib/components/MenuDivider/MenuDivider.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useMenuDivider } from './useMenuDivider';
-import { useMenuDividerStyles } from './useMenuDividerStyles';
-import { renderMenuDivider } from './renderMenuDivider';
+import { useMenuDivider_unstable } from './useMenuDivider';
+import { useMenuDividerStyles_unstable } from './useMenuDividerStyles';
+import { renderMenuDivider_unstable } from './renderMenuDivider';
 /**
- * Define a styled MenuDivider, using the `useMenuDivider` hook.
+ * Define a styled MenuDivider, using the `useMenuDivider_unstable` hook.
  */
 
 export const MenuDivider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useMenuDivider(props, ref);
-  useMenuDividerStyles(state);
-  return renderMenuDivider(state);
+  const state = useMenuDivider_unstable(props, ref);
+  useMenuDividerStyles_unstable(state);
+  return renderMenuDivider_unstable(state);
 });
 MenuDivider.displayName = 'MenuDivider';
 //# sourceMappingURL=MenuDivider.js.map

package/lib/components/MenuDivider/MenuDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuDivider/MenuDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AAIA;;AAEG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,cAAc,CAAC,KAAD,EAAQ,GAAR,CAA5B;AACA,EAAA,oBAAoB,CAAC,KAAD,CAApB;AAEA,SAAO,iBAAiB,CAAC,KAAD,CAAxB;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuDivider/MenuDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAIA;;AAEG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;AACA,EAAA,6BAA6B,CAAC,KAAD,CAA7B;AAEA,SAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourceRoot":""}

package/lib/components/MenuDivider/MenuDivider.types.d.ts

@@ -1,6 +1,6 @@
-import { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, IntrinsicSlotProps } from '@fluentui/react-utilities';
 export declare type MenuDividerSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: IntrinsicSlotProps<'div'>;
 };
 export declare type MenuDividerProps = ComponentProps<MenuDividerSlots>;
 export declare type MenuDividerState = ComponentState<MenuDividerSlots>;

package/lib/components/MenuDivider/renderMenuDivider.d.ts

@@ -3,4 +3,4 @@ import { MenuDividerState } from './MenuDivider.types';
  * Redefine the render function to add slots. Reuse the menudivider structure but add
  * slots to children.
  */
-export declare const renderMenuDivider: (state: MenuDividerState) => JSX.Element;
+export declare const renderMenuDivider_unstable: (state: MenuDividerState) => JSX.Element;

package/lib/components/MenuDivider/renderMenuDivider.js

@@ -5,7 +5,7 @@ import { getSlots } from '@fluentui/react-utilities';
  * slots to children.
  */
 
-export const renderMenuDivider = state => {
+export const renderMenuDivider_unstable = state => {
   const {
     slots,
     slotProps

package/lib/components/MenuDivider/renderMenuDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuDivider/renderMenuDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;;AAGG;;AACH,OAAO,MAAM,iBAAiB,GAAI,KAAD,IAA4B;AAC3D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuDivider/renderMenuDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;;AAGG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;AACpE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","sourceRoot":""}

package/lib/components/MenuDivider/useMenuDivider.d.ts

@@ -3,4 +3,4 @@ import type { MenuDividerProps, MenuDividerState } from './MenuDivider.types';
 /**
  * Given user props, returns state and render function for a MenuDivider.
  */
-export declare const useMenuDivider: (props: MenuDividerProps, ref: React.Ref<HTMLElement>) => MenuDividerState;
+export declare const useMenuDivider_unstable: (props: MenuDividerProps, ref: React.Ref<HTMLElement>) => MenuDividerState;

package/lib/components/MenuDivider/useMenuDivider.js

@@ -3,8 +3,11 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
  * Given user props, returns state and render function for a MenuDivider.
  */
 
-export const useMenuDivider = (props, ref) => {
+export const useMenuDivider_unstable = (props, ref) => {
   return {
+    components: {
+      root: 'div'
+    },
     root: getNativeElementProps('div', {
       role: 'presentation',
       'aria-hidden': true,

package/lib/components/MenuDivider/useMenuDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuDivider/useMenuDivider.ts"],"names":[],"mappings":"AAAA,SAAS,qBAAT,QAAsC,2BAAtC;AAIA;;AAEG;;AACH,OAAO,MAAM,cAAc,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;AACvG,SAAO;AACL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,IAAI,EAAE,cAD2B;AAEjC,qBAAe,IAFkB;AAGjC,SAAG,KAH8B;AAIjC,MAAA;AAJiC,KAAR;AADtB,GAAP;AAQD,CATM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuDivider/useMenuDivider.ts"],"names":[],"mappings":"AAAA,SAAS,qBAAT,QAAsC,2BAAtC;AAIA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;AAChH,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KADP;AAIL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,IAAI,EAAE,cAD2B;AAEjC,qBAAe,IAFkB;AAGjC,SAAG,KAH8B;AAIjC,MAAA;AAJiC,KAAR;AAJtB,GAAP;AAWD,CAZM","sourceRoot":""}

package/lib/components/MenuDivider/useMenuDividerStyles.d.ts

@@ -1,3 +1,3 @@
 import type { MenuDividerState } from './MenuDivider.types';
 export declare const menuDividerClassName = "fui-MenuDivider";
-export declare const useMenuDividerStyles: (state: MenuDividerState) => MenuDividerState;
+export declare const useMenuDividerStyles_unstable: (state: MenuDividerState) => MenuDividerState;

package/lib/components/MenuDivider/useMenuDividerStyles.js

@@ -1,4 +1,5 @@
-import { shorthands, mergeClasses, __styles } from '@fluentui/react-make-styles';
+import { shorthands, mergeClasses, __styles } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
 export const menuDividerClassName = 'fui-MenuDivider';
 
 const useStyles = /*#__PURE__*/__styles({
@@ -15,7 +16,7 @@ const useStyles = /*#__PURE__*/__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);}"]
 });
 
-export const useMenuDividerStyles = state => {
+export const useMenuDividerStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(menuDividerClassName, styles.root, state.root.className);
   return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuDivider/useMenuDividerStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,6BAArD;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;;AAEP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AASA,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAA4B;AAC9D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAD,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;AAEA,SAAO,KAAP;AACD,CALM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuDivider/useMenuDividerStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;;AAEP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AASA,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA4B;AACvE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAD,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;AAEA,SAAO,KAAP;AACD,CALM","sourceRoot":""}

package/lib/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/components/MenuGroup/MenuGroup.js

@@ -1,17 +1,17 @@
 import * as React from 'react';
-import { useMenuGroup } from './useMenuGroup';
-import { renderMenuGroup } from './renderMenuGroup';
-import { useMenuGroupContextValues } from './useMenuGroupContextValues';
-import { useMenuGroupStyles } from './useMenuGroupStyles';
+import { useMenuGroup_unstable } from './useMenuGroup';
+import { renderMenuGroup_unstable } from './renderMenuGroup';
+import { useMenuGroupContextValues_unstable } from './useMenuGroupContextValues';
+import { useMenuGroupStyles_unstable } from './useMenuGroupStyles';
 /**
- * Define a styled MenuGroup, using the `useMenuGroup` hook.
+ * Define a styled MenuGroup, using the `useMenuGroup_unstable` hook.
  */
 
 export const MenuGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useMenuGroup(props, ref);
-  const contextValues = useMenuGroupContextValues(state);
-  useMenuGroupStyles(state);
-  return renderMenuGroup(state, contextValues);
+  const state = useMenuGroup_unstable(props, ref);
+  const contextValues = useMenuGroupContextValues_unstable(state);
+  useMenuGroupStyles_unstable(state);
+  return renderMenuGroup_unstable(state, contextValues);
 });
 MenuGroup.displayName = 'MenuGroup';
 //# sourceMappingURL=MenuGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroup/MenuGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,eAAT,QAAgC,mBAAhC;AACA,SAAS,yBAAT,QAA0C,6BAA1C;AAGA,SAAS,kBAAT,QAAmC,sBAAnC;AAEA;;AAEG;;AACH,OAAO,MAAM,SAAS,gBAAwC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC5F,QAAM,KAAK,GAAG,YAAY,CAAC,KAAD,EAAQ,GAAR,CAA1B;AACA,QAAM,aAAa,GAAG,yBAAyB,CAAC,KAAD,CAA/C;AAEA,EAAA,kBAAkB,CAAC,KAAD,CAAlB;AAEA,SAAO,eAAe,CAAC,KAAD,EAAQ,aAAR,CAAtB;AACD,CAP6D,CAAvD;AASP,SAAS,CAAC,WAAV,GAAwB,WAAxB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuGroup/MenuGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,kCAAT,QAAmD,6BAAnD;AAGA,SAAS,2BAAT,QAA4C,sBAA5C;AAEA;;AAEG;;AACH,OAAO,MAAM,SAAS,gBAAwC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC5F,QAAM,KAAK,GAAG,qBAAqB,CAAC,KAAD,EAAQ,GAAR,CAAnC;AACA,QAAM,aAAa,GAAG,kCAAkC,CAAC,KAAD,CAAxD;AAEA,EAAA,2BAA2B,CAAC,KAAD,CAA3B;AAEA,SAAO,wBAAwB,CAAC,KAAD,EAAQ,aAAR,CAA/B;AACD,CAP6D,CAAvD;AASP,SAAS,CAAC,WAAV,GAAwB,WAAxB","sourceRoot":""}

package/lib/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, IntrinsicSlotProps } from '@fluentui/react-utilities';
+import type { MenuGroupContextValue } from '../../contexts/menuGroupContext';
 export declare type MenuGroupSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: IntrinsicSlotProps<'div'>;
 };
 export declare type MenuGroupProps = ComponentProps<MenuGroupSlots>;
 export declare type MenuGroupState = ComponentState<MenuGroupSlots> & {

package/lib/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/components/MenuGroup/renderMenuGroup.js

@@ -6,7 +6,7 @@ import { MenuGroupContextProvider } from '../../contexts/menuGroupContext';
  * slots to children.
  */
 
-export const renderMenuGroup = (state, contextValues) => {
+export const renderMenuGroup_unstable = (state, contextValues) => {
   const {
     slots,
     slotProps

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroup/renderMenuGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,wBAAT,QAAyC,iCAAzC;AAEA;;;AAGG;;AACH,OAAO,MAAM,eAAe,GAAG,CAAC,KAAD,EAAwB,aAAxB,KAAiE;AAC9F,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAiB,KAAjB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,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","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuGroup/renderMenuGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,wBAAT,QAAyC,iCAAzC;AAEA;;;AAGG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAAwB,aAAxB,KAAiE;AACvG,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAiB,KAAjB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,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","sourceRoot":""}

package/lib/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/components/MenuGroup/useMenuGroup.js

@@ -3,9 +3,12 @@ import { getNativeElementProps, useId } from '@fluentui/react-utilities';
  * Given user props, returns state and render function for a MenuGroup.
  */
 
-export function useMenuGroup(props, ref) {
+export function useMenuGroup_unstable(props, ref) {
   const headerId = useId('menu-group');
   return {
+    components: {
+      root: 'div'
+    },
     root: getNativeElementProps('div', {
       ref,
       'aria-labelledby': headerId,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroup.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,KAAhC,QAA6C,2BAA7C;AAGA;;AAEG;;AACH,OAAM,SAAU,YAAV,CAAuB,KAAvB,EAA8C,GAA9C,EAAyE;AAC7E,QAAM,QAAQ,GAAG,KAAK,CAAC,YAAD,CAAtB;AAEA,SAAO;AACL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,yBAAmB,QAFc;AAGjC,MAAA,IAAI,EAAE,OAH2B;AAIjC,SAAG;AAJ8B,KAAR,CADtB;AAOL,IAAA,QAAQ,EAAE;AAPL,GAAP;AASD","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroup.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,KAAhC,QAA6C,2BAA7C;AAGA;;AAEG;;AACH,OAAM,SAAU,qBAAV,CAAgC,KAAhC,EAAuD,GAAvD,EAAkF;AACtF,QAAM,QAAQ,GAAG,KAAK,CAAC,YAAD,CAAtB;AAEA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KADP;AAIL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,yBAAmB,QAFc;AAGjC,MAAA,IAAI,EAAE,OAH2B;AAIjC,SAAG;AAJ8B,KAAR,CAJtB;AAUL,IAAA,QAAQ,EAAE;AAVL,GAAP;AAYD","sourceRoot":""}

package/lib/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/components/MenuGroup/useMenuGroupContextValues.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export function useMenuGroupContextValues(state) {
+export function useMenuGroupContextValues_unstable(state) {
   const {
     headerId
   } = state;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroupContextValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAM,SAAU,yBAAV,CAAoC,KAApC,EAAyD;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","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroupContextValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAM,SAAU,kCAAV,CAA6C,KAA7C,EAAkE;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","sourceRoot":""}

package/lib/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/components/MenuGroup/useMenuGroupStyles.js

@@ -1,6 +1,6 @@
-import { mergeClasses } from '@fluentui/react-make-styles';
+import { mergeClasses } from '@griffel/react';
 export const menuGroupClassName = 'fui-MenuGroup';
-export const useMenuGroupStyles = state => {
+export const useMenuGroupStyles_unstable = state => {
   state.root.className = mergeClasses(menuGroupClassName, state.root.className);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroupStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,6BAA7B;AAGA,OAAO,MAAM,kBAAkB,GAAG,eAA3B;AAEP,OAAO,MAAM,kBAAkB,GAAI,KAAD,IAA0C;AAC1E,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,kBAAD,EAAqB,KAAK,CAAC,IAAN,CAAW,SAAhC,CAAnC;AAEA,SAAO,KAAP;AACD,CAJM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroupStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,gBAA7B;AAGA,OAAO,MAAM,kBAAkB,GAAG,eAA3B;AAEP,OAAO,MAAM,2BAA2B,GAAI,KAAD,IAA0C;AACnF,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,kBAAD,EAAqB,KAAK,CAAC,IAAN,CAAW,SAAhC,CAAnC;AAEA,SAAO,KAAP;AACD,CAJM","sourceRoot":""}

package/lib/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/components/MenuGroupHeader/MenuGroupHeader.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useMenuGroupHeader } from './useMenuGroupHeader';
-import { useMenuGroupHeaderStyles } from './useMenuGroupHeaderStyles';
-import { renderMenuGroupHeader } from './renderMenuGroupHeader';
+import { useMenuGroupHeader_unstable } from './useMenuGroupHeader';
+import { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles';
+import { renderMenuGroupHeader_unstable } from './renderMenuGroupHeader';
 /**
- * Define a styled MenuGroupHeader, using the `useMenuGroupHeader` hook.
+ * Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook.
  */
 
 export const MenuGroupHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useMenuGroupHeader(props, ref);
-  useMenuGroupHeaderStyles(state);
-  return renderMenuGroupHeader(state);
+  const state = useMenuGroupHeader_unstable(props, ref);
+  useMenuGroupHeaderStyles_unstable(state);
+  return renderMenuGroupHeader_unstable(state);
 });
 MenuGroupHeader.displayName = 'MenuGroupHeader';
 //# sourceMappingURL=MenuGroupHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroupHeader/MenuGroupHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,sBAAnC;AACA,SAAS,wBAAT,QAAyC,4BAAzC;AACA,SAAS,qBAAT,QAAsC,yBAAtC;AAIA;;AAEG;;AACH,OAAO,MAAM,eAAe,gBAA8C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACxG,QAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;AACA,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,qBAAqB,CAAC,KAAD,CAA5B;AACD,CALyE,CAAnE;AAOP,eAAe,CAAC,WAAhB,GAA8B,iBAA9B","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuGroupHeader/MenuGroupHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,iCAAT,QAAkD,4BAAlD;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AAIA;;AAEG;;AACH,OAAO,MAAM,eAAe,gBAA8C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACxG,QAAM,KAAK,GAAG,2BAA2B,CAAC,KAAD,EAAQ,GAAR,CAAzC;AACA,EAAA,iCAAiC,CAAC,KAAD,CAAjC;AAEA,SAAO,8BAA8B,CAAC,KAAD,CAArC;AACD,CALyE,CAAnE;AAOP,eAAe,CAAC,WAAhB,GAA8B,iBAA9B","sourceRoot":""}

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

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

package/lib/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/components/MenuGroupHeader/renderMenuGroupHeader.js

@@ -5,7 +5,7 @@ import { getSlots } from '@fluentui/react-utilities';
  * slots to children.
  */
 
-export const renderMenuGroupHeader = state => {
+export const renderMenuGroupHeader_unstable = state => {
   const {
     slots,
     slotProps

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroupHeader/renderMenuGroupHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;;AAGG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAgC;AACnE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAuB,KAAvB,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuGroupHeader/renderMenuGroupHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;;AAGG;;AACH,OAAO,MAAM,8BAA8B,GAAI,KAAD,IAAgC;AAC5E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAuB,KAAvB,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","sourceRoot":""}

package/lib/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/components/MenuGroupHeader/useMenuGroupHeader.js

@@ -1,14 +1,17 @@
-import { useMenuGroupContext } from '../../contexts/menuGroupContext';
+import { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext';
 import { getNativeElementProps } from '@fluentui/react-utilities';
 /**
  * Given user props, returns state and render function for a MenuGroupHeader.
  */
 
-export function useMenuGroupHeader(props, ref) {
+export function useMenuGroupHeader_unstable(props, ref) {
   const {
     headerId: id
-  } = useMenuGroupContext();
+  } = useMenuGroupContext_unstable();
   return {
+    components: {
+      root: 'div'
+    },
     root: getNativeElementProps('div', {
       ref,
       id,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroupHeader/useMenuGroupHeader.ts"],"names":[],"mappings":"AACA,SAAS,mBAAT,QAAoC,iCAApC;AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;AAEG;;AACH,OAAM,SAAU,kBAAV,CAA6B,KAA7B,EAA0D,GAA1D,EAAqF;AACzF,QAAM;AAAE,IAAA,QAAQ,EAAE;AAAZ,MAAmB,mBAAmB,EAA5C;AAEA,SAAO;AACL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,MAAA,EAFiC;AAGjC,SAAG;AAH8B,KAAR;AADtB,GAAP;AAOD","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuGroupHeader/useMenuGroupHeader.ts"],"names":[],"mappings":"AACA,SAAS,4BAAT,QAA6C,iCAA7C;AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;AAEG;;AACH,OAAM,SAAU,2BAAV,CACJ,KADI,EAEJ,GAFI,EAEuB;AAE3B,QAAM;AAAE,IAAA,QAAQ,EAAE;AAAZ,MAAmB,4BAA4B,EAArD;AAEA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KADP;AAIL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,MAAA,EAFiC;AAGjC,SAAG;AAH8B,KAAR;AAJtB,GAAP;AAUD","sourceRoot":""}

package/lib/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) => MenuGroupHeaderState;
+export declare const useMenuGroupHeaderStyles_unstable: (state: MenuGroupHeaderState) => MenuGroupHeaderState;

package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.js

@@ -1,4 +1,5 @@
-import { mergeClasses, __styles } from '@fluentui/react-make-styles';
+import { mergeClasses, __styles } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
 export const menuGroupHeaderClassName = 'fui-MenuGroupHeader';
 
 const useStyles = /*#__PURE__*/__styles({
@@ -16,7 +17,7 @@ const useStyles = /*#__PURE__*/__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;}"]
 });
 
-export const useMenuGroupHeaderStyles = state => {
+export const useMenuGroupHeaderStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(menuGroupHeaderClassName, styles.root, state.root.className);
   return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;AAGA,OAAO,MAAM,wBAAwB,GAAG,qBAAjC;;AAEP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAaA,OAAO,MAAM,wBAAwB,GAAI,KAAD,IAAgC;AACtE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,wBAAD,EAA2B,MAAM,CAAC,IAAlC,EAAwC,KAAK,CAAC,IAAN,CAAW,SAAnD,CAAnC;AAEA,SAAO,KAAP;AACD,CALM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,wBAAwB,GAAG,qBAAjC;;AAEP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAaA,OAAO,MAAM,iCAAiC,GAAI,KAAD,IAAgC;AAC/E,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,wBAAD,EAA2B,MAAM,CAAC,IAAlC,EAAwC,KAAK,CAAC,IAAN,CAAW,SAAnD,CAAnC;AAEA,SAAO,KAAP;AACD,CALM","sourceRoot":""}

package/lib/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/components/MenuItem/MenuItem.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useMenuItem } from './useMenuItem';
-import { renderMenuItem } from './renderMenuItem';
-import { useMenuItemStyles } from './useMenuItemStyles';
+import { useMenuItem_unstable } from './useMenuItem';
+import { renderMenuItem_unstable } from './renderMenuItem';
+import { useMenuItemStyles_unstable } from './useMenuItemStyles';
 /**
- * Define a styled MenuItem, using the `useMenuItem` and `useMenuItemStyles` hook.
+ * Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.
  */
 
 export const MenuItem = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useMenuItem(props, ref);
-  useMenuItemStyles(state);
-  return renderMenuItem(state);
+  const state = useMenuItem_unstable(props, ref);
+  useMenuItemStyles_unstable(state);
+  return renderMenuItem_unstable(state);
 });
 MenuItem.displayName = 'MenuItem';
 //# sourceMappingURL=MenuItem.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItem/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,WAAT,QAA4B,eAA5B;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AAIA;;AAEG;;AACH,OAAO,MAAM,QAAQ,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC1F,QAAM,KAAK,GAAG,WAAW,CAAC,KAAD,EAAQ,GAAR,CAAzB;AAEA,EAAA,iBAAiB,CAAC,KAAD,CAAjB;AACA,SAAO,cAAc,CAAC,KAAD,CAArB;AACD,CAL2D,CAArD;AAOP,QAAQ,CAAC,WAAT,GAAuB,UAAvB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuItem/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAIA;;AAEG;;AACH,OAAO,MAAM,QAAQ,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC1F,QAAM,KAAK,GAAG,oBAAoB,CAAC,KAAD,EAAQ,GAAR,CAAlC;AAEA,EAAA,0BAA0B,CAAC,KAAD,CAA1B;AACA,SAAO,uBAAuB,CAAC,KAAD,CAA9B;AACD,CAL2D,CAArD;AAOP,QAAQ,CAAC,WAAT,GAAuB,UAAvB","sourceRoot":""}

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

@@ -1,28 +1,28 @@
-import { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, IntrinsicSlotProps } from '@fluentui/react-utilities';
 export declare type MenuItemSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: IntrinsicSlotProps<'div'>;
     /**
      * Icon slot rendered before children content
      */
-    icon?: IntrinsicShorthandProps<'span'>;
+    icon?: IntrinsicSlotProps<'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?: IntrinsicSlotProps<'span'>;
     /**
      * Icon slot that shows the indicator for a submenu
      */
-    submenuIndicator?: IntrinsicShorthandProps<'span'>;
+    submenuIndicator?: IntrinsicSlotProps<'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?: IntrinsicSlotProps<'span'>;
     /**
      * Secondary content rendered opposite the primary content (e.g Shortcut text)
      */
-    secondaryContent?: IntrinsicShorthandProps<'span'>;
+    secondaryContent?: IntrinsicSlotProps<'span'>;
 };
 declare type MenuItemCommons = {
     /**

package/lib/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/components/MenuItem/renderMenuItem.js

@@ -1,15 +1,14 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { menuItemSlots } from './useMenuItem';
 /**
  * Function that renders the final JSX of the component
  */
 
-export const renderMenuItem = state => {
+export const renderMenuItem_unstable = state => {
   const {
     slots,
     slotProps
-  } = getSlots(state, menuItemSlots);
+  } = getSlots(state);
   return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
   }, /*#__PURE__*/React.createElement(slots.checkmark, { ...slotProps.checkmark
   }), /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItem/renderMenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,aAAT,QAA8B,eAA9B;AAGA;;AAEG;;AACH,OAAO,MAAM,cAAc,GAAI,KAAD,IAAyB;AACrD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAgB,KAAhB,EAAuB,aAAvB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAhB,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,CAHF,eAIE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,CAJF,eAKE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,CALF,CADF;AASD,CAZM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuItem/renderMenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;AAC9D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAgB,KAAhB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAhB,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,CAHF,eAIE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,CAJF,eAKE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,CALF,CADF;AASD,CAZM","sourceRoot":""}

package/lib/components/MenuItem/useCharacterSearch.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuItem/useCharacterSearch.ts"],"names":[],"mappings":"AACA,SAAS,kBAAT,QAAmC,gCAAnC;AAGA,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAA4D;AAC5F,QAAM,wBAAwB,GAAG,kBAAkB,CAAC,OAAO,IAAI,OAAO,CAAC,wBAApB,CAAnD;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","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuItem/useCharacterSearch.ts"],"names":[],"mappings":"AACA,SAAS,2BAAT,QAA4C,gCAA5C;AAGA,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAA4D;AAC5F,QAAM,wBAAwB,GAAG,2BAA2B,CAAC,OAAO,IAAI,OAAO,CAAC,wBAApB,CAA5D;AAEA,QAAM;AAAE,IAAA,SAAS,EAAE;AAAb,MAA+B,KAAK,CAAC,IAA3C;;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,CAAC,IAAG;;;AACzB,QAAI,aAAJ,EAAmB;AACjB,MAAA,aAAa,CAAC,CAAD,CAAb;AACD;;AAED,QAAI,CAAA,CAAA,EAAA,GAAA,CAAC,CAAC,GAAF,MAAK,IAAL,IAAK,EAAA,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAK,EAAA,CAAE,MAAP,IAAgB,CAApB,EAAuB;AACrB;AACD;;AAED,QAAI,GAAG,CAAC,OAAR,EAAiB;AACf,MAAA,wBAAwB,KAAA,IAAxB,IAAA,wBAAwB,KAAA,KAAA,CAAxB,GAAwB,KAAA,CAAxB,GAAA,wBAAwB,CAAG,CAAH,EAAM,GAAG,CAAC,OAAV,CAAxB;AACD;AACF,GAZD;;AAcA,SAAO,KAAP;AACD,CAnBM","sourceRoot":""}

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

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