@fluentui/react-menu 9.6.0 → 9.6.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. package/CHANGELOG.json +69 -7
  2. package/CHANGELOG.md +30 -8
  3. package/dist/index.d.ts +2 -4
  4. package/lib/components/Menu/useMenu.js +9 -28
  5. package/lib/components/Menu/useMenu.js.map +1 -1
  6. package/lib/components/MenuItem/MenuItem.types.js.map +1 -1
  7. package/lib/components/MenuItem/useMenuItem.js +0 -1
  8. package/lib/components/MenuItem/useMenuItem.js.map +1 -1
  9. package/lib/components/MenuItem/useMenuItemStyles.js +2 -22
  10. package/lib/components/MenuItem/useMenuItemStyles.js.map +1 -1
  11. package/lib/components/MenuPopover/useMenuPopover.js +0 -1
  12. package/lib/components/MenuPopover/useMenuPopover.js.map +1 -1
  13. package/lib-amd/components/Menu/useMenu.js +10 -27
  14. package/lib-amd/components/Menu/useMenu.js.map +1 -1
  15. package/lib-amd/components/MenuItem/MenuItem.types.js.map +1 -1
  16. package/lib-amd/components/MenuItem/useMenuItem.js +0 -1
  17. package/lib-amd/components/MenuItem/useMenuItem.js.map +1 -1
  18. package/lib-amd/components/MenuItem/useMenuItemStyles.js +1 -2
  19. package/lib-amd/components/MenuItem/useMenuItemStyles.js.map +1 -1
  20. package/lib-amd/components/MenuPopover/useMenuPopover.js +0 -1
  21. package/lib-amd/components/MenuPopover/useMenuPopover.js.map +1 -1
  22. package/lib-commonjs/components/Menu/useMenu.js +9 -28
  23. package/lib-commonjs/components/Menu/useMenu.js.map +1 -1
  24. package/lib-commonjs/components/MenuItem/useMenuItem.js +0 -1
  25. package/lib-commonjs/components/MenuItem/useMenuItem.js.map +1 -1
  26. package/lib-commonjs/components/MenuItem/useMenuItemStyles.js +2 -22
  27. package/lib-commonjs/components/MenuItem/useMenuItemStyles.js.map +1 -1
  28. package/lib-commonjs/components/MenuPopover/useMenuPopover.js +0 -1
  29. package/lib-commonjs/components/MenuPopover/useMenuPopover.js.map +1 -1
  30. package/package.json +8 -6
@@ -1,4 +1,4 @@
1
- define(["require", "exports", "tslib", "react", "@fluentui/react-positioning", "@fluentui/react-utilities", "@fluentui/react-shared-contexts", "@fluentui/react-portal", "@fluentui/react-tabster", "../../contexts/menuContext", "../../utils/index", "../../utils/useIsSubmenu", "@fluentui/keyboard-keys"], function (require, exports, tslib_1, React, react_positioning_1, react_utilities_1, react_shared_contexts_1, react_portal_1, react_tabster_1, menuContext_1, index_1, useIsSubmenu_1, keyboard_keys_1) {
1
+ define(["require", "exports", "tslib", "react", "@fluentui/react-positioning", "@fluentui/react-utilities", "@fluentui/react-shared-contexts", "@fluentui/react-portal", "@fluentui/react-tabster", "../../contexts/menuContext", "../../utils/index", "../../utils/useIsSubmenu"], function (require, exports, tslib_1, React, react_positioning_1, react_utilities_1, react_shared_contexts_1, react_portal_1, react_tabster_1, menuContext_1, index_1, useIsSubmenu_1) {
2
2
  "use strict";
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  exports.useMenu_unstable = void 0;
@@ -106,8 +106,6 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-positioning", "
106
106
  var parentSetOpen = menuContext_1.useMenuContext_unstable(function (context) { return context.setOpen; });
107
107
  var onOpenChange = react_utilities_1.useEventCallback(function (e, data) { var _a; return (_a = state.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(state, e, data); });
108
108
  var shouldHandleCloseRef = React.useRef(false);
109
- var shouldHandleTabRef = React.useRef(false);
110
- var pressedShiftRef = React.useRef(false);
111
109
  var setOpenTimeout = React.useRef(0);
112
110
  var enteringTriggerRef = React.useRef(false);
113
111
  var _a = react_utilities_1.useControllableState({
@@ -125,12 +123,6 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-positioning", "
125
123
  state.setContextTarget(undefined);
126
124
  shouldHandleCloseRef.current = true;
127
125
  }
128
- if (e.type === 'keydown') {
129
- if (e.key === keyboard_keys_1.Tab) {
130
- shouldHandleTabRef.current = true;
131
- pressedShiftRef.current = e.shiftKey;
132
- }
133
- }
134
126
  if (data.bubble) {
135
127
  parentSetOpen(e, tslib_1.__assign({}, data));
136
128
  }
@@ -192,19 +184,11 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-positioning", "
192
184
  };
193
185
  }, []);
194
186
  // Manage focus for open state
195
- var _b = react_tabster_1.useFocusFinders(), findFirstFocusable = _b.findFirstFocusable, findNextFocusable = _b.findNextFocusable, findPrevFocusable = _b.findPrevFocusable;
187
+ var findFirstFocusable = react_tabster_1.useFocusFinders().findFirstFocusable;
196
188
  var focusFirst = React.useCallback(function () {
197
189
  var firstFocusable = findFirstFocusable(state.menuPopoverRef.current);
198
190
  firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
199
191
  }, [findFirstFocusable, state.menuPopoverRef]);
200
- var focusAfterMenuTrigger = React.useCallback(function () {
201
- var nextFocusable = findNextFocusable(state.triggerRef.current);
202
- nextFocusable === null || nextFocusable === void 0 ? void 0 : nextFocusable.focus();
203
- }, [findNextFocusable, state.triggerRef]);
204
- var focusBeforeMenuTrigger = React.useCallback(function () {
205
- var prevFocusable = findPrevFocusable(state.triggerRef.current);
206
- prevFocusable === null || prevFocusable === void 0 ? void 0 : prevFocusable.focus();
207
- }, [findPrevFocusable, state.triggerRef]);
208
192
  React.useEffect(function () {
209
193
  var _a;
210
194
  if (open) {
@@ -212,18 +196,17 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-positioning", "
212
196
  }
213
197
  else {
214
198
  if (shouldHandleCloseRef.current) {
215
- if (shouldHandleTabRef.current && !state.isSubmenu) {
216
- pressedShiftRef.current ? focusBeforeMenuTrigger() : focusAfterMenuTrigger();
217
- }
218
- else {
219
- (_a = state.triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
220
- }
199
+ // We know that React effects are sync so we focus the trigger here
200
+ // after any event handler (event handlers will update state and re-render).
201
+ // Since the browser only performs the default behaviour for the Tab key once
202
+ // keyboard events have fully bubbled up the window, the browser will move
203
+ // focus to the next tabbable element before/after the trigger if needed.
204
+ // If the Tab key was not pressed, focus will remain on the trigger as expected.
205
+ (_a = state.triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
221
206
  }
222
207
  }
223
208
  shouldHandleCloseRef.current = false;
224
- shouldHandleTabRef.current = false;
225
- pressedShiftRef.current = false;
226
- }, [state.triggerRef, state.isSubmenu, open, focusFirst, focusAfterMenuTrigger, focusBeforeMenuTrigger]);
209
+ }, [state.triggerRef, state.isSubmenu, open, focusFirst]);
227
210
  return [open, setOpen];
228
211
  };
229
212
  });
@@ -1 +1 @@
1
- {"version":3,"file":"useMenu.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/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, MenuOpenEvent, 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 isSubmenu = useIsSubmenu();\n const {\n hoverDelay = 500,\n inline = false,\n hasCheckmarks = false,\n hasIcons = false,\n closeOnScroll = false,\n openOnContext = false,\n persistOnItemClick = false,\n openOnHover = isSubmenu,\n defaultCheckedValues,\n } = props;\n const triggerId = useId('menu');\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n const positioningState = {\n position: isSubmenu ? 'after' : 'below',\n align: isSubmenu ? 'top' : 'start',\n target: props.openOnContext ? contextTarget : undefined,\n ...resolvePositioningShorthand(props.positioning),\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at most two children');\n }\n }\n\n let menuTrigger: React.ReactElement | undefined = undefined;\n let menuPopover: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n menuTrigger = children[0];\n menuPopover = children[1];\n } else if (children.length === 1) {\n menuPopover = children[0];\n }\n\n const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n // TODO Better way to narrow types ?\n const [open, setOpen] = useMenuOpenState({\n hoverDelay,\n isSubmenu,\n setContextTarget,\n closeOnScroll,\n menuPopoverRef,\n triggerRef,\n open: props.open,\n defaultOpen: props.defaultOpen,\n onOpenChange: props.onOpenChange,\n openOnContext,\n });\n\n const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n return {\n inline,\n hoverDelay,\n triggerId,\n isSubmenu,\n openOnHover,\n contextTarget,\n setContextTarget,\n hasCheckmarks,\n hasIcons,\n closeOnScroll,\n menuTrigger,\n menuPopover,\n triggerRef,\n menuPopoverRef,\n components: {},\n openOnContext,\n open,\n setOpen,\n checkedValues,\n onCheckedValueChange,\n persistOnItemClick,\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: props.checkedValues,\n defaultState: props.defaultCheckedValues,\n initialState: {},\n });\n const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n props.onCheckedValueChange?.(e, { name, checkedItems });\n\n setCheckedValues(currentValue => ({\n ...currentValue,\n [name]: checkedItems,\n }));\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n state: Pick<\n MenuState,\n | 'isSubmenu'\n | 'menuPopoverRef'\n | 'setContextTarget'\n | 'triggerRef'\n | 'openOnContext'\n | 'closeOnScroll'\n | 'hoverDelay'\n > &\n Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n const { targetDocument } = useFluent();\n const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n const onOpenChange: MenuProps['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const shouldHandleCloseRef = 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: MenuOpenEvent, data: MenuOpenChangeData) => {\n const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n onOpenChange?.(event, { ...data });\n if (data.open && e.type === 'contextmenu') {\n state.setContextTarget(e as React.MouseEvent);\n }\n\n if (!data.open) {\n state.setContextTarget(undefined);\n shouldHandleCloseRef.current = true;\n }\n\n if (e.type === 'keydown') {\n if ((e as React.KeyboardEvent<HTMLElement>).key === Tab) {\n shouldHandleTabRef.current = true;\n pressedShiftRef.current = (e as React.KeyboardEvent<HTMLElement>).shiftKey;\n }\n }\n\n if (data.bubble) {\n parentSetOpen(e, { ...data });\n }\n\n setOpenState(data.open);\n });\n\n const setOpen = useEventCallback((e: MenuOpenEvent, 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: event => setOpen(event, { open: false, type: 'clickOutside', event }),\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = state.openOnContext || state.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }),\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n disabled: !open || !closeOnScroll,\n });\n\n useOnMenuMouseEnter({\n element: targetDocument,\n callback: event => {\n // When moving from a menu directly back to its trigger, this handler can close the menu\n // Explicitly check a flag to see if this situation happens\n if (!enteringTriggerRef.current) {\n setOpen(event, { open: false, type: 'menuMouseEnter', event });\n }\n },\n disabled: !open,\n refs: [state.menuPopoverRef],\n });\n\n // 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 } else {\n if (shouldHandleCloseRef.current) {\n if (shouldHandleTabRef.current && !state.isSubmenu) {\n pressedShiftRef.current ? focusBeforeMenuTrigger() : focusAfterMenuTrigger();\n } else {\n state.triggerRef.current?.focus();\n }\n }\n }\n\n shouldHandleCloseRef.current = false;\n shouldHandleTabRef.current = false;\n pressedShiftRef.current = false;\n }, [state.triggerRef, state.isSubmenu, open, focusFirst, focusAfterMenuTrigger, focusBeforeMenuTrigger]);\n\n return [open, setOpen] as const;\n};\n"]}
1
+ {"version":3,"file":"useMenu.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/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, MenuOpenEvent, 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 isSubmenu = useIsSubmenu();\n const {\n hoverDelay = 500,\n inline = false,\n hasCheckmarks = false,\n hasIcons = false,\n closeOnScroll = false,\n openOnContext = false,\n persistOnItemClick = false,\n openOnHover = isSubmenu,\n defaultCheckedValues,\n } = props;\n const triggerId = useId('menu');\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n const positioningState = {\n position: isSubmenu ? 'after' : 'below',\n align: isSubmenu ? 'top' : 'start',\n target: props.openOnContext ? contextTarget : undefined,\n ...resolvePositioningShorthand(props.positioning),\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at most two children');\n }\n }\n\n let menuTrigger: React.ReactElement | undefined = undefined;\n let menuPopover: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n menuTrigger = children[0];\n menuPopover = children[1];\n } else if (children.length === 1) {\n menuPopover = children[0];\n }\n\n const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n // TODO Better way to narrow types ?\n const [open, setOpen] = useMenuOpenState({\n hoverDelay,\n isSubmenu,\n setContextTarget,\n closeOnScroll,\n menuPopoverRef,\n triggerRef,\n open: props.open,\n defaultOpen: props.defaultOpen,\n onOpenChange: props.onOpenChange,\n openOnContext,\n });\n\n const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n return {\n inline,\n hoverDelay,\n triggerId,\n isSubmenu,\n openOnHover,\n contextTarget,\n setContextTarget,\n hasCheckmarks,\n hasIcons,\n closeOnScroll,\n menuTrigger,\n menuPopover,\n triggerRef,\n menuPopoverRef,\n components: {},\n openOnContext,\n open,\n setOpen,\n checkedValues,\n onCheckedValueChange,\n persistOnItemClick,\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: props.checkedValues,\n defaultState: props.defaultCheckedValues,\n initialState: {},\n });\n const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n props.onCheckedValueChange?.(e, { name, checkedItems });\n\n setCheckedValues(currentValue => ({\n ...currentValue,\n [name]: checkedItems,\n }));\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n state: Pick<\n MenuState,\n | 'isSubmenu'\n | 'menuPopoverRef'\n | 'setContextTarget'\n | 'triggerRef'\n | 'openOnContext'\n | 'closeOnScroll'\n | 'hoverDelay'\n > &\n Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n const { targetDocument } = useFluent();\n const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n const onOpenChange: MenuProps['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const shouldHandleCloseRef = 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: MenuOpenEvent, data: MenuOpenChangeData) => {\n const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n onOpenChange?.(event, { ...data });\n if (data.open && e.type === 'contextmenu') {\n state.setContextTarget(e as React.MouseEvent);\n }\n\n if (!data.open) {\n state.setContextTarget(undefined);\n shouldHandleCloseRef.current = true;\n }\n\n if (data.bubble) {\n parentSetOpen(e, { ...data });\n }\n\n setOpenState(data.open);\n });\n\n const setOpen = useEventCallback((e: MenuOpenEvent, 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: event => setOpen(event, { open: false, type: 'clickOutside', event }),\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = state.openOnContext || state.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }),\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n disabled: !open || !closeOnScroll,\n });\n\n useOnMenuMouseEnter({\n element: targetDocument,\n callback: event => {\n // When moving from a menu directly back to its trigger, this handler can close the menu\n // Explicitly check a flag to see if this situation happens\n if (!enteringTriggerRef.current) {\n setOpen(event, { open: false, type: 'menuMouseEnter', event });\n }\n },\n disabled: !open,\n refs: [state.menuPopoverRef],\n });\n\n // 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 } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, state.menuPopoverRef]);\n\n React.useEffect(() => {\n if (open) {\n focusFirst();\n } else {\n if (shouldHandleCloseRef.current) {\n // We know that React effects are sync so we focus the trigger here\n // after any event handler (event handlers will update state and re-render).\n // Since the browser only performs the default behaviour for the Tab key once\n // keyboard events have fully bubbled up the window, the browser will move\n // focus to the next tabbable element before/after the trigger if needed.\n // If the Tab key was not pressed, focus will remain on the trigger as expected.\n state.triggerRef.current?.focus();\n }\n }\n\n shouldHandleCloseRef.current = false;\n }, [state.triggerRef, state.isSubmenu, open, focusFirst]);\n\n return [open, setOpen] as const;\n};\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"MenuItem.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/MenuItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuItemSlots = {\n root: Slot<'div', 'button'>;\n\n /**\n * Icon slot rendered before children content\n */\n icon?: Slot<'span'>;\n\n /**\n * A helper slot for alignment when a menu item is used with selectable menuitems\n * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n */\n checkmark?: Slot<'span'>;\n\n /**\n * Icon slot that shows the indicator for a submenu\n */\n submenuIndicator?: Slot<'span'>;\n\n /**\n * Component children are placed in this slot\n * Avoid using the `children` property in this slot in favour of Component children whenever possible\n */\n content?: Slot<'span'>;\n\n /**\n * Secondary content rendered opposite the primary content (e.g Shortcut text)\n */\n secondaryContent?: Slot<'span'>;\n};\n\nexport type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {\n /**\n * If the menu item is a trigger for a submenu\n *\n * @default false\n */\n hasSubmenu?: boolean;\n\n /**\n * Clicking on the menu item will not dismiss an open menu\n *\n * @default false\n */\n persistOnClick?: boolean;\n\n disabled?: boolean;\n /**\n * @deprecated this property does nothing.\n * disabled focusable is by default by simply using `disabled` property\n */\n disabledFocusable?: boolean;\n};\n\nexport type MenuItemState = ComponentState<MenuItemSlots> &\n Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>> & {\n isNativeButton: boolean;\n };\n"]}
1
+ {"version":3,"file":"MenuItem.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/MenuItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuItemSlots = {\n root: Slot<'div'>;\n\n /**\n * Icon slot rendered before children content\n */\n icon?: Slot<'span'>;\n\n /**\n * A helper slot for alignment when a menu item is used with selectable menuitems\n * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n */\n checkmark?: Slot<'span'>;\n\n /**\n * Icon slot that shows the indicator for a submenu\n */\n submenuIndicator?: Slot<'span'>;\n\n /**\n * Component children are placed in this slot\n * Avoid using the `children` property in this slot in favour of Component children whenever possible\n */\n content?: Slot<'span'>;\n\n /**\n * Secondary content rendered opposite the primary content (e.g Shortcut text)\n */\n secondaryContent?: Slot<'span'>;\n};\n\nexport type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {\n /**\n * If the menu item is a trigger for a submenu\n *\n * @default false\n */\n hasSubmenu?: boolean;\n\n /**\n * Clicking on the menu item will not dismiss an open menu\n *\n * @default false\n */\n persistOnClick?: boolean;\n\n disabled?: boolean;\n /**\n * @deprecated this property does nothing.\n * disabled focusable is by default by simply using `disabled` property\n */\n disabledFocusable?: boolean;\n};\n\nexport type MenuItemState = ComponentState<MenuItemSlots> &\n Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;\n"]}
@@ -29,7 +29,6 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@f
29
29
  content: 'span',
30
30
  secondaryContent: 'span',
31
31
  },
32
- isNativeButton: as === 'button',
33
32
  root: react_utilities_1.getNativeElementProps(as, react_aria_1.useARIAButtonProps(as, tslib_1.__assign(tslib_1.__assign({ role: 'menuitem' }, props), { disabled: false, disabledFocusable: disabled, ref: react_utilities_1.useMergedRefs(ref, innerRef), onKeyDown: react_utilities_1.useEventCallback(function (event) {
34
33
  var _a;
35
34
  (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
@@ -1 +1 @@
1
- {"version":3,"file":"useMenuItem.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useEventCallback, resolveShorthand, useMergedRefs, getNativeElementProps } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n ChevronRightFilled,\n ChevronRightRegular,\n ChevronLeftFilled,\n ChevronLeftRegular,\n bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport { ARIAButtonElement, ARIAButtonElementIntersection, useARIAButtonProps } from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n const isSubmenuTrigger = useMenuTriggerContext_unstable();\n const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;\n const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n\n const { dir } = useFluent();\n const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n const dismissedWithKeyboardRef = React.useRef(false);\n\n const state: MenuItemState = {\n hasSubmenu,\n disabled,\n persistOnClick,\n components: {\n root: 'div',\n icon: 'span',\n checkmark: 'span',\n submenuIndicator: 'span',\n content: 'span',\n secondaryContent: 'span',\n },\n isNativeButton: as === 'button',\n root: getNativeElementProps(\n as,\n useARIAButtonProps(as, {\n role: 'menuitem',\n ...props,\n disabled: false,\n disabledFocusable: disabled,\n ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n onKeyDown: useEventCallback(event => {\n props.onKeyDown?.(event);\n if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n dismissedWithKeyboardRef.current = true;\n }\n }),\n onMouseEnter: useEventCallback(event => {\n innerRef.current?.focus();\n\n props.onMouseEnter?.(event);\n }),\n onClick: useEventCallback(event => {\n if (!hasSubmenu && !persistOnClick) {\n setOpen(event, {\n open: false,\n keyboard: dismissedWithKeyboardRef.current,\n bubble: true,\n type: 'menuItemClick',\n event,\n });\n dismissedWithKeyboardRef.current = false;\n }\n\n props.onClick?.(event);\n }),\n }),\n ),\n icon: resolveShorthand(props.icon, { required: hasIcons }),\n checkmark: resolveShorthand(props.checkmark, { required: hasCheckmarks }),\n submenuIndicator: resolveShorthand(props.submenuIndicator, {\n required: hasSubmenu,\n defaultProps: {\n children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n },\n }),\n content: resolveShorthand(props.content, {\n required: !!props.children,\n defaultProps: { children: props.children },\n }),\n secondaryContent: resolveShorthand(props.secondaryContent),\n };\n useCharacterSearch(state, innerRef);\n return state;\n};\n"]}
1
+ {"version":3,"file":"useMenuItem.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useEventCallback, resolveShorthand, useMergedRefs, getNativeElementProps } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n ChevronRightFilled,\n ChevronRightRegular,\n ChevronLeftFilled,\n ChevronLeftRegular,\n bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport { ARIAButtonElement, ARIAButtonElementIntersection, useARIAButtonProps } from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n const isSubmenuTrigger = useMenuTriggerContext_unstable();\n const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;\n const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n\n const { dir } = useFluent();\n const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n const dismissedWithKeyboardRef = React.useRef(false);\n\n const state: MenuItemState = {\n hasSubmenu,\n disabled,\n persistOnClick,\n components: {\n root: 'div',\n icon: 'span',\n checkmark: 'span',\n submenuIndicator: 'span',\n content: 'span',\n secondaryContent: 'span',\n },\n root: getNativeElementProps(\n as,\n useARIAButtonProps(as, {\n role: 'menuitem',\n ...props,\n disabled: false,\n disabledFocusable: disabled,\n ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n onKeyDown: useEventCallback(event => {\n props.onKeyDown?.(event);\n if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n dismissedWithKeyboardRef.current = true;\n }\n }),\n onMouseEnter: useEventCallback(event => {\n innerRef.current?.focus();\n\n props.onMouseEnter?.(event);\n }),\n onClick: useEventCallback(event => {\n if (!hasSubmenu && !persistOnClick) {\n setOpen(event, {\n open: false,\n keyboard: dismissedWithKeyboardRef.current,\n bubble: true,\n type: 'menuItemClick',\n event,\n });\n dismissedWithKeyboardRef.current = false;\n }\n\n props.onClick?.(event);\n }),\n }),\n ),\n icon: resolveShorthand(props.icon, { required: hasIcons }),\n checkmark: resolveShorthand(props.checkmark, { required: hasCheckmarks }),\n submenuIndicator: resolveShorthand(props.submenuIndicator, {\n required: hasSubmenu,\n defaultProps: {\n children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n },\n }),\n content: resolveShorthand(props.content, {\n required: !!props.children,\n defaultProps: { children: props.children },\n }),\n secondaryContent: resolveShorthand(props.secondaryContent),\n };\n useCharacterSearch(state, innerRef);\n return state;\n};\n"]}
@@ -14,7 +14,6 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-icons"
14
14
  var useStyles = react_1.makeStyles({
15
15
  focusIndicator: react_tabster_1.createFocusOutlineStyle(),
16
16
  // TODO: this should be extracted to another package
17
- resetButton: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ boxSizing: 'content-box', backgroundColor: 'inherit', color: 'inherit', fontFamily: 'inherit', fontSize: 'inherit', lineHeight: 'normal' }, react_1.shorthands.borderColor('transparent')), react_1.shorthands.overflow('visible')), react_1.shorthands.padding(0)), { WebkitAppearance: 'button', textAlign: 'unset' }),
18
17
  root: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { position: 'relative', color: react_theme_1.tokens.colorNeutralForeground2, backgroundColor: react_theme_1.tokens.colorNeutralBackground1, paddingRight: '10px', paddingLeft: '10px', height: '32px', display: 'flex', alignItems: 'center', fontSize: react_theme_1.tokens.fontSizeBase300, cursor: 'pointer' }), react_1.shorthands.gap('4px')), { ':hover': (_a = {
19
18
  backgroundColor: react_theme_1.tokens.colorNeutralBackground1Hover,
20
19
  color: react_theme_1.tokens.colorNeutralForeground2Hover
@@ -77,7 +76,7 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-icons"
77
76
  /** Applies style classnames to slots */
78
77
  var useMenuItemStyles_unstable = function (state) {
79
78
  var styles = useStyles();
80
- state.root.className = react_1.mergeClasses(exports.menuItemClassNames.root, state.isNativeButton && styles.resetButton, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
79
+ state.root.className = react_1.mergeClasses(exports.menuItemClassNames.root, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
81
80
  if (state.content) {
82
81
  state.content.className = react_1.mergeClasses(exports.menuItemClassNames.content, styles.content, state.content.className);
83
82
  }
@@ -1 +1 @@
1
- {"version":3,"file":"useMenuItemStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n root: 'fui-MenuItem',\n icon: 'fui-MenuItem__icon',\n checkmark: 'fui-MenuItem__checkmark',\n submenuIndicator: 'fui-MenuItem__submenuIndicator',\n content: 'fui-MenuItem__content',\n secondaryContent: 'fui-MenuItem__secondaryContent',\n};\n\nconst useStyles = makeStyles({\n focusIndicator: createFocusOutlineStyle(),\n // TODO: this should be extracted to another package\n resetButton: {\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n ...shorthands.borderColor('transparent'),\n ...shorthands.overflow('visible'),\n ...shorthands.padding(0),\n WebkitAppearance: 'button',\n textAlign: 'unset',\n },\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n position: 'relative',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackground1,\n paddingRight: '10px',\n paddingLeft: '10px',\n height: '32px',\n display: 'flex',\n alignItems: 'center',\n fontSize: tokens.fontSizeBase300,\n cursor: 'pointer',\n ...shorthands.gap('4px'),\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n },\n\n userSelect: 'none',\n },\n content: {\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1,\n },\n secondaryContent: {\n paddingLeft: '2px',\n paddingRight: '2px',\n color: tokens.colorNeutralForeground3,\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n },\n ':focus': {\n color: tokens.colorNeutralForeground3Hover,\n },\n },\n icon: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n submenuIndicator: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':focus': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n menuItemClassNames.root,\n state.isNativeButton && styles.resetButton,\n styles.root,\n styles.focusIndicator,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemClassNames.secondaryContent,\n !state.disabled && styles.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n }\n\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(\n menuItemClassNames.submenuIndicator,\n styles.submenuIndicator,\n state.submenuIndicator.className,\n );\n }\n useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"]}
1
+ {"version":3,"file":"useMenuItemStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n root: 'fui-MenuItem',\n icon: 'fui-MenuItem__icon',\n checkmark: 'fui-MenuItem__checkmark',\n submenuIndicator: 'fui-MenuItem__submenuIndicator',\n content: 'fui-MenuItem__content',\n secondaryContent: 'fui-MenuItem__secondaryContent',\n};\n\nconst useStyles = makeStyles({\n focusIndicator: createFocusOutlineStyle(),\n // TODO: this should be extracted to another package\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n position: 'relative',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackground1,\n paddingRight: '10px',\n paddingLeft: '10px',\n height: '32px',\n display: 'flex',\n alignItems: 'center',\n fontSize: tokens.fontSizeBase300,\n cursor: 'pointer',\n ...shorthands.gap('4px'),\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n },\n\n userSelect: 'none',\n },\n content: {\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1,\n },\n secondaryContent: {\n paddingLeft: '2px',\n paddingRight: '2px',\n color: tokens.colorNeutralForeground3,\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n },\n ':focus': {\n color: tokens.colorNeutralForeground3Hover,\n },\n },\n icon: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n submenuIndicator: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':focus': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n menuItemClassNames.root,\n styles.root,\n styles.focusIndicator,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemClassNames.secondaryContent,\n !state.disabled && styles.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n }\n\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(\n menuItemClassNames.submenuIndicator,\n styles.submenuIndicator,\n state.submenuIndicator.className,\n );\n }\n useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"]}
@@ -65,7 +65,6 @@ define(["require", "exports", "tslib", "react", "@fluentui/keyboard-keys", "@flu
65
65
  }
66
66
  if (key === keyboard_keys_1.Tab) {
67
67
  setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event: event });
68
- event.preventDefault();
69
68
  }
70
69
  onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);
71
70
  });
@@ -1 +1 @@
1
- {"version":3,"file":"useMenuPopover.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/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((event: React.MouseEvent<HTMLElement>) => {\n if (openOnHover) {\n setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n }\n\n onMouseEnterOriginal?.(event);\n });\n\n rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n const key = event.key;\n\n if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n if (open && popoverRef.current?.contains(event.target as HTMLElement)) {\n setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover and Tooltip\n event.stopPropagation();\n }\n }\n\n if (key === Tab) {\n setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n event.preventDefault();\n }\n\n onKeyDownOriginal?.(event);\n });\n\n return {\n inline,\n components: {\n root: 'div',\n },\n root: rootProps,\n };\n};\n"]}
1
+ {"version":3,"file":"useMenuPopover.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/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((event: React.MouseEvent<HTMLElement>) => {\n if (openOnHover) {\n setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n }\n\n onMouseEnterOriginal?.(event);\n });\n\n rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n const key = event.key;\n\n if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n if (open && popoverRef.current?.contains(event.target as HTMLElement)) {\n setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover and Tooltip\n event.stopPropagation();\n }\n }\n\n if (key === Tab) {\n setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n }\n\n onKeyDownOriginal?.(event);\n });\n\n return {\n inline,\n components: {\n root: 'div',\n },\n root: rootProps,\n };\n};\n"]}
@@ -13,7 +13,6 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
13
13
  const menuContext_1 = /*#__PURE__*/require("../../contexts/menuContext");
14
14
  const index_1 = /*#__PURE__*/require("../../utils/index");
15
15
  const useIsSubmenu_1 = /*#__PURE__*/require("../../utils/useIsSubmenu");
16
- const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
17
16
  /**
18
17
  * Create the state required to render Menu.
19
18
  *
@@ -145,8 +144,6 @@ const useMenuOpenState = state => {
145
144
  return (_a = state.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(state, e, data);
146
145
  });
147
146
  const shouldHandleCloseRef = React.useRef(false);
148
- const shouldHandleTabRef = React.useRef(false);
149
- const pressedShiftRef = React.useRef(false);
150
147
  const setOpenTimeout = React.useRef(0);
151
148
  const enteringTriggerRef = React.useRef(false);
152
149
  const [open, setOpenState] = react_utilities_1.useControllableState({
@@ -166,12 +163,6 @@ const useMenuOpenState = state => {
166
163
  state.setContextTarget(undefined);
167
164
  shouldHandleCloseRef.current = true;
168
165
  }
169
- if (e.type === 'keydown') {
170
- if (e.key === keyboard_keys_1.Tab) {
171
- shouldHandleTabRef.current = true;
172
- pressedShiftRef.current = e.shiftKey;
173
- }
174
- }
175
166
  if (data.bubble) {
176
167
  parentSetOpen(e, {
177
168
  ...data
@@ -247,39 +238,29 @@ const useMenuOpenState = state => {
247
238
  }, []);
248
239
  // Manage focus for open state
249
240
  const {
250
- findFirstFocusable,
251
- findNextFocusable,
252
- findPrevFocusable
241
+ findFirstFocusable
253
242
  } = react_tabster_1.useFocusFinders();
254
243
  const focusFirst = React.useCallback(() => {
255
244
  const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);
256
245
  firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
257
246
  }, [findFirstFocusable, state.menuPopoverRef]);
258
- const focusAfterMenuTrigger = React.useCallback(() => {
259
- const nextFocusable = findNextFocusable(state.triggerRef.current);
260
- nextFocusable === null || nextFocusable === void 0 ? void 0 : nextFocusable.focus();
261
- }, [findNextFocusable, state.triggerRef]);
262
- const focusBeforeMenuTrigger = React.useCallback(() => {
263
- const prevFocusable = findPrevFocusable(state.triggerRef.current);
264
- prevFocusable === null || prevFocusable === void 0 ? void 0 : prevFocusable.focus();
265
- }, [findPrevFocusable, state.triggerRef]);
266
247
  React.useEffect(() => {
267
248
  var _a;
268
249
  if (open) {
269
250
  focusFirst();
270
251
  } else {
271
252
  if (shouldHandleCloseRef.current) {
272
- if (shouldHandleTabRef.current && !state.isSubmenu) {
273
- pressedShiftRef.current ? focusBeforeMenuTrigger() : focusAfterMenuTrigger();
274
- } else {
275
- (_a = state.triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
276
- }
253
+ // We know that React effects are sync so we focus the trigger here
254
+ // after any event handler (event handlers will update state and re-render).
255
+ // Since the browser only performs the default behaviour for the Tab key once
256
+ // keyboard events have fully bubbled up the window, the browser will move
257
+ // focus to the next tabbable element before/after the trigger if needed.
258
+ // If the Tab key was not pressed, focus will remain on the trigger as expected.
259
+ (_a = state.triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
277
260
  }
278
261
  }
279
262
  shouldHandleCloseRef.current = false;
280
- shouldHandleTabRef.current = false;
281
- pressedShiftRef.current = false;
282
- }, [state.triggerRef, state.isSubmenu, open, focusFirst, focusAfterMenuTrigger, focusBeforeMenuTrigger]);
263
+ }, [state.triggerRef, state.isSubmenu, open, focusFirst]);
283
264
  return [open, setOpen];
284
265
  };
285
266
  //# sourceMappingURL=useMenu.js.map
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["useMenu_unstable","props","isSubmenu","useIsSubmenu_1","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","triggerId","react_utilities_1","contextTarget","setContextTarget","react_positioning_1","positioningState","position","align","target","undefined","positioning","children","React","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","triggerRef","containerRef","menuPopoverRef","open","setOpen","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","exports","setCheckedValues","state","defaultState","initialState","e","name","checkedItems","currentValue","targetDocument","react_shared_contexts_1","parentSetOpen","menuContext_1","context","data","shouldHandleCloseRef","useRef","shouldHandleTabRef","pressedShiftRef","setOpenTimeout","enteringTriggerRef","setOpenState","trySetOpen","event","CustomEvent","type","index_1","detail","nativeEvent","current","key","keyboard_keys_1","shiftKey","bubble","clearTimeout","Event","persist","contains","setTimeout","react_portal_1","disabled","element","refs","filter","Boolean","callback","useEffect","findFirstFocusable","findNextFocusable","findPrevFocusable","react_tabster_1","focusFirst","useCallback","firstFocusable","focus","focusAfterMenuTrigger","nextFocusable","focusBeforeMenuTrigger","prevFocusable"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/Menu/useMenu.tsx"],"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, MenuOpenEvent, 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 isSubmenu = useIsSubmenu();\n const {\n hoverDelay = 500,\n inline = false,\n hasCheckmarks = false,\n hasIcons = false,\n closeOnScroll = false,\n openOnContext = false,\n persistOnItemClick = false,\n openOnHover = isSubmenu,\n defaultCheckedValues,\n } = props;\n const triggerId = useId('menu');\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n const positioningState = {\n position: isSubmenu ? 'after' : 'below',\n align: isSubmenu ? 'top' : 'start',\n target: props.openOnContext ? contextTarget : undefined,\n ...resolvePositioningShorthand(props.positioning),\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at most two children');\n }\n }\n\n let menuTrigger: React.ReactElement | undefined = undefined;\n let menuPopover: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n menuTrigger = children[0];\n menuPopover = children[1];\n } else if (children.length === 1) {\n menuPopover = children[0];\n }\n\n const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n // TODO Better way to narrow types ?\n const [open, setOpen] = useMenuOpenState({\n hoverDelay,\n isSubmenu,\n setContextTarget,\n closeOnScroll,\n menuPopoverRef,\n triggerRef,\n open: props.open,\n defaultOpen: props.defaultOpen,\n onOpenChange: props.onOpenChange,\n openOnContext,\n });\n\n const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n return {\n inline,\n hoverDelay,\n triggerId,\n isSubmenu,\n openOnHover,\n contextTarget,\n setContextTarget,\n hasCheckmarks,\n hasIcons,\n closeOnScroll,\n menuTrigger,\n menuPopover,\n triggerRef,\n menuPopoverRef,\n components: {},\n openOnContext,\n open,\n setOpen,\n checkedValues,\n onCheckedValueChange,\n persistOnItemClick,\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: props.checkedValues,\n defaultState: props.defaultCheckedValues,\n initialState: {},\n });\n const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n props.onCheckedValueChange?.(e, { name, checkedItems });\n\n setCheckedValues(currentValue => ({\n ...currentValue,\n [name]: checkedItems,\n }));\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n state: Pick<\n MenuState,\n | 'isSubmenu'\n | 'menuPopoverRef'\n | 'setContextTarget'\n | 'triggerRef'\n | 'openOnContext'\n | 'closeOnScroll'\n | 'hoverDelay'\n > &\n Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n const { targetDocument } = useFluent();\n const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n const onOpenChange: MenuProps['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const shouldHandleCloseRef = 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: MenuOpenEvent, data: MenuOpenChangeData) => {\n const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n onOpenChange?.(event, { ...data });\n if (data.open && e.type === 'contextmenu') {\n state.setContextTarget(e as React.MouseEvent);\n }\n\n if (!data.open) {\n state.setContextTarget(undefined);\n shouldHandleCloseRef.current = true;\n }\n\n if (e.type === 'keydown') {\n if ((e as React.KeyboardEvent<HTMLElement>).key === Tab) {\n shouldHandleTabRef.current = true;\n pressedShiftRef.current = (e as React.KeyboardEvent<HTMLElement>).shiftKey;\n }\n }\n\n if (data.bubble) {\n parentSetOpen(e, { ...data });\n }\n\n setOpenState(data.open);\n });\n\n const setOpen = useEventCallback((e: MenuOpenEvent, 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: event => setOpen(event, { open: false, type: 'clickOutside', event }),\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = state.openOnContext || state.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }),\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n disabled: !open || !closeOnScroll,\n });\n\n useOnMenuMouseEnter({\n element: targetDocument,\n callback: event => {\n // When moving from a menu directly back to its trigger, this handler can close the menu\n // Explicitly check a flag to see if this situation happens\n if (!enteringTriggerRef.current) {\n setOpen(event, { open: false, type: 'menuMouseEnter', event });\n }\n },\n disabled: !open,\n refs: [state.menuPopoverRef],\n });\n\n // 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 } else {\n if (shouldHandleCloseRef.current) {\n if (shouldHandleTabRef.current && !state.isSubmenu) {\n pressedShiftRef.current ? focusBeforeMenuTrigger() : focusAfterMenuTrigger();\n } else {\n state.triggerRef.current?.focus();\n }\n }\n }\n\n shouldHandleCloseRef.current = false;\n shouldHandleTabRef.current = false;\n pressedShiftRef.current = false;\n }, [state.triggerRef, state.isSubmenu, open, focusFirst, focusAfterMenuTrigger, focusBeforeMenuTrigger]);\n\n return [open, setOpen] as const;\n};\n"]}
1
+ {"version":3,"mappings":"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","names":["useMenu_unstable","props","isSubmenu","useIsSubmenu_1","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","triggerId","react_utilities_1","contextTarget","setContextTarget","react_positioning_1","positioningState","position","align","target","undefined","positioning","children","React","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","triggerRef","containerRef","menuPopoverRef","open","setOpen","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","exports","setCheckedValues","state","defaultState","initialState","e","name","checkedItems","currentValue","targetDocument","react_shared_contexts_1","parentSetOpen","menuContext_1","context","data","shouldHandleCloseRef","useRef","setOpenTimeout","enteringTriggerRef","setOpenState","trySetOpen","event","CustomEvent","type","index_1","detail","nativeEvent","current","bubble","clearTimeout","Event","persist","contains","setTimeout","react_portal_1","disabled","element","refs","filter","Boolean","callback","useEffect","findFirstFocusable","react_tabster_1","focusFirst","useCallback","firstFocusable","focus"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/Menu/useMenu.tsx"],"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, MenuOpenEvent, 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 isSubmenu = useIsSubmenu();\n const {\n hoverDelay = 500,\n inline = false,\n hasCheckmarks = false,\n hasIcons = false,\n closeOnScroll = false,\n openOnContext = false,\n persistOnItemClick = false,\n openOnHover = isSubmenu,\n defaultCheckedValues,\n } = props;\n const triggerId = useId('menu');\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n const positioningState = {\n position: isSubmenu ? 'after' : 'below',\n align: isSubmenu ? 'top' : 'start',\n target: props.openOnContext ? contextTarget : undefined,\n ...resolvePositioningShorthand(props.positioning),\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at most two children');\n }\n }\n\n let menuTrigger: React.ReactElement | undefined = undefined;\n let menuPopover: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n menuTrigger = children[0];\n menuPopover = children[1];\n } else if (children.length === 1) {\n menuPopover = children[0];\n }\n\n const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n // TODO Better way to narrow types ?\n const [open, setOpen] = useMenuOpenState({\n hoverDelay,\n isSubmenu,\n setContextTarget,\n closeOnScroll,\n menuPopoverRef,\n triggerRef,\n open: props.open,\n defaultOpen: props.defaultOpen,\n onOpenChange: props.onOpenChange,\n openOnContext,\n });\n\n const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n return {\n inline,\n hoverDelay,\n triggerId,\n isSubmenu,\n openOnHover,\n contextTarget,\n setContextTarget,\n hasCheckmarks,\n hasIcons,\n closeOnScroll,\n menuTrigger,\n menuPopover,\n triggerRef,\n menuPopoverRef,\n components: {},\n openOnContext,\n open,\n setOpen,\n checkedValues,\n onCheckedValueChange,\n persistOnItemClick,\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: props.checkedValues,\n defaultState: props.defaultCheckedValues,\n initialState: {},\n });\n const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n props.onCheckedValueChange?.(e, { name, checkedItems });\n\n setCheckedValues(currentValue => ({\n ...currentValue,\n [name]: checkedItems,\n }));\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n state: Pick<\n MenuState,\n | 'isSubmenu'\n | 'menuPopoverRef'\n | 'setContextTarget'\n | 'triggerRef'\n | 'openOnContext'\n | 'closeOnScroll'\n | 'hoverDelay'\n > &\n Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n const { targetDocument } = useFluent();\n const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n const onOpenChange: MenuProps['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const shouldHandleCloseRef = 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: MenuOpenEvent, data: MenuOpenChangeData) => {\n const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n onOpenChange?.(event, { ...data });\n if (data.open && e.type === 'contextmenu') {\n state.setContextTarget(e as React.MouseEvent);\n }\n\n if (!data.open) {\n state.setContextTarget(undefined);\n shouldHandleCloseRef.current = true;\n }\n\n if (data.bubble) {\n parentSetOpen(e, { ...data });\n }\n\n setOpenState(data.open);\n });\n\n const setOpen = useEventCallback((e: MenuOpenEvent, 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: event => setOpen(event, { open: false, type: 'clickOutside', event }),\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = state.openOnContext || state.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }),\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n disabled: !open || !closeOnScroll,\n });\n\n useOnMenuMouseEnter({\n element: targetDocument,\n callback: event => {\n // When moving from a menu directly back to its trigger, this handler can close the menu\n // Explicitly check a flag to see if this situation happens\n if (!enteringTriggerRef.current) {\n setOpen(event, { open: false, type: 'menuMouseEnter', event });\n }\n },\n disabled: !open,\n refs: [state.menuPopoverRef],\n });\n\n // 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 } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, state.menuPopoverRef]);\n\n React.useEffect(() => {\n if (open) {\n focusFirst();\n } else {\n if (shouldHandleCloseRef.current) {\n // We know that React effects are sync so we focus the trigger here\n // after any event handler (event handlers will update state and re-render).\n // Since the browser only performs the default behaviour for the Tab key once\n // keyboard events have fully bubbled up the window, the browser will move\n // focus to the next tabbable element before/after the trigger if needed.\n // If the Tab key was not pressed, focus will remain on the trigger as expected.\n state.triggerRef.current?.focus();\n }\n }\n\n shouldHandleCloseRef.current = false;\n }, [state.triggerRef, state.isSubmenu, open, focusFirst]);\n\n return [open, setOpen] as const;\n};\n"]}
@@ -48,7 +48,6 @@ const useMenuItem_unstable = (props, ref) => {
48
48
  content: 'span',
49
49
  secondaryContent: 'span'
50
50
  },
51
- isNativeButton: as === 'button',
52
51
  root: react_utilities_1.getNativeElementProps(as, react_aria_1.useARIAButtonProps(as, {
53
52
  role: 'menuitem',
54
53
  ...props,
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAOA;AACA;AAEA;AACA;AAEA,MAAMA,gBAAgB,gBAAGC,wBAAU,CAACA,gCAAkB,EAAEA,iCAAmB,CAAC;AAC5E,MAAMC,eAAe,gBAAGD,wBAAU,CAACA,+BAAiB,EAAEA,gCAAkB,CAAC;AAEzE;;;AAGO,MAAME,oBAAoB,GAAG,CAACC,KAAoB,EAAEC,GAAwC,KAAmB;EACpH,MAAMC,gBAAgB,GAAGC,mDAA8B,EAAE;EACzD,MAAMC,qBAAqB,GAAGC,qCAAuB,CAACC,OAAO,IAAIA,OAAO,CAACC,kBAAkB,CAAC;EAC5F,MAAM;IAAEC,EAAE,GAAG,KAAK;IAAEC,QAAQ,GAAG,KAAK;IAAEC,UAAU,GAAGR,gBAAgB;IAAES,cAAc,GAAGP;EAAqB,CAAE,GAAGJ,KAAK;EACrH,MAAMY,QAAQ,GAAGC,6CAA2B,CAACP,OAAO,IAAIA,OAAO,CAACM,QAAQ,CAAC;EACzE,MAAME,aAAa,GAAGD,6CAA2B,CAACP,OAAO,IAAIA,OAAO,CAACQ,aAAa,CAAC;EACnF,MAAMC,OAAO,GAAGV,qCAAuB,CAACC,OAAO,IAAIA,OAAO,CAACS,OAAO,CAAC;EAEnE,MAAM;IAAEC;EAAG,CAAE,GAAGC,0CAAS,EAAE;EAC3B,MAAMC,QAAQ,GAAGC,KAAK,CAACC,MAAM,CAAuC,IAAI,CAAC;EACzE,MAAMC,wBAAwB,GAAGF,KAAK,CAACC,MAAM,CAAC,KAAK,CAAC;EAEpD,MAAME,KAAK,GAAkB;IAC3BZ,UAAU;IACVD,QAAQ;IACRE,cAAc;IACdY,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,IAAI,EAAE,MAAM;MACZC,SAAS,EAAE,MAAM;MACjBC,gBAAgB,EAAE,MAAM;MACxBC,OAAO,EAAE,MAAM;MACfC,gBAAgB,EAAE;KACnB;IACDC,cAAc,EAAEtB,EAAE,KAAK,QAAQ;IAC/BgB,IAAI,EAAEO,uCAAqB,CACzBvB,EAAE,EACFwB,+BAAkB,CAACxB,EAAE,EAAE;MACrByB,IAAI,EAAE,UAAU;MAChB,GAAGjC,KAAK;MACRS,QAAQ,EAAE,KAAK;MACfyB,iBAAiB,EAAEzB,QAAQ;MAC3BR,GAAG,EAAE8B,+BAAa,CAAC9B,GAAG,EAAEiB,QAAQ,CAAoD;MACpFiB,SAAS,EAAEJ,kCAAgB,CAACK,KAAK,IAAG;;QAClC,WAAK,CAACD,SAAS,+CAAfnC,KAAK,EAAaoC,KAAK,CAAC;QACxB,IAAI,CAACA,KAAK,CAACC,kBAAkB,EAAE,KAAKD,KAAK,CAACE,GAAG,KAAKC,qBAAK,IAAIH,KAAK,CAACE,GAAG,KAAKC,qBAAK,CAAC,EAAE;UAC/ElB,wBAAwB,CAACmB,OAAO,GAAG,IAAI;;MAE3C,CAAC,CAAC;MACFC,YAAY,EAAEV,kCAAgB,CAACK,KAAK,IAAG;;QACrC,cAAQ,CAACI,OAAO,0CAAEE,KAAK,EAAE;QAEzB,WAAK,CAACD,YAAY,+CAAlBzC,KAAK,EAAgBoC,KAAK,CAAC;MAC7B,CAAC,CAAC;MACFO,OAAO,EAAEZ,kCAAgB,CAACK,KAAK,IAAG;;QAChC,IAAI,CAAC1B,UAAU,IAAI,CAACC,cAAc,EAAE;UAClCI,OAAO,CAACqB,KAAK,EAAE;YACbQ,IAAI,EAAE,KAAK;YACXC,QAAQ,EAAExB,wBAAwB,CAACmB,OAAO;YAC1CM,MAAM,EAAE,IAAI;YACZC,IAAI,EAAE,eAAe;YACrBX;WACD,CAAC;UACFf,wBAAwB,CAACmB,OAAO,GAAG,KAAK;;QAG1C,WAAK,CAACG,OAAO,+CAAb3C,KAAK,EAAWoC,KAAK,CAAC;MACxB,CAAC;KACF,CAAC,CACH;IACDX,IAAI,EAAEM,kCAAgB,CAAC/B,KAAK,CAACyB,IAAI,EAAE;MAAEuB,QAAQ,EAAEpC;IAAQ,CAAE,CAAC;IAC1Dc,SAAS,EAAEK,kCAAgB,CAAC/B,KAAK,CAAC0B,SAAS,EAAE;MAAEsB,QAAQ,EAAElC;IAAa,CAAE,CAAC;IACzEa,gBAAgB,EAAEI,kCAAgB,CAAC/B,KAAK,CAAC2B,gBAAgB,EAAE;MACzDqB,QAAQ,EAAEtC,UAAU;MACpBuC,YAAY,EAAE;QACZC,QAAQ,EAAElC,GAAG,KAAK,KAAK,GAAGG,oBAACvB,gBAAgB,OAAG,GAAGuB,oBAACrB,eAAe;;KAEpE,CAAC;IACF8B,OAAO,EAAEG,kCAAgB,CAAC/B,KAAK,CAAC4B,OAAO,EAAE;MACvCoB,QAAQ,EAAE,CAAC,CAAChD,KAAK,CAACkD,QAAQ;MAC1BD,YAAY,EAAE;QAAEC,QAAQ,EAAElD,KAAK,CAACkD;MAAQ;KACzC,CAAC;IACFrB,gBAAgB,EAAEE,kCAAgB,CAAC/B,KAAK,CAAC6B,gBAAgB;GAC1D;EACDsB,uCAAkB,CAAC7B,KAAK,EAAEJ,QAAQ,CAAC;EACnC,OAAOI,KAAK;AACd,CAAC;AA5EY8B,4BAAoB","names":["ChevronRightIcon","react_icons_1","ChevronLeftIcon","useMenuItem_unstable","props","ref","isSubmenuTrigger","menuTriggerContext_1","persistOnClickContext","menuContext_1","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","hasIcons","menuListContext_1","hasCheckmarks","setOpen","dir","react_shared_contexts_1","innerRef","React","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","content","secondaryContent","isNativeButton","react_utilities_1","react_aria_1","role","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","keyboard_keys_1","current","onMouseEnter","focus","onClick","open","keyboard","bubble","type","required","defaultProps","children","useCharacterSearch_1","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, resolveShorthand, useMergedRefs, getNativeElementProps } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n ChevronRightFilled,\n ChevronRightRegular,\n ChevronLeftFilled,\n ChevronLeftRegular,\n bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport { ARIAButtonElement, ARIAButtonElementIntersection, useARIAButtonProps } from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n const isSubmenuTrigger = useMenuTriggerContext_unstable();\n const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;\n const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n\n const { dir } = useFluent();\n const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n const dismissedWithKeyboardRef = React.useRef(false);\n\n const state: MenuItemState = {\n hasSubmenu,\n disabled,\n persistOnClick,\n components: {\n root: 'div',\n icon: 'span',\n checkmark: 'span',\n submenuIndicator: 'span',\n content: 'span',\n secondaryContent: 'span',\n },\n isNativeButton: as === 'button',\n root: getNativeElementProps(\n as,\n useARIAButtonProps(as, {\n role: 'menuitem',\n ...props,\n disabled: false,\n disabledFocusable: disabled,\n ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n onKeyDown: useEventCallback(event => {\n props.onKeyDown?.(event);\n if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n dismissedWithKeyboardRef.current = true;\n }\n }),\n onMouseEnter: useEventCallback(event => {\n innerRef.current?.focus();\n\n props.onMouseEnter?.(event);\n }),\n onClick: useEventCallback(event => {\n if (!hasSubmenu && !persistOnClick) {\n setOpen(event, {\n open: false,\n keyboard: dismissedWithKeyboardRef.current,\n bubble: true,\n type: 'menuItemClick',\n event,\n });\n dismissedWithKeyboardRef.current = false;\n }\n\n props.onClick?.(event);\n }),\n }),\n ),\n icon: resolveShorthand(props.icon, { required: hasIcons }),\n checkmark: resolveShorthand(props.checkmark, { required: hasCheckmarks }),\n submenuIndicator: resolveShorthand(props.submenuIndicator, {\n required: hasSubmenu,\n defaultProps: {\n children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n },\n }),\n content: resolveShorthand(props.content, {\n required: !!props.children,\n defaultProps: { children: props.children },\n }),\n secondaryContent: resolveShorthand(props.secondaryContent),\n };\n useCharacterSearch(state, innerRef);\n return state;\n};\n"]}
1
+ {"version":3,"mappings":"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","names":["ChevronRightIcon","react_icons_1","ChevronLeftIcon","useMenuItem_unstable","props","ref","isSubmenuTrigger","menuTriggerContext_1","persistOnClickContext","menuContext_1","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","hasIcons","menuListContext_1","hasCheckmarks","setOpen","dir","react_shared_contexts_1","innerRef","React","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","content","secondaryContent","react_utilities_1","react_aria_1","role","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","keyboard_keys_1","current","onMouseEnter","focus","onClick","open","keyboard","bubble","type","required","defaultProps","children","useCharacterSearch_1","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, resolveShorthand, useMergedRefs, getNativeElementProps } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n ChevronRightFilled,\n ChevronRightRegular,\n ChevronLeftFilled,\n ChevronLeftRegular,\n bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport { ARIAButtonElement, ARIAButtonElementIntersection, useARIAButtonProps } from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n const isSubmenuTrigger = useMenuTriggerContext_unstable();\n const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;\n const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n\n const { dir } = useFluent();\n const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n const dismissedWithKeyboardRef = React.useRef(false);\n\n const state: MenuItemState = {\n hasSubmenu,\n disabled,\n persistOnClick,\n components: {\n root: 'div',\n icon: 'span',\n checkmark: 'span',\n submenuIndicator: 'span',\n content: 'span',\n secondaryContent: 'span',\n },\n root: getNativeElementProps(\n as,\n useARIAButtonProps(as, {\n role: 'menuitem',\n ...props,\n disabled: false,\n disabledFocusable: disabled,\n ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n onKeyDown: useEventCallback(event => {\n props.onKeyDown?.(event);\n if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n dismissedWithKeyboardRef.current = true;\n }\n }),\n onMouseEnter: useEventCallback(event => {\n innerRef.current?.focus();\n\n props.onMouseEnter?.(event);\n }),\n onClick: useEventCallback(event => {\n if (!hasSubmenu && !persistOnClick) {\n setOpen(event, {\n open: false,\n keyboard: dismissedWithKeyboardRef.current,\n bubble: true,\n type: 'menuItemClick',\n event,\n });\n dismissedWithKeyboardRef.current = false;\n }\n\n props.onClick?.(event);\n }),\n }),\n ),\n icon: resolveShorthand(props.icon, { required: hasIcons }),\n checkmark: resolveShorthand(props.checkmark, { required: hasCheckmarks }),\n submenuIndicator: resolveShorthand(props.submenuIndicator, {\n required: hasSubmenu,\n defaultProps: {\n children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n },\n }),\n content: resolveShorthand(props.content, {\n required: !!props.children,\n defaultProps: { children: props.children },\n }),\n secondaryContent: resolveShorthand(props.secondaryContent),\n };\n useCharacterSearch(state, innerRef);\n return state;\n};\n"]}