@commercetools-uikit/data-table 12.2.1 → 12.2.5

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

@@ -2,14 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime-corejs3/helpers/extends');
+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');
 require('@babel/runtime-corejs3/core-js-stable/array/is-array');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
-var React = require('react');
-var PropTypes = require('prop-types');
+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');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var react$1 = require('react');
 var isEqual = require('lodash/isEqual');
 var utils = require('@commercetools-uikit/utils');
 var hooks = require('@commercetools-uikit/hooks');
@@ -17,47 +25,36 @@ var _styled = require('@emotion/styled/base');
 var react = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
 var AccessibleButton = require('@commercetools-uikit/accessible-button');
-require('react-required-if');
 var icons = require('@commercetools-uikit/icons');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
 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 _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');
-var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
-var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
-var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
-var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
-var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
-var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
-var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
 
 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 React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
-var _styled__default = /*#__PURE__*/_interopDefault(_styled);
-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 _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
 var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
 var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
-var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+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 getPaddingStyle = function getPaddingStyle(props) {
-  if (props.isCondensed) return /*#__PURE__*/react.css("padding:", designSystem.customProperties.spacingS, ";" + ("" ));
-  return /*#__PURE__*/react.css("padding:", designSystem.customProperties.spacingM, ";" + ("" ));
+  if (props.isCondensed) return /*#__PURE__*/react.css("padding:", designSystem.customProperties.spacingS, ";" + ("" ), "" );
+  return /*#__PURE__*/react.css("padding:", designSystem.customProperties.spacingM, ";" + ("" ), "" );
 };
 
 var _ref8 = {
@@ -150,13 +147,13 @@ var _ref3 = {
   styles: "overflow:hidden"
 } ;
 
-var CellInner = _styled__default['default']("div", {
-  target: "ecaj4zv3"
+var CellInner = _styled__default["default"]("div", {
+  target: "e10u1n7e3"
 } )("box-sizing:border-box;flex:1;", getPaddingStyle, " ", getCellInnerStyles, " ", function (props) {
   return props.shouldClipContent ? _ref3 : '';
-}, ";");
+}, ";" + ("" ));
 
-var _ref = {
+var _ref$1 = {
   name: "1a5erbp",
   styles: "cursor:auto"
 } ;
@@ -166,121 +163,131 @@ var _ref2 = {
   styles: "overflow:hidden"
 } ;
 
-var BaseCell = _styled__default['default']("td", {
-  target: "ecaj4zv2"
+var BaseCell = _styled__default["default"]("td", {
+  target: "e10u1n7e2"
 } )("position:relative;display:flex;background-color:", designSystem.customProperties.colorSurface, ";border-bottom:", function (props) {
   return props.shouldRenderBottomBorder ? "1px solid ".concat(designSystem.customProperties.colorNeutral90, ";") : 'none';
 }, ";", function (props) {
   return props.shouldClipContent ? _ref2 : '';
 }, " ", function (props) {
-  return props.shouldIgnoreRowClick ? _ref : '';
-}, ";");
+  return props.shouldIgnoreRowClick ? _ref$1 : '';
+}, ";" + ("" ));
 
-_styled__default['default']("td", {
-  target: "ecaj4zv1"
+_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.customProperties.colorSurface, ";border-bottom:1px solid ", designSystem.customProperties.colorNeutral90, ";border-top:1px solid ", designSystem.customProperties.colorNeutral90, ";margin-top:-1px;");
+}, ";background-color:", designSystem.customProperties.colorSurface, ";border-bottom:1px solid ", designSystem.customProperties.colorNeutral90, ";border-top:1px solid ", designSystem.customProperties.colorNeutral90, ";margin-top:-1px;" + ("" ));
 
-var RowExpandCollapseButton = /*#__PURE__*/_styled__default['default'](AccessibleButton__default['default'], {
-  target: "ecaj4zv0"
+var 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;");
+  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;" + ("" ));
 
 var convertNumericDimensionToPixelValue = function convertNumericDimensionToPixelValue(dimensionValue) {
   return typeof dimensionValue === 'number' ? "".concat(dimensionValue, "px") : dimensionValue;
 };
 
+var convertNumericDimensionToPixelValue$1 = convertNumericDimensionToPixelValue;
+
 var getClickableRowStyle = function getClickableRowStyle(props) {
   if (props.isRowClickable) {
-    return /*#__PURE__*/react.css("cursor:pointer;&:hover td{background:", designSystem.customProperties.backgroundColorForInputWhenHovered, ";}" + ("" ));
+    return /*#__PURE__*/react.css("cursor:pointer;&:hover td{background:", designSystem.customProperties.backgroundColorForInputWhenHovered, ";}" + ("" ), "" );
   }
 
   return '';
 };
 
-var _ref$1 = {
+var _ref = {
   name: "1jff5cf",
   styles: "position:unset;overflow-x:unset;overflow-y:unset"
 } ;
 
 var getDisabledSelfContainmentStyles = function getDisabledSelfContainmentStyles(props) {
   if (props.disableSelfContainment) {
-    return _ref$1;
+    return _ref;
   }
 
   return '';
 };
 
-var TableContainer = _styled__default['default']("div", {
-  target: "e15v36zu4"
+var TableContainer = _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(props.maxWidth), ";") : '';
+  return props.maxWidth && !props.disableSelfContainment ? "max-width: ".concat(convertNumericDimensionToPixelValue$1(props.maxWidth), ";") : '';
 }, " ", function (props) {
   return props.isBeingResized && "\n    * {\n      user-select: none;\n    }";
-}, " ", getDisabledSelfContainmentStyles, ";");
+}, " ", getDisabledSelfContainmentStyles, ";" + ("" ));
 
-var TableGrid = _styled__default['default']("table", {
-  target: "e15v36zu3"
+var TableGrid = _styled__default["default"]("table", {
+  target: "epk01s23"
 } )("display:grid;grid-template-columns:", function (props) {
   var _context;
 
-  return _mapInstanceProperty__default['default'](_context = props.columns).call(_context, function (column) {
+  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(props.maxHeight), ";") : '';
+  return props.maxHeight && !props.disableSelfContainment ? "max-height: ".concat(convertNumericDimensionToPixelValue$1(props.maxHeight), ";") : '';
 }, " ", function (props) {
   return props.resizedTotalWidth ? "max-width: ".concat(props.resizedTotalWidth, "px;") : '';
-}, " ", getDisabledSelfContainmentStyles, ";");
+}, " ", getDisabledSelfContainmentStyles, ";" + ("" ));
 
-var Header = _styled__default['default']("thead", {
-  target: "e15v36zu2"
+var Header = _styled__default["default"]("thead", {
+  target: "epk01s22"
 } )({
   name: "49aokf",
   styles: "display:contents"
 } );
 
-var Body = _styled__default['default']("tbody", {
-  target: "e15v36zu1"
+var Body = _styled__default["default"]("tbody", {
+  target: "epk01s21"
 } )({
   name: "49aokf",
   styles: "display:contents"
 } );
 
-var Row = _styled__default['default']("tr", {
-  target: "e15v36zu0"
-} )("display:contents;", getClickableRowStyle, " :hover,:focus-within{", RowExpandCollapseButton, "{opacity:1;}}");
+var Row = _styled__default["default"]("tr", {
+  target: "epk01s20"
+} )("display:contents;", getClickableRowStyle, " :hover,:focus-within{", RowExpandCollapseButton, "{opacity:1;}}" + ("" ));
 
-var Footer = _styled__default['default']("div", {
-  target: "essh900"
+var defaultProps$4 = {
+  horizontalCellAlignment: 'left'
+};
+
+var Footer = _styled__default["default"]("div", {
+  target: "e2ce7vj0"
 } )("box-sizing:border-box;display:block;", getPaddingStyle, " ", getHorizontalAlignmentStyle, " background-color:", designSystem.customProperties.colorSurface, ";border-top:1px solid ", designSystem.customProperties.colorNeutral90, ";border-bottom:1px solid ", designSystem.customProperties.colorNeutral90, ";", function (props) {
   return props.resizedTotalWidth ? "max-width: ".concat(props.resizedTotalWidth, "px;") : '';
-}, ";");
+}, ";" + ("" ));
 
 Footer.displayName = 'Footer';
-Footer.propTypes = {
-  children: PropTypes__default['default'].node.isRequired,
-  isCondensed: PropTypes__default['default'].bool,
-  horizontalCellAlignment: PropTypes__default['default'].oneOf(['left', 'center', 'right'])
-};
-Footer.defaultProps = {
-  horizontalCellAlignment: 'left'
-};
+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.customProperties.fontSizeDefault, ";font-family:inherit;" + ("" ));
+  return /*#__PURE__*/react.css("cursor:pointer;border:none;background:none;text-decoration:none;color:inherit;font:inherit;font-size:", designSystem.customProperties.fontSizeDefault, ";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)
+ * AND AngleUp or AngleDown icon is not shown
+ *
+ * GIVEN column is sortable and foucsed
+ * THEN AngleUpDown icon is hidden
+ * AND AngleUp or AngleDown icon is shown
+ */
+
 
 var getSortableHeaderStyles = function getSortableHeaderStyles(props) {
-  return /*#__PURE__*/react.css("width:100%;display:flex;align-items:center;svg[id='nonActiveSortingIcon'],svg[id='activeSortingIcon']{margin-left:", designSystem.customProperties.spacingS, ";flex-shrink:0;}svg[id='nonActiveSortingIcon']{display:", props.isActive ? 'none' : 'inline-block', ";}svg[id='activeSortingIcon']{display:", props.isActive ? 'inline-block' : 'none', ";}:hover,:focus{svg[id='nonActiveSortingIcon']{display:none;}svg[id='activeSortingIcon']{display:inline-block;*{fill:", designSystem.customProperties.colorNeutral, ";}}}" + ("" ));
+  return /*#__PURE__*/react.css("width:100%;display:flex;align-items:center;svg[data-icon-state='inactive'],svg[data-icon-state='active']{margin-left:", designSystem.customProperties.spacingS, ";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', ";}:hover,:focus{svg[data-icon-state='inactive']{display:none;}svg[data-icon-state='active']{display:inline-block;*{fill:", designSystem.customProperties.colorNeutral, ";}}}" + ("" ), "" );
 };
 
-var HeaderCellInner = _styled__default['default']("div", {
-  target: "e1hhhlpp3"
+var HeaderCellInner = _styled__default["default"]("div", {
+  target: "e1ipt8n23"
 } )("box-sizing:border-box;display:flex;justify-content:space-between;padding:0 ", function (props) {
   return props.isCondensed ? designSystem.customProperties.spacingS : designSystem.customProperties.spacingM;
 }, ";", getCellInnerStyles, " ", function (props) {
@@ -289,65 +296,75 @@ var HeaderCellInner = _styled__default['default']("div", {
   return props.as === 'button' ? getButtonStyle() : '';
 }, ";", function (props) {
   return props.shouldWrap ? '' : 'white-space: nowrap';
-}, ";");
+}, ";" + ("" ));
 
-var BaseHeaderCell = _styled__default['default']("th", {
-  target: "e1hhhlpp2"
+var BaseHeaderCell = _styled__default["default"]("th", {
+  target: "e1ipt8n22"
 } )("color:", designSystem.customProperties.colorSurface, ";background-color:", designSystem.customProperties.colorAccent, ";position:", function (props) {
   return props.disableHeaderStickiness ? 'relative' : 'sticky';
 }, ";top:0;z-index:1;padding:0;font-weight:normal;box-shadow:inset -1px 0 ", designSystem.customProperties.colorNeutral90, ";:hover,:active{z-index:2;}", HeaderCellInner, "{", function (props) {
   return props.shouldClipContent ? 'overflow: hidden;' : '';
-}, ";}");
+}, ";}" + ("" ));
 
-var HeaderLabelWrapper = _styled__default['default']("div", {
-  target: "e1hhhlpp1"
-} )("min-height:1.4em;margin:", designSystem.customProperties.spacingS, " 0;flex:1;");
+var HeaderLabelWrapper = _styled__default["default"]("div", {
+  target: "e1ipt8n21"
+} )("min-height:1.4em;margin:", designSystem.customProperties.spacingS, " 0;flex:1;" + ("" ));
 
-var HeaderIconWrapper = _styled__default['default']("div", {
-  target: "e1hhhlpp0"
-} )("display:inline-flex;align-items:center;justify-content:center;margin-right:", designSystem.customProperties.spacingS, ";padding:", designSystem.customProperties.spacingXs, " 0;");
+var HeaderIconWrapper = _styled__default["default"]("div", {
+  target: "e1ipt8n20"
+} )("display:inline-flex;align-items:center;justify-content:center;margin-right:", designSystem.customProperties.spacingS, ";padding:", designSystem.customProperties.spacingXs, " 0;" + ("" ));
 
-var ResizerIndicator = _styled__default['default']("div", {
-  target: "e1sg5cq71"
+var ResizerIndicator = _styled__default["default"]("div", {
+  target: "e1ccic7f1"
 } )("height:100%;width:3px;background:", designSystem.customProperties.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);' : '';
-}, ";");
+}, ";" + ("" ));
 
-var DraggableArea = _styled__default['default']("div", {
-  target: "e1sg5cq70"
-} )("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 DraggableArea = _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 react.jsx(DraggableArea, {
+  return jsxRuntime.jsx(DraggableArea, {
     role: "presentation",
-    onMouseDown: props.onMouseDown
-  }, react.jsx(ResizerIndicator, {
-    isOnDataCell: props.isOnDataCell
-  }));
+    onMouseDown: props.onMouseDown,
+    children: jsxRuntime.jsx(ResizerIndicator, {
+      isOnDataCell: props.isOnDataCell
+    })
+  });
 };
 
-ColumnResizer.displayName = 'ColumnResizer';
 ColumnResizer.propTypes = {};
+ColumnResizer.displayName = 'ColumnResizer';
+var Resizer = ColumnResizer;
 
-var ColumnResizingContext = /*#__PURE__*/React__default['default'].createContext({});
+var ColumnResizingContext = /*#__PURE__*/react$1.createContext({});
 
 var isFixedWidthValue = function isFixedWidthValue(value) {
-  return !_Number$isNaN__default['default'](_parseInt__default['default'](value, 10));
+  return !_Number$isNaN__default["default"](_parseInt__default["default"](String(value), 10));
 };
 
+var isFixedWidthValue$1 = isFixedWidthValue;
+
+function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _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) {
-  var _headerRef$current;
+  var _headerRef$current2;
 
-  var columnResizingReducer = React__default['default'].useContext(ColumnResizingContext);
-  var headerRef = React__default['default'].useRef(null);
+  var columnResizingReducer = react$1.useContext(ColumnResizingContext);
+  var headerRef = react$1.useRef(null);
 
   var onStartResizing = function onStartResizing(event) {
     columnResizingReducer.startResizing(headerRef, event);
   };
 
   var onDrag = function onDrag(event) {
-    return columnResizingReducer.onDragResizing(event, headerRef.current.cellIndex);
+    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() {
@@ -361,7 +378,7 @@ var HeaderCellWrapper = function HeaderCellWrapper(props) {
     window.removeEventListener('mouseup', onDragEnd);
   };
 
-  if (columnResizingReducer.getIsColumnBeingResized((_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.cellIndex)) {
+  if (columnResizingReducer.getIsColumnBeingResized((_headerRef$current2 = headerRef.current) === null || _headerRef$current2 === void 0 ? void 0 : _headerRef$current2.cellIndex)) {
     window.addEventListener('mousemove', onDrag);
     window.addEventListener('mouseup', onDragEnd);
   }
@@ -372,20 +389,26 @@ var HeaderCellWrapper = function HeaderCellWrapper(props) {
    */
 
 
-  var shouldClipContent = isFixedWidthValue(props.columnWidth) || columnResizingReducer.getHasTableBeenResized() || columnResizingReducer.getIsAnyColumnBeingResized();
-  return react.jsx(BaseHeaderCell, {
+  var shouldClipContent = props.columnWidth && isFixedWidthValue$1(props.columnWidth) || columnResizingReducer.getHasTableBeenResized() || columnResizingReducer.getIsAnyColumnBeingResized();
+  return jsxRuntime.jsxs(BaseHeaderCell, {
     ref: headerRef,
     "data-testid": "header-".concat(props.columnKey),
     "data-id": props.columnKey,
     shouldClipContent: shouldClipContent,
-    disableHeaderStickiness: props.disableHeaderStickiness
-  }, props.children, !props.disableResizing && react.jsx(ColumnResizer, {
-    onMouseDown: onStartResizing
-  }));
+    disableHeaderStickiness: props.disableHeaderStickiness,
+    children: [props.children, !props.disableResizing && jsxRuntime.jsx(Resizer, {
+      onMouseDown: onStartResizing
+    })]
+  });
 };
 
 HeaderCellWrapper.propTypes = {};
 HeaderCellWrapper.displayName = 'HeaderCellWrapper';
+var defaultProps$3 = {
+  sortDirection: 'desc',
+  disableHeaderStickiness: false,
+  horizontalCellAlignment: 'left'
+};
 
 var HeaderCell = function HeaderCell(props) {
   var sortableHeaderProps = {};
@@ -399,96 +422,126 @@ var HeaderCell = function HeaderCell(props) {
       as: 'button',
       label: props.sortDirection,
       onClick: function onClick() {
-        return props.onClick(props.columnKey, nextSortDirection);
+        return props.onClick && props.onClick(props.columnKey, nextSortDirection);
       },
       isActive: isActive,
       isSortable: true
     };
   }
 
-  return react.jsx(HeaderCellWrapper, {
+  return jsxRuntime.jsx(HeaderCellWrapper, {
     columnWidth: props.columnWidth,
     columnKey: props.columnKey,
     onColumnResized: props.onColumnResized,
     disableResizing: props.disableResizing,
-    disableHeaderStickiness: props.disableHeaderStickiness
-  }, react.jsx(HeaderCellInner, _extends({
-    shouldWrap: props.shouldWrap,
-    isCondensed: props.isCondensed,
-    horizontalCellAlignment: props.horizontalCellAlignment
-  }, sortableHeaderProps), props.iconComponent && react.jsx(HeaderIconWrapper, null, props.iconComponent), react.jsx(HeaderLabelWrapper, null, props.children), props.isSortable && react.jsx(React__default['default'].Fragment, null, react.jsx(icons.AngleUpDownIcon, {
-    size: "medium",
-    color: "surface",
-    id: "nonActiveSortingIcon"
-  }), react.jsx(SortingIcon, {
-    size: "medium",
-    color: "surface",
-    id: "activeSortingIcon"
-  }))));
+    disableHeaderStickiness: props.disableHeaderStickiness,
+    children: jsxRuntime.jsxs(HeaderCellInner, _objectSpread$3(_objectSpread$3({
+      shouldWrap: props.shouldWrap,
+      isCondensed: props.isCondensed,
+      horizontalCellAlignment: props.horizontalCellAlignment
+    }, sortableHeaderProps), {}, {
+      children: [props.iconComponent && jsxRuntime.jsx(HeaderIconWrapper, {
+        children: props.iconComponent
+      }), jsxRuntime.jsx(HeaderLabelWrapper, {
+        children: props.children
+      }), props.isSortable && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(icons.AngleUpDownIcon, {
+          size: "medium",
+          color: "surface",
+          "data-icon-state": "inactive"
+        }), jsxRuntime.jsx(SortingIcon, {
+          size: "medium",
+          color: "surface",
+          "data-icon-state": "active"
+        })]
+      })]
+    }))
+  });
 };
 
-HeaderCell.displayName = 'HeaderCell';
 HeaderCell.propTypes = {};
-HeaderCell.defaultProps = {
-  sortDirection: 'desc',
-  disableHeaderStickiness: false,
-  horizontalCellAlignment: 'left'
+HeaderCell.displayName = 'HeaderCell';
+HeaderCell.defaultProps = defaultProps$3;
+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); if (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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _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 = {
+  isTruncated: false,
+  shouldRenderBottomBorder: true
 };
 
 var DataCell = function DataCell(props) {
+  if (props.shouldRenderCollapseButton) ;
+
   var Icon = props.isRowCollapsed ? icons.RightTriangleFilledIcon : icons.RightTriangleLinearIcon;
-  return react.jsx(BaseCell, {
+  return jsxRuntime.jsxs(BaseCell, {
     onClick: props.onCellClick,
     shouldIgnoreRowClick: props.shouldIgnoreRowClick,
     shouldClipContent: props.isTruncated && !props.shouldRenderResizingIndicator,
-    shouldRenderBottomBorder: props.shouldRenderBottomBorder
-  }, react.jsx(CellInner, _extends({
-    isCondensed: props.isCondensed,
-    isTruncated: props.isTruncated,
-    verticalCellAlignment: props.verticalCellAlignment,
-    horizontalCellAlignment: props.horizontalCellAlignment
-  }, utils.filterDataAttributes(props)), props.children), props.shouldRenderCollapseButton && react.jsx(RowExpandCollapseButton, {
-    label: "Expand/Collapse Row",
-    onClick: function onClick(event) {
-      props.handleRowCollapseClick();
-      event.stopPropagation();
-    },
-    isRowCollapsed: props.isRowCollapsed
-  }, react.jsx(Icon, {
-    size: "small"
-  })), props.shouldRenderResizingIndicator && react.jsx(ColumnResizer, {
-    isOnDataCell: true
-  }));
+    shouldRenderBottomBorder: props.shouldRenderBottomBorder,
+    children: [jsxRuntime.jsx(CellInner, _objectSpread$2(_objectSpread$2({
+      isCondensed: props.isCondensed,
+      isTruncated: props.isTruncated,
+      verticalCellAlignment: props.verticalCellAlignment,
+      horizontalCellAlignment: props.horizontalCellAlignment
+    }, utils.filterDataAttributes(props)), {}, {
+      children: props.children
+    })), props.shouldRenderCollapseButton && jsxRuntime.jsx(RowExpandCollapseButton, {
+      label: "Expand/Collapse Row",
+      onClick: function onClick(event) {
+        if (props.handleRowCollapseClick) props.handleRowCollapseClick();
+        event.stopPropagation();
+      },
+      isRowCollapsed: props.isRowCollapsed,
+      children: jsxRuntime.jsx(Icon, {
+        size: "small"
+      })
+    }), props.shouldRenderResizingIndicator && jsxRuntime.jsx(Resizer, {
+      isOnDataCell: true
+    })]
+  });
 };
 
-DataCell.displayName = 'DataCell';
 DataCell.propTypes = {};
-DataCell.defaultProps = {
-  isTruncated: false,
-  shouldRenderBottomBorder: true
+DataCell.displayName = 'DataCell';
+DataCell.defaultProps = defaultProps$2;
+var DataCell$1 = DataCell;
+
+var defaultProps$1 = {
+  isCondensed: false,
+  shouldClipContent: false,
+  verticalCellAlignment: 'top',
+  horizontalCellAlignment: 'left',
+  shouldRenderBottomBorder: true,
+  // @ts-ignore
+  itemRenderer: function itemRenderer(row, column) {
+    return row[column.key];
+  }
 };
 
 var DataRow = function DataRow(props) {
   var _context, _context2;
 
-  var _React$useContext = React__default['default'].useContext(ColumnResizingContext),
-      getIsColumnBeingResized = _React$useContext.getIsColumnBeingResized;
+  var _ref = react$1.useContext(ColumnResizingContext),
+      getIsColumnBeingResized = _ref.getIsColumnBeingResized;
 
-  var rowHasTruncatedColumn = _someInstanceProperty__default['default'](_context = props.columns).call(_context, function (column) {
+  var rowHasTruncatedColumn = _someInstanceProperty__default["default"](_context = props.columns).call(_context, function (column) {
     return column.isTruncated;
   });
 
-  var _React$useState = React__default['default'].useState(rowHasTruncatedColumn),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isRowCollapsed = _React$useState2[0],
-      collapseRow = _React$useState2[1];
+  var _useState = react$1.useState(rowHasTruncatedColumn),
+      _useState2 = _slicedToArray(_useState, 2),
+      isRowCollapsed = _useState2[0],
+      collapseRow = _useState2[1];
 
   var handleRowCollapseClick = function handleRowCollapseClick() {
     collapseRow(!isRowCollapsed);
   }; // update the collapsed state if isTruncated options are changed for the whole row
 
 
-  React__default['default'].useEffect(function () {
+  react$1.useEffect(function () {
     if (rowHasTruncatedColumn) {
       collapseRow(true);
     } else {
@@ -500,70 +553,67 @@ var DataRow = function DataRow(props) {
     return rowHasTruncatedColumn && totalColumnsLength - 1 === currentColumnIndex;
   };
 
-  return react.jsx(Row, {
-    isRowClickable: props.onRowClick
-  }, _mapInstanceProperty__default['default'](_context2 = props.columns).call(_context2, function (column, columnIndex) {
-    var _context3, _context4;
-
-    return react.jsx(DataCell, {
-      key: _concatInstanceProperty__default['default'](_context3 = "".concat(props.row.id, "-")).call(_context3, column.key),
-      "data-testid": _concatInstanceProperty__default['default'](_context4 = "cell-".concat(props.rowIndex, "-")).call(_context4, column.key),
-      isTruncated: column.isTruncated && isRowCollapsed,
-      isCondensed: props.isCondensed,
-      isRowCollapsed: isRowCollapsed,
-      verticalCellAlignment: props.verticalCellAlignment,
-      horizontalCellAlignment: column.align ? column.align : props.horizontalCellAlignment,
-      shouldIgnoreRowClick: column.shouldIgnoreRowClick,
-      handleRowCollapseClick: handleRowCollapseClick,
-      shouldRenderCollapseButton: shouldRenderCollapseButton(props.columns.length, columnIndex),
-      onCellClick: props.onRowClick && !column.shouldIgnoreRowClick ? function () {
-        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);
-      } : undefined,
-      shouldClipContent: props.shouldClipContent,
-      shouldRenderBottomBorder: props.shouldRenderBottomBorder,
-      shouldRenderResizingIndicator: getIsColumnBeingResized(columnIndex)
-    }, column.renderItem ? column.renderItem(props.row, isRowCollapsed) : props.itemRenderer(props.row, column, isRowCollapsed));
-  }));
+  return jsxRuntime.jsx(Row, {
+    isRowClickable: props.onRowClick,
+    children: _mapInstanceProperty__default["default"](_context2 = props.columns).call(_context2, function (column, columnIndex) {
+      var _context3, _context4;
+
+      return jsxRuntime.jsx(DataCell$1, {
+        "data-testid": _concatInstanceProperty__default["default"](_context4 = "cell-".concat(props.rowIndex, "-")).call(_context4, column.key),
+        isTruncated: column.isTruncated && isRowCollapsed,
+        isCondensed: props.isCondensed,
+        isRowCollapsed: isRowCollapsed,
+        verticalCellAlignment: props.verticalCellAlignment,
+        horizontalCellAlignment: column.align ? column.align : props.horizontalCellAlignment,
+        shouldIgnoreRowClick: column.shouldIgnoreRowClick,
+        handleRowCollapseClick: handleRowCollapseClick,
+        shouldRenderCollapseButton: shouldRenderCollapseButton(props.columns.length, columnIndex),
+        onCellClick: props.onRowClick && !column.shouldIgnoreRowClick ? function () {
+          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);
+        } : undefined,
+        shouldRenderBottomBorder: props.shouldRenderBottomBorder,
+        shouldRenderResizingIndicator: getIsColumnBeingResized(columnIndex),
+        children: column.renderItem ? column.renderItem(props.row, isRowCollapsed) : props.itemRenderer(props.row, column, isRowCollapsed)
+      }, _concatInstanceProperty__default["default"](_context3 = "".concat(props.row.id, "-")).call(_context3, column.key));
+    })
+  });
 };
 
 DataRow.propTypes = {};
-DataRow.defaultProps = {
-  isCondensed: false,
-  shouldClipContent: false,
-  verticalCellAlignment: 'top',
-  horizontalCellAlignment: 'left',
-  shouldRenderBottomBorder: true,
-  itemRenderer: function itemRenderer(row, column) {
-    return row[column.key];
-  }
-};
+DataRow.defaultProps = defaultProps$1;
 DataRow.displayName = 'DataRow';
+var DataRow$1 = DataRow;
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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 ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _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; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$1(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _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(initialSize, initialMousePosition, newMousePosition) {
+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);
   return minSize > newSize ? minSize : newSize;
 };
 
-var setColumnWidth = function setColumnWidth(columns, position, value) {
+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;
   // columns => comes from state.sizes which reflects component's state
   // any update to the columns results in updating the state
-  // eslint-disable-next-line no-param-reassign
-  columns[position] = _objectSpread(_objectSpread({}, columns[position]), {}, {
+  columns[position] = _objectSpread$1(_objectSpread$1({}, columns[position]), {}, {
     width: value
   });
   return columns;
 };
 
 var getGridTemplateColumnsStyle = function getGridTemplateColumnsStyle(columns) {
-  return "".concat(_mapInstanceProperty__default['default'](columns).call(columns, function (width) {
+  return "".concat(_mapInstanceProperty__default["default"](columns).call(columns, function (width) {
     return "".concat(width || 0, "px");
   }).join(' '));
 };
@@ -583,25 +633,25 @@ function reducer(state, action) {
   switch (action.type) {
     case 'reset':
       {
-        return _objectSpread({}, initialState(state.tableRef));
+        return _objectSpread$1({}, initialState(state.tableRef));
       }
 
     case 'registerColumnMeasurements':
       {
-        return _objectSpread(_objectSpread({}, state), {}, {
+        return _objectSpread$1(_objectSpread$1({}, state), {}, {
           sizes: action.payload.sizes
         });
       }
 
     case 'startResizing':
-      return _objectSpread(_objectSpread({}, state), {}, {
+      return _objectSpread$1(_objectSpread$1({}, state), {}, {
         initialColWidth: action.payload.initialColWidth,
         initialMousePosition: action.payload.initialMousePosition,
         columnBeingResized: action.payload.columnBeingResized
       });
 
     case 'finishResizing':
-      return _objectSpread(_objectSpread({}, state), {}, {
+      return _objectSpread$1(_objectSpread$1({}, state), {}, {
         initialColWidth: undefined,
         initialMousePosition: undefined,
         columnBeingResized: undefined,
@@ -609,33 +659,35 @@ function reducer(state, action) {
       });
 
     default:
-      throw new Error("Action type '".concat(action.type, "' for 'useManualColumnResizing' reducer is not defined."));
+      return state;
   }
 }
 
 var useManualResizingReducer = function useManualResizingReducer(tableRef) {
-  var _React$useReducer = React__default['default'].useReducer(reducer, initialState(tableRef)),
-      _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
-      manualResizingState = _React$useReducer2[0],
-      dispatch = _React$useReducer2[1];
+  var _useReducer = react$1.useReducer(reducer, initialState(tableRef)),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      manualResizingState = _useReducer2[0],
+      dispatch = _useReducer2[1];
 
-  React__default['default'].useDebugValue(manualResizingState);
+  react$1.useDebugValue(manualResizingState);
   return [manualResizingState, dispatch];
 };
 
 var useManualColumnResizing = function 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
 
 
-  if (state.tableRef.current && !state.sizes) {
+  if ((_state$tableRef = state.tableRef) !== null && _state$tableRef !== void 0 && _state$tableRef.current && !state.sizes) {
     var _context;
 
     var 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, function (header) {
       renderedColumnMeasurements.push({
         key: header.getAttribute('data-id'),
         width: header.getBoundingClientRect().width
@@ -662,15 +714,17 @@ var useManualColumnResizing = function useManualColumnResizing(tableRef) {
   };
 
   var onDragResizing = function onDragResizing(event, columnIndex) {
-    return (// throttle and sync resizing update rate with screen refresh rate
-      requestAnimationFrame(function () {
-        var width = calculateNewSize(state.initialColWidth, state.initialMousePosition, event.clientX);
-        var newColumnsSizes = setColumnWidth(state.sizes, columnIndex, width);
-        state.tableRef.current.style.gridTemplateColumns = getGridTemplateColumnsStyle(_mapInstanceProperty__default['default'](newColumnsSizes).call(newColumnsSizes, function (newColumnsSize) {
-          return newColumnsSize.width;
-        }));
-      })
-    );
+    // throttle and sync resizing update rate with screen refresh rate
+    requestAnimationFrame(function () {
+      var _state$tableRef2;
+
+      var width = calculateNewSize(state.initialColWidth, state.initialMousePosition, event.clientX);
+      var 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;
+      }));
+    });
   };
 
   var finishResizing = function finishResizing() {
@@ -699,12 +753,15 @@ var useManualColumnResizing = function useManualColumnResizing(tableRef) {
       return -1;
     }
 
-    return _reduceInstanceProperty__default['default'](_context2 = state.sizes).call(_context2, function (a, b) {
+    return _reduceInstanceProperty__default["default"](_context2 = state.sizes).call(_context2, function (a, b) {
       return a + b.width;
     }, 0);
   };
 
   var reset = function reset() {
+    var _state$tableRef3;
+
+    if (!((_state$tableRef3 = state.tableRef) !== null && _state$tableRef3 !== void 0 && _state$tableRef3.current)) return;
     state.tableRef.current.style.gridTemplateColumns = '';
     return dispatch({
       type: 'reset'
@@ -715,7 +772,7 @@ var useManualColumnResizing = function useManualColumnResizing(tableRef) {
     return state.sizes;
   };
 
-  React__default['default'].useDebugValue(state);
+  react$1.useDebugValue(state);
   return {
     reset: reset,
     getSizes: getSizes,
@@ -729,11 +786,17 @@ var useManualColumnResizing = function useManualColumnResizing(tableRef) {
   };
 };
 
+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); if (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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source), true)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context5; _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) {
+  return _reduceInstanceProperty__default["default"](columns).call(columns, function (acc, currentValue) {
     var _context;
 
-    return _concatInstanceProperty__default['default'](_context = []).call(_context, _toConsumableArray(acc), [{
+    return _concatInstanceProperty__default["default"](_context = []).call(_context, _toConsumableArray(acc), [{
       key: currentValue.key,
       width: currentValue.width
     }]);
@@ -746,10 +809,22 @@ var shouldRenderRowBottomBorder = function shouldRenderRowBottomBorder(rowIndex,
   return false;
 };
 
+var defaultProps = {
+  isCondensed: false,
+  wrapHeaderLabels: true,
+  verticalCellAlignment: 'top',
+  horizontalCellAlignment: 'left',
+  disableSelfContainment: false,
+  // @ts-ignore
+  itemRenderer: function itemRenderer(row, column) {
+    return row[column.key];
+  }
+};
+
 var DataTable = function DataTable(props) {
   var _context2, _context3;
-  var tableRef = React__default['default'].useRef();
-  var columnResizingReducer = useManualColumnResizing(tableRef); // if the table columns have been measured
+  var tableRef = react$1.useRef();
+  var 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
 
@@ -762,90 +837,88 @@ var DataTable = function DataTable(props) {
     columns: columnsInfo,
     isCondensed: props.isCondensed
   };
-  React__default['default'].useLayoutEffect(function () {
-    if (!isEqual__default['default'](prevLayout, currentLayout)) {
+  var hasLayoutChanged = !isEqual__default["default"](prevLayout, currentLayout);
+  react$1.useLayoutEffect(function () {
+    if (hasLayoutChanged) {
       columnResizingReducer.reset();
     }
-  }, [prevLayout, currentLayout, columnResizingReducer]);
+  }, [columnResizingReducer, hasLayoutChanged]);
   var hasTableBeenResized = columnResizingReducer.getHasTableBeenResized();
-  var resizedTotalWidth = hasTableBeenResized ? columnResizingReducer.getTotalResizedTableWidth() + ( // if the table has a maxHeight, it might add a scrollbar which takes space inside the container
+  var 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 react.jsx(TableContainer, {
+  return jsxRuntime.jsxs(TableContainer, {
     maxWidth: props.maxWidth,
     isBeingResized: columnResizingReducer.getIsAnyColumnBeingResized(),
-    disableSelfContainment: props.disableSelfContainment
-  }, react.jsx(TableGrid, _extends({
-    ref: tableRef
-  }, utils.filterDataAttributes(props), {
-    columns: props.columns,
-    maxHeight: props.maxHeight,
-    disableSelfContainment: props.disableSelfContainment,
-    resizedTotalWidth: resizedTotalWidth
-  }), react.jsx(ColumnResizingContext.Provider, {
-    value: columnResizingReducer
-  }, react.jsx(Header, null, react.jsx(Row, null, _mapInstanceProperty__default['default'](_context2 = props.columns).call(_context2, function (column) {
-    return react.jsx(HeaderCell, {
-      key: column.key,
-      shouldWrap: props.wrapHeaderLabels,
+    disableSelfContainment: !!props.disableSelfContainment,
+    children: [jsxRuntime.jsx(TableGrid, _objectSpread(_objectSpread({
+      ref: tableRef
+    }, utils.filterDataAttributes(props)), {}, {
+      columns: props.columns,
+      maxHeight: props.maxHeight,
+      disableSelfContainment: !!props.disableSelfContainment,
+      resizedTotalWidth: resizedTotalWidth,
+      children: jsxRuntime.jsxs(ColumnResizingContext.Provider, {
+        value: columnResizingReducer,
+        children: [jsxRuntime.jsx(Header, {
+          children: jsxRuntime.jsx(Row, {
+            children: props.columns && _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);
+            })
+          })
+        }), jsxRuntime.jsx(Body, {
+          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)
+            }));
+          })
+        })]
+      })
+    })), props.footer && jsxRuntime.jsx(Footer$1, {
+      "data-testid": "footer",
       isCondensed: props.isCondensed,
-      iconComponent: column.headerIcon,
-      onColumnResized: props.onColumnResized,
-      disableResizing: column.disableResizing,
-      verticalCellAlignment: props.verticalCellAlignment,
-      horizontalCellAlignment: column.align ? column.align : props.horizontalCellAlignment,
-      disableHeaderStickiness: props.disableHeaderStickiness,
-      columnWidth: column.width
-      /* Sorting Props */
-      ,
-      onClick: props.onSortChange,
-      sortedBy: props.sortedBy,
-      columnKey: column.key,
-      isSortable: column.isSortable,
-      sortDirection: props.sortDirection
-    }, column.label);
-  }))), react.jsx(Body, null, _mapInstanceProperty__default['default'](_context3 = props.rows).call(_context3, function (row, rowIndex) {
-    return react.jsx(DataRow, _extends({}, props, {
-      row: row,
-      key: row.id,
-      rowIndex: rowIndex,
-      shouldClipContent: columnResizingReducer.getIsAnyColumnBeingResized() || hasTableBeenResized,
-      shouldRenderBottomBorder: shouldRenderRowBottomBorder(rowIndex, props.rows.length, props.footer)
-    }));
-  })))), props.footer && react.jsx(Footer, {
-    "data-testid": "footer",
-    isCondensed: props.isCondensed,
-    horizontalCellAlignment: props.horizontalCellAlignment,
-    resizedTotalWidth: resizedTotalWidth
-  }, props.footer));
+      horizontalCellAlignment: props.horizontalCellAlignment,
+      resizedTotalWidth: resizedTotalWidth,
+      children: props.footer
+    })]
+  });
 };
 
 DataTable.propTypes = {};
-DataTable.defaultProps = {
-  isCondensed: false,
-  wrapHeaderLabels: true,
-  verticalCellAlignment: 'top',
-  horizontalCellAlignment: 'left',
-  disableSelfContainment: false,
-  itemRenderer: function itemRenderer(row, column) {
-    return row[column.key];
-  }
-};
+DataTable.defaultProps = defaultProps;
 DataTable.displayName = 'DataTable';
+var DataTable$1 = DataTable;
 
-// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '12.2.1';
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.5";
 
 Object.defineProperty(exports, 'useRowSelection', {
   enumerable: true,
-  get: function () {
-    return hooks.useRowSelection;
-  }
+  get: function () { return hooks.useRowSelection; }
 });
 Object.defineProperty(exports, 'useSorting', {
   enumerable: true,
-  get: function () {
-    return hooks.useSorting;
-  }
+  get: function () { return hooks.useSorting; }
 });
-exports.default = DataTable;
+exports["default"] = DataTable$1;
 exports.version = version;