linear-react-components-ui 1.1.26-beta.9 → 1.1.27-rc.0

package/lib/inputs/period/index.js

@@ -1,213 +1,544 @@
-import { j as i } from "../../chunks/jsx-runtime.D1SHvdVE.js";
-import { useId as fe, useState as D, useRef as g, useEffect as k, useCallback as de } from "react";
-import { h as r } from "../../chunks/moment.DMLRxgRE.js";
-import ke from "./PeriodList.js";
-import me from "../mask/BaseMask.js";
-import U from "./Dropdown.js";
-import Oe from "../../calendar/base/index.js";
-import "../../chunks/compiler-runtime.Cu50tn6L.js";
-import ge from "../../buttons/Button.js";
-import W from "../../icons/index.js";
-import '../../assets/gridlayout.css';import '../../assets/button.css';import '../../assets/index24.css';/* empty css                           */
-import $ from "./Dialog.js";
-import Le from "../../hint/index.js";
-/* empty css                               */
-import Ve from "../../gridlayout/GridCol.js";
-import { getInputWrapperClass as Te } from "../base/helpers.js";
-import { ErrorMessage as Ae } from "../errorMessage/index.js";
-import he from "../../textContent/index.js";
-import qe from "../../popover/index.js";
-const on = (n) => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("../../assets/styles/periodpicker.scss");
+var _react = _interopRequireWildcard(require("react"));
+var _moment = _interopRequireDefault(require("moment"));
+var _PeriodList = _interopRequireDefault(require("./PeriodList"));
+var _BaseMask = _interopRequireDefault(require("../mask/BaseMask"));
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+var _calendar = _interopRequireDefault(require("../../calendar"));
+var _buttons = _interopRequireDefault(require("../../buttons"));
+var _icons = _interopRequireDefault(require("../../icons"));
+var _Dialog = _interopRequireDefault(require("./Dialog"));
+var _hint = _interopRequireDefault(require("../../hint"));
+var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
+var helperBase = _interopRequireWildcard(require("../base/helpers"));
+var _errorMessage = require("../errorMessage");
+var _textContent = _interopRequireDefault(require("../../textContent"));
+var _popover = _interopRequireDefault(require("../../popover"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const PeriodPicker = props => {
   const {
-    showButtonOpen: j = !0,
-    openOnFocus: ve = !0,
-    shouldCloseOnSelect: G = !0,
-    calendarColorStyle: S,
-    showCalendarInDialog: b = !1,
-    dialogSize: O = {
-      width: "350px",
-      height: "350px"
+    showButtonOpen = true,
+    openOnFocus = true,
+    shouldCloseOnSelect = true,
+    calendarColorStyle,
+    showCalendarInDialog = false,
+    dialogSize = {
+      width: '350px',
+      height: '350px'
     },
-    hint: B,
-    hintPosition: H = "below",
-    themePopover: Ce = "light",
-    popoverAlign: De = "left",
-    gridLayout: J
-  } = n, Ye = fe(), pe = fe(), [l, I] = D(n.value && r(n.value.initial, "DD/MM/YYYY")), [a, F] = D(n.value && r(n.value.final, "DD/MM/YYYY")), [Q, X] = D("week"), [h, v] = D(!1), [Y, u] = D(!1), [y, p] = D(!1), [L, V] = D(), [C, Z] = D(), [_, ee] = D("valueInitial"), M = g(null), x = g(null), d = g(null), xe = g(null), T = g(null), be = g(null), w = g(null);
-  g(null);
-  const o = g(null), f = g(null), A = () => {
-    V(x?.current?.getBoundingClientRect());
-  }, Ie = (e) => {
-    const t = !M.current?.contains(e.relatedTarget);
-    !b && h && t && v(!1), !b && Y && t && u(!1);
-  }, ne = (e) => {
+    hint,
+    hintPosition = 'below',
+    themePopover = 'light',
+    popoverAlign = 'left',
+    gridLayout
+  } = props;
+  const idValueInitial = (0, _react.useId)();
+  const idValueFinal = (0, _react.useId)();
+  const [valueInitial, setValueInitial] = (0, _react.useState)(props.value && (0, _moment.default)(props.value.initial, 'DD/MM/YYYY'));
+  const [valueFinal, setValueFinal] = (0, _react.useState)(props.value && (0, _moment.default)(props.value.final, 'DD/MM/YYYY'));
+  const [valuePeriodSelection, setValuePeriodSelection] = (0, _react.useState)('week');
+  const [showCalendarValueInitial, setShowCalendarValueInitial] = (0, _react.useState)(false);
+  const [showCalendarValueFinal, setShowCalendarValueFinal] = (0, _react.useState)(false);
+  const [showPeriodSelection, setShowPeriodSelection] = (0, _react.useState)(false);
+  const [inputDimensions, setInputDimensions] = (0, _react.useState)();
+  const [onDenied, setOnDenied] = (0, _react.useState)();
+  const [currentTypeDate, setCurrentTypeDate] = (0, _react.useState)('valueInitial');
+  const wrapperBaseInputPeriodRef = (0, _react.useRef)(null);
+  const inputContainerRef = (0, _react.useRef)(null);
+  const inputInitialRef = (0, _react.useRef)(null);
+  const buttonOpenRef = (0, _react.useRef)(null);
+  const currentDateButtonRef = (0, _react.useRef)();
+  const buttonSelectPeriodRef = (0, _react.useRef)(null);
+  const dropdownCalendarContainer = (0, _react.useRef)(null);
+  const inputFinalRef = (0, _react.useRef)(null);
+  const calendarContainerRef = (0, _react.useRef)(null);
+  const onScreenResize = () => {
+    var _inputContainerRef$cu;
+    setInputDimensions(inputContainerRef === null || inputContainerRef === void 0 ? void 0 : (_inputContainerRef$cu = inputContainerRef.current) === null || _inputContainerRef$cu === void 0 ? void 0 : _inputContainerRef$cu.getBoundingClientRect());
+  };
+  const onBlurWithoutWrapper = event => {
+    var _wrapperBaseInputPeri;
+    const focusOnAnotherField = !((_wrapperBaseInputPeri = wrapperBaseInputPeriodRef.current) !== null && _wrapperBaseInputPeri !== void 0 && _wrapperBaseInputPeri.contains(event.relatedTarget));
+    if (!showCalendarInDialog && showCalendarValueInitial && focusOnAnotherField) {
+      setShowCalendarValueInitial(false);
+    }
+    if (!showCalendarInDialog && showCalendarValueFinal && focusOnAnotherField) {
+      setShowCalendarValueFinal(false);
+    }
+  };
+  const onKeyDownPress = event => {
     const {
-      target: t
-    } = e, c = t;
-    if (f.current && e && e.key && e.key === "Escape" && (e.preventDefault(), c.focus(), h && (c.id !== "valueInitial" && d.current?.focus(), v(!1)), Y && (c.id !== "valueFinal" && o.current?.focus(), u(!1)), y && (p(!1), o.current?.focus(), u(!1))), f.current && e && e.key && e.key === "Tab") {
-      const s = f.current?.getElementsByClassName("navbutton"), Re = (f.current?.getElementsByClassName("-selectedday"))[0].firstChild, K = Array.from([...s, Re]), ue = K[0], Ee = K[K.length - 1], ce = f.current.id === "valueInitial";
-      !e.shiftKey && h && document.activeElement === d.current && (e.preventDefault(), ue.focus()), e.shiftKey && ce && document.activeElement === ue && (e.preventDefault(), d.current?.focus()), !e.shiftKey && ce && document.activeElement === Ee && (e.preventDefault(), o.current?.focus());
-    }
-    e.stopPropagation();
-  }, P = () => {
-    const e = x.current?.getBoundingClientRect(), t = e && e.bottom;
-    w && w.current && e && (w.current.style.top = String(t).concat("px"));
-  };
-  k(() => (window.addEventListener("resize", A), document.addEventListener("scroll", P), document.getElementById("modal-dialog-content")?.addEventListener("scroll", P), x.current && A(), d && d.current && (d.current.id = Ye), o && o.current && (o.current.id = pe), () => {
-    window.removeEventListener("resize", A), document.removeEventListener("scroll", P), document.getElementById("modal-dialog-content")?.removeEventListener("scroll", P);
-  }), []), k(() => (document.addEventListener("keydown", ne), () => {
-    document.removeEventListener("keydown", ne);
-  }), [Y, h, y, f.current]), k(() => {
-    if (a && l && r(a).isBefore(r(l)))
-      I(a), F(l);
-    else if (n.onChange) {
-      const e = l ? l.format("YYYY-MM-DD") : "", t = a ? a.format("YYYY-MM-DD") : "";
-      n.onChange(void 0, "", {
-        initial: e,
-        final: t
-      });
+      target
+    } = event;
+    const targetElement = target;
+    if (calendarContainerRef.current && event && event.key && event.key === 'Escape') {
+      event.preventDefault();
+      targetElement.focus();
+      if (showCalendarValueInitial) {
+        if (targetElement.id !== 'valueInitial') {
+          var _inputInitialRef$curr;
+          (_inputInitialRef$curr = inputInitialRef.current) === null || _inputInitialRef$curr === void 0 ? void 0 : _inputInitialRef$curr.focus();
+        }
+        setShowCalendarValueInitial(false);
+      }
+      if (showCalendarValueFinal) {
+        if (targetElement.id !== 'valueFinal') {
+          var _inputFinalRef$curren;
+          (_inputFinalRef$curren = inputFinalRef.current) === null || _inputFinalRef$curren === void 0 ? void 0 : _inputFinalRef$curren.focus();
+        }
+        setShowCalendarValueFinal(false);
+      }
+      if (showPeriodSelection) {
+        var _inputFinalRef$curren2;
+        setShowPeriodSelection(false);
+        (_inputFinalRef$curren2 = inputFinalRef.current) === null || _inputFinalRef$curren2 === void 0 ? void 0 : _inputFinalRef$curren2.focus();
+        setShowCalendarValueFinal(false);
+      }
     }
-  }, [l, a]), k(() => {
-    if (n.value && !(r(n.value.initial).isSame(l) || r(n.value.final).isSame(a))) {
-      const {
-        initial: e,
-        final: t
-      } = n.value;
-      let c, s;
-      r(e, "YYYY-MM-DD", !0).isValid() && (c = r(e, "YYYY-MM-DD")), r(t, "YYYY-MM-DD", !0).isValid() && (s = r(t, "YYYY-MM-DD")), I(c), F(s);
-    }
-  }, [n.value]);
-  const te = (e) => {
-    e === "valueInitial" && (ee("valueInitial"), u(!1), h || (d.current?.focus(), b && setTimeout(() => {
-      T.current?.focus();
-    }, 100), v(!0))), e === "valueFinal" && (ee("valueFinal"), v(!1), Y || (o.current?.focus(), b && setTimeout(() => {
-      T.current?.focus();
-    }, 100), u(!0))), x.current && V(x.current.getBoundingClientRect());
-  }, Fe = (e) => {
-    e === "valueInitial" && d.current?.focus(), e === "valueFinal" && o.current?.focus(), v(!1), u(!1);
-  }, q = (e) => {
+    event.stopPropagation();
+  };
+  const keepPositionCalendarByScroll = () => {
+    var _inputContainerRef$cu2;
+    const inputDateDimensions = (_inputContainerRef$cu2 = inputContainerRef.current) === null || _inputContainerRef$cu2 === void 0 ? void 0 : _inputContainerRef$cu2.getBoundingClientRect();
+    const positionTop = inputDateDimensions && inputDateDimensions.bottom;
+    if (dropdownCalendarContainer && dropdownCalendarContainer.current && inputDateDimensions) {
+      dropdownCalendarContainer.current.style.top = String(positionTop).concat('px');
+    }
+  };
+  const openCalendar = calendarName => {
+    if (calendarName === 'valueInitial') {
+      setCurrentTypeDate('valueInitial');
+      setShowCalendarValueFinal(false);
+      if (!showCalendarValueInitial) {
+        var _inputInitialRef$curr2;
+        (_inputInitialRef$curr2 = inputInitialRef.current) === null || _inputInitialRef$curr2 === void 0 ? void 0 : _inputInitialRef$curr2.focus();
+        if (showCalendarInDialog) {
+          setTimeout(() => {
+            var _currentDateButtonRef;
+            (_currentDateButtonRef = currentDateButtonRef.current) === null || _currentDateButtonRef === void 0 ? void 0 : _currentDateButtonRef.focus();
+          }, 100);
+        }
+        setShowCalendarValueInitial(true);
+      }
+    }
+    if (calendarName === 'valueFinal') {
+      setCurrentTypeDate('valueFinal');
+      setShowCalendarValueInitial(false);
+      if (!showCalendarValueFinal) {
+        var _inputFinalRef$curren3;
+        (_inputFinalRef$curren3 = inputFinalRef.current) === null || _inputFinalRef$curren3 === void 0 ? void 0 : _inputFinalRef$curren3.focus();
+        if (showCalendarInDialog) {
+          setTimeout(() => {
+            var _currentDateButtonRef2;
+            (_currentDateButtonRef2 = currentDateButtonRef.current) === null || _currentDateButtonRef2 === void 0 ? void 0 : _currentDateButtonRef2.focus();
+          }, 100);
+        }
+        setShowCalendarValueFinal(true);
+      }
+    }
+    if (inputContainerRef.current) {
+      setInputDimensions(inputContainerRef.current.getBoundingClientRect());
+    }
+  };
+  const closeCalendar = calendarName => {
+    if (calendarName === 'valueInitial') {
+      var _inputInitialRef$curr3;
+      (_inputInitialRef$curr3 = inputInitialRef.current) === null || _inputInitialRef$curr3 === void 0 ? void 0 : _inputInitialRef$curr3.focus();
+    }
+    if (calendarName === 'valueFinal') {
+      var _inputFinalRef$curren4;
+      (_inputFinalRef$curren4 = inputFinalRef.current) === null || _inputFinalRef$curren4 === void 0 ? void 0 : _inputFinalRef$curren4.focus();
+    }
+    setShowCalendarValueInitial(false);
+    setShowCalendarValueFinal(false);
+  };
+  const onDateChange = date => {
+    var _props$onChange;
+    const initial = date.initial ? date.initial.format('YYYY-MM-DD') : '';
+    const final = date.final ? date.final.format('YYYY-MM-DD') : '';
+    props === null || props === void 0 ? void 0 : (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, undefined, '', {
+      initial,
+      final
+    });
+  };
+  const onCloseDateDialog = calendarName => {
     setTimeout(() => {
-      e === "valueInitial" && (d.current?.focus(), v(!1)), e === "valueFinal" && (o.current?.focus(), u(!1)), e === "periodSelection" && (p(!1), o.current?.focus(), u(!1));
+      if (calendarName === 'valueInitial') {
+        var _inputInitialRef$curr4;
+        (_inputInitialRef$curr4 = inputInitialRef.current) === null || _inputInitialRef$curr4 === void 0 ? void 0 : _inputInitialRef$curr4.focus();
+        setShowCalendarValueInitial(false);
+      }
+      if (calendarName === 'valueFinal') {
+        var _inputFinalRef$curren5;
+        (_inputFinalRef$curren5 = inputFinalRef.current) === null || _inputFinalRef$curren5 === void 0 ? void 0 : _inputFinalRef$curren5.focus();
+        setShowCalendarValueFinal(false);
+      }
+      if (calendarName === 'periodSelection') {
+        var _inputFinalRef$curren6;
+        setShowPeriodSelection(false);
+        (_inputFinalRef$curren6 = inputFinalRef.current) === null || _inputFinalRef$curren6 === void 0 ? void 0 : _inputFinalRef$curren6.focus();
+        setShowCalendarValueFinal(false);
+      }
     }, 100);
-  }, ie = (e) => {
+  };
+  const onInputFocus = e => {
     const {
-      name: t
+      name
     } = e.target;
-    ve && te(t), n.onFocus && n.onFocus(e);
-  }, le = (e) => {
-    n.onBlur && n.onBlur(e);
-  }, ae = (e, t) => {
-    if (e) {
+    if (openOnFocus) openCalendar(name);
+    if (props.onFocus) props.onFocus(e);
+  };
+  const onInputBlur = e => {
+    if (props.onBlur) props.onBlur(e);
+  };
+  const onInputChange = event => {
+    if (event) {
       const {
-        name: c
-      } = e.target;
-      t && t.replace(/\D/g, "").trim().length !== 0 && (c === "valueInitial" ? I(void 0) : F(void 0));
-    }
-  }, R = (e) => {
-    if (n.onChange) {
-      const t = e.initial ? e.initial.format("YYYY-MM-DD") : "", c = e.final ? e.final.format("YYYY-MM-DD") : "";
-      n.onChange(void 0, "", {
-        initial: t,
-        final: c
+        name: changingAux,
+        value
+      } = event.target;
+      if (String(value).trim().length === 0) {
+        if (changingAux === 'valueInitial') {
+          setValueInitial(undefined);
+        } else {
+          setValueFinal(undefined);
+        }
+      }
+    }
+  };
+  const setValue = function (event, value) {
+    var _inputInitialRef$curr5, _inputFinalRef$curren7;
+    let shouldOpenDropdown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    const valueDateName = event ? event.target.name : '';
+    const dateObj = (0, _moment.default)(value, 'DD/MM/YYYY');
+    if (showCalendarValueInitial) (_inputInitialRef$curr5 = inputInitialRef.current) === null || _inputInitialRef$curr5 === void 0 ? void 0 : _inputInitialRef$curr5.focus();
+    if (showCalendarValueFinal) (_inputFinalRef$curren7 = inputFinalRef.current) === null || _inputFinalRef$curren7 === void 0 ? void 0 : _inputFinalRef$curren7.focus();
+    if (valueDateName === 'valueInitial') {
+      setValueInitial(dateObj);
+      onDateChange({
+        initial: dateObj,
+        final: valueFinal
+      });
+    } else {
+      setValueFinal(dateObj);
+      onDateChange({
+        initial: valueInitial,
+        final: dateObj
       });
     }
-  }, N = (e, t, c = !0) => {
-    const s = e ? e.target.name : "", m = r(t, "DD/MM/YYYY");
-    h && d.current?.focus(), Y && o.current?.focus(), s === "valueFinal" && l && m.isBefore(l) ? (I(m), F(l), R({
-      initial: m,
-      final: l
-    })) : s === "valueInitial" && a && m.isAfter(a) ? (I(a), F(m), R({
-      initial: a,
-      final: m
-    })) : s === "valueInitial" ? (I(m), R({
-      initial: m,
-      final: a
-    })) : (F(m), R({
-      initial: l,
-      final: m
-    })), s === "valueInitial" && !a && c && (o.current?.focus(), setTimeout(() => u(!0), 100)), G && (v(!1), u(!1));
-  }, z = () => {
+    if (valueDateName === 'valueInitial' && !valueFinal && shouldOpenDropdown) {
+      var _inputFinalRef$curren8;
+      (_inputFinalRef$curren8 = inputFinalRef.current) === null || _inputFinalRef$curren8 === void 0 ? void 0 : _inputFinalRef$curren8.focus();
+      setTimeout(() => setShowCalendarValueFinal(true), 100);
+    }
+    if (shouldCloseOnSelect) {
+      setShowCalendarValueInitial(false);
+      setShowCalendarValueFinal(false);
+    }
+  };
+  const shouldDisable = () => {
     const {
-      disabled: e
-    } = n;
-    return e || C && (C.disabled || C.hideContent);
-  }, we = de(() => j ? /* @__PURE__ */ i.jsx(ge, { boxShadow: !1, disabled: z(), customClass: "calendar-button", icon: /* @__PURE__ */ i.jsx(W, { name: "calendar" }), onClick: () => {
-    Y || h ? Fe(_) : te(_);
-  }, tabIndex: -1, targetRef: (e) => {
-    xe.current = e;
-  } }, "button-open") : null, [Y, h]), re = (e, t) => /* @__PURE__ */ i.jsx(ke, { selected: e, handleOnSelect: t }), ye = () => {
-    u(!1), v(!1), p(!0), x.current && V(x.current.getBoundingClientRect());
-  }, Me = () => {
-    p(!1), o.current?.focus(), u(!1);
-  }, je = de(() => /* @__PURE__ */ i.jsx(ge, { disabled: z(), tabIndex: -1, customClass: "calendar-button", icon: /* @__PURE__ */ i.jsx(W, { name: "more1" }), onBlur: () => setTimeout(() => p(!1), 100), onClick: () => y ? Me() : ye(), targetRef: (e) => {
-    be.current = e;
-  } }, "button-select-period"), [y]), E = (e, t, c) => /* @__PURE__ */ i.jsx(Oe, { colorStyle: t, currentDate: e !== void 0 ? r(e) : r(), calendarContainer: (s) => {
-    f.current = s;
-  }, onDateChange: (s) => N({
-    target: {
-      name: c
-    }
-  }, s), currentDateButton: (s) => T.current = s }), oe = (e, t) => {
-    if (e === "custom") {
-      d.current?.focus(), X(e), p(!1);
+      disabled
+    } = props;
+    return disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
+  };
+  const getButtonOpen = (0, _react.useCallback)(() => {
+    if (!showButtonOpen) return null;
+    return /*#__PURE__*/_react.default.createElement(_buttons.default, {
+      key: "button-open",
+      boxShadow: false,
+      disabled: shouldDisable(),
+      customClass: "calendar-button",
+      icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
+        name: "calendar"
+      }),
+      onClick: () => {
+        if (showCalendarValueFinal || showCalendarValueInitial) {
+          closeCalendar(currentTypeDate);
+        } else {
+          openCalendar(currentTypeDate);
+        }
+      },
+      tabIndex: -1,
+      targetRef: ref => {
+        buttonOpenRef.current = ref;
+      }
+    });
+  }, [showCalendarValueFinal, showCalendarValueInitial]);
+  const getPeriodSelection = (valuePeriodSelectionAux, setPeriodDates) => /*#__PURE__*/_react.default.createElement(_PeriodList.default, {
+    selected: valuePeriodSelectionAux,
+    handleOnSelect: setPeriodDates
+  });
+  const openPeriodSelecion = () => {
+    setShowCalendarValueFinal(false);
+    setShowCalendarValueInitial(false);
+    setShowPeriodSelection(true);
+    if (inputContainerRef.current) {
+      setInputDimensions(inputContainerRef.current.getBoundingClientRect());
+    }
+  };
+  const closePeriodSelection = () => {
+    var _inputFinalRef$curren9;
+    setShowPeriodSelection(false);
+    (_inputFinalRef$curren9 = inputFinalRef.current) === null || _inputFinalRef$curren9 === void 0 ? void 0 : _inputFinalRef$curren9.focus();
+    setShowCalendarValueFinal(false);
+  };
+  const getButtonSelectPeriod = (0, _react.useCallback)(() => {
+    return /*#__PURE__*/_react.default.createElement(_buttons.default, {
+      key: "button-select-period",
+      disabled: shouldDisable(),
+      tabIndex: -1,
+      customClass: "calendar-button",
+      icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
+        name: "more1"
+      }),
+      onBlur: () => setTimeout(() => setShowPeriodSelection(false), 100),
+      onClick: () => !showPeriodSelection ? openPeriodSelecion() : closePeriodSelection(),
+      targetRef: ref => {
+        buttonSelectPeriodRef.current = ref;
+      }
+    });
+  }, [showPeriodSelection]);
+  const getCalendar = (value, calendarColorStyleCalendar, valueDateName) => /*#__PURE__*/_react.default.createElement(_calendar.default, {
+    colorStyle: calendarColorStyleCalendar,
+    currentDate: value !== undefined ? (0, _moment.default)(value) : (0, _moment.default)(),
+    calendarContainer: ref => {
+      calendarContainerRef.current = ref;
+    },
+    onDateChange: date => setValue({
+      target: {
+        name: valueDateName
+      }
+    }, date),
+    currentDateButton: buttonElement => currentDateButtonRef.current = buttonElement
+  });
+  const setPeriodDates = (selected, dates) => {
+    var _inputFinalRef$curren0;
+    if (selected === 'custom') {
+      var _inputInitialRef$curr6;
+      (_inputInitialRef$curr6 = inputInitialRef.current) === null || _inputInitialRef$curr6 === void 0 ? void 0 : _inputInitialRef$curr6.focus();
+      setValuePeriodSelection(selected);
+      setShowPeriodSelection(false);
       return;
     }
-    X(e), t && (I(t[0]), F(t[1])), G && p(!1), o.current?.focus(), u(!1);
-  }, Se = () => C && C.readOnly ? null : (f && f.current && (f.current.id = "valueInitial"), b ? /* @__PURE__ */ i.jsx($, { handlerClose: () => q("valueInitial"), dialogSize: O, onOpenChange: v, children: E(l, S, "valueInitial") }) : /* @__PURE__ */ i.jsx(U, { containerRef: M, showButtonOpen: j, inputDimensions: L, dropdownRef: (e) => {
-    w.current = e;
-  }, children: E(l, S, "valueInitial") })), Be = () => C && C.readOnly ? null : (f && f.current && (f.current.id = "valueFinal"), b ? /* @__PURE__ */ i.jsx($, { handlerClose: () => q("valueFinal"), dialogSize: O, onOpenChange: u, children: E(a, S, "valueFinal") }) : /* @__PURE__ */ i.jsx(U, { containerRef: M, showButtonOpen: j, inputDimensions: L, dropdownRef: (e) => {
-    w.current = e;
-  }, children: E(a, S, "valueFinal") })), Pe = () => b ? /* @__PURE__ */ i.jsx($, { handlerClose: () => q("periodSelection"), dialogSize: O, onOpenChange: p, children: re(Q, oe) }) : /* @__PURE__ */ i.jsx(U, { containerRef: M, showButtonOpen: j, inputDimensions: L, dropdownRef: (e) => {
-    w.current = e;
-  }, children: re(Q, oe) });
-  if (C && C.unvisible) return null;
-  const se = () => /* @__PURE__ */ i.jsxs("div", { ref: M, onBlur: Ie, className: "input-base-component datepicker-period-container", children: [
-    n.label && /* @__PURE__ */ i.jsxs("div", { className: "labelcontainer", children: [
-      /* @__PURE__ */ i.jsx(he, { required: n.required, className: n.customClassForLabel, labelUppercase: n.labelUppercase }),
-      /* @__PURE__ */ i.jsx("div", { className: "text-content", style: {
-        display: "flex"
-      }, children: /* @__PURE__ */ i.jsxs("div", { className: `label ${n.customClassForLabel} ${n.labelUppercase && " -uppercase"}`, style: {
-        alignSelf: "center"
-      }, children: [
-        n.label,
-        n.required && /* @__PURE__ */ i.jsx("span", { className: "-requiredlabel", children: "*" }),
-        !!B && H === "onLabelRight" && /* @__PURE__ */ i.jsx(qe, { theme: Ce, align: De, iconColor: "#03bde2", customClass: "-hint", style: {
-          margin: "0px 5px",
-          height: "auto",
-          width: 20
-        }, children: B })
-      ] }) }),
-      /* @__PURE__ */ i.jsx(he, {})
-    ] }),
-    /* @__PURE__ */ i.jsxs("div", { className: `periodpicker-component ${Te({
-      ...n,
-      value: l ? r(l).format("DD/MM/YYYY") : "",
-      disabled: z()
-    })}`, ref: x, children: [
-      /* @__PURE__ */ i.jsx(me, { gridLayout: void 0, permissionAttr: n.permissionAttr, name: "valueInitial", value: l ? r(l).format("DD/MM/YYYY") : "", mask: "00/00/0000", onComplete: (e) => {
-        N(e, e.target.value, !0);
-      }, onFocus: ie, onBlur: (e) => le(e), onChange: ae, inputRef: (e) => {
-        d.current = e;
-      }, handlerSetOnDenied: (e) => {
-        Z(e);
-      }, required: n.required }),
-      /* @__PURE__ */ i.jsx(W, { name: "arrow_right", customClass: "separation_icon" }),
-      /* @__PURE__ */ i.jsx(me, { gridLayout: void 0, permissionAttr: n.permissionAttr, name: "valueFinal", value: a ? r(a).format("DD/MM/YYYY") : "", mask: "00/00/0000", onComplete: (e) => {
-        N(e, e.target.value, !0);
-      }, onFocus: ie, onBlur: (e) => le(e), onChange: ae, inputRef: (e) => {
-        o.current = e;
-      }, handlerSetOnDenied: (e) => Z(e), required: n.required }),
-      we(),
-      je()
-    ] }),
-    h && Se(),
-    Y && Be(),
-    y && Pe(),
-    /* @__PURE__ */ i.jsx(Le, { visible: !!B && H === "below", customClass: "hint", description: B }),
-    /* @__PURE__ */ i.jsx(Ae, { messages: n.errorMessages })
-  ] });
-  return J ? /* @__PURE__ */ i.jsx(Ve, { customClass: "-withinput", cols: J, children: se() }) : se();
-};
-export {
-  on as default
+    setValuePeriodSelection(selected);
+    if (dates) {
+      setValueInitial(dates[0]);
+      setValueFinal(dates[1]);
+    }
+    if (shouldCloseOnSelect) {
+      setShowPeriodSelection(false);
+    }
+    (_inputFinalRef$curren0 = inputFinalRef.current) === null || _inputFinalRef$curren0 === void 0 ? void 0 : _inputFinalRef$curren0.focus();
+    setShowCalendarValueFinal(false);
+  };
+  const getCalendarInitial = () => {
+    if (onDenied && onDenied.readOnly) return null;
+    if (calendarContainerRef && calendarContainerRef.current) calendarContainerRef.current.id = 'valueInitial';
+    if (showCalendarInDialog) {
+      return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+        handlerClose: () => onCloseDateDialog('valueInitial'),
+        dialogSize: dialogSize,
+        onOpenChange: setShowCalendarValueInitial
+      }, getCalendar(valueInitial, calendarColorStyle, 'valueInitial'));
+    }
+    return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+      containerRef: wrapperBaseInputPeriodRef,
+      showButtonOpen: showButtonOpen,
+      inputDimensions: inputDimensions,
+      dropdownRef: el => {
+        dropdownCalendarContainer.current = el;
+      }
+    }, getCalendar(valueInitial, calendarColorStyle, 'valueInitial'));
+  };
+  const getCalendarFinal = () => {
+    if (onDenied && onDenied.readOnly) return null;
+    if (calendarContainerRef && calendarContainerRef.current) calendarContainerRef.current.id = 'valueFinal';
+    if (showCalendarInDialog) {
+      return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+        handlerClose: () => onCloseDateDialog('valueFinal'),
+        dialogSize: dialogSize,
+        onOpenChange: setShowCalendarValueFinal
+      }, getCalendar(valueFinal, calendarColorStyle, 'valueFinal'));
+    }
+    return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+      containerRef: wrapperBaseInputPeriodRef,
+      showButtonOpen: showButtonOpen,
+      inputDimensions: inputDimensions,
+      dropdownRef: el => {
+        dropdownCalendarContainer.current = el;
+      }
+    }, getCalendar(valueFinal, calendarColorStyle, 'valueFinal'));
+  };
+  const getPeriodOfDatesSelection = () => {
+    if (showCalendarInDialog) {
+      return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+        handlerClose: () => onCloseDateDialog('periodSelection'),
+        dialogSize: dialogSize,
+        onOpenChange: setShowPeriodSelection
+      }, getPeriodSelection(valuePeriodSelection, setPeriodDates));
+    }
+    return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+      containerRef: wrapperBaseInputPeriodRef,
+      showButtonOpen: showButtonOpen,
+      inputDimensions: inputDimensions,
+      dropdownRef: el => {
+        dropdownCalendarContainer.current = el;
+      }
+    }, getPeriodSelection(valuePeriodSelection, setPeriodDates));
+  };
+  (0, _react.useEffect)(() => {
+    var _document$getElementB;
+    window.addEventListener('resize', onScreenResize);
+    document.addEventListener('scroll', keepPositionCalendarByScroll);
+    (_document$getElementB = document.getElementById('modal-dialog-content')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.addEventListener('scroll', keepPositionCalendarByScroll);
+    if (inputContainerRef.current) onScreenResize();
+    if (inputInitialRef && inputInitialRef.current) inputInitialRef.current.id = idValueInitial;
+    if (inputFinalRef && inputFinalRef.current) inputFinalRef.current.id = idValueFinal;
+    return () => {
+      var _document$getElementB2;
+      window.removeEventListener('resize', onScreenResize);
+      document.removeEventListener('scroll', keepPositionCalendarByScroll);
+      (_document$getElementB2 = document.getElementById('modal-dialog-content')) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.removeEventListener('scroll', keepPositionCalendarByScroll);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('keydown', onKeyDownPress);
+    return () => {
+      document.removeEventListener('keydown', onKeyDownPress);
+    };
+  }, [showCalendarValueFinal, showCalendarValueInitial, showPeriodSelection, calendarContainerRef.current]);
+  (0, _react.useEffect)(() => {
+    if (valueFinal && valueInitial && (0, _moment.default)(valueFinal).isBefore((0, _moment.default)(valueInitial))) {
+      setValueInitial(valueFinal);
+      setValueFinal(valueInitial);
+    } else if (props.onChange) {
+      const initial = valueInitial ? valueInitial.format('YYYY-MM-DD') : '';
+      const final = valueFinal ? valueFinal.format('YYYY-MM-DD') : '';
+      props.onChange(undefined, '', {
+        initial,
+        final
+      });
+    }
+  }, [valueInitial, valueFinal]);
+  (0, _react.useEffect)(() => {
+    if (props.value && !((0, _moment.default)(props.value.initial).isSame(valueInitial) || (0, _moment.default)(props.value.final).isSame(valueFinal))) {
+      const {
+        initial: valueInitialProp,
+        final: valueFinalProp
+      } = props.value;
+      let newValueInitial;
+      let newValueFinal;
+      if ((0, _moment.default)(valueInitialProp, 'YYYY-MM-DD', true).isValid()) {
+        newValueInitial = (0, _moment.default)(valueInitialProp, 'YYYY-MM-DD');
+      }
+      if ((0, _moment.default)(valueFinalProp, 'YYYY-MM-DD', true).isValid()) {
+        newValueFinal = (0, _moment.default)(valueFinalProp, 'YYYY-MM-DD');
+      }
+      setValueInitial(newValueInitial);
+      setValueFinal(newValueFinal);
+    }
+  }, [props.value]);
+  if (onDenied && onDenied.unvisible) return null;
+  const component = () => /*#__PURE__*/_react.default.createElement("div", {
+    ref: wrapperBaseInputPeriodRef,
+    onBlur: onBlurWithoutWrapper,
+    className: "input-base-component datepicker-period-container"
+  }, props.label && /*#__PURE__*/_react.default.createElement("div", {
+    className: "labelcontainer"
+  }, /*#__PURE__*/_react.default.createElement(_textContent.default, {
+    required: props.required,
+    className: props.customClassForLabel,
+    labelUppercase: props.labelUppercase
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-content",
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "label ".concat(props.customClassForLabel, " ").concat(props.labelUppercase && ' -uppercase'),
+    style: {
+      alignSelf: 'center'
+    }
+  }, props.label, props.required && /*#__PURE__*/_react.default.createElement("span", {
+    className: "-requiredlabel"
+  }, "*"), !!hint && hintPosition === 'onLabelRight' && /*#__PURE__*/_react.default.createElement(_popover.default, {
+    theme: themePopover,
+    align: popoverAlign,
+    iconColor: "#03bde2",
+    customClass: "-hint",
+    style: {
+      margin: '0px 5px',
+      height: 'auto',
+      width: 20
+    }
+  }, hint))), /*#__PURE__*/_react.default.createElement(_textContent.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "periodpicker-component ".concat(helperBase.getInputWrapperClass(_objectSpread(_objectSpread({}, props), {}, {
+      value: !valueInitial ? '' : (0, _moment.default)(valueInitial).format('DD/MM/YYYY'),
+      disabled: shouldDisable()
+    }))),
+    ref: inputContainerRef
+  }, /*#__PURE__*/_react.default.createElement(_BaseMask.default, {
+    gridLayout: undefined,
+    permissionAttr: props.permissionAttr,
+    name: "valueInitial",
+    value: !valueInitial ? '' : (0, _moment.default)(valueInitial).format('DD/MM/YYYY'),
+    mask: "00/00/0000",
+    onComplete: e => {
+      setValue(e, e.target.value, true);
+    },
+    onFocus: onInputFocus,
+    onBlur: e => onInputBlur(e),
+    onChange: onInputChange,
+    inputRef: el => {
+      inputInitialRef.current = el;
+    },
+    handlerSetOnDenied: denied => {
+      setOnDenied(denied);
+    },
+    required: props.required
+  }), /*#__PURE__*/_react.default.createElement(_icons.default, {
+    name: "arrow_right",
+    customClass: "separation_icon"
+  }), /*#__PURE__*/_react.default.createElement(_BaseMask.default, {
+    gridLayout: undefined,
+    permissionAttr: props.permissionAttr,
+    name: "valueFinal",
+    value: !valueFinal ? '' : (0, _moment.default)(valueFinal).format('DD/MM/YYYY'),
+    mask: "00/00/0000",
+    onComplete: e => {
+      setValue(e, e.target.value, true);
+    },
+    onFocus: onInputFocus,
+    onBlur: e => onInputBlur(e),
+    onChange: onInputChange,
+    inputRef: el => {
+      inputFinalRef.current = el;
+    },
+    handlerSetOnDenied: denied => setOnDenied(denied),
+    required: props.required
+  }), getButtonOpen(), getButtonSelectPeriod()), showCalendarValueInitial && getCalendarInitial(), showCalendarValueFinal && getCalendarFinal(), showPeriodSelection && getPeriodOfDatesSelection(), /*#__PURE__*/_react.default.createElement(_hint.default, {
+    visible: !!hint && hintPosition === 'below',
+    customClass: "hint",
+    description: hint
+  }), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
+    messages: props.errorMessages
+  }));
+  return !gridLayout ? component() : /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
+    customClass: "-withinput",
+    cols: gridLayout
+  }, component());
 };
+var _default = exports.default = PeriodPicker;