@fluentui/react-menu 9.24.1 → 9.25.1

package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js

@@ -21,20 +21,24 @@ export const menuItemLinkClassNames = {
 /**
  * Apply styling to the MenuItemLink slots based on the state
  */ export const useMenuItemLinkStyles_unstable = (state)=>{
-    'use no memo';
     useMenuItemStyles_unstable(state);
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(menuItemLinkClassNames.root, styles.resetLink, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(menuItemLinkClassNames.icon, state.icon.className);
     }
     if (state.content) {
+        // eslint-disable-next-line react-hooks/immutability
         state.content.className = mergeClasses(menuItemLinkClassNames.content, state.content.className);
     }
     if (state.secondaryContent) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondaryContent.className = mergeClasses(menuItemLinkClassNames.secondaryContent, state.secondaryContent.className);
     }
     if (state.checkmark) {
+        // eslint-disable-next-line react-hooks/immutability
         state.checkmark.className = mergeClasses(menuItemLinkClassNames.checkmark, state.checkmark.className);
     }
     return state;

package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLinkStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { MenuItemLinkSlots, MenuItemLinkState } from './MenuItemLink.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nimport type { MenuItemState } from '../MenuItem/MenuItem.types';\n\nexport const menuItemLinkClassNames: SlotClassNames<MenuItemLinkSlots> = {\n  root: 'fui-MenuItemLink',\n  icon: 'fui-MenuItemLink__icon',\n  checkmark: 'fui-MenuItemLink__checkmark',\n  content: 'fui-MenuItemLink__content',\n  secondaryContent: 'fui-MenuItemLink__secondaryContent',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  resetLink: {\n    textDecorationLine: 'none',\n    textDecorationThickness: 'initial',\n    textDecorationStyle: 'initial',\n    textDecorationColor: 'initial',\n  },\n});\n\n/**\n * Apply styling to the MenuItemLink slots based on the state\n */\nexport const useMenuItemLinkStyles_unstable = (state: MenuItemLinkState): MenuItemLinkState => {\n  'use no memo';\n\n  useMenuItemStyles_unstable(state as MenuItemState);\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuItemLinkClassNames.root, styles.resetLink, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemLinkClassNames.icon, state.icon.className);\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemLinkClassNames.content, state.content.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemLinkClassNames.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemLinkClassNames.checkmark, state.checkmark.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useMenuItemStyles_unstable","menuItemLinkClassNames","root","icon","checkmark","content","secondaryContent","useStyles","resetLink","textDecorationLine","textDecorationThickness","textDecorationStyle","textDecorationColor","useMenuItemLinkStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,0BAA0B,QAAQ,uCAAuC;AAGlF,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;AACpB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYT,WAAW;IAC3BU,WAAW;QACTC,oBAAoB;QACpBC,yBAAyB;QACzBC,qBAAqB;QACrBC,qBAAqB;IACvB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEAd,2BAA2Bc;IAC3B,MAAMC,SAASR;IACfO,MAAMZ,IAAI,CAACc,SAAS,GAAGjB,aAAaE,uBAAuBC,IAAI,EAAEa,OAAOP,SAAS,EAAEM,MAAMZ,IAAI,CAACc,SAAS;IAEvG,IAAIF,MAAMX,IAAI,EAAE;QACdW,MAAMX,IAAI,CAACa,SAAS,GAAGjB,aAAaE,uBAAuBE,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACvF;IAEA,IAAIF,MAAMT,OAAO,EAAE;QACjBS,MAAMT,OAAO,CAACW,SAAS,GAAGjB,aAAaE,uBAAuBI,OAAO,EAAES,MAAMT,OAAO,CAACW,SAAS;IAChG;IAEA,IAAIF,MAAMR,gBAAgB,EAAE;QAC1BQ,MAAMR,gBAAgB,CAACU,SAAS,GAAGjB,aACjCE,uBAAuBK,gBAAgB,EACvCQ,MAAMR,gBAAgB,CAACU,SAAS;IAEpC;IAEA,IAAIF,MAAMV,SAAS,EAAE;QACnBU,MAAMV,SAAS,CAACY,SAAS,GAAGjB,aAAaE,uBAAuBG,SAAS,EAAEU,MAAMV,SAAS,CAACY,SAAS;IACtG;IAEA,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLinkStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { MenuItemLinkSlots, MenuItemLinkState } from './MenuItemLink.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nimport type { MenuItemState } from '../MenuItem/MenuItem.types';\n\nexport const menuItemLinkClassNames: SlotClassNames<MenuItemLinkSlots> = {\n  root: 'fui-MenuItemLink',\n  icon: 'fui-MenuItemLink__icon',\n  checkmark: 'fui-MenuItemLink__checkmark',\n  content: 'fui-MenuItemLink__content',\n  secondaryContent: 'fui-MenuItemLink__secondaryContent',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  resetLink: {\n    textDecorationLine: 'none',\n    textDecorationThickness: 'initial',\n    textDecorationStyle: 'initial',\n    textDecorationColor: 'initial',\n  },\n});\n\n/**\n * Apply styling to the MenuItemLink slots based on the state\n */\nexport const useMenuItemLinkStyles_unstable = (state: MenuItemLinkState): MenuItemLinkState => {\n  useMenuItemStyles_unstable(state as MenuItemState);\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(menuItemLinkClassNames.root, styles.resetLink, state.root.className);\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(menuItemLinkClassNames.icon, state.icon.className);\n  }\n\n  if (state.content) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.content.className = mergeClasses(menuItemLinkClassNames.content, state.content.className);\n  }\n\n  if (state.secondaryContent) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.secondaryContent.className = mergeClasses(\n      menuItemLinkClassNames.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.checkmark) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.checkmark.className = mergeClasses(menuItemLinkClassNames.checkmark, state.checkmark.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useMenuItemStyles_unstable","menuItemLinkClassNames","root","icon","checkmark","content","secondaryContent","useStyles","resetLink","textDecorationLine","textDecorationThickness","textDecorationStyle","textDecorationColor","useMenuItemLinkStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,0BAA0B,QAAQ,uCAAuC;AAGlF,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;AACpB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYT,WAAW;IAC3BU,WAAW;QACTC,oBAAoB;QACpBC,yBAAyB;QACzBC,qBAAqB;QACrBC,qBAAqB;IACvB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7Cd,2BAA2Bc;IAC3B,MAAMC,SAASR;IACf,oDAAoD;IACpDO,MAAMZ,IAAI,CAACc,SAAS,GAAGjB,aAAaE,uBAAuBC,IAAI,EAAEa,OAAOP,SAAS,EAAEM,MAAMZ,IAAI,CAACc,SAAS;IAEvG,IAAIF,MAAMX,IAAI,EAAE;QACd,oDAAoD;QACpDW,MAAMX,IAAI,CAACa,SAAS,GAAGjB,aAAaE,uBAAuBE,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACvF;IAEA,IAAIF,MAAMT,OAAO,EAAE;QACjB,oDAAoD;QACpDS,MAAMT,OAAO,CAACW,SAAS,GAAGjB,aAAaE,uBAAuBI,OAAO,EAAES,MAAMT,OAAO,CAACW,SAAS;IAChG;IAEA,IAAIF,MAAMR,gBAAgB,EAAE;QAC1B,oDAAoD;QACpDQ,MAAMR,gBAAgB,CAACU,SAAS,GAAGjB,aACjCE,uBAAuBK,gBAAgB,EACvCQ,MAAMR,gBAAgB,CAACU,SAAS;IAEpC;IAEA,IAAIF,MAAMV,SAAS,EAAE;QACnB,oDAAoD;QACpDU,MAAMV,SAAS,CAACY,SAAS,GAAGjB,aAAaE,uBAAuBG,SAAS,EAAEU,MAAMV,SAAS,CAACY,SAAS;IACtG;IAEA,OAAOF;AACT,EAAE"}

package/lib/components/MenuItemRadio/useMenuItemRadio.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { slot } from '@fluentui/react-utilities';
 import { Checkmark16Filled } from '@fluentui/react-icons';
 import { useMenuListContext_unstable } from '../../contexts/menuListContext';
-import { useMenuItemBase_unstable } from '../MenuItem/useMenuItem';
+import { useMenuItemBase_unstable } from '../MenuItem/useMenuItemBase';
 /**
  * Given user props, returns state and render function for a MenuItemRadio.
  */ export const useMenuItemRadio_unstable = (props, ref)=>{
@@ -19,8 +19,6 @@ import { useMenuItemBase_unstable } from '../MenuItem/useMenuItem';
 /**
  * Base hook for MenuItemRadio component, produces state required to render the component.
  * It doesn't set any design-related props specific to MenuItemRadio.
- *
- * @internal
  */ export const useMenuItemRadioBase_unstable = (props, ref)=>{
     const { name, value } = props;
     const checked = useMenuListContext_unstable((context)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemRadio/useMenuItemRadio.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItemBase_unstable } from '../MenuItem/useMenuItem';\nimport type {\n  MenuItemRadioBaseProps,\n  MenuItemRadioBaseState,\n  MenuItemRadioProps,\n  MenuItemRadioState,\n} from './MenuItemRadio.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\n/**\n * Given user props, returns state and render function for a MenuItemRadio.\n */\nexport const useMenuItemRadio_unstable = (\n  props: MenuItemRadioProps,\n  ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemRadioState => {\n  const state = useMenuItemRadioBase_unstable(props, ref);\n\n  // Set default checkmark icon\n  if (state.checkmark) {\n    state.checkmark.children ??= <Checkmark16Filled />;\n  }\n\n  return state;\n};\n\n/**\n * Base hook for MenuItemRadio component, produces state required to render the component.\n * It doesn't set any design-related props specific to MenuItemRadio.\n *\n * @internal\n */\nexport const useMenuItemRadioBase_unstable = (\n  props: MenuItemRadioBaseProps,\n  ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemRadioBaseState => {\n  const { name, value } = props;\n\n  const checked = useMenuListContext_unstable(context => {\n    const checkedItems = context.checkedValues?.[name] || [];\n    return checkedItems.indexOf(value) !== -1;\n  });\n\n  const selectRadio = useMenuListContext_unstable(context => context.selectRadio);\n\n  return {\n    ...useMenuItemBase_unstable(\n      {\n        ...props,\n        role: 'menuitemradio',\n        'aria-checked': checked,\n        checkmark: slot.optional(props.checkmark, {\n          renderByDefault: true,\n          elementType: 'span',\n        }),\n        onClick: (e: React.MouseEvent<ARIAButtonElementIntersection<'div'>>) => {\n          selectRadio?.(e, name, value, checked);\n          props.onClick?.(e);\n        },\n      },\n      ref,\n    ),\n    checked,\n    name,\n    value,\n  };\n};\n"],"names":["React","slot","Checkmark16Filled","useMenuListContext_unstable","useMenuItemBase_unstable","useMenuItemRadio_unstable","props","ref","state","useMenuItemRadioBase_unstable","checkmark","children","name","value","checked","context","checkedItems","checkedValues","indexOf","selectRadio","role","optional","renderByDefault","elementType","onClick","e"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,wBAAwB,QAAQ,0BAA0B;AASnE;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,QAAQC,8BAA8BH,OAAOC;IAEnD,6BAA6B;IAC7B,IAAIC,MAAME,SAAS,EAAE;YACnBF;;QAAAA,cAAAA,mBAAAA,MAAME,SAAS,EAACC,yDAAhBH,iBAAgBG,yBAAa,oBAACT;IAChC;IAEA,OAAOM;AACT,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,gCAAgC,CAC3CH,OACAC;IAEA,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,GAAGP;IAExB,MAAMQ,UAAUX,4BAA4BY,CAAAA;YACrBA;QAArB,MAAMC,eAAeD,EAAAA,yBAAAA,QAAQE,aAAa,cAArBF,6CAAAA,sBAAuB,CAACH,KAAK,KAAI,EAAE;QACxD,OAAOI,aAAaE,OAAO,CAACL,WAAW,CAAC;IAC1C;IAEA,MAAMM,cAAchB,4BAA4BY,CAAAA,UAAWA,QAAQI,WAAW;IAE9E,OAAO;QACL,GAAGf,yBACD;YACE,GAAGE,KAAK;YACRc,MAAM;YACN,gBAAgBN;YAChBJ,WAAWT,KAAKoB,QAAQ,CAACf,MAAMI,SAAS,EAAE;gBACxCY,iBAAiB;gBACjBC,aAAa;YACf;YACAC,SAAS,CAACC;oBAERnB;gBADAa,wBAAAA,kCAAAA,YAAcM,GAAGb,MAAMC,OAAOC;iBAC9BR,iBAAAA,MAAMkB,OAAO,cAAblB,qCAAAA,oBAAAA,OAAgBmB;YAClB;QACF,GACAlB,IACD;QACDO;QACAF;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/MenuItemRadio/useMenuItemRadio.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItemBase_unstable } from '../MenuItem/useMenuItemBase';\nimport type {\n  MenuItemRadioBaseProps,\n  MenuItemRadioBaseState,\n  MenuItemRadioProps,\n  MenuItemRadioState,\n} from './MenuItemRadio.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\n/**\n * Given user props, returns state and render function for a MenuItemRadio.\n */\nexport const useMenuItemRadio_unstable = (\n  props: MenuItemRadioProps,\n  ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemRadioState => {\n  const state = useMenuItemRadioBase_unstable(props, ref);\n\n  // Set default checkmark icon\n  if (state.checkmark) {\n    state.checkmark.children ??= <Checkmark16Filled />;\n  }\n\n  return state;\n};\n\n/**\n * Base hook for MenuItemRadio component, produces state required to render the component.\n * It doesn't set any design-related props specific to MenuItemRadio.\n */\nexport const useMenuItemRadioBase_unstable = (\n  props: MenuItemRadioBaseProps,\n  ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemRadioBaseState => {\n  const { name, value } = props;\n\n  const checked = useMenuListContext_unstable(context => {\n    const checkedItems = context.checkedValues?.[name] || [];\n    return checkedItems.indexOf(value) !== -1;\n  });\n\n  const selectRadio = useMenuListContext_unstable(context => context.selectRadio);\n\n  return {\n    ...useMenuItemBase_unstable(\n      {\n        ...props,\n        role: 'menuitemradio',\n        'aria-checked': checked,\n        checkmark: slot.optional(props.checkmark, {\n          renderByDefault: true,\n          elementType: 'span',\n        }),\n        onClick: (e: React.MouseEvent<ARIAButtonElementIntersection<'div'>>) => {\n          selectRadio?.(e, name, value, checked);\n          props.onClick?.(e);\n        },\n      },\n      ref,\n    ),\n    checked,\n    name,\n    value,\n  };\n};\n"],"names":["React","slot","Checkmark16Filled","useMenuListContext_unstable","useMenuItemBase_unstable","useMenuItemRadio_unstable","props","ref","state","useMenuItemRadioBase_unstable","checkmark","children","name","value","checked","context","checkedItems","checkedValues","indexOf","selectRadio","role","optional","renderByDefault","elementType","onClick","e"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,wBAAwB,QAAQ,8BAA8B;AASvE;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,QAAQC,8BAA8BH,OAAOC;IAEnD,6BAA6B;IAC7B,IAAIC,MAAME,SAAS,EAAE;YACnBF;;QAAAA,cAAAA,mBAAAA,MAAME,SAAS,EAACC,yDAAhBH,iBAAgBG,yBAAa,oBAACT;IAChC;IAEA,OAAOM;AACT,EAAE;AAEF;;;CAGC,GACD,OAAO,MAAMC,gCAAgC,CAC3CH,OACAC;IAEA,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,GAAGP;IAExB,MAAMQ,UAAUX,4BAA4BY,CAAAA;YACrBA;QAArB,MAAMC,eAAeD,EAAAA,yBAAAA,QAAQE,aAAa,cAArBF,6CAAAA,sBAAuB,CAACH,KAAK,KAAI,EAAE;QACxD,OAAOI,aAAaE,OAAO,CAACL,WAAW,CAAC;IAC1C;IAEA,MAAMM,cAAchB,4BAA4BY,CAAAA,UAAWA,QAAQI,WAAW;IAE9E,OAAO;QACL,GAAGf,yBACD;YACE,GAAGE,KAAK;YACRc,MAAM;YACN,gBAAgBN;YAChBJ,WAAWT,KAAKoB,QAAQ,CAACf,MAAMI,SAAS,EAAE;gBACxCY,iBAAiB;gBACjBC,aAAa;YACf;YACAC,SAAS,CAACC;oBAERnB;gBADAa,wBAAAA,kCAAAA,YAAcM,GAAGb,MAAMC,OAAOC;iBAC9BR,iBAAAA,MAAMkB,OAAO,cAAblB,qCAAAA,oBAAAA,OAAgBmB;YAClB;QACF,GACAlB,IACD;QACDO;QACAF;QACAC;IACF;AACF,EAAE"}

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

@@ -12,22 +12,26 @@ export const menuItemRadioClassNames = {
   subText: 'fui-MenuItemRadio__subText'
 };
 export const useMenuItemRadioStyles_unstable = state => {
-  'use no memo';
-
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);
   if (state.content) {
+    // eslint-disable-next-line react-hooks/immutability
     state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);
   }
   if (state.secondaryContent) {
+    // eslint-disable-next-line react-hooks/immutability
     state.secondaryContent.className = mergeClasses(menuItemRadioClassNames.secondaryContent, state.secondaryContent.className);
   }
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);
   }
   if (state.checkmark) {
+    // eslint-disable-next-line react-hooks/immutability
     state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);
   }
   if (state.subText) {
+    // eslint-disable-next-line react-hooks/immutability
     state.subText.className = mergeClasses(menuItemRadioClassNames.subText, state.subText.className);
   }
   useMenuItemStyles_unstable(state);

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

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

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

@@ -11,21 +11,26 @@ export const menuItemRadioClassNames = {
     subText: 'fui-MenuItemRadio__subText'
 };
 export const useMenuItemRadioStyles_unstable = (state)=>{
-    'use no memo';
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);
     if (state.content) {
+        // eslint-disable-next-line react-hooks/immutability
         state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);
     }
     if (state.secondaryContent) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondaryContent.className = mergeClasses(menuItemRadioClassNames.secondaryContent, state.secondaryContent.className);
     }
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);
     }
     if (state.checkmark) {
+        // eslint-disable-next-line react-hooks/immutability
         state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);
     }
     if (state.subText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.subText.className = mergeClasses(menuItemRadioClassNames.subText, state.subText.className);
     }
     useMenuItemStyles_unstable(state);

package/lib/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;AAEA,SAASA,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,2BAA2B,QAAQ,yBAAyB;AACrE,SAASC,0BAA0B,QAAQ,uCAAuC;AAKlF,OAAO,MAAMC,0BAAmF;IAC9FC,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEAA,MAAMP,IAAI,CAACQ,SAAS,GAAGZ,aAAaG,wBAAwBC,IAAI,EAAEO,MAAMP,IAAI,CAACQ,SAAS;IAEtF,IAAID,MAAMJ,OAAO,EAAE;QACjBI,MAAMJ,OAAO,CAACK,SAAS,GAAGZ,aAAaG,wBAAwBI,OAAO,EAAEI,MAAMJ,OAAO,CAACK,SAAS;IACjG;IAEA,IAAID,MAAMH,gBAAgB,EAAE;QAC1BG,MAAMH,gBAAgB,CAACI,SAAS,GAAGZ,aACjCG,wBAAwBK,gBAAgB,EACxCG,MAAMH,gBAAgB,CAACI,SAAS;IAEpC;IAEA,IAAID,MAAMN,IAAI,EAAE;QACdM,MAAMN,IAAI,CAACO,SAAS,GAAGZ,aAAaG,wBAAwBE,IAAI,EAAEM,MAAMN,IAAI,CAACO,SAAS;IACxF;IAEA,IAAID,MAAML,SAAS,EAAE;QACnBK,MAAML,SAAS,CAACM,SAAS,GAAGZ,aAAaG,wBAAwBG,SAAS,EAAEK,MAAML,SAAS,CAACM,SAAS;IACvG;IAEA,IAAID,MAAMF,OAAO,EAAE;QACjBE,MAAMF,OAAO,CAACG,SAAS,GAAGZ,aAAaG,wBAAwBM,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACjG;IAEAV,2BAA2BS;IAC3BV,4BAA4BU;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;AAEA,SAASA,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,2BAA2B,QAAQ,yBAAyB;AACrE,SAASC,0BAA0B,QAAQ,uCAAuC;AAKlF,OAAO,MAAMC,0BAAmF;IAC9FC,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,kCAAkC,CAACC;IAC9C,oDAAoD;IACpDA,MAAMP,IAAI,CAACQ,SAAS,GAAGZ,aAAaG,wBAAwBC,IAAI,EAAEO,MAAMP,IAAI,CAACQ,SAAS;IAEtF,IAAID,MAAMJ,OAAO,EAAE;QACjB,oDAAoD;QACpDI,MAAMJ,OAAO,CAACK,SAAS,GAAGZ,aAAaG,wBAAwBI,OAAO,EAAEI,MAAMJ,OAAO,CAACK,SAAS;IACjG;IAEA,IAAID,MAAMH,gBAAgB,EAAE;QAC1B,oDAAoD;QACpDG,MAAMH,gBAAgB,CAACI,SAAS,GAAGZ,aACjCG,wBAAwBK,gBAAgB,EACxCG,MAAMH,gBAAgB,CAACI,SAAS;IAEpC;IAEA,IAAID,MAAMN,IAAI,EAAE;QACd,oDAAoD;QACpDM,MAAMN,IAAI,CAACO,SAAS,GAAGZ,aAAaG,wBAAwBE,IAAI,EAAEM,MAAMN,IAAI,CAACO,SAAS;IACxF;IAEA,IAAID,MAAML,SAAS,EAAE;QACnB,oDAAoD;QACpDK,MAAML,SAAS,CAACM,SAAS,GAAGZ,aAAaG,wBAAwBG,SAAS,EAAEK,MAAML,SAAS,CAACM,SAAS;IACvG;IAEA,IAAID,MAAMF,OAAO,EAAE;QACjB,oDAAoD;QACpDE,MAAMF,OAAO,CAACG,SAAS,GAAGZ,aAAaG,wBAAwBM,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACjG;IAEAV,2BAA2BS;IAC3BV,4BAA4BU;AAC9B,EAAE"}

package/lib/components/MenuItemSwitch/useMenuItemSwitch.js

@@ -28,7 +28,6 @@ import { circleFilledClassName } from './useMenuItemSwitchStyles.styles';
  * Base hook for MenuItemSwitch component, produces state required to render the component.
  * It doesn't set any design-related props specific to MenuItemSwitch.
  *
- * @internal
  * @param props - props from this instance of MenuItemSwitch
  * @param ref - reference to root HTMLDivElement of MenuItemSwitch
  */ export const useMenuItemSwitchBase_unstable = (props, ref)=>{

package/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AAEjD,SAASC,gCAAgC,QAAQ,0CAA0C;AAC3F,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,QAAQC,+BAA+BH,OAAOC;IAEpD,wCAAwC;IACxC,IAAIC,MAAME,eAAe,EAAE;YACzBF;;QAAAA,cAAAA,yBAAAA,MAAME,eAAe,EAACC,yDAAtBH,uBAAsBG,yBAAa,oBAACR;YAAaS,WAAWR;;IAC9D;IAEA,OAAOI;AACT,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMC,iCAAiC,CAC5CH,OACAC;IAEA,MAAMM,YAAYX,iCAAiCI,OAAOC;IAC1D,OAAO;QACL,GAAGM,SAAS;QACZH,iBAAiBT,KAAKa,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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AAEjD,SAASC,gCAAgC,QAAQ,0CAA0C;AAC3F,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,QAAQC,+BAA+BH,OAAOC;IAEpD,wCAAwC;IACxC,IAAIC,MAAME,eAAe,EAAE;YACzBF;;QAAAA,cAAAA,yBAAAA,MAAME,eAAe,EAACC,yDAAtBH,uBAAsBG,yBAAa,oBAACR;YAAaS,WAAWR;;IAC9D;IAEA,OAAOI;AACT,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,iCAAiC,CAC5CH,OACAC;IAEA,MAAMM,YAAYX,iCAAiCI,OAAOC;IAC1D,OAAO;QACL,GAAGM,SAAS;QACZH,iBAAiBT,KAAKa,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/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js

@@ -58,8 +58,6 @@ const useMultilineStyles = /*#__PURE__*/__styles({
  * Apply styling to the MenuItemSwitch slots based on the state
  */
 export const useMenuItemSwitchStyles_unstable = state => {
-  'use no memo';
-
   const {
     checked,
     subText
@@ -68,20 +66,26 @@ export const useMenuItemSwitchStyles_unstable = state => {
   const switchIndicatorStyles = useSwitchIndicatorStyles();
   const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();
   const multilineStyles = useMultilineStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);
   if (state.content) {
+    // eslint-disable-next-line react-hooks/immutability
     state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);
   }
   if (state.secondaryContent) {
+    // eslint-disable-next-line react-hooks/immutability
     state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);
   }
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);
   }
   if (state.subText) {
+    // eslint-disable-next-line react-hooks/immutability
     state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);
   }
   if (state.switchIndicator) {
+    // eslint-disable-next-line react-hooks/immutability
     state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);
   }
   useMenuItemStyles_unstable({
@@ -95,6 +99,7 @@ export const useMenuItemSwitchStyles_unstable = state => {
     checkmark: undefined,
     submenuIndicator: undefined,
     hasSubmenu: false,
+    submenuOpen: false,
     persistOnClick: true
   });
   return 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","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":["'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"],"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","submenuOpen","persistOnClick"],"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"],"mappings":"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","ignoreList":[]}

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

@@ -79,26 +79,31 @@ const useMultilineStyles = makeStyles({
 /**
  * Apply styling to the MenuItemSwitch slots based on the state
  */ export 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 = mergeClasses(menuItemSwitchClassNames.root, state.root.className);
     if (state.content) {
+        // eslint-disable-next-line react-hooks/immutability
         state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);
     }
     if (state.secondaryContent) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);
     }
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);
     }
     if (state.subText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);
     }
     if (state.switchIndicator) {
+        // eslint-disable-next-line react-hooks/immutability
         state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);
     }
     useMenuItemStyles_unstable({
@@ -112,6 +117,7 @@ const useMultilineStyles = makeStyles({
         checkmark: undefined,
         submenuIndicator: undefined,
         hasSubmenu: false,
+        submenuOpen: false,
         persistOnClick: true
     });
     return state;

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

@@ -1,5 +1,5 @@
 export { MenuList } from './MenuList';
 export { renderMenuList_unstable } from './renderMenuList';
-export { useMenuList_unstable } from './useMenuList';
+export { useMenuList_unstable, useMenuListBase_unstable } from './useMenuList';
 export { menuListClassNames, useMenuListStyles_unstable } from './useMenuListStyles.styles';
 export { useMenuListContextValues_unstable } from './useMenuListContextValues';

package/lib/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":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAWtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B;AAC5F,SAASC,iCAAiC,QAAQ,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":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAWtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,EAAEC,wBAAwB,QAAQ,gBAAgB;AAC/E,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B;AAC5F,SAASC,iCAAiC,QAAQ,6BAA6B"}