@fluentui/react-menu 9.14.26 → 9.15.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemSwitch/renderMenuItemSwitch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchSlots, MenuItemSwitchState } from './MenuItemSwitch.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuItemSwitch_unstable = (state: MenuItemSwitchState) => {\n  assertSlots<MenuItemSwitchSlots>(state);\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {state.content && <state.content />}\n      {state.secondaryContent && <state.secondaryContent />}\n      {state.switchIndicator && <state.switchIndicator />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderMenuItemSwitch_unstable","state","root","icon","content","secondaryContent","switchIndicator"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CF,YAAiCE;IAEjC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,IAAI,kBAAI,KAACF,MAAME,IAAI;YACzBF,MAAMG,OAAO,kBAAI,KAACH,MAAMG,OAAO;YAC/BH,MAAMI,gBAAgB,kBAAI,KAACJ,MAAMI,gBAAgB;YACjDJ,MAAMK,eAAe,kBAAI,KAACL,MAAMK,eAAe;;;AAGtD,EAAE"}
+{"version":3,"sources":["../src/components/MenuItemSwitch/renderMenuItemSwitch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchSlots, MenuItemSwitchState } from './MenuItemSwitch.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuItemSwitch_unstable = (state: MenuItemSwitchState) => {\n  assertSlots<MenuItemSwitchSlots>(state);\n\n  return (\n    <state.root>\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.switchIndicator && <state.switchIndicator />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderMenuItemSwitch_unstable","state","root","icon","content","children","subText","secondaryContent","switchIndicator"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CF,YAAiCE;IAEjC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,IAAI,kBAAI,KAACF,MAAME,IAAI;YACzBF,MAAMG,OAAO,kBACZ,MAACH,MAAMG,OAAO;;oBACXH,MAAMG,OAAO,CAACC,QAAQ;oBACtBJ,MAAMK,OAAO,kBAAI,KAACL,MAAMK,OAAO;;;YAGnCL,MAAMM,gBAAgB,kBAAI,KAACN,MAAMM,gBAAgB;YACjDN,MAAMO,eAAe,kBAAI,KAACP,MAAMO,eAAe;;;AAGtD,EAAE"}

package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js

@@ -6,7 +6,8 @@ export const menuItemSwitchClassNames = {
   icon: 'fui-MenuItemSwitch__icon',
   content: 'fui-MenuItemSwitch__content',
   secondaryContent: 'fui-MenuItemSwitch__secondaryContent',
-  switchIndicator: 'fui-MenuItemSwitch__switchIndicator'
+  switchIndicator: 'fui-MenuItemSwitch__switchIndicator',
+  subText: 'fui-MenuItemSwitch__subText'
 };
 export const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';
 // Thumb and track sizes used by the component.
@@ -44,6 +45,13 @@ const useSwitchIndicatorStyles = /*#__PURE__*/__styles({
   d: [".fdca5i2 .fui-MenuItemSwitch__switchIndicator__circleFilled{transform:translateX(20px);}", ".fk0rr1z .fui-MenuItemSwitch__switchIndicator__circleFilled{transform:translateX(-20px);}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}"],
   h: [".fz46y8r:hover{color:var(--colorNeutralForegroundInverted);}", ".f1kjrvvj:hover{background-color:var(--colorCompoundBrandBackgroundHover);}", ".fpa59ij:hover{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1rhln42:hover{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1l1ogpg:hover{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fz67qlh:hover{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".frlnr8d:hover:active{color:var(--colorNeutralForegroundInverted);}", ".fle2s0s:hover:active{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1j8ziw4:hover:active{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1xzu9i0:hover:active{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1jlpvxk:hover:active{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1i1ccxp:hover:active{border-bottom-color:var(--colorTransparentStrokeInteractive);}"]
 });
+const useMultilineStyles = /*#__PURE__*/__styles({
+  "switch": {
+    qb2dma: "f7nlbp4"
+  }
+}, {
+  d: [".f7nlbp4{align-self:center;}"]
+});
 /**
  * Apply styling to the MenuItemSwitch slots based on the state
  */
@@ -51,10 +59,13 @@ export const useMenuItemSwitchStyles_unstable = state => {
   'use no memo';
 
   const {
-    checked
+    checked,
+    subText
   } = state;
+  const multiline = !!subText;
   const switchIndicatorStyles = useSwitchIndicatorStyles();
   const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();
+  const multilineStyles = useMultilineStyles();
   state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);
   if (state.content) {
     state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);
@@ -65,8 +76,11 @@ export const useMenuItemSwitchStyles_unstable = state => {
   if (state.icon) {
     state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);
   }
+  if (state.subText) {
+    state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);
+  }
   if (state.switchIndicator) {
-    state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className);
+    state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);
   }
   useMenuItemStyles_unstable({
     ...state,

package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","__resetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","r","s","useSwitchIndicatorStyles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useMenuItemSwitchStyles_unstable","state","switchIndicatorStyles","switchIndicatorBaseStyles","className","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n    root: 'fui-MenuItemSwitch',\n    icon: 'fui-MenuItemSwitch__icon',\n    content: 'fui-MenuItemSwitch__content',\n    secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n    switchIndicator: 'fui-MenuItemSwitch__switchIndicator'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    lineHeight: 0,\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSize}px`,\n    height: `${trackHeight}px`,\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'background, border, color',\n    width: `${trackWidth}px`,\n    marginRight: tokens.spacingHorizontalXS,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms'\n    },\n    color: tokens.colorNeutralStrokeAccessible,\n    ':hover': {\n        color: tokens.colorNeutralStrokeAccessibleHover,\n        borderColor: tokens.colorNeutralStrokeAccessibleHover\n    },\n    ':hover:active': {\n        color: tokens.colorNeutralStrokeAccessiblePressed,\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed\n    },\n    [`& .${circleFilledClassName}`]: {\n        transitionDuration: tokens.durationNormal,\n        transitionTimingFunction: tokens.curveEasyEase,\n        transitionProperty: 'transform',\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms'\n        }\n    }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n    checked: {\n        [`& .${circleFilledClassName}`]: {\n            transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n        },\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundInverted,\n        ...shorthands.borderColor(tokens.colorTransparentStroke),\n        ':hover': {\n            color: tokens.colorNeutralForegroundInverted,\n            backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n        },\n        ':hover:active': {\n            color: tokens.colorNeutralForegroundInverted,\n            backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n        }\n    }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n    'use no memo';\n    const { checked } = state;\n    const switchIndicatorStyles = useSwitchIndicatorStyles();\n    const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n    state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n    }\n    if (state.switchIndicator) {\n        state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className);\n    }\n    useMenuItemStyles_unstable({\n        ...state,\n        components: {\n            ...state.components,\n            checkmark: 'span',\n            submenuIndicator: 'span'\n        },\n        checkmark: undefined,\n        submenuIndicator: undefined,\n        hasSubmenu: false,\n        persistOnClick: true\n    });\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","__resetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","subText","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","r","s","useSwitchIndicatorStyles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useMultilineStyles","qb2dma","useMenuItemSwitchStyles_unstable","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","switch","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n    root: 'fui-MenuItemSwitch',\n    icon: 'fui-MenuItemSwitch__icon',\n    content: 'fui-MenuItemSwitch__content',\n    secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n    switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n    subText: 'fui-MenuItemSwitch__subText'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    lineHeight: 0,\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSize}px`,\n    height: `${trackHeight}px`,\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'background, border, color',\n    width: `${trackWidth}px`,\n    marginRight: tokens.spacingHorizontalXS,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms'\n    },\n    color: tokens.colorNeutralStrokeAccessible,\n    ':hover': {\n        color: tokens.colorNeutralStrokeAccessibleHover,\n        borderColor: tokens.colorNeutralStrokeAccessibleHover\n    },\n    ':hover:active': {\n        color: tokens.colorNeutralStrokeAccessiblePressed,\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed\n    },\n    [`& .${circleFilledClassName}`]: {\n        transitionDuration: tokens.durationNormal,\n        transitionTimingFunction: tokens.curveEasyEase,\n        transitionProperty: 'transform',\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms'\n        }\n    }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n    checked: {\n        [`& .${circleFilledClassName}`]: {\n            transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n        },\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundInverted,\n        ...shorthands.borderColor(tokens.colorTransparentStroke),\n        ':hover': {\n            color: tokens.colorNeutralForegroundInverted,\n            backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n        },\n        ':hover:active': {\n            color: tokens.colorNeutralForegroundInverted,\n            backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n        }\n    }\n});\nconst useMultilineStyles = makeStyles({\n    switch: {\n        alignSelf: 'center'\n    }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n    'use no memo';\n    const { checked, subText } = state;\n    const multiline = !!subText;\n    const switchIndicatorStyles = useSwitchIndicatorStyles();\n    const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n    const multilineStyles = useMultilineStyles();\n    state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n    }\n    if (state.subText) {\n        state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n    }\n    if (state.switchIndicator) {\n        state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);\n    }\n    useMenuItemStyles_unstable({\n        ...state,\n        components: {\n            ...state.components,\n            checkmark: 'span',\n            submenuIndicator: 'span'\n        },\n        checkmark: undefined,\n        submenuIndicator: undefined,\n        hasSubmenu: false,\n        persistOnClick: true\n    });\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/MenuSplitGroup/MenuSplitGroup.js

@@ -3,12 +3,13 @@ import { useMenuSplitGroup_unstable } from './useMenuSplitGroup';
 import { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';
 import { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles.styles';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useMenuSplitGroupContextValues } from './useMenuSplitGroupContextValues';
 /**
  * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.
  */ export const MenuSplitGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useMenuSplitGroup_unstable(props, ref);
     useMenuSplitGroupStyles_unstable(state);
     useCustomStyleHook_unstable('useMenuSplitGroupStyles_unstable')(state);
-    return renderMenuSplitGroup_unstable(state);
+    return renderMenuSplitGroup_unstable(state, useMenuSplitGroupContextValues(state));
 });
 MenuSplitGroup.displayName = 'MenuSplitGroup';

package/lib/components/MenuSplitGroup/MenuSplitGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuSplitGroup/MenuSplitGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuSplitGroup_unstable } from './useMenuSplitGroup';\nimport { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';\nimport { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles.styles';\nimport type { MenuSplitGroupProps } from './MenuSplitGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.\n */\nexport const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps> = React.forwardRef((props, ref) => {\n  const state = useMenuSplitGroup_unstable(props, ref);\n\n  useMenuSplitGroupStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useMenuSplitGroupStyles_unstable')(state);\n\n  return renderMenuSplitGroup_unstable(state);\n});\n\nMenuSplitGroup.displayName = 'MenuSplitGroup';\n"],"names":["React","useMenuSplitGroup_unstable","renderMenuSplitGroup_unstable","useMenuSplitGroupStyles_unstable","useCustomStyleHook_unstable","MenuSplitGroup","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IAEjCL,4BAA4B,oCAAoCK;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuSplitGroup/MenuSplitGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuSplitGroup_unstable } from './useMenuSplitGroup';\nimport { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';\nimport { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles.styles';\nimport type { MenuSplitGroupProps } from './MenuSplitGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMenuSplitGroupContextValues } from './useMenuSplitGroupContextValues';\n\n/**\n * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.\n */\nexport const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps> = React.forwardRef((props, ref) => {\n  const state = useMenuSplitGroup_unstable(props, ref);\n\n  useMenuSplitGroupStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useMenuSplitGroupStyles_unstable')(state);\n\n  return renderMenuSplitGroup_unstable(state, useMenuSplitGroupContextValues(state));\n});\n\nMenuSplitGroup.displayName = 'MenuSplitGroup';\n"],"names":["React","useMenuSplitGroup_unstable","renderMenuSplitGroup_unstable","useMenuSplitGroupStyles_unstable","useCustomStyleHook_unstable","useMenuSplitGroupContextValues","MenuSplitGroup","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,8BAA8B,QAAQ,mCAAmC;AAElF;;CAEC,GACD,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQT,2BAA2BO,OAAOC;IAEhDN,iCAAiCO;IAEjCN,4BAA4B,oCAAoCM;IAEhE,OAAOR,8BAA8BQ,OAAOL,+BAA+BK;AAC7E,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuSplitGroup/MenuSplitGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuSplitGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MenuSplitGroup Props\n */\nexport type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots>;\n\n/**\n * State used in rendering MenuSplitGroup\n */\nexport type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots>;\n"],"names":[],"rangeMappings":";;","mappings":"AAWA;;CAEC,GACD,WAAsE"}
+{"version":3,"sources":["../src/components/MenuSplitGroup/MenuSplitGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { MenuSplitGroupContextValue } from '../../contexts/menuSplitGroupContext';\n\nexport type MenuSplitGroupSlots = {\n  root: Slot<'div'>;\n};\n\nexport type MenuSplitGroupContextValues = {\n  menuSplitGroup: MenuSplitGroupContextValue;\n};\n\n/**\n * MenuSplitGroup Props\n */\nexport type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots>;\n\n/**\n * State used in rendering MenuSplitGroup\n */\nexport type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots> &\n  Pick<MenuSplitGroupContextValue, 'setMultiline'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAgBA;;CAEC,GACD,WACmD"}

package/lib/components/MenuSplitGroup/renderMenuSplitGroup.js

@@ -1,8 +1,13 @@
   import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
+import { menuSplitGroupContextDefaultValue, MenuSplitGroupContextProvider } from '../../contexts/menuSplitGroupContext';
 /**
  * Render the final JSX of MenuSplitGroup
- */ export const renderMenuSplitGroup_unstable = (state)=>{
+ */ export const renderMenuSplitGroup_unstable = (state, contexts)=>{
     assertSlots(state);
-    return /*#__PURE__*/ _jsx(state.root, {});
+    var _contexts_menuSplitGroup;
+    return /*#__PURE__*/ _jsx(MenuSplitGroupContextProvider, {
+        value: (_contexts_menuSplitGroup = contexts === null || contexts === void 0 ? void 0 : contexts.menuSplitGroup) !== null && _contexts_menuSplitGroup !== void 0 ? _contexts_menuSplitGroup : menuSplitGroupContextDefaultValue,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
 };

package/lib/components/MenuSplitGroup/renderMenuSplitGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuSplitGroup/renderMenuSplitGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuSplitGroupState, MenuSplitGroupSlots } from './MenuSplitGroup.types';\n\n/**\n * Render the final JSX of MenuSplitGroup\n */\nexport const renderMenuSplitGroup_unstable = (state: MenuSplitGroupState) => {\n  assertSlots<MenuSplitGroupSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderMenuSplitGroup_unstable","state","root"],"rangeMappings":";;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CF,YAAiCE;IAEjC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
+{"version":3,"sources":["../src/components/MenuSplitGroup/renderMenuSplitGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuSplitGroupState, MenuSplitGroupSlots, MenuSplitGroupContextValues } from './MenuSplitGroup.types';\nimport { menuSplitGroupContextDefaultValue, MenuSplitGroupContextProvider } from '../../contexts/menuSplitGroupContext';\n\n/**\n * Render the final JSX of MenuSplitGroup\n */\nexport const renderMenuSplitGroup_unstable = (state: MenuSplitGroupState, contexts?: MenuSplitGroupContextValues) => {\n  assertSlots<MenuSplitGroupSlots>(state);\n\n  return (\n    <MenuSplitGroupContextProvider value={contexts?.menuSplitGroup ?? menuSplitGroupContextDefaultValue}>\n      <state.root />\n    </MenuSplitGroupContextProvider>\n  );\n};\n"],"names":["assertSlots","menuSplitGroupContextDefaultValue","MenuSplitGroupContextProvider","renderMenuSplitGroup_unstable","state","contexts","value","menuSplitGroup","root"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,iCAAiC,EAAEC,6BAA6B,QAAQ,uCAAuC;AAExH;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,OAA4BC;IACxEL,YAAiCI;QAGOC;IADxC,qBACE,KAACH;QAA8BI,OAAOD,CAAAA,2BAAAA,qBAAAA,+BAAAA,SAAUE,cAAc,cAAxBF,sCAAAA,2BAA4BJ;kBAChE,cAAA,KAACG,MAAMI,IAAI;;AAGjB,EAAE"}

package/lib/components/MenuSplitGroup/useMenuSplitGroup.js

@@ -3,6 +3,7 @@ import { getIntrinsicElementProps, getRTLSafeKey, useMergedRefs, slot } from '@f
 import { useFocusFinders } from '@fluentui/react-tabster';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';
+import { menuSplitGroupMultilineAttr } from './useMenuSplitGroupStyles.styles';
 /**
  * Create the state required to render MenuSplitGroup.
  *
@@ -17,6 +18,7 @@ import { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';
     const nextArrowKey = getRTLSafeKey(ArrowRight, dir);
     const prevArrowKey = getRTLSafeKey(ArrowLeft, dir);
     const { findNextFocusable, findPrevFocusable } = useFocusFinders();
+    const { multilineRef, setMultiline } = useHandleMultilineMenuItem();
     const onKeyDown = React.useCallback((e)=>{
         var _innerRef_current;
         const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
@@ -49,12 +51,13 @@ import { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';
         components: {
             root: 'div'
         },
+        setMultiline,
         root: slot.always(getIntrinsicElementProps('div', {
             role: 'group',
             // FIXME:
             // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
             // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-            ref: useMergedRefs(ref, innerRef),
+            ref: useMergedRefs(ref, innerRef, multilineRef),
             onKeyDown,
             ...props
         }), {
@@ -62,3 +65,30 @@ import { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';
         })
     };
 };
+/**
+ * Creates a callback that lets a multiline menu item child set an attribute on this component
+ * Children can mount before parents so we need to store the value and apply it when the parent is mounted
+ */ const useHandleMultilineMenuItem = ()=>{
+    const [handle] = React.useState(()=>{
+        let isMultiline = false;
+        let multilineNode = null;
+        function applyAttr() {
+            multilineNode === null || multilineNode === void 0 ? void 0 : multilineNode.toggleAttribute(menuSplitGroupMultilineAttr, isMultiline);
+        }
+        return {
+            multilineRef: (node)=>{
+                if (node) {
+                    multilineNode = node;
+                    applyAttr();
+                } else {
+                    multilineNode = null;
+                }
+            },
+            setMultiline: (value)=>{
+                isMultiline = value;
+                applyAttr();
+            }
+        };
+    });
+    return handle;
+};

package/lib/components/MenuSplitGroup/useMenuSplitGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, getRTLSafeKey, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { MenuSplitGroupProps, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render MenuSplitGroup.\n *\n * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,\n * before being passed to renderMenuSplitGroup_unstable.\n *\n * @param props - props from this instance of MenuSplitGroup\n * @param ref - reference to root HTMLElement of MenuSplitGroup\n */\nexport const useMenuSplitGroup_unstable = (\n  props: MenuSplitGroupProps,\n  ref: React.Ref<HTMLElement>,\n): MenuSplitGroupState => {\n  const innerRef = React.useRef<HTMLElement>();\n  const { dir, targetDocument } = useFluent();\n\n  const nextArrowKey = getRTLSafeKey(ArrowRight, dir);\n  const prevArrowKey = getRTLSafeKey(ArrowLeft, dir);\n\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const onKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      const activeElement = targetDocument?.activeElement;\n      if (!activeElement) {\n        return;\n      }\n\n      if (!innerRef.current?.contains(activeElement)) {\n        return;\n      }\n\n      if (e.key === nextArrowKey) {\n        const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        next?.focus();\n      }\n\n      if (e.key === prevArrowKey) {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    },\n    [findNextFocusable, findPrevFocusable, targetDocument, nextArrowKey, prevArrowKey],\n  );\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        role: 'group',\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        onKeyDown,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","getRTLSafeKey","useMergedRefs","slot","useFocusFinders","useFluent_unstable","useFluent","ArrowRight","ArrowLeft","useMenuSplitGroup_unstable","props","ref","innerRef","useRef","dir","targetDocument","nextArrowKey","prevArrowKey","findNextFocusable","findPrevFocusable","onKeyDown","useCallback","e","activeElement","current","contains","key","next","container","focus","prev","components","root","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AACzG,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,UAAU,EAAEC,SAAS,QAAQ,0BAA0B;AAEhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,WAAWb,MAAMc,MAAM;IAC7B,MAAM,EAAEC,GAAG,EAAEC,cAAc,EAAE,GAAGT;IAEhC,MAAMU,eAAef,cAAcM,YAAYO;IAC/C,MAAMG,eAAehB,cAAcO,WAAWM;IAE9C,MAAM,EAAEI,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGf;IAEjD,MAAMgB,YAAYrB,MAAMsB,WAAW,CACjC,CAACC;YAMMV;QALL,MAAMW,gBAAgBR,2BAAAA,qCAAAA,eAAgBQ,aAAa;QACnD,IAAI,CAACA,eAAe;YAClB;QACF;QAEA,IAAI,GAACX,oBAAAA,SAASY,OAAO,cAAhBZ,wCAAAA,kBAAkBa,QAAQ,CAACF,iBAAgB;YAC9C;QACF;QAEA,IAAID,EAAEI,GAAG,KAAKV,cAAc;YAC1B,MAAMW,OAAOT,kBAAkBK,eAA8B;gBAAEK,WAAWhB,SAASY,OAAO;YAAC;YAC3FG,iBAAAA,2BAAAA,KAAME,KAAK;QACb;QAEA,IAAIP,EAAEI,GAAG,KAAKT,cAAc;YAC1B,MAAMa,OAAOX,kBAAkBI,eAA8B;gBAAEK,WAAWhB,SAASY,OAAO;YAAC;YAC3FM,iBAAAA,2BAAAA,KAAMD,KAAK;QACb;IACF,GACA;QAACX;QAAmBC;QAAmBJ;QAAgBC;QAAcC;KAAa;IAGpF,OAAO;QACLc,YAAY;YACVC,MAAM;QACR;QACAA,MAAM7B,KAAK8B,MAAM,CACfjC,yBAAyB,OAAO;YAC9BkC,MAAM;YACN,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FvB,KAAKT,cAAcS,KAAKC;YACxBQ;YACA,GAAGV,KAAK;QACV,IACA;YAAEyB,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, getRTLSafeKey, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { MenuSplitGroupProps, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\nimport { menuSplitGroupMultilineAttr } from './useMenuSplitGroupStyles.styles';\n\n/**\n * Create the state required to render MenuSplitGroup.\n *\n * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,\n * before being passed to renderMenuSplitGroup_unstable.\n *\n * @param props - props from this instance of MenuSplitGroup\n * @param ref - reference to root HTMLElement of MenuSplitGroup\n */\nexport const useMenuSplitGroup_unstable = (\n  props: MenuSplitGroupProps,\n  ref: React.Ref<HTMLElement>,\n): MenuSplitGroupState => {\n  const innerRef = React.useRef<HTMLDivElement>();\n  const { dir, targetDocument } = useFluent();\n\n  const nextArrowKey = getRTLSafeKey(ArrowRight, dir);\n  const prevArrowKey = getRTLSafeKey(ArrowLeft, dir);\n\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n  const { multilineRef, setMultiline } = useHandleMultilineMenuItem();\n\n  const onKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      const activeElement = targetDocument?.activeElement;\n      if (!activeElement) {\n        return;\n      }\n\n      if (!innerRef.current?.contains(activeElement)) {\n        return;\n      }\n\n      if (e.key === nextArrowKey) {\n        const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        next?.focus();\n      }\n\n      if (e.key === prevArrowKey) {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    },\n    [findNextFocusable, findPrevFocusable, targetDocument, nextArrowKey, prevArrowKey],\n  );\n\n  return {\n    components: {\n      root: 'div',\n    },\n    setMultiline,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        role: 'group',\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef, multilineRef) as React.Ref<HTMLDivElement>,\n        onKeyDown,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n\n/**\n * Creates a callback that lets a multiline menu item child set an attribute on this component\n * Children can mount before parents so we need to store the value and apply it when the parent is mounted\n */\nconst useHandleMultilineMenuItem = () => {\n  const [handle] = React.useState(() => {\n    let isMultiline = false;\n    let multilineNode: HTMLElement | null = null;\n\n    function applyAttr() {\n      multilineNode?.toggleAttribute(menuSplitGroupMultilineAttr, isMultiline);\n    }\n\n    return {\n      multilineRef: (node: HTMLDivElement | null) => {\n        if (node) {\n          multilineNode = node;\n          applyAttr();\n        } else {\n          multilineNode = null;\n        }\n      },\n      setMultiline: (value: boolean) => {\n        isMultiline = value;\n        applyAttr();\n      },\n    };\n  });\n\n  return handle;\n};\n"],"names":["React","getIntrinsicElementProps","getRTLSafeKey","useMergedRefs","slot","useFocusFinders","useFluent_unstable","useFluent","ArrowRight","ArrowLeft","menuSplitGroupMultilineAttr","useMenuSplitGroup_unstable","props","ref","innerRef","useRef","dir","targetDocument","nextArrowKey","prevArrowKey","findNextFocusable","findPrevFocusable","multilineRef","setMultiline","useHandleMultilineMenuItem","onKeyDown","useCallback","e","activeElement","current","contains","key","next","container","focus","prev","components","root","always","role","elementType","handle","useState","isMultiline","multilineNode","applyAttr","toggleAttribute","node","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AACzG,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,UAAU,EAAEC,SAAS,QAAQ,0BAA0B;AAChE,SAASC,2BAA2B,QAAQ,mCAAmC;AAE/E;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,WAAWd,MAAMe,MAAM;IAC7B,MAAM,EAAEC,GAAG,EAAEC,cAAc,EAAE,GAAGV;IAEhC,MAAMW,eAAehB,cAAcM,YAAYQ;IAC/C,MAAMG,eAAejB,cAAcO,WAAWO;IAE9C,MAAM,EAAEI,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGhB;IACjD,MAAM,EAAEiB,YAAY,EAAEC,YAAY,EAAE,GAAGC;IAEvC,MAAMC,YAAYzB,MAAM0B,WAAW,CACjC,CAACC;YAMMb;QALL,MAAMc,gBAAgBX,2BAAAA,qCAAAA,eAAgBW,aAAa;QACnD,IAAI,CAACA,eAAe;YAClB;QACF;QAEA,IAAI,GAACd,oBAAAA,SAASe,OAAO,cAAhBf,wCAAAA,kBAAkBgB,QAAQ,CAACF,iBAAgB;YAC9C;QACF;QAEA,IAAID,EAAEI,GAAG,KAAKb,cAAc;YAC1B,MAAMc,OAAOZ,kBAAkBQ,eAA8B;gBAAEK,WAAWnB,SAASe,OAAO;YAAC;YAC3FG,iBAAAA,2BAAAA,KAAME,KAAK;QACb;QAEA,IAAIP,EAAEI,GAAG,KAAKZ,cAAc;YAC1B,MAAMgB,OAAOd,kBAAkBO,eAA8B;gBAAEK,WAAWnB,SAASe,OAAO;YAAC;YAC3FM,iBAAAA,2BAAAA,KAAMD,KAAK;QACb;IACF,GACA;QAACd;QAAmBC;QAAmBJ;QAAgBC;QAAcC;KAAa;IAGpF,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAd;QACAc,MAAMjC,KAAKkC,MAAM,CACfrC,yBAAyB,OAAO;YAC9BsC,MAAM;YACN,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5F1B,KAAKV,cAAcU,KAAKC,UAAUQ;YAClCG;YACA,GAAGb,KAAK;QACV,IACA;YAAE4B,aAAa;QAAM;IAEzB;AACF,EAAE;AAEF;;;CAGC,GACD,MAAMhB,6BAA6B;IACjC,MAAM,CAACiB,OAAO,GAAGzC,MAAM0C,QAAQ,CAAC;QAC9B,IAAIC,cAAc;QAClB,IAAIC,gBAAoC;QAExC,SAASC;YACPD,0BAAAA,oCAAAA,cAAeE,eAAe,CAACpC,6BAA6BiC;QAC9D;QAEA,OAAO;YACLrB,cAAc,CAACyB;gBACb,IAAIA,MAAM;oBACRH,gBAAgBG;oBAChBF;gBACF,OAAO;oBACLD,gBAAgB;gBAClB;YACF;YACArB,cAAc,CAACyB;gBACbL,cAAcK;gBACdH;YACF;QACF;IACF;IAEA,OAAOJ;AACT"}

package/lib/components/MenuSplitGroup/useMenuSplitGroupContextValues.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export const useMenuSplitGroupContextValues = (state)=>{
+    'use no memo';
+    return React.useMemo(()=>{
+        return {
+            menuSplitGroup: {
+                setMultiline: state.setMultiline
+            }
+        };
+    }, [
+        state.setMultiline
+    ]);
+};

package/lib/components/MenuSplitGroup/useMenuSplitGroupContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroupContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { MenuSplitGroupContextValues, MenuSplitGroupState } from './MenuSplitGroup.types';\n\nexport const useMenuSplitGroupContextValues = (state: MenuSplitGroupState): MenuSplitGroupContextValues => {\n  'use no memo';\n\n  return React.useMemo(() => {\n    return {\n      menuSplitGroup: {\n        setMultiline: state.setMultiline,\n      },\n    };\n  }, [state.setMultiline]);\n};\n"],"names":["React","useMenuSplitGroupContextValues","state","useMemo","menuSplitGroup","setMultiline"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,OAAOF,MAAMG,OAAO,CAAC;QACnB,OAAO;YACLC,gBAAgB;gBACdC,cAAcH,MAAMG,YAAY;YAClC;QACF;IACF,GAAG;QAACH,MAAMG,YAAY;KAAC;AACzB,EAAE"}

package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js

@@ -1,16 +1,22 @@
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';
+export const menuSplitGroupMultilineAttr = 'data-multiline';
 export const menuSplitGroupClassNames = {
   root: 'fui-MenuSplitGroup'
 };
 /**
  * Styles for the root slot
+ * TODO - remove the use of nested combinators to style child menu items
  */
 const useStyles = /*#__PURE__*/__styles({
   root: {
+    Bhlrgs3: "f1v24km9",
     mc9l5x: "f22iagw",
-    oe75ve: "f1mvlx34",
+    rue6gn: 0,
+    oe75ve: 0,
+    Bbblmiw: 0,
+    Bn2ps6a: "fa49so4",
     Bu15iap: ["fsdyxoe", "fuk6rhi"],
     B71tm0z: ["fn8z6db", "f1be8c1t"],
     Gjs4sj: ["f1vtn0lh", "f8hq2kl"],
@@ -20,7 +26,9 @@ const useStyles = /*#__PURE__*/__styles({
     Jberyy: "f92oj5h"
   }
 }, {
-  d: [".f22iagw{display:flex;}", ".f1mvlx34>.fui-MenuItem:nth-of-type(1){flex-grow:1;}", ".fsdyxoe>.fui-MenuItem:nth-of-type(2){border-top-left-radius:0;}", ".fuk6rhi>.fui-MenuItem:nth-of-type(2){border-top-right-radius:0;}", ".fn8z6db>.fui-MenuItem:nth-of-type(2){border-bottom-left-radius:0;}", ".f1be8c1t>.fui-MenuItem:nth-of-type(2){border-bottom-right-radius:0;}", ".f1vtn0lh>.fui-MenuItem:nth-of-type(2){padding-left:0;}", ".f8hq2kl>.fui-MenuItem:nth-of-type(2){padding-right:0;}", ".f7j48hl>.fui-MenuItem:nth-of-type(2)::before{content:\"\";}", ".f13du8c1>.fui-MenuItem:nth-of-type(2)::before{width:var(--strokeWidthThin);}", ".fe64lw1>.fui-MenuItem:nth-of-type(2)::before{height:20px;}", ".f92oj5h>.fui-MenuItem:nth-of-type(2)::before{background-color:var(--colorNeutralStroke1);}"]
+  d: [".f1v24km9[data-multiline]>.fui-MenuItem:nth-of-type(2){align-self:center;}", ".f22iagw{display:flex;}", [".fa49so4>.fui-MenuItem:nth-of-type(1){flex:1;}", {
+    p: -1
+  }], ".fsdyxoe>.fui-MenuItem:nth-of-type(2){border-top-left-radius:0;}", ".fuk6rhi>.fui-MenuItem:nth-of-type(2){border-top-right-radius:0;}", ".fn8z6db>.fui-MenuItem:nth-of-type(2){border-bottom-left-radius:0;}", ".f1be8c1t>.fui-MenuItem:nth-of-type(2){border-bottom-right-radius:0;}", ".f1vtn0lh>.fui-MenuItem:nth-of-type(2){padding-left:0;}", ".f8hq2kl>.fui-MenuItem:nth-of-type(2){padding-right:0;}", ".f7j48hl>.fui-MenuItem:nth-of-type(2)::before{content:\"\";}", ".f13du8c1>.fui-MenuItem:nth-of-type(2)::before{width:var(--strokeWidthThin);}", ".fe64lw1>.fui-MenuItem:nth-of-type(2)::before{height:20px;}", ".f92oj5h>.fui-MenuItem:nth-of-type(2)::before{background-color:var(--colorNeutralStroke1);}"]
 });
 /**
  * Apply styling to the MenuSplitGroup slots based on the state

package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","menuItemClassNames","menuSplitGroupClassNames","root","useStyles","mc9l5x","oe75ve","Bu15iap","B71tm0z","Gjs4sj","foni4y","Ie9k5m","f30fub","Jberyy","d","useMenuSplitGroupStyles_unstable","state","styles","className"],"sources":["useMenuSplitGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuSplitGroupClassNames = {\n    root: 'fui-MenuSplitGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n            flexGrow: 1\n        },\n        [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n            paddingLeft: 0,\n            '::before': {\n                content: '\"\"',\n                width: tokens.strokeWidthThin,\n                height: '20px',\n                backgroundColor: tokens.colorNeutralStroke1\n            }\n        }\n    }\n});\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */ export const useMenuSplitGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,kBAAkB,QAAQ,sCAAsC;AACzE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAkBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGnB,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACrG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","menuItemClassNames","menuSplitGroupMultilineAttr","menuSplitGroupClassNames","root","useStyles","Bhlrgs3","mc9l5x","rue6gn","oe75ve","Bbblmiw","Bn2ps6a","Bu15iap","B71tm0z","Gjs4sj","foni4y","Ie9k5m","f30fub","Jberyy","d","p","useMenuSplitGroupStyles_unstable","state","styles","className"],"sources":["useMenuSplitGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuSplitGroupMultilineAttr = 'data-multiline';\nexport const menuSplitGroupClassNames = {\n    root: 'fui-MenuSplitGroup'\n};\n/**\n * Styles for the root slot\n * TODO - remove the use of nested combinators to style child menu items\n */ const useStyles = makeStyles({\n    root: {\n        [`[${menuSplitGroupMultilineAttr}]`]: {\n            [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n                alignSelf: 'center'\n            }\n        },\n        display: 'flex',\n        [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n            flex: 1\n        },\n        [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n            paddingLeft: 0,\n            '::before': {\n                content: '\"\"',\n                width: tokens.strokeWidthThin,\n                height: '20px',\n                backgroundColor: tokens.colorNeutralStroke1\n            }\n        }\n    }\n});\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */ export const useMenuSplitGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,kBAAkB,QAAQ,sCAAsC;AACzE,OAAO,MAAMC,2BAA2B,GAAG,gBAAgB;AAC3D,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAuBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1BiB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGzB,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;EACrG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/contexts/menuSplitGroupContext.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+/**
+ * Context used communicate with a child menu item that it is a trigger for a submenu
+ */ const MenuSplitGroupContext = React.createContext(undefined);
+export const menuSplitGroupContextDefaultValue = {
+    setMultiline: ()=>null
+};
+export const MenuSplitGroupContextProvider = MenuSplitGroupContext.Provider;
+export const useMenuSplitGroupContext_unstable = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(MenuSplitGroupContext)) !== null && _React_useContext !== void 0 ? _React_useContext : menuSplitGroupContextDefaultValue;
+};
+export const useIsInMenuSplitGroup = ()=>{
+    const context = useMenuSplitGroupContext_unstable();
+    return context !== menuSplitGroupContextDefaultValue;
+};

package/lib/contexts/menuSplitGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/contexts/menuSplitGroupContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type MenuSplitGroupContextValue = {\n  setMultiline: (multiline: boolean) => void;\n};\n\n/**\n * Context used communicate with a child menu item that it is a trigger for a submenu\n */\nconst MenuSplitGroupContext = React.createContext<MenuSplitGroupContextValue | undefined>(\n  undefined,\n) as React.Context<MenuSplitGroupContextValue>;\n\nexport const menuSplitGroupContextDefaultValue = {\n  setMultiline: () => null,\n};\n\nexport const MenuSplitGroupContextProvider = MenuSplitGroupContext.Provider;\nexport const useMenuSplitGroupContext_unstable = () =>\n  React.useContext(MenuSplitGroupContext) ?? menuSplitGroupContextDefaultValue;\n\nexport const useIsInMenuSplitGroup = () => {\n  const context = useMenuSplitGroupContext_unstable();\n  return context !== menuSplitGroupContextDefaultValue;\n};\n"],"names":["React","MenuSplitGroupContext","createContext","undefined","menuSplitGroupContextDefaultValue","setMultiline","MenuSplitGroupContextProvider","Provider","useMenuSplitGroupContext_unstable","useContext","useIsInMenuSplitGroup","context"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAM/B;;CAEC,GACD,MAAMC,wBAAwBD,MAAME,aAAa,CAC/CC;AAGF,OAAO,MAAMC,oCAAoC;IAC/CC,cAAc,IAAM;AACtB,EAAE;AAEF,OAAO,MAAMC,gCAAgCL,sBAAsBM,QAAQ,CAAC;AAC5E,OAAO,MAAMC,oCAAoC;QAC/CR;WAAAA,CAAAA,oBAAAA,MAAMS,UAAU,CAACR,oCAAjBD,+BAAAA,oBAA2CI;AAAgC,EAAE;AAE/E,OAAO,MAAMM,wBAAwB;IACnC,MAAMC,UAAUH;IAChB,OAAOG,YAAYP;AACrB,EAAE"}

package/lib-commonjs/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":""}
+{"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":""}

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

@@ -16,7 +16,12 @@ const renderMenuItem_unstable = (state)=>{
         children: [
             state.checkmark && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.checkmark, {}),
             state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
-            state.content && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.content, {}),
+            state.content && /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.content, {
+                children: [
+                    state.content.children,
+                    state.subText && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.subText, {})
+                ]
+            }),
             state.secondaryContent && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.secondaryContent, {}),
             state.submenuIndicator && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.submenuIndicator, {})
         ]

package/lib-commonjs/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":["renderMenuItem_unstable","state","assertSlots","_jsxs","root","checkmark","_jsx","icon","content","secondaryContent","submenuIndicator"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;4BAPb;gCAC4B;AAMrB,MAAMA,0BAA0B,CAACC;IACtCC,IAAAA,2BAAAA,EAA2BD;IAE3B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,SAAS,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,SAAS,EAAA,CAAA;YACnCJ,MAAMM,IAAI,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACL,MAAMM,IAAI,EAAA,CAAA;YACzBN,MAAMO,OAAO,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACL,MAAMO,OAAO,EAAA,CAAA;YAC/BP,MAAMQ,gBAAgB,IAAA,WAAA,GAAIH,IAAAA,eAAA,EAACL,MAAMQ,gBAAgB,EAAA,CAAA;YACjDR,MAAMS,gBAAgB,IAAA,WAAA,GAAIJ,IAAAA,eAAA,EAACL,MAAMS,gBAAgB,EAAA,CAAA;;;AAGxD"}
+{"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":["renderMenuItem_unstable","state","assertSlots","_jsxs","root","checkmark","_jsx","icon","content","children","subText","secondaryContent","submenuIndicator"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;4BAPb;gCAC4B;AAMrB,MAAMA,0BAA0B,CAACC;IACtCC,IAAAA,2BAAAA,EAA2BD;IAE3B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,SAAS,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,SAAS,EAAA,CAAA;YACnCJ,MAAMM,IAAI,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACL,MAAMM,IAAI,EAAA,CAAA;YACzBN,MAAMO,OAAO,IAAA,WAAA,GACZL,IAAAA,gBAAA,EAACF,MAAMO,OAAO,EAAA;;oBACXP,MAAMO,OAAO,CAACC,QAAQ;oBACtBR,MAAMS,OAAO,IAAA,WAAA,GAAIJ,IAAAA,eAAA,EAACL,MAAMS,OAAO,EAAA,CAAA;;;YAGnCT,MAAMU,gBAAgB,IAAA,WAAA,GAAIL,IAAAA,eAAA,EAACL,MAAMU,gBAAgB,EAAA,CAAA;YACjDV,MAAMW,gBAAgB,IAAA,WAAA,GAAIN,IAAAA,eAAA,EAACL,MAAMW,gBAAgB,EAAA,CAAA;;;AAGxD"}

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

@@ -19,15 +19,21 @@ const _menuListContext = require("../../contexts/menuListContext");
 const _menuContext = require("../../contexts/menuContext");
 const _reactaria = require("@fluentui/react-aria");
 const _keyboardkeys = require("@fluentui/keyboard-keys");
+const _menuSplitGroupContext = require("../../contexts/menuSplitGroupContext");
 const ChevronRightIcon = (0, _reacticons.bundleIcon)(_reacticons.ChevronRightFilled, _reacticons.ChevronRightRegular);
 const ChevronLeftIcon = (0, _reacticons.bundleIcon)(_reacticons.ChevronLeftFilled, _reacticons.ChevronLeftRegular);
 const useMenuItem_unstable = (props, ref)=>{
     const isSubmenuTrigger = (0, _menuTriggerContext.useMenuTriggerContext_unstable)();
     const persistOnClickContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.persistOnItemClick);
     const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;
-    const hasIcons = (0, _menuListContext.useMenuListContext_unstable)((context)=>context.hasIcons);
-    const hasCheckmarks = (0, _menuListContext.useMenuListContext_unstable)((context)=>context.hasCheckmarks);
+    const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({
+        hasSubmenu
+    });
     const setOpen = (0, _menuContext.useMenuContext_unstable)((context)=>context.setOpen);
+    useNotifySplitItemMultiline({
+        multiline: !!props.subText,
+        hasSubmenu
+    });
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
     const innerRef = _react.useRef(null);
     const dismissedWithKeyboardRef = _react.useRef(false);
@@ -41,7 +47,8 @@ const useMenuItem_unstable = (props, ref)=>{
             checkmark: 'span',
             submenuIndicator: 'span',
             content: 'span',
-            secondaryContent: 'span'
+            secondaryContent: 'span',
+            subText: 'span'
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, (0, _reactaria.useARIAButtonProps)(as, {
             role: 'menuitem',
@@ -56,10 +63,13 @@ const useMenuItem_unstable = (props, ref)=>{
                     dismissedWithKeyboardRef.current = true;
                 }
             }),
-            onMouseEnter: (0, _reactutilities.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: (0, _reactutilities.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: (0, _reactutilities.useEventCallback)((event)=>{
                 var _props_onClick;
@@ -102,8 +112,38 @@ const useMenuItem_unstable = (props, ref)=>{
         }),
         secondaryContent: _reactutilities.slot.optional(props.secondaryContent, {
             elementType: 'span'
+        }),
+        subText: _reactutilities.slot.optional(props.subText, {
+            elementType: 'span'
         })
     };
     (0, _useCharacterSearch.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 = (0, _menuSplitGroupContext.useIsInMenuSplitGroup)() && hasSubmenu;
+    const { setMultiline } = (0, _menuSplitGroupContext.useMenuSplitGroupContext_unstable)();
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        if (!isSplitItemTrigger) {
+            setMultiline(multiline);
+        }
+    }, [
+        setMultiline,
+        multiline,
+        isSplitItemTrigger
+    ]);
+};
+const useIconAndCheckmarkAlignment = (options)=>{
+    const { hasSubmenu } = options;
+    const hasIcons = (0, _menuListContext.useMenuListContext_unstable)((context)=>context.hasIcons);
+    const hasCheckmarks = (0, _menuListContext.useMenuListContext_unstable)((context)=>context.hasCheckmarks);
+    const isSplitItemTrigger = (0, _menuSplitGroupContext.useIsInMenuSplitGroup)() && hasSubmenu;
+    return {
+        hasIcons: hasIcons && !isSplitItemTrigger,
+        hasCheckmarks: hasCheckmarks && !isSplitItemTrigger
+    };
+};

package/lib-commonjs/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":["useMenuItem_unstable","ChevronRightIcon","bundleIcon","ChevronRightFilled","ChevronRightRegular","ChevronLeftIcon","ChevronLeftFilled","ChevronLeftRegular","props","ref","isSubmenuTrigger","useMenuTriggerContext_unstable","persistOnClickContext","useMenuContext_unstable","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","hasIcons","useMenuListContext_unstable","hasCheckmarks","setOpen","dir","useFluent","innerRef","React","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","content","secondaryContent","slot","always","getIntrinsicElementProps","useARIAButtonProps","role","disabledFocusable","useMergedRefs","onKeyDown","useEventCallback","event","isDefaultPrevented","key","Space","Enter","current","onMouseEnter","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children","createElement","useCharacterSearch"],"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":["useMenuItem_unstable","ChevronRightIcon","bundleIcon","ChevronRightFilled","ChevronRightRegular","ChevronLeftIcon","ChevronLeftFilled","ChevronLeftRegular","props","ref","isSubmenuTrigger","useMenuTriggerContext_unstable","persistOnClickContext","useMenuContext_unstable","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","useNotifySplitItemMultiline","multiline","subText","dir","useFluent","innerRef","React","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","content","secondaryContent","slot","always","getIntrinsicElementProps","useARIAButtonProps","role","disabledFocusable","useMergedRefs","onKeyDown","useEventCallback","event","isDefaultPrevented","key","Space","Enter","current","onMouseMove","currentTarget","ownerDocument","activeElement","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children","createElement","useCharacterSearch","options","isSplitItemTrigger","useIsInMenuSplitGroup","setMultiline","useMenuSplitGroupContext_unstable","useIsomorphicLayoutEffect","useMenuListContext_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}