@fluentui/react-menu 9.11.0 → 9.12.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +55 -1
- package/CHANGELOG.md +24 -2
- package/dist/index.d.ts +4 -0
- package/lib/components/Menu/useMenu.js +2 -22
- package/lib/components/Menu/useMenu.js.map +1 -1
- package/lib/components/MenuItem/useMenuItemStyles.styles.js +2 -1
- package/lib/components/MenuItem/useMenuItemStyles.styles.js.map +1 -1
- package/lib/components/MenuList/MenuList.types.js.map +1 -1
- package/lib/components/MenuList/useMenuList.js +1 -0
- package/lib/components/MenuList/useMenuList.js.map +1 -1
- package/lib/components/MenuList/useMenuListStyles.styles.js +5 -2
- package/lib/components/MenuList/useMenuListStyles.styles.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopover.js +8 -0
- package/lib/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib/components/MenuTrigger/MenuTrigger.js +1 -1
- package/lib/components/MenuTrigger/MenuTrigger.js.map +1 -1
- package/lib/components/MenuTrigger/index.js +1 -1
- package/lib/components/MenuTrigger/index.js.map +1 -1
- package/lib/components/MenuTrigger/useMenuTrigger.js +164 -0
- package/lib/components/MenuTrigger/useMenuTrigger.js.map +1 -0
- package/lib-commonjs/components/Menu/useMenu.js +1 -20
- package/lib-commonjs/components/Menu/useMenu.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js +2 -0
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuList.js +1 -0
- package/lib-commonjs/components/MenuList/useMenuList.js.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuListStyles.styles.js +6 -2
- package/lib-commonjs/components/MenuList/useMenuListStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js +8 -0
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/MenuTrigger.js +2 -2
- package/lib-commonjs/components/MenuTrigger/MenuTrigger.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/index.js +1 -1
- package/lib-commonjs/components/MenuTrigger/index.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/{useMenuTrigger.styles.js → useMenuTrigger.js} +3 -1
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js.map +1 -0
- package/package.json +5 -5
- package/lib/components/MenuTrigger/useMenuTrigger.styles.js +0 -168
- package/lib/components/MenuTrigger/useMenuTrigger.styles.js.map +0 -1
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.styles.js.map +0 -1
@@ -0,0 +1,164 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { useMenuContext_unstable } from '../../contexts/menuContext';
|
3
|
+
import { useIsSubmenu } from '../../utils/useIsSubmenu';
|
4
|
+
import { useFocusFinders, useRestoreFocusTarget } from '@fluentui/react-tabster';
|
5
|
+
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
6
|
+
import { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';
|
7
|
+
import { applyTriggerPropsToChildren, getTriggerChild, isHTMLElement, mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
|
8
|
+
import { useARIAButtonProps } from '@fluentui/react-aria';
|
9
|
+
/**
|
10
|
+
* Create the state required to render MenuTrigger.
|
11
|
+
* Clones the only child component and adds necessary event handling behaviours to open a popup menu
|
12
|
+
*
|
13
|
+
* @param props - props from this instance of MenuTrigger
|
14
|
+
*/ export const useMenuTrigger_unstable = (props)=>{
|
15
|
+
const { children , disableButtonEnhancement =false } = props;
|
16
|
+
const triggerRef = useMenuContext_unstable((context)=>context.triggerRef);
|
17
|
+
const menuPopoverRef = useMenuContext_unstable((context)=>context.menuPopoverRef);
|
18
|
+
const setOpen = useMenuContext_unstable((context)=>context.setOpen);
|
19
|
+
const open = useMenuContext_unstable((context)=>context.open);
|
20
|
+
const triggerId = useMenuContext_unstable((context)=>context.triggerId);
|
21
|
+
const openOnHover = useMenuContext_unstable((context)=>context.openOnHover);
|
22
|
+
const openOnContext = useMenuContext_unstable((context)=>context.openOnContext);
|
23
|
+
const restoreFocusTargetAttribute = useRestoreFocusTarget();
|
24
|
+
const isSubmenu = useIsSubmenu();
|
25
|
+
const { findFirstFocusable } = useFocusFinders();
|
26
|
+
const focusFirst = React.useCallback(()=>{
|
27
|
+
const firstFocusable = findFirstFocusable(menuPopoverRef.current);
|
28
|
+
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
|
29
|
+
}, [
|
30
|
+
findFirstFocusable,
|
31
|
+
menuPopoverRef
|
32
|
+
]);
|
33
|
+
const openedWithKeyboardRef = React.useRef(false);
|
34
|
+
const hasMouseMoved = React.useRef(false);
|
35
|
+
const { dir } = useFluent();
|
36
|
+
const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;
|
37
|
+
const child = getTriggerChild(children);
|
38
|
+
const onContextMenu = (event)=>{
|
39
|
+
if (isTargetDisabled(event)) {
|
40
|
+
return;
|
41
|
+
}
|
42
|
+
if (openOnContext) {
|
43
|
+
event.preventDefault();
|
44
|
+
setOpen(event, {
|
45
|
+
open: true,
|
46
|
+
keyboard: false,
|
47
|
+
type: 'menuTriggerContextMenu',
|
48
|
+
event
|
49
|
+
});
|
50
|
+
}
|
51
|
+
};
|
52
|
+
const onClick = (event)=>{
|
53
|
+
if (isTargetDisabled(event)) {
|
54
|
+
return;
|
55
|
+
}
|
56
|
+
if (!openOnContext) {
|
57
|
+
setOpen(event, {
|
58
|
+
open: !open,
|
59
|
+
keyboard: openedWithKeyboardRef.current,
|
60
|
+
type: 'menuTriggerClick',
|
61
|
+
event
|
62
|
+
});
|
63
|
+
openedWithKeyboardRef.current = false;
|
64
|
+
}
|
65
|
+
};
|
66
|
+
const onKeyDown = (event)=>{
|
67
|
+
if (isTargetDisabled(event)) {
|
68
|
+
return;
|
69
|
+
}
|
70
|
+
const key = event.key;
|
71
|
+
if (!openOnContext && (isSubmenu && key === OpenArrowKey || !isSubmenu && key === ArrowDown)) {
|
72
|
+
setOpen(event, {
|
73
|
+
open: true,
|
74
|
+
keyboard: true,
|
75
|
+
type: 'menuTriggerKeyDown',
|
76
|
+
event
|
77
|
+
});
|
78
|
+
}
|
79
|
+
if (key === Escape && !isSubmenu) {
|
80
|
+
setOpen(event, {
|
81
|
+
open: false,
|
82
|
+
keyboard: true,
|
83
|
+
type: 'menuTriggerKeyDown',
|
84
|
+
event
|
85
|
+
});
|
86
|
+
}
|
87
|
+
// if menu is already open, can't rely on effects to focus
|
88
|
+
if (open && key === OpenArrowKey && isSubmenu) {
|
89
|
+
focusFirst();
|
90
|
+
}
|
91
|
+
};
|
92
|
+
const onMouseEnter = (event)=>{
|
93
|
+
if (isTargetDisabled(event)) {
|
94
|
+
return;
|
95
|
+
}
|
96
|
+
if (openOnHover && hasMouseMoved.current) {
|
97
|
+
setOpen(event, {
|
98
|
+
open: true,
|
99
|
+
keyboard: false,
|
100
|
+
type: 'menuTriggerMouseEnter',
|
101
|
+
event
|
102
|
+
});
|
103
|
+
}
|
104
|
+
};
|
105
|
+
// Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience
|
106
|
+
// First time open the mouse using mousemove and then continue with mouseenter
|
107
|
+
// Only use once to determine that the user is using the mouse since it is an expensive event to handle
|
108
|
+
const onMouseMove = (event)=>{
|
109
|
+
if (isTargetDisabled(event)) {
|
110
|
+
return;
|
111
|
+
}
|
112
|
+
if (openOnHover && !hasMouseMoved.current) {
|
113
|
+
setOpen(event, {
|
114
|
+
open: true,
|
115
|
+
keyboard: false,
|
116
|
+
type: 'menuTriggerMouseMove',
|
117
|
+
event
|
118
|
+
});
|
119
|
+
hasMouseMoved.current = true;
|
120
|
+
}
|
121
|
+
};
|
122
|
+
const onMouseLeave = (event)=>{
|
123
|
+
if (isTargetDisabled(event)) {
|
124
|
+
return;
|
125
|
+
}
|
126
|
+
if (openOnHover) {
|
127
|
+
setOpen(event, {
|
128
|
+
open: false,
|
129
|
+
keyboard: false,
|
130
|
+
type: 'menuTriggerMouseLeave',
|
131
|
+
event
|
132
|
+
});
|
133
|
+
}
|
134
|
+
};
|
135
|
+
const contextMenuProps = {
|
136
|
+
id: triggerId,
|
137
|
+
...child === null || child === void 0 ? void 0 : child.props,
|
138
|
+
ref: useMergedRefs(triggerRef, child === null || child === void 0 ? void 0 : child.ref),
|
139
|
+
onMouseEnter: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseEnter, onMouseEnter)),
|
140
|
+
onMouseLeave: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseLeave, onMouseLeave)),
|
141
|
+
onContextMenu: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onContextMenu, onContextMenu)),
|
142
|
+
onMouseMove: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseMove, onMouseMove))
|
143
|
+
};
|
144
|
+
const triggerChildProps = {
|
145
|
+
'aria-haspopup': 'menu',
|
146
|
+
'aria-expanded': !open && !isSubmenu ? undefined : open,
|
147
|
+
...restoreFocusTargetAttribute,
|
148
|
+
...contextMenuProps,
|
149
|
+
onClick: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onClick, onClick)),
|
150
|
+
onKeyDown: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onKeyDown, onKeyDown))
|
151
|
+
};
|
152
|
+
const ariaButtonTriggerChildProps = useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', triggerChildProps);
|
153
|
+
return {
|
154
|
+
isSubmenu,
|
155
|
+
children: applyTriggerPropsToChildren(children, openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps)
|
156
|
+
};
|
157
|
+
};
|
158
|
+
const isTargetDisabled = (event)=>{
|
159
|
+
const isDisabled = (el)=>el.hasAttribute('disabled') || el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true';
|
160
|
+
if (isHTMLElement(event.target) && isDisabled(event.target)) {
|
161
|
+
return true;
|
162
|
+
}
|
163
|
+
return isHTMLElement(event.currentTarget) && isDisabled(event.currentTarget);
|
164
|
+
};
|
@@ -0,0 +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)) {\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 ...restoreFocusTargetAttribute,\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","preventDefault","keyboard","type","onClick","onKeyDown","key","onMouseEnter","onMouseMove","onMouseLeave","contextMenuProps","id","ref","triggerChildProps","undefined","ariaButtonTriggerChildProps","isDisabled","el","hasAttribute","getAttribute","target","currentTarget"],"mappings":"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"}
|
@@ -241,32 +241,13 @@ const useMenuOpenState = (state)=>{
|
|
241
241
|
findFirstFocusable,
|
242
242
|
state.menuPopoverRef
|
243
243
|
]);
|
244
|
-
const firstMount = (0, _reactUtilities.useFirstMount)();
|
245
244
|
_react.useEffect(()=>{
|
246
245
|
if (open) {
|
247
246
|
focusFirst();
|
248
|
-
} else {
|
249
|
-
if (!firstMount) {
|
250
|
-
if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body)) {
|
251
|
-
var // after any event handler (event handlers will update state and re-render).
|
252
|
-
// Since the browser only performs the default behaviour for the Tab key once
|
253
|
-
// keyboard events have fully bubbled up the window, the browser will move
|
254
|
-
// focus to the next tabbable element before/after the trigger if needed.
|
255
|
-
// If the Tab key was not pressed, focus will remain on the trigger as expected.
|
256
|
-
_state_triggerRef_current;
|
257
|
-
(_state_triggerRef_current = state.triggerRef.current) === null || _state_triggerRef_current === void 0 ? void 0 : _state_triggerRef_current.focus();
|
258
|
-
}
|
259
|
-
}
|
260
247
|
}
|
261
|
-
// firstMount change should not re-run this effect
|
262
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
263
248
|
}, [
|
264
|
-
state.triggerRef,
|
265
|
-
state.isSubmenu,
|
266
249
|
open,
|
267
|
-
focusFirst
|
268
|
-
targetDocument,
|
269
|
-
state.menuPopoverRef
|
250
|
+
focusFirst
|
270
251
|
]);
|
271
252
|
return [
|
272
253
|
open,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useMenu.js"],"sourcesContent":["import * as React from 'react';\nimport { usePositioningMouseTarget, usePositioning, resolvePositioningShorthand } from '@fluentui/react-positioning';\nimport { useControllableState, useId, useOnClickOutside, useEventCallback, useOnScrollOutside, useFirstMount } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { elementContains } from '@fluentui/react-portal';\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';\n// If it's not possible to position the submenu in smaller viewports, try\n// and fallback to this order of positions\nconst submenuFallbackPositions = [\n 'after',\n 'after-bottom',\n 'before-top',\n 'before',\n 'before-bottom',\n 'above'\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 */ export const useMenu_unstable = (props)=>{\n const isSubmenu = useIsSubmenu();\n const { hoverDelay =500 , inline =false , hasCheckmarks =false , hasIcons =false , closeOnScroll =false , openOnContext =false , persistOnItemClick =false , openOnHover =isSubmenu , defaultCheckedValues , mountNode =null } = props;\n const triggerId = useId('menu');\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\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 };\n const children = React.Children.toArray(props.children);\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 if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at most two children');\n }\n }\n let menuTrigger = undefined;\n let menuPopover = 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 const { targetRef: triggerRef , containerRef: menuPopoverRef } = usePositioning(positioningState);\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 const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange\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 * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */ const useMenuSelectableState = (props)=>{\n const [checkedValues, setCheckedValues] = useControllableState({\n state: props.checkedValues,\n defaultState: props.defaultCheckedValues,\n initialState: {}\n });\n const onCheckedValueChange = useEventCallback((e, { name , checkedItems })=>{\n var _props_onCheckedValueChange;\n (_props_onCheckedValueChange = props.onCheckedValueChange) === null || _props_onCheckedValueChange === void 0 ? void 0 : _props_onCheckedValueChange.call(props, e, {\n name,\n checkedItems\n });\n setCheckedValues((currentValue)=>({\n ...currentValue,\n [name]: checkedItems\n }));\n });\n return [\n checkedValues,\n onCheckedValueChange\n ];\n};\nconst useMenuOpenState = (state)=>{\n const { targetDocument } = useFluent();\n const parentSetOpen = useMenuContext_unstable((context)=>context.setOpen);\n const onOpenChange = useEventCallback((e, data)=>{\n var _state_onOpenChange;\n return (_state_onOpenChange = state.onOpenChange) === null || _state_onOpenChange === void 0 ? void 0 : _state_onOpenChange.call(state, e, data);\n });\n const setOpenTimeout = React.useRef(0);\n const enteringTriggerRef = React.useRef(false);\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false\n });\n const trySetOpen = useEventCallback((e, data)=>{\n const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {\n ...data\n });\n if (data.open && e.type === 'contextmenu') {\n state.setContextTarget(e);\n }\n if (!data.open) {\n state.setContextTarget(undefined);\n }\n if (data.bubble) {\n parentSetOpen(e, {\n ...data\n });\n }\n setOpenState(data.open);\n });\n const setOpen = useEventCallback((e, data)=>{\n clearTimeout(setOpenTimeout.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n var _state_triggerRef_current;\n if ((_state_triggerRef_current = state.triggerRef.current) === null || _state_triggerRef_current === void 0 ? void 0 : _state_triggerRef_current.contains(e.target)) {\n enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n }\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeout.current = setTimeout(()=>trySetOpen(e, data), state.hoverDelay);\n } else {\n trySetOpen(e, data);\n }\n });\n useOnClickOutside({\n contains: elementContains,\n disabled: !open,\n element: targetDocument,\n refs: [\n state.menuPopoverRef,\n !state.openOnContext && state.triggerRef\n ].filter(Boolean),\n callback: (event)=>setOpen(event, {\n open: false,\n type: 'clickOutside',\n 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, {\n open: false,\n type: 'scrollOutside',\n event\n }),\n refs: [\n state.menuPopoverRef,\n !state.openOnContext && state.triggerRef\n ].filter(Boolean),\n disabled: !open || !closeOnScroll\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, {\n open: false,\n type: 'menuMouseEnter',\n event\n });\n }\n },\n disabled: !open,\n refs: [\n state.menuPopoverRef\n ]\n });\n // Clear timeout on unmount\n // Setting state after a component unmounts can cause memory leaks\n React.useEffect(()=>{\n return ()=>{\n clearTimeout(setOpenTimeout.current);\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 === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();\n }, [\n findFirstFocusable,\n state.menuPopoverRef\n ]);\n const firstMount = useFirstMount();\n React.useEffect(()=>{\n if (open) {\n focusFirst();\n } else {\n if (!firstMount) {\n if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body)) {\n var // 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;\n (_state_triggerRef_current = state.triggerRef.current) === null || _state_triggerRef_current === void 0 ? void 0 : _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 }, [\n state.triggerRef,\n state.isSubmenu,\n open,\n focusFirst,\n targetDocument,\n state.menuPopoverRef\n ]);\n return [\n open,\n setOpen\n ];\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","_props_onCheckedValueChange","call","currentValue","targetDocument","useFluent","parentSetOpen","useMenuContext_unstable","context","data","_state_onOpenChange","setOpenTimeout","useRef","enteringTriggerRef","setOpenState","trySetOpen","event","CustomEvent","type","MENU_ENTER_EVENT","detail","nativeEvent","bubble","clearTimeout","current","Event","persist","_state_triggerRef_current","contains","setTimeout","useOnClickOutside","elementContains","disabled","element","refs","filter","Boolean","callback","useOnScrollOutside","useOnMenuMouseEnter","useEffect","findFirstFocusable","useFocusFinders","focusFirst","useCallback","firstFocusable","focus","firstMount","useFirstMount","activeElement","body"],"mappings":"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"}
|
1
|
+
{"version":3,"sources":["useMenu.js"],"sourcesContent":["import * as React from 'react';\nimport { usePositioningMouseTarget, usePositioning, resolvePositioningShorthand } from '@fluentui/react-positioning';\nimport { useControllableState, useId, useOnClickOutside, useEventCallback, useOnScrollOutside } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { elementContains } from '@fluentui/react-portal';\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';\n// If it's not possible to position the submenu in smaller viewports, try\n// and fallback to this order of positions\nconst submenuFallbackPositions = [\n 'after',\n 'after-bottom',\n 'before-top',\n 'before',\n 'before-bottom',\n 'above'\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 */ export const useMenu_unstable = (props)=>{\n const isSubmenu = useIsSubmenu();\n const { hoverDelay =500 , inline =false , hasCheckmarks =false , hasIcons =false , closeOnScroll =false , openOnContext =false , persistOnItemClick =false , openOnHover =isSubmenu , defaultCheckedValues , mountNode =null } = props;\n const triggerId = useId('menu');\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\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 };\n const children = React.Children.toArray(props.children);\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 if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at most two children');\n }\n }\n let menuTrigger = undefined;\n let menuPopover = 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 const { targetRef: triggerRef , containerRef: menuPopoverRef } = usePositioning(positioningState);\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 const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange\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 * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */ const useMenuSelectableState = (props)=>{\n const [checkedValues, setCheckedValues] = useControllableState({\n state: props.checkedValues,\n defaultState: props.defaultCheckedValues,\n initialState: {}\n });\n const onCheckedValueChange = useEventCallback((e, { name , checkedItems })=>{\n var _props_onCheckedValueChange;\n (_props_onCheckedValueChange = props.onCheckedValueChange) === null || _props_onCheckedValueChange === void 0 ? void 0 : _props_onCheckedValueChange.call(props, e, {\n name,\n checkedItems\n });\n setCheckedValues((currentValue)=>({\n ...currentValue,\n [name]: checkedItems\n }));\n });\n return [\n checkedValues,\n onCheckedValueChange\n ];\n};\nconst useMenuOpenState = (state)=>{\n const { targetDocument } = useFluent();\n const parentSetOpen = useMenuContext_unstable((context)=>context.setOpen);\n const onOpenChange = useEventCallback((e, data)=>{\n var _state_onOpenChange;\n return (_state_onOpenChange = state.onOpenChange) === null || _state_onOpenChange === void 0 ? void 0 : _state_onOpenChange.call(state, e, data);\n });\n const setOpenTimeout = React.useRef(0);\n const enteringTriggerRef = React.useRef(false);\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false\n });\n const trySetOpen = useEventCallback((e, data)=>{\n const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {\n ...data\n });\n if (data.open && e.type === 'contextmenu') {\n state.setContextTarget(e);\n }\n if (!data.open) {\n state.setContextTarget(undefined);\n }\n if (data.bubble) {\n parentSetOpen(e, {\n ...data\n });\n }\n setOpenState(data.open);\n });\n const setOpen = useEventCallback((e, data)=>{\n clearTimeout(setOpenTimeout.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n var _state_triggerRef_current;\n if ((_state_triggerRef_current = state.triggerRef.current) === null || _state_triggerRef_current === void 0 ? void 0 : _state_triggerRef_current.contains(e.target)) {\n enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n }\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeout.current = setTimeout(()=>trySetOpen(e, data), state.hoverDelay);\n } else {\n trySetOpen(e, data);\n }\n });\n useOnClickOutside({\n contains: elementContains,\n disabled: !open,\n element: targetDocument,\n refs: [\n state.menuPopoverRef,\n !state.openOnContext && state.triggerRef\n ].filter(Boolean),\n callback: (event)=>setOpen(event, {\n open: false,\n type: 'clickOutside',\n 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, {\n open: false,\n type: 'scrollOutside',\n event\n }),\n refs: [\n state.menuPopoverRef,\n !state.openOnContext && state.triggerRef\n ].filter(Boolean),\n disabled: !open || !closeOnScroll\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, {\n open: false,\n type: 'menuMouseEnter',\n event\n });\n }\n },\n disabled: !open,\n refs: [\n state.menuPopoverRef\n ]\n });\n // Clear timeout on unmount\n // Setting state after a component unmounts can cause memory leaks\n React.useEffect(()=>{\n return ()=>{\n clearTimeout(setOpenTimeout.current);\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 === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();\n }, [\n findFirstFocusable,\n state.menuPopoverRef\n ]);\n React.useEffect(()=>{\n if (open) {\n focusFirst();\n }\n }, [\n open,\n focusFirst\n ]);\n return [\n open,\n setOpen\n ];\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","_props_onCheckedValueChange","call","currentValue","targetDocument","useFluent","parentSetOpen","useMenuContext_unstable","context","data","_state_onOpenChange","setOpenTimeout","useRef","enteringTriggerRef","setOpenState","trySetOpen","event","CustomEvent","type","MENU_ENTER_EVENT","detail","nativeEvent","bubble","clearTimeout","current","Event","persist","_state_triggerRef_current","contains","setTimeout","useOnClickOutside","elementContains","disabled","element","refs","filter","Boolean","callback","useOnScrollOutside","useOnMenuMouseEnter","useEffect","findFirstFocusable","useFocusFinders","focusFirst","useCallback","firstFocusable","focus"],"mappings":"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"}
|
@@ -126,6 +126,7 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
|
126
126
|
"f1sgzk6v"
|
127
127
|
],
|
128
128
|
Bqenvij: "f1d2rq10",
|
129
|
+
sshi5w: "f1nxs5xn",
|
129
130
|
mc9l5x: "f22iagw",
|
130
131
|
Bt984gj: "f122n59",
|
131
132
|
Be2twd7: "fkhj508",
|
@@ -244,6 +245,7 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
|
244
245
|
".f1sgzk6v{padding-right:6px;}",
|
245
246
|
".f1bg5zqg{padding-left:6px;}",
|
246
247
|
".f1d2rq10{height:32px;}",
|
248
|
+
".f1nxs5xn{min-height:32px;}",
|
247
249
|
".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
|
248
250
|
".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
|
249
251
|
".fkhj508{font-size:var(--fontSizeBase300);}",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, __styles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nexport const menuItemClassNames = {\n root: 'fui-MenuItem',\n icon: 'fui-MenuItem__icon',\n checkmark: 'fui-MenuItem__checkmark',\n submenuIndicator: 'fui-MenuItem__submenuIndicator',\n content: 'fui-MenuItem__content',\n secondaryContent: 'fui-MenuItem__secondaryContent'\n};\nconst useStyles = /*#__PURE__*/__styles({\n focusIndicator: {\n Brovlpu: \"ftqa4ok\",\n B486eqv: \"f2hkw1w\",\n B8q5s1w: \"f8hki3x\",\n Bci5o5g: [\"f1d2448m\", \"ffh67wi\"],\n n8qw10: \"f1bjia2o\",\n Bdrgwmp: [\"ffh67wi\", \"f1d2448m\"],\n Bm4h7ae: \"f15bsgw9\",\n B7ys5i9: \"f14e48fq\",\n Busjfv9: \"f18yb2kv\",\n Bhk32uz: \"fd6o370\",\n Bf4ptjt: \"fh1cnn4\",\n kclons: [\"fy7oxxb\", \"f184ne2d\"],\n Bhdgwq3: \"fpukqih\",\n Blkhhs4: [\"f184ne2d\", \"fy7oxxb\"],\n Bqtpl0w: \"frrh606\",\n clg4pj: [\"f1v5zibi\", \"fo2hd23\"],\n hgwjuy: \"ful5kiu\",\n Bonggc9: [\"fo2hd23\", \"f1v5zibi\"],\n B1tsrr9: [\"f1jqcqds\", \"ftffrms\"],\n Dah5zi: [\"ftffrms\", \"f1jqcqds\"],\n Bkh64rk: [\"f2e7qr6\", \"fsr1zz6\"],\n qqdqy8: [\"fsr1zz6\", \"f2e7qr6\"],\n B6dhp37: \"f1dvezut\",\n i03rao: [\"fd0oaoj\", \"f1cwg4i8\"],\n Boxcth7: \"fjvm52t\",\n Bsom6fd: [\"f1cwg4i8\", \"fd0oaoj\"],\n J0r882: \"f57olzd\",\n Bule8hv: [\"f4stah7\", \"fs1por5\"],\n Bjwuhne: \"f480a47\",\n Ghsupd: [\"fs1por5\", \"f4stah7\"]\n },\n root: {\n Bbmb7ep: [\"f1aa9q02\", \"f16jpd5f\"],\n Beyfa6y: [\"f16jpd5f\", \"f1aa9q02\"],\n B7oj6ja: [\"f1jar5jt\", \"fyu767a\"],\n Btl43ni: [\"fyu767a\", \"f1jar5jt\"],\n qhf8xq: \"f10pi13n\",\n sj55zd: \"fkfq4zb\",\n De3pzq: \"fxugw4r\",\n z189sj: [\"f1sgzk6v\", \"f1bg5zqg\"],\n uwmqm3: [\"f1bg5zqg\", \"f1sgzk6v\"],\n Bqenvij: \"f1d2rq10\",\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f122n59\",\n Be2twd7: \"fkhj508\",\n Bceei9c: \"f1k6fduh\",\n i8kkvl: \"f1q8lukm\",\n Belr9w4: \"f1ma2n7n\",\n Jwef8y: \"f1knas48\",\n Bi91k9c: \"fnwyq0v\",\n Bk3fhr4: \"ft1hn21\",\n Bmfj8id: \"fuxngvv\",\n Bg7n49j: \"fp258yr\",\n famaaq: \"f1xqy1su\"\n },\n content: {\n uwmqm3: [\"f161knb0\", \"f12huiiw\"],\n z189sj: [\"f12huiiw\", \"f161knb0\"],\n De3pzq: \"f3rmtva\",\n Bh6795r: \"fqerorx\"\n },\n secondaryContent: {\n uwmqm3: [\"f161knb0\", \"f12huiiw\"],\n z189sj: [\"f12huiiw\", \"f161knb0\"],\n sj55zd: \"f11d4kpn\",\n Bi91k9c: \"f1jp5ecu\",\n t0hwav: \"fc1cou1\"\n },\n icon: {\n a9b677: \"f64fuq3\",\n Bqenvij: \"fjamq6b\",\n Be2twd7: \"fe5j1ua\",\n Bg96gwp: \"fez10in\",\n Bt984gj: \"f122n59\",\n mc9l5x: \"ftuwxu6\",\n Brf1p80: \"f4d9j23\"\n },\n submenuIndicator: {\n a9b677: \"f64fuq3\",\n Bqenvij: \"fjamq6b\",\n Be2twd7: \"fe5j1ua\",\n Bg96gwp: \"fez10in\",\n Bt984gj: \"f122n59\",\n mc9l5x: \"ftuwxu6\",\n Brf1p80: \"f4d9j23\"\n },\n disabled: {\n sj55zd: \"f1s2aq7o\",\n Bi91k9c: \"fvgxktp\",\n Jwef8y: \"f1ijtazh\",\n eoavqd: \"fphbwmw\",\n Bk3fhr4: \"f19vpps7\",\n Bmfj8id: \"fv5swzo\",\n Bg7n49j: \"f1q1x1ba\",\n t0hwav: \"ft33916\",\n Bbusuzp: \"f1dcs8yz\",\n ze5xyy: \"f1kc2mi9\",\n Bctn1xl: \"fk56vqo\",\n Bh6z0a4: \"f1ikwg0d\"\n }\n}, {\n f: [\".ftqa4ok:focus{outline-style:none;}\", \".fc1cou1:focus{color:var(--colorNeutralForeground3Hover);}\", \".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}\"],\n i: [\".f2hkw1w:focus-visible{outline-style:none;}\"],\n d: [\".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}\", \".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}\", \".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}\", \".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}\", \".f15bsgw9[data-fui-focus-visible]::after{content:\\\"\\\";}\", \".f14e48fq[data-fui-focus-visible]::after{position:absolute;}\", \".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}\", \".fd6o370[data-fui-focus-visible]::after{z-index:1;}\", \".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}\", \".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}\", \".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}\", \".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}\", \".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}\", \".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}\", \".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}\", \".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}\", \".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}\", \".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}\", \".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}\", \".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}\", \".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}\", \".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}\", \".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}\", \".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}\", \".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}\", \".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}\", \".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}\", \".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}\", \".f10pi13n{position:relative;}\", \".fkfq4zb{color:var(--colorNeutralForeground2);}\", \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".f1sgzk6v{padding-right:6px;}\", \".f1bg5zqg{padding-left:6px;}\", \".f1d2rq10{height:32px;}\", \".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".f1k6fduh{cursor:pointer;}\", \".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}\", \".f1ma2n7n{row-gap:4px;}\", \".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}\", \".f161knb0{padding-left:2px;}\", \".f12huiiw{padding-right:2px;}\", \".f3rmtva{background-color:transparent;}\", \".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}\", \".f11d4kpn{color:var(--colorNeutralForeground3);}\", \".f64fuq3{width:20px;}\", \".fjamq6b{height:20px;}\", \".fe5j1ua{font-size:20px;}\", \".fez10in{line-height:0;}\", \".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}\", \".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\"],\n h: [\".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}\", \".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}\", \".ft1hn21:hover .fui-Icon-filled{display:inline;}\", \".fuxngvv:hover .fui-Icon-regular{display:none;}\", \".fp258yr:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}\", \".f1jp5ecu:hover{color:var(--colorNeutralForeground3Hover);}\", \".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}\", \".f1ijtazh:hover{background-color:var(--colorNeutralBackground1);}\", \".fphbwmw:hover{cursor:not-allowed;}\", \".f19vpps7:hover .fui-Icon-filled{display:none;}\", \".fv5swzo:hover .fui-Icon-regular{display:inline;}\", \".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}\"],\n m: [[\"@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f1kc2mi9:hover{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.fk56vqo:hover .fui-MenuItem__icon{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f1ikwg0d:focus{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }]]\n});\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(menuItemClassNames.root, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n }\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && styles.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n }\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, styles.submenuIndicator, state.submenuIndicator.className);\n }\n useCheckmarkStyles_unstable(state);\n};\n//# sourceMappingURL=useMenuItemStyles.styles.js.map"],"names":["menuItemClassNames","useMenuItemStyles_unstable","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","__styles","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bule8hv","Bjwuhne","Ghsupd","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","qhf8xq","sj55zd","De3pzq","z189sj","uwmqm3","Bqenvij","mc9l5x","Bt984gj","Be2twd7","Bceei9c","i8kkvl","Belr9w4","Jwef8y","Bi91k9c","Bk3fhr4","Bmfj8id","Bg7n49j","famaaq","Bh6795r","t0hwav","a9b677","Bg96gwp","Brf1p80","disabled","eoavqd","Bbusuzp","ze5xyy","Bctn1xl","Bh6z0a4","f","i","d","h","m","state","styles","className","mergeClasses","useCheckmarkStyles_unstable"],"mappings":";;;;;;;;;;;IAKaA,kBAAkB,MAAlBA;IA8HAC,0BAA0B,MAA1BA;;uBAnIsC;uBAIP;AACrC,MAAMD,qBAAqB;IAChCE,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,kBAAkB;IAClBC,SAAS;IACTC,kBAAkB;AACpB;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCC,gBAAgB;QACdC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAU;QAChCC,QAAQ;QACRC,SAAS;YAAC;YAAW;SAAW;QAChCC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAU;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,QAAQ;QACRC,SAAS;YAAC;YAAW;SAAW;QAChCC,SAAS;YAAC;YAAY;SAAU;QAChCC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;YAAC;YAAW;SAAU;QAC/BC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAU;QAChCC,QAAQ;QACRC,SAAS;YAAC;YAAW;SAAU;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAU;IAChC;IACAtC,MAAM;QACJuC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAU;QAChCC,SAAS;YAAC;YAAW;SAAW;QAChCC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;IACAxD,SAAS;QACP2C,QAAQ;YAAC;YAAY;SAAW;QAChCD,QAAQ;YAAC;YAAY;SAAW;QAChCD,QAAQ;QACRgB,SAAS;IACX;IACAxD,kBAAkB;QAChB0C,QAAQ;YAAC;YAAY;SAAW;QAChCD,QAAQ;YAAC;YAAY;SAAW;QAChCF,QAAQ;QACRY,SAAS;QACTM,QAAQ;IACV;IACA7D,MAAM;QACJ8D,QAAQ;QACRf,SAAS;QACTG,SAAS;QACTa,SAAS;QACTd,SAAS;QACTD,QAAQ;QACRgB,SAAS;IACX;IACA9D,kBAAkB;QAChB4D,QAAQ;QACRf,SAAS;QACTG,SAAS;QACTa,SAAS;QACTd,SAAS;QACTD,QAAQ;QACRgB,SAAS;IACX;IACAC,UAAU;QACRtB,QAAQ;QACRY,SAAS;QACTD,QAAQ;QACRY,QAAQ;QACRV,SAAS;QACTC,SAAS;QACTC,SAAS;QACTG,QAAQ;QACRM,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAuC;QAA8D;KAA+D;IACxKC,GAAG;QAAC;KAA8C;IAClDC,GAAG;QAAC;QAAmE;QAAsE;QAAoE;QAAuE;QAA2D;QAAgE;QAAkE;QAAuD;QAAoE;QAAsE;QAAsE;QAAuE;QAAkE;QAAqE;QAAmE;QAAqE;QAAmG;QAAiG;QAA+F;QAA8F;QAAwF;QAAyF;QAAyF;QAA0F;QAAgE;QAAkE;QAAiE;QAAmE;QAAoE;QAAmE;QAAiE;QAA+D;QAAiC;QAAmD;QAA8D;QAAiC;QAAgC;QAA2B;QAAwF;QAA2G;QAA+C;QAA8B;QAAqD;QAA2B;QAAoG;QAAgC;QAAiC;QAA2C;QAAqF;QAAoD;QAAyB;QAA0B;QAA6B;QAA4B;QAAoH;QAAiH;KAA0D;IACtlHC,GAAG;QAAC;QAA0E;QAA8D;QAAoD;QAAmD;QAA0F;QAA+D;QAAgE;QAAqE;QAAuC;QAAmD;QAAqD;KAAoF;IACpvBC,GAAG;QAAC;YAAC;YAA8D;gBACjEA,GAAG;YACL;SAAE;QAAE;YAAC;YAAoE;gBACvEA,GAAG;YACL;SAAE;QAAE;YAAC;YAAuF;gBAC1FA,GAAG;YACL;SAAE;QAAE;YAAC;YAAoE;gBACvEA,GAAG;YACL;SAAE;KAAC;AACL;AAEO,MAAM7E,6BAA6B8E,CAAAA,QAAS;IACjD,MAAMC,SAASxE;IACfuE,MAAM7E,IAAI,CAAC+E,SAAS,GAAGC,IAAAA,mBAAY,EAAClF,mBAAmBE,IAAI,EAAE8E,OAAO9E,IAAI,EAAE8E,OAAOtE,cAAc,EAAEqE,MAAMX,QAAQ,IAAIY,OAAOZ,QAAQ,EAAEW,MAAM7E,IAAI,CAAC+E,SAAS;IACxJ,IAAIF,MAAMzE,OAAO,EAAE;QACjByE,MAAMzE,OAAO,CAAC2E,SAAS,GAAGC,IAAAA,mBAAY,EAAClF,mBAAmBM,OAAO,EAAE0E,OAAO1E,OAAO,EAAEyE,MAAMzE,OAAO,CAAC2E,SAAS;IAC5G,CAAC;IACD,IAAIF,MAAM3E,SAAS,EAAE;QACnB2E,MAAM3E,SAAS,CAAC6E,SAAS,GAAGC,IAAAA,mBAAY,EAAClF,mBAAmBI,SAAS,EAAE2E,MAAM3E,SAAS,CAAC6E,SAAS;IAClG,CAAC;IACD,IAAIF,MAAMxE,gBAAgB,EAAE;QAC1BwE,MAAMxE,gBAAgB,CAAC0E,SAAS,GAAGC,IAAAA,mBAAY,EAAClF,mBAAmBO,gBAAgB,EAAE,CAACwE,MAAMX,QAAQ,IAAIY,OAAOzE,gBAAgB,EAAEwE,MAAMxE,gBAAgB,CAAC0E,SAAS;IACnK,CAAC;IACD,IAAIF,MAAM5E,IAAI,EAAE;QACd4E,MAAM5E,IAAI,CAAC8E,SAAS,GAAGC,IAAAA,mBAAY,EAAClF,mBAAmBG,IAAI,EAAE6E,OAAO7E,IAAI,EAAE4E,MAAM5E,IAAI,CAAC8E,SAAS;IAChG,CAAC;IACD,IAAIF,MAAM1E,gBAAgB,EAAE;QAC1B0E,MAAM1E,gBAAgB,CAAC4E,SAAS,GAAGC,IAAAA,mBAAY,EAAClF,mBAAmBK,gBAAgB,EAAE2E,OAAO3E,gBAAgB,EAAE0E,MAAM1E,gBAAgB,CAAC4E,SAAS;IAChJ,CAAC;IACDE,IAAAA,kCAA2B,EAACJ;AAC9B,GACA,oDAAoD"}
|
1
|
+
{"version":3,"sources":["useMenuItemStyles.styles.js"],"sourcesContent":["import { mergeClasses, __styles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nexport const menuItemClassNames = {\n root: 'fui-MenuItem',\n icon: 'fui-MenuItem__icon',\n checkmark: 'fui-MenuItem__checkmark',\n submenuIndicator: 'fui-MenuItem__submenuIndicator',\n content: 'fui-MenuItem__content',\n secondaryContent: 'fui-MenuItem__secondaryContent'\n};\nconst useStyles = /*#__PURE__*/__styles({\n focusIndicator: {\n Brovlpu: \"ftqa4ok\",\n B486eqv: \"f2hkw1w\",\n B8q5s1w: \"f8hki3x\",\n Bci5o5g: [\"f1d2448m\", \"ffh67wi\"],\n n8qw10: \"f1bjia2o\",\n Bdrgwmp: [\"ffh67wi\", \"f1d2448m\"],\n Bm4h7ae: \"f15bsgw9\",\n B7ys5i9: \"f14e48fq\",\n Busjfv9: \"f18yb2kv\",\n Bhk32uz: \"fd6o370\",\n Bf4ptjt: \"fh1cnn4\",\n kclons: [\"fy7oxxb\", \"f184ne2d\"],\n Bhdgwq3: \"fpukqih\",\n Blkhhs4: [\"f184ne2d\", \"fy7oxxb\"],\n Bqtpl0w: \"frrh606\",\n clg4pj: [\"f1v5zibi\", \"fo2hd23\"],\n hgwjuy: \"ful5kiu\",\n Bonggc9: [\"fo2hd23\", \"f1v5zibi\"],\n B1tsrr9: [\"f1jqcqds\", \"ftffrms\"],\n Dah5zi: [\"ftffrms\", \"f1jqcqds\"],\n Bkh64rk: [\"f2e7qr6\", \"fsr1zz6\"],\n qqdqy8: [\"fsr1zz6\", \"f2e7qr6\"],\n B6dhp37: \"f1dvezut\",\n i03rao: [\"fd0oaoj\", \"f1cwg4i8\"],\n Boxcth7: \"fjvm52t\",\n Bsom6fd: [\"f1cwg4i8\", \"fd0oaoj\"],\n J0r882: \"f57olzd\",\n Bule8hv: [\"f4stah7\", \"fs1por5\"],\n Bjwuhne: \"f480a47\",\n Ghsupd: [\"fs1por5\", \"f4stah7\"]\n },\n root: {\n Bbmb7ep: [\"f1aa9q02\", \"f16jpd5f\"],\n Beyfa6y: [\"f16jpd5f\", \"f1aa9q02\"],\n B7oj6ja: [\"f1jar5jt\", \"fyu767a\"],\n Btl43ni: [\"fyu767a\", \"f1jar5jt\"],\n qhf8xq: \"f10pi13n\",\n sj55zd: \"fkfq4zb\",\n De3pzq: \"fxugw4r\",\n z189sj: [\"f1sgzk6v\", \"f1bg5zqg\"],\n uwmqm3: [\"f1bg5zqg\", \"f1sgzk6v\"],\n Bqenvij: \"f1d2rq10\",\n sshi5w: \"f1nxs5xn\",\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f122n59\",\n Be2twd7: \"fkhj508\",\n Bceei9c: \"f1k6fduh\",\n i8kkvl: \"f1q8lukm\",\n Belr9w4: \"f1ma2n7n\",\n Jwef8y: \"f1knas48\",\n Bi91k9c: \"fnwyq0v\",\n Bk3fhr4: \"ft1hn21\",\n Bmfj8id: \"fuxngvv\",\n Bg7n49j: \"fp258yr\",\n famaaq: \"f1xqy1su\"\n },\n content: {\n uwmqm3: [\"f161knb0\", \"f12huiiw\"],\n z189sj: [\"f12huiiw\", \"f161knb0\"],\n De3pzq: \"f3rmtva\",\n Bh6795r: \"fqerorx\"\n },\n secondaryContent: {\n uwmqm3: [\"f161knb0\", \"f12huiiw\"],\n z189sj: [\"f12huiiw\", \"f161knb0\"],\n sj55zd: \"f11d4kpn\",\n Bi91k9c: \"f1jp5ecu\",\n t0hwav: \"fc1cou1\"\n },\n icon: {\n a9b677: \"f64fuq3\",\n Bqenvij: \"fjamq6b\",\n Be2twd7: \"fe5j1ua\",\n Bg96gwp: \"fez10in\",\n Bt984gj: \"f122n59\",\n mc9l5x: \"ftuwxu6\",\n Brf1p80: \"f4d9j23\"\n },\n submenuIndicator: {\n a9b677: \"f64fuq3\",\n Bqenvij: \"fjamq6b\",\n Be2twd7: \"fe5j1ua\",\n Bg96gwp: \"fez10in\",\n Bt984gj: \"f122n59\",\n mc9l5x: \"ftuwxu6\",\n Brf1p80: \"f4d9j23\"\n },\n disabled: {\n sj55zd: \"f1s2aq7o\",\n Bi91k9c: \"fvgxktp\",\n Jwef8y: \"f1ijtazh\",\n eoavqd: \"fphbwmw\",\n Bk3fhr4: \"f19vpps7\",\n Bmfj8id: \"fv5swzo\",\n Bg7n49j: \"f1q1x1ba\",\n t0hwav: \"ft33916\",\n Bbusuzp: \"f1dcs8yz\",\n ze5xyy: \"f1kc2mi9\",\n Bctn1xl: \"fk56vqo\",\n Bh6z0a4: \"f1ikwg0d\"\n }\n}, {\n f: [\".ftqa4ok:focus{outline-style:none;}\", \".fc1cou1:focus{color:var(--colorNeutralForeground3Hover);}\", \".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}\"],\n i: [\".f2hkw1w:focus-visible{outline-style:none;}\"],\n d: [\".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}\", \".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}\", \".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}\", \".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}\", \".f15bsgw9[data-fui-focus-visible]::after{content:\\\"\\\";}\", \".f14e48fq[data-fui-focus-visible]::after{position:absolute;}\", \".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}\", \".fd6o370[data-fui-focus-visible]::after{z-index:1;}\", \".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}\", \".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}\", \".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}\", \".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}\", \".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}\", \".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}\", \".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}\", \".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}\", \".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}\", \".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}\", \".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}\", \".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}\", \".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}\", \".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}\", \".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}\", \".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}\", \".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}\", \".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}\", \".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}\", \".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}\", \".f10pi13n{position:relative;}\", \".fkfq4zb{color:var(--colorNeutralForeground2);}\", \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".f1sgzk6v{padding-right:6px;}\", \".f1bg5zqg{padding-left:6px;}\", \".f1d2rq10{height:32px;}\", \".f1nxs5xn{min-height:32px;}\", \".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".f1k6fduh{cursor:pointer;}\", \".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}\", \".f1ma2n7n{row-gap:4px;}\", \".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}\", \".f161knb0{padding-left:2px;}\", \".f12huiiw{padding-right:2px;}\", \".f3rmtva{background-color:transparent;}\", \".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}\", \".f11d4kpn{color:var(--colorNeutralForeground3);}\", \".f64fuq3{width:20px;}\", \".fjamq6b{height:20px;}\", \".fe5j1ua{font-size:20px;}\", \".fez10in{line-height:0;}\", \".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}\", \".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\"],\n h: [\".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}\", \".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}\", \".ft1hn21:hover .fui-Icon-filled{display:inline;}\", \".fuxngvv:hover .fui-Icon-regular{display:none;}\", \".fp258yr:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}\", \".f1jp5ecu:hover{color:var(--colorNeutralForeground3Hover);}\", \".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}\", \".f1ijtazh:hover{background-color:var(--colorNeutralBackground1);}\", \".fphbwmw:hover{cursor:not-allowed;}\", \".f19vpps7:hover .fui-Icon-filled{display:none;}\", \".fv5swzo:hover .fui-Icon-regular{display:inline;}\", \".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}\"],\n m: [[\"@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f1kc2mi9:hover{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.fk56vqo:hover .fui-MenuItem__icon{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f1ikwg0d:focus{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }]]\n});\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(menuItemClassNames.root, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n }\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, !state.disabled && styles.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n }\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, styles.submenuIndicator, state.submenuIndicator.className);\n }\n useCheckmarkStyles_unstable(state);\n};\n//# sourceMappingURL=useMenuItemStyles.styles.js.map"],"names":["menuItemClassNames","useMenuItemStyles_unstable","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","__styles","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bule8hv","Bjwuhne","Ghsupd","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","qhf8xq","sj55zd","De3pzq","z189sj","uwmqm3","Bqenvij","sshi5w","mc9l5x","Bt984gj","Be2twd7","Bceei9c","i8kkvl","Belr9w4","Jwef8y","Bi91k9c","Bk3fhr4","Bmfj8id","Bg7n49j","famaaq","Bh6795r","t0hwav","a9b677","Bg96gwp","Brf1p80","disabled","eoavqd","Bbusuzp","ze5xyy","Bctn1xl","Bh6z0a4","f","i","d","h","m","state","styles","className","mergeClasses","useCheckmarkStyles_unstable"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useMenuList.js"],"sourcesContent":["import * as React from 'react';\nimport { useMergedRefs, useEventCallback, useControllableState, getNativeElementProps } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\n/**\n * Returns the props and state required to render the component\n */ export const useMenuList_unstable = (props, ref)=>{\n const { findAllFocusable } = useFocusFinders();\n const menuContext = useMenuContextSelectors();\n const hasMenuContext = useHasParentContext(MenuContext);\n const focusAttributes = useArrowNavigationGroup({\n circular: true,\n ignoreDefaultKeydown: {\n Tab: hasMenuContext\n }\n });\n if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n // TODO throw warnings in development safely\n // eslint-disable-next-line no-console\n console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n }\n const innerRef = React.useRef(null);\n const setFocusByFirstCharacter = React.useCallback((e, itemEl)=>{\n // TODO use some kind of children registration to reduce dependency on DOM roles\n const acceptedRoles = [\n 'menuitem',\n 'menuitemcheckbox',\n 'menuitemradio'\n ];\n if (!innerRef.current) {\n return;\n }\n const menuItems = findAllFocusable(innerRef.current, (el)=>el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')) !== -1);\n let startIndex = menuItems.indexOf(itemEl) + 1;\n if (startIndex === menuItems.length) {\n startIndex = 0;\n }\n const firstChars = menuItems.map((menuItem)=>{\n var _menuItem_textContent;\n return (_menuItem_textContent = menuItem.textContent) === null || _menuItem_textContent === void 0 ? void 0 : _menuItem_textContent.charAt(0).toLowerCase();\n });\n const char = e.key.toLowerCase();\n const getIndexFirstChars = (start, firstChar)=>{\n for(let i = start; i < firstChars.length; i++){\n if (char === firstChars[i]) {\n return i;\n }\n }\n return -1;\n };\n // Check remaining slots in the menu\n let index = getIndexFirstChars(startIndex, char);\n // If not found in remaining slots, check from beginning\n if (index === -1) {\n index = getIndexFirstChars(0, char);\n }\n // If match was found...\n if (index > -1) {\n menuItems[index].focus();\n }\n }, [\n findAllFocusable\n ]);\n var _props_checkedValues;\n const [checkedValues, setCheckedValues] = useControllableState({\n state: (_props_checkedValues = props.checkedValues) !== null && _props_checkedValues !== void 0 ? _props_checkedValues : hasMenuContext ? menuContext.checkedValues : undefined,\n defaultState: props.defaultCheckedValues,\n initialState: {}\n });\n var _props_onCheckedValueChange;\n const handleCheckedValueChange = (_props_onCheckedValueChange = props.onCheckedValueChange) !== null && _props_onCheckedValueChange !== void 0 ? _props_onCheckedValueChange : hasMenuContext ? menuContext.onCheckedValueChange : undefined;\n const toggleCheckbox = useEventCallback((e, name, value, checked)=>{\n const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];\n const newCheckedItems = [\n ...checkedItems\n ];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {\n name,\n checkedItems: newCheckedItems\n });\n setCheckedValues((s)=>({\n ...s,\n [name]: newCheckedItems\n }));\n });\n const selectRadio = useEventCallback((e, name, value)=>{\n const newCheckedItems = [\n value\n ];\n setCheckedValues((s)=>({\n ...s,\n [name]: newCheckedItems\n }));\n handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {\n name,\n checkedItems: newCheckedItems\n });\n });\n return {\n components: {\n root: 'div'\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'menu',\n 'aria-labelledby': menuContext.triggerId,\n ...focusAttributes,\n ...props\n }),\n hasIcons: menuContext.hasIcons || false,\n hasCheckmarks: menuContext.hasCheckmarks || false,\n checkedValues,\n setFocusByFirstCharacter,\n selectRadio,\n toggleCheckbox\n };\n};\n/**\n * Adds some sugar to fetching multiple context selector values\n */ const useMenuContextSelectors = ()=>{\n const checkedValues = useMenuContext_unstable((context)=>context.checkedValues);\n const onCheckedValueChange = useMenuContext_unstable((context)=>context.onCheckedValueChange);\n const triggerId = useMenuContext_unstable((context)=>context.triggerId);\n const hasIcons = useMenuContext_unstable((context)=>context.hasIcons);\n const hasCheckmarks = useMenuContext_unstable((context)=>context.hasCheckmarks);\n return {\n checkedValues,\n onCheckedValueChange,\n triggerId,\n hasIcons,\n hasCheckmarks\n };\n};\n/**\n * Helper function to detect if props and MenuContext values are both used\n */ const usingPropsAndMenuContext = (props, contextValue, hasMenuContext)=>{\n let isUsingPropsAndContext = false;\n for(const val in contextValue){\n if (props[val]) {\n isUsingPropsAndContext = true;\n }\n }\n return hasMenuContext && isUsingPropsAndContext;\n};\n"],"names":["useMenuList_unstable","props","ref","findAllFocusable","useFocusFinders","menuContext","useMenuContextSelectors","hasMenuContext","useHasParentContext","MenuContext","focusAttributes","useArrowNavigationGroup","circular","ignoreDefaultKeydown","Tab","usingPropsAndMenuContext","console","warn","innerRef","React","useRef","setFocusByFirstCharacter","useCallback","e","itemEl","acceptedRoles","current","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","_menuItem_textContent","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","_props_checkedValues","checkedValues","setCheckedValues","useControllableState","state","undefined","defaultState","defaultCheckedValues","initialState","_props_onCheckedValueChange","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","useEventCallback","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","getNativeElementProps","useMergedRefs","role","triggerId","hasIcons","hasCheckmarks","useMenuContext_unstable","context","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}
|
1
|
+
{"version":3,"sources":["useMenuList.js"],"sourcesContent":["import * as React from 'react';\nimport { useMergedRefs, useEventCallback, useControllableState, getNativeElementProps } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\n/**\n * Returns the props and state required to render the component\n */ export const useMenuList_unstable = (props, ref)=>{\n const { findAllFocusable } = useFocusFinders();\n const menuContext = useMenuContextSelectors();\n const hasMenuContext = useHasParentContext(MenuContext);\n const focusAttributes = useArrowNavigationGroup({\n circular: true,\n ignoreDefaultKeydown: {\n Tab: hasMenuContext\n }\n });\n if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n // TODO throw warnings in development safely\n // eslint-disable-next-line no-console\n console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n }\n const innerRef = React.useRef(null);\n const setFocusByFirstCharacter = React.useCallback((e, itemEl)=>{\n // TODO use some kind of children registration to reduce dependency on DOM roles\n const acceptedRoles = [\n 'menuitem',\n 'menuitemcheckbox',\n 'menuitemradio'\n ];\n if (!innerRef.current) {\n return;\n }\n const menuItems = findAllFocusable(innerRef.current, (el)=>el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')) !== -1);\n let startIndex = menuItems.indexOf(itemEl) + 1;\n if (startIndex === menuItems.length) {\n startIndex = 0;\n }\n const firstChars = menuItems.map((menuItem)=>{\n var _menuItem_textContent;\n return (_menuItem_textContent = menuItem.textContent) === null || _menuItem_textContent === void 0 ? void 0 : _menuItem_textContent.charAt(0).toLowerCase();\n });\n const char = e.key.toLowerCase();\n const getIndexFirstChars = (start, firstChar)=>{\n for(let i = start; i < firstChars.length; i++){\n if (char === firstChars[i]) {\n return i;\n }\n }\n return -1;\n };\n // Check remaining slots in the menu\n let index = getIndexFirstChars(startIndex, char);\n // If not found in remaining slots, check from beginning\n if (index === -1) {\n index = getIndexFirstChars(0, char);\n }\n // If match was found...\n if (index > -1) {\n menuItems[index].focus();\n }\n }, [\n findAllFocusable\n ]);\n var _props_checkedValues;\n const [checkedValues, setCheckedValues] = useControllableState({\n state: (_props_checkedValues = props.checkedValues) !== null && _props_checkedValues !== void 0 ? _props_checkedValues : hasMenuContext ? menuContext.checkedValues : undefined,\n defaultState: props.defaultCheckedValues,\n initialState: {}\n });\n var _props_onCheckedValueChange;\n const handleCheckedValueChange = (_props_onCheckedValueChange = props.onCheckedValueChange) !== null && _props_onCheckedValueChange !== void 0 ? _props_onCheckedValueChange : hasMenuContext ? menuContext.onCheckedValueChange : undefined;\n const toggleCheckbox = useEventCallback((e, name, value, checked)=>{\n const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];\n const newCheckedItems = [\n ...checkedItems\n ];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {\n name,\n checkedItems: newCheckedItems\n });\n setCheckedValues((s)=>({\n ...s,\n [name]: newCheckedItems\n }));\n });\n const selectRadio = useEventCallback((e, name, value)=>{\n const newCheckedItems = [\n value\n ];\n setCheckedValues((s)=>({\n ...s,\n [name]: newCheckedItems\n }));\n handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {\n name,\n checkedItems: newCheckedItems\n });\n });\n return {\n components: {\n root: 'div'\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'menu',\n 'aria-labelledby': menuContext.triggerId,\n ...focusAttributes,\n ...props\n }),\n hasIcons: menuContext.hasIcons || false,\n hasCheckmarks: menuContext.hasCheckmarks || false,\n checkedValues,\n hasMenuContext,\n setFocusByFirstCharacter,\n selectRadio,\n toggleCheckbox\n };\n};\n/**\n * Adds some sugar to fetching multiple context selector values\n */ const useMenuContextSelectors = ()=>{\n const checkedValues = useMenuContext_unstable((context)=>context.checkedValues);\n const onCheckedValueChange = useMenuContext_unstable((context)=>context.onCheckedValueChange);\n const triggerId = useMenuContext_unstable((context)=>context.triggerId);\n const hasIcons = useMenuContext_unstable((context)=>context.hasIcons);\n const hasCheckmarks = useMenuContext_unstable((context)=>context.hasCheckmarks);\n return {\n checkedValues,\n onCheckedValueChange,\n triggerId,\n hasIcons,\n hasCheckmarks\n };\n};\n/**\n * Helper function to detect if props and MenuContext values are both used\n */ const usingPropsAndMenuContext = (props, contextValue, hasMenuContext)=>{\n let isUsingPropsAndContext = false;\n for(const val in contextValue){\n if (props[val]) {\n isUsingPropsAndContext = true;\n }\n }\n return hasMenuContext && isUsingPropsAndContext;\n};\n"],"names":["useMenuList_unstable","props","ref","findAllFocusable","useFocusFinders","menuContext","useMenuContextSelectors","hasMenuContext","useHasParentContext","MenuContext","focusAttributes","useArrowNavigationGroup","circular","ignoreDefaultKeydown","Tab","usingPropsAndMenuContext","console","warn","innerRef","React","useRef","setFocusByFirstCharacter","useCallback","e","itemEl","acceptedRoles","current","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","_menuItem_textContent","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","_props_checkedValues","checkedValues","setCheckedValues","useControllableState","state","undefined","defaultState","defaultCheckedValues","initialState","_props_onCheckedValueChange","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","useEventCallback","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","getNativeElementProps","useMergedRefs","role","triggerId","hasIcons","hasCheckmarks","useMenuContext_unstable","context","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}
|
@@ -22,17 +22,21 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
|
22
22
|
Beiy3e4: "f1vx9l62",
|
23
23
|
i8kkvl: "f16mnhsx",
|
24
24
|
Belr9w4: "fbi42co"
|
25
|
+
},
|
26
|
+
hasMenuContext: {
|
27
|
+
Bqenvij: "f1l02sjl"
|
25
28
|
}
|
26
29
|
}, {
|
27
30
|
d: [
|
28
31
|
".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
|
29
32
|
".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}",
|
30
33
|
".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}",
|
31
|
-
".fbi42co{row-gap:2px;}"
|
34
|
+
".fbi42co{row-gap:2px;}",
|
35
|
+
".f1l02sjl{height:100%;}"
|
32
36
|
]
|
33
37
|
});
|
34
38
|
const useMenuListStyles_unstable = (state)=>{
|
35
39
|
const styles = useStyles();
|
36
|
-
state.root.className = (0, _react.mergeClasses)(menuListClassNames.root, styles.root, state.root.className);
|
40
|
+
state.root.className = (0, _react.mergeClasses)(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);
|
37
41
|
return state;
|
38
42
|
}; //# sourceMappingURL=useMenuListStyles.styles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useMenuListStyles.styles.js"],"sourcesContent":["import { mergeClasses, __styles, shorthands } from '@griffel/react';\nexport const menuListClassNames = {\n root: 'fui-MenuList'\n};\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"f22iagw\",\n Beiy3e4: \"f1vx9l62\",\n i8kkvl: \"f16mnhsx\",\n Belr9w4: \"fbi42co\"\n }\n}, {\n d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}\", \".fbi42co{row-gap:2px;}\"]\n});\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);\n return state;\n};\n//# sourceMappingURL=useMenuListStyles.styles.js.map"],"names":["menuListClassNames","useMenuListStyles_unstable","root","useStyles","__styles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","d","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,kBAAkB,MAAlBA;
|
1
|
+
{"version":3,"sources":["useMenuListStyles.styles.js"],"sourcesContent":["import { mergeClasses, __styles, shorthands } from '@griffel/react';\nexport const menuListClassNames = {\n root: 'fui-MenuList'\n};\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"f22iagw\",\n Beiy3e4: \"f1vx9l62\",\n i8kkvl: \"f16mnhsx\",\n Belr9w4: \"fbi42co\"\n },\n hasMenuContext: {\n Bqenvij: \"f1l02sjl\"\n }\n}, {\n d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}\", \".fbi42co{row-gap:2px;}\", \".f1l02sjl{height:100%;}\"]\n});\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);\n return state;\n};\n//# sourceMappingURL=useMenuListStyles.styles.js.map"],"names":["menuListClassNames","useMenuListStyles_unstable","root","useStyles","__styles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","hasMenuContext","Bqenvij","d","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,kBAAkB,MAAlBA;IAmBAC,0BAA0B,MAA1BA;;uBApBsC;AAC5C,MAAMD,qBAAqB;IAChCE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;IACAC,gBAAgB;QACdC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAwF;QAA6F;QAAqD;QAA0B;KAA0B;AACpS;AAIO,MAAMV,6BAA6BW,CAAAA,QAAS;IACjD,MAAMC,SAASV;IACfS,MAAMV,IAAI,CAACY,SAAS,GAAGC,IAAAA,mBAAY,EAACf,mBAAmBE,IAAI,EAAEW,OAAOX,IAAI,EAAEU,MAAMH,cAAc,IAAII,OAAOJ,cAAc,EAAEG,MAAMV,IAAI,CAACY,SAAS;IAC7I,OAAOF;AACT,GACA,oDAAoD"}
|
@@ -14,14 +14,17 @@ const _menuContext = require("../../contexts/menuContext");
|
|
14
14
|
const _index = require("../../utils/index");
|
15
15
|
const _reactSharedContexts = require("@fluentui/react-shared-contexts");
|
16
16
|
const _useIsSubmenu = require("../../utils/useIsSubmenu");
|
17
|
+
const _reactTabster = require("@fluentui/react-tabster");
|
17
18
|
const useMenuPopover_unstable = (props, ref)=>{
|
18
19
|
const popoverRef = (0, _menuContext.useMenuContext_unstable)((context)=>context.menuPopoverRef);
|
19
20
|
const setOpen = (0, _menuContext.useMenuContext_unstable)((context)=>context.setOpen);
|
20
21
|
const open = (0, _menuContext.useMenuContext_unstable)((context)=>context.open);
|
21
22
|
const openOnHover = (0, _menuContext.useMenuContext_unstable)((context)=>context.openOnHover);
|
23
|
+
const triggerRef = (0, _menuContext.useMenuContext_unstable)((context)=>context.triggerRef);
|
22
24
|
const isSubmenu = (0, _useIsSubmenu.useIsSubmenu)();
|
23
25
|
const canDispatchCustomEventRef = _react.useRef(true);
|
24
26
|
const throttleDispatchTimerRef = _react.useRef(0);
|
27
|
+
const restoreFocusSourceAttributes = (0, _reactTabster.useRestoreFocusSource)();
|
25
28
|
const { dir } = (0, _reactSharedContexts.useFluent_unstable)();
|
26
29
|
const CloseArrowKey = dir === 'ltr' ? _keyboardKeys.ArrowLeft : _keyboardKeys.ArrowRight;
|
27
30
|
// use DOM listener since react events propagate up the react tree
|
@@ -53,6 +56,7 @@ const useMenuPopover_unstable = (props, ref)=>{
|
|
53
56
|
const mountNode = (0, _menuContext.useMenuContext_unstable)((context)=>context.mountNode);
|
54
57
|
const rootProps = (0, _reactUtilities.getNativeElementProps)('div', {
|
55
58
|
role: 'presentation',
|
59
|
+
...restoreFocusSourceAttributes,
|
56
60
|
...props,
|
57
61
|
ref: (0, _reactUtilities.useMergedRefs)(ref, popoverRef, mouseOverListenerCallbackRef)
|
58
62
|
});
|
@@ -91,6 +95,10 @@ const useMenuPopover_unstable = (props, ref)=>{
|
|
91
95
|
type: 'menuPopoverKeyDown',
|
92
96
|
event
|
93
97
|
});
|
98
|
+
if (!isSubmenu) {
|
99
|
+
var _triggerRef_current;
|
100
|
+
(_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
|
101
|
+
}
|
94
102
|
}
|
95
103
|
onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);
|
96
104
|
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useMenuPopover.js"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */ export const useMenuPopover_unstable = (props, ref)=>{\n const popoverRef = useMenuContext_unstable((context)=>context.menuPopoverRef);\n const setOpen = useMenuContext_unstable((context)=>context.setOpen);\n const open = useMenuContext_unstable((context)=>context.open);\n const openOnHover = useMenuContext_unstable((context)=>context.openOnHover);\n const isSubmenu = useIsSubmenu();\n const canDispatchCustomEventRef = React.useRef(true);\n const throttleDispatchTimerRef = React.useRef(0);\n const { dir } = useFluent();\n const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n // use DOM listener since react events propagate up the react tree\n // no need to do `contains` logic as menus are all positioned in different portals\n const mouseOverListenerCallbackRef = React.useCallback((node)=>{\n if (node) {\n // Dispatches the custom menu mouse enter event with throttling\n // Needs to trigger on mouseover to support keyboard + mouse together\n // i.e. keyboard opens submenus while cursor is still on the parent\n node.addEventListener('mouseover', (e)=>{\n if (canDispatchCustomEventRef.current) {\n canDispatchCustomEventRef.current = false;\n dispatchMenuEnterEvent(popoverRef.current, e);\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore #16889 Node setTimeout type leaking\n throttleDispatchTimerRef.current = setTimeout(()=>canDispatchCustomEventRef.current = true, 250);\n }\n });\n }\n }, [\n popoverRef,\n throttleDispatchTimerRef\n ]);\n React.useEffect(()=>{\n ()=>clearTimeout(throttleDispatchTimerRef.current);\n }, []);\n var _useMenuContext_unstable;\n const inline = (_useMenuContext_unstable = useMenuContext_unstable((context)=>context.inline)) !== null && _useMenuContext_unstable !== void 0 ? _useMenuContext_unstable : false;\n const mountNode = useMenuContext_unstable((context)=>context.mountNode);\n const rootProps = getNativeElementProps('div', {\n role: 'presentation',\n ...props,\n ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef)\n });\n const { onMouseEnter: onMouseEnterOriginal , onKeyDown: onKeyDownOriginal } = rootProps;\n rootProps.onMouseEnter = useEventCallback((event)=>{\n if (openOnHover) {\n setOpen(event, {\n open: true,\n keyboard: false,\n type: 'menuPopoverMouseEnter',\n event\n });\n }\n onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);\n });\n rootProps.onKeyDown = useEventCallback((event)=>{\n const key = event.key;\n if (key === Escape || isSubmenu && key === CloseArrowKey) {\n var _popoverRef_current;\n if (open && ((_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.contains(event.target))) {\n setOpen(event, {\n open: false,\n keyboard: true,\n type: 'menuPopoverKeyDown',\n event\n });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover and Tooltip\n event.stopPropagation();\n }\n }\n if (key === Tab) {\n setOpen(event, {\n open: false,\n keyboard: true,\n type: 'menuPopoverKeyDown',\n event\n });\n }\n onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);\n });\n return {\n inline,\n mountNode,\n components: {\n root: 'div'\n },\n root: rootProps\n };\n};\n"],"names":["useMenuPopover_unstable","props","ref","popoverRef","useMenuContext_unstable","context","menuPopoverRef","setOpen","open","openOnHover","isSubmenu","useIsSubmenu","canDispatchCustomEventRef","React","useRef","throttleDispatchTimerRef","dir","useFluent","CloseArrowKey","ArrowLeft","ArrowRight","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","dispatchMenuEnterEvent","setTimeout","useEffect","clearTimeout","_useMenuContext_unstable","inline","mountNode","rootProps","getNativeElementProps","role","useMergedRefs","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","useEventCallback","event","keyboard","type","key","Escape","_popoverRef_current","contains","target","stopPropagation","Tab","components","root"],"mappings":";;;;+
|
1
|
+
{"version":3,"sources":["useMenuPopover.js"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */ export const useMenuPopover_unstable = (props, ref)=>{\n const popoverRef = useMenuContext_unstable((context)=>context.menuPopoverRef);\n const setOpen = useMenuContext_unstable((context)=>context.setOpen);\n const open = useMenuContext_unstable((context)=>context.open);\n const openOnHover = useMenuContext_unstable((context)=>context.openOnHover);\n const triggerRef = useMenuContext_unstable((context)=>context.triggerRef);\n const isSubmenu = useIsSubmenu();\n const canDispatchCustomEventRef = React.useRef(true);\n const throttleDispatchTimerRef = React.useRef(0);\n const restoreFocusSourceAttributes = useRestoreFocusSource();\n const { dir } = useFluent();\n const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n // use DOM listener since react events propagate up the react tree\n // no need to do `contains` logic as menus are all positioned in different portals\n const mouseOverListenerCallbackRef = React.useCallback((node)=>{\n if (node) {\n // Dispatches the custom menu mouse enter event with throttling\n // Needs to trigger on mouseover to support keyboard + mouse together\n // i.e. keyboard opens submenus while cursor is still on the parent\n node.addEventListener('mouseover', (e)=>{\n if (canDispatchCustomEventRef.current) {\n canDispatchCustomEventRef.current = false;\n dispatchMenuEnterEvent(popoverRef.current, e);\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore #16889 Node setTimeout type leaking\n throttleDispatchTimerRef.current = setTimeout(()=>canDispatchCustomEventRef.current = true, 250);\n }\n });\n }\n }, [\n popoverRef,\n throttleDispatchTimerRef\n ]);\n React.useEffect(()=>{\n ()=>clearTimeout(throttleDispatchTimerRef.current);\n }, []);\n var _useMenuContext_unstable;\n const inline = (_useMenuContext_unstable = useMenuContext_unstable((context)=>context.inline)) !== null && _useMenuContext_unstable !== void 0 ? _useMenuContext_unstable : false;\n const mountNode = useMenuContext_unstable((context)=>context.mountNode);\n const rootProps = getNativeElementProps('div', {\n role: 'presentation',\n ...restoreFocusSourceAttributes,\n ...props,\n ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef)\n });\n const { onMouseEnter: onMouseEnterOriginal , onKeyDown: onKeyDownOriginal } = rootProps;\n rootProps.onMouseEnter = useEventCallback((event)=>{\n if (openOnHover) {\n setOpen(event, {\n open: true,\n keyboard: false,\n type: 'menuPopoverMouseEnter',\n event\n });\n }\n onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);\n });\n rootProps.onKeyDown = useEventCallback((event)=>{\n const key = event.key;\n if (key === Escape || isSubmenu && key === CloseArrowKey) {\n var _popoverRef_current;\n if (open && ((_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.contains(event.target))) {\n setOpen(event, {\n open: false,\n keyboard: true,\n type: 'menuPopoverKeyDown',\n event\n });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover and Tooltip\n event.stopPropagation();\n }\n }\n if (key === Tab) {\n setOpen(event, {\n open: false,\n keyboard: true,\n type: 'menuPopoverKeyDown',\n event\n });\n if (!isSubmenu) {\n var _triggerRef_current;\n (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n }\n }\n onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);\n });\n return {\n inline,\n mountNode,\n components: {\n root: 'div'\n },\n root: rootProps\n };\n};\n"],"names":["useMenuPopover_unstable","props","ref","popoverRef","useMenuContext_unstable","context","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","useIsSubmenu","canDispatchCustomEventRef","React","useRef","throttleDispatchTimerRef","restoreFocusSourceAttributes","useRestoreFocusSource","dir","useFluent","CloseArrowKey","ArrowLeft","ArrowRight","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","dispatchMenuEnterEvent","setTimeout","useEffect","clearTimeout","_useMenuContext_unstable","inline","mountNode","rootProps","getNativeElementProps","role","useMergedRefs","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","useEventCallback","event","keyboard","type","key","Escape","_popoverRef_current","contains","target","stopPropagation","Tab","_triggerRef_current","focus","components","root"],"mappings":"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"}
|