@elliemae/ds-controlled-form 2.2.1 → 2.3.0-alpha.4

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/controlled-date-time-picker/parts/Pickers/Calendar/Styleds.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\nconst diagonalLine = css`\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -2px;\n    height: 1px;\n    width: calc(100% + 4px);\n    transform: rotate(45deg);\n    background-color: ${({ theme }) => theme.colors.neutral[500]};\n  }\n`;\n\nconst focusBorder = css`\n  &:after {\n    position: absolute;\n    content: '';\n    top: -4px;\n    left: -4px;\n    width: calc(100% + 8px);\n    height: calc(100% + 8px);\n    border-radius: 50%;\n  }\n`;\n\nconst backgroundDateRange = {\n  inRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n  `,\n  startRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    border-radius: 50% 0 0 50%;\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n  `,\n  endRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    border-radius: 0 50% 50% 0;\n  `,\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2)`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\n`;\n\nexport const StyledShadowWrapper = styled.div<{ isControllerOnly: boolean }>`\n  ${({ isControllerOnly }) =>\n    isControllerOnly ? undefined : 'box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);'}\n`;\n\nexport const StyledCalendarWrapper = styled.div`\n  display: grid;\n  width: 260px;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  grid-template-rows: auto auto;\n`;\n\nexport const StyledHeader = styled.section`\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n  display: grid;\n  padding: ${({ theme }) => theme.space.xxxs};\n  grid-template-columns: min-content min-content 1fr min-content min-content;\n  grid-template-rows: 1fr;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n  h3 {\n    font-size: 1rem;\n  }\n`;\n\nexport const StyledHeaderButton = styled(DSButtonV2)`\n  position: relative;\n  width: 28px;\n  height: 28px;\n  &:focus {\n    &:after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n  }\n`;\n\nexport const StyledBody = styled.section`\n  padding: ${({ theme }) => theme.space.xxxs};\n`;\n\nexport const StyledDayBtn = styled(DSButtonV2)`\n  height: 32px;\n  width: 32px;\n  border-radius: 50%;\n  position: relative;\n  border-width: 2px;\n  border-style: solid;\n  border-color: transparent;\n  line-height: 1;\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  &:hover {\n    cursor: pointer;\n    color: ${({ theme }) => theme.colors.brand[700]};\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n  }\n  &:focus {\n    ${focusBorder}\n  }\n`;\n\nexport const StyledWeekDaysListWrapper = styled(Grid)`\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  text-align: center;\n  ${({ isHeader, theme }) => (isHeader ? `background: ${theme.colors.neutral['050']}` : '')};\n  ${({ isHeader }) => (isHeader ? 'text-transform: capitalize' : '')};\n\n  .dayWrapper.selectedDay,\n  .dayWrapper.startRangeDay,\n  .dayWrapper.endRangeDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral['000']};\n      font-weight: ${({ theme }) => theme.fontWeights.semibold};\n    }\n\n    &:not(.disabledDay),\n    &:not(.outOfRangeDay) {\n      ${StyledDayBtn} {\n        background-color: ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        background-color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        border-color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n\n    &.outOfRangeDay.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.disabledDay,\n  .dayWrapper.outOfRangeDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[500]};\n      ${diagonalLine}\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral[500]};\n      }\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        &:after {\n          border: 2px solid ${({ theme }) => theme.colors.danger[900]};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.focusedDay {\n    ${StyledDayBtn} {\n      ${focusBorder}\n      color: ${({ theme }) => theme.colors.brand[600]};\n      &:after {\n        border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.danger[900]};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.notCurrentMonth {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[500]};\n    }\n\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.brand[600]};\n      }\n\n      &.disabledDay,\n      &.outOfRangeDay {\n        ${StyledDayBtn} {\n          color: ${({ theme }) => theme.colors.danger[900]};\n        }\n\n        &.inRangeDay,\n        &.startRangeDay,\n        &.endRangeDay {\n          ${StyledDayBtn} {\n            color: ${({ theme }) => theme.colors.neutral['000']};\n          }\n        }\n      }\n    }\n\n    &.selectedDay,\n    &.startRangeDay,\n    &.endRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n  }\n\n  .dayWrapper.inRangeDay {\n    ${backgroundDateRange.inRange}\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        background-color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n      &.focusedDay {\n        ${StyledDayBtn} {\n          border-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.startRangeDay {\n    ${backgroundDateRange.startRange}\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay {\n    ${backgroundDateRange.endRange}\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay.startRangeDay {\n    background-color: transparent;\n    box-shadow: none;\n  }\n`;\n\nexport const StyledWeekDaysHeaderItem = styled.div`\n  width: ${({ theme }) => theme.space.s};\n  min-width: ${({ theme }) => theme.space.s};\n`;\n\nexport const CalendarFooterMessage = styled.footer`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  margin: 0 ${({ theme }) => theme.space.xxs2};\n  padding: ${({ theme }) => theme.space.xxs2} 0;\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-style: italic;\n  font-weight: ${({ theme }) => theme.fontWeights.thin};\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n`;\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEA,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASG,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI5D,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYpB,MAAM,sBAAsB;AAAA,EAC1B,SAAS;AAAA,wBACa,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA,4BAC9B,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA,EAE5D,YAAY;AAAA,wBACU,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA,4BAE9B,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA,EAE5D,UAAU;AAAA,wBACY,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAKnD,MAAM,0BAA0B,OAAO;AAAA,WACnC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAKtC,MAAM,sBAAsB,OAAO;AAAA,IACtC,CAAC,EAAE,uBACH,mBAAmB,SAAY;AAAA;AAG5B,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA,sBAGtB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAInD,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOtB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMxB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAM7C,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYf,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAM1C,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAI7C,MAAM,aAAa,OAAO;AAAA,aACpB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAGjC,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASxB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,aAGlC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA,wBACvB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,MAGpD;AAAA;AAAA;AAIC,MAAM,4BAA4B,OAAO;AAAA,eACjC,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA;AAAA,IAEhD,CAAC,EAAE,UAAU,YAAa,WAAW,eAAe,MAAM,OAAO,QAAQ,WAAW;AAAA,IACpF,CAAC,EAAE,eAAgB,WAAW,+BAA+B;AAAA;AAAA;AAAA;AAAA;AAAA,MAK3D;AAAA,eACS,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,qBAC9B,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,QAK9C;AAAA,4BACoB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMtD;AAAA,iBACS,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,4BACzB,CAAC,EAAE,YAAY,MAAM,OAAO,OAAO;AAAA;AAAA,8BAEjC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAM1D;AAAA,iBACS,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,wBAC7B,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,QAKpD;AAAA,iBACS,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA,8BAEvB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQ5D;AAAA,eACS,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,QAC3C;AAAA;AAAA,4BAEoB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,QAIxD;AAAA;AAAA,8BAEsB,CAAC,EAAE,YAAY,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAO3D;AAAA,QACE;AAAA,eACO,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA,4BAErB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMtD;AAAA,iBACS,CAAC,EAAE,YAAY,MAAM,OAAO,OAAO;AAAA;AAAA,8BAEtB,CAAC,EAAE,YAAY,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAO3D;AAAA,eACS,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,QAI3C;AAAA,iBACS,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,UAKzC;AAAA,mBACS,CAAC,EAAE,YAAY,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM1C;AAAA,qBACS,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASjD;AAAA,iBACS,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM/C,oBAAoB;AAAA;AAAA;AAAA,QAGlB;AAAA,iBACS,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,4BACzB,CAAC,EAAE,YAAY,MAAM,OAAO,OAAO;AAAA;AAAA,8BAEjC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,UAIxD;AAAA,0BACgB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOxD,oBAAoB;AAAA;AAAA,QAElB;AAAA,iBACS,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,QAK7C;AAAA,iBACS,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA,8BAEvB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAO5D,oBAAoB;AAAA;AAAA,QAElB;AAAA,iBACS,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,QAK7C;AAAA,iBACS,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA,8BAEvB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY3D,MAAM,2BAA2B,OAAO;AAAA,WACpC,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eACvB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAGnC,MAAM,wBAAwB,OAAO;AAAA,0BAClB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,cAChD,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,aAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,WAC7B,CAAC,EAAE,YAAY,MAAM,OAAO,OAAO;AAAA;AAAA,iBAE7B,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,eACnC,CAAC,EAAE,YAAY,MAAM,UAAU,UAAU;AAAA;AAAA;",
+  "names": []
+}

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

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

package/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/esm/controlled-date-time-picker/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.js

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

package/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/esm/controlled-date-time-picker/parts/Pickers/Calendar/useFocusLogic.js

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

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