linear-react-components-ui 0.4.77-beta.8 → 1.0.0-rc.1

package/lib/inputs/period/index.js

@@ -1,17 +1,17 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _moment = _interopRequireDefault(require("moment"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _PeriodList = _interopRequireDefault(require("./PeriodList"));
 
 var _BaseMask = _interopRequireDefault(require("../mask/BaseMask"));
 
@@ -25,21 +25,17 @@ var _icons = _interopRequireDefault(require("../../icons"));
 
 var _Dialog = _interopRequireDefault(require("./Dialog"));
 
-var _colorStyles = _interopRequireDefault(require("../../internals/colorStyles"));
-
-var _PeriodList = _interopRequireDefault(require("./PeriodList"));
-
 var helperBase = _interopRequireWildcard(require("../base/helpers"));
 
 require("../../assets/styles/periodpicker.scss");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -53,29 +49,34 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function usePrevious(value) {
-  var ref = (0, _react.useRef)();
-  (0, _react.useEffect)(function () {
-    ref.current = value;
-  });
-  return ref.current;
-}
-
 var PeriodPicker = function PeriodPicker(props) {
-  var _useState = (0, _react.useState)(props.value && props.value.initial ? (0, _moment["default"])(props.value.initial) : undefined),
+  var _props$value2, _props$value3;
+
+  var _props$showButtonOpen = props.showButtonOpen,
+      showButtonOpen = _props$showButtonOpen === void 0 ? true : _props$showButtonOpen,
+      _props$openOnFocus = props.openOnFocus,
+      openOnFocus = _props$openOnFocus === void 0 ? true : _props$openOnFocus,
+      _props$shouldCloseOnS = props.shouldCloseOnSelect,
+      shouldCloseOnSelect = _props$shouldCloseOnS === void 0 ? true : _props$shouldCloseOnS,
+      _props$showCalendarIn = props.showCalendarInDialog,
+      showCalendarInDialog = _props$showCalendarIn === void 0 ? false : _props$showCalendarIn,
+      _props$dialogSize = props.dialogSize,
+      dialogSize = _props$dialogSize === void 0 ? {
+    width: '350px',
+    height: '350px'
+  } : _props$dialogSize,
+      calendarColorStyle = props.calendarColorStyle;
+
+  var _useState = (0, _react.useState)(props.value && props.value.valueInitial ? (0, _moment.default)(props.value.valueInitial) : undefined),
       _useState2 = _slicedToArray(_useState, 2),
       valueInitial = _useState2[0],
       setValueInitial = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(props.value && props.value["final"] ? (0, _moment["default"])(props.value["final"]) : undefined),
+  var _useState3 = (0, _react.useState)(props.value && props.value.valueFinal ? (0, _moment.default)(props.value.valueFinal) : undefined),
       _useState4 = _slicedToArray(_useState3, 2),
       valueFinal = _useState4[0],
       setValueFinal = _useState4[1];
 
-  var previusValueInitial = usePrevious(valueInitial);
-  var previusValueFinal = usePrevious(valueFinal);
-  var previusValueProp = usePrevious(props.value);
-
   var _useState5 = (0, _react.useState)('valueInitial'),
       _useState6 = _slicedToArray(_useState5, 2),
       changing = _useState6[0],
@@ -96,26 +97,28 @@ var PeriodPicker = function PeriodPicker(props) {
       showPeriodSelection = _useState12[0],
       setShowPeriodSelection = _useState12[1];
 
-  var _useState13 = (0, _react.useState)(null),
+  var _useState13 = (0, _react.useState)(),
       _useState14 = _slicedToArray(_useState13, 2),
       inputDimensions = _useState14[0],
       setInputDimensions = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(undefined),
+  var _useState15 = (0, _react.useState)(),
       _useState16 = _slicedToArray(_useState15, 2),
       onDenied = _useState16[0],
       setOnDenied = _useState16[1];
 
-  var inputContainerRef = (0, _react.useRef)();
-  var inputInitialRef = (0, _react.useRef)();
-  var buttonOpenRef = (0, _react.useRef)();
-  var buttonSelectPeriodRef = (0, _react.useRef)();
-  var dropdownCalendarContainer = (0, _react.useRef)();
-  var dropdownPeriodContainer = (0, _react.useRef)();
-  var inputFinalRef = (0, _react.useRef)();
+  var inputContainerRef = (0, _react.useRef)(null);
+  var inputInitialRef = (0, _react.useRef)(null);
+  var buttonOpenRef = (0, _react.useRef)(null);
+  var buttonSelectPeriodRef = (0, _react.useRef)(null);
+  var dropdownCalendarContainer = (0, _react.useRef)(null);
+  var dropdownPeriodContainer = (0, _react.useRef)(null);
+  var inputFinalRef = (0, _react.useRef)(null);
 
   var onScreenResize = function onScreenResize() {
-    var inputDimensionsAux = inputContainerRef.current.getBoundingClientRect();
+    var _inputContainerRef$cu;
+
+    var inputDimensionsAux = inputContainerRef === null || inputContainerRef === void 0 ? void 0 : (_inputContainerRef$cu = inputContainerRef.current) === null || _inputContainerRef$cu === void 0 ? void 0 : _inputContainerRef$cu.getBoundingClientRect();
     setInputDimensions(inputDimensionsAux);
   };
 
@@ -142,45 +145,38 @@ var PeriodPicker = function PeriodPicker(props) {
     };
   }, []);
   (0, _react.useEffect)(function () {
-    if (valueFinal && valueInitial && (previusValueFinal !== valueFinal || previusValueInitial !== valueInitial)) {
-      // Se for selecionado um valor para data final menor que data inicial trocar as datas
-      if (valueFinal < valueInitial) {
-        var valueInitialAux = (0, _moment["default"])(valueInitial);
-        setValueInitial(valueFinal);
-        setValueFinal(valueInitialAux); // Sempre que for alterado o estado interno chamar o callback
-      } else if (props.onChange) {
-        var initial = valueInitial ? valueInitial.format('YYYY-MM-DD') : '';
-
-        var _final = valueFinal ? valueFinal.format('YYYY-MM-DD') : '';
-
-        props.onChange({
-          initial: initial,
-          "final": _final
-        });
-      }
+    if (valueFinal && valueInitial && (0, _moment.default)(valueFinal).isBefore((0, _moment.default)(valueInitial))) {
+      setValueInitial(valueFinal);
+      setValueFinal(valueInitial);
+    } else if (props.onChange) {
+      var initial = valueInitial ? valueInitial.format('YYYY-MM-DD') : '';
+      var final = valueFinal ? valueFinal.format('YYYY-MM-DD') : '';
+      props.onChange(undefined, '', {
+        initial: initial,
+        final: final
+      });
     }
-  }, [valueFinal, valueInitial]);
+  }, [valueInitial, valueFinal]);
   (0, _react.useEffect)(function () {
-    // sempre que alterado a prop 'value' atualiza o state interno
-    if (props.value !== previusValueProp) {
+    if (props.value) {
       var _props$value = props.value,
-          valueInitialProp = _props$value.initial,
-          valueFinalProp = _props$value["final"];
+          valueInitialProp = _props$value.valueInitial,
+          valueFinalProp = _props$value.valueFinal;
       var newValueInitial;
       var newValueFinal;
 
-      if ((0, _moment["default"])(valueInitialProp, 'YYYY-MM-DD', true).isValid()) {
-        newValueInitial = (0, _moment["default"])(valueInitialProp, 'YYYY-MM-DD');
+      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');
+      if ((0, _moment.default)(valueFinalProp, 'YYYY-MM-DD', true).isValid()) {
+        newValueFinal = (0, _moment.default)(valueFinalProp, 'YYYY-MM-DD');
       }
 
       setValueInitial(newValueInitial);
       setValueFinal(newValueFinal);
     }
-  }, [props.value]);
+  }, [(_props$value2 = props.value) === null || _props$value2 === void 0 ? void 0 : _props$value2.valueInitial, (_props$value3 = props.value) === null || _props$value3 === void 0 ? void 0 : _props$value3.valueFinal]);
 
   var openCalendar = function openCalendar() {
     setShowCalendar(true);
@@ -192,48 +188,48 @@ var PeriodPicker = function PeriodPicker(props) {
   };
 
   var onInputFocus = function onInputFocus(e) {
-    var openOnFocus = props.openOnFocus;
-    var name = e.target.name;
+    var _ref = e.target,
+        name = _ref.name;
     setChanging(name);
     if (openOnFocus) openCalendar();
   };
 
   var onInputChange = function onInputChange(event, value) {
-    var changingAux = event.target.name;
-
-    if (value.replace(/\D/g, '') === '') {
-      if (changingAux === 'valueInitial') {
-        setValueInitial(undefined);
-      } else {
-        setValueFinal(undefined);
+    if (event) {
+      var _ref2 = event.target,
+          changingAux = _ref2.name;
+
+      if (value && value.replace(/\D/g, '') === '') {
+        if (changingAux === 'valueInitial') {
+          setValueInitial(undefined);
+        } else {
+          setValueFinal(undefined);
+        }
       }
     }
   };
 
   var setValue = function setValue(e, value) {
     var sholdOpenDropdown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-    var changingAux = e.target.name;
-    var dateObj = (0, _moment["default"])(value, 'DD/MM/YYYY');
+    var changingAux = e ? e.target.name : '';
+    var dateObj = (0, _moment.default)(value, 'DD/MM/YYYY');
 
     if (changingAux === 'valueInitial') {
       setValueInitial(dateObj);
     } else {
       setValueFinal(dateObj);
     }
-    /*
-      Caso valor setado for inicial e valor final vazio,
-      dar focus na data final e abrir dropdown para selecao de data final
-    */
-
 
     if (changingAux === 'valueInitial' && !valueFinal && sholdOpenDropdown) {
-      setChanging(valueFinal);
+      var _inputFinalRef$curren;
+
+      if (valueFinal) setChanging(valueFinal);
       setShowCalendar(false);
-      inputFinalRef.current.focus();
+      (_inputFinalRef$curren = inputFinalRef.current) === null || _inputFinalRef$curren === void 0 ? void 0 : _inputFinalRef$curren.focus();
       setTimeout(function () {
         return setShowCalendar(true);
       }, 100);
-    } else if (props.shouldCloseOnSelect) {
+    } else if (shouldCloseOnSelect) {
       setShowCalendar(false);
     }
   };
@@ -244,21 +240,22 @@ var PeriodPicker = function PeriodPicker(props) {
   };
 
   var getButtonOpen = function getButtonOpen() {
-    var showButtonOpen = props.showButtonOpen;
     if (!showButtonOpen) return null;
-    return /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
+    return /*#__PURE__*/_react.default.createElement(_buttons.default, {
       key: "button-open",
       boxShadow: false,
-      icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+      icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
         name: "calendar"
       }),
       onClick: function onClick() {
-        inputInitialRef.current.focus();
+        var _inputInitialRef$curr;
+
+        (_inputInitialRef$curr = inputInitialRef.current) === null || _inputInitialRef$curr === void 0 ? void 0 : _inputInitialRef$curr.focus();
         setChanging('valueInitial');
         openCalendar();
       },
       customClass: "calendar-button",
-      tabIndex: "-1",
+      tabIndex: -1,
       targetRef: function targetRef(ref) {
         buttonOpenRef.current = ref;
       },
@@ -266,10 +263,10 @@ var PeriodPicker = function PeriodPicker(props) {
     });
   };
 
-  var getPeriodSelection = function getPeriodSelection(valuePeriodSelectionAux, setPeridDates) {
-    return /*#__PURE__*/_react["default"].createElement(_PeriodList["default"], {
+  var getPeriodSelection = function getPeriodSelection(valuePeriodSelectionAux, setPeriodDates) {
+    return /*#__PURE__*/_react.default.createElement(_PeriodList.default, {
       selected: valuePeriodSelectionAux,
-      handleOnSelect: setPeridDates
+      handleOnSelect: setPeriodDates
     });
   };
 
@@ -283,17 +280,17 @@ var PeriodPicker = function PeriodPicker(props) {
   };
 
   var getButtonSelectPeriod = function getButtonSelectPeriod() {
-    return /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
+    return /*#__PURE__*/_react.default.createElement(_buttons.default, {
       key: "button-select-period",
       boxShadow: false,
-      icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+      icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
         name: "more1"
       }),
       onClick: function onClick() {
         return openPeriodSelecion();
       },
       customClass: "calendar-button",
-      tabIndex: "-1",
+      tabIndex: -1,
       targetRef: function targetRef(ref) {
         buttonSelectPeriodRef.current = ref;
       },
@@ -301,9 +298,9 @@ var PeriodPicker = function PeriodPicker(props) {
     });
   };
 
-  var getCalendar = function getCalendar(value, calendarColorStyle, changingAux) {
-    return /*#__PURE__*/_react["default"].createElement(_calendar["default"], {
-      currentDate: value !== undefined ? value : (0, _moment["default"])(),
+  var getCalendar = function getCalendar(value, calendarColorStyleCalendar, changingAux) {
+    return /*#__PURE__*/_react.default.createElement(_calendar.default, {
+      currentDate: value !== undefined ? (0, _moment.default)(value) : (0, _moment.default)(),
       onDateChange: function onDateChange(date) {
         return setValue({
           target: {
@@ -311,13 +308,15 @@ var PeriodPicker = function PeriodPicker(props) {
           }
         }, date);
       },
-      colorStyle: calendarColorStyle
+      colorStyle: calendarColorStyleCalendar
     });
   };
 
-  var setPeridDates = function setPeridDates(selected, dates) {
+  var setPeriodDates = function setPeriodDates(selected, dates) {
     if (selected === 'custom') {
-      inputInitialRef.current.focus();
+      var _inputInitialRef$curr2;
+
+      (_inputInitialRef$curr2 = inputInitialRef.current) === null || _inputInitialRef$curr2 === void 0 ? void 0 : _inputInitialRef$curr2.focus();
       setValuePeriodSelection(selected);
       setChanging('valueInitial');
       setShowPeriodSelection(false);
@@ -326,23 +325,23 @@ var PeriodPicker = function PeriodPicker(props) {
     }
 
     setValuePeriodSelection(selected);
-    setValueInitial(dates[0]);
-    setValueFinal(dates[1]);
 
-    if (props.shouldCloseOnSelect) {
+    if (dates) {
+      setValueInitial(dates[0]);
+      setValueFinal(dates[1]);
+    }
+
+    if (shouldCloseOnSelect) {
       setShowPeriodSelection(false);
     }
   };
 
   var getWrapperComponentCalendar = function getWrapperComponentCalendar() {
     var value = changing === 'valueInitial' ? valueInitial : valueFinal;
-    var showCalendarInDialog = props.showCalendarInDialog,
-        dialogSize = props.dialogSize,
-        calendarColorStyle = props.calendarColorStyle;
     if (onDenied && onDenied.readOnly) return null;
 
     if (showCalendarInDialog) {
-      return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+      return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
         dialogSize: dialogSize,
         handlerClose: function handlerClose() {
           return setShowCalendar(false);
@@ -350,11 +349,11 @@ var PeriodPicker = function PeriodPicker(props) {
       }, getCalendar(value, calendarColorStyle, changing));
     }
 
-    return /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+    return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
       targetElement: inputContainerRef.current,
-      topPosition: inputDimensions.top + inputDimensions.height + 5,
-      leftPosition: inputDimensions.left,
-      width: inputDimensions.width,
+      topPosition: inputDimensions ? inputDimensions.top + inputDimensions.height + 5 : '',
+      leftPosition: inputDimensions ? inputDimensions.left : '',
+      width: inputDimensions ? inputDimensions.width : '',
       dropdownRef: function dropdownRef(el) {
         dropdownCalendarContainer.current = el;
       }
@@ -362,54 +361,45 @@ var PeriodPicker = function PeriodPicker(props) {
   };
 
   var getWrapperComponentPeriodSelection = function getWrapperComponentPeriodSelection() {
-    var showCalendarInDialog = props.showCalendarInDialog,
-        dialogSize = props.dialogSize;
-
     if (showCalendarInDialog) {
-      return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+      return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
         dialogSize: dialogSize,
         handlerClose: function handlerClose() {
           return setShowPeriodSelection(false);
         }
-      }, getPeriodSelection(valuePeriodSelection, setPeridDates));
+      }, getPeriodSelection(valuePeriodSelection, setPeriodDates));
     }
 
-    return /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+    return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
       targetElement: inputContainerRef.current,
-      topPosition: inputDimensions.top + inputDimensions.height + 5,
-      leftPosition: inputDimensions.left,
-      width: inputDimensions.width,
+      topPosition: inputDimensions ? inputDimensions.top + inputDimensions.height + 5 : '',
+      leftPosition: inputDimensions ? inputDimensions.left : '',
+      width: inputDimensions ? inputDimensions.width : '',
       dropdownRef: function dropdownRef(el) {
         dropdownPeriodContainer.current = el;
       }
-    }, getPeriodSelection(valuePeriodSelection, setPeridDates));
+    }, getPeriodSelection(valuePeriodSelection, setPeriodDates));
   };
 
-  var required = props.required,
-      label = props.label,
-      customClassForLabel = props.customClassForLabel,
-      labelUppercase = props.labelUppercase,
-      errorMessages = props.errorMessages;
   if (onDenied && onDenied.unvisible) return null;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: "input-base-component"
-  }, label && /*#__PURE__*/_react["default"].createElement("div", {
+  }, props.label && /*#__PURE__*/_react.default.createElement("div", {
     className: "labelcontainer"
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "label ".concat(customClassForLabel, " ").concat(labelUppercase && ' -uppercase')
-  }, label, required && /*#__PURE__*/_react["default"].createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "label ".concat(props.customClassForLabel, " ").concat(props.labelUppercase && ' -uppercase')
+  }, props.label, props.required && /*#__PURE__*/_react.default.createElement("span", {
     className: "-requiredlabel"
-  }, "*"))), /*#__PURE__*/_react["default"].createElement("div", {
+  }, "*"))), /*#__PURE__*/_react.default.createElement("div", {
     className: "periodpicker-component ".concat(helperBase.getInputWrapperClass(_extends({}, props, {
+      value: !valueInitial ? '' : (0, _moment.default)(valueInitial).format('DD/MM/YYYY'),
       disabled: shouldDisable()
     }))),
-    ref: function ref(el) {
-      inputContainerRef.current = el;
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_BaseMask["default"], {
+    ref: inputContainerRef
+  }, /*#__PURE__*/_react.default.createElement(_BaseMask.default, {
     permissionAttr: props.permissionAttr,
     name: "valueInitial",
-    value: !valueInitial ? '' : valueInitial.format('DD/MM/YYYY'),
+    value: !valueInitial ? '' : (0, _moment.default)(valueInitial).format('DD/MM/YYYY'),
     mask: "00/00/0000",
     onComplete: function onComplete(e, date) {
       setValue(e, date, false);
@@ -417,74 +407,34 @@ var PeriodPicker = function PeriodPicker(props) {
     onFocus: onInputFocus,
     onChange: onInputChange,
     inputRef: function inputRef(el) {
-      inputInitialRef.current = el;
+      if (el) inputInitialRef.current = el;
     },
-    handlerSetOnDenied: function handlerSetOnDenied(value) {
-      return setOnDenied(value);
+    handlerSetOnDenied: function handlerSetOnDenied(denied) {
+      setOnDenied(denied);
     },
-    required: required
-  }), /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+    required: props.required
+  }), /*#__PURE__*/_react.default.createElement(_icons.default, {
     name: "arrow_right",
     customClass: "separation_icon"
-  }), /*#__PURE__*/_react["default"].createElement(_BaseMask["default"], {
+  }), /*#__PURE__*/_react.default.createElement(_BaseMask.default, {
     permissionAttr: props.permissionAttr,
     name: "valueFinal",
-    value: !valueFinal ? '' : valueFinal.format('DD/MM/YYYY'),
+    value: !valueFinal ? '' : (0, _moment.default)(valueFinal).format('DD/MM/YYYY'),
     mask: "00/00/0000",
     onComplete: function onComplete(e, date) {
-      return setValue(e, date, false);
+      setValue(e, date, false);
     },
     onFocus: onInputFocus,
     onChange: onInputChange,
     inputRef: function inputRef(el) {
       inputFinalRef.current = el;
     },
-    handlerSetOnDenied: function handlerSetOnDenied(value) {
-      return setOnDenied(value);
+    handlerSetOnDenied: function handlerSetOnDenied(denied) {
+      return setOnDenied(denied);
     },
-    required: required
-  }), getButtonOpen(), getButtonSelectPeriod()), showCalendar && getWrapperComponentCalendar(), showPeriodSelection && getWrapperComponentPeriodSelection(), helperBase.getErrorMessages(errorMessages));
+    required: props.required
+  }), getButtonOpen(), getButtonSelectPeriod()), showCalendar && getWrapperComponentCalendar(), showPeriodSelection && getWrapperComponentPeriodSelection(), props.errorMessages && helperBase.getErrorMessages(props.errorMessages));
 };
 
-PeriodPicker.propTypes = {
-  label: _propTypes["default"].string,
-  value: _propTypes["default"].object,
-  customClassForLabel: _propTypes["default"].string,
-  labelUppercase: _propTypes["default"].string,
-  showButtonOpen: _propTypes["default"].bool,
-  shouldCloseOnSelect: _propTypes["default"].bool,
-  openOnFocus: _propTypes["default"].bool,
-  showCalendarInDialog: _propTypes["default"].bool,
-  dialogSize: _propTypes["default"].object,
-  calendarColorStyle: _propTypes["default"].oneOf(['', _colorStyles["default"].PRIMARY, _colorStyles["default"].SUCCESS, _colorStyles["default"].WARNING, _colorStyles["default"].INFO, _colorStyles["default"].DANGER]),
-  required: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func,
-  disabled: _propTypes["default"].bool,
-  permissionAttr: _propTypes["default"].object,
-  errorMessages: _propTypes["default"].arrayOf(_propTypes["default"].string)
-};
-PeriodPicker.defaultProps = {
-  value: {
-    valueInitial: undefined,
-    valueFinal: undefined
-  },
-  label: undefined,
-  customClassForLabel: undefined,
-  labelUppercase: undefined,
-  showButtonOpen: true,
-  openOnFocus: true,
-  shouldCloseOnSelect: true,
-  showCalendarInDialog: false,
-  dialogSize: {
-    width: '350px',
-    height: '350px'
-  },
-  calendarColorStyle: '',
-  required: false,
-  onChange: undefined,
-  disabled: false,
-  permissionAttr: undefined,
-  errorMessages: []
-};
 var _default = PeriodPicker;
-exports["default"] = _default;
+exports.default = _default;

package/lib/inputs/period/types.d.ts

@@ -0,0 +1,58 @@
+import { Moment } from 'moment';
+import { ReactNode } from 'react';
+import { ColorStyles } from '../../@types/ColorStyles.js';
+import { Period } from '../../@types/Period.js';
+import { PermissionAttr } from '../../@types/PermissionAttr.js';
+import { CustomInputEvent } from '../base/types.js';
+
+declare type DateTypes = 'today' | 'week' | 'lastweek' | 'last15' | 'month' | 'lastmonth';
+interface IPeriodOptions {
+    id: DateTypes | 'custom';
+    label?: string;
+}
+interface IDialogProps {
+    children: ReactNode | ReactNode[];
+    handlerClose: () => void;
+    dialogSize: {
+        width: string;
+        height: string;
+    };
+}
+interface IPeriodDropdownProps {
+    topPosition: number | string;
+    leftPosition: number | string;
+    width: number | string;
+    children: JSX.Element | JSX.Element[];
+    dropdownRef: (el: HTMLElement) => void;
+    targetElement?: HTMLDivElement | HTMLInputElement | null;
+}
+interface IPeriodPickerProps {
+    label?: string;
+    value?: {
+        valueInitial?: Moment | string;
+        valueFinal?: Moment | string;
+    };
+    customClassForLabel?: string;
+    labelUppercase?: boolean;
+    showButtonOpen?: boolean;
+    shouldCloseOnSelect?: boolean;
+    openOnFocus?: boolean;
+    showCalendarInDialog?: boolean;
+    dialogSize?: {
+        width: string;
+        height: string;
+    };
+    calendarColorStyle?: ColorStyles;
+    required?: boolean;
+    onChange?: (event?: CustomInputEvent, maskValue?: string, date?: Period) => void;
+    disabled?: boolean;
+    permissionAttr?: PermissionAttr;
+    errorMessages?: string[];
+    name?: string;
+}
+interface IPeriodListProps {
+    handleOnSelect: (value: DateTypes | 'custom', date: Moment[] | null) => void;
+    selected?: string;
+}
+
+export { DateTypes, IDialogProps, IPeriodDropdownProps, IPeriodListProps, IPeriodOptions, IPeriodPickerProps };

package/lib/inputs/period/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/inputs/search/index.d.ts

@@ -0,0 +1,11 @@
+import { ISearchProps } from '../types.js';
+import 'react';
+import '../../@types/PermissionAttr.js';
+import '../../@types/DataCombo.js';
+import '../select/types.js';
+import '../base/types.js';
+import '../../@types/Period.js';
+
+declare const SearchField: (props: ISearchProps) => JSX.Element | null;
+
+export { SearchField as default };