@fluentui/react-menu 0.0.0-nightly-20240920-0408.1 → 0.0.0-nightly-20240925-0407.1
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 +35 -17
- package/lib/components/Menu/useMenu.js +23 -2
- package/lib/components/Menu/useMenu.js.map +1 -1
- package/lib/components/MenuTrigger/useMenuTrigger.js +1 -3
- package/lib/components/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib-commonjs/components/Menu/useMenu.js +21 -1
- package/lib-commonjs/components/Menu/useMenu.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js +0 -2
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/package.json +14 -14
package/CHANGELOG.md
CHANGED
|
@@ -1,30 +1,48 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-menu
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 25 Sep 2024 04:11:53 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20240925-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v0.0.0-nightly-20240925-0407.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.14.
|
|
9
|
+
Wed, 25 Sep 2024 04:11:53 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.14.16..@fluentui/react-menu_v0.0.0-nightly-20240925-0407.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-aria to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-portal to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-positioning to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
22
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
23
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
24
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
25
|
-
- Bump @fluentui/react-provider to v0.0.0-nightly-
|
|
26
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
27
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240925-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/efa6f3c0ea837222811d7d44972d221af60d590e) by beachball)
|
|
16
|
+
- Bump @fluentui/react-aria to v0.0.0-nightly-20240925-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/efa6f3c0ea837222811d7d44972d221af60d590e) by beachball)
|
|
17
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20240925-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/efa6f3c0ea837222811d7d44972d221af60d590e) by beachball)
|
|
18
|
+
- Bump @fluentui/react-portal to v0.0.0-nightly-20240925-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/efa6f3c0ea837222811d7d44972d221af60d590e) by beachball)
|
|
19
|
+
- Bump @fluentui/react-positioning to v0.0.0-nightly-20240925-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/efa6f3c0ea837222811d7d44972d221af60d590e) by beachball)
|
|
20
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240925-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/efa6f3c0ea837222811d7d44972d221af60d590e) by beachball)
|
|
21
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20240925-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/efa6f3c0ea837222811d7d44972d221af60d590e) by beachball)
|
|
22
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20240925-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/efa6f3c0ea837222811d7d44972d221af60d590e) by beachball)
|
|
23
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20240925-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/efa6f3c0ea837222811d7d44972d221af60d590e) by beachball)
|
|
24
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240925-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/efa6f3c0ea837222811d7d44972d221af60d590e) by beachball)
|
|
25
|
+
- Bump @fluentui/react-provider to v0.0.0-nightly-20240925-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/efa6f3c0ea837222811d7d44972d221af60d590e) by beachball)
|
|
26
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20240925-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/efa6f3c0ea837222811d7d44972d221af60d590e) by beachball)
|
|
27
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240925-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/efa6f3c0ea837222811d7d44972d221af60d590e) by beachball)
|
|
28
|
+
|
|
29
|
+
## [9.14.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.14.16)
|
|
30
|
+
|
|
31
|
+
Mon, 23 Sep 2024 12:40:14 GMT
|
|
32
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.14.15..@fluentui/react-menu_v9.14.16)
|
|
33
|
+
|
|
34
|
+
### Patches
|
|
35
|
+
|
|
36
|
+
- fix(Menu): Do not rely on tabster restorer for focus restore ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by lingfangao@hotmail.com)
|
|
37
|
+
- Bump @fluentui/react-aria to v9.13.6 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
|
38
|
+
- Bump @fluentui/react-context-selector to v9.1.67 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
|
39
|
+
- Bump @fluentui/react-portal to v9.4.35 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
|
40
|
+
- Bump @fluentui/react-positioning to v9.15.9 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
|
41
|
+
- Bump @fluentui/react-shared-contexts to v9.20.1 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
|
42
|
+
- Bump @fluentui/react-tabster to v9.22.7 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
|
43
|
+
- Bump @fluentui/react-theme to v9.1.20 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
|
44
|
+
- Bump @fluentui/react-utilities to v9.18.15 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
|
45
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.44 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
|
28
46
|
|
|
29
47
|
## [9.14.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.14.15)
|
|
30
48
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { usePositioningMouseTarget, usePositioning, resolvePositioningShorthand } from '@fluentui/react-positioning';
|
|
3
|
-
import { useControllableState, useId, useOnClickOutside, useEventCallback, useOnScrollOutside, elementContains, useTimeout } from '@fluentui/react-utilities';
|
|
3
|
+
import { useControllableState, useId, useOnClickOutside, useEventCallback, useOnScrollOutside, elementContains, useTimeout, useFirstMount } from '@fluentui/react-utilities';
|
|
4
4
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
5
5
|
import { useFocusFinders } from '@fluentui/react-tabster';
|
|
6
6
|
import { useMenuContext_unstable } from '../../contexts/menuContext';
|
|
@@ -124,6 +124,7 @@ const submenuFallbackPositions = [
|
|
|
124
124
|
];
|
|
125
125
|
};
|
|
126
126
|
const useMenuOpenState = (state)=>{
|
|
127
|
+
'use no memo';
|
|
127
128
|
const { targetDocument } = useFluent();
|
|
128
129
|
const parentSetOpen = useMenuContext_unstable((context)=>context.setOpen);
|
|
129
130
|
const onOpenChange = useEventCallback((e, data)=>{
|
|
@@ -228,13 +229,33 @@ const useMenuOpenState = (state)=>{
|
|
|
228
229
|
findFirstFocusable,
|
|
229
230
|
state.menuPopoverRef
|
|
230
231
|
]);
|
|
232
|
+
const firstMount = useFirstMount();
|
|
231
233
|
React.useEffect(()=>{
|
|
232
234
|
if (open) {
|
|
233
235
|
focusFirst();
|
|
236
|
+
} else {
|
|
237
|
+
if (!firstMount) {
|
|
238
|
+
if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body)) {
|
|
239
|
+
var // We know that React effects are sync so we focus the trigger here
|
|
240
|
+
// after any event handler (event handlers will update state and re-render).
|
|
241
|
+
// Since the browser only performs the default behaviour for the Tab key once
|
|
242
|
+
// keyboard events have fully bubbled up the window, the browser will move
|
|
243
|
+
// focus to the next tabbable element before/after the trigger if needed.
|
|
244
|
+
// If the Tab key was not pressed, focus will remain on the trigger as expected.
|
|
245
|
+
_state_triggerRef_current;
|
|
246
|
+
(_state_triggerRef_current = state.triggerRef.current) === null || _state_triggerRef_current === void 0 ? void 0 : _state_triggerRef_current.focus();
|
|
247
|
+
}
|
|
248
|
+
}
|
|
234
249
|
}
|
|
250
|
+
// firstMount change should not re-run this effect
|
|
251
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
235
252
|
}, [
|
|
253
|
+
state.triggerRef,
|
|
254
|
+
state.isSubmenu,
|
|
236
255
|
open,
|
|
237
|
-
focusFirst
|
|
256
|
+
focusFirst,
|
|
257
|
+
targetDocument,
|
|
258
|
+
state.menuPopoverRef
|
|
238
259
|
]);
|
|
239
260
|
return [
|
|
240
261
|
open,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n usePositioningMouseTarget,\n usePositioning,\n resolvePositioningShorthand,\n PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n useControllableState,\n useId,\n useOnClickOutside,\n useEventCallback,\n useOnScrollOutside,\n elementContains,\n useTimeout,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuOpenChangeData, MenuOpenEvent, MenuProps, MenuState } from './Menu.types';\n\n// If it's not possible to position the submenu in smaller viewports, try\n// and fallback to this order of positions\nconst submenuFallbackPositions: PositioningShorthandValue[] = [\n 'after',\n 'after-bottom',\n 'before-top',\n 'before',\n 'before-bottom',\n 'above',\n];\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n const isSubmenu = useIsSubmenu();\n const {\n hoverDelay = 500,\n inline = false,\n hasCheckmarks = false,\n hasIcons = false,\n closeOnScroll = false,\n openOnContext = false,\n persistOnItemClick = false,\n openOnHover = isSubmenu,\n defaultCheckedValues,\n mountNode = null,\n } = props;\n const triggerId = useId('menu');\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n const positioningState = {\n position: isSubmenu ? 'after' : 'below',\n align: isSubmenu ? 'top' : 'start',\n target: props.openOnContext ? contextTarget : undefined,\n fallbackPositions: isSubmenu ? submenuFallbackPositions : undefined,\n ...resolvePositioningShorthand(props.positioning),\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at most two children');\n }\n }\n\n let menuTrigger: React.ReactElement | undefined = undefined;\n let menuPopover: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n menuTrigger = children[0];\n menuPopover = children[1];\n } else if (children.length === 1) {\n menuPopover = children[0];\n }\n\n const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n // TODO Better way to narrow types ?\n const [open, setOpen] = useMenuOpenState({\n hoverDelay,\n isSubmenu,\n setContextTarget,\n closeOnScroll,\n menuPopoverRef,\n triggerRef,\n open: props.open,\n defaultOpen: props.defaultOpen,\n onOpenChange: props.onOpenChange,\n openOnContext,\n });\n\n const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n return {\n inline,\n hoverDelay,\n triggerId,\n isSubmenu,\n openOnHover,\n contextTarget,\n setContextTarget,\n hasCheckmarks,\n hasIcons,\n closeOnScroll,\n menuTrigger,\n menuPopover,\n mountNode,\n triggerRef,\n menuPopoverRef,\n components: {},\n openOnContext,\n open,\n setOpen,\n checkedValues,\n onCheckedValueChange,\n persistOnItemClick,\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: props.checkedValues,\n defaultState: props.defaultCheckedValues,\n initialState: {},\n });\n const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n props.onCheckedValueChange?.(e, { name, checkedItems });\n\n setCheckedValues(currentValue => ({\n ...currentValue,\n [name]: checkedItems,\n }));\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n state: Pick<\n MenuState,\n | 'isSubmenu'\n | 'menuPopoverRef'\n | 'setContextTarget'\n | 'triggerRef'\n | 'openOnContext'\n | 'closeOnScroll'\n | 'hoverDelay'\n > &\n Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n const { targetDocument } = useFluent();\n const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n const onOpenChange: MenuProps['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const enteringTriggerRef = React.useRef(false);\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n\n const trySetOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n onOpenChange?.(event, { ...data });\n if (data.open && e.type === 'contextmenu') {\n state.setContextTarget(e as React.MouseEvent);\n }\n\n if (!data.open) {\n state.setContextTarget(undefined);\n }\n\n if (data.bubble) {\n parentSetOpen(e, { ...data });\n }\n\n setOpenState(data.open);\n });\n\n const [setOpenTimeout, clearOpenTimeout] = useTimeout();\n\n const setOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n clearOpenTimeout();\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n }\n\n setOpenTimeout(() => trySetOpen(e, data), state.hoverDelay);\n } else {\n trySetOpen(e, data);\n }\n });\n\n useOnClickOutside({\n contains: elementContains,\n disabled: !open,\n element: targetDocument,\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n callback: event => setOpen(event, { open: false, type: 'clickOutside', event }),\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = state.openOnContext || state.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }),\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n disabled: !open || !closeOnScroll,\n });\n\n useOnMenuMouseEnter({\n element: targetDocument,\n callback: event => {\n // When moving from a menu directly back to its trigger, this handler can close the menu\n // Explicitly check a flag to see if this situation happens\n if (!enteringTriggerRef.current) {\n setOpen(event, { open: false, type: 'menuMouseEnter', event });\n }\n },\n disabled: !open,\n refs: [state.menuPopoverRef],\n });\n\n // Manage focus for open state\n const { findFirstFocusable } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, state.menuPopoverRef]);\n\n React.useEffect(() => {\n if (open) {\n focusFirst();\n }\n }, [open, focusFirst]);\n\n return [open, setOpen] as const;\n};\n"],"names":["React","usePositioningMouseTarget","usePositioning","resolvePositioningShorthand","useControllableState","useId","useOnClickOutside","useEventCallback","useOnScrollOutside","elementContains","useTimeout","useFluent_unstable","useFluent","useFocusFinders","useMenuContext_unstable","MENU_ENTER_EVENT","useOnMenuMouseEnter","useIsSubmenu","submenuFallbackPositions","useMenu_unstable","props","isSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","mountNode","triggerId","contextTarget","setContextTarget","positioningState","position","align","target","undefined","fallbackPositions","positioning","children","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","triggerRef","containerRef","menuPopoverRef","open","setOpen","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","setCheckedValues","state","defaultState","initialState","e","name","checkedItems","currentValue","targetDocument","parentSetOpen","context","data","enteringTriggerRef","useRef","setOpenState","trySetOpen","event","CustomEvent","type","detail","nativeEvent","bubble","setOpenTimeout","clearOpenTimeout","Event","persist","current","contains","disabled","element","refs","filter","Boolean","callback","findFirstFocusable","focusFirst","useCallback","firstFocusable","focus","useEffect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n usePositioningMouseTarget,\n usePositioning,\n resolvePositioningShorthand,\n PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n useControllableState,\n useId,\n useOnClickOutside,\n useEventCallback,\n useOnScrollOutside,\n elementContains,\n useTimeout,\n useFirstMount,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuOpenChangeData, MenuOpenEvent, MenuProps, MenuState } from './Menu.types';\n\n// If it's not possible to position the submenu in smaller viewports, try\n// and fallback to this order of positions\nconst submenuFallbackPositions: PositioningShorthandValue[] = [\n 'after',\n 'after-bottom',\n 'before-top',\n 'before',\n 'before-bottom',\n 'above',\n];\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n const isSubmenu = useIsSubmenu();\n const {\n hoverDelay = 500,\n inline = false,\n hasCheckmarks = false,\n hasIcons = false,\n closeOnScroll = false,\n openOnContext = false,\n persistOnItemClick = false,\n openOnHover = isSubmenu,\n defaultCheckedValues,\n mountNode = null,\n } = props;\n const triggerId = useId('menu');\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n const positioningState = {\n position: isSubmenu ? 'after' : 'below',\n align: isSubmenu ? 'top' : 'start',\n target: props.openOnContext ? contextTarget : undefined,\n fallbackPositions: isSubmenu ? submenuFallbackPositions : undefined,\n ...resolvePositioningShorthand(props.positioning),\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at most two children');\n }\n }\n\n let menuTrigger: React.ReactElement | undefined = undefined;\n let menuPopover: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n menuTrigger = children[0];\n menuPopover = children[1];\n } else if (children.length === 1) {\n menuPopover = children[0];\n }\n\n const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n // TODO Better way to narrow types ?\n const [open, setOpen] = useMenuOpenState({\n hoverDelay,\n isSubmenu,\n setContextTarget,\n closeOnScroll,\n menuPopoverRef,\n triggerRef,\n open: props.open,\n defaultOpen: props.defaultOpen,\n onOpenChange: props.onOpenChange,\n openOnContext,\n });\n\n const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n return {\n inline,\n hoverDelay,\n triggerId,\n isSubmenu,\n openOnHover,\n contextTarget,\n setContextTarget,\n hasCheckmarks,\n hasIcons,\n closeOnScroll,\n menuTrigger,\n menuPopover,\n mountNode,\n triggerRef,\n menuPopoverRef,\n components: {},\n openOnContext,\n open,\n setOpen,\n checkedValues,\n onCheckedValueChange,\n persistOnItemClick,\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: props.checkedValues,\n defaultState: props.defaultCheckedValues,\n initialState: {},\n });\n const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n props.onCheckedValueChange?.(e, { name, checkedItems });\n\n setCheckedValues(currentValue => ({\n ...currentValue,\n [name]: checkedItems,\n }));\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n state: Pick<\n MenuState,\n | 'isSubmenu'\n | 'menuPopoverRef'\n | 'setContextTarget'\n | 'triggerRef'\n | 'openOnContext'\n | 'closeOnScroll'\n | 'hoverDelay'\n > &\n Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n 'use no memo';\n\n const { targetDocument } = useFluent();\n const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n const onOpenChange: MenuProps['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const enteringTriggerRef = React.useRef(false);\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n\n const trySetOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n onOpenChange?.(event, { ...data });\n if (data.open && e.type === 'contextmenu') {\n state.setContextTarget(e as React.MouseEvent);\n }\n\n if (!data.open) {\n state.setContextTarget(undefined);\n }\n\n if (data.bubble) {\n parentSetOpen(e, { ...data });\n }\n\n setOpenState(data.open);\n });\n\n const [setOpenTimeout, clearOpenTimeout] = useTimeout();\n\n const setOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n clearOpenTimeout();\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n }\n\n setOpenTimeout(() => trySetOpen(e, data), state.hoverDelay);\n } else {\n trySetOpen(e, data);\n }\n });\n\n useOnClickOutside({\n contains: elementContains,\n disabled: !open,\n element: targetDocument,\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n callback: event => setOpen(event, { open: false, type: 'clickOutside', event }),\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = state.openOnContext || state.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }),\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n disabled: !open || !closeOnScroll,\n });\n\n useOnMenuMouseEnter({\n element: targetDocument,\n callback: event => {\n // When moving from a menu directly back to its trigger, this handler can close the menu\n // Explicitly check a flag to see if this situation happens\n if (!enteringTriggerRef.current) {\n setOpen(event, { open: false, type: 'menuMouseEnter', event });\n }\n },\n disabled: !open,\n refs: [state.menuPopoverRef],\n });\n\n // Manage focus for open state\n const { findFirstFocusable } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, state.menuPopoverRef]);\n\n const firstMount = useFirstMount();\n React.useEffect(() => {\n if (open) {\n focusFirst();\n } else {\n if (!firstMount) {\n if (targetDocument?.activeElement === targetDocument?.body) {\n // We know that React effects are sync so we focus the trigger here\n // after any event handler (event handlers will update state and re-render).\n // Since the browser only performs the default behaviour for the Tab key once\n // keyboard events have fully bubbled up the window, the browser will move\n // focus to the next tabbable element before/after the trigger if needed.\n // If the Tab key was not pressed, focus will remain on the trigger as expected.\n state.triggerRef.current?.focus();\n }\n }\n }\n // firstMount change should not re-run this effect\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef]);\n\n return [open, setOpen] as const;\n};\n"],"names":["React","usePositioningMouseTarget","usePositioning","resolvePositioningShorthand","useControllableState","useId","useOnClickOutside","useEventCallback","useOnScrollOutside","elementContains","useTimeout","useFirstMount","useFluent_unstable","useFluent","useFocusFinders","useMenuContext_unstable","MENU_ENTER_EVENT","useOnMenuMouseEnter","useIsSubmenu","submenuFallbackPositions","useMenu_unstable","props","isSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","mountNode","triggerId","contextTarget","setContextTarget","positioningState","position","align","target","undefined","fallbackPositions","positioning","children","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","triggerRef","containerRef","menuPopoverRef","open","setOpen","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","setCheckedValues","state","defaultState","initialState","e","name","checkedItems","currentValue","targetDocument","parentSetOpen","context","data","enteringTriggerRef","useRef","setOpenState","trySetOpen","event","CustomEvent","type","detail","nativeEvent","bubble","setOpenTimeout","clearOpenTimeout","Event","persist","current","contains","disabled","element","refs","filter","Boolean","callback","findFirstFocusable","focusFirst","useCallback","firstFocusable","focus","firstMount","useEffect","activeElement","body"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useMenuContext_unstable } from '../../contexts/menuContext';
|
|
3
3
|
import { useIsSubmenu } from '../../utils/useIsSubmenu';
|
|
4
|
-
import { useFocusFinders
|
|
4
|
+
import { useFocusFinders } from '@fluentui/react-tabster';
|
|
5
5
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
6
6
|
import { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';
|
|
7
7
|
import { applyTriggerPropsToChildren, getTriggerChild, isHTMLElement, mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
|
|
@@ -20,7 +20,6 @@ import { useARIAButtonProps } from '@fluentui/react-aria';
|
|
|
20
20
|
const triggerId = useMenuContext_unstable((context)=>context.triggerId);
|
|
21
21
|
const openOnHover = useMenuContext_unstable((context)=>context.openOnHover);
|
|
22
22
|
const openOnContext = useMenuContext_unstable((context)=>context.openOnContext);
|
|
23
|
-
const restoreFocusTargetAttribute = useRestoreFocusTarget();
|
|
24
23
|
const isSubmenu = useIsSubmenu();
|
|
25
24
|
const { findFirstFocusable } = useFocusFinders();
|
|
26
25
|
const focusFirst = React.useCallback(()=>{
|
|
@@ -134,7 +133,6 @@ import { useARIAButtonProps } from '@fluentui/react-aria';
|
|
|
134
133
|
};
|
|
135
134
|
const contextMenuProps = {
|
|
136
135
|
id: triggerId,
|
|
137
|
-
...restoreFocusTargetAttribute,
|
|
138
136
|
...child === null || child === void 0 ? void 0 : child.props,
|
|
139
137
|
ref: useMergedRefs(triggerRef, child === null || child === void 0 ? void 0 : child.ref),
|
|
140
138
|
onMouseEnter: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseEnter, onMouseEnter)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMenuTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport { useFocusFinders, useRestoreFocusTarget } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n isHTMLElement,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\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 const restoreFocusTargetAttribute = useRestoreFocusTarget();\n\n const isSubmenu = useIsSubmenu();\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 hasMouseMoved = React.useRef(false);\n\n const { dir } = useFluent();\n const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n const child = getTriggerChild(children);\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)) {\n return;\n }\n\n const key = event.key;\n\n if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\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) {\n focusFirst();\n }\n };\n\n const onMouseEnter = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n if (openOnHover && hasMouseMoved.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseEnter', event });\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 && !hasMouseMoved.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseMove', event });\n hasMouseMoved.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 ...restoreFocusTargetAttribute,\n ...child?.props,\n ref: useMergedRefs(triggerRef, child?.ref),\n onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)),\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 };\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":["React","useMenuContext_unstable","useIsSubmenu","useFocusFinders","useRestoreFocusTarget","useFluent_unstable","useFluent","ArrowRight","ArrowLeft","Escape","ArrowDown","applyTriggerPropsToChildren","getTriggerChild","isHTMLElement","mergeCallbacks","useEventCallback","useMergedRefs","useARIAButtonProps","useMenuTrigger_unstable","props","children","disableButtonEnhancement","triggerRef","context","menuPopoverRef","setOpen","open","triggerId","openOnHover","openOnContext","restoreFocusTargetAttribute","isSubmenu","findFirstFocusable","focusFirst","useCallback","firstFocusable","current","focus","openedWithKeyboardRef","useRef","hasMouseMoved","dir","OpenArrowKey","child","onContextMenu","event","isTargetDisabled","isDefaultPrevented","preventDefault","keyboard","type","onClick","onKeyDown","key","onMouseEnter","onMouseMove","onMouseLeave","contextMenuProps","id","ref","triggerChildProps","undefined","ariaButtonTriggerChildProps","isDisabled","el","hasAttribute","getAttribute","target","currentTarget"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,eAAe,EAAEC,qBAAqB,QAAQ,0BAA0B;AACjF,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,SAAS,QAAQ,0BAA0B;AACnF,SACEC,2BAA2B,EAC3BC,eAAe,EACfC,aAAa,EACbC,cAAc,EACdC,gBAAgB,EAChBC,aAAa,QACR,4BAA4B;AACnC,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D;;;;;CAKC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtC,MAAM,EAAEC,QAAQ,EAAEC,2BAA2B,KAAK,EAAE,GAAGF;IAEvD,MAAMG,aAAarB,wBAAwBsB,CAAAA,UAAWA,QAAQD,UAAU;IACxE,MAAME,iBAAiBvB,wBAAwBsB,CAAAA,UAAWA,QAAQC,cAAc;IAChF,MAAMC,UAAUxB,wBAAwBsB,CAAAA,UAAWA,QAAQE,OAAO;IAClE,MAAMC,OAAOzB,wBAAwBsB,CAAAA,UAAWA,QAAQG,IAAI;IAC5D,MAAMC,YAAY1B,wBAAwBsB,CAAAA,UAAWA,QAAQI,SAAS;IACtE,MAAMC,cAAc3B,wBAAwBsB,CAAAA,UAAWA,QAAQK,WAAW;IAC1E,MAAMC,gBAAgB5B,wBAAwBsB,CAAAA,UAAWA,QAAQM,aAAa;IAC9E,MAAMC,8BAA8B1B;IAEpC,MAAM2B,YAAY7B;IAElB,MAAM,EAAE8B,kBAAkB,EAAE,GAAG7B;IAC/B,MAAM8B,aAAajC,MAAMkC,WAAW,CAAC;QACnC,MAAMC,iBAAiBH,mBAAmBR,eAAeY,OAAO;QAChED,2BAAAA,qCAAAA,eAAgBE,KAAK;IACvB,GAAG;QAACL;QAAoBR;KAAe;IAEvC,MAAMc,wBAAwBtC,MAAMuC,MAAM,CAAC;IAC3C,MAAMC,gBAAgBxC,MAAMuC,MAAM,CAAC;IAEnC,MAAM,EAAEE,GAAG,EAAE,GAAGnC;IAChB,MAAMoC,eAAeD,QAAQ,QAAQlC,aAAaC;IAElD,MAAMmC,QAAQ/B,gBAAgBQ;IAE9B,MAAMwB,gBAAgB,CAACC;QACrB,IAAIC,iBAAiBD,UAAUA,MAAME,kBAAkB,IAAI;YACzD;QACF;QAEA,IAAIlB,eAAe;YACjBgB,MAAMG,cAAc;YACpBvB,QAAQoB,OAAO;gBAAEnB,MAAM;gBAAMuB,UAAU;gBAAOC,MAAM;gBAA0BL;YAAM;QACtF;IACF;IAEA,MAAMM,UAAU,CAACN;QACf,IAAIC,iBAAiBD,QAAQ;YAC3B;QACF;QAEA,IAAI,CAAChB,eAAe;YAClBJ,QAAQoB,OAAO;gBAAEnB,MAAM,CAACA;gBAAMuB,UAAUX,sBAAsBF,OAAO;gBAAEc,MAAM;gBAAoBL;YAAM;YACvGP,sBAAsBF,OAAO,GAAG;QAClC;IACF;IAEA,MAAMgB,YAAY,CAACP;QACjB,IAAIC,iBAAiBD,QAAQ;YAC3B;QACF;QAEA,MAAMQ,MAAMR,MAAMQ,GAAG;QAErB,IAAI,CAACxB,iBAAkB,CAAA,AAACE,aAAasB,QAAQX,gBAAkB,CAACX,aAAasB,QAAQ3C,SAAS,GAAI;YAChGe,QAAQoB,OAAO;gBAAEnB,MAAM;gBAAMuB,UAAU;gBAAMC,MAAM;gBAAsBL;YAAM;QACjF;QAEA,IAAIQ,QAAQ5C,UAAU,CAACsB,WAAW;YAChCN,QAAQoB,OAAO;gBAAEnB,MAAM;gBAAOuB,UAAU;gBAAMC,MAAM;gBAAsBL;YAAM;QAClF;QAEA,0DAA0D;QAC1D,IAAInB,QAAQ2B,QAAQX,gBAAgBX,WAAW;YAC7CE;QACF;IACF;IAEA,MAAMqB,eAAe,CAACT;QACpB,IAAIC,iBAAiBD,QAAQ;YAC3B;QACF;QACA,IAAIjB,eAAeY,cAAcJ,OAAO,EAAE;YACxCX,QAAQoB,OAAO;gBAAEnB,MAAM;gBAAMuB,UAAU;gBAAOC,MAAM;gBAAyBL;YAAM;QACrF;IACF;IAEA,kGAAkG;IAClG,8EAA8E;IAC9E,uGAAuG;IACvG,MAAMU,cAAc,CAACV;QACnB,IAAIC,iBAAiBD,QAAQ;YAC3B;QACF;QACA,IAAIjB,eAAe,CAACY,cAAcJ,OAAO,EAAE;YACzCX,QAAQoB,OAAO;gBAAEnB,MAAM;gBAAMuB,UAAU;gBAAOC,MAAM;gBAAwBL;YAAM;YAClFL,cAAcJ,OAAO,GAAG;QAC1B;IACF;IAEA,MAAMoB,eAAe,CAACX;QACpB,IAAIC,iBAAiBD,QAAQ;YAC3B;QACF;QACA,IAAIjB,aAAa;YACfH,QAAQoB,OAAO;gBAAEnB,MAAM;gBAAOuB,UAAU;gBAAOC,MAAM;gBAAyBL;YAAM;QACtF;IACF;IAEA,MAAMY,mBAAmB;QACvBC,IAAI/B;QACJ,GAAGG,2BAA2B;WAC3Ba,kBAAAA,4BAAAA,MAAOxB,KAAK,AAAf;QACAwC,KAAK3C,cAAcM,YAAYqB,kBAAAA,4BAAAA,MAAOgB,GAAG;QACzCL,cAAcvC,iBAAiBD,eAAe6B,kBAAAA,4BAAAA,MAAOxB,KAAK,CAACmC,YAAY,EAAEA;QACzEE,cAAczC,iBAAiBD,eAAe6B,kBAAAA,4BAAAA,MAAOxB,KAAK,CAACqC,YAAY,EAAEA;QACzEZ,eAAe7B,iBAAiBD,eAAe6B,kBAAAA,4BAAAA,MAAOxB,KAAK,CAACyB,aAAa,EAAEA;QAC3EW,aAAaxC,iBAAiBD,eAAe6B,kBAAAA,4BAAAA,MAAOxB,KAAK,CAACoC,WAAW,EAAEA;IACzE;IAEA,MAAMK,oBAAoB;QACxB,iBAAiB;QACjB,iBAAiB,CAAClC,QAAQ,CAACK,YAAY8B,YAAYnC;QACnD,GAAG+B,gBAAgB;QACnBN,SAASpC,iBAAiBD,eAAe6B,kBAAAA,4BAAAA,MAAOxB,KAAK,CAACgC,OAAO,EAAEA;QAC/DC,WAAWrC,iBAAiBD,eAAe6B,kBAAAA,4BAAAA,MAAOxB,KAAK,CAACiC,SAAS,EAAEA;IACrE;IAEA,MAAMU,8BAA8B7C,mBAClC0B,CAAAA,kBAAAA,4BAAAA,MAAOO,IAAI,MAAK,YAAYP,CAAAA,kBAAAA,4BAAAA,MAAOO,IAAI,MAAK,MAAMP,MAAMO,IAAI,GAAG,OAC/DU;IAGF,OAAO;QACL7B;QACAX,UAAUT,4BACRS,UACAS,gBAAgB4B,mBAAmBpC,2BAA2BuC,oBAAoBE;IAEtF;AACF,EAAE;AAEF,MAAMhB,mBAAmB,CAACD;IACxB,MAAMkB,aAAa,CAACC,KAClBA,GAAGC,YAAY,CAAC,eAAgBD,GAAGC,YAAY,CAAC,oBAAoBD,GAAGE,YAAY,CAAC,qBAAqB;IAC3G,IAAIrD,cAAcgC,MAAMsB,MAAM,KAAKJ,WAAWlB,MAAMsB,MAAM,GAAG;QAC3D,OAAO;IACT;IAEA,OAAOtD,cAAcgC,MAAMuB,aAAa,KAAKL,WAAWlB,MAAMuB,aAAa;AAC7E"}
|
|
1
|
+
{"version":3,"sources":["useMenuTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n isHTMLElement,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\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\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 hasMouseMoved = React.useRef(false);\n\n const { dir } = useFluent();\n const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n const child = getTriggerChild(children);\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)) {\n return;\n }\n\n const key = event.key;\n\n if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\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) {\n focusFirst();\n }\n };\n\n const onMouseEnter = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n if (openOnHover && hasMouseMoved.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseEnter', event });\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 && !hasMouseMoved.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseMove', event });\n hasMouseMoved.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, child?.ref),\n onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)),\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 };\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":["React","useMenuContext_unstable","useIsSubmenu","useFocusFinders","useFluent_unstable","useFluent","ArrowRight","ArrowLeft","Escape","ArrowDown","applyTriggerPropsToChildren","getTriggerChild","isHTMLElement","mergeCallbacks","useEventCallback","useMergedRefs","useARIAButtonProps","useMenuTrigger_unstable","props","children","disableButtonEnhancement","triggerRef","context","menuPopoverRef","setOpen","open","triggerId","openOnHover","openOnContext","isSubmenu","findFirstFocusable","focusFirst","useCallback","firstFocusable","current","focus","openedWithKeyboardRef","useRef","hasMouseMoved","dir","OpenArrowKey","child","onContextMenu","event","isTargetDisabled","isDefaultPrevented","preventDefault","keyboard","type","onClick","onKeyDown","key","onMouseEnter","onMouseMove","onMouseLeave","contextMenuProps","id","ref","triggerChildProps","undefined","ariaButtonTriggerChildProps","isDisabled","el","hasAttribute","getAttribute","target","currentTarget"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -128,6 +128,7 @@ const useMenu_unstable = (props)=>{
|
|
|
128
128
|
];
|
|
129
129
|
};
|
|
130
130
|
const useMenuOpenState = (state)=>{
|
|
131
|
+
'use no memo';
|
|
131
132
|
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
132
133
|
const parentSetOpen = (0, _menuContext.useMenuContext_unstable)((context)=>context.setOpen);
|
|
133
134
|
const onOpenChange = (0, _reactutilities.useEventCallback)((e, data)=>{
|
|
@@ -232,13 +233,32 @@ const useMenuOpenState = (state)=>{
|
|
|
232
233
|
findFirstFocusable,
|
|
233
234
|
state.menuPopoverRef
|
|
234
235
|
]);
|
|
236
|
+
const firstMount = (0, _reactutilities.useFirstMount)();
|
|
235
237
|
_react.useEffect(()=>{
|
|
236
238
|
if (open) {
|
|
237
239
|
focusFirst();
|
|
240
|
+
} else {
|
|
241
|
+
if (!firstMount) {
|
|
242
|
+
if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body)) {
|
|
243
|
+
var // after any event handler (event handlers will update state and re-render).
|
|
244
|
+
// Since the browser only performs the default behaviour for the Tab key once
|
|
245
|
+
// keyboard events have fully bubbled up the window, the browser will move
|
|
246
|
+
// focus to the next tabbable element before/after the trigger if needed.
|
|
247
|
+
// If the Tab key was not pressed, focus will remain on the trigger as expected.
|
|
248
|
+
_state_triggerRef_current;
|
|
249
|
+
(_state_triggerRef_current = state.triggerRef.current) === null || _state_triggerRef_current === void 0 ? void 0 : _state_triggerRef_current.focus();
|
|
250
|
+
}
|
|
251
|
+
}
|
|
238
252
|
}
|
|
253
|
+
// firstMount change should not re-run this effect
|
|
254
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
239
255
|
}, [
|
|
256
|
+
state.triggerRef,
|
|
257
|
+
state.isSubmenu,
|
|
240
258
|
open,
|
|
241
|
-
focusFirst
|
|
259
|
+
focusFirst,
|
|
260
|
+
targetDocument,
|
|
261
|
+
state.menuPopoverRef
|
|
242
262
|
]);
|
|
243
263
|
return [
|
|
244
264
|
open,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n usePositioningMouseTarget,\n usePositioning,\n resolvePositioningShorthand,\n PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n useControllableState,\n useId,\n useOnClickOutside,\n useEventCallback,\n useOnScrollOutside,\n elementContains,\n useTimeout,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuOpenChangeData, MenuOpenEvent, MenuProps, MenuState } from './Menu.types';\n\n// If it's not possible to position the submenu in smaller viewports, try\n// and fallback to this order of positions\nconst submenuFallbackPositions: PositioningShorthandValue[] = [\n 'after',\n 'after-bottom',\n 'before-top',\n 'before',\n 'before-bottom',\n 'above',\n];\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n const isSubmenu = useIsSubmenu();\n const {\n hoverDelay = 500,\n inline = false,\n hasCheckmarks = false,\n hasIcons = false,\n closeOnScroll = false,\n openOnContext = false,\n persistOnItemClick = false,\n openOnHover = isSubmenu,\n defaultCheckedValues,\n mountNode = null,\n } = props;\n const triggerId = useId('menu');\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n const positioningState = {\n position: isSubmenu ? 'after' : 'below',\n align: isSubmenu ? 'top' : 'start',\n target: props.openOnContext ? contextTarget : undefined,\n fallbackPositions: isSubmenu ? submenuFallbackPositions : undefined,\n ...resolvePositioningShorthand(props.positioning),\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at most two children');\n }\n }\n\n let menuTrigger: React.ReactElement | undefined = undefined;\n let menuPopover: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n menuTrigger = children[0];\n menuPopover = children[1];\n } else if (children.length === 1) {\n menuPopover = children[0];\n }\n\n const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n // TODO Better way to narrow types ?\n const [open, setOpen] = useMenuOpenState({\n hoverDelay,\n isSubmenu,\n setContextTarget,\n closeOnScroll,\n menuPopoverRef,\n triggerRef,\n open: props.open,\n defaultOpen: props.defaultOpen,\n onOpenChange: props.onOpenChange,\n openOnContext,\n });\n\n const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n return {\n inline,\n hoverDelay,\n triggerId,\n isSubmenu,\n openOnHover,\n contextTarget,\n setContextTarget,\n hasCheckmarks,\n hasIcons,\n closeOnScroll,\n menuTrigger,\n menuPopover,\n mountNode,\n triggerRef,\n menuPopoverRef,\n components: {},\n openOnContext,\n open,\n setOpen,\n checkedValues,\n onCheckedValueChange,\n persistOnItemClick,\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: props.checkedValues,\n defaultState: props.defaultCheckedValues,\n initialState: {},\n });\n const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n props.onCheckedValueChange?.(e, { name, checkedItems });\n\n setCheckedValues(currentValue => ({\n ...currentValue,\n [name]: checkedItems,\n }));\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n state: Pick<\n MenuState,\n | 'isSubmenu'\n | 'menuPopoverRef'\n | 'setContextTarget'\n | 'triggerRef'\n | 'openOnContext'\n | 'closeOnScroll'\n | 'hoverDelay'\n > &\n Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n const { targetDocument } = useFluent();\n const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n const onOpenChange: MenuProps['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const enteringTriggerRef = React.useRef(false);\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n\n const trySetOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n onOpenChange?.(event, { ...data });\n if (data.open && e.type === 'contextmenu') {\n state.setContextTarget(e as React.MouseEvent);\n }\n\n if (!data.open) {\n state.setContextTarget(undefined);\n }\n\n if (data.bubble) {\n parentSetOpen(e, { ...data });\n }\n\n setOpenState(data.open);\n });\n\n const [setOpenTimeout, clearOpenTimeout] = useTimeout();\n\n const setOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n clearOpenTimeout();\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n }\n\n setOpenTimeout(() => trySetOpen(e, data), state.hoverDelay);\n } else {\n trySetOpen(e, data);\n }\n });\n\n useOnClickOutside({\n contains: elementContains,\n disabled: !open,\n element: targetDocument,\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n callback: event => setOpen(event, { open: false, type: 'clickOutside', event }),\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = state.openOnContext || state.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }),\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n disabled: !open || !closeOnScroll,\n });\n\n useOnMenuMouseEnter({\n element: targetDocument,\n callback: event => {\n // When moving from a menu directly back to its trigger, this handler can close the menu\n // Explicitly check a flag to see if this situation happens\n if (!enteringTriggerRef.current) {\n setOpen(event, { open: false, type: 'menuMouseEnter', event });\n }\n },\n disabled: !open,\n refs: [state.menuPopoverRef],\n });\n\n // Manage focus for open state\n const { findFirstFocusable } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, state.menuPopoverRef]);\n\n React.useEffect(() => {\n if (open) {\n focusFirst();\n }\n }, [open, focusFirst]);\n\n return [open, setOpen] as const;\n};\n"],"names":["useMenu_unstable","submenuFallbackPositions","props","isSubmenu","useIsSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","mountNode","triggerId","useId","contextTarget","setContextTarget","usePositioningMouseTarget","positioningState","position","align","target","undefined","fallbackPositions","resolvePositioningShorthand","positioning","children","React","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","triggerRef","containerRef","menuPopoverRef","usePositioning","open","setOpen","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","setCheckedValues","useControllableState","state","defaultState","initialState","useEventCallback","e","name","checkedItems","currentValue","targetDocument","useFluent","parentSetOpen","useMenuContext_unstable","context","data","enteringTriggerRef","useRef","setOpenState","trySetOpen","event","CustomEvent","type","MENU_ENTER_EVENT","detail","nativeEvent","bubble","setOpenTimeout","clearOpenTimeout","useTimeout","Event","persist","current","contains","useOnClickOutside","elementContains","disabled","element","refs","filter","Boolean","callback","useOnScrollOutside","useOnMenuMouseEnter","findFirstFocusable","useFocusFinders","focusFirst","useCallback","firstFocusable","focus","useEffect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n usePositioningMouseTarget,\n usePositioning,\n resolvePositioningShorthand,\n PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n useControllableState,\n useId,\n useOnClickOutside,\n useEventCallback,\n useOnScrollOutside,\n elementContains,\n useTimeout,\n useFirstMount,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuOpenChangeData, MenuOpenEvent, MenuProps, MenuState } from './Menu.types';\n\n// If it's not possible to position the submenu in smaller viewports, try\n// and fallback to this order of positions\nconst submenuFallbackPositions: PositioningShorthandValue[] = [\n 'after',\n 'after-bottom',\n 'before-top',\n 'before',\n 'before-bottom',\n 'above',\n];\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n const isSubmenu = useIsSubmenu();\n const {\n hoverDelay = 500,\n inline = false,\n hasCheckmarks = false,\n hasIcons = false,\n closeOnScroll = false,\n openOnContext = false,\n persistOnItemClick = false,\n openOnHover = isSubmenu,\n defaultCheckedValues,\n mountNode = null,\n } = props;\n const triggerId = useId('menu');\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n const positioningState = {\n position: isSubmenu ? 'after' : 'below',\n align: isSubmenu ? 'top' : 'start',\n target: props.openOnContext ? contextTarget : undefined,\n fallbackPositions: isSubmenu ? submenuFallbackPositions : undefined,\n ...resolvePositioningShorthand(props.positioning),\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at most two children');\n }\n }\n\n let menuTrigger: React.ReactElement | undefined = undefined;\n let menuPopover: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n menuTrigger = children[0];\n menuPopover = children[1];\n } else if (children.length === 1) {\n menuPopover = children[0];\n }\n\n const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n // TODO Better way to narrow types ?\n const [open, setOpen] = useMenuOpenState({\n hoverDelay,\n isSubmenu,\n setContextTarget,\n closeOnScroll,\n menuPopoverRef,\n triggerRef,\n open: props.open,\n defaultOpen: props.defaultOpen,\n onOpenChange: props.onOpenChange,\n openOnContext,\n });\n\n const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n return {\n inline,\n hoverDelay,\n triggerId,\n isSubmenu,\n openOnHover,\n contextTarget,\n setContextTarget,\n hasCheckmarks,\n hasIcons,\n closeOnScroll,\n menuTrigger,\n menuPopover,\n mountNode,\n triggerRef,\n menuPopoverRef,\n components: {},\n openOnContext,\n open,\n setOpen,\n checkedValues,\n onCheckedValueChange,\n persistOnItemClick,\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: props.checkedValues,\n defaultState: props.defaultCheckedValues,\n initialState: {},\n });\n const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n props.onCheckedValueChange?.(e, { name, checkedItems });\n\n setCheckedValues(currentValue => ({\n ...currentValue,\n [name]: checkedItems,\n }));\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n state: Pick<\n MenuState,\n | 'isSubmenu'\n | 'menuPopoverRef'\n | 'setContextTarget'\n | 'triggerRef'\n | 'openOnContext'\n | 'closeOnScroll'\n | 'hoverDelay'\n > &\n Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n 'use no memo';\n\n const { targetDocument } = useFluent();\n const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n const onOpenChange: MenuProps['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const enteringTriggerRef = React.useRef(false);\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n\n const trySetOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n onOpenChange?.(event, { ...data });\n if (data.open && e.type === 'contextmenu') {\n state.setContextTarget(e as React.MouseEvent);\n }\n\n if (!data.open) {\n state.setContextTarget(undefined);\n }\n\n if (data.bubble) {\n parentSetOpen(e, { ...data });\n }\n\n setOpenState(data.open);\n });\n\n const [setOpenTimeout, clearOpenTimeout] = useTimeout();\n\n const setOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n clearOpenTimeout();\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n }\n\n setOpenTimeout(() => trySetOpen(e, data), state.hoverDelay);\n } else {\n trySetOpen(e, data);\n }\n });\n\n useOnClickOutside({\n contains: elementContains,\n disabled: !open,\n element: targetDocument,\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n callback: event => setOpen(event, { open: false, type: 'clickOutside', event }),\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = state.openOnContext || state.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }),\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n disabled: !open || !closeOnScroll,\n });\n\n useOnMenuMouseEnter({\n element: targetDocument,\n callback: event => {\n // When moving from a menu directly back to its trigger, this handler can close the menu\n // Explicitly check a flag to see if this situation happens\n if (!enteringTriggerRef.current) {\n setOpen(event, { open: false, type: 'menuMouseEnter', event });\n }\n },\n disabled: !open,\n refs: [state.menuPopoverRef],\n });\n\n // Manage focus for open state\n const { findFirstFocusable } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, state.menuPopoverRef]);\n\n const firstMount = useFirstMount();\n React.useEffect(() => {\n if (open) {\n focusFirst();\n } else {\n if (!firstMount) {\n if (targetDocument?.activeElement === targetDocument?.body) {\n // We know that React effects are sync so we focus the trigger here\n // after any event handler (event handlers will update state and re-render).\n // Since the browser only performs the default behaviour for the Tab key once\n // keyboard events have fully bubbled up the window, the browser will move\n // focus to the next tabbable element before/after the trigger if needed.\n // If the Tab key was not pressed, focus will remain on the trigger as expected.\n state.triggerRef.current?.focus();\n }\n }\n }\n // firstMount change should not re-run this effect\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef]);\n\n return [open, setOpen] as const;\n};\n"],"names":["useMenu_unstable","submenuFallbackPositions","props","isSubmenu","useIsSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","mountNode","triggerId","useId","contextTarget","setContextTarget","usePositioningMouseTarget","positioningState","position","align","target","undefined","fallbackPositions","resolvePositioningShorthand","positioning","children","React","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","triggerRef","containerRef","menuPopoverRef","usePositioning","open","setOpen","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","setCheckedValues","useControllableState","state","defaultState","initialState","useEventCallback","e","name","checkedItems","currentValue","targetDocument","useFluent","parentSetOpen","useMenuContext_unstable","context","data","enteringTriggerRef","useRef","setOpenState","trySetOpen","event","CustomEvent","type","MENU_ENTER_EVENT","detail","nativeEvent","bubble","setOpenTimeout","clearOpenTimeout","useTimeout","Event","persist","current","contains","useOnClickOutside","elementContains","disabled","element","refs","filter","Boolean","callback","useOnScrollOutside","useOnMenuMouseEnter","findFirstFocusable","useFocusFinders","focusFirst","useCallback","firstFocusable","focus","firstMount","useFirstMount","useEffect","activeElement","body"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -26,7 +26,6 @@ const useMenuTrigger_unstable = (props)=>{
|
|
|
26
26
|
const triggerId = (0, _menuContext.useMenuContext_unstable)((context)=>context.triggerId);
|
|
27
27
|
const openOnHover = (0, _menuContext.useMenuContext_unstable)((context)=>context.openOnHover);
|
|
28
28
|
const openOnContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.openOnContext);
|
|
29
|
-
const restoreFocusTargetAttribute = (0, _reacttabster.useRestoreFocusTarget)();
|
|
30
29
|
const isSubmenu = (0, _useIsSubmenu.useIsSubmenu)();
|
|
31
30
|
const { findFirstFocusable } = (0, _reacttabster.useFocusFinders)();
|
|
32
31
|
const focusFirst = _react.useCallback(()=>{
|
|
@@ -140,7 +139,6 @@ const useMenuTrigger_unstable = (props)=>{
|
|
|
140
139
|
};
|
|
141
140
|
const contextMenuProps = {
|
|
142
141
|
id: triggerId,
|
|
143
|
-
...restoreFocusTargetAttribute,
|
|
144
142
|
...child === null || child === void 0 ? void 0 : child.props,
|
|
145
143
|
ref: (0, _reactutilities.useMergedRefs)(triggerRef, child === null || child === void 0 ? void 0 : child.ref),
|
|
146
144
|
onMouseEnter: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : child.props.onMouseEnter, onMouseEnter)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMenuTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport { useFocusFinders, useRestoreFocusTarget } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n isHTMLElement,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\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 const restoreFocusTargetAttribute = useRestoreFocusTarget();\n\n const isSubmenu = useIsSubmenu();\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 hasMouseMoved = React.useRef(false);\n\n const { dir } = useFluent();\n const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n const child = getTriggerChild(children);\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)) {\n return;\n }\n\n const key = event.key;\n\n if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\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) {\n focusFirst();\n }\n };\n\n const onMouseEnter = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n if (openOnHover && hasMouseMoved.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseEnter', event });\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 && !hasMouseMoved.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseMove', event });\n hasMouseMoved.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 ...restoreFocusTargetAttribute,\n ...child?.props,\n ref: useMergedRefs(triggerRef, child?.ref),\n onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)),\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 };\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":["useMenuTrigger_unstable","props","children","disableButtonEnhancement","triggerRef","useMenuContext_unstable","context","menuPopoverRef","setOpen","open","triggerId","openOnHover","openOnContext","restoreFocusTargetAttribute","useRestoreFocusTarget","isSubmenu","useIsSubmenu","findFirstFocusable","useFocusFinders","focusFirst","React","useCallback","firstFocusable","current","focus","openedWithKeyboardRef","useRef","hasMouseMoved","dir","useFluent","OpenArrowKey","ArrowRight","ArrowLeft","child","getTriggerChild","onContextMenu","event","isTargetDisabled","isDefaultPrevented","preventDefault","keyboard","type","onClick","onKeyDown","key","ArrowDown","Escape","onMouseEnter","onMouseMove","onMouseLeave","contextMenuProps","id","ref","useMergedRefs","useEventCallback","mergeCallbacks","triggerChildProps","undefined","ariaButtonTriggerChildProps","useARIAButtonProps","applyTriggerPropsToChildren","isDisabled","el","hasAttribute","getAttribute","isHTMLElement","target","currentTarget"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useMenuTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n isHTMLElement,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\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\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 hasMouseMoved = React.useRef(false);\n\n const { dir } = useFluent();\n const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n const child = getTriggerChild(children);\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)) {\n return;\n }\n\n const key = event.key;\n\n if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\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) {\n focusFirst();\n }\n };\n\n const onMouseEnter = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n if (openOnHover && hasMouseMoved.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseEnter', event });\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 && !hasMouseMoved.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseMove', event });\n hasMouseMoved.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, child?.ref),\n onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)),\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 };\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":["useMenuTrigger_unstable","props","children","disableButtonEnhancement","triggerRef","useMenuContext_unstable","context","menuPopoverRef","setOpen","open","triggerId","openOnHover","openOnContext","isSubmenu","useIsSubmenu","findFirstFocusable","useFocusFinders","focusFirst","React","useCallback","firstFocusable","current","focus","openedWithKeyboardRef","useRef","hasMouseMoved","dir","useFluent","OpenArrowKey","ArrowRight","ArrowLeft","child","getTriggerChild","onContextMenu","event","isTargetDisabled","isDefaultPrevented","preventDefault","keyboard","type","onClick","onKeyDown","key","ArrowDown","Escape","onMouseEnter","onMouseMove","onMouseLeave","contextMenuProps","id","ref","useMergedRefs","useEventCallback","mergeCallbacks","triggerChildProps","undefined","ariaButtonTriggerChildProps","useARIAButtonProps","applyTriggerPropsToChildren","isDisabled","el","hasAttribute","getAttribute","isHTMLElement","target","currentTarget"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-menu",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20240925-0407.1",
|
|
4
4
|
"description": "Fluent UI menu component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,26 +27,26 @@
|
|
|
27
27
|
"generate-api": "just-scripts generate-api"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@fluentui/react-provider": "0.0.0-nightly-
|
|
30
|
+
"@fluentui/react-provider": "0.0.0-nightly-20240925-0407.1",
|
|
31
31
|
"@fluentui/eslint-plugin": "*",
|
|
32
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
33
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
32
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20240925-0407.1",
|
|
33
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20240925-0407.1",
|
|
34
34
|
"@fluentui/scripts-api-extractor": "*",
|
|
35
35
|
"@fluentui/scripts-cypress": "*",
|
|
36
36
|
"@fluentui/scripts-tasks": "*"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@fluentui/keyboard-keys": "0.0.0-nightly-
|
|
40
|
-
"@fluentui/react-aria": "0.0.0-nightly-
|
|
41
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
|
39
|
+
"@fluentui/keyboard-keys": "0.0.0-nightly-20240925-0407.1",
|
|
40
|
+
"@fluentui/react-aria": "0.0.0-nightly-20240925-0407.1",
|
|
41
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20240925-0407.1",
|
|
42
42
|
"@fluentui/react-icons": "^2.0.245",
|
|
43
|
-
"@fluentui/react-portal": "0.0.0-nightly-
|
|
44
|
-
"@fluentui/react-positioning": "0.0.0-nightly-
|
|
45
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
46
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
47
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
48
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
49
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
43
|
+
"@fluentui/react-portal": "0.0.0-nightly-20240925-0407.1",
|
|
44
|
+
"@fluentui/react-positioning": "0.0.0-nightly-20240925-0407.1",
|
|
45
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20240925-0407.1",
|
|
46
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20240925-0407.1",
|
|
47
|
+
"@fluentui/react-theme": "0.0.0-nightly-20240925-0407.1",
|
|
48
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20240925-0407.1",
|
|
49
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20240925-0407.1",
|
|
50
50
|
"@griffel/react": "^1.5.22",
|
|
51
51
|
"@swc/helpers": "^0.5.1"
|
|
52
52
|
},
|