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

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

@@ -1,65 +1,37 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { useContext, useCallback, useMemo } from 'react';
 import { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';
-import { getFormattedTimeString, prependStringWithPlaceHolders, dateTimeToTime, deconstructTimeValues } from '../../utils/stringHelpers.js';
-import { getValidationTimeStringMetaInfo } from '../../utils/timeHelpers.js';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-// our source of truth is either the time props or dateTime props
-// based on wheter it's a dateTime picker
-// or a time picker (it's time picker when hideDate is true)
-
-const useGetDestructuredTimeValues = ({
-  time,
-  dateTime,
-  isDateTimeSelector
-}) => {
-  const timeStringFromProps = useMemo(() => isDateTimeSelector ? dateTimeToTime(dateTime) : time, [time, dateTime, isDateTimeSelector]);
-  const deconstructedValues = useMemo(() => deconstructTimeValues(timeStringFromProps), [timeStringFromProps]);
-  return deconstructedValues;
-};
+import { homeEndArrowUpDownSemiKeys, homeEndArrowUpDownSpaceKeys, homeEndArrowUpDownKeys } from '../../utils/constants.js';
+import { prependStringWithPlaceHolders } from '../../utils/stringHelpers.js';
 
+/* eslint-disable complexity */
 const useTimeInputs = () => {
   const {
     props: {
-      time,
-      dateTime,
-      onHourChange: appOnHourChange,
-      onMinuteChange: appOnMinuteChange,
-      // onSecondsChange: appOnSecondsChange,
-      onMeridiemChange: appOnMeridiemChange,
-      getIsDisabledTime
+      minutesInterval,
+      disabled
     },
+    lastSegmentRef,
+    hours,
+    minutes,
+    meridiem,
     hideDate,
-    hideDateTimePicker,
-    hideDatePicker,
-    hideTimePicker,
     withAnyRightController,
     withAnyPicker,
     withClearBtn,
-    isDateTimeSelector,
+    isWithDateInputs,
     hourInputRef,
     minutesInputRef,
-    // secondsInputRef,
     meridiemInputRef,
+    yearInputRef,
     clearButtonRef,
     pickerButtonRef,
     monthInputRef,
-    handleChangeComposedTimeString,
+    autoFocusHourInput,
+    handleChangeHours,
+    handleChangeMinutes,
+    handleChangeMeridiem,
     setLatestInteractionRegion
   } = useContext(ControlledDateTimePickerContext);
-  const {
-    hours,
-    minutes,
-    // seconds,
-    meridiem
-  } = useGetDestructuredTimeValues({
-    time,
-    dateTime,
-    isDateTimeSelector
-  });
   const setLatestInteractionRegionTimeInputs = useCallback(() => {
     setLatestInteractionRegion('time-inputs');
   }, [setLatestInteractionRegion]);
@@ -69,27 +41,10 @@ const useTimeInputs = () => {
     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 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, monthInputRef, hourInputRef]);
   const onEndKeyDown = useCallback(() => {
-    var _pickerButtonRef$curr, _pickerButtonRef$curr2, _meridiemInputRef$cur, _meridiemInputRef$cur2;
-
-    if (!hideDateTimePicker || !hideDatePicker || !hideTimePicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr = pickerButtonRef.current) === null || _pickerButtonRef$curr === void 0 ? void 0 : (_pickerButtonRef$curr2 = _pickerButtonRef$curr.focus) === null || _pickerButtonRef$curr2 === void 0 ? void 0 : _pickerButtonRef$curr2.call(_pickerButtonRef$curr);else 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);
-  }, [hideDateTimePicker, hideDatePicker, hideTimePicker, pickerButtonRef, meridiemInputRef]);
-  const handleChangeHours = useCallback((newHours, e, metaInfo = {
-    isAutomaticFillTrigger: false
-  }) => {
-    const newTimeString = getFormattedTimeString({
-      hours: newHours,
-      minutes,
-      // seconds,
-      meridiem
-    });
+    var _pickerButtonRef$curr, _pickerButtonRef$curr2, _clearButtonRef$curre, _clearButtonRef$curre2, _meridiemInputRef$cur, _meridiemInputRef$cur2;
 
-    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
-      newTimeString
-    });
-
-    appOnHourChange(newHours, e, finalMetaInfo);
-    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
-  }, [minutes, meridiem, getIsDisabledTime, appOnHourChange, handleChangeComposedTimeString]);
+    if (withAnyPicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr = pickerButtonRef.current) === null || _pickerButtonRef$curr === void 0 ? void 0 : (_pickerButtonRef$curr2 = _pickerButtonRef$curr.focus) === null || _pickerButtonRef$curr2 === void 0 ? void 0 : _pickerButtonRef$curr2.call(_pickerButtonRef$curr);else if (withClearBtn) clearButtonRef === null || clearButtonRef === void 0 ? void 0 : (_clearButtonRef$curre = clearButtonRef.current) === null || _clearButtonRef$curre === void 0 ? void 0 : (_clearButtonRef$curre2 = _clearButtonRef$curre.focus) === null || _clearButtonRef$curre2 === void 0 ? void 0 : _clearButtonRef$curre2.call(_clearButtonRef$curre);else 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);
+  }, [withAnyPicker, pickerButtonRef, withClearBtn, clearButtonRef, meridiemInputRef]);
   const onHoursFocus = useCallback(() => {
     setLatestInteractionRegionTimeInputs();
   }, [setLatestInteractionRegionTimeInputs]);
@@ -104,50 +59,56 @@ const useTimeInputs = () => {
     if (newHours.length === 2) minutesInputRef === null || minutesInputRef === void 0 ? void 0 : (_minutesInputRef$curr = minutesInputRef.current) === null || _minutesInputRef$curr === void 0 ? void 0 : (_minutesInputRef$curr2 = _minutesInputRef$curr.focus) === null || _minutesInputRef$curr2 === void 0 ? void 0 : _minutesInputRef$curr2.call(_minutesInputRef$curr);
   }, [minutesInputRef, handleChangeHours]);
   const onHoursKeyDown = useCallback(e => {
+    var _lastSegmentRef$curre, _lastSegmentRef$curre2;
+
     const {
-      key
+      key,
+      ctrlKey,
+      metaKey
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    const hoursStringConvertedToInteger = Number.parseInt(hours, 10);
+    if (homeEndArrowUpDownSemiKeys.includes(key)) e.preventDefault();
+    if (homeEndArrowUpDownSemiKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
 
     if (key === 'ArrowUp' || key === 'ArrowDown') {
-      const hoursStringConvertedToInteger = Number.parseInt(hours, 10);
       const hoursInteger = Number.isNaN(hoursStringConvertedToInteger) ? 0 : hoursStringConvertedToInteger;
       let newHours;
       if (key === 'ArrowUp') newHours = hoursInteger + 1 <= 12 ? hoursInteger + 1 : hoursInteger;else newHours = hoursInteger - 1 > 1 ? hoursInteger - 1 : 1;
-      newHours = prependStringWithPlaceHolders(`${newHours}`, 2);
+      newHours = prependStringWithPlaceHolders("".concat(newHours), 2);
       handleChangeHours(newHours, e);
     }
-  }, [onHomeKeyDown, onEndKeyDown, handleChangeHours, hours]);
+
+    if (!Number.isNaN(hoursStringConvertedToInteger) && key === ':') {
+      var _minutesInputRef$curr3, _minutesInputRef$curr4;
+
+      const newHours = prependStringWithPlaceHolders("".concat(hoursStringConvertedToInteger), 2);
+      handleChangeHours(newHours, e); // auto-advance functionality:
+
+      if (newHours.length === 2) minutesInputRef === null || minutesInputRef === void 0 ? void 0 : (_minutesInputRef$curr3 = minutesInputRef.current) === null || _minutesInputRef$curr3 === void 0 ? void 0 : (_minutesInputRef$curr4 = _minutesInputRef$curr3.focus) === null || _minutesInputRef$curr4 === void 0 ? void 0 : _minutesInputRef$curr4.call(_minutesInputRef$curr3);
+    } // regressive backspace functionality
+
+
+    if (key === 'Backspace' && hours.length === 0 && isWithDateInputs) {
+      var _yearInputRef$current, _yearInputRef$current2;
+
+      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);
+    } // focus last fragment on fill with now
+
+
+    if ((ctrlKey || metaKey) && key === ';') lastSegmentRef === null || lastSegmentRef === void 0 ? void 0 : (_lastSegmentRef$curre = lastSegmentRef.current) === null || _lastSegmentRef$curre === void 0 ? void 0 : (_lastSegmentRef$curre2 = _lastSegmentRef$curre.focus) === null || _lastSegmentRef$curre2 === void 0 ? void 0 : _lastSegmentRef$curre2.call(_lastSegmentRef$curre);
+  }, [hours, onHomeKeyDown, onEndKeyDown, isWithDateInputs, lastSegmentRef, handleChangeHours, minutesInputRef, yearInputRef]);
   const onHoursBlur = useCallback(e => {
     var _e$target2;
 
     const newHours = e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.value;
-    if (newHours === '0') handleChangeHours('', e, {
+    if (newHours === '0') handleChangeHours('01', e, {
       isAutomaticFillTrigger: true
     });else if (newHours.length > 0 && newHours.length < 2) handleChangeHours(prependStringWithPlaceHolders(newHours, 2), e, {
       isAutomaticFillTrigger: true
     });
   }, [handleChangeHours]);
-  const handleChangeMinutes = useCallback((newMinutes, e, metaInfo = {
-    isAutomaticFillTrigger: false
-  }) => {
-    const newTimeString = getFormattedTimeString({
-      hours,
-      minutes: newMinutes,
-      // seconds,
-      meridiem
-    });
-
-    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
-      newTimeString
-    });
-
-    appOnMinuteChange(newMinutes, e, finalMetaInfo);
-    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
-  }, [hours, meridiem, getIsDisabledTime, appOnMinuteChange, handleChangeComposedTimeString]);
   const onMinutesFocus = useCallback(() => {
     setLatestInteractionRegionTimeInputs();
   }, [setLatestInteractionRegionTimeInputs]);
@@ -163,23 +124,47 @@ const useTimeInputs = () => {
     if (newMinutes.length === 2) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur3 = meridiemInputRef.current) === null || _meridiemInputRef$cur3 === void 0 ? void 0 : (_meridiemInputRef$cur4 = _meridiemInputRef$cur3.focus) === null || _meridiemInputRef$cur4 === void 0 ? void 0 : _meridiemInputRef$cur4.call(_meridiemInputRef$cur3);
   }, [meridiemInputRef, handleChangeMinutes]);
   const onMinutesKeyDown = useCallback(e => {
+    var _lastSegmentRef$curre3, _lastSegmentRef$curre4;
+
     const {
-      key
+      key,
+      ctrlKey,
+      metaKey
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    const minutesStringConvertedToInteger = Number.parseInt(minutes, 10);
+    if (homeEndArrowUpDownSpaceKeys.includes(key)) e.preventDefault();
+    if (homeEndArrowUpDownSpaceKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
 
     if (key === 'ArrowUp' || key === 'ArrowDown') {
-      const minutesStringConvertedToInteger = Number.parseInt(minutes, 10);
       const minutesInteger = Number.isNaN(minutesStringConvertedToInteger) ? 0 : minutesStringConvertedToInteger;
       let newMinutes;
-      if (key === 'ArrowUp') newMinutes = minutesInteger + 1 <= 59 ? minutesInteger + 1 : minutesInteger;else newMinutes = minutesInteger - 1 > 0 ? minutesInteger - 1 : 0;
-      newMinutes = prependStringWithPlaceHolders(`${newMinutes}`, 2);
+      if (key === 'ArrowUp') newMinutes = minutesInteger + minutesInterval <= 59 ? minutesInteger + minutesInterval : minutesInteger;else newMinutes = minutesInteger - minutesInterval > 0 ? minutesInteger - minutesInterval : 0;
+      newMinutes = prependStringWithPlaceHolders("".concat(newMinutes), 2);
       handleChangeMinutes(newMinutes, e);
     }
-  }, [onHomeKeyDown, onEndKeyDown, handleChangeMinutes, minutes]);
+
+    if (!Number.isNaN(minutesStringConvertedToInteger) && key === ' ') {
+      var _meridiemInputRef$cur5, _meridiemInputRef$cur6;
+
+      const newMinutes = prependStringWithPlaceHolders("".concat(minutesStringConvertedToInteger), 2);
+      handleChangeMinutes(newMinutes, e); // auto-advance functionality:
+      // if (newMinutes.length === 2) secondsInputRef?.current?.focus?.();
+
+      if (newMinutes.length === 2) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur5 = meridiemInputRef.current) === null || _meridiemInputRef$cur5 === void 0 ? void 0 : (_meridiemInputRef$cur6 = _meridiemInputRef$cur5.focus) === null || _meridiemInputRef$cur6 === void 0 ? void 0 : _meridiemInputRef$cur6.call(_meridiemInputRef$cur5);
+    } // regressive backspace functionality
+
+
+    if (key === 'Backspace' && (minutes === null || minutes === void 0 ? void 0 : minutes.length) === 0) {
+      var _hourInputRef$current3, _hourInputRef$current4;
+
+      hourInputRef === null || hourInputRef === void 0 ? void 0 : (_hourInputRef$current3 = hourInputRef.current) === null || _hourInputRef$current3 === void 0 ? void 0 : (_hourInputRef$current4 = _hourInputRef$current3.focus) === null || _hourInputRef$current4 === void 0 ? void 0 : _hourInputRef$current4.call(_hourInputRef$current3);
+    } // focus last fragment on fill with now
+
+
+    if ((ctrlKey || metaKey) && key === ';') lastSegmentRef === null || lastSegmentRef === void 0 ? void 0 : (_lastSegmentRef$curre3 = lastSegmentRef.current) === null || _lastSegmentRef$curre3 === void 0 ? void 0 : (_lastSegmentRef$curre4 = _lastSegmentRef$curre3.focus) === null || _lastSegmentRef$curre4 === void 0 ? void 0 : _lastSegmentRef$curre4.call(_lastSegmentRef$curre3);
+  }, [minutes, onHomeKeyDown, onEndKeyDown, lastSegmentRef, minutesInterval, handleChangeMinutes, meridiemInputRef, hourInputRef]);
   const onMinutesBlur = useCallback(e => {
     var _e$target4;
 
@@ -187,157 +172,80 @@ const useTimeInputs = () => {
     if (newMinutes.length > 0 && newMinutes.length < 2) handleChangeMinutes(prependStringWithPlaceHolders(newMinutes, 2), e, {
       isAutomaticFillTrigger: true
     });
-  }, [handleChangeMinutes]); // const handleChangeSeconds: handleOnChangeFuncT = useCallback(
-  //   (newSeconds, e, metaInfo = { isAutomaticFillTrigger: false }) => {
-  //     const newTimeString = getFormattedTimeString({
-  //       hours,
-  //       minutes,
-  //       seconds: newSeconds,
-  //       meridiem,
-  //     });
-  //     appOnSecondsChange(newSeconds, e, metaInfo);
-  //     handleChangeComposedTimeString(newTimeString, metaInfo);
-  //   },
-  //   [
-  //     hours,
-  //     minutes,
-  //     meridiem,
-  //     appOnSecondsChange,
-  //     handleChangeComposedTimeString,
-  //   ],
-  // );
-  // const onSecondsFocus: onFocusFuncT = useCallback(
-  //   (e) => {
-  //     setLatestInteractionRegionTimeInputs();
-  //   },
-  //   [setLatestInteractionRegionTimeInputs],
-  // );
-  // const onSecondsChange: onChangeFuncT = useCallback(
-  //   (e) => {
-  //     let newSeconds = e?.target?.value;
-  //     // converts seconds 7~9 to 07~09
-  //     if (Number.parseInt(newSeconds, 10) > 6)
-  //       newSeconds = prependStringWithPlaceHolders(newSeconds, 2);
-  //     handleChangeSeconds(newSeconds, e);
-  //     // auto-advance functionality:
-  //     if (newSeconds.length === 2) meridiemInputRef?.current?.focus?.();
-  //   },
-  //   [meridiemInputRef, handleChangeSeconds],
-  // );
-  // const onSecondsKeyDown: onKeyDownT = useCallback(
-  //   (e) => {
-  //     const { key } = e;
-  //     const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
-  //     if (preventDefaultKeys.includes(key)) e.preventDefault();
-  //     if (key === 'Home') onHomeKeyDown();
-  //     if (key === 'End') onEndKeyDown();
-  // if (key === 'ArrowUp' || key === 'ArrowDown') {
-  //   const secondsStringConvertedToInteger = Number.parseInt(seconds, 10);
-  //   const secondsInteger = Number.isNaN(secondsStringConvertedToInteger) ? 0 : secondsStringConvertedToInteger;
-  //   let newSeconds;
-  //   if (key === 'ArrowUp') newSeconds = secondsInteger + 1 <= 59 ? secondsInteger + 1 : secondsInteger;
-  //   else newSeconds = secondsInteger - 1 > 0 ? secondsInteger - 1 : 1;
-  //   newSeconds = prependStringWithPlaceHolders(`${newSeconds}`, 2);
-  //   handleChangeSeconds(newSeconds, e);
-  // }
-  //   },
-  //   [onHomeKeyDown, onEndKeyDown,handleChangeSeconds,newSeconds],
-  // );
-  // const onSecondsBlur: onBlurFuncT = useCallback(
-  //   (e) => {
-  //     const newSeconds = e?.target?.value;
-  //     if (newSeconds.length > 0 && newSeconds.length < 2)
-  //       handleChangeSeconds(prependStringWithPlaceHolders(newSeconds, 2), e, {
-  //         isAutomaticFillTrigger: true,
-  //       });
-  //   },
-  //   [handleChangeSeconds],
-  // );
-
-  const handleChangeMeridiem = useCallback((newMeridiem, e, metaInfo = {
-    isAutomaticFillTrigger: false
-  }) => {
-    const newTimeString = getFormattedTimeString({
-      hours,
-      minutes,
-      // seconds,
-      meridiem: newMeridiem
-    });
-
-    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
-      newTimeString
-    });
-
-    appOnMeridiemChange(newMeridiem, e, finalMetaInfo);
-    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
-  }, [hours, minutes, getIsDisabledTime, appOnMeridiemChange, handleChangeComposedTimeString]);
+  }, [handleChangeMinutes]);
   const onMeridiemFocus = useCallback(() => {
     setLatestInteractionRegionTimeInputs();
   }, [setLatestInteractionRegionTimeInputs]);
   const onMeridiemChange = useCallback(e => {
     var _e$target5, _e$target5$value, _e$target5$value$toUp;
 
-    let newMeridiem = e === null || e === void 0 ? void 0 : (_e$target5 = e.target) === null || _e$target5 === void 0 ? void 0 : (_e$target5$value = _e$target5.value) === null || _e$target5$value === void 0 ? void 0 : (_e$target5$value$toUp = _e$target5$value.toUpperCase) === null || _e$target5$value$toUp === void 0 ? void 0 : _e$target5$value$toUp.call(_e$target5$value);
-    if (newMeridiem.length === 1) newMeridiem = `${newMeridiem}M`;
+    let newMeridiem = e === null || e === void 0 ? void 0 : (_e$target5 = e.target) === null || _e$target5 === void 0 ? void 0 : (_e$target5$value = _e$target5.value) === null || _e$target5$value === void 0 ? void 0 : (_e$target5$value$toUp = _e$target5$value.toUpperCase) === null || _e$target5$value$toUp === void 0 ? void 0 : _e$target5$value$toUp.call(_e$target5$value); // if new value is length 1,
+    //   if previous value was empty, auto-complete
+    //   if previous value was not empty, set to empty (regressive backspace)
+
+    if (newMeridiem.length === 1) if (meridiem === '') newMeridiem = "".concat(newMeridiem, "M");else newMeridiem = '';
     handleChangeMeridiem(newMeridiem, e); // auto-advance functionality:
 
     if (newMeridiem.length === 2 && withAnyRightController) {
-      var _clearButtonRef$curre, _clearButtonRef$curre2, _pickerButtonRef$curr3, _pickerButtonRef$curr4;
+      var _clearButtonRef$curre3, _clearButtonRef$curre4, _pickerButtonRef$curr3, _pickerButtonRef$curr4;
 
-      if (withClearBtn) (_clearButtonRef$curre = clearButtonRef.current) === null || _clearButtonRef$curre === void 0 ? void 0 : (_clearButtonRef$curre2 = _clearButtonRef$curre.focus) === null || _clearButtonRef$curre2 === void 0 ? void 0 : _clearButtonRef$curre2.call(_clearButtonRef$curre);else if (withAnyPicker) 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); // pending approval from Seda, check which one should be focused first...
+      if (withClearBtn) (_clearButtonRef$curre3 = clearButtonRef.current) === null || _clearButtonRef$curre3 === void 0 ? void 0 : (_clearButtonRef$curre4 = _clearButtonRef$curre3.focus) === null || _clearButtonRef$curre4 === void 0 ? void 0 : _clearButtonRef$curre4.call(_clearButtonRef$curre3);else if (withAnyPicker) 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);
     }
-  }, [handleChangeMeridiem, withAnyRightController, withAnyPicker, pickerButtonRef, withClearBtn, clearButtonRef]);
+  }, [meridiem, handleChangeMeridiem, withAnyRightController, withClearBtn, clearButtonRef, withAnyPicker, pickerButtonRef]);
   const onMeridiemKeyDown = useCallback(e => {
+    var _lastSegmentRef$curre5, _lastSegmentRef$curre6;
+
     const {
-      key
+      key,
+      ctrlKey,
+      metaKey
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (homeEndArrowUpDownKeys.includes(key)) e.preventDefault();
+    if (homeEndArrowUpDownKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
     if (key === 'ArrowUp' && meridiem !== 'AM') handleChangeMeridiem('AM', e);
-    if (key === 'ArrowDown' && meridiem !== 'PM') handleChangeMeridiem('PM', e);
-  }, [onHomeKeyDown, onEndKeyDown, handleChangeMeridiem, meridiem]);
+    if (key === 'ArrowDown' && meridiem !== 'PM') handleChangeMeridiem('PM', e); // regressive backspace functionality
+
+    if (key === 'Backspace') {
+      var _minutesInputRef$curr5, _minutesInputRef$curr6;
+
+      if ((meridiem === null || meridiem === void 0 ? void 0 : meridiem.length) === 2) handleChangeMeridiem('', e);else minutesInputRef === null || minutesInputRef === void 0 ? void 0 : (_minutesInputRef$curr5 = minutesInputRef.current) === null || _minutesInputRef$curr5 === void 0 ? void 0 : (_minutesInputRef$curr6 = _minutesInputRef$curr5.focus) === null || _minutesInputRef$curr6 === void 0 ? void 0 : _minutesInputRef$curr6.call(_minutesInputRef$curr5);
+    } // focus last fragment on fill with now
+
+
+    if ((ctrlKey || metaKey) && key === ';') lastSegmentRef === null || lastSegmentRef === void 0 ? void 0 : (_lastSegmentRef$curre5 = lastSegmentRef.current) === null || _lastSegmentRef$curre5 === void 0 ? void 0 : (_lastSegmentRef$curre6 = _lastSegmentRef$curre5.focus) === null || _lastSegmentRef$curre6 === void 0 ? void 0 : _lastSegmentRef$curre6.call(_lastSegmentRef$curre5);
+  }, [onHomeKeyDown, onEndKeyDown, meridiem, handleChangeMeridiem, lastSegmentRef, minutesInputRef]);
   const onMeridiemBlur = useCallback(e => {
     var _e$target6, _e$target6$value, _e$target6$value$toUp;
 
     const newMeridiem = e === null || e === void 0 ? void 0 : (_e$target6 = e.target) === null || _e$target6 === void 0 ? void 0 : (_e$target6$value = _e$target6.value) === null || _e$target6$value === void 0 ? void 0 : (_e$target6$value$toUp = _e$target6$value.toUpperCase) === null || _e$target6$value$toUp === void 0 ? void 0 : _e$target6$value$toUp.call(_e$target6$value);
-    if (newMeridiem.length === 1) handleChangeMeridiem(`${newMeridiem}M`, e, {
+    if (newMeridiem.length === 1) handleChangeMeridiem("".concat(newMeridiem, "M"), e, {
       isAutomaticFillTrigger: true
     });
   }, [handleChangeMeridiem]);
   return useMemo(() => ({
     hours,
     minutes,
-    // seconds,
     meridiem,
+    autoFocusHourInput,
+    disabled,
     handleChangeHours,
     onHoursFocus,
     onHoursChange,
     handleChangeMinutes,
     onMinutesFocus,
     onMinutesChange,
-    // handleChangeSeconds,
-    // onSecondsFocus,
-    // onSecondsChange,
     handleChangeMeridiem,
     onMeridiemFocus,
     onMeridiemChange,
     onHoursBlur,
     onMinutesBlur,
-    // onSecondsBlur,
     onMeridiemBlur,
     onHoursKeyDown,
     onMinutesKeyDown,
-    // onSecondsKeyDown,
     onMeridiemKeyDown
-  }), [hours, minutes, // seconds,
-  meridiem, handleChangeHours, onHoursFocus, onHoursChange, handleChangeMinutes, onMinutesFocus, onMinutesChange, // handleChangeSeconds,
-  // onSecondsFocus,
-  // onSecondsChange,
-  handleChangeMeridiem, onMeridiemFocus, onMeridiemChange, onHoursBlur, onMinutesBlur, // onSecondsBlur,
-  onMeridiemBlur, onHoursKeyDown, onMinutesKeyDown, // onSecondsKeyDown,
-  onMeridiemKeyDown]);
+  }), [hours, minutes, meridiem, autoFocusHourInput, disabled, handleChangeHours, onHoursFocus, onHoursChange, handleChangeMinutes, onMinutesFocus, onMinutesChange, handleChangeMeridiem, onMeridiemFocus, onMeridiemChange, onHoursBlur, onMinutesBlur, onMeridiemBlur, onHoursKeyDown, onMinutesKeyDown, onMeridiemKeyDown]);
 };
 
 export { useTimeInputs };

package/esm/controlled-date-time-picker/propTypes.js

@@ -2,6 +2,7 @@ import { PropTypes } from 'react-desc';
 
 const propTypes = {
   type: PropTypes.oneOf(['full-date-time', 'date-time-inputs', 'date-time-picker', 'date-time-picker-controller-only', 'full-date', 'date-inputs', 'date-picker', 'date-picker-controller-only', 'full-time', 'time-inputs', 'time-picker', 'time-picker-controller-only']).description('Type of time form control to use').defaultValue('full-date-time'),
+  disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),
   isClearable: PropTypes.bool.description('with or without clearable button').defaultValue('false'),
   dateTime: PropTypes.string.description('when using date-time types, this is the value of the controller'),
   date: PropTypes.string.description('when using date types, this is the value of the controller'),
@@ -20,7 +21,8 @@ const propTypes = {
   getIsDisabledTime: PropTypes.func.description('(timeAsString) => true for marking as disabled, false for marking as valid').defaultValue(''),
   emptyPickerStartingMonth: PropTypes.string.description('which month to start the calendar on open, when value is empty, string following the "MM/__/YYYY" pattern'),
   onCalendarOpenFocusedDay: PropTypes.string.description('which day to focus on calendar open when value is empty, string following the "MM/DD/YYYY" pattern').defaultValue('if value is empty current month, else month corresponding the month'),
-  minutesInterval: PropTypes.number.description('increments/decrements of minutes in time related controllers interactions').defaultValue('1')
+  minutesInterval: PropTypes.number.description('increments/decrements of minutes in time related controllers interactions').defaultValue('1'),
+  'data-testid': PropTypes.string.description('Unique id for tests.').defaultValue('')
 };
 
 export { propTypes };

package/esm/controlled-date-time-picker/utils/constants.js

@@ -0,0 +1,46 @@
+const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+const announcableCardinalDays = {
+  1: 'first',
+  2: 'second',
+  3: 'third',
+  4: 'fourth',
+  5: 'fifth',
+  6: 'sixth',
+  7: 'seventh',
+  8: 'eighth',
+  9: 'ninth',
+  10: 'tenth',
+  11: 'eleventh',
+  12: 'twelfth',
+  13: 'thirteenth',
+  14: 'fourteenth',
+  15: 'fifteenth',
+  16: 'sixteenth',
+  17: 'seventeenth',
+  18: 'eighteenth',
+  19: 'ninteenth',
+  20: 'twentieth',
+  21: 'twentie first',
+  22: 'twentie second',
+  23: 'twentie third',
+  24: 'twentie fourth',
+  25: 'twentie fifth',
+  26: 'twentie sixth',
+  27: 'twentie seventh',
+  28: 'twentie eighth',
+  29: 'twentie ninth',
+  30: 'thirtieth',
+  31: 'thirty first'
+};
+const homeEndAllArrowKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+const homeEndKeys = ['Home', 'End'];
+const homeEndArrowUpDownDashSlashesKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', '-', '/', '\\'];
+const homeEndArrowUpDownSpaceKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', ' '];
+const homeEndArrowUpDownSemiKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', ':'];
+const homeEndArrowUpDownKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
+const defaultMetaInfo = {
+  isAutomaticFillTrigger: false
+};
+
+export { announcableCardinalDays, defaultMetaInfo, homeEndAllArrowKeys, homeEndArrowUpDownDashSlashesKeys, homeEndArrowUpDownKeys, homeEndArrowUpDownSemiKeys, homeEndArrowUpDownSpaceKeys, homeEndKeys, monthNames, weekDays };

package/esm/controlled-date-time-picker/utils/dateHelpers.js

@@ -1,9 +1,11 @@
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { createRef } from 'react';
+import { monthNames } from './constants.js';
 import { isIncompleteString, deconstructValuesFromDateString, prependStringWithPlaceHolders } from './stringHelpers.js';
 import { convertToPositiveNumberIfPossible } from './numberHelpers.js';
 
-/* eslint-disable max-lines */
-const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 const getLastDayOfMonth = (month, year) => new Date(year, month + 1, 0);
 const isValidDayForTheMonth = (month, year, day) => {
   var _Date, _Date$getMonth;
@@ -22,9 +24,9 @@ const isValidDayForTheMonthDateString = dateString => {
   const monthDateMonth = monthInt - 1;
   return ((_getDayFromDateString = getDayFromDateString(dateString)) === null || _getDayFromDateString === void 0 ? void 0 : (_getDayFromDateString2 = _getDayFromDateString.getMonth) === null || _getDayFromDateString2 === void 0 ? void 0 : _getDayFromDateString2.call(_getDayFromDateString)) === monthDateMonth;
 };
-const getValidationDateStringMetaInfo = (dateString, // eslint-disable-next-line @typescript-eslint/no-unused-vars
-getIsOutOfRangeDay = day => false, // eslint-disable-next-line @typescript-eslint/no-unused-vars
-getIsDisabledDay = day => false) => {
+const getValidationDateStringMetaInfo = function (dateString) {
+  let getIsOutOfRangeDay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : day => false;
+  let getIsDisabledDay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : day => false;
   const metaInfo = {};
 
   if (!isIncompleteString(dateString)) {
@@ -59,15 +61,17 @@ const dateAddMonths = (date, value) => {
 };
 const dateAddYear = (date, value) => dateAddMonths(date, value * 12);
 // sumFromDateValues supports negative values to "subtract"
-const sumFromDateValues = ({
-  month,
-  year,
-  day = 1
-}, {
-  monthsToSum = 0,
-  yearsToSum = 0,
-  daysToSum = 0
-}) => {
+const sumFromDateValues = (_ref, _ref2) => {
+  let {
+    month,
+    year,
+    day = 1
+  } = _ref;
+  let {
+    monthsToSum = 0,
+    yearsToSum = 0,
+    daysToSum = 0
+  } = _ref2;
   let newDate = new Date(year, month, day);
   if (yearsToSum) newDate = dateAddYear(newDate, yearsToSum);
   if (monthsToSum) newDate = dateAddMonths(newDate, monthsToSum);
@@ -87,22 +91,26 @@ const sumValuesToDate = (day, sumValues) => {
   } = sumFromDateValues(dateAsVals, sumValues);
   return new Date(year, month, newD);
 };
-const subtractYears = (date, howManyMore = 1) => {
+const subtractYears = function (date) {
+  let howManyMore = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   const newDate = new Date(date.getTime());
   newDate.setFullYear(date.getFullYear() - howManyMore);
   return newDate;
 };
-const subtractMonths = (date, howManyMore = 1) => {
+const subtractMonths = function (date) {
+  let howManyMore = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   const newDate = new Date(date.getTime());
   newDate.setMonth(date.getMonth() - howManyMore);
   return newDate;
 };
-const sumMonths = (date, howManyMore = 1) => {
+const sumMonths = function (date) {
+  let howManyMore = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   const newDate = new Date(date.getTime());
   newDate.setMonth(date.getMonth() + howManyMore);
   return newDate;
 };
-const sumYears = (date, howManyMore = 1) => {
+const sumYears = function (date) {
+  let howManyMore = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   const newDate = new Date(date.getTime());
   newDate.setFullYear(date.getFullYear() + howManyMore);
   return newDate;
@@ -184,11 +192,20 @@ const getDateValuesFromDate = day => {
   };
 };
 const getDateStringFromDay = day => {
-  const monthFromDay = prependStringWithPlaceHolders(`${day.getMonth() + 1}`, 2); // months from 1-12
+  const monthFromDay = prependStringWithPlaceHolders("".concat(day.getMonth() + 1), 2); // months from 1-12
 
-  const dayFromDay = prependStringWithPlaceHolders(`${day.getDate()}`, 2);
-  const yearFromDay = prependStringWithPlaceHolders(`${day.getFullYear()}`, 4);
-  return `${monthFromDay}/${dayFromDay}/${yearFromDay}`;
+  const dayFromDay = prependStringWithPlaceHolders("".concat(day.getDate()), 2);
+  const yearFromDay = prependStringWithPlaceHolders("".concat(day.getFullYear()), 4);
+  return "".concat(monthFromDay, "/").concat(dayFromDay, "/").concat(yearFromDay);
+};
+const getTimeStringFromDay = day => {
+  const hoursNum = day.getHours();
+  const meridiem = hoursNum > 12 ? 'PM' : 'AM';
+  const twelveHourFormat = hoursNum > 12 ? hoursNum - 12 : hoursNum;
+  const minutesNum = day.getMinutes();
+  const hoursFromDay = prependStringWithPlaceHolders("".concat(twelveHourFormat), 2);
+  const minutesFromDay = prependStringWithPlaceHolders("".concat(minutesNum), 2);
+  return "".concat(hoursFromDay, ":").concat(minutesFromDay, " ").concat(meridiem);
 };
 const getDayFromDateString = dateString => {
   const {
@@ -222,4 +239,4 @@ const compareTwoDatesDayEquality = (dayA, dayB) => {
   return currD === focusD && currM === focusM && currY === focusY;
 };
 
-export { compareTwoDatesDayEquality, dateAddMonths, dateAddYear, dateGetDaysInMonth, dateIsLeapYear, getDateStringFromDay, getDateValuesFromDate, getDayFromDateString, getDaysInMonth, getFirstXDaysFromNextMonth, getFiveBySevenCurrentMonthDaysMatrix, getHowManyDaysInMonth, getLastDayOfMonth, getLastXDaysFromPreviousMonth, getMonthNameByMonthNumber, getValidationDateStringMetaInfo, isLeapYear, isSameDateMoment, isValidDayForTheMonth, isValidDayForTheMonthDateString, subtractMonths, subtractYears, sumFromDateValues, sumMonths, sumValuesToDate, sumYears };
+export { compareTwoDatesDayEquality, dateAddMonths, dateAddYear, dateGetDaysInMonth, dateIsLeapYear, getDateStringFromDay, getDateValuesFromDate, getDayFromDateString, getDaysInMonth, getFirstXDaysFromNextMonth, getFiveBySevenCurrentMonthDaysMatrix, getHowManyDaysInMonth, getLastDayOfMonth, getLastXDaysFromPreviousMonth, getMonthNameByMonthNumber, getTimeStringFromDay, getValidationDateStringMetaInfo, isLeapYear, isSameDateMoment, isValidDayForTheMonth, isValidDayForTheMonthDateString, subtractMonths, subtractYears, sumFromDateValues, sumMonths, sumValuesToDate, sumYears };

package/esm/controlled-date-time-picker/utils/dateTimeHelpers.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 { getValidationDateStringMetaInfo } from './dateHelpers.js';
 import { getValidationTimeStringMetaInfo } from './timeHelpers.js';
@@ -5,6 +10,6 @@ import { getValidationTimeStringMetaInfo } from './timeHelpers.js';
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const getValidatioDateTimeStringMetaInfo = (dateString, timeString, validators) => _objectSpread(_objectSpread({}, getValidationDateStringMetaInfo(dateString, validators.getIsOutOfRangeDay, validators.getIsDisabledDay)), getValidationTimeStringMetaInfo(timeString, validators.getIsDisabledTime));
+const getValidationDateTimeStringMetaInfo = (dateString, timeString, validators) => _objectSpread(_objectSpread({}, getValidationDateStringMetaInfo(dateString, validators.getIsOutOfRangeDay, validators.getIsDisabledDay)), getValidationTimeStringMetaInfo(timeString, validators.getIsDisabledTime));
 
-export { getValidatioDateTimeStringMetaInfo };
+export { getValidationDateTimeStringMetaInfo };