@fluentui/react-menu 9.24.1 → 9.25.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../index';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\n\nexport const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n  root: 'fui-MenuItemRadio',\n  icon: 'fui-MenuItemRadio__icon',\n  checkmark: 'fui-MenuItemRadio__checkmark',\n  content: 'fui-MenuItemRadio__content',\n  secondaryContent: 'fui-MenuItemRadio__secondaryContent',\n  subText: 'fui-MenuItemRadio__subText',\n};\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState): void => {\n  'use no memo';\n\n  state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemRadioClassNames.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);\n  }\n\n  if (state.subText) {\n    state.subText.className = mergeClasses(menuItemRadioClassNames.subText, state.subText.className);\n  }\n\n  useMenuItemStyles_unstable(state);\n  useCheckmarkStyles_unstable(state);\n};\n"],"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemRadioClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemRadioStyles_unstable","state","className"],"mappings":"AAAA;;;;;;;;;;;;IASaG,uBAAAA;;;IASAO,+BAAAA;;;;uBAhBgB,iBAAiB;uBACF,yBAAyB;yCAC1B,uCAAuC;AAK3E,gCAAyF;IAC9FN,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX,EAAE;AAEK,wCAAwC,CAACE;IAC9C;IAEAA,MAAMP,IAAI,CAACQ,SAAS,OAAGZ,mBAAAA,EAAaG,wBAAwBC,IAAI,EAAEO,MAAMP,IAAI,CAACQ,SAAS;IAEtF,IAAID,MAAMJ,OAAO,EAAE;QACjBI,MAAMJ,OAAO,CAACK,SAAS,OAAGZ,mBAAAA,EAAaG,wBAAwBI,OAAO,EAAEI,MAAMJ,OAAO,CAACK,SAAS;IACjG;IAEA,IAAID,MAAMH,gBAAgB,EAAE;QAC1BG,MAAMH,gBAAgB,CAACI,SAAS,OAAGZ,mBAAAA,EACjCG,wBAAwBK,gBAAgB,EACxCG,MAAMH,gBAAgB,CAACI,SAAS;IAEpC;IAEA,IAAID,MAAMN,IAAI,EAAE;QACdM,MAAMN,IAAI,CAACO,SAAS,OAAGZ,mBAAAA,EAAaG,wBAAwBE,IAAI,EAAEM,MAAMN,IAAI,CAACO,SAAS;IACxF;IAEA,IAAID,MAAML,SAAS,EAAE;QACnBK,MAAML,SAAS,CAACM,SAAS,OAAGZ,mBAAAA,EAAaG,wBAAwBG,SAAS,EAAEK,MAAML,SAAS,CAACM,SAAS;IACvG;IAEA,IAAID,MAAMF,OAAO,EAAE;QACjBE,MAAMF,OAAO,CAACG,SAAS,GAAGZ,uBAAAA,EAAaG,wBAAwBM,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACjG;QAEAV,mDAAAA,EAA2BS;QAC3BV,kCAAAA,EAA4BU;AAC9B,EAAE"}
+{"version":3,"sources":["../src/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../index';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\n\nexport const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n  root: 'fui-MenuItemRadio',\n  icon: 'fui-MenuItemRadio__icon',\n  checkmark: 'fui-MenuItemRadio__checkmark',\n  content: 'fui-MenuItemRadio__content',\n  secondaryContent: 'fui-MenuItemRadio__secondaryContent',\n  subText: 'fui-MenuItemRadio__subText',\n};\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState): void => {\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);\n\n  if (state.content) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);\n  }\n\n  if (state.secondaryContent) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.secondaryContent.className = mergeClasses(\n      menuItemRadioClassNames.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);\n  }\n\n  if (state.checkmark) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);\n  }\n\n  if (state.subText) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.subText.className = mergeClasses(menuItemRadioClassNames.subText, state.subText.className);\n  }\n\n  useMenuItemStyles_unstable(state);\n  useCheckmarkStyles_unstable(state);\n};\n"],"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemRadioClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemRadioStyles_unstable","state","className"],"mappings":"AAAA;;;;;;;;;;;;IASaG,uBAAAA;;;IASAO,+BAAAA;;;;uBAhBgB,iBAAiB;uBACF,yBAAyB;yCAC1B,uCAAuC;AAK3E,gCAAyF;IAC9FN,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX,EAAE;AAEK,wCAAwC,CAACE;IAC9C,oDAAoD;IACpDA,MAAMP,IAAI,CAACQ,SAAS,OAAGZ,mBAAAA,EAAaG,wBAAwBC,IAAI,EAAEO,MAAMP,IAAI,CAACQ,SAAS;IAEtF,IAAID,MAAMJ,OAAO,EAAE;QACjB,oDAAoD;QACpDI,MAAMJ,OAAO,CAACK,SAAS,OAAGZ,mBAAAA,EAAaG,wBAAwBI,OAAO,EAAEI,MAAMJ,OAAO,CAACK,SAAS;IACjG;IAEA,IAAID,MAAMH,gBAAgB,EAAE;QAC1B,oDAAoD;QACpDG,MAAMH,gBAAgB,CAACI,SAAS,OAAGZ,mBAAAA,EACjCG,wBAAwBK,gBAAgB,EACxCG,MAAMH,gBAAgB,CAACI,SAAS;IAEpC;IAEA,IAAID,MAAMN,IAAI,EAAE;QACd,oDAAoD;QACpDM,MAAMN,IAAI,CAACO,SAAS,OAAGZ,mBAAAA,EAAaG,wBAAwBE,IAAI,EAAEM,MAAMN,IAAI,CAACO,SAAS;IACxF;IAEA,IAAID,MAAML,SAAS,EAAE;QACnB,oDAAoD;QACpDK,MAAML,SAAS,CAACM,SAAS,OAAGZ,mBAAAA,EAAaG,wBAAwBG,SAAS,EAAEK,MAAML,SAAS,CAACM,SAAS;IACvG;IAEA,IAAID,MAAMF,OAAO,EAAE;QACjB,oDAAoD;QACpDE,MAAMF,OAAO,CAACG,SAAS,OAAGZ,mBAAAA,EAAaG,wBAAwBM,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACjG;QAEAV,mDAAAA,EAA2BS;QAC3BV,kCAAAA,EAA4BU;AAC9B,EAAE"}

package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchProps, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemCheckboxBase_unstable } from '../MenuItemCheckbox/useMenuItemCheckbox';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { circleFilledClassName } from './useMenuItemSwitchStyles.styles';\n\n/**\n * Create the state required to render MenuItemSwitch.\n *\n * The returned state can be modified with hooks such as useMenuItemSwitchStyles_unstable,\n * before being passed to renderMenuItemSwitch_unstable.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitch_unstable = (\n  props: MenuItemSwitchProps,\n  ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n  const state = useMenuItemSwitchBase_unstable(props, ref);\n\n  // Set default icon for switch indicator\n  if (state.switchIndicator) {\n    state.switchIndicator.children ??= <CircleFilled className={circleFilledClassName} />;\n  }\n\n  return state;\n};\n\n/**\n * Base hook for MenuItemSwitch component, produces state required to render the component.\n * It doesn't set any design-related props specific to MenuItemSwitch.\n *\n * @internal\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitchBase_unstable = (\n  props: MenuItemSwitchProps,\n  ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n  const baseState = useMenuItemCheckboxBase_unstable(props, ref);\n  return {\n    ...baseState,\n    switchIndicator: slot.optional(props.switchIndicator, {\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...baseState.components,\n      switchIndicator: 'span',\n    },\n  };\n};\n"],"names":["React","slot","useMenuItemCheckboxBase_unstable","CircleFilled","circleFilledClassName","useMenuItemSwitch_unstable","props","ref","state","useMenuItemSwitchBase_unstable","switchIndicator","children","className","baseState","optional","renderByDefault","elementType","components"],"mappings":"AAAA;;;;;;;;;;;;IAwCaS,8BAAAA;;;8BAtBAJ;;;;;iEAhBU,QAAQ;gCACV,4BAA4B;qCAEA,0CAA0C;4BAC9D,wBAAwB;+CACf,mCAAmC;AAWlE,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,QAAQC,+BAA+BH,OAAOC;IAEpD,wCAAwC;IACxC,IAAIC,MAAME,eAAe,EAAE;YACzBF;;QAAAA,CAAAA,YAAAA,CAAAA,yBAAAA,MAAME,eAAAA,AAAe,EAACC,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAtBH,uBAAsBG,QAAAA,GAAAA,WAAAA,GAAa,OAAA,aAAA,CAACR,wBAAAA,EAAAA;YAAaS,WAAWR,oDAAAA;;IAC9D;IAEA,OAAOI;AACT,EAAE;AAUK,uCAAuC,CAC5CF,OACAC;IAEA,MAAMM,gBAAYX,qDAAAA,EAAiCI,OAAOC;IAC1D,OAAO;QACL,GAAGM,SAAS;QACZH,iBAAiBT,oBAAAA,CAAKa,QAAQ,CAACR,MAAMI,eAAe,EAAE;YACpDK,iBAAiB;YACjBC,aAAa;QACf;QACAC,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,UAAUI,UAAU;YACvBP,iBAAiB;QACnB;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchProps, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemCheckboxBase_unstable } from '../MenuItemCheckbox/useMenuItemCheckbox';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { circleFilledClassName } from './useMenuItemSwitchStyles.styles';\n\n/**\n * Create the state required to render MenuItemSwitch.\n *\n * The returned state can be modified with hooks such as useMenuItemSwitchStyles_unstable,\n * before being passed to renderMenuItemSwitch_unstable.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitch_unstable = (\n  props: MenuItemSwitchProps,\n  ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n  const state = useMenuItemSwitchBase_unstable(props, ref);\n\n  // Set default icon for switch indicator\n  if (state.switchIndicator) {\n    state.switchIndicator.children ??= <CircleFilled className={circleFilledClassName} />;\n  }\n\n  return state;\n};\n\n/**\n * Base hook for MenuItemSwitch component, produces state required to render the component.\n * It doesn't set any design-related props specific to MenuItemSwitch.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitchBase_unstable = (\n  props: MenuItemSwitchProps,\n  ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n  const baseState = useMenuItemCheckboxBase_unstable(props, ref);\n  return {\n    ...baseState,\n    switchIndicator: slot.optional(props.switchIndicator, {\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...baseState.components,\n      switchIndicator: 'span',\n    },\n  };\n};\n"],"names":["React","slot","useMenuItemCheckboxBase_unstable","CircleFilled","circleFilledClassName","useMenuItemSwitch_unstable","props","ref","state","useMenuItemSwitchBase_unstable","switchIndicator","children","className","baseState","optional","renderByDefault","elementType","components"],"mappings":"AAAA;;;;;;;;;;;;IAuCaS,8BAAAA;;;8BArBAJ;;;;;iEAhBU,QAAQ;gCACV,4BAA4B;qCAEA,0CAA0C;4BAC9D,wBAAwB;+CACf,mCAAmC;AAWlE,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,QAAQC,+BAA+BH,OAAOC;IAEpD,wCAAwC;IACxC,IAAIC,MAAME,eAAe,EAAE;YACzBF;;QAAAA,CAAAA,YAAAA,CAAAA,yBAAAA,MAAME,eAAAA,AAAe,EAACC,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAtBH,uBAAsBG,QAAAA,GAAAA,WAAAA,GAAa,OAAA,aAAA,CAACR,wBAAAA,EAAAA;YAAaS,WAAWR,oDAAAA;;IAC9D;IAEA,OAAOI;AACT,EAAE;AASK,uCAAuC,CAC5CF,OACAC;IAEA,MAAMM,gBAAYX,qDAAAA,EAAiCI,OAAOC;IAC1D,OAAO;QACL,GAAGM,SAAS;QACZH,iBAAiBT,oBAAAA,CAAKa,QAAQ,CAACR,MAAMI,eAAe,EAAE;YACpDK,iBAAiB;YACjBC,aAAa;QACf;QACAC,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,UAAUI,UAAU;YACvBP,iBAAiB;QACnB;IACF;AACF,EAAE"}

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

@@ -133,26 +133,31 @@ const useMultilineStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useMenuItemSwitchStyles_unstable = (state)=>{
-    'use no memo';
     const { checked, subText } = state;
     const multiline = !!subText;
     const switchIndicatorStyles = useSwitchIndicatorStyles();
     const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();
     const multilineStyles = useMultilineStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.root, state.root.className);
     if (state.content) {
+        // eslint-disable-next-line react-hooks/immutability
         state.content.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.content, state.content.className);
     }
     if (state.secondaryContent) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondaryContent.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);
     }
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.icon, state.icon.className);
     }
     if (state.subText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.subText.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.subText, state.subText.className);
     }
     if (state.switchIndicator) {
+        // eslint-disable-next-line react-hooks/immutability
         state.switchIndicator.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);
     }
     (0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)({
@@ -166,6 +171,7 @@ const useMenuItemSwitchStyles_unstable = (state)=>{
         checkmark: undefined,
         submenuIndicator: undefined,
         hasSubmenu: false,
+        submenuOpen: false,
         persistOnClick: true
     });
     return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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            // eslint-disable-next-line @typescript-eslint/no-deprecated\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"],"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"],"mappings":"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"}
+{"version":3,"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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    const { checked, subText } = state;\n    const multiline = !!subText;\n    const switchIndicatorStyles = useSwitchIndicatorStyles();\n    const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n    const multilineStyles = useMultilineStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n    if (state.content) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n    }\n    if (state.secondaryContent) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n    }\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n    }\n    if (state.subText) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n    }\n    if (state.switchIndicator) {\n        // eslint-disable-next-line react-hooks/immutability\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            // eslint-disable-next-line @typescript-eslint/no-deprecated\n            ...state.components,\n            checkmark: 'span',\n            submenuIndicator: 'span'\n        },\n        checkmark: undefined,\n        submenuIndicator: undefined,\n        hasSubmenu: false,\n        submenuOpen: false,\n        persistOnClick: true\n    });\n    return state;\n};\n"],"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","submenuOpen","persistOnClick"],"mappings":"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"}

package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js

@@ -98,26 +98,31 @@ const useMultilineStyles = (0, _react.makeStyles)({
     }
 });
 const useMenuItemSwitchStyles_unstable = (state)=>{
-    'use no memo';
     const { checked, subText } = state;
     const multiline = !!subText;
     const switchIndicatorStyles = useSwitchIndicatorStyles();
     const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();
     const multilineStyles = useMultilineStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.root, state.root.className);
     if (state.content) {
+        // eslint-disable-next-line react-hooks/immutability
         state.content.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.content, state.content.className);
     }
     if (state.secondaryContent) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondaryContent.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);
     }
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.icon, state.icon.className);
     }
     if (state.subText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.subText.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.subText, state.subText.className);
     }
     if (state.switchIndicator) {
+        // eslint-disable-next-line react-hooks/immutability
         state.switchIndicator.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);
     }
     (0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)({
@@ -131,6 +136,7 @@ const useMenuItemSwitchStyles_unstable = (state)=>{
         checkmark: undefined,
         submenuIndicator: undefined,
         hasSubmenu: false,
+        submenuOpen: false,
         persistOnClick: true
     });
     return state;

package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { type SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchSlots, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\n\nexport const menuItemSwitchClassNames: SlotClassNames<MenuItemSwitchSlots> = {\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};\n\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\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\n  '@media screen and (prefers-reduced-motion: reduce)': {\n    transitionDuration: '0.01ms',\n  },\n\n  color: tokens.colorNeutralStrokeAccessible,\n  ':hover': {\n    color: tokens.colorNeutralStrokeAccessibleHover,\n    borderColor: tokens.colorNeutralStrokeAccessibleHover,\n  },\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\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n  },\n});\n\nconst useSwitchIndicatorStyles = makeStyles({\n  checked: {\n    [`& .${circleFilledClassName}`]: {\n      transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n    },\n\n    backgroundColor: tokens.colorCompoundBrandBackground,\n    color: tokens.colorNeutralForegroundInverted,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n\n    ':hover': {\n      color: tokens.colorNeutralForegroundInverted,\n      backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n\n    ':hover:active': {\n      color: tokens.colorNeutralForegroundInverted,\n      backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n});\n\nconst useMultilineStyles = makeStyles({\n  switch: {\n    alignSelf: 'center',\n  },\n});\n\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */\nexport const useMenuItemSwitchStyles_unstable = (state: MenuItemSwitchState): MenuItemSwitchState => {\n  'use no memo';\n\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\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemSwitchClassNames.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n  }\n\n  if (state.subText) {\n    state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n  }\n\n  if (state.switchIndicator) {\n    state.switchIndicator.className = mergeClasses(\n      menuItemSwitchClassNames.switchIndicator,\n      switchIndicatorBaseStyles,\n      checked && switchIndicatorStyles.checked,\n      state.switchIndicator.className,\n      multiline && multilineStyles.switch,\n    );\n  }\n\n  useMenuItemStyles_unstable({\n    ...state,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      checkmark: 'span',\n      submenuIndicator: 'span',\n    },\n    checkmark: undefined,\n    submenuIndicator: undefined,\n    hasSubmenu: false,\n    persistOnClick: true,\n  });\n\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","subText","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralStrokeAccessible","lineHeight","boxSizing","fill","flexShrink","fontSize","height","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","marginRight","spacingHorizontalXS","color","colorNeutralStrokeAccessibleHover","borderColor","colorNeutralStrokeAccessiblePressed","useSwitchIndicatorStyles","checked","transform","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","useMultilineStyles","switch","alignSelf","useMenuItemSwitchStyles_unstable","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"mappings":"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"}
+{"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { type SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchSlots, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\n\nexport const menuItemSwitchClassNames: SlotClassNames<MenuItemSwitchSlots> = {\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};\n\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\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\n  '@media screen and (prefers-reduced-motion: reduce)': {\n    transitionDuration: '0.01ms',\n  },\n\n  color: tokens.colorNeutralStrokeAccessible,\n  ':hover': {\n    color: tokens.colorNeutralStrokeAccessibleHover,\n    borderColor: tokens.colorNeutralStrokeAccessibleHover,\n  },\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\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n  },\n});\n\nconst useSwitchIndicatorStyles = makeStyles({\n  checked: {\n    [`& .${circleFilledClassName}`]: {\n      transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n    },\n\n    backgroundColor: tokens.colorCompoundBrandBackground,\n    color: tokens.colorNeutralForegroundInverted,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n\n    ':hover': {\n      color: tokens.colorNeutralForegroundInverted,\n      backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n\n    ':hover:active': {\n      color: tokens.colorNeutralForegroundInverted,\n      backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n});\n\nconst useMultilineStyles = makeStyles({\n  switch: {\n    alignSelf: 'center',\n  },\n});\n\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */\nexport const useMenuItemSwitchStyles_unstable = (state: MenuItemSwitchState): MenuItemSwitchState => {\n  const { checked, subText } = state;\n  const multiline = !!subText;\n  const switchIndicatorStyles = useSwitchIndicatorStyles();\n  const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n  const multilineStyles = useMultilineStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n  if (state.content) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n  }\n\n  if (state.secondaryContent) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.secondaryContent.className = mergeClasses(\n      menuItemSwitchClassNames.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n  }\n\n  if (state.subText) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n  }\n\n  if (state.switchIndicator) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.switchIndicator.className = mergeClasses(\n      menuItemSwitchClassNames.switchIndicator,\n      switchIndicatorBaseStyles,\n      checked && switchIndicatorStyles.checked,\n      state.switchIndicator.className,\n      multiline && multilineStyles.switch,\n    );\n  }\n\n  useMenuItemStyles_unstable({\n    ...state,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      checkmark: 'span',\n      submenuIndicator: 'span',\n    },\n    checkmark: undefined,\n    submenuIndicator: undefined,\n    hasSubmenu: false,\n    submenuOpen: false,\n    persistOnClick: true,\n  });\n\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","subText","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralStrokeAccessible","lineHeight","boxSizing","fill","flexShrink","fontSize","height","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","marginRight","spacingHorizontalXS","color","colorNeutralStrokeAccessibleHover","borderColor","colorNeutralStrokeAccessiblePressed","useSwitchIndicatorStyles","checked","transform","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","useMultilineStyles","switch","alignSelf","useMenuItemSwitchStyles_unstable","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","components","checkmark","submenuIndicator","undefined","hasSubmenu","submenuOpen","persistOnClick"],"mappings":"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"}

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

@@ -18,6 +18,9 @@ _export(exports, {
     renderMenuList_unstable: function() {
         return _renderMenuList.renderMenuList_unstable;
     },
+    useMenuListBase_unstable: function() {
+        return _useMenuList.useMenuListBase_unstable;
+    },
     useMenuListContextValues_unstable: function() {
         return _useMenuListContextValues.useMenuListContextValues_unstable;
     },

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuList/index.ts"],"sourcesContent":["export { MenuList } from './MenuList';\nexport type {\n  MenuCheckedValueChangeData,\n  MenuCheckedValueChangeEvent,\n  MenuListContextValues,\n  MenuListProps,\n  MenuListSlots,\n  MenuListState,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  UninitializedMenuListState,\n} from './MenuList.types';\nexport { renderMenuList_unstable } from './renderMenuList';\nexport { useMenuList_unstable } from './useMenuList';\nexport { menuListClassNames, useMenuListStyles_unstable } from './useMenuListStyles.styles';\nexport { useMenuListContextValues_unstable } from './useMenuListContextValues';\n"],"names":["MenuList","renderMenuList_unstable","useMenuList_unstable","menuListClassNames","useMenuListStyles_unstable","useMenuListContextValues_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAaRG,2CAAkB;;;eAFlBF,uCAAuB;;;eAGvBI,2DAAiC;;;eADbD,mDAA0B;;;eAD9CF,iCAAoB;;;0BAZJ,aAAa;gCAWE,mBAAmB;6BACtB,gBAAgB;yCACU,6BAA6B;0CAC1C,6BAA6B"}
+{"version":3,"sources":["../src/components/MenuList/index.ts"],"sourcesContent":["export { MenuList } from './MenuList';\nexport type {\n  MenuCheckedValueChangeData,\n  MenuCheckedValueChangeEvent,\n  MenuListContextValues,\n  MenuListProps,\n  MenuListSlots,\n  MenuListState,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  UninitializedMenuListState,\n} from './MenuList.types';\nexport { renderMenuList_unstable } from './renderMenuList';\nexport { useMenuList_unstable, useMenuListBase_unstable } from './useMenuList';\nexport { menuListClassNames, useMenuListStyles_unstable } from './useMenuListStyles.styles';\nexport { useMenuListContextValues_unstable } from './useMenuListContextValues';\n"],"names":["MenuList","renderMenuList_unstable","useMenuList_unstable","useMenuListBase_unstable","menuListClassNames","useMenuListStyles_unstable","useMenuListContextValues_unstable"],"mappings":";;;;;;;;;;;IAASA;iCAAQ;;IAaRI;0DAAkB;;;eAFlBH,uCAAuB;;;eACDE,qCAAwB;;;eAE9CG,2DAAiC;;;eADbD,mDAA0B;;;eAD9CH,iCAAoB;;;0BAZJ,aAAa;gCAWE,mBAAmB;6BACI,gBAAgB;yCAChB,6BAA6B;0CAC1C,6BAA6B"}

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

@@ -3,9 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useMenuList_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useMenuListBase_unstable: function() {
+        return useMenuListBase_unstable;
+    },
+    useMenuList_unstable: function() {
         return useMenuList_unstable;
     }
 });
@@ -17,90 +25,93 @@ const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _reactcontextselector = require("@fluentui/react-context-selector");
 const _menuContext = require("../../contexts/menuContext");
 const _useValidateNesting = require("../../utils/useValidateNesting");
+const MENU_ITEM_ROLES = [
+    'menuitem',
+    'menuitemcheckbox',
+    'menuitemradio'
+];
+const MENU_ITEM_ROLES_SELECTOR = MENU_ITEM_ROLES.map((role)=>`[role="${role}"]`).join(',');
 const useMenuList_unstable = (props, ref)=>{
-    const { findAllFocusable } = (0, _reacttabster.useFocusFinders)();
-    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
     const menuContext = useMenuContextSelectors();
     const hasMenuContext = (0, _reactcontextselector.useHasParentContext)(_menuContext.MenuContext);
-    const focusAttributes = (0, _reacttabster.useArrowNavigationGroup)({
-        circular: true
-    });
     if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {
         // TODO throw warnings in development safely
         // eslint-disable-next-line no-console
         console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');
     }
-    const innerRef = _react.useRef(null);
-    const validateNestingRef = (0, _useValidateNesting.useValidateNesting)('MenuList');
+    const wrapperRef = _react.useRef(null);
+    const { findAllFocusable } = (0, _reacttabster.useFocusFinders)();
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const focusAttributes = (0, _reacttabster.useArrowNavigationGroup)({
+        circular: true
+    });
+    const baseState = useMenuListBase_unstable(props, ref);
+    // recreate root non-mutatively: merge wrapperRef so the effect below can
+    // observe the rendered DOM element, and add Tabster arrow-nav attributes
+    const mergedRootRef = (0, _reactutilities.useMergedRefs)(baseState.root.ref, wrapperRef);
     _react.useEffect(()=>{
-        const element = innerRef.current;
-        if (hasMenuContext && targetDocument && element) {
-            const onTabsterMoveFocus = (e)=>{
-                const nextElement = e.detail.next;
-                if (nextElement && element.contains(targetDocument.activeElement) && !element.contains(nextElement)) {
-                    // Preventing Tabster from handling Tab press, useMenuPopover will handle it.
-                    e.preventDefault();
-                }
-            };
-            targetDocument.addEventListener(_reacttabster.TabsterMoveFocusEventName, onTabsterMoveFocus);
-            return ()=>{
-                targetDocument.removeEventListener(_reacttabster.TabsterMoveFocusEventName, onTabsterMoveFocus);
-            };
+        const element = wrapperRef.current;
+        if (!hasMenuContext || !targetDocument || !element) {
+            return;
         }
+        const onTabsterMoveFocus = (e)=>{
+            const nextElement = e.detail.next;
+            if (nextElement && element.contains(targetDocument.activeElement) && !element.contains(nextElement)) {
+                // Preventing Tabster from handling Tab press, useMenuPopover will handle it.
+                e.preventDefault();
+            }
+        };
+        targetDocument.addEventListener(_reacttabster.TabsterMoveFocusEventName, onTabsterMoveFocus);
+        return ()=>{
+            targetDocument.removeEventListener(_reacttabster.TabsterMoveFocusEventName, onTabsterMoveFocus);
+        };
     }, [
-        innerRef,
-        targetDocument,
-        hasMenuContext
+        hasMenuContext,
+        targetDocument
     ]);
     const setFocusByFirstCharacter = _react.useCallback((e, itemEl)=>{
-        // TODO use some kind of children registration to reduce dependency on DOM roles
-        const acceptedRoles = [
-            'menuitem',
-            'menuitemcheckbox',
-            'menuitemradio'
-        ];
-        if (!innerRef.current) {
+        if (!wrapperRef.current) {
             return;
         }
-        const menuItems = findAllFocusable(innerRef.current, (el)=>el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')) !== -1);
-        let startIndex = menuItems.indexOf(itemEl) + 1;
-        if (startIndex === menuItems.length) {
-            startIndex = 0;
-        }
-        const firstChars = menuItems.map((menuItem)=>{
-            var _menuItem_textContent;
-            return (_menuItem_textContent = menuItem.textContent) === null || _menuItem_textContent === void 0 ? void 0 : _menuItem_textContent.charAt(0).toLowerCase();
-        });
-        const char = e.key.toLowerCase();
-        const getIndexFirstChars = (start, firstChar)=>{
-            for(let i = start; i < firstChars.length; i++){
-                if (char === firstChars[i]) {
-                    return i;
-                }
-            }
-            return -1;
-        };
-        // Check remaining slots in the menu
-        let index = getIndexFirstChars(startIndex, char);
-        // If not found in remaining slots, check from beginning
-        if (index === -1) {
-            index = getIndexFirstChars(0, char);
-        }
-        // If match was found...
-        if (index > -1) {
-            menuItems[index].focus();
-        }
+        const menuItems = findAllFocusable(wrapperRef.current, (el)=>el.hasAttribute('role') && MENU_ITEM_ROLES.indexOf(el.getAttribute('role')) !== -1);
+        focusItemMatchingFirstCharacter(menuItems, e.key, itemEl);
     }, [
         findAllFocusable
     ]);
+    return {
+        ...baseState,
+        root: {
+            ...focusAttributes,
+            ...baseState.root,
+            ref: mergedRootRef
+        },
+        setFocusByFirstCharacter
+    };
+};
+const useMenuListBase_unstable = (props, ref)=>{
+    const triggerId = (0, _menuContext.useMenuContext_unstable)((context)=>context.triggerId);
+    const checkedValuesContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.checkedValues);
+    const onCheckedValueChangeContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.onCheckedValueChange);
+    const hasIconsContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.hasIcons);
+    const hasCheckmarksContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.hasCheckmarks);
+    const hasMenuContext = (0, _reactcontextselector.useHasParentContext)(_menuContext.MenuContext);
+    const innerRef = _react.useRef(null);
+    const validateNestingRef = (0, _useValidateNesting.useValidateNesting)('MenuList');
+    const setFocusByFirstCharacter = _react.useCallback((e, itemEl)=>{
+        if (!innerRef.current) {
+            return;
+        }
+        const menuItems = Array.from(innerRef.current.querySelectorAll(MENU_ITEM_ROLES_SELECTOR));
+        focusItemMatchingFirstCharacter(menuItems, e.key, itemEl);
+    }, []);
     var _props_checkedValues;
     const [checkedValues, setCheckedValues] = (0, _reactutilities.useControllableState)({
-        state: (_props_checkedValues = props.checkedValues) !== null && _props_checkedValues !== void 0 ? _props_checkedValues : hasMenuContext ? menuContext.checkedValues : undefined,
+        state: (_props_checkedValues = props.checkedValues) !== null && _props_checkedValues !== void 0 ? _props_checkedValues : hasMenuContext ? checkedValuesContext : undefined,
         defaultState: props.defaultCheckedValues,
         initialState: {}
     });
     var _props_onCheckedValueChange;
-    const handleCheckedValueChange = (_props_onCheckedValueChange = props.onCheckedValueChange) !== null && _props_onCheckedValueChange !== void 0 ? _props_onCheckedValueChange : hasMenuContext ? menuContext.onCheckedValueChange : undefined;
+    const handleCheckedValueChange = (_props_onCheckedValueChange = props.onCheckedValueChange) !== null && _props_onCheckedValueChange !== void 0 ? _props_onCheckedValueChange : hasMenuContext ? onCheckedValueChangeContext : undefined;
     const toggleCheckbox = (0, _reactutilities.useEventCallback)((e, name, value, checked)=>{
         const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
         const newCheckedItems = [
@@ -133,6 +144,7 @@ const useMenuList_unstable = (props, ref)=>{
             checkedItems: newCheckedItems
         });
     });
+    var _props_hasIcons, _ref, _props_hasCheckmarks, _ref1;
     return {
         components: {
             root: 'div'
@@ -143,21 +155,50 @@ const useMenuList_unstable = (props, ref)=>{
             // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: (0, _reactutilities.useMergedRefs)(ref, innerRef, validateNestingRef),
             role: 'menu',
-            'aria-labelledby': menuContext.triggerId,
-            ...focusAttributes,
+            'aria-labelledby': triggerId,
             ...props
         }), {
             elementType: 'div'
         }),
-        hasIcons: menuContext.hasIcons || false,
-        hasCheckmarks: menuContext.hasCheckmarks || false,
         checkedValues,
+        hasIcons: (_ref = (_props_hasIcons = props.hasIcons) !== null && _props_hasIcons !== void 0 ? _props_hasIcons : hasIconsContext) !== null && _ref !== void 0 ? _ref : false,
+        hasCheckmarks: (_ref1 = (_props_hasCheckmarks = props.hasCheckmarks) !== null && _props_hasCheckmarks !== void 0 ? _props_hasCheckmarks : hasCheckmarksContext) !== null && _ref1 !== void 0 ? _ref1 : false,
         hasMenuContext,
         setFocusByFirstCharacter,
         selectRadio,
         toggleCheckbox
     };
 };
+/**
+ * Focuses the next menu item whose textContent starts with the typed character,
+ * wrapping around the list. Shared between the Tabster-free base impl and the
+ * Tabster-aware wrapper.
+ */ const focusItemMatchingFirstCharacter = (menuItems, key, current)=>{
+    let startIndex = menuItems.indexOf(current) + 1;
+    if (startIndex === menuItems.length) {
+        startIndex = 0;
+    }
+    const firstChars = menuItems.map((menuItem)=>{
+        var _menuItem_textContent;
+        return (_menuItem_textContent = menuItem.textContent) === null || _menuItem_textContent === void 0 ? void 0 : _menuItem_textContent.charAt(0).toLowerCase();
+    });
+    const char = key.toLowerCase();
+    const getIndexFirstChars = (start)=>{
+        for(let i = start; i < firstChars.length; i++){
+            if (char === firstChars[i]) {
+                return i;
+            }
+        }
+        return -1;
+    };
+    let index = getIndexFirstChars(startIndex);
+    if (index === -1) {
+        index = getIndexFirstChars(0);
+    }
+    if (index > -1) {
+        menuItems[index].focus();
+    }
+};
 /**
  * Adds some sugar to fetching multiple context selector values
  */ const useMenuContextSelectors = ()=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuList/useMenuList.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  useControllableState,\n  getIntrinsicElementProps,\n  slot,\n} from '@fluentui/react-utilities';\nimport {\n  useArrowNavigationGroup,\n  useFocusFinders,\n  TabsterMoveFocusEventName,\n  type TabsterMoveFocusEvent,\n} from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\nimport type { MenuListProps, MenuListState } from './MenuList.types';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n  const { findAllFocusable } = useFocusFinders();\n  const { targetDocument } = useFluent();\n  const menuContext = useMenuContextSelectors();\n  const hasMenuContext = useHasParentContext(MenuContext);\n  const focusAttributes = useArrowNavigationGroup({ circular: true });\n\n  if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n    // TODO throw warnings in development safely\n    // eslint-disable-next-line no-console\n    console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n  }\n\n  const innerRef = React.useRef<HTMLElement>(null);\n  const validateNestingRef = useValidateNesting('MenuList');\n\n  React.useEffect(() => {\n    const element = innerRef.current;\n\n    if (hasMenuContext && targetDocument && element) {\n      const onTabsterMoveFocus = (e: TabsterMoveFocusEvent) => {\n        const nextElement = e.detail.next;\n\n        if (nextElement && element.contains(targetDocument.activeElement) && !element.contains(nextElement)) {\n          // Preventing Tabster from handling Tab press, useMenuPopover will handle it.\n          e.preventDefault();\n        }\n      };\n\n      targetDocument.addEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);\n\n      return () => {\n        targetDocument.removeEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);\n      };\n    }\n  }, [innerRef, targetDocument, hasMenuContext]);\n\n  const setFocusByFirstCharacter = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n      // TODO use some kind of children registration to reduce dependency on DOM roles\n      const acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];\n      if (!innerRef.current) {\n        return;\n      }\n\n      const menuItems = findAllFocusable(\n        innerRef.current,\n        (el: HTMLElement) => el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')!) !== -1,\n      );\n\n      let startIndex = menuItems.indexOf(itemEl) + 1;\n      if (startIndex === menuItems.length) {\n        startIndex = 0;\n      }\n\n      const firstChars = menuItems.map(menuItem => menuItem.textContent?.charAt(0).toLowerCase());\n      const char = e.key.toLowerCase();\n\n      const getIndexFirstChars = (start: number, firstChar: string) => {\n        for (let i = start; i < firstChars.length; i++) {\n          if (char === firstChars[i]) {\n            return i;\n          }\n        }\n        return -1;\n      };\n\n      // Check remaining slots in the menu\n      let index = getIndexFirstChars(startIndex, char);\n\n      // If not found in remaining slots, check from beginning\n      if (index === -1) {\n        index = getIndexFirstChars(0, char);\n      }\n\n      // If match was found...\n      if (index > -1) {\n        menuItems[index].focus();\n      }\n    },\n    [findAllFocusable],\n  );\n\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues ?? (hasMenuContext ? menuContext.checkedValues : undefined),\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n\n  const handleCheckedValueChange =\n    props.onCheckedValueChange ?? (hasMenuContext ? menuContext.onCheckedValueChange : undefined);\n\n  const toggleCheckbox = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked: boolean) => {\n      const checkedItems = checkedValues?.[name] || [];\n      const newCheckedItems = [...checkedItems];\n      if (checked) {\n        newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n      } else {\n        newCheckedItems.push(value);\n      }\n\n      handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n      setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n    },\n  );\n\n  const selectRadio = useEventCallback((e: React.MouseEvent | React.KeyboardEvent, name: string, value: string) => {\n    const newCheckedItems = [value];\n    setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n    handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\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, validateNestingRef) as React.Ref<HTMLDivElement>,\n        role: 'menu',\n        'aria-labelledby': menuContext.triggerId,\n        ...focusAttributes,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    hasIcons: menuContext.hasIcons || false,\n    hasCheckmarks: menuContext.hasCheckmarks || false,\n    checkedValues,\n    hasMenuContext,\n    setFocusByFirstCharacter,\n    selectRadio,\n    toggleCheckbox,\n  };\n};\n\n/**\n * Adds some sugar to fetching multiple context selector values\n */\nconst useMenuContextSelectors = () => {\n  const checkedValues = useMenuContext_unstable(context => context.checkedValues);\n  const onCheckedValueChange = useMenuContext_unstable(context => context.onCheckedValueChange);\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const hasIcons = useMenuContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuContext_unstable(context => context.hasCheckmarks);\n\n  return {\n    checkedValues,\n    onCheckedValueChange,\n    triggerId,\n    hasIcons,\n    hasCheckmarks,\n  };\n};\n\n/**\n * Helper function to detect if props and MenuContext values are both used\n */\nconst usingPropsAndMenuContext = (\n  props: MenuListProps,\n  contextValue: ReturnType<typeof useMenuContextSelectors>,\n  hasMenuContext: boolean,\n) => {\n  let isUsingPropsAndContext = false;\n  for (const val in contextValue) {\n    if (props[val as keyof Omit<typeof contextValue, 'hasMenuContext' | 'onCheckedValueChange' | 'triggerId'>]) {\n      isUsingPropsAndContext = true;\n    }\n  }\n\n  return hasMenuContext && isUsingPropsAndContext;\n};\n"],"names":["React","useMergedRefs","useEventCallback","useControllableState","getIntrinsicElementProps","slot","useArrowNavigationGroup","useFocusFinders","TabsterMoveFocusEventName","useFluent_unstable","useFluent","useHasParentContext","useMenuContext_unstable","MenuContext","useValidateNesting","useMenuList_unstable","props","ref","findAllFocusable","targetDocument","menuContext","useMenuContextSelectors","hasMenuContext","focusAttributes","circular","usingPropsAndMenuContext","console","warn","innerRef","useRef","validateNestingRef","useEffect","element","current","onTabsterMoveFocus","e","nextElement","detail","next","contains","activeElement","preventDefault","addEventListener","removeEventListener","setFocusByFirstCharacter","useCallback","itemEl","acceptedRoles","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","checkedValues","setCheckedValues","state","undefined","defaultState","defaultCheckedValues","initialState","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","always","role","triggerId","elementType","hasIcons","hasCheckmarks","context","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}
+{"version":3,"sources":["../src/components/MenuList/useMenuList.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  useControllableState,\n  getIntrinsicElementProps,\n  slot,\n} from '@fluentui/react-utilities';\nimport {\n  useArrowNavigationGroup,\n  useFocusFinders,\n  TabsterMoveFocusEventName,\n  type TabsterMoveFocusEvent,\n} from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\nimport type { MenuListProps, MenuListState } from './MenuList.types';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\nconst MENU_ITEM_ROLES = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];\nconst MENU_ITEM_ROLES_SELECTOR = MENU_ITEM_ROLES.map(role => `[role=\"${role}\"]`).join(',');\n\n/**\n * Returns the props and state required to render the component.\n *\n * Composes with `useMenuListBase_unstable` and adds Tabster-driven keyboard\n * navigation: circular arrow-key focus, a `TabsterMoveFocusEvent` listener\n * that lets `useMenuPopover_unstable` handle Tab key presses, a focus-aware\n * `setFocusByFirstCharacter`, and the `hasIcons` / `hasCheckmarks` slot\n * alignment hints sourced from the parent `MenuContext`.\n */\nexport const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n  const menuContext = useMenuContextSelectors();\n  const hasMenuContext = useHasParentContext(MenuContext);\n\n  if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n    // TODO throw warnings in development safely\n    // eslint-disable-next-line no-console\n    console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n  }\n\n  const wrapperRef = React.useRef<HTMLElement>(null);\n  const { findAllFocusable } = useFocusFinders();\n  const { targetDocument } = useFluent();\n  const focusAttributes = useArrowNavigationGroup({ circular: true });\n\n  const baseState = useMenuListBase_unstable(props, ref);\n  // recreate root non-mutatively: merge wrapperRef so the effect below can\n  // observe the rendered DOM element, and add Tabster arrow-nav attributes\n  const mergedRootRef = useMergedRefs(baseState.root.ref, wrapperRef) as React.Ref<HTMLDivElement>;\n\n  React.useEffect(() => {\n    const element = wrapperRef.current;\n\n    if (!hasMenuContext || !targetDocument || !element) {\n      return;\n    }\n\n    const onTabsterMoveFocus = (e: TabsterMoveFocusEvent) => {\n      const nextElement = e.detail.next;\n      if (nextElement && element.contains(targetDocument.activeElement) && !element.contains(nextElement)) {\n        // Preventing Tabster from handling Tab press, useMenuPopover will handle it.\n        e.preventDefault();\n      }\n    };\n\n    targetDocument.addEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);\n    return () => {\n      targetDocument.removeEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);\n    };\n  }, [hasMenuContext, targetDocument]);\n\n  const setFocusByFirstCharacter = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n      if (!wrapperRef.current) {\n        return;\n      }\n      const menuItems = findAllFocusable(\n        wrapperRef.current,\n        (el: HTMLElement) => el.hasAttribute('role') && MENU_ITEM_ROLES.indexOf(el.getAttribute('role')!) !== -1,\n      );\n      focusItemMatchingFirstCharacter(menuItems, e.key, itemEl);\n    },\n    [findAllFocusable],\n  );\n\n  return {\n    ...baseState,\n    root: {\n      ...focusAttributes,\n      ...baseState.root,\n      ref: mergedRootRef,\n    },\n    setFocusByFirstCharacter,\n  };\n};\n\n/**\n * Base hook for MenuList component, produces state required to render the component.\n *\n * Does not invoke any Tabster APIs internally: arrow-key navigation and the\n * focus-aware `setFocusByFirstCharacter` are added by the wrapper\n * `useMenuList_unstable`. The base's `setFocusByFirstCharacter` walks the DOM\n * via `querySelectorAll` and does not filter by Tabster's focusability rules,\n * so consumers integrating their own focus management should layer that on top.\n *\n * @param props - props from this instance of MenuList\n * @param ref - reference to root HTMLElement of MenuList\n */\nexport const useMenuListBase_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const checkedValuesContext = useMenuContext_unstable(context => context.checkedValues);\n  const onCheckedValueChangeContext = useMenuContext_unstable(context => context.onCheckedValueChange);\n  const hasIconsContext = useMenuContext_unstable(context => context.hasIcons);\n  const hasCheckmarksContext = useMenuContext_unstable(context => context.hasCheckmarks);\n  const hasMenuContext = useHasParentContext(MenuContext);\n\n  const innerRef = React.useRef<HTMLElement>(null);\n  const validateNestingRef = useValidateNesting('MenuList');\n\n  const setFocusByFirstCharacter = React.useCallback((e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n    if (!innerRef.current) {\n      return;\n    }\n    const menuItems = Array.from(innerRef.current.querySelectorAll<HTMLElement>(MENU_ITEM_ROLES_SELECTOR));\n    focusItemMatchingFirstCharacter(menuItems, e.key, itemEl);\n  }, []);\n\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues ?? (hasMenuContext ? checkedValuesContext : undefined),\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n\n  const handleCheckedValueChange =\n    props.onCheckedValueChange ?? (hasMenuContext ? onCheckedValueChangeContext : undefined);\n\n  const toggleCheckbox = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked: boolean) => {\n      const checkedItems = checkedValues?.[name] || [];\n      const newCheckedItems = [...checkedItems];\n      if (checked) {\n        newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n      } else {\n        newCheckedItems.push(value);\n      }\n\n      handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n      setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n    },\n  );\n\n  const selectRadio = useEventCallback((e: React.MouseEvent | React.KeyboardEvent, name: string, value: string) => {\n    const newCheckedItems = [value];\n    setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n    handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\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, validateNestingRef) as React.Ref<HTMLDivElement>,\n        role: 'menu',\n        'aria-labelledby': triggerId,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    checkedValues,\n    hasIcons: props.hasIcons ?? hasIconsContext ?? false,\n    hasCheckmarks: props.hasCheckmarks ?? hasCheckmarksContext ?? false,\n    hasMenuContext,\n    setFocusByFirstCharacter,\n    selectRadio,\n    toggleCheckbox,\n  };\n};\n\n/**\n * Focuses the next menu item whose textContent starts with the typed character,\n * wrapping around the list. Shared between the Tabster-free base impl and the\n * Tabster-aware wrapper.\n */\nconst focusItemMatchingFirstCharacter = (menuItems: HTMLElement[], key: string, current: HTMLElement) => {\n  let startIndex = menuItems.indexOf(current) + 1;\n  if (startIndex === menuItems.length) {\n    startIndex = 0;\n  }\n\n  const firstChars = menuItems.map(menuItem => menuItem.textContent?.charAt(0).toLowerCase());\n  const char = key.toLowerCase();\n\n  const getIndexFirstChars = (start: number) => {\n    for (let i = start; i < firstChars.length; i++) {\n      if (char === firstChars[i]) {\n        return i;\n      }\n    }\n    return -1;\n  };\n\n  let index = getIndexFirstChars(startIndex);\n  if (index === -1) {\n    index = getIndexFirstChars(0);\n  }\n  if (index > -1) {\n    menuItems[index].focus();\n  }\n};\n\n/**\n * Adds some sugar to fetching multiple context selector values\n */\nconst useMenuContextSelectors = () => {\n  const checkedValues = useMenuContext_unstable(context => context.checkedValues);\n  const onCheckedValueChange = useMenuContext_unstable(context => context.onCheckedValueChange);\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const hasIcons = useMenuContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuContext_unstable(context => context.hasCheckmarks);\n\n  return {\n    checkedValues,\n    onCheckedValueChange,\n    triggerId,\n    hasIcons,\n    hasCheckmarks,\n  };\n};\n\n/**\n * Helper function to detect if props and MenuContext values are both used\n */\nconst usingPropsAndMenuContext = (\n  props: MenuListProps,\n  contextValue: ReturnType<typeof useMenuContextSelectors>,\n  hasMenuContext: boolean,\n) => {\n  let isUsingPropsAndContext = false;\n  for (const val in contextValue) {\n    if (props[val as keyof Omit<typeof contextValue, 'hasMenuContext' | 'onCheckedValueChange' | 'triggerId'>]) {\n      isUsingPropsAndContext = true;\n    }\n  }\n\n  return hasMenuContext && isUsingPropsAndContext;\n};\n"],"names":["React","useMergedRefs","useEventCallback","useControllableState","getIntrinsicElementProps","slot","useArrowNavigationGroup","useFocusFinders","TabsterMoveFocusEventName","useFluent_unstable","useFluent","useHasParentContext","useMenuContext_unstable","MenuContext","useValidateNesting","MENU_ITEM_ROLES","MENU_ITEM_ROLES_SELECTOR","map","role","join","useMenuList_unstable","props","ref","menuContext","useMenuContextSelectors","hasMenuContext","usingPropsAndMenuContext","console","warn","wrapperRef","useRef","findAllFocusable","targetDocument","focusAttributes","circular","baseState","useMenuListBase_unstable","mergedRootRef","root","useEffect","element","current","onTabsterMoveFocus","e","nextElement","detail","next","contains","activeElement","preventDefault","addEventListener","removeEventListener","setFocusByFirstCharacter","useCallback","itemEl","menuItems","el","hasAttribute","indexOf","getAttribute","focusItemMatchingFirstCharacter","key","triggerId","context","checkedValuesContext","checkedValues","onCheckedValueChangeContext","onCheckedValueChange","hasIconsContext","hasIcons","hasCheckmarksContext","hasCheckmarks","innerRef","validateNestingRef","Array","from","querySelectorAll","setCheckedValues","state","undefined","defaultState","defaultCheckedValues","initialState","handleCheckedValueChange","toggleCheckbox","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","always","elementType","startIndex","length","firstChars","menuItem","textContent","charAt","toLowerCase","char","getIndexFirstChars","start","i","index","focus","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}

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

@@ -46,8 +46,8 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useMenuListStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuListStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nexport const menuListClassNames = {\n    root: 'fui-MenuList'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '2px'\n    },\n    hasMenuContext: {\n        height: '100%'\n    }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuListStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);\n    return state;\n};\n"],"names":["mergeClasses","__styles","menuListClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","hasMenuContext","Bqenvij","d","p","useMenuListStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,kBAAkB;;;IAedY,0BAA0B;;;;uBAhBF,gBAAgB;AAClD,2BAA2B;IAC9BX,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAE,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,cAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AAGS,oCAAoCE,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;IAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGjB,mBAAY,EAACE,kBAAkB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACL,cAAc,IAAIM,MAAM,CAACN,cAAc,EAAEK,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IAC9I,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useMenuListStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nexport const menuListClassNames = {\n    root: 'fui-MenuList'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '2px'\n    },\n    hasMenuContext: {\n        height: '100%'\n    }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuListStyles_unstable = (state)=>{\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);\n    return state;\n};\n"],"names":["mergeClasses","__styles","menuListClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","hasMenuContext","Bqenvij","d","p","useMenuListStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,kBAAkB;;;IAedY,0BAA0B;;;;uBAhBF,gBAAgB;AAClD,2BAA2B;IAC9BX,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAE,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,cAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AAGS,oCAAoCE,KAAK,IAAG;IACnD,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAW,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGjB,mBAAY,EAACE,kBAAkB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACL,cAAc,IAAIM,MAAM,CAACN,cAAc,EAAEK,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IAC9I,OAAOF,KAAK;AAChB,CAAC"}

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

@@ -32,8 +32,8 @@ const useStyles = (0, _react.makeStyles)({
     }
 });
 const useMenuListStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuList/useMenuListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuListSlots, MenuListState } from './MenuList.types';\n\nexport const menuListClassNames: SlotClassNames<MenuListSlots> = {\n  root: 'fui-MenuList',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '2px',\n  },\n  hasMenuContext: {\n    height: '100%',\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    menuListClassNames.root,\n    styles.root,\n    state.hasMenuContext && styles.hasMenuContext,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","menuListClassNames","root","useStyles","display","flexDirection","gap","hasMenuContext","height","useMenuListStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,kBAAAA;;;IAkBAQ,0BAAAA;;;;uBArB4B,iBAAiB;AAGnD,2BAA0D;IAC/DP,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYH,iBAAAA,EAAW;IAC3BE,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAC,gBAAgB;QACdC,QAAQ;IACV;AACF;AAKO,mCAAmC,CAACE;IACzC;IAEA,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,OAAGb,mBAAAA,EACrBE,mBAAmBC,IAAI,EACvBS,OAAOT,IAAI,EACXQ,MAAMH,cAAc,IAAII,OAAOJ,cAAc,EAC7CG,MAAMR,IAAI,CAACU,SAAS;IAEtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuList/useMenuListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuListSlots, MenuListState } from './MenuList.types';\n\nexport const menuListClassNames: SlotClassNames<MenuListSlots> = {\n  root: 'fui-MenuList',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '2px',\n  },\n  hasMenuContext: {\n    height: '100%',\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    menuListClassNames.root,\n    styles.root,\n    state.hasMenuContext && styles.hasMenuContext,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","menuListClassNames","root","useStyles","display","flexDirection","gap","hasMenuContext","height","useMenuListStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,kBAAAA;;;IAkBAQ,0BAAAA;;;;uBArB4B,iBAAiB;AAGnD,2BAA0D;IAC/DP,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYH,iBAAAA,EAAW;IAC3BE,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAC,gBAAgB;QACdC,QAAQ;IACV;AACF;AAKO,mCAAmC,CAACE;IACzC,MAAMC,SAASR;IACf,oDAAoD;IACpDO,MAAMR,IAAI,CAACU,SAAS,OAAGb,mBAAAA,EACrBE,mBAAmBC,IAAI,EACvBS,OAAOT,IAAI,EACXQ,MAAMH,cAAc,IAAII,OAAOJ,cAAc,EAC7CG,MAAMR,IAAI,CAACU,SAAS;IAEtB,OAAOF;AACT,EAAE"}

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

@@ -18,6 +18,9 @@ _export(exports, {
     renderMenuPopover_unstable: function() {
         return _renderMenuPopover.renderMenuPopover_unstable;
     },
+    useMenuPopoverBase_unstable: function() {
+        return _useMenuPopover.useMenuPopoverBase_unstable;
+    },
     useMenuPopoverStyles_unstable: function() {
         return _useMenuPopoverStylesstyles.useMenuPopoverStyles_unstable;
     },