@yamada-ui/menu 1.3.15-dev-20241005224505 → 1.3.15-dev-20241006000212

package/dist/index.js

@@ -37,6 +37,9 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/context-menu.tsx
+var import_core2 = require("@yamada-ui/core");
+
 // src/menu.tsx
 var import_core = require("@yamada-ui/core");
 var import_popover = require("@yamada-ui/popover");
@@ -49,25 +52,25 @@ var import_use_descendant = require("@yamada-ui/use-descendant");
 var import_utils = require("@yamada-ui/utils");
 var {
   DescendantsContextProvider,
-  useDescendantsContext: useMenuDescendantsContext,
+  useDescendant: useMenuDescendant,
   useDescendants,
-  useDescendant: useMenuDescendant
+  useDescendantsContext: useMenuDescendantsContext
 } = (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"
+  name: "ContextMenuContext",
+  strict: false
 });
 var [UpstreamMenuProvider, useUpstreamMenu] = (0, import_utils.createContext)({
-  strict: false,
-  name: "UpstreamMenuContext"
+  name: "UpstreamMenuContext",
+  strict: false
 });
 var [UpstreamMenuItemProvider, useUpstreamMenuItem] = (0, import_utils.createContext)({
-  strict: false,
-  name: "UpstreamMenuItemContext"
+  name: "UpstreamMenuItemContext",
+  strict: false
 });
 
 // src/menu.tsx
@@ -80,18 +83,18 @@ var Menu = (props) => {
     styles: contextMenuStyles
   });
   let {
-    initialFocusRef,
-    closeOnSelect = true,
     closeOnBlur,
-    placement,
+    closeOnSelect = true,
     duration = 0.2,
+    initialFocusRef,
     offset,
-    onOpen: onOpenProp,
+    placement,
     onClose: onCloseProp,
+    onOpen: onOpenProp,
     ...rest
   } = (0, import_core.omitThemeProps)(mergedProps);
-  const { relatedRef, onUpstreamClose, onDownstreamCloseMapRef } = (_b = useUpstreamMenu()) != null ? _b : {};
-  const { setDownstreamOpen, hasDownstreamRef } = (_c = useUpstreamMenuItem()) != null ? _c : {};
+  const { relatedRef, onDownstreamCloseMapRef, onUpstreamClose } = (_b = useUpstreamMenu()) != null ? _b : {};
+  const { hasDownstreamRef, setDownstreamOpen } = (_c = useUpstreamMenuItem()) != null ? _c : {};
   const isNested = !!relatedRef;
   if (isNested) {
     placement != null ? placement : placement = "right-start";
@@ -141,10 +144,10 @@ var Menu = (props) => {
     }
   }, [onCloseProp]);
   const id = (0, import_react.useId)();
-  const { isOpen, onOpen, onClose } = (0, import_use_disclosure.useDisclosure)({
+  const { isOpen, onClose, onOpen } = (0, import_use_disclosure.useDisclosure)({
     ...props,
-    onOpen: onOpenInternal,
-    onClose: onCloseInternal
+    onClose: onCloseInternal,
+    onOpen: onOpenInternal
   });
   (0, import_react.useEffect)(() => {
     const onCloseMap = onDownstreamCloseMapRef == null ? void 0 : onDownstreamCloseMapRef.current;
@@ -181,19 +184,19 @@ var Menu = (props) => {
         MenuProvider,
         {
           value: {
-            isOpen,
-            onOpen,
-            onClose,
-            onUpstreamClose,
-            onFocusFirstItem,
-            onFocusLastItem,
             closeOnSelect,
             focusedIndex,
-            setFocusedIndex,
+            isNested,
+            isOpen,
             menuRef,
             requestAnimationFrameId,
-            isNested,
-            styles
+            setFocusedIndex,
+            styles,
+            onClose,
+            onFocusFirstItem,
+            onFocusLastItem,
+            onOpen,
+            onUpstreamClose
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_popover.Popover,
@@ -201,16 +204,16 @@ var Menu = (props) => {
               ...{
                 trigger: isNested ? "hover" : "click",
                 ...rest,
-                isOpen,
-                onOpen,
-                onClose,
-                placement,
-                offset,
+                closeOnBlur,
+                closeOnButton: false,
                 duration,
                 initialFocusRef,
+                isOpen,
+                offset,
+                placement,
                 relatedRef,
-                closeOnButton: false,
-                closeOnBlur
+                onClose,
+                onOpen
               }
             }
           )
@@ -220,66 +223,112 @@ var Menu = (props) => {
   ) });
 };
 
-// src/menu-button.tsx
+// src/context-menu.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ContextMenu = (props) => {
+  const [styles, mergedProps] = (0, import_core2.useComponentMultiStyle)("ContextMenu", props);
+  const { ...rest } = (0, import_core2.omitThemeProps)(mergedProps);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ContextMenuProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Menu, { trigger: "contextmenu", ...rest }) });
+};
+
+// src/context-menu-trigger.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");
+var import_utils3 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ContextMenuTrigger = (0, import_core3.forwardRef)(
+  ({ className, children, ...rest }, ref) => {
+    var _a;
+    const { styles } = (_a = useContextMenu()) != null ? _a : {};
+    const [position, setPosition] = (0, import_react2.useState)({ left: 0, top: 0 });
+    const css = { ...styles == null ? void 0 : styles.container };
+    const onContextMenu = (ev) => {
+      setPosition({ left: ev.pageX, top: ev.pageY });
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_popover2.PopoverAnchor, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_core3.ui.div,
+        {
+          className: "ui-context-menu__anchor",
+          style: { position: "absolute", ...position }
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_core3.ui.div,
+        {
+          ref,
+          className: (0, import_utils3.cx)("ui-context-menu", className),
+          __css: css,
+          ...rest,
+          onContextMenu: (0, import_utils3.handlerAll)(rest.onContextMenu, onContextMenu),
+          children
+        }
+      ) })
+    ] });
+  }
+);
+
+// src/menu-button.tsx
+var import_core5 = require("@yamada-ui/core");
+var import_icon = require("@yamada-ui/icon");
+var import_popover3 = require("@yamada-ui/popover");
+var import_utils5 = require("@yamada-ui/utils");
+var import_react4 = require("react");
 
 // src/menu-item.tsx
-var import_core2 = require("@yamada-ui/core");
+var import_core4 = require("@yamada-ui/core");
 var import_use_clickable = require("@yamada-ui/use-clickable");
-var import_utils3 = require("@yamada-ui/utils");
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_utils4 = require("@yamada-ui/utils");
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var isTargetMenuItem = (target) => {
   var _a;
-  return (0, import_utils3.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menuitem"));
+  return (0, import_utils4.isHTMLElement)(target) && !!((_a = target.getAttribute("role")) == null ? void 0 : _a.startsWith("menuitem"));
 };
-var MenuItem = (0, import_core2.forwardRef)(
+var MenuItem = (0, import_core4.forwardRef)(
   ({
     className,
-    isDisabled,
-    isFocusable,
+    children,
     closeOnSelect: customCloseOnSelect,
-    icon,
     command,
-    children,
+    icon,
+    isDisabled,
+    isFocusable,
     ...props
   }, ref) => {
     var _a;
     const {
+      closeOnSelect: generalCloseOnSelect,
       focusedIndex,
-      setFocusedIndex,
+      isNested,
       isOpen,
-      onClose,
-      onUpstreamClose,
-      closeOnSelect: generalCloseOnSelect,
       menuRef,
       requestAnimationFrameId,
-      isNested,
-      styles
+      setFocusedIndex,
+      styles,
+      onClose,
+      onUpstreamClose
     } = useMenu();
     const { onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
     const trulyDisabled = isDisabled && !isFocusable;
-    const itemRef = (0, import_react2.useRef)(null);
-    const hasDownstreamRef = (0, import_react2.useRef)(false);
-    const onKeyDownRef = (0, import_react2.useRef)(
+    const itemRef = (0, import_react3.useRef)(null);
+    const hasDownstreamRef = (0, import_react3.useRef)(false);
+    const onKeyDownRef = (0, import_react3.useRef)(
       () => void 0
     );
     const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
-    const [isDownstreamOpen, setDownstreamOpen] = (0, import_react2.useState)(false);
+    const [isDownstreamOpen, setDownstreamOpen] = (0, import_react3.useState)(false);
     const isFocused = index === focusedIndex;
-    const onMouseOver = (0, import_react2.useCallback)(() => {
+    const onMouseOver = (0, import_react3.useCallback)(() => {
       if (isDisabled) return;
       setFocusedIndex(index);
     }, [index, isDisabled, setFocusedIndex]);
-    const onMouseLeave = (0, import_react2.useCallback)(() => {
+    const onMouseLeave = (0, import_react3.useCallback)(() => {
       if (isDisabled) return;
       setFocusedIndex(-1);
     }, [setFocusedIndex, isDisabled]);
-    const onClick = (0, import_react2.useCallback)(
+    const onClick = (0, import_react3.useCallback)(
       (ev) => {
         if (!isTargetMenuItem(ev.currentTarget)) return;
         const hasDownstream = hasDownstreamRef.current;
@@ -290,18 +339,18 @@ var MenuItem = (0, import_core2.forwardRef)(
       },
       [customCloseOnSelect, generalCloseOnSelect, onClose, onUpstreamClose]
     );
-    const onFocus = (0, import_react2.useCallback)(() => {
+    const onFocus = (0, import_react3.useCallback)(() => {
       setFocusedIndex(index);
     }, [setFocusedIndex, index]);
-    const onRestoreFocus = (0, import_react2.useCallback)(() => {
+    const onRestoreFocus = (0, import_react3.useCallback)(() => {
       var _a2;
       (_a2 = itemRef.current) == null ? void 0 : _a2.focus();
       setFocusedIndex(index);
     }, [setFocusedIndex, index]);
-    const onKeyDown = (0, import_react2.useCallback)(
+    const onKeyDown = (0, import_react3.useCallback)(
       (ev) => {
         const actions = {
-          ArrowLeft: isNested ? (0, import_utils3.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
+          ArrowLeft: isNested ? (0, import_utils4.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
         };
         const action = actions[ev.key];
         if (!action) return;
@@ -314,16 +363,16 @@ var MenuItem = (0, import_core2.forwardRef)(
     const rest = (0, import_use_clickable.useClickable)({
       focusOnClick: false,
       ...props,
-      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),
+      ref: (0, import_utils4.mergeRefs)(register, itemRef, ref),
       isDisabled,
-      isFocusable
+      isFocusable,
+      onClick: (0, import_utils4.handlerAll)(props.onClick, onClick),
+      onFocus: (0, import_utils4.handlerAll)(props.onFocus, onFocus),
+      onKeyDown: (0, import_utils4.handlerAll)(props.onKeyDown, onKeyDown, onKeyDownRef.current),
+      onMouseLeave: (0, import_utils4.handlerAll)(props.onMouseLeave, onMouseLeave),
+      onMouseOver: (0, import_utils4.handlerAll)(props.onMouseOver, onMouseOver)
     });
-    (0, import_utils3.useUpdateEffect)(() => {
+    (0, import_utils4.useUpdateEffect)(() => {
       if (!isOpen) return;
       const id = requestAnimationFrameId.current;
       if (isFocused && !trulyDisabled && itemRef.current) {
@@ -333,49 +382,49 @@ 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_utils3.isActiveElement)(menuRef.current)) {
+      } else if (menuRef.current && !(0, import_utils4.isActiveElement)(menuRef.current)) {
         menuRef.current.focus({ preventScroll: true });
       }
       return () => {
         if (id) cancelAnimationFrame(id);
       };
     }, [isFocused, trulyDisabled, menuRef, isOpen]);
-    children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: { flex: 1 }, children }) : children;
+    children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.span, { style: { flex: 1 }, children }) : children;
     const css = {
-      textDecoration: "none",
+      alignItems: "center",
       color: "inherit",
-      userSelect: "none",
       display: "flex",
-      width: "100%",
-      alignItems: "center",
-      textAlign: "start",
       flex: "0 0 auto",
-      outline: 0,
       gap: "0.75rem",
+      outline: 0,
+      textAlign: "start",
+      textDecoration: "none",
+      userSelect: "none",
+      width: "100%",
       ...styles.item
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       UpstreamMenuItemProvider,
       {
         value: {
-          onKeyDownRef,
-          onUpstreamRestoreFocus: onRestoreFocus,
+          hasDownstreamRef,
           setDownstreamOpen,
-          hasDownstreamRef
+          onKeyDownRef,
+          onUpstreamRestoreFocus: onRestoreFocus
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          import_core2.ui.li,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          import_core4.ui.li,
           {
             ...rest,
             ...isDownstreamOpen ? { "data-active": "" } : {},
+            className: (0, import_utils4.cx)("ui-menu__item", className),
             role: "menuitem",
             tabIndex: isFocused ? 0 : -1,
-            className: (0, import_utils3.cx)("ui-menu__item", className),
             __css: css,
             children: [
-              icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, { children: icon }) : null,
+              icon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuIcon, { children: icon }) : null,
               children,
-              command ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuCommand, { children: command }) : null
+              command ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuCommand, { children: command }) : null
             ]
           }
         )
@@ -383,62 +432,62 @@ var MenuItem = (0, import_core2.forwardRef)(
     );
   }
 );
-var MenuOptionItem = (0, import_core2.forwardRef)(
-  ({ className, icon, isChecked, closeOnSelect = false, children, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+var MenuOptionItem = (0, import_core4.forwardRef)(
+  ({ className, children, closeOnSelect = false, icon, isChecked, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       MenuItem,
       {
         ref,
-        className: (0, import_utils3.cx)("ui-menu__item--option", className),
-        "aria-checked": (0, import_utils3.ariaAttr)(isChecked),
+        className: (0, import_utils4.cx)("ui-menu__item--option", className),
         closeOnSelect,
+        "aria-checked": (0, import_utils4.ariaAttr)(isChecked),
         ...rest,
         children: [
-          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, { opacity: isChecked ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, {}) }) : null,
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuIcon, { opacity: isChecked ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckIcon, {}) }) : null,
           children
         ]
       }
     );
   }
 );
-var MenuIcon = (0, import_core2.forwardRef)(
+var MenuIcon = (0, import_core4.forwardRef)(
   ({ className, ...rest }, ref) => {
     const { styles } = useMenu();
     const css = {
-      flexShrink: 0,
-      display: "inline-flex",
-      justifyContent: "center",
       alignItems: "center",
+      display: "inline-flex",
+      flexShrink: 0,
       fontSize: "0.85em",
+      justifyContent: "center",
       ...styles.icon
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_core2.ui.span,
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_core4.ui.span,
       {
         ref,
-        className: (0, import_utils3.cx)("ui-menu__item__icon", className),
+        className: (0, import_utils4.cx)("ui-menu__item__icon", className),
         __css: css,
         ...rest
       }
     );
   }
 );
-var MenuCommand = (0, import_core2.forwardRef)(
+var MenuCommand = (0, import_core4.forwardRef)(
   ({ className, ...rest }, ref) => {
     const { styles } = useMenu();
     const css = { ...styles.command };
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_core2.ui.span,
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_core4.ui.span,
       {
         ref,
-        className: (0, import_utils3.cx)("ui-menu__item__command", className),
+        className: (0, import_utils4.cx)("ui-menu__item__command", className),
         __css: css,
         ...rest
       }
     );
   }
 );
-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)(
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { height: "1em", viewBox: "0 0 14 14", width: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
   "polygon",
   {
     fill: "currentColor",
@@ -447,18 +496,18 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { view
 ) });
 
 // src/menu-button.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var MenuButton = (0, import_core3.forwardRef)(
-  ({ className, children, as, ...rest }, ref) => {
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var MenuButton = (0, import_core5.forwardRef)(
+  ({ as, className, children, ...rest }, ref) => {
     var _a;
     const { onKeyDownRef, onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
-    const { isOpen, onOpen, onClose, onFocusFirstItem, onFocusLastItem } = useMenu();
-    const onKeyDown = (0, import_react3.useCallback)(
+    const { isOpen, onClose, onFocusFirstItem, onFocusLastItem, onOpen } = useMenu();
+    const onKeyDown = (0, import_react4.useCallback)(
       (ev) => {
         const actions = {
-          Enter: (0, import_utils4.funcAll)(onOpen, onFocusFirstItem),
-          ArrowDown: (0, import_utils4.funcAll)(onOpen, onFocusFirstItem),
-          ArrowUp: (0, import_utils4.funcAll)(onOpen, onFocusLastItem)
+          ArrowDown: (0, import_utils5.funcAll)(onOpen, onFocusFirstItem),
+          ArrowUp: (0, import_utils5.funcAll)(onOpen, onFocusLastItem),
+          Enter: (0, import_utils5.funcAll)(onOpen, onFocusFirstItem)
         };
         const action = actions[ev.key];
         if (!action) return;
@@ -467,11 +516,11 @@ var MenuButton = (0, import_core3.forwardRef)(
       },
       [onFocusFirstItem, onFocusLastItem, onOpen]
     );
-    const onItemKeyDown = (0, import_react3.useCallback)(
+    const onItemKeyDown = (0, import_react4.useCallback)(
       (ev) => {
         const actions = {
-          ArrowRight: !isOpen ? (0, import_utils4.funcAll)(onOpen, onFocusFirstItem) : void 0,
-          ArrowLeft: isOpen ? (0, import_utils4.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
+          ArrowLeft: isOpen ? (0, import_utils5.funcAll)(onUpstreamRestoreFocus, onClose) : void 0,
+          ArrowRight: !isOpen ? (0, import_utils5.funcAll)(onOpen, onFocusFirstItem) : void 0
         };
         const action = actions[ev.key];
         if (!action) return;
@@ -480,46 +529,99 @@ var MenuButton = (0, import_core3.forwardRef)(
       },
       [isOpen, onOpen, onFocusFirstItem, onUpstreamRestoreFocus, onClose]
     );
-    (0, import_utils4.assignRef)(onKeyDownRef, onItemKeyDown);
-    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)(
+    (0, import_utils5.assignRef)(onKeyDownRef, onItemKeyDown);
+    const Component = (0, import_react4.useMemo)(() => as ? (0, import_core5.ui)(as) : Button, [as]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_popover3.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Component,
       {
         ref,
-        className: (0, import_utils4.cx)("ui-menu", className),
-        "aria-haspopup": "menu",
+        className: (0, import_utils5.cx)("ui-menu", className),
         "aria-expanded": isOpen,
+        "aria-haspopup": "menu",
         ...rest,
-        "data-active": (0, import_utils4.dataAttr)(isOpen),
-        onKeyDown: (0, import_utils4.handlerAll)(rest.onKeyDown, onKeyDown),
+        "data-active": (0, import_utils5.dataAttr)(isOpen),
+        onKeyDown: (0, import_utils5.handlerAll)(rest.onKeyDown, onKeyDown),
         children
       }
     ) });
   }
 );
-var Button = (0, import_core3.forwardRef)((rest, ref) => {
+var Button = (0, import_core5.forwardRef)((rest, ref) => {
   const { styles } = useMenu();
   const css = {
-    display: "inline-flex",
-    appearance: "none",
     alignItems: "center",
+    appearance: "none",
+    display: "inline-flex",
     outline: 0,
     ...styles.button
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.button, { ref, __css: css, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ui.button, { ref, __css: css, ...rest });
 });
-var MenuItemButton = (0, import_core3.forwardRef)(
-  ({ className, children, innerProps, icon, iconProps, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+var MenuItemButton = (0, import_core5.forwardRef)(
+  ({ className, children, icon, iconProps, innerProps, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       MenuButton,
       {
         ref,
-        className: (0, import_utils4.cx)("ui-menu__item-button", className),
+        className: (0, import_utils5.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_runtime5.jsx)(import_core5.ui.span, { as: "span", flex: "1", ...innerProps, children }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuIcon, { ...iconProps, children: icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icon.ChevronIcon, { fontSize: "1.5em", transform: "rotate(-90deg)" }) })
+        ]
+      }
+    );
+  }
+);
+
+// src/menu-divider.tsx
+var import_core6 = require("@yamada-ui/core");
+var import_utils6 = require("@yamada-ui/utils");
+var import_jsx_runtime6 = 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_runtime6.jsx)(
+      import_core6.ui.hr,
+      {
+        ref,
+        className: (0, import_utils6.cx)("ui-menu__divider", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+
+// src/menu-group.tsx
+var import_core7 = require("@yamada-ui/core");
+var import_utils7 = require("@yamada-ui/utils");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var MenuGroup = (0, import_core7.forwardRef)(
+  ({ className, children, label, labelProps, ...rest }, ref) => {
+    const { styles } = useMenu();
+    const css = { ...styles.group };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      import_core7.ui.li,
+      {
+        ref,
+        className: (0, import_utils7.cx)("ui-menu__item", "ui-menu__item--group", className),
+        role: "group",
+        __css: css,
+        ...rest,
+        children: [
+          label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            import_core7.ui.span,
+            {
+              className: (0, import_utils7.cx)("ui-menu__item--group-label"),
+              __css: styles.groupLabel,
+              ...labelProps,
+              children: label
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.ui.ul, { className: "ui-menu__item__group", children })
         ]
       }
     );
@@ -527,40 +629,40 @@ var MenuItemButton = (0, import_core3.forwardRef)(
 );
 
 // src/menu-list.tsx
-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_runtime4 = require("react/jsx-runtime");
-var MenuList = (0, import_core4.forwardRef)(
-  ({ className, contentProps, children, ...rest }, ref) => {
-    const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } = useMenu();
+var import_core8 = require("@yamada-ui/core");
+var import_popover4 = require("@yamada-ui/popover");
+var import_utils8 = require("@yamada-ui/utils");
+var import_react5 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var MenuList = (0, import_core8.forwardRef)(
+  ({ className, children, contentProps, ...rest }, ref) => {
+    const { focusedIndex, menuRef, setFocusedIndex, styles, onClose } = useMenu();
     const descendants = useMenuDescendantsContext();
-    const onNext = (0, import_react4.useCallback)(() => {
+    const onNext = (0, import_react5.useCallback)(() => {
       const next = descendants.enabledNextValue(focusedIndex);
       if (next) setFocusedIndex(next.index);
     }, [descendants, focusedIndex, setFocusedIndex]);
-    const onPrev = (0, import_react4.useCallback)(() => {
+    const onPrev = (0, import_react5.useCallback)(() => {
       const prev = descendants.enabledPrevValue(focusedIndex);
       if (prev) setFocusedIndex(prev.index);
     }, [descendants, focusedIndex, setFocusedIndex]);
-    const onFirst = (0, import_react4.useCallback)(() => {
+    const onFirst = (0, import_react5.useCallback)(() => {
       const first = descendants.enabledFirstValue();
       if (first) setFocusedIndex(first.index);
     }, [descendants, setFocusedIndex]);
-    const onLast = (0, import_react4.useCallback)(() => {
+    const onLast = (0, import_react5.useCallback)(() => {
       const last = descendants.enabledLastValue();
       if (last) setFocusedIndex(last.index);
     }, [descendants, setFocusedIndex]);
-    const onKeyDown = (0, import_react4.useCallback)(
+    const onKeyDown = (0, import_react5.useCallback)(
       (ev) => {
         const actions = {
-          Tab: (ev2) => ev2.preventDefault(),
-          Escape: onClose,
           ArrowDown: focusedIndex === -1 ? onFirst : onNext,
           ArrowUp: focusedIndex === -1 ? onLast : onPrev,
+          End: onLast,
+          Escape: onClose,
           Home: onFirst,
-          End: onLast
+          Tab: (ev2) => ev2.preventDefault()
         };
         const action = actions[ev.key];
         if (!action) return;
@@ -569,20 +671,20 @@ var MenuList = (0, import_core4.forwardRef)(
       },
       [focusedIndex, onClose, onFirst, onLast, onNext, onPrev]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_popover3.PopoverContent,
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_popover4.PopoverContent,
       {
         as: "div",
         className: "ui-menu__content",
         __css: { ...styles.content },
         ...contentProps,
-        onKeyDown: (0, import_utils5.handlerAll)(contentProps == null ? void 0 : contentProps.onKeyDown, onKeyDown),
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          import_core4.ui.ul,
+        onKeyDown: (0, import_utils8.handlerAll)(contentProps == null ? void 0 : contentProps.onKeyDown, onKeyDown),
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_core8.ui.ul,
           {
-            ref: (0, import_utils5.mergeRefs)(menuRef, ref),
+            ref: (0, import_utils8.mergeRefs)(menuRef, ref),
+            className: (0, import_utils8.cx)("ui-menu__list", className),
             role: "menu",
-            className: (0, import_utils5.cx)("ui-menu__list", className),
             tabIndex: -1,
             __css: { ...styles.list },
             ...rest,
@@ -594,72 +696,39 @@ var MenuList = (0, import_core4.forwardRef)(
   }
 );
 
-// src/menu-group.tsx
-var import_core5 = require("@yamada-ui/core");
-var import_utils6 = require("@yamada-ui/utils");
-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_runtime5.jsxs)(
-      import_core5.ui.li,
-      {
-        ref,
-        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,
-            {
-              className: (0, import_utils6.cx)("ui-menu__item--group-label"),
-              __css: styles.groupLabel,
-              ...labelProps,
-              children: label
-            }
-          ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ui.ul, { className: "ui-menu__item__group", children })
-        ]
-      }
-    );
-  }
-);
-
 // src/menu-option-group.tsx
 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_runtime6 = require("react/jsx-runtime");
-var MenuOptionGroup = (0, import_react5.forwardRef)(
+var import_utils9 = require("@yamada-ui/utils");
+var import_react6 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var MenuOptionGroup = (0, import_react6.forwardRef)(
   ({
+    type,
     className,
-    value: valueProp,
+    children,
     defaultValue,
+    value: valueProp,
     onChange: onChangeProp,
-    type,
-    children,
     ...rest
   }, ref) => {
     const isRadio = type === "radio";
     defaultValue != null ? defaultValue : defaultValue = isRadio ? "" : [];
     const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
-      value: valueProp,
       defaultValue,
+      value: valueProp,
       onChange: onChangeProp
     });
-    const onChange = (0, import_react5.useCallback)(
+    const onChange = (0, import_react6.useCallback)(
       (selectedValue) => {
         if (isRadio && typeof value === "string") setValue(selectedValue);
-        if (!isRadio && (0, import_utils7.isArray)(value)) {
+        if (!isRadio && (0, import_utils9.isArray)(value)) {
           const nextValue = value.includes(selectedValue) ? value.filter((item) => item !== selectedValue) : value.concat(selectedValue);
           setValue(nextValue);
         }
       },
       [isRadio, value, setValue]
     );
-    const validChildren = (0, import_utils7.getValidChildren)(children);
+    const validChildren = (0, import_utils9.getValidChildren)(children);
     const cloneChildren = validChildren.map((child) => {
       if (child.type !== MenuOptionItem) return child;
       const onClick = (ev) => {
@@ -667,14 +736,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_utils7.isArray)(value) ? value.includes(child.props.value) : child.props.value === value;
-      return (0, import_react5.cloneElement)(child, { type, onClick, isChecked });
+      const isChecked = !isRadio && (0, import_utils9.isArray)(value) ? value.includes(child.props.value) : child.props.value === value;
+      return (0, import_react6.cloneElement)(child, { type, isChecked, onClick });
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       MenuGroup,
       {
         ref,
-        className: (0, import_utils7.cx)("ui-menu__item--group--option", className),
+        className: (0, import_utils9.cx)("ui-menu__item--group--option", className),
         ...rest,
         children: cloneChildren
       }
@@ -682,72 +751,6 @@ var MenuOptionGroup = (0, import_react5.forwardRef)(
   }
 );
 MenuOptionGroup.displayName = "MenuOptionGroup";
-
-// src/menu-divider.tsx
-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 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");
-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.pageY, left: ev.pageX });
-    };
-    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: "absolute", ...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,