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

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

@@ -2,14 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
 var React = require('react');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var dateHelpers = require('../../../utils/dateHelpers.js');
 var useGetStartingFocusedDay = require('../../../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();
@@ -18,30 +24,43 @@ const loopWhileWaiting = (cb, shortcircuit = () => false, timePerTry = 100, maxT
   }, timePerTry);
 };
 
-const useFocusLogic = ({
-  daysArray,
-  calendarDaysWrapperRef,
-  showCalendar
-}) => {
+const useFocusLogic = _ref => {
+  let {
+    daysArray,
+    showCalendar
+  } = _ref;
+  const {
+    calendarDaysWrapperRef
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const {
     startFocusedDate
   } = useGetStartingFocusedDay.useGetStartingFocusedDay();
-  const [metadayToFocus, setMetadayToFocus] = React.useState(daysArray.find(({
-    day: currDay
-  }) => dateHelpers.compareTwoDatesDayEquality(currDay, startFocusedDate))); // this is required because we have to focus based on the inputs values too,
+  const [metadayToFocus, setMetadayToFocus] = React.useState(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,
   // 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(({
-      day: currDay
-    }) => dateHelpers.compareTwoDatesDayEquality(currDay, metadayToFocus.day)) : daysArray.find(({
-      day: currDay
-    }) => dateHelpers.compareTwoDatesDayEquality(currDay, startFocusedDate));
+    const newFocusedDay = metadayToFocus ? daysArray.find(_ref3 => {
+      let {
+        day: currDay
+      } = _ref3;
+      return dateHelpers.compareTwoDatesDayEquality(currDay, metadayToFocus.day);
+    }) : daysArray.find(_ref4 => {
+      let {
+        day: currDay
+      } = _ref4;
+      return dateHelpers.compareTwoDatesDayEquality(currDay, startFocusedDate);
+    });
     return newFocusedDay;
   }, [daysArray, startFocusedDate, metadayToFocus]);
-  const tryToFocusCurrentlyDataIsFocusedDay = React.useCallback((wrapperDOM = (calendarDaysWrapperRef === null || calendarDaysWrapperRef === void 0 ? void 0 : calendarDaysWrapperRef.current) || document) => {
+  const tryToFocusCurrentlyDataIsFocusedDay = React.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"]');
@@ -59,16 +78,22 @@ const useFocusLogic = ({
   }, [calendarDaysWrapperRef, focusedDay, showCalendar, tryToFocusCurrentlyDataIsFocusedDay]);
   const handleFocusMetaDay = React.useCallback(metaDayToFocus => {
     // if focusedDay is inside current daysArray we set Focused day
-    const newFocusedMetaDay = daysArray.find(({
-      day: currDay
-    }) => dateHelpers.compareTwoDatesDayEquality(currDay, metaDayToFocus.day));
+    const newFocusedMetaDay = daysArray.find(_ref5 => {
+      let {
+        day: currDay
+      } = _ref5;
+      return dateHelpers.compareTwoDatesDayEquality(currDay, metaDayToFocus.day);
+    });
     if (focusedDay !== newFocusedMetaDay) setMetadayToFocus(newFocusedMetaDay);
   }, [daysArray, focusedDay]);
   const handleFocusMetaDayByDay = React.useCallback(dayDate => {
     // if focusedDay is inside current daysArray we set Focused day
-    const newFocusedMetaDay = daysArray.find(({
-      day: currDay
-    }) => dateHelpers.compareTwoDatesDayEquality(currDay, dayDate));
+    const newFocusedMetaDay = daysArray.find(_ref6 => {
+      let {
+        day: currDay
+      } = _ref6;
+      return dateHelpers.compareTwoDatesDayEquality(currDay, dayDate);
+    });
     if (focusedDay !== newFocusedMetaDay) setMetadayToFocus(newFocusedMetaDay);
   }, [daysArray, focusedDay]);
   const resetFocusedDayToStartDate = React.useCallback(() => {

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

@@ -2,37 +2,53 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
 var React = require('react');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var dateHelpers = require('../../../utils/dateHelpers.js');
+var constants = require('../../../utils/constants.js');
 
-/* eslint-disable complexity */
-const useKeyboardHandlers = ({
-  focusedDay,
-  daysArray,
-  handlePrevMonth,
-  handleNextMonth,
-  prevYearBtnRef,
-  prevMonthBtnRef,
-  nextMonthBtnRef,
-  nextYearBtnRef,
-  currMeridiemBtnRef,
-  isWithTimeWheelToo,
-  handleFocusMetaDay,
-  handleFocusMetaDayByDay,
-  tryToFocusCurrentlyDataIsFocusedDay,
-  hideDate,
-  hideTime,
-  monthInputRef,
-  hourInputRef,
-  setLatestInteractionRegion
-}) => {
+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
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const tryToFocusDayRegion = React.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);
       });
@@ -40,7 +56,17 @@ const useKeyboardHandlers = ({
       tryToFocusCurrentlyDataIsFocusedDay();
     }
   }, [daysArray, focusedDay, handleFocusMetaDay, setLatestInteractionRegion, tryToFocusCurrentlyDataIsFocusedDay]);
-  const onHomeKeyDown = React.useCallback(() => {
+  const onHomeKeyDownInsideCalendar = React.useCallback(() => {
+    var _prevMonthBtnRef$curr, _prevMonthBtnRef$curr2;
+
+    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);
+  }, [prevMonthBtnRef]);
+  const onEndKeyDownInsideCalendar = React.useCallback(() => {
+    var _currMeridiemBtnRef$c, _currMeridiemBtnRef$c2;
+
+    if (isWithTimeWheelToo) currMeridiemBtnRef === null || currMeridiemBtnRef === void 0 ? void 0 : (_currMeridiemBtnRef$c = currMeridiemBtnRef.current) === null || _currMeridiemBtnRef$c === void 0 ? void 0 : (_currMeridiemBtnRef$c2 = _currMeridiemBtnRef$c.focus) === null || _currMeridiemBtnRef$c2 === void 0 ? void 0 : _currMeridiemBtnRef$c2.call(_currMeridiemBtnRef$c);else tryToFocusDayRegion();
+  }, [currMeridiemBtnRef, isWithTimeWheelToo, tryToFocusDayRegion]);
+  const onHomeKeyDownTriggerIcon = React.useCallback(() => {
     var _monthInputRef$curren, _monthInputRef$curren2, _hourInputRef$current, _hourInputRef$current2;
 
     if (!hideDate) monthInputRef === null || monthInputRef === void 0 ? void 0 : (_monthInputRef$curren = monthInputRef.current) === null || _monthInputRef$curren === void 0 ? void 0 : (_monthInputRef$curren2 = _monthInputRef$curren.focus) === null || _monthInputRef$curren2 === void 0 ? void 0 : _monthInputRef$curren2.call(_monthInputRef$curren);else if (!hideTime) hourInputRef === null || hourInputRef === void 0 ? void 0 : (_hourInputRef$current = hourInputRef.current) === null || _hourInputRef$current === void 0 ? void 0 : (_hourInputRef$current2 = _hourInputRef$current.focus) === null || _hourInputRef$current2 === void 0 ? void 0 : _hourInputRef$current2.call(_hourInputRef$current);
@@ -49,10 +75,16 @@ const useKeyboardHandlers = ({
     const {
       key
     } = e;
-    const preventDefaultKeys = ['Home'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (key === 'Home') onHomeKeyDown();
-  }, [onHomeKeyDown]);
+    if (constants.homeEndKeys.includes(key)) e.preventDefault();
+    if (constants.homeEndKeys.includes(key)) e.stopPropagation();
+    if (key === 'Home') 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 = React.useCallback((e, metaDay) => {
     let newFocusedDayDate;
     const {
@@ -62,11 +94,16 @@ const useKeyboardHandlers = ({
       key,
       shiftKey
     } = e;
+    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
     if (key === 'ArrowUp') newFocusedDayDate = dateHelpers.sumValuesToDate(day, {
       daysToSum: -7
-    });else if (key === 'ArrowDown') newFocusedDayDate = dateHelpers.sumValuesToDate(day, {
+    });
+    if (key === 'ArrowDown') newFocusedDayDate = dateHelpers.sumValuesToDate(day, {
       daysToSum: 7
-    });else if (key === 'ArrowLeft') {
+    });
+
+    if (key === 'ArrowLeft') {
       newFocusedDayDate = dateHelpers.sumValuesToDate(day, {
         daysToSum: -1
       });
@@ -74,7 +111,9 @@ const useKeyboardHandlers = ({
       if (metaDay === daysArray[1]) {
         handlePrevMonth();
       }
-    } else if (key === 'ArrowRight') {
+    }
+
+    if (key === 'ArrowRight') {
       newFocusedDayDate = dateHelpers.sumValuesToDate(day, {
         daysToSum: 1
       });
@@ -82,31 +121,25 @@ const useKeyboardHandlers = ({
       if (metaDay === daysArray[daysArray.length - 2]) {
         handleNextMonth();
       }
-    } else if (key === 'Tab') {
-      if (shiftKey) {
-        var _nextYearBtnRef$curre, _nextYearBtnRef$curre2;
-
-        e.preventDefault();
-        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 _prevMonthBtnRef$curr, _prevMonthBtnRef$curr2;
-
-        //  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
-        e.preventDefault();
-        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);
-      }
     }
 
     if (newFocusedDayDate) {
       handleFocusMetaDayByDay(newFocusedDayDate);
       setTimeout(tryToFocusCurrentlyDataIsFocusedDay);
     }
-  }, [daysArray, handleFocusMetaDayByDay, handleNextMonth, handlePrevMonth, isWithTimeWheelToo, nextYearBtnRef, prevMonthBtnRef, tryToFocusCurrentlyDataIsFocusedDay]);
+
+    if (key === 'Home') onHomeKeyDownInsideCalendar();
+    if (key === 'End') onEndKeyDownInsideCalendar(); // TAB CYCLE IMPLEMENTATION
+
+    if (key === 'Tab' && !shiftKey && isControllerOnly === false && !isWithTimeWheelToo) {
+      var _prevMonthBtnRef$curr3, _prevMonthBtnRef$curr4;
+
+      // 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);
+    }
+  }, [daysArray, handleFocusMetaDayByDay, handleNextMonth, handlePrevMonth, isControllerOnly, isWithTimeWheelToo, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, prevMonthBtnRef, tryToFocusCurrentlyDataIsFocusedDay]);
   const handlePrevYearKeyDown = React.useCallback(e => {
     const {
       key,
@@ -122,7 +155,17 @@ const useKeyboardHandlers = ({
         nextYearBtnRef.current.focus();
       }
     }
-  }, [nextMonthBtnRef, nextYearBtnRef]);
+
+    if (key === 'Home') {
+      onHomeKeyDownInsideCalendar();
+      e.preventDefault();
+    }
+
+    if (key === 'End') {
+      onEndKeyDownInsideCalendar();
+      e.preventDefault();
+    }
+  }, [nextMonthBtnRef, nextYearBtnRef, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar]);
   const handlePrevMonthKeyDown = React.useCallback(e => {
     const {
       key,
@@ -130,17 +173,30 @@ const useKeyboardHandlers = ({
     } = e;
 
     if (key === 'Tab') {
-      e.preventDefault();
-
       if (shiftKey) {
-        var _currMeridiemBtnRef$c, _currMeridiemBtnRef$c2;
+        // TAB CYCLE IMPLEMENTATION
+        if (!isControllerOnly) {
+          var _currMeridiemBtnRef$c3, _currMeridiemBtnRef$c4;
 
-        if (isWithTimeWheelToo) currMeridiemBtnRef === null || currMeridiemBtnRef === void 0 ? void 0 : (_currMeridiemBtnRef$c = currMeridiemBtnRef.current) === null || _currMeridiemBtnRef$c === void 0 ? void 0 : (_currMeridiemBtnRef$c2 = _currMeridiemBtnRef$c.focus) === null || _currMeridiemBtnRef$c2 === void 0 ? void 0 : _currMeridiemBtnRef$c2.call(_currMeridiemBtnRef$c);else tryToFocusDayRegion();
+          e.preventDefault();
+          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 {
+        e.preventDefault();
         nextMonthBtnRef.current.focus();
       }
     }
-  }, [currMeridiemBtnRef, isWithTimeWheelToo, nextMonthBtnRef, tryToFocusDayRegion]);
+
+    if (key === 'Home') {
+      onHomeKeyDownInsideCalendar();
+      e.preventDefault();
+    }
+
+    if (key === 'End') {
+      onEndKeyDownInsideCalendar();
+      e.preventDefault();
+    }
+  }, [currMeridiemBtnRef, isControllerOnly, isWithTimeWheelToo, nextMonthBtnRef, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, tryToFocusDayRegion]);
   const handleNextMonthKeyDown = React.useCallback(e => {
     const {
       key,
@@ -156,7 +212,17 @@ const useKeyboardHandlers = ({
         prevYearBtnRef.current.focus();
       }
     }
-  }, [prevMonthBtnRef, prevYearBtnRef]);
+
+    if (key === 'Home') {
+      onHomeKeyDownInsideCalendar();
+      e.preventDefault();
+    }
+
+    if (key === 'End') {
+      onEndKeyDownInsideCalendar();
+      e.preventDefault();
+    }
+  }, [onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, prevMonthBtnRef, prevYearBtnRef]);
   const handleNextYearKeyDown = React.useCallback(e => {
     const {
       key,
@@ -174,7 +240,17 @@ const useKeyboardHandlers = ({
 
       if (!shiftKey) tryToFocusDayRegion();
     }
-  }, [tryToFocusDayRegion, prevYearBtnRef]);
+
+    if (key === 'Home') {
+      onHomeKeyDownInsideCalendar();
+      e.preventDefault();
+    }
+
+    if (key === 'End') {
+      onEndKeyDownInsideCalendar();
+      e.preventDefault();
+    }
+  }, [tryToFocusDayRegion, prevYearBtnRef, onHomeKeyDownInsideCalendar, onEndKeyDownInsideCalendar]);
   return React.useMemo(() => ({
     handleDayOnKeyDown,
     handlePrevYearKeyDown,

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

@@ -2,21 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactPopper = require('react-popper');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var useOnClickOutside = require('../../../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
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const [referenceElement, setReferenceElement] = React.useState(null);
   const [popperElement, setPopperElement] = React.useState(null);
   const [arrowElement, setArrowElement] = React.useState(null);
@@ -27,7 +34,12 @@ const usePopperTriggerLogic = ({
         element: arrowElement
       }
     }]
-  });
+  }); // onOpen we try to focus the day we should focus, if we should focus one
+
+  const handleOnPickerOpen = React.useCallback(() => {
+    onPickerOpen();
+    tryToFocusCurrentlyDataIsFocusedDay();
+  }, [onPickerOpen, tryToFocusCurrentlyDataIsFocusedDay]);
   const openCalendar = React.useCallback(() => {
     if (focusedDay) setTimeout(() => {
       var _focusedDay$dayBtnRef, _focusedDay$dayBtnRef2, _focusedDay$dayBtnRef3;
@@ -39,8 +51,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 = React.useCallback(() => {
     var _pickerButtonRef$curr, _pickerButtonRef$curr2;
 

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

@@ -24,12 +24,12 @@ const CalendarWithTimeWheel = Calendar.WrapWithCalendarContext(TimeWheel.WrapWit
     isControllerOnly,
     handleMenuWrapperKeyDown
   } = ctx;
-  return /*#__PURE__*/_jsx__default['default'](CalendarWithTimeWheelContext.CalendarWithTimeWheelContext.Provider, {
+  return /*#__PURE__*/_jsx__default["default"](CalendarWithTimeWheelContext.CalendarWithTimeWheelContext.Provider, {
     value: ctx
-  }, void 0, isControllerOnly ? null : _CalendarWithTimeWhee || (_CalendarWithTimeWhee = /*#__PURE__*/_jsx__default['default'](CalendarWithTimeWheelIconTrigger.CalendarWithTimeWheelIconTrigger, {})), isControllerOnly || showCalendarWithTimeWheel ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /*#__PURE__*/_jsx__default['default']("div", {
+  }, void 0, isControllerOnly ? null : _CalendarWithTimeWhee || (_CalendarWithTimeWhee = /*#__PURE__*/_jsx__default["default"](CalendarWithTimeWheelIconTrigger.CalendarWithTimeWheelIconTrigger, {})), isControllerOnly || showCalendarWithTimeWheel ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /*#__PURE__*/_jsx__default["default"]("div", {
       onKeyDown: handleMenuWrapperKeyDown
-    }, void 0, _CalendarWithTimeWhee2 || (_CalendarWithTimeWhee2 = /*#__PURE__*/_jsx__default['default'](CalendarWithTimeWheelWrapper.CalendarWithTimeWheelWrapper, {})))
+    }, void 0, _CalendarWithTimeWhee2 || (_CalendarWithTimeWhee2 = /*#__PURE__*/_jsx__default["default"](CalendarWithTimeWheelWrapper.CalendarWithTimeWheelWrapper, {})))
   }) : null);
 }));
 

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
+var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
 var Styleds = require('./Styleds.js');
 var CalendarWithTimeWheelFooter = require('./CalendarWithTimeWheelFooter.js');
 var TimeWheelContent = require('../TimeWheel/TimeWheelContent.js');
@@ -18,9 +19,10 @@ const CalendarWithTimeWheelContent = () => {
   const {
     isControllerOnly
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  return /*#__PURE__*/_jsx__default['default'](Styleds.StyledCalendarWithTimeWheelWrapper, {
-    isControllerOnly: isControllerOnly
-  }, void 0, _StyledCalendar || (_StyledCalendar = /*#__PURE__*/_jsx__default['default'](Styleds.StyledCalendar, {})), _TimeWheelContent || (_TimeWheelContent = /*#__PURE__*/_jsx__default['default'](TimeWheelContent.TimeWheelContent, {})), _CalendarWithTimeWhee || (_CalendarWithTimeWhee = /*#__PURE__*/_jsx__default['default'](CalendarWithTimeWheelFooter.CalendarWithTimeWheelFooter, {})));
+  return /*#__PURE__*/_jsx__default["default"](Styleds.StyledCalendarWithTimeWheelWrapper, {
+    isControllerOnly: isControllerOnly,
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL
+  }, void 0, _StyledCalendar || (_StyledCalendar = /*#__PURE__*/_jsx__default["default"](Styleds.StyledCalendar, {})), _TimeWheelContent || (_TimeWheelContent = /*#__PURE__*/_jsx__default["default"](TimeWheelContent.TimeWheelContent, {})), _CalendarWithTimeWhee || (_CalendarWithTimeWhee = /*#__PURE__*/_jsx__default["default"](CalendarWithTimeWheelFooter.CalendarWithTimeWheelFooter, {})));
 };
 
 exports.CalendarWithTimeWheelContent = CalendarWithTimeWheelContent;

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

@@ -8,6 +8,7 @@ var React = require('react');
 const noop = () => {};
 
 const defaultCalendarWithTimeWheelContext = {
+  ariaCurrentValueForInputs: '',
   showCalendarWithTimeWheel: false,
   setPopperElement: noop,
   setArrowElement: noop,
@@ -16,12 +17,13 @@ const defaultCalendarWithTimeWheelContext = {
   handleToggleCalendarWithTimeWheel: noop,
   handleMenuWrapperKeyDown: noop,
   handlePickerIconKeyDown: noop,
-  isControllerOnly: false
+  isControllerOnly: false,
+  disabled: false
 };
 /** Context for cross component communication */
 
 const CalendarWithTimeWheelContext = /*#__PURE__*/React.createContext(defaultCalendarWithTimeWheelContext);
 
 exports.CalendarWithTimeWheelContext = CalendarWithTimeWheelContext;
-exports['default'] = CalendarWithTimeWheelContext;
+exports["default"] = CalendarWithTimeWheelContext;
 exports.defaultCalendarWithTimeWheelContext = defaultCalendarWithTimeWheelContext;

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

@@ -18,7 +18,9 @@ const CalendarWithTimeWheelFooter = () => {
       hasError
     }
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  return pickerFooterMsg !== undefined && hasError ? /*#__PURE__*/_jsx__default['default'](Styleds.CalendarWithTimeWheelFooterMessage, {}, void 0, pickerFooterMsg) : null;
+  return pickerFooterMsg !== undefined && hasError ? /*#__PURE__*/_jsx__default["default"](Styleds.CalendarWithTimeWheelFooterMessage, {
+    role: "alert"
+  }, void 0, pickerFooterMsg) : null;
 };
 
 exports.CalendarWithTimeWheelFooter = CalendarWithTimeWheelFooter;

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

@@ -4,16 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
-var DSButton = require('@elliemae/ds-basic/Button');
-var DatePicker = require('@elliemae/ds-icons/DatePicker');
+var DSButton = require('@elliemae/ds-button');
+var dsIcons = require('@elliemae/ds-icons');
 var CalendarWithTimeWheelContext = require('./CalendarWithTimeWheelContext.js');
+var Styleds = require('./Styleds.js');
 var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
-var DatePicker__default = /*#__PURE__*/_interopDefaultLegacy(DatePicker);
 
 var _DatePicker;
 // this is particularly useful due to how usePopper needs to check the references
@@ -23,19 +22,21 @@ const CalendarWithTimeWheelIconTrigger = () => {
   const {
     handleSetTriggerRef,
     handleToggleCalendarWithTimeWheel,
-    handlePickerIconKeyDown
+    handlePickerIconKeyDown,
+    ariaCurrentValueForInputs,
+    disabled
   } = React.useContext(CalendarWithTimeWheelContext.CalendarWithTimeWheelContext);
-  return React.useMemo(() => /*#__PURE__*/_jsx__default['default'](DSButton__default['default'], {
-    "aria-label": "date time picker context menu trigger",
-    buttonType: "text",
-    leftIcon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default['default'](DatePicker__default['default'], {})),
-    size: "m",
+  return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](Styleds.StyledIconTriggerButton, {
+    "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,
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL
-  }), [handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendarWithTimeWheel]);
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL,
+    disabled: disabled
+  }, void 0, _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default["default"](dsIcons.DatePicker, {}))), [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendarWithTimeWheel]);
 };
 
 exports.CalendarWithTimeWheelIconTrigger = CalendarWithTimeWheelIconTrigger;

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

@@ -2,9 +2,15 @@
 
 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 ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
 var CalendarWithTimeWheelContent = require('./CalendarWithTimeWheelContent.js');
 var CalendarWithTimeWheelContext = require('./CalendarWithTimeWheelContext.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -18,7 +24,7 @@ var _CalendarWithTimeWhee, _CalendarWithTimeWhee2;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const CalendarWithTimeWheelWrapper = () => {
   const {
     setPopperElement,
@@ -29,7 +35,7 @@ const CalendarWithTimeWheelWrapper = () => {
     },
     isControllerOnly
   } = React.useContext(CalendarWithTimeWheelContext.CalendarWithTimeWheelContext);
-  if (isControllerOnly) return _CalendarWithTimeWhee || (_CalendarWithTimeWhee = /*#__PURE__*/_jsx__default['default'](CalendarWithTimeWheelContent.CalendarWithTimeWheelContent, {}));
+  if (isControllerOnly) return _CalendarWithTimeWhee || (_CalendarWithTimeWhee = /*#__PURE__*/_jsx__default["default"](CalendarWithTimeWheelContent.CalendarWithTimeWheelContent, {}));
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
     ref: setPopperElement,
     style: _objectSpread(_objectSpread({}, styles.popper), {}, {
@@ -37,7 +43,8 @@ const CalendarWithTimeWheelWrapper = () => {
       zIndex: 110
     })
   }, attributes.popper), {}, {
-    children: [_CalendarWithTimeWhee2 || (_CalendarWithTimeWhee2 = /*#__PURE__*/_jsx__default['default'](CalendarWithTimeWheelContent.CalendarWithTimeWheelContent, {})), /*#__PURE__*/jsxRuntime.jsx("div", {
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,
+    children: [_CalendarWithTimeWhee2 || (_CalendarWithTimeWhee2 = /*#__PURE__*/_jsx__default["default"](CalendarWithTimeWheelContent.CalendarWithTimeWheelContent, {})), /*#__PURE__*/jsxRuntime.jsx("div", {
       ref: setArrowElement,
       style: styles.arrow
     })]