linear-react-components-ui 0.4.76-beta.3 → 0.4.76-beta.32

package/lib/inputs/select/helper.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getFilteredMultipleDataCombo = exports.getFilteredSimpleDataCombo = exports.getDropdownItemCssClass = exports.contentClass = void 0;
+exports.returnDropdownDynamicStyles = exports.getFilteredMultipleDataCombo = exports.getFilteredSimpleDataCombo = exports.getDropdownItemCssClass = exports.contentClass = void 0;
 
 var contentClass = function contentClass(props) {
   return "content ".concat(props.showClearButton ? '' : 'noclear');
@@ -42,4 +42,67 @@ var getFilteredMultipleDataCombo = function getFilteredMultipleDataCombo(_ref2)
   });
 };
 
-exports.getFilteredMultipleDataCombo = getFilteredMultipleDataCombo;
+exports.getFilteredMultipleDataCombo = getFilteredMultipleDataCombo;
+
+var returnDropdownPosition = function returnDropdownPosition(_ref3) {
+  var selectFieldRects = _ref3.selectFieldRects,
+      dropdownRef = _ref3.dropdownRef,
+      dropdownRects = _ref3.dropdownRects;
+  var aboveDropdown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var DEFAULT_MARGIN_BOTTOM = 10;
+
+  if (aboveDropdown) {
+    return selectFieldRects.top + window.scrollY - (dropdownRef.current && dropdownRects.height) - DEFAULT_MARGIN_BOTTOM;
+  }
+
+  return selectFieldRects.top + window.scrollY + selectFieldRects.height;
+};
+
+var returnDropdownDynamicStyles = function returnDropdownDynamicStyles(_ref4) {
+  var selectFieldRef = _ref4.selectFieldRef,
+      dropdownMaxHeight = _ref4.dropdownMaxHeight,
+      dropdownRef = _ref4.dropdownRef;
+  var selectFieldRects = selectFieldRef.current.getBoundingClientRect();
+  var dropdownRects = dropdownRef.current && dropdownRef.current.getBoundingClientRect();
+  var dropdownBottomDistance = window.innerHeight - selectFieldRects.bottom;
+  var bottomOffset = 30;
+  var maxDropdownBottomDistance = 200;
+  var height = dropdownMaxHeight;
+  var dropdownPosition;
+
+  if (!height || height <= 0) {
+    if (dropdownBottomDistance < maxDropdownBottomDistance) {
+      height = selectFieldRects.top;
+      dropdownPosition = returnDropdownPosition({
+        selectFieldRects: selectFieldRects,
+        dropdownRef: dropdownRef,
+        dropdownRects: dropdownRects
+      }, true);
+    } else {
+      height = dropdownBottomDistance;
+      dropdownPosition = returnDropdownPosition({
+        selectFieldRects: selectFieldRects
+      });
+    }
+  } else {
+    maxDropdownBottomDistance = height;
+
+    if (dropdownBottomDistance < maxDropdownBottomDistance) {
+      dropdownPosition = returnDropdownPosition({
+        selectFieldRects: selectFieldRects,
+        dropdownRef: dropdownRef,
+        dropdownRects: dropdownRects
+      }, true);
+    } else {
+      dropdownPosition = returnDropdownPosition(selectFieldRects);
+    }
+  }
+
+  return {
+    maxHeight: height - bottomOffset,
+    top: dropdownPosition,
+    left: selectFieldRects.left
+  };
+};
+
+exports.returnDropdownDynamicStyles = returnDropdownDynamicStyles;

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

@@ -83,6 +83,7 @@ var MultipleSelect = /*#__PURE__*/function (_Component) {
 
     _this.componentId = "select-component".concat(_uuid["default"].v1());
     _this.componentRef = /*#__PURE__*/_react["default"].createRef();
+    _this.dropdownRef = /*#__PURE__*/_react["default"].createRef();
     _this.state = {
       valueFromProps: null,
       dataCombo: props.dataSource,
@@ -142,10 +143,11 @@ var MultipleSelect = /*#__PURE__*/function (_Component) {
   }, {
     key: "onClickOutside",
     value: function onClickOutside(event) {
-      var selectWrapper = this.selectWrapper;
+      var selectWrapper = this.selectWrapper,
+          dropdownRef = this.dropdownRef;
       var target = event.target;
 
-      if (target !== selectWrapper && !selectWrapper.contains(target)) {
+      if (target !== selectWrapper && !selectWrapper.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
         this.setState({
           opened: false
         });
@@ -363,6 +365,7 @@ var MultipleSelect = /*#__PURE__*/function (_Component) {
         handleOnUnselect: this.onUnselect
       }))), opened && /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], _extends({}, this.state, this.props, {
         selectFieldRef: this.componentRef,
+        dropdownRef: this.dropdownRef,
         gridWrapperStyle: gridLayout ? window.getComputedStyle(this.gridEl) : undefined,
         handleOnSelect: this.onSelect,
         handleOnFilter: this.onFilter,
@@ -397,7 +400,7 @@ Object.defineProperty(MultipleSelect, "getDerivedStateFromProps", {
       var dataCombo = remoteSearch ? dataSource : (0, _helper.getFilteredMultipleDataCombo)(_extends({}, props, state));
       return {
         dataCombo: dataCombo,
-        selected: dataSource.length > 0 && remoteSearch ? dataSource[0] : null
+        selected: dataCombo.length > 0 ? dataCombo[0] : null
       };
     }
 

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

@@ -78,6 +78,7 @@ var SimpleSelect = /*#__PURE__*/function (_Component) {
       onDenied: undefined,
       isTyping: false
     };
+    _this.dropdownRef = /*#__PURE__*/_react["default"].createRef();
     _this.componentId = "select-component".concat(_uuid["default"].v1());
     _this.componentRef = /*#__PURE__*/_react["default"].createRef();
     return _this;
@@ -152,6 +153,7 @@ var SimpleSelect = /*#__PURE__*/function (_Component) {
         }))
       })), opened && /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], _extends({}, this.state, this.props, {
         selectFieldRef: this.componentRef,
+        dropdownRef: this.dropdownRef,
         gridWrapperStyle: gridLayout ? window.getComputedStyle(this.gridEl) : undefined,
         handleOnSelect: this.onSelect,
         handleOnFilter: this.onFilter,
@@ -172,14 +174,14 @@ Object.defineProperty(SimpleSelect, "getDerivedStateFromProps", {
   value: function value(props, state) {
     var value = props.value,
         dataSource = props.dataSource,
+        descriptionKey = props.descriptionKey,
         idKey = props.idKey,
         selectFirstOnEnter = props.selectFirstOnEnter,
-        descriptionKey = props.descriptionKey,
         remoteSearch = props.remoteSearch,
         undigitable = props.undigitable;
     var current = null;
 
-    if (value !== state.valueFromProps) {
+    if (value !== state.valueFromProps && dataSource.length > 0) {
       if (value !== null) {
         current = dataSource.find(function (i) {
           return i[idKey].toString().toLowerCase() === value.toString().toLowerCase();
@@ -227,10 +229,11 @@ var _initialiseProps = function _initialiseProps() {
     enumerable: true,
     writable: true,
     value: function value(event) {
-      var selectWrapper = _this3.selectWrapper;
+      var selectWrapper = _this3.selectWrapper,
+          dropdownRef = _this3.dropdownRef;
       var target = event.target;
 
-      if (target !== selectWrapper && !selectWrapper.contains(target)) {
+      if (target !== selectWrapper && !selectWrapper.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
         _this3.setState({
           opened: false
         });

package/lib/internals/withTooltip.js

@@ -73,10 +73,11 @@ var withTooltip = function withTooltip(WrappedComponent) {
         tooltipDimensions = _useState8[0],
         setTooltipDimensions = _useState8[1];
 
-    var targetElement = (0, _react.useRef)();
+    var targetElement = (0, _react.useRef)(null);
+    var tooltipElement = (0, _react.useRef)(null);
 
     var onMouseOver = function onMouseOver(e) {
-      if (targetElement.current.contains(e.target)) {
+      if (targetElement && targetElement.current && targetElement.current.contains(e.target)) {
         setShowTooltip(true);
       } else setShowTooltip(false);
     };
@@ -111,14 +112,15 @@ var withTooltip = function withTooltip(WrappedComponent) {
       };
     }, []);
     (0, _react.useEffect)(function () {
-      if (targetElement.current) {
+      if (targetElement.current && tooltipElement.current) {
         var width = tooltipDimensions.width,
             height = tooltipDimensions.height;
         var targetDimensions = targetElement.current.getBoundingClientRect();
         var targetVerticalCenter = (targetDimensions.top + targetDimensions.bottom) / 2;
-        var style = "width: ".concat(width, "px");
-        var left = targetDimensions.left + targetDimensions.width / 2 - width / 2;
-        left = Math.min(left, document.body.clientWidth - width - space);
+        var tooltipClientWidth = tooltipElement.current.clientWidth;
+        var style = "width: ".concat(typeof width === 'string' ? width : "".concat(width, "px"));
+        var left = targetDimensions.left + targetDimensions.width / 2 - tooltipClientWidth / 2;
+        left = Math.min(left, document.body.clientWidth - tooltipClientWidth - space);
         style += "; left: ".concat(Math.max(space, left), "px");
 
         switch (tooltipPosition) {
@@ -141,17 +143,17 @@ var withTooltip = function withTooltip(WrappedComponent) {
             break;
 
           case 'left':
-            if (targetDimensions.left < width) {
+            if (targetDimensions.left < tooltipClientWidth) {
               setTooltipPosition('right');
             } else {
               style += "; top: ".concat(targetVerticalCenter + window.scrollY - height / 2, "px");
-              style += "; left: ".concat(targetDimensions.left - width - 6, "px");
+              style += "; left: ".concat(targetDimensions.left - tooltipClientWidth - 6, "px");
             }
 
             break;
 
           case 'right':
-            if (window.innerWidth - targetDimensions.right < width) {
+            if (window.innerWidth - targetDimensions.right < tooltipClientWidth) {
               setTooltipPosition('left');
             } else {
               style += "; top: ".concat(targetVerticalCenter + window.scrollY - height / 2, "px");
@@ -166,7 +168,7 @@ var withTooltip = function withTooltip(WrappedComponent) {
 
         setTooltipStyle(style);
       }
-    }, [tooltipDimensions, targetElement.current, tooltipPosition]);
+    }, [tooltipDimensions, tooltipElement.current, targetElement.current, tooltipPosition]);
     (0, _react.useEffect)(function () {
       setTooltipPosition(props.tooltipPosition);
     }, [window.scrollY, window.scrollX, window.innerWidth]);
@@ -175,6 +177,7 @@ var withTooltip = function withTooltip(WrappedComponent) {
       if (tooltip) {
         return /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
           text: tooltip,
+          tooltipRef: tooltipElement,
           style: tooltipStyle,
           className: tooltipPosition,
           tooltipDimensions: tooltipDimensions,
@@ -202,7 +205,7 @@ var withTooltip = function withTooltip(WrappedComponent) {
     tooltipPosition: _propTypes["default"].string
   };
   EnhancedComponent.defaultProps = {
-    tooltipWidth: undefined,
+    tooltipWidth: 'auto',
     space: 20,
     tooltip: '',
     tooltipPosition: 'bottom'

package/lib/labels/DefaultLabel.js

@@ -48,7 +48,8 @@ var DefaultLabel = function DefaultLabel(props) {
       size = props.size,
       iconAlign = props.iconAlign,
       bordered = props.bordered,
-      permissionAttr = props.permissionAttr;
+      permissionAttr = props.permissionAttr,
+      skeletonize = props.skeletonize;
   var options = [_permissionValidations.OPTIONS_ON_DENIED.unvisible];
 
   var _useState = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(permissionAttr, options)),
@@ -56,7 +57,7 @@ var DefaultLabel = function DefaultLabel(props) {
       onDenied = _useState2[0];
 
   var getClass = function getClass() {
-    return "label-component ".concat(className, " ").concat(customClass, " ").concat(bordered && '-bordered', " ").concat(disabled && '-disabled', " \n    ").concat(size && "-".concat(size), "\n    ").concat(iconAlign && "icon-".concat(iconAlign));
+    return "label-component ".concat(className, " ").concat(customClass, " ").concat(bordered ? '-bordered' : '', " ").concat(disabled ? '-disabled' : '', "\n    ").concat(skeletonize ? '-skeletonized' : '', "\n    ").concat(size ? "-".concat(size) : '', "\n    ").concat(iconAlign ? "icon-".concat(iconAlign) : '');
   };
 
   var getIcon = function getIcon() {
@@ -94,7 +95,8 @@ DefaultLabel.defaultProps = {
   style: {},
   visible: true,
   disabled: false,
-  permissionAttr: undefined
+  permissionAttr: undefined,
+  skeletonize: false
 };
 DefaultLabel.propTypes = {
   customClass: _propTypes["default"].string,
@@ -109,7 +111,8 @@ DefaultLabel.propTypes = {
   style: _propTypes["default"].object,
   visible: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool,
-  permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)])
+  permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
+  skeletonize: _propTypes["default"].bool
 };
 
 var _default = (0, _withTooltip["default"])(DefaultLabel);

package/lib/menus/sidenav/NavMenuItem.js

@@ -134,8 +134,8 @@ NavMenuItem.propTypes = {
   url: _propTypes["default"].string,
   customClass: _propTypes["default"].string,
   permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
-  minWidth: _propTypes["default"].oneOf([_propTypes["default"].string, _propTypes["default"].number]),
-  maxWidth: _propTypes["default"].oneOf([_propTypes["default"].string, _propTypes["default"].number]),
+  minWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  maxWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   columnsQtty: _propTypes["default"].number
 };
 NavMenuItem.defaultProps = {

package/lib/radio/index.js

@@ -50,7 +50,8 @@ var Radio = function Radio(props) {
       _onChange = props.onChange,
       id = props.id,
       checked = props.checked,
-      permissionAttr = props.permissionAttr;
+      permissionAttr = props.permissionAttr,
+      skeletonize = props.skeletonize;
 
   var _useState = (0, _react.useState)(checked),
       _useState2 = _slicedToArray(_useState, 2),
@@ -68,7 +69,7 @@ var Radio = function Radio(props) {
   }, [checked]);
 
   var shouldDisable = function shouldDisable() {
-    return disabled || onDenied.disabled;
+    return disabled || onDenied.disabled || skeletonize;
   };
 
   var getCustomProps = function getCustomProps() {
@@ -96,7 +97,7 @@ var Radio = function Radio(props) {
 
   if (onDenied.unvisible) return null;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "radio-button ".concat(disabled)
+    className: "radio-button ".concat(disabled ? 'disabled' : '', " ").concat(skeletonize ? '-skeletonized' : '')
   }, /*#__PURE__*/_react["default"].createElement("input", _extends({}, getCustomProps(), {
     className: "radio-component",
     type: "radio",
@@ -108,7 +109,7 @@ var Radio = function Radio(props) {
   })), /*#__PURE__*/_react["default"].createElement("label", {
     className: "description",
     htmlFor: id
-  }, label));
+  }, /*#__PURE__*/_react["default"].createElement("span", null, label)));
 };
 
 Radio.propTypes = {
@@ -121,7 +122,8 @@ Radio.propTypes = {
   required: _propTypes["default"].bool,
   onChange: _propTypes["default"].func,
   checked: _propTypes["default"].bool,
-  permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)])
+  permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
+  skeletonize: _propTypes["default"].bool
 };
 Radio.defaultProps = {
   label: null,
@@ -132,7 +134,8 @@ Radio.defaultProps = {
   value: undefined,
   checked: undefined,
   id: undefined,
-  permissionAttr: undefined
+  permissionAttr: undefined,
+  skeletonize: false
 };
 var _default = Radio;
 exports["default"] = _default;

package/lib/skeleton/SkeletonContainer.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var SkeletonContainer = function SkeletonContainer(_ref) {
+  var children = _ref.children,
+      row = _ref.row,
+      customClass = _ref.customClass,
+      style = _ref.style;
+
+  var getClass = function getClass() {
+    return "skeletoncontainer-component ".concat(customClass, "\n    ").concat(row && '-row');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: getClass(),
+    style: style
+  }, children);
+};
+
+SkeletonContainer.propTypes = {
+  children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].arrayOf(_propTypes["default"].element)]).isRequired,
+  row: _propTypes["default"].bool,
+  customClass: _propTypes["default"].string,
+  style: _propTypes["default"].object
+};
+SkeletonContainer.defaultProps = {
+  row: false,
+  customClass: undefined,
+  style: null
+};
+var _default = SkeletonContainer;
+exports["default"] = _default;

package/lib/skeleton/index.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SkeletonContainer", {
+  enumerable: true,
+  get: function get() {
+    return _SkeletonContainer["default"];
+  }
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _gridlayout = _interopRequireDefault(require("../gridlayout"));
+
+var _SkeletonContainer = _interopRequireDefault(require("./SkeletonContainer"));
+
+require("../assets/styles/skeleton.scss");
+
+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 Skeleton = function Skeleton(props) {
+  var customClass = props.customClass,
+      style = props.style,
+      width = props.width,
+      height = props.height,
+      round = props.round,
+      color = props.color,
+      size = props.size,
+      gridLayout = props.gridLayout;
+  var customStyles = {
+    width: width,
+    height: height
+  };
+
+  var getClass = function getClass() {
+    return "skeleton-component ".concat(customClass, "\n    ").concat(color && "-".concat(color), "\n    ").concat(round && '-round', "\n    ").concat(round && size && "-".concat(size));
+  };
+
+  var renderContent = function renderContent() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: getClass(),
+      style: _extends({}, customStyles, style)
+    });
+  };
+
+  if (gridLayout !== undefined) {
+    return /*#__PURE__*/_react["default"].createElement(_gridlayout["default"], {
+      customClass: "-withskeleton",
+      cols: gridLayout
+    }, renderContent());
+  }
+
+  return renderContent();
+};
+
+Skeleton.propTypes = {
+  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  round: _propTypes["default"].bool,
+  size: _propTypes["default"].oneOf(['mini', 'small', 'medium', 'large']),
+  color: _propTypes["default"].oneOf(['default', 'white']),
+  gridLayout: _propTypes["default"].string,
+  customClass: _propTypes["default"].string,
+  style: _propTypes["default"].object
+};
+Skeleton.defaultProps = {
+  width: undefined,
+  height: undefined,
+  round: false,
+  size: 'medium',
+  color: 'default',
+  gridLayout: undefined,
+  customClass: '',
+  style: null
+};
+var _default = Skeleton;
+exports["default"] = _default;

package/lib/table/Body.js

@@ -11,7 +11,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _helpers = _interopRequireDefault(require("./helpers"));
+var _helpers = _interopRequireWildcard(require("./helpers"));
+
+var _skeleton = _interopRequireDefault(require("../skeleton"));
+
+var _index = require("./index");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -19,27 +23,65 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-var TableBody = function TableBody(_ref) {
+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 renderChildren = function renderChildren(_ref) {
   var children = _ref.children,
-      customClass = _ref.customClass;
+      columnsCount = _ref.columnsCount,
+      vertical = _ref.vertical,
+      skeletonize = _ref.skeletonize,
+      skeletonInRows = _ref.skeletonInRows,
+      skeletonHeight = _ref.skeletonHeight;
 
-  var _useContext = (0, _react.useContext)(_helpers["default"]),
-      bodyScrollable = _useContext.bodyScrollable,
-      bodyContainerRef = _useContext.bodyContainerRef;
+  if (skeletonize && !vertical && columnsCount) {
+    var rows = (0, _helpers.getArrayFromNumber)(skeletonInRows);
+    var columns = (0, _helpers.getArrayFromNumber)(columnsCount);
+    var skeletonChildrens = rows.map(function (index) {
+      return /*#__PURE__*/_react["default"].createElement(_index.TRow, {
+        key: index
+      }, columns.map(function (id) {
+        return /*#__PURE__*/_react["default"].createElement(_index.Td, {
+          key: id
+        }, /*#__PURE__*/_react["default"].createElement(_skeleton["default"], {
+          height: skeletonHeight,
+          customClass: "rowskeleton"
+        }));
+      }));
+    });
+    return skeletonChildrens;
+  }
+
+  return children;
+};
 
+var TableBody = function TableBody(_ref2) {
+  var children = _ref2.children,
+      customClass = _ref2.customClass;
+  var context = (0, _react.useContext)(_helpers["default"]);
+  var bodyScrollable = context.bodyScrollable,
+      bodyContainerRef = context.bodyContainerRef,
+      skeletonize = context.skeletonize,
+      skeletonInRows = context.skeletonInRows,
+      strict = context.strict,
+      vertical = context.vertical;
   return bodyScrollable ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "bodycontainer",
     ref: bodyContainerRef
   }, /*#__PURE__*/_react["default"].createElement("table", {
     className: "innertable",
     style: {
-      tableLayout: 'fixed'
+      tableLayout: 'fixed',
+      contain: strict ? 'strict' : 'size layout style'
     }
   }, /*#__PURE__*/_react["default"].createElement("tbody", {
-    className: "tbody ".concat(customClass)
-  }, children))) : /*#__PURE__*/_react["default"].createElement("tbody", {
-    className: "tbody ".concat(customClass)
-  }, children);
+    className: "tbody ".concat(skeletonize && !vertical && skeletonInRows ? 'skeleton-transparency' : '', " ").concat(customClass)
+  }, renderChildren(_extends({}, context, {
+    children: children
+  }))))) : /*#__PURE__*/_react["default"].createElement("tbody", {
+    className: "tbody ".concat(skeletonize && !vertical && skeletonInRows ? 'skeleton-transparency' : '', " ").concat(customClass)
+  }, renderChildren(_extends({}, context, {
+    children: children
+  })));
 };
 
 TableBody.propTypes = {

package/lib/table/Header.js

@@ -41,6 +41,15 @@ var getColumnsWidth = function getColumnsWidth(children) {
   return columnsWidth;
 };
 
+var getColumnsCount = function getColumnsCount(children) {
+  if (_lodash["default"].isArray(children) && children.length > 0 && children[0].props) {
+    return children[0].props.children.length;
+  }
+
+  if (children && children.props) return children.props.children.length;
+  return undefined;
+};
+
 var Header = function Header(_ref) {
   var customClass = _ref.customClass,
       children = _ref.children;
@@ -48,10 +57,12 @@ var Header = function Header(_ref) {
   var _useContext = (0, _react.useContext)(_helpers["default"]),
       bodyScrollWidth = _useContext.bodyScrollWidth,
       bodyScrollable = _useContext.bodyScrollable,
-      handlerSetColumnsWidth = _useContext.handlerSetColumnsWidth;
+      handlerSetColumnsWidth = _useContext.handlerSetColumnsWidth,
+      handlerSetColumnsCount = _useContext.handlerSetColumnsCount;
 
   (0, _react.useEffect)(function () {
     handlerSetColumnsWidth(getColumnsWidth(children));
+    handlerSetColumnsCount(getColumnsCount(children));
   }, []);
   return bodyScrollable ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "headercontainer",

package/lib/table/HeaderColumn.js

@@ -1,26 +1,49 @@
 "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 _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _skeleton = _interopRequireDefault(require("../skeleton"));
+
+var _helpers = _interopRequireDefault(require("./helpers"));
+
 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; }
+
 var HeaderColumn = function HeaderColumn(_ref) {
   var customClass = _ref.customClass,
       style = _ref.style,
       children = _ref.children,
       textAlign = _ref.textAlign,
       visible = _ref.visible;
-  return visible ? /*#__PURE__*/_react["default"].createElement("th", {
+
+  var _useContext = (0, _react.useContext)(_helpers["default"]),
+      skeletonize = _useContext.skeletonize,
+      vertical = _useContext.vertical,
+      skeletonInHeader = _useContext.skeletonInHeader,
+      skeletonInRows = _useContext.skeletonInRows;
+
+  if (!visible) return null;
+  return /*#__PURE__*/_react["default"].createElement("th", {
     className: "headercolumn ".concat(customClass, " text-align-").concat(textAlign),
     style: style
-  }, children) : null;
+  }, skeletonize && (skeletonInHeader || !skeletonInRows) && !vertical ? /*#__PURE__*/_react["default"].createElement(_skeleton["default"], {
+    height: style.height ? null : 16,
+    style: {
+      marginBottom: 0
+    }
+  }) : children);
 };
 
 HeaderColumn.propTypes = {