@elliemae/ds-controlled-form 2.3.0-alpha.6 → 2.3.0-next.0

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

@@ -0,0 +1,164 @@
+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
+    },
+    prevYearBtnRef,
+    prevMonthBtnRef,
+    nextMonthBtnRef,
+    nextYearBtnRef,
+    calendarDaysWrapperRef,
+    isControllerOnly,
+    isWithTimeWheelToo,
+    setLatestInteractionRegion,
+    autoFocusPrevMonthArrow,
+    ariaCurrentValueForInputs
+  } = useContext(ControlledDateTimePickerContext);
+  const [showCalendar, setShowCalendar] = useState(false);
+  const {
+    currentMonth,
+    currentYear,
+    daysArray,
+    handlePrevYear,
+    handlePrevMonth,
+    handleNextMonth,
+    handleNextYear
+  } = useCurrentDisplayedMonthYearLogic();
+  const {
+    invisibleFirstDay,
+    daysMatrixByWeekday,
+    invisibleLastDay
+  } = useMemo(() => {
+    const [invisible1stDay, ...otherDays] = [...daysArray];
+    const invisibleDayLast = otherDays.pop();
+    return {
+      invisibleFirstDay: invisible1stDay,
+      daysMatrixByWeekday: sliceIntoChunks(otherDays, 7),
+      invisibleLastDay: invisibleDayLast
+    };
+  }, [daysArray]);
+  const setLatestInteractionRegionCalendarHead = useCallback(() => {
+    setLatestInteractionRegion('calendar-head');
+  }, [setLatestInteractionRegion]);
+  const onPrevYearFocus = useCallback(() => {
+    setLatestInteractionRegionCalendarHead();
+  }, [setLatestInteractionRegionCalendarHead]);
+  const onPrevMonthFocus = useCallback(() => {
+    setLatestInteractionRegionCalendarHead();
+  }, [setLatestInteractionRegionCalendarHead]);
+  const onNextMonthFocus = useCallback(() => {
+    setLatestInteractionRegionCalendarHead();
+  }, [setLatestInteractionRegionCalendarHead]);
+  const onNextYearFocus = useCallback(() => {
+    setLatestInteractionRegionCalendarHead();
+  }, [setLatestInteractionRegionCalendarHead]);
+  const {
+    focusedDay,
+    tryToFocusCurrentlyDataIsFocusedDay,
+    handleFocusMetaDay,
+    handleFocusMetaDayByDay,
+    resetFocusedDayToStartDate
+  } = useFocusLogic({
+    daysArray,
+    showCalendar
+  });
+  const {
+    closeCalendar,
+    handleSetTriggerRef,
+    setPopperElement,
+    setArrowElement,
+    usePopperHelpers,
+    handleToggleCalendar,
+    handleMenuWrapperKeyDown
+  } = usePopperTriggerLogic({
+    tryToFocusCurrentlyDataIsFocusedDay,
+    resetFocusedDayToStartDate,
+    focusedDay,
+    showCalendar,
+    setShowCalendar
+  });
+  const {
+    handleDayOnKeyDown,
+    handlePrevYearKeyDown,
+    handlePrevMonthKeyDown,
+    handleNextMonthKeyDown,
+    handleNextYearKeyDown,
+    handlePickerIconKeyDown
+  } = useKeyboardHandlers({
+    focusedDay,
+    daysArray,
+    handlePrevMonth,
+    handleNextMonth,
+    handleFocusMetaDay,
+    handleFocusMetaDayByDay,
+    tryToFocusCurrentlyDataIsFocusedDay
+  });
+  return useMemo(() => ({
+    showCalendar,
+    setShowCalendar,
+    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
+  }), [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 };

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

@@ -0,0 +1,108 @@
+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(); // 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]);
+  useEffect(() => {
+    setCurrentYear(yearFromDateString);
+  }, [yearFromDateString]);
+  const [currentMonth, setCurrentMonth] = useState(monthFromDateString);
+  const [currentYear, setCurrentYear] = useState(yearFromDateString);
+  const daysArray = useMemo(() => {
+    const newDaysArray = getFiveBySevenCurrentMonthDaysMatrix(currentMonth, currentYear);
+    const hiddenPrevDay = sumValuesToDate(newDaysArray[0].day, {
+      daysToSum: -1
+    });
+    const hiddenPrevMetaday = {
+      day: hiddenPrevDay,
+      dayAsString: getDateStringFromDay(hiddenPrevDay),
+      isPrevMonthDay: true,
+      isNextMonthDay: false,
+      isCurrMonthDay: false,
+      dayBtnRef: /*#__PURE__*/createRef(),
+      isHidden: true
+    };
+    const hiddenNextDay = sumValuesToDate(newDaysArray[newDaysArray.length - 1].day, {
+      daysToSum: 1
+    });
+    const hiddenNextMetaday = {
+      day: hiddenNextDay,
+      dayAsString: getDateStringFromDay(hiddenNextDay),
+      isPrevMonthDay: false,
+      isNextMonthDay: true,
+      isCurrMonthDay: false,
+      dayBtnRef: /*#__PURE__*/createRef(),
+      isHidden: true
+    };
+    return [hiddenPrevMetaday, ...newDaysArray, hiddenNextMetaday];
+  }, [currentMonth, currentYear]);
+  const handlePrevYear = useCallback(() => {
+    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
+    });
+    setCurrentMonth(newMonth);
+    setCurrentYear(newYear);
+  }, [currentMonth, currentYear]);
+  const handleNextMonth = useCallback(() => {
+    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
+    });
+    setCurrentYear(newYear);
+  }, [currentMonth, currentYear]);
+  return useMemo(() => ({
+    currentMonth,
+    currentYear,
+    daysArray,
+    handlePrevYear,
+    handlePrevMonth,
+    handleNextMonth,
+    handleNextYear
+  }), [currentMonth, currentYear, daysArray, handleNextMonth, handleNextYear, handlePrevMonth, handlePrevYear]);
+};
+
+export { useCurrentDisplayedMonthYearLogic };

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

@@ -0,0 +1,107 @@
+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);
+    ab -= 1;
+  }, timePerTry);
+};
+
+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(_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(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 === null || wrapperDOM === void 0 ? void 0 : wrapperDOM.querySelector('[data-isfocused="true"]');
+
+      if (domElem) {
+        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 === null || calendarDaysWrapperRef === void 0 ? void 0 : calendarDaysWrapperRef.current);
+  }, [calendarDaysWrapperRef, focusedDay, showCalendar, tryToFocusCurrentlyDataIsFocusedDay]);
+  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 => {
+    // 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);
+  }, []);
+  return useMemo(() => ({
+    focusedDay,
+    tryToFocusCurrentlyDataIsFocusedDay,
+    resetFocusedDayToStartDate,
+    handleFocusMetaDay,
+    handleFocusMetaDayByDay
+  }), [focusedDay, tryToFocusCurrentlyDataIsFocusedDay, resetFocusedDayToStartDate, handleFocusMetaDay, handleFocusMetaDayByDay]);
+};
+
+export { useFocusLogic };

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

@@ -0,0 +1,260 @@
+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, useCallback, useMemo } from 'react';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
+import { sumValuesToDate } from '../../../utils/dateHelpers.js';
+import { homeEndKeys, homeEndAllArrowKeys } from '../../../utils/constants.js';
+
+const useKeyboardHandlers = _ref => {
+  let {
+    focusedDay,
+    daysArray,
+    handlePrevMonth,
+    handleNextMonth,
+    handleFocusMetaDay,
+    handleFocusMetaDayByDay,
+    tryToFocusCurrentlyDataIsFocusedDay
+  } = _ref;
+  const {
+    hideDate,
+    hideTime,
+    monthInputRef,
+    hourInputRef,
+    prevYearBtnRef,
+    prevMonthBtnRef,
+    nextMonthBtnRef,
+    nextYearBtnRef,
+    currMeridiemBtnRef,
+    isControllerOnly,
+    isWithTimeWheelToo,
+    setLatestInteractionRegion,
+    withAnyInputs,
+    isWithTimeInputs,
+    meridiemInputRef,
+    isWithDateInputs,
+    yearInputRef
+  } = useContext(ControlledDateTimePickerContext);
+  const tryToFocusDayRegion = useCallback(() => {
+    setLatestInteractionRegion('calendar-days');
+
+    if (!focusedDay) {
+      const newFocusDay = daysArray.find(_ref2 => {
+        let {
+          isCurrMonthDay
+        } = _ref2;
+        return isCurrMonthDay;
+      });
+      if (newFocusDay) setTimeout(() => {
+        handleFocusMetaDay(newFocusDay);
+      });
+    } else {
+      tryToFocusCurrentlyDataIsFocusedDay();
+    }
+  }, [daysArray, focusedDay, handleFocusMetaDay, setLatestInteractionRegion, tryToFocusCurrentlyDataIsFocusedDay]);
+  const onHomeKeyDownInsideCalendar = useCallback(() => {
+    var _prevMonthBtnRef$curr, _prevMonthBtnRef$curr2;
+
+    prevMonthBtnRef === null || prevMonthBtnRef === void 0 ? void 0 : (_prevMonthBtnRef$curr = prevMonthBtnRef.current) === null || _prevMonthBtnRef$curr === void 0 ? void 0 : (_prevMonthBtnRef$curr2 = _prevMonthBtnRef$curr.focus) === null || _prevMonthBtnRef$curr2 === void 0 ? void 0 : _prevMonthBtnRef$curr2.call(_prevMonthBtnRef$curr);
+  }, [prevMonthBtnRef]);
+  const onEndKeyDownInsideCalendar = useCallback(() => {
+    var _currMeridiemBtnRef$c, _currMeridiemBtnRef$c2;
+
+    if (isWithTimeWheelToo) currMeridiemBtnRef === null || currMeridiemBtnRef === void 0 ? void 0 : (_currMeridiemBtnRef$c = currMeridiemBtnRef.current) === null || _currMeridiemBtnRef$c === void 0 ? void 0 : (_currMeridiemBtnRef$c2 = _currMeridiemBtnRef$c.focus) === null || _currMeridiemBtnRef$c2 === void 0 ? void 0 : _currMeridiemBtnRef$c2.call(_currMeridiemBtnRef$c);else tryToFocusDayRegion();
+  }, [currMeridiemBtnRef, isWithTimeWheelToo, tryToFocusDayRegion]);
+  const onHomeKeyDownTriggerIcon = useCallback(() => {
+    var _monthInputRef$curren, _monthInputRef$curren2, _hourInputRef$current, _hourInputRef$current2;
+
+    if (!hideDate) monthInputRef === null || monthInputRef === void 0 ? void 0 : (_monthInputRef$curren = monthInputRef.current) === null || _monthInputRef$curren === void 0 ? void 0 : (_monthInputRef$curren2 = _monthInputRef$curren.focus) === null || _monthInputRef$curren2 === void 0 ? void 0 : _monthInputRef$curren2.call(_monthInputRef$curren);else if (!hideTime) hourInputRef === null || hourInputRef === void 0 ? void 0 : (_hourInputRef$current = hourInputRef.current) === null || _hourInputRef$current === void 0 ? void 0 : (_hourInputRef$current2 = _hourInputRef$current.focus) === null || _hourInputRef$current2 === void 0 ? void 0 : _hourInputRef$current2.call(_hourInputRef$current);
+  }, [hideDate, hideTime, monthInputRef, hourInputRef]);
+  const handlePickerIconKeyDown = useCallback(e => {
+    const {
+      key
+    } = e;
+    if (homeEndKeys.includes(key)) e.preventDefault();
+    if (homeEndKeys.includes(key)) e.stopPropagation();
+    if (key === 'Home') onHomeKeyDownTriggerIcon();
+
+    if (key === 'Backspace' && withAnyInputs) {
+      var _meridiemInputRef$cur, _meridiemInputRef$cur2, _yearInputRef$current, _yearInputRef$current2;
+
+      if (isWithTimeInputs) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur = meridiemInputRef.current) === null || _meridiemInputRef$cur === void 0 ? void 0 : (_meridiemInputRef$cur2 = _meridiemInputRef$cur.focus) === null || _meridiemInputRef$cur2 === void 0 ? void 0 : _meridiemInputRef$cur2.call(_meridiemInputRef$cur);else if (isWithDateInputs) yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current = yearInputRef.current) === null || _yearInputRef$current === void 0 ? void 0 : (_yearInputRef$current2 = _yearInputRef$current.focus) === null || _yearInputRef$current2 === void 0 ? void 0 : _yearInputRef$current2.call(_yearInputRef$current);
+    }
+  }, [isWithDateInputs, isWithTimeInputs, meridiemInputRef, onHomeKeyDownTriggerIcon, withAnyInputs, yearInputRef]);
+  const handleDayOnKeyDown = useCallback((e, metaDay) => {
+    let newFocusedDayDate;
+    const {
+      day
+    } = metaDay;
+    const {
+      key,
+      shiftKey
+    } = e;
+    if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
+    if (key === 'ArrowUp') newFocusedDayDate = sumValuesToDate(day, {
+      daysToSum: -7
+    });
+    if (key === 'ArrowDown') newFocusedDayDate = sumValuesToDate(day, {
+      daysToSum: 7
+    });
+
+    if (key === 'ArrowLeft') {
+      newFocusedDayDate = sumValuesToDate(day, {
+        daysToSum: -1
+      });
+
+      if (metaDay === daysArray[1]) {
+        handlePrevMonth();
+      }
+    }
+
+    if (key === 'ArrowRight') {
+      newFocusedDayDate = sumValuesToDate(day, {
+        daysToSum: 1
+      });
+
+      if (metaDay === daysArray[daysArray.length - 2]) {
+        handleNextMonth();
+      }
+    }
+
+    if (newFocusedDayDate) {
+      handleFocusMetaDayByDay(newFocusedDayDate);
+      setTimeout(tryToFocusCurrentlyDataIsFocusedDay);
+    }
+
+    if (key === 'Home') onHomeKeyDownInsideCalendar();
+    if (key === 'End') onEndKeyDownInsideCalendar(); // TAB CYCLE IMPLEMENTATION
+
+    if (key === 'Tab' && !shiftKey && isControllerOnly === false && !isWithTimeWheelToo) {
+      var _prevMonthBtnRef$curr3, _prevMonthBtnRef$curr4;
+
+      // MUST prevent default since this is a custom focus switch
+      // NOT preventing the default event will cause unexpected result
+      e.preventDefault();
+      prevMonthBtnRef === null || prevMonthBtnRef === void 0 ? void 0 : (_prevMonthBtnRef$curr3 = prevMonthBtnRef.current) === null || _prevMonthBtnRef$curr3 === void 0 ? void 0 : (_prevMonthBtnRef$curr4 = _prevMonthBtnRef$curr3.focus) === null || _prevMonthBtnRef$curr4 === void 0 ? void 0 : _prevMonthBtnRef$curr4.call(_prevMonthBtnRef$curr3);
+    }
+  }, [daysArray, handleFocusMetaDayByDay, handleNextMonth, handlePrevMonth, isControllerOnly, isWithTimeWheelToo, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, prevMonthBtnRef, tryToFocusCurrentlyDataIsFocusedDay]);
+  const handlePrevYearKeyDown = useCallback(e => {
+    const {
+      key,
+      shiftKey
+    } = e;
+
+    if (key === 'Tab') {
+      e.preventDefault();
+
+      if (shiftKey) {
+        nextMonthBtnRef.current.focus();
+      } else {
+        nextYearBtnRef.current.focus();
+      }
+    }
+
+    if (key === 'Home') {
+      onHomeKeyDownInsideCalendar();
+      e.preventDefault();
+    }
+
+    if (key === 'End') {
+      onEndKeyDownInsideCalendar();
+      e.preventDefault();
+    }
+  }, [nextMonthBtnRef, nextYearBtnRef, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar]);
+  const handlePrevMonthKeyDown = useCallback(e => {
+    const {
+      key,
+      shiftKey
+    } = e;
+
+    if (key === 'Tab') {
+      if (shiftKey) {
+        // TAB CYCLE IMPLEMENTATION
+        if (!isControllerOnly) {
+          var _currMeridiemBtnRef$c3, _currMeridiemBtnRef$c4;
+
+          e.preventDefault();
+          if (isWithTimeWheelToo) currMeridiemBtnRef === null || currMeridiemBtnRef === void 0 ? void 0 : (_currMeridiemBtnRef$c3 = currMeridiemBtnRef.current) === null || _currMeridiemBtnRef$c3 === void 0 ? void 0 : (_currMeridiemBtnRef$c4 = _currMeridiemBtnRef$c3.focus) === null || _currMeridiemBtnRef$c4 === void 0 ? void 0 : _currMeridiemBtnRef$c4.call(_currMeridiemBtnRef$c3);else tryToFocusDayRegion();
+        }
+      } else {
+        e.preventDefault();
+        nextMonthBtnRef.current.focus();
+      }
+    }
+
+    if (key === 'Home') {
+      onHomeKeyDownInsideCalendar();
+      e.preventDefault();
+    }
+
+    if (key === 'End') {
+      onEndKeyDownInsideCalendar();
+      e.preventDefault();
+    }
+  }, [currMeridiemBtnRef, isControllerOnly, isWithTimeWheelToo, nextMonthBtnRef, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, tryToFocusDayRegion]);
+  const handleNextMonthKeyDown = useCallback(e => {
+    const {
+      key,
+      shiftKey
+    } = e;
+
+    if (key === 'Tab') {
+      e.preventDefault();
+
+      if (shiftKey) {
+        prevMonthBtnRef.current.focus();
+      } else {
+        prevYearBtnRef.current.focus();
+      }
+    }
+
+    if (key === 'Home') {
+      onHomeKeyDownInsideCalendar();
+      e.preventDefault();
+    }
+
+    if (key === 'End') {
+      onEndKeyDownInsideCalendar();
+      e.preventDefault();
+    }
+  }, [onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, prevMonthBtnRef, prevYearBtnRef]);
+  const handleNextYearKeyDown = useCallback(e => {
+    const {
+      key,
+      shiftKey
+    } = e;
+
+    if (key === 'Tab') {
+      e.preventDefault();
+
+      if (shiftKey) {
+        var _prevYearBtnRef$curre, _prevYearBtnRef$curre2;
+
+        prevYearBtnRef === null || prevYearBtnRef === void 0 ? void 0 : (_prevYearBtnRef$curre = prevYearBtnRef.current) === null || _prevYearBtnRef$curre === void 0 ? void 0 : (_prevYearBtnRef$curre2 = _prevYearBtnRef$curre.focus) === null || _prevYearBtnRef$curre2 === void 0 ? void 0 : _prevYearBtnRef$curre2.call(_prevYearBtnRef$curre);
+      }
+
+      if (!shiftKey) tryToFocusDayRegion();
+    }
+
+    if (key === 'Home') {
+      onHomeKeyDownInsideCalendar();
+      e.preventDefault();
+    }
+
+    if (key === 'End') {
+      onEndKeyDownInsideCalendar();
+      e.preventDefault();
+    }
+  }, [tryToFocusDayRegion, prevYearBtnRef, onHomeKeyDownInsideCalendar, onEndKeyDownInsideCalendar]);
+  return useMemo(() => ({
+    handleDayOnKeyDown,
+    handlePrevYearKeyDown,
+    handlePrevMonthKeyDown,
+    handleNextMonthKeyDown,
+    handleNextYearKeyDown,
+    handlePickerIconKeyDown
+  }), [handleDayOnKeyDown, handlePrevYearKeyDown, handlePrevMonthKeyDown, handleNextMonthKeyDown, handleNextYearKeyDown, handlePickerIconKeyDown]);
+};
+
+export { useKeyboardHandlers };