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

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
-var constants = require('../../../utils/constants.js');
 
 /* eslint-disable @typescript-eslint/indent */
 const useKeyboardHandlers = _ref => {
@@ -24,59 +23,42 @@ const useKeyboardHandlers = _ref => {
     isWithDateInputs,
     isWithCalendarToo,
     isControllerOnly,
-    hideDate,
-    hideTime,
-    monthInputRef,
-    hourInputRef,
-    meridiemInputRef,
-    yearInputRef,
-    prevMonthBtnRef,
-    prevHourBtnRef,
-    currHourBtnRef,
-    nextHourBtnRef,
-    prevMinutesBtnRef,
-    currMinutesBtnRef,
-    nextMinutesBtnRef,
-    prevMeridiemBtnRef,
-    currMeridiemBtnRef,
-    nextMeridiemBtnRef
+    trackFocusCalendarPrevMonth,
+    trackFocusTimewheelCurrHour,
+    trackFocusTimewheelCurrMinute,
+    trackFocusTimewheelCurrMeridiem,
+    trackFocusFirstSegment,
+    trackFocusMeridiemInput,
+    trackFocusYearInput
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const onHomeKeyDownInsideTimeWheel = React.useCallback(() => {
-    var _prevMonthBtnRef$curr, _prevMonthBtnRef$curr2, _currHourBtnRef$curre, _currHourBtnRef$curre2;
-
-    if (isWithCalendarToo) 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);else currHourBtnRef === null || currHourBtnRef === void 0 ? void 0 : (_currHourBtnRef$curre = currHourBtnRef.current) === null || _currHourBtnRef$curre === void 0 ? void 0 : (_currHourBtnRef$curre2 = _currHourBtnRef$curre.focus) === null || _currHourBtnRef$curre2 === void 0 ? void 0 : _currHourBtnRef$curre2.call(_currHourBtnRef$curre);
-  }, [currHourBtnRef, isWithCalendarToo, prevMonthBtnRef]);
+    if (isWithCalendarToo) trackFocusCalendarPrevMonth();else trackFocusTimewheelCurrHour();
+  }, [isWithCalendarToo, trackFocusCalendarPrevMonth, trackFocusTimewheelCurrHour]);
   const onEndKeyDownInsideTimeWheel = React.useCallback(() => {
-    var _currMeridiemBtnRef$c, _currMeridiemBtnRef$c2;
-
-    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);
-  }, [currMeridiemBtnRef]);
+    trackFocusTimewheelCurrMeridiem();
+  }, [trackFocusTimewheelCurrMeridiem]);
   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 handleCurrHourOnKeyDown = React.useCallback(e => {
     const {
       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();
     let didTriggerHourChange = false;
 
     if (key === 'ArrowUp') {
@@ -90,33 +72,25 @@ const useKeyboardHandlers = _ref => {
     }
 
     if (key === 'ArrowRight') {
-      var _currMinutesBtnRef$cu, _currMinutesBtnRef$cu2;
-
-      currMinutesBtnRef === null || currMinutesBtnRef === void 0 ? void 0 : (_currMinutesBtnRef$cu = currMinutesBtnRef.current) === null || _currMinutesBtnRef$cu === void 0 ? void 0 : (_currMinutesBtnRef$cu2 = _currMinutesBtnRef$cu.focus) === null || _currMinutesBtnRef$cu2 === void 0 ? void 0 : _currMinutesBtnRef$cu2.call(_currMinutesBtnRef$cu);
+      trackFocusTimewheelCurrMinute();
     }
 
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel(); // ensure the focus is in the correct button after up/down arrow
 
-    if (didTriggerHourChange) setTimeout(() => {
-      var _currHourBtnRef$curre3, _currHourBtnRef$curre4;
-
-      return currHourBtnRef === null || currHourBtnRef === void 0 ? void 0 : (_currHourBtnRef$curre3 = currHourBtnRef.current) === null || _currHourBtnRef$curre3 === void 0 ? void 0 : (_currHourBtnRef$curre4 = _currHourBtnRef$curre3.focus) === null || _currHourBtnRef$curre4 === void 0 ? void 0 : _currHourBtnRef$curre4.call(_currHourBtnRef$curre3);
-    }); // TAB CYCLE IMPLEMENTATION
+    if (didTriggerHourChange) trackFocusTimewheelCurrHour(); // TAB CYCLE IMPLEMENTATION
 
     if (!isControllerOnly) if (key === 'Tab' && shiftKey && !isWithCalendarToo) {
-      var _currMeridiemBtnRef$c3, _currMeridiemBtnRef$c4;
-
       e.preventDefault();
-      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);
+      trackFocusTimewheelCurrMeridiem();
     }
-  }, [currHourBtnRef, currMeridiemBtnRef, currMinutesBtnRef, handleNextHour, handlePrevHour, isControllerOnly, isWithCalendarToo, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel]);
+  }, [handleNextHour, handlePrevHour, isControllerOnly, isWithCalendarToo, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel, trackFocusTimewheelCurrHour, trackFocusTimewheelCurrMeridiem, trackFocusTimewheelCurrMinute]);
   const handleCurrMinutesOnKeyDown = React.useCallback(e => {
     const {
       key
     } = 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();
     let didTriggerMinuteChange = false;
 
     if (key === 'ArrowUp') {
@@ -130,33 +104,25 @@ const useKeyboardHandlers = _ref => {
     }
 
     if (key === 'ArrowLeft') {
-      var _currHourBtnRef$curre5, _currHourBtnRef$curre6;
-
-      currHourBtnRef === null || currHourBtnRef === void 0 ? void 0 : (_currHourBtnRef$curre5 = currHourBtnRef.current) === null || _currHourBtnRef$curre5 === void 0 ? void 0 : (_currHourBtnRef$curre6 = _currHourBtnRef$curre5.focus) === null || _currHourBtnRef$curre6 === void 0 ? void 0 : _currHourBtnRef$curre6.call(_currHourBtnRef$curre5);
+      trackFocusTimewheelCurrHour();
     }
 
     if (key === 'ArrowRight') {
-      var _currMeridiemBtnRef$c5, _currMeridiemBtnRef$c6;
-
-      currMeridiemBtnRef === null || currMeridiemBtnRef === void 0 ? void 0 : (_currMeridiemBtnRef$c5 = currMeridiemBtnRef.current) === null || _currMeridiemBtnRef$c5 === void 0 ? void 0 : (_currMeridiemBtnRef$c6 = _currMeridiemBtnRef$c5.focus) === null || _currMeridiemBtnRef$c6 === void 0 ? void 0 : _currMeridiemBtnRef$c6.call(_currMeridiemBtnRef$c5);
+      trackFocusTimewheelCurrMeridiem();
     }
 
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel(); // ensure the focus is in the correct button after up/down arrow
 
-    if (didTriggerMinuteChange) setTimeout(() => {
-      var _currMinutesBtnRef$cu3, _currMinutesBtnRef$cu4;
-
-      return currMinutesBtnRef === null || currMinutesBtnRef === void 0 ? void 0 : (_currMinutesBtnRef$cu3 = currMinutesBtnRef.current) === null || _currMinutesBtnRef$cu3 === void 0 ? void 0 : (_currMinutesBtnRef$cu4 = _currMinutesBtnRef$cu3.focus) === null || _currMinutesBtnRef$cu4 === void 0 ? void 0 : _currMinutesBtnRef$cu4.call(_currMinutesBtnRef$cu3);
-    });
-  }, [onHomeKeyDownInsideTimeWheel, onEndKeyDownInsideTimeWheel, handlePrevMinute, handleNextMinute, currHourBtnRef, currMeridiemBtnRef, currMinutesBtnRef]);
+    if (didTriggerMinuteChange) trackFocusTimewheelCurrMinute();
+  }, [onHomeKeyDownInsideTimeWheel, onEndKeyDownInsideTimeWheel, handlePrevMinute, handleNextMinute, trackFocusTimewheelCurrHour, trackFocusTimewheelCurrMeridiem, trackFocusTimewheelCurrMinute]);
   const handleCurrMeridiemOnKeyDown = React.useCallback(e => {
     const {
       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();
     let didTriggerMeridiemChange = false;
 
     if (key === 'ArrowUp') {
@@ -170,185 +136,25 @@ const useKeyboardHandlers = _ref => {
     }
 
     if (key === 'ArrowLeft') {
-      var _currMinutesBtnRef$cu5, _currMinutesBtnRef$cu6;
-
-      // currSecondsBtnRef?.current?.focus?.();
-      currMinutesBtnRef === null || currMinutesBtnRef === void 0 ? void 0 : (_currMinutesBtnRef$cu5 = currMinutesBtnRef.current) === null || _currMinutesBtnRef$cu5 === void 0 ? void 0 : (_currMinutesBtnRef$cu6 = _currMinutesBtnRef$cu5.focus) === null || _currMinutesBtnRef$cu6 === void 0 ? void 0 : _currMinutesBtnRef$cu6.call(_currMinutesBtnRef$cu5);
+      trackFocusTimewheelCurrMinute();
     }
 
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel(); // ensure the focus is in the correct button after up/down arrow
 
-    if (didTriggerMeridiemChange) setTimeout(() => {
-      var _currMeridiemBtnRef$c7, _currMeridiemBtnRef$c8;
-
-      return currMeridiemBtnRef === null || currMeridiemBtnRef === void 0 ? void 0 : (_currMeridiemBtnRef$c7 = currMeridiemBtnRef.current) === null || _currMeridiemBtnRef$c7 === void 0 ? void 0 : (_currMeridiemBtnRef$c8 = _currMeridiemBtnRef$c7.focus) === null || _currMeridiemBtnRef$c8 === void 0 ? void 0 : _currMeridiemBtnRef$c8.call(_currMeridiemBtnRef$c7);
-    }); // TAB CYCLE IMPLEMENTATION
+    if (didTriggerMeridiemChange) trackFocusTimewheelCurrMeridiem(); // TAB CYCLE IMPLEMENTATION
 
     if (!isControllerOnly) if (key === 'Tab' && !shiftKey) {
-      var _prevMonthBtnRef$curr3, _prevMonthBtnRef$curr4, _currHourBtnRef$curre7, _currHourBtnRef$curre8;
-
       e.preventDefault();
-      if (isWithCalendarToo) 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);else currHourBtnRef === null || currHourBtnRef === void 0 ? void 0 : (_currHourBtnRef$curre7 = currHourBtnRef.current) === null || _currHourBtnRef$curre7 === void 0 ? void 0 : (_currHourBtnRef$curre8 = _currHourBtnRef$curre7.focus) === null || _currHourBtnRef$curre8 === void 0 ? void 0 : _currHourBtnRef$curre8.call(_currHourBtnRef$curre7);
-    }
-  }, [currHourBtnRef, currMeridiemBtnRef, currMinutesBtnRef, handleTimeWheelBtnChangeMeridiem, isControllerOnly, isWithCalendarToo, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel, prevMonthBtnRef]);
-  const handlePrevHourBtnOnKeyDown = React.useCallback(e => {
-    const {
-      key
-    } = e;
-    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
-
-    if (key === 'ArrowRight') {
-      var _prevMinutesBtnRef$cu, _prevMinutesBtnRef$cu2;
-
-      prevMinutesBtnRef === null || prevMinutesBtnRef === void 0 ? void 0 : (_prevMinutesBtnRef$cu = prevMinutesBtnRef.current) === null || _prevMinutesBtnRef$cu === void 0 ? void 0 : (_prevMinutesBtnRef$cu2 = _prevMinutesBtnRef$cu.focus) === null || _prevMinutesBtnRef$cu2 === void 0 ? void 0 : _prevMinutesBtnRef$cu2.call(_prevMinutesBtnRef$cu);
-    }
-
-    if (key === 'ArrowDown') {
-      var _currHourBtnRef$curre9, _currHourBtnRef$curre10;
-
-      currHourBtnRef === null || currHourBtnRef === void 0 ? void 0 : (_currHourBtnRef$curre9 = currHourBtnRef.current) === null || _currHourBtnRef$curre9 === void 0 ? void 0 : (_currHourBtnRef$curre10 = _currHourBtnRef$curre9.focus) === null || _currHourBtnRef$curre10 === void 0 ? void 0 : _currHourBtnRef$curre10.call(_currHourBtnRef$curre9);
-    }
-
-    if (key === 'Home') onHomeKeyDownInsideTimeWheel();
-    if (key === 'End') onEndKeyDownInsideTimeWheel();
-  }, [currHourBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel, prevMinutesBtnRef]);
-  const handlePrevMinuteBtnOnKeyDown = React.useCallback(e => {
-    const {
-      key
-    } = e;
-    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
-
-    if (key === 'ArrowRight') {
-      var _prevMeridiemBtnRef$c, _prevMeridiemBtnRef$c2;
-
-      // prevSecondsBtnRef?.current?.focus?.();
-      prevMeridiemBtnRef === null || prevMeridiemBtnRef === void 0 ? void 0 : (_prevMeridiemBtnRef$c = prevMeridiemBtnRef.current) === null || _prevMeridiemBtnRef$c === void 0 ? void 0 : (_prevMeridiemBtnRef$c2 = _prevMeridiemBtnRef$c.focus) === null || _prevMeridiemBtnRef$c2 === void 0 ? void 0 : _prevMeridiemBtnRef$c2.call(_prevMeridiemBtnRef$c);
-    }
-
-    if (key === 'ArrowLeft') {
-      var _prevHourBtnRef$curre, _prevHourBtnRef$curre2;
-
-      prevHourBtnRef === null || prevHourBtnRef === void 0 ? void 0 : (_prevHourBtnRef$curre = prevHourBtnRef.current) === null || _prevHourBtnRef$curre === void 0 ? void 0 : (_prevHourBtnRef$curre2 = _prevHourBtnRef$curre.focus) === null || _prevHourBtnRef$curre2 === void 0 ? void 0 : _prevHourBtnRef$curre2.call(_prevHourBtnRef$curre);
-    }
-
-    if (key === 'ArrowDown') {
-      var _currMinutesBtnRef$cu7, _currMinutesBtnRef$cu8;
-
-      currMinutesBtnRef === null || currMinutesBtnRef === void 0 ? void 0 : (_currMinutesBtnRef$cu7 = currMinutesBtnRef.current) === null || _currMinutesBtnRef$cu7 === void 0 ? void 0 : (_currMinutesBtnRef$cu8 = _currMinutesBtnRef$cu7.focus) === null || _currMinutesBtnRef$cu8 === void 0 ? void 0 : _currMinutesBtnRef$cu8.call(_currMinutesBtnRef$cu7);
-    }
-
-    if (key === 'Home') onHomeKeyDownInsideTimeWheel();
-    if (key === 'End') onEndKeyDownInsideTimeWheel();
-  }, [currMinutesBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel, prevHourBtnRef, prevMeridiemBtnRef]);
-  const handlePrevMeridiemBtnOnKeyDown = React.useCallback(e => {
-    const {
-      key
-    } = e;
-    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
-
-    if (key === 'ArrowLeft') {
-      var _prevMinutesBtnRef$cu3, _prevMinutesBtnRef$cu4;
-
-      prevMinutesBtnRef === null || prevMinutesBtnRef === void 0 ? void 0 : (_prevMinutesBtnRef$cu3 = prevMinutesBtnRef.current) === null || _prevMinutesBtnRef$cu3 === void 0 ? void 0 : (_prevMinutesBtnRef$cu4 = _prevMinutesBtnRef$cu3.focus) === null || _prevMinutesBtnRef$cu4 === void 0 ? void 0 : _prevMinutesBtnRef$cu4.call(_prevMinutesBtnRef$cu3);
+      if (isWithCalendarToo) trackFocusCalendarPrevMonth();else trackFocusTimewheelCurrHour();
     }
-
-    if (key === 'ArrowDown') {
-      var _currMeridiemBtnRef$c9, _currMeridiemBtnRef$c10;
-
-      currMeridiemBtnRef === null || currMeridiemBtnRef === void 0 ? void 0 : (_currMeridiemBtnRef$c9 = currMeridiemBtnRef.current) === null || _currMeridiemBtnRef$c9 === void 0 ? void 0 : (_currMeridiemBtnRef$c10 = _currMeridiemBtnRef$c9.focus) === null || _currMeridiemBtnRef$c10 === void 0 ? void 0 : _currMeridiemBtnRef$c10.call(_currMeridiemBtnRef$c9);
-    }
-
-    if (key === 'Home') onHomeKeyDownInsideTimeWheel();
-    if (key === 'End') onEndKeyDownInsideTimeWheel();
-  }, [currMeridiemBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel, prevMinutesBtnRef]);
-  const handleNextHourBtnOnKeyDown = React.useCallback(e => {
-    const {
-      key
-    } = e;
-    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
-
-    if (key === 'ArrowRight') {
-      var _nextMinutesBtnRef$cu, _nextMinutesBtnRef$cu2;
-
-      nextMinutesBtnRef === null || nextMinutesBtnRef === void 0 ? void 0 : (_nextMinutesBtnRef$cu = nextMinutesBtnRef.current) === null || _nextMinutesBtnRef$cu === void 0 ? void 0 : (_nextMinutesBtnRef$cu2 = _nextMinutesBtnRef$cu.focus) === null || _nextMinutesBtnRef$cu2 === void 0 ? void 0 : _nextMinutesBtnRef$cu2.call(_nextMinutesBtnRef$cu);
-    }
-
-    if (key === 'ArrowUp') {
-      var _currHourBtnRef$curre11, _currHourBtnRef$curre12;
-
-      currHourBtnRef === null || currHourBtnRef === void 0 ? void 0 : (_currHourBtnRef$curre11 = currHourBtnRef.current) === null || _currHourBtnRef$curre11 === void 0 ? void 0 : (_currHourBtnRef$curre12 = _currHourBtnRef$curre11.focus) === null || _currHourBtnRef$curre12 === void 0 ? void 0 : _currHourBtnRef$curre12.call(_currHourBtnRef$curre11);
-    }
-
-    if (key === 'Home') onHomeKeyDownInsideTimeWheel();
-    if (key === 'End') onEndKeyDownInsideTimeWheel();
-  }, [currHourBtnRef, nextMinutesBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel]);
-  const handleNextMinuteBtnOnKeyDown = React.useCallback(e => {
-    const {
-      key
-    } = e;
-    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
-
-    if (key === 'ArrowRight') {
-      var _nextMeridiemBtnRef$c, _nextMeridiemBtnRef$c2;
-
-      nextMeridiemBtnRef === null || nextMeridiemBtnRef === void 0 ? void 0 : (_nextMeridiemBtnRef$c = nextMeridiemBtnRef.current) === null || _nextMeridiemBtnRef$c === void 0 ? void 0 : (_nextMeridiemBtnRef$c2 = _nextMeridiemBtnRef$c.focus) === null || _nextMeridiemBtnRef$c2 === void 0 ? void 0 : _nextMeridiemBtnRef$c2.call(_nextMeridiemBtnRef$c);
-    }
-
-    if (key === 'ArrowLeft') {
-      var _nextHourBtnRef$curre, _nextHourBtnRef$curre2;
-
-      nextHourBtnRef === null || nextHourBtnRef === void 0 ? void 0 : (_nextHourBtnRef$curre = nextHourBtnRef.current) === null || _nextHourBtnRef$curre === void 0 ? void 0 : (_nextHourBtnRef$curre2 = _nextHourBtnRef$curre.focus) === null || _nextHourBtnRef$curre2 === void 0 ? void 0 : _nextHourBtnRef$curre2.call(_nextHourBtnRef$curre);
-    }
-
-    if (key === 'ArrowUp') {
-      var _currMinutesBtnRef$cu9, _currMinutesBtnRef$cu10;
-
-      currMinutesBtnRef === null || currMinutesBtnRef === void 0 ? void 0 : (_currMinutesBtnRef$cu9 = currMinutesBtnRef.current) === null || _currMinutesBtnRef$cu9 === void 0 ? void 0 : (_currMinutesBtnRef$cu10 = _currMinutesBtnRef$cu9.focus) === null || _currMinutesBtnRef$cu10 === void 0 ? void 0 : _currMinutesBtnRef$cu10.call(_currMinutesBtnRef$cu9);
-    }
-
-    if (key === 'Home') onHomeKeyDownInsideTimeWheel();
-    if (key === 'End') onEndKeyDownInsideTimeWheel();
-  }, [currMinutesBtnRef, nextHourBtnRef, nextMeridiemBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel]);
-  const handleNextMeridiemBtnOnKeyDown = React.useCallback(e => {
-    const {
-      key
-    } = e;
-    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
-
-    if (key === 'ArrowLeft') {
-      var _nextMinutesBtnRef$cu3, _nextMinutesBtnRef$cu4;
-
-      nextMinutesBtnRef === null || nextMinutesBtnRef === void 0 ? void 0 : (_nextMinutesBtnRef$cu3 = nextMinutesBtnRef.current) === null || _nextMinutesBtnRef$cu3 === void 0 ? void 0 : (_nextMinutesBtnRef$cu4 = _nextMinutesBtnRef$cu3.focus) === null || _nextMinutesBtnRef$cu4 === void 0 ? void 0 : _nextMinutesBtnRef$cu4.call(_nextMinutesBtnRef$cu3);
-    }
-
-    if (key === 'ArrowUp') {
-      var _currMeridiemBtnRef$c11, _currMeridiemBtnRef$c12;
-
-      currMeridiemBtnRef === null || currMeridiemBtnRef === void 0 ? void 0 : (_currMeridiemBtnRef$c11 = currMeridiemBtnRef.current) === null || _currMeridiemBtnRef$c11 === void 0 ? void 0 : (_currMeridiemBtnRef$c12 = _currMeridiemBtnRef$c11.focus) === null || _currMeridiemBtnRef$c12 === void 0 ? void 0 : _currMeridiemBtnRef$c12.call(_currMeridiemBtnRef$c11);
-    }
-
-    if (key === 'Home') onHomeKeyDownInsideTimeWheel();
-    if (key === 'End') onEndKeyDownInsideTimeWheel();
-  }, [currMeridiemBtnRef, nextMinutesBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel]);
+  }, [handleTimeWheelBtnChangeMeridiem, isControllerOnly, isWithCalendarToo, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel, trackFocusCalendarPrevMonth, trackFocusTimewheelCurrHour, trackFocusTimewheelCurrMeridiem, trackFocusTimewheelCurrMinute]);
   return React.useMemo(() => ({
-    handlePrevHourBtnOnKeyDown,
     handleCurrHourOnKeyDown,
-    handleNextHourBtnOnKeyDown,
-    handlePrevMinuteBtnOnKeyDown,
     handleCurrMinutesOnKeyDown,
-    handleNextMinuteBtnOnKeyDown,
-    handlePrevMeridiemBtnOnKeyDown,
     handleCurrMeridiemOnKeyDown,
-    handleNextMeridiemBtnOnKeyDown,
     handlePickerIconKeyDown
-  }), [handleCurrHourOnKeyDown, handleCurrMeridiemOnKeyDown, handleCurrMinutesOnKeyDown, handleNextHourBtnOnKeyDown, handleNextMeridiemBtnOnKeyDown, handleNextMinuteBtnOnKeyDown, handlePrevHourBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, handlePickerIconKeyDown]);
+  }), [handleCurrHourOnKeyDown, handleCurrMeridiemOnKeyDown, handleCurrMinutesOnKeyDown, handlePickerIconKeyDown]);
 };
 
 exports.useKeyboardHandlers = useKeyboardHandlers;

package/cjs/date-time-picker/parts/Pickers/TimeWheel/usePopperTriggerLogic.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 ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
@@ -15,8 +14,11 @@ const usePopperTriggerLogic = () => {
       onPickerClose,
       onPickerOpen
     },
-    currHourBtnRef,
-    isWithCalendarToo
+    isWithCalendarToo,
+    trackFocusTimewheelCurrHour,
+    trackFocusPicker,
+    latestInteractionRegion,
+    currFocusDescriber
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const [showTimePicker, setShowTimePicker] = React.useState(false);
   const [referenceElement, setReferenceElement] = React.useState(null);
@@ -38,37 +40,30 @@ const usePopperTriggerLogic = () => {
     setShowTimePicker(oldShowCalendar => {
       if (!oldShowCalendar) {
         onPickerOpen();
-        if (!isWithCalendarToo) setTimeout(() => {
-          var _currHourBtnRef$curre, _currHourBtnRef$curre2;
-
-          return currHourBtnRef === null || currHourBtnRef === void 0 ? void 0 : (_currHourBtnRef$curre = currHourBtnRef.current) === null || _currHourBtnRef$curre === void 0 ? void 0 : (_currHourBtnRef$curre2 = _currHourBtnRef$curre.focus) === null || _currHourBtnRef$curre2 === void 0 ? void 0 : _currHourBtnRef$curre2.call(_currHourBtnRef$curre);
-        });
+        if (!isWithCalendarToo) trackFocusTimewheelCurrHour();
       } else onPickerClose();
 
       return !oldShowCalendar;
     });
-  }, [currHourBtnRef, isWithCalendarToo, onPickerClose, onPickerOpen]);
+  }, [isWithCalendarToo, onPickerClose, onPickerOpen, trackFocusTimewheelCurrHour]);
   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))) closeTimePicker();
+    if (e.target instanceof Element && !pickerButtonRef?.current?.contains?.(e?.target)) closeTimePicker();
   });
   const handleSetTriggerRef = React.useCallback(newRef => {
     pickerButtonRef.current = newRef;
     setReferenceElement(newRef);
-  }, [pickerButtonRef]);
+    if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'time-picker-icon') newRef?.focus();
+  }, [currFocusDescriber, latestInteractionRegion, pickerButtonRef]);
   const handleMenuWrapperKeyDown = React.useCallback(e => {
     const {
       key
     } = e;
 
     if (key === 'Escape') {
-      var _pickerButtonRef$curr3, _pickerButtonRef$curr4;
-
       closeTimePicker();
-      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();
     }
-  }, [closeTimePicker, pickerButtonRef]);
+  }, [closeTimePicker, trackFocusPicker]);
   return React.useMemo(() => ({
     showTimePicker,
     setShowTimePicker,

package/cjs/date-time-picker/parts/Styleds.js

@@ -26,7 +26,7 @@ const Styled2DigitsInput = /*#__PURE__*/styled__default["default"](ResettedInput
   let {
     disabled
   } = _ref;
-  return disabled ? "color: #616b7f;" : "";
+  return disabled ? `color: #616b7f;` : ``;
 });
 const StyledMin4DigitsInput = /*#__PURE__*/styled__default["default"](ResettedInput).withConfig({
   componentId: "sc-2wbvze-4"
@@ -34,7 +34,7 @@ const StyledMin4DigitsInput = /*#__PURE__*/styled__default["default"](ResettedIn
   let {
     disabled
   } = _ref2;
-  return disabled ? "color: #616b7f;" : "";
+  return disabled ? `color: #616b7f;` : ``;
 });
 const StyledInputsWrapperGrid = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-2wbvze-5"
@@ -42,7 +42,11 @@ const StyledInputsWrapperGrid = /*#__PURE__*/styled__default["default"](dsGrid.G
   let {
     isControllerOnly
   } = _ref3;
-  return isControllerOnly ? "" : "\n  height: 28px;    \n  border-width: 1px;\n  border-style: solid;\n  ";
+  return isControllerOnly ? `` : `
+  height: 28px;    
+  border-width: 1px;
+  border-style: solid;
+  `;
 }, _ref4 => {
   let {
     theme,
@@ -67,7 +71,7 @@ const StyledInputsWrapperGrid = /*#__PURE__*/styled__default["default"](dsGrid.G
     theme,
     disabled
   } = _ref7;
-  return disabled ? "background-color: ".concat(theme.colors.neutral[100], ";") : "";
+  return disabled ? `background-color: ${theme.colors.neutral[100]};` : ``;
 });
 const StyledDateInputsWrapperGrid = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-2wbvze-6"
@@ -81,14 +85,16 @@ const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled__default["default"](ds
   let {
     isControllerOnly
   } = _ref8;
-  return isControllerOnly ? "" : "height: 26px;";
+  return isControllerOnly ? `` : `height: 26px;`;
 }, _ref9 => {
   let {
     theme,
     isControllerOnly,
     hasError
   } = _ref9;
-  return isControllerOnly ? "" : "\n    border-left: 1px solid ".concat(hasError ? theme.colors.danger[900] : theme.colors.neutral[200], "\n    ");
+  return isControllerOnly ? `` : `
+    border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[200]}
+    `;
 });
 const StyledFocusWithIn = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-2wbvze-9"

package/cjs/date-time-picker/parts/TimeInputs/HHInput.js

@@ -30,7 +30,8 @@ const HHInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     placeholder,
     ariaCurrentValueForInputs,
     contextRef,
-    autoFocusHourInput
+    autoFocusHourInput,
+    isFocused
   } = _ref;
   const validateOnChange = React.useCallback(e => {
     if (isInvalidHour(e.target.value)) {
@@ -47,9 +48,12 @@ const HHInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     onFocus: onFocus,
     onKeyDown: onKeyDown,
     value: value,
-    ref: contextRef,
+    ref: DomElem => {
+      contextRef.current = DomElem;
+      if (isFocused) DomElem?.focus?.();
+    },
     placeholder: placeholder,
-    "aria-label": "hours input field ".concat(ariaCurrentValueForInputs),
+    "aria-label": `hours input field ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR,
     disabled: disabled,
     "aria-disabled": disabled

package/cjs/date-time-picker/parts/TimeInputs/MeridiemInput.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 Styleds = require('../Styleds.js');
 var ControlledDateTimePickerDatatestid = require('../../ControlledDateTimePickerDatatestid.js');
@@ -33,12 +32,11 @@ const MeridiemInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     disabled,
     placeholder,
     ariaCurrentValueForInputs,
-    contextRef
+    contextRef,
+    isFocused
   } = _ref;
   const validateOnChange = React.useCallback(e => {
-    var _e$target;
-
-    if (isInvalidMeridiem(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+    if (isInvalidMeridiem(e?.target?.value)) {
       e.preventDefault();
       return;
     }
@@ -51,9 +49,12 @@ const MeridiemInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     onFocus: onFocus,
     onKeyDown: onKeyDown,
     value: value,
-    ref: contextRef,
+    ref: DomElem => {
+      contextRef.current = DomElem;
+      if (isFocused) DomElem?.focus?.();
+    },
     placeholder: placeholder,
-    "aria-label": "meridiem input field ".concat(ariaCurrentValueForInputs),
+    "aria-label": `meridiem input field ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM,
     disabled: disabled,
     "aria-disabled": disabled

package/cjs/date-time-picker/parts/TimeInputs/MinutesInput.js

@@ -29,12 +29,11 @@ const MinutesInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     disabled,
     placeholder,
     ariaCurrentValueForInputs,
-    contextRef
+    contextRef,
+    isFocused
   } = _ref;
   const validateOnChange = React.useCallback(e => {
-    var _e$target;
-
-    if (isInvalidMinute(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+    if (isInvalidMinute(e?.target?.value)) {
       e.preventDefault();
       return;
     }
@@ -47,9 +46,12 @@ const MinutesInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     onFocus: onFocus,
     onKeyDown: onKeyDown,
     value: value,
-    ref: contextRef,
+    ref: DomElem => {
+      contextRef.current = DomElem;
+      if (isFocused) DomElem?.focus?.();
+    },
     placeholder: placeholder,
-    "aria-label": "minutes input field ".concat(ariaCurrentValueForInputs),
+    "aria-label": `minutes input field ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE,
     disabled: disabled,
     "aria-disabled": disabled

package/cjs/date-time-picker/parts/TimeInputs/TimeInputs.js

@@ -43,7 +43,9 @@ const TimeInputs = () => {
     hourInputRef,
     minutesInputRef,
     meridiemInputRef,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    latestInteractionRegion,
+    currFocusDescriber
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: [config.fixedValues.smallInputWidth, config.fixedValues.separatorWidth, config.fixedValues.smallInputWidth, config.fixedValues.separatorWidth, config.fixedValues.smallInputWidth]
@@ -57,29 +59,32 @@ const TimeInputs = () => {
     placeholder: "HH",
     ariaCurrentValueForInputs: ariaCurrentValueForInputs,
     autoFocusHourInput: autoFocusHourInput,
-    disabled: disabled
+    disabled: disabled,
+    isFocused: latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'hour-input'
   })), _StyledColonSeparator || (_StyledColonSeparator = /*#__PURE__*/_jsx__default["default"](Styleds.StyledColonSeparator, {
     alignItems: "center"
   }, void 0, ":")), /*#__PURE__*/_jsx__default["default"](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default["default"](MinutesInput.MinutesInput, {
     value: minutes,
     onChange: onMinutesChange,
     onBlur: onMinutesBlur,
-    onFocus: onMeridiemFocus,
+    onFocus: onMinutesFocus,
     onKeyDown: onMinutesKeyDown,
     contextRef: minutesInputRef,
     placeholder: "MM",
     ariaCurrentValueForInputs: ariaCurrentValueForInputs,
-    disabled: disabled
+    disabled: disabled,
+    isFocused: latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'minute-input'
   })), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](Styleds.StyledSeparator, {}, void 0, " ")), /*#__PURE__*/_jsx__default["default"](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default["default"](MeridiemInput.MeridiemInput, {
     value: meridiem,
     onChange: onMeridiemChange,
     onBlur: onMeridiemBlur,
-    onFocus: onMinutesFocus,
+    onFocus: onMeridiemFocus,
     onKeyDown: onMeridiemKeyDown,
     contextRef: meridiemInputRef,
     placeholder: "AM",
     ariaCurrentValueForInputs: ariaCurrentValueForInputs,
-    disabled: disabled
+    disabled: disabled,
+    isFocused: latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'meridiem-input'
   })));
 };