@elliemae/ds-controlled-form 2.4.1 → 2.4.2-rc.11

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

@@ -8,7 +8,6 @@ require('core-js/modules/esnext.iterator.find.js');
 var React = require('react');
 var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var dateHelpers = require('../../../utils/dateHelpers.js');
-var constants = require('../../../utils/constants.js');
 
 const useKeyboardHandlers = _ref => {
   let {
@@ -16,29 +15,26 @@ const useKeyboardHandlers = _ref => {
     focusLogic
   } = _ref;
   const {
-    hideDate,
-    hideTime,
-    monthInputRef,
-    hourInputRef,
-    prevYearBtnRef,
-    prevMonthBtnRef,
-    nextMonthBtnRef,
-    nextYearBtnRef,
-    currMeridiemBtnRef,
     isControllerOnly,
     isWithTimeWheelToo,
-    setLatestInteractionRegion,
     withAnyInputs,
     isWithTimeInputs,
-    meridiemInputRef,
     isWithDateInputs,
-    yearInputRef
+    trackFocusFirstSegment,
+    trackFocusMeridiemInput,
+    trackFocusYearInput,
+    trackFocusCalendarPrevMonth,
+    trackFocusCalendarNextMonth,
+    trackFocusCalendarNextYear,
+    trackFocusCalendarPrevYear,
+    trackFocusTimewheelCurrMeridiem,
+    trackFocusCalendarMetafocusedDay
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const {
     focusedDay,
     handleFocusMetaDay,
-    handleFocusMetaDayByDay,
-    tryToFocusCurrentlyDataIsFocusedDay
+    handleFocusMetaDayByDay //  tryToFocusCurrentlyDataIsFocusedDay
+
   } = focusLogic;
   const {
     daysArray,
@@ -46,8 +42,6 @@ const useKeyboardHandlers = _ref => {
     handleNextMonth
   } = currentDisplayedMonthLogic;
   const tryToFocusDayRegion = React.useCallback(() => {
-    setLatestInteractionRegion('calendar-days');
-
     if (!focusedDay) {
       const newFocusDay = daysArray.find(_ref2 => {
         let {
@@ -55,42 +49,32 @@ const useKeyboardHandlers = _ref => {
         } = _ref2;
         return isCurrMonthDay;
       });
-      if (newFocusDay) setTimeout(() => {
-        handleFocusMetaDay(newFocusDay);
-      });
-    } else {
-      tryToFocusCurrentlyDataIsFocusedDay();
+      if (newFocusDay) handleFocusMetaDay(newFocusDay);
     }
-  }, [daysArray, focusedDay, handleFocusMetaDay, setLatestInteractionRegion, tryToFocusCurrentlyDataIsFocusedDay]);
-  const onHomeKeyDownInsideCalendar = React.useCallback(() => {
-    var _prevMonthBtnRef$curr, _prevMonthBtnRef$curr2;
 
-    prevMonthBtnRef === null || prevMonthBtnRef === void 0 ? void 0 : (_prevMonthBtnRef$curr = prevMonthBtnRef.current) === null || _prevMonthBtnRef$curr === void 0 ? void 0 : (_prevMonthBtnRef$curr2 = _prevMonthBtnRef$curr.focus) === null || _prevMonthBtnRef$curr2 === void 0 ? void 0 : _prevMonthBtnRef$curr2.call(_prevMonthBtnRef$curr);
-  }, [prevMonthBtnRef]);
+    trackFocusCalendarMetafocusedDay();
+  }, [daysArray, focusedDay, handleFocusMetaDay, trackFocusCalendarMetafocusedDay]);
+  const onHomeKeyDownInsideCalendar = React.useCallback(() => {
+    trackFocusCalendarPrevMonth();
+  }, [trackFocusCalendarPrevMonth]);
   const onEndKeyDownInsideCalendar = React.useCallback(() => {
-    var _currMeridiemBtnRef$c, _currMeridiemBtnRef$c2;
-
-    if (isWithTimeWheelToo) currMeridiemBtnRef === null || currMeridiemBtnRef === void 0 ? void 0 : (_currMeridiemBtnRef$c = currMeridiemBtnRef.current) === null || _currMeridiemBtnRef$c === void 0 ? void 0 : (_currMeridiemBtnRef$c2 = _currMeridiemBtnRef$c.focus) === null || _currMeridiemBtnRef$c2 === void 0 ? void 0 : _currMeridiemBtnRef$c2.call(_currMeridiemBtnRef$c);else tryToFocusDayRegion();
-  }, [currMeridiemBtnRef, isWithTimeWheelToo, tryToFocusDayRegion]);
+    if (isWithTimeWheelToo) trackFocusTimewheelCurrMeridiem();else tryToFocusDayRegion();
+  }, [isWithTimeWheelToo, trackFocusTimewheelCurrMeridiem, tryToFocusDayRegion]);
   const onHomeKeyDownTriggerIcon = React.useCallback(() => {
-    var _monthInputRef$curren, _monthInputRef$curren2, _hourInputRef$current, _hourInputRef$current2;
-
-    if (!hideDate) monthInputRef === null || monthInputRef === void 0 ? void 0 : (_monthInputRef$curren = monthInputRef.current) === null || _monthInputRef$curren === void 0 ? void 0 : (_monthInputRef$curren2 = _monthInputRef$curren.focus) === null || _monthInputRef$curren2 === void 0 ? void 0 : _monthInputRef$curren2.call(_monthInputRef$curren);else if (!hideTime) hourInputRef === null || hourInputRef === void 0 ? void 0 : (_hourInputRef$current = hourInputRef.current) === null || _hourInputRef$current === void 0 ? void 0 : (_hourInputRef$current2 = _hourInputRef$current.focus) === null || _hourInputRef$current2 === void 0 ? void 0 : _hourInputRef$current2.call(_hourInputRef$current);
-  }, [hideDate, hideTime, monthInputRef, hourInputRef]);
+    trackFocusFirstSegment();
+  }, [trackFocusFirstSegment]);
   const handlePickerIconKeyDown = React.useCallback(e => {
     const {
       key
     } = e;
-    if (constants.homeEndKeys.includes(key)) e.preventDefault();
-    if (constants.homeEndKeys.includes(key)) e.stopPropagation();
+    if (['Home', 'End'].includes(key)) e.preventDefault();
+    if (['Home', 'End'].includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDownTriggerIcon();
 
     if (key === 'Backspace' && withAnyInputs) {
-      var _meridiemInputRef$cur, _meridiemInputRef$cur2, _yearInputRef$current, _yearInputRef$current2;
-
-      if (isWithTimeInputs) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur = meridiemInputRef.current) === null || _meridiemInputRef$cur === void 0 ? void 0 : (_meridiemInputRef$cur2 = _meridiemInputRef$cur.focus) === null || _meridiemInputRef$cur2 === void 0 ? void 0 : _meridiemInputRef$cur2.call(_meridiemInputRef$cur);else if (isWithDateInputs) yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current = yearInputRef.current) === null || _yearInputRef$current === void 0 ? void 0 : (_yearInputRef$current2 = _yearInputRef$current.focus) === null || _yearInputRef$current2 === void 0 ? void 0 : _yearInputRef$current2.call(_yearInputRef$current);
+      if (isWithTimeInputs) trackFocusMeridiemInput();else if (isWithDateInputs) trackFocusYearInput();
     }
-  }, [isWithDateInputs, isWithTimeInputs, meridiemInputRef, onHomeKeyDownTriggerIcon, withAnyInputs, yearInputRef]);
+  }, [isWithDateInputs, isWithTimeInputs, onHomeKeyDownTriggerIcon, trackFocusMeridiemInput, trackFocusYearInput, withAnyInputs]);
   const handleDayOnKeyDown = React.useCallback((e, metaDay) => {
     let newFocusedDayDate;
     const {
@@ -100,8 +84,8 @@ const useKeyboardHandlers = _ref => {
       key,
       shiftKey
     } = e;
-    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
+    if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();
+    if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();
     if (key === 'ArrowUp') newFocusedDayDate = dateHelpers.sumValuesToDate(day, {
       daysToSum: -7
     });
@@ -131,21 +115,18 @@ const useKeyboardHandlers = _ref => {
 
     if (newFocusedDayDate) {
       handleFocusMetaDayByDay(newFocusedDayDate);
-      setTimeout(tryToFocusCurrentlyDataIsFocusedDay);
     }
 
     if (key === 'Home') onHomeKeyDownInsideCalendar();
     if (key === 'End') onEndKeyDownInsideCalendar(); // TAB CYCLE IMPLEMENTATION
 
     if (key === 'Tab' && !shiftKey && isControllerOnly === false && !isWithTimeWheelToo) {
-      var _prevMonthBtnRef$curr3, _prevMonthBtnRef$curr4;
-
       // MUST prevent default since this is a custom focus switch
       // NOT preventing the default event will cause unexpected result
       e.preventDefault();
-      prevMonthBtnRef === null || prevMonthBtnRef === void 0 ? void 0 : (_prevMonthBtnRef$curr3 = prevMonthBtnRef.current) === null || _prevMonthBtnRef$curr3 === void 0 ? void 0 : (_prevMonthBtnRef$curr4 = _prevMonthBtnRef$curr3.focus) === null || _prevMonthBtnRef$curr4 === void 0 ? void 0 : _prevMonthBtnRef$curr4.call(_prevMonthBtnRef$curr3);
+      trackFocusCalendarPrevMonth();
     }
-  }, [daysArray, handleFocusMetaDayByDay, handleNextMonth, handlePrevMonth, isControllerOnly, isWithTimeWheelToo, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, prevMonthBtnRef, tryToFocusCurrentlyDataIsFocusedDay]);
+  }, [daysArray, handleFocusMetaDayByDay, handleNextMonth, handlePrevMonth, isControllerOnly, isWithTimeWheelToo, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, trackFocusCalendarPrevMonth]);
   const handlePrevYearKeyDown = React.useCallback(e => {
     const {
       key,
@@ -156,13 +137,9 @@ const useKeyboardHandlers = _ref => {
       e.preventDefault();
 
       if (shiftKey) {
-        var _nextMonthBtnRef$curr;
-
-        (_nextMonthBtnRef$curr = nextMonthBtnRef.current) === null || _nextMonthBtnRef$curr === void 0 ? void 0 : _nextMonthBtnRef$curr.focus();
+        trackFocusCalendarNextMonth();
       } else {
-        var _nextYearBtnRef$curre;
-
-        (_nextYearBtnRef$curre = nextYearBtnRef.current) === null || _nextYearBtnRef$curre === void 0 ? void 0 : _nextYearBtnRef$curre.focus();
+        trackFocusCalendarNextYear();
       }
     }
 
@@ -175,7 +152,7 @@ const useKeyboardHandlers = _ref => {
       onEndKeyDownInsideCalendar();
       e.preventDefault();
     }
-  }, [nextMonthBtnRef, nextYearBtnRef, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar]);
+  }, [onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, trackFocusCalendarNextMonth, trackFocusCalendarNextYear]);
   const handlePrevMonthKeyDown = React.useCallback(e => {
     const {
       key,
@@ -186,16 +163,12 @@ const useKeyboardHandlers = _ref => {
       if (shiftKey) {
         // TAB CYCLE IMPLEMENTATION
         if (!isControllerOnly) {
-          var _currMeridiemBtnRef$c3, _currMeridiemBtnRef$c4;
-
           e.preventDefault();
-          if (isWithTimeWheelToo) currMeridiemBtnRef === null || currMeridiemBtnRef === void 0 ? void 0 : (_currMeridiemBtnRef$c3 = currMeridiemBtnRef.current) === null || _currMeridiemBtnRef$c3 === void 0 ? void 0 : (_currMeridiemBtnRef$c4 = _currMeridiemBtnRef$c3.focus) === null || _currMeridiemBtnRef$c4 === void 0 ? void 0 : _currMeridiemBtnRef$c4.call(_currMeridiemBtnRef$c3);else tryToFocusDayRegion();
+          if (isWithTimeWheelToo) trackFocusTimewheelCurrMeridiem();else tryToFocusDayRegion();
         }
       } else {
-        var _nextMonthBtnRef$curr2;
-
         e.preventDefault();
-        (_nextMonthBtnRef$curr2 = nextMonthBtnRef.current) === null || _nextMonthBtnRef$curr2 === void 0 ? void 0 : _nextMonthBtnRef$curr2.focus();
+        trackFocusCalendarNextMonth();
       }
     }
 
@@ -208,7 +181,7 @@ const useKeyboardHandlers = _ref => {
       onEndKeyDownInsideCalendar();
       e.preventDefault();
     }
-  }, [currMeridiemBtnRef, isControllerOnly, isWithTimeWheelToo, nextMonthBtnRef, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, tryToFocusDayRegion]);
+  }, [isControllerOnly, isWithTimeWheelToo, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, trackFocusCalendarNextMonth, trackFocusTimewheelCurrMeridiem, tryToFocusDayRegion]);
   const handleNextMonthKeyDown = React.useCallback(e => {
     const {
       key,
@@ -219,13 +192,9 @@ const useKeyboardHandlers = _ref => {
       e.preventDefault();
 
       if (shiftKey) {
-        var _prevMonthBtnRef$curr5;
-
-        (_prevMonthBtnRef$curr5 = prevMonthBtnRef.current) === null || _prevMonthBtnRef$curr5 === void 0 ? void 0 : _prevMonthBtnRef$curr5.focus();
+        trackFocusCalendarPrevMonth();
       } else {
-        var _prevYearBtnRef$curre;
-
-        (_prevYearBtnRef$curre = prevYearBtnRef.current) === null || _prevYearBtnRef$curre === void 0 ? void 0 : _prevYearBtnRef$curre.focus();
+        trackFocusCalendarPrevYear();
       }
     }
 
@@ -238,7 +207,7 @@ const useKeyboardHandlers = _ref => {
       onEndKeyDownInsideCalendar();
       e.preventDefault();
     }
-  }, [onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, prevMonthBtnRef, prevYearBtnRef]);
+  }, [onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, trackFocusCalendarPrevMonth, trackFocusCalendarPrevYear]);
   const handleNextYearKeyDown = React.useCallback(e => {
     const {
       key,
@@ -249,9 +218,7 @@ const useKeyboardHandlers = _ref => {
       e.preventDefault();
 
       if (shiftKey) {
-        var _prevYearBtnRef$curre2, _prevYearBtnRef$curre3;
-
-        prevYearBtnRef === null || prevYearBtnRef === void 0 ? void 0 : (_prevYearBtnRef$curre2 = prevYearBtnRef.current) === null || _prevYearBtnRef$curre2 === void 0 ? void 0 : (_prevYearBtnRef$curre3 = _prevYearBtnRef$curre2.focus) === null || _prevYearBtnRef$curre3 === void 0 ? void 0 : _prevYearBtnRef$curre3.call(_prevYearBtnRef$curre2);
+        trackFocusCalendarPrevYear();
       }
 
       if (!shiftKey) tryToFocusDayRegion();
@@ -266,7 +233,7 @@ const useKeyboardHandlers = _ref => {
       onEndKeyDownInsideCalendar();
       e.preventDefault();
     }
-  }, [tryToFocusDayRegion, prevYearBtnRef, onHomeKeyDownInsideCalendar, onEndKeyDownInsideCalendar]);
+  }, [tryToFocusDayRegion, trackFocusCalendarPrevYear, onHomeKeyDownInsideCalendar, onEndKeyDownInsideCalendar]);
   return React.useMemo(() => ({
     handleDayOnKeyDown,
     handlePrevYearKeyDown,

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

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

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

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

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

@@ -10,7 +10,6 @@ var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.
 var useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');
 var CalendarContext = require('../Calendar/CalendarContext.js');
 var TimeWheelContext = require('../TimeWheel/TimeWheelContext.js');
-var constants = require('../../../utils/constants.js');
 
 const useConfigCalendarWithTimeWheelCTX = () => {
   const {
@@ -21,15 +20,15 @@ const useConfigCalendarWithTimeWheelCTX = () => {
       onPickerClose,
       disabled
     },
-    hideDate,
-    hideTime,
-    monthInputRef,
-    hourInputRef,
     withAnyInputs,
     isWithTimeInputs,
-    meridiemInputRef,
-    yearInputRef,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    trackFocusFirstSegment,
+    trackFocusMeridiemInput,
+    trackFocusYearInput,
+    trackFocusPicker,
+    latestInteractionRegion,
+    currFocusDescriber
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const {
     handleToggleCalendar
@@ -39,24 +38,20 @@ const useConfigCalendarWithTimeWheelCTX = () => {
   } = React.useContext(TimeWheelContext.TimeWheelContext);
   const [showCalendarWithTimeWheel, setShowCalendarWithTimeWheel] = React.useState(false);
   const onHomeKeyDown = React.useCallback(() => {
-    var _monthInputRef$curren, _monthInputRef$curren2, _hourInputRef$current, _hourInputRef$current2;
-
-    if (!hideDate) monthInputRef === null || monthInputRef === void 0 ? void 0 : (_monthInputRef$curren = monthInputRef.current) === null || _monthInputRef$curren === void 0 ? void 0 : (_monthInputRef$curren2 = _monthInputRef$curren.focus) === null || _monthInputRef$curren2 === void 0 ? void 0 : _monthInputRef$curren2.call(_monthInputRef$curren);else if (!hideTime) hourInputRef === null || hourInputRef === void 0 ? void 0 : (_hourInputRef$current = hourInputRef.current) === null || _hourInputRef$current === void 0 ? void 0 : (_hourInputRef$current2 = _hourInputRef$current.focus) === null || _hourInputRef$current2 === void 0 ? void 0 : _hourInputRef$current2.call(_hourInputRef$current);
-  }, [hideDate, hideTime, monthInputRef, hourInputRef]);
+    trackFocusFirstSegment();
+  }, [trackFocusFirstSegment]);
   const handlePickerIconKeyDown = React.useCallback(e => {
     const {
       key
     } = e;
-    if (constants.homeEndKeys.includes(key)) e.preventDefault();
-    if (constants.homeEndKeys.includes(key)) e.stopPropagation();
+    if (['Home', 'End'].includes(key)) e.preventDefault();
+    if (['Home', 'End'].includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
 
     if (key === 'Backspace' && withAnyInputs) {
-      var _meridiemInputRef$cur, _meridiemInputRef$cur2, _yearInputRef$current, _yearInputRef$current2;
-
-      if (isWithTimeInputs) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur = meridiemInputRef.current) === null || _meridiemInputRef$cur === void 0 ? void 0 : (_meridiemInputRef$cur2 = _meridiemInputRef$cur.focus) === null || _meridiemInputRef$cur2 === void 0 ? void 0 : _meridiemInputRef$cur2.call(_meridiemInputRef$cur);else yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current = yearInputRef.current) === null || _yearInputRef$current === void 0 ? void 0 : (_yearInputRef$current2 = _yearInputRef$current.focus) === null || _yearInputRef$current2 === void 0 ? void 0 : _yearInputRef$current2.call(_yearInputRef$current);
+      if (isWithTimeInputs) trackFocusMeridiemInput();else trackFocusYearInput();
     }
-  }, [isWithTimeInputs, meridiemInputRef, onHomeKeyDown, withAnyInputs, yearInputRef]);
+  }, [isWithTimeInputs, onHomeKeyDown, trackFocusMeridiemInput, trackFocusYearInput, withAnyInputs]);
   const [referenceElement, setReferenceElement] = React.useState(null);
   const [popperElement, setPopperElement] = React.useState(null);
   const [arrowElement, setArrowElement] = React.useState(null);
@@ -91,19 +86,18 @@ const useConfigCalendarWithTimeWheelCTX = () => {
   const handleSetTriggerRef = React.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 = React.useCallback(e => {
     const {
       key
     } = e;
 
     if (key === 'Escape') {
-      var _pickerButtonRef$curr3, _pickerButtonRef$curr4;
-
       closeCalendar();
-      pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr3 = pickerButtonRef.current) === null || _pickerButtonRef$curr3 === void 0 ? void 0 : (_pickerButtonRef$curr4 = _pickerButtonRef$curr3.focus) === null || _pickerButtonRef$curr4 === void 0 ? void 0 : _pickerButtonRef$curr4.call(_pickerButtonRef$curr3);
+      trackFocusPicker();
     }
-  }, [closeCalendar, pickerButtonRef]);
+  }, [closeCalendar, trackFocusPicker]);
   const isControllerOnly = React.useMemo(() => type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY, [type]);
   return React.useMemo(() => ({
     showCalendarWithTimeWheel,

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

@@ -39,9 +39,7 @@ const HoursList = () => {
     handlePrevHour,
     handleNextHour,
     handleTimeWheelBtnChangeHours,
-    handlePrevHourBtnOnKeyDown,
-    handleCurrHourOnKeyDown,
-    handleNextHourBtnOnKeyDown
+    handleCurrHourOnKeyDown
   } = React.useContext(TimeWheelContext.TimeWheelContext);
   const {
     prevHourBtnRef,
@@ -49,14 +47,23 @@ const HoursList = () => {
     nextHourBtnRef,
     getIsDisabledTime,
     autoFocusHourTimeWheel,
-    hours
+    hours,
+    latestInteractionRegion,
+    currFocusDescriber
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const handleCurrYearRef = React.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__default["default"](Styleds.StyledWheelList, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelChangeTimeBtn, {
     "aria-label": "subtract one hour",
     buttonType: "raw",
     size: "m",
     onClick: handlePrevHour,
-    onKeyDown: handlePrevHourBtnOnKeyDown,
     innerRef: prevHourBtnRef,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
     tabIndex: -1
@@ -70,7 +77,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,
@@ -101,7 +108,6 @@ const HoursList = () => {
     buttonType: "raw",
     size: "m",
     onClick: handleNextHour,
-    onKeyDown: handleNextHourBtnOnKeyDown,
     innerRef: nextHourBtnRef,
     tabIndex: -1,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR

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

@@ -31,9 +31,7 @@ const MeridiemList = () => {
   const {
     currMeridiem,
     handleTimeWheelBtnChangeMeridiem,
-    handlePrevMeridiemBtnOnKeyDown,
-    handleCurrMeridiemOnKeyDown,
-    handleNextMeridiemBtnOnKeyDown
+    handleCurrMeridiemOnKeyDown
   } = React.useContext(TimeWheelContext.TimeWheelContext);
   const {
     prevMeridiemBtnRef,
@@ -41,7 +39,9 @@ const MeridiemList = () => {
     nextMeridiemBtnRef,
     getIsDisabledTime,
     hours,
-    minutes
+    minutes,
+    latestInteractionRegion,
+    currFocusDescriber
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const isAmCurrent = !currMeridiem || currMeridiem === 'AM';
   const isPmCurrent = currMeridiem === 'PM';
@@ -64,6 +64,14 @@ const MeridiemList = () => {
   const styledPropsNextMeridiem = {
     isDisabled: isDisabledPm
   };
+  const handleCurrMeridiemRef = React.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__default["default"](Styleds.StyledWheelList, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledWheelChangeTimeBtn, _objectSpread(_objectSpread({}, styledPropsPrevMeridiem), {}, {
     "aria-label": "set am meridiem",
     "aria-disabled": isDisabledAm,
@@ -71,7 +79,6 @@ const MeridiemList = () => {
     buttonType: "raw",
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('AM', e),
-    onKeyDown: handlePrevMeridiemBtnOnKeyDown,
     innerRef: prevMeridiemBtnRef,
     tabIndex: -1,
     children: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {}))
@@ -86,7 +93,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,
@@ -105,7 +112,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,
@@ -120,7 +127,6 @@ const MeridiemList = () => {
     buttonType: "raw",
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('PM', e),
-    onKeyDown: handleNextMeridiemBtnOnKeyDown,
     innerRef: nextMeridiemBtnRef,
     tabIndex: -1,
     children: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {}))

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

@@ -39,23 +39,30 @@ const MinutesList = () => {
     handlePrevMinute,
     handleNextMinute,
     handleTimeWheelBtnChangeMinutes,
-    handlePrevMinuteBtnOnKeyDown,
-    handleCurrMinutesOnKeyDown,
-    handleNextMinuteBtnOnKeyDown
+    handleCurrMinutesOnKeyDown
   } = React.useContext(TimeWheelContext.TimeWheelContext);
   const {
     prevMinutesBtnRef,
     currMinutesBtnRef,
     nextMinutesBtnRef,
     getIsDisabledTime,
-    minutes
+    minutes,
+    currFocusDescriber,
+    latestInteractionRegion
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const handleCurrMeridiemRef = React.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__default["default"](Styleds.StyledWheelList, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelChangeTimeBtn, {
     "aria-label": "subtract one minute",
     buttonType: "raw",
     size: "m",
     onClick: handlePrevMinute,
-    onKeyDown: handlePrevMinuteBtnOnKeyDown,
     innerRef: prevMinutesBtnRef,
     tabIndex: -1,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE
@@ -69,7 +76,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,
@@ -100,7 +107,6 @@ const MinutesList = () => {
     buttonType: "raw",
     size: "m",
     onClick: handleNextMinute,
-    onKeyDown: handleNextMinuteBtnOnKeyDown,
     innerRef: nextMinutesBtnRef,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
     tabIndex: -1