@fluentui/react-menu 9.14.26 → 9.15.0

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @fluentui/react-menu
 
-This log was last generated on Wed, 22 Jan 2025 13:55:29 GMT and should not be manually modified.
+This log was last generated on Mon, 27 Jan 2025 20:24:41 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.15.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.15.0)
+
+Mon, 27 Jan 2025 20:24:41 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.14.26..@fluentui/react-menu_v9.15.0)
+
+### Minor changes
+
+- feat: Add `subText` slot to enable multiline menu layout ([PR #33704](https://github.com/microsoft/fluentui/pull/33704) by lingfangao@hotmail.com)
+- Bump @fluentui/react-positioning to v9.16.3 ([PR #33724](https://github.com/microsoft/fluentui/pull/33724) by beachball)
+
+### Patches
+
+- fix: MenuItem is only focused when mouse cursor is moved ([PR #33725](https://github.com/microsoft/fluentui/pull/33725) by lingfangao@hotmail.com)
+
 ## [9.14.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.14.26)
 
-Wed, 22 Jan 2025 13:55:29 GMT 
+Wed, 22 Jan 2025 14:00:18 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.14.25..@fluentui/react-menu_v9.14.26)
 
 ### Patches

package/dist/index.d.ts

@@ -13,7 +13,7 @@ import { PositioningVirtualElement } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import { SetVirtualMouseTarget } from '@fluentui/react-positioning';
 import type { Slot } from '@fluentui/react-utilities';
-import type { SlotClassNames } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 import type { TriggerProps } from '@fluentui/react-utilities';
 import type { UseOnClickOrScrollOutsideOptions } from '@fluentui/react-utilities';
 
@@ -253,6 +253,10 @@ export declare type MenuItemSlots = {
      * Secondary content rendered opposite the primary content (e.g Shortcut text)
      */
     secondaryContent?: Slot<'span'>;
+    /**
+     * Additional descriptor to main content that creates a multiline layout
+     */
+    subText?: Slot<'span'>;
 };
 
 export declare type MenuItemState = ComponentState<MenuItemSlots> & Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;
@@ -266,7 +270,7 @@ export declare const menuItemSwitchClassNames: SlotClassNames<MenuItemSwitchSlot
  */
 export declare type MenuItemSwitchProps = ComponentProps<MenuItemSwitchSlots> & Pick<MenuItemCheckboxProps, 'disabled' | 'persistOnClick' | 'name' | 'value'>;
 
-export declare type MenuItemSwitchSlots = Pick<MenuItemSlots, 'root' | 'content' | 'secondaryContent' | 'icon'> & {
+export declare type MenuItemSwitchSlots = Pick<MenuItemSlots, 'root' | 'content' | 'secondaryContent' | 'icon' | 'subText'> & {
     switchIndicator?: Slot<'span'>;
 };
 
@@ -521,6 +525,14 @@ export declare const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps>;
 
 export declare const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots>;
 
+declare type MenuSplitGroupContextValue = {
+    setMultiline: (multiline: boolean) => void;
+};
+
+declare type MenuSplitGroupContextValues = {
+    menuSplitGroup: MenuSplitGroupContextValue;
+};
+
 /**
  * MenuSplitGroup Props
  */
@@ -533,7 +545,7 @@ export declare type MenuSplitGroupSlots = {
 /**
  * State used in rendering MenuSplitGroup
  */
-export declare type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots>;
+export declare type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots> & Pick<MenuSplitGroupContextValue, 'setMultiline'>;
 
 export declare type MenuState = ComponentState<MenuSlots> & Required<Pick<MenuProps, 'hasCheckmarks' | 'hasIcons' | 'mountNode' | 'inline' | 'checkedValues' | 'onCheckedValueChange' | 'open' | 'openOnHover' | 'closeOnScroll' | 'hoverDelay' | 'openOnContext' | 'persistOnItemClick'>> & {
     /**
@@ -682,7 +694,7 @@ export declare const renderMenuPopover_unstable: (state: MenuPopoverState) => JS
 /**
  * Render the final JSX of MenuSplitGroup
  */
-export declare const renderMenuSplitGroup_unstable: (state: MenuSplitGroupState) => JSX.Element;
+export declare const renderMenuSplitGroup_unstable: (state: MenuSplitGroupState, contexts?: MenuSplitGroupContextValues) => JSX.Element;
 
 /**
  * Render the final JSX of MenuTrigger

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItem/MenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuItemSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * Icon slot rendered before children content\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * A helper slot for alignment when a menu item is used with selectable menuitems\n   * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n   */\n  checkmark?: Slot<'span'>;\n\n  /**\n   * Icon slot that shows the indicator for a submenu\n   */\n  submenuIndicator?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible\n   */\n  content?: Slot<'span'>;\n\n  /**\n   * Secondary content rendered opposite the primary content (e.g Shortcut text)\n   */\n  secondaryContent?: Slot<'span'>;\n};\n\nexport type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> &\n  Pick<Partial<MenuItemSlots>, 'content'> & {\n    /**\n     * If the menu item is a trigger for a submenu\n     *\n     * @default false\n     */\n    hasSubmenu?: boolean;\n\n    /**\n     * Clicking on the menu item will not dismiss an open menu\n     *\n     * @default false\n     */\n    persistOnClick?: boolean;\n\n    disabled?: boolean;\n    /**\n     * @deprecated this property does nothing.\n     * disabled focusable is by default by simply using `disabled` property\n     */\n    disabledFocusable?: boolean;\n  };\n\nexport type MenuItemState = ComponentState<MenuItemSlots> &\n  Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;\n"],"names":[],"rangeMappings":"","mappings":"AAyDA,WAC8E"}
+{"version":3,"sources":["../src/components/MenuItem/MenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuItemSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * Icon slot rendered before children content\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * A helper slot for alignment when a menu item is used with selectable menuitems\n   * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n   */\n  checkmark?: Slot<'span'>;\n\n  /**\n   * Icon slot that shows the indicator for a submenu\n   */\n  submenuIndicator?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible\n   */\n  content?: Slot<'span'>;\n\n  /**\n   * Secondary content rendered opposite the primary content (e.g Shortcut text)\n   */\n  secondaryContent?: Slot<'span'>;\n\n  /**\n   * Additional descriptor to main content that creates a multiline layout\n   */\n  subText?: Slot<'span'>;\n};\n\nexport type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> &\n  Pick<Partial<MenuItemSlots>, 'content'> & {\n    /**\n     * If the menu item is a trigger for a submenu\n     *\n     * @default false\n     */\n    hasSubmenu?: boolean;\n\n    /**\n     * Clicking on the menu item will not dismiss an open menu\n     *\n     * @default false\n     */\n    persistOnClick?: boolean;\n\n    disabled?: boolean;\n    /**\n     * @deprecated this property does nothing.\n     * disabled focusable is by default by simply using `disabled` property\n     */\n    disabledFocusable?: boolean;\n  };\n\nexport type MenuItemState = ComponentState<MenuItemSlots> &\n  Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;\n"],"names":[],"rangeMappings":"","mappings":"AA8DA,WAC8E"}

package/lib/components/MenuItem/renderMenuItem.js

@@ -8,7 +8,12 @@ import { assertSlots } from '@fluentui/react-utilities';
         children: [
             state.checkmark && /*#__PURE__*/ _jsx(state.checkmark, {}),
             state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
-            state.content && /*#__PURE__*/ _jsx(state.content, {}),
+            state.content && /*#__PURE__*/ _jsxs(state.content, {
+                children: [
+                    state.content.children,
+                    state.subText && /*#__PURE__*/ _jsx(state.subText, {})
+                ]
+            }),
             state.secondaryContent && /*#__PURE__*/ _jsx(state.secondaryContent, {}),
             state.submenuIndicator && /*#__PURE__*/ _jsx(state.submenuIndicator, {})
         ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItem/renderMenuItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuItem_unstable = (state: MenuItemState) => {\n  assertSlots<MenuItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.checkmark && <state.checkmark />}\n      {state.icon && <state.icon />}\n      {state.content && <state.content />}\n      {state.secondaryContent && <state.secondaryContent />}\n      {state.submenuIndicator && <state.submenuIndicator />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderMenuItem_unstable","state","root","checkmark","icon","content","secondaryContent","submenuIndicator"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,OAAO,kBAAI,KAACJ,MAAMI,OAAO;YAC/BJ,MAAMK,gBAAgB,kBAAI,KAACL,MAAMK,gBAAgB;YACjDL,MAAMM,gBAAgB,kBAAI,KAACN,MAAMM,gBAAgB;;;AAGxD,EAAE"}
+{"version":3,"sources":["../src/components/MenuItem/renderMenuItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuItem_unstable = (state: MenuItemState) => {\n  assertSlots<MenuItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.checkmark && <state.checkmark />}\n      {state.icon && <state.icon />}\n      {state.content && (\n        <state.content>\n          {state.content.children}\n          {state.subText && <state.subText />}\n        </state.content>\n      )}\n      {state.secondaryContent && <state.secondaryContent />}\n      {state.submenuIndicator && <state.submenuIndicator />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderMenuItem_unstable","state","root","checkmark","icon","content","children","subText","secondaryContent","submenuIndicator"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,OAAO,kBACZ,MAACJ,MAAMI,OAAO;;oBACXJ,MAAMI,OAAO,CAACC,QAAQ;oBACtBL,MAAMM,OAAO,kBAAI,KAACN,MAAMM,OAAO;;;YAGnCN,MAAMO,gBAAgB,kBAAI,KAACP,MAAMO,gBAAgB;YACjDP,MAAMQ,gBAAgB,kBAAI,KAACR,MAAMQ,gBAAgB;;;AAGxD,EAAE"}

package/lib/components/MenuItem/useMenuItem.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEventCallback, useMergedRefs, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useEventCallback, useMergedRefs, getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useCharacterSearch } from './useCharacterSearch';
 import { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';
@@ -8,6 +8,7 @@ import { useMenuListContext_unstable } from '../../contexts/menuListContext';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { useARIAButtonProps } from '@fluentui/react-aria';
 import { Enter, Space } from '@fluentui/keyboard-keys';
+import { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';
 const ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);
 const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
 /**
@@ -16,9 +17,14 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
     const isSubmenuTrigger = useMenuTriggerContext_unstable();
     const persistOnClickContext = useMenuContext_unstable((context)=>context.persistOnItemClick);
     const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;
-    const hasIcons = useMenuListContext_unstable((context)=>context.hasIcons);
-    const hasCheckmarks = useMenuListContext_unstable((context)=>context.hasCheckmarks);
+    const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({
+        hasSubmenu
+    });
     const setOpen = useMenuContext_unstable((context)=>context.setOpen);
+    useNotifySplitItemMultiline({
+        multiline: !!props.subText,
+        hasSubmenu
+    });
     const { dir } = useFluent();
     const innerRef = React.useRef(null);
     const dismissedWithKeyboardRef = React.useRef(false);
@@ -32,7 +38,8 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
             checkmark: 'span',
             submenuIndicator: 'span',
             content: 'span',
-            secondaryContent: 'span'
+            secondaryContent: 'span',
+            subText: 'span'
         },
         root: slot.always(getIntrinsicElementProps(as, useARIAButtonProps(as, {
             role: 'menuitem',
@@ -47,10 +54,13 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
                     dismissedWithKeyboardRef.current = true;
                 }
             }),
-            onMouseEnter: useEventCallback((event)=>{
-                var _innerRef_current, _props_onMouseEnter;
-                (_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.focus();
-                (_props_onMouseEnter = props.onMouseEnter) === null || _props_onMouseEnter === void 0 ? void 0 : _props_onMouseEnter.call(props, event);
+            onMouseMove: useEventCallback((event)=>{
+                var _props_onMouseMove;
+                if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {
+                    var _innerRef_current;
+                    (_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.focus();
+                }
+                (_props_onMouseMove = props.onMouseMove) === null || _props_onMouseMove === void 0 ? void 0 : _props_onMouseMove.call(props, event);
             }),
             onClick: useEventCallback((event)=>{
                 var _props_onClick;
@@ -93,8 +103,38 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
         }),
         secondaryContent: slot.optional(props.secondaryContent, {
             elementType: 'span'
+        }),
+        subText: slot.optional(props.subText, {
+            elementType: 'span'
         })
     };
     useCharacterSearch(state, innerRef);
     return state;
 };
+/**
+ * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode
+ * Notify the parent MenuSplitGroup so that it can handle this case
+ */ const useNotifySplitItemMultiline = (options)=>{
+    const { hasSubmenu, multiline } = options;
+    const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;
+    const { setMultiline } = useMenuSplitGroupContext_unstable();
+    useIsomorphicLayoutEffect(()=>{
+        if (!isSplitItemTrigger) {
+            setMultiline(multiline);
+        }
+    }, [
+        setMultiline,
+        multiline,
+        isSplitItemTrigger
+    ]);
+};
+const useIconAndCheckmarkAlignment = (options)=>{
+    const { hasSubmenu } = options;
+    const hasIcons = useMenuListContext_unstable((context)=>context.hasIcons);
+    const hasCheckmarks = useMenuListContext_unstable((context)=>context.hasCheckmarks);
+    const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;
+    return {
+        hasIcons: hasIcons && !isSplitItemTrigger,
+        hasCheckmarks: hasCheckmarks && !isSplitItemTrigger
+    };
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n  ChevronRightFilled,\n  ChevronRightRegular,\n  ChevronLeftFilled,\n  ChevronLeftRegular,\n  bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport {\n  ARIAButtonElement,\n  ARIAButtonElementIntersection,\n  ARIAButtonProps,\n  useARIAButtonProps,\n} from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n  const isSubmenuTrigger = useMenuTriggerContext_unstable();\n  const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n  const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;\n  const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n\n  const { dir } = useFluent();\n  const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n  const dismissedWithKeyboardRef = React.useRef(false);\n\n  const state: MenuItemState = {\n    hasSubmenu,\n    disabled,\n    persistOnClick,\n    components: {\n      root: 'div',\n      icon: 'span',\n      checkmark: 'span',\n      submenuIndicator: 'span',\n      content: 'span',\n      secondaryContent: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps(\n        as,\n        useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {\n          role: 'menuitem',\n          ...props,\n          disabled: false,\n          disabledFocusable: disabled,\n          ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n          onKeyDown: useEventCallback(event => {\n            props.onKeyDown?.(event);\n            if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n              dismissedWithKeyboardRef.current = true;\n            }\n          }),\n          onMouseEnter: useEventCallback(event => {\n            innerRef.current?.focus();\n\n            props.onMouseEnter?.(event);\n          }),\n          onClick: useEventCallback(event => {\n            if (!hasSubmenu && !persistOnClick) {\n              setOpen(event, {\n                open: false,\n                keyboard: dismissedWithKeyboardRef.current,\n                bubble: true,\n                type: 'menuItemClick',\n                event,\n              });\n              dismissedWithKeyboardRef.current = false;\n            }\n\n            props.onClick?.(event);\n          }),\n        }),\n      ),\n      { elementType: 'div' },\n    ),\n    icon: slot.optional(props.icon, { renderByDefault: hasIcons, elementType: 'span' }),\n    checkmark: slot.optional(props.checkmark, { renderByDefault: hasCheckmarks, elementType: 'span' }),\n    submenuIndicator: slot.optional(props.submenuIndicator, {\n      renderByDefault: hasSubmenu,\n      defaultProps: {\n        children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n      },\n      elementType: 'span',\n    }),\n    content: slot.optional(props.content, {\n      renderByDefault: !!props.children,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    secondaryContent: slot.optional(props.secondaryContent, { elementType: 'span' }),\n  };\n  useCharacterSearch(state, innerRef);\n  return state;\n};\n"],"names":["React","useEventCallback","useMergedRefs","getIntrinsicElementProps","slot","useFluent_unstable","useFluent","useCharacterSearch","useMenuTriggerContext_unstable","ChevronRightFilled","ChevronRightRegular","ChevronLeftFilled","ChevronLeftRegular","bundleIcon","useMenuListContext_unstable","useMenuContext_unstable","useARIAButtonProps","Enter","Space","ChevronRightIcon","ChevronLeftIcon","useMenuItem_unstable","props","ref","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","hasIcons","hasCheckmarks","setOpen","dir","innerRef","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","content","secondaryContent","always","role","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseEnter","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  useEventCallback,\n  useMergedRefs,\n  getIntrinsicElementProps,\n  slot,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n  ChevronRightFilled,\n  ChevronRightRegular,\n  ChevronLeftFilled,\n  ChevronLeftRegular,\n  bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport {\n  ARIAButtonElement,\n  ARIAButtonElementIntersection,\n  ARIAButtonProps,\n  useARIAButtonProps,\n} from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n  const isSubmenuTrigger = useMenuTriggerContext_unstable();\n  const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n  const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;\n  const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  useNotifySplitItemMultiline({ multiline: !!props.subText, hasSubmenu });\n\n  const { dir } = useFluent();\n  const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n  const dismissedWithKeyboardRef = React.useRef(false);\n\n  const state: MenuItemState = {\n    hasSubmenu,\n    disabled,\n    persistOnClick,\n    components: {\n      root: 'div',\n      icon: 'span',\n      checkmark: 'span',\n      submenuIndicator: 'span',\n      content: 'span',\n      secondaryContent: 'span',\n      subText: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps(\n        as,\n        useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {\n          role: 'menuitem',\n          ...props,\n          disabled: false,\n          disabledFocusable: disabled,\n          ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n          onKeyDown: useEventCallback(event => {\n            props.onKeyDown?.(event);\n            if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n              dismissedWithKeyboardRef.current = true;\n            }\n          }),\n          onMouseMove: useEventCallback(event => {\n            if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {\n              innerRef.current?.focus();\n            }\n\n            props.onMouseMove?.(event);\n          }),\n          onClick: useEventCallback(event => {\n            if (!hasSubmenu && !persistOnClick) {\n              setOpen(event, {\n                open: false,\n                keyboard: dismissedWithKeyboardRef.current,\n                bubble: true,\n                type: 'menuItemClick',\n                event,\n              });\n              dismissedWithKeyboardRef.current = false;\n            }\n\n            props.onClick?.(event);\n          }),\n        }),\n      ),\n      { elementType: 'div' },\n    ),\n    icon: slot.optional(props.icon, { renderByDefault: hasIcons, elementType: 'span' }),\n    checkmark: slot.optional(props.checkmark, {\n      renderByDefault: hasCheckmarks,\n      elementType: 'span',\n    }),\n    submenuIndicator: slot.optional(props.submenuIndicator, {\n      renderByDefault: hasSubmenu,\n      defaultProps: {\n        children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n      },\n      elementType: 'span',\n    }),\n    content: slot.optional(props.content, {\n      renderByDefault: !!props.children,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    secondaryContent: slot.optional(props.secondaryContent, { elementType: 'span' }),\n    subText: slot.optional(props.subText, { elementType: 'span' }),\n  };\n  useCharacterSearch(state, innerRef);\n  return state;\n};\n\n/**\n * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode\n * Notify the parent MenuSplitGroup so that it can handle this case\n */\nconst useNotifySplitItemMultiline = (options: { hasSubmenu: boolean; multiline: boolean }) => {\n  const { hasSubmenu, multiline } = options;\n  const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n  const { setMultiline } = useMenuSplitGroupContext_unstable();\n\n  useIsomorphicLayoutEffect(() => {\n    if (!isSplitItemTrigger) {\n      setMultiline(multiline);\n    }\n  }, [setMultiline, multiline, isSplitItemTrigger]);\n};\n\nconst useIconAndCheckmarkAlignment = (options: { hasSubmenu: boolean }) => {\n  const { hasSubmenu } = options;\n  const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n  const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n  return {\n    hasIcons: hasIcons && !isSplitItemTrigger,\n    hasCheckmarks: hasCheckmarks && !isSplitItemTrigger,\n  };\n};\n"],"names":["React","useEventCallback","useMergedRefs","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","useFluent_unstable","useFluent","useCharacterSearch","useMenuTriggerContext_unstable","ChevronRightFilled","ChevronRightRegular","ChevronLeftFilled","ChevronLeftRegular","bundleIcon","useMenuListContext_unstable","useMenuContext_unstable","useARIAButtonProps","Enter","Space","useIsInMenuSplitGroup","useMenuSplitGroupContext_unstable","ChevronRightIcon","ChevronLeftIcon","useMenuItem_unstable","props","ref","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","useNotifySplitItemMultiline","multiline","subText","dir","innerRef","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","content","secondaryContent","always","role","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseMove","currentTarget","ownerDocument","activeElement","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children","options","isSplitItemTrigger","setMultiline"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -9,16 +9,18 @@ export const menuItemClassNames = {
   checkmark: 'fui-MenuItem__checkmark',
   submenuIndicator: 'fui-MenuItem__submenuIndicator',
   content: 'fui-MenuItem__content',
-  secondaryContent: 'fui-MenuItem__secondaryContent'
+  secondaryContent: 'fui-MenuItem__secondaryContent',
+  subText: 'fui-MenuItem__subText'
 };
-const useRootBaseStyles = /*#__PURE__*/__resetStyles("r11normc", "r1lnj0i0", {
-  r: [".r11normc{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding-right:var(--spacingVerticalSNudge);padding-left:var(--spacingVerticalSNudge);padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}", ".r11normc:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}", ".r11normc:hover .fui-Icon-filled{display:inline;}", ".r11normc:hover .fui-Icon-regular{display:none;}", ".r11normc:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}", ".r11normc:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}", ".r11normc:focus{outline-style:none;}", ".r11normc:focus-visible{outline-style:none;}", ".r11normc[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r11normc[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r1lnj0i0{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding-left:var(--spacingVerticalSNudge);padding-right:var(--spacingVerticalSNudge);padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}", ".r1lnj0i0:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}", ".r1lnj0i0:hover .fui-Icon-filled{display:inline;}", ".r1lnj0i0:hover .fui-Icon-regular{display:none;}", ".r1lnj0i0:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}", ".r1lnj0i0:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}", ".r1lnj0i0:focus{outline-style:none;}", ".r1lnj0i0:focus-visible{outline-style:none;}", ".r1lnj0i0[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1lnj0i0[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
-  s: ["@media (forced-colors: active){.r11normc:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r11normc:focus{outline-style:none;}.r11normc:focus-visible{outline-style:none;}.r11normc[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}@media (forced-colors: active){.r11normc[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}.r11normc[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}}", "@media (forced-colors: active){.r11normc[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.r1lnj0i0:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r1lnj0i0:focus{outline-style:none;}.r1lnj0i0:focus-visible{outline-style:none;}.r1lnj0i0[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}@media (forced-colors: active){.r1lnj0i0[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}.r1lnj0i0[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}}", "@media (forced-colors: active){.r1lnj0i0[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
+const useRootBaseStyles = /*#__PURE__*/__resetStyles("rfoezjv", "r8lt3v0", {
+  r: [".rfoezjv{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding-right:var(--spacingVerticalSNudge);padding-left:var(--spacingVerticalSNudge);padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}", ".rfoezjv:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}", ".rfoezjv:hover .fui-Icon-filled{display:inline;}", ".rfoezjv:hover .fui-Icon-regular{display:none;}", ".rfoezjv:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}", ".rfoezjv:hover .fui-MenuItem__subText{color:var(--colorNeutralForeground3Hover);}", ".rfoezjv:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}", ".rfoezjv:hover:active .fui-MenuItem__subText{color:var(--colorNeutralForeground3Pressed);}", ".rfoezjv:focus{outline-style:none;}", ".rfoezjv:focus-visible{outline-style:none;}", ".rfoezjv[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".rfoezjv[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r8lt3v0{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding-left:var(--spacingVerticalSNudge);padding-right:var(--spacingVerticalSNudge);padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}", ".r8lt3v0:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}", ".r8lt3v0:hover .fui-Icon-filled{display:inline;}", ".r8lt3v0:hover .fui-Icon-regular{display:none;}", ".r8lt3v0:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}", ".r8lt3v0:hover .fui-MenuItem__subText{color:var(--colorNeutralForeground3Hover);}", ".r8lt3v0:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}", ".r8lt3v0:hover:active .fui-MenuItem__subText{color:var(--colorNeutralForeground3Pressed);}", ".r8lt3v0:focus{outline-style:none;}", ".r8lt3v0:focus-visible{outline-style:none;}", ".r8lt3v0[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r8lt3v0[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
+  s: ["@media (forced-colors: active){.rfoezjv:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.rfoezjv:focus{outline-style:none;}.rfoezjv:focus-visible{outline-style:none;}.rfoezjv[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}@media (forced-colors: active){.rfoezjv[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}.rfoezjv[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}}", "@media (forced-colors: active){.rfoezjv[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.r8lt3v0:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r8lt3v0:focus{outline-style:none;}.r8lt3v0:focus-visible{outline-style:none;}.r8lt3v0[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}@media (forced-colors: active){.r8lt3v0[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}.r8lt3v0[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}}", "@media (forced-colors: active){.r8lt3v0[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
 });
 const useContentBaseStyles = /*#__PURE__*/__resetStyles("r1ls86vo", "rpbc5dr", [".r1ls86vo{padding-left:2px;padding-right:2px;background-color:transparent;flex-grow:1;}", ".rpbc5dr{padding-right:2px;padding-left:2px;background-color:transparent;flex-grow:1;}"]);
 const useSecondaryContentBaseStyles = /*#__PURE__*/__resetStyles("r12mwwux", "r1ewgu5j", [".r12mwwux{padding-left:2px;padding-right:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3);}", ".r12mwwux:hover{color:var(--colorNeutralForeground3Hover);}", ".r12mwwux:focus{color:var(--colorNeutralForeground3Hover);}", ".r1ewgu5j{padding-right:2px;padding-left:2px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3);}", ".r1ewgu5j:hover{color:var(--colorNeutralForeground3Hover);}", ".r1ewgu5j:focus{color:var(--colorNeutralForeground3Hover);}"]);
 const useIconBaseStyles = /*#__PURE__*/__resetStyles("ro9koqv", null, [".ro9koqv{width:20px;height:20px;font-size:20px;line-height:0;align-items:center;display:inline-flex;justify-content:center;flex-shrink:0;}"]);
 const useSubmenuIndicatorBaseStyles = /*#__PURE__*/__resetStyles("r9c34qo", null, [".r9c34qo{width:20px;height:20px;font-size:20px;line-height:0;align-items:center;display:inline-flex;justify-content:center;}"]);
+const useSubtextBaseStyles = /*#__PURE__*/__resetStyles("rk2ppru", null, [".rk2ppru{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase100);color:var(--colorNeutralForeground3);}"]);
 const useStyles = /*#__PURE__*/__styles({
   checkmark: {
     B6of3ja: "fmnzpld"
@@ -74,6 +76,20 @@ const useStyles = /*#__PURE__*/__styles({
     m: "(forced-colors: active)"
   }]]
 });
+const useMultilineStyles = /*#__PURE__*/__styles({
+  content: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62"
+  },
+  secondaryContent: {
+    qb2dma: "f7nlbp4"
+  },
+  submenuIndicator: {
+    qb2dma: "f7nlbp4"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f7nlbp4{align-self:center;}"]
+});
 /** Applies style classnames to slots */
 export const useMenuItemStyles_unstable = state => {
   'use no memo';
@@ -84,21 +100,27 @@ export const useMenuItemStyles_unstable = state => {
   const secondaryContentBaseStyles = useSecondaryContentBaseStyles();
   const iconBaseStyles = useIconBaseStyles();
   const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();
+  const multilineStyles = useMultilineStyles();
+  const subtextBaseStyles = useSubtextBaseStyles();
+  const multiline = !!state.subText;
   state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);
   if (state.content) {
-    state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className);
+    state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);
   }
   if (state.checkmark) {
     state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);
   }
   if (state.secondaryContent) {
-    state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && secondaryContentBaseStyles, state.secondaryContent.className);
+    state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && secondaryContentBaseStyles, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);
   }
   if (state.icon) {
     state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);
   }
   if (state.submenuIndicator) {
-    state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className);
+    state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);
+  }
+  if (state.subText) {
+    state.subText.className = mergeClasses(menuItemClassNames.subText, state.subText.className, subtextBaseStyles);
   }
   useCheckmarkStyles_unstable(state);
   return state;

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","__resetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useRootBaseStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useStyles","B6of3ja","splitItemMain","Bh6795r","splitItemTrigger","Btl43ni","Beyfa6y","uwmqm3","Ftih45","Ccq8qp","Baz25je","cmx5o7","disabled","sj55zd","Bi91k9c","Jwef8y","eoavqd","Bk3fhr4","Bmfj8id","Bg7n49j","B2d53fq","iro3zm","t0hwav","Bbusuzp","ze5xyy","Bqrx1nm","Bctn1xl","h5esng","Bh6z0a4","Bh953qp","d","h","f","m","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","className"],"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nexport const menuItemClassNames = {\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};\nconst useRootBaseStyles = makeResetStyles({\n    borderRadius: tokens.borderRadiusMedium,\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: tokens.spacingVerticalSNudge,\n    paddingLeft: tokens.spacingVerticalSNudge,\n    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n    boxSizing: 'border-box',\n    maxWidth: '290px',\n    minHeight: '32px',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'start',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    gap: '4px',\n    ':hover': {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        color: tokens.colorNeutralForeground2Hover,\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        },\n        [`& .${menuItemClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2BrandSelected\n        }\n    },\n    ':hover:active': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        color: tokens.colorNeutralForeground2Pressed\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        ':hover': {\n            backgroundColor: 'Canvas',\n            borderColor: 'Highlight',\n            color: 'Highlight'\n        },\n        ...createFocusOutlineStyle({\n            style: {\n                outlineColor: 'Highlight'\n            }\n        })\n    },\n    userSelect: 'none',\n    ...createFocusOutlineStyle()\n});\nconst useContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1\n});\nconst useSecondaryContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    ...typographyStyles.caption1,\n    lineHeight: tokens.lineHeightBase300,\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n        color: tokens.colorNeutralForeground3Hover\n    },\n    ':focus': {\n        color: tokens.colorNeutralForeground3Hover\n    }\n});\nconst useIconBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    flexShrink: 0\n});\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center'\n});\nconst useStyles = makeStyles({\n    checkmark: {\n        marginTop: '2px'\n    },\n    splitItemMain: {\n        flexGrow: 1\n    },\n    splitItemTrigger: {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n        paddingLeft: 0,\n        '::before': {\n            content: '\"\"',\n            width: tokens.strokeWidthThin,\n            height: '24px',\n            backgroundColor: tokens.colorNeutralStroke1\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1,\n            cursor: 'not-allowed',\n            [`& .${iconFilledClassName}`]: {\n                display: 'none'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${menuItemClassNames.icon}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1\n        },\n        ':focus': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        '@media (forced-colors: active)': {\n            color: 'GrayText',\n            ':hover': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas',\n                [`& .${menuItemClassNames.icon}`]: {\n                    color: 'GrayText',\n                    backgroundColor: 'Canvas'\n                }\n            },\n            ':focus': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas'\n            }\n        }\n    }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const rootBaseStyles = useRootBaseStyles();\n    const contentBaseStyles = useContentBaseStyles();\n    const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n    state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && secondaryContentBaseStyles, state.secondaryContent.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n    }\n    if (state.submenuIndicator) {\n        state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className);\n    }\n    useCheckmarkStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["mergeClasses","__styles","__resetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useRootBaseStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useSubtextBaseStyles","useStyles","B6of3ja","splitItemMain","Bh6795r","splitItemTrigger","Btl43ni","Beyfa6y","uwmqm3","Ftih45","Ccq8qp","Baz25je","cmx5o7","disabled","sj55zd","Bi91k9c","Jwef8y","eoavqd","Bk3fhr4","Bmfj8id","Bg7n49j","B2d53fq","iro3zm","t0hwav","Bbusuzp","ze5xyy","Bqrx1nm","Bctn1xl","h5esng","Bh6z0a4","Bh953qp","d","h","f","m","useMultilineStyles","mc9l5x","Beiy3e4","qb2dma","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","multilineStyles","subtextBaseStyles","multiline","className"],"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nexport const menuItemClassNames = {\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    subText: 'fui-MenuItem__subText'\n};\nconst useRootBaseStyles = makeResetStyles({\n    borderRadius: tokens.borderRadiusMedium,\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: tokens.spacingVerticalSNudge,\n    paddingLeft: tokens.spacingVerticalSNudge,\n    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n    boxSizing: 'border-box',\n    maxWidth: '290px',\n    minHeight: '32px',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'start',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    gap: '4px',\n    ':hover': {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        color: tokens.colorNeutralForeground2Hover,\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        },\n        [`& .${menuItemClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2BrandSelected\n        },\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Hover\n        }\n    },\n    ':hover:active': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        color: tokens.colorNeutralForeground2Pressed,\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Pressed\n        }\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        ':hover': {\n            backgroundColor: 'Canvas',\n            borderColor: 'Highlight',\n            color: 'Highlight'\n        },\n        ...createFocusOutlineStyle({\n            style: {\n                outlineColor: 'Highlight'\n            }\n        })\n    },\n    userSelect: 'none',\n    ...createFocusOutlineStyle()\n});\nconst useContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1\n});\nconst useSecondaryContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    ...typographyStyles.caption1,\n    lineHeight: tokens.lineHeightBase300,\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n        color: tokens.colorNeutralForeground3Hover\n    },\n    ':focus': {\n        color: tokens.colorNeutralForeground3Hover\n    }\n});\nconst useIconBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    flexShrink: 0\n});\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center'\n});\nconst useSubtextBaseStyles = makeResetStyles({\n    ...typographyStyles.caption2,\n    color: tokens.colorNeutralForeground3\n});\nconst useStyles = makeStyles({\n    checkmark: {\n        marginTop: '2px'\n    },\n    splitItemMain: {\n        flexGrow: 1\n    },\n    splitItemTrigger: {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n        paddingLeft: 0,\n        '::before': {\n            content: '\"\"',\n            width: tokens.strokeWidthThin,\n            height: '24px',\n            backgroundColor: tokens.colorNeutralStroke1\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1,\n            cursor: 'not-allowed',\n            [`& .${iconFilledClassName}`]: {\n                display: 'none'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${menuItemClassNames.icon}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1\n        },\n        ':focus': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        '@media (forced-colors: active)': {\n            color: 'GrayText',\n            ':hover': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas',\n                [`& .${menuItemClassNames.icon}`]: {\n                    color: 'GrayText',\n                    backgroundColor: 'Canvas'\n                }\n            },\n            ':focus': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas'\n            }\n        }\n    }\n});\nconst useMultilineStyles = makeStyles({\n    content: {\n        display: 'flex',\n        flexDirection: 'column'\n    },\n    secondaryContent: {\n        alignSelf: 'center'\n    },\n    submenuIndicator: {\n        alignSelf: 'center'\n    }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const rootBaseStyles = useRootBaseStyles();\n    const contentBaseStyles = useContentBaseStyles();\n    const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n    const multilineStyles = useMultilineStyles();\n    const subtextBaseStyles = useSubtextBaseStyles();\n    const multiline = !!state.subText;\n    state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && secondaryContentBaseStyles, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n    }\n    if (state.submenuIndicator) {\n        state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);\n    }\n    if (state.subText) {\n        state.subText.className = mergeClasses(menuItemClassNames.subText, state.subText.className, subtextBaseStyles);\n    }\n    useCheckmarkStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/MenuItemCheckbox/renderMenuItemCheckbox.js

@@ -6,7 +6,12 @@ import { assertSlots } from '@fluentui/react-utilities';
         children: [
             state.checkmark && /*#__PURE__*/ _jsx(state.checkmark, {}),
             state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
-            state.content && /*#__PURE__*/ _jsx(state.content, {}),
+            state.content && /*#__PURE__*/ _jsxs(state.content, {
+                children: [
+                    state.content.children,
+                    state.subText && /*#__PURE__*/ _jsx(state.subText, {})
+                ]
+            }),
             state.secondaryContent && /*#__PURE__*/ _jsx(state.secondaryContent, {})
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemCheckbox/renderMenuItemCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\nimport type { MenuItemSlots } from '../MenuItem/MenuItem.types';\n\n/** Function that renders the final JSX of the component  */\nexport const renderMenuItemCheckbox_unstable = (state: MenuItemCheckboxState) => {\n  assertSlots<MenuItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.checkmark && <state.checkmark />}\n      {state.icon && <state.icon />}\n      {state.content && <state.content />}\n      {state.secondaryContent && <state.secondaryContent />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderMenuItemCheckbox_unstable","state","root","checkmark","icon","content","secondaryContent"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD,0DAA0D,GAC1D,OAAO,MAAMC,kCAAkC,CAACC;IAC9CF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,OAAO,kBAAI,KAACJ,MAAMI,OAAO;YAC/BJ,MAAMK,gBAAgB,kBAAI,KAACL,MAAMK,gBAAgB;;;AAGxD,EAAE"}
+{"version":3,"sources":["../src/components/MenuItemCheckbox/renderMenuItemCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\nimport type { MenuItemSlots } from '../MenuItem/MenuItem.types';\n\n/** Function that renders the final JSX of the component  */\nexport const renderMenuItemCheckbox_unstable = (state: MenuItemCheckboxState) => {\n  assertSlots<MenuItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.checkmark && <state.checkmark />}\n      {state.icon && <state.icon />}\n      {state.content && (\n        <state.content>\n          {state.content.children}\n          {state.subText && <state.subText />}\n        </state.content>\n      )}\n      {state.secondaryContent && <state.secondaryContent />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderMenuItemCheckbox_unstable","state","root","checkmark","icon","content","children","subText","secondaryContent"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD,0DAA0D,GAC1D,OAAO,MAAMC,kCAAkC,CAACC;IAC9CF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,OAAO,kBACZ,MAACJ,MAAMI,OAAO;;oBACXJ,MAAMI,OAAO,CAACC,QAAQ;oBACtBL,MAAMM,OAAO,kBAAI,KAACN,MAAMM,OAAO;;;YAGnCN,MAAMO,gBAAgB,kBAAI,KAACP,MAAMO,gBAAgB;;;AAGxD,EAAE"}

package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.js

@@ -6,7 +6,8 @@ export const menuItemCheckboxClassNames = {
   icon: 'fui-MenuItemCheckbox__icon',
   checkmark: 'fui-MenuItemCheckbox__checkmark',
   content: 'fui-MenuItemCheckbox__content',
-  secondaryContent: 'fui-MenuItemCheckbox__secondaryContent'
+  secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',
+  subText: 'fui-MenuItemCheckbox__subText'
 };
 export const useMenuItemCheckboxStyles_unstable = state => {
   'use no memo';
@@ -24,6 +25,9 @@ export const useMenuItemCheckboxStyles_unstable = state => {
   if (state.checkmark) {
     state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);
   }
+  if (state.subText) {
+    state.subText.className = mergeClasses(menuItemCheckboxClassNames.subText, state.subText.className);
+  }
   useMenuItemStyles_unstable(state);
   useCheckmarkStyles_unstable(state);
   return state;

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemCheckboxClassNames","root","icon","checkmark","content","secondaryContent","useMenuItemCheckboxStyles_unstable","state","className"],"sources":["useMenuItemCheckboxStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemCheckboxClassNames = {\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};\nexport const useMenuItemCheckboxStyles_unstable = (state)=>{\n    'use no memo';\n    state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n    }\n    useMenuItemStyles_unstable(state);\n    useCheckmarkStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE,sBAAsB;EAC5BC,IAAI,EAAE,4BAA4B;EAClCC,SAAS,EAAE,iCAAiC;EAC5CC,OAAO,EAAE,+BAA+B;EACxCC,gBAAgB,EAAE;AACtB,CAAC;AACD,OAAO,MAAMC,kCAAkC,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACbA,KAAK,CAACN,IAAI,CAACO,SAAS,GAAGX,YAAY,CAACG,0BAA0B,CAACC,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACO,SAAS,CAAC;EAC1F,IAAID,KAAK,CAACH,OAAO,EAAE;IACfG,KAAK,CAACH,OAAO,CAACI,SAAS,GAAGX,YAAY,CAACG,0BAA0B,CAACI,OAAO,EAAEG,KAAK,CAACH,OAAO,CAACI,SAAS,CAAC;EACvG;EACA,IAAID,KAAK,CAACF,gBAAgB,EAAE;IACxBE,KAAK,CAACF,gBAAgB,CAACG,SAAS,GAAGX,YAAY,CAACG,0BAA0B,CAACK,gBAAgB,EAAEE,KAAK,CAACF,gBAAgB,CAACG,SAAS,CAAC;EAClI;EACA,IAAID,KAAK,CAACL,IAAI,EAAE;IACZK,KAAK,CAACL,IAAI,CAACM,SAAS,GAAGX,YAAY,CAACG,0BAA0B,CAACE,IAAI,EAAEK,KAAK,CAACL,IAAI,CAACM,SAAS,CAAC;EAC9F;EACA,IAAID,KAAK,CAACJ,SAAS,EAAE;IACjBI,KAAK,CAACJ,SAAS,CAACK,SAAS,GAAGX,YAAY,CAACG,0BAA0B,CAACG,SAAS,EAAEI,KAAK,CAACJ,SAAS,CAACK,SAAS,CAAC;EAC7G;EACAT,0BAA0B,CAACQ,KAAK,CAAC;EACjCT,2BAA2B,CAACS,KAAK,CAAC;EAClC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemCheckboxClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemCheckboxStyles_unstable","state","className"],"sources":["useMenuItemCheckboxStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemCheckboxClassNames = {\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    subText: 'fui-MenuItemCheckbox__subText'\n};\nexport const useMenuItemCheckboxStyles_unstable = (state)=>{\n    'use no memo';\n    state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n    }\n    if (state.subText) {\n        state.subText.className = mergeClasses(menuItemCheckboxClassNames.subText, state.subText.className);\n    }\n    useMenuItemStyles_unstable(state);\n    useCheckmarkStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE,sBAAsB;EAC5BC,IAAI,EAAE,4BAA4B;EAClCC,SAAS,EAAE,iCAAiC;EAC5CC,OAAO,EAAE,+BAA+B;EACxCC,gBAAgB,EAAE,wCAAwC;EAC1DC,OAAO,EAAE;AACb,CAAC;AACD,OAAO,MAAMC,kCAAkC,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACbA,KAAK,CAACP,IAAI,CAACQ,SAAS,GAAGZ,YAAY,CAACG,0BAA0B,CAACC,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACQ,SAAS,CAAC;EAC1F,IAAID,KAAK,CAACJ,OAAO,EAAE;IACfI,KAAK,CAACJ,OAAO,CAACK,SAAS,GAAGZ,YAAY,CAACG,0BAA0B,CAACI,OAAO,EAAEI,KAAK,CAACJ,OAAO,CAACK,SAAS,CAAC;EACvG;EACA,IAAID,KAAK,CAACH,gBAAgB,EAAE;IACxBG,KAAK,CAACH,gBAAgB,CAACI,SAAS,GAAGZ,YAAY,CAACG,0BAA0B,CAACK,gBAAgB,EAAEG,KAAK,CAACH,gBAAgB,CAACI,SAAS,CAAC;EAClI;EACA,IAAID,KAAK,CAACN,IAAI,EAAE;IACZM,KAAK,CAACN,IAAI,CAACO,SAAS,GAAGZ,YAAY,CAACG,0BAA0B,CAACE,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACO,SAAS,CAAC;EAC9F;EACA,IAAID,KAAK,CAACL,SAAS,EAAE;IACjBK,KAAK,CAACL,SAAS,CAACM,SAAS,GAAGZ,YAAY,CAACG,0BAA0B,CAACG,SAAS,EAAEK,KAAK,CAACL,SAAS,CAACM,SAAS,CAAC;EAC7G;EACA,IAAID,KAAK,CAACF,OAAO,EAAE;IACfE,KAAK,CAACF,OAAO,CAACG,SAAS,GAAGZ,YAAY,CAACG,0BAA0B,CAACM,OAAO,EAAEE,KAAK,CAACF,OAAO,CAACG,SAAS,CAAC;EACvG;EACAV,0BAA0B,CAACS,KAAK,CAAC;EACjCV,2BAA2B,CAACU,KAAK,CAAC;EAClC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/MenuItemRadio/renderMenuItemRadio.js

@@ -9,7 +9,12 @@ import { assertSlots } from '@fluentui/react-utilities';
         children: [
             state.checkmark && /*#__PURE__*/ _jsx(state.checkmark, {}),
             state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
-            state.content && /*#__PURE__*/ _jsx(state.content, {}),
+            state.content && /*#__PURE__*/ _jsxs(state.content, {
+                children: [
+                    state.content.children,
+                    state.subText && /*#__PURE__*/ _jsx(state.subText, {})
+                ]
+            }),
             state.secondaryContent && /*#__PURE__*/ _jsx(state.secondaryContent, {})
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemRadio/renderMenuItemRadio.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\nimport type { MenuItemSlots } from '../MenuItem/MenuItem.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menuitemradio structure but add\n * slots to children.\n */\nexport const renderMenuItemRadio_unstable = (state: MenuItemRadioState) => {\n  assertSlots<MenuItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.checkmark && <state.checkmark />}\n      {state.icon && <state.icon />}\n      {state.content && <state.content />}\n      {state.secondaryContent && <state.secondaryContent />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderMenuItemRadio_unstable","state","root","checkmark","icon","content","secondaryContent"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;;CAGC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,OAAO,kBAAI,KAACJ,MAAMI,OAAO;YAC/BJ,MAAMK,gBAAgB,kBAAI,KAACL,MAAMK,gBAAgB;;;AAGxD,EAAE"}
+{"version":3,"sources":["../src/components/MenuItemRadio/renderMenuItemRadio.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\nimport type { MenuItemSlots } from '../MenuItem/MenuItem.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menuitemradio structure but add\n * slots to children.\n */\nexport const renderMenuItemRadio_unstable = (state: MenuItemRadioState) => {\n  assertSlots<MenuItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.checkmark && <state.checkmark />}\n      {state.icon && <state.icon />}\n      {state.content && (\n        <state.content>\n          {state.content.children}\n          {state.subText && <state.subText />}\n        </state.content>\n      )}\n      {state.secondaryContent && <state.secondaryContent />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderMenuItemRadio_unstable","state","root","checkmark","icon","content","children","subText","secondaryContent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;;CAGC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,OAAO,kBACZ,MAACJ,MAAMI,OAAO;;oBACXJ,MAAMI,OAAO,CAACC,QAAQ;oBACtBL,MAAMM,OAAO,kBAAI,KAACN,MAAMM,OAAO;;;YAGnCN,MAAMO,gBAAgB,kBAAI,KAACP,MAAMO,gBAAgB;;;AAGxD,EAAE"}

package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.js

@@ -6,7 +6,8 @@ export const menuItemRadioClassNames = {
   icon: 'fui-MenuItemRadio__icon',
   checkmark: 'fui-MenuItemRadio__checkmark',
   content: 'fui-MenuItemRadio__content',
-  secondaryContent: 'fui-MenuItemRadio__secondaryContent'
+  secondaryContent: 'fui-MenuItemRadio__secondaryContent',
+  subText: 'fui-MenuItemRadio__subText'
 };
 export const useMenuItemRadioStyles_unstable = state => {
   'use no memo';
@@ -24,6 +25,9 @@ export const useMenuItemRadioStyles_unstable = state => {
   if (state.checkmark) {
     state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);
   }
+  if (state.subText) {
+    state.subText.className = mergeClasses(menuItemRadioClassNames.subText, state.subText.className);
+  }
   useMenuItemStyles_unstable(state);
   useCheckmarkStyles_unstable(state);
 };

package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemRadioClassNames","root","icon","checkmark","content","secondaryContent","useMenuItemRadioStyles_unstable","state","className"],"sources":["useMenuItemRadioStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemRadioClassNames = {\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};\nexport const useMenuItemRadioStyles_unstable = (state)=>{\n    'use no memo';\n    state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemRadioClassNames.secondaryContent, state.secondaryContent.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);\n    }\n    useMenuItemStyles_unstable(state);\n    useCheckmarkStyles_unstable(state);\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,IAAI,EAAE,yBAAyB;EAC/BC,SAAS,EAAE,8BAA8B;EACzCC,OAAO,EAAE,4BAA4B;EACrCC,gBAAgB,EAAE;AACtB,CAAC;AACD,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACbA,KAAK,CAACN,IAAI,CAACO,SAAS,GAAGX,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACO,SAAS,CAAC;EACvF,IAAID,KAAK,CAACH,OAAO,EAAE;IACfG,KAAK,CAACH,OAAO,CAACI,SAAS,GAAGX,YAAY,CAACG,uBAAuB,CAACI,OAAO,EAAEG,KAAK,CAACH,OAAO,CAACI,SAAS,CAAC;EACpG;EACA,IAAID,KAAK,CAACF,gBAAgB,EAAE;IACxBE,KAAK,CAACF,gBAAgB,CAACG,SAAS,GAAGX,YAAY,CAACG,uBAAuB,CAACK,gBAAgB,EAAEE,KAAK,CAACF,gBAAgB,CAACG,SAAS,CAAC;EAC/H;EACA,IAAID,KAAK,CAACL,IAAI,EAAE;IACZK,KAAK,CAACL,IAAI,CAACM,SAAS,GAAGX,YAAY,CAACG,uBAAuB,CAACE,IAAI,EAAEK,KAAK,CAACL,IAAI,CAACM,SAAS,CAAC;EAC3F;EACA,IAAID,KAAK,CAACJ,SAAS,EAAE;IACjBI,KAAK,CAACJ,SAAS,CAACK,SAAS,GAAGX,YAAY,CAACG,uBAAuB,CAACG,SAAS,EAAEI,KAAK,CAACJ,SAAS,CAACK,SAAS,CAAC;EAC1G;EACAT,0BAA0B,CAACQ,KAAK,CAAC;EACjCT,2BAA2B,CAACS,KAAK,CAAC;AACtC,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemRadioClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemRadioStyles_unstable","state","className"],"sources":["useMenuItemRadioStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemRadioClassNames = {\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    subText: 'fui-MenuItemRadio__subText'\n};\nexport const useMenuItemRadioStyles_unstable = (state)=>{\n    'use no memo';\n    state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemRadioClassNames.secondaryContent, state.secondaryContent.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);\n    }\n    if (state.subText) {\n        state.subText.className = mergeClasses(menuItemRadioClassNames.subText, state.subText.className);\n    }\n    useMenuItemStyles_unstable(state);\n    useCheckmarkStyles_unstable(state);\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,IAAI,EAAE,yBAAyB;EAC/BC,SAAS,EAAE,8BAA8B;EACzCC,OAAO,EAAE,4BAA4B;EACrCC,gBAAgB,EAAE,qCAAqC;EACvDC,OAAO,EAAE;AACb,CAAC;AACD,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACbA,KAAK,CAACP,IAAI,CAACQ,SAAS,GAAGZ,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACQ,SAAS,CAAC;EACvF,IAAID,KAAK,CAACJ,OAAO,EAAE;IACfI,KAAK,CAACJ,OAAO,CAACK,SAAS,GAAGZ,YAAY,CAACG,uBAAuB,CAACI,OAAO,EAAEI,KAAK,CAACJ,OAAO,CAACK,SAAS,CAAC;EACpG;EACA,IAAID,KAAK,CAACH,gBAAgB,EAAE;IACxBG,KAAK,CAACH,gBAAgB,CAACI,SAAS,GAAGZ,YAAY,CAACG,uBAAuB,CAACK,gBAAgB,EAAEG,KAAK,CAACH,gBAAgB,CAACI,SAAS,CAAC;EAC/H;EACA,IAAID,KAAK,CAACN,IAAI,EAAE;IACZM,KAAK,CAACN,IAAI,CAACO,SAAS,GAAGZ,YAAY,CAACG,uBAAuB,CAACE,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACO,SAAS,CAAC;EAC3F;EACA,IAAID,KAAK,CAACL,SAAS,EAAE;IACjBK,KAAK,CAACL,SAAS,CAACM,SAAS,GAAGZ,YAAY,CAACG,uBAAuB,CAACG,SAAS,EAAEK,KAAK,CAACL,SAAS,CAACM,SAAS,CAAC;EAC1G;EACA,IAAID,KAAK,CAACF,OAAO,EAAE;IACfE,KAAK,CAACF,OAAO,CAACG,SAAS,GAAGZ,YAAY,CAACG,uBAAuB,CAACM,OAAO,EAAEE,KAAK,CAACF,OAAO,CAACG,SAAS,CAAC;EACpG;EACAV,0BAA0B,CAACS,KAAK,CAAC;EACjCV,2BAA2B,CAACU,KAAK,CAAC;AACtC,CAAC","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemSwitch/MenuItemSwitch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { MenuItemSlots } from '../MenuItem/MenuItem.types';\nimport { MenuItemSelectableState } from '../../selectable/types';\nimport { MenuItemCheckboxProps } from '../MenuItemCheckbox/MenuItemCheckbox.types';\n\nexport type MenuItemSwitchSlots = Pick<MenuItemSlots, 'root' | 'content' | 'secondaryContent' | 'icon'> & {\n  switchIndicator?: Slot<'span'>;\n};\n\n/**\n * MenuItemSwitch Props\n */\nexport type MenuItemSwitchProps = ComponentProps<MenuItemSwitchSlots> &\n  Pick<MenuItemCheckboxProps, 'disabled' | 'persistOnClick' | 'name' | 'value'>;\n\n/**\n * State used in rendering MenuItemSwitch\n */\nexport type MenuItemSwitchState = ComponentState<MenuItemSwitchSlots> &\n  MenuItemSelectableState &\n  Required<Pick<MenuItemSwitchProps, 'disabled'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AAeA;;CAEC,GACD,WAEkD"}
+{"version":3,"sources":["../src/components/MenuItemSwitch/MenuItemSwitch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { MenuItemSlots } from '../MenuItem/MenuItem.types';\nimport { MenuItemSelectableState } from '../../selectable/types';\nimport { MenuItemCheckboxProps } from '../MenuItemCheckbox/MenuItemCheckbox.types';\n\nexport type MenuItemSwitchSlots = Pick<MenuItemSlots, 'root' | 'content' | 'secondaryContent' | 'icon' | 'subText'> & {\n  switchIndicator?: Slot<'span'>;\n};\n\n/**\n * MenuItemSwitch Props\n */\nexport type MenuItemSwitchProps = ComponentProps<MenuItemSwitchSlots> &\n  Pick<MenuItemCheckboxProps, 'disabled' | 'persistOnClick' | 'name' | 'value'>;\n\n/**\n * State used in rendering MenuItemSwitch\n */\nexport type MenuItemSwitchState = ComponentState<MenuItemSwitchSlots> &\n  MenuItemSelectableState &\n  Required<Pick<MenuItemSwitchProps, 'disabled'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AAeA;;CAEC,GACD,WAEkD"}

package/lib/components/MenuItemSwitch/renderMenuItemSwitch.js

@@ -7,7 +7,12 @@ import { assertSlots } from '@fluentui/react-utilities';
     return /*#__PURE__*/ _jsxs(state.root, {
         children: [
             state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
-            state.content && /*#__PURE__*/ _jsx(state.content, {}),
+            state.content && /*#__PURE__*/ _jsxs(state.content, {
+                children: [
+                    state.content.children,
+                    state.subText && /*#__PURE__*/ _jsx(state.subText, {})
+                ]
+            }),
             state.secondaryContent && /*#__PURE__*/ _jsx(state.secondaryContent, {}),
             state.switchIndicator && /*#__PURE__*/ _jsx(state.switchIndicator, {})
         ]