linear-react-components-ui 1.1.2-beta.8 → 1.1.2-beta.9

package/lib/icons/index.js

@@ -24,17 +24,23 @@ const Icon = _ref => {
     disabled = false,
     customClass = '',
     customClassForContainer = '',
-    color = '#676464',
+    colorStyle = 'default',
+    color,
+    viewBox,
     pointerEvents = 'none',
     targetRef,
     tooltip
   } = _ref;
+  const isUsingColorStyle = colorStyle !== 'default';
+  const colorFromProp = isUsingColorStyle || !color ? undefined : color;
   const refSvg = (0, _react.useRef)(null);
+  const viewBoxFromIconOrSvgStrcut = name ? listIcon[name].viewbox : svgStruct === null || svgStruct === void 0 ? void 0 : svgStruct.viewbox;
   const getPaths = () => name ? listIcon[name].paths : svgStruct === null || svgStruct === void 0 ? void 0 : svgStruct.paths;
   const getSvg = () => {
     var _getPaths;
     return /*#__PURE__*/_react.default.createElement("svg", {
       "data-testid": "icon",
+      "data-color-style": colorStyle,
       onClick: () => {
         if (onClick && !disabled) onClick();
       },
@@ -43,8 +49,8 @@ const Icon = _ref => {
       },
       width: "".concat(size, "px"),
       height: "".concat(size, "px"),
-      fill: disabled ? disabledIconColor : color,
-      viewBox: name ? listIcon[name].viewbox : svgStruct === null || svgStruct === void 0 ? void 0 : svgStruct.viewbox,
+      fill: disabled ? disabledIconColor : colorFromProp,
+      viewBox: viewBox || viewBoxFromIconOrSvgStrcut,
       className: "icon-component ".concat(customClass),
       pointerEvents: pointerEvents,
       style: style
@@ -54,6 +60,7 @@ const Icon = _ref => {
       key: value
     })));
   };
+  if (color && colorStyle !== 'default') throw new Error('Expected only one of the two properties: colorStyle or color');
   if (!name && !svgStruct) throw new Error('One of the "name" and "svgStruct" props must be filled');
   if (!visible) return null;
   if (!tooltip) return getSvg();

package/lib/icons/types.d.ts

@@ -3,6 +3,7 @@ import { PointerEvents } from '../@types/PointerEvents.js';
 import { SizePixels } from '../@types/SizePixels.js';
 import { IconNames } from '../@types/Icon.js';
 import { Position } from '../@types/Position.js';
+import { ColorStyles } from '../@types/ColorStyles.js';
 import './helper.js';
 
 type ListIconType = {
@@ -11,26 +12,38 @@ type ListIconType = {
         paths: Array<string>;
     };
 };
-interface IIconProps {
+type SvgStruct = {
+    viewbox: string;
+    paths: Array<string>;
+};
+type BaseIconProps = {
     size?: SizePixels;
-    color?: string;
     customClass?: string;
     customClassForContainer?: string;
     style?: CSSProperties;
     visible?: boolean;
     disabled?: boolean;
     pointerEvents?: PointerEvents;
-    name?: IconNames;
     viewBox?: string;
-    svgStruct?: {
-        viewbox: string;
-        paths: Array<string>;
-    };
     onClick?: () => void;
     tooltipPosition?: Exclude<Position, 'center'>;
     tooltipWidth?: string | number;
     tooltip?: string;
     targetRef?: (ref: HTMLDivElement) => void;
-}
+};
+type ColorProps = ({
+    colorStyle?: ColorStyles | 'default';
+    color?: null;
+} | {
+    color?: string;
+    colorStyle?: undefined;
+});
+type IconProps = BaseIconProps & ColorProps & ({
+    name: IconNames;
+    svgStruct?: null;
+} | {
+    svgStruct: SvgStruct;
+    name?: null;
+});
 
-export type { IIconProps, ListIconType };
+export type { IconProps, ListIconType };

package/lib/index.d.ts

@@ -27,6 +27,7 @@ import './labels/types.js';
 import './icons/types.js';
 import './@types/PointerEvents.js';
 import './@types/SizePixels.js';
+import './@types/ColorStyles.js';
 import './list/Header.js';
 import './list/types.js';
 import './list/Item.js';

package/lib/inputs/base/InputTextBase.js

@@ -64,8 +64,7 @@ const InputTextBase = props => {
     onDragOver,
     onDrop,
     onDragLeave,
-    readOnlyClass,
-    autoComplete = 'on'
+    readOnlyClass
   } = props;
   let propsInput;
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
@@ -176,7 +175,6 @@ const InputTextBase = props => {
     rows: props.rows,
     cols: props.cols
   }, inputProps())) : /*#__PURE__*/_react.default.createElement("input", _extends({
-    autoComplete: autoComplete,
     tabIndex: applyTabIndex()
   }, inputProps())), children), helpers.getRightElements(errorMessages || [], skeletonize, rightElements)), /*#__PURE__*/_react.default.createElement(_hint.default, {
     visible: !!hint,

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

@@ -76,7 +76,6 @@ interface IBaseProps {
     accept?: string;
     multiple?: boolean;
     readOnlyClass?: string;
-    autoComplete?: 'on' | 'off';
 }
 
 export type { CustomInputEvent, IBaseProps };

package/lib/inputs/multiSelect/ActionButtons.js

@@ -20,24 +20,22 @@ 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",
-    iconName: dropdownOpened ? 'up' : 'down'
-  }), /*#__PURE__*/_react.default.createElement(_buttons.default, {
-    dropdown: true,
     transparent: true,
+    boxShadow: false
+  }), /*#__PURE__*/_react.default.createElement(_buttons.default, {
     disabled: disabled,
-    tabIndex: -1,
-    boxShadow: false,
-    showIconDropdown: false,
     iconName: "more1",
+    transparent: true,
+    boxShadow: false,
     customClass: "actionbutton",
-    dropdownAlign: dropdownAlignButton
+    dropdown: true,
+    dropdownAlign: dropdownAlignButton,
+    showIconDropdown: false
   }, /*#__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,9 +94,11 @@ const Dropdown = props => {
     className: "listcontainer"
   }, dataCombo && dataCombo.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: "item selectall"
-  }, /*#__PURE__*/_react.default.createElement("button", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    role: "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',
@@ -108,9 +110,11 @@ const Dropdown = props => {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "dropdowmItem ".concat(item[idKey], "}"),
       className: "item ".concat(isChecked && '-selected')
-    }, /*#__PURE__*/_react.default.createElement("button", {
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      role: "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/select/ActionButtons.js

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

package/lib/inputs/select/Dropdown.js

@@ -29,6 +29,7 @@ const Dropdown = props => {
     dropdownWidth,
     gridWrapperStyle,
     handleOnSelect,
+    handleOnBlur,
     inputValue,
     handleOnFocus,
     opened,
@@ -82,12 +83,15 @@ const Dropdown = props => {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "dropdowmIten ".concat(item[idKey], "}"),
       className: helper.getDropdownItemCssClass(itemSelected, disabled, striped)
-    }, /*#__PURE__*/_react.default.createElement("button", {
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      role: "button",
       className: "menubutton",
       tabIndex: -1,
-      onClick: event => {
+      onKeyPress: () => {},
+      onClick: () => {
         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, handlerOnUnselect, }: ISelectedsMultipleProps) => JSX.Element;
+declare const Selecteds: ({ currents, descriptionKey, idKey, handleOnUnselect, }: ISelectedsMultipleProps) => JSX.Element;
 
 export { Selecteds as default };

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

@@ -11,15 +11,17 @@ const Selecteds = _ref => {
     currents,
     descriptionKey,
     idKey,
-    handlerOnUnselect
+    handleOnUnselect
   } = _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("button", {
+  }, typeof descriptionKey === 'string' ? selected[descriptionKey] : descriptionKey(selected), /*#__PURE__*/_react.default.createElement("span", {
     className: "close",
+    role: "button",
     tabIndex: -1,
-    onClick: () => handlerOnUnselect(selected[idKey])
+    onKeyPress: () => {},
+    onClick: () => handleOnUnselect(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,8 +24,7 @@ const MultipleSelect = props => {
     handlerClear,
     value = [],
     remoteSearch = false,
-    descriptionKey,
-    showClearButton
+    descriptionKey
   } = props;
   const [dataCombo, setDataCombo] = (0, _react.useState)(dataSource);
   const [currents, setCurrents] = (0, _react.useState)([]);
@@ -36,12 +35,11 @@ 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);
@@ -55,12 +53,12 @@ const MultipleSelect = props => {
     }
   };
   const onMouseMove = event => {
-    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 {
+      target
+    } = event;
+    if (target.className === '') return;
+    const insideComponents = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label'].includes(target.className);
+    setInsideComponent(insideComponents);
   };
   const onClearClick = () => {
     setSelected(undefined);
@@ -96,7 +94,6 @@ 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])));
   };
@@ -104,13 +101,11 @@ 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(prevState => !prevState);
+    setOpened(!opened);
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
   const onFocus = () => {
@@ -120,16 +115,11 @@ const MultipleSelect = props => {
   };
   const onBlur = e => {
     if (props.onBlur) props.onBlur(e);
-    if (!insideComponent) {
-      setOpened(false);
-      setDataCombo(dataSource);
-    }
+    if (!insideComponent) setOpened(false);
   };
   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);
@@ -200,11 +190,6 @@ 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: () => {
@@ -223,19 +208,21 @@ const MultipleSelect = props => {
       selectWrapper.current = r;
     },
     handlerSetOnDenied: setOnDenied,
-    rightElements: /*#__PURE__*/_react.default.createElement(_ActionButtons.default, {
-      showClearButton: showClearButton,
+    rightElements: /*#__PURE__*/_react.default.createElement(_ActionButtons.default, _extends({}, props, {
       disabled: shouldDisable() || shouldBeReadOnly(),
       dropDownOpened: opened,
-      handlerClear: () => {
+      handleClear: () => {
         if (shouldDisable()) return null;
         return onClearClick();
       },
-      handlerOpenClose: onOpenClose
-    })
-  }), /*#__PURE__*/_react.default.createElement(_Selecteds.default, _extends({}, props, {
-    currents: currents,
-    handlerOnUnselect: onUnselect
+      handleOpenClose: () => {
+        onOpenClose();
+      }
+    }))
+  }), /*#__PURE__*/_react.default.createElement(_Selecteds.default, _extends({
+    currents: currents
+  }, props, {
+    handleOnUnselect: 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,9 +32,7 @@ const SimpleSelect = props => {
     name = '',
     undigitable,
     searchOnDropdown = false,
-    allOptions = undefined,
-    showClearButton = false,
-    searchNotFoundText
+    allOptions = undefined
   } = props;
   const descriptionKeyIsString = typeof descriptionKey === 'string';
   const dataSourceWithAllOptions = allOptions ? [{
@@ -50,11 +48,15 @@ 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(name, "-").concat(_uuid.default.v1());
+  const componentId = "select-component".concat(uuid.v1());
   const componentRef = (0, _react.useRef)(null);
   const selectWrapper = (0, _react.useRef)();
   const gridElement = (0, _react.useRef)();
-  const inputTextRef = (0, _react.useRef)(null);
+  const clearSelected = () => {
+    setInputText('');
+    setSelected(null);
+    setDataCombo(dataSourceWithAllOptions);
+  };
   const onScreenResize = () => {
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
@@ -68,12 +70,10 @@ const SimpleSelect = props => {
     }
   };
   const onMouseMove = event => {
-    var _dropdownRef$current2, _dropdownRef$current3;
     const target = event.target;
-    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);
+    if (target.className === '') return;
+    const insideComponents = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label'].includes(target.className);
+    setInsideComponent(insideComponents);
   };
   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,22 +112,18 @@ const SimpleSelect = props => {
     }
   };
   const onSelect = selectedDropdown => {
-    if (!selectedDropdown) return;
+    if (selectedDropdown === undefined) return;
+    setOpened(false);
     setSelected(selectedDropdown);
     if (descriptionKeyIsString) setInputText(selectedDropdown[descriptionKey]);else setInputText(descriptionKey(selectedDropdown));
-    new Promise(resolve => {
-      resolve(onChange(selectedDropdown));
-    }).finally(() => {
-      if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
-      setOpened(false);
-    });
+    onChange(selectedDropdown);
   };
   const onOpenClose = () => {
-    setOpened(prevState => !prevState);
+    setOpened(!opened);
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
   const onFocus = () => {
-    if (openDropdownOnFocus) setOpened(true);
+    setOpened(openDropdownOnFocus);
     if (selectWrapper) {
       const dropdownWidthFocus = selectWrapper.current ? selectWrapper.current.clientWidth : 0;
       setDropdownWidth(dropdownWidthFocus);
@@ -137,20 +133,15 @@ const SimpleSelect = props => {
     if (props.onBlur) {
       const event = getSelectEvent(selected);
       props.onBlur(event);
-      if (selected && descriptionKeyIsString && inputText !== selected[descriptionKey] || !descriptionKeyIsString && inputText !== descriptionKey(selected)) {
-        setSelected(null);
-        setInputText(inputText);
-        new Promise(resolve => {
-          resolve(onChange(null));
-        }).finally(() => {
-          onChange();
-        });
+      if (selected) {
+        if (descriptionKeyIsString && inputText !== selected[descriptionKey] || !descriptionKeyIsString && inputText !== descriptionKey(selected)) {
+          clearSelected();
+        }
       }
     }
     if (!insideComponent) {
       setOpened(false);
       setIsTyping(false);
-      setDataCombo(dataSourceWithAllOptions);
     }
   };
   const onInputKeyDown = e => {
@@ -168,22 +159,13 @@ 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 = () => {
-    new Promise(resolve => {
-      resolve(onChange(null));
-    }).finally(() => {
-      setSelected(null);
-      setInputText('');
-      onChange();
-      if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
-      setOpened(false);
-    });
+    setSelected(undefined);
+    setInputText('');
   };
   const setOnDenied = onDeniedSelect => {
     setOnDeniedSelect(onDeniedSelect);
@@ -246,11 +228,6 @@ 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,
@@ -265,18 +242,18 @@ const SimpleSelect = props => {
       selectWrapper.current = r;
     },
     handlerSetOnDenied: inputOnDenied => setOnDenied(inputOnDenied),
-    rightElements: /*#__PURE__*/_react.default.createElement(_ActionButtons.default, {
+    rightElements: /*#__PURE__*/_react.default.createElement(_ActionButtons.default, _extends({}, props, {
       disabled: shouldDisable() || shouldBeReadOnly(),
-      showClearButton: showClearButton,
       dropDownOpened: opened,
-      handlerClear: () => {
+      handleClear: () => {
         if (shouldDisable()) return null;
         return onClearClick();
       },
-      handlerOpenClose: onOpenClose
-    })
+      handleOpenClose: () => {
+        onOpenClose();
+      }
+    }))
   })), opened && /*#__PURE__*/_react.default.createElement(_Dropdown.default, _extends({}, props, {
-    opened: opened,
     selected: selected,
     inputValue: inputText,
     selectFieldRef: componentRef,
@@ -290,9 +267,9 @@ const SimpleSelect = props => {
     handleOnKeydown: onInputKeyDown,
     handleOnBlur: () => onBlur,
     handleOnFocus: onFocus,
+    opened: opened,
     dataCombo: dataCombo,
-    dropdownWidth: dropdownWidth || 0,
-    searchNotFoundText: searchNotFoundText
+    dropdownWidth: dropdownWidth || 0
   })));
 };
 var _default = exports.default = SimpleSelect;