linear-react-components-ui 1.0.10-beta.2 → 1.0.10-beta.21

package/lib/inputs/period/index.js

@@ -27,7 +27,6 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var PeriodPicker = function PeriodPicker(props) {
-  var _props$value2, _props$value3;
   var _props$showButtonOpen = props.showButtonOpen,
     showButtonOpen = _props$showButtonOpen === void 0 ? true : _props$showButtonOpen,
     _props$openOnFocus = props.openOnFocus,
@@ -42,11 +41,11 @@ var PeriodPicker = function PeriodPicker(props) {
       height: '350px'
     } : _props$dialogSize,
     calendarColorStyle = props.calendarColorStyle;
-  var _useState = (0, _react.useState)(props.value && props.value.valueInitial ? (0, _moment.default)(props.value.valueInitial) : undefined),
+  var _useState = (0, _react.useState)(props.value && props.value.initial ? (0, _moment.default)(props.value.initial) : undefined),
     _useState2 = _slicedToArray(_useState, 2),
     valueInitial = _useState2[0],
     setValueInitial = _useState2[1];
-  var _useState3 = (0, _react.useState)(props.value && props.value.valueFinal ? (0, _moment.default)(props.value.valueFinal) : undefined),
+  var _useState3 = (0, _react.useState)(props.value && props.value.final ? (0, _moment.default)(props.value.final) : undefined),
     _useState4 = _slicedToArray(_useState3, 2),
     valueFinal = _useState4[0],
     setValueFinal = _useState4[1];
@@ -119,10 +118,10 @@ var PeriodPicker = function PeriodPicker(props) {
     }
   }, [valueInitial, valueFinal]);
   (0, _react.useEffect)(function () {
-    if (props.value) {
+    if (props.value && !((0, _moment.default)(props.value.initial).isSame(valueInitial) || (0, _moment.default)(props.value.final).isSame(valueFinal))) {
       var _props$value = props.value,
-        valueInitialProp = _props$value.valueInitial,
-        valueFinalProp = _props$value.valueFinal;
+        valueInitialProp = _props$value.initial,
+        valueFinalProp = _props$value.final;
       var newValueInitial;
       var newValueFinal;
       if ((0, _moment.default)(valueInitialProp, 'YYYY-MM-DD', true).isValid()) {
@@ -134,7 +133,7 @@ var PeriodPicker = function PeriodPicker(props) {
       setValueInitial(newValueInitial);
       setValueFinal(newValueFinal);
     }
-  }, [(_props$value2 = props.value) === null || _props$value2 === void 0 ? void 0 : _props$value2.valueInitial, (_props$value3 = props.value) === null || _props$value3 === void 0 ? void 0 : _props$value3.valueFinal]);
+  }, [props.value]);
   var openCalendar = function openCalendar() {
     setShowCalendar(true);
     setShowPeriodSelection(false);
@@ -162,7 +161,7 @@ var PeriodPicker = function PeriodPicker(props) {
     }
   };
   var setValue = function setValue(e, value) {
-    var sholdOpenDropdown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    var shouldOpenDropdown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
     var changingAux = e ? e.target.name : '';
     var dateObj = (0, _moment.default)(value, 'DD/MM/YYYY');
     if (changingAux === 'valueInitial') {
@@ -170,7 +169,7 @@ var PeriodPicker = function PeriodPicker(props) {
     } else {
       setValueFinal(dateObj);
     }
-    if (changingAux === 'valueInitial' && !valueFinal && sholdOpenDropdown) {
+    if (changingAux === 'valueInitial' && !valueFinal && shouldOpenDropdown) {
       var _inputFinalRef$curren;
       if (valueFinal) setChanging(valueFinal);
       setShowCalendar(false);

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

@@ -4,6 +4,7 @@ import { ColorStyles } from '../../@types/ColorStyles.js';
 import { Period } from '../../@types/Period.js';
 import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
+import '../../@types/Align.js';
 
 type DateTypes = 'today' | 'week' | 'lastweek' | 'last15' | 'month' | 'lastmonth';
 interface IPeriodOptions {
@@ -29,8 +30,8 @@ interface IPeriodDropdownProps {
 interface IPeriodPickerProps {
     label?: string;
     value?: {
-        valueInitial?: Moment | string;
-        valueFinal?: Moment | string;
+        initial?: Moment | string;
+        final?: Moment | string;
     };
     customClassForLabel?: string;
     labelUppercase?: boolean;

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

@@ -3,9 +3,12 @@ import 'react';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
 import '../base/types.js';
+import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../drawer/types.js';
 import '../../@types/Position.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
 
 declare const SearchField: (props: ISearchProps) => JSX.Element | null;
 

package/lib/inputs/search/search_input.spec.js

@@ -0,0 +1,209 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _storageMock = _interopRequireWildcard(require("../../../../config/jest/storageMock"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var searchField = function searchField(fieldProps, advancedFilterProps) {
+  return /*#__PURE__*/_react.default.createElement(_index.default, _extends({
+    advancedFilterProps: _extends({
+      headerTitle: 'Pesquisa Avançada',
+      content: 'Conteúdo da Pesquisa'
+    }, advancedFilterProps)
+  }, fieldProps));
+};
+
+describe('SearchField', function () {
+  it('should render correctly', function () {
+    var _render = (0, _react2.render)(searchField()),
+        container = _render.container;
+
+    expect(container.firstChild).toBeTruthy();
+  });
+  it('should be apply value', function () {
+    var value = '1 ';
+
+    var _render2 = (0, _react2.render)(searchField({
+      value: value
+    })),
+        container = _render2.container;
+
+    var inputHTML = container.querySelector('.textinput');
+    expect(inputHTML.value).toBe(value);
+  });
+  it('should apply textAlign', function () {
+    var textAlign = 'left';
+
+    var _render3 = (0, _react2.render)(searchField({
+      textAlign: textAlign
+    })),
+        container = _render3.container;
+
+    var inputHTML = container.querySelector('.textinput');
+    expect(inputHTML).toHaveClass("text-align-".concat(textAlign));
+  });
+  it('should apply resetButton and execute onReset callback', function () {
+    var onReset = jest.fn();
+
+    var _render4 = (0, _react2.render)(searchField({
+      onReset: onReset,
+      resetButton: true,
+      value: 'foo'
+    })),
+        getAllByTestId = _render4.getAllByTestId;
+
+    _react2.fireEvent.click(getAllByTestId('icon')[0]);
+
+    expect(onReset).toBeCalled();
+  });
+  describe('advancedFilterProps', function () {
+    it('should drawerHeader content headerTitle', function () {
+      var _render5 = (0, _react2.render)(searchField()),
+          container = _render5.container;
+
+      _react2.fireEvent.click(container.querySelector('.button-component'));
+
+      expect(document.querySelector('.drawerheader')).toHaveTextContent('Pesquisa Avançada');
+    });
+    it('should drawerContent to have content', function () {
+      var _render6 = (0, _react2.render)(searchField()),
+          container = _render6.container;
+
+      _react2.fireEvent.click(container.querySelector('.button-component'));
+
+      expect(document.querySelector('.drawercontent')).toHaveTextContent('Conteúdo da Pesquisa');
+    });
+    it('should execute onStateChange on Drawer Open', function () {
+      var onStateChange = jest.fn();
+
+      var _render7 = (0, _react2.render)(searchField({}, {
+        onStateChange: onStateChange
+      })),
+          container = _render7.container;
+
+      _react2.fireEvent.click(container.querySelector('.button-component'));
+
+      expect(onStateChange).toBeCalledTimes(1);
+    });
+  });
+  describe('Permission', function () {
+    var setSessionStorageMock = function setSessionStorageMock() {
+      Object.defineProperty(window, 'sessionStorage', {
+        value: (0, _storageMock.default)()
+      });
+    };
+
+    it('should render subject when permission granted', function () {
+      setSessionStorageMock();
+      var permissionAttr = (0, _storageMock.permissionAttrMockAuthorized)('unvisible');
+
+      var _render8 = (0, _react2.render)(searchField({
+        permissionAttr: permissionAttr
+      })),
+          container = _render8.container;
+
+      expect(container.querySelector('.input-base-component')).not.toBeNull();
+    });
+    it('should check permission, be unavaible and onDenied is unvisible', function () {
+      setSessionStorageMock();
+      var permissionAttr = (0, _storageMock.permissionAttrMockUnauthorized)('unvisible');
+
+      var _render9 = (0, _react2.render)(searchField({
+        permissionAttr: permissionAttr
+      })),
+          container = _render9.container;
+
+      expect(container.querySelector('.input-base-component')).toBeNull();
+    });
+    it('should check permission, be unavaible and onDenied is disabled', function () {
+      setSessionStorageMock();
+      var permissionAttr = (0, _storageMock.permissionAttrMockUnauthorized)('disabled');
+      var onChange = jest.fn();
+
+      var _render10 = (0, _react2.render)(searchField({
+        permissionAttr: permissionAttr,
+        onChange: onChange
+      })),
+          container = _render10.container;
+
+      var inputHTML = container.querySelector('.textinput');
+      var inputWrapper = container.querySelector('.inputwrapper');
+
+      _react2.fireEvent.change(inputHTML, {
+        target: {
+          value: 'sus'
+        }
+      });
+
+      expect(inputHTML.disabled).toBeTruthy();
+      expect(onChange).not.toBeCalled();
+      expect(inputWrapper).toHaveClass('-disabled');
+    });
+    it('should check permission, be unavaible and onDenied is readOnly', function () {
+      setSessionStorageMock();
+      var permissionAttr = (0, _storageMock.permissionAttrMockUnauthorized)('disabled');
+      var onChange = jest.fn();
+
+      var _render11 = (0, _react2.render)(searchField({
+        permissionAttr: permissionAttr,
+        onChange: onChange
+      })),
+          container = _render11.container;
+
+      var inputHTML = container.querySelector('.textinput');
+      var inputWrapper = container.querySelector('.inputwrapper');
+
+      _react2.fireEvent.change(inputHTML, {
+        target: {
+          value: 'sus'
+        }
+      });
+
+      expect(inputHTML.disabled).toBeTruthy();
+      expect(onChange).not.toBeCalled();
+      expect(inputWrapper).toHaveClass('-disabled');
+    });
+    it('should check permission, be unavaible and onDenied is hideContent', function () {
+      setSessionStorageMock();
+      var permissionAttr = (0, _storageMock.permissionAttrMockUnauthorized)('hideContent');
+      var onChange = jest.fn();
+
+      var _render12 = (0, _react2.render)(searchField({
+        permissionAttr: permissionAttr,
+        onChange: onChange,
+        value: 'text'
+      })),
+          container = _render12.container;
+
+      var inputHTML = container.querySelector('.textinput');
+      var inputWrapper = container.querySelector('.inputwrapper');
+
+      _react2.fireEvent.change(inputHTML, {
+        target: {
+          value: 'sus'
+        }
+      });
+
+      expect(inputHTML.value).toBe('');
+      expect(inputHTML.disabled).toBeTruthy();
+      expect(onChange).not.toBeCalled();
+      expect(inputWrapper).toHaveClass('-disabled');
+    });
+  });
+});

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

@@ -3,9 +3,12 @@ import 'react';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
 import '../base/types.js';
+import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../drawer/types.js';
 import '../../@types/Position.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
 
 declare const ActionButtons: (props: IActionButtonsSelectProps) => JSX.Element;
 

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

@@ -3,9 +3,12 @@ import 'react';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
 import '../base/types.js';
+import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../drawer/types.js';
 import '../../@types/Position.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
 
 declare const Dropdown: (props: IDropdownSelectProps) => JSX.Element;
 

package/lib/inputs/select/Dropdown.js

@@ -118,7 +118,7 @@ var Dropdown = function Dropdown(props) {
       }
     }), /*#__PURE__*/_react.default.createElement("span", {
       className: "label"
-    }, item[descriptionKey])));
+    }, typeof descriptionKey === 'string' ? item[descriptionKey] : descriptionKey(item))));
   }), dataCombo && dataCombo.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: "notfound"
   }, searchNotFoundText)));

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

@@ -1,22 +1,20 @@
-import { DataCombo } from '../../@types/DataCombo.js';
 import { IDropdownSelectProps } from '../types.js';
+import { GetSimpleFilteredParams, GetMultipleFilteredParams } from './types.js';
 import 'react';
 import '../../@types/PermissionAttr.js';
+import '../../@types/DataCombo.js';
 import '../base/types.js';
+import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../drawer/types.js';
 import '../../@types/Position.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
 
 declare const contentClass: (props: IDropdownSelectProps) => string;
 declare const getDropdownItemCssClass: (selected: boolean, disabled: boolean, striped: boolean) => string;
-interface GetFilteredParams {
-    dataSource: DataCombo[];
-    descriptionKey: string;
-    inputText: string;
-    currents: DataCombo[];
-}
-declare const getFilteredSimpleDataCombo: ({ dataSource, descriptionKey, inputText, }: Omit<GetFilteredParams, 'currents'>) => any[];
-declare const getFilteredMultipleDataCombo: ({ dataSource, inputText, descriptionKey, currents, }: GetFilteredParams) => any[];
+declare const getFilteredSimpleDataCombo: ({ dataSource, descriptionKey, inputText, }: Omit<GetSimpleFilteredParams, 'currents'>) => any[];
+declare const getFilteredMultipleDataCombo: ({ dataSource, inputText, descriptionKey, currents, }: GetMultipleFilteredParams) => any[];
 declare const returnDropdownDynamicStyles: ({ selectFieldRef, dropdownMaxHeight, dropdownRef }: IDropdownSelectProps) => {
     maxHeight: number;
     top: number;

package/lib/inputs/select/helper.js

@@ -21,7 +21,12 @@ var getFilteredSimpleDataCombo = function getFilteredSimpleDataCombo(_ref) {
     descriptionKey = _ref.descriptionKey,
     inputText = _ref.inputText;
   return dataSource && dataSource.filter(function (item) {
-    return item[descriptionKey].toLowerCase().indexOf(inputText.toLowerCase()) > -1;
+    var _descriptionKey;
+    if (typeof descriptionKey === 'string') {
+      var _item$descriptionKey;
+      return ((_item$descriptionKey = item[descriptionKey]) === null || _item$descriptionKey === void 0 ? void 0 : _item$descriptionKey.toLowerCase().indexOf(inputText === null || inputText === void 0 ? void 0 : inputText.toString().toLowerCase())) > -1;
+    }
+    return ((_descriptionKey = descriptionKey(item)) === null || _descriptionKey === void 0 ? void 0 : _descriptionKey.toLowerCase().indexOf(inputText === null || inputText === void 0 ? void 0 : inputText.toString().toLowerCase())) > -1;
   });
 };
 exports.getFilteredSimpleDataCombo = getFilteredSimpleDataCombo;
@@ -31,7 +36,11 @@ var getFilteredMultipleDataCombo = function getFilteredMultipleDataCombo(_ref2)
     descriptionKey = _ref2.descriptionKey,
     currents = _ref2.currents;
   return dataSource.filter(function (item) {
-    return item[descriptionKey].toLowerCase().indexOf(inputText.toLowerCase()) > -1 && !currents.includes(item);
+    var _descriptionKey2;
+    if (typeof descriptionKey === 'string') {
+      return item[descriptionKey].toLowerCase().indexOf(inputText === null || inputText === void 0 ? void 0 : inputText.toString().toLowerCase()) > -1 && !currents.includes(item);
+    }
+    return ((_descriptionKey2 = descriptionKey(item)) === null || _descriptionKey2 === void 0 ? void 0 : _descriptionKey2.toLowerCase().indexOf(inputText === null || inputText === void 0 ? void 0 : inputText.toString().toLowerCase())) > -1 && !currents.includes(item);
   });
 };
 exports.getFilteredMultipleDataCombo = getFilteredMultipleDataCombo;

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

@@ -1,4 +1,5 @@
 import { ISelectFieldProps } from './types.js';
+import '../../@types/Align.js';
 import '../../@types/DataCombo.js';
 import '../../@types/PermissionAttr.js';
 import '../base/types.js';

package/lib/inputs/select/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _simple = _interopRequireDefault(require("./simple"));
 var _multiple = _interopRequireDefault(require("./multiple"));
 require("../../assets/styles/select.scss");
 var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
+var _simple = _interopRequireDefault(require("./simple"));
 var _excluded = ["gridLayout", "multiple", "value"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -19,15 +19,16 @@ var SelectField = function SelectField(props) {
     multiple = props.multiple,
     value = props.value,
     newProps = _objectWithoutProperties(props, _excluded);
-  var component = multiple ? /*#__PURE__*/_react.default.createElement(_multiple.default, _extends({
+  var component = multiple ? /*#__PURE__*/_react.default.createElement(_multiple.default, _extends({}, newProps, {
     dataSource: props.dataSource ? props.dataSource : [],
     idKey: props.idKey ? props.idKey : '',
+    value: Array.isArray(value) ? value : undefined,
     descriptionKey: props.descriptionKey ? props.descriptionKey : ''
-  }, newProps)) : /*#__PURE__*/_react.default.createElement(_simple.default, _extends({
+  })) : /*#__PURE__*/_react.default.createElement(_simple.default, _extends({}, newProps, {
     idKey: props.idKey ? props.idKey : '',
-    value: value,
+    value: !Array.isArray(value) ? value : undefined,
     descriptionKey: props.descriptionKey ? props.descriptionKey : ''
-  }, newProps));
+  }));
   if (gridLayout !== undefined) {
     return /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
       customClass: "-withinput",

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

@@ -1,4 +1,5 @@
 import { ISelectedsMultipleProps } from '../types.js';
+import '../../../@types/Align.js';
 import '../../../@types/DataCombo.js';
 import '../../../@types/PermissionAttr.js';
 import '../../base/types.js';

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

@@ -15,7 +15,7 @@ var Selecteds = function Selecteds(_ref) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "selecteditem",
       key: "selected-".concat(selected[idKey])
-    }, selected[descriptionKey], /*#__PURE__*/_react.default.createElement("span", {
+    }, typeof descriptionKey === 'string' ? selected[descriptionKey] : descriptionKey(selected), /*#__PURE__*/_react.default.createElement("span", {
       className: "close",
       role: "button",
       tabIndex: -1,

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

@@ -1,4 +1,5 @@
 import { IMultipleSelectProps } from '../types.js';
+import '../../../@types/Align.js';
 import '../../../@types/DataCombo.js';
 import '../../../@types/PermissionAttr.js';
 import '../../base/types.js';

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

@@ -50,7 +50,7 @@ var MultipleSelect = function MultipleSelect(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     selected = _useState6[0],
     setSelected = _useState6[1];
-  var _useState7 = (0, _react.useState)(''),
+  var _useState7 = (0, _react.useState)([]),
     _useState8 = _slicedToArray(_useState7, 2),
     inputValue = _useState8[0],
     setInputValue = _useState8[1];
@@ -79,6 +79,7 @@ var MultipleSelect = function MultipleSelect(props) {
   var dropdownRef = (0, _react.useRef)(null);
   var selectWrapper = (0, _react.useRef)();
   var gridElRef = (0, _react.useRef)();
+  var descriptionKeyIsString = typeof descriptionKey === 'string';
   var onScreenResize = function onScreenResize() {
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
@@ -104,12 +105,12 @@ var MultipleSelect = function MultipleSelect(props) {
     if (remoteSearch) {
       if (props.onSearch) props.onSearch(filteredValue);
       setOpened(true);
-      setInputValue(filteredValue);
+      setInputValue([filteredValue]);
     } else {
       var dataComboFilter = dataSource;
-      if (filteredValue !== '') {
+      if (filteredValue.length > 0) {
         dataComboFilter = (0, _helper.getFilteredMultipleDataCombo)({
-          inputText: filteredValue,
+          inputText: [filteredValue],
           dataSource: dataSource,
           descriptionKey: descriptionKey,
           currents: currents
@@ -119,7 +120,7 @@ var MultipleSelect = function MultipleSelect(props) {
       setDataCombo(dataComboFilter);
       setOpened(true);
       if (selectedFilter) setSelected(selectedFilter);
-      setInputValue(filteredValue);
+      setInputValue([filteredValue]);
     }
   };
   var onSelect = function onSelect(select) {
@@ -127,7 +128,7 @@ var MultipleSelect = function MultipleSelect(props) {
     var currentsSelect = [].concat(_toConsumableArray(currents), [select]);
     setCurrents(currentsSelect);
     setDataCombo(dataSource);
-    setInputValue('');
+    setInputValue([]);
     setOpened(false);
     if (props.onSelect) setSelected(props.onSelect(currentsSelect.map(function (i) {
       return i[idKey];
@@ -171,12 +172,14 @@ var MultipleSelect = function MultipleSelect(props) {
         } else {
           index = dataSource && index === 0 ? dataSource.length - 1 : index - 1;
         }
-        if (dataSource && dataSource.length && dataSource[index][props.descriptionKey]) {
-          setInputValue(dataSource[index][props.descriptionKey]);
+        if (dataSource && dataSource.length) {
+          if (descriptionKeyIsString && dataSource[index][descriptionKey]) {
+            setInputValue(dataSource[index][descriptionKey]);
+          } else if (!descriptionKeyIsString) setInputValue([descriptionKey(dataSource[index])]);
         }
         if (dataSource) setSelected(dataSource[index]);
       } else if (e.keyCode === constants.keyCodes.BACKSPACE) {
-        if (inputValue === '') {
+        if (inputValue.length === 0) {
           var currentsKeyDown = _lodash.default.dropRight(currents);
           setCurrents(currentsKeyDown);
           if (props.onSelect) props.onSelect(currentsKeyDown.map(function (i) {
@@ -238,7 +241,7 @@ var MultipleSelect = function MultipleSelect(props) {
     ref: componentRef,
     className: "select-component"
   }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
-    value: inputValue,
+    value: inputValue.toString(),
     readOnly: shouldBeReadOnly(),
     onFocus: function onFocus() {
       _onFocus();