@fluentui/react-menu 9.14.15 → 9.14.16
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +20 -2
- 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 +10 -10
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,30 @@
|
|
1
1
|
# Change Log - @fluentui/react-menu
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Mon, 23 Sep 2024 12:36:01 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.14.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.14.16)
|
8
|
+
|
9
|
+
Mon, 23 Sep 2024 12:36:01 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.14.15..@fluentui/react-menu_v9.14.16)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- fix(Menu): Do not rely on tabster restorer for focus restore ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by lingfangao@hotmail.com)
|
15
|
+
- Bump @fluentui/react-aria to v9.13.6 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
16
|
+
- Bump @fluentui/react-context-selector to v9.1.67 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
17
|
+
- Bump @fluentui/react-portal to v9.4.35 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
18
|
+
- Bump @fluentui/react-positioning to v9.15.9 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
19
|
+
- Bump @fluentui/react-shared-contexts to v9.20.1 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
20
|
+
- Bump @fluentui/react-tabster to v9.22.7 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
21
|
+
- Bump @fluentui/react-theme to v9.1.20 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
22
|
+
- Bump @fluentui/react-utilities to v9.18.15 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
23
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.44 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
24
|
+
|
7
25
|
## [9.14.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.14.15)
|
8
26
|
|
9
|
-
Tue, 10 Sep 2024 10:
|
27
|
+
Tue, 10 Sep 2024 10:19:12 GMT
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.14.14..@fluentui/react-menu_v9.14.15)
|
11
29
|
|
12
30
|
### Patches
|
@@ -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":"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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":["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":";;;;+BA2CaA;;;eAAAA;;;;iEA3CU;kCAMhB;gCAUA;qCACyC;8BAChB;6BACQ;uBACc;8BACzB;AAG7B,yEAAyE;AACzE,0CAA0C;AAC1C,MAAMC,2BAAwD;IAC5D;IACA;IACA;IACA;IACA;IACA;CACD;AAUM,MAAMD,mBAAmB,CAACE;IAC/B,MAAMC,YAAYC,IAAAA,0BAAAA;IAClB,MAAM,EACJC,aAAa,GAAG,EAChBC,SAAS,KAAK,EACdC,gBAAgB,KAAK,EACrBC,WAAW,KAAK,EAChBC,gBAAgB,KAAK,EACrBC,gBAAgB,KAAK,EACrBC,qBAAqB,KAAK,EAC1BC,cAAcT,SAAS,EACvBU,oBAAoB,EACpBC,YAAY,IAAI,EACjB,GAAGZ;IACJ,MAAMa,YAAYC,IAAAA,qBAAAA,EAAM;IACxB,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,IAAAA,2CAAAA;IAE1C,MAAMC,mBAAmB;QACvBC,UAAUlB,YAAY,UAAU;QAChCmB,OAAOnB,YAAY,QAAQ;QAC3BoB,QAAQrB,MAAMQ,aAAa,GAAGO,gBAAgBO;QAC9CC,mBAAmBtB,YAAYF,2BAA2BuB;QAC1D,GAAGE,IAAAA,6CAAAA,EAA4BxB,MAAMyB,WAAW,CAAC;IACnD;IAEA,MAAMC,WAAWC,OAAMC,QAAQ,CAACC,OAAO,CAAC7B,MAAM0B,QAAQ;IAEtD,IAAII,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIN,SAASO,MAAM,KAAK,GAAG;YACzB,sCAAsC;YACtCC,QAAQC,IAAI,CAAC;QACf;QAEA,IAAIT,SAASO,MAAM,GAAG,GAAG;YACvB,sCAAsC;YACtCC,QAAQC,IAAI,CAAC;QACf;IACF;IAEA,IAAIC,cAA8Cd;IAClD,IAAIe,cAA8Cf;IAClD,IAAII,SAASO,MAAM,KAAK,GAAG;QACzBG,cAAcV,QAAQ,CAAC,EAAE;QACzBW,cAAcX,QAAQ,CAAC,EAAE;IAC3B,OAAO,IAAIA,SAASO,MAAM,KAAK,GAAG;QAChCI,cAAcX,QAAQ,CAAC,EAAE;IAC3B;IAEA,MAAM,EAAEY,WAAWC,UAAU,EAAEC,cAAcC,cAAc,EAAE,GAAGC,IAAAA,gCAAAA,EAAexB;IAE/E,oCAAoC;IACpC,MAAM,CAACyB,MAAMC,QAAQ,GAAGC,iBAAiB;QACvC1C;QACAF;QACAe;QACAT;QACAkC;QACAF;QACAI,MAAM3C,MAAM2C,IAAI;QAChBG,aAAa9C,MAAM8C,WAAW;QAC9BC,cAAc/C,MAAM+C,YAAY;QAChCvC;IACF;IAEA,MAAM,CAACwC,eAAeC,qBAAqB,GAAGC,uBAAuB;QACnEF,eAAehD,MAAMgD,aAAa;QAClCrC;QACAsC,sBAAsBjD,MAAMiD,oBAAoB;IAClD;IAEA,OAAO;QACL7C;QACAD;QACAU;QACAZ;QACAS;QACAK;QACAC;QACAX;QACAC;QACAC;QACA6B;QACAC;QACAzB;QACA2B;QACAE;QACAU,YAAY,CAAC;QACb3C;QACAmC;QACAC;QACAI;QACAC;QACAxC;IACF;AACF;AAEA;;;CAGC,GACD,MAAMyC,yBAAyB,CAC7BlD;IAEA,MAAM,CAACgD,eAAeI,iBAAiB,GAAGC,IAAAA,oCAAAA,EAAqB;QAC7DC,OAAOtD,MAAMgD,aAAa;QAC1BO,cAAcvD,MAAMW,oBAAoB;QACxC6C,cAAc,CAAC;IACjB;IACA,MAAMP,uBAA0DQ,IAAAA,gCAAAA,EAAiB,CAACC,GAAG,EAAEC,IAAI,EAAEC,YAAY,EAAE;YACzG5D;QAAAA,CAAAA,8BAAAA,MAAMiD,oBAAoB,AAApBA,MAAoB,QAA1BjD,gCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,4BAAAA,IAAAA,CAAAA,OAA6B0D,GAAG;YAAEC;YAAMC;QAAa;QAErDR,iBAAiBS,CAAAA,eAAiB,CAAA;gBAChC,GAAGA,YAAY;gBACf,CAACF,KAAK,EAAEC;YACV,CAAA;IACF;IAEA,OAAO;QAACZ;QAAeC;KAAqB;AAC9C;AAEA,MAAMJ,mBAAmB,CACvBS;IAYA;IAEA,MAAM,EAAEQ,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAC3B,MAAMC,gBAAgBC,IAAAA,oCAAAA,EAAwBC,CAAAA,UAAWA,QAAQtB,OAAO;IACxE,MAAMG,eAA0CU,IAAAA,gCAAAA,EAAiB,CAACC,GAAGS;YAASb;eAAAA,CAAAA,sBAAAA,MAAMP,YAAY,AAAZA,MAAY,QAAlBO,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBI,GAAGS;;IAEtG,MAAMC,qBAAqBzC,OAAM0C,MAAM,CAAC;IAExC,MAAM,CAAC1B,MAAM2B,aAAa,GAAGjB,IAAAA,oCAAAA,EAAqB;QAChDC,OAAOA,MAAMX,IAAI;QACjBY,cAAcD,MAAMR,WAAW;QAC/BU,cAAc;IAChB;IAEA,MAAMe,aAAad,IAAAA,gCAAAA,EAAiB,CAACC,GAAkBS;QACrD,MAAMK,QAAQd,aAAae,eAAef,EAAEgB,IAAI,KAAKC,uBAAAA,GAAmBjB,EAAEkB,MAAM,CAACC,WAAW,GAAGnB;QAC/FX,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAeyB,OAAO;YAAE,GAAGL,IAAI;QAAC;QAChC,IAAIA,KAAKxB,IAAI,IAAIe,EAAEgB,IAAI,KAAK,eAAe;YACzCpB,MAAMtC,gBAAgB,CAAC0C;QACzB;QAEA,IAAI,CAACS,KAAKxB,IAAI,EAAE;YACdW,MAAMtC,gBAAgB,CAACM;QACzB;QAEA,IAAI6C,KAAKW,MAAM,EAAE;YACfd,cAAcN,GAAG;gBAAE,GAAGS,IAAI;YAAC;QAC7B;QAEAG,aAAaH,KAAKxB,IAAI;IACxB;IAEA,MAAM,CAACoC,gBAAgBC,iBAAiB,GAAGC,IAAAA,0BAAAA;IAE3C,MAAMrC,UAAUa,IAAAA,gCAAAA,EAAiB,CAACC,GAAkBS;QAClDa;QACA,IAAI,CAAEtB,CAAAA,aAAawB,KAAAA,KAAUxB,EAAEyB,OAAO,EAAE;YACtC,gDAAgD;YAChDzB,EAAEyB,OAAO;QACX;QAEA,IAAIzB,EAAEgB,IAAI,KAAK,gBAAgBhB,EAAEgB,IAAI,KAAK,gBAAgBhB,EAAEgB,IAAI,KAAK,eAAehB,EAAEgB,IAAI,KAAKC,uBAAAA,EAAkB;gBAC3GrB;YAAJ,IAAA,AAAIA,CAAAA,4BAAAA,MAAMf,UAAU,CAAC6C,OAAO,AAAPA,MAAO,QAAxB9B,8BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,0BAA0B+B,QAAQ,CAAC3B,EAAErC,MAAM,GAAkB;gBAC/D+C,mBAAmBgB,OAAO,GAAG1B,EAAEgB,IAAI,KAAK,gBAAgBhB,EAAEgB,IAAI,KAAK;YACrE;YAEAK,eAAe,IAAMR,WAAWb,GAAGS,OAAOb,MAAMnD,UAAU;QAC5D,OAAO;YACLoE,WAAWb,GAAGS;QAChB;IACF;IAEAmB,IAAAA,iCAAAA,EAAkB;QAChBD,UAAUE,+BAAAA;QACVC,UAAU,CAAC7C;QACX8C,SAAS3B;QACT4B,MAAM;YAACpC,MAAMb,cAAc;YAAE,CAACa,MAAM9C,aAAa,IAAI8C,MAAMf,UAAU;SAAC,CAACoD,MAAM,CAC3EC;QAEFC,UAAUrB,CAAAA,QAAS5B,QAAQ4B,OAAO;gBAAE7B,MAAM;gBAAO+B,MAAM;gBAAgBF;YAAM;IAC/E;IAEA,uEAAuE;IACvE,MAAMjE,gBAAgB+C,MAAM9C,aAAa,IAAI8C,MAAM/C,aAAa;IAChEuF,IAAAA,kCAAAA,EAAmB;QACjBT,UAAUE,+BAAAA;QACVE,SAAS3B;QACT+B,UAAUrB,CAAAA,QAAS5B,QAAQ4B,OAAO;gBAAE7B,MAAM;gBAAO+B,MAAM;gBAAiBF;YAAM;QAC9EkB,MAAM;YAACpC,MAAMb,cAAc;YAAE,CAACa,MAAM9C,aAAa,IAAI8C,MAAMf,UAAU;SAAC,CAACoD,MAAM,CAC3EC;QAEFJ,UAAU,CAAC7C,QAAQ,CAACpC;IACtB;IAEAwF,IAAAA,0BAAAA,EAAoB;QAClBN,SAAS3B;QACT+B,UAAUrB,CAAAA;YACR,wFAAwF;YACxF,2DAA2D;YAC3D,IAAI,CAACJ,mBAAmBgB,OAAO,EAAE;gBAC/BxC,QAAQ4B,OAAO;oBAAE7B,MAAM;oBAAO+B,MAAM;oBAAkBF;gBAAM;YAC9D;QACF;QACAgB,UAAU,CAAC7C;QACX+C,MAAM;YAACpC,MAAMb,cAAc;SAAC;IAC9B;IAEA,8BAA8B;IAC9B,MAAM,EAAEuD,kBAAkB,EAAE,GAAGC,IAAAA,6BAAAA;IAC/B,MAAMC,aAAavE,OAAMwE,WAAW,CAAC;QACnC,MAAMC,iBAAiBJ,mBAAmB1C,MAAMb,cAAc,CAAC2C,OAAO;QACtEgB,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBC,KAAK;IACvB,GAAG;QAACL;QAAoB1C,MAAMb,cAAc;KAAC;IAE7C,MAAM6D,aAAaC,IAAAA,6BAAAA;IACnB5E,OAAM6E,SAAS,CAAC;QACd,IAAI7D,MAAM;YACRuD;QACF,OAAO;YACL,IAAI,CAACI,YAAY;gBACf,IAAIxC,CAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgB2C,aAAa,AAAbA,MAAkB3C,CAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgB4C,IAAI,AAAJA,GAAM;wBAE1D,4EAA4E;oBAC5E,6EAA6E;oBAC7E,0EAA0E;oBAC1E,yEAAyE;oBACzE,gFAAgF;oBAChFpD;oBAAAA,CAAAA,4BAAAA,MAAMf,UAAU,CAAC6C,OAAO,AAAPA,MAAO,QAAxB9B,8BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,0BAA0B+C,KAAK;gBACjC;YACF;QACF;IACA,kDAAkD;IAClD,uDAAuD;IACzD,GAAG;QAAC/C,MAAMf,UAAU;QAAEe,MAAMrD,SAAS;QAAE0C;QAAMuD;QAAYpC;QAAgBR,MAAMb,cAAc;KAAC;IAE9F,OAAO;QAACE;QAAMC;KAAQ;AACxB"}
|
@@ -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":";;;;+BAuBaA;;;eAAAA;;;;iEAvBU;6BAEiB;8BACX;8BAC0B;qCACP;8BACS;gCAQlD;2BAC4B;AAQ5B,MAAMA,0BAA0B,CAACC;IACtC,MAAM,EAAEC,QAAQ,EAAEC,2BAA2B,KAAK,EAAE,GAAGF;IAEvD,MAAMG,aAAaC,IAAAA,oCAAAA,EAAwBC,CAAAA,UAAWA,QAAQF,UAAU;IACxE,MAAMG,iBAAiBF,IAAAA,oCAAAA,EAAwBC,CAAAA,UAAWA,QAAQC,cAAc;IAChF,MAAMC,UAAUH,IAAAA,oCAAAA,EAAwBC,CAAAA,UAAWA,QAAQE,OAAO;IAClE,MAAMC,OAAOJ,IAAAA,oCAAAA,EAAwBC,CAAAA,UAAWA,QAAQG,IAAI;IAC5D,MAAMC,YAAYL,IAAAA,oCAAAA,EAAwBC,CAAAA,UAAWA,QAAQI,SAAS;IACtE,MAAMC,cAAcN,IAAAA,oCAAAA,EAAwBC,CAAAA,UAAWA,QAAQK,WAAW;IAC1E,MAAMC,gBAAgBP,IAAAA,oCAAAA,EAAwBC,CAAAA,UAAWA,QAAQM,aAAa;IAC9E,MAAMC,8BAA8BC,IAAAA,mCAAAA;IAEpC,MAAMC,YAAYC,IAAAA,0BAAAA;IAElB,MAAM,EAAEC,kBAAkB,EAAE,GAAGC,IAAAA,6BAAAA;IAC/B,MAAMC,aAAaC,OAAMC,WAAW,CAAC;QACnC,MAAMC,iBAAiBL,mBAAmBV,eAAegB,OAAO;QAChED,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBE,KAAK;IACvB,GAAG;QAACP;QAAoBV;KAAe;IAEvC,MAAMkB,wBAAwBL,OAAMM,MAAM,CAAC;IAC3C,MAAMC,gBAAgBP,OAAMM,MAAM,CAAC;IAEnC,MAAM,EAAEE,GAAG,EAAE,GAAGC,IAAAA,uCAAAA;IAChB,MAAMC,eAAeF,QAAQ,QAAQG,wBAAAA,GAAaC,uBAAAA;IAElD,MAAMC,QAAQC,IAAAA,+BAAAA,EAAgBhC;IAE9B,MAAMiC,gBAAgB,CAACC;QACrB,IAAIC,iBAAiBD,UAAUA,MAAME,kBAAkB,IAAI;YACzD;QACF;QAEA,IAAI1B,eAAe;YACjBwB,MAAMG,cAAc;YACpB/B,QAAQ4B,OAAO;gBAAE3B,MAAM;gBAAM+B,UAAU;gBAAOC,MAAM;gBAA0BL;YAAM;QACtF;IACF;IAEA,MAAMM,UAAU,CAACN;QACf,IAAIC,iBAAiBD,QAAQ;YAC3B;QACF;QAEA,IAAI,CAACxB,eAAe;YAClBJ,QAAQ4B,OAAO;gBAAE3B,MAAM,CAACA;gBAAM+B,UAAUf,sBAAsBF,OAAO;gBAAEkB,MAAM;gBAAoBL;YAAM;YACvGX,sBAAsBF,OAAO,GAAG;QAClC;IACF;IAEA,MAAMoB,YAAY,CAACP;QACjB,IAAIC,iBAAiBD,QAAQ;YAC3B;QACF;QAEA,MAAMQ,MAAMR,MAAMQ,GAAG;QAErB,IAAI,CAAChC,iBAAkBG,CAAAA,aAAc6B,QAAQd,gBAAkB,CAACf,aAAa6B,QAAQC,uBAAS,AAATA,GAAa;YAChGrC,QAAQ4B,OAAO;gBAAE3B,MAAM;gBAAM+B,UAAU;gBAAMC,MAAM;gBAAsBL;YAAM;QACjF;QAEA,IAAIQ,QAAQE,oBAAAA,IAAU,CAAC/B,WAAW;YAChCP,QAAQ4B,OAAO;gBAAE3B,MAAM;gBAAO+B,UAAU;gBAAMC,MAAM;gBAAsBL;YAAM;QAClF;QAEA,0DAA0D;QAC1D,IAAI3B,QAAQmC,QAAQd,gBAAgBf,WAAW;YAC7CI;QACF;IACF;IAEA,MAAM4B,eAAe,CAACX;QACpB,IAAIC,iBAAiBD,QAAQ;YAC3B;QACF;QACA,IAAIzB,eAAegB,cAAcJ,OAAO,EAAE;YACxCf,QAAQ4B,OAAO;gBAAE3B,MAAM;gBAAM+B,UAAU;gBAAOC,MAAM;gBAAyBL;YAAM;QACrF;IACF;IAEA,kGAAkG;IAClG,8EAA8E;IAC9E,uGAAuG;IACvG,MAAMY,cAAc,CAACZ;QACnB,IAAIC,iBAAiBD,QAAQ;YAC3B;QACF;QACA,IAAIzB,eAAe,CAACgB,cAAcJ,OAAO,EAAE;YACzCf,QAAQ4B,OAAO;gBAAE3B,MAAM;gBAAM+B,UAAU;gBAAOC,MAAM;gBAAwBL;YAAM;YAClFT,cAAcJ,OAAO,GAAG;QAC1B;IACF;IAEA,MAAM0B,eAAe,CAACb;QACpB,IAAIC,iBAAiBD,QAAQ;YAC3B;QACF;QACA,IAAIzB,aAAa;YACfH,QAAQ4B,OAAO;gBAAE3B,MAAM;gBAAO+B,UAAU;gBAAOC,MAAM;gBAAyBL;YAAM;QACtF;IACF;IAEA,MAAMc,mBAAmB;QACvBC,IAAIzC;QACJ,GAAGG,2BAA2B;WAC3BoB,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOhC,KAAK;QACfmD,KAAKC,IAAAA,6BAAAA,EAAcjD,YAAY6B,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOmB,GAAG;QACzCL,cAAcO,IAAAA,gCAAAA,EAAiBC,IAAAA,8BAAAA,EAAetB,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOhC,KAAK,CAAC8C,YAAY,EAAEA;QACzEE,cAAcK,IAAAA,gCAAAA,EAAiBC,IAAAA,8BAAAA,EAAetB,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOhC,KAAK,CAACgD,YAAY,EAAEA;QACzEd,eAAemB,IAAAA,gCAAAA,EAAiBC,IAAAA,8BAAAA,EAAetB,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOhC,KAAK,CAACkC,aAAa,EAAEA;QAC3Ea,aAAaM,IAAAA,gCAAAA,EAAiBC,IAAAA,8BAAAA,EAAetB,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOhC,KAAK,CAAC+C,WAAW,EAAEA;IACzE;IAEA,MAAMQ,oBAAoB;QACxB,iBAAiB;QACjB,iBAAiB,CAAC/C,QAAQ,CAACM,YAAY0C,YAAYhD;QACnD,GAAGyC,gBAAgB;QACnBR,SAASY,IAAAA,gCAAAA,EAAiBC,IAAAA,8BAAAA,EAAetB,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOhC,KAAK,CAACyC,OAAO,EAAEA;QAC/DC,WAAWW,IAAAA,gCAAAA,EAAiBC,IAAAA,8BAAAA,EAAetB,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOhC,KAAK,CAAC0C,SAAS,EAAEA;IACrE;IAEA,MAAMe,8BAA8BC,IAAAA,6BAAAA,EAClC1B,CAAAA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOQ,IAAI,AAAJA,MAAS,YAAYR,CAAAA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOQ,IAAI,AAAJA,MAAS,MAAMR,MAAMQ,IAAI,GAAG,OAC/De;IAGF,OAAO;QACLzC;QACAb,UAAU0D,IAAAA,2CAAAA,EACR1D,UACAU,gBAAgBsC,mBAAmB/C,2BAA2BqD,oBAAoBE;IAEtF;AACF;AAEA,MAAMrB,mBAAmB,CAACD;IACxB,MAAMyB,aAAa,CAACC,KAClBA,GAAGC,YAAY,CAAC,eAAgBD,GAAGC,YAAY,CAAC,oBAAoBD,GAAGE,YAAY,CAAC,qBAAqB;IAC3G,IAAIC,IAAAA,6BAAAA,EAAc7B,MAAM8B,MAAM,KAAKL,WAAWzB,MAAM8B,MAAM,GAAG;QAC3D,OAAO;IACT;IAEA,OAAOD,IAAAA,6BAAAA,EAAc7B,MAAM+B,aAAa,KAAKN,WAAWzB,MAAM+B,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":["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": "9.14.
|
3
|
+
"version": "9.14.16",
|
4
4
|
"description": "Fluent UI menu component",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -37,16 +37,16 @@
|
|
37
37
|
},
|
38
38
|
"dependencies": {
|
39
39
|
"@fluentui/keyboard-keys": "^9.0.7",
|
40
|
-
"@fluentui/react-aria": "^9.13.
|
41
|
-
"@fluentui/react-context-selector": "^9.1.
|
40
|
+
"@fluentui/react-aria": "^9.13.6",
|
41
|
+
"@fluentui/react-context-selector": "^9.1.67",
|
42
42
|
"@fluentui/react-icons": "^2.0.245",
|
43
|
-
"@fluentui/react-portal": "^9.4.
|
44
|
-
"@fluentui/react-positioning": "^9.15.
|
45
|
-
"@fluentui/react-shared-contexts": "^9.20.
|
46
|
-
"@fluentui/react-tabster": "^9.22.
|
47
|
-
"@fluentui/react-theme": "^9.1.
|
48
|
-
"@fluentui/react-utilities": "^9.18.
|
49
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
43
|
+
"@fluentui/react-portal": "^9.4.35",
|
44
|
+
"@fluentui/react-positioning": "^9.15.9",
|
45
|
+
"@fluentui/react-shared-contexts": "^9.20.1",
|
46
|
+
"@fluentui/react-tabster": "^9.22.7",
|
47
|
+
"@fluentui/react-theme": "^9.1.20",
|
48
|
+
"@fluentui/react-utilities": "^9.18.15",
|
49
|
+
"@fluentui/react-jsx-runtime": "^9.0.44",
|
50
50
|
"@griffel/react": "^1.5.22",
|
51
51
|
"@swc/helpers": "^0.5.1"
|
52
52
|
},
|