@elliemae/ds-controlled-form 2.4.0 → 2.4.1-rc.11

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

@@ -1,13 +1,27 @@
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { useEffect, useState, useMemo, createRef, useCallback } from 'react';
+import { useState, useEffect, useMemo, createRef, useCallback } from 'react';
 import { useGetMonthYearFromDateStringOrEmptyStartingMonth } from '../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js';
 import { getFiveBySevenCurrentMonthDaysMatrix, sumValuesToDate, getDateStringFromDay, sumFromDateValues } from '../../../utils/dateHelpers.js';
 
+// 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 useCurrentDisplayedMonthYearLogic = () => {
   const {
     month: monthFromDateString,
     year: yearFromDateString
-  } = useGetMonthYearFromDateStringOrEmptyStartingMonth(); // side-effects are really really controlled in this case so use-effect should be fine
+  } = useGetMonthYearFromDateStringOrEmptyStartingMonth();
+  const [currentMonth, setCurrentMonth] = useState(monthFromDateString);
+  const [currentYear, setCurrentYear] = useState(yearFromDateString); // side-effects are really really controlled in this case so use-effect should be fine
   // don't add 200 side-effects to those or else Chaos would hunt us for the years to come
 
   useEffect(() => {
@@ -16,8 +30,6 @@ const useCurrentDisplayedMonthYearLogic = () => {
   useEffect(() => {
     setCurrentYear(yearFromDateString);
   }, [yearFromDateString]);
-  const [currentMonth, setCurrentMonth] = useState(monthFromDateString);
-  const [currentYear, setCurrentYear] = useState(yearFromDateString);
   const daysArray = useMemo(() => {
     const newDaysArray = getFiveBySevenCurrentMonthDaysMatrix(currentMonth, currentYear);
     const hiddenPrevDay = sumValuesToDate(newDaysArray[0].day, {
@@ -94,15 +106,31 @@ const useCurrentDisplayedMonthYearLogic = () => {
     });
     setCurrentYear(newYear);
   }, [currentMonth, currentYear]);
+  const {
+    invisibleFirstDay,
+    daysMatrixByWeekday,
+    invisibleLastDay
+  } = useMemo(() => {
+    const [invisible1stDay, ...otherDays] = [...daysArray];
+    const invisibleDayLast = otherDays.pop();
+    return {
+      invisibleFirstDay: invisible1stDay,
+      daysMatrixByWeekday: sliceIntoChunks(otherDays, 7),
+      invisibleLastDay: invisibleDayLast
+    };
+  }, [daysArray]);
   return useMemo(() => ({
     currentMonth,
     currentYear,
     daysArray,
+    invisibleFirstDay,
+    daysMatrixByWeekday,
+    invisibleLastDay,
     handlePrevYear,
     handlePrevMonth,
     handleNextMonth,
     handleNextYear
-  }), [currentMonth, currentYear, daysArray, handleNextMonth, handleNextYear, handlePrevMonth, handlePrevYear]);
+  }), [currentMonth, currentYear, daysArray, daysMatrixByWeekday, handleNextMonth, handleNextYear, handlePrevMonth, handlePrevYear, invisibleFirstDay, invisibleLastDay]);
 };
 
 export { useCurrentDisplayedMonthYearLogic };

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

@@ -22,32 +22,36 @@ const loopWhileWaiting = function (cb) {
 
 const useFocusLogic = _ref => {
   let {
-    daysArray,
+    currentDisplayedMonthLogic,
     showCalendar
   } = _ref;
   const {
     calendarDaysWrapperRef
   } = useContext(ControlledDateTimePickerContext);
+  const {
+    daysArray
+  } = currentDisplayedMonthLogic;
   const {
     startFocusedDate
   } = useGetStartingFocusedDay();
-  const [metadayToFocus, setMetadayToFocus] = useState(daysArray.find(_ref2 => {
+  const [metadayToFocus, setMetadayToFocus] = useState(() => startFocusedDate ? daysArray.find(_ref2 => {
     let {
       day: currDay
     } = _ref2;
     return compareTwoDatesDayEquality(currDay, startFocusedDate);
-  })); // this is required because we have to focus based on the inputs values too,
+  }) : undefined); // this is required because we have to focus based on the inputs values too,
   // useGetStartingFocusedDay does this already,
   // this "useMemo" is here just to trigger it functionally by changing the metadayToFocus state
   // which is required for arrow key navigation in the calendar
 
   const focusedDay = useMemo(() => {
-    const newFocusedDay = metadayToFocus ? daysArray.find(_ref3 => {
+    let newFocusedDay;
+    if (metadayToFocus) newFocusedDay = daysArray.find(_ref3 => {
       let {
         day: currDay
       } = _ref3;
       return compareTwoDatesDayEquality(currDay, metadayToFocus.day);
-    }) : daysArray.find(_ref4 => {
+    });else if (startFocusedDate) newFocusedDay = daysArray.find(_ref4 => {
       let {
         day: currDay
       } = _ref4;
@@ -93,7 +97,7 @@ const useFocusLogic = _ref => {
     if (focusedDay !== newFocusedMetaDay) setMetadayToFocus(newFocusedMetaDay);
   }, [daysArray, focusedDay]);
   const resetFocusedDayToStartDate = useCallback(() => {
-    setMetadayToFocus(null);
+    setMetadayToFocus(undefined);
   }, []);
   return useMemo(() => ({
     focusedDay,

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

@@ -8,13 +8,8 @@ import { homeEndKeys, homeEndAllArrowKeys } from '../../../utils/constants.js';
 
 const useKeyboardHandlers = _ref => {
   let {
-    focusedDay,
-    daysArray,
-    handlePrevMonth,
-    handleNextMonth,
-    handleFocusMetaDay,
-    handleFocusMetaDayByDay,
-    tryToFocusCurrentlyDataIsFocusedDay
+    currentDisplayedMonthLogic,
+    focusLogic
   } = _ref;
   const {
     hideDate,
@@ -35,6 +30,17 @@ const useKeyboardHandlers = _ref => {
     isWithDateInputs,
     yearInputRef
   } = useContext(ControlledDateTimePickerContext);
+  const {
+    focusedDay,
+    handleFocusMetaDay,
+    handleFocusMetaDayByDay,
+    tryToFocusCurrentlyDataIsFocusedDay
+  } = focusLogic;
+  const {
+    daysArray,
+    handlePrevMonth,
+    handleNextMonth
+  } = currentDisplayedMonthLogic;
   const tryToFocusDayRegion = useCallback(() => {
     setLatestInteractionRegion('calendar-days');
 
@@ -146,9 +152,13 @@ const useKeyboardHandlers = _ref => {
       e.preventDefault();
 
       if (shiftKey) {
-        nextMonthBtnRef.current.focus();
+        var _nextMonthBtnRef$curr;
+
+        (_nextMonthBtnRef$curr = nextMonthBtnRef.current) === null || _nextMonthBtnRef$curr === void 0 ? void 0 : _nextMonthBtnRef$curr.focus();
       } else {
-        nextYearBtnRef.current.focus();
+        var _nextYearBtnRef$curre;
+
+        (_nextYearBtnRef$curre = nextYearBtnRef.current) === null || _nextYearBtnRef$curre === void 0 ? void 0 : _nextYearBtnRef$curre.focus();
       }
     }
 
@@ -178,8 +188,10 @@ const useKeyboardHandlers = _ref => {
           if (isWithTimeWheelToo) currMeridiemBtnRef === null || currMeridiemBtnRef === void 0 ? void 0 : (_currMeridiemBtnRef$c3 = currMeridiemBtnRef.current) === null || _currMeridiemBtnRef$c3 === void 0 ? void 0 : (_currMeridiemBtnRef$c4 = _currMeridiemBtnRef$c3.focus) === null || _currMeridiemBtnRef$c4 === void 0 ? void 0 : _currMeridiemBtnRef$c4.call(_currMeridiemBtnRef$c3);else tryToFocusDayRegion();
         }
       } else {
+        var _nextMonthBtnRef$curr2;
+
         e.preventDefault();
-        nextMonthBtnRef.current.focus();
+        (_nextMonthBtnRef$curr2 = nextMonthBtnRef.current) === null || _nextMonthBtnRef$curr2 === void 0 ? void 0 : _nextMonthBtnRef$curr2.focus();
       }
     }
 
@@ -203,9 +215,13 @@ const useKeyboardHandlers = _ref => {
       e.preventDefault();
 
       if (shiftKey) {
-        prevMonthBtnRef.current.focus();
+        var _prevMonthBtnRef$curr5;
+
+        (_prevMonthBtnRef$curr5 = prevMonthBtnRef.current) === null || _prevMonthBtnRef$curr5 === void 0 ? void 0 : _prevMonthBtnRef$curr5.focus();
       } else {
-        prevYearBtnRef.current.focus();
+        var _prevYearBtnRef$curre;
+
+        (_prevYearBtnRef$curre = prevYearBtnRef.current) === null || _prevYearBtnRef$curre === void 0 ? void 0 : _prevYearBtnRef$curre.focus();
       }
     }
 
@@ -229,9 +245,9 @@ const useKeyboardHandlers = _ref => {
       e.preventDefault();
 
       if (shiftKey) {
-        var _prevYearBtnRef$curre, _prevYearBtnRef$curre2;
+        var _prevYearBtnRef$curre2, _prevYearBtnRef$curre3;
 
-        prevYearBtnRef === null || prevYearBtnRef === void 0 ? void 0 : (_prevYearBtnRef$curre = prevYearBtnRef.current) === null || _prevYearBtnRef$curre === void 0 ? void 0 : (_prevYearBtnRef$curre2 = _prevYearBtnRef$curre.focus) === null || _prevYearBtnRef$curre2 === void 0 ? void 0 : _prevYearBtnRef$curre2.call(_prevYearBtnRef$curre);
+        prevYearBtnRef === null || prevYearBtnRef === void 0 ? void 0 : (_prevYearBtnRef$curre2 = prevYearBtnRef.current) === null || _prevYearBtnRef$curre2 === void 0 ? void 0 : (_prevYearBtnRef$curre3 = _prevYearBtnRef$curre2.focus) === null || _prevYearBtnRef$curre3 === void 0 ? void 0 : _prevYearBtnRef$curre3.call(_prevYearBtnRef$curre2);
       }
 
       if (!shiftKey) tryToFocusDayRegion();

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

@@ -6,12 +6,15 @@ import { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside.js';
 
 const usePopperTriggerLogic = _ref => {
   let {
+    focusLogic,
+    showCalendar,
+    setShowCalendar
+  } = _ref;
+  const {
     focusedDay,
     resetFocusedDayToStartDate,
-    showCalendar,
-    setShowCalendar,
     tryToFocusCurrentlyDataIsFocusedDay
-  } = _ref;
+  } = focusLogic;
   const {
     props: {
       onPickerOpen,
@@ -80,7 +83,7 @@ const usePopperTriggerLogic = _ref => {
   useOnClickOutside(popperElement, e => {
     var _pickerButtonRef$curr5, _pickerButtonRef$curr6;
 
-    if (!(pickerButtonRef !== null && pickerButtonRef !== void 0 && (_pickerButtonRef$curr5 = pickerButtonRef.current) !== null && _pickerButtonRef$curr5 !== void 0 && (_pickerButtonRef$curr6 = _pickerButtonRef$curr5.contains) !== null && _pickerButtonRef$curr6 !== void 0 && _pickerButtonRef$curr6.call(_pickerButtonRef$curr5, e === null || e === void 0 ? void 0 : e.target))) closeCalendar();
+    if (e.target instanceof Element && !(pickerButtonRef !== null && pickerButtonRef !== void 0 && (_pickerButtonRef$curr5 = pickerButtonRef.current) !== null && _pickerButtonRef$curr5 !== void 0 && (_pickerButtonRef$curr6 = _pickerButtonRef$curr5.contains) !== null && _pickerButtonRef$curr6 !== void 0 && _pickerButtonRef$curr6.call(_pickerButtonRef$curr5, e === null || e === void 0 ? void 0 : e.target))) closeCalendar();
   });
   return useMemo(() => ({
     closeCalendar,

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

@@ -4,12 +4,13 @@ import { CalendarWithTimeWheelIconTrigger } from './CalendarWithTimeWheelIconTri
 import { CalendarWithTimeWheelWrapper } from './CalendarWithTimeWheelWrapper.js';
 import { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';
 import { useConfigCalendarWithTimeWheelCTX } from './useConfigCalendarWithTimeWheelCTX.js';
-import { WrapWithCalendarContext } from '../Calendar/Calendar.js';
-import { WrapWithTimeWheelContext } from '../TimeWheel/TimeWheel.js';
+import { WrappedCalendarContext } from '../Calendar/Calendar.js';
+import { WrappedTimeWheelContext } from '../TimeWheel/TimeWheel.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
-var _CalendarWithTimeWhee, _CalendarWithTimeWhee2;
-const CalendarWithTimeWheel = WrapWithCalendarContext(WrapWithTimeWheelContext(() => {
+var _CalendarWithTimeWhee, _CalendarWithTimeWhee2, _WrappedCalendarConte;
+
+const CalendarWithTimeWheelContent = () => {
   const ctx = useConfigCalendarWithTimeWheelCTX();
   const {
     showCalendarWithTimeWheel,
@@ -23,6 +24,9 @@ const CalendarWithTimeWheel = WrapWithCalendarContext(WrapWithTimeWheelContext((
       onKeyDown: handleMenuWrapperKeyDown
     }, void 0, _CalendarWithTimeWhee2 || (_CalendarWithTimeWhee2 = /*#__PURE__*/_jsx(CalendarWithTimeWheelWrapper, {})))
   }) : null);
-}));
+}; // we wrap in context in a separate statement so we can use the useContext and be sure it's correctly initialized
+
+
+const CalendarWithTimeWheel = () => _WrappedCalendarConte || (_WrappedCalendarConte = /*#__PURE__*/_jsx(WrappedCalendarContext, {}, void 0, /*#__PURE__*/_jsx(WrappedTimeWheelContext, {}, void 0, /*#__PURE__*/_jsx(CalendarWithTimeWheelContent, {}))));
 
 export { CalendarWithTimeWheel };

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

@@ -1,21 +1,6 @@
 import { createContext } from 'react';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
-
-const defaultCalendarWithTimeWheelContext = {
-  ariaCurrentValueForInputs: '',
-  showCalendarWithTimeWheel: false,
-  setPopperElement: noop,
-  setArrowElement: noop,
-  usePopperHelpers: null,
-  handleSetTriggerRef: noop,
-  handleToggleCalendarWithTimeWheel: noop,
-  handleMenuWrapperKeyDown: noop,
-  handlePickerIconKeyDown: noop,
-  isControllerOnly: false,
-  disabled: false
-};
+const defaultCalendarWithTimeWheelContext = {};
 /** Context for cross component communication */
 
 const CalendarWithTimeWheelContext = /*#__PURE__*/createContext(defaultCalendarWithTimeWheelContext);

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

@@ -1,6 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useMemo } from 'react';
-import { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';
+import { BUTTON_SIZES } from '@elliemae/ds-button';
 import { DatePicker } from '@elliemae/ds-icons';
 import { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';
 import { StyledIconTriggerButton } from './Styleds.js';
@@ -22,7 +22,6 @@ const CalendarWithTimeWheelIconTrigger = () => {
     "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,

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

@@ -64,25 +64,25 @@ const useConfigCalendarWithTimeWheelCTX = () => {
       }
     }]
   });
-  const openCalendar = useCallback(e => {
+  const openCalendar = useCallback(() => {
     setShowCalendarWithTimeWheel(true);
     onPickerOpen();
-    setTimeout(() => handleToggleCalendar(e));
-    setTimeout(() => handleToggleTimePicker(e));
+    setTimeout(() => handleToggleCalendar());
+    setTimeout(() => handleToggleTimePicker());
   }, [handleToggleCalendar, handleToggleTimePicker, onPickerOpen]);
-  const closeCalendar = useCallback(e => {
+  const closeCalendar = useCallback(() => {
     setShowCalendarWithTimeWheel(false);
     onPickerClose();
-    setTimeout(() => handleToggleCalendar(e));
-    setTimeout(() => handleToggleTimePicker(e));
+    setTimeout(() => handleToggleCalendar());
+    setTimeout(() => handleToggleTimePicker());
   }, [handleToggleCalendar, handleToggleTimePicker, onPickerClose]);
-  const handleToggleCalendarWithTimeWheel = useCallback(e => {
-    if (!showCalendarWithTimeWheel) openCalendar(e);else closeCalendar(e);
+  const handleToggleCalendarWithTimeWheel = useCallback(() => {
+    if (!showCalendarWithTimeWheel) openCalendar();else closeCalendar();
   }, [closeCalendar, openCalendar, showCalendarWithTimeWheel]);
   useOnClickOutside(popperElement, e => {
     var _pickerButtonRef$curr, _pickerButtonRef$curr2;
 
-    if (!(pickerButtonRef !== null && pickerButtonRef !== void 0 && (_pickerButtonRef$curr = pickerButtonRef.current) !== null && _pickerButtonRef$curr !== void 0 && (_pickerButtonRef$curr2 = _pickerButtonRef$curr.contains) !== null && _pickerButtonRef$curr2 !== void 0 && _pickerButtonRef$curr2.call(_pickerButtonRef$curr, e === null || e === void 0 ? void 0 : e.target))) closeCalendar(e);
+    if (e.target instanceof Element && !(pickerButtonRef !== null && pickerButtonRef !== void 0 && (_pickerButtonRef$curr = pickerButtonRef.current) !== null && _pickerButtonRef$curr !== void 0 && (_pickerButtonRef$curr2 = _pickerButtonRef$curr.contains) !== null && _pickerButtonRef$curr2 !== void 0 && _pickerButtonRef$curr2.call(_pickerButtonRef$curr, e === null || e === void 0 ? void 0 : e.target))) closeCalendar();
   });
   const handleSetTriggerRef = useCallback(newRef => {
     pickerButtonRef.current = newRef;
@@ -96,7 +96,7 @@ const useConfigCalendarWithTimeWheelCTX = () => {
     if (key === 'Escape') {
       var _pickerButtonRef$curr3, _pickerButtonRef$curr4;
 
-      closeCalendar(e);
+      closeCalendar();
       pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr3 = pickerButtonRef.current) === null || _pickerButtonRef$curr3 === void 0 ? void 0 : (_pickerButtonRef$curr4 = _pickerButtonRef$curr3.focus) === null || _pickerButtonRef$curr4 === void 0 ? void 0 : _pickerButtonRef$curr4.call(_pickerButtonRef$curr3);
     }
   }, [closeCalendar, pickerButtonRef]);

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

@@ -10,6 +10,7 @@ import 'core-js/modules/esnext.iterator.for-each.js';
 import { useContext } from 'react';
 import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';
 import { StyledWheelList, StyledWheelListItem, StyledWheelChangeTimeBtn, StyledTimeBtn } from './Styleds.js';
 import { TimeWheelContext } from './TimeWheelContext.js';
@@ -23,22 +24,24 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const HoursList = () => {
   const {
     currHourNum,
-    hours,
-    minutes,
-    meridiem,
+    currMinuteNum,
+    currMeridiem,
     visibleHours,
     handlePrevHour,
     handleNextHour,
     handleTimeWheelBtnChangeHours,
     handlePrevHourBtnOnKeyDown,
     handleCurrHourOnKeyDown,
-    handleNextHourBtnOnKeyDown,
+    handleNextHourBtnOnKeyDown
+  } = useContext(TimeWheelContext);
+  const {
     prevHourBtnRef,
     currHourBtnRef,
     nextHourBtnRef,
     getIsDisabledTime,
-    autoFocusHourTimeWheel
-  } = useContext(TimeWheelContext);
+    autoFocusHourTimeWheel,
+    hours
+  } = useContext(ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx(StyledWheelList, {}, void 0, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "subtract one hour",
     buttonType: "raw",
@@ -49,9 +52,9 @@ const HoursList = () => {
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
     tabIndex: -1
   }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), visibleHours.map(hourString => {
-    const key = "timewheel-hour-".concat(hourString);
+    const key = "timewheel-hour-".concat(hourString || '');
     if (!hourString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
-    const currHourTimeString = "".concat(hourString, ":").concat(minutes || '00', " ").concat(meridiem || 'AM');
+    const currHourTimeString = "".concat(hourString, ":").concat(currMinuteNum, " ").concat(currMeridiem);
     const isEmptyCurrValueCurrentListItem = !hours && convertToPositiveNumberIfPossible(hourString) === currHourNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || hours === hourString;
     const isDisabled = getIsDisabledTime(currHourTimeString);
@@ -60,23 +63,25 @@ const HoursList = () => {
       onKeyDown: isCurrentListItem ? handleCurrHourOnKeyDown : undefined,
       innerRef: isCurrentListItem ? currHourBtnRef : undefined
     };
+    const styleProps = {
+      isCurrentListItem,
+      isDisabled
+    };
     return /*#__PURE__*/_jsx(StyledWheelListItem, {
       isCurrentListItem: isCurrentListItem
-    }, key, /*#__PURE__*/jsx(StyledTimeBtn, _objectSpread(_objectSpread({
-      isCurrentListItem: isCurrentListItem,
+    }, key, /*#__PURE__*/jsx(StyledTimeBtn, _objectSpread(_objectSpread(_objectSpread({}, styleProps), {}, {
       autoFocus: autoFocusHourTimeWheel && isCurrentListItem,
       "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_HOUR' : 'HOUR'],
       selected: hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum,
       "aria-label": "".concat(hourString, " hours"),
       "aria-disabled": isDisabled,
-      isDisabled: isDisabled,
       buttonType: "raw",
       size: "m",
       onClick: e => handleTimeWheelBtnChangeHours(hourString, e),
       tabIndex: tabIndex,
       role: "spinbutton",
-      "aria-valuemax": "12",
-      "aria-valuemin": "1",
+      "aria-valuemax": 12,
+      "aria-valuemin": 1,
       "aria-valuenow": currHourNum,
       "aria-valuetext": "".concat(hourString, " hours")
     }, btnProps), {}, {

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

@@ -1,52 +1,78 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
 import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { StyledWheelList, StyledWheelListItem, StyledWheelChangeTimeBtn, StyledTimeBtn } from './Styleds.js';
 import { TimeWheelContext } from './TimeWheelContext.js';
+import { jsx } from 'react/jsx-runtime';
 
 var _ChevronSmallUp, _StyledWheelListItem, _StyledWheelListItem2, _ChevronSmallDown;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const MeridiemList = () => {
   const {
-    hours,
-    minutes,
-    meridiem,
+    currMeridiem,
     handleTimeWheelBtnChangeMeridiem,
     handlePrevMeridiemBtnOnKeyDown,
     handleCurrMeridiemOnKeyDown,
-    handleNextMeridiemBtnOnKeyDown,
+    handleNextMeridiemBtnOnKeyDown
+  } = useContext(TimeWheelContext);
+  const {
     prevMeridiemBtnRef,
     currMeridiemBtnRef,
     nextMeridiemBtnRef,
-    getIsDisabledTime
-  } = useContext(TimeWheelContext);
-  const isAmCurrent = !meridiem || meridiem === 'AM';
-  const isPmCurrent = meridiem === 'PM';
+    getIsDisabledTime,
+    hours,
+    minutes
+  } = useContext(ControlledDateTimePickerContext);
+  const isAmCurrent = !currMeridiem || currMeridiem === 'AM';
+  const isPmCurrent = currMeridiem === '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, {
+  const styledPropsPrevMeridiem = {
+    isDisabled: isDisabledAm
+  };
+  const styledPropsCurrentAmMeridiem = {
+    isCurrentListItem: isAmCurrent,
+    isDisabled: isDisabledAm
+  };
+  const styledPropsCurrentPmMeridiem = {
+    isCurrentListItem: isPmCurrent,
+    isDisabled: isDisabledPm
+  };
+  const styledPropsNextMeridiem = {
+    isDisabled: isDisabledPm
+  };
+  return /*#__PURE__*/_jsx(StyledWheelList, {}, void 0, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/jsx(StyledWheelChangeTimeBtn, _objectSpread(_objectSpread({}, styledPropsPrevMeridiem), {}, {
     "aria-label": "set am meridiem",
     "aria-disabled": isDisabledAm,
-    isDisabled: isDisabledAm,
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MERIDIEM,
     buttonType: "raw",
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('AM', e),
     onKeyDown: handlePrevMeridiemBtnOnKeyDown,
     innerRef: prevMeridiemBtnRef,
-    tabIndex: -1
-  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), meridiem === 'AM' || meridiem === '' ? _StyledWheelListItem || (_StyledWheelListItem = /*#__PURE__*/_jsx(StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx(StyledWheelListItem, {
+    tabIndex: -1,
+    children: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {}))
+  }))), currMeridiem === 'AM' || currMeridiem === '' ? _StyledWheelListItem || (_StyledWheelListItem = /*#__PURE__*/_jsx(StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx(StyledWheelListItem, {
     isCurrentListItem: isAmCurrent
-  }, void 0, /*#__PURE__*/_jsx(StyledTimeBtn, {
-    isCurrentListItem: isAmCurrent,
+  }, void 0, /*#__PURE__*/jsx(StyledTimeBtn, _objectSpread(_objectSpread({}, styledPropsCurrentAmMeridiem), {}, {
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM'],
-    selected: meridiem === 'AM',
+    selected: currMeridiem === 'AM',
     "aria-label": "AM ".concat(isAmCurrent ? 'selected' : ''),
     "aria-disabled": isDisabledAm,
-    isDisabled: isDisabledAm,
     buttonType: "raw",
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('AM', e),
@@ -54,19 +80,18 @@ const MeridiemList = () => {
     innerRef: isAmCurrent ? currMeridiemBtnRef : undefined,
     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(StyledWheelListItem, {
+    "aria-valuemax": 1,
+    "aria-valuemin": 0,
+    "aria-valuenow": isPmCurrent ? 1 : 0,
+    "aria-valuetext": isAmCurrent ? 'ante meridiem' : 'post meridiem',
+    children: "AM"
+  }))), /*#__PURE__*/_jsx(StyledWheelListItem, {
     isCurrentListItem: isPmCurrent
-  }, void 0, /*#__PURE__*/_jsx(StyledTimeBtn, {
-    isCurrentListItem: isPmCurrent,
+  }, void 0, /*#__PURE__*/jsx(StyledTimeBtn, _objectSpread(_objectSpread({}, styledPropsCurrentPmMeridiem), {}, {
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM'],
-    selected: meridiem === 'PM',
+    selected: currMeridiem === 'PM',
     "aria-label": "PM ".concat(isPmCurrent ? 'selected' : ''),
     "aria-disabled": isDisabledPm,
-    isDisabled: isDisabledPm,
     buttonType: "raw",
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('PM', e),
@@ -74,22 +99,23 @@ const MeridiemList = () => {
     innerRef: isPmCurrent ? currMeridiemBtnRef : undefined,
     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(StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
+    "aria-valuemax": 1,
+    "aria-valuemin": 0,
+    "aria-valuenow": isPmCurrent ? 1 : 0,
+    "aria-valuetext": isAmCurrent ? 'ante meridiem' : 'post meridiem',
+    children: "PM"
+  }))), currMeridiem === 'PM' ? _StyledWheelListItem2 || (_StyledWheelListItem2 = /*#__PURE__*/_jsx(StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/jsx(StyledWheelChangeTimeBtn, _objectSpread(_objectSpread({}, styledPropsNextMeridiem), {}, {
     "aria-label": "set pm meridiem",
     "aria-disabled": isDisabledPm,
-    isDisabled: isDisabledPm,
     "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, {})))));
+    tabIndex: -1,
+    children: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {}))
+  }))));
 };
 
 export { MeridiemList, MeridiemList as default };