@elliemae/ds-controlled-form 2.2.0-alpha.3 → 3.0.0-next.0

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/useConfigCalendarCTX.js

@@ -1,21 +1,28 @@
-import * as React from "react";
-import { useState, useMemo, useContext, useCallback } from "react";
-import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
-import { useKeyboardHandlers } from "./useKeyboardHandlers";
-import { useFocusLogic } from "./useFocusLogic";
-import { usePopperTriggerLogic } from "./usePopperTriggerLogic";
-import { useCurrentDisplayedMonthYearLogic } from "./useCurrentDisplayedMonthYearLogic";
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useContext, useState, useMemo, useCallback } from 'react';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
+import { useKeyboardHandlers } from './useKeyboardHandlers.js';
+import { useFocusLogic } from './useFocusLogic.js';
+import { usePopperTriggerLogic } from './usePopperTriggerLogic.js';
+import { useCurrentDisplayedMonthYearLogic } from './useCurrentDisplayedMonthYearLogic.js';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function sliceIntoChunks(arr, chunkSize) {
   const res = [];
+
   for (let i = 0; i < arr.length; i += chunkSize) {
     const chunk = arr.slice(i, i + chunkSize);
     res.push(chunk);
   }
+
   return res;
 }
+
 const useConfigCalendarCTX = () => {
   const {
-    props: { disabled },
+    props: {
+      disabled
+    },
     prevYearBtnRef,
     prevMonthBtnRef,
     nextMonthBtnRef,
@@ -28,8 +35,20 @@ const useConfigCalendarCTX = () => {
     ariaCurrentValueForInputs
   } = useContext(ControlledDateTimePickerContext);
   const [showCalendar, setShowCalendar] = useState(false);
-  const { currentMonth, currentYear, daysArray, handlePrevYear, handlePrevMonth, handleNextMonth, handleNextYear } = useCurrentDisplayedMonthYearLogic();
-  const { invisibleFirstDay, daysMatrixByWeekday, invisibleLastDay } = useMemo(() => {
+  const {
+    currentMonth,
+    currentYear,
+    daysArray,
+    handlePrevYear,
+    handlePrevMonth,
+    handleNextMonth,
+    handleNextYear
+  } = useCurrentDisplayedMonthYearLogic();
+  const {
+    invisibleFirstDay,
+    daysMatrixByWeekday,
+    invisibleLastDay
+  } = useMemo(() => {
     const [invisible1stDay, ...otherDays] = [...daysArray];
     const invisibleDayLast = otherDays.pop();
     return {
@@ -39,7 +58,7 @@ const useConfigCalendarCTX = () => {
     };
   }, [daysArray]);
   const setLatestInteractionRegionCalendarHead = useCallback(() => {
-    setLatestInteractionRegion("calendar-head");
+    setLatestInteractionRegion('calendar-head');
   }, [setLatestInteractionRegion]);
   const onPrevYearFocus = useCallback(() => {
     setLatestInteractionRegionCalendarHead();
@@ -59,7 +78,10 @@ const useConfigCalendarCTX = () => {
     handleFocusMetaDay,
     handleFocusMetaDayByDay,
     resetFocusedDayToStartDate
-  } = useFocusLogic({ daysArray, showCalendar });
+  } = useFocusLogic({
+    daysArray,
+    showCalendar
+  });
   const {
     closeCalendar,
     handleSetTriggerRef,
@@ -136,53 +158,7 @@ const useConfigCalendarCTX = () => {
     autoFocusPrevMonthArrow,
     ariaCurrentValueForInputs,
     disabled
-  }), [
-    showCalendar,
-    closeCalendar,
-    setPopperElement,
-    setArrowElement,
-    usePopperHelpers,
-    handleToggleCalendar,
-    handleSetTriggerRef,
-    handleMenuWrapperKeyDown,
-    isControllerOnly,
-    calendarDaysWrapperRef,
-    prevYearBtnRef,
-    prevMonthBtnRef,
-    nextMonthBtnRef,
-    nextYearBtnRef,
-    currentMonth,
-    currentYear,
-    daysArray,
-    invisibleFirstDay,
-    daysMatrixByWeekday,
-    invisibleLastDay,
-    focusedDay,
-    tryToFocusCurrentlyDataIsFocusedDay,
-    handleFocusMetaDay,
-    handleFocusMetaDayByDay,
-    resetFocusedDayToStartDate,
-    handlePrevMonth,
-    handlePrevYear,
-    handleNextMonth,
-    handleNextYear,
-    handleDayOnKeyDown,
-    handlePrevYearKeyDown,
-    handlePrevMonthKeyDown,
-    handleNextMonthKeyDown,
-    handleNextYearKeyDown,
-    handlePickerIconKeyDown,
-    onPrevYearFocus,
-    onPrevMonthFocus,
-    onNextMonthFocus,
-    onNextYearFocus,
-    isWithTimeWheelToo,
-    autoFocusPrevMonthArrow,
-    ariaCurrentValueForInputs,
-    disabled
-  ]);
-};
-export {
-  useConfigCalendarCTX
+  }), [showCalendar, closeCalendar, setPopperElement, setArrowElement, usePopperHelpers, handleToggleCalendar, handleSetTriggerRef, handleMenuWrapperKeyDown, isControllerOnly, calendarDaysWrapperRef, prevYearBtnRef, prevMonthBtnRef, nextMonthBtnRef, nextYearBtnRef, currentMonth, currentYear, daysArray, invisibleFirstDay, daysMatrixByWeekday, invisibleLastDay, focusedDay, tryToFocusCurrentlyDataIsFocusedDay, handleFocusMetaDay, handleFocusMetaDayByDay, resetFocusedDayToStartDate, handlePrevMonth, handlePrevYear, handleNextMonth, handleNextYear, handleDayOnKeyDown, handlePrevYearKeyDown, handlePrevMonthKeyDown, handleNextMonthKeyDown, handleNextYearKeyDown, handlePickerIconKeyDown, onPrevYearFocus, onPrevMonthFocus, onNextMonthFocus, onNextYearFocus, isWithTimeWheelToo, autoFocusPrevMonthArrow, ariaCurrentValueForInputs, disabled]);
 };
-//# sourceMappingURL=useConfigCalendarCTX.js.map
+
+export { useConfigCalendarCTX };

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.js

@@ -1,14 +1,15 @@
-import * as React from "react";
-import { useMemo, useCallback, useState, useEffect, createRef } from "react";
-import { useGetMonthYearFromDateStringOrEmptyStartingMonth } from "../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth";
-import {
-  getFiveBySevenCurrentMonthDaysMatrix,
-  sumFromDateValues,
-  sumValuesToDate,
-  getDateStringFromDay
-} from "../../../utils/dateHelpers";
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useEffect, useState, useMemo, createRef, useCallback } from 'react';
+import { useGetMonthYearFromDateStringOrEmptyStartingMonth } from '../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js';
+import { getFiveBySevenCurrentMonthDaysMatrix, sumValuesToDate, getDateStringFromDay, sumFromDateValues } from '../../../utils/dateHelpers.js';
+
 const useCurrentDisplayedMonthYearLogic = () => {
-  const { month: monthFromDateString, year: yearFromDateString } = useGetMonthYearFromDateStringOrEmptyStartingMonth();
+  const {
+    month: monthFromDateString,
+    year: yearFromDateString
+  } = useGetMonthYearFromDateStringOrEmptyStartingMonth(); // side-effects are really really controlled in this case so use-effect should be fine
+  // don't add 200 side-effects to those or else Chaos would hunt us for the years to come
+
   useEffect(() => {
     setCurrentMonth(monthFromDateString);
   }, [monthFromDateString]);
@@ -28,7 +29,7 @@ const useCurrentDisplayedMonthYearLogic = () => {
       isPrevMonthDay: true,
       isNextMonthDay: false,
       isCurrMonthDay: false,
-      dayBtnRef: createRef(),
+      dayBtnRef: /*#__PURE__*/createRef(),
       isHidden: true
     };
     const hiddenNextDay = sumValuesToDate(newDaysArray[newDaysArray.length - 1].day, {
@@ -40,27 +41,57 @@ const useCurrentDisplayedMonthYearLogic = () => {
       isPrevMonthDay: false,
       isNextMonthDay: true,
       isCurrMonthDay: false,
-      dayBtnRef: createRef(),
+      dayBtnRef: /*#__PURE__*/createRef(),
       isHidden: true
     };
     return [hiddenPrevMetaday, ...newDaysArray, hiddenNextMetaday];
   }, [currentMonth, currentYear]);
   const handlePrevYear = useCallback(() => {
-    const { year: newYear } = sumFromDateValues({ month: currentMonth, year: currentYear }, { yearsToSum: -1 });
+    const {
+      year: newYear
+    } = sumFromDateValues({
+      month: currentMonth,
+      year: currentYear
+    }, {
+      yearsToSum: -1
+    });
     setCurrentYear(newYear);
   }, [currentMonth, currentYear]);
   const handlePrevMonth = useCallback(() => {
-    const { month: newMonth, year: newYear } = sumFromDateValues({ month: currentMonth, year: currentYear }, { monthsToSum: -1 });
+    const {
+      month: newMonth,
+      year: newYear
+    } = sumFromDateValues({
+      month: currentMonth,
+      year: currentYear
+    }, {
+      monthsToSum: -1
+    });
     setCurrentMonth(newMonth);
     setCurrentYear(newYear);
   }, [currentMonth, currentYear]);
   const handleNextMonth = useCallback(() => {
-    const { month: newMonth, year: newYear } = sumFromDateValues({ month: currentMonth, year: currentYear }, { monthsToSum: 1 });
+    const {
+      month: newMonth,
+      year: newYear
+    } = sumFromDateValues({
+      month: currentMonth,
+      year: currentYear
+    }, {
+      monthsToSum: 1
+    });
     setCurrentMonth(newMonth);
     setCurrentYear(newYear);
   }, [currentMonth, currentYear]);
   const handleNextYear = useCallback(() => {
-    const { year: newYear } = sumFromDateValues({ month: currentMonth, year: currentYear }, { yearsToSum: 1 });
+    const {
+      year: newYear
+    } = sumFromDateValues({
+      month: currentMonth,
+      year: currentYear
+    }, {
+      yearsToSum: 1
+    });
     setCurrentYear(newYear);
   }, [currentMonth, currentYear]);
   return useMemo(() => ({
@@ -73,7 +104,5 @@ const useCurrentDisplayedMonthYearLogic = () => {
     handleNextYear
   }), [currentMonth, currentYear, daysArray, handleNextMonth, handleNextYear, handlePrevMonth, handlePrevYear]);
 };
-export {
-  useCurrentDisplayedMonthYearLogic
-};
-//# sourceMappingURL=useCurrentDisplayedMonthYearLogic.js.map
+
+export { useCurrentDisplayedMonthYearLogic };

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/useFocusLogic.js

@@ -1,48 +1,96 @@
-import * as React from "react";
-import { useMemo, useCallback, useState, useLayoutEffect, useContext } from "react";
-import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
-import { compareTwoDatesDayEquality } from "../../../utils/dateHelpers";
-import { useGetStartingFocusedDay } from "../../../utils/hooks/useGetStartingFocusedDay";
-const loopWhileWaiting = (cb, shortcircuit = () => false, timePerTry = 100, maxTries = 5) => {
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import { useContext, useState, useMemo, useCallback, useLayoutEffect } from 'react';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
+import { compareTwoDatesDayEquality } from '../../../utils/dateHelpers.js';
+import { useGetStartingFocusedDay } from '../../../utils/hooks/useGetStartingFocusedDay.js';
+
+// eslint-disable-next-line max-params
+const loopWhileWaiting = function (cb) {
+  let shortcircuit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => false;
+  let timePerTry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
+  let maxTries = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 5;
   let ab = maxTries;
   const inter = setInterval(() => {
     cb();
-    if (shortcircuit() || ab === 0)
-      clearInterval(inter);
+    if (shortcircuit() || ab === 0) clearInterval(inter);
     ab -= 1;
   }, timePerTry);
 };
-const useFocusLogic = ({ daysArray, showCalendar }) => {
-  const { calendarDaysWrapperRef } = useContext(ControlledDateTimePickerContext);
-  const { startFocusedDate } = useGetStartingFocusedDay();
-  const [metadayToFocus, setMetadayToFocus] = useState(daysArray.find(({ day: currDay }) => compareTwoDatesDayEquality(currDay, startFocusedDate)));
+
+const useFocusLogic = _ref => {
+  let {
+    daysArray,
+    showCalendar
+  } = _ref;
+  const {
+    calendarDaysWrapperRef
+  } = useContext(ControlledDateTimePickerContext);
+  const {
+    startFocusedDate
+  } = useGetStartingFocusedDay();
+  const [metadayToFocus, setMetadayToFocus] = useState(daysArray.find(_ref2 => {
+    let {
+      day: currDay
+    } = _ref2;
+    return compareTwoDatesDayEquality(currDay, startFocusedDate);
+  })); // this is required because we have to focus based on the inputs values too,
+  // useGetStartingFocusedDay does this already,
+  // this "useMemo" is here just to trigger it functionally by changing the metadayToFocus state
+  // which is required for arrow key navigation in the calendar
+
   const focusedDay = useMemo(() => {
-    const newFocusedDay = metadayToFocus ? daysArray.find(({ day: currDay }) => compareTwoDatesDayEquality(currDay, metadayToFocus.day)) : daysArray.find(({ day: currDay }) => compareTwoDatesDayEquality(currDay, startFocusedDate));
+    const newFocusedDay = metadayToFocus ? daysArray.find(_ref3 => {
+      let {
+        day: currDay
+      } = _ref3;
+      return compareTwoDatesDayEquality(currDay, metadayToFocus.day);
+    }) : daysArray.find(_ref4 => {
+      let {
+        day: currDay
+      } = _ref4;
+      return compareTwoDatesDayEquality(currDay, startFocusedDate);
+    });
     return newFocusedDay;
   }, [daysArray, startFocusedDate, metadayToFocus]);
-  const tryToFocusCurrentlyDataIsFocusedDay = useCallback((wrapperDOM = calendarDaysWrapperRef?.current || document) => {
+  const tryToFocusCurrentlyDataIsFocusedDay = useCallback(function () {
+    let wrapperDOM = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (calendarDaysWrapperRef === null || calendarDaysWrapperRef === void 0 ? void 0 : calendarDaysWrapperRef.current) || document;
     let shortcircuit = false;
     loopWhileWaiting(() => {
-      const domElem = wrapperDOM?.querySelector('[data-isfocused="true"]');
+      const domElem = wrapperDOM === null || wrapperDOM === void 0 ? void 0 : wrapperDOM.querySelector('[data-isfocused="true"]');
+
       if (domElem) {
-        domElem?.focus?.();
+        var _domElem$focus;
+
+        domElem === null || domElem === void 0 ? void 0 : (_domElem$focus = domElem.focus) === null || _domElem$focus === void 0 ? void 0 : _domElem$focus.call(domElem);
         shortcircuit = true;
       }
     }, () => shortcircuit);
   }, [calendarDaysWrapperRef]);
   useLayoutEffect(() => {
-    if (showCalendar)
-      tryToFocusCurrentlyDataIsFocusedDay(calendarDaysWrapperRef?.current);
+    if (showCalendar) tryToFocusCurrentlyDataIsFocusedDay(calendarDaysWrapperRef === null || calendarDaysWrapperRef === void 0 ? void 0 : calendarDaysWrapperRef.current);
   }, [calendarDaysWrapperRef, focusedDay, showCalendar, tryToFocusCurrentlyDataIsFocusedDay]);
-  const handleFocusMetaDay = useCallback((metaDayToFocus) => {
-    const newFocusedMetaDay = daysArray.find(({ day: currDay }) => compareTwoDatesDayEquality(currDay, metaDayToFocus.day));
-    if (focusedDay !== newFocusedMetaDay)
-      setMetadayToFocus(newFocusedMetaDay);
+  const handleFocusMetaDay = useCallback(metaDayToFocus => {
+    // if focusedDay is inside current daysArray we set Focused day
+    const newFocusedMetaDay = daysArray.find(_ref5 => {
+      let {
+        day: currDay
+      } = _ref5;
+      return compareTwoDatesDayEquality(currDay, metaDayToFocus.day);
+    });
+    if (focusedDay !== newFocusedMetaDay) setMetadayToFocus(newFocusedMetaDay);
   }, [daysArray, focusedDay]);
-  const handleFocusMetaDayByDay = useCallback((dayDate) => {
-    const newFocusedMetaDay = daysArray.find(({ day: currDay }) => compareTwoDatesDayEquality(currDay, dayDate));
-    if (focusedDay !== newFocusedMetaDay)
-      setMetadayToFocus(newFocusedMetaDay);
+  const handleFocusMetaDayByDay = useCallback(dayDate => {
+    // if focusedDay is inside current daysArray we set Focused day
+    const newFocusedMetaDay = daysArray.find(_ref6 => {
+      let {
+        day: currDay
+      } = _ref6;
+      return compareTwoDatesDayEquality(currDay, dayDate);
+    });
+    if (focusedDay !== newFocusedMetaDay) setMetadayToFocus(newFocusedMetaDay);
   }, [daysArray, focusedDay]);
   const resetFocusedDayToStartDate = useCallback(() => {
     setMetadayToFocus(null);
@@ -53,15 +101,7 @@ const useFocusLogic = ({ daysArray, showCalendar }) => {
     resetFocusedDayToStartDate,
     handleFocusMetaDay,
     handleFocusMetaDayByDay
-  }), [
-    focusedDay,
-    tryToFocusCurrentlyDataIsFocusedDay,
-    resetFocusedDayToStartDate,
-    handleFocusMetaDay,
-    handleFocusMetaDayByDay
-  ]);
-};
-export {
-  useFocusLogic
+  }), [focusedDay, tryToFocusCurrentlyDataIsFocusedDay, resetFocusedDayToStartDate, handleFocusMetaDay, handleFocusMetaDayByDay]);
 };
-//# sourceMappingURL=useFocusLogic.js.map
+
+export { useFocusLogic };