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

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

@@ -0,0 +1,149 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var stringHelpers = require('../utils/stringHelpers.js');
+var numberHelpers = require('../utils/numberHelpers.js');
+var constants = require('../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 ? stringHelpers.dateTimeToDate(dateTime) : date;
+  const deconstructedValues = stringHelpers.deconstructValuesFromDateString(dateStringFromProps);
+  const {
+    month,
+    day,
+    year
+  } = deconstructedValues;
+  const monthNum = numberHelpers.convertToPositiveNumberIfPossible(month);
+  const dayNum = numberHelpers.convertToPositiveNumberIfPossible(day);
+  const yearNum = numberHelpers.convertToPositiveNumberIfPossible(year);
+  const announcedMonth = monthNum !== -1 ? constants.monthNames[monthNum - 1] : 'empty month';
+  const announcedDay = dayNum !== -1 ? constants.announcableCardinalDays[dayNum] : 'empty day';
+  const announcedYear = yearNum !== -1 ? stringHelpers.fillStringWithPlaceHolders("".concat(yearNum), 4, '0') : 'empty year';
+  const announcedDateValues = "".concat(announcedMonth, ", ").concat(announcedDay, ", ").concat(announcedYear);
+  return React.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 ? stringHelpers.dateTimeToTime(dateTime) : time;
+  const deconstructedValues = stringHelpers.deconstructTimeValues(timeStringFromProps);
+  const {
+    hours,
+    minutes,
+    meridiem
+  } = deconstructedValues;
+  const hoursNum = numberHelpers.convertToPositiveNumberIfPossible(hours);
+  const minutesNum = numberHelpers.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 React.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 React.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]);
+};
+
+exports.useGetDestructuredDateValues = useGetDestructuredDateValues;
+exports.useGetDestructuredTimeValues = useGetDestructuredTimeValues;
+exports.useGetDestructuredValues = useGetDestructuredValues;

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

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

package/cjs/controlled-date-time-picker/index.js

@@ -18,7 +18,7 @@ exports.ControlledDateTimePickerDatatestid = ControlledDateTimePickerDatatestid.
 exports.CONTROLLED_DATE_TIME_PICKER_TYPES = ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES;
 exports.deconstructValuesFromDateString = stringHelpers.deconstructValuesFromDateString;
 exports.prependStringWithPlaceHolders = stringHelpers.prependStringWithPlaceHolders;
-exports.getValidatioDateTimeStringMetaInfo = dateTimeHelpers.getValidatioDateTimeStringMetaInfo;
+exports.getValidationDateTimeStringMetaInfo = dateTimeHelpers.getValidationDateTimeStringMetaInfo;
 exports.getDateStringFromDay = dateHelpers.getDateStringFromDay;
 exports.getDateValuesFromDate = dateHelpers.getDateValuesFromDate;
 exports.getDayFromDateString = dateHelpers.getDayFromDateString;

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

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

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

@@ -11,15 +11,60 @@ const useClearButton = () => {
     handleClearAll,
     clearButtonRef,
     withAnyPicker,
-    withClearBtn
+    withClearBtn,
+    withAnyInputs,
+    isWithTimeInputs,
+    isWithDateInputs,
+    isTimeSelector,
+    hourInputRef,
+    monthInputRef,
+    pickerButtonRef,
+    meridiemInputRef,
+    yearInputRef,
+    setLatestInteractionRegion
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  const onClearClick = React.useCallback(e => handleClearAll(e), [handleClearAll]);
+  const focusFirstRegion = React.useCallback(() => {
+    var _hourInputRef$current, _hourInputRef$current2, _monthInputRef$curren, _monthInputRef$curren2;
+
+    if (withAnyInputs) if (isTimeSelector) 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 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);
+  }, [withAnyInputs, isTimeSelector, hourInputRef, monthInputRef]);
+  const onClearClick = React.useCallback(e => {
+    handleClearAll(e);
+    setLatestInteractionRegion('clear-btn');
+    focusFirstRegion();
+  }, [focusFirstRegion, handleClearAll, setLatestInteractionRegion]);
+  const onHomeKeyDown = React.useCallback(() => {
+    focusFirstRegion();
+  }, [focusFirstRegion]);
+  const onEndKeyDown = React.useCallback(() => {
+    var _pickerButtonRef$curr, _pickerButtonRef$curr2;
+
+    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);
+  }, [withAnyPicker, pickerButtonRef]);
+  const onClearButtonKeyDown = React.useCallback(e => {
+    const {
+      key
+    } = e;
+    const preventDefaultKeys = ['Home', 'End'];
+    const stopPropagationKeys = ['Home', 'End'];
+    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    if (key === 'Home') onHomeKeyDown();
+    if (key === 'End') onEndKeyDown();
+
+    if (key === 'Backspace' && withAnyInputs) {
+      var _meridiemInputRef$cur, _meridiemInputRef$cur2, _yearInputRef$current, _yearInputRef$current2;
+
+      if (isWithTimeInputs) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur = meridiemInputRef.current) === null || _meridiemInputRef$cur === void 0 ? void 0 : (_meridiemInputRef$cur2 = _meridiemInputRef$cur.focus) === null || _meridiemInputRef$cur2 === void 0 ? void 0 : _meridiemInputRef$cur2.call(_meridiemInputRef$cur);else if (isWithDateInputs) yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current = yearInputRef.current) === null || _yearInputRef$current === void 0 ? void 0 : (_yearInputRef$current2 = _yearInputRef$current.focus) === null || _yearInputRef$current2 === void 0 ? void 0 : _yearInputRef$current2.call(_yearInputRef$current);
+    }
+  }, [isWithDateInputs, isWithTimeInputs, meridiemInputRef, onEndKeyDown, onHomeKeyDown, withAnyInputs, yearInputRef]);
   return React.useMemo(() => ({
     onClearClick,
+    onClearButtonKeyDown,
     clearButtonRef,
     withAnyPicker,
     withClearBtn
-  }), [onClearClick, clearButtonRef, withAnyPicker, withClearBtn]);
+  }), [onClearClick, onClearButtonKeyDown, clearButtonRef, withAnyPicker, withClearBtn]);
 };
 
 exports.useClearButton = useClearButton;

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

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

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

@@ -19,15 +19,18 @@ const isInvalidDay = day => {
   return day.length > 2 || day === '00' || !numberOnly || Number.parseInt(day, 10) > 31;
 };
 
-const DDInput = /*#__PURE__*/React__default['default'].memo(({
-  onChange,
-  onBlur,
-  onFocus,
-  onKeyDown,
-  value,
-  contextRef,
-  placeholder
-}) => {
+const DDInput = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    disabled,
+    contextRef,
+    placeholder,
+    ariaCurrentValueForInputs
+  } = _ref;
   const validateOnChange = React.useCallback(e => {
     var _e$target;
 
@@ -46,8 +49,10 @@ const DDInput = /*#__PURE__*/React__default['default'].memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "day input field",
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY
+    "aria-label": "day input field, ".concat(ariaCurrentValueForInputs),
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY,
+    disabled: disabled,
+    "aria-disabled": disabled
   });
 });
 

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

@@ -23,6 +23,7 @@ const DateInputs = () => {
     month,
     day,
     year,
+    autoFocusMonthInput,
     onMonthChange,
     onDayChange,
     onYearChange,
@@ -34,44 +35,53 @@ const DateInputs = () => {
     onYearFocus,
     onMonthKeyDown,
     onDayKeyDown,
-    onYearKeyDown
+    onYearKeyDown,
+    disabled
   } = useDateInputs.useDateInputs(); // we do this here so MMInput,DDInput,YYYYInput can be pure component memoized via React.memo
 
   const {
     monthInputRef,
     dayInputRef,
-    yearInputRef
+    yearInputRef,
+    ariaCurrentValueForInputs
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  return /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: [config.fixedValues.smallInputWidth, config.fixedValues.separatorWidth, config.fixedValues.smallInputWidth, config.fixedValues.separatorWidth, config.fixedValues.largeInputWidth]
-  }, void 0, /*#__PURE__*/_jsx__default['default'](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default['default'](MMInput.MMInput, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default["default"](MMInput.MMInput, {
     onChange: onMonthChange,
     onBlur: onMonthBlur,
     onFocus: onMonthFocus,
     onKeyDown: onMonthKeyDown,
     value: month,
     contextRef: monthInputRef,
-    placeholder: "MM"
-  })), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default['default'](Styleds.StyledSeparator, {
+    autoFocusMonthInput: autoFocusMonthInput,
+    placeholder: "MM",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
+    disabled: disabled
+  })), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](Styleds.StyledSeparator, {
     alignItems: "center"
-  }, void 0, "/")), /*#__PURE__*/_jsx__default['default'](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default['default'](DDInput.DDInput, {
+  }, void 0, "/")), /*#__PURE__*/_jsx__default["default"](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default["default"](DDInput.DDInput, {
     onChange: onDayChange,
     onBlur: onDayBlur,
     onFocus: onDayFocus,
     onKeyDown: onDayKeyDown,
     value: day,
     contextRef: dayInputRef,
-    placeholder: "DD"
-  })), _StyledSeparator2 || (_StyledSeparator2 = /*#__PURE__*/_jsx__default['default'](Styleds.StyledSeparator, {
+    placeholder: "DD",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
+    disabled: disabled
+  })), _StyledSeparator2 || (_StyledSeparator2 = /*#__PURE__*/_jsx__default["default"](Styleds.StyledSeparator, {
     alignItems: "center"
-  }, void 0, "/")), /*#__PURE__*/_jsx__default['default'](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default['default'](YYYYInput.YYYYInput, {
+  }, void 0, "/")), /*#__PURE__*/_jsx__default["default"](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default["default"](YYYYInput.YYYYInput, {
     onChange: onYearChange,
     onBlur: onYearBlur,
     onFocus: onYearFocus,
     onKeyDown: onYearKeyDown,
     value: year,
     contextRef: yearInputRef,
-    placeholder: "YYYY"
+    placeholder: "YYYY",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
+    disabled: disabled
   })));
 };
 

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

@@ -19,15 +19,19 @@ const isInvalidMonth = month => {
   return month.length > 2 || month === '00' || !numberOnly || Number.parseInt(month, 10) > 12;
 };
 
-const MMInput = /*#__PURE__*/React__default['default'].memo(({
-  onChange,
-  onBlur,
-  onFocus,
-  onKeyDown,
-  value,
-  placeholder,
-  contextRef
-}) => {
+const MMInput = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    disabled,
+    placeholder,
+    contextRef,
+    autoFocusMonthInput,
+    ariaCurrentValueForInputs
+  } = _ref;
   const validateOnChange = React.useCallback(e => {
     var _e$target;
 
@@ -39,6 +43,7 @@ const MMInput = /*#__PURE__*/React__default['default'].memo(({
     onChange(e);
   }, [onChange]);
   return /*#__PURE__*/jsxRuntime.jsx(Styleds.Styled2DigitsInput, {
+    autoFocus: autoFocusMonthInput,
     onChange: validateOnChange,
     onBlur: onBlur,
     onFocus: onFocus,
@@ -46,8 +51,10 @@ const MMInput = /*#__PURE__*/React__default['default'].memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "month input field",
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH
+    "aria-label": "month input field, ".concat(ariaCurrentValueForInputs),
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH,
+    disabled: disabled,
+    "aria-disabled": disabled
   });
 });
 

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

@@ -19,15 +19,18 @@ const isInvalidYear = year => {
   return year.length > 4 || !numberOnly || Number.parseInt(year, 10) > 9999;
 };
 
-const YYYYInput = /*#__PURE__*/React__default['default'].memo(({
-  onChange,
-  onBlur,
-  onFocus,
-  onKeyDown,
-  value,
-  placeholder,
-  contextRef
-}) => {
+const YYYYInput = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    disabled,
+    placeholder,
+    contextRef,
+    ariaCurrentValueForInputs
+  } = _ref;
   const validateOnChange = React.useCallback(e => {
     var _e$target;
 
@@ -46,8 +49,10 @@ const YYYYInput = /*#__PURE__*/React__default['default'].memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "year input field",
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR
+    "aria-label": "year input field, ".concat(ariaCurrentValueForInputs),
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR,
+    disabled: disabled,
+    "aria-disabled": disabled
   });
 });