linear-react-components-ui 1.0.2 → 1.0.3-beta.1

package/lib/table/table.spec.js

@@ -0,0 +1,352 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _ = _interopRequireWildcard(require("./"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var mockTable = function mockTable(propsTable, propsTRow, propsTh, propsTd) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    customClass: "mock-table"
+  }, propsTable), /*#__PURE__*/_react.default.createElement(_.THeader, {
+    customClass: "mock-theader"
+  }, /*#__PURE__*/_react.default.createElement(_.TRow, _extends({
+    customClass: "mock-trow",
+    height: "64px",
+    rowId: "mock-rowId",
+    dataId: 1,
+    color: "primary"
+  }, propsTRow), /*#__PURE__*/_react.default.createElement(_.Th, _extends({
+    customClass: "mock-th",
+    textAlign: "center",
+    style: {
+      backgroundColor: 'red'
+    }
+  }, propsTh), "Nome"), /*#__PURE__*/_react.default.createElement(_.Th, _extends({
+    customClass: "mock-th"
+  }, propsTh), "Idade"))), /*#__PURE__*/_react.default.createElement(_.TBody, {
+    customClass: "mock-tbody"
+  }, /*#__PURE__*/_react.default.createElement(_.TRow, _extends({
+    customClass: "mock-trow"
+  }, propsTRow), /*#__PURE__*/_react.default.createElement(_.Td, _extends({
+    textAlign: "center",
+    style: {
+      backgroundColor: 'red'
+    },
+    customClass: "mock-td"
+  }, propsTd), "Fulano"), /*#__PURE__*/_react.default.createElement(_.Td, _extends({
+    customClass: "mock-td"
+  }, propsTd), "20")), /*#__PURE__*/_react.default.createElement(_.TRow, _extends({
+    customClass: "mock-trow"
+  }, propsTRow), /*#__PURE__*/_react.default.createElement(_.Td, _extends({
+    customClass: "mock-td"
+  }, propsTd), "Ciclano"), /*#__PURE__*/_react.default.createElement(_.Td, _extends({
+    customClass: "mock-td"
+  }, propsTd), "30"))));
+};
+
+describe('Table', function () {
+  it('should render correctly', function () {
+    var _render = (0, _react2.render)(mockTable()),
+        container = _render.container;
+
+    expect(container.firstChild).toBeTruthy();
+  });
+  it('should render children with THeader, TBody, TRow, Th and Td', function () {
+    var _render2 = (0, _react2.render)(mockTable()),
+        container = _render2.container;
+
+    expect(container.firstChild).toContainElement(container.querySelector('.tbody'));
+    expect(container.firstChild).toContainElement(container.querySelector('.theader'));
+    expect(container.firstChild).toContainElement(container.querySelector('.trow'));
+  });
+  it('should apply custom class', function () {
+    var _render3 = (0, _react2.render)(mockTable()),
+        container = _render3.container;
+
+    expect(container.firstChild).toHaveClass('mock-table');
+  });
+  it('should apply striped', function () {
+    var _render4 = (0, _react2.render)(mockTable({
+      striped: true
+    })),
+        container = _render4.container;
+
+    expect(container.firstChild).toHaveClass('-striped');
+  });
+  it('should apply bordered', function () {
+    var _render5 = (0, _react2.render)(mockTable({
+      bordered: true
+    })),
+        container = _render5.container;
+
+    expect(container.firstChild).toHaveClass('-bordered');
+  });
+  it('should apply condensed', function () {
+    var _render6 = (0, _react2.render)(mockTable({
+      condensed: true
+    })),
+        container = _render6.container;
+
+    expect(container.firstChild).toHaveClass('-condensed');
+  });
+  it('should apply hovered', function () {
+    var _render7 = (0, _react2.render)(mockTable({
+      hovered: true
+    })),
+        container = _render7.container;
+
+    expect(container.firstChild).toHaveClass('-hovered');
+  });
+  it('should apply headerColored', function () {
+    var _render8 = (0, _react2.render)(mockTable({
+      headerColored: true
+    })),
+        container = _render8.container;
+
+    expect(container.firstChild).toHaveClass('-headercolor');
+  });
+  it('should apply bodyScrollable', function () {
+    var _render9 = (0, _react2.render)(mockTable({
+      bodyScrollable: true
+    })),
+        container = _render9.container;
+
+    expect(container.firstChild).toHaveClass('-scrollable');
+  });
+  it('should apply vertical', function () {
+    var _render10 = (0, _react2.render)(mockTable({
+      vertical: true
+    })),
+        container = _render10.container;
+
+    expect(container.firstChild).toHaveClass('-vertical');
+  });
+  it('should fire event on row click', function () {
+    var mockOnClick = jest.fn();
+
+    var _render11 = (0, _react2.render)(mockTable({
+      onRowClick: mockOnClick
+    })),
+        container = _render11.container;
+
+    _react2.fireEvent.click(container.querySelectorAll('.trow')[0]);
+
+    expect(mockOnClick).toBeCalledTimes(1);
+  });
+  it('should fire event on column click', function () {
+    var mockOnClick = jest.fn();
+
+    var _render12 = (0, _react2.render)(mockTable({
+      onColClick: mockOnClick
+    })),
+        container = _render12.container;
+
+    _react2.fireEvent.click(container.querySelectorAll('.rowcolumn')[0]);
+
+    expect(mockOnClick).toBeCalledTimes(1);
+  });
+  describe('TRow', function () {
+    it('should render correctly', function () {
+      var _render13 = (0, _react2.render)(mockTable()),
+          container = _render13.container;
+
+      expect(container.querySelector('.trow')).toBeInTheDocument();
+      expect(container.querySelectorAll('.trow').length).toBe(3);
+    });
+    it('should apply custom class', function () {
+      var _render14 = (0, _react2.render)(mockTable()),
+          container = _render14.container;
+
+      expect(container.querySelector('.trow')).toHaveClass('mock-trow');
+    });
+    it('should change height', function () {
+      var _render15 = (0, _react2.render)(mockTable()),
+          container = _render15.container;
+
+      expect(container.querySelector('.trow')).toHaveStyle('height: 64px;');
+    });
+    it('should apply row id', function () {
+      var _render16 = (0, _react2.render)(mockTable()),
+          container = _render16.container;
+
+      expect(container.querySelector('.trow')).toHaveAttribute('id', 'mock-rowId');
+    });
+    it('should apply -noborder class', function () {
+      var _render17 = (0, _react2.render)(mockTable({}, {
+        rowBorder: false
+      })),
+          container = _render17.container;
+
+      expect(container.querySelector('.trow .rowcolumn')).toHaveClass('-noborder');
+    });
+    it('should fire event on row click', function () {
+      var mockOnClick = jest.fn();
+
+      var _render18 = (0, _react2.render)(mockTable({}, {
+        onClick: mockOnClick
+      })),
+          container = _render18.container;
+
+      _react2.fireEvent.click(container.querySelectorAll('.trow')[0]);
+
+      expect(mockOnClick).toBeCalledTimes(1);
+    });
+  });
+  describe('THeader', function () {
+    it('should apply custom class', function () {
+      var _render19 = (0, _react2.render)(mockTable()),
+          container = _render19.container;
+
+      expect(container.querySelector('.theader')).toHaveClass('mock-theader');
+    });
+    it('should render children', function () {
+      var _render20 = (0, _react2.render)(mockTable()),
+          container = _render20.container;
+
+      expect(container.querySelector('.theader')).toContainElement(container.querySelector('.headercolumn'));
+      expect(container.querySelectorAll('.headercolumn').length).toBe(2);
+    });
+    describe('Th', function () {
+      it('should render correctly', function () {
+        var _render21 = (0, _react2.render)(mockTable()),
+            container = _render21.container;
+
+        expect(container.querySelectorAll('.headercolumn')[0]).toHaveTextContent('Nome');
+        expect(container.querySelectorAll('.headercolumn')[1]).toHaveTextContent('Idade');
+      });
+      it('should apply custom class', function () {
+        var _render22 = (0, _react2.render)(mockTable()),
+            container = _render22.container;
+
+        expect(container.querySelectorAll('.headercolumn')[0]).toHaveClass('mock-th');
+      });
+      it('should change text align', function () {
+        var _render23 = (0, _react2.render)(mockTable()),
+            container = _render23.container;
+
+        expect(container.querySelectorAll('.headercolumn')[0]).toHaveClass('text-align-center');
+      });
+      it('should apply style', function () {
+        var _render24 = (0, _react2.render)(mockTable()),
+            container = _render24.container;
+
+        expect(container.querySelectorAll('.headercolumn')[0]).toHaveStyle('background-color: red;');
+      });
+      it('should hide component', function () {
+        var _render25 = (0, _react2.render)(mockTable({}, {}, {
+          visible: false
+        })),
+            container = _render25.container;
+
+        expect(container.querySelector('.headercolumn')).not.toBeInTheDocument();
+      });
+    });
+  });
+  describe('TBody', function () {
+    it('should apply custom class', function () {
+      var _render26 = (0, _react2.render)(mockTable()),
+          container = _render26.container;
+
+      expect(container.querySelector('.tbody')).toHaveClass('mock-tbody');
+    });
+    it('should render children', function () {
+      var _render27 = (0, _react2.render)(mockTable()),
+          container = _render27.container;
+
+      expect(container.querySelector('.tbody')).toContainElement(container.querySelector('.rowcolumn'));
+      expect(container.querySelectorAll('.rowcolumn').length).toBe(4);
+    });
+    describe('Td', function () {
+      it('should apply custom class', function () {
+        var _render28 = (0, _react2.render)(mockTable()),
+            container = _render28.container;
+
+        expect(container.querySelector('.rowcolumn')).toHaveClass('mock-td');
+      });
+      it('should render correctly', function () {
+        var _render29 = (0, _react2.render)(mockTable()),
+            container = _render29.container;
+
+        expect(container.querySelectorAll('.rowcolumn')[0]).toHaveTextContent('Fulano');
+        expect(container.querySelectorAll('.rowcolumn')[1]).toHaveTextContent('20');
+        expect(container.querySelectorAll('.rowcolumn')[2]).toHaveTextContent('Ciclano');
+        expect(container.querySelectorAll('.rowcolumn')[3]).toHaveTextContent('30');
+      });
+      it('should change text align', function () {
+        var _render30 = (0, _react2.render)(mockTable()),
+            container = _render30.container;
+
+        expect(container.querySelectorAll('.rowcolumn')[0]).toHaveClass('text-align-center');
+      });
+      it('should apply style', function () {
+        var _render31 = (0, _react2.render)(mockTable()),
+            container = _render31.container;
+
+        expect(container.querySelectorAll('.rowcolumn')[0]).toHaveStyle('background-color: red;');
+      });
+      it('should fire event on click', function () {
+        var mockOnClick = jest.fn();
+
+        var _render32 = (0, _react2.render)(mockTable({}, {}, {}, {
+          onClick: mockOnClick
+        })),
+            container = _render32.container;
+
+        _react2.fireEvent.click(container.querySelectorAll('.rowcolumn')[0]);
+
+        expect(mockOnClick).toBeCalledTimes(1);
+      });
+      it('should not fire event on click', function () {
+        var mockOnClick = jest.fn();
+
+        var _render33 = (0, _react2.render)(mockTable({}, {}, {}, {
+          onClick: mockOnClick,
+          ignoreTableColClick: true
+        })),
+            container = _render33.container;
+
+        _react2.fireEvent.click(container.querySelectorAll('.rowcolumn')[0]);
+
+        expect(mockOnClick).toBeCalledTimes(0);
+      });
+      it('should hide content', function () {
+        var _render34 = (0, _react2.render)(mockTable({}, {}, {}, {
+          displayContent: 'never'
+        })),
+            container = _render34.container;
+
+        expect(container.querySelectorAll('.rowcolumn')[0]).toContainElement(container.querySelector('.rowcolumn .hidden'));
+      });
+      it('should show content on row hover', function () {
+        var _render35 = (0, _react2.render)(mockTable({}, {}, {}, {
+          displayContent: 'onRowHover'
+        })),
+            container = _render35.container;
+
+        expect(container.querySelectorAll('.rowcolumn')[0]).toContainElement(container.querySelector('.rowcolumn .rowhover'));
+      });
+      it('should hide component', function () {
+        var _render36 = (0, _react2.render)(mockTable({}, {}, {}, {
+          visible: false
+        })),
+            container = _render36.container;
+
+        expect(container.querySelector('.rowcolumn')).not.toBeInTheDocument();
+      });
+    });
+  });
+});

package/lib/table/types.d.ts

@@ -73,7 +73,7 @@ interface ITableRowContext {
     skeletonInRows?: number;
     rowBorder?: boolean;
 }
-type TableElement = {
+declare type TableElement = {
     props: {
         style: {
             width: string | number;

package/lib/tabs/DropdownItems.js

@@ -1,23 +1,31 @@
 "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
 });
 exports.default = void 0;
+
 var _react = _interopRequireDefault(require("react"));
+
 var _buttons = _interopRequireDefault(require("../buttons"));
+
 var _list = _interopRequireWildcard(require("../list"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 var DropdownItems = function DropdownItems(_ref) {
   var handlerClick = _ref.handlerClick,
-    handlerRemovePanel = _ref.handlerRemovePanel,
-    _ref$dropdownPanels = _ref.dropdownPanels,
-    dropdownPanels = _ref$dropdownPanels === void 0 ? [] : _ref$dropdownPanels,
-    _ref$tabMenuSize = _ref.tabMenuSize,
-    tabMenuSize = _ref$tabMenuSize === void 0 ? 'medium' : _ref$tabMenuSize;
+      handlerRemovePanel = _ref.handlerRemovePanel,
+      _ref$dropdownPanels = _ref.dropdownPanels,
+      dropdownPanels = _ref$dropdownPanels === void 0 ? [] : _ref$dropdownPanels,
+      _ref$tabMenuSize = _ref.tabMenuSize,
+      tabMenuSize = _ref$tabMenuSize === void 0 ? 'medium' : _ref$tabMenuSize;
   return dropdownPanels.length > 0 ? /*#__PURE__*/_react.default.createElement(_buttons.default, {
     dropdown: true,
     dropdownAlign: "right",
@@ -29,13 +37,13 @@ var DropdownItems = function DropdownItems(_ref) {
     customClass: "dropdown-hide-tabs"
   }, dropdownPanels.map(function (panel, index) {
     var _panel$props = panel.props,
-      id = _panel$props.id,
-      title = _panel$props.title,
-      closeable = _panel$props.closeable,
-      iconAlign = _panel$props.iconAlign,
-      icon = _panel$props.icon,
-      iconName = _panel$props.iconName,
-      disabled = _panel$props.disabled;
+        id = _panel$props.id,
+        title = _panel$props.title,
+        closeable = _panel$props.closeable,
+        iconAlign = _panel$props.iconAlign,
+        icon = _panel$props.icon,
+        iconName = _panel$props.iconName,
+        disabled = _panel$props.disabled;
     return /*#__PURE__*/_react.default.createElement(_list.ListItem, {
       key: id
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -61,5 +69,6 @@ var DropdownItems = function DropdownItems(_ref) {
     })));
   }))) : null;
 };
+
 var _default = DropdownItems;
 exports.default = _default;

package/lib/tabs/Menu.js

@@ -4,20 +4,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _react = _interopRequireDefault(require("react"));
+
 var _MenuItems = _interopRequireDefault(require("./MenuItems"));
+
 var _DropdownItems = _interopRequireDefault(require("./DropdownItems"));
+
 var _excluded = ["menuRef", "toolbar", "toolBarRef", "customClassForToolBar"];
+
 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; }
+
 var Menu = function Menu(_ref) {
   var menuRef = _ref.menuRef,
-    toolbar = _ref.toolbar,
-    toolBarRef = _ref.toolBarRef,
-    _ref$customClassForTo = _ref.customClassForToolBar,
-    customClassForToolBar = _ref$customClassForTo === void 0 ? '' : _ref$customClassForTo,
-    props = _objectWithoutProperties(_ref, _excluded);
+      toolbar = _ref.toolbar,
+      toolBarRef = _ref.toolBarRef,
+      _ref$customClassForTo = _ref.customClassForToolBar,
+      customClassForToolBar = _ref$customClassForTo === void 0 ? '' : _ref$customClassForTo,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "menucontainer",
     ref: function ref(_ref2) {
@@ -30,5 +39,6 @@ var Menu = function Menu(_ref) {
     } : undefined
   }));
 };
+
 var _default = Menu;
 exports.default = _default;

package/lib/tabs/MenuItems.js

@@ -1,47 +1,56 @@
 "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
 });
 exports.default = void 0;
+
 var _react = _interopRequireDefault(require("react"));
+
 var _buttons = _interopRequireDefault(require("../buttons"));
+
 var helpers = _interopRequireWildcard(require("./tabHelpers"));
+
 var _permissionValidations = require("../permissionValidations");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 var MenuItems = function MenuItems(_ref) {
   var handlerClick = _ref.handlerClick,
-    currentPanels = _ref.currentPanels,
-    handlerRemovePanel = _ref.handlerRemovePanel,
-    _ref$tabWidth = _ref.tabWidth,
-    tabWidth = _ref$tabWidth === void 0 ? 'auto' : _ref$tabWidth,
-    _ref$tabMenuSize = _ref.tabMenuSize,
-    tabMenuSize = _ref$tabMenuSize === void 0 ? 'medium' : _ref$tabMenuSize,
-    _ref$tabMenuAlign = _ref.tabMenuAlign,
-    tabMenuAlign = _ref$tabMenuAlign === void 0 ? 'left' : _ref$tabMenuAlign,
-    _ref$selectedTabId = _ref.selectedTabId,
-    selectedTabId = _ref$selectedTabId === void 0 ? '' : _ref$selectedTabId,
-    _ref$firstTabIdent = _ref.firstTabIdent,
-    firstTabIdent = _ref$firstTabIdent === void 0 ? false : _ref$firstTabIdent;
+      currentPanels = _ref.currentPanels,
+      handlerRemovePanel = _ref.handlerRemovePanel,
+      _ref$tabWidth = _ref.tabWidth,
+      tabWidth = _ref$tabWidth === void 0 ? 'auto' : _ref$tabWidth,
+      _ref$tabMenuSize = _ref.tabMenuSize,
+      tabMenuSize = _ref$tabMenuSize === void 0 ? 'medium' : _ref$tabMenuSize,
+      _ref$tabMenuAlign = _ref.tabMenuAlign,
+      tabMenuAlign = _ref$tabMenuAlign === void 0 ? 'left' : _ref$tabMenuAlign,
+      _ref$selectedTabId = _ref.selectedTabId,
+      selectedTabId = _ref$selectedTabId === void 0 ? '' : _ref$selectedTabId,
+      _ref$firstTabIdent = _ref.firstTabIdent,
+      firstTabIdent = _ref$firstTabIdent === void 0 ? false : _ref$firstTabIdent;
   return /*#__PURE__*/_react.default.createElement("ul", {
     className: "menu ".concat(firstTabIdent && '-firsttabident'),
     style: helpers.menuStyles(tabMenuAlign)
   }, currentPanels === null || currentPanels === void 0 ? void 0 : currentPanels.map(function (panel, index) {
     var _panel$props = panel.props,
-      id = _panel$props.id,
-      icon = _panel$props.icon,
-      title = _panel$props.title,
-      tooltip = _panel$props.tooltip,
-      disabled = _panel$props.disabled,
-      iconName = _panel$props.iconName,
-      closeable = _panel$props.closeable,
-      iconAlign = _panel$props.iconAlign,
-      tooltipWidth = _panel$props.tooltipWidth,
-      permissionAttr = _panel$props.permissionAttr,
-      tooltipPosition = _panel$props.tooltipPosition;
+        id = _panel$props.id,
+        icon = _panel$props.icon,
+        title = _panel$props.title,
+        tooltip = _panel$props.tooltip,
+        disabled = _panel$props.disabled,
+        iconName = _panel$props.iconName,
+        closeable = _panel$props.closeable,
+        iconAlign = _panel$props.iconAlign,
+        tooltipWidth = _panel$props.tooltipWidth,
+        permissionAttr = _panel$props.permissionAttr,
+        tooltipPosition = _panel$props.tooltipPosition;
     var onDenied = (0, _permissionValidations.actionsOnPermissionDenied)(helpers.onDeniedOptions, permissionAttr);
     return onDenied.unvisible ? null : /*#__PURE__*/_react.default.createElement("li", {
       key: id,
@@ -72,5 +81,6 @@ var MenuItems = function MenuItems(_ref) {
     }));
   }));
 };
+
 var _default = MenuItems;
 exports.default = _default;