@propellerads/table 4.9.0 → 5.0.2

package/dist/table.esm.js

@@ -6,45 +6,25 @@ import styled, { css, keyframes } from 'styled-components';
 import { fontNormal, spacing, gray95, white, black, gray80 } from '@propellerads/stylevariables';
 
 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 _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
-
-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];
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
   }
-
-  return target;
+  return t;
 }
-
-function _taggedTemplateLiteralLoose(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-
-  strings.raw = raw;
-  return strings;
+function _taggedTemplateLiteralLoose(e, t) {
+  return t || (t = e.slice(0)), e.raw = t, e;
 }
 
 var useLoadingState = function useLoadingState(showLoadingState, loading, pageSize, columns, LoadingCellComponent) {
@@ -55,7 +35,6 @@ var useLoadingState = function useLoadingState(showLoadingState, loading, pageSi
           return React.createElement(LoadingCellComponent, null);
         }
       });
-
       return loadingColumn;
     }) : [];
   }, [columns, loading, showLoadingState]);
@@ -63,21 +42,18 @@ var useLoadingState = function useLoadingState(showLoadingState, loading, pageSi
     if (showLoadingState && loading && columns && columns.length > 0) {
       var dataObject = {};
       var dataArray = [];
-
       for (var i = 0; i < columns.length; i += 1) {
         dataObject["empty_" + i] = '';
       }
-
       for (var _i = 0; _i < pageSize; _i += 1) {
         dataArray.push(dataObject);
       }
-
       return dataArray;
     }
-
     return [];
   }, [columns, loading, pageSize, showLoadingState]);
   return {
+    // @ts-ignore
     loadingColumns: loadingColumns,
     loadingData: loadingData
   };
@@ -88,18 +64,15 @@ var TABLE_SHADOW_CLASS_NAME = {
   LEFT: 'shadow_left',
   RIGHT: 'shadow_right'
 };
-
 function changeClassName(tableWrapperNode, newClassNameList) {
   var classList = tableWrapperNode.classList;
   classList.remove(TABLE_SHADOW_CLASS_NAME.LEFT, TABLE_SHADOW_CLASS_NAME.RIGHT);
   classList.add.apply(classList, newClassNameList);
 }
-
 function calculateNewClassNames(tableNode, tableWrapperNode) {
   if (!tableNode || !tableWrapperNode) {
     return;
   }
-
   var tableRect = tableNode.getBoundingClientRect();
   var tableWrapperRect = tableWrapperNode.getBoundingClientRect();
   var newClassName = [];
@@ -107,42 +80,33 @@ function calculateNewClassNames(tableNode, tableWrapperNode) {
   var tableRectRight = Math.floor(tableRect.right);
   var tableWrapperRectLeft = Math.floor(tableWrapperRect.left);
   var tableWrapperRectRight = Math.floor(tableWrapperRect.right);
-
   if (tableRectLeft < tableWrapperRectLeft) {
     newClassName.push(TABLE_SHADOW_CLASS_NAME.LEFT);
   }
-
   if (tableRectRight > tableWrapperRectRight) {
     newClassName.push(TABLE_SHADOW_CLASS_NAME.RIGHT);
   }
-
   changeClassName(tableWrapperNode, newClassName);
 }
-
 var useTableShadow = (function (tableRef, tableWrapperRef) {
   useEffect(function () {
     var _tableRef$current;
-
     var ticking = false;
-
     function onMousewheel() {
       if (ticking) {
         return;
       }
-
       window.requestAnimationFrame(function () {
         calculateNewClassNames(tableRef.current, tableWrapperRef.current);
         ticking = false;
       });
       ticking = true;
     }
-
     calculateNewClassNames(tableRef.current, tableWrapperRef.current);
     tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.addEventListener('mousewheel', onMousewheel);
     window.addEventListener('resize', onMousewheel);
     return function () {
       var _tableRef$current2;
-
       tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.removeEventListener('mousewheel', onMousewheel);
       window.removeEventListener('resize', onMousewheel);
     };
@@ -150,7 +114,6 @@ var useTableShadow = (function (tableRef, tableWrapperRef) {
 });
 
 var FOOTER_PLACEMENT;
-
 (function (FOOTER_PLACEMENT) {
   FOOTER_PLACEMENT["TOP"] = "top";
   FOOTER_PLACEMENT["BOTTOM"] = "bottom";
@@ -161,7 +124,6 @@ var defaultGetter = function defaultGetter(props) {
 };
 var cellGetter = function cellGetter(props, _ref) {
   var _cell$column;
-
   var cell = _ref.cell;
   return _extends({}, props, {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -181,292 +143,108 @@ var getTableProps = function getTableProps(userGetter, getter) {
   if (getter === void 0) {
     getter = defaultGetter;
   }
-
   if (userGetter) {
     return function (props) {
       return _extends({}, getter(props), userGetter(props));
     };
   }
-
   return getter;
 };
 var getTableElementProps = function getTableElementProps(userGetter, getter) {
   if (getter === void 0) {
     getter = defaultGetter;
   }
-
   if (userGetter) {
     return function (props, meta) {
       return _extends({}, getter(props, meta), userGetter(props, meta));
     };
   }
-
   return getter;
 };
 var getTableRowProps = function getTableRowProps(userGetter, getter) {
   if (getter === void 0) {
     getter = defaultGetter;
   }
-
   if (userGetter) {
     return function (props, meta) {
       return _extends({}, getter(props, meta), userGetter(props, meta));
     };
   }
-
   return getter;
 };
 var getTableCellProps = function getTableCellProps(userGetter, getter) {
   if (getter === void 0) {
     getter = defaultGetter;
   }
-
   if (userGetter) {
     return function (props, meta) {
       return _extends({}, getter(props, meta), userGetter(props, meta));
     };
   }
-
   return getter;
 };
 var getTableElementInternalProps = function getTableElementInternalProps(internalProps, userGetter, getter) {
   if (getter === void 0) {
     getter = defaultGetter;
   }
-
   if (userGetter) {
     return function (props, meta) {
       return _extends({}, getter(_extends({}, props, internalProps), meta), userGetter(props, meta));
     };
   }
-
   return function (props, meta) {
     return getter(_extends({}, props, internalProps), meta);
   };
 };
 
-function _templateObject19() {
-  var data = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  position: absolute;\n  right: 5px;\n  top: 0;\n  z-index: 1;\n  touch-action: none;\n  \n  &:after {\n    content: '\u2194';\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n"]);
-
-  _templateObject19 = function _templateObject19() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject18() {
-  var data = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  flex: 1 0 auto;\n  display: flex;\n  flex-direction: column;\n"]);
-
-  _templateObject18 = function _templateObject18() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject17() {
-  var data = _taggedTemplateLiteralLoose(["\n  border-top: 1px solid ", ";\n  margin-top: ", "px;\n  min-width: 100%;\n  width: max-content;\n"]);
-
-  _templateObject17 = function _templateObject17() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject16() {
-  var data = _taggedTemplateLiteralLoose(["\n  padding: 0;\n  -webkit-box-align: center;\n  align-items: center;\n"]);
-
-  _templateObject16 = function _templateObject16() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject15() {
-  var data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: 1 0 auto;\n  box-shadow: inset 0 -1px 0 0 ", ";\n  min-width: 100%;\n  width: max-content;\n"]);
-
-  _templateObject15 = function _templateObject15() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject14() {
-  var data = _taggedTemplateLiteralLoose(["\n  flex: 1 0 auto;\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n  \n  ", ", ", " {\n    padding: 0 4px;\n    line-height: normal;\n    position: relative;\n    transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    color: ", ";\n    font-weight: 500;\n    outline: none;\n  }\n"]);
-
-  _templateObject14 = function _templateObject14() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject13() {
-  var data = _taggedTemplateLiteralLoose(["\n  padding: 0 4px;\n  line-height: normal;\n  position: relative;\n  transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;\n  color: rgb(0, 0, 0);\n  font-weight: 500;\n  outline: none;\n"]);
-
-  _templateObject13 = function _templateObject13() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject12() {
-  var data = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: ", "px;\n  background: linear-gradient(to left, ", ", ", ", ", ");\n  background-size: 200% 200%;\n  animation: ", " 1.6s linear infinite;\n"]);
-
-  _templateObject12 = function _templateObject12() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject11() {
-  var data = _taggedTemplateLiteralLoose(["\n    text-align: ", ""]);
-
-  _templateObject11 = function _templateObject11() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject10() {
-  var data = _taggedTemplateLiteralLoose(["\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    line-height: 1.3rem;\n    padding: 7px 4px;\n    overflow: hidden;\n    transition: width 0.3s ease 0s, min-width, padding, opacity;\n    \n  ", "\n"]);
-
-  _templateObject10 = function _templateObject10() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject9() {
-  var data = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n"]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = _taggedTemplateLiteralLoose(["\n  flex: auto 1;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch; \n  border-collapse: collapse;\n"]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = _taggedTemplateLiteralLoose(["\n  display: block;\n  max-width: 100%;\n  overflow-x: scroll;\n  overflow-y: hidden;\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n  font-size: ", "px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  border: 0;\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n  \n  &::before {\n    bottom: 10px;\n    content: '';\n    opacity: 0;\n    pointer-events: none;\n    position: absolute;\n    width: 10px;\n    height: 100%;\n    top: 0;\n    left: -10px;\n    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);\n    transition: 0.3s opacity;\n  }\n\n  &::after {\n    bottom: 10px;\n    content: '';\n    opacity: 0;\n    pointer-events: none;\n    width: 10px;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    right: -10px;\n    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);\n    transition: 0.3s opacity;\n  }\n  \n  &.shadow_left {\n    &::before {\n      opacity: 1 !important;\n    }\n  }\n  \n  &.shadow_right {\n    &::after {\n      opacity: 1 !important;\n    }\n  }\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: block;\n  text-align: center;\n  width: 100%;\n  top: 50%;\n  left: 0;\n  color: rgba(0, 0, 0, 0.6);\n  transform: translateY(-52%);\n  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n    opacity: 1;\n    z-index: 2;\n    pointer-events: all;\n  "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n    display: block;\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.8);\n    transition: all 0.3s ease;\n    z-index: -1;\n    opacity: 0;\n    pointer-events: none;\n    \n  ", "\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n    from {\n    background-position-x: 0;\n    }\n    50% {\n    background-position-x: 100%;\n    }\n    100% {\n    background-position-x: 0;\n    }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var loadingAnimation = /*#__PURE__*/keyframes( /*#__PURE__*/_templateObject());
-var TableLoading = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject2(), function (props) {
-  return props.isLoading && css(_templateObject3());
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+var loadingAnimation = /*#__PURE__*/keyframes(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    from {\n    background-position-x: 0;\n    }\n    50% {\n    background-position-x: 100%;\n    }\n    100% {\n    background-position-x: 0;\n    }\n"])));
+var TableLoading = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background: rgba(255, 255, 255, 0.8);\n  transition: all 0.3s ease;\n  z-index: -1;\n  opacity: 0;\n  pointer-events: none;\n\n  ", "\n"])), function (props) {
+  return props.isLoading && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      opacity: 1;\n      z-index: 2;\n      pointer-events: all;\n    "])));
 });
-var TableLoadingInner = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject4());
-var TableWrapper = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject5());
-var TableRoot = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject6(), fontNormal);
-var TableContent = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject7());
-var TableCore = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject8());
-var HeadCell = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject9());
-var TD = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject10(), function (_ref) {
+var TableLoadingInner = /*#__PURE__*/styled.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: block;\n  text-align: center;\n  width: 100%;\n  top: 50%;\n  left: 0;\n  color: rgba(0, 0, 0, 0.6);\n  transform: translateY(-52%);\n  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n"])));
+var TableWrapper = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n\n  &::before {\n    bottom: 10px;\n    content: '';\n    opacity: 0;\n    pointer-events: none;\n    position: absolute;\n    width: 10px;\n    height: 100%;\n    top: 0;\n    left: -10px;\n    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);\n    transition: 0.3s opacity;\n  }\n\n  &::after {\n    bottom: 10px;\n    content: '';\n    opacity: 0;\n    pointer-events: none;\n    width: 10px;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    right: -10px;\n    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);\n    transition: 0.3s opacity;\n  }\n\n  &.shadow_left {\n    &::before {\n      opacity: 1 !important;\n    }\n  }\n\n  &.shadow_right {\n    &::after {\n      opacity: 1 !important;\n    }\n  }\n"])));
+var TableRoot = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: ", "px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  border: 0;\n"])), fontNormal);
+var TableContent = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  max-width: 100%;\n  overflow-x: scroll;\n  overflow-y: hidden;\n"])));
+var TableCore = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: auto 1;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  border-collapse: collapse;\n"])));
+var HeadCell = /*#__PURE__*/styled.div(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n"])));
+var TD = /*#__PURE__*/styled.div(_templateObject0 || (_templateObject0 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  line-height: 1.3rem;\n  padding: 7px 4px;\n  overflow: hidden;\n  transition: width 0.3s ease 0s, min-width, padding, opacity;\n\n  ", "\n"])), function (_ref) {
   var align = _ref.align;
-  return align && css(_templateObject11(), align);
+  return align && css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteralLoose(["\n      text-align: ", ";\n    "])), align);
 });
-var EmptyStateCell = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject12(), spacing * 4, gray95, white, gray95, loadingAnimation);
-var TH = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject13());
-var THead = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject14(), TH, TD, black);
-var TRGroup = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject15(), gray95);
-var TR = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject16());
-var TBody = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject17(), gray80, spacing * 2);
-var TFoot = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject18(), gray95);
-var TResizer = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject19());
-
+var EmptyStateCell = /*#__PURE__*/styled.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: ", "px;\n  background: linear-gradient(to left, ", ", ", ", ", ");\n  background-size: 200% 200%;\n  animation: ", " 1.6s linear infinite;\n"])), spacing * 4, gray95, white, gray95, loadingAnimation);
+var TH = /*#__PURE__*/styled.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 4px;\n  line-height: normal;\n  position: relative;\n  transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;\n  color: rgb(0, 0, 0);\n  font-weight: 500;\n  outline: none;\n"])));
+var THead = /*#__PURE__*/styled.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1 0 auto;\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n\n  ", ", ", " {\n    padding: 0 4px;\n    line-height: normal;\n    position: relative;\n    transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    color: ", ";\n    font-weight: 500;\n    outline: none;\n  }\n"])), TH, TD, black);
+var TRGroup = /*#__PURE__*/styled.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: 1 0 auto;\n  box-shadow: inset 0 -1px 0 0 ", ";\n  min-width: 100%;\n  width: max-content;\n"])), gray95);
+var TR = /*#__PURE__*/styled.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  -webkit-box-align: center;\n  align-items: center;\n"])));
+var TBody = /*#__PURE__*/styled.div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-top: 1px solid ", ";\n  margin-top: ", "px;\n  min-width: 100%;\n  width: max-content;\n"])), gray80, spacing * 2);
+var TFoot = /*#__PURE__*/styled.div(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: ", ";\n  flex: 1 0 auto;\n  display: flex;\n  flex-direction: column;\n"])), gray95);
+var TResizer = /*#__PURE__*/styled.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-block;\n  position: absolute;\n  right: 5px;\n  top: 0;\n  z-index: 1;\n  touch-action: none;\n\n  &:after {\n    content: '\u2194';\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n"])));
+
+var _excluded = ["getTableProps", "headerGroups", "footerGroups", "setHiddenColumns", "rows", "prepareRow", "visibleColumns"];
+var TableRoot$1 = TableRoot;
+var TableWrapper$1 = TableWrapper;
+var TableContent$1 = TableContent;
+var HeadCell$1 = HeadCell;
+var TableLoading$1 = TableLoading;
+var TableLoadingInner$1 = TableLoadingInner;
+var TD$1 = TD;
+var TableCore$1 = TableCore;
+var THead$1 = THead;
+var TR$1 = TR;
+var TH$1 = TH;
+var TBody$1 = TBody;
+var TRGroup$1 = TRGroup;
+var TFoot$1 = TFoot;
+var EmptyStateCell$1 = EmptyStateCell;
+var TResizer$1 = TResizer;
 var isEnableRowSelectDefault = function isEnableRowSelectDefault() {
   return true;
 };
-
 var selectColumnPropsDefault = {};
-
 var getRowPrePropsDefault = function getRowPrePropsDefault() {
   return {};
 };
-
 var defaultProps = {
   hasDefaultPagination: false,
   isLoading: false,
@@ -477,7 +255,7 @@ var defaultProps = {
   tableContentId: '',
   showLoadingState: false,
   initialState: {},
-  LoadingCellComponent: EmptyStateCell,
+  LoadingCellComponent: EmptyStateCell$1,
   getRowPreProps: getRowPrePropsDefault,
   isEnableRowSelect: isEnableRowSelectDefault,
   selectColumnProps: selectColumnPropsDefault,
@@ -488,83 +266,73 @@ var disableMultiSort = true;
 var disabledMultiRemove = true;
 var DEFAULT_PAGE_INDEX = 0;
 var DEFAULT_PAGE_SIZE = 10;
-
 function isFunction(reference) {
   return typeof reference === 'function';
 }
-
 function renderResizer(column) {
   if (column.isResizable) {
-    return React.createElement(TResizer, Object.assign({}, column.getResizerProps(), {
+    return React.createElement(TResizer$1, Object.assign({}, column.getResizerProps(), {
       onClick: function onClick(e) {
         e.preventDefault();
         e.stopPropagation();
       }
     }));
   }
-
   return null;
 }
-
 function getHeadContent(column) {
   if (column.isSorted && column.isSortedDesc) {
-    return React.createElement(HeadCell, null, column.render('Header'), React.createElement(ArrowDown, {
+    return React.createElement(HeadCell$1, null, column.render('Header'), React.createElement(ArrowDown, {
       size: SIZE.SMALL,
       color: COLOR.GRAY_DARK
     }));
   }
-
   if (column.isSorted && !column.isSortedDesc) {
-    return React.createElement(HeadCell, null, column.render('Header'), React.createElement(ArrowUp, {
+    return React.createElement(HeadCell$1, null, column.render('Header'), React.createElement(ArrowUp, {
       size: SIZE.SMALL,
       color: COLOR.GRAY_DARK
     }));
   }
-
   return column.render('Header');
 }
-
 var Table = function Table(props) {
   var _controlledPagination;
-
   var columns = props.columns,
-      data = props.data,
-      totalItems = props.totalItems,
-      fetchData = props.fetchData,
-      controlledPagination = props.controlledPagination,
-      initialState = props.initialState,
-      isLoading = props.isLoading,
-      loadingMessage = props.loadingMessage,
-      labelPerPage = props.labelPerPage,
-      footerPlacement = props.footerPlacement,
-      onSortedChange = props.onSortedChange,
-      hasDefaultPagination = props.hasDefaultPagination,
-      onSelectRowsChange = props.onSelectRowsChange,
-      parentElementId = props.parentElementId,
-      tableContentId = props.tableContentId,
-      LoadingCellComponent = props.LoadingCellComponent,
-      PaginationComponent = props.PaginationComponent,
-      getRowPreProps = props.getRowPreProps,
-      getTableProps$1 = props.getTableProps,
-      getHeaderGroupProps = props.getHeaderGroupProps,
-      getHeaderProps = props.getHeaderProps,
-      getRowProps = props.getRowProps,
-      getCellProps = props.getCellProps,
-      getFooterProps = props.getFooterProps,
-      getFooterGroupProps = props.getFooterGroupProps,
-      showLoadingState = props.showLoadingState,
-      noDataMessage = props.noDataMessage,
-      rowSubComponent = props.rowSubComponent,
-      isEnableRowSelect = props.isEnableRowSelect,
-      selectColumnProps = props.selectColumnProps;
+    data = props.data,
+    totalItems = props.totalItems,
+    fetchData = props.fetchData,
+    controlledPagination = props.controlledPagination,
+    initialState = props.initialState,
+    isLoading = props.isLoading,
+    loadingMessage = props.loadingMessage,
+    labelPerPage = props.labelPerPage,
+    footerPlacement = props.footerPlacement,
+    onSortedChange = props.onSortedChange,
+    hasDefaultPagination = props.hasDefaultPagination,
+    onSelectRowsChange = props.onSelectRowsChange,
+    parentElementId = props.parentElementId,
+    tableContentId = props.tableContentId,
+    LoadingCellComponent = props.LoadingCellComponent,
+    PaginationComponent = props.PaginationComponent,
+    getRowPreProps = props.getRowPreProps,
+    getTableProps$1 = props.getTableProps,
+    getHeaderGroupProps = props.getHeaderGroupProps,
+    getHeaderProps = props.getHeaderProps,
+    getRowProps = props.getRowProps,
+    getCellProps = props.getCellProps,
+    getFooterProps = props.getFooterProps,
+    getFooterGroupProps = props.getFooterGroupProps,
+    showLoadingState = props.showLoadingState,
+    noDataMessage = props.noDataMessage,
+    rowSubComponent = props.rowSubComponent,
+    isEnableRowSelect = props.isEnableRowSelect,
+    selectColumnProps = props.selectColumnProps;
   var memoColumns = useMemo(function () {
     return columns;
   }, [columns]);
-
   var _useLoadingState = useLoadingState(showLoadingState, isLoading, (_controlledPagination = controlledPagination === null || controlledPagination === void 0 ? void 0 : controlledPagination.pageSize) !== null && _controlledPagination !== void 0 ? _controlledPagination : DEFAULT_PAGE_SIZE, memoColumns, LoadingCellComponent),
-      loadingColumns = _useLoadingState.loadingColumns,
-      loadingData = _useLoadingState.loadingData;
-
+    loadingColumns = _useLoadingState.loadingColumns,
+    loadingData = _useLoadingState.loadingData;
   var showLoading = showLoadingState && isLoading;
   var hasSelectedRowsAbility = onSelectRowsChange && isFunction(onSelectRowsChange);
   var hasManualSortBy = onSortedChange && isFunction(onSortedChange);
@@ -577,18 +345,14 @@ var Table = function Table(props) {
     disableMultiSort: disableMultiSort,
     disabledMultiRemove: disabledMultiRemove
   };
-
   if (hasManualSortBy) {
     options.manualSortBy = true;
   }
-
   if (hasControlledPagination) {
     var _controlledPagination2, _controlledPagination3;
-
     if (typeof (controlledPagination === null || controlledPagination === void 0 ? void 0 : controlledPagination.pageCount) === 'undefined') {
       throw new Error('You have to pass pageCount in controlledPagination data');
     }
-
     options.initialState = _extends({}, options.initialState, {
       pageIndex: (_controlledPagination2 = controlledPagination.pageIndex) !== null && _controlledPagination2 !== void 0 ? _controlledPagination2 : DEFAULT_PAGE_INDEX,
       pageSize: (_controlledPagination3 = controlledPagination.pageSize) !== null && _controlledPagination3 !== void 0 ? _controlledPagination3 : DEFAULT_PAGE_SIZE
@@ -597,19 +361,17 @@ var Table = function Table(props) {
     options.manualPagination = true;
     options.pageCount = controlledPagination.pageCount;
   }
-
   var useSelect = function useSelect(hooks) {
     if (!hasSelectedRowsAbility) {
       return;
     }
-
     var newColumn = _extends({
       id: 'selection',
       disableSortBy: true,
       Header: function Header(instance) {
         var getToggleAllPageRowsSelectedProps = instance.getToggleAllPageRowsSelectedProps,
-            toggleAllPageRowsSelected = instance.toggleAllPageRowsSelected,
-            page = instance.page;
+          toggleAllPageRowsSelected = instance.toggleAllPageRowsSelected,
+          page = instance.page;
         var isDisabledAllRows = page.map(function (_ref) {
           var original = _ref.original;
           return original;
@@ -624,9 +386,9 @@ var Table = function Table(props) {
       Cell: function Cell(_ref2) {
         var row = _ref2.row;
         var id = row.id,
-            original = row.original,
-            toggleRowSelected = row.toggleRowSelected,
-            getToggleRowSelectedProps = row.getToggleRowSelectedProps;
+          original = row.original,
+          toggleRowSelected = row.toggleRowSelected,
+          getToggleRowSelectedProps = row.getToggleRowSelectedProps;
         var elementId = Number.isInteger(original.id) ? original.id : id;
         var isEnabled = isEnableRowSelect(row.original);
         return React.createElement(Checkbox, {
@@ -637,44 +399,41 @@ var Table = function Table(props) {
         });
       }
     }, selectColumnProps);
-
+    // @ts-ignore
     hooks.visibleColumns.push(function (tableColumns) {
       return [newColumn].concat(tableColumns);
     });
   };
-
   var _useTable = useTable(options, useFlexLayout, useSortBy, useExpanded, usePagination, useRowSelect, useSelect, useResizeColumns),
-      _getTableProps = _useTable.getTableProps,
-      headerGroups = _useTable.headerGroups,
-      footerGroups = _useTable.footerGroups,
-      setHiddenColumns = _useTable.setHiddenColumns,
-      rows = _useTable.rows,
-      prepareRow = _useTable.prepareRow,
-      visibleColumns = _useTable.visibleColumns,
-      rest = _objectWithoutPropertiesLoose(_useTable, ["getTableProps", "headerGroups", "footerGroups", "setHiddenColumns", "rows", "prepareRow", "visibleColumns"]);
-
+    _getTableProps = _useTable.getTableProps,
+    headerGroups = _useTable.headerGroups,
+    footerGroups = _useTable.footerGroups,
+    setHiddenColumns = _useTable.setHiddenColumns,
+    rows = _useTable.rows,
+    prepareRow = _useTable.prepareRow,
+    visibleColumns = _useTable.visibleColumns,
+    rest = _objectWithoutPropertiesLoose(_useTable, _excluded);
   var selectedFlatRows = rest.selectedFlatRows,
-      setSortBy = rest.setSortBy,
-      page = rest.page,
-      canPreviousPage = rest.canPreviousPage,
-      canNextPage = rest.canNextPage,
-      pageCount = rest.pageCount,
-      gotoPage = rest.gotoPage,
-      nextPage = rest.nextPage,
-      previousPage = rest.previousPage,
-      setPageSize = rest.setPageSize,
-      _rest$state = rest.state,
-      selectedRowIds = _rest$state.selectedRowIds,
-      pageIndex = _rest$state.pageIndex,
-      pageSize = _rest$state.pageSize;
+    setSortBy = rest.setSortBy,
+    page = rest.page,
+    canPreviousPage = rest.canPreviousPage,
+    canNextPage = rest.canNextPage,
+    pageCount = rest.pageCount,
+    gotoPage = rest.gotoPage,
+    nextPage = rest.nextPage,
+    previousPage = rest.previousPage,
+    setPageSize = rest.setPageSize,
+    _rest$state = rest.state,
+    selectedRowIds = _rest$state.selectedRowIds,
+    pageIndex = _rest$state.pageIndex,
+    pageSize = _rest$state.pageSize;
   var tableRef = useRef(null);
   var tableWrapperRef = useRef(null);
   useTableShadow(tableRef, tableWrapperRef);
   useEffect(function () {
-    if (!(initialState === null || initialState === void 0 ? void 0 : initialState.hiddenColumns)) {
+    if (!(initialState !== null && initialState !== void 0 && initialState.hiddenColumns)) {
       return;
     }
-
     setHiddenColumns(initialState.hiddenColumns);
   }, [initialState === null || initialState === void 0 ? void 0 : initialState.hiddenColumns]);
   useEffect(function () {
@@ -685,11 +444,9 @@ var Table = function Table(props) {
     }
   }, [selectedRowIds]);
   var pagination = null;
-
   if (hasDefaultPagination && hasControlledPagination) {
     throw new Error('You have to pass either hasDefaultPagination true boolean prop or ' + 'pass fetchData callback and controlledPagination data');
   }
-
   if (hasControlledPagination || hasDefaultPagination) {
     var paginationData = {
       setPageSize: setPageSize,
@@ -705,49 +462,40 @@ var Table = function Table(props) {
       perPage: pageSize,
       totalItems: totalItems !== null && totalItems !== void 0 ? totalItems : data.length
     };
-
     if (hasControlledPagination && controlledPagination) {
       paginationData.canNextPage = controlledPagination.pageIndex + 1 !== paginationData.totalPages;
       paginationData.canPreviousPage = controlledPagination.pageIndex !== 0;
       paginationData.pageIndex = controlledPagination.pageIndex;
       paginationData.perPage = controlledPagination.pageSize;
-
       paginationData.setPageSize = function (newPageSize) {
         fetchData === null || fetchData === void 0 ? void 0 : fetchData({
           pageIndex: paginationData.pageIndex,
           pageSize: newPageSize
         });
       };
-
       paginationData.gotoPage = function (newPageIndex) {
         fetchData === null || fetchData === void 0 ? void 0 : fetchData({
           pageIndex: newPageIndex,
           pageSize: paginationData.perPage
         });
       };
-
       paginationData.nextPageHandler = function () {
         var newPageIndex = paginationData.pageIndex + 1;
         paginationData.gotoPage(newPageIndex);
       };
-
       paginationData.previousPageHandler = function () {
         var newPageIndex = paginationData.pageIndex - 1;
         paginationData.gotoPage(newPageIndex);
       };
-
-      if (controlledPagination === null || controlledPagination === void 0 ? void 0 : controlledPagination.paginationAmount) {
+      if (controlledPagination !== null && controlledPagination !== void 0 && controlledPagination.paginationAmount) {
         paginationData.paginationAmount = controlledPagination.paginationAmount;
       }
     }
-
     pagination = React.createElement(PaginationComponent, Object.assign({}, paginationData));
   }
-
   function extendSortByProps(column) {
     var headerProps = column.getSortByToggleProps && column.getSortByToggleProps();
     headerProps === null || headerProps === void 0 ? true : delete headerProps.style;
-
     if (hasManualSortBy && column.canSort && headerProps) {
       headerProps.onClick = function () {
         onSortedChange === null || onSortedChange === void 0 ? void 0 : onSortedChange(column.id, Boolean(column.isSortedDesc));
@@ -757,71 +505,66 @@ var Table = function Table(props) {
         }]);
       };
     }
-
     return headerProps;
   }
-
   var tBodyTr = hasControlledPagination || hasDefaultPagination ? page : rows;
-  return React.createElement(TableRoot, {
+  return React.createElement(TableRoot$1, {
     className: "table-root"
-  }, React.createElement(TableLoading, {
+  }, React.createElement(TableLoading$1, {
     isLoading: !showLoadingState && isLoading,
     className: "table-loading"
-  }, React.createElement(TableLoadingInner, null, loadingMessage)), React.createElement(TableWrapper, {
+  }, React.createElement(TableLoadingInner$1, null, loadingMessage)), React.createElement(TableWrapper$1, {
     ref: tableWrapperRef,
     className: "table-wrapper"
-  }, React.createElement(TableContent, {
+  }, React.createElement(TableContent$1, {
     id: tableContentId,
     className: "table-content"
-  }, React.createElement(TableCore, Object.assign({}, _getTableProps(getTableProps(getTableProps$1)), {
+  }, React.createElement(TableCore$1, Object.assign({}, _getTableProps(getTableProps(getTableProps$1)), {
     ref: tableRef
-  }), React.createElement(THead, {
+  }), React.createElement(THead$1, {
     className: "table-head",
     "data-role": "table-head"
   }, headerGroups.map(function (headerGroup) {
-    return React.createElement(TR, Object.assign({}, headerGroup.getHeaderGroupProps(getTableElementProps(getHeaderGroupProps))), headerGroup.headers.map(function (column) {
+    return React.createElement(TR$1, Object.assign({}, headerGroup.getHeaderGroupProps(getTableElementProps(getHeaderGroupProps))), headerGroup.headers.map(function (column) {
       var headerProps = extendSortByProps(column);
-      return React.createElement(TH, Object.assign({}, column.getHeaderProps(getTableElementInternalProps(headerProps, getHeaderProps, mainCellGetter))), getHeadContent(column), renderResizer(column));
+      return React.createElement(TH$1, Object.assign({}, column.getHeaderProps(getTableElementInternalProps(headerProps, getHeaderProps, mainCellGetter))), getHeadContent(column), renderResizer(column));
     }));
-  })), footerPlacement.includes(FOOTER_PLACEMENT.TOP) && React.createElement(TFoot, {
+  })), footerPlacement.includes(FOOTER_PLACEMENT.TOP) && React.createElement(TFoot$1, {
     className: "table-footer-top",
     "data-role": "table-footer-top"
   }, footerGroups.map(function (group) {
-    return React.createElement(TR, Object.assign({}, group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))), group.headers.map(function (column) {
-      return React.createElement(TD, Object.assign({}, column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter))), column.render('Footer'));
+    return React.createElement(TR$1, Object.assign({}, group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))), group.headers.map(function (column) {
+      return React.createElement(TD$1, Object.assign({}, column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter))), column.render('Footer'));
     }));
-  })), React.createElement(TBody, {
+  })), React.createElement(TBody$1, {
     className: "table-body",
     "data-role": "table-body"
   }, tBodyTr.map(function (row) {
     prepareRow(row);
-
     var _getRowPreProps = getRowPreProps(row),
-        isDelimiterTd = _getRowPreProps.isDelimiterTd;
-
+      isDelimiterTd = _getRowPreProps.isDelimiterTd;
     if (isDelimiterTd) {
+      var cell = row.cells[0].render('Cell');
       return React.createElement(React.Fragment, {
         key: "group_" + row.index
-      }, React.createElement(TRGroup, null, React.createElement(TR, Object.assign({}, row.getRowProps(getTableRowProps(getRowProps))), React.createElement(TD, Object.assign({
+      }, React.createElement(TRGroup$1, null, React.createElement(TR$1, Object.assign({}, row.getRowProps(getTableRowProps(getRowProps))), React.createElement(TD$1, Object.assign({
         colSpan: visibleColumns.length
-      }, row.cells[0].getCellProps(getTableCellProps(getCellProps, cellGetter))), React.createElement("strong", null, row.cells[0].render('Cell'))))), (row === null || row === void 0 ? void 0 : row.isExpanded) && rowSubComponent && rowSubComponent(row));
+      }, row.cells[0].getCellProps(getTableCellProps(getCellProps, cellGetter))), React.createElement("strong", null, cell)))), (row === null || row === void 0 ? void 0 : row.isExpanded) && rowSubComponent && rowSubComponent(row));
     }
-
     return React.createElement(React.Fragment, {
       key: "group_" + row.index
-    }, React.createElement(TRGroup, null, React.createElement(TR, Object.assign({}, row.getRowProps(getTableRowProps(getRowProps))), row.cells.map(function (cell) {
-      return React.createElement(TD, Object.assign({}, cell.getCellProps(getTableCellProps(getCellProps, cellGetter))), cell.render('Cell'));
+    }, React.createElement(TRGroup$1, null, React.createElement(TR$1, Object.assign({}, row.getRowProps(getTableRowProps(getRowProps))), row.cells.map(function (cell) {
+      return React.createElement(TD$1, Object.assign({}, cell.getCellProps(getTableCellProps(getCellProps, cellGetter))), cell.render('Cell'));
     }))), (row === null || row === void 0 ? void 0 : row.isExpanded) && rowSubComponent && rowSubComponent(row));
-  })), footerPlacement.includes(FOOTER_PLACEMENT.BOTTOM) && React.createElement(TFoot, {
+  })), footerPlacement.includes(FOOTER_PLACEMENT.BOTTOM) && React.createElement(TFoot$1, {
     className: "table-footer-bottom",
     "data-role": "table-footer-bottom"
   }, footerGroups.map(function (group) {
-    return React.createElement(TR, Object.assign({}, group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))), group.headers.map(function (column) {
-      return React.createElement(TD, Object.assign({}, column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter))), column.render('Footer'));
+    return React.createElement(TR$1, Object.assign({}, group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))), group.headers.map(function (column) {
+      return React.createElement(TD$1, Object.assign({}, column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter))), column.render('Footer'));
     }));
   }))))), !isLoading && !data.length && noDataMessage, pagination);
 };
-
 Table.defaultProps = defaultProps;
 
 export { Table, defaultProps };