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

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

@@ -3,7 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var useGetPropsWithDefault = require('./useGetPropsWithDefault.js');
 var useGetDestructuredValues = require('./useGetDestructuredValues.js');
 var ControlledDateTimePickerTypes = require('../ControlledDateTimePickerTypes.js');
@@ -11,6 +18,7 @@ var useValidateProps = require('./useValidateProps.js');
 var dateHelpers = require('../utils/dateHelpers.js');
 var timeHelpers = require('../utils/timeHelpers.js');
 var stringHelpers = require('../utils/stringHelpers.js');
+var constants = require('../utils/constants.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,8 +36,7 @@ const useControlledDateTimePicker = props => {
   const dayInputRef = React.useRef();
   const yearInputRef = React.useRef();
   const hourInputRef = React.useRef();
-  const minutesInputRef = React.useRef(); // const secondsInputRef = useRef<HTMLInputElement>();
-
+  const minutesInputRef = React.useRef();
   const meridiemInputRef = React.useRef();
   const clearButtonRef = React.useRef();
   const pickerButtonRef = React.useRef();
@@ -43,14 +50,12 @@ const useControlledDateTimePicker = props => {
   const nextHourBtnRef = React.useRef();
   const prevMinutesBtnRef = React.useRef();
   const currMinutesBtnRef = React.useRef();
-  const nextMinutesBtnRef = React.useRef(); // const prevSecondsBtnRef = useRef<HTMLButtonElement>();
-  // const currSecondsBtnRef = useRef<HTMLButtonElement>();
-  // const nextSecondsBtnRef = useRef<HTMLButtonElement>();
-
+  const nextMinutesBtnRef = React.useRef();
   const prevMeridiemBtnRef = React.useRef();
   const currMeridiemBtnRef = React.useRef();
   const nextMeridiemBtnRef = React.useRef();
   const propsWithDefaults = useGetPropsWithDefault.useGetDatePickerWithDefaultsProps(props);
+  const dataAttrs = dsPropsHelpers.getDataProps(props);
   const {
     type,
     getIsDisabledDay,
@@ -94,7 +99,8 @@ const useControlledDateTimePicker = props => {
   const isWithCalendarToo = type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY;
   const withAnyInputs = !hideDate || !hideTime;
   const withAnyPicker = !hideDateTimePicker || !hideTimePicker || !hideDatePicker;
-  const withClearBtn = isClearable && withAnyInputs && (dateStringFromProps !== '__/__/____' && dateStringFromProps !== '' || timeStringFromProps !== '__:__ __' && timeStringFromProps !== ''); // or time is not "empty-ish"
+  const withClearBtn = isClearable && withAnyInputs && (dateStringFromProps !== '__/__/____' && dateStringFromProps !== '' || // date is not "empty-ish"
+  timeStringFromProps !== '__:__ __' && timeStringFromProps !== ''); // or time is not "empty-ish"
 
   const isWithDateInputs = withAnyInputs && (isDateTimeSelector || isDateSelector);
   const isWithDateInputsOnly = withAnyInputs && isDateSelector;
@@ -107,6 +113,10 @@ const useControlledDateTimePicker = props => {
   const shouldPreserveClearableSpace = isClearable && withAnyInputs;
   const withAnyRightController = withAnyPicker || withClearBtn || shouldPreserveClearableSpace;
   const [latestInteractionRegion, setLatestInteractionRegion] = React.useState('');
+  let firstSegmentRef = React.useRef();
+  if (isWithDateInputs) firstSegmentRef = monthInputRef;else if (isWithTimeInputs) firstSegmentRef = hourInputRef;else if (withAnyPicker) firstSegmentRef = pickerButtonRef;
+  let lastSegmentRef = React.useRef();
+  if (withAnyPicker) lastSegmentRef = pickerButtonRef;else if (withClearBtn) lastSegmentRef = clearButtonRef;else if (isWithTimeInputs) lastSegmentRef = meridiemInputRef;else if (isWithDateInputs) lastSegmentRef = yearInputRef;
   const {
     month,
     day,
@@ -133,12 +143,16 @@ const useControlledDateTimePicker = props => {
     dateTime: appDateTime,
     isDateTimeSelector
   });
-  const ariaCurrentValueForInputs = `current values: ${isWithDateInputs ? `${announcedDateValues}` : ''}${isDateTimeSelector ? ', ' : ''}${isWithTimeInputs ? `${announcedTimeValues}` : ''}`;
-  const getDateMetaInfo = React.useCallback((newDateString = null, metaInfo = {}) => {
+  const ariaCurrentValueForInputs = "current values: ".concat(isWithDateInputs ? "".concat(announcedDateValues) : '').concat(isDateTimeSelector ? ', ' : '').concat(isWithTimeInputs ? "".concat(announcedTimeValues) : '');
+  const getDateMetaInfo = React.useCallback(function () {
+    let newDateString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    let metaInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const finalDateString = newDateString || tempDateString;
     return _objectSpread(_objectSpread({}, metaInfo), dateHelpers.getValidationDateStringMetaInfo(finalDateString, getIsOutOfRangeDay, getIsDisabledDay));
   }, [tempDateString, getIsDisabledDay, getIsOutOfRangeDay]);
-  const getTimeMetaInfo = React.useCallback((newTimeString = null, metaInfo = {}) => {
+  const getTimeMetaInfo = React.useCallback(function () {
+    let newTimeString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    let metaInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const finalTimeString = newTimeString || tempTimeString;
     return _objectSpread(_objectSpread({}, metaInfo), timeHelpers.getValidationTimeStringMetaInfo(finalTimeString, getIsDisabledTime));
   }, [tempTimeString, getIsDisabledTime]);
@@ -151,7 +165,7 @@ const useControlledDateTimePicker = props => {
     appOnTimeChange(appTimeString, metaInfo); // don't do this on useEffect to avoid complete chaos
 
     setTimeString(newTimeString);
-    const newDateTimeString = `${newDateString} ${newTimeString}`;
+    const newDateTimeString = "".concat(newDateString, " ").concat(newTimeString);
 
     const newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(newTimeString, metaInfo)), getDateMetaInfo(newDateString, metaInfo)), {}, {
       newDateString,
@@ -168,7 +182,7 @@ const useControlledDateTimePicker = props => {
     appOnDateChange(appDateString, metaInfo); // don't do this on useEffect to avoid complete chaos
 
     setTempDateString(newDateString);
-    const newDateTimeString = `${newDateString} ${tempTimeString}`;
+    const newDateTimeString = "".concat(newDateString, " ").concat(tempTimeString);
 
     const newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(tempTimeString, metaInfo)), getDateMetaInfo(newDateString, metaInfo)), {}, {
       newDateString,
@@ -184,7 +198,7 @@ const useControlledDateTimePicker = props => {
     appOnTimeChange(appTimeString, metaInfo); // don't do this on useEffect to avoid complete chaos
 
     setTimeString(newTimeString);
-    const newDateTimeString = `${tempDateString} ${newTimeString}`;
+    const newDateTimeString = "".concat(tempDateString, " ").concat(newTimeString);
 
     const newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(newTimeString, metaInfo)), getDateMetaInfo(tempDateString, metaInfo)), {}, {
       newDateTimeString,
@@ -195,6 +209,99 @@ const useControlledDateTimePicker = props => {
     const appDateTimeString = stringHelpers.isEmptyDateTimeStringMask(newDateTimeString) ? '' : newDateTimeString;
     appOnDateTimeChange(appDateTimeString, newMetaInfo); // don't do this on useEffect to avoid complete chaos
   }, [appOnTimeChange, tempDateString, getTimeMetaInfo, getDateMetaInfo, appOnDateTimeChange]);
+  const handleChangeMonth = React.useCallback(function (newMonth, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    const newDateString = stringHelpers.getFormattedDateString({
+      month: newMonth,
+      day,
+      year
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), dateHelpers.getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnMonthChange(newMonth, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [day, year, getIsOutOfRangeDay, getIsDisabledDay, appOnMonthChange, handleChangeComposedDateString]);
+  const handleChangeDay = React.useCallback(function (newDay, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    const newDateString = stringHelpers.getFormattedDateString({
+      month,
+      day: newDay,
+      year
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), dateHelpers.getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnDayChange(newDay, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [month, year, getIsOutOfRangeDay, getIsDisabledDay, appOnDayChange, handleChangeComposedDateString]);
+  const handleChangeYear = React.useCallback(function (newYear, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    const newDateString = stringHelpers.getFormattedDateString({
+      month,
+      day,
+      year: newYear
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), dateHelpers.getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnYearChange(newYear, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [month, day, getIsOutOfRangeDay, getIsDisabledDay, appOnYearChange, handleChangeComposedDateString]);
+  const handleChangeHours = React.useCallback(function (newHours, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    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 handleChangeMinutes = React.useCallback(function (newMinutes, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    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 handleChangeMeridiem = React.useCallback(function (newMeridiem, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    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 handleClearAll = React.useCallback(e => {
     const metaInfo = {
       isAutomaticFillTrigger: false,
@@ -227,16 +334,43 @@ const 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]);
+  const onFillWithCurrentDateKeys = React.useCallback(function () {
+    let metaInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      isAutomaticFillTrigger: true
+    };
+    const now = new Date();
+    const nowDateString = dateHelpers.getDateStringFromDay(now);
+    const nowTimeString = dateHelpers.getTimeStringFromDay(now);
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaInfo), dateHelpers.getValidationDateStringMetaInfo(nowDateString, getIsOutOfRangeDay, getIsDisabledDay)), timeHelpers.getValidationTimeStringMetaInfo(nowTimeString, getIsDisabledTime)), {}, {
+      newDateString: nowDateString
+    });
+
+    handleChangeComposedDateTimeString(nowDateString, nowTimeString, finalMetaInfo);
+  }, [getIsDisabledDay, getIsDisabledTime, getIsOutOfRangeDay, handleChangeComposedDateTimeString]);
+  const onGlobalKeyDown = React.useCallback(e => {
+    const {
+      key,
+      ctrlKey,
+      metaKey
+    } = e;
+
+    if ((ctrlKey || metaKey) && key === ';') {
+      onFillWithCurrentDateKeys();
+    }
+
+    if ((ctrlKey || metaKey) && (key === 'Delete' || key === 'Backspace')) handleClearAll(e);
+  }, [handleClearAll, onFillWithCurrentDateKeys]);
   const ctx = React__default["default"].useMemo(() => ({
-    props: propsWithDefaults,
+    props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
+      dataAttrs
+    }),
     monthInputRef,
     dayInputRef,
     yearInputRef,
     hourInputRef,
     minutesInputRef,
-    // secondsInputRef,
     meridiemInputRef,
     clearButtonRef,
     pickerButtonRef,
@@ -255,6 +389,8 @@ const useControlledDateTimePicker = props => {
     currMeridiemBtnRef,
     nextMeridiemBtnRef,
     dateStringFromProps,
+    firstSegmentRef,
+    lastSegmentRef,
     tempDateString,
     setTempDateString,
     tempTimeString,
@@ -262,6 +398,12 @@ const useControlledDateTimePicker = props => {
     handleChangeComposedDateTimeString,
     handleChangeComposedDateString,
     handleChangeComposedTimeString,
+    handleChangeMonth,
+    handleChangeDay,
+    handleChangeYear,
+    handleChangeHours,
+    handleChangeMinutes,
+    handleChangeMeridiem,
     handleClearAll,
     hideDate,
     hideTime,
@@ -308,8 +450,9 @@ const useControlledDateTimePicker = props => {
     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
+    ariaCurrentValueForInputs,
+    onGlobalKeyDown
+  }), [dataAttrs, 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
   );
   return ctx;
 };

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

@@ -12,11 +12,12 @@ var constants = require('../utils/constants.js');
 // our source of truth is either the date props or dateTime props
 // based on wheter it's a dateTime picker
 // or a date picker (it's date picker when hideTime is true)
-const useGetDestructuredDateValues = ({
-  date,
-  dateTime,
-  isDateTimeSelector
-}) => {
+const useGetDestructuredDateValues = _ref => {
+  let {
+    date,
+    dateTime,
+    isDateTimeSelector
+  } = _ref;
   const dateStringFromProps = isDateTimeSelector ? stringHelpers.dateTimeToDate(dateTime) : date;
   const deconstructedValues = stringHelpers.deconstructValuesFromDateString(dateStringFromProps);
   const {
@@ -29,8 +30,8 @@ const useGetDestructuredDateValues = ({
   const yearNum = numberHelpers.convertToPositiveNumberIfPossible(year);
   const announcedMonth = monthNum !== -1 ? constants.monthNames[monthNum - 1] : 'empty month';
   const announcedDay = dayNum !== -1 ? constants.announcableCardinalDays[dayNum] : 'empty day';
-  const announcedYear = yearNum !== -1 ? stringHelpers.fillStringWithPlaceHolders(`${yearNum}`, 4, '0') : 'empty year';
-  const announcedDateValues = `${announcedMonth}, ${announcedDay}, ${announcedYear}`;
+  const announcedYear = yearNum !== -1 ? stringHelpers.fillStringWithPlaceHolders("".concat(yearNum), 4, '0') : 'empty year';
+  const announcedDateValues = "".concat(announcedMonth, ", ").concat(announcedDay, ", ").concat(announcedYear);
   return React.useMemo(() => ({
     month,
     day,
@@ -48,11 +49,12 @@ const useGetDestructuredDateValues = ({
 // 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 useGetDestructuredTimeValues = _ref2 => {
+  let {
+    time,
+    dateTime,
+    isDateTimeSelector
+  } = _ref2;
   const timeStringFromProps = isDateTimeSelector ? stringHelpers.dateTimeToTime(dateTime) : time;
   const deconstructedValues = stringHelpers.deconstructTimeValues(timeStringFromProps);
   const {
@@ -63,12 +65,12 @@ const useGetDestructuredTimeValues = ({
   const hoursNum = numberHelpers.convertToPositiveNumberIfPossible(hours);
   const minutesNum = numberHelpers.convertToPositiveNumberIfPossible(minutes); // 01 -> 1 ~ 09 -> 9 || 1_ -> 1 ~ 9_ -> 9 || empty...
 
-  const announcedHours = hoursNum !== -1 ? `${hoursNum}` : 'empty hours'; // 01 -> 1 ~ 09 -> 9 || 1_ -> 1 ~ 9_ -> 9 || empty...
+  const announcedHours = hoursNum !== -1 ? "".concat(hoursNum) : 'empty hours'; // 01 -> 1 ~ 09 -> 9 || 1_ -> 1 ~ 9_ -> 9 || empty...
 
-  const announcedMinutes = minutesNum !== -1 ? `${minutesNum}` : 'empty minutes';
+  const announcedMinutes = minutesNum !== -1 ? "".concat(minutesNum) : 'empty minutes';
   const announcedMeridiem = // eslint-disable-next-line no-nested-ternary
-  meridiem === 'PM' ? `post meridiem` : meridiem === 'AM' ? 'ante meridiem' : 'empty meriediem';
-  const announcedTimeValues = `${announcedHours}, ${announcedMinutes}, ${announcedMeridiem}`;
+  meridiem === 'PM' ? "post meridiem" : meridiem === 'AM' ? 'ante meridiem' : 'empty meriediem';
+  const announcedTimeValues = "".concat(announcedHours, ", ").concat(announcedMinutes, ", ").concat(announcedMeridiem);
   return React.useMemo(() => ({
     hours,
     minutes,
@@ -81,12 +83,13 @@ const useGetDestructuredTimeValues = ({
     announcedTimeValues
   }), [hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues]);
 };
-const useGetDestructuredValues = ({
-  date,
-  time,
-  dateTime,
-  isDateTimeSelector
-}) => {
+const useGetDestructuredValues = _ref3 => {
+  let {
+    date,
+    time,
+    dateTime,
+    isDateTimeSelector
+  } = _ref3;
   const {
     month,
     day,

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

@@ -7,72 +7,41 @@ var stringHelpers = require('../utils/stringHelpers.js');
 var numberHelpers = require('../utils/numberHelpers.js');
 
 /* eslint-disable max-len */
-const PREPEND = `ControlledDateTimePicker:
-  Invalid configuration detected::
-  
-    `;
+const PREPEND = "ControlledDateTimePicker:\n  Invalid configuration detected::\n  \n    ";
 const NOT_A_DEFECT = ''; // '\n\n\t\tThis is not a defect, please check\n\n\t\thttps://qa.dimsum.rd.elliemae.io/?path=/story/components-desktop-components-d-controlledform-date-time-picker--basic\n\n\t\tfor instructions on how to use the component correctly\n\n';
 
-const INLINE_RECEIVED_PREPEND = `
-
-    Received:`;
+const INLINE_RECEIVED_PREPEND = "\n\n    Received:";
 
 const throwInvalidDateTimeError = invalidValue => {
-  throw new Error(`${PREPEND}the "dateTime" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${NOT_A_DEFECT}`);
+  throw new Error("".concat(PREPEND, "the \"dateTime\" you are providing is not respecting the format it must respect.").concat(INLINE_RECEIVED_PREPEND).concat(invalidValue, "(").concat(typeof invalidValue, ")").concat(NOT_A_DEFECT));
 };
 
 const throwInvalidDaterror = invalidValue => {
-  throw new Error(`${PREPEND}the "date" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${NOT_A_DEFECT}`);
+  throw new Error("".concat(PREPEND, "the \"date\" you are providing is not respecting the format it must respect.").concat(INLINE_RECEIVED_PREPEND).concat(invalidValue, "(").concat(typeof invalidValue, ")").concat(NOT_A_DEFECT));
 };
 
 const throwInvalidTimerror = invalidValue => {
-  throw new Error(`${PREPEND}the "time" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${NOT_A_DEFECT}`);
+  throw new Error("".concat(PREPEND, "the \"time\" you are providing is not respecting the format it must respect.").concat(INLINE_RECEIVED_PREPEND).concat(invalidValue, "(").concat(typeof invalidValue, ")").concat(NOT_A_DEFECT));
 };
 
 const throwUncontrolledDateError = (date, onDateChange) => {
-  throw new Error(`${PREPEND}you are trying to use a date selector while providing a non-string "date" or providing a non-function to "onDateChange"
-  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations
-
-  Received:
-    ${date}(${typeof date})
-    ${onDateChange}(${typeof onDateChange})
-  ${NOT_A_DEFECT}`);
+  throw new Error("".concat(PREPEND, "you are trying to use a date selector while providing a non-string \"date\" or providing a non-function to \"onDateChange\"\n  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    ").concat(date, "(").concat(typeof date, ")\n    ").concat(onDateChange, "(").concat(typeof onDateChange, ")\n  ").concat(NOT_A_DEFECT));
 };
 
 const throwUncontrolledTimeError = (time, onTimeChange) => {
-  throw new Error(`${PREPEND}you are trying to use a time selector while providing a non-string "time" or providing a non-function to "onTimeChange"
-  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations
-
-  Received:
-    ${time}(${typeof time})
-    ${onTimeChange}(${typeof onTimeChange})
-  ${NOT_A_DEFECT}`);
+  throw new Error("".concat(PREPEND, "you are trying to use a time selector while providing a non-string \"time\" or providing a non-function to \"onTimeChange\"\n  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    ").concat(time, "(").concat(typeof time, ")\n    ").concat(onTimeChange, "(").concat(typeof onTimeChange, ")\n  ").concat(NOT_A_DEFECT));
 };
 
 const throwUncontrolledDateTimeError = (dateTime, onDateTimeChange) => {
-  throw new Error(`${PREPEND}you are trying to use a date-time selector while providing a non-string "dateTime" or providing a non-function to "onDateTimeChange"
-  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations
-
-  Received:
-    ${dateTime}(${typeof dateTime})
-    ${onDateTimeChange}(${typeof onDateTimeChange})
-  ${NOT_A_DEFECT}`);
+  throw new Error("".concat(PREPEND, "you are trying to use a date-time selector while providing a non-string \"dateTime\" or providing a non-function to \"onDateTimeChange\"\n  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    ").concat(dateTime, "(").concat(typeof dateTime, ")\n    ").concat(onDateTimeChange, "(").concat(typeof onDateTimeChange, ")\n  ").concat(NOT_A_DEFECT));
 };
 
 const throwInvalidEmptyPickerStartingMonthError = emptyPickerStartingMonth => {
-  throw new Error(`${PREPEND}the provided emptyPickerStartingMonth props is invalid. please provide a string with the format mm/__/yyyy, (mm 01~12, yyyy 0001~9999) 
-
-  Received:
-    ${emptyPickerStartingMonth}(${typeof emptyPickerStartingMonth})
-  ${NOT_A_DEFECT}`);
+  throw new Error("".concat(PREPEND, "the provided emptyPickerStartingMonth props is invalid. please provide a string with the format mm/__/yyyy, (mm 01~12, yyyy 0001~9999) \n\n  Received:\n    ").concat(emptyPickerStartingMonth, "(").concat(typeof emptyPickerStartingMonth, ")\n  ").concat(NOT_A_DEFECT));
 };
 
 const throwInvalidOnCalendarOpenFocusedDayError = onCalendarOpenFocusedDay => {
-  throw new Error(`${PREPEND}the provided onCalendarOpenFocusedDay props is invalid. please provide a string with the format mm/dd/yyyy, (mm 01~12, dd 01~31, yyyy 0001~9999) 
-
-  Received:
-    ${onCalendarOpenFocusedDay}(${typeof onCalendarOpenFocusedDay})
-  ${NOT_A_DEFECT}`);
+  throw new Error("".concat(PREPEND, "the provided onCalendarOpenFocusedDay props is invalid. please provide a string with the format mm/dd/yyyy, (mm 01~12, dd 01~31, yyyy 0001~9999) \n\n  Received:\n    ").concat(onCalendarOpenFocusedDay, "(").concat(typeof onCalendarOpenFocusedDay, ")\n  ").concat(NOT_A_DEFECT));
 };
 
 const useValidateProps = props => {

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
-var CloseMedium = require('@elliemae/ds-icons/CloseMedium');
+var dsIcons = require('@elliemae/ds-icons');
 var dsIcon = require('@elliemae/ds-icon');
-var dsButton = require('@elliemae/ds-button');
+var DSButton = require('@elliemae/ds-button');
 var Styleds = require('../Styleds.js');
 var ControlledDateTimePickerDatatestid = require('../../ControlledDateTimePickerDatatestid.js');
 var useClearButton = require('./useClearButton.js');
@@ -14,7 +14,6 @@ var useClearButton = require('./useClearButton.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var CloseMedium__default = /*#__PURE__*/_interopDefaultLegacy(CloseMedium);
 
 const ClearButton = () => {
   const {
@@ -28,14 +27,14 @@ const ClearButton = () => {
     shouldDisplay: withClearBtn,
     "aria-label": "clear selected date",
     buttonType: "icon",
-    size: dsButton.BUTTON_SIZES.M,
-    variant: dsButton.BUTTON_VARIANT.DEFAULT,
+    size: DSButton.BUTTON_SIZES.M,
+    variant: DSButton.BUTTON_VARIANT.DEFAULT,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CLEAR_BUTTON,
     innerRef: clearButtonRef,
     onClick: onClearClick,
     onKeyDown: onClearButtonKeyDown,
     withAnyPicker: withAnyPicker
-  }, void 0, /*#__PURE__*/_jsx__default["default"](CloseMedium__default["default"], {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.CloseMedium, {
     color: dsIcon.DSIconColors.PRIMARY
   }));
 };

package/cjs/controlled-date-time-picker/parts/ClearButton/useClearButton.js

@@ -13,10 +13,15 @@ const useClearButton = () => {
     withAnyPicker,
     withClearBtn,
     withAnyInputs,
+    isWithTimeInputs,
+    isWithDateInputs,
     isTimeSelector,
     hourInputRef,
     monthInputRef,
-    pickerButtonRef
+    pickerButtonRef,
+    meridiemInputRef,
+    yearInputRef,
+    setLatestInteractionRegion
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const focusFirstRegion = React.useCallback(() => {
     var _hourInputRef$current, _hourInputRef$current2, _monthInputRef$curren, _monthInputRef$curren2;
@@ -25,8 +30,9 @@ const useClearButton = () => {
   }, [withAnyInputs, isTimeSelector, hourInputRef, monthInputRef]);
   const onClearClick = React.useCallback(e => {
     handleClearAll(e);
+    setLatestInteractionRegion('clear-btn');
     focusFirstRegion();
-  }, [focusFirstRegion, handleClearAll]);
+  }, [focusFirstRegion, handleClearAll, setLatestInteractionRegion]);
   const onHomeKeyDown = React.useCallback(() => {
     focusFirstRegion();
   }, [focusFirstRegion]);
@@ -45,7 +51,13 @@ const useClearButton = () => {
     if (stopPropagationKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
-  }, [onEndKeyDown, onHomeKeyDown]);
+
+    if (key === 'Backspace' && withAnyInputs) {
+      var _meridiemInputRef$cur, _meridiemInputRef$cur2, _yearInputRef$current, _yearInputRef$current2;
+
+      if (isWithTimeInputs) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur = meridiemInputRef.current) === null || _meridiemInputRef$cur === void 0 ? void 0 : (_meridiemInputRef$cur2 = _meridiemInputRef$cur.focus) === null || _meridiemInputRef$cur2 === void 0 ? void 0 : _meridiemInputRef$cur2.call(_meridiemInputRef$cur);else if (isWithDateInputs) yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current = yearInputRef.current) === null || _yearInputRef$current === void 0 ? void 0 : (_yearInputRef$current2 = _yearInputRef$current.focus) === null || _yearInputRef$current2 === void 0 ? void 0 : _yearInputRef$current2.call(_yearInputRef$current);
+    }
+  }, [isWithDateInputs, isWithTimeInputs, meridiemInputRef, onEndKeyDown, onHomeKeyDown, withAnyInputs, yearInputRef]);
   return React.useMemo(() => ({
     onClearClick,
     onClearButtonKeyDown,

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

@@ -2,6 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var dsGrid = require('@elliemae/ds-grid');
@@ -11,13 +17,19 @@ var DateInputs = require('./DateInputs/DateInputs.js');
 var TimeInputs = require('./TimeInputs/TimeInputs.js');
 var PickersIcons = require('./Pickers/PickersIcons.js');
 var ClearButton = require('./ClearButton/ClearButton.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _DateInputs, _TimeInputs, _ClearButton, _PickersIcons;
+
+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 ControlledDateTimePickerContent = () => {
   const {
     hideDate,
@@ -31,8 +43,11 @@ const ControlledDateTimePickerContent = () => {
     shouldPreserveClearableSpace,
     isControllerOnly,
     props: {
-      hasError
-    }
+      hasError,
+      dataAttrs,
+      disabled
+    },
+    onGlobalKeyDown
   } = React__default["default"].useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const resetLatestInteraction = React__default["default"].useCallback(() => {
     setLatestInteractionRegion('');
@@ -44,18 +59,24 @@ const ControlledDateTimePickerContent = () => {
   const rightControlCols = [];
   if (shouldPreserveClearableSpace) rightControlCols.push('28px');
   if (withAnyPicker) rightControlCols.push('auto');
-  return /*#__PURE__*/_jsx__default["default"](Styleds.StyledInputsWrapperGrid, {
-    cols: mainCols,
-    gutter: "xxs",
-    pr: hideDatePicker && hideTimePicker && hideDateTimePicker ? '2px' : null,
-    justPicker: hideDate && hideTime,
-    withAnyPicker: withAnyPicker,
-    onBlur: resetLatestInteraction,
-    hasError: hasError,
-    isControllerOnly: isControllerOnly
-  }, void 0, hideDate ? null : _DateInputs || (_DateInputs = /*#__PURE__*/_jsx__default["default"](DateInputs.DateInputs, {})), hideTime ? null : _TimeInputs || (_TimeInputs = /*#__PURE__*/_jsx__default["default"](TimeInputs.TimeInputs, {})), withAnyRightController ? /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-    cols: rightControlCols
-  }, void 0, shouldPreserveClearableSpace ? _ClearButton || (_ClearButton = /*#__PURE__*/_jsx__default["default"](ClearButton.ClearButton, {})) : null, withAnyPicker ? _PickersIcons || (_PickersIcons = /*#__PURE__*/_jsx__default["default"](PickersIcons.PickersIcons, {})) : null) : null);
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Styleds.StyledInputsWrapperGrid, _objectSpread(_objectSpread({
+      cols: mainCols,
+      gutter: "xxs",
+      pr: hideDatePicker && hideTimePicker && hideDateTimePicker ? '2px' : null,
+      justPicker: hideDate && hideTime,
+      withAnyPicker: withAnyPicker,
+      onBlur: resetLatestInteraction,
+      onKeyDown: onGlobalKeyDown,
+      hasError: hasError,
+      isControllerOnly: isControllerOnly,
+      disabled: disabled
+    }, dataAttrs), {}, {
+      children: [hideDate ? null : _DateInputs || (_DateInputs = /*#__PURE__*/_jsx__default["default"](DateInputs.DateInputs, {})), hideTime ? null : _TimeInputs || (_TimeInputs = /*#__PURE__*/_jsx__default["default"](TimeInputs.TimeInputs, {})), withAnyRightController ? /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+        cols: rightControlCols
+      }, void 0, shouldPreserveClearableSpace ? _ClearButton || (_ClearButton = /*#__PURE__*/_jsx__default["default"](ClearButton.ClearButton, {})) : null, withAnyPicker ? _PickersIcons || (_PickersIcons = /*#__PURE__*/_jsx__default["default"](PickersIcons.PickersIcons, {})) : null) : null]
+    }))
+  });
 };
 
 exports.ControlledDateTimePickerContent = ControlledDateTimePickerContent;