@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
|
@@ -53,7 +53,8 @@ import { menuSplitGroupMultilineAttr } from './useMenuSplitGroupStyles.styles';
|
|
|
53
53
|
root: 'div'
|
|
54
54
|
},
|
|
55
55
|
setMultiline,
|
|
56
|
-
root: slot.always(
|
|
56
|
+
root: slot.always(// eslint-disable-next-line react-hooks/refs
|
|
57
|
+
getIntrinsicElementProps('div', {
|
|
57
58
|
role: 'group',
|
|
58
59
|
// FIXME:
|
|
59
60
|
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, getRTLSafeKey, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { MenuSplitGroupProps, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\nimport { menuSplitGroupMultilineAttr } from './useMenuSplitGroupStyles.styles';\n\n/**\n * Create the state required to render MenuSplitGroup.\n *\n * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,\n * before being passed to renderMenuSplitGroup_unstable.\n *\n * @param props - props from this instance of MenuSplitGroup\n * @param ref - reference to root HTMLElement of MenuSplitGroup\n */\nexport const useMenuSplitGroup_unstable = (\n props: MenuSplitGroupProps,\n ref: React.Ref<HTMLElement>,\n): MenuSplitGroupState => {\n const innerRef = React.useRef<HTMLDivElement>(undefined);\n const { dir, targetDocument } = useFluent();\n\n const nextArrowKey = getRTLSafeKey(ArrowRight, dir);\n const prevArrowKey = getRTLSafeKey(ArrowLeft, dir);\n\n const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n const { multilineRef, setMultiline } = useHandleMultilineMenuItem();\n\n const onKeyDown = React.useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n const activeElement = targetDocument?.activeElement;\n if (!activeElement) {\n return;\n }\n\n if (!innerRef.current?.contains(activeElement)) {\n return;\n }\n\n if (e.key === nextArrowKey) {\n const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n next?.focus();\n }\n\n if (e.key === prevArrowKey) {\n const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n prev?.focus();\n }\n },\n [findNextFocusable, findPrevFocusable, targetDocument, nextArrowKey, prevArrowKey],\n );\n\n return {\n components: {\n root: 'div',\n },\n setMultiline,\n root: slot.always(\n getIntrinsicElementProps('div', {\n role: 'group',\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: useMergedRefs(ref, innerRef, multilineRef) as React.Ref<HTMLDivElement>,\n onKeyDown,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n\n/**\n * Creates a callback that lets a multiline menu item child set an attribute on this component\n * Children can mount before parents so we need to store the value and apply it when the parent is mounted\n */\nconst useHandleMultilineMenuItem = () => {\n const [handle] = React.useState(() => {\n let isMultiline = false;\n let multilineNode: HTMLElement | null = null;\n\n function applyAttr() {\n multilineNode?.toggleAttribute(menuSplitGroupMultilineAttr, isMultiline);\n }\n\n return {\n multilineRef: (node: HTMLDivElement | null) => {\n if (node) {\n multilineNode = node;\n applyAttr();\n } else {\n multilineNode = null;\n }\n },\n setMultiline: (value: boolean) => {\n isMultiline = value;\n applyAttr();\n },\n };\n });\n\n return handle;\n};\n"],"names":["React","getIntrinsicElementProps","getRTLSafeKey","useMergedRefs","slot","useFocusFinders","useFluent_unstable","useFluent","ArrowRight","ArrowLeft","menuSplitGroupMultilineAttr","useMenuSplitGroup_unstable","props","ref","innerRef","useRef","undefined","dir","targetDocument","nextArrowKey","prevArrowKey","findNextFocusable","findPrevFocusable","multilineRef","setMultiline","useHandleMultilineMenuItem","onKeyDown","useCallback","e","activeElement","current","contains","key","next","container","focus","prev","components","root","always","role","elementType","handle","useState","isMultiline","multilineNode","applyAttr","toggleAttribute","node","value"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AACzG,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,UAAU,EAAEC,SAAS,QAAQ,0BAA0B;AAChE,SAASC,2BAA2B,QAAQ,mCAAmC;AAE/E;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,WAAWd,MAAMe,MAAM,CAAiBC;IAC9C,MAAM,EAAEC,GAAG,EAAEC,cAAc,EAAE,GAAGX;IAEhC,MAAMY,eAAejB,cAAcM,YAAYS;IAC/C,MAAMG,eAAelB,cAAcO,WAAWQ;IAE9C,MAAM,EAAEI,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGjB;IACjD,MAAM,EAAEkB,YAAY,EAAEC,YAAY,EAAE,GAAGC;IAEvC,MAAMC,YAAY1B,MAAM2B,WAAW,CACjC,CAACC;YAMMd;QALL,MAAMe,gBAAgBX,2BAAAA,qCAAAA,eAAgBW,aAAa;QACnD,IAAI,CAACA,eAAe;YAClB;QACF;QAEA,IAAI,GAACf,oBAAAA,SAASgB,OAAO,cAAhBhB,wCAAAA,kBAAkBiB,QAAQ,CAACF,iBAAgB;YAC9C;QACF;QAEA,IAAID,EAAEI,GAAG,KAAKb,cAAc;YAC1B,MAAMc,OAAOZ,kBAAkBQ,eAA8B;gBAAEK,WAAWpB,SAASgB,OAAO;YAAC;YAC3FG,iBAAAA,2BAAAA,KAAME,KAAK;QACb;QAEA,IAAIP,EAAEI,GAAG,KAAKZ,cAAc;YAC1B,MAAMgB,OAAOd,kBAAkBO,eAA8B;gBAAEK,WAAWpB,SAASgB,OAAO;YAAC;YAC3FM,iBAAAA,2BAAAA,KAAMD,KAAK;QACb;IACF,GACA;QAACd;QAAmBC;QAAmBJ;QAAgBC;QAAcC;KAAa;IAGpF,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAd;QACAc,MAAMlC,KAAKmC,MAAM,
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, getRTLSafeKey, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { MenuSplitGroupProps, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\nimport { menuSplitGroupMultilineAttr } from './useMenuSplitGroupStyles.styles';\n\n/**\n * Create the state required to render MenuSplitGroup.\n *\n * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,\n * before being passed to renderMenuSplitGroup_unstable.\n *\n * @param props - props from this instance of MenuSplitGroup\n * @param ref - reference to root HTMLElement of MenuSplitGroup\n */\nexport const useMenuSplitGroup_unstable = (\n props: MenuSplitGroupProps,\n ref: React.Ref<HTMLElement>,\n): MenuSplitGroupState => {\n const innerRef = React.useRef<HTMLDivElement>(undefined);\n const { dir, targetDocument } = useFluent();\n\n const nextArrowKey = getRTLSafeKey(ArrowRight, dir);\n const prevArrowKey = getRTLSafeKey(ArrowLeft, dir);\n\n const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n const { multilineRef, setMultiline } = useHandleMultilineMenuItem();\n\n const onKeyDown = React.useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n const activeElement = targetDocument?.activeElement;\n if (!activeElement) {\n return;\n }\n\n if (!innerRef.current?.contains(activeElement)) {\n return;\n }\n\n if (e.key === nextArrowKey) {\n const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n next?.focus();\n }\n\n if (e.key === prevArrowKey) {\n const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n prev?.focus();\n }\n },\n [findNextFocusable, findPrevFocusable, targetDocument, nextArrowKey, prevArrowKey],\n );\n\n return {\n components: {\n root: 'div',\n },\n setMultiline,\n root: slot.always(\n // eslint-disable-next-line react-hooks/refs\n getIntrinsicElementProps('div', {\n role: 'group',\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: useMergedRefs(ref, innerRef, multilineRef) as React.Ref<HTMLDivElement>,\n onKeyDown,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n\n/**\n * Creates a callback that lets a multiline menu item child set an attribute on this component\n * Children can mount before parents so we need to store the value and apply it when the parent is mounted\n */\nconst useHandleMultilineMenuItem = () => {\n const [handle] = React.useState(() => {\n let isMultiline = false;\n let multilineNode: HTMLElement | null = null;\n\n function applyAttr() {\n multilineNode?.toggleAttribute(menuSplitGroupMultilineAttr, isMultiline);\n }\n\n return {\n multilineRef: (node: HTMLDivElement | null) => {\n if (node) {\n multilineNode = node;\n applyAttr();\n } else {\n multilineNode = null;\n }\n },\n setMultiline: (value: boolean) => {\n isMultiline = value;\n applyAttr();\n },\n };\n });\n\n return handle;\n};\n"],"names":["React","getIntrinsicElementProps","getRTLSafeKey","useMergedRefs","slot","useFocusFinders","useFluent_unstable","useFluent","ArrowRight","ArrowLeft","menuSplitGroupMultilineAttr","useMenuSplitGroup_unstable","props","ref","innerRef","useRef","undefined","dir","targetDocument","nextArrowKey","prevArrowKey","findNextFocusable","findPrevFocusable","multilineRef","setMultiline","useHandleMultilineMenuItem","onKeyDown","useCallback","e","activeElement","current","contains","key","next","container","focus","prev","components","root","always","role","elementType","handle","useState","isMultiline","multilineNode","applyAttr","toggleAttribute","node","value"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AACzG,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,UAAU,EAAEC,SAAS,QAAQ,0BAA0B;AAChE,SAASC,2BAA2B,QAAQ,mCAAmC;AAE/E;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,WAAWd,MAAMe,MAAM,CAAiBC;IAC9C,MAAM,EAAEC,GAAG,EAAEC,cAAc,EAAE,GAAGX;IAEhC,MAAMY,eAAejB,cAAcM,YAAYS;IAC/C,MAAMG,eAAelB,cAAcO,WAAWQ;IAE9C,MAAM,EAAEI,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGjB;IACjD,MAAM,EAAEkB,YAAY,EAAEC,YAAY,EAAE,GAAGC;IAEvC,MAAMC,YAAY1B,MAAM2B,WAAW,CACjC,CAACC;YAMMd;QALL,MAAMe,gBAAgBX,2BAAAA,qCAAAA,eAAgBW,aAAa;QACnD,IAAI,CAACA,eAAe;YAClB;QACF;QAEA,IAAI,GAACf,oBAAAA,SAASgB,OAAO,cAAhBhB,wCAAAA,kBAAkBiB,QAAQ,CAACF,iBAAgB;YAC9C;QACF;QAEA,IAAID,EAAEI,GAAG,KAAKb,cAAc;YAC1B,MAAMc,OAAOZ,kBAAkBQ,eAA8B;gBAAEK,WAAWpB,SAASgB,OAAO;YAAC;YAC3FG,iBAAAA,2BAAAA,KAAME,KAAK;QACb;QAEA,IAAIP,EAAEI,GAAG,KAAKZ,cAAc;YAC1B,MAAMgB,OAAOd,kBAAkBO,eAA8B;gBAAEK,WAAWpB,SAASgB,OAAO;YAAC;YAC3FM,iBAAAA,2BAAAA,KAAMD,KAAK;QACb;IACF,GACA;QAACd;QAAmBC;QAAmBJ;QAAgBC;QAAcC;KAAa;IAGpF,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAd;QACAc,MAAMlC,KAAKmC,MAAM,CACf,4CAA4C;QAC5CtC,yBAAyB,OAAO;YAC9BuC,MAAM;YACN,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5F3B,KAAKV,cAAcU,KAAKC,UAAUS;YAClCG;YACA,GAAGd,KAAK;QACV,IACA;YAAE6B,aAAa;QAAM;IAEzB;AACF,EAAE;AAEF;;;CAGC,GACD,MAAMhB,6BAA6B;IACjC,MAAM,CAACiB,OAAO,GAAG1C,MAAM2C,QAAQ,CAAC;QAC9B,IAAIC,cAAc;QAClB,IAAIC,gBAAoC;QAExC,SAASC;YACPD,0BAAAA,oCAAAA,cAAeE,eAAe,CAACrC,6BAA6BkC;QAC9D;QAEA,OAAO;YACLrB,cAAc,CAACyB;gBACb,IAAIA,MAAM;oBACRH,gBAAgBG;oBAChBF;gBACF,OAAO;oBACLD,gBAAgB;gBAClB;YACF;YACArB,cAAc,CAACyB;gBACbL,cAAcK;gBACdH;YACF;QACF;IACF;IAEA,OAAOJ;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroupContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { MenuSplitGroupContextValues, MenuSplitGroupState } from './MenuSplitGroup.types';\n\nexport const useMenuSplitGroupContextValues = (state: MenuSplitGroupState): MenuSplitGroupContextValues => {\n 'use no memo';\n\n return React.useMemo(() => {\n return {\n menuSplitGroup: {\n setMultiline: state.setMultiline,\n },\n };\n }, [state.setMultiline]);\n};\n"],"names":["React","useMenuSplitGroupContextValues","state","useMemo","menuSplitGroup","setMultiline"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,OAAOF,MAAMG,OAAO,CAAC;QACnB,OAAO;YACLC,gBAAgB;gBACdC,cAAcH,MAAMG,YAAY;YAClC;QACF;IACF,GAAG;QAACH,MAAMG,YAAY;KAAC;AACzB,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroupContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { MenuSplitGroupContextValues, MenuSplitGroupState } from './MenuSplitGroup.types';\n\nexport const useMenuSplitGroupContextValues = (state: MenuSplitGroupState): MenuSplitGroupContextValues => {\n 'use no memo';\n\n return React.useMemo(() => {\n return {\n menuSplitGroup: {\n setMultiline: state.setMultiline,\n },\n };\n }, [state.setMultiline]);\n};\n"],"names":["React","useMenuSplitGroupContextValues","state","useMemo","menuSplitGroup","setMultiline"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,OAAOF,MAAMG,OAAO,CAAC;QACnB,OAAO;YACLC,gBAAgB;gBACdC,cAAcH,MAAMG,YAAY;YAClC;QACF;IACF,GAAG;QAACH,MAAMG,YAAY;KAAC;AACzB,EAAE"}
|
|
@@ -39,6 +39,7 @@ export const useMenuSplitGroupStyles_unstable = state => {
|
|
|
39
39
|
'use no memo';
|
|
40
40
|
|
|
41
41
|
const styles = useStyles();
|
|
42
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
42
43
|
state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);
|
|
43
44
|
return state;
|
|
44
45
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","tokens","menuItemClassNames","menuSplitGroupMultilineAttr","menuSplitGroupClassNames","root","useStyles","Bhlrgs3","mc9l5x","rue6gn","oe75ve","Bbblmiw","Bn2ps6a","Bu15iap","B71tm0z","Gjs4sj","foni4y","Ie9k5m","f30fub","Jberyy","d","p","useMenuSplitGroupStyles_unstable","state","styles","className"],"sources":["useMenuSplitGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuSplitGroupMultilineAttr = 'data-multiline';\nexport const menuSplitGroupClassNames = {\n root: 'fui-MenuSplitGroup'\n};\n/**\n * Styles for the root slot\n * TODO - remove the use of nested combinators to style child menu items\n */ const useStyles = makeStyles({\n root: {\n [`[${menuSplitGroupMultilineAttr}]`]: {\n [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n alignSelf: 'center'\n }\n },\n display: 'flex',\n [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n flex: 1\n },\n [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: tokens.strokeWidthThin,\n height: '20px',\n backgroundColor: tokens.colorNeutralStroke1\n }\n }\n }\n});\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */ export const useMenuSplitGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,kBAAkB,QAAQ,sCAAsC;AACzE,OAAO,MAAMC,2BAA2B,GAAG,gBAAgB;AAC3D,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAuBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","menuItemClassNames","menuSplitGroupMultilineAttr","menuSplitGroupClassNames","root","useStyles","Bhlrgs3","mc9l5x","rue6gn","oe75ve","Bbblmiw","Bn2ps6a","Bu15iap","B71tm0z","Gjs4sj","foni4y","Ie9k5m","f30fub","Jberyy","d","p","useMenuSplitGroupStyles_unstable","state","styles","className"],"sources":["useMenuSplitGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuSplitGroupMultilineAttr = 'data-multiline';\nexport const menuSplitGroupClassNames = {\n root: 'fui-MenuSplitGroup'\n};\n/**\n * Styles for the root slot\n * TODO - remove the use of nested combinators to style child menu items\n */ const useStyles = makeStyles({\n root: {\n [`[${menuSplitGroupMultilineAttr}]`]: {\n [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n alignSelf: 'center'\n }\n },\n display: 'flex',\n [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n flex: 1\n },\n [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: tokens.strokeWidthThin,\n height: '20px',\n backgroundColor: tokens.colorNeutralStroke1\n }\n }\n }\n});\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */ export const useMenuSplitGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,kBAAkB,QAAQ,sCAAsC;AACzE,OAAO,MAAMC,2BAA2B,GAAG,gBAAgB;AAC3D,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAuBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B;EACAiB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGzB,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;EACrG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -38,6 +38,7 @@ export const menuSplitGroupClassNames = {
|
|
|
38
38
|
*/ export const useMenuSplitGroupStyles_unstable = (state)=>{
|
|
39
39
|
'use no memo';
|
|
40
40
|
const styles = useStyles();
|
|
41
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
41
42
|
state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);
|
|
42
43
|
return state;
|
|
43
44
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nimport type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuSplitGroupMultilineAttr = 'data-multiline';\n\nexport const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots> = {\n root: 'fui-MenuSplitGroup',\n};\n/**\n * Styles for the root slot\n * TODO - remove the use of nested combinators to style child menu items\n */\nconst useStyles = makeStyles({\n root: {\n [`[${menuSplitGroupMultilineAttr}]`]: {\n [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n alignSelf: 'center',\n },\n },\n display: 'flex',\n [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n flex: 1,\n },\n [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: tokens.strokeWidthThin,\n height: '20px',\n backgroundColor: tokens.colorNeutralStroke1,\n },\n },\n },\n});\n\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */\nexport const useMenuSplitGroupStyles_unstable = (state: MenuSplitGroupState): MenuSplitGroupState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","menuItemClassNames","menuSplitGroupMultilineAttr","menuSplitGroupClassNames","root","useStyles","alignSelf","display","flex","borderTopLeftRadius","borderBottomLeftRadius","paddingLeft","content","width","strokeWidthThin","height","backgroundColor","colorNeutralStroke1","useMenuSplitGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,kBAAkB,QAAQ,uCAAuC;AAI1E,OAAO,MAAMC,8BAA8B,iBAAiB;AAE5D,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AACF;;;CAGC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJ,CAAC,CAAC,CAAC,EAAEF,4BAA4B,CAAC,CAAC,CAAC,EAAE;YACpC,CAAC,CAAC,KAAK,EAAED,mBAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;gBAClDE,WAAW;YACb;QACF;QACAC,SAAS;QACT,CAAC,CAAC,KAAK,EAAEN,mBAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;YAClDI,MAAM;QACR;QACA,CAAC,CAAC,KAAK,EAAEP,mBAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;YAClDK,qBAAqB;YACrBC,wBAAwB;YACxBC,aAAa;YACb,YAAY;gBACVC,SAAS;gBACTC,OAAOb,OAAOc,eAAe;gBAC7BC,QAAQ;gBACRC,iBAAiBhB,OAAOiB,mBAAmB;YAC7C;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAASf;
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nimport type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuSplitGroupMultilineAttr = 'data-multiline';\n\nexport const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots> = {\n root: 'fui-MenuSplitGroup',\n};\n/**\n * Styles for the root slot\n * TODO - remove the use of nested combinators to style child menu items\n */\nconst useStyles = makeStyles({\n root: {\n [`[${menuSplitGroupMultilineAttr}]`]: {\n [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n alignSelf: 'center',\n },\n },\n display: 'flex',\n [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n flex: 1,\n },\n [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n paddingLeft: 0,\n '::before': {\n content: '\"\"',\n width: tokens.strokeWidthThin,\n height: '20px',\n backgroundColor: tokens.colorNeutralStroke1,\n },\n },\n },\n});\n\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */\nexport const useMenuSplitGroupStyles_unstable = (state: MenuSplitGroupState): MenuSplitGroupState => {\n 'use no memo';\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","menuItemClassNames","menuSplitGroupMultilineAttr","menuSplitGroupClassNames","root","useStyles","alignSelf","display","flex","borderTopLeftRadius","borderBottomLeftRadius","paddingLeft","content","width","strokeWidthThin","height","backgroundColor","colorNeutralStroke1","useMenuSplitGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,kBAAkB,QAAQ,uCAAuC;AAI1E,OAAO,MAAMC,8BAA8B,iBAAiB;AAE5D,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AACF;;;CAGC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJ,CAAC,CAAC,CAAC,EAAEF,4BAA4B,CAAC,CAAC,CAAC,EAAE;YACpC,CAAC,CAAC,KAAK,EAAED,mBAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;gBAClDE,WAAW;YACb;QACF;QACAC,SAAS;QACT,CAAC,CAAC,KAAK,EAAEN,mBAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;YAClDI,MAAM;QACR;QACA,CAAC,CAAC,KAAK,EAAEP,mBAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;YAClDK,qBAAqB;YACrBC,wBAAwB;YACxBC,aAAa;YACb,YAAY;gBACVC,SAAS;gBACTC,OAAOb,OAAOc,eAAe;gBAC7BC,QAAQ;gBACRC,iBAAiBhB,OAAOiB,mBAAmB;YAC7C;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAASf;IACf,oDAAoD;IACpDc,MAAMf,IAAI,CAACiB,SAAS,GAAGtB,aAAaI,yBAAyBC,IAAI,EAAEgB,OAAOhB,IAAI,EAAEe,MAAMf,IAAI,CAACiB,SAAS;IACpG,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuTrigger/MenuTrigger.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuTrigger_unstable } from './useMenuTrigger';\nimport { renderMenuTrigger_unstable } from './renderMenuTrigger';\nimport type { MenuTriggerProps } from './MenuTrigger.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * Wraps a trigger element as an only child\n * and adds the necessary event handling to open a popup menu\n */\nexport const MenuTrigger: React.FC<MenuTriggerProps> = props => {\n const state = useMenuTrigger_unstable(props);\n\n return renderMenuTrigger_unstable(state);\n};\n\nMenuTrigger.displayName = 'MenuTrigger';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(MenuTrigger as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuTrigger/MenuTrigger.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useMenuTrigger_unstable } from './useMenuTrigger';\nimport { renderMenuTrigger_unstable } from './renderMenuTrigger';\nimport type { MenuTriggerProps } from './MenuTrigger.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * Wraps a trigger element as an only child\n * and adds the necessary event handling to open a popup menu\n */\nexport const MenuTrigger: React.FC<MenuTriggerProps> = props => {\n const state = useMenuTrigger_unstable(props);\n\n return renderMenuTrigger_unstable(state);\n};\n\nMenuTrigger.displayName = 'MenuTrigger';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(MenuTrigger as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["useMenuTrigger_unstable","renderMenuTrigger_unstable","MenuTrigger","props","state","displayName","isFluentTriggerComponent"],"mappings":"AAAA;AAGA,SAASA,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AAIjE;;;CAGC,GACD,OAAO,MAAMC,cAA0CC,CAAAA;IACrD,MAAMC,QAAQJ,wBAAwBG;IAEtC,OAAOF,2BAA2BG;AACpC,EAAE;AAEFF,YAAYG,WAAW,GAAG;AAC1B,6FAA6F;AAC5FH,YAAuCI,wBAAwB,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
export { };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuTrigger/MenuTrigger.types.ts"],"sourcesContent":["import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';\nimport type { TriggerProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type MenuTriggerProps = TriggerProps<MenuTriggerChildProps> & {\n /**\n * Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.\n * @default false\n */\n disableButtonEnhancement?: boolean;\n};\n\n/**\n * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu\n */\nexport type MenuTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<\n Type,\n Props & {\n 'aria-haspopup'?: 'menu';\n 'aria-expanded'?: boolean;\n id: string;\n ref: React.Ref<never>;\n /* eslint-disable @nx/workspace-consistent-callback-type -- can't change type of existing callback */\n onMouseEnter: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onMouseLeave: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onMouseMove: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onMouseOver?: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onContextMenu: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n /* eslint-enable @nx/workspace-consistent-callback-type */\n }\n>;\n\nexport type MenuTriggerState = {\n children: React.ReactElement | null;\n isSubmenu: boolean;\n};\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuTrigger/MenuTrigger.types.ts"],"sourcesContent":["import type { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';\nimport type { TriggerProps } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nexport type MenuTriggerProps = TriggerProps<MenuTriggerChildProps> & {\n /**\n * Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.\n * @default false\n */\n disableButtonEnhancement?: boolean;\n};\n\nexport type MenuTriggerBaseProps = MenuTriggerProps & {\n /**\n * Optional callback to focus the first focusable element in the menu popover\n * when an arrow key is pressed on an open submenu trigger.\n * If omitted, the keyboard handler is a no-op.\n */\n focusFirst?: () => void;\n};\n\n/**\n * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu\n */\nexport type MenuTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<\n Type,\n Props & {\n 'aria-haspopup'?: 'menu';\n 'aria-expanded'?: boolean;\n id: string;\n ref: React.Ref<never>;\n /* eslint-disable @nx/workspace-consistent-callback-type -- can't change type of existing callback */\n onMouseEnter: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onMouseLeave: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onMouseMove: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onMouseOver?: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onContextMenu: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n /* eslint-enable @nx/workspace-consistent-callback-type */\n }\n>;\n\nexport type MenuTriggerState = {\n children: React.ReactElement | null;\n isSubmenu: boolean;\n};\n"],"names":[],"mappings":"AAyCA,WAGE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuTrigger/index.ts"],"sourcesContent":["export { MenuTrigger } from './MenuTrigger';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuTrigger/index.ts"],"sourcesContent":["export { MenuTrigger } from './MenuTrigger';\nexport type {\n MenuTriggerChildProps,\n MenuTriggerBaseProps,\n MenuTriggerProps,\n MenuTriggerState,\n} from './MenuTrigger.types';\nexport { renderMenuTrigger_unstable } from './renderMenuTrigger';\nexport { useMenuTrigger_unstable, useMenuTriggerBase_unstable } from './useMenuTrigger';\n"],"names":["MenuTrigger","renderMenuTrigger_unstable","useMenuTrigger_unstable","useMenuTriggerBase_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAO5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,mBAAmB"}
|
|
@@ -13,13 +13,44 @@ function noop() {
|
|
|
13
13
|
}
|
|
14
14
|
/**
|
|
15
15
|
* Create the state required to render MenuTrigger.
|
|
16
|
-
* Clones the only child component and adds necessary event handling behaviours to open a popup menu
|
|
16
|
+
* Clones the only child component and adds necessary event handling behaviours to open a popup menu.
|
|
17
|
+
*
|
|
18
|
+
* Composes with `useMenuTriggerBase_unstable` and supplies Tabster's `findFirstFocusable`
|
|
19
|
+
* as the `focusFirst` callback so that submenu-trigger keyboard navigation honours
|
|
20
|
+
* Tabster movers, focus traps, and other Tabster-managed state.
|
|
17
21
|
*
|
|
18
22
|
* @param props - props from this instance of MenuTrigger
|
|
19
23
|
*/ export const useMenuTrigger_unstable = (props)=>{
|
|
20
|
-
const { children, disableButtonEnhancement = false } = props;
|
|
21
|
-
const triggerRef = useMenuContext_unstable((context)=>context.triggerRef);
|
|
22
24
|
const menuPopoverRef = useMenuContext_unstable((context)=>context.menuPopoverRef);
|
|
25
|
+
const { findFirstFocusable } = useFocusFinders();
|
|
26
|
+
const focusFirst = React.useCallback(()=>{
|
|
27
|
+
const firstFocusable = findFirstFocusable(menuPopoverRef.current);
|
|
28
|
+
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
|
|
29
|
+
}, [
|
|
30
|
+
findFirstFocusable,
|
|
31
|
+
menuPopoverRef
|
|
32
|
+
]);
|
|
33
|
+
return useMenuTriggerBase_unstable({
|
|
34
|
+
...props,
|
|
35
|
+
focusFirst
|
|
36
|
+
});
|
|
37
|
+
};
|
|
38
|
+
/**
|
|
39
|
+
* Options accepted by `useMenuTriggerBase_unstable`.
|
|
40
|
+
*/ /**
|
|
41
|
+
* Base hook for MenuTrigger component, produces state required to render the component.
|
|
42
|
+
*
|
|
43
|
+
* Headless: this hook does not import from `@fluentui/react-tabster` and does not
|
|
44
|
+
* perform any focus discovery on its own. The submenu-already-open arrow-key path
|
|
45
|
+
* delegates to the optional `options.focusFirst` callback, which lets consumers wire
|
|
46
|
+
* up whichever focus-finding strategy fits their environment (Tabster, a native DOM
|
|
47
|
+
* query, a virtual focus manager, etc.). When `focusFirst` is not provided that path
|
|
48
|
+
* becomes a no-op.
|
|
49
|
+
*
|
|
50
|
+
* @public
|
|
51
|
+
*/ export const useMenuTriggerBase_unstable = (props)=>{
|
|
52
|
+
const { children, disableButtonEnhancement = false, focusFirst } = props;
|
|
53
|
+
const triggerRef = useMenuContext_unstable((context)=>context.triggerRef);
|
|
23
54
|
const setOpen = useMenuContext_unstable((context)=>context.setOpen);
|
|
24
55
|
const open = useMenuContext_unstable((context)=>context.open);
|
|
25
56
|
const triggerId = useMenuContext_unstable((context)=>context.triggerId);
|
|
@@ -30,14 +61,6 @@ function noop() {
|
|
|
30
61
|
var _ctx_shouldOpenOnArrowRight;
|
|
31
62
|
return (_ctx_shouldOpenOnArrowRight = ctx.shouldOpenOnArrowRight) !== null && _ctx_shouldOpenOnArrowRight !== void 0 ? _ctx_shouldOpenOnArrowRight : true;
|
|
32
63
|
});
|
|
33
|
-
const { findFirstFocusable } = useFocusFinders();
|
|
34
|
-
const focusFirst = React.useCallback(()=>{
|
|
35
|
-
const firstFocusable = findFirstFocusable(menuPopoverRef.current);
|
|
36
|
-
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
|
|
37
|
-
}, [
|
|
38
|
-
findFirstFocusable,
|
|
39
|
-
menuPopoverRef
|
|
40
|
-
]);
|
|
41
64
|
const openedWithKeyboardRef = React.useRef(false);
|
|
42
65
|
const openedViaSafeZoneRef = React.useRef(false);
|
|
43
66
|
const hasMouseMovedRef = React.useRef(false);
|
|
@@ -104,7 +127,7 @@ function noop() {
|
|
|
104
127
|
}
|
|
105
128
|
// if menu is already open, can't rely on effects to focus
|
|
106
129
|
if (open && key === OpenArrowKey && isSubmenu && shouldOpenOnArrowRight) {
|
|
107
|
-
focusFirst();
|
|
130
|
+
focusFirst === null || focusFirst === void 0 ? void 0 : focusFirst();
|
|
108
131
|
}
|
|
109
132
|
};
|
|
110
133
|
const onMouseOver = (event)=>{
|
|
@@ -169,14 +192,18 @@ function noop() {
|
|
|
169
192
|
onMouseEnter: useEventCallback((_child_props_onMouseEnter = child === null || child === void 0 ? void 0 : child.props.onMouseEnter) !== null && _child_props_onMouseEnter !== void 0 ? _child_props_onMouseEnter : noop),
|
|
170
193
|
onMouseLeave: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseLeave, onMouseLeave)),
|
|
171
194
|
onContextMenu: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onContextMenu, onContextMenu)),
|
|
195
|
+
// eslint-disable-next-line react-hooks/refs
|
|
172
196
|
onMouseMove: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseMove, onMouseMove)),
|
|
197
|
+
// eslint-disable-next-line react-hooks/refs
|
|
173
198
|
onMouseOver: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseOver, onMouseOver))
|
|
174
199
|
};
|
|
175
200
|
const triggerChildProps = {
|
|
176
201
|
'aria-haspopup': 'menu',
|
|
177
202
|
'aria-expanded': !open && !isSubmenu ? undefined : open,
|
|
178
203
|
...contextMenuProps,
|
|
204
|
+
// eslint-disable-next-line react-hooks/refs
|
|
179
205
|
onClick: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onClick, onClick)),
|
|
206
|
+
// eslint-disable-next-line react-hooks/refs
|
|
180
207
|
onKeyDown: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onKeyDown, onKeyDown))
|
|
181
208
|
};
|
|
182
209
|
const ariaButtonTriggerChildProps = useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', triggerChildProps);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuTrigger/useMenuTrigger.ts"],"sourcesContent":["'use client';\n\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n getReactElementRef,\n isHTMLElement,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useIsSubmenu, useOnMenuSafeZoneTimeout } from '../../utils';\n\nfunction noop() {\n // does nothing\n}\n\n/**\n * Create the state required to render MenuTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup menu\n *\n * @param props - props from this instance of MenuTrigger\n */\nexport const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerState => {\n const { children, disableButtonEnhancement = false } = props;\n\n const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n const menuPopoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n const open = useMenuContext_unstable(context => context.open);\n const triggerId = useMenuContext_unstable(context => context.triggerId);\n const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n const openOnContext = useMenuContext_unstable(context => context.openOnContext);\n\n const isSubmenu = useIsSubmenu();\n const shouldOpenOnArrowRight = useMenuListContext_unstable(ctx => ctx.shouldOpenOnArrowRight ?? true);\n\n const { findFirstFocusable } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, menuPopoverRef]);\n\n const openedWithKeyboardRef = React.useRef(false);\n const openedViaSafeZoneRef = React.useRef(false);\n const hasMouseMovedRef = React.useRef(false);\n\n const { dir } = useFluent();\n const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n const child = getTriggerChild(children);\n\n // Heads up!\n //\n // Handles an edge case where mouse movement over the menu trigger didn't happen as safe zone blocked pointer events,\n // but the cursor is already over the menu trigger.\n const safeZoneHandlerRef = useOnMenuSafeZoneTimeout(\n useEventCallback(() => {\n if (isSubmenu) {\n openedViaSafeZoneRef.current = true;\n }\n }),\n );\n\n const onContextMenu = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event) || event.isDefaultPrevented()) {\n return;\n }\n\n if (openOnContext) {\n event.preventDefault();\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerContextMenu', event });\n }\n };\n\n const onClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n\n if (!openOnContext) {\n setOpen(event, { open: !open, keyboard: openedWithKeyboardRef.current, type: 'menuTriggerClick', event });\n openedWithKeyboardRef.current = false;\n }\n };\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event) || event.isDefaultPrevented()) {\n return;\n }\n\n const key = event.key;\n\n if (\n !openOnContext &&\n ((isSubmenu && shouldOpenOnArrowRight && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))\n ) {\n setOpen(event, { open: true, keyboard: true, type: 'menuTriggerKeyDown', event });\n }\n\n if (key === Escape && !isSubmenu) {\n setOpen(event, { open: false, keyboard: true, type: 'menuTriggerKeyDown', event });\n }\n\n // if menu is already open, can't rely on effects to focus\n if (open && key === OpenArrowKey && isSubmenu && shouldOpenOnArrowRight) {\n focusFirst();\n }\n };\n\n const onMouseOver = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n\n if (openOnHover) {\n if (hasMouseMovedRef.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseEnter', event });\n } else if (openedViaSafeZoneRef.current) {\n setOpen(event, { open: true, keyboard: false, ignoreHoverDelay: true, type: 'menuTriggerMouseEnter', event });\n openedViaSafeZoneRef.current = false;\n }\n }\n };\n\n // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience\n // First time open the mouse using mousemove and then continue with mouseenter\n // Only use once to determine that the user is using the mouse since it is an expensive event to handle\n const onMouseMove = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n if (openOnHover && !hasMouseMovedRef.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseMove', event });\n hasMouseMovedRef.current = true;\n }\n };\n\n const onMouseLeave = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n if (openOnHover) {\n setOpen(event, { open: false, keyboard: false, type: 'menuTriggerMouseLeave', event });\n }\n };\n\n const contextMenuProps = {\n id: triggerId,\n ...child?.props,\n ref: useMergedRefs(triggerRef, getReactElementRef(child), safeZoneHandlerRef),\n onMouseEnter: useEventCallback(child?.props.onMouseEnter ?? noop),\n onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n onMouseMove: useEventCallback(mergeCallbacks(child?.props.onMouseMove, onMouseMove)),\n onMouseOver: useEventCallback(mergeCallbacks(child?.props.onMouseOver, onMouseOver)),\n };\n\n const triggerChildProps = {\n 'aria-haspopup': 'menu',\n 'aria-expanded': !open && !isSubmenu ? undefined : open,\n ...contextMenuProps,\n onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n } as const;\n\n const ariaButtonTriggerChildProps = useARIAButtonProps(\n child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n triggerChildProps,\n );\n\n return {\n isSubmenu,\n children: applyTriggerPropsToChildren(\n children,\n openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n ),\n };\n};\n\nconst isTargetDisabled = (event: React.SyntheticEvent | Event) => {\n const isDisabled = (el: HTMLElement) =>\n el.hasAttribute('disabled') || (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true');\n if (isHTMLElement(event.target) && isDisabled(event.target)) {\n return true;\n }\n\n return isHTMLElement(event.currentTarget) && isDisabled(event.currentTarget);\n};\n"],"names":["useARIAButtonProps","ArrowRight","ArrowLeft","Escape","ArrowDown","useFluent_unstable","useFluent","useFocusFinders","applyTriggerPropsToChildren","getTriggerChild","getReactElementRef","isHTMLElement","mergeCallbacks","useEventCallback","useMergedRefs","React","useMenuContext_unstable","useMenuListContext_unstable","useIsSubmenu","useOnMenuSafeZoneTimeout","noop","useMenuTrigger_unstable","props","children","disableButtonEnhancement","triggerRef","context","menuPopoverRef","setOpen","open","triggerId","openOnHover","openOnContext","isSubmenu","shouldOpenOnArrowRight","ctx","findFirstFocusable","focusFirst","useCallback","firstFocusable","current","focus","openedWithKeyboardRef","useRef","openedViaSafeZoneRef","hasMouseMovedRef","dir","OpenArrowKey","child","safeZoneHandlerRef","onContextMenu","event","isTargetDisabled","isDefaultPrevented","preventDefault","keyboard","type","onClick","onKeyDown","key","onMouseOver","ignoreHoverDelay","onMouseMove","onMouseLeave","contextMenuProps","id","ref","onMouseEnter","triggerChildProps","undefined","ariaButtonTriggerChildProps","isDisabled","el","hasAttribute","getAttribute","target","currentTarget"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuTrigger/useMenuTrigger.ts"],"sourcesContent":["'use client';\n\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n getReactElementRef,\n isHTMLElement,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { MenuTriggerBaseProps, MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useIsSubmenu, useOnMenuSafeZoneTimeout } from '../../utils';\n\nfunction noop() {\n // does nothing\n}\n\n/**\n * Create the state required to render MenuTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup menu.\n *\n * Composes with `useMenuTriggerBase_unstable` and supplies Tabster's `findFirstFocusable`\n * as the `focusFirst` callback so that submenu-trigger keyboard navigation honours\n * Tabster movers, focus traps, and other Tabster-managed state.\n *\n * @param props - props from this instance of MenuTrigger\n */\nexport const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerState => {\n const menuPopoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n\n const { findFirstFocusable } = useFocusFinders();\n\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, menuPopoverRef]);\n\n return useMenuTriggerBase_unstable({ ...props, focusFirst });\n};\n\n/**\n * Options accepted by `useMenuTriggerBase_unstable`.\n */\n\n/**\n * Base hook for MenuTrigger component, produces state required to render the component.\n *\n * Headless: this hook does not import from `@fluentui/react-tabster` and does not\n * perform any focus discovery on its own. The submenu-already-open arrow-key path\n * delegates to the optional `options.focusFirst` callback, which lets consumers wire\n * up whichever focus-finding strategy fits their environment (Tabster, a native DOM\n * query, a virtual focus manager, etc.). When `focusFirst` is not provided that path\n * becomes a no-op.\n *\n * @public\n */\nexport const useMenuTriggerBase_unstable = (props: MenuTriggerBaseProps): MenuTriggerState => {\n const { children, disableButtonEnhancement = false, focusFirst } = props;\n\n const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n const open = useMenuContext_unstable(context => context.open);\n const triggerId = useMenuContext_unstable(context => context.triggerId);\n const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n const openOnContext = useMenuContext_unstable(context => context.openOnContext);\n\n const isSubmenu = useIsSubmenu();\n const shouldOpenOnArrowRight = useMenuListContext_unstable(ctx => ctx.shouldOpenOnArrowRight ?? true);\n\n const openedWithKeyboardRef = React.useRef(false);\n const openedViaSafeZoneRef = React.useRef(false);\n const hasMouseMovedRef = React.useRef(false);\n\n const { dir } = useFluent();\n const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n const child = getTriggerChild(children);\n\n // Heads up!\n //\n // Handles an edge case where mouse movement over the menu trigger didn't happen as safe zone blocked pointer events,\n // but the cursor is already over the menu trigger.\n const safeZoneHandlerRef = useOnMenuSafeZoneTimeout(\n useEventCallback(() => {\n if (isSubmenu) {\n openedViaSafeZoneRef.current = true;\n }\n }),\n );\n\n const onContextMenu = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event) || event.isDefaultPrevented()) {\n return;\n }\n\n if (openOnContext) {\n event.preventDefault();\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerContextMenu', event });\n }\n };\n\n const onClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n\n if (!openOnContext) {\n setOpen(event, { open: !open, keyboard: openedWithKeyboardRef.current, type: 'menuTriggerClick', event });\n openedWithKeyboardRef.current = false;\n }\n };\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event) || event.isDefaultPrevented()) {\n return;\n }\n\n const key = event.key;\n\n if (\n !openOnContext &&\n ((isSubmenu && shouldOpenOnArrowRight && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))\n ) {\n setOpen(event, { open: true, keyboard: true, type: 'menuTriggerKeyDown', event });\n }\n\n if (key === Escape && !isSubmenu) {\n setOpen(event, { open: false, keyboard: true, type: 'menuTriggerKeyDown', event });\n }\n\n // if menu is already open, can't rely on effects to focus\n if (open && key === OpenArrowKey && isSubmenu && shouldOpenOnArrowRight) {\n focusFirst?.();\n }\n };\n\n const onMouseOver = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n\n if (openOnHover) {\n if (hasMouseMovedRef.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseEnter', event });\n } else if (openedViaSafeZoneRef.current) {\n setOpen(event, { open: true, keyboard: false, ignoreHoverDelay: true, type: 'menuTriggerMouseEnter', event });\n openedViaSafeZoneRef.current = false;\n }\n }\n };\n\n // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience\n // First time open the mouse using mousemove and then continue with mouseenter\n // Only use once to determine that the user is using the mouse since it is an expensive event to handle\n const onMouseMove = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n if (openOnHover && !hasMouseMovedRef.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseMove', event });\n hasMouseMovedRef.current = true;\n }\n };\n\n const onMouseLeave = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n if (openOnHover) {\n setOpen(event, { open: false, keyboard: false, type: 'menuTriggerMouseLeave', event });\n }\n };\n\n const contextMenuProps = {\n id: triggerId,\n ...child?.props,\n ref: useMergedRefs(triggerRef, getReactElementRef(child), safeZoneHandlerRef),\n onMouseEnter: useEventCallback(child?.props.onMouseEnter ?? noop),\n onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n // eslint-disable-next-line react-hooks/refs\n onMouseMove: useEventCallback(mergeCallbacks(child?.props.onMouseMove, onMouseMove)),\n // eslint-disable-next-line react-hooks/refs\n onMouseOver: useEventCallback(mergeCallbacks(child?.props.onMouseOver, onMouseOver)),\n };\n\n const triggerChildProps = {\n 'aria-haspopup': 'menu',\n 'aria-expanded': !open && !isSubmenu ? undefined : open,\n ...contextMenuProps,\n // eslint-disable-next-line react-hooks/refs\n onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n // eslint-disable-next-line react-hooks/refs\n onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n } as const;\n\n const ariaButtonTriggerChildProps = useARIAButtonProps(\n child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n triggerChildProps,\n );\n\n return {\n isSubmenu,\n children: applyTriggerPropsToChildren(\n children,\n openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n ),\n };\n};\n\nconst isTargetDisabled = (event: React.SyntheticEvent | Event) => {\n const isDisabled = (el: HTMLElement) =>\n el.hasAttribute('disabled') || (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true');\n if (isHTMLElement(event.target) && isDisabled(event.target)) {\n return true;\n }\n\n return isHTMLElement(event.currentTarget) && isDisabled(event.currentTarget);\n};\n"],"names":["useARIAButtonProps","ArrowRight","ArrowLeft","Escape","ArrowDown","useFluent_unstable","useFluent","useFocusFinders","applyTriggerPropsToChildren","getTriggerChild","getReactElementRef","isHTMLElement","mergeCallbacks","useEventCallback","useMergedRefs","React","useMenuContext_unstable","useMenuListContext_unstable","useIsSubmenu","useOnMenuSafeZoneTimeout","noop","useMenuTrigger_unstable","props","menuPopoverRef","context","findFirstFocusable","focusFirst","useCallback","firstFocusable","current","focus","useMenuTriggerBase_unstable","children","disableButtonEnhancement","triggerRef","setOpen","open","triggerId","openOnHover","openOnContext","isSubmenu","shouldOpenOnArrowRight","ctx","openedWithKeyboardRef","useRef","openedViaSafeZoneRef","hasMouseMovedRef","dir","OpenArrowKey","child","safeZoneHandlerRef","onContextMenu","event","isTargetDisabled","isDefaultPrevented","preventDefault","keyboard","type","onClick","onKeyDown","key","onMouseOver","ignoreHoverDelay","onMouseMove","onMouseLeave","contextMenuProps","id","ref","onMouseEnter","triggerChildProps","undefined","ariaButtonTriggerChildProps","isDisabled","el","hasAttribute","getAttribute","target","currentTarget"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/menuContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue | undefined>(\n undefined,\n) as Context<MenuContextValue>;\n\nconst menuContextDefaultValue: MenuContextValue = {\n open: false,\n setOpen: () => false,\n checkedValues: {},\n onCheckedValueChange: () => null,\n isSubmenu: false,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n triggerRef: { current: null } as unknown as React.MutableRefObject<HTMLElement | null>,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n menuPopoverRef: { current: null } as unknown as React.MutableRefObject<HTMLElement | null>,\n mountNode: null,\n triggerId: '',\n openOnContext: false,\n openOnHover: false,\n hasIcons: false,\n hasCheckmarks: false,\n inline: false,\n persistOnItemClick: false,\n};\n\n/**\n * Context shared between Menu and its children components\n *\n * Extends and drills down MenuList props to simplify API\n */\nexport type MenuContextValue = Pick<\n MenuState,\n | 'openOnHover'\n | 'openOnContext'\n | 'triggerRef'\n | 'menuPopoverRef'\n | 'setOpen'\n | 'isSubmenu'\n | 'mountNode'\n | 'triggerId'\n | 'hasIcons'\n | 'hasCheckmarks'\n | 'persistOnItemClick'\n | 'inline'\n | 'checkedValues'\n | 'onCheckedValueChange'\n | 'safeZone'\n> & {\n open: boolean;\n triggerId: string;\n /**\n * Default values to be checked on mount\n * @deprecated this property is not used internally anymore,\n * the signature remains just to avoid breaking changes\n */\n defaultCheckedValues?: Record<string, string[]>;\n};\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext_unstable = <T>(selector: ContextSelector<MenuContextValue, T>): T =>\n useContextSelector(MenuContext, (ctx = menuContextDefaultValue) => selector(ctx));\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/contexts/menuContext.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue | undefined>(\n undefined,\n) as Context<MenuContextValue>;\n\nconst menuContextDefaultValue: MenuContextValue = {\n open: false,\n setOpen: () => false,\n checkedValues: {},\n onCheckedValueChange: () => null,\n isSubmenu: false,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n triggerRef: { current: null } as unknown as React.MutableRefObject<HTMLElement | null>,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n menuPopoverRef: { current: null } as unknown as React.MutableRefObject<HTMLElement | null>,\n mountNode: null,\n triggerId: '',\n openOnContext: false,\n openOnHover: false,\n hasIcons: false,\n hasCheckmarks: false,\n inline: false,\n persistOnItemClick: false,\n};\n\n/**\n * Context shared between Menu and its children components\n *\n * Extends and drills down MenuList props to simplify API\n */\nexport type MenuContextValue = Pick<\n MenuState,\n | 'openOnHover'\n | 'openOnContext'\n | 'triggerRef'\n | 'menuPopoverRef'\n | 'setOpen'\n | 'isSubmenu'\n | 'mountNode'\n | 'triggerId'\n | 'hasIcons'\n | 'hasCheckmarks'\n | 'persistOnItemClick'\n | 'inline'\n | 'checkedValues'\n | 'onCheckedValueChange'\n | 'safeZone'\n> & {\n open: boolean;\n triggerId: string;\n /**\n * Default values to be checked on mount\n * @deprecated this property is not used internally anymore,\n * the signature remains just to avoid breaking changes\n */\n defaultCheckedValues?: Record<string, string[]>;\n};\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext_unstable = <T>(selector: ContextSelector<MenuContextValue, T>): T =>\n useContextSelector(MenuContext, (ctx = menuContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","MenuContext","undefined","menuContextDefaultValue","open","setOpen","checkedValues","onCheckedValueChange","isSubmenu","triggerRef","current","menuPopoverRef","mountNode","triggerId","openOnContext","openOnHover","hasIcons","hasCheckmarks","inline","persistOnItemClick","MenuProvider","Provider","useMenuContext_unstable","selector","ctx"],"mappings":"AAAA;AAGA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,cAAyCF,cACpDG,WAC6B;AAE/B,MAAMC,0BAA4C;IAChDC,MAAM;IACNC,SAAS,IAAM;IACfC,eAAe,CAAC;IAChBC,sBAAsB,IAAM;IAC5BC,WAAW;IACX,4DAA4D;IAC5DC,YAAY;QAAEC,SAAS;IAAK;IAC5B,4DAA4D;IAC5DC,gBAAgB;QAAED,SAAS;IAAK;IAChCE,WAAW;IACXC,WAAW;IACXC,eAAe;IACfC,aAAa;IACbC,UAAU;IACVC,eAAe;IACfC,QAAQ;IACRC,oBAAoB;AACtB;AAmCA,OAAO,MAAMC,eAAenB,YAAYoB,QAAQ,CAAC;AAEjD,OAAO,MAAMC,0BAA0B,CAAIC,WACzCvB,mBAAmBC,aAAa,CAACuB,MAAMrB,uBAAuB,GAAKoB,SAASC,MAAM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/menuListContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SelectableHandler } from '../selectable/index';\nimport type { MenuCheckedValueChangeData, MenuCheckedValueChangeEvent, MenuListProps } from '../components/index';\n\nexport const MenuListContext: Context<MenuListContextValue> = createContext<MenuListContextValue | undefined>(\n undefined,\n) as Context<MenuListContextValue>;\n\nconst menuListContextDefaultValue: MenuListContextValue = {\n checkedValues: {},\n setFocusByFirstCharacter: () => null,\n toggleCheckbox: () => null,\n selectRadio: () => null,\n hasIcons: false,\n hasCheckmarks: false,\n};\n\n/**\n * Context shared between MenuList and its children components\n */\nexport type MenuListContextValue = Pick<MenuListProps, 'checkedValues' | 'hasIcons' | 'hasCheckmarks'> & {\n setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n toggleCheckbox?: SelectableHandler;\n selectRadio?: SelectableHandler;\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 * @deprecated this property is not used internally anymore,\n * the signature remains just to avoid breaking changes\n */\n onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;\n /**\n * Whether child menus (submenus) should open when the user presses the ArrowRight key on their trigger.\n * Set to `false` when the list context is provided by a grid-like container (e.g. MenuGrid) where\n * ArrowRight is reserved for column navigation.\n *\n * @default true\n */\n shouldOpenOnArrowRight?: boolean;\n /**\n * Whether child menus (submenus) should close when the user presses the ArrowLeft key.\n * Set to `false` when the list context is provided by a grid-like container (e.g. MenuGrid) where\n * ArrowLeft is reserved for column navigation.\n *\n * @default true\n */\n shouldCloseOnArrowLeft?: boolean;\n};\n\nexport const MenuListProvider = MenuListContext.Provider;\n\nexport const useMenuListContext_unstable = <T,>(selector: ContextSelector<MenuListContextValue, T>): T =>\n useContextSelector(MenuListContext, (ctx = menuListContextDefaultValue) => selector(ctx));\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/contexts/menuListContext.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SelectableHandler } from '../selectable/index';\nimport type { MenuCheckedValueChangeData, MenuCheckedValueChangeEvent, MenuListProps } from '../components/index';\n\nexport const MenuListContext: Context<MenuListContextValue> = createContext<MenuListContextValue | undefined>(\n undefined,\n) as Context<MenuListContextValue>;\n\nconst menuListContextDefaultValue: MenuListContextValue = {\n checkedValues: {},\n setFocusByFirstCharacter: () => null,\n toggleCheckbox: () => null,\n selectRadio: () => null,\n hasIcons: false,\n hasCheckmarks: false,\n};\n\n/**\n * Context shared between MenuList and its children components\n */\nexport type MenuListContextValue = Pick<MenuListProps, 'checkedValues' | 'hasIcons' | 'hasCheckmarks'> & {\n setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n toggleCheckbox?: SelectableHandler;\n selectRadio?: SelectableHandler;\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 * @deprecated this property is not used internally anymore,\n * the signature remains just to avoid breaking changes\n */\n onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;\n /**\n * Whether child menus (submenus) should open when the user presses the ArrowRight key on their trigger.\n * Set to `false` when the list context is provided by a grid-like container (e.g. MenuGrid) where\n * ArrowRight is reserved for column navigation.\n *\n * @default true\n */\n shouldOpenOnArrowRight?: boolean;\n /**\n * Whether child menus (submenus) should close when the user presses the ArrowLeft key.\n * Set to `false` when the list context is provided by a grid-like container (e.g. MenuGrid) where\n * ArrowLeft is reserved for column navigation.\n *\n * @default true\n */\n shouldCloseOnArrowLeft?: boolean;\n};\n\nexport const MenuListProvider = MenuListContext.Provider;\n\nexport const useMenuListContext_unstable = <T,>(selector: ContextSelector<MenuListContextValue, T>): T =>\n useContextSelector(MenuListContext, (ctx = menuListContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","MenuListContext","undefined","menuListContextDefaultValue","checkedValues","setFocusByFirstCharacter","toggleCheckbox","selectRadio","hasIcons","hasCheckmarks","MenuListProvider","Provider","useMenuListContext_unstable","selector","ctx"],"mappings":"AAAA;AAGA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAKrF,OAAO,MAAMC,kBAAiDF,cAC5DG,WACiC;AAEnC,MAAMC,8BAAoD;IACxDC,eAAe,CAAC;IAChBC,0BAA0B,IAAM;IAChCC,gBAAgB,IAAM;IACtBC,aAAa,IAAM;IACnBC,UAAU;IACVC,eAAe;AACjB;AAqCA,OAAO,MAAMC,mBAAmBT,gBAAgBU,QAAQ,CAAC;AAEzD,OAAO,MAAMC,8BAA8B,CAAKC,WAC9Cb,mBAAmBC,iBAAiB,CAACa,MAAMX,2BAA2B,GAAKU,SAASC,MAAM"}
|
package/lib/index.js
CHANGED
|
@@ -2,23 +2,18 @@ export { MenuProvider, useMenuContext_unstable } from './contexts/menuContext';
|
|
|
2
2
|
export { MenuTriggerContextProvider, useMenuTriggerContext_unstable } from './contexts/menuTriggerContext';
|
|
3
3
|
export { MenuGroupContextProvider, useMenuGroupContext_unstable } from './contexts/menuGroupContext';
|
|
4
4
|
export { MenuListProvider, useMenuListContext_unstable } from './contexts/menuListContext';
|
|
5
|
-
export { Menu, renderMenu_unstable, useMenuContextValues_unstable, useMenu_unstable } from './Menu';
|
|
5
|
+
export { Menu, renderMenu_unstable, useMenuBase_unstable, useMenuContextValues_unstable, useMenu_unstable } from './Menu';
|
|
6
6
|
export { MenuDivider, menuDividerClassNames, renderMenuDivider_unstable, useMenuDividerStyles_unstable, useMenuDivider_unstable } from './MenuDivider';
|
|
7
7
|
export { MenuGroup, menuGroupClassNames, renderMenuGroup_unstable, useMenuGroupContextValues_unstable, useMenuGroupStyles_unstable, useMenuGroup_unstable } from './MenuGroup';
|
|
8
8
|
export { MenuGroupHeader, menuGroupHeaderClassNames, renderMenuGroupHeader_unstable, useMenuGroupHeaderStyles_unstable, useMenuGroupHeader_unstable } from './MenuGroupHeader';
|
|
9
|
-
export { MenuItem, menuItemClassNames, renderMenuItem_unstable, useMenuItemStyles_unstable, useMenuItem_unstable } from './MenuItem';
|
|
10
|
-
export { MenuItemCheckbox, menuItemCheckboxClassNames, renderMenuItemCheckbox_unstable, useMenuItemCheckboxStyles_unstable, useMenuItemCheckbox_unstable } from './MenuItemCheckbox';
|
|
11
|
-
export { MenuItemRadio, menuItemRadioClassNames, renderMenuItemRadio_unstable, useMenuItemRadioStyles_unstable, useMenuItemRadio_unstable } from './MenuItemRadio';
|
|
12
|
-
export { MenuList, menuListClassNames, renderMenuList_unstable, useMenuListContextValues_unstable, useMenuListStyles_unstable, useMenuList_unstable } from './MenuList';
|
|
13
|
-
export { MenuPopover, menuPopoverClassNames, renderMenuPopover_unstable, useMenuPopoverStyles_unstable, useMenuPopover_unstable } from './MenuPopover';
|
|
9
|
+
export { MenuItem, menuItemClassNames, renderMenuItem_unstable, useMenuItemBase_unstable, useMenuItemStyles_unstable, useMenuItem_unstable } from './MenuItem';
|
|
10
|
+
export { MenuItemCheckbox, menuItemCheckboxClassNames, renderMenuItemCheckbox_unstable, useMenuItemCheckboxBase_unstable, useMenuItemCheckboxStyles_unstable, useMenuItemCheckbox_unstable } from './MenuItemCheckbox';
|
|
11
|
+
export { MenuItemRadio, menuItemRadioClassNames, renderMenuItemRadio_unstable, useMenuItemRadioBase_unstable, useMenuItemRadioStyles_unstable, useMenuItemRadio_unstable } from './MenuItemRadio';
|
|
12
|
+
export { MenuList, menuListClassNames, renderMenuList_unstable, useMenuListBase_unstable, useMenuListContextValues_unstable, useMenuListStyles_unstable, useMenuList_unstable } from './MenuList';
|
|
13
|
+
export { MenuPopover, menuPopoverClassNames, renderMenuPopover_unstable, useMenuPopoverBase_unstable, useMenuPopoverStyles_unstable, useMenuPopover_unstable } from './MenuPopover';
|
|
14
14
|
export { MenuSplitGroup, menuSplitGroupClassNames, renderMenuSplitGroup_unstable, useMenuSplitGroupStyles_unstable, useMenuSplitGroup_unstable } from './MenuSplitGroup';
|
|
15
|
-
export { MenuTrigger, renderMenuTrigger_unstable, useMenuTrigger_unstable } from './MenuTrigger';
|
|
15
|
+
export { MenuTrigger, renderMenuTrigger_unstable, useMenuTrigger_unstable, useMenuTriggerBase_unstable } from './MenuTrigger';
|
|
16
16
|
export { useCheckmarkStyles_unstable } from './selectable/index';
|
|
17
|
-
export { MenuItemLink, menuItemLinkClassNames, renderMenuItemLink_unstable, useMenuItemLinkStyles_unstable, useMenuItemLink_unstable } from './MenuItemLink';
|
|
17
|
+
export { MenuItemLink, menuItemLinkClassNames, renderMenuItemLink_unstable, useMenuItemLinkBase_unstable, useMenuItemLinkStyles_unstable, useMenuItemLink_unstable } from './MenuItemLink';
|
|
18
18
|
export { MENU_ENTER_EVENT, dispatchMenuEnterEvent, useOnMenuMouseEnter } from './utils';
|
|
19
|
-
export { MenuItemSwitch,
|
|
20
|
-
// Experimental: Base hooks - will be enabled in the experimental release branch
|
|
21
|
-
// export { useMenuItemBase_unstable } from './MenuItem';
|
|
22
|
-
// export { useMenuItemCheckboxBase_unstable } from './MenuItemCheckbox';
|
|
23
|
-
// export { useMenuItemRadioBase_unstable } from './MenuItemRadio';
|
|
24
|
-
// export { useMenuItemSwitchBase_unstable } from './MenuItemSwitch';
|
|
19
|
+
export { MenuItemSwitch, menuItemSwitchClassNames, renderMenuItemSwitch_unstable, useMenuItemSwitchBase_unstable, useMenuItemSwitchStyles_unstable, useMenuItemSwitch_unstable } from './MenuItemSwitch';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { MenuProvider, useMenuContext_unstable } from './contexts/menuContext';\nexport type { MenuContextValue } from './contexts/menuContext';\nexport { MenuTriggerContextProvider, useMenuTriggerContext_unstable } from './contexts/menuTriggerContext';\nexport { MenuGroupContextProvider, useMenuGroupContext_unstable } from './contexts/menuGroupContext';\nexport type { MenuGroupContextValue } from './contexts/menuGroupContext';\nexport { MenuListProvider, useMenuListContext_unstable } from './contexts/menuListContext';\nexport type { MenuListContextValue } from './contexts/menuListContext';\n\nexport {
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { MenuProvider, useMenuContext_unstable } from './contexts/menuContext';\nexport type { MenuContextValue } from './contexts/menuContext';\nexport { MenuTriggerContextProvider, useMenuTriggerContext_unstable } from './contexts/menuTriggerContext';\nexport { MenuGroupContextProvider, useMenuGroupContext_unstable } from './contexts/menuGroupContext';\nexport type { MenuGroupContextValue } from './contexts/menuGroupContext';\nexport { MenuListProvider, useMenuListContext_unstable } from './contexts/menuListContext';\nexport type { MenuListContextValue } from './contexts/menuListContext';\n\nexport {\n Menu,\n renderMenu_unstable,\n useMenuBase_unstable,\n useMenuContextValues_unstable,\n useMenu_unstable,\n} from './Menu';\nexport type {\n MenuBaseProps,\n MenuBaseState,\n MenuContextValues,\n MenuOpenChangeData,\n MenuOpenEvent,\n // MenuOpenEvents is deprecated but removing it would be a breaking change\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n MenuOpenEvents,\n MenuProps,\n MenuSlots,\n MenuState,\n} from './Menu';\nexport {\n MenuDivider,\n menuDividerClassNames,\n renderMenuDivider_unstable,\n useMenuDividerStyles_unstable,\n useMenuDivider_unstable,\n} from './MenuDivider';\nexport type { MenuDividerProps, MenuDividerSlots, MenuDividerState } from './MenuDivider';\nexport {\n MenuGroup,\n menuGroupClassNames,\n renderMenuGroup_unstable,\n useMenuGroupContextValues_unstable,\n useMenuGroupStyles_unstable,\n useMenuGroup_unstable,\n} from './MenuGroup';\nexport type { MenuGroupContextValues, MenuGroupProps, MenuGroupSlots, MenuGroupState } from './MenuGroup';\nexport {\n MenuGroupHeader,\n menuGroupHeaderClassNames,\n renderMenuGroupHeader_unstable,\n useMenuGroupHeaderStyles_unstable,\n useMenuGroupHeader_unstable,\n} from './MenuGroupHeader';\nexport type { MenuGroupHeaderProps, MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader';\nexport {\n MenuItem,\n menuItemClassNames,\n renderMenuItem_unstable,\n useMenuItemBase_unstable,\n useMenuItemStyles_unstable,\n useMenuItem_unstable,\n} from './MenuItem';\nexport type { MenuItemProps, MenuItemSlots, MenuItemState } from './MenuItem';\nexport {\n MenuItemCheckbox,\n menuItemCheckboxClassNames,\n renderMenuItemCheckbox_unstable,\n useMenuItemCheckboxBase_unstable,\n useMenuItemCheckboxStyles_unstable,\n useMenuItemCheckbox_unstable,\n} from './MenuItemCheckbox';\nexport type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox';\nexport {\n MenuItemRadio,\n menuItemRadioClassNames,\n renderMenuItemRadio_unstable,\n useMenuItemRadioBase_unstable,\n useMenuItemRadioStyles_unstable,\n useMenuItemRadio_unstable,\n} from './MenuItemRadio';\nexport type {\n MenuItemRadioBaseProps,\n MenuItemRadioBaseState,\n MenuItemRadioProps,\n MenuItemRadioState,\n} from './MenuItemRadio';\nexport {\n MenuList,\n menuListClassNames,\n renderMenuList_unstable,\n useMenuListBase_unstable,\n useMenuListContextValues_unstable,\n useMenuListStyles_unstable,\n useMenuList_unstable,\n} from './MenuList';\nexport type {\n MenuCheckedValueChangeData,\n MenuCheckedValueChangeEvent,\n MenuListContextValues,\n MenuListProps,\n MenuListSlots,\n MenuListState,\n // UninitializedMenuListState is deprecated but removing it would be a breaking change\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n UninitializedMenuListState,\n} from './MenuList';\nexport {\n MenuPopover,\n menuPopoverClassNames,\n renderMenuPopover_unstable,\n useMenuPopoverBase_unstable,\n useMenuPopoverStyles_unstable,\n useMenuPopover_unstable,\n} from './MenuPopover';\nexport type { MenuPopoverProps, MenuPopoverSlots, MenuPopoverState } from './MenuPopover';\nexport {\n MenuSplitGroup,\n menuSplitGroupClassNames,\n renderMenuSplitGroup_unstable,\n useMenuSplitGroupStyles_unstable,\n useMenuSplitGroup_unstable,\n} from './MenuSplitGroup';\nexport type { MenuSplitGroupProps, MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup';\nexport {\n MenuTrigger,\n renderMenuTrigger_unstable,\n useMenuTrigger_unstable,\n useMenuTriggerBase_unstable,\n} from './MenuTrigger';\nexport type { MenuTriggerChildProps, MenuTriggerProps, MenuTriggerState, MenuTriggerBaseProps } from './MenuTrigger';\n\nexport { useCheckmarkStyles_unstable } from './selectable/index';\nexport type { MenuItemSelectableProps, MenuItemSelectableState, SelectableHandler } from './selectable/index';\n\nexport {\n MenuItemLink,\n menuItemLinkClassNames,\n renderMenuItemLink_unstable,\n useMenuItemLinkBase_unstable,\n useMenuItemLinkStyles_unstable,\n useMenuItemLink_unstable,\n} from './MenuItemLink';\nexport type { MenuItemLinkProps, MenuItemLinkSlots, MenuItemLinkState } from './MenuItemLink';\n\nexport { MENU_ENTER_EVENT, dispatchMenuEnterEvent, useOnMenuMouseEnter } from './utils';\nexport {\n MenuItemSwitch,\n menuItemSwitchClassNames,\n renderMenuItemSwitch_unstable,\n useMenuItemSwitchBase_unstable,\n useMenuItemSwitchStyles_unstable,\n useMenuItemSwitch_unstable,\n} from './MenuItemSwitch';\n\nexport type { MenuItemSwitchProps, MenuItemSwitchSlots, MenuItemSwitchState } from './MenuItemSwitch';\n"],"names":["MenuProvider","useMenuContext_unstable","MenuTriggerContextProvider","useMenuTriggerContext_unstable","MenuGroupContextProvider","useMenuGroupContext_unstable","MenuListProvider","useMenuListContext_unstable","Menu","renderMenu_unstable","useMenuBase_unstable","useMenuContextValues_unstable","useMenu_unstable","MenuDivider","menuDividerClassNames","renderMenuDivider_unstable","useMenuDividerStyles_unstable","useMenuDivider_unstable","MenuGroup","menuGroupClassNames","renderMenuGroup_unstable","useMenuGroupContextValues_unstable","useMenuGroupStyles_unstable","useMenuGroup_unstable","MenuGroupHeader","menuGroupHeaderClassNames","renderMenuGroupHeader_unstable","useMenuGroupHeaderStyles_unstable","useMenuGroupHeader_unstable","MenuItem","menuItemClassNames","renderMenuItem_unstable","useMenuItemBase_unstable","useMenuItemStyles_unstable","useMenuItem_unstable","MenuItemCheckbox","menuItemCheckboxClassNames","renderMenuItemCheckbox_unstable","useMenuItemCheckboxBase_unstable","useMenuItemCheckboxStyles_unstable","useMenuItemCheckbox_unstable","MenuItemRadio","menuItemRadioClassNames","renderMenuItemRadio_unstable","useMenuItemRadioBase_unstable","useMenuItemRadioStyles_unstable","useMenuItemRadio_unstable","MenuList","menuListClassNames","renderMenuList_unstable","useMenuListBase_unstable","useMenuListContextValues_unstable","useMenuListStyles_unstable","useMenuList_unstable","MenuPopover","menuPopoverClassNames","renderMenuPopover_unstable","useMenuPopoverBase_unstable","useMenuPopoverStyles_unstable","useMenuPopover_unstable","MenuSplitGroup","menuSplitGroupClassNames","renderMenuSplitGroup_unstable","useMenuSplitGroupStyles_unstable","useMenuSplitGroup_unstable","MenuTrigger","renderMenuTrigger_unstable","useMenuTrigger_unstable","useMenuTriggerBase_unstable","useCheckmarkStyles_unstable","MenuItemLink","menuItemLinkClassNames","renderMenuItemLink_unstable","useMenuItemLinkBase_unstable","useMenuItemLinkStyles_unstable","useMenuItemLink_unstable","MENU_ENTER_EVENT","dispatchMenuEnterEvent","useOnMenuMouseEnter","MenuItemSwitch","menuItemSwitchClassNames","renderMenuItemSwitch_unstable","useMenuItemSwitchBase_unstable","useMenuItemSwitchStyles_unstable","useMenuItemSwitch_unstable"],"mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAQ,yBAAyB;AAE/E,SAASC,0BAA0B,EAAEC,8BAA8B,QAAQ,gCAAgC;AAC3G,SAASC,wBAAwB,EAAEC,4BAA4B,QAAQ,8BAA8B;AAErG,SAASC,gBAAgB,EAAEC,2BAA2B,QAAQ,6BAA6B;AAG3F,SACEC,IAAI,EACJC,mBAAmB,EACnBC,oBAAoB,EACpBC,6BAA6B,EAC7BC,gBAAgB,QACX,SAAS;AAchB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,kCAAkC,EAClCC,2BAA2B,EAC3BC,qBAAqB,QAChB,cAAc;AAErB,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,QACtB,oBAAoB;AAE3B,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,wBAAwB,EACxBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AAEpB,SACEC,gBAAgB,EAChBC,0BAA0B,EAC1BC,+BAA+B,EAC/BC,gCAAgC,EAChCC,kCAAkC,EAClCC,4BAA4B,QACvB,qBAAqB;AAE5B,SACEC,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,6BAA6B,EAC7BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAOzB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,wBAAwB,EACxBC,iCAAiC,EACjCC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AAYpB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,uBAAuB,EACvBC,2BAA2B,QACtB,gBAAgB;AAGvB,SAASC,2BAA2B,QAAQ,qBAAqB;AAGjE,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SAASC,gBAAgB,EAAEC,sBAAsB,EAAEC,mBAAmB,QAAQ,UAAU;AACxF,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,8BAA8B,EAC9BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB"}
|
package/lib/selectable/types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/selectable/types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type SelectableHandler = (\n e: React.MouseEvent | React.KeyboardEvent,\n name: string,\n value: string,\n checked: boolean,\n) => void;\n\n/**\n * Props for selecatble menu items\n */\nexport type MenuItemSelectableProps = {\n /**\n * Follows input convention\n * https://www.w3schools.com/jsref/prop_checkbox_name.asp\n */\n name: string;\n\n /**\n * Follows input convention\n * https://www.w3schools.com/jsref/prop_checkbox_value.asp\n */\n value: string;\n};\n\n/**\n * State for selectable menu items\n */\nexport type MenuItemSelectableState = MenuItemSelectableProps & {\n /**\n * Selectable is checked\n */\n checked: boolean;\n};\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/selectable/types.ts"],"sourcesContent":["import type * as React from 'react';\n\nexport type SelectableHandler = (\n e: React.MouseEvent | React.KeyboardEvent,\n name: string,\n value: string,\n checked: boolean,\n) => void;\n\n/**\n * Props for selecatble menu items\n */\nexport type MenuItemSelectableProps = {\n /**\n * Follows input convention\n * https://www.w3schools.com/jsref/prop_checkbox_name.asp\n */\n name: string;\n\n /**\n * Follows input convention\n * https://www.w3schools.com/jsref/prop_checkbox_value.asp\n */\n value: string;\n};\n\n/**\n * State for selectable menu items\n */\nexport type MenuItemSelectableState = MenuItemSelectableProps & {\n /**\n * Selectable is checked\n */\n checked: boolean;\n};\n"],"names":[],"mappings":"AA0BA;;CAEC,GACD,WAKE"}
|
|
@@ -25,6 +25,7 @@ export const useCheckmarkStyles_unstable = state => {
|
|
|
25
25
|
|
|
26
26
|
const styles = useStyles();
|
|
27
27
|
if (state.checkmark) {
|
|
28
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
28
29
|
state.checkmark.className = mergeClasses(styles.root, state.checked && styles.rootChecked, state.checkmark.className);
|
|
29
30
|
}
|
|
30
31
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["mergeClasses","__styles","useStyles","root","a9b677","Bqenvij","Bcdw1i0","Bnnss6s","rootChecked","d","useCheckmarkStyles_unstable","state","styles","checkmark","className","checked"],"sources":["useCheckmarkStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nconst useStyles = makeStyles({\n root: {\n width: '16px',\n height: '16px',\n visibility: 'hidden',\n flexShrink: 0\n },\n rootChecked: {\n visibility: 'visible',\n flexShrink: 0\n }\n});\n/**\n * Applies styles to a checkmark slot for selectable menu items\n *\n * @param state - should contain a `checkmark` slot\n */ export const useCheckmarkStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(styles.root, state.checked && styles.rootChecked, state.checkmark.className);\n }\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,MAAMC,SAAS,gBAAGD,QAAA;EAAAE,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,WAAA;IAAAF,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAWjB,CAAC;AACF;AACA;AACA;AACA;AACA;AAAI,OAAO,MAAMC,2BAA2B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACb,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;EAC1B,IAAIS,KAAK,CAACE,SAAS,EAAE;
|
|
1
|
+
{"version":3,"names":["mergeClasses","__styles","useStyles","root","a9b677","Bqenvij","Bcdw1i0","Bnnss6s","rootChecked","d","useCheckmarkStyles_unstable","state","styles","checkmark","className","checked"],"sources":["useCheckmarkStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nconst useStyles = makeStyles({\n root: {\n width: '16px',\n height: '16px',\n visibility: 'hidden',\n flexShrink: 0\n },\n rootChecked: {\n visibility: 'visible',\n flexShrink: 0\n }\n});\n/**\n * Applies styles to a checkmark slot for selectable menu items\n *\n * @param state - should contain a `checkmark` slot\n */ export const useCheckmarkStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n if (state.checkmark) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkmark.className = mergeClasses(styles.root, state.checked && styles.rootChecked, state.checkmark.className);\n }\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,MAAMC,SAAS,gBAAGD,QAAA;EAAAE,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,WAAA;IAAAF,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAWjB,CAAC;AACF;AACA;AACA;AACA;AACA;AAAI,OAAO,MAAMC,2BAA2B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACb,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;EAC1B,IAAIS,KAAK,CAACE,SAAS,EAAE;IACjB;IACAF,KAAK,CAACE,SAAS,CAACC,SAAS,GAAGd,YAAY,CAACY,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACI,OAAO,IAAIH,MAAM,CAACJ,WAAW,EAAEG,KAAK,CAACE,SAAS,CAACC,SAAS,CAAC;EACzH;AACJ,CAAC","ignoreList":[]}
|
|
@@ -20,6 +20,7 @@ const useStyles = makeStyles({
|
|
|
20
20
|
'use no memo';
|
|
21
21
|
const styles = useStyles();
|
|
22
22
|
if (state.checkmark) {
|
|
23
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
23
24
|
state.checkmark.className = mergeClasses(styles.root, state.checked && styles.rootChecked, state.checkmark.className);
|
|
24
25
|
}
|
|
25
26
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/selectable/useCheckmarkStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuItemSelectableState } from './types';\nimport type { MenuItemState } from '../components/MenuItem/MenuItem.types';\n\nconst useStyles = makeStyles({\n root: {\n width: '16px',\n height: '16px',\n visibility: 'hidden',\n flexShrink: 0,\n },\n rootChecked: {\n visibility: 'visible',\n flexShrink: 0,\n },\n});\n\n/**\n * Applies styles to a checkmark slot for selectable menu items\n *\n * @param state - should contain a `checkmark` slot\n */\nexport const useCheckmarkStyles_unstable = (\n state: MenuItemSelectableState & Pick<MenuItemState, 'checkmark'>,\n): void => {\n 'use no memo';\n\n const styles = useStyles();\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(\n styles.root,\n state.checked && styles.rootChecked,\n state.checkmark.className,\n );\n }\n};\n"],"names":["mergeClasses","makeStyles","useStyles","root","width","height","visibility","flexShrink","rootChecked","useCheckmarkStyles_unstable","state","styles","checkmark","className","checked"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAI1D,MAAMC,YAAYD,WAAW;IAC3BE,MAAM;QACJC,OAAO;QACPC,QAAQ;QACRC,YAAY;QACZC,YAAY;IACd;IACAC,aAAa;QACXF,YAAY;QACZC,YAAY;IACd;AACF;AAEA;;;;CAIC,GACD,OAAO,MAAME,8BAA8B,CACzCC;IAEA;IAEA,MAAMC,SAAST;IACf,IAAIQ,MAAME,SAAS,EAAE;
|
|
1
|
+
{"version":3,"sources":["../src/selectable/useCheckmarkStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuItemSelectableState } from './types';\nimport type { MenuItemState } from '../components/MenuItem/MenuItem.types';\n\nconst useStyles = makeStyles({\n root: {\n width: '16px',\n height: '16px',\n visibility: 'hidden',\n flexShrink: 0,\n },\n rootChecked: {\n visibility: 'visible',\n flexShrink: 0,\n },\n});\n\n/**\n * Applies styles to a checkmark slot for selectable menu items\n *\n * @param state - should contain a `checkmark` slot\n */\nexport const useCheckmarkStyles_unstable = (\n state: MenuItemSelectableState & Pick<MenuItemState, 'checkmark'>,\n): void => {\n 'use no memo';\n\n const styles = useStyles();\n if (state.checkmark) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkmark.className = mergeClasses(\n styles.root,\n state.checked && styles.rootChecked,\n state.checkmark.className,\n );\n }\n};\n"],"names":["mergeClasses","makeStyles","useStyles","root","width","height","visibility","flexShrink","rootChecked","useCheckmarkStyles_unstable","state","styles","checkmark","className","checked"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAI1D,MAAMC,YAAYD,WAAW;IAC3BE,MAAM;QACJC,OAAO;QACPC,QAAQ;QACRC,YAAY;QACZC,YAAY;IACd;IACAC,aAAa;QACXF,YAAY;QACZC,YAAY;IACd;AACF;AAEA;;;;CAIC,GACD,OAAO,MAAME,8BAA8B,CACzCC;IAEA;IAEA,MAAMC,SAAST;IACf,IAAIQ,MAAME,SAAS,EAAE;QACnB,oDAAoD;QACpDF,MAAME,SAAS,CAACC,SAAS,GAAGb,aAC1BW,OAAOR,IAAI,EACXO,MAAMI,OAAO,IAAIH,OAAOH,WAAW,EACnCE,MAAME,SAAS,CAACC,SAAS;IAE7B;AACF,EAAE"}
|
package/lib-commonjs/Menu.js
CHANGED
|
@@ -15,6 +15,9 @@ _export(exports, {
|
|
|
15
15
|
renderMenu_unstable: function() {
|
|
16
16
|
return _index.renderMenu_unstable;
|
|
17
17
|
},
|
|
18
|
+
useMenuBase_unstable: function() {
|
|
19
|
+
return _index.useMenuBase_unstable;
|
|
20
|
+
},
|
|
18
21
|
useMenuContextValues_unstable: function() {
|
|
19
22
|
return _index.useMenuContextValues_unstable;
|
|
20
23
|
},
|
package/lib-commonjs/Menu.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Menu.ts"],"sourcesContent":["export type {\n MenuContextValues,\n MenuOpenChangeData,\n MenuOpenEvent,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n MenuOpenEvents,\n MenuProps,\n MenuSlots,\n MenuState,\n} from './components/Menu/index';\nexport {
|
|
1
|
+
{"version":3,"sources":["../src/Menu.ts"],"sourcesContent":["export type {\n MenuBaseProps,\n MenuBaseState,\n MenuContextValues,\n MenuOpenChangeData,\n MenuOpenEvent,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n MenuOpenEvents,\n MenuProps,\n MenuSlots,\n MenuState,\n} from './components/Menu/index';\nexport {\n Menu,\n renderMenu_unstable,\n useMenuContextValues_unstable,\n useMenuBase_unstable,\n useMenu_unstable,\n} from './components/Menu/index';\n"],"names":["Menu","renderMenu_unstable","useMenuContextValues_unstable","useMenuBase_unstable","useMenu_unstable"],"mappings":";;;;;;;;;;;;eAaEA,WAAI;;;eACJC,0BAAmB;;;eAEnBE,2BAAoB;;;eADpBD,oCAA6B;;;eAE7BE,uBAAgB;;;uBACX,0BAA0B"}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
renderMenuItemLink_unstable: function() {
|
|
19
19
|
return _index.renderMenuItemLink_unstable;
|
|
20
20
|
},
|
|
21
|
+
useMenuItemLinkBase_unstable: function() {
|
|
22
|
+
return _index.useMenuItemLinkBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useMenuItemLinkStyles_unstable: function() {
|
|
22
25
|
return _index.useMenuItemLinkStyles_unstable;
|
|
23
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/MenuItemLink.ts"],"sourcesContent":["export type { MenuItemLinkProps, MenuItemLinkSlots, MenuItemLinkState } from './components/MenuItemLink/index';\nexport {\n MenuItemLink,\n menuItemLinkClassNames,\n renderMenuItemLink_unstable,\n useMenuItemLinkStyles_unstable,\n useMenuItemLink_unstable,\n} from './components/MenuItemLink/index';\n"],"names":["MenuItemLink","menuItemLinkClassNames","renderMenuItemLink_unstable","useMenuItemLinkStyles_unstable","useMenuItemLink_unstable"],"mappings":";;;;;;;;;;;;eAEEA,mBAAY;;;eACZC,6BAAsB;;;eACtBC,kCAA2B;;;eAC3BC,qCAA8B;;;eAC9BC,+BAAwB;;;uBACnB,kCAAkC"}
|
|
1
|
+
{"version":3,"sources":["../src/MenuItemLink.ts"],"sourcesContent":["export type { MenuItemLinkProps, MenuItemLinkSlots, MenuItemLinkState } from './components/MenuItemLink/index';\nexport {\n MenuItemLink,\n menuItemLinkClassNames,\n renderMenuItemLink_unstable,\n useMenuItemLinkBase_unstable,\n useMenuItemLinkStyles_unstable,\n useMenuItemLink_unstable,\n} from './components/MenuItemLink/index';\n"],"names":["MenuItemLink","menuItemLinkClassNames","renderMenuItemLink_unstable","useMenuItemLinkBase_unstable","useMenuItemLinkStyles_unstable","useMenuItemLink_unstable"],"mappings":";;;;;;;;;;;;eAEEA,mBAAY;;;eACZC,6BAAsB;;;eACtBC,kCAA2B;;;eAC3BC,mCAA4B;;;eAC5BC,qCAA8B;;;eAC9BC,+BAAwB;;;uBACnB,kCAAkC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/MenuItemRadio.ts"],"sourcesContent":["export type {
|
|
1
|
+
{"version":3,"sources":["../src/MenuItemRadio.ts"],"sourcesContent":["export type {\n MenuItemRadioBaseProps,\n MenuItemRadioBaseState,\n MenuItemRadioProps,\n MenuItemRadioState,\n} from './components/MenuItemRadio/index';\nexport {\n MenuItemRadio,\n menuItemRadioClassNames,\n renderMenuItemRadio_unstable,\n useMenuItemRadioBase_unstable,\n useMenuItemRadioStyles_unstable,\n useMenuItemRadio_unstable,\n} from './components/MenuItemRadio/index';\n"],"names":["MenuItemRadio","menuItemRadioClassNames","renderMenuItemRadio_unstable","useMenuItemRadioBase_unstable","useMenuItemRadioStyles_unstable","useMenuItemRadio_unstable"],"mappings":";;;;;;;;;;;;eAOEA,oBAAa;;;eACbC,8BAAuB;;;eACvBC,mCAA4B;;;eAC5BC,oCAA6B;;;eAC7BC,sCAA+B;;;eAC/BC,gCAAyB;;;uBACpB,mCAAmC"}
|
package/lib-commonjs/MenuList.js
CHANGED
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
renderMenuList_unstable: function() {
|
|
19
19
|
return _index.renderMenuList_unstable;
|
|
20
20
|
},
|
|
21
|
+
useMenuListBase_unstable: function() {
|
|
22
|
+
return _index.useMenuListBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useMenuListContextValues_unstable: function() {
|
|
22
25
|
return _index.useMenuListContextValues_unstable;
|
|
23
26
|
},
|