@fluentui/react-menu 9.24.0 → 9.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +45 -2
- package/dist/index.d.ts +130 -8
- package/lib/Menu.js +1 -1
- package/lib/Menu.js.map +1 -1
- package/lib/MenuItemLink.js +1 -1
- package/lib/MenuItemLink.js.map +1 -1
- package/lib/MenuItemRadio.js +1 -1
- package/lib/MenuItemRadio.js.map +1 -1
- package/lib/MenuList.js +1 -1
- package/lib/MenuList.js.map +1 -1
- package/lib/MenuPopover.js +1 -1
- package/lib/MenuPopover.js.map +1 -1
- package/lib/MenuTrigger.js +1 -1
- package/lib/MenuTrigger.js.map +1 -1
- package/lib/components/Menu/Menu.js +0 -1
- package/lib/components/Menu/Menu.js.map +1 -1
- package/lib/components/Menu/Menu.types.js +3 -1
- package/lib/components/Menu/Menu.types.js.map +1 -1
- package/lib/components/Menu/index.js +1 -1
- package/lib/components/Menu/index.js.map +1 -1
- package/lib/components/Menu/useMenu.js +24 -12
- package/lib/components/Menu/useMenu.js.map +1 -1
- package/lib/components/Menu/useMenuContextValues.js +21 -3
- package/lib/components/Menu/useMenuContextValues.js.map +1 -1
- package/lib/components/MenuDivider/renderMenuDivider.js.map +1 -1
- package/lib/components/MenuDivider/useMenuDivider.js +0 -1
- package/lib/components/MenuDivider/useMenuDivider.js.map +1 -1
- package/lib/components/MenuDivider/useMenuDividerStyles.styles.js +1 -0
- package/lib/components/MenuDivider/useMenuDividerStyles.styles.js.map +1 -1
- package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.js +1 -0
- package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuGroup/renderMenuGroup.js.map +1 -1
- package/lib/components/MenuGroup/useMenuGroup.js +0 -1
- package/lib/components/MenuGroup/useMenuGroup.js.map +1 -1
- package/lib/components/MenuGroupHeader/renderMenuGroupHeader.js.map +1 -1
- package/lib/components/MenuGroupHeader/useMenuGroupHeader.js +0 -1
- package/lib/components/MenuGroupHeader/useMenuGroupHeader.js.map +1 -1
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js +1 -0
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js.map +1 -1
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js +1 -0
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuItem/MenuItem.types.js.map +1 -1
- package/lib/components/MenuItem/index.js +2 -1
- package/lib/components/MenuItem/index.js.map +1 -1
- package/lib/components/MenuItem/useCharacterSearch.js +1 -1
- package/lib/components/MenuItem/useCharacterSearch.js.map +1 -1
- package/lib/components/MenuItem/useMenuItem.js +1 -145
- package/lib/components/MenuItem/useMenuItem.js.map +1 -1
- package/lib/components/MenuItem/useMenuItemBase.js +147 -0
- package/lib/components/MenuItem/useMenuItemBase.js.map +1 -0
- package/lib/components/MenuItem/useMenuItemStyles.styles.js +27 -6
- package/lib/components/MenuItem/useMenuItemStyles.styles.js.map +1 -1
- package/lib/components/MenuItem/useMenuItemStyles.styles.raw.js +28 -1
- package/lib/components/MenuItem/useMenuItemStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js +1 -3
- package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -1
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.js +6 -0
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.js.map +1 -1
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js +6 -0
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuItemLink/MenuItemLink.types.js.map +1 -1
- package/lib/components/MenuItemLink/index.js +1 -1
- package/lib/components/MenuItemLink/index.js.map +1 -1
- package/lib/components/MenuItemLink/useMenuItemLink.js +30 -1
- package/lib/components/MenuItemLink/useMenuItemLink.js.map +1 -1
- package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.js +5 -0
- package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.js.map +1 -1
- package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js +5 -0
- package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuItemRadio/useMenuItemRadio.js +1 -3
- package/lib/components/MenuItemRadio/useMenuItemRadio.js.map +1 -1
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.js +6 -0
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.js.map +1 -1
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js +6 -0
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuItemSwitch/MenuItemSwitch.types.js.map +1 -1
- package/lib/components/MenuItemSwitch/useMenuItemSwitch.js +0 -1
- package/lib/components/MenuItemSwitch/useMenuItemSwitch.js.map +1 -1
- package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js +7 -0
- package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js.map +1 -1
- package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js +7 -0
- package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuList/MenuList.types.js +3 -1
- package/lib/components/MenuList/MenuList.types.js.map +1 -1
- package/lib/components/MenuList/index.js +1 -1
- package/lib/components/MenuList/index.js.map +1 -1
- package/lib/components/MenuList/renderMenuList.js.map +1 -1
- package/lib/components/MenuList/useMenuList.js +115 -65
- package/lib/components/MenuList/useMenuList.js.map +1 -1
- package/lib/components/MenuList/useMenuListContextValues.js +11 -3
- package/lib/components/MenuList/useMenuListContextValues.js.map +1 -1
- package/lib/components/MenuList/useMenuListStyles.styles.js +1 -0
- package/lib/components/MenuList/useMenuListStyles.styles.js.map +1 -1
- package/lib/components/MenuList/useMenuListStyles.styles.raw.js +1 -0
- package/lib/components/MenuList/useMenuListStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuPopover/MenuPopover.types.js +3 -1
- package/lib/components/MenuPopover/MenuPopover.types.js.map +1 -1
- package/lib/components/MenuPopover/index.js +1 -1
- package/lib/components/MenuPopover/index.js.map +1 -1
- package/lib/components/MenuPopover/renderMenuPopover.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopover.js +27 -7
- package/lib/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopoverStyles.styles.js +1 -0
- package/lib/components/MenuPopover/useMenuPopoverStyles.styles.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js +1 -0
- package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuSplitGroup/MenuSplitGroup.types.js.map +1 -1
- package/lib/components/MenuSplitGroup/useMenuSplitGroup.js +2 -1
- package/lib/components/MenuSplitGroup/useMenuSplitGroup.js.map +1 -1
- package/lib/components/MenuSplitGroup/useMenuSplitGroupContextValues.js.map +1 -1
- package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js +1 -0
- package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js.map +1 -1
- package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js +1 -0
- package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuTrigger/MenuTrigger.js +0 -1
- package/lib/components/MenuTrigger/MenuTrigger.js.map +1 -1
- package/lib/components/MenuTrigger/MenuTrigger.types.js +1 -1
- package/lib/components/MenuTrigger/MenuTrigger.types.js.map +1 -1
- package/lib/components/MenuTrigger/index.js +1 -1
- package/lib/components/MenuTrigger/index.js.map +1 -1
- package/lib/components/MenuTrigger/useMenuTrigger.js +39 -12
- package/lib/components/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib/contexts/menuContext.js +0 -1
- package/lib/contexts/menuContext.js.map +1 -1
- package/lib/contexts/menuListContext.js +0 -1
- package/lib/contexts/menuListContext.js.map +1 -1
- package/lib/index.js +9 -14
- package/lib/index.js.map +1 -1
- package/lib/selectable/types.js +3 -1
- package/lib/selectable/types.js.map +1 -1
- package/lib/selectable/useCheckmarkStyles.styles.js +1 -0
- package/lib/selectable/useCheckmarkStyles.styles.js.map +1 -1
- package/lib/selectable/useCheckmarkStyles.styles.raw.js +1 -0
- package/lib/selectable/useCheckmarkStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/Menu.js +3 -0
- package/lib-commonjs/Menu.js.map +1 -1
- package/lib-commonjs/MenuItemLink.js +3 -0
- package/lib-commonjs/MenuItemLink.js.map +1 -1
- package/lib-commonjs/MenuItemRadio.js.map +1 -1
- package/lib-commonjs/MenuList.js +3 -0
- package/lib-commonjs/MenuList.js.map +1 -1
- package/lib-commonjs/MenuPopover.js +3 -0
- package/lib-commonjs/MenuPopover.js.map +1 -1
- package/lib-commonjs/MenuTrigger.js +3 -0
- package/lib-commonjs/MenuTrigger.js.map +1 -1
- package/lib-commonjs/components/Menu/Menu.js +0 -2
- package/lib-commonjs/components/Menu/Menu.js.map +1 -1
- package/lib-commonjs/components/Menu/Menu.types.js +3 -3
- package/lib-commonjs/components/Menu/Menu.types.js.map +1 -1
- package/lib-commonjs/components/Menu/index.js +3 -0
- package/lib-commonjs/components/Menu/index.js.map +1 -1
- package/lib-commonjs/components/Menu/useMenu.js +30 -15
- package/lib-commonjs/components/Menu/useMenu.js.map +1 -1
- package/lib-commonjs/components/Menu/useMenuContextValues.js +22 -3
- package/lib-commonjs/components/Menu/useMenuContextValues.js.map +1 -1
- package/lib-commonjs/components/MenuDivider/renderMenuDivider.js.map +1 -1
- package/lib-commonjs/components/MenuDivider/useMenuDivider.js +0 -2
- package/lib-commonjs/components/MenuDivider/useMenuDivider.js.map +1 -1
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.js +1 -0
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuGroup/renderMenuGroup.js.map +1 -1
- package/lib-commonjs/components/MenuGroup/useMenuGroup.js +0 -2
- package/lib-commonjs/components/MenuGroup/useMenuGroup.js.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/renderMenuGroupHeader.js.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeader.js +0 -2
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeader.js.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js +1 -0
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuItem/MenuItem.types.js.map +1 -1
- package/lib-commonjs/components/MenuItem/index.js +2 -1
- package/lib-commonjs/components/MenuItem/index.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useCharacterSearch.js +1 -2
- package/lib-commonjs/components/MenuItem/useCharacterSearch.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItem.js +5 -152
- package/lib-commonjs/components/MenuItem/useMenuItem.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItemBase.js +155 -0
- package/lib-commonjs/components/MenuItem/useMenuItemBase.js.map +1 -0
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js +51 -16
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.js +28 -1
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckbox.js +2 -2
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.js +6 -0
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js +6 -0
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuItemLink/MenuItemLink.types.js.map +1 -1
- package/lib-commonjs/components/MenuItemLink/index.js +3 -0
- package/lib-commonjs/components/MenuItemLink/index.js.map +1 -1
- package/lib-commonjs/components/MenuItemLink/useMenuItemLink.js +35 -5
- package/lib-commonjs/components/MenuItemLink/useMenuItemLink.js.map +1 -1
- package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.js +5 -0
- package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js +5 -0
- package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadio.js +2 -2
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadio.js.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.js +6 -0
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js +6 -0
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/MenuItemSwitch.types.js.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitch.js.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js +7 -0
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js +7 -0
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuList/MenuList.types.js +3 -3
- package/lib-commonjs/components/MenuList/MenuList.types.js.map +1 -1
- package/lib-commonjs/components/MenuList/index.js +3 -0
- package/lib-commonjs/components/MenuList/index.js.map +1 -1
- package/lib-commonjs/components/MenuList/renderMenuList.js.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuList.js +108 -67
- package/lib-commonjs/components/MenuList/useMenuList.js.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuListContextValues.js +12 -3
- package/lib-commonjs/components/MenuList/useMenuListContextValues.js.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuListStyles.styles.js +1 -0
- package/lib-commonjs/components/MenuList/useMenuListStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/MenuPopover.types.js +3 -3
- package/lib-commonjs/components/MenuPopover/MenuPopover.types.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/index.js +3 -0
- package/lib-commonjs/components/MenuPopover/index.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/renderMenuPopover.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js +26 -7
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.js +1 -0
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/MenuSplitGroup.types.js.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroup.js.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupContextValues.js.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js +1 -0
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/MenuTrigger.js +0 -2
- package/lib-commonjs/components/MenuTrigger/MenuTrigger.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/MenuTrigger.types.js +0 -2
- package/lib-commonjs/components/MenuTrigger/MenuTrigger.types.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/index.js +3 -0
- package/lib-commonjs/components/MenuTrigger/index.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js +32 -14
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib-commonjs/contexts/menuContext.js +0 -2
- package/lib-commonjs/contexts/menuContext.js.map +1 -1
- package/lib-commonjs/contexts/menuListContext.js +0 -2
- package/lib-commonjs/contexts/menuListContext.js.map +1 -1
- package/lib-commonjs/index.js +27 -5
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/selectable/types.js +3 -3
- package/lib-commonjs/selectable/types.js.map +1 -1
- package/lib-commonjs/selectable/useCheckmarkStyles.styles.js +1 -0
- package/lib-commonjs/selectable/useCheckmarkStyles.styles.js.map +1 -1
- package/lib-commonjs/selectable/useCheckmarkStyles.styles.raw.js +1 -0
- package/lib-commonjs/selectable/useCheckmarkStyles.styles.raw.js.map +1 -1
- package/package.json +10 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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"],"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"],"mappings":"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"}
|
|
1
|
+
{"version":3,"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"],"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"],"mappings":"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"}
|
|
@@ -148,6 +148,26 @@ const useStyles = (0, _react.makeStyles)({
|
|
|
148
148
|
backgroundColor: _reacttheme.tokens.colorNeutralStroke1
|
|
149
149
|
}
|
|
150
150
|
},
|
|
151
|
+
submenuOpen: {
|
|
152
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
|
|
153
|
+
color: _reacttheme.tokens.colorNeutralForeground2Hover,
|
|
154
|
+
[`& .${_reacticons.iconFilledClassName}`]: {
|
|
155
|
+
display: 'inline'
|
|
156
|
+
},
|
|
157
|
+
[`& .${_reacticons.iconRegularClassName}`]: {
|
|
158
|
+
display: 'none'
|
|
159
|
+
},
|
|
160
|
+
[`& .${menuItemClassNames.icon}`]: {
|
|
161
|
+
color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
|
|
162
|
+
},
|
|
163
|
+
[`& .${menuItemClassNames.subText}`]: {
|
|
164
|
+
color: _reacttheme.tokens.colorNeutralForeground3Hover
|
|
165
|
+
},
|
|
166
|
+
'@media (forced-colors: active)': {
|
|
167
|
+
backgroundColor: 'Canvas',
|
|
168
|
+
color: 'Highlight'
|
|
169
|
+
}
|
|
170
|
+
},
|
|
151
171
|
disabled: {
|
|
152
172
|
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
|
|
153
173
|
':hover': {
|
|
@@ -236,23 +256,30 @@ const useMenuItemStyles_unstable = (state)=>{
|
|
|
236
256
|
const subtextBaseStyles = useSubtextBaseStyles();
|
|
237
257
|
const subTextStyles = useSubTextStyles();
|
|
238
258
|
const multiline = !!state.subText;
|
|
239
|
-
|
|
259
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
260
|
+
state.root.className = (0, _react.mergeClasses)(menuItemClassNames.root, rootBaseStyles, state.submenuOpen && styles.submenuOpen, state.disabled && styles.disabled, state.root.className);
|
|
240
261
|
if (state.content) {
|
|
262
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
241
263
|
state.content.className = (0, _react.mergeClasses)(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);
|
|
242
264
|
}
|
|
243
265
|
if (state.checkmark) {
|
|
266
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
244
267
|
state.checkmark.className = (0, _react.mergeClasses)(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);
|
|
245
268
|
}
|
|
246
269
|
if (state.secondaryContent) {
|
|
270
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
247
271
|
state.secondaryContent.className = (0, _react.mergeClasses)(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);
|
|
248
272
|
}
|
|
249
273
|
if (state.icon) {
|
|
274
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
250
275
|
state.icon.className = (0, _react.mergeClasses)(menuItemClassNames.icon, iconBaseStyles, state.icon.className);
|
|
251
276
|
}
|
|
252
277
|
if (state.submenuIndicator) {
|
|
278
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
253
279
|
state.submenuIndicator.className = (0, _react.mergeClasses)(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);
|
|
254
280
|
}
|
|
255
281
|
if (state.subText) {
|
|
282
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
256
283
|
state.subText.className = (0, _react.mergeClasses)(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);
|
|
257
284
|
}
|
|
258
285
|
(0, _index.useCheckmarkStyles_unstable)(state);
|
|
@@ -1 +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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"}
|
|
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 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":"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"}
|
|
@@ -22,7 +22,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
|
22
22
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
23
23
|
const _reacticons = require("@fluentui/react-icons");
|
|
24
24
|
const _menuListContext = require("../../contexts/menuListContext");
|
|
25
|
-
const
|
|
25
|
+
const _useMenuItemBase = require("../MenuItem/useMenuItemBase");
|
|
26
26
|
const useMenuItemCheckbox_unstable = (props, ref)=>{
|
|
27
27
|
const state = useMenuItemCheckboxBase_unstable(props, ref);
|
|
28
28
|
// Set default checkmark icon
|
|
@@ -42,7 +42,7 @@ const useMenuItemCheckboxBase_unstable = (props, ref)=>{
|
|
|
42
42
|
return checkedItems.indexOf(value) !== -1;
|
|
43
43
|
});
|
|
44
44
|
const state = {
|
|
45
|
-
...(0,
|
|
45
|
+
...(0, _useMenuItemBase.useMenuItemBase_unstable)({
|
|
46
46
|
role: 'menuitemcheckbox',
|
|
47
47
|
persistOnClick: true,
|
|
48
48
|
...props,
|
|
@@ -1 +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/
|
|
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/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;;;;;;;;;;;;oCA4BaS;eAAAA;;gCAjBAJ;;;;;iEATU,QAAQ;gCACV,4BAA4B;4BACf,wBAAwB;iCACd,iCAAiC;iCACpC,8BAA8B;AAKhE,MAAMA,+BAA+B,CAC1CC,OACAC;IAEA,MAAMC,QAAQC,iCAAiCH,OAAOC;IAEtD,6BAA6B;IAC7B,IAAIC,MAAME,SAAS,EAAE;YACnBF;;QAAAA,CAAAA,YAAAA,CAAAA,mBAAAA,MAAME,SAAAA,AAAS,EAACC,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAhBH,iBAAgBG,QAAAA,GAAAA,WAAAA,GAAa,OAAA,aAAA,CAACT,6BAAAA,EAAAA;IAChC;IAEA,OAAOM;AACT,EAAE;AAKK,yCAAyC,CAC9CF,OACAC;IAEA,MAAMK,qBAAiBT,4CAAAA,EAA4BU,CAAAA,UAAWA,QAAQD,cAAc;IACpF,MAAM,EAAEE,IAAI,EAAEC,KAAK,EAAE,GAAGT;IAExB,MAAMU,cAAUb,4CAAAA,EAA4BU,CAAAA;YACrBA;QAArB,MAAMI,eAAeJ,CAAAA,CAAAA,yBAAAA,QAAQK,aAAAA,AAAa,MAAA,QAArBL,2BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,sBAAuB,CAACC,KAAAA,AAAK,KAAI,EAAE;QACxD,OAAOG,aAAaE,OAAO,CAACJ,WAAW,CAAC;IAC1C;IAEA,MAAMP,QAA+B;QACnC,OAAGJ,yCAAAA,EACD;YACEgB,MAAM;YACNC,gBAAgB;YAChB,GAAGf,KAAK;YACR,gBAAgBU;YAChBN,WAAWT,oBAAAA,CAAKqB,QAAQ,CAAChB,MAAMI,SAAS,EAAE;gBACxCa,iBAAiB;gBACjBC,aAAa;YACf;YACAC,SAAS,CAACC;oBAERpB;gBADAM,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAiBc,GAAGZ,MAAMC,OAAOC;iBACjCV,iBAAAA,MAAMmB,OAAAA,AAAO,MAAA,QAAbnB,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,IAAAA,CAAAA,OAAgBoB;YAClB;QACF,GACAnB,IACD;QACDO;QACAC;QACAC;IACF;IAEA,OAAOR;AACT,EAAE"}
|
|
@@ -30,20 +30,26 @@ const menuItemCheckboxClassNames = {
|
|
|
30
30
|
};
|
|
31
31
|
const useMenuItemCheckboxStyles_unstable = (state)=>{
|
|
32
32
|
'use no memo';
|
|
33
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
33
34
|
state.root.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.root, state.root.className);
|
|
34
35
|
if (state.content) {
|
|
36
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
35
37
|
state.content.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.content, state.content.className);
|
|
36
38
|
}
|
|
37
39
|
if (state.secondaryContent) {
|
|
40
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
38
41
|
state.secondaryContent.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);
|
|
39
42
|
}
|
|
40
43
|
if (state.icon) {
|
|
44
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
41
45
|
state.icon.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.icon, state.icon.className);
|
|
42
46
|
}
|
|
43
47
|
if (state.checkmark) {
|
|
48
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
44
49
|
state.checkmark.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.checkmark, state.checkmark.className);
|
|
45
50
|
}
|
|
46
51
|
if (state.subText) {
|
|
52
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
47
53
|
state.subText.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.subText, state.subText.className);
|
|
48
54
|
}
|
|
49
55
|
(0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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"],"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemCheckboxClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemCheckboxStyles_unstable","state","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICG,0BAA0B;;;IAQ1BO,kCAAkC;;;;uBAXlB,gBAAgB;uBACD,wBAAwB;yCACzB,sCAAsC;AAC1E,mCAAmC;IACtCN,IAAI,EAAE,sBAAsB;IAC5BC,IAAI,EAAE,4BAA4B;IAClCC,SAAS,EAAE,iCAAiC;IAC5CC,OAAO,EAAE,+BAA+B;IACxCC,gBAAgB,EAAE,wCAAwC;IAC1DC,OAAO,EAAE;AACb,CAAC;AACM,4CAA4CE,KAAK,IAAG;IACvD,aAAa;
|
|
1
|
+
{"version":3,"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"],"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemCheckboxClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemCheckboxStyles_unstable","state","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICG,0BAA0B;;;IAQ1BO,kCAAkC;;;;uBAXlB,gBAAgB;uBACD,wBAAwB;yCACzB,sCAAsC;AAC1E,mCAAmC;IACtCN,IAAI,EAAE,sBAAsB;IAC5BC,IAAI,EAAE,4BAA4B;IAClCC,SAAS,EAAE,iCAAiC;IAC5CC,OAAO,EAAE,+BAA+B;IACxCC,gBAAgB,EAAE,wCAAwC;IAC1DC,OAAO,EAAE;AACb,CAAC;AACM,4CAA4CE,KAAK,IAAG;IACvD,aAAa;IACb,oDAAA;IACAA,KAAK,CAACP,IAAI,CAACQ,SAAS,OAAGZ,mBAAY,EAACG,0BAA0B,CAACC,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACQ,SAAS,CAAC;IAC1F,IAAID,KAAK,CAACJ,OAAO,EAAE;QACf,oDAAA;QACAI,KAAK,CAACJ,OAAO,CAACK,SAAS,OAAGZ,mBAAY,EAACG,0BAA0B,CAACI,OAAO,EAAEI,KAAK,CAACJ,OAAO,CAACK,SAAS,CAAC;IACvG;IACA,IAAID,KAAK,CAACH,gBAAgB,EAAE;QACxB,oDAAA;QACAG,KAAK,CAACH,gBAAgB,CAACI,SAAS,OAAGZ,mBAAY,EAACG,0BAA0B,CAACK,gBAAgB,EAAEG,KAAK,CAACH,gBAAgB,CAACI,SAAS,CAAC;IAClI;IACA,IAAID,KAAK,CAACN,IAAI,EAAE;QACZ,oDAAA;QACAM,KAAK,CAACN,IAAI,CAACO,SAAS,OAAGZ,mBAAY,EAACG,0BAA0B,CAACE,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACO,SAAS,CAAC;IAC9F;IACA,IAAID,KAAK,CAACL,SAAS,EAAE;QACjB,oDAAA;QACAK,KAAK,CAACL,SAAS,CAACM,SAAS,OAAGZ,mBAAY,EAACG,0BAA0B,CAACG,SAAS,EAAEK,KAAK,CAACL,SAAS,CAACM,SAAS,CAAC;IAC7G;IACA,IAAID,KAAK,CAACF,OAAO,EAAE;QACf,oDAAA;QACAE,KAAK,CAACF,OAAO,CAACG,SAAS,GAAGZ,uBAAY,EAACG,0BAA0B,CAACM,OAAO,EAAEE,KAAK,CAACF,OAAO,CAACG,SAAS,CAAC;IACvG;QACAV,mDAA0B,EAACS,KAAK,CAAC;QACjCV,kCAA2B,EAACU,KAAK,CAAC;IAClC,OAAOA,KAAK;AAChB,CAAC"}
|
|
@@ -30,20 +30,26 @@ const menuItemCheckboxClassNames = {
|
|
|
30
30
|
};
|
|
31
31
|
const useMenuItemCheckboxStyles_unstable = (state)=>{
|
|
32
32
|
'use no memo';
|
|
33
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
33
34
|
state.root.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.root, state.root.className);
|
|
34
35
|
if (state.content) {
|
|
36
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
35
37
|
state.content.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.content, state.content.className);
|
|
36
38
|
}
|
|
37
39
|
if (state.secondaryContent) {
|
|
40
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
38
41
|
state.secondaryContent.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);
|
|
39
42
|
}
|
|
40
43
|
if (state.icon) {
|
|
44
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
41
45
|
state.icon.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.icon, state.icon.className);
|
|
42
46
|
}
|
|
43
47
|
if (state.checkmark) {
|
|
48
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
44
49
|
state.checkmark.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.checkmark, state.checkmark.className);
|
|
45
50
|
}
|
|
46
51
|
if (state.subText) {
|
|
52
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
47
53
|
state.subText.className = (0, _react.mergeClasses)(menuItemCheckboxClassNames.subText, state.subText.className);
|
|
48
54
|
}
|
|
49
55
|
(0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)(state);
|
package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js.map
CHANGED
|
@@ -1 +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;;;;;;;;;;;;IASaG,0BAAAA;;;IASAO,kCAAAA;;;;uBAhBgB,iBAAiB;uBACF,yBAAyB;yCAC1B,uCAAuC;AAK3E,mCAA4F;IACjGN,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX,EAAE;AAEK,2CAA2C,CAACE;IACjD;
|
|
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 // 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;;;;;;;;;;;;IASaG,0BAAAA;;;IASAO,kCAAAA;;;;uBAhBgB,iBAAiB;uBACF,yBAAyB;yCAC1B,uCAAuC;AAK3E,mCAA4F;IACjGN,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX,EAAE;AAEK,2CAA2C,CAACE;IACjD;IAEA,oDAAoD;IACpDA,MAAMP,IAAI,CAACQ,SAAS,OAAGZ,mBAAAA,EAAaG,2BAA2BC,IAAI,EAAEO,MAAMP,IAAI,CAACQ,SAAS;IAEzF,IAAID,MAAMJ,OAAO,EAAE;QACjB,oDAAoD;QACpDI,MAAMJ,OAAO,CAACK,SAAS,OAAGZ,mBAAAA,EAAaG,2BAA2BI,OAAO,EAAEI,MAAMJ,OAAO,CAACK,SAAS;IACpG;IAEA,IAAID,MAAMH,gBAAgB,EAAE;QAC1B,oDAAoD;QACpDG,MAAMH,gBAAgB,CAACI,SAAS,OAAGZ,mBAAAA,EACjCG,2BAA2BK,gBAAgB,EAC3CG,MAAMH,gBAAgB,CAACI,SAAS;IAEpC;IAEA,IAAID,MAAMN,IAAI,EAAE;QACd,oDAAoD;QACpDM,MAAMN,IAAI,CAACO,SAAS,OAAGZ,mBAAAA,EAAaG,2BAA2BE,IAAI,EAAEM,MAAMN,IAAI,CAACO,SAAS;IAC3F;IAEA,IAAID,MAAML,SAAS,EAAE;QACnB,oDAAoD;QACpDK,MAAML,SAAS,CAACM,SAAS,OAAGZ,mBAAAA,EAAaG,2BAA2BG,SAAS,EAAEK,MAAML,SAAS,CAACM,SAAS;IAC1G;IAEA,IAAID,MAAMF,OAAO,EAAE;QACjB,oDAAoD;QACpDE,MAAMF,OAAO,CAACG,SAAS,GAAGZ,uBAAAA,EAAaG,2BAA2BM,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACpG;QAEAV,mDAAAA,EAA2BS;QAC3BV,kCAAAA,EAA4BU;IAE5B,OAAOA;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuItemLink/MenuItemLink.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { MenuItemProps, MenuItemSlots } from '../MenuItem/MenuItem.types';\n\nexport type MenuItemLinkSlots = {\n root: Slot<'a'>;\n} & Pick<MenuItemSlots, 'icon' | 'content' | 'secondaryContent' | 'checkmark'>;\n\n/**\n * MenuItemLink Props\n */\nexport type MenuItemLinkProps = ComponentProps<MenuItemLinkSlots> & Pick<MenuItemProps, 'disabled'> & { href: string };\n\n/**\n * State used in rendering MenuItemLink\n */\nexport type MenuItemLinkState = ComponentState<MenuItemLinkSlots>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAAkE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuItemLink/MenuItemLink.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MenuItemProps, MenuItemSlots } from '../MenuItem/MenuItem.types';\n\nexport type MenuItemLinkSlots = {\n root: Slot<'a'>;\n} & Pick<MenuItemSlots, 'icon' | 'content' | 'secondaryContent' | 'checkmark'>;\n\n/**\n * MenuItemLink Props\n */\nexport type MenuItemLinkProps = ComponentProps<MenuItemLinkSlots> & Pick<MenuItemProps, 'disabled'> & { href: string };\n\n/**\n * State used in rendering MenuItemLink\n */\nexport type MenuItemLinkState = ComponentState<MenuItemLinkSlots>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAAkE"}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
renderMenuItemLink_unstable: function() {
|
|
19
19
|
return _renderMenuItemLink.renderMenuItemLink_unstable;
|
|
20
20
|
},
|
|
21
|
+
useMenuItemLinkBase_unstable: function() {
|
|
22
|
+
return _useMenuItemLink.useMenuItemLinkBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useMenuItemLinkStyles_unstable: function() {
|
|
22
25
|
return _useMenuItemLinkStylesstyles.useMenuItemLinkStyles_unstable;
|
|
23
26
|
},
|
|
@@ -1 +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":";;;;;;;;;;;;eAASA,0BAAY;;;
|
|
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 { 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":";;;;;;;;;;;;eAASA,0BAAY;;;eAIZI,mDAAsB;;;eAFtBH,+CAA2B;;;eAC3BC,6CAA4B;;;eACJG,2DAA8B;;;eADxBF,yCAAwB;;;8BAHlC,iBAAiB;oCAEF,uBAAuB;iCACI,oBAAoB;6CACpB,iCAAiC"}
|
|
@@ -3,16 +3,23 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
function _export(target, all) {
|
|
7
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: all[name]
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
_export(exports, {
|
|
13
|
+
useMenuItemLinkBase_unstable: function() {
|
|
14
|
+
return useMenuItemLinkBase_unstable;
|
|
15
|
+
},
|
|
16
|
+
useMenuItemLink_unstable: function() {
|
|
9
17
|
return useMenuItemLink_unstable;
|
|
10
18
|
}
|
|
11
19
|
});
|
|
12
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
20
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
21
|
const _useMenuItem = require("../MenuItem/useMenuItem");
|
|
22
|
+
const _useMenuItemBase = require("../MenuItem/useMenuItemBase");
|
|
16
23
|
const useMenuItemLink_unstable = (props, ref)=>{
|
|
17
24
|
// casting because the root slot changes from div to a
|
|
18
25
|
const baseState = (0, _useMenuItem.useMenuItem_unstable)(props, null);
|
|
@@ -40,3 +47,26 @@ const useMenuItemLink_unstable = (props, ref)=>{
|
|
|
40
47
|
})
|
|
41
48
|
};
|
|
42
49
|
};
|
|
50
|
+
const useMenuItemLinkBase_unstable = (props, ref)=>{
|
|
51
|
+
const baseState = (0, _useMenuItemBase.useMenuItemBase_unstable)(props, null);
|
|
52
|
+
const _props = {
|
|
53
|
+
...props,
|
|
54
|
+
...baseState.root,
|
|
55
|
+
ref,
|
|
56
|
+
tabIndex: props.tabIndex
|
|
57
|
+
};
|
|
58
|
+
return {
|
|
59
|
+
...baseState,
|
|
60
|
+
components: {
|
|
61
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
62
|
+
...baseState.components,
|
|
63
|
+
root: 'a'
|
|
64
|
+
},
|
|
65
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('a', {
|
|
66
|
+
role: 'menuitem',
|
|
67
|
+
..._props
|
|
68
|
+
}), {
|
|
69
|
+
elementType: 'a'
|
|
70
|
+
})
|
|
71
|
+
};
|
|
72
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLink.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ExtractSlotProps, Slot
|
|
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 { 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;;;;;;;;;;;;IAsDae,4BAAAA;;;IAnCAX,wBAAAA;;;;gCAfkC,4BAA4B;6BAEtC,0BAA0B;iCACtB,8BAA8B;AAYhE,iCAAiC,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,gBAAYL,iCAAAA,EAAqBG,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,oBAAAA,CAAKW,MAAM,KACfZ,wCAAAA,EAAyB,KAAK;YAC5Ba,MAAM;YACN,GAAGL,MAAM;QACX,IACA;YAAEM,aAAa;QAAI;IAEvB;AACF,EAAE;AASK,qCAAqC,CAC1CT,OACAC;IAEA,MAAMC,gBAAYJ,yCAAAA,EAAyBE,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,oBAAAA,CAAKW,MAAM,KACfZ,wCAAAA,EAAyB,KAAK;YAC5Ba,MAAM;YACN,GAAGL,MAAM;QACX,IACA;YAAEM,aAAa;QAAI;IAEvB;AACF,EAAE"}
|
|
@@ -47,17 +47,22 @@ const useMenuItemLinkStyles_unstable = (state)=>{
|
|
|
47
47
|
'use no memo';
|
|
48
48
|
(0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)(state);
|
|
49
49
|
const styles = useStyles();
|
|
50
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
50
51
|
state.root.className = (0, _react.mergeClasses)(menuItemLinkClassNames.root, styles.resetLink, state.root.className);
|
|
51
52
|
if (state.icon) {
|
|
53
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
52
54
|
state.icon.className = (0, _react.mergeClasses)(menuItemLinkClassNames.icon, state.icon.className);
|
|
53
55
|
}
|
|
54
56
|
if (state.content) {
|
|
57
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
55
58
|
state.content.className = (0, _react.mergeClasses)(menuItemLinkClassNames.content, state.content.className);
|
|
56
59
|
}
|
|
57
60
|
if (state.secondaryContent) {
|
|
61
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
58
62
|
state.secondaryContent.className = (0, _react.mergeClasses)(menuItemLinkClassNames.secondaryContent, state.secondaryContent.className);
|
|
59
63
|
}
|
|
60
64
|
if (state.checkmark) {
|
|
65
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
61
66
|
state.checkmark.className = (0, _react.mergeClasses)(menuItemLinkClassNames.checkmark, state.checkmark.className);
|
|
62
67
|
}
|
|
63
68
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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"],"names":["__styles","mergeClasses","useMenuItemStyles_unstable","menuItemLinkClassNames","root","icon","checkmark","content","secondaryContent","useStyles","resetLink","w71qe1","Bkioxbp","I8pafv","dvvfom","d","useMenuItemLinkStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,sBAAsB;;;kCAmBY;eAA9Ba;;;uBArBwB,gBAAgB;yCACd,sCAAsC;AAC1E,+BAA+B;IAClCZ,IAAI,EAAE,kBAAkB;IACxBC,IAAI,EAAE,wBAAwB;IAC9BC,SAAS,EAAE,6BAA6B;IACxCC,OAAO,EAAE,2BAA2B;IACpCC,gBAAgB,EAAE;AACtB,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAU,SAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAOrB,CAAC;AAGS,wCAAwCE,KAAK,IAAG;IACvD,aAAa;QACbf,mDAA0B,EAACe,KAAK,CAAC;IACjC,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"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"],"names":["__styles","mergeClasses","useMenuItemStyles_unstable","menuItemLinkClassNames","root","icon","checkmark","content","secondaryContent","useStyles","resetLink","w71qe1","Bkioxbp","I8pafv","dvvfom","d","useMenuItemLinkStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,sBAAsB;;;kCAmBY;eAA9Ba;;;uBArBwB,gBAAgB;yCACd,sCAAsC;AAC1E,+BAA+B;IAClCZ,IAAI,EAAE,kBAAkB;IACxBC,IAAI,EAAE,wBAAwB;IAC9BC,SAAS,EAAE,6BAA6B;IACxCC,OAAO,EAAE,2BAA2B;IACpCC,gBAAgB,EAAE;AACtB,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAU,SAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAOrB,CAAC;AAGS,wCAAwCE,KAAK,IAAG;IACvD,aAAa;QACbf,mDAA0B,EAACe,KAAK,CAAC;IACjC,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAQ,KAAK,CAACb,IAAI,CAACe,SAAS,OAAGlB,mBAAY,EAACE,sBAAsB,CAACC,IAAI,EAAEc,MAAM,CAACR,SAAS,EAAEO,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;IACxG,IAAIF,KAAK,CAACZ,IAAI,EAAE;QACZ,oDAAA;QACAY,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGlB,uBAAY,EAACE,sBAAsB,CAACE,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IAC1F;IACA,IAAIF,KAAK,CAACV,OAAO,EAAE;QACf,oDAAA;QACAU,KAAK,CAACV,OAAO,CAACY,SAAS,OAAGlB,mBAAY,EAACE,sBAAsB,CAACI,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACY,SAAS,CAAC;IACnG;IACA,IAAIF,KAAK,CAACT,gBAAgB,EAAE;QACxB,oDAAA;QACAS,KAAK,CAACT,gBAAgB,CAACW,SAAS,OAAGlB,mBAAY,EAACE,sBAAsB,CAACK,gBAAgB,EAAES,KAAK,CAACT,gBAAgB,CAACW,SAAS,CAAC;IAC9H;IACA,IAAIF,KAAK,CAACX,SAAS,EAAE;QACjB,oDAAA;QACAW,KAAK,CAACX,SAAS,CAACa,SAAS,OAAGlB,mBAAY,EAACE,sBAAsB,CAACG,SAAS,EAAEW,KAAK,CAACX,SAAS,CAACa,SAAS,CAAC;IACzG;IACA,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -40,17 +40,22 @@ const useMenuItemLinkStyles_unstable = (state)=>{
|
|
|
40
40
|
'use no memo';
|
|
41
41
|
(0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)(state);
|
|
42
42
|
const styles = useStyles();
|
|
43
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
43
44
|
state.root.className = (0, _react.mergeClasses)(menuItemLinkClassNames.root, styles.resetLink, state.root.className);
|
|
44
45
|
if (state.icon) {
|
|
46
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
45
47
|
state.icon.className = (0, _react.mergeClasses)(menuItemLinkClassNames.icon, state.icon.className);
|
|
46
48
|
}
|
|
47
49
|
if (state.content) {
|
|
50
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
48
51
|
state.content.className = (0, _react.mergeClasses)(menuItemLinkClassNames.content, state.content.className);
|
|
49
52
|
}
|
|
50
53
|
if (state.secondaryContent) {
|
|
54
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
51
55
|
state.secondaryContent.className = (0, _react.mergeClasses)(menuItemLinkClassNames.secondaryContent, state.secondaryContent.className);
|
|
52
56
|
}
|
|
53
57
|
if (state.checkmark) {
|
|
58
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
54
59
|
state.checkmark.className = (0, _react.mergeClasses)(menuItemLinkClassNames.checkmark, state.checkmark.className);
|
|
55
60
|
}
|
|
56
61
|
return state;
|
|
@@ -1 +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 { 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;;;;;;;;;;;;IAQaG,sBAAAA;;;IAuBAY,8BAAAA;;;;uBA7B4B,iBAAiB;yCAGf,uCAAuC;AAG3E,+BAAkE;IACvEX,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;AACpB,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYT,iBAAAA,EAAW;IAC3BU,WAAW;QACTC,oBAAoB;QACpBC,yBAAyB;QACzBC,qBAAqB;QACrBC,qBAAqB;IACvB;AACF;AAKO,uCAAuC,CAACE;IAC7C;IAEAd,uDAAAA,EAA2Bc;IAC3B,MAAMC,SAASR;
|
|
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 // 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;;;;;;;;;;;;IAQaG,sBAAAA;;;IAuBAY,8BAAAA;;;;uBA7B4B,iBAAiB;yCAGf,uCAAuC;AAG3E,+BAAkE;IACvEX,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;AACpB,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYT,iBAAAA,EAAW;IAC3BU,WAAW;QACTC,oBAAoB;QACpBC,yBAAyB;QACzBC,qBAAqB;QACrBC,qBAAqB;IACvB;AACF;AAKO,uCAAuC,CAACE;IAC7C;IAEAd,uDAAAA,EAA2Bc;IAC3B,MAAMC,SAASR;IACf,oDAAoD;IACpDO,MAAMZ,IAAI,CAACc,SAAS,OAAGjB,mBAAAA,EAAaE,uBAAuBC,IAAI,EAAEa,OAAOP,SAAS,EAAEM,MAAMZ,IAAI,CAACc,SAAS;IAEvG,IAAIF,MAAMX,IAAI,EAAE;QACd,oDAAoD;QACpDW,MAAMX,IAAI,CAACa,SAAS,OAAGjB,mBAAAA,EAAaE,uBAAuBE,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACvF;IAEA,IAAIF,MAAMT,OAAO,EAAE;QACjB,oDAAoD;QACpDS,MAAMT,OAAO,CAACW,SAAS,OAAGjB,mBAAAA,EAAaE,uBAAuBI,OAAO,EAAES,MAAMT,OAAO,CAACW,SAAS;IAChG;IAEA,IAAIF,MAAMR,gBAAgB,EAAE;QAC1B,oDAAoD;QACpDQ,MAAMR,gBAAgB,CAACU,SAAS,GAAGjB,uBAAAA,EACjCE,uBAAuBK,gBAAgB,EACvCQ,MAAMR,gBAAgB,CAACU,SAAS;IAEpC;IAEA,IAAIF,MAAMV,SAAS,EAAE;QACnB,oDAAoD;QACpDU,MAAMV,SAAS,CAACY,SAAS,OAAGjB,mBAAAA,EAAaE,uBAAuBG,SAAS,EAAEU,MAAMV,SAAS,CAACY,SAAS;IACtG;IAEA,OAAOF;AACT,EAAE"}
|
|
@@ -22,7 +22,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
|
22
22
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
23
23
|
const _reacticons = require("@fluentui/react-icons");
|
|
24
24
|
const _menuListContext = require("../../contexts/menuListContext");
|
|
25
|
-
const
|
|
25
|
+
const _useMenuItemBase = require("../MenuItem/useMenuItemBase");
|
|
26
26
|
const useMenuItemRadio_unstable = (props, ref)=>{
|
|
27
27
|
const state = useMenuItemRadioBase_unstable(props, ref);
|
|
28
28
|
// Set default checkmark icon
|
|
@@ -42,7 +42,7 @@ const useMenuItemRadioBase_unstable = (props, ref)=>{
|
|
|
42
42
|
});
|
|
43
43
|
const selectRadio = (0, _menuListContext.useMenuListContext_unstable)((context)=>context.selectRadio);
|
|
44
44
|
return {
|
|
45
|
-
...(0,
|
|
45
|
+
...(0, _useMenuItemBase.useMenuItemBase_unstable)({
|
|
46
46
|
...props,
|
|
47
47
|
role: 'menuitemradio',
|
|
48
48
|
'aria-checked': checked,
|