cynx-ui 1.3.10 → 1.3.12

package/components/BrandingCard.jsx

@@ -55,6 +55,7 @@ export function BrandingCard({ label, hint, value, onUpload, onRemove, saving, o
     <div>
       <div style={{
         display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        gap: 10,
         padding: '10px 12px', borderRadius: 'var(--rads)',
         border: '1px solid var(--border-light)', background: 'var(--surface)',
         boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
@@ -71,7 +72,7 @@ export function BrandingCard({ label, hint, value, onUpload, onRemove, saving, o
           </div>
         )}
         {!fullview && (
-          <div style={{ flex: 1, fontSize: '.78rem', color: filename ? 'var(--primary-text)' : 'var(--muted)', fontFamily: filename ? 'var(--mono)' : 'inherit', wordBreak: 'break-all', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          <div style={{ flex: 1, minWidth: 0, fontSize: '.78rem', color: filename ? 'var(--primary-text)' : 'var(--muted)', fontFamily: filename ? 'var(--mono)' : 'inherit', wordBreak: 'break-all', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
             {filename || 'Not set'}
           </div>
         )}

package/components/Dropdown.jsx

@@ -49,15 +49,23 @@ export default function Dropdown({ value, onChange, options, placeholder = 'Sele
 
   const selected = options.find(o => String(o.value) === String(value));
 
+  const spaceBelow = rect ? window.innerHeight - rect.bottom : 200;
+  const spaceAbove = rect ? rect.top : 200;
+  const estimatedH = Math.min(options.length * 36 + 10, 220);
+  const openUp = spaceBelow < estimatedH + 10 && spaceAbove > spaceBelow;
+  const calculatedTop = rect ? (openUp ? Math.max(8, rect.top - estimatedH - 4) : rect.bottom + 4) : 0;
+
   const menu = open && rect && createPortal(
     <div
       ref={menuRef}
       data-dropdown="true"
       style={{
         position: 'fixed',
-        top:   rect.bottom + 4,
+        top:   calculatedTop,
         left:  rect.left,
         width: rect.width,
+        maxHeight: 220,
+        overflowY: 'auto',
         background: 'var(--surface)',
         border: '1px solid var(--border)',
         borderRadius: 'var(--rads)',

package/components/MultiSelect.jsx

@@ -70,12 +70,18 @@ export default function MultiSelect({ value = [], onChange, options = [], placeh
     if (open) setQuery('');
   }
 
+  const spaceBelow = rect ? window.innerHeight - rect.bottom : 200;
+  const spaceAbove = rect ? rect.top : 200;
+  const estimatedH = 220;
+  const openUp = spaceBelow < estimatedH + 10 && spaceAbove > spaceBelow;
+  const top = rect ? (openUp ? Math.max(8, rect.top - estimatedH - 4) : rect.bottom + 4) : 0;
+
   const menu = open && rect && createPortal(
     <div
       ref={menuRef}
       style={{
         position: 'fixed',
-        top: rect.bottom + 4,
+        top,
         left: rect.left,
         width: rect.width,
         zIndex: 999999,

package/components/SearchableDropdown.jsx

@@ -48,9 +48,14 @@ export function SearchableDropdown({ value, onChange, options = [], placeholder
     const btn = btnRef.current;
     if (!btn) return;
     const rect = btn.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const estimatedH = 220;
+    const openUp = spaceBelow < estimatedH + 10 && spaceAbove > spaceBelow;
+    const top = openUp ? Math.max(8, rect.top - estimatedH - 4) : rect.bottom + 4;
     setMenuStyle({
       position: 'fixed',
-      top: rect.bottom + 4,
+      top,
       left: rect.left,
       width: rect.width,
       zIndex: 999999,

package/components/Select.jsx

@@ -1,8 +1,11 @@
-import { useState, useRef, useEffect, useMemo } from 'react';
+import { useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { ChevronDown, Check, X } from 'lucide-react';
 
-const KEYFRAMES = `@keyframes selFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}`;
+const KEYFRAMES = `
+@keyframes selFadeInDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
+@keyframes selFadeInUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
+`;
 let _id = 'cynx-select-styles';
 
 function ensureStyles() {
@@ -30,35 +33,73 @@ export default function Select({
 }) {
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
-  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 });
+  const [pos, setPos] = useState({ top: 0, left: 0, width: 0, openUp: false, maxHeight: 200 });
   const wrapRef = useRef(null);
   const dropRef = useRef(null);
   const inputRef = useRef(null);
 
   ensureStyles();
 
+  const calcPosition = useCallback(() => {
+    if (!wrapRef.current) return;
+    const r = wrapRef.current.getBoundingClientRect();
+    const dropEl = dropRef.current;
+    const dropHeight = dropEl ? dropEl.offsetHeight : 220;
+    const spaceBelow = window.innerHeight - r.bottom;
+    const spaceAbove = r.top;
+    
+    // If not enough space below (< dropHeight + 10) and more space above, open up
+    const openUp = spaceBelow < Math.min(dropHeight, 220) + 12 && spaceAbove > spaceBelow;
+    
+    // Dynamic max-height for inner list to prevent overflow
+    const availableSpace = openUp ? spaceAbove - 16 : spaceBelow - 16;
+    const calculatedMaxHeight = Math.max(90, Math.min(220, availableSpace - (searchable ? 46 : 14)));
+
+    let top;
+    if (openUp) {
+      top = Math.max(8, r.top - (dropEl ? dropEl.offsetHeight : dropHeight) - 4);
+    } else {
+      top = Math.min(window.innerHeight - 40, r.bottom + 4);
+    }
+
+    let left = r.left;
+    const width = r.width;
+    if (left + width > window.innerWidth - 8) {
+      left = Math.max(8, window.innerWidth - width - 8);
+    }
+
+    setPos({
+      top,
+      left,
+      width,
+      openUp,
+      maxHeight: calculatedMaxHeight,
+    });
+  }, [searchable]);
+
   useEffect(() => {
     if (!open) return;
-    function updatePos() {
-      if (wrapRef.current) {
-        const r = wrapRef.current.getBoundingClientRect();
-        setPos({ top: r.bottom + 4, left: r.left, width: r.width });
-      }
-    }
     function close(e) {
       const inTrigger = wrapRef.current && wrapRef.current.contains(e.target);
       const inDrop = dropRef.current && dropRef.current.contains(e.target);
       if (!inTrigger && !inDrop) setOpen(false);
     }
     document.addEventListener('mousedown', close, true);
-    window.addEventListener('scroll', updatePos, true);
-    window.addEventListener('resize', updatePos);
+    window.addEventListener('scroll', calcPosition, true);
+    window.addEventListener('resize', calcPosition);
     return () => {
       document.removeEventListener('mousedown', close, true);
-      window.removeEventListener('scroll', updatePos, true);
-      window.removeEventListener('resize', updatePos);
+      window.removeEventListener('scroll', calcPosition, true);
+      window.removeEventListener('resize', calcPosition);
     };
-  }, [open]);
+  }, [open, calcPosition]);
+
+  useLayoutEffect(() => {
+    if (open) {
+      calcPosition();
+      requestAnimationFrame(calcPosition);
+    }
+  }, [open, calcPosition]);
 
   useEffect(() => {
     if (open && searchable && inputRef.current) inputRef.current.focus();
@@ -85,8 +126,7 @@ export default function Select({
   function handleOpen() {
     if (disabled) return;
     if (!open && wrapRef.current) {
-      const r = wrapRef.current.getBoundingClientRect();
-      setPos({ top: r.bottom + 4, left: r.left, width: r.width });
+      calcPosition();
     }
     setOpen(o => !o);
   }
@@ -254,7 +294,7 @@ export default function Select({
             borderRadius: radiusVal,
             boxShadow: 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
             padding: 3,
-            animation: 'selFadeIn .15s ease',
+            animation: `${pos.openUp ? 'selFadeInUp' : 'selFadeInDown'} .15s ease`,
             overflow: 'hidden',
           }}
         >
@@ -285,7 +325,7 @@ export default function Select({
               />
             </div>
           )}
-          <div style={{ maxHeight: 200, overflowY: 'auto' }}>
+          <div style={{ maxHeight: pos.maxHeight || 200, overflowY: 'auto' }}>
             {filtered.length === 0 ? (
               <div style={{ padding: '10px 8px', textAlign: 'center', color: 'var(--t3,var(--grey-3))', fontSize: 11 }}>
                 Ничего не найдено

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-ui",
-  "version": "1.3.10",
+  "version": "1.3.12",
   "type": "module",
   "exports": {
     ".": "./index.js"