@elliemae/ds-controlled-form 2.3.1 → 3.0.0-alpha.3

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

@@ -0,0 +1,188 @@
+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";
+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
+};
+//# sourceMappingURL=useConfigCalendarCTX.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/useConfigCalendarCTX.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useState, useMemo, useContext, useCallback } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarContextT } from './CalendarContext';\nimport { useKeyboardHandlers } from './useKeyboardHandlers';\nimport { useFocusLogic } from './useFocusLogic';\nimport { usePopperTriggerLogic } from './usePopperTriggerLogic';\nimport { useCurrentDisplayedMonthYearLogic } from './useCurrentDisplayedMonthYearLogic';\nimport type { metaMonthDayT } from '../../../index.d';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction sliceIntoChunks<T = any>(arr: Array<T>, chunkSize: number): Array<Array<T>> {\n  const res = [];\n  for (let i = 0; i < arr.length; i += chunkSize) {\n    const chunk = arr.slice(i, i + chunkSize);\n    res.push(chunk);\n  }\n  return res;\n}\nexport const useConfigCalendarCTX = (): CalendarContextT => {\n  const {\n    props: { disabled },\n    prevYearBtnRef,\n    prevMonthBtnRef,\n    nextMonthBtnRef,\n    nextYearBtnRef,\n    calendarDaysWrapperRef,\n    isControllerOnly,\n    isWithTimeWheelToo,\n    setLatestInteractionRegion,\n    autoFocusPrevMonthArrow,\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  const [showCalendar, setShowCalendar] = useState(false);\n\n  const { currentMonth, currentYear, daysArray, handlePrevYear, handlePrevMonth, handleNextMonth, handleNextYear } =\n    useCurrentDisplayedMonthYearLogic();\n  const { invisibleFirstDay, daysMatrixByWeekday, invisibleLastDay } = useMemo(() => {\n    const [invisible1stDay, ...otherDays] = [...daysArray];\n    const invisibleDayLast = otherDays.pop();\n    return {\n      invisibleFirstDay: invisible1stDay,\n      daysMatrixByWeekday: sliceIntoChunks<metaMonthDayT>(otherDays, 7),\n      invisibleLastDay: invisibleDayLast,\n    };\n  }, [daysArray]);\n\n  const setLatestInteractionRegionCalendarHead = useCallback(() => {\n    setLatestInteractionRegion('calendar-head');\n  }, [setLatestInteractionRegion]);\n  const onPrevYearFocus = useCallback(() => {\n    setLatestInteractionRegionCalendarHead();\n  }, [setLatestInteractionRegionCalendarHead]);\n  const onPrevMonthFocus = useCallback(() => {\n    setLatestInteractionRegionCalendarHead();\n  }, [setLatestInteractionRegionCalendarHead]);\n  const onNextMonthFocus = useCallback(() => {\n    setLatestInteractionRegionCalendarHead();\n  }, [setLatestInteractionRegionCalendarHead]);\n  const onNextYearFocus = useCallback(() => {\n    setLatestInteractionRegionCalendarHead();\n  }, [setLatestInteractionRegionCalendarHead]);\n\n  const {\n    focusedDay,\n    tryToFocusCurrentlyDataIsFocusedDay,\n    handleFocusMetaDay,\n    handleFocusMetaDayByDay,\n    resetFocusedDayToStartDate,\n  } = useFocusLogic({ daysArray, showCalendar });\n\n  const {\n    closeCalendar,\n    handleSetTriggerRef,\n    setPopperElement,\n    setArrowElement,\n    usePopperHelpers,\n    handleToggleCalendar,\n    handleMenuWrapperKeyDown,\n  } = usePopperTriggerLogic({\n    tryToFocusCurrentlyDataIsFocusedDay,\n    resetFocusedDayToStartDate,\n    focusedDay,\n    showCalendar,\n    setShowCalendar,\n  });\n  const {\n    handleDayOnKeyDown,\n    handlePrevYearKeyDown,\n    handlePrevMonthKeyDown,\n    handleNextMonthKeyDown,\n    handleNextYearKeyDown,\n    handlePickerIconKeyDown,\n  } = useKeyboardHandlers({\n    focusedDay,\n    daysArray,\n    handlePrevMonth,\n    handleNextMonth,\n    handleFocusMetaDay,\n    handleFocusMetaDayByDay,\n    tryToFocusCurrentlyDataIsFocusedDay,\n  });\n\n  return useMemo(\n    () => ({\n      showCalendar,\n      setShowCalendar,\n      closeCalendar,\n      setPopperElement,\n      setArrowElement,\n      usePopperHelpers,\n      handleToggleCalendar,\n      handleSetTriggerRef,\n      handleMenuWrapperKeyDown,\n\n      isControllerOnly,\n      calendarDaysWrapperRef,\n      prevYearBtnRef,\n      prevMonthBtnRef,\n      nextMonthBtnRef,\n      nextYearBtnRef,\n\n      currentMonth,\n      currentYear,\n      daysArray,\n      invisibleFirstDay,\n      daysMatrixByWeekday,\n      invisibleLastDay,\n      focusedDay,\n      tryToFocusCurrentlyDataIsFocusedDay,\n      handleFocusMetaDay,\n      handleFocusMetaDayByDay,\n      resetFocusedDayToStartDate,\n      handlePrevMonth,\n      handlePrevYear,\n      handleNextMonth,\n      handleNextYear,\n      handleDayOnKeyDown,\n      handlePrevYearKeyDown,\n      handlePrevMonthKeyDown,\n      handleNextMonthKeyDown,\n      handleNextYearKeyDown,\n      handlePickerIconKeyDown,\n\n      onPrevYearFocus,\n      onPrevMonthFocus,\n      onNextMonthFocus,\n      onNextYearFocus,\n\n      isWithTimeWheelToo,\n      autoFocusPrevMonthArrow,\n      ariaCurrentValueForInputs,\n      disabled,\n    }),\n    [\n      showCalendar,\n      closeCalendar,\n      setPopperElement,\n      setArrowElement,\n      usePopperHelpers,\n      handleToggleCalendar,\n      handleSetTriggerRef,\n      handleMenuWrapperKeyDown,\n      isControllerOnly,\n      calendarDaysWrapperRef,\n      prevYearBtnRef,\n      prevMonthBtnRef,\n      nextMonthBtnRef,\n      nextYearBtnRef,\n      currentMonth,\n      currentYear,\n      daysArray,\n      invisibleFirstDay,\n      daysMatrixByWeekday,\n      invisibleLastDay,\n      focusedDay,\n      tryToFocusCurrentlyDataIsFocusedDay,\n      handleFocusMetaDay,\n      handleFocusMetaDayByDay,\n      resetFocusedDayToStartDate,\n      handlePrevMonth,\n      handlePrevYear,\n      handleNextMonth,\n      handleNextYear,\n      handleDayOnKeyDown,\n      handlePrevYearKeyDown,\n      handlePrevMonthKeyDown,\n      handleNextMonthKeyDown,\n      handleNextYearKeyDown,\n      handlePickerIconKeyDown,\n      onPrevYearFocus,\n      onPrevMonthFocus,\n      onNextMonthFocus,\n      onNextYearFocus,\n      isWithTimeWheelToo,\n      autoFocusPrevMonthArrow,\n      ariaCurrentValueForInputs,\n      disabled,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA;ACGA;AACA;AAEA;AACA;AACA;AACA;AAIA,yBAAkC,KAAe,WAAoC;AACnF,QAAM,MAAM;AACZ,WAAS,IAAI,GAAG,IAAI,IAAI,QAAQ,KAAK,WAAW;AAC9C,UAAM,QAAQ,IAAI,MAAM,GAAG,IAAI;AAC/B,QAAI,KAAK;AAAA;AAEX,SAAO;AAAA;AAEF,MAAM,uBAAuB,MAAwB;AAC1D,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW;AACf,QAAM,CAAC,cAAc,mBAAmB,SAAS;AAEjD,QAAM,EAAE,cAAc,aAAa,WAAW,gBAAgB,iBAAiB,iBAAiB,mBAC9F;AACF,QAAM,EAAE,mBAAmB,qBAAqB,qBAAqB,QAAQ,MAAM;AACjF,UAAM,CAAC,oBAAoB,aAAa,CAAC,GAAG;AAC5C,UAAM,mBAAmB,UAAU;AACnC,WAAO;AAAA,MACL,mBAAmB;AAAA,MACnB,qBAAqB,gBAA+B,WAAW;AAAA,MAC/D,kBAAkB;AAAA;AAAA,KAEnB,CAAC;AAEJ,QAAM,yCAAyC,YAAY,MAAM;AAC/D,+BAA2B;AAAA,KAC1B,CAAC;AACJ,QAAM,kBAAkB,YAAY,MAAM;AACxC;AAAA,KACC,CAAC;AACJ,QAAM,mBAAmB,YAAY,MAAM;AACzC;AAAA,KACC,CAAC;AACJ,QAAM,mBAAmB,YAAY,MAAM;AACzC;AAAA,KACC,CAAC;AACJ,QAAM,kBAAkB,YAAY,MAAM;AACxC;AAAA,KACC,CAAC;AAEJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,cAAc,EAAE,WAAW;AAE/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,sBAAsB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAEF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,oBAAoB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGF,SAAO,QACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,79 @@
+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";
+const useCurrentDisplayedMonthYearLogic = () => {
+  const { month: monthFromDateString, year: yearFromDateString } = useGetMonthYearFromDateStringOrEmptyStartingMonth();
+  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: 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: 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
+};
+//# sourceMappingURL=useCurrentDisplayedMonthYearLogic.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useCallback, useState, useEffect, createRef } from 'react';\n// eslint-disable-next-line max-len\nimport { useGetMonthYearFromDateStringOrEmptyStartingMonth } from '../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth';\nimport {\n  getFiveBySevenCurrentMonthDaysMatrix,\n  sumFromDateValues,\n  sumValuesToDate,\n  getDateStringFromDay,\n} from '../../../utils/dateHelpers';\nimport type { useCurrentDisplayedMonthYearLogicT } from './CalendarContext';\n\nexport const useCurrentDisplayedMonthYearLogic = (): useCurrentDisplayedMonthYearLogicT => {\n  const { month: monthFromDateString, year: yearFromDateString } = useGetMonthYearFromDateStringOrEmptyStartingMonth();\n\n  // side-effects are really really controlled in this case so use-effect should be fine\n  // don't add 200 side-effects to those or else Chaos would hunt us for the years to come\n  useEffect(() => {\n    setCurrentMonth(monthFromDateString);\n  }, [monthFromDateString]);\n  useEffect(() => {\n    setCurrentYear(yearFromDateString);\n  }, [yearFromDateString]);\n  const [currentMonth, setCurrentMonth] = useState(monthFromDateString);\n  const [currentYear, setCurrentYear] = useState(yearFromDateString);\n\n  const daysArray = useMemo(() => {\n    const newDaysArray = getFiveBySevenCurrentMonthDaysMatrix(currentMonth, currentYear);\n    const hiddenPrevDay = sumValuesToDate(newDaysArray[0].day, {\n      daysToSum: -1,\n    });\n    const hiddenPrevMetaday = {\n      day: hiddenPrevDay,\n      dayAsString: getDateStringFromDay(hiddenPrevDay),\n      isPrevMonthDay: true,\n      isNextMonthDay: false,\n      isCurrMonthDay: false,\n      dayBtnRef: createRef<HTMLButtonElement>(),\n      isHidden: true,\n    };\n    const hiddenNextDay = sumValuesToDate(newDaysArray[newDaysArray.length - 1].day, {\n      daysToSum: 1,\n    });\n    const hiddenNextMetaday = {\n      day: hiddenNextDay,\n      dayAsString: getDateStringFromDay(hiddenNextDay),\n      isPrevMonthDay: false,\n      isNextMonthDay: true,\n      isCurrMonthDay: false,\n      dayBtnRef: createRef<HTMLButtonElement>(),\n      isHidden: true,\n    };\n    return [hiddenPrevMetaday, ...newDaysArray, hiddenNextMetaday];\n  }, [currentMonth, currentYear]);\n\n  const handlePrevYear = useCallback(() => {\n    const { year: newYear } = sumFromDateValues({ month: currentMonth, year: currentYear }, { yearsToSum: -1 });\n    setCurrentYear(newYear);\n  }, [currentMonth, currentYear]);\n\n  const handlePrevMonth = useCallback(() => {\n    const { month: newMonth, year: newYear } = sumFromDateValues(\n      { month: currentMonth, year: currentYear },\n      { monthsToSum: -1 },\n    );\n    setCurrentMonth(newMonth);\n    setCurrentYear(newYear);\n  }, [currentMonth, currentYear]);\n\n  const handleNextMonth = useCallback(() => {\n    const { month: newMonth, year: newYear } = sumFromDateValues(\n      { month: currentMonth, year: currentYear },\n      { monthsToSum: 1 },\n    );\n    setCurrentMonth(newMonth);\n    setCurrentYear(newYear);\n  }, [currentMonth, currentYear]);\n\n  const handleNextYear = useCallback(() => {\n    const { year: newYear } = sumFromDateValues({ month: currentMonth, year: currentYear }, { yearsToSum: 1 });\n    setCurrentYear(newYear);\n  }, [currentMonth, currentYear]);\n\n  return useMemo(\n    () => ({\n      currentMonth,\n      currentYear,\n      daysArray,\n      handlePrevYear,\n      handlePrevMonth,\n      handleNextMonth,\n      handleNextYear,\n    }),\n    [currentMonth, currentYear, daysArray, handleNextMonth, handleNextYear, handlePrevMonth, handlePrevYear],\n  );\n};\n"],
+  "mappings": "AAAA;ACGA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQO,MAAM,oCAAoC,MAA0C;AACzF,QAAM,EAAE,OAAO,qBAAqB,MAAM,uBAAuB;AAIjE,YAAU,MAAM;AACd,oBAAgB;AAAA,KACf,CAAC;AACJ,YAAU,MAAM;AACd,mBAAe;AAAA,KACd,CAAC;AACJ,QAAM,CAAC,cAAc,mBAAmB,SAAS;AACjD,QAAM,CAAC,aAAa,kBAAkB,SAAS;AAE/C,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,eAAe,qCAAqC,cAAc;AACxE,UAAM,gBAAgB,gBAAgB,aAAa,GAAG,KAAK;AAAA,MACzD,WAAW;AAAA;AAEb,UAAM,oBAAoB;AAAA,MACxB,KAAK;AAAA,MACL,aAAa,qBAAqB;AAAA,MAClC,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,UAAU;AAAA;AAEZ,UAAM,gBAAgB,gBAAgB,aAAa,aAAa,SAAS,GAAG,KAAK;AAAA,MAC/E,WAAW;AAAA;AAEb,UAAM,oBAAoB;AAAA,MACxB,KAAK;AAAA,MACL,aAAa,qBAAqB;AAAA,MAClC,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,UAAU;AAAA;AAEZ,WAAO,CAAC,mBAAmB,GAAG,cAAc;AAAA,KAC3C,CAAC,cAAc;AAElB,QAAM,iBAAiB,YAAY,MAAM;AACvC,UAAM,EAAE,MAAM,YAAY,kBAAkB,EAAE,OAAO,cAAc,MAAM,eAAe,EAAE,YAAY;AACtG,mBAAe;AAAA,KACd,CAAC,cAAc;AAElB,QAAM,kBAAkB,YAAY,MAAM;AACxC,UAAM,EAAE,OAAO,UAAU,MAAM,YAAY,kBACzC,EAAE,OAAO,cAAc,MAAM,eAC7B,EAAE,aAAa;AAEjB,oBAAgB;AAChB,mBAAe;AAAA,KACd,CAAC,cAAc;AAElB,QAAM,kBAAkB,YAAY,MAAM;AACxC,UAAM,EAAE,OAAO,UAAU,MAAM,YAAY,kBACzC,EAAE,OAAO,cAAc,MAAM,eAC7B,EAAE,aAAa;AAEjB,oBAAgB;AAChB,mBAAe;AAAA,KACd,CAAC,cAAc;AAElB,QAAM,iBAAiB,YAAY,MAAM;AACvC,UAAM,EAAE,MAAM,YAAY,kBAAkB,EAAE,OAAO,cAAc,MAAM,eAAe,EAAE,YAAY;AACtG,mBAAe;AAAA,KACd,CAAC,cAAc;AAElB,SAAO,QACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF,CAAC,cAAc,aAAa,WAAW,iBAAiB,gBAAgB,iBAAiB;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,67 @@
+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) => {
+  let ab = maxTries;
+  const inter = setInterval(() => {
+    cb();
+    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 focusedDay = useMemo(() => {
+    const newFocusedDay = metadayToFocus ? daysArray.find(({ day: currDay }) => compareTwoDatesDayEquality(currDay, metadayToFocus.day)) : daysArray.find(({ day: currDay }) => compareTwoDatesDayEquality(currDay, startFocusedDate));
+    return newFocusedDay;
+  }, [daysArray, startFocusedDate, metadayToFocus]);
+  const tryToFocusCurrentlyDataIsFocusedDay = useCallback((wrapperDOM = calendarDaysWrapperRef?.current || document) => {
+    let shortcircuit = false;
+    loopWhileWaiting(() => {
+      const domElem = wrapperDOM?.querySelector('[data-isfocused="true"]');
+      if (domElem) {
+        domElem?.focus?.();
+        shortcircuit = true;
+      }
+    }, () => shortcircuit);
+  }, [calendarDaysWrapperRef]);
+  useLayoutEffect(() => {
+    if (showCalendar)
+      tryToFocusCurrentlyDataIsFocusedDay(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);
+  }, [daysArray, focusedDay]);
+  const handleFocusMetaDayByDay = useCallback((dayDate) => {
+    const newFocusedMetaDay = daysArray.find(({ day: currDay }) => 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
+};
+//# sourceMappingURL=useFocusLogic.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/useFocusLogic.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useCallback, useState, useLayoutEffect, useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { compareTwoDatesDayEquality } from '../../../utils/dateHelpers';\nimport { useGetStartingFocusedDay } from '../../../utils/hooks/useGetStartingFocusedDay';\nimport type { metaMonthDayT } from '../../../index.d';\nimport type { FocusLogicT } from './CalendarContext';\n\n// eslint-disable-next-line max-params\nconst loopWhileWaiting = (cb, shortcircuit = () => false, timePerTry = 100, maxTries = 5) => {\n  let ab = maxTries;\n  const inter = setInterval(() => {\n    cb();\n    if (shortcircuit() || ab === 0) clearInterval(inter);\n    ab -= 1;\n  }, timePerTry);\n};\n\ninterface useFocusLogicArgsT {\n  daysArray: metaMonthDayT[];\n  showCalendar: boolean;\n}\n\nexport const useFocusLogic = ({ daysArray, showCalendar }: useFocusLogicArgsT): FocusLogicT => {\n  const { calendarDaysWrapperRef } = useContext(ControlledDateTimePickerContext);\n  const { startFocusedDate } = useGetStartingFocusedDay();\n  const [metadayToFocus, setMetadayToFocus] = useState<metaMonthDayT>(\n    daysArray.find(({ day: currDay }) => compareTwoDatesDayEquality(currDay, startFocusedDate)),\n  );\n  // this is required because we have to focus based on the inputs values too,\n  // useGetStartingFocusedDay does this already,\n  // this \"useMemo\" is here just to trigger it functionally by changing the metadayToFocus state\n  // which is required for arrow key navigation in the calendar\n  const focusedDay = useMemo(() => {\n    const newFocusedDay = metadayToFocus\n      ? daysArray.find(({ day: currDay }) => compareTwoDatesDayEquality(currDay, metadayToFocus.day))\n      : daysArray.find(({ day: currDay }) => compareTwoDatesDayEquality(currDay, startFocusedDate));\n    return newFocusedDay;\n  }, [daysArray, startFocusedDate, metadayToFocus]);\n\n  const tryToFocusCurrentlyDataIsFocusedDay = useCallback(\n    (wrapperDOM: HTMLElement | Document = calendarDaysWrapperRef?.current || document) => {\n      let shortcircuit = false;\n      loopWhileWaiting(\n        () => {\n          const domElem = wrapperDOM?.querySelector<HTMLButtonElement>('[data-isfocused=\"true\"]');\n          if (domElem) {\n            domElem?.focus?.();\n            shortcircuit = true;\n          }\n        },\n        () => shortcircuit,\n      );\n    },\n    [calendarDaysWrapperRef],\n  );\n\n  useLayoutEffect(() => {\n    if (showCalendar) tryToFocusCurrentlyDataIsFocusedDay(calendarDaysWrapperRef?.current);\n  }, [calendarDaysWrapperRef, focusedDay, showCalendar, tryToFocusCurrentlyDataIsFocusedDay]);\n\n  const handleFocusMetaDay = useCallback(\n    (metaDayToFocus) => {\n      // if focusedDay is inside current daysArray we set Focused day\n      const newFocusedMetaDay = daysArray.find(({ day: currDay }) =>\n        compareTwoDatesDayEquality(currDay, metaDayToFocus.day),\n      );\n      if (focusedDay !== newFocusedMetaDay) setMetadayToFocus(newFocusedMetaDay);\n    },\n    [daysArray, focusedDay],\n  );\n\n  const handleFocusMetaDayByDay = useCallback(\n    (dayDate) => {\n      // if focusedDay is inside current daysArray we set Focused day\n      const newFocusedMetaDay = daysArray.find(({ day: currDay }) => compareTwoDatesDayEquality(currDay, dayDate));\n      if (focusedDay !== newFocusedMetaDay) setMetadayToFocus(newFocusedMetaDay);\n    },\n    [daysArray, focusedDay],\n  );\n\n  const resetFocusedDayToStartDate = useCallback(() => {\n    setMetadayToFocus(null);\n  }, []);\n\n  return useMemo(\n    () => ({\n      focusedDay,\n      tryToFocusCurrentlyDataIsFocusedDay,\n      resetFocusedDayToStartDate,\n      handleFocusMetaDay,\n      handleFocusMetaDayByDay,\n    }),\n    [\n      focusedDay,\n      tryToFocusCurrentlyDataIsFocusedDay,\n      resetFocusedDayToStartDate,\n      handleFocusMetaDay,\n      handleFocusMetaDayByDay,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA;ACGA;AACA;AACA;AACA;AAKA,MAAM,mBAAmB,CAAC,IAAI,eAAe,MAAM,OAAO,aAAa,KAAK,WAAW,MAAM;AAC3F,MAAI,KAAK;AACT,QAAM,QAAQ,YAAY,MAAM;AAC9B;AACA,QAAI,kBAAkB,OAAO;AAAG,oBAAc;AAC9C,UAAM;AAAA,KACL;AAAA;AAQE,MAAM,gBAAgB,CAAC,EAAE,WAAW,mBAAoD;AAC7F,QAAM,EAAE,2BAA2B,WAAW;AAC9C,QAAM,EAAE,qBAAqB;AAC7B,QAAM,CAAC,gBAAgB,qBAAqB,SAC1C,UAAU,KAAK,CAAC,EAAE,KAAK,cAAc,2BAA2B,SAAS;AAM3E,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,gBAAgB,iBAClB,UAAU,KAAK,CAAC,EAAE,KAAK,cAAc,2BAA2B,SAAS,eAAe,QACxF,UAAU,KAAK,CAAC,EAAE,KAAK,cAAc,2BAA2B,SAAS;AAC7E,WAAO;AAAA,KACN,CAAC,WAAW,kBAAkB;AAEjC,QAAM,sCAAsC,YAC1C,CAAC,aAAqC,wBAAwB,WAAW,aAAa;AACpF,QAAI,eAAe;AACnB,qBACE,MAAM;AACJ,YAAM,UAAU,YAAY,cAAiC;AAC7D,UAAI,SAAS;AACX,iBAAS;AACT,uBAAe;AAAA;AAAA,OAGnB,MAAM;AAAA,KAGV,CAAC;AAGH,kBAAgB,MAAM;AACpB,QAAI;AAAc,0CAAoC,wBAAwB;AAAA,KAC7E,CAAC,wBAAwB,YAAY,cAAc;AAEtD,QAAM,qBAAqB,YACzB,CAAC,mBAAmB;AAElB,UAAM,oBAAoB,UAAU,KAAK,CAAC,EAAE,KAAK,cAC/C,2BAA2B,SAAS,eAAe;AAErD,QAAI,eAAe;AAAmB,wBAAkB;AAAA,KAE1D,CAAC,WAAW;AAGd,QAAM,0BAA0B,YAC9B,CAAC,YAAY;AAEX,UAAM,oBAAoB,UAAU,KAAK,CAAC,EAAE,KAAK,cAAc,2BAA2B,SAAS;AACnG,QAAI,eAAe;AAAmB,wBAAkB;AAAA,KAE1D,CAAC,WAAW;AAGd,QAAM,6BAA6B,YAAY,MAAM;AACnD,sBAAkB;AAAA,KACjB;AAEH,SAAO,QACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,233 @@
+import * as React from "react";
+import { useMemo, useContext, useCallback } from "react";
+import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
+import { sumValuesToDate } from "../../../utils/dateHelpers";
+import { homeEndAllArrowKeys, homeEndKeys } from "../../../utils/constants";
+const useKeyboardHandlers = ({
+  focusedDay,
+  daysArray,
+  handlePrevMonth,
+  handleNextMonth,
+  handleFocusMetaDay,
+  handleFocusMetaDayByDay,
+  tryToFocusCurrentlyDataIsFocusedDay
+}) => {
+  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(({ isCurrMonthDay }) => isCurrMonthDay);
+      if (newFocusDay)
+        setTimeout(() => {
+          handleFocusMetaDay(newFocusDay);
+        });
+    } else {
+      tryToFocusCurrentlyDataIsFocusedDay();
+    }
+  }, [daysArray, focusedDay, handleFocusMetaDay, setLatestInteractionRegion, tryToFocusCurrentlyDataIsFocusedDay]);
+  const onHomeKeyDownInsideCalendar = useCallback(() => {
+    prevMonthBtnRef?.current?.focus?.();
+  }, [prevMonthBtnRef]);
+  const onEndKeyDownInsideCalendar = useCallback(() => {
+    if (isWithTimeWheelToo)
+      currMeridiemBtnRef?.current?.focus?.();
+    else
+      tryToFocusDayRegion();
+  }, [currMeridiemBtnRef, isWithTimeWheelToo, tryToFocusDayRegion]);
+  const onHomeKeyDownTriggerIcon = useCallback(() => {
+    if (!hideDate)
+      monthInputRef?.current?.focus?.();
+    else if (!hideTime)
+      hourInputRef?.current?.focus?.();
+  }, [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) {
+      if (isWithTimeInputs)
+        meridiemInputRef?.current?.focus?.();
+      else if (isWithDateInputs)
+        yearInputRef?.current?.focus?.();
+    }
+  }, [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();
+    if (key === "Tab" && !shiftKey && isControllerOnly === false && !isWithTimeWheelToo) {
+      e.preventDefault();
+      prevMonthBtnRef?.current?.focus?.();
+    }
+  }, [
+    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) {
+        if (!isControllerOnly) {
+          e.preventDefault();
+          if (isWithTimeWheelToo)
+            currMeridiemBtnRef?.current?.focus?.();
+          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) {
+        prevYearBtnRef?.current?.focus?.();
+      }
+      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
+};
+//# sourceMappingURL=useKeyboardHandlers.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/useKeyboardHandlers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useContext, useCallback } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { sumValuesToDate } from '../../../utils/dateHelpers';\nimport type { metaMonthDayT, onKeyDownT } from '../../../index.d';\nimport type { handleDayOnKeyDownT, KeyboardHandlersT, HeaderButtonsRefsT } from './CalendarContext';\nimport { homeEndAllArrowKeys, homeEndKeys } from '../../../utils/constants';\n\ninterface useKeyboardHandlersArgsT extends Partial<HeaderButtonsRefsT> {\n  focusedDay: metaMonthDayT;\n  daysArray: metaMonthDayT[];\n  handlePrevMonth: () => void;\n  handleNextMonth: () => void;\n  handleFocusMetaDay: (metaDayToFocus: metaMonthDayT) => void;\n  handleFocusMetaDayByDay: (dayToFocus: Date) => void;\n  tryToFocusCurrentlyDataIsFocusedDay: () => void;\n}\n\nexport const useKeyboardHandlers = ({\n  focusedDay,\n  daysArray,\n  handlePrevMonth,\n  handleNextMonth,\n  handleFocusMetaDay,\n  handleFocusMetaDayByDay,\n  tryToFocusCurrentlyDataIsFocusedDay,\n}: useKeyboardHandlersArgsT): KeyboardHandlersT => {\n  const {\n    hideDate,\n    hideTime,\n    monthInputRef,\n    hourInputRef,\n    prevYearBtnRef,\n    prevMonthBtnRef,\n    nextMonthBtnRef,\n    nextYearBtnRef,\n    currMeridiemBtnRef,\n    isControllerOnly,\n    isWithTimeWheelToo,\n    setLatestInteractionRegion,\n    withAnyInputs,\n    isWithTimeInputs,\n    meridiemInputRef,\n    isWithDateInputs,\n    yearInputRef,\n  } = useContext(ControlledDateTimePickerContext);\n  const tryToFocusDayRegion = useCallback(() => {\n    setLatestInteractionRegion('calendar-days');\n    if (!focusedDay) {\n      const newFocusDay = daysArray.find(({ isCurrMonthDay }) => isCurrMonthDay);\n      if (newFocusDay)\n        setTimeout(() => {\n          handleFocusMetaDay(newFocusDay);\n        });\n    } else {\n      tryToFocusCurrentlyDataIsFocusedDay();\n    }\n  }, [daysArray, focusedDay, handleFocusMetaDay, setLatestInteractionRegion, tryToFocusCurrentlyDataIsFocusedDay]);\n\n  const onHomeKeyDownInsideCalendar = useCallback(() => {\n    prevMonthBtnRef?.current?.focus?.();\n  }, [prevMonthBtnRef]);\n  const onEndKeyDownInsideCalendar = useCallback(() => {\n    if (isWithTimeWheelToo) currMeridiemBtnRef?.current?.focus?.();\n    else tryToFocusDayRegion();\n  }, [currMeridiemBtnRef, isWithTimeWheelToo, tryToFocusDayRegion]);\n\n  const onHomeKeyDownTriggerIcon = useCallback(() => {\n    if (!hideDate) monthInputRef?.current?.focus?.();\n    else if (!hideTime) hourInputRef?.current?.focus?.();\n  }, [hideDate, hideTime, monthInputRef, hourInputRef]);\n  const handlePickerIconKeyDown: onKeyDownT<HTMLButtonElement> = useCallback(\n    (e) => {\n      const { key } = e;\n      if (homeEndKeys.includes(key)) e.preventDefault();\n      if (homeEndKeys.includes(key)) e.stopPropagation();\n      if (key === 'Home') onHomeKeyDownTriggerIcon();\n      if (key === 'Backspace' && withAnyInputs) {\n        if (isWithTimeInputs) meridiemInputRef?.current?.focus?.();\n        else if (isWithDateInputs) yearInputRef?.current?.focus?.();\n      }\n    },\n    [isWithDateInputs, isWithTimeInputs, meridiemInputRef, onHomeKeyDownTriggerIcon, withAnyInputs, yearInputRef],\n  );\n\n  const handleDayOnKeyDown: handleDayOnKeyDownT = useCallback(\n    (e, metaDay) => {\n      let newFocusedDayDate;\n      const { day } = metaDay;\n      const { key, shiftKey } = e;\n      if (homeEndAllArrowKeys.includes(key)) e.preventDefault();\n      if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();\n\n      if (key === 'ArrowUp') newFocusedDayDate = sumValuesToDate(day, { daysToSum: -7 });\n      if (key === 'ArrowDown') newFocusedDayDate = sumValuesToDate(day, { daysToSum: 7 });\n      if (key === 'ArrowLeft') {\n        newFocusedDayDate = sumValuesToDate(day, { daysToSum: -1 });\n        if (metaDay === daysArray[1]) {\n          handlePrevMonth();\n        }\n      }\n      if (key === 'ArrowRight') {\n        newFocusedDayDate = sumValuesToDate(day, { daysToSum: 1 });\n        if (metaDay === daysArray[daysArray.length - 2]) {\n          handleNextMonth();\n        }\n      }\n      if (newFocusedDayDate) {\n        handleFocusMetaDayByDay(newFocusedDayDate);\n        setTimeout(tryToFocusCurrentlyDataIsFocusedDay);\n      }\n      if (key === 'Home') onHomeKeyDownInsideCalendar();\n      if (key === 'End') onEndKeyDownInsideCalendar();\n      // TAB CYCLE IMPLEMENTATION\n      if (key === 'Tab' && !shiftKey && isControllerOnly === false && !isWithTimeWheelToo) {\n        // MUST prevent default since this is a custom focus switch\n        // NOT preventing the default event will cause unexpected result\n        e.preventDefault();\n        prevMonthBtnRef?.current?.focus?.();\n      }\n    },\n    [\n      daysArray,\n      handleFocusMetaDayByDay,\n      handleNextMonth,\n      handlePrevMonth,\n      isControllerOnly,\n      isWithTimeWheelToo,\n      onEndKeyDownInsideCalendar,\n      onHomeKeyDownInsideCalendar,\n      prevMonthBtnRef,\n      tryToFocusCurrentlyDataIsFocusedDay,\n    ],\n  );\n  const handlePrevYearKeyDown = useCallback(\n    (e) => {\n      const { key, shiftKey } = e;\n      if (key === 'Tab') {\n        e.preventDefault();\n        if (shiftKey) {\n          nextMonthBtnRef.current.focus();\n        } else {\n          nextYearBtnRef.current.focus();\n        }\n      }\n      if (key === 'Home') {\n        onHomeKeyDownInsideCalendar();\n        e.preventDefault();\n      }\n      if (key === 'End') {\n        onEndKeyDownInsideCalendar();\n        e.preventDefault();\n      }\n    },\n    [nextMonthBtnRef, nextYearBtnRef, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar],\n  );\n  const handlePrevMonthKeyDown = useCallback(\n    (e) => {\n      const { key, shiftKey } = e;\n      if (key === 'Tab') {\n        if (shiftKey) {\n          // TAB CYCLE IMPLEMENTATION\n          if (!isControllerOnly) {\n            e.preventDefault();\n            if (isWithTimeWheelToo) currMeridiemBtnRef?.current?.focus?.();\n            else tryToFocusDayRegion();\n          }\n        } else {\n          e.preventDefault();\n          nextMonthBtnRef.current.focus();\n        }\n      }\n      if (key === 'Home') {\n        onHomeKeyDownInsideCalendar();\n        e.preventDefault();\n      }\n      if (key === 'End') {\n        onEndKeyDownInsideCalendar();\n        e.preventDefault();\n      }\n    },\n    [\n      currMeridiemBtnRef,\n      isControllerOnly,\n      isWithTimeWheelToo,\n      nextMonthBtnRef,\n      onEndKeyDownInsideCalendar,\n      onHomeKeyDownInsideCalendar,\n      tryToFocusDayRegion,\n    ],\n  );\n  const handleNextMonthKeyDown = useCallback(\n    (e) => {\n      const { key, shiftKey } = e;\n      if (key === 'Tab') {\n        e.preventDefault();\n        if (shiftKey) {\n          prevMonthBtnRef.current.focus();\n        } else {\n          prevYearBtnRef.current.focus();\n        }\n      }\n      if (key === 'Home') {\n        onHomeKeyDownInsideCalendar();\n        e.preventDefault();\n      }\n      if (key === 'End') {\n        onEndKeyDownInsideCalendar();\n        e.preventDefault();\n      }\n    },\n    [onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, prevMonthBtnRef, prevYearBtnRef],\n  );\n  const handleNextYearKeyDown = useCallback(\n    (e) => {\n      const { key, shiftKey } = e;\n      if (key === 'Tab') {\n        e.preventDefault();\n        if (shiftKey) {\n          prevYearBtnRef?.current?.focus?.();\n        }\n        if (!shiftKey) tryToFocusDayRegion();\n      }\n      if (key === 'Home') {\n        onHomeKeyDownInsideCalendar();\n        e.preventDefault();\n      }\n      if (key === 'End') {\n        onEndKeyDownInsideCalendar();\n        e.preventDefault();\n      }\n    },\n    [tryToFocusDayRegion, prevYearBtnRef, onHomeKeyDownInsideCalendar, onEndKeyDownInsideCalendar],\n  );\n\n  return useMemo(\n    () => ({\n      handleDayOnKeyDown,\n      handlePrevYearKeyDown,\n      handlePrevMonthKeyDown,\n      handleNextMonthKeyDown,\n      handleNextYearKeyDown,\n      handlePickerIconKeyDown,\n    }),\n    [\n      handleDayOnKeyDown,\n      handlePrevYearKeyDown,\n      handlePrevMonthKeyDown,\n      handleNextMonthKeyDown,\n      handleNextYearKeyDown,\n      handlePickerIconKeyDown,\n    ],\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}