@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.
Files changed (48) hide show
  1. package/dist/{chunk-XC57KMED.mjs → chunk-4TCOEKCC.mjs} +2 -2
  2. package/dist/{chunk-JVRMLEOK.mjs → chunk-AOZIU76G.mjs} +2 -2
  3. package/dist/{chunk-66RA5MSJ.mjs → chunk-COK5BGV5.mjs} +3 -3
  4. package/dist/{chunk-74RMGTSQ.mjs → chunk-HWCJQOGH.mjs} +2 -2
  5. package/dist/{chunk-UTYWCSIS.mjs → chunk-LNHCNVHB.mjs} +49 -25
  6. package/dist/chunk-LNHCNVHB.mjs.map +1 -0
  7. package/dist/chunk-Q4PSHEXP.mjs +46 -0
  8. package/dist/chunk-Q4PSHEXP.mjs.map +1 -0
  9. package/dist/{chunk-YBDOCC7O.mjs → chunk-TCN4S66S.mjs} +2 -2
  10. package/dist/context-menu-trigger.d.mts +7 -0
  11. package/dist/context-menu-trigger.d.ts +7 -0
  12. package/dist/context-menu-trigger.js +79 -0
  13. package/dist/context-menu-trigger.js.map +1 -0
  14. package/dist/context-menu-trigger.mjs +9 -0
  15. package/dist/context-menu-trigger.mjs.map +1 -0
  16. package/dist/context-menu.d.mts +21 -0
  17. package/dist/context-menu.d.ts +21 -0
  18. package/dist/context-menu.js +500 -0
  19. package/dist/context-menu.js.map +1 -0
  20. package/dist/context-menu.mjs +10 -0
  21. package/dist/context-menu.mjs.map +1 -0
  22. package/dist/index.d.mts +2 -0
  23. package/dist/index.d.ts +2 -0
  24. package/dist/index.js +165 -104
  25. package/dist/index.js.map +1 -1
  26. package/dist/index.mjs +16 -10
  27. package/dist/menu-button.js.map +1 -1
  28. package/dist/menu-button.mjs +2 -2
  29. package/dist/menu-divider.js.map +1 -1
  30. package/dist/menu-divider.mjs +2 -2
  31. package/dist/menu-group.js.map +1 -1
  32. package/dist/menu-group.mjs +2 -2
  33. package/dist/menu-item.js.map +1 -1
  34. package/dist/menu-item.mjs +1 -1
  35. package/dist/menu-list.js.map +1 -1
  36. package/dist/menu-list.mjs +2 -2
  37. package/dist/menu-option-group.js.map +1 -1
  38. package/dist/menu-option-group.mjs +3 -3
  39. package/dist/menu.js +64 -49
  40. package/dist/menu.js.map +1 -1
  41. package/dist/menu.mjs +1 -1
  42. package/package.json +7 -7
  43. package/dist/chunk-UTYWCSIS.mjs.map +0 -1
  44. /package/dist/{chunk-XC57KMED.mjs.map → chunk-4TCOEKCC.mjs.map} +0 -0
  45. /package/dist/{chunk-JVRMLEOK.mjs.map → chunk-AOZIU76G.mjs.map} +0 -0
  46. /package/dist/{chunk-66RA5MSJ.mjs.map → chunk-COK5BGV5.mjs.map} +0 -0
  47. /package/dist/{chunk-74RMGTSQ.mjs.map → chunk-HWCJQOGH.mjs.map} +0 -0
  48. /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 import_core2 = require("@yamada-ui/core");
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 import_utils2 = require("@yamada-ui/utils");
45
+ var import_utils3 = require("@yamada-ui/utils");
44
46
  var import_react2 = require("react");
45
47
 
46
- // src/menu-item.tsx
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 [UpstreamMenuItemProvider, useUpstreamMenuItem] = (0, import_utils.createContext)({
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, import_utils.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menu-item"));
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, import_core.forwardRef)(
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, import_utils.isActiveElement)(buttonRef.current))
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, import_utils.funcAll)(onUpstreamRestoreFocus, onClose) : void 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, import_utils.handlerAll)(onKeyDown, onKeyDownRef.current),
183
- ref: (0, import_utils.mergeRefs)(register, buttonRef, ref),
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, import_utils.useUpdateEffect)(() => {
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, import_utils.isActiveElement)(menuRef.current)) {
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, import_jsx_runtime.jsx)(import_core.ui.span, { style: { flex: 1 }, children }) : children;
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, import_jsx_runtime.jsx)(
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, import_jsx_runtime.jsxs)(
232
- import_core.ui.li,
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, import_utils.cx)("ui-menu__item", className),
258
+ className: (0, import_utils2.cx)("ui-menu__item", className),
241
259
  __css: css,
242
260
  children: [
243
- icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuIcon, { children: icon }) : null,
261
+ icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, { children: icon }) : null,
244
262
  children,
245
- command ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuCommand, { children: command }) : null
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, import_core.forwardRef)(
271
+ var MenuOptionItem = (0, import_core2.forwardRef)(
254
272
  ({ className, icon, isChecked, closeOnSelect = false, children, ...rest }, ref) => {
255
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
273
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
256
274
  MenuItem,
257
275
  {
258
276
  ref,
259
- className: (0, import_utils.cx)("ui-menu__item--option", className),
260
- "aria-checked": (0, import_utils.ariaAttr)(isChecked),
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, import_jsx_runtime.jsx)(MenuIcon, { opacity: isChecked ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, {}) }) : null,
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, import_core.forwardRef)(
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, import_jsx_runtime.jsx)(
283
- import_core.ui.span,
300
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
301
+ import_core2.ui.span,
284
302
  {
285
303
  ref,
286
- className: (0, import_utils.cx)("ui-menu__item__icon", className),
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, import_core.forwardRef)(
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, import_jsx_runtime.jsx)(
298
- import_core.ui.span,
315
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
316
+ import_core2.ui.span,
299
317
  {
300
318
  ref,
301
- className: (0, import_utils.cx)("ui-menu__item__command", className),
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, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
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 import_jsx_runtime2 = require("react/jsx-runtime");
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, import_utils2.createContext)({
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, import_utils2.createContext)({
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 [styles, mergedProps] = (0, import_core2.useMultiComponentStyle)("Menu", props);
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, import_core2.omitThemeProps)(mergedProps);
346
- const { relatedRef, onUpstreamClose, onDownstreamCloseMapRef } = (_a = useUpstreamMenu()) != null ? _a : {};
347
- const { setDownstreamOpen, hasDownstreamRef } = (_b = useUpstreamMenuItem()) != null ? _b : {};
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, import_utils2.useUpdateEffect)(() => {
448
+ (0, import_utils3.useUpdateEffect)(() => {
427
449
  if (!isOpen)
428
450
  setFocusedIndex(-1);
429
451
  }, [isOpen]);
430
- (0, import_utils2.useUnmountEffect)(() => {
452
+ (0, import_utils3.useUnmountEffect)(() => {
431
453
  timeoutIds.current.forEach((id2) => clearTimeout(id2));
432
454
  timeoutIds.current.clear();
433
455
  });
434
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
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, import_utils2.funcAll)(onUpstreamClose, onClose)
462
+ onUpstreamClose: (0, import_utils3.funcAll)(onUpstreamClose, onClose)
441
463
  },
442
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
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, import_jsx_runtime2.jsx)(
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 import_core3 = require("@yamada-ui/core");
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 import_utils3 = require("@yamada-ui/utils");
511
+ var import_utils4 = require("@yamada-ui/utils");
490
512
  var import_react3 = require("react");
491
- var import_jsx_runtime3 = require("react/jsx-runtime");
492
- var MenuButton = (0, import_core3.forwardRef)(
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, import_utils3.funcAll)(onOpen, onFocusFirstItem),
501
- ArrowDown: (0, import_utils3.funcAll)(onOpen, onFocusFirstItem),
502
- ArrowUp: (0, import_utils3.funcAll)(onOpen, onFocusLastItem)
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, import_utils3.funcAll)(onOpen, onFocusFirstItem) : void 0,
516
- ArrowLeft: isOpen ? (0, import_utils3.funcAll)(onUpstreamRestoreFocus, onClose) : void 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, import_utils3.assignRef)(onKeyDownRef, onItemKeyDown);
527
- const Component = As ? (0, import_core3.ui)(As) : Button;
528
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
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, import_utils3.cx)("ui-menu", className),
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, import_utils3.dataAttr)(isOpen),
537
- onKeyDown: (0, import_utils3.handlerAll)(rest.onKeyDown, onKeyDown),
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, import_core3.forwardRef)((rest, ref) => {
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, import_jsx_runtime3.jsx)(import_core3.ui.button, { ref, __css: css, ...rest });
574
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.button, { ref, __css: css, ...rest });
553
575
  });
554
- var MenuItemButton = (0, import_core3.forwardRef)(
576
+ var MenuItemButton = (0, import_core4.forwardRef)(
555
577
  ({ className, children, innerProps, icon, iconProps, ...rest }, ref) => {
556
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
578
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
557
579
  MenuButton,
558
580
  {
559
581
  ref,
560
- className: (0, import_utils3.cx)("ui-menu__item-button", className),
582
+ className: (0, import_utils4.cx)("ui-menu__item-button", className),
561
583
  flex: "1",
562
584
  ...rest,
563
585
  children: [
564
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { as: "span", flex: "1", ...innerProps, children }),
565
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuIcon, { ...iconProps, children: icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icon.ChevronIcon, { fontSize: "1.5em", transform: "rotate(-90deg)" }) })
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 import_core4 = require("@yamada-ui/core");
595
+ var import_core5 = require("@yamada-ui/core");
574
596
  var import_popover3 = require("@yamada-ui/popover");
575
- var import_utils4 = require("@yamada-ui/utils");
597
+ var import_utils5 = require("@yamada-ui/utils");
576
598
  var import_react4 = require("react");
577
- var import_jsx_runtime4 = require("react/jsx-runtime");
578
- var MenuList = (0, import_core4.forwardRef)(
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, import_jsx_runtime4.jsx)(
643
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
622
644
  import_popover3.PopoverContent,
623
645
  {
624
646
  as: "ul",
625
- ref: (0, import_utils4.mergeRefs)(menuRef, ref),
626
- className: (0, import_utils4.cx)("ui-menu__list", className),
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, import_utils4.handlerAll)(rest.onKeyDown, onKeyDown)
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 import_core5 = require("@yamada-ui/core");
639
- var import_utils5 = require("@yamada-ui/utils");
640
- var import_jsx_runtime5 = require("react/jsx-runtime");
641
- var MenuGroup = (0, import_core5.forwardRef)(
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, import_jsx_runtime5.jsxs)(
646
- import_core5.ui.li,
667
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
668
+ import_core6.ui.li,
647
669
  {
648
670
  ref,
649
- className: (0, import_utils5.cx)("ui-menu__item", "ui-menu__item--group", className),
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, import_jsx_runtime5.jsx)(
655
- import_core5.ui.span,
676
+ label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
677
+ import_core6.ui.span,
656
678
  {
657
- className: (0, import_utils5.cx)("ui-menu__item--group-label"),
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, import_jsx_runtime5.jsx)(import_core5.ui.ul, { className: "ui-menu__item__group", children })
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 import_utils6 = require("@yamada-ui/utils");
693
+ var import_utils7 = require("@yamada-ui/utils");
672
694
  var import_react5 = require("react");
673
- var import_jsx_runtime6 = require("react/jsx-runtime");
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, import_utils6.isArray)(value)) {
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, import_utils6.getValidChildren)(children);
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, import_utils6.isArray)(value) ? value.includes(child.props.value) : child.props.value === value;
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, import_jsx_runtime6.jsx)(
736
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
715
737
  MenuGroup,
716
738
  {
717
739
  ref,
718
- className: (0, import_utils6.cx)("ui-menu__item--group--option", className),
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 import_core6 = require("@yamada-ui/core");
729
- var import_utils7 = require("@yamada-ui/utils");
730
- var import_jsx_runtime7 = require("react/jsx-runtime");
731
- var MenuDivider = (0, import_core6.forwardRef)(({ className, ...rest }, ref) => {
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, import_jsx_runtime7.jsx)(
735
- import_core6.ui.hr,
756
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
757
+ import_core7.ui.hr,
736
758
  {
737
759
  ref,
738
- className: (0, import_utils7.cx)("ui-menu__divider", className),
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,