@elliemae/ds-controlled-form 2.0.0-alpha.10 → 2.0.0-alpha.14

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

@@ -1,11 +1,11 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useMemo } from 'react';
-import { DSIconColors } from '@elliemae/ds-icon';
 import { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-button';
-import RecentDocuments from '@elliemae/ds-icons/RecentDocuments';
+import { RecentDocuments } from '@elliemae/ds-icons';
 import { TimeWheelContext } from './TimeWheelContext.js';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 
+var _RecentDocuments;
 // this is particularly useful due to how usePopper needs to check the references
 // since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders
 
@@ -14,19 +14,19 @@ const TimeWheelIconTrigger = () => {
     handleSetTriggerRef,
     handleToggleTimePicker,
     handlePickerIconKeyDown,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    disabled
   } = useContext(TimeWheelContext);
   return useMemo(() => /*#__PURE__*/_jsx(DSButtonV2, {
-    "aria-label": `time picker context menu trigger, ${ariaCurrentValueForInputs}`,
+    "aria-label": "time picker context menu trigger, ".concat(ariaCurrentValueForInputs),
     buttonType: "icon",
     size: BUTTON_SIZES.M,
     innerRef: handleSetTriggerRef,
     onClick: handleToggleTimePicker,
     onKeyDown: handlePickerIconKeyDown,
-    "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL
-  }, void 0, /*#__PURE__*/_jsx(RecentDocuments, {
-    color: DSIconColors.PRIMARY
-  })), [ariaCurrentValueForInputs, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker]);
+    "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL,
+    disabled: disabled
+  }, void 0, _RecentDocuments || (_RecentDocuments = /*#__PURE__*/_jsx(RecentDocuments, {}))), [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker]);
 };
 
 export { TimeWheelIconTrigger };

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

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';

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

@@ -7,19 +7,12 @@ import { useKeyboardHandlers } from './useKeyboardHandlers.js';
 /* eslint-disable max-statements */
 const useConfigTimePickerCTX = () => {
   const {
-    pickerButtonRef,
     props: {
       minutesInterval,
       getIsDisabledTime,
-      onPickerClose,
-      onPickerOpen
+      disabled
     },
-    hideDate,
-    hideTime,
-    monthInputRef,
-    hourInputRef,
     tempTimeString,
-    prevMonthBtnRef,
     prevHourBtnRef,
     currHourBtnRef,
     nextHourBtnRef,
@@ -30,7 +23,6 @@ const useConfigTimePickerCTX = () => {
     currMeridiemBtnRef,
     nextMeridiemBtnRef,
     isControllerOnly,
-    isWithCalendarToo,
     autoFocusHourTimeWheel,
     ariaCurrentValueForInputs
   } = useContext(ControlledDateTimePickerContext);
@@ -47,12 +39,6 @@ const useConfigTimePickerCTX = () => {
     handlePrevMinute,
     handleNextMinute,
     handleTimeWheelBtnChangeMinutes,
-    // currSecondNum,
-    // seconds,
-    // visibleSeconds,
-    // handlePrevSecond,
-    // handleNextSecond,
-    // handleTimeWheelBtnChangeSeconds,
     meridiem,
     handleTimeWheelBtnChangeMeridiem
   } = useCurrentDisplayedWheelsLogic({
@@ -67,13 +53,7 @@ const useConfigTimePickerCTX = () => {
     handleToggleTimePicker,
     handleSetTriggerRef,
     handleMenuWrapperKeyDown
-  } = usePopperTriggerLogic({
-    pickerButtonRef,
-    currHourBtnRef,
-    onPickerClose,
-    onPickerOpen,
-    isWithCalendarToo
-  });
+  } = usePopperTriggerLogic();
   const {
     handlePrevHourBtnOnKeyDown,
     handleCurrHourOnKeyDown,
@@ -81,9 +61,6 @@ const useConfigTimePickerCTX = () => {
     handlePrevMinuteBtnOnKeyDown,
     handleCurrMinutesOnKeyDown,
     handleNextMinuteBtnOnKeyDown,
-    // handlePrevSecondBtnOnKeyDown,
-    // handleCurrSecondsOnKeyDown,
-    // handleNextSecondBtnOnKeyDown,
     handlePrevMeridiemBtnOnKeyDown,
     handleCurrMeridiemOnKeyDown,
     handleNextMeridiemBtnOnKeyDown,
@@ -93,28 +70,7 @@ const useConfigTimePickerCTX = () => {
     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
+    handleTimeWheelBtnChangeMeridiem
   });
   return useMemo(() => ({
     tempTimeString,
@@ -140,12 +96,6 @@ const useConfigTimePickerCTX = () => {
     handlePrevMinute,
     handleNextMinute,
     handleTimeWheelBtnChangeMinutes,
-    // currSecondNum,
-    // seconds,
-    // visibleSeconds,
-    // handlePrevSecond,
-    // handleNextSecond,
-    // handleTimeWheelBtnChangeSeconds,
     meridiem,
     handleTimeWheelBtnChangeMeridiem,
     handlePrevHourBtnOnKeyDown,
@@ -154,9 +104,6 @@ const useConfigTimePickerCTX = () => {
     handlePrevMinuteBtnOnKeyDown,
     handleCurrMinutesOnKeyDown,
     handleNextMinuteBtnOnKeyDown,
-    // handlePrevSecondBtnOnKeyDown,
-    // handleCurrSecondsOnKeyDown,
-    // handleNextSecondBtnOnKeyDown,
     handlePrevMeridiemBtnOnKeyDown,
     handleCurrMeridiemOnKeyDown,
     handleNextMeridiemBtnOnKeyDown,
@@ -167,15 +114,13 @@ const useConfigTimePickerCTX = () => {
     prevMinutesBtnRef,
     currMinutesBtnRef,
     nextMinutesBtnRef,
-    // prevSecondsBtnRef,
-    // currSecondsBtnRef,
-    // nextSecondsBtnRef,
     prevMeridiemBtnRef,
     currMeridiemBtnRef,
     nextMeridiemBtnRef,
     getIsDisabledTime,
-    ariaCurrentValueForInputs
-  }), [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]);
+    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]);
 };
 
 export { useConfigTimePickerCTX };

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

@@ -1,22 +1,25 @@
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import { useMemo, useCallback } from 'react';
 import { useTimeInputs } from '../../TimeInputs/useTimeInputs.js';
 import { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';
 import { prependStringWithPlaceHolders } from '../../../utils/stringHelpers.js';
 
-/* eslint-disable max-statements */
 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 = (step = 1) => {
+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) => prependStringWithPlaceHolders(`${i * step}`, 2));
+  return new Array(length).fill('_').map((_v, i) => prependStringWithPlaceHolders("".concat(i * step), 2));
 };
 
-const useCurrentDisplayedWheelsLogic = ({
-  minutesInterval
-}) => {
+const useCurrentDisplayedWheelsLogic = _ref => {
+  let {
+    minutesInterval
+  } = _ref;
   const {
     hours,
     minutes,
@@ -90,7 +93,7 @@ const useCurrentDisplayedWheelsLogic = ({
   }, [handleChangeHours]);
   const handleChangeCurrHour = useCallback((offset, e) => {
     const newH = currHourNum + offset;
-    if (newH > 0 && newH <= 12) handleChangeHours(prependStringWithPlaceHolders(`${newH}`, 2), e);
+    if (newH > 0 && newH <= 12) handleChangeHours(prependStringWithPlaceHolders("".concat(newH), 2), e);
   }, [currHourNum, handleChangeHours]);
   const handlePrevHour = useCallback(e => {
     handleChangeCurrHour(-1, e);
@@ -103,7 +106,7 @@ const useCurrentDisplayedWheelsLogic = ({
   }, [handleChangeMinutes]);
   const handleChangeCurrMinute = useCallback((offset, e) => {
     const newM = currMinuteNum + offset;
-    if (newM >= 0 && newM <= 59) handleChangeMinutes(prependStringWithPlaceHolders(`${newM}`, 2), e);
+    if (newM >= 0 && newM <= 59) handleChangeMinutes(prependStringWithPlaceHolders("".concat(newM), 2), e);
   }, [currMinuteNum, handleChangeMinutes]);
   const handlePrevMinute = useCallback(e => {
     handleChangeCurrMinute(-minutesInterval, e);

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

@@ -1,34 +1,39 @@
-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,
-  isControllerOnly
-}) => {
+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;
 
@@ -48,21 +53,23 @@ const useKeyboardHandlers = ({
     const {
       key
     } = e;
-    const preventDefaultKeys = ['Home', 'End'];
-    const stopPropagationKeys = ['Home', 'End'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    if (homeEndKeys.includes(key)) e.preventDefault();
+    if (homeEndKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDownTriggerIcon();
-  }, [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;
-    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 (homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
     let didTriggerHourChange = false;
 
     if (key === 'ArrowUp') {
@@ -101,10 +108,8 @@ const useKeyboardHandlers = ({
     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 (homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
     let didTriggerMinuteChange = false;
 
     if (key === 'ArrowUp') {
@@ -126,7 +131,6 @@ const useKeyboardHandlers = ({
     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);
     }
 
@@ -138,45 +142,14 @@ const useKeyboardHandlers = ({
 
       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 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,
-  //   ],
-  // );
-
+  }, [onHomeKeyDownInsideTimeWheel, onEndKeyDownInsideTimeWheel, handlePrevMinute, handleNextMinute, currHourBtnRef, currMeridiemBtnRef, currMinutesBtnRef]);
   const handleCurrMeridiemOnKeyDown = 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();
+    if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
     let didTriggerMeridiemChange = false;
 
     if (key === 'ArrowUp') {
@@ -216,10 +189,8 @@ const useKeyboardHandlers = ({
     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 (homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
 
     if (key === 'ArrowRight') {
       var _prevMinutesBtnRef$cu, _prevMinutesBtnRef$cu2;
@@ -240,10 +211,8 @@ const useKeyboardHandlers = ({
     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 (homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
 
     if (key === 'ArrowRight') {
       var _prevMeridiemBtnRef$c, _prevMeridiemBtnRef$c2;
@@ -266,35 +235,17 @@ const useKeyboardHandlers = ({
 
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel();
-  }, [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],
-  // );
-
+  }, [currMinutesBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel, prevHourBtnRef, prevMeridiemBtnRef]);
   const handlePrevMeridiemBtnOnKeyDown = 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 (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);
     }
 
@@ -311,10 +262,8 @@ const useKeyboardHandlers = ({
     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 (homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
 
     if (key === 'ArrowRight') {
       var _nextMinutesBtnRef$cu, _nextMinutesBtnRef$cu2;
@@ -335,15 +284,12 @@ const useKeyboardHandlers = ({
     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 (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);
     }
 
@@ -361,30 +307,13 @@ const useKeyboardHandlers = ({
 
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel();
-  }, [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],
-  // );
-
+  }, [currMinutesBtnRef, nextHourBtnRef, nextMeridiemBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel]);
   const handleNextMeridiemBtnOnKeyDown = 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 (homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
 
     if (key === 'ArrowLeft') {
       var _nextMinutesBtnRef$cu3, _nextMinutesBtnRef$cu4;
@@ -408,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,14 +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,
-  currHourBtnRef,
-  onPickerClose,
-  onPickerOpen,
-  isWithCalendarToo
-}) => {
+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);