linear-react-components-ui 1.1.20-beta.33 → 1.1.20-beta.35

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

@@ -0,0 +1,281 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var uuid = _interopRequireWildcard(require("uuid"));
+var _Dropdown = _interopRequireDefault(require("../Dropdown"));
+var _ActionButtons = _interopRequireDefault(require("../ActionButtons"));
+var _Selecteds = _interopRequireDefault(require("./Selecteds"));
+var constants = _interopRequireWildcard(require("../../../internals/constants"));
+var _InputTextBase = _interopRequireDefault(require("../../base/InputTextBase"));
+var _helper = require("../helper");
+var _hint = _interopRequireDefault(require("../../../hint"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const MultipleSelect = props => {
+  const {
+    idKey,
+    dataSource = [],
+    handlerClear,
+    value = [],
+    remoteSearch = false,
+    descriptionKey,
+    showClearButton,
+    rightElements = [],
+    hint,
+    hintPosition = 'below'
+  } = props;
+  const [dataCombo, setDataCombo] = (0, _react.useState)(dataSource);
+  const [currents, setCurrents] = (0, _react.useState)([]);
+  const [selected, setSelected] = (0, _react.useState)();
+  const [inputValue, setInputValue] = (0, _react.useState)([]);
+  const [opened, setOpened] = (0, _react.useState)(false);
+  const [dropdownWidth, setDropdownWidth] = (0, _react.useState)(0);
+  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.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 insideComponents = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label', 'actionbutton'];
+  const onScreenResize = () => {
+    if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
+  };
+  const onClickOutside = event => {
+    const {
+      target
+    } = event;
+    if (!insideComponents.includes(target.className) && target !== selectWrapper.current && selectWrapper.current && !selectWrapper.current.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
+      setOpened(false);
+    }
+  };
+  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 onClearClick = () => {
+    setSelected(undefined);
+    setCurrents([]);
+    if (props.onSelect) props.onSelect();
+  };
+  const onFilter = filteredValue => {
+    let selectedFilter = null;
+    if (remoteSearch) {
+      if (props.onSearch) props.onSearch(filteredValue);
+      setOpened(true);
+      setInputValue([filteredValue]);
+    } else {
+      let dataComboFilter = dataSource;
+      if (filteredValue.length > 0) {
+        dataComboFilter = (0, _helper.getFilteredMultipleDataCombo)({
+          inputText: [filteredValue],
+          dataSource,
+          descriptionKey,
+          currents
+        });
+      }
+      if (dataComboFilter && dataComboFilter.length > 0) selectedFilter = dataComboFilter[0];
+      setDataCombo(dataComboFilter);
+      setOpened(true);
+      if (selectedFilter) setSelected(selectedFilter);
+      setInputValue([filteredValue]);
+    }
+  };
+  const onFocus = () => {
+    const dropdownWidthFocus = selectWrapper.current ? selectWrapper.current.clientWidth : dropdownWidth;
+    setOpened(true);
+    setDropdownWidth(dropdownWidthFocus);
+  };
+  const onSelect = select => {
+    var _dropdownRef$current2;
+    if (select === null) return;
+    const currentsSelect = [...currents, select];
+    setCurrents(currentsSelect);
+    setDataCombo(dataSource);
+    setInputValue([]);
+    if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
+    if (props.onSelect) setSelected(props.onSelect(currentsSelect.map(i => i[idKey])));
+    (_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : _dropdownRef$current2.focus();
+  };
+  const onUnselect = id => {
+    if (currents) {
+      var _dropdownRef$current3;
+      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])));
+      (_dropdownRef$current3 = dropdownRef.current) === null || _dropdownRef$current3 === void 0 ? void 0 : _dropdownRef$current3.focus();
+    }
+  };
+  const onOpenClose = () => {
+    setOpened(prevState => !prevState);
+    if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
+  };
+  const onBlur = e => {
+    if (props.onBlur) props.onBlur(e);
+    if (!insideComponent) {
+      setOpened(false);
+      setDataCombo(dataSource);
+    }
+  };
+  const onInputKeyDown = e => {
+    if (e.keyCode) {
+      if (e.keyCode === constants.keyCodes.ENTER && selected && opened) {
+        var _e$preventDefault;
+        (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
+        if (!currents.some(current => current[idKey] === selected[idKey])) {
+          var _e$preventDefault2;
+          (_e$preventDefault2 = e.preventDefault) === null || _e$preventDefault2 === void 0 ? void 0 : _e$preventDefault2.call(e);
+          onSelect(selected);
+        }
+      } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
+        if (!opened) setOpened(true);
+        let index = dataCombo ? dataCombo.findIndex(d => d === selected) : 0;
+        if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
+          index = dataCombo && index === dataCombo.length - 1 ? 0 : index + 1;
+        } else {
+          index = dataCombo && index === 0 ? dataCombo.length - 1 : index - 1;
+        }
+        if (dataCombo && dataCombo.length) {
+          if (descriptionKeyIsString && dataCombo[index][descriptionKey]) {
+            setInputValue(dataCombo[index][descriptionKey]);
+          } else if (!descriptionKeyIsString) setInputValue([descriptionKey(dataCombo[index])]);
+        }
+        if (dataCombo) setSelected(dataCombo[index]);
+      } else if (e.keyCode === constants.keyCodes.BACKSPACE) {
+        if (inputValue.length === 0) {
+          const currentsKeyDown = _lodash.default.dropRight(currents);
+          setCurrents(currentsKeyDown);
+          if (props.onSelect) props.onSelect(currentsKeyDown.map(i => i[idKey]));
+        }
+      } else if (e.keyCode === constants.keyCodes.TAB) {
+        setOpened(false);
+      }
+    }
+  };
+  const setOnDenied = denied => {
+    setOnDeniedSelect(denied);
+  };
+  const shouldDisable = () => props.disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
+  const shouldBeReadOnly = () => props.readOnly || onDenied && onDenied.readOnly;
+  (0, _react.useEffect)(() => {
+    window.addEventListener('resize', onScreenResize);
+    document.addEventListener('click', onClickOutside);
+    document.addEventListener('mousemove', onMouseMove);
+    if (handlerClear) onClearClick();
+    return () => {
+      window.removeEventListener('resize', onScreenResize);
+      document.removeEventListener('click', onClickOutside);
+      document.removeEventListener('mousemove', onMouseMove);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (props.gridLayout) {
+      const gridEl = document.querySelector("#".concat(componentId, ">.-withinput.grid-container"));
+      if (gridElRef.current !== gridEl && gridEl) gridElRef.current = gridEl;
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (value.length > 0 && value !== valueFromProps && dataSource.length > 0) {
+      const newCurrents = dataSource.filter(item => value.includes(item[idKey]));
+      setValueFromProps(value);
+      setCurrents(newCurrents);
+    }
+  }, [dataSource.length, value.length]);
+  (0, _react.useEffect)(() => {
+    if (!_lodash.default.isEqual(dataSource, dataCombo)) {
+      const filteredDataCombo = remoteSearch ? dataSource : (0, _helper.getFilteredMultipleDataCombo)({
+        currents,
+        dataSource,
+        descriptionKey,
+        inputText: inputValue
+      });
+      setDataCombo(filteredDataCombo);
+      setSelected(filteredDataCombo.length > 0 ? dataCombo[0] : null);
+    }
+  }, [dataSource]);
+  return /*#__PURE__*/_react.default.createElement("span", {
+    id: componentId,
+    ref: componentRef,
+    className: "select-component"
+  }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+    inputRef: ref => {
+      if (props.inputRef) {
+        if (!_lodash.default.isFunction(props.inputRef)) {
+          props.inputRef.current = ref;
+        } else {
+          props.inputRef(ref);
+        }
+      }
+      inputTextRef.current = ref;
+    },
+    autoComplete: "off",
+    value: inputValue.toString(),
+    readOnly: shouldBeReadOnly(),
+    onFocus: () => {
+      onFocus();
+    },
+    onBlur: e => {
+      onBlur(e);
+    },
+    onChange: e => {
+      if (e) onFilter(e.target.value);
+    },
+    onClick: onFocus,
+    onKeyDown: onInputKeyDown,
+    customClassForWrapper: "selectwrapper ".concat((props.readOnly || shouldDisable() || shouldBeReadOnly()) && ' -undigitable'),
+    customClassForInputContent: "multiselect",
+    inputBaseRef: r => {
+      selectWrapper.current = r;
+    },
+    handlerSetOnDenied: setOnDenied,
+    rightElements: [...rightElements, /*#__PURE__*/_react.default.createElement(_ActionButtons.default, {
+      key: "action-buttons-multiselect",
+      showClearButton: showClearButton,
+      disabled: shouldDisable() || shouldBeReadOnly(),
+      dropDownOpened: opened,
+      handlerClear: () => {
+        if (shouldDisable()) return null;
+        return onClearClick();
+      },
+      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,
+    dropdownRef: dropdownRef,
+    gridWrapperStyle: props.gridLayout && gridElRef.current ? window.getComputedStyle(gridElRef.current) : undefined,
+    handleOnSelect: onSelect,
+    handleOnFilter: onFilter,
+    handleOnKeydown: onInputKeyDown,
+    handleOnBlur: () => onBlur,
+    handleOnFocus: onFocus,
+    opened: opened,
+    dataCombo: dataCombo,
+    currents: currents,
+    dropdownWidth: dropdownWidth || 0
+  })), /*#__PURE__*/_react.default.createElement(_hint.default, {
+    visible: !!hint && hintPosition === 'below',
+    customClass: "hint",
+    description: hint
+  }));
+};
+var _default = exports.default = MultipleSelect;

package/lib/inputs/select/simple/index.d.ts

@@ -0,0 +1,13 @@
+import { ISimpleSelectProps } from '../types.js';
+import '../../../@types/Align.js';
+import '../../../@types/DataCombo.js';
+import '../../../@types/PermissionAttr.js';
+import '../../base/types.js';
+import 'react';
+import '../../../@types/Period.js';
+import '../../../internals/types.js';
+import '../../../@types/Position.js';
+
+declare const SimpleSelect: (props: ISimpleSelectProps) => JSX.Element;
+
+export { SimpleSelect as default };

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

@@ -0,0 +1,309 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var uuid = _interopRequireWildcard(require("uuid"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _Dropdown = _interopRequireDefault(require("../Dropdown"));
+var _ActionButtons = _interopRequireDefault(require("../ActionButtons"));
+var constants = _interopRequireWildcard(require("../../../internals/constants"));
+var _helper = require("../helper");
+var _InputTextBase = _interopRequireDefault(require("../../base/InputTextBase"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const SimpleSelect = props => {
+  const {
+    value,
+    descriptionKey,
+    dataSource = [],
+    gridLayout,
+    onSearch,
+    disabled,
+    readOnly,
+    openDropdownOnFocus = true,
+    selectFirstOnEnter = false,
+    idKey,
+    remoteSearch = false,
+    name = '',
+    undigitable,
+    searchOnDropdown = false,
+    allOptions = undefined,
+    showClearButton = false,
+    searchNotFoundText,
+    rightElements = []
+  } = props;
+  const descriptionKeyIsString = typeof descriptionKey === 'string';
+  const dataSourceWithAllOptions = allOptions ? [{
+    [idKey]: allOptions.idValue,
+    [descriptionKeyIsString ? descriptionKey : descriptionKey(allOptions.label)]: allOptions.label
+  }, ...dataSource] : dataSource;
+  const [dataCombo, setDataCombo] = (0, _react.useState)(dataSourceWithAllOptions);
+  const [selected, setSelected] = (0, _react.useState)(null);
+  const [inputText, setInputText] = (0, _react.useState)('');
+  const [opened, setOpened] = (0, _react.useState)(false);
+  const [dropdownWidth, setDropdownWidth] = (0, _react.useState)(0);
+  const [insideComponent, setInsideComponent] = (0, _react.useState)(false);
+  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.v1());
+  const componentRef = (0, _react.useRef)(null);
+  const selectWrapper = (0, _react.useRef)();
+  const gridElement = (0, _react.useRef)();
+  const inputTextRef = (0, _react.useRef)(null);
+  const onScreenResize = () => {
+    if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
+  };
+  const onClickOutside = event => {
+    var _selectWrapper$curren, _dropdownRef$current;
+    const {
+      target
+    } = event;
+    if (target !== selectWrapper.current && !((_selectWrapper$curren = selectWrapper.current) !== null && _selectWrapper$curren !== void 0 && _selectWrapper$curren.contains(target)) && !((_dropdownRef$current = dropdownRef.current) !== null && _dropdownRef$current !== void 0 && _dropdownRef$current.contains(target))) {
+      setOpened(false);
+    }
+  };
+  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);
+  };
+  const getSelectEvent = selectedEvent => ({
+    target: {
+      value: selectedEvent ? selectedEvent[idKey] : undefined,
+      name
+    }
+  });
+  const onChange = selectedChange => {
+    if (props.onChange) {
+      const event = getSelectEvent(selectedChange);
+      props.onChange(event);
+    }
+  };
+  const onFilter = valueFilter => {
+    let selectedFilter = null;
+    if (remoteSearch) {
+      if (onSearch) onSearch(valueFilter);
+    } else {
+      const dataComboFilter = (0, _helper.getFilteredSimpleDataCombo)({
+        inputText: valueFilter,
+        descriptionKey,
+        dataSource: dataSourceWithAllOptions
+      });
+      if (dataComboFilter && dataComboFilter.length > 0) {
+        selectedFilter = dataComboFilter[0];
+        setSelected(selectedFilter);
+      }
+      setDataCombo(dataComboFilter);
+    }
+    setOpened(true);
+    setInputText(valueFilter);
+    if (selectedFilter) {
+      if (descriptionKeyIsString && valueFilter === selectedFilter[descriptionKey] || !descriptionKeyIsString && valueFilter === descriptionKey(selectedFilter)) {
+        onChange(selectedFilter);
+      }
+    }
+  };
+  const onSelect = selectedDropdown => {
+    var _dropdownRef$current4;
+    if (!selectedDropdown) return;
+    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);
+    });
+    (_dropdownRef$current4 = dropdownRef.current) === null || _dropdownRef$current4 === void 0 ? void 0 : _dropdownRef$current4.focus();
+  };
+  const onOpenClose = () => {
+    setOpened(prevState => !prevState);
+    if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
+  };
+  const onFocus = () => {
+    if (openDropdownOnFocus) setOpened(true);
+    if (selectWrapper) {
+      const dropdownWidthFocus = selectWrapper.current ? selectWrapper.current.clientWidth : 0;
+      setDropdownWidth(dropdownWidthFocus);
+    }
+  };
+  const onBlur = () => {
+    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 (!insideComponent) {
+      setOpened(false);
+      setIsTyping(false);
+      setDataCombo(dataSourceWithAllOptions);
+    }
+  };
+  const onInputKeyDown = e => {
+    if (e.keyCode) {
+      if (e.keyCode === constants.keyCodes.ENTER && selected && opened) {
+        var _e$preventDefault;
+        (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
+        onSelect(selected);
+      } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
+        if (!opened) setOpened(true);
+        let index = dataCombo.length > 0 ? dataCombo.findIndex(d => selected && d[idKey] === selected[idKey]) : 0;
+        if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
+          index = dataCombo && index === dataCombo.length - 1 ? 0 : index + 1;
+        } else {
+          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);
+    });
+  };
+  const setOnDenied = onDeniedSelect => {
+    setOnDeniedSelect(onDeniedSelect);
+  };
+  const shouldDisable = () => disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
+  const shouldBeReadOnly = () => readOnly || onDenied && onDenied.readOnly;
+  (0, _react.useEffect)(() => {
+    window.addEventListener('resize', onScreenResize);
+    document.addEventListener('click', onClickOutside);
+    document.addEventListener('mousemove', onMouseMove);
+    return () => {
+      window.removeEventListener('resize', onScreenResize);
+      document.removeEventListener('click', onClickOutside);
+      document.removeEventListener('mousemove', onMouseMove);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (gridLayout) {
+      const gridEl = document.querySelector("#".concat(componentId, ">.-withinput.grid-container"));
+      if (gridElement.current !== gridEl && gridEl) gridElement.current = gridEl;
+    }
+  }, [gridLayout]);
+  (0, _react.useEffect)(() => {
+    if (dataSourceWithAllOptions.length > 0) {
+      let newCurrent = null;
+      if (value || value === 0) {
+        newCurrent = dataSourceWithAllOptions.find(i => {
+          var _i$idKey;
+          return (value || value === 0) && ((_i$idKey = i[idKey]) === null || _i$idKey === void 0 ? void 0 : _i$idKey.toString().toLowerCase()) === (value === null || value === void 0 ? void 0 : value.toString().toLowerCase());
+        });
+      } else if (dataSourceWithAllOptions.length > 0 && selectFirstOnEnter) {
+        newCurrent = dataSourceWithAllOptions[0];
+      }
+      setSelected(newCurrent);
+      if (descriptionKeyIsString) setInputText(newCurrent ? newCurrent[descriptionKey] : '');else setInputText(newCurrent ? descriptionKey(newCurrent) : '');
+    }
+  }, [dataSourceWithAllOptions.length, value]);
+  (0, _react.useEffect)(() => {
+    if (!_lodash.default.isEqual(dataCombo, dataSourceWithAllOptions)) {
+      const dataComboFilteredSimple = undigitable || remoteSearch || !isTyping ? dataSourceWithAllOptions : (0, _helper.getFilteredSimpleDataCombo)({
+        inputText,
+        dataSource: dataSourceWithAllOptions,
+        descriptionKey
+      });
+      setDataCombo(dataComboFilteredSimple);
+      if (dataSourceWithAllOptions.length > 0 && remoteSearch) {
+        const data = dataSourceWithAllOptions[0];
+        setSelected(data);
+      }
+    }
+    if (allOptions) {
+      setDataCombo([{
+        [idKey]: allOptions.idValue,
+        [descriptionKeyIsString ? descriptionKey : descriptionKey(allOptions.label)]: allOptions.label
+      }, ...dataSource]);
+    }
+  }, [JSON.stringify(dataSourceWithAllOptions)]);
+  return /*#__PURE__*/_react.default.createElement("span", {
+    id: componentId,
+    ref: componentRef,
+    className: "select-component"
+  }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+    inputRef: ref => {
+      if (props.inputRef) {
+        if (!_lodash.default.isFunction(props.inputRef)) {
+          props.inputRef.current = ref;
+        } else {
+          props.inputRef(ref);
+        }
+      }
+      inputTextRef.current = ref;
+    },
+    autoComplete: "off",
+    readOnly: undigitable || shouldBeReadOnly(),
+    value: inputText,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onChange: e => {
+      if (e) onFilter(e.target.value);
+    },
+    onClick: onFocus,
+    onKeyDown: onInputKeyDown,
+    customClassForWrapper: "selectwrapper ".concat((undigitable || searchOnDropdown || shouldBeReadOnly()) && ' -undigitable'),
+    customClassForInputContent: "multiselect",
+    inputBaseRef: r => {
+      selectWrapper.current = r;
+    },
+    handlerSetOnDenied: inputOnDenied => setOnDenied(inputOnDenied),
+    rightElements: [...rightElements, /*#__PURE__*/_react.default.createElement(_ActionButtons.default, {
+      key: "action-buttons-simpleselect",
+      disabled: shouldDisable() || shouldBeReadOnly(),
+      showClearButton: showClearButton,
+      dropDownOpened: opened,
+      handlerClear: () => {
+        if (shouldDisable()) return null;
+        return onClearClick();
+      },
+      handlerOpenClose: onOpenClose
+    })]
+  })), opened && /*#__PURE__*/_react.default.createElement(_Dropdown.default, _extends({}, props, {
+    opened: opened,
+    selected: selected,
+    inputValue: inputText,
+    selectFieldRef: componentRef,
+    dropdownRef: dropdownRef,
+    searchOnDropdown: searchOnDropdown,
+    gridWrapperStyle: gridLayout && gridElement.current ? window.getComputedStyle(gridElement.current) : undefined,
+    handleOnSelect: dataSelected => {
+      if (dataSelected) onSelect(dataSelected);
+    },
+    handleOnFilter: valueFilter => onFilter(valueFilter),
+    handleOnKeydown: onInputKeyDown,
+    handleOnBlur: () => onBlur,
+    handleOnFocus: onFocus,
+    dataCombo: dataCombo,
+    dropdownWidth: dropdownWidth || 0,
+    searchNotFoundText: searchNotFoundText
+  })));
+};
+var _default = exports.default = SimpleSelect;