cynx-ui 1.2.16 → 1.2.18

package/components/ActionsMenu.jsx

@@ -1,149 +1,149 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
-
-export function ActionsMenu({ items, align = 'right' }) {
-  const [open, setOpen] = useState(false);
-  const [closing, setClosing] = useState(false);
-  const wrapRef = useRef(null);
-  const menuRef = useRef(null);
-  const btnRef = useRef(null);
-
-  const close = useCallback(() => {
-    setClosing(true);
-    setTimeout(() => { setClosing(false); setOpen(false); }, 140);
-  }, []);
-
-  useEffect(() => {
-    if (!open) return;
-    function onDocClick(e) {
-      if (wrapRef.current && !wrapRef.current.contains(e.target)) close();
-    }
-    function onScroll() { if (menuRef.current) positionMenu(); }
-    document.addEventListener('mousedown', onDocClick);
-    document.addEventListener('scroll', onScroll, true);
-    window.addEventListener('resize', onScroll);
-    return () => {
-      document.removeEventListener('mousedown', onDocClick);
-      document.removeEventListener('scroll', onScroll, true);
-      window.removeEventListener('resize', onScroll);
-    };
-  }, [open, close]);
-
-  function positionMenu() {
-    const btn = btnRef.current;
-    const menu = menuRef.current;
-    if (!btn || !menu) return;
-    const br = btn.getBoundingClientRect();
-    const mw = menu.offsetWidth || 180;
-    const mh = menu.offsetHeight || 120;
-    const spaceBelow = window.innerHeight - br.bottom;
-    const spaceAbove = br.top;
-    const openUp = spaceBelow < mh + 12 && spaceAbove > spaceBelow;
-
-    let top, left;
-    if (openUp) {
-      top = br.top + window.scrollY - mh - 6;
-    } else {
-      top = br.bottom + window.scrollY + 6;
-    }
-    if (align === 'left') {
-      left = br.left + window.scrollX;
-    } else {
-      left = br.right + window.scrollX - mw;
-    }
-    left = Math.max(8, Math.min(left, window.innerWidth - mw - 8));
-
-    menu.style.top = top + 'px';
-    menu.style.left = left + 'px';
-    menu.classList.toggle('open-up', openUp);
-  }
-
-  useEffect(() => {
-    if (open) requestAnimationFrame(positionMenu);
-  }, [open]);
-
-  function toggle() {
-    if (open) close();
-    else { setOpen(true); setClosing(false); }
-  }
-
-  const isOpen = open && !closing;
-
-  return (
-    <div ref={wrapRef} style={{ position: 'relative', display: 'inline-block' }}>
-      <button
-        ref={btnRef}
-        type="button"
-        onClick={toggle}
-        style={{
-          width: 30, height: 30, borderRadius: 'var(--rads,8px)',
-          border: isOpen ? '1px solid var(--accent,#f99e2c)' : '1px solid var(--border-light,#d7d8e0)',
-          background: '#fff',
-          cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
-          color: isOpen ? 'var(--accent)' : 'var(--muted,#797b8d)', transition: 'all .14s',
-          boxShadow: isOpen ? '0 0 0 3px rgba(249,158,44,.12)' : '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06)',
-        }}
-      >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-          <circle cx="5" cy="12" r="1.5" /><circle cx="12" cy="12" r="1.5" /><circle cx="19" cy="12" r="1.5" />
-        </svg>
-      </button>
-
-      {open && (
-        <div
-          ref={menuRef}
-          style={{
-            position: 'fixed', zIndex: 8100, minWidth: 180, padding: 5,
-            background: '#fff', border: '1.5px solid var(--border-light,#e2e8f0)',
-            borderRadius: 'var(--rads,8px)',
-            boxShadow: '0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06)',
-            animation: closing
-              ? 'actionsClose .14s ease forwards'
-              : 'actionsDrop .14s cubic-bezier(.16,1,.3,1)',
-          }}
-        >
-          {items.map((item, i) => (
-            item.dividerBefore ? (
-              <div key={i} style={{ height: 1, background: 'var(--border-light,#e2e8f0)', margin: '4px 0' }} />
-            ) : (
-              <div
-                key={i}
-                onClick={() => { close(); item.onClick?.(); }}
-                style={{
-                  display: 'flex', alignItems: 'center', gap: 8,
-                  padding: '6px 10px', borderRadius: 'var(--rads,8px)',
-                  fontSize: 12, cursor: 'pointer', transition: 'all .14s',
-                  color: item.variant === 'danger' ? 'var(--danger)' : item.variant === 'success' ? 'var(--success)' : item.variant === 'warning' ? 'var(--accent)' : 'var(--text,#1a1a2e)',
-                  fontWeight: 500,
-                }}
-                onMouseEnter={e => {
-                  e.currentTarget.style.background = item.variant === 'danger' ? 'rgba(246,71,71,.08)' : item.variant === 'warning' ? 'rgba(249,158,44,.08)' : 'var(--grey-1,#f5f5f8)';
-                }}
-                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
-              >
-                {item.icon && (
-                  <span style={{
-                    width: 24, height: 24, borderRadius: 5,
-                    display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    flexShrink: 0, color: 'inherit', fontSize: 12,
-                  }}>{item.icon}</span>
-                )}
-                <span>{item.label}</span>
-              </div>
-            )
-          ))}
-        </div>
-      )}
-
-      <style>{`
-        @keyframes actionsDrop {
-          from { opacity: 0; transform: translateY(-6px) scaleY(.96); }
-          to { opacity: 1; transform: translateY(0) scaleY(1); }
-        }
-        @keyframes actionsClose {
-          from { opacity: 1; transform: translateY(0) scaleY(1); }
-          to { opacity: 0; transform: translateY(-4px) scaleY(.96); }
-        }
-      `}</style>
-    </div>
-  );
-}
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+export function ActionsMenu({ items, align = 'right' }) {
+  const [open, setOpen] = useState(false);
+  const [closing, setClosing] = useState(false);
+  const wrapRef = useRef(null);
+  const menuRef = useRef(null);
+  const btnRef = useRef(null);
+
+  const close = useCallback(() => {
+    setClosing(true);
+    setTimeout(() => { setClosing(false); setOpen(false); }, 140);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    function onDocClick(e) {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) close();
+    }
+    function onScroll() { if (menuRef.current) positionMenu(); }
+    document.addEventListener('mousedown', onDocClick);
+    document.addEventListener('scroll', onScroll, true);
+    window.addEventListener('resize', onScroll);
+    return () => {
+      document.removeEventListener('mousedown', onDocClick);
+      document.removeEventListener('scroll', onScroll, true);
+      window.removeEventListener('resize', onScroll);
+    };
+  }, [open, close]);
+
+  function positionMenu() {
+    const btn = btnRef.current;
+    const menu = menuRef.current;
+    if (!btn || !menu) return;
+    const br = btn.getBoundingClientRect();
+    const mw = menu.offsetWidth || 180;
+    const mh = menu.offsetHeight || 120;
+    const spaceBelow = window.innerHeight - br.bottom;
+    const spaceAbove = br.top;
+    const openUp = spaceBelow < mh + 12 && spaceAbove > spaceBelow;
+
+    let top, left;
+    if (openUp) {
+      top = br.top + window.scrollY - mh - 6;
+    } else {
+      top = br.bottom + window.scrollY + 6;
+    }
+    if (align === 'left') {
+      left = br.left + window.scrollX;
+    } else {
+      left = br.right + window.scrollX - mw;
+    }
+    left = Math.max(8, Math.min(left, window.innerWidth - mw - 8));
+
+    menu.style.top = top + 'px';
+    menu.style.left = left + 'px';
+    menu.classList.toggle('open-up', openUp);
+  }
+
+  useEffect(() => {
+    if (open) requestAnimationFrame(positionMenu);
+  }, [open]);
+
+  function toggle() {
+    if (open) close();
+    else { setOpen(true); setClosing(false); }
+  }
+
+  const isOpen = open && !closing;
+
+  return (
+    <div ref={wrapRef} style={{ position: 'relative', display: 'inline-block' }}>
+      <button
+        ref={btnRef}
+        type="button"
+        onClick={toggle}
+        style={{
+          width: 30, height: 30, borderRadius: 'var(--rads,8px)',
+          border: isOpen ? '1px solid var(--accent,#f99e2c)' : '1px solid var(--border-light,#d7d8e0)',
+          background: '#fff',
+          cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+          color: isOpen ? 'var(--accent)' : 'var(--muted,#797b8d)', transition: 'all .14s',
+          boxShadow: isOpen ? '0 0 0 3px rgba(249,158,44,.12)' : '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06)',
+        }}
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <circle cx="5" cy="12" r="1.5" /><circle cx="12" cy="12" r="1.5" /><circle cx="19" cy="12" r="1.5" />
+        </svg>
+      </button>
+
+      {open && (
+        <div
+          ref={menuRef}
+          style={{
+            position: 'fixed', zIndex: 8100, minWidth: 180, padding: 5,
+            background: '#fff', border: '1.5px solid var(--border-light,#e2e8f0)',
+            borderRadius: 'var(--rads,8px)',
+            boxShadow: '0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06)',
+            animation: closing
+              ? 'actionsClose .14s ease forwards'
+              : 'actionsDrop .14s cubic-bezier(.16,1,.3,1)',
+          }}
+        >
+          {items.map((item, i) => (
+            item.dividerBefore ? (
+              <div key={i} style={{ height: 1, background: 'var(--border-light,#e2e8f0)', margin: '4px 0' }} />
+            ) : (
+              <div
+                key={i}
+                onClick={() => { close(); item.onClick?.(); }}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 8,
+                  padding: '6px 10px', borderRadius: 'var(--rads,8px)',
+                  fontSize: 12, cursor: 'pointer', transition: 'all .14s',
+                  color: item.variant === 'danger' ? 'var(--danger)' : item.variant === 'success' ? 'var(--success)' : item.variant === 'warning' ? 'var(--accent)' : 'var(--text,#1a1a2e)',
+                  fontWeight: 500,
+                }}
+                onMouseEnter={e => {
+                  e.currentTarget.style.background = item.variant === 'danger' ? 'rgba(246,71,71,.08)' : item.variant === 'warning' ? 'rgba(249,158,44,.08)' : 'var(--grey-1,#f5f5f8)';
+                }}
+                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
+              >
+                {item.icon && (
+                  <span style={{
+                    width: 24, height: 24, borderRadius: 5,
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    flexShrink: 0, color: 'inherit', fontSize: 12,
+                  }}>{item.icon}</span>
+                )}
+                <span>{item.label}</span>
+              </div>
+            )
+          ))}
+        </div>
+      )}
+
+      <style>{`
+        @keyframes actionsDrop {
+          from { opacity: 0; transform: translateY(-6px) scaleY(.96); }
+          to { opacity: 1; transform: translateY(0) scaleY(1); }
+        }
+        @keyframes actionsClose {
+          from { opacity: 1; transform: translateY(0) scaleY(1); }
+          to { opacity: 0; transform: translateY(-4px) scaleY(.96); }
+        }
+      `}</style>
+    </div>
+  );
+}