linear-react-components-ui 1.1.24-rc.1 → 1.1.25-beta.10

package/lib/inputs/multiSelect/index.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _lodash = _interopRequireDefault(require("lodash"));
-var _react = _interopRequireWildcard(require("react"));
 var uuid = _interopRequireWildcard(require("uuid"));
+var _react = _interopRequireWildcard(require("react"));
 var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
 var _ActionButtons = _interopRequireDefault(require("./ActionButtons"));
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
@@ -30,7 +30,8 @@ const MultiSelectField = props => {
     value,
     onBlur,
     gridLayout,
-    dropdownAlignButton = 'left'
+    dropdownAlignButton = 'left',
+    dropdownMaxWidth = undefined
   } = props;
   const componentId = "multiSelect-component".concat(uuid.v1());
   const [dataCombo, setDataCombo] = (0, _react.useState)(dataSource);
@@ -43,6 +44,7 @@ const MultiSelectField = props => {
   const [onDenied, setOnDenied] = (0, _react.useState)();
   const [insideComponent, setInsideComponent] = (0, _react.useState)(false);
   const [elementStyles, setElementStyles] = (0, _react.useState)();
+  const inputRef = (0, _react.useRef)(null);
   const componentRef = (0, _react.useRef)(null);
   const selectWrapper = (0, _react.useRef)();
   const handleOnSelect = itemSelected => {
@@ -91,8 +93,9 @@ const MultiSelectField = props => {
     setInputValue(currentValue);
   };
   const onOpenClose = () => {
-    setOpened(!opened);
+    setOpened(prevState => !prevState);
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
+    setDataCombo(dataSource);
   };
   const onCheckAll = function () {
     let fromFilter = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -118,6 +121,17 @@ const MultiSelectField = props => {
       setInputValue('');
     }
   };
+  const onBlurOutSide = event => {
+    var _componentRef$current2;
+    const {
+      relatedTarget
+    } = event;
+    if (relatedTarget !== componentRef.current && !((_componentRef$current2 = componentRef.current) !== null && _componentRef$current2 !== void 0 && _componentRef$current2.contains(relatedTarget))) {
+      setOpened(false);
+      setDataCombo(dataSource);
+      setInputValue('');
+    }
+  };
   const setOnDeniedValue = onDeniedValue => {
     setOnDenied(onDeniedValue);
   };
@@ -144,10 +158,12 @@ const MultiSelectField = props => {
     }
     window.addEventListener('resize', onScreenResize);
     document.addEventListener('click', onClickOutSide);
+    document.addEventListener('focusout', onBlurOutSide);
     document.addEventListener('mousemove', onMouseMove);
     return () => {
       window.removeEventListener('resize', onScreenResize);
       document.removeEventListener('click', onClickOutSide);
+      document.removeEventListener('focusout', onBlurOutSide);
       document.removeEventListener('mousemove', onMouseMove);
     };
   }, []);
@@ -175,8 +191,9 @@ const MultiSelectField = props => {
     id: componentId,
     ref: componentRef,
     className: "multiSelect-component"
-  }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+  }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, _lodash.default.omit(props, ['dropdownMaxWidth']), {
     value: label,
+    inputRef: inputRef,
     onFocus: () => {
       onFocus();
     },
@@ -213,7 +230,8 @@ const MultiSelectField = props => {
     onFilter: handleOnFilter,
     onFocus: onFocus,
     onBlur: onBlurComponent,
-    gridWrapperStyle: elementStyles
+    gridWrapperStyle: elementStyles,
+    dropdownMaxWidth: dropdownMaxWidth
   })));
 };
 var _default = exports.default = MultiSelectField;

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

@@ -44,6 +44,7 @@ interface IDropdownMultiSelectProps {
     };
     selectFieldRef?: RefObject<HTMLDivElement>;
     dropdownMaxHeight?: number;
+    dropdownMaxWidth?: number;
 }
 interface IMultiSelectProps {
     dataSource?: DataCombo[];
@@ -60,6 +61,7 @@ interface IMultiSelectProps {
     hintPosition?: 'below' | 'onLabelRight';
     themePopover?: 'light' | 'dark';
     popoverAlign?: 'right' | 'left';
+    dropdownMaxWidth?: number;
 }
 
 export { DescriptionKey, GetFilteredParams, IActionButtonsProps, IDropdownMultiSelectProps, IMultiSelectProps };

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-".concat(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/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,7 +17,6 @@ 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"));
@@ -42,9 +42,7 @@ const PeriodPicker = props => {
     hintPosition = 'below',
     themePopover = 'light',
     popoverAlign = 'left',
-    gridLayout,
-    nameDateInitial = 'valueInitial',
-    nameDateFinal = 'valueFinal'
+    gridLayout
   } = props;
   const idValueInitial = (0, _react.useId)();
   const idValueFinal = (0, _react.useId)();
@@ -109,30 +107,6 @@ const PeriodPicker = props => {
         setShowCalendarValueFinal(false);
       }
     }
-    if (calendarContainerRef.current && event && event.key && event.key === 'Tab') {
-      var _calendarContainerRef, _calendarContainerRef2;
-      const buttonForNavigateCalendar = (_calendarContainerRef = calendarContainerRef.current) === null || _calendarContainerRef === void 0 ? void 0 : _calendarContainerRef.getElementsByClassName('navbutton');
-      const datePicked = (_calendarContainerRef2 = calendarContainerRef.current) === null || _calendarContainerRef2 === void 0 ? void 0 : _calendarContainerRef2.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) {
-        var _inputInitialRef$curr2;
-        event.preventDefault();
-        (_inputInitialRef$curr2 = inputInitialRef.current) === null || _inputInitialRef$curr2 === void 0 ? void 0 : _inputInitialRef$curr2.focus();
-      }
-      if (!event.shiftKey && calendarOpenedIsInitial && document.activeElement === lastElement) {
-        var _inputFinalRef$curren3;
-        event.preventDefault();
-        (_inputFinalRef$curren3 = inputFinalRef.current) === null || _inputFinalRef$curren3 === void 0 ? void 0 : _inputFinalRef$curren3.focus();
-      }
-    }
     event.stopPropagation();
   };
   const keepPositionCalendarByScroll = () => {
@@ -143,52 +117,13 @@ const PeriodPicker = props => {
       dropdownCalendarContainer.current.style.top = String(positionTop).concat('px');
     }
   };
-  (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 (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) {
-        var _inputInitialRef$curr3;
-        (_inputInitialRef$curr3 = inputInitialRef.current) === null || _inputInitialRef$curr3 === void 0 ? void 0 : _inputInitialRef$curr3.focus();
+        var _inputInitialRef$curr2;
+        (_inputInitialRef$curr2 = inputInitialRef.current) === null || _inputInitialRef$curr2 === void 0 ? void 0 : _inputInitialRef$curr2.focus();
         if (showCalendarInDialog) {
           setTimeout(() => {
             var _currentDateButtonRef;
@@ -202,8 +137,8 @@ const PeriodPicker = props => {
       setCurrentTypeDate('valueFinal');
       setShowCalendarValueInitial(false);
       if (!showCalendarValueFinal) {
-        var _inputFinalRef$curren4;
-        (_inputFinalRef$curren4 = inputFinalRef.current) === null || _inputFinalRef$curren4 === void 0 ? void 0 : _inputFinalRef$curren4.focus();
+        var _inputFinalRef$curren3;
+        (_inputFinalRef$curren3 = inputFinalRef.current) === null || _inputFinalRef$curren3 === void 0 ? void 0 : _inputFinalRef$curren3.focus();
         if (showCalendarInDialog) {
           setTimeout(() => {
             var _currentDateButtonRef2;
@@ -219,32 +154,41 @@ const PeriodPicker = props => {
   };
   const closeCalendar = calendarName => {
     if (calendarName === 'valueInitial') {
-      var _inputInitialRef$curr4;
-      (_inputInitialRef$curr4 = inputInitialRef.current) === null || _inputInitialRef$curr4 === void 0 ? void 0 : _inputInitialRef$curr4.focus();
+      var _inputInitialRef$curr3;
+      (_inputInitialRef$curr3 = inputInitialRef.current) === null || _inputInitialRef$curr3 === void 0 ? void 0 : _inputInitialRef$curr3.focus();
     }
     if (calendarName === 'valueFinal') {
-      var _inputFinalRef$curren5;
-      (_inputFinalRef$curren5 = inputFinalRef.current) === null || _inputFinalRef$curren5 === void 0 ? void 0 : _inputFinalRef$curren5.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') {
-        var _inputInitialRef$curr5;
-        (_inputInitialRef$curr5 = inputInitialRef.current) === null || _inputInitialRef$curr5 === void 0 ? void 0 : _inputInitialRef$curr5.focus();
+        var _inputInitialRef$curr4;
+        (_inputInitialRef$curr4 = inputInitialRef.current) === null || _inputInitialRef$curr4 === void 0 ? void 0 : _inputInitialRef$curr4.focus();
         setShowCalendarValueInitial(false);
       }
       if (calendarName === 'valueFinal') {
-        var _inputFinalRef$curren6;
-        (_inputFinalRef$curren6 = inputFinalRef.current) === null || _inputFinalRef$curren6 === void 0 ? void 0 : _inputFinalRef$curren6.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$curren7;
+        var _inputFinalRef$curren6;
         setShowPeriodSelection(false);
-        (_inputFinalRef$curren7 = inputFinalRef.current) === null || _inputFinalRef$curren7 === void 0 ? void 0 : _inputFinalRef$curren7.focus();
+        (_inputFinalRef$curren6 = inputFinalRef.current) === null || _inputFinalRef$curren6 === void 0 ? void 0 : _inputFinalRef$curren6.focus();
         setShowCalendarValueFinal(false);
       }
     }, 100);
@@ -259,13 +203,14 @@ 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 (changingAux === nameDateInitial) {
+      if (String(value).trim().length === 0) {
+        if (changingAux === 'valueInitial') {
           setValueInitial(undefined);
         } else {
           setValueFinal(undefined);
@@ -273,38 +218,14 @@ 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$curr6, _inputFinalRef$curren8;
+    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$curr6 = inputInitialRef.current) === null || _inputInitialRef$curr6 === void 0 ? void 0 : _inputInitialRef$curr6.focus();
-    if (showCalendarValueFinal) (_inputFinalRef$curren8 = inputFinalRef.current) === null || _inputFinalRef$curren8 === void 0 ? void 0 : _inputFinalRef$curren8.focus();
-    if (valueDateName === nameDateFinal && valueInitial && dateObj.isBefore(valueInitial)) {
-      setValueInitial(dateObj);
-      setValueFinal(valueInitial);
-      onDateChange({
-        initial: dateObj,
-        final: valueInitial
-      });
-    } else if (valueDateName === nameDateInitial && valueFinal && dateObj.isAfter(valueFinal)) {
-      setValueInitial(valueFinal);
-      setValueFinal(dateObj);
-      onDateChange({
-        initial: valueFinal,
-        final: dateObj
-      });
-    } else if (valueDateName === nameDateInitial) {
+    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,
@@ -317,9 +238,9 @@ const PeriodPicker = props => {
         final: dateObj
       });
     }
-    if (valueDateName === nameDateInitial && !valueFinal && shouldOpenDropdown) {
-      var _inputFinalRef$curren9;
-      (_inputFinalRef$curren9 = inputFinalRef.current) === null || _inputFinalRef$curren9 === void 0 ? void 0 : _inputFinalRef$curren9.focus();
+    if (valueDateName === 'valueInitial' && !valueFinal && shouldOpenDropdown) {
+      var _inputFinalRef$curren8;
+      (_inputFinalRef$curren8 = inputFinalRef.current) === null || _inputFinalRef$curren8 === void 0 ? void 0 : _inputFinalRef$curren8.focus();
       setTimeout(() => setShowCalendarValueFinal(true), 100);
     }
     if (shouldCloseOnSelect) {
@@ -369,9 +290,9 @@ const PeriodPicker = props => {
     }
   };
   const closePeriodSelection = () => {
-    var _inputFinalRef$curren0;
+    var _inputFinalRef$curren9;
     setShowPeriodSelection(false);
-    (_inputFinalRef$curren0 = inputFinalRef.current) === null || _inputFinalRef$curren0 === void 0 ? void 0 : _inputFinalRef$curren0.focus();
+    (_inputFinalRef$curren9 = inputFinalRef.current) === null || _inputFinalRef$curren9 === void 0 ? void 0 : _inputFinalRef$curren9.focus();
     setShowCalendarValueFinal(false);
   };
   const getButtonSelectPeriod = (0, _react.useCallback)(() => {
@@ -404,10 +325,10 @@ const PeriodPicker = props => {
     currentDateButton: buttonElement => currentDateButtonRef.current = buttonElement
   });
   const setPeriodDates = (selected, dates) => {
-    var _inputFinalRef$curren1;
+    var _inputFinalRef$curren0;
     if (selected === 'custom') {
-      var _inputInitialRef$curr7;
-      (_inputInitialRef$curr7 = inputInitialRef.current) === null || _inputInitialRef$curr7 === void 0 ? void 0 : _inputInitialRef$curr7.focus();
+      var _inputInitialRef$curr6;
+      (_inputInitialRef$curr6 = inputInitialRef.current) === null || _inputInitialRef$curr6 === void 0 ? void 0 : _inputInitialRef$curr6.focus();
       setValuePeriodSelection(selected);
       setShowPeriodSelection(false);
       return;
@@ -420,7 +341,7 @@ const PeriodPicker = props => {
     if (shouldCloseOnSelect) {
       setShowPeriodSelection(false);
     }
-    (_inputFinalRef$curren1 = inputFinalRef.current) === null || _inputFinalRef$curren1 === void 0 ? void 0 : _inputFinalRef$curren1.focus();
+    (_inputFinalRef$curren0 = inputFinalRef.current) === null || _inputFinalRef$curren0 === void 0 ? void 0 : _inputFinalRef$curren0.focus();
     setShowCalendarValueFinal(false);
   };
   const getCalendarInitial = () => {
@@ -431,7 +352,7 @@ const PeriodPicker = props => {
         handlerClose: () => onCloseDateDialog('valueInitial'),
         dialogSize: dialogSize,
         onOpenChange: setShowCalendarValueInitial
-      }, getCalendar(valueInitial, calendarColorStyle, nameDateInitial));
+      }, getCalendar(valueInitial, calendarColorStyle, 'valueInitial'));
     }
     return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
       containerRef: wrapperBaseInputPeriodRef,
@@ -450,7 +371,7 @@ const PeriodPicker = props => {
         handlerClose: () => onCloseDateDialog('valueFinal'),
         dialogSize: dialogSize,
         onOpenChange: setShowCalendarValueFinal
-      }, getCalendar(valueFinal, calendarColorStyle, nameDateFinal));
+      }, getCalendar(valueFinal, calendarColorStyle, 'valueFinal'));
     }
     return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
       containerRef: wrapperBaseInputPeriodRef,
@@ -478,6 +399,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,

package/lib/inputs/search/index.js

@@ -25,9 +25,10 @@ const SearchField = props => {
   const {
     resetButton = true,
     advancedFilterProps = {},
-    value
+    value,
+    drawerFilterIsOpened = false
   } = props;
-  const [advancedFilterOpened, setAdvancedFilterOpened] = (0, _react.useState)(false);
+  const [advancedFilterOpened, setAdvancedFilterOpened] = (0, _react.useState)(drawerFilterIsOpened);
   const [valorCampo, setValorCampo] = (0, _react.useState)('');
   const [onDenied, setOnDenied] = (0, _react.useState)();
   const {
@@ -106,6 +107,9 @@ const SearchField = props => {
       setValorCampo(value);
     }
   }, [value]);
+  (0, _react.useEffect)(() => {
+    setAdvancedFilterOpened(drawerFilterIsOpened);
+  }, [drawerFilterIsOpened]);
   if (onDenied && onDenied.unvisible) {
     return null;
   }

package/lib/inputs/select/multiple/index.js

@@ -33,7 +33,8 @@ const MultipleSelect = props => {
     customClassForWrapper,
     customClassForInputContent,
     customClassForSideButtons,
-    disabled = false
+    disabled = false,
+    dropdownMaxWidth = undefined
   } = props;
   const [dataCombo, setDataCombo] = (0, _react.useState)(dataSource);
   const [currents, setCurrents] = (0, _react.useState)([]);
@@ -278,7 +279,7 @@ const MultipleSelect = props => {
     opened: opened,
     dataCombo: dataCombo,
     currents: currents,
-    dropdownWidth: dropdownWidth || 0
+    dropdownWidth: dropdownMaxWidth || dropdownWidth || 0
   })), /*#__PURE__*/_react.default.createElement(_hint.default, {
     visible: !!hint && hintPosition === 'below',
     customClass: "hint",

package/lib/inputs/select/simple/index.js

@@ -38,7 +38,8 @@ const SimpleSelect = props => {
     customClassForWrapper,
     customClassForInputContent,
     customClassForLabel,
-    customClassForSideButtons
+    customClassForSideButtons,
+    dropdownMaxWidth = undefined
   } = props;
   const descriptionKeyIsString = typeof descriptionKey === 'string';
   const dataSourceWithAllOptions = allOptions ? [{
@@ -310,8 +311,8 @@ const SimpleSelect = props => {
     handleOnBlur: () => onBlur,
     handleOnFocus: onFocus,
     dataCombo: dataCombo,
-    dropdownWidth: dropdownWidth || 0,
-    searchNotFoundText: searchNotFoundText
+    searchNotFoundText: searchNotFoundText,
+    dropdownWidth: dropdownMaxWidth || dropdownWidth || 0
   })));
 };
 var _default = exports.default = SimpleSelect;

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

@@ -58,6 +58,7 @@ interface ISimpleSelectProps {
     hintPosition?: 'below' | 'onLabelRight';
     themePopover?: 'light' | 'dark';
     popoverAlign?: 'right' | 'left';
+    dropdownMaxWidth?: number;
 }
 interface ISelectFieldProps extends Omit<ISimpleSelectProps, 'idKey' | 'value' | 'descriptionKey'> {
     multiple?: boolean;

package/lib/inputs/types.d.ts

@@ -31,6 +31,7 @@ interface ISearchProps extends IBaseProps {
     rounded?: boolean;
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>;
     style?: CSSProperties;
+    drawerFilterIsOpened?: boolean;
 }
 interface IDropdownProps {
     children: ReactNode | ReactNode[];

package/lib/inputs2/checkboxfield/base.d.ts

@@ -0,0 +1,29 @@
+import React__default from 'react';
+import { Size } from '../../@types/Size.js';
+import { ColorTheme } from '../../@types/ColorStyles.js';
+import { ITooltipCommonProps } from '../../tooltip/types.js';
+import { HintPosition, Position } from '../../@types/Position.js';
+
+type InputHTMLProps = Omit<React__default.ComponentPropsWithoutRef<'input'>, 'size' | 'type'>;
+interface CheckboxFieldInputBaseProps extends InputHTMLProps, ITooltipCommonProps {
+    hint?: string;
+    label?: string;
+    size?: Exclude<Size, 'mini'>;
+    variant?: 'default' | 'secondary';
+    errors?: string[];
+    customClass?: string;
+    customClassLabel?: string;
+    customClassWrapper?: string;
+    customClassInputContainer?: string;
+    rounded?: boolean;
+    readOnly?: boolean;
+    skeletonize?: boolean;
+    labelUppercase?: boolean;
+    hintPosition?: HintPosition;
+    themePopover?: ColorTheme;
+    popoverAlign?: Extract<Position, 'left' | 'right'>;
+    tabIndex?: number;
+}
+declare const InputBase: React__default.ForwardRefExoticComponent<CheckboxFieldInputBaseProps & React__default.RefAttributes<HTMLInputElement>>;
+
+export { CheckboxFieldInputBaseProps, InputBase };