@elliemae/ds-controlled-form 2.2.0-alpha.3 → 3.0.0-next.0

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

@@ -1,48 +1,25 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var useKeyboardHandlers_exports = {};
-__export(useKeyboardHandlers_exports, {
-  useKeyboardHandlers: () => useKeyboardHandlers
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_ControlledDateTimePickerCTX = __toESM(require("../../../ControlledDateTimePickerCTX"));
-var import_dateHelpers = __toESM(require("../../../utils/dateHelpers"));
-var import_constants = __toESM(require("../../../utils/constants"));
-const useKeyboardHandlers = ({
-  focusedDay,
-  daysArray,
-  handlePrevMonth,
-  handleNextMonth,
-  handleFocusMetaDay,
-  handleFocusMetaDayByDay,
-  tryToFocusCurrentlyDataIsFocusedDay
-}) => {
+'use strict';
+
+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');
+
+const useKeyboardHandlers = _ref => {
+  let {
+    focusedDay,
+    daysArray,
+    handlePrevMonth,
+    handleNextMonth,
+    handleFocusMetaDay,
+    handleFocusMetaDayByDay,
+    tryToFocusCurrentlyDataIsFocusedDay
+  } = _ref;
   const {
     hideDate,
     hideTime,
@@ -61,202 +38,227 @@ const useKeyboardHandlers = ({
     meridiemInputRef,
     isWithDateInputs,
     yearInputRef
-  } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  const tryToFocusDayRegion = (0, import_react.useCallback)(() => {
-    setLatestInteractionRegion("calendar-days");
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const tryToFocusDayRegion = React.useCallback(() => {
+    setLatestInteractionRegion('calendar-days');
+
     if (!focusedDay) {
-      const newFocusDay = daysArray.find(({ isCurrMonthDay }) => isCurrMonthDay);
-      if (newFocusDay)
-        setTimeout(() => {
-          handleFocusMetaDay(newFocusDay);
-        });
+      const newFocusDay = daysArray.find(_ref2 => {
+        let {
+          isCurrMonthDay
+        } = _ref2;
+        return isCurrMonthDay;
+      });
+      if (newFocusDay) setTimeout(() => {
+        handleFocusMetaDay(newFocusDay);
+      });
     } else {
       tryToFocusCurrentlyDataIsFocusedDay();
     }
   }, [daysArray, focusedDay, handleFocusMetaDay, setLatestInteractionRegion, tryToFocusCurrentlyDataIsFocusedDay]);
-  const onHomeKeyDownInsideCalendar = (0, import_react.useCallback)(() => {
-    prevMonthBtnRef?.current?.focus?.();
+  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 = (0, import_react.useCallback)(() => {
-    if (isWithTimeWheelToo)
-      currMeridiemBtnRef?.current?.focus?.();
-    else
-      tryToFocusDayRegion();
+  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 = (0, import_react.useCallback)(() => {
-    if (!hideDate)
-      monthInputRef?.current?.focus?.();
-    else if (!hideTime)
-      hourInputRef?.current?.focus?.();
+  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]);
-  const handlePickerIconKeyDown = (0, import_react.useCallback)((e) => {
-    const { key } = e;
-    if (import_constants.homeEndKeys.includes(key))
-      e.preventDefault();
-    if (import_constants.homeEndKeys.includes(key))
-      e.stopPropagation();
-    if (key === "Home")
-      onHomeKeyDownTriggerIcon();
-    if (key === "Backspace" && withAnyInputs) {
-      if (isWithTimeInputs)
-        meridiemInputRef?.current?.focus?.();
-      else if (isWithDateInputs)
-        yearInputRef?.current?.focus?.();
+  const handlePickerIconKeyDown = React.useCallback(e => {
+    const {
+      key
+    } = e;
+    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 = (0, import_react.useCallback)((e, metaDay) => {
+  const handleDayOnKeyDown = React.useCallback((e, metaDay) => {
     let newFocusedDayDate;
-    const { day } = metaDay;
-    const { key, shiftKey } = e;
-    if (import_constants.homeEndAllArrowKeys.includes(key))
-      e.preventDefault();
-    if (import_constants.homeEndAllArrowKeys.includes(key))
-      e.stopPropagation();
-    if (key === "ArrowUp")
-      newFocusedDayDate = (0, import_dateHelpers.sumValuesToDate)(day, { daysToSum: -7 });
-    if (key === "ArrowDown")
-      newFocusedDayDate = (0, import_dateHelpers.sumValuesToDate)(day, { daysToSum: 7 });
-    if (key === "ArrowLeft") {
-      newFocusedDayDate = (0, import_dateHelpers.sumValuesToDate)(day, { daysToSum: -1 });
+    const {
+      day
+    } = metaDay;
+    const {
+      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
+    });
+    if (key === 'ArrowDown') newFocusedDayDate = dateHelpers.sumValuesToDate(day, {
+      daysToSum: 7
+    });
+
+    if (key === 'ArrowLeft') {
+      newFocusedDayDate = dateHelpers.sumValuesToDate(day, {
+        daysToSum: -1
+      });
+
       if (metaDay === daysArray[1]) {
         handlePrevMonth();
       }
     }
-    if (key === "ArrowRight") {
-      newFocusedDayDate = (0, import_dateHelpers.sumValuesToDate)(day, { daysToSum: 1 });
+
+    if (key === 'ArrowRight') {
+      newFocusedDayDate = dateHelpers.sumValuesToDate(day, {
+        daysToSum: 1
+      });
+
       if (metaDay === daysArray[daysArray.length - 2]) {
         handleNextMonth();
       }
     }
+
     if (newFocusedDayDate) {
       handleFocusMetaDayByDay(newFocusedDayDate);
       setTimeout(tryToFocusCurrentlyDataIsFocusedDay);
     }
-    if (key === "Home")
-      onHomeKeyDownInsideCalendar();
-    if (key === "End")
-      onEndKeyDownInsideCalendar();
-    if (key === "Tab" && !shiftKey && isControllerOnly === false && !isWithTimeWheelToo) {
+
+    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?.current?.focus?.();
+      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 = (0, import_react.useCallback)((e) => {
-    const { key, shiftKey } = e;
-    if (key === "Tab") {
+  }, [daysArray, handleFocusMetaDayByDay, handleNextMonth, handlePrevMonth, isControllerOnly, isWithTimeWheelToo, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, prevMonthBtnRef, tryToFocusCurrentlyDataIsFocusedDay]);
+  const handlePrevYearKeyDown = React.useCallback(e => {
+    const {
+      key,
+      shiftKey
+    } = e;
+
+    if (key === 'Tab') {
       e.preventDefault();
+
       if (shiftKey) {
         nextMonthBtnRef.current.focus();
       } else {
         nextYearBtnRef.current.focus();
       }
     }
-    if (key === "Home") {
+
+    if (key === 'Home') {
       onHomeKeyDownInsideCalendar();
       e.preventDefault();
     }
-    if (key === "End") {
+
+    if (key === 'End') {
       onEndKeyDownInsideCalendar();
       e.preventDefault();
     }
   }, [nextMonthBtnRef, nextYearBtnRef, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar]);
-  const handlePrevMonthKeyDown = (0, import_react.useCallback)((e) => {
-    const { key, shiftKey } = e;
-    if (key === "Tab") {
+  const handlePrevMonthKeyDown = React.useCallback(e => {
+    const {
+      key,
+      shiftKey
+    } = e;
+
+    if (key === 'Tab') {
       if (shiftKey) {
+        // TAB CYCLE IMPLEMENTATION
         if (!isControllerOnly) {
+          var _currMeridiemBtnRef$c3, _currMeridiemBtnRef$c4;
+
           e.preventDefault();
-          if (isWithTimeWheelToo)
-            currMeridiemBtnRef?.current?.focus?.();
-          else
-            tryToFocusDayRegion();
+          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();
       }
     }
-    if (key === "Home") {
+
+    if (key === 'Home') {
       onHomeKeyDownInsideCalendar();
       e.preventDefault();
     }
-    if (key === "End") {
+
+    if (key === 'End') {
       onEndKeyDownInsideCalendar();
       e.preventDefault();
     }
-  }, [
-    currMeridiemBtnRef,
-    isControllerOnly,
-    isWithTimeWheelToo,
-    nextMonthBtnRef,
-    onEndKeyDownInsideCalendar,
-    onHomeKeyDownInsideCalendar,
-    tryToFocusDayRegion
-  ]);
-  const handleNextMonthKeyDown = (0, import_react.useCallback)((e) => {
-    const { key, shiftKey } = e;
-    if (key === "Tab") {
+  }, [currMeridiemBtnRef, isControllerOnly, isWithTimeWheelToo, nextMonthBtnRef, onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, tryToFocusDayRegion]);
+  const handleNextMonthKeyDown = React.useCallback(e => {
+    const {
+      key,
+      shiftKey
+    } = e;
+
+    if (key === 'Tab') {
       e.preventDefault();
+
       if (shiftKey) {
         prevMonthBtnRef.current.focus();
       } else {
         prevYearBtnRef.current.focus();
       }
     }
-    if (key === "Home") {
+
+    if (key === 'Home') {
       onHomeKeyDownInsideCalendar();
       e.preventDefault();
     }
-    if (key === "End") {
+
+    if (key === 'End') {
       onEndKeyDownInsideCalendar();
       e.preventDefault();
     }
   }, [onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, prevMonthBtnRef, prevYearBtnRef]);
-  const handleNextYearKeyDown = (0, import_react.useCallback)((e) => {
-    const { key, shiftKey } = e;
-    if (key === "Tab") {
+  const handleNextYearKeyDown = React.useCallback(e => {
+    const {
+      key,
+      shiftKey
+    } = e;
+
+    if (key === 'Tab') {
       e.preventDefault();
+
       if (shiftKey) {
-        prevYearBtnRef?.current?.focus?.();
+        var _prevYearBtnRef$curre, _prevYearBtnRef$curre2;
+
+        prevYearBtnRef === null || prevYearBtnRef === void 0 ? void 0 : (_prevYearBtnRef$curre = prevYearBtnRef.current) === null || _prevYearBtnRef$curre === void 0 ? void 0 : (_prevYearBtnRef$curre2 = _prevYearBtnRef$curre.focus) === null || _prevYearBtnRef$curre2 === void 0 ? void 0 : _prevYearBtnRef$curre2.call(_prevYearBtnRef$curre);
       }
-      if (!shiftKey)
-        tryToFocusDayRegion();
+
+      if (!shiftKey) tryToFocusDayRegion();
     }
-    if (key === "Home") {
+
+    if (key === 'Home') {
       onHomeKeyDownInsideCalendar();
       e.preventDefault();
     }
-    if (key === "End") {
+
+    if (key === 'End') {
       onEndKeyDownInsideCalendar();
       e.preventDefault();
     }
   }, [tryToFocusDayRegion, prevYearBtnRef, onHomeKeyDownInsideCalendar, onEndKeyDownInsideCalendar]);
-  return (0, import_react.useMemo)(() => ({
-    handleDayOnKeyDown,
-    handlePrevYearKeyDown,
-    handlePrevMonthKeyDown,
-    handleNextMonthKeyDown,
-    handleNextYearKeyDown,
-    handlePickerIconKeyDown
-  }), [
+  return React.useMemo(() => ({
     handleDayOnKeyDown,
     handlePrevYearKeyDown,
     handlePrevMonthKeyDown,
     handleNextMonthKeyDown,
     handleNextYearKeyDown,
     handlePickerIconKeyDown
-  ]);
+  }), [handleDayOnKeyDown, handlePrevYearKeyDown, handlePrevMonthKeyDown, handleNextMonthKeyDown, handleNextYearKeyDown, handlePickerIconKeyDown]);
 };
-module.exports = __toCommonJS(useKeyboardHandlers_exports);
-//# sourceMappingURL=useKeyboardHandlers.js.map
+
+exports.useKeyboardHandlers = useKeyboardHandlers;

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

@@ -1,98 +1,92 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var usePopperTriggerLogic_exports = {};
-__export(usePopperTriggerLogic_exports, {
-  usePopperTriggerLogic: () => usePopperTriggerLogic
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_popper = __toESM(require("react-popper"));
-var import_ControlledDateTimePickerCTX = __toESM(require("../../../ControlledDateTimePickerCTX"));
-var import_useOnClickOutside = __toESM(require("../../../utils/hooks/useOnClickOutside"));
-const usePopperTriggerLogic = ({
-  focusedDay,
-  resetFocusedDayToStartDate,
-  showCalendar,
-  setShowCalendar,
-  tryToFocusCurrentlyDataIsFocusedDay
-}) => {
+'use strict';
+
+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');
+
+const usePopperTriggerLogic = _ref => {
+  let {
+    focusedDay,
+    resetFocusedDayToStartDate,
+    showCalendar,
+    setShowCalendar,
+    tryToFocusCurrentlyDataIsFocusedDay
+  } = _ref;
   const {
-    props: { onPickerOpen, onPickerClose },
+    props: {
+      onPickerOpen,
+      onPickerClose
+    },
     prevMonthBtnRef,
     pickerButtonRef
-  } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
-  const [popperElement, setPopperElement] = (0, import_react.useState)(null);
-  const [arrowElement, setArrowElement] = (0, import_react.useState)(null);
-  const usePopperHelpers = (0, import_react_popper.usePopper)(referenceElement, popperElement, {
-    modifiers: [{ name: "arrow", options: { element: arrowElement } }]
-  });
-  const handleOnPickerOpen = (0, import_react.useCallback)(() => {
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  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
+
+  const handleOnPickerOpen = React.useCallback(() => {
     onPickerOpen();
     tryToFocusCurrentlyDataIsFocusedDay();
   }, [onPickerOpen, tryToFocusCurrentlyDataIsFocusedDay]);
-  const openCalendar = (0, import_react.useCallback)(() => {
-    if (focusedDay)
-      setTimeout(() => focusedDay?.dayBtnRef?.current?.focus?.(), 100);
-    else
-      setTimeout(() => prevMonthBtnRef?.current?.focus?.(), 100);
+  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(() => {
+      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]);
-  const closeCalendar = (0, import_react.useCallback)(() => {
+  const closeCalendar = React.useCallback(() => {
+    var _pickerButtonRef$curr, _pickerButtonRef$curr2;
+
     setShowCalendar(false);
     onPickerClose();
     resetFocusedDayToStartDate();
-    pickerButtonRef?.current?.focus?.();
+    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]);
-  const handleToggleCalendar = (0, import_react.useCallback)(() => {
+  const handleToggleCalendar = React.useCallback(() => {
     const isOpening = !showCalendar;
-    if (isOpening)
-      openCalendar();
-    else
-      closeCalendar();
+    if (isOpening) openCalendar();else closeCalendar();
   }, [closeCalendar, openCalendar, showCalendar]);
-  const handleSetTriggerRef = (0, import_react.useCallback)((newRef) => {
+  const handleSetTriggerRef = React.useCallback(newRef => {
     pickerButtonRef.current = newRef;
     setReferenceElement(newRef);
   }, [pickerButtonRef]);
-  const handleMenuWrapperKeyDown = (0, import_react.useCallback)((e) => {
-    const { key } = e;
-    if (key === "Escape") {
+  const handleMenuWrapperKeyDown = React.useCallback(e => {
+    const {
+      key
+    } = e;
+
+    if (key === 'Escape') {
+      var _pickerButtonRef$curr3, _pickerButtonRef$curr4;
+
       closeCalendar();
-      pickerButtonRef?.current?.focus?.();
+      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]);
-  (0, import_useOnClickOutside.useOnClickOutside)(popperElement, (e) => {
-    if (!pickerButtonRef?.current?.contains?.(e?.target))
-      closeCalendar();
+  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 (0, import_react.useMemo)(() => ({
+  return React.useMemo(() => ({
     closeCalendar,
     handleSetTriggerRef,
     setPopperElement,
@@ -102,5 +96,5 @@ const usePopperTriggerLogic = ({
     handleMenuWrapperKeyDown
   }), [closeCalendar, handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleCalendar, usePopperHelpers]);
 };
-module.exports = __toCommonJS(usePopperTriggerLogic_exports);
-//# sourceMappingURL=usePopperTriggerLogic.js.map
+
+exports.usePopperTriggerLogic = usePopperTriggerLogic;