cynx-ui 1.2.35 → 1.2.36

package/components/DatePicker.jsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react';
 
@@ -58,20 +58,44 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
     if (d) setCursor(d);
   }, [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) });
-      }
+  const calcPos = useCallback(() => {
+    if (!btnRef.current) return;
+    const r = btnRef.current.getBoundingClientRect();
+    const dropW = Math.max(r.width, 260);
+    const dropH = dropRef.current ? dropRef.current.offsetHeight : 280;
+
+    let left = r.left;
+    if (left + dropW > window.innerWidth - 12) {
+      left = Math.max(12, r.right - dropW);
     }
-    updatePos();
-    window.addEventListener('scroll', updatePos, true);
-    window.addEventListener('resize', updatePos);
-    return () => { window.removeEventListener('scroll', updatePos, true); window.removeEventListener('resize', updatePos); };
-  }, [open]);
+    if (left < 12) left = 12;
+
+    let top = r.bottom + 6;
+    if (top + dropH > window.innerHeight - 12 && r.top - 6 - dropH > 12) {
+      top = r.top - 6 - dropH;
+    }
+
+    setPos({ top, left, width: dropW });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    calcPos();
+    window.addEventListener('scroll', calcPos, true);
+    window.addEventListener('resize', calcPos);
+    return () => {
+      window.removeEventListener('scroll', calcPos, true);
+      window.removeEventListener('resize', calcPos);
+    };
+  }, [open, calcPos]);
+
+  const toggleOpen = () => {
+    if (disabled) return;
+    if (!open) {
+      calcPos();
+    }
+    setOpen(o => !o);
+  };
 
   function pick(date) {
     if (typeof value === 'string') {
@@ -240,7 +264,7 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
   return (
     <div ref={ref} style={{ position: 'relative', display: 'inline-block', ...style }}>
       {/* Trigger */}
-      <button ref={btnRef} type="button" onClick={() => !disabled && setOpen(o => !o)} style={{
+      <button ref={btnRef} type="button" onClick={toggleOpen} style={{
         display: 'flex', alignItems: 'center', gap: 7,
         padding: '5px 10px', borderRadius: 'var(--rads)',
         border: '1px solid var(--border)', background: 'var(--surface)',

package/package.json

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