@fluentui/react-menu 9.24.1 → 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 +36 -11
- package/dist/index.d.ts +125 -3
- 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.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/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/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 -0
- 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/index.js +1 -1
- package/lib/components/MenuItemLink/index.js.map +1 -1
- package/lib/components/MenuItemLink/useMenuItemLink.js +30 -0
- 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/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/index.js +1 -1
- package/lib/components/MenuList/index.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/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/index.js +1 -1
- package/lib/components/MenuPopover/index.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/useMenuSplitGroup.js +2 -1
- package/lib/components/MenuSplitGroup/useMenuSplitGroup.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.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/index.js +9 -14
- package/lib/index.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.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/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/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 -0
- 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/index.js +3 -0
- package/lib-commonjs/components/MenuItemLink/index.js.map +1 -1
- package/lib-commonjs/components/MenuItemLink/useMenuItemLink.js +35 -3
- 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/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/index.js +3 -0
- package/lib-commonjs/components/MenuList/index.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/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/index.js +3 -0
- package/lib-commonjs/components/MenuPopover/index.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/useMenuSplitGroup.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.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/index.js +27 -5
- package/lib-commonjs/index.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
|
@@ -3,9 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
function _export(target, all) {
|
|
7
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: all[name]
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
_export(exports, {
|
|
13
|
+
useMenuPopoverBase_unstable: function() {
|
|
14
|
+
return useMenuPopoverBase_unstable;
|
|
15
|
+
},
|
|
16
|
+
useMenuPopover_unstable: function() {
|
|
9
17
|
return useMenuPopover_unstable;
|
|
10
18
|
}
|
|
11
19
|
});
|
|
@@ -19,7 +27,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
|
19
27
|
const _menuContext = require("../../contexts/menuContext");
|
|
20
28
|
const _menuListContext = require("../../contexts/menuListContext");
|
|
21
29
|
const _index = require("../../utils/index");
|
|
22
|
-
const
|
|
30
|
+
const useMenuPopoverBase_unstable = (props, ref)=>{
|
|
23
31
|
'use no memo';
|
|
24
32
|
const safeZone = (0, _menuContext.useMenuContext_unstable)((context)=>context.safeZone);
|
|
25
33
|
const popoverRef = (0, _menuContext.useMenuContext_unstable)((context)=>context.menuPopoverRef);
|
|
@@ -33,7 +41,6 @@ const useMenuPopover_unstable = (props, ref)=>{
|
|
|
33
41
|
return (_ctx_shouldCloseOnArrowLeft = ctx.shouldCloseOnArrowLeft) !== null && _ctx_shouldCloseOnArrowLeft !== void 0 ? _ctx_shouldCloseOnArrowLeft : true;
|
|
34
42
|
});
|
|
35
43
|
const canDispatchCustomEventRef = _react.useRef(true);
|
|
36
|
-
const restoreFocusSourceAttributes = (0, _reacttabster.useRestoreFocusSource)();
|
|
37
44
|
const [setThrottleTimeout, clearThrottleTimeout] = (0, _reactutilities.useTimeout)();
|
|
38
45
|
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
39
46
|
const CloseArrowKey = dir === 'ltr' ? _keyboardkeys.ArrowLeft : _keyboardkeys.ArrowRight;
|
|
@@ -68,12 +75,11 @@ const useMenuPopover_unstable = (props, ref)=>{
|
|
|
68
75
|
const mountNode = (0, _menuContext.useMenuContext_unstable)((context)=>context.mountNode);
|
|
69
76
|
const rootProps = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
70
77
|
role: 'presentation',
|
|
71
|
-
...restoreFocusSourceAttributes,
|
|
72
78
|
...props,
|
|
73
79
|
// FIXME:
|
|
74
80
|
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
75
81
|
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
76
|
-
ref: (0, _reactutilities.useMergedRefs)(ref, popoverRef, mouseOverListenerCallbackRef
|
|
82
|
+
ref: (0, _reactutilities.useMergedRefs)(ref, popoverRef, mouseOverListenerCallbackRef)
|
|
77
83
|
}), {
|
|
78
84
|
elementType: 'div'
|
|
79
85
|
});
|
|
@@ -129,3 +135,16 @@ const useMenuPopover_unstable = (props, ref)=>{
|
|
|
129
135
|
root: rootProps
|
|
130
136
|
};
|
|
131
137
|
};
|
|
138
|
+
const useMenuPopover_unstable = (props, ref)=>{
|
|
139
|
+
const restoreFocusSourceAttributes = (0, _reacttabster.useRestoreFocusSource)();
|
|
140
|
+
const motionRef = (0, _reactmotion.useMotionForwardedRef)();
|
|
141
|
+
const baseState = useMenuPopoverBase_unstable(props, ref);
|
|
142
|
+
return {
|
|
143
|
+
...baseState,
|
|
144
|
+
root: {
|
|
145
|
+
...restoreFocusSourceAttributes,
|
|
146
|
+
...baseState.root,
|
|
147
|
+
ref: (0, _reactutilities.useMergedRefs)(baseState.root.ref, motionRef)
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuPopover/useMenuPopover.ts"],"sourcesContent":["'use client';\n\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot, useTimeout } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { dispatchMenuEnterEvent, useIsSubmenu } from '../../utils/index';\nimport type { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n 'use no memo';\n\n const safeZone = useMenuContext_unstable(context => context.safeZone);\n const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n const open = useMenuContext_unstable(context => context.open);\n const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n\n const isSubmenu = useIsSubmenu();\n const shouldCloseOnArrowLeft = useMenuListContext_unstable(ctx => ctx.shouldCloseOnArrowLeft ?? true);\n\n const canDispatchCustomEventRef = React.useRef(true);\n const restoreFocusSourceAttributes = useRestoreFocusSource();\n const [setThrottleTimeout, clearThrottleTimeout] = useTimeout();\n\n const { dir } = useFluent();\n const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n // use DOM listener since react events propagate up the react tree\n // no need to do `contains` logic as menus are all positioned in different portals\n const mouseOverListenerCallbackRef = React.useCallback(\n (node: HTMLElement) => {\n if (node) {\n // Dispatches the custom menu mouse enter event with throttling\n // Needs to trigger on mouseover to support keyboard + mouse together\n // i.e. keyboard opens submenus while cursor is still on the parent\n node.addEventListener('mouseover', e => {\n if (canDispatchCustomEventRef.current) {\n canDispatchCustomEventRef.current = false;\n dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n setThrottleTimeout(() => {\n canDispatchCustomEventRef.current = true;\n }, 250);\n }\n });\n }\n },\n [popoverRef, setThrottleTimeout],\n );\n\n React.useEffect(() => {\n return () => clearThrottleTimeout();\n }, [clearThrottleTimeout]);\n\n const inline = useMenuContext_unstable(context => context.inline) ?? false;\n const mountNode = useMenuContext_unstable(context => context.mountNode);\n\n const rootProps = slot.always(\n getIntrinsicElementProps('div', {\n role: 'presentation',\n ...restoreFocusSourceAttributes,\n ...props,\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(\n ref,\n popoverRef,\n mouseOverListenerCallbackRef,\n useMotionForwardedRef(),\n ) as React.Ref<HTMLDivElement>,\n }),\n { elementType: 'div' },\n );\n const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover || isSubmenu) {\n setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n }\n onMouseEnterOriginal?.(event);\n });\n rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n const key = event.key;\n if (key === Escape || (isSubmenu && shouldCloseOnArrowLeft && key === CloseArrowKey)) {\n if (open && popoverRef.current?.contains(event.target as HTMLElement) && !event.isDefaultPrevented()) {\n setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover, Menu and Tooltip\n event.preventDefault();\n }\n }\n if (key === Tab) {\n setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n if (!isSubmenu) {\n triggerRef.current?.focus();\n }\n }\n onKeyDownOriginal?.(event);\n });\n\n return {\n inline,\n mountNode,\n safeZone,\n components: { root: 'div' },\n root: rootProps,\n };\n};\n"],"names":["ArrowLeft","Tab","ArrowRight","Escape","useFluent_unstable","useFluent","useMotionForwardedRef","useRestoreFocusSource","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useTimeout","React","useMenuContext_unstable","useMenuListContext_unstable","dispatchMenuEnterEvent","useIsSubmenu","useMenuPopover_unstable","props","ref","safeZone","context","popoverRef","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","shouldCloseOnArrowLeft","ctx","canDispatchCustomEventRef","useRef","restoreFocusSourceAttributes","setThrottleTimeout","clearThrottleTimeout","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","useEffect","inline","mountNode","rootProps","always","role","elementType","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","isDefaultPrevented","preventDefault","focus","components","root"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuPopover/useMenuPopover.ts"],"sourcesContent":["'use client';\n\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot, useTimeout } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { dispatchMenuEnterEvent, useIsSubmenu } from '../../utils/index';\nimport type { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\n\n/**\n * Base hook for MenuPopover, produces state required to render the component.\n *\n * Does not invoke `@fluentui/react-tabster` focus-restoration or\n * `@fluentui/react-motion` ref-forwarding APIs internally; the wrapper\n * `useMenuPopover_unstable` layers those on top.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopoverBase_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n 'use no memo';\n\n const safeZone = useMenuContext_unstable(context => context.safeZone);\n const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n const open = useMenuContext_unstable(context => context.open);\n const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n\n const isSubmenu = useIsSubmenu();\n const shouldCloseOnArrowLeft = useMenuListContext_unstable(ctx => ctx.shouldCloseOnArrowLeft ?? true);\n\n const canDispatchCustomEventRef = React.useRef(true);\n const [setThrottleTimeout, clearThrottleTimeout] = useTimeout();\n\n const { dir } = useFluent();\n const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n // use DOM listener since react events propagate up the react tree\n // no need to do `contains` logic as menus are all positioned in different portals\n const mouseOverListenerCallbackRef = React.useCallback(\n (node: HTMLElement) => {\n if (node) {\n // Dispatches the custom menu mouse enter event with throttling\n // Needs to trigger on mouseover to support keyboard + mouse together\n // i.e. keyboard opens submenus while cursor is still on the parent\n node.addEventListener('mouseover', e => {\n if (canDispatchCustomEventRef.current) {\n canDispatchCustomEventRef.current = false;\n dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n setThrottleTimeout(() => {\n canDispatchCustomEventRef.current = true;\n }, 250);\n }\n });\n }\n },\n [popoverRef, setThrottleTimeout],\n );\n\n React.useEffect(() => {\n return () => clearThrottleTimeout();\n }, [clearThrottleTimeout]);\n\n const inline = useMenuContext_unstable(context => context.inline) ?? false;\n const mountNode = useMenuContext_unstable(context => context.mountNode);\n\n const rootProps = slot.always(\n getIntrinsicElementProps('div', {\n role: 'presentation',\n ...props,\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, popoverRef, mouseOverListenerCallbackRef) as React.Ref<HTMLDivElement>,\n }),\n { elementType: 'div' },\n );\n\n const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover || isSubmenu) {\n setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n }\n onMouseEnterOriginal?.(event);\n });\n\n rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n const key = event.key;\n if (key === Escape || (isSubmenu && shouldCloseOnArrowLeft && key === CloseArrowKey)) {\n if (open && popoverRef.current?.contains(event.target as HTMLElement) && !event.isDefaultPrevented()) {\n setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover, Menu and Tooltip\n event.preventDefault();\n }\n }\n if (key === Tab) {\n setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n if (!isSubmenu) {\n triggerRef.current?.focus();\n }\n }\n onKeyDownOriginal?.(event);\n });\n\n return {\n inline,\n mountNode,\n safeZone,\n components: { root: 'div' },\n root: rootProps,\n };\n};\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n const restoreFocusSourceAttributes = useRestoreFocusSource();\n const motionRef = useMotionForwardedRef();\n const baseState = useMenuPopoverBase_unstable(props, ref);\n\n return {\n ...baseState,\n root: {\n ...restoreFocusSourceAttributes,\n ...baseState.root,\n ref: useMergedRefs(baseState.root.ref, motionRef) as React.Ref<HTMLDivElement>,\n },\n };\n};\n"],"names":["ArrowLeft","Tab","ArrowRight","Escape","useFluent_unstable","useFluent","useMotionForwardedRef","useRestoreFocusSource","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useTimeout","React","useMenuContext_unstable","useMenuListContext_unstable","dispatchMenuEnterEvent","useIsSubmenu","useMenuPopoverBase_unstable","props","ref","safeZone","context","popoverRef","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","shouldCloseOnArrowLeft","ctx","canDispatchCustomEventRef","useRef","setThrottleTimeout","clearThrottleTimeout","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","useEffect","inline","mountNode","rootProps","always","role","elementType","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","isDefaultPrevented","preventDefault","focus","components","root","useMenuPopover_unstable","restoreFocusSourceAttributes","motionRef","baseState"],"mappings":"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"}
|
|
@@ -100,6 +100,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
100
100
|
const useMenuPopoverStyles_unstable = (state)=>{
|
|
101
101
|
'use no memo';
|
|
102
102
|
const styles = useStyles();
|
|
103
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
103
104
|
state.root.className = (0, _react.mergeClasses)(menuPopoverClassNames.root, styles.root, state.root.className);
|
|
104
105
|
return state;
|
|
105
106
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMenuPopoverStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const menuPopoverClassNames = {\n root: 'fui-MenuPopover'\n};\nconst useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n minWidth: '138px',\n maxWidth: '300px',\n overflowX: 'hidden',\n width: 'max-content',\n boxShadow: `${tokens.shadow16}`,\n padding: '4px',\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1\n }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuPopoverStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["mergeClasses","__styles","tokens","typographyStyles","menuPopoverClassNames","root","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","De3pzq","sj55zd","B7ck84d","Bf4jedk","B2u0y6b","B68tc82","a9b677","E5pizo","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","useMenuPopoverStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCI,qBAAqB;;;
|
|
1
|
+
{"version":3,"sources":["useMenuPopoverStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const menuPopoverClassNames = {\n root: 'fui-MenuPopover'\n};\nconst useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n minWidth: '138px',\n maxWidth: '300px',\n overflowX: 'hidden',\n width: 'max-content',\n boxShadow: `${tokens.shadow16}`,\n padding: '4px',\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1\n }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuPopoverStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["mergeClasses","__styles","tokens","typographyStyles","menuPopoverClassNames","root","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","De3pzq","sj55zd","B7ck84d","Bf4jedk","B2u0y6b","B68tc82","a9b677","E5pizo","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","useMenuPopoverStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCI,qBAAqB;;;iCAqBY;;;;uBAvBL,gBAAgB;AAElD,8BAA8B;IACjCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAejB,CAAC;AAGS,MAAMC,iCAAiCC,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAG5C,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACA2C,KAAK,CAAC5C,IAAI,CAAC8C,SAAS,OAAGnD,mBAAY,EAACI,qBAAqB,CAACC,IAAI,EAAE6C,MAAM,CAAC7C,IAAI,EAAE4C,KAAK,CAAC5C,IAAI,CAAC8C,SAAS,CAAC;IAClG,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -41,6 +41,7 @@ const useStyles = (0, _react.makeStyles)({
|
|
|
41
41
|
const useMenuPopoverStyles_unstable = (state)=>{
|
|
42
42
|
'use no memo';
|
|
43
43
|
const styles = useStyles();
|
|
44
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
44
45
|
state.root.className = (0, _react.mergeClasses)(menuPopoverClassNames.root, styles.root, state.root.className);
|
|
45
46
|
return state;
|
|
46
47
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuPopover/useMenuPopoverStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {\n root: 'fui-MenuPopover',\n};\n\nconst useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n minWidth: '138px',\n maxWidth: '300px',\n overflowX: 'hidden',\n width: 'max-content',\n boxShadow: `${tokens.shadow16}`,\n padding: '4px',\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1,\n },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","typographyStyles","menuPopoverClassNames","root","useStyles","borderRadius","borderRadiusMedium","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxSizing","minWidth","maxWidth","overflowX","width","boxShadow","shadow16","padding","border","colorTransparentStroke","body1","useMenuPopoverStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaI,qBAAAA;;;iCAwBAoB
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuPopover/useMenuPopoverStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {\n root: 'fui-MenuPopover',\n};\n\nconst useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n minWidth: '138px',\n maxWidth: '300px',\n overflowX: 'hidden',\n width: 'max-content',\n boxShadow: `${tokens.shadow16}`,\n padding: '4px',\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1,\n },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n 'use no memo';\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","typographyStyles","menuPopoverClassNames","root","useStyles","borderRadius","borderRadiusMedium","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxSizing","minWidth","maxWidth","overflowX","width","boxShadow","shadow16","padding","border","colorTransparentStroke","body1","useMenuPopoverStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaI,qBAAAA;;;iCAwBAoB;eAAAA;;;uBA7B4B,iBAAiB;4BACjB,wBAAwB;AAI1D,8BAAgE;IACrEnB,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,cAAcL,kBAAAA,CAAOM,kBAAkB;QACvCC,iBAAiBP,kBAAAA,CAAOQ,uBAAuB;QAC/CC,OAAOT,kBAAAA,CAAOU,uBAAuB;QACrCC,WAAW;QACXC,UAAU;QACVC,UAAU;QACVC,WAAW;QACXC,OAAO;QACPC,WAAW,GAAGhB,kBAAAA,CAAOiB,QAAQ,EAAE;QAC/BC,SAAS;QACTC,QAAQ,CAAC,UAAU,EAAEnB,kBAAAA,CAAOoB,sBAAsB,EAAE;QACpD,GAAGnB,4BAAAA,CAAiBoB,KAAK;IAC3B;AACF;AAKO,sCAAsC,CAACE;IAC5C;IAEA,MAAMC,SAASpB;IACf,oDAAoD;IACpDmB,MAAMpB,IAAI,CAACsB,SAAS,OAAG3B,mBAAAA,EAAaI,sBAAsBC,IAAI,EAAEqB,OAAOrB,IAAI,EAAEoB,MAAMpB,IAAI,CAACsB,SAAS;IACjG,OAAOF;AACT,EAAE"}
|
|
@@ -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;;;;;+BAmBaW;;;;;;;iEAjBU,QAAQ;gCAC8C,4BAA4B;8BACzE,0BAA0B;qCACV,kCAAkC;8BAE5C,0BAA0B;+CACpB,mCAAmC;AAWxE,mCAAmC,CACxCC,OACAC;IAEA,MAAMC,WAAWd,OAAMe,MAAM,CAAiBC;IAC9C,MAAM,EAAEC,GAAG,EAAEC,cAAc,EAAE,OAAGX,uCAAAA;IAEhC,MAAMY,mBAAejB,6BAAAA,EAAcM,wBAAAA,EAAYS;IAC/C,MAAMG,mBAAelB,6BAAAA,EAAcO,uBAAAA,EAAWQ;IAE9C,MAAM,EAAEI,iBAAiB,EAAEC,iBAAiB,EAAE,OAAGjB,6BAAAA;IACjD,MAAM,EAAEkB,YAAY,EAAEC,YAAY,EAAE,GAAGC;IAEvC,MAAMC,YAAY1B,OAAM2B,WAAW,CACjC,CAACC;YAMMd;QALL,MAAMe,gBAAgBX,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBW,aAAa;QACnD,IAAI,CAACA,eAAe;YAClB;QACF;QAEA,IAAI,CAAA,CAAA,CAACf,oBAAAA,SAASgB,OAAAA,AAAO,MAAA,QAAhBhB,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkBiB,QAAQ,CAACF,cAAAA,GAAgB;YAC9C;QACF;QAEA,IAAID,EAAEI,GAAG,KAAKb,cAAc;YAC1B,MAAMc,OAAOZ,kBAAkBQ,eAA8B;gBAAEK,WAAWpB,SAASgB,OAAO;YAAC;YAC3FG,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAME,KAAK;QACb;QAEA,IAAIP,EAAEI,GAAG,KAAKZ,cAAc;YAC1B,MAAMgB,OAAOd,kBAAkBO,eAA8B;gBAAEK,WAAWpB,SAASgB,OAAO;YAAC;YAC3FM,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAMD,KAAK;QACb;IACF,GACA;QAACd;QAAmBC;QAAmBJ;QAAgBC;QAAcC;KAAa;IAGpF,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAd;QACAc,MAAMlC,oBAAAA,CAAKmC,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;;;;;+BAmBaW;;;;;;;iEAjBU,QAAQ;gCAC8C,4BAA4B;8BACzE,0BAA0B;qCACV,kCAAkC;8BAE5C,0BAA0B;+CACpB,mCAAmC;AAWxE,mCAAmC,CACxCC,OACAC;IAEA,MAAMC,WAAWd,OAAMe,MAAM,CAAiBC;IAC9C,MAAM,EAAEC,GAAG,EAAEC,cAAc,EAAE,OAAGX,uCAAAA;IAEhC,MAAMY,mBAAejB,6BAAAA,EAAcM,wBAAAA,EAAYS;IAC/C,MAAMG,mBAAelB,6BAAAA,EAAcO,uBAAAA,EAAWQ;IAE9C,MAAM,EAAEI,iBAAiB,EAAEC,iBAAiB,EAAE,OAAGjB,6BAAAA;IACjD,MAAM,EAAEkB,YAAY,EAAEC,YAAY,EAAE,GAAGC;IAEvC,MAAMC,YAAY1B,OAAM2B,WAAW,CACjC,CAACC;YAMMd;QALL,MAAMe,gBAAgBX,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBW,aAAa;QACnD,IAAI,CAACA,eAAe;YAClB;QACF;QAEA,IAAI,CAAA,CAAA,CAACf,oBAAAA,SAASgB,OAAAA,AAAO,MAAA,QAAhBhB,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkBiB,QAAQ,CAACF,cAAAA,GAAgB;YAC9C;QACF;QAEA,IAAID,EAAEI,GAAG,KAAKb,cAAc;YAC1B,MAAMc,OAAOZ,kBAAkBQ,eAA8B;gBAAEK,WAAWpB,SAASgB,OAAO;YAAC;YAC3FG,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAME,KAAK;QACb;QAEA,IAAIP,EAAEI,GAAG,KAAKZ,cAAc;YAC1B,MAAMgB,OAAOd,kBAAkBO,eAA8B;gBAAEK,WAAWpB,SAASgB,OAAO;YAAC;YAC3FM,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAMD,KAAK;QACb;IACF,GACA;QAACd;QAAmBC;QAAmBJ;QAAgBC;QAAcC;KAAa;IAGpF,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAd;QACAc,MAAMlC,oBAAAA,CAAKmC,MAAM,CACf,IACAtC,wCAD4C,AAC5CA,EAAyB,OAAO;YAC9BuC,MAAM;YACN,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5F3B,SAAKV,6BAAAA,EAAcU,KAAKC,UAAUS;YAClCG;YACA,GAAGd,KAAK;QACV,IACA;YAAE6B,aAAa;QAAM;IAEzB;AACF,EAAE;AAEF;;;CAGC,GACD,MAAMhB,6BAA6B;IACjC,MAAM,CAACiB,OAAO,GAAG1C,OAAM2C,QAAQ,CAAC;QAC9B,IAAIC,cAAc;QAClB,IAAIC,gBAAoC;QAExC,SAASC;YACPD,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeE,eAAe,CAACrC,0DAAAA,EAA6BkC;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"}
|
|
@@ -78,6 +78,7 @@ const menuSplitGroupClassNames = {
|
|
|
78
78
|
const useMenuSplitGroupStyles_unstable = (state)=>{
|
|
79
79
|
'use no memo';
|
|
80
80
|
const styles = useStyles();
|
|
81
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
81
82
|
state.root.className = (0, _react.mergeClasses)(menuSplitGroupClassNames.root, styles.root, state.root.className);
|
|
82
83
|
return state;
|
|
83
84
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAKCK,wBAAwB;;;+BADG;;;oCAiCS;;;;uBApCR,gBAAgB;AAGlD,MAAMD,8BAA8B,gBAAgB;AACpD,iCAAiC;IACpCE,IAAI,EAAE;AACV,CAAC;AACD;;;CAGA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAuBrB,CAAC;AAGS,MAAMC,oCAAoCC,KAAK,IAAG;IACzD,aAAa;IACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAKCK,wBAAwB;;;+BADG;;;oCAiCS;;;;uBApCR,gBAAgB;AAGlD,MAAMD,8BAA8B,gBAAgB;AACpD,iCAAiC;IACpCE,IAAI,EAAE;AACV,CAAC;AACD;;;CAGA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAuBrB,CAAC;AAGS,MAAMC,oCAAoCC,KAAK,IAAG;IACzD,aAAa;IACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAiB,KAAK,CAAClB,IAAI,CAACoB,SAAS,OAAGzB,mBAAY,EAACI,wBAAwB,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;IACrG,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -57,6 +57,7 @@ const menuSplitGroupClassNames = {
|
|
|
57
57
|
const useMenuSplitGroupStyles_unstable = (state)=>{
|
|
58
58
|
'use no memo';
|
|
59
59
|
const styles = useStyles();
|
|
60
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
60
61
|
state.root.className = (0, _react.mergeClasses)(menuSplitGroupClassNames.root, styles.root, state.root.className);
|
|
61
62
|
return state;
|
|
62
63
|
};
|
|
@@ -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;;;;;;;;;;;;IAUaK,wBAAAA;;;+BAFAD;;;IAqCAgB,gCAAAA;;;;uBA3C4B,iBAAiB;4BACnC,wBAAwB;yCACZ,uCAAuC;AAInE,MAAMhB,8BAA8B,iBAAiB;AAErD,iCAAsE;IAC3EE,MAAM;AACR,EAAE;AACF;;;CAGC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BM,MAAM;QACJ,CAAC,CAAC,CAAC,EAAEF,4BAA4B,CAAC,CAAC,CAAC,EAAE;YACpC,CAAC,CAAC,KAAK,EAAED,2CAAAA,CAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;gBAClDE,WAAW;YACb;QACF;QACAC,SAAS;QACT,CAAC,CAAC,KAAK,EAAEN,2CAAAA,CAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;YAClDI,MAAM;QACR;QACA,CAAC,CAAC,KAAK,EAAEP,2CAAAA,CAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;YAClDK,qBAAqB;YACrBC,wBAAwB;YACxBC,aAAa;YACb,YAAY;gBACVC,SAAS;gBACTC,OAAOb,kBAAAA,CAAOc,eAAe;gBAC7BC,QAAQ;gBACRC,iBAAiBhB,kBAAAA,CAAOiB,mBAAmB;YAC7C;QACF;IACF;AACF;AAKO,yCAAyC,CAACE;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;;;;;;;;;;;;IAUaK,wBAAAA;;;+BAFAD;;;IAqCAgB,gCAAAA;;;;uBA3C4B,iBAAiB;4BACnC,wBAAwB;yCACZ,uCAAuC;AAInE,MAAMhB,8BAA8B,iBAAiB;AAErD,iCAAsE;IAC3EE,MAAM;AACR,EAAE;AACF;;;CAGC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BM,MAAM;QACJ,CAAC,CAAC,CAAC,EAAEF,4BAA4B,CAAC,CAAC,CAAC,EAAE;YACpC,CAAC,CAAC,KAAK,EAAED,2CAAAA,CAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;gBAClDE,WAAW;YACb;QACF;QACAC,SAAS;QACT,CAAC,CAAC,KAAK,EAAEN,2CAAAA,CAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;YAClDI,MAAM;QACR;QACA,CAAC,CAAC,KAAK,EAAEP,2CAAAA,CAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;YAClDK,qBAAqB;YACrBC,wBAAwB;YACxBC,aAAa;YACb,YAAY;gBACVC,SAAS;gBACTC,OAAOb,kBAAAA,CAAOc,eAAe;gBAC7BC,QAAQ;gBACRC,iBAAiBhB,kBAAAA,CAAOiB,mBAAmB;YAC7C;QACF;IACF;AACF;AAKO,yCAAyC,CAACE;IAC/C;IAEA,MAAMC,SAASf;IACf,oDAAoD;IACpDc,MAAMf,IAAI,CAACiB,SAAS,OAAGtB,mBAAAA,EAAaI,yBAAyBC,IAAI,EAAEgB,OAAOhB,IAAI,EAAEe,MAAMf,IAAI,CAACiB,SAAS;IACpG,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
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\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":""}
|
|
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":""}
|
|
@@ -15,6 +15,9 @@ _export(exports, {
|
|
|
15
15
|
renderMenuTrigger_unstable: function() {
|
|
16
16
|
return _renderMenuTrigger.renderMenuTrigger_unstable;
|
|
17
17
|
},
|
|
18
|
+
useMenuTriggerBase_unstable: function() {
|
|
19
|
+
return _useMenuTrigger.useMenuTriggerBase_unstable;
|
|
20
|
+
},
|
|
18
21
|
useMenuTrigger_unstable: function() {
|
|
19
22
|
return _useMenuTrigger.useMenuTrigger_unstable;
|
|
20
23
|
}
|
|
@@ -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":";;;;;;;;;;;;eAASA,wBAAW;;;eAOXC,6CAA0B;;;eACDE,2CAA2B;;;eAApDD,uCAAuB;;;6BARJ,gBAAgB;mCAOD,sBAAsB;gCACI,mBAAmB"}
|
|
@@ -3,9 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
function _export(target, all) {
|
|
7
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: all[name]
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
_export(exports, {
|
|
13
|
+
useMenuTriggerBase_unstable: function() {
|
|
14
|
+
return useMenuTriggerBase_unstable;
|
|
15
|
+
},
|
|
16
|
+
useMenuTrigger_unstable: function() {
|
|
9
17
|
return useMenuTrigger_unstable;
|
|
10
18
|
}
|
|
11
19
|
});
|
|
@@ -23,9 +31,23 @@ function noop() {
|
|
|
23
31
|
// does nothing
|
|
24
32
|
}
|
|
25
33
|
const useMenuTrigger_unstable = (props)=>{
|
|
26
|
-
const { children, disableButtonEnhancement = false } = props;
|
|
27
|
-
const triggerRef = (0, _menuContext.useMenuContext_unstable)((context)=>context.triggerRef);
|
|
28
34
|
const menuPopoverRef = (0, _menuContext.useMenuContext_unstable)((context)=>context.menuPopoverRef);
|
|
35
|
+
const { findFirstFocusable } = (0, _reacttabster.useFocusFinders)();
|
|
36
|
+
const focusFirst = _react.useCallback(()=>{
|
|
37
|
+
const firstFocusable = findFirstFocusable(menuPopoverRef.current);
|
|
38
|
+
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
|
|
39
|
+
}, [
|
|
40
|
+
findFirstFocusable,
|
|
41
|
+
menuPopoverRef
|
|
42
|
+
]);
|
|
43
|
+
return useMenuTriggerBase_unstable({
|
|
44
|
+
...props,
|
|
45
|
+
focusFirst
|
|
46
|
+
});
|
|
47
|
+
};
|
|
48
|
+
const useMenuTriggerBase_unstable = (props)=>{
|
|
49
|
+
const { children, disableButtonEnhancement = false, focusFirst } = props;
|
|
50
|
+
const triggerRef = (0, _menuContext.useMenuContext_unstable)((context)=>context.triggerRef);
|
|
29
51
|
const setOpen = (0, _menuContext.useMenuContext_unstable)((context)=>context.setOpen);
|
|
30
52
|
const open = (0, _menuContext.useMenuContext_unstable)((context)=>context.open);
|
|
31
53
|
const triggerId = (0, _menuContext.useMenuContext_unstable)((context)=>context.triggerId);
|
|
@@ -36,14 +58,6 @@ const useMenuTrigger_unstable = (props)=>{
|
|
|
36
58
|
var _ctx_shouldOpenOnArrowRight;
|
|
37
59
|
return (_ctx_shouldOpenOnArrowRight = ctx.shouldOpenOnArrowRight) !== null && _ctx_shouldOpenOnArrowRight !== void 0 ? _ctx_shouldOpenOnArrowRight : true;
|
|
38
60
|
});
|
|
39
|
-
const { findFirstFocusable } = (0, _reacttabster.useFocusFinders)();
|
|
40
|
-
const focusFirst = _react.useCallback(()=>{
|
|
41
|
-
const firstFocusable = findFirstFocusable(menuPopoverRef.current);
|
|
42
|
-
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
|
|
43
|
-
}, [
|
|
44
|
-
findFirstFocusable,
|
|
45
|
-
menuPopoverRef
|
|
46
|
-
]);
|
|
47
61
|
const openedWithKeyboardRef = _react.useRef(false);
|
|
48
62
|
const openedViaSafeZoneRef = _react.useRef(false);
|
|
49
63
|
const hasMouseMovedRef = _react.useRef(false);
|
|
@@ -110,7 +124,7 @@ const useMenuTrigger_unstable = (props)=>{
|
|
|
110
124
|
}
|
|
111
125
|
// if menu is already open, can't rely on effects to focus
|
|
112
126
|
if (open && key === OpenArrowKey && isSubmenu && shouldOpenOnArrowRight) {
|
|
113
|
-
focusFirst();
|
|
127
|
+
focusFirst === null || focusFirst === void 0 ? void 0 : focusFirst();
|
|
114
128
|
}
|
|
115
129
|
};
|
|
116
130
|
const onMouseOver = (event)=>{
|
|
@@ -175,14 +189,18 @@ const useMenuTrigger_unstable = (props)=>{
|
|
|
175
189
|
onMouseEnter: (0, _reactutilities.useEventCallback)((_child_props_onMouseEnter = child === null || child === void 0 ? void 0 : child.props.onMouseEnter) !== null && _child_props_onMouseEnter !== void 0 ? _child_props_onMouseEnter : noop),
|
|
176
190
|
onMouseLeave: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : child.props.onMouseLeave, onMouseLeave)),
|
|
177
191
|
onContextMenu: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : child.props.onContextMenu, onContextMenu)),
|
|
192
|
+
// eslint-disable-next-line react-hooks/refs
|
|
178
193
|
onMouseMove: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : child.props.onMouseMove, onMouseMove)),
|
|
194
|
+
// eslint-disable-next-line react-hooks/refs
|
|
179
195
|
onMouseOver: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : child.props.onMouseOver, onMouseOver))
|
|
180
196
|
};
|
|
181
197
|
const triggerChildProps = {
|
|
182
198
|
'aria-haspopup': 'menu',
|
|
183
199
|
'aria-expanded': !open && !isSubmenu ? undefined : open,
|
|
184
200
|
...contextMenuProps,
|
|
201
|
+
// eslint-disable-next-line react-hooks/refs
|
|
185
202
|
onClick: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : child.props.onClick, onClick)),
|
|
203
|
+
// eslint-disable-next-line react-hooks/refs
|
|
186
204
|
onKeyDown: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : child.props.onKeyDown, onKeyDown))
|
|
187
205
|
};
|
|
188
206
|
const ariaButtonTriggerChildProps = (0, _reactaria.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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"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -141,6 +141,9 @@ _export(exports, {
|
|
|
141
141
|
useCheckmarkStyles_unstable: function() {
|
|
142
142
|
return _index.useCheckmarkStyles_unstable;
|
|
143
143
|
},
|
|
144
|
+
useMenuBase_unstable: function() {
|
|
145
|
+
return _Menu.useMenuBase_unstable;
|
|
146
|
+
},
|
|
144
147
|
useMenuContextValues_unstable: function() {
|
|
145
148
|
return _Menu.useMenuContextValues_unstable;
|
|
146
149
|
},
|
|
@@ -171,18 +174,30 @@ _export(exports, {
|
|
|
171
174
|
useMenuGroup_unstable: function() {
|
|
172
175
|
return _MenuGroup.useMenuGroup_unstable;
|
|
173
176
|
},
|
|
177
|
+
useMenuItemBase_unstable: function() {
|
|
178
|
+
return _MenuItem.useMenuItemBase_unstable;
|
|
179
|
+
},
|
|
180
|
+
useMenuItemCheckboxBase_unstable: function() {
|
|
181
|
+
return _MenuItemCheckbox.useMenuItemCheckboxBase_unstable;
|
|
182
|
+
},
|
|
174
183
|
useMenuItemCheckboxStyles_unstable: function() {
|
|
175
184
|
return _MenuItemCheckbox.useMenuItemCheckboxStyles_unstable;
|
|
176
185
|
},
|
|
177
186
|
useMenuItemCheckbox_unstable: function() {
|
|
178
187
|
return _MenuItemCheckbox.useMenuItemCheckbox_unstable;
|
|
179
188
|
},
|
|
189
|
+
useMenuItemLinkBase_unstable: function() {
|
|
190
|
+
return _MenuItemLink.useMenuItemLinkBase_unstable;
|
|
191
|
+
},
|
|
180
192
|
useMenuItemLinkStyles_unstable: function() {
|
|
181
193
|
return _MenuItemLink.useMenuItemLinkStyles_unstable;
|
|
182
194
|
},
|
|
183
195
|
useMenuItemLink_unstable: function() {
|
|
184
196
|
return _MenuItemLink.useMenuItemLink_unstable;
|
|
185
197
|
},
|
|
198
|
+
useMenuItemRadioBase_unstable: function() {
|
|
199
|
+
return _MenuItemRadio.useMenuItemRadioBase_unstable;
|
|
200
|
+
},
|
|
186
201
|
useMenuItemRadioStyles_unstable: function() {
|
|
187
202
|
return _MenuItemRadio.useMenuItemRadioStyles_unstable;
|
|
188
203
|
},
|
|
@@ -192,6 +207,9 @@ _export(exports, {
|
|
|
192
207
|
useMenuItemStyles_unstable: function() {
|
|
193
208
|
return _MenuItem.useMenuItemStyles_unstable;
|
|
194
209
|
},
|
|
210
|
+
useMenuItemSwitchBase_unstable: function() {
|
|
211
|
+
return _MenuItemSwitch.useMenuItemSwitchBase_unstable;
|
|
212
|
+
},
|
|
195
213
|
useMenuItemSwitchStyles_unstable: function() {
|
|
196
214
|
return _MenuItemSwitch.useMenuItemSwitchStyles_unstable;
|
|
197
215
|
},
|
|
@@ -201,6 +219,9 @@ _export(exports, {
|
|
|
201
219
|
useMenuItem_unstable: function() {
|
|
202
220
|
return _MenuItem.useMenuItem_unstable;
|
|
203
221
|
},
|
|
222
|
+
useMenuListBase_unstable: function() {
|
|
223
|
+
return _MenuList.useMenuListBase_unstable;
|
|
224
|
+
},
|
|
204
225
|
useMenuListContextValues_unstable: function() {
|
|
205
226
|
return _MenuList.useMenuListContextValues_unstable;
|
|
206
227
|
},
|
|
@@ -213,6 +234,9 @@ _export(exports, {
|
|
|
213
234
|
useMenuList_unstable: function() {
|
|
214
235
|
return _MenuList.useMenuList_unstable;
|
|
215
236
|
},
|
|
237
|
+
useMenuPopoverBase_unstable: function() {
|
|
238
|
+
return _MenuPopover.useMenuPopoverBase_unstable;
|
|
239
|
+
},
|
|
216
240
|
useMenuPopoverStyles_unstable: function() {
|
|
217
241
|
return _MenuPopover.useMenuPopoverStyles_unstable;
|
|
218
242
|
},
|
|
@@ -225,6 +249,9 @@ _export(exports, {
|
|
|
225
249
|
useMenuSplitGroup_unstable: function() {
|
|
226
250
|
return _MenuSplitGroup.useMenuSplitGroup_unstable;
|
|
227
251
|
},
|
|
252
|
+
useMenuTriggerBase_unstable: function() {
|
|
253
|
+
return _MenuTrigger.useMenuTriggerBase_unstable;
|
|
254
|
+
},
|
|
228
255
|
useMenuTriggerContext_unstable: function() {
|
|
229
256
|
return _menuTriggerContext.useMenuTriggerContext_unstable;
|
|
230
257
|
},
|
|
@@ -257,8 +284,3 @@ const _index = require("./selectable/index");
|
|
|
257
284
|
const _MenuItemLink = require("./MenuItemLink");
|
|
258
285
|
const _utils = require("./utils");
|
|
259
286
|
const _MenuItemSwitch = require("./MenuItemSwitch");
|
|
260
|
-
// Experimental: Base hooks - will be enabled in the experimental release branch
|
|
261
|
-
// export { useMenuItemBase_unstable } from './MenuItem';
|
|
262
|
-
// export { useMenuItemCheckboxBase_unstable } from './MenuItemCheckbox';
|
|
263
|
-
// export { useMenuItemRadioBase_unstable } from './MenuItemRadio';
|
|
264
|
-
// export { useMenuItemSwitchBase_unstable } from './MenuItemSwitch';
|
|
@@ -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":";;;;;;;;;;;oBA+IyB;eAAhB4E;;;eAtIPpE,UAAI;;eAoBO;eAAXK;;;eAQAK,oBAAS;;;eAlCFd,0CAAwB;;;eA2C/BoB,gCAAe;;IAQfK,QAAQ;;;;eASRM,kCAAgB;;IAuEhBmC,YAAY;;;;eA9DZ7B,4BAAa;;IAyEbsC;6CAAc;;;eA3DdhC,kBAAQ;;;eAjFDzC,iCAAgB;;;eAqGvBgD,wBAAW;;;eA1GJtD,yBAAY;;;eAmHnB4D,8BAAc;;;eAQdK,wBAAW;;;eAzHJ/D,8CAA0B;;IA6IR2E,sBAAsB;;;;eAjH/C/D,kCAAqB;;;eAQrBK,8BAAmB;;6BASM;eAAzBM;;;eAiBAW,4CAA0B;;;eAT1BN,4BAAkB;;;eAgFlByC,oCAAsB;;;eA9DtB7B,sCAAuB;;IAyEvBsC,wBAAwB;;;sBA3DN;eAAlBhC;;IAoBAO,qBAAqB;;;;eASrBM,wCAAwB;;;eArFxB9C,uCAA0B;;;eAiB1BW,+CAA8B;;IAT9BN;kDAAwB;;;eA0BxBiB,iDAA+B;;;eAuE/BmC,yCAA2B;;;eA9D3B7B,2CAA4B;;IAyE5BsC;4DAA6B;;IA3F7BlD;gDAAuB;;;eAgCvBkB,iCAAuB;;IAoBvBO;sDAA0B;;;eAS1BM,6CAA6B;;;eAO7BI,uCAA0B;;IAlH1BzD,mBAAmB;;;;eAwHZ4D,kCAA2B;;wBAvHd;eAApB3D;;;eACAC,mCAA6B;;;eAZRV,oCAAuB;;IAgC5Ce;yDAA6B;;;eAC7BC,oCAAuB;;;eAOvBI,6CAAkC;;;eArCDhB,8CAA4B;;;eA8C7DsB,kDAAiC;;+BACN;eAA3BC;;;eATAN,sCAA2B;;;eAC3BC,gCAAqB;;IAerBS;iDAAwB;;;eASxBM,kDAAgC;;;eAChCC,oDAAkC;;;eAClCC,8CAA4B;;;eAqE5BiC,0CAA4B;;;eAC5BC,4CAA8B;;;eAC9BC,sCAAwB;;;eAhExB/B,4CAA6B;;IAC7BC;6DAA+B;;;eAC/BC,wCAAyB;;;eAnBzBb,oCAA0B;;;eA0F1BiD,8CAA8B;;;eAC9BC,gDAAgC;;;eAChCC,0CAA0B;;;eA3F1BlD,8BAAoB;;4BA8BI;eAAxBgB;;;eACAC,2CAAiC;;+BArFmB;eAA3B5C;;;eAsFzB6C,oCAA0B;;;eAC1BC,8BAAoB;;+BAiBO;eAA3BI;;;eACAC,0CAA6B;;;eAC7BC,oCAAuB;;;eAOvBI,gDAAgC;;IAChCC;yDAA0B;;;eAO1BI,wCAA2B;;IA5HQjE;iEAA8B;;;eA2HjEgE,oCAAuB;;;eAhHvBvD,sBAAgB;;;eAkIiCkE,0BAAmB;;;6BA/IhB,yBAAyB;oCAEJ,gCAAgC;kCACpC,8BAA8B;iCAEvC,6BAA6B;sBASpF,SAAS;6BAoBT,gBAAgB;2BAShB,cAAc;iCAQd,oBAAoB;0BASpB,aAAa;kCASb,qBAAqB;+BASrB,kBAAkB;0BAelB,aAAa;6BAmBb,gBAAgB;gCAQhB,mBAAmB;6BAOnB,gBAAgB;uBAGqB,qBAAqB;8BAU1D,iBAAiB;uBAGsD,UAAU;gCAQjF,mBAAmB"}
|