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

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": []
+}

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

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { useMemo, useCallback, useState, useContext } from "react";
+import { usePopper } from "react-popper";
+import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
+import { useOnClickOutside } from "../../../utils/hooks/useOnClickOutside";
+const usePopperTriggerLogic = ({
+  focusedDay,
+  resetFocusedDayToStartDate,
+  showCalendar,
+  setShowCalendar,
+  tryToFocusCurrentlyDataIsFocusedDay
+}) => {
+  const {
+    props: { onPickerOpen, onPickerClose },
+    prevMonthBtnRef,
+    pickerButtonRef
+  } = useContext(ControlledDateTimePickerContext);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const usePopperHelpers = usePopper(referenceElement, popperElement, {
+    modifiers: [{ name: "arrow", options: { element: arrowElement } }]
+  });
+  const handleOnPickerOpen = useCallback(() => {
+    onPickerOpen();
+    tryToFocusCurrentlyDataIsFocusedDay();
+  }, [onPickerOpen, tryToFocusCurrentlyDataIsFocusedDay]);
+  const openCalendar = useCallback(() => {
+    if (focusedDay)
+      setTimeout(() => focusedDay?.dayBtnRef?.current?.focus?.(), 100);
+    else
+      setTimeout(() => prevMonthBtnRef?.current?.focus?.(), 100);
+    setShowCalendar(true);
+    handleOnPickerOpen();
+  }, [focusedDay, handleOnPickerOpen, prevMonthBtnRef, setShowCalendar]);
+  const closeCalendar = useCallback(() => {
+    setShowCalendar(false);
+    onPickerClose();
+    resetFocusedDayToStartDate();
+    pickerButtonRef?.current?.focus?.();
+  }, [setShowCalendar, onPickerClose, resetFocusedDayToStartDate, pickerButtonRef]);
+  const handleToggleCalendar = useCallback(() => {
+    const isOpening = !showCalendar;
+    if (isOpening)
+      openCalendar();
+    else
+      closeCalendar();
+  }, [closeCalendar, openCalendar, showCalendar]);
+  const handleSetTriggerRef = useCallback((newRef) => {
+    pickerButtonRef.current = newRef;
+    setReferenceElement(newRef);
+  }, [pickerButtonRef]);
+  const handleMenuWrapperKeyDown = useCallback((e) => {
+    const { key } = e;
+    if (key === "Escape") {
+      closeCalendar();
+      pickerButtonRef?.current?.focus?.();
+    }
+  }, [closeCalendar, pickerButtonRef]);
+  useOnClickOutside(popperElement, (e) => {
+    if (!pickerButtonRef?.current?.contains?.(e?.target))
+      closeCalendar();
+  });
+  return useMemo(() => ({
+    closeCalendar,
+    handleSetTriggerRef,
+    setPopperElement,
+    setArrowElement,
+    usePopperHelpers,
+    handleToggleCalendar,
+    handleMenuWrapperKeyDown
+  }), [closeCalendar, handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleCalendar, usePopperHelpers]);
+};
+export {
+  usePopperTriggerLogic
+};
+//# sourceMappingURL=usePopperTriggerLogic.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/usePopperTriggerLogic.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, useState, useContext } from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside';\nimport type { metaMonthDayT } from '../../../index.d';\nimport type { PopperTriggerLogicT } from './CalendarContext';\n\ninterface usePopperTriggerLogicT {\n  tryToFocusCurrentlyDataIsFocusedDay: () => void;\n  resetFocusedDayToStartDate: () => void;\n  focusedDay: metaMonthDayT;\n  showCalendar: boolean;\n  setShowCalendar: React.Dispatch<React.SetStateAction<boolean>>;\n}\nexport const usePopperTriggerLogic = ({\n  focusedDay,\n  resetFocusedDayToStartDate,\n  showCalendar,\n  setShowCalendar,\n  tryToFocusCurrentlyDataIsFocusedDay,\n}: usePopperTriggerLogicT): PopperTriggerLogicT => {\n  const {\n    props: { onPickerOpen, onPickerClose },\n    prevMonthBtnRef,\n    pickerButtonRef,\n  } = useContext(ControlledDateTimePickerContext);\n  const [referenceElement, setReferenceElement] = useState(null);\n  const [popperElement, setPopperElement] = useState(null);\n  const [arrowElement, setArrowElement] = useState(null);\n  const usePopperHelpers = usePopper(referenceElement, popperElement, {\n    modifiers: [{ name: 'arrow', options: { element: arrowElement } }],\n  });\n  // onOpen we try to focus the day we should focus, if we should focus one\n  const handleOnPickerOpen = useCallback(() => {\n    onPickerOpen();\n    tryToFocusCurrentlyDataIsFocusedDay();\n  }, [onPickerOpen, tryToFocusCurrentlyDataIsFocusedDay]);\n  const openCalendar = useCallback(() => {\n    if (focusedDay) setTimeout(() => focusedDay?.dayBtnRef?.current?.focus?.(), 100);\n    else setTimeout(() => prevMonthBtnRef?.current?.focus?.(), 100);\n    setShowCalendar(true);\n    handleOnPickerOpen();\n  }, [focusedDay, handleOnPickerOpen, prevMonthBtnRef, setShowCalendar]);\n\n  const closeCalendar = useCallback(() => {\n    setShowCalendar(false);\n    onPickerClose();\n    resetFocusedDayToStartDate();\n    pickerButtonRef?.current?.focus?.();\n  }, [setShowCalendar, onPickerClose, resetFocusedDayToStartDate, pickerButtonRef]);\n\n  const handleToggleCalendar = useCallback(() => {\n    const isOpening = !showCalendar;\n    if (isOpening) openCalendar();\n    else closeCalendar();\n  }, [closeCalendar, openCalendar, showCalendar]);\n\n  const handleSetTriggerRef = useCallback(\n    (newRef) => {\n      pickerButtonRef.current = newRef;\n      setReferenceElement(newRef);\n    },\n    [pickerButtonRef],\n  );\n  const handleMenuWrapperKeyDown = useCallback(\n    (e) => {\n      const { key } = e;\n      if (key === 'Escape') {\n        closeCalendar();\n        pickerButtonRef?.current?.focus?.();\n      }\n    },\n    [closeCalendar, pickerButtonRef],\n  );\n  useOnClickOutside(popperElement, (e) => {\n    if (!pickerButtonRef?.current?.contains?.(e?.target)) closeCalendar();\n  });\n\n  return useMemo(\n    () => ({\n      closeCalendar,\n      handleSetTriggerRef,\n      setPopperElement,\n      setArrowElement,\n      usePopperHelpers,\n      handleToggleCalendar,\n      handleMenuWrapperKeyDown,\n    }),\n    [closeCalendar, handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleCalendar, usePopperHelpers],\n  );\n};\n"],
+  "mappings": "AAAA;ACGA;AACA;AAEA;AACA;AAWO,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACiD;AACjD,QAAM;AAAA,IACJ,OAAO,EAAE,cAAc;AAAA,IACvB;AAAA,IACA;AAAA,MACE,WAAW;AACf,QAAM,CAAC,kBAAkB,uBAAuB,SAAS;AACzD,QAAM,CAAC,eAAe,oBAAoB,SAAS;AACnD,QAAM,CAAC,cAAc,mBAAmB,SAAS;AACjD,QAAM,mBAAmB,UAAU,kBAAkB,eAAe;AAAA,IAClE,WAAW,CAAC,EAAE,MAAM,SAAS,SAAS,EAAE,SAAS;AAAA;AAGnD,QAAM,qBAAqB,YAAY,MAAM;AAC3C;AACA;AAAA,KACC,CAAC,cAAc;AAClB,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI;AAAY,iBAAW,MAAM,YAAY,WAAW,SAAS,WAAW;AAAA;AACvE,iBAAW,MAAM,iBAAiB,SAAS,WAAW;AAC3D,oBAAgB;AAChB;AAAA,KACC,CAAC,YAAY,oBAAoB,iBAAiB;AAErD,QAAM,gBAAgB,YAAY,MAAM;AACtC,oBAAgB;AAChB;AACA;AACA,qBAAiB,SAAS;AAAA,KACzB,CAAC,iBAAiB,eAAe,4BAA4B;AAEhE,QAAM,uBAAuB,YAAY,MAAM;AAC7C,UAAM,YAAY,CAAC;AACnB,QAAI;AAAW;AAAA;AACV;AAAA,KACJ,CAAC,eAAe,cAAc;AAEjC,QAAM,sBAAsB,YAC1B,CAAC,WAAW;AACV,oBAAgB,UAAU;AAC1B,wBAAoB;AAAA,KAEtB,CAAC;AAEH,QAAM,2BAA2B,YAC/B,CAAC,MAAM;AACL,UAAM,EAAE,QAAQ;AAChB,QAAI,QAAQ,UAAU;AACpB;AACA,uBAAiB,SAAS;AAAA;AAAA,KAG9B,CAAC,eAAe;AAElB,oBAAkB,eAAe,CAAC,MAAM;AACtC,QAAI,CAAC,iBAAiB,SAAS,WAAW,GAAG;AAAS;AAAA;AAGxD,SAAO,QACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF,CAAC,eAAe,0BAA0B,qBAAqB,sBAAsB;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+import React2 from "react";
+import { CalendarWithTimeWheelIconTrigger } from "./CalendarWithTimeWheelIconTrigger";
+import { CalendarWithTimeWheelWrapper } from "./CalendarWithTimeWheelWrapper";
+import { CalendarWithTimeWheelContext } from "./CalendarWithTimeWheelContext";
+import { useConfigCalendarWithTimeWheelCTX } from "./useConfigCalendarWithTimeWheelCTX";
+import { WrapWithCalendarContext } from "../Calendar/Calendar";
+import { WrapWithTimeWheelContext } from "../TimeWheel/TimeWheel";
+const CalendarWithTimeWheel = WrapWithCalendarContext(WrapWithTimeWheelContext(() => {
+  const ctx = useConfigCalendarWithTimeWheelCTX();
+  const { showCalendarWithTimeWheel, isControllerOnly, handleMenuWrapperKeyDown } = ctx;
+  return /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelContext.Provider, {
+    value: ctx
+  }, isControllerOnly ? null : /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelIconTrigger, null), isControllerOnly || showCalendarWithTimeWheel ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", {
+    onKeyDown: handleMenuWrapperKeyDown
+  }, /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelWrapper, null))) : null);
+}));
+export {
+  CalendarWithTimeWheel
+};
+//# sourceMappingURL=CalendarWithTimeWheel.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheel.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-len */\nimport React from 'react';\nimport { CalendarWithTimeWheelIconTrigger } from './CalendarWithTimeWheelIconTrigger';\nimport { CalendarWithTimeWheelWrapper } from './CalendarWithTimeWheelWrapper';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext';\nimport { useConfigCalendarWithTimeWheelCTX } from './useConfigCalendarWithTimeWheelCTX';\nimport { WrapWithCalendarContext } from '../Calendar/Calendar';\nimport { WrapWithTimeWheelContext } from '../TimeWheel/TimeWheel';\n\n// we must use the HoC for wrapping the context\n// or else useConfigCalendarWithTimeWheelCTX won't have access to the context functions\nexport const CalendarWithTimeWheel = WrapWithCalendarContext(\n  WrapWithTimeWheelContext((): JSX.Element => {\n    const ctx = useConfigCalendarWithTimeWheelCTX();\n    const { showCalendarWithTimeWheel, isControllerOnly, handleMenuWrapperKeyDown } = ctx;\n\n    return (\n      <CalendarWithTimeWheelContext.Provider value={ctx}>\n        {isControllerOnly ? null : <CalendarWithTimeWheelIconTrigger />}\n        {isControllerOnly || showCalendarWithTimeWheel ? (\n          <>\n            {/* The <div> element is catching the \"ESC\" key to close the calendar, there is no valid aria role for this */}\n            {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */}\n            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n            <div onKeyDown={handleMenuWrapperKeyDown}>\n              <CalendarWithTimeWheelWrapper />\n            </div>\n          </>\n        ) : null}\n      </CalendarWithTimeWheelContext.Provider>\n    );\n  }),\n);\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAIO,MAAM,wBAAwB,wBACnC,yBAAyB,MAAmB;AAC1C,QAAM,MAAM;AACZ,QAAM,EAAE,2BAA2B,kBAAkB,6BAA6B;AAElF,SACE,qCAAC,6BAA6B,UAA9B;AAAA,IAAuC,OAAO;AAAA,KAC3C,mBAAmB,OAAO,qCAAC,kCAAD,OAC1B,oBAAoB,4BACnB,4DAIE,qCAAC,OAAD;AAAA,IAAK,WAAW;AAAA,KACd,qCAAC,8BAAD,UAGF;AAAA;",
+  "names": []
+}

package/dist/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+import React2, { useContext } from "react";
+import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
+import { StyledCalendarWithTimeWheelWrapper, StyledCalendar } from "./Styleds";
+import { CalendarWithTimeWheelFooter } from "./CalendarWithTimeWheelFooter";
+import { TimeWheelContent } from "../TimeWheel/TimeWheelContent";
+import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
+const CalendarWithTimeWheelContent = () => {
+  const { isControllerOnly } = useContext(ControlledDateTimePickerContext);
+  return /* @__PURE__ */ React2.createElement(StyledCalendarWithTimeWheelWrapper, {
+    isControllerOnly,
+    "data-testid": ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL
+  }, /* @__PURE__ */ React2.createElement(StyledCalendar, null), /* @__PURE__ */ React2.createElement(TimeWheelContent, null), /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelFooter, null));
+};
+export {
+  CalendarWithTimeWheelContent
+};
+//# sourceMappingURL=CalendarWithTimeWheelContent.js.map

package/dist/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { StyledCalendarWithTimeWheelWrapper, StyledCalendar } from './Styleds';\nimport { CalendarWithTimeWheelFooter } from './CalendarWithTimeWheelFooter';\nimport { TimeWheelContent } from '../TimeWheel/TimeWheelContent';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\n\nexport const CalendarWithTimeWheelContent = (): JSX.Element => {\n  const { isControllerOnly } = useContext(ControlledDateTimePickerContext);\n  return (\n    <StyledCalendarWithTimeWheelWrapper\n      isControllerOnly={isControllerOnly}\n      data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL}\n    >\n      <StyledCalendar />\n      <TimeWheelContent />\n      <CalendarWithTimeWheelFooter />\n    </StyledCalendarWithTimeWheelWrapper>\n  );\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,+BAA+B,MAAmB;AAC7D,QAAM,EAAE,qBAAqB,WAAW;AACxC,SACE,qCAAC,oCAAD;AAAA,IACE;AAAA,IACA,eAAa,mCAAmC,qBAAqB;AAAA,KAErE,qCAAC,gBAAD,OACA,qCAAC,kBAAD,OACA,qCAAC,6BAAD;AAAA;",
+  "names": []
+}

package/dist/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { createContext } from "react";
+const noop = () => {
+};
+const defaultCalendarWithTimeWheelContext = {
+  ariaCurrentValueForInputs: "",
+  showCalendarWithTimeWheel: false,
+  setPopperElement: noop,
+  setArrowElement: noop,
+  usePopperHelpers: null,
+  handleSetTriggerRef: noop,
+  handleToggleCalendarWithTimeWheel: noop,
+  handleMenuWrapperKeyDown: noop,
+  handlePickerIconKeyDown: noop,
+  isControllerOnly: false,
+  disabled: false
+};
+const CalendarWithTimeWheelContext = createContext(defaultCalendarWithTimeWheelContext);
+var CalendarWithTimeWheelContext_default = CalendarWithTimeWheelContext;
+export {
+  CalendarWithTimeWheelContext,
+  CalendarWithTimeWheelContext_default as default,
+  defaultCalendarWithTimeWheelContext
+};
+//# sourceMappingURL=CalendarWithTimeWheelContext.js.map

package/dist/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\n\nexport interface CalendarWithTimeWheelContextT {\n  ariaCurrentValueForInputs: string;\n  showCalendarWithTimeWheel: boolean;\n  setPopperElement: (instance: HTMLDivElement) => void;\n  setArrowElement: (instance: HTMLDivElement) => void;\n  usePopperHelpers: {\n    attributes: Record<string, unknown>;\n    styles: Record<string, React.CSSProperties>;\n  };\n  handleToggleCalendarWithTimeWheel: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n  handleMenuWrapperKeyDown: (e?: React.KeyboardEvent<HTMLElement>) => void;\n  handlePickerIconKeyDown: (e?: React.KeyboardEvent<HTMLButtonElement>) => void;\n  isControllerOnly: boolean;\n  disabled: boolean;\n}\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nexport const defaultCalendarWithTimeWheelContext: CalendarWithTimeWheelContextT = {\n  ariaCurrentValueForInputs: '',\n  showCalendarWithTimeWheel: false,\n  setPopperElement: noop,\n  setArrowElement: noop,\n  usePopperHelpers: null,\n  handleSetTriggerRef: noop,\n  handleToggleCalendarWithTimeWheel: noop,\n  handleMenuWrapperKeyDown: noop,\n  handlePickerIconKeyDown: noop,\n  isControllerOnly: false,\n  disabled: false,\n};\n\n/** Context for cross component communication */\nexport const CalendarWithTimeWheelContext = createContext(defaultCalendarWithTimeWheelContext);\n\nexport default CalendarWithTimeWheelContext;\n"],
+  "mappings": "AAAA;ACAA;AAmBA,MAAM,OAAO,MAAY;AAAA;AAClB,MAAM,sCAAqE;AAAA,EAChF,2BAA2B;AAAA,EAC3B,2BAA2B;AAAA,EAC3B,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,mCAAmC;AAAA,EACnC,0BAA0B;AAAA,EAC1B,yBAAyB;AAAA,EACzB,kBAAkB;AAAA,EAClB,UAAU;AAAA;AAIL,MAAM,+BAA+B,cAAc;AAE1D,IAAO,uCAAQ;",
+  "names": []
+}

package/dist/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import React2, { useContext } from "react";
+import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
+import { CalendarWithTimeWheelFooterMessage } from "./Styleds";
+const CalendarWithTimeWheelFooter = () => {
+  const {
+    props: { pickerFooterMsg, hasError }
+  } = useContext(ControlledDateTimePickerContext);
+  return pickerFooterMsg !== void 0 && hasError ? /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelFooterMessage, {
+    role: "alert"
+  }, pickerFooterMsg) : null;
+};
+export {
+  CalendarWithTimeWheelFooter
+};
+//# sourceMappingURL=CalendarWithTimeWheelFooter.js.map

package/dist/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarWithTimeWheelFooterMessage } from './Styleds';\n\nexport const CalendarWithTimeWheelFooter = (): JSX.Element => {\n  const {\n    props: { pickerFooterMsg, hasError },\n  } = useContext(ControlledDateTimePickerContext);\n  return pickerFooterMsg !== undefined && hasError ? (\n    <CalendarWithTimeWheelFooterMessage role=\"alert\">{pickerFooterMsg}</CalendarWithTimeWheelFooterMessage>\n  ) : null;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,8BAA8B,MAAmB;AAC5D,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB;AAAA,MACxB,WAAW;AACf,SAAO,oBAAoB,UAAa,WACtC,qCAAC,oCAAD;AAAA,IAAoC,MAAK;AAAA,KAAS,mBAChD;AAAA;",
+  "names": []
+}

package/dist/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.js

@@ -0,0 +1,37 @@
+import * as React from "react";
+import React2, { useContext, useMemo } from "react";
+import { BUTTON_VARIANT, BUTTON_SIZES } from "@elliemae/ds-button";
+import { DatePicker } from "@elliemae/ds-icons";
+import { CalendarWithTimeWheelContext } from "./CalendarWithTimeWheelContext";
+import { StyledIconTriggerButton } from "./Styleds";
+import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
+const CalendarWithTimeWheelIconTrigger = () => {
+  const {
+    handleSetTriggerRef,
+    handleToggleCalendarWithTimeWheel,
+    handlePickerIconKeyDown,
+    ariaCurrentValueForInputs,
+    disabled
+  } = useContext(CalendarWithTimeWheelContext);
+  return useMemo(() => /* @__PURE__ */ React2.createElement(StyledIconTriggerButton, {
+    "aria-label": `date time picker context menu trigger, ${ariaCurrentValueForInputs}`,
+    buttonType: "icon",
+    size: BUTTON_SIZES.M,
+    variant: BUTTON_VARIANT.DEFAULT,
+    innerRef: handleSetTriggerRef,
+    onClick: handleToggleCalendarWithTimeWheel,
+    onKeyDown: handlePickerIconKeyDown,
+    "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL,
+    disabled
+  }, /* @__PURE__ */ React2.createElement(DatePicker, null)), [
+    ariaCurrentValueForInputs,
+    disabled,
+    handlePickerIconKeyDown,
+    handleSetTriggerRef,
+    handleToggleCalendarWithTimeWheel
+  ]);
+};
+export {
+  CalendarWithTimeWheelIconTrigger
+};
+//# sourceMappingURL=CalendarWithTimeWheelIconTrigger.js.map