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

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

@@ -3,40 +3,77 @@
 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 ", ";}"], ({
-  theme
-}) => theme.colors.neutral['000'], ({
-  isControllerOnly
-}) => isControllerOnly ? undefined : 'box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);', ({
-  theme
-}) => theme.colors.neutral[200]);
-const StyledCalendar = /*#__PURE__*/styled__default['default'](CalendarContent.CalendarContent).withConfig({
+})(["color:", ";width:26px;height:26px;"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.brand['600'];
+});
+const StyledCalendarWithTimeWheelWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-h2xj8r-1"
-})(["box-shadow:none;"]);
-const CalendarWithTimeWheelFooterMessage = /*#__PURE__*/styled__default['default'].footer.withConfig({
+})(["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;}"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral['000'];
+}, _ref3 => {
+  let {
+    isControllerOnly
+  } = _ref3;
+  return isControllerOnly ? undefined : 'box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);';
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.neutral[200];
+});
+const StyledCalendar = /*#__PURE__*/styled__default["default"](CalendarContent.CalendarContent).withConfig({
   componentId: "sc-h2xj8r-2"
-})(["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], ({
-  theme
-}) => theme.space.xxs2, ({
-  theme
-}) => theme.space.xxs2, ({
-  theme
-}) => theme.colors.danger[900], ({
-  theme
-}) => theme.fontWeights.thin, ({
-  theme
-}) => theme.fontSizes.microText[200]);
+})(["box-shadow:none;"]);
+const CalendarWithTimeWheelFooterMessage = /*#__PURE__*/styled__default["default"].footer.withConfig({
+  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;"], _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral[300];
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.space.xxs2;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.space.xxs2;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.danger[900];
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.fontWeights.thin;
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.fontSizes.microText[200];
+});
 
 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');
@@ -9,20 +10,26 @@ var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.
 var useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');
 var CalendarContext = require('../Calendar/CalendarContext.js');
 var TimeWheelContext = require('../TimeWheel/TimeWheelContext.js');
+var constants = require('../../../utils/constants.js');
 
-/* eslint-disable max-statements */
 const useConfigCalendarWithTimeWheelCTX = () => {
   const {
     pickerButtonRef,
     props: {
       type,
       onPickerOpen,
-      onPickerClose
+      onPickerClose,
+      disabled
     },
     hideDate,
     hideTime,
     monthInputRef,
-    hourInputRef
+    hourInputRef,
+    withAnyInputs,
+    isWithTimeInputs,
+    meridiemInputRef,
+    yearInputRef,
+    ariaCurrentValueForInputs
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const {
     handleToggleCalendar
@@ -40,10 +47,16 @@ const useConfigCalendarWithTimeWheelCTX = () => {
     const {
       key
     } = e;
-    const preventDefaultKeys = ['Home'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (constants.homeEndKeys.includes(key)) e.preventDefault();
+    if (constants.homeEndKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
-  }, [onHomeKeyDown]);
+
+    if (key === 'Backspace' && withAnyInputs) {
+      var _meridiemInputRef$cur, _meridiemInputRef$cur2, _yearInputRef$current, _yearInputRef$current2;
+
+      if (isWithTimeInputs) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur = meridiemInputRef.current) === null || _meridiemInputRef$cur === void 0 ? void 0 : (_meridiemInputRef$cur2 = _meridiemInputRef$cur.focus) === null || _meridiemInputRef$cur2 === void 0 ? void 0 : _meridiemInputRef$cur2.call(_meridiemInputRef$cur);else yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current = yearInputRef.current) === null || _yearInputRef$current === void 0 ? void 0 : (_yearInputRef$current2 = _yearInputRef$current.focus) === null || _yearInputRef$current2 === void 0 ? void 0 : _yearInputRef$current2.call(_yearInputRef$current);
+    }
+  }, [isWithTimeInputs, meridiemInputRef, onHomeKeyDown, withAnyInputs, yearInputRef]);
   const [referenceElement, setReferenceElement] = React.useState(null);
   const [popperElement, setPopperElement] = React.useState(null);
   const [arrowElement, setArrowElement] = React.useState(null);
@@ -101,8 +114,10 @@ const useConfigCalendarWithTimeWheelCTX = () => {
     handleSetTriggerRef,
     handleMenuWrapperKeyDown,
     handlePickerIconKeyDown,
-    isControllerOnly
-  }), [showCalendarWithTimeWheel, usePopperHelpers, handleToggleCalendarWithTimeWheel, handleSetTriggerRef, handleMenuWrapperKeyDown, handlePickerIconKeyDown, isControllerOnly]);
+    isControllerOnly,
+    disabled,
+    ariaCurrentValueForInputs
+  }), [showCalendarWithTimeWheel, usePopperHelpers, handleToggleCalendarWithTimeWheel, handleSetTriggerRef, handleMenuWrapperKeyDown, handlePickerIconKeyDown, isControllerOnly, disabled, ariaCurrentValueForInputs]);
 };
 
 exports.useConfigCalendarWithTimeWheelCTX = useConfigCalendarWithTimeWheelCTX;

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

@@ -25,11 +25,11 @@ const PickersIcons = () => {
     props: {
       hasError
     }
-  } = React__default['default'].useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  return /*#__PURE__*/_jsx__default['default'](Styleds.StyledPickersIconsWrapperGrid, {
+  } = React__default["default"].useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  return /*#__PURE__*/_jsx__default["default"](Styleds.StyledPickersIconsWrapperGrid, {
     hasError: hasError,
     isControllerOnly: isControllerOnly
-  }, void 0, !hideDatePicker && hideTimePicker && hideDateTimePicker ? _Calendar || (_Calendar = /*#__PURE__*/_jsx__default['default'](Calendar.Calendar, {})) : null, hideDatePicker && !hideTimePicker && hideDateTimePicker ? _TimeWheel || (_TimeWheel = /*#__PURE__*/_jsx__default['default'](TimeWheel.TimeWheel, {})) : null, hideDatePicker && hideTimePicker && !hideDateTimePicker ? _CalendarWithTimeWhee || (_CalendarWithTimeWhee = /*#__PURE__*/_jsx__default['default'](CalendarWithTimeWheel.CalendarWithTimeWheel, {})) : null);
+  }, void 0, !hideDatePicker && hideTimePicker && hideDateTimePicker ? _Calendar || (_Calendar = /*#__PURE__*/_jsx__default["default"](Calendar.Calendar, {})) : null, hideDatePicker && !hideTimePicker && hideDateTimePicker ? _TimeWheel || (_TimeWheel = /*#__PURE__*/_jsx__default["default"](TimeWheel.TimeWheel, {})) : null, hideDatePicker && hideTimePicker && !hideDateTimePicker ? _CalendarWithTimeWhee || (_CalendarWithTimeWhee = /*#__PURE__*/_jsx__default["default"](CalendarWithTimeWheel.CalendarWithTimeWheel, {})) : null);
 };
 
 exports.PickersIcons = PickersIcons;

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

@@ -4,9 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 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,14 +23,12 @@ 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;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const HoursList = () => {
   const {
     currHourNum,
@@ -41,21 +45,22 @@ const HoursList = () => {
     prevHourBtnRef,
     currHourBtnRef,
     nextHourBtnRef,
-    getIsDisabledTime
+    getIsDisabledTime,
+    autoFocusHourTimeWheel
   } = 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, {
+  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}`;
-    if (!hourString) return /*#__PURE__*/_jsx__default['default'](Styleds.StyledWheelListItem, {}, key);
-    const currHourTimeString = `${hourString}:${minutes || '00'} ${meridiem || 'AM'}`;
+  }, 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 = "".concat(hourString, ":").concat(minutes || '00', " ").concat(meridiem || 'AM');
     const isEmptyCurrValueCurrentListItem = !hours && numberHelpers.convertToPositiveNumberIfPossible(hourString) === currHourNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || hours === hourString;
     const isDisabled = getIsDisabledTime(currHourTimeString);
@@ -64,31 +69,38 @@ const HoursList = () => {
       onKeyDown: isCurrentListItem ? handleCurrHourOnKeyDown : undefined,
       innerRef: isCurrentListItem ? currHourBtnRef : undefined
     };
-    return /*#__PURE__*/_jsx__default['default'](Styleds.StyledWheelListItem, {
+    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,
-      "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'SELECTED_HOUR' : 'HOUR'],
+      autoFocus: autoFocusHourTimeWheel && isCurrentListItem,
+      "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_HOUR' : 'HOUR'],
       selected: hours.length === 2 && numberHelpers.convertToPositiveNumberIfPossible(hourString) === currHourNum,
-      "aria-label": `select ${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
-    }, btnProps)));
-  }), /*#__PURE__*/_jsx__default['default'](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default['default'](Styleds.StyledWheelChangeTimeBtn, {
+      tabIndex: tabIndex,
+      role: "spinbutton",
+      "aria-valuemax": "12",
+      "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;

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,69 +30,75 @@ 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, {
+  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, {
+  }, 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": "set am meridiem",
+    "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,
     innerRef: isAmCurrent ? currMeridiemBtnRef : undefined,
-    tabIndex: isAmCurrent ? 0 : -1
-  })), /*#__PURE__*/_jsx__default['default'](Styleds.StyledWheelListItem, {
+    tabIndex: isAmCurrent ? 0 : -1,
+    role: "spinbutton",
+    "aria-valuemax": "1",
+    "aria-valuemin": "0",
+    "aria-valuenow": isPmCurrent ? '1' : '0',
+    "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, {
+  }, 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'],
     selected: meridiem === 'PM',
-    "aria-label": "set pm 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,
     innerRef: isPmCurrent ? currMeridiemBtnRef : undefined,
-    tabIndex: isPmCurrent ? 0 : -1
-  })), 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, {
+    tabIndex: isPmCurrent ? 0 : -1,
+    role: "spinbutton",
+    "aria-valuemax": "1",
+    "aria-valuemin": "0",
+    "aria-valuenow": isPmCurrent ? '1' : '0',
+    "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;
-exports['default'] = MeridiemList;
+exports["default"] = MeridiemList;

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

@@ -4,9 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 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,14 +23,12 @@ 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;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const MinutesList = () => {
   const {
     currMinuteNum,
@@ -43,19 +47,19 @@ const MinutesList = () => {
     nextMinutesBtnRef,
     getIsDisabledTime
   } = 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, {
+  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}`;
-    if (!minutesString) return /*#__PURE__*/_jsx__default['default'](Styleds.StyledWheelListItem, {}, key);
-    const currMinutesTimeString = `${hours || '01'}:${minutesString} ${meridiem || 'AM'}`;
+    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 = "".concat(hours || '01', ":").concat(minutesString, " ").concat(meridiem || 'AM');
     const isEmptyCurrValueCurrentListItem = !minutes && numberHelpers.convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;
     const isDisabled = getIsDisabledTime(currMinutesTimeString);
@@ -64,33 +68,39 @@ const MinutesList = () => {
       onKeyDown: isCurrentListItem ? handleCurrMinutesOnKeyDown : undefined,
       innerRef: isCurrentListItem ? currMinutesBtnRef : undefined
     };
-    return /*#__PURE__*/_jsx__default['default'](Styleds.StyledWheelListItem, {
+    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": `set ${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
-    }, btnProps)));
-  }), /*#__PURE__*/_jsx__default['default'](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default['default'](Styleds.StyledWheelChangeTimeBtn, {
+      tabIndex: tabIndex,
+      role: "spinbutton",
+      "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;
-exports['default'] = MinutesList;
+exports["default"] = MinutesList;