linear-react-components-ui 0.4.75 → 0.4.76-beta.11

package/lib/split/split.spec.js

@@ -0,0 +1,151 @@
+"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 = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+require("babel-polyfill");
+
+require("@testing-library/jest-dom");
+
+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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+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 splitMockRender = function splitMockRender(props, propsSplitSide) {
+  return /*#__PURE__*/_react2["default"].createElement("div", {
+    style: {
+      height: '600px',
+      width: '500px',
+      marginTop: '2px',
+      border: '1px solid #a8a8a8'
+    }
+  }, /*#__PURE__*/_react2["default"].createElement(_["default"], _extends({
+    percentage: true,
+    secondaryInitialSize: 50
+  }, props), /*#__PURE__*/_react2["default"].createElement(_.SplitSide, _extends({
+    style: {
+      backgroundColor: '#5bcc65',
+      color: '#fff',
+      fontSize: '13px'
+    },
+    primary: true
+  }, propsSplitSide), /*#__PURE__*/_react2["default"].createElement("p", null, "Aliquam at mauris porta libero mattis convallis et posuere leo. Vivamus vehicula libero lacus, ac molestie mi varius eu. Nam vel libero odio. Nulla sollicitudin dignissim pellentesque. Praesent eleifend tortor ac dapibus efficitur. Nunc eleifend augue vel laoreet rutrum.")), /*#__PURE__*/_react2["default"].createElement(_.SplitSide, {
+    style: {
+      backgroundColor: '#8a2c75',
+      color: '#fff',
+      fontSize: '13px'
+    }
+  }, /*#__PURE__*/_react2["default"].createElement("p", null, "Painel 01 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a orci ac diam pharetra viverra sit amet eget arcu. Ut sit amet efficitur elit. Suspendisse pulvinar pulvinar lectus ac malesuada. Curabitur ac dictum elit. Nam lectus ex, suscipit nec aliquet vel, molestie. Nullam commodo dui viverra sem hendrerit, eget iaculis nisi commodo."))));
+};
+
+describe('Split', function () {
+  describe('Default', function () {
+    it('should apply secondaryInitialSize with 50%', function () {
+      var _render = (0, _react.render)(splitMockRender()),
+          container = _render.container;
+
+      var secondSplit = container.querySelectorAll('.layout-pane')[1];
+      expect(secondSplit).toHaveStyle('width: 50%');
+    });
+    it('should apply SplitSide style from props', function () {
+      var _render2 = (0, _react.render)(splitMockRender()),
+          container = _render2.container;
+
+      var secondSplit = container.querySelectorAll('.layout-pane')[1];
+      expect(secondSplit).toHaveStyle('backgroundColor: #8a2c75');
+      expect(secondSplit).toHaveStyle('color: #fff');
+      expect(secondSplit).toHaveStyle('fontSize: 13px');
+    });
+    it('should apply customClass', function () {
+      var _render3 = (0, _react.render)(splitMockRender({
+        customClass: 'customClass'
+      })),
+          container = _render3.container;
+
+      var split = container.querySelector('.split-component');
+      expect(split).toHaveClass('customClass');
+    });
+    it('should apply style', function () {
+      var _render4 = (0, _react.render)(splitMockRender({
+        style: {
+          color: '#8a2c75'
+        }
+      })),
+          container = _render4.container;
+
+      var split = container.querySelector('.split-component');
+      expect(split).toHaveStyle('color: #8a2c75');
+    });
+    it('should use pixels for width', function () {
+      var _render5 = (0, _react.render)(splitMockRender({
+        percentage: false
+      })),
+          container = _render5.container;
+
+      var secondSplit = container.querySelectorAll('.layout-pane')[1];
+      expect(secondSplit).toHaveStyle('width: 50px');
+    });
+    it('should apply class for vertical', function () {
+      var _render6 = (0, _react.render)(splitMockRender({
+        vertical: true
+      })),
+          container = _render6.container;
+
+      expect(container.firstChild.firstChild).toHaveClass('splitter-layout-vertical');
+    });
+    it('should hide first panel', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _render7, container, layoutSpliter;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _render7 = (0, _react.render)(splitMockRender()), container = _render7.container;
+              layoutSpliter = container.querySelector('.toggler-horizontal');
+
+              _react.fireEvent.doubleClick(layoutSpliter);
+
+              expect(container.querySelector('.layout-pane.layout-pane-primary')).not.toBeTruthy();
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+    it('should apply splitSide customClass', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var _render8, container, secondSplit;
+
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _render8 = (0, _react.render)(splitMockRender({}, {
+                customClass: 'customClass'
+              })), container = _render8.container;
+              secondSplit = container.querySelectorAll('.layout-pane')[0];
+              expect(secondSplit).toHaveClass('customClass');
+
+            case 3:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+  });
+});

package/lib/table/Header.js

@@ -50,7 +50,9 @@ var Header = function Header(_ref) {
       bodyScrollable = _useContext.bodyScrollable,
       handlerSetColumnsWidth = _useContext.handlerSetColumnsWidth;
 
-  handlerSetColumnsWidth(getColumnsWidth(children));
+  (0, _react.useEffect)(function () {
+    handlerSetColumnsWidth(getColumnsWidth(children));
+  }, []);
   return bodyScrollable ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "headercontainer",
     style: {

package/lib/table/Row.js

@@ -21,7 +21,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var Row = function Row(props) {
   var customClass = props.customClass,
-      color = props.color,
       children = props.children,
       rowId = props.rowId,
       dataId = props.dataId,
@@ -43,7 +42,7 @@ var Row = function Row(props) {
   return /*#__PURE__*/_react["default"].createElement(_helpers.RowContext.Provider, {
     value: contextValues
   }, /*#__PURE__*/_react["default"].createElement("tr", {
-    className: "trow ".concat(customClass, " ").concat(color, " ").concat(rowId && selectedRowId === rowId ? '-selected' : ''),
+    className: "trow ".concat(customClass, " ").concat(rowId && selectedRowId === rowId ? '-selected' : ''),
     onClick: function onClick(e) {
       if (rowId !== undefined || rowId !== null) handleSelectRow(rowId);
       if (handleTableRowClick) handleTableRowClick(e, dataId);
@@ -59,16 +58,14 @@ var Row = function Row(props) {
 Row.propTypes = {
   children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].arrayOf(_propTypes["default"].object)]).isRequired,
   customClass: _propTypes["default"].string,
-  color: _propTypes["default"].string,
   rowId: _propTypes["default"].string,
-  dataId: _propTypes["default"].number,
+  dataId: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
   onClick: _propTypes["default"].func,
   rowBorder: _propTypes["default"].bool,
   height: _propTypes["default"].string
 };
 Row.defaultProps = {
   customClass: '',
-  color: '',
   dataId: undefined,
   onClick: undefined,
   rowId: undefined,

package/lib/table/index.js

@@ -79,14 +79,13 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var getClass = function getClass(_ref) {
   var customClass = _ref.customClass,
       striped = _ref.striped,
-      color = _ref.color,
       bordered = _ref.bordered,
       hovered = _ref.hovered,
       headerColored = _ref.headerColored,
       condensed = _ref.condensed,
       vertical = _ref.vertical,
       bodyScrollable = _ref.bodyScrollable;
-  return "table-component ".concat(color, " ").concat(customClass, " ").concat(striped && '-striped', " \n  ").concat(bordered && '-bordered', " ").concat(hovered && '-hovered', " ").concat(headerColored && '-headercolor', "\n  ").concat(condensed && '-condensed', "\n  ").concat(vertical && '-vertical', "\n  ").concat(bodyScrollable ? '-scrollable' : '');
+  return "table-component ".concat(customClass, " ").concat(striped && '-striped', " \n  ").concat(bordered && '-bordered', " ").concat(hovered && '-hovered', " ").concat(headerColored && '-headercolor', "\n  ").concat(condensed && '-condensed', "\n  ").concat(vertical && '-vertical', "\n  ").concat(bodyScrollable && '-scrollable');
 };
 
 var Table = function Table(props) {
@@ -150,7 +149,6 @@ Table.propTypes = {
   children: _propTypes["default"].any.isRequired,
   striped: _propTypes["default"].bool,
   customClass: _propTypes["default"].string,
-  color: _propTypes["default"].string,
   bordered: _propTypes["default"].bool,
   hovered: _propTypes["default"].bool,
   headerColored: _propTypes["default"].bool,
@@ -164,7 +162,6 @@ Table.propTypes = {
 Table.defaultProps = {
   striped: false,
   customClass: '',
-  color: 'light',
   bordered: false,
   hovered: false,
   headerColored: false,

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/tabs/DropdownItems.js

@@ -0,0 +1,84 @@
+"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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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 dropdownPanels = _ref.dropdownPanels,
+      handlerRemovePanel = _ref.handlerRemovePanel,
+      tabMenuSize = _ref.tabMenuSize,
+      handlerClick = _ref.handlerClick;
+  return dropdownPanels.length > 0 && /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
+    dropdown: true,
+    dropdownAlign: "right",
+    transparent: true,
+    boxShadow: false,
+    size: "large",
+    customClass: "dropdownbutton"
+  }, /*#__PURE__*/_react["default"].createElement(_list["default"], {
+    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;
+    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 handlerClick(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() {
+        handlerRemovePanel(id, index, true);
+      }
+    })));
+  })));
+};
+
+DropdownItems.propTypes = {
+  dropdownPanels: _propTypes["default"].arrayOf(_propTypes["default"].element).isRequired,
+  handlerClick: _propTypes["default"].func.isRequired,
+  handlerRemovePanel: _propTypes["default"].func,
+  tabMenuSize: _propTypes["default"].string
+};
+DropdownItems.defaultProps = {
+  handlerRemovePanel: null,
+  tabMenuSize: 'medium'
+};
+var _default = DropdownItems;
+exports["default"] = _default;