@elliemae/ds-controlled-form 1.57.1-rc.0 → 2.0.0-alpha.11

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

@@ -3,74 +3,71 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var controlledDateTimePicker_ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
-var controlledDateTimePicker_utils_constants = require('../../../utils/constants.js');
-require('../../../ControlledDateTimePickerTypes.js');
 
 /* eslint-disable @typescript-eslint/indent */
-var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
-  var handlePrevHour = _ref.handlePrevHour,
-      handleNextHour = _ref.handleNextHour,
-      handlePrevMinute = _ref.handlePrevMinute,
-      handleNextMinute = _ref.handleNextMinute,
-      handleTimeWheelBtnChangeMeridiem = _ref.handleTimeWheelBtnChangeMeridiem;
-
-  var _useContext = React.useContext(controlledDateTimePicker_ControlledDateTimePickerCTX.ControlledDateTimePickerContext),
-      withAnyInputs = _useContext.withAnyInputs,
-      isWithTimeInputs = _useContext.isWithTimeInputs,
-      isWithDateInputs = _useContext.isWithDateInputs,
-      isWithCalendarToo = _useContext.isWithCalendarToo,
-      isControllerOnly = _useContext.isControllerOnly,
-      hideDate = _useContext.hideDate,
-      hideTime = _useContext.hideTime,
-      monthInputRef = _useContext.monthInputRef,
-      hourInputRef = _useContext.hourInputRef,
-      meridiemInputRef = _useContext.meridiemInputRef,
-      yearInputRef = _useContext.yearInputRef,
-      prevMonthBtnRef = _useContext.prevMonthBtnRef,
-      prevHourBtnRef = _useContext.prevHourBtnRef,
-      currHourBtnRef = _useContext.currHourBtnRef,
-      nextHourBtnRef = _useContext.nextHourBtnRef,
-      prevMinutesBtnRef = _useContext.prevMinutesBtnRef,
-      currMinutesBtnRef = _useContext.currMinutesBtnRef,
-      nextMinutesBtnRef = _useContext.nextMinutesBtnRef,
-      prevMeridiemBtnRef = _useContext.prevMeridiemBtnRef,
-      currMeridiemBtnRef = _useContext.currMeridiemBtnRef,
-      nextMeridiemBtnRef = _useContext.nextMeridiemBtnRef;
-
-  var onHomeKeyDownInsideTimeWheel = React.useCallback(function () {
+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,
+  isControllerOnly
+}) => {
+  const onHomeKeyDownInsideTimeWheel = React.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]);
-  var onEndKeyDownInsideTimeWheel = React.useCallback(function () {
+  const onEndKeyDownInsideTimeWheel = React.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]);
-  var onHomeKeyDownTriggerIcon = React.useCallback(function () {
+  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]);
-  var handlePickerIconKeyDown = React.useCallback(function (e) {
-    var key = e.key;
-    if (controlledDateTimePicker_utils_constants.homeEndKeys.includes(key)) e.preventDefault();
-    if (controlledDateTimePicker_utils_constants.homeEndKeys.includes(key)) e.stopPropagation();
+  const handlePickerIconKeyDown = React.useCallback(e => {
+    const {
+      key
+    } = e;
+    const preventDefaultKeys = ['Home', 'End'];
+    const stopPropagationKeys = ['Home', 'End'];
+    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (stopPropagationKeys.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]);
-  var handleCurrHourOnKeyDown = React.useCallback(function (e) {
-    var key = e.key,
-        shiftKey = e.shiftKey;
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
-    var didTriggerHourChange = false;
+  }, [onHomeKeyDownTriggerIcon]);
+  const handleCurrHourOnKeyDown = React.useCallback(e => {
+    const {
+      key,
+      shiftKey
+    } = e;
+    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    let didTriggerHourChange = false;
 
     if (key === 'ArrowUp') {
       handlePrevHour(e);
@@ -91,7 +88,7 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel(); // ensure the focus is in the correct button after up/down arrow
 
-    if (didTriggerHourChange) setTimeout(function () {
+    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);
@@ -104,11 +101,15 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
       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]);
-  var handleCurrMinutesOnKeyDown = React.useCallback(function (e) {
-    var key = e.key;
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
-    var didTriggerMinuteChange = false;
+  const handleCurrMinutesOnKeyDown = React.useCallback(e => {
+    const {
+      key
+    } = e;
+    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    let didTriggerMinuteChange = false;
 
     if (key === 'ArrowUp') {
       handlePrevMinute(e);
@@ -129,24 +130,58 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
     if (key === 'ArrowRight') {
       var _currMeridiemBtnRef$c5, _currMeridiemBtnRef$c6;
 
+      // currSecondsBtnRef?.current?.focus?.();
       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(function () {
+    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]);
-  var handleCurrMeridiemOnKeyDown = React.useCallback(function (e) {
-    var key = e.key,
-        shiftKey = e.shiftKey;
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
-    var didTriggerMeridiemChange = false;
+  }, [onHomeKeyDownInsideTimeWheel, onEndKeyDownInsideTimeWheel, handlePrevMinute, handleNextMinute, currHourBtnRef, currMeridiemBtnRef, currMinutesBtnRef]); // const handleCurrSecondsOnKeyDown = useCallback(
+  //   (e) => {
+  //     const { key } = e;
+  //     let didTriggerSecondChange = false;
+  //     if (key === 'ArrowUp') {
+  //       handlePrevSecond(e);
+  //       didTriggerSecondChange = true;
+  //     }
+  // if (key === 'ArrowDown') {
+  //       handleNextSecond(e);
+  //       didTriggerSecondChange = true;
+  //     }
+  // if (key === 'ArrowLeft') {
+  //       currMinutesBtnRef?.current?.focus?.();
+  //     }
+  // 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,
+  //   ],
+  // );
+
+  const handleCurrMeridiemOnKeyDown = React.useCallback(e => {
+    const {
+      key,
+      shiftKey
+    } = e;
+    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    let didTriggerMeridiemChange = false;
 
     if (key === 'ArrowUp') {
       handleTimeWheelBtnChangeMeridiem('AM', e);
@@ -168,7 +203,7 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel(); // ensure the focus is in the correct button after up/down arrow
 
-    if (didTriggerMeridiemChange) setTimeout(function () {
+    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);
@@ -181,10 +216,14 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
       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]);
-  var handlePrevHourBtnOnKeyDown = React.useCallback(function (e) {
-    var key = e.key;
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
+  const handlePrevHourBtnOnKeyDown = React.useCallback(e => {
+    const {
+      key
+    } = e;
+    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (stopPropagationKeys.includes(key)) e.stopPropagation();
 
     if (key === 'ArrowRight') {
       var _prevMinutesBtnRef$cu, _prevMinutesBtnRef$cu2;
@@ -201,10 +240,14 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel();
   }, [currHourBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel, prevMinutesBtnRef]);
-  var handlePrevMinuteBtnOnKeyDown = React.useCallback(function (e) {
-    var key = e.key;
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
+  const handlePrevMinuteBtnOnKeyDown = React.useCallback(e => {
+    const {
+      key
+    } = e;
+    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (stopPropagationKeys.includes(key)) e.stopPropagation();
 
     if (key === 'ArrowRight') {
       var _prevMeridiemBtnRef$c, _prevMeridiemBtnRef$c2;
@@ -227,15 +270,35 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
 
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel();
-  }, [currMinutesBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel, prevHourBtnRef, prevMeridiemBtnRef]);
-  var handlePrevMeridiemBtnOnKeyDown = React.useCallback(function (e) {
-    var key = e.key;
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
+  }, [currMinutesBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel, prevHourBtnRef, prevMeridiemBtnRef]); // const handlePrevSecondBtnOnKeyDown = useCallback(
+  //   (e) => {
+  //     const { key } = e;
+  //     if (key === 'ArrowRight') {
+  //       prevMeridiemBtnRef?.current?.focus?.();
+  //     }
+  // if (key === 'ArrowLeft') {
+  //       prevMinutesBtnRef?.current?.focus?.();
+  //     }
+  // if (key === 'ArrowDown') {
+  //       currSecondsBtnRef?.current?.focus?.();
+  //     }
+  //   },
+  //   [currSecondsBtnRef, prevMeridiemBtnRef, prevMinutesBtnRef],
+  // );
+
+  const handlePrevMeridiemBtnOnKeyDown = React.useCallback(e => {
+    const {
+      key
+    } = e;
+    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (stopPropagationKeys.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);
     }
 
@@ -248,10 +311,14 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel();
   }, [currMeridiemBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel, prevMinutesBtnRef]);
-  var handleNextHourBtnOnKeyDown = React.useCallback(function (e) {
-    var key = e.key;
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
+  const handleNextHourBtnOnKeyDown = React.useCallback(e => {
+    const {
+      key
+    } = e;
+    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (stopPropagationKeys.includes(key)) e.stopPropagation();
 
     if (key === 'ArrowRight') {
       var _nextMinutesBtnRef$cu, _nextMinutesBtnRef$cu2;
@@ -268,14 +335,19 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel();
   }, [currHourBtnRef, nextMinutesBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel]);
-  var handleNextMinuteBtnOnKeyDown = React.useCallback(function (e) {
-    var key = e.key;
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
+  const handleNextMinuteBtnOnKeyDown = React.useCallback(e => {
+    const {
+      key
+    } = e;
+    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (stopPropagationKeys.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);
     }
 
@@ -293,11 +365,30 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
 
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel();
-  }, [currMinutesBtnRef, nextHourBtnRef, nextMeridiemBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel]);
-  var handleNextMeridiemBtnOnKeyDown = React.useCallback(function (e) {
-    var key = e.key;
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
+  }, [currMinutesBtnRef, nextHourBtnRef, nextMeridiemBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel]); // const handleNextSecondBtnOnKeyDown = useCallback(
+  //   (e) => {
+  //     const { key } = e;
+  //     if (key === 'ArrowRight') {
+  //       nextMeridiemBtnRef?.current?.focus?.();
+  //     }
+  // if (key === 'ArrowLeft') {
+  //       nextMinutesBtnRef?.current?.focus?.();
+  //     }
+  // if (key === 'ArrowUp') {
+  //       currSecondsBtnRef?.current?.focus?.();
+  //     }
+  //   },
+  //   [currSecondsBtnRef, nextMeridiemBtnRef, nextMinutesBtnRef],
+  // );
+
+  const handleNextMeridiemBtnOnKeyDown = React.useCallback(e => {
+    const {
+      key
+    } = e;
+    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (stopPropagationKeys.includes(key)) e.stopPropagation();
 
     if (key === 'ArrowLeft') {
       var _nextMinutesBtnRef$cu3, _nextMinutesBtnRef$cu4;
@@ -314,21 +405,24 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel();
   }, [currMeridiemBtnRef, nextMinutesBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel]);
-  return React.useMemo(function () {
-    return {
-      handlePrevHourBtnOnKeyDown: handlePrevHourBtnOnKeyDown,
-      handleCurrHourOnKeyDown: handleCurrHourOnKeyDown,
-      handleNextHourBtnOnKeyDown: handleNextHourBtnOnKeyDown,
-      handlePrevMinuteBtnOnKeyDown: handlePrevMinuteBtnOnKeyDown,
-      handleCurrMinutesOnKeyDown: handleCurrMinutesOnKeyDown,
-      handleNextMinuteBtnOnKeyDown: handleNextMinuteBtnOnKeyDown,
-      handlePrevMeridiemBtnOnKeyDown: handlePrevMeridiemBtnOnKeyDown,
-      handleCurrMeridiemOnKeyDown: handleCurrMeridiemOnKeyDown,
-      handleNextMeridiemBtnOnKeyDown: handleNextMeridiemBtnOnKeyDown,
-      handlePickerIconKeyDown: handlePickerIconKeyDown
-    };
-  }, [handleCurrHourOnKeyDown, handleCurrMeridiemOnKeyDown, handleCurrMinutesOnKeyDown, handleNextHourBtnOnKeyDown, handleNextMeridiemBtnOnKeyDown, handleNextMinuteBtnOnKeyDown, handlePrevHourBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, handlePickerIconKeyDown]);
+  return React.useMemo(() => ({
+    handlePrevHourBtnOnKeyDown,
+    handleCurrHourOnKeyDown,
+    handleNextHourBtnOnKeyDown,
+    handlePrevMinuteBtnOnKeyDown,
+    handleCurrMinutesOnKeyDown,
+    handleNextMinuteBtnOnKeyDown,
+    // handlePrevSecondBtnOnKeyDown,
+    // handleCurrSecondsOnKeyDown,
+    // handleNextSecondBtnOnKeyDown,
+    handlePrevMeridiemBtnOnKeyDown,
+    handleCurrMeridiemOnKeyDown,
+    handleNextMeridiemBtnOnKeyDown,
+    handlePickerIconKeyDown
+  }), [handleCurrHourOnKeyDown, handleCurrMeridiemOnKeyDown, handleCurrMinutesOnKeyDown, // handleCurrSecondsOnKeyDown,
+  handleNextHourBtnOnKeyDown, handleNextMeridiemBtnOnKeyDown, handleNextMinuteBtnOnKeyDown, // handleNextSecondBtnOnKeyDown,
+  handlePrevHourBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, // handlePrevSecondBtnOnKeyDown,
+  handlePickerIconKeyDown]);
 };
 
 exports.useKeyboardHandlers = useKeyboardHandlers;
-//# sourceMappingURL=useKeyboardHandlers.js.map

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

@@ -2,47 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactPopper = require('react-popper');
-var controlledDateTimePicker_ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
-var controlledDateTimePicker_utils_hooks_useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');
-require('../../../ControlledDateTimePickerTypes.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-
-var usePopperTriggerLogic = function usePopperTriggerLogic() {
-  var _useContext = React.useContext(controlledDateTimePicker_ControlledDateTimePickerCTX.ControlledDateTimePickerContext),
-      pickerButtonRef = _useContext.pickerButtonRef,
-      _useContext$props = _useContext.props,
-      onPickerClose = _useContext$props.onPickerClose,
-      onPickerOpen = _useContext$props.onPickerOpen,
-      currHourBtnRef = _useContext.currHourBtnRef,
-      isWithCalendarToo = _useContext.isWithCalendarToo;
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      showTimePicker = _useState2[0],
-      setShowTimePicker = _useState2[1];
-
-  var _useState3 = React.useState(null),
-      _useState4 = _slicedToArray__default['default'](_useState3, 2),
-      referenceElement = _useState4[0],
-      setReferenceElement = _useState4[1];
-
-  var _useState5 = React.useState(null),
-      _useState6 = _slicedToArray__default['default'](_useState5, 2),
-      popperElement = _useState6[0],
-      setPopperElement = _useState6[1];
-
-  var _useState7 = React.useState(null),
-      _useState8 = _slicedToArray__default['default'](_useState7, 2),
-      arrowElement = _useState8[0],
-      setArrowElement = _useState8[1];
-
-  var usePopperHelpers = reactPopper.usePopper(referenceElement, popperElement, {
+var useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');
+
+const usePopperTriggerLogic = ({
+  pickerButtonRef,
+  currHourBtnRef,
+  onPickerClose,
+  onPickerOpen,
+  isWithCalendarToo
+}) => {
+  const [showTimePicker, setShowTimePicker] = React.useState(false);
+  const [referenceElement, setReferenceElement] = React.useState(null);
+  const [popperElement, setPopperElement] = React.useState(null);
+  const [arrowElement, setArrowElement] = React.useState(null);
+  const usePopperHelpers = reactPopper.usePopper(referenceElement, popperElement, {
     modifiers: [{
       name: 'arrow',
       options: {
@@ -50,15 +26,15 @@ var usePopperTriggerLogic = function usePopperTriggerLogic() {
       }
     }]
   });
-  var closeTimePicker = React.useCallback(function () {
+  const closeTimePicker = React.useCallback(() => {
     setShowTimePicker(false);
     onPickerClose();
   }, [onPickerClose]);
-  var handleToggleTimePicker = React.useCallback(function () {
-    setShowTimePicker(function (oldShowCalendar) {
+  const handleToggleTimePicker = React.useCallback(() => {
+    setShowTimePicker(oldShowCalendar => {
       if (!oldShowCalendar) {
         onPickerOpen();
-        if (!isWithCalendarToo) setTimeout(function () {
+        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);
@@ -68,17 +44,19 @@ var usePopperTriggerLogic = function usePopperTriggerLogic() {
       return !oldShowCalendar;
     });
   }, [currHourBtnRef, isWithCalendarToo, onPickerClose, onPickerOpen]);
-  controlledDateTimePicker_utils_hooks_useOnClickOutside.useOnClickOutside(popperElement, function (e) {
+  useOnClickOutside.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();
   });
-  var handleSetTriggerRef = React.useCallback(function (newRef) {
+  const handleSetTriggerRef = React.useCallback(newRef => {
     pickerButtonRef.current = newRef;
     setReferenceElement(newRef);
   }, [pickerButtonRef]);
-  var handleMenuWrapperKeyDown = React.useCallback(function (e) {
-    var key = e.key;
+  const handleMenuWrapperKeyDown = React.useCallback(e => {
+    const {
+      key
+    } = e;
 
     if (key === 'Escape') {
       var _pickerButtonRef$curr3, _pickerButtonRef$curr4;
@@ -87,19 +65,16 @@ var usePopperTriggerLogic = function usePopperTriggerLogic() {
       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 React.useMemo(function () {
-    return {
-      showTimePicker: showTimePicker,
-      setShowTimePicker: setShowTimePicker,
-      setPopperElement: setPopperElement,
-      setArrowElement: setArrowElement,
-      usePopperHelpers: usePopperHelpers,
-      handleToggleTimePicker: handleToggleTimePicker,
-      handleSetTriggerRef: handleSetTriggerRef,
-      handleMenuWrapperKeyDown: handleMenuWrapperKeyDown
-    };
-  }, [handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleTimePicker, showTimePicker, usePopperHelpers]);
+  return React.useMemo(() => ({
+    showTimePicker,
+    setShowTimePicker,
+    setPopperElement,
+    setArrowElement,
+    usePopperHelpers,
+    handleToggleTimePicker,
+    handleSetTriggerRef,
+    handleMenuWrapperKeyDown
+  }), [handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleTimePicker, showTimePicker, usePopperHelpers]);
 };
 
 exports.usePopperTriggerLogic = usePopperTriggerLogic;
-//# sourceMappingURL=usePopperTriggerLogic.js.map