@fluentui/react-menu 9.74.7-experimental.cli-api.20261006-ccaa611d58.0 → 9.75.0-experimental.css-modules.20261031-810ab07afb.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 +70 -17
- package/README.md +8 -0
- package/lib/components/Menu/Menu.js.map +1 -1
- package/lib/components/Menu/Menu.types.js.map +1 -1
- package/lib/components/Menu/MenuSurfaceMotion.js.map +1 -1
- package/lib/components/Menu/index.js.map +1 -1
- package/lib/components/Menu/renderMenu.js +2 -2
- package/lib/components/Menu/renderMenu.js.map +1 -1
- package/lib/components/Menu/useMenu.js +2 -2
- package/lib/components/Menu/useMenu.js.map +1 -1
- package/lib/components/Menu/useMenuContextValues.js.map +1 -1
- package/lib/components/MenuDivider/MenuDivider.js.map +1 -1
- package/lib/components/MenuDivider/MenuDivider.module.css +8 -0
- package/lib/components/MenuDivider/MenuDivider.types.js.map +1 -1
- package/lib/components/MenuDivider/index.js.map +1 -1
- package/lib/components/MenuDivider/renderMenuDivider.js +2 -2
- package/lib/components/MenuDivider/renderMenuDivider.js.map +1 -1
- package/lib/components/MenuDivider/useMenuDivider.js.map +1 -1
- package/lib/components/MenuDivider/useMenuDividerStyles.styles.css.js +9 -0
- package/lib/components/MenuDivider/useMenuDividerStyles.styles.css.js.map +1 -0
- package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.css.js +9 -0
- package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.css.js.map +1 -0
- package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuGroup/MenuGroup.js.map +1 -1
- package/lib/components/MenuGroup/MenuGroup.types.js.map +1 -1
- package/lib/components/MenuGroup/index.js.map +1 -1
- package/lib/components/MenuGroup/renderMenuGroup.js +2 -2
- package/lib/components/MenuGroup/renderMenuGroup.js.map +1 -1
- package/lib/components/MenuGroup/useMenuGroup.js.map +1 -1
- package/lib/components/MenuGroup/useMenuGroupContextValues.js.map +1 -1
- package/lib/components/MenuGroup/useMenuGroupStyles.styles.css.js +8 -0
- package/lib/components/MenuGroup/useMenuGroupStyles.styles.css.js.map +1 -0
- package/lib/components/MenuGroup/useMenuGroupStyles.styles.raw.css.js +8 -0
- package/lib/components/MenuGroup/useMenuGroupStyles.styles.raw.css.js.map +1 -0
- package/lib/components/MenuGroup/useMenuGroupStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuGroupHeader/MenuGroupHeader.js.map +1 -1
- package/lib/components/MenuGroupHeader/MenuGroupHeader.module.css +12 -0
- package/lib/components/MenuGroupHeader/MenuGroupHeader.types.js.map +1 -1
- package/lib/components/MenuGroupHeader/index.js.map +1 -1
- package/lib/components/MenuGroupHeader/renderMenuGroupHeader.js +2 -2
- package/lib/components/MenuGroupHeader/renderMenuGroupHeader.js.map +1 -1
- package/lib/components/MenuGroupHeader/useMenuGroupHeader.js.map +1 -1
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.css.js +9 -0
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.css.js.map +1 -0
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.css.js +9 -0
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.css.js.map +1 -0
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuItem/MenuItem.js.map +1 -1
- package/lib/components/MenuItem/MenuItem.module.css +335 -0
- package/lib/components/MenuItem/MenuItem.types.js.map +1 -1
- package/lib/components/MenuItem/index.js.map +1 -1
- package/lib/components/MenuItem/renderMenuItem.js +2 -2
- package/lib/components/MenuItem/renderMenuItem.js.map +1 -1
- package/lib/components/MenuItem/useCharacterSearch.js.map +1 -1
- package/lib/components/MenuItem/useMenuItem.js +1 -2
- package/lib/components/MenuItem/useMenuItem.js.map +1 -1
- package/lib/components/MenuItem/useMenuItemBase.js.map +1 -1
- package/lib/components/MenuItem/useMenuItemStyles.styles.css.js +43 -0
- package/lib/components/MenuItem/useMenuItemStyles.styles.css.js.map +1 -0
- package/lib/components/MenuItem/useMenuItemStyles.styles.js +19 -9
- package/lib/components/MenuItem/useMenuItemStyles.styles.js.map +1 -1
- package/lib/components/MenuItem/useMenuItemStyles.styles.raw.css.js +43 -0
- package/lib/components/MenuItem/useMenuItemStyles.styles.raw.css.js.map +1 -0
- package/lib/components/MenuItem/useMenuItemStyles.styles.raw.js +15 -6
- package/lib/components/MenuItem/useMenuItemStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuItemCheckbox/MenuItemCheckbox.js.map +1 -1
- package/lib/components/MenuItemCheckbox/MenuItemCheckbox.types.js.map +1 -1
- package/lib/components/MenuItemCheckbox/index.js.map +1 -1
- package/lib/components/MenuItemCheckbox/renderMenuItemCheckbox.js +2 -2
- package/lib/components/MenuItemCheckbox/renderMenuItemCheckbox.js.map +1 -1
- package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js +1 -2
- package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -1
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.css.js +39 -0
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.css.js.map +1 -0
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.css.js +39 -0
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.css.js.map +1 -0
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuItemLink/MenuItemLink.js.map +1 -1
- package/lib/components/MenuItemLink/MenuItemLink.module.css +8 -0
- package/lib/components/MenuItemLink/MenuItemLink.types.js.map +1 -1
- package/lib/components/MenuItemLink/index.js.map +1 -1
- package/lib/components/MenuItemLink/renderMenuItemLink.js +2 -2
- package/lib/components/MenuItemLink/renderMenuItemLink.js.map +1 -1
- package/lib/components/MenuItemLink/useMenuItemLink.js.map +1 -1
- package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.css.js +35 -0
- package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.css.js.map +1 -0
- package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.css.js +35 -0
- package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.css.js.map +1 -0
- package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuItemRadio/MenuItemRadio.js.map +1 -1
- package/lib/components/MenuItemRadio/MenuItemRadio.types.js.map +1 -1
- package/lib/components/MenuItemRadio/index.js.map +1 -1
- package/lib/components/MenuItemRadio/renderMenuItemRadio.js +2 -2
- package/lib/components/MenuItemRadio/renderMenuItemRadio.js.map +1 -1
- package/lib/components/MenuItemRadio/useMenuItemRadio.js +1 -2
- package/lib/components/MenuItemRadio/useMenuItemRadio.js.map +1 -1
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.css.js +38 -0
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.css.js.map +1 -0
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.css.js +38 -0
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.css.js.map +1 -0
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuItemSwitch/MenuItemSwitch.js.map +1 -1
- package/lib/components/MenuItemSwitch/MenuItemSwitch.module.css +70 -0
- package/lib/components/MenuItemSwitch/MenuItemSwitch.types.js.map +1 -1
- package/lib/components/MenuItemSwitch/index.js.map +1 -1
- package/lib/components/MenuItemSwitch/renderMenuItemSwitch.js +2 -2
- package/lib/components/MenuItemSwitch/renderMenuItemSwitch.js.map +1 -1
- package/lib/components/MenuItemSwitch/useMenuItemSwitch.js +1 -2
- package/lib/components/MenuItemSwitch/useMenuItemSwitch.js.map +1 -1
- package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.css.js +54 -0
- package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.css.js.map +1 -0
- package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.css.js +54 -0
- package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.css.js.map +1 -0
- package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuList/MenuList.js.map +1 -1
- package/lib/components/MenuList/MenuList.module.css +10 -0
- package/lib/components/MenuList/MenuList.types.js.map +1 -1
- package/lib/components/MenuList/index.js.map +1 -1
- package/lib/components/MenuList/renderMenuList.js +2 -2
- package/lib/components/MenuList/renderMenuList.js.map +1 -1
- package/lib/components/MenuList/useMenuList.js +1 -3
- package/lib/components/MenuList/useMenuList.js.map +1 -1
- package/lib/components/MenuList/useMenuListContextValues.js.map +1 -1
- package/lib/components/MenuList/useMenuListStyles.styles.css.js +11 -0
- package/lib/components/MenuList/useMenuListStyles.styles.css.js.map +1 -0
- package/lib/components/MenuList/useMenuListStyles.styles.raw.css.js +11 -0
- package/lib/components/MenuList/useMenuListStyles.styles.raw.css.js.map +1 -0
- package/lib/components/MenuList/useMenuListStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuPopover/MenuPopover.js.map +1 -1
- package/lib/components/MenuPopover/MenuPopover.module.css +19 -0
- package/lib/components/MenuPopover/MenuPopover.types.js.map +1 -1
- package/lib/components/MenuPopover/index.js.map +1 -1
- package/lib/components/MenuPopover/renderMenuPopover.js +2 -2
- package/lib/components/MenuPopover/renderMenuPopover.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopover.js +1 -1
- package/lib/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopoverStyles.styles.css.js +11 -0
- package/lib/components/MenuPopover/useMenuPopoverStyles.styles.css.js.map +1 -0
- package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.css.js +11 -0
- package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.css.js.map +1 -0
- package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuSplitGroup/MenuSplitGroup.js.map +1 -1
- package/lib/components/MenuSplitGroup/MenuSplitGroup.module.css +24 -0
- package/lib/components/MenuSplitGroup/MenuSplitGroup.types.js.map +1 -1
- package/lib/components/MenuSplitGroup/index.js.map +1 -1
- package/lib/components/MenuSplitGroup/renderMenuSplitGroup.js +4 -4
- package/lib/components/MenuSplitGroup/renderMenuSplitGroup.js.map +1 -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.css.js +12 -0
- package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.css.js.map +1 -0
- package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.css.js +12 -0
- package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.css.js.map +1 -0
- package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuTrigger/MenuTrigger.js.map +1 -1
- package/lib/components/MenuTrigger/MenuTrigger.types.js.map +1 -1
- package/lib/components/MenuTrigger/index.js.map +1 -1
- package/lib/components/MenuTrigger/renderMenuTrigger.js.map +1 -1
- package/lib/components/MenuTrigger/useMenuTrigger.js +2 -2
- package/lib/components/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib/components/index.js.map +1 -1
- package/lib/contexts/menuContext.js.map +1 -1
- package/lib/contexts/menuGroupContext.js.map +1 -1
- package/lib/contexts/menuListContext.js.map +1 -1
- package/lib/contexts/menuSplitGroupContext.js.map +1 -1
- package/lib/contexts/menuTriggerContext.js.map +1 -1
- package/lib/selectable/Checkmark.module.css +12 -0
- package/lib/selectable/index.js.map +1 -1
- package/lib/selectable/types.js.map +1 -1
- package/lib/selectable/useCheckmarkStyles.styles.css.js +11 -0
- package/lib/selectable/useCheckmarkStyles.styles.css.js.map +1 -0
- package/lib/selectable/useCheckmarkStyles.styles.raw.css.js +11 -0
- package/lib/selectable/useCheckmarkStyles.styles.raw.css.js.map +1 -0
- package/lib/selectable/useCheckmarkStyles.styles.raw.js.map +1 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/useIsSubmenu.js.map +1 -1
- package/lib/utils/useOnMenuEnter.js +1 -1
- package/lib/utils/useOnMenuEnter.js.map +1 -1
- package/lib/utils/useOnMenuSafeZoneTimeout.js.map +1 -1
- package/lib/utils/useValidateNesting.js +4 -4
- package/lib/utils/useValidateNesting.js.map +1 -1
- package/lib-commonjs/Menu.cjs +6 -6
- package/lib-commonjs/MenuDivider.cjs +6 -6
- package/lib-commonjs/MenuGroup.cjs +7 -7
- package/lib-commonjs/MenuGroupHeader.cjs +6 -6
- package/lib-commonjs/MenuItem.cjs +7 -7
- package/lib-commonjs/MenuItemCheckbox.cjs +7 -7
- package/lib-commonjs/MenuItemLink.cjs +7 -7
- package/lib-commonjs/MenuItemRadio.cjs +7 -7
- package/lib-commonjs/MenuItemSwitch.cjs +8 -8
- package/lib-commonjs/MenuList.cjs +8 -8
- package/lib-commonjs/MenuPopover.cjs +7 -7
- package/lib-commonjs/MenuSplitGroup.cjs +6 -6
- package/lib-commonjs/MenuTrigger.cjs +5 -5
- package/lib-commonjs/components/Menu/Menu.cjs.map +1 -1
- package/lib-commonjs/components/Menu/Menu.types.cjs.map +1 -1
- package/lib-commonjs/components/Menu/MenuSurfaceMotion.cjs.map +1 -1
- package/lib-commonjs/components/Menu/index.cjs +6 -6
- package/lib-commonjs/components/Menu/index.cjs.map +1 -1
- package/lib-commonjs/components/Menu/renderMenu.cjs.map +1 -1
- package/lib-commonjs/components/Menu/useMenu.cjs +5 -5
- package/lib-commonjs/components/Menu/useMenu.cjs.map +1 -1
- package/lib-commonjs/components/Menu/useMenuContextValues.cjs.map +1 -1
- package/lib-commonjs/components/MenuDivider/MenuDivider.cjs.map +1 -1
- package/lib-commonjs/components/MenuDivider/MenuDivider.module.css +8 -0
- package/lib-commonjs/components/MenuDivider/MenuDivider.types.cjs.map +1 -1
- package/lib-commonjs/components/MenuDivider/index.cjs +6 -6
- package/lib-commonjs/components/MenuDivider/index.cjs.map +1 -1
- package/lib-commonjs/components/MenuDivider/renderMenuDivider.cjs.map +1 -1
- package/lib-commonjs/components/MenuDivider/useMenuDivider.cjs.map +1 -1
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.cjs +3 -3
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.css.cjs +28 -0
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.cjs +3 -3
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.css.cjs +28 -0
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuGroup/MenuGroup.cjs.map +1 -1
- package/lib-commonjs/components/MenuGroup/MenuGroup.types.cjs.map +1 -1
- package/lib-commonjs/components/MenuGroup/index.cjs +7 -7
- package/lib-commonjs/components/MenuGroup/index.cjs.map +1 -1
- package/lib-commonjs/components/MenuGroup/renderMenuGroup.cjs.map +1 -1
- package/lib-commonjs/components/MenuGroup/useMenuGroup.cjs.map +1 -1
- package/lib-commonjs/components/MenuGroup/useMenuGroupContextValues.cjs.map +1 -1
- package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.styles.cjs +3 -3
- package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.styles.css.cjs +26 -0
- package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.styles.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.styles.raw.cjs +3 -3
- package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.styles.raw.css.cjs +26 -0
- package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.styles.raw.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuGroupHeader/MenuGroupHeader.cjs.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/MenuGroupHeader.module.css +12 -0
- package/lib-commonjs/components/MenuGroupHeader/MenuGroupHeader.types.cjs.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/index.cjs +6 -6
- package/lib-commonjs/components/MenuGroupHeader/index.cjs.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/renderMenuGroupHeader.cjs.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeader.cjs.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.cjs +3 -3
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.css.cjs +28 -0
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.cjs +3 -3
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.css.cjs +28 -0
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuItem/MenuItem.cjs.map +1 -1
- package/lib-commonjs/components/MenuItem/MenuItem.module.css +335 -0
- package/lib-commonjs/components/MenuItem/MenuItem.types.cjs.map +1 -1
- package/lib-commonjs/components/MenuItem/index.cjs +7 -7
- package/lib-commonjs/components/MenuItem/index.cjs.map +1 -1
- package/lib-commonjs/components/MenuItem/renderMenuItem.cjs.map +1 -1
- package/lib-commonjs/components/MenuItem/useCharacterSearch.cjs.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItem.cjs +1 -2
- package/lib-commonjs/components/MenuItem/useMenuItem.cjs.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItemBase.cjs.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.cjs +60 -38
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.css.cjs +62 -0
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.cjs +18 -9
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.css.cjs +62 -0
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuItemCheckbox/MenuItemCheckbox.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/MenuItemCheckbox.types.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/index.cjs +7 -7
- package/lib-commonjs/components/MenuItemCheckbox/index.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/renderMenuItemCheckbox.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckbox.cjs +4 -5
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckbox.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.cjs +3 -3
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.css.cjs +57 -0
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.cjs +3 -3
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.css.cjs +57 -0
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuItemLink/MenuItemLink.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemLink/MenuItemLink.module.css +8 -0
- package/lib-commonjs/components/MenuItemLink/MenuItemLink.types.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemLink/index.cjs +7 -7
- package/lib-commonjs/components/MenuItemLink/index.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemLink/renderMenuItemLink.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemLink/useMenuItemLink.cjs +3 -3
- package/lib-commonjs/components/MenuItemLink/useMenuItemLink.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.cjs +3 -3
- package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.css.cjs +52 -0
- package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.cjs +3 -3
- package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.css.cjs +52 -0
- package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuItemRadio/MenuItemRadio.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/MenuItemRadio.types.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/index.cjs +7 -7
- package/lib-commonjs/components/MenuItemRadio/index.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/renderMenuItemRadio.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadio.cjs +4 -5
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadio.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.cjs +3 -3
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.css.cjs +56 -0
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.cjs +3 -3
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.css.cjs +56 -0
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuItemSwitch/MenuItemSwitch.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/MenuItemSwitch.module.css +70 -0
- package/lib-commonjs/components/MenuItemSwitch/MenuItemSwitch.types.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/index.cjs +8 -8
- package/lib-commonjs/components/MenuItemSwitch/index.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/renderMenuItemSwitch.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitch.cjs +4 -5
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitch.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.cjs +4 -4
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.css.cjs +74 -0
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.cjs +4 -4
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.css.cjs +74 -0
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuList/MenuList.cjs.map +1 -1
- package/lib-commonjs/components/MenuList/MenuList.module.css +10 -0
- package/lib-commonjs/components/MenuList/MenuList.types.cjs.map +1 -1
- package/lib-commonjs/components/MenuList/index.cjs +8 -8
- package/lib-commonjs/components/MenuList/index.cjs.map +1 -1
- package/lib-commonjs/components/MenuList/renderMenuList.cjs.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuList.cjs +4 -6
- package/lib-commonjs/components/MenuList/useMenuList.cjs.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuListContextValues.cjs.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuListStyles.styles.cjs +3 -3
- package/lib-commonjs/components/MenuList/useMenuListStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuListStyles.styles.css.cjs +28 -0
- package/lib-commonjs/components/MenuList/useMenuListStyles.styles.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.cjs +3 -3
- package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.css.cjs +28 -0
- package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuPopover/MenuPopover.cjs.map +1 -1
- package/lib-commonjs/components/MenuPopover/MenuPopover.module.css +19 -0
- package/lib-commonjs/components/MenuPopover/MenuPopover.types.cjs.map +1 -1
- package/lib-commonjs/components/MenuPopover/index.cjs +7 -7
- package/lib-commonjs/components/MenuPopover/index.cjs.map +1 -1
- package/lib-commonjs/components/MenuPopover/renderMenuPopover.cjs.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopover.cjs +4 -4
- package/lib-commonjs/components/MenuPopover/useMenuPopover.cjs.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.cjs +3 -3
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.css.cjs +28 -0
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.cjs +3 -3
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.css.cjs +28 -0
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuSplitGroup/MenuSplitGroup.cjs.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/MenuSplitGroup.module.css +24 -0
- package/lib-commonjs/components/MenuSplitGroup/MenuSplitGroup.types.cjs.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/index.cjs +6 -6
- package/lib-commonjs/components/MenuSplitGroup/index.cjs.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/renderMenuSplitGroup.cjs +2 -2
- package/lib-commonjs/components/MenuSplitGroup/renderMenuSplitGroup.cjs.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroup.cjs.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupContextValues.cjs.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.cjs +4 -4
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.css.cjs +32 -0
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.cjs +4 -4
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.css.cjs +32 -0
- package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.css.cjs.map +1 -0
- package/lib-commonjs/components/MenuTrigger/MenuTrigger.cjs.map +1 -1
- package/lib-commonjs/components/MenuTrigger/MenuTrigger.types.cjs.map +1 -1
- package/lib-commonjs/components/MenuTrigger/index.cjs +5 -5
- package/lib-commonjs/components/MenuTrigger/index.cjs.map +1 -1
- package/lib-commonjs/components/MenuTrigger/renderMenuTrigger.cjs.map +1 -1
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.cjs +5 -5
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.cjs.map +1 -1
- package/lib-commonjs/components/index.cjs +12 -12
- package/lib-commonjs/components/index.cjs.map +1 -1
- package/lib-commonjs/contexts/menuContext.cjs +4 -4
- package/lib-commonjs/contexts/menuContext.cjs.map +1 -1
- package/lib-commonjs/contexts/menuGroupContext.cjs +3 -3
- package/lib-commonjs/contexts/menuGroupContext.cjs.map +1 -1
- package/lib-commonjs/contexts/menuListContext.cjs +4 -4
- package/lib-commonjs/contexts/menuListContext.cjs.map +1 -1
- package/lib-commonjs/contexts/menuSplitGroupContext.cjs +5 -5
- package/lib-commonjs/contexts/menuSplitGroupContext.cjs.map +1 -1
- package/lib-commonjs/contexts/menuTriggerContext.cjs +3 -3
- package/lib-commonjs/contexts/menuTriggerContext.cjs.map +1 -1
- package/lib-commonjs/index.cjs +86 -86
- package/lib-commonjs/index.cjs.map +1 -1
- package/lib-commonjs/selectable/Checkmark.module.css +12 -0
- package/lib-commonjs/selectable/index.cjs.map +1 -1
- package/lib-commonjs/selectable/types.cjs.map +1 -1
- package/lib-commonjs/selectable/useCheckmarkStyles.styles.css.cjs +18 -0
- package/lib-commonjs/selectable/useCheckmarkStyles.styles.css.cjs.map +1 -0
- package/lib-commonjs/selectable/useCheckmarkStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/selectable/useCheckmarkStyles.styles.raw.css.cjs +18 -0
- package/lib-commonjs/selectable/useCheckmarkStyles.styles.raw.css.cjs.map +1 -0
- package/lib-commonjs/utils/index.cjs +8 -8
- package/lib-commonjs/utils/index.cjs.map +1 -1
- package/lib-commonjs/utils/useIsSubmenu.cjs.map +1 -1
- package/lib-commonjs/utils/useOnMenuEnter.cjs +5 -5
- package/lib-commonjs/utils/useOnMenuEnter.cjs.map +1 -1
- package/lib-commonjs/utils/useOnMenuSafeZoneTimeout.cjs +3 -3
- package/lib-commonjs/utils/useOnMenuSafeZoneTimeout.cjs.map +1 -1
- package/lib-commonjs/utils/useValidateNesting.cjs +4 -4
- package/lib-commonjs/utils/useValidateNesting.cjs.map +1 -1
- package/package.json +20 -20
- package/dist/metadata/api/api-root.json +0 -1
- package/dist/metadata/index.json +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroupStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\nexport const menuGroupClassNames: SlotClassNames<MenuGroupSlots> = {\n root: 'fui-MenuGroup',\n};\n\nexport const useMenuGroupStyles_unstable = (state: MenuGroupState): MenuGroupState => {\n state.root.className = clsx(menuGroupClassNames.root, state.root.className);\n\n return state;\n};\n"],"names":["clsx","menuGroupClassNames","root","useMenuGroupStyles_unstable","state","className"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,8BAA8B,CAACC;IAC1CA,MAAMF,IAAI,CAACG,SAAS,GAAGL,KAAKC,oBAAoBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAE1E,OAAOD;AACT,EAAE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroupStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\nexport const menuGroupClassNames: SlotClassNames<MenuGroupSlots> = {\n root: 'fui-MenuGroup',\n};\n\nexport const useMenuGroupStyles_unstable = (state: MenuGroupState): MenuGroupState => {\n state.root.className = clsx(menuGroupClassNames.root, state.root.className);\n\n return state;\n};\n"],"names":["clsx","menuGroupClassNames","root","useMenuGroupStyles_unstable","state","className"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,8BAA8B,CAACC;IAC1CA,MAAMF,IAAI,CAACG,SAAS,GAAGL,KAAKC,oBAAoBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAE1E,OAAOD;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuGroup/useMenuGroupStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\n\nexport const menuGroupClassNames: SlotClassNames<MenuGroupSlots> = {\n root: 'fui-MenuGroup',\n};\n\nexport const useMenuGroupStyles_unstable = (state: MenuGroupState): MenuGroupState => {\n state.root.className = mergeClasses(menuGroupClassNames.root, state.root.className);\n\n return state;\n};\n"],"names":["mergeClasses","menuGroupClassNames","root","useMenuGroupStyles_unstable","state","className"],"mappings":"AACA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,8BAA8B,CAACC;IAC1CA,MAAMF,IAAI,CAACG,SAAS,GAAGL,aAAaC,oBAAoBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAElF,OAAOD;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuGroupHeader/MenuGroupHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGroupHeader_unstable } from './useMenuGroupHeader';\nimport { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles.styles';\nimport { renderMenuGroupHeader_unstable } from './renderMenuGroupHeader';\nimport type { MenuGroupHeaderProps } from './MenuGroupHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook.\n */\nexport const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps> = React.forwardRef((props, ref) => {\n const state = useMenuGroupHeader_unstable(props, ref);\n\n useMenuGroupHeaderStyles_unstable(state);\n\n useCustomStyleHook_unstable('useMenuGroupHeaderStyles_unstable')(state);\n\n return renderMenuGroupHeader_unstable(state);\n});\n\nMenuGroupHeader.displayName = 'MenuGroupHeader';\n"],"names":["React","useMenuGroupHeader_unstable","useMenuGroupHeaderStyles_unstable","renderMenuGroupHeader_unstable","useCustomStyleHook_unstable","MenuGroupHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,0BAAuB;AACnE,SAASC,iCAAiC,QAAQ,uCAAoC;AACtF,SAASC,8BAA8B,QAAQ,6BAA0B;AAGzE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQR,4BAA4BM,OAAOC;IAEjDN,kCAAkCO;IAElCL,4BAA4B,qCAAqCK;IAEjE,OAAON,+BAA+BM;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
@layer fluentui {
|
|
2
|
+
.root {
|
|
3
|
+
font-size: var(--fontSizeBase200);
|
|
4
|
+
color: var(--colorNeutralForeground3);
|
|
5
|
+
padding-inline-start: var(--spacingHorizontalS);
|
|
6
|
+
padding-inline-end: var(--spacingHorizontalS);
|
|
7
|
+
font-weight: var(--fontWeightSemibold);
|
|
8
|
+
height: var(--spacingHorizontalXXXL);
|
|
9
|
+
display: flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuGroupHeader/MenuGroupHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuGroupHeaderSlots = {\n root: Slot<'div'>;\n};\n\nexport type MenuGroupHeaderProps = ComponentProps<MenuGroupHeaderSlots>;\n\nexport type MenuGroupHeaderState = ComponentState<MenuGroupHeaderSlots>;\n"],"names":[],"mappings":"AAQA,WAAwE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuGroupHeader/index.ts"],"sourcesContent":["export type { MenuGroupHeaderProps, MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nexport { MenuGroupHeader } from './MenuGroupHeader';\nexport { renderMenuGroupHeader_unstable } from './renderMenuGroupHeader';\nexport { useMenuGroupHeader_unstable } from './useMenuGroupHeader';\nexport { menuGroupHeaderClassNames, useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles.styles';\n"],"names":["MenuGroupHeader","renderMenuGroupHeader_unstable","useMenuGroupHeader_unstable","menuGroupHeaderClassNames","useMenuGroupHeaderStyles_unstable"],"mappings":"AACA,SAASA,eAAe,QAAQ,uBAAoB;AACpD,SAASC,8BAA8B,QAAQ,6BAA0B;AACzE,SAASC,2BAA2B,QAAQ,0BAAuB;AACnE,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,uCAAoC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import { assertSlots } from "@fluentui/react-utilities";
|
|
1
|
+
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
|
+
import { assertSlots } from "@fluentui/react-utilities";
|
|
3
3
|
/**
|
|
4
4
|
* Redefine the render function to add slots. Reuse the menugroupheader structure but add
|
|
5
5
|
* slots to children.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuGroupHeader/renderMenuGroupHeader.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 { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menugroupheader structure but add\n * slots to children.\n */\nexport const renderMenuGroupHeader_unstable = (state: MenuGroupHeaderState): JSXElement => {\n assertSlots<MenuGroupHeaderSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderMenuGroupHeader_unstable","state","root"],"mappings":";AAAA,0BAA0B,GAC1B,iDAAiD,GACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;;CAGC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuGroupHeader/useMenuGroupHeader.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuGroupHeaderProps, MenuGroupHeaderState } from './MenuGroupHeader.types';\n\n/**\n * Given user props, returns state and render function for a MenuGroupHeader.\n */\nexport function useMenuGroupHeader_unstable(\n props: MenuGroupHeaderProps,\n ref: React.Ref<HTMLElement>,\n): MenuGroupHeaderState {\n const { headerId: id } = useMenuGroupContext_unstable();\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n id,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n}\n"],"names":["useMenuGroupContext_unstable","getIntrinsicElementProps","slot","useMenuGroupHeader_unstable","props","ref","headerId","id","components","root","always","elementType"],"mappings":"AAAA;AAGA,SAASA,4BAA4B,QAAQ,qCAAkC;AAC/E,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;CAEC,GACD,OAAO,SAASC,4BACdC,KAA2B,EAC3BC,GAA2B;IAE3B,MAAM,EAAEC,UAAUC,EAAE,EAAE,GAAGP;IAEzB,OAAO;QACLQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACLE;YACA,GAAGH,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { clsx } from "clsx";
|
|
2
|
+
import styles from "./MenuGroupHeader.module.css";
|
|
3
|
+
export const menuGroupHeaderClassNames = {
|
|
4
|
+
root: 'fui-MenuGroupHeader'
|
|
5
|
+
};
|
|
6
|
+
export const useMenuGroupHeaderStyles_unstable = (state)=>{
|
|
7
|
+
state.root.className = clsx(menuGroupHeaderClassNames.root, styles.root, state.root.className);
|
|
8
|
+
return state;
|
|
9
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport styles from './MenuGroupHeader.module.css';\n\nexport const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {\n root: 'fui-MenuGroupHeader',\n};\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState): MenuGroupHeaderState => {\n state.root.className = clsx(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["clsx","styles","menuGroupHeaderClassNames","root","useMenuGroupHeaderStyles_unstable","state","className"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,+BAA+B;AAElD,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,oCAAoC,CAACC;IAChDA,MAAMF,IAAI,CAACG,SAAS,GAAGN,KAAKE,0BAA0BC,IAAI,EAAEF,OAAOE,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAE7F,OAAOD;AACT,EAAE"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { clsx } from "clsx";
|
|
2
|
+
import styles from "./MenuGroupHeader.module.css";
|
|
3
|
+
export const menuGroupHeaderClassNames = {
|
|
4
|
+
root: 'fui-MenuGroupHeader'
|
|
5
|
+
};
|
|
6
|
+
export const useMenuGroupHeaderStyles_unstable = (state)=>{
|
|
7
|
+
state.root.className = clsx(menuGroupHeaderClassNames.root, styles.root, state.root.className);
|
|
8
|
+
return state;
|
|
9
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport styles from './MenuGroupHeader.module.css';\n\nexport const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {\n root: 'fui-MenuGroupHeader',\n};\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState): MenuGroupHeaderState => {\n state.root.className = clsx(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["clsx","styles","menuGroupHeaderClassNames","root","useMenuGroupHeaderStyles_unstable","state","className"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,+BAA+B;AAElD,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,oCAAoC,CAACC;IAChDA,MAAMF,IAAI,CAACG,SAAS,GAAGN,KAAKE,0BAA0BC,IAAI,EAAEF,OAAOE,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAE7F,OAAOD;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {\n root: 'fui-MenuGroupHeader',\n};\n\nconst useStyles = makeStyles({\n root: {\n fontSize: tokens.fontSizeBase200,\n color: tokens.colorNeutralForeground3,\n paddingLeft: '8px',\n paddingRight: '8px',\n fontWeight: tokens.fontWeightSemibold,\n height: '32px',\n display: 'flex',\n alignItems: 'center',\n },\n});\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState): MenuGroupHeaderState => {\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","menuGroupHeaderClassNames","root","useStyles","fontSize","fontSizeBase200","color","colorNeutralForeground3","paddingLeft","paddingRight","fontWeight","fontWeightSemibold","height","display","alignItems","useMenuGroupHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,UAAUJ,OAAOK,eAAe;QAChCC,OAAON,OAAOO,uBAAuB;QACrCC,aAAa;QACbC,cAAc;QACdC,YAAYV,OAAOW,kBAAkB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAY;IACd;AACF;AAEA,OAAO,MAAMC,oCAAoC,CAACC;IAChD,MAAMC,SAASd;IACf,oDAAoD;IACpDa,MAAMd,IAAI,CAACgB,SAAS,GAAGpB,aAAaG,0BAA0BC,IAAI,EAAEe,OAAOf,IAAI,EAAEc,MAAMd,IAAI,CAACgB,SAAS;IAErG,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuItem_unstable } from './useMenuItem';\nimport { renderMenuItem_unstable } from './renderMenuItem';\nimport { useMenuItemStyles_unstable } from './useMenuItemStyles.styles';\nimport type { MenuItemProps } from './MenuItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.\n */\nexport const MenuItem: ForwardRefComponent<MenuItemProps> = React.forwardRef((props, ref) => {\n const state = useMenuItem_unstable(props, ref);\n\n useMenuItemStyles_unstable(state);\n\n useCustomStyleHook_unstable('useMenuItemStyles_unstable')(state);\n\n return renderMenuItem_unstable(state);\n});\n\nMenuItem.displayName = 'MenuItem';\n"],"names":["React","useMenuItem_unstable","renderMenuItem_unstable","useMenuItemStyles_unstable","useCustomStyleHook_unstable","MenuItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,mBAAgB;AACrD,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,gCAA6B;AAGxE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOP,wBAAwBO;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}
|
|
@@ -0,0 +1,335 @@
|
|
|
1
|
+
@import url('@fluentui/react-icons/headless/styles.css') layer(fluentui);
|
|
2
|
+
|
|
3
|
+
@layer fluentui {
|
|
4
|
+
.root {
|
|
5
|
+
border-radius: var(--borderRadiusMedium);
|
|
6
|
+
position: relative;
|
|
7
|
+
color: var(--colorNeutralForeground2);
|
|
8
|
+
background-color: var(--colorNeutralBackground1);
|
|
9
|
+
padding-inline-end: var(--spacingVerticalSNudge);
|
|
10
|
+
padding-inline-start: var(--spacingVerticalSNudge);
|
|
11
|
+
padding-top: var(--spacingVerticalSNudge);
|
|
12
|
+
padding-bottom: var(--spacingVerticalSNudge);
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
max-width: calc(9 * var(--spacingHorizontalXXXL) + var(--spacingHorizontalXXS));
|
|
15
|
+
min-height: var(--spacingHorizontalXXXL);
|
|
16
|
+
flex-shrink: 0;
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: start;
|
|
19
|
+
font-size: var(--fontSizeBase300);
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
gap: var(--spacingHorizontalXS);
|
|
22
|
+
&:hover {
|
|
23
|
+
background-color: var(--colorNeutralBackground1Hover);
|
|
24
|
+
color: var(--colorNeutralForeground2Hover);
|
|
25
|
+
& :global(.fui-Icon-filled) {
|
|
26
|
+
display: inline;
|
|
27
|
+
}
|
|
28
|
+
& :global(.fui-Icon-regular) {
|
|
29
|
+
display: none;
|
|
30
|
+
}
|
|
31
|
+
& :global(.fui-MenuItem__icon) {
|
|
32
|
+
color: var(--colorNeutralForeground2BrandSelected);
|
|
33
|
+
}
|
|
34
|
+
& :global(.fui-MenuItem__subText) {
|
|
35
|
+
color: var(--colorNeutralForeground3Hover);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
&:hover:active {
|
|
39
|
+
background-color: var(--colorNeutralBackground1Pressed);
|
|
40
|
+
color: var(--colorNeutralForeground2Pressed);
|
|
41
|
+
& :global(.fui-MenuItem__subText) {
|
|
42
|
+
color: var(--colorNeutralForeground3Pressed);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
user-select: none;
|
|
46
|
+
&:focus {
|
|
47
|
+
outline-style: none;
|
|
48
|
+
}
|
|
49
|
+
&:focus-visible {
|
|
50
|
+
outline-style: none;
|
|
51
|
+
}
|
|
52
|
+
&[data-fui-focus-visible] {
|
|
53
|
+
border-top-color: var(--colorTransparentBackground);
|
|
54
|
+
border-right-color: var(--colorTransparentBackground);
|
|
55
|
+
border-bottom-color: var(--colorTransparentBackground);
|
|
56
|
+
border-left-color: var(--colorTransparentBackground);
|
|
57
|
+
&::after {
|
|
58
|
+
content: '';
|
|
59
|
+
position: absolute;
|
|
60
|
+
pointer-events: none;
|
|
61
|
+
z-index: 1;
|
|
62
|
+
border: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
|
|
63
|
+
border-radius: var(--borderRadiusMedium);
|
|
64
|
+
top: calc(-1 * var(--strokeWidthThick));
|
|
65
|
+
right: calc(-1 * var(--strokeWidthThick));
|
|
66
|
+
bottom: calc(-1 * var(--strokeWidthThick));
|
|
67
|
+
left: calc(-1 * var(--strokeWidthThick));
|
|
68
|
+
}
|
|
69
|
+
@media (forced-colors: active) {
|
|
70
|
+
&::after {
|
|
71
|
+
border-top-color: Highlight;
|
|
72
|
+
border-right-color: Highlight;
|
|
73
|
+
border-bottom-color: Highlight;
|
|
74
|
+
border-left-color: Highlight;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
@media (forced-colors: active) {
|
|
79
|
+
&:hover {
|
|
80
|
+
forced-color-adjust: none;
|
|
81
|
+
background-color: Highlight;
|
|
82
|
+
color: HighlightText;
|
|
83
|
+
& :global(.fui-MenuItem__icon),
|
|
84
|
+
& :global(.fui-MenuItem__checkmark),
|
|
85
|
+
& :global(.fui-MenuItem__subText),
|
|
86
|
+
& :global(.fui-MenuItem__secondaryContent) {
|
|
87
|
+
color: HighlightText;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
&:focus {
|
|
91
|
+
outline-style: none;
|
|
92
|
+
}
|
|
93
|
+
&:focus-visible {
|
|
94
|
+
outline-style: none;
|
|
95
|
+
}
|
|
96
|
+
&[data-fui-focus-visible] {
|
|
97
|
+
border-top-color: var(--colorTransparentBackground);
|
|
98
|
+
border-right-color: var(--colorTransparentBackground);
|
|
99
|
+
border-bottom-color: var(--colorTransparentBackground);
|
|
100
|
+
border-left-color: var(--colorTransparentBackground);
|
|
101
|
+
&::after {
|
|
102
|
+
content: '';
|
|
103
|
+
position: absolute;
|
|
104
|
+
pointer-events: none;
|
|
105
|
+
z-index: 1;
|
|
106
|
+
border: var(--strokeWidthThick) solid Highlight;
|
|
107
|
+
border-radius: var(--borderRadiusMedium);
|
|
108
|
+
top: calc(-1 * var(--strokeWidthThick));
|
|
109
|
+
right: calc(-1 * var(--strokeWidthThick));
|
|
110
|
+
bottom: calc(-1 * var(--strokeWidthThick));
|
|
111
|
+
left: calc(-1 * var(--strokeWidthThick));
|
|
112
|
+
}
|
|
113
|
+
@media (forced-colors: active) {
|
|
114
|
+
&::after {
|
|
115
|
+
border-top-color: Highlight;
|
|
116
|
+
border-right-color: Highlight;
|
|
117
|
+
border-bottom-color: Highlight;
|
|
118
|
+
border-left-color: Highlight;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
.content {
|
|
125
|
+
padding-inline-start: var(--spacingHorizontalXXS);
|
|
126
|
+
padding-inline-end: var(--spacingHorizontalXXS);
|
|
127
|
+
background-color: var(--colorTransparentBackground);
|
|
128
|
+
flex-grow: 1;
|
|
129
|
+
}
|
|
130
|
+
.secondaryContent {
|
|
131
|
+
padding-inline-start: var(--spacingHorizontalXXS);
|
|
132
|
+
padding-inline-end: var(--spacingHorizontalXXS);
|
|
133
|
+
font-family: var(--fontFamilyBase);
|
|
134
|
+
font-size: var(--fontSizeBase200);
|
|
135
|
+
font-weight: var(--fontWeightRegular);
|
|
136
|
+
line-height: var(--lineHeightBase300);
|
|
137
|
+
color: var(--colorNeutralForeground3);
|
|
138
|
+
&:hover {
|
|
139
|
+
color: var(--colorNeutralForeground3Hover);
|
|
140
|
+
}
|
|
141
|
+
&:focus {
|
|
142
|
+
color: var(--colorNeutralForeground3Hover);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
.icon {
|
|
146
|
+
width: var(--spacingHorizontalXL);
|
|
147
|
+
height: var(--spacingHorizontalXL);
|
|
148
|
+
font-size: var(--fontSizeBase500);
|
|
149
|
+
line-height: 0;
|
|
150
|
+
align-items: center;
|
|
151
|
+
display: inline-flex;
|
|
152
|
+
justify-content: center;
|
|
153
|
+
flex-shrink: 0;
|
|
154
|
+
}
|
|
155
|
+
.submenuIndicator {
|
|
156
|
+
width: var(--spacingHorizontalXL);
|
|
157
|
+
height: var(--spacingHorizontalXL);
|
|
158
|
+
font-size: var(--fontSizeBase500);
|
|
159
|
+
line-height: 0;
|
|
160
|
+
align-items: center;
|
|
161
|
+
display: inline-flex;
|
|
162
|
+
justify-content: center;
|
|
163
|
+
}
|
|
164
|
+
.subText {
|
|
165
|
+
font-family: var(--fontFamilyBase);
|
|
166
|
+
font-size: var(--fontSizeBase100);
|
|
167
|
+
font-weight: var(--fontWeightRegular);
|
|
168
|
+
line-height: var(--lineHeightBase100);
|
|
169
|
+
color: var(--colorNeutralForeground3);
|
|
170
|
+
}
|
|
171
|
+
.checkmark {
|
|
172
|
+
margin-top: var(--spacingHorizontalXXS);
|
|
173
|
+
}
|
|
174
|
+
.submenuOpen {
|
|
175
|
+
background-color: var(--colorNeutralBackground1Hover);
|
|
176
|
+
color: var(--colorNeutralForeground2Hover);
|
|
177
|
+
& :global(.fui-Icon-filled) {
|
|
178
|
+
display: inline;
|
|
179
|
+
}
|
|
180
|
+
& :global(.fui-Icon-regular) {
|
|
181
|
+
display: none;
|
|
182
|
+
}
|
|
183
|
+
& :global(.fui-MenuItem__icon) {
|
|
184
|
+
color: var(--colorNeutralForeground2BrandSelected);
|
|
185
|
+
}
|
|
186
|
+
& :global(.fui-MenuItem__subText) {
|
|
187
|
+
color: var(--colorNeutralForeground3Hover);
|
|
188
|
+
}
|
|
189
|
+
@media (forced-colors: active) {
|
|
190
|
+
forced-color-adjust: none;
|
|
191
|
+
background-color: Highlight;
|
|
192
|
+
color: HighlightText;
|
|
193
|
+
& :global(.fui-MenuItem__icon),
|
|
194
|
+
& :global(.fui-MenuItem__checkmark),
|
|
195
|
+
& :global(.fui-MenuItem__subText),
|
|
196
|
+
& :global(.fui-MenuItem__secondaryContent) {
|
|
197
|
+
color: HighlightText;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
.disabled {
|
|
202
|
+
color: var(--colorNeutralForegroundDisabled);
|
|
203
|
+
&:hover {
|
|
204
|
+
color: var(--colorNeutralForegroundDisabled);
|
|
205
|
+
background-color: var(--colorNeutralBackground1);
|
|
206
|
+
cursor: not-allowed;
|
|
207
|
+
& :global(.fui-Icon-filled) {
|
|
208
|
+
display: none;
|
|
209
|
+
}
|
|
210
|
+
& :global(.fui-Icon-regular) {
|
|
211
|
+
display: inline;
|
|
212
|
+
}
|
|
213
|
+
& :global(.fui-MenuItem__icon) {
|
|
214
|
+
color: var(--colorNeutralForegroundDisabled);
|
|
215
|
+
}
|
|
216
|
+
& :global(.fui-MenuItem__subText) {
|
|
217
|
+
color: var(--colorNeutralForegroundDisabled);
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
&:hover:active {
|
|
221
|
+
color: var(--colorNeutralForegroundDisabled);
|
|
222
|
+
background-color: var(--colorNeutralBackground1);
|
|
223
|
+
& :global(.fui-MenuItem__subText) {
|
|
224
|
+
color: var(--colorNeutralForegroundDisabled);
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
&:focus {
|
|
228
|
+
color: var(--colorNeutralForegroundDisabled);
|
|
229
|
+
}
|
|
230
|
+
@media (forced-colors: active) {
|
|
231
|
+
color: GrayText;
|
|
232
|
+
&:hover {
|
|
233
|
+
forced-color-adjust: auto;
|
|
234
|
+
color: GrayText;
|
|
235
|
+
background-color: Canvas;
|
|
236
|
+
& :global(.fui-MenuItem__icon) {
|
|
237
|
+
color: GrayText;
|
|
238
|
+
background-color: Canvas;
|
|
239
|
+
}
|
|
240
|
+
& :global(.fui-MenuItem__icon),
|
|
241
|
+
& :global(.fui-MenuItem__checkmark),
|
|
242
|
+
& :global(.fui-MenuItem__subText),
|
|
243
|
+
& :global(.fui-MenuItem__secondaryContent) {
|
|
244
|
+
color: GrayText;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
&:hover:active {
|
|
248
|
+
color: GrayText;
|
|
249
|
+
background-color: Canvas;
|
|
250
|
+
& :global(.fui-MenuItem__subText) {
|
|
251
|
+
color: GrayText;
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
&:focus {
|
|
255
|
+
color: GrayText;
|
|
256
|
+
background-color: Canvas;
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
:where(.disabled) > :where(.content) > .subText {
|
|
261
|
+
color: var(--colorNeutralForegroundDisabled);
|
|
262
|
+
@media (forced-colors: active) {
|
|
263
|
+
color: GrayText;
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
:where(.multiline) > .content {
|
|
267
|
+
display: flex;
|
|
268
|
+
flex-direction: column;
|
|
269
|
+
}
|
|
270
|
+
:where(.multiline) > .secondaryContent {
|
|
271
|
+
align-self: center;
|
|
272
|
+
}
|
|
273
|
+
:where(.multiline) > .submenuIndicator {
|
|
274
|
+
align-self: center;
|
|
275
|
+
}
|
|
276
|
+
:where(.disabled) > .secondaryContent {
|
|
277
|
+
color: var(--colorNeutralForegroundDisabled);
|
|
278
|
+
&:hover {
|
|
279
|
+
color: var(--colorNeutralForegroundDisabled);
|
|
280
|
+
background-color: var(--colorNeutralBackground1);
|
|
281
|
+
cursor: not-allowed;
|
|
282
|
+
& :global(.fui-Icon-filled) {
|
|
283
|
+
display: none;
|
|
284
|
+
}
|
|
285
|
+
& :global(.fui-Icon-regular) {
|
|
286
|
+
display: inline;
|
|
287
|
+
}
|
|
288
|
+
& :global(.fui-MenuItem__icon) {
|
|
289
|
+
color: var(--colorNeutralForegroundDisabled);
|
|
290
|
+
}
|
|
291
|
+
& :global(.fui-MenuItem__subText) {
|
|
292
|
+
color: var(--colorNeutralForegroundDisabled);
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
&:hover:active {
|
|
296
|
+
color: var(--colorNeutralForegroundDisabled);
|
|
297
|
+
background-color: var(--colorNeutralBackground1);
|
|
298
|
+
& :global(.fui-MenuItem__subText) {
|
|
299
|
+
color: var(--colorNeutralForegroundDisabled);
|
|
300
|
+
}
|
|
301
|
+
}
|
|
302
|
+
&:focus {
|
|
303
|
+
color: var(--colorNeutralForegroundDisabled);
|
|
304
|
+
}
|
|
305
|
+
@media (forced-colors: active) {
|
|
306
|
+
color: GrayText;
|
|
307
|
+
&:hover {
|
|
308
|
+
forced-color-adjust: auto;
|
|
309
|
+
color: GrayText;
|
|
310
|
+
background-color: Canvas;
|
|
311
|
+
& :global(.fui-MenuItem__icon) {
|
|
312
|
+
color: GrayText;
|
|
313
|
+
background-color: Canvas;
|
|
314
|
+
}
|
|
315
|
+
& :global(.fui-MenuItem__icon),
|
|
316
|
+
& :global(.fui-MenuItem__checkmark),
|
|
317
|
+
& :global(.fui-MenuItem__subText),
|
|
318
|
+
& :global(.fui-MenuItem__secondaryContent) {
|
|
319
|
+
color: GrayText;
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
&:hover:active {
|
|
323
|
+
color: GrayText;
|
|
324
|
+
background-color: Canvas;
|
|
325
|
+
& :global(.fui-MenuItem__subText) {
|
|
326
|
+
color: GrayText;
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
&:focus {
|
|
330
|
+
color: GrayText;
|
|
331
|
+
background-color: Canvas;
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuItem/MenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuItemSlots = {\n root: Slot<'div'>;\n\n /**\n * Icon slot rendered before children content\n */\n icon?: Slot<'span'>;\n\n /**\n * A helper slot for alignment when a menu item is used with selectable menuitems\n * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n */\n checkmark?: Slot<'span'>;\n\n /**\n * Icon slot that shows the indicator for a submenu\n */\n submenuIndicator?: Slot<'span'>;\n\n /**\n * Component children are placed in this slot\n * Avoid using the `children` property in this slot in favour of Component children whenever possible\n */\n content?: Slot<'span'>;\n\n /**\n * Secondary content rendered opposite the primary content (e.g Shortcut text)\n */\n secondaryContent?: Slot<'span'>;\n\n /**\n * Additional descriptor to main content that creates a multiline layout\n */\n subText?: Slot<'span'>;\n};\n\nexport type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> &\n Pick<Partial<MenuItemSlots>, 'content'> & {\n /**\n * If the menu item is a trigger for a submenu\n *\n * @default false\n */\n hasSubmenu?: boolean;\n\n /**\n * Clicking on the menu item will not dismiss an open menu\n *\n * @default false\n */\n persistOnClick?: boolean;\n\n disabled?: boolean;\n /**\n * @deprecated this property does nothing.\n * disabled focusable is by default by simply using `disabled` property\n */\n disabledFocusable?: boolean;\n };\n\nexport type MenuItemState = ComponentState<MenuItemSlots> &\n Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>> & {\n submenuOpen: boolean;\n };\n"],"names":[],"mappings":"AA8DA,WAGI"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuItem/index.ts"],"sourcesContent":["export { MenuItem } from './MenuItem';\nexport type { MenuItemProps, MenuItemSlots, MenuItemState } from './MenuItem.types';\nexport { renderMenuItem_unstable } from './renderMenuItem';\nexport { useMenuItem_unstable } from './useMenuItem';\nexport { useMenuItemBase_unstable } from './useMenuItemBase';\nexport { menuItemClassNames, useMenuItemStyles_unstable } from './useMenuItemStyles.styles';\n"],"names":["MenuItem","renderMenuItem_unstable","useMenuItem_unstable","useMenuItemBase_unstable","menuItemClassNames","useMenuItemStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,gBAAa;AAEtC,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,mBAAgB;AACrD,SAASC,wBAAwB,QAAQ,uBAAoB;AAC7D,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,gCAA6B"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import { assertSlots } from "@fluentui/react-utilities";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
|
+
import { assertSlots } from "@fluentui/react-utilities";
|
|
3
3
|
/**
|
|
4
4
|
* Function that renders the final JSX of the component
|
|
5
5
|
*/ export const renderMenuItem_unstable = (state)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuItem/renderMenuItem.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 { MenuItemSlots, MenuItemState } from './MenuItem.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuItem_unstable = (state: MenuItemState): JSXElement => {\n assertSlots<MenuItemSlots>(state);\n\n return (\n <state.root>\n {state.checkmark && <state.checkmark />}\n {state.icon && <state.icon />}\n {state.content && (\n <state.content>\n {state.content.children}\n {state.subText && <state.subText />}\n </state.content>\n )}\n {state.secondaryContent && <state.secondaryContent />}\n {state.submenuIndicator && <state.submenuIndicator />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderMenuItem_unstable","state","root","checkmark","icon","content","children","subText","secondaryContent","submenuIndicator"],"mappings":";AAAA,0BAA0B,GAC1B,iDAAiD,GACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,OAAO,kBACZ,MAACJ,MAAMI,OAAO;;oBACXJ,MAAMI,OAAO,CAACC,QAAQ;oBACtBL,MAAMM,OAAO,kBAAI,KAACN,MAAMM,OAAO;;;YAGnCN,MAAMO,gBAAgB,kBAAI,KAACP,MAAMO,gBAAgB;YACjDP,MAAMQ,gBAAgB,kBAAI,KAACR,MAAMQ,gBAAgB;;;AAGxD,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuItem/useCharacterSearch.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport type { MenuItemState } from '../../components/index';\nimport type { ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\nexport const useCharacterSearch = (state: MenuItemState, ref: React.RefObject<HTMLElement | null>): MenuItemState => {\n const setFocusByFirstCharacter = useMenuListContext_unstable(context => context.setFocusByFirstCharacter);\n\n const { onKeyDown: originalOnKeyDown } = state.root;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.onKeyDown = (e: React.KeyboardEvent<ARIAButtonElementIntersection>) => {\n originalOnKeyDown?.(e);\n\n if (e.key?.length > 1) {\n return;\n }\n\n if (ref.current) {\n setFocusByFirstCharacter?.(e, ref.current);\n }\n };\n\n return state;\n};\n"],"names":["useMenuListContext_unstable","useCharacterSearch","state","ref","setFocusByFirstCharacter","context","onKeyDown","originalOnKeyDown","root","e","key","length","current"],"mappings":"AAAA;AAGA,SAASA,2BAA2B,QAAQ,oCAAiC;AAI7E,OAAO,MAAMC,qBAAqB,CAACC,OAAsBC;IACvD,MAAMC,2BAA2BJ,4BAA4BK,CAAAA,UAAWA,QAAQD,wBAAwB;IAExG,MAAM,EAAEE,WAAWC,iBAAiB,EAAE,GAAGL,MAAMM,IAAI;IAEnD,oDAAoD;IACpDN,MAAMM,IAAI,CAACF,SAAS,GAAG,CAACG;YAGlBA;QAFJF,8BAAAA,wCAAAA,kBAAoBE;QAEpB,IAAIA,EAAAA,SAAAA,EAAEC,GAAG,cAALD,6BAAAA,OAAOE,MAAM,IAAG,GAAG;YACrB;QACF;QAEA,IAAIR,IAAIS,OAAO,EAAE;YACfR,qCAAAA,+CAAAA,yBAA2BK,GAAGN,IAAIS,OAAO;QAC3C;IACF;IAEA,OAAOV;AACT,EAAE"}
|
|
@@ -12,8 +12,7 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
|
|
|
12
12
|
const state = useMenuItemBase_unstable(props, ref);
|
|
13
13
|
// Set default chevron icon
|
|
14
14
|
if (state.submenuIndicator) {
|
|
15
|
-
var _state_submenuIndicator;
|
|
16
|
-
var _children;
|
|
15
|
+
var _state_submenuIndicator, _children;
|
|
17
16
|
(_children = (_state_submenuIndicator = state.submenuIndicator).children) !== null && _children !== void 0 ? _children : _state_submenuIndicator.children = dir === 'rtl' ? /*#__PURE__*/ React.createElement(ChevronLeftIcon, null) : /*#__PURE__*/ React.createElement(ChevronRightIcon, null);
|
|
18
17
|
}
|
|
19
18
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n ChevronRightFilled,\n ChevronRightRegular,\n ChevronLeftFilled,\n ChevronLeftRegular,\n bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuItemBase_unstable } from './useMenuItemBase';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport type { ARIAButtonElement } from '@fluentui/react-aria';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n const { dir } = useFluent();\n const state = useMenuItemBase_unstable(props, ref);\n\n // Set default chevron icon\n if (state.submenuIndicator) {\n state.submenuIndicator.children ??= dir === 'rtl' ? <ChevronLeftIcon /> : <ChevronRightIcon />;\n }\n\n return state;\n};\n"],"names":["React","useFluent_unstable","useFluent","ChevronRightFilled","ChevronRightRegular","ChevronLeftFilled","ChevronLeftRegular","bundleIcon","useMenuItemBase_unstable","ChevronRightIcon","ChevronLeftIcon","useMenuItem_unstable","props","ref","dir","state","submenuIndicator","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SACEC,kBAAkB,EAClBC,mBAAmB,EACnBC,iBAAiB,EACjBC,kBAAkB,EAClBC,UAAU,QACL,wBAAwB;AAC/B,SAASC,wBAAwB,QAAQ,uBAAoB;AAI7D,MAAMC,mBAAmBF,WAAWJ,oBAAoBC;AACxD,MAAMM,kBAAkBH,WAAWF,mBAAmBC;AAEtD;;CAEC,GACD,OAAO,MAAMK,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,GAAG,EAAE,GAAGZ;IAChB,MAAMa,QAAQP,yBAAyBI,OAAOC;IAE9C,2BAA2B;IAC3B,IAAIE,MAAMC,gBAAgB,EAAE;YAC1BD,yBAAAA;SAAAA,YAAAA,CAAAA,0BAAAA,MAAMC,gBAAgB,EAACC,QAAQ,cAA/BF,uBAAAA,YAAAA,wBAAuBE,QAAQ,GAAKH,QAAQ,sBAAQ,oBAACJ,uCAAqB,oBAACD;IAC7E;IAEA,OAAOM;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuItem/useMenuItemBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n useEventCallback,\n useMergedRefs,\n getIntrinsicElementProps,\n slot,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection, ARIAButtonProps } from '@fluentui/react-aria';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Base hook for MenuItem component, produces state required to render the component.\n * It doesn't set any design-related props specific to MenuItem such as submenu indicator icon.\n */\nexport const useMenuItemBase_unstable = (\n props: MenuItemProps,\n ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemState => {\n const isSubmenuTrigger = useMenuTriggerContext_unstable();\n const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n const {\n as = 'div',\n disabled = false,\n hasSubmenu = isSubmenuTrigger,\n persistOnClick = persistOnClickContext,\n content: _content, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n ...rest\n } = props;\n const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n const open = useMenuContext_unstable(context => context.open);\n useNotifySplitItemMultiline({ multiline: !!props.subText, hasSubmenu });\n\n const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n const dismissedWithKeyboardRef = React.useRef(false);\n\n const validateNestingRef = useValidateNesting(getValidateNestingComponentName(props.role));\n\n const state: MenuItemState = {\n hasSubmenu,\n submenuOpen: hasSubmenu && open,\n disabled,\n persistOnClick,\n components: {\n root: 'div',\n icon: 'span',\n checkmark: 'span',\n submenuIndicator: 'span',\n content: 'span',\n secondaryContent: 'span',\n subText: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps(\n as,\n useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {\n role: 'menuitem',\n ...rest,\n disabled: false,\n disabledFocusable: disabled,\n ref: useMergedRefs(ref, innerRef, validateNestingRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n onKeyDown: useEventCallback(event => {\n props.onKeyDown?.(event);\n if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n dismissedWithKeyboardRef.current = true;\n }\n }),\n onMouseMove: useEventCallback(event => {\n if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {\n innerRef.current?.focus();\n }\n\n props.onMouseMove?.(event);\n }),\n onClick: useEventCallback(event => {\n if (!hasSubmenu && !persistOnClick) {\n setOpen(event, {\n open: false,\n keyboard: dismissedWithKeyboardRef.current,\n bubble: true,\n type: 'menuItemClick',\n event,\n });\n dismissedWithKeyboardRef.current = false;\n }\n\n props.onClick?.(event);\n }),\n }),\n ),\n { elementType: 'div' },\n ),\n icon: slot.optional(props.icon, { renderByDefault: hasIcons, elementType: 'span' }),\n checkmark: slot.optional(props.checkmark, {\n renderByDefault: hasCheckmarks,\n elementType: 'span',\n }),\n submenuIndicator: slot.optional(props.submenuIndicator, {\n renderByDefault: hasSubmenu,\n elementType: 'span',\n }),\n content: slot.optional(props.content, {\n renderByDefault: !!props.children,\n defaultProps: { children: props.children },\n elementType: 'span',\n }),\n secondaryContent: slot.optional(props.secondaryContent, { elementType: 'span' }),\n subText: slot.optional(props.subText, { elementType: 'span' }),\n };\n useCharacterSearch(state, innerRef);\n return state;\n};\n\n/**\n * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode\n * Notify the parent MenuSplitGroup so that it can handle this case\n */\nconst useNotifySplitItemMultiline = (options: { hasSubmenu: boolean; multiline: boolean }) => {\n const { hasSubmenu, multiline } = options;\n const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n const { setMultiline } = useMenuSplitGroupContext_unstable();\n\n useIsomorphicLayoutEffect(() => {\n if (!isSplitItemTrigger) {\n setMultiline(multiline);\n }\n }, [setMultiline, multiline, isSplitItemTrigger]);\n};\n\nconst useIconAndCheckmarkAlignment = (options: { hasSubmenu: boolean }) => {\n const { hasSubmenu } = options;\n const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n return {\n hasIcons: hasIcons && !isSplitItemTrigger,\n hasCheckmarks: hasCheckmarks && !isSplitItemTrigger,\n };\n};\n\nconst getValidateNestingComponentName = (role?: string) => {\n switch (role) {\n case 'menuitemcheckbox':\n return 'MenuItemCheckbox';\n case 'menuitemradio':\n return 'MenuItemRadio';\n }\n return 'MenuItem';\n};\n"],"names":["React","useEventCallback","useMergedRefs","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","useCharacterSearch","useMenuTriggerContext_unstable","useMenuListContext_unstable","useMenuContext_unstable","useARIAButtonProps","Enter","Space","useIsInMenuSplitGroup","useMenuSplitGroupContext_unstable","useValidateNesting","useMenuItemBase_unstable","props","ref","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","content","_content","rest","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","open","useNotifySplitItemMultiline","multiline","subText","innerRef","useRef","dismissedWithKeyboardRef","validateNestingRef","getValidateNestingComponentName","role","state","submenuOpen","components","root","icon","checkmark","submenuIndicator","secondaryContent","always","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseMove","currentTarget","ownerDocument","activeElement","focus","onClick","keyboard","bubble","type","elementType","optional","renderByDefault","children","defaultProps","options","isSplitItemTrigger","setMultiline"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuItem/useMenuItemBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n useEventCallback,\n useMergedRefs,\n getIntrinsicElementProps,\n slot,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection, ARIAButtonProps } from '@fluentui/react-aria';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Base hook for MenuItem component, produces state required to render the component.\n * It doesn't set any design-related props specific to MenuItem such as submenu indicator icon.\n */\nexport const useMenuItemBase_unstable = (\n props: MenuItemProps,\n ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemState => {\n const isSubmenuTrigger = useMenuTriggerContext_unstable();\n const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n const {\n as = 'div',\n disabled = false,\n hasSubmenu = isSubmenuTrigger,\n persistOnClick = persistOnClickContext,\n content: _content, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n ...rest\n } = props;\n const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n const open = useMenuContext_unstable(context => context.open);\n useNotifySplitItemMultiline({ multiline: !!props.subText, hasSubmenu });\n\n const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n const dismissedWithKeyboardRef = React.useRef(false);\n\n const validateNestingRef = useValidateNesting(getValidateNestingComponentName(props.role));\n\n const state: MenuItemState = {\n hasSubmenu,\n submenuOpen: hasSubmenu && open,\n disabled,\n persistOnClick,\n components: {\n root: 'div',\n icon: 'span',\n checkmark: 'span',\n submenuIndicator: 'span',\n content: 'span',\n secondaryContent: 'span',\n subText: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps(\n as,\n useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {\n role: 'menuitem',\n ...rest,\n disabled: false,\n disabledFocusable: disabled,\n ref: useMergedRefs(ref, innerRef, validateNestingRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n onKeyDown: useEventCallback(event => {\n props.onKeyDown?.(event);\n if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n dismissedWithKeyboardRef.current = true;\n }\n }),\n onMouseMove: useEventCallback(event => {\n if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {\n innerRef.current?.focus();\n }\n\n props.onMouseMove?.(event);\n }),\n onClick: useEventCallback(event => {\n if (!hasSubmenu && !persistOnClick) {\n setOpen(event, {\n open: false,\n keyboard: dismissedWithKeyboardRef.current,\n bubble: true,\n type: 'menuItemClick',\n event,\n });\n dismissedWithKeyboardRef.current = false;\n }\n\n props.onClick?.(event);\n }),\n }),\n ),\n { elementType: 'div' },\n ),\n icon: slot.optional(props.icon, { renderByDefault: hasIcons, elementType: 'span' }),\n checkmark: slot.optional(props.checkmark, {\n renderByDefault: hasCheckmarks,\n elementType: 'span',\n }),\n submenuIndicator: slot.optional(props.submenuIndicator, {\n renderByDefault: hasSubmenu,\n elementType: 'span',\n }),\n content: slot.optional(props.content, {\n renderByDefault: !!props.children,\n defaultProps: { children: props.children },\n elementType: 'span',\n }),\n secondaryContent: slot.optional(props.secondaryContent, { elementType: 'span' }),\n subText: slot.optional(props.subText, { elementType: 'span' }),\n };\n useCharacterSearch(state, innerRef);\n return state;\n};\n\n/**\n * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode\n * Notify the parent MenuSplitGroup so that it can handle this case\n */\nconst useNotifySplitItemMultiline = (options: { hasSubmenu: boolean; multiline: boolean }) => {\n const { hasSubmenu, multiline } = options;\n const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n const { setMultiline } = useMenuSplitGroupContext_unstable();\n\n useIsomorphicLayoutEffect(() => {\n if (!isSplitItemTrigger) {\n setMultiline(multiline);\n }\n }, [setMultiline, multiline, isSplitItemTrigger]);\n};\n\nconst useIconAndCheckmarkAlignment = (options: { hasSubmenu: boolean }) => {\n const { hasSubmenu } = options;\n const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n return {\n hasIcons: hasIcons && !isSplitItemTrigger,\n hasCheckmarks: hasCheckmarks && !isSplitItemTrigger,\n };\n};\n\nconst getValidateNestingComponentName = (role?: string) => {\n switch (role) {\n case 'menuitemcheckbox':\n return 'MenuItemCheckbox';\n case 'menuitemradio':\n return 'MenuItemRadio';\n }\n return 'MenuItem';\n};\n"],"names":["React","useEventCallback","useMergedRefs","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","useCharacterSearch","useMenuTriggerContext_unstable","useMenuListContext_unstable","useMenuContext_unstable","useARIAButtonProps","Enter","Space","useIsInMenuSplitGroup","useMenuSplitGroupContext_unstable","useValidateNesting","useMenuItemBase_unstable","props","ref","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","content","_content","rest","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","open","useNotifySplitItemMultiline","multiline","subText","innerRef","useRef","dismissedWithKeyboardRef","validateNestingRef","getValidateNestingComponentName","role","state","submenuOpen","components","root","icon","checkmark","submenuIndicator","secondaryContent","always","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseMove","currentTarget","ownerDocument","activeElement","focus","onClick","keyboard","bubble","type","elementType","optional","renderByDefault","children","defaultProps","options","isSplitItemTrigger","setMultiline"],"mappings":"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"}
|