@elliemae/ds-controlled-form 2.4.2-rc.1 → 2.4.2-rc.13

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

@@ -49,17 +49,16 @@ const Day = _ref => {
     appOnDayChange,
     appOnYearChange,
     latestInteractionRegion,
-    setLatestInteractionRegion,
-    isWithTimeWheelToo
+    isWithTimeWheelToo,
+    trackFocusCalendarMetafocusedDay
   } = useContext(ControlledDateTimePickerContext);
   const {
     focusedDay,
     handleDayOnKeyDown,
     handleFocusMetaDayByDay,
-    closeCalendar,
-    tryToFocusCurrentlyDataIsFocusedDay
+    closeCalendar
   } = useContext(CalendarContext);
-  const isFocusedMetaDay = focusedDay !== null && focusedDay !== void 0 && focusedDay.day ? compareTwoDatesDayEquality(metaDay === null || metaDay === void 0 ? void 0 : metaDay.day, focusedDay === null || focusedDay === void 0 ? void 0 : focusedDay.day) : false;
+  const isFocusedMetaDay = focusedDay?.day ? compareTwoDatesDayEquality(metaDay?.day, focusedDay?.day) : false;
   const isSelected = useMemo(() => {
     const selectedDate = getDayFromDateString(dateStringFromProps);
     return selectedDate ? isSameDateMoment(day, selectedDate) : false;
@@ -72,7 +71,6 @@ const Day = _ref => {
   const isDayInRange = !isStartRangeDay && !isEndRangeDay && getIsDayInRange(metaDay.dayAsString);
   const handleOnDayClick = useCallback(e => {
     handleFocusMetaDayByDay(day);
-    tryToFocusCurrentlyDataIsFocusedDay();
 
     if (!isDisabled && !isOutOfRange) {
       const newDateString = getDateStringFromDay(day);
@@ -86,18 +84,24 @@ const Day = _ref => {
         day: dayNumber,
         year
       } = getDateValuesFromDate(day);
-      appOnMonthChange("".concat(month + 1), e, metaInfo);
-      if (dayNumber) appOnDayChange("".concat(dayNumber), e, metaInfo);
-      appOnYearChange("".concat(year), e, metaInfo);
+      appOnMonthChange(`${month + 1}`, e, metaInfo);
+      if (dayNumber) appOnDayChange(`${dayNumber}`, e, metaInfo);
+      appOnYearChange(`${year}`, e, metaInfo);
       handleChangeComposedDateString(newDateString, metaInfo);
-      setLatestInteractionRegion('calendar-days');
+      trackFocusCalendarMetafocusedDay();
       if (!isWithTimeWheelToo && !preventCloseOnSelection) closeCalendar();
     }
-  }, [isDisabled, isOutOfRange, day, appOnMonthChange, appOnDayChange, appOnYearChange, handleChangeComposedDateString, handleFocusMetaDayByDay, tryToFocusCurrentlyDataIsFocusedDay, setLatestInteractionRegion, isWithTimeWheelToo, preventCloseOnSelection, closeCalendar]);
+  }, [handleFocusMetaDayByDay, day, isDisabled, isOutOfRange, appOnMonthChange, appOnDayChange, appOnYearChange, handleChangeComposedDateString, trackFocusCalendarMetafocusedDay, isWithTimeWheelToo, preventCloseOnSelection, closeCalendar]);
+  const handleInnerRef = useCallback(ButtonDomNode => {
+    window.requestAnimationFrame(() => {
+      dayBtnRef.current = ButtonDomNode;
+      if (isFocused) ButtonDomNode?.focus?.();
+    });
+  }, [dayBtnRef, isFocused]);
   const handleOnDayFocus = useCallback(() => {
-    setLatestInteractionRegion('calendar-days');
-  }, [setLatestInteractionRegion]);
-  const dayClassModifiers = useMemo(() => "dayWrapper ".concat(isSelected ? 'selectedDay ' : '').concat(isDisabled ? 'disabledDay ' : '').concat(isOutOfRange ? 'outOfRangeDay ' : '').concat(isFocused ? 'focusedDay ' : '').concat(isStartRangeDay ? 'startRangeDay ' : '').concat(isDayInRange ? 'inRangeDay ' : '').concat(isEndRangeDay ? 'endRangeDay ' : '').concat(isCurrMonthDay ? '' : 'notCurrentMonth'), [isSelected, isDisabled, isOutOfRange, isFocused, isStartRangeDay, isDayInRange, isEndRangeDay, isCurrMonthDay]);
+    trackFocusCalendarMetafocusedDay('calendar-days');
+  }, [trackFocusCalendarMetafocusedDay]);
+  const dayClassModifiers = useMemo(() => `dayWrapper ${isSelected ? 'selectedDay ' : ''}${isDisabled ? 'disabledDay ' : ''}${isOutOfRange ? 'outOfRangeDay ' : ''}${isFocused ? 'focusedDay ' : ''}${isStartRangeDay ? 'startRangeDay ' : ''}${isDayInRange ? 'inRangeDay ' : ''}${isEndRangeDay ? 'endRangeDay ' : ''}${isCurrMonthDay ? '' : 'notCurrentMonth'}`, [isSelected, isDisabled, isOutOfRange, isFocused, isStartRangeDay, isDayInRange, isEndRangeDay, isCurrMonthDay]);
   let dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.DAY;
   if (isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_DAY;
   if (isFocused) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.FOCUSED_DAY;
@@ -113,7 +117,7 @@ const Day = _ref => {
     'aria-colindex': colIndex
   }), {}, {
     children: /*#__PURE__*/_jsx(StyledDayBtn, {
-      "aria-label": "".concat(getAriaDayFromDateString(dayAsString), ", ").concat(weekDays[metaDay.day.getDay()]),
+      "aria-label": `${getAriaDayFromDateString(dayAsString)}, ${weekDays[metaDay.day.getDay()]}`,
       "aria-disabled": isOutOfRange || isDisabled,
       "aria-hidden": !!isInvisible,
       buttonType: "raw",
@@ -124,11 +128,11 @@ const Day = _ref => {
       onKeyDown: e => {
         handleDayOnKeyDown(e, metaDay);
       },
-      innerRef: dayBtnRef,
+      innerRef: handleInnerRef,
       tabIndex: isSelected ? 0 : -1,
       "data-isfocused": isFocused,
       "data-testid": dataTestid
-    }, void 0, "".concat(day.getDate()))
+    }, void 0, `${day.getDate()}`)
   }));
 };
 

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

@@ -1,46 +1,76 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import styled from 'styled-components';
 import { css } from '@elliemae/ds-system';
 import { Grid } from '@elliemae/ds-grid';
 import { DSButtonV2 } from '@elliemae/ds-button';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const diagonalLine = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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: ", ";\n  }\n"])), _ref => {
+/* eslint-disable max-lines */
+const diagonalLine = css`
+  &:before {
+    position: absolute;
+    content: '';
+    top: 48%;
+    left: -2px;
+    height: 1px;
+    width: calc(100% + 4px);
+    transform: rotate(45deg);
+    background-color: ${_ref => {
   let {
     theme
   } = _ref;
   return theme.colors.neutral[500];
-});
-const focusBorder = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])));
+}};
+  }
+`;
+const focusBorder = css`
+  &:after {
+    position: absolute;
+    content: '';
+    top: -4px;
+    left: -4px;
+    width: calc(100% + 8px);
+    height: calc(100% + 8px);
+    border-radius: 50%;
+  }
+`;
 const backgroundDateRange = {
-  inRange: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    box-shadow: 4px 0 0 0 ", ";\n  "])), _ref2 => {
+  inRange: css`
+    background-color: ${_ref2 => {
     let {
       theme
     } = _ref2;
     return theme.colors.brand[200];
-  }, _ref3 => {
+  }};
+    box-shadow: 4px 0 0 0 ${_ref3 => {
     let {
       theme
     } = _ref3;
     return theme.colors.brand[200];
-  }),
-  startRange: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-radius: 50% 0 0 50%;\n    box-shadow: 4px 0 0 0 ", ";\n  "])), _ref4 => {
+  }};
+  `,
+  startRange: css`
+    background-color: ${_ref4 => {
     let {
       theme
     } = _ref4;
     return theme.colors.brand[200];
-  }, _ref5 => {
+  }};
+    border-radius: 50% 0 0 50%;
+    box-shadow: 4px 0 0 0 ${_ref5 => {
     let {
       theme
     } = _ref5;
     return theme.colors.brand[200];
-  }),
-  endRange: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-radius: 0 50% 50% 0;\n  "])), _ref6 => {
+  }};
+  `,
+  endRange: css`
+    background-color: ${_ref6 => {
     let {
       theme
     } = _ref6;
     return theme.colors.brand[200];
-  })
+  }};
+    border-radius: 0 50% 50% 0;
+  `
 };
 const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-1vlmm1g-0"
@@ -130,7 +160,7 @@ const StyledWeekDaysListWrapper = /*#__PURE__*/styled(Grid).withConfig({
     isHeader,
     theme
   } = _ref19;
-  return isHeader ? "background: ".concat(theme.colors.neutral['050']) : '';
+  return isHeader ? `background: ${theme.colors.neutral['050']}` : '';
 }, _ref20 => {
   let {
     isHeader

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

@@ -4,7 +4,6 @@ import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useContext, useState, useCallback, useMemo } from 'react';
 import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { useCurrentDisplayedMonthYearLogic } from './useCurrentDisplayedMonthYearLogic.js';
@@ -17,24 +16,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const useConfigCalendarCTX = () => {
   const {
-    setLatestInteractionRegion
+    trackFocusCalendarPrevYear,
+    trackFocusCalendarNextYear,
+    trackFocusCalendarPrevMonth,
+    trackFocusCalendarNextMonth
   } = useContext(ControlledDateTimePickerContext);
   const [showCalendar, setShowCalendar] = useState(false);
-  const setLatestInteractionRegionCalendarHead = useCallback(() => {
-    setLatestInteractionRegion('calendar-head');
-  }, [setLatestInteractionRegion]);
   const onPrevYearFocus = useCallback(() => {
-    setLatestInteractionRegionCalendarHead();
-  }, [setLatestInteractionRegionCalendarHead]);
+    trackFocusCalendarPrevYear();
+  }, [trackFocusCalendarPrevYear]);
   const onPrevMonthFocus = useCallback(() => {
-    setLatestInteractionRegionCalendarHead();
-  }, [setLatestInteractionRegionCalendarHead]);
+    trackFocusCalendarPrevMonth();
+  }, [trackFocusCalendarPrevMonth]);
   const onNextMonthFocus = useCallback(() => {
-    setLatestInteractionRegionCalendarHead();
-  }, [setLatestInteractionRegionCalendarHead]);
+    trackFocusCalendarNextMonth();
+  }, [trackFocusCalendarNextMonth]);
   const onNextYearFocus = useCallback(() => {
-    setLatestInteractionRegionCalendarHead();
-  }, [setLatestInteractionRegionCalendarHead]);
+    trackFocusCalendarNextYear();
+  }, [trackFocusCalendarNextYear]);
   const currentDisplayedMonthLogic = useCurrentDisplayedMonthYearLogic();
   const focusLogic = useFocusLogic({
     currentDisplayedMonthLogic,

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

@@ -1,8 +1,9 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useEffect, useMemo, createRef, useCallback } from 'react';
 import { useGetMonthYearFromDateStringOrEmptyStartingMonth } from '../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js';
 import { getFiveBySevenCurrentMonthDaysMatrix, sumValuesToDate, getDateStringFromDay, sumFromDateValues } from '../../../utils/dateHelpers.js';
 
+/* eslint-disable complexity */
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function sliceIntoChunks(arr, chunkSize) {
   const res = [];

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

@@ -1,33 +1,14 @@
-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 { useState, useMemo, useCallback } from 'react';
 import { compareTwoDatesDayEquality } from '../../../utils/dateHelpers.js';
 import { useGetStartingFocusedDay } from '../../../utils/hooks/useGetStartingFocusedDay.js';
 
-// eslint-disable-next-line max-params
-const loopWhileWaiting = function (cb) {
-  let shortcircuit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => false;
-  let timePerTry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
-  let maxTries = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 5;
-  let ab = maxTries;
-  const inter = setInterval(() => {
-    cb();
-    if (shortcircuit() || ab === 0) clearInterval(inter);
-    ab -= 1;
-  }, timePerTry);
-};
-
 const useFocusLogic = _ref => {
   let {
-    currentDisplayedMonthLogic,
-    showCalendar
+    currentDisplayedMonthLogic
   } = _ref;
-  const {
-    calendarDaysWrapperRef
-  } = useContext(ControlledDateTimePickerContext);
   const {
     daysArray
   } = currentDisplayedMonthLogic;
@@ -59,23 +40,6 @@ const useFocusLogic = _ref => {
     });
     return newFocusedDay;
   }, [daysArray, startFocusedDate, metadayToFocus]);
-  const tryToFocusCurrentlyDataIsFocusedDay = useCallback(function () {
-    let wrapperDOM = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (calendarDaysWrapperRef === null || calendarDaysWrapperRef === void 0 ? void 0 : calendarDaysWrapperRef.current) || document;
-    let shortcircuit = false;
-    loopWhileWaiting(() => {
-      const domElem = wrapperDOM === null || wrapperDOM === void 0 ? void 0 : wrapperDOM.querySelector('[data-isfocused="true"]');
-
-      if (domElem) {
-        var _domElem$focus;
-
-        domElem === null || domElem === void 0 ? void 0 : (_domElem$focus = domElem.focus) === null || _domElem$focus === void 0 ? void 0 : _domElem$focus.call(domElem);
-        shortcircuit = true;
-      }
-    }, () => shortcircuit);
-  }, [calendarDaysWrapperRef]);
-  useLayoutEffect(() => {
-    if (showCalendar) tryToFocusCurrentlyDataIsFocusedDay(calendarDaysWrapperRef === null || calendarDaysWrapperRef === void 0 ? void 0 : calendarDaysWrapperRef.current);
-  }, [calendarDaysWrapperRef, focusedDay, showCalendar, tryToFocusCurrentlyDataIsFocusedDay]);
   const handleFocusMetaDay = useCallback(metaDayToFocus => {
     // if focusedDay is inside current daysArray we set Focused day
     const newFocusedMetaDay = daysArray.find(_ref5 => {
@@ -101,11 +65,10 @@ const useFocusLogic = _ref => {
   }, []);
   return useMemo(() => ({
     focusedDay,
-    tryToFocusCurrentlyDataIsFocusedDay,
     resetFocusedDayToStartDate,
     handleFocusMetaDay,
     handleFocusMetaDayByDay
-  }), [focusedDay, tryToFocusCurrentlyDataIsFocusedDay, resetFocusedDayToStartDate, handleFocusMetaDay, handleFocusMetaDayByDay]);
+  }), [focusedDay, resetFocusedDayToStartDate, handleFocusMetaDay, handleFocusMetaDayByDay]);
 };
 
 export { useFocusLogic };

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

@@ -4,7 +4,6 @@ import 'core-js/modules/esnext.iterator.find.js';
 import { useContext, useCallback, useMemo } from 'react';
 import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { sumValuesToDate } from '../../../utils/dateHelpers.js';
-import { homeEndKeys, homeEndAllArrowKeys } from '../../../utils/constants.js';
 
 const useKeyboardHandlers = _ref => {
   let {
@@ -12,29 +11,26 @@ const useKeyboardHandlers = _ref => {
     focusLogic
   } = _ref;
   const {
-    hideDate,
-    hideTime,
-    monthInputRef,
-    hourInputRef,
-    prevYearBtnRef,
-    prevMonthBtnRef,
-    nextMonthBtnRef,
-    nextYearBtnRef,
-    currMeridiemBtnRef,
     isControllerOnly,
     isWithTimeWheelToo,
-    setLatestInteractionRegion,
     withAnyInputs,
     isWithTimeInputs,
-    meridiemInputRef,
     isWithDateInputs,
-    yearInputRef
+    trackFocusFirstSegment,
+    trackFocusMeridiemInput,
+    trackFocusYearInput,
+    trackFocusCalendarPrevMonth,
+    trackFocusCalendarNextMonth,
+    trackFocusCalendarNextYear,
+    trackFocusCalendarPrevYear,
+    trackFocusTimewheelCurrMeridiem,
+    trackFocusCalendarMetafocusedDay
   } = useContext(ControlledDateTimePickerContext);
   const {
     focusedDay,
     handleFocusMetaDay,
-    handleFocusMetaDayByDay,
-    tryToFocusCurrentlyDataIsFocusedDay
+    handleFocusMetaDayByDay //  tryToFocusCurrentlyDataIsFocusedDay
+
   } = focusLogic;
   const {
     daysArray,
@@ -42,8 +38,6 @@ const useKeyboardHandlers = _ref => {
     handleNextMonth
   } = currentDisplayedMonthLogic;
   const tryToFocusDayRegion = useCallback(() => {
-    setLatestInteractionRegion('calendar-days');
-
     if (!focusedDay) {
       const newFocusDay = daysArray.find(_ref2 => {
         let {
@@ -51,42 +45,32 @@ const useKeyboardHandlers = _ref => {
         } = _ref2;
         return isCurrMonthDay;
       });
-      if (newFocusDay) setTimeout(() => {
-        handleFocusMetaDay(newFocusDay);
-      });
-    } else {
-      tryToFocusCurrentlyDataIsFocusedDay();
+      if (newFocusDay) handleFocusMetaDay(newFocusDay);
     }
-  }, [daysArray, focusedDay, handleFocusMetaDay, setLatestInteractionRegion, tryToFocusCurrentlyDataIsFocusedDay]);
-  const onHomeKeyDownInsideCalendar = useCallback(() => {
-    var _prevMonthBtnRef$curr, _prevMonthBtnRef$curr2;
 
-    prevMonthBtnRef === null || prevMonthBtnRef === void 0 ? void 0 : (_prevMonthBtnRef$curr = prevMonthBtnRef.current) === null || _prevMonthBtnRef$curr === void 0 ? void 0 : (_prevMonthBtnRef$curr2 = _prevMonthBtnRef$curr.focus) === null || _prevMonthBtnRef$curr2 === void 0 ? void 0 : _prevMonthBtnRef$curr2.call(_prevMonthBtnRef$curr);
-  }, [prevMonthBtnRef]);
+    trackFocusCalendarMetafocusedDay();
+  }, [daysArray, focusedDay, handleFocusMetaDay, trackFocusCalendarMetafocusedDay]);
+  const onHomeKeyDownInsideCalendar = useCallback(() => {
+    trackFocusCalendarPrevMonth();
+  }, [trackFocusCalendarPrevMonth]);
   const onEndKeyDownInsideCalendar = useCallback(() => {
-    var _currMeridiemBtnRef$c, _currMeridiemBtnRef$c2;
-
-    if (isWithTimeWheelToo) currMeridiemBtnRef === null || currMeridiemBtnRef === void 0 ? void 0 : (_currMeridiemBtnRef$c = currMeridiemBtnRef.current) === null || _currMeridiemBtnRef$c === void 0 ? void 0 : (_currMeridiemBtnRef$c2 = _currMeridiemBtnRef$c.focus) === null || _currMeridiemBtnRef$c2 === void 0 ? void 0 : _currMeridiemBtnRef$c2.call(_currMeridiemBtnRef$c);else tryToFocusDayRegion();
-  }, [currMeridiemBtnRef, isWithTimeWheelToo, tryToFocusDayRegion]);
+    if (isWithTimeWheelToo) trackFocusTimewheelCurrMeridiem();else tryToFocusDayRegion();
+  }, [isWithTimeWheelToo, trackFocusTimewheelCurrMeridiem, tryToFocusDayRegion]);
   const onHomeKeyDownTriggerIcon = useCallback(() => {
-    var _monthInputRef$curren, _monthInputRef$curren2, _hourInputRef$current, _hourInputRef$current2;
-
-    if (!hideDate) monthInputRef === null || monthInputRef === void 0 ? void 0 : (_monthInputRef$curren = monthInputRef.current) === null || _monthInputRef$curren === void 0 ? void 0 : (_monthInputRef$curren2 = _monthInputRef$curren.focus) === null || _monthInputRef$curren2 === void 0 ? void 0 : _monthInputRef$curren2.call(_monthInputRef$curren);else if (!hideTime) hourInputRef === null || hourInputRef === void 0 ? void 0 : (_hourInputRef$current = hourInputRef.current) === null || _hourInputRef$current === void 0 ? void 0 : (_hourInputRef$current2 = _hourInputRef$current.focus) === null || _hourInputRef$current2 === void 0 ? void 0 : _hourInputRef$current2.call(_hourInputRef$current);
-  }, [hideDate, hideTime, monthInputRef, hourInputRef]);
+    trackFocusFirstSegment();
+  }, [trackFocusFirstSegment]);
   const handlePickerIconKeyDown = useCallback(e => {
     const {
       key
     } = e;
-    if (homeEndKeys.includes(key)) e.preventDefault();
-    if (homeEndKeys.includes(key)) e.stopPropagation();
+    if (['Home', 'End'].includes(key)) e.preventDefault();
+    if (['Home', 'End'].includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDownTriggerIcon();
 
     if (key === 'Backspace' && withAnyInputs) {
-      var _meridiemInputRef$cur, _meridiemInputRef$cur2, _yearInputRef$current, _yearInputRef$current2;
-
-      if (isWithTimeInputs) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur = meridiemInputRef.current) === null || _meridiemInputRef$cur === void 0 ? void 0 : (_meridiemInputRef$cur2 = _meridiemInputRef$cur.focus) === null || _meridiemInputRef$cur2 === void 0 ? void 0 : _meridiemInputRef$cur2.call(_meridiemInputRef$cur);else if (isWithDateInputs) yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current = yearInputRef.current) === null || _yearInputRef$current === void 0 ? void 0 : (_yearInputRef$current2 = _yearInputRef$current.focus) === null || _yearInputRef$current2 === void 0 ? void 0 : _yearInputRef$current2.call(_yearInputRef$current);
+      if (isWithTimeInputs) trackFocusMeridiemInput();else if (isWithDateInputs) trackFocusYearInput();
     }
-  }, [isWithDateInputs, isWithTimeInputs, meridiemInputRef, onHomeKeyDownTriggerIcon, withAnyInputs, yearInputRef]);
+  }, [isWithDateInputs, isWithTimeInputs, onHomeKeyDownTriggerIcon, trackFocusMeridiemInput, trackFocusYearInput, withAnyInputs]);
   const handleDayOnKeyDown = useCallback((e, metaDay) => {
     let newFocusedDayDate;
     const {
@@ -96,8 +80,8 @@ const useKeyboardHandlers = _ref => {
       key,
       shiftKey
     } = e;
-    if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
+    if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();
+    if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();
     if (key === 'ArrowUp') newFocusedDayDate = sumValuesToDate(day, {
       daysToSum: -7
     });
@@ -127,21 +111,18 @@ const useKeyboardHandlers = _ref => {
 
     if (newFocusedDayDate) {
       handleFocusMetaDayByDay(newFocusedDayDate);
-      setTimeout(tryToFocusCurrentlyDataIsFocusedDay);
     }
 
     if (key === 'Home') onHomeKeyDownInsideCalendar();
     if (key === 'End') onEndKeyDownInsideCalendar(); // TAB CYCLE IMPLEMENTATION
 
     if (key === 'Tab' && !shiftKey && isControllerOnly === false && !isWithTimeWheelToo) {
-      var _prevMonthBtnRef$curr3, _prevMonthBtnRef$curr4;
-
       // MUST prevent default since this is a custom focus switch
       // NOT preventing the default event will cause unexpected result
       e.preventDefault();
-      prevMonthBtnRef === null || prevMonthBtnRef === void 0 ? void 0 : (_prevMonthBtnRef$curr3 = prevMonthBtnRef.current) === null || _prevMonthBtnRef$curr3 === void 0 ? void 0 : (_prevMonthBtnRef$curr4 = _prevMonthBtnRef$curr3.focus) === null || _prevMonthBtnRef$curr4 === void 0 ? void 0 : _prevMonthBtnRef$curr4.call(_prevMonthBtnRef$curr3);
+      trackFocusCalendarPrevMonth();
     }
-  }, [daysArray, handleFocusMetaDayByDay, handleNextMonth, handlePrevMonth, isControllerOnly, isWithTimeWheelToo, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, prevMonthBtnRef, tryToFocusCurrentlyDataIsFocusedDay]);
+  }, [daysArray, handleFocusMetaDayByDay, handleNextMonth, handlePrevMonth, isControllerOnly, isWithTimeWheelToo, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, trackFocusCalendarPrevMonth]);
   const handlePrevYearKeyDown = useCallback(e => {
     const {
       key,
@@ -152,13 +133,9 @@ const useKeyboardHandlers = _ref => {
       e.preventDefault();
 
       if (shiftKey) {
-        var _nextMonthBtnRef$curr;
-
-        (_nextMonthBtnRef$curr = nextMonthBtnRef.current) === null || _nextMonthBtnRef$curr === void 0 ? void 0 : _nextMonthBtnRef$curr.focus();
+        trackFocusCalendarNextMonth();
       } else {
-        var _nextYearBtnRef$curre;
-
-        (_nextYearBtnRef$curre = nextYearBtnRef.current) === null || _nextYearBtnRef$curre === void 0 ? void 0 : _nextYearBtnRef$curre.focus();
+        trackFocusCalendarNextYear();
       }
     }
 
@@ -171,7 +148,7 @@ const useKeyboardHandlers = _ref => {
       onEndKeyDownInsideCalendar();
       e.preventDefault();
     }
-  }, [nextMonthBtnRef, nextYearBtnRef, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar]);
+  }, [onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, trackFocusCalendarNextMonth, trackFocusCalendarNextYear]);
   const handlePrevMonthKeyDown = useCallback(e => {
     const {
       key,
@@ -182,16 +159,12 @@ const useKeyboardHandlers = _ref => {
       if (shiftKey) {
         // TAB CYCLE IMPLEMENTATION
         if (!isControllerOnly) {
-          var _currMeridiemBtnRef$c3, _currMeridiemBtnRef$c4;
-
           e.preventDefault();
-          if (isWithTimeWheelToo) currMeridiemBtnRef === null || currMeridiemBtnRef === void 0 ? void 0 : (_currMeridiemBtnRef$c3 = currMeridiemBtnRef.current) === null || _currMeridiemBtnRef$c3 === void 0 ? void 0 : (_currMeridiemBtnRef$c4 = _currMeridiemBtnRef$c3.focus) === null || _currMeridiemBtnRef$c4 === void 0 ? void 0 : _currMeridiemBtnRef$c4.call(_currMeridiemBtnRef$c3);else tryToFocusDayRegion();
+          if (isWithTimeWheelToo) trackFocusTimewheelCurrMeridiem();else tryToFocusDayRegion();
         }
       } else {
-        var _nextMonthBtnRef$curr2;
-
         e.preventDefault();
-        (_nextMonthBtnRef$curr2 = nextMonthBtnRef.current) === null || _nextMonthBtnRef$curr2 === void 0 ? void 0 : _nextMonthBtnRef$curr2.focus();
+        trackFocusCalendarNextMonth();
       }
     }
 
@@ -204,7 +177,7 @@ const useKeyboardHandlers = _ref => {
       onEndKeyDownInsideCalendar();
       e.preventDefault();
     }
-  }, [currMeridiemBtnRef, isControllerOnly, isWithTimeWheelToo, nextMonthBtnRef, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, tryToFocusDayRegion]);
+  }, [isControllerOnly, isWithTimeWheelToo, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, trackFocusCalendarNextMonth, trackFocusTimewheelCurrMeridiem, tryToFocusDayRegion]);
   const handleNextMonthKeyDown = useCallback(e => {
     const {
       key,
@@ -215,13 +188,9 @@ const useKeyboardHandlers = _ref => {
       e.preventDefault();
 
       if (shiftKey) {
-        var _prevMonthBtnRef$curr5;
-
-        (_prevMonthBtnRef$curr5 = prevMonthBtnRef.current) === null || _prevMonthBtnRef$curr5 === void 0 ? void 0 : _prevMonthBtnRef$curr5.focus();
+        trackFocusCalendarPrevMonth();
       } else {
-        var _prevYearBtnRef$curre;
-
-        (_prevYearBtnRef$curre = prevYearBtnRef.current) === null || _prevYearBtnRef$curre === void 0 ? void 0 : _prevYearBtnRef$curre.focus();
+        trackFocusCalendarPrevYear();
       }
     }
 
@@ -234,7 +203,7 @@ const useKeyboardHandlers = _ref => {
       onEndKeyDownInsideCalendar();
       e.preventDefault();
     }
-  }, [onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, prevMonthBtnRef, prevYearBtnRef]);
+  }, [onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, trackFocusCalendarPrevMonth, trackFocusCalendarPrevYear]);
   const handleNextYearKeyDown = useCallback(e => {
     const {
       key,
@@ -245,9 +214,7 @@ const useKeyboardHandlers = _ref => {
       e.preventDefault();
 
       if (shiftKey) {
-        var _prevYearBtnRef$curre2, _prevYearBtnRef$curre3;
-
-        prevYearBtnRef === null || prevYearBtnRef === void 0 ? void 0 : (_prevYearBtnRef$curre2 = prevYearBtnRef.current) === null || _prevYearBtnRef$curre2 === void 0 ? void 0 : (_prevYearBtnRef$curre3 = _prevYearBtnRef$curre2.focus) === null || _prevYearBtnRef$curre3 === void 0 ? void 0 : _prevYearBtnRef$curre3.call(_prevYearBtnRef$curre2);
+        trackFocusCalendarPrevYear();
       }
 
       if (!shiftKey) tryToFocusDayRegion();
@@ -262,7 +229,7 @@ const useKeyboardHandlers = _ref => {
       onEndKeyDownInsideCalendar();
       e.preventDefault();
     }
-  }, [tryToFocusDayRegion, prevYearBtnRef, onHomeKeyDownInsideCalendar, onEndKeyDownInsideCalendar]);
+  }, [tryToFocusDayRegion, trackFocusCalendarPrevYear, onHomeKeyDownInsideCalendar, onEndKeyDownInsideCalendar]);
   return useMemo(() => ({
     handleDayOnKeyDown,
     handlePrevYearKeyDown,

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

@@ -1,9 +1,9 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useContext, useState, useCallback, useMemo } from 'react';
 import { usePopper } from 'react-popper';
 import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside.js';
 
+/* eslint-disable complexity */
 const usePopperTriggerLogic = _ref => {
   let {
     focusLogic,
@@ -12,16 +12,19 @@ const usePopperTriggerLogic = _ref => {
   } = _ref;
   const {
     focusedDay,
-    resetFocusedDayToStartDate,
-    tryToFocusCurrentlyDataIsFocusedDay
+    resetFocusedDayToStartDate
   } = focusLogic;
   const {
     props: {
       onPickerOpen,
       onPickerClose
     },
-    prevMonthBtnRef,
-    pickerButtonRef
+    pickerButtonRef,
+    trackFocusCalendarMetafocusedDay,
+    trackFocusCalendarPrevMonth,
+    trackFocusPicker,
+    latestInteractionRegion,
+    currFocusDescriber
   } = useContext(ControlledDateTimePickerContext);
   const [referenceElement, setReferenceElement] = useState(null);
   const [popperElement, setPopperElement] = useState(null);
@@ -37,29 +40,18 @@ const usePopperTriggerLogic = _ref => {
 
   const handleOnPickerOpen = useCallback(() => {
     onPickerOpen();
-    tryToFocusCurrentlyDataIsFocusedDay();
-  }, [onPickerOpen, tryToFocusCurrentlyDataIsFocusedDay]);
+  }, [onPickerOpen]);
   const openCalendar = useCallback(() => {
-    if (focusedDay) setTimeout(() => {
-      var _focusedDay$dayBtnRef, _focusedDay$dayBtnRef2, _focusedDay$dayBtnRef3;
-
-      return focusedDay === null || focusedDay === void 0 ? void 0 : (_focusedDay$dayBtnRef = focusedDay.dayBtnRef) === null || _focusedDay$dayBtnRef === void 0 ? void 0 : (_focusedDay$dayBtnRef2 = _focusedDay$dayBtnRef.current) === null || _focusedDay$dayBtnRef2 === void 0 ? void 0 : (_focusedDay$dayBtnRef3 = _focusedDay$dayBtnRef2.focus) === null || _focusedDay$dayBtnRef3 === void 0 ? void 0 : _focusedDay$dayBtnRef3.call(_focusedDay$dayBtnRef2);
-    }, 100);else setTimeout(() => {
-      var _prevMonthBtnRef$curr, _prevMonthBtnRef$curr2;
-
-      return prevMonthBtnRef === null || prevMonthBtnRef === void 0 ? void 0 : (_prevMonthBtnRef$curr = prevMonthBtnRef.current) === null || _prevMonthBtnRef$curr === void 0 ? void 0 : (_prevMonthBtnRef$curr2 = _prevMonthBtnRef$curr.focus) === null || _prevMonthBtnRef$curr2 === void 0 ? void 0 : _prevMonthBtnRef$curr2.call(_prevMonthBtnRef$curr);
-    }, 100);
+    if (focusedDay) trackFocusCalendarMetafocusedDay();else trackFocusCalendarPrevMonth();
     setShowCalendar(true);
     handleOnPickerOpen();
-  }, [focusedDay, handleOnPickerOpen, prevMonthBtnRef, setShowCalendar]);
+  }, [focusedDay, handleOnPickerOpen, setShowCalendar, trackFocusCalendarMetafocusedDay, trackFocusCalendarPrevMonth]);
   const closeCalendar = useCallback(() => {
-    var _pickerButtonRef$curr, _pickerButtonRef$curr2;
-
     setShowCalendar(false);
     onPickerClose();
     resetFocusedDayToStartDate();
-    pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr = pickerButtonRef.current) === null || _pickerButtonRef$curr === void 0 ? void 0 : (_pickerButtonRef$curr2 = _pickerButtonRef$curr.focus) === null || _pickerButtonRef$curr2 === void 0 ? void 0 : _pickerButtonRef$curr2.call(_pickerButtonRef$curr);
-  }, [setShowCalendar, onPickerClose, resetFocusedDayToStartDate, pickerButtonRef]);
+    trackFocusPicker();
+  }, [setShowCalendar, onPickerClose, resetFocusedDayToStartDate, trackFocusPicker]);
   const handleToggleCalendar = useCallback(() => {
     const isOpening = !showCalendar;
     if (isOpening) openCalendar();else closeCalendar();
@@ -67,23 +59,20 @@ const usePopperTriggerLogic = _ref => {
   const handleSetTriggerRef = useCallback(newRef => {
     pickerButtonRef.current = newRef;
     setReferenceElement(newRef);
-  }, [pickerButtonRef]);
+    if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'date-picker-icon') newRef?.focus();
+  }, [currFocusDescriber, latestInteractionRegion, pickerButtonRef]);
   const handleMenuWrapperKeyDown = useCallback(e => {
     const {
       key
     } = e;
 
     if (key === 'Escape') {
-      var _pickerButtonRef$curr3, _pickerButtonRef$curr4;
-
       closeCalendar();
-      pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr3 = pickerButtonRef.current) === null || _pickerButtonRef$curr3 === void 0 ? void 0 : (_pickerButtonRef$curr4 = _pickerButtonRef$curr3.focus) === null || _pickerButtonRef$curr4 === void 0 ? void 0 : _pickerButtonRef$curr4.call(_pickerButtonRef$curr3);
+      trackFocusPicker();
     }
-  }, [closeCalendar, pickerButtonRef]);
+  }, [closeCalendar, trackFocusPicker]);
   useOnClickOutside(popperElement, e => {
-    var _pickerButtonRef$curr5, _pickerButtonRef$curr6;
-
-    if (e.target instanceof Element && !(pickerButtonRef !== null && pickerButtonRef !== void 0 && (_pickerButtonRef$curr5 = pickerButtonRef.current) !== null && _pickerButtonRef$curr5 !== void 0 && (_pickerButtonRef$curr6 = _pickerButtonRef$curr5.contains) !== null && _pickerButtonRef$curr6 !== void 0 && _pickerButtonRef$curr6.call(_pickerButtonRef$curr5, e === null || e === void 0 ? void 0 : e.target))) closeCalendar();
+    if (e.target instanceof Element && !pickerButtonRef?.current?.contains?.(e?.target)) closeCalendar();
   });
   return useMemo(() => ({
     closeCalendar,