@elliemae/ds-controlled-form 2.3.0-next.3 → 3.0.0-alpha.0

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

@@ -1,130 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
-var usePopperTriggerLogic = require('./usePopperTriggerLogic.js');
-var useCurrentDisplayedWheelsLogic = require('./useCurrentDisplayedWheelsLogic.js');
-var useKeyboardHandlers = require('./useKeyboardHandlers.js');
-
-/* eslint-disable max-statements */
-const useConfigTimePickerCTX = () => {
-  const {
-    props: {
-      minutesInterval,
-      getIsDisabledTime,
-      disabled
-    },
-    tempTimeString,
-    prevHourBtnRef,
-    currHourBtnRef,
-    nextHourBtnRef,
-    prevMinutesBtnRef,
-    currMinutesBtnRef,
-    nextMinutesBtnRef,
-    prevMeridiemBtnRef,
-    currMeridiemBtnRef,
-    nextMeridiemBtnRef,
-    isControllerOnly,
-    autoFocusHourTimeWheel,
-    ariaCurrentValueForInputs
-  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  const {
-    currHourNum,
-    hours,
-    visibleHours,
-    handlePrevHour,
-    handleNextHour,
-    handleTimeWheelBtnChangeHours,
-    currMinuteNum,
-    minutes,
-    visibleMinutes,
-    handlePrevMinute,
-    handleNextMinute,
-    handleTimeWheelBtnChangeMinutes,
-    meridiem,
-    handleTimeWheelBtnChangeMeridiem
-  } = useCurrentDisplayedWheelsLogic.useCurrentDisplayedWheelsLogic({
-    minutesInterval
-  });
-  const {
-    showTimePicker,
-    setShowTimePicker,
-    setPopperElement,
-    setArrowElement,
-    usePopperHelpers,
-    handleToggleTimePicker,
-    handleSetTriggerRef,
-    handleMenuWrapperKeyDown
-  } = usePopperTriggerLogic.usePopperTriggerLogic();
-  const {
-    handlePrevHourBtnOnKeyDown,
-    handleCurrHourOnKeyDown,
-    handleNextHourBtnOnKeyDown,
-    handlePrevMinuteBtnOnKeyDown,
-    handleCurrMinutesOnKeyDown,
-    handleNextMinuteBtnOnKeyDown,
-    handlePrevMeridiemBtnOnKeyDown,
-    handleCurrMeridiemOnKeyDown,
-    handleNextMeridiemBtnOnKeyDown,
-    handlePickerIconKeyDown
-  } = useKeyboardHandlers.useKeyboardHandlers({
-    handlePrevHour,
-    handleNextHour,
-    handlePrevMinute,
-    handleNextMinute,
-    handleTimeWheelBtnChangeMeridiem
-  });
-  return React.useMemo(() => ({
-    tempTimeString,
-    isControllerOnly,
-    autoFocusHourTimeWheel,
-    showTimePicker,
-    setShowTimePicker,
-    setPopperElement,
-    setArrowElement,
-    usePopperHelpers,
-    handleToggleTimePicker,
-    handleSetTriggerRef,
-    handleMenuWrapperKeyDown,
-    currHourNum,
-    hours,
-    visibleHours,
-    handlePrevHour,
-    handleNextHour,
-    handleTimeWheelBtnChangeHours,
-    currMinuteNum,
-    minutes,
-    visibleMinutes,
-    handlePrevMinute,
-    handleNextMinute,
-    handleTimeWheelBtnChangeMinutes,
-    meridiem,
-    handleTimeWheelBtnChangeMeridiem,
-    handlePrevHourBtnOnKeyDown,
-    handleCurrHourOnKeyDown,
-    handleNextHourBtnOnKeyDown,
-    handlePrevMinuteBtnOnKeyDown,
-    handleCurrMinutesOnKeyDown,
-    handleNextMinuteBtnOnKeyDown,
-    handlePrevMeridiemBtnOnKeyDown,
-    handleCurrMeridiemOnKeyDown,
-    handleNextMeridiemBtnOnKeyDown,
-    handlePickerIconKeyDown,
-    prevHourBtnRef,
-    currHourBtnRef,
-    nextHourBtnRef,
-    prevMinutesBtnRef,
-    currMinutesBtnRef,
-    nextMinutesBtnRef,
-    prevMeridiemBtnRef,
-    currMeridiemBtnRef,
-    nextMeridiemBtnRef,
-    getIsDisabledTime,
-    ariaCurrentValueForInputs,
-    disabled
-  }), [tempTimeString, isControllerOnly, autoFocusHourTimeWheel, showTimePicker, setShowTimePicker, setPopperElement, setArrowElement, usePopperHelpers, handleToggleTimePicker, handleSetTriggerRef, handleMenuWrapperKeyDown, currHourNum, hours, visibleHours, handlePrevHour, handleNextHour, handleTimeWheelBtnChangeHours, currMinuteNum, minutes, visibleMinutes, handlePrevMinute, handleNextMinute, handleTimeWheelBtnChangeMinutes, meridiem, handleTimeWheelBtnChangeMeridiem, handlePrevHourBtnOnKeyDown, handleCurrHourOnKeyDown, handleNextHourBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, handleCurrMinutesOnKeyDown, handleNextMinuteBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handleCurrMeridiemOnKeyDown, handleNextMeridiemBtnOnKeyDown, handlePickerIconKeyDown, prevHourBtnRef, currHourBtnRef, nextHourBtnRef, prevMinutesBtnRef, currMinutesBtnRef, nextMinutesBtnRef, prevMeridiemBtnRef, currMeridiemBtnRef, nextMeridiemBtnRef, getIsDisabledTime, ariaCurrentValueForInputs, disabled]);
-};
-
-exports.useConfigTimePickerCTX = useConfigTimePickerCTX;

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

@@ -1,180 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.map.js');
-require('core-js/modules/esnext.iterator.map.js');
-var React = require('react');
-var useTimeInputs = require('../../TimeInputs/useTimeInputs.js');
-var numberHelpers = require('../../../utils/numberHelpers.js');
-var stringHelpers = require('../../../utils/stringHelpers.js');
-
-const totalHoursList = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
-const hoursInterval = 1; // using this just to unify the logic between how hours and minutes are handled
-
-const hoursStartPositionOffset = 1; // if array start from 01, this is 1, if start from 02, it's 2 ...
-
-const getTotalMinuteListWithStep = function () {
-  let step = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-  const length = Math.ceil(60 / step);
-  return new Array(length).fill('_').map((_v, i) => stringHelpers.prependStringWithPlaceHolders("".concat(i * step), 2));
-};
-
-const useCurrentDisplayedWheelsLogic = _ref => {
-  let {
-    minutesInterval
-  } = _ref;
-  const {
-    hours,
-    minutes,
-    // seconds,
-    meridiem = 'AM',
-    handleChangeHours,
-    handleChangeMinutes,
-    // handleChangeSeconds,
-    handleChangeMeridiem
-  } = useTimeInputs.useTimeInputs();
-  const currHourNum = React.useMemo(() => {
-    const hoursAsNum = numberHelpers.convertToPositiveNumberIfPossible(hours);
-    if (hoursAsNum === -1) return 1;
-    return hoursAsNum;
-  }, [hours]);
-  const currMinuteNum = React.useMemo(() => {
-    const minutesAsNum = numberHelpers.convertToPositiveNumberIfPossible(minutes);
-    if (minutesAsNum === -1) return 0;
-    return minutesAsNum;
-  }, [minutes]);
-  const totalMinutesList = React.useMemo(() => getTotalMinuteListWithStep(minutesInterval), [minutesInterval]);
-  const currMinuteIndex = React.useMemo(() => Math.floor(currMinuteNum / minutesInterval), [currMinuteNum, minutesInterval]);
-  const currHoursIndex = React.useMemo(() => Math.floor(currHourNum / hoursInterval) - hoursStartPositionOffset, [currHourNum]); // const currSecondNum = useMemo(() => {
-  //   const secondsAsNum = convertToPositiveNumberIfPossible(seconds);
-  //   if (secondsAsNum === -1) return 0;
-  //   return secondsAsNum;
-  // }, [seconds]);
-
-  const visibleHours = React.useMemo(() => {
-    const newHours = []; // if (currHoursIndex >= 2) newHours.push(totalHoursList[currHoursIndex - 2]);
-    // else newHours.push(null);
-
-    if (currHoursIndex >= 1) newHours.push(totalHoursList[currHoursIndex - 1]);else newHours.push(null);
-    newHours.push(totalHoursList[currHoursIndex]);
-    if (currHoursIndex <= 11) newHours.push(totalHoursList[currHoursIndex + 1]);else newHours.push(null); // if (currHoursIndex <= 10) newHours.push(totalHoursList[currHoursIndex + 2]);
-    // else newHours.push(null);
-
-    return newHours;
-  }, [currHoursIndex]);
-  const visibleMinutes = React.useMemo(() => {
-    const newMinutes = []; // if (currMinuteIndex >= 2)
-    //   newMinutes.push(totalMinutesList[currMinuteIndex - 2]);
-    // else newMinutes.push(null);
-
-    if (currMinuteIndex >= 1) newMinutes.push(totalMinutesList[currMinuteIndex - 1]);else newMinutes.push(null);
-    newMinutes.push(totalMinutesList[currMinuteIndex]);
-    if (currMinuteIndex < totalMinutesList.length) newMinutes.push(totalMinutesList[currMinuteIndex + 1]);else newMinutes.push(null); // if (currMinuteIndex < totalMinutesList.length -1)
-    //   newMinutes.push(totalMinutesList[currMinuteIndex + 2]);
-    // else newMinutes.push(null);
-
-    return newMinutes;
-  }, [currMinuteIndex, totalMinutesList]); // const visibleSeconds = useMemo(() => {
-  //   const newSeconds = [];
-  //   if (currSecondNum >= 3)
-  //     newSeconds.push(totalMinutesList[currSecondNum - 3]);
-  //   else newSeconds.push(null);
-  //   if (currSecondNum >= 2)
-  //     newSeconds.push(totalMinutesList[currSecondNum - 2]);
-  //   else newSeconds.push(null);
-  //   newSeconds.push(totalMinutesList[currSecondNum - 1]);
-  //   if (currSecondNum <= 59) newSeconds.push(totalMinutesList[currSecondNum]);
-  //   else newSeconds.push(null);
-  //   if (currSecondNum <= 58)
-  //     newSeconds.push(totalMinutesList[currSecondNum + 1]);
-  //   else newSeconds.push(null);
-  //   return newSeconds;
-  // }, [currSecondNum]);
-
-  const handleTimeWheelBtnChangeHours = React.useCallback((newHours, e) => {
-    handleChangeHours(newHours, e);
-  }, [handleChangeHours]);
-  const handleChangeCurrHour = React.useCallback((offset, e) => {
-    const newH = currHourNum + offset;
-    if (newH > 0 && newH <= 12) handleChangeHours(stringHelpers.prependStringWithPlaceHolders("".concat(newH), 2), e);
-  }, [currHourNum, handleChangeHours]);
-  const handlePrevHour = React.useCallback(e => {
-    handleChangeCurrHour(-1, e);
-  }, [handleChangeCurrHour]);
-  const handleNextHour = React.useCallback(e => {
-    handleChangeCurrHour(1, e);
-  }, [handleChangeCurrHour]);
-  const handleTimeWheelBtnChangeMinutes = React.useCallback((newMinutes, e) => {
-    handleChangeMinutes(newMinutes, e);
-  }, [handleChangeMinutes]);
-  const handleChangeCurrMinute = React.useCallback((offset, e) => {
-    const newM = currMinuteNum + offset;
-    if (newM >= 0 && newM <= 59) handleChangeMinutes(stringHelpers.prependStringWithPlaceHolders("".concat(newM), 2), e);
-  }, [currMinuteNum, handleChangeMinutes]);
-  const handlePrevMinute = React.useCallback(e => {
-    handleChangeCurrMinute(-minutesInterval, e);
-  }, [handleChangeCurrMinute, minutesInterval]);
-  const handleNextMinute = React.useCallback(e => {
-    handleChangeCurrMinute(minutesInterval, e);
-  }, [handleChangeCurrMinute, minutesInterval]); // const handleTimeWheelBtnChangeSeconds = useCallback(
-  //   (newSeconds, e) => {
-  //     handleChangeSeconds(newSeconds, e);
-  //   },
-  //   [handleChangeSeconds],
-  // );
-  // const handleChangeCurrSecond = useCallback(
-  //   (offset, e) => {
-  //     const newS = currSecondNum + offset;
-  //     if (newS >= 0 && newS <= 59)
-  //       handleChangeSeconds(prependStringWithPlaceHolders(`${newS}`, 2), e);
-  //   },
-  //   [currSecondNum, handleChangeSeconds],
-  // );
-  // const handlePrevSecond = useCallback(
-  //   (e) => {
-  //     handleChangeCurrSecond(-1, e);
-  //   },
-  //   [handleChangeCurrSecond],
-  // );
-  // const handleNextSecond = useCallback(
-  //   (e) => {
-  //     handleChangeCurrSecond(1, e);
-  //   },
-  //   [handleChangeCurrSecond],
-  // );
-
-  const handleTimeWheelBtnChangeMeridiem = React.useCallback((newMeridiem, e) => {
-    handleChangeMeridiem(newMeridiem, e);
-  }, [handleChangeMeridiem]);
-  return React.useMemo(() => ({
-    currHourNum,
-    hours,
-    visibleHours,
-    handlePrevHour,
-    handleNextHour,
-    handleTimeWheelBtnChangeHours,
-    currMinuteNum,
-    minutes,
-    visibleMinutes,
-    handlePrevMinute,
-    handleNextMinute,
-    handleTimeWheelBtnChangeMinutes,
-    // currSecondNum,
-    // seconds,
-    // visibleSeconds,
-    // handlePrevSecond,
-    // handleNextSecond,
-    // handleTimeWheelBtnChangeSeconds,
-    meridiem,
-    handleTimeWheelBtnChangeMeridiem
-  }), [currHourNum, currMinuteNum, // currSecondNum,
-  handleNextHour, handleNextMinute, // handleNextSecond,
-  handlePrevHour, handlePrevMinute, // handlePrevSecond,
-  handleTimeWheelBtnChangeHours, handleTimeWheelBtnChangeMeridiem, handleTimeWheelBtnChangeMinutes, // handleTimeWheelBtnChangeSeconds,
-  hours, meridiem, minutes, // seconds,
-  visibleHours, visibleMinutes // visibleSeconds,
-  ]);
-};
-
-exports.useCurrentDisplayedWheelsLogic = useCurrentDisplayedWheelsLogic;

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

@@ -1,351 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
-var constants = require('../../../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
-  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  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]);
-  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]);
-  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]);
-  const handlePickerIconKeyDown = React.useCallback(e => {
-    const {
-      key
-    } = e;
-    if (constants.homeEndKeys.includes(key)) e.preventDefault();
-    if (constants.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 = React.useCallback(e => {
-    const {
-      key,
-      shiftKey
-    } = e;
-    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (constants.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 = React.useCallback(e => {
-    const {
-      key
-    } = e;
-    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (constants.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 = React.useCallback(e => {
-    const {
-      key,
-      shiftKey
-    } = e;
-    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (constants.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 = React.useCallback(e => {
-    const {
-      key
-    } = e;
-    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (constants.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 = React.useCallback(e => {
-    const {
-      key
-    } = e;
-    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (constants.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 = React.useCallback(e => {
-    const {
-      key
-    } = e;
-    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (constants.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 = React.useCallback(e => {
-    const {
-      key
-    } = e;
-    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (constants.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 = React.useCallback(e => {
-    const {
-      key
-    } = e;
-    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (constants.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 = React.useCallback(e => {
-    const {
-      key
-    } = e;
-    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (constants.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 React.useMemo(() => ({
-    handlePrevHourBtnOnKeyDown,
-    handleCurrHourOnKeyDown,
-    handleNextHourBtnOnKeyDown,
-    handlePrevMinuteBtnOnKeyDown,
-    handleCurrMinutesOnKeyDown,
-    handleNextMinuteBtnOnKeyDown,
-    handlePrevMeridiemBtnOnKeyDown,
-    handleCurrMeridiemOnKeyDown,
-    handleNextMeridiemBtnOnKeyDown,
-    handlePickerIconKeyDown
-  }), [handleCurrHourOnKeyDown, handleCurrMeridiemOnKeyDown, handleCurrMinutesOnKeyDown, handleNextHourBtnOnKeyDown, handleNextMeridiemBtnOnKeyDown, handleNextMinuteBtnOnKeyDown, handlePrevHourBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, handlePickerIconKeyDown]);
-};
-
-exports.useKeyboardHandlers = useKeyboardHandlers;