@elliemae/ds-controlled-form 2.3.0-alpha.8 → 2.3.0-next.10

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

@@ -0,0 +1,347 @@
+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 => {
+  let {
+    handlePrevHour,
+    handleNextHour,
+    handlePrevMinute,
+    handleNextMinute,
+    handleTimeWheelBtnChangeMeridiem
+  } = _ref;
+  const {
+    withAnyInputs,
+    isWithTimeInputs,
+    isWithDateInputs,
+    isWithCalendarToo,
+    isControllerOnly,
+    hideDate,
+    hideTime,
+    monthInputRef,
+    hourInputRef,
+    meridiemInputRef,
+    yearInputRef,
+    prevMonthBtnRef,
+    prevHourBtnRef,
+    currHourBtnRef,
+    nextHourBtnRef,
+    prevMinutesBtnRef,
+    currMinutesBtnRef,
+    nextMinutesBtnRef,
+    prevMeridiemBtnRef,
+    currMeridiemBtnRef,
+    nextMeridiemBtnRef
+  } = 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]);
+  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]);
+  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]);
+  const handlePickerIconKeyDown = useCallback(e => {
+    const {
+      key
+    } = e;
+    if (homeEndKeys.includes(key)) e.preventDefault();
+    if (homeEndKeys.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);
+    }
+  }, [isWithDateInputs, isWithTimeInputs, meridiemInputRef, onHomeKeyDownTriggerIcon, withAnyInputs, yearInputRef]);
+  const handleCurrHourOnKeyDown = useCallback(e => {
+    const {
+      key,
+      shiftKey
+    } = e;
+    if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
+    let didTriggerHourChange = false;
+
+    if (key === 'ArrowUp') {
+      handlePrevHour(e);
+      didTriggerHourChange = true;
+    }
+
+    if (key === 'ArrowDown') {
+      handleNextHour(e);
+      didTriggerHourChange = true;
+    }
+
+    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);
+    }
+
+    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 (!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);
+    }
+  }, [currHourBtnRef, currMeridiemBtnRef, currMinutesBtnRef, handleNextHour, handlePrevHour, isControllerOnly, isWithCalendarToo, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel]);
+  const handleCurrMinutesOnKeyDown = useCallback(e => {
+    const {
+      key
+    } = e;
+    if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
+    let didTriggerMinuteChange = false;
+
+    if (key === 'ArrowUp') {
+      handlePrevMinute(e);
+      didTriggerMinuteChange = true;
+    }
+
+    if (key === 'ArrowDown') {
+      handleNextMinute(e);
+      didTriggerMinuteChange = true;
+    }
+
+    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);
+    }
+
+    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);
+    }
+
+    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]);
+  const handleCurrMeridiemOnKeyDown = useCallback(e => {
+    const {
+      key,
+      shiftKey
+    } = e;
+    if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
+    let didTriggerMeridiemChange = false;
+
+    if (key === 'ArrowUp') {
+      handleTimeWheelBtnChangeMeridiem('AM', e);
+      didTriggerMeridiemChange = true;
+    }
+
+    if (key === 'ArrowDown') {
+      handleTimeWheelBtnChangeMeridiem('PM', e);
+      didTriggerMeridiemChange = true;
+    }
+
+    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);
+    }
+
+    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 (!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 (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]);
+  return useMemo(() => ({
+    handlePrevHourBtnOnKeyDown,
+    handleCurrHourOnKeyDown,
+    handleNextHourBtnOnKeyDown,
+    handlePrevMinuteBtnOnKeyDown,
+    handleCurrMinutesOnKeyDown,
+    handleNextMinuteBtnOnKeyDown,
+    handlePrevMeridiemBtnOnKeyDown,
+    handleCurrMeridiemOnKeyDown,
+    handleNextMeridiemBtnOnKeyDown,
+    handlePickerIconKeyDown
+  }), [handleCurrHourOnKeyDown, handleCurrMeridiemOnKeyDown, handleCurrMinutesOnKeyDown, handleNextHourBtnOnKeyDown, handleNextMeridiemBtnOnKeyDown, handleNextMinuteBtnOnKeyDown, handlePrevHourBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, handlePickerIconKeyDown]);
+};
+
+export { useKeyboardHandlers };

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

@@ -0,0 +1,80 @@
+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';
+import { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside.js';
+
+const usePopperTriggerLogic = () => {
+  const {
+    pickerButtonRef,
+    props: {
+      onPickerClose,
+      onPickerOpen
+    },
+    currHourBtnRef,
+    isWithCalendarToo
+  } = useContext(ControlledDateTimePickerContext);
+  const [showTimePicker, setShowTimePicker] = useState(false);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const usePopperHelpers = usePopper(referenceElement, popperElement, {
+    modifiers: [{
+      name: 'arrow',
+      options: {
+        element: arrowElement
+      }
+    }]
+  });
+  const closeTimePicker = useCallback(() => {
+    setShowTimePicker(false);
+    onPickerClose();
+  }, [onPickerClose]);
+  const handleToggleTimePicker = useCallback(() => {
+    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);
+        });
+      } else onPickerClose();
+
+      return !oldShowCalendar;
+    });
+  }, [currHourBtnRef, isWithCalendarToo, onPickerClose, onPickerOpen]);
+  useOnClickOutside(popperElement, e => {
+    var _pickerButtonRef$curr, _pickerButtonRef$curr2;
+
+    if (!(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();
+  });
+  const handleSetTriggerRef = useCallback(newRef => {
+    pickerButtonRef.current = newRef;
+    setReferenceElement(newRef);
+  }, [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);
+    }
+  }, [closeTimePicker, pickerButtonRef]);
+  return useMemo(() => ({
+    showTimePicker,
+    setShowTimePicker,
+    setPopperElement,
+    setArrowElement,
+    usePopperHelpers,
+    handleToggleTimePicker,
+    handleSetTriggerRef,
+    handleMenuWrapperKeyDown
+  }), [handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleTimePicker, showTimePicker, usePopperHelpers]);
+};
+
+export { usePopperTriggerLogic };

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

@@ -0,0 +1,102 @@
+import styled from 'styled-components';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button';
+
+/* eslint-disable max-lines */
+const ResettedInput = /*#__PURE__*/styled.input.withConfig({
+  componentId: "sc-1t4k08s-0"
+})(["border:none;box-shadow:none;background:none;text-align:center;height:100%;display:flex;align-items:center;:focus{outline:none;}padding-top:2px;"]);
+const StyledSeparator = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1t4k08s-1"
+})(["padding-top:2px;margin:auto;"]);
+const StyledColonSeparator = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1t4k08s-2"
+})(["padding-bottom:1px;margin:auto;"]);
+const Styled2DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
+  componentId: "sc-1t4k08s-3"
+})(["width:100%;height:100%;", ""], _ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? "color: #616b7f;" : "";
+});
+const StyledMin4DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
+  componentId: "sc-1t4k08s-4"
+})(["width:100%;height:100%;", ""], _ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled ? "color: #616b7f;" : "";
+});
+const StyledInputsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1t4k08s-5"
+})(["width:max-content;align-items:center;", " border-color:", ";border-radius:2px;padding-left:", ";padding-right:", ";position:relative;", ""], _ref3 => {
+  let {
+    isControllerOnly
+  } = _ref3;
+  return isControllerOnly ? "" : "\n  height: 28px;    \n  border-width: 1px;\n  border-style: solid;\n  ";
+}, _ref4 => {
+  let {
+    theme,
+    hasError,
+    disabled
+  } = _ref4;
+  if (hasError) return theme.colors.danger[900];
+  if (disabled) return theme.colors.neutral[400];
+  return theme.colors.neutral[200];
+}, _ref5 => {
+  let {
+    justPicker
+  } = _ref5;
+  return justPicker ? '0' : '2px';
+}, _ref6 => {
+  let {
+    withAnyPicker
+  } = _ref6;
+  return withAnyPicker ? '' : '0';
+}, _ref7 => {
+  let {
+    theme,
+    disabled
+  } = _ref7;
+  return disabled ? "background-color: ".concat(theme.colors.neutral[100], ";") : "";
+});
+const StyledDateInputsWrapperGrid = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1t4k08s-6"
+})(["display:grid;grid-template-columns:24px min-content 24px min-content 48px;grid-template-rows:min-content;padding:6px 0;gap:0px 0px;align-items:center;input,p{margin:0;}"]);
+const StyledTimeInputsWrapperGrid = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1t4k08s-7"
+})(["display:grid;grid-template-columns:24px min-content 24px min-content 24px min-content 24px;grid-template-rows:min-content;padding:6px 0;gap:0px 0px;align-items:center;input,p{margin:0;}"]);
+const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1t4k08s-8"
+})(["position:relative;", ":before{content:'';position:absolute;top:0px;left:-1px;width:100%;height:100%;border-radius:2px;z-index:-1;", "}"], _ref8 => {
+  let {
+    isControllerOnly
+  } = _ref8;
+  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    ");
+});
+const StyledFocusWithIn = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1t4k08s-9"
+})(["position:relative;&:focus-within{&:after{display:block;content:' ';position:absolute;top:-5px;left:-2px;width:calc(100% + 4px);height:calc(100% + 10px);border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.brand[700];
+});
+const StyledClearButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
+  componentId: "sc-1t4k08s-10"
+})(["height:26px;position:relative;visibility:", ";"], _ref11 => {
+  let {
+    shouldDisplay
+  } = _ref11;
+  return shouldDisplay ? 'visible' : 'hidden';
+});
+
+export { Styled2DigitsInput, StyledClearButton, StyledColonSeparator, StyledDateInputsWrapperGrid, StyledFocusWithIn, StyledInputsWrapperGrid, StyledMin4DigitsInput, StyledPickersIconsWrapperGrid, StyledSeparator, StyledTimeInputsWrapperGrid };

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

@@ -0,0 +1,53 @@
+import React, { useCallback } from 'react';
+import { Styled2DigitsInput } from '../Styleds.js';
+import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
+import { jsx } from 'react/jsx-runtime';
+
+const regExpNumbers = /^[0-9]+$/;
+
+const isInvalidHour = hours => {
+  if (hours === '') return false;
+  const numberOnly = regExpNumbers.test(hours);
+  return hours.length > 2 || hours === '00' || !numberOnly || Number.parseInt(hours, 10) > 12;
+};
+
+const HHInput = /*#__PURE__*/React.memo(_ref => {
+  let {
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    disabled,
+    placeholder,
+    ariaCurrentValueForInputs,
+    contextRef,
+    autoFocusHourInput
+  } = _ref;
+  const validateOnChange = useCallback(e => {
+    var _e$target;
+
+    if (isInvalidHour(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+      e.preventDefault();
+      return;
+    }
+
+    onChange(e);
+  }, [onChange]);
+  return /*#__PURE__*/jsx(Styled2DigitsInput, {
+    autoFocus: autoFocusHourInput,
+    onChange: validateOnChange,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    value: value,
+    ref: contextRef,
+    placeholder: placeholder,
+    "aria-label": "hours input field ".concat(ariaCurrentValueForInputs),
+    "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR,
+    disabled: disabled,
+    "aria-disabled": disabled
+  });
+});
+
+export { HHInput };

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

@@ -0,0 +1,55 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { useCallback } from 'react';
+import { Styled2DigitsInput } from '../Styleds.js';
+import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
+import { jsx } from 'react/jsx-runtime';
+
+const validFirstDigits = ['a', 'A', 'p', 'P'];
+const validSecondDigits = ['m', 'M'];
+
+const isInvalidMeridiem = meridiem => {
+  if (meridiem === '') return false;
+  const [firstDigit, secondDigit] = meridiem === null || meridiem === void 0 ? void 0 : meridiem.split('');
+  const isValidFirstDigit = meridiem.length < 1 && !firstDigit || validFirstDigits.includes(firstDigit);
+  const isValidSecondDigit = !secondDigit || validSecondDigits.includes(secondDigit);
+  return meridiem.length > 2 || !isValidFirstDigit || !isValidSecondDigit;
+};
+
+const MeridiemInput = /*#__PURE__*/React.memo(_ref => {
+  let {
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    disabled,
+    placeholder,
+    ariaCurrentValueForInputs,
+    contextRef
+  } = _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)) {
+      e.preventDefault();
+      return;
+    }
+
+    onChange(e);
+  }, [onChange]);
+  return /*#__PURE__*/jsx(Styled2DigitsInput, {
+    onChange: validateOnChange,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    value: value,
+    ref: contextRef,
+    placeholder: placeholder,
+    "aria-label": "meridiem input field ".concat(ariaCurrentValueForInputs),
+    "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM,
+    disabled: disabled,
+    "aria-disabled": disabled
+  });
+});
+
+export { MeridiemInput };