@particle-academy/react-fancy 2.3.1 → 2.3.3

package/dist/index.cjs

@@ -6943,84 +6943,15 @@ function ContextMenuTrigger({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-context-menu-trigger": "", onContextMenu: handleContextMenu, className: cn(className), children });
 }
 ContextMenuTrigger.displayName = "ContextMenuTrigger";
-function ContextMenuContent({
-  children,
-  className
-}) {
-  const { open, setOpen, position } = useContextMenu();
-  const menuRef = react.useRef(null);
-  const close = react.useCallback(() => setOpen(false), [setOpen]);
-  useOutsideClick(menuRef, close, open);
-  useEscapeKey(close, open);
-  const { mounted, className: animClass, ref: animRef } = useAnimation({
-    open,
-    enterClass: "fancy-scale-in",
-    exitClass: "fancy-fade-out"
-  });
-  if (!mounted) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref: (node) => {
-        menuRef.current = node;
-        animRef.current = node;
-      },
-      "data-react-fancy-context-menu": "",
-      role: "menu",
-      className: cn(
-        "fixed z-50 min-w-[8rem] rounded-xl border border-zinc-200 bg-white p-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900",
-        animClass,
-        className
-      ),
-      style: { left: position.x, top: position.y },
-      children
-    }
-  ) });
-}
-ContextMenuContent.displayName = "ContextMenuContent";
-function ContextMenuItem({
-  children,
-  onClick,
-  disabled = false,
-  danger = false,
-  className
-}) {
-  const { setOpen } = useContextMenu();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      type: "button",
-      "data-react-fancy-context-menu-item": "",
-      role: "menuitem",
-      disabled,
-      "aria-disabled": disabled,
-      className: cn(
-        "flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors",
-        danger ? "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800",
-        disabled && "cursor-not-allowed opacity-50",
-        className
-      ),
-      onClick: () => {
-        if (disabled) return;
-        onClick?.();
-        setOpen(false);
-      },
-      children
-    }
-  );
-}
-ContextMenuItem.displayName = "ContextMenuItem";
-function ContextMenuSeparator({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-react-fancy-context-menu-separator": "",
-      role: "separator",
-      className: cn("my-1 h-px bg-zinc-200 dark:bg-zinc-700", className)
-    }
-  );
+var MenuGroupContext = react.createContext({
+  activeSubId: null,
+  setActiveSub: () => {
+  }
+});
+function MenuGroupProvider({ children }) {
+  const [activeSubId, setActiveSub] = react.useState(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuGroupContext.Provider, { value: { activeSubId, setActiveSub }, children });
 }
-ContextMenuSeparator.displayName = "ContextMenuSeparator";
 var ContextMenuSubContext = react.createContext({
   open: false,
   setOpen: () => {
@@ -7029,12 +6960,25 @@ var ContextMenuSubContext = react.createContext({
   }
 });
 function ContextMenuSub({ children }) {
-  const [open, setOpen] = react.useState(false);
+  const id = react.useId();
+  const { activeSubId, setActiveSub } = react.useContext(MenuGroupContext);
+  const open = activeSubId === id;
   const closeTimer = react.useRef(null);
+  const activeRef = react.useRef(activeSubId);
+  activeRef.current = activeSubId;
+  const setOpen = react.useCallback((v) => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+    setActiveSub(v ? id : null);
+  }, [id, setActiveSub]);
   const scheduleClose = react.useCallback(() => {
     if (closeTimer.current) clearTimeout(closeTimer.current);
-    closeTimer.current = setTimeout(() => setOpen(false), 150);
-  }, []);
+    closeTimer.current = setTimeout(() => {
+      if (activeRef.current === id) setActiveSub(null);
+    }, 150);
+  }, [id, setActiveSub]);
   const cancelClose = react.useCallback(() => {
     if (closeTimer.current) {
       clearTimeout(closeTimer.current);
@@ -7106,11 +7050,89 @@ function ContextMenuSubContent({ children, className }) {
         flipLeft ? "right-full mr-1" : "left-full ml-1",
         className
       ),
-      children
+      children: /* @__PURE__ */ jsxRuntime.jsx(MenuGroupProvider, { children })
     }
   );
 }
 ContextMenuSubContent.displayName = "ContextMenuSubContent";
+function ContextMenuContent({
+  children,
+  className
+}) {
+  const { open, setOpen, position } = useContextMenu();
+  const menuRef = react.useRef(null);
+  const close = react.useCallback(() => setOpen(false), [setOpen]);
+  useOutsideClick(menuRef, close, open);
+  useEscapeKey(close, open);
+  const { mounted, className: animClass, ref: animRef } = useAnimation({
+    open,
+    enterClass: "fancy-scale-in",
+    exitClass: "fancy-fade-out"
+  });
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: (node) => {
+        menuRef.current = node;
+        animRef.current = node;
+      },
+      "data-react-fancy-context-menu": "",
+      role: "menu",
+      className: cn(
+        "fixed z-50 min-w-[8rem] rounded-xl border border-zinc-200 bg-white p-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900",
+        animClass,
+        className
+      ),
+      style: { left: position.x, top: position.y },
+      children: /* @__PURE__ */ jsxRuntime.jsx(MenuGroupProvider, { children })
+    }
+  ) });
+}
+ContextMenuContent.displayName = "ContextMenuContent";
+function ContextMenuItem({
+  children,
+  onClick,
+  disabled = false,
+  danger = false,
+  className
+}) {
+  const { setOpen } = useContextMenu();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "data-react-fancy-context-menu-item": "",
+      role: "menuitem",
+      disabled,
+      "aria-disabled": disabled,
+      className: cn(
+        "flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors",
+        danger ? "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      onClick: () => {
+        if (disabled) return;
+        onClick?.();
+        setOpen(false);
+      },
+      children
+    }
+  );
+}
+ContextMenuItem.displayName = "ContextMenuItem";
+function ContextMenuSeparator({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-react-fancy-context-menu-separator": "",
+      role: "separator",
+      className: cn("my-1 h-px bg-zinc-200 dark:bg-zinc-700", className)
+    }
+  );
+}
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
 function ContextMenuRoot({ children }) {
   const [open, setOpen] = react.useState(false);
   const positionRef = react.useRef({ x: 0, y: 0 });
@@ -9801,7 +9823,7 @@ var Chart = {
   HorizontalBar: ChartHorizontalBar,
   StackedBar: ChartStackedBar
 };
-function useId11(prefix) {
+function useId12(prefix) {
   const id = react.useId();
   return prefix ? `${prefix}-${id}` : id;
 }
@@ -12466,7 +12488,7 @@ exports.useEscapeKey = useEscapeKey;
 exports.useFileUpload = useFileUpload;
 exports.useFloatingPosition = useFloatingPosition;
 exports.useFocusTrap = useFocusTrap;
-exports.useId = useId11;
+exports.useId = useId12;
 exports.useKanban = useKanban;
 exports.useMenu = useMenu;
 exports.useMobileMenu = useMobileMenu;