linear-react-components-ui 1.0.17-beta.5 → 1.0.18-beta.0

package/.vscode/settings.json

@@ -9,7 +9,7 @@
     // ".gitignore": true,
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": true 
   },
   "cSpell.words": [
     "licenca"

package/lib/assets/styles/file.scss

@@ -164,6 +164,14 @@
 }
 
 .input-simple-file-container {
+  .file-content {
+    flex: 1;
+  }
+
+  .file-wrapper {
+    align-items: center;
+  }
+
   .-disabledVisualApply {
     background: #fff5e5 !important;
     > .size-position-icon {
@@ -221,4 +229,4 @@
   box-shadow: none;
   border-color: transparent !important;
   transition: none;
-}
+}

package/lib/dialog/form/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.FormDialogContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _uuid = _interopRequireDefault(require("uuid"));
 var _base = _interopRequireDefault(require("../base"));
 var _Header = _interopRequireDefault(require("../base/Header"));
 var _index = require("../../buttons/index");
@@ -67,16 +68,19 @@ var ModalForm = function ModalForm(props) {
     handlerClose: props.handlerClose
   }, props))), /*#__PURE__*/_react.default.createElement(_Content.default, {
     styleForContent: _objectSpread(_objectSpread({}, props.styleForContent), overlayStyle)
-  }, content || children), getSpinner(), showFooter && props.buttons && /*#__PURE__*/_react.default.createElement(_Footer.default, null, /*#__PURE__*/_react.default.createElement(_index.ButtonContainer, _extends({}, props, {
+  }, content || children), getSpinner(), showFooter && props.buttons && props.buttons.length > 0 && /*#__PURE__*/_react.default.createElement(_Footer.default, null, /*#__PURE__*/_react.default.createElement(_index.ButtonContainer, _extends({}, props, {
     style: _objectSpread({}, overlayStyle)
-  }), _react.default.Children.toArray(props.buttons.map(function (button) {
+  }), props.buttons.map(function (button) {
     if (context && context.securityBeforeUnload && button && button.type && button.type.name === 'CancelButton') {
       return /*#__PURE__*/_react.default.cloneElement(button, {
+        key: "button-".concat(_uuid.default.v1()),
         onClick: props.handlerClose
       });
     }
-    return /*#__PURE__*/_react.default.cloneElement(button);
-  }))))));
+    return /*#__PURE__*/_react.default.cloneElement(button, {
+      key: "button-".concat(_uuid.default.v1())
+    });
+  })))));
 };
 var _default = (0, _withFormSecurity.default)(ModalForm);
 exports.default = _default;

package/lib/form/FieldNumber.js

@@ -30,11 +30,9 @@ var getEventProps = function getEventProps(_ref) {
     validators = _ref.validators,
     _onBlur = _ref.onBlur,
     _onKeyDown = _ref.onKeyDown,
-    _onChange = _ref.onChange,
     handlerFieldValidade = _ref.handlerFieldValidade,
     handlerFieldChange = _ref.handlerFieldChange,
-    handleShowValidateMessages = _ref.handleShowValidateMessages,
-    component = _ref.component;
+    handleShowValidateMessages = _ref.handleShowValidateMessages;
   return {
     onBlur: function onBlur(e) {
       if (handlerFieldChange) handlerFieldChange(e);
@@ -44,20 +42,11 @@ var getEventProps = function getEventProps(_ref) {
     },
     onKeyDown: function onKeyDown(e) {
       if ([constants.keyCodes.ENTER].includes(e.keyCode)) {
+        handlerFieldChange === null || handlerFieldChange === void 0 ? void 0 : handlerFieldChange(e);
         if (validators) handlerFieldValidade === null || handlerFieldValidade === void 0 ? void 0 : handlerFieldValidade(name, e.target.value, validators);
         if (_onKeyDown) _onKeyDown(e);
         handleShowValidateMessages(true);
       }
-    },
-    onChange: function onChange(e) {
-      if ((component === null || component === void 0 ? void 0 : component.name) === 'NumberField') {
-        if (validators && e.target && handlerFieldValidade) {
-          handlerFieldValidade(name, e.target.value, validators);
-          handleShowValidateMessages(true);
-        }
-        if (handlerFieldChange) handlerFieldChange(e);
-        if (_onChange) _onChange(e);
-      }
     }
   };
 };

package/lib/form/types.d.ts

@@ -82,7 +82,6 @@ interface IFieldProps extends WithFieldProps {
     autoFocus?: boolean;
     autoCompleteMask?: 'left' | 'right';
     mask?: string;
-    removeZeroLeft?: boolean;
 }
 interface CustomEvent {
     target: {
@@ -199,7 +198,6 @@ interface IEventParams {
     handlerFieldChange?: (event: ChangeEvent<HTMLInputElement> | CustomKeyboardEvent) => void;
     validatorFromComponent?: Validator | Validator[];
     handleShowValidateMessages: (value: boolean) => void;
-    component?: ComponentType<any>;
 }
 interface IGetErrorMessagesParams {
     name: string;

package/lib/inputs/base/InputTextBase.js

@@ -71,7 +71,6 @@ var InputTextBase = function InputTextBase(props) {
     _onDragOver = props.onDragOver,
     _onDrop = props.onDrop,
     _onDragLeave = props.onDragLeave,
-    _onClick = props.onClick,
     readOnlyClass = props.readOnlyClass;
   var propsInput;
   var options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
@@ -149,9 +148,6 @@ var InputTextBase = function InputTextBase(props) {
         },
         onDragLeave: function onDragLeave(e) {
           if (_onDragLeave) _onDragLeave(e);
-        },
-        onClick: function onClick(e) {
-          if (_onClick) _onClick(e);
         }
       });
     }

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

@@ -1,4 +1,4 @@
-import { MouseEvent, KeyboardEvent, DragEvent, MutableRefObject, RefObject, CSSProperties } from 'react';
+import { KeyboardEvent, DragEvent, MutableRefObject, RefObject, CSSProperties } from 'react';
 import { TextAlign } from '../../@types/Align.js';
 import { Period } from '../../@types/Period.js';
 import { PermissionAttr, OnDenied } from '../../@types/PermissionAttr.js';
@@ -33,7 +33,6 @@ interface IBaseProps {
     maxLength?: number;
     name?: string;
     required?: boolean;
-    onClick?: (event: MouseEvent) => void;
     onBlur?: (e: CustomInputEvent) => void;
     onFocus?: (e: CustomInputEvent) => void;
     onReset?: (e: CustomInputEvent) => void;
@@ -49,7 +48,7 @@ interface IBaseProps {
     onDragLeave?: (e: DragEvent) => void;
     leftElements?: JSX.Element | JSX.Element[];
     rightElements?: JSX.Element | JSX.Element[];
-    children?: JSX.Element | JSX.Element[];
+    children?: React.ReactNode;
     customClass?: string;
     customClassForWrapper?: string;
     customClassForInputContent?: string;

package/lib/inputs/file/DefaultFile.js

@@ -37,7 +37,8 @@ var DefaultFile = function DefaultFile(props) {
     hint = _props$hint === void 0 ? [] : _props$hint,
     _props$errorMessages = props.errorMessages,
     errorMessages = _props$errorMessages === void 0 ? [] : _props$errorMessages,
-    onChange = props.onChange;
+    onChange = props.onChange,
+    multiple = props.multiple;
   var getFilesList = function getFilesList(files) {
     return !(files !== null && files !== void 0 && files.length) ? [] : _lodash.default.map(files, function (file) {
       return file;
@@ -48,36 +49,6 @@ var DefaultFile = function DefaultFile(props) {
     fileList = _useState2[0],
     setFileList = _useState2[1];
   var ifExistFiles = fileList instanceof Array && fileList.length > 0;
-  var popUpDescription = function popUpDescription() {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "size-position-icon ".concat(!ifExistFiles ? '-disabled-popover' : '')
-    }, /*#__PURE__*/_react.default.createElement(_popover.default, {
-      iconSize: 16
-    }, /*#__PURE__*/_react.default.createElement(_popover.PopoverText, null, /*#__PURE__*/_react.default.createElement("strong", null, "Arquivos"), /*#__PURE__*/_react.default.createElement("br", null), ifExistFiles && fileList.map(function (file) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "list-simple-file",
-        key: "".concat(file.name).concat(file.size)
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "file-name"
-      }, /*#__PURE__*/_react.default.createElement("span", null, file.name)));
-    }))));
-  };
-  var buttonRemoveFile = function buttonRemoveFile() {
-    return /*#__PURE__*/_react.default.createElement(_buttons.default, {
-      disabled: !ifExistFiles,
-      className: "-pointerEventsRemove",
-      transparent: true,
-      boxShadow: false,
-      onClick: function onClick() {
-        onBtnClickRemove();
-        setFileList([]);
-      },
-      icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
-        customClass: "colorIconUpload",
-        name: "close"
-      })
-    });
-  };
   var handleChange = function handleChange(e) {
     var _e$preventDefault;
     (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
@@ -90,7 +61,8 @@ var DefaultFile = function DefaultFile(props) {
   }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
     hint: hint,
     readOnlyClass: "-disabledVisualApply",
-    customClassForInputContent: "-absolute -pointEventDisabled -disabledVisualApply",
+    customClassForWrapper: "file-wrapper",
+    customClassForInputContent: "file-content -absolute -pointEventDisabled -disabledVisualApply",
     type: "file",
     id: id,
     accept: accept,
@@ -102,7 +74,31 @@ var DefaultFile = function DefaultFile(props) {
         return _onBtnClickInsert();
       }
     })
-  }), popUpDescription(), buttonRemoveFile()), errorMessages && helperBase.getErrorMessages(errorMessages));
+  }), multiple && /*#__PURE__*/_react.default.createElement("div", {
+    className: "size-position-icon ".concat(!ifExistFiles ? '-disabled-popover' : '')
+  }, /*#__PURE__*/_react.default.createElement(_popover.default, {
+    iconSize: 16
+  }, /*#__PURE__*/_react.default.createElement(_popover.PopoverText, null, /*#__PURE__*/_react.default.createElement("strong", null, "Arquivos"), /*#__PURE__*/_react.default.createElement("br", null), ifExistFiles && fileList.map(function (file) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "list-simple-file",
+      key: "".concat(file.name).concat(file.size)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "file-name"
+    }, /*#__PURE__*/_react.default.createElement("span", null, file.name)));
+  })))), /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    disabled: !ifExistFiles,
+    className: "-pointerEventsRemove",
+    transparent: true,
+    boxShadow: false,
+    onClick: function onClick() {
+      onBtnClickRemove();
+      setFileList([]);
+    },
+    icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
+      customClass: "colorIconUpload",
+      name: "close"
+    })
+  })), errorMessages && helperBase.getErrorMessages(errorMessages));
 };
 var _default = DefaultFile;
 exports.default = _default;

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

@@ -1,9 +1,9 @@
 import { IBaseNumberProps } from './types.js';
+import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../@types/PermissionAttr.js';
 import '../types.js';
 import '../../@types/DataCombo.js';
 import '../../drawer/types.js';

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

@@ -1,9 +1,9 @@
 import { ICurrencyProps } from './types.js';
+import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../@types/PermissionAttr.js';
 import '../types.js';
 import '../../@types/DataCombo.js';
 import '../../drawer/types.js';

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

@@ -1,9 +1,9 @@
 import { IBaseNumberProps } from './types.js';
+import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../@types/PermissionAttr.js';
 import '../types.js';
 import '../../@types/DataCombo.js';
 import '../../drawer/types.js';

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

@@ -1,11 +1,11 @@
 export { default as CurrencyField } from './Currency.js';
 export { default as DecimalField } from './Decimal.js';
 import { INumberFieldProps } from './types.js';
+import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../@types/PermissionAttr.js';
 import '../types.js';
 import '../../@types/DataCombo.js';
 import '../../drawer/types.js';

package/lib/inputs/number/index.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,58 +16,27 @@ Object.defineProperty(exports, "DecimalField", {
   }
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
+var _BaseMask = _interopRequireDefault(require("../mask/BaseMask"));
 var _Currency = _interopRequireDefault(require("./Currency"));
 var _Decimal = _interopRequireDefault(require("./Decimal"));
 require("../../assets/styles/numbers.scss");
-var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
+var _format_number = require("./format_number");
 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 _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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-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 NumberField = function NumberField(props) {
   var _props$textAlign = props.textAlign,
     textAlign = _props$textAlign === void 0 ? 'left' : _props$textAlign,
-    min = props.min,
-    max = props.max,
     _props$value = props.value,
-    value = _props$value === void 0 ? '' : _props$value,
-    _props$removeZeroLeft = props.removeZeroLeft,
-    removeZeroLeft = _props$removeZeroLeft === void 0 ? true : _props$removeZeroLeft;
-  var _useState = (0, _react.useState)(value === null || value === void 0 ? void 0 : value.toString()),
-    _useState2 = _slicedToArray(_useState, 2),
-    numberValue = _useState2[0],
-    setNumberValue = _useState2[1];
-  var onChange = function onChange(event) {
-    if (event) {
-      var inputValue = event.target.value;
-      var numericValue = inputValue.replace(/\D/g, '');
-      if (min && parseInt(numericValue, 10) < min || max && parseInt(numericValue, 10) > max) {
-        return;
-      }
-      if (removeZeroLeft && numericValue.charAt(0) === '0' && numericValue.length > 1) {
-        setNumberValue(numericValue.substring(1));
-      } else {
-        setNumberValue(numericValue);
-      }
-      if (props.onChange) props.onChange(event);
-    }
-  };
-  (0, _react.useEffect)(function () {
-    if (value && value !== numberValue) setNumberValue(value.toString());
-  }, [value]);
-  return /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
-    value: numberValue,
+    value = _props$value === void 0 ? '' : _props$value;
+  return /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({
+    value: typeof value === 'number' ? (0, _format_number.numberToPtBR)(value) : value,
     textAlign: textAlign,
-    onChange: onChange,
-    type: "number"
-  }));
+    mask: Number,
+    isNumeric: true,
+    scale: 0,
+    padFractionalZeros: false
+  }, props));
 };
 var _default = NumberField;
 exports.default = _default;

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

@@ -1,9 +1,9 @@
+import { PermissionAttr } from '../../@types/PermissionAttr.js';
 import { CustomInputEvent } from '../base/types.js';
 import { IMaskHOCProps } from '../types.js';
 import 'react';
 import '../../@types/Align.js';
 import '../../@types/Period.js';
-import '../../@types/PermissionAttr.js';
 import '../../@types/DataCombo.js';
 import '../../drawer/types.js';
 import '../../@types/Position.js';
@@ -11,24 +11,24 @@ import '../../@types/Icon.js';
 import '../../icons/helper.js';
 
 interface INumberFieldProps extends IMaskHOCProps {
-    onChange?: (e?: CustomInputEvent) => void;
-    removeZeroLeft?: boolean;
-}
-interface IBaseNumberProps extends IMaskHOCProps {
-    returnFormattedValueOnBlur?: boolean;
-    returnFormattedValueOnKeyDown?: boolean;
+    value?: string;
+    permissionAttr?: PermissionAttr;
+    disabled?: boolean;
     onChange?: (e?: CustomInputEvent, maskValue?: string, date?: string | {
         initial: string;
         final: string;
     }) => void;
 }
-interface ICurrencyProps extends IMaskHOCProps {
+interface IBaseNumberProps extends INumberFieldProps {
+    value?: string;
+    leftElements?: JSX.Element | JSX.Element[];
+    onBlur?: (e: CustomInputEvent) => void;
+    returnFormattedValueOnBlur?: boolean;
+    returnFormattedValueOnKeyDown?: boolean;
+}
+interface ICurrencyProps extends INumberFieldProps {
     currencySymbol?: string;
     displayCurrencySymbol?: boolean;
-    onChange?: (e?: CustomInputEvent, maskValue?: string, date?: string | {
-        initial: string;
-        final: string;
-    }) => void;
 }
 
 export { IBaseNumberProps, ICurrencyProps, INumberFieldProps };

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

@@ -80,20 +80,20 @@ var MultipleSelect = function MultipleSelect(props) {
   var selectWrapper = (0, _react.useRef)();
   var gridElRef = (0, _react.useRef)();
   var descriptionKeyIsString = typeof descriptionKey === 'string';
-  var insideComponents = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label', 'actionbutton'];
   var onScreenResize = function onScreenResize() {
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
   var onClickOutside = function onClickOutside(event) {
     var target = event.target;
-    if (!insideComponents.includes(target.className) && target !== selectWrapper.current && selectWrapper.current && !selectWrapper.current.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
+    if (target !== selectWrapper.current && selectWrapper.current && !selectWrapper.current.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
       setOpened(false);
     }
   };
   var onMouseMove = function onMouseMove(event) {
     var target = event.target;
     if (target.className === '') return;
-    setInsideComponent(insideComponents.includes(target.className));
+    var insideComponents = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label'].includes(target.className);
+    setInsideComponent(insideComponents);
   };
   var onClearClick = function onClearClick() {
     setSelected(undefined);
@@ -123,26 +123,19 @@ var MultipleSelect = function MultipleSelect(props) {
       setInputValue([filteredValue]);
     }
   };
-  var _onFocus = function onFocus() {
-    var dropdownWidthFocus = selectWrapper.current ? selectWrapper.current.clientWidth : dropdownWidth;
-    setOpened(true);
-    setDropdownWidth(dropdownWidthFocus);
-  };
   var onSelect = function onSelect(select) {
-    var _dropdownRef$current;
     if (select === null) return;
     var currentsSelect = [].concat(_toConsumableArray(currents), [select]);
     setCurrents(currentsSelect);
     setDataCombo(dataSource);
     setInputValue([]);
+    setOpened(false);
     if (props.onSelect) setSelected(props.onSelect(currentsSelect.map(function (i) {
       return i[idKey];
     })));
-    (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.focus();
   };
   var onUnselect = function onUnselect(id) {
     if (currents) {
-      var _dropdownRef$current2;
       var result = currents.filter(function (item) {
         return item[idKey] !== id;
       });
@@ -150,43 +143,41 @@ var MultipleSelect = function MultipleSelect(props) {
       if (props.onSelect) setSelected(props.onSelect(result.map(function (i) {
         return i[idKey];
       })));
-      (_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : _dropdownRef$current2.focus();
     }
   };
   var onOpenClose = function onOpenClose() {
     setOpened(!opened);
     if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
   };
+  var _onFocus = function onFocus() {
+    var dropdownWidthFocus = selectWrapper.current ? selectWrapper.current.clientWidth : dropdownWidth;
+    setOpened(true);
+    setDropdownWidth(dropdownWidthFocus);
+  };
   var _onBlur = function onBlur(e) {
     if (props.onBlur) props.onBlur(e);
     if (!insideComponent) setOpened(false);
   };
   var onInputKeyDown = function onInputKeyDown(e) {
     if (e.keyCode) {
-      if (e.keyCode === constants.keyCodes.ENTER && selected && opened) {
-        if (!currents.some(function (current) {
-          return current[idKey] === selected[idKey];
-        })) {
-          var _e$preventDefault;
-          (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
-          onSelect(selected);
-        }
+      if (e.keyCode === constants.keyCodes.ENTER && selected) {
+        if (!currents.includes(selected)) onSelect(selected);
       } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
         if (!opened) setOpened(true);
-        var index = dataCombo ? dataCombo.findIndex(function (d) {
+        var index = dataSource ? dataSource.findIndex(function (d) {
           return d === selected;
         }) : 0;
         if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
-          index = dataCombo && index === dataCombo.length - 1 ? 0 : index + 1;
+          index = dataSource && index === dataSource.length - 1 ? 0 : index + 1;
         } else {
-          index = dataCombo && index === 0 ? dataCombo.length - 1 : index - 1;
+          index = dataSource && index === 0 ? dataSource.length - 1 : index - 1;
         }
-        if (dataCombo && dataCombo.length) {
-          if (descriptionKeyIsString && dataCombo[index][descriptionKey]) {
-            setInputValue(dataCombo[index][descriptionKey]);
-          } else if (!descriptionKeyIsString) setInputValue([descriptionKey(dataCombo[index])]);
+        if (dataSource && dataSource.length) {
+          if (descriptionKeyIsString && dataSource[index][descriptionKey]) {
+            setInputValue(dataSource[index][descriptionKey]);
+          } else if (!descriptionKeyIsString) setInputValue([descriptionKey(dataSource[index])]);
         }
-        if (dataCombo) setSelected(dataCombo[index]);
+        if (dataSource) setSelected(dataSource[index]);
       } else if (e.keyCode === constants.keyCodes.BACKSPACE) {
         if (inputValue.length === 0) {
           var currentsKeyDown = _lodash.default.dropRight(currents);
@@ -195,8 +186,6 @@ var MultipleSelect = function MultipleSelect(props) {
             return i[idKey];
           }));
         }
-      } else if (e.keyCode === constants.keyCodes.TAB) {
-        setOpened(false);
       }
     }
   };
@@ -263,8 +252,6 @@ var MultipleSelect = function MultipleSelect(props) {
     onChange: function onChange(e) {
       if (e) onFilter(e.target.value);
     },
-    onClick: _onFocus,
-    inputRef: dropdownRef,
     onKeyDown: onInputKeyDown,
     customClassForWrapper: "selectwrapper ".concat((props.readOnly || shouldDisable() || shouldBeReadOnly()) && ' -undigitable'),
     customClassForInputContent: "multiselect",

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

@@ -154,13 +154,11 @@ var SimpleSelect = function SimpleSelect(props) {
     }
   };
   var onSelect = function onSelect(selectedDropdown) {
-    var _dropdownRef$current2;
     if (selectedDropdown === undefined) return;
     setOpened(false);
     setSelected(selectedDropdown);
     if (descriptionKeyIsString) setInputText(selectedDropdown[descriptionKey]);else setInputText(descriptionKey(selectedDropdown));
     onChange(selectedDropdown);
-    (_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : _dropdownRef$current2.focus();
   };
   var onOpenClose = function onOpenClose() {
     setOpened(!opened);
@@ -190,7 +188,7 @@ var SimpleSelect = function SimpleSelect(props) {
   };
   var onInputKeyDown = function onInputKeyDown(e) {
     if (e.keyCode) {
-      if (e.keyCode === constants.keyCodes.ENTER && selected && opened) {
+      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);
         onSelect(selected);
@@ -283,8 +281,6 @@ var SimpleSelect = function SimpleSelect(props) {
     onChange: function onChange(e) {
       if (e) onFilter(e.target.value);
     },
-    onClick: onFocus,
-    inputRef: dropdownRef,
     onKeyDown: onInputKeyDown,
     customClassForWrapper: "selectwrapper ".concat((undigitable || searchOnDropdown || shouldBeReadOnly()) && ' -undigitable'),
     customClassForInputContent: "multiselect",

package/lib/inputs/types.d.ts

@@ -19,7 +19,7 @@ interface ISearchProps extends IBaseProps {
     resetButton?: boolean;
     onReset?: (event?: CustomInputEvent) => void;
     onChange?: (event?: CustomInputEvent) => void;
-    onClick?: (event: MouseEvent<Element>) => void;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     textAlign?: TextAlign;
     disabled?: boolean;
     readOnly?: boolean;
@@ -111,7 +111,6 @@ interface IDropdownSelectProps {
     handleOnKeydown: (e: CustomInputEvent | KeyboardEvent) => void;
     handleOnBlur: (item: DataCombo) => void;
     handleOnFocus: () => void;
-    handlerSelecionadoAgora?: (bool: boolean) => void;
     opened: boolean;
     dropdownRef: MutableRefObject<HTMLDivElement | null>;
     dataCombo: DataCombo[];

package/lib/tabs/DropdownTabs.js

@@ -0,0 +1,75 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _buttons = _interopRequireDefault(require("../buttons"));
+var _list = _interopRequireWildcard(require("../list"));
+var _useTabs2 = require("./useTabs");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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); }
+var DropdownTab = function DropdownTab(_ref) {
+  var id = _ref.id,
+    title = _ref.title,
+    closeable = _ref.closeable,
+    iconAlign = _ref.iconAlign,
+    icon = _ref.icon,
+    iconName = _ref.iconName,
+    disabled = _ref.disabled,
+    tabMenuSize = _ref.tabMenuSize;
+  var _useTabs = (0, _useTabs2.useTabs)(),
+    selectTab = _useTabs.selectTab,
+    removeTab = _useTabs.removeTab;
+  return /*#__PURE__*/_react["default"].createElement(_list.ListItem, {
+    key: id
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "menuitem"
+  }, /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
+    className: "btn menubutton",
+    boxShadow: false,
+    onClick: function onClick() {
+      return selectTab(id);
+    },
+    iconAlign: iconAlign,
+    iconName: iconName,
+    icon: icon,
+    disabled: disabled,
+    label: title,
+    size: tabMenuSize,
+    transparent: true
+  }), closeable && /*#__PURE__*/_react["default"].createElement("button", {
+    className: "closepanel",
+    onClick: function onClick() {
+      return removeTab(id);
+    }
+  })));
+};
+var DropdownTabs = function DropdownTabs(_ref2) {
+  var _ref2$tabs = _ref2.tabs,
+    tabs = _ref2$tabs === void 0 ? [] : _ref2$tabs,
+    _ref2$tabMenuSize = _ref2.tabMenuSize,
+    tabMenuSize = _ref2$tabMenuSize === void 0 ? 'medium' : _ref2$tabMenuSize;
+  var hasTabs = tabs.length > 0;
+  if (tabs.length === 0) return null;
+  return /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
+    dropdown: true,
+    dropdownAlign: "right",
+    transparent: true,
+    boxShadow: false,
+    size: "large",
+    customClass: "dropdownbutton ".concat(hasTabs ? 'show' : '')
+  }, /*#__PURE__*/_react["default"].createElement(_list["default"], {
+    customClass: "dropdown-hide-tabs"
+  }, tabs.map(function (tab) {
+    return /*#__PURE__*/_react["default"].createElement(DropdownTab, _extends({
+      key: tab.id,
+      tabMenuSize: tabMenuSize
+    }, tab));
+  })));
+};
+var _default = exports["default"] = DropdownTabs;

package/lib/tabs/MenuTabs.js

@@ -0,0 +1,89 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _buttons = _interopRequireDefault(require("../buttons"));
+var helpers = _interopRequireWildcard(require("./tabHelpers"));
+var _permissionValidations = require("../permissionValidations");
+var _useTabs2 = require("./useTabs");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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); }
+var MenuTab = function MenuTab(_ref) {
+  var id = _ref.id,
+    title = _ref.title,
+    tabWidth = _ref.tabWidth,
+    iconAlign = _ref.iconAlign,
+    iconName = _ref.iconName,
+    icon = _ref.icon,
+    disabled = _ref.disabled,
+    permissionAttr = _ref.permissionAttr,
+    tabMenuSize = _ref.tabMenuSize,
+    tooltip = _ref.tooltip,
+    tooltipPosition = _ref.tooltipPosition,
+    tooltipWidth = _ref.tooltipWidth,
+    closeable = _ref.closeable;
+  var _useTabs = (0, _useTabs2.useTabs)(),
+    selectedTabId = _useTabs.selectedTabId,
+    selectTab = _useTabs.selectTab,
+    removeTab = _useTabs.removeTab,
+    tabsCount = _useTabs.tabsCount;
+  var onDenied = (0, _permissionValidations.actionsOnPermissionDenied)(helpers.onDeniedOptions, permissionAttr);
+  return onDenied.unvisible ? null : /*#__PURE__*/_react["default"].createElement("li", {
+    key: id,
+    style: {
+      width: tabWidth
+    },
+    className: "menuitem ".concat(selectedTabId === id && 'selected')
+  }, /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
+    className: "btn menubutton",
+    boxShadow: false,
+    onClick: function onClick() {
+      return selectTab(id);
+    },
+    iconAlign: iconAlign,
+    iconName: iconName,
+    icon: icon,
+    disabled: disabled || !!onDenied.disabled,
+    label: title,
+    size: tabMenuSize,
+    tooltip: tooltip || title,
+    tooltipPosition: tooltipPosition,
+    tooltipWidth: tooltipWidth
+  }), closeable && tabsCount > 1 && /*#__PURE__*/_react["default"].createElement("button", {
+    className: "closepanel",
+    onClick: function onClick() {
+      return removeTab(id);
+    }
+  }));
+};
+var MenuTabs = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
+  var _ref2$tabs = _ref2.tabs,
+    tabs = _ref2$tabs === void 0 ? [] : _ref2$tabs,
+    _ref2$tabWidth = _ref2.tabWidth,
+    tabWidth = _ref2$tabWidth === void 0 ? 'auto' : _ref2$tabWidth,
+    _ref2$tabMenuSize = _ref2.tabMenuSize,
+    tabMenuSize = _ref2$tabMenuSize === void 0 ? 'medium' : _ref2$tabMenuSize,
+    _ref2$tabMenuAlign = _ref2.tabMenuAlign,
+    tabMenuAlign = _ref2$tabMenuAlign === void 0 ? 'left' : _ref2$tabMenuAlign,
+    _ref2$firstTabIdent = _ref2.firstTabIdent,
+    firstTabIdent = _ref2$firstTabIdent === void 0 ? false : _ref2$firstTabIdent;
+  return /*#__PURE__*/_react["default"].createElement("ul", {
+    className: "menu ".concat(firstTabIdent && '-firsttabident'),
+    style: helpers.menuStyles(tabMenuAlign),
+    ref: ref
+  }, tabs.map(function (tab) {
+    return /*#__PURE__*/_react["default"].createElement(MenuTab, _extends({
+      key: tab.id,
+      tabMenuSize: tabMenuSize,
+      tabWidth: tabWidth
+    }, tab));
+  }));
+});
+MenuTabs.displayName = 'MenuTabs';
+var _default = exports["default"] = MenuTabs;

package/lib/tabs/context.js

@@ -0,0 +1,161 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabsContext = void 0;
+exports.TabsProvider = TabsProvider;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _tabHelpers = require("./tabHelpers");
+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 _getRequireWildcardCache(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 && Object.prototype.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 _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."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var TabsContext = exports.TabsContext = /*#__PURE__*/(0, _react.createContext)({});
+function TabsProvider(_ref) {
+  var _menuRef$current$clie, _menuRef$current;
+  var children = _ref.children,
+    tabsProp = _ref.tabs,
+    container = _ref.container,
+    _ref$selectedTab = _ref.selectedTab,
+    selectedTab = _ref$selectedTab === void 0 ? null : _ref$selectedTab,
+    onTabChange = _ref.onTabChange,
+    onTabClose = _ref.onTabClose,
+    tabsWidthProp = _ref.tabsWidth,
+    _ref$firstTabIdent = _ref.firstTabIdent,
+    firstTabIdent = _ref$firstTabIdent === void 0 ? false : _ref$firstTabIdent;
+  var _React$useState = _react["default"].useState(selectedTab),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selectedTabId = _React$useState2[0],
+    setSelectedTabId = _React$useState2[1];
+  var _useState = (0, _react.useState)(function () {
+      var _container$current$cl, _container$current;
+      return (_container$current$cl = (_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.clientWidth) !== null && _container$current$cl !== void 0 ? _container$current$cl : 0;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerWidth = _useState2[0],
+    setContainerWidth = _useState2[1];
+  var _useState3 = (0, _react.useState)((0, _tabHelpers.getTabs)(tabsProp)),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tabs = _useState4[0],
+    setTabs = _useState4[1];
+  var menuRef = (0, _react.useRef)(null);
+  var menuSize = ((_menuRef$current$clie = (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : _menuRef$current.clientWidth) !== null && _menuRef$current$clie !== void 0 ? _menuRef$current$clie : 0) - 38 - (firstTabIdent ? 15 : 0);
+  var tabsWidth = (0, _react.useMemo)(function () {
+    if (typeof tabsWidthProp === 'string') return tabsWidthProp === 'auto' ? 100 : parseInt(tabsWidthProp) || 100;
+    return tabsWidthProp;
+  }, [tabsWidthProp]);
+  var maxTabs = Math.round(menuSize / tabsWidth);
+  if (selectedTab && selectedTab !== selectedTabId) {
+    setSelectedTabId(selectedTab);
+  }
+  if (tabs.length > 0 && selectedTabId === null) {
+    var _tabs$;
+    setSelectedTabId((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id);
+  }
+  var dropdownTabs = (0, _react.useMemo)(function () {
+    if (menuSize === 0) return [];
+    return tabs.slice(maxTabs);
+  }, [tabs, maxTabs, containerWidth]);
+  var menuTabs = (0, _react.useMemo)(function () {
+    return tabs.slice(0, maxTabs);
+  }, [tabs, maxTabs, containerWidth]);
+  var tabsCount = tabs.length;
+  var updateTabs = (0, _react.useCallback)(function (tabId) {
+    var tabInDropdownIndex = dropdownTabs.findIndex(function (tab) {
+      return tab.id === tabId;
+    });
+    if (tabInDropdownIndex !== -1) {
+      var tabIndex = tabs.findIndex(function (tab) {
+        return tab.id === tabId;
+      });
+      var tabInDropdown = dropdownTabs[tabInDropdownIndex];
+      setTabs(function (prevState) {
+        prevState.splice(tabIndex, 1);
+        return [tabInDropdown].concat(_toConsumableArray(prevState));
+      });
+    }
+  }, [setTabs, menuTabs, tabs, dropdownTabs]);
+  var selectTab = (0, _react.useCallback)(function (tabId) {
+    updateTabs(tabId);
+    setSelectedTabId(tabId);
+    if (onTabChange) {
+      onTabChange(String(tabId));
+    }
+  }, [onTabChange, setSelectedTabId, updateTabs]);
+  var removeTab = (0, _react.useCallback)(function (tabId) {
+    var tabIndex = tabs.findIndex(function (tab) {
+      return tab.id === tabId;
+    });
+    var newSelectedTab = tabIndex === 0 ? tabs[tabIndex + 1] : tabs[tabIndex - 1];
+    if (selectedTabId === tabId) {
+      selectTab(newSelectedTab.id);
+    }
+    if (tabIndex !== -1) {
+      setTabs(function (prevState) {
+        prevState.splice(tabIndex, 1);
+        return prevState;
+      });
+    }
+    if (onTabClose) {
+      onTabClose(String(tabId));
+    }
+  }, [onTabClose, tabs, dropdownTabs, selectedTabId]);
+  var onResizeContainer = (0, _react.useCallback)(function (contentRect) {
+    setContainerWidth(contentRect.width);
+  }, [setContainerWidth]);
+  (0, _react.useEffect)(function () {
+    var newTabs = (0, _tabHelpers.getTabs)(tabsProp);
+    if (newTabs !== tabs) {
+      var includedTabs = _lodash["default"].differenceBy(newTabs, tabs, 'id');
+      var excludedTabsIds = _lodash["default"].differenceBy(tabs, newTabs, 'id').map(function (tab) {
+        return tab.id;
+      });
+      setTabs(function (prevState) {
+        var currentTabs = prevState;
+        if (excludedTabsIds) {
+          currentTabs = currentTabs.filter(function (tab) {
+            return !excludedTabsIds.includes(tab.id);
+          });
+        }
+        return [].concat(_toConsumableArray(currentTabs), _toConsumableArray(includedTabs));
+      });
+    }
+  }, [tabsProp]);
+  (0, _react.useEffect)(function () {
+    var resizeObserver = new ResizeObserver(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 1),
+        entry = _ref3[0];
+      onResizeContainer(entry.contentRect);
+    });
+    if (container.current) resizeObserver.observe(container.current);
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, [container.current, onResizeContainer]);
+  return /*#__PURE__*/_react["default"].createElement(TabsContext.Provider, {
+    value: {
+      tabs: tabs,
+      menuTabs: menuTabs,
+      dropdownTabs: dropdownTabs,
+      containerWidth: containerWidth,
+      tabsCount: tabsCount,
+      updateTabs: updateTabs,
+      selectTab: selectTab,
+      selectedTabId: selectedTabId,
+      removeTab: removeTab,
+      menuRef: menuRef
+    }
+  }, children);
+}

package/lib/tabs/useTabs.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTabs = useTabs;
+var _react = require("react");
+var _context = require("./context");
+function useTabs() {
+  return (0, _react.useContext)(_context.TabsContext);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "1.0.17-beta.5",
+  "version": "1.0.18-beta.0",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "module": "lib/index.cjs",