cynx-ui 1.2.26 → 1.2.27

package/components/DatePicker.jsx

@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react';
 
 // DatePicker — reusable date picker component
@@ -24,19 +25,41 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
   const [open,    setOpen]    = useState(false);
   const [view,    setView]    = useState('day');    // 'day' | 'month' | 'year'
   const [cursor,  setCursor]  = useState(() => value ? new Date(value) : new Date());
+  const [pos,     setPos]     = useState({ top: 0, left: 0, width: 0 });
   const ref = useRef(null);
+  const btnRef = useRef(null);
+  const dropRef = useRef(null);
 
   // Close on outside click
   useEffect(() => {
     if (!open) return;
-    function close(e) { if (!ref.current?.contains(e.target)) { setOpen(false); setView('day'); } }
-    document.addEventListener('mousedown', close);
-    return () => document.removeEventListener('mousedown', close);
+    function close(e) {
+      if (ref.current?.contains(e.target)) return;
+      if (dropRef.current?.contains(e.target)) return;
+      setOpen(false); setView('day');
+    }
+    document.addEventListener('mousedown', close, true);
+    return () => document.removeEventListener('mousedown', close, true);
   }, [open]);
 
   // Sync cursor when value changes externally
   useEffect(() => { if (value) setCursor(new Date(value)); }, [value]);
 
+  // Compute button position when dropdown opens
+  useEffect(() => {
+    if (!open || !btnRef.current) return;
+    function updatePos() {
+      if (btnRef.current) {
+        const r = btnRef.current.getBoundingClientRect();
+        setPos({ top: r.bottom + 6, left: r.left, width: Math.max(r.width, 252) });
+      }
+    }
+    updatePos();
+    window.addEventListener('scroll', updatePos, true);
+    window.addEventListener('resize', updatePos);
+    return () => { window.removeEventListener('scroll', updatePos, true); window.removeEventListener('resize', updatePos); };
+  }, [open]);
+
   function pick(date) {
     onChange?.(date);
     setOpen(false);
@@ -196,7 +219,7 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
   return (
     <div ref={ref} style={{ position: 'relative', display: 'inline-block', ...style }}>
       {/* Trigger */}
-      <button type="button" onClick={() => !disabled && setOpen(o => !o)} style={{
+      <button ref={btnRef} type="button" onClick={() => !disabled && setOpen(o => !o)} style={{
         display: 'flex', alignItems: 'center', gap: 7,
         padding: '5px 10px', borderRadius: 'var(--rads)',
         border: '1px solid var(--border)', background: 'var(--surface)',
@@ -220,13 +243,13 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
         )}
       </button>
 
-      {/* Dropdown */}
-      {open && (
-        <div style={{
-          position: 'absolute', top: 'calc(100% + 6px)', left: 0, zIndex: 999,
+      {/* Dropdown via portal */}
+      {open && createPortal(
+        <div ref={dropRef} style={{
+          position: 'fixed', top: pos.top, left: pos.left, width: pos.width, zIndex: 9000,
           background: 'var(--surface)', border: '1px solid var(--border)',
           borderRadius: 10, boxShadow: 'var(--shadow-lg)',
-          padding: '10px 12px', width: 252,
+          padding: '10px 12px',
           animation: 'dp-in .12s ease',
         }}>
           {/* Calendar header */}
@@ -253,7 +276,8 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
           {view === 'month' && renderMonths()}
           {view === 'year'  && renderYears()}
 
-        </div>
+        </div>,
+        document.body
       )}
 
       <style>{`@keyframes dp-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }`}</style>

package/package.json

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