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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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":"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","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