linear-react-components-ui 0.4.75-beta.12 → 0.4.75-beta.13

package/lib/radio/radio.spec.js

@@ -0,0 +1,189 @@
+"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 = _interopRequireWildcard(require("react"));
+
+require("babel-polyfill");
+
+var _ = _interopRequireDefault(require("."));
+
+var _storageMock = _interopRequireWildcard(require("../../../config/jest/storageMock"));
+
+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 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 radioMockRender = function radioMockRender(props) {
+  return /*#__PURE__*/_react2["default"].createElement(_react2.Fragment, null, /*#__PURE__*/_react2["default"].createElement(_["default"], _extends({
+    name: "test",
+    label: "C#",
+    value: "5",
+    id: "c#-lang"
+  }, props)), /*#__PURE__*/_react2["default"].createElement(_["default"], {
+    name: "test",
+    label: "RUBY",
+    value: "6",
+    id: "ruby-lang"
+  }), /*#__PURE__*/_react2["default"].createElement(_["default"], {
+    name: "test",
+    label: "JAVA",
+    value: "7",
+    id: "java-lang"
+  }), /*#__PURE__*/_react2["default"].createElement(_["default"], {
+    name: "test",
+    label: "Disabled",
+    value: "8",
+    id: "disabled-lang"
+  }));
+};
+
+describe('Radio', function () {
+  describe('Default', function () {
+    it('should render without errors', function () {
+      var _render = (0, _react.render)(radioMockRender()),
+          container = _render.container;
+
+      expect(container.firstChild).toBeTruthy();
+    });
+    it('should render 4 radio buttons', function () {
+      var _render2 = (0, _react.render)(radioMockRender()),
+          container = _render2.container;
+
+      expect(container.querySelectorAll('.radio-button').length).toBe(4);
+    });
+    it('radio element should have a input and label', function () {
+      var _render3 = (0, _react.render)(radioMockRender()),
+          container = _render3.container;
+
+      expect(container.querySelector('.radio-button input')).toBeTruthy();
+      expect(container.querySelector('.radio-button label')).toBeTruthy();
+    });
+    it('should label text match with prop label', function () {
+      var _render4 = (0, _react.render)(radioMockRender()),
+          container = _render4.container;
+
+      expect(container.querySelector('.radio-button label')).toHaveTextContent('C#');
+    });
+    it('should input have type radio', function () {
+      var _render5 = (0, _react.render)(radioMockRender()),
+          container = _render5.container;
+
+      expect(container.querySelector('.radio-button input').type).toBe('radio');
+    });
+    it('should input have id from props', function () {
+      var _render6 = (0, _react.render)(radioMockRender()),
+          container = _render6.container;
+
+      expect(container.querySelector('.radio-button input').id).toBe('c#-lang');
+    });
+    it('should input have name test', function () {
+      var _render7 = (0, _react.render)(radioMockRender()),
+          container = _render7.container;
+
+      expect(container.querySelector('.radio-button input').name).toBe('test');
+    });
+    it('should input have value', function () {
+      var _render8 = (0, _react.render)(radioMockRender()),
+          container = _render8.container;
+
+      expect(container.querySelector('.radio-button input').value).toBe('5');
+    });
+    it('should change checked', function () {
+      var _render9 = (0, _react.render)(radioMockRender()),
+          container = _render9.container;
+
+      expect(container.querySelector('.radio-button input').checked).toEqual(false);
+
+      _react.fireEvent.click(container.querySelector('.radio-button label'));
+
+      expect(container.querySelector('.radio-button input').checked).toEqual(true);
+    });
+    it('should start default Checked', function () {
+      var _render10 = (0, _react.render)(radioMockRender({
+        defaultChecked: true
+      })),
+          container = _render10.container;
+
+      expect(container.querySelector('.radio-button input').checked).toEqual(true);
+    });
+    it('should fire onChange callback', function () {
+      var mockOnClick = jest.fn();
+
+      var _render11 = (0, _react.render)(radioMockRender({
+        onChange: mockOnClick
+      })),
+          container = _render11.container;
+
+      _react.fireEvent.click(container.querySelector('.radio-button label'));
+
+      expect(mockOnClick).toBeCalledTimes(1);
+    });
+    it('should disable', function () {
+      var _render12 = (0, _react.render)(radioMockRender({
+        disabled: true
+      })),
+          container = _render12.container;
+
+      expect(container.querySelector('.radio-button input').checked).toEqual(false);
+
+      _react.fireEvent.click(container.querySelector('.radio-button label'));
+
+      expect(container.querySelector('.radio-button input').checked).toEqual(false);
+    });
+    it('should check permittion', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _render13, container;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              Object.defineProperty(window, 'sessionStorage', {
+                value: (0, _storageMock["default"])()
+              });
+              _render13 = (0, _react.render)(radioMockRender({
+                permissionAttr: (0, _storageMock.permissionAttrMockAuthorized)('disabled')
+              })), container = _render13.container;
+              expect(container.querySelector('.radio-button input')).not.toBeDisabled();
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+    it('should check permission and be unavailable', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var _render14, container;
+
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              Object.defineProperty(window, 'sessionStorage', {
+                value: (0, _storageMock["default"])()
+              });
+              _render14 = (0, _react.render)(radioMockRender({
+                permissionAttr: (0, _storageMock.permissionAttrMockUnauthorized)('disabled')
+              })), container = _render14.container;
+              expect(container.querySelector('.radio-button input')).toBeDisabled();
+
+            case 3:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+  });
+});

package/lib/spinner/SpinnerLoading.js

@@ -15,7 +15,9 @@ var SpinnerLoading = function SpinnerLoading(_ref) {
   var color = _ref.color,
       size = _ref.size;
   return /*#__PURE__*/_react["default"].createElement("svg", {
+    "data-testid": "spinner",
     className: "lds-spinner spinnerloading",
+    fill: color,
     width: size,
     viewBox: "0 0 100 100",
     preserveAspectRatio: "xMidYMid",
@@ -31,8 +33,7 @@ var SpinnerLoading = function SpinnerLoading(_ref) {
     rx: "9.4",
     ry: "4.8",
     width: "6",
-    height: "12",
-    fill: color
+    height: "12"
   }, /*#__PURE__*/_react["default"].createElement("animate", {
     attributeName: "opacity",
     values: "1;0",
@@ -48,8 +49,7 @@ var SpinnerLoading = function SpinnerLoading(_ref) {
     rx: "9.4",
     ry: "4.8",
     width: "6",
-    height: "12",
-    fill: color
+    height: "12"
   }, /*#__PURE__*/_react["default"].createElement("animate", {
     attributeName: "opacity",
     values: "1;0",
@@ -65,8 +65,7 @@ var SpinnerLoading = function SpinnerLoading(_ref) {
     rx: "9.4",
     ry: "4.8",
     width: "6",
-    height: "12",
-    fill: color
+    height: "12"
   }, /*#__PURE__*/_react["default"].createElement("animate", {
     attributeName: "opacity",
     values: "1;0",
@@ -82,8 +81,7 @@ var SpinnerLoading = function SpinnerLoading(_ref) {
     rx: "9.4",
     ry: "4.8",
     width: "6",
-    height: "12",
-    fill: color
+    height: "12"
   }, /*#__PURE__*/_react["default"].createElement("animate", {
     attributeName: "opacity",
     values: "1;0",
@@ -99,8 +97,7 @@ var SpinnerLoading = function SpinnerLoading(_ref) {
     rx: "9.4",
     ry: "4.8",
     width: "6",
-    height: "12",
-    fill: color
+    height: "12"
   }, /*#__PURE__*/_react["default"].createElement("animate", {
     attributeName: "opacity",
     values: "1;0",
@@ -116,8 +113,7 @@ var SpinnerLoading = function SpinnerLoading(_ref) {
     rx: "9.4",
     ry: "4.8",
     width: "6",
-    height: "12",
-    fill: color
+    height: "12"
   }, /*#__PURE__*/_react["default"].createElement("animate", {
     attributeName: "opacity",
     values: "1;0",
@@ -133,8 +129,7 @@ var SpinnerLoading = function SpinnerLoading(_ref) {
     rx: "9.4",
     ry: "4.8",
     width: "6",
-    height: "12",
-    fill: color
+    height: "12"
   }, /*#__PURE__*/_react["default"].createElement("animate", {
     attributeName: "opacity",
     values: "1;0",
@@ -150,8 +145,7 @@ var SpinnerLoading = function SpinnerLoading(_ref) {
     rx: "9.4",
     ry: "4.8",
     width: "6",
-    height: "12",
-    fill: color
+    height: "12"
   }, /*#__PURE__*/_react["default"].createElement("animate", {
     attributeName: "opacity",
     values: "1;0",
@@ -167,8 +161,7 @@ var SpinnerLoading = function SpinnerLoading(_ref) {
     rx: "9.4",
     ry: "4.8",
     width: "6",
-    height: "12",
-    fill: color
+    height: "12"
   }, /*#__PURE__*/_react["default"].createElement("animate", {
     attributeName: "opacity",
     values: "1;0",
@@ -184,8 +177,7 @@ var SpinnerLoading = function SpinnerLoading(_ref) {
     rx: "9.4",
     ry: "4.8",
     width: "6",
-    height: "12",
-    fill: color
+    height: "12"
   }, /*#__PURE__*/_react["default"].createElement("animate", {
     attributeName: "opacity",
     values: "1;0",
@@ -201,8 +193,7 @@ var SpinnerLoading = function SpinnerLoading(_ref) {
     rx: "9.4",
     ry: "4.8",
     width: "6",
-    height: "12",
-    fill: color
+    height: "12"
   }, /*#__PURE__*/_react["default"].createElement("animate", {
     attributeName: "opacity",
     values: "1;0",
@@ -218,8 +209,7 @@ var SpinnerLoading = function SpinnerLoading(_ref) {
     rx: "9.4",
     ry: "4.8",
     width: "6",
-    height: "12",
-    fill: color
+    height: "12"
   }, /*#__PURE__*/_react["default"].createElement("animate", {
     attributeName: "opacity",
     values: "1;0",

package/lib/spinner/spinner.spec.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+require("babel-polyfill");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _react2 = require("@testing-library/react");
+
+var _ = _interopRequireDefault(require("."));
+
+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 mockSpinner = function mockSpinner(props) {
+  return /*#__PURE__*/_react["default"].createElement(_["default"], _extends({
+    customClass: "mockspinner-component",
+    size: "100px",
+    text: "Carregando",
+    style: {
+      marginBottom: '10px'
+    },
+    color: "#f00"
+  }, props));
+};
+
+describe('Spinner Loading', function () {
+  it('should render with delay', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, container;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react2.render)(mockSpinner({
+              delayTime: 500
+            })), container = _render.container;
+            _context.next = 3;
+            return (0, _react2.waitFor)(function () {
+              return _react2.screen.getByTestId('spinner');
+            });
+
+          case 3:
+            expect(container.firstChild).toBeTruthy();
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should render without delay', function () {
+    var _render2 = (0, _react2.render)(mockSpinner({
+      delayTime: 0
+    })),
+        container = _render2.container;
+
+    expect(container.firstChild).toBeTruthy();
+  });
+  it('should render text', function () {
+    var _render3 = (0, _react2.render)(mockSpinner({
+      delayTime: 0
+    })),
+        container = _render3.container;
+
+    expect(container.firstChild).toHaveTextContent('Carregando');
+  });
+  it('should render spinner icon', function () {
+    var _render4 = (0, _react2.render)(mockSpinner({
+      delayTime: 0
+    })),
+        container = _render4.container,
+        getByTestId = _render4.getByTestId;
+
+    expect(container.firstChild).toContainElement(getByTestId('spinner'));
+  });
+  it('should apply custom class', function () {
+    var _render5 = (0, _react2.render)(mockSpinner({
+      delayTime: 0
+    })),
+        container = _render5.container;
+
+    expect(container.firstChild).toHaveClass('mockspinner-component');
+  });
+  it('should apply style', function () {
+    var _render6 = (0, _react2.render)(mockSpinner({
+      delayTime: 0
+    })),
+        container = _render6.container;
+
+    expect(container.firstChild).toHaveStyle('margin-bottom: 10px;');
+  });
+  it('should apply color', function () {
+    var _render7 = (0, _react2.render)(mockSpinner({
+      delayTime: 0
+    })),
+        getByTestId = _render7.getByTestId;
+
+    expect(getByTestId('spinner')).toHaveAttribute('fill', '#f00');
+  });
+  it('should apply height auto', function () {
+    var _render8 = (0, _react2.render)(mockSpinner({
+      delayTime: 0,
+      heightAuto: true
+    })),
+        container = _render8.container;
+
+    expect(container.firstChild).toHaveClass('-heightauto');
+  });
+  it('should apply align center', function () {
+    var _render9 = (0, _react2.render)(mockSpinner({
+      delayTime: 0
+    })),
+        container = _render9.container;
+
+    expect(container.firstChild).toHaveClass('-center');
+  });
+  it('should apply align right', function () {
+    var _render10 = (0, _react2.render)(mockSpinner({
+      delayTime: 0,
+      align: 'right'
+    })),
+        container = _render10.container;
+
+    expect(container.firstChild).toHaveClass('-right');
+  });
+  it('should apply align left', function () {
+    var _render11 = (0, _react2.render)(mockSpinner({
+      delayTime: 0,
+      align: 'left'
+    })),
+        container = _render11.container;
+
+    expect(container.firstChild).toHaveClass('-left');
+  });
+  it('should hide component when visible is false', function () {
+    var _render12 = (0, _react2.render)(mockSpinner({
+      delayTime: 0,
+      visible: false
+    })),
+        container = _render12.container;
+
+    expect(container.firstChild).not.toBeInTheDocument();
+  });
+});

package/lib/split/Split.js

@@ -58,7 +58,8 @@ var Split = function Split(props) {
       secondaryMinSize = props.secondaryMinSize,
       customClass = props.customClass,
       children = props.children,
-      hideSplitSideOnToggleClick = props.hideSplitSideOnToggleClick;
+      hideSplitSideOnToggleClick = props.hideSplitSideOnToggleClick,
+      style = props.style;
 
   var getSecondaryPaneSize = function getSecondaryPaneSize(containerRect, splitterRect, clientPosition, offsetMouse) {
     var totalSize = vertical ? containerRect.height : containerRect.width;
@@ -309,6 +310,7 @@ var Split = function Split(props) {
     value: getChildContext()
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: containerClasses,
+    style: style,
     ref: function ref(r) {
       container.current = r;
     }
@@ -342,6 +344,7 @@ var Split = function Split(props) {
 };
 
 Split.propTypes = {
+  style: _propTypes["default"].object,
   customClass: _propTypes["default"].string,
   vertical: _propTypes["default"].bool,
   percentage: _propTypes["default"].bool,
@@ -357,6 +360,7 @@ Split.propTypes = {
   children: _propTypes["default"].arrayOf(_propTypes["default"].node)
 };
 Split.defaultProps = {
+  style: {},
   customClass: '',
   vertical: false,
   percentage: false,

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: {