@elliemae/ds-controlled-form 1.61.0 → 2.0.0-alpha.12

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

@@ -1,56 +1,58 @@
 import { useContext, useCallback, useMemo } from 'react';
 import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { homeEndKeys, homeEndAllArrowKeys } from '../../../utils/constants.js';
-import '../../../ControlledDateTimePickerTypes.js';
 
 /* eslint-disable @typescript-eslint/indent */
-var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
-  var handlePrevHour = _ref.handlePrevHour,
-      handleNextHour = _ref.handleNextHour,
-      handlePrevMinute = _ref.handlePrevMinute,
-      handleNextMinute = _ref.handleNextMinute,
-      handleTimeWheelBtnChangeMeridiem = _ref.handleTimeWheelBtnChangeMeridiem;
-
-  var _useContext = useContext(ControlledDateTimePickerContext),
-      withAnyInputs = _useContext.withAnyInputs,
-      isWithTimeInputs = _useContext.isWithTimeInputs,
-      isWithDateInputs = _useContext.isWithDateInputs,
-      isWithCalendarToo = _useContext.isWithCalendarToo,
-      isControllerOnly = _useContext.isControllerOnly,
-      hideDate = _useContext.hideDate,
-      hideTime = _useContext.hideTime,
-      monthInputRef = _useContext.monthInputRef,
-      hourInputRef = _useContext.hourInputRef,
-      meridiemInputRef = _useContext.meridiemInputRef,
-      yearInputRef = _useContext.yearInputRef,
-      prevMonthBtnRef = _useContext.prevMonthBtnRef,
-      prevHourBtnRef = _useContext.prevHourBtnRef,
-      currHourBtnRef = _useContext.currHourBtnRef,
-      nextHourBtnRef = _useContext.nextHourBtnRef,
-      prevMinutesBtnRef = _useContext.prevMinutesBtnRef,
-      currMinutesBtnRef = _useContext.currMinutesBtnRef,
-      nextMinutesBtnRef = _useContext.nextMinutesBtnRef,
-      prevMeridiemBtnRef = _useContext.prevMeridiemBtnRef,
-      currMeridiemBtnRef = _useContext.currMeridiemBtnRef,
-      nextMeridiemBtnRef = _useContext.nextMeridiemBtnRef;
-
-  var onHomeKeyDownInsideTimeWheel = useCallback(function () {
+const useKeyboardHandlers = _ref => {
+  let {
+    handlePrevHour,
+    handleNextHour,
+    handlePrevMinute,
+    handleNextMinute,
+    handleTimeWheelBtnChangeMeridiem
+  } = _ref;
+  const {
+    withAnyInputs,
+    isWithTimeInputs,
+    isWithDateInputs,
+    isWithCalendarToo,
+    isControllerOnly,
+    hideDate,
+    hideTime,
+    monthInputRef,
+    hourInputRef,
+    meridiemInputRef,
+    yearInputRef,
+    prevMonthBtnRef,
+    prevHourBtnRef,
+    currHourBtnRef,
+    nextHourBtnRef,
+    prevMinutesBtnRef,
+    currMinutesBtnRef,
+    nextMinutesBtnRef,
+    prevMeridiemBtnRef,
+    currMeridiemBtnRef,
+    nextMeridiemBtnRef
+  } = useContext(ControlledDateTimePickerContext);
+  const onHomeKeyDownInsideTimeWheel = useCallback(() => {
     var _prevMonthBtnRef$curr, _prevMonthBtnRef$curr2, _currHourBtnRef$curre, _currHourBtnRef$curre2;
 
     if (isWithCalendarToo) 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);else 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);
   }, [currHourBtnRef, isWithCalendarToo, prevMonthBtnRef]);
-  var onEndKeyDownInsideTimeWheel = useCallback(function () {
+  const onEndKeyDownInsideTimeWheel = useCallback(() => {
     var _currMeridiemBtnRef$c, _currMeridiemBtnRef$c2;
 
     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);
   }, [currMeridiemBtnRef]);
-  var onHomeKeyDownTriggerIcon = useCallback(function () {
+  const onHomeKeyDownTriggerIcon = 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);
   }, [hideDate, hideTime, monthInputRef, hourInputRef]);
-  var handlePickerIconKeyDown = useCallback(function (e) {
-    var key = e.key;
+  const handlePickerIconKeyDown = useCallback(e => {
+    const {
+      key
+    } = e;
     if (homeEndKeys.includes(key)) e.preventDefault();
     if (homeEndKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDownTriggerIcon();
@@ -61,12 +63,14 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
       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]);
-  var handleCurrHourOnKeyDown = useCallback(function (e) {
-    var key = e.key,
-        shiftKey = e.shiftKey;
+  const handleCurrHourOnKeyDown = useCallback(e => {
+    const {
+      key,
+      shiftKey
+    } = e;
     if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
     if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
-    var didTriggerHourChange = false;
+    let didTriggerHourChange = false;
 
     if (key === 'ArrowUp') {
       handlePrevHour(e);
@@ -87,7 +91,7 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel(); // ensure the focus is in the correct button after up/down arrow
 
-    if (didTriggerHourChange) setTimeout(function () {
+    if (didTriggerHourChange) setTimeout(() => {
       var _currHourBtnRef$curre3, _currHourBtnRef$curre4;
 
       return currHourBtnRef === null || currHourBtnRef === void 0 ? void 0 : (_currHourBtnRef$curre3 = currHourBtnRef.current) === null || _currHourBtnRef$curre3 === void 0 ? void 0 : (_currHourBtnRef$curre4 = _currHourBtnRef$curre3.focus) === null || _currHourBtnRef$curre4 === void 0 ? void 0 : _currHourBtnRef$curre4.call(_currHourBtnRef$curre3);
@@ -100,11 +104,13 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
       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);
     }
   }, [currHourBtnRef, currMeridiemBtnRef, currMinutesBtnRef, handleNextHour, handlePrevHour, isControllerOnly, isWithCalendarToo, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel]);
-  var handleCurrMinutesOnKeyDown = useCallback(function (e) {
-    var key = e.key;
+  const handleCurrMinutesOnKeyDown = useCallback(e => {
+    const {
+      key
+    } = e;
     if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
     if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
-    var didTriggerMinuteChange = false;
+    let didTriggerMinuteChange = false;
 
     if (key === 'ArrowUp') {
       handlePrevMinute(e);
@@ -131,18 +137,20 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel(); // ensure the focus is in the correct button after up/down arrow
 
-    if (didTriggerMinuteChange) setTimeout(function () {
+    if (didTriggerMinuteChange) setTimeout(() => {
       var _currMinutesBtnRef$cu3, _currMinutesBtnRef$cu4;
 
       return currMinutesBtnRef === null || currMinutesBtnRef === void 0 ? void 0 : (_currMinutesBtnRef$cu3 = currMinutesBtnRef.current) === null || _currMinutesBtnRef$cu3 === void 0 ? void 0 : (_currMinutesBtnRef$cu4 = _currMinutesBtnRef$cu3.focus) === null || _currMinutesBtnRef$cu4 === void 0 ? void 0 : _currMinutesBtnRef$cu4.call(_currMinutesBtnRef$cu3);
     });
   }, [onHomeKeyDownInsideTimeWheel, onEndKeyDownInsideTimeWheel, handlePrevMinute, handleNextMinute, currHourBtnRef, currMeridiemBtnRef, currMinutesBtnRef]);
-  var handleCurrMeridiemOnKeyDown = useCallback(function (e) {
-    var key = e.key,
-        shiftKey = e.shiftKey;
+  const handleCurrMeridiemOnKeyDown = useCallback(e => {
+    const {
+      key,
+      shiftKey
+    } = e;
     if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
     if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
-    var didTriggerMeridiemChange = false;
+    let didTriggerMeridiemChange = false;
 
     if (key === 'ArrowUp') {
       handleTimeWheelBtnChangeMeridiem('AM', e);
@@ -164,7 +172,7 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel(); // ensure the focus is in the correct button after up/down arrow
 
-    if (didTriggerMeridiemChange) setTimeout(function () {
+    if (didTriggerMeridiemChange) setTimeout(() => {
       var _currMeridiemBtnRef$c7, _currMeridiemBtnRef$c8;
 
       return currMeridiemBtnRef === null || currMeridiemBtnRef === void 0 ? void 0 : (_currMeridiemBtnRef$c7 = currMeridiemBtnRef.current) === null || _currMeridiemBtnRef$c7 === void 0 ? void 0 : (_currMeridiemBtnRef$c8 = _currMeridiemBtnRef$c7.focus) === null || _currMeridiemBtnRef$c8 === void 0 ? void 0 : _currMeridiemBtnRef$c8.call(_currMeridiemBtnRef$c7);
@@ -177,8 +185,10 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
       if (isWithCalendarToo) 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);else currHourBtnRef === null || currHourBtnRef === void 0 ? void 0 : (_currHourBtnRef$curre7 = currHourBtnRef.current) === null || _currHourBtnRef$curre7 === void 0 ? void 0 : (_currHourBtnRef$curre8 = _currHourBtnRef$curre7.focus) === null || _currHourBtnRef$curre8 === void 0 ? void 0 : _currHourBtnRef$curre8.call(_currHourBtnRef$curre7);
     }
   }, [currHourBtnRef, currMeridiemBtnRef, currMinutesBtnRef, handleTimeWheelBtnChangeMeridiem, isControllerOnly, isWithCalendarToo, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel, prevMonthBtnRef]);
-  var handlePrevHourBtnOnKeyDown = useCallback(function (e) {
-    var key = e.key;
+  const handlePrevHourBtnOnKeyDown = useCallback(e => {
+    const {
+      key
+    } = e;
     if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
     if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
 
@@ -197,8 +207,10 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel();
   }, [currHourBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel, prevMinutesBtnRef]);
-  var handlePrevMinuteBtnOnKeyDown = useCallback(function (e) {
-    var key = e.key;
+  const handlePrevMinuteBtnOnKeyDown = useCallback(e => {
+    const {
+      key
+    } = e;
     if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
     if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
 
@@ -224,8 +236,10 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel();
   }, [currMinutesBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel, prevHourBtnRef, prevMeridiemBtnRef]);
-  var handlePrevMeridiemBtnOnKeyDown = useCallback(function (e) {
-    var key = e.key;
+  const handlePrevMeridiemBtnOnKeyDown = useCallback(e => {
+    const {
+      key
+    } = e;
     if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
     if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
 
@@ -244,8 +258,10 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel();
   }, [currMeridiemBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel, prevMinutesBtnRef]);
-  var handleNextHourBtnOnKeyDown = useCallback(function (e) {
-    var key = e.key;
+  const handleNextHourBtnOnKeyDown = useCallback(e => {
+    const {
+      key
+    } = e;
     if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
     if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
 
@@ -264,8 +280,10 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel();
   }, [currHourBtnRef, nextMinutesBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel]);
-  var handleNextMinuteBtnOnKeyDown = useCallback(function (e) {
-    var key = e.key;
+  const handleNextMinuteBtnOnKeyDown = useCallback(e => {
+    const {
+      key
+    } = e;
     if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
     if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
 
@@ -290,8 +308,10 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel();
   }, [currMinutesBtnRef, nextHourBtnRef, nextMeridiemBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel]);
-  var handleNextMeridiemBtnOnKeyDown = useCallback(function (e) {
-    var key = e.key;
+  const handleNextMeridiemBtnOnKeyDown = useCallback(e => {
+    const {
+      key
+    } = e;
     if (homeEndAllArrowKeys.includes(key)) e.preventDefault();
     if (homeEndAllArrowKeys.includes(key)) e.stopPropagation();
 
@@ -310,21 +330,18 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel();
   }, [currMeridiemBtnRef, nextMinutesBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel]);
-  return useMemo(function () {
-    return {
-      handlePrevHourBtnOnKeyDown: handlePrevHourBtnOnKeyDown,
-      handleCurrHourOnKeyDown: handleCurrHourOnKeyDown,
-      handleNextHourBtnOnKeyDown: handleNextHourBtnOnKeyDown,
-      handlePrevMinuteBtnOnKeyDown: handlePrevMinuteBtnOnKeyDown,
-      handleCurrMinutesOnKeyDown: handleCurrMinutesOnKeyDown,
-      handleNextMinuteBtnOnKeyDown: handleNextMinuteBtnOnKeyDown,
-      handlePrevMeridiemBtnOnKeyDown: handlePrevMeridiemBtnOnKeyDown,
-      handleCurrMeridiemOnKeyDown: handleCurrMeridiemOnKeyDown,
-      handleNextMeridiemBtnOnKeyDown: handleNextMeridiemBtnOnKeyDown,
-      handlePickerIconKeyDown: handlePickerIconKeyDown
-    };
-  }, [handleCurrHourOnKeyDown, handleCurrMeridiemOnKeyDown, handleCurrMinutesOnKeyDown, handleNextHourBtnOnKeyDown, handleNextMeridiemBtnOnKeyDown, handleNextMinuteBtnOnKeyDown, handlePrevHourBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, handlePickerIconKeyDown]);
+  return useMemo(() => ({
+    handlePrevHourBtnOnKeyDown,
+    handleCurrHourOnKeyDown,
+    handleNextHourBtnOnKeyDown,
+    handlePrevMinuteBtnOnKeyDown,
+    handleCurrMinutesOnKeyDown,
+    handleNextMinuteBtnOnKeyDown,
+    handlePrevMeridiemBtnOnKeyDown,
+    handleCurrMeridiemOnKeyDown,
+    handleNextMeridiemBtnOnKeyDown,
+    handlePickerIconKeyDown
+  }), [handleCurrHourOnKeyDown, handleCurrMeridiemOnKeyDown, handleCurrMinutesOnKeyDown, handleNextHourBtnOnKeyDown, handleNextMeridiemBtnOnKeyDown, handleNextMinuteBtnOnKeyDown, handlePrevHourBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, handlePickerIconKeyDown]);
 };
 
 export { useKeyboardHandlers };
-//# sourceMappingURL=useKeyboardHandlers.js.map

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

@@ -1,40 +1,24 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+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';
-import '../../../ControlledDateTimePickerTypes.js';
 
-var usePopperTriggerLogic = function usePopperTriggerLogic() {
-  var _useContext = useContext(ControlledDateTimePickerContext),
-      pickerButtonRef = _useContext.pickerButtonRef,
-      _useContext$props = _useContext.props,
-      onPickerClose = _useContext$props.onPickerClose,
-      onPickerOpen = _useContext$props.onPickerOpen,
-      currHourBtnRef = _useContext.currHourBtnRef,
-      isWithCalendarToo = _useContext.isWithCalendarToo;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showTimePicker = _useState2[0],
-      setShowTimePicker = _useState2[1];
-
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      referenceElement = _useState4[0],
-      setReferenceElement = _useState4[1];
-
-  var _useState5 = useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      popperElement = _useState6[0],
-      setPopperElement = _useState6[1];
-
-  var _useState7 = useState(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      arrowElement = _useState8[0],
-      setArrowElement = _useState8[1];
-
-  var usePopperHelpers = usePopper(referenceElement, popperElement, {
+const usePopperTriggerLogic = () => {
+  const {
+    pickerButtonRef,
+    props: {
+      onPickerClose,
+      onPickerOpen
+    },
+    currHourBtnRef,
+    isWithCalendarToo
+  } = useContext(ControlledDateTimePickerContext);
+  const [showTimePicker, setShowTimePicker] = useState(false);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const usePopperHelpers = usePopper(referenceElement, popperElement, {
     modifiers: [{
       name: 'arrow',
       options: {
@@ -42,15 +26,15 @@ var usePopperTriggerLogic = function usePopperTriggerLogic() {
       }
     }]
   });
-  var closeTimePicker = useCallback(function () {
+  const closeTimePicker = useCallback(() => {
     setShowTimePicker(false);
     onPickerClose();
   }, [onPickerClose]);
-  var handleToggleTimePicker = useCallback(function () {
-    setShowTimePicker(function (oldShowCalendar) {
+  const handleToggleTimePicker = useCallback(() => {
+    setShowTimePicker(oldShowCalendar => {
       if (!oldShowCalendar) {
         onPickerOpen();
-        if (!isWithCalendarToo) setTimeout(function () {
+        if (!isWithCalendarToo) setTimeout(() => {
           var _currHourBtnRef$curre, _currHourBtnRef$curre2;
 
           return 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);
@@ -60,17 +44,19 @@ var usePopperTriggerLogic = function usePopperTriggerLogic() {
       return !oldShowCalendar;
     });
   }, [currHourBtnRef, isWithCalendarToo, onPickerClose, onPickerOpen]);
-  useOnClickOutside(popperElement, function (e) {
+  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))) closeTimePicker();
   });
-  var handleSetTriggerRef = useCallback(function (newRef) {
+  const handleSetTriggerRef = useCallback(newRef => {
     pickerButtonRef.current = newRef;
     setReferenceElement(newRef);
   }, [pickerButtonRef]);
-  var handleMenuWrapperKeyDown = useCallback(function (e) {
-    var key = e.key;
+  const handleMenuWrapperKeyDown = useCallback(e => {
+    const {
+      key
+    } = e;
 
     if (key === 'Escape') {
       var _pickerButtonRef$curr3, _pickerButtonRef$curr4;
@@ -79,19 +65,16 @@ var usePopperTriggerLogic = function usePopperTriggerLogic() {
       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);
     }
   }, [closeTimePicker, pickerButtonRef]);
-  return useMemo(function () {
-    return {
-      showTimePicker: showTimePicker,
-      setShowTimePicker: setShowTimePicker,
-      setPopperElement: setPopperElement,
-      setArrowElement: setArrowElement,
-      usePopperHelpers: usePopperHelpers,
-      handleToggleTimePicker: handleToggleTimePicker,
-      handleSetTriggerRef: handleSetTriggerRef,
-      handleMenuWrapperKeyDown: handleMenuWrapperKeyDown
-    };
-  }, [handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleTimePicker, showTimePicker, usePopperHelpers]);
+  return useMemo(() => ({
+    showTimePicker,
+    setShowTimePicker,
+    setPopperElement,
+    setArrowElement,
+    usePopperHelpers,
+    handleToggleTimePicker,
+    handleSetTriggerRef,
+    handleMenuWrapperKeyDown
+  }), [handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleTimePicker, showTimePicker, usePopperHelpers]);
 };
 
 export { usePopperTriggerLogic };
-//# sourceMappingURL=usePopperTriggerLogic.js.map

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

@@ -3,79 +3,100 @@ import { Grid } from '@elliemae/ds-grid';
 import { DSButtonV2 } from '@elliemae/ds-button';
 
 /* eslint-disable max-lines */
-var ResettedInput = /*#__PURE__*/styled.input.withConfig({
+const ResettedInput = /*#__PURE__*/styled.input.withConfig({
   componentId: "sc-1t4k08s-0"
 })(["border:none;box-shadow:none;background:none;text-align:center;height:100%;display:flex;align-items:center;:focus{outline:none;}padding-top:2px;"]);
-var StyledSeparator = /*#__PURE__*/styled(Grid).withConfig({
+const StyledSeparator = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1t4k08s-1"
 })(["padding-top:2px;margin:auto;"]);
-var StyledColonSeparator = /*#__PURE__*/styled(Grid).withConfig({
+const StyledColonSeparator = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1t4k08s-2"
 })(["padding-bottom:1px;margin:auto;"]);
-var Styled2DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
+const Styled2DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
   componentId: "sc-1t4k08s-3"
-})(["width:100%;height:100%;", ""], function (_ref) {
-  var disabled = _ref.disabled;
+})(["width:100%;height:100%;", ""], _ref => {
+  let {
+    disabled
+  } = _ref;
   return disabled ? "color: #616b7f;" : "";
 });
-var StyledMin4DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
+const StyledMin4DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
   componentId: "sc-1t4k08s-4"
-})(["width:100%;height:100%;", ""], function (_ref2) {
-  var disabled = _ref2.disabled;
+})(["width:100%;height:100%;", ""], _ref2 => {
+  let {
+    disabled
+  } = _ref2;
   return disabled ? "color: #616b7f;" : "";
 });
-var StyledInputsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
+const StyledInputsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1t4k08s-5"
-})(["width:max-content;align-items:center;", " border-color:", ";border-radius:2px;padding-left:", ";padding-right:", ";position:relative;", ""], function (_ref3) {
-  var isControllerOnly = _ref3.isControllerOnly;
+})(["width:max-content;align-items:center;", " border-color:", ";border-radius:2px;padding-left:", ";padding-right:", ";position:relative;", ""], _ref3 => {
+  let {
+    isControllerOnly
+  } = _ref3;
   return isControllerOnly ? "" : "\n  height: 28px;    \n  border-width: 1px;\n  border-style: solid;\n  ";
-}, function (_ref4) {
-  var theme = _ref4.theme,
-      hasError = _ref4.hasError,
-      disabled = _ref4.disabled;
+}, _ref4 => {
+  let {
+    theme,
+    hasError,
+    disabled
+  } = _ref4;
   if (hasError) return theme.colors.danger[900];
   if (disabled) return theme.colors.neutral[400];
   return theme.colors.neutral[200];
-}, function (_ref5) {
-  var justPicker = _ref5.justPicker;
+}, _ref5 => {
+  let {
+    justPicker
+  } = _ref5;
   return justPicker ? '0' : '2px';
-}, function (_ref6) {
-  var withAnyPicker = _ref6.withAnyPicker;
+}, _ref6 => {
+  let {
+    withAnyPicker
+  } = _ref6;
   return withAnyPicker ? '' : '0';
-}, function (_ref7) {
-  var theme = _ref7.theme,
-      disabled = _ref7.disabled;
+}, _ref7 => {
+  let {
+    theme,
+    disabled
+  } = _ref7;
   return disabled ? "background-color: ".concat(theme.colors.neutral[100], ";") : "";
 });
-var StyledDateInputsWrapperGrid = /*#__PURE__*/styled.div.withConfig({
+const StyledDateInputsWrapperGrid = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1t4k08s-6"
 })(["display:grid;grid-template-columns:24px min-content 24px min-content 48px;grid-template-rows:min-content;padding:6px 0;gap:0px 0px;align-items:center;input,p{margin:0;}"]);
-var StyledTimeInputsWrapperGrid = /*#__PURE__*/styled.div.withConfig({
+const StyledTimeInputsWrapperGrid = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1t4k08s-7"
 })(["display:grid;grid-template-columns:24px min-content 24px min-content 24px min-content 24px;grid-template-rows:min-content;padding:6px 0;gap:0px 0px;align-items:center;input,p{margin:0;}"]);
-var StyledPickersIconsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
+const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1t4k08s-8"
-})(["position:relative;", ":before{content:'';position:absolute;top:0px;left:-1px;width:100%;height:100%;border-radius:2px;z-index:-1;", "}"], function (_ref8) {
-  var isControllerOnly = _ref8.isControllerOnly;
+})(["position:relative;", ":before{content:'';position:absolute;top:0px;left:-1px;width:100%;height:100%;border-radius:2px;z-index:-1;", "}"], _ref8 => {
+  let {
+    isControllerOnly
+  } = _ref8;
   return isControllerOnly ? "" : "height: 26px;";
-}, function (_ref9) {
-  var theme = _ref9.theme,
-      isControllerOnly = _ref9.isControllerOnly,
-      hasError = _ref9.hasError;
+}, _ref9 => {
+  let {
+    theme,
+    isControllerOnly,
+    hasError
+  } = _ref9;
   return isControllerOnly ? "" : "\n    border-left: 1px solid ".concat(hasError ? theme.colors.danger[900] : theme.colors.neutral[200], "\n    ");
 });
-var StyledFocusWithIn = /*#__PURE__*/styled(Grid).withConfig({
+const StyledFocusWithIn = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1t4k08s-9"
-})(["position:relative;&:focus-within{&:after{display:block;content:' ';position:absolute;top:-5px;left:-2px;width:calc(100% + 4px);height:calc(100% + 10px);border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], function (_ref10) {
-  var theme = _ref10.theme;
+})(["position:relative;&:focus-within{&:after{display:block;content:' ';position:absolute;top:-5px;left:-2px;width:calc(100% + 4px);height:calc(100% + 10px);border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
   return theme.colors.brand[700];
 });
-var StyledClearButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
+const StyledClearButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-1t4k08s-10"
-})(["height:26px;position:relative;visibility:", ";"], function (_ref11) {
-  var shouldDisplay = _ref11.shouldDisplay;
+})(["height:26px;position:relative;visibility:", ";"], _ref11 => {
+  let {
+    shouldDisplay
+  } = _ref11;
   return shouldDisplay ? 'visible' : 'hidden';
 });
 
 export { Styled2DigitsInput, StyledClearButton, StyledColonSeparator, StyledDateInputsWrapperGrid, StyledFocusWithIn, StyledInputsWrapperGrid, StyledMin4DigitsInput, StyledPickersIconsWrapperGrid, StyledSeparator, StyledTimeInputsWrapperGrid };
-//# sourceMappingURL=Styleds.js.map

package/esm/controlled-date-time-picker/parts/TimeInputs/HHInput.js

@@ -1,30 +1,30 @@
 import React, { useCallback } from 'react';
 import { Styled2DigitsInput } from '../Styleds.js';
 import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
-import 'styled-components';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-button';
+import { jsx } from 'react/jsx-runtime';
 
-var regExpNumbers = /^[0-9]+$/;
+const regExpNumbers = /^[0-9]+$/;
 
-var isInvalidHour = function isInvalidHour(hours) {
+const isInvalidHour = hours => {
   if (hours === '') return false;
-  var numberOnly = regExpNumbers.test(hours);
+  const numberOnly = regExpNumbers.test(hours);
   return hours.length > 2 || hours === '00' || !numberOnly || Number.parseInt(hours, 10) > 12;
 };
 
-var HHInput = /*#__PURE__*/React.memo(function (_ref) {
-  var onChange = _ref.onChange,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      onKeyDown = _ref.onKeyDown,
-      value = _ref.value,
-      disabled = _ref.disabled,
-      placeholder = _ref.placeholder,
-      ariaCurrentValueForInputs = _ref.ariaCurrentValueForInputs,
-      contextRef = _ref.contextRef,
-      autoFocusHourInput = _ref.autoFocusHourInput;
-  var validateOnChange = useCallback(function (e) {
+const HHInput = /*#__PURE__*/React.memo(_ref => {
+  let {
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    disabled,
+    placeholder,
+    ariaCurrentValueForInputs,
+    contextRef,
+    autoFocusHourInput
+  } = _ref;
+  const validateOnChange = useCallback(e => {
     var _e$target;
 
     if (isInvalidHour(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
@@ -34,7 +34,7 @@ var HHInput = /*#__PURE__*/React.memo(function (_ref) {
 
     onChange(e);
   }, [onChange]);
-  return /*#__PURE__*/React.createElement(Styled2DigitsInput, {
+  return /*#__PURE__*/jsx(Styled2DigitsInput, {
     autoFocus: autoFocusHourInput,
     onChange: validateOnChange,
     onBlur: onBlur,
@@ -51,4 +51,3 @@ var HHInput = /*#__PURE__*/React.memo(function (_ref) {
 });
 
 export { HHInput };
-//# sourceMappingURL=HHInput.js.map