@fluentui/react-menu 9.24.1 → 9.25.0

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","__resetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useRootBaseStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useSubtextBaseStyles","useStyles","B6of3ja","splitItemMain","Bh6795r","splitItemTrigger","Btl43ni","Beyfa6y","uwmqm3","Ftih45","Ccq8qp","Baz25je","cmx5o7","disabled","sj55zd","Bi91k9c","Jwef8y","eoavqd","Bk3fhr4","Bmfj8id","Bg7n49j","c7f7en","B2d53fq","iro3zm","Bumww26","t0hwav","B7iucu3","Bahaeuw","Bbkh6qg","B3ejlan","B41git9","Boq1n10","Dcq74g","rxnm8d","wxluhh","idgcvv","j9xr24","d","h","f","m","useSubTextStyles","useMultilineStyles","mc9l5x","Beiy3e4","qb2dma","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","multilineStyles","subtextBaseStyles","subTextStyles","multiline","className"],"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nexport const menuItemClassNames = {\n    root: 'fui-MenuItem',\n    icon: 'fui-MenuItem__icon',\n    checkmark: 'fui-MenuItem__checkmark',\n    submenuIndicator: 'fui-MenuItem__submenuIndicator',\n    content: 'fui-MenuItem__content',\n    secondaryContent: 'fui-MenuItem__secondaryContent',\n    subText: 'fui-MenuItem__subText'\n};\nconst useRootBaseStyles = makeResetStyles({\n    borderRadius: tokens.borderRadiusMedium,\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: tokens.spacingVerticalSNudge,\n    paddingLeft: tokens.spacingVerticalSNudge,\n    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n    boxSizing: 'border-box',\n    maxWidth: '290px',\n    minHeight: '32px',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'start',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    gap: '4px',\n    ':hover': {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        color: tokens.colorNeutralForeground2Hover,\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        },\n        [`& .${menuItemClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2BrandSelected\n        },\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Hover\n        }\n    },\n    ':hover:active': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        color: tokens.colorNeutralForeground2Pressed,\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Pressed\n        }\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        ':hover': {\n            backgroundColor: 'Canvas',\n            borderColor: 'Highlight',\n            color: 'Highlight'\n        },\n        ...createFocusOutlineStyle({\n            style: {\n                outlineColor: 'Highlight'\n            }\n        })\n    },\n    userSelect: 'none',\n    ...createFocusOutlineStyle()\n});\nconst useContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1\n});\nconst useSecondaryContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    ...typographyStyles.caption1,\n    lineHeight: tokens.lineHeightBase300,\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n        color: tokens.colorNeutralForeground3Hover\n    },\n    ':focus': {\n        color: tokens.colorNeutralForeground3Hover\n    }\n});\nconst useIconBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    flexShrink: 0\n});\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center'\n});\nconst useSubtextBaseStyles = makeResetStyles({\n    ...typographyStyles.caption2,\n    color: tokens.colorNeutralForeground3\n});\nconst useStyles = makeStyles({\n    checkmark: {\n        marginTop: '2px'\n    },\n    splitItemMain: {\n        flexGrow: 1\n    },\n    splitItemTrigger: {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n        paddingLeft: 0,\n        '::before': {\n            content: '\"\"',\n            width: tokens.strokeWidthThin,\n            height: '24px',\n            backgroundColor: tokens.colorNeutralStroke1\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1,\n            cursor: 'not-allowed',\n            [`& .${iconFilledClassName}`]: {\n                display: 'none'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${menuItemClassNames.icon}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            },\n            [`& .${menuItemClassNames.subText}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1,\n            [`& .${menuItemClassNames.subText}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':focus': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        '@media (forced-colors: active)': {\n            color: 'GrayText',\n            ':hover': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas',\n                [`& .${menuItemClassNames.icon}`]: {\n                    color: 'GrayText',\n                    backgroundColor: 'Canvas'\n                },\n                [`& .${menuItemClassNames.subText}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':hover:active': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas',\n                [`& .${menuItemClassNames.subText}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':focus': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas'\n            }\n        }\n    }\n});\nconst useSubTextStyles = makeStyles({\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    }\n});\nconst useMultilineStyles = makeStyles({\n    content: {\n        display: 'flex',\n        flexDirection: 'column'\n    },\n    secondaryContent: {\n        alignSelf: 'center'\n    },\n    submenuIndicator: {\n        alignSelf: 'center'\n    }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const rootBaseStyles = useRootBaseStyles();\n    const contentBaseStyles = useContentBaseStyles();\n    const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n    const multilineStyles = useMultilineStyles();\n    const subtextBaseStyles = useSubtextBaseStyles();\n    const subTextStyles = useSubTextStyles();\n    const multiline = !!state.subText;\n    state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n    }\n    if (state.submenuIndicator) {\n        state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);\n    }\n    if (state.subText) {\n        state.subText.className = mergeClasses(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);\n    }\n    useCheckmarkStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,EAAAC,aAAA,QAAqC,gBAAgB;AAC1E,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,IAAI,EAAE,oBAAoB;EAC1BC,SAAS,EAAE,yBAAyB;EACpCC,gBAAgB,EAAE,gCAAgC;EAClDC,OAAO,EAAE,uBAAuB;EAChCC,gBAAgB,EAAE,gCAAgC;EAClDC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,iBAAiB,gBAAGf,aAAA;EAAAgB,CAAA;EAAAC,CAAA;AAAA,CAwDzB,CAAC;AACF,MAAMC,oBAAoB,gBAAGlB,aAAA,6MAK5B,CAAC;AACF,MAAMmB,6BAA6B,gBAAGnB,aAAA,6tBAYrC,CAAC;AACF,MAAMoB,iBAAiB,gBAAGpB,aAAA,gKASzB,CAAC;AACF,MAAMqB,6BAA6B,gBAAGrB,aAAA,kJAQrC,CAAC;AACF,MAAMsB,oBAAoB,gBAAGtB,aAAA,kNAG5B,CAAC;AACF,MAAMuB,SAAS,gBAAGxB,QAAA;EAAAW,SAAA;IAAAc,OAAA;EAAA;EAAAC,aAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyEjB,CAAC;AACF,MAAMC,gBAAgB,gBAAGhE,QAAA;EAAAoC,QAAA;IAAAC,MAAA;IAAAY,OAAA;EAAA;AAAA;EAAAW,CAAA;EAAAG,CAAA;IAAAA,CAAA;EAAA;AAAA,CAOxB,CAAC;AACF,MAAME,kBAAkB,gBAAGjE,QAAA;EAAAa,OAAA;IAAAqD,MAAA;IAAAC,OAAA;EAAA;EAAArD,gBAAA;IAAAsD,MAAA;EAAA;EAAAxD,gBAAA;IAAAwD,MAAA;EAAA;AAAA;EAAAR,CAAA;AAAA,CAW1B,CAAC;AACF;AAAyC,OAAO,MAAMS,0BAA0B,GAAIC,KAAK,IAAG;EACxF,aAAa;;EACb,MAAMC,MAAM,GAAG/C,SAAS,CAAC,CAAC;EAC1B,MAAMgD,cAAc,GAAGxD,iBAAiB,CAAC,CAAC;EAC1C,MAAMyD,iBAAiB,GAAGtD,oBAAoB,CAAC,CAAC;EAChD,MAAMuD,0BAA0B,GAAGtD,6BAA6B,CAAC,CAAC;EAClE,MAAMuD,cAAc,GAAGtD,iBAAiB,CAAC,CAAC;EAC1C,MAAMuD,0BAA0B,GAAGtD,6BAA6B,CAAC,CAAC;EAClE,MAAMuD,eAAe,GAAGZ,kBAAkB,CAAC,CAAC;EAC5C,MAAMa,iBAAiB,GAAGvD,oBAAoB,CAAC,CAAC;EAChD,MAAMwD,aAAa,GAAGf,gBAAgB,CAAC,CAAC;EACxC,MAAMgB,SAAS,GAAG,CAAC,CAACV,KAAK,CAACvD,OAAO;EACjCuD,KAAK,CAAC7D,IAAI,CAACwE,SAAS,GAAGlF,YAAY,CAACS,kBAAkB,CAACC,IAAI,EAAE+D,cAAc,EAAEF,KAAK,CAAClC,QAAQ,IAAImC,MAAM,CAACnC,QAAQ,EAAEkC,KAAK,CAAC7D,IAAI,CAACwE,SAAS,CAAC;EACrI,IAAIX,KAAK,CAACzD,OAAO,EAAE;IACfyD,KAAK,CAACzD,OAAO,CAACoE,SAAS,GAAGlF,YAAY,CAACS,kBAAkB,CAACK,OAAO,EAAE4D,iBAAiB,EAAEH,KAAK,CAACzD,OAAO,CAACoE,SAAS,EAAED,SAAS,IAAIH,eAAe,CAAChE,OAAO,CAAC;EACxJ;EACA,IAAIyD,KAAK,CAAC3D,SAAS,EAAE;IACjB2D,KAAK,CAAC3D,SAAS,CAACsE,SAAS,GAAGlF,YAAY,CAACS,kBAAkB,CAACG,SAAS,EAAE4D,MAAM,CAAC5D,SAAS,EAAE2D,KAAK,CAAC3D,SAAS,CAACsE,SAAS,CAAC;EACvH;EACA,IAAIX,KAAK,CAACxD,gBAAgB,EAAE;IACxBwD,KAAK,CAACxD,gBAAgB,CAACmE,SAAS,GAAGlF,YAAY,CAACS,kBAAkB,CAACM,gBAAgB,EAAE4D,0BAA0B,EAAEJ,KAAK,CAAClC,QAAQ,IAAImC,MAAM,CAACnC,QAAQ,EAAEkC,KAAK,CAACxD,gBAAgB,CAACmE,SAAS,EAAED,SAAS,IAAIH,eAAe,CAAC/D,gBAAgB,CAAC;EACxO;EACA,IAAIwD,KAAK,CAAC5D,IAAI,EAAE;IACZ4D,KAAK,CAAC5D,IAAI,CAACuE,SAAS,GAAGlF,YAAY,CAACS,kBAAkB,CAACE,IAAI,EAAEiE,cAAc,EAAEL,KAAK,CAAC5D,IAAI,CAACuE,SAAS,CAAC;EACtG;EACA,IAAIX,KAAK,CAAC1D,gBAAgB,EAAE;IACxB0D,KAAK,CAAC1D,gBAAgB,CAACqE,SAAS,GAAGlF,YAAY,CAACS,kBAAkB,CAACI,gBAAgB,EAAEgE,0BAA0B,EAAEN,KAAK,CAAC1D,gBAAgB,CAACqE,SAAS,EAAED,SAAS,IAAIH,eAAe,CAACjE,gBAAgB,CAAC;EACrM;EACA,IAAI0D,KAAK,CAACvD,OAAO,EAAE;IACfuD,KAAK,CAACvD,OAAO,CAACkE,SAAS,GAAGlF,YAAY,CAACS,kBAAkB,CAACO,OAAO,EAAEuD,KAAK,CAAClC,QAAQ,IAAI2C,aAAa,CAAC3C,QAAQ,EAAEkC,KAAK,CAACvD,OAAO,CAACkE,SAAS,EAAEH,iBAAiB,CAAC;EAC5J;EACAvE,2BAA2B,CAAC+D,KAAK,CAAC;EAClC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","__styles","__resetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useRootBaseStyles","r","s","useContentBaseStyles","useSecondaryContentBaseStyles","useIconBaseStyles","useSubmenuIndicatorBaseStyles","useSubtextBaseStyles","useStyles","B6of3ja","splitItemMain","Bh6795r","splitItemTrigger","Btl43ni","Beyfa6y","uwmqm3","Ftih45","Ccq8qp","Baz25je","cmx5o7","submenuOpen","De3pzq","sj55zd","D0sxk3","t6yez3","B3y4be1","B2i6fwv","By8wz76","B7iucu3","disabled","Bi91k9c","Jwef8y","eoavqd","Bk3fhr4","Bmfj8id","Bg7n49j","c7f7en","B2d53fq","iro3zm","Bumww26","t0hwav","Bahaeuw","Bbkh6qg","B3ejlan","B41git9","Boq1n10","Dcq74g","rxnm8d","wxluhh","idgcvv","j9xr24","d","m","h","f","useSubTextStyles","useMultilineStyles","mc9l5x","Beiy3e4","qb2dma","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","multilineStyles","subtextBaseStyles","subTextStyles","multiline","className"],"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nexport const menuItemClassNames = {\n    root: 'fui-MenuItem',\n    icon: 'fui-MenuItem__icon',\n    checkmark: 'fui-MenuItem__checkmark',\n    submenuIndicator: 'fui-MenuItem__submenuIndicator',\n    content: 'fui-MenuItem__content',\n    secondaryContent: 'fui-MenuItem__secondaryContent',\n    subText: 'fui-MenuItem__subText'\n};\nconst useRootBaseStyles = makeResetStyles({\n    borderRadius: tokens.borderRadiusMedium,\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: tokens.spacingVerticalSNudge,\n    paddingLeft: tokens.spacingVerticalSNudge,\n    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n    boxSizing: 'border-box',\n    maxWidth: '290px',\n    minHeight: '32px',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'start',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    gap: '4px',\n    ':hover': {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        color: tokens.colorNeutralForeground2Hover,\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        },\n        [`& .${menuItemClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2BrandSelected\n        },\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Hover\n        }\n    },\n    ':hover:active': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        color: tokens.colorNeutralForeground2Pressed,\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Pressed\n        }\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        ':hover': {\n            backgroundColor: 'Canvas',\n            borderColor: 'Highlight',\n            color: 'Highlight'\n        },\n        ...createFocusOutlineStyle({\n            style: {\n                outlineColor: 'Highlight'\n            }\n        })\n    },\n    userSelect: 'none',\n    ...createFocusOutlineStyle()\n});\nconst useContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1\n});\nconst useSecondaryContentBaseStyles = makeResetStyles({\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    ...typographyStyles.caption1,\n    lineHeight: tokens.lineHeightBase300,\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n        color: tokens.colorNeutralForeground3Hover\n    },\n    ':focus': {\n        color: tokens.colorNeutralForeground3Hover\n    }\n});\nconst useIconBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    flexShrink: 0\n});\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center'\n});\nconst useSubtextBaseStyles = makeResetStyles({\n    ...typographyStyles.caption2,\n    color: tokens.colorNeutralForeground3\n});\nconst useStyles = makeStyles({\n    checkmark: {\n        marginTop: '2px'\n    },\n    splitItemMain: {\n        flexGrow: 1\n    },\n    splitItemTrigger: {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n        paddingLeft: 0,\n        '::before': {\n            content: '\"\"',\n            width: tokens.strokeWidthThin,\n            height: '24px',\n            backgroundColor: tokens.colorNeutralStroke1\n        }\n    },\n    submenuOpen: {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        color: tokens.colorNeutralForeground2Hover,\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        },\n        [`& .${menuItemClassNames.icon}`]: {\n            color: tokens.colorNeutralForeground2BrandSelected\n        },\n        [`& .${menuItemClassNames.subText}`]: {\n            color: tokens.colorNeutralForeground3Hover\n        },\n        '@media (forced-colors: active)': {\n            backgroundColor: 'Canvas',\n            color: 'Highlight'\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1,\n            cursor: 'not-allowed',\n            [`& .${iconFilledClassName}`]: {\n                display: 'none'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'inline'\n            },\n            [`& .${menuItemClassNames.icon}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            },\n            [`& .${menuItemClassNames.subText}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active': {\n            color: tokens.colorNeutralForegroundDisabled,\n            backgroundColor: tokens.colorNeutralBackground1,\n            [`& .${menuItemClassNames.subText}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':focus': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        '@media (forced-colors: active)': {\n            color: 'GrayText',\n            ':hover': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas',\n                [`& .${menuItemClassNames.icon}`]: {\n                    color: 'GrayText',\n                    backgroundColor: 'Canvas'\n                },\n                [`& .${menuItemClassNames.subText}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':hover:active': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas',\n                [`& .${menuItemClassNames.subText}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':focus': {\n                color: 'GrayText',\n                backgroundColor: 'Canvas'\n            }\n        }\n    }\n});\nconst useSubTextStyles = makeStyles({\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    }\n});\nconst useMultilineStyles = makeStyles({\n    content: {\n        display: 'flex',\n        flexDirection: 'column'\n    },\n    secondaryContent: {\n        alignSelf: 'center'\n    },\n    submenuIndicator: {\n        alignSelf: 'center'\n    }\n});\n/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const rootBaseStyles = useRootBaseStyles();\n    const contentBaseStyles = useContentBaseStyles();\n    const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n    const multilineStyles = useMultilineStyles();\n    const subtextBaseStyles = useSubtextBaseStyles();\n    const subTextStyles = useSubTextStyles();\n    const multiline = !!state.subText;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.submenuOpen && styles.submenuOpen, state.disabled && styles.disabled, state.root.className);\n    if (state.content) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);\n    }\n    if (state.checkmark) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n    }\n    if (state.secondaryContent) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);\n    }\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n    }\n    if (state.submenuIndicator) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);\n    }\n    if (state.subText) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.subText.className = mergeClasses(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);\n    }\n    useCheckmarkStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -130,6 +130,26 @@ const useStyles = makeStyles({
             backgroundColor: tokens.colorNeutralStroke1
         }
     },
+    submenuOpen: {
+        backgroundColor: tokens.colorNeutralBackground1Hover,
+        color: tokens.colorNeutralForeground2Hover,
+        [`& .${iconFilledClassName}`]: {
+            display: 'inline'
+        },
+        [`& .${iconRegularClassName}`]: {
+            display: 'none'
+        },
+        [`& .${menuItemClassNames.icon}`]: {
+            color: tokens.colorNeutralForeground2BrandSelected
+        },
+        [`& .${menuItemClassNames.subText}`]: {
+            color: tokens.colorNeutralForeground3Hover
+        },
+        '@media (forced-colors: active)': {
+            backgroundColor: 'Canvas',
+            color: 'Highlight'
+        }
+    },
     disabled: {
         color: tokens.colorNeutralForegroundDisabled,
         ':hover': {
@@ -218,23 +238,30 @@ const useMultilineStyles = makeStyles({
     const subtextBaseStyles = useSubtextBaseStyles();
     const subTextStyles = useSubTextStyles();
     const multiline = !!state.subText;
-    state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
+    state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.submenuOpen && styles.submenuOpen, state.disabled && styles.disabled, state.root.className);
     if (state.content) {
+        // eslint-disable-next-line react-hooks/immutability
         state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);
     }
     if (state.checkmark) {
+        // eslint-disable-next-line react-hooks/immutability
         state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);
     }
     if (state.secondaryContent) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);
     }
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);
     }
     if (state.submenuIndicator) {
+        // eslint-disable-next-line react-hooks/immutability
         state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);
     }
     if (state.subText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.subText.className = mergeClasses(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);
     }
     useCheckmarkStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItem/useMenuItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n  root: 'fui-MenuItem',\n  icon: 'fui-MenuItem__icon',\n  checkmark: 'fui-MenuItem__checkmark',\n  submenuIndicator: 'fui-MenuItem__submenuIndicator',\n  content: 'fui-MenuItem__content',\n  secondaryContent: 'fui-MenuItem__secondaryContent',\n  subText: 'fui-MenuItem__subText',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  borderRadius: tokens.borderRadiusMedium,\n  position: 'relative',\n  color: tokens.colorNeutralForeground2,\n  backgroundColor: tokens.colorNeutralBackground1,\n  paddingRight: tokens.spacingVerticalSNudge, // 6px\n  paddingLeft: tokens.spacingVerticalSNudge,\n  paddingTop: tokens.spacingVerticalSNudge,\n  paddingBottom: tokens.spacingVerticalSNudge,\n  boxSizing: 'border-box',\n  maxWidth: '290px',\n  minHeight: '32px',\n  flexShrink: 0,\n  display: 'flex',\n  alignItems: 'start',\n  fontSize: tokens.fontSizeBase300,\n  cursor: 'pointer',\n  gap: '4px',\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n    [`& .${menuItemClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground2BrandSelected,\n    },\n\n    [`& .${menuItemClassNames.subText}`]: {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n\n    [`& .${menuItemClassNames.subText}`]: {\n      color: tokens.colorNeutralForeground3Pressed,\n    },\n  },\n\n  // High contrast styles\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'Canvas',\n      borderColor: 'Highlight',\n      color: 'Highlight',\n    },\n    ...createFocusOutlineStyle({ style: { outlineColor: 'Highlight' } }),\n  },\n\n  userSelect: 'none',\n  ...createFocusOutlineStyle(),\n});\n\nconst useContentBaseStyles = makeResetStyles({\n  paddingLeft: '2px',\n  paddingRight: '2px',\n  backgroundColor: 'transparent',\n  flexGrow: 1,\n});\n\nconst useSecondaryContentBaseStyles = makeResetStyles({\n  paddingLeft: '2px',\n  paddingRight: '2px',\n  ...typographyStyles.caption1,\n  lineHeight: tokens.lineHeightBase300,\n  color: tokens.colorNeutralForeground3,\n  ':hover': {\n    color: tokens.colorNeutralForeground3Hover,\n  },\n  ':focus': {\n    color: tokens.colorNeutralForeground3Hover,\n  },\n});\n\nconst useIconBaseStyles = makeResetStyles({\n  width: '20px',\n  height: '20px',\n  fontSize: '20px',\n  lineHeight: 0,\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n  flexShrink: 0,\n});\n\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n  width: '20px',\n  height: '20px',\n  fontSize: '20px',\n  lineHeight: 0,\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n});\n\nconst useSubtextBaseStyles = makeResetStyles({\n  ...typographyStyles.caption2,\n  color: tokens.colorNeutralForeground3,\n});\n\nconst useStyles = makeStyles({\n  checkmark: {\n    marginTop: '2px',\n  },\n\n  splitItemMain: {\n    flexGrow: 1,\n  },\n\n  splitItemTrigger: {\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n    paddingLeft: 0,\n    '::before': {\n      content: '\"\"',\n      width: tokens.strokeWidthThin,\n      height: '24px',\n      backgroundColor: tokens.colorNeutralStroke1,\n    },\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':hover': {\n      color: tokens.colorNeutralForegroundDisabled,\n      backgroundColor: tokens.colorNeutralBackground1,\n      cursor: 'not-allowed',\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${menuItemClassNames.icon}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n      [`& .${menuItemClassNames.subText}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':hover:active': {\n      color: tokens.colorNeutralForegroundDisabled,\n      backgroundColor: tokens.colorNeutralBackground1,\n\n      [`& .${menuItemClassNames.subText}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':focus': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n      ':hover': {\n        color: 'GrayText',\n        backgroundColor: 'Canvas',\n        [`& .${menuItemClassNames.icon}`]: {\n          color: 'GrayText',\n          backgroundColor: 'Canvas',\n        },\n        [`& .${menuItemClassNames.subText}`]: {\n          color: 'GrayText',\n        },\n      },\n      ':hover:active': {\n        color: 'GrayText',\n        backgroundColor: 'Canvas',\n        [`& .${menuItemClassNames.subText}`]: {\n          color: 'GrayText',\n        },\n      },\n      ':focus': {\n        color: 'GrayText',\n        backgroundColor: 'Canvas',\n      },\n    },\n  },\n});\n\nconst useSubTextStyles = makeStyles({\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n});\n\nconst useMultilineStyles = makeStyles({\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  secondaryContent: {\n    alignSelf: 'center',\n  },\n\n  submenuIndicator: {\n    alignSelf: 'center',\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState): MenuItemState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const rootBaseStyles = useRootBaseStyles();\n  const contentBaseStyles = useContentBaseStyles();\n  const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n  const iconBaseStyles = useIconBaseStyles();\n  const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n  const multilineStyles = useMultilineStyles();\n  const subtextBaseStyles = useSubtextBaseStyles();\n  const subTextStyles = useSubTextStyles();\n  const multiline = !!state.subText;\n  state.root.className = mergeClasses(\n    menuItemClassNames.root,\n    rootBaseStyles,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.content) {\n    state.content.className = mergeClasses(\n      menuItemClassNames.content,\n      contentBaseStyles,\n      state.content.className,\n      multiline && multilineStyles.content,\n    );\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemClassNames.secondaryContent,\n      secondaryContentBaseStyles,\n      state.disabled && styles.disabled,\n      state.secondaryContent.className,\n      multiline && multilineStyles.secondaryContent,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n  }\n\n  if (state.submenuIndicator) {\n    state.submenuIndicator.className = mergeClasses(\n      menuItemClassNames.submenuIndicator,\n      submenuIndicatorBaseStyles,\n      state.submenuIndicator.className,\n      multiline && multilineStyles.submenuIndicator,\n    );\n  }\n\n  if (state.subText) {\n    state.subText.className = mergeClasses(\n      menuItemClassNames.subText,\n      state.disabled && subTextStyles.disabled,\n      state.subText.className,\n      subtextBaseStyles,\n    );\n  }\n\n  useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","makeResetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useRootBaseStyles","borderRadius","borderRadiusMedium","position","color","colorNeutralForeground2","backgroundColor","colorNeutralBackground1","paddingRight","spacingVerticalSNudge","paddingLeft","paddingTop","paddingBottom","boxSizing","maxWidth","minHeight","flexShrink","display","alignItems","fontSize","fontSizeBase300","cursor","gap","colorNeutralBackground1Hover","colorNeutralForeground2Hover","colorNeutralForeground2BrandSelected","colorNeutralForeground3Hover","colorNeutralBackground1Pressed","colorNeutralForeground2Pressed","colorNeutralForeground3Pressed","borderColor","style","outlineColor","userSelect","useContentBaseStyles","flexGrow","useSecondaryContentBaseStyles","caption1","lineHeight","lineHeightBase300","colorNeutralForeground3","useIconBaseStyles","width","height","justifyContent","useSubmenuIndicatorBaseStyles","useSubtextBaseStyles","caption2","useStyles","marginTop","splitItemMain","splitItemTrigger","borderTopLeftRadius","borderBottomLeftRadius","strokeWidthThin","colorNeutralStroke1","disabled","colorNeutralForegroundDisabled","useSubTextStyles","useMultilineStyles","flexDirection","alignSelf","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","multilineStyles","subtextBaseStyles","subTextStyles","multiline","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/MenuItem/useMenuItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n  root: 'fui-MenuItem',\n  icon: 'fui-MenuItem__icon',\n  checkmark: 'fui-MenuItem__checkmark',\n  submenuIndicator: 'fui-MenuItem__submenuIndicator',\n  content: 'fui-MenuItem__content',\n  secondaryContent: 'fui-MenuItem__secondaryContent',\n  subText: 'fui-MenuItem__subText',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  borderRadius: tokens.borderRadiusMedium,\n  position: 'relative',\n  color: tokens.colorNeutralForeground2,\n  backgroundColor: tokens.colorNeutralBackground1,\n  paddingRight: tokens.spacingVerticalSNudge, // 6px\n  paddingLeft: tokens.spacingVerticalSNudge,\n  paddingTop: tokens.spacingVerticalSNudge,\n  paddingBottom: tokens.spacingVerticalSNudge,\n  boxSizing: 'border-box',\n  maxWidth: '290px',\n  minHeight: '32px',\n  flexShrink: 0,\n  display: 'flex',\n  alignItems: 'start',\n  fontSize: tokens.fontSizeBase300,\n  cursor: 'pointer',\n  gap: '4px',\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n    [`& .${menuItemClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground2BrandSelected,\n    },\n\n    [`& .${menuItemClassNames.subText}`]: {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n\n    [`& .${menuItemClassNames.subText}`]: {\n      color: tokens.colorNeutralForeground3Pressed,\n    },\n  },\n\n  // High contrast styles\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'Canvas',\n      borderColor: 'Highlight',\n      color: 'Highlight',\n    },\n    ...createFocusOutlineStyle({ style: { outlineColor: 'Highlight' } }),\n  },\n\n  userSelect: 'none',\n  ...createFocusOutlineStyle(),\n});\n\nconst useContentBaseStyles = makeResetStyles({\n  paddingLeft: '2px',\n  paddingRight: '2px',\n  backgroundColor: 'transparent',\n  flexGrow: 1,\n});\n\nconst useSecondaryContentBaseStyles = makeResetStyles({\n  paddingLeft: '2px',\n  paddingRight: '2px',\n  ...typographyStyles.caption1,\n  lineHeight: tokens.lineHeightBase300,\n  color: tokens.colorNeutralForeground3,\n  ':hover': {\n    color: tokens.colorNeutralForeground3Hover,\n  },\n  ':focus': {\n    color: tokens.colorNeutralForeground3Hover,\n  },\n});\n\nconst useIconBaseStyles = makeResetStyles({\n  width: '20px',\n  height: '20px',\n  fontSize: '20px',\n  lineHeight: 0,\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n  flexShrink: 0,\n});\n\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n  width: '20px',\n  height: '20px',\n  fontSize: '20px',\n  lineHeight: 0,\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n});\n\nconst useSubtextBaseStyles = makeResetStyles({\n  ...typographyStyles.caption2,\n  color: tokens.colorNeutralForeground3,\n});\n\nconst useStyles = makeStyles({\n  checkmark: {\n    marginTop: '2px',\n  },\n\n  splitItemMain: {\n    flexGrow: 1,\n  },\n\n  splitItemTrigger: {\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n    paddingLeft: 0,\n    '::before': {\n      content: '\"\"',\n      width: tokens.strokeWidthThin,\n      height: '24px',\n      backgroundColor: tokens.colorNeutralStroke1,\n    },\n  },\n  submenuOpen: {\n    backgroundColor: tokens.colorNeutralBackground1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n    [`& .${menuItemClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground2BrandSelected,\n    },\n\n    [`& .${menuItemClassNames.subText}`]: {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Canvas',\n      color: 'Highlight',\n    },\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':hover': {\n      color: tokens.colorNeutralForegroundDisabled,\n      backgroundColor: tokens.colorNeutralBackground1,\n      cursor: 'not-allowed',\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${menuItemClassNames.icon}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n      [`& .${menuItemClassNames.subText}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':hover:active': {\n      color: tokens.colorNeutralForegroundDisabled,\n      backgroundColor: tokens.colorNeutralBackground1,\n\n      [`& .${menuItemClassNames.subText}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':focus': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n      ':hover': {\n        color: 'GrayText',\n        backgroundColor: 'Canvas',\n        [`& .${menuItemClassNames.icon}`]: {\n          color: 'GrayText',\n          backgroundColor: 'Canvas',\n        },\n        [`& .${menuItemClassNames.subText}`]: {\n          color: 'GrayText',\n        },\n      },\n      ':hover:active': {\n        color: 'GrayText',\n        backgroundColor: 'Canvas',\n        [`& .${menuItemClassNames.subText}`]: {\n          color: 'GrayText',\n        },\n      },\n      ':focus': {\n        color: 'GrayText',\n        backgroundColor: 'Canvas',\n      },\n    },\n  },\n});\n\nconst useSubTextStyles = makeStyles({\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n});\n\nconst useMultilineStyles = makeStyles({\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  secondaryContent: {\n    alignSelf: 'center',\n  },\n\n  submenuIndicator: {\n    alignSelf: 'center',\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState): MenuItemState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const rootBaseStyles = useRootBaseStyles();\n  const contentBaseStyles = useContentBaseStyles();\n  const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n  const iconBaseStyles = useIconBaseStyles();\n  const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n  const multilineStyles = useMultilineStyles();\n  const subtextBaseStyles = useSubtextBaseStyles();\n  const subTextStyles = useSubTextStyles();\n  const multiline = !!state.subText;\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    menuItemClassNames.root,\n    rootBaseStyles,\n    state.submenuOpen && styles.submenuOpen,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.content) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.content.className = mergeClasses(\n      menuItemClassNames.content,\n      contentBaseStyles,\n      state.content.className,\n      multiline && multilineStyles.content,\n    );\n  }\n\n  if (state.checkmark) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n  }\n\n  if (state.secondaryContent) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.secondaryContent.className = mergeClasses(\n      menuItemClassNames.secondaryContent,\n      secondaryContentBaseStyles,\n      state.disabled && styles.disabled,\n      state.secondaryContent.className,\n      multiline && multilineStyles.secondaryContent,\n    );\n  }\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n  }\n\n  if (state.submenuIndicator) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.submenuIndicator.className = mergeClasses(\n      menuItemClassNames.submenuIndicator,\n      submenuIndicatorBaseStyles,\n      state.submenuIndicator.className,\n      multiline && multilineStyles.submenuIndicator,\n    );\n  }\n\n  if (state.subText) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.subText.className = mergeClasses(\n      menuItemClassNames.subText,\n      state.disabled && subTextStyles.disabled,\n      state.subText.className,\n      subtextBaseStyles,\n    );\n  }\n\n  useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","makeResetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useRootBaseStyles","borderRadius","borderRadiusMedium","position","color","colorNeutralForeground2","backgroundColor","colorNeutralBackground1","paddingRight","spacingVerticalSNudge","paddingLeft","paddingTop","paddingBottom","boxSizing","maxWidth","minHeight","flexShrink","display","alignItems","fontSize","fontSizeBase300","cursor","gap","colorNeutralBackground1Hover","colorNeutralForeground2Hover","colorNeutralForeground2BrandSelected","colorNeutralForeground3Hover","colorNeutralBackground1Pressed","colorNeutralForeground2Pressed","colorNeutralForeground3Pressed","borderColor","style","outlineColor","userSelect","useContentBaseStyles","flexGrow","useSecondaryContentBaseStyles","caption1","lineHeight","lineHeightBase300","colorNeutralForeground3","useIconBaseStyles","width","height","justifyContent","useSubmenuIndicatorBaseStyles","useSubtextBaseStyles","caption2","useStyles","marginTop","splitItemMain","splitItemTrigger","borderTopLeftRadius","borderBottomLeftRadius","strokeWidthThin","colorNeutralStroke1","submenuOpen","disabled","colorNeutralForegroundDisabled","useSubTextStyles","useMultilineStyles","flexDirection","alignSelf","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","multilineStyles","subtextBaseStyles","subTextStyles","multiline","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,EAAEC,eAAe,QAAQ,iBAAiB;AAC3E,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,wBAAwB;AAClF,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,2BAA2B,QAAQ,yBAAyB;AAKrE,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,kBAAkB;IAClBC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX,EAAE;AAEF,MAAMC,oBAAoBf,gBAAgB;IACxCgB,cAAcZ,OAAOa,kBAAkB;IACvCC,UAAU;IACVC,OAAOf,OAAOgB,uBAAuB;IACrCC,iBAAiBjB,OAAOkB,uBAAuB;IAC/CC,cAAcnB,OAAOoB,qBAAqB;IAC1CC,aAAarB,OAAOoB,qBAAqB;IACzCE,YAAYtB,OAAOoB,qBAAqB;IACxCG,eAAevB,OAAOoB,qBAAqB;IAC3CI,WAAW;IACXC,UAAU;IACVC,WAAW;IACXC,YAAY;IACZC,SAAS;IACTC,YAAY;IACZC,UAAU9B,OAAO+B,eAAe;IAChCC,QAAQ;IACRC,KAAK;IAEL,UAAU;QACRhB,iBAAiBjB,OAAOkC,4BAA4B;QACpDnB,OAAOf,OAAOmC,4BAA4B;QAE1C,CAAC,CAAC,GAAG,EAAEtC,qBAAqB,CAAC,EAAE;YAC7B+B,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAE9B,sBAAsB,CAAC,EAAE;YAC9B8B,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEzB,mBAAmBE,IAAI,EAAE,CAAC,EAAE;YACjCU,OAAOf,OAAOoC,oCAAoC;QACpD;QAEA,CAAC,CAAC,GAAG,EAAEjC,mBAAmBO,OAAO,EAAE,CAAC,EAAE;YACpCK,OAAOf,OAAOqC,4BAA4B;QAC5C;IACF;IAEA,iBAAiB;QACfpB,iBAAiBjB,OAAOsC,8BAA8B;QACtDvB,OAAOf,OAAOuC,8BAA8B;QAE5C,CAAC,CAAC,GAAG,EAAEpC,mBAAmBO,OAAO,EAAE,CAAC,EAAE;YACpCK,OAAOf,OAAOwC,8BAA8B;QAC9C;IACF;IAEA,uBAAuB;IACvB,kCAAkC;QAChC,UAAU;YACRvB,iBAAiB;YACjBwB,aAAa;YACb1B,OAAO;QACT;QACA,GAAGhB,wBAAwB;YAAE2C,OAAO;gBAAEC,cAAc;YAAY;QAAE,EAAE;IACtE;IAEAC,YAAY;IACZ,GAAG7C,yBAAyB;AAC9B;AAEA,MAAM8C,uBAAuBjD,gBAAgB;IAC3CyB,aAAa;IACbF,cAAc;IACdF,iBAAiB;IACjB6B,UAAU;AACZ;AAEA,MAAMC,gCAAgCnD,gBAAgB;IACpDyB,aAAa;IACbF,cAAc;IACd,GAAGlB,iBAAiB+C,QAAQ;IAC5BC,YAAYjD,OAAOkD,iBAAiB;IACpCnC,OAAOf,OAAOmD,uBAAuB;IACrC,UAAU;QACRpC,OAAOf,OAAOqC,4BAA4B;IAC5C;IACA,UAAU;QACRtB,OAAOf,OAAOqC,4BAA4B;IAC5C;AACF;AAEA,MAAMe,oBAAoBxD,gBAAgB;IACxCyD,OAAO;IACPC,QAAQ;IACRxB,UAAU;IACVmB,YAAY;IACZpB,YAAY;IACZD,SAAS;IACT2B,gBAAgB;IAChB5B,YAAY;AACd;AAEA,MAAM6B,gCAAgC5D,gBAAgB;IACpDyD,OAAO;IACPC,QAAQ;IACRxB,UAAU;IACVmB,YAAY;IACZpB,YAAY;IACZD,SAAS;IACT2B,gBAAgB;AAClB;AAEA,MAAME,uBAAuB7D,gBAAgB;IAC3C,GAAGK,iBAAiByD,QAAQ;IAC5B3C,OAAOf,OAAOmD,uBAAuB;AACvC;AAEA,MAAMQ,YAAYhE,WAAW;IAC3BW,WAAW;QACTsD,WAAW;IACb;IAEAC,eAAe;QACbf,UAAU;IACZ;IAEAgB,kBAAkB;QAChBC,qBAAqB;QACrBC,wBAAwB;QACxB3C,aAAa;QACb,YAAY;YACVb,SAAS;YACT6C,OAAOrD,OAAOiE,eAAe;YAC7BX,QAAQ;YACRrC,iBAAiBjB,OAAOkE,mBAAmB;QAC7C;IACF;IACAC,aAAa;QACXlD,iBAAiBjB,OAAOkC,4BAA4B;QACpDnB,OAAOf,OAAOmC,4BAA4B;QAE1C,CAAC,CAAC,GAAG,EAAEtC,qBAAqB,CAAC,EAAE;YAC7B+B,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAE9B,sBAAsB,CAAC,EAAE;YAC9B8B,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEzB,mBAAmBE,IAAI,EAAE,CAAC,EAAE;YACjCU,OAAOf,OAAOoC,oCAAoC;QACpD;QAEA,CAAC,CAAC,GAAG,EAAEjC,mBAAmBO,OAAO,EAAE,CAAC,EAAE;YACpCK,OAAOf,OAAOqC,4BAA4B;QAC5C;QAEA,kCAAkC;YAChCpB,iBAAiB;YACjBF,OAAO;QACT;IACF;IACAqD,UAAU;QACRrD,OAAOf,OAAOqE,8BAA8B;QAC5C,UAAU;YACRtD,OAAOf,OAAOqE,8BAA8B;YAC5CpD,iBAAiBjB,OAAOkB,uBAAuB;YAC/Cc,QAAQ;YACR,CAAC,CAAC,GAAG,EAAEnC,qBAAqB,CAAC,EAAE;gBAC7B+B,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAE9B,sBAAsB,CAAC,EAAE;gBAC9B8B,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEzB,mBAAmBE,IAAI,EAAE,CAAC,EAAE;gBACjCU,OAAOf,OAAOqE,8BAA8B;YAC9C;YACA,CAAC,CAAC,GAAG,EAAElE,mBAAmBO,OAAO,EAAE,CAAC,EAAE;gBACpCK,OAAOf,OAAOqE,8BAA8B;YAC9C;QACF;QAEA,iBAAiB;YACftD,OAAOf,OAAOqE,8BAA8B;YAC5CpD,iBAAiBjB,OAAOkB,uBAAuB;YAE/C,CAAC,CAAC,GAAG,EAAEf,mBAAmBO,OAAO,EAAE,CAAC,EAAE;gBACpCK,OAAOf,OAAOqE,8BAA8B;YAC9C;QACF;QAEA,UAAU;YACRtD,OAAOf,OAAOqE,8BAA8B;QAC9C;QAEA,kCAAkC;YAChCtD,OAAO;YACP,UAAU;gBACRA,OAAO;gBACPE,iBAAiB;gBACjB,CAAC,CAAC,GAAG,EAAEd,mBAAmBE,IAAI,EAAE,CAAC,EAAE;oBACjCU,OAAO;oBACPE,iBAAiB;gBACnB;gBACA,CAAC,CAAC,GAAG,EAAEd,mBAAmBO,OAAO,EAAE,CAAC,EAAE;oBACpCK,OAAO;gBACT;YACF;YACA,iBAAiB;gBACfA,OAAO;gBACPE,iBAAiB;gBACjB,CAAC,CAAC,GAAG,EAAEd,mBAAmBO,OAAO,EAAE,CAAC,EAAE;oBACpCK,OAAO;gBACT;YACF;YACA,UAAU;gBACRA,OAAO;gBACPE,iBAAiB;YACnB;QACF;IACF;AACF;AAEA,MAAMqD,mBAAmB3E,WAAW;IAClCyE,UAAU;QACRrD,OAAOf,OAAOqE,8BAA8B;QAE5C,kCAAkC;YAChCtD,OAAO;QACT;IACF;AACF;AAEA,MAAMwD,qBAAqB5E,WAAW;IACpCa,SAAS;QACPoB,SAAS;QACT4C,eAAe;IACjB;IAEA/D,kBAAkB;QAChBgE,WAAW;IACb;IAEAlE,kBAAkB;QAChBkE,WAAW;IACb;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASjB;IACf,MAAMkB,iBAAiBlE;IACvB,MAAMmE,oBAAoBjC;IAC1B,MAAMkC,6BAA6BhC;IACnC,MAAMiC,iBAAiB5B;IACvB,MAAM6B,6BAA6BzB;IACnC,MAAM0B,kBAAkBX;IACxB,MAAMY,oBAAoB1B;IAC1B,MAAM2B,gBAAgBd;IACtB,MAAMe,YAAY,CAAC,CAACV,MAAMjE,OAAO;IACjC,oDAAoD;IACpDiE,MAAMvE,IAAI,CAACkF,SAAS,GAAG5F,aACrBS,mBAAmBC,IAAI,EACvByE,gBACAF,MAAMR,WAAW,IAAIS,OAAOT,WAAW,EACvCQ,MAAMP,QAAQ,IAAIQ,OAAOR,QAAQ,EACjCO,MAAMvE,IAAI,CAACkF,SAAS;IAGtB,IAAIX,MAAMnE,OAAO,EAAE;QACjB,oDAAoD;QACpDmE,MAAMnE,OAAO,CAAC8E,SAAS,GAAG5F,aACxBS,mBAAmBK,OAAO,EAC1BsE,mBACAH,MAAMnE,OAAO,CAAC8E,SAAS,EACvBD,aAAaH,gBAAgB1E,OAAO;IAExC;IAEA,IAAImE,MAAMrE,SAAS,EAAE;QACnB,oDAAoD;QACpDqE,MAAMrE,SAAS,CAACgF,SAAS,GAAG5F,aAAaS,mBAAmBG,SAAS,EAAEsE,OAAOtE,SAAS,EAAEqE,MAAMrE,SAAS,CAACgF,SAAS;IACpH;IAEA,IAAIX,MAAMlE,gBAAgB,EAAE;QAC1B,oDAAoD;QACpDkE,MAAMlE,gBAAgB,CAAC6E,SAAS,GAAG5F,aACjCS,mBAAmBM,gBAAgB,EACnCsE,4BACAJ,MAAMP,QAAQ,IAAIQ,OAAOR,QAAQ,EACjCO,MAAMlE,gBAAgB,CAAC6E,SAAS,EAChCD,aAAaH,gBAAgBzE,gBAAgB;IAEjD;IAEA,IAAIkE,MAAMtE,IAAI,EAAE;QACd,oDAAoD;QACpDsE,MAAMtE,IAAI,CAACiF,SAAS,GAAG5F,aAAaS,mBAAmBE,IAAI,EAAE2E,gBAAgBL,MAAMtE,IAAI,CAACiF,SAAS;IACnG;IAEA,IAAIX,MAAMpE,gBAAgB,EAAE;QAC1B,oDAAoD;QACpDoE,MAAMpE,gBAAgB,CAAC+E,SAAS,GAAG5F,aACjCS,mBAAmBI,gBAAgB,EACnC0E,4BACAN,MAAMpE,gBAAgB,CAAC+E,SAAS,EAChCD,aAAaH,gBAAgB3E,gBAAgB;IAEjD;IAEA,IAAIoE,MAAMjE,OAAO,EAAE;QACjB,oDAAoD;QACpDiE,MAAMjE,OAAO,CAAC4E,SAAS,GAAG5F,aACxBS,mBAAmBO,OAAO,EAC1BiE,MAAMP,QAAQ,IAAIgB,cAAchB,QAAQ,EACxCO,MAAMjE,OAAO,CAAC4E,SAAS,EACvBH;IAEJ;IAEAjF,4BAA4ByE;IAE5B,OAAOA;AACT,EAAE"}

package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.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';
 /** Returns the props and state required to render the component */ export const useMenuItemCheckbox_unstable = (props, ref)=>{
     const state = useMenuItemCheckboxBase_unstable(props, ref);
     // Set default checkmark icon
@@ -16,8 +16,6 @@ import { useMenuItemBase_unstable } from '../MenuItem/useMenuItem';
 };
 /**
  * Base hook for MenuItemCheckbox component, produces state required to render the component
- *
- * @internal
  */ export const useMenuItemCheckboxBase_unstable = (props, ref)=>{
     const toggleCheckbox = useMenuListContext_unstable((context)=>context.toggleCheckbox);
     const { name, value } = props;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemCheckbox/useMenuItemCheckbox.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 { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\n/** Returns the props and state required to render the component */\nexport const useMenuItemCheckbox_unstable = (\n  props: MenuItemCheckboxProps,\n  ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemCheckboxState => {\n  const state = useMenuItemCheckboxBase_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 MenuItemCheckbox component, produces state required to render the component\n *\n * @internal\n */\nexport const useMenuItemCheckboxBase_unstable = (\n  props: MenuItemCheckboxProps,\n  ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemCheckboxState => {\n  const toggleCheckbox = useMenuListContext_unstable(context => context.toggleCheckbox);\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 state: MenuItemCheckboxState = {\n    ...useMenuItemBase_unstable(\n      {\n        role: 'menuitemcheckbox',\n        persistOnClick: true,\n        ...props,\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          toggleCheckbox?.(e, name, value, checked);\n          props.onClick?.(e);\n        },\n      },\n      ref,\n    ),\n    name,\n    value,\n    checked,\n  };\n\n  return state;\n};\n"],"names":["React","slot","Checkmark16Filled","useMenuListContext_unstable","useMenuItemBase_unstable","useMenuItemCheckbox_unstable","props","ref","state","useMenuItemCheckboxBase_unstable","checkmark","children","toggleCheckbox","context","name","value","checked","checkedItems","checkedValues","indexOf","role","persistOnClick","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;AAInE,iEAAiE,GACjE,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEA,MAAMC,QAAQC,iCAAiCH,OAAOC;IAEtD,6BAA6B;IAC7B,IAAIC,MAAME,SAAS,EAAE;YACnBF;;QAAAA,cAAAA,mBAAAA,MAAME,SAAS,EAACC,yDAAhBH,iBAAgBG,yBAAa,oBAACT;IAChC;IAEA,OAAOM;AACT,EAAE;AAEF;;;;CAIC,GACD,OAAO,MAAMC,mCAAmC,CAC9CH,OACAC;IAEA,MAAMK,iBAAiBT,4BAA4BU,CAAAA,UAAWA,QAAQD,cAAc;IACpF,MAAM,EAAEE,IAAI,EAAEC,KAAK,EAAE,GAAGT;IAExB,MAAMU,UAAUb,4BAA4BU,CAAAA;YACrBA;QAArB,MAAMI,eAAeJ,EAAAA,yBAAAA,QAAQK,aAAa,cAArBL,6CAAAA,sBAAuB,CAACC,KAAK,KAAI,EAAE;QACxD,OAAOG,aAAaE,OAAO,CAACJ,WAAW,CAAC;IAC1C;IAEA,MAAMP,QAA+B;QACnC,GAAGJ,yBACD;YACEgB,MAAM;YACNC,gBAAgB;YAChB,GAAGf,KAAK;YACR,gBAAgBU;YAChBN,WAAWT,KAAKqB,QAAQ,CAAChB,MAAMI,SAAS,EAAE;gBACxCa,iBAAiB;gBACjBC,aAAa;YACf;YACAC,SAAS,CAACC;oBAERpB;gBADAM,2BAAAA,qCAAAA,eAAiBc,GAAGZ,MAAMC,OAAOC;iBACjCV,iBAAAA,MAAMmB,OAAO,cAAbnB,qCAAAA,oBAAAA,OAAgBoB;YAClB;QACF,GACAnB,IACD;QACDO;QACAC;QACAC;IACF;IAEA,OAAOR;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuItemCheckbox/useMenuItemCheckbox.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 { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\n/** Returns the props and state required to render the component */\nexport const useMenuItemCheckbox_unstable = (\n  props: MenuItemCheckboxProps,\n  ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemCheckboxState => {\n  const state = useMenuItemCheckboxBase_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 MenuItemCheckbox component, produces state required to render the component\n */\nexport const useMenuItemCheckboxBase_unstable = (\n  props: MenuItemCheckboxProps,\n  ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemCheckboxState => {\n  const toggleCheckbox = useMenuListContext_unstable(context => context.toggleCheckbox);\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 state: MenuItemCheckboxState = {\n    ...useMenuItemBase_unstable(\n      {\n        role: 'menuitemcheckbox',\n        persistOnClick: true,\n        ...props,\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          toggleCheckbox?.(e, name, value, checked);\n          props.onClick?.(e);\n        },\n      },\n      ref,\n    ),\n    name,\n    value,\n    checked,\n  };\n\n  return state;\n};\n"],"names":["React","slot","Checkmark16Filled","useMenuListContext_unstable","useMenuItemBase_unstable","useMenuItemCheckbox_unstable","props","ref","state","useMenuItemCheckboxBase_unstable","checkmark","children","toggleCheckbox","context","name","value","checked","checkedItems","checkedValues","indexOf","role","persistOnClick","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;AAIvE,iEAAiE,GACjE,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEA,MAAMC,QAAQC,iCAAiCH,OAAOC;IAEtD,6BAA6B;IAC7B,IAAIC,MAAME,SAAS,EAAE;YACnBF;;QAAAA,cAAAA,mBAAAA,MAAME,SAAS,EAACC,yDAAhBH,iBAAgBG,yBAAa,oBAACT;IAChC;IAEA,OAAOM;AACT,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAC9CH,OACAC;IAEA,MAAMK,iBAAiBT,4BAA4BU,CAAAA,UAAWA,QAAQD,cAAc;IACpF,MAAM,EAAEE,IAAI,EAAEC,KAAK,EAAE,GAAGT;IAExB,MAAMU,UAAUb,4BAA4BU,CAAAA;YACrBA;QAArB,MAAMI,eAAeJ,EAAAA,yBAAAA,QAAQK,aAAa,cAArBL,6CAAAA,sBAAuB,CAACC,KAAK,KAAI,EAAE;QACxD,OAAOG,aAAaE,OAAO,CAACJ,WAAW,CAAC;IAC1C;IAEA,MAAMP,QAA+B;QACnC,GAAGJ,yBACD;YACEgB,MAAM;YACNC,gBAAgB;YAChB,GAAGf,KAAK;YACR,gBAAgBU;YAChBN,WAAWT,KAAKqB,QAAQ,CAAChB,MAAMI,SAAS,EAAE;gBACxCa,iBAAiB;gBACjBC,aAAa;YACf;YACAC,SAAS,CAACC;oBAERpB;gBADAM,2BAAAA,qCAAAA,eAAiBc,GAAGZ,MAAMC,OAAOC;iBACjCV,iBAAAA,MAAMmB,OAAO,cAAbnB,qCAAAA,oBAAAA,OAAgBoB;YAClB;QACF,GACAnB,IACD;QACDO;QACAC;QACAC;IACF;IAEA,OAAOR;AACT,EAAE"}

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

@@ -14,20 +14,26 @@ export const menuItemCheckboxClassNames = {
 export const useMenuItemCheckboxStyles_unstable = state => {
   'use no memo';
 
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);
   if (state.content) {
+    // eslint-disable-next-line react-hooks/immutability
     state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);
   }
   if (state.secondaryContent) {
+    // eslint-disable-next-line react-hooks/immutability
     state.secondaryContent.className = mergeClasses(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);
   }
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);
   }
   if (state.checkmark) {
+    // eslint-disable-next-line react-hooks/immutability
     state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);
   }
   if (state.subText) {
+    // eslint-disable-next-line react-hooks/immutability
     state.subText.className = mergeClasses(menuItemCheckboxClassNames.subText, state.subText.className);
   }
   useMenuItemStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemCheckboxClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemCheckboxStyles_unstable","state","className"],"sources":["useMenuItemCheckboxStyles.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 menuItemCheckboxClassNames = {\n    root: 'fui-MenuItemCheckbox',\n    icon: 'fui-MenuItemCheckbox__icon',\n    checkmark: 'fui-MenuItemCheckbox__checkmark',\n    content: 'fui-MenuItemCheckbox__content',\n    secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',\n    subText: 'fui-MenuItemCheckbox__subText'\n};\nexport const useMenuItemCheckboxStyles_unstable = (state)=>{\n    'use no memo';\n    state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n    }\n    if (state.subText) {\n        state.subText.className = mergeClasses(menuItemCheckboxClassNames.subText, state.subText.className);\n    }\n    useMenuItemStyles_unstable(state);\n    useCheckmarkStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE,sBAAsB;EAC5BC,IAAI,EAAE,4BAA4B;EAClCC,SAAS,EAAE,iCAAiC;EAC5CC,OAAO,EAAE,+BAA+B;EACxCC,gBAAgB,EAAE,wCAAwC;EAC1DC,OAAO,EAAE;AACb,CAAC;AACD,OAAO,MAAMC,kCAAkC,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACbA,KAAK,CAACP,IAAI,CAACQ,SAAS,GAAGZ,YAAY,CAACG,0BAA0B,CAACC,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACQ,SAAS,CAAC;EAC1F,IAAID,KAAK,CAACJ,OAAO,EAAE;IACfI,KAAK,CAACJ,OAAO,CAACK,SAAS,GAAGZ,YAAY,CAACG,0BAA0B,CAACI,OAAO,EAAEI,KAAK,CAACJ,OAAO,CAACK,SAAS,CAAC;EACvG;EACA,IAAID,KAAK,CAACH,gBAAgB,EAAE;IACxBG,KAAK,CAACH,gBAAgB,CAACI,SAAS,GAAGZ,YAAY,CAACG,0BAA0B,CAACK,gBAAgB,EAAEG,KAAK,CAACH,gBAAgB,CAACI,SAAS,CAAC;EAClI;EACA,IAAID,KAAK,CAACN,IAAI,EAAE;IACZM,KAAK,CAACN,IAAI,CAACO,SAAS,GAAGZ,YAAY,CAACG,0BAA0B,CAACE,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACO,SAAS,CAAC;EAC9F;EACA,IAAID,KAAK,CAACL,SAAS,EAAE;IACjBK,KAAK,CAACL,SAAS,CAACM,SAAS,GAAGZ,YAAY,CAACG,0BAA0B,CAACG,SAAS,EAAEK,KAAK,CAACL,SAAS,CAACM,SAAS,CAAC;EAC7G;EACA,IAAID,KAAK,CAACF,OAAO,EAAE;IACfE,KAAK,CAACF,OAAO,CAACG,SAAS,GAAGZ,YAAY,CAACG,0BAA0B,CAACM,OAAO,EAAEE,KAAK,CAACF,OAAO,CAACG,SAAS,CAAC;EACvG;EACAV,0BAA0B,CAACS,KAAK,CAAC;EACjCV,2BAA2B,CAACU,KAAK,CAAC;EAClC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemCheckboxClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemCheckboxStyles_unstable","state","className"],"sources":["useMenuItemCheckboxStyles.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 menuItemCheckboxClassNames = {\n    root: 'fui-MenuItemCheckbox',\n    icon: 'fui-MenuItemCheckbox__icon',\n    checkmark: 'fui-MenuItemCheckbox__checkmark',\n    content: 'fui-MenuItemCheckbox__content',\n    secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',\n    subText: 'fui-MenuItemCheckbox__subText'\n};\nexport const useMenuItemCheckboxStyles_unstable = (state)=>{\n    'use no memo';\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n    if (state.content) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n    }\n    if (state.secondaryContent) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.secondaryContent.className = mergeClasses(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);\n    }\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);\n    }\n    if (state.checkmark) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n    }\n    if (state.subText) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.subText.className = mergeClasses(menuItemCheckboxClassNames.subText, state.subText.className);\n    }\n    useMenuItemStyles_unstable(state);\n    useCheckmarkStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE,sBAAsB;EAC5BC,IAAI,EAAE,4BAA4B;EAClCC,SAAS,EAAE,iCAAiC;EAC5CC,OAAO,EAAE,+BAA+B;EACxCC,gBAAgB,EAAE,wCAAwC;EAC1DC,OAAO,EAAE;AACb,CAAC;AACD,OAAO,MAAMC,kCAAkC,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb;EACAA,KAAK,CAACP,IAAI,CAACQ,SAAS,GAAGZ,YAAY,CAACG,0BAA0B,CAACC,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACQ,SAAS,CAAC;EAC1F,IAAID,KAAK,CAACJ,OAAO,EAAE;IACf;IACAI,KAAK,CAACJ,OAAO,CAACK,SAAS,GAAGZ,YAAY,CAACG,0BAA0B,CAACI,OAAO,EAAEI,KAAK,CAACJ,OAAO,CAACK,SAAS,CAAC;EACvG;EACA,IAAID,KAAK,CAACH,gBAAgB,EAAE;IACxB;IACAG,KAAK,CAACH,gBAAgB,CAACI,SAAS,GAAGZ,YAAY,CAACG,0BAA0B,CAACK,gBAAgB,EAAEG,KAAK,CAACH,gBAAgB,CAACI,SAAS,CAAC;EAClI;EACA,IAAID,KAAK,CAACN,IAAI,EAAE;IACZ;IACAM,KAAK,CAACN,IAAI,CAACO,SAAS,GAAGZ,YAAY,CAACG,0BAA0B,CAACE,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACO,SAAS,CAAC;EAC9F;EACA,IAAID,KAAK,CAACL,SAAS,EAAE;IACjB;IACAK,KAAK,CAACL,SAAS,CAACM,SAAS,GAAGZ,YAAY,CAACG,0BAA0B,CAACG,SAAS,EAAEK,KAAK,CAACL,SAAS,CAACM,SAAS,CAAC;EAC7G;EACA,IAAID,KAAK,CAACF,OAAO,EAAE;IACf;IACAE,KAAK,CAACF,OAAO,CAACG,SAAS,GAAGZ,YAAY,CAACG,0BAA0B,CAACM,OAAO,EAAEE,KAAK,CAACF,OAAO,CAACG,SAAS,CAAC;EACvG;EACAV,0BAA0B,CAACS,KAAK,CAAC;EACjCV,2BAA2B,CAACU,KAAK,CAAC;EAClC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.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 { MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\nexport const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n  root: 'fui-MenuItemCheckbox',\n  icon: 'fui-MenuItemCheckbox__icon',\n  checkmark: 'fui-MenuItemCheckbox__checkmark',\n  content: 'fui-MenuItemCheckbox__content',\n  secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',\n  subText: 'fui-MenuItemCheckbox__subText',\n};\n\nexport const useMenuItemCheckboxStyles_unstable = (state: MenuItemCheckboxState): MenuItemCheckboxState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemCheckboxClassNames.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n  }\n\n  if (state.subText) {\n    state.subText.className = mergeClasses(menuItemCheckboxClassNames.subText, state.subText.className);\n  }\n\n  useMenuItemStyles_unstable(state);\n  useCheckmarkStyles_unstable(state);\n\n  return state;\n};\n"],"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemCheckboxClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemCheckboxStyles_unstable","state","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,2BAA2B,QAAQ,yBAAyB;AACrE,SAASC,0BAA0B,QAAQ,uCAAuC;AAKlF,OAAO,MAAMC,6BAAsF;IACjGC,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,qCAAqC,CAACC;IACjD;IAEAA,MAAMP,IAAI,CAACQ,SAAS,GAAGZ,aAAaG,2BAA2BC,IAAI,EAAEO,MAAMP,IAAI,CAACQ,SAAS;IAEzF,IAAID,MAAMJ,OAAO,EAAE;QACjBI,MAAMJ,OAAO,CAACK,SAAS,GAAGZ,aAAaG,2BAA2BI,OAAO,EAAEI,MAAMJ,OAAO,CAACK,SAAS;IACpG;IAEA,IAAID,MAAMH,gBAAgB,EAAE;QAC1BG,MAAMH,gBAAgB,CAACI,SAAS,GAAGZ,aACjCG,2BAA2BK,gBAAgB,EAC3CG,MAAMH,gBAAgB,CAACI,SAAS;IAEpC;IAEA,IAAID,MAAMN,IAAI,EAAE;QACdM,MAAMN,IAAI,CAACO,SAAS,GAAGZ,aAAaG,2BAA2BE,IAAI,EAAEM,MAAMN,IAAI,CAACO,SAAS;IAC3F;IAEA,IAAID,MAAML,SAAS,EAAE;QACnBK,MAAML,SAAS,CAACM,SAAS,GAAGZ,aAAaG,2BAA2BG,SAAS,EAAEK,MAAML,SAAS,CAACM,SAAS;IAC1G;IAEA,IAAID,MAAMF,OAAO,EAAE;QACjBE,MAAMF,OAAO,CAACG,SAAS,GAAGZ,aAAaG,2BAA2BM,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACpG;IAEAV,2BAA2BS;IAC3BV,4BAA4BU;IAE5B,OAAOA;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.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 { MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\nexport const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n  root: 'fui-MenuItemCheckbox',\n  icon: 'fui-MenuItemCheckbox__icon',\n  checkmark: 'fui-MenuItemCheckbox__checkmark',\n  content: 'fui-MenuItemCheckbox__content',\n  secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',\n  subText: 'fui-MenuItemCheckbox__subText',\n};\n\nexport const useMenuItemCheckboxStyles_unstable = (state: MenuItemCheckboxState): MenuItemCheckboxState => {\n  'use no memo';\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n\n  if (state.content) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n  }\n\n  if (state.secondaryContent) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.secondaryContent.className = mergeClasses(\n      menuItemCheckboxClassNames.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(menuItemCheckboxClassNames.icon, state.icon.className);\n  }\n\n  if (state.checkmark) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n  }\n\n  if (state.subText) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.subText.className = mergeClasses(menuItemCheckboxClassNames.subText, state.subText.className);\n  }\n\n  useMenuItemStyles_unstable(state);\n  useCheckmarkStyles_unstable(state);\n\n  return state;\n};\n"],"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemCheckboxClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemCheckboxStyles_unstable","state","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,2BAA2B,QAAQ,yBAAyB;AACrE,SAASC,0BAA0B,QAAQ,uCAAuC;AAKlF,OAAO,MAAMC,6BAAsF;IACjGC,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,qCAAqC,CAACC;IACjD;IAEA,oDAAoD;IACpDA,MAAMP,IAAI,CAACQ,SAAS,GAAGZ,aAAaG,2BAA2BC,IAAI,EAAEO,MAAMP,IAAI,CAACQ,SAAS;IAEzF,IAAID,MAAMJ,OAAO,EAAE;QACjB,oDAAoD;QACpDI,MAAMJ,OAAO,CAACK,SAAS,GAAGZ,aAAaG,2BAA2BI,OAAO,EAAEI,MAAMJ,OAAO,CAACK,SAAS;IACpG;IAEA,IAAID,MAAMH,gBAAgB,EAAE;QAC1B,oDAAoD;QACpDG,MAAMH,gBAAgB,CAACI,SAAS,GAAGZ,aACjCG,2BAA2BK,gBAAgB,EAC3CG,MAAMH,gBAAgB,CAACI,SAAS;IAEpC;IAEA,IAAID,MAAMN,IAAI,EAAE;QACd,oDAAoD;QACpDM,MAAMN,IAAI,CAACO,SAAS,GAAGZ,aAAaG,2BAA2BE,IAAI,EAAEM,MAAMN,IAAI,CAACO,SAAS;IAC3F;IAEA,IAAID,MAAML,SAAS,EAAE;QACnB,oDAAoD;QACpDK,MAAML,SAAS,CAACM,SAAS,GAAGZ,aAAaG,2BAA2BG,SAAS,EAAEK,MAAML,SAAS,CAACM,SAAS;IAC1G;IAEA,IAAID,MAAMF,OAAO,EAAE;QACjB,oDAAoD;QACpDE,MAAMF,OAAO,CAACG,SAAS,GAAGZ,aAAaG,2BAA2BM,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACpG;IAEAV,2BAA2BS;IAC3BV,4BAA4BU;IAE5B,OAAOA;AACT,EAAE"}

package/lib/components/MenuItemLink/index.js

@@ -1,4 +1,4 @@
 export { MenuItemLink } from './MenuItemLink';
 export { renderMenuItemLink_unstable } from './renderMenuItemLink';
-export { useMenuItemLink_unstable } from './useMenuItemLink';
+export { useMenuItemLinkBase_unstable, useMenuItemLink_unstable } from './useMenuItemLink';
 export { menuItemLinkClassNames, useMenuItemLinkStyles_unstable } from './useMenuItemLinkStyles.styles';

package/lib/components/MenuItemLink/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemLink/index.ts"],"sourcesContent":["export { MenuItemLink } from './MenuItemLink';\nexport type { MenuItemLinkProps, MenuItemLinkSlots, MenuItemLinkState } from './MenuItemLink.types';\nexport { renderMenuItemLink_unstable } from './renderMenuItemLink';\nexport { useMenuItemLink_unstable } from './useMenuItemLink';\nexport { menuItemLinkClassNames, useMenuItemLinkStyles_unstable } from './useMenuItemLinkStyles.styles';\n"],"names":["MenuItemLink","renderMenuItemLink_unstable","useMenuItemLink_unstable","menuItemLinkClassNames","useMenuItemLinkStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}
+{"version":3,"sources":["../src/components/MenuItemLink/index.ts"],"sourcesContent":["export { MenuItemLink } from './MenuItemLink';\nexport type { MenuItemLinkProps, MenuItemLinkSlots, MenuItemLinkState } from './MenuItemLink.types';\nexport { renderMenuItemLink_unstable } from './renderMenuItemLink';\nexport { useMenuItemLinkBase_unstable, useMenuItemLink_unstable } from './useMenuItemLink';\nexport { menuItemLinkClassNames, useMenuItemLinkStyles_unstable } from './useMenuItemLinkStyles.styles';\n"],"names":["MenuItemLink","renderMenuItemLink_unstable","useMenuItemLinkBase_unstable","useMenuItemLink_unstable","menuItemLinkClassNames","useMenuItemLinkStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,4BAA4B,EAAEC,wBAAwB,QAAQ,oBAAoB;AAC3F,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}

package/lib/components/MenuItemLink/useMenuItemLink.js

@@ -1,6 +1,7 @@
 'use client';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
+import { useMenuItemBase_unstable } from '../MenuItem/useMenuItemBase';
 /**
  * Create the state required to render MenuItemLink.
  *
@@ -36,3 +37,32 @@ import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
         })
     };
 };
+/**
+ * Base hook for MenuItemLink, mirrors `useMenuItemLink_unstable` but composes with
+ * `useMenuItemBase_unstable`.
+ *
+ * @param props - props from this instance of MenuItemLink
+ * @param ref - reference to root HTMLElement of MenuItemLink
+ */ export const useMenuItemLinkBase_unstable = (props, ref)=>{
+    const baseState = useMenuItemBase_unstable(props, null);
+    const _props = {
+        ...props,
+        ...baseState.root,
+        ref,
+        tabIndex: props.tabIndex
+    };
+    return {
+        ...baseState,
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...baseState.components,
+            root: 'a'
+        },
+        root: slot.always(getIntrinsicElementProps('a', {
+            role: 'menuitem',
+            ..._props
+        }), {
+            elementType: 'a'
+        })
+    };
+};

package/lib/components/MenuItemLink/useMenuItemLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLink.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport type { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n  props: MenuItemLinkProps,\n  ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n  // casting because the root slot changes from div to a\n  const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n  // FIXME: casting because the root slot changes from div to a,\n  // ideal solution would be to extract common logic from useMenuItem_unstable root\n  // and use it in both without assuming element type\n  const _props = { ...props, ...(baseState.root as ExtractSlotProps<Slot<'a'>>), ref, tabIndex: props.tabIndex };\n\n  return {\n    ...baseState,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...baseState.components,\n      root: 'a',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('a', {\n        role: 'menuitem',\n        ..._props,\n      }),\n      { elementType: 'a' },\n    ),\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useMenuItem_unstable","useMenuItemLink_unstable","props","ref","baseState","_props","root","tabIndex","components","always","role","elementType"],"mappings":"AAAA;AAIA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oBAAoB,QAAQ,0BAA0B;AAG/D;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,YAAYJ,qBAAqBE,OAAwB;IAC/D,8DAA8D;IAC9D,iFAAiF;IACjF,mDAAmD;IACnD,MAAMG,SAAS;QAAE,GAAGH,KAAK;QAAE,GAAIE,UAAUE,IAAI;QAAkCH;QAAKI,UAAUL,MAAMK,QAAQ;IAAC;IAE7G,OAAO;QACL,GAAGH,SAAS;QACZI,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,UAAUI,UAAU;YACvBF,MAAM;QACR;QACAA,MAAMP,KAAKU,MAAM,CACfX,yBAAyB,KAAK;YAC5BY,MAAM;YACN,GAAGL,MAAM;QACX,IACA;YAAEM,aAAa;QAAI;IAEvB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLink.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport { useMenuItemBase_unstable } from '../MenuItem/useMenuItemBase';\nimport type { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n  props: MenuItemLinkProps,\n  ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n  // casting because the root slot changes from div to a\n  const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n  // FIXME: casting because the root slot changes from div to a,\n  // ideal solution would be to extract common logic from useMenuItem_unstable root\n  // and use it in both without assuming element type\n  const _props = { ...props, ...(baseState.root as ExtractSlotProps<Slot<'a'>>), ref, tabIndex: props.tabIndex };\n\n  return {\n    ...baseState,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...baseState.components,\n      root: 'a',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('a', {\n        role: 'menuitem',\n        ..._props,\n      }),\n      { elementType: 'a' },\n    ),\n  };\n};\n\n/**\n * Base hook for MenuItemLink, mirrors `useMenuItemLink_unstable` but composes with\n * `useMenuItemBase_unstable`.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLinkBase_unstable = (\n  props: MenuItemLinkProps,\n  ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n  const baseState = useMenuItemBase_unstable(props as MenuItemProps, null);\n  const _props = { ...props, ...(baseState.root as ExtractSlotProps<Slot<'a'>>), ref, tabIndex: props.tabIndex };\n\n  return {\n    ...baseState,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...baseState.components,\n      root: 'a',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('a', {\n        role: 'menuitem',\n        ..._props,\n      }),\n      { elementType: 'a' },\n    ),\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useMenuItem_unstable","useMenuItemBase_unstable","useMenuItemLink_unstable","props","ref","baseState","_props","root","tabIndex","components","always","role","elementType","useMenuItemLinkBase_unstable"],"mappings":"AAAA;AAIA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,wBAAwB,QAAQ,8BAA8B;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,YAAYL,qBAAqBG,OAAwB;IAC/D,8DAA8D;IAC9D,iFAAiF;IACjF,mDAAmD;IACnD,MAAMG,SAAS;QAAE,GAAGH,KAAK;QAAE,GAAIE,UAAUE,IAAI;QAAkCH;QAAKI,UAAUL,MAAMK,QAAQ;IAAC;IAE7G,OAAO;QACL,GAAGH,SAAS;QACZI,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,UAAUI,UAAU;YACvBF,MAAM;QACR;QACAA,MAAMR,KAAKW,MAAM,CACfZ,yBAAyB,KAAK;YAC5Ba,MAAM;YACN,GAAGL,MAAM;QACX,IACA;YAAEM,aAAa;QAAI;IAEvB;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,+BAA+B,CAC1CV,OACAC;IAEA,MAAMC,YAAYJ,yBAAyBE,OAAwB;IACnE,MAAMG,SAAS;QAAE,GAAGH,KAAK;QAAE,GAAIE,UAAUE,IAAI;QAAkCH;QAAKI,UAAUL,MAAMK,QAAQ;IAAC;IAE7G,OAAO;QACL,GAAGH,SAAS;QACZI,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,UAAUI,UAAU;YACvBF,MAAM;QACR;QACAA,MAAMR,KAAKW,MAAM,CACfZ,yBAAyB,KAAK;YAC5Ba,MAAM;YACN,GAAGL,MAAM;QACX,IACA;YAAEM,aAAa;QAAI;IAEvB;AACF,EAAE"}

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

@@ -30,17 +30,22 @@ export const useMenuItemLinkStyles_unstable = state => {
 
   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.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","useMenuItemStyles_unstable","menuItemLinkClassNames","root","icon","checkmark","content","secondaryContent","useStyles","resetLink","w71qe1","Bkioxbp","I8pafv","dvvfom","d","useMenuItemLinkStyles_unstable","state","styles","className"],"sources":["useMenuItemLinkStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemLinkClassNames = {\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 * Styles for the root slot\n */ const useStyles = makeStyles({\n    resetLink: {\n        textDecorationLine: 'none',\n        textDecorationThickness: 'initial',\n        textDecorationStyle: 'initial',\n        textDecorationColor: 'initial'\n    }\n});\n/**\n * Apply styling to the MenuItemLink slots based on the state\n */ export const useMenuItemLinkStyles_unstable = (state)=>{\n    'use no memo';\n    useMenuItemStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuItemLinkClassNames.root, styles.resetLink, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuItemLinkClassNames.icon, state.icon.className);\n    }\n    if (state.content) {\n        state.content.className = mergeClasses(menuItemLinkClassNames.content, state.content.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(menuItemLinkClassNames.secondaryContent, state.secondaryContent.className);\n    }\n    if (state.checkmark) {\n        state.checkmark.className = mergeClasses(menuItemLinkClassNames.checkmark, state.checkmark.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE,wBAAwB;EAC9BC,SAAS,EAAE,6BAA6B;EACxCC,OAAO,EAAE,2BAA2B;EACpCC,gBAAgB,EAAE;AACtB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGT,QAAA;EAAAU,SAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACbf,0BAA0B,CAACe,KAAK,CAAC;EACjC,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1BQ,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGlB,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEc,MAAM,CAACR,SAAS,EAAEO,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACxG,IAAIF,KAAK,CAACZ,IAAI,EAAE;IACZY,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACE,sBAAsB,CAACE,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EAC1F;EACA,IAAIF,KAAK,CAACV,OAAO,EAAE;IACfU,KAAK,CAACV,OAAO,CAACY,SAAS,GAAGlB,YAAY,CAACE,sBAAsB,CAACI,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACY,SAAS,CAAC;EACnG;EACA,IAAIF,KAAK,CAACT,gBAAgB,EAAE;IACxBS,KAAK,CAACT,gBAAgB,CAACW,SAAS,GAAGlB,YAAY,CAACE,sBAAsB,CAACK,gBAAgB,EAAES,KAAK,CAACT,gBAAgB,CAACW,SAAS,CAAC;EAC9H;EACA,IAAIF,KAAK,CAACX,SAAS,EAAE;IACjBW,KAAK,CAACX,SAAS,CAACa,SAAS,GAAGlB,YAAY,CAACE,sBAAsB,CAACG,SAAS,EAAEW,KAAK,CAACX,SAAS,CAACa,SAAS,CAAC;EACzG;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","useMenuItemStyles_unstable","menuItemLinkClassNames","root","icon","checkmark","content","secondaryContent","useStyles","resetLink","w71qe1","Bkioxbp","I8pafv","dvvfom","d","useMenuItemLinkStyles_unstable","state","styles","className"],"sources":["useMenuItemLinkStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemLinkClassNames = {\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 * Styles for the root slot\n */ const useStyles = makeStyles({\n    resetLink: {\n        textDecorationLine: 'none',\n        textDecorationThickness: 'initial',\n        textDecorationStyle: 'initial',\n        textDecorationColor: 'initial'\n    }\n});\n/**\n * Apply styling to the MenuItemLink slots based on the state\n */ export const useMenuItemLinkStyles_unstable = (state)=>{\n    'use no memo';\n    useMenuItemStyles_unstable(state);\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    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(menuItemLinkClassNames.icon, state.icon.className);\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    if (state.secondaryContent) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.secondaryContent.className = mergeClasses(menuItemLinkClassNames.secondaryContent, state.secondaryContent.className);\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    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE,wBAAwB;EAC9BC,SAAS,EAAE,6BAA6B;EACxCC,OAAO,EAAE,2BAA2B;EACpCC,gBAAgB,EAAE;AACtB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGT,QAAA;EAAAU,SAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACbf,0BAA0B,CAACe,KAAK,CAAC;EACjC,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B;EACAQ,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGlB,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEc,MAAM,CAACR,SAAS,EAAEO,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACxG,IAAIF,KAAK,CAACZ,IAAI,EAAE;IACZ;IACAY,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACE,sBAAsB,CAACE,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EAC1F;EACA,IAAIF,KAAK,CAACV,OAAO,EAAE;IACf;IACAU,KAAK,CAACV,OAAO,CAACY,SAAS,GAAGlB,YAAY,CAACE,sBAAsB,CAACI,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACY,SAAS,CAAC;EACnG;EACA,IAAIF,KAAK,CAACT,gBAAgB,EAAE;IACxB;IACAS,KAAK,CAACT,gBAAgB,CAACW,SAAS,GAAGlB,YAAY,CAACE,sBAAsB,CAACK,gBAAgB,EAAES,KAAK,CAACT,gBAAgB,CAACW,SAAS,CAAC;EAC9H;EACA,IAAIF,KAAK,CAACX,SAAS,EAAE;IACjB;IACAW,KAAK,CAACX,SAAS,CAACa,SAAS,GAAGlB,YAAY,CAACE,sBAAsB,CAACG,SAAS,EAAEW,KAAK,CAACX,SAAS,CAACa,SAAS,CAAC;EACzG;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -24,17 +24,22 @@ export const menuItemLinkClassNames = {
     '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  'use no memo';\n\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;IAC7C;IAEAd,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

@@ -14,20 +14,26 @@ export const menuItemRadioClassNames = {
 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);