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

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

@@ -2,13 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var useCurrentDisplayedMonthYearLogic = require('./useCurrentDisplayedMonthYearLogic.js');
@@ -25,24 +24,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__default["default"](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
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const [showCalendar, setShowCalendar] = React.useState(false);
-  const setLatestInteractionRegionCalendarHead = React.useCallback(() => {
-    setLatestInteractionRegion('calendar-head');
-  }, [setLatestInteractionRegion]);
   const onPrevYearFocus = React.useCallback(() => {
-    setLatestInteractionRegionCalendarHead();
-  }, [setLatestInteractionRegionCalendarHead]);
+    trackFocusCalendarPrevYear();
+  }, [trackFocusCalendarPrevYear]);
   const onPrevMonthFocus = React.useCallback(() => {
-    setLatestInteractionRegionCalendarHead();
-  }, [setLatestInteractionRegionCalendarHead]);
+    trackFocusCalendarPrevMonth();
+  }, [trackFocusCalendarPrevMonth]);
   const onNextMonthFocus = React.useCallback(() => {
-    setLatestInteractionRegionCalendarHead();
-  }, [setLatestInteractionRegionCalendarHead]);
+    trackFocusCalendarNextMonth();
+  }, [trackFocusCalendarNextMonth]);
   const onNextYearFocus = React.useCallback(() => {
-    setLatestInteractionRegionCalendarHead();
-  }, [setLatestInteractionRegionCalendarHead]);
+    trackFocusCalendarNextYear();
+  }, [trackFocusCalendarNextYear]);
   const currentDisplayedMonthLogic = useCurrentDisplayedMonthYearLogic.useCurrentDisplayedMonthYearLogic();
   const focusLogic = useFocusLogic.useFocusLogic({
     currentDisplayedMonthLogic,

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

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var useGetMonthYearFromDateStringOrEmptyStartingMonth = require('../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js');
 var dateHelpers = require('../../../utils/dateHelpers.js');
 
+/* eslint-disable complexity */
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function sliceIntoChunks(arr, chunkSize) {
   const res = [];

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

@@ -2,36 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.find.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.find.js');
 var React = require('react');
-var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var dateHelpers = require('../../../utils/dateHelpers.js');
 var useGetStartingFocusedDay = require('../../../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
-  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const {
     daysArray
   } = currentDisplayedMonthLogic;
@@ -63,23 +44,6 @@ const useFocusLogic = _ref => {
     });
     return newFocusedDay;
   }, [daysArray, startFocusedDate, metadayToFocus]);
-  const tryToFocusCurrentlyDataIsFocusedDay = React.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]);
-  React.useLayoutEffect(() => {
-    if (showCalendar) tryToFocusCurrentlyDataIsFocusedDay(calendarDaysWrapperRef === null || calendarDaysWrapperRef === void 0 ? void 0 : calendarDaysWrapperRef.current);
-  }, [calendarDaysWrapperRef, focusedDay, showCalendar, tryToFocusCurrentlyDataIsFocusedDay]);
   const handleFocusMetaDay = React.useCallback(metaDayToFocus => {
     // if focusedDay is inside current daysArray we set Focused day
     const newFocusedMetaDay = daysArray.find(_ref5 => {
@@ -105,11 +69,10 @@ const useFocusLogic = _ref => {
   }, []);
   return React.useMemo(() => ({
     focusedDay,
-    tryToFocusCurrentlyDataIsFocusedDay,
     resetFocusedDayToStartDate,
     handleFocusMetaDay,
     handleFocusMetaDayByDay
-  }), [focusedDay, tryToFocusCurrentlyDataIsFocusedDay, resetFocusedDayToStartDate, handleFocusMetaDay, handleFocusMetaDayByDay]);
+  }), [focusedDay, resetFocusedDayToStartDate, handleFocusMetaDay, handleFocusMetaDayByDay]);
 };
 
 exports.useFocusLogic = useFocusLogic;

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

@@ -8,7 +8,6 @@ require('core-js/modules/esnext.iterator.find.js');
 var React = require('react');
 var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var dateHelpers = require('../../../utils/dateHelpers.js');
-var constants = require('../../../utils/constants.js');
 
 const useKeyboardHandlers = _ref => {
   let {
@@ -16,29 +15,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
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const {
     focusedDay,
     handleFocusMetaDay,
-    handleFocusMetaDayByDay,
-    tryToFocusCurrentlyDataIsFocusedDay
+    handleFocusMetaDayByDay //  tryToFocusCurrentlyDataIsFocusedDay
+
   } = focusLogic;
   const {
     daysArray,
@@ -46,8 +42,6 @@ const useKeyboardHandlers = _ref => {
     handleNextMonth
   } = currentDisplayedMonthLogic;
   const tryToFocusDayRegion = React.useCallback(() => {
-    setLatestInteractionRegion('calendar-days');
-
     if (!focusedDay) {
       const newFocusDay = daysArray.find(_ref2 => {
         let {
@@ -55,42 +49,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 = React.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 = React.useCallback(() => {
+    trackFocusCalendarPrevMonth();
+  }, [trackFocusCalendarPrevMonth]);
   const onEndKeyDownInsideCalendar = React.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 = React.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 = React.useCallback(e => {
     const {
       key
     } = e;
-    if (constants.homeEndKeys.includes(key)) e.preventDefault();
-    if (constants.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 = React.useCallback((e, metaDay) => {
     let newFocusedDayDate;
     const {
@@ -100,8 +84,8 @@ const useKeyboardHandlers = _ref => {
       key,
       shiftKey
     } = e;
-    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (constants.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 = dateHelpers.sumValuesToDate(day, {
       daysToSum: -7
     });
@@ -131,21 +115,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 = React.useCallback(e => {
     const {
       key,
@@ -156,13 +137,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();
       }
     }
 
@@ -175,7 +152,7 @@ const useKeyboardHandlers = _ref => {
       onEndKeyDownInsideCalendar();
       e.preventDefault();
     }
-  }, [nextMonthBtnRef, nextYearBtnRef, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar]);
+  }, [onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, trackFocusCalendarNextMonth, trackFocusCalendarNextYear]);
   const handlePrevMonthKeyDown = React.useCallback(e => {
     const {
       key,
@@ -186,16 +163,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();
       }
     }
 
@@ -208,7 +181,7 @@ const useKeyboardHandlers = _ref => {
       onEndKeyDownInsideCalendar();
       e.preventDefault();
     }
-  }, [currMeridiemBtnRef, isControllerOnly, isWithTimeWheelToo, nextMonthBtnRef, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, tryToFocusDayRegion]);
+  }, [isControllerOnly, isWithTimeWheelToo, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, trackFocusCalendarNextMonth, trackFocusTimewheelCurrMeridiem, tryToFocusDayRegion]);
   const handleNextMonthKeyDown = React.useCallback(e => {
     const {
       key,
@@ -219,13 +192,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();
       }
     }
 
@@ -238,7 +207,7 @@ const useKeyboardHandlers = _ref => {
       onEndKeyDownInsideCalendar();
       e.preventDefault();
     }
-  }, [onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, prevMonthBtnRef, prevYearBtnRef]);
+  }, [onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, trackFocusCalendarPrevMonth, trackFocusCalendarPrevYear]);
   const handleNextYearKeyDown = React.useCallback(e => {
     const {
       key,
@@ -249,9 +218,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();
@@ -266,7 +233,7 @@ const useKeyboardHandlers = _ref => {
       onEndKeyDownInsideCalendar();
       e.preventDefault();
     }
-  }, [tryToFocusDayRegion, prevYearBtnRef, onHomeKeyDownInsideCalendar, onEndKeyDownInsideCalendar]);
+  }, [tryToFocusDayRegion, trackFocusCalendarPrevYear, onHomeKeyDownInsideCalendar, onEndKeyDownInsideCalendar]);
   return React.useMemo(() => ({
     handleDayOnKeyDown,
     handlePrevYearKeyDown,

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactPopper = require('react-popper');
 var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');
 
+/* eslint-disable complexity */
 const usePopperTriggerLogic = _ref => {
   let {
     focusLogic,
@@ -16,16 +16,19 @@ const usePopperTriggerLogic = _ref => {
   } = _ref;
   const {
     focusedDay,
-    resetFocusedDayToStartDate,
-    tryToFocusCurrentlyDataIsFocusedDay
+    resetFocusedDayToStartDate
   } = focusLogic;
   const {
     props: {
       onPickerOpen,
       onPickerClose
     },
-    prevMonthBtnRef,
-    pickerButtonRef
+    pickerButtonRef,
+    trackFocusCalendarMetafocusedDay,
+    trackFocusCalendarPrevMonth,
+    trackFocusPicker,
+    latestInteractionRegion,
+    currFocusDescriber
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const [referenceElement, setReferenceElement] = React.useState(null);
   const [popperElement, setPopperElement] = React.useState(null);
@@ -41,29 +44,18 @@ const usePopperTriggerLogic = _ref => {
 
   const handleOnPickerOpen = React.useCallback(() => {
     onPickerOpen();
-    tryToFocusCurrentlyDataIsFocusedDay();
-  }, [onPickerOpen, tryToFocusCurrentlyDataIsFocusedDay]);
+  }, [onPickerOpen]);
   const openCalendar = React.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 = React.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 = React.useCallback(() => {
     const isOpening = !showCalendar;
     if (isOpening) openCalendar();else closeCalendar();
@@ -71,23 +63,20 @@ const usePopperTriggerLogic = _ref => {
   const handleSetTriggerRef = React.useCallback(newRef => {
     pickerButtonRef.current = newRef;
     setReferenceElement(newRef);
-  }, [pickerButtonRef]);
+    if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'date-picker-icon') newRef?.focus();
+  }, [currFocusDescriber, latestInteractionRegion, pickerButtonRef]);
   const handleMenuWrapperKeyDown = React.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.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 React.useMemo(() => ({
     closeCalendar,

package/cjs/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.js

@@ -27,8 +27,9 @@ const CalendarWithTimeWheelIconTrigger = () => {
     disabled
   } = React.useContext(CalendarWithTimeWheelContext.CalendarWithTimeWheelContext);
   return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](Styleds.StyledIconTriggerButton, {
-    "aria-label": "date time picker context menu trigger, ".concat(ariaCurrentValueForInputs),
+    "aria-label": `date time picker context menu trigger, ${ariaCurrentValueForInputs}`,
     buttonType: "icon",
+    type: "button",
     size: DSButton.BUTTON_SIZES.M,
     innerRef: handleSetTriggerRef,
     onClick: handleToggleCalendarWithTimeWheel,

package/cjs/date-time-picker/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactPopper = require('react-popper');
 var ControlledDateTimePickerTypes = require('../../../ControlledDateTimePickerTypes.js');
@@ -10,8 +9,8 @@ var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.
 var useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');
 var CalendarContext = require('../Calendar/CalendarContext.js');
 var TimeWheelContext = require('../TimeWheel/TimeWheelContext.js');
-var constants = require('../../../utils/constants.js');
 
+/* eslint-disable max-statements */
 const useConfigCalendarWithTimeWheelCTX = () => {
   const {
     pickerButtonRef,
@@ -21,15 +20,15 @@ const useConfigCalendarWithTimeWheelCTX = () => {
       onPickerClose,
       disabled
     },
-    hideDate,
-    hideTime,
-    monthInputRef,
-    hourInputRef,
     withAnyInputs,
     isWithTimeInputs,
-    meridiemInputRef,
-    yearInputRef,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    trackFocusFirstSegment,
+    trackFocusMeridiemInput,
+    trackFocusYearInput,
+    trackFocusPicker,
+    latestInteractionRegion,
+    currFocusDescriber
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const {
     handleToggleCalendar
@@ -39,24 +38,20 @@ const useConfigCalendarWithTimeWheelCTX = () => {
   } = React.useContext(TimeWheelContext.TimeWheelContext);
   const [showCalendarWithTimeWheel, setShowCalendarWithTimeWheel] = React.useState(false);
   const onHomeKeyDown = React.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 = React.useCallback(e => {
     const {
       key
     } = e;
-    if (constants.homeEndKeys.includes(key)) e.preventDefault();
-    if (constants.homeEndKeys.includes(key)) e.stopPropagation();
+    if (['Home', 'End'].includes(key)) e.preventDefault();
+    if (['Home', 'End'].includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
 
     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 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 trackFocusYearInput();
     }
-  }, [isWithTimeInputs, meridiemInputRef, onHomeKeyDown, withAnyInputs, yearInputRef]);
+  }, [isWithTimeInputs, onHomeKeyDown, trackFocusMeridiemInput, trackFocusYearInput, withAnyInputs]);
   const [referenceElement, setReferenceElement] = React.useState(null);
   const [popperElement, setPopperElement] = React.useState(null);
   const [arrowElement, setArrowElement] = React.useState(null);
@@ -84,26 +79,23 @@ const useConfigCalendarWithTimeWheelCTX = () => {
     if (!showCalendarWithTimeWheel) openCalendar();else closeCalendar();
   }, [closeCalendar, openCalendar, showCalendarWithTimeWheel]);
   useOnClickOutside.useOnClickOutside(popperElement, e => {
-    var _pickerButtonRef$curr, _pickerButtonRef$curr2;
-
-    if (e.target instanceof Element && !(pickerButtonRef !== null && pickerButtonRef !== void 0 && (_pickerButtonRef$curr = pickerButtonRef.current) !== null && _pickerButtonRef$curr !== void 0 && (_pickerButtonRef$curr2 = _pickerButtonRef$curr.contains) !== null && _pickerButtonRef$curr2 !== void 0 && _pickerButtonRef$curr2.call(_pickerButtonRef$curr, e === null || e === void 0 ? void 0 : e.target))) closeCalendar();
+    if (e.target instanceof Element && !pickerButtonRef?.current?.contains?.(e?.target)) closeCalendar();
   });
   const handleSetTriggerRef = React.useCallback(newRef => {
     pickerButtonRef.current = newRef;
     setReferenceElement(newRef);
-  }, [pickerButtonRef]);
+    if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'datetime-picker-icon') newRef?.focus();
+  }, [currFocusDescriber, latestInteractionRegion, pickerButtonRef]);
   const handleMenuWrapperKeyDown = React.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]);
   const isControllerOnly = React.useMemo(() => type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY, [type]);
   return React.useMemo(() => ({
     showCalendarWithTimeWheel,