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

package/dist/index.js

@@ -38,42 +38,204 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/menu.tsx
-var import_core3 = require("@yamada-ui/core");
+var import_core = 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_utils3 = require("@yamada-ui/utils");
-var import_react2 = require("react");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react = require("react");
 
-// src/context-menu.tsx
-var import_core = require("@yamada-ui/core");
+// src/menu-context.ts
+var import_use_descendant = require("@yamada-ui/use-descendant");
 var import_utils = require("@yamada-ui/utils");
+var {
+  DescendantsContextProvider,
+  useDescendantsContext: useMenuDescendantsContext,
+  useDescendants,
+  useDescendant: useMenuDescendant
+} = (0, import_use_descendant.createDescendant)();
+var [MenuProvider, useMenu] = (0, import_utils.createContext)({
+  name: "MenuContext",
+  errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
+});
+var [ContextMenuProvider, useContextMenu] = (0, import_utils.createContext)({
+  strict: false,
+  name: "ContextMenuContext"
+});
+var [UpstreamMenuProvider, useUpstreamMenu] = (0, import_utils.createContext)({
+  strict: false,
+  name: "UpstreamMenuContext"
+});
+var [UpstreamMenuItemProvider, useUpstreamMenuItem] = (0, import_utils.createContext)({
+  strict: false,
+  name: "UpstreamMenuItemContext"
+});
+
+// src/menu.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var [ContextMenuProvider, useContextMenu] = (0, import_utils.createContext)(
-  {
-    strict: false,
-    name: "ContextMenuContext"
+var Menu = (props) => {
+  var _a, _b, _c;
+  const { styles: contextMenuStyles } = (_a = useContextMenu()) != null ? _a : {};
+  const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Menu", props, {
+    isProcessSkip: !!contextMenuStyles,
+    styles: contextMenuStyles
+  });
+  let {
+    initialFocusRef,
+    closeOnSelect = true,
+    closeOnBlur,
+    placement,
+    duration = 0.2,
+    offset,
+    onOpen: onOpenProp,
+    onClose: onCloseProp,
+    ...rest
+  } = (0, import_core.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";
+    offset != null ? offset : offset = [-8, 8];
+    closeOnBlur != null ? closeOnBlur : closeOnBlur = false;
+  } else {
+    placement != null ? placement : placement = "bottom-start";
   }
-);
-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 }) });
+  const descendants = useDescendants();
+  const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
+  const menuRef = (0, import_react.useRef)(null);
+  const timeoutIds = (0, import_react.useRef)(/* @__PURE__ */ new Set([]));
+  const requestAnimationFrameId = (0, import_react.useRef)(null);
+  const onCloseMapRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const onFocusMenu = (0, import_react.useCallback)(() => {
+    requestAnimationFrame(
+      () => {
+        var _a2;
+        return (_a2 = menuRef.current) == null ? void 0 : _a2.focus({ preventScroll: false });
+      }
+    );
+  }, []);
+  const onFocusFirstItem = (0, import_react.useCallback)(() => {
+    const id2 = setTimeout(() => {
+      if (initialFocusRef) return;
+      const first = descendants.enabledFirstValue();
+      if (first) setFocusedIndex(first.index);
+    });
+    timeoutIds.current.add(id2);
+  }, [descendants, initialFocusRef]);
+  const onFocusLastItem = (0, import_react.useCallback)(() => {
+    const id2 = setTimeout(() => {
+      if (initialFocusRef) return;
+      const last = descendants.enabledLastValue();
+      if (last) setFocusedIndex(last.index);
+    });
+    timeoutIds.current.add(id2);
+  }, [descendants, initialFocusRef]);
+  const onOpenInternal = (0, import_react.useCallback)(() => {
+    onOpenProp == null ? void 0 : onOpenProp();
+    if (!isNested) onFocusMenu();
+  }, [onOpenProp, isNested, onFocusMenu]);
+  const onCloseInternal = (0, import_react.useCallback)(() => {
+    onCloseProp == null ? void 0 : onCloseProp();
+    for (const onClose2 of onCloseMapRef.current.values()) {
+      onClose2();
+    }
+  }, [onCloseProp]);
+  const id = (0, import_react.useId)();
+  const { isOpen, onOpen, onClose } = (0, import_use_disclosure.useDisclosure)({
+    ...props,
+    onOpen: onOpenInternal,
+    onClose: onCloseInternal
+  });
+  (0, import_react.useEffect)(() => {
+    const onCloseMap = onDownstreamCloseMapRef == null ? void 0 : onDownstreamCloseMapRef.current;
+    onCloseMap == null ? void 0 : onCloseMap.set(id, onClose);
+    return () => {
+      onCloseMap == null ? void 0 : onCloseMap.delete(id);
+    };
+  }, [id, onClose, onDownstreamCloseMapRef]);
+  (0, import_react.useEffect)(() => {
+    if (setDownstreamOpen) setDownstreamOpen(isOpen);
+  }, [setDownstreamOpen, isOpen]);
+  (0, import_react.useEffect)(() => {
+    if (hasDownstreamRef) hasDownstreamRef.current = true;
+    return () => {
+      if (hasDownstreamRef) hasDownstreamRef.current = false;
+    };
+  });
+  (0, import_utils2.useUpdateEffect)(() => {
+    if (!isOpen) setFocusedIndex(-1);
+  }, [isOpen]);
+  (0, import_utils2.useUnmountEffect)(() => {
+    timeoutIds.current.forEach((id2) => clearTimeout(id2));
+    timeoutIds.current.clear();
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    UpstreamMenuProvider,
+    {
+      value: {
+        relatedRef: menuRef,
+        onDownstreamCloseMapRef: onCloseMapRef,
+        onUpstreamClose: (0, import_utils2.funcAll)(onUpstreamClose, onClose)
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        MenuProvider,
+        {
+          value: {
+            isOpen,
+            onOpen,
+            onClose,
+            onUpstreamClose,
+            onFocusFirstItem,
+            onFocusLastItem,
+            closeOnSelect,
+            focusedIndex,
+            setFocusedIndex,
+            menuRef,
+            requestAnimationFrameId,
+            isNested,
+            styles
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_popover.Popover,
+            {
+              ...{
+                trigger: isNested ? "hover" : "click",
+                ...rest,
+                isOpen,
+                onOpen,
+                onClose,
+                placement,
+                offset,
+                duration,
+                initialFocusRef,
+                relatedRef,
+                closeOnButton: false,
+                closeOnBlur
+              }
+            }
+          )
+        }
+      )
+    }
+  ) });
 };
 
+// src/menu-button.tsx
+var import_core3 = require("@yamada-ui/core");
+var import_icon = require("@yamada-ui/icon");
+var import_popover2 = require("@yamada-ui/popover");
+var import_utils4 = require("@yamada-ui/utils");
+var import_react3 = require("react");
+
 // 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_utils3 = require("@yamada-ui/utils");
+var import_react2 = 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_utils2.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menuitem"));
+  return (0, import_utils3.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menuitem"));
 };
 var MenuItem = (0, import_core2.forwardRef)(
   ({
@@ -101,23 +263,23 @@ var MenuItem = (0, import_core2.forwardRef)(
     } = useMenu();
     const { onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
     const trulyDisabled = isDisabled && !isFocusable;
-    const itemRef = (0, import_react.useRef)(null);
-    const hasDownstreamRef = (0, import_react.useRef)(false);
-    const onKeyDownRef = (0, import_react.useRef)(
+    const itemRef = (0, import_react2.useRef)(null);
+    const hasDownstreamRef = (0, import_react2.useRef)(false);
+    const onKeyDownRef = (0, import_react2.useRef)(
       () => void 0
     );
     const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
-    const [isDownstreamOpen, setDownstreamOpen] = (0, import_react.useState)(false);
+    const [isDownstreamOpen, setDownstreamOpen] = (0, import_react2.useState)(false);
     const isFocused = index === focusedIndex;
-    const onMouseOver = (0, import_react.useCallback)(() => {
+    const onMouseOver = (0, import_react2.useCallback)(() => {
       if (isDisabled) return;
       setFocusedIndex(index);
     }, [index, isDisabled, setFocusedIndex]);
-    const onMouseLeave = (0, import_react.useCallback)(() => {
+    const onMouseLeave = (0, import_react2.useCallback)(() => {
       if (isDisabled) return;
       setFocusedIndex(-1);
     }, [setFocusedIndex, isDisabled]);
-    const onClick = (0, import_react.useCallback)(
+    const onClick = (0, import_react2.useCallback)(
       (ev) => {
         if (!isTargetMenuItem(ev.currentTarget)) return;
         const hasDownstream = hasDownstreamRef.current;
@@ -128,18 +290,18 @@ var MenuItem = (0, import_core2.forwardRef)(
       },
       [customCloseOnSelect, generalCloseOnSelect, onClose, onUpstreamClose]
     );
-    const onFocus = (0, import_react.useCallback)(() => {
+    const onFocus = (0, import_react2.useCallback)(() => {
       setFocusedIndex(index);
     }, [setFocusedIndex, index]);
-    const onRestoreFocus = (0, import_react.useCallback)(() => {
+    const onRestoreFocus = (0, import_react2.useCallback)(() => {
       var _a2;
       (_a2 = itemRef.current) == null ? void 0 : _a2.focus();
       setFocusedIndex(index);
     }, [setFocusedIndex, index]);
-    const onKeyDown = (0, import_react.useCallback)(
+    const onKeyDown = (0, import_react2.useCallback)(
       (ev) => {
         const actions = {
-          ArrowLeft: isNested ? (0, import_utils2.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
+          ArrowLeft: isNested ? (0, import_utils3.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
         };
         const action = actions[ev.key];
         if (!action) return;
@@ -152,16 +314,16 @@ var MenuItem = (0, import_core2.forwardRef)(
     const rest = (0, import_use_clickable.useClickable)({
       focusOnClick: false,
       ...props,
-      onClick: (0, import_utils2.handlerAll)(props.onClick, onClick),
-      onFocus: (0, import_utils2.handlerAll)(props.onFocus, onFocus),
-      onMouseOver: (0, import_utils2.handlerAll)(props.onMouseOver, onMouseOver),
-      onMouseLeave: (0, import_utils2.handlerAll)(props.onMouseLeave, onMouseLeave),
-      onKeyDown: (0, import_utils2.handlerAll)(props.onKeyDown, onKeyDown, onKeyDownRef.current),
-      ref: (0, import_utils2.mergeRefs)(register, itemRef, ref),
+      onClick: (0, import_utils3.handlerAll)(props.onClick, onClick),
+      onFocus: (0, import_utils3.handlerAll)(props.onFocus, onFocus),
+      onMouseOver: (0, import_utils3.handlerAll)(props.onMouseOver, onMouseOver),
+      onMouseLeave: (0, import_utils3.handlerAll)(props.onMouseLeave, onMouseLeave),
+      onKeyDown: (0, import_utils3.handlerAll)(props.onKeyDown, onKeyDown, onKeyDownRef.current),
+      ref: (0, import_utils3.mergeRefs)(register, itemRef, ref),
       isDisabled,
       isFocusable
     });
-    (0, import_utils2.useUpdateEffect)(() => {
+    (0, import_utils3.useUpdateEffect)(() => {
       if (!isOpen) return;
       const id = requestAnimationFrameId.current;
       if (isFocused && !trulyDisabled && itemRef.current) {
@@ -171,7 +333,7 @@ var MenuItem = (0, import_core2.forwardRef)(
           (_a2 = itemRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
           requestAnimationFrameId.current = null;
         });
-      } else if (menuRef.current && !(0, import_utils2.isActiveElement)(menuRef.current)) {
+      } else if (menuRef.current && !(0, import_utils3.isActiveElement)(menuRef.current)) {
         menuRef.current.focus({ preventScroll: true });
       }
       return () => {
@@ -208,7 +370,7 @@ var MenuItem = (0, import_core2.forwardRef)(
             ...isDownstreamOpen ? { "data-active": "" } : {},
             role: "menuitem",
             tabIndex: isFocused ? 0 : -1,
-            className: (0, import_utils2.cx)("ui-menu__item", className),
+            className: (0, import_utils3.cx)("ui-menu__item", className),
             __css: css,
             children: [
               icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, { children: icon }) : null,
@@ -227,8 +389,8 @@ var MenuOptionItem = (0, import_core2.forwardRef)(
       MenuItem,
       {
         ref,
-        className: (0, import_utils2.cx)("ui-menu__item--option", className),
-        "aria-checked": (0, import_utils2.ariaAttr)(isChecked),
+        className: (0, import_utils3.cx)("ui-menu__item--option", className),
+        "aria-checked": (0, import_utils3.ariaAttr)(isChecked),
         closeOnSelect,
         ...rest,
         children: [
@@ -254,7 +416,7 @@ var MenuIcon = (0, import_core2.forwardRef)(
       import_core2.ui.span,
       {
         ref,
-        className: (0, import_utils2.cx)("ui-menu__item__icon", className),
+        className: (0, import_utils3.cx)("ui-menu__item__icon", className),
         __css: css,
         ...rest
       }
@@ -269,7 +431,7 @@ var MenuCommand = (0, import_core2.forwardRef)(
       import_core2.ui.span,
       {
         ref,
-        className: (0, import_utils2.cx)("ui-menu__item__command", className),
+        className: (0, import_utils3.cx)("ui-menu__item__command", className),
         __css: css,
         ...rest
       }
@@ -284,178 +446,9 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { view
   }
 ) });
 
-// src/menu.tsx
-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_utils3.createContext)({
-  name: "MenuContext",
-  errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
-});
-var [UpstreamMenuProvider, useUpstreamMenu] = (0, import_utils3.createContext)({
-  strict: false,
-  name: "UpstreamMenuContext"
-});
-var 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,
-    closeOnBlur,
-    placement,
-    duration = 0.2,
-    offset,
-    onOpen: onOpenProp,
-    onClose: onCloseProp,
-    ...rest
-  } = (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";
-    offset != null ? offset : offset = [-8, 8];
-    closeOnBlur != null ? closeOnBlur : closeOnBlur = false;
-  } else {
-    placement != null ? placement : placement = "bottom-start";
-  }
-  const descendants = useDescendants();
-  const [focusedIndex, setFocusedIndex] = (0, import_react2.useState)(-1);
-  const menuRef = (0, import_react2.useRef)(null);
-  const timeoutIds = (0, import_react2.useRef)(/* @__PURE__ */ new Set([]));
-  const requestAnimationFrameId = (0, import_react2.useRef)(null);
-  const onCloseMapRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
-  const onFocusMenu = (0, import_react2.useCallback)(() => {
-    requestAnimationFrame(
-      () => {
-        var _a2;
-        return (_a2 = menuRef.current) == null ? void 0 : _a2.focus({ preventScroll: false });
-      }
-    );
-  }, []);
-  const onFocusFirstItem = (0, import_react2.useCallback)(() => {
-    const id2 = setTimeout(() => {
-      if (initialFocusRef) return;
-      const first = descendants.enabledFirstValue();
-      if (first) setFocusedIndex(first.index);
-    });
-    timeoutIds.current.add(id2);
-  }, [descendants, initialFocusRef]);
-  const onFocusLastItem = (0, import_react2.useCallback)(() => {
-    const id2 = setTimeout(() => {
-      if (initialFocusRef) return;
-      const last = descendants.enabledLastValue();
-      if (last) setFocusedIndex(last.index);
-    });
-    timeoutIds.current.add(id2);
-  }, [descendants, initialFocusRef]);
-  const onOpenInternal = (0, import_react2.useCallback)(() => {
-    onOpenProp == null ? void 0 : onOpenProp();
-    if (!isNested) onFocusMenu();
-  }, [onOpenProp, isNested, onFocusMenu]);
-  const onCloseInternal = (0, import_react2.useCallback)(() => {
-    onCloseProp == null ? void 0 : onCloseProp();
-    for (const onClose2 of onCloseMapRef.current.values()) {
-      onClose2();
-    }
-  }, [onCloseProp]);
-  const id = (0, import_react2.useId)();
-  const { isOpen, onOpen, onClose } = (0, import_use_disclosure.useDisclosure)({
-    ...props,
-    onOpen: onOpenInternal,
-    onClose: onCloseInternal
-  });
-  (0, import_react2.useEffect)(() => {
-    const onCloseMap = onDownstreamCloseMapRef == null ? void 0 : onDownstreamCloseMapRef.current;
-    onCloseMap == null ? void 0 : onCloseMap.set(id, onClose);
-    return () => {
-      onCloseMap == null ? void 0 : onCloseMap.delete(id);
-    };
-  }, [id, onClose, onDownstreamCloseMapRef]);
-  (0, import_react2.useEffect)(() => {
-    if (setDownstreamOpen) setDownstreamOpen(isOpen);
-  }, [setDownstreamOpen, isOpen]);
-  (0, import_react2.useEffect)(() => {
-    if (hasDownstreamRef) hasDownstreamRef.current = true;
-    return () => {
-      if (hasDownstreamRef) hasDownstreamRef.current = false;
-    };
-  });
-  (0, import_utils3.useUpdateEffect)(() => {
-    if (!isOpen) setFocusedIndex(-1);
-  }, [isOpen]);
-  (0, import_utils3.useUnmountEffect)(() => {
-    timeoutIds.current.forEach((id2) => clearTimeout(id2));
-    timeoutIds.current.clear();
-  });
-  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_utils3.funcAll)(onUpstreamClose, onClose)
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        MenuProvider,
-        {
-          value: {
-            isOpen,
-            onOpen,
-            onClose,
-            onUpstreamClose,
-            onFocusFirstItem,
-            onFocusLastItem,
-            closeOnSelect,
-            focusedIndex,
-            setFocusedIndex,
-            menuRef,
-            requestAnimationFrameId,
-            isNested,
-            styles
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_popover.Popover,
-            {
-              ...{
-                trigger: isNested ? "hover" : "click",
-                ...rest,
-                isOpen,
-                onOpen,
-                onClose,
-                placement,
-                offset,
-                duration,
-                initialFocusRef,
-                relatedRef,
-                closeOnButton: false,
-                closeOnBlur
-              }
-            }
-          )
-        }
-      )
-    }
-  ) });
-};
-
 // src/menu-button.tsx
-var import_core4 = require("@yamada-ui/core");
-var import_icon = require("@yamada-ui/icon");
-var import_popover2 = require("@yamada-ui/popover");
-var import_utils4 = require("@yamada-ui/utils");
-var import_react3 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var MenuButton = (0, import_core4.forwardRef)(
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MenuButton = (0, import_core3.forwardRef)(
   ({ className, children, as, ...rest }, ref) => {
     var _a;
     const { onKeyDownRef, onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
@@ -488,8 +481,8 @@ var MenuButton = (0, import_core4.forwardRef)(
       [isOpen, onOpen, onFocusFirstItem, onUpstreamRestoreFocus, onClose]
     );
     (0, import_utils4.assignRef)(onKeyDownRef, onItemKeyDown);
-    const Component = (0, import_react3.useMemo)(() => as ? (0, import_core4.ui)(as) : Button, [as]);
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    const Component = (0, import_react3.useMemo)(() => as ? (0, import_core3.ui)(as) : Button, [as]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       Component,
       {
         ref,
@@ -504,7 +497,7 @@ var MenuButton = (0, import_core4.forwardRef)(
     ) });
   }
 );
-var Button = (0, import_core4.forwardRef)((rest, ref) => {
+var Button = (0, import_core3.forwardRef)((rest, ref) => {
   const { styles } = useMenu();
   const css = {
     display: "inline-flex",
@@ -513,11 +506,11 @@ var Button = (0, import_core4.forwardRef)((rest, ref) => {
     outline: 0,
     ...styles.button
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.button, { ref, __css: css, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.button, { ref, __css: css, ...rest });
 });
-var MenuItemButton = (0, import_core4.forwardRef)(
+var MenuItemButton = (0, import_core3.forwardRef)(
   ({ className, children, innerProps, icon, iconProps, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       MenuButton,
       {
         ref,
@@ -525,8 +518,8 @@ var MenuItemButton = (0, import_core4.forwardRef)(
         flex: "1",
         ...rest,
         children: [
-          /* @__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)" }) })
+          /* @__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)" }) })
         ]
       }
     );
@@ -534,12 +527,12 @@ var MenuItemButton = (0, import_core4.forwardRef)(
 );
 
 // src/menu-list.tsx
-var import_core5 = require("@yamada-ui/core");
+var import_core4 = require("@yamada-ui/core");
 var import_popover3 = require("@yamada-ui/popover");
 var import_utils5 = require("@yamada-ui/utils");
 var import_react4 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var MenuList = (0, import_core5.forwardRef)(
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var MenuList = (0, import_core4.forwardRef)(
   ({ className, contentProps, children, ...rest }, ref) => {
     const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } = useMenu();
     const descendants = useMenuDescendantsContext();
@@ -576,7 +569,7 @@ var MenuList = (0, import_core5.forwardRef)(
       },
       [focusedIndex, onClose, onFirst, onLast, onNext, onPrev]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_popover3.PopoverContent,
       {
         as: "div",
@@ -584,8 +577,8 @@ var MenuList = (0, import_core5.forwardRef)(
         __css: { ...styles.content },
         ...contentProps,
         onKeyDown: (0, import_utils5.handlerAll)(contentProps == null ? void 0 : contentProps.onKeyDown, onKeyDown),
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_core5.ui.ul,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_core4.ui.ul,
           {
             ref: (0, import_utils5.mergeRefs)(menuRef, ref),
             role: "menu",
@@ -602,15 +595,15 @@ var MenuList = (0, import_core5.forwardRef)(
 );
 
 // src/menu-group.tsx
-var import_core6 = require("@yamada-ui/core");
+var import_core5 = 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)(
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var MenuGroup = (0, import_core5.forwardRef)(
   ({ className, label, children, labelProps, ...rest }, ref) => {
     const { styles } = useMenu();
     const css = { ...styles.group };
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-      import_core6.ui.li,
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      import_core5.ui.li,
       {
         ref,
         className: (0, import_utils6.cx)("ui-menu__item", "ui-menu__item--group", className),
@@ -618,8 +611,8 @@ var MenuGroup = (0, import_core6.forwardRef)(
         __css: css,
         ...rest,
         children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_core6.ui.span,
+          label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_core5.ui.span,
             {
               className: (0, import_utils6.cx)("ui-menu__item--group-label"),
               __css: styles.groupLabel,
@@ -627,7 +620,7 @@ var MenuGroup = (0, import_core6.forwardRef)(
               children: label
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.ui.ul, { className: "ui-menu__item__group", children })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ui.ul, { className: "ui-menu__item__group", children })
         ]
       }
     );
@@ -638,7 +631,7 @@ var MenuGroup = (0, import_core6.forwardRef)(
 var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
 var import_utils7 = require("@yamada-ui/utils");
 var import_react5 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var MenuOptionGroup = (0, import_react5.forwardRef)(
   ({
     className,
@@ -677,7 +670,7 @@ var MenuOptionGroup = (0, import_react5.forwardRef)(
       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_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       MenuGroup,
       {
         ref,
@@ -691,22 +684,33 @@ var MenuOptionGroup = (0, import_react5.forwardRef)(
 MenuOptionGroup.displayName = "MenuOptionGroup";
 
 // src/menu-divider.tsx
-var import_core7 = require("@yamada-ui/core");
+var import_core6 = require("@yamada-ui/core");
 var import_utils8 = require("@yamada-ui/utils");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var MenuDivider = (0, import_core6.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useMenu();
+    const css = { ...styles.divider };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_core6.ui.hr,
+      {
+        ref,
+        className: (0, import_utils8.cx)("ui-menu__divider", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+
+// src/context-menu.tsx
+var import_core7 = require("@yamada-ui/core");
 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_runtime8.jsx)(
-    import_core7.ui.hr,
-    {
-      ref,
-      className: (0, import_utils8.cx)("ui-menu__divider", className),
-      __css: css,
-      ...rest
-    }
-  );
-});
+var ContextMenu = (props) => {
+  const [styles, mergedProps] = (0, import_core7.useComponentMultiStyle)("ContextMenu", props);
+  const { ...rest } = (0, import_core7.omitThemeProps)(mergedProps);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Menu, { trigger: "contextmenu", ...rest }) });
+};
 
 // src/context-menu-trigger.tsx
 var import_core8 = require("@yamada-ui/core");