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

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('styled-components');
+var dsGrid = require('@elliemae/ds-grid');
 var dsButton = require('@elliemae/ds-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -10,47 +11,44 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 /* eslint-disable max-lines */
-const StyledSpacingResetter = /*#__PURE__*/styled__default["default"].div.withConfig({
+const focusBorder = "\n  border-style: solid;\n  border-width: 2px;\n  border-radius: 50%;\n";
+const StyledIconTriggerButton = /*#__PURE__*/styled__default["default"](dsButton.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__default["default"].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__default["default"].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__default["default"].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__default["default"](dsButton.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__default["default"](dsButton.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__default["default"].section.withConfig({
-  componentId: "sc-18gg4kd-4"
+  componentId: "sc-18gg4kd-5"
 })(["padding:", ";"], ({
   theme
 }) => theme.space.xxxs);
-const StyledWeekDaysUList = /*#__PURE__*/styled__default["default"].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__default["default"](dsButton.DSButton).withConfig({
+const StyledDayBtn = /*#__PURE__*/styled__default["default"](dsButton.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
@@ -60,8 +58,6 @@ const StyledDayBtn = /*#__PURE__*/styled__default["default"](dsButton.DSButton).
   theme
 }) => theme.colors.neutral[800], ({
   theme
-}) => theme.fontSizes.label[400], ({
-  theme
 }) => theme.fontWeights.regular, ({
   theme
 }) => theme.colors.brand[700], ({
@@ -69,53 +65,71 @@ const StyledDayBtn = /*#__PURE__*/styled__default["default"](dsButton.DSButton).
 }) => theme.colors.neutral['000'], ({
   theme
 }) => theme.colors.brand[600]);
-const StyledMonthDaysUList = /*#__PURE__*/styled__default["default"].ul.withConfig({
+const StyledWeekDaysListWrapper = /*#__PURE__*/styled__default["default"](dsGrid.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__default["default"].footer.withConfig({
+const StyledWeekDaysHeaderItem = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-18gg4kd-8"
+})(["width:", ";min-width:", ";"], ({
+  theme
+}) => theme.space.s, ({
+  theme
+}) => theme.space.s);
+const CalendarFooterMessage = /*#__PURE__*/styled__default["default"].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], ({
@@ -136,6 +150,7 @@ exports.StyledCalendarWrapper = StyledCalendarWrapper;
 exports.StyledDayBtn = StyledDayBtn;
 exports.StyledHeader = StyledHeader;
 exports.StyledHeaderButton = StyledHeaderButton;
-exports.StyledMonthDaysUList = StyledMonthDaysUList;
-exports.StyledSpacingResetter = StyledSpacingResetter;
-exports.StyledWeekDaysUList = StyledWeekDaysUList;
+exports.StyledIconTriggerButton = StyledIconTriggerButton;
+exports.StyledShadowWrapper = StyledShadowWrapper;
+exports.StyledWeekDaysHeaderItem = StyledWeekDaysHeaderItem;
+exports.StyledWeekDaysListWrapper = StyledWeekDaysListWrapper;

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var useKeyboardHandlers = require('./useKeyboardHandlers.js');
@@ -9,7 +10,18 @@ var useFocusLogic = require('./useFocusLogic.js');
 var usePopperTriggerLogic = require('./usePopperTriggerLogic.js');
 var useCurrentDisplayedMonthYearLogic = require('./useCurrentDisplayedMonthYearLogic.js');
 
-/* eslint-disable complexity */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function sliceIntoChunks(arr, chunkSize) {
+  const res = [];
+
+  for (let i = 0; i < arr.length; i += chunkSize) {
+    const chunk = arr.slice(i, i + chunkSize);
+    res.push(chunk);
+  }
+
+  return res;
+}
+
 const useConfigCalendarCTX = () => {
   const {
     pickerButtonRef,
@@ -32,7 +44,8 @@ const useConfigCalendarCTX = () => {
     isControllerOnly,
     isWithTimeWheelToo,
     setLatestInteractionRegion,
-    autoFocusPrevMonthArrow
+    autoFocusPrevMonthArrow,
+    ariaCurrentValueForInputs
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const [showCalendar, setShowCalendar] = React.useState(false);
   const {
@@ -44,6 +57,19 @@ const useConfigCalendarCTX = () => {
     handleNextMonth,
     handleNextYear
   } = useCurrentDisplayedMonthYearLogic.useCurrentDisplayedMonthYearLogic();
+  const {
+    invisibleFirstDay,
+    daysMatrixByWeekday,
+    invisibleLastDay
+  } = React.useMemo(() => {
+    const [invisible1stDay, ...otherDays] = [...daysArray];
+    const invisibleDayLast = otherDays.pop();
+    return {
+      invisibleFirstDay: invisible1stDay,
+      daysMatrixByWeekday: sliceIntoChunks(otherDays, 7),
+      invisibleLastDay: invisibleDayLast
+    };
+  }, [daysArray]);
   const setLatestInteractionRegionCalendarHead = React.useCallback(() => {
     setLatestInteractionRegion('calendar-head');
   }, [setLatestInteractionRegion]);
@@ -146,6 +172,9 @@ const useConfigCalendarCTX = () => {
     currentMonth,
     currentYear,
     daysArray,
+    invisibleFirstDay,
+    daysMatrixByWeekday,
+    invisibleLastDay,
     focusedDay,
     tryToFocusCurrentlyDataIsFocusedDay,
     handleFocusMetaDay,
@@ -166,8 +195,9 @@ const useConfigCalendarCTX = () => {
     onNextMonthFocus,
     onNextYearFocus,
     isWithTimeWheelToo,
-    autoFocusPrevMonthArrow
-  }), [showCalendar, closeCalendar, setPopperElement, setArrowElement, usePopperHelpers, handleToggleCalendar, handleSetTriggerRef, handleMenuWrapperKeyDown, isControllerOnly, calendarDaysWrapperRef, prevYearBtnRef, prevMonthBtnRef, nextMonthBtnRef, nextYearBtnRef, currentMonth, currentYear, daysArray, focusedDay, tryToFocusCurrentlyDataIsFocusedDay, handleFocusMetaDay, handleFocusMetaDayByDay, resetFocusedDayToStartDate, handlePrevMonth, handlePrevYear, handleNextMonth, handleNextYear, handleDayOnKeyDown, handlePrevYearKeyDown, handlePrevMonthKeyDown, handleNextMonthKeyDown, handleNextYearKeyDown, handlePickerIconKeyDown, onPrevYearFocus, onPrevMonthFocus, onNextMonthFocus, onNextYearFocus, isWithTimeWheelToo, autoFocusPrevMonthArrow]);
+    autoFocusPrevMonthArrow,
+    ariaCurrentValueForInputs
+  }), [showCalendar, closeCalendar, setPopperElement, setArrowElement, usePopperHelpers, handleToggleCalendar, handleSetTriggerRef, handleMenuWrapperKeyDown, isControllerOnly, calendarDaysWrapperRef, prevYearBtnRef, prevMonthBtnRef, nextMonthBtnRef, nextYearBtnRef, currentMonth, currentYear, daysArray, invisibleFirstDay, daysMatrixByWeekday, invisibleLastDay, focusedDay, tryToFocusCurrentlyDataIsFocusedDay, handleFocusMetaDay, handleFocusMetaDayByDay, resetFocusedDayToStartDate, handlePrevMonth, handlePrevYear, handleNextMonth, handleNextYear, handleDayOnKeyDown, handlePrevYearKeyDown, handlePrevMonthKeyDown, handleNextMonthKeyDown, handleNextYearKeyDown, handlePickerIconKeyDown, onPrevYearFocus, onPrevMonthFocus, onNextMonthFocus, onNextYearFocus, isWithTimeWheelToo, autoFocusPrevMonthArrow, ariaCurrentValueForInputs]);
 };
 
 exports.useConfigCalendarCTX = useConfigCalendarCTX;

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var useGetMonthYearFromDateStringOrEmptyStartingMonth = require('../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js');
 var dateHelpers = require('../../../utils/dateHelpers.js');
 
-/* eslint-disable complexity */
 const useCurrentDisplayedMonthYearLogic = () => {
   const {
     month: monthFromDateString,

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

@@ -2,12 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var dateHelpers = require('../../../utils/dateHelpers.js');
 var useGetStartingFocusedDay = require('../../../utils/hooks/useGetStartingFocusedDay.js');
 
-/* eslint-disable complexity */
-
 // eslint-disable-next-line max-params
 const loopWhileWaiting = (cb, shortcircuit = () => false, timePerTry = 100, maxTries = 5) => {
   let ab = maxTries;

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactPopper = require('react-popper');
 var useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');
 
-/* eslint-disable complexity */
 const usePopperTriggerLogic = ({
   focusedDay,
   resetFocusedDayToStartDate,

package/cjs/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.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 Styleds = require('./Styleds.js');
 var CalendarWithTimeWheelFooter = require('./CalendarWithTimeWheelFooter.js');
 var TimeWheelContent = require('../TimeWheel/TimeWheelContent.js');
@@ -19,7 +20,8 @@ const CalendarWithTimeWheelContent = () => {
     isControllerOnly
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx__default["default"](Styleds.StyledCalendarWithTimeWheelWrapper, {
-    isControllerOnly: isControllerOnly
+    isControllerOnly: isControllerOnly,
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL
   }, void 0, _StyledCalendar || (_StyledCalendar = /*#__PURE__*/_jsx__default["default"](Styleds.StyledCalendar, {})), _TimeWheelContent || (_TimeWheelContent = /*#__PURE__*/_jsx__default["default"](TimeWheelContent.TimeWheelContent, {})), _CalendarWithTimeWhee || (_CalendarWithTimeWhee = /*#__PURE__*/_jsx__default["default"](CalendarWithTimeWheelFooter.CalendarWithTimeWheelFooter, {})));
 };
 

package/cjs/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.js

@@ -8,6 +8,7 @@ var React = require('react');
 const noop = () => {};
 
 const defaultCalendarWithTimeWheelContext = {
+  ariaCurrentValueForInputs: '',
   showCalendarWithTimeWheel: false,
   setPopperElement: noop,
   setArrowElement: noop,

package/cjs/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.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 CalendarWithTimeWheelContext = require('./CalendarWithTimeWheelContext.js');
+var Styleds = require('./Styleds.js');
 var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.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 useful 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 CalendarWithTimeWheelIconTrigger = () => {
   const {
     handleSetTriggerRef,
     handleToggleCalendarWithTimeWheel,
-    handlePickerIconKeyDown
+    handlePickerIconKeyDown,
+    ariaCurrentValueForInputs
   } = React.useContext(CalendarWithTimeWheelContext.CalendarWithTimeWheelContext);
-  return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
-    "aria-label": "date time 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 time picker context menu trigger, ".concat(ariaCurrentValueForInputs),
+    buttonType: "icon",
+    size: dsButton.BUTTON_SIZES.M,
+    variant: dsButton.BUTTON_VARIANT.DEFAULT,
     innerRef: handleSetTriggerRef,
     onClick: handleToggleCalendarWithTimeWheel,
     onKeyDown: handlePickerIconKeyDown,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL
-  }), [handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendarWithTimeWheel]);
+  }, void 0, /*#__PURE__*/_jsx__default["default"](DatePicker__default["default"], {
+    color: dsIcon.DSIconColors.PRIMARY
+  })), [ariaCurrentValueForInputs, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendarWithTimeWheel]);
 };
 
 exports.CalendarWithTimeWheelIconTrigger = CalendarWithTimeWheelIconTrigger;

package/cjs/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.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 CalendarWithTimeWheelContent = require('./CalendarWithTimeWheelContent.js');
 var CalendarWithTimeWheelContext = require('./CalendarWithTimeWheelContext.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -37,6 +38,7 @@ const CalendarWithTimeWheelWrapper = () => {
       zIndex: 110
     })
   }, attributes.popper), {}, {
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,
     children: [_CalendarWithTimeWhee2 || (_CalendarWithTimeWhee2 = /*#__PURE__*/_jsx__default["default"](CalendarWithTimeWheelContent.CalendarWithTimeWheelContent, {})), /*#__PURE__*/jsxRuntime.jsx("div", {
       ref: setArrowElement,
       style: styles.arrow

package/cjs/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/Styleds.js

@@ -3,15 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('styled-components');
+var dsButton = require('@elliemae/ds-button');
 var CalendarContent = require('../Calendar/CalendarContent.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledCalendarWithTimeWheelWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+const StyledIconTriggerButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
   componentId: "sc-h2xj8r-0"
-})(["background:", ";", " display:grid;grid-template-columns:260px 192px;grid-template-rows:1fr;column-gap:0;& > div:last-of-type{box-shadow:-1px 0 0 0 ", ";}"], ({
+})(["color:", ";width:26px;height:26px;"], ({
+  theme
+}) => theme.colors.brand['600']);
+const StyledCalendarWithTimeWheelWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-h2xj8r-1"
+})(["background:", ";", " display:grid;grid-template-columns:260px 192px;grid-template-rows:1fr;column-gap:0;& > div:last-of-type{box-shadow:-1px 0 0 0 ", ";margin-left:1px;}"], ({
   theme
 }) => theme.colors.neutral['000'], ({
   isControllerOnly
@@ -19,10 +25,10 @@ const StyledCalendarWithTimeWheelWrapper = /*#__PURE__*/styled__default["default
   theme
 }) => theme.colors.neutral[200]);
 const StyledCalendar = /*#__PURE__*/styled__default["default"](CalendarContent.CalendarContent).withConfig({
-  componentId: "sc-h2xj8r-1"
+  componentId: "sc-h2xj8r-2"
 })(["box-shadow:none;"]);
 const CalendarWithTimeWheelFooterMessage = /*#__PURE__*/styled__default["default"].footer.withConfig({
-  componentId: "sc-h2xj8r-2"
+  componentId: "sc-h2xj8r-3"
 })(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;grid-column:1/3;"], ({
   theme
 }) => theme.colors.neutral[300], ({
@@ -40,3 +46,4 @@ const CalendarWithTimeWheelFooterMessage = /*#__PURE__*/styled__default["default
 exports.CalendarWithTimeWheelFooterMessage = CalendarWithTimeWheelFooterMessage;
 exports.StyledCalendar = StyledCalendar;
 exports.StyledCalendarWithTimeWheelWrapper = StyledCalendarWithTimeWheelWrapper;
+exports.StyledIconTriggerButton = StyledIconTriggerButton;

package/cjs/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactPopper = require('react-popper');
 var ControlledDateTimePickerTypes = require('../../../ControlledDateTimePickerTypes.js');
@@ -10,7 +11,6 @@ var useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');
 var CalendarContext = require('../Calendar/CalendarContext.js');
 var TimeWheelContext = require('../TimeWheel/TimeWheelContext.js');
 
-/* eslint-disable max-statements */
 const useConfigCalendarWithTimeWheelCTX = () => {
   const {
     pickerButtonRef,
@@ -22,7 +22,8 @@ const useConfigCalendarWithTimeWheelCTX = () => {
     hideDate,
     hideTime,
     monthInputRef,
-    hourInputRef
+    hourInputRef,
+    ariaCurrentValueForInputs
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const {
     handleToggleCalendar
@@ -103,8 +104,9 @@ const useConfigCalendarWithTimeWheelCTX = () => {
     handleSetTriggerRef,
     handleMenuWrapperKeyDown,
     handlePickerIconKeyDown,
-    isControllerOnly
-  }), [showCalendarWithTimeWheel, usePopperHelpers, handleToggleCalendarWithTimeWheel, handleSetTriggerRef, handleMenuWrapperKeyDown, handlePickerIconKeyDown, isControllerOnly]);
+    isControllerOnly,
+    ariaCurrentValueForInputs
+  }), [showCalendarWithTimeWheel, usePopperHelpers, handleToggleCalendarWithTimeWheel, handleSetTriggerRef, handleMenuWrapperKeyDown, handlePickerIconKeyDown, isControllerOnly, ariaCurrentValueForInputs]);
 };
 
 exports.useConfigCalendarWithTimeWheelCTX = useConfigCalendarWithTimeWheelCTX;

package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/HoursList.js

@@ -5,8 +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 ChevronSmallUp = require('@elliemae/ds-icons/ChevronSmallUp');
-var ChevronSmallDown = require('@elliemae/ds-icons/ChevronSmallDown');
+var dsIcons = require('@elliemae/ds-icons');
 var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
 var numberHelpers = require('../../../utils/numberHelpers.js');
 var Styleds = require('./Styleds.js');
@@ -17,8 +16,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var ChevronSmallUp__default = /*#__PURE__*/_interopDefaultLegacy(ChevronSmallUp);
-var ChevronSmallDown__default = /*#__PURE__*/_interopDefaultLegacy(ChevronSmallDown);
 
 var _ChevronSmallUp, _ChevronSmallDown;
 
@@ -46,17 +43,17 @@ const HoursList = () => {
   } = React.useContext(TimeWheelContext.TimeWheelContext);
   return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelList, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelChangeTimeBtn, {
     "aria-label": "subtract one hour",
-    buttonType: "text",
-    leftIcon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](ChevronSmallUp__default["default"], {})),
+    buttonType: "raw",
     size: "m",
     onClick: handlePrevHour,
     onKeyDown: handlePrevHourBtnOnKeyDown,
     innerRef: prevHourBtnRef,
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
     tabIndex: -1
-  })), visibleHours.map(hourString => {
-    const key = `timewheel-hour-${hourString}`;
+  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})))), visibleHours.map(hourString => {
+    const key = "timewheel-hour-".concat(hourString);
     if (!hourString) return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, key);
-    const currHourTimeString = `${hourString}:${minutes || '00'} ${meridiem || 'AM'}`;
+    const currHourTimeString = "".concat(hourString, ":").concat(minutes || '00', " ").concat(meridiem || 'AM');
     const isEmptyCurrValueCurrentListItem = !hours && numberHelpers.convertToPositiveNumberIfPossible(hourString) === currHourNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || hours === hourString;
     const isDisabled = getIsDisabledTime(currHourTimeString);
@@ -67,34 +64,36 @@ const HoursList = () => {
     };
     return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
       isCurrentListItem: isCurrentListItem
-    }, key, /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledTimeBtn, _objectSpread({
+    }, key, /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledTimeBtn, _objectSpread(_objectSpread({
       isCurrentListItem: isCurrentListItem,
       autoFocus: autoFocusHourTimeWheel && isCurrentListItem,
-      "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'SELECTED_HOUR' : 'HOUR'],
+      "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_HOUR' : 'HOUR'],
       selected: hours.length === 2 && numberHelpers.convertToPositiveNumberIfPossible(hourString) === currHourNum,
-      "aria-label": `${hourString} hours`,
+      "aria-label": "".concat(hourString, " hours"),
       "aria-disabled": isDisabled,
       isDisabled: isDisabled,
-      buttonType: "text",
-      labelText: hourString,
+      buttonType: "raw",
       size: "m",
       onClick: e => handleTimeWheelBtnChangeHours(hourString, e),
       tabIndex: tabIndex,
       role: "spinbutton",
       "aria-valuemax": "12",
-      "aria-valuemin": "01",
-      "aria-valuenow": hourString
-    }, btnProps)));
+      "aria-valuemin": "1",
+      "aria-valuenow": currHourNum,
+      "aria-valuetext": "".concat(hourString, " hours")
+    }, btnProps), {}, {
+      children: hourString
+    })));
   }), /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelChangeTimeBtn, {
     "aria-label": "add one hour",
-    buttonType: "text",
-    leftIcon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](ChevronSmallDown__default["default"], {})),
+    buttonType: "raw",
     size: "m",
     onClick: handleNextHour,
     onKeyDown: handleNextHourBtnOnKeyDown,
     innerRef: nextHourBtnRef,
-    tabIndex: -1
-  })));
+    tabIndex: -1,
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR
+  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})))));
 };
 
 exports.HoursList = HoursList;