@elliemae/ds-controlled-form 2.4.1-rc.4 → 2.4.1-rc.8

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

@@ -7,11 +7,25 @@ var React = require('react');
 var useGetMonthYearFromDateStringOrEmptyStartingMonth = require('../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js');
 var dateHelpers = require('../../../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.useGetMonthYearFromDateStringOrEmptyStartingMonth(); // side-effects are really really controlled in this case so use-effect should be fine
+  } = useGetMonthYearFromDateStringOrEmptyStartingMonth.useGetMonthYearFromDateStringOrEmptyStartingMonth();
+  const [currentMonth, setCurrentMonth] = React.useState(monthFromDateString);
+  const [currentYear, setCurrentYear] = React.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
 
   React.useEffect(() => {
@@ -20,8 +34,6 @@ const useCurrentDisplayedMonthYearLogic = () => {
   React.useEffect(() => {
     setCurrentYear(yearFromDateString);
   }, [yearFromDateString]);
-  const [currentMonth, setCurrentMonth] = React.useState(monthFromDateString);
-  const [currentYear, setCurrentYear] = React.useState(yearFromDateString);
   const daysArray = React.useMemo(() => {
     const newDaysArray = dateHelpers.getFiveBySevenCurrentMonthDaysMatrix(currentMonth, currentYear);
     const hiddenPrevDay = dateHelpers.sumValuesToDate(newDaysArray[0].day, {
@@ -98,15 +110,31 @@ const useCurrentDisplayedMonthYearLogic = () => {
     });
     setCurrentYear(newYear);
   }, [currentMonth, currentYear]);
+  const {
+    invisibleFirstDay,
+    daysMatrixByWeekday,
+    invisibleLastDay
+  } = React.useMemo(() => {
+    const [invisible1stDay, ...otherDays] = [...daysArray];
+    const invisibleDayLast = otherDays.pop();
+    return {
+      invisibleFirstDay: invisible1stDay,
+      daysMatrixByWeekday: sliceIntoChunks(otherDays, 7),
+      invisibleLastDay: invisibleDayLast
+    };
+  }, [daysArray]);
   return React.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]);
 };
 
 exports.useCurrentDisplayedMonthYearLogic = useCurrentDisplayedMonthYearLogic;

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

@@ -26,32 +26,36 @@ const loopWhileWaiting = function (cb) {
 
 const useFocusLogic = _ref => {
   let {
-    daysArray,
+    currentDisplayedMonthLogic,
     showCalendar
   } = _ref;
   const {
     calendarDaysWrapperRef
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const {
+    daysArray
+  } = currentDisplayedMonthLogic;
   const {
     startFocusedDate
   } = useGetStartingFocusedDay.useGetStartingFocusedDay();
-  const [metadayToFocus, setMetadayToFocus] = React.useState(daysArray.find(_ref2 => {
+  const [metadayToFocus, setMetadayToFocus] = React.useState(() => startFocusedDate ? daysArray.find(_ref2 => {
     let {
       day: currDay
     } = _ref2;
     return dateHelpers.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 = React.useMemo(() => {
-    const newFocusedDay = metadayToFocus ? daysArray.find(_ref3 => {
+    let newFocusedDay;
+    if (metadayToFocus) newFocusedDay = daysArray.find(_ref3 => {
       let {
         day: currDay
       } = _ref3;
       return dateHelpers.compareTwoDatesDayEquality(currDay, metadayToFocus.day);
-    }) : daysArray.find(_ref4 => {
+    });else if (startFocusedDate) newFocusedDay = daysArray.find(_ref4 => {
       let {
         day: currDay
       } = _ref4;
@@ -97,7 +101,7 @@ const useFocusLogic = _ref => {
     if (focusedDay !== newFocusedMetaDay) setMetadayToFocus(newFocusedMetaDay);
   }, [daysArray, focusedDay]);
   const resetFocusedDayToStartDate = React.useCallback(() => {
-    setMetadayToFocus(null);
+    setMetadayToFocus(undefined);
   }, []);
   return React.useMemo(() => ({
     focusedDay,

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

@@ -12,13 +12,8 @@ var constants = require('../../../utils/constants.js');
 
 const useKeyboardHandlers = _ref => {
   let {
-    focusedDay,
-    daysArray,
-    handlePrevMonth,
-    handleNextMonth,
-    handleFocusMetaDay,
-    handleFocusMetaDayByDay,
-    tryToFocusCurrentlyDataIsFocusedDay
+    currentDisplayedMonthLogic,
+    focusLogic
   } = _ref;
   const {
     hideDate,
@@ -39,6 +34,17 @@ const useKeyboardHandlers = _ref => {
     isWithDateInputs,
     yearInputRef
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const {
+    focusedDay,
+    handleFocusMetaDay,
+    handleFocusMetaDayByDay,
+    tryToFocusCurrentlyDataIsFocusedDay
+  } = focusLogic;
+  const {
+    daysArray,
+    handlePrevMonth,
+    handleNextMonth
+  } = currentDisplayedMonthLogic;
   const tryToFocusDayRegion = React.useCallback(() => {
     setLatestInteractionRegion('calendar-days');
 
@@ -150,9 +156,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();
       }
     }
 
@@ -182,8 +192,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();
       }
     }
 
@@ -207,9 +219,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();
       }
     }
 
@@ -233,9 +249,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/cjs/date-time-picker/parts/Pickers/Calendar/usePopperTriggerLogic.js

@@ -10,12 +10,15 @@ var useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');
 
 const usePopperTriggerLogic = _ref => {
   let {
+    focusLogic,
+    showCalendar,
+    setShowCalendar
+  } = _ref;
+  const {
     focusedDay,
     resetFocusedDayToStartDate,
-    showCalendar,
-    setShowCalendar,
     tryToFocusCurrentlyDataIsFocusedDay
-  } = _ref;
+  } = focusLogic;
   const {
     props: {
       onPickerOpen,
@@ -84,7 +87,7 @@ const usePopperTriggerLogic = _ref => {
   useOnClickOutside.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 React.useMemo(() => ({
     closeCalendar,

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

@@ -16,8 +16,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-var _CalendarWithTimeWhee, _CalendarWithTimeWhee2;
-const CalendarWithTimeWheel = Calendar.WrapWithCalendarContext(TimeWheel.WrapWithTimeWheelContext(() => {
+var _CalendarWithTimeWhee, _CalendarWithTimeWhee2, _WrappedCalendarConte;
+
+const CalendarWithTimeWheelContent = () => {
   const ctx = useConfigCalendarWithTimeWheelCTX.useConfigCalendarWithTimeWheelCTX();
   const {
     showCalendarWithTimeWheel,
@@ -31,6 +32,9 @@ const CalendarWithTimeWheel = Calendar.WrapWithCalendarContext(TimeWheel.WrapWit
       onKeyDown: handleMenuWrapperKeyDown
     }, void 0, _CalendarWithTimeWhee2 || (_CalendarWithTimeWhee2 = /*#__PURE__*/_jsx__default["default"](CalendarWithTimeWheelWrapper.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__default["default"](Calendar.WrappedCalendarContext, {}, void 0, /*#__PURE__*/_jsx__default["default"](TimeWheel.WrappedTimeWheelContext, {}, void 0, /*#__PURE__*/_jsx__default["default"](CalendarWithTimeWheelContent, {}))));
 
 exports.CalendarWithTimeWheel = CalendarWithTimeWheel;

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

@@ -4,22 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('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__*/React.createContext(defaultCalendarWithTimeWheelContext);

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

@@ -30,7 +30,6 @@ const CalendarWithTimeWheelIconTrigger = () => {
     "aria-label": "date time picker context menu trigger, ".concat(ariaCurrentValueForInputs),
     buttonType: "icon",
     size: DSButton.BUTTON_SIZES.M,
-    variant: DSButton.BUTTON_VARIANT.DEFAULT,
     innerRef: handleSetTriggerRef,
     onClick: handleToggleCalendarWithTimeWheel,
     onKeyDown: handlePickerIconKeyDown,

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

@@ -68,25 +68,25 @@ const useConfigCalendarWithTimeWheelCTX = () => {
       }
     }]
   });
-  const openCalendar = React.useCallback(e => {
+  const openCalendar = React.useCallback(() => {
     setShowCalendarWithTimeWheel(true);
     onPickerOpen();
-    setTimeout(() => handleToggleCalendar(e));
-    setTimeout(() => handleToggleTimePicker(e));
+    setTimeout(() => handleToggleCalendar());
+    setTimeout(() => handleToggleTimePicker());
   }, [handleToggleCalendar, handleToggleTimePicker, onPickerOpen]);
-  const closeCalendar = React.useCallback(e => {
+  const closeCalendar = React.useCallback(() => {
     setShowCalendarWithTimeWheel(false);
     onPickerClose();
-    setTimeout(() => handleToggleCalendar(e));
-    setTimeout(() => handleToggleTimePicker(e));
+    setTimeout(() => handleToggleCalendar());
+    setTimeout(() => handleToggleTimePicker());
   }, [handleToggleCalendar, handleToggleTimePicker, onPickerClose]);
-  const handleToggleCalendarWithTimeWheel = React.useCallback(e => {
-    if (!showCalendarWithTimeWheel) openCalendar(e);else closeCalendar(e);
+  const handleToggleCalendarWithTimeWheel = React.useCallback(() => {
+    if (!showCalendarWithTimeWheel) openCalendar();else closeCalendar();
   }, [closeCalendar, openCalendar, showCalendarWithTimeWheel]);
   useOnClickOutside.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 = React.useCallback(newRef => {
     pickerButtonRef.current = newRef;
@@ -100,7 +100,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/cjs/date-time-picker/parts/Pickers/TimeWheel/HoursList.js

@@ -14,6 +14,7 @@ require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var dsIcons = require('@elliemae/ds-icons');
 var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var numberHelpers = require('../../../utils/numberHelpers.js');
 var Styleds = require('./Styleds.js');
 var TimeWheelContext = require('./TimeWheelContext.js');
@@ -32,22 +33,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
+  } = React.useContext(TimeWheelContext.TimeWheelContext);
+  const {
     prevHourBtnRef,
     currHourBtnRef,
     nextHourBtnRef,
     getIsDisabledTime,
-    autoFocusHourTimeWheel
-  } = React.useContext(TimeWheelContext.TimeWheelContext);
+    autoFocusHourTimeWheel,
+    hours
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   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: "raw",
@@ -58,9 +61,9 @@ const HoursList = () => {
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
     tabIndex: -1
   }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})))), visibleHours.map(hourString => {
-    const key = "timewheel-hour-".concat(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 currHourTimeString = "".concat(hourString, ":").concat(currMinuteNum, " ").concat(currMeridiem);
     const isEmptyCurrValueCurrentListItem = !hours && numberHelpers.convertToPositiveNumberIfPossible(hourString) === currHourNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || hours === hourString;
     const isDisabled = getIsDisabledTime(currHourTimeString);
@@ -69,23 +72,25 @@ const HoursList = () => {
       onKeyDown: isCurrentListItem ? handleCurrHourOnKeyDown : undefined,
       innerRef: isCurrentListItem ? currHourBtnRef : undefined
     };
+    const styleProps = {
+      isCurrentListItem,
+      isDisabled
+    };
     return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
       isCurrentListItem: isCurrentListItem
-    }, key, /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledTimeBtn, _objectSpread(_objectSpread({
-      isCurrentListItem: isCurrentListItem,
+    }, key, /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledTimeBtn, _objectSpread(_objectSpread(_objectSpread({}, styleProps), {}, {
       autoFocus: autoFocusHourTimeWheel && isCurrentListItem,
       "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_HOUR' : 'HOUR'],
       selected: hours.length === 2 && numberHelpers.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/cjs/date-time-picker/parts/Pickers/TimeWheel/MeridiemList.js

@@ -2,59 +2,86 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var dsIcons = require('@elliemae/ds-icons');
 var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var Styleds = require('./Styleds.js');
 var TimeWheelContext = require('./TimeWheelContext.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 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__default["default"](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
+  } = React.useContext(TimeWheelContext.TimeWheelContext);
+  const {
     prevMeridiemBtnRef,
     currMeridiemBtnRef,
     nextMeridiemBtnRef,
-    getIsDisabledTime
-  } = React.useContext(TimeWheelContext.TimeWheelContext);
-  const isAmCurrent = !meridiem || meridiem === 'AM';
-  const isPmCurrent = meridiem === 'PM';
+    getIsDisabledTime,
+    hours,
+    minutes
+  } = React.useContext(ControlledDateTimePickerCTX.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__default["default"](Styleds.StyledWheelList, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelChangeTimeBtn, {
+  const styledPropsPrevMeridiem = {
+    isDisabled: isDisabledAm
+  };
+  const styledPropsCurrentAmMeridiem = {
+    isCurrentListItem: isAmCurrent,
+    isDisabled: isDisabledAm
+  };
+  const styledPropsCurrentPmMeridiem = {
+    isCurrentListItem: isPmCurrent,
+    isDisabled: isDisabledPm
+  };
+  const styledPropsNextMeridiem = {
+    isDisabled: isDisabledPm
+  };
+  return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelList, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledWheelChangeTimeBtn, _objectSpread(_objectSpread({}, styledPropsPrevMeridiem), {}, {
     "aria-label": "set am meridiem",
     "aria-disabled": isDisabledAm,
-    isDisabled: isDisabledAm,
     "data-testid": ControlledDateTimePickerDatatestid.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__default["default"](dsIcons.ChevronSmallUp, {})))), meridiem === 'AM' || meridiem === '' ? _StyledWheelListItem || (_StyledWheelListItem = /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
+    tabIndex: -1,
+    children: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {}))
+  }))), currMeridiem === 'AM' || currMeridiem === '' ? _StyledWheelListItem || (_StyledWheelListItem = /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
     isCurrentListItem: isAmCurrent
-  }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimeBtn, {
-    isCurrentListItem: isAmCurrent,
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledTimeBtn, _objectSpread(_objectSpread({}, styledPropsCurrentAmMeridiem), {}, {
     "data-testid": ControlledDateTimePickerDatatestid.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),
@@ -62,19 +89,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__default["default"](Styleds.StyledWheelListItem, {
+    "aria-valuemax": 1,
+    "aria-valuemin": 0,
+    "aria-valuenow": isPmCurrent ? 1 : 0,
+    "aria-valuetext": isAmCurrent ? 'ante meridiem' : 'post meridiem',
+    children: "AM"
+  }))), /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
     isCurrentListItem: isPmCurrent
-  }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimeBtn, {
-    isCurrentListItem: isPmCurrent,
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledTimeBtn, _objectSpread(_objectSpread({}, styledPropsCurrentPmMeridiem), {}, {
     "data-testid": ControlledDateTimePickerDatatestid.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),
@@ -82,22 +108,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__default["default"](Styleds.StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.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__default["default"](Styleds.StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledWheelChangeTimeBtn, _objectSpread(_objectSpread({}, styledPropsNextMeridiem), {}, {
     "aria-label": "set pm meridiem",
     "aria-disabled": isDisabledPm,
-    isDisabled: isDisabledPm,
     "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, {})))));
+    tabIndex: -1,
+    children: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {}))
+  }))));
 };
 
 exports.MeridiemList = MeridiemList;