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

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

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

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

@@ -12,16 +12,19 @@ const usePopperTriggerLogic = _ref => {
   } = _ref;
   const {
     focusedDay,
-    resetFocusedDayToStartDate,
-    tryToFocusCurrentlyDataIsFocusedDay
+    resetFocusedDayToStartDate
   } = focusLogic;
   const {
     props: {
       onPickerOpen,
       onPickerClose
     },
-    prevMonthBtnRef,
-    pickerButtonRef
+    pickerButtonRef,
+    trackFocusCalendarMetafocusedDay,
+    trackFocusCalendarPrevMonth,
+    trackFocusPicker,
+    latestInteractionRegion,
+    currFocusDescriber
   } = useContext(ControlledDateTimePickerContext);
   const [referenceElement, setReferenceElement] = useState(null);
   const [popperElement, setPopperElement] = useState(null);
@@ -37,29 +40,18 @@ const usePopperTriggerLogic = _ref => {
 
   const handleOnPickerOpen = useCallback(() => {
     onPickerOpen();
-    tryToFocusCurrentlyDataIsFocusedDay();
-  }, [onPickerOpen, tryToFocusCurrentlyDataIsFocusedDay]);
+  }, [onPickerOpen]);
   const openCalendar = useCallback(() => {
-    if (focusedDay) setTimeout(() => {
-      var _focusedDay$dayBtnRef, _focusedDay$dayBtnRef2, _focusedDay$dayBtnRef3;
-
-      return focusedDay === null || focusedDay === void 0 ? void 0 : (_focusedDay$dayBtnRef = focusedDay.dayBtnRef) === null || _focusedDay$dayBtnRef === void 0 ? void 0 : (_focusedDay$dayBtnRef2 = _focusedDay$dayBtnRef.current) === null || _focusedDay$dayBtnRef2 === void 0 ? void 0 : (_focusedDay$dayBtnRef3 = _focusedDay$dayBtnRef2.focus) === null || _focusedDay$dayBtnRef3 === void 0 ? void 0 : _focusedDay$dayBtnRef3.call(_focusedDay$dayBtnRef2);
-    }, 100);else setTimeout(() => {
-      var _prevMonthBtnRef$curr, _prevMonthBtnRef$curr2;
-
-      return prevMonthBtnRef === null || prevMonthBtnRef === void 0 ? void 0 : (_prevMonthBtnRef$curr = prevMonthBtnRef.current) === null || _prevMonthBtnRef$curr === void 0 ? void 0 : (_prevMonthBtnRef$curr2 = _prevMonthBtnRef$curr.focus) === null || _prevMonthBtnRef$curr2 === void 0 ? void 0 : _prevMonthBtnRef$curr2.call(_prevMonthBtnRef$curr);
-    }, 100);
+    if (focusedDay) trackFocusCalendarMetafocusedDay();else trackFocusCalendarPrevMonth();
     setShowCalendar(true);
     handleOnPickerOpen();
-  }, [focusedDay, handleOnPickerOpen, prevMonthBtnRef, setShowCalendar]);
+  }, [focusedDay, handleOnPickerOpen, setShowCalendar, trackFocusCalendarMetafocusedDay, trackFocusCalendarPrevMonth]);
   const closeCalendar = useCallback(() => {
-    var _pickerButtonRef$curr, _pickerButtonRef$curr2;
-
     setShowCalendar(false);
     onPickerClose();
     resetFocusedDayToStartDate();
-    pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr = pickerButtonRef.current) === null || _pickerButtonRef$curr === void 0 ? void 0 : (_pickerButtonRef$curr2 = _pickerButtonRef$curr.focus) === null || _pickerButtonRef$curr2 === void 0 ? void 0 : _pickerButtonRef$curr2.call(_pickerButtonRef$curr);
-  }, [setShowCalendar, onPickerClose, resetFocusedDayToStartDate, pickerButtonRef]);
+    trackFocusPicker();
+  }, [setShowCalendar, onPickerClose, resetFocusedDayToStartDate, trackFocusPicker]);
   const handleToggleCalendar = useCallback(() => {
     const isOpening = !showCalendar;
     if (isOpening) openCalendar();else closeCalendar();
@@ -67,23 +59,22 @@ const usePopperTriggerLogic = _ref => {
   const handleSetTriggerRef = useCallback(newRef => {
     pickerButtonRef.current = newRef;
     setReferenceElement(newRef);
-  }, [pickerButtonRef]);
+    if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'date-picker-icon') newRef === null || newRef === void 0 ? void 0 : newRef.focus();
+  }, [currFocusDescriber, latestInteractionRegion, pickerButtonRef]);
   const handleMenuWrapperKeyDown = useCallback(e => {
     const {
       key
     } = e;
 
     if (key === 'Escape') {
-      var _pickerButtonRef$curr3, _pickerButtonRef$curr4;
-
       closeCalendar();
-      pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr3 = pickerButtonRef.current) === null || _pickerButtonRef$curr3 === void 0 ? void 0 : (_pickerButtonRef$curr4 = _pickerButtonRef$curr3.focus) === null || _pickerButtonRef$curr4 === void 0 ? void 0 : _pickerButtonRef$curr4.call(_pickerButtonRef$curr3);
+      trackFocusPicker();
     }
-  }, [closeCalendar, pickerButtonRef]);
+  }, [closeCalendar, trackFocusPicker]);
   useOnClickOutside(popperElement, e => {
-    var _pickerButtonRef$curr5, _pickerButtonRef$curr6;
+    var _pickerButtonRef$curr, _pickerButtonRef$curr2;
 
-    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 !== 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();
   });
   return useMemo(() => ({
     closeCalendar,

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

@@ -21,6 +21,7 @@ const CalendarWithTimeWheelIconTrigger = () => {
   return useMemo(() => /*#__PURE__*/_jsx(StyledIconTriggerButton, {
     "aria-label": "date time picker context menu trigger, ".concat(ariaCurrentValueForInputs),
     buttonType: "icon",
+    type: "button",
     size: BUTTON_SIZES.M,
     innerRef: handleSetTriggerRef,
     onClick: handleToggleCalendarWithTimeWheel,

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

@@ -6,7 +6,6 @@ import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePick
 import { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside.js';
 import { CalendarContext } from '../Calendar/CalendarContext.js';
 import { TimeWheelContext } from '../TimeWheel/TimeWheelContext.js';
-import { homeEndKeys } from '../../../utils/constants.js';
 
 const useConfigCalendarWithTimeWheelCTX = () => {
   const {
@@ -17,15 +16,15 @@ const useConfigCalendarWithTimeWheelCTX = () => {
       onPickerClose,
       disabled
     },
-    hideDate,
-    hideTime,
-    monthInputRef,
-    hourInputRef,
     withAnyInputs,
     isWithTimeInputs,
-    meridiemInputRef,
-    yearInputRef,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    trackFocusFirstSegment,
+    trackFocusMeridiemInput,
+    trackFocusYearInput,
+    trackFocusPicker,
+    latestInteractionRegion,
+    currFocusDescriber
   } = useContext(ControlledDateTimePickerContext);
   const {
     handleToggleCalendar
@@ -35,24 +34,20 @@ const useConfigCalendarWithTimeWheelCTX = () => {
   } = useContext(TimeWheelContext);
   const [showCalendarWithTimeWheel, setShowCalendarWithTimeWheel] = useState(false);
   const onHomeKeyDown = 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') 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] = useState(null);
   const [popperElement, setPopperElement] = useState(null);
   const [arrowElement, setArrowElement] = useState(null);
@@ -87,19 +82,18 @@ const useConfigCalendarWithTimeWheelCTX = () => {
   const handleSetTriggerRef = useCallback(newRef => {
     pickerButtonRef.current = newRef;
     setReferenceElement(newRef);
-  }, [pickerButtonRef]);
+    if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'datetime-picker-icon') newRef === null || newRef === void 0 ? void 0 : newRef.focus();
+  }, [currFocusDescriber, latestInteractionRegion, pickerButtonRef]);
   const handleMenuWrapperKeyDown = useCallback(e => {
     const {
       key
     } = e;
 
     if (key === 'Escape') {
-      var _pickerButtonRef$curr3, _pickerButtonRef$curr4;
-
       closeCalendar();
-      pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr3 = pickerButtonRef.current) === null || _pickerButtonRef$curr3 === void 0 ? void 0 : (_pickerButtonRef$curr4 = _pickerButtonRef$curr3.focus) === null || _pickerButtonRef$curr4 === void 0 ? void 0 : _pickerButtonRef$curr4.call(_pickerButtonRef$curr3);
+      trackFocusPicker();
     }
-  }, [closeCalendar, pickerButtonRef]);
+  }, [closeCalendar, trackFocusPicker]);
   const isControllerOnly = useMemo(() => type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY, [type]);
   return useMemo(() => ({
     showCalendarWithTimeWheel,

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

@@ -7,7 +7,7 @@ import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
-import { useContext } from 'react';
+import { useContext, useCallback } from 'react';
 import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
@@ -30,9 +30,7 @@ const HoursList = () => {
     handlePrevHour,
     handleNextHour,
     handleTimeWheelBtnChangeHours,
-    handlePrevHourBtnOnKeyDown,
-    handleCurrHourOnKeyDown,
-    handleNextHourBtnOnKeyDown
+    handleCurrHourOnKeyDown
   } = useContext(TimeWheelContext);
   const {
     prevHourBtnRef,
@@ -40,14 +38,23 @@ const HoursList = () => {
     nextHourBtnRef,
     getIsDisabledTime,
     autoFocusHourTimeWheel,
-    hours
+    hours,
+    latestInteractionRegion,
+    currFocusDescriber
   } = useContext(ControlledDateTimePickerContext);
+  const handleCurrYearRef = useCallback(ButtonDomNode => {
+    setTimeout(() => {
+      var _ButtonDomNode$focus;
+
+      currHourBtnRef.current = ButtonDomNode;
+      if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour') ButtonDomNode === null || ButtonDomNode === void 0 ? void 0 : (_ButtonDomNode$focus = ButtonDomNode.focus) === null || _ButtonDomNode$focus === void 0 ? void 0 : _ButtonDomNode$focus.call(ButtonDomNode);
+    });
+  }, [currFocusDescriber, latestInteractionRegion, currHourBtnRef]);
   return /*#__PURE__*/_jsx(StyledWheelList, {}, void 0, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "subtract one hour",
     buttonType: "raw",
     size: "m",
     onClick: handlePrevHour,
-    onKeyDown: handlePrevHourBtnOnKeyDown,
     innerRef: prevHourBtnRef,
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
     tabIndex: -1
@@ -61,7 +68,7 @@ const HoursList = () => {
     const tabIndex = isCurrentListItem ? 0 : -1;
     const btnProps = {
       onKeyDown: isCurrentListItem ? handleCurrHourOnKeyDown : undefined,
-      innerRef: isCurrentListItem ? currHourBtnRef : undefined
+      innerRef: isCurrentListItem ? handleCurrYearRef : undefined
     };
     const styleProps = {
       isCurrentListItem,
@@ -92,7 +99,6 @@ const HoursList = () => {
     buttonType: "raw",
     size: "m",
     onClick: handleNextHour,
-    onKeyDown: handleNextHourBtnOnKeyDown,
     innerRef: nextHourBtnRef,
     tabIndex: -1,
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR

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

@@ -5,7 +5,7 @@ import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext } from 'react';
+import { useContext, useCallback } from 'react';
 import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
@@ -22,9 +22,7 @@ const MeridiemList = () => {
   const {
     currMeridiem,
     handleTimeWheelBtnChangeMeridiem,
-    handlePrevMeridiemBtnOnKeyDown,
-    handleCurrMeridiemOnKeyDown,
-    handleNextMeridiemBtnOnKeyDown
+    handleCurrMeridiemOnKeyDown
   } = useContext(TimeWheelContext);
   const {
     prevMeridiemBtnRef,
@@ -32,7 +30,9 @@ const MeridiemList = () => {
     nextMeridiemBtnRef,
     getIsDisabledTime,
     hours,
-    minutes
+    minutes,
+    latestInteractionRegion,
+    currFocusDescriber
   } = useContext(ControlledDateTimePickerContext);
   const isAmCurrent = !currMeridiem || currMeridiem === 'AM';
   const isPmCurrent = currMeridiem === 'PM';
@@ -55,6 +55,14 @@ const MeridiemList = () => {
   const styledPropsNextMeridiem = {
     isDisabled: isDisabledPm
   };
+  const handleCurrMeridiemRef = useCallback(ButtonDomNode => {
+    setTimeout(() => {
+      var _ButtonDomNode$focus;
+
+      currMeridiemBtnRef.current = ButtonDomNode;
+      if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-meridiem') ButtonDomNode === null || ButtonDomNode === void 0 ? void 0 : (_ButtonDomNode$focus = ButtonDomNode.focus) === null || _ButtonDomNode$focus === void 0 ? void 0 : _ButtonDomNode$focus.call(ButtonDomNode);
+    });
+  }, [currFocusDescriber, latestInteractionRegion, currMeridiemBtnRef]);
   return /*#__PURE__*/_jsx(StyledWheelList, {}, void 0, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/jsx(StyledWheelChangeTimeBtn, _objectSpread(_objectSpread({}, styledPropsPrevMeridiem), {}, {
     "aria-label": "set am meridiem",
     "aria-disabled": isDisabledAm,
@@ -62,7 +70,6 @@ const MeridiemList = () => {
     buttonType: "raw",
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('AM', e),
-    onKeyDown: handlePrevMeridiemBtnOnKeyDown,
     innerRef: prevMeridiemBtnRef,
     tabIndex: -1,
     children: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {}))
@@ -77,7 +84,7 @@ const MeridiemList = () => {
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('AM', e),
     onKeyDown: isAmCurrent ? handleCurrMeridiemOnKeyDown : undefined,
-    innerRef: isAmCurrent ? currMeridiemBtnRef : undefined,
+    innerRef: isAmCurrent ? handleCurrMeridiemRef : undefined,
     tabIndex: isAmCurrent ? 0 : -1,
     role: "spinbutton",
     "aria-valuemax": 1,
@@ -96,7 +103,7 @@ const MeridiemList = () => {
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('PM', e),
     onKeyDown: isPmCurrent ? handleCurrMeridiemOnKeyDown : undefined,
-    innerRef: isPmCurrent ? currMeridiemBtnRef : undefined,
+    innerRef: isPmCurrent ? handleCurrMeridiemRef : undefined,
     tabIndex: isPmCurrent ? 0 : -1,
     role: "spinbutton",
     "aria-valuemax": 1,
@@ -111,7 +118,6 @@ const MeridiemList = () => {
     buttonType: "raw",
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('PM', e),
-    onKeyDown: handleNextMeridiemBtnOnKeyDown,
     innerRef: nextMeridiemBtnRef,
     tabIndex: -1,
     children: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {}))

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

@@ -7,7 +7,7 @@ import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
-import { useContext } from 'react';
+import { useContext, useCallback } from 'react';
 import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
@@ -30,23 +30,30 @@ const MinutesList = () => {
     handlePrevMinute,
     handleNextMinute,
     handleTimeWheelBtnChangeMinutes,
-    handlePrevMinuteBtnOnKeyDown,
-    handleCurrMinutesOnKeyDown,
-    handleNextMinuteBtnOnKeyDown
+    handleCurrMinutesOnKeyDown
   } = useContext(TimeWheelContext);
   const {
     prevMinutesBtnRef,
     currMinutesBtnRef,
     nextMinutesBtnRef,
     getIsDisabledTime,
-    minutes
+    minutes,
+    currFocusDescriber,
+    latestInteractionRegion
   } = useContext(ControlledDateTimePickerContext);
+  const handleCurrMeridiemRef = useCallback(ButtonDomNode => {
+    setTimeout(() => {
+      var _ButtonDomNode$focus;
+
+      currMinutesBtnRef.current = ButtonDomNode;
+      if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-minute') ButtonDomNode === null || ButtonDomNode === void 0 ? void 0 : (_ButtonDomNode$focus = ButtonDomNode.focus) === null || _ButtonDomNode$focus === void 0 ? void 0 : _ButtonDomNode$focus.call(ButtonDomNode);
+    });
+  }, [currFocusDescriber, latestInteractionRegion, currMinutesBtnRef]);
   return /*#__PURE__*/_jsx(StyledWheelList, {}, void 0, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "subtract one minute",
     buttonType: "raw",
     size: "m",
     onClick: handlePrevMinute,
-    onKeyDown: handlePrevMinuteBtnOnKeyDown,
     innerRef: prevMinutesBtnRef,
     tabIndex: -1,
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE
@@ -60,7 +67,7 @@ const MinutesList = () => {
     const tabIndex = isCurrentListItem ? 0 : -1;
     const btnProps = {
       onKeyDown: isCurrentListItem ? handleCurrMinutesOnKeyDown : undefined,
-      innerRef: isCurrentListItem ? currMinutesBtnRef : undefined
+      innerRef: isCurrentListItem ? handleCurrMeridiemRef : undefined
     };
     const styledProps = {
       isCurrentListItem,
@@ -91,7 +98,6 @@ const MinutesList = () => {
     buttonType: "raw",
     size: "m",
     onClick: handleNextMinute,
-    onKeyDown: handleNextMinuteBtnOnKeyDown,
     innerRef: nextMinutesBtnRef,
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
     tabIndex: -1