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

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

@@ -1,6 +1,5 @@
 import { useContext, useCallback, useMemo } from 'react';
 import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
-import { homeEndKeys, homeEndAllArrowKeys } from '../../../utils/constants.js';
 
 /* eslint-disable @typescript-eslint/indent */
 const useKeyboardHandlers = _ref => {
@@ -20,59 +19,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
   } = useContext(ControlledDateTimePickerContext);
   const onHomeKeyDownInsideTimeWheel = 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 = 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 = 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 handleCurrHourOnKeyDown = useCallback(e => {
     const {
       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();
     let didTriggerHourChange = false;
 
     if (key === 'ArrowUp') {
@@ -86,33 +68,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 = useCallback(e => {
     const {
       key
     } = 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();
     let didTriggerMinuteChange = false;
 
     if (key === 'ArrowUp') {
@@ -126,33 +100,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 = useCallback(e => {
     const {
       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();
     let didTriggerMeridiemChange = false;
 
     if (key === 'ArrowUp') {
@@ -166,185 +132,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 = useCallback(e => {
-    const {
-      key
-    } = e;
-    if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (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 = useCallback(e => {
-    const {
-      key
-    } = e;
-    if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (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 = useCallback(e => {
-    const {
-      key
-    } = e;
-    if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (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 = useCallback(e => {
-    const {
-      key
-    } = e;
-    if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (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 = useCallback(e => {
-    const {
-      key
-    } = e;
-    if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (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 = useCallback(e => {
-    const {
-      key
-    } = e;
-    if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (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 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]);
 };
 
 export { useKeyboardHandlers };

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

@@ -1,4 +1,3 @@
-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';
@@ -11,8 +10,11 @@ const usePopperTriggerLogic = () => {
       onPickerClose,
       onPickerOpen
     },
-    currHourBtnRef,
-    isWithCalendarToo
+    isWithCalendarToo,
+    trackFocusTimewheelCurrHour,
+    trackFocusPicker,
+    latestInteractionRegion,
+    currFocusDescriber
   } = useContext(ControlledDateTimePickerContext);
   const [showTimePicker, setShowTimePicker] = useState(false);
   const [referenceElement, setReferenceElement] = useState(null);
@@ -34,37 +36,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(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 = useCallback(newRef => {
     pickerButtonRef.current = newRef;
     setReferenceElement(newRef);
-  }, [pickerButtonRef]);
+    if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'time-picker-icon') newRef?.focus();
+  }, [currFocusDescriber, latestInteractionRegion, pickerButtonRef]);
   const handleMenuWrapperKeyDown = 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 useMemo(() => ({
     showTimePicker,
     setShowTimePicker,

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

@@ -18,7 +18,7 @@ const Styled2DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
   let {
     disabled
   } = _ref;
-  return disabled ? "color: #616b7f;" : "";
+  return disabled ? `color: #616b7f;` : ``;
 });
 const StyledMin4DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
   componentId: "sc-2wbvze-4"
@@ -26,7 +26,7 @@ const StyledMin4DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
   let {
     disabled
   } = _ref2;
-  return disabled ? "color: #616b7f;" : "";
+  return disabled ? `color: #616b7f;` : ``;
 });
 const StyledInputsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-2wbvze-5"
@@ -34,7 +34,11 @@ const StyledInputsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
   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,
@@ -59,7 +63,7 @@ const StyledInputsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
     theme,
     disabled
   } = _ref7;
-  return disabled ? "background-color: ".concat(theme.colors.neutral[100], ";") : "";
+  return disabled ? `background-color: ${theme.colors.neutral[100]};` : ``;
 });
 const StyledDateInputsWrapperGrid = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-2wbvze-6"
@@ -73,14 +77,16 @@ const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
   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(Grid).withConfig({
   componentId: "sc-2wbvze-9"

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

@@ -22,7 +22,8 @@ const HHInput = /*#__PURE__*/React.memo(_ref => {
     placeholder,
     ariaCurrentValueForInputs,
     contextRef,
-    autoFocusHourInput
+    autoFocusHourInput,
+    isFocused
   } = _ref;
   const validateOnChange = useCallback(e => {
     if (isInvalidHour(e.target.value)) {
@@ -39,9 +40,12 @@ const HHInput = /*#__PURE__*/React.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.TIME_INPUTS.HOUR,
     disabled: disabled,
     "aria-disabled": disabled

package/esm/date-time-picker/parts/TimeInputs/MeridiemInput.js

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { useCallback } from 'react';
 import { Styled2DigitsInput } from '../Styleds.js';
 import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
@@ -25,12 +24,11 @@ const MeridiemInput = /*#__PURE__*/React.memo(_ref => {
     disabled,
     placeholder,
     ariaCurrentValueForInputs,
-    contextRef
+    contextRef,
+    isFocused
   } = _ref;
   const validateOnChange = 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;
     }
@@ -43,9 +41,12 @@ const MeridiemInput = /*#__PURE__*/React.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.TIME_INPUTS.MERIDIEM,
     disabled: disabled,
     "aria-disabled": disabled

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

@@ -21,12 +21,11 @@ const MinutesInput = /*#__PURE__*/React.memo(_ref => {
     disabled,
     placeholder,
     ariaCurrentValueForInputs,
-    contextRef
+    contextRef,
+    isFocused
   } = _ref;
   const validateOnChange = 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;
     }
@@ -39,9 +38,12 @@ const MinutesInput = /*#__PURE__*/React.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.TIME_INPUTS.MINUTE,
     disabled: disabled,
     "aria-disabled": disabled

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

@@ -35,7 +35,9 @@ const TimeInputs = () => {
     hourInputRef,
     minutesInputRef,
     meridiemInputRef,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    latestInteractionRegion,
+    currFocusDescriber
   } = useContext(ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx(Grid, {
     cols: [fixedValues.smallInputWidth, fixedValues.separatorWidth, fixedValues.smallInputWidth, fixedValues.separatorWidth, fixedValues.smallInputWidth]
@@ -49,29 +51,32 @@ const TimeInputs = () => {
     placeholder: "HH",
     ariaCurrentValueForInputs: ariaCurrentValueForInputs,
     autoFocusHourInput: autoFocusHourInput,
-    disabled: disabled
+    disabled: disabled,
+    isFocused: latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'hour-input'
   })), _StyledColonSeparator || (_StyledColonSeparator = /*#__PURE__*/_jsx(StyledColonSeparator, {
     alignItems: "center"
   }, void 0, ":")), /*#__PURE__*/_jsx(StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx(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(StyledSeparator, {}, void 0, " ")), /*#__PURE__*/_jsx(StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx(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'
   })));
 };