@yamada-ui/menu 1.2.1-dev-20240524124123 → 1.3.0-dev-20240527094142
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{chunk-XC57KMED.mjs → chunk-4TCOEKCC.mjs} +2 -2
- package/dist/{chunk-JVRMLEOK.mjs → chunk-AOZIU76G.mjs} +2 -2
- package/dist/{chunk-66RA5MSJ.mjs → chunk-COK5BGV5.mjs} +3 -3
- package/dist/{chunk-74RMGTSQ.mjs → chunk-HWCJQOGH.mjs} +2 -2
- package/dist/{chunk-UTYWCSIS.mjs → chunk-LNHCNVHB.mjs} +49 -25
- package/dist/chunk-LNHCNVHB.mjs.map +1 -0
- package/dist/chunk-Q4PSHEXP.mjs +46 -0
- package/dist/chunk-Q4PSHEXP.mjs.map +1 -0
- package/dist/{chunk-YBDOCC7O.mjs → chunk-TCN4S66S.mjs} +2 -2
- package/dist/context-menu-trigger.d.mts +7 -0
- package/dist/context-menu-trigger.d.ts +7 -0
- package/dist/context-menu-trigger.js +79 -0
- package/dist/context-menu-trigger.js.map +1 -0
- package/dist/context-menu-trigger.mjs +9 -0
- package/dist/context-menu-trigger.mjs.map +1 -0
- package/dist/context-menu.d.mts +21 -0
- package/dist/context-menu.d.ts +21 -0
- package/dist/context-menu.js +500 -0
- package/dist/context-menu.js.map +1 -0
- package/dist/context-menu.mjs +10 -0
- package/dist/context-menu.mjs.map +1 -0
- package/dist/index.d.mts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +165 -104
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +16 -10
- package/dist/menu-button.js.map +1 -1
- package/dist/menu-button.mjs +2 -2
- package/dist/menu-divider.js.map +1 -1
- package/dist/menu-divider.mjs +2 -2
- package/dist/menu-group.js.map +1 -1
- package/dist/menu-group.mjs +2 -2
- package/dist/menu-item.js.map +1 -1
- package/dist/menu-item.mjs +1 -1
- package/dist/menu-list.js.map +1 -1
- package/dist/menu-list.mjs +2 -2
- package/dist/menu-option-group.js.map +1 -1
- package/dist/menu-option-group.mjs +3 -3
- package/dist/menu.js +64 -49
- package/dist/menu.js.map +1 -1
- package/dist/menu.mjs +1 -1
- package/package.json +7 -7
- package/dist/chunk-UTYWCSIS.mjs.map +0 -1
- /package/dist/{chunk-XC57KMED.mjs.map → chunk-4TCOEKCC.mjs.map} +0 -0
- /package/dist/{chunk-JVRMLEOK.mjs.map → chunk-AOZIU76G.mjs.map} +0 -0
- /package/dist/{chunk-66RA5MSJ.mjs.map → chunk-COK5BGV5.mjs.map} +0 -0
- /package/dist/{chunk-74RMGTSQ.mjs.map → chunk-HWCJQOGH.mjs.map} +0 -0
- /package/dist/{chunk-YBDOCC7O.mjs.map → chunk-TCN4S66S.mjs.map} +0 -0
package/dist/index.js
CHANGED
@@ -21,6 +21,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
21
21
|
// src/index.ts
|
22
22
|
var src_exports = {};
|
23
23
|
__export(src_exports, {
|
24
|
+
ContextMenu: () => ContextMenu,
|
25
|
+
ContextMenuTrigger: () => ContextMenuTrigger,
|
24
26
|
Menu: () => Menu,
|
25
27
|
MenuButton: () => MenuButton,
|
26
28
|
MenuCommand: () => MenuCommand,
|
@@ -36,28 +38,44 @@ __export(src_exports, {
|
|
36
38
|
module.exports = __toCommonJS(src_exports);
|
37
39
|
|
38
40
|
// src/menu.tsx
|
39
|
-
var
|
41
|
+
var import_core3 = require("@yamada-ui/core");
|
40
42
|
var import_popover = require("@yamada-ui/popover");
|
41
43
|
var import_use_descendant = require("@yamada-ui/use-descendant");
|
42
44
|
var import_use_disclosure = require("@yamada-ui/use-disclosure");
|
43
|
-
var
|
45
|
+
var import_utils3 = require("@yamada-ui/utils");
|
44
46
|
var import_react2 = require("react");
|
45
47
|
|
46
|
-
// src/menu
|
48
|
+
// src/context-menu.tsx
|
47
49
|
var import_core = require("@yamada-ui/core");
|
48
|
-
var import_use_clickable = require("@yamada-ui/use-clickable");
|
49
50
|
var import_utils = require("@yamada-ui/utils");
|
50
|
-
var import_react = require("react");
|
51
51
|
var import_jsx_runtime = require("react/jsx-runtime");
|
52
|
-
var [
|
52
|
+
var [ContextMenuProvider, useContextMenu] = (0, import_utils.createContext)(
|
53
|
+
{
|
54
|
+
strict: false,
|
55
|
+
name: "ContextMenuContext"
|
56
|
+
}
|
57
|
+
);
|
58
|
+
var ContextMenu = (props) => {
|
59
|
+
const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("ContextMenu", props);
|
60
|
+
const { ...rest } = (0, import_core.omitThemeProps)(mergedProps);
|
61
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextMenuProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu, { trigger: "contextmenu", ...rest }) });
|
62
|
+
};
|
63
|
+
|
64
|
+
// src/menu-item.tsx
|
65
|
+
var import_core2 = require("@yamada-ui/core");
|
66
|
+
var import_use_clickable = require("@yamada-ui/use-clickable");
|
67
|
+
var import_utils2 = require("@yamada-ui/utils");
|
68
|
+
var import_react = require("react");
|
69
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
70
|
+
var [UpstreamMenuItemProvider, useUpstreamMenuItem] = (0, import_utils2.createContext)({
|
53
71
|
strict: false,
|
54
72
|
name: "UpstreamMenuItemContext"
|
55
73
|
});
|
56
74
|
var isTargetMenuItem = (target) => {
|
57
75
|
var _a;
|
58
|
-
return (0,
|
76
|
+
return (0, import_utils2.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menu-item"));
|
59
77
|
};
|
60
|
-
var MenuItem = (0,
|
78
|
+
var MenuItem = (0, import_core2.forwardRef)(
|
61
79
|
({
|
62
80
|
as,
|
63
81
|
className,
|
@@ -111,7 +129,7 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
111
129
|
const onMouseMove = (0, import_react.useCallback)(
|
112
130
|
(event) => {
|
113
131
|
onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
|
114
|
-
if (buttonRef.current && !(0,
|
132
|
+
if (buttonRef.current && !(0, import_utils2.isActiveElement)(buttonRef.current))
|
115
133
|
onMouseEnter(event);
|
116
134
|
},
|
117
135
|
[onMouseEnter, onMouseMoveProp]
|
@@ -160,7 +178,7 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
160
178
|
(ev) => {
|
161
179
|
onKeyDownProp == null ? void 0 : onKeyDownProp(ev);
|
162
180
|
const actions = {
|
163
|
-
ArrowLeft: isNested ? (0,
|
181
|
+
ArrowLeft: isNested ? (0, import_utils2.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
|
164
182
|
};
|
165
183
|
const action = actions[ev.key];
|
166
184
|
if (!action)
|
@@ -179,12 +197,12 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
179
197
|
onMouseEnter,
|
180
198
|
onMouseMove,
|
181
199
|
onMouseLeave,
|
182
|
-
onKeyDown: (0,
|
183
|
-
ref: (0,
|
200
|
+
onKeyDown: (0, import_utils2.handlerAll)(onKeyDown, onKeyDownRef.current),
|
201
|
+
ref: (0, import_utils2.mergeRefs)(register, buttonRef, ref),
|
184
202
|
isDisabled,
|
185
203
|
isFocusable
|
186
204
|
});
|
187
|
-
(0,
|
205
|
+
(0, import_utils2.useUpdateEffect)(() => {
|
188
206
|
if (!isOpen)
|
189
207
|
return;
|
190
208
|
const id = requestAnimationFrameId.current;
|
@@ -196,7 +214,7 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
196
214
|
(_a2 = buttonRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
|
197
215
|
requestAnimationFrameId.current = null;
|
198
216
|
});
|
199
|
-
} else if (menuRef.current && !(0,
|
217
|
+
} else if (menuRef.current && !(0, import_utils2.isActiveElement)(menuRef.current)) {
|
200
218
|
menuRef.current.focus({ preventScroll: true });
|
201
219
|
}
|
202
220
|
return () => {
|
@@ -205,7 +223,7 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
205
223
|
};
|
206
224
|
}, [isFocused, trulyDisabled, menuRef, isOpen]);
|
207
225
|
type = as || type ? type != null ? type : void 0 : "button";
|
208
|
-
children = icon || command ? /* @__PURE__ */ (0,
|
226
|
+
children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: { flex: 1 }, children }) : children;
|
209
227
|
const css = {
|
210
228
|
textDecoration: "none",
|
211
229
|
color: "inherit",
|
@@ -219,7 +237,7 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
219
237
|
gap: "0.75rem",
|
220
238
|
...styles.item
|
221
239
|
};
|
222
|
-
return /* @__PURE__ */ (0,
|
240
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
223
241
|
UpstreamMenuItemProvider,
|
224
242
|
{
|
225
243
|
value: {
|
@@ -228,8 +246,8 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
228
246
|
setDownstreamOpen,
|
229
247
|
hasDownstreamRef
|
230
248
|
},
|
231
|
-
children: /* @__PURE__ */ (0,
|
232
|
-
|
249
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
250
|
+
import_core2.ui.li,
|
233
251
|
{
|
234
252
|
...rest,
|
235
253
|
...isDownstreamOpen ? { "data-active": "" } : {},
|
@@ -237,12 +255,12 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
237
255
|
type,
|
238
256
|
role: "menu-item",
|
239
257
|
tabIndex: isFocused ? 0 : -1,
|
240
|
-
className: (0,
|
258
|
+
className: (0, import_utils2.cx)("ui-menu__item", className),
|
241
259
|
__css: css,
|
242
260
|
children: [
|
243
|
-
icon ? /* @__PURE__ */ (0,
|
261
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, { children: icon }) : null,
|
244
262
|
children,
|
245
|
-
command ? /* @__PURE__ */ (0,
|
263
|
+
command ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuCommand, { children: command }) : null
|
246
264
|
]
|
247
265
|
}
|
248
266
|
)
|
@@ -250,25 +268,25 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
250
268
|
);
|
251
269
|
}
|
252
270
|
);
|
253
|
-
var MenuOptionItem = (0,
|
271
|
+
var MenuOptionItem = (0, import_core2.forwardRef)(
|
254
272
|
({ className, icon, isChecked, closeOnSelect = false, children, ...rest }, ref) => {
|
255
|
-
return /* @__PURE__ */ (0,
|
273
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
256
274
|
MenuItem,
|
257
275
|
{
|
258
276
|
ref,
|
259
|
-
className: (0,
|
260
|
-
"aria-checked": (0,
|
277
|
+
className: (0, import_utils2.cx)("ui-menu__item--option", className),
|
278
|
+
"aria-checked": (0, import_utils2.ariaAttr)(isChecked),
|
261
279
|
closeOnSelect,
|
262
280
|
...rest,
|
263
281
|
children: [
|
264
|
-
icon !== null ? /* @__PURE__ */ (0,
|
282
|
+
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, { opacity: isChecked ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, {}) }) : null,
|
265
283
|
children
|
266
284
|
]
|
267
285
|
}
|
268
286
|
);
|
269
287
|
}
|
270
288
|
);
|
271
|
-
var MenuIcon = (0,
|
289
|
+
var MenuIcon = (0, import_core2.forwardRef)(
|
272
290
|
({ className, ...rest }, ref) => {
|
273
291
|
const { styles } = useMenu();
|
274
292
|
const css = {
|
@@ -279,33 +297,33 @@ var MenuIcon = (0, import_core.forwardRef)(
|
|
279
297
|
fontSize: "0.85em",
|
280
298
|
...styles.icon
|
281
299
|
};
|
282
|
-
return /* @__PURE__ */ (0,
|
283
|
-
|
300
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
301
|
+
import_core2.ui.span,
|
284
302
|
{
|
285
303
|
ref,
|
286
|
-
className: (0,
|
304
|
+
className: (0, import_utils2.cx)("ui-menu__item__icon", className),
|
287
305
|
__css: css,
|
288
306
|
...rest
|
289
307
|
}
|
290
308
|
);
|
291
309
|
}
|
292
310
|
);
|
293
|
-
var MenuCommand = (0,
|
311
|
+
var MenuCommand = (0, import_core2.forwardRef)(
|
294
312
|
({ className, ...rest }, ref) => {
|
295
313
|
const { styles } = useMenu();
|
296
314
|
const css = { ...styles.command };
|
297
|
-
return /* @__PURE__ */ (0,
|
298
|
-
|
315
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
316
|
+
import_core2.ui.span,
|
299
317
|
{
|
300
318
|
ref,
|
301
|
-
className: (0,
|
319
|
+
className: (0, import_utils2.cx)("ui-menu__item__command", className),
|
302
320
|
__css: css,
|
303
321
|
...rest
|
304
322
|
}
|
305
323
|
);
|
306
324
|
}
|
307
325
|
);
|
308
|
-
var CheckIcon = () => /* @__PURE__ */ (0,
|
326
|
+
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)(
|
309
327
|
"polygon",
|
310
328
|
{
|
311
329
|
fill: "currentColor",
|
@@ -314,24 +332,28 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewB
|
|
314
332
|
) });
|
315
333
|
|
316
334
|
// src/menu.tsx
|
317
|
-
var
|
335
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
318
336
|
var {
|
319
337
|
DescendantsContextProvider,
|
320
338
|
useDescendantsContext: useMenuDescendantsContext,
|
321
339
|
useDescendants,
|
322
340
|
useDescendant: useMenuDescendant
|
323
341
|
} = (0, import_use_descendant.createDescendant)();
|
324
|
-
var [MenuProvider, useMenu] = (0,
|
342
|
+
var [MenuProvider, useMenu] = (0, import_utils3.createContext)({
|
325
343
|
name: "MenuContext",
|
326
344
|
errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
|
327
345
|
});
|
328
|
-
var [UpstreamMenuProvider, useUpstreamMenu] = (0,
|
346
|
+
var [UpstreamMenuProvider, useUpstreamMenu] = (0, import_utils3.createContext)({
|
329
347
|
strict: false,
|
330
348
|
name: "UpstreamMenuContext"
|
331
349
|
});
|
332
350
|
var Menu = (props) => {
|
333
|
-
var _a, _b;
|
334
|
-
const
|
351
|
+
var _a, _b, _c;
|
352
|
+
const { styles: contextMenuStyles } = (_a = useContextMenu()) != null ? _a : {};
|
353
|
+
const [styles, mergedProps] = (0, import_core3.useMultiComponentStyle)("Menu", props, {
|
354
|
+
isProcessSkip: !!contextMenuStyles,
|
355
|
+
styles: contextMenuStyles
|
356
|
+
});
|
335
357
|
let {
|
336
358
|
initialFocusRef,
|
337
359
|
closeOnSelect = true,
|
@@ -342,9 +364,9 @@ var Menu = (props) => {
|
|
342
364
|
onOpen: onOpenProp,
|
343
365
|
onClose: onCloseProp,
|
344
366
|
...rest
|
345
|
-
} = (0,
|
346
|
-
const { relatedRef, onUpstreamClose, onDownstreamCloseMapRef } = (
|
347
|
-
const { setDownstreamOpen, hasDownstreamRef } = (
|
367
|
+
} = (0, import_core3.omitThemeProps)(mergedProps);
|
368
|
+
const { relatedRef, onUpstreamClose, onDownstreamCloseMapRef } = (_b = useUpstreamMenu()) != null ? _b : {};
|
369
|
+
const { setDownstreamOpen, hasDownstreamRef } = (_c = useUpstreamMenuItem()) != null ? _c : {};
|
348
370
|
const isNested = !!relatedRef;
|
349
371
|
if (isNested) {
|
350
372
|
placement != null ? placement : placement = "right-start";
|
@@ -423,23 +445,23 @@ var Menu = (props) => {
|
|
423
445
|
hasDownstreamRef.current = false;
|
424
446
|
};
|
425
447
|
});
|
426
|
-
(0,
|
448
|
+
(0, import_utils3.useUpdateEffect)(() => {
|
427
449
|
if (!isOpen)
|
428
450
|
setFocusedIndex(-1);
|
429
451
|
}, [isOpen]);
|
430
|
-
(0,
|
452
|
+
(0, import_utils3.useUnmountEffect)(() => {
|
431
453
|
timeoutIds.current.forEach((id2) => clearTimeout(id2));
|
432
454
|
timeoutIds.current.clear();
|
433
455
|
});
|
434
|
-
return /* @__PURE__ */ (0,
|
456
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
435
457
|
UpstreamMenuProvider,
|
436
458
|
{
|
437
459
|
value: {
|
438
460
|
relatedRef: menuRef,
|
439
461
|
onDownstreamCloseMapRef: onCloseMapRef,
|
440
|
-
onUpstreamClose: (0,
|
462
|
+
onUpstreamClose: (0, import_utils3.funcAll)(onUpstreamClose, onClose)
|
441
463
|
},
|
442
|
-
children: /* @__PURE__ */ (0,
|
464
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
443
465
|
MenuProvider,
|
444
466
|
{
|
445
467
|
value: {
|
@@ -457,7 +479,7 @@ var Menu = (props) => {
|
|
457
479
|
isNested,
|
458
480
|
styles
|
459
481
|
},
|
460
|
-
children: /* @__PURE__ */ (0,
|
482
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
461
483
|
import_popover.Popover,
|
462
484
|
{
|
463
485
|
...{
|
@@ -483,13 +505,13 @@ var Menu = (props) => {
|
|
483
505
|
};
|
484
506
|
|
485
507
|
// src/menu-button.tsx
|
486
|
-
var
|
508
|
+
var import_core4 = require("@yamada-ui/core");
|
487
509
|
var import_icon = require("@yamada-ui/icon");
|
488
510
|
var import_popover2 = require("@yamada-ui/popover");
|
489
|
-
var
|
511
|
+
var import_utils4 = require("@yamada-ui/utils");
|
490
512
|
var import_react3 = require("react");
|
491
|
-
var
|
492
|
-
var MenuButton = (0,
|
513
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
514
|
+
var MenuButton = (0, import_core4.forwardRef)(
|
493
515
|
({ className, children, as: As, ...rest }, ref) => {
|
494
516
|
var _a;
|
495
517
|
const { onKeyDownRef, onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
|
@@ -497,9 +519,9 @@ var MenuButton = (0, import_core3.forwardRef)(
|
|
497
519
|
const onKeyDown = (0, import_react3.useCallback)(
|
498
520
|
(ev) => {
|
499
521
|
const actions = {
|
500
|
-
Enter: (0,
|
501
|
-
ArrowDown: (0,
|
502
|
-
ArrowUp: (0,
|
522
|
+
Enter: (0, import_utils4.funcAll)(onOpen, onFocusFirstItem),
|
523
|
+
ArrowDown: (0, import_utils4.funcAll)(onOpen, onFocusFirstItem),
|
524
|
+
ArrowUp: (0, import_utils4.funcAll)(onOpen, onFocusLastItem)
|
503
525
|
};
|
504
526
|
const action = actions[ev.key];
|
505
527
|
if (!action)
|
@@ -512,8 +534,8 @@ var MenuButton = (0, import_core3.forwardRef)(
|
|
512
534
|
const onItemKeyDown = (0, import_react3.useCallback)(
|
513
535
|
(ev) => {
|
514
536
|
const actions = {
|
515
|
-
ArrowRight: !isOpen ? (0,
|
516
|
-
ArrowLeft: isOpen ? (0,
|
537
|
+
ArrowRight: !isOpen ? (0, import_utils4.funcAll)(onOpen, onFocusFirstItem) : void 0,
|
538
|
+
ArrowLeft: isOpen ? (0, import_utils4.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
|
517
539
|
};
|
518
540
|
const action = actions[ev.key];
|
519
541
|
if (!action)
|
@@ -523,24 +545,24 @@ var MenuButton = (0, import_core3.forwardRef)(
|
|
523
545
|
},
|
524
546
|
[isOpen, onOpen, onFocusFirstItem, onUpstreamRestoreFocus, onClose]
|
525
547
|
);
|
526
|
-
(0,
|
527
|
-
const Component = As ? (0,
|
528
|
-
return /* @__PURE__ */ (0,
|
548
|
+
(0, import_utils4.assignRef)(onKeyDownRef, onItemKeyDown);
|
549
|
+
const Component = As ? (0, import_core4.ui)(As) : Button;
|
550
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
529
551
|
Component,
|
530
552
|
{
|
531
553
|
ref,
|
532
|
-
className: (0,
|
554
|
+
className: (0, import_utils4.cx)("ui-menu", className),
|
533
555
|
"aria-haspopup": "menu",
|
534
556
|
"aria-expanded": isOpen,
|
535
557
|
...rest,
|
536
|
-
"data-active": (0,
|
537
|
-
onKeyDown: (0,
|
558
|
+
"data-active": (0, import_utils4.dataAttr)(isOpen),
|
559
|
+
onKeyDown: (0, import_utils4.handlerAll)(rest.onKeyDown, onKeyDown),
|
538
560
|
children
|
539
561
|
}
|
540
562
|
) });
|
541
563
|
}
|
542
564
|
);
|
543
|
-
var Button = (0,
|
565
|
+
var Button = (0, import_core4.forwardRef)((rest, ref) => {
|
544
566
|
const { styles } = useMenu();
|
545
567
|
const css = {
|
546
568
|
display: "inline-flex",
|
@@ -549,20 +571,20 @@ var Button = (0, import_core3.forwardRef)((rest, ref) => {
|
|
549
571
|
outline: 0,
|
550
572
|
...styles.button
|
551
573
|
};
|
552
|
-
return /* @__PURE__ */ (0,
|
574
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.button, { ref, __css: css, ...rest });
|
553
575
|
});
|
554
|
-
var MenuItemButton = (0,
|
576
|
+
var MenuItemButton = (0, import_core4.forwardRef)(
|
555
577
|
({ className, children, innerProps, icon, iconProps, ...rest }, ref) => {
|
556
|
-
return /* @__PURE__ */ (0,
|
578
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
557
579
|
MenuButton,
|
558
580
|
{
|
559
581
|
ref,
|
560
|
-
className: (0,
|
582
|
+
className: (0, import_utils4.cx)("ui-menu__item-button", className),
|
561
583
|
flex: "1",
|
562
584
|
...rest,
|
563
585
|
children: [
|
564
|
-
/* @__PURE__ */ (0,
|
565
|
-
/* @__PURE__ */ (0,
|
586
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.span, { as: "span", flex: "1", ...innerProps, children }),
|
587
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuIcon, { ...iconProps, children: icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icon.ChevronIcon, { fontSize: "1.5em", transform: "rotate(-90deg)" }) })
|
566
588
|
]
|
567
589
|
}
|
568
590
|
);
|
@@ -570,12 +592,12 @@ var MenuItemButton = (0, import_core3.forwardRef)(
|
|
570
592
|
);
|
571
593
|
|
572
594
|
// src/menu-list.tsx
|
573
|
-
var
|
595
|
+
var import_core5 = require("@yamada-ui/core");
|
574
596
|
var import_popover3 = require("@yamada-ui/popover");
|
575
|
-
var
|
597
|
+
var import_utils5 = require("@yamada-ui/utils");
|
576
598
|
var import_react4 = require("react");
|
577
|
-
var
|
578
|
-
var MenuList = (0,
|
599
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
600
|
+
var MenuList = (0, import_core5.forwardRef)(
|
579
601
|
({ className, ...rest }, ref) => {
|
580
602
|
const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } = useMenu();
|
581
603
|
const descendants = useMenuDescendantsContext();
|
@@ -618,48 +640,48 @@ var MenuList = (0, import_core4.forwardRef)(
|
|
618
640
|
[focusedIndex, onClose, onFirst, onLast, onNext, onPrev]
|
619
641
|
);
|
620
642
|
const css = { ...styles.list };
|
621
|
-
return /* @__PURE__ */ (0,
|
643
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
622
644
|
import_popover3.PopoverContent,
|
623
645
|
{
|
624
646
|
as: "ul",
|
625
|
-
ref: (0,
|
626
|
-
className: (0,
|
647
|
+
ref: (0, import_utils5.mergeRefs)(menuRef, ref),
|
648
|
+
className: (0, import_utils5.cx)("ui-menu__list", className),
|
627
649
|
role: "menu",
|
628
650
|
tabIndex: -1,
|
629
651
|
__css: css,
|
630
652
|
...rest,
|
631
|
-
onKeyDown: (0,
|
653
|
+
onKeyDown: (0, import_utils5.handlerAll)(rest.onKeyDown, onKeyDown)
|
632
654
|
}
|
633
655
|
);
|
634
656
|
}
|
635
657
|
);
|
636
658
|
|
637
659
|
// src/menu-group.tsx
|
638
|
-
var
|
639
|
-
var
|
640
|
-
var
|
641
|
-
var MenuGroup = (0,
|
660
|
+
var import_core6 = require("@yamada-ui/core");
|
661
|
+
var import_utils6 = require("@yamada-ui/utils");
|
662
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
663
|
+
var MenuGroup = (0, import_core6.forwardRef)(
|
642
664
|
({ className, label, children, ...rest }, ref) => {
|
643
665
|
const { styles } = useMenu();
|
644
666
|
const css = { ...styles.group };
|
645
|
-
return /* @__PURE__ */ (0,
|
646
|
-
|
667
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
668
|
+
import_core6.ui.li,
|
647
669
|
{
|
648
670
|
ref,
|
649
|
-
className: (0,
|
671
|
+
className: (0, import_utils6.cx)("ui-menu__item", "ui-menu__item--group", className),
|
650
672
|
role: "group",
|
651
673
|
__css: css,
|
652
674
|
...rest,
|
653
675
|
children: [
|
654
|
-
label ? /* @__PURE__ */ (0,
|
655
|
-
|
676
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
677
|
+
import_core6.ui.span,
|
656
678
|
{
|
657
|
-
className: (0,
|
679
|
+
className: (0, import_utils6.cx)("ui-menu__item--group-label"),
|
658
680
|
__css: styles.groupLabel,
|
659
681
|
children: label
|
660
682
|
}
|
661
683
|
) : null,
|
662
|
-
/* @__PURE__ */ (0,
|
684
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.ui.ul, { className: "ui-menu__item__group", children })
|
663
685
|
]
|
664
686
|
}
|
665
687
|
);
|
@@ -668,9 +690,9 @@ var MenuGroup = (0, import_core5.forwardRef)(
|
|
668
690
|
|
669
691
|
// src/menu-option-group.tsx
|
670
692
|
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
|
671
|
-
var
|
693
|
+
var import_utils7 = require("@yamada-ui/utils");
|
672
694
|
var import_react5 = require("react");
|
673
|
-
var
|
695
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
674
696
|
var MenuOptionGroup = (0, import_react5.forwardRef)(
|
675
697
|
({
|
676
698
|
className,
|
@@ -692,14 +714,14 @@ var MenuOptionGroup = (0, import_react5.forwardRef)(
|
|
692
714
|
(selectedValue) => {
|
693
715
|
if (isRadio && typeof value === "string")
|
694
716
|
setValue(selectedValue);
|
695
|
-
if (!isRadio && (0,
|
717
|
+
if (!isRadio && (0, import_utils7.isArray)(value)) {
|
696
718
|
const nextValue = value.includes(selectedValue) ? value.filter((item) => item !== selectedValue) : value.concat(selectedValue);
|
697
719
|
setValue(nextValue);
|
698
720
|
}
|
699
721
|
},
|
700
722
|
[isRadio, value, setValue]
|
701
723
|
);
|
702
|
-
const validChildren = (0,
|
724
|
+
const validChildren = (0, import_utils7.getValidChildren)(children);
|
703
725
|
const cloneChildren = validChildren.map((child) => {
|
704
726
|
if (child.type !== MenuOptionItem)
|
705
727
|
return child;
|
@@ -708,14 +730,14 @@ var MenuOptionGroup = (0, import_react5.forwardRef)(
|
|
708
730
|
onChange(child.props.value);
|
709
731
|
(_b = (_a = child.props).onClick) == null ? void 0 : _b.call(_a, ev);
|
710
732
|
};
|
711
|
-
const isChecked = !isRadio && (0,
|
733
|
+
const isChecked = !isRadio && (0, import_utils7.isArray)(value) ? value.includes(child.props.value) : child.props.value === value;
|
712
734
|
return (0, import_react5.cloneElement)(child, { type, onClick, isChecked });
|
713
735
|
});
|
714
|
-
return /* @__PURE__ */ (0,
|
736
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
715
737
|
MenuGroup,
|
716
738
|
{
|
717
739
|
ref,
|
718
|
-
className: (0,
|
740
|
+
className: (0, import_utils7.cx)("ui-menu__item--group--option", className),
|
719
741
|
...rest,
|
720
742
|
children: cloneChildren
|
721
743
|
}
|
@@ -725,24 +747,63 @@ var MenuOptionGroup = (0, import_react5.forwardRef)(
|
|
725
747
|
MenuOptionGroup.displayName = "MenuOptionGroup";
|
726
748
|
|
727
749
|
// src/menu-divider.tsx
|
728
|
-
var
|
729
|
-
var
|
730
|
-
var
|
731
|
-
var MenuDivider = (0,
|
750
|
+
var import_core7 = require("@yamada-ui/core");
|
751
|
+
var import_utils8 = require("@yamada-ui/utils");
|
752
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
753
|
+
var MenuDivider = (0, import_core7.forwardRef)(({ className, ...rest }, ref) => {
|
732
754
|
const { styles } = useMenu();
|
733
755
|
const css = { ...styles.divider };
|
734
|
-
return /* @__PURE__ */ (0,
|
735
|
-
|
756
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
757
|
+
import_core7.ui.hr,
|
736
758
|
{
|
737
759
|
ref,
|
738
|
-
className: (0,
|
760
|
+
className: (0, import_utils8.cx)("ui-menu__divider", className),
|
739
761
|
__css: css,
|
740
762
|
...rest
|
741
763
|
}
|
742
764
|
);
|
743
765
|
});
|
766
|
+
|
767
|
+
// src/context-menu-trigger.tsx
|
768
|
+
var import_core8 = require("@yamada-ui/core");
|
769
|
+
var import_popover4 = require("@yamada-ui/popover");
|
770
|
+
var import_utils9 = require("@yamada-ui/utils");
|
771
|
+
var import_react6 = require("react");
|
772
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
773
|
+
var ContextMenuTrigger = (0, import_core8.forwardRef)(
|
774
|
+
({ children, className, ...rest }, ref) => {
|
775
|
+
const { styles } = useContextMenu();
|
776
|
+
const [position, setPosition] = (0, import_react6.useState)({ top: 0, left: 0 });
|
777
|
+
const css = { ...styles.container };
|
778
|
+
const onContextMenu = (ev) => {
|
779
|
+
setPosition({ top: ev.clientY, left: ev.clientX });
|
780
|
+
};
|
781
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
782
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_popover4.PopoverAnchor, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
783
|
+
import_core8.ui.div,
|
784
|
+
{
|
785
|
+
className: "ui-context-menu__anchor",
|
786
|
+
style: { position: "fixed", ...position }
|
787
|
+
}
|
788
|
+
) }),
|
789
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_popover4.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
790
|
+
import_core8.ui.div,
|
791
|
+
{
|
792
|
+
ref,
|
793
|
+
className: (0, import_utils9.cx)("ui-context-menu", className),
|
794
|
+
__css: css,
|
795
|
+
...rest,
|
796
|
+
onContextMenu: (0, import_utils9.handlerAll)(rest.onContextMenu, onContextMenu),
|
797
|
+
children
|
798
|
+
}
|
799
|
+
) })
|
800
|
+
] });
|
801
|
+
}
|
802
|
+
);
|
744
803
|
// Annotate the CommonJS export names for ESM import in node:
|
745
804
|
0 && (module.exports = {
|
805
|
+
ContextMenu,
|
806
|
+
ContextMenuTrigger,
|
746
807
|
Menu,
|
747
808
|
MenuButton,
|
748
809
|
MenuCommand,
|