linear-react-components-ui 1.1.26-beta.16 → 1.1.26-beta.18

package/lib/inputs2/date/dateperiodfield/index.js

@@ -1,523 +1,593 @@
-import { jsx as S, jsxs as Xe } from "react/jsx-runtime";
-import { c as va } from "../../../_virtual/compiler-runtime.js";
-import I from "../../../_virtual/lodash.js";
-import "../../../node_modules/imask/esm/index.js";
-import "../../../node_modules/imask/esm/controls/input.js";
-import "../../../node_modules/imask/esm/masked/factory.js";
-import "../../../node_modules/imask/esm/controls/mask-element.js";
-import "../../../node_modules/imask/esm/controls/html-input-mask-element.js";
-import "../../../node_modules/imask/esm/controls/html-mask-element.js";
-import "../../../node_modules/imask/esm/controls/html-contenteditable-mask-element.js";
-import "../../../node_modules/imask/esm/controls/input-history.js";
-import "../../../node_modules/react-imask/esm/input.js";
-import la from "../../../node_modules/react-imask/esm/hook.js";
-import "../../../node_modules/react-imask/esm/mixin.js";
-import { forwardRef as _a, useState as Qe, useRef as X, useEffect as Ca, Fragment as ra } from "react";
-import { createPortal as Ia } from "react-dom";
-import o from "../../../node_modules/moment/dist/moment.js";
-import wa from "../../../hint/index.js";
-import pa from "../../../icons/index.js";
-import '../../../assets/styles/gridlayout.css';/* empty css                                     */
-import Da from "../../../gridlayout/GridCol.js";
-import Va from "../../../tooltip/index.js";
-import { mergeRefs as oa } from "../../../form2/helpers.js";
-import { actionsOnPermissionDenied as Pa } from "../../../permissionValidations.js";
-import { Keys as w } from "../types.js";
-import * as Ra from "../base/index.js";
-import { Label as Ba, Root as xa, Container as Ma, Input as Aa } from "../base/index.js";
-import { options as Na, TOKEN_ISO_FORMAT as d, TOKEN_PTBR_FORMAT as V, TOKEN_MASK as sa, NAVIGATION_KEYS as Fa } from "../helpers.js";
-import { Triggers as Ka } from "./triggers.js";
-import { CalendarBox as Ta } from "./calendarbox.js";
-import { DatePeriodFieldContext as La } from "./context.js";
-const Wa = _a((t) => {
-  const e = va.c(197), {
-    label: P,
-    errors: M,
-    initialName: xt,
-    finalName: Mt,
-    onDeniedActions: At,
-    permissionAttr: Nt,
-    customClass: Ft,
-    customClassLabel: Kt,
-    customClassWrapper: Tt,
-    customClassInputContainer: Lt,
-    labelUppercase: Wt,
-    undigitable: zt,
-    skeletonize: Et,
-    hintPosition: Ut,
-    gridLayout: qt,
-    themePopover: jt,
-    popoverAlign: $t,
-    showCalendarButton: Gt,
-    textAlign: Ht,
-    openCalendarOnFocus: Yt,
-    shouldCloseOnSelect: Jt,
-    showPredefinedPeriodsButton: Qt,
-    showClearDateButton: Xt,
-    placeholder: Zt,
-    returnValueType: ea,
-    tooltip: Ze,
-    tooltipPosition: et,
-    tooltipWidth: tt,
-    ...ta
-  } = t, f = xt === void 0 ? "inicial" : xt, m = Mt === void 0 ? "final" : Mt, at = At === void 0 ? void 0 : At, nt = Nt === void 0 ? void 0 : Nt, Z = Ft === void 0 ? "" : Ft, it = Kt === void 0 ? "" : Kt, ca = Tt === void 0 ? "" : Tt, da = Lt === void 0 ? "" : Lt, lt = Wt === void 0 ? !1 : Wt, g = zt === void 0 ? !1 : zt, c = Et === void 0 ? !1 : Et, A = Ut === void 0 ? "below" : Ut, fa = qt === void 0 ? void 0 : qt, ot = jt === void 0 ? "light" : jt, st = $t === void 0 ? "left" : $t, rt = Gt === void 0 ? !0 : Gt, ee = Ht === void 0 ? "left" : Ht, N = Yt === void 0 ? !0 : Yt, te = Jt === void 0 ? !0 : Jt, ct = Qt === void 0 ? !0 : Qt, dt = Xt === void 0 ? !0 : Xt, ae = Zt === void 0 ? V : Zt, R = ea === void 0 ? "default" : ea;
-  let ne;
-  e[0] !== at || e[1] !== nt ? (ne = at || Pa(Na, nt), e[0] = at, e[1] = nt, e[2] = ne) : ne = e[2];
-  const ft = ne, {
-    hideContent: ie,
-    unvisible: ma
-  } = ft;
-  let le;
-  e[3] === Symbol.for("react.memo_cache_sentinel") ? (le = {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactImask = require("react-imask");
+var _reactDom = require("react-dom");
+var _moment = _interopRequireDefault(require("moment"));
+var _hint = _interopRequireDefault(require("../../../hint"));
+var _icons = _interopRequireDefault(require("../../../icons"));
+var _gridlayout = _interopRequireDefault(require("../../../gridlayout"));
+var _tooltip = require("../../../tooltip");
+var _helpers = require("../../../form2/helpers");
+var _permissionValidations = require("../../../permissionValidations");
+var _types = require("../types");
+var BaseDate = _interopRequireWildcard(require("../base"));
+var _helpers2 = require("../helpers");
+var _triggers = require("./triggers");
+var _calendarbox = require("./calendarbox");
+var _context = require("./context");
+const _excluded = ["label", "errors", "initialName", "finalName", "onDeniedActions", "permissionAttr", "customClass", "customClassLabel", "customClassWrapper", "customClassInputContainer", "labelUppercase", "undigitable", "skeletonize", "hintPosition", "gridLayout", "themePopover", "popoverAlign", "showCalendarButton", "textAlign", "openCalendarOnFocus", "shouldCloseOnSelect", "showPredefinedPeriodsButton", "showClearDateButton", "placeholder", "returnValueType", "tooltip", "tooltipPosition", "tooltipWidth"];
+/* eslint-disable @typescript-eslint/no-use-before-define */
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const Input = exports.Input = /*#__PURE__*/_react.default.forwardRef((props, __) => {
+  const {
+      label,
+      errors,
+      initialName = 'inicial',
+      finalName = 'final',
+      onDeniedActions = undefined,
+      permissionAttr = undefined,
+      customClass = '',
+      customClassLabel = '',
+      customClassWrapper = '',
+      customClassInputContainer = '',
+      labelUppercase = false,
+      undigitable = false,
+      skeletonize = false,
+      hintPosition = 'below',
+      gridLayout = undefined,
+      themePopover = 'light',
+      popoverAlign = 'left',
+      showCalendarButton = true,
+      textAlign = 'left',
+      openCalendarOnFocus = true,
+      shouldCloseOnSelect = true,
+      showPredefinedPeriodsButton = true,
+      showClearDateButton = true,
+      placeholder = _helpers2.TOKEN_PTBR_FORMAT,
+      returnValueType = 'default',
+      tooltip,
+      tooltipPosition,
+      tooltipWidth
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  const onDenied = _react.default.useMemo(() => {
+    return onDeniedActions || (0, _permissionValidations.actionsOnPermissionDenied)(_helpers2.options, permissionAttr);
+  }, [onDeniedActions, permissionAttr]);
+  const {
+    hideContent,
+    unvisible
+  } = onDenied;
+  const [selectedDate, setSelectedDate] = _react.default.useState({
     inicial: null,
     final: null
-  }, e[3] = le) : le = e[3];
-  const [l, F] = Qe(le), [s, aa] = Qe(!1);
-  let oe;
-  e[4] === Symbol.for("react.memo_cache_sentinel") ? (oe = o().format(d), e[4] = oe) : oe = e[4];
-  const [_, ua] = Qe(oe);
-  let se;
-  e[5] === Symbol.for("react.memo_cache_sentinel") ? (se = o(), e[5] = se) : se = e[5];
-  const [mt, C] = Qe(se), ha = X(null), na = X(null), H = X(null), ut = X(null), ia = X(null);
-  let re;
-  e[6] !== f || e[7] !== t.name ? (re = String(t.name).concat(".").concat(f), e[6] = f, e[7] = t.name, e[8] = re) : re = e[8];
-  const k = re;
-  let ce;
-  e[9] !== m || e[10] !== t.name ? (ce = String(t.name).concat(".").concat(m), e[9] = m, e[10] = t.name, e[11] = ce) : ce = e[11];
-  const O = ce;
-  let de;
-  e[12] === Symbol.for("react.memo_cache_sentinel") ? (de = {
-    mask: sa,
-    lazy: !1,
-    placeholderChar: "_"
-  }, e[12] = de) : de = e[12];
-  let fe;
-  e[13] !== l.inicial ? (fe = l.inicial?.format(V), e[13] = l.inicial, e[14] = fe) : fe = e[14];
+  });
+  const [calendarBoxOpen, setCalendarBoxOpen] = _react.default.useState(false);
+  const [activeDescendant, setActiveDescendant] = _react.default.useState((0, _moment.default)().format(_helpers2.TOKEN_ISO_FORMAT));
+  const [calendarDisplayDate, setCalendarDisplayDate] = _react.default.useState((0, _moment.default)());
+  const calendarRef = _react.default.useRef(null);
+  const inputRootRef = _react.default.useRef(null);
+  const finalInputRef = _react.default.useRef(null);
+  const initialInputRef = _react.default.useRef(null);
+  const dateContainerRef = _react.default.useRef(null);
+  const initialInputName = _react.default.useMemo(() => String(props.name).concat('.').concat(initialName), [props.name, initialName]);
+  const finalInputName = _react.default.useMemo(() => String(props.name).concat('.').concat(finalName), [props.name, finalName]);
   const {
-    value: ba,
-    setValue: p,
-    unmaskedValue: ht
-  } = la(de, {
-    ref: ut,
-    defaultValue: fe,
-    onComplete: (a) => {
-      const i = o(a, V);
-      i.isValid() && B({
-        date: i,
-        inputType: "initial",
-        typing: !0
-      });
+    value: initialMaskedValue,
+    setValue: setInitialMaskValue,
+    unmaskedValue: initialUnmaskedValue
+  } = (0, _reactImask.useIMask)({
+    mask: _helpers2.TOKEN_MASK,
+    lazy: false,
+    placeholderChar: '_'
+  }, {
+    ref: initialInputRef,
+    defaultValue: selectedDate.inicial?.format(_helpers2.TOKEN_PTBR_FORMAT),
+    onComplete: value => {
+      const date = (0, _moment.default)(value, _helpers2.TOKEN_PTBR_FORMAT);
+      if (date.isValid()) {
+        handleChangeUpdateDateState({
+          date,
+          inputType: 'initial',
+          typing: true
+        });
+      }
     }
   });
-  let me;
-  e[15] === Symbol.for("react.memo_cache_sentinel") ? (me = {
-    mask: sa,
-    lazy: !1,
-    placeholderChar: "_"
-  }, e[15] = me) : me = e[15];
-  let ue;
-  e[16] !== l.final ? (ue = l.final?.format(V), e[16] = l.final, e[17] = ue) : ue = e[17];
   const {
-    value: bt,
-    setValue: D,
-    unmaskedValue: yt
-  } = la(me, {
-    ref: H,
-    defaultValue: ue,
-    onComplete: (a) => {
-      const i = o(a, V);
-      i.isValid() && B({
-        date: i,
-        inputType: "final",
-        typing: !0
-      });
+    value: finalMaskedValue,
+    setValue: setFinalMaskValue,
+    unmaskedValue: finalUnmaskedValue
+  } = (0, _reactImask.useIMask)({
+    mask: _helpers2.TOKEN_MASK,
+    lazy: false,
+    placeholderChar: '_'
+  }, {
+    ref: finalInputRef,
+    defaultValue: selectedDate.final?.format(_helpers2.TOKEN_PTBR_FORMAT),
+    onComplete: value => {
+      const date = (0, _moment.default)(value, _helpers2.TOKEN_PTBR_FORMAT);
+      if (date.isValid()) {
+        handleChangeUpdateDateState({
+          date,
+          inputType: 'final',
+          typing: true
+        });
+      }
     }
   });
-  let he;
-  e[18] !== t.label ? (he = I.isEmpty(t?.label), e[18] = t.label, e[19] = he) : he = e[19];
-  const gt = !he, r = !!(t.readOnly || ft.readOnly), b = !!(t.disabled || ft.disabled), K = !!t.hint?.length, v = !!M?.length;
-  let be;
-  e[20] === Symbol.for("react.memo_cache_sentinel") ? (be = (a) => F(a), e[20] = be) : be = e[20];
-  const kt = be;
-  let ye;
-  e[21] === Symbol.for("react.memo_cache_sentinel") ? (ye = (a) => aa(a), e[21] = ye) : ye = e[21];
-  const u = ye;
-  let ge;
-  e[22] === Symbol.for("react.memo_cache_sentinel") ? (ge = (a) => ua(a), e[22] = ge) : ge = e[22];
-  const h = ge;
-  let ke;
-  e[23] === Symbol.for("react.memo_cache_sentinel") ? (ke = (a) => C(a), e[23] = ke) : ke = e[23];
-  const Ot = ke;
-  let Oe;
-  e[24] === Symbol.for("react.memo_cache_sentinel") ? (Oe = () => C(za), e[24] = Oe) : Oe = e[24];
-  const T = Oe;
-  let Se;
-  e[25] === Symbol.for("react.memo_cache_sentinel") ? (Se = () => C(Ea), e[25] = Se) : Se = e[25];
-  const L = Se;
-  let ve;
-  e[26] !== h ? (ve = (a) => {
-    C((i) => {
-      const n = i.clone().add(a, "day");
-      return h(n.format(d)), n;
+  const hasLabel = !_lodash.default.isEmpty(props?.label);
+  const isReadOnly = Boolean(props.readOnly || onDenied.readOnly);
+  const isDisabled = Boolean(props.disabled || onDenied.disabled);
+  const hasHintMessages = Boolean(props.hint?.length);
+  const hasValidationErrors = Boolean(errors?.length);
+  const handleChangeSelectedDate = _react.default.useCallback(object => setSelectedDate(object), []);
+  const handleChangeCalendarBoxState = _react.default.useCallback(value => setCalendarBoxOpen(value), []);
+  const handleChangeActiveDescendant = _react.default.useCallback(value => setActiveDescendant(value), []);
+  const handleChangeCalendarDisplayDate = _react.default.useCallback(value => setCalendarDisplayDate(value), []);
+  const handleChangePreviousMonth = _react.default.useCallback(() => setCalendarDisplayDate(prevDisplayDate => prevDisplayDate.clone().subtract(1, 'month')), []);
+  const handleChangeNextMonth = _react.default.useCallback(() => setCalendarDisplayDate(prevDisplayDate => prevDisplayDate.clone().add(1, 'month')), []);
+  const handleNavigateWithDays = _react.default.useCallback(offset => {
+    setCalendarDisplayDate(prevDisplayDate => {
+      const daySelected = prevDisplayDate.clone().add(offset, 'day');
+      handleChangeActiveDescendant(daySelected.format(_helpers2.TOKEN_ISO_FORMAT));
+      return daySelected;
     });
-  }, e[26] = h, e[27] = ve) : ve = e[27];
-  const W = ve;
-  let _e;
-  e[28] !== h ? (_e = (a) => {
-    C((i) => {
-      let n = i;
-      return a === "end" && (n = i.clone().endOf("week")), a === "start" && (n = i.clone().startOf("week")), h(n.format(d)), n;
+  }, []);
+  const handleNavigateWithWeeks = _react.default.useCallback(when => {
+    setCalendarDisplayDate(prevDisplayDate => {
+      let daySelected = prevDisplayDate;
+      if (when === 'end') daySelected = prevDisplayDate.clone().endOf('week');
+      if (when === 'start') daySelected = prevDisplayDate.clone().startOf('week');
+      handleChangeActiveDescendant(daySelected.format(_helpers2.TOKEN_ISO_FORMAT));
+      return daySelected;
     });
-  }, e[28] = h, e[29] = _e) : _e = e[29];
-  const Ce = _e;
-  let Ie;
-  e[30] !== m || e[31] !== f || e[32] !== t.value ? (Ie = () => {
-    const a = t?.value, i = !I.isEmpty(a[f]), n = !I.isEmpty(a[m]);
-    return i && n;
-  }, e[30] = m, e[31] = f, e[32] = t.value, e[33] = Ie) : Ie = e[33];
-  const ya = Ie;
-  let we;
-  e[34] !== m || e[35] !== u || e[36] !== f || e[37] !== t || e[38] !== D || e[39] !== p ? (we = () => {
-    t.onChange?.({
+  }, []);
+  const verifyPeriodSelectedIsValid = _react.default.useCallback(() => {
+    const objectValue = props?.value;
+    const isValidInitialValue = !_lodash.default.isEmpty(objectValue[initialName]);
+    const isValidFinalValue = !_lodash.default.isEmpty(objectValue[finalName]);
+    return isValidInitialValue && isValidFinalValue;
+  }, [props?.value, initialName, finalName]);
+  const handleOnClickClearSelectedPeriod = _react.default.useCallback(() => {
+    props.onChange?.({
       target: {
-        name: t.name,
+        name: props.name,
         value: {
-          [f]: "",
-          [m]: ""
+          [initialName]: '',
+          [finalName]: ''
         }
       }
-    }), F(Ua), p(""), D(""), u(!1);
-  }, e[34] = m, e[35] = u, e[36] = f, e[37] = t, e[38] = D, e[39] = p, e[40] = we) : we = e[40];
-  const St = we, B = (a) => {
+    });
+    setSelectedDate(() => ({
+      inicial: null,
+      final: null
+    }));
+    setInitialMaskValue('');
+    setFinalMaskValue('');
+    handleChangeCalendarBoxState(false);
+  }, [props.onChange]);
+  const handleChangeUpdateDateState = _react.default.useCallback(params => {
     const {
-      date: i,
-      inputType: n,
-      typing: y
-    } = a, x = i.clone(), Y = qa;
-    e: switch (n) {
-      case "initial": {
-        F((Pt) => {
+      date,
+      inputType,
+      typing
+    } = params;
+    const rawDate = date.clone();
+    const verifyDateRangeOrder = (initialDate, finalDate) => {
+      const inicial = initialDate?.isAfter(finalDate) ? finalDate : initialDate;
+      const final = initialDate?.isAfter(finalDate) ? initialDate : finalDate;
+      return {
+        inicial,
+        final
+      };
+    };
+    switch (inputType) {
+      case 'initial':
+        {
+          setSelectedDate(prevSelectedDate => {
+            const {
+              inicial,
+              final
+            } = verifyDateRangeOrder(rawDate, prevSelectedDate.final);
+            const updatedState = {
+              inicial,
+              final
+            };
+            return updatedState;
+          });
           const {
-            inicial: Rt,
-            final: Bt
-          } = Y(x, Pt.final);
-          return {
-            inicial: Rt,
-            final: Bt
-          };
-        });
-        const {
-          inicial: J,
-          final: Q
-        } = Y(x, l.final);
-        t.onChange?.({
-          target: {
-            name: t.name,
-            value: {
-              [f]: R === "default" ? J?.format(d) : J?.toISOString(),
-              [m]: R === "default" ? Q?.format(d) : Q?.toISOString()
+            inicial,
+            final
+          } = verifyDateRangeOrder(rawDate, selectedDate.final);
+          props.onChange?.({
+            target: {
+              name: props.name,
+              value: {
+                [initialName]: returnValueType === 'default' ? inicial?.format(_helpers2.TOKEN_ISO_FORMAT) : inicial?.toISOString(),
+                [finalName]: returnValueType === 'default' ? final?.format(_helpers2.TOKEN_ISO_FORMAT) : final?.toISOString()
+              }
             }
-          }
-        }), requestAnimationFrame(() => {
-          y || H.current?.focus?.();
-        });
-        break e;
-      }
-      case "final": {
-        F((Pt) => {
+          });
+          requestAnimationFrame(() => {
+            if (!typing) finalInputRef.current?.focus?.();
+          });
+          break;
+        }
+      case 'final':
+        {
+          setSelectedDate(prevSelectedDate => {
+            const {
+              inicial,
+              final
+            } = verifyDateRangeOrder(prevSelectedDate.inicial, rawDate);
+            const updatedState = {
+              inicial,
+              final
+            };
+            return updatedState;
+          });
           const {
-            inicial: Rt,
-            final: Bt
-          } = Y(Pt.inicial, x);
-          return {
-            inicial: Rt,
-            final: Bt
-          };
-        });
-        const {
-          inicial: J,
-          final: Q
-        } = Y(l.inicial, x);
-        t.onChange?.({
-          target: {
-            name: t.name,
-            value: {
-              [f]: R === "default" ? J?.format(d) : J?.toISOString(),
-              [m]: R === "default" ? Q?.format(d) : Q?.toISOString()
+            inicial,
+            final
+          } = verifyDateRangeOrder(selectedDate.inicial, rawDate);
+          props.onChange?.({
+            target: {
+              name: props.name,
+              value: {
+                [initialName]: returnValueType === 'default' ? inicial?.format(_helpers2.TOKEN_ISO_FORMAT) : inicial?.toISOString(),
+                [finalName]: returnValueType === 'default' ? final?.format(_helpers2.TOKEN_ISO_FORMAT) : final?.toISOString()
+              }
             }
-          }
-        }), te && u(!1);
-        break e;
-      }
+          });
+          if (shouldCloseOnSelect) handleChangeCalendarBoxState(false);
+          break;
+        }
+      default:
+        break;
     }
-    C(x.clone());
-  };
-  let pe;
-  e[41] !== m || e[42] !== u || e[43] !== f || e[44] !== t || e[45] !== R || e[46] !== te ? (pe = (a) => {
-    const i = (n, y) => {
-      const x = {
-        [f]: R === "default" ? n.format(d) : n.toISOString(),
-        [m]: R === "default" ? y.format(d) : y.toISOString()
+    setCalendarDisplayDate(rawDate.clone());
+  }, [props.name, props.onChange, initialName, finalName, selectedDate, shouldCloseOnSelect]);
+  const handleChangeUpdateDateStateWithPredefinedPeriod = _react.default.useCallback(period => {
+    const localOnChange = (initialDate, finalDate) => {
+      const valueToUpdate = {
+        [initialName]: returnValueType === 'default' ? initialDate.format(_helpers2.TOKEN_ISO_FORMAT) : initialDate.toISOString(),
+        [finalName]: returnValueType === 'default' ? finalDate.format(_helpers2.TOKEN_ISO_FORMAT) : finalDate.toISOString()
       };
-      F(() => ({
-        inicial: n.clone(),
-        final: y.clone()
-      })), t.onChange?.({
+      setSelectedDate(() => {
+        const updatedState = {
+          inicial: initialDate.clone(),
+          final: finalDate.clone()
+        };
+        return updatedState;
+      });
+      props.onChange?.({
         target: {
-          name: t.name,
-          value: x
+          name: props.name,
+          value: valueToUpdate
         }
       });
     };
-    e: switch (a) {
-      case "today": {
-        const n = o();
-        i(n, n);
-        break e;
-      }
-      case "week": {
-        const n = o().startOf("week"), y = o().endOf("week");
-        i(n, y);
-        break e;
-      }
-      case "lastweek": {
-        const n = o().add(-1, "week").startOf("week"), y = o().add(-1, "week").endOf("week");
-        i(n, y);
-        break e;
-      }
-      case "last15": {
-        const n = o().add(-14, "d"), y = o();
-        i(n, y);
-        break e;
-      }
-      case "month": {
-        const n = o().startOf("month"), y = o().endOf("month");
-        i(n, y);
-        break e;
-      }
-      case "lastmonth": {
-        const n = o().add(-1, "month").startOf("month"), y = o().add(-1, "month").endOf("month");
-        i(n, y);
-        break e;
-      }
-    }
-    H?.current?.focus?.(), te && u(!1);
-  }, e[41] = m, e[42] = u, e[43] = f, e[44] = t, e[45] = R, e[46] = te, e[47] = pe) : pe = e[47];
-  const vt = pe;
-  let De;
-  e[48] !== s || e[49] !== O || e[50] !== yt || e[51] !== h || e[52] !== u || e[53] !== k || e[54] !== ht || e[55] !== t || e[56] !== l.final || e[57] !== l.inicial || e[58] !== D || e[59] !== p ? (De = (a, i) => {
-    if (t?.onBlur?.(a), i === "initial" && (a.relatedTarget?.id !== O && u(!1), s && (h((l.inicial ?? o()).format(d)), C(l.inicial ?? o())), I.size(ht) !== 8)) {
-      const n = o(l.inicial, d);
-      n.isValid() && p(n.format(V));
-    }
-    if (i === "final" && (a.relatedTarget?.id !== k && u(!1), s && (h((l.final ?? o()).format(d)), C(l.final ?? o())), I.size(yt) !== 8)) {
-      const n = o(l.final, d);
-      n.isValid() && D(n.format(V));
-    }
-  }, e[48] = s, e[49] = O, e[50] = yt, e[51] = h, e[52] = u, e[53] = k, e[54] = ht, e[55] = t, e[56] = l.final, e[57] = l.inicial, e[58] = D, e[59] = p, e[60] = De) : De = e[60];
-  const z = De;
-  let Ve;
-  e[61] !== s || e[62] !== h || e[63] !== r || e[64] !== N || e[65] !== t || e[66] !== l.final || e[67] !== l.inicial ? (Ve = (a, i) => {
-    t?.onFocus?.(a), !r && !s && N && aa(!0), i === "initial" && (h((l.inicial ?? o()).format(d)), C(l.inicial ?? o())), i === "final" && (h((l.final ?? o()).format(d)), C(l.final ?? o()));
-  }, e[61] = s, e[62] = h, e[63] = r, e[64] = N, e[65] = t, e[66] = l.final, e[67] = l.inicial, e[68] = Ve) : Ve = e[68];
-  const E = Ve;
-  let Pe;
-  e[69] !== _ || e[70] !== s || e[71] !== B || e[72] !== t ? (Pe = (a, i) => {
-    if (t?.onKeyDown?.(a), s && a.key && !a.shiftKey && !a.altKey && a.key === w.enter) {
-      a.preventDefault();
-      const n = o(I.toString(_), d);
-      B({
-        date: n,
-        inputType: i
-      });
-    }
-  }, e[69] = _, e[70] = s, e[71] = B, e[72] = t, e[73] = Pe) : Pe = e[73];
-  const U = Pe;
-  let Re;
-  e[74] !== t || e[75] !== g ? (Re = (a) => {
-    g ? a.preventDefault() : t.onPaste?.(a);
-  }, e[74] = t, e[75] = g, e[76] = Re) : Re = e[76];
-  const Be = Re;
-  let xe;
-  e[77] !== t || e[78] !== g ? (xe = (a) => {
-    g ? a.preventDefault() : t.onBeforeInput?.(a);
-  }, e[77] = t, e[78] = g, e[79] = xe) : xe = e[79];
-  const Me = xe;
-  let Ae;
-  e[80] !== s || e[81] !== u || e[82] !== L || e[83] !== T || e[84] !== W || e[85] !== Ce ? (Ae = (a) => {
-    if (s && a.key && !a.shiftKey && !a.altKey && Fa.includes(a.key)) {
-      a.preventDefault();
-      e: switch (a.key) {
-        case w.arrowLeft: {
-          W(-1);
-          break e;
+    switch (period) {
+      case 'today':
+        {
+          const date = (0, _moment.default)();
+          localOnChange(date, date);
+          break;
         }
-        case w.arrowRight: {
-          W(1);
-          break e;
+      case 'week':
+        {
+          const startOfWeek = (0, _moment.default)().startOf('week');
+          const endOfWeek = (0, _moment.default)().endOf('week');
+          localOnChange(startOfWeek, endOfWeek);
+          break;
         }
-        case w.arrowUp: {
-          W(-7);
-          break e;
+      case 'lastweek':
+        {
+          const startOfLastWeek = (0, _moment.default)().add(-1, 'week').startOf('week');
+          const endOfLastWeek = (0, _moment.default)().add(-1, 'week').endOf('week');
+          localOnChange(startOfLastWeek, endOfLastWeek);
+          break;
         }
-        case w.arrowDown: {
-          W(7);
-          break e;
+      case 'last15':
+        {
+          const startOfLastFifteenDays = (0, _moment.default)().add(-14, 'd');
+          const endOfLastFifteenDays = (0, _moment.default)();
+          localOnChange(startOfLastFifteenDays, endOfLastFifteenDays);
+          break;
         }
-        case w.pageUp: {
-          L();
-          break e;
+      case 'month':
+        {
+          const startOfMonth = (0, _moment.default)().startOf('month');
+          const endOfMonth = (0, _moment.default)().endOf('month');
+          localOnChange(startOfMonth, endOfMonth);
+          break;
         }
-        case w.pageDown: {
-          T();
-          break e;
+      case 'lastmonth':
+        {
+          const startOfMonth = (0, _moment.default)().add(-1, 'month').startOf('month');
+          const endOfMonth = (0, _moment.default)().add(-1, 'month').endOf('month');
+          localOnChange(startOfMonth, endOfMonth);
+          break;
         }
-        case w.home: {
-          Ce("start");
-          break e;
-        }
-        case w.end: {
-          Ce("end");
-          break e;
+      default:
+        break;
+    }
+    finalInputRef?.current?.focus?.();
+    if (shouldCloseOnSelect) handleChangeCalendarBoxState(false);
+  }, [props.name, props.onChange, initialName, finalName]);
+  const handleOnBlurMaskInput = (event, inputType) => {
+    props?.onBlur?.(event);
+    if (inputType === 'initial') {
+      if (event.relatedTarget?.id !== finalInputName) handleChangeCalendarBoxState(false);
+      if (calendarBoxOpen) {
+        handleChangeActiveDescendant((selectedDate.inicial ?? (0, _moment.default)()).format(_helpers2.TOKEN_ISO_FORMAT));
+        setCalendarDisplayDate(selectedDate.inicial ?? (0, _moment.default)());
+      }
+      if (_lodash.default.size(initialUnmaskedValue) !== 8) {
+        const date = (0, _moment.default)(selectedDate.inicial, _helpers2.TOKEN_ISO_FORMAT);
+        if (date.isValid()) {
+          setInitialMaskValue(date.format(_helpers2.TOKEN_PTBR_FORMAT));
         }
-        case w.escape: {
-          u(!1);
-          break e;
+      }
+    }
+    if (inputType === 'final') {
+      if (event.relatedTarget?.id !== initialInputName) handleChangeCalendarBoxState(false);
+      if (calendarBoxOpen) {
+        handleChangeActiveDescendant((selectedDate.final ?? (0, _moment.default)()).format(_helpers2.TOKEN_ISO_FORMAT));
+        setCalendarDisplayDate(selectedDate.final ?? (0, _moment.default)());
+      }
+      if (_lodash.default.size(finalUnmaskedValue) !== 8) {
+        const date = (0, _moment.default)(selectedDate.final, _helpers2.TOKEN_ISO_FORMAT);
+        if (date.isValid()) {
+          setFinalMaskValue(date.format(_helpers2.TOKEN_PTBR_FORMAT));
         }
       }
     }
-  }, e[80] = s, e[81] = u, e[82] = L, e[83] = T, e[84] = W, e[85] = Ce, e[86] = Ae) : Ae = e[86];
-  const ga = Ae;
-  let Ne;
-  e[87] !== m || e[88] !== f || e[89] !== t.value || e[90] !== D || e[91] !== p ? (Ne = () => {
-    if (t?.value) {
-      const a = t.value, i = o(I.toString(a[f]), d), n = o(I.toString(a[m]), d);
-      F(() => ({
-        inicial: i.isValid() ? i : null,
-        final: n.isValid() ? n : null
-      })), p(i.format(V)), D(n.format(V));
+  };
+  const handleOnFocusMaskInput = (event, inputType) => {
+    props?.onFocus?.(event);
+    if (!isReadOnly && !calendarBoxOpen && openCalendarOnFocus) {
+      setCalendarBoxOpen(true);
+    }
+    if (inputType === 'initial') {
+      handleChangeActiveDescendant((selectedDate.inicial ?? (0, _moment.default)()).format(_helpers2.TOKEN_ISO_FORMAT));
+      setCalendarDisplayDate(selectedDate.inicial ?? (0, _moment.default)());
+    }
+    if (inputType === 'final') {
+      handleChangeActiveDescendant((selectedDate.final ?? (0, _moment.default)()).format(_helpers2.TOKEN_ISO_FORMAT));
+      setCalendarDisplayDate(selectedDate.final ?? (0, _moment.default)());
+    }
+  };
+  const handleOnKeyDownMaskInput = (event, inputType) => {
+    props?.onKeyDown?.(event);
+    if (calendarBoxOpen && event.key && !event.shiftKey && !event.altKey && event.key === _types.Keys.enter) {
+      event.preventDefault();
+      const rawDate = (0, _moment.default)(_lodash.default.toString(activeDescendant), _helpers2.TOKEN_ISO_FORMAT);
+      handleChangeUpdateDateState({
+        date: rawDate,
+        inputType
+      });
+    }
+  };
+  const handleOnPaste = event => {
+    if (undigitable) {
+      event.preventDefault();
+    } else {
+      props.onPaste?.(event);
     }
-  }, e[87] = m, e[88] = f, e[89] = t.value, e[90] = D, e[91] = p, e[92] = Ne) : Ne = e[92];
-  const _t = t?.value;
-  let Fe;
-  e[93] !== _t ? (Fe = [_t], e[93] = _t, e[94] = Fe) : Fe = e[94], Ca(Ne, Fe);
-  const Ct = ya();
-  let Ke;
-  e[95] !== _ || e[96] !== s || e[97] !== mt || e[98] !== O || e[99] !== h || e[100] !== u || e[101] !== Ot || e[102] !== L || e[103] !== T || e[104] !== kt || e[105] !== B || e[106] !== vt || e[107] !== St || e[108] !== v || e[109] !== k || e[110] !== b || e[111] !== r || e[112] !== N || e[113] !== l || e[114] !== rt || e[115] !== dt || e[116] !== ct || e[117] !== c || e[118] !== Ct || e[119] !== g ? (Ke = {
-    isReadOnly: r,
-    isDisabled: b,
-    undigitable: g,
-    skeletonize: c,
-    dateContainerRef: ia,
-    calendarBoxOpen: s,
-    activeDescendant: _,
-    selectedDate: l,
-    initialInputId: k,
-    finalInputId: O,
-    initialInputRef: ut,
-    finalInputRef: H,
-    showCalendarButton: rt,
-    calendarDisplayDate: mt,
-    hasValidationErrors: v,
-    openCalendarOnFocus: N,
-    showPredefinedPeriodsButton: ct,
-    showClearDateButton: dt,
-    handleChangeSelectedDate: kt,
-    handleChangePreviousMonth: T,
-    handleChangeNextMonth: L,
-    handleChangeCalendarBoxState: u,
-    handleChangeActiveDescendant: h,
-    handleChangeCalendarDisplayDate: Ot,
-    handleChangeUpdateDateState: B,
-    handleOnClickClearSelectedPeriod: St,
-    handleChangeUpdateDateStateWithPredefinedPeriod: vt,
-    hasValidPeriodSelected: Ct
-  }, e[95] = _, e[96] = s, e[97] = mt, e[98] = O, e[99] = h, e[100] = u, e[101] = Ot, e[102] = L, e[103] = T, e[104] = kt, e[105] = B, e[106] = vt, e[107] = St, e[108] = v, e[109] = k, e[110] = b, e[111] = r, e[112] = N, e[113] = l, e[114] = rt, e[115] = dt, e[116] = ct, e[117] = c, e[118] = Ct, e[119] = g, e[120] = Ke) : Ke = e[120];
-  const ka = Ke;
-  if (ma || ie)
-    return null;
-  let Te;
-  e[121] !== it || e[122] !== K || e[123] !== gt || e[124] !== A || e[125] !== k || e[126] !== b || e[127] !== r || e[128] !== P || e[129] !== lt || e[130] !== st || e[131] !== t.hint || e[132] !== t.required || e[133] !== c || e[134] !== ot ? (Te = gt && /* @__PURE__ */ S(Ba, { "data-testid": "test-date-period-field-label", label: P, inputId: k, hint: t?.hint, isDisabled: b, isReadOnly: r, skeletonize: c, required: t?.required, hintPosition: A, themePopover: ot, popoverAlign: st, labelUppercase: lt, hasHintMessages: K, customClassLabel: it }), e[121] = it, e[122] = K, e[123] = gt, e[124] = A, e[125] = k, e[126] = b, e[127] = r, e[128] = P, e[129] = lt, e[130] = st, e[131] = t.hint, e[132] = t.required, e[133] = c, e[134] = ot, e[135] = Te) : Te = e[135];
-  const Oa = I.omit(ta, ["initialRef", "finalRef"]), It = t?.initialRef;
-  let Le;
-  e[136] !== It ? (Le = oa(ut, It), e[136] = It, e[137] = Le) : Le = e[137];
-  let We;
-  e[138] !== z ? (We = (a) => z(a, "initial"), e[138] = z, e[139] = We) : We = e[139];
-  let ze;
-  e[140] !== E ? (ze = (a) => E(a, "initial"), e[140] = E, e[141] = ze) : ze = e[141];
-  let Ee;
-  e[142] !== U ? (Ee = (a) => U(a, "initial"), e[142] = U, e[143] = Ee) : Ee = e[143];
-  let Ue;
-  e[144] === Symbol.for("react.memo_cache_sentinel") ? (Ue = /* @__PURE__ */ S(pa, { name: "arrow_right", size: 10 }), e[144] = Ue) : Ue = e[144];
-  let qe;
-  e[145] !== b || e[146] !== r ? (qe = /* @__PURE__ */ S("span", { className: "separator", "data-state-disabled": b, "data-state-read-only": r, onMouseDown: ja, children: Ue }), e[145] = b, e[146] = r, e[147] = qe) : qe = e[147];
-  const wt = Ra, pt = I.omit(ta, ["initialRef", "finalRef"]), Dt = t?.finalRef;
-  let q;
-  e[148] !== Dt ? (q = oa(H, Dt), e[148] = Dt, e[149] = q) : q = e[149];
-  const Vt = !r && !c ? 0 : -1;
-  let j;
-  e[150] !== z ? (j = (a) => z(a, "final"), e[150] = z, e[151] = j) : j = e[151];
-  let $;
-  e[152] !== E ? ($ = (a) => E(a, "final"), e[152] = E, e[153] = $) : $ = e[153];
-  let G;
-  e[154] !== U ? (G = (a) => U(a, "final"), e[154] = U, e[155] = G) : G = e[155];
-  let je;
-  e[156] !== _ || e[157] !== s || e[158] !== Z || e[159] !== O || e[160] !== bt || e[161] !== Me || e[162] !== Be || e[163] !== v || e[164] !== b || e[165] !== r || e[166] !== ae || e[167] !== c || e[168] !== wt.Input || e[169] !== pt || e[170] !== q || e[171] !== Vt || e[172] !== j || e[173] !== $ || e[174] !== G || e[175] !== ee || e[176] !== g ? (je = /* @__PURE__ */ S(wt.Input, { ...pt, ref: q, id: O, name: O, value: bt, readOnly: r, disabled: b, customClass: Z, tabIndex: Vt, placeholder: ae, "aria-autocomplete": "list", "aria-activedescendant": _, "aria-expanded": s, "aria-controls": O, "aria-labelledby": O, "data-testid": "test-date-period-field-final-input", "data-state-is-period-input": !0, "data-state-error": v, "data-state-read-only": r, "data-state-text-align": ee, "data-state-undigitable": g, "data-state-skeletonize": c, onPaste: Be, onBeforeInput: Me, onBlur: j, onFocus: $, onKeyDown: G }), e[156] = _, e[157] = s, e[158] = Z, e[159] = O, e[160] = bt, e[161] = Me, e[162] = Be, e[163] = v, e[164] = b, e[165] = r, e[166] = ae, e[167] = c, e[168] = wt.Input, e[169] = pt, e[170] = q, e[171] = Vt, e[172] = j, e[173] = $, e[174] = G, e[175] = ee, e[176] = g, e[177] = je) : je = e[177];
-  let $e;
-  e[178] === Symbol.for("react.memo_cache_sentinel") ? ($e = /* @__PURE__ */ S(Ka, {}), e[178] = $e) : $e = e[178];
-  let Ge;
-  e[179] !== s || e[180] !== ie ? (Ge = s && !ie && Ia(/* @__PURE__ */ S(Ta, { ref: ha }), document.body), e[179] = s, e[180] = ie, e[181] = Ge) : Ge = e[181];
-  let He;
-  e[182] !== K || e[183] !== A || e[184] !== b || e[185] !== t.hint || e[186] !== c ? (He = A === "below" && /* @__PURE__ */ S(wa, { customClass: "hint", description: t.hint, disabled: b, skeletonize: c, visible: K }), e[182] = K, e[183] = A, e[184] = b, e[185] = t.hint, e[186] = c, e[187] = He) : He = e[187];
-  let Ye;
-  e[188] !== M || e[189] !== v || e[190] !== P || e[191] !== c ? (Ye = v && /* @__PURE__ */ S("span", { "data-testid": "test-date-period-field-list-errors", className: "error", "data-state-skeletonize": c, "aria-describedby": String(P).concat("-errors"), children: M?.map($a) }), e[188] = M, e[189] = v, e[190] = P, e[191] = c, e[192] = Ye) : Ye = e[192];
-  let Je;
-  return e[193] !== Ze || e[194] !== et || e[195] !== tt ? (Je = /* @__PURE__ */ S(Va, { targetRef: na, text: Ze, width: tt, position: et }), e[193] = Ze, e[194] = et, e[195] = tt, e[196] = Je) : Je = e[196], /* @__PURE__ */ Xe(ra, { children: [
-    /* @__PURE__ */ S(Da, { cols: fa, children: /* @__PURE__ */ S(La.Provider, { value: ka, children: /* @__PURE__ */ Xe(xa, { ref: na, "data-testid": "test-date-period-field-root", "data-state-error": v, customClassWrapper: ca, children: [
-      Te,
-      /* @__PURE__ */ Xe(Ma, { ref: ia, "data-testid": "test-date-period-field-container", onKeyDown: ga, skeletonize: c, customClassInputContainer: da, children: [
-        /* @__PURE__ */ S(Aa, { ...Oa, ref: Le, id: k, name: k, value: ba, readOnly: r, disabled: b, customClass: Z, tabIndex: !r && !c ? 0 : -1, placeholder: ae, "aria-autocomplete": "list", "aria-activedescendant": _, "aria-expanded": s, "aria-controls": k, "aria-labelledby": k, "data-testid": "test-date-period-field-initial-input", "data-state-is-period-input": !0, "data-state-error": v, "data-state-read-only": r, "data-state-text-align": ee, "data-state-undigitable": g, "data-state-skeletonize": c, onPaste: Be, onBeforeInput: Me, onBlur: We, onFocus: ze, onKeyDown: Ee }),
-        qe,
-        je,
-        $e
-      ] }),
-      Ge,
-      He,
-      Ye
-    ] }) }) }),
-    Je
-  ] });
-});
-Wa.displayName = "DatePeriodFieldInput";
-function za(t) {
-  return t.clone().subtract(1, "month");
-}
-function Ea(t) {
-  return t.clone().add(1, "month");
-}
-function Ua() {
-  return {
-    inicial: null,
-    final: null
   };
-}
-function qa(t, e) {
-  const P = t?.isAfter(e) ? e : t, M = t?.isAfter(e) ? t : e;
-  return {
-    inicial: P,
-    final: M
+  const handleOnBeforeInput = event => {
+    if (undigitable) {
+      event.preventDefault();
+    } else {
+      props.onBeforeInput?.(event);
+    }
+  };
+  const handleOnKeyDown = event => {
+    if (calendarBoxOpen && event.key && !event.shiftKey && !event.altKey && _helpers2.NAVIGATION_KEYS.includes(event.key)) {
+      event.preventDefault();
+      switch (event.key) {
+        case _types.Keys.arrowLeft:
+          handleNavigateWithDays(-1);
+          break;
+        case _types.Keys.arrowRight:
+          handleNavigateWithDays(1);
+          break;
+        case _types.Keys.arrowUp:
+          handleNavigateWithDays(-7);
+          break;
+        case _types.Keys.arrowDown:
+          handleNavigateWithDays(7);
+          break;
+        case _types.Keys.pageUp:
+          handleChangeNextMonth();
+          break;
+        case _types.Keys.pageDown:
+          handleChangePreviousMonth();
+          break;
+        case _types.Keys.home:
+          handleNavigateWithWeeks('start');
+          break;
+        case _types.Keys.end:
+          handleNavigateWithWeeks('end');
+          break;
+        case _types.Keys.escape:
+          handleChangeCalendarBoxState(false);
+          break;
+        default:
+          break;
+      }
+    }
   };
-}
-function ja(t) {
-  t.preventDefault();
-}
-function $a(t, e) {
-  return /* @__PURE__ */ Xe(ra, { children: [
-    t,
-    " "
-  ] }, `${e + 1}-${t}`);
-}
-export {
-  Wa as Input
-};
-//# sourceMappingURL=index.js.map
+  _react.default.useEffect(() => {
+    if (props?.value) {
+      const objectValue = props.value;
+      const initialDate = (0, _moment.default)(_lodash.default.toString(objectValue[initialName]), _helpers2.TOKEN_ISO_FORMAT);
+      const finalDate = (0, _moment.default)(_lodash.default.toString(objectValue[finalName]), _helpers2.TOKEN_ISO_FORMAT);
+      setSelectedDate(() => ({
+        inicial: initialDate.isValid() ? initialDate : null,
+        final: finalDate.isValid() ? finalDate : null
+      }));
+      setInitialMaskValue(initialDate.format(_helpers2.TOKEN_PTBR_FORMAT));
+      setFinalMaskValue(finalDate.format(_helpers2.TOKEN_PTBR_FORMAT));
+    }
+  }, [props?.value]);
+  const contextValues = _react.default.useMemo(() => ({
+    isReadOnly,
+    isDisabled,
+    undigitable,
+    skeletonize,
+    dateContainerRef,
+    calendarBoxOpen,
+    activeDescendant,
+    selectedDate,
+    initialInputId: initialInputName,
+    finalInputId: finalInputName,
+    initialInputRef,
+    finalInputRef,
+    showCalendarButton,
+    calendarDisplayDate,
+    hasValidationErrors,
+    openCalendarOnFocus,
+    showPredefinedPeriodsButton,
+    showClearDateButton,
+    handleChangeSelectedDate,
+    handleChangePreviousMonth,
+    handleChangeNextMonth,
+    handleChangeCalendarBoxState,
+    handleChangeActiveDescendant,
+    handleChangeCalendarDisplayDate,
+    handleChangeUpdateDateState,
+    handleOnClickClearSelectedPeriod,
+    handleChangeUpdateDateStateWithPredefinedPeriod,
+    hasValidPeriodSelected: verifyPeriodSelectedIsValid()
+  }), [isReadOnly, isDisabled, undigitable, skeletonize, initialInputName, finalInputName, selectedDate, calendarBoxOpen, activeDescendant, calendarDisplayDate, hasValidationErrors, openCalendarOnFocus, showClearDateButton]);
+  if (unvisible || hideContent) return null;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
+    cols: gridLayout
+  }, /*#__PURE__*/_react.default.createElement(_context.DatePeriodFieldContext.Provider, {
+    value: contextValues
+  }, /*#__PURE__*/_react.default.createElement(BaseDate.Root, {
+    ref: inputRootRef,
+    "data-testid": "test-date-period-field-root",
+    "data-state-error": hasValidationErrors,
+    customClassWrapper: customClassWrapper
+  }, hasLabel && /*#__PURE__*/_react.default.createElement(BaseDate.Label, {
+    "data-testid": "test-date-period-field-label",
+    label: label,
+    inputId: initialInputName,
+    hint: props?.hint,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    skeletonize: skeletonize,
+    required: props?.required,
+    hintPosition: hintPosition,
+    themePopover: themePopover,
+    popoverAlign: popoverAlign,
+    labelUppercase: labelUppercase,
+    hasHintMessages: hasHintMessages,
+    customClassLabel: customClassLabel
+  }), /*#__PURE__*/_react.default.createElement(BaseDate.Container, {
+    ref: dateContainerRef,
+    "data-testid": "test-date-period-field-container",
+    onKeyDown: handleOnKeyDown,
+    skeletonize: skeletonize,
+    customClassInputContainer: customClassInputContainer
+  }, /*#__PURE__*/_react.default.createElement(BaseDate.Input, _extends({}, _lodash.default.omit(rest, ['initialRef', 'finalRef']), {
+    ref: (0, _helpers.mergeRefs)(initialInputRef, props?.initialRef),
+    id: initialInputName,
+    name: initialInputName,
+    value: initialMaskedValue,
+    readOnly: isReadOnly,
+    disabled: isDisabled,
+    customClass: customClass,
+    tabIndex: !isReadOnly && !skeletonize ? 0 : -1,
+    placeholder: placeholder,
+    "aria-autocomplete": "list",
+    "aria-activedescendant": activeDescendant,
+    "aria-expanded": calendarBoxOpen,
+    "aria-controls": initialInputName,
+    "aria-labelledby": initialInputName,
+    "data-testid": "test-date-period-field-initial-input",
+    "data-state-is-period-input": true,
+    "data-state-error": hasValidationErrors,
+    "data-state-read-only": isReadOnly,
+    "data-state-text-align": textAlign,
+    "data-state-undigitable": undigitable,
+    "data-state-skeletonize": skeletonize,
+    onPaste: handleOnPaste,
+    onBeforeInput: handleOnBeforeInput,
+    onBlur: event => handleOnBlurMaskInput(event, 'initial'),
+    onFocus: event => handleOnFocusMaskInput(event, 'initial'),
+    onKeyDown: event => handleOnKeyDownMaskInput(event, 'initial')
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: "separator",
+    "data-state-disabled": isDisabled,
+    "data-state-read-only": isReadOnly,
+    onMouseDown: event => {
+      event.preventDefault();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_icons.default, {
+    name: "arrow_right",
+    size: 10
+  })), /*#__PURE__*/_react.default.createElement(BaseDate.Input, _extends({}, _lodash.default.omit(rest, ['initialRef', 'finalRef']), {
+    ref: (0, _helpers.mergeRefs)(finalInputRef, props?.finalRef),
+    id: finalInputName,
+    name: finalInputName,
+    value: finalMaskedValue,
+    readOnly: isReadOnly,
+    disabled: isDisabled,
+    customClass: customClass,
+    tabIndex: !isReadOnly && !skeletonize ? 0 : -1,
+    placeholder: placeholder,
+    "aria-autocomplete": "list",
+    "aria-activedescendant": activeDescendant,
+    "aria-expanded": calendarBoxOpen,
+    "aria-controls": finalInputName,
+    "aria-labelledby": finalInputName,
+    "data-testid": "test-date-period-field-final-input",
+    "data-state-is-period-input": true,
+    "data-state-error": hasValidationErrors,
+    "data-state-read-only": isReadOnly,
+    "data-state-text-align": textAlign,
+    "data-state-undigitable": undigitable,
+    "data-state-skeletonize": skeletonize,
+    onPaste: handleOnPaste,
+    onBeforeInput: handleOnBeforeInput,
+    onBlur: event => handleOnBlurMaskInput(event, 'final'),
+    onFocus: event => handleOnFocusMaskInput(event, 'final'),
+    onKeyDown: event => handleOnKeyDownMaskInput(event, 'final')
+  })), /*#__PURE__*/_react.default.createElement(_triggers.Triggers, null)), calendarBoxOpen && !hideContent && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_calendarbox.CalendarBox, {
+    ref: calendarRef
+  }), document.body), hintPosition === 'below' && /*#__PURE__*/_react.default.createElement(_hint.default, {
+    customClass: "hint",
+    description: props.hint,
+    disabled: isDisabled,
+    skeletonize: skeletonize,
+    visible: hasHintMessages
+  }), hasValidationErrors && /*#__PURE__*/_react.default.createElement("span", {
+    "data-testid": "test-date-period-field-list-errors",
+    className: "error",
+    "data-state-skeletonize": skeletonize,
+    "aria-describedby": String(label).concat('-errors')
+  }, errors?.map((error, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    key: `${index + 1}-${error}`
+  }, error, "\xA0")))))), /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
+    targetRef: inputRootRef,
+    text: tooltip,
+    width: tooltipWidth,
+    position: tooltipPosition
+  }));
+});
+Input.displayName = 'DatePeriodFieldInput';