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

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

@@ -1,3 +1,4 @@
+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';
@@ -5,8 +6,6 @@ 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 = [];
@@ -21,23 +20,14 @@ function sliceIntoChunks(arr, chunkSize) {
 
 const useConfigCalendarCTX = () => {
   const {
-    pickerButtonRef,
     props: {
-      onPickerOpen,
-      onPickerClose,
-      preventCloseOnSelection
+      disabled
     },
-    hideDate,
-    hideTime,
-    monthInputRef,
-    hourInputRef,
     prevYearBtnRef,
     prevMonthBtnRef,
     nextMonthBtnRef,
     nextYearBtnRef,
     calendarDaysWrapperRef,
-    currMeridiemBtnRef,
-    currHourBtnRef,
     isControllerOnly,
     isWithTimeWheelToo,
     setLatestInteractionRegion,
@@ -90,14 +80,8 @@ const useConfigCalendarCTX = () => {
     resetFocusedDayToStartDate
   } = useFocusLogic({
     daysArray,
-    calendarDaysWrapperRef,
     showCalendar
-  }); // onOpen we try to focus the day we should focus, if we should focus one
-
-  const handleOnPickerOpen = useCallback(() => {
-    onPickerOpen();
-    tryToFocusCurrentlyDataIsFocusedDay();
-  }, [onPickerOpen, tryToFocusCurrentlyDataIsFocusedDay]);
+  });
   const {
     closeCalendar,
     handleSetTriggerRef,
@@ -107,12 +91,9 @@ const useConfigCalendarCTX = () => {
     handleToggleCalendar,
     handleMenuWrapperKeyDown
   } = usePopperTriggerLogic({
-    focusedDay,
+    tryToFocusCurrentlyDataIsFocusedDay,
     resetFocusedDayToStartDate,
-    prevMonthBtnRef,
-    pickerButtonRef,
-    onPickerOpen: handleOnPickerOpen,
-    onPickerClose,
+    focusedDay,
     showCalendar,
     setShowCalendar
   });
@@ -128,27 +109,9 @@ const useConfigCalendarCTX = () => {
     daysArray,
     handlePrevMonth,
     handleNextMonth,
-    pickerButtonRef,
-    currMeridiemBtnRef,
-    currHourBtnRef,
-    prevYearBtnRef,
-    prevMonthBtnRef,
-    nextMonthBtnRef,
-    nextYearBtnRef,
-    isWithTimeWheelToo,
-    isControllerOnly,
-    setShowCalendar,
-    onPickerOpen,
-    onPickerClose,
-    setLatestInteractionRegion,
     handleFocusMetaDay,
     handleFocusMetaDayByDay,
-    tryToFocusCurrentlyDataIsFocusedDay,
-    hideDate,
-    hideTime,
-    monthInputRef,
-    hourInputRef,
-    preventCloseOnSelection
+    tryToFocusCurrentlyDataIsFocusedDay
   });
   return useMemo(() => ({
     showCalendar,
@@ -193,8 +156,9 @@ const useConfigCalendarCTX = () => {
     onNextYearFocus,
     isWithTimeWheelToo,
     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]);
+    ariaCurrentValueForInputs,
+    disabled
+  }), [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, disabled]);
 };
 
 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,11 +1,17 @@
-import { useState, useMemo, useCallback, useLayoutEffect } from 'react';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import { useContext, useState, useMemo, useCallback, useLayoutEffect } from 'react';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 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) => {
+const loopWhileWaiting = function (cb) {
+  let shortcircuit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => false;
+  let timePerTry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
+  let maxTries = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 5;
   let ab = maxTries;
   const inter = setInterval(() => {
     cb();
@@ -14,30 +20,43 @@ const loopWhileWaiting = (cb, shortcircuit = () => false, timePerTry = 100, maxT
   }, timePerTry);
 };
 
-const useFocusLogic = ({
-  daysArray,
-  calendarDaysWrapperRef,
-  showCalendar
-}) => {
+const useFocusLogic = _ref => {
+  let {
+    daysArray,
+    showCalendar
+  } = _ref;
+  const {
+    calendarDaysWrapperRef
+  } = useContext(ControlledDateTimePickerContext);
   const {
     startFocusedDate
   } = useGetStartingFocusedDay();
-  const [metadayToFocus, setMetadayToFocus] = useState(daysArray.find(({
-    day: currDay
-  }) => compareTwoDatesDayEquality(currDay, startFocusedDate))); // this is required because we have to focus based on the inputs values too,
+  const [metadayToFocus, setMetadayToFocus] = useState(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,
   // 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(({
-      day: currDay
-    }) => compareTwoDatesDayEquality(currDay, metadayToFocus.day)) : daysArray.find(({
-      day: currDay
-    }) => compareTwoDatesDayEquality(currDay, startFocusedDate));
+    const newFocusedDay = metadayToFocus ? daysArray.find(_ref3 => {
+      let {
+        day: currDay
+      } = _ref3;
+      return compareTwoDatesDayEquality(currDay, metadayToFocus.day);
+    }) : daysArray.find(_ref4 => {
+      let {
+        day: currDay
+      } = _ref4;
+      return compareTwoDatesDayEquality(currDay, startFocusedDate);
+    });
     return newFocusedDay;
   }, [daysArray, startFocusedDate, metadayToFocus]);
-  const tryToFocusCurrentlyDataIsFocusedDay = useCallback((wrapperDOM = (calendarDaysWrapperRef === null || calendarDaysWrapperRef === void 0 ? void 0 : calendarDaysWrapperRef.current) || document) => {
+  const tryToFocusCurrentlyDataIsFocusedDay = useCallback(function () {
+    let wrapperDOM = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (calendarDaysWrapperRef === null || calendarDaysWrapperRef === void 0 ? void 0 : calendarDaysWrapperRef.current) || document;
     let shortcircuit = false;
     loopWhileWaiting(() => {
       const domElem = wrapperDOM === null || wrapperDOM === void 0 ? void 0 : wrapperDOM.querySelector('[data-isfocused="true"]');
@@ -55,16 +74,22 @@ const useFocusLogic = ({
   }, [calendarDaysWrapperRef, focusedDay, showCalendar, tryToFocusCurrentlyDataIsFocusedDay]);
   const handleFocusMetaDay = useCallback(metaDayToFocus => {
     // if focusedDay is inside current daysArray we set Focused day
-    const newFocusedMetaDay = daysArray.find(({
-      day: currDay
-    }) => compareTwoDatesDayEquality(currDay, metaDayToFocus.day));
+    const newFocusedMetaDay = daysArray.find(_ref5 => {
+      let {
+        day: currDay
+      } = _ref5;
+      return compareTwoDatesDayEquality(currDay, metaDayToFocus.day);
+    });
     if (focusedDay !== newFocusedMetaDay) setMetadayToFocus(newFocusedMetaDay);
   }, [daysArray, focusedDay]);
   const handleFocusMetaDayByDay = useCallback(dayDate => {
     // if focusedDay is inside current daysArray we set Focused day
-    const newFocusedMetaDay = daysArray.find(({
-      day: currDay
-    }) => compareTwoDatesDayEquality(currDay, dayDate));
+    const newFocusedMetaDay = daysArray.find(_ref6 => {
+      let {
+        day: currDay
+      } = _ref6;
+      return compareTwoDatesDayEquality(currDay, dayDate);
+    });
     if (focusedDay !== newFocusedMetaDay) setMetadayToFocus(newFocusedMetaDay);
   }, [daysArray, focusedDay]);
   const resetFocusedDayToStartDate = useCallback(() => {

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

@@ -1,36 +1,50 @@
-import { useCallback, useMemo } from 'react';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import { useContext, useCallback, useMemo } from 'react';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { sumValuesToDate } from '../../../utils/dateHelpers.js';
-
-/* eslint-disable complexity */
-const useKeyboardHandlers = ({
-  focusedDay,
-  daysArray,
-  handlePrevMonth,
-  handleNextMonth,
-  prevYearBtnRef,
-  prevMonthBtnRef,
-  nextMonthBtnRef,
-  nextYearBtnRef,
-  currMeridiemBtnRef,
-  currHourBtnRef,
-  isWithTimeWheelToo,
-  isControllerOnly,
-  handleFocusMetaDay,
-  handleFocusMetaDayByDay,
-  tryToFocusCurrentlyDataIsFocusedDay,
-  hideDate,
-  hideTime,
-  monthInputRef,
-  hourInputRef,
-  setLatestInteractionRegion
-}) => {
+import { homeEndKeys, homeEndAllArrowKeys } from '../../../utils/constants.js';
+
+const useKeyboardHandlers = _ref => {
+  let {
+    focusedDay,
+    daysArray,
+    handlePrevMonth,
+    handleNextMonth,
+    handleFocusMetaDay,
+    handleFocusMetaDayByDay,
+    tryToFocusCurrentlyDataIsFocusedDay
+  } = _ref;
+  const {
+    hideDate,
+    hideTime,
+    monthInputRef,
+    hourInputRef,
+    prevYearBtnRef,
+    prevMonthBtnRef,
+    nextMonthBtnRef,
+    nextYearBtnRef,
+    currMeridiemBtnRef,
+    isControllerOnly,
+    isWithTimeWheelToo,
+    setLatestInteractionRegion,
+    withAnyInputs,
+    isWithTimeInputs,
+    meridiemInputRef,
+    isWithDateInputs,
+    yearInputRef
+  } = useContext(ControlledDateTimePickerContext);
   const tryToFocusDayRegion = useCallback(() => {
     setLatestInteractionRegion('calendar-days');
 
     if (!focusedDay) {
-      const newFocusDay = daysArray.find(({
-        isCurrMonthDay
-      }) => isCurrMonthDay);
+      const newFocusDay = daysArray.find(_ref2 => {
+        let {
+          isCurrMonthDay
+        } = _ref2;
+        return isCurrMonthDay;
+      });
       if (newFocusDay) setTimeout(() => {
         handleFocusMetaDay(newFocusDay);
       });
@@ -57,12 +71,16 @@ const useKeyboardHandlers = ({
     const {
       key
     } = e;
-    const preventDefaultKeys = ['Home', 'End'];
-    const stopPropagationKeys = ['Home', 'End'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    if (homeEndKeys.includes(key)) e.preventDefault();
+    if (homeEndKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDownTriggerIcon();
-  }, [onHomeKeyDownTriggerIcon]);
+
+    if (key === 'Backspace' && withAnyInputs) {
+      var _meridiemInputRef$cur, _meridiemInputRef$cur2, _yearInputRef$current, _yearInputRef$current2;
+
+      if (isWithTimeInputs) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur = meridiemInputRef.current) === null || _meridiemInputRef$cur === void 0 ? void 0 : (_meridiemInputRef$cur2 = _meridiemInputRef$cur.focus) === null || _meridiemInputRef$cur2 === void 0 ? void 0 : _meridiemInputRef$cur2.call(_meridiemInputRef$cur);else if (isWithDateInputs) yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current = yearInputRef.current) === null || _yearInputRef$current === void 0 ? void 0 : (_yearInputRef$current2 = _yearInputRef$current.focus) === null || _yearInputRef$current2 === void 0 ? void 0 : _yearInputRef$current2.call(_yearInputRef$current);
+    }
+  }, [isWithDateInputs, isWithTimeInputs, meridiemInputRef, onHomeKeyDownTriggerIcon, withAnyInputs, yearInputRef]);
   const handleDayOnKeyDown = useCallback((e, metaDay) => {
     let newFocusedDayDate;
     const {
@@ -72,10 +90,8 @@ const useKeyboardHandlers = ({
       key,
       shiftKey
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
     if (key === 'ArrowUp') newFocusedDayDate = sumValuesToDate(day, {
       daysToSum: -7
     });
@@ -111,30 +127,15 @@ const useKeyboardHandlers = ({
     if (key === 'Home') onHomeKeyDownInsideCalendar();
     if (key === 'End') onEndKeyDownInsideCalendar(); // TAB CYCLE IMPLEMENTATION
 
-    if (!isControllerOnly) if (key === 'Tab') {
-      e.preventDefault(); // we only prevent default if it's not controller only
+    if (key === 'Tab' && !shiftKey && isControllerOnly === false && !isWithTimeWheelToo) {
+      var _prevMonthBtnRef$curr3, _prevMonthBtnRef$curr4;
 
-      if (shiftKey) {
-        var _nextYearBtnRef$curre, _nextYearBtnRef$curre2;
-
-        nextYearBtnRef === null || nextYearBtnRef === void 0 ? void 0 : (_nextYearBtnRef$curre = nextYearBtnRef.current) === null || _nextYearBtnRef$curre === void 0 ? void 0 : (_nextYearBtnRef$curre2 = _nextYearBtnRef$curre.focus) === null || _nextYearBtnRef$curre2 === void 0 ? void 0 : _nextYearBtnRef$curre2.call(_nextYearBtnRef$curre);
-      } else if (isWithTimeWheelToo) {
-        var _currHourBtnRef$curre, _currHourBtnRef$curre2;
-
-        currHourBtnRef === null || currHourBtnRef === void 0 ? void 0 : (_currHourBtnRef$curre = currHourBtnRef.current) === null || _currHourBtnRef$curre === void 0 ? void 0 : (_currHourBtnRef$curre2 = _currHourBtnRef$curre.focus) === null || _currHourBtnRef$curre2 === void 0 ? void 0 : _currHourBtnRef$curre2.call(_currHourBtnRef$curre);
-      } else {
-        var _prevMonthBtnRef$curr3, _prevMonthBtnRef$curr4;
-
-        //  Before it was like  https://jira.elliemae.io/browse/PUI-6632
-        //   setShowCalendar(false);
-        //   onPickerClose();
-        //  we are implementing focus cycle now
-        //  if someone changes his mind, remove comments to the above and add comments below
-        // setShowCalendar onPickerClose are recibed as part of the args of the hook already
-        prevMonthBtnRef === null || prevMonthBtnRef === void 0 ? void 0 : (_prevMonthBtnRef$curr3 = prevMonthBtnRef.current) === null || _prevMonthBtnRef$curr3 === void 0 ? void 0 : (_prevMonthBtnRef$curr4 = _prevMonthBtnRef$curr3.focus) === null || _prevMonthBtnRef$curr4 === void 0 ? void 0 : _prevMonthBtnRef$curr4.call(_prevMonthBtnRef$curr3);
-      }
+      // MUST prevent default since this is a custom focus switch
+      // NOT preventing the default event will cause unexpected result
+      e.preventDefault();
+      prevMonthBtnRef === null || prevMonthBtnRef === void 0 ? void 0 : (_prevMonthBtnRef$curr3 = prevMonthBtnRef.current) === null || _prevMonthBtnRef$curr3 === void 0 ? void 0 : (_prevMonthBtnRef$curr4 = _prevMonthBtnRef$curr3.focus) === null || _prevMonthBtnRef$curr4 === void 0 ? void 0 : _prevMonthBtnRef$curr4.call(_prevMonthBtnRef$curr3);
     }
-  }, [currHourBtnRef, daysArray, handleFocusMetaDayByDay, handleNextMonth, handlePrevMonth, isControllerOnly, isWithTimeWheelToo, nextYearBtnRef, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, prevMonthBtnRef, tryToFocusCurrentlyDataIsFocusedDay]);
+  }, [daysArray, handleFocusMetaDayByDay, handleNextMonth, handlePrevMonth, isControllerOnly, isWithTimeWheelToo, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, prevMonthBtnRef, tryToFocusCurrentlyDataIsFocusedDay]);
   const handlePrevYearKeyDown = useCallback(e => {
     const {
       key,

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

@@ -1,18 +1,25 @@
-import { useState, useCallback, useMemo } from 'react';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useContext, useState, useCallback, useMemo } from 'react';
 import { usePopper } from 'react-popper';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside.js';
 
-/* eslint-disable complexity */
-const usePopperTriggerLogic = ({
-  focusedDay,
-  resetFocusedDayToStartDate,
-  prevMonthBtnRef,
-  pickerButtonRef,
-  onPickerOpen,
-  onPickerClose,
-  showCalendar,
-  setShowCalendar
-}) => {
+const usePopperTriggerLogic = _ref => {
+  let {
+    focusedDay,
+    resetFocusedDayToStartDate,
+    showCalendar,
+    setShowCalendar,
+    tryToFocusCurrentlyDataIsFocusedDay
+  } = _ref;
+  const {
+    props: {
+      onPickerOpen,
+      onPickerClose
+    },
+    prevMonthBtnRef,
+    pickerButtonRef
+  } = useContext(ControlledDateTimePickerContext);
   const [referenceElement, setReferenceElement] = useState(null);
   const [popperElement, setPopperElement] = useState(null);
   const [arrowElement, setArrowElement] = useState(null);
@@ -23,7 +30,12 @@ const usePopperTriggerLogic = ({
         element: arrowElement
       }
     }]
-  });
+  }); // onOpen we try to focus the day we should focus, if we should focus one
+
+  const handleOnPickerOpen = useCallback(() => {
+    onPickerOpen();
+    tryToFocusCurrentlyDataIsFocusedDay();
+  }, [onPickerOpen, tryToFocusCurrentlyDataIsFocusedDay]);
   const openCalendar = useCallback(() => {
     if (focusedDay) setTimeout(() => {
       var _focusedDay$dayBtnRef, _focusedDay$dayBtnRef2, _focusedDay$dayBtnRef3;
@@ -35,8 +47,8 @@ const usePopperTriggerLogic = ({
       return prevMonthBtnRef === null || prevMonthBtnRef === void 0 ? void 0 : (_prevMonthBtnRef$curr = prevMonthBtnRef.current) === null || _prevMonthBtnRef$curr === void 0 ? void 0 : (_prevMonthBtnRef$curr2 = _prevMonthBtnRef$curr.focus) === null || _prevMonthBtnRef$curr2 === void 0 ? void 0 : _prevMonthBtnRef$curr2.call(_prevMonthBtnRef$curr);
     }, 100);
     setShowCalendar(true);
-    onPickerOpen();
-  }, [focusedDay, onPickerOpen, prevMonthBtnRef, setShowCalendar]);
+    handleOnPickerOpen();
+  }, [focusedDay, handleOnPickerOpen, prevMonthBtnRef, setShowCalendar]);
   const closeCalendar = useCallback(() => {
     var _pickerButtonRef$curr, _pickerButtonRef$curr2;
 

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

@@ -13,7 +13,8 @@ const defaultCalendarWithTimeWheelContext = {
   handleToggleCalendarWithTimeWheel: noop,
   handleMenuWrapperKeyDown: noop,
   handlePickerIconKeyDown: noop,
-  isControllerOnly: false
+  isControllerOnly: false,
+  disabled: false
 };
 /** Context for cross component communication */
 

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

@@ -1,12 +1,12 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useMemo } from 'react';
-import { DSIconColors } from '@elliemae/ds-icon';
 import { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';
-import DatePicker from '@elliemae/ds-icons/DatePicker';
+import { DatePicker } from '@elliemae/ds-icons';
 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
 
@@ -15,20 +15,20 @@ const CalendarWithTimeWheelIconTrigger = () => {
     handleSetTriggerRef,
     handleToggleCalendarWithTimeWheel,
     handlePickerIconKeyDown,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    disabled
   } = useContext(CalendarWithTimeWheelContext);
   return useMemo(() => /*#__PURE__*/_jsx(StyledIconTriggerButton, {
-    "aria-label": `date time picker context menu trigger, ${ariaCurrentValueForInputs}`,
+    "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
-  }, void 0, /*#__PURE__*/_jsx(DatePicker, {
-    color: DSIconColors.PRIMARY
-  })), [ariaCurrentValueForInputs, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendarWithTimeWheel]);
+    "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL,
+    disabled: disabled
+  }, void 0, _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker, {}))), [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendarWithTimeWheel]);
 };
 
 export { CalendarWithTimeWheelIconTrigger };

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

@@ -1,3 +1,8 @@
+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';

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

@@ -4,35 +4,65 @@ import { CalendarContent } from '../Calendar/CalendarContent.js';
 
 const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-h2xj8r-0"
-})(["color:", ";width:26px;height:26px;"], ({
-  theme
-}) => theme.colors.brand['600']);
+})(["color:", ";width:26px;height:26px;"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return 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
-}) => isControllerOnly ? undefined : 'box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);', ({
-  theme
-}) => theme.colors.neutral[200]);
+})(["background:", ";", " display:grid;grid-template-columns:260px 192px;grid-template-rows:1fr;column-gap:0;& > div:last-of-type{box-shadow:-1px 0 0 0 ", ";margin-left:1px;}"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral['000'];
+}, _ref3 => {
+  let {
+    isControllerOnly
+  } = _ref3;
+  return isControllerOnly ? undefined : 'box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);';
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.neutral[200];
+});
 const StyledCalendar = /*#__PURE__*/styled(CalendarContent).withConfig({
   componentId: "sc-h2xj8r-2"
 })(["box-shadow:none;"]);
 const CalendarWithTimeWheelFooterMessage = /*#__PURE__*/styled.footer.withConfig({
   componentId: "sc-h2xj8r-3"
-})(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;grid-column:1/3;"], ({
-  theme
-}) => theme.colors.neutral[300], ({
-  theme
-}) => theme.space.xxs2, ({
-  theme
-}) => theme.space.xxs2, ({
-  theme
-}) => theme.colors.danger[900], ({
-  theme
-}) => theme.fontWeights.thin, ({
-  theme
-}) => theme.fontSizes.microText[200]);
+})(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;grid-column:1/3;"], _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral[300];
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.space.xxs2;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.space.xxs2;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.danger[900];
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.fontWeights.thin;
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.fontSizes.microText[200];
+});
 
 export { CalendarWithTimeWheelFooterMessage, StyledCalendar, StyledCalendarWithTimeWheelWrapper, StyledIconTriggerButton };