@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":["../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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { MenuItemLink } from './MenuItemLink';
|
|
2
2
|
export { renderMenuItemLink_unstable } from './renderMenuItemLink';
|
|
3
|
-
export { useMenuItemLink_unstable } from './useMenuItemLink';
|
|
3
|
+
export { useMenuItemLinkBase_unstable, useMenuItemLink_unstable } from './useMenuItemLink';
|
|
4
4
|
export { menuItemLinkClassNames, useMenuItemLinkStyles_unstable } from './useMenuItemLinkStyles.styles';
|
|
@@ -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":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;
|
|
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":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,4BAA4B,EAAEC,wBAAwB,QAAQ,oBAAoB;AAC3F,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from 'react';
|
|
3
2
|
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
4
3
|
import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
|
|
4
|
+
import { useMenuItemBase_unstable } from '../MenuItem/useMenuItemBase';
|
|
5
5
|
/**
|
|
6
6
|
* Create the state required to render MenuItemLink.
|
|
7
7
|
*
|
|
@@ -37,3 +37,32 @@ import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
|
|
|
37
37
|
})
|
|
38
38
|
};
|
|
39
39
|
};
|
|
40
|
+
/**
|
|
41
|
+
* Base hook for MenuItemLink, mirrors `useMenuItemLink_unstable` but composes with
|
|
42
|
+
* `useMenuItemBase_unstable`.
|
|
43
|
+
*
|
|
44
|
+
* @param props - props from this instance of MenuItemLink
|
|
45
|
+
* @param ref - reference to root HTMLElement of MenuItemLink
|
|
46
|
+
*/ export const useMenuItemLinkBase_unstable = (props, ref)=>{
|
|
47
|
+
const baseState = useMenuItemBase_unstable(props, null);
|
|
48
|
+
const _props = {
|
|
49
|
+
...props,
|
|
50
|
+
...baseState.root,
|
|
51
|
+
ref,
|
|
52
|
+
tabIndex: props.tabIndex
|
|
53
|
+
};
|
|
54
|
+
return {
|
|
55
|
+
...baseState,
|
|
56
|
+
components: {
|
|
57
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
58
|
+
...baseState.components,
|
|
59
|
+
root: 'a'
|
|
60
|
+
},
|
|
61
|
+
root: slot.always(getIntrinsicElementProps('a', {
|
|
62
|
+
role: 'menuitem',
|
|
63
|
+
..._props
|
|
64
|
+
}), {
|
|
65
|
+
elementType: 'a'
|
|
66
|
+
})
|
|
67
|
+
};
|
|
68
|
+
};
|
|
@@ -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;AAIA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,wBAAwB,QAAQ,8BAA8B;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,YAAYL,qBAAqBG,OAAwB;IAC/D,8DAA8D;IAC9D,iFAAiF;IACjF,mDAAmD;IACnD,MAAMG,SAAS;QAAE,GAAGH,KAAK;QAAE,GAAIE,UAAUE,IAAI;QAAkCH;QAAKI,UAAUL,MAAMK,QAAQ;IAAC;IAE7G,OAAO;QACL,GAAGH,SAAS;QACZI,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,UAAUI,UAAU;YACvBF,MAAM;QACR;QACAA,MAAMR,KAAKW,MAAM,CACfZ,yBAAyB,KAAK;YAC5Ba,MAAM;YACN,GAAGL,MAAM;QACX,IACA;YAAEM,aAAa;QAAI;IAEvB;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,+BAA+B,CAC1CV,OACAC;IAEA,MAAMC,YAAYJ,yBAAyBE,OAAwB;IACnE,MAAMG,SAAS;QAAE,GAAGH,KAAK;QAAE,GAAIE,UAAUE,IAAI;QAAkCH;QAAKI,UAAUL,MAAMK,QAAQ;IAAC;IAE7G,OAAO;QACL,GAAGH,SAAS;QACZI,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,UAAUI,UAAU;YACvBF,MAAM;QACR;QACAA,MAAMR,KAAKW,MAAM,CACfZ,yBAAyB,KAAK;YAC5Ba,MAAM;YACN,GAAGL,MAAM;QACX,IACA;YAAEM,aAAa;QAAI;IAEvB;AACF,EAAE"}
|
|
@@ -30,17 +30,22 @@ export const useMenuItemLinkStyles_unstable = state => {
|
|
|
30
30
|
|
|
31
31
|
useMenuItemStyles_unstable(state);
|
|
32
32
|
const styles = useStyles();
|
|
33
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
33
34
|
state.root.className = mergeClasses(menuItemLinkClassNames.root, styles.resetLink, state.root.className);
|
|
34
35
|
if (state.icon) {
|
|
36
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
35
37
|
state.icon.className = mergeClasses(menuItemLinkClassNames.icon, state.icon.className);
|
|
36
38
|
}
|
|
37
39
|
if (state.content) {
|
|
40
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
38
41
|
state.content.className = mergeClasses(menuItemLinkClassNames.content, state.content.className);
|
|
39
42
|
}
|
|
40
43
|
if (state.secondaryContent) {
|
|
44
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
41
45
|
state.secondaryContent.className = mergeClasses(menuItemLinkClassNames.secondaryContent, state.secondaryContent.className);
|
|
42
46
|
}
|
|
43
47
|
if (state.checkmark) {
|
|
48
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
44
49
|
state.checkmark.className = mergeClasses(menuItemLinkClassNames.checkmark, state.checkmark.className);
|
|
45
50
|
}
|
|
46
51
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","useMenuItemStyles_unstable","menuItemLinkClassNames","root","icon","checkmark","content","secondaryContent","useStyles","resetLink","w71qe1","Bkioxbp","I8pafv","dvvfom","d","useMenuItemLinkStyles_unstable","state","styles","className"],"sources":["useMenuItemLinkStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemLinkClassNames = {\n root: 'fui-MenuItemLink',\n icon: 'fui-MenuItemLink__icon',\n checkmark: 'fui-MenuItemLink__checkmark',\n content: 'fui-MenuItemLink__content',\n secondaryContent: 'fui-MenuItemLink__secondaryContent'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n resetLink: {\n textDecorationLine: 'none',\n textDecorationThickness: 'initial',\n textDecorationStyle: 'initial',\n textDecorationColor: 'initial'\n }\n});\n/**\n * Apply styling to the MenuItemLink slots based on the state\n */ export const useMenuItemLinkStyles_unstable = (state)=>{\n 'use no memo';\n useMenuItemStyles_unstable(state);\n const styles = useStyles();\n state.root.className = mergeClasses(menuItemLinkClassNames.root, styles.resetLink, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemLinkClassNames.icon, state.icon.className);\n }\n if (state.content) {\n state.content.className = mergeClasses(menuItemLinkClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemLinkClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemLinkClassNames.checkmark, state.checkmark.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE,wBAAwB;EAC9BC,SAAS,EAAE,6BAA6B;EACxCC,OAAO,EAAE,2BAA2B;EACpCC,gBAAgB,EAAE;AACtB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGT,QAAA;EAAAU,SAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACbf,0BAA0B,CAACe,KAAK,CAAC;EACjC,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","useMenuItemStyles_unstable","menuItemLinkClassNames","root","icon","checkmark","content","secondaryContent","useStyles","resetLink","w71qe1","Bkioxbp","I8pafv","dvvfom","d","useMenuItemLinkStyles_unstable","state","styles","className"],"sources":["useMenuItemLinkStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemLinkClassNames = {\n root: 'fui-MenuItemLink',\n icon: 'fui-MenuItemLink__icon',\n checkmark: 'fui-MenuItemLink__checkmark',\n content: 'fui-MenuItemLink__content',\n secondaryContent: 'fui-MenuItemLink__secondaryContent'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n resetLink: {\n textDecorationLine: 'none',\n textDecorationThickness: 'initial',\n textDecorationStyle: 'initial',\n textDecorationColor: 'initial'\n }\n});\n/**\n * Apply styling to the MenuItemLink slots based on the state\n */ export const useMenuItemLinkStyles_unstable = (state)=>{\n 'use no memo';\n useMenuItemStyles_unstable(state);\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(menuItemLinkClassNames.root, styles.resetLink, state.root.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(menuItemLinkClassNames.icon, state.icon.className);\n }\n if (state.content) {\n // eslint-disable-next-line react-hooks/immutability\n state.content.className = mergeClasses(menuItemLinkClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n // eslint-disable-next-line react-hooks/immutability\n state.secondaryContent.className = mergeClasses(menuItemLinkClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.checkmark) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkmark.className = mergeClasses(menuItemLinkClassNames.checkmark, state.checkmark.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE,wBAAwB;EAC9BC,SAAS,EAAE,6BAA6B;EACxCC,OAAO,EAAE,2BAA2B;EACpCC,gBAAgB,EAAE;AACtB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGT,QAAA;EAAAU,SAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACbf,0BAA0B,CAACe,KAAK,CAAC;EACjC,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B;EACAQ,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGlB,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEc,MAAM,CAACR,SAAS,EAAEO,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACxG,IAAIF,KAAK,CAACZ,IAAI,EAAE;IACZ;IACAY,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACE,sBAAsB,CAACE,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EAC1F;EACA,IAAIF,KAAK,CAACV,OAAO,EAAE;IACf;IACAU,KAAK,CAACV,OAAO,CAACY,SAAS,GAAGlB,YAAY,CAACE,sBAAsB,CAACI,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACY,SAAS,CAAC;EACnG;EACA,IAAIF,KAAK,CAACT,gBAAgB,EAAE;IACxB;IACAS,KAAK,CAACT,gBAAgB,CAACW,SAAS,GAAGlB,YAAY,CAACE,sBAAsB,CAACK,gBAAgB,EAAES,KAAK,CAACT,gBAAgB,CAACW,SAAS,CAAC;EAC9H;EACA,IAAIF,KAAK,CAACX,SAAS,EAAE;IACjB;IACAW,KAAK,CAACX,SAAS,CAACa,SAAS,GAAGlB,YAAY,CAACE,sBAAsB,CAACG,SAAS,EAAEW,KAAK,CAACX,SAAS,CAACa,SAAS,CAAC;EACzG;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -24,17 +24,22 @@ export const menuItemLinkClassNames = {
|
|
|
24
24
|
'use no memo';
|
|
25
25
|
useMenuItemStyles_unstable(state);
|
|
26
26
|
const styles = useStyles();
|
|
27
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
27
28
|
state.root.className = mergeClasses(menuItemLinkClassNames.root, styles.resetLink, state.root.className);
|
|
28
29
|
if (state.icon) {
|
|
30
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
29
31
|
state.icon.className = mergeClasses(menuItemLinkClassNames.icon, state.icon.className);
|
|
30
32
|
}
|
|
31
33
|
if (state.content) {
|
|
34
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
32
35
|
state.content.className = mergeClasses(menuItemLinkClassNames.content, state.content.className);
|
|
33
36
|
}
|
|
34
37
|
if (state.secondaryContent) {
|
|
38
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
35
39
|
state.secondaryContent.className = mergeClasses(menuItemLinkClassNames.secondaryContent, state.secondaryContent.className);
|
|
36
40
|
}
|
|
37
41
|
if (state.checkmark) {
|
|
42
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
38
43
|
state.checkmark.className = mergeClasses(menuItemLinkClassNames.checkmark, state.checkmark.className);
|
|
39
44
|
}
|
|
40
45
|
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;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,0BAA0B,QAAQ,uCAAuC;AAGlF,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;AACpB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYT,WAAW;IAC3BU,WAAW;QACTC,oBAAoB;QACpBC,yBAAyB;QACzBC,qBAAqB;QACrBC,qBAAqB;IACvB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEAd,2BAA2Bc;IAC3B,MAAMC,SAASR;
|
|
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;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,0BAA0B,QAAQ,uCAAuC;AAGlF,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;AACpB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYT,WAAW;IAC3BU,WAAW;QACTC,oBAAoB;QACpBC,yBAAyB;QACzBC,qBAAqB;QACrBC,qBAAqB;IACvB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEAd,2BAA2Bc;IAC3B,MAAMC,SAASR;IACf,oDAAoD;IACpDO,MAAMZ,IAAI,CAACc,SAAS,GAAGjB,aAAaE,uBAAuBC,IAAI,EAAEa,OAAOP,SAAS,EAAEM,MAAMZ,IAAI,CAACc,SAAS;IAEvG,IAAIF,MAAMX,IAAI,EAAE;QACd,oDAAoD;QACpDW,MAAMX,IAAI,CAACa,SAAS,GAAGjB,aAAaE,uBAAuBE,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACvF;IAEA,IAAIF,MAAMT,OAAO,EAAE;QACjB,oDAAoD;QACpDS,MAAMT,OAAO,CAACW,SAAS,GAAGjB,aAAaE,uBAAuBI,OAAO,EAAES,MAAMT,OAAO,CAACW,SAAS;IAChG;IAEA,IAAIF,MAAMR,gBAAgB,EAAE;QAC1B,oDAAoD;QACpDQ,MAAMR,gBAAgB,CAACU,SAAS,GAAGjB,aACjCE,uBAAuBK,gBAAgB,EACvCQ,MAAMR,gBAAgB,CAACU,SAAS;IAEpC;IAEA,IAAIF,MAAMV,SAAS,EAAE;QACnB,oDAAoD;QACpDU,MAAMV,SAAS,CAACY,SAAS,GAAGjB,aAAaE,uBAAuBG,SAAS,EAAEU,MAAMV,SAAS,CAACY,SAAS;IACtG;IAEA,OAAOF;AACT,EAAE"}
|
|
@@ -3,7 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import { slot } from '@fluentui/react-utilities';
|
|
4
4
|
import { Checkmark16Filled } from '@fluentui/react-icons';
|
|
5
5
|
import { useMenuListContext_unstable } from '../../contexts/menuListContext';
|
|
6
|
-
import { useMenuItemBase_unstable } from '../MenuItem/
|
|
6
|
+
import { useMenuItemBase_unstable } from '../MenuItem/useMenuItemBase';
|
|
7
7
|
/**
|
|
8
8
|
* Given user props, returns state and render function for a MenuItemRadio.
|
|
9
9
|
*/ export const useMenuItemRadio_unstable = (props, ref)=>{
|
|
@@ -19,8 +19,6 @@ import { useMenuItemBase_unstable } from '../MenuItem/useMenuItem';
|
|
|
19
19
|
/**
|
|
20
20
|
* Base hook for MenuItemRadio component, produces state required to render the component.
|
|
21
21
|
* It doesn't set any design-related props specific to MenuItemRadio.
|
|
22
|
-
*
|
|
23
|
-
* @internal
|
|
24
22
|
*/ export const useMenuItemRadioBase_unstable = (props, ref)=>{
|
|
25
23
|
const { name, value } = props;
|
|
26
24
|
const checked = useMenuListContext_unstable((context)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuItemRadio/useMenuItemRadio.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItemBase_unstable } from '../MenuItem/
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuItemRadio/useMenuItemRadio.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItemBase_unstable } from '../MenuItem/useMenuItemBase';\nimport type {\n MenuItemRadioBaseProps,\n MenuItemRadioBaseState,\n MenuItemRadioProps,\n MenuItemRadioState,\n} from './MenuItemRadio.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\n/**\n * Given user props, returns state and render function for a MenuItemRadio.\n */\nexport const useMenuItemRadio_unstable = (\n props: MenuItemRadioProps,\n ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemRadioState => {\n const state = useMenuItemRadioBase_unstable(props, ref);\n\n // Set default checkmark icon\n if (state.checkmark) {\n state.checkmark.children ??= <Checkmark16Filled />;\n }\n\n return state;\n};\n\n/**\n * Base hook for MenuItemRadio component, produces state required to render the component.\n * It doesn't set any design-related props specific to MenuItemRadio.\n */\nexport const useMenuItemRadioBase_unstable = (\n props: MenuItemRadioBaseProps,\n ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemRadioBaseState => {\n const { name, value } = props;\n\n const checked = useMenuListContext_unstable(context => {\n const checkedItems = context.checkedValues?.[name] || [];\n return checkedItems.indexOf(value) !== -1;\n });\n\n const selectRadio = useMenuListContext_unstable(context => context.selectRadio);\n\n return {\n ...useMenuItemBase_unstable(\n {\n ...props,\n role: 'menuitemradio',\n 'aria-checked': checked,\n checkmark: slot.optional(props.checkmark, {\n renderByDefault: true,\n elementType: 'span',\n }),\n onClick: (e: React.MouseEvent<ARIAButtonElementIntersection<'div'>>) => {\n selectRadio?.(e, name, value, checked);\n props.onClick?.(e);\n },\n },\n ref,\n ),\n checked,\n name,\n value,\n };\n};\n"],"names":["React","slot","Checkmark16Filled","useMenuListContext_unstable","useMenuItemBase_unstable","useMenuItemRadio_unstable","props","ref","state","useMenuItemRadioBase_unstable","checkmark","children","name","value","checked","context","checkedItems","checkedValues","indexOf","selectRadio","role","optional","renderByDefault","elementType","onClick","e"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,wBAAwB,QAAQ,8BAA8B;AASvE;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,QAAQC,8BAA8BH,OAAOC;IAEnD,6BAA6B;IAC7B,IAAIC,MAAME,SAAS,EAAE;YACnBF;;QAAAA,cAAAA,mBAAAA,MAAME,SAAS,EAACC,yDAAhBH,iBAAgBG,yBAAa,oBAACT;IAChC;IAEA,OAAOM;AACT,EAAE;AAEF;;;CAGC,GACD,OAAO,MAAMC,gCAAgC,CAC3CH,OACAC;IAEA,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,GAAGP;IAExB,MAAMQ,UAAUX,4BAA4BY,CAAAA;YACrBA;QAArB,MAAMC,eAAeD,EAAAA,yBAAAA,QAAQE,aAAa,cAArBF,6CAAAA,sBAAuB,CAACH,KAAK,KAAI,EAAE;QACxD,OAAOI,aAAaE,OAAO,CAACL,WAAW,CAAC;IAC1C;IAEA,MAAMM,cAAchB,4BAA4BY,CAAAA,UAAWA,QAAQI,WAAW;IAE9E,OAAO;QACL,GAAGf,yBACD;YACE,GAAGE,KAAK;YACRc,MAAM;YACN,gBAAgBN;YAChBJ,WAAWT,KAAKoB,QAAQ,CAACf,MAAMI,SAAS,EAAE;gBACxCY,iBAAiB;gBACjBC,aAAa;YACf;YACAC,SAAS,CAACC;oBAERnB;gBADAa,wBAAAA,kCAAAA,YAAcM,GAAGb,MAAMC,OAAOC;iBAC9BR,iBAAAA,MAAMkB,OAAO,cAAblB,qCAAAA,oBAAAA,OAAgBmB;YAClB;QACF,GACAlB,IACD;QACDO;QACAF;QACAC;IACF;AACF,EAAE"}
|
|
@@ -14,20 +14,26 @@ export const menuItemRadioClassNames = {
|
|
|
14
14
|
export const useMenuItemRadioStyles_unstable = state => {
|
|
15
15
|
'use no memo';
|
|
16
16
|
|
|
17
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
17
18
|
state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);
|
|
18
19
|
if (state.content) {
|
|
20
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
19
21
|
state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);
|
|
20
22
|
}
|
|
21
23
|
if (state.secondaryContent) {
|
|
24
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
22
25
|
state.secondaryContent.className = mergeClasses(menuItemRadioClassNames.secondaryContent, state.secondaryContent.className);
|
|
23
26
|
}
|
|
24
27
|
if (state.icon) {
|
|
28
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
25
29
|
state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);
|
|
26
30
|
}
|
|
27
31
|
if (state.checkmark) {
|
|
32
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
28
33
|
state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);
|
|
29
34
|
}
|
|
30
35
|
if (state.subText) {
|
|
36
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
31
37
|
state.subText.className = mergeClasses(menuItemRadioClassNames.subText, state.subText.className);
|
|
32
38
|
}
|
|
33
39
|
useMenuItemStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemRadioClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemRadioStyles_unstable","state","className"],"sources":["useMenuItemRadioStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemRadioClassNames = {\n root: 'fui-MenuItemRadio',\n icon: 'fui-MenuItemRadio__icon',\n checkmark: 'fui-MenuItemRadio__checkmark',\n content: 'fui-MenuItemRadio__content',\n secondaryContent: 'fui-MenuItemRadio__secondaryContent',\n subText: 'fui-MenuItemRadio__subText'\n};\nexport const useMenuItemRadioStyles_unstable = (state)=>{\n 'use no memo';\n state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemRadioClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);\n }\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);\n }\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemRadioClassNames.subText, state.subText.className);\n }\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,IAAI,EAAE,yBAAyB;EAC/BC,SAAS,EAAE,8BAA8B;EACzCC,OAAO,EAAE,4BAA4B;EACrCC,gBAAgB,EAAE,qCAAqC;EACvDC,OAAO,EAAE;AACb,CAAC;AACD,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACpD,aAAa;;
|
|
1
|
+
{"version":3,"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemRadioClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemRadioStyles_unstable","state","className"],"sources":["useMenuItemRadioStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemRadioClassNames = {\n root: 'fui-MenuItemRadio',\n icon: 'fui-MenuItemRadio__icon',\n checkmark: 'fui-MenuItemRadio__checkmark',\n content: 'fui-MenuItemRadio__content',\n secondaryContent: 'fui-MenuItemRadio__secondaryContent',\n subText: 'fui-MenuItemRadio__subText'\n};\nexport const useMenuItemRadioStyles_unstable = (state)=>{\n 'use no memo';\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);\n if (state.content) {\n // eslint-disable-next-line react-hooks/immutability\n state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n // eslint-disable-next-line react-hooks/immutability\n state.secondaryContent.className = mergeClasses(menuItemRadioClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);\n }\n if (state.checkmark) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);\n }\n if (state.subText) {\n // eslint-disable-next-line react-hooks/immutability\n state.subText.className = mergeClasses(menuItemRadioClassNames.subText, state.subText.className);\n }\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,IAAI,EAAE,yBAAyB;EAC/BC,SAAS,EAAE,8BAA8B;EACzCC,OAAO,EAAE,4BAA4B;EACrCC,gBAAgB,EAAE,qCAAqC;EACvDC,OAAO,EAAE;AACb,CAAC;AACD,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACb;EACAA,KAAK,CAACP,IAAI,CAACQ,SAAS,GAAGZ,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACQ,SAAS,CAAC;EACvF,IAAID,KAAK,CAACJ,OAAO,EAAE;IACf;IACAI,KAAK,CAACJ,OAAO,CAACK,SAAS,GAAGZ,YAAY,CAACG,uBAAuB,CAACI,OAAO,EAAEI,KAAK,CAACJ,OAAO,CAACK,SAAS,CAAC;EACpG;EACA,IAAID,KAAK,CAACH,gBAAgB,EAAE;IACxB;IACAG,KAAK,CAACH,gBAAgB,CAACI,SAAS,GAAGZ,YAAY,CAACG,uBAAuB,CAACK,gBAAgB,EAAEG,KAAK,CAACH,gBAAgB,CAACI,SAAS,CAAC;EAC/H;EACA,IAAID,KAAK,CAACN,IAAI,EAAE;IACZ;IACAM,KAAK,CAACN,IAAI,CAACO,SAAS,GAAGZ,YAAY,CAACG,uBAAuB,CAACE,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACO,SAAS,CAAC;EAC3F;EACA,IAAID,KAAK,CAACL,SAAS,EAAE;IACjB;IACAK,KAAK,CAACL,SAAS,CAACM,SAAS,GAAGZ,YAAY,CAACG,uBAAuB,CAACG,SAAS,EAAEK,KAAK,CAACL,SAAS,CAACM,SAAS,CAAC;EAC1G;EACA,IAAID,KAAK,CAACF,OAAO,EAAE;IACf;IACAE,KAAK,CAACF,OAAO,CAACG,SAAS,GAAGZ,YAAY,CAACG,uBAAuB,CAACM,OAAO,EAAEE,KAAK,CAACF,OAAO,CAACG,SAAS,CAAC;EACpG;EACAV,0BAA0B,CAACS,KAAK,CAAC;EACjCV,2BAA2B,CAACU,KAAK,CAAC;AACtC,CAAC","ignoreList":[]}
|
|
@@ -12,20 +12,26 @@ export const menuItemRadioClassNames = {
|
|
|
12
12
|
};
|
|
13
13
|
export const useMenuItemRadioStyles_unstable = (state)=>{
|
|
14
14
|
'use no memo';
|
|
15
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
15
16
|
state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);
|
|
16
17
|
if (state.content) {
|
|
18
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
17
19
|
state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);
|
|
18
20
|
}
|
|
19
21
|
if (state.secondaryContent) {
|
|
22
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
20
23
|
state.secondaryContent.className = mergeClasses(menuItemRadioClassNames.secondaryContent, state.secondaryContent.className);
|
|
21
24
|
}
|
|
22
25
|
if (state.icon) {
|
|
26
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
23
27
|
state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);
|
|
24
28
|
}
|
|
25
29
|
if (state.checkmark) {
|
|
30
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
26
31
|
state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);
|
|
27
32
|
}
|
|
28
33
|
if (state.subText) {
|
|
34
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
29
35
|
state.subText.className = mergeClasses(menuItemRadioClassNames.subText, state.subText.className);
|
|
30
36
|
}
|
|
31
37
|
useMenuItemStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../index';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\n\nexport const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n root: 'fui-MenuItemRadio',\n icon: 'fui-MenuItemRadio__icon',\n checkmark: 'fui-MenuItemRadio__checkmark',\n content: 'fui-MenuItemRadio__content',\n secondaryContent: 'fui-MenuItemRadio__secondaryContent',\n subText: 'fui-MenuItemRadio__subText',\n};\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState): void => {\n 'use no memo';\n\n state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemRadioClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);\n }\n\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemRadioClassNames.subText, state.subText.className);\n }\n\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"],"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemRadioClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemRadioStyles_unstable","state","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,2BAA2B,QAAQ,yBAAyB;AACrE,SAASC,0BAA0B,QAAQ,uCAAuC;AAKlF,OAAO,MAAMC,0BAAmF;IAC9FC,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../index';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\n\nexport const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n root: 'fui-MenuItemRadio',\n icon: 'fui-MenuItemRadio__icon',\n checkmark: 'fui-MenuItemRadio__checkmark',\n content: 'fui-MenuItemRadio__content',\n secondaryContent: 'fui-MenuItemRadio__secondaryContent',\n subText: 'fui-MenuItemRadio__subText',\n};\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState): void => {\n 'use no memo';\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);\n\n if (state.content) {\n // eslint-disable-next-line react-hooks/immutability\n state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n // eslint-disable-next-line react-hooks/immutability\n state.secondaryContent.className = mergeClasses(\n menuItemRadioClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);\n }\n\n if (state.checkmark) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);\n }\n\n if (state.subText) {\n // eslint-disable-next-line react-hooks/immutability\n state.subText.className = mergeClasses(menuItemRadioClassNames.subText, state.subText.className);\n }\n\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"],"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemRadioClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemRadioStyles_unstable","state","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,2BAA2B,QAAQ,yBAAyB;AACrE,SAASC,0BAA0B,QAAQ,uCAAuC;AAKlF,OAAO,MAAMC,0BAAmF;IAC9FC,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,oDAAoD;IACpDA,MAAMP,IAAI,CAACQ,SAAS,GAAGZ,aAAaG,wBAAwBC,IAAI,EAAEO,MAAMP,IAAI,CAACQ,SAAS;IAEtF,IAAID,MAAMJ,OAAO,EAAE;QACjB,oDAAoD;QACpDI,MAAMJ,OAAO,CAACK,SAAS,GAAGZ,aAAaG,wBAAwBI,OAAO,EAAEI,MAAMJ,OAAO,CAACK,SAAS;IACjG;IAEA,IAAID,MAAMH,gBAAgB,EAAE;QAC1B,oDAAoD;QACpDG,MAAMH,gBAAgB,CAACI,SAAS,GAAGZ,aACjCG,wBAAwBK,gBAAgB,EACxCG,MAAMH,gBAAgB,CAACI,SAAS;IAEpC;IAEA,IAAID,MAAMN,IAAI,EAAE;QACd,oDAAoD;QACpDM,MAAMN,IAAI,CAACO,SAAS,GAAGZ,aAAaG,wBAAwBE,IAAI,EAAEM,MAAMN,IAAI,CAACO,SAAS;IACxF;IAEA,IAAID,MAAML,SAAS,EAAE;QACnB,oDAAoD;QACpDK,MAAML,SAAS,CAACM,SAAS,GAAGZ,aAAaG,wBAAwBG,SAAS,EAAEK,MAAML,SAAS,CAACM,SAAS;IACvG;IAEA,IAAID,MAAMF,OAAO,EAAE;QACjB,oDAAoD;QACpDE,MAAMF,OAAO,CAACG,SAAS,GAAGZ,aAAaG,wBAAwBM,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACjG;IAEAV,2BAA2BS;IAC3BV,4BAA4BU;AAC9B,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuItemSwitch/MenuItemSwitch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { MenuItemSlots } from '../MenuItem/MenuItem.types';\nimport { MenuItemSelectableState } from '../../selectable/types';\nimport { MenuItemCheckboxProps } from '../MenuItemCheckbox/MenuItemCheckbox.types';\n\nexport type MenuItemSwitchSlots = Pick<MenuItemSlots, 'root' | 'content' | 'secondaryContent' | 'icon' | 'subText'> & {\n switchIndicator?: Slot<'span'>;\n};\n\n/**\n * MenuItemSwitch Props\n */\nexport type MenuItemSwitchProps = ComponentProps<MenuItemSwitchSlots> &\n Pick<MenuItemCheckboxProps, 'disabled' | 'persistOnClick' | 'name' | 'value'>;\n\n/**\n * State used in rendering MenuItemSwitch\n */\nexport type MenuItemSwitchState = ComponentState<MenuItemSwitchSlots> &\n MenuItemSelectableState &\n Required<Pick<MenuItemSwitchProps, 'disabled'>>;\n"],"names":[],"mappings":"AAeA;;CAEC,GACD,WAEkD"}
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuItemSwitch/MenuItemSwitch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../MenuItem/MenuItem.types';\nimport type { MenuItemSelectableState } from '../../selectable/types';\nimport type { MenuItemCheckboxProps } from '../MenuItemCheckbox/MenuItemCheckbox.types';\n\nexport type MenuItemSwitchSlots = Pick<MenuItemSlots, 'root' | 'content' | 'secondaryContent' | 'icon' | 'subText'> & {\n switchIndicator?: Slot<'span'>;\n};\n\n/**\n * MenuItemSwitch Props\n */\nexport type MenuItemSwitchProps = ComponentProps<MenuItemSwitchSlots> &\n Pick<MenuItemCheckboxProps, 'disabled' | 'persistOnClick' | 'name' | 'value'>;\n\n/**\n * State used in rendering MenuItemSwitch\n */\nexport type MenuItemSwitchState = ComponentState<MenuItemSwitchSlots> &\n MenuItemSelectableState &\n Required<Pick<MenuItemSwitchProps, 'disabled'>>;\n"],"names":[],"mappings":"AAeA;;CAEC,GACD,WAEkD"}
|
|
@@ -28,7 +28,6 @@ import { circleFilledClassName } from './useMenuItemSwitchStyles.styles';
|
|
|
28
28
|
* Base hook for MenuItemSwitch component, produces state required to render the component.
|
|
29
29
|
* It doesn't set any design-related props specific to MenuItemSwitch.
|
|
30
30
|
*
|
|
31
|
-
* @internal
|
|
32
31
|
* @param props - props from this instance of MenuItemSwitch
|
|
33
32
|
* @param ref - reference to root HTMLDivElement of MenuItemSwitch
|
|
34
33
|
*/ export const useMenuItemSwitchBase_unstable = (props, ref)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchProps, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemCheckboxBase_unstable } from '../MenuItemCheckbox/useMenuItemCheckbox';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { circleFilledClassName } from './useMenuItemSwitchStyles.styles';\n\n/**\n * Create the state required to render MenuItemSwitch.\n *\n * The returned state can be modified with hooks such as useMenuItemSwitchStyles_unstable,\n * before being passed to renderMenuItemSwitch_unstable.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitch_unstable = (\n props: MenuItemSwitchProps,\n ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n const state = useMenuItemSwitchBase_unstable(props, ref);\n\n // Set default icon for switch indicator\n if (state.switchIndicator) {\n state.switchIndicator.children ??= <CircleFilled className={circleFilledClassName} />;\n }\n\n return state;\n};\n\n/**\n * Base hook for MenuItemSwitch component, produces state required to render the component.\n * It doesn't set any design-related props specific to MenuItemSwitch.\n *\n * @
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchProps, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemCheckboxBase_unstable } from '../MenuItemCheckbox/useMenuItemCheckbox';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { circleFilledClassName } from './useMenuItemSwitchStyles.styles';\n\n/**\n * Create the state required to render MenuItemSwitch.\n *\n * The returned state can be modified with hooks such as useMenuItemSwitchStyles_unstable,\n * before being passed to renderMenuItemSwitch_unstable.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitch_unstable = (\n props: MenuItemSwitchProps,\n ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n const state = useMenuItemSwitchBase_unstable(props, ref);\n\n // Set default icon for switch indicator\n if (state.switchIndicator) {\n state.switchIndicator.children ??= <CircleFilled className={circleFilledClassName} />;\n }\n\n return state;\n};\n\n/**\n * Base hook for MenuItemSwitch component, produces state required to render the component.\n * It doesn't set any design-related props specific to MenuItemSwitch.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitchBase_unstable = (\n props: MenuItemSwitchProps,\n ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n const baseState = useMenuItemCheckboxBase_unstable(props, ref);\n return {\n ...baseState,\n switchIndicator: slot.optional(props.switchIndicator, {\n renderByDefault: true,\n elementType: 'span',\n }),\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...baseState.components,\n switchIndicator: 'span',\n },\n };\n};\n"],"names":["React","slot","useMenuItemCheckboxBase_unstable","CircleFilled","circleFilledClassName","useMenuItemSwitch_unstable","props","ref","state","useMenuItemSwitchBase_unstable","switchIndicator","children","className","baseState","optional","renderByDefault","elementType","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AAEjD,SAASC,gCAAgC,QAAQ,0CAA0C;AAC3F,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,QAAQC,+BAA+BH,OAAOC;IAEpD,wCAAwC;IACxC,IAAIC,MAAME,eAAe,EAAE;YACzBF;;QAAAA,cAAAA,yBAAAA,MAAME,eAAe,EAACC,yDAAtBH,uBAAsBG,yBAAa,oBAACR;YAAaS,WAAWR;;IAC9D;IAEA,OAAOI;AACT,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,iCAAiC,CAC5CH,OACAC;IAEA,MAAMM,YAAYX,iCAAiCI,OAAOC;IAC1D,OAAO;QACL,GAAGM,SAAS;QACZH,iBAAiBT,KAAKa,QAAQ,CAACR,MAAMI,eAAe,EAAE;YACpDK,iBAAiB;YACjBC,aAAa;QACf;QACAC,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,UAAUI,UAAU;YACvBP,iBAAiB;QACnB;IACF;AACF,EAAE"}
|
|
@@ -68,20 +68,26 @@ export const useMenuItemSwitchStyles_unstable = state => {
|
|
|
68
68
|
const switchIndicatorStyles = useSwitchIndicatorStyles();
|
|
69
69
|
const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();
|
|
70
70
|
const multilineStyles = useMultilineStyles();
|
|
71
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
71
72
|
state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);
|
|
72
73
|
if (state.content) {
|
|
74
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
73
75
|
state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);
|
|
74
76
|
}
|
|
75
77
|
if (state.secondaryContent) {
|
|
78
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
76
79
|
state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);
|
|
77
80
|
}
|
|
78
81
|
if (state.icon) {
|
|
82
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
79
83
|
state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);
|
|
80
84
|
}
|
|
81
85
|
if (state.subText) {
|
|
86
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
82
87
|
state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);
|
|
83
88
|
}
|
|
84
89
|
if (state.switchIndicator) {
|
|
90
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
85
91
|
state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);
|
|
86
92
|
}
|
|
87
93
|
useMenuItemStyles_unstable({
|
|
@@ -95,6 +101,7 @@ export const useMenuItemSwitchStyles_unstable = state => {
|
|
|
95
101
|
checkmark: undefined,
|
|
96
102
|
submenuIndicator: undefined,
|
|
97
103
|
hasSubmenu: false,
|
|
104
|
+
submenuOpen: false,
|
|
98
105
|
persistOnClick: true
|
|
99
106
|
});
|
|
100
107
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","__resetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","subText","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","r","s","useSwitchIndicatorStyles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useMultilineStyles","qb2dma","useMenuItemSwitchStyles_unstable","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","switch","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n subText: 'fui-MenuItemSwitch__subText'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n marginRight: tokens.spacingHorizontalXS,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n color: tokens.colorNeutralStrokeAccessible,\n ':hover': {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n },\n ':hover:active': {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n [`& .${circleFilledClassName}`]: {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n checked: {\n [`& .${circleFilledClassName}`]: {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n },\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n ':hover': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n },\n ':hover:active': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n }\n});\nconst useMultilineStyles = makeStyles({\n switch: {\n alignSelf: 'center'\n }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const { checked, subText } = state;\n const multiline = !!subText;\n const switchIndicatorStyles = useSwitchIndicatorStyles();\n const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n const multilineStyles = useMultilineStyles();\n state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n }\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n }\n if (state.switchIndicator) {\n state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);\n }\n useMenuItemStyles_unstable({\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n checkmark: 'span',\n submenuIndicator: 'span'\n },\n checkmark: undefined,\n submenuIndicator: undefined,\n hasSubmenu: false,\n persistOnClick: true\n });\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE,oBAAoB;EAC1BC,IAAI,EAAE,0BAA0B;EAChCC,OAAO,EAAE,6BAA6B;EACtCC,gBAAgB,EAAE,sCAAsC;EACxDC,eAAe,EAAE,qCAAqC;EACtDC,OAAO,EAAE;AACb,CAAC;AACD,OAAO,MAAMC,qBAAqB,GAAG,mDAAmD;AACxF;AACA,MAAMC,yBAAyB,GAAG,CAAC;AACnC,MAAMC,WAAW,GAAG,EAAE;AACtB,MAAMC,UAAU,GAAG,EAAE;AACrB,MAAMC,SAAS,GAAGF,WAAW,GAAGD,yBAAyB;AACzD,MAAMI,+BAA+B,gBAAGjB,aAAA;EAAAkB,CAAA;EAAAC,CAAA;AAAA,CAkCvC,CAAC;AACF,MAAMC,wBAAwB,gBAAGrB,QAAA;EAAAsB,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAmBhC,CAAC;AACF,MAAMC,kBAAkB,gBAAG5C,QAAA;EAAA;IAAA6C,MAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAI1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMI,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAM;IAAEzB,OAAO;IAAEV;EAAQ,CAAC,GAAGmC,KAAK;EAClC,MAAMC,SAAS,GAAG,CAAC,CAACpC,OAAO;EAC3B,MAAMqC,qBAAqB,GAAG5B,wBAAwB,CAAC,CAAC;EACxD,MAAM6B,yBAAyB,GAAGhC,+BAA+B,CAAC,CAAC;EACnE,MAAMiC,eAAe,GAAGP,kBAAkB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"names":["__styles","__resetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","subText","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","r","s","useSwitchIndicatorStyles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useMultilineStyles","qb2dma","useMenuItemSwitchStyles_unstable","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","switch","components","checkmark","submenuIndicator","undefined","hasSubmenu","submenuOpen","persistOnClick"],"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n subText: 'fui-MenuItemSwitch__subText'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n marginRight: tokens.spacingHorizontalXS,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n color: tokens.colorNeutralStrokeAccessible,\n ':hover': {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n },\n ':hover:active': {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n [`& .${circleFilledClassName}`]: {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n checked: {\n [`& .${circleFilledClassName}`]: {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n },\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n ':hover': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n },\n ':hover:active': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n }\n});\nconst useMultilineStyles = makeStyles({\n switch: {\n alignSelf: 'center'\n }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const { checked, subText } = state;\n const multiline = !!subText;\n const switchIndicatorStyles = useSwitchIndicatorStyles();\n const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n const multilineStyles = useMultilineStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n if (state.content) {\n // eslint-disable-next-line react-hooks/immutability\n state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n // eslint-disable-next-line react-hooks/immutability\n state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n }\n if (state.subText) {\n // eslint-disable-next-line react-hooks/immutability\n state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n }\n if (state.switchIndicator) {\n // eslint-disable-next-line react-hooks/immutability\n state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);\n }\n useMenuItemStyles_unstable({\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n checkmark: 'span',\n submenuIndicator: 'span'\n },\n checkmark: undefined,\n submenuIndicator: undefined,\n hasSubmenu: false,\n submenuOpen: false,\n persistOnClick: true\n });\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -85,20 +85,26 @@ const useMultilineStyles = makeStyles({
|
|
|
85
85
|
const switchIndicatorStyles = useSwitchIndicatorStyles();
|
|
86
86
|
const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();
|
|
87
87
|
const multilineStyles = useMultilineStyles();
|
|
88
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
88
89
|
state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);
|
|
89
90
|
if (state.content) {
|
|
91
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
90
92
|
state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);
|
|
91
93
|
}
|
|
92
94
|
if (state.secondaryContent) {
|
|
95
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
93
96
|
state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);
|
|
94
97
|
}
|
|
95
98
|
if (state.icon) {
|
|
99
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
96
100
|
state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);
|
|
97
101
|
}
|
|
98
102
|
if (state.subText) {
|
|
103
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
99
104
|
state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);
|
|
100
105
|
}
|
|
101
106
|
if (state.switchIndicator) {
|
|
107
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
102
108
|
state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);
|
|
103
109
|
}
|
|
104
110
|
useMenuItemStyles_unstable({
|
|
@@ -112,6 +118,7 @@ const useMultilineStyles = makeStyles({
|
|
|
112
118
|
checkmark: undefined,
|
|
113
119
|
submenuIndicator: undefined,
|
|
114
120
|
hasSubmenu: false,
|
|
121
|
+
submenuOpen: false,
|
|
115
122
|
persistOnClick: true
|
|
116
123
|
});
|
|
117
124
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { type SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchSlots, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\n\nexport const menuItemSwitchClassNames: SlotClassNames<MenuItemSwitchSlots> = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n subText: 'fui-MenuItemSwitch__subText',\n};\n\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n marginRight: tokens.spacingHorizontalXS,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n color: tokens.colorNeutralStrokeAccessible,\n ':hover': {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n ':hover:active': {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n [`& .${circleFilledClassName}`]: {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n});\n\nconst useSwitchIndicatorStyles = makeStyles({\n checked: {\n [`& .${circleFilledClassName}`]: {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n },\n\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n\n ':hover': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n\n ':hover:active': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n});\n\nconst useMultilineStyles = makeStyles({\n switch: {\n alignSelf: 'center',\n },\n});\n\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */\nexport const useMenuItemSwitchStyles_unstable = (state: MenuItemSwitchState): MenuItemSwitchState => {\n 'use no memo';\n\n const { checked, subText } = state;\n const multiline = !!subText;\n const switchIndicatorStyles = useSwitchIndicatorStyles();\n const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n const multilineStyles = useMultilineStyles();\n state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemSwitchClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n }\n\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n }\n\n if (state.switchIndicator) {\n state.switchIndicator.className = mergeClasses(\n menuItemSwitchClassNames.switchIndicator,\n switchIndicatorBaseStyles,\n checked && switchIndicatorStyles.checked,\n state.switchIndicator.className,\n multiline && multilineStyles.switch,\n );\n }\n\n useMenuItemStyles_unstable({\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n checkmark: 'span',\n submenuIndicator: 'span',\n },\n checkmark: undefined,\n submenuIndicator: undefined,\n hasSubmenu: false,\n persistOnClick: true,\n });\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","subText","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralStrokeAccessible","lineHeight","boxSizing","fill","flexShrink","fontSize","height","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","marginRight","spacingHorizontalXS","color","colorNeutralStrokeAccessibleHover","borderColor","colorNeutralStrokeAccessiblePressed","useSwitchIndicatorStyles","checked","transform","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","useMultilineStyles","switch","alignSelf","useMenuItemSwitchStyles_unstable","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACvF,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,0BAA0B,QAAQ,uCAAuC;AAElF,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,MAAM;IACNC,SAAS;IACTC,kBAAkB;IAClBC,iBAAiB;IACjBC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,wBAAwB,oDAAoD;AAEzF,+CAA+C;AAC/C,MAAMC,4BAA4B;AAClC,MAAMC,cAAc;AACpB,MAAMC,aAAa;AACnB,MAAMC,YAAYF,cAAcD;AAEhC,MAAMI,kCAAkCjB,gBAAgB;IACtDkB,cAAcf,OAAOgB,oBAAoB;IACzCC,QAAQ,GAAGjB,OAAOkB,eAAe,CAAC,OAAO,EAAElB,OAAOmB,4BAA4B,EAAE;IAChFC,YAAY;IACZC,WAAW;IACXC,MAAM;IACNC,YAAY;IACZC,UAAU,GAAGX,UAAU,EAAE,CAAC;IAC1BY,QAAQ,GAAGd,YAAY,EAAE,CAAC;IAC1Be,oBAAoB1B,OAAO2B,cAAc;IACzCC,0BAA0B5B,OAAO6B,aAAa;IAC9CC,oBAAoB;IACpBC,OAAO,GAAGnB,WAAW,EAAE,CAAC;IACxBoB,aAAahC,OAAOiC,mBAAmB;IAEvC,sDAAsD;QACpDP,oBAAoB;IACtB;IAEAQ,OAAOlC,OAAOmB,4BAA4B;IAC1C,UAAU;QACRe,OAAOlC,OAAOmC,iCAAiC;QAC/CC,aAAapC,OAAOmC,iCAAiC;IACvD;IAEA,iBAAiB;QACfD,OAAOlC,OAAOqC,mCAAmC;QACjDD,aAAapC,OAAOqC,mCAAmC;IACzD;IACA,CAAC,CAAC,GAAG,EAAE5B,uBAAuB,CAAC,EAAE;QAC/BiB,oBAAoB1B,OAAO2B,cAAc;QACzCC,0BAA0B5B,OAAO6B,aAAa;QAC9CC,oBAAoB;QAEpB,sDAAsD;YACpDJ,oBAAoB;QACtB;IACF;AACF;AAEA,MAAMY,2BAA2B1C,WAAW;IAC1C2C,SAAS;QACP,CAAC,CAAC,GAAG,EAAE9B,uBAAuB,CAAC,EAAE;YAC/B+B,WAAW,CAAC,WAAW,EAAE5B,aAAaC,YAAYH,0BAA0B,GAAG,CAAC;QAClF;QAEA+B,iBAAiBzC,OAAO0C,4BAA4B;QACpDR,OAAOlC,OAAO2C,8BAA8B;QAC5C,GAAG5C,WAAWqC,WAAW,CAACpC,OAAO4C,sBAAsB,CAAC;QAExD,UAAU;YACRV,OAAOlC,OAAO2C,8BAA8B;YAC5CF,iBAAiBzC,OAAO6C,iCAAiC;YACzD,GAAG9C,WAAWqC,WAAW,CAACpC,OAAO8C,iCAAiC,CAAC;QACrE;QAEA,iBAAiB;YACfZ,OAAOlC,OAAO2C,8BAA8B;YAC5CF,iBAAiBzC,OAAO+C,mCAAmC;YAC3D,GAAGhD,WAAWqC,WAAW,CAACpC,OAAO8C,iCAAiC,CAAC;QACrE;IACF;AACF;AAEA,MAAME,qBAAqBpD,WAAW;IACpCqD,QAAQ;QACNC,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAM,EAAEb,OAAO,EAAE/B,OAAO,EAAE,GAAG4C;IAC7B,MAAMC,YAAY,CAAC,CAAC7C;IACpB,MAAM8C,wBAAwBhB;IAC9B,MAAMiB,4BAA4BzC;IAClC,MAAM0C,kBAAkBR;
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { type SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchSlots, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\n\nexport const menuItemSwitchClassNames: SlotClassNames<MenuItemSwitchSlots> = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n subText: 'fui-MenuItemSwitch__subText',\n};\n\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n marginRight: tokens.spacingHorizontalXS,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n color: tokens.colorNeutralStrokeAccessible,\n ':hover': {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n ':hover:active': {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n [`& .${circleFilledClassName}`]: {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n});\n\nconst useSwitchIndicatorStyles = makeStyles({\n checked: {\n [`& .${circleFilledClassName}`]: {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n },\n\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n\n ':hover': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n\n ':hover:active': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n});\n\nconst useMultilineStyles = makeStyles({\n switch: {\n alignSelf: 'center',\n },\n});\n\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */\nexport const useMenuItemSwitchStyles_unstable = (state: MenuItemSwitchState): MenuItemSwitchState => {\n 'use no memo';\n\n const { checked, subText } = state;\n const multiline = !!subText;\n const switchIndicatorStyles = useSwitchIndicatorStyles();\n const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n const multilineStyles = useMultilineStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n if (state.content) {\n // eslint-disable-next-line react-hooks/immutability\n state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n // eslint-disable-next-line react-hooks/immutability\n state.secondaryContent.className = mergeClasses(\n menuItemSwitchClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n }\n\n if (state.subText) {\n // eslint-disable-next-line react-hooks/immutability\n state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n }\n\n if (state.switchIndicator) {\n // eslint-disable-next-line react-hooks/immutability\n state.switchIndicator.className = mergeClasses(\n menuItemSwitchClassNames.switchIndicator,\n switchIndicatorBaseStyles,\n checked && switchIndicatorStyles.checked,\n state.switchIndicator.className,\n multiline && multilineStyles.switch,\n );\n }\n\n useMenuItemStyles_unstable({\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n checkmark: 'span',\n submenuIndicator: 'span',\n },\n checkmark: undefined,\n submenuIndicator: undefined,\n hasSubmenu: false,\n submenuOpen: false,\n persistOnClick: true,\n });\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","subText","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralStrokeAccessible","lineHeight","boxSizing","fill","flexShrink","fontSize","height","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","marginRight","spacingHorizontalXS","color","colorNeutralStrokeAccessibleHover","borderColor","colorNeutralStrokeAccessiblePressed","useSwitchIndicatorStyles","checked","transform","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","useMultilineStyles","switch","alignSelf","useMenuItemSwitchStyles_unstable","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","components","checkmark","submenuIndicator","undefined","hasSubmenu","submenuOpen","persistOnClick"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuList/MenuList.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MenuListContextValue } from '../../contexts/menuListContext';\nimport type { SelectableHandler } from '../../selectable/index';\n\nexport type MenuCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;\n\nexport type MenuCheckedValueChangeData = {\n /** The items for this value that are checked */\n checkedItems: string[];\n /** The name of the value */\n name: string;\n};\n\nexport type MenuListSlots = {\n root: Slot<'div'>;\n};\n\nexport type MenuListProps = ComponentProps<MenuListSlots> & {\n /**\n * Map of all checked values\n */\n checkedValues?: Record<string, string[]>;\n\n /**\n * Default values to be checked on mount\n */\n defaultCheckedValues?: Record<string, string[]>;\n\n /**\n * States that menu items can contain selectable items and reserve slots for item alignment\n */\n hasCheckmarks?: boolean;\n\n /**\n * States that menu items can contain icons and reserve slots for item alignment\n */\n hasIcons?: boolean;\n\n /**\n * Callback when checked items change for value with a name\n *\n * @param event - React's original SyntheticEvent\n * @param data - A data object with relevant information\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;\n};\n\nexport type MenuListState = ComponentState<MenuListSlots> &\n Required<Pick<MenuListProps, 'checkedValues' | 'hasCheckmarks' | 'hasIcons'>> &\n Pick<MenuListProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {\n /**\n * Selects a radio item, will de-select the currently selected ratio item\n */\n selectRadio: SelectableHandler;\n\n /**\n * Callback to set focus on the next menu item by first character\n */\n setFocusByFirstCharacter: NonNullable<MenuListContextValue['setFocusByFirstCharacter']>;\n\n /*\n * Toggles the state of a checkbox item\n */\n toggleCheckbox: SelectableHandler;\n\n /**\n * States if the MenuList is inside MenuContext\n */\n hasMenuContext?: boolean;\n };\n\nexport type MenuListContextValues = {\n menuList: MenuListContextValue;\n};\n\n/**\n * @deprecated this type is not being used internally anymore\n */\nexport type UninitializedMenuListState = Omit<\n MenuListState,\n 'checkedValues' | 'selectRadio' | 'setFocusByFirstCharacter' | 'toggleCheckbox'\n> &\n Partial<Pick<MenuListState, 'checkedValues'>>;\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuList/MenuList.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MenuListContextValue } from '../../contexts/menuListContext';\nimport type { SelectableHandler } from '../../selectable/index';\n\nexport type MenuCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;\n\nexport type MenuCheckedValueChangeData = {\n /** The items for this value that are checked */\n checkedItems: string[];\n /** The name of the value */\n name: string;\n};\n\nexport type MenuListSlots = {\n root: Slot<'div'>;\n};\n\nexport type MenuListProps = ComponentProps<MenuListSlots> & {\n /**\n * Map of all checked values\n */\n checkedValues?: Record<string, string[]>;\n\n /**\n * Default values to be checked on mount\n */\n defaultCheckedValues?: Record<string, string[]>;\n\n /**\n * States that menu items can contain selectable items and reserve slots for item alignment\n */\n hasCheckmarks?: boolean;\n\n /**\n * States that menu items can contain icons and reserve slots for item alignment\n */\n hasIcons?: boolean;\n\n /**\n * Callback when checked items change for value with a name\n *\n * @param event - React's original SyntheticEvent\n * @param data - A data object with relevant information\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;\n};\n\nexport type MenuListState = ComponentState<MenuListSlots> &\n Required<Pick<MenuListProps, 'checkedValues' | 'hasCheckmarks' | 'hasIcons'>> &\n Pick<MenuListProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {\n /**\n * Selects a radio item, will de-select the currently selected ratio item\n */\n selectRadio: SelectableHandler;\n\n /**\n * Callback to set focus on the next menu item by first character\n */\n setFocusByFirstCharacter: NonNullable<MenuListContextValue['setFocusByFirstCharacter']>;\n\n /*\n * Toggles the state of a checkbox item\n */\n toggleCheckbox: SelectableHandler;\n\n /**\n * States if the MenuList is inside MenuContext\n */\n hasMenuContext?: boolean;\n };\n\nexport type MenuListContextValues = {\n menuList: MenuListContextValue;\n};\n\n/**\n * @deprecated this type is not being used internally anymore\n */\nexport type UninitializedMenuListState = Omit<\n MenuListState,\n 'checkedValues' | 'selectRadio' | 'setFocusByFirstCharacter' | 'toggleCheckbox'\n> &\n Partial<Pick<MenuListState, 'checkedValues'>>;\n"],"names":[],"mappings":"AA6EA;;CAEC,GACD,WAIgD"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { MenuList } from './MenuList';
|
|
2
2
|
export { renderMenuList_unstable } from './renderMenuList';
|
|
3
|
-
export { useMenuList_unstable } from './useMenuList';
|
|
3
|
+
export { useMenuList_unstable, useMenuListBase_unstable } from './useMenuList';
|
|
4
4
|
export { menuListClassNames, useMenuListStyles_unstable } from './useMenuListStyles.styles';
|
|
5
5
|
export { useMenuListContextValues_unstable } from './useMenuListContextValues';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuList/index.ts"],"sourcesContent":["export { MenuList } from './MenuList';\nexport type {\n MenuCheckedValueChangeData,\n MenuCheckedValueChangeEvent,\n MenuListContextValues,\n MenuListProps,\n MenuListSlots,\n MenuListState,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n UninitializedMenuListState,\n} from './MenuList.types';\nexport { renderMenuList_unstable } from './renderMenuList';\nexport { useMenuList_unstable } from './useMenuList';\nexport { menuListClassNames, useMenuListStyles_unstable } from './useMenuListStyles.styles';\nexport { useMenuListContextValues_unstable } from './useMenuListContextValues';\n"],"names":["MenuList","renderMenuList_unstable","useMenuList_unstable","menuListClassNames","useMenuListStyles_unstable","useMenuListContextValues_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAWtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuList/index.ts"],"sourcesContent":["export { MenuList } from './MenuList';\nexport type {\n MenuCheckedValueChangeData,\n MenuCheckedValueChangeEvent,\n MenuListContextValues,\n MenuListProps,\n MenuListSlots,\n MenuListState,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n UninitializedMenuListState,\n} from './MenuList.types';\nexport { renderMenuList_unstable } from './renderMenuList';\nexport { useMenuList_unstable, useMenuListBase_unstable } from './useMenuList';\nexport { menuListClassNames, useMenuListStyles_unstable } from './useMenuListStyles.styles';\nexport { useMenuListContextValues_unstable } from './useMenuListContextValues';\n"],"names":["MenuList","renderMenuList_unstable","useMenuList_unstable","useMenuListBase_unstable","menuListClassNames","useMenuListStyles_unstable","useMenuListContextValues_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAWtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,EAAEC,wBAAwB,QAAQ,gBAAgB;AAC/E,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B;AAC5F,SAASC,iCAAiC,QAAQ,6BAA6B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuList/renderMenuList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { MenuListContextValues, MenuListSlots, MenuListState } from './MenuList.types';\nimport { MenuListProvider } from '../../contexts/menuListContext';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuList_unstable = (state: MenuListState, contextValues: MenuListContextValues): JSXElement => {\n assertSlots<MenuListSlots>(state);\n\n return (\n <MenuListProvider value={contextValues.menuList}>\n <state.root />\n </MenuListProvider>\n );\n};\n"],"names":["assertSlots","MenuListProvider","renderMenuList_unstable","state","contextValues","value","menuList","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,gBAAgB,QAAQ,iCAAiC;AAElE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACF;QAAiBI,OAAOD,cAAcE,QAAQ;kBAC7C,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuList/renderMenuList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { MenuListContextValues, MenuListSlots, MenuListState } from './MenuList.types';\nimport { MenuListProvider } from '../../contexts/menuListContext';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuList_unstable = (state: MenuListState, contextValues: MenuListContextValues): JSXElement => {\n assertSlots<MenuListSlots>(state);\n\n return (\n <MenuListProvider value={contextValues.menuList}>\n <state.root />\n </MenuListProvider>\n );\n};\n"],"names":["assertSlots","MenuListProvider","renderMenuList_unstable","state","contextValues","value","menuList","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,gBAAgB,QAAQ,iCAAiC;AAElE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACF;QAAiBI,OAAOD,cAAcE,QAAQ;kBAC7C,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
|