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

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

@@ -15,16 +15,38 @@ const ControlledDateTimePickerDatatestid = {
     CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-trigger-icon'
   },
   CALENDAR: {
+    PREV_YEAR: 'ds-controlled-date-time-picker-calendar-prev-year',
+    PREV_MONTH: 'ds-controlled-date-time-picker-calendar-prev-month',
     DAY: 'ds-controlled-date-time-picker-calendar-day',
-    FOCUSED_DAY: 'ds-controlled-date-time-picker-calendar-focused-day'
+    FOCUSED_DAY: 'ds-controlled-date-time-picker-calendar-focused-day',
+    SELECTED_DAY: 'ds-controlled-date-time-picker-calendar-selected-day',
+    SELECTED_FOCUSED_DAY: 'ds-controlled-date-time-picker-calendar-selected-focused-day',
+    NEXT_MONTH: 'ds-controlled-date-time-picker-calendar-next-month',
+    NEXT_YEAR: 'ds-controlled-date-time-picker-calendar-next-year'
   },
   TIMEWHEEL: {
+    PREV_HOUR: 'ds-controlled-date-time-picker-timewheel-prev-hour',
     HOUR: 'ds-controlled-date-time-picker-timewheel-hour',
-    SELECTED_HOUR: 'ds-controlled-date-time-picker-timewheel-selected-hour',
+    CURRENT_HOUR: 'ds-controlled-date-time-picker-timewheel-current-hour',
+    NEXT_HOUR: 'ds-controlled-date-time-picker-timewheel-next-hour',
+    PREV_MINUTE: 'ds-controlled-date-time-picker-timewheel-prev-minute',
     MINUTE: 'ds-controlled-date-time-picker-timewheel-minute',
-    SELECTED_MINUTE: 'ds-controlled-date-time-picker-timewheel-selected-minute',
+    CURRENT_MINUTE: 'ds-controlled-date-time-picker-timewheel-current-minute',
+    NEXT_MINUTE: 'ds-controlled-date-time-picker-timewheel-next-minute',
+    PREV_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-prev-meridiem',
     MERIDIEM: 'ds-controlled-date-time-picker-timewheel-meridiem',
-    SELECTED_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-selected-meridiem'
+    CURRENT_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-current-meridiem',
+    NEXT_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-next-meridiem'
+  },
+  CONTEXTUAL_MENU: {
+    CALENDAR: 'ds-controlled-date-time-picker-calendar-context-content-wrapper',
+    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-context-content-wrapper',
+    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-context-content-wrapper'
+  },
+  CONTROLLER_COMPONENT: {
+    CALENDAR: 'ds-controlled-date-time-picker-calendar-controller-wrapper',
+    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-controller-wrapper',
+    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-controller-wrapper'
   },
   CLEAR_BUTTON: 'ds-controlled-date-time-picker-clear-btn'
 };

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

@@ -1,6 +1,8 @@
 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 { 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';
@@ -56,7 +58,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
@@ -81,7 +86,8 @@ const useControlledDateTimePicker = props => {
   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;
@@ -94,6 +100,33 @@ const useControlledDateTimePicker = props => {
   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
+  });
+  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));
@@ -111,7 +144,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,
@@ -128,7 +161,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,
@@ -144,7 +177,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,
@@ -248,8 +281,28 @@ const useControlledDateTimePicker = props => {
     withAnyPicker,
     withClearBtn,
     withAnyRightController,
-    shouldPreserveClearableSpace
-  }), [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] // 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
+  }), [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;
 };

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

@@ -0,0 +1,140 @@
+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 = ({
+  date,
+  dateTime,
+  isDateTimeSelector
+}) => {
+  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 = ({
+  time,
+  dateTime,
+  isDateTimeSelector
+}) => {
+  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 = ({
+  date,
+  time,
+  dateTime,
+  isDateTimeSelector
+}) => {
+  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';

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

@@ -1,12 +1,12 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import CloseMedium from '@elliemae/ds-icons/CloseMedium';
-import { BUTTON_VARIANT } from '@elliemae/ds-basic/Button';
+import { DSIconColors } from '@elliemae/ds-icon';
+import { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';
 import { StyledClearButton } from '../Styleds.js';
 import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
 import { useClearButton } from './useClearButton.js';
 
-var _CloseMedium;
 const ClearButton = () => {
   const {
     onClearClick,
@@ -18,16 +18,17 @@ const ClearButton = () => {
   return /*#__PURE__*/_jsx(StyledClearButton, {
     shouldDisplay: withClearBtn,
     "aria-label": "clear selected date",
-    buttonType: "text",
-    leftIcon: _CloseMedium || (_CloseMedium = /*#__PURE__*/_jsx(CloseMedium, {})),
-    size: "m",
+    buttonType: "icon",
+    size: BUTTON_SIZES.M,
     variant: BUTTON_VARIANT.DEFAULT,
     "data-testid": ControlledDateTimePickerDatatestid.CLEAR_BUTTON,
     innerRef: clearButtonRef,
     onClick: onClearClick,
     onKeyDown: onClearButtonKeyDown,
     withAnyPicker: withAnyPicker
-  });
+  }, void 0, /*#__PURE__*/_jsx(CloseMedium, {
+    color: DSIconColors.PRIMARY
+  }));
 };
 
 export { ClearButton };

package/esm/controlled-date-time-picker/parts/DateInputs/DDInput.js

@@ -18,7 +18,8 @@ const DDInput = /*#__PURE__*/React.memo(({
   onKeyDown,
   value,
   contextRef,
-  placeholder
+  placeholder,
+  ariaCurrentValueForInputs
 }) => {
   const validateOnChange = useCallback(e => {
     var _e$target;
@@ -38,7 +39,7 @@ const DDInput = /*#__PURE__*/React.memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "day input field",
+    "aria-label": "day input field, ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY
   });
 });

package/esm/controlled-date-time-picker/parts/DateInputs/DateInputs.js

@@ -33,7 +33,8 @@ const DateInputs = () => {
   const {
     monthInputRef,
     dayInputRef,
-    yearInputRef
+    yearInputRef,
+    ariaCurrentValueForInputs
   } = useContext(ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx(Grid, {
     cols: [fixedValues.smallInputWidth, fixedValues.separatorWidth, fixedValues.smallInputWidth, fixedValues.separatorWidth, fixedValues.largeInputWidth]
@@ -45,7 +46,8 @@ const DateInputs = () => {
     value: month,
     contextRef: monthInputRef,
     autoFocusMonthInput: autoFocusMonthInput,
-    placeholder: "MM"
+    placeholder: "MM",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs
   })), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
     alignItems: "center"
   }, void 0, "/")), /*#__PURE__*/_jsx(StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx(DDInput, {
@@ -55,7 +57,8 @@ const DateInputs = () => {
     onKeyDown: onDayKeyDown,
     value: day,
     contextRef: dayInputRef,
-    placeholder: "DD"
+    placeholder: "DD",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs
   })), _StyledSeparator2 || (_StyledSeparator2 = /*#__PURE__*/_jsx(StyledSeparator, {
     alignItems: "center"
   }, void 0, "/")), /*#__PURE__*/_jsx(StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx(YYYYInput, {
@@ -65,7 +68,8 @@ const DateInputs = () => {
     onKeyDown: onYearKeyDown,
     value: year,
     contextRef: yearInputRef,
-    placeholder: "YYYY"
+    placeholder: "YYYY",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs
   })));
 };
 

package/esm/controlled-date-time-picker/parts/DateInputs/MMInput.js

@@ -19,7 +19,8 @@ const MMInput = /*#__PURE__*/React.memo(({
   value,
   placeholder,
   contextRef,
-  autoFocusMonthInput
+  autoFocusMonthInput,
+  ariaCurrentValueForInputs
 }) => {
   const validateOnChange = useCallback(e => {
     var _e$target;
@@ -40,7 +41,7 @@ const MMInput = /*#__PURE__*/React.memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "month input field",
+    "aria-label": "month input field, ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH
   });
 });

package/esm/controlled-date-time-picker/parts/DateInputs/YYYYInput.js

@@ -18,7 +18,8 @@ const YYYYInput = /*#__PURE__*/React.memo(({
   onKeyDown,
   value,
   placeholder,
-  contextRef
+  contextRef,
+  ariaCurrentValueForInputs
 }) => {
   const validateOnChange = useCallback(e => {
     var _e$target;
@@ -38,7 +39,7 @@ const YYYYInput = /*#__PURE__*/React.memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "year input field",
+    "aria-label": "year input field, ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR
   });
 });

package/esm/controlled-date-time-picker/parts/DateInputs/useDateInputs.js

@@ -1,36 +1,24 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import { useMemo, useContext, useCallback } from 'react';
+import { useContext, useCallback, useMemo } from 'react';
 import { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';
-import { dateTimeToDate, deconstructValuesFromDateString, getFormattedDateString, prependStringWithPlaceHolders, fillStringWithPlaceHolders } from '../../utils/stringHelpers.js';
+import { getFormattedDateString, prependStringWithPlaceHolders, fillStringWithPlaceHolders } from '../../utils/stringHelpers.js';
 import { getValidationDateStringMetaInfo } from '../../utils/dateHelpers.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-// our source of truth is either the 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,
-  hideTime
-}) => {
-  const dateStringFromProps = useMemo(() => hideTime ? date : dateTimeToDate(dateTime), [date, dateTime, hideTime]);
-  const deconstructedValues = useMemo(() => deconstructValuesFromDateString(dateStringFromProps), [dateStringFromProps]);
-  return deconstructedValues;
-};
 const useDateInputs = () => {
   const {
     props: {
-      date,
-      dateTime,
       onMonthChange: appOnMonthChange,
       onDayChange: appOnDayChange,
       onYearChange: appOnYearChange,
       getIsDisabledDay,
       getIsOutOfRangeDay
     },
+    month,
+    day,
+    year,
     hideTime,
     monthInputRef,
     dayInputRef,
@@ -46,15 +34,6 @@ const useDateInputs = () => {
     withAnyRightController,
     autoFocusMonthInput
   } = useContext(ControlledDateTimePickerContext);
-  const {
-    month,
-    day,
-    year
-  } = useGetDestructuredDateValues({
-    date,
-    dateTime,
-    hideTime
-  });
   const onHomeKeyDown = useCallback(() => {
     var _monthInputRef$curren, _monthInputRef$curren2;
 
@@ -113,7 +92,7 @@ const useDateInputs = () => {
       const monthInteger = Number.isNaN(monthStringConvertedToInteger) ? 0 : monthStringConvertedToInteger;
       let newMonth;
       if (key === 'ArrowUp') newMonth = monthInteger + 1 <= 12 ? monthInteger + 1 : monthInteger;else newMonth = monthInteger - 1 > 0 ? monthInteger - 1 : 1;
-      newMonth = prependStringWithPlaceHolders(`${newMonth}`, 2);
+      newMonth = prependStringWithPlaceHolders("".concat(newMonth), 2);
       handleChangeMonth(newMonth, e);
     }
   }, [onHomeKeyDown, onEndKeyDown, month, handleChangeMonth]);
@@ -172,7 +151,7 @@ const useDateInputs = () => {
       const dayInteger = Number.isNaN(dayStringConvertedToInteger) ? 0 : dayStringConvertedToInteger;
       let newDay;
       if (key === 'ArrowUp') newDay = dayInteger + 1 <= 31 ? dayInteger + 1 : dayInteger;else newDay = dayInteger - 1 > 0 ? dayInteger - 1 : 1;
-      newDay = prependStringWithPlaceHolders(`${newDay}`, 2);
+      newDay = prependStringWithPlaceHolders("".concat(newDay), 2);
       handleChangeDay(newDay, e);
     }
   }, [onHomeKeyDown, onEndKeyDown, handleChangeDay, day]);
@@ -237,7 +216,7 @@ const useDateInputs = () => {
       const yearInteger = Number.isNaN(yearStringConvertedToInteger) ? 0 : yearStringConvertedToInteger;
       let newYear;
       if (key === 'ArrowUp') newYear = yearInteger + 1 <= 9999 ? yearInteger + 1 : yearInteger;else newYear = yearInteger - 1 > 0 ? yearInteger - 1 : 1;
-      newYear = prependStringWithPlaceHolders(`${newYear}`, 4);
+      newYear = prependStringWithPlaceHolders("".concat(newYear), 4);
       handleChangeYear(newYear, e);
     }
   }, [onHomeKeyDown, onEndKeyDown, handleChangeYear, year]);
@@ -269,4 +248,4 @@ const useDateInputs = () => {
   }), [month, day, year, autoFocusMonthInput, onMonthFocus, onMonthChange, onDayFocus, onDayChange, onYearFocus, onYearChange, onMonthBlur, onDayBlur, onYearBlur, onMonthKeyDown, onDayKeyDown, onYearKeyDown]);
 };
 
-export { useDateInputs, useGetDestructuredDateValues };
+export { useDateInputs };

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarBody.js

@@ -3,11 +3,14 @@ import React from 'react';
 import { CalendarMonthDays } from './CalendarMonthDays.js';
 import { CalendarWeekDays } from './CalendarWeekDays.js';
 import { StyledBody } from './Styleds.js';
-import { jsxs, Fragment } from 'react/jsx-runtime';
 
 var _CalendarWeekDays, _StyledBody;
-const CalendarBody = /*#__PURE__*/React.memo(() => /*#__PURE__*/jsxs(Fragment, {
-  children: [_CalendarWeekDays || (_CalendarWeekDays = /*#__PURE__*/_jsx(CalendarWeekDays, {})), _StyledBody || (_StyledBody = /*#__PURE__*/_jsx(StyledBody, {}, void 0, /*#__PURE__*/_jsx(CalendarMonthDays, {})))]
-}));
+const CalendarBody = /*#__PURE__*/React.memo(({
+  weekRowsNum
+}) => /*#__PURE__*/_jsx("span", {
+  role: "grid",
+  "aria-colcount": 7,
+  "aria-rowcount": weekRowsNum
+}, void 0, _CalendarWeekDays || (_CalendarWeekDays = /*#__PURE__*/_jsx(CalendarWeekDays, {})), _StyledBody || (_StyledBody = /*#__PURE__*/_jsx(StyledBody, {}, void 0, /*#__PURE__*/_jsx(CalendarMonthDays, {})))));
 
 export { CalendarBody };