@commercetools-uikit/data-table 15.15.0 → 15.15.1

package/dist/commercetools-uikit-data-table.cjs.prod.js

@@ -3,10 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
-var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArray');
 require('prop-types');
 var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
-var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
@@ -30,11 +28,11 @@ var _Number$isNaN = require('@babel/runtime-corejs3/core-js-stable/number/is-nan
 var _parseInt = require('@babel/runtime-corejs3/core-js-stable/parse-int');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
 var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
-var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
@@ -50,8 +48,9 @@ var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
 var _Number$isNaN__default = /*#__PURE__*/_interopDefault(_Number$isNaN);
 var _parseInt__default = /*#__PURE__*/_interopDefault(_parseInt);
 var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 
-var getPaddingStyle = function getPaddingStyle(props) {
+const getPaddingStyle = props => {
   if (props.isCondensed) return /*#__PURE__*/react.css("padding:", designSystem.designTokens.paddingForTableCellAsCondensed, ";" + ("" ), "" );
   return /*#__PURE__*/react.css("padding:", designSystem.designTokens.paddingForTableCell, ";" + ("" ), "" );
 };
@@ -71,7 +70,7 @@ var _ref10 = {
   styles: "text-align:center;justify-self:center"
 } ;
 
-var getHorizontalAlignmentStyle = function getHorizontalAlignmentStyle(props) {
+const getHorizontalAlignmentStyle = props => {
   if (props.horizontalCellAlignment === 'center') {
     return _ref10;
   }
@@ -98,7 +97,7 @@ var _ref7 = {
   styles: "align-self:center"
 } ;
 
-var getVerticalAlignmentStyle = function getVerticalAlignmentStyle(props) {
+const getVerticalAlignmentStyle = props => {
   if (props.verticalCellAlignment === 'center') {
     return _ref7;
   }
@@ -115,7 +114,7 @@ var _ref4 = {
   styles: "overflow:hidden;white-space:nowrap;text-overflow:ellipsis"
 } ;
 
-var getTruncatedStyle = function getTruncatedStyle(props) {
+const getTruncatedStyle = props => {
   if (props.isTruncated) {
     return _ref4;
   }
@@ -126,12 +125,12 @@ var getTruncatedStyle = function getTruncatedStyle(props) {
   so we have to set them manually. */
 
 
-var outlineStyles = {
+const outlineStyles = {
   name: "1oudntj",
   styles: "outline-offset:-3px;:not(:focus):focus-within{outline-style:auto;outline-color:Highlight;outline-color:activeborder;outline-color:-moz-mac-focusring;outline-color:-webkit-focus-ring-color;}"
 } ;
 
-var getCellInnerStyles = function getCellInnerStyles(props) {
+const getCellInnerStyles = props => {
   return [getVerticalAlignmentStyle(props), getHorizontalAlignmentStyle(props), getTruncatedStyle(props), outlineStyles];
 };
 /**
@@ -146,11 +145,9 @@ var _ref3 = {
   styles: "overflow:hidden"
 } ;
 
-var CellInner = /*#__PURE__*/_styled__default["default"]("div", {
+const CellInner = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e10u1n7e3"
-} )("box-sizing:border-box;flex:1;", getPaddingStyle, " ", getCellInnerStyles, " ", function (props) {
-  return props.shouldClipContent ? _ref3 : '';
-}, ";" + ("" ));
+} )("box-sizing:border-box;flex:1;", getPaddingStyle, " ", getCellInnerStyles, " ", props => props.shouldClipContent ? _ref3 : '', ";" + ("" ));
 
 var _ref$1 = {
   name: "1a5erbp",
@@ -162,37 +159,23 @@ var _ref2 = {
   styles: "overflow:hidden"
 } ;
 
-var BaseCell = /*#__PURE__*/_styled__default["default"]("td", {
+const BaseCell = /*#__PURE__*/_styled__default["default"]("td", {
   target: "e10u1n7e2"
-} )("position:relative;display:flex;background-color:", designSystem.designTokens.colorSurface, ";border-bottom:", function (props) {
-  return props.shouldRenderBottomBorder ? "1px solid ".concat(designSystem.designTokens.colorNeutral90, ";") : 'none';
-}, ";font-size:", designSystem.designTokens.fontSizeForTable, ";", function (props) {
-  return props.shouldClipContent ? _ref2 : '';
-}, " ", function (props) {
-  return props.shouldIgnoreRowClick ? _ref$1 : '';
-}, ";" + ("" ));
+} )("position:relative;display:flex;background-color:", designSystem.designTokens.colorSurface, ";border-bottom:", props => props.shouldRenderBottomBorder ? "1px solid ".concat(designSystem.designTokens.colorNeutral90, ";") : 'none', ";font-size:", designSystem.designTokens.fontSizeForTable, ";", props => props.shouldClipContent ? _ref2 : '', " ", props => props.shouldIgnoreRowClick ? _ref$1 : '', ";" + ("" ));
 
 /*#__PURE__*/_styled__default["default"]("td", {
   target: "e10u1n7e1"
-} )("position:", function (props) {
-  return props.disableFooterStickiness ? 'relative' : 'sticky';
-}, ";left:0;bottom:0;grid-column:1/", function (props) {
-  return props.numberOfColumns;
-}, ";background-color:", designSystem.designTokens.colorSurface, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";border-top:1px solid ", designSystem.designTokens.colorNeutral90, ";margin-top:-1px;" + ("" ));
+} )("position:", props => props.disableFooterStickiness ? 'relative' : 'sticky', ";left:0;bottom:0;grid-column:1/", props => props.numberOfColumns, ";background-color:", designSystem.designTokens.colorSurface, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";border-top:1px solid ", designSystem.designTokens.colorNeutral90, ";margin-top:-1px;" + ("" ));
 
-var RowExpandCollapseButton = /*#__PURE__*/_styled__default["default"](AccessibleButton__default["default"], {
+const RowExpandCollapseButton = /*#__PURE__*/_styled__default["default"](AccessibleButton__default["default"], {
   target: "e10u1n7e0"
-} )("cursor:", function (props) {
-  return props.isRowCollapsed ? /*#__PURE__*/react.css("" , "" ) : /*#__PURE__*/react.css("" , "" );
-}, ";position:absolute;height:16px;width:16px;bottom:0;right:0;opacity:0;display:flex;justify-content:flex-end;align-items:flex-end;" + ("" ));
+} )("cursor:", props => props.isRowCollapsed ? /*#__PURE__*/react.css("" , "" ) : /*#__PURE__*/react.css("" , "" ), ";position:absolute;height:16px;width:16px;bottom:0;right:0;opacity:0;display:flex;justify-content:flex-end;align-items:flex-end;" + ("" ));
 
-var convertNumericDimensionToPixelValue = function convertNumericDimensionToPixelValue(dimensionValue) {
-  return typeof dimensionValue === 'number' ? "".concat(dimensionValue, "px") : dimensionValue;
-};
+const convertNumericDimensionToPixelValue = dimensionValue => typeof dimensionValue === 'number' ? "".concat(dimensionValue, "px") : dimensionValue;
 
 var convertNumericDimensionToPixelValue$1 = convertNumericDimensionToPixelValue;
 
-var getClickableRowStyle = function getClickableRowStyle(props) {
+const getClickableRowStyle = props => {
   if (props.isRowClickable) {
     return /*#__PURE__*/react.css("cursor:pointer;&:hover td{background:", designSystem.designTokens.backgroundColorForTableCellWhenHovered, ";}" + ("" ), "" );
   }
@@ -205,7 +188,7 @@ var _ref = {
   styles: "position:unset;overflow-x:unset;overflow-y:unset"
 } ;
 
-var getDisabledSelfContainmentStyles = function getDisabledSelfContainmentStyles(props) {
+const getDisabledSelfContainmentStyles = props => {
   if (props.disableSelfContainment) {
     return _ref;
   }
@@ -213,63 +196,49 @@ var getDisabledSelfContainmentStyles = function getDisabledSelfContainmentStyles
   return '';
 };
 
-var TableContainer = /*#__PURE__*/_styled__default["default"]("div", {
+const TableContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "epk01s24"
-} )("position:relative;z-index:0;overflow-x:auto;", function (props) {
-  return props.maxWidth && !props.disableSelfContainment ? "max-width: ".concat(convertNumericDimensionToPixelValue$1(props.maxWidth), ";") : '';
-}, " ", function (props) {
-  return props.isBeingResized && "\n    * {\n      user-select: none;\n    }";
-}, " ", getDisabledSelfContainmentStyles, ";" + ("" ));
+} )("position:relative;z-index:0;overflow-x:auto;", props => props.maxWidth && !props.disableSelfContainment ? "max-width: ".concat(convertNumericDimensionToPixelValue$1(props.maxWidth), ";") : '', " ", props => props.isBeingResized && "\n    * {\n      user-select: none;\n    }", " ", getDisabledSelfContainmentStyles, ";" + ("" ));
 
-var TableGrid = /*#__PURE__*/_styled__default["default"]("table", {
+const TableGrid = /*#__PURE__*/_styled__default["default"]("table", {
   target: "epk01s23"
-} )("display:grid;grid-template-columns:", function (props) {
+} )("display:grid;grid-template-columns:", props => {
   var _context;
 
-  return props.columns && _mapInstanceProperty__default["default"](_context = props.columns).call(_context, function (column) {
-    return column.width || 'auto';
-  }).join(' ');
-}, ";overflow-y:auto;", function (props) {
-  return props.maxHeight && !props.disableSelfContainment ? "max-height: ".concat(convertNumericDimensionToPixelValue$1(props.maxHeight), ";") : '';
-}, " ", function (props) {
-  return props.resizedTotalWidth ? "max-width: ".concat(props.resizedTotalWidth, "px;") : '';
-}, " ", getDisabledSelfContainmentStyles, ";" + ("" ));
+  return props.columns && _mapInstanceProperty__default["default"](_context = props.columns).call(_context, column => column.width || 'auto').join(' ');
+}, ";overflow-y:auto;", props => props.maxHeight && !props.disableSelfContainment ? "max-height: ".concat(convertNumericDimensionToPixelValue$1(props.maxHeight), ";") : '', " ", props => props.resizedTotalWidth ? "max-width: ".concat(props.resizedTotalWidth, "px;") : '', " ", getDisabledSelfContainmentStyles, ";" + ("" ));
 
-var TableHeader = /*#__PURE__*/_styled__default["default"]("thead", {
+const TableHeader = /*#__PURE__*/_styled__default["default"]("thead", {
   target: "epk01s22"
 } )({
   name: "49aokf",
   styles: "display:contents"
 } );
 
-var TableBody = /*#__PURE__*/_styled__default["default"]("tbody", {
+const TableBody = /*#__PURE__*/_styled__default["default"]("tbody", {
   target: "epk01s21"
 } )({
   name: "49aokf",
   styles: "display:contents"
 } );
 
-var TableRow = /*#__PURE__*/_styled__default["default"]("tr", {
+const TableRow = /*#__PURE__*/_styled__default["default"]("tr", {
   target: "epk01s20"
 } )("display:contents;", getClickableRowStyle, " :hover,:focus-within{", RowExpandCollapseButton, "{opacity:1;}}" + ("" ));
 
-var defaultProps$4 = {
+const defaultProps$4 = {
   horizontalCellAlignment: 'left'
 };
 
-var Footer = /*#__PURE__*/_styled__default["default"]("div", {
+const Footer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e2ce7vj0"
-} )("box-sizing:border-box;display:block;", getPaddingStyle, " ", getHorizontalAlignmentStyle, " background-color:", designSystem.designTokens.colorSurface, ";border-top:1px solid ", designSystem.designTokens.colorNeutral90, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";", function (props) {
-  return props.resizedTotalWidth ? "max-width: ".concat(props.resizedTotalWidth, "px;") : '';
-}, ";" + ("" ));
+} )("box-sizing:border-box;display:block;", getPaddingStyle, " ", getHorizontalAlignmentStyle, " background-color:", designSystem.designTokens.colorSurface, ";border-top:1px solid ", designSystem.designTokens.colorNeutral90, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";", props => props.resizedTotalWidth ? "max-width: ".concat(props.resizedTotalWidth, "px;") : '', ";" + ("" ));
 
 Footer.displayName = 'Footer';
 Footer.defaultProps = defaultProps$4;
 var Footer$1 = Footer;
 
-var getButtonStyle = function getButtonStyle() {
-  return /*#__PURE__*/react.css("cursor:pointer;border:none;background:none;text-decoration:none;color:inherit;font:inherit;font-size:", designSystem.designTokens.fontSizeForTable, ";font-family:inherit;" + ("" ), "" );
-};
+const getButtonStyle = () => /*#__PURE__*/react.css("cursor:pointer;border:none;background:none;text-decoration:none;color:inherit;font:inherit;font-size:", designSystem.designTokens.fontSizeForTable, ";font-family:inherit;" + ("" ), "" );
 /* A sortable header has the two arrow svg icons
  * GIVEN column is sortable and is not focused
  * THEN AngleUpDown icon is shown (default behaviour)
@@ -281,60 +250,40 @@ var getButtonStyle = function getButtonStyle() {
  */
 
 
-var getSortableHeaderStyles = function getSortableHeaderStyles(props) {
-  return /*#__PURE__*/react.css("width:100%;display:flex;align-items:center;svg[data-icon-state='inactive'],svg[data-icon-state='active']{margin-left:", designSystem.designTokens.spacing20, ";flex-shrink:0;}svg[data-icon-state='inactive']{display:", props.isActive ? 'none' : 'inline-block', ";}svg[data-icon-state='active']{display:", props.isActive ? 'inline-block' : 'none', ";}>svg *{fill:", designSystem.designTokens.fontColorForTableHeader, "!important;}:hover,:focus{svg[data-icon-state='inactive']{display:none;}svg[data-icon-state='active']{display:inline-block;}}" + ("" ), "" );
-};
+const getSortableHeaderStyles = props => /*#__PURE__*/react.css("width:100%;display:flex;align-items:center;svg[data-icon-state='inactive'],svg[data-icon-state='active']{margin-left:", designSystem.designTokens.spacing20, ";flex-shrink:0;}svg[data-icon-state='inactive']{display:", props.isActive ? 'none' : 'inline-block', ";}svg[data-icon-state='active']{display:", props.isActive ? 'inline-block' : 'none', ";}>svg *{fill:", designSystem.designTokens.fontColorForTableHeader, "!important;}:hover,:focus{svg[data-icon-state='inactive']{display:none;}svg[data-icon-state='active']{display:inline-block;}}" + ("" ), "" );
 
-var HeaderCellInner = /*#__PURE__*/_styled__default["default"]("div", {
+const HeaderCellInner = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1ipt8n23"
-} )("box-sizing:border-box;display:flex;justify-content:space-between;padding:0 ", function (props) {
-  return props.isCondensed ? designSystem.designTokens.paddingForTableHeaderAsCondensed : designSystem.designTokens.paddingForTableHeader;
-}, ";", getCellInnerStyles, " ", function (props) {
-  return props.isSortable ? getSortableHeaderStyles(props) : '';
-}, ";", function (props) {
-  return props.as === 'button' ? getButtonStyle() : '';
-}, ";", function (props) {
-  return props.shouldWrap ? '' : 'white-space: nowrap';
-}, ";" + ("" ));
-
-var BaseHeaderCell = /*#__PURE__*/_styled__default["default"]("th", {
+} )("box-sizing:border-box;display:flex;justify-content:space-between;padding:0 ", props => props.isCondensed ? designSystem.designTokens.paddingForTableHeaderAsCondensed : designSystem.designTokens.paddingForTableHeader, ";", getCellInnerStyles, " ", props => props.isSortable ? getSortableHeaderStyles(props) : '', ";", props => props.as === 'button' ? getButtonStyle() : '', ";", props => props.shouldWrap ? '' : 'white-space: nowrap', ";" + ("" ));
+
+const BaseHeaderCell = /*#__PURE__*/_styled__default["default"]("th", {
   target: "e1ipt8n22"
-} )("color:", designSystem.designTokens.fontColorForTableHeader, ";background-color:", designSystem.designTokens.backgroundColorForTableHeader, ";position:", function (props) {
-  return props.disableHeaderStickiness ? 'relative' : 'sticky';
-}, ";top:0;z-index:1;line-height:", designSystem.designTokens.lineHeightForTableHeader, ";padding:0;font-weight:", designSystem.designTokens.fontWeightForTableHeader, ";font-size:", designSystem.designTokens.fontSizeForTable, ";box-shadow:inset -1px 0 ", designSystem.designTokens.borderColorForTableHeader, ";:hover,:active{z-index:2;}", function (props) {
-  return !props.isNewTheme && ":before {\n      content: '';\n      position: absolute;\n      z-index: -1;\n      width: 100%;\n      height: 1px;\n      bottom: 0;\n      left: 0;\n      background-color: ".concat(designSystem.designTokens.borderColorForTableHeaderAsBottom, ";\n    };");
-}, " ", HeaderCellInner, "{", function (props) {
-  return props.shouldClipContent ? 'overflow: hidden;' : '';
-}, ";}" + ("" ));
-
-var HeaderLabelWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+} )("color:", designSystem.designTokens.fontColorForTableHeader, ";background-color:", designSystem.designTokens.backgroundColorForTableHeader, ";position:", props => props.disableHeaderStickiness ? 'relative' : 'sticky', ";top:0;z-index:1;line-height:", designSystem.designTokens.lineHeightForTableHeader, ";padding:0;font-weight:", designSystem.designTokens.fontWeightForTableHeader, ";font-size:", designSystem.designTokens.fontSizeForTable, ";box-shadow:inset -1px 0 ", designSystem.designTokens.borderColorForTableHeader, ";:hover,:active{z-index:2;}", props => !props.isNewTheme && ":before {\n      content: '';\n      position: absolute;\n      z-index: -1;\n      width: 100%;\n      height: 1px;\n      bottom: 0;\n      left: 0;\n      background-color: ".concat(designSystem.designTokens.borderColorForTableHeaderAsBottom, ";\n    };"), " ", HeaderCellInner, "{", props => props.shouldClipContent ? 'overflow: hidden;' : '', ";}" + ("" ));
+
+const HeaderLabelWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1ipt8n21"
 } )("min-height:1.4em;margin:", designSystem.designTokens.marginForTableHeader, " 0;flex:1;" + ("" ));
 
-var HeaderIconWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+const HeaderIconWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1ipt8n20"
 } )("display:inline-flex;align-items:center;justify-content:center;margin-left:", designSystem.designTokens.spacing20, ";vertical-align:middle;" + ("" ));
 
-var ResizerIndicator = /*#__PURE__*/_styled__default["default"]("div", {
+const ResizerIndicator = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1ccic7f1"
-} )("height:100%;width:3px;background:", designSystem.designTokens.colorInfo, ";visibility:hidden;cursor:col-resize;", function (props // extra 1px of height to appear above the bottom horizontal row border
-) {
-  return props.isOnDataCell ? 'visibility: visible; height: calc(100% + 1px);' : '';
-}, ";" + ("" ));
+} )("height:100%;width:3px;background:", designSystem.designTokens.colorInfo, ";visibility:hidden;cursor:col-resize;", (props // extra 1px of height to appear above the bottom horizontal row border
+) => props.isOnDataCell ? 'visibility: visible; height: calc(100% + 1px);' : '', ";" + ("" ));
 
-var DraggableArea = /*#__PURE__*/_styled__default["default"]("div", {
+const DraggableArea = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1ccic7f0"
 } )("display:flex;justify-content:flex-end;height:100%;position:absolute;top:0;right:0;width:6px;cursor:col-resize;user-select:none;&:hover ", ResizerIndicator, "{height:100%;visibility:visible;}&:active{width:20px;right:-10px;", ResizerIndicator, "{margin-right:10px;visibility:visible;}}" + ("" ));
 
-var ColumnResizer = function ColumnResizer(props) {
-  return jsxRuntime.jsx(DraggableArea, {
-    role: "presentation",
-    onMouseDown: props.onMouseDown,
-    children: jsxRuntime.jsx(ResizerIndicator, {
-      isOnDataCell: props.isOnDataCell
-    })
-  });
-};
+const ColumnResizer = props => jsxRuntime.jsx(DraggableArea, {
+  role: "presentation",
+  onMouseDown: props.onMouseDown,
+  children: jsxRuntime.jsx(ResizerIndicator, {
+    isOnDataCell: props.isOnDataCell
+  })
+});
 
 ColumnResizer.propTypes = {};
 ColumnResizer.displayName = 'ColumnResizer';
@@ -342,7 +291,7 @@ var Resizer = ColumnResizer;
 
 var ColumnResizingContext = /*#__PURE__*/react$1.createContext({});
 
-var isFixedWidthValue = function isFixedWidthValue(value) {
+const isFixedWidthValue = value => {
   return !_Number$isNaN__default["default"](_parseInt__default["default"](String(value), 10));
 };
 
@@ -352,27 +301,27 @@ function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["d
 
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
-var HeaderCellWrapper = function HeaderCellWrapper(props) {
+const HeaderCellWrapper = props => {
   var _headerRef$current2;
 
-  var _useTheme = designSystem.useTheme(),
-      isNewTheme = _useTheme.isNewTheme;
+  const _useTheme = designSystem.useTheme(),
+        isNewTheme = _useTheme.isNewTheme;
 
-  var columnResizingReducer = react$1.useContext(ColumnResizingContext);
-  var headerRef = react$1.useRef(null);
+  const columnResizingReducer = react$1.useContext(ColumnResizingContext);
+  const headerRef = react$1.useRef(null);
 
-  var onStartResizing = function onStartResizing(event) {
+  const onStartResizing = event => {
     columnResizingReducer.startResizing(headerRef, event);
   };
 
-  var onDrag = function onDrag(event) {
+  const onDrag = event => {
     var _headerRef$current;
 
     return columnResizingReducer.onDragResizing(event, (_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.cellIndex);
   };
 
-  var onDragEnd = function onDragEnd() {
-    var finalSizes = columnResizingReducer.finishResizing();
+  const onDragEnd = () => {
+    const finalSizes = columnResizingReducer.finishResizing();
 
     if (props.onColumnResized) {
       props.onColumnResized(finalSizes);
@@ -393,7 +342,7 @@ var HeaderCellWrapper = function HeaderCellWrapper(props) {
    */
 
 
-  var shouldClipContent = props.columnWidth && isFixedWidthValue$1(props.columnWidth) || columnResizingReducer.getHasTableBeenResized() || columnResizingReducer.getIsAnyColumnBeingResized();
+  const shouldClipContent = props.columnWidth && isFixedWidthValue$1(props.columnWidth) || columnResizingReducer.getHasTableBeenResized() || columnResizingReducer.getIsAnyColumnBeingResized();
   return jsxRuntime.jsxs(BaseHeaderCell, {
     ref: headerRef,
     "data-testid": "header-".concat(props.columnKey),
@@ -408,27 +357,25 @@ var HeaderCellWrapper = function HeaderCellWrapper(props) {
 };
 
 HeaderCellWrapper.displayName = 'HeaderCellWrapper';
-var defaultProps$3 = {
+const defaultProps$3 = {
   sortDirection: 'desc',
   disableHeaderStickiness: false,
   horizontalCellAlignment: 'left'
 };
 
-var HeaderCell = function HeaderCell(props) {
-  var sortableHeaderProps = {};
-  var SortingIcon;
+const HeaderCell = props => {
+  let sortableHeaderProps = {};
+  let SortingIcon;
 
   if (props.isSortable) {
-    var isActive = props.sortedBy === props.columnKey;
-    var nextSortDirection = !isActive || props.sortDirection === 'desc' ? 'asc' : 'desc';
+    const isActive = props.sortedBy === props.columnKey;
+    const nextSortDirection = !isActive || props.sortDirection === 'desc' ? 'asc' : 'desc';
     SortingIcon = props.sortDirection === 'desc' ? icons.AngleDownIcon : icons.AngleUpIcon;
     sortableHeaderProps = {
       as: 'button',
       label: props.sortDirection,
-      onClick: function onClick() {
-        return props.onClick && props.onClick(props.columnKey, nextSortDirection);
-      },
-      isActive: isActive,
+      onClick: () => props.onClick && props.onClick(props.columnKey, nextSortDirection),
+      isActive,
       isSortable: true
     };
   }
@@ -471,15 +418,15 @@ var HeaderCell$1 = HeaderCell;
 function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-var defaultProps$2 = {
+const defaultProps$2 = {
   isTruncated: false,
   shouldRenderBottomBorder: true
 };
 
-var DataCell = function DataCell(props) {
+const DataCell = props => {
   if (props.shouldRenderCollapseButton) ;
 
-  var Icon = props.isRowCollapsed ? icons.RightTriangleFilledIcon : icons.RightTriangleLinearIcon;
+  const Icon = props.isRowCollapsed ? icons.RightTriangleFilledIcon : icons.RightTriangleLinearIcon;
   return jsxRuntime.jsxs(BaseCell, {
     onClick: props.onCellClick,
     shouldIgnoreRowClick: props.shouldIgnoreRowClick,
@@ -494,7 +441,7 @@ var DataCell = function DataCell(props) {
       children: props.children
     })), props.shouldRenderCollapseButton && jsxRuntime.jsx(RowExpandCollapseButton, {
       label: "Expand/Collapse Row",
-      onClick: function onClick(event) {
+      onClick: event => {
         if (props.handleRowCollapseClick) props.handleRowCollapseClick();
         event.stopPropagation();
       },
@@ -513,12 +460,12 @@ DataCell.displayName = 'DataCell';
 DataCell.defaultProps = defaultProps$2;
 var DataCell$1 = DataCell;
 
-var defaultItemRenderer = function defaultItemRenderer(row, column) {
+const defaultItemRenderer = (row, column) => {
   // @ts-ignore
   return row[column.key];
 };
 
-var defaultProps$1 = {
+const defaultProps$1 = {
   isCondensed: false,
   shouldClipContent: false,
   verticalCellAlignment: 'top',
@@ -527,27 +474,25 @@ var defaultProps$1 = {
   itemRenderer: defaultItemRenderer
 };
 
-var DataRow = function DataRow(props) {
+const DataRow = props => {
   var _context, _context2;
 
-  var _ref = react$1.useContext(ColumnResizingContext),
-      getIsColumnBeingResized = _ref.getIsColumnBeingResized;
+  const _ref = react$1.useContext(ColumnResizingContext),
+        getIsColumnBeingResized = _ref.getIsColumnBeingResized;
 
-  var rowHasTruncatedColumn = _someInstanceProperty__default["default"](_context = props.columns).call(_context, function (column) {
-    return column.isTruncated;
-  });
+  const rowHasTruncatedColumn = _someInstanceProperty__default["default"](_context = props.columns).call(_context, column => column.isTruncated);
 
-  var _useState = react$1.useState(rowHasTruncatedColumn),
-      _useState2 = _slicedToArray(_useState, 2),
-      isRowCollapsed = _useState2[0],
-      collapseRow = _useState2[1];
+  const _useState = react$1.useState(rowHasTruncatedColumn),
+        _useState2 = _slicedToArray(_useState, 2),
+        isRowCollapsed = _useState2[0],
+        collapseRow = _useState2[1];
 
-  var handleRowCollapseClick = function handleRowCollapseClick() {
+  const handleRowCollapseClick = () => {
     collapseRow(!isRowCollapsed);
   }; // update the collapsed state if isTruncated options are changed for the whole row
 
 
-  react$1.useEffect(function () {
+  react$1.useEffect(() => {
     if (rowHasTruncatedColumn) {
       collapseRow(true);
     } else {
@@ -555,13 +500,11 @@ var DataRow = function DataRow(props) {
     }
   }, [rowHasTruncatedColumn]);
 
-  var shouldRenderCollapseButton = function shouldRenderCollapseButton(totalColumnsLength, currentColumnIndex) {
-    return rowHasTruncatedColumn && totalColumnsLength - 1 === currentColumnIndex;
-  };
+  const shouldRenderCollapseButton = (totalColumnsLength, currentColumnIndex) => rowHasTruncatedColumn && totalColumnsLength - 1 === currentColumnIndex;
 
   return jsxRuntime.jsx(TableRow, {
     isRowClickable: Boolean(props.onRowClick),
-    children: _mapInstanceProperty__default["default"](_context2 = props.columns).call(_context2, function (column, columnIndex) {
+    children: _mapInstanceProperty__default["default"](_context2 = props.columns).call(_context2, (column, columnIndex) => {
       var _context3, _context4;
 
       return jsxRuntime.jsx(DataCell$1, {
@@ -574,7 +517,7 @@ var DataRow = function DataRow(props) {
         shouldIgnoreRowClick: column.shouldIgnoreRowClick,
         handleRowCollapseClick: handleRowCollapseClick,
         shouldRenderCollapseButton: shouldRenderCollapseButton(props.columns.length, columnIndex),
-        onCellClick: props.onRowClick && !column.shouldIgnoreRowClick ? function () {
+        onCellClick: props.onRowClick && !column.shouldIgnoreRowClick ? () => {
           var _props$onRowClick;
 
           return (_props$onRowClick = props.onRowClick) === null || _props$onRowClick === void 0 ? void 0 : _props$onRowClick.call(props, props.row, props.rowIndex, column.key);
@@ -595,21 +538,21 @@ var DataRow$1 = DataRow;
 function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$1(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$1(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-var MINIMUM_COLUMN_SIZE = 32; // calculates size on mouse-drag and enforces a minimum size
-
-var calculateNewSize = function calculateNewSize() {
-  var initialSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  var initialMousePosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  var newMousePosition = arguments.length > 2 ? arguments[2] : undefined;
-  var minSize = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : MINIMUM_COLUMN_SIZE;
-  var newSize = initialSize - (initialMousePosition - newMousePosition);
+const MINIMUM_COLUMN_SIZE = 32; // calculates size on mouse-drag and enforces a minimum size
+
+const calculateNewSize = function () {
+  let initialSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  let initialMousePosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let newMousePosition = arguments.length > 2 ? arguments[2] : undefined;
+  let minSize = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : MINIMUM_COLUMN_SIZE;
+  const newSize = initialSize - (initialMousePosition - newMousePosition);
   return minSize > newSize ? minSize : newSize;
 };
 
-var setColumnWidth = function setColumnWidth() {
-  var columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var position = arguments.length > 1 ? arguments[1] : undefined;
-  var value = arguments.length > 2 ? arguments[2] : undefined;
+const setColumnWidth = function () {
+  let columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let position = arguments.length > 1 ? arguments[1] : undefined;
+  let value = arguments.length > 2 ? arguments[2] : undefined;
   // columns => comes from state.sizes which reflects component's state
   // any update to the columns results in updating the state
   columns[position] = _objectSpread$1(_objectSpread$1({}, columns[position]), {}, {
@@ -618,22 +561,16 @@ var setColumnWidth = function setColumnWidth() {
   return columns;
 };
 
-var getGridTemplateColumnsStyle = function getGridTemplateColumnsStyle(columns) {
-  return "".concat(_mapInstanceProperty__default["default"](columns).call(columns, function (width) {
-    return "".concat(width || 0, "px");
-  }).join(' '));
-};
+const getGridTemplateColumnsStyle = columns => "".concat(_mapInstanceProperty__default["default"](columns).call(columns, width => "".concat(width || 0, "px")).join(' '));
 
-var initialState = function initialState(tableRef) {
-  return {
-    initialColWidth: undefined,
-    initialMousePosition: undefined,
-    columnBeingResized: undefined,
-    hasBeenResized: false,
-    sizes: undefined,
-    tableRef: tableRef
-  };
-};
+const initialState = tableRef => ({
+  initialColWidth: undefined,
+  initialMousePosition: undefined,
+  columnBeingResized: undefined,
+  hasBeenResized: false,
+  sizes: undefined,
+  tableRef
+});
 
 function reducer(state, action) {
   switch (action.type) {
@@ -669,31 +606,31 @@ function reducer(state, action) {
   }
 }
 
-var useManualResizingReducer = function useManualResizingReducer(tableRef) {
-  var _useReducer = react$1.useReducer(reducer, initialState(tableRef)),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      manualResizingState = _useReducer2[0],
-      dispatch = _useReducer2[1];
+const useManualResizingReducer = tableRef => {
+  const _useReducer = react$1.useReducer(reducer, initialState(tableRef)),
+        _useReducer2 = _slicedToArray(_useReducer, 2),
+        manualResizingState = _useReducer2[0],
+        dispatch = _useReducer2[1];
 
   react$1.useDebugValue(manualResizingState);
   return [manualResizingState, dispatch];
 };
 
-var useManualColumnResizing = function useManualColumnResizing(tableRef) {
+const useManualColumnResizing = tableRef => {
   var _state$tableRef;
 
-  var _useManualResizingRed = useManualResizingReducer(tableRef),
-      _useManualResizingRed2 = _slicedToArray(_useManualResizingRed, 2),
-      state = _useManualResizingRed2[0],
-      dispatch = _useManualResizingRed2[1]; // if the table element has been rendered and we haven't yet measured the columns
+  const _useManualResizingRed = useManualResizingReducer(tableRef),
+        _useManualResizingRed2 = _slicedToArray(_useManualResizingRed, 2),
+        state = _useManualResizingRed2[0],
+        dispatch = _useManualResizingRed2[1]; // if the table element has been rendered and we haven't yet measured the columns
 
 
   if ((_state$tableRef = state.tableRef) !== null && _state$tableRef !== void 0 && _state$tableRef.current && !state.sizes) {
     var _context;
 
-    var renderedColumnMeasurements = [];
+    const renderedColumnMeasurements = [];
 
-    _forEachInstanceProperty__default["default"](_context = state.tableRef.current.querySelectorAll('th')).call(_context, function (header) {
+    _forEachInstanceProperty__default["default"](_context = state.tableRef.current.querySelectorAll('th')).call(_context, header => {
       renderedColumnMeasurements.push({
         key: header.getAttribute('data-id'),
         width: header.getBoundingClientRect().width
@@ -708,7 +645,7 @@ var useManualColumnResizing = function useManualColumnResizing(tableRef) {
     });
   }
 
-  var startResizing = function startResizing(headerRef, mouseEvent) {
+  const startResizing = (headerRef, mouseEvent) => {
     dispatch({
       type: 'startResizing',
       payload: {
@@ -719,52 +656,42 @@ var useManualColumnResizing = function useManualColumnResizing(tableRef) {
     });
   };
 
-  var onDragResizing = function onDragResizing(event, columnIndex) {
+  const onDragResizing = (event, columnIndex) => {
     // throttle and sync resizing update rate with screen refresh rate
-    requestAnimationFrame(function () {
+    requestAnimationFrame(() => {
       var _state$tableRef2;
 
-      var width = calculateNewSize(state.initialColWidth, state.initialMousePosition, event.clientX);
-      var newColumnsSizes = setColumnWidth(state.sizes, columnIndex, width);
+      const width = calculateNewSize(state.initialColWidth, state.initialMousePosition, event.clientX);
+      const newColumnsSizes = setColumnWidth(state.sizes, columnIndex, width);
       if (!((_state$tableRef2 = state.tableRef) !== null && _state$tableRef2 !== void 0 && _state$tableRef2.current)) return;
-      state.tableRef.current.style.gridTemplateColumns = getGridTemplateColumnsStyle(_mapInstanceProperty__default["default"](newColumnsSizes).call(newColumnsSizes, function (newColumnsSize) {
-        return newColumnsSize.width.toString();
-      }));
+      state.tableRef.current.style.gridTemplateColumns = getGridTemplateColumnsStyle(_mapInstanceProperty__default["default"](newColumnsSizes).call(newColumnsSizes, newColumnsSize => newColumnsSize.width.toString()));
     });
   };
 
-  var finishResizing = function finishResizing() {
+  const finishResizing = () => {
     dispatch({
       type: 'finishResizing'
     });
     return state.sizes;
   };
 
-  var getIsColumnBeingResized = function getIsColumnBeingResized(columnIndex) {
-    return state.columnBeingResized !== undefined ? state.columnBeingResized === columnIndex : false;
-  };
+  const getIsColumnBeingResized = columnIndex => state.columnBeingResized !== undefined ? state.columnBeingResized === columnIndex : false;
 
-  var getIsAnyColumnBeingResized = function getIsAnyColumnBeingResized() {
-    return state.columnBeingResized !== undefined;
-  };
+  const getIsAnyColumnBeingResized = () => state.columnBeingResized !== undefined;
 
-  var getHasTableBeenResized = function getHasTableBeenResized() {
-    return state.hasBeenResized;
-  };
+  const getHasTableBeenResized = () => state.hasBeenResized;
 
-  var getTotalResizedTableWidth = function getTotalResizedTableWidth() {
+  const getTotalResizedTableWidth = () => {
     var _context2;
 
     if (!state.hasBeenResized || !state.sizes) {
       return -1;
     }
 
-    return _reduceInstanceProperty__default["default"](_context2 = state.sizes).call(_context2, function (a, b) {
-      return a + b.width;
-    }, 0);
+    return _reduceInstanceProperty__default["default"](_context2 = state.sizes).call(_context2, (a, b) => a + b.width, 0);
   };
 
-  var reset = function reset() {
+  const reset = () => {
     var _state$tableRef3;
 
     if (!((_state$tableRef3 = state.tableRef) !== null && _state$tableRef3 !== void 0 && _state$tableRef3.current)) return;
@@ -774,21 +701,19 @@ var useManualColumnResizing = function useManualColumnResizing(tableRef) {
     });
   };
 
-  var getSizes = function getSizes() {
-    return state.sizes;
-  };
+  const getSizes = () => state.sizes;
 
   react$1.useDebugValue(state);
   return {
-    reset: reset,
-    getSizes: getSizes,
-    startResizing: startResizing,
-    onDragResizing: onDragResizing,
-    finishResizing: finishResizing,
-    getHasTableBeenResized: getHasTableBeenResized,
-    getIsColumnBeingResized: getIsColumnBeingResized,
-    getIsAnyColumnBeingResized: getIsAnyColumnBeingResized,
-    getTotalResizedTableWidth: getTotalResizedTableWidth
+    reset,
+    getSizes,
+    startResizing,
+    onDragResizing,
+    finishResizing,
+    getHasTableBeenResized,
+    getIsColumnBeingResized,
+    getIsAnyColumnBeingResized,
+    getTotalResizedTableWidth
   };
 };
 
@@ -796,26 +721,20 @@ var useManualColumnResizing$1 = useManualColumnResizing;
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-
-var getColumnsLayoutInfo = function getColumnsLayoutInfo(columns) {
-  return _reduceInstanceProperty__default["default"](columns).call(columns, function (acc, currentValue) {
-    var _context;
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
-    return _concatInstanceProperty__default["default"](_context = []).call(_context, _toConsumableArray(acc), [{
-      key: currentValue.key,
-      width: currentValue.width
-    }]);
-  }, []);
-};
+const getColumnsLayoutInfo = columns => _reduceInstanceProperty__default["default"](columns).call(columns, (acc, currentValue) => [...acc, {
+  key: currentValue.key,
+  width: currentValue.width
+}], []);
 
-var shouldRenderRowBottomBorder = function shouldRenderRowBottomBorder(rowIndex, rowCount, footer) {
+const shouldRenderRowBottomBorder = (rowIndex, rowCount, footer) => {
   if (!footer) return true;
   if (rowIndex + 1 < rowCount) return true;
   return false;
 };
 
-var defaultProps = {
+const defaultProps = {
   columns: [],
   isCondensed: false,
   wrapHeaderLabels: true,
@@ -823,35 +742,33 @@ var defaultProps = {
   horizontalCellAlignment: 'left',
   disableSelfContainment: false,
   // @ts-ignore
-  itemRenderer: function itemRenderer(row, column) {
-    return row[column.key];
-  }
+  itemRenderer: (row, column) => row[column.key]
 };
 
-var DataTable = function DataTable(props) {
-  var _context2, _context3;
-  var tableRef = react$1.useRef();
-  var columnResizingReducer = useManualColumnResizing$1(tableRef); // if the table columns have been measured
+const DataTable = props => {
+  var _context, _context2;
+  const tableRef = react$1.useRef();
+  const columnResizingReducer = useManualColumnResizing$1(tableRef); // if the table columns have been measured
   // and if the list of columns, their width field, or the isCondensed prop has changed
   // then we need to reset the resized column widths
 
-  var columnsInfo = getColumnsLayoutInfo(props.columns);
-  var prevLayout = hooks.usePrevious({
+  const columnsInfo = getColumnsLayoutInfo(props.columns);
+  const prevLayout = hooks.usePrevious({
     columns: columnsInfo,
     isCondensed: props.isCondensed
   });
-  var currentLayout = {
+  const currentLayout = {
     columns: columnsInfo,
     isCondensed: props.isCondensed
   };
-  var hasLayoutChanged = !isEqual__default["default"](prevLayout, currentLayout);
-  react$1.useLayoutEffect(function () {
+  const hasLayoutChanged = !isEqual__default["default"](prevLayout, currentLayout);
+  react$1.useLayoutEffect(() => {
     if (hasLayoutChanged) {
       columnResizingReducer.reset();
     }
   }, [columnResizingReducer, hasLayoutChanged]);
-  var hasTableBeenResized = columnResizingReducer.getHasTableBeenResized();
-  var resizedTotalWidth = hasTableBeenResized && tableRef.current ? columnResizingReducer.getTotalResizedTableWidth() + ( // if the table has a maxHeight, it might add a scrollbar which takes space inside the container
+  const hasTableBeenResized = columnResizingReducer.getHasTableBeenResized();
+  const resizedTotalWidth = hasTableBeenResized && tableRef.current ? columnResizingReducer.getTotalResizedTableWidth() + ( // if the table has a maxHeight, it might add a scrollbar which takes space inside the container
   tableRef.current.offsetWidth - tableRef.current.clientWidth) : undefined;
   return jsxRuntime.jsxs(TableContainer, {
     maxWidth: props.maxWidth,
@@ -869,37 +786,33 @@ var DataTable = function DataTable(props) {
         children: [jsxRuntime.jsx(TableHeader, {
           children: jsxRuntime.jsx(TableRow, {
             isRowClickable: false,
-            children: _mapInstanceProperty__default["default"](_context2 = props.columns).call(_context2, function (column) {
-              return jsxRuntime.jsx(HeaderCell$1, {
-                shouldWrap: props.wrapHeaderLabels,
-                isCondensed: props.isCondensed,
-                iconComponent: column.headerIcon,
-                onColumnResized: props.onColumnResized,
-                disableResizing: column.disableResizing,
-                horizontalCellAlignment: column.align ? column.align : props.horizontalCellAlignment,
-                disableHeaderStickiness: props.disableHeaderStickiness,
-                columnWidth: column.width
-                /* Sorting Props */
-                ,
-                onClick: props.onSortChange && props.onSortChange,
-                sortedBy: props.sortedBy,
-                columnKey: column.key,
-                isSortable: column.isSortable,
-                sortDirection: props.sortDirection,
-                children: column.label
-              }, column.key);
-            })
+            children: _mapInstanceProperty__default["default"](_context = props.columns).call(_context, column => jsxRuntime.jsx(HeaderCell$1, {
+              shouldWrap: props.wrapHeaderLabels,
+              isCondensed: props.isCondensed,
+              iconComponent: column.headerIcon,
+              onColumnResized: props.onColumnResized,
+              disableResizing: column.disableResizing,
+              horizontalCellAlignment: column.align ? column.align : props.horizontalCellAlignment,
+              disableHeaderStickiness: props.disableHeaderStickiness,
+              columnWidth: column.width
+              /* Sorting Props */
+              ,
+              onClick: props.onSortChange && props.onSortChange,
+              sortedBy: props.sortedBy,
+              columnKey: column.key,
+              isSortable: column.isSortable,
+              sortDirection: props.sortDirection,
+              children: column.label
+            }, column.key))
           })
         }), jsxRuntime.jsx(TableBody, {
-          children: _mapInstanceProperty__default["default"](_context3 = props.rows).call(_context3, function (row, rowIndex) {
-            return react.createElement(DataRow$1, _objectSpread(_objectSpread({}, props), {}, {
-              row: row,
-              key: row.id,
-              rowIndex: rowIndex,
-              shouldClipContent: columnResizingReducer.getIsAnyColumnBeingResized() || hasTableBeenResized,
-              shouldRenderBottomBorder: shouldRenderRowBottomBorder(rowIndex, props.rows.length, props.footer)
-            }));
-          })
+          children: _mapInstanceProperty__default["default"](_context2 = props.rows).call(_context2, (row, rowIndex) => react.createElement(DataRow$1, _objectSpread(_objectSpread({}, props), {}, {
+            row: row,
+            key: row.id,
+            rowIndex: rowIndex,
+            shouldClipContent: columnResizingReducer.getIsAnyColumnBeingResized() || hasTableBeenResized,
+            shouldRenderBottomBorder: shouldRenderRowBottomBorder(rowIndex, props.rows.length, props.footer)
+          })))
         })]
       })
     })), props.footer && jsxRuntime.jsx(Footer$1, {
@@ -918,7 +831,7 @@ DataTable.displayName = 'DataTable';
 var DataTable$1 = DataTable;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.15.0";
+var version = "15.15.1";
 
 Object.defineProperty(exports, 'useRowSelection', {
   enumerable: true,