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

package/cjs/controlled-date-range-picker/parts/ControlledDateRangeContent.js

@@ -19,14 +19,18 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var _ControlledDateRangeF, _ControlledDateRangeT, _ControlledDateRangeC;
 const StyledWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-e4pfvj-0"
-})(["display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto;gap:0px 8px;grid-auto-flow:row;grid-template-areas:'. .';justify-content:center;align-items:center;"]);
+})(["display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto;", " grid-auto-flow:row;grid-template-areas:'. .';justify-content:center;align-items:center;"], ({
+  isControllerOnly
+}) => isControllerOnly ? undefined : 'gap: 0px 8px;');
 const ControlledDateRangeContent = () => {
   const {
     withIcon,
     withInputs,
     isControllerOnly
   } = React.useContext(ControlledDateRangePickerCTX.ControlledDateRangePickerContext);
-  return /*#__PURE__*/_jsx__default["default"](StyledWrapper, {}, void 0, withInputs ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  return /*#__PURE__*/_jsx__default["default"](StyledWrapper, {
+    isControllerOnly: isControllerOnly
+  }, void 0, withInputs ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [_ControlledDateRangeF || (_ControlledDateRangeF = /*#__PURE__*/_jsx__default["default"](ControlledDateRangeFromDate.ControlledDateRangeFromDate, {})), _ControlledDateRangeT || (_ControlledDateRangeT = /*#__PURE__*/_jsx__default["default"](ControlledDateRangeToDate.ControlledDateRangeToDate, {}))]
   }) : null, withIcon || isControllerOnly ? _ControlledDateRangeC || (_ControlledDateRangeC = /*#__PURE__*/_jsx__default["default"](ControlledDateRangeCalendar.ControlledDateRangeCalendar, {})) : null);
 };

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

@@ -19,16 +19,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/cjs/controlled-date-time-picker/config/useControlledDateTimePicker.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var useGetPropsWithDefault = require('./useGetPropsWithDefault.js');
+var useGetDestructuredValues = require('./useGetDestructuredValues.js');
 var ControlledDateTimePickerTypes = require('../ControlledDateTimePickerTypes.js');
 var useValidateProps = require('./useValidateProps.js');
 var dateHelpers = require('../utils/dateHelpers.js');
@@ -65,7 +66,10 @@ const useControlledDateTimePicker = props => {
     onYearChange: appOnYearChange,
     onHourChange: appOnHourChange,
     onMinuteChange: appOnMinuteChange,
-    onMeridiemChange: appOnMeridiemChange
+    onMeridiemChange: appOnMeridiemChange,
+    date: appDate,
+    time: appTime,
+    dateTime: appDateTime
   } = propsWithDefaults;
   const dateStringFromProps = React.useMemo(() => propsWithDefaults.dateTime && propsWithDefaults.dateTime !== '' ? stringHelpers.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
@@ -103,6 +107,33 @@ const useControlledDateTimePicker = props => {
   const shouldPreserveClearableSpace = isClearable && withAnyInputs;
   const withAnyRightController = withAnyPicker || withClearBtn || shouldPreserveClearableSpace;
   const [latestInteractionRegion, setLatestInteractionRegion] = React.useState('');
+  const {
+    month,
+    day,
+    year,
+    monthNum,
+    dayNum,
+    yearNum,
+    announcedMonth,
+    announcedDay,
+    announcedYear,
+    announcedDateValues,
+    hours,
+    minutes,
+    meridiem,
+    hoursNum,
+    minutesNum,
+    announcedHours,
+    announcedMinutes,
+    announcedMeridiem,
+    announcedTimeValues
+  } = useGetDestructuredValues.useGetDestructuredValues({
+    date: appDate,
+    time: appTime,
+    dateTime: appDateTime,
+    isDateTimeSelector
+  });
+  const ariaCurrentValueForInputs = `current values: ${isWithDateInputs ? `${announcedDateValues}` : ''}${isDateTimeSelector ? ', ' : ''}${isWithTimeInputs ? `${announcedTimeValues}` : ''}`;
   const getDateMetaInfo = React.useCallback((newDateString = null, metaInfo = {}) => {
     const finalDateString = newDateString || tempDateString;
     return _objectSpread(_objectSpread({}, metaInfo), dateHelpers.getValidationDateStringMetaInfo(finalDateString, getIsOutOfRangeDay, getIsDisabledDay));
@@ -257,8 +288,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/cjs/controlled-date-time-picker/config/useGetDestructuredValues.js

@@ -0,0 +1,146 @@
+'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 = ({
+  date,
+  dateTime,
+  isDateTimeSelector
+}) => {
+  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(`${yearNum}`, 4, '0') : 'empty year';
+  const announcedDateValues = `${announcedMonth}, ${announcedDay}, ${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 = ({
+  time,
+  dateTime,
+  isDateTimeSelector
+}) => {
+  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 ? `${hoursNum}` : 'empty hours'; // 01 -> 1 ~ 09 -> 9 || 1_ -> 1 ~ 9_ -> 9 || empty...
+
+  const announcedMinutes = minutesNum !== -1 ? `${minutesNum}` : 'empty minutes';
+  const announcedMeridiem = // eslint-disable-next-line no-nested-ternary
+  meridiem === 'PM' ? `post meridiem` : meridiem === 'AM' ? 'ante meridiem' : 'empty meriediem';
+  const announcedTimeValues = `${announcedHours}, ${announcedMinutes}, ${announcedMeridiem}`;
+  return React.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 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/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

@@ -5,7 +5,8 @@ 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 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');
@@ -15,7 +16,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var CloseMedium__default = /*#__PURE__*/_interopDefaultLegacy(CloseMedium);
 
-var _CloseMedium;
 const ClearButton = () => {
   const {
     onClearClick,
@@ -27,16 +27,17 @@ const ClearButton = () => {
   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",
-    variant: DSButton.BUTTON_VARIANT.DEFAULT,
+    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"](CloseMedium__default["default"], {
+    color: dsIcon.DSIconColors.PRIMARY
+  }));
 };
 
 exports.ClearButton = ClearButton;

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

@@ -26,7 +26,8 @@ const DDInput = /*#__PURE__*/React__default["default"].memo(({
   onKeyDown,
   value,
   contextRef,
-  placeholder
+  placeholder,
+  ariaCurrentValueForInputs
 }) => {
   const validateOnChange = React.useCallback(e => {
     var _e$target;
@@ -46,7 +47,7 @@ const DDInput = /*#__PURE__*/React__default["default"].memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "day input field",
+    "aria-label": `day input field, ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY
   });
 });

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

@@ -41,7 +41,8 @@ const DateInputs = () => {
   const {
     monthInputRef,
     dayInputRef,
-    yearInputRef
+    yearInputRef,
+    ariaCurrentValueForInputs
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: [config.fixedValues.smallInputWidth, config.fixedValues.separatorWidth, config.fixedValues.smallInputWidth, config.fixedValues.separatorWidth, config.fixedValues.largeInputWidth]
@@ -53,7 +54,8 @@ const DateInputs = () => {
     value: month,
     contextRef: monthInputRef,
     autoFocusMonthInput: autoFocusMonthInput,
-    placeholder: "MM"
+    placeholder: "MM",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs
   })), _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, {
@@ -63,7 +65,8 @@ const DateInputs = () => {
     onKeyDown: onDayKeyDown,
     value: day,
     contextRef: dayInputRef,
-    placeholder: "DD"
+    placeholder: "DD",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs
   })), _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, {
@@ -73,7 +76,8 @@ const DateInputs = () => {
     onKeyDown: onYearKeyDown,
     value: year,
     contextRef: yearInputRef,
-    placeholder: "YYYY"
+    placeholder: "YYYY",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs
   })));
 };
 

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

@@ -27,7 +27,8 @@ const MMInput = /*#__PURE__*/React__default["default"].memo(({
   value,
   placeholder,
   contextRef,
-  autoFocusMonthInput
+  autoFocusMonthInput,
+  ariaCurrentValueForInputs
 }) => {
   const validateOnChange = React.useCallback(e => {
     var _e$target;
@@ -48,7 +49,7 @@ const MMInput = /*#__PURE__*/React__default["default"].memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "month input field",
+    "aria-label": `month input field, ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH
   });
 });

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

@@ -26,7 +26,8 @@ const YYYYInput = /*#__PURE__*/React__default["default"].memo(({
   onKeyDown,
   value,
   placeholder,
-  contextRef
+  contextRef,
+  ariaCurrentValueForInputs
 }) => {
   const validateOnChange = React.useCallback(e => {
     var _e$target;
@@ -46,7 +47,7 @@ const YYYYInput = /*#__PURE__*/React__default["default"].memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "year input field",
+    "aria-label": `year input field, ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR
   });
 });

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

@@ -15,30 +15,18 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 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; }
-// 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 = React.useMemo(() => hideTime ? date : stringHelpers.dateTimeToDate(dateTime), [date, dateTime, hideTime]);
-  const deconstructedValues = React.useMemo(() => stringHelpers.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,
@@ -54,15 +42,6 @@ const useDateInputs = () => {
     withAnyRightController,
     autoFocusMonthInput
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  const {
-    month,
-    day,
-    year
-  } = useGetDestructuredDateValues({
-    date,
-    dateTime,
-    hideTime
-  });
   const onHomeKeyDown = React.useCallback(() => {
     var _monthInputRef$curren, _monthInputRef$curren2;
 
@@ -278,4 +257,3 @@ const useDateInputs = () => {
 };
 
 exports.useDateInputs = useDateInputs;
-exports.useGetDestructuredDateValues = useGetDestructuredDateValues;

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

@@ -7,7 +7,6 @@ var React = require('react');
 var CalendarMonthDays = require('./CalendarMonthDays.js');
 var CalendarWeekDays = require('./CalendarWeekDays.js');
 var Styleds = require('./Styleds.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,8 +14,12 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _CalendarWeekDays, _StyledBody;
-const CalendarBody = /*#__PURE__*/React__default["default"].memo(() => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-  children: [_CalendarWeekDays || (_CalendarWeekDays = /*#__PURE__*/_jsx__default["default"](CalendarWeekDays.CalendarWeekDays, {})), _StyledBody || (_StyledBody = /*#__PURE__*/_jsx__default["default"](Styleds.StyledBody, {}, void 0, /*#__PURE__*/_jsx__default["default"](CalendarMonthDays.CalendarMonthDays, {})))]
-}));
+const CalendarBody = /*#__PURE__*/React__default["default"].memo(({
+  weekRowsNum
+}) => /*#__PURE__*/_jsx__default["default"]("span", {
+  role: "grid",
+  "aria-colcount": 7,
+  "aria-rowcount": weekRowsNum
+}, void 0, _CalendarWeekDays || (_CalendarWeekDays = /*#__PURE__*/_jsx__default["default"](CalendarWeekDays.CalendarWeekDays, {})), _StyledBody || (_StyledBody = /*#__PURE__*/_jsx__default["default"](Styleds.StyledBody, {}, void 0, /*#__PURE__*/_jsx__default["default"](CalendarMonthDays.CalendarMonthDays, {})))));
 
 exports.CalendarBody = CalendarBody;

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
+var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
 var CalendarBody = require('./CalendarBody.js');
 var CalendarHead = require('./CalendarHead.js');
 var CalendarFooter = require('./CalendarFooter.js');
@@ -14,8 +15,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-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
 
@@ -23,12 +24,16 @@ const CalendarContent = ({
   className = ''
 }) => {
   const {
-    isControllerOnly
+    isControllerOnly,
+    daysMatrixByWeekday
   } = React.useContext(CalendarContext.CalendarContext);
-  return /*#__PURE__*/_jsx__default["default"](Styleds.StyledSpacingResetter, {
+  return /*#__PURE__*/_jsx__default["default"](Styleds.StyledShadowWrapper, {
     className: className,
-    isControllerOnly: isControllerOnly
-  }, void 0, _StyledCalendarWrappe || (_StyledCalendarWrappe = /*#__PURE__*/_jsx__default["default"](Styleds.StyledCalendarWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](CalendarHead.CalendarHead, {}), /*#__PURE__*/_jsx__default["default"](CalendarBody.CalendarBody, {}), /*#__PURE__*/_jsx__default["default"](CalendarFooter.CalendarFooter, {}))));
+    isControllerOnly: isControllerOnly,
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledCalendarWrapper, {}, void 0, _CalendarHead || (_CalendarHead = /*#__PURE__*/_jsx__default["default"](CalendarHead.CalendarHead, {})), /*#__PURE__*/_jsx__default["default"](CalendarBody.CalendarBody, {
+    weekRowsNum: daysMatrixByWeekday.length
+  }), _CalendarFooter || (_CalendarFooter = /*#__PURE__*/_jsx__default["default"](CalendarFooter.CalendarFooter, {}))));
 };
 
 exports.CalendarContent = CalendarContent;

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

@@ -8,6 +8,7 @@ var React = require('react');
 const noop = () => {};
 
 const defaultCalendarContext = {
+  ariaCurrentValueForInputs: '',
   showCalendar: false,
   setShowCalendar: noop,
   closeCalendar: noop,
@@ -25,6 +26,9 @@ const defaultCalendarContext = {
   currentMonth: undefined,
   currentYear: undefined,
   daysArray: [],
+  invisibleFirstDay: undefined,
+  daysMatrixByWeekday: [],
+  invisibleLastDay: undefined,
   focusedDay: undefined,
   tryToFocusCurrentlyDataIsFocusedDay: noop,
   resetFocusedDayToStartDate: noop,

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

@@ -14,13 +14,32 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const CalendarDaysList = /*#__PURE__*/React__default["default"].memo(({
-  daysArray,
+  invisibleFirstDay,
+  daysMatrixByWeekday,
+  invisibleLastDay,
   innerRef
-}) => /*#__PURE__*/jsxRuntime.jsx("div", {
+}) => /*#__PURE__*/jsxRuntime.jsxs("div", {
   ref: innerRef,
-  children: /*#__PURE__*/_jsx__default["default"](Styleds.StyledMonthDaysUList, {}, void 0, daysArray.map(metaDay => /*#__PURE__*/_jsx__default["default"](Day.Day, {
-    metaDay: metaDay
-  }, `ds-calendar-${metaDay.day.toString()}`)))
+  role: "rowgroup",
+  children: [/*#__PURE__*/_jsx__default["default"](Day.Day, {
+    metaDay: invisibleFirstDay,
+    isInvisible: true
+  }, `ds-calendar-${invisibleFirstDay.day.toString()}`), daysMatrixByWeekday.map((week, i) => /*#__PURE__*/_jsx__default["default"](Styleds.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-${week[0].day.toString()}-${week[6].day.toString()}`, week.map((metaDay, z) => /*#__PURE__*/_jsx__default["default"](Day.Day, {
+    metaDay: metaDay,
+    colIndex: z + 1
+  }, `ds-calendar-${metaDay.day.toString()}`)))), /*#__PURE__*/_jsx__default["default"](Day.Day, {
+    metaDay: invisibleLastDay,
+    isInvisible: true
+  }, `ds-calendar-${invisibleLastDay.day.toString()}`)]
 }));
 
 exports.CalendarDaysList = CalendarDaysList;