@yamada-ui/menu 1.3.12 → 1.3.13-dev-20240917033401

Sign up to get free protection for your applications and to get access to all the features.
Files changed (86) hide show
  1. package/dist/{chunk-5ZWRZF6M.mjs → chunk-DPC5A6DV.mjs} +2 -2
  2. package/dist/chunk-DPC5A6DV.mjs.map +1 -0
  3. package/dist/{chunk-AG6UJA7D.mjs → chunk-HVOHR2NQ.mjs} +2 -2
  4. package/dist/chunk-HVOHR2NQ.mjs.map +1 -0
  5. package/dist/{chunk-G4OMCC2Y.mjs → chunk-M4PPRRRC.mjs} +5 -3
  6. package/dist/chunk-M4PPRRRC.mjs.map +1 -0
  7. package/dist/chunk-NNSVX2GX.mjs +170 -0
  8. package/dist/chunk-NNSVX2GX.mjs.map +1 -0
  9. package/dist/{chunk-73KHS3JD.mjs → chunk-O5D4LR5P.mjs} +2 -2
  10. package/dist/chunk-O5D4LR5P.mjs.map +1 -0
  11. package/dist/chunk-OFCEMPQW.mjs +29 -0
  12. package/dist/chunk-OFCEMPQW.mjs.map +1 -0
  13. package/dist/{chunk-6YBKZRIZ.mjs → chunk-SI3WI4AI.mjs} +3 -3
  14. package/dist/chunk-SI3WI4AI.mjs.map +1 -0
  15. package/dist/chunk-T7CXLEBW.mjs +243 -0
  16. package/dist/chunk-T7CXLEBW.mjs.map +1 -0
  17. package/dist/chunk-ZUOFHOX6.mjs +43 -0
  18. package/dist/chunk-ZUOFHOX6.mjs.map +1 -0
  19. package/dist/chunk-ZV73JKM5.mjs +21 -0
  20. package/dist/chunk-ZV73JKM5.mjs.map +1 -0
  21. package/dist/context-menu-trigger.d.mts +2 -1
  22. package/dist/context-menu-trigger.d.ts +2 -1
  23. package/dist/context-menu-trigger.js +32 -17
  24. package/dist/context-menu-trigger.js.map +1 -1
  25. package/dist/context-menu-trigger.mjs +2 -2
  26. package/dist/context-menu.d.mts +4 -10
  27. package/dist/context-menu.d.ts +4 -10
  28. package/dist/context-menu.js +43 -264
  29. package/dist/context-menu.js.map +1 -1
  30. package/dist/context-menu.mjs +5 -5
  31. package/dist/index.d.mts +1 -2
  32. package/dist/index.d.ts +1 -2
  33. package/dist/index.js +259 -255
  34. package/dist/index.js.map +1 -1
  35. package/dist/index.mjs +16 -11
  36. package/dist/menu-button.d.mts +4 -3
  37. package/dist/menu-button.d.ts +4 -3
  38. package/dist/menu-button.js +55 -58
  39. package/dist/menu-button.js.map +1 -1
  40. package/dist/menu-button.mjs +3 -2
  41. package/dist/menu-context.d.mts +210 -0
  42. package/dist/menu-context.d.ts +210 -0
  43. package/dist/menu-context.js +77 -0
  44. package/dist/menu-context.js.map +1 -0
  45. package/dist/menu-context.mjs +30 -0
  46. package/dist/menu-context.mjs.map +1 -0
  47. package/dist/menu-divider.d.mts +3 -2
  48. package/dist/menu-divider.d.ts +3 -2
  49. package/dist/menu-divider.js +26 -21
  50. package/dist/menu-divider.js.map +1 -1
  51. package/dist/menu-divider.mjs +2 -2
  52. package/dist/menu-group.d.mts +3 -3
  53. package/dist/menu-group.d.ts +3 -3
  54. package/dist/menu-group.js +17 -14
  55. package/dist/menu-group.js.map +1 -1
  56. package/dist/menu-group.mjs +2 -2
  57. package/dist/menu-item.d.mts +14 -19
  58. package/dist/menu-item.d.ts +14 -19
  59. package/dist/menu-item.js +40 -45
  60. package/dist/menu-item.js.map +1 -1
  61. package/dist/menu-item.mjs +4 -7
  62. package/dist/menu-list.d.mts +2 -2
  63. package/dist/menu-list.d.ts +2 -2
  64. package/dist/menu-list.js +23 -20
  65. package/dist/menu-list.js.map +1 -1
  66. package/dist/menu-list.mjs +2 -2
  67. package/dist/menu-option-group.d.mts +6 -7
  68. package/dist/menu-option-group.d.ts +6 -7
  69. package/dist/menu-option-group.js +97 -100
  70. package/dist/menu-option-group.js.map +1 -1
  71. package/dist/menu-option-group.mjs +4 -3
  72. package/dist/menu.d.mts +7 -87
  73. package/dist/menu.d.ts +7 -87
  74. package/dist/menu.js +41 -274
  75. package/dist/menu.js.map +1 -1
  76. package/dist/menu.mjs +4 -13
  77. package/package.json +11 -11
  78. package/dist/chunk-5ZWRZF6M.mjs.map +0 -1
  79. package/dist/chunk-6IPLI42Z.mjs +0 -447
  80. package/dist/chunk-6IPLI42Z.mjs.map +0 -1
  81. package/dist/chunk-6YBKZRIZ.mjs.map +0 -1
  82. package/dist/chunk-73KHS3JD.mjs.map +0 -1
  83. package/dist/chunk-AG6UJA7D.mjs.map +0 -1
  84. package/dist/chunk-G4OMCC2Y.mjs.map +0 -1
  85. package/dist/chunk-ZOUBZWDN.mjs +0 -27
  86. package/dist/chunk-ZOUBZWDN.mjs.map +0 -1
package/dist/menu.d.ts CHANGED
@@ -1,97 +1,17 @@
1
- import * as react from 'react';
2
- import { FC, Dispatch, SetStateAction, RefObject, MutableRefObject } from 'react';
3
- import * as _yamada_ui_use_descendant from '@yamada-ui/use-descendant';
4
- import { ThemeProps, CSSUIObject } from '@yamada-ui/core';
1
+ import { ThemeProps } from '@yamada-ui/core';
5
2
  import { PopoverProps } from '@yamada-ui/popover';
3
+ import { FC } from 'react';
6
4
 
7
- declare const useMenuDescendantsContext: () => {
8
- register: (nodeOrOptions: HTMLElement | {
9
- disabled?: boolean;
10
- id?: string;
11
- filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined;
12
- } | null) => void | ((node: HTMLElement | null) => void);
13
- unregister: (node: HTMLElement) => void;
14
- destroy: () => void;
15
- count: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => number;
16
- values: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}>[];
17
- value: (index: number, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
18
- indexOf: (node: HTMLElement | null) => number;
19
- firstValue: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
20
- lastValue: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
21
- prevValue: (index: number, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined, loop?: boolean) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
22
- nextValue: (index: number, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined, loop?: boolean) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
23
- enabledCount: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => number;
24
- enabledValues: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}>[];
25
- enabledValue: (index: number, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
26
- enabledIndexOf: (node: HTMLElement | null, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => number;
27
- enabledFirstValue: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
28
- enabledLastValue: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
29
- enabledPrevValue: (index: number, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined, loop?: boolean) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
30
- enabledNextValue: (index: number, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined, loop?: boolean) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
31
- };
32
- declare const useMenuDescendant: (options?: {
33
- disabled?: boolean;
34
- id?: string;
35
- filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined;
36
- } | undefined) => {
37
- descendants: {
38
- register: (nodeOrOptions: HTMLElement | _yamada_ui_use_descendant.DescendantOptions<HTMLElement, Record<string, any>> | null) => void | ((node: HTMLElement | null) => void);
39
- unregister: (node: HTMLElement) => void;
40
- destroy: () => void;
41
- count: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, Record<string, any>> | undefined) => number;
42
- values: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, Record<string, any>> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, Record<string, any>>[];
43
- value: (index: number, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, Record<string, any>> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, Record<string, any>> | undefined;
44
- indexOf: (node: HTMLElement | null) => number;
45
- firstValue: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, Record<string, any>> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, Record<string, any>> | undefined;
46
- lastValue: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, Record<string, any>> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, Record<string, any>> | undefined;
47
- prevValue: (index: number, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, Record<string, any>> | undefined, loop?: boolean) => _yamada_ui_use_descendant.Descendant<HTMLElement, Record<string, any>> | undefined;
48
- nextValue: (index: number, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, Record<string, any>> | undefined, loop?: boolean) => _yamada_ui_use_descendant.Descendant<HTMLElement, Record<string, any>> | undefined;
49
- enabledCount: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, Record<string, any>> | undefined) => number;
50
- enabledValues: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, Record<string, any>> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, Record<string, any>>[];
51
- enabledValue: (index: number, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, Record<string, any>> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, Record<string, any>> | undefined;
52
- enabledIndexOf: (node: HTMLElement | null, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, Record<string, any>> | undefined) => number;
53
- enabledFirstValue: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, Record<string, any>> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, Record<string, any>> | undefined;
54
- enabledLastValue: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, Record<string, any>> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, Record<string, any>> | undefined;
55
- enabledPrevValue: (index: number, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, Record<string, any>> | undefined, loop?: boolean) => _yamada_ui_use_descendant.Descendant<HTMLElement, Record<string, any>> | undefined;
56
- enabledNextValue: (index: number, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, Record<string, any>> | undefined, loop?: boolean) => _yamada_ui_use_descendant.Descendant<HTMLElement, Record<string, any>> | undefined;
57
- };
58
- index: number;
59
- enabledIndex: number;
60
- register: (node: HTMLElement | null) => void;
61
- };
62
-
63
- type MenuContext = MenuOptions & {
64
- isOpen: boolean;
65
- onOpen: () => void;
66
- onClose: () => void;
67
- onUpstreamClose?: () => void;
68
- onFocusFirstItem: () => void;
69
- onFocusLastItem: () => void;
70
- focusedIndex: number;
71
- setFocusedIndex: Dispatch<SetStateAction<number>>;
72
- menuRef: RefObject<HTMLDivElement>;
73
- requestAnimationFrameId: MutableRefObject<number | null>;
74
- isNested: boolean;
75
- styles: Record<string, CSSUIObject>;
76
- };
77
- declare const useMenu: () => MenuContext;
78
- type UpstreamMenuContext = {
79
- relatedRef: RefObject<HTMLElement>;
80
- onDownstreamCloseMapRef: MutableRefObject<Map<string, () => void>>;
81
- onUpstreamClose: () => void;
82
- };
83
- declare const UpstreamMenuProvider: react.Provider<UpstreamMenuContext>;
84
- declare const useUpstreamMenu: () => UpstreamMenuContext;
85
-
86
- type MenuOptions = {
5
+ interface MenuOptions {
87
6
  /**
88
7
  * If `true`, the list element will be closed when value is selected.
89
8
  *
90
9
  * @default true
91
10
  */
92
11
  closeOnSelect?: boolean;
93
- };
94
- type MenuProps = ThemeProps<"Menu"> & Omit<PopoverProps, "closeOnButton" | "relatedRef"> & MenuOptions;
12
+ }
13
+ interface MenuProps extends ThemeProps<"Menu">, Omit<PopoverProps, "closeOnButton" | "relatedRef">, MenuOptions {
14
+ }
95
15
  /**
96
16
  * `Menu` is a component that displays a common dropdown menu.
97
17
  *
@@ -99,4 +19,4 @@ type MenuProps = ThemeProps<"Menu"> & Omit<PopoverProps, "closeOnButton" | "rela
99
19
  */
100
20
  declare const Menu: FC<MenuProps>;
101
21
 
102
- export { Menu, type MenuProps, UpstreamMenuProvider, useMenu, useMenuDescendant, useMenuDescendantsContext, useUpstreamMenu };
22
+ export { Menu, type MenuOptions, type MenuProps };
package/dist/menu.js CHANGED
@@ -21,275 +21,47 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
21
21
  // src/menu.tsx
22
22
  var menu_exports = {};
23
23
  __export(menu_exports, {
24
- Menu: () => Menu,
25
- UpstreamMenuProvider: () => UpstreamMenuProvider,
26
- useMenu: () => useMenu,
27
- useMenuDescendant: () => useMenuDescendant,
28
- useMenuDescendantsContext: () => useMenuDescendantsContext,
29
- useUpstreamMenu: () => useUpstreamMenu
24
+ Menu: () => Menu
30
25
  });
31
26
  module.exports = __toCommonJS(menu_exports);
32
- var import_core3 = require("@yamada-ui/core");
27
+ var import_core = require("@yamada-ui/core");
33
28
  var import_popover = require("@yamada-ui/popover");
34
- var import_use_descendant = require("@yamada-ui/use-descendant");
35
29
  var import_use_disclosure = require("@yamada-ui/use-disclosure");
36
- var import_utils3 = require("@yamada-ui/utils");
37
- var import_react2 = require("react");
38
-
39
- // src/context-menu.tsx
40
- var import_core = require("@yamada-ui/core");
41
- var import_utils = require("@yamada-ui/utils");
42
- var import_jsx_runtime = require("react/jsx-runtime");
43
- var [ContextMenuProvider, useContextMenu] = (0, import_utils.createContext)(
44
- {
45
- strict: false,
46
- name: "ContextMenuContext"
47
- }
48
- );
49
-
50
- // src/menu-item.tsx
51
- var import_core2 = require("@yamada-ui/core");
52
- var import_use_clickable = require("@yamada-ui/use-clickable");
53
30
  var import_utils2 = require("@yamada-ui/utils");
54
31
  var import_react = require("react");
55
- var import_jsx_runtime2 = require("react/jsx-runtime");
56
- var [UpstreamMenuItemProvider, useUpstreamMenuItem] = (0, import_utils2.createContext)({
57
- strict: false,
58
- name: "UpstreamMenuItemContext"
59
- });
60
- var isTargetMenuItem = (target) => {
61
- var _a;
62
- return (0, import_utils2.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menuitem"));
63
- };
64
- var MenuItem = (0, import_core2.forwardRef)(
65
- ({
66
- className,
67
- isDisabled,
68
- isFocusable,
69
- closeOnSelect: customCloseOnSelect,
70
- icon,
71
- command,
72
- children,
73
- ...props
74
- }, ref) => {
75
- var _a;
76
- const {
77
- focusedIndex,
78
- setFocusedIndex,
79
- isOpen,
80
- onClose,
81
- onUpstreamClose,
82
- closeOnSelect: generalCloseOnSelect,
83
- menuRef,
84
- requestAnimationFrameId,
85
- isNested,
86
- styles
87
- } = useMenu();
88
- const { onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
89
- const trulyDisabled = isDisabled && !isFocusable;
90
- const itemRef = (0, import_react.useRef)(null);
91
- const hasDownstreamRef = (0, import_react.useRef)(false);
92
- const onKeyDownRef = (0, import_react.useRef)(
93
- () => void 0
94
- );
95
- const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
96
- const [isDownstreamOpen, setDownstreamOpen] = (0, import_react.useState)(false);
97
- const isFocused = index === focusedIndex;
98
- const onMouseOver = (0, import_react.useCallback)(() => {
99
- if (isDisabled) return;
100
- setFocusedIndex(index);
101
- }, [index, isDisabled, setFocusedIndex]);
102
- const onMouseLeave = (0, import_react.useCallback)(() => {
103
- if (isDisabled) return;
104
- setFocusedIndex(-1);
105
- }, [setFocusedIndex, isDisabled]);
106
- const onClick = (0, import_react.useCallback)(
107
- (ev) => {
108
- if (!isTargetMenuItem(ev.currentTarget)) return;
109
- const hasDownstream = hasDownstreamRef.current;
110
- if (customCloseOnSelect != null ? customCloseOnSelect : !hasDownstream && generalCloseOnSelect) {
111
- onClose();
112
- onUpstreamClose == null ? void 0 : onUpstreamClose();
113
- }
114
- },
115
- [customCloseOnSelect, generalCloseOnSelect, onClose, onUpstreamClose]
116
- );
117
- const onFocus = (0, import_react.useCallback)(() => {
118
- setFocusedIndex(index);
119
- }, [setFocusedIndex, index]);
120
- const onRestoreFocus = (0, import_react.useCallback)(() => {
121
- var _a2;
122
- (_a2 = itemRef.current) == null ? void 0 : _a2.focus();
123
- setFocusedIndex(index);
124
- }, [setFocusedIndex, index]);
125
- const onKeyDown = (0, import_react.useCallback)(
126
- (ev) => {
127
- const actions = {
128
- ArrowLeft: isNested ? (0, import_utils2.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
129
- };
130
- const action = actions[ev.key];
131
- if (!action) return;
132
- ev.preventDefault();
133
- ev.stopPropagation();
134
- action();
135
- },
136
- [onUpstreamRestoreFocus, onClose, isNested]
137
- );
138
- const rest = (0, import_use_clickable.useClickable)({
139
- focusOnClick: false,
140
- ...props,
141
- onClick: (0, import_utils2.handlerAll)(props.onClick, onClick),
142
- onFocus: (0, import_utils2.handlerAll)(props.onFocus, onFocus),
143
- onMouseOver: (0, import_utils2.handlerAll)(props.onMouseOver, onMouseOver),
144
- onMouseLeave: (0, import_utils2.handlerAll)(props.onMouseLeave, onMouseLeave),
145
- onKeyDown: (0, import_utils2.handlerAll)(props.onKeyDown, onKeyDown, onKeyDownRef.current),
146
- ref: (0, import_utils2.mergeRefs)(register, itemRef, ref),
147
- isDisabled,
148
- isFocusable
149
- });
150
- (0, import_utils2.useUpdateEffect)(() => {
151
- if (!isOpen) return;
152
- const id = requestAnimationFrameId.current;
153
- if (isFocused && !trulyDisabled && itemRef.current) {
154
- if (id) cancelAnimationFrame(id);
155
- requestAnimationFrameId.current = requestAnimationFrame(() => {
156
- var _a2;
157
- (_a2 = itemRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
158
- requestAnimationFrameId.current = null;
159
- });
160
- } else if (menuRef.current && !(0, import_utils2.isActiveElement)(menuRef.current)) {
161
- menuRef.current.focus({ preventScroll: true });
162
- }
163
- return () => {
164
- if (id) cancelAnimationFrame(id);
165
- };
166
- }, [isFocused, trulyDisabled, menuRef, isOpen]);
167
- children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: { flex: 1 }, children }) : children;
168
- const css = {
169
- textDecoration: "none",
170
- color: "inherit",
171
- userSelect: "none",
172
- display: "flex",
173
- width: "100%",
174
- alignItems: "center",
175
- textAlign: "start",
176
- flex: "0 0 auto",
177
- outline: 0,
178
- gap: "0.75rem",
179
- ...styles.item
180
- };
181
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
182
- UpstreamMenuItemProvider,
183
- {
184
- value: {
185
- onKeyDownRef,
186
- onUpstreamRestoreFocus: onRestoreFocus,
187
- setDownstreamOpen,
188
- hasDownstreamRef
189
- },
190
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
191
- import_core2.ui.li,
192
- {
193
- ...rest,
194
- ...isDownstreamOpen ? { "data-active": "" } : {},
195
- role: "menuitem",
196
- tabIndex: isFocused ? 0 : -1,
197
- className: (0, import_utils2.cx)("ui-menu__item", className),
198
- __css: css,
199
- children: [
200
- icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, { children: icon }) : null,
201
- children,
202
- command ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuCommand, { children: command }) : null
203
- ]
204
- }
205
- )
206
- }
207
- );
208
- }
209
- );
210
- var MenuOptionItem = (0, import_core2.forwardRef)(
211
- ({ className, icon, isChecked, closeOnSelect = false, children, ...rest }, ref) => {
212
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
213
- MenuItem,
214
- {
215
- ref,
216
- className: (0, import_utils2.cx)("ui-menu__item--option", className),
217
- "aria-checked": (0, import_utils2.ariaAttr)(isChecked),
218
- closeOnSelect,
219
- ...rest,
220
- children: [
221
- icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, { opacity: isChecked ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, {}) }) : null,
222
- children
223
- ]
224
- }
225
- );
226
- }
227
- );
228
- var MenuIcon = (0, import_core2.forwardRef)(
229
- ({ className, ...rest }, ref) => {
230
- const { styles } = useMenu();
231
- const css = {
232
- flexShrink: 0,
233
- display: "inline-flex",
234
- justifyContent: "center",
235
- alignItems: "center",
236
- fontSize: "0.85em",
237
- ...styles.icon
238
- };
239
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
240
- import_core2.ui.span,
241
- {
242
- ref,
243
- className: (0, import_utils2.cx)("ui-menu__item__icon", className),
244
- __css: css,
245
- ...rest
246
- }
247
- );
248
- }
249
- );
250
- var MenuCommand = (0, import_core2.forwardRef)(
251
- ({ className, ...rest }, ref) => {
252
- const { styles } = useMenu();
253
- const css = { ...styles.command };
254
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
255
- import_core2.ui.span,
256
- {
257
- ref,
258
- className: (0, import_utils2.cx)("ui-menu__item__command", className),
259
- __css: css,
260
- ...rest
261
- }
262
- );
263
- }
264
- );
265
- var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
266
- "polygon",
267
- {
268
- fill: "currentColor",
269
- points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
270
- }
271
- ) });
272
32
 
273
- // src/menu.tsx
274
- var import_jsx_runtime3 = require("react/jsx-runtime");
33
+ // src/menu-context.ts
34
+ var import_use_descendant = require("@yamada-ui/use-descendant");
35
+ var import_utils = require("@yamada-ui/utils");
275
36
  var {
276
37
  DescendantsContextProvider,
277
38
  useDescendantsContext: useMenuDescendantsContext,
278
39
  useDescendants,
279
40
  useDescendant: useMenuDescendant
280
41
  } = (0, import_use_descendant.createDescendant)();
281
- var [MenuProvider, useMenu] = (0, import_utils3.createContext)({
42
+ var [MenuProvider, useMenu] = (0, import_utils.createContext)({
282
43
  name: "MenuContext",
283
44
  errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
284
45
  });
285
- var [UpstreamMenuProvider, useUpstreamMenu] = (0, import_utils3.createContext)({
46
+ var [ContextMenuProvider, useContextMenu] = (0, import_utils.createContext)({
47
+ strict: false,
48
+ name: "ContextMenuContext"
49
+ });
50
+ var [UpstreamMenuProvider, useUpstreamMenu] = (0, import_utils.createContext)({
286
51
  strict: false,
287
52
  name: "UpstreamMenuContext"
288
53
  });
54
+ var [UpstreamMenuItemProvider, useUpstreamMenuItem] = (0, import_utils.createContext)({
55
+ strict: false,
56
+ name: "UpstreamMenuItemContext"
57
+ });
58
+
59
+ // src/menu.tsx
60
+ var import_jsx_runtime = require("react/jsx-runtime");
289
61
  var Menu = (props) => {
290
62
  var _a, _b, _c;
291
63
  const { styles: contextMenuStyles } = (_a = useContextMenu()) != null ? _a : {};
292
- const [styles, mergedProps] = (0, import_core3.useMultiComponentStyle)("Menu", props, {
64
+ const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Menu", props, {
293
65
  isProcessSkip: !!contextMenuStyles,
294
66
  styles: contextMenuStyles
295
67
  });
@@ -303,7 +75,7 @@ var Menu = (props) => {
303
75
  onOpen: onOpenProp,
304
76
  onClose: onCloseProp,
305
77
  ...rest
306
- } = (0, import_core3.omitThemeProps)(mergedProps);
78
+ } = (0, import_core.omitThemeProps)(mergedProps);
307
79
  const { relatedRef, onUpstreamClose, onDownstreamCloseMapRef } = (_b = useUpstreamMenu()) != null ? _b : {};
308
80
  const { setDownstreamOpen, hasDownstreamRef } = (_c = useUpstreamMenuItem()) != null ? _c : {};
309
81
  const isNested = !!relatedRef;
@@ -315,12 +87,12 @@ var Menu = (props) => {
315
87
  placement != null ? placement : placement = "bottom-start";
316
88
  }
317
89
  const descendants = useDescendants();
318
- const [focusedIndex, setFocusedIndex] = (0, import_react2.useState)(-1);
319
- const menuRef = (0, import_react2.useRef)(null);
320
- const timeoutIds = (0, import_react2.useRef)(/* @__PURE__ */ new Set([]));
321
- const requestAnimationFrameId = (0, import_react2.useRef)(null);
322
- const onCloseMapRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
323
- const onFocusMenu = (0, import_react2.useCallback)(() => {
90
+ const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
91
+ const menuRef = (0, import_react.useRef)(null);
92
+ const timeoutIds = (0, import_react.useRef)(/* @__PURE__ */ new Set([]));
93
+ const requestAnimationFrameId = (0, import_react.useRef)(null);
94
+ const onCloseMapRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
95
+ const onFocusMenu = (0, import_react.useCallback)(() => {
324
96
  requestAnimationFrame(
325
97
  () => {
326
98
  var _a2;
@@ -328,7 +100,7 @@ var Menu = (props) => {
328
100
  }
329
101
  );
330
102
  }, []);
331
- const onFocusFirstItem = (0, import_react2.useCallback)(() => {
103
+ const onFocusFirstItem = (0, import_react.useCallback)(() => {
332
104
  const id2 = setTimeout(() => {
333
105
  if (initialFocusRef) return;
334
106
  const first = descendants.enabledFirstValue();
@@ -336,7 +108,7 @@ var Menu = (props) => {
336
108
  });
337
109
  timeoutIds.current.add(id2);
338
110
  }, [descendants, initialFocusRef]);
339
- const onFocusLastItem = (0, import_react2.useCallback)(() => {
111
+ const onFocusLastItem = (0, import_react.useCallback)(() => {
340
112
  const id2 = setTimeout(() => {
341
113
  if (initialFocusRef) return;
342
114
  const last = descendants.enabledLastValue();
@@ -344,54 +116,54 @@ var Menu = (props) => {
344
116
  });
345
117
  timeoutIds.current.add(id2);
346
118
  }, [descendants, initialFocusRef]);
347
- const onOpenInternal = (0, import_react2.useCallback)(() => {
119
+ const onOpenInternal = (0, import_react.useCallback)(() => {
348
120
  onOpenProp == null ? void 0 : onOpenProp();
349
121
  if (!isNested) onFocusMenu();
350
122
  }, [onOpenProp, isNested, onFocusMenu]);
351
- const onCloseInternal = (0, import_react2.useCallback)(() => {
123
+ const onCloseInternal = (0, import_react.useCallback)(() => {
352
124
  onCloseProp == null ? void 0 : onCloseProp();
353
125
  for (const onClose2 of onCloseMapRef.current.values()) {
354
126
  onClose2();
355
127
  }
356
128
  }, [onCloseProp]);
357
- const id = (0, import_react2.useId)();
129
+ const id = (0, import_react.useId)();
358
130
  const { isOpen, onOpen, onClose } = (0, import_use_disclosure.useDisclosure)({
359
131
  ...props,
360
132
  onOpen: onOpenInternal,
361
133
  onClose: onCloseInternal
362
134
  });
363
- (0, import_react2.useEffect)(() => {
135
+ (0, import_react.useEffect)(() => {
364
136
  const onCloseMap = onDownstreamCloseMapRef == null ? void 0 : onDownstreamCloseMapRef.current;
365
137
  onCloseMap == null ? void 0 : onCloseMap.set(id, onClose);
366
138
  return () => {
367
139
  onCloseMap == null ? void 0 : onCloseMap.delete(id);
368
140
  };
369
141
  }, [id, onClose, onDownstreamCloseMapRef]);
370
- (0, import_react2.useEffect)(() => {
142
+ (0, import_react.useEffect)(() => {
371
143
  if (setDownstreamOpen) setDownstreamOpen(isOpen);
372
144
  }, [setDownstreamOpen, isOpen]);
373
- (0, import_react2.useEffect)(() => {
145
+ (0, import_react.useEffect)(() => {
374
146
  if (hasDownstreamRef) hasDownstreamRef.current = true;
375
147
  return () => {
376
148
  if (hasDownstreamRef) hasDownstreamRef.current = false;
377
149
  };
378
150
  });
379
- (0, import_utils3.useUpdateEffect)(() => {
151
+ (0, import_utils2.useUpdateEffect)(() => {
380
152
  if (!isOpen) setFocusedIndex(-1);
381
153
  }, [isOpen]);
382
- (0, import_utils3.useUnmountEffect)(() => {
154
+ (0, import_utils2.useUnmountEffect)(() => {
383
155
  timeoutIds.current.forEach((id2) => clearTimeout(id2));
384
156
  timeoutIds.current.clear();
385
157
  });
386
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
158
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
387
159
  UpstreamMenuProvider,
388
160
  {
389
161
  value: {
390
162
  relatedRef: menuRef,
391
163
  onDownstreamCloseMapRef: onCloseMapRef,
392
- onUpstreamClose: (0, import_utils3.funcAll)(onUpstreamClose, onClose)
164
+ onUpstreamClose: (0, import_utils2.funcAll)(onUpstreamClose, onClose)
393
165
  },
394
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
166
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
395
167
  MenuProvider,
396
168
  {
397
169
  value: {
@@ -409,7 +181,7 @@ var Menu = (props) => {
409
181
  isNested,
410
182
  styles
411
183
  },
412
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
184
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
413
185
  import_popover.Popover,
414
186
  {
415
187
  ...{
@@ -435,11 +207,6 @@ var Menu = (props) => {
435
207
  };
436
208
  // Annotate the CommonJS export names for ESM import in node:
437
209
  0 && (module.exports = {
438
- Menu,
439
- UpstreamMenuProvider,
440
- useMenu,
441
- useMenuDescendant,
442
- useMenuDescendantsContext,
443
- useUpstreamMenu
210
+ Menu
444
211
  });
445
212
  //# sourceMappingURL=menu.js.map
package/dist/menu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/menu.tsx","../src/context-menu.tsx","../src/menu-item.tsx"],"sourcesContent":["import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport { Popover } from \"@yamada-ui/popover\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n createContext,\n funcAll,\n useUnmountEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type {\n Dispatch,\n FC,\n MutableRefObject,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { useContextMenu } from \"./context-menu\"\nimport { useUpstreamMenuItem } from \"./menu-item\"\n\nconst {\n DescendantsContextProvider,\n useDescendantsContext: useMenuDescendantsContext,\n useDescendants,\n useDescendant: useMenuDescendant,\n} = createDescendant<HTMLElement>()\n\nexport { useMenuDescendantsContext, useMenuDescendant }\n\ntype MenuContext = MenuOptions & {\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onUpstreamClose?: () => void\n onFocusFirstItem: () => void\n onFocusLastItem: () => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n menuRef: RefObject<HTMLDivElement>\n requestAnimationFrameId: MutableRefObject<number | null>\n isNested: boolean\n styles: Record<string, CSSUIObject>\n}\n\nconst [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\ntype UpstreamMenuContext = {\n relatedRef: RefObject<HTMLElement>\n onDownstreamCloseMapRef: MutableRefObject<Map<string, () => void>>\n onUpstreamClose: () => void\n}\n\nexport const [UpstreamMenuProvider, useUpstreamMenu] =\n createContext<UpstreamMenuContext>({\n strict: false,\n name: \"UpstreamMenuContext\",\n })\n\nexport { useMenu }\n\ntype MenuOptions = {\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n}\n\nexport type MenuProps = ThemeProps<\"Menu\"> &\n Omit<PopoverProps, \"closeOnButton\" | \"relatedRef\"> &\n MenuOptions\n\n/**\n * `Menu` is a component that displays a common dropdown menu.\n *\n * @see Docs https://yamada-ui.com/components/overlay/menu\n */\nexport const Menu: FC<MenuProps> = (props) => {\n const { styles: contextMenuStyles } = useContextMenu() ?? {}\n const [styles, mergedProps] = useMultiComponentStyle(\"Menu\", props, {\n isProcessSkip: !!contextMenuStyles,\n styles: contextMenuStyles,\n })\n let {\n initialFocusRef,\n closeOnSelect = true,\n closeOnBlur,\n placement,\n duration = 0.2,\n offset,\n onOpen: onOpenProp,\n onClose: onCloseProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const { relatedRef, onUpstreamClose, onDownstreamCloseMapRef } =\n useUpstreamMenu() ?? {}\n const { setDownstreamOpen, hasDownstreamRef } = useUpstreamMenuItem() ?? {}\n const isNested = !!relatedRef\n\n if (isNested) {\n placement ??= \"right-start\"\n offset ??= [-8, 8]\n closeOnBlur ??= false\n } else {\n placement ??= \"bottom-start\"\n }\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n const menuRef = useRef<HTMLDivElement>(null)\n const timeoutIds = useRef<Set<any>>(new Set([]))\n const requestAnimationFrameId = useRef<number | null>(null)\n const onCloseMapRef = useRef<Map<string, () => void>>(new Map())\n\n const onFocusMenu = useCallback(() => {\n requestAnimationFrame(() =>\n menuRef.current?.focus({ preventScroll: false }),\n )\n }, [])\n\n const onFocusFirstItem = useCallback(() => {\n const id = setTimeout(() => {\n if (initialFocusRef) return\n\n const first = descendants.enabledFirstValue()\n\n if (first) setFocusedIndex(first.index)\n })\n\n timeoutIds.current.add(id)\n }, [descendants, initialFocusRef])\n\n const onFocusLastItem = useCallback(() => {\n const id = setTimeout(() => {\n if (initialFocusRef) return\n\n const last = descendants.enabledLastValue()\n\n if (last) setFocusedIndex(last.index)\n })\n\n timeoutIds.current.add(id)\n }, [descendants, initialFocusRef])\n\n const onOpenInternal = useCallback(() => {\n onOpenProp?.()\n\n if (!isNested) onFocusMenu()\n }, [onOpenProp, isNested, onFocusMenu])\n\n const onCloseInternal = useCallback(() => {\n onCloseProp?.()\n\n for (const onClose of onCloseMapRef.current.values()) {\n onClose()\n }\n }, [onCloseProp])\n\n const id = useId()\n const { isOpen, onOpen, onClose } = useDisclosure({\n ...props,\n onOpen: onOpenInternal,\n onClose: onCloseInternal,\n })\n\n useEffect(() => {\n const onCloseMap = onDownstreamCloseMapRef?.current\n\n onCloseMap?.set(id, onClose)\n\n return () => {\n onCloseMap?.delete(id)\n }\n }, [id, onClose, onDownstreamCloseMapRef])\n\n useEffect(() => {\n if (setDownstreamOpen) setDownstreamOpen(isOpen)\n }, [setDownstreamOpen, isOpen])\n\n useEffect(() => {\n if (hasDownstreamRef) hasDownstreamRef.current = true\n\n return () => {\n if (hasDownstreamRef) hasDownstreamRef.current = false\n }\n })\n\n useUpdateEffect(() => {\n if (!isOpen) setFocusedIndex(-1)\n }, [isOpen])\n\n useUnmountEffect(() => {\n timeoutIds.current.forEach((id) => clearTimeout(id))\n timeoutIds.current.clear()\n })\n\n return (\n <DescendantsContextProvider value={descendants}>\n <UpstreamMenuProvider\n value={{\n relatedRef: menuRef,\n onDownstreamCloseMapRef: onCloseMapRef,\n onUpstreamClose: funcAll(onUpstreamClose, onClose),\n }}\n >\n <MenuProvider\n value={{\n isOpen,\n onOpen,\n onClose,\n onUpstreamClose,\n onFocusFirstItem,\n onFocusLastItem,\n closeOnSelect,\n focusedIndex,\n setFocusedIndex,\n menuRef,\n requestAnimationFrameId,\n isNested,\n styles,\n }}\n >\n <Popover\n {...{\n trigger: isNested ? \"hover\" : \"click\",\n ...rest,\n isOpen,\n onOpen,\n onClose,\n placement,\n offset,\n duration,\n initialFocusRef,\n relatedRef,\n closeOnButton: false,\n closeOnBlur,\n }}\n />\n </MenuProvider>\n </UpstreamMenuProvider>\n </DescendantsContextProvider>\n )\n}\n","import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\nimport type { MenuProps } from \"./menu\"\nimport { Menu } from \"./menu\"\n\ntype ContextMenuContext = {\n styles: Record<string, CSSUIObject>\n}\n\nconst [ContextMenuProvider, useContextMenu] = createContext<ContextMenuContext>(\n {\n strict: false,\n name: \"ContextMenuContext\",\n },\n)\n\nexport { useContextMenu }\n\ntype ContextMenuOptions = {}\n\nexport type ContextMenuProps = Omit<MenuProps, \"trigger\"> &\n ThemeProps<\"ContextMenu\"> &\n ContextMenuOptions\n\n/**\n * `ContextMenu` is triggered by a right click and displays a menu at the pointer's position.\n *\n * @see Docs https://yamada-ui.com/components/overlay/context-menu\n */\nexport const ContextMenu: FC<ContextMenuProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"ContextMenu\", props)\n const { ...rest } = omitThemeProps(mergedProps)\n\n return (\n <ContextMenuProvider value={{ styles }}>\n <Menu trigger=\"contextmenu\" {...rest} />\n </ContextMenuProvider>\n )\n}\n","import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport {\n ariaAttr,\n createContext,\n cx,\n funcAll,\n handlerAll,\n isActiveElement,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type {\n Dispatch,\n FC,\n KeyboardEvent,\n KeyboardEventHandler,\n MouseEvent,\n MutableRefObject,\n ReactElement,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\nimport { useMenu, useMenuDescendant } from \"./menu\"\n\ntype UpstreamMenuItemContext = {\n onUpstreamRestoreFocus: () => void\n onKeyDownRef: RefObject<KeyboardEventHandler<HTMLLIElement>>\n setDownstreamOpen: Dispatch<SetStateAction<boolean>>\n hasDownstreamRef: MutableRefObject<boolean>\n}\n\nexport const [UpstreamMenuItemProvider, useUpstreamMenuItem] =\n createContext<UpstreamMenuItemContext>({\n strict: false,\n name: \"UpstreamMenuItemContext\",\n })\n\nconst isTargetMenuItem = (target: EventTarget | null) => {\n return (\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"menuitem\")\n )\n}\n\ntype MenuItemOptions = {\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the menu item will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n /**\n * The menu item icon to use.\n */\n icon?: ReactElement\n /**\n * Right-aligned label text content, useful for displaying hotkeys.\n */\n command?: string\n}\n\nexport type MenuItemProps = HTMLUIProps<\"li\"> & MenuItemOptions\n\nexport const MenuItem = forwardRef<MenuItemProps, \"li\">(\n (\n {\n className,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n icon,\n command,\n children,\n ...props\n },\n ref,\n ) => {\n const {\n focusedIndex,\n setFocusedIndex,\n isOpen,\n onClose,\n onUpstreamClose,\n closeOnSelect: generalCloseOnSelect,\n menuRef,\n requestAnimationFrameId,\n isNested,\n styles,\n } = useMenu()\n const { onUpstreamRestoreFocus } = useUpstreamMenuItem() ?? {}\n\n const trulyDisabled = isDisabled && !isFocusable\n\n const itemRef = useRef<HTMLLIElement>(null)\n const hasDownstreamRef = useRef<boolean>(false)\n const onKeyDownRef = useRef<KeyboardEventHandler<HTMLLIElement>>(\n () => void 0,\n )\n const { index, register } = useMenuDescendant({ disabled: trulyDisabled })\n const [isDownstreamOpen, setDownstreamOpen] = useState<boolean>(false)\n\n const isFocused = index === focusedIndex\n\n const onMouseOver = useCallback(() => {\n if (isDisabled) return\n\n setFocusedIndex(index)\n }, [index, isDisabled, setFocusedIndex])\n\n const onMouseLeave = useCallback(() => {\n if (isDisabled) return\n\n setFocusedIndex(-1)\n }, [setFocusedIndex, isDisabled])\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLLIElement>) => {\n if (!isTargetMenuItem(ev.currentTarget)) return\n\n const hasDownstream = hasDownstreamRef.current\n\n if (customCloseOnSelect ?? (!hasDownstream && generalCloseOnSelect)) {\n onClose()\n onUpstreamClose?.()\n }\n },\n [customCloseOnSelect, generalCloseOnSelect, onClose, onUpstreamClose],\n )\n\n const onFocus = useCallback(() => {\n setFocusedIndex(index)\n }, [setFocusedIndex, index])\n\n const onRestoreFocus = useCallback(() => {\n itemRef.current?.focus()\n\n setFocusedIndex(index)\n }, [setFocusedIndex, index])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLLIElement>) => {\n const actions: Record<string, Function | undefined> = {\n ArrowLeft: isNested\n ? funcAll(onUpstreamRestoreFocus, onClose)\n : undefined,\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n ev.stopPropagation()\n\n action()\n },\n [onUpstreamRestoreFocus, onClose, isNested],\n )\n\n const rest = useClickable<HTMLLIElement>({\n focusOnClick: false,\n ...props,\n onClick: handlerAll(props.onClick, onClick),\n onFocus: handlerAll(props.onFocus, onFocus),\n onMouseOver: handlerAll(props.onMouseOver, onMouseOver),\n onMouseLeave: handlerAll(props.onMouseLeave, onMouseLeave),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown, onKeyDownRef.current),\n ref: mergeRefs(register, itemRef, ref),\n isDisabled,\n isFocusable,\n })\n\n useUpdateEffect(() => {\n if (!isOpen) return\n\n const id = requestAnimationFrameId.current\n\n if (isFocused && !trulyDisabled && itemRef.current) {\n if (id) cancelAnimationFrame(id)\n\n requestAnimationFrameId.current = requestAnimationFrame(() => {\n itemRef.current?.focus({ preventScroll: true })\n\n requestAnimationFrameId.current = null\n })\n } else if (menuRef.current && !isActiveElement(menuRef.current)) {\n menuRef.current.focus({ preventScroll: true })\n }\n\n return () => {\n if (id) cancelAnimationFrame(id)\n }\n }, [isFocused, trulyDisabled, menuRef, isOpen])\n\n children =\n icon || command ? (\n <ui.span style={{ flex: 1 }}>{children}</ui.span>\n ) : (\n children\n )\n\n const css: CSSUIObject = {\n textDecoration: \"none\",\n color: \"inherit\",\n userSelect: \"none\",\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n textAlign: \"start\",\n flex: \"0 0 auto\",\n outline: 0,\n gap: \"0.75rem\",\n ...styles.item,\n }\n\n return (\n <UpstreamMenuItemProvider\n value={{\n onKeyDownRef,\n onUpstreamRestoreFocus: onRestoreFocus,\n setDownstreamOpen,\n hasDownstreamRef,\n }}\n >\n <ui.li\n {...rest}\n {...(isDownstreamOpen ? { \"data-active\": \"\" } : {})}\n role=\"menuitem\"\n tabIndex={isFocused ? 0 : -1}\n className={cx(\"ui-menu__item\", className)}\n __css={css}\n >\n {icon ? <MenuIcon>{icon}</MenuIcon> : null}\n {children}\n {command ? <MenuCommand>{command}</MenuCommand> : null}\n </ui.li>\n </UpstreamMenuItemProvider>\n )\n },\n)\n\ntype MenuOptionItemOptions = {\n /**\n * The menu option item icon to use.\n */\n icon?: ReactElement | null\n /**\n * The value of the menu option item.\n */\n value?: string\n /**\n * If `true`, the checkbox or radio will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * The type of the menu option item.\n */\n type?: \"radio\" | \"checkbox\"\n}\n\nexport type MenuOptionItemProps = Omit<MenuItemProps, \"icon\" | \"command\"> &\n MenuOptionItemOptions\n\nexport const MenuOptionItem = forwardRef<MenuOptionItemProps, \"button\">(\n (\n { className, icon, isChecked, closeOnSelect = false, children, ...rest },\n ref,\n ) => {\n return (\n <MenuItem\n ref={ref}\n className={cx(\"ui-menu__item--option\", className)}\n aria-checked={ariaAttr(isChecked)}\n closeOnSelect={closeOnSelect}\n {...rest}\n >\n {icon !== null ? (\n <MenuIcon opacity={isChecked ? 1 : 0}>\n {icon || <CheckIcon />}\n </MenuIcon>\n ) : null}\n {children}\n </MenuItem>\n )\n },\n)\n\nexport type MenuIconProps = HTMLUIProps<\"span\">\n\nexport const MenuIcon = forwardRef<MenuIconProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = {\n flexShrink: 0,\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fontSize: \"0.85em\",\n ...styles.icon,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-menu__item__icon\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nexport type MenuCommandProps = HTMLUIProps<\"span\">\n\nexport const MenuCommand = forwardRef<MenuCommandProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = { ...styles.command }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-menu__item__command\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nconst CheckIcon: FC = () => (\n <svg viewBox=\"0 0 14 14\" width=\"1em\" height=\"1em\">\n <polygon\n fill=\"currentColor\"\n points=\"5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039\"\n />\n </svg>\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,eAAuD;AAEvD,qBAAwB;AACxB,4BAAiC;AACjC,4BAA8B;AAC9B,IAAAC,gBAKO;AAQP,IAAAC,gBAAgE;;;AClBhE,kBAAuD;AACvD,mBAA8B;AAmCxB;AA1BN,IAAM,CAAC,qBAAqB,cAAc,QAAI;AAAA,EAC5C;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AACF;;;ACfA,IAAAC,eAA+B;AAC/B,2BAA6B;AAC7B,IAAAC,gBAUO;AAYP,mBAA8C;AA2LtC,IAAAC,sBAAA;AAjLD,IAAM,CAAC,0BAA0B,mBAAmB,QACzD,6BAAuC;AAAA,EACrC,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AAEH,IAAM,mBAAmB,CAAC,WAA+B;AAzCzD;AA0CE,aACE,6BAAc,MAAM,KACpB,CAAC,GAAC,sCAAQ,aAAa,YAArB,mBAA8B,WAAW;AAE/C;AAiCO,IAAM,eAAW;AAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AA5FP;AA6FI,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,QAAQ;AACZ,UAAM,EAAE,uBAAuB,KAAI,yBAAoB,MAApB,YAAyB,CAAC;AAE7D,UAAM,gBAAgB,cAAc,CAAC;AAErC,UAAM,cAAU,qBAAsB,IAAI;AAC1C,UAAM,uBAAmB,qBAAgB,KAAK;AAC9C,UAAM,mBAAe;AAAA,MACnB,MAAM;AAAA,IACR;AACA,UAAM,EAAE,OAAO,SAAS,IAAI,kBAAkB,EAAE,UAAU,cAAc,CAAC;AACzE,UAAM,CAAC,kBAAkB,iBAAiB,QAAI,uBAAkB,KAAK;AAErE,UAAM,YAAY,UAAU;AAE5B,UAAM,kBAAc,0BAAY,MAAM;AACpC,UAAI,WAAY;AAEhB,sBAAgB,KAAK;AAAA,IACvB,GAAG,CAAC,OAAO,YAAY,eAAe,CAAC;AAEvC,UAAM,mBAAe,0BAAY,MAAM;AACrC,UAAI,WAAY;AAEhB,sBAAgB,EAAE;AAAA,IACpB,GAAG,CAAC,iBAAiB,UAAU,CAAC;AAEhC,UAAM,cAAU;AAAA,MACd,CAAC,OAAkC;AACjC,YAAI,CAAC,iBAAiB,GAAG,aAAa,EAAG;AAEzC,cAAM,gBAAgB,iBAAiB;AAEvC,YAAI,oDAAwB,CAAC,iBAAiB,sBAAuB;AACnE,kBAAQ;AACR;AAAA,QACF;AAAA,MACF;AAAA,MACA,CAAC,qBAAqB,sBAAsB,SAAS,eAAe;AAAA,IACtE;AAEA,UAAM,cAAU,0BAAY,MAAM;AAChC,sBAAgB,KAAK;AAAA,IACvB,GAAG,CAAC,iBAAiB,KAAK,CAAC;AAE3B,UAAM,qBAAiB,0BAAY,MAAM;AArJ7C,UAAAC;AAsJM,OAAAA,MAAA,QAAQ,YAAR,gBAAAA,IAAiB;AAEjB,sBAAgB,KAAK;AAAA,IACvB,GAAG,CAAC,iBAAiB,KAAK,CAAC;AAE3B,UAAM,gBAAY;AAAA,MAChB,CAAC,OAAqC;AACpC,cAAM,UAAgD;AAAA,UACpD,WAAW,eACP,uBAAQ,wBAAwB,OAAO,IACvC;AAAA,QACN;AAEA,cAAM,SAAS,QAAQ,GAAG,GAAG;AAE7B,YAAI,CAAC,OAAQ;AAEb,WAAG,eAAe;AAClB,WAAG,gBAAgB;AAEnB,eAAO;AAAA,MACT;AAAA,MACA,CAAC,wBAAwB,SAAS,QAAQ;AAAA,IAC5C;AAEA,UAAM,WAAO,mCAA4B;AAAA,MACvC,cAAc;AAAA,MACd,GAAG;AAAA,MACH,aAAS,0BAAW,MAAM,SAAS,OAAO;AAAA,MAC1C,aAAS,0BAAW,MAAM,SAAS,OAAO;AAAA,MAC1C,iBAAa,0BAAW,MAAM,aAAa,WAAW;AAAA,MACtD,kBAAc,0BAAW,MAAM,cAAc,YAAY;AAAA,MACzD,eAAW,0BAAW,MAAM,WAAW,WAAW,aAAa,OAAO;AAAA,MACtE,SAAK,yBAAU,UAAU,SAAS,GAAG;AAAA,MACrC;AAAA,MACA;AAAA,IACF,CAAC;AAED,uCAAgB,MAAM;AACpB,UAAI,CAAC,OAAQ;AAEb,YAAM,KAAK,wBAAwB;AAEnC,UAAI,aAAa,CAAC,iBAAiB,QAAQ,SAAS;AAClD,YAAI,GAAI,sBAAqB,EAAE;AAE/B,gCAAwB,UAAU,sBAAsB,MAAM;AApMtE,cAAAA;AAqMU,WAAAA,MAAA,QAAQ,YAAR,gBAAAA,IAAiB,MAAM,EAAE,eAAe,KAAK;AAE7C,kCAAwB,UAAU;AAAA,QACpC,CAAC;AAAA,MACH,WAAW,QAAQ,WAAW,KAAC,+BAAgB,QAAQ,OAAO,GAAG;AAC/D,gBAAQ,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,MAC/C;AAEA,aAAO,MAAM;AACX,YAAI,GAAI,sBAAqB,EAAE;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,WAAW,eAAe,SAAS,MAAM,CAAC;AAE9C,eACE,QAAQ,UACN,6CAAC,gBAAG,MAAH,EAAQ,OAAO,EAAE,MAAM,EAAE,GAAI,UAAS,IAEvC;AAGJ,UAAM,MAAmB;AAAA,MACvB,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,MACT,KAAK;AAAA,MACL,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL;AAAA,UACA,wBAAwB;AAAA,UACxB;AAAA,UACA;AAAA,QACF;AAAA,QAEA;AAAA,UAAC,gBAAG;AAAA,UAAH;AAAA,YACE,GAAG;AAAA,YACH,GAAI,mBAAmB,EAAE,eAAe,GAAG,IAAI,CAAC;AAAA,YACjD,MAAK;AAAA,YACL,UAAU,YAAY,IAAI;AAAA,YAC1B,eAAW,kBAAG,iBAAiB,SAAS;AAAA,YACxC,OAAO;AAAA,YAEN;AAAA,qBAAO,6CAAC,YAAU,gBAAK,IAAc;AAAA,cACrC;AAAA,cACA,UAAU,6CAAC,eAAa,mBAAQ,IAAiB;AAAA;AAAA;AAAA,QACpD;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AA0BO,IAAM,qBAAiB;AAAA,EAC5B,CACE,EAAE,WAAW,MAAM,WAAW,gBAAgB,OAAO,UAAU,GAAG,KAAK,GACvE,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,yBAAyB,SAAS;AAAA,QAChD,oBAAc,wBAAS,SAAS;AAAA,QAChC;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,mBAAS,OACR,6CAAC,YAAS,SAAS,YAAY,IAAI,GAChC,kBAAQ,6CAAC,aAAU,GACtB,IACE;AAAA,UACH;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAIO,IAAM,eAAW;AAAA,EACtB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,QAAQ;AAE3B,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAIO,IAAM,kBAAc;AAAA,EACzB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,QAAQ;AAE3B,UAAM,MAAmB,EAAE,GAAG,OAAO,QAAQ;AAE7C,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,0BAA0B,SAAS;AAAA,QACjD,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,IAAM,YAAgB,MACpB,6CAAC,SAAI,SAAQ,aAAY,OAAM,OAAM,QAAO,OAC1C;AAAA,EAAC;AAAA;AAAA,IACC,MAAK;AAAA,IACL,QAAO;AAAA;AACT,GACF;;;AF7HQ,IAAAC,sBAAA;AAhNV,IAAM;AAAA,EACJ;AAAA,EACA,uBAAuB;AAAA,EACvB;AAAA,EACA,eAAe;AACjB,QAAI,wCAA8B;AAmBlC,IAAM,CAAC,cAAc,OAAO,QAAI,6BAA2B;AAAA,EACzD,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAQM,IAAM,CAAC,sBAAsB,eAAe,QACjD,6BAAmC;AAAA,EACjC,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AAsBI,IAAM,OAAsB,CAAC,UAAU;AApF9C;AAqFE,QAAM,EAAE,QAAQ,kBAAkB,KAAI,oBAAe,MAAf,YAAoB,CAAC;AAC3D,QAAM,CAAC,QAAQ,WAAW,QAAI,qCAAuB,QAAQ,OAAO;AAAA,IAClE,eAAe,CAAC,CAAC;AAAA,IACjB,QAAQ;AAAA,EACV,CAAC;AACD,MAAI;AAAA,IACF;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAG;AAAA,EACL,QAAI,6BAAe,WAAW;AAC9B,QAAM,EAAE,YAAY,iBAAiB,wBAAwB,KAC3D,qBAAgB,MAAhB,YAAqB,CAAC;AACxB,QAAM,EAAE,mBAAmB,iBAAiB,KAAI,yBAAoB,MAApB,YAAyB,CAAC;AAC1E,QAAM,WAAW,CAAC,CAAC;AAEnB,MAAI,UAAU;AACZ,gDAAc;AACd,uCAAW,CAAC,IAAI,CAAC;AACjB,sDAAgB;AAAA,EAClB,OAAO;AACL,gDAAc;AAAA,EAChB;AAEA,QAAM,cAAc,eAAe;AAEnC,QAAM,CAAC,cAAc,eAAe,QAAI,wBAAiB,EAAE;AAE3D,QAAM,cAAU,sBAAuB,IAAI;AAC3C,QAAM,iBAAa,sBAAiB,oBAAI,IAAI,CAAC,CAAC,CAAC;AAC/C,QAAM,8BAA0B,sBAAsB,IAAI;AAC1D,QAAM,oBAAgB,sBAAgC,oBAAI,IAAI,CAAC;AAE/D,QAAM,kBAAc,2BAAY,MAAM;AACpC;AAAA,MAAsB,MAAG;AA5H7B,YAAAC;AA6HM,gBAAAA,MAAA,QAAQ,YAAR,gBAAAA,IAAiB,MAAM,EAAE,eAAe,MAAM;AAAA;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAmB,2BAAY,MAAM;AACzC,UAAMC,MAAK,WAAW,MAAM;AAC1B,UAAI,gBAAiB;AAErB,YAAM,QAAQ,YAAY,kBAAkB;AAE5C,UAAI,MAAO,iBAAgB,MAAM,KAAK;AAAA,IACxC,CAAC;AAED,eAAW,QAAQ,IAAIA,GAAE;AAAA,EAC3B,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,QAAM,sBAAkB,2BAAY,MAAM;AACxC,UAAMA,MAAK,WAAW,MAAM;AAC1B,UAAI,gBAAiB;AAErB,YAAM,OAAO,YAAY,iBAAiB;AAE1C,UAAI,KAAM,iBAAgB,KAAK,KAAK;AAAA,IACtC,CAAC;AAED,eAAW,QAAQ,IAAIA,GAAE;AAAA,EAC3B,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,QAAM,qBAAiB,2BAAY,MAAM;AACvC;AAEA,QAAI,CAAC,SAAU,aAAY;AAAA,EAC7B,GAAG,CAAC,YAAY,UAAU,WAAW,CAAC;AAEtC,QAAM,sBAAkB,2BAAY,MAAM;AACxC;AAEA,eAAWC,YAAW,cAAc,QAAQ,OAAO,GAAG;AACpD,MAAAA,SAAQ;AAAA,IACV;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,SAAK,qBAAM;AACjB,QAAM,EAAE,QAAQ,QAAQ,QAAQ,QAAI,qCAAc;AAAA,IAChD,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,SAAS;AAAA,EACX,CAAC;AAED,+BAAU,MAAM;AACd,UAAM,aAAa,mEAAyB;AAE5C,6CAAY,IAAI,IAAI;AAEpB,WAAO,MAAM;AACX,+CAAY,OAAO;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,IAAI,SAAS,uBAAuB,CAAC;AAEzC,+BAAU,MAAM;AACd,QAAI,kBAAmB,mBAAkB,MAAM;AAAA,EACjD,GAAG,CAAC,mBAAmB,MAAM,CAAC;AAE9B,+BAAU,MAAM;AACd,QAAI,iBAAkB,kBAAiB,UAAU;AAEjD,WAAO,MAAM;AACX,UAAI,iBAAkB,kBAAiB,UAAU;AAAA,IACnD;AAAA,EACF,CAAC;AAED,qCAAgB,MAAM;AACpB,QAAI,CAAC,OAAQ,iBAAgB,EAAE;AAAA,EACjC,GAAG,CAAC,MAAM,CAAC;AAEX,sCAAiB,MAAM;AACrB,eAAW,QAAQ,QAAQ,CAACD,QAAO,aAAaA,GAAE,CAAC;AACnD,eAAW,QAAQ,MAAM;AAAA,EAC3B,CAAC;AAED,SACE,6CAAC,8BAA2B,OAAO,aACjC;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,yBAAyB;AAAA,QACzB,qBAAiB,uBAAQ,iBAAiB,OAAO;AAAA,MACnD;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,gBACF,SAAS,WAAW,UAAU;AAAA,gBAC9B,GAAG;AAAA,gBACH;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,eAAe;AAAA,gBACf;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF;AAEJ;","names":["import_core","import_utils","import_react","import_core","import_utils","import_jsx_runtime","_a","import_jsx_runtime","_a","id","onClose"]}
1
+ {"version":3,"sources":["../src/menu.tsx","../src/menu-context.ts"],"sourcesContent":["import type { ThemeProps } from \"@yamada-ui/core\"\nimport { useComponentMultiStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport { Popover } from \"@yamada-ui/popover\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport { funcAll, useUnmountEffect, useUpdateEffect } from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport {\n DescendantsContextProvider,\n MenuProvider,\n UpstreamMenuProvider,\n useContextMenu,\n useDescendants,\n useUpstreamMenu,\n useUpstreamMenuItem,\n} from \"./menu-context\"\n\nexport interface MenuOptions {\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n}\n\nexport interface MenuProps\n extends ThemeProps<\"Menu\">,\n Omit<PopoverProps, \"closeOnButton\" | \"relatedRef\">,\n MenuOptions {}\n\n/**\n * `Menu` is a component that displays a common dropdown menu.\n *\n * @see Docs https://yamada-ui.com/components/overlay/menu\n */\nexport const Menu: FC<MenuProps> = (props) => {\n const { styles: contextMenuStyles } = useContextMenu() ?? {}\n const [styles, mergedProps] = useComponentMultiStyle(\"Menu\", props, {\n isProcessSkip: !!contextMenuStyles,\n styles: contextMenuStyles,\n })\n let {\n initialFocusRef,\n closeOnSelect = true,\n closeOnBlur,\n placement,\n duration = 0.2,\n offset,\n onOpen: onOpenProp,\n onClose: onCloseProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const { relatedRef, onUpstreamClose, onDownstreamCloseMapRef } =\n useUpstreamMenu() ?? {}\n const { setDownstreamOpen, hasDownstreamRef } = useUpstreamMenuItem() ?? {}\n const isNested = !!relatedRef\n\n if (isNested) {\n placement ??= \"right-start\"\n offset ??= [-8, 8]\n closeOnBlur ??= false\n } else {\n placement ??= \"bottom-start\"\n }\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n const menuRef = useRef<HTMLDivElement>(null)\n const timeoutIds = useRef<Set<any>>(new Set([]))\n const requestAnimationFrameId = useRef<number | null>(null)\n const onCloseMapRef = useRef<Map<string, () => void>>(new Map())\n\n const onFocusMenu = useCallback(() => {\n requestAnimationFrame(() =>\n menuRef.current?.focus({ preventScroll: false }),\n )\n }, [])\n\n const onFocusFirstItem = useCallback(() => {\n const id = setTimeout(() => {\n if (initialFocusRef) return\n\n const first = descendants.enabledFirstValue()\n\n if (first) setFocusedIndex(first.index)\n })\n\n timeoutIds.current.add(id)\n }, [descendants, initialFocusRef])\n\n const onFocusLastItem = useCallback(() => {\n const id = setTimeout(() => {\n if (initialFocusRef) return\n\n const last = descendants.enabledLastValue()\n\n if (last) setFocusedIndex(last.index)\n })\n\n timeoutIds.current.add(id)\n }, [descendants, initialFocusRef])\n\n const onOpenInternal = useCallback(() => {\n onOpenProp?.()\n\n if (!isNested) onFocusMenu()\n }, [onOpenProp, isNested, onFocusMenu])\n\n const onCloseInternal = useCallback(() => {\n onCloseProp?.()\n\n for (const onClose of onCloseMapRef.current.values()) {\n onClose()\n }\n }, [onCloseProp])\n\n const id = useId()\n const { isOpen, onOpen, onClose } = useDisclosure({\n ...props,\n onOpen: onOpenInternal,\n onClose: onCloseInternal,\n })\n\n useEffect(() => {\n const onCloseMap = onDownstreamCloseMapRef?.current\n\n onCloseMap?.set(id, onClose)\n\n return () => {\n onCloseMap?.delete(id)\n }\n }, [id, onClose, onDownstreamCloseMapRef])\n\n useEffect(() => {\n if (setDownstreamOpen) setDownstreamOpen(isOpen)\n }, [setDownstreamOpen, isOpen])\n\n useEffect(() => {\n if (hasDownstreamRef) hasDownstreamRef.current = true\n\n return () => {\n if (hasDownstreamRef) hasDownstreamRef.current = false\n }\n })\n\n useUpdateEffect(() => {\n if (!isOpen) setFocusedIndex(-1)\n }, [isOpen])\n\n useUnmountEffect(() => {\n timeoutIds.current.forEach((id) => clearTimeout(id))\n timeoutIds.current.clear()\n })\n\n return (\n <DescendantsContextProvider value={descendants}>\n <UpstreamMenuProvider\n value={{\n relatedRef: menuRef,\n onDownstreamCloseMapRef: onCloseMapRef,\n onUpstreamClose: funcAll(onUpstreamClose, onClose),\n }}\n >\n <MenuProvider\n value={{\n isOpen,\n onOpen,\n onClose,\n onUpstreamClose,\n onFocusFirstItem,\n onFocusLastItem,\n closeOnSelect,\n focusedIndex,\n setFocusedIndex,\n menuRef,\n requestAnimationFrameId,\n isNested,\n styles,\n }}\n >\n <Popover\n {...{\n trigger: isNested ? \"hover\" : \"click\",\n ...rest,\n isOpen,\n onOpen,\n onClose,\n placement,\n offset,\n duration,\n initialFocusRef,\n relatedRef,\n closeOnButton: false,\n closeOnBlur,\n }}\n />\n </MenuProvider>\n </UpstreamMenuProvider>\n </DescendantsContextProvider>\n )\n}\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type {\n Dispatch,\n KeyboardEventHandler,\n MutableRefObject,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport type { MenuOptions } from \"./menu\"\n\nexport const {\n DescendantsContextProvider,\n useDescendantsContext: useMenuDescendantsContext,\n useDescendants,\n useDescendant: useMenuDescendant,\n} = createDescendant()\n\ninterface MenuContext extends MenuOptions {\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onUpstreamClose?: () => void\n onFocusFirstItem: () => void\n onFocusLastItem: () => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n menuRef: RefObject<HTMLDivElement>\n requestAnimationFrameId: MutableRefObject<number | null>\n isNested: boolean\n styles: { [key: string]: CSSUIObject }\n}\n\nexport const [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\ninterface ContextMenuContext {\n styles: { [key: string]: CSSUIObject }\n}\n\nexport const [ContextMenuProvider, useContextMenu] =\n createContext<ContextMenuContext>({\n strict: false,\n name: \"ContextMenuContext\",\n })\n\ninterface UpstreamMenuContext {\n relatedRef: RefObject<HTMLElement>\n onDownstreamCloseMapRef: MutableRefObject<Map<string, () => void>>\n onUpstreamClose: () => void\n}\n\nexport const [UpstreamMenuProvider, useUpstreamMenu] =\n createContext<UpstreamMenuContext>({\n strict: false,\n name: \"UpstreamMenuContext\",\n })\n\ninterface UpstreamMenuItemContext {\n onUpstreamRestoreFocus: () => void\n onKeyDownRef: RefObject<KeyboardEventHandler<HTMLLIElement>>\n setDownstreamOpen: Dispatch<SetStateAction<boolean>>\n hasDownstreamRef: MutableRefObject<boolean>\n}\n\nexport const [UpstreamMenuItemProvider, useUpstreamMenuItem] =\n createContext<UpstreamMenuItemContext>({\n strict: false,\n name: \"UpstreamMenuItemContext\",\n })\n"],"mappings":"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","names":["import_utils","_a","id","onClose"]}
package/dist/menu.mjs CHANGED
@@ -1,18 +1,9 @@
1
1
  "use client"
2
2
  import {
3
- Menu,
4
- UpstreamMenuProvider,
5
- useMenu,
6
- useMenuDescendant,
7
- useMenuDescendantsContext,
8
- useUpstreamMenu
9
- } from "./chunk-6IPLI42Z.mjs";
3
+ Menu
4
+ } from "./chunk-NNSVX2GX.mjs";
5
+ import "./chunk-ZUOFHOX6.mjs";
10
6
  export {
11
- Menu,
12
- UpstreamMenuProvider,
13
- useMenu,
14
- useMenuDescendant,
15
- useMenuDescendantsContext,
16
- useUpstreamMenu
7
+ Menu
17
8
  };
18
9
  //# sourceMappingURL=menu.mjs.map