linear-react-components-ui 1.1.2-beta.4 → 1.1.2-beta.6

package/lib/assets/styles/checkbox.scss

@@ -80,6 +80,14 @@
     padding-left: 22px;
   }
   
+  > .errormessages {
+    width: 100%;
+    color: red;
+    font-size: 13px!important;
+    line-height: 13px;
+    margin-top: 0px;
+  }
+
   &.-skeletonized {
     > .inputcontent {
       .input {

package/lib/assets/styles/dialog.scss

@@ -1,6 +1,9 @@
 @import "commons.scss";
 @import "colors.scss";
 @import "effects.scss";
+
+$shadow-button-default: 1px 1px 1px rgba(0, 0, 0, 0.2);
+$shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-button-default;
 .modalcontainer {
   font-family: 'Roboto', sans-serif;
   line-height: 22px;
@@ -59,23 +62,37 @@
           width: 100%;
           margin-left: 2px;
           display: flex;
+          justify-content: space-between;
           align-items: center;
-          &.modal-title {
-            color: #4e4c4c;
-            font-weight: 600;
+          .modal-title {
+            color: $font-color-default;
+            font-weight: 400;
           }
         }
         .close-button {
-          margin-left: auto;
+          all: unset;
           line-height: 0;
-          cursor: pointer;
-          > svg {
-            fill: #252424;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 28px;
+          height: 28px;
+          border: none;
+          background-color: $default-color;
+          color: $font-color-soft;
+          border-radius: 999999px;
+          cursor: pointer !important;
+          >svg {
+            fill: $font-color-soft;
             pointer-events: fill;
             transition: 0.2s fill;
-            &:hover {
-              fill: rgba(0, 0, 0, 0.164);
-            }
+          }
+          &:hover {
+            background-color: $default-hover-color;
+          }
+          &:focus {
+            -webkit-box-shadow: $shadow-button-inset-default;
+            box-shadow: $shadow-button-inset-default;
           }
         }
       }

package/lib/assets/styles/multiSelect.scss

@@ -23,6 +23,10 @@
         top: 50%;
         left: 10px;
         transform: translateY(-50%);
+
+        button {
+          all: unset;
+        }
       }
     }
 
@@ -95,6 +99,7 @@
     }
 
     .menubutton {
+      all: unset;
       background-color: transparent;
       border: 0;
       padding: 0;
@@ -117,4 +122,4 @@
       }
     }
   }
-}
+}

package/lib/assets/styles/select.scss

@@ -10,14 +10,15 @@
     height: auto;
   }
 
-  .selectwrapper .actionbutton {
-    cursor: pointer;
+  .selectwrapper .actionbuttonsselect {
     display: flex;
-    align-items: center;
-    height: 100%;
+    flex-direction: row;
 
-    >.iconclear {
-      margin: 8px -3px 2px 3px;
+    .actionbutton {
+      all: unset;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
     }
   }
 
@@ -42,6 +43,10 @@
       float: left;
       margin: 2px;
       padding: 0px 8px 0px 5px;
+
+      .close {
+        all: unset;
+      }
     }
   }
 
@@ -118,6 +123,7 @@
     }
 
     .menubutton {
+      all: unset;
       background-color: transparent;
       border: 0;
       padding: 0;
@@ -145,4 +151,4 @@
     font-style: italic;
     font-size: 13px;
   }
-}
+}

package/lib/assets/styles/tabs.scss

@@ -123,6 +123,9 @@ $dropdown-width: 38px;
         float: none;
       }
     }
+    .toolbar-component {
+      width: auto;
+    }
   }
 
   >.panel {

package/lib/checkbox/index.d.ts

@@ -1,5 +1,5 @@
-import React__default from 'react';
 import { ICheckBoxProps } from './types.js';
+import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 
@@ -8,6 +8,6 @@ import '../@types/Position.js';
  * o componente Field dentro do componente Form, pois o mesmo leva em consideração o tipo do
  * componente para gerar propriedades customizadas.
  */
-declare const CheckBox: React__default.ForwardRefExoticComponent<ICheckBoxProps & React__default.RefAttributes<HTMLInputElement>>;
+declare const CheckBox: ({ name, required, value, label, onChange, autofocus, hint, id, gridLayout, checked, disabled, permissionAttr, tooltip, tooltipPosition, tooltipWidth, skeletonize, targetRef, errorMessages, }: ICheckBoxProps) => JSX.Element | null;
 
 export { CheckBox as default };

package/lib/checkbox/index.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _gridlayout = _interopRequireDefault(require("../gridlayout"));
 var _Label = _interopRequireDefault(require("./Label"));
-require("../assets/styles/checkbox.scss");
-var _permissionValidations = require("../permissionValidations");
 var _hint = _interopRequireDefault(require("../hint"));
+var _gridlayout = _interopRequireDefault(require("../gridlayout"));
+var helpers = _interopRequireWildcard(require("../inputs/base/helpers"));
+var _permissionValidations = require("../permissionValidations");
+require("../assets/styles/checkbox.scss");
 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; }
@@ -20,7 +21,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  * componente para gerar propriedades customizadas.
  */
 
-const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const CheckBox = _ref => {
   let {
     name,
     required,
@@ -29,7 +30,7 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onChange,
     autofocus,
     hint,
-    id = undefined,
+    id = '',
     gridLayout,
     checked = false,
     disabled,
@@ -38,13 +39,13 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     tooltipPosition = 'top',
     tooltipWidth = 'auto',
     skeletonize,
-    targetRef
+    targetRef,
+    errorMessages
   } = _ref;
   const [isChecked, setIsChecked] = (0, _react.useState)(checked);
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
   const [onDenied] = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr));
   const inputRef = (0, _react.useRef)(null);
-  (0, _react.useImperativeHandle)(ref, () => inputRef.current, [inputRef.current]);
   (0, _react.useEffect)(() => {
     setIsChecked(checked);
   }, [checked]);
@@ -76,7 +77,8 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onClick: !shouldDisable() && !skeletonize ? () => setIsChecked(!isChecked) : undefined,
     tabIndex: -1,
     role: "checkbox",
-    "aria-checked": "false"
+    "aria-checked": "false",
+    onKeyPress: undefined
   }, /*#__PURE__*/_react.default.createElement("input", {
     ref: r => {
       if (targetRef) targetRef(r);
@@ -101,12 +103,11 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     visible: !!hint,
     description: hint,
     customClass: "hint"
-  }));
+  }), errorMessages && helpers.getErrorMessages(errorMessages));
   if (onDenied.unvisible) return null;
   return gridLayout ? /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
     customClass: "-withinput",
     cols: gridLayout
   }, renderInput()) : renderInput();
-});
-CheckBox.displayName = 'CheckBox';
+};
 var _default = exports.default = CheckBox;

package/lib/checkbox/types.d.ts

@@ -4,7 +4,7 @@ import { Position } from '../@types/Position.js';
 
 type ChangeEvent = {
     checked: boolean;
-    id?: string;
+    id: string;
     name?: string;
     value: boolean;
 };
@@ -37,6 +37,7 @@ interface ICheckBoxProps {
     skeletonize?: boolean;
     targetRef?: (ref: HTMLInputElement | null) => void;
     targetSpanRef?: (ref: HTMLSpanElement | null) => void;
+    errorMessages?: string[] | undefined;
 }
 
 export type { ChangeEvent, ICheckBoxProps };

package/lib/dialog/Custom.js

@@ -5,13 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var uuid = _interopRequireWildcard(require("uuid"));
+var _uuid = _interopRequireDefault(require("uuid"));
 var _base = _interopRequireDefault(require("./base"));
 var _Footer = _interopRequireDefault(require("./base/Footer"));
 var _icons = _interopRequireDefault(require("../icons"));
 var _buttons = require("../buttons");
-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 _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); }
 const getIcon = (iconName, icon) => {
@@ -48,7 +46,7 @@ const Custom = props => {
   }, props.text)), props.buttons && props.buttons.length > 0 && /*#__PURE__*/_react.default.createElement(_Footer.default, props, /*#__PURE__*/_react.default.createElement(_buttons.ButtonContainer, {
     position: "right"
   }, props.buttons.map(button => /*#__PURE__*/_react.default.cloneElement(button, {
-    key: "button-".concat(uuid.v1())
+    key: "button-".concat(_uuid.default.v1())
   })))));
 };
 var _default = exports.default = Custom;

package/lib/dialog/base/Content.js

@@ -13,6 +13,7 @@ const Content = _ref => {
     styleForContent
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
+    id: "modal-dialog-content",
     className: "dialog-content",
     style: styleForContent
   }, children);

package/lib/dialog/base/Header.js

@@ -11,11 +11,11 @@ var _base = require("../base");
 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; }
-const getCloseButton = handleClose => /*#__PURE__*/_react.default.createElement("span", {
+const getCloseButton = handleClose => /*#__PURE__*/_react.default.createElement("button", {
+  id: "botao-fechar-modal-cabecalho",
   className: "close-button",
-  onClick: handleClose,
-  role: "button",
-  tabIndex: 0
+  tabIndex: 0,
+  onClick: handleClose
 }, /*#__PURE__*/_react.default.createElement(_icons.default, {
   name: "cancel2"
 }));

package/lib/dialog/base/index.js

@@ -103,10 +103,10 @@ const BaseDialog = props => {
   };
   const createdModal = /*#__PURE__*/_react.default.createElement("div", {
     className: "modalcontainer",
+    onMouseDown: handleClickOutside,
     style: {
       zIndex: 99999 + Number(zIndex)
-    },
-    onMouseDown: handleClickOutside
+    }
   }, overlay && /*#__PURE__*/_react.default.createElement("div", {
     className: "modal-overlay",
     "data-testid": "modal-overlay"
@@ -120,8 +120,33 @@ const BaseDialog = props => {
     ref: wrapperEl
   }, children)));
   (0, _react.useEffect)(() => {
-    if (open && closeOnEsc) {
-      document.addEventListener('keydown', handleCloseOnEsc);
+    if (open) {
+      var _wrapperEl$current;
+      if (closeOnEsc) {
+        document.addEventListener('keydown', handleCloseOnEsc);
+      }
+      const modalContent = (_wrapperEl$current = wrapperEl.current) === null || _wrapperEl$current === void 0 ? void 0 : _wrapperEl$current.querySelector('#modal-dialog-content');
+      const modalElementsForTrapFocus = (modalContent === null || modalContent === void 0 ? void 0 : modalContent.querySelectorAll('[href], select, textarea, button, input:not([disabled]), [tabindex]:not([tabindex="-1"])')) || [];
+      if (wrapperEl && wrapperEl.current && modalElementsForTrapFocus.length) {
+        const firstElementInModal = modalElementsForTrapFocus[0];
+        let lastElementInModal = modalElementsForTrapFocus[modalElementsForTrapFocus.length - 1];
+        const handleTabKeyPress = event => {
+          if (event.key === 'Tab') {
+            if (event.shiftKey && document.activeElement === firstElementInModal) {
+              event.preventDefault();
+              lastElementInModal.focus();
+            } else if (!event.shiftKey && document.activeElement === lastElementInModal) {
+              event.preventDefault();
+              firstElementInModal.focus();
+            }
+          }
+        };
+        wrapperEl.current.addEventListener('keydown', handleTabKeyPress);
+        return () => {
+          var _wrapperEl$current2;
+          (_wrapperEl$current2 = wrapperEl.current) === null || _wrapperEl$current2 === void 0 ? void 0 : _wrapperEl$current2.removeEventListener('keydown', handleTabKeyPress);
+        };
+      }
     }
     return () => {
       document.removeEventListener('keydown', handleCloseOnEsc);

package/lib/dialog/form/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.FormDialogContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var uuid = _interopRequireWildcard(require("uuid"));
+var _uuid = _interopRequireDefault(require("uuid"));
 var _base = _interopRequireDefault(require("../base"));
 var _Header = _interopRequireDefault(require("../base/Header"));
 var _index = require("../../buttons/index");
@@ -71,12 +71,12 @@ const ModalForm = props => {
   }), props.buttons.map(button => {
     if (context && context.securityBeforeUnload && button && button.type && button.type.name === 'CancelButton') {
       return /*#__PURE__*/_react.default.cloneElement(button, {
-        key: "button-".concat(uuid.v1()),
+        key: "button-".concat(_uuid.default.v1()),
         onClick: props.handlerClose
       });
     }
     return /*#__PURE__*/_react.default.cloneElement(button, {
-      key: "button-".concat(uuid.v1())
+      key: "button-".concat(_uuid.default.v1())
     });
   })))));
 };

package/lib/drawer/Drawer.js

@@ -82,8 +82,9 @@ const BaseDrawer = _ref => {
     body.appendChild(drawerOverlay);
   };
   const closeDrawerOnEsc = e => {
-    if (closeOnEsc && (e.keyCode === 27 || e.key === 'ESC')) {
+    if (closeOnEsc && e.key === 'ESC') {
       handlerClose === null || handlerClose === void 0 ? void 0 : handlerClose();
+      e.stopPropagation();
     }
   };
   (0, _react.useEffect)(() => {
@@ -98,7 +99,7 @@ const BaseDrawer = _ref => {
     if (overlay && !targetId && body) setDrawerOverlay(body);
     return () => {
       const drawerOverlay = document.getElementsByClassName('drawer-overlay')[0];
-      if (closeOnEsc) document.body.removeEventListener('keyup', closeDrawerOnEsc);
+      if (closeOnEsc) document.body.removeEventListener('keydown', closeDrawerOnEsc);
       if (targetId) {
         const drawerComponentTarget = document.getElementById(targetId);
         if (drawerComponentTarget && drawerComponentEl.current) {
@@ -110,9 +111,9 @@ const BaseDrawer = _ref => {
   }, []);
   (0, _react.useEffect)(() => {
     if (closeOnEsc) {
-      document.body.addEventListener('keyup', closeDrawerOnEsc);
+      document.body.addEventListener('keydown', closeDrawerOnEsc);
     }
-    return () => document.body.removeEventListener('keyup', closeDrawerOnEsc);
+    return () => document.body.removeEventListener('keydown', closeDrawerOnEsc);
   }, [closeOnEsc]);
   const contextValues = {
     handlerClose,

package/lib/dropdown/Popup.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IPopUpProps } from './types.js';
 
-declare const DropdownPopup: ({ customClassForDropdown, align, isFloatMenu, topPosition, leftPosition, rightPosition, minWidth, ...props }: IPopUpProps) => React.ReactPortal;
+declare const DropdownPopup: ({ id, customClassForDropdown, align, isFloatMenu, topPosition, leftPosition, rightPosition, minWidth, ...props }: IPopUpProps) => React.ReactPortal;
 
 export { DropdownPopup as default };

package/lib/dropdown/Popup.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
-const _excluded = ["customClassForDropdown", "align", "isFloatMenu", "topPosition", "leftPosition", "rightPosition", "minWidth"];
+var _uuid = require("uuid");
+const _excluded = ["id", "customClassForDropdown", "align", "isFloatMenu", "topPosition", "leftPosition", "rightPosition", "minWidth"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -30,6 +31,7 @@ const getCalendarDropdownStyle = _ref => {
 const body = document.getElementsByTagName('body')[0];
 const DropdownPopup = _ref2 => {
   let {
+      id,
       customClassForDropdown = '',
       align = 'left',
       isFloatMenu = false,
@@ -53,10 +55,11 @@ const DropdownPopup = _ref2 => {
   if (popup && popup.current) {
     const modalContainers = document.body.getElementsByClassName('modalcontainer');
     const lastModalContainer = modalContainers[modalContainers.length - 1];
-    popup.current.style.zIndex = "".concat(modalContainers.length ? lastModalContainer.style.zIndex : 99999);
+    popup.current.style.zIndex = "".concat(modalContainers.length ? Number(lastModalContainer.style.zIndex) + 1 : 99999);
   }
   (0, _react.useEffect)(() => {
     body.appendChild(popup.current);
+    popup.current.id = id || "dropdown-component-".concat((0, _uuid.v1)());
     return () => {
       body.removeChild(popup.current);
     };

package/lib/dropdown/types.d.ts

@@ -22,6 +22,7 @@ interface WithDropdownContextProps {
     handleDropdownClose: () => void;
 }
 interface IPopUpProps {
+    id?: string;
     children?: ReactNode;
     customClassForDropdown?: string;
     align: 'left' | 'right';

package/lib/inputs/base/InputTextBase.js

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

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

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

package/lib/inputs/multiSelect/ActionButtons.js

@@ -20,22 +20,24 @@ const ActionButtons = _ref => {
     dropdownAlignButton = 'left'
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    transparent: true,
+    tabIndex: -1,
     disabled: disabled,
+    boxShadow: false,
     size: "small",
-    iconName: dropdownOpened ? 'up' : 'down',
     onClick: handleOpenClose,
     customClass: "actionbutton",
-    transparent: true,
-    boxShadow: false
+    iconName: dropdownOpened ? 'up' : 'down'
   }), /*#__PURE__*/_react.default.createElement(_buttons.default, {
-    disabled: disabled,
-    iconName: "more1",
+    dropdown: true,
     transparent: true,
+    disabled: disabled,
+    tabIndex: -1,
     boxShadow: false,
+    showIconDropdown: false,
+    iconName: "more1",
     customClass: "actionbutton",
-    dropdown: true,
-    dropdownAlign: dropdownAlignButton,
-    showIconDropdown: false
+    dropdownAlign: dropdownAlignButton
   }, /*#__PURE__*/_react.default.createElement(_list.default, null, /*#__PURE__*/_react.default.createElement(_list.ListItem, {
     itemId: "1",
     text: "Marcar Todos",

package/lib/inputs/multiSelect/Dropdown.js

@@ -94,11 +94,9 @@ const Dropdown = props => {
     className: "listcontainer"
   }, dataCombo && dataCombo.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: "item selectall"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    role: "button",
+  }, /*#__PURE__*/_react.default.createElement("button", {
     className: "menubutton",
     tabIndex: -1,
-    onKeyPress: () => {},
     onClick: () => isAllChecked ? onUncheckAll(true) : onCheckAll(true)
   }, /*#__PURE__*/_react.default.createElement(_icons.default, {
     name: isAllChecked && dataCombo.length > 0 ? 'checkboxChecked2' : 'checkboxUnchecked2',
@@ -110,11 +108,9 @@ const Dropdown = props => {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "dropdowmItem ".concat(item[idKey], "}"),
       className: "item ".concat(isChecked && '-selected')
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      role: "button",
+    }, /*#__PURE__*/_react.default.createElement("button", {
       className: "menubutton",
       tabIndex: -1,
-      onKeyPress: () => {},
       onClick: () => {
         onSelect(item);
       }

package/lib/inputs/multiSelect/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _lodash = _interopRequireDefault(require("lodash"));
 var _react = _interopRequireWildcard(require("react"));
-var uuid = _interopRequireWildcard(require("uuid"));
+var _uuid = _interopRequireDefault(require("uuid"));
 var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
 var _ActionButtons = _interopRequireDefault(require("./ActionButtons"));
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
@@ -33,7 +33,7 @@ const MultiSelectField = props => {
     gridLayout,
     dropdownAlignButton = 'left'
   } = props;
-  const componentId = "multiSelect-component".concat(uuid.v1());
+  const componentId = "multiSelect-component".concat(_uuid.default.v1());
   const [dataCombo, setDataCombo] = (0, _react.useState)(dataSource);
   const [selecteds, setSelecteds] = (0, _react.useState)();
   const [inputValue, setInputValue] = (0, _react.useState)('');

package/lib/inputs/select/ActionButtons.js

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

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/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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
-var uuid = _interopRequireWildcard(require("uuid"));
+var _uuid = _interopRequireDefault(require("uuid"));
 var _Dropdown = _interopRequireDefault(require("../Dropdown"));
 var _ActionButtons = _interopRequireDefault(require("../ActionButtons"));
 var _Selecteds = _interopRequireDefault(require("./Selecteds"));
@@ -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)([]);
@@ -35,11 +36,12 @@ const MultipleSelect = props => {
   const [insideComponent, setInsideComponent] = (0, _react.useState)(false);
   const [onDenied, setOnDeniedSelect] = (0, _react.useState)();
   const [valueFromProps, setValueFromProps] = (0, _react.useState)([]);
-  const componentId = "select-component".concat(uuid.v1());
+  const componentId = "select-component".concat(_uuid.default.v1());
   const componentRef = (0, _react.useRef)(null);
   const dropdownRef = (0, _react.useRef)(null);
   const selectWrapper = (0, _react.useRef)();
   const gridElRef = (0, _react.useRef)();
+  const inputTextRef = (0, _react.useRef)(null);
   const descriptionKeyIsString = typeof descriptionKey === 'string';
   const onScreenResize = () => {
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
@@ -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,7 +120,10 @@ 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) {
@@ -190,6 +198,8 @@ const MultipleSelect = props => {
     ref: componentRef,
     className: "select-component"
   }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+    inputRef: inputTextRef,
+    autoComplete: "off",
     value: inputValue.toString(),
     readOnly: shouldBeReadOnly(),
     onFocus: () => {
@@ -208,21 +218,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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var uuid = _interopRequireWildcard(require("uuid"));
+var _uuid = _interopRequireDefault(require("uuid"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _Dropdown = _interopRequireDefault(require("../Dropdown"));
 var _ActionButtons = _interopRequireDefault(require("../ActionButtons"));
@@ -19,7 +19,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const SimpleSelect = props => {
   const {
     value,
-    descriptionKey = '',
+    descriptionKey,
     dataSource = [],
     gridLayout,
     onSearch,
@@ -32,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.default.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: {
@@ -104,7 +104,6 @@ const SimpleSelect = props => {
     }
     setOpened(true);
     setInputText(valueFilter);
-    setSelected(selectedFilter);
     if (selectedFilter) {
       if (descriptionKeyIsString && valueFilter === selectedFilter[descriptionKey] || !descriptionKeyIsString && valueFilter === descriptionKey(selectedFilter)) {
         onChange(selectedFilter);
@@ -112,18 +111,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 +136,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 +167,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 +245,8 @@ const SimpleSelect = props => {
     ref: componentRef,
     className: "select-component"
   }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+    inputRef: inputTextRef,
+    autoComplete: "off",
     readOnly: undigitable || shouldBeReadOnly(),
     value: inputText,
     onFocus: onFocus,
@@ -242,18 +261,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 +286,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

@@ -92,7 +92,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

@@ -133,8 +133,8 @@ interface IDropdownSelectProps {
     align?: 'left' | 'right';
 }
 interface IActionButtonsSelectProps {
-    handleClear: () => void;
-    handleOpenClose: () => void;
+    handlerClear: () => void;
+    handlerOpenClose: () => void;
     dropDownOpened: boolean;
     showClearButton?: boolean;
     disabled?: boolean;

package/lib/menus/sidenav/index.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "NavSubMenuItem", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var uuid = _interopRequireWildcard(require("uuid"));
+var _uuid = _interopRequireDefault(require("uuid"));
 var _NavMenuItem = _interopRequireDefault(require("./NavMenuItem"));
 var _NavSubMenuItem = _interopRequireDefault(require("./NavSubMenuItem"));
 var _NavMenuGroup = _interopRequireDefault(require("./NavMenuGroup"));
@@ -82,7 +82,7 @@ const SideNav = props => {
     } = child;
     if ((type === _NavMenuItem.default || type === _NavSubMenuItem.default) && !child.props.children) {
       setMenuItemsContent(prevState => [...prevState, {
-        id: "".concat(child.props.title, "-").concat(uuid.v1()),
+        id: "".concat(child.props.title, "-").concat(_uuid.default.v1()),
         content: child.props.title,
         url: child.props.url
       }]);
@@ -127,7 +127,7 @@ const SideNav = props => {
   }, [expanded]);
   const returnMenuItems = () => menuItemsContent.filter(item => item.content !== '');
   const getPopupMenuSearch = () => /*#__PURE__*/_react.default.createElement(_NavMenuGroup.default, {
-    key: "popup-menusearch-".concat(uuid.v1())
+    key: "popup-menusearch-".concat(_uuid.default.v1())
   }, /*#__PURE__*/_react.default.createElement(_NavMenuItem.default, {
     childrenIsSubMenu: false,
     customClass: "-customsidenavitem",

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

@@ -34,15 +34,16 @@ const PopupMenuSearch = props => {
   const closeOnEsc = e => {
     if (e.keyCode === 27 || e.key === 'ESC') {
       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;

package/lib/tooltip/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
-var uuid = _interopRequireWildcard(require("uuid"));
+var _uuid = _interopRequireDefault(require("uuid"));
 require("../assets/styles/tooltip.scss");
 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); }
@@ -23,7 +23,7 @@ const Tooltip = _ref => {
   } = _ref;
   const tooltipComponent = (0, _react.useRef)(document.createElement('div'));
   (0, _react.useEffect)(() => {
-    tooltipComponent.current.id = "tooltip-".concat(uuid.v1());
+    tooltipComponent.current.id = "tooltip-".concat(_uuid.default.v1());
     tooltipComponent.current.className = "tooltip-component ".concat(className, " ");
     tooltipComponent.current.dataset.testid = 'tooltip-component';
     tooltipComponent.current.style.cssText = style;

package/lib/treeview/Node.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var uuid = _interopRequireWildcard(require("uuid"));
+var _uuid = _interopRequireDefault(require("uuid"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _checkbox = _interopRequireDefault(require("../checkbox"));
 var _icons = _interopRequireDefault(require("../icons"));
@@ -166,7 +166,7 @@ const TreeNode = props => {
       } : {};
       return /*#__PURE__*/_react.default.createElement("div", {
         style: style,
-        key: "element-".concat(uuid.v1()),
+        key: "element-".concat(_uuid.default.v1()),
         className: "element"
       }, element);
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "1.1.2-beta.4",
+  "version": "1.1.2-beta.6",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "module": "lib/index.cjs",
@@ -54,7 +54,7 @@
     "react-router-dom": "6.21.3",
     "react-syntax-highlighter": "15.5.0",
     "semver": "7.5.4",
-    "uuid": "9.0.1"
+    "uuid": "3.3.3"
   },
   "devDependencies": {
     "@babel/cli": "7.23.9",