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

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

@@ -1,11 +1,20 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { useRef, useMemo, useState, useCallback } from 'react';
+import { getDataProps } from '@elliemae/ds-props-helpers';
 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 } from '../utils/dateHelpers.js';
+import { getValidationDateStringMetaInfo, getDateStringFromDay, getTimeStringFromDay } from '../utils/dateHelpers.js';
 import { getValidationTimeStringMetaInfo } from '../utils/timeHelpers.js';
-import { dateTimeToDate, dateTimeToTime, isEmptyDateStringMask, isEmptyTimeStringMask, isEmptyDateTimeStringMask } from '../utils/stringHelpers.js';
+import { dateTimeToDate, dateTimeToTime, getFormattedDateString, getFormattedTimeString, isEmptyDateStringMask, isEmptyTimeStringMask, isEmptyDateTimeStringMask } from '../utils/stringHelpers.js';
+import { defaultMetaInfo } from '../utils/constants.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; }
 
@@ -18,8 +27,7 @@ const useControlledDateTimePicker = props => {
   const dayInputRef = useRef();
   const yearInputRef = useRef();
   const hourInputRef = useRef();
-  const minutesInputRef = useRef(); // const secondsInputRef = useRef<HTMLInputElement>();
-
+  const minutesInputRef = useRef();
   const meridiemInputRef = useRef();
   const clearButtonRef = useRef();
   const pickerButtonRef = useRef();
@@ -33,20 +41,19 @@ const useControlledDateTimePicker = props => {
   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 nextMinutesBtnRef = useRef();
   const prevMeridiemBtnRef = useRef();
   const currMeridiemBtnRef = useRef();
   const nextMeridiemBtnRef = useRef();
   const propsWithDefaults = useGetDatePickerWithDefaultsProps(props);
+  const dataAttrs = getDataProps(props);
   const {
     type,
     getIsDisabledDay,
     getIsOutOfRangeDay,
     getIsDisabledTime,
     isClearable,
+    autoFocus,
     onDateChange: appOnDateChange,
     onDateTimeChange: appOnDateTimeChange,
     onTimeChange: appOnTimeChange,
@@ -55,7 +62,10 @@ const useControlledDateTimePicker = props => {
     onYearChange: appOnYearChange,
     onHourChange: appOnHourChange,
     onMinuteChange: appOnMinuteChange,
-    onMeridiemChange: appOnMeridiemChange
+    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
@@ -75,21 +85,65 @@ const useControlledDateTimePicker = props => {
   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 = useMemo(() => 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, [type]);
-  const isWithTimeWheelToo = useMemo(() => 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, [type]);
-  const isWithCalendarToo = useMemo(() => 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, [type]);
+  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 !== '' || 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;
+  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 getDateMetaInfo = useCallback((newDateString = null, metaInfo = {}) => {
+  let firstSegmentRef = useRef();
+  if (isWithDateInputs) firstSegmentRef = monthInputRef;else if (isWithTimeInputs) firstSegmentRef = hourInputRef;else if (withAnyPicker) firstSegmentRef = pickerButtonRef;
+  let lastSegmentRef = useRef();
+  if (withAnyPicker) lastSegmentRef = pickerButtonRef;else if (withClearBtn) lastSegmentRef = clearButtonRef;else if (isWithTimeInputs) lastSegmentRef = meridiemInputRef;else if (isWithDateInputs) lastSegmentRef = yearInputRef;
+  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
+  });
+  const ariaCurrentValueForInputs = "current values: ".concat(isWithDateInputs ? "".concat(announcedDateValues) : '').concat(isDateTimeSelector ? ', ' : '').concat(isWithTimeInputs ? "".concat(announcedTimeValues) : '');
+  const getDateMetaInfo = 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), getValidationDateStringMetaInfo(finalDateString, getIsOutOfRangeDay, getIsDisabledDay));
   }, [tempDateString, getIsDisabledDay, getIsOutOfRangeDay]);
-  const getTimeMetaInfo = useCallback((newTimeString = null, metaInfo = {}) => {
+  const getTimeMetaInfo = 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), getValidationTimeStringMetaInfo(finalTimeString, getIsDisabledTime));
   }, [tempTimeString, getIsDisabledTime]);
@@ -102,7 +156,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,
@@ -119,7 +173,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,
@@ -135,7 +189,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,
@@ -146,6 +200,99 @@ const useControlledDateTimePicker = props => {
     const appDateTimeString = isEmptyDateTimeStringMask(newDateTimeString) ? '' : newDateTimeString;
     appOnDateTimeChange(appDateTimeString, newMetaInfo); // don't do this on useEffect to avoid complete chaos
   }, [appOnTimeChange, tempDateString, getTimeMetaInfo, getDateMetaInfo, appOnDateTimeChange]);
+  const handleChangeMonth = useCallback(function (newMonth, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+    const newDateString = getFormattedDateString({
+      month: newMonth,
+      day,
+      year
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnMonthChange(newMonth, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [day, year, getIsOutOfRangeDay, getIsDisabledDay, appOnMonthChange, handleChangeComposedDateString]);
+  const handleChangeDay = useCallback(function (newDay, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+    const newDateString = getFormattedDateString({
+      month,
+      day: newDay,
+      year
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnDayChange(newDay, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [month, year, getIsOutOfRangeDay, getIsDisabledDay, appOnDayChange, handleChangeComposedDateString]);
+  const handleChangeYear = useCallback(function (newYear, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+    const newDateString = getFormattedDateString({
+      month,
+      day,
+      year: newYear
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnYearChange(newYear, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [month, day, getIsOutOfRangeDay, getIsDisabledDay, appOnYearChange, handleChangeComposedDateString]);
+  const handleChangeHours = useCallback(function (newHours, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+    const newTimeString = getFormattedTimeString({
+      hours: newHours,
+      minutes,
+      // seconds,
+      meridiem
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
+      newTimeString
+    });
+
+    appOnHourChange(newHours, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [minutes, meridiem, getIsDisabledTime, appOnHourChange, handleChangeComposedTimeString]);
+  const handleChangeMinutes = useCallback(function (newMinutes, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+    const newTimeString = getFormattedTimeString({
+      hours,
+      minutes: newMinutes,
+      // seconds,
+      meridiem
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
+      newTimeString
+    });
+
+    appOnMinuteChange(newMinutes, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [hours, meridiem, getIsDisabledTime, appOnMinuteChange, handleChangeComposedTimeString]);
+  const handleChangeMeridiem = useCallback(function (newMeridiem, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+    const newTimeString = getFormattedTimeString({
+      hours,
+      minutes,
+      // seconds,
+      meridiem: newMeridiem
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
+      newTimeString
+    });
+
+    appOnMeridiemChange(newMeridiem, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [hours, minutes, getIsDisabledTime, appOnMeridiemChange, handleChangeComposedTimeString]);
   const handleClearAll = useCallback(e => {
     const metaInfo = {
       isAutomaticFillTrigger: false,
@@ -157,30 +304,64 @@ const useControlledDateTimePicker = props => {
 
     const datePartsChangesMetainfo = _objectSpread({}, metaInfo);
 
-    delete datePartsChangesMetainfo.newDateTimeString;
-    delete datePartsChangesMetainfo.newTimeString;
-
     const timePartsChangesMetainfo = _objectSpread({}, metaInfo);
 
-    delete timePartsChangesMetainfo.newDateTimeString;
-    delete timePartsChangesMetainfo.newDateString;
-    handleChangeComposedDateTimeString('__/__/____', '__:__ __', metaInfo);
-    appOnMonthChange('', e, datePartsChangesMetainfo);
-    appOnDayChange('', e, datePartsChangesMetainfo);
-    appOnYearChange('', e, datePartsChangesMetainfo);
-    appOnHourChange('', e, timePartsChangesMetainfo);
-    appOnMinuteChange('', e, timePartsChangesMetainfo);
-    appOnMeridiemChange('', e, timePartsChangesMetainfo);
-    setLatestInteractionRegion('clear-btn');
-  }, [appOnDayChange, appOnHourChange, appOnMeridiemChange, appOnMinuteChange, appOnMonthChange, appOnYearChange, handleChangeComposedDateTimeString, setLatestInteractionRegion]);
+    if (isDateSelector || isDateTimeSelector) {
+      delete datePartsChangesMetainfo.newDateTimeString;
+      delete datePartsChangesMetainfo.newTimeString;
+      appOnMonthChange('', e, datePartsChangesMetainfo);
+      appOnDayChange('', e, datePartsChangesMetainfo);
+      appOnYearChange('', e, datePartsChangesMetainfo);
+    }
+
+    if (isTimeSelector || isDateTimeSelector) {
+      delete timePartsChangesMetainfo.newDateTimeString;
+      delete timePartsChangesMetainfo.newDateString;
+      appOnHourChange('', e, timePartsChangesMetainfo);
+      appOnMinuteChange('', e, timePartsChangesMetainfo);
+      appOnMeridiemChange('', e, timePartsChangesMetainfo);
+    }
+
+    if (isDateTimeSelector) handleChangeComposedDateTimeString('__/__/____', '__:__ __', metaInfo);
+    if (isDateSelector) handleChangeComposedDateString('__/__/____', datePartsChangesMetainfo);
+    if (isTimeSelector) handleChangeComposedTimeString('__:__ __', timePartsChangesMetainfo);
+  }, [appOnDayChange, appOnHourChange, appOnMeridiemChange, appOnMinuteChange, appOnMonthChange, appOnYearChange, handleChangeComposedDateString, handleChangeComposedDateTimeString, handleChangeComposedTimeString, isDateSelector, isDateTimeSelector, isTimeSelector]);
+  const onFillWithCurrentDateKeys = useCallback(function () {
+    let metaInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      isAutomaticFillTrigger: true
+    };
+    const now = new Date();
+    const nowDateString = getDateStringFromDay(now);
+    const nowTimeString = getTimeStringFromDay(now);
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(nowDateString, getIsOutOfRangeDay, getIsDisabledDay)), getValidationTimeStringMetaInfo(nowTimeString, getIsDisabledTime)), {}, {
+      newDateString: nowDateString
+    });
+
+    handleChangeComposedDateTimeString(nowDateString, nowTimeString, finalMetaInfo);
+  }, [getIsDisabledDay, getIsDisabledTime, getIsOutOfRangeDay, handleChangeComposedDateTimeString]);
+  const onGlobalKeyDown = 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.useMemo(() => ({
-    props: propsWithDefaults,
+    props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
+      dataAttrs
+    }),
     monthInputRef,
     dayInputRef,
     yearInputRef,
     hourInputRef,
     minutesInputRef,
-    // secondsInputRef,
     meridiemInputRef,
     clearButtonRef,
     pickerButtonRef,
@@ -199,6 +380,8 @@ const useControlledDateTimePicker = props => {
     currMeridiemBtnRef,
     nextMeridiemBtnRef,
     dateStringFromProps,
+    firstSegmentRef,
+    lastSegmentRef,
     tempDateString,
     setTempDateString,
     tempTimeString,
@@ -206,6 +389,12 @@ const useControlledDateTimePicker = props => {
     handleChangeComposedDateTimeString,
     handleChangeComposedDateString,
     handleChangeComposedTimeString,
+    handleChangeMonth,
+    handleChangeDay,
+    handleChangeYear,
+    handleChangeHours,
+    handleChangeMinutes,
+    handleChangeMeridiem,
     handleClearAll,
     hideDate,
     hideTime,
@@ -218,14 +407,43 @@ const useControlledDateTimePicker = props => {
     isControllerOnly,
     isWithTimeWheelToo,
     isWithCalendarToo,
+    isWithDateInputs,
+    isWithDateInputsOnly,
+    isWithTimeInputs,
+    isWithTimeInputsOnly,
+    autoFocusMonthInput,
+    autoFocusHourInput,
+    autoFocusPrevMonthArrow,
+    autoFocusHourTimeWheel,
     latestInteractionRegion,
     setLatestInteractionRegion,
     withAnyInputs,
     withAnyPicker,
     withClearBtn,
     withAnyRightController,
-    shouldPreserveClearableSpace
-  }), [propsWithDefaults, dateStringFromProps, tempDateString, tempTimeString, handleChangeComposedDateTimeString, handleChangeComposedDateString, handleChangeComposedTimeString, handleClearAll, hideDate, hideTime, hideDateTimePicker, hideDatePicker, hideTimePicker, isDateSelector, isTimeSelector, isDateTimeSelector, isControllerOnly, isWithTimeWheelToo, isWithCalendarToo, latestInteractionRegion, withAnyInputs, withAnyPicker, withClearBtn, withAnyRightController, shouldPreserveClearableSpace] // refs are mutable so we don't need to listen to them
+    shouldPreserveClearableSpace,
+    month,
+    day,
+    year,
+    monthNum,
+    dayNum,
+    yearNum,
+    announcedMonth,
+    announcedDay,
+    announcedYear,
+    announcedDateValues,
+    hours,
+    minutes,
+    meridiem,
+    hoursNum,
+    minutesNum,
+    announcedHours,
+    announcedMinutes,
+    announcedMeridiem,
+    announcedTimeValues,
+    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/esm/controlled-date-time-picker/config/useGetDestructuredValues.js

@@ -0,0 +1,143 @@
+import { useMemo } from 'react';
+import { dateTimeToDate, deconstructValuesFromDateString, fillStringWithPlaceHolders, dateTimeToTime, deconstructTimeValues } from '../utils/stringHelpers.js';
+import { convertToPositiveNumberIfPossible } from '../utils/numberHelpers.js';
+import { monthNames, announcableCardinalDays } from '../utils/constants.js';
+
+/* eslint-disable max-lines */
+// this is because it's fully controlled
+// 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 = _ref => {
+  let {
+    date,
+    dateTime,
+    isDateTimeSelector
+  } = _ref;
+  const dateStringFromProps = isDateTimeSelector ? dateTimeToDate(dateTime) : date;
+  const deconstructedValues = deconstructValuesFromDateString(dateStringFromProps);
+  const {
+    month,
+    day,
+    year
+  } = deconstructedValues;
+  const monthNum = convertToPositiveNumberIfPossible(month);
+  const dayNum = convertToPositiveNumberIfPossible(day);
+  const yearNum = convertToPositiveNumberIfPossible(year);
+  const announcedMonth = monthNum !== -1 ? monthNames[monthNum - 1] : 'empty month';
+  const announcedDay = dayNum !== -1 ? announcableCardinalDays[dayNum] : 'empty day';
+  const announcedYear = yearNum !== -1 ? fillStringWithPlaceHolders("".concat(yearNum), 4, '0') : 'empty year';
+  const announcedDateValues = "".concat(announcedMonth, ", ").concat(announcedDay, ", ").concat(announcedYear);
+  return useMemo(() => ({
+    month,
+    day,
+    year,
+    monthNum,
+    dayNum,
+    yearNum,
+    announcedMonth,
+    announcedDay,
+    announcedYear,
+    announcedDateValues
+  }), [announcedDay, announcedMonth, announcedYear, announcedDateValues, day, dayNum, month, monthNum, year, yearNum]);
+}; // this is because it's fully controlled
+// our source of truth is either the time props or dateTime props
+// based on wheter it's a dateTime picker
+// or a time picker (it's time picker when hideDate is true)
+
+const useGetDestructuredTimeValues = _ref2 => {
+  let {
+    time,
+    dateTime,
+    isDateTimeSelector
+  } = _ref2;
+  const timeStringFromProps = isDateTimeSelector ? dateTimeToTime(dateTime) : time;
+  const deconstructedValues = deconstructTimeValues(timeStringFromProps);
+  const {
+    hours,
+    minutes,
+    meridiem
+  } = deconstructedValues;
+  const hoursNum = convertToPositiveNumberIfPossible(hours);
+  const minutesNum = convertToPositiveNumberIfPossible(minutes); // 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 ? "".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 = "".concat(announcedHours, ", ").concat(announcedMinutes, ", ").concat(announcedMeridiem);
+  return useMemo(() => ({
+    hours,
+    minutes,
+    meridiem,
+    hoursNum,
+    minutesNum,
+    announcedHours,
+    announcedMinutes,
+    announcedMeridiem,
+    announcedTimeValues
+  }), [hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues]);
+};
+const useGetDestructuredValues = _ref3 => {
+  let {
+    date,
+    time,
+    dateTime,
+    isDateTimeSelector
+  } = _ref3;
+  const {
+    month,
+    day,
+    year,
+    monthNum,
+    dayNum,
+    yearNum,
+    announcedMonth,
+    announcedDay,
+    announcedYear,
+    announcedDateValues
+  } = useGetDestructuredDateValues({
+    date,
+    dateTime,
+    isDateTimeSelector
+  });
+  const {
+    hours,
+    minutes,
+    meridiem,
+    hoursNum,
+    minutesNum,
+    announcedHours,
+    announcedMinutes,
+    announcedMeridiem,
+    announcedTimeValues
+  } = useGetDestructuredTimeValues({
+    time,
+    dateTime,
+    isDateTimeSelector
+  });
+  return useMemo(() => ({
+    month,
+    day,
+    year,
+    monthNum,
+    dayNum,
+    yearNum,
+    announcedMonth,
+    announcedDay,
+    announcedYear,
+    announcedDateValues,
+    hours,
+    minutes,
+    meridiem,
+    hoursNum,
+    minutesNum,
+    announcedHours,
+    announcedMinutes,
+    announcedMeridiem,
+    announcedTimeValues
+  }), [month, day, year, monthNum, dayNum, yearNum, announcedMonth, announcedDay, announcedYear, announcedDateValues, hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues]);
+};
+
+export { useGetDestructuredDateValues, useGetDestructuredTimeValues, useGetDestructuredValues };

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

@@ -3,72 +3,41 @@ import { deconstructValuesFromDateString, isValidDateString, dateTimeToDate, isV
 import { convertToPositiveNumberIfPossible } from '../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/esm/controlled-date-time-picker/index.js

@@ -2,6 +2,6 @@ export { DSControlledDateTimePicker, DSControlledDateTimePickerWithSchema } from
 export { ControlledDateTimePickerDatatestid } from './ControlledDateTimePickerDatatestid.js';
 export { CONTROLLED_DATE_TIME_PICKER_TYPES } from './ControlledDateTimePickerTypes.js';
 export { deconstructValuesFromDateString, prependStringWithPlaceHolders } from './utils/stringHelpers.js';
-export { getValidatioDateTimeStringMetaInfo } from './utils/dateTimeHelpers.js';
+export { getValidationDateTimeStringMetaInfo } from './utils/dateTimeHelpers.js';
 export { getDateStringFromDay, getDateValuesFromDate, getDayFromDateString, getValidationDateStringMetaInfo } from './utils/dateHelpers.js';
 export { getValidationTimeStringMetaInfo } from './utils/timeHelpers.js';