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

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

@@ -1,11 +1,23 @@
-import { useContext, useState, useCallback, useMemo } from 'react';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useContext, useState, useMemo, useCallback } from 'react';
 import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { useKeyboardHandlers } from './useKeyboardHandlers.js';
 import { useFocusLogic } from './useFocusLogic.js';
 import { usePopperTriggerLogic } from './usePopperTriggerLogic.js';
 import { useCurrentDisplayedMonthYearLogic } from './useCurrentDisplayedMonthYearLogic.js';
 
-/* eslint-disable complexity */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function sliceIntoChunks(arr, chunkSize) {
+  const res = [];
+
+  for (let i = 0; i < arr.length; i += chunkSize) {
+    const chunk = arr.slice(i, i + chunkSize);
+    res.push(chunk);
+  }
+
+  return res;
+}
+
 const useConfigCalendarCTX = () => {
   const {
     pickerButtonRef,
@@ -28,7 +40,8 @@ const useConfigCalendarCTX = () => {
     isControllerOnly,
     isWithTimeWheelToo,
     setLatestInteractionRegion,
-    autoFocusPrevMonthArrow
+    autoFocusPrevMonthArrow,
+    ariaCurrentValueForInputs
   } = useContext(ControlledDateTimePickerContext);
   const [showCalendar, setShowCalendar] = useState(false);
   const {
@@ -40,6 +53,19 @@ const useConfigCalendarCTX = () => {
     handleNextMonth,
     handleNextYear
   } = useCurrentDisplayedMonthYearLogic();
+  const {
+    invisibleFirstDay,
+    daysMatrixByWeekday,
+    invisibleLastDay
+  } = useMemo(() => {
+    const [invisible1stDay, ...otherDays] = [...daysArray];
+    const invisibleDayLast = otherDays.pop();
+    return {
+      invisibleFirstDay: invisible1stDay,
+      daysMatrixByWeekday: sliceIntoChunks(otherDays, 7),
+      invisibleLastDay: invisibleDayLast
+    };
+  }, [daysArray]);
   const setLatestInteractionRegionCalendarHead = useCallback(() => {
     setLatestInteractionRegion('calendar-head');
   }, [setLatestInteractionRegion]);
@@ -142,6 +168,9 @@ const useConfigCalendarCTX = () => {
     currentMonth,
     currentYear,
     daysArray,
+    invisibleFirstDay,
+    daysMatrixByWeekday,
+    invisibleLastDay,
     focusedDay,
     tryToFocusCurrentlyDataIsFocusedDay,
     handleFocusMetaDay,
@@ -162,8 +191,9 @@ const useConfigCalendarCTX = () => {
     onNextMonthFocus,
     onNextYearFocus,
     isWithTimeWheelToo,
-    autoFocusPrevMonthArrow
-  }), [showCalendar, closeCalendar, setPopperElement, setArrowElement, usePopperHelpers, handleToggleCalendar, handleSetTriggerRef, handleMenuWrapperKeyDown, isControllerOnly, calendarDaysWrapperRef, prevYearBtnRef, prevMonthBtnRef, nextMonthBtnRef, nextYearBtnRef, currentMonth, currentYear, daysArray, focusedDay, tryToFocusCurrentlyDataIsFocusedDay, handleFocusMetaDay, handleFocusMetaDayByDay, resetFocusedDayToStartDate, handlePrevMonth, handlePrevYear, handleNextMonth, handleNextYear, handleDayOnKeyDown, handlePrevYearKeyDown, handlePrevMonthKeyDown, handleNextMonthKeyDown, handleNextYearKeyDown, handlePickerIconKeyDown, onPrevYearFocus, onPrevMonthFocus, onNextMonthFocus, onNextYearFocus, isWithTimeWheelToo, autoFocusPrevMonthArrow]);
+    autoFocusPrevMonthArrow,
+    ariaCurrentValueForInputs
+  }), [showCalendar, closeCalendar, setPopperElement, setArrowElement, usePopperHelpers, handleToggleCalendar, handleSetTriggerRef, handleMenuWrapperKeyDown, isControllerOnly, calendarDaysWrapperRef, prevYearBtnRef, prevMonthBtnRef, nextMonthBtnRef, nextYearBtnRef, currentMonth, currentYear, daysArray, invisibleFirstDay, daysMatrixByWeekday, invisibleLastDay, focusedDay, tryToFocusCurrentlyDataIsFocusedDay, handleFocusMetaDay, handleFocusMetaDayByDay, resetFocusedDayToStartDate, handlePrevMonth, handlePrevYear, handleNextMonth, handleNextYear, handleDayOnKeyDown, handlePrevYearKeyDown, handlePrevMonthKeyDown, handleNextMonthKeyDown, handleNextYearKeyDown, handlePickerIconKeyDown, onPrevYearFocus, onPrevMonthFocus, onNextMonthFocus, onNextYearFocus, isWithTimeWheelToo, autoFocusPrevMonthArrow, ariaCurrentValueForInputs]);
 };
 
 export { useConfigCalendarCTX };

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

@@ -1,8 +1,8 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useEffect, useState, useMemo, createRef, useCallback } from 'react';
 import { useGetMonthYearFromDateStringOrEmptyStartingMonth } from '../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js';
 import { getFiveBySevenCurrentMonthDaysMatrix, sumValuesToDate, getDateStringFromDay, sumFromDateValues } from '../../../utils/dateHelpers.js';
 
-/* eslint-disable complexity */
 const useCurrentDisplayedMonthYearLogic = () => {
   const {
     month: monthFromDateString,

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

@@ -1,9 +1,8 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useMemo, useCallback, useLayoutEffect } from 'react';
 import { compareTwoDatesDayEquality } from '../../../utils/dateHelpers.js';
 import { useGetStartingFocusedDay } from '../../../utils/hooks/useGetStartingFocusedDay.js';
 
-/* eslint-disable complexity */
-
 // eslint-disable-next-line max-params
 const loopWhileWaiting = (cb, shortcircuit = () => false, timePerTry = 100, maxTries = 5) => {
   let ab = maxTries;

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

@@ -1,8 +1,8 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useCallback, useMemo } from 'react';
 import { usePopper } from 'react-popper';
 import { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside.js';
 
-/* eslint-disable complexity */
 const usePopperTriggerLogic = ({
   focusedDay,
   resetFocusedDayToStartDate,

package/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.js

@@ -1,5 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { StyledCalendarWithTimeWheelWrapper, StyledCalendar } from './Styleds.js';
 import { CalendarWithTimeWheelFooter } from './CalendarWithTimeWheelFooter.js';
 import { TimeWheelContent } from '../TimeWheel/TimeWheelContent.js';
@@ -11,7 +12,8 @@ const CalendarWithTimeWheelContent = () => {
     isControllerOnly
   } = useContext(ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx(StyledCalendarWithTimeWheelWrapper, {
-    isControllerOnly: isControllerOnly
+    isControllerOnly: isControllerOnly,
+    "data-testid": ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL
   }, void 0, _StyledCalendar || (_StyledCalendar = /*#__PURE__*/_jsx(StyledCalendar, {})), _TimeWheelContent || (_TimeWheelContent = /*#__PURE__*/_jsx(TimeWheelContent, {})), _CalendarWithTimeWhee || (_CalendarWithTimeWhee = /*#__PURE__*/_jsx(CalendarWithTimeWheelFooter, {})));
 };
 

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

@@ -4,6 +4,7 @@ import { createContext } from 'react';
 const noop = () => {};
 
 const defaultCalendarWithTimeWheelContext = {
+  ariaCurrentValueForInputs: '',
   showCalendarWithTimeWheel: false,
   setPopperElement: noop,
   setArrowElement: noop,

package/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.js

@@ -1,11 +1,12 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useMemo } from 'react';
-import DSButton, { BUTTON_VARIANT } from '@elliemae/ds-basic/Button';
+import { DSIconColors } from '@elliemae/ds-icon';
+import { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';
 import DatePicker from '@elliemae/ds-icons/DatePicker';
 import { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';
+import { StyledIconTriggerButton } from './Styleds.js';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 
-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
 
@@ -13,19 +14,21 @@ const CalendarWithTimeWheelIconTrigger = () => {
   const {
     handleSetTriggerRef,
     handleToggleCalendarWithTimeWheel,
-    handlePickerIconKeyDown
+    handlePickerIconKeyDown,
+    ariaCurrentValueForInputs
   } = useContext(CalendarWithTimeWheelContext);
-  return useMemo(() => /*#__PURE__*/_jsx(DSButton, {
-    "aria-label": "date time picker context menu trigger",
-    buttonType: "text",
-    leftIcon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker, {})),
-    size: "m",
+  return useMemo(() => /*#__PURE__*/_jsx(StyledIconTriggerButton, {
+    "aria-label": "date time picker context menu trigger, ".concat(ariaCurrentValueForInputs),
+    buttonType: "icon",
+    size: BUTTON_SIZES.M,
     variant: BUTTON_VARIANT.DEFAULT,
     innerRef: handleSetTriggerRef,
     onClick: handleToggleCalendarWithTimeWheel,
     onKeyDown: handlePickerIconKeyDown,
     "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL
-  }), [handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendarWithTimeWheel]);
+  }, void 0, /*#__PURE__*/_jsx(DatePicker, {
+    color: DSIconColors.PRIMARY
+  })), [ariaCurrentValueForInputs, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendarWithTimeWheel]);
 };
 
 export { CalendarWithTimeWheelIconTrigger };

package/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js

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

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

@@ -1,9 +1,15 @@
 import styled from 'styled-components';
+import { DSButtonV2 } from '@elliemae/ds-button';
 import { CalendarContent } from '../Calendar/CalendarContent.js';
 
-const StyledCalendarWithTimeWheelWrapper = /*#__PURE__*/styled.div.withConfig({
+const StyledIconTriggerButton = /*#__PURE__*/styled(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.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
@@ -11,10 +17,10 @@ const StyledCalendarWithTimeWheelWrapper = /*#__PURE__*/styled.div.withConfig({
   theme
 }) => theme.colors.neutral[200]);
 const StyledCalendar = /*#__PURE__*/styled(CalendarContent).withConfig({
-  componentId: "sc-h2xj8r-1"
+  componentId: "sc-h2xj8r-2"
 })(["box-shadow:none;"]);
 const CalendarWithTimeWheelFooterMessage = /*#__PURE__*/styled.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], ({
@@ -29,4 +35,4 @@ const CalendarWithTimeWheelFooterMessage = /*#__PURE__*/styled.footer.withConfig
   theme
 }) => theme.fontSizes.microText[200]);
 
-export { CalendarWithTimeWheelFooterMessage, StyledCalendar, StyledCalendarWithTimeWheelWrapper };
+export { CalendarWithTimeWheelFooterMessage, StyledCalendar, StyledCalendarWithTimeWheelWrapper, StyledIconTriggerButton };

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

@@ -1,3 +1,4 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useContext, useState, useCallback, useMemo } from 'react';
 import { usePopper } from 'react-popper';
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../../ControlledDateTimePickerTypes.js';
@@ -6,7 +7,6 @@ import { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside.js';
 import { CalendarContext } from '../Calendar/CalendarContext.js';
 import { TimeWheelContext } from '../TimeWheel/TimeWheelContext.js';
 
-/* eslint-disable max-statements */
 const useConfigCalendarWithTimeWheelCTX = () => {
   const {
     pickerButtonRef,
@@ -18,7 +18,8 @@ const useConfigCalendarWithTimeWheelCTX = () => {
     hideDate,
     hideTime,
     monthInputRef,
-    hourInputRef
+    hourInputRef,
+    ariaCurrentValueForInputs
   } = useContext(ControlledDateTimePickerContext);
   const {
     handleToggleCalendar
@@ -99,8 +100,9 @@ const useConfigCalendarWithTimeWheelCTX = () => {
     handleSetTriggerRef,
     handleMenuWrapperKeyDown,
     handlePickerIconKeyDown,
-    isControllerOnly
-  }), [showCalendarWithTimeWheel, usePopperHelpers, handleToggleCalendarWithTimeWheel, handleSetTriggerRef, handleMenuWrapperKeyDown, handlePickerIconKeyDown, isControllerOnly]);
+    isControllerOnly,
+    ariaCurrentValueForInputs
+  }), [showCalendarWithTimeWheel, usePopperHelpers, handleToggleCalendarWithTimeWheel, handleSetTriggerRef, handleMenuWrapperKeyDown, handlePickerIconKeyDown, isControllerOnly, ariaCurrentValueForInputs]);
 };
 
 export { useConfigCalendarWithTimeWheelCTX };

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

@@ -1,8 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
-import ChevronSmallUp from '@elliemae/ds-icons/ChevronSmallUp';
-import ChevronSmallDown from '@elliemae/ds-icons/ChevronSmallDown';
+import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';
 import { StyledWheelList, StyledWheelListItem, StyledWheelChangeTimeBtn, StyledTimeBtn } from './Styleds.js';
@@ -35,17 +34,17 @@ const HoursList = () => {
   } = useContext(TimeWheelContext);
   return /*#__PURE__*/_jsx(StyledWheelList, {}, void 0, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "subtract one hour",
-    buttonType: "text",
-    leftIcon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})),
+    buttonType: "raw",
     size: "m",
     onClick: handlePrevHour,
     onKeyDown: handlePrevHourBtnOnKeyDown,
     innerRef: prevHourBtnRef,
+    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
     tabIndex: -1
-  })), visibleHours.map(hourString => {
-    const key = `timewheel-hour-${hourString}`;
+  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), visibleHours.map(hourString => {
+    const key = "timewheel-hour-".concat(hourString);
     if (!hourString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
-    const currHourTimeString = `${hourString}:${minutes || '00'} ${meridiem || 'AM'}`;
+    const currHourTimeString = "".concat(hourString, ":").concat(minutes || '00', " ").concat(meridiem || 'AM');
     const isEmptyCurrValueCurrentListItem = !hours && convertToPositiveNumberIfPossible(hourString) === currHourNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || hours === hourString;
     const isDisabled = getIsDisabledTime(currHourTimeString);
@@ -56,34 +55,36 @@ const HoursList = () => {
     };
     return /*#__PURE__*/_jsx(StyledWheelListItem, {
       isCurrentListItem: isCurrentListItem
-    }, key, /*#__PURE__*/jsx(StyledTimeBtn, _objectSpread({
+    }, key, /*#__PURE__*/jsx(StyledTimeBtn, _objectSpread(_objectSpread({
       isCurrentListItem: isCurrentListItem,
       autoFocus: autoFocusHourTimeWheel && isCurrentListItem,
-      "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'SELECTED_HOUR' : 'HOUR'],
+      "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_HOUR' : 'HOUR'],
       selected: hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum,
-      "aria-label": `${hourString} hours`,
+      "aria-label": "".concat(hourString, " hours"),
       "aria-disabled": isDisabled,
       isDisabled: isDisabled,
-      buttonType: "text",
-      labelText: hourString,
+      buttonType: "raw",
       size: "m",
       onClick: e => handleTimeWheelBtnChangeHours(hourString, e),
       tabIndex: tabIndex,
       role: "spinbutton",
       "aria-valuemax": "12",
-      "aria-valuemin": "01",
-      "aria-valuenow": hourString
-    }, btnProps)));
+      "aria-valuemin": "1",
+      "aria-valuenow": currHourNum,
+      "aria-valuetext": "".concat(hourString, " hours")
+    }, btnProps), {}, {
+      children: hourString
+    })));
   }), /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "add one hour",
-    buttonType: "text",
-    leftIcon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})),
+    buttonType: "raw",
     size: "m",
     onClick: handleNextHour,
     onKeyDown: handleNextHourBtnOnKeyDown,
     innerRef: nextHourBtnRef,
-    tabIndex: -1
-  })));
+    tabIndex: -1,
+    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR
+  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})))));
 };
 
 export { HoursList };

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

@@ -1,7 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
-import ChevronSmallUp from '@elliemae/ds-icons/ChevronSmallUp';
-import ChevronSmallDown from '@elliemae/ds-icons/ChevronSmallDown';
+import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { StyledWheelList, StyledWheelListItem, StyledWheelChangeTimeBtn, StyledTimeBtn } from './Styleds.js';
 import { TimeWheelContext } from './TimeWheelContext.js';
@@ -23,34 +22,32 @@ const MeridiemList = () => {
   } = useContext(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(StyledWheelList, {}, void 0, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "set am meridiem",
     "aria-disabled": isDisabledAm,
     isDisabled: isDisabledAm,
-    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.MERIDIEM,
-    buttonType: "text",
-    leftIcon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})),
+    "data-testid": 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(StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx(StyledWheelListItem, {
+  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), meridiem === 'AM' || meridiem === '' ? _StyledWheelListItem || (_StyledWheelListItem = /*#__PURE__*/_jsx(StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx(StyledWheelListItem, {
     isCurrentListItem: isAmCurrent
   }, void 0, /*#__PURE__*/_jsx(StyledTimeBtn, {
     isCurrentListItem: isAmCurrent,
-    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? 'SELECTED_MERIDIEM' : 'MERIDIEM'],
+    "data-testid": 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,
@@ -60,17 +57,16 @@ const MeridiemList = () => {
     "aria-valuemax": "1",
     "aria-valuemin": "0",
     "aria-valuenow": isPmCurrent ? '1' : '0',
-    "aria-valuetext": isPmCurrent ? 'PM' : 'AM'
-  })), /*#__PURE__*/_jsx(StyledWheelListItem, {
+    "aria-valuetext": isAmCurrent ? 'ante meridiem' : 'post meridiem'
+  }, void 0, "AM")), /*#__PURE__*/_jsx(StyledWheelListItem, {
     isCurrentListItem: isPmCurrent
   }, void 0, /*#__PURE__*/_jsx(StyledTimeBtn, {
     isCurrentListItem: isPmCurrent,
-    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'SELECTED_MERIDIEM' : 'MERIDIEM'],
-    "aria-label": `PM ${isPmCurrent ? 'selected' : ''}`,
+    "data-testid": 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,
@@ -80,20 +76,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(StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
+    "aria-valuetext": isAmCurrent ? 'ante meridiem' : 'post meridiem'
+  }, void 0, "PM")), meridiem === 'PM' ? _StyledWheelListItem2 || (_StyledWheelListItem2 = /*#__PURE__*/_jsx(StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "set pm meridiem",
     "aria-disabled": isDisabledPm,
     isDisabled: isDisabledPm,
-    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.MERIDIEM,
-    buttonType: "text",
-    leftIcon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})),
+    "data-testid": 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(ChevronSmallDown, {})))));
 };
 
 export { MeridiemList, MeridiemList as default };

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

@@ -1,8 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
-import ChevronSmallUp from '@elliemae/ds-icons/ChevronSmallUp';
-import ChevronSmallDown from '@elliemae/ds-icons/ChevronSmallDown';
+import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';
 import { StyledWheelList, StyledWheelListItem, StyledWheelChangeTimeBtn, StyledTimeBtn } from './Styleds.js';
@@ -34,17 +33,17 @@ const MinutesList = () => {
   } = useContext(TimeWheelContext);
   return /*#__PURE__*/_jsx(StyledWheelList, {}, void 0, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "subtract one minute",
-    buttonType: "text",
-    leftIcon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})),
+    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.TIMEWHEEL.PREV_MINUTE
+  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), visibleMinutes.map(minutesString => {
+    const key = "timewheel-minutes-".concat(minutesString);
     if (!minutesString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
-    const currMinutesTimeString = `${hours || '01'}:${minutesString} ${meridiem || 'AM'}`;
+    const currMinutesTimeString = "".concat(hours || '01', ":").concat(minutesString, " ").concat(meridiem || 'AM');
     const isEmptyCurrValueCurrentListItem = !minutes && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;
     const isDisabled = getIsDisabledTime(currMinutesTimeString);
@@ -56,33 +55,35 @@ const MinutesList = () => {
     return /*#__PURE__*/_jsx(StyledWheelListItem, {
       isCurrentListItem: isCurrentListItem,
       selected: convertToPositiveNumberIfPossible(minutesString) === currMinuteNum
-    }, key, /*#__PURE__*/jsx(StyledTimeBtn, _objectSpread({
+    }, key, /*#__PURE__*/jsx(StyledTimeBtn, _objectSpread(_objectSpread({
       isCurrentListItem: isCurrentListItem,
-      "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'SELECTED_MINUTE' : 'MINUTE'],
+      "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_MINUTE' : 'MINUTE'],
       selected: minutes.length === 2 && 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(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "add one minute",
-    buttonType: "text",
-    leftIcon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})),
+    buttonType: "raw",
     size: "m",
     onClick: handleNextMinute,
     onKeyDown: handleNextMinuteBtnOnKeyDown,
     innerRef: nextMinutesBtnRef,
+    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
     tabIndex: -1
-  })));
+  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})))));
 };
 
 export { MinutesList, MinutesList as default };

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

@@ -31,16 +31,15 @@ const SecondsList = () => {
   } = useContext(TimeWheelContext);
   return /*#__PURE__*/_jsx(StyledWheelList, {}, void 0, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "subtract one minute",
-    buttonType: "text",
-    leftIcon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})),
+    buttonType: "raw",
     size: "m",
     variant: 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(ChevronSmallUp, {})))), visibleSeconds.map(secondsString => {
+    const key = "timewheel-seconds-".concat(secondsString);
     if (!secondsString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
     const isEmptyCurrValueCurrentListItem = !seconds && convertToPositiveNumberIfPossible(secondsString) === currSecondNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || seconds === secondsString;
@@ -51,26 +50,26 @@ const SecondsList = () => {
     };
     return /*#__PURE__*/_jsx(StyledWheelListItem, {
       isCurrentListItem: isCurrentListItem
-    }, key, /*#__PURE__*/jsx(DSButton, _objectSpread({
-      "aria-label": `set ${secondsString} seconds`,
-      buttonType: "text",
-      labelText: secondsString,
+    }, key, /*#__PURE__*/jsx(DSButton, _objectSpread(_objectSpread({
+      "aria-label": "set ".concat(secondsString, " seconds"),
+      buttonType: "raw",
       size: "l",
       variant: BUTTON_VARIANT.DEFAULT,
       onClick: e => handleTimeWheelBtnChangeSeconds(secondsString, e),
       tabIndex: tabIndex
-    }, btnProps)));
+    }, btnProps), {}, {
+      children: secondsString
+    })));
   }), /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "add one minute",
-    buttonType: "text",
-    leftIcon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})),
+    buttonType: "raw",
     size: "m",
     variant: BUTTON_VARIANT.DEFAULT,
     onClick: handleNextSecond,
     onKeyDown: handleNextSecondBtnOnKeyDown,
     innerRef: nextSecondsBtnRef,
     tabIndex: -1
-  })));
+  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})))));
 };
 
 export { SecondsList, SecondsList as default };