@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.
- package/dist/{chunk-5ZWRZF6M.mjs → chunk-DPC5A6DV.mjs} +2 -2
- package/dist/chunk-DPC5A6DV.mjs.map +1 -0
- package/dist/{chunk-AG6UJA7D.mjs → chunk-HVOHR2NQ.mjs} +2 -2
- package/dist/chunk-HVOHR2NQ.mjs.map +1 -0
- package/dist/{chunk-G4OMCC2Y.mjs → chunk-M4PPRRRC.mjs} +5 -3
- package/dist/chunk-M4PPRRRC.mjs.map +1 -0
- package/dist/chunk-NNSVX2GX.mjs +170 -0
- package/dist/chunk-NNSVX2GX.mjs.map +1 -0
- package/dist/{chunk-73KHS3JD.mjs → chunk-O5D4LR5P.mjs} +2 -2
- package/dist/chunk-O5D4LR5P.mjs.map +1 -0
- package/dist/chunk-OFCEMPQW.mjs +29 -0
- package/dist/chunk-OFCEMPQW.mjs.map +1 -0
- package/dist/{chunk-6YBKZRIZ.mjs → chunk-SI3WI4AI.mjs} +3 -3
- package/dist/chunk-SI3WI4AI.mjs.map +1 -0
- package/dist/chunk-T7CXLEBW.mjs +243 -0
- package/dist/chunk-T7CXLEBW.mjs.map +1 -0
- package/dist/chunk-ZUOFHOX6.mjs +43 -0
- package/dist/chunk-ZUOFHOX6.mjs.map +1 -0
- package/dist/chunk-ZV73JKM5.mjs +21 -0
- package/dist/chunk-ZV73JKM5.mjs.map +1 -0
- package/dist/context-menu-trigger.d.mts +2 -1
- package/dist/context-menu-trigger.d.ts +2 -1
- package/dist/context-menu-trigger.js +32 -17
- package/dist/context-menu-trigger.js.map +1 -1
- package/dist/context-menu-trigger.mjs +2 -2
- package/dist/context-menu.d.mts +4 -10
- package/dist/context-menu.d.ts +4 -10
- package/dist/context-menu.js +43 -264
- package/dist/context-menu.js.map +1 -1
- package/dist/context-menu.mjs +5 -5
- package/dist/index.d.mts +1 -2
- package/dist/index.d.ts +1 -2
- package/dist/index.js +259 -255
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +16 -11
- package/dist/menu-button.d.mts +4 -3
- package/dist/menu-button.d.ts +4 -3
- package/dist/menu-button.js +55 -58
- package/dist/menu-button.js.map +1 -1
- package/dist/menu-button.mjs +3 -2
- package/dist/menu-context.d.mts +210 -0
- package/dist/menu-context.d.ts +210 -0
- package/dist/menu-context.js +77 -0
- package/dist/menu-context.js.map +1 -0
- package/dist/menu-context.mjs +30 -0
- package/dist/menu-context.mjs.map +1 -0
- package/dist/menu-divider.d.mts +3 -2
- package/dist/menu-divider.d.ts +3 -2
- package/dist/menu-divider.js +26 -21
- package/dist/menu-divider.js.map +1 -1
- package/dist/menu-divider.mjs +2 -2
- package/dist/menu-group.d.mts +3 -3
- package/dist/menu-group.d.ts +3 -3
- package/dist/menu-group.js +17 -14
- package/dist/menu-group.js.map +1 -1
- package/dist/menu-group.mjs +2 -2
- package/dist/menu-item.d.mts +14 -19
- package/dist/menu-item.d.ts +14 -19
- package/dist/menu-item.js +40 -45
- package/dist/menu-item.js.map +1 -1
- package/dist/menu-item.mjs +4 -7
- package/dist/menu-list.d.mts +2 -2
- package/dist/menu-list.d.ts +2 -2
- package/dist/menu-list.js +23 -20
- package/dist/menu-list.js.map +1 -1
- package/dist/menu-list.mjs +2 -2
- package/dist/menu-option-group.d.mts +6 -7
- package/dist/menu-option-group.d.ts +6 -7
- package/dist/menu-option-group.js +97 -100
- package/dist/menu-option-group.js.map +1 -1
- package/dist/menu-option-group.mjs +4 -3
- package/dist/menu.d.mts +7 -87
- package/dist/menu.d.ts +7 -87
- package/dist/menu.js +41 -274
- package/dist/menu.js.map +1 -1
- package/dist/menu.mjs +4 -13
- package/package.json +11 -11
- package/dist/chunk-5ZWRZF6M.mjs.map +0 -1
- package/dist/chunk-6IPLI42Z.mjs +0 -447
- package/dist/chunk-6IPLI42Z.mjs.map +0 -1
- package/dist/chunk-6YBKZRIZ.mjs.map +0 -1
- package/dist/chunk-73KHS3JD.mjs.map +0 -1
- package/dist/chunk-AG6UJA7D.mjs.map +0 -1
- package/dist/chunk-G4OMCC2Y.mjs.map +0 -1
- package/dist/chunk-ZOUBZWDN.mjs +0 -27
- package/dist/chunk-ZOUBZWDN.mjs.map +0 -1
|
@@ -26,35 +26,80 @@ __export(menu_option_group_exports, {
|
|
|
26
26
|
module.exports = __toCommonJS(menu_option_group_exports);
|
|
27
27
|
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
|
|
28
28
|
var import_utils4 = require("@yamada-ui/utils");
|
|
29
|
-
var
|
|
29
|
+
var import_react2 = require("react");
|
|
30
30
|
|
|
31
31
|
// src/menu-group.tsx
|
|
32
|
-
var
|
|
33
|
-
var import_utils3 = require("@yamada-ui/utils");
|
|
34
|
-
|
|
35
|
-
// src/menu.tsx
|
|
36
|
-
var import_core2 = require("@yamada-ui/core");
|
|
37
|
-
var import_popover = require("@yamada-ui/popover");
|
|
38
|
-
var import_use_descendant = require("@yamada-ui/use-descendant");
|
|
39
|
-
var import_use_disclosure = require("@yamada-ui/use-disclosure");
|
|
32
|
+
var import_core = require("@yamada-ui/core");
|
|
40
33
|
var import_utils2 = require("@yamada-ui/utils");
|
|
41
|
-
var import_react2 = require("react");
|
|
42
34
|
|
|
43
|
-
// src/menu-
|
|
44
|
-
var
|
|
45
|
-
var import_use_clickable = require("@yamada-ui/use-clickable");
|
|
35
|
+
// src/menu-context.ts
|
|
36
|
+
var import_use_descendant = require("@yamada-ui/use-descendant");
|
|
46
37
|
var import_utils = require("@yamada-ui/utils");
|
|
47
|
-
var
|
|
48
|
-
|
|
38
|
+
var {
|
|
39
|
+
DescendantsContextProvider,
|
|
40
|
+
useDescendantsContext: useMenuDescendantsContext,
|
|
41
|
+
useDescendants,
|
|
42
|
+
useDescendant: useMenuDescendant
|
|
43
|
+
} = (0, import_use_descendant.createDescendant)();
|
|
44
|
+
var [MenuProvider, useMenu] = (0, import_utils.createContext)({
|
|
45
|
+
name: "MenuContext",
|
|
46
|
+
errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
|
|
47
|
+
});
|
|
48
|
+
var [ContextMenuProvider, useContextMenu] = (0, import_utils.createContext)({
|
|
49
|
+
strict: false,
|
|
50
|
+
name: "ContextMenuContext"
|
|
51
|
+
});
|
|
52
|
+
var [UpstreamMenuProvider, useUpstreamMenu] = (0, import_utils.createContext)({
|
|
53
|
+
strict: false,
|
|
54
|
+
name: "UpstreamMenuContext"
|
|
55
|
+
});
|
|
49
56
|
var [UpstreamMenuItemProvider, useUpstreamMenuItem] = (0, import_utils.createContext)({
|
|
50
57
|
strict: false,
|
|
51
58
|
name: "UpstreamMenuItemContext"
|
|
52
59
|
});
|
|
60
|
+
|
|
61
|
+
// src/menu-group.tsx
|
|
62
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
63
|
+
var MenuGroup = (0, import_core.forwardRef)(
|
|
64
|
+
({ className, label, children, labelProps, ...rest }, ref) => {
|
|
65
|
+
const { styles } = useMenu();
|
|
66
|
+
const css = { ...styles.group };
|
|
67
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
68
|
+
import_core.ui.li,
|
|
69
|
+
{
|
|
70
|
+
ref,
|
|
71
|
+
className: (0, import_utils2.cx)("ui-menu__item", "ui-menu__item--group", className),
|
|
72
|
+
role: "group",
|
|
73
|
+
__css: css,
|
|
74
|
+
...rest,
|
|
75
|
+
children: [
|
|
76
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
77
|
+
import_core.ui.span,
|
|
78
|
+
{
|
|
79
|
+
className: (0, import_utils2.cx)("ui-menu__item--group-label"),
|
|
80
|
+
__css: styles.groupLabel,
|
|
81
|
+
...labelProps,
|
|
82
|
+
children: label
|
|
83
|
+
}
|
|
84
|
+
) : null,
|
|
85
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.ul, { className: "ui-menu__item__group", children })
|
|
86
|
+
]
|
|
87
|
+
}
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
);
|
|
91
|
+
|
|
92
|
+
// src/menu-item.tsx
|
|
93
|
+
var import_core2 = require("@yamada-ui/core");
|
|
94
|
+
var import_use_clickable = require("@yamada-ui/use-clickable");
|
|
95
|
+
var import_utils3 = require("@yamada-ui/utils");
|
|
96
|
+
var import_react = require("react");
|
|
97
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
53
98
|
var isTargetMenuItem = (target) => {
|
|
54
99
|
var _a;
|
|
55
|
-
return (0,
|
|
100
|
+
return (0, import_utils3.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menuitem"));
|
|
56
101
|
};
|
|
57
|
-
var MenuItem = (0,
|
|
102
|
+
var MenuItem = (0, import_core2.forwardRef)(
|
|
58
103
|
({
|
|
59
104
|
className,
|
|
60
105
|
isDisabled,
|
|
@@ -118,7 +163,7 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
|
118
163
|
const onKeyDown = (0, import_react.useCallback)(
|
|
119
164
|
(ev) => {
|
|
120
165
|
const actions = {
|
|
121
|
-
ArrowLeft: isNested ? (0,
|
|
166
|
+
ArrowLeft: isNested ? (0, import_utils3.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
|
|
122
167
|
};
|
|
123
168
|
const action = actions[ev.key];
|
|
124
169
|
if (!action) return;
|
|
@@ -131,16 +176,16 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
|
131
176
|
const rest = (0, import_use_clickable.useClickable)({
|
|
132
177
|
focusOnClick: false,
|
|
133
178
|
...props,
|
|
134
|
-
onClick: (0,
|
|
135
|
-
onFocus: (0,
|
|
136
|
-
onMouseOver: (0,
|
|
137
|
-
onMouseLeave: (0,
|
|
138
|
-
onKeyDown: (0,
|
|
139
|
-
ref: (0,
|
|
179
|
+
onClick: (0, import_utils3.handlerAll)(props.onClick, onClick),
|
|
180
|
+
onFocus: (0, import_utils3.handlerAll)(props.onFocus, onFocus),
|
|
181
|
+
onMouseOver: (0, import_utils3.handlerAll)(props.onMouseOver, onMouseOver),
|
|
182
|
+
onMouseLeave: (0, import_utils3.handlerAll)(props.onMouseLeave, onMouseLeave),
|
|
183
|
+
onKeyDown: (0, import_utils3.handlerAll)(props.onKeyDown, onKeyDown, onKeyDownRef.current),
|
|
184
|
+
ref: (0, import_utils3.mergeRefs)(register, itemRef, ref),
|
|
140
185
|
isDisabled,
|
|
141
186
|
isFocusable
|
|
142
187
|
});
|
|
143
|
-
(0,
|
|
188
|
+
(0, import_utils3.useUpdateEffect)(() => {
|
|
144
189
|
if (!isOpen) return;
|
|
145
190
|
const id = requestAnimationFrameId.current;
|
|
146
191
|
if (isFocused && !trulyDisabled && itemRef.current) {
|
|
@@ -150,14 +195,14 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
|
150
195
|
(_a2 = itemRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
|
|
151
196
|
requestAnimationFrameId.current = null;
|
|
152
197
|
});
|
|
153
|
-
} else if (menuRef.current && !(0,
|
|
198
|
+
} else if (menuRef.current && !(0, import_utils3.isActiveElement)(menuRef.current)) {
|
|
154
199
|
menuRef.current.focus({ preventScroll: true });
|
|
155
200
|
}
|
|
156
201
|
return () => {
|
|
157
202
|
if (id) cancelAnimationFrame(id);
|
|
158
203
|
};
|
|
159
204
|
}, [isFocused, trulyDisabled, menuRef, isOpen]);
|
|
160
|
-
children = icon || command ? /* @__PURE__ */ (0,
|
|
205
|
+
children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: { flex: 1 }, children }) : children;
|
|
161
206
|
const css = {
|
|
162
207
|
textDecoration: "none",
|
|
163
208
|
color: "inherit",
|
|
@@ -171,7 +216,7 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
|
171
216
|
gap: "0.75rem",
|
|
172
217
|
...styles.item
|
|
173
218
|
};
|
|
174
|
-
return /* @__PURE__ */ (0,
|
|
219
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
175
220
|
UpstreamMenuItemProvider,
|
|
176
221
|
{
|
|
177
222
|
value: {
|
|
@@ -180,19 +225,19 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
|
180
225
|
setDownstreamOpen,
|
|
181
226
|
hasDownstreamRef
|
|
182
227
|
},
|
|
183
|
-
children: /* @__PURE__ */ (0,
|
|
184
|
-
|
|
228
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
229
|
+
import_core2.ui.li,
|
|
185
230
|
{
|
|
186
231
|
...rest,
|
|
187
232
|
...isDownstreamOpen ? { "data-active": "" } : {},
|
|
188
233
|
role: "menuitem",
|
|
189
234
|
tabIndex: isFocused ? 0 : -1,
|
|
190
|
-
className: (0,
|
|
235
|
+
className: (0, import_utils3.cx)("ui-menu__item", className),
|
|
191
236
|
__css: css,
|
|
192
237
|
children: [
|
|
193
|
-
icon ? /* @__PURE__ */ (0,
|
|
238
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, { children: icon }) : null,
|
|
194
239
|
children,
|
|
195
|
-
command ? /* @__PURE__ */ (0,
|
|
240
|
+
command ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuCommand, { children: command }) : null
|
|
196
241
|
]
|
|
197
242
|
}
|
|
198
243
|
)
|
|
@@ -200,25 +245,25 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
|
200
245
|
);
|
|
201
246
|
}
|
|
202
247
|
);
|
|
203
|
-
var MenuOptionItem = (0,
|
|
248
|
+
var MenuOptionItem = (0, import_core2.forwardRef)(
|
|
204
249
|
({ className, icon, isChecked, closeOnSelect = false, children, ...rest }, ref) => {
|
|
205
|
-
return /* @__PURE__ */ (0,
|
|
250
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
206
251
|
MenuItem,
|
|
207
252
|
{
|
|
208
253
|
ref,
|
|
209
|
-
className: (0,
|
|
210
|
-
"aria-checked": (0,
|
|
254
|
+
className: (0, import_utils3.cx)("ui-menu__item--option", className),
|
|
255
|
+
"aria-checked": (0, import_utils3.ariaAttr)(isChecked),
|
|
211
256
|
closeOnSelect,
|
|
212
257
|
...rest,
|
|
213
258
|
children: [
|
|
214
|
-
icon !== null ? /* @__PURE__ */ (0,
|
|
259
|
+
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, { opacity: isChecked ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, {}) }) : null,
|
|
215
260
|
children
|
|
216
261
|
]
|
|
217
262
|
}
|
|
218
263
|
);
|
|
219
264
|
}
|
|
220
265
|
);
|
|
221
|
-
var MenuIcon = (0,
|
|
266
|
+
var MenuIcon = (0, import_core2.forwardRef)(
|
|
222
267
|
({ className, ...rest }, ref) => {
|
|
223
268
|
const { styles } = useMenu();
|
|
224
269
|
const css = {
|
|
@@ -229,33 +274,33 @@ var MenuIcon = (0, import_core.forwardRef)(
|
|
|
229
274
|
fontSize: "0.85em",
|
|
230
275
|
...styles.icon
|
|
231
276
|
};
|
|
232
|
-
return /* @__PURE__ */ (0,
|
|
233
|
-
|
|
277
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
278
|
+
import_core2.ui.span,
|
|
234
279
|
{
|
|
235
280
|
ref,
|
|
236
|
-
className: (0,
|
|
281
|
+
className: (0, import_utils3.cx)("ui-menu__item__icon", className),
|
|
237
282
|
__css: css,
|
|
238
283
|
...rest
|
|
239
284
|
}
|
|
240
285
|
);
|
|
241
286
|
}
|
|
242
287
|
);
|
|
243
|
-
var MenuCommand = (0,
|
|
288
|
+
var MenuCommand = (0, import_core2.forwardRef)(
|
|
244
289
|
({ className, ...rest }, ref) => {
|
|
245
290
|
const { styles } = useMenu();
|
|
246
291
|
const css = { ...styles.command };
|
|
247
|
-
return /* @__PURE__ */ (0,
|
|
248
|
-
|
|
292
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
293
|
+
import_core2.ui.span,
|
|
249
294
|
{
|
|
250
295
|
ref,
|
|
251
|
-
className: (0,
|
|
296
|
+
className: (0, import_utils3.cx)("ui-menu__item__command", className),
|
|
252
297
|
__css: css,
|
|
253
298
|
...rest
|
|
254
299
|
}
|
|
255
300
|
);
|
|
256
301
|
}
|
|
257
302
|
);
|
|
258
|
-
var CheckIcon = () => /* @__PURE__ */ (0,
|
|
303
|
+
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)(
|
|
259
304
|
"polygon",
|
|
260
305
|
{
|
|
261
306
|
fill: "currentColor",
|
|
@@ -263,57 +308,9 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewB
|
|
|
263
308
|
}
|
|
264
309
|
) });
|
|
265
310
|
|
|
266
|
-
// src/menu.tsx
|
|
267
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
268
|
-
var {
|
|
269
|
-
DescendantsContextProvider,
|
|
270
|
-
useDescendantsContext: useMenuDescendantsContext,
|
|
271
|
-
useDescendants,
|
|
272
|
-
useDescendant: useMenuDescendant
|
|
273
|
-
} = (0, import_use_descendant.createDescendant)();
|
|
274
|
-
var [MenuProvider, useMenu] = (0, import_utils2.createContext)({
|
|
275
|
-
name: "MenuContext",
|
|
276
|
-
errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
|
|
277
|
-
});
|
|
278
|
-
var [UpstreamMenuProvider, useUpstreamMenu] = (0, import_utils2.createContext)({
|
|
279
|
-
strict: false,
|
|
280
|
-
name: "UpstreamMenuContext"
|
|
281
|
-
});
|
|
282
|
-
|
|
283
|
-
// src/menu-group.tsx
|
|
284
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
285
|
-
var MenuGroup = (0, import_core3.forwardRef)(
|
|
286
|
-
({ className, label, children, labelProps, ...rest }, ref) => {
|
|
287
|
-
const { styles } = useMenu();
|
|
288
|
-
const css = { ...styles.group };
|
|
289
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
290
|
-
import_core3.ui.li,
|
|
291
|
-
{
|
|
292
|
-
ref,
|
|
293
|
-
className: (0, import_utils3.cx)("ui-menu__item", "ui-menu__item--group", className),
|
|
294
|
-
role: "group",
|
|
295
|
-
__css: css,
|
|
296
|
-
...rest,
|
|
297
|
-
children: [
|
|
298
|
-
label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
299
|
-
import_core3.ui.span,
|
|
300
|
-
{
|
|
301
|
-
className: (0, import_utils3.cx)("ui-menu__item--group-label"),
|
|
302
|
-
__css: styles.groupLabel,
|
|
303
|
-
...labelProps,
|
|
304
|
-
children: label
|
|
305
|
-
}
|
|
306
|
-
) : null,
|
|
307
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.ul, { className: "ui-menu__item__group", children })
|
|
308
|
-
]
|
|
309
|
-
}
|
|
310
|
-
);
|
|
311
|
-
}
|
|
312
|
-
);
|
|
313
|
-
|
|
314
311
|
// src/menu-option-group.tsx
|
|
315
|
-
var
|
|
316
|
-
var MenuOptionGroup = (0,
|
|
312
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
313
|
+
var MenuOptionGroup = (0, import_react2.forwardRef)(
|
|
317
314
|
({
|
|
318
315
|
className,
|
|
319
316
|
value: valueProp,
|
|
@@ -330,7 +327,7 @@ var MenuOptionGroup = (0, import_react3.forwardRef)(
|
|
|
330
327
|
defaultValue,
|
|
331
328
|
onChange: onChangeProp
|
|
332
329
|
});
|
|
333
|
-
const onChange = (0,
|
|
330
|
+
const onChange = (0, import_react2.useCallback)(
|
|
334
331
|
(selectedValue) => {
|
|
335
332
|
if (isRadio && typeof value === "string") setValue(selectedValue);
|
|
336
333
|
if (!isRadio && (0, import_utils4.isArray)(value)) {
|
|
@@ -349,9 +346,9 @@ var MenuOptionGroup = (0, import_react3.forwardRef)(
|
|
|
349
346
|
(_b = (_a = child.props).onClick) == null ? void 0 : _b.call(_a, ev);
|
|
350
347
|
};
|
|
351
348
|
const isChecked = !isRadio && (0, import_utils4.isArray)(value) ? value.includes(child.props.value) : child.props.value === value;
|
|
352
|
-
return (0,
|
|
349
|
+
return (0, import_react2.cloneElement)(child, { type, onClick, isChecked });
|
|
353
350
|
});
|
|
354
|
-
return /* @__PURE__ */ (0,
|
|
351
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
355
352
|
MenuGroup,
|
|
356
353
|
{
|
|
357
354
|
ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/menu-option-group.tsx","../src/menu-group.tsx","../src/menu.tsx","../src/menu-item.tsx"],"sourcesContent":["import type { ComponentArgs } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { cx, getValidChildren, isArray } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, Ref } from \"react\"\nimport { cloneElement, forwardRef, useCallback } from \"react\"\nimport type { MenuGroupProps } from \"./menu-group\"\nimport { MenuGroup } from \"./menu-group\"\nimport { MenuOptionItem } from \"./menu-item\"\n\ntype MenuOptionGroupOptions<Y extends string | string[] = string> = {\n /**\n * The value of the menu item group.\n */\n value?: Y\n /**\n * The initial value of the menu item group.\n */\n defaultValue?: Y\n /**\n * The type of the menu option group.\n *\n * @default 'checkbox'\n */\n type?: \"radio\" | \"checkbox\"\n /**\n * The callback fired when any children checkbox is checked or unchecked.\n */\n onChange?: (value: Y) => void\n}\n\nexport type MenuOptionGroupProps<Y extends string | string[] = string> = Omit<\n MenuGroupProps,\n keyof MenuOptionGroupOptions\n> &\n MenuOptionGroupOptions<Y>\n\nexport const MenuOptionGroup = forwardRef(\n <Y extends string | string[] = string>(\n {\n className,\n value: valueProp,\n defaultValue,\n onChange: onChangeProp,\n type,\n children,\n ...rest\n }: MenuOptionGroupProps<Y>,\n ref: ForwardedRef<HTMLDivElement>,\n ) => {\n const isRadio = type === \"radio\"\n\n defaultValue ??= (isRadio ? \"\" : []) as Y\n\n const [value, setValue] = useControllableState({\n value: valueProp,\n defaultValue,\n onChange: onChangeProp,\n })\n\n const onChange = useCallback(\n (selectedValue: string) => {\n if (isRadio && typeof value === \"string\") setValue(selectedValue as Y)\n\n if (!isRadio && isArray(value)) {\n const nextValue = value.includes(selectedValue)\n ? value.filter((item) => item !== selectedValue)\n : value.concat(selectedValue)\n\n setValue(nextValue as Y)\n }\n },\n [isRadio, value, setValue],\n )\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) => {\n if (child.type !== MenuOptionItem) return child\n\n const onClick = (ev: MouseEvent) => {\n onChange(child.props.value)\n child.props.onClick?.(ev)\n }\n\n const isChecked =\n !isRadio && isArray(value)\n ? value.includes(child.props.value)\n : child.props.value === value\n\n return cloneElement(child, { type, onClick, isChecked })\n })\n\n return (\n <MenuGroup\n ref={ref}\n className={cx(\"ui-menu__item--group--option\", className)}\n {...rest}\n >\n {cloneChildren}\n </MenuGroup>\n )\n },\n) as {\n <Y extends string | string[] = string>(\n props: MenuOptionGroupProps<Y> & { ref?: Ref<HTMLDivElement> },\n ): JSX.Element\n} & ComponentArgs\n\nMenuOptionGroup.displayName = \"MenuOptionGroup\"\n","import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMenu } from \"./menu\"\n\nexport type MenuGroupProps = HTMLUIProps<\"div\"> & {\n /**\n * The label of the group.\n */\n label?: string\n /**\n * Props for menu group element.\n */\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport const MenuGroup = forwardRef<MenuGroupProps, \"div\">(\n ({ className, label, children, labelProps, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = { ...styles.group }\n\n return (\n <ui.li\n ref={ref}\n className={cx(\"ui-menu__item\", \"ui-menu__item--group\", className)}\n role=\"group\"\n __css={css}\n {...rest}\n >\n {label ? (\n <ui.span\n className={cx(\"ui-menu__item--group-label\")}\n __css={styles.groupLabel}\n {...labelProps}\n >\n {label}\n </ui.span>\n ) : null}\n\n <ui.ul className=\"ui-menu__item__group\">{children}</ui.ul>\n </ui.li>\n )\n },\n)\n","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 { 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_utils","import_react","import_core","import_utils","import_core","import_utils","import_react","_a","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../src/menu-option-group.tsx","../src/menu-group.tsx","../src/menu-context.ts","../src/menu-item.tsx"],"sourcesContent":["import type { ComponentArgs } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { cx, getValidChildren, isArray } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefAttributes } from \"react\"\nimport { cloneElement, forwardRef, useCallback } from \"react\"\nimport type { MenuGroupProps } from \"./menu-group\"\nimport { MenuGroup } from \"./menu-group\"\nimport { MenuOptionItem } from \"./menu-item\"\n\ninterface MenuOptionGroupOptions<Y extends string | string[] = string> {\n /**\n * The value of the menu item group.\n */\n value?: Y\n /**\n * The initial value of the menu item group.\n */\n defaultValue?: Y\n /**\n * The type of the menu option group.\n *\n * @default 'checkbox'\n */\n type?: \"radio\" | \"checkbox\"\n /**\n * The callback fired when any children checkbox is checked or unchecked.\n */\n onChange?: (value: Y) => void\n}\n\nexport interface MenuOptionGroupProps<Y extends string | string[] = string>\n extends Omit<MenuGroupProps, keyof MenuOptionGroupOptions>,\n MenuOptionGroupOptions<Y> {}\n\nexport const MenuOptionGroup = forwardRef(\n <Y extends string | string[] = string>(\n {\n className,\n value: valueProp,\n defaultValue,\n onChange: onChangeProp,\n type,\n children,\n ...rest\n }: MenuOptionGroupProps<Y>,\n ref: ForwardedRef<HTMLDivElement>,\n ) => {\n const isRadio = type === \"radio\"\n\n defaultValue ??= (isRadio ? \"\" : []) as Y\n\n const [value, setValue] = useControllableState({\n value: valueProp,\n defaultValue,\n onChange: onChangeProp,\n })\n\n const onChange = useCallback(\n (selectedValue: string) => {\n if (isRadio && typeof value === \"string\") setValue(selectedValue as Y)\n\n if (!isRadio && isArray(value)) {\n const nextValue = value.includes(selectedValue)\n ? value.filter((item) => item !== selectedValue)\n : value.concat(selectedValue)\n\n setValue(nextValue as Y)\n }\n },\n [isRadio, value, setValue],\n )\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) => {\n if (child.type !== MenuOptionItem) return child\n\n const onClick = (ev: MouseEvent) => {\n onChange(child.props.value)\n child.props.onClick?.(ev)\n }\n\n const isChecked =\n !isRadio && isArray(value)\n ? value.includes(child.props.value)\n : child.props.value === value\n\n return cloneElement(child, { type, onClick, isChecked })\n })\n\n return (\n <MenuGroup\n ref={ref}\n className={cx(\"ui-menu__item--group--option\", className)}\n {...rest}\n >\n {cloneChildren}\n </MenuGroup>\n )\n },\n) as {\n <Y extends string | string[] = string>(\n props: MenuOptionGroupProps<Y> & RefAttributes<HTMLDivElement>,\n ): JSX.Element\n} & ComponentArgs\n\nMenuOptionGroup.displayName = \"MenuOptionGroup\"\n","import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMenu } from \"./menu-context\"\n\nexport interface MenuGroupProps extends HTMLUIProps<\"li\"> {\n /**\n * The label of the group.\n */\n label?: string\n /**\n * Props for menu group element.\n */\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport const MenuGroup = forwardRef<MenuGroupProps, \"li\">(\n ({ className, label, children, labelProps, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = { ...styles.group }\n\n return (\n <ui.li\n ref={ref}\n className={cx(\"ui-menu__item\", \"ui-menu__item--group\", className)}\n role=\"group\"\n __css={css}\n {...rest}\n >\n {label ? (\n <ui.span\n className={cx(\"ui-menu__item--group-label\")}\n __css={styles.groupLabel}\n {...labelProps}\n >\n {label}\n </ui.span>\n ) : null}\n\n <ui.ul className=\"ui-menu__item__group\">{children}</ui.ul>\n </ui.li>\n )\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","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 cx,\n funcAll,\n handlerAll,\n isActiveElement,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type {\n FC,\n KeyboardEvent,\n KeyboardEventHandler,\n MouseEvent,\n ReactElement,\n} from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\nimport {\n useMenuDescendant,\n UpstreamMenuItemProvider,\n useMenu,\n useUpstreamMenuItem,\n} from \"./menu-context\"\n\nconst isTargetMenuItem = (target: EventTarget | null) => {\n return (\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"menuitem\")\n )\n}\n\ninterface 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 interface MenuItemProps extends 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: { [key: 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\ninterface 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 interface MenuOptionItemProps\n extends Omit<MenuItemProps, \"icon\" | \"command\" | \"value\">,\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 interface MenuIconProps extends 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 interface MenuCommandProps extends 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_utils","import_react","import_utils","import_core","import_utils","import_jsx_runtime","_a","import_jsx_runtime"]}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
MenuOptionGroup
|
|
4
|
-
} from "./chunk-
|
|
5
|
-
import "./chunk-
|
|
6
|
-
import "./chunk-
|
|
4
|
+
} from "./chunk-SI3WI4AI.mjs";
|
|
5
|
+
import "./chunk-HVOHR2NQ.mjs";
|
|
6
|
+
import "./chunk-T7CXLEBW.mjs";
|
|
7
|
+
import "./chunk-ZUOFHOX6.mjs";
|
|
7
8
|
export {
|
|
8
9
|
MenuOptionGroup
|
|
9
10
|
};
|
package/dist/menu.d.mts
CHANGED
|
@@ -1,97 +1,17 @@
|
|
|
1
|
-
import
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
22
|
+
export { Menu, type MenuOptions, type MenuProps };
|