@elliemae/ds-controlled-form 2.0.0-alpha.1 → 2.0.0-alpha.13

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

@@ -1,34 +1,50 @@
-import { useCallback, useMemo } from 'react';
+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 = ({
-  handlePrevHour,
-  handleNextHour,
-  handlePrevMinute,
-  handleNextMinute,
-  // handlePrevSecond,
-  // handleNextSecond,
-  handleTimeWheelBtnChangeMeridiem,
-  prevMonthBtnRef,
-  prevHourBtnRef,
-  currHourBtnRef,
-  nextHourBtnRef,
-  prevMinutesBtnRef,
-  currMinutesBtnRef,
-  nextMinutesBtnRef,
-  // prevSecondsBtnRef,
-  // currSecondsBtnRef,
-  // nextSecondsBtnRef,
-  prevMeridiemBtnRef,
-  currMeridiemBtnRef,
-  nextMeridiemBtnRef,
-  hideDate,
-  hideTime,
-  monthInputRef,
-  hourInputRef,
-  isWithCalendarToo
-}) => {
-  const onHomeKeyDown = useCallback(() => {
+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);
@@ -37,256 +53,283 @@ const useKeyboardHandlers = ({
     const {
       key
     } = e;
-    const preventDefaultKeys = ['Home'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (key === 'Home') onHomeKeyDown();
-  }, [onHomeKeyDown]);
+    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;
-    } else if (key === 'ArrowDown') {
+    }
+
+    if (key === 'ArrowDown') {
       handleNextHour(e);
       didTriggerHourChange = true;
-    } else if (key === 'ArrowRight') {
+    }
+
+    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);
-    } else if (key === 'Tab' && shiftKey && !isWithCalendarToo) {
-      var _currMeridiemBtnRef$c, _currMeridiemBtnRef$c2;
-
-      e.preventDefault();
-      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);
-    } // ensure the focus is in the correct button after up/down arrow
+    }
 
+    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$curre, _currHourBtnRef$curre2;
+      var _currHourBtnRef$curre3, _currHourBtnRef$curre4;
 
-      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);
-    });
-  }, [currHourBtnRef, currMeridiemBtnRef, currMinutesBtnRef, handleNextHour, handlePrevHour, isWithCalendarToo]);
+      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;
-    } else if (key === 'ArrowDown') {
+    }
+
+    if (key === 'ArrowDown') {
       handleNextMinute(e);
       didTriggerMinuteChange = true;
-    } else if (key === 'ArrowLeft') {
-      var _currHourBtnRef$curre3, _currHourBtnRef$curre4;
+    }
 
-      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);
-    } else if (key === 'ArrowRight') {
-      var _currMeridiemBtnRef$c3, _currMeridiemBtnRef$c4;
+    if (key === 'ArrowLeft') {
+      var _currHourBtnRef$curre5, _currHourBtnRef$curre6;
 
-      // currSecondsBtnRef?.current?.focus?.();
-      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);
-    } // ensure the focus is in the correct button after up/down arrow
+      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);
     });
-  }, [currHourBtnRef, currMinutesBtnRef, currMeridiemBtnRef, handleNextMinute, handlePrevMinute]); // const handleCurrSecondsOnKeyDown = useCallback(
-  //   (e) => {
-  //     const { key } = e;
-  //     let didTriggerSecondChange = false;
-  //     if (key === 'ArrowUp') {
-  //       handlePrevSecond(e);
-  //       didTriggerSecondChange = true;
-  //     } else if (key === 'ArrowDown') {
-  //       handleNextSecond(e);
-  //       didTriggerSecondChange = true;
-  //     } else if (key === 'ArrowLeft') {
-  //       currMinutesBtnRef?.current?.focus?.();
-  //     } else if (key === 'ArrowRight') {
-  //       currMeridiemBtnRef?.current?.focus?.();
-  //     }
-  //     // ensure the focus is in the correct button after up/down arrow
-  //     if (didTriggerSecondChange) setTimeout(() => currSecondsBtnRef?.current?.focus?.(), 10);
-  //   },
-  //   [
-  //     currMeridiemBtnRef,
-  //     currMinutesBtnRef,
-  //     currSecondsBtnRef,
-  //     handleNextSecond,
-  //     handlePrevSecond,
-  //   ],
-  // );
-
+  }, [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;
-    } else if (key === 'ArrowDown') {
+    }
+
+    if (key === 'ArrowDown') {
       handleTimeWheelBtnChangeMeridiem('PM', e);
       didTriggerMeridiemChange = true;
-    } else if (key === 'ArrowLeft') {
+    }
+
+    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);
-    } else if (key === 'Tab' && !shiftKey) {
-      var _prevMonthBtnRef$curr, _prevMonthBtnRef$curr2, _currHourBtnRef$curre5, _currHourBtnRef$curre6;
-
-      e.preventDefault();
-      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$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);
-    } // ensure the focus is in the correct button after up/down arrow
+    }
 
+    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$c5, _currMeridiemBtnRef$c6;
+      var _currMeridiemBtnRef$c7, _currMeridiemBtnRef$c8;
 
-      return 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);
-    });
-  }, [currHourBtnRef, currMeridiemBtnRef, currMinutesBtnRef, handleTimeWheelBtnChangeMeridiem, isWithCalendarToo, prevMonthBtnRef]);
+      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);
-    } else if (key === 'ArrowDown') {
-      var _currHourBtnRef$curre7, _currHourBtnRef$curre8;
+    }
 
-      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);
+    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);
     }
-  }, [currHourBtnRef, prevMinutesBtnRef]);
+
+    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);
-    } else if (key === 'ArrowLeft') {
+    }
+
+    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);
-    } else if (key === 'ArrowDown') {
+    }
+
+    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);
     }
-  }, [currMinutesBtnRef, prevHourBtnRef, prevMeridiemBtnRef]); // const handlePrevSecondBtnOnKeyDown = useCallback(
-  //   (e) => {
-  //     const { key } = e;
-  //     if (key === 'ArrowRight') {
-  //       prevMeridiemBtnRef?.current?.focus?.();
-  //     } else if (key === 'ArrowLeft') {
-  //       prevMinutesBtnRef?.current?.focus?.();
-  //     } else if (key === 'ArrowDown') {
-  //       currSecondsBtnRef?.current?.focus?.();
-  //     }
-  //   },
-  //   [currSecondsBtnRef, prevMeridiemBtnRef, prevMinutesBtnRef],
-  // );
 
+    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;
 
-      // prevSecondsBtnRef?.current?.focus?.();
       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);
-    } else if (key === 'ArrowDown') {
-      var _currMeridiemBtnRef$c7, _currMeridiemBtnRef$c8;
+    }
+
+    if (key === 'ArrowDown') {
+      var _currMeridiemBtnRef$c9, _currMeridiemBtnRef$c10;
 
-      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);
+      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);
     }
-  }, [currMeridiemBtnRef, prevMinutesBtnRef]);
+
+    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);
-    } else if (key === 'ArrowUp') {
-      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 === '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);
     }
-  }, [currHourBtnRef, nextMinutesBtnRef]);
+
+    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;
 
-      // nextSecondsBtnRef?.current?.focus?.();
       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);
-    } else if (key === 'ArrowLeft') {
+    }
+
+    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);
-    } else if (key === 'ArrowUp') {
+    }
+
+    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);
     }
-  }, [currMinutesBtnRef, nextHourBtnRef, nextMeridiemBtnRef]); // const handleNextSecondBtnOnKeyDown = useCallback(
-  //   (e) => {
-  //     const { key } = e;
-  //     if (key === 'ArrowRight') {
-  //       nextMeridiemBtnRef?.current?.focus?.();
-  //     } else if (key === 'ArrowLeft') {
-  //       nextMinutesBtnRef?.current?.focus?.();
-  //     } else if (key === 'ArrowUp') {
-  //       currSecondsBtnRef?.current?.focus?.();
-  //     }
-  //   },
-  //   [currSecondsBtnRef, nextMeridiemBtnRef, nextMinutesBtnRef],
-  // );
 
+    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);
-    } else if (key === 'ArrowUp') {
-      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 === '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);
     }
-  }, [currMeridiemBtnRef, nextMinutesBtnRef]);
+
+    if (key === 'Home') onHomeKeyDownInsideTimeWheel();
+    if (key === 'End') onEndKeyDownInsideTimeWheel();
+  }, [currMeridiemBtnRef, nextMinutesBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel]);
   return useMemo(() => ({
     handlePrevHourBtnOnKeyDown,
     handleCurrHourOnKeyDown,
@@ -294,17 +337,11 @@ const useKeyboardHandlers = ({
     handlePrevMinuteBtnOnKeyDown,
     handleCurrMinutesOnKeyDown,
     handleNextMinuteBtnOnKeyDown,
-    // handlePrevSecondBtnOnKeyDown,
-    // handleCurrSecondsOnKeyDown,
-    // handleNextSecondBtnOnKeyDown,
     handlePrevMeridiemBtnOnKeyDown,
     handleCurrMeridiemOnKeyDown,
     handleNextMeridiemBtnOnKeyDown,
     handlePickerIconKeyDown
-  }), [handleCurrHourOnKeyDown, handleCurrMeridiemOnKeyDown, handleCurrMinutesOnKeyDown, // handleCurrSecondsOnKeyDown,
-  handleNextHourBtnOnKeyDown, handleNextMeridiemBtnOnKeyDown, handleNextMinuteBtnOnKeyDown, // handleNextSecondBtnOnKeyDown,
-  handlePrevHourBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, // handlePrevSecondBtnOnKeyDown,
-  handlePickerIconKeyDown]);
+  }), [handleCurrHourOnKeyDown, handleCurrMeridiemOnKeyDown, handleCurrMinutesOnKeyDown, handleNextHourBtnOnKeyDown, handleNextMeridiemBtnOnKeyDown, handleNextMinuteBtnOnKeyDown, handlePrevHourBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, handlePickerIconKeyDown]);
 };
 
 export { useKeyboardHandlers };

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

@@ -1,12 +1,19 @@
-import { useState, useCallback, useMemo } from 'react';
+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 = ({
-  pickerButtonRef,
-  onPickerClose,
-  onPickerOpen
-}) => {
+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);
@@ -22,17 +29,21 @@ const usePopperTriggerLogic = ({
   const closeTimePicker = useCallback(() => {
     setShowTimePicker(false);
     onPickerClose();
-  }, [onPickerClose]); // const openTimePicker = useCallback(() => {
-  //   setShowTimePicker(true);
-  //   onPickerOpen();
-  // }, [onPickerOpen]);
-
+  }, [onPickerClose]);
   const handleToggleTimePicker = useCallback(() => {
     setShowTimePicker(oldShowCalendar => {
-      if (!oldShowCalendar) onPickerOpen();else onPickerClose();
+      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;
     });
-  }, [onPickerClose, onPickerOpen]);
+  }, [currHourBtnRef, isWithCalendarToo, onPickerClose, onPickerOpen]);
   useOnClickOutside(popperElement, e => {
     var _pickerButtonRef$curr, _pickerButtonRef$curr2;