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

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

@@ -1,40 +1,32 @@
+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 { 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';
+import { homeEndArrowUpDownDashSlashesKeys, homeEndArrowUpDownSpaceKeys, 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; }
 
 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
+      getIsOutOfRangeDay,
+      disabled
     },
+    month,
+    day,
+    year,
     hideTime,
-    hideDateTimePicker,
-    hideDatePicker,
-    hideTimePicker,
     monthInputRef,
     dayInputRef,
     yearInputRef,
@@ -46,33 +38,25 @@ const useDateInputs = () => {
     setLatestInteractionRegion,
     withClearBtn,
     withAnyPicker,
-    withAnyRightController
+    withAnyRightController,
+    autoFocusMonthInput,
+    lastSegmentRef
   } = useContext(ControlledDateTimePickerContext);
-  const {
-    month,
-    day,
-    year
-  } = useGetDestructuredDateValues({
-    date,
-    dateTime,
-    hideTime
-  });
   const onHomeKeyDown = useCallback(() => {
     var _monthInputRef$curren, _monthInputRef$curren2;
 
     monthInputRef === null || monthInputRef === void 0 ? void 0 : (_monthInputRef$curren = monthInputRef.current) === null || _monthInputRef$curren === void 0 ? void 0 : (_monthInputRef$curren2 = _monthInputRef$curren.focus) === null || _monthInputRef$curren2 === void 0 ? void 0 : _monthInputRef$curren2.call(_monthInputRef$curren);
   }, [monthInputRef]);
   const onEndKeyDown = useCallback(() => {
-    var _pickerButtonRef$curr, _pickerButtonRef$curr2, _yearInputRef$current, _yearInputRef$current2, _meridiemInputRef$cur, _meridiemInputRef$cur2;
+    var _pickerButtonRef$curr, _pickerButtonRef$curr2, _clearButtonRef$curre, _clearButtonRef$curre2, _meridiemInputRef$cur, _meridiemInputRef$cur2, _yearInputRef$current, _yearInputRef$current2;
 
-    if (!hideDateTimePicker || !hideDatePicker || !hideTimePicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr = pickerButtonRef.current) === null || _pickerButtonRef$curr === void 0 ? void 0 : (_pickerButtonRef$curr2 = _pickerButtonRef$curr.focus) === null || _pickerButtonRef$curr2 === void 0 ? void 0 : _pickerButtonRef$curr2.call(_pickerButtonRef$curr);else if (hideTime) 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);else meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur = meridiemInputRef.current) === null || _meridiemInputRef$cur === void 0 ? void 0 : (_meridiemInputRef$cur2 = _meridiemInputRef$cur.focus) === null || _meridiemInputRef$cur2 === void 0 ? void 0 : _meridiemInputRef$cur2.call(_meridiemInputRef$cur);
-  }, [hideDateTimePicker, hideDatePicker, hideTimePicker, hideTime, pickerButtonRef, yearInputRef, meridiemInputRef]);
+    if (withAnyPicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr = pickerButtonRef.current) === null || _pickerButtonRef$curr === void 0 ? void 0 : (_pickerButtonRef$curr2 = _pickerButtonRef$curr.focus) === null || _pickerButtonRef$curr2 === void 0 ? void 0 : _pickerButtonRef$curr2.call(_pickerButtonRef$curr);else if (withClearBtn) clearButtonRef === null || clearButtonRef === void 0 ? void 0 : (_clearButtonRef$curre = clearButtonRef.current) === null || _clearButtonRef$curre === void 0 ? void 0 : (_clearButtonRef$curre2 = _clearButtonRef$curre.focus) === null || _clearButtonRef$curre2 === void 0 ? void 0 : _clearButtonRef$curre2.call(_clearButtonRef$curre);else if (!hideTime) 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 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);
+  }, [withAnyPicker, pickerButtonRef, withClearBtn, clearButtonRef, hideTime, meridiemInputRef, yearInputRef]);
   const setLatestInteractionRegionDateInputs = useCallback(() => {
     setLatestInteractionRegion('date-inputs');
   }, [setLatestInteractionRegion]);
-  const handleChangeMonth = useCallback((newMonth, e, metaInfo = {
-    isAutomaticFillTrigger: false
-  }) => {
+  const handleChangeMonth = useCallback(function (newMonth, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
     const newDateString = getFormattedDateString({
       month: newMonth,
       day,
@@ -100,36 +84,51 @@ const useDateInputs = () => {
     if (newMonth.length === 2) dayInputRef === null || dayInputRef === void 0 ? void 0 : (_dayInputRef$current = dayInputRef.current) === null || _dayInputRef$current === void 0 ? void 0 : (_dayInputRef$current$ = _dayInputRef$current.focus) === null || _dayInputRef$current$ === void 0 ? void 0 : _dayInputRef$current$.call(_dayInputRef$current);
   }, [dayInputRef, handleChangeMonth]);
   const onMonthKeyDown = useCallback(e => {
+    var _lastSegmentRef$curre, _lastSegmentRef$curre2;
+
     const {
-      key
+      key,
+      ctrlKey,
+      metaKey
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    const monthStringConvertedToInteger = Number.parseInt(month, 10);
+    if (homeEndArrowUpDownDashSlashesKeys.includes(key)) e.preventDefault();
+    if (homeEndArrowUpDownDashSlashesKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
 
     if (key === 'ArrowUp' || key === 'ArrowDown') {
-      const monthStringConvertedToInteger = Number.parseInt(month, 10);
       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]);
+
+    if (!Number.isNaN(monthStringConvertedToInteger) && (key === '-' || key === '/' || key === '\\')) {
+      var _dayInputRef$current2, _dayInputRef$current3;
+
+      const newMonth = prependStringWithPlaceHolders("".concat(monthStringConvertedToInteger), 2);
+      handleChangeMonth(newMonth, e); // auto-advance functionality:
+
+      if (newMonth.length === 2) dayInputRef === null || dayInputRef === void 0 ? void 0 : (_dayInputRef$current2 = dayInputRef.current) === null || _dayInputRef$current2 === void 0 ? void 0 : (_dayInputRef$current3 = _dayInputRef$current2.focus) === null || _dayInputRef$current3 === void 0 ? void 0 : _dayInputRef$current3.call(_dayInputRef$current2);
+    } // focus last fragment on fill with now
+
+
+    if ((ctrlKey || metaKey) && key === ';') lastSegmentRef === null || lastSegmentRef === void 0 ? void 0 : (_lastSegmentRef$curre = lastSegmentRef.current) === null || _lastSegmentRef$curre === void 0 ? void 0 : (_lastSegmentRef$curre2 = _lastSegmentRef$curre.focus) === null || _lastSegmentRef$curre2 === void 0 ? void 0 : _lastSegmentRef$curre2.call(_lastSegmentRef$curre);
+  }, [month, onHomeKeyDown, onEndKeyDown, lastSegmentRef, handleChangeMonth, dayInputRef]);
   const onMonthBlur = useCallback(e => {
     var _e$target2;
 
     const newMonth = e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.value;
-    if (newMonth === '0') handleChangeMonth('', e, {
+    if (newMonth === '0') handleChangeMonth('01', e, {
       isAutomaticFillTrigger: true
     });else if (newMonth.length > 0 && newMonth.length < 2) handleChangeMonth(prependStringWithPlaceHolders(newMonth, 2), e, {
       isAutomaticFillTrigger: true
     });
   }, [handleChangeMonth]);
-  const handleChangeDay = useCallback((newDay, e, metaInfo = {
-    isAutomaticFillTrigger: false
-  }) => {
+  const handleChangeDay = useCallback(function (newDay, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
     const newDateString = getFormattedDateString({
       month,
       day: newDay,
@@ -157,36 +156,58 @@ const useDateInputs = () => {
     if (newDay.length === 2) yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current3 = yearInputRef.current) === null || _yearInputRef$current3 === void 0 ? void 0 : (_yearInputRef$current4 = _yearInputRef$current3.focus) === null || _yearInputRef$current4 === void 0 ? void 0 : _yearInputRef$current4.call(_yearInputRef$current3);
   }, [handleChangeDay, yearInputRef]);
   const onDayKeyDown = useCallback(e => {
+    var _lastSegmentRef$curre3, _lastSegmentRef$curre4;
+
     const {
-      key
+      key,
+      ctrlKey,
+      metaKey
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    const dayStringConvertedToInteger = Number.parseInt(day, 10);
+    if (homeEndArrowUpDownDashSlashesKeys.includes(key)) e.preventDefault();
+    if (homeEndArrowUpDownDashSlashesKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
 
     if (key === 'ArrowUp' || key === 'ArrowDown') {
-      const dayStringConvertedToInteger = Number.parseInt(day, 10);
       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]);
+
+    if (!Number.isNaN(dayStringConvertedToInteger) && (key === '-' || key === '/' || key === '\\')) {
+      var _yearInputRef$current5, _yearInputRef$current6;
+
+      const newDay = prependStringWithPlaceHolders("".concat(dayStringConvertedToInteger), 2);
+      handleChangeDay(newDay, e); // auto-advance functionality:
+
+      if (newDay.length === 2) yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current5 = yearInputRef.current) === null || _yearInputRef$current5 === void 0 ? void 0 : (_yearInputRef$current6 = _yearInputRef$current5.focus) === null || _yearInputRef$current6 === void 0 ? void 0 : _yearInputRef$current6.call(_yearInputRef$current5);
+    } // regressive backspace functionality
+
+
+    if (key === 'Backspace' && (day === null || day === void 0 ? void 0 : day.length) === 0) {
+      var _monthInputRef$curren3, _monthInputRef$curren4;
+
+      monthInputRef === null || monthInputRef === void 0 ? void 0 : (_monthInputRef$curren3 = monthInputRef.current) === null || _monthInputRef$curren3 === void 0 ? void 0 : (_monthInputRef$curren4 = _monthInputRef$curren3.focus) === null || _monthInputRef$curren4 === void 0 ? void 0 : _monthInputRef$curren4.call(_monthInputRef$curren3);
+    } // focus last fragment on fill with now
+
+
+    if ((ctrlKey || metaKey) && key === ';') lastSegmentRef === null || lastSegmentRef === void 0 ? void 0 : (_lastSegmentRef$curre3 = lastSegmentRef.current) === null || _lastSegmentRef$curre3 === void 0 ? void 0 : (_lastSegmentRef$curre4 = _lastSegmentRef$curre3.focus) === null || _lastSegmentRef$curre4 === void 0 ? void 0 : _lastSegmentRef$curre4.call(_lastSegmentRef$curre3);
+  }, [day, onHomeKeyDown, onEndKeyDown, lastSegmentRef, handleChangeDay, yearInputRef, monthInputRef]);
   const onDayBlur = useCallback(e => {
     var _e$target4;
 
     const newDay = e === null || e === void 0 ? void 0 : (_e$target4 = e.target) === null || _e$target4 === void 0 ? void 0 : _e$target4.value;
-    if (newDay === '0') handleChangeDay('', e, {
+    if (newDay === '0') handleChangeDay('01', e, {
       isAutomaticFillTrigger: true
     });else if (newDay.length > 0 && newDay.length < 2) handleChangeDay(prependStringWithPlaceHolders(newDay, 2), e, {
       isAutomaticFillTrigger: true
     });
   }, [handleChangeDay]);
-  const handleChangeYear = useCallback((newYear, e, metaInfo = {
-    isAutomaticFillTrigger: false
-  }) => {
+  const handleChangeYear = useCallback(function (newYear, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
     const newDateString = getFormattedDateString({
       month,
       day,
@@ -213,30 +234,59 @@ const useDateInputs = () => {
       var _hourInputRef$current, _hourInputRef$current2;
 
       if (!hideTime) hourInputRef === null || hourInputRef === void 0 ? void 0 : (_hourInputRef$current = hourInputRef.current) === null || _hourInputRef$current === void 0 ? void 0 : (_hourInputRef$current2 = _hourInputRef$current.focus) === null || _hourInputRef$current2 === void 0 ? void 0 : _hourInputRef$current2.call(_hourInputRef$current);else if (withAnyRightController) {
-        var _clearButtonRef$curre, _clearButtonRef$curre2, _pickerButtonRef$curr3, _pickerButtonRef$curr4;
+        var _clearButtonRef$curre3, _clearButtonRef$curre4, _pickerButtonRef$curr3, _pickerButtonRef$curr4;
 
-        if (withClearBtn) (_clearButtonRef$curre = clearButtonRef.current) === null || _clearButtonRef$curre === void 0 ? void 0 : (_clearButtonRef$curre2 = _clearButtonRef$curre.focus) === null || _clearButtonRef$curre2 === void 0 ? void 0 : _clearButtonRef$curre2.call(_clearButtonRef$curre);else if (withAnyPicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr3 = pickerButtonRef.current) === null || _pickerButtonRef$curr3 === void 0 ? void 0 : (_pickerButtonRef$curr4 = _pickerButtonRef$curr3.focus) === null || _pickerButtonRef$curr4 === void 0 ? void 0 : _pickerButtonRef$curr4.call(_pickerButtonRef$curr3); // pending approval from Seda, check which one should be focused first...
+        if (withClearBtn) (_clearButtonRef$curre3 = clearButtonRef.current) === null || _clearButtonRef$curre3 === void 0 ? void 0 : (_clearButtonRef$curre4 = _clearButtonRef$curre3.focus) === null || _clearButtonRef$curre4 === void 0 ? void 0 : _clearButtonRef$curre4.call(_clearButtonRef$curre3);else if (withAnyPicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr3 = pickerButtonRef.current) === null || _pickerButtonRef$curr3 === void 0 ? void 0 : (_pickerButtonRef$curr4 = _pickerButtonRef$curr3.focus) === null || _pickerButtonRef$curr4 === void 0 ? void 0 : _pickerButtonRef$curr4.call(_pickerButtonRef$curr3); // pending approval from Seda, check which one should be focused first...
       }
     }
   }, [handleChangeYear, hideTime, hourInputRef, withAnyRightController, withAnyPicker, pickerButtonRef, withClearBtn, clearButtonRef]);
   const onYearKeyDown = useCallback(e => {
+    var _lastSegmentRef$curre5, _lastSegmentRef$curre6;
+
     const {
-      key
+      key,
+      ctrlKey,
+      metaKey
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    const yearStringConvertedToInteger = Number.parseInt(year, 10);
+    if (homeEndArrowUpDownSpaceKeys.includes(key)) e.preventDefault();
+    if (homeEndArrowUpDownSpaceKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
 
     if (key === 'ArrowUp' || key === 'ArrowDown') {
-      const yearStringConvertedToInteger = Number.parseInt(year, 10);
       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]);
+
+    if (!Number.isNaN(yearStringConvertedToInteger) && key === ' ') {
+      const newYear = prependStringWithPlaceHolders("".concat(yearStringConvertedToInteger), 4);
+      handleChangeYear(newYear, e); // auto-advance functionality:
+
+      if (newYear.length === 4) {
+        var _hourInputRef$current3, _hourInputRef$current4;
+
+        if (!hideTime) hourInputRef === null || hourInputRef === void 0 ? void 0 : (_hourInputRef$current3 = hourInputRef.current) === null || _hourInputRef$current3 === void 0 ? void 0 : (_hourInputRef$current4 = _hourInputRef$current3.focus) === null || _hourInputRef$current4 === void 0 ? void 0 : _hourInputRef$current4.call(_hourInputRef$current3);else if (withAnyRightController) {
+          var _clearButtonRef$curre5, _clearButtonRef$curre6, _pickerButtonRef$curr5, _pickerButtonRef$curr6;
+
+          if (withClearBtn) (_clearButtonRef$curre5 = clearButtonRef.current) === null || _clearButtonRef$curre5 === void 0 ? void 0 : (_clearButtonRef$curre6 = _clearButtonRef$curre5.focus) === null || _clearButtonRef$curre6 === void 0 ? void 0 : _clearButtonRef$curre6.call(_clearButtonRef$curre5);else if (withAnyPicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr5 = pickerButtonRef.current) === null || _pickerButtonRef$curr5 === void 0 ? void 0 : (_pickerButtonRef$curr6 = _pickerButtonRef$curr5.focus) === null || _pickerButtonRef$curr6 === void 0 ? void 0 : _pickerButtonRef$curr6.call(_pickerButtonRef$curr5); // pending approval from Seda, check which one should be focused first...
+        }
+      }
+    } // regressive backspace functionality
+
+
+    if (key === 'Backspace' && (year === null || year === void 0 ? void 0 : year.length) === 0) {
+      var _dayInputRef$current4, _dayInputRef$current5;
+
+      dayInputRef === null || dayInputRef === void 0 ? void 0 : (_dayInputRef$current4 = dayInputRef.current) === null || _dayInputRef$current4 === void 0 ? void 0 : (_dayInputRef$current5 = _dayInputRef$current4.focus) === null || _dayInputRef$current5 === void 0 ? void 0 : _dayInputRef$current5.call(_dayInputRef$current4);
+    } // focus last fragment on fill with now
+
+
+    if ((ctrlKey || metaKey) && key === ';') lastSegmentRef === null || lastSegmentRef === void 0 ? void 0 : (_lastSegmentRef$curre5 = lastSegmentRef.current) === null || _lastSegmentRef$curre5 === void 0 ? void 0 : (_lastSegmentRef$curre6 = _lastSegmentRef$curre5.focus) === null || _lastSegmentRef$curre6 === void 0 ? void 0 : _lastSegmentRef$curre6.call(_lastSegmentRef$curre5);
+  }, [year, onHomeKeyDown, onEndKeyDown, lastSegmentRef, handleChangeYear, hideTime, hourInputRef, withAnyRightController, withClearBtn, clearButtonRef, withAnyPicker, pickerButtonRef, dayInputRef]);
   const onYearBlur = useCallback(e => {
     var _e$target6;
 
@@ -249,6 +299,8 @@ const useDateInputs = () => {
     month,
     day,
     year,
+    autoFocusMonthInput,
+    disabled,
     onMonthFocus,
     onMonthChange,
     onDayFocus,
@@ -261,7 +313,7 @@ const useDateInputs = () => {
     onMonthKeyDown,
     onDayKeyDown,
     onYearKeyDown
-  }), [month, day, year, onMonthFocus, onMonthChange, onDayFocus, onDayChange, onYearFocus, onYearChange, onMonthBlur, onDayBlur, onYearBlur, onMonthKeyDown, onDayKeyDown, onYearKeyDown]);
+  }), [month, day, year, autoFocusMonthInput, disabled, 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/Calendar.js

@@ -8,9 +8,10 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 var _CalendarIconTrigger, _CalendarWrapper;
 
-const WrappedCalendarContext = ({
-  children
-}) => {
+const WrappedCalendarContext = _ref => {
+  let {
+    children
+  } = _ref;
   const ctx = useConfigCalendarCTX();
   return /*#__PURE__*/_jsx(CalendarContext.Provider, {
     value: ctx

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

@@ -3,11 +3,17 @@ 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(_ref => {
+  let {
+    weekRowsNum
+  } = _ref;
+  return /*#__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 };

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

@@ -1,26 +1,32 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { CalendarBody } from './CalendarBody.js';
 import { CalendarHead } from './CalendarHead.js';
 import { CalendarFooter } from './CalendarFooter.js';
 import { CalendarContext } from './CalendarContext.js';
-import { StyledSpacingResetter, StyledCalendarWrapper } from './Styleds.js';
+import { StyledShadowWrapper, StyledCalendarWrapper } from './Styleds.js';
 
-var _StyledCalendarWrappe;
-// <StyledSpacingResetter className={className}>
+var _CalendarHead, _CalendarFooter;
+// <StyledShadowWrapper className={className}>
 // is required for styled-components, without this we can't styled(CalendarContent)...
 // https://stackoverflow.com/questions/52542817/styled-components-not-applying-style-to-custom-functional-react-component
 
-const CalendarContent = ({
-  className = ''
-}) => {
+const CalendarContent = _ref => {
+  let {
+    className = ''
+  } = _ref;
   const {
-    isControllerOnly
+    isControllerOnly,
+    daysMatrixByWeekday
   } = useContext(CalendarContext);
-  return /*#__PURE__*/_jsx(StyledSpacingResetter, {
+  return /*#__PURE__*/_jsx(StyledShadowWrapper, {
     className: className,
-    isControllerOnly: isControllerOnly
-  }, void 0, _StyledCalendarWrappe || (_StyledCalendarWrappe = /*#__PURE__*/_jsx(StyledCalendarWrapper, {}, void 0, /*#__PURE__*/_jsx(CalendarHead, {}), /*#__PURE__*/_jsx(CalendarBody, {}), /*#__PURE__*/_jsx(CalendarFooter, {}))));
+    isControllerOnly: isControllerOnly,
+    "data-testid": ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR
+  }, void 0, /*#__PURE__*/_jsx(StyledCalendarWrapper, {}, void 0, _CalendarHead || (_CalendarHead = /*#__PURE__*/_jsx(CalendarHead, {})), /*#__PURE__*/_jsx(CalendarBody, {
+    weekRowsNum: daysMatrixByWeekday.length
+  }), _CalendarFooter || (_CalendarFooter = /*#__PURE__*/_jsx(CalendarFooter, {}))));
 };
 
 export { CalendarContent };

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

@@ -4,7 +4,9 @@ import { createRef, createContext } from 'react';
 const noop = () => {};
 
 const defaultCalendarContext = {
+  ariaCurrentValueForInputs: '',
   showCalendar: false,
+  disabled: false,
   setShowCalendar: noop,
   closeCalendar: noop,
   setPopperElement: noop,
@@ -21,6 +23,9 @@ const defaultCalendarContext = {
   currentMonth: undefined,
   currentYear: undefined,
   daysArray: [],
+  invisibleFirstDay: undefined,
+  daysMatrixByWeekday: [],
+  invisibleLastDay: undefined,
   focusedDay: undefined,
   tryToFocusCurrentlyDataIsFocusedDay: noop,
   resetFocusedDayToStartDate: noop,
@@ -38,6 +43,7 @@ const defaultCalendarContext = {
   handlePickerIconKeyDown: noop,
   isControllerOnly: false,
   isWithTimeWheelToo: true,
+  autoFocusPrevMonthArrow: false,
   onPrevYearFocus: noop,
   onPrevMonthFocus: noop,
   onNextMonthFocus: noop,

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

@@ -1,17 +1,41 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import React from 'react';
 import { Day } from './Day.js';
-import { StyledMonthDaysUList } from './Styleds.js';
-import { jsx } from 'react/jsx-runtime';
+import { StyledWeekDaysListWrapper } from './Styleds.js';
+import { jsxs } from 'react/jsx-runtime';
 
-const CalendarDaysList = /*#__PURE__*/React.memo(({
-  daysArray,
-  innerRef
-}) => /*#__PURE__*/jsx("div", {
-  ref: innerRef,
-  children: /*#__PURE__*/_jsx(StyledMonthDaysUList, {}, void 0, daysArray.map(metaDay => /*#__PURE__*/_jsx(Day, {
-    metaDay: metaDay
-  }, `ds-calendar-${metaDay.day.toString()}`)))
-}));
+const CalendarDaysList = /*#__PURE__*/React.memo(_ref => {
+  let {
+    invisibleFirstDay,
+    daysMatrixByWeekday,
+    invisibleLastDay,
+    innerRef
+  } = _ref;
+  return /*#__PURE__*/jsxs("div", {
+    ref: innerRef,
+    role: "rowgroup",
+    children: [/*#__PURE__*/_jsx(Day, {
+      metaDay: invisibleFirstDay,
+      isInvisible: true
+    }, "ds-calendar-".concat(invisibleFirstDay.day.toString())), daysMatrixByWeekday.map((week, i) => /*#__PURE__*/_jsx(StyledWeekDaysListWrapper, {
+      role: "row",
+      "aria-rowindex": i + 1,
+      cols: ['32px', '32px', '32px', '32px', '32px', '32px', '32px'],
+      rows: ['28px'],
+      py: "xxxs",
+      px: "2px",
+      justifyContent: "space-between",
+      alignItems: "center"
+    }, "ds-calendar-week-".concat(week[0].day.toString(), "-").concat(week[6].day.toString()), week.map((metaDay, z) => /*#__PURE__*/_jsx(Day, {
+      metaDay: metaDay,
+      colIndex: z + 1
+    }, "ds-calendar-".concat(metaDay.day.toString()))))), /*#__PURE__*/_jsx(Day, {
+      metaDay: invisibleLastDay,
+      isInvisible: true
+    }, "ds-calendar-".concat(invisibleLastDay.day.toString()))]
+  });
+});
 
 export { CalendarDaysList };

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

@@ -11,7 +11,9 @@ const CalendarFooter = () => {
     },
     isWithTimeWheelToo
   } = useContext(ControlledDateTimePickerContext);
-  if (pickerFooterMsg !== undefined && !isWithTimeWheelToo && hasError) return /*#__PURE__*/_jsx(CalendarFooterMessage, {}, void 0, pickerFooterMsg);
+  if (pickerFooterMsg !== undefined && !isWithTimeWheelToo && hasError) return /*#__PURE__*/_jsx(CalendarFooterMessage, {
+    role: "alert"
+  }, void 0, pickerFooterMsg);
   return null;
 };
 

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

@@ -1,9 +1,8 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useMemo, useContext } from 'react';
-import ChevronDoubleLeft from '@elliemae/ds-icons/ChevronDoubleLeft';
-import ChevronLeft from '@elliemae/ds-icons/ChevronLeft';
-import ChevronRight from '@elliemae/ds-icons/ChevronRight';
-import ChevronDoubleRight from '@elliemae/ds-icons/ChevronDoubleRight';
+import { BUTTON_SIZES } from '@elliemae/ds-button';
+import { ChevronDoubleLeft, ChevronLeft, ChevronRight, ChevronDoubleRight } from '@elliemae/ds-icons';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { getMonthNameByMonthNumber } from '../../../utils/dateHelpers.js';
 import { StyledHeader, StyledHeaderButton } from './Styleds.js';
 import { CalendarContext } from './CalendarContext.js';
@@ -15,8 +14,8 @@ const useGetFormattedCurrentDate = () => {
     currentMonth,
     currentYear
   } = useContext(CalendarContext);
-  const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';
-  return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);
+  const monthString = currentMonth >= 0 && currentMonth <= 11 ? "".concat(getMonthNameByMonthNumber(currentMonth), " ") : '';
+  return useMemo(() => "".concat(monthString).concat(currentYear), [monthString, currentYear]);
 };
 
 const CalendarHead = () => {
@@ -37,58 +36,62 @@ const CalendarHead = () => {
     onPrevYearFocus,
     onPrevMonthFocus,
     onNextMonthFocus,
-    onNextYearFocus
+    onNextYearFocus,
+    isControllerOnly,
+    autoFocusPrevMonthArrow
   } = useContext(CalendarContext);
   return /*#__PURE__*/_jsx(StyledHeader, {}, void 0, /*#__PURE__*/_jsx(StyledHeaderButton, {
     "aria-label": "previous year",
-    buttonType: "text",
-    leftIcon: _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx(ChevronDoubleLeft, {
-      height: 14,
-      width: 14,
-      fill: "#25292f"
-    })),
-    size: "m",
+    buttonType: "raw",
+    size: BUTTON_SIZES.M,
     onClick: handlePrevYear,
     innerRef: prevYearBtnRef,
     onKeyDown: handlePrevYearKeyDown,
-    onFocus: onPrevYearFocus
-  }), /*#__PURE__*/_jsx(StyledHeaderButton, {
+    onFocus: onPrevYearFocus,
+    tabIndex: isControllerOnly ? -1 : 1,
+    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR
+  }, void 0, _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx(ChevronDoubleLeft, {
+    height: 14,
+    width: 14,
+    fill: "#25292f"
+  }))), /*#__PURE__*/_jsx(StyledHeaderButton, {
+    autoFocus: autoFocusPrevMonthArrow,
     "aria-label": "previous month",
-    buttonType: "text",
-    leftIcon: _ChevronLeft || (_ChevronLeft = /*#__PURE__*/_jsx(ChevronLeft, {
-      fill: "#25292f"
-    })),
-    size: "m",
+    buttonType: "raw",
+    size: BUTTON_SIZES.M,
     onClick: handlePrevMonth,
     innerRef: prevMonthBtnRef,
     onKeyDown: handlePrevMonthKeyDown,
-    onFocus: onPrevMonthFocus // this is a tabstop for when the calendar is open
+    onFocus: onPrevMonthFocus,
+    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH // this is a tabstop for when the calendar is open
 
-  }), /*#__PURE__*/_jsx("h3", {}, void 0, currentFormatedDate), /*#__PURE__*/_jsx(StyledHeaderButton, {
+  }, void 0, _ChevronLeft || (_ChevronLeft = /*#__PURE__*/_jsx(ChevronLeft, {
+    fill: "#25292f"
+  }))), /*#__PURE__*/_jsx("h3", {}, void 0, currentFormatedDate), /*#__PURE__*/_jsx(StyledHeaderButton, {
     "aria-label": "next month",
-    buttonType: "text",
-    leftIcon: _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx(ChevronRight, {
-      fill: "#25292f"
-    })),
-    size: "m",
+    buttonType: "raw",
+    size: BUTTON_SIZES.M,
     onClick: handleNextMonth,
     innerRef: nextMonthBtnRef,
     onKeyDown: handleNextMonthKeyDown,
-    onFocus: onNextMonthFocus
-  }), /*#__PURE__*/_jsx(StyledHeaderButton, {
+    onFocus: onNextMonthFocus,
+    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH
+  }, void 0, _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx(ChevronRight, {
+    fill: "#25292f"
+  }))), /*#__PURE__*/_jsx(StyledHeaderButton, {
     "aria-label": "next year",
-    buttonType: "text",
-    leftIcon: _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx(ChevronDoubleRight, {
-      height: 14,
-      width: 14,
-      fill: "#25292f"
-    })),
-    size: "m",
+    buttonType: "raw",
+    size: BUTTON_SIZES.M,
     onClick: handleNextYear,
     innerRef: nextYearBtnRef,
     onKeyDown: handleNextYearKeyDown,
-    onFocus: onNextYearFocus
-  }));
+    onFocus: onNextYearFocus,
+    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR
+  }, void 0, _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx(ChevronDoubleRight, {
+    height: 14,
+    width: 14,
+    fill: "#25292f"
+  }))));
 };
 
 export { CalendarHead };