@commercetools-uikit/data-table 12.2.4 → 12.2.8

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

@@ -4,9 +4,9 @@ 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');
-require('@babel/runtime-corejs3/core-js-stable/array/is-array');
 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');
@@ -17,7 +17,6 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
 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 PropTypes = require('prop-types');
 var isEqual = require('lodash/isEqual');
 var utils = require('@commercetools-uikit/utils');
 var hooks = require('@commercetools-uikit/hooks');
@@ -25,7 +24,6 @@ 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');
@@ -46,7 +44,6 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 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 PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
@@ -150,7 +147,7 @@ var _ref3 = {
 } ;
 
 var CellInner = _styled__default["default"]("div", {
-  target: "ecaj4zv3"
+  target: "e10u1n7e3"
 } )("box-sizing:border-box;flex:1;", getPaddingStyle, " ", getCellInnerStyles, " ", function (props) {
   return props.shouldClipContent ? _ref3 : '';
 }, ";" + ("" ));
@@ -166,7 +163,7 @@ var _ref2 = {
 } ;
 
 var BaseCell = _styled__default["default"]("td", {
-  target: "ecaj4zv2"
+  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) {
@@ -176,7 +173,7 @@ var BaseCell = _styled__default["default"]("td", {
 }, ";" + ("" ));
 
 _styled__default["default"]("td", {
-  target: "ecaj4zv1"
+  target: "e10u1n7e1"
 } )("position:", function (props) {
   return props.disableFooterStickiness ? 'relative' : 'sticky';
 }, ";left:0;bottom:0;grid-column:1/", function (props) {
@@ -184,7 +181,7 @@ _styled__default["default"]("td", {
 }, ";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"
+  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;" + ("" ));
@@ -217,7 +214,7 @@ var getDisabledSelfContainmentStyles = function getDisabledSelfContainmentStyles
 };
 
 var TableContainer = _styled__default["default"]("div", {
-  target: "e15v36zu4"
+  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) {
@@ -225,11 +222,11 @@ var TableContainer = _styled__default["default"]("div", {
 }, " ", getDisabledSelfContainmentStyles, ";" + ("" ));
 
 var TableGrid = _styled__default["default"]("table", {
-  target: "e15v36zu3"
+  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) {
@@ -239,38 +236,35 @@ var TableGrid = _styled__default["default"]("table", {
 }, " ", getDisabledSelfContainmentStyles, ";" + ("" ));
 
 var Header = _styled__default["default"]("thead", {
-  target: "e15v36zu2"
+  target: "epk01s22"
 } )({
   name: "49aokf",
   styles: "display:contents"
 } );
 
 var Body = _styled__default["default"]("tbody", {
-  target: "e15v36zu1"
+  target: "epk01s21"
 } )({
   name: "49aokf",
   styles: "display:contents"
 } );
 
 var Row = _styled__default["default"]("tr", {
-  target: "e15v36zu0"
+  target: "epk01s20"
 } )("display:contents;", getClickableRowStyle, " :hover,:focus-within{", RowExpandCollapseButton, "{opacity:1;}}" + ("" ));
 
+var defaultProps$4 = {
+  horizontalCellAlignment: 'left'
+};
+
 var Footer = _styled__default["default"]("div", {
-  target: "essh900"
+  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() {
@@ -292,7 +286,7 @@ var getSortableHeaderStyles = function getSortableHeaderStyles(props) {
 };
 
 var HeaderCellInner = _styled__default["default"]("div", {
-  target: "e1hhhlpp3"
+  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) {
@@ -304,7 +298,7 @@ var HeaderCellInner = _styled__default["default"]("div", {
 }, ";" + ("" ));
 
 var BaseHeaderCell = _styled__default["default"]("th", {
-  target: "e1hhhlpp2"
+  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) {
@@ -312,22 +306,22 @@ var BaseHeaderCell = _styled__default["default"]("th", {
 }, ";}" + ("" ));
 
 var HeaderLabelWrapper = _styled__default["default"]("div", {
-  target: "e1hhhlpp1"
+  target: "e1ipt8n21"
 } )("min-height:1.4em;margin:", designSystem.customProperties.spacingS, " 0;flex:1;" + ("" ));
 
 var HeaderIconWrapper = _styled__default["default"]("div", {
-  target: "e1hhhlpp0"
+  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"
+  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"
+  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) {
@@ -340,14 +334,14 @@ var ColumnResizer = function ColumnResizer(props) {
   });
 };
 
-ColumnResizer.displayName = 'ColumnResizer';
 ColumnResizer.propTypes = {};
+ColumnResizer.displayName = 'ColumnResizer';
 var Resizer = ColumnResizer;
 
 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;
@@ -357,7 +351,7 @@ function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["d
 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$1.useContext(ColumnResizingContext);
   var headerRef = react$1.useRef(null);
@@ -367,7 +361,9 @@ var HeaderCellWrapper = function HeaderCellWrapper(props) {
   };
 
   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() {
@@ -381,7 +377,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);
   }
@@ -392,7 +388,7 @@ var HeaderCellWrapper = function HeaderCellWrapper(props) {
    */
 
 
-  var shouldClipContent = isFixedWidthValue$1(props.columnWidth) || columnResizingReducer.getHasTableBeenResized() || columnResizingReducer.getIsAnyColumnBeingResized();
+  var shouldClipContent = props.columnWidth && isFixedWidthValue$1(props.columnWidth) || columnResizingReducer.getHasTableBeenResized() || columnResizingReducer.getIsAnyColumnBeingResized();
   return jsxRuntime.jsxs(BaseHeaderCell, {
     ref: headerRef,
     "data-testid": "header-".concat(props.columnKey),
@@ -405,8 +401,12 @@ var HeaderCellWrapper = function HeaderCellWrapper(props) {
   });
 };
 
-HeaderCellWrapper.propTypes = {};
 HeaderCellWrapper.displayName = 'HeaderCellWrapper';
+var defaultProps$3 = {
+  sortDirection: 'desc',
+  disableHeaderStickiness: false,
+  horizontalCellAlignment: 'left'
+};
 
 var HeaderCell = function HeaderCell(props) {
   var sortableHeaderProps = {};
@@ -420,7 +420,7 @@ 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
@@ -457,20 +457,22 @@ var HeaderCell = function HeaderCell(props) {
   });
 };
 
-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 jsxRuntime.jsxs(BaseCell, {
     onClick: props.onCellClick,
@@ -487,7 +489,7 @@ var DataCell = function DataCell(props) {
     })), props.shouldRenderCollapseButton && jsxRuntime.jsx(RowExpandCollapseButton, {
       label: "Expand/Collapse Row",
       onClick: function onClick(event) {
-        props.handleRowCollapseClick();
+        if (props.handleRowCollapseClick) props.handleRowCollapseClick();
         event.stopPropagation();
       },
       isRowCollapsed: props.isRowCollapsed,
@@ -500,19 +502,28 @@ var DataCell = function DataCell(props) {
   });
 };
 
-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 _useContext = react$1.useContext(ColumnResizingContext),
-      getIsColumnBeingResized = _useContext.getIsColumnBeingResized;
+  var _ref = react$1.useContext(ColumnResizingContext),
+      getIsColumnBeingResized = _ref.getIsColumnBeingResized;
 
   var rowHasTruncatedColumn = _someInstanceProperty__default["default"](_context = props.columns).call(_context, function (column) {
     return column.isTruncated;
@@ -560,7 +571,6 @@ var DataRow = function DataRow(props) {
 
           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),
         children: column.renderItem ? column.renderItem(props.row, isRowCollapsed) : props.itemRenderer(props.row, column, isRowCollapsed)
@@ -570,16 +580,7 @@ var DataRow = function DataRow(props) {
 };
 
 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;
 
@@ -588,16 +589,21 @@ function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["d
 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$1(_objectSpread$1({}, columns[position]), {}, {
     width: value
   });
@@ -651,7 +657,7 @@ function reducer(state, action) {
       });
 
     default:
-      throw new Error("Action type '".concat(action.type, "' for 'useManualColumnResizing' reducer is not defined."));
+      return state;
   }
 }
 
@@ -666,13 +672,15 @@ var useManualResizingReducer = function useManualResizingReducer(tableRef) {
 };
 
 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 = [];
@@ -704,15 +712,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.toString();
+      }));
+    });
   };
 
   var finishResizing = function finishResizing() {
@@ -747,6 +757,9 @@ var useManualColumnResizing = function useManualColumnResizing(tableRef) {
   };
 
   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'
@@ -794,6 +807,19 @@ var shouldRenderRowBottomBorder = function shouldRenderRowBottomBorder(rowIndex,
   return false;
 };
 
+var defaultProps = {
+  columns: [],
+  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$1.useRef();
@@ -817,18 +843,18 @@ var DataTable = function DataTable(props) {
     }
   }, [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 jsxRuntime.jsxs(TableContainer, {
     maxWidth: props.maxWidth,
     isBeingResized: columnResizingReducer.getIsAnyColumnBeingResized(),
-    disableSelfContainment: props.disableSelfContainment,
+    disableSelfContainment: !!props.disableSelfContainment,
     children: [jsxRuntime.jsx(TableGrid, _objectSpread(_objectSpread({
       ref: tableRef
     }, utils.filterDataAttributes(props)), {}, {
       columns: props.columns,
       maxHeight: props.maxHeight,
-      disableSelfContainment: props.disableSelfContainment,
+      disableSelfContainment: !!props.disableSelfContainment,
       resizedTotalWidth: resizedTotalWidth,
       children: jsxRuntime.jsxs(ColumnResizingContext.Provider, {
         value: columnResizingReducer,
@@ -841,13 +867,12 @@ var DataTable = function DataTable(props) {
                 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,
+                onClick: props.onSortChange && props.onSortChange,
                 sortedBy: props.sortedBy,
                 columnKey: column.key,
                 isSortable: column.isSortable,
@@ -879,21 +904,12 @@ var DataTable = function DataTable(props) {
 };
 
 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.4';
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.8";
 
 Object.defineProperty(exports, 'useRowSelection', {
   enumerable: true,