@fluentui/react-menu 9.21.2 → 9.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -2
- package/dist/index.d.ts +22 -3
- package/lib/components/Menu/Menu.types.js.map +1 -1
- package/lib/components/Menu/MenuSurfaceMotion.js +40 -0
- package/lib/components/Menu/MenuSurfaceMotion.js.map +1 -0
- package/lib/components/Menu/renderMenu.js +15 -3
- package/lib/components/Menu/renderMenu.js.map +1 -1
- package/lib/components/Menu/useMenu.js +33 -5
- package/lib/components/Menu/useMenu.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopover.js +2 -1
- package/lib/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopoverStyles.styles.js +2 -25
- package/lib/components/MenuPopover/useMenuPopoverStyles.styles.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js +1 -3
- package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuTrigger/useMenuTrigger.js +7 -2
- package/lib/components/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib/contexts/menuListContext.js.map +1 -1
- package/lib-commonjs/components/Menu/Menu.types.js.map +1 -1
- package/lib-commonjs/components/Menu/MenuSurfaceMotion.js +42 -0
- package/lib-commonjs/components/Menu/MenuSurfaceMotion.js.map +1 -0
- package/lib-commonjs/components/Menu/renderMenu.js +15 -3
- package/lib-commonjs/components/Menu/renderMenu.js.map +1 -1
- package/lib-commonjs/components/Menu/useMenu.js +30 -4
- package/lib-commonjs/components/Menu/useMenu.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js +2 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.js +2 -50
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.js +1 -3
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js +7 -2
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib-commonjs/contexts/menuListContext.js.map +1 -1
- package/package.json +4 -2
|
@@ -19,7 +19,6 @@ _export(exports, {
|
|
|
19
19
|
});
|
|
20
20
|
const _react = require("@griffel/react");
|
|
21
21
|
const _reacttheme = require("@fluentui/react-theme");
|
|
22
|
-
const _reactpositioning = require("@fluentui/react-positioning");
|
|
23
22
|
const menuPopoverClassNames = {
|
|
24
23
|
root: 'fui-MenuPopover'
|
|
25
24
|
};
|
|
@@ -36,8 +35,7 @@ const useStyles = (0, _react.makeStyles)({
|
|
|
36
35
|
boxShadow: `${_reacttheme.tokens.shadow16}`,
|
|
37
36
|
padding: '4px',
|
|
38
37
|
border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
|
|
39
|
-
..._reacttheme.typographyStyles.body1
|
|
40
|
-
...(0, _reactpositioning.createSlideStyles)(10)
|
|
38
|
+
..._reacttheme.typographyStyles.body1
|
|
41
39
|
}
|
|
42
40
|
});
|
|
43
41
|
const useMenuPopoverStyles_unstable = (state)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuPopover/useMenuPopoverStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuPopover/useMenuPopoverStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {\n root: 'fui-MenuPopover',\n};\n\nconst useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n minWidth: '138px',\n maxWidth: '300px',\n overflowX: 'hidden',\n width: 'max-content',\n boxShadow: `${tokens.shadow16}`,\n padding: '4px',\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1,\n },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","typographyStyles","menuPopoverClassNames","root","useStyles","borderRadius","borderRadiusMedium","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxSizing","minWidth","maxWidth","overflowX","width","boxShadow","shadow16","padding","border","colorTransparentStroke","body1","useMenuPopoverStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaI,qBAAAA;;;iCAwBAoB;;;;uBA7B4B,iBAAiB;4BACjB,wBAAwB;AAI1D,8BAAgE;IACrEnB,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,cAAcL,kBAAAA,CAAOM,kBAAkB;QACvCC,iBAAiBP,kBAAAA,CAAOQ,uBAAuB;QAC/CC,OAAOT,kBAAAA,CAAOU,uBAAuB;QACrCC,WAAW;QACXC,UAAU;QACVC,UAAU;QACVC,WAAW;QACXC,OAAO;QACPC,WAAW,GAAGhB,kBAAAA,CAAOiB,QAAQ,EAAE;QAC/BC,SAAS;QACTC,QAAQ,CAAC,UAAU,EAAEnB,kBAAAA,CAAOoB,sBAAsB,EAAE;QACpD,GAAGnB,4BAAAA,CAAiBoB,KAAK;IAC3B;AACF;AAKO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASpB;IACfmB,MAAMpB,IAAI,CAACsB,SAAS,OAAG3B,mBAAAA,EAAaI,sBAAsBC,IAAI,EAAEqB,OAAOrB,IAAI,EAAEoB,MAAMpB,IAAI,CAACsB,SAAS;IACjG,OAAOF;AACT,EAAE"}
|
|
@@ -17,6 +17,7 @@ const _reacttabster = require("@fluentui/react-tabster");
|
|
|
17
17
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
18
18
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
19
19
|
const _menuContext = require("../../contexts/menuContext");
|
|
20
|
+
const _menuListContext = require("../../contexts/menuListContext");
|
|
20
21
|
const _utils = require("../../utils");
|
|
21
22
|
function noop() {
|
|
22
23
|
// does nothing
|
|
@@ -31,6 +32,10 @@ const useMenuTrigger_unstable = (props)=>{
|
|
|
31
32
|
const openOnHover = (0, _menuContext.useMenuContext_unstable)((context)=>context.openOnHover);
|
|
32
33
|
const openOnContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.openOnContext);
|
|
33
34
|
const isSubmenu = (0, _utils.useIsSubmenu)();
|
|
35
|
+
const shouldOpenOnArrowRight = (0, _menuListContext.useMenuListContext_unstable)((ctx)=>{
|
|
36
|
+
var _ctx_shouldOpenOnArrowRight;
|
|
37
|
+
return (_ctx_shouldOpenOnArrowRight = ctx.shouldOpenOnArrowRight) !== null && _ctx_shouldOpenOnArrowRight !== void 0 ? _ctx_shouldOpenOnArrowRight : true;
|
|
38
|
+
});
|
|
34
39
|
const { findFirstFocusable } = (0, _reacttabster.useFocusFinders)();
|
|
35
40
|
const focusFirst = _react.useCallback(()=>{
|
|
36
41
|
const firstFocusable = findFirstFocusable(menuPopoverRef.current);
|
|
@@ -87,7 +92,7 @@ const useMenuTrigger_unstable = (props)=>{
|
|
|
87
92
|
return;
|
|
88
93
|
}
|
|
89
94
|
const key = event.key;
|
|
90
|
-
if (!openOnContext && (isSubmenu && key === OpenArrowKey || !isSubmenu && key === _keyboardkeys.ArrowDown)) {
|
|
95
|
+
if (!openOnContext && (isSubmenu && shouldOpenOnArrowRight && key === OpenArrowKey || !isSubmenu && key === _keyboardkeys.ArrowDown)) {
|
|
91
96
|
setOpen(event, {
|
|
92
97
|
open: true,
|
|
93
98
|
keyboard: true,
|
|
@@ -104,7 +109,7 @@ const useMenuTrigger_unstable = (props)=>{
|
|
|
104
109
|
});
|
|
105
110
|
}
|
|
106
111
|
// if menu is already open, can't rely on effects to focus
|
|
107
|
-
if (open && key === OpenArrowKey && isSubmenu) {
|
|
112
|
+
if (open && key === OpenArrowKey && isSubmenu && shouldOpenOnArrowRight) {
|
|
108
113
|
focusFirst();
|
|
109
114
|
}
|
|
110
115
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuTrigger/useMenuTrigger.ts"],"sourcesContent":["'use client';\n\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n getReactElementRef,\n isHTMLElement,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useIsSubmenu, useOnMenuSafeZoneTimeout } from '../../utils';\n\nfunction noop() {\n // does nothing\n}\n\n/**\n * Create the state required to render MenuTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup menu\n *\n * @param props - props from this instance of MenuTrigger\n */\nexport const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerState => {\n const { children, disableButtonEnhancement = false } = props;\n\n const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n const menuPopoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n const open = useMenuContext_unstable(context => context.open);\n const triggerId = useMenuContext_unstable(context => context.triggerId);\n const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n const openOnContext = useMenuContext_unstable(context => context.openOnContext);\n\n const isSubmenu = useIsSubmenu();\n\n const { findFirstFocusable } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, menuPopoverRef]);\n\n const openedWithKeyboardRef = React.useRef(false);\n const openedViaSafeZoneRef = React.useRef(false);\n const hasMouseMovedRef = React.useRef(false);\n\n const { dir } = useFluent();\n const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n const child = getTriggerChild(children);\n\n // Heads up!\n //\n // Handles an edge case where mouse movement over the menu trigger didn't happen as safe zone blocked pointer events,\n // but the cursor is already over the menu trigger.\n const safeZoneHandlerRef = useOnMenuSafeZoneTimeout(\n useEventCallback(() => {\n if (isSubmenu) {\n openedViaSafeZoneRef.current = true;\n }\n }),\n );\n\n const onContextMenu = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event) || event.isDefaultPrevented()) {\n return;\n }\n\n if (openOnContext) {\n event.preventDefault();\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerContextMenu', event });\n }\n };\n\n const onClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n\n if (!openOnContext) {\n setOpen(event, { open: !open, keyboard: openedWithKeyboardRef.current, type: 'menuTriggerClick', event });\n openedWithKeyboardRef.current = false;\n }\n };\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event) || event.isDefaultPrevented()) {\n return;\n }\n\n const key = event.key;\n\n if (!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 onMouseOver = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n\n if (openOnHover) {\n if (hasMouseMovedRef.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseEnter', event });\n } else if (openedViaSafeZoneRef.current) {\n setOpen(event, { open: true, keyboard: false, ignoreHoverDelay: true, type: 'menuTriggerMouseEnter', event });\n openedViaSafeZoneRef.current = false;\n }\n }\n };\n\n // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience\n // First time open the mouse using mousemove and then continue with mouseenter\n // Only use once to determine that the user is using the mouse since it is an expensive event to handle\n const onMouseMove = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n if (openOnHover && !hasMouseMovedRef.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseMove', event });\n hasMouseMovedRef.current = true;\n }\n };\n\n const onMouseLeave = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n if (openOnHover) {\n setOpen(event, { open: false, keyboard: false, type: 'menuTriggerMouseLeave', event });\n }\n };\n\n const contextMenuProps = {\n id: triggerId,\n ...child?.props,\n ref: useMergedRefs(triggerRef, getReactElementRef(child), safeZoneHandlerRef),\n onMouseEnter: useEventCallback(child?.props.onMouseEnter ?? noop),\n onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n onMouseMove: useEventCallback(mergeCallbacks(child?.props.onMouseMove, onMouseMove)),\n onMouseOver: useEventCallback(mergeCallbacks(child?.props.onMouseOver, onMouseOver)),\n };\n\n const triggerChildProps = {\n 'aria-haspopup': 'menu',\n 'aria-expanded': !open && !isSubmenu ? undefined : open,\n ...contextMenuProps,\n onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n } as const;\n\n const ariaButtonTriggerChildProps = useARIAButtonProps(\n child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n triggerChildProps,\n );\n\n return {\n isSubmenu,\n children: applyTriggerPropsToChildren(\n children,\n openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n ),\n };\n};\n\nconst isTargetDisabled = (event: React.SyntheticEvent | Event) => {\n const isDisabled = (el: HTMLElement) =>\n el.hasAttribute('disabled') || (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true');\n if (isHTMLElement(event.target) && isDisabled(event.target)) {\n return true;\n }\n\n return isHTMLElement(event.currentTarget) && isDisabled(event.currentTarget);\n};\n"],"names":["useARIAButtonProps","ArrowRight","ArrowLeft","Escape","ArrowDown","useFluent_unstable","useFluent","useFocusFinders","applyTriggerPropsToChildren","getTriggerChild","getReactElementRef","isHTMLElement","mergeCallbacks","useEventCallback","useMergedRefs","React","useMenuContext_unstable","useIsSubmenu","useOnMenuSafeZoneTimeout","noop","useMenuTrigger_unstable","props","children","disableButtonEnhancement","triggerRef","context","menuPopoverRef","setOpen","open","triggerId","openOnHover","openOnContext","isSubmenu","findFirstFocusable","focusFirst","useCallback","firstFocusable","current","focus","openedWithKeyboardRef","useRef","openedViaSafeZoneRef","hasMouseMovedRef","dir","OpenArrowKey","child","safeZoneHandlerRef","onContextMenu","event","isTargetDisabled","isDefaultPrevented","preventDefault","keyboard","type","onClick","onKeyDown","key","onMouseOver","ignoreHoverDelay","onMouseMove","onMouseLeave","contextMenuProps","id","ref","onMouseEnter","triggerChildProps","undefined","ariaButtonTriggerChildProps","isDisabled","el","hasAttribute","getAttribute","target","currentTarget"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuTrigger/useMenuTrigger.ts"],"sourcesContent":["'use client';\n\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n getReactElementRef,\n isHTMLElement,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useIsSubmenu, useOnMenuSafeZoneTimeout } from '../../utils';\n\nfunction noop() {\n // does nothing\n}\n\n/**\n * Create the state required to render MenuTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup menu\n *\n * @param props - props from this instance of MenuTrigger\n */\nexport const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerState => {\n const { children, disableButtonEnhancement = false } = props;\n\n const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n const menuPopoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n const open = useMenuContext_unstable(context => context.open);\n const triggerId = useMenuContext_unstable(context => context.triggerId);\n const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n const openOnContext = useMenuContext_unstable(context => context.openOnContext);\n\n const isSubmenu = useIsSubmenu();\n const shouldOpenOnArrowRight = useMenuListContext_unstable(ctx => ctx.shouldOpenOnArrowRight ?? true);\n\n const { findFirstFocusable } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, menuPopoverRef]);\n\n const openedWithKeyboardRef = React.useRef(false);\n const openedViaSafeZoneRef = React.useRef(false);\n const hasMouseMovedRef = React.useRef(false);\n\n const { dir } = useFluent();\n const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n const child = getTriggerChild(children);\n\n // Heads up!\n //\n // Handles an edge case where mouse movement over the menu trigger didn't happen as safe zone blocked pointer events,\n // but the cursor is already over the menu trigger.\n const safeZoneHandlerRef = useOnMenuSafeZoneTimeout(\n useEventCallback(() => {\n if (isSubmenu) {\n openedViaSafeZoneRef.current = true;\n }\n }),\n );\n\n const onContextMenu = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event) || event.isDefaultPrevented()) {\n return;\n }\n\n if (openOnContext) {\n event.preventDefault();\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerContextMenu', event });\n }\n };\n\n const onClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n\n if (!openOnContext) {\n setOpen(event, { open: !open, keyboard: openedWithKeyboardRef.current, type: 'menuTriggerClick', event });\n openedWithKeyboardRef.current = false;\n }\n };\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event) || event.isDefaultPrevented()) {\n return;\n }\n\n const key = event.key;\n\n if (\n !openOnContext &&\n ((isSubmenu && shouldOpenOnArrowRight && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))\n ) {\n setOpen(event, { open: true, keyboard: true, type: 'menuTriggerKeyDown', event });\n }\n\n if (key === Escape && !isSubmenu) {\n setOpen(event, { open: false, keyboard: true, type: 'menuTriggerKeyDown', event });\n }\n\n // if menu is already open, can't rely on effects to focus\n if (open && key === OpenArrowKey && isSubmenu && shouldOpenOnArrowRight) {\n focusFirst();\n }\n };\n\n const onMouseOver = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n\n if (openOnHover) {\n if (hasMouseMovedRef.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseEnter', event });\n } else if (openedViaSafeZoneRef.current) {\n setOpen(event, { open: true, keyboard: false, ignoreHoverDelay: true, type: 'menuTriggerMouseEnter', event });\n openedViaSafeZoneRef.current = false;\n }\n }\n };\n\n // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience\n // First time open the mouse using mousemove and then continue with mouseenter\n // Only use once to determine that the user is using the mouse since it is an expensive event to handle\n const onMouseMove = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n if (openOnHover && !hasMouseMovedRef.current) {\n setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseMove', event });\n hasMouseMovedRef.current = true;\n }\n };\n\n const onMouseLeave = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n if (isTargetDisabled(event)) {\n return;\n }\n if (openOnHover) {\n setOpen(event, { open: false, keyboard: false, type: 'menuTriggerMouseLeave', event });\n }\n };\n\n const contextMenuProps = {\n id: triggerId,\n ...child?.props,\n ref: useMergedRefs(triggerRef, getReactElementRef(child), safeZoneHandlerRef),\n onMouseEnter: useEventCallback(child?.props.onMouseEnter ?? noop),\n onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n onMouseMove: useEventCallback(mergeCallbacks(child?.props.onMouseMove, onMouseMove)),\n onMouseOver: useEventCallback(mergeCallbacks(child?.props.onMouseOver, onMouseOver)),\n };\n\n const triggerChildProps = {\n 'aria-haspopup': 'menu',\n 'aria-expanded': !open && !isSubmenu ? undefined : open,\n ...contextMenuProps,\n onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n } as const;\n\n const ariaButtonTriggerChildProps = useARIAButtonProps(\n child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n triggerChildProps,\n );\n\n return {\n isSubmenu,\n children: applyTriggerPropsToChildren(\n children,\n openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n ),\n };\n};\n\nconst isTargetDisabled = (event: React.SyntheticEvent | Event) => {\n const isDisabled = (el: HTMLElement) =>\n el.hasAttribute('disabled') || (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true');\n if (isHTMLElement(event.target) && isDisabled(event.target)) {\n return true;\n }\n\n return isHTMLElement(event.currentTarget) && isDisabled(event.currentTarget);\n};\n"],"names":["useARIAButtonProps","ArrowRight","ArrowLeft","Escape","ArrowDown","useFluent_unstable","useFluent","useFocusFinders","applyTriggerPropsToChildren","getTriggerChild","getReactElementRef","isHTMLElement","mergeCallbacks","useEventCallback","useMergedRefs","React","useMenuContext_unstable","useMenuListContext_unstable","useIsSubmenu","useOnMenuSafeZoneTimeout","noop","useMenuTrigger_unstable","props","children","disableButtonEnhancement","triggerRef","context","menuPopoverRef","setOpen","open","triggerId","openOnHover","openOnContext","isSubmenu","shouldOpenOnArrowRight","ctx","findFirstFocusable","focusFirst","useCallback","firstFocusable","current","focus","openedWithKeyboardRef","useRef","openedViaSafeZoneRef","hasMouseMovedRef","dir","OpenArrowKey","child","safeZoneHandlerRef","onContextMenu","event","isTargetDisabled","isDefaultPrevented","preventDefault","keyboard","type","onClick","onKeyDown","key","onMouseOver","ignoreHoverDelay","onMouseMove","onMouseLeave","contextMenuProps","id","ref","onMouseEnter","triggerChildProps","undefined","ariaButtonTriggerChildProps","isDisabled","el","hasAttribute","getAttribute","target","currentTarget"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/menuListContext.tsx"],"sourcesContent":["'use client';\n\nimport * 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 { MenuCheckedValueChangeData, MenuCheckedValueChangeEvent, 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 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<MenuListProps, 'checkedValues' | 'hasIcons' | 'hasCheckmarks'> & {\n setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n toggleCheckbox?: SelectableHandler;\n selectRadio?: SelectableHandler;\n /**\n * Callback when checked items change for value with a name\n *\n * @param event - React's original SyntheticEvent\n * @param data - A data object with relevant information\n *\n * @deprecated this property is not used internally anymore,\n * the signature remains just to avoid breaking changes\n */\n onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;\n};\n\nexport const MenuListProvider = MenuListContext.Provider;\n\nexport const useMenuListContext_unstable = <T,>(selector: ContextSelector<MenuListContextValue, T>): T =>\n useContextSelector(MenuListContext, (ctx = menuListContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","MenuListContext","undefined","menuListContextDefaultValue","checkedValues","setFocusByFirstCharacter","toggleCheckbox","selectRadio","hasIcons","hasCheckmarks","MenuListProvider","Provider","useMenuListContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;mBAQaG;;;
|
|
1
|
+
{"version":3,"sources":["../src/contexts/menuListContext.tsx"],"sourcesContent":["'use client';\n\nimport * 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 { MenuCheckedValueChangeData, MenuCheckedValueChangeEvent, 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 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<MenuListProps, 'checkedValues' | 'hasIcons' | 'hasCheckmarks'> & {\n setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n toggleCheckbox?: SelectableHandler;\n selectRadio?: SelectableHandler;\n /**\n * Callback when checked items change for value with a name\n *\n * @param event - React's original SyntheticEvent\n * @param data - A data object with relevant information\n *\n * @deprecated this property is not used internally anymore,\n * the signature remains just to avoid breaking changes\n */\n onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;\n /**\n * Whether child menus (submenus) should open when the user presses the ArrowRight key on their trigger.\n * Set to `false` when the list context is provided by a grid-like container (e.g. MenuGrid) where\n * ArrowRight is reserved for column navigation.\n *\n * @default true\n */\n shouldOpenOnArrowRight?: boolean;\n};\n\nexport const MenuListProvider = MenuListContext.Provider;\n\nexport const useMenuListContext_unstable = <T,>(selector: ContextSelector<MenuListContextValue, T>): T =>\n useContextSelector(MenuListContext, (ctx = menuListContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","MenuListContext","undefined","menuListContextDefaultValue","checkedValues","setFocusByFirstCharacter","toggleCheckbox","selectRadio","hasIcons","hasCheckmarks","MenuListProvider","Provider","useMenuListContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;mBAQaG;;;oBAwCAS;;;+BAEAE;;;;;iEAhDU,QAAQ;sCACmB,mCAAmC;AAK9E,MAAMX,sBAAiDF,mCAAAA,EAC5DG,WACiC;AAEnC,MAAMC,8BAAoD;IACxDC,eAAe,CAAC;IAChBC,0BAA0B,IAAM;IAChCC,gBAAgB,IAAM;IACtBC,aAAa,IAAM;IACnBC,UAAU;IACVC,eAAe;AACjB;AA6BO,MAAMC,mBAAmBT,gBAAgBU,QAAQ,CAAC;AAElD,MAAMC,8BAA8B,CAAKC,eAC9Cb,wCAAAA,EAAmBC,iBAAiB,CAACa,MAAMX,2BAA2B,GAAKU,SAASC,MAAM"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-menu",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.23.0",
|
|
4
4
|
"description": "Fluent UI menu component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -16,8 +16,10 @@
|
|
|
16
16
|
"@fluentui/react-aria": "^9.17.10",
|
|
17
17
|
"@fluentui/react-context-selector": "^9.2.15",
|
|
18
18
|
"@fluentui/react-icons": "^2.0.245",
|
|
19
|
+
"@fluentui/react-motion": "^9.13.0",
|
|
20
|
+
"@fluentui/react-motion-components-preview": "^0.15.2",
|
|
19
21
|
"@fluentui/react-portal": "^9.8.11",
|
|
20
|
-
"@fluentui/react-positioning": "^9.
|
|
22
|
+
"@fluentui/react-positioning": "^9.22.0",
|
|
21
23
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
22
24
|
"@fluentui/react-tabster": "^9.26.13",
|
|
23
25
|
"@fluentui/react-theme": "^9.2.1",
|