linear-react-components-ui 1.1.2-beta.2 → 1.1.2-beta.20

package/lib/inputs/period/index.js

@@ -16,6 +16,7 @@ var _Dialog = _interopRequireDefault(require("./Dialog"));
 var _hint = _interopRequireDefault(require("../../hint"));
 var helperBase = _interopRequireWildcard(require("../base/helpers"));
 require("../../assets/styles/periodpicker.scss");
+var _errorMessage = require("../errorMessage");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -374,6 +375,8 @@ const PeriodPicker = props => {
     visible: !!hint,
     customClass: "hint",
     description: hint
-  }), props.errorMessages && helperBase.getErrorMessages(props.errorMessages));
+  }), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
+    messages: props.errorMessages
+  }));
 };
 var _default = exports.default = PeriodPicker;

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

@@ -1,5 +1,6 @@
 import { ISearchProps } from '../types.js';
 import 'react';
+import 'imask';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
 import '../base/types.js';

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

@@ -1,5 +1,6 @@
 import { IActionButtonsSelectProps } from '../types.js';
 import 'react';
+import 'imask';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
 import '../base/types.js';

package/lib/inputs/select/ActionButtons.js

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

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

@@ -1,5 +1,6 @@
 import { IDropdownSelectProps } from '../types.js';
 import 'react';
+import 'imask';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
 import '../base/types.js';

package/lib/inputs/select/Dropdown.js

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

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

@@ -1,6 +1,7 @@
 import { IDropdownSelectProps } from '../types.js';
 import { GetSimpleFilteredParams, GetMultipleFilteredParams } from './types.js';
 import 'react';
+import 'imask';
 import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
 import '../base/types.js';

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

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

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

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

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

@@ -24,7 +24,8 @@ const MultipleSelect = props => {
     handlerClear,
     value = [],
     remoteSearch = false,
-    descriptionKey
+    descriptionKey,
+    showClearButton
   } = props;
   const [dataCombo, setDataCombo] = (0, _react.useState)(dataSource);
   const [currents, setCurrents] = (0, _react.useState)([]);
@@ -40,6 +41,7 @@ const MultipleSelect = props => {
   const dropdownRef = (0, _react.useRef)(null);
   const selectWrapper = (0, _react.useRef)();
   const gridElRef = (0, _react.useRef)();
+  const inputTextRef = (0, _react.useRef)(null);
   const descriptionKeyIsString = typeof descriptionKey === 'string';
   const onScreenResize = () => {
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
@@ -53,12 +55,12 @@ const MultipleSelect = props => {
     }
   };
   const onMouseMove = event => {
-    const {
-      target
-    } = event;
-    if (target.className === '') return;
-    const insideComponents = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label'].includes(target.className);
-    setInsideComponent(insideComponents);
+    var _dropdownRef$current, _dropdownRef$current$;
+    const target = event.target;
+    const idDropdown = ((_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : (_dropdownRef$current$ = _dropdownRef$current.parentElement) === null || _dropdownRef$current$ === void 0 ? void 0 : _dropdownRef$current$.id) || '';
+    const dropdownElement = document.getElementById(idDropdown);
+    const keepDropdownOpen = Boolean(dropdownElement === null || dropdownElement === void 0 ? void 0 : dropdownElement.contains(target));
+    setInsideComponent(keepDropdownOpen);
   };
   const onClearClick = () => {
     setSelected(undefined);
@@ -94,6 +96,7 @@ const MultipleSelect = props => {
     setCurrents(currentsSelect);
     setDataCombo(dataSource);
     setInputValue([]);
+    if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
     setOpened(false);
     if (props.onSelect) setSelected(props.onSelect(currentsSelect.map(i => i[idKey])));
   };
@@ -101,11 +104,13 @@ const MultipleSelect = props => {
     if (currents) {
       const result = currents.filter(item => item[idKey] !== id);
       setCurrents(result);
+      if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
+      setOpened(false);
       if (props.onSelect) setSelected(props.onSelect(result.map(i => i[idKey])));
     }
   };
   const onOpenClose = () => {
-    setOpened(!opened);
+    setOpened(prevState => !prevState);
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
   const onFocus = () => {
@@ -115,11 +120,16 @@ const MultipleSelect = props => {
   };
   const onBlur = e => {
     if (props.onBlur) props.onBlur(e);
-    if (!insideComponent) setOpened(false);
+    if (!insideComponent) {
+      setOpened(false);
+      setDataCombo(dataSource);
+    }
   };
   const onInputKeyDown = e => {
     if (e.keyCode) {
       if (e.keyCode === constants.keyCodes.ENTER && selected) {
+        var _e$preventDefault;
+        (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
         if (!currents.includes(selected)) onSelect(selected);
       } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
         if (!opened) setOpened(true);
@@ -190,6 +200,17 @@ const MultipleSelect = props => {
     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: () => {
@@ -208,21 +229,19 @@ const MultipleSelect = props => {
       selectWrapper.current = r;
     },
     handlerSetOnDenied: setOnDenied,
-    rightElements: /*#__PURE__*/_react.default.createElement(_ActionButtons.default, _extends({}, props, {
+    rightElements: /*#__PURE__*/_react.default.createElement(_ActionButtons.default, {
+      showClearButton: showClearButton,
       disabled: shouldDisable() || shouldBeReadOnly(),
       dropDownOpened: opened,
-      handleClear: () => {
+      handlerClear: () => {
         if (shouldDisable()) return null;
         return onClearClick();
       },
-      handleOpenClose: () => {
-        onOpenClose();
-      }
-    }))
-  }), /*#__PURE__*/_react.default.createElement(_Selecteds.default, _extends({
-    currents: currents
-  }, props, {
-    handleOnUnselect: onUnselect
+      handlerOpenClose: onOpenClose
+    })
+  }), /*#__PURE__*/_react.default.createElement(_Selecteds.default, _extends({}, props, {
+    currents: currents,
+    handlerOnUnselect: onUnselect
   }))), opened && /*#__PURE__*/_react.default.createElement(_Dropdown.default, _extends({}, props, {
     selected: selected,
     selectFieldRef: componentRef,

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

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

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

@@ -2,7 +2,7 @@ import { TextAlign } from '../../@types/Align.js';
 import { DataCombo } from '../../@types/DataCombo.js';
 import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
-import 'react';
+import { MutableRefObject } from 'react';
 import '../../@types/Period.js';
 
 type AllOptions = {
@@ -47,6 +47,7 @@ interface ISimpleSelectProps {
     autoFocus?: boolean;
     onFocus?: () => void;
     allOptions?: AllOptions;
+    inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null> | ((ref: HTMLInputElement | HTMLTextAreaElement | null) => void);
 }
 interface ISelectFieldProps extends Omit<ISimpleSelectProps, 'idKey' | 'value' | 'descriptionKey'> {
     multiple?: boolean;
@@ -92,7 +93,7 @@ interface ISelectedsMultipleProps {
     idKey: string;
     descriptionKey: DescriptionKey;
     currents: DataCombo[];
-    handleOnUnselect: (id: string) => void;
+    handlerOnUnselect: (id: string) => void;
 }
 interface GetFilteredParams {
     dataSource: DataCombo[];

package/lib/inputs/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode, MouseEvent, MutableRefObject, CSSProperties, KeyboardEvent, ReactElement } from 'react';
+import IMask from 'imask';
 import { PermissionAttr, OnDenied } from '../@types/PermissionAttr.js';
 import { DataCombo } from '../@types/DataCombo.js';
 import { IBaseProps, CustomInputEvent } from './base/types.js';
@@ -62,7 +63,7 @@ interface IMaskHOCProps {
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null> | ((ref: HTMLInputElement | HTMLTextAreaElement | null) => void);
     placeholderChar?: string;
     lazy?: boolean;
-    definitions?: object;
+    definitions?: IMask.AllMaskedOptions['definitions'];
     groups?: object;
     pattern?: string;
     format?: () => void;
@@ -97,7 +98,7 @@ interface IMaskHOCProps {
     rounded?: boolean;
     errorMessages?: string[];
     skeletonize?: boolean;
-    mask?: string | NumberConstructor;
+    mask?: IMask.AnyMask;
     isDateField?: boolean;
     autoCompleteMask?: 'left' | 'right';
 }
@@ -133,8 +134,8 @@ interface IDropdownSelectProps {
     align?: 'left' | 'right';
 }
 interface IActionButtonsSelectProps {
-    handleClear: () => void;
-    handleOpenClose: () => void;
+    handlerClear: () => void;
+    handlerOpenClose: () => void;
     dropDownOpened: boolean;
     showClearButton?: boolean;
     disabled?: boolean;
@@ -149,5 +150,10 @@ interface IButtonsProps {
     transparent: boolean;
     disabled?: boolean;
 }
+interface ErrorProps {
+    customClass?: string;
+    style?: React.CSSProperties;
+    messages?: string | string[];
+}
 
-export type { IActionButtonsSelectProps, IAdvancedFilterProps, IButtonsProps, IDropdownProps, IDropdownSelectProps, IInputHOCProps, IMaskHOCProps, ISearchProps };
+export type { ErrorProps, IActionButtonsSelectProps, IAdvancedFilterProps, IButtonsProps, IDropdownProps, IDropdownSelectProps, IInputHOCProps, IMaskHOCProps, ISearchProps };

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

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

package/lib/table/HeaderColumn.d.ts

@@ -1,6 +1,6 @@
 import { ITableHeaderProps } from './types.js';
 import 'react';
 
-declare const HeaderColumn: ({ customClass, style, children, textAlign, visible, id, }: ITableHeaderProps) => JSX.Element | null;
+declare const HeaderColumn: ({ customClass, style, children, textAlign, visible, id, rowSpan, colSpan, }: ITableHeaderProps) => JSX.Element | null;
 
 export { HeaderColumn as default };

package/lib/table/HeaderColumn.js

@@ -17,7 +17,9 @@ const HeaderColumn = _ref => {
     children,
     textAlign,
     visible = true,
-    id
+    id,
+    rowSpan,
+    colSpan
   } = _ref;
   const {
     skeletonize,
@@ -28,6 +30,8 @@ const HeaderColumn = _ref => {
   if (!visible) return null;
   return /*#__PURE__*/_react.default.createElement("th", {
     id: id,
+    rowSpan: rowSpan,
+    colSpan: colSpan,
     className: "headercolumn ".concat(customClass, " text-align-").concat(textAlign),
     style: style
   }, skeletonize && (skeletonInHeader || !skeletonInRows) && !vertical ? /*#__PURE__*/_react.default.createElement(_skeleton.default, {

package/lib/table/types.d.ts

@@ -25,6 +25,8 @@ interface ITableHeaderProps extends TableHTMLAttributes<HTMLTableElement> {
     textAlign?: string;
     visible?: boolean;
     id?: string;
+    rowSpan?: number;
+    colSpan?: number;
 }
 interface ITableBodyProps extends TableHTMLAttributes<HTMLTableElement> {
     children?: ReactNode;

package/lib/tabs/context.js

@@ -67,7 +67,7 @@ function TabsProvider(_ref) {
     updateTabs(tabId);
     setSelectedTabId(tabId);
     if (onTabChange) {
-      onTabChange(String(tabId));
+      onTabChange(tabId);
     }
   }, [onTabChange, setSelectedTabId, updateTabs]);
   const removeTab = (0, _react.useCallback)(tabId => {

package/lib/tabs/types.d.ts

@@ -23,7 +23,7 @@ interface TabsProviderProps {
     container: RefObject<HTMLDivElement>;
     tabsWidth: number | string;
     selectedTab?: string | number | null;
-    onTabChange?: (tabId: string) => void;
+    onTabChange?: (tabId: string | number) => void;
     onTabClose?: (tabId: string) => void;
     firstTabIdent?: boolean;
 }
@@ -32,12 +32,12 @@ interface ITabsPros {
     toolbar?: ReactElement;
     toolBarRef?: (value: HTMLDivElement | null) => void;
     children?: ReactNode;
-    selectedTab?: string;
+    selectedTab?: string | number;
     tabMenuSize?: Size;
     tabMenuAlign?: Position;
     firstTabIdent?: boolean;
     tabMenuPosition?: Exclude<Position, 'center'>;
-    handlerTabClick?: (id?: string) => void;
+    handlerTabClick?: (id?: string | number) => void;
     handlerCloseTab?: (id?: string, idx?: string) => void;
     customClassForToolBar?: string;
     tabsWidth?: string | number;