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

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-".concat(invisibleFirstDay.day.toString())), daysMatrixByWeekday.map((week, i) => /*#__PURE__*/_jsx(StyledWeekDaysListWrapper, {
+    role: "row",
+    "aria-rowindex": i + 1,
+    cols: ['32px', '32px', '32px', '32px', '32px', '32px', '32px'],
+    rows: ['28px'],
+    py: "xxxs",
+    px: "2px",
+    justifyContent: "space-between",
+    alignItems: "center"
+  }, "ds-calendar-week-".concat(week[0].day.toString(), "-").concat(week[6].day.toString()), week.map((metaDay, z) => /*#__PURE__*/_jsx(Day, {
+    metaDay: metaDay,
+    colIndex: z + 1
+  }, "ds-calendar-".concat(metaDay.day.toString()))))), /*#__PURE__*/_jsx(Day, {
+    metaDay: invisibleLastDay,
+    isInvisible: true
+  }, "ds-calendar-".concat(invisibleLastDay.day.toString()))]
 }));
 
 export { CalendarDaysList };

package/esm/controlled-date-time-picker/parts/Pickers/Calendar/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';
@@ -15,8 +17,8 @@ const useGetFormattedCurrentDate = () => {
     currentMonth,
     currentYear
   } = useContext(CalendarContext);
-  const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';
-  return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);
+  const monthString = currentMonth >= 0 && currentMonth <= 11 ? "".concat(getMonthNameByMonthNumber(currentMonth), " ") : '';
+  return useMemo(() => "".concat(monthString).concat(currentYear), [monthString, currentYear]);
 };
 
 const CalendarHead = () => {
@@ -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, ".concat(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
   });
 };

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

@@ -1,8 +1,40 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React from 'react';
-import { StyledWeekDaysUList } from './Styleds.js';
+import { StyledWeekDaysListWrapper, StyledWeekDaysHeaderItem } from './Styleds.js';
 
-var _StyledWeekDaysUList;
-const CalendarWeekDays = /*#__PURE__*/React.memo(() => _StyledWeekDaysUList || (_StyledWeekDaysUList = /*#__PURE__*/_jsx(StyledWeekDaysUList, {}, void 0, /*#__PURE__*/_jsx("li", {}, void 0, "sun"), /*#__PURE__*/_jsx("li", {}, void 0, "mon"), /*#__PURE__*/_jsx("li", {}, void 0, "tue"), /*#__PURE__*/_jsx("li", {}, void 0, "wed"), /*#__PURE__*/_jsx("li", {}, void 0, "thu"), /*#__PURE__*/_jsx("li", {}, void 0, "fri"), /*#__PURE__*/_jsx("li", {}, void 0, "sat"))));
+var _StyledWeekDaysHeader, _StyledWeekDaysHeader2, _StyledWeekDaysHeader3, _StyledWeekDaysHeader4, _StyledWeekDaysHeader5, _StyledWeekDaysHeader6, _StyledWeekDaysHeader7;
+const CalendarWeekDays = /*#__PURE__*/React.memo(() => /*#__PURE__*/_jsx("span", {
+  role: "rowgroup"
+}, void 0, /*#__PURE__*/_jsx(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(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 1
+}, void 0, "sun")), _StyledWeekDaysHeader2 || (_StyledWeekDaysHeader2 = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 2
+}, void 0, "mon")), _StyledWeekDaysHeader3 || (_StyledWeekDaysHeader3 = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 3
+}, void 0, "tue")), _StyledWeekDaysHeader4 || (_StyledWeekDaysHeader4 = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 4
+}, void 0, "wed")), _StyledWeekDaysHeader5 || (_StyledWeekDaysHeader5 = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 5
+}, void 0, "thu")), _StyledWeekDaysHeader6 || (_StyledWeekDaysHeader6 = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 6
+}, void 0, "fri")), _StyledWeekDaysHeader7 || (_StyledWeekDaysHeader7 = /*#__PURE__*/_jsx(StyledWeekDaysHeaderItem, {
+  role: "columnheader",
+  "aria-colindex": 7
+}, void 0, "sat")))));
 
 export { CalendarWeekDays };

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

@@ -1,6 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { CalendarContent } from './CalendarContent.js';
 import { CalendarContext } from './CalendarContext.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -28,6 +29,7 @@ const CalendarWrapper = () => {
       zIndex: 110
     })
   }, attributes.popper), {}, {
+    "data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR,
     children: [_CalendarContent2 || (_CalendarContent2 = /*#__PURE__*/_jsx(CalendarContent, {})), /*#__PURE__*/jsx("div", {
       ref: setArrowElement,
       style: styles.arrow

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

@@ -1,16 +1,25 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useMemo, useCallback } from 'react';
 import { compareTwoDatesDayEquality, getDayFromDateString, isSameDateMoment, getDateStringFromDay, getDateValuesFromDate } from '../../../utils/dateHelpers.js';
+import { weekDays } from '../../../utils/constants.js';
+import { getAriaDayFromDateString } from '../../../utils/stringHelpers.js';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { CalendarContext } from './CalendarContext.js';
 import { StyledDayBtn } from './Styleds.js';
+import { jsx } from 'react/jsx-runtime';
 
+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; }
 const displayNone = {
   display: 'none'
 };
 const Day = ({
-  metaDay
+  metaDay,
+  colIndex,
+  isInvisible
 }) => {
   const {
     day,
@@ -70,9 +79,9 @@ const Day = ({
         day: dayNumber,
         year
       } = 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();
@@ -81,26 +90,35 @@ const Day = ({
   const handleOnDayFocus = useCallback(() => {
     setLatestInteractionRegion('calendar-days');
   }, [setLatestInteractionRegion]);
-  const dayClassModifiers = 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("li", {
+  const dayClassModifiers = 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.CALENDAR.DAY;
+  if (isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_DAY;
+  if (isFocused) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.FOCUSED_DAY;
+  if (isFocused && isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_FOCUSED_DAY;
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     className: dayClassModifiers,
-    style: isHidden ? displayNone : undefined
-  }, void 0, /*#__PURE__*/_jsx(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.CALENDAR[isFocused ? 'FOCUSED_DAY' : 'DAY']
+    style: isHidden ? displayNone : undefined,
+    role: !isInvisible ? 'gridcell' : undefined
+  }, Number.isInteger(colIndex) && {
+    'aria-colindex': colIndex
+  }), {}, {
+    children: /*#__PURE__*/_jsx(StyledDayBtn, {
+      "aria-label": "".concat(getAriaDayFromDateString(dayAsString), ", ").concat(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()))
   }));
 };
 

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

@@ -1,48 +1,46 @@
 import styled from 'styled-components';
-import { DSButton } from '@elliemae/ds-button';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button';
 
 /* eslint-disable max-lines */
-const StyledSpacingResetter = /*#__PURE__*/styled.div.withConfig({
+const focusBorder = "\n  border-style: solid;\n  border-width: 2px;\n  border-radius: 50%;\n";
+const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-18gg4kd-0"
-})(["*{margin:0;padding:0;box-sizing:border-box;}ul{list-style:none;}", ""], ({
+})(["color:", ";width:26px;height:26px;"], ({
+  theme
+}) => theme.colors.brand['600']);
+const StyledShadowWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-18gg4kd-1"
+})(["", ""], ({
   isControllerOnly
 }) => isControllerOnly ? undefined : 'box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);');
 const StyledCalendarWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-18gg4kd-1"
+  componentId: "sc-18gg4kd-2"
 })(["display:grid;width:260px;background-color:", ";grid-template-rows:auto auto;"], ({
   theme
 }) => theme.colors.neutral['000']);
 const StyledHeader = /*#__PURE__*/styled.section.withConfig({
-  componentId: "sc-18gg4kd-2"
-})(["display:grid;padding:", ";grid-template-columns:min-content min-content 1fr min-content min-content;grid-template-rows:1fr;align-items:center;justify-content:center;text-align:center;background:", ";h3{font-size:1rem;}"], ({
+  componentId: "sc-18gg4kd-3"
+})(["*{margin:0;padding:0;box-sizing:border-box;}display:grid;padding:", ";grid-template-columns:min-content min-content 1fr min-content min-content;grid-template-rows:1fr;align-items:center;justify-content:center;text-align:center;background:", ";h3{font-size:1rem;}"], ({
   theme
 }) => theme.space.xxxs, ({
   theme
 }) => theme.colors.neutral['050']);
-const StyledHeaderButton = /*#__PURE__*/styled(DSButton).withConfig({
-  componentId: "sc-18gg4kd-3"
-})(["position:relative;&:focus{&:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid ", ";border-radius:2px;pointer-events:none;}}&:hover{background:", ";}"], ({
+const StyledHeaderButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
+  componentId: "sc-18gg4kd-4"
+})(["position:relative;width:28px;height:28px;&:focus{&:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid ", ";border-radius:2px;pointer-events:none;}}&:hover{background:", ";}"], ({
   theme
 }) => theme.colors.brand[700], ({
   theme
 }) => theme.colors.brand[200]);
 const StyledBody = /*#__PURE__*/styled.section.withConfig({
-  componentId: "sc-18gg4kd-4"
+  componentId: "sc-18gg4kd-5"
 })(["padding:", ";"], ({
   theme
 }) => theme.space.xxxs);
-const StyledWeekDaysUList = /*#__PURE__*/styled.ul.withConfig({
-  componentId: "sc-18gg4kd-5"
-})(["display:flex;justify-content:space-between;align-items:center;padding:", ";height:30px;font-size:", ";background-color:", ";li{flex:1;text-transform:capitalize;text-align:center;color:$gray;margin:0 1px;}"], ({
-  theme
-}) => theme.space.xxxs, ({
-  theme
-}) => theme.fontSizes.label[400], ({
-  theme
-}) => theme.colors.neutral['050']);
-const StyledDayBtn = /*#__PURE__*/styled(DSButton).withConfig({
+const StyledDayBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-18gg4kd-6"
-})(["height:", ";width:", ";min-width:", ";border-radius:50%;color:", ";font-size:", ";font-weight:", ";position:relative;&:hover{color:", ";}&:focus:not(:hover){background-color:", ";color:", ";}&.em-ds-button--text{&:focus{&:after{border-radius:50%;top:-2px;left:-2px;width:calc(100% + 4px);height:calc(100% + 4px);}}}"], ({
+})(["height:", ";width:", ";min-width:", ";border-radius:50%;color:", ";font-weight:", ";position:relative;&:hover{color:", ";}&:focus:not(:hover){background-color:", ";color:", ";}&:focus{&:after{border-radius:50%;top:-2px;left:-2px;width:calc(100% + 4px);height:calc(100% + 4px);}}"], ({
   theme
 }) => theme.space.s, ({
   theme
@@ -52,8 +50,6 @@ const StyledDayBtn = /*#__PURE__*/styled(DSButton).withConfig({
   theme
 }) => theme.colors.neutral[800], ({
   theme
-}) => theme.fontSizes.label[400], ({
-  theme
 }) => theme.fontWeights.regular, ({
   theme
 }) => theme.colors.brand[700], ({
@@ -61,53 +57,71 @@ const StyledDayBtn = /*#__PURE__*/styled(DSButton).withConfig({
 }) => theme.colors.neutral['000'], ({
   theme
 }) => theme.colors.brand[600]);
-const StyledMonthDaysUList = /*#__PURE__*/styled.ul.withConfig({
+const StyledWeekDaysListWrapper = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-18gg4kd-7"
-})(["display:grid;grid-template-columns:repeat(7,36px);justify-items:center;li{width:36px;height:36px;display:grid;justify-content:center;align-items:center;position:relative;}li.startRangeDay{border-radius:50% 0 0 50%;background-color:", ";}li.inRangeDay{border-radius:0;background-color:", ";}li.endRangeDay{border-radius:0 50% 50% 0;background-color:", ";}li.focusedDay{", "{&.em-ds-button--text{&:focus{&:before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;border-radius:50%;border:2px solid ", ";pointer-events:none;}}}}}li.startRangeDay,li.endRangeDay,li.selectedDay{", "{color:", ";background-color:", ";font-weight:", ";}}li.notCurrentMonth{", "{font-weight:", ";&:not(:hover){color:", ";}}&.selectedDay,&.startRangeDay,&.endRangeDay{", "{color:", ";}}}li.disabledDay,li.outOfRangeDay{", "{color:", ";font-weight:", ";&.em-ds-button--text{cursor:not-allowed;&:focus{&:after{border-radius:50%;top:-2px;left:-2px;width:calc(100% + 4px);height:calc(100% + 4px);border-color:", ";}}}&:hover{background:", ";}}&:after{cursor:not-allowed;position:absolute;content:'';top:47%;left:3px;width:calc(100% - 5px);height:1px;background-color:", ";transform:rotate(45deg);pointer-events:none;}&.focusedDay{", "{color:", ";font-weight:", ";}&:after{background-color:", ";}}&.selectedDay,&.startRangeDay,&.endRangeDay,&.inRangeDay{", "{color:", ";background-color:", ";}&:after{background-color:", ";}}}"], ({
+})(["font-size:", ";text-align:center;", ";", ";.dayWrapper{position:relative;width:36px;button:focus{&:before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;border-radius:50%;border:2px solid ", ";pointer-events:none;}&:after{position:absolute;content:'';top:-2px;left:-2px;", " border-color:", ";width:calc(100% + 4px);height:calc(100% + 4px);}}&.disabledDay,&.outOfRangeDay{button:focus{&:after{border-color:", ";}}}}.dayWrapper.startRangeDay{border-radius:50% 0 0 50%;background-color:", ";}.dayWrapper.inRangeDay{border-radius:0;background-color:", ";}.dayWrapper.endRangeDay{border-radius:0 50% 50% 0;background-color:", ";}.dayWrapper.startRangeDay.endRangeDay{background:unset;}.dayWrapper.startRangeDay,.dayWrapper.endRangeDay,.dayWrapper.selectedDay{button{color:", ";background-color:", ";font-weight:", ";}}.dayWrapper.notCurrentMonth{button{font-weight:", ";&:not(:hover){color:", ";}}&.selectedDay,&.startRangeDay,&.endRangeDay{button{color:", ";}}}.dayWrapper.disabledDay,.dayWrapper.outOfRangeDay{button{color:", ";font-weight:", ";cursor:not-allowed;&:focus{", " border-color:", ";}&:hover{background:", ";}}&:after{cursor:not-allowed;position:absolute;content:'';top:47%;left:3px;width:calc(100% - 5px);height:1px;background-color:", ";transform:rotate(45deg);pointer-events:none;}&.focusedDay{button{color:", ";font-weight:", ";}&:after{background-color:", ";}}&.selectedDay,&.startRangeDay,&.endRangeDay,&.inRangeDay{button{color:", ";background-color:", ";}&:after{background-color:", ";}}}"], ({
   theme
-}) => theme.colors.brand[200], ({
+}) => theme.fontSizes.label[400], ({
+  isHeader,
+  theme
+}) => isHeader ? "background: ".concat(theme.colors.neutral['050']) : '', ({
+  isHeader
+}) => isHeader ? 'text-transform: capitalize' : '', ({
+  theme
+}) => theme.colors.neutral['000'], focusBorder, ({
+  theme
+}) => theme.colors.brand[700], ({
+  theme
+}) => theme.colors.danger[900], ({
   theme
 }) => theme.colors.brand[200], ({
   theme
-}) => theme.colors.brand[200], StyledDayBtn, ({
+}) => theme.colors.brand[200], ({
   theme
-}) => theme.colors.neutral['000'], StyledDayBtn, ({
+}) => theme.colors.brand[200], ({
   theme
 }) => theme.colors.neutral['000'], ({
   theme
 }) => theme.colors.brand[700], ({
   theme
-}) => theme.fontWeights.semibold, StyledDayBtn, ({
+}) => theme.fontWeights.semibold, ({
   theme
 }) => theme.fontWeights.light, ({
   theme
-}) => theme.colors.neutral[500], StyledDayBtn, ({
+}) => theme.colors.neutral[500], ({
   theme
-}) => theme.colors.neutral['000'], StyledDayBtn, ({
+}) => theme.colors.neutral['000'], ({
   theme
 }) => theme.colors.neutral[500], ({
   theme
-}) => theme.fontWeights.light, ({
+}) => theme.fontWeights.light, focusBorder, ({
   theme
 }) => theme.colors.danger[900], ({
   theme
 }) => theme.colors.neutral['000'], ({
   theme
-}) => theme.colors.neutral[500], StyledDayBtn, ({
+}) => theme.colors.neutral[500], ({
   theme
 }) => theme.colors.danger[900], ({
   theme
 }) => theme.fontWeights.regular, ({
   theme
-}) => theme.colors.danger[900], StyledDayBtn, ({
+}) => theme.colors.danger[900], ({
   theme
 }) => theme.colors.neutral['000'], ({
   theme
 }) => theme.colors.danger[900], ({
   theme
 }) => theme.colors.neutral['000']);
-const CalendarFooterMessage = /*#__PURE__*/styled.footer.withConfig({
+const StyledWeekDaysHeaderItem = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-18gg4kd-8"
+})(["width:", ";min-width:", ";"], ({
+  theme
+}) => theme.space.s, ({
+  theme
+}) => theme.space.s);
+const CalendarFooterMessage = /*#__PURE__*/styled.footer.withConfig({
+  componentId: "sc-18gg4kd-9"
 })(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;"], ({
   theme
 }) => theme.colors.neutral[300], ({
@@ -122,4 +136,4 @@ const CalendarFooterMessage = /*#__PURE__*/styled.footer.withConfig({
   theme
 }) => theme.fontSizes.microText[200]);
 
-export { CalendarFooterMessage, StyledBody, StyledCalendarWrapper, StyledDayBtn, StyledHeader, StyledHeaderButton, StyledMonthDaysUList, StyledSpacingResetter, StyledWeekDaysUList };
+export { CalendarFooterMessage, StyledBody, StyledCalendarWrapper, StyledDayBtn, StyledHeader, StyledHeaderButton, StyledIconTriggerButton, StyledShadowWrapper, StyledWeekDaysHeaderItem, StyledWeekDaysListWrapper };