@rufous/ui 0.2.104 → 0.2.106

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,14 +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 PICKER_H = 420;
-    const spaceBelow = window.innerHeight - rect.bottom;
-    const spaceAbove = rect.top;
-    setDropUp(spaceBelow < PICKER_H && spaceAbove > spaceBelow);
-  }, [open]);
   const commitDate = (0, import_react21.useCallback)((d, h, m, ap) => {
     setSelectedDate(d);
     if (!d) {
@@ -3615,28 +3606,37 @@ 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 PICKER_H = 420;
           const GAP2 = 6;
-          const EDGE = 4;
           const spaceBelow = window.innerHeight - rect.bottom - GAP2;
           const spaceAbove = rect.top - GAP2;
           const useDropUp = spaceBelow < PICKER_H && spaceAbove > spaceBelow;
-          const rawTop = useDropUp ? rect.top - PICKER_H - GAP2 : rect.bottom + GAP2;
-          const top = Math.min(
-            Math.max(rawTop, EDGE),
-            window.innerHeight - PICKER_H - EDGE
-          );
+          if (useDropUp) {
+            return {
+              position: "fixed",
+              left: rect.left,
+              // bottom anchors picker's bottom edge exactly to field top — no gap regardless of actual height
+              bottom: window.innerHeight - rect.top + GAP2,
+              // prevent going above viewport
+              maxHeight: rect.top - GAP2 - 4,
+              overflowY: "auto",
+              zIndex: 99999,
+              animationName: "rf-date-picker-appear-up",
+              transformOrigin: "bottom left"
+            };
+          }
           return {
             position: "fixed",
             left: rect.left,
-            top,
-            zIndex: 99999
+            top: rect.bottom + GAP2,
+            zIndex: 99999,
+            animationName: "rf-date-picker-appear",
+            transformOrigin: "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,14 +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 PICKER_H = 420;
-    const spaceBelow = window.innerHeight - rect.bottom;
-    const spaceAbove = rect.top;
-    setDropUp(spaceBelow < PICKER_H && spaceAbove > spaceBelow);
-  }, [open]);
   const commitDate = useCallback3((d, h, m, ap) => {
     setSelectedDate(d);
     if (!d) {
@@ -3466,28 +3457,37 @@ 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 PICKER_H = 420;
           const GAP2 = 6;
-          const EDGE = 4;
           const spaceBelow = window.innerHeight - rect.bottom - GAP2;
           const spaceAbove = rect.top - GAP2;
           const useDropUp = spaceBelow < PICKER_H && spaceAbove > spaceBelow;
-          const rawTop = useDropUp ? rect.top - PICKER_H - GAP2 : rect.bottom + GAP2;
-          const top = Math.min(
-            Math.max(rawTop, EDGE),
-            window.innerHeight - PICKER_H - EDGE
-          );
+          if (useDropUp) {
+            return {
+              position: "fixed",
+              left: rect.left,
+              // bottom anchors picker's bottom edge exactly to field top — no gap regardless of actual height
+              bottom: window.innerHeight - rect.top + GAP2,
+              // prevent going above viewport
+              maxHeight: rect.top - GAP2 - 4,
+              overflowY: "auto",
+              zIndex: 99999,
+              animationName: "rf-date-picker-appear-up",
+              transformOrigin: "bottom left"
+            };
+          }
           return {
             position: "fixed",
             left: rect.left,
-            top,
-            zIndex: 99999
+            top: rect.bottom + GAP2,
+            zIndex: 99999,
+            animationName: "rf-date-picker-appear",
+            transformOrigin: "top left"
           };
         })(),
         onMouseDown: (e) => e.preventDefault()

package/package.json

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