npm - @rufous/ui - Versions diffs - 0.2.105 → 0.2.106 - Mend

@rufous/ui 0.2.105 → 0.2.106

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/main.cjs CHANGED Viewed

@@ -3616,15 +3616,27 @@ var DateField = ({
           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;
+          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,
+            top: rect.bottom + GAP2,
             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"
+            animationName: "rf-date-picker-appear",
+            transformOrigin: "top left"
           };
         })(),
         onMouseDown: (e) => e.preventDefault()

package/dist/main.js CHANGED Viewed

@@ -3467,15 +3467,27 @@ var DateField = ({
           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;
+          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,
+            top: rect.bottom + GAP2,
             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"
+            animationName: "rf-date-picker-appear",
+            transformOrigin: "top left"
           };
         })(),
         onMouseDown: (e) => e.preventDefault()

package/package.json CHANGED Viewed

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