@elliemae/ds-controlled-form 1.57.1-rc.0 → 2.0.0-alpha.11

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

@@ -2,74 +2,48 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
-var controlledDateTimePicker_ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
-var controlledDateTimePicker_utils_dateHelpers = require('../../../utils/dateHelpers.js');
-var controlledDateTimePicker_utils_hooks_useGetStartingFocusedDay = require('../../../utils/hooks/useGetStartingFocusedDay.js');
-require('../../../ControlledDateTimePickerTypes.js');
-require('@babel/runtime/helpers/toConsumableArray');
-require('../../../utils/constants.js');
-require('../../../utils/stringHelpers.js');
-require('../../../utils/numberHelpers.js');
-require('../../../utils/hooks/useGetDayFromDateString.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var dateHelpers = require('../../../utils/dateHelpers.js');
+var useGetStartingFocusedDay = require('../../../utils/hooks/useGetStartingFocusedDay.js');
 
 // eslint-disable-next-line max-params
-var loopWhileWaiting = function loopWhileWaiting(cb) {
-  var shortcircuit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
-    return false;
-  };
-  var timePerTry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
-  var maxTries = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 5;
-  var ab = maxTries;
-  var inter = setInterval(function () {
+const loopWhileWaiting = (cb, shortcircuit = () => false, timePerTry = 100, maxTries = 5) => {
+  let ab = maxTries;
+  const inter = setInterval(() => {
     cb();
     if (shortcircuit() || ab === 0) clearInterval(inter);
     ab -= 1;
   }, timePerTry);
 };
 
-var useFocusLogic = function useFocusLogic(_ref) {
-  var daysArray = _ref.daysArray,
-      showCalendar = _ref.showCalendar;
-
-  var _useContext = React.useContext(controlledDateTimePicker_ControlledDateTimePickerCTX.ControlledDateTimePickerContext),
-      calendarDaysWrapperRef = _useContext.calendarDaysWrapperRef;
-
-  var _useGetStartingFocuse = controlledDateTimePicker_utils_hooks_useGetStartingFocusedDay.useGetStartingFocusedDay(),
-      startFocusedDate = _useGetStartingFocuse.startFocusedDate;
-
-  var _useState = React.useState(daysArray.find(function (_ref2) {
-    var currDay = _ref2.day;
-    return controlledDateTimePicker_utils_dateHelpers.compareTwoDatesDayEquality(currDay, startFocusedDate);
-  })),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      metadayToFocus = _useState2[0],
-      setMetadayToFocus = _useState2[1]; // this is required because we have to focus based on the inputs values too,
+const useFocusLogic = ({
+  daysArray,
+  calendarDaysWrapperRef,
+  showCalendar
+}) => {
+  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,
   // 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
 
-
-  var focusedDay = React.useMemo(function () {
-    var newFocusedDay = metadayToFocus ? daysArray.find(function (_ref3) {
-      var currDay = _ref3.day;
-      return controlledDateTimePicker_utils_dateHelpers.compareTwoDatesDayEquality(currDay, metadayToFocus.day);
-    }) : daysArray.find(function (_ref4) {
-      var currDay = _ref4.day;
-      return controlledDateTimePicker_utils_dateHelpers.compareTwoDatesDayEquality(currDay, startFocusedDate);
-    });
+  const focusedDay = React.useMemo(() => {
+    const newFocusedDay = metadayToFocus ? daysArray.find(({
+      day: currDay
+    }) => dateHelpers.compareTwoDatesDayEquality(currDay, metadayToFocus.day)) : daysArray.find(({
+      day: currDay
+    }) => dateHelpers.compareTwoDatesDayEquality(currDay, startFocusedDate));
     return newFocusedDay;
   }, [daysArray, startFocusedDate, metadayToFocus]);
-  var tryToFocusCurrentlyDataIsFocusedDay = React.useCallback(function () {
-    var wrapperDOM = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (calendarDaysWrapperRef === null || calendarDaysWrapperRef === void 0 ? void 0 : calendarDaysWrapperRef.current) || document;
-    var shortcircuit = false;
-    loopWhileWaiting(function () {
-      var domElem = wrapperDOM === null || wrapperDOM === void 0 ? void 0 : wrapperDOM.querySelector('[data-isfocused="true"]');
+  const tryToFocusCurrentlyDataIsFocusedDay = React.useCallback((wrapperDOM = (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"]');
 
       if (domElem) {
         var _domElem$focus;
@@ -77,42 +51,35 @@ var useFocusLogic = function useFocusLogic(_ref) {
         domElem === null || domElem === void 0 ? void 0 : (_domElem$focus = domElem.focus) === null || _domElem$focus === void 0 ? void 0 : _domElem$focus.call(domElem);
         shortcircuit = true;
       }
-    }, function () {
-      return shortcircuit;
-    });
+    }, () => shortcircuit);
   }, [calendarDaysWrapperRef]);
-  React.useLayoutEffect(function () {
+  React.useLayoutEffect(() => {
     if (showCalendar) tryToFocusCurrentlyDataIsFocusedDay(calendarDaysWrapperRef === null || calendarDaysWrapperRef === void 0 ? void 0 : calendarDaysWrapperRef.current);
   }, [calendarDaysWrapperRef, focusedDay, showCalendar, tryToFocusCurrentlyDataIsFocusedDay]);
-  var handleFocusMetaDay = React.useCallback(function (metaDayToFocus) {
+  const handleFocusMetaDay = React.useCallback(metaDayToFocus => {
     // if focusedDay is inside current daysArray we set Focused day
-    var newFocusedMetaDay = daysArray.find(function (_ref5) {
-      var currDay = _ref5.day;
-      return controlledDateTimePicker_utils_dateHelpers.compareTwoDatesDayEquality(currDay, metaDayToFocus.day);
-    });
+    const newFocusedMetaDay = daysArray.find(({
+      day: currDay
+    }) => dateHelpers.compareTwoDatesDayEquality(currDay, metaDayToFocus.day));
     if (focusedDay !== newFocusedMetaDay) setMetadayToFocus(newFocusedMetaDay);
   }, [daysArray, focusedDay]);
-  var handleFocusMetaDayByDay = React.useCallback(function (dayDate) {
+  const handleFocusMetaDayByDay = React.useCallback(dayDate => {
     // if focusedDay is inside current daysArray we set Focused day
-    var newFocusedMetaDay = daysArray.find(function (_ref6) {
-      var currDay = _ref6.day;
-      return controlledDateTimePicker_utils_dateHelpers.compareTwoDatesDayEquality(currDay, dayDate);
-    });
+    const newFocusedMetaDay = daysArray.find(({
+      day: currDay
+    }) => dateHelpers.compareTwoDatesDayEquality(currDay, dayDate));
     if (focusedDay !== newFocusedMetaDay) setMetadayToFocus(newFocusedMetaDay);
   }, [daysArray, focusedDay]);
-  var resetFocusedDayToStartDate = React.useCallback(function () {
+  const resetFocusedDayToStartDate = React.useCallback(() => {
     setMetadayToFocus(null);
   }, []);
-  return React.useMemo(function () {
-    return {
-      focusedDay: focusedDay,
-      tryToFocusCurrentlyDataIsFocusedDay: tryToFocusCurrentlyDataIsFocusedDay,
-      resetFocusedDayToStartDate: resetFocusedDayToStartDate,
-      handleFocusMetaDay: handleFocusMetaDay,
-      handleFocusMetaDayByDay: handleFocusMetaDayByDay
-    };
-  }, [focusedDay, tryToFocusCurrentlyDataIsFocusedDay, resetFocusedDayToStartDate, handleFocusMetaDay, handleFocusMetaDayByDay]);
+  return React.useMemo(() => ({
+    focusedDay,
+    tryToFocusCurrentlyDataIsFocusedDay,
+    resetFocusedDayToStartDate,
+    handleFocusMetaDay,
+    handleFocusMetaDayByDay
+  }), [focusedDay, tryToFocusCurrentlyDataIsFocusedDay, resetFocusedDayToStartDate, handleFocusMetaDay, handleFocusMetaDayByDay]);
 };
 
 exports.useFocusLogic = useFocusLogic;
-//# sourceMappingURL=useFocusLogic.js.map

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

@@ -3,102 +3,92 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var controlledDateTimePicker_ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
-var controlledDateTimePicker_utils_dateHelpers = require('../../../utils/dateHelpers.js');
-var controlledDateTimePicker_utils_constants = require('../../../utils/constants.js');
-require('../../../ControlledDateTimePickerTypes.js');
-require('@babel/runtime/helpers/toConsumableArray');
-require('../../../utils/stringHelpers.js');
-require('@babel/runtime/helpers/slicedToArray');
-require('../../../utils/numberHelpers.js');
+var dateHelpers = require('../../../utils/dateHelpers.js');
 
 /* eslint-disable complexity */
-var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
-  var focusedDay = _ref.focusedDay,
-      daysArray = _ref.daysArray,
-      handlePrevMonth = _ref.handlePrevMonth,
-      handleNextMonth = _ref.handleNextMonth,
-      handleFocusMetaDay = _ref.handleFocusMetaDay,
-      handleFocusMetaDayByDay = _ref.handleFocusMetaDayByDay,
-      tryToFocusCurrentlyDataIsFocusedDay = _ref.tryToFocusCurrentlyDataIsFocusedDay;
-
-  var _useContext = React.useContext(controlledDateTimePicker_ControlledDateTimePickerCTX.ControlledDateTimePickerContext),
-      hideDate = _useContext.hideDate,
-      hideTime = _useContext.hideTime,
-      monthInputRef = _useContext.monthInputRef,
-      hourInputRef = _useContext.hourInputRef,
-      prevYearBtnRef = _useContext.prevYearBtnRef,
-      prevMonthBtnRef = _useContext.prevMonthBtnRef,
-      nextMonthBtnRef = _useContext.nextMonthBtnRef,
-      nextYearBtnRef = _useContext.nextYearBtnRef,
-      currMeridiemBtnRef = _useContext.currMeridiemBtnRef,
-      isControllerOnly = _useContext.isControllerOnly,
-      isWithTimeWheelToo = _useContext.isWithTimeWheelToo,
-      setLatestInteractionRegion = _useContext.setLatestInteractionRegion,
-      withAnyInputs = _useContext.withAnyInputs,
-      isWithTimeInputs = _useContext.isWithTimeInputs,
-      meridiemInputRef = _useContext.meridiemInputRef,
-      isWithDateInputs = _useContext.isWithDateInputs,
-      yearInputRef = _useContext.yearInputRef;
-
-  var tryToFocusDayRegion = React.useCallback(function () {
+const useKeyboardHandlers = ({
+  focusedDay,
+  daysArray,
+  handlePrevMonth,
+  handleNextMonth,
+  prevYearBtnRef,
+  prevMonthBtnRef,
+  nextMonthBtnRef,
+  nextYearBtnRef,
+  currMeridiemBtnRef,
+  currHourBtnRef,
+  isWithTimeWheelToo,
+  isControllerOnly,
+  handleFocusMetaDay,
+  handleFocusMetaDayByDay,
+  tryToFocusCurrentlyDataIsFocusedDay,
+  hideDate,
+  hideTime,
+  monthInputRef,
+  hourInputRef,
+  setLatestInteractionRegion
+}) => {
+  const tryToFocusDayRegion = React.useCallback(() => {
     setLatestInteractionRegion('calendar-days');
 
     if (!focusedDay) {
-      var newFocusDay = daysArray.find(function (_ref2) {
-        var isCurrMonthDay = _ref2.isCurrMonthDay;
-        return isCurrMonthDay;
-      });
-      if (newFocusDay) setTimeout(function () {
+      const newFocusDay = daysArray.find(({
+        isCurrMonthDay
+      }) => isCurrMonthDay);
+      if (newFocusDay) setTimeout(() => {
         handleFocusMetaDay(newFocusDay);
       });
     } else {
       tryToFocusCurrentlyDataIsFocusedDay();
     }
   }, [daysArray, focusedDay, handleFocusMetaDay, setLatestInteractionRegion, tryToFocusCurrentlyDataIsFocusedDay]);
-  var onHomeKeyDownInsideCalendar = React.useCallback(function () {
+  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]);
-  var onEndKeyDownInsideCalendar = React.useCallback(function () {
+  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]);
-  var onHomeKeyDownTriggerIcon = React.useCallback(function () {
+  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);
   }, [hideDate, hideTime, monthInputRef, hourInputRef]);
-  var handlePickerIconKeyDown = React.useCallback(function (e) {
-    var key = e.key;
-    if (controlledDateTimePicker_utils_constants.homeEndKeys.includes(key)) e.preventDefault();
-    if (controlledDateTimePicker_utils_constants.homeEndKeys.includes(key)) e.stopPropagation();
+  const handlePickerIconKeyDown = React.useCallback(e => {
+    const {
+      key
+    } = e;
+    const preventDefaultKeys = ['Home', 'End'];
+    const stopPropagationKeys = ['Home', 'End'];
+    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (stopPropagationKeys.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]);
-  var handleDayOnKeyDown = React.useCallback(function (e, metaDay) {
-    var newFocusedDayDate;
-    var day = metaDay.day;
-    var key = e.key,
-        shiftKey = e.shiftKey;
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
-    if (controlledDateTimePicker_utils_constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
-    if (key === 'ArrowUp') newFocusedDayDate = controlledDateTimePicker_utils_dateHelpers.sumValuesToDate(day, {
+  }, [onHomeKeyDownTriggerIcon]);
+  const handleDayOnKeyDown = React.useCallback((e, metaDay) => {
+    let newFocusedDayDate;
+    const {
+      day
+    } = metaDay;
+    const {
+      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 (key === 'ArrowUp') newFocusedDayDate = dateHelpers.sumValuesToDate(day, {
       daysToSum: -7
     });
-    if (key === 'ArrowDown') newFocusedDayDate = controlledDateTimePicker_utils_dateHelpers.sumValuesToDate(day, {
+    if (key === 'ArrowDown') newFocusedDayDate = dateHelpers.sumValuesToDate(day, {
       daysToSum: 7
     });
 
     if (key === 'ArrowLeft') {
-      newFocusedDayDate = controlledDateTimePicker_utils_dateHelpers.sumValuesToDate(day, {
+      newFocusedDayDate = dateHelpers.sumValuesToDate(day, {
         daysToSum: -1
       });
 
@@ -108,7 +98,7 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
     }
 
     if (key === 'ArrowRight') {
-      newFocusedDayDate = controlledDateTimePicker_utils_dateHelpers.sumValuesToDate(day, {
+      newFocusedDayDate = dateHelpers.sumValuesToDate(day, {
         daysToSum: 1
       });
 
@@ -125,18 +115,35 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
     if (key === 'Home') onHomeKeyDownInsideCalendar();
     if (key === 'End') onEndKeyDownInsideCalendar(); // TAB CYCLE IMPLEMENTATION
 
-    if (key === 'Tab' && !shiftKey && isControllerOnly === false && !isWithTimeWheelToo) {
-      var _prevMonthBtnRef$curr3, _prevMonthBtnRef$curr4;
+    if (!isControllerOnly) if (key === 'Tab') {
+      e.preventDefault(); // we only prevent default if it's not controller only
 
-      // 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);
+      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);
+      }
     }
-  }, [daysArray, handleFocusMetaDayByDay, handleNextMonth, handlePrevMonth, isControllerOnly, isWithTimeWheelToo, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, prevMonthBtnRef, tryToFocusCurrentlyDataIsFocusedDay]);
-  var handlePrevYearKeyDown = React.useCallback(function (e) {
-    var key = e.key,
-        shiftKey = e.shiftKey;
+  }, [currHourBtnRef, daysArray, handleFocusMetaDayByDay, handleNextMonth, handlePrevMonth, isControllerOnly, isWithTimeWheelToo, nextYearBtnRef, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, prevMonthBtnRef, tryToFocusCurrentlyDataIsFocusedDay]);
+  const handlePrevYearKeyDown = React.useCallback(e => {
+    const {
+      key,
+      shiftKey
+    } = e;
 
     if (key === 'Tab') {
       e.preventDefault();
@@ -158,9 +165,11 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
       e.preventDefault();
     }
   }, [nextMonthBtnRef, nextYearBtnRef, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar]);
-  var handlePrevMonthKeyDown = React.useCallback(function (e) {
-    var key = e.key,
-        shiftKey = e.shiftKey;
+  const handlePrevMonthKeyDown = React.useCallback(e => {
+    const {
+      key,
+      shiftKey
+    } = e;
 
     if (key === 'Tab') {
       if (shiftKey) {
@@ -187,9 +196,11 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
       e.preventDefault();
     }
   }, [currMeridiemBtnRef, isControllerOnly, isWithTimeWheelToo, nextMonthBtnRef, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, tryToFocusDayRegion]);
-  var handleNextMonthKeyDown = React.useCallback(function (e) {
-    var key = e.key,
-        shiftKey = e.shiftKey;
+  const handleNextMonthKeyDown = React.useCallback(e => {
+    const {
+      key,
+      shiftKey
+    } = e;
 
     if (key === 'Tab') {
       e.preventDefault();
@@ -211,9 +222,11 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
       e.preventDefault();
     }
   }, [onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, prevMonthBtnRef, prevYearBtnRef]);
-  var handleNextYearKeyDown = React.useCallback(function (e) {
-    var key = e.key,
-        shiftKey = e.shiftKey;
+  const handleNextYearKeyDown = React.useCallback(e => {
+    const {
+      key,
+      shiftKey
+    } = e;
 
     if (key === 'Tab') {
       e.preventDefault();
@@ -237,17 +250,14 @@ var useKeyboardHandlers = function useKeyboardHandlers(_ref) {
       e.preventDefault();
     }
   }, [tryToFocusDayRegion, prevYearBtnRef, onHomeKeyDownInsideCalendar, onEndKeyDownInsideCalendar]);
-  return React.useMemo(function () {
-    return {
-      handleDayOnKeyDown: handleDayOnKeyDown,
-      handlePrevYearKeyDown: handlePrevYearKeyDown,
-      handlePrevMonthKeyDown: handlePrevMonthKeyDown,
-      handleNextMonthKeyDown: handleNextMonthKeyDown,
-      handleNextYearKeyDown: handleNextYearKeyDown,
-      handlePickerIconKeyDown: handlePickerIconKeyDown
-    };
-  }, [handleDayOnKeyDown, handlePrevYearKeyDown, handlePrevMonthKeyDown, handleNextMonthKeyDown, handleNextYearKeyDown, handlePickerIconKeyDown]);
+  return React.useMemo(() => ({
+    handleDayOnKeyDown,
+    handlePrevYearKeyDown,
+    handlePrevMonthKeyDown,
+    handleNextMonthKeyDown,
+    handleNextYearKeyDown,
+    handlePickerIconKeyDown
+  }), [handleDayOnKeyDown, handlePrevYearKeyDown, handlePrevMonthKeyDown, handleNextMonthKeyDown, handleNextYearKeyDown, handlePickerIconKeyDown]);
 };
 
 exports.useKeyboardHandlers = useKeyboardHandlers;
-//# sourceMappingURL=useKeyboardHandlers.js.map

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

@@ -2,73 +2,46 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactPopper = require('react-popper');
-var controlledDateTimePicker_ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
-var controlledDateTimePicker_utils_hooks_useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');
-require('../../../ControlledDateTimePickerTypes.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-
-var usePopperTriggerLogic = function usePopperTriggerLogic(_ref) {
-  var focusedDay = _ref.focusedDay,
-      resetFocusedDayToStartDate = _ref.resetFocusedDayToStartDate,
-      showCalendar = _ref.showCalendar,
-      setShowCalendar = _ref.setShowCalendar,
-      tryToFocusCurrentlyDataIsFocusedDay = _ref.tryToFocusCurrentlyDataIsFocusedDay;
-
-  var _useContext = React.useContext(controlledDateTimePicker_ControlledDateTimePickerCTX.ControlledDateTimePickerContext),
-      _useContext$props = _useContext.props,
-      onPickerOpen = _useContext$props.onPickerOpen,
-      onPickerClose = _useContext$props.onPickerClose,
-      prevMonthBtnRef = _useContext.prevMonthBtnRef,
-      pickerButtonRef = _useContext.pickerButtonRef;
-
-  var _useState = React.useState(null),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      referenceElement = _useState2[0],
-      setReferenceElement = _useState2[1];
-
-  var _useState3 = React.useState(null),
-      _useState4 = _slicedToArray__default['default'](_useState3, 2),
-      popperElement = _useState4[0],
-      setPopperElement = _useState4[1];
-
-  var _useState5 = React.useState(null),
-      _useState6 = _slicedToArray__default['default'](_useState5, 2),
-      arrowElement = _useState6[0],
-      setArrowElement = _useState6[1];
-
-  var usePopperHelpers = reactPopper.usePopper(referenceElement, popperElement, {
+var useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');
+
+const usePopperTriggerLogic = ({
+  focusedDay,
+  resetFocusedDayToStartDate,
+  prevMonthBtnRef,
+  pickerButtonRef,
+  onPickerOpen,
+  onPickerClose,
+  showCalendar,
+  setShowCalendar
+}) => {
+  const [referenceElement, setReferenceElement] = React.useState(null);
+  const [popperElement, setPopperElement] = React.useState(null);
+  const [arrowElement, setArrowElement] = React.useState(null);
+  const usePopperHelpers = reactPopper.usePopper(referenceElement, popperElement, {
     modifiers: [{
       name: 'arrow',
       options: {
         element: arrowElement
       }
     }]
-  }); // onOpen we try to focus the day we should focus, if we should focus one
-
-  var handleOnPickerOpen = React.useCallback(function () {
-    onPickerOpen();
-    tryToFocusCurrentlyDataIsFocusedDay();
-  }, [onPickerOpen, tryToFocusCurrentlyDataIsFocusedDay]);
-  var openCalendar = React.useCallback(function () {
-    if (focusedDay) setTimeout(function () {
+  });
+  const openCalendar = React.useCallback(() => {
+    if (focusedDay) setTimeout(() => {
       var _focusedDay$dayBtnRef, _focusedDay$dayBtnRef2, _focusedDay$dayBtnRef3;
 
       return focusedDay === null || focusedDay === void 0 ? void 0 : (_focusedDay$dayBtnRef = focusedDay.dayBtnRef) === null || _focusedDay$dayBtnRef === void 0 ? void 0 : (_focusedDay$dayBtnRef2 = _focusedDay$dayBtnRef.current) === null || _focusedDay$dayBtnRef2 === void 0 ? void 0 : (_focusedDay$dayBtnRef3 = _focusedDay$dayBtnRef2.focus) === null || _focusedDay$dayBtnRef3 === void 0 ? void 0 : _focusedDay$dayBtnRef3.call(_focusedDay$dayBtnRef2);
-    }, 100);else setTimeout(function () {
+    }, 100);else setTimeout(() => {
       var _prevMonthBtnRef$curr, _prevMonthBtnRef$curr2;
 
       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);
-    handleOnPickerOpen();
-  }, [focusedDay, handleOnPickerOpen, prevMonthBtnRef, setShowCalendar]);
-  var closeCalendar = React.useCallback(function () {
+    onPickerOpen();
+  }, [focusedDay, onPickerOpen, prevMonthBtnRef, setShowCalendar]);
+  const closeCalendar = React.useCallback(() => {
     var _pickerButtonRef$curr, _pickerButtonRef$curr2;
 
     setShowCalendar(false);
@@ -76,16 +49,18 @@ var usePopperTriggerLogic = function usePopperTriggerLogic(_ref) {
     resetFocusedDayToStartDate();
     pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr = pickerButtonRef.current) === null || _pickerButtonRef$curr === void 0 ? void 0 : (_pickerButtonRef$curr2 = _pickerButtonRef$curr.focus) === null || _pickerButtonRef$curr2 === void 0 ? void 0 : _pickerButtonRef$curr2.call(_pickerButtonRef$curr);
   }, [setShowCalendar, onPickerClose, resetFocusedDayToStartDate, pickerButtonRef]);
-  var handleToggleCalendar = React.useCallback(function () {
-    var isOpening = !showCalendar;
+  const handleToggleCalendar = React.useCallback(() => {
+    const isOpening = !showCalendar;
     if (isOpening) openCalendar();else closeCalendar();
   }, [closeCalendar, openCalendar, showCalendar]);
-  var handleSetTriggerRef = React.useCallback(function (newRef) {
+  const handleSetTriggerRef = React.useCallback(newRef => {
     pickerButtonRef.current = newRef;
     setReferenceElement(newRef);
   }, [pickerButtonRef]);
-  var handleMenuWrapperKeyDown = React.useCallback(function (e) {
-    var key = e.key;
+  const handleMenuWrapperKeyDown = React.useCallback(e => {
+    const {
+      key
+    } = e;
 
     if (key === 'Escape') {
       var _pickerButtonRef$curr3, _pickerButtonRef$curr4;
@@ -94,23 +69,20 @@ var usePopperTriggerLogic = function usePopperTriggerLogic(_ref) {
       pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr3 = pickerButtonRef.current) === null || _pickerButtonRef$curr3 === void 0 ? void 0 : (_pickerButtonRef$curr4 = _pickerButtonRef$curr3.focus) === null || _pickerButtonRef$curr4 === void 0 ? void 0 : _pickerButtonRef$curr4.call(_pickerButtonRef$curr3);
     }
   }, [closeCalendar, pickerButtonRef]);
-  controlledDateTimePicker_utils_hooks_useOnClickOutside.useOnClickOutside(popperElement, function (e) {
+  useOnClickOutside.useOnClickOutside(popperElement, e => {
     var _pickerButtonRef$curr5, _pickerButtonRef$curr6;
 
     if (!(pickerButtonRef !== null && pickerButtonRef !== void 0 && (_pickerButtonRef$curr5 = pickerButtonRef.current) !== null && _pickerButtonRef$curr5 !== void 0 && (_pickerButtonRef$curr6 = _pickerButtonRef$curr5.contains) !== null && _pickerButtonRef$curr6 !== void 0 && _pickerButtonRef$curr6.call(_pickerButtonRef$curr5, e === null || e === void 0 ? void 0 : e.target))) closeCalendar();
   });
-  return React.useMemo(function () {
-    return {
-      closeCalendar: closeCalendar,
-      handleSetTriggerRef: handleSetTriggerRef,
-      setPopperElement: setPopperElement,
-      setArrowElement: setArrowElement,
-      usePopperHelpers: usePopperHelpers,
-      handleToggleCalendar: handleToggleCalendar,
-      handleMenuWrapperKeyDown: handleMenuWrapperKeyDown
-    };
-  }, [closeCalendar, handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleCalendar, usePopperHelpers]);
+  return React.useMemo(() => ({
+    closeCalendar,
+    handleSetTriggerRef,
+    setPopperElement,
+    setArrowElement,
+    usePopperHelpers,
+    handleToggleCalendar,
+    handleMenuWrapperKeyDown
+  }), [closeCalendar, handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleCalendar, usePopperHelpers]);
 };
 
 exports.usePopperTriggerLogic = usePopperTriggerLogic;
-//# sourceMappingURL=usePopperTriggerLogic.js.map