arengibook 1.2.2-main → 1.2.3-main

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useContext, useState, useRef, useEffect, isValidElement, cloneElement, Children, forwardRef, Fragment, useMemo, useCallback } from 'react';
+import React__default, { useContext, useState, useRef, useEffect, isValidElement, cloneElement, Children, useLayoutEffect, forwardRef, Fragment, useMemo, useCallback } from 'react';
 import ReactDOM from 'react-dom';
 
 function styleInject(css, ref) {
@@ -13938,6 +13938,7 @@ var DatePicker = function DatePicker(_ref) {
     }
     return scrollables;
   };
+  var BOTTOM_MARGIN = 80;
   var repositionPanel = function repositionPanel() {
     var _calendarRef$current;
     if (!panelVisibleRef.current) return;
@@ -13952,6 +13953,14 @@ var DatePicker = function DatePicker(_ref) {
       if (customContent) {
         overlay.style.minHeight = '';
       }
+      var overlayRect = overlay.getBoundingClientRect();
+      var viewportHeight = window.innerHeight;
+      if (overlayRect.bottom + BOTTOM_MARGIN > viewportHeight) {
+        var inputRect = input.getBoundingClientRect();
+        var scrollY = window.scrollY || window.pageYOffset;
+        var overlayHeight = overlay.offsetHeight;
+        overlay.style.top = inputRect.top + scrollY - overlayHeight - 4 + 'px';
+      }
     }
   };
   var cleanupScrollListeners = function cleanupScrollListeners() {
@@ -14017,19 +14026,7 @@ var DatePicker = function DatePicker(_ref) {
       if (customContent) {
         currentOverlay.style.minHeight = customContent.offsetHeight + 80 + 'px';
       }
-      var extraHeight = 80;
       repositionPanel();
-      if (customContent) {
-        currentOverlay.style.minHeight = '';
-        var input = inputRef.current;
-        if (input) {
-          var overlayTop = parseFloat(currentOverlay.style.top) || 0;
-          var inputTop = input.getBoundingClientRect().top + window.scrollY;
-          if (overlayTop < inputTop) {
-            currentOverlay.style.top = overlayTop + extraHeight + 'px';
-          }
-        }
-      }
       setPanelReady(true);
     }, 0);
   };
@@ -14056,30 +14053,16 @@ var DatePicker = function DatePicker(_ref) {
       cleanupScrollListeners();
     };
   }, []);
-  useEffect(function () {
+  useLayoutEffect(function () {
     if (mode !== 'monthYear' || !panelVisibleRef.current) return;
-    var extraHeight = 80;
-    setTimeout(function () {
-      var _calendarRef$current4;
-      var overlay = (_calendarRef$current4 = calendarRef.current) === null || _calendarRef$current4 === void 0 ? void 0 : _calendarRef$current4.getOverlay();
-      if (!overlay) return;
-      var customContent = overlay.querySelector('.dp-monthyear-header');
-      if (customContent) {
-        overlay.style.minHeight = customContent.offsetHeight + extraHeight + 'px';
-      }
+    setPanelReady(false);
+    var frame = requestAnimationFrame(function () {
       repositionPanel();
-      if (customContent) {
-        overlay.style.minHeight = '';
-        var input = inputRef.current;
-        if (input) {
-          var overlayTop = parseFloat(overlay.style.top) || 0;
-          var inputTop = input.getBoundingClientRect().top + window.scrollY;
-          if (overlayTop < inputTop) {
-            overlay.style.top = overlayTop + extraHeight + 'px';
-          }
-        }
-      }
-    }, 0);
+      setPanelReady(true);
+    });
+    return function () {
+      return cancelAnimationFrame(frame);
+    };
   }, [mode]);
   var panelClassName = "datepickerbook" + (mode === "monthYear" ? " dp-monthyear-mode" : "") + (story === "year" ? " dp-year-only" : "") + (panelReady ? " dp-ready" : "");
   var wrapperStyle = _objectSpread2({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "arengibook",
   "private": false,
-  "version": "1.2.2-main",
+  "version": "1.2.3-main",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {