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

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, ".concat(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, ".concat(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;
 
@@ -121,7 +100,7 @@ const useDateInputs = () => {
       const monthInteger = Number.isNaN(monthStringConvertedToInteger) ? 0 : monthStringConvertedToInteger;
       let newMonth;
       if (key === 'ArrowUp') newMonth = monthInteger + 1 <= 12 ? monthInteger + 1 : monthInteger;else newMonth = monthInteger - 1 > 0 ? monthInteger - 1 : 1;
-      newMonth = stringHelpers.prependStringWithPlaceHolders(`${newMonth}`, 2);
+      newMonth = stringHelpers.prependStringWithPlaceHolders("".concat(newMonth), 2);
       handleChangeMonth(newMonth, e);
     }
   }, [onHomeKeyDown, onEndKeyDown, month, handleChangeMonth]);
@@ -180,7 +159,7 @@ const useDateInputs = () => {
       const dayInteger = Number.isNaN(dayStringConvertedToInteger) ? 0 : dayStringConvertedToInteger;
       let newDay;
       if (key === 'ArrowUp') newDay = dayInteger + 1 <= 31 ? dayInteger + 1 : dayInteger;else newDay = dayInteger - 1 > 0 ? dayInteger - 1 : 1;
-      newDay = stringHelpers.prependStringWithPlaceHolders(`${newDay}`, 2);
+      newDay = stringHelpers.prependStringWithPlaceHolders("".concat(newDay), 2);
       handleChangeDay(newDay, e);
     }
   }, [onHomeKeyDown, onEndKeyDown, handleChangeDay, day]);
@@ -245,7 +224,7 @@ const useDateInputs = () => {
       const yearInteger = Number.isNaN(yearStringConvertedToInteger) ? 0 : yearStringConvertedToInteger;
       let newYear;
       if (key === 'ArrowUp') newYear = yearInteger + 1 <= 9999 ? yearInteger + 1 : yearInteger;else newYear = yearInteger - 1 > 0 ? yearInteger - 1 : 1;
-      newYear = stringHelpers.prependStringWithPlaceHolders(`${newYear}`, 4);
+      newYear = stringHelpers.prependStringWithPlaceHolders("".concat(newYear), 4);
       handleChangeYear(newYear, e);
     }
   }, [onHomeKeyDown, onEndKeyDown, handleChangeYear, year]);
@@ -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-".concat(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-".concat(week[0].day.toString(), "-").concat(week[6].day.toString()), week.map((metaDay, z) => /*#__PURE__*/_jsx__default["default"](Day.Day, {
+    metaDay: metaDay,
+    colIndex: z + 1
+  }, "ds-calendar-".concat(metaDay.day.toString()))))), /*#__PURE__*/_jsx__default["default"](Day.Day, {
+    metaDay: invisibleLastDay,
+    isInvisible: true
+  }, "ds-calendar-".concat(invisibleLastDay.day.toString()))]
 }));
 
 exports.CalendarDaysList = CalendarDaysList;

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

@@ -4,10 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
+var dsButton = require('@elliemae/ds-button');
 var ChevronDoubleLeft = require('@elliemae/ds-icons/ChevronDoubleLeft');
 var ChevronLeft = require('@elliemae/ds-icons/ChevronLeft');
 var ChevronRight = require('@elliemae/ds-icons/ChevronRight');
 var ChevronDoubleRight = require('@elliemae/ds-icons/ChevronDoubleRight');
+var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
 var dateHelpers = require('../../../utils/dateHelpers.js');
 var Styleds = require('./Styleds.js');
 var CalendarContext = require('./CalendarContext.js');
@@ -27,8 +29,8 @@ const useGetFormattedCurrentDate = () => {
     currentMonth,
     currentYear
   } = React.useContext(CalendarContext.CalendarContext);
-  const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${dateHelpers.getMonthNameByMonthNumber(currentMonth)} ` : '';
-  return React.useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);
+  const monthString = currentMonth >= 0 && currentMonth <= 11 ? "".concat(dateHelpers.getMonthNameByMonthNumber(currentMonth), " ") : '';
+  return React.useMemo(() => "".concat(monthString).concat(currentYear), [monthString, currentYear]);
 };
 
 const CalendarHead = () => {
@@ -55,56 +57,56 @@ const CalendarHead = () => {
   } = React.useContext(CalendarContext.CalendarContext);
   return /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeader, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeaderButton, {
     "aria-label": "previous year",
-    buttonType: "text",
-    leftIcon: _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx__default["default"](ChevronDoubleLeft__default["default"], {
-      height: 14,
-      width: 14,
-      fill: "#25292f"
-    })),
-    size: "m",
+    buttonType: "raw",
+    size: dsButton.BUTTON_SIZES.M,
     onClick: handlePrevYear,
     innerRef: prevYearBtnRef,
     onKeyDown: handlePrevYearKeyDown,
     onFocus: onPrevYearFocus,
-    tabIndex: isControllerOnly ? -1 : 1
-  }), /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeaderButton, {
+    tabIndex: isControllerOnly ? -1 : 1,
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR
+  }, void 0, _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx__default["default"](ChevronDoubleLeft__default["default"], {
+    height: 14,
+    width: 14,
+    fill: "#25292f"
+  }))), /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeaderButton, {
     autoFocus: autoFocusPrevMonthArrow,
     "aria-label": "previous month",
-    buttonType: "text",
-    leftIcon: _ChevronLeft || (_ChevronLeft = /*#__PURE__*/_jsx__default["default"](ChevronLeft__default["default"], {
-      fill: "#25292f"
-    })),
-    size: "m",
+    buttonType: "raw",
+    size: dsButton.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.ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH // this is a tabstop for when the calendar is open
 
-  }), /*#__PURE__*/_jsx__default["default"]("h3", {}, void 0, currentFormatedDate), /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeaderButton, {
+  }, void 0, _ChevronLeft || (_ChevronLeft = /*#__PURE__*/_jsx__default["default"](ChevronLeft__default["default"], {
+    fill: "#25292f"
+  }))), /*#__PURE__*/_jsx__default["default"]("h3", {}, void 0, currentFormatedDate), /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeaderButton, {
     "aria-label": "next month",
-    buttonType: "text",
-    leftIcon: _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx__default["default"](ChevronRight__default["default"], {
-      fill: "#25292f"
-    })),
-    size: "m",
+    buttonType: "raw",
+    size: dsButton.BUTTON_SIZES.M,
     onClick: handleNextMonth,
     innerRef: nextMonthBtnRef,
     onKeyDown: handleNextMonthKeyDown,
-    onFocus: onNextMonthFocus
-  }), /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeaderButton, {
+    onFocus: onNextMonthFocus,
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH
+  }, void 0, _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx__default["default"](ChevronRight__default["default"], {
+    fill: "#25292f"
+  }))), /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeaderButton, {
     "aria-label": "next year",
-    buttonType: "text",
-    leftIcon: _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx__default["default"](ChevronDoubleRight__default["default"], {
-      height: 14,
-      width: 14,
-      fill: "#25292f"
-    })),
-    size: "m",
+    buttonType: "raw",
+    size: dsButton.BUTTON_SIZES.M,
     onClick: handleNextYear,
     innerRef: nextYearBtnRef,
     onKeyDown: handleNextYearKeyDown,
-    onFocus: onNextYearFocus
-  }));
+    onFocus: onNextYearFocus,
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR
+  }, void 0, _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx__default["default"](ChevronDoubleRight__default["default"], {
+    height: 14,
+    width: 14,
+    fill: "#25292f"
+  }))));
 };
 
 exports.CalendarHead = CalendarHead;

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

@@ -4,18 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
-var DSButton = require('@elliemae/ds-basic/Button');
+var dsIcon = require('@elliemae/ds-icon');
+var dsButton = require('@elliemae/ds-button');
 var DatePicker = require('@elliemae/ds-icons/DatePicker');
 var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
 var CalendarContext = require('./CalendarContext.js');
+var Styleds = require('./Styleds.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 var DatePicker__default = /*#__PURE__*/_interopDefaultLegacy(DatePicker);
 
-var _DatePicker;
 // this is particularly usefull due to how usePopper needs to check the references
 // since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders
 
@@ -23,19 +23,21 @@ const CalendarIconTrigger = () => {
   const {
     handleToggleCalendar,
     handleSetTriggerRef,
-    handlePickerIconKeyDown
+    handlePickerIconKeyDown,
+    ariaCurrentValueForInputs
   } = React.useContext(CalendarContext.CalendarContext);
-  return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
-    "aria-label": "date picker context menu trigger",
-    buttonType: "text",
-    leftIcon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default["default"](DatePicker__default["default"], {})),
-    size: "m",
-    variant: DSButton.BUTTON_VARIANT.DEFAULT,
+  return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](Styleds.StyledIconTriggerButton, {
+    "aria-label": "date picker context menu trigger, ".concat(ariaCurrentValueForInputs),
+    buttonType: "icon",
+    size: dsButton.BUTTON_SIZES.M,
+    variant: dsButton.BUTTON_VARIANT.DEFAULT,
     innerRef: handleSetTriggerRef,
     onClick: handleToggleCalendar,
     onKeyDown: handlePickerIconKeyDown,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR
-  }), [handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendar]);
+  }, void 0, /*#__PURE__*/_jsx__default["default"](DatePicker__default["default"], {
+    color: dsIcon.DSIconColors.PRIMARY
+  })), [handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendar, ariaCurrentValueForInputs]);
 };
 
 exports.CalendarIconTrigger = CalendarIconTrigger;

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

@@ -13,11 +13,15 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 const CalendarMonthDays = () => {
   const {
-    daysArray,
+    invisibleFirstDay,
+    daysMatrixByWeekday,
+    invisibleLastDay,
     calendarDaysWrapperRef
   } = React.useContext(CalendarContext.CalendarContext);
   return /*#__PURE__*/_jsx__default["default"](CalendarDaysList.CalendarDaysList, {
-    daysArray: daysArray,
+    invisibleFirstDay: invisibleFirstDay,
+    daysMatrixByWeekday: daysMatrixByWeekday,
+    invisibleLastDay: invisibleLastDay,
     innerRef: calendarDaysWrapperRef
   });
 };

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

@@ -11,7 +11,39 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _StyledWeekDaysUList;
-const CalendarWeekDays = /*#__PURE__*/React__default["default"].memo(() => _StyledWeekDaysUList || (_StyledWeekDaysUList = /*#__PURE__*/_jsx__default["default"](Styleds.StyledWeekDaysUList, {}, void 0, /*#__PURE__*/_jsx__default["default"]("li", {}, void 0, "sun"), /*#__PURE__*/_jsx__default["default"]("li", {}, void 0, "mon"), /*#__PURE__*/_jsx__default["default"]("li", {}, void 0, "tue"), /*#__PURE__*/_jsx__default["default"]("li", {}, void 0, "wed"), /*#__PURE__*/_jsx__default["default"]("li", {}, void 0, "thu"), /*#__PURE__*/_jsx__default["default"]("li", {}, void 0, "fri"), /*#__PURE__*/_jsx__default["default"]("li", {}, void 0, "sat"))));
+var _StyledWeekDaysHeader, _StyledWeekDaysHeader2, _StyledWeekDaysHeader3, _StyledWeekDaysHeader4, _StyledWeekDaysHeader5, _StyledWeekDaysHeader6, _StyledWeekDaysHeader7;
+const CalendarWeekDays = /*#__PURE__*/React__default["default"].memo(() => /*#__PURE__*/_jsx__default["default"]("span", {
+  role: "rowgroup"
+}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWeekDaysListWrapper, {
+  role: "row",
+  cols: ['32px', '32px', '32px', '32px', '32px', '32px', '32px'],
+  rows: ['22px'],
+  py: "xxxs",
+  px: "6px",
+  justifyContent: "space-between",
+  alignItems: "center",
+  isHeader: true
+}, void 0, _StyledWeekDaysHeader || (_StyledWeekDaysHeader = /*#__PURE__*/_jsx__default["default"](Styleds.StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 1
+}, void 0, "sun")), _StyledWeekDaysHeader2 || (_StyledWeekDaysHeader2 = /*#__PURE__*/_jsx__default["default"](Styleds.StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 2
+}, void 0, "mon")), _StyledWeekDaysHeader3 || (_StyledWeekDaysHeader3 = /*#__PURE__*/_jsx__default["default"](Styleds.StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 3
+}, void 0, "tue")), _StyledWeekDaysHeader4 || (_StyledWeekDaysHeader4 = /*#__PURE__*/_jsx__default["default"](Styleds.StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 4
+}, void 0, "wed")), _StyledWeekDaysHeader5 || (_StyledWeekDaysHeader5 = /*#__PURE__*/_jsx__default["default"](Styleds.StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 5
+}, void 0, "thu")), _StyledWeekDaysHeader6 || (_StyledWeekDaysHeader6 = /*#__PURE__*/_jsx__default["default"](Styleds.StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 6
+}, void 0, "fri")), _StyledWeekDaysHeader7 || (_StyledWeekDaysHeader7 = /*#__PURE__*/_jsx__default["default"](Styleds.StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 7
+}, void 0, "sat")))));
 
 exports.CalendarWeekDays = CalendarWeekDays;

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
+var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
 var CalendarContent = require('./CalendarContent.js');
 var CalendarContext = require('./CalendarContext.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -37,6 +38,7 @@ const CalendarWrapper = () => {
       zIndex: 110
     })
   }, attributes.popper), {}, {
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR,
     children: [_CalendarContent2 || (_CalendarContent2 = /*#__PURE__*/_jsx__default["default"](CalendarContent.CalendarContent, {})), /*#__PURE__*/jsxRuntime.jsx("div", {
       ref: setArrowElement,
       style: styles.arrow

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

@@ -2,23 +2,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var dateHelpers = require('../../../utils/dateHelpers.js');
+var constants = require('../../../utils/constants.js');
+var stringHelpers = require('../../../utils/stringHelpers.js');
 var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
 var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var CalendarContext = require('./CalendarContext.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 }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
+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 displayNone = {
   display: 'none'
 };
 const Day = ({
-  metaDay
+  metaDay,
+  colIndex,
+  isInvisible
 }) => {
   const {
     day,
@@ -78,9 +88,9 @@ const Day = ({
         day: dayNumber,
         year
       } = dateHelpers.getDateValuesFromDate(day);
-      onMonthChange(`${month + 1}`, e, metaInfo);
-      onDayChange(`${dayNumber}`, e, metaInfo);
-      onYearChange(`${year}`, e, metaInfo);
+      onMonthChange("".concat(month + 1), e, metaInfo);
+      onDayChange("".concat(dayNumber), e, metaInfo);
+      onYearChange("".concat(year), e, metaInfo);
       handleChangeComposedDateString(newDateString, metaInfo);
       setLatestInteractionRegion('calendar-days');
       if (!isWithTimeWheelToo && !preventCloseOnSelection) closeCalendar();
@@ -89,26 +99,35 @@ const Day = ({
   const handleOnDayFocus = React.useCallback(() => {
     setLatestInteractionRegion('calendar-days');
   }, [setLatestInteractionRegion]);
-  const dayClassModifiers = React.useMemo(() => `${isSelected ? 'selectedDay ' : ''}${isDisabled ? 'disabledDay ' : ''}${isOutOfRange ? 'outOfRangeDay ' : ''}${isFocused ? 'focusedDay ' : ''}${isStartRangeDay ? 'startRangeDay ' : ''}${isDayInRange ? 'inRangeDay ' : ''}${isEndRangeDay ? 'endRangeDay ' : ''}${isCurrMonthDay ? '' : 'notCurrentMonth'}`, [isSelected, isDisabled, isOutOfRange, isFocused, isStartRangeDay, isDayInRange, isEndRangeDay, isCurrMonthDay]);
-  return /*#__PURE__*/_jsx__default["default"]("li", {
+  const dayClassModifiers = React.useMemo(() => "dayWrapper ".concat(isSelected ? 'selectedDay ' : '').concat(isDisabled ? 'disabledDay ' : '').concat(isOutOfRange ? 'outOfRangeDay ' : '').concat(isFocused ? 'focusedDay ' : '').concat(isStartRangeDay ? 'startRangeDay ' : '').concat(isDayInRange ? 'inRangeDay ' : '').concat(isEndRangeDay ? 'endRangeDay ' : '').concat(isCurrMonthDay ? '' : 'notCurrentMonth'), [isSelected, isDisabled, isOutOfRange, isFocused, isStartRangeDay, isDayInRange, isEndRangeDay, isCurrMonthDay]);
+  let dataTestid = ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.DAY;
+  if (isSelected) dataTestid = ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_DAY;
+  if (isFocused) dataTestid = ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.FOCUSED_DAY;
+  if (isFocused && isSelected) dataTestid = ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_FOCUSED_DAY;
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
     className: dayClassModifiers,
-    style: isHidden ? displayNone : undefined
-  }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledDayBtn, {
-    "aria-label": `Date Picker ${dayAsString}`,
-    role: "gridcell",
-    buttonType: "text",
-    labelText: `${day.getDate()}`,
-    size: "m",
-    onClick: handleOnDayClick // DSButton triggers this with "spacebar" and "enter" too...
-    ,
-    onFocus: handleOnDayFocus,
-    onKeyDown: e => {
-      handleDayOnKeyDown(e, metaDay);
-    },
-    innerRef: dayBtnRef,
-    tabIndex: isSelected ? 0 : -1,
-    "data-isfocused": isFocused,
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR[isFocused ? 'FOCUSED_DAY' : 'DAY']
+    style: isHidden ? displayNone : undefined,
+    role: !isInvisible ? 'gridcell' : undefined
+  }, Number.isInteger(colIndex) && {
+    'aria-colindex': colIndex
+  }), {}, {
+    children: /*#__PURE__*/_jsx__default["default"](Styleds.StyledDayBtn, {
+      "aria-label": "".concat(stringHelpers.getAriaDayFromDateString(dayAsString), ", ").concat(constants.weekDays[metaDay.day.getDay()]),
+      "aria-disabled": isOutOfRange || isDisabled,
+      "aria-hidden": !!isInvisible,
+      buttonType: "raw",
+      size: "m",
+      onClick: handleOnDayClick // DSButton triggers this with "spacebar" and "enter" too...
+      ,
+      onFocus: handleOnDayFocus,
+      onKeyDown: e => {
+        handleDayOnKeyDown(e, metaDay);
+      },
+      innerRef: dayBtnRef,
+      tabIndex: isSelected ? 0 : -1,
+      "data-isfocused": isFocused,
+      "data-testid": dataTestid
+    }, void 0, "".concat(day.getDate()))
   }));
 };