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

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, ${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

@@ -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,14 +43,14 @@ 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 => {
+  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})))), visibleHours.map(hourString => {
     const key = `timewheel-hour-${hourString}`;
     if (!hourString) return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, key);
     const currHourTimeString = `${hourString}:${minutes || '00'} ${meridiem || 'AM'}`;
@@ -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-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": `${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;

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

@@ -4,8 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 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 Styleds = require('./Styleds.js');
 var TimeWheelContext = require('./TimeWheelContext.js');
@@ -13,8 +12,6 @@ var TimeWheelContext = require('./TimeWheelContext.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var ChevronSmallUp__default = /*#__PURE__*/_interopDefaultLegacy(ChevronSmallUp);
-var ChevronSmallDown__default = /*#__PURE__*/_interopDefaultLegacy(ChevronSmallDown);
 
 var _ChevronSmallUp, _StyledWheelListItem, _StyledWheelListItem2, _ChevronSmallDown;
 const MeridiemList = () => {
@@ -42,25 +39,23 @@ const MeridiemList = () => {
     "aria-label": "set am meridiem",
     "aria-disabled": isDisabledAm,
     isDisabled: isDisabledAm,
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.MERIDIEM,
-    buttonType: "text",
-    leftIcon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](ChevronSmallUp__default["default"], {})),
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MERIDIEM,
+    buttonType: "raw",
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('AM', e),
     onKeyDown: handlePrevMeridiemBtnOnKeyDown,
     innerRef: prevMeridiemBtnRef,
     tabIndex: -1
-  })), meridiem === 'AM' || meridiem === '' ? _StyledWheelListItem || (_StyledWheelListItem = /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
+  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})))), meridiem === 'AM' || meridiem === '' ? _StyledWheelListItem || (_StyledWheelListItem = /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
     isCurrentListItem: isAmCurrent
   }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimeBtn, {
     isCurrentListItem: isAmCurrent,
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? 'SELECTED_MERIDIEM' : 'MERIDIEM'],
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM'],
     selected: meridiem === 'AM',
     "aria-label": `AM ${isAmCurrent ? 'selected' : ''}`,
     "aria-disabled": isDisabledAm,
     isDisabled: isDisabledAm,
-    buttonType: "text",
-    labelText: "AM",
+    buttonType: "raw",
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('AM', e),
     onKeyDown: isAmCurrent ? handleCurrMeridiemOnKeyDown : undefined,
@@ -70,17 +65,16 @@ const MeridiemList = () => {
     "aria-valuemax": "1",
     "aria-valuemin": "0",
     "aria-valuenow": isPmCurrent ? '1' : '0',
-    "aria-valuetext": isPmCurrent ? 'PM' : 'AM'
-  })), /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
+    "aria-valuetext": isAmCurrent ? 'ante meridiem' : 'post meridiem'
+  }, void 0, "AM")), /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
     isCurrentListItem: isPmCurrent
   }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimeBtn, {
     isCurrentListItem: isPmCurrent,
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'SELECTED_MERIDIEM' : 'MERIDIEM'],
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM'],
     "aria-label": `PM ${isPmCurrent ? 'selected' : ''}`,
     "aria-disabled": isDisabledPm,
     isDisabled: isDisabledPm,
-    buttonType: "text",
-    labelText: "PM",
+    buttonType: "raw",
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('PM', e),
     onKeyDown: isPmCurrent ? handleCurrMeridiemOnKeyDown : undefined,
@@ -90,20 +84,19 @@ const MeridiemList = () => {
     "aria-valuemax": "1",
     "aria-valuemin": "0",
     "aria-valuenow": isPmCurrent ? '1' : '0',
-    "aria-valuetext": isPmCurrent ? 'PM' : 'AM'
-  })), meridiem === 'PM' ? _StyledWheelListItem2 || (_StyledWheelListItem2 = /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelChangeTimeBtn, {
+    "aria-valuetext": isAmCurrent ? 'ante meridiem' : 'post meridiem'
+  }, void 0, "PM")), meridiem === 'PM' ? _StyledWheelListItem2 || (_StyledWheelListItem2 = /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelChangeTimeBtn, {
     "aria-label": "set pm meridiem",
     "aria-disabled": isDisabledPm,
     isDisabled: isDisabledPm,
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.MERIDIEM,
-    buttonType: "text",
-    leftIcon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](ChevronSmallDown__default["default"], {})),
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MERIDIEM,
+    buttonType: "raw",
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('PM', e),
     onKeyDown: handleNextMeridiemBtnOnKeyDown,
     innerRef: nextMeridiemBtnRef,
     tabIndex: -1
-  })));
+  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})))));
 };
 
 exports.MeridiemList = MeridiemList;

package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/MinutesList.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;
 
@@ -45,14 +42,14 @@ const MinutesList = () => {
   } = 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 minute",
-    buttonType: "text",
-    leftIcon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](ChevronSmallUp__default["default"], {})),
+    buttonType: "raw",
     size: "m",
     onClick: handlePrevMinute,
     onKeyDown: handlePrevMinuteBtnOnKeyDown,
     innerRef: prevMinutesBtnRef,
-    tabIndex: -1
-  })), visibleMinutes.map(minutesString => {
+    tabIndex: -1,
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE
+  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})))), visibleMinutes.map(minutesString => {
     const key = `timewheel-minutes-${minutesString}`;
     if (!minutesString) return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, key);
     const currMinutesTimeString = `${hours || '01'}:${minutesString} ${meridiem || 'AM'}`;
@@ -67,33 +64,35 @@ const MinutesList = () => {
     return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
       isCurrentListItem: isCurrentListItem,
       selected: numberHelpers.convertToPositiveNumberIfPossible(minutesString) === currMinuteNum
-    }, key, /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledTimeBtn, _objectSpread({
+    }, key, /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledTimeBtn, _objectSpread(_objectSpread({
       isCurrentListItem: isCurrentListItem,
-      "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'SELECTED_MINUTE' : 'MINUTE'],
+      "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_MINUTE' : 'MINUTE'],
       selected: minutes.length === 2 && numberHelpers.convertToPositiveNumberIfPossible(minutesString) === currMinuteNum,
       "aria-label": `${minutesString} minutes`,
       "aria-disabled": isDisabled,
       isDisabled: isDisabled,
-      buttonType: "text",
-      labelText: minutesString,
+      buttonType: "raw",
       size: "m",
       onClick: e => handleTimeWheelBtnChangeMinutes(minutesString, e),
       tabIndex: tabIndex,
       role: "spinbutton",
-      "aria-valuemax": "60",
-      "aria-valuemin": "00",
-      "aria-valuenow": minutesString
-    }, btnProps)));
+      "aria-valuemax": "59",
+      "aria-valuemin": "0",
+      "aria-valuenow": currMinuteNum,
+      "aria-valuetext": `${minutesString} minutes`
+    }, btnProps), {}, {
+      children: minutesString
+    })));
   }), /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelChangeTimeBtn, {
     "aria-label": "add one minute",
-    buttonType: "text",
-    leftIcon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](ChevronSmallDown__default["default"], {})),
+    buttonType: "raw",
     size: "m",
     onClick: handleNextMinute,
     onKeyDown: handleNextMinuteBtnOnKeyDown,
     innerRef: nextMinutesBtnRef,
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
     tabIndex: -1
-  })));
+  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})))));
 };
 
 exports.MinutesList = MinutesList;

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

@@ -43,15 +43,14 @@ const SecondsList = () => {
   } = 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 minute",
-    buttonType: "text",
-    leftIcon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](ChevronSmallUp__default["default"], {})),
+    buttonType: "raw",
     size: "m",
     variant: DSButton.BUTTON_VARIANT.DEFAULT,
     onClick: handlePrevSecond,
     onKeyDown: handlePrevSecondBtnOnKeyDown,
     innerRef: prevSecondsBtnRef,
     tabIndex: -1
-  })), visibleSeconds.map(secondsString => {
+  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](ChevronSmallUp__default["default"], {})))), visibleSeconds.map(secondsString => {
     const key = `timewheel-seconds-${secondsString}`;
     if (!secondsString) return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, key);
     const isEmptyCurrValueCurrentListItem = !seconds && numberHelpers.convertToPositiveNumberIfPossible(secondsString) === currSecondNum;
@@ -63,26 +62,26 @@ const SecondsList = () => {
     };
     return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
       isCurrentListItem: isCurrentListItem
-    }, key, /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread({
+    }, key, /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread(_objectSpread({
       "aria-label": `set ${secondsString} seconds`,
-      buttonType: "text",
-      labelText: secondsString,
+      buttonType: "raw",
       size: "l",
       variant: DSButton.BUTTON_VARIANT.DEFAULT,
       onClick: e => handleTimeWheelBtnChangeSeconds(secondsString, e),
       tabIndex: tabIndex
-    }, btnProps)));
+    }, btnProps), {}, {
+      children: secondsString
+    })));
   }), /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelChangeTimeBtn, {
     "aria-label": "add one minute",
-    buttonType: "text",
-    leftIcon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](ChevronSmallDown__default["default"], {})),
+    buttonType: "raw",
     size: "m",
     variant: DSButton.BUTTON_VARIANT.DEFAULT,
     onClick: handleNextSecond,
     onKeyDown: handleNextSecondBtnOnKeyDown,
     innerRef: nextSecondsBtnRef,
     tabIndex: -1
-  })));
+  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](ChevronSmallDown__default["default"], {})))));
 };
 
 exports.SecondsList = SecondsList;

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

@@ -4,23 +4,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('styled-components');
 var dsGrid = require('@elliemae/ds-grid');
-var DSButton = require('@elliemae/ds-basic/Button');
+var dsButton = require('@elliemae/ds-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
 /* eslint-disable max-lines */
-const StyledWheelList = /*#__PURE__*/styled__default["default"].ul.withConfig({
+const StyledIconTriggerButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
   componentId: "sc-1nsw31l-0"
-})(["width:100%;height:100%;list-style:none;margin:auto;padding:0;position:relative;display:flex;flex-direction:column;align-items:center;&:focus-within{&:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;border:2px solid ", ";box-shadow:0 0 2px ", ";}}"], ({
+})(["color:", ";width:26px;height:26px;"], ({
+  theme
+}) => theme.colors.brand['600']);
+const StyledWheelList = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1nsw31l-1"
+})(["width:100%;height:100%;margin:auto;padding:0;position:relative;display:flex;flex-direction:column;align-items:center;&:focus-within{&:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;border:2px solid ", ";box-shadow:0 0 2px ", ";}}"], ({
   theme
 }) => theme.colors.brand[700], ({
   theme
 }) => theme.colors.brand[700]);
 const StyledTimePickerContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-1nsw31l-1"
+  componentId: "sc-1nsw31l-2"
 })(["display:grid;position:relative;grid-template-columns:192px;grid-template-rows:36px 30px auto;grid-template-areas:'TimePickerHead' 'TimePickerWheelsLegend' 'VerticalWheelWrapper';", ""], ({
   showShadow,
   isControllerOnly
@@ -28,12 +32,12 @@ const StyledTimePickerContainer = /*#__PURE__*/styled__default["default"].div.wi
   box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);
   ` : '');
 const StyledTimePickerHead = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
-  componentId: "sc-1nsw31l-2"
+  componentId: "sc-1nsw31l-3"
 })(["width:100%;grid-area:TimePickerHead;justify-content:center;align-items:center;background:", ";"], ({
   theme
 }) => theme.colors.neutral['050']);
 const StyledTimePickerWheelsLegend = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-1nsw31l-3"
+  componentId: "sc-1nsw31l-4"
 })(["width:100%;height:100;grid-area:TimePickerWheelsLegend;display:grid;grid-template-columns:", " ", " ", ";align-items:center;justify-content:center;text-align:center;background:", ";"], ({
   theme
 }) => theme.space.xl, ({
@@ -44,7 +48,7 @@ const StyledTimePickerWheelsLegend = /*#__PURE__*/styled__default["default"].div
   theme
 }) => theme.colors.neutral['050']);
 const StyledTimePickerWheelWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-1nsw31l-4"
+  componentId: "sc-1nsw31l-5"
 })(["width:100%;background:", ";grid-area:VerticalWheelWrapper;display:grid;grid-template-columns:", " ", " ", ";grid-template-rows:100%;& ul:not(:last-child){position:relative;&:after{content:'';position:absolute;left:100%;top:5%;height:90%;width:1px;background:", ";}}"], ({
   theme
 }) => theme.colors.neutral['000'], ({
@@ -56,9 +60,9 @@ const StyledTimePickerWheelWrapper = /*#__PURE__*/styled__default["default"].div
 }) => theme.space.xl, ({
   theme
 }) => theme.colors.neutral[200]);
-const StyledTimeBtn = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
-  componentId: "sc-1nsw31l-5"
-})(["position:relative;height:", ";width:", ";min-width:", ";padding:0;border-radius:50%;font-weight:", ";color:", ";&.em-ds-button--text:not([disabled]){}&:focus:not([disabled]){&:after{border:none;}}", " ", ""], ({
+const StyledTimeBtn = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
+  componentId: "sc-1nsw31l-6"
+})(["position:relative;height:", ";width:", ";min-width:", ";padding:0;border-radius:50%;font-weight:", ";color:", ";&:focus:not([disabled]){&:after{border:none;}}", " ", ""], ({
   theme
 }) => theme.space.s, ({
   theme
@@ -90,22 +94,18 @@ const StyledTimeBtn = /*#__PURE__*/styled__default["default"](DSButton__default[
       transform: rotate(45deg);
       pointer-events: none;
     }
-    &.em-ds-button--text:not([disabled]) {
-      :hover {
-        color:${selected ? theme.colors.neutral['000'] : theme.colors.neutral[500]};
-        background-color:${selected ? theme.colors.danger[900] : theme.colors.neutral['000']};
-      }
+    &:hover {
+      color:${selected ? theme.colors.neutral['000'] : theme.colors.neutral[500]};
+      background-color:${selected ? theme.colors.danger[900] : theme.colors.neutral['000']};
     }
   ` : `
       ${selected ? `
       color: ${theme.colors.neutral['000']};
       background-color:${theme.colors.brand[700]};
       font-weight: ${theme.fontWeights.semibold};
-      &.em-ds-button--text:not([disabled]) {
-        :hover {
-          color:${theme.colors.neutral['000']};
-          background-color:${theme.colors.brand[700]};
-        }
+      &:hover {
+        color:${theme.colors.neutral['000']};
+        background-color:${theme.colors.brand[700]};
       }
       ` : `
       color: ${theme.colors.neutral[800]};
@@ -131,22 +131,20 @@ const StyledTimeBtn = /*#__PURE__*/styled__default["default"](DSButton__default[
         }
         ${isDisabled ? `
           color: ${theme.colors.danger[900]};
-          &.em-ds-button--text:not([disabled]) {
-            :hover {
-              color:${theme.colors.danger[900]};
-            }
-          }
+          &:hover {
+            color:${theme.colors.danger[900]};
+          }          
           &:before{
             background-color: ${theme.colors.danger[900]};
           }
-        ` : undefined}
-        ` : undefined);
-const StyledWheelListItem = /*#__PURE__*/styled__default["default"].li.withConfig({
-  componentId: "sc-1nsw31l-6"
-})(["margin:auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;position:relative;"]);
-const StyledWheelChangeTimeBtn = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
+        ` : ''}
+        ` : '');
+const StyledWheelListItem = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1nsw31l-7"
-})(["height:", ";width:", ";min-width:", ";border-radius:50%;&.em-ds-button--text.em-ds-button--text:not([disabled]),&.em-ds-button--text.em-ds-button--variant-focus{&:focus{&:after{border:none;}}}"], ({
+})(["margin:auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;position:relative;"]);
+const StyledWheelChangeTimeBtn = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
+  componentId: "sc-1nsw31l-8"
+})(["height:", ";width:", ";min-width:", ";border-radius:50%;"], ({
   theme
 }) => theme.space.s, ({
   theme
@@ -154,7 +152,7 @@ const StyledWheelChangeTimeBtn = /*#__PURE__*/styled__default["default"](DSButto
   theme
 }) => theme.space.s);
 const TimeWheelFooterMessage = /*#__PURE__*/styled__default["default"].footer.withConfig({
-  componentId: "sc-1nsw31l-8"
+  componentId: "sc-1nsw31l-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], ({
@@ -169,6 +167,7 @@ const TimeWheelFooterMessage = /*#__PURE__*/styled__default["default"].footer.wi
   theme
 }) => theme.fontSizes.microText[200]);
 
+exports.StyledIconTriggerButton = StyledIconTriggerButton;
 exports.StyledTimeBtn = StyledTimeBtn;
 exports.StyledTimePickerContainer = StyledTimePickerContainer;
 exports.StyledTimePickerHead = StyledTimePickerHead;

package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheelContent.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 HoursList = require('./HoursList.js');
 var MinutesList = require('./MinutesList.js');
@@ -28,7 +29,8 @@ const TimeWheelContent = /*#__PURE__*/React__default["default"].memo(({
   } = React.useContext(TimeWheelContext.TimeWheelContext);
   return /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerContainer, {
     showShadow: showShadow,
-    isControllerOnly: isControllerOnly
+    isControllerOnly: isControllerOnly,
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL
   }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerHead, {}, void 0, `${hours || '__'}:${minutes || '__'} ${meridiem || '__'}`), _StyledTimePickerWhee || (_StyledTimePickerWhee = /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerWheelsLegend, {}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "H"), /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "M"), /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "A"))), _StyledTimePickerWhee2 || (_StyledTimePickerWhee2 = /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerWheelWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](HoursList.HoursList, {}), /*#__PURE__*/_jsx__default["default"](MinutesList.MinutesList, {}), /*#__PURE__*/_jsx__default["default"](MeridiemList.MeridiemList, {}))), _TimeWheelFooter || (_TimeWheelFooter = /*#__PURE__*/_jsx__default["default"](TimeWheelFooter.TimeWheelFooter, {})));
 });
 

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

@@ -10,6 +10,7 @@ var React = require('react');
 const noop = () => {};
 
 const defaultTimePickerContext = {
+  ariaCurrentValueForInputs: '',
   tempTimeString: '',
   showTimePicker: false,
   setShowTimePicker: noop,