linear-react-components-ui 1.0.10-beta.9 → 1.0.10-rc.1

package/lib/inputs/date/helpers.d.ts

@@ -9,7 +9,7 @@ import '../../@types/Period.js';
 
 declare const PT_BR_FORMAT = "DD/MM/YYYY";
 declare const EN_US_FORMAT = "YYYY-MM-DD";
-declare const getCalendarDropdownStyle: ({ topPosition, leftPosition, width }: IDateDropdownProps) => string;
+declare const getCalendarDropdownStyle: ({ topPosition, leftPosition, width, minWidth, }: IDateDropdownProps) => string;
 declare const getMomentValue: (value: string) => moment.Moment;
 
 export { EN_US_FORMAT, PT_BR_FORMAT, getCalendarDropdownStyle, getMomentValue };

package/lib/inputs/date/helpers.js

@@ -13,8 +13,9 @@ exports.EN_US_FORMAT = EN_US_FORMAT;
 var getCalendarDropdownStyle = function getCalendarDropdownStyle(_ref) {
   var topPosition = _ref.topPosition,
     leftPosition = _ref.leftPosition,
-    width = _ref.width;
-  return "top: ".concat(topPosition, "px;\n  left: ").concat(leftPosition, "px;\n  width:").concat(width, "px");
+    width = _ref.width,
+    minWidth = _ref.minWidth;
+  return "top: ".concat(topPosition, "px;\n  left: ").concat(leftPosition, "px;\n  width: ").concat(width, "px;\n  min-width: ").concat(minWidth, "px;");
 };
 exports.getCalendarDropdownStyle = getCalendarDropdownStyle;
 var getMomentValue = function getMomentValue(value) {

package/lib/inputs/date/index.js

@@ -27,6 +27,7 @@ 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 CALENDAR_BUTTON_WIDTH = 24;
+var CALENDAR_MIN_WIDTH = 250;
 var DatePicker = function DatePicker(props) {
   var _props$showButtonOpen = props.showButtonOpen,
     showButtonOpen = _props$showButtonOpen === void 0 ? true : _props$showButtonOpen,
@@ -65,22 +66,26 @@ var DatePicker = function DatePicker(props) {
     _useState8 = _slicedToArray(_useState7, 2),
     inputDimensions = _useState8[0],
     setInputDimensions = _useState8[1];
-  var _useState9 = (0, _react.useState)({
+  var _useState9 = (0, _react.useState)(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    formatedLeftPosition = _useState10[0],
+    setFormatedLeftPosition = _useState10[1];
+  var _useState11 = (0, _react.useState)({
       disabled: false,
       readOnly: false,
       unvisible: false,
       hideContent: false
     }),
-    _useState10 = _slicedToArray(_useState9, 2),
-    onDenied = _useState10[0],
-    setOnDenied = _useState10[1];
+    _useState12 = _slicedToArray(_useState11, 2),
+    onDenied = _useState12[0],
+    setOnDenied = _useState12[1];
   var _inputRef = (0, _react.useRef)();
   var buttonOpenRef = (0, _react.useRef)();
   var dropdownContainer = (0, _react.useRef)();
-  var _useState11 = (0, _react.useState)(false),
-    _useState12 = _slicedToArray(_useState11, 2),
-    insideDropdown = _useState12[0],
-    setInsideDropdown = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    insideDropdown = _useState14[0],
+    setInsideDropdown = _useState14[1];
   var onScreenResize = function onScreenResize() {
     var _inputRef$current;
     setInputDimensions(_inputRef === null || _inputRef === void 0 ? void 0 : (_inputRef$current = _inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.getBoundingClientRect());
@@ -203,13 +208,22 @@ var DatePicker = function DatePicker(props) {
     }
     return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
       topPosition: inputDimensions ? inputDimensions.top + inputDimensions.height + 5 : '',
-      leftPosition: inputDimensions ? inputDimensions.left : '',
+      leftPosition: inputDimensions ? formatedLeftPosition : '',
+      minWidth: CALENDAR_MIN_WIDTH,
       width: inputDimensions ? inputDimensions.width + (showButtonOpen ? CALENDAR_BUTTON_WIDTH : 0) : '',
       dropdownRef: function dropdownRef(el) {
         dropdownContainer.current = el;
       }
     }, getCalendar(valueState, props === null || props === void 0 ? void 0 : props.calendarColorStyle));
   };
+  (0, _react.useEffect)(function () {
+    var screenWidth = window.innerWidth;
+    if (inputDimensions && screenWidth < inputDimensions.left + CALENDAR_MIN_WIDTH) {
+      setFormatedLeftPosition(inputDimensions.left - (CALENDAR_MIN_WIDTH - inputDimensions.width - CALENDAR_BUTTON_WIDTH));
+    } else {
+      setFormatedLeftPosition(inputDimensions === null || inputDimensions === void 0 ? void 0 : inputDimensions.left);
+    }
+  }, [getWrapperComponent]);
   if (onDenied && onDenied.unvisible) return null;
   (0, _react.useEffect)(function () {
     window.addEventListener('resize', onScreenResize);

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

@@ -39,8 +39,9 @@ interface IDateDropdownProps {
     children: ReactNode | ReactNode[];
     dropdownRef: (el: HTMLDivElement) => void;
     topPosition: number | string;
-    leftPosition: number | string;
+    leftPosition?: number | string;
     width: number | string;
+    minWidth: number | string;
 }
 interface IDateDialogProps {
     children: ReactNode | ReactNode[];

package/lib/inputs/inputHOC.d.ts

@@ -7,6 +7,8 @@ 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 InputHOC: <ComponentProps extends IInputHOCProps>(WrappedComponent: React__default.ComponentType<ComponentProps>) => (props: ComponentProps) => JSX.Element;
 

package/lib/inputs/mask/helpers.d.ts

@@ -8,6 +8,8 @@ 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 function extractNonMaskProps(props: IMaskHOCProps, maskProps: AnyMaskedOptions): any;
 declare function CPFValidation(cpf?: string, returnMessage?: (msg: string) => void): void | "CPF inválido";

package/lib/inputs/mask/imaskHOC.d.ts

@@ -7,6 +7,8 @@ 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 IMaskHOC: <ComponentProps extends IMaskHOCProps>(ComposedComponent: React__default.ComponentType<ComponentProps>) => {
     (props: ComponentProps): JSX.Element;

package/lib/inputs/mask/imaskHOC.js

@@ -63,7 +63,7 @@ var IMaskHOC = function IMaskHOC(ComposedComponent) {
       _props$isDateField = props.isDateField,
       isDateField = _props$isDateField === void 0 ? false : _props$isDateField;
     var maskOptions = {
-      placeholderChar: placeholderChar,
+      placeholderChar: placeholderChar === '' ? ' ' : placeholderChar,
       lazy: lazy,
       pattern: pattern,
       radix: radix,

package/lib/inputs/multiSelect/Dropdown.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _icons = _interopRequireDefault(require("../../icons"));
 var _avatar = _interopRequireDefault(require("../../avatar"));
+var _icons = _interopRequireDefault(require("../../icons"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -96,7 +96,7 @@ var Dropdown = function Dropdown(props) {
     viewBox: "0 0 32 32"
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "listcontainer"
-  }, dataCombo.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, dataCombo && dataCombo.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: "item selectall"
   }, /*#__PURE__*/_react.default.createElement("span", {
     role: "button",
@@ -111,7 +111,7 @@ var Dropdown = function Dropdown(props) {
     customClass: "checkboxicon"
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "label"
-  }, inputValue !== '' ? 'Selecionar todos pesquisados' : 'Selecionar Todos'))), dataCombo.map(function (item) {
+  }, inputValue !== '' ? 'Selecionar todos pesquisados' : 'Selecionar Todos'))), dataCombo === null || dataCombo === void 0 ? void 0 : dataCombo.map(function (item) {
     var isChecked = selecteds ? selecteds.find(function (selected) {
       return selected[idKey] === item[idKey];
     }) : undefined;

package/lib/inputs/multiSelect/index.js

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
+var _react = _interopRequireWildcard(require("react"));
 var _uuid = _interopRequireDefault(require("uuid"));
-var _Dropdown = _interopRequireDefault(require("./Dropdown"));
 var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
-var _helper = _interopRequireDefault(require("./helper"));
 var _ActionButtons = _interopRequireDefault(require("./ActionButtons"));
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+var _helper = _interopRequireDefault(require("./helper"));
 require("../../assets/styles/multiSelect.scss");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 ? 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); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -124,7 +124,7 @@ var MultiSelectField = function MultiSelectField(props) {
   };
   var handleOnFilter = function handleOnFilter(currentValue) {
     var newDataCombo = dataSource;
-    if (currentValue !== '') {
+    if (currentValue !== '' && dataSource) {
       newDataCombo = (0, _helper.default)({
         dataSource: dataSource,
         descriptionKey: descriptionKey,
@@ -141,7 +141,7 @@ var MultiSelectField = function MultiSelectField(props) {
   var onCheckAll = function onCheckAll() {
     var fromFilter = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     var currentData = fromFilter ? dataCombo : dataSource;
-    if (onSelect) onSelect(currentData.map(function (i) {
+    if (onSelect && currentData) onSelect(currentData.map(function (i) {
       return i[idKey];
     }));
     setSelecteds(currentData);
@@ -197,16 +197,17 @@ var MultiSelectField = function MultiSelectField(props) {
     };
   }, []);
   (0, _react.useEffect)(function () {
-    if (dataSource.length > 0) {
+    if (dataSource && dataSource.length > 0) {
       var newSelecteds = dataSource.filter(function (item) {
         return value === null || value === void 0 ? void 0 : value.includes(item[idKey]);
       });
       setSelecteds(newSelecteds);
     }
-  }, [value === null || value === void 0 ? void 0 : value.length, dataSource.length]);
+  }, [value === null || value === void 0 ? void 0 : value.length, dataSource === null || dataSource === void 0 ? void 0 : dataSource.length]);
   (0, _react.useEffect)(function () {
-    if (!_lodash.default.isEqual(dataSource, dataCombo)) {
+    if (dataSource && dataCombo && !_lodash.default.isEqual(dataSource, dataCombo)) {
       var newDataCombo = (0, _helper.default)(_extends({}, props, {
+        dataSource: dataSource || undefined,
         inputText: inputValue
       }));
       setDataCombo(newDataCombo);

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

@@ -20,7 +20,7 @@ interface IActionButtonsProps {
     dropdownAlignButton?: 'left' | 'right';
 }
 interface IDropdownMultiSelectProps {
-    dataCombo: DataCombo[];
+    dataCombo?: DataCombo[];
     idKey: string;
     descriptionKey: DescriptionKey;
     inputValue: string;
@@ -44,15 +44,16 @@ interface IDropdownMultiSelectProps {
     dropdownMaxHeight?: number;
 }
 interface IMultiSelectProps {
-    dataSource: DataCombo[];
+    dataSource?: DataCombo[];
     idKey: string;
     descriptionKey: DescriptionKey;
     value?: any[];
     gridLayout?: string;
-    onSelect: (data?: string[]) => void;
+    onSelect?: (data?: string[]) => void;
     onBlur?: (e: CustomInputEvent) => void;
     disabled?: boolean;
     dropdownAlignButton?: 'left' | 'right';
+    label?: string;
 }
 
 export { DescriptionKey, GetFilteredParams, IActionButtonsProps, IDropdownMultiSelectProps, IMultiSelectProps };

package/lib/inputs/number/BaseNumber.d.ts

@@ -8,6 +8,8 @@ import '../types.js';
 import '../../@types/DataCombo.js';
 import '../../drawer/types.js';
 import '../../@types/Position.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
 
 declare const BaseNumber: (props: IBaseNumberProps) => JSX.Element;
 

package/lib/inputs/number/Currency.d.ts

@@ -8,6 +8,8 @@ import '../types.js';
 import '../../@types/DataCombo.js';
 import '../../drawer/types.js';
 import '../../@types/Position.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
 
 declare const CurrencyField: (props: ICurrencyProps) => JSX.Element;
 

package/lib/inputs/number/Decimal.d.ts

@@ -8,6 +8,8 @@ import '../types.js';
 import '../../@types/DataCombo.js';
 import '../../drawer/types.js';
 import '../../@types/Position.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
 
 declare const DecimalField: (props: IBaseNumberProps) => JSX.Element;
 

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

@@ -10,6 +10,8 @@ import '../types.js';
 import '../../@types/DataCombo.js';
 import '../../drawer/types.js';
 import '../../@types/Position.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
 
 declare const NumberField: (props: INumberFieldProps) => JSX.Element;
 

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

@@ -7,6 +7,8 @@ import '../../@types/Period.js';
 import '../../@types/DataCombo.js';
 import '../../drawer/types.js';
 import '../../@types/Position.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
 
 interface INumberFieldProps extends IMaskHOCProps {
     value?: string;

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

@@ -7,6 +7,8 @@ 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/select/ActionButtons.d.ts

@@ -7,6 +7,8 @@ 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

@@ -7,6 +7,8 @@ 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/helper.d.ts

@@ -8,6 +8,8 @@ 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;

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

@@ -61,7 +61,7 @@ var SimpleSelect = function SimpleSelect(props) {
     _useState2 = _slicedToArray(_useState, 2),
     dataCombo = _useState2[0],
     setDataCombo = _useState2[1];
-  var _useState3 = (0, _react.useState)(),
+  var _useState3 = (0, _react.useState)(null),
     _useState4 = _slicedToArray(_useState3, 2),
     selected = _useState4[0],
     setSelected = _useState4[1];
@@ -89,7 +89,7 @@ var SimpleSelect = function SimpleSelect(props) {
     _useState16 = _slicedToArray(_useState15, 2),
     isTyping = _useState16[0],
     setIsTyping = _useState16[1];
-  var _useState17 = (0, _react.useState)(''),
+  var _useState17 = (0, _react.useState)(null),
     _useState18 = _slicedToArray(_useState17, 2),
     valueFromProps = _useState18[0],
     setValueFromProps = _useState18[1];
@@ -98,6 +98,11 @@ var SimpleSelect = function SimpleSelect(props) {
   var componentRef = (0, _react.useRef)(null);
   var selectWrapper = (0, _react.useRef)();
   var gridElement = (0, _react.useRef)();
+  var clearSelected = function clearSelected() {
+    setInputText('');
+    setSelected(null);
+    setDataCombo(dataSourceWithAllOptions);
+  };
   var onScreenResize = function onScreenResize() {
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
@@ -129,7 +134,7 @@ var SimpleSelect = function SimpleSelect(props) {
     }
   };
   var onFilter = function onFilter(valueFilter) {
-    var selectedFilter;
+    var selectedFilter = null;
     if (remoteSearch) {
       if (onSearch) onSearch(valueFilter);
     } else {
@@ -138,13 +143,19 @@ var SimpleSelect = function SimpleSelect(props) {
         descriptionKey: descriptionKey,
         dataSource: dataSourceWithAllOptions
       });
-      if (dataComboFilter && dataComboFilter.length > 0) selectedFilter = dataComboFilter[0];
+      if (dataComboFilter && dataComboFilter.length > 0) {
+        selectedFilter = dataComboFilter[0];
+      }
       setDataCombo(dataComboFilter);
     }
-    onChange(selectedFilter);
     setOpened(true);
     setInputText(valueFilter);
     setSelected(selectedFilter);
+    if (selectedFilter) {
+      if (descriptionKeyIsString && valueFilter === selectedFilter[descriptionKey] || !descriptionKeyIsString && valueFilter === descriptionKey(selectedFilter)) {
+        onChange(selectedFilter);
+      }
+    }
   };
   var onSelect = function onSelect(selectedDropdown) {
     if (selectedDropdown === undefined) return;
@@ -168,6 +179,11 @@ var SimpleSelect = function SimpleSelect(props) {
     if (props.onBlur) {
       var event = getSelectEvent(selected);
       props.onBlur(event);
+      if (selected) {
+        if (descriptionKeyIsString && inputText !== selected[descriptionKey] || !descriptionKeyIsString && inputText !== descriptionKey(selected)) {
+          clearSelected();
+        }
+      }
     }
     if (!insideComponent) {
       setOpened(false);
@@ -182,15 +198,15 @@ var SimpleSelect = function SimpleSelect(props) {
         onSelect(selected);
       } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
         if (!opened) setOpened(true);
-        var index = dataSourceWithAllOptions.length > 0 ? dataSourceWithAllOptions.findIndex(function (d) {
+        var index = dataCombo.length > 0 ? dataCombo.findIndex(function (d) {
           return selected && d[idKey] === selected[idKey];
         }) : 0;
         if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
-          index = dataSourceWithAllOptions && index === dataSourceWithAllOptions.length - 1 ? 0 : index + 1;
+          index = dataCombo && index === dataCombo.length - 1 ? 0 : index + 1;
         } else {
-          index = dataSourceWithAllOptions && index === 0 ? (dataSourceWithAllOptions === null || dataSourceWithAllOptions === void 0 ? void 0 : dataSourceWithAllOptions.length) - 1 : index - 1;
+          index = dataCombo && index === 0 ? (dataCombo === null || dataCombo === void 0 ? void 0 : dataCombo.length) - 1 : index - 1;
         }
-        setSelected(dataSourceWithAllOptions[index]);
+        setSelected(dataCombo[index]);
       }
     }
     if (!isTyping) setIsTyping(true);
@@ -230,7 +246,7 @@ var SimpleSelect = function SimpleSelect(props) {
       if (value) {
         newCurrent = dataSourceWithAllOptions.find(function (i) {
           var _i$idKey;
-          return ((_i$idKey = i[idKey]) === null || _i$idKey === void 0 ? void 0 : _i$idKey.toString().toLowerCase()) === value.toString().toLowerCase();
+          return value && ((_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());
         });
         setValueFromProps(value);
       } else if (dataSourceWithAllOptions.length > 0 && selectFirstOnEnter) {
@@ -253,6 +269,10 @@ var SimpleSelect = function SimpleSelect(props) {
         setSelected(data);
       }
     }
+    if (allOptions) {
+      var _ref2;
+      setDataCombo([(_ref2 = {}, _defineProperty(_ref2, idKey, allOptions.idValue), _defineProperty(_ref2, descriptionKeyIsString ? descriptionKey : descriptionKey(allOptions.label), allOptions.label), _ref2)].concat(_toConsumableArray(dataSource)));
+    }
   }, [JSON.stringify(dataSourceWithAllOptions)]);
   return /*#__PURE__*/_react.default.createElement("span", {
     id: componentId,

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

@@ -18,8 +18,8 @@ interface ISimpleSelectProps {
     label?: string;
     placeHolder?: string;
     hint?: string;
+    value?: string | number | boolean | number[];
     textAlign?: TextAlign;
-    value?: number | string;
     errorMessages?: string[];
     showClearButton?: boolean;
     searchOnDropdown?: boolean;

package/lib/inputs/types.d.ts

@@ -6,6 +6,8 @@ import { IDrawerProps } from '../drawer/types.js';
 import { TextAlign } from '../@types/Align.js';
 import '../@types/Period.js';
 import '../@types/Position.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 type DescriptionKey = string | ((dataSelected: DataCombo) => string);
 interface IAdvancedFilterProps extends Omit<IDrawerProps, 'content'> {

package/lib/internals/types.d.ts

@@ -9,6 +9,7 @@ interface WithTooltipProps {
     tooltipPosition?: Exclude<Position, 'center'>;
     style?: CSSProperties;
     handlerSetOnDenied?: (onDeniedValue: OnDenied) => void;
+    errorMessage?: string;
 }
 interface GetDisplayNameParams {
     displayName?: string;

package/lib/internals/withTooltip.js

@@ -35,7 +35,8 @@ var withTooltip = function withTooltip(WrappedComponent) {
       _props$space = props.space,
       space = _props$space === void 0 ? 20 : _props$space,
       _props$tooltipPositio = props.tooltipPosition,
-      tooltipPosition = _props$tooltipPositio === void 0 ? 'bottom' : _props$tooltipPositio;
+      tooltipPosition = _props$tooltipPositio === void 0 ? 'bottom' : _props$tooltipPositio,
+      errorMessage = props.errorMessage;
     var _useState = (0, _react.useState)(tooltipPosition),
       _useState2 = _slicedToArray(_useState, 2),
       stateTooltipPosition = _useState2[0],
@@ -70,10 +71,15 @@ var withTooltip = function withTooltip(WrappedComponent) {
     };
     (0, _react.useEffect)(function () {
       if (hasTooltip(props)) {
-        document.addEventListener('mouseover', onMouseOver);
-        document.addEventListener('scroll', onAnyScroll, true);
-        if (targetElement && targetElement.current) {
-          targetElement.current.addEventListener('mouseout', onMouseOut);
+        if (errorMessage) {
+          setShowTooltip(true);
+        } else {
+          setShowTooltip(false);
+          document.addEventListener('mouseover', onMouseOver);
+          document.addEventListener('scroll', onAnyScroll, true);
+          if (targetElement && targetElement.current) {
+            targetElement.current.addEventListener('mouseout', onMouseOut);
+          }
         }
       }
       return function () {
@@ -85,7 +91,7 @@ var withTooltip = function withTooltip(WrappedComponent) {
           }
         }
       };
-    }, []);
+    }, [errorMessage]);
     (0, _react.useEffect)(function () {
       if (targetElement.current && tooltipElement.current) {
         var width = tooltipDimensions.width,
@@ -141,6 +147,7 @@ var withTooltip = function withTooltip(WrappedComponent) {
       if (tooltip) {
         return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
           text: tooltip,
+          textError: errorMessage,
           tooltipRef: tooltipElement,
           style: tooltipStyle,
           className: stateTooltipPosition,

package/lib/labelMessages/index.d.ts

@@ -1,6 +1,8 @@
 import { ILabelMessagesProps } from './types.js';
 import 'react';
 import '../@types/LabelStyles.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const LabelMessages: ({ style, icon, flat, iconName, handlerClosed, square, visible, children, customClass, type, showCloseButton }: ILabelMessagesProps) => JSX.Element | null;
 

package/lib/labelMessages/index.js

@@ -24,8 +24,7 @@ var LabelMessages = function LabelMessages(_ref) {
     icon = _ref$icon === void 0 ? null : _ref$icon,
     _ref$flat = _ref.flat,
     flat = _ref$flat === void 0 ? false : _ref$flat,
-    _ref$iconName = _ref.iconName,
-    iconName = _ref$iconName === void 0 ? '' : _ref$iconName,
+    iconName = _ref.iconName,
     handlerClosed = _ref.handlerClosed,
     _ref$square = _ref.square,
     square = _ref$square === void 0 ? true : _ref$square,
@@ -47,9 +46,9 @@ var LabelMessages = function LabelMessages(_ref) {
     return "labelmessages-component -".concat(type, " ").concat(customClass, "\n    ").concat(square && '-square', " ").concat(flat && '-flat');
   };
   var getIcon = function getIcon() {
-    if (icon !== null) {
+    if (icon) {
       return icon;
-    } else if (iconName !== null) {
+    } else if (iconName) {
       return /*#__PURE__*/_react.default.createElement(_icons.default, {
         name: iconName,
         size: 16,

package/lib/labelMessages/types.d.ts

@@ -1,10 +1,12 @@
 import { CSSProperties, ReactNode } from 'react';
 import { LabelStyles } from '../@types/LabelStyles.js';
+import { IconNames } from '../@types/Icon.js';
+import '../icons/helper.js';
 
 interface ILabelMessagesProps {
     style?: CSSProperties;
     type?: LabelStyles;
-    iconName?: string;
+    iconName?: IconNames;
     icon?: ReactNode | null;
     children?: ReactNode;
     customClass?: string;

package/lib/labels/DangerLabel.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const DangerLabel: ({ className, ...rest }: ILabelProps) => JSX.Element;
 

package/lib/labels/DefaultLabel.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const _default: {
     (props: ILabelProps): JSX.Element;

package/lib/labels/InfoLabel.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const InfoLabel: ({ className, ...rest }: ILabelProps) => JSX.Element;
 

package/lib/labels/PrimaryLabel.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const PrimaryLabel: ({ className, ...rest }: ILabelProps) => JSX.Element;
 

package/lib/labels/SuccessLabel.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const SuccessLabel: ({ className, ...rest }: ILabelProps) => JSX.Element;