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

package/esm/controlled-date-time-picker/config/useControlledDateTimePicker.js

@@ -1,314 +1,195 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { useRef, useMemo, useState, useCallback } from 'react';
 import { useGetDatePickerWithDefaultsProps } from './useGetPropsWithDefault.js';
 import { useGetDestructuredValues } from './useGetDestructuredValues.js';
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../ControlledDateTimePickerTypes.js';
 import { useValidateProps } from './useValidateProps.js';
-import { getValidationDateStringMetaInfo, getDateStringFromDay, getTimeStringFromDay } from '../utils/dateHelpers.js';
+import { getValidationDateStringMetaInfo } from '../utils/dateHelpers.js';
 import { getValidationTimeStringMetaInfo } from '../utils/timeHelpers.js';
-import { dateTimeToDate, dateTimeToTime, getFormattedDateString, getFormattedTimeString, isEmptyDateStringMask, isEmptyTimeStringMask, isEmptyDateTimeStringMask } from '../utils/stringHelpers.js';
-import { defaultMetaInfo } from '../utils/constants.js';
-import '@elliemae/ds-props-helpers';
-import '../ControlledDateTimePickerCTX.js';
-import '../utils/numberHelpers.js';
-import '@babel/runtime/helpers/esm/typeof';
-import '@babel/runtime/helpers/esm/toConsumableArray';
+import { dateTimeToDate, dateTimeToTime, isEmptyDateStringMask, isEmptyTimeStringMask, isEmptyDateTimeStringMask } from '../utils/stringHelpers.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; }
-var useControlledDateTimePicker = function useControlledDateTimePicker(props) {
+const useControlledDateTimePicker = props => {
   // if we detect wrong props configuration we throw meaningful errors
   useValidateProps(props); // refs are used for "auto-advance" feature
 
-  var monthInputRef = useRef();
-  var dayInputRef = useRef();
-  var yearInputRef = useRef();
-  var hourInputRef = useRef();
-  var minutesInputRef = useRef();
-  var meridiemInputRef = useRef();
-  var clearButtonRef = useRef();
-  var pickerButtonRef = useRef();
-  var prevYearBtnRef = useRef();
-  var prevMonthBtnRef = useRef();
-  var nextMonthBtnRef = useRef();
-  var nextYearBtnRef = useRef();
-  var calendarDaysWrapperRef = useRef();
-  var prevHourBtnRef = useRef();
-  var currHourBtnRef = useRef();
-  var nextHourBtnRef = useRef();
-  var prevMinutesBtnRef = useRef();
-  var currMinutesBtnRef = useRef();
-  var nextMinutesBtnRef = useRef();
-  var prevMeridiemBtnRef = useRef();
-  var currMeridiemBtnRef = useRef();
-  var nextMeridiemBtnRef = useRef();
-  var propsWithDefaults = useGetDatePickerWithDefaultsProps(props);
-  var type = propsWithDefaults.type,
-      getIsDisabledDay = propsWithDefaults.getIsDisabledDay,
-      getIsOutOfRangeDay = propsWithDefaults.getIsOutOfRangeDay,
-      getIsDisabledTime = propsWithDefaults.getIsDisabledTime,
-      isClearable = propsWithDefaults.isClearable,
-      autoFocus = propsWithDefaults.autoFocus,
-      appOnDateChange = propsWithDefaults.onDateChange,
-      appOnDateTimeChange = propsWithDefaults.onDateTimeChange,
-      appOnTimeChange = propsWithDefaults.onTimeChange,
-      appOnMonthChange = propsWithDefaults.onMonthChange,
-      appOnDayChange = propsWithDefaults.onDayChange,
-      appOnYearChange = propsWithDefaults.onYearChange,
-      appOnHourChange = propsWithDefaults.onHourChange,
-      appOnMinuteChange = propsWithDefaults.onMinuteChange,
-      appOnMeridiemChange = propsWithDefaults.onMeridiemChange,
-      appDate = propsWithDefaults.date,
-      appTime = propsWithDefaults.time,
-      appDateTime = propsWithDefaults.dateTime;
-  var dateStringFromProps = useMemo(function () {
-    return propsWithDefaults.dateTime && propsWithDefaults.dateTime !== '' ? dateTimeToDate(propsWithDefaults.dateTime) : propsWithDefaults.date && propsWithDefaults.date !== '' ? propsWithDefaults.date : '__/__/____';
-  }, [propsWithDefaults.date, propsWithDefaults.dateTime]); // don't use tempDateString to trigger useEffect for onDateChange
+  const monthInputRef = useRef();
+  const dayInputRef = useRef();
+  const yearInputRef = useRef();
+  const hourInputRef = useRef();
+  const minutesInputRef = useRef(); // const secondsInputRef = useRef<HTMLInputElement>();
+
+  const meridiemInputRef = useRef();
+  const clearButtonRef = useRef();
+  const pickerButtonRef = useRef();
+  const prevYearBtnRef = useRef();
+  const prevMonthBtnRef = useRef();
+  const nextMonthBtnRef = useRef();
+  const nextYearBtnRef = useRef();
+  const calendarDaysWrapperRef = useRef();
+  const prevHourBtnRef = useRef();
+  const currHourBtnRef = useRef();
+  const nextHourBtnRef = useRef();
+  const prevMinutesBtnRef = useRef();
+  const currMinutesBtnRef = useRef();
+  const nextMinutesBtnRef = useRef(); // const prevSecondsBtnRef = useRef<HTMLButtonElement>();
+  // const currSecondsBtnRef = useRef<HTMLButtonElement>();
+  // const nextSecondsBtnRef = useRef<HTMLButtonElement>();
+
+  const prevMeridiemBtnRef = useRef();
+  const currMeridiemBtnRef = useRef();
+  const nextMeridiemBtnRef = useRef();
+  const propsWithDefaults = useGetDatePickerWithDefaultsProps(props);
+  const {
+    type,
+    getIsDisabledDay,
+    getIsOutOfRangeDay,
+    getIsDisabledTime,
+    isClearable,
+    autoFocus,
+    onDateChange: appOnDateChange,
+    onDateTimeChange: appOnDateTimeChange,
+    onTimeChange: appOnTimeChange,
+    onMonthChange: appOnMonthChange,
+    onDayChange: appOnDayChange,
+    onYearChange: appOnYearChange,
+    onHourChange: appOnHourChange,
+    onMinuteChange: appOnMinuteChange,
+    onMeridiemChange: appOnMeridiemChange,
+    date: appDate,
+    time: appTime,
+    dateTime: appDateTime
+  } = propsWithDefaults;
+  const dateStringFromProps = useMemo(() => propsWithDefaults.dateTime && propsWithDefaults.dateTime !== '' ? dateTimeToDate(propsWithDefaults.dateTime) : propsWithDefaults.date && propsWithDefaults.date !== '' ? propsWithDefaults.date : '__/__/____', [propsWithDefaults.date, propsWithDefaults.dateTime]); // don't use tempDateString to trigger useEffect for onDateChange
   // that is an anti-pattern and leads to a lot of issue
   // if you don't believe me, check date-time-picker v1 which is doing it
 
-  var _useState = useState(dateStringFromProps),
-      _useState2 = _slicedToArray(_useState, 2),
-      tempDateString = _useState2[0],
-      setTempDateString = _useState2[1];
-
-  var timeStringFromProps = useMemo(function () {
-    return propsWithDefaults.dateTime && propsWithDefaults.dateTime !== '' ? dateTimeToTime(propsWithDefaults.dateTime) : propsWithDefaults.time && propsWithDefaults.time !== '' ? propsWithDefaults.time : '__:__ __';
-  }, [propsWithDefaults.time, propsWithDefaults.dateTime]); // don't use tempTimeString to trigger useEffect for onTimeChange
+  const [tempDateString, setTempDateString] = useState(dateStringFromProps);
+  const timeStringFromProps = useMemo(() => propsWithDefaults.dateTime && propsWithDefaults.dateTime !== '' ? dateTimeToTime(propsWithDefaults.dateTime) : propsWithDefaults.time && propsWithDefaults.time !== '' ? propsWithDefaults.time : '__:__ __', [propsWithDefaults.time, propsWithDefaults.dateTime]); // don't use tempTimeString to trigger useEffect for onTimeChange
   // that is an anti-pattern and leads to a lot of issue
   // if you don't believe me, check date-time-picker v1 which is doing it
 
-  var _useState3 = useState(timeStringFromProps),
-      _useState4 = _slicedToArray(_useState3, 2),
-      tempTimeString = _useState4[0],
-      setTimeString = _useState4[1];
-
-  var hideDate = type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.INPUTS && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.INPUTS;
-  var hideTime = type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.INPUTS && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.INPUTS;
-  var hideDateTimePicker = type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY;
-  var hideDatePicker = type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.PICKER && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY;
-  var hideTimePicker = type !== CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.PICKER && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.CONTROLLER_ONLY;
-  var isDateSelector = type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.FULL || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.INPUTS || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.PICKER || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY;
-  var isTimeSelector = type === CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.FULL || type === CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.INPUTS || type === CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.PICKER || type === CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.CONTROLLER_ONLY;
-  var isDateTimeSelector = type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.INPUTS || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY;
-  var isControllerOnly = type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY || type === CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.CONTROLLER_ONLY;
-  var isWithTimeWheelToo = type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY;
-  var isWithCalendarToo = type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY;
-  var withAnyInputs = !hideDate || !hideTime;
-  var withAnyPicker = !hideDateTimePicker || !hideTimePicker || !hideDatePicker;
-  var withClearBtn = isClearable && withAnyInputs && (dateStringFromProps !== '__/__/____' && dateStringFromProps !== '' || // date is not "empty-ish"
+  const [tempTimeString, setTimeString] = useState(timeStringFromProps);
+  const hideDate = type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.INPUTS && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.INPUTS;
+  const hideTime = type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.INPUTS && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.INPUTS;
+  const hideDateTimePicker = type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY;
+  const hideDatePicker = type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.PICKER && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY;
+  const hideTimePicker = type !== CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.PICKER && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.CONTROLLER_ONLY;
+  const isDateSelector = type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.FULL || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.INPUTS || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.PICKER || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY;
+  const isTimeSelector = type === CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.FULL || type === CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.INPUTS || type === CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.PICKER || type === CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.CONTROLLER_ONLY;
+  const isDateTimeSelector = type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.INPUTS || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY;
+  const isControllerOnly = type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY || type === CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.CONTROLLER_ONLY;
+  const isWithTimeWheelToo = type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY;
+  const isWithCalendarToo = type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY;
+  const withAnyInputs = !hideDate || !hideTime;
+  const withAnyPicker = !hideDateTimePicker || !hideTimePicker || !hideDatePicker;
+  const withClearBtn = isClearable && withAnyInputs && (dateStringFromProps !== '__/__/____' && dateStringFromProps !== '' || // date is not "empty-ish"
   timeStringFromProps !== '__:__ __' && timeStringFromProps !== ''); // or time is not "empty-ish"
 
-  var isWithDateInputs = withAnyInputs && (isDateTimeSelector || isDateSelector);
-  var isWithDateInputsOnly = withAnyInputs && isDateSelector;
-  var isWithTimeInputs = withAnyInputs && (isDateTimeSelector || isTimeSelector);
-  var isWithTimeInputsOnly = withAnyInputs && isTimeSelector;
-  var autoFocusMonthInput = isWithDateInputs && autoFocus;
-  var autoFocusHourInput = isWithTimeInputsOnly && autoFocus;
-  var autoFocusPrevMonthArrow = isControllerOnly && autoFocus;
-  var autoFocusHourTimeWheel = isControllerOnly && isTimeSelector && autoFocus;
-  var shouldPreserveClearableSpace = isClearable && withAnyInputs;
-  var withAnyRightController = withAnyPicker || withClearBtn || shouldPreserveClearableSpace;
-
-  var _useState5 = useState(''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      latestInteractionRegion = _useState6[0],
-      setLatestInteractionRegion = _useState6[1];
-
-  var firstSegmentRef = useRef();
-  if (isWithDateInputs) firstSegmentRef = monthInputRef;else if (isWithTimeInputs) firstSegmentRef = hourInputRef;else if (withAnyPicker) firstSegmentRef = pickerButtonRef;
-  var lastSegmentRef = useRef();
-  if (withAnyPicker) lastSegmentRef = pickerButtonRef;else if (withClearBtn) lastSegmentRef = clearButtonRef;else if (isWithTimeInputs) lastSegmentRef = meridiemInputRef;else if (isWithDateInputs) lastSegmentRef = yearInputRef;
-
-  var _useGetDestructuredVa = useGetDestructuredValues({
+  const isWithDateInputs = withAnyInputs && (isDateTimeSelector || isDateSelector);
+  const isWithDateInputsOnly = withAnyInputs && isDateSelector;
+  const isWithTimeInputs = withAnyInputs && (isDateTimeSelector || isTimeSelector);
+  const isWithTimeInputsOnly = withAnyInputs && isTimeSelector;
+  const autoFocusMonthInput = isWithDateInputs && autoFocus;
+  const autoFocusHourInput = isWithTimeInputsOnly && autoFocus;
+  const autoFocusPrevMonthArrow = isControllerOnly && autoFocus;
+  const autoFocusHourTimeWheel = isControllerOnly && isTimeSelector && autoFocus;
+  const shouldPreserveClearableSpace = isClearable && withAnyInputs;
+  const withAnyRightController = withAnyPicker || withClearBtn || shouldPreserveClearableSpace;
+  const [latestInteractionRegion, setLatestInteractionRegion] = useState('');
+  const {
+    month,
+    day,
+    year,
+    monthNum,
+    dayNum,
+    yearNum,
+    announcedMonth,
+    announcedDay,
+    announcedYear,
+    announcedDateValues,
+    hours,
+    minutes,
+    meridiem,
+    hoursNum,
+    minutesNum,
+    announcedHours,
+    announcedMinutes,
+    announcedMeridiem,
+    announcedTimeValues
+  } = useGetDestructuredValues({
     date: appDate,
     time: appTime,
     dateTime: appDateTime,
-    isDateTimeSelector: isDateTimeSelector
-  }),
-      month = _useGetDestructuredVa.month,
-      day = _useGetDestructuredVa.day,
-      year = _useGetDestructuredVa.year,
-      monthNum = _useGetDestructuredVa.monthNum,
-      dayNum = _useGetDestructuredVa.dayNum,
-      yearNum = _useGetDestructuredVa.yearNum,
-      announcedMonth = _useGetDestructuredVa.announcedMonth,
-      announcedDay = _useGetDestructuredVa.announcedDay,
-      announcedYear = _useGetDestructuredVa.announcedYear,
-      announcedDateValues = _useGetDestructuredVa.announcedDateValues,
-      hours = _useGetDestructuredVa.hours,
-      minutes = _useGetDestructuredVa.minutes,
-      meridiem = _useGetDestructuredVa.meridiem,
-      hoursNum = _useGetDestructuredVa.hoursNum,
-      minutesNum = _useGetDestructuredVa.minutesNum,
-      announcedHours = _useGetDestructuredVa.announcedHours,
-      announcedMinutes = _useGetDestructuredVa.announcedMinutes,
-      announcedMeridiem = _useGetDestructuredVa.announcedMeridiem,
-      announcedTimeValues = _useGetDestructuredVa.announcedTimeValues;
-
-  var ariaCurrentValueForInputs = "current values: ".concat(isWithDateInputs ? "".concat(announcedDateValues) : '').concat(isDateTimeSelector ? ', ' : '').concat(isWithTimeInputs ? "".concat(announcedTimeValues) : '');
-  var getDateMetaInfo = useCallback(function () {
-    var newDateString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var metaInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var finalDateString = newDateString || tempDateString;
+    isDateTimeSelector
+  });
+  const ariaCurrentValueForInputs = "current values: ".concat(isWithDateInputs ? "".concat(announcedDateValues) : '').concat(isDateTimeSelector ? ', ' : '').concat(isWithTimeInputs ? "".concat(announcedTimeValues) : '');
+  const getDateMetaInfo = useCallback((newDateString = null, metaInfo = {}) => {
+    const finalDateString = newDateString || tempDateString;
     return _objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(finalDateString, getIsOutOfRangeDay, getIsDisabledDay));
   }, [tempDateString, getIsDisabledDay, getIsOutOfRangeDay]);
-  var getTimeMetaInfo = useCallback(function () {
-    var newTimeString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var metaInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var finalTimeString = newTimeString || tempTimeString;
+  const getTimeMetaInfo = useCallback((newTimeString = null, metaInfo = {}) => {
+    const finalTimeString = newTimeString || tempTimeString;
     return _objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(finalTimeString, getIsDisabledTime));
   }, [tempTimeString, getIsDisabledTime]);
-  var handleChangeComposedDateTimeString = useCallback(function (newDateString, newTimeString, metaInfo) {
-    var appDateString = isEmptyDateStringMask(newDateString) ? '' : newDateString;
-    var appTimeString = isEmptyTimeStringMask(newTimeString) ? '' : newTimeString;
+  const handleChangeComposedDateTimeString = useCallback((newDateString, newTimeString, metaInfo) => {
+    const appDateString = isEmptyDateStringMask(newDateString) ? '' : newDateString;
+    const appTimeString = isEmptyTimeStringMask(newTimeString) ? '' : newTimeString;
     appOnDateChange(appDateString, metaInfo); // don't do this on useEffect to avoid complete chaos
 
     setTempDateString(newDateString);
     appOnTimeChange(appTimeString, metaInfo); // don't do this on useEffect to avoid complete chaos
 
     setTimeString(newTimeString);
-    var newDateTimeString = "".concat(newDateString, " ").concat(newTimeString);
+    const newDateTimeString = "".concat(newDateString, " ").concat(newTimeString);
 
-    var newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(newTimeString, metaInfo)), getDateMetaInfo(newDateString, metaInfo)), {}, {
-      newDateString: newDateString,
-      newTimeString: newTimeString,
-      newDateTimeString: newDateTimeString
+    const newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(newTimeString, metaInfo)), getDateMetaInfo(newDateString, metaInfo)), {}, {
+      newDateString,
+      newTimeString,
+      newDateTimeString
     });
 
-    var appDateTimeString = isEmptyDateTimeStringMask(newDateTimeString) ? '' : newDateTimeString;
+    const appDateTimeString = isEmptyDateTimeStringMask(newDateTimeString) ? '' : newDateTimeString;
     appOnDateTimeChange(appDateTimeString, newMetaInfo); // don't do this on useEffect to avoid complete chaos
   }, [appOnDateChange, appOnTimeChange, getTimeMetaInfo, getDateMetaInfo, appOnDateTimeChange]);
-  var handleChangeComposedDateString = useCallback(function (newDateString, metaInfo) {
+  const handleChangeComposedDateString = useCallback((newDateString, metaInfo) => {
     // if we receive an "empty" mask, we comunicate empty string to the app
-    var appDateString = isEmptyDateStringMask(newDateString) ? '' : newDateString;
+    const appDateString = isEmptyDateStringMask(newDateString) ? '' : newDateString;
     appOnDateChange(appDateString, metaInfo); // don't do this on useEffect to avoid complete chaos
 
     setTempDateString(newDateString);
-    var newDateTimeString = "".concat(newDateString, " ").concat(tempTimeString);
+    const newDateTimeString = "".concat(newDateString, " ").concat(tempTimeString);
 
-    var newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(tempTimeString, metaInfo)), getDateMetaInfo(newDateString, metaInfo)), {}, {
-      newDateString: newDateString,
+    const newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(tempTimeString, metaInfo)), getDateMetaInfo(newDateString, metaInfo)), {}, {
+      newDateString,
       newTimeString: tempTimeString,
-      newDateTimeString: newDateTimeString
+      newDateTimeString
     });
 
-    var appDateTimeString = isEmptyDateTimeStringMask(newDateTimeString) ? '' : newDateTimeString;
+    const appDateTimeString = isEmptyDateTimeStringMask(newDateTimeString) ? '' : newDateTimeString;
     appOnDateTimeChange(appDateTimeString, newMetaInfo); // don't do this on useEffect to avoid complete chaos
   }, [appOnDateChange, tempTimeString, getTimeMetaInfo, getDateMetaInfo, appOnDateTimeChange]);
-  var handleChangeComposedTimeString = useCallback(function (newTimeString, metaInfo) {
-    var appTimeString = isEmptyTimeStringMask(newTimeString) ? '' : newTimeString;
+  const handleChangeComposedTimeString = useCallback((newTimeString, metaInfo) => {
+    const appTimeString = isEmptyTimeStringMask(newTimeString) ? '' : newTimeString;
     appOnTimeChange(appTimeString, metaInfo); // don't do this on useEffect to avoid complete chaos
 
     setTimeString(newTimeString);
-    var newDateTimeString = "".concat(tempDateString, " ").concat(newTimeString);
+    const newDateTimeString = "".concat(tempDateString, " ").concat(newTimeString);
 
-    var newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(newTimeString, metaInfo)), getDateMetaInfo(tempDateString, metaInfo)), {}, {
-      newDateTimeString: newDateTimeString,
+    const newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(newTimeString, metaInfo)), getDateMetaInfo(tempDateString, metaInfo)), {}, {
+      newDateTimeString,
       newDateString: tempDateString,
-      newTimeString: newTimeString
+      newTimeString
     });
 
-    var appDateTimeString = isEmptyDateTimeStringMask(newDateTimeString) ? '' : newDateTimeString;
+    const appDateTimeString = isEmptyDateTimeStringMask(newDateTimeString) ? '' : newDateTimeString;
     appOnDateTimeChange(appDateTimeString, newMetaInfo); // don't do this on useEffect to avoid complete chaos
   }, [appOnTimeChange, tempDateString, getTimeMetaInfo, getDateMetaInfo, appOnDateTimeChange]);
-  var handleChangeMonth = useCallback(function (newMonth, e) {
-    var metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
-    var newDateString = getFormattedDateString({
-      month: newMonth,
-      day: day,
-      year: year
-    });
-
-    var finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
-      newDateString: newDateString
-    });
-
-    appOnMonthChange(newMonth, e, finalMetaInfo);
-    handleChangeComposedDateString(newDateString, finalMetaInfo);
-  }, [day, year, getIsOutOfRangeDay, getIsDisabledDay, appOnMonthChange, handleChangeComposedDateString]);
-  var handleChangeDay = useCallback(function (newDay, e) {
-    var metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
-    var newDateString = getFormattedDateString({
-      month: month,
-      day: newDay,
-      year: year
-    });
-
-    var finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
-      newDateString: newDateString
-    });
-
-    appOnDayChange(newDay, e, finalMetaInfo);
-    handleChangeComposedDateString(newDateString, finalMetaInfo);
-  }, [month, year, getIsOutOfRangeDay, getIsDisabledDay, appOnDayChange, handleChangeComposedDateString]);
-  var handleChangeYear = useCallback(function (newYear, e) {
-    var metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
-    var newDateString = getFormattedDateString({
-      month: month,
-      day: day,
-      year: newYear
-    });
-
-    var finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
-      newDateString: newDateString
-    });
-
-    appOnYearChange(newYear, e, finalMetaInfo);
-    handleChangeComposedDateString(newDateString, finalMetaInfo);
-  }, [month, day, getIsOutOfRangeDay, getIsDisabledDay, appOnYearChange, handleChangeComposedDateString]);
-  var handleChangeHours = useCallback(function (newHours, e) {
-    var metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
-    var newTimeString = getFormattedTimeString({
-      hours: newHours,
-      minutes: minutes,
-      // seconds,
-      meridiem: meridiem
-    });
-
-    var finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
-      newTimeString: newTimeString
-    });
-
-    appOnHourChange(newHours, e, finalMetaInfo);
-    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
-  }, [minutes, meridiem, getIsDisabledTime, appOnHourChange, handleChangeComposedTimeString]);
-  var handleChangeMinutes = useCallback(function (newMinutes, e) {
-    var metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
-    var newTimeString = getFormattedTimeString({
-      hours: hours,
-      minutes: newMinutes,
-      // seconds,
-      meridiem: meridiem
-    });
-
-    var finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
-      newTimeString: newTimeString
-    });
-
-    appOnMinuteChange(newMinutes, e, finalMetaInfo);
-    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
-  }, [hours, meridiem, getIsDisabledTime, appOnMinuteChange, handleChangeComposedTimeString]);
-  var handleChangeMeridiem = useCallback(function (newMeridiem, e) {
-    var metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
-    var newTimeString = getFormattedTimeString({
-      hours: hours,
-      minutes: minutes,
-      // seconds,
-      meridiem: newMeridiem
-    });
-
-    var finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
-      newTimeString: newTimeString
-    });
-
-    appOnMeridiemChange(newMeridiem, e, finalMetaInfo);
-    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
-  }, [hours, minutes, getIsDisabledTime, appOnMeridiemChange, handleChangeComposedTimeString]);
-  var handleClearAll = useCallback(function (e) {
-    var metaInfo = {
+  const handleClearAll = useCallback(e => {
+    const metaInfo = {
       isAutomaticFillTrigger: false,
       isClearButtonAction: true,
       newDateString: '',
@@ -316,9 +197,9 @@ var useControlledDateTimePicker = function useControlledDateTimePicker(props) {
       newDateTimeString: ''
     };
 
-    var datePartsChangesMetainfo = _objectSpread({}, metaInfo);
+    const datePartsChangesMetainfo = _objectSpread({}, metaInfo);
 
-    var timePartsChangesMetainfo = _objectSpread({}, metaInfo);
+    const timePartsChangesMetainfo = _objectSpread({}, metaInfo);
 
     if (isDateSelector || isDateTimeSelector) {
       delete datePartsChangesMetainfo.newDateTimeString;
@@ -339,126 +220,91 @@ var useControlledDateTimePicker = function useControlledDateTimePicker(props) {
     if (isDateTimeSelector) handleChangeComposedDateTimeString('__/__/____', '__:__ __', metaInfo);
     if (isDateSelector) handleChangeComposedDateString('__/__/____', datePartsChangesMetainfo);
     if (isTimeSelector) handleChangeComposedTimeString('__:__ __', timePartsChangesMetainfo);
+    setLatestInteractionRegion('clear-btn');
   }, [appOnDayChange, appOnHourChange, appOnMeridiemChange, appOnMinuteChange, appOnMonthChange, appOnYearChange, handleChangeComposedDateString, handleChangeComposedDateTimeString, handleChangeComposedTimeString, isDateSelector, isDateTimeSelector, isTimeSelector]);
-  var onFillWithCurrentDateKeys = useCallback(function () {
-    var metaInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-      isAutomaticFillTrigger: true
-    };
-    var now = new Date();
-    var nowDateString = getDateStringFromDay(now);
-    var nowTimeString = getTimeStringFromDay(now);
-
-    var finalMetaInfo = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(nowDateString, getIsOutOfRangeDay, getIsDisabledDay)), getValidationTimeStringMetaInfo(nowTimeString, getIsDisabledTime)), {}, {
-      newDateString: nowDateString
-    });
-
-    handleChangeComposedDateTimeString(nowDateString, nowTimeString, finalMetaInfo);
-  }, [getIsDisabledDay, getIsDisabledTime, getIsOutOfRangeDay, handleChangeComposedDateTimeString]);
-  var onGlobalKeyDown = useCallback(function (e) {
-    var key = e.key,
-        ctrlKey = e.ctrlKey,
-        metaKey = e.metaKey;
-
-    if ((ctrlKey || metaKey) && key === ';') {
-      onFillWithCurrentDateKeys();
-    }
-
-    if ((ctrlKey || metaKey) && (key === 'Delete' || key === 'Backspace')) handleClearAll(e);
-  }, [handleClearAll, onFillWithCurrentDateKeys]);
-  var ctx = React.useMemo(function () {
-    return {
-      props: propsWithDefaults,
-      monthInputRef: monthInputRef,
-      dayInputRef: dayInputRef,
-      yearInputRef: yearInputRef,
-      hourInputRef: hourInputRef,
-      minutesInputRef: minutesInputRef,
-      meridiemInputRef: meridiemInputRef,
-      clearButtonRef: clearButtonRef,
-      pickerButtonRef: pickerButtonRef,
-      prevYearBtnRef: prevYearBtnRef,
-      prevMonthBtnRef: prevMonthBtnRef,
-      nextMonthBtnRef: nextMonthBtnRef,
-      nextYearBtnRef: nextYearBtnRef,
-      calendarDaysWrapperRef: calendarDaysWrapperRef,
-      prevHourBtnRef: prevHourBtnRef,
-      currHourBtnRef: currHourBtnRef,
-      nextHourBtnRef: nextHourBtnRef,
-      prevMinutesBtnRef: prevMinutesBtnRef,
-      currMinutesBtnRef: currMinutesBtnRef,
-      nextMinutesBtnRef: nextMinutesBtnRef,
-      prevMeridiemBtnRef: prevMeridiemBtnRef,
-      currMeridiemBtnRef: currMeridiemBtnRef,
-      nextMeridiemBtnRef: nextMeridiemBtnRef,
-      dateStringFromProps: dateStringFromProps,
-      firstSegmentRef: firstSegmentRef,
-      lastSegmentRef: lastSegmentRef,
-      tempDateString: tempDateString,
-      setTempDateString: setTempDateString,
-      tempTimeString: tempTimeString,
-      setTimeString: setTimeString,
-      handleChangeComposedDateTimeString: handleChangeComposedDateTimeString,
-      handleChangeComposedDateString: handleChangeComposedDateString,
-      handleChangeComposedTimeString: handleChangeComposedTimeString,
-      handleChangeMonth: handleChangeMonth,
-      handleChangeDay: handleChangeDay,
-      handleChangeYear: handleChangeYear,
-      handleChangeHours: handleChangeHours,
-      handleChangeMinutes: handleChangeMinutes,
-      handleChangeMeridiem: handleChangeMeridiem,
-      handleClearAll: handleClearAll,
-      hideDate: hideDate,
-      hideTime: hideTime,
-      hideDateTimePicker: hideDateTimePicker,
-      hideDatePicker: hideDatePicker,
-      hideTimePicker: hideTimePicker,
-      isDateSelector: isDateSelector,
-      isTimeSelector: isTimeSelector,
-      isDateTimeSelector: isDateTimeSelector,
-      isControllerOnly: isControllerOnly,
-      isWithTimeWheelToo: isWithTimeWheelToo,
-      isWithCalendarToo: isWithCalendarToo,
-      isWithDateInputs: isWithDateInputs,
-      isWithDateInputsOnly: isWithDateInputsOnly,
-      isWithTimeInputs: isWithTimeInputs,
-      isWithTimeInputsOnly: isWithTimeInputsOnly,
-      autoFocusMonthInput: autoFocusMonthInput,
-      autoFocusHourInput: autoFocusHourInput,
-      autoFocusPrevMonthArrow: autoFocusPrevMonthArrow,
-      autoFocusHourTimeWheel: autoFocusHourTimeWheel,
-      latestInteractionRegion: latestInteractionRegion,
-      setLatestInteractionRegion: setLatestInteractionRegion,
-      withAnyInputs: withAnyInputs,
-      withAnyPicker: withAnyPicker,
-      withClearBtn: withClearBtn,
-      withAnyRightController: withAnyRightController,
-      shouldPreserveClearableSpace: shouldPreserveClearableSpace,
-      month: month,
-      day: day,
-      year: year,
-      monthNum: monthNum,
-      dayNum: dayNum,
-      yearNum: yearNum,
-      announcedMonth: announcedMonth,
-      announcedDay: announcedDay,
-      announcedYear: announcedYear,
-      announcedDateValues: announcedDateValues,
-      hours: hours,
-      minutes: minutes,
-      meridiem: meridiem,
-      hoursNum: hoursNum,
-      minutesNum: minutesNum,
-      announcedHours: announcedHours,
-      announcedMinutes: announcedMinutes,
-      announcedMeridiem: announcedMeridiem,
-      announcedTimeValues: announcedTimeValues,
-      ariaCurrentValueForInputs: ariaCurrentValueForInputs,
-      onGlobalKeyDown: onGlobalKeyDown
-    };
-  }, [propsWithDefaults, dateStringFromProps, tempDateString, tempTimeString, handleChangeComposedDateTimeString, handleChangeComposedDateString, handleChangeComposedTimeString, handleChangeMonth, handleChangeDay, handleChangeYear, handleChangeHours, handleChangeMinutes, handleChangeMeridiem, handleClearAll, hideDate, hideTime, hideDateTimePicker, hideDatePicker, hideTimePicker, isDateSelector, isTimeSelector, isDateTimeSelector, isControllerOnly, isWithTimeWheelToo, isWithCalendarToo, isWithDateInputs, isWithDateInputsOnly, isWithTimeInputs, isWithTimeInputsOnly, autoFocusMonthInput, autoFocusHourInput, autoFocusPrevMonthArrow, autoFocusHourTimeWheel, latestInteractionRegion, withAnyInputs, withAnyPicker, withClearBtn, withAnyRightController, shouldPreserveClearableSpace, month, day, year, monthNum, dayNum, yearNum, announcedMonth, announcedDay, announcedYear, announcedDateValues, hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues, ariaCurrentValueForInputs, onGlobalKeyDown] // refs are mutable so we don't need to listen to them
+  const ctx = React.useMemo(() => ({
+    props: propsWithDefaults,
+    monthInputRef,
+    dayInputRef,
+    yearInputRef,
+    hourInputRef,
+    minutesInputRef,
+    // secondsInputRef,
+    meridiemInputRef,
+    clearButtonRef,
+    pickerButtonRef,
+    prevYearBtnRef,
+    prevMonthBtnRef,
+    nextMonthBtnRef,
+    nextYearBtnRef,
+    calendarDaysWrapperRef,
+    prevHourBtnRef,
+    currHourBtnRef,
+    nextHourBtnRef,
+    prevMinutesBtnRef,
+    currMinutesBtnRef,
+    nextMinutesBtnRef,
+    prevMeridiemBtnRef,
+    currMeridiemBtnRef,
+    nextMeridiemBtnRef,
+    dateStringFromProps,
+    tempDateString,
+    setTempDateString,
+    tempTimeString,
+    setTimeString,
+    handleChangeComposedDateTimeString,
+    handleChangeComposedDateString,
+    handleChangeComposedTimeString,
+    handleClearAll,
+    hideDate,
+    hideTime,
+    hideDateTimePicker,
+    hideDatePicker,
+    hideTimePicker,
+    isDateSelector,
+    isTimeSelector,
+    isDateTimeSelector,
+    isControllerOnly,
+    isWithTimeWheelToo,
+    isWithCalendarToo,
+    isWithDateInputs,
+    isWithDateInputsOnly,
+    isWithTimeInputs,
+    isWithTimeInputsOnly,
+    autoFocusMonthInput,
+    autoFocusHourInput,
+    autoFocusPrevMonthArrow,
+    autoFocusHourTimeWheel,
+    latestInteractionRegion,
+    setLatestInteractionRegion,
+    withAnyInputs,
+    withAnyPicker,
+    withClearBtn,
+    withAnyRightController,
+    shouldPreserveClearableSpace,
+    month,
+    day,
+    year,
+    monthNum,
+    dayNum,
+    yearNum,
+    announcedMonth,
+    announcedDay,
+    announcedYear,
+    announcedDateValues,
+    hours,
+    minutes,
+    meridiem,
+    hoursNum,
+    minutesNum,
+    announcedHours,
+    announcedMinutes,
+    announcedMeridiem,
+    announcedTimeValues,
+    ariaCurrentValueForInputs
+  }), [propsWithDefaults, dateStringFromProps, tempDateString, tempTimeString, handleChangeComposedDateTimeString, handleChangeComposedDateString, handleChangeComposedTimeString, handleClearAll, hideDate, hideTime, hideDateTimePicker, hideDatePicker, hideTimePicker, isDateSelector, isTimeSelector, isDateTimeSelector, isControllerOnly, isWithTimeWheelToo, isWithCalendarToo, isWithDateInputs, isWithDateInputsOnly, isWithTimeInputs, isWithTimeInputsOnly, autoFocusMonthInput, autoFocusHourInput, autoFocusPrevMonthArrow, autoFocusHourTimeWheel, latestInteractionRegion, withAnyInputs, withAnyPicker, withClearBtn, withAnyRightController, shouldPreserveClearableSpace, month, day, year, monthNum, dayNum, yearNum, announcedMonth, announcedDay, announcedYear, announcedDateValues, hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues, ariaCurrentValueForInputs] // refs are mutable so we don't need to listen to them
   );
   return ctx;
 };
 
 export { useControlledDateTimePicker };
-//# sourceMappingURL=useControlledDateTimePicker.js.map