@yamada-ui/menu 1.2.0 → 1.3.0-dev-20240525154738

package/dist/index.js

@@ -21,6 +21,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  ContextMenu: () => ContextMenu,
+  ContextMenuTrigger: () => ContextMenuTrigger,
   Menu: () => Menu,
   MenuButton: () => MenuButton,
   MenuCommand: () => MenuCommand,
@@ -36,28 +38,44 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/menu.tsx
-var import_core2 = require("@yamada-ui/core");
+var import_core3 = require("@yamada-ui/core");
 var import_popover = require("@yamada-ui/popover");
 var import_use_descendant = require("@yamada-ui/use-descendant");
 var import_use_disclosure = require("@yamada-ui/use-disclosure");
-var import_utils2 = require("@yamada-ui/utils");
+var import_utils3 = require("@yamada-ui/utils");
 var import_react2 = require("react");
 
-// src/menu-item.tsx
+// src/context-menu.tsx
 var import_core = require("@yamada-ui/core");
-var import_use_clickable = require("@yamada-ui/use-clickable");
 var import_utils = require("@yamada-ui/utils");
-var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var [UpstreamMenuItemProvider, useUpstreamMenuItem] = (0, import_utils.createContext)({
+var [ContextMenuProvider, useContextMenu] = (0, import_utils.createContext)(
+  {
+    strict: false,
+    name: "ContextMenuContext"
+  }
+);
+var ContextMenu = (props) => {
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("ContextMenu", props);
+  const { ...rest } = (0, import_core.omitThemeProps)(mergedProps);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextMenuProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu, { trigger: "contextmenu", ...rest }) });
+};
+
+// src/menu-item.tsx
+var import_core2 = require("@yamada-ui/core");
+var import_use_clickable = require("@yamada-ui/use-clickable");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var [UpstreamMenuItemProvider, useUpstreamMenuItem] = (0, import_utils2.createContext)({
   strict: false,
   name: "UpstreamMenuItemContext"
 });
 var isTargetMenuItem = (target) => {
   var _a;
-  return (0, import_utils.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menu-item"));
+  return (0, import_utils2.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menu-item"));
 };
-var MenuItem = (0, import_core.forwardRef)(
+var MenuItem = (0, import_core2.forwardRef)(
   ({
     as,
     className,
@@ -111,7 +129,7 @@ var MenuItem = (0, import_core.forwardRef)(
     const onMouseMove = (0, import_react.useCallback)(
       (event) => {
         onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
-        if (buttonRef.current && !(0, import_utils.isActiveElement)(buttonRef.current))
+        if (buttonRef.current && !(0, import_utils2.isActiveElement)(buttonRef.current))
           onMouseEnter(event);
       },
       [onMouseEnter, onMouseMoveProp]
@@ -160,7 +178,7 @@ var MenuItem = (0, import_core.forwardRef)(
       (ev) => {
         onKeyDownProp == null ? void 0 : onKeyDownProp(ev);
         const actions = {
-          ArrowLeft: isNested ? (0, import_utils.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
+          ArrowLeft: isNested ? (0, import_utils2.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
         };
         const action = actions[ev.key];
         if (!action)
@@ -179,12 +197,12 @@ var MenuItem = (0, import_core.forwardRef)(
       onMouseEnter,
       onMouseMove,
       onMouseLeave,
-      onKeyDown: (0, import_utils.handlerAll)(onKeyDown, onKeyDownRef.current),
-      ref: (0, import_utils.mergeRefs)(register, buttonRef, ref),
+      onKeyDown: (0, import_utils2.handlerAll)(onKeyDown, onKeyDownRef.current),
+      ref: (0, import_utils2.mergeRefs)(register, buttonRef, ref),
       isDisabled,
       isFocusable
     });
-    (0, import_utils.useUpdateEffect)(() => {
+    (0, import_utils2.useUpdateEffect)(() => {
       if (!isOpen)
         return;
       const id = requestAnimationFrameId.current;
@@ -196,7 +214,7 @@ var MenuItem = (0, import_core.forwardRef)(
           (_a2 = buttonRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
           requestAnimationFrameId.current = null;
         });
-      } else if (menuRef.current && !(0, import_utils.isActiveElement)(menuRef.current)) {
+      } else if (menuRef.current && !(0, import_utils2.isActiveElement)(menuRef.current)) {
         menuRef.current.focus({ preventScroll: true });
       }
       return () => {
@@ -205,7 +223,7 @@ var MenuItem = (0, import_core.forwardRef)(
       };
     }, [isFocused, trulyDisabled, menuRef, isOpen]);
     type = as || type ? type != null ? type : void 0 : "button";
-    children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { style: { flex: 1 }, children }) : children;
+    children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: { flex: 1 }, children }) : children;
     const css = {
       textDecoration: "none",
       color: "inherit",
@@ -219,7 +237,7 @@ var MenuItem = (0, import_core.forwardRef)(
       gap: "0.75rem",
       ...styles.item
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       UpstreamMenuItemProvider,
       {
         value: {
@@ -228,8 +246,8 @@ var MenuItem = (0, import_core.forwardRef)(
           setDownstreamOpen,
           hasDownstreamRef
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_core.ui.li,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_core2.ui.li,
           {
             ...rest,
             ...isDownstreamOpen ? { "data-active": "" } : {},
@@ -237,12 +255,12 @@ var MenuItem = (0, import_core.forwardRef)(
             type,
             role: "menu-item",
             tabIndex: isFocused ? 0 : -1,
-            className: (0, import_utils.cx)("ui-menu__item", className),
+            className: (0, import_utils2.cx)("ui-menu__item", className),
             __css: css,
             children: [
-              icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuIcon, { children: icon }) : null,
+              icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, { children: icon }) : null,
               children,
-              command ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuCommand, { children: command }) : null
+              command ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuCommand, { children: command }) : null
             ]
           }
         )
@@ -250,25 +268,25 @@ var MenuItem = (0, import_core.forwardRef)(
     );
   }
 );
-var MenuOptionItem = (0, import_core.forwardRef)(
+var MenuOptionItem = (0, import_core2.forwardRef)(
   ({ className, icon, isChecked, closeOnSelect = false, children, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       MenuItem,
       {
         ref,
-        className: (0, import_utils.cx)("ui-menu__item--option", className),
-        "aria-checked": (0, import_utils.ariaAttr)(isChecked),
+        className: (0, import_utils2.cx)("ui-menu__item--option", className),
+        "aria-checked": (0, import_utils2.ariaAttr)(isChecked),
         closeOnSelect,
         ...rest,
         children: [
-          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuIcon, { opacity: isChecked ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, {}) }) : null,
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, { opacity: isChecked ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, {}) }) : null,
           children
         ]
       }
     );
   }
 );
-var MenuIcon = (0, import_core.forwardRef)(
+var MenuIcon = (0, import_core2.forwardRef)(
   ({ className, ...rest }, ref) => {
     const { styles } = useMenu();
     const css = {
@@ -279,33 +297,33 @@ var MenuIcon = (0, import_core.forwardRef)(
       fontSize: "0.85em",
       ...styles.icon
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_core.ui.span,
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core2.ui.span,
       {
         ref,
-        className: (0, import_utils.cx)("ui-menu__item__icon", className),
+        className: (0, import_utils2.cx)("ui-menu__item__icon", className),
         __css: css,
         ...rest
       }
     );
   }
 );
-var MenuCommand = (0, import_core.forwardRef)(
+var MenuCommand = (0, import_core2.forwardRef)(
   ({ className, ...rest }, ref) => {
     const { styles } = useMenu();
     const css = { ...styles.command };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_core.ui.span,
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core2.ui.span,
       {
         ref,
-        className: (0, import_utils.cx)("ui-menu__item__command", className),
+        className: (0, import_utils2.cx)("ui-menu__item__command", className),
         __css: css,
         ...rest
       }
     );
   }
 );
-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)(
+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)(
   "polygon",
   {
     fill: "currentColor",
@@ -314,24 +332,28 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewB
 ) });
 
 // src/menu.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var {
   DescendantsContextProvider,
   useDescendantsContext: useMenuDescendantsContext,
   useDescendants,
   useDescendant: useMenuDescendant
 } = (0, import_use_descendant.createDescendant)();
-var [MenuProvider, useMenu] = (0, import_utils2.createContext)({
+var [MenuProvider, useMenu] = (0, import_utils3.createContext)({
   name: "MenuContext",
   errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
 });
-var [UpstreamMenuProvider, useUpstreamMenu] = (0, import_utils2.createContext)({
+var [UpstreamMenuProvider, useUpstreamMenu] = (0, import_utils3.createContext)({
   strict: false,
   name: "UpstreamMenuContext"
 });
 var Menu = (props) => {
-  var _a, _b;
-  const [styles, mergedProps] = (0, import_core2.useMultiComponentStyle)("Menu", props);
+  var _a, _b, _c;
+  const { styles: contextMenuStyles } = (_a = useContextMenu()) != null ? _a : {};
+  const [styles, mergedProps] = (0, import_core3.useMultiComponentStyle)("Menu", props, {
+    isProcessSkip: !!contextMenuStyles,
+    styles: contextMenuStyles
+  });
   let {
     initialFocusRef,
     closeOnSelect = true,
@@ -342,9 +364,9 @@ var Menu = (props) => {
     onOpen: onOpenProp,
     onClose: onCloseProp,
     ...rest
-  } = (0, import_core2.omitThemeProps)(mergedProps);
-  const { relatedRef, onUpstreamClose, onDownstreamCloseMapRef } = (_a = useUpstreamMenu()) != null ? _a : {};
-  const { setDownstreamOpen, hasDownstreamRef } = (_b = useUpstreamMenuItem()) != null ? _b : {};
+  } = (0, import_core3.omitThemeProps)(mergedProps);
+  const { relatedRef, onUpstreamClose, onDownstreamCloseMapRef } = (_b = useUpstreamMenu()) != null ? _b : {};
+  const { setDownstreamOpen, hasDownstreamRef } = (_c = useUpstreamMenuItem()) != null ? _c : {};
   const isNested = !!relatedRef;
   if (isNested) {
     placement != null ? placement : placement = "right-start";
@@ -423,23 +445,23 @@ var Menu = (props) => {
         hasDownstreamRef.current = false;
     };
   });
-  (0, import_utils2.useUpdateEffect)(() => {
+  (0, import_utils3.useUpdateEffect)(() => {
     if (!isOpen)
       setFocusedIndex(-1);
   }, [isOpen]);
-  (0, import_utils2.useUnmountEffect)(() => {
+  (0, import_utils3.useUnmountEffect)(() => {
     timeoutIds.current.forEach((id2) => clearTimeout(id2));
     timeoutIds.current.clear();
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     UpstreamMenuProvider,
     {
       value: {
         relatedRef: menuRef,
         onDownstreamCloseMapRef: onCloseMapRef,
-        onUpstreamClose: (0, import_utils2.funcAll)(onUpstreamClose, onClose)
+        onUpstreamClose: (0, import_utils3.funcAll)(onUpstreamClose, onClose)
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         MenuProvider,
         {
           value: {
@@ -457,7 +479,7 @@ var Menu = (props) => {
             isNested,
             styles
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             import_popover.Popover,
             {
               ...{
@@ -483,13 +505,13 @@ var Menu = (props) => {
 };
 
 // src/menu-button.tsx
-var import_core3 = require("@yamada-ui/core");
+var import_core4 = require("@yamada-ui/core");
 var import_icon = require("@yamada-ui/icon");
 var import_popover2 = require("@yamada-ui/popover");
-var import_utils3 = require("@yamada-ui/utils");
+var import_utils4 = require("@yamada-ui/utils");
 var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var MenuButton = (0, import_core3.forwardRef)(
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var MenuButton = (0, import_core4.forwardRef)(
   ({ className, children, as: As, ...rest }, ref) => {
     var _a;
     const { onKeyDownRef, onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
@@ -497,9 +519,9 @@ var MenuButton = (0, import_core3.forwardRef)(
     const onKeyDown = (0, import_react3.useCallback)(
       (ev) => {
         const actions = {
-          Enter: (0, import_utils3.funcAll)(onOpen, onFocusFirstItem),
-          ArrowDown: (0, import_utils3.funcAll)(onOpen, onFocusFirstItem),
-          ArrowUp: (0, import_utils3.funcAll)(onOpen, onFocusLastItem)
+          Enter: (0, import_utils4.funcAll)(onOpen, onFocusFirstItem),
+          ArrowDown: (0, import_utils4.funcAll)(onOpen, onFocusFirstItem),
+          ArrowUp: (0, import_utils4.funcAll)(onOpen, onFocusLastItem)
         };
         const action = actions[ev.key];
         if (!action)
@@ -512,8 +534,8 @@ var MenuButton = (0, import_core3.forwardRef)(
     const onItemKeyDown = (0, import_react3.useCallback)(
       (ev) => {
         const actions = {
-          ArrowRight: !isOpen ? (0, import_utils3.funcAll)(onOpen, onFocusFirstItem) : void 0,
-          ArrowLeft: isOpen ? (0, import_utils3.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
+          ArrowRight: !isOpen ? (0, import_utils4.funcAll)(onOpen, onFocusFirstItem) : void 0,
+          ArrowLeft: isOpen ? (0, import_utils4.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
         };
         const action = actions[ev.key];
         if (!action)
@@ -523,24 +545,24 @@ var MenuButton = (0, import_core3.forwardRef)(
       },
       [isOpen, onOpen, onFocusFirstItem, onUpstreamRestoreFocus, onClose]
     );
-    (0, import_utils3.assignRef)(onKeyDownRef, onItemKeyDown);
-    const Component = As ? (0, import_core3.ui)(As) : Button;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    (0, import_utils4.assignRef)(onKeyDownRef, onItemKeyDown);
+    const Component = As ? (0, import_core4.ui)(As) : Button;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Component,
       {
         ref,
-        className: (0, import_utils3.cx)("ui-menu", className),
+        className: (0, import_utils4.cx)("ui-menu", className),
         "aria-haspopup": "menu",
         "aria-expanded": isOpen,
         ...rest,
-        "data-active": (0, import_utils3.dataAttr)(isOpen),
-        onKeyDown: (0, import_utils3.handlerAll)(rest.onKeyDown, onKeyDown),
+        "data-active": (0, import_utils4.dataAttr)(isOpen),
+        onKeyDown: (0, import_utils4.handlerAll)(rest.onKeyDown, onKeyDown),
         children
       }
     ) });
   }
 );
-var Button = (0, import_core3.forwardRef)((rest, ref) => {
+var Button = (0, import_core4.forwardRef)((rest, ref) => {
   const { styles } = useMenu();
   const css = {
     display: "inline-flex",
@@ -549,20 +571,20 @@ var Button = (0, import_core3.forwardRef)((rest, ref) => {
     outline: 0,
     ...styles.button
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.button, { ref, __css: css, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.button, { ref, __css: css, ...rest });
 });
-var MenuItemButton = (0, import_core3.forwardRef)(
+var MenuItemButton = (0, import_core4.forwardRef)(
   ({ className, children, innerProps, icon, iconProps, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       MenuButton,
       {
         ref,
-        className: (0, import_utils3.cx)("ui-menu__item-button", className),
+        className: (0, import_utils4.cx)("ui-menu__item-button", className),
         flex: "1",
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { as: "span", flex: "1", ...innerProps, children }),
-          /* @__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)" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.span, { as: "span", flex: "1", ...innerProps, children }),
+          /* @__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)" }) })
         ]
       }
     );
@@ -570,12 +592,12 @@ var MenuItemButton = (0, import_core3.forwardRef)(
 );
 
 // src/menu-list.tsx
-var import_core4 = require("@yamada-ui/core");
+var import_core5 = require("@yamada-ui/core");
 var import_popover3 = require("@yamada-ui/popover");
-var import_utils4 = require("@yamada-ui/utils");
+var import_utils5 = require("@yamada-ui/utils");
 var import_react4 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var MenuList = (0, import_core4.forwardRef)(
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var MenuList = (0, import_core5.forwardRef)(
   ({ className, ...rest }, ref) => {
     const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } = useMenu();
     const descendants = useMenuDescendantsContext();
@@ -618,48 +640,48 @@ var MenuList = (0, import_core4.forwardRef)(
       [focusedIndex, onClose, onFirst, onLast, onNext, onPrev]
     );
     const css = { ...styles.list };
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_popover3.PopoverContent,
       {
         as: "ul",
-        ref: (0, import_utils4.mergeRefs)(menuRef, ref),
-        className: (0, import_utils4.cx)("ui-menu__list", className),
+        ref: (0, import_utils5.mergeRefs)(menuRef, ref),
+        className: (0, import_utils5.cx)("ui-menu__list", className),
         role: "menu",
         tabIndex: -1,
         __css: css,
         ...rest,
-        onKeyDown: (0, import_utils4.handlerAll)(rest.onKeyDown, onKeyDown)
+        onKeyDown: (0, import_utils5.handlerAll)(rest.onKeyDown, onKeyDown)
       }
     );
   }
 );
 
 // src/menu-group.tsx
-var import_core5 = require("@yamada-ui/core");
-var import_utils5 = require("@yamada-ui/utils");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var MenuGroup = (0, import_core5.forwardRef)(
+var import_core6 = require("@yamada-ui/core");
+var import_utils6 = require("@yamada-ui/utils");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var MenuGroup = (0, import_core6.forwardRef)(
   ({ className, label, children, ...rest }, ref) => {
     const { styles } = useMenu();
     const css = { ...styles.group };
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      import_core5.ui.li,
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      import_core6.ui.li,
       {
         ref,
-        className: (0, import_utils5.cx)("ui-menu__item", "ui-menu__item--group", className),
+        className: (0, import_utils6.cx)("ui-menu__item", "ui-menu__item--group", className),
         role: "group",
         __css: css,
         ...rest,
         children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_core5.ui.span,
+          label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_core6.ui.span,
             {
-              className: (0, import_utils5.cx)("ui-menu__item--group-label"),
+              className: (0, import_utils6.cx)("ui-menu__item--group-label"),
               __css: styles.groupLabel,
               children: label
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ui.ul, { className: "ui-menu__item__group", children })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.ui.ul, { className: "ui-menu__item__group", children })
         ]
       }
     );
@@ -668,9 +690,9 @@ var MenuGroup = (0, import_core5.forwardRef)(
 
 // src/menu-option-group.tsx
 var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
-var import_utils6 = require("@yamada-ui/utils");
+var import_utils7 = require("@yamada-ui/utils");
 var import_react5 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var MenuOptionGroup = (0, import_react5.forwardRef)(
   ({
     className,
@@ -692,14 +714,14 @@ var MenuOptionGroup = (0, import_react5.forwardRef)(
       (selectedValue) => {
         if (isRadio && typeof value === "string")
           setValue(selectedValue);
-        if (!isRadio && (0, import_utils6.isArray)(value)) {
+        if (!isRadio && (0, import_utils7.isArray)(value)) {
           const nextValue = value.includes(selectedValue) ? value.filter((item) => item !== selectedValue) : value.concat(selectedValue);
           setValue(nextValue);
         }
       },
       [isRadio, value, setValue]
     );
-    const validChildren = (0, import_utils6.getValidChildren)(children);
+    const validChildren = (0, import_utils7.getValidChildren)(children);
     const cloneChildren = validChildren.map((child) => {
       if (child.type !== MenuOptionItem)
         return child;
@@ -708,14 +730,14 @@ var MenuOptionGroup = (0, import_react5.forwardRef)(
         onChange(child.props.value);
         (_b = (_a = child.props).onClick) == null ? void 0 : _b.call(_a, ev);
       };
-      const isChecked = !isRadio && (0, import_utils6.isArray)(value) ? value.includes(child.props.value) : child.props.value === value;
+      const isChecked = !isRadio && (0, import_utils7.isArray)(value) ? value.includes(child.props.value) : child.props.value === value;
       return (0, import_react5.cloneElement)(child, { type, onClick, isChecked });
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       MenuGroup,
       {
         ref,
-        className: (0, import_utils6.cx)("ui-menu__item--group--option", className),
+        className: (0, import_utils7.cx)("ui-menu__item--group--option", className),
         ...rest,
         children: cloneChildren
       }
@@ -725,24 +747,63 @@ var MenuOptionGroup = (0, import_react5.forwardRef)(
 MenuOptionGroup.displayName = "MenuOptionGroup";
 
 // src/menu-divider.tsx
-var import_core6 = require("@yamada-ui/core");
-var import_utils7 = require("@yamada-ui/utils");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var MenuDivider = (0, import_core6.forwardRef)(({ className, ...rest }, ref) => {
+var import_core7 = require("@yamada-ui/core");
+var import_utils8 = require("@yamada-ui/utils");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var MenuDivider = (0, import_core7.forwardRef)(({ className, ...rest }, ref) => {
   const { styles } = useMenu();
   const css = { ...styles.divider };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_core6.ui.hr,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_core7.ui.hr,
     {
       ref,
-      className: (0, import_utils7.cx)("ui-menu__divider", className),
+      className: (0, import_utils8.cx)("ui-menu__divider", className),
       __css: css,
       ...rest
     }
   );
 });
+
+// src/context-menu-trigger.tsx
+var import_core8 = require("@yamada-ui/core");
+var import_popover4 = require("@yamada-ui/popover");
+var import_utils9 = require("@yamada-ui/utils");
+var import_react6 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ContextMenuTrigger = (0, import_core8.forwardRef)(
+  ({ children, className, ...rest }, ref) => {
+    const { styles } = useContextMenu();
+    const [position, setPosition] = (0, import_react6.useState)({ top: 0, left: 0 });
+    const css = { ...styles.container };
+    const onContextMenu = (ev) => {
+      setPosition({ top: ev.clientY, left: ev.clientX });
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_popover4.PopoverAnchor, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_core8.ui.div,
+        {
+          className: "ui-context-menu__anchor",
+          style: { position: "fixed", ...position }
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_popover4.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_core8.ui.div,
+        {
+          ref,
+          className: (0, import_utils9.cx)("ui-context-menu", className),
+          __css: css,
+          ...rest,
+          onContextMenu: (0, import_utils9.handlerAll)(rest.onContextMenu, onContextMenu),
+          children
+        }
+      ) })
+    ] });
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ContextMenu,
+  ContextMenuTrigger,
   Menu,
   MenuButton,
   MenuCommand,