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

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 = () => {
@@ -33,34 +30,32 @@ const MeridiemList = () => {
   } = React.useContext(TimeWheelContext.TimeWheelContext);
   const isAmCurrent = !meridiem || meridiem === 'AM';
   const isPmCurrent = meridiem === 'PM';
-  const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;
-  const amTimeString = `${hourMinuteString} AM`;
-  const pmTimeString = `${hourMinuteString} PM`;
+  const hourMinuteString = "".concat(hours || '01', ":").concat(minutes || '00');
+  const amTimeString = "".concat(hourMinuteString, " AM");
+  const pmTimeString = "".concat(hourMinuteString, " PM");
   const isDisabledAm = getIsDisabledTime(amTimeString);
   const isDisabledPm = getIsDisabledTime(pmTimeString);
   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": "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-label": "AM ".concat(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'],
-    "aria-label": `PM ${isPmCurrent ? 'selected' : ''}`,
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM'],
+    "aria-label": "PM ".concat(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,17 +42,17 @@ 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 => {
-    const key = `timewheel-minutes-${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-".concat(minutesString);
     if (!minutesString) return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, key);
-    const currMinutesTimeString = `${hours || '01'}:${minutesString} ${meridiem || 'AM'}`;
+    const currMinutesTimeString = "".concat(hours || '01', ":").concat(minutesString, " ").concat(meridiem || 'AM');
     const isEmptyCurrValueCurrentListItem = !minutes && numberHelpers.convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;
     const isDisabled = getIsDisabledTime(currMinutesTimeString);
@@ -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-label": "".concat(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": "".concat(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,16 +43,15 @@ 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 => {
-    const key = `timewheel-seconds-${secondsString}`;
+  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](ChevronSmallUp__default["default"], {})))), visibleSeconds.map(secondsString => {
+    const key = "timewheel-seconds-".concat(secondsString);
     if (!secondsString) return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, key);
     const isEmptyCurrValueCurrentListItem = !seconds && numberHelpers.convertToPositiveNumberIfPossible(secondsString) === currSecondNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || seconds === secondsString;
@@ -63,26 +62,26 @@ const SecondsList = () => {
     };
     return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
       isCurrentListItem: isCurrentListItem
-    }, key, /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread({
-      "aria-label": `set ${secondsString} seconds`,
-      buttonType: "text",
-      labelText: secondsString,
+    }, key, /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread(_objectSpread({
+      "aria-label": "set ".concat(secondsString, " seconds"),
+      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,36 +4,38 @@ 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
-}) => showShadow && !isControllerOnly ? `
-  box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);
-  ` : '');
+}) => showShadow && !isControllerOnly ? "\n  box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);\n  " : '');
 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 +46,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 +58,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
@@ -72,81 +74,18 @@ const StyledTimeBtn = /*#__PURE__*/styled__default["default"](DSButton__default[
   theme,
   isDisabled,
   selected
-}) => isDisabled ? `
-    color: ${selected ? theme.colors.neutral['000'] : theme.colors.neutral[500]};
-    cursor: not-allowed;
-    background-color:${selected ? theme.colors.danger[900] : theme.colors.neutral['000']};
-    font-weight: ${selected ? theme.fontWeights.semibold : ''};
-
-    &:before {
-      cursor: not-allowed;
-      position: absolute;
-      content: '';
-      top: 47%;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      background-color: ${selected ? theme.colors.neutral['000'] : theme.colors.neutral[500]};
-      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']};
-      }
-    }
-  ` : `
-      ${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]};
-        }
-      }
-      ` : `
-      color: ${theme.colors.neutral[800]};
-      background-color:${theme.colors.neutral['000']};
-      `}
-  `, ({
+}) => isDisabled ? "\n    color: ".concat(selected ? theme.colors.neutral['000'] : theme.colors.neutral[500], ";\n    cursor: not-allowed;\n    background-color:").concat(selected ? theme.colors.danger[900] : theme.colors.neutral['000'], ";\n    font-weight: ").concat(selected ? theme.fontWeights.semibold : '', ";\n\n    &:before {\n      cursor: not-allowed;\n      position: absolute;\n      content: '';\n      top: 47%;\n      left: 0;\n      width: 100%;\n      height: 1px;\n      background-color: ").concat(selected ? theme.colors.neutral['000'] : theme.colors.neutral[500], ";\n      transform: rotate(45deg);\n      pointer-events: none;\n    }\n    &:hover {\n      color:").concat(selected ? theme.colors.neutral['000'] : theme.colors.neutral[500], ";\n      background-color:").concat(selected ? theme.colors.danger[900] : theme.colors.neutral['000'], ";\n    }\n  ") : "\n      ".concat(selected ? "\n      color: ".concat(theme.colors.neutral['000'], ";\n      background-color:").concat(theme.colors.brand[700], ";\n      font-weight: ").concat(theme.fontWeights.semibold, ";\n      &:hover {\n        color:").concat(theme.colors.neutral['000'], ";\n        background-color:").concat(theme.colors.brand[700], ";\n      }\n      ") : "\n      color: ".concat(theme.colors.neutral[800], ";\n      background-color:").concat(theme.colors.neutral['000'], ";\n      "), "\n  "), ({
   theme,
   isCurrentListItem,
   selected,
   isDisabled
-}) => isCurrentListItem && !selected ? `
-        color: ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};
-        &:after {
-          position: absolute;
-          content: '';
-          border-radius: 50%;
-          top: -2px;
-          left: -2px;
-          width: calc(100% + 4px);
-          height: calc(100% + 4px);
-          border: 2px solid ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};
-          pointer-events: none;
-        }
-        ${isDisabled ? `
-          color: ${theme.colors.danger[900]};
-          &.em-ds-button--text:not([disabled]) {
-            :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({
+}) => isCurrentListItem && !selected ? "\n        color: ".concat(isDisabled ? theme.colors.danger[900] : theme.colors.brand[700], ";\n        &:after {\n          position: absolute;\n          content: '';\n          border-radius: 50%;\n          top: -2px;\n          left: -2px;\n          width: calc(100% + 4px);\n          height: calc(100% + 4px);\n          border: 2px solid ").concat(isDisabled ? theme.colors.danger[900] : theme.colors.brand[700], ";\n          pointer-events: none;\n        }\n        ").concat(isDisabled ? "\n          color: ".concat(theme.colors.danger[900], ";\n          &:hover {\n            color:").concat(theme.colors.danger[900], ";\n          }          \n          &:before{\n            background-color: ").concat(theme.colors.danger[900], ";\n          }\n        ") : '', "\n        ") : '');
+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 +93,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 +108,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,8 +29,9 @@ const TimeWheelContent = /*#__PURE__*/React__default["default"].memo(({
   } = React.useContext(TimeWheelContext.TimeWheelContext);
   return /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerContainer, {
     showShadow: showShadow,
-    isControllerOnly: isControllerOnly
-  }, 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, {})));
+    isControllerOnly: isControllerOnly,
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerHead, {}, void 0, "".concat(hours || '__', ":").concat(minutes || '__', " ").concat(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, {})));
 });
 
 exports.TimeWheelContent = TimeWheelContent;

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,

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

@@ -4,7 +4,8 @@ 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 RecentDocuments = require('@elliemae/ds-icons/RecentDocuments');
 var TimeWheelContext = require('./TimeWheelContext.js');
 var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
@@ -12,10 +13,8 @@ var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePic
 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 RecentDocuments__default = /*#__PURE__*/_interopDefaultLegacy(RecentDocuments);
 
-var _RecentDocuments;
 // 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,18 +22,20 @@ const TimeWheelIconTrigger = () => {
   const {
     handleSetTriggerRef,
     handleToggleTimePicker,
-    handlePickerIconKeyDown
+    handlePickerIconKeyDown,
+    ariaCurrentValueForInputs
   } = React.useContext(TimeWheelContext.TimeWheelContext);
-  return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
-    "aria-label": "time picker context menu trigger",
-    buttonType: "text",
-    leftIcon: _RecentDocuments || (_RecentDocuments = /*#__PURE__*/_jsx__default["default"](RecentDocuments__default["default"], {})),
-    size: "m",
+  return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](dsButton.DSButtonV2, {
+    "aria-label": "time picker context menu trigger, ".concat(ariaCurrentValueForInputs),
+    buttonType: "icon",
+    size: dsButton.BUTTON_SIZES.M,
     innerRef: handleSetTriggerRef,
     onClick: handleToggleTimePicker,
     onKeyDown: handlePickerIconKeyDown,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL
-  }), [handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker]);
+  }, void 0, /*#__PURE__*/_jsx__default["default"](RecentDocuments__default["default"], {
+    color: dsIcon.DSIconColors.PRIMARY
+  })), [ariaCurrentValueForInputs, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker]);
 };
 
 exports.TimeWheelIconTrigger = TimeWheelIconTrigger;

package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheelWrapper.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 TimeWheelContent = require('./TimeWheelContent.js');
 var TimeWheelContext = require('./TimeWheelContext.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -39,6 +40,7 @@ const TimeWheelWrapper = () => {
       zIndex: 110
     })
   }, attributes.popper), {}, {
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL,
     children: [_TimeWheelContent2 || (_TimeWheelContent2 = /*#__PURE__*/_jsx__default["default"](TimeWheelContent.TimeWheelContent, {
       showShadow: true
     })), /*#__PURE__*/jsxRuntime.jsx("div", {

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

@@ -35,7 +35,8 @@ const useConfigTimePickerCTX = () => {
     nextMeridiemBtnRef,
     isControllerOnly,
     isWithCalendarToo,
-    autoFocusHourTimeWheel
+    autoFocusHourTimeWheel,
+    ariaCurrentValueForInputs
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const {
     currHourNum,
@@ -176,8 +177,9 @@ const useConfigTimePickerCTX = () => {
     prevMeridiemBtnRef,
     currMeridiemBtnRef,
     nextMeridiemBtnRef,
-    getIsDisabledTime
-  }), [tempTimeString, isControllerOnly, autoFocusHourTimeWheel, showTimePicker, setShowTimePicker, setPopperElement, setArrowElement, usePopperHelpers, handleToggleTimePicker, handleSetTriggerRef, handleMenuWrapperKeyDown, currHourNum, hours, visibleHours, handlePrevHour, handleNextHour, handleTimeWheelBtnChangeHours, currMinuteNum, minutes, visibleMinutes, handlePrevMinute, handleNextMinute, handleTimeWheelBtnChangeMinutes, meridiem, handleTimeWheelBtnChangeMeridiem, handlePrevHourBtnOnKeyDown, handleCurrHourOnKeyDown, handleNextHourBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, handleCurrMinutesOnKeyDown, handleNextMinuteBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handleCurrMeridiemOnKeyDown, handleNextMeridiemBtnOnKeyDown, handlePickerIconKeyDown, prevHourBtnRef, currHourBtnRef, nextHourBtnRef, prevMinutesBtnRef, currMinutesBtnRef, nextMinutesBtnRef, prevMeridiemBtnRef, currMeridiemBtnRef, nextMeridiemBtnRef, getIsDisabledTime]);
+    getIsDisabledTime,
+    ariaCurrentValueForInputs
+  }), [tempTimeString, isControllerOnly, autoFocusHourTimeWheel, showTimePicker, setShowTimePicker, setPopperElement, setArrowElement, usePopperHelpers, handleToggleTimePicker, handleSetTriggerRef, handleMenuWrapperKeyDown, currHourNum, hours, visibleHours, handlePrevHour, handleNextHour, handleTimeWheelBtnChangeHours, currMinuteNum, minutes, visibleMinutes, handlePrevMinute, handleNextMinute, handleTimeWheelBtnChangeMinutes, meridiem, handleTimeWheelBtnChangeMeridiem, handlePrevHourBtnOnKeyDown, handleCurrHourOnKeyDown, handleNextHourBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, handleCurrMinutesOnKeyDown, handleNextMinuteBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handleCurrMeridiemOnKeyDown, handleNextMeridiemBtnOnKeyDown, handlePickerIconKeyDown, prevHourBtnRef, currHourBtnRef, nextHourBtnRef, prevMinutesBtnRef, currMinutesBtnRef, nextMinutesBtnRef, prevMeridiemBtnRef, currMeridiemBtnRef, nextMeridiemBtnRef, getIsDisabledTime, ariaCurrentValueForInputs]);
 };
 
 exports.useConfigTimePickerCTX = useConfigTimePickerCTX;

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

@@ -15,7 +15,7 @@ const hoursStartPositionOffset = 1; // if array start from 01, this is 1, if sta
 
 const getTotalMinuteListWithStep = (step = 1) => {
   const length = Math.ceil(60 / step);
-  return new Array(length).fill('_').map((_v, i) => stringHelpers.prependStringWithPlaceHolders(`${i * step}`, 2));
+  return new Array(length).fill('_').map((_v, i) => stringHelpers.prependStringWithPlaceHolders("".concat(i * step), 2));
 };
 
 const useCurrentDisplayedWheelsLogic = ({
@@ -94,7 +94,7 @@ const useCurrentDisplayedWheelsLogic = ({
   }, [handleChangeHours]);
   const handleChangeCurrHour = React.useCallback((offset, e) => {
     const newH = currHourNum + offset;
-    if (newH > 0 && newH <= 12) handleChangeHours(stringHelpers.prependStringWithPlaceHolders(`${newH}`, 2), e);
+    if (newH > 0 && newH <= 12) handleChangeHours(stringHelpers.prependStringWithPlaceHolders("".concat(newH), 2), e);
   }, [currHourNum, handleChangeHours]);
   const handlePrevHour = React.useCallback(e => {
     handleChangeCurrHour(-1, e);
@@ -107,7 +107,7 @@ const useCurrentDisplayedWheelsLogic = ({
   }, [handleChangeMinutes]);
   const handleChangeCurrMinute = React.useCallback((offset, e) => {
     const newM = currMinuteNum + offset;
-    if (newM >= 0 && newM <= 59) handleChangeMinutes(stringHelpers.prependStringWithPlaceHolders(`${newM}`, 2), e);
+    if (newM >= 0 && newM <= 59) handleChangeMinutes(stringHelpers.prependStringWithPlaceHolders("".concat(newM), 2), e);
   }, [currMinuteNum, handleChangeMinutes]);
   const handlePrevMinute = React.useCallback(e => {
     handleChangeCurrMinute(-minutesInterval, e);

package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/usePopperTriggerLogic.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 useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');