linear-react-components-ui 1.1.24-beta.0 → 1.1.24-beta.10

package/lib/inputs/multiSelect/Dropdown.js

@@ -8,24 +8,24 @@ var _react = _interopRequireWildcard(require("react"));
 var _avatar = _interopRequireDefault(require("../../avatar"));
 var _icons = _interopRequireDefault(require("../../icons"));
 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 _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 returnDropdownDynamicStyles = (selectFieldRef, dropdownMaxHeight) => {
-  const selectFieldRects = selectFieldRef?.current?.getBoundingClientRect();
-  const bottom = selectFieldRects?.bottom ? selectFieldRects?.bottom : 0;
-  const offsetTop = selectFieldRef?.current?.offsetTop ? selectFieldRef?.current?.offsetTop : 0;
+  var _selectFieldRef$curre, _selectFieldRef$curre2, _selectFieldRef$curre3;
+  const selectFieldRects = selectFieldRef === null || selectFieldRef === void 0 ? void 0 : (_selectFieldRef$curre = selectFieldRef.current) === null || _selectFieldRef$curre === void 0 ? void 0 : _selectFieldRef$curre.getBoundingClientRect();
+  const bottom = selectFieldRects !== null && selectFieldRects !== void 0 && selectFieldRects.bottom ? selectFieldRects === null || selectFieldRects === void 0 ? void 0 : selectFieldRects.bottom : 0;
+  const offsetTop = selectFieldRef !== null && selectFieldRef !== void 0 && (_selectFieldRef$curre2 = selectFieldRef.current) !== null && _selectFieldRef$curre2 !== void 0 && _selectFieldRef$curre2.offsetTop ? selectFieldRef === null || selectFieldRef === void 0 ? void 0 : (_selectFieldRef$curre3 = selectFieldRef.current) === null || _selectFieldRef$curre3 === void 0 ? void 0 : _selectFieldRef$curre3.offsetTop : 0;
   const dropdownBottomDistance = window.innerHeight - bottom;
   let maxDropdownBottomDistance = 200;
   let height = dropdownMaxHeight;
   let dropdownPosition;
   if (!height || height <= 0) {
     if (dropdownBottomDistance < maxDropdownBottomDistance) {
-      height = selectFieldRects?.top ? selectFieldRects.top : 0;
+      height = selectFieldRects !== null && selectFieldRects !== void 0 && selectFieldRects.top ? selectFieldRects.top : 0;
       dropdownPosition = window.innerHeight - offsetTop + 10;
     } else {
       height = dropdownBottomDistance;
@@ -37,8 +37,8 @@ const returnDropdownDynamicStyles = (selectFieldRef, dropdownMaxHeight) => {
     }
   }
   return {
-    maxHeight: `${height - 30}px`,
-    bottom: `${dropdownPosition}px`
+    maxHeight: "".concat(height - 30, "px"),
+    bottom: "".concat(dropdownPosition, "px")
   };
 };
 const Dropdown = props => {
@@ -102,11 +102,11 @@ const Dropdown = props => {
     customClass: "checkboxicon"
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "label"
-  }, inputValue !== '' ? 'Selecionar todos pesquisados' : 'Selecionar Todos'))), dataCombo?.map(item => {
+  }, inputValue !== '' ? 'Selecionar todos pesquisados' : 'Selecionar Todos'))), dataCombo === null || dataCombo === void 0 ? void 0 : dataCombo.map(item => {
     const isChecked = selecteds ? selecteds.find(selected => selected[idKey] === item[idKey]) : undefined;
     return /*#__PURE__*/_react.default.createElement("div", {
-      key: `dropdowmItem ${item[idKey]}}`,
-      className: `item ${isChecked && '-selected'}`
+      key: "dropdowmItem ".concat(item[idKey], "}"),
+      className: "item ".concat(isChecked && '-selected')
     }, /*#__PURE__*/_react.default.createElement("button", {
       className: "menubutton",
       tabIndex: -1,

package/lib/inputs/multiSelect/helper.js

@@ -11,10 +11,11 @@ const getFilteredDataCombo = _ref => {
     inputText
   } = _ref;
   return dataSource.filter(item => {
+    var _descriptionKey;
     if (typeof descriptionKey === 'string') {
       return item[descriptionKey].toLowerCase().indexOf(inputText.toLowerCase()) > -1;
     }
-    return descriptionKey(item)?.toLowerCase().indexOf(inputText.toLowerCase()) > -1;
+    return ((_descriptionKey = descriptionKey(item)) === null || _descriptionKey === void 0 ? void 0 : _descriptionKey.toLowerCase().indexOf(inputText.toLowerCase())) > -1;
   });
 };
 var _default = exports.default = getFilteredDataCombo;

package/lib/inputs/multiSelect/index.js

@@ -12,8 +12,7 @@ var _ActionButtons = _interopRequireDefault(require("./ActionButtons"));
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
 var _helper = _interopRequireDefault(require("./helper"));
 require("../../assets/styles/multiSelect.scss");
-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 _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 _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 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; }
@@ -33,7 +32,7 @@ const MultiSelectField = props => {
     gridLayout,
     dropdownAlignButton = 'left'
   } = props;
-  const componentId = `multiSelect-component${uuid.v1()}`;
+  const componentId = "multiSelect-component".concat(uuid.v1());
   const [dataCombo, setDataCombo] = (0, _react.useState)(dataSource);
   const [selecteds, setSelecteds] = (0, _react.useState)();
   const [inputValue, setInputValue] = (0, _react.useState)('');
@@ -68,8 +67,8 @@ const MultiSelectField = props => {
   };
   const onMouseMove = event => {
     const target = event.target;
-    if (target?.className === '') return;
-    const newInsideComponent = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label'].includes(target?.className);
+    if ((target === null || target === void 0 ? void 0 : target.className) === '') return;
+    const newInsideComponent = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label'].includes(target === null || target === void 0 ? void 0 : target.className);
     setInsideComponent(newInsideComponent);
   };
   const onBlurComponent = e => {
@@ -109,10 +108,11 @@ const MultiSelectField = props => {
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
   const onClickOutSide = event => {
+    var _componentRef$current;
     const {
       target
     } = event;
-    if (target !== componentRef.current && !componentRef.current?.contains(target)) {
+    if (target !== componentRef.current && !((_componentRef$current = componentRef.current) !== null && _componentRef$current !== void 0 && _componentRef$current.contains(target))) {
       setOpened(false);
       setDataCombo(dataSource);
       setInputValue('');
@@ -138,7 +138,8 @@ const MultiSelectField = props => {
   };
   (0, _react.useEffect)(() => {
     if (gridLayout) {
-      const currentGridEl = selectWrapper.current?.parentElement;
+      var _selectWrapper$curren;
+      const currentGridEl = (_selectWrapper$curren = selectWrapper.current) === null || _selectWrapper$curren === void 0 ? void 0 : _selectWrapper$curren.parentElement;
       if (currentGridEl) setElementStyles(window.getComputedStyle(currentGridEl));
     }
     window.addEventListener('resize', onScreenResize);
@@ -152,10 +153,10 @@ const MultiSelectField = props => {
   }, []);
   (0, _react.useEffect)(() => {
     if (dataSource && dataSource.length > 0) {
-      const newSelecteds = dataSource.filter(item => value?.includes(item[idKey]));
+      const newSelecteds = dataSource.filter(item => value === null || value === void 0 ? void 0 : value.includes(item[idKey]));
       setSelecteds(newSelecteds);
     }
-  }, [value?.length, dataSource?.length]);
+  }, [value === null || value === void 0 ? void 0 : value.length, dataSource === null || dataSource === void 0 ? void 0 : dataSource.length]);
   (0, _react.useEffect)(() => {
     if (dataSource && dataCombo && !_lodash.default.isEqual(dataSource, dataCombo)) {
       const newDataCombo = (0, _helper.default)(_objectSpread(_objectSpread({}, props), {}, {

package/lib/inputs/number/BaseNumber.js

@@ -68,7 +68,7 @@ const BaseNumber = _ref => {
   });
   return /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({
     mask: Number,
-    value: value ?? 0,
+    value: value !== null && value !== void 0 ? value : 0,
     thousandsSeparator: ".",
     radix: ",",
     mapToRadix: ['.'],

package/lib/inputs/number/index.js

@@ -22,8 +22,7 @@ var _Decimal = _interopRequireDefault(require("./Decimal"));
 require("../../assets/styles/numbers.scss");
 var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
 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 _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 _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); }
 const NumberField = props => {
   const {
@@ -50,7 +49,8 @@ const NumberField = props => {
     if (props.onChange) props.onChange(event);
   };
   (0, _react.useEffect)(() => {
-    setNumberValue(value?.toString() ?? '');
+    var _value$toString;
+    setNumberValue((_value$toString = value === null || value === void 0 ? void 0 : value.toString()) !== null && _value$toString !== void 0 ? _value$toString : '');
   }, [value]);
   return /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
     value: numberValue,

package/lib/inputs/period/Dropdown.js

@@ -18,18 +18,21 @@ const Dropdown = props => {
   const elementRef = (0, _react.useRef)(document.createElement('div'));
   const width = inputDimensions && inputDimensions.width || CALENDAR_MIN_WIDTH;
   (0, _react.useEffect)(() => {
+    var _containerRef$current;
     elementRef.current.className = 'datepicker-component';
     elementRef.current.style.width = String(width).concat('px');
-    elementRef.current.style.top = String(inputDimensions?.bottom).concat('px');
-    containerRef.current?.appendChild(elementRef.current);
+    elementRef.current.style.top = String(inputDimensions === null || inputDimensions === void 0 ? void 0 : inputDimensions.bottom).concat('px');
+    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.appendChild(elementRef.current);
     dropdownRef(elementRef.current);
     return () => {
-      containerRef.current?.removeChild(elementRef.current);
+      var _containerRef$current2;
+      (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.removeChild(elementRef.current);
     };
   }, []);
   (0, _react.useEffect)(() => {
+    var _props$inputDimension;
     elementRef.current.style.width = String(width).concat('px');
-    elementRef.current.style.top = String(props.inputDimensions?.bottom).concat('px');
+    elementRef.current.style.top = String((_props$inputDimension = props.inputDimensions) === null || _props$inputDimension === void 0 ? void 0 : _props$inputDimension.bottom).concat('px');
   }, [props]);
   return /*#__PURE__*/_reactDom.default.createPortal(children, elementRef.current);
 };

package/lib/inputs/period/PeriodList.js

@@ -38,24 +38,15 @@ const PeriodList = _ref => {
     className: "dropdown-period"
   }, periodOptions.map(item => {
     const itemSelected = selected === item.id;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      role: "button",
+    return /*#__PURE__*/_react.default.createElement("button", {
+      key: String('item-').concat(item.id),
       tabIndex: -1,
-      onKeyDown: () => {},
-      key: `item-${item.id}`,
       className: (0, _helper.getDropdownItemCssClass)(itemSelected),
       onClick: () => {
         const dates = item.id !== 'custom' ? (0, _helper.CalcDatesByPeriod)(item.id) : null;
         handleOnSelect(item.id, dates);
       }
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      role: "button",
-      className: "menubutton",
-      tabIndex: -1,
-      onKeyPress: () => {}
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "label"
-    }, item.label)));
+    }, item.label);
   }));
 };
 var _default = exports.default = PeriodList;

package/lib/inputs/period/helper.js

@@ -12,9 +12,7 @@ const getCalendarDropdownStyle = _ref => {
     leftPosition,
     width
   } = _ref;
-  return `top: ${topPosition}px;
-  left: ${leftPosition}px;
-  width:${width}px`;
+  return "top: ".concat(topPosition, "px;\n  left: ").concat(leftPosition, "px;\n  width:").concat(width, "px");
 };
 var _default = exports.default = getCalendarDropdownStyle;
 const getDropdownItemCssClass = function () {

package/lib/inputs/period/index.js

@@ -4,6 +4,7 @@ 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"));
@@ -16,13 +17,11 @@ 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 _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; }
@@ -66,10 +65,12 @@ const PeriodPicker = props => {
   const inputFinalRef = (0, _react.useRef)(null);
   const calendarContainerRef = (0, _react.useRef)(null);
   const onScreenResize = () => {
-    setInputDimensions(inputContainerRef?.current?.getBoundingClientRect());
+    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 => {
-    const focusOnAnotherField = !wrapperBaseInputPeriodRef.current?.contains(event.relatedTarget);
+    var _wrapperBaseInputPeri;
+    const focusOnAnotherField = !((_wrapperBaseInputPeri = wrapperBaseInputPeriodRef.current) !== null && _wrapperBaseInputPeri !== void 0 && _wrapperBaseInputPeri.contains(event.relatedTarget));
     if (!showCalendarInDialog && showCalendarValueInitial && focusOnAnotherField) {
       setShowCalendarValueInitial(false);
     }
@@ -87,98 +88,46 @@ const PeriodPicker = props => {
       targetElement.focus();
       if (showCalendarValueInitial) {
         if (targetElement.id !== 'valueInitial') {
-          inputInitialRef.current?.focus();
+          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') {
-          inputFinalRef.current?.focus();
+          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.current?.focus();
+        (_inputFinalRef$curren2 = inputFinalRef.current) === null || _inputFinalRef$curren2 === void 0 ? void 0 : _inputFinalRef$curren2.focus();
         setShowCalendarValueFinal(false);
       }
     }
-    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();
   };
   const keepPositionCalendarByScroll = () => {
-    const inputDateDimensions = inputContainerRef.current?.getBoundingClientRect();
+    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');
     }
   };
-  (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);
-    };
-  }, []);
-  (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();
+        var _inputInitialRef$curr2;
+        (_inputInitialRef$curr2 = inputInitialRef.current) === null || _inputInitialRef$curr2 === void 0 ? void 0 : _inputInitialRef$curr2.focus();
         if (showCalendarInDialog) {
           setTimeout(() => {
-            currentDateButtonRef.current?.focus();
+            var _currentDateButtonRef;
+            (_currentDateButtonRef = currentDateButtonRef.current) === null || _currentDateButtonRef === void 0 ? void 0 : _currentDateButtonRef.focus();
           }, 100);
         }
         setShowCalendarValueInitial(true);
@@ -188,10 +137,12 @@ const PeriodPicker = props => {
       setCurrentTypeDate('valueFinal');
       setShowCalendarValueInitial(false);
       if (!showCalendarValueFinal) {
-        inputFinalRef.current?.focus();
+        var _inputFinalRef$curren3;
+        (_inputFinalRef$curren3 = inputFinalRef.current) === null || _inputFinalRef$curren3 === void 0 ? void 0 : _inputFinalRef$curren3.focus();
         if (showCalendarInDialog) {
           setTimeout(() => {
-            currentDateButtonRef.current?.focus();
+            var _currentDateButtonRef2;
+            (_currentDateButtonRef2 = currentDateButtonRef.current) === null || _currentDateButtonRef2 === void 0 ? void 0 : _currentDateButtonRef2.focus();
           }, 100);
         }
         setShowCalendarValueFinal(true);
@@ -203,27 +154,41 @@ const PeriodPicker = props => {
   };
   const closeCalendar = calendarName => {
     if (calendarName === 'valueInitial') {
-      inputInitialRef.current?.focus();
+      var _inputInitialRef$curr3;
+      (_inputInitialRef$curr3 = inputInitialRef.current) === null || _inputInitialRef$curr3 === void 0 ? void 0 : _inputInitialRef$curr3.focus();
     }
     if (calendarName === 'valueFinal') {
-      inputFinalRef.current?.focus();
+      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(() => {
       if (calendarName === 'valueInitial') {
-        inputInitialRef.current?.focus();
+        var _inputInitialRef$curr4;
+        (_inputInitialRef$curr4 = inputInitialRef.current) === null || _inputInitialRef$curr4 === void 0 ? void 0 : _inputInitialRef$curr4.focus();
         setShowCalendarValueInitial(false);
       }
       if (calendarName === 'valueFinal') {
-        inputFinalRef.current?.focus();
+        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.current?.focus();
+        (_inputFinalRef$curren6 = inputFinalRef.current) === null || _inputFinalRef$curren6 === void 0 ? void 0 : _inputFinalRef$curren6.focus();
         setShowCalendarValueFinal(false);
       }
     }, 100);
@@ -238,12 +203,13 @@ const PeriodPicker = props => {
   const onInputBlur = e => {
     if (props.onBlur) props.onBlur(e);
   };
-  const onInputChange = (event, value) => {
+  const onInputChange = event => {
     if (event) {
       const {
-        name: changingAux
+        name: changingAux,
+        value
       } = event.target;
-      if (value && value.replace(/\D/g, '').trim().length !== 0) {
+      if (String(value).trim().length === 0) {
         if (changingAux === 'valueInitial') {
           setValueInitial(undefined);
         } else {
@@ -252,43 +218,24 @@ const PeriodPicker = props => {
       }
     }
   };
-  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) {
+    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.current?.focus();
-    if (showCalendarValueFinal) inputFinalRef.current?.focus();
-    if (valueDateName === 'valueFinal' && valueInitial && dateObj.isBefore(valueInitial)) {
-      setValueInitial(dateObj);
-      setValueFinal(valueInitial);
-      onDateChange({
-        initial: dateObj,
-        final: valueInitial
-      });
-    } else if (valueDateName === 'valueInitial' && valueFinal && dateObj.isAfter(valueFinal)) {
-      setValueInitial(valueFinal);
-      setValueFinal(dateObj);
-      onDateChange({
-        initial: valueFinal,
-        final: dateObj
-      });
-    } else if (valueDateName === 'valueInitial') {
+    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 {
+      // if (valueFinal && valueInitial && moment(valueFinal).isBefore(moment(valueInitial))) {
+      //   setValueInitial(valueFinal);
+      //   setValueFinal(valueInitial);
+      // }
       setValueFinal(dateObj);
       onDateChange({
         initial: valueInitial,
@@ -296,7 +243,8 @@ const PeriodPicker = props => {
       });
     }
     if (valueDateName === 'valueInitial' && !valueFinal && shouldOpenDropdown) {
-      inputFinalRef.current?.focus();
+      var _inputFinalRef$curren8;
+      (_inputFinalRef$curren8 = inputFinalRef.current) === null || _inputFinalRef$curren8 === void 0 ? void 0 : _inputFinalRef$curren8.focus();
       setTimeout(() => setShowCalendarValueFinal(true), 100);
     }
     if (shouldCloseOnSelect) {
@@ -346,8 +294,9 @@ const PeriodPicker = props => {
     }
   };
   const closePeriodSelection = () => {
+    var _inputFinalRef$curren9;
     setShowPeriodSelection(false);
-    inputFinalRef.current?.focus();
+    (_inputFinalRef$curren9 = inputFinalRef.current) === null || _inputFinalRef$curren9 === void 0 ? void 0 : _inputFinalRef$curren9.focus();
     setShowCalendarValueFinal(false);
   };
   const getButtonSelectPeriod = (0, _react.useCallback)(() => {
@@ -380,8 +329,10 @@ const PeriodPicker = props => {
     currentDateButton: buttonElement => currentDateButtonRef.current = buttonElement
   });
   const setPeriodDates = (selected, dates) => {
+    var _inputFinalRef$curren0;
     if (selected === 'custom') {
-      inputInitialRef.current?.focus();
+      var _inputInitialRef$curr6;
+      (_inputInitialRef$curr6 = inputInitialRef.current) === null || _inputInitialRef$curr6 === void 0 ? void 0 : _inputInitialRef$curr6.focus();
       setValuePeriodSelection(selected);
       setShowPeriodSelection(false);
       return;
@@ -394,7 +345,7 @@ const PeriodPicker = props => {
     if (shouldCloseOnSelect) {
       setShowPeriodSelection(false);
     }
-    inputFinalRef.current?.focus();
+    (_inputFinalRef$curren0 = inputFinalRef.current) === null || _inputFinalRef$curren0 === void 0 ? void 0 : _inputFinalRef$curren0.focus();
     setShowCalendarValueFinal(false);
   };
   const getCalendarInitial = () => {
@@ -452,6 +403,58 @@ const PeriodPicker = props => {
       }
     }, 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,
@@ -469,7 +472,7 @@ const PeriodPicker = props => {
       display: 'flex'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `label ${props.customClassForLabel} ${props.labelUppercase && ' -uppercase'}`,
+    className: "label ".concat(props.customClassForLabel, " ").concat(props.labelUppercase && ' -uppercase'),
     style: {
       alignSelf: 'center'
     }
@@ -486,10 +489,10 @@ const PeriodPicker = props => {
       width: 20
     }
   }, hint))), /*#__PURE__*/_react.default.createElement(_textContent.default, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: `periodpicker-component ${helperBase.getInputWrapperClass(_objectSpread(_objectSpread({}, props), {}, {
+    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,