linear-react-components-ui 1.1.25-rc.2 → 1.1.26-beta-1

package/lib/inputs/period/index.js

@@ -1,547 +1,351 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-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"));
-require("../../assets/styles/periodpicker.scss");
-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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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 => {
+import { j as r } from "../../chunks/jsx-runtime.CYK1ROHF.js";
+import { useId as ve, useState as Y, useRef as h, useEffect as V, useCallback as Ce } from "react";
+import s from "moment";
+import qe from "./PeriodList.js";
+import De from "../mask/BaseMask.js";
+import _ from "./Dropdown.js";
+import Ne from "../../calendar/base/index.js";
+import Ye from "../../buttons/Button.js";
+import G from "../../icons/index.js";
+import '../../assets/gridlayout.css';import '../../assets/button.css';import '../../assets/index24.css';/* empty css                           */
+import H from "./Dialog.js";
+import ze from "../../hint/index.js";
+/* empty css                               */
+import Ke from "../../gridlayout/GridCol.js";
+import { getInputWrapperClass as Ue } from "../base/helpers.js";
+import { ErrorMessage as We } from "../errorMessage/index.js";
+import pe from "../../textContent/index.js";
+import $e from "../../popover/index.js";
+const mn = (t) => {
   const {
-    showButtonOpen = true,
-    openOnFocus = true,
-    shouldCloseOnSelect = true,
-    calendarColorStyle,
-    showCalendarInDialog = false,
-    dialogSize = {
-      width: '350px',
-      height: '350px'
-    },
-    hint,
-    hintPosition = 'below',
-    themePopover = 'light',
-    popoverAlign = 'left',
-    gridLayout,
-    nameDateInitial = 'valueInitial',
-    nameDateFinal = 'valueFinal'
-  } = 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 = () => {
-    setInputDimensions(inputContainerRef?.current?.getBoundingClientRect());
-  };
-  const onBlurWithoutWrapper = event => {
-    const focusOnAnotherField = !wrapperBaseInputPeriodRef.current?.contains(event.relatedTarget);
-    if (!showCalendarInDialog && showCalendarValueInitial && focusOnAnotherField) {
-      setShowCalendarValueInitial(false);
-    }
-    if (!showCalendarInDialog && showCalendarValueFinal && focusOnAnotherField) {
-      setShowCalendarValueFinal(false);
-    }
-  };
-  const onKeyDownPress = event => {
-    const {
-      target
-    } = event;
-    const targetElement = target;
-    if (calendarContainerRef.current && event && event.key && event.key === 'Escape') {
-      event.preventDefault();
-      targetElement.focus();
-      if (showCalendarValueInitial) {
-        if (targetElement.id !== 'valueInitial') {
-          inputInitialRef.current?.focus();
-        }
-        setShowCalendarValueInitial(false);
-      }
-      if (showCalendarValueFinal) {
-        if (targetElement.id !== 'valueFinal') {
-          inputFinalRef.current?.focus();
-        }
-        setShowCalendarValueFinal(false);
-      }
-      if (showPeriodSelection) {
-        setShowPeriodSelection(false);
-        inputFinalRef.current?.focus();
-        setShowCalendarValueFinal(false);
-      }
+    showButtonOpen: P = !0,
+    openOnFocus: xe = !0,
+    shouldCloseOnSelect: J = !0,
+    calendarColorStyle: R,
+    showCalendarInDialog: b = !1,
+    dialogSize: T = { width: "350px", height: "350px" },
+    hint: E,
+    hintPosition: Q = "below",
+    themePopover: be = "light",
+    popoverAlign: Ie = "left",
+    gridLayout: X
+  } = t, Fe = ve(), we = ve(), [a, I] = Y(t.value && s(t.value.initial, "DD/MM/YYYY")), [o, F] = Y(t.value && s(t.value.final, "DD/MM/YYYY")), [Z, ee] = Y("week"), [v, C] = Y(!1), [p, c] = Y(!1), [y, x] = Y(!1), [A, q] = Y(), [D, ne] = Y(), [te, ie] = Y("valueInitial"), M = h(null), g = h(null), m = h(null), ye = h(null), N = h(null), Me = h(null), w = h(null);
+  h(null);
+  const u = h(null), f = h(null), z = () => {
+    var e;
+    q((e = g == null ? void 0 : g.current) == null ? void 0 : e.getBoundingClientRect());
+  }, je = (e) => {
+    var i;
+    const n = !((i = M.current) != null && i.contains(e.relatedTarget));
+    !b && v && n && C(!1), !b && p && n && c(!1);
+  }, le = (e) => {
+    var l, d, j, S, B, de, me;
+    const { target: n } = e, i = n;
+    if (f.current && e && e.key && e.key === "Escape" && (e.preventDefault(), i.focus(), v && (i.id !== "valueInitial" && ((l = m.current) == null || l.focus()), C(!1)), p && (i.id !== "valueFinal" && ((d = u.current) == null || d.focus()), c(!1)), y && (x(!1), (j = u.current) == null || j.focus(), c(!1))), f.current && e && e.key && e.key === "Tab") {
+      const Ve = (S = f.current) == null ? void 0 : S.getElementsByClassName("navbutton"), Te = ((B = f.current) == null ? void 0 : B.getElementsByClassName("-selectedday"))[0].firstChild, $ = Array.from([...Ve, Te]), ge = $[0], Ae = $[$.length - 1], he = f.current.id === "valueInitial";
+      !e.shiftKey && v && document.activeElement === m.current && (e.preventDefault(), ge.focus()), e.shiftKey && he && document.activeElement === ge && (e.preventDefault(), (de = m.current) == null || de.focus()), !e.shiftKey && he && document.activeElement === Ae && (e.preventDefault(), (me = u.current) == null || me.focus());
     }
-    if (calendarContainerRef.current && event && event.key && event.key === 'Tab') {
-      const buttonForNavigateCalendar = calendarContainerRef.current?.getElementsByClassName('navbutton');
-      const datePicked = calendarContainerRef.current?.getElementsByClassName('-selectedday');
-      const buttonDatePicked = datePicked[0].firstChild;
-      const buttonsForFocus = Array.from([...buttonForNavigateCalendar, buttonDatePicked]);
-      const firstElement = buttonsForFocus[0];
-      const lastElement = buttonsForFocus[buttonsForFocus.length - 1];
-      const calendarOpenedIsInitial = calendarContainerRef.current.id === 'valueInitial';
-      if (!event.shiftKey && showCalendarValueInitial && document.activeElement === inputInitialRef.current) {
-        event.preventDefault();
-        firstElement.focus();
-      }
-      if (event.shiftKey && calendarOpenedIsInitial && document.activeElement === firstElement) {
-        event.preventDefault();
-        inputInitialRef.current?.focus();
-      }
-      if (!event.shiftKey && calendarOpenedIsInitial && document.activeElement === lastElement) {
-        event.preventDefault();
-        inputFinalRef.current?.focus();
-      }
-    }
-    event.stopPropagation();
+    e.stopPropagation();
+  }, k = () => {
+    var i;
+    const e = (i = g.current) == null ? void 0 : i.getBoundingClientRect(), n = e && e.bottom;
+    w && w.current && e && (w.current.style.top = String(n).concat("px"));
   };
-  const keepPositionCalendarByScroll = () => {
-    const inputDateDimensions = inputContainerRef.current?.getBoundingClientRect();
-    const positionTop = inputDateDimensions && inputDateDimensions.bottom;
-    if (dropdownCalendarContainer && dropdownCalendarContainer.current && inputDateDimensions) {
-      dropdownCalendarContainer.current.style.top = String(positionTop).concat('px');
-    }
-  };
-  (0, _react.useEffect)(() => {
-    window.addEventListener('resize', onScreenResize);
-    document.addEventListener('scroll', keepPositionCalendarByScroll);
-    document.getElementById('modal-dialog-content')?.addEventListener('scroll', keepPositionCalendarByScroll);
-    if (inputContainerRef.current) onScreenResize();
-    if (inputInitialRef && inputInitialRef.current) inputInitialRef.current.id = idValueInitial;
-    if (inputFinalRef && inputFinalRef.current) inputFinalRef.current.id = idValueFinal;
-    return () => {
-      window.removeEventListener('resize', onScreenResize);
-      document.removeEventListener('scroll', keepPositionCalendarByScroll);
-      document.getElementById('modal-dialog-content')?.removeEventListener('scroll', keepPositionCalendarByScroll);
+  V(() => {
+    var e;
+    return window.addEventListener("resize", z), document.addEventListener("scroll", k), (e = document.getElementById("modal-dialog-content")) == null || e.addEventListener("scroll", k), g.current && z(), m && m.current && (m.current.id = Fe), u && u.current && (u.current.id = we), () => {
+      var n;
+      window.removeEventListener("resize", z), document.removeEventListener("scroll", k), (n = document.getElementById("modal-dialog-content")) == null || n.removeEventListener("scroll", k);
     };
-  }, []);
-  (0, _react.useEffect)(() => {
-    document.addEventListener('keydown', onKeyDownPress);
-    return () => {
-      document.removeEventListener('keydown', onKeyDownPress);
-    };
-  }, [showCalendarValueFinal, showCalendarValueInitial, showPeriodSelection, calendarContainerRef.current]);
-  (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]);
-  const openCalendar = calendarName => {
-    if (calendarName === 'valueInitial') {
-      setCurrentTypeDate('valueInitial');
-      setShowCalendarValueFinal(false);
-      if (!showCalendarValueInitial) {
-        inputInitialRef.current?.focus();
-        if (showCalendarInDialog) {
-          setTimeout(() => {
-            currentDateButtonRef.current?.focus();
-          }, 100);
-        }
-        setShowCalendarValueInitial(true);
-      }
-    }
-    if (calendarName === 'valueFinal') {
-      setCurrentTypeDate('valueFinal');
-      setShowCalendarValueInitial(false);
-      if (!showCalendarValueFinal) {
-        inputFinalRef.current?.focus();
-        if (showCalendarInDialog) {
-          setTimeout(() => {
-            currentDateButtonRef.current?.focus();
-          }, 100);
-        }
-        setShowCalendarValueFinal(true);
-      }
-    }
-    if (inputContainerRef.current) {
-      setInputDimensions(inputContainerRef.current.getBoundingClientRect());
-    }
-  };
-  const closeCalendar = calendarName => {
-    if (calendarName === 'valueInitial') {
-      inputInitialRef.current?.focus();
+  }, []), V(() => (document.addEventListener("keydown", le), () => {
+    document.removeEventListener("keydown", le);
+  }), [
+    p,
+    v,
+    y,
+    f.current
+  ]), V(() => {
+    if (o && a && s(o).isBefore(s(a)))
+      I(o), F(a);
+    else if (t.onChange) {
+      const e = a ? a.format("YYYY-MM-DD") : "", n = o ? o.format("YYYY-MM-DD") : "";
+      t.onChange(void 0, "", { initial: e, final: n });
     }
-    if (calendarName === 'valueFinal') {
-      inputFinalRef.current?.focus();
+  }, [a, o]), V(() => {
+    if (t.value && !(s(t.value.initial).isSame(a) || s(t.value.final).isSame(o))) {
+      const { initial: e, final: n } = t.value;
+      let i, l;
+      s(e, "YYYY-MM-DD", !0).isValid() && (i = s(e, "YYYY-MM-DD")), s(n, "YYYY-MM-DD", !0).isValid() && (l = s(n, "YYYY-MM-DD")), I(i), F(l);
     }
-    setShowCalendarValueInitial(false);
-    setShowCalendarValueFinal(false);
-  };
-  const onCloseDateDialog = calendarName => {
+  }, [t.value]);
+  const re = (e) => {
+    var n, i;
+    e === "valueInitial" && (ie("valueInitial"), c(!1), v || ((n = m.current) == null || n.focus(), b && setTimeout(() => {
+      var l;
+      (l = N.current) == null || l.focus();
+    }, 100), C(!0))), e === "valueFinal" && (ie("valueFinal"), C(!1), p || ((i = u.current) == null || i.focus(), b && setTimeout(() => {
+      var l;
+      (l = N.current) == null || l.focus();
+    }, 100), c(!0))), g.current && q(g.current.getBoundingClientRect());
+  }, Se = (e) => {
+    var n, i;
+    e === "valueInitial" && ((n = m.current) == null || n.focus()), e === "valueFinal" && ((i = u.current) == null || i.focus()), C(!1), c(!1);
+  }, K = (e) => {
     setTimeout(() => {
-      if (calendarName === 'valueInitial') {
-        inputInitialRef.current?.focus();
-        setShowCalendarValueInitial(false);
-      }
-      if (calendarName === 'valueFinal') {
-        inputFinalRef.current?.focus();
-        setShowCalendarValueFinal(false);
-      }
-      if (calendarName === 'periodSelection') {
-        setShowPeriodSelection(false);
-        inputFinalRef.current?.focus();
-        setShowCalendarValueFinal(false);
-      }
+      var n, i, l;
+      e === "valueInitial" && ((n = m.current) == null || n.focus(), C(!1)), e === "valueFinal" && ((i = u.current) == null || i.focus(), c(!1)), e === "periodSelection" && (x(!1), (l = u.current) == null || l.focus(), c(!1));
     }, 100);
-  };
-  const onInputFocus = e => {
-    const {
-      name
-    } = e.target;
-    if (openOnFocus) openCalendar(name);
-    if (props.onFocus) props.onFocus(e);
-  };
-  const onInputBlur = e => {
-    if (props.onBlur) props.onBlur(e);
-  };
-  const onInputChange = (event, value) => {
-    if (event) {
-      const {
-        name: changingAux
-      } = event.target;
-      if (value && value.replace(/\D/g, '').trim().length !== 0) {
-        if (changingAux === nameDateInitial) {
-          setValueInitial(undefined);
-        } else {
-          setValueFinal(undefined);
-        }
-      }
+  }, ae = (e) => {
+    const { name: n } = e.target;
+    xe && re(n), t.onFocus && t.onFocus(e);
+  }, oe = (e) => {
+    t.onBlur && t.onBlur(e);
+  }, se = (e, n) => {
+    if (e) {
+      const { name: i } = e.target;
+      n && n.replace(/\D/g, "").trim().length !== 0 && (i === "valueInitial" ? I(void 0) : F(void 0));
     }
-  };
-  const onDateChange = date => {
-    if (props.onChange) {
-      const initial = date.initial ? date.initial.format('YYYY-MM-DD') : '';
-      const final = date.final ? date.final.format('YYYY-MM-DD') : '';
-      props.onChange(undefined, '', {
-        initial,
-        final
-      });
-    }
-  };
-  const setValue = function (event, value) {
-    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.current?.focus();
-    if (showCalendarValueFinal) inputFinalRef.current?.focus();
-    if (valueDateName === nameDateFinal && valueInitial && dateObj.isBefore(valueInitial)) {
-      setValueInitial(dateObj);
-      setValueFinal(valueInitial);
-      onDateChange({
-        initial: dateObj,
-        final: valueInitial
-      });
-    } else if (valueDateName === nameDateInitial && valueFinal && dateObj.isAfter(valueFinal)) {
-      setValueInitial(valueFinal);
-      setValueFinal(dateObj);
-      onDateChange({
-        initial: valueFinal,
-        final: dateObj
-      });
-    } else if (valueDateName === nameDateInitial) {
-      setValueInitial(dateObj);
-      onDateChange({
-        initial: dateObj,
-        final: valueFinal
-      });
-    } else {
-      setValueFinal(dateObj);
-      onDateChange({
-        initial: valueInitial,
-        final: dateObj
-      });
-    }
-    if (valueDateName === nameDateInitial && !valueFinal && shouldOpenDropdown) {
-      inputFinalRef.current?.focus();
-      setTimeout(() => setShowCalendarValueFinal(true), 100);
+  }, O = (e) => {
+    if (t.onChange) {
+      const n = e.initial ? e.initial.format("YYYY-MM-DD") : "", i = e.final ? e.final.format("YYYY-MM-DD") : "";
+      t.onChange(void 0, "", { initial: n, final: i });
     }
-    if (shouldCloseOnSelect) {
-      setShowCalendarValueInitial(false);
-      setShowCalendarValueFinal(false);
-    }
-  };
-  const shouldDisable = () => {
-    const {
-      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(),
+  }, U = (e, n, i = !0) => {
+    var j, S, B;
+    const l = e ? e.target.name : "", d = s(n, "DD/MM/YYYY");
+    v && ((j = m.current) == null || j.focus()), p && ((S = u.current) == null || S.focus()), l === "valueFinal" && a && d.isBefore(a) ? (I(d), F(a), O({ initial: d, final: a })) : l === "valueInitial" && o && d.isAfter(o) ? (I(o), F(d), O({ initial: o, final: d })) : l === "valueInitial" ? (I(d), O({ initial: d, final: o })) : (F(d), O({ initial: a, final: d })), l === "valueInitial" && !o && i && ((B = u.current) == null || B.focus(), setTimeout(() => c(!0), 100)), J && (C(!1), c(!1));
+  }, W = () => {
+    const { disabled: e } = t;
+    return e || D && (D.disabled || D.hideContent);
+  }, Be = Ce(() => P ? /* @__PURE__ */ r.jsx(
+    Ye,
+    {
+      boxShadow: !1,
+      disabled: W(),
       customClass: "calendar-button",
-      icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
-        name: "calendar"
-      }),
+      icon: /* @__PURE__ */ r.jsx(G, { name: "calendar" }),
       onClick: () => {
-        if (showCalendarValueFinal || showCalendarValueInitial) {
-          closeCalendar(currentTypeDate);
-        } else {
-          openCalendar(currentTypeDate);
-        }
+        p || v ? Se(te) : re(te);
       },
       tabIndex: -1,
-      targetRef: ref => {
-        buttonOpenRef.current = ref;
+      targetRef: (e) => {
+        ye.current = e;
       }
-    });
-  }, [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 = () => {
-    setShowPeriodSelection(false);
-    inputFinalRef.current?.focus();
-    setShowCalendarValueFinal(false);
-  };
-  const getButtonSelectPeriod = (0, _react.useCallback)(() => {
-    return /*#__PURE__*/_react.default.createElement(_buttons.default, {
-      key: "button-select-period",
-      disabled: shouldDisable(),
+    },
+    "button-open"
+  ) : null, [p, v]), ue = (e, n) => /* @__PURE__ */ r.jsx(qe, { selected: e, handleOnSelect: n }), Pe = () => {
+    c(!1), C(!1), x(!0), g.current && q(g.current.getBoundingClientRect());
+  }, Re = () => {
+    var e;
+    x(!1), (e = u.current) == null || e.focus(), c(!1);
+  }, Ee = Ce(() => /* @__PURE__ */ r.jsx(
+    Ye,
+    {
+      disabled: W(),
       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;
+      icon: /* @__PURE__ */ r.jsx(G, { name: "more1" }),
+      onBlur: () => setTimeout(() => x(!1), 100),
+      onClick: () => y ? Re() : Pe(),
+      targetRef: (e) => {
+        Me.current = e;
       }
-    });
-  }, [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) => {
-    if (selected === 'custom') {
-      inputInitialRef.current?.focus();
-      setValuePeriodSelection(selected);
-      setShowPeriodSelection(false);
-      return;
+    "button-select-period"
+  ), [y]), L = (e, n, i) => /* @__PURE__ */ r.jsx(
+    Ne,
+    {
+      colorStyle: n,
+      currentDate: e !== void 0 ? s(e) : s(),
+      calendarContainer: (l) => {
+        f.current = l;
+      },
+      onDateChange: (l) => U({ target: { name: i } }, l),
+      currentDateButton: (l) => N.current = l
     }
-    setValuePeriodSelection(selected);
-    if (dates) {
-      setValueInitial(dates[0]);
-      setValueFinal(dates[1]);
+  ), ce = (e, n) => {
+    var i, l;
+    if (e === "custom") {
+      (i = m.current) == null || i.focus(), ee(e), x(!1);
+      return;
     }
-    if (shouldCloseOnSelect) {
-      setShowPeriodSelection(false);
+    ee(e), n && (I(n[0]), F(n[1])), J && x(!1), (l = u.current) == null || l.focus(), c(!1);
+  }, ke = () => D && D.readOnly ? null : (f && f.current && (f.current.id = "valueInitial"), b ? /* @__PURE__ */ r.jsx(
+    H,
+    {
+      handlerClose: () => K("valueInitial"),
+      dialogSize: T,
+      onOpenChange: C,
+      children: L(a, R, "valueInitial")
     }
-    inputFinalRef.current?.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, nameDateInitial));
+  ) : /* @__PURE__ */ r.jsx(
+    _,
+    {
+      containerRef: M,
+      showButtonOpen: P,
+      inputDimensions: A,
+      dropdownRef: (e) => {
+        w.current = e;
+      },
+      children: L(a, R, "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, nameDateFinal));
+  )), Oe = () => D && D.readOnly ? null : (f && f.current && (f.current.id = "valueFinal"), b ? /* @__PURE__ */ r.jsx(
+    H,
+    {
+      handlerClose: () => K("valueFinal"),
+      dialogSize: T,
+      onOpenChange: c,
+      children: L(o, R, "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));
+  ) : /* @__PURE__ */ r.jsx(
+    _,
+    {
+      containerRef: M,
+      showButtonOpen: P,
+      inputDimensions: A,
+      dropdownRef: (e) => {
+        w.current = e;
+      },
+      children: L(o, R, "valueFinal")
     }
-    return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-      containerRef: wrapperBaseInputPeriodRef,
-      showButtonOpen: showButtonOpen,
-      inputDimensions: inputDimensions,
-      dropdownRef: el => {
-        dropdownCalendarContainer.current = el;
-      }
-    }, getPeriodSelection(valuePeriodSelection, setPeriodDates));
-  };
-  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'
+  )), Le = () => b ? /* @__PURE__ */ r.jsx(
+    H,
+    {
+      handlerClose: () => K("periodSelection"),
+      dialogSize: T,
+      onOpenChange: x,
+      children: ue(Z, ce)
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `label ${props.customClassForLabel} ${props.labelUppercase && ' -uppercase'}`,
-    style: {
-      alignSelf: 'center'
+  ) : /* @__PURE__ */ r.jsx(
+    _,
+    {
+      containerRef: M,
+      showButtonOpen: P,
+      inputDimensions: A,
+      dropdownRef: (e) => {
+        w.current = e;
+      },
+      children: ue(Z, ce)
     }
-  }, 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
+  );
+  if (D && D.unvisible) return null;
+  const fe = () => /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      ref: M,
+      onBlur: je,
+      className: "input-base-component datepicker-period-container",
+      children: [
+        t.label && /* @__PURE__ */ r.jsxs("div", { className: "labelcontainer", children: [
+          /* @__PURE__ */ r.jsx(
+            pe,
+            {
+              required: t.required,
+              className: t.customClassForLabel,
+              labelUppercase: t.labelUppercase
+            }
+          ),
+          /* @__PURE__ */ r.jsx(
+            "div",
+            {
+              className: "text-content",
+              style: { display: "flex" },
+              children: /* @__PURE__ */ r.jsxs(
+                "div",
+                {
+                  className: `label ${t.customClassForLabel} ${t.labelUppercase && " -uppercase"}`,
+                  style: { alignSelf: "center" },
+                  children: [
+                    t.label,
+                    t.required && /* @__PURE__ */ r.jsx("span", { className: "-requiredlabel", children: "*" }),
+                    !!E && Q === "onLabelRight" && /* @__PURE__ */ r.jsx(
+                      $e,
+                      {
+                        theme: be,
+                        align: Ie,
+                        iconColor: "#03bde2",
+                        customClass: "-hint",
+                        style: { margin: "0px 5px", height: "auto", width: 20 },
+                        children: E
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ r.jsx(pe, {})
+        ] }),
+        /* @__PURE__ */ r.jsxs(
+          "div",
+          {
+            className: `periodpicker-component ${Ue({
+              ...t,
+              value: a ? s(a).format("DD/MM/YYYY") : "",
+              disabled: W()
+            })}`,
+            ref: g,
+            children: [
+              /* @__PURE__ */ r.jsx(
+                De,
+                {
+                  gridLayout: void 0,
+                  permissionAttr: t.permissionAttr,
+                  name: "valueInitial",
+                  value: a ? s(a).format("DD/MM/YYYY") : "",
+                  mask: "00/00/0000",
+                  onComplete: (e) => {
+                    U(e, e.target.value, !0);
+                  },
+                  onFocus: ae,
+                  onBlur: (e) => oe(e),
+                  onChange: se,
+                  inputRef: (e) => {
+                    m.current = e;
+                  },
+                  handlerSetOnDenied: (e) => {
+                    ne(e);
+                  },
+                  required: t.required
+                }
+              ),
+              /* @__PURE__ */ r.jsx(G, { name: "arrow_right", customClass: "separation_icon" }),
+              /* @__PURE__ */ r.jsx(
+                De,
+                {
+                  gridLayout: void 0,
+                  permissionAttr: t.permissionAttr,
+                  name: "valueFinal",
+                  value: o ? s(o).format("DD/MM/YYYY") : "",
+                  mask: "00/00/0000",
+                  onComplete: (e) => {
+                    U(e, e.target.value, !0);
+                  },
+                  onFocus: ae,
+                  onBlur: (e) => oe(e),
+                  onChange: se,
+                  inputRef: (e) => {
+                    u.current = e;
+                  },
+                  handlerSetOnDenied: (e) => ne(e),
+                  required: t.required
+                }
+              ),
+              Be(),
+              Ee()
+            ]
+          }
+        ),
+        v && ke(),
+        p && Oe(),
+        y && Le(),
+        /* @__PURE__ */ r.jsx(ze, { visible: !!E && Q === "below", customClass: "hint", description: E }),
+        /* @__PURE__ */ r.jsx(We, { messages: t.errorMessages })
+      ]
     }
-  }, hint))), /*#__PURE__*/_react.default.createElement(_textContent.default, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: `periodpicker-component ${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());
+  );
+  return X ? /* @__PURE__ */ r.jsx(Ke, { customClass: "-withinput", cols: X, children: fe() }) : fe();
+};
+export {
+  mn as default
 };
-var _default = exports.default = PeriodPicker;