arengibook 3.1.4-datepicker → 3.1.6-datepicker

package/dist/index.js

@@ -13257,16 +13257,13 @@ var DatePicker = function DatePicker(_ref) {
   var skipYearReposition = useRef(false);
   var inputRef = useRef(null);
   var calendarRef = useRef(null);
-  var _useState13 = useState(null),
+  var _useState13 = useState(false),
     _useState14 = _slicedToArray$9(_useState13, 2);
     _useState14[0];
     _useState14[1];
-  var _useState15 = useState(false),
-    _useState16 = _slicedToArray$9(_useState15, 2),
-    isScrolling = _useState16[0];
-    _useState16[1];
-  var wheelCooldown = false;
+  var wheelCooldown = useRef(false);
   var scrollListenersRef = useRef([]);
+  var panelWheelListenerRef = useRef(null);
   var panelVisibleRef = useRef(false);
   useEffect(function () {
     setStory(datePickerStorie(dateFormat));
@@ -13400,17 +13397,20 @@ var DatePicker = function DatePicker(_ref) {
     }
   }, [valeur]);
   addLocale(localLanguage, LOCALES[localLanguage]);
+  var changeYear = function changeYear(delta) {
+    setViewDate(function (prev) {
+      var base = prev || new Date();
+      var next = new Date(base.getTime());
+      next.setFullYear(next.getFullYear() + delta);
+      return next;
+    });
+  };
   var headerTemplate = function headerTemplate() {
     var current = viewDate || new Date();
     var monthIndex = current.getMonth();
     var year = current.getFullYear();
     var localeConfig = LOCALES[localLanguage] || {};
     var monthNames = localeConfig.monthNames || ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
-    Array.from({
-      length: 21
-    }, function (_, i) {
-      return year - 10 + i;
-    });
     var changeMonth = function changeMonth(delta) {
       setViewDate(function (prev) {
         var base = prev || new Date();
@@ -13419,40 +13419,9 @@ var DatePicker = function DatePicker(_ref) {
         return next;
       });
     };
-    var changeYear = function changeYear(delta) {
-      setViewDate(function (prev) {
-        var base = prev || new Date();
-        var next = new Date(base.getTime());
-        next.setFullYear(next.getFullYear() + delta);
-        return next;
-      });
-    };
     var handleArrowMouseDown = function handleArrowMouseDown(delta) {
-      changeYear(delta); // On change l'année de ±1, pas de ±2
+      changeYear(delta);
     };
-    useEffect(function () {
-      var yearContainerSingle = document.querySelector('.dp-year-container');
-      var handleWheel = function handleWheel(e) {
-        e.preventDefault();
-        if (wheelCooldown) return;
-        var delta = Math.sign(e.deltaY);
-        changeYear(delta);
-        wheelCooldown = true;
-        setTimeout(function () {
-          wheelCooldown = false;
-        }, 120); // durée idéale après tests
-      };
-      if (yearContainerSingle) {
-        yearContainerSingle.addEventListener('wheel', handleWheel, {
-          passive: false
-        });
-      }
-      return function () {
-        if (yearContainerSingle) {
-          yearContainerSingle.removeEventListener('wheel', handleWheel);
-        }
-      };
-    }, [changeYear, isScrolling]);
     var setMonthFromList = function setMonthFromList(index) {
       setViewDate(function (prev) {
         var base = prev || new Date();
@@ -13735,11 +13704,55 @@ var DatePicker = function DatePicker(_ref) {
       var _calendarRef$current2;
       var currentOverlay = (_calendarRef$current2 = calendarRef.current) === null || _calendarRef$current2 === void 0 ? void 0 : _calendarRef$current2.getOverlay();
       if (!currentOverlay) return;
+
+      // Attache un listener wheel sur tout le panel overlay.
+      // En mode mois/année ou année seule (.dp-monthyear-header présent),
+      // bloque toute propagation du wheel vers les conteneurs parents
+      // (popups, pages) et délègue le scroll d'années si la cible est
+      // dans .dp-year-container.
+      var panelWheelHandler = function panelWheelHandler(e) {
+        var isMonthYearMode = currentOverlay.querySelector('.dp-monthyear-header');
+        if (!isMonthYearMode) return;
+        e.preventDefault();
+        e.stopPropagation();
+        var yearContainer = currentOverlay.querySelector('.dp-year-container');
+        if (yearContainer && yearContainer.contains(e.target)) {
+          if (wheelCooldown.current) return;
+          changeYear(Math.sign(e.deltaY));
+          wheelCooldown.current = true;
+          setTimeout(function () {
+            wheelCooldown.current = false;
+          }, 120);
+        }
+      };
+      currentOverlay.addEventListener('wheel', panelWheelHandler, {
+        passive: false
+      });
+      panelWheelListenerRef.current = {
+        overlay: currentOverlay,
+        handler: panelWheelHandler
+      };
       var customContent = currentOverlay.querySelector('.dp-monthyear-header');
       if (customContent) {
-        currentOverlay.style.minHeight = customContent.offsetHeight + 'px';
+        // Ajout de 80px pour simuler une fenêtre plus haute aux yeux de
+        // DomHandler.absolutePosition, ce qui abaisse le seuil de bascule
+        // vers le haut. Cela compense les boutons Annuler/Valider qui sont
+        // masqués en mode month mais occupent de l'espace hors viewport.
+        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);
   };
@@ -13747,6 +13760,13 @@ var DatePicker = function DatePicker(_ref) {
     var _calendarRef$current3;
     panelVisibleRef.current = false;
     cleanupScrollListeners();
+    if (panelWheelListenerRef.current) {
+      var _panelWheelListenerRe = panelWheelListenerRef.current,
+        _overlay = _panelWheelListenerRe.overlay,
+        handler = _panelWheelListenerRe.handler;
+      _overlay.removeEventListener('wheel', handler);
+      panelWheelListenerRef.current = null;
+    }
     var overlay = (_calendarRef$current3 = calendarRef.current) === null || _calendarRef$current3 === void 0 ? void 0 : _calendarRef$current3.getOverlay();
     if (overlay) {
       overlay.style.minHeight = '';
@@ -13758,6 +13778,34 @@ var DatePicker = function DatePicker(_ref) {
       cleanupScrollListeners();
     };
   }, []);
+
+  // Reposition quand on bascule en mode monthYear depuis le mode date (panel déjà ouvert).
+  // Même logique que dans handleShow : gonfle minHeight, repositionne, puis corrige le top.
+  useEffect(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';
+      }
+      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);
+  }, [mode]);
   var panelClassName = "datepickerbook" + (mode === "monthYear" ? " dp-monthyear-mode" : "") + (story === "year" ? " dp-year-only" : "") + (panelReady ? " dp-ready" : "");
   return /*#__PURE__*/React__default.createElement("div", {
     className: fullWidth ? "datepicker-fullwidth flex flex-col gap-1" : "flex flex-col gap-1"

package/package.json

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