@rufous/ui 0.2.103 → 0.2.105

package/dist/main.cjs

@@ -3362,7 +3362,6 @@ var DateField = ({
   const AMPMS = ["AM", "PM"];
   const containerRef = (0, import_react21.useRef)(null);
   const pickerRef = (0, import_react21.useRef)(null);
-  const [dropUp, setDropUp] = (0, import_react21.useState)(false);
   const inputId = (0, import_react21.useRef)(`rf-df-${Math.random().toString(36).substring(2, 11)}`).current;
   const isInternalChange = (0, import_react21.useRef)(false);
   (0, import_react21.useEffect)(() => {
@@ -3403,13 +3402,6 @@ var DateField = ({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
-  (0, import_react21.useEffect)(() => {
-    if (!open || !containerRef.current) return;
-    const rect = containerRef.current.getBoundingClientRect();
-    const spaceBelow = window.innerHeight - rect.bottom;
-    const pickerHeight = 400;
-    setDropUp(spaceBelow < pickerHeight && rect.top > pickerHeight);
-  }, [open]);
   const commitDate = (0, import_react21.useCallback)((d, h, m, ap) => {
     setSelectedDate(d);
     if (!d) {
@@ -3614,20 +3606,25 @@ var DateField = ({
         className: [
           "rf-date-picker",
           "rf-date-picker--portaled",
-          isSideVariant ? "rf-date-picker--side" : "",
-          dropUp ? "rf-date-picker--drop-up" : ""
+          isSideVariant ? "rf-date-picker--side" : ""
         ].filter(Boolean).join(" "),
         style: (() => {
           const rect = containerRef.current?.getBoundingClientRect();
           if (!rect) return {};
-          const top = rect.bottom + 6;
-          const spaceBelow = window.innerHeight - rect.bottom - 6;
-          const useDropUp = spaceBelow < 350 && rect.top > spaceBelow;
+          const PICKER_H = 420;
+          const GAP2 = 6;
+          const spaceBelow = window.innerHeight - rect.bottom - GAP2;
+          const spaceAbove = rect.top - GAP2;
+          const useDropUp = spaceBelow < PICKER_H && spaceAbove > spaceBelow;
+          const top = useDropUp ? Math.max(4, rect.top - PICKER_H - GAP2) : rect.bottom + GAP2;
           return {
             position: "fixed",
             left: rect.left,
-            ...useDropUp ? { bottom: window.innerHeight - rect.top + 6 } : { top },
-            zIndex: 99999
+            top,
+            zIndex: 99999,
+            // Drive animation from same decision — no separate state/re-render needed
+            animationName: useDropUp ? "rf-date-picker-appear-up" : "rf-date-picker-appear",
+            transformOrigin: useDropUp ? "bottom left" : "top left"
           };
         })(),
         onMouseDown: (e) => e.preventDefault()

package/dist/main.css

@@ -1259,6 +1259,20 @@ pre {
     transform: scale(1) translateY(0);
   }
 }
+@keyframes rf-date-picker-appear-up {
+  from {
+    opacity: 0;
+    transform: scale(0.94) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+.rf-date-picker--drop-up {
+  animation-name: rf-date-picker-appear-up;
+  transform-origin: bottom left;
+}
 .rf-date-picker__header {
   display: flex;
   align-items: center;

package/dist/main.js

@@ -3213,7 +3213,6 @@ var DateField = ({
   const AMPMS = ["AM", "PM"];
   const containerRef = useRef6(null);
   const pickerRef = useRef6(null);
-  const [dropUp, setDropUp] = useState7(false);
   const inputId = useRef6(`rf-df-${Math.random().toString(36).substring(2, 11)}`).current;
   const isInternalChange = useRef6(false);
   useEffect7(() => {
@@ -3254,13 +3253,6 @@ var DateField = ({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
-  useEffect7(() => {
-    if (!open || !containerRef.current) return;
-    const rect = containerRef.current.getBoundingClientRect();
-    const spaceBelow = window.innerHeight - rect.bottom;
-    const pickerHeight = 400;
-    setDropUp(spaceBelow < pickerHeight && rect.top > pickerHeight);
-  }, [open]);
   const commitDate = useCallback3((d, h, m, ap) => {
     setSelectedDate(d);
     if (!d) {
@@ -3465,20 +3457,25 @@ var DateField = ({
         className: [
           "rf-date-picker",
           "rf-date-picker--portaled",
-          isSideVariant ? "rf-date-picker--side" : "",
-          dropUp ? "rf-date-picker--drop-up" : ""
+          isSideVariant ? "rf-date-picker--side" : ""
         ].filter(Boolean).join(" "),
         style: (() => {
           const rect = containerRef.current?.getBoundingClientRect();
           if (!rect) return {};
-          const top = rect.bottom + 6;
-          const spaceBelow = window.innerHeight - rect.bottom - 6;
-          const useDropUp = spaceBelow < 350 && rect.top > spaceBelow;
+          const PICKER_H = 420;
+          const GAP2 = 6;
+          const spaceBelow = window.innerHeight - rect.bottom - GAP2;
+          const spaceAbove = rect.top - GAP2;
+          const useDropUp = spaceBelow < PICKER_H && spaceAbove > spaceBelow;
+          const top = useDropUp ? Math.max(4, rect.top - PICKER_H - GAP2) : rect.bottom + GAP2;
           return {
             position: "fixed",
             left: rect.left,
-            ...useDropUp ? { bottom: window.innerHeight - rect.top + 6 } : { top },
-            zIndex: 99999
+            top,
+            zIndex: 99999,
+            // Drive animation from same decision — no separate state/re-render needed
+            animationName: useDropUp ? "rf-date-picker-appear-up" : "rf-date-picker-appear",
+            transformOrigin: useDropUp ? "bottom left" : "top left"
           };
         })(),
         onMouseDown: (e) => e.preventDefault()

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.2.103",
+  "version": "0.2.105",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",