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

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

@@ -2,255 +2,332 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var controlledDateTimePicker_ControlledDateTimePickerCTX = require('../../ControlledDateTimePickerCTX.js');
-var controlledDateTimePicker_utils_constants = require('../../utils/constants.js');
-var controlledDateTimePicker_utils_stringHelpers = require('../../utils/stringHelpers.js');
-require('../../ControlledDateTimePickerTypes.js');
-require('@babel/runtime/helpers/slicedToArray');
-require('../../utils/numberHelpers.js');
-
-/* eslint-disable complexity */
-var useTimeInputs = function useTimeInputs() {
-  var _useContext = React.useContext(controlledDateTimePicker_ControlledDateTimePickerCTX.ControlledDateTimePickerContext),
-      _useContext$props = _useContext.props,
-      minutesInterval = _useContext$props.minutesInterval,
-      disabled = _useContext$props.disabled,
-      lastSegmentRef = _useContext.lastSegmentRef,
-      hours = _useContext.hours,
-      minutes = _useContext.minutes,
-      meridiem = _useContext.meridiem,
-      hideDate = _useContext.hideDate,
-      withAnyRightController = _useContext.withAnyRightController,
-      withAnyPicker = _useContext.withAnyPicker,
-      withClearBtn = _useContext.withClearBtn,
-      isWithDateInputs = _useContext.isWithDateInputs,
-      hourInputRef = _useContext.hourInputRef,
-      minutesInputRef = _useContext.minutesInputRef,
-      meridiemInputRef = _useContext.meridiemInputRef,
-      yearInputRef = _useContext.yearInputRef,
-      clearButtonRef = _useContext.clearButtonRef,
-      pickerButtonRef = _useContext.pickerButtonRef,
-      monthInputRef = _useContext.monthInputRef,
-      autoFocusHourInput = _useContext.autoFocusHourInput,
-      handleChangeHours = _useContext.handleChangeHours,
-      handleChangeMinutes = _useContext.handleChangeMinutes,
-      handleChangeMeridiem = _useContext.handleChangeMeridiem,
-      setLatestInteractionRegion = _useContext.setLatestInteractionRegion;
-
-  var setLatestInteractionRegionTimeInputs = React.useCallback(function () {
+var ControlledDateTimePickerCTX = require('../../ControlledDateTimePickerCTX.js');
+var stringHelpers = require('../../utils/stringHelpers.js');
+var timeHelpers = require('../../utils/timeHelpers.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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__default["default"](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 useTimeInputs = () => {
+  const {
+    props: {
+      onHourChange: appOnHourChange,
+      onMinuteChange: appOnMinuteChange,
+      // onSecondsChange: appOnSecondsChange,
+      onMeridiemChange: appOnMeridiemChange,
+      getIsDisabledTime,
+      minutesInterval
+    },
+    hours,
+    minutes,
+    meridiem,
+    hideDate,
+    withAnyRightController,
+    withAnyPicker,
+    withClearBtn,
+    hourInputRef,
+    minutesInputRef,
+    // secondsInputRef,
+    meridiemInputRef,
+    clearButtonRef,
+    pickerButtonRef,
+    monthInputRef,
+    autoFocusHourInput,
+    handleChangeComposedTimeString,
+    setLatestInteractionRegion
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const setLatestInteractionRegionTimeInputs = React.useCallback(() => {
     setLatestInteractionRegion('time-inputs');
   }, [setLatestInteractionRegion]);
-  var onHomeKeyDown = React.useCallback(function () {
+  const onHomeKeyDown = 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 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]);
-  var onEndKeyDown = React.useCallback(function () {
+  const onEndKeyDown = React.useCallback(() => {
     var _pickerButtonRef$curr, _pickerButtonRef$curr2, _clearButtonRef$curre, _clearButtonRef$curre2, _meridiemInputRef$cur, _meridiemInputRef$cur2;
 
     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]);
-  var onHoursFocus = React.useCallback(function () {
+  const handleChangeHours = React.useCallback((newHours, e, metaInfo = {
+    isAutomaticFillTrigger: false
+  }) => {
+    const newTimeString = stringHelpers.getFormattedTimeString({
+      hours: newHours,
+      minutes,
+      // seconds,
+      meridiem
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), timeHelpers.getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
+      newTimeString
+    });
+
+    appOnHourChange(newHours, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [minutes, meridiem, getIsDisabledTime, appOnHourChange, handleChangeComposedTimeString]);
+  const onHoursFocus = React.useCallback(() => {
     setLatestInteractionRegionTimeInputs();
   }, [setLatestInteractionRegionTimeInputs]);
-  var onHoursChange = React.useCallback(function (e) {
+  const onHoursChange = React.useCallback(e => {
     var _e$target, _minutesInputRef$curr, _minutesInputRef$curr2;
 
-    var newHours = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value; // converts hours 2~9 to 07~09
+    let newHours = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value; // converts hours 2~9 to 07~09
 
-    if (Number.parseInt(newHours, 10) > 1) newHours = controlledDateTimePicker_utils_stringHelpers.prependStringWithPlaceHolders(newHours, 2);
+    if (Number.parseInt(newHours, 10) > 1) newHours = stringHelpers.prependStringWithPlaceHolders(newHours, 2);
     handleChangeHours(newHours, e); // auto-advance functionality:
 
     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]);
-  var onHoursKeyDown = React.useCallback(function (e) {
-    var _lastSegmentRef$curre, _lastSegmentRef$curre2;
-
-    var key = e.key,
-        ctrlKey = e.ctrlKey,
-        metaKey = e.metaKey;
-    var hoursStringConvertedToInteger = Number.parseInt(hours, 10);
-    if (controlledDateTimePicker_utils_constants.homeEndArrowUpDownSemiKeys.includes(key)) e.preventDefault();
-    if (controlledDateTimePicker_utils_constants.homeEndArrowUpDownSemiKeys.includes(key)) e.stopPropagation();
+  const onHoursKeyDown = React.useCallback(e => {
+    const {
+      key
+    } = e;
+    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
+    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
+    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (stopPropagationKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
 
     if (key === 'ArrowUp' || key === 'ArrowDown') {
-      var hoursInteger = Number.isNaN(hoursStringConvertedToInteger) ? 0 : hoursStringConvertedToInteger;
-      var newHours;
+      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 = controlledDateTimePicker_utils_stringHelpers.prependStringWithPlaceHolders("".concat(newHours), 2);
+      newHours = stringHelpers.prependStringWithPlaceHolders("".concat(newHours), 2);
       handleChangeHours(newHours, e);
     }
-
-    if (!Number.isNaN(hoursStringConvertedToInteger) && key === ':') {
-      var _minutesInputRef$curr3, _minutesInputRef$curr4;
-
-      var _newHours = controlledDateTimePicker_utils_stringHelpers.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]);
-  var onHoursBlur = React.useCallback(function (e) {
+  }, [onHomeKeyDown, onEndKeyDown, handleChangeHours, hours]);
+  const onHoursBlur = React.useCallback(e => {
     var _e$target2;
 
-    var newHours = e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.value;
+    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('01', e, {
       isAutomaticFillTrigger: true
-    });else if (newHours.length > 0 && newHours.length < 2) handleChangeHours(controlledDateTimePicker_utils_stringHelpers.prependStringWithPlaceHolders(newHours, 2), e, {
+    });else if (newHours.length > 0 && newHours.length < 2) handleChangeHours(stringHelpers.prependStringWithPlaceHolders(newHours, 2), e, {
       isAutomaticFillTrigger: true
     });
   }, [handleChangeHours]);
-  var onMinutesFocus = React.useCallback(function () {
+  const handleChangeMinutes = React.useCallback((newMinutes, e, metaInfo = {
+    isAutomaticFillTrigger: false
+  }) => {
+    const newTimeString = stringHelpers.getFormattedTimeString({
+      hours,
+      minutes: newMinutes,
+      // seconds,
+      meridiem
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), timeHelpers.getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
+      newTimeString
+    });
+
+    appOnMinuteChange(newMinutes, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [hours, meridiem, getIsDisabledTime, appOnMinuteChange, handleChangeComposedTimeString]);
+  const onMinutesFocus = React.useCallback(() => {
     setLatestInteractionRegionTimeInputs();
   }, [setLatestInteractionRegionTimeInputs]);
-  var onMinutesChange = React.useCallback(function (e) {
+  const onMinutesChange = React.useCallback(e => {
     var _e$target3, _meridiemInputRef$cur3, _meridiemInputRef$cur4;
 
-    var newMinutes = e === null || e === void 0 ? void 0 : (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.value; // converts minutes 7~9 to 07~09
+    let newMinutes = e === null || e === void 0 ? void 0 : (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.value; // converts minutes 7~9 to 07~09
 
-    if (Number.parseInt(newMinutes, 10) > 6) newMinutes = controlledDateTimePicker_utils_stringHelpers.prependStringWithPlaceHolders(newMinutes, 2);
+    if (Number.parseInt(newMinutes, 10) > 6) newMinutes = stringHelpers.prependStringWithPlaceHolders(newMinutes, 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$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]);
-  var onMinutesKeyDown = React.useCallback(function (e) {
-    var _lastSegmentRef$curre3, _lastSegmentRef$curre4;
-
-    var key = e.key,
-        ctrlKey = e.ctrlKey,
-        metaKey = e.metaKey;
-    var minutesStringConvertedToInteger = Number.parseInt(minutes, 10);
-    if (controlledDateTimePicker_utils_constants.homeEndArrowUpDownSpaceKeys.includes(key)) e.preventDefault();
-    if (controlledDateTimePicker_utils_constants.homeEndArrowUpDownSpaceKeys.includes(key)) e.stopPropagation();
+  const onMinutesKeyDown = React.useCallback(e => {
+    const {
+      key
+    } = e;
+    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
+    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
+    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (stopPropagationKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
 
     if (key === 'ArrowUp' || key === 'ArrowDown') {
-      var minutesInteger = Number.isNaN(minutesStringConvertedToInteger) ? 0 : minutesStringConvertedToInteger;
-      var newMinutes;
+      const minutesStringConvertedToInteger = Number.parseInt(minutes, 10);
+      const minutesInteger = Number.isNaN(minutesStringConvertedToInteger) ? 0 : minutesStringConvertedToInteger;
+      let newMinutes;
       if (key === 'ArrowUp') newMinutes = minutesInteger + minutesInterval <= 59 ? minutesInteger + minutesInterval : minutesInteger;else newMinutes = minutesInteger - minutesInterval > 0 ? minutesInteger - minutesInterval : 0;
-      newMinutes = controlledDateTimePicker_utils_stringHelpers.prependStringWithPlaceHolders("".concat(newMinutes), 2);
+      newMinutes = stringHelpers.prependStringWithPlaceHolders("".concat(newMinutes), 2);
       handleChangeMinutes(newMinutes, e);
     }
-
-    if (!Number.isNaN(minutesStringConvertedToInteger) && key === ' ') {
-      var _meridiemInputRef$cur5, _meridiemInputRef$cur6;
-
-      var _newMinutes = controlledDateTimePicker_utils_stringHelpers.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]);
-  var onMinutesBlur = React.useCallback(function (e) {
+  }, [onHomeKeyDown, onEndKeyDown, minutes, minutesInterval, handleChangeMinutes]);
+  const onMinutesBlur = React.useCallback(e => {
     var _e$target4;
 
-    var newMinutes = e === null || e === void 0 ? void 0 : (_e$target4 = e.target) === null || _e$target4 === void 0 ? void 0 : _e$target4.value;
-    if (newMinutes.length > 0 && newMinutes.length < 2) handleChangeMinutes(controlledDateTimePicker_utils_stringHelpers.prependStringWithPlaceHolders(newMinutes, 2), e, {
+    const newMinutes = e === null || e === void 0 ? void 0 : (_e$target4 = e.target) === null || _e$target4 === void 0 ? void 0 : _e$target4.value;
+    if (newMinutes.length > 0 && newMinutes.length < 2) handleChangeMinutes(stringHelpers.prependStringWithPlaceHolders(newMinutes, 2), e, {
       isAutomaticFillTrigger: true
     });
-  }, [handleChangeMinutes]);
-  var onMeridiemFocus = React.useCallback(function () {
+  }, [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 = React.useCallback((newMeridiem, e, metaInfo = {
+    isAutomaticFillTrigger: false
+  }) => {
+    const newTimeString = stringHelpers.getFormattedTimeString({
+      hours,
+      minutes,
+      // seconds,
+      meridiem: newMeridiem
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), timeHelpers.getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
+      newTimeString
+    });
+
+    appOnMeridiemChange(newMeridiem, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [hours, minutes, getIsDisabledTime, appOnMeridiemChange, handleChangeComposedTimeString]);
+  const onMeridiemFocus = React.useCallback(() => {
     setLatestInteractionRegionTimeInputs();
   }, [setLatestInteractionRegionTimeInputs]);
-  var onMeridiemChange = React.useCallback(function (e) {
+  const onMeridiemChange = React.useCallback(e => {
     var _e$target5, _e$target5$value, _e$target5$value$toUp;
 
-    var 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 = '';
+    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 = "".concat(newMeridiem, "M");
     handleChangeMeridiem(newMeridiem, e); // auto-advance functionality:
 
     if (newMeridiem.length === 2 && withAnyRightController) {
       var _clearButtonRef$curre3, _clearButtonRef$curre4, _pickerButtonRef$curr3, _pickerButtonRef$curr4;
 
-      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);
+      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); // pending approval from Seda, check which one should be focused first...
     }
-  }, [meridiem, handleChangeMeridiem, withAnyRightController, withClearBtn, clearButtonRef, withAnyPicker, pickerButtonRef]);
-  var onMeridiemKeyDown = React.useCallback(function (e) {
-    var _lastSegmentRef$curre5, _lastSegmentRef$curre6;
-
-    var key = e.key,
-        ctrlKey = e.ctrlKey,
-        metaKey = e.metaKey;
-    if (controlledDateTimePicker_utils_constants.homeEndArrowUpDownKeys.includes(key)) e.preventDefault();
-    if (controlledDateTimePicker_utils_constants.homeEndArrowUpDownKeys.includes(key)) e.stopPropagation();
+  }, [handleChangeMeridiem, withAnyRightController, withAnyPicker, pickerButtonRef, withClearBtn, clearButtonRef]);
+  const onMeridiemKeyDown = React.useCallback(e => {
+    const {
+      key
+    } = e;
+    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
+    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
+    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (stopPropagationKeys.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); // 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]);
-  var onMeridiemBlur = React.useCallback(function (e) {
+    if (key === 'ArrowDown' && meridiem !== 'PM') handleChangeMeridiem('PM', e);
+  }, [onHomeKeyDown, onEndKeyDown, handleChangeMeridiem, meridiem]);
+  const onMeridiemBlur = React.useCallback(e => {
     var _e$target6, _e$target6$value, _e$target6$value$toUp;
 
-    var 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);
+    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("".concat(newMeridiem, "M"), e, {
       isAutomaticFillTrigger: true
     });
   }, [handleChangeMeridiem]);
-  return React.useMemo(function () {
-    return {
-      hours: hours,
-      minutes: minutes,
-      meridiem: meridiem,
-      autoFocusHourInput: autoFocusHourInput,
-      disabled: disabled,
-      handleChangeHours: handleChangeHours,
-      onHoursFocus: onHoursFocus,
-      onHoursChange: onHoursChange,
-      handleChangeMinutes: handleChangeMinutes,
-      onMinutesFocus: onMinutesFocus,
-      onMinutesChange: onMinutesChange,
-      handleChangeMeridiem: handleChangeMeridiem,
-      onMeridiemFocus: onMeridiemFocus,
-      onMeridiemChange: onMeridiemChange,
-      onHoursBlur: onHoursBlur,
-      onMinutesBlur: onMinutesBlur,
-      onMeridiemBlur: onMeridiemBlur,
-      onHoursKeyDown: onHoursKeyDown,
-      onMinutesKeyDown: onMinutesKeyDown,
-      onMeridiemKeyDown: onMeridiemKeyDown
-    };
-  }, [hours, minutes, meridiem, autoFocusHourInput, disabled, handleChangeHours, onHoursFocus, onHoursChange, handleChangeMinutes, onMinutesFocus, onMinutesChange, handleChangeMeridiem, onMeridiemFocus, onMeridiemChange, onHoursBlur, onMinutesBlur, onMeridiemBlur, onHoursKeyDown, onMinutesKeyDown, onMeridiemKeyDown]);
+  return React.useMemo(() => ({
+    hours,
+    minutes,
+    // seconds,
+    meridiem,
+    autoFocusHourInput,
+    handleChangeHours,
+    onHoursFocus,
+    onHoursChange,
+    handleChangeMinutes,
+    onMinutesFocus,
+    onMinutesChange,
+    // handleChangeSeconds,
+    // onSecondsFocus,
+    // onSecondsChange,
+    handleChangeMeridiem,
+    onMeridiemFocus,
+    onMeridiemChange,
+    onHoursBlur,
+    onMinutesBlur,
+    // onSecondsBlur,
+    onMeridiemBlur,
+    onHoursKeyDown,
+    onMinutesKeyDown,
+    // onSecondsKeyDown,
+    onMeridiemKeyDown
+  }), [hours, minutes, // seconds,
+  meridiem, autoFocusHourInput, handleChangeHours, onHoursFocus, onHoursChange, handleChangeMinutes, onMinutesFocus, onMinutesChange, // handleChangeSeconds,
+  // onSecondsFocus,
+  // onSecondsChange,
+  handleChangeMeridiem, onMeridiemFocus, onMeridiemChange, onHoursBlur, onMinutesBlur, // onSecondsBlur,
+  onMeridiemBlur, onHoursKeyDown, onMinutesKeyDown, // onSecondsKeyDown,
+  onMeridiemKeyDown]);
 };
 
 exports.useTimeInputs = useTimeInputs;
-//# sourceMappingURL=useTimeInputs.js.map

package/cjs/controlled-date-time-picker/parts/config.js

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var fixedValues = {
+const fixedValues = {
   smallInputWidth: '28px',
   largeInputWidth: '40px',
   separatorWidth: '7px'
 };
 
 exports.fixedValues = fixedValues;
-//# sourceMappingURL=config.js.map

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

@@ -4,9 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var reactDesc = require('react-desc');
 
-var propTypes = {
+const propTypes = {
   type: reactDesc.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: reactDesc.PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),
   isClearable: reactDesc.PropTypes.bool.description('with or without clearable button').defaultValue('false'),
   dateTime: reactDesc.PropTypes.string.description('when using date-time types, this is the value of the controller'),
   date: reactDesc.PropTypes.string.description('when using date types, this is the value of the controller'),
@@ -29,4 +28,3 @@ var propTypes = {
 };
 
 exports.propTypes = propTypes;
-//# sourceMappingURL=propTypes.js.map

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-var announcableCardinalDays = {
+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',
@@ -37,24 +37,7 @@ var announcableCardinalDays = {
   30: 'thirtieth',
   31: 'thirty first'
 };
-var homeEndAllArrowKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-var homeEndKeys = ['Home', 'End'];
-var homeEndArrowUpDownDashSlashesKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', '-', '/', '\\'];
-var homeEndArrowUpDownSpaceKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', ' '];
-var homeEndArrowUpDownSemiKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', ':'];
-var homeEndArrowUpDownKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
-var defaultMetaInfo = {
-  isAutomaticFillTrigger: false
-};
 
 exports.announcableCardinalDays = announcableCardinalDays;
-exports.defaultMetaInfo = defaultMetaInfo;
-exports.homeEndAllArrowKeys = homeEndAllArrowKeys;
-exports.homeEndArrowUpDownDashSlashesKeys = homeEndArrowUpDownDashSlashesKeys;
-exports.homeEndArrowUpDownKeys = homeEndArrowUpDownKeys;
-exports.homeEndArrowUpDownSemiKeys = homeEndArrowUpDownSemiKeys;
-exports.homeEndArrowUpDownSpaceKeys = homeEndArrowUpDownSpaceKeys;
-exports.homeEndKeys = homeEndKeys;
 exports.monthNames = monthNames;
 exports.weekDays = weekDays;
-//# sourceMappingURL=constants.js.map