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

package/lib/inputs/file/DragDropFile.js

@@ -9,8 +9,8 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _buttons = require("../../buttons");
 var _icons = _interopRequireDefault(require("../../icons"));
 var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
-var helperBase = _interopRequireWildcard(require("../base/helpers"));
 var _hint = _interopRequireDefault(require("../../hint"));
+var _errorMessage = require("../errorMessage");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -262,7 +262,9 @@ const DragDropFile = props => {
     onDragLeave: handleDragLeave,
     onDragOver: handleDragOver,
     onDrop: handleDrop
-  })), errorMessages && helperBase.getErrorMessages(errorMessages), /*#__PURE__*/_react.default.createElement(_hint.default, {
+  })), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
+    messages: errorMessages
+  }), /*#__PURE__*/_react.default.createElement(_hint.default, {
     visible: !!hint,
     customClass: "hint",
     description: hint

package/lib/inputs/multiSelect/ActionButtons.js

@@ -20,22 +20,24 @@ const ActionButtons = _ref => {
     dropdownAlignButton = 'left'
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    transparent: true,
+    tabIndex: -1,
     disabled: disabled,
+    boxShadow: false,
     size: "small",
-    iconName: dropdownOpened ? 'up' : 'down',
     onClick: handleOpenClose,
     customClass: "actionbutton",
-    transparent: true,
-    boxShadow: false
+    iconName: dropdownOpened ? 'up' : 'down'
   }), /*#__PURE__*/_react.default.createElement(_buttons.default, {
-    disabled: disabled,
-    iconName: "more1",
+    dropdown: true,
     transparent: true,
+    disabled: disabled,
+    tabIndex: -1,
     boxShadow: false,
+    showIconDropdown: false,
+    iconName: "more1",
     customClass: "actionbutton",
-    dropdown: true,
-    dropdownAlign: dropdownAlignButton,
-    showIconDropdown: false
+    dropdownAlign: dropdownAlignButton
   }, /*#__PURE__*/_react.default.createElement(_list.default, null, /*#__PURE__*/_react.default.createElement(_list.ListItem, {
     itemId: "1",
     text: "Marcar Todos",

package/lib/inputs/multiSelect/Dropdown.js

@@ -94,11 +94,9 @@ const Dropdown = props => {
     className: "listcontainer"
   }, dataCombo && dataCombo.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: "item selectall"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    role: "button",
+  }, /*#__PURE__*/_react.default.createElement("button", {
     className: "menubutton",
     tabIndex: -1,
-    onKeyPress: () => {},
     onClick: () => isAllChecked ? onUncheckAll(true) : onCheckAll(true)
   }, /*#__PURE__*/_react.default.createElement(_icons.default, {
     name: isAllChecked && dataCombo.length > 0 ? 'checkboxChecked2' : 'checkboxUnchecked2',
@@ -110,11 +108,9 @@ const Dropdown = props => {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "dropdowmItem ".concat(item[idKey], "}"),
       className: "item ".concat(isChecked && '-selected')
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      role: "button",
+    }, /*#__PURE__*/_react.default.createElement("button", {
       className: "menubutton",
       tabIndex: -1,
-      onKeyPress: () => {},
       onClick: () => {
         onSelect(item);
       }

package/lib/inputs/multiSelect/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _lodash = _interopRequireDefault(require("lodash"));
 var _react = _interopRequireWildcard(require("react"));
-var _uuid = _interopRequireDefault(require("uuid"));
+var uuid = _interopRequireWildcard(require("uuid"));
 var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
 var _ActionButtons = _interopRequireDefault(require("./ActionButtons"));
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
@@ -33,7 +33,7 @@ const MultiSelectField = props => {
     gridLayout,
     dropdownAlignButton = 'left'
   } = props;
-  const componentId = "multiSelect-component".concat(_uuid.default.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)('');

package/lib/inputs/period/index.js

@@ -16,6 +16,7 @@ var _Dialog = _interopRequireDefault(require("./Dialog"));
 var _hint = _interopRequireDefault(require("../../hint"));
 var helperBase = _interopRequireWildcard(require("../base/helpers"));
 require("../../assets/styles/periodpicker.scss");
+var _errorMessage = require("../errorMessage");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -374,6 +375,8 @@ const PeriodPicker = props => {
     visible: !!hint,
     customClass: "hint",
     description: hint
-  }), props.errorMessages && helperBase.getErrorMessages(props.errorMessages));
+  }), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
+    messages: props.errorMessages
+  }));
 };
 var _default = exports.default = PeriodPicker;

package/lib/inputs/select/ActionButtons.js

@@ -11,37 +11,28 @@ const ActionButtons = props => {
   const {
     disabled = false,
     showClearButton = true,
-    dropDownOpened
+    dropDownOpened,
+    handlerOpenClose,
+    handlerClear
   } = props;
-  const returnOnClick = () => {
-    if (!disabled) {
-      return props.handleOpenClose();
-    }
-    return undefined;
-  };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showClearButton && /*#__PURE__*/_react.default.createElement("span", {
-    role: "button",
-    className: "actionbutton",
-    onClick: () => {
-      props.handleClear();
-    },
-    onKeyPress: () => {},
-    tabIndex: -1
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "actionbuttonsselect"
+  }, showClearButton && /*#__PURE__*/_react.default.createElement("button", {
+    disabled: disabled,
+    tabIndex: -1,
+    className: "actionbutton buttonclear",
+    onClick: handlerClear
   }, /*#__PURE__*/_react.default.createElement(_icons.default, {
-    pointerEvents: "none",
     name: "cancel",
-    customClass: "iconclear"
-  })), /*#__PURE__*/_react.default.createElement("span", {
-    role: "button",
-    className: "actionbutton",
-    onClick: () => {
-      returnOnClick();
-    },
-    onKeyPress: () => {},
-    tabIndex: -1
-  }, /*#__PURE__*/_react.default.createElement(_icons.default, {
-    name: dropDownOpened ? 'mini_up' : 'mini_down',
     pointerEvents: "none"
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    disabled: disabled,
+    tabIndex: -1,
+    className: "actionbutton buttonopenclose",
+    onClick: handlerOpenClose
+  }, /*#__PURE__*/_react.default.createElement(_icons.default, {
+    pointerEvents: "none",
+    name: dropDownOpened ? 'mini_up' : 'mini_down'
   })));
 };
 var _default = exports.default = ActionButtons;

package/lib/inputs/select/Dropdown.js

@@ -29,7 +29,6 @@ const Dropdown = props => {
     dropdownWidth,
     gridWrapperStyle,
     handleOnSelect,
-    handleOnBlur,
     inputValue,
     handleOnFocus,
     opened,
@@ -83,15 +82,12 @@ const Dropdown = props => {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "dropdowmIten ".concat(item[idKey], "}"),
       className: helper.getDropdownItemCssClass(itemSelected, disabled, striped)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      role: "button",
+    }, /*#__PURE__*/_react.default.createElement("button", {
       className: "menubutton",
       tabIndex: -1,
-      onKeyPress: () => {},
-      onClick: () => {
+      onClick: event => {
         if (!disabled) {
           handleOnSelect(item);
-          handleOnBlur(item);
         }
       }
     }, item.iconName && /*#__PURE__*/_react.default.createElement(_icons.default, {

package/lib/inputs/select/multiple/Selecteds.d.ts

@@ -6,6 +6,6 @@ import '../../base/types.js';
 import 'react';
 import '../../../@types/Period.js';
 
-declare const Selecteds: ({ currents, descriptionKey, idKey, handleOnUnselect, }: ISelectedsMultipleProps) => JSX.Element;
+declare const Selecteds: ({ currents, descriptionKey, idKey, handlerOnUnselect, }: ISelectedsMultipleProps) => JSX.Element;
 
 export { Selecteds as default };

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

@@ -11,17 +11,15 @@ const Selecteds = _ref => {
     currents,
     descriptionKey,
     idKey,
-    handleOnUnselect
+    handlerOnUnselect
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currents.map(selected => /*#__PURE__*/_react.default.createElement("div", {
     className: "selecteditem",
     key: "selected-".concat(selected[idKey])
-  }, typeof descriptionKey === 'string' ? selected[descriptionKey] : descriptionKey(selected), /*#__PURE__*/_react.default.createElement("span", {
+  }, typeof descriptionKey === 'string' ? selected[descriptionKey] : descriptionKey(selected), /*#__PURE__*/_react.default.createElement("button", {
     className: "close",
-    role: "button",
     tabIndex: -1,
-    onKeyPress: () => {},
-    onClick: () => handleOnUnselect(selected[idKey])
+    onClick: () => handlerOnUnselect(selected[idKey])
   }))));
 };
 var _default = exports.default = Selecteds;

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
-var _uuid = _interopRequireDefault(require("uuid"));
+var uuid = _interopRequireWildcard(require("uuid"));
 var _Dropdown = _interopRequireDefault(require("../Dropdown"));
 var _ActionButtons = _interopRequireDefault(require("../ActionButtons"));
 var _Selecteds = _interopRequireDefault(require("./Selecteds"));
@@ -24,7 +24,8 @@ const MultipleSelect = props => {
     handlerClear,
     value = [],
     remoteSearch = false,
-    descriptionKey
+    descriptionKey,
+    showClearButton
   } = props;
   const [dataCombo, setDataCombo] = (0, _react.useState)(dataSource);
   const [currents, setCurrents] = (0, _react.useState)([]);
@@ -35,11 +36,12 @@ const MultipleSelect = props => {
   const [insideComponent, setInsideComponent] = (0, _react.useState)(false);
   const [onDenied, setOnDeniedSelect] = (0, _react.useState)();
   const [valueFromProps, setValueFromProps] = (0, _react.useState)([]);
-  const componentId = "select-component".concat(_uuid.default.v1());
+  const componentId = "select-component".concat(uuid.v1());
   const componentRef = (0, _react.useRef)(null);
   const dropdownRef = (0, _react.useRef)(null);
   const selectWrapper = (0, _react.useRef)();
   const gridElRef = (0, _react.useRef)();
+  const inputTextRef = (0, _react.useRef)(null);
   const descriptionKeyIsString = typeof descriptionKey === 'string';
   const onScreenResize = () => {
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
@@ -53,12 +55,12 @@ const MultipleSelect = props => {
     }
   };
   const onMouseMove = event => {
-    const {
-      target
-    } = event;
-    if (target.className === '') return;
-    const insideComponents = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label'].includes(target.className);
-    setInsideComponent(insideComponents);
+    var _dropdownRef$current, _dropdownRef$current$;
+    const target = event.target;
+    const idDropdown = ((_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : (_dropdownRef$current$ = _dropdownRef$current.parentElement) === null || _dropdownRef$current$ === void 0 ? void 0 : _dropdownRef$current$.id) || '';
+    const dropdownElement = document.getElementById(idDropdown);
+    const keepDropdownOpen = Boolean(dropdownElement === null || dropdownElement === void 0 ? void 0 : dropdownElement.contains(target));
+    setInsideComponent(keepDropdownOpen);
   };
   const onClearClick = () => {
     setSelected(undefined);
@@ -94,6 +96,7 @@ const MultipleSelect = props => {
     setCurrents(currentsSelect);
     setDataCombo(dataSource);
     setInputValue([]);
+    if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
     setOpened(false);
     if (props.onSelect) setSelected(props.onSelect(currentsSelect.map(i => i[idKey])));
   };
@@ -101,11 +104,13 @@ const MultipleSelect = props => {
     if (currents) {
       const result = currents.filter(item => item[idKey] !== id);
       setCurrents(result);
+      if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
+      setOpened(false);
       if (props.onSelect) setSelected(props.onSelect(result.map(i => i[idKey])));
     }
   };
   const onOpenClose = () => {
-    setOpened(!opened);
+    setOpened(prevState => !prevState);
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
   const onFocus = () => {
@@ -115,11 +120,16 @@ const MultipleSelect = props => {
   };
   const onBlur = e => {
     if (props.onBlur) props.onBlur(e);
-    if (!insideComponent) setOpened(false);
+    if (!insideComponent) {
+      setOpened(false);
+      setDataCombo(dataSource);
+    }
   };
   const onInputKeyDown = e => {
     if (e.keyCode) {
       if (e.keyCode === constants.keyCodes.ENTER && selected) {
+        var _e$preventDefault;
+        (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
         if (!currents.includes(selected)) onSelect(selected);
       } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
         if (!opened) setOpened(true);
@@ -190,6 +200,11 @@ const MultipleSelect = props => {
     ref: componentRef,
     className: "select-component"
   }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+    inputRef: ref => {
+      if (props.inputRef) props.inputRef(ref);
+      inputTextRef.current = ref;
+    },
+    autoComplete: "off",
     value: inputValue.toString(),
     readOnly: shouldBeReadOnly(),
     onFocus: () => {
@@ -208,21 +223,19 @@ const MultipleSelect = props => {
       selectWrapper.current = r;
     },
     handlerSetOnDenied: setOnDenied,
-    rightElements: /*#__PURE__*/_react.default.createElement(_ActionButtons.default, _extends({}, props, {
+    rightElements: /*#__PURE__*/_react.default.createElement(_ActionButtons.default, {
+      showClearButton: showClearButton,
       disabled: shouldDisable() || shouldBeReadOnly(),
       dropDownOpened: opened,
-      handleClear: () => {
+      handlerClear: () => {
         if (shouldDisable()) return null;
         return onClearClick();
       },
-      handleOpenClose: () => {
-        onOpenClose();
-      }
-    }))
-  }), /*#__PURE__*/_react.default.createElement(_Selecteds.default, _extends({
-    currents: currents
-  }, props, {
-    handleOnUnselect: onUnselect
+      handlerOpenClose: onOpenClose
+    })
+  }), /*#__PURE__*/_react.default.createElement(_Selecteds.default, _extends({}, props, {
+    currents: currents,
+    handlerOnUnselect: onUnselect
   }))), opened && /*#__PURE__*/_react.default.createElement(_Dropdown.default, _extends({}, props, {
     selected: selected,
     selectFieldRef: componentRef,

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _uuid = _interopRequireDefault(require("uuid"));
+var uuid = _interopRequireWildcard(require("uuid"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _Dropdown = _interopRequireDefault(require("../Dropdown"));
 var _ActionButtons = _interopRequireDefault(require("../ActionButtons"));
@@ -19,7 +19,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const SimpleSelect = props => {
   const {
     value,
-    descriptionKey = '',
+    descriptionKey,
     dataSource = [],
     gridLayout,
     onSearch,
@@ -32,7 +32,9 @@ const SimpleSelect = props => {
     name = '',
     undigitable,
     searchOnDropdown = false,
-    allOptions = undefined
+    allOptions = undefined,
+    showClearButton = false,
+    searchNotFoundText
   } = props;
   const descriptionKeyIsString = typeof descriptionKey === 'string';
   const dataSourceWithAllOptions = allOptions ? [{
@@ -48,15 +50,11 @@ const SimpleSelect = props => {
   const [onDenied, setOnDeniedSelect] = (0, _react.useState)();
   const [isTyping, setIsTyping] = (0, _react.useState)(false);
   const dropdownRef = (0, _react.useRef)(null);
-  const componentId = "select-component".concat(_uuid.default.v1());
+  const componentId = "select-component-".concat(name, "-").concat(uuid.v1());
   const componentRef = (0, _react.useRef)(null);
   const selectWrapper = (0, _react.useRef)();
   const gridElement = (0, _react.useRef)();
-  const clearSelected = () => {
-    setInputText('');
-    setSelected(null);
-    setDataCombo(dataSourceWithAllOptions);
-  };
+  const inputTextRef = (0, _react.useRef)(null);
   const onScreenResize = () => {
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
@@ -70,10 +68,12 @@ const SimpleSelect = props => {
     }
   };
   const onMouseMove = event => {
+    var _dropdownRef$current2, _dropdownRef$current3;
     const target = event.target;
-    if (target.className === '') return;
-    const insideComponents = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label'].includes(target.className);
-    setInsideComponent(insideComponents);
+    const idDropdown = ((_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : (_dropdownRef$current3 = _dropdownRef$current2.parentElement) === null || _dropdownRef$current3 === void 0 ? void 0 : _dropdownRef$current3.id) || '';
+    const dropdownElement = document.getElementById(idDropdown);
+    const keepDropdownOpen = Boolean(dropdownElement === null || dropdownElement === void 0 ? void 0 : dropdownElement.contains(target));
+    setInsideComponent(keepDropdownOpen);
   };
   const getSelectEvent = selectedEvent => ({
     target: {
@@ -99,12 +99,12 @@ const SimpleSelect = props => {
       });
       if (dataComboFilter && dataComboFilter.length > 0) {
         selectedFilter = dataComboFilter[0];
+        setSelected(selectedFilter);
       }
       setDataCombo(dataComboFilter);
     }
     setOpened(true);
     setInputText(valueFilter);
-    setSelected(selectedFilter);
     if (selectedFilter) {
       if (descriptionKeyIsString && valueFilter === selectedFilter[descriptionKey] || !descriptionKeyIsString && valueFilter === descriptionKey(selectedFilter)) {
         onChange(selectedFilter);
@@ -112,18 +112,22 @@ const SimpleSelect = props => {
     }
   };
   const onSelect = selectedDropdown => {
-    if (selectedDropdown === undefined) return;
-    setOpened(false);
+    if (!selectedDropdown) return;
     setSelected(selectedDropdown);
     if (descriptionKeyIsString) setInputText(selectedDropdown[descriptionKey]);else setInputText(descriptionKey(selectedDropdown));
-    onChange(selectedDropdown);
+    new Promise(resolve => {
+      resolve(onChange(selectedDropdown));
+    }).finally(() => {
+      if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
+      setOpened(false);
+    });
   };
   const onOpenClose = () => {
-    setOpened(!opened);
+    setOpened(prevState => !prevState);
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
   const onFocus = () => {
-    setOpened(openDropdownOnFocus);
+    if (openDropdownOnFocus) setOpened(true);
     if (selectWrapper) {
       const dropdownWidthFocus = selectWrapper.current ? selectWrapper.current.clientWidth : 0;
       setDropdownWidth(dropdownWidthFocus);
@@ -133,16 +137,20 @@ const SimpleSelect = props => {
     if (props.onBlur) {
       const event = getSelectEvent(selected);
       props.onBlur(event);
-      if (selected) {
-        if (descriptionKeyIsString && inputText !== selected[descriptionKey] || !descriptionKeyIsString && inputText !== descriptionKey(selected)) {
-          clearSelected();
-        }
+      if (selected && descriptionKeyIsString && inputText !== selected[descriptionKey] || !descriptionKeyIsString && inputText !== descriptionKey(selected)) {
+        setSelected(null);
+        setInputText(inputText);
+        new Promise(resolve => {
+          resolve(onChange(null));
+        }).finally(() => {
+          onChange();
+        });
       }
-      setDataCombo(dataSourceWithAllOptions);
     }
     if (!insideComponent) {
       setOpened(false);
       setIsTyping(false);
+      setDataCombo(dataSourceWithAllOptions);
     }
   };
   const onInputKeyDown = e => {
@@ -160,13 +168,22 @@ const SimpleSelect = props => {
           index = dataCombo && index === 0 ? (dataCombo === null || dataCombo === void 0 ? void 0 : dataCombo.length) - 1 : index - 1;
         }
         setSelected(dataCombo[index]);
+        if (descriptionKeyIsString) setInputText(dataCombo[index][descriptionKey]);
+        if (!descriptionKeyIsString) setInputText(descriptionKey(dataCombo[index]));
       }
     }
     if (!isTyping) setIsTyping(true);
   };
   const onClearClick = () => {
-    setSelected(undefined);
-    setInputText('');
+    new Promise(resolve => {
+      resolve(onChange(null));
+    }).finally(() => {
+      setSelected(null);
+      setInputText('');
+      onChange();
+      if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
+      setOpened(false);
+    });
   };
   const setOnDenied = onDeniedSelect => {
     setOnDeniedSelect(onDeniedSelect);
@@ -229,6 +246,11 @@ const SimpleSelect = props => {
     ref: componentRef,
     className: "select-component"
   }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+    inputRef: ref => {
+      if (props.inputRef) props.inputRef(ref);
+      inputTextRef.current = ref;
+    },
+    autoComplete: "off",
     readOnly: undigitable || shouldBeReadOnly(),
     value: inputText,
     onFocus: onFocus,
@@ -243,18 +265,18 @@ const SimpleSelect = props => {
       selectWrapper.current = r;
     },
     handlerSetOnDenied: inputOnDenied => setOnDenied(inputOnDenied),
-    rightElements: /*#__PURE__*/_react.default.createElement(_ActionButtons.default, _extends({}, props, {
+    rightElements: /*#__PURE__*/_react.default.createElement(_ActionButtons.default, {
       disabled: shouldDisable() || shouldBeReadOnly(),
+      showClearButton: showClearButton,
       dropDownOpened: opened,
-      handleClear: () => {
+      handlerClear: () => {
         if (shouldDisable()) return null;
         return onClearClick();
       },
-      handleOpenClose: () => {
-        onOpenClose();
-      }
-    }))
+      handlerOpenClose: onOpenClose
+    })
   })), opened && /*#__PURE__*/_react.default.createElement(_Dropdown.default, _extends({}, props, {
+    opened: opened,
     selected: selected,
     inputValue: inputText,
     selectFieldRef: componentRef,
@@ -268,9 +290,9 @@ const SimpleSelect = props => {
     handleOnKeydown: onInputKeyDown,
     handleOnBlur: () => onBlur,
     handleOnFocus: onFocus,
-    opened: opened,
     dataCombo: dataCombo,
-    dropdownWidth: dropdownWidth || 0
+    dropdownWidth: dropdownWidth || 0,
+    searchNotFoundText: searchNotFoundText
   })));
 };
 var _default = exports.default = SimpleSelect;

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

@@ -47,6 +47,7 @@ interface ISimpleSelectProps {
     autoFocus?: boolean;
     onFocus?: () => void;
     allOptions?: AllOptions;
+    inputRef?: ((ref: HTMLInputElement | HTMLTextAreaElement | null) => void);
 }
 interface ISelectFieldProps extends Omit<ISimpleSelectProps, 'idKey' | 'value' | 'descriptionKey'> {
     multiple?: boolean;
@@ -92,7 +93,7 @@ interface ISelectedsMultipleProps {
     idKey: string;
     descriptionKey: DescriptionKey;
     currents: DataCombo[];
-    handleOnUnselect: (id: string) => void;
+    handlerOnUnselect: (id: string) => void;
 }
 interface GetFilteredParams {
     dataSource: DataCombo[];

package/lib/inputs/types.d.ts

@@ -133,8 +133,8 @@ interface IDropdownSelectProps {
     align?: 'left' | 'right';
 }
 interface IActionButtonsSelectProps {
-    handleClear: () => void;
-    handleOpenClose: () => void;
+    handlerClear: () => void;
+    handlerOpenClose: () => void;
     dropDownOpened: boolean;
     showClearButton?: boolean;
     disabled?: boolean;
@@ -149,5 +149,10 @@ interface IButtonsProps {
     transparent: boolean;
     disabled?: boolean;
 }
+interface ErrorProps {
+    customClass?: string;
+    style?: React.CSSProperties;
+    messages?: string | string[];
+}
 
-export type { IActionButtonsSelectProps, IAdvancedFilterProps, IButtonsProps, IDropdownProps, IDropdownSelectProps, IInputHOCProps, IMaskHOCProps, ISearchProps };
+export type { ErrorProps, IActionButtonsSelectProps, IAdvancedFilterProps, IButtonsProps, IDropdownProps, IDropdownSelectProps, IInputHOCProps, IMaskHOCProps, ISearchProps };

package/lib/menus/sidenav/index.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "NavSubMenuItem", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _uuid = _interopRequireDefault(require("uuid"));
+var uuid = _interopRequireWildcard(require("uuid"));
 var _NavMenuItem = _interopRequireDefault(require("./NavMenuItem"));
 var _NavSubMenuItem = _interopRequireDefault(require("./NavSubMenuItem"));
 var _NavMenuGroup = _interopRequireDefault(require("./NavMenuGroup"));
@@ -82,7 +82,7 @@ const SideNav = props => {
     } = child;
     if ((type === _NavMenuItem.default || type === _NavSubMenuItem.default) && !child.props.children) {
       setMenuItemsContent(prevState => [...prevState, {
-        id: "".concat(child.props.title, "-").concat(_uuid.default.v1()),
+        id: "".concat(child.props.title, "-").concat(uuid.v1()),
         content: child.props.title,
         url: child.props.url
       }]);
@@ -127,7 +127,7 @@ const SideNav = props => {
   }, [expanded]);
   const returnMenuItems = () => menuItemsContent.filter(item => item.content !== '');
   const getPopupMenuSearch = () => /*#__PURE__*/_react.default.createElement(_NavMenuGroup.default, {
-    key: "popup-menusearch-".concat(_uuid.default.v1())
+    key: "popup-menusearch-".concat(uuid.v1())
   }, /*#__PURE__*/_react.default.createElement(_NavMenuItem.default, {
     childrenIsSubMenu: false,
     customClass: "-customsidenavitem",

package/lib/menus/sidenav/popup_menu_search/index.js

@@ -34,15 +34,16 @@ const PopupMenuSearch = props => {
   const closeOnEsc = e => {
     if (e.keyCode === 27 || e.key === 'ESC') {
       handlerClose();
+      e.stopPropagation();
     }
   };
   (0, _react.useEffect)(() => {
     body.appendChild(popupRef.current);
     if (searchFieldRef && searchFieldRef.current) searchFieldRef.current.focus();
-    document.body.addEventListener('keyup', closeOnEsc);
+    document.body.addEventListener('keydown', closeOnEsc);
     return () => {
       body.removeChild(popupRef.current);
-      document.body.removeEventListener('keyup', closeOnEsc);
+      document.body.removeEventListener('keydown', closeOnEsc);
     };
   }, []);
   (0, _react.useEffect)(() => {