cynx-lib 1.3.91 → 1.3.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.91",
+  "version": "1.3.92",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/ui/components/ActionsMenu.jsx

@@ -1,44 +1,47 @@
 import { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 
-function ActionSubmenu({ items, parentRect, closeAll, onMouseEnter, onMouseLeave }) {
+function ActionSubmenu({ items, menuRect, itemRect, closeAll, onMouseEnter, onMouseLeave }) {
   const subRef = useRef(null);
-  const [pos, setPos] = useState({
-    top: parentRect ? parentRect.top - 5 : 0,
-    left: parentRect ? parentRect.right + 4 : 0,
-    transformOrigin: 'top left',
-  });
 
   useLayoutEffect(() => {
-    if (!subRef.current || !parentRect) return;
-    const subWidth = subRef.current.offsetWidth || 190;
-    const subHeight = subRef.current.offsetHeight || 150;
+    const sub = subRef.current;
+    if (!sub || !menuRect || !itemRect) return;
 
-    const spaceRight = window.innerWidth - parentRect.right;
+    const subWidth = sub.offsetWidth || 190;
+    const subHeight = sub.offsetHeight || 150;
+
+    // Determine horizontal docking relative to PARENT MENU container
+    const spaceRight = window.innerWidth - menuRect.right;
     let left;
-    let transformOriginX = 'left';
-    if (spaceRight >= subWidth + 12) {
-      left = parentRect.right + 4;
-      transformOriginX = 'left';
+    let originX = 'left';
+
+    if (spaceRight >= subWidth + 8) {
+      // Dock cleanly to the right side of parent menu
+      left = menuRect.right + 4;
+      originX = 'left';
     } else {
-      left = parentRect.left - subWidth - 4;
-      transformOriginX = 'right';
+      // Dock cleanly to the left side of parent menu (never overlaps!)
+      left = menuRect.left - subWidth - 4;
+      originX = 'right';
     }
+
+    // Keep within viewport bounds
     left = Math.max(8, Math.min(left, window.innerWidth - subWidth - 8));
 
-    let top = parentRect.top - 5;
-    let transformOriginY = 'top';
-    if (top + subHeight > window.innerHeight - 10) {
-      top = Math.max(10, window.innerHeight - subHeight - 10);
-      transformOriginY = 'bottom';
+    // Determine vertical docking relative to the active item
+    let top = itemRect.top - 5;
+    let originY = 'top';
+
+    if (top + subHeight > window.innerHeight - 8) {
+      top = Math.max(8, window.innerHeight - subHeight - 8);
+      originY = 'bottom';
     }
 
-    setPos({
-      top,
-      left,
-      transformOrigin: `${transformOriginY} ${transformOriginX}`,
-    });
-  }, [parentRect]);
+    sub.style.top = top + 'px';
+    sub.style.left = left + 'px';
+    sub.style.transformOrigin = `${originY} ${originX}`;
+  }, [menuRect, itemRect]);
 
   return createPortal(
     <div
@@ -51,9 +54,8 @@ function ActionSubmenu({ items, parentRect, closeAll, onMouseEnter, onMouseLeave
         zIndex: 100000,
         minWidth: 190,
         padding: 5,
-        top: pos.top + 'px',
-        left: pos.left + 'px',
-        transformOrigin: pos.transformOrigin,
+        top: itemRect ? (itemRect.top - 5) + 'px' : '0px',
+        left: menuRect ? (menuRect.left - 200) + 'px' : '0px',
         background: 'var(--surface,#fff)',
         border: '1.5px solid var(--border-light,#e2e8f0)',
         borderRadius: 'var(--rads,8px)',
@@ -72,6 +74,7 @@ function ActionSubmenu({ items, parentRect, closeAll, onMouseEnter, onMouseLeave
               display: 'flex', alignItems: 'center', gap: 8,
               padding: '6px 10px', borderRadius: 'var(--rads,8px)',
               fontSize: 12, cursor: 'pointer', transition: 'all .14s',
+              whiteSpace: 'nowrap',
               color: (subItem.variant === 'danger' || subItem.danger) ? 'var(--danger, #ef4444)' : subItem.variant === 'success' ? 'var(--success, #16a34a)' : subItem.variant === 'warning' ? 'var(--warning, #f59e0b)' : 'var(--primary-text, #18181b)',
               fontWeight: 500,
             }}
@@ -99,7 +102,7 @@ function ActionSubmenu({ items, parentRect, closeAll, onMouseEnter, onMouseLeave
 export function ActionsMenu({ items, align = 'right' }) {
   const [open, setOpen] = useState(false);
   const [closing, setClosing] = useState(false);
-  const [activeSub, setActiveSub] = useState(null); // { index, items, rect }
+  const [activeSub, setActiveSub] = useState(null); // { index, items, itemRect, menuRect }
   const wrapRef = useRef(null);
   const menuRef = useRef(null);
   const btnRef = useRef(null);
@@ -114,8 +117,9 @@ export function ActionsMenu({ items, align = 'right' }) {
 
   const openSub = (index, subItems, e) => {
     clearTimeout(subTimerRef.current);
-    const rect = e.currentTarget.getBoundingClientRect();
-    setActiveSub({ index, items: subItems, rect });
+    const itemRect = e.currentTarget.getBoundingClientRect();
+    const menuRect = menuRef.current ? menuRef.current.getBoundingClientRect() : itemRect;
+    setActiveSub({ index, items: subItems, itemRect, menuRect });
   };
 
   const scheduleCloseSub = () => {
@@ -280,6 +284,7 @@ export function ActionsMenu({ items, align = 'right' }) {
                   display: 'flex', alignItems: 'center', gap: 8,
                   padding: '6px 10px', borderRadius: 'var(--rads,8px)',
                   fontSize: 12, cursor: 'pointer', transition: 'all .14s',
+                  whiteSpace: 'nowrap',
                   background: isSubActive ? 'var(--grey-1, #f4f4f5)' : 'transparent',
                   color: (item.variant === 'danger' || item.danger)
                     ? 'var(--danger, #ef4444)'
@@ -325,7 +330,8 @@ export function ActionsMenu({ items, align = 'right' }) {
       {open && activeSub && (
         <ActionSubmenu
           items={activeSub.items}
-          parentRect={activeSub.rect}
+          menuRect={activeSub.menuRect}
+          itemRect={activeSub.itemRect}
           closeAll={close}
           onMouseEnter={cancelCloseSub}
           onMouseLeave={scheduleCloseSub}