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

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

@@ -0,0 +1,140 @@
+import { useMemo } from 'react';
+import { dateTimeToDate, deconstructValuesFromDateString, fillStringWithPlaceHolders, dateTimeToTime, deconstructTimeValues } from '../utils/stringHelpers.js';
+import { convertToPositiveNumberIfPossible } from '../utils/numberHelpers.js';
+import { monthNames, announcableCardinalDays } from '../utils/constants.js';
+
+/* eslint-disable max-lines */
+// this is because it's fully controlled
+// our source of truth is either the date props or dateTime props
+// based on wheter it's a dateTime picker
+// or a date picker (it's date picker when hideTime is true)
+const useGetDestructuredDateValues = ({
+  date,
+  dateTime,
+  isDateTimeSelector
+}) => {
+  const dateStringFromProps = isDateTimeSelector ? dateTimeToDate(dateTime) : date;
+  const deconstructedValues = deconstructValuesFromDateString(dateStringFromProps);
+  const {
+    month,
+    day,
+    year
+  } = deconstructedValues;
+  const monthNum = convertToPositiveNumberIfPossible(month);
+  const dayNum = convertToPositiveNumberIfPossible(day);
+  const yearNum = convertToPositiveNumberIfPossible(year);
+  const announcedMonth = monthNum !== -1 ? monthNames[monthNum - 1] : 'empty month';
+  const announcedDay = dayNum !== -1 ? announcableCardinalDays[dayNum] : 'empty day';
+  const announcedYear = yearNum !== -1 ? fillStringWithPlaceHolders(`${yearNum}`, 4, '0') : 'empty year';
+  const announcedDateValues = `${announcedMonth}, ${announcedDay}, ${announcedYear}`;
+  return useMemo(() => ({
+    month,
+    day,
+    year,
+    monthNum,
+    dayNum,
+    yearNum,
+    announcedMonth,
+    announcedDay,
+    announcedYear,
+    announcedDateValues
+  }), [announcedDay, announcedMonth, announcedYear, announcedDateValues, day, dayNum, month, monthNum, year, yearNum]);
+}; // this is because it's fully controlled
+// our source of truth is either the time props or dateTime props
+// based on wheter it's a dateTime picker
+// or a time picker (it's time picker when hideDate is true)
+
+const useGetDestructuredTimeValues = ({
+  time,
+  dateTime,
+  isDateTimeSelector
+}) => {
+  const timeStringFromProps = isDateTimeSelector ? dateTimeToTime(dateTime) : time;
+  const deconstructedValues = deconstructTimeValues(timeStringFromProps);
+  const {
+    hours,
+    minutes,
+    meridiem
+  } = deconstructedValues;
+  const hoursNum = convertToPositiveNumberIfPossible(hours);
+  const minutesNum = convertToPositiveNumberIfPossible(minutes); // 01 -> 1 ~ 09 -> 9 || 1_ -> 1 ~ 9_ -> 9 || empty...
+
+  const announcedHours = hoursNum !== -1 ? `${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 useMemo(() => ({
+    hours,
+    minutes,
+    meridiem,
+    hoursNum,
+    minutesNum,
+    announcedHours,
+    announcedMinutes,
+    announcedMeridiem,
+    announcedTimeValues
+  }), [hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues]);
+};
+const useGetDestructuredValues = ({
+  date,
+  time,
+  dateTime,
+  isDateTimeSelector
+}) => {
+  const {
+    month,
+    day,
+    year,
+    monthNum,
+    dayNum,
+    yearNum,
+    announcedMonth,
+    announcedDay,
+    announcedYear,
+    announcedDateValues
+  } = useGetDestructuredDateValues({
+    date,
+    dateTime,
+    isDateTimeSelector
+  });
+  const {
+    hours,
+    minutes,
+    meridiem,
+    hoursNum,
+    minutesNum,
+    announcedHours,
+    announcedMinutes,
+    announcedMeridiem,
+    announcedTimeValues
+  } = useGetDestructuredTimeValues({
+    time,
+    dateTime,
+    isDateTimeSelector
+  });
+  return useMemo(() => ({
+    month,
+    day,
+    year,
+    monthNum,
+    dayNum,
+    yearNum,
+    announcedMonth,
+    announcedDay,
+    announcedYear,
+    announcedDateValues,
+    hours,
+    minutes,
+    meridiem,
+    hoursNum,
+    minutesNum,
+    announcedHours,
+    announcedMinutes,
+    announcedMeridiem,
+    announcedTimeValues
+  }), [month, day, year, monthNum, dayNum, yearNum, announcedMonth, announcedDay, announcedYear, announcedDateValues, hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues]);
+};
+
+export { useGetDestructuredDateValues, useGetDestructuredTimeValues, useGetDestructuredValues };

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

@@ -2,6 +2,6 @@ export { DSControlledDateTimePicker, DSControlledDateTimePickerWithSchema } from
 export { ControlledDateTimePickerDatatestid } from './ControlledDateTimePickerDatatestid.js';
 export { CONTROLLED_DATE_TIME_PICKER_TYPES } from './ControlledDateTimePickerTypes.js';
 export { deconstructValuesFromDateString, prependStringWithPlaceHolders } from './utils/stringHelpers.js';
-export { getValidatioDateTimeStringMetaInfo } from './utils/dateTimeHelpers.js';
+export { getValidationDateTimeStringMetaInfo } from './utils/dateTimeHelpers.js';
 export { getDateStringFromDay, getDateValuesFromDate, getDayFromDateString, getValidationDateStringMetaInfo } from './utils/dateHelpers.js';
 export { getValidationTimeStringMetaInfo } from './utils/timeHelpers.js';

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

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

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

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

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

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

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

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

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

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

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

@@ -1,36 +1,24 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import { useMemo, useContext, useCallback } from 'react';
+import { useContext, useCallback, useMemo } from 'react';
 import { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';
-import { dateTimeToDate, deconstructValuesFromDateString, getFormattedDateString, prependStringWithPlaceHolders, fillStringWithPlaceHolders } from '../../utils/stringHelpers.js';
+import { getFormattedDateString, prependStringWithPlaceHolders, fillStringWithPlaceHolders } from '../../utils/stringHelpers.js';
 import { getValidationDateStringMetaInfo } from '../../utils/dateHelpers.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-// our source of truth is either the date props or dateTime props
-// based on wheter it's a dateTime picker
-// or a date picker (it's date picker when hideTime is true)
-
-const useGetDestructuredDateValues = ({
-  date,
-  dateTime,
-  hideTime
-}) => {
-  const dateStringFromProps = useMemo(() => hideTime ? date : dateTimeToDate(dateTime), [date, dateTime, hideTime]);
-  const deconstructedValues = useMemo(() => deconstructValuesFromDateString(dateStringFromProps), [dateStringFromProps]);
-  return deconstructedValues;
-};
 const useDateInputs = () => {
   const {
     props: {
-      date,
-      dateTime,
       onMonthChange: appOnMonthChange,
       onDayChange: appOnDayChange,
       onYearChange: appOnYearChange,
       getIsDisabledDay,
       getIsOutOfRangeDay
     },
+    month,
+    day,
+    year,
     hideTime,
     monthInputRef,
     dayInputRef,
@@ -46,15 +34,6 @@ const useDateInputs = () => {
     withAnyRightController,
     autoFocusMonthInput
   } = useContext(ControlledDateTimePickerContext);
-  const {
-    month,
-    day,
-    year
-  } = useGetDestructuredDateValues({
-    date,
-    dateTime,
-    hideTime
-  });
   const onHomeKeyDown = useCallback(() => {
     var _monthInputRef$curren, _monthInputRef$curren2;
 
@@ -269,4 +248,4 @@ const useDateInputs = () => {
   }), [month, day, year, autoFocusMonthInput, onMonthFocus, onMonthChange, onDayFocus, onDayChange, onYearFocus, onYearChange, onMonthBlur, onDayBlur, onYearBlur, onMonthKeyDown, onDayKeyDown, onYearKeyDown]);
 };
 
-export { useDateInputs, useGetDestructuredDateValues };
+export { useDateInputs };

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

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

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

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

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

@@ -4,6 +4,7 @@ import { createRef, createContext } from 'react';
 const noop = () => {};
 
 const defaultCalendarContext = {
+  ariaCurrentValueForInputs: '',
   showCalendar: false,
   setShowCalendar: noop,
   closeCalendar: noop,
@@ -21,6 +22,9 @@ const defaultCalendarContext = {
   currentMonth: undefined,
   currentYear: undefined,
   daysArray: [],
+  invisibleFirstDay: undefined,
+  daysMatrixByWeekday: [],
+  invisibleLastDay: undefined,
   focusedDay: undefined,
   tryToFocusCurrentlyDataIsFocusedDay: noop,
   resetFocusedDayToStartDate: noop,

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

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

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

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

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

@@ -1,11 +1,12 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useMemo } from 'react';
-import DSButton, { BUTTON_VARIANT } from '@elliemae/ds-basic/Button';
+import { DSIconColors } from '@elliemae/ds-icon';
+import { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';
 import DatePicker from '@elliemae/ds-icons/DatePicker';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { CalendarContext } from './CalendarContext.js';
+import { StyledIconTriggerButton } from './Styleds.js';
 
-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
 
@@ -13,19 +14,21 @@ const CalendarIconTrigger = () => {
   const {
     handleToggleCalendar,
     handleSetTriggerRef,
-    handlePickerIconKeyDown
+    handlePickerIconKeyDown,
+    ariaCurrentValueForInputs
   } = useContext(CalendarContext);
-  return useMemo(() => /*#__PURE__*/_jsx(DSButton, {
-    "aria-label": "date picker context menu trigger",
-    buttonType: "text",
-    leftIcon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker, {})),
-    size: "m",
+  return useMemo(() => /*#__PURE__*/_jsx(StyledIconTriggerButton, {
+    "aria-label": `date picker context menu trigger, ${ariaCurrentValueForInputs}`,
+    buttonType: "icon",
+    size: BUTTON_SIZES.M,
     variant: BUTTON_VARIANT.DEFAULT,
     innerRef: handleSetTriggerRef,
     onClick: handleToggleCalendar,
     onKeyDown: handlePickerIconKeyDown,
     "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR
-  }), [handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendar]);
+  }, void 0, /*#__PURE__*/_jsx(DatePicker, {
+    color: DSIconColors.PRIMARY
+  })), [handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendar, ariaCurrentValueForInputs]);
 };
 
 export { CalendarIconTrigger };

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

@@ -5,11 +5,15 @@ import { CalendarContext } from './CalendarContext.js';
 
 const CalendarMonthDays = () => {
   const {
-    daysArray,
+    invisibleFirstDay,
+    daysMatrixByWeekday,
+    invisibleLastDay,
     calendarDaysWrapperRef
   } = useContext(CalendarContext);
   return /*#__PURE__*/_jsx(CalendarDaysList, {
-    daysArray: daysArray,
+    invisibleFirstDay: invisibleFirstDay,
+    daysMatrixByWeekday: daysMatrixByWeekday,
+    invisibleLastDay: invisibleLastDay,
     innerRef: calendarDaysWrapperRef
   });
 };