@fluentui/react-menu 9.0.4 → 9.2.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +141 -5
- package/CHANGELOG.md +41 -6
- package/dist/index.d.ts +26 -28
- package/lib/components/Menu/Menu.types.js.map +1 -1
- package/lib/components/Menu/useMenu.js +46 -22
- package/lib/components/Menu/useMenu.js.map +1 -1
- package/lib/components/MenuItem/MenuItem.types.js.map +1 -1
- package/lib/components/MenuItem/useCharacterSearch.js +2 -4
- package/lib/components/MenuItem/useCharacterSearch.js.map +1 -1
- package/lib/components/MenuItem/useMenuItem.js +58 -72
- package/lib/components/MenuItem/useMenuItem.js.map +1 -1
- package/lib/components/MenuItem/useMenuItemStyles.js +50 -30
- package/lib/components/MenuItem/useMenuItemStyles.js.map +1 -1
- package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js +25 -27
- package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -1
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js.map +1 -1
- package/lib/components/MenuItemRadio/useMenuItemRadio.js +24 -30
- package/lib/components/MenuItemRadio/useMenuItemRadio.js.map +1 -1
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopover.js +6 -2
- package/lib/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib/components/MenuTrigger/MenuTrigger.types.js.map +1 -1
- package/lib/components/MenuTrigger/useMenuTrigger.js +18 -23
- package/lib/components/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib/contexts/menuContext.js +8 -6
- package/lib/contexts/menuContext.js.map +1 -1
- package/lib/contexts/menuGroupContext.js +9 -5
- package/lib/contexts/menuGroupContext.js.map +1 -1
- package/lib/contexts/menuListContext.js +5 -5
- package/lib/contexts/menuListContext.js.map +1 -1
- package/lib/contexts/menuTriggerContext.js +7 -3
- package/lib/contexts/menuTriggerContext.js.map +1 -1
- package/lib/selectable/types.js.map +1 -1
- package/lib-commonjs/components/Menu/useMenu.js +47 -22
- package/lib-commonjs/components/Menu/useMenu.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useCharacterSearch.js +2 -4
- package/lib-commonjs/components/MenuItem/useCharacterSearch.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItem.js +59 -71
- package/lib-commonjs/components/MenuItem/useMenuItem.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.js +50 -30
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.js.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckbox.js +26 -28
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadio.js +25 -31
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadio.js.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js +6 -2
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js +17 -22
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib-commonjs/contexts/menuContext.js +8 -6
- package/lib-commonjs/contexts/menuContext.js.map +1 -1
- package/lib-commonjs/contexts/menuGroupContext.js +9 -5
- package/lib-commonjs/contexts/menuGroupContext.js.map +1 -1
- package/lib-commonjs/contexts/menuListContext.js +5 -5
- package/lib-commonjs/contexts/menuListContext.js.map +1 -1
- package/lib-commonjs/contexts/menuTriggerContext.js +7 -3
- package/lib-commonjs/contexts/menuTriggerContext.js.map +1 -1
- package/package.json +15 -14
- package/dist/tsdoc-metadata.json +0 -11
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/MenuItemRadio/useMenuItemRadioStyles.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"sources":["components/MenuItemRadio/useMenuItemRadioStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,2BAAT,QAA4C,wBAA5C;AACA,SAAS,0BAAT,QAA2C,+BAA3C;AAKA,OAAO,MAAM,uBAAuB,GAA4D;EAC9F,IAAI,EAAE,mBADwF;EAE9F,IAAI,EAAE,yBAFwF;EAG9F,SAAS,EAAE,8BAHmF;EAI9F,OAAO,EAAE,4BAJqF;EAK9F,gBAAgB,EAAE;AAL4E,CAAzF;AAQP,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAA8B;EAC3E,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,uBAAuB,CAAC,IAAzB,EAA+B,KAAK,CAAC,IAAN,CAAW,SAA1C,CAAnC;;EAEA,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,uBAAuB,CAAC,OAAzB,EAAkC,KAAK,CAAC,OAAN,CAAc,SAAhD,CAAtC;EACD;;EAED,IAAI,KAAK,CAAC,gBAAV,EAA4B;IAC1B,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,uBAAuB,CAAC,gBADqB,EAE7C,KAAK,CAAC,gBAAN,CAAuB,SAFsB,CAA/C;EAID;;EAED,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,uBAAuB,CAAC,IAAzB,EAA+B,KAAK,CAAC,IAAN,CAAW,SAA1C,CAAnC;EACD;;EAED,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CAAC,uBAAuB,CAAC,SAAzB,EAAoC,KAAK,CAAC,SAAN,CAAgB,SAApD,CAAxC;EACD;;EAED,0BAA0B,CAAC,KAAD,CAA1B;EACA,2BAA2B,CAAC,KAAD,CAA3B;AACD,CAxBM","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../index';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\n\nexport const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n root: 'fui-MenuItemRadio',\n icon: 'fui-MenuItemRadio__icon',\n checkmark: 'fui-MenuItemRadio__checkmark',\n content: 'fui-MenuItemRadio__content',\n secondaryContent: 'fui-MenuItemRadio__secondaryContent',\n};\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState) => {\n state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemRadioClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);\n }\n\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"],"sourceRoot":"../src/"}
|
@@ -20,6 +20,7 @@ export const useMenuPopover_unstable = (props, ref) => {
|
|
20
20
|
|
21
21
|
const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);
|
22
22
|
const setOpen = useMenuContext_unstable(context => context.setOpen);
|
23
|
+
const open = useMenuContext_unstable(context => context.open);
|
23
24
|
const openOnHover = useMenuContext_unstable(context => context.openOnHover);
|
24
25
|
const isSubmenu = useIsSubmenu();
|
25
26
|
const canDispatchCustomEventRef = React.useRef(true);
|
@@ -75,11 +76,14 @@ export const useMenuPopover_unstable = (props, ref) => {
|
|
75
76
|
const key = e.key;
|
76
77
|
|
77
78
|
if (key === Escape || isSubmenu && key === CloseArrowKey) {
|
78
|
-
if ((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
|
79
|
+
if (open && ((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
|
79
80
|
setOpen(e, {
|
80
81
|
open: false,
|
81
82
|
keyboard: true
|
82
|
-
});
|
83
|
+
}); // stop propagation to avoid conflicting with other elements that listen for `Escape`
|
84
|
+
// e,g: Dialog, Popover and Tooltip
|
85
|
+
|
86
|
+
e.stopPropagation();
|
83
87
|
}
|
84
88
|
}
|
85
89
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,SAAT,EAAoB,GAApB,EAAyB,UAAzB,EAAqC,MAArC,QAAmD,yBAAnD;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,aAAlD,QAAuE,2BAAvE;AAEA,SAAS,uBAAT,QAAwC,4BAAxC;AACA,SAAS,sBAAT,QAAuC,mBAAvC;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AACA,SAAS,YAAT,QAA6B,0BAA7B;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;;;EAChH,MAAM,UAAU,GAAG,uBAAuB,CAAC,OAAO,IAAI,OAAO,CAAC,cAApB,CAA1C;EACA,MAAM,OAAO,GAAG,uBAAuB,CAAC,OAAO,IAAI,OAAO,CAAC,OAApB,CAAvC;EACA,MAAM,WAAW,GAAG,uBAAuB,CAAC,OAAO,IAAI,OAAO,CAAC,WAApB,CAA3C;EACA,MAAM,SAAS,GAAG,YAAY,EAA9B;EACA,MAAM,yBAAyB,GAAG,KAAK,CAAC,MAAN,CAAa,IAAb,CAAlC;EACA,MAAM,wBAAwB,GAAG,KAAK,CAAC,MAAN,CAAa,CAAb,CAAjC;EAEA,MAAM;IAAE;EAAF,IAAU,SAAS,EAAzB;EACA,MAAM,aAAa,GAAG,GAAG,KAAK,KAAR,GAAgB,SAAhB,GAA4B,UAAlD,
|
1
|
+
{"version":3,"sources":["components/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\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/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n const 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\n const { dir } = useFluent();\n const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n // use DOM listener since react events propagate up the react tree\n // no need to do `contains` logic as menus are all positioned in different portals\n const mouseOverListenerCallbackRef = React.useCallback(\n (node: HTMLElement) => {\n if (node) {\n // Dispatches the custom menu mouse enter event with throttling\n // Needs to trigger on mouseover to support keyboard + mouse together\n // i.e. keyboard opens submenus while cursor is still on the parent\n node.addEventListener('mouseover', e => {\n if (canDispatchCustomEventRef.current) {\n canDispatchCustomEventRef.current = false;\n dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n // 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, throttleDispatchTimerRef],\n );\n\n React.useEffect(() => {\n () => clearTimeout(throttleDispatchTimerRef.current);\n }, []);\n\n const inline = useMenuContext_unstable(context => context.inline) ?? false;\n const rootProps = getNativeElementProps('div', {\n role: 'presentation',\n ...props,\n ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef),\n });\n\n const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n\n rootProps.onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n if (openOnHover) {\n setOpen(e, { open: true, keyboard: false });\n }\n\n onMouseEnterOriginal?.(e);\n });\n\n rootProps.onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLElement>) => {\n const key = e.key;\n\n if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n if (open && popoverRef.current?.contains(e.target as HTMLElement)) {\n setOpen(e, { open: false, keyboard: true });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover and Tooltip\n e.stopPropagation();\n }\n }\n\n if (key === Tab) {\n setOpen(e, { open: false, keyboard: true });\n e.preventDefault();\n }\n\n onKeyDownOriginal?.(e);\n });\n\n return {\n inline,\n components: {\n root: 'div',\n },\n root: rootProps,\n };\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"MenuTrigger.types.js","sourceRoot":"../src/","sources":["components/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\nexport type MenuTriggerProps = {\n /**\n * Explicitly require single child or render function\n */\n children
|
1
|
+
{"version":3,"file":"MenuTrigger.types.js","sourceRoot":"../src/","sources":["components/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';\nimport * as React from 'react';\n\nexport type MenuTriggerProps = {\n /**\n * Explicitly require single child or render function\n */\n children: React.ReactElement | ((props: MenuTriggerChildProps) => React.ReactElement | null);\n};\n\n/**\n * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu\n */\nexport type MenuTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<\n Type,\n Props & {\n 'aria-haspopup': 'menu';\n 'aria-expanded'?: boolean;\n id: string;\n ref: React.Ref<never>;\n onMouseEnter: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onMouseLeave: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onMouseMove: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n onContextMenu: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;\n }\n>;\n\nexport type MenuTriggerState = {\n children: React.ReactElement | null;\n isSubmenu: boolean;\n};\n"]}
|
@@ -4,8 +4,8 @@ import { useIsSubmenu } from '../../utils/useIsSubmenu';
|
|
4
4
|
import { useFocusFinders } from '@fluentui/react-tabster';
|
5
5
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
6
6
|
import { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';
|
7
|
-
import { applyTriggerPropsToChildren, getTriggerChild,
|
8
|
-
import {
|
7
|
+
import { applyTriggerPropsToChildren, getTriggerChild, mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
|
8
|
+
import { useARIAButtonProps } from '@fluentui/react-aria';
|
9
9
|
/**
|
10
10
|
* Create the state required to render MenuTrigger.
|
11
11
|
* Clones the only child component and adds necessary event handling behaviours to open a popup menu
|
@@ -71,18 +71,10 @@ export const useMenuTrigger_unstable = props => {
|
|
71
71
|
};
|
72
72
|
|
73
73
|
const onKeyDown = e => {
|
74
|
-
var _a;
|
75
|
-
|
76
74
|
if (isTargetDisabled(e)) {
|
77
75
|
return;
|
78
76
|
}
|
79
77
|
|
80
|
-
if (shouldPreventDefaultOnKeyDown(e)) {
|
81
|
-
e.preventDefault();
|
82
|
-
openedWithKeyboardRef.current = true;
|
83
|
-
(_a = e.target) === null || _a === void 0 ? void 0 : _a.click();
|
84
|
-
}
|
85
|
-
|
86
78
|
const key = e.key;
|
87
79
|
|
88
80
|
if (!openOnContext && (isSubmenu && key === OpenArrowKey || !isSubmenu && key === ArrowDown)) {
|
@@ -148,21 +140,24 @@ export const useMenuTrigger_unstable = props => {
|
|
148
140
|
}
|
149
141
|
};
|
150
142
|
|
143
|
+
const triggerProps = {
|
144
|
+
'aria-haspopup': 'menu',
|
145
|
+
'aria-expanded': !open && !isSubmenu ? undefined : open,
|
146
|
+
id: triggerId,
|
147
|
+
...(child === null || child === void 0 ? void 0 : child.props),
|
148
|
+
ref: useMergedRefs(triggerRef, child === null || child === void 0 ? void 0 : child.ref),
|
149
|
+
onMouseEnter: useEventCallback(mergeCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter, onMouseEnter)),
|
150
|
+
onMouseLeave: useEventCallback(mergeCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onMouseLeave, onMouseLeave)),
|
151
|
+
onContextMenu: useEventCallback(mergeCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onContextMenu, onContextMenu)),
|
152
|
+
onMouseMove: useEventCallback(mergeCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onMouseMove, onMouseMove))
|
153
|
+
};
|
154
|
+
const ariaButtonTriggerProps = useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', { ...triggerProps,
|
155
|
+
onClick: useEventCallback(mergeCallbacks((_e = child === null || child === void 0 ? void 0 : child.props) === null || _e === void 0 ? void 0 : _e.onClick, onClick)),
|
156
|
+
onKeyDown: useEventCallback(mergeCallbacks((_f = child === null || child === void 0 ? void 0 : child.props) === null || _f === void 0 ? void 0 : _f.onKeyDown, onKeyDown))
|
157
|
+
});
|
151
158
|
return {
|
152
159
|
isSubmenu,
|
153
|
-
children: applyTriggerPropsToChildren(children,
|
154
|
-
'aria-haspopup': 'menu',
|
155
|
-
'aria-expanded': !open && !isSubmenu ? undefined : open,
|
156
|
-
id: triggerId,
|
157
|
-
...(child === null || child === void 0 ? void 0 : child.props),
|
158
|
-
ref: useMergedRefs(triggerRef, child === null || child === void 0 ? void 0 : child.ref),
|
159
|
-
onClick: useMergedEventCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onClick, onClick),
|
160
|
-
onMouseEnter: useMergedEventCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onMouseEnter, onMouseEnter),
|
161
|
-
onMouseLeave: useMergedEventCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onMouseLeave, onMouseLeave),
|
162
|
-
onKeyDown: useMergedEventCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onKeyDown, onKeyDown),
|
163
|
-
onContextMenu: useMergedEventCallbacks((_e = child === null || child === void 0 ? void 0 : child.props) === null || _e === void 0 ? void 0 : _e.onContextMenu, onContextMenu),
|
164
|
-
onMouseMove: useMergedEventCallbacks((_f = child === null || child === void 0 ? void 0 : child.props) === null || _f === void 0 ? void 0 : _f.onMouseMove, onMouseMove)
|
165
|
-
})
|
160
|
+
children: applyTriggerPropsToChildren(children, openOnContext ? triggerProps : ariaButtonTriggerProps)
|
166
161
|
};
|
167
162
|
};
|
168
163
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { MenuTriggerChildProps, MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n useMergedEventCallbacks,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { shouldPreventDefaultOnKeyDown } from '@fluentui/react-utilities';\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 } = props;\n\n const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n const menuPopoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n const open = useMenuContext_unstable(context => context.open);\n const triggerId = useMenuContext_unstable(context => context.triggerId);\n const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n const openOnContext = useMenuContext_unstable(context => context.openOnContext);\n\n const isSubmenu = useIsSubmenu();\n\n const { findFirstFocusable } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, menuPopoverRef]);\n\n const openedWithKeyboardRef = React.useRef(false);\n const hasMouseMoved = React.useRef(false);\n\n const { dir } = useFluent();\n const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n const child = React.isValidElement(children) ? getTriggerChild<Partial<MenuTriggerChildProps>>(children) : undefined;\n\n const onContextMenu = (e: React.MouseEvent<HTMLElement>) => {\n if (isTargetDisabled(e)) {\n return;\n }\n\n if (openOnContext) {\n e.preventDefault();\n setOpen(e, { open: true, keyboard: false });\n }\n };\n\n const onClick = (e: React.MouseEvent<HTMLElement>) => {\n if (isTargetDisabled(e)) {\n return;\n }\n\n if (!openOnContext) {\n setOpen(e, { open: !open, keyboard: openedWithKeyboardRef.current });\n openedWithKeyboardRef.current = false;\n }\n };\n\n const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (isTargetDisabled(e)) {\n return;\n }\n\n if (shouldPreventDefaultOnKeyDown(e)) {\n e.preventDefault();\n openedWithKeyboardRef.current = true;\n (e.target as HTMLElement)?.click();\n }\n\n const key = e.key;\n\n if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\n setOpen(e, { open: true, keyboard: true });\n }\n\n if (key === Escape && !isSubmenu) {\n setOpen(e, { open: false, keyboard: true });\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 = (e: React.MouseEvent<HTMLElement>) => {\n if (isTargetDisabled(e)) {\n return;\n }\n if (openOnHover && hasMouseMoved.current) {\n setOpen(e, { open: true, keyboard: false });\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 = (e: React.MouseEvent<HTMLElement>) => {\n if (isTargetDisabled(e)) {\n return;\n }\n if (openOnHover && !hasMouseMoved.current) {\n setOpen(e, { open: true, keyboard: false });\n hasMouseMoved.current = true;\n }\n };\n\n const onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n if (isTargetDisabled(e)) {\n return;\n }\n if (openOnHover) {\n setOpen(e, { open: false, keyboard: false });\n }\n };\n\n return {\n isSubmenu,\n children: applyTriggerPropsToChildren<MenuTriggerChildProps>(children, {\n 'aria-haspopup': 'menu',\n 'aria-expanded': !open && !isSubmenu ? undefined : open,\n id: triggerId,\n ...child?.props,\n ref: useMergedRefs(triggerRef, child?.ref),\n onClick: useMergedEventCallbacks(child?.props?.onClick, onClick),\n onMouseEnter: useMergedEventCallbacks(child?.props?.onMouseEnter, onMouseEnter),\n onMouseLeave: useMergedEventCallbacks(child?.props?.onMouseLeave, onMouseLeave),\n onKeyDown: useMergedEventCallbacks(child?.props?.onKeyDown, onKeyDown),\n onContextMenu: useMergedEventCallbacks(child?.props?.onContextMenu, onContextMenu),\n onMouseMove: useMergedEventCallbacks(child?.props?.onMouseMove, onMouseMove),\n }),\n };\n};\n\nconst isTargetDisabled = (e: React.SyntheticEvent | Event) => {\n const isDisabled = (el: HTMLElement) =>\n el.hasAttribute('disabled') || (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true');\n if (e.target instanceof HTMLElement && isDisabled(e.target)) {\n return true;\n }\n\n return e.currentTarget instanceof HTMLElement && isDisabled(e.currentTarget);\n};\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["components/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { MenuTriggerChildProps, MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n 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 } = props;\n\n const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n const menuPopoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n const open = useMenuContext_unstable(context => context.open);\n const triggerId = useMenuContext_unstable(context => context.triggerId);\n const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n const openOnContext = useMenuContext_unstable(context => context.openOnContext);\n\n const isSubmenu = useIsSubmenu();\n\n const { findFirstFocusable } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, menuPopoverRef]);\n\n const openedWithKeyboardRef = React.useRef(false);\n const hasMouseMoved = React.useRef(false);\n\n const { dir } = useFluent();\n const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n const child = React.isValidElement(children) ? getTriggerChild<Partial<MenuTriggerChildProps>>(children) : undefined;\n\n const onContextMenu = (e: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(e)) {\n return;\n }\n\n if (openOnContext) {\n e.preventDefault();\n setOpen(e, { open: true, keyboard: false });\n }\n };\n\n const onClick = (e: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(e)) {\n return;\n }\n\n if (!openOnContext) {\n setOpen(e, { open: !open, keyboard: openedWithKeyboardRef.current });\n openedWithKeyboardRef.current = false;\n }\n };\n\n const onKeyDown = (e: React.KeyboardEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(e)) {\n return;\n }\n\n const key = e.key;\n\n if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\n setOpen(e, { open: true, keyboard: true });\n }\n\n if (key === Escape && !isSubmenu) {\n setOpen(e, { open: false, keyboard: true });\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 = (e: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(e)) {\n return;\n }\n if (openOnHover && hasMouseMoved.current) {\n setOpen(e, { open: true, keyboard: false });\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 = (e: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(e)) {\n return;\n }\n if (openOnHover && !hasMouseMoved.current) {\n setOpen(e, { open: true, keyboard: false });\n hasMouseMoved.current = true;\n }\n };\n\n const onMouseLeave = (e: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(e)) {\n return;\n }\n if (openOnHover) {\n setOpen(e, { open: false, keyboard: false });\n }\n };\n\n const triggerProps = {\n 'aria-haspopup': 'menu',\n 'aria-expanded': !open && !isSubmenu ? undefined : open,\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 } as const;\n\n const ariaButtonTriggerProps = useARIAButtonProps(\n child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n {\n ...triggerProps,\n onClick: useEventCallback(mergeCallbacks(child?.props?.onClick, onClick)),\n onKeyDown: useEventCallback(mergeCallbacks(child?.props?.onKeyDown, onKeyDown)),\n },\n );\n\n return {\n isSubmenu,\n children: applyTriggerPropsToChildren<MenuTriggerChildProps>(\n children,\n openOnContext ? triggerProps : ariaButtonTriggerProps,\n ),\n };\n};\n\nconst isTargetDisabled = (e: React.SyntheticEvent | Event) => {\n const isDisabled = (el: HTMLElement) =>\n el.hasAttribute('disabled') || (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true');\n if (e.target instanceof HTMLElement && isDisabled(e.target)) {\n return true;\n }\n\n return e.currentTarget instanceof HTMLElement && isDisabled(e.currentTarget);\n};\n"],"sourceRoot":"../src/"}
|
@@ -1,6 +1,6 @@
|
|
1
|
-
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
|
2
|
-
|
3
|
-
|
1
|
+
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
|
2
|
+
export const MenuContext = /*#__PURE__*/createContext(undefined);
|
3
|
+
const menuContextDefaultValue = {
|
4
4
|
open: false,
|
5
5
|
setOpen: () => false,
|
6
6
|
checkedValues: {},
|
@@ -17,8 +17,10 @@ export const MenuContext = /*#__PURE__*/createContext({
|
|
17
17
|
openOnContext: false,
|
18
18
|
openOnHover: false,
|
19
19
|
hasIcons: false,
|
20
|
-
hasCheckmarks: false
|
21
|
-
|
20
|
+
hasCheckmarks: false,
|
21
|
+
inline: false,
|
22
|
+
persistOnItemClick: false
|
23
|
+
};
|
22
24
|
export const MenuProvider = MenuContext.Provider;
|
23
|
-
export const useMenuContext_unstable = selector => useContextSelector(MenuContext, selector);
|
25
|
+
export const useMenuContext_unstable = selector => useContextSelector(MenuContext, (ctx = menuContextDefaultValue) => selector(ctx));
|
24
26
|
//# sourceMappingURL=menuContext.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["contexts/menuContext.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD,
|
1
|
+
{"version":3,"sources":["contexts/menuContext.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAIA,OAAO,MAAM,WAAW,gBAA8B,aAAa,CACjE,SADiE,CAA5D;AAIP,MAAM,uBAAuB,GAAqB;EAChD,IAAI,EAAE,KAD0C;EAEhD,OAAO,EAAE,MAAM,KAFiC;EAGhD,aAAa,EAAE,EAHiC;EAIhD,oBAAoB,EAAE,MAAM,IAJoB;EAKhD,oBAAoB,EAAE,EAL0B;EAMhD,SAAS,EAAE,KANqC;EAOhD,UAAU,EAAG;IAAE,OAAO,EAAE;EAAX,CAPmC;EAQhD,cAAc,EAAG;IAAE,OAAO,EAAE;EAAX,CAR+B;EAShD,SAAS,EAAE,EATqC;EAUhD,aAAa,EAAE,KAViC;EAWhD,WAAW,EAAE,KAXmC;EAYhD,QAAQ,EAAE,KAZsC;EAahD,aAAa,EAAE,KAbiC;EAchD,MAAM,EAAE,KAdwC;EAehD,kBAAkB,EAAE;AAf4B,CAAlD;AA4CA,OAAO,MAAM,YAAY,GAAG,WAAW,CAAC,QAAjC;AAEP,OAAO,MAAM,uBAAuB,GAAO,QAAJ,IACrC,kBAAkB,CAAC,WAAD,EAAc,CAAC,GAAG,GAAG,uBAAP,KAAmC,QAAQ,CAAC,GAAD,CAAzD,CADb","sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue | undefined>(\n undefined,\n) as Context<MenuContextValue>;\n\nconst menuContextDefaultValue: MenuContextValue = {\n open: false,\n setOpen: () => false,\n checkedValues: {},\n onCheckedValueChange: () => null,\n defaultCheckedValues: {},\n isSubmenu: false,\n triggerRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n menuPopoverRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n triggerId: '',\n openOnContext: false,\n openOnHover: false,\n hasIcons: false,\n hasCheckmarks: false,\n inline: false,\n persistOnItemClick: false,\n};\n\n/**\n * Context shared between Menu and its children components\n *\n * Extends and drills down MenuList props to simplify API\n */\nexport type MenuContextValue = Pick<\n MenuState,\n | 'openOnHover'\n | 'openOnContext'\n | 'triggerRef'\n | 'menuPopoverRef'\n | 'setOpen'\n | 'isSubmenu'\n | 'triggerId'\n | 'hasIcons'\n | 'hasCheckmarks'\n | 'persistOnItemClick'\n | 'inline'\n | 'checkedValues'\n | 'onCheckedValueChange'\n | 'defaultCheckedValues'\n> & {\n open: boolean;\n triggerId: string;\n};\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext_unstable = <T>(selector: ContextSelector<MenuContextValue, T>) =>\n useContextSelector(MenuContext, (ctx = menuContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
|
@@ -1,8 +1,12 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
|
3
|
-
const
|
1
|
+
import * as React from 'react';
|
2
|
+
const MenuGroupContext = /*#__PURE__*/React.createContext(undefined);
|
3
|
+
const menuGroupContextDefaultValue = {
|
4
4
|
headerId: ''
|
5
|
-
}
|
5
|
+
};
|
6
6
|
export const MenuGroupContextProvider = MenuGroupContext.Provider;
|
7
|
-
export const useMenuGroupContext_unstable = () =>
|
7
|
+
export const useMenuGroupContext_unstable = () => {
|
8
|
+
var _a;
|
9
|
+
|
10
|
+
return (_a = React.useContext(MenuGroupContext)) !== null && _a !== void 0 ? _a : menuGroupContextDefaultValue;
|
11
|
+
};
|
8
12
|
//# sourceMappingURL=menuGroupContext.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["contexts/menuGroupContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB,
|
1
|
+
{"version":3,"sources":["contexts/menuGroupContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,MAAM,gBAAgB,gBAAG,KAAK,CAAC,aAAN,CACvB,SADuB,CAAzB;AAIA,MAAM,4BAA4B,GAA0B;EAC1D,QAAQ,EAAE;AADgD,CAA5D;AAeA,OAAO,MAAM,wBAAwB,GAAG,gBAAgB,CAAC,QAAlD;AACP,OAAO,MAAM,4BAA4B,GAAG,MAAK;EAAA,IAAA,EAAA;;EAAC,OAAA,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,CAAiB,gBAAjB,CAAA,MAAkC,IAAlC,IAAkC,EAAA,KAAA,KAAA,CAAlC,GAAkC,EAAlC,GAAsC,4BAAtC;AAAkE,CAA7G","sourcesContent":["import * as React from 'react';\n\nconst MenuGroupContext = React.createContext<MenuGroupContextValue | undefined>(\n undefined,\n) as React.Context<MenuGroupContextValue>;\n\nconst menuGroupContextDefaultValue: MenuGroupContextValue = {\n headerId: '',\n};\n\n/**\n * Context used to guarantee correct aria-relationship between header\n * and group information\n */\nexport type MenuGroupContextValue = {\n /**\n * Element id applied to the `MenuGroupHeader` component\n */\n headerId: string;\n};\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\nexport const useMenuGroupContext_unstable = () => React.useContext(MenuGroupContext) ?? menuGroupContextDefaultValue;\n"],"sourceRoot":"../src/"}
|
@@ -1,6 +1,6 @@
|
|
1
|
-
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
|
2
|
-
|
3
|
-
|
1
|
+
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
|
2
|
+
export const MenuListContext = /*#__PURE__*/createContext(undefined);
|
3
|
+
const menuListContextDefaultValue = {
|
4
4
|
checkedValues: {},
|
5
5
|
onCheckedValueChange: () => null,
|
6
6
|
setFocusByFirstCharacter: () => null,
|
@@ -8,7 +8,7 @@ export const MenuListContext = /*#__PURE__*/createContext({
|
|
8
8
|
selectRadio: () => null,
|
9
9
|
hasIcons: false,
|
10
10
|
hasCheckmarks: false
|
11
|
-
}
|
11
|
+
};
|
12
12
|
export const MenuListProvider = MenuListContext.Provider;
|
13
|
-
export const useMenuListContext_unstable = selector => useContextSelector(MenuListContext, selector);
|
13
|
+
export const useMenuListContext_unstable = selector => useContextSelector(MenuListContext, (ctx = menuListContextDefaultValue) => selector(ctx));
|
14
14
|
//# sourceMappingURL=menuListContext.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["contexts/menuListContext.tsx"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD,
|
1
|
+
{"version":3,"sources":["contexts/menuListContext.tsx"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAKA,OAAO,MAAM,eAAe,gBAAkC,aAAa,CACzE,SADyE,CAApE;AAIP,MAAM,2BAA2B,GAAyB;EACxD,aAAa,EAAE,EADyC;EAExD,oBAAoB,EAAE,MAAM,IAF4B;EAGxD,wBAAwB,EAAE,MAAM,IAHwB;EAIxD,cAAc,EAAE,MAAM,IAJkC;EAKxD,WAAW,EAAE,MAAM,IALqC;EAMxD,QAAQ,EAAE,KAN8C;EAOxD,aAAa,EAAE;AAPyC,CAA1D;AAsBA,OAAO,MAAM,gBAAgB,GAAG,eAAe,CAAC,QAAzC;AAEP,OAAO,MAAM,2BAA2B,GAAQ,QAAL,IACzC,kBAAkB,CAAC,eAAD,EAAkB,CAAC,GAAG,GAAG,2BAAP,KAAuC,QAAQ,CAAC,GAAD,CAAjE,CADb","sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SelectableHandler } from '../selectable/index';\nimport type { MenuListProps } from '../components/index';\n\nexport const MenuListContext: Context<MenuListContextValue> = createContext<MenuListContextValue | undefined>(\n undefined,\n) as Context<MenuListContextValue>;\n\nconst menuListContextDefaultValue: MenuListContextValue = {\n checkedValues: {},\n onCheckedValueChange: () => null,\n setFocusByFirstCharacter: () => null,\n toggleCheckbox: () => null,\n selectRadio: () => null,\n hasIcons: false,\n hasCheckmarks: false,\n};\n\n/**\n * Context shared between MenuList and its children components\n */\nexport type MenuListContextValue = Pick<\n MenuListProps,\n 'checkedValues' | 'onCheckedValueChange' | 'hasIcons' | 'hasCheckmarks'\n> & {\n setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n toggleCheckbox?: SelectableHandler;\n selectRadio?: SelectableHandler;\n};\n\nexport const MenuListProvider = MenuListContext.Provider;\n\nexport const useMenuListContext_unstable = <T,>(selector: ContextSelector<MenuListContextValue, T>) =>\n useContextSelector(MenuListContext, (ctx = menuListContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
|
@@ -2,9 +2,13 @@ import * as React from 'react';
|
|
2
2
|
/**
|
3
3
|
* Context used communicate with a child menu item that it is a trigger for a submenu
|
4
4
|
*/
|
5
|
-
// eslint-disable-next-line @fluentui/no-context-default-value
|
6
5
|
|
7
|
-
const MenuTriggerContext = /*#__PURE__*/React.createContext(
|
6
|
+
const MenuTriggerContext = /*#__PURE__*/React.createContext(undefined);
|
7
|
+
const menuTriggerContextDefaultValue = false;
|
8
8
|
export const MenuTriggerContextProvider = MenuTriggerContext.Provider;
|
9
|
-
export const useMenuTriggerContext_unstable = () =>
|
9
|
+
export const useMenuTriggerContext_unstable = () => {
|
10
|
+
var _a;
|
11
|
+
|
12
|
+
return (_a = React.useContext(MenuTriggerContext)) !== null && _a !== void 0 ? _a : menuTriggerContextDefaultValue;
|
13
|
+
};
|
10
14
|
//# sourceMappingURL=menuTriggerContext.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["contexts/menuTriggerContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA;;AAEG
|
1
|
+
{"version":3,"sources":["contexts/menuTriggerContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA;;AAEG;;AACH,MAAM,kBAAkB,gBAAG,KAAK,CAAC,aAAN,CAAyC,SAAzC,CAA3B;AAEA,MAAM,8BAA8B,GAAG,KAAvC;AAEA,OAAO,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,QAAtD;AACP,OAAO,MAAM,8BAA8B,GAAG,MAAK;EAAA,IAAA,EAAA;;EACjD,OAAA,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,CAAiB,kBAAjB,CAAA,MAAoC,IAApC,IAAoC,EAAA,KAAA,KAAA,CAApC,GAAoC,EAApC,GAAwC,8BAAxC;AAAsE,CADjE","sourcesContent":["import * as React from 'react';\n\n/**\n * Context used communicate with a child menu item that it is a trigger for a submenu\n */\nconst MenuTriggerContext = React.createContext<boolean | undefined>(undefined) as React.Context<boolean>;\n\nconst menuTriggerContextDefaultValue = false;\n\nexport const MenuTriggerContextProvider = MenuTriggerContext.Provider;\nexport const useMenuTriggerContext_unstable = () =>\n React.useContext(MenuTriggerContext) ?? menuTriggerContextDefaultValue;\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["selectable/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\nexport type SelectableHandler = (\n e: React.MouseEvent | React.KeyboardEvent,\n name: string,\n value: string,\n checked: boolean,\n) => void;\n\n/**\n * Props for selecatble menu items\n */\nexport type MenuItemSelectableProps = {\n /**\n * Follows input convention\n * https://www.w3schools.com/jsref/prop_checkbox_name.asp\n */\n name: string;\n\n /**\n * Follows input convention\n * https://www.w3schools.com/jsref/prop_checkbox_value.asp\n */\n value: string;\n};\n\n/**\n * State for selectable menu items\n */\nexport type MenuItemSelectableState = MenuItemSelectableProps & {\n /**\n *
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["selectable/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\nexport type SelectableHandler = (\n e: React.MouseEvent | React.KeyboardEvent,\n name: string,\n value: string,\n checked: boolean,\n) => void;\n\n/**\n * Props for selecatble menu items\n */\nexport type MenuItemSelectableProps = {\n /**\n * Follows input convention\n * https://www.w3schools.com/jsref/prop_checkbox_name.asp\n */\n name: string;\n\n /**\n * Follows input convention\n * https://www.w3schools.com/jsref/prop_checkbox_value.asp\n */\n value: string;\n};\n\n/**\n * State for selectable menu items\n */\nexport type MenuItemSelectableState = MenuItemSelectableProps & {\n /**\n * Selectable is checked\n */\n checked: boolean;\n};\n"]}
|
@@ -22,6 +22,8 @@ const menuContext_1 = /*#__PURE__*/require("../../contexts/menuContext");
|
|
22
22
|
const index_1 = /*#__PURE__*/require("../../utils/index");
|
23
23
|
|
24
24
|
const useIsSubmenu_1 = /*#__PURE__*/require("../../utils/useIsSubmenu");
|
25
|
+
|
26
|
+
const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
|
25
27
|
/**
|
26
28
|
* Create the state required to render Menu.
|
27
29
|
*
|
@@ -33,8 +35,16 @@ const useIsSubmenu_1 = /*#__PURE__*/require("../../utils/useIsSubmenu");
|
|
33
35
|
|
34
36
|
|
35
37
|
const useMenu_unstable = props => {
|
36
|
-
|
37
|
-
|
38
|
+
const {
|
39
|
+
hoverDelay = 500,
|
40
|
+
inline = false,
|
41
|
+
hasCheckmarks = false,
|
42
|
+
hasIcons = false,
|
43
|
+
closeOnScroll = false,
|
44
|
+
openOnContext = false,
|
45
|
+
persistOnItemClick = false,
|
46
|
+
defaultCheckedValues
|
47
|
+
} = props;
|
38
48
|
const triggerId = react_utilities_1.useId('menu');
|
39
49
|
const isSubmenu = useIsSubmenu_1.useIsSubmenu();
|
40
50
|
const [contextTarget, setContextTarget] = react_positioning_1.usePositioningMouseTarget();
|
@@ -71,30 +81,48 @@ const useMenu_unstable = props => {
|
|
71
81
|
const {
|
72
82
|
targetRef: triggerRef,
|
73
83
|
containerRef: menuPopoverRef
|
74
|
-
} = react_positioning_1.usePositioning(positioningState);
|
75
|
-
|
76
|
-
|
84
|
+
} = react_positioning_1.usePositioning(positioningState); // TODO Better way to narrow types ?
|
85
|
+
|
86
|
+
const [open, setOpen] = useMenuOpenState({
|
87
|
+
hoverDelay,
|
88
|
+
isSubmenu,
|
89
|
+
setContextTarget,
|
90
|
+
closeOnScroll,
|
91
|
+
menuPopoverRef,
|
92
|
+
triggerRef,
|
93
|
+
open: props.open,
|
94
|
+
defaultOpen: props.defaultOpen,
|
95
|
+
onOpenChange: props.onOpenChange,
|
96
|
+
openOnContext
|
97
|
+
});
|
98
|
+
const [checkedValues, onCheckedValueChange] = useMenuSelectableState({
|
99
|
+
checkedValues: props.checkedValues,
|
100
|
+
defaultCheckedValues,
|
101
|
+
onCheckedValueChange: props.onCheckedValueChange
|
102
|
+
});
|
103
|
+
return {
|
104
|
+
inline,
|
105
|
+
hoverDelay,
|
77
106
|
triggerId,
|
78
|
-
isSubmenu
|
79
|
-
openOnHover:
|
107
|
+
isSubmenu,
|
108
|
+
openOnHover: isSubmenu,
|
80
109
|
contextTarget,
|
81
110
|
setContextTarget,
|
82
|
-
|
83
|
-
|
111
|
+
hasCheckmarks,
|
112
|
+
hasIcons,
|
113
|
+
closeOnScroll,
|
84
114
|
menuTrigger,
|
85
115
|
menuPopover,
|
86
116
|
triggerRef,
|
87
117
|
menuPopoverRef,
|
88
|
-
components: {}
|
89
|
-
|
90
|
-
|
91
|
-
const [open, setOpen] = useMenuOpenState(initialState);
|
92
|
-
const [checkedValues, onCheckedValueChange] = useMenuSelectableState(initialState);
|
93
|
-
return { ...initialState,
|
118
|
+
components: {},
|
119
|
+
openOnContext,
|
94
120
|
open,
|
95
121
|
setOpen,
|
96
122
|
checkedValues,
|
97
|
-
|
123
|
+
defaultCheckedValues,
|
124
|
+
onCheckedValueChange,
|
125
|
+
persistOnItemClick
|
98
126
|
};
|
99
127
|
};
|
100
128
|
|
@@ -145,7 +173,6 @@ const useMenuOpenState = state => {
|
|
145
173
|
|
146
174
|
return (_a = state.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(state, e, data);
|
147
175
|
});
|
148
|
-
const shouldHandleKeyboardRef = React.useRef(false);
|
149
176
|
const shouldHandleTabRef = React.useRef(false);
|
150
177
|
const pressedShiftRef = React.useRef(false);
|
151
178
|
const setOpenTimeout = React.useRef(0);
|
@@ -168,9 +195,8 @@ const useMenuOpenState = state => {
|
|
168
195
|
state.setContextTarget(undefined);
|
169
196
|
}
|
170
197
|
|
171
|
-
if (
|
172
|
-
|
173
|
-
shouldHandleTabRef.current = e.key === 'Tab';
|
198
|
+
if (e.type === 'keydown' && e.key === keyboard_keys_1.Tab) {
|
199
|
+
shouldHandleTabRef.current = true;
|
174
200
|
pressedShiftRef.current = e.shiftKey;
|
175
201
|
}
|
176
202
|
|
@@ -275,7 +301,7 @@ const useMenuOpenState = state => {
|
|
275
301
|
focusFirst();
|
276
302
|
}
|
277
303
|
|
278
|
-
if (
|
304
|
+
if (!open) {
|
279
305
|
if (shouldHandleTabRef.current && !state.isSubmenu) {
|
280
306
|
pressedShiftRef.current ? focusBeforeMenuTrigger() : focusAfterMenuTrigger();
|
281
307
|
} else {
|
@@ -283,7 +309,6 @@ const useMenuOpenState = state => {
|
|
283
309
|
}
|
284
310
|
}
|
285
311
|
|
286
|
-
shouldHandleKeyboardRef.current = false;
|
287
312
|
shouldHandleTabRef.current = false;
|
288
313
|
pressedShiftRef.current = false;
|
289
314
|
}, [state.triggerRef, state.isSubmenu, open, focusFirst, focusAfterMenuTrigger, focusBeforeMenuTrigger]);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Menu/useMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { usePositioningMouseTarget, usePositioning, resolvePositioningShorthand } from '@fluentui/react-positioning';\nimport {\n useControllableState,\n useId,\n useOnClickOutside,\n useEventCallback,\n useOnScrollOutside,\n} 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';\nimport type { MenuOpenChangeData, MenuOpenEvents, MenuProps, MenuState } from './Menu.types';\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n const triggerId = useId('menu');\n const isSubmenu = useIsSubmenu();\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n const positioningState = {\n position: isSubmenu ? ('after' as const) : ('below' as const),\n align: isSubmenu ? ('top' as const) : ('start' as const),\n target: props.openOnContext ? contextTarget : undefined,\n ...resolvePositioningShorthand(props.positioning),\n };\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at most two children');\n }\n }\n\n let menuTrigger: React.ReactElement | undefined = undefined;\n let menuPopover: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n menuTrigger = children[0];\n menuPopover = children[1];\n } else if (children.length === 1) {\n menuPopover = children[0];\n }\n const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n const initialState = {\n hoverDelay: 500,\n triggerId,\n isSubmenu: !!isSubmenu,\n openOnHover: !!isSubmenu,\n contextTarget,\n setContextTarget,\n ...props,\n closeOnScroll: props.closeOnScroll ?? false,\n menuTrigger,\n menuPopover,\n triggerRef,\n menuPopoverRef,\n components: {},\n } as const;\n\n // TODO Better way to narrow types ?\n\n const [open, setOpen] = useMenuOpenState(initialState);\n const [checkedValues, onCheckedValueChange] = useMenuSelectableState(initialState);\n\n return {\n ...initialState,\n open,\n setOpen,\n checkedValues,\n onCheckedValueChange,\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n state: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: state.checkedValues,\n defaultState: state.defaultCheckedValues,\n initialState: {},\n });\n const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n if (onCheckedValueChangeOriginal) {\n onCheckedValueChangeOriginal(e, { name, checkedItems });\n }\n\n setCheckedValues(s => {\n return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n });\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n state: Pick<\n MenuState,\n | 'isSubmenu'\n | 'menuPopoverRef'\n | 'onOpenChange'\n | 'setContextTarget'\n | 'triggerRef'\n | 'openOnContext'\n | 'closeOnScroll'\n > &\n Pick<MenuProps, 'open' | 'defaultOpen'>,\n) => {\n const { targetDocument } = useFluent();\n const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n const onOpenChange: MenuState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const shouldHandleKeyboardRef = React.useRef(false);\n const shouldHandleTabRef = React.useRef(false);\n const pressedShiftRef = React.useRef(false);\n const setOpenTimeout = React.useRef(0);\n const enteringTriggerRef = React.useRef(false);\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n\n const trySetOpen = useEventCallback((e: MenuOpenEvents, data: MenuOpenChangeData) => {\n const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n onOpenChange?.(event, { ...data });\n if (data.open && e.type === 'contextmenu') {\n state.setContextTarget(e as React.MouseEvent);\n }\n\n if (!data.open) {\n state.setContextTarget(undefined);\n }\n\n if (data.keyboard) {\n shouldHandleKeyboardRef.current = true;\n shouldHandleTabRef.current = (e as React.KeyboardEvent).key === 'Tab';\n pressedShiftRef.current = (e as React.KeyboardEvent).shiftKey;\n }\n\n if (data.bubble) {\n parentSetOpen(e, { ...data });\n }\n\n setOpenState(data.open);\n });\n\n const setOpen = useEventCallback((e: MenuOpenEvents, data: MenuOpenChangeData) => {\n clearTimeout(setOpenTimeout.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n }\n\n // 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\n useOnClickOutside({\n contains: elementContains,\n disabled: !open,\n element: targetDocument,\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n callback: e => setOpen(e, { open: false }),\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: ev => setOpen(ev, { open: false }),\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n disabled: !open || !closeOnScroll,\n });\n\n useOnMenuMouseEnter({\n element: targetDocument,\n callback: e => {\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(e, { open: false });\n }\n },\n disabled: !open,\n refs: [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\n // Manage focus for open state\n const { findFirstFocusable, findNextFocusable, findPrevFocusable } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, state.menuPopoverRef]);\n\n const focusAfterMenuTrigger = React.useCallback(() => {\n const nextFocusable = findNextFocusable(state.triggerRef.current);\n nextFocusable?.focus();\n }, [findNextFocusable, state.triggerRef]);\n\n const focusBeforeMenuTrigger = React.useCallback(() => {\n const prevFocusable = findPrevFocusable(state.triggerRef.current);\n prevFocusable?.focus();\n }, [findPrevFocusable, state.triggerRef]);\n\n React.useEffect(() => {\n if (open) {\n focusFirst();\n }\n }, [open, focusFirst]);\n\n React.useEffect(() => {\n if (open) {\n focusFirst();\n }\n\n if (shouldHandleKeyboardRef.current && !open) {\n if (shouldHandleTabRef.current && !state.isSubmenu) {\n pressedShiftRef.current ? focusBeforeMenuTrigger() : focusAfterMenuTrigger();\n } else {\n state.triggerRef.current?.focus();\n }\n }\n\n shouldHandleKeyboardRef.current = false;\n shouldHandleTabRef.current = false;\n pressedShiftRef.current = false;\n }, [state.triggerRef, state.isSubmenu, open, focusFirst, focusAfterMenuTrigger, focusBeforeMenuTrigger]);\n\n return [open ?? false, setOpen] as const;\n};\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["components/Menu/useMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { usePositioningMouseTarget, usePositioning, resolvePositioningShorthand } from '@fluentui/react-positioning';\nimport {\n useControllableState,\n useId,\n useOnClickOutside,\n useEventCallback,\n useOnScrollOutside,\n} 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';\nimport type { MenuOpenChangeData, MenuOpenEvents, MenuProps, MenuState } from './Menu.types';\nimport { Tab } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n const {\n hoverDelay = 500,\n inline = false,\n hasCheckmarks = false,\n hasIcons = false,\n closeOnScroll = false,\n openOnContext = false,\n persistOnItemClick = false,\n defaultCheckedValues,\n } = props;\n const triggerId = useId('menu');\n const isSubmenu = useIsSubmenu();\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n const positioningState = {\n position: isSubmenu ? ('after' as const) : ('below' as const),\n align: isSubmenu ? ('top' as const) : ('start' as const),\n target: props.openOnContext ? contextTarget : undefined,\n ...resolvePositioningShorthand(props.positioning),\n };\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at most two children');\n }\n }\n\n let menuTrigger: React.ReactElement | undefined = undefined;\n let menuPopover: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n menuTrigger = children[0];\n menuPopover = children[1];\n } else if (children.length === 1) {\n menuPopover = children[0];\n }\n const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n // TODO Better way to narrow types ?\n\n const [open, setOpen] = useMenuOpenState({\n hoverDelay,\n isSubmenu,\n setContextTarget,\n closeOnScroll,\n menuPopoverRef,\n triggerRef,\n open: props.open,\n defaultOpen: props.defaultOpen,\n onOpenChange: props.onOpenChange,\n openOnContext,\n });\n\n const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n return {\n inline,\n hoverDelay,\n triggerId,\n isSubmenu,\n openOnHover: isSubmenu,\n contextTarget,\n setContextTarget,\n hasCheckmarks,\n hasIcons,\n closeOnScroll,\n menuTrigger,\n menuPopover,\n triggerRef,\n menuPopoverRef,\n components: {},\n openOnContext,\n open,\n setOpen,\n checkedValues,\n defaultCheckedValues,\n onCheckedValueChange,\n persistOnItemClick,\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n state: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: state.checkedValues,\n defaultState: state.defaultCheckedValues,\n initialState: {},\n });\n const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n if (onCheckedValueChangeOriginal) {\n onCheckedValueChangeOriginal(e, { name, checkedItems });\n }\n\n setCheckedValues(s => {\n return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n });\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n state: Pick<\n MenuState,\n | 'isSubmenu'\n | 'menuPopoverRef'\n | 'onOpenChange'\n | 'setContextTarget'\n | 'triggerRef'\n | 'openOnContext'\n | 'closeOnScroll'\n | 'hoverDelay'\n > &\n Pick<MenuProps, 'open' | 'defaultOpen'>,\n) => {\n const { targetDocument } = useFluent();\n const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n const onOpenChange: MenuState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const shouldHandleTabRef = React.useRef(false);\n const pressedShiftRef = React.useRef(false);\n const setOpenTimeout = React.useRef(0);\n const enteringTriggerRef = React.useRef(false);\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n\n const trySetOpen = useEventCallback((e: MenuOpenEvents, data: MenuOpenChangeData) => {\n const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n onOpenChange?.(event, { ...data });\n if (data.open && e.type === 'contextmenu') {\n state.setContextTarget(e as React.MouseEvent);\n }\n\n if (!data.open) {\n state.setContextTarget(undefined);\n }\n\n if (e.type === 'keydown' && (e as React.KeyboardEvent<HTMLElement>).key === Tab) {\n shouldHandleTabRef.current = true;\n pressedShiftRef.current = (e as React.KeyboardEvent<HTMLElement>).shiftKey;\n }\n\n if (data.bubble) {\n parentSetOpen(e, { ...data });\n }\n\n setOpenState(data.open);\n });\n\n const setOpen = useEventCallback((e: MenuOpenEvents, data: MenuOpenChangeData) => {\n clearTimeout(setOpenTimeout.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n }\n\n // 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\n useOnClickOutside({\n contains: elementContains,\n disabled: !open,\n element: targetDocument,\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n callback: e => setOpen(e, { open: false }),\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: ev => setOpen(ev, { open: false }),\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n disabled: !open || !closeOnScroll,\n });\n\n useOnMenuMouseEnter({\n element: targetDocument,\n callback: e => {\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(e, { open: false });\n }\n },\n disabled: !open,\n refs: [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\n // Manage focus for open state\n const { findFirstFocusable, findNextFocusable, findPrevFocusable } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, state.menuPopoverRef]);\n\n const focusAfterMenuTrigger = React.useCallback(() => {\n const nextFocusable = findNextFocusable(state.triggerRef.current);\n nextFocusable?.focus();\n }, [findNextFocusable, state.triggerRef]);\n\n const focusBeforeMenuTrigger = React.useCallback(() => {\n const prevFocusable = findPrevFocusable(state.triggerRef.current);\n prevFocusable?.focus();\n }, [findPrevFocusable, state.triggerRef]);\n\n React.useEffect(() => {\n if (open) {\n focusFirst();\n }\n }, [open, focusFirst]);\n\n React.useEffect(() => {\n if (open) {\n focusFirst();\n }\n\n if (!open) {\n if (shouldHandleTabRef.current && !state.isSubmenu) {\n pressedShiftRef.current ? focusBeforeMenuTrigger() : focusAfterMenuTrigger();\n } else {\n state.triggerRef.current?.focus();\n }\n }\n\n shouldHandleTabRef.current = false;\n pressedShiftRef.current = false;\n }, [state.triggerRef, state.isSubmenu, open, focusFirst, focusAfterMenuTrigger, focusBeforeMenuTrigger]);\n\n return [open ?? false, setOpen] as const;\n};\n"],"sourceRoot":"../src/"}
|
@@ -10,15 +10,13 @@ const menuListContext_1 = /*#__PURE__*/require("../../contexts/menuListContext")
|
|
10
10
|
const useCharacterSearch = (state, ref) => {
|
11
11
|
const setFocusByFirstCharacter = menuListContext_1.useMenuListContext_unstable(context => context.setFocusByFirstCharacter);
|
12
12
|
const {
|
13
|
-
onKeyDown:
|
13
|
+
onKeyDown: originalOnKeyDown
|
14
14
|
} = state.root;
|
15
15
|
|
16
16
|
state.root.onKeyDown = e => {
|
17
17
|
var _a;
|
18
18
|
|
19
|
-
|
20
|
-
onKeyDownBase(e);
|
21
|
-
}
|
19
|
+
originalOnKeyDown === null || originalOnKeyDown === void 0 ? void 0 : originalOnKeyDown(e);
|
22
20
|
|
23
21
|
if (((_a = e.key) === null || _a === void 0 ? void 0 : _a.length) > 1) {
|
24
22
|
return;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/MenuItem/useCharacterSearch.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;
|
1
|
+
{"version":3,"sources":["components/MenuItem/useCharacterSearch.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AAIO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAA4D;EAC5F,MAAM,wBAAwB,GAAG,iBAAA,CAAA,2BAAA,CAA4B,OAAO,IAAI,OAAO,CAAC,wBAA/C,CAAjC;EAEA,MAAM;IAAE,SAAS,EAAE;EAAb,IAAmC,KAAK,CAAC,IAA/C;;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAwB,CAAD,IAA0D;;;IAC/E,iBAAiB,KAAA,IAAjB,IAAA,iBAAiB,KAAA,KAAA,CAAjB,GAAiB,KAAA,CAAjB,GAAA,iBAAiB,CAAG,CAAH,CAAjB;;IAEA,IAAI,CAAA,CAAA,EAAA,GAAA,CAAC,CAAC,GAAF,MAAK,IAAL,IAAK,EAAA,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAK,EAAA,CAAE,MAAP,IAAgB,CAApB,EAAuB;MACrB;IACD;;IAED,IAAI,GAAG,CAAC,OAAR,EAAiB;MACf,wBAAwB,KAAA,IAAxB,IAAA,wBAAwB,KAAA,KAAA,CAAxB,GAAwB,KAAA,CAAxB,GAAA,wBAAwB,CAAG,CAAH,EAAM,GAAG,CAAC,OAAV,CAAxB;IACD;EACF,CAVD;;EAYA,OAAO,KAAP;AACD,CAlBM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport type { MenuItemState } from '../../components/index';\nimport type { ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\nexport const useCharacterSearch = (state: MenuItemState, ref: React.RefObject<HTMLElement>) => {\n const setFocusByFirstCharacter = useMenuListContext_unstable(context => context.setFocusByFirstCharacter);\n\n const { onKeyDown: originalOnKeyDown } = state.root;\n\n state.root.onKeyDown = (e: React.KeyboardEvent<ARIAButtonElementIntersection>) => {\n originalOnKeyDown?.(e);\n\n if (e.key?.length > 1) {\n return;\n }\n\n if (ref.current) {\n setFocusByFirstCharacter?.(e, ref.current);\n }\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|