@commercetools-uikit/data-table 16.0.0 → 16.1.0

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

@@ -54,174 +54,139 @@ const getPaddingStyle = props => {
   if (props.isCondensed) return /*#__PURE__*/react.css("padding:", designSystem.designTokens.paddingForTableCellAsCondensed, ";" + ("" ), "" );
   return /*#__PURE__*/react.css("padding:", designSystem.designTokens.paddingForTableCell, ";" + ("" ), "" );
 };
-
 var _ref8 = {
   name: "9nkbgg",
   styles: "text-align:left;justify-self:flex-start"
 } ;
-
 var _ref9 = {
   name: "1p06wbt",
   styles: "text-align:right;justify-self:flex-end"
 } ;
-
 var _ref10 = {
   name: "weshh4",
   styles: "text-align:center;justify-self:center"
 } ;
-
 const getHorizontalAlignmentStyle = props => {
   if (props.horizontalCellAlignment === 'center') {
     return _ref10;
   }
-
   if (props.horizontalCellAlignment === 'right') {
     return _ref9;
   }
-
   return _ref8;
 };
-
 var _ref5 = {
   name: "xyzkeb",
   styles: "align-self:flex-start"
 } ;
-
 var _ref6 = {
   name: "1duj7gx",
   styles: "align-self:flex-end"
 } ;
-
 var _ref7 = {
   name: "qbt5ty",
   styles: "align-self:center"
 } ;
-
 const getVerticalAlignmentStyle = props => {
   if (props.verticalCellAlignment === 'center') {
     return _ref7;
   }
-
   if (props.verticalCellAlignment === 'bottom') {
     return _ref6;
   }
-
   return _ref5;
 };
-
 var _ref4 = {
   name: "ucb1au",
   styles: "overflow:hidden;white-space:nowrap;text-overflow:ellipsis"
 } ;
-
 const getTruncatedStyle = props => {
   if (props.isTruncated) {
     return _ref4;
   }
-
   return '';
 };
+
 /* the :focus-within state doesn't enable the outline styles,
   so we have to set them manually. */
-
-
 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;}"
 } ;
-
 const getCellInnerStyles = props => {
   return [getVerticalAlignmentStyle(props), getHorizontalAlignmentStyle(props), getTruncatedStyle(props), outlineStyles];
 };
+
 /**
  * The `shouldClipContent` overflow rule should only be enabled upon manual column resizing,
  * otherwise it will change the way css-grid automatically allocates space for the cells of the table,
  * preferring to clip the cells instead and adding horizontal scrollbar to the table container
  */
-
-
 var _ref3 = {
   name: "d3v9zr",
   styles: "overflow:hidden"
 } ;
-
 const CellInner = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e10u1n7e3"
 } )("box-sizing:border-box;flex:1;", getPaddingStyle, " ", getCellInnerStyles, " ", props => props.shouldClipContent ? _ref3 : '', ";" + ("" ));
-
 var _ref$1 = {
   name: "1a5erbp",
   styles: "cursor:auto"
 } ;
-
 var _ref2 = {
   name: "d3v9zr",
   styles: "overflow:hidden"
 } ;
-
 const BaseCell = /*#__PURE__*/_styled__default["default"]("td", {
   target: "e10u1n7e2"
 } )("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:", 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;" + ("" ));
-
 const RowExpandCollapseButton = /*#__PURE__*/_styled__default["default"](AccessibleButton__default["default"], {
   target: "e10u1n7e0"
 } )("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;" + ("" ));
 
 const convertNumericDimensionToPixelValue = dimensionValue => typeof dimensionValue === 'number' ? "".concat(dimensionValue, "px") : dimensionValue;
-
 var convertNumericDimensionToPixelValue$1 = convertNumericDimensionToPixelValue;
 
 const getClickableRowStyle = props => {
   if (props.isRowClickable) {
     return /*#__PURE__*/react.css("cursor:pointer;&:hover td{background:", designSystem.designTokens.backgroundColorForTableCellWhenHovered, ";}" + ("" ), "" );
   }
-
   return '';
 };
-
 var _ref = {
   name: "1jff5cf",
   styles: "position:unset;overflow-x:unset;overflow-y:unset"
 } ;
-
 const getDisabledSelfContainmentStyles = props => {
   if (props.disableSelfContainment) {
     return _ref;
   }
-
   return '';
 };
-
 const TableContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "epk01s24"
 } )("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, ";" + ("" ));
-
 const TableGrid = /*#__PURE__*/_styled__default["default"]("table", {
   target: "epk01s23"
 } )("display:grid;grid-template-columns:", props => {
   var _context;
-
   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, ";" + ("" ));
-
 const TableHeader = /*#__PURE__*/_styled__default["default"]("thead", {
   target: "epk01s22"
 } )({
   name: "49aokf",
   styles: "display:contents"
 } );
-
 const TableBody = /*#__PURE__*/_styled__default["default"]("tbody", {
   target: "epk01s21"
 } )({
   name: "49aokf",
   styles: "display:contents"
 } );
-
 const TableRow = /*#__PURE__*/_styled__default["default"]("tr", {
   target: "epk01s20"
 } )("display:contents;", getClickableRowStyle, " :hover,:focus-within{", RowExpandCollapseButton, "{opacity:1;}}" + ("" ));
@@ -229,16 +194,15 @@ const TableRow = /*#__PURE__*/_styled__default["default"]("tr", {
 const defaultProps$4 = {
   horizontalCellAlignment: 'left'
 };
-
 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, ";", props => props.resizedTotalWidth ? "max-width: ".concat(props.resizedTotalWidth, "px;") : '', ";" + ("" ));
-
 Footer.displayName = 'Footer';
 Footer.defaultProps = defaultProps$4;
 var Footer$1 = Footer;
 
 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)
@@ -249,21 +213,16 @@ const getButtonStyle = () => /*#__PURE__*/react.css("cursor:pointer;border:none;
  * AND AngleUp or AngleDown icon is shown
  */
 
-
 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;}}" + ("" ), "" );
-
 const HeaderCellInner = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1ipt8n23"
 } )("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:", 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;" + ("" ));
-
 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;" + ("" ));
@@ -272,11 +231,9 @@ const ResizerIndicator = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1ccic7f1"
 } )("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);' : '', ";" + ("" ));
-
 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;}}" + ("" ));
-
 const ColumnResizer = props => jsxRuntime.jsx(DraggableArea, {
   role: "presentation",
   onMouseDown: props.onMouseDown,
@@ -284,7 +241,6 @@ const ColumnResizer = props => jsxRuntime.jsx(DraggableArea, {
     isOnDataCell: props.isOnDataCell
   })
 });
-
 ColumnResizer.propTypes = {};
 ColumnResizer.displayName = 'ColumnResizer';
 var Resizer = ColumnResizer;
@@ -294,43 +250,31 @@ var ColumnResizingContext = /*#__PURE__*/react$1.createContext({});
 const isFixedWidthValue = value => {
   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); 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 _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; }
-
 const HeaderCellWrapper = props => {
   var _headerRef$current2;
-
   const _useTheme = designSystem.useTheme(),
-        isNewTheme = _useTheme.isNewTheme;
-
+    isNewTheme = _useTheme.isNewTheme;
   const columnResizingReducer = react$1.useContext(ColumnResizingContext);
   const headerRef = react$1.useRef(null);
-
   const onStartResizing = event => {
     columnResizingReducer.startResizing(headerRef, 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);
   };
-
   const onDragEnd = () => {
     const finalSizes = columnResizingReducer.finishResizing();
-
     if (props.onColumnResized) {
       props.onColumnResized(finalSizes);
     }
-
     window.removeEventListener('mousemove', onDrag);
     window.removeEventListener('mouseup', onDragEnd);
   };
-
   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);
@@ -340,8 +284,6 @@ const HeaderCellWrapper = props => {
    * OR the width of the current column is a fixed value
    * THEN the header content should be clipped
    */
-
-
   const shouldClipContent = props.columnWidth && isFixedWidthValue$1(props.columnWidth) || columnResizingReducer.getHasTableBeenResized() || columnResizingReducer.getIsAnyColumnBeingResized();
   return jsxRuntime.jsxs(BaseHeaderCell, {
     ref: headerRef,
@@ -355,18 +297,15 @@ const HeaderCellWrapper = props => {
     })]
   });
 };
-
 HeaderCellWrapper.displayName = 'HeaderCellWrapper';
 const defaultProps$3 = {
   sortDirection: 'desc',
   disableHeaderStickiness: false,
   horizontalCellAlignment: 'left'
 };
-
 const HeaderCell = props => {
   let sortableHeaderProps = {};
   let SortingIcon;
-
   if (props.isSortable) {
     const isActive = props.sortedBy === props.columnKey;
     const nextSortDirection = !isActive || props.sortDirection === 'desc' ? 'asc' : 'desc';
@@ -379,7 +318,6 @@ const HeaderCell = props => {
       isSortable: true
     };
   }
-
   return jsxRuntime.jsx(HeaderCellWrapper, {
     columnWidth: props.columnWidth,
     columnKey: props.columnKey,
@@ -409,23 +347,19 @@ const HeaderCell = props => {
     }))
   });
 };
-
 HeaderCell.propTypes = {};
 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); 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; }
 const defaultProps$2 = {
   isTruncated: false,
   shouldRenderBottomBorder: true
 };
-
 const DataCell = props => {
   if (props.shouldRenderCollapseButton) ;
-
   const Icon = props.isRowCollapsed ? icons.RightTriangleFilledIcon : icons.RightTriangleLinearIcon;
   return jsxRuntime.jsxs(BaseCell, {
     onClick: props.onCellClick,
@@ -454,7 +388,6 @@ const DataCell = props => {
     })]
   });
 };
-
 DataCell.propTypes = {};
 DataCell.displayName = 'DataCell';
 DataCell.defaultProps = defaultProps$2;
@@ -464,7 +397,6 @@ const defaultItemRenderer = (row, column) => {
   // @ts-ignore
   return row[column.key];
 };
-
 const defaultProps$1 = {
   isCondensed: false,
   shouldClipContent: false,
@@ -473,25 +405,20 @@ const defaultProps$1 = {
   shouldRenderBottomBorder: true,
   itemRenderer: defaultItemRenderer
 };
-
 const DataRow = props => {
   var _context, _context2;
-
   const _ref = react$1.useContext(ColumnResizingContext),
-        getIsColumnBeingResized = _ref.getIsColumnBeingResized;
-
+    getIsColumnBeingResized = _ref.getIsColumnBeingResized;
   const rowHasTruncatedColumn = _someInstanceProperty__default["default"](_context = props.columns).call(_context, column => column.isTruncated);
-
   const _useState = react$1.useState(rowHasTruncatedColumn),
-        _useState2 = _slicedToArray(_useState, 2),
-        isRowCollapsed = _useState2[0],
-        collapseRow = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isRowCollapsed = _useState2[0],
+    collapseRow = _useState2[1];
   const handleRowCollapseClick = () => {
     collapseRow(!isRowCollapsed);
-  }; // update the collapsed state if isTruncated options are changed for the whole row
-
+  };
 
+  // update the collapsed state if isTruncated options are changed for the whole row
   react$1.useEffect(() => {
     if (rowHasTruncatedColumn) {
       collapseRow(true);
@@ -499,14 +426,11 @@ const DataRow = props => {
       collapseRow(false);
     }
   }, [rowHasTruncatedColumn]);
-
   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, (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,
@@ -519,7 +443,6 @@ const DataRow = props => {
         shouldRenderCollapseButton: shouldRenderCollapseButton(props.columns.length, columnIndex),
         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);
         } : undefined,
         shouldRenderBottomBorder: props.shouldRenderBottomBorder,
@@ -529,17 +452,16 @@ const DataRow = props => {
     })
   });
 };
-
 DataRow.propTypes = {};
 DataRow.defaultProps = defaultProps$1;
 DataRow.displayName = 'DataRow';
 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; }
-const MINIMUM_COLUMN_SIZE = 32; // calculates size on mouse-drag and enforces a minimum size
+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;
@@ -548,21 +470,19 @@ const calculateNewSize = function () {
   const newSize = initialSize - (initialMousePosition - newMousePosition);
   return minSize > newSize ? minSize : newSize;
 };
-
 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]), {}, {
     width: value
   });
   return columns;
 };
-
 const getGridTemplateColumnsStyle = columns => "".concat(_mapInstanceProperty__default["default"](columns).call(columns, width => "".concat(width || 0, "px")).join(' '));
-
 const initialState = tableRef => ({
   initialColWidth: undefined,
   initialMousePosition: undefined,
@@ -571,28 +491,24 @@ const initialState = tableRef => ({
   sizes: undefined,
   tableRef
 });
-
 function reducer(state, action) {
   switch (action.type) {
     case 'reset':
       {
         return _objectSpread$1({}, initialState(state.tableRef));
       }
-
     case 'registerColumnMeasurements':
       {
         return _objectSpread$1(_objectSpread$1({}, state), {}, {
           sizes: action.payload.sizes
         });
       }
-
     case 'startResizing':
       return _objectSpread$1(_objectSpread$1({}, state), {}, {
         initialColWidth: action.payload.initialColWidth,
         initialMousePosition: action.payload.initialMousePosition,
         columnBeingResized: action.payload.columnBeingResized
       });
-
     case 'finishResizing':
       return _objectSpread$1(_objectSpread$1({}, state), {}, {
         initialColWidth: undefined,
@@ -600,43 +516,35 @@ function reducer(state, action) {
         columnBeingResized: undefined,
         hasBeenResized: true
       });
-
     default:
       return state;
   }
 }
-
 const useManualResizingReducer = tableRef => {
   const _useReducer = react$1.useReducer(reducer, initialState(tableRef)),
-        _useReducer2 = _slicedToArray(_useReducer, 2),
-        manualResizingState = _useReducer2[0],
-        dispatch = _useReducer2[1];
-
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    manualResizingState = _useReducer2[0],
+    dispatch = _useReducer2[1];
   react$1.useDebugValue(manualResizingState);
   return [manualResizingState, dispatch];
 };
-
 const useManualColumnResizing = tableRef => {
   var _state$tableRef;
-
   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
-
+    _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;
-
     const renderedColumnMeasurements = [];
-
     _forEachInstanceProperty__default["default"](_context = state.tableRef.current.querySelectorAll('th')).call(_context, header => {
       renderedColumnMeasurements.push({
         key: header.getAttribute('data-id'),
         width: header.getBoundingClientRect().width
       });
     });
-
     dispatch({
       type: 'registerColumnMeasurements',
       payload: {
@@ -644,7 +552,6 @@ const useManualColumnResizing = tableRef => {
       }
     });
   }
-
   const startResizing = (headerRef, mouseEvent) => {
     dispatch({
       type: 'startResizing',
@@ -655,54 +562,41 @@ const useManualColumnResizing = tableRef => {
       }
     });
   };
-
   const onDragResizing = (event, columnIndex) => {
     // throttle and sync resizing update rate with screen refresh rate
     requestAnimationFrame(() => {
       var _state$tableRef2;
-
       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, newColumnsSize => newColumnsSize.width.toString()));
     });
   };
-
   const finishResizing = () => {
     dispatch({
       type: 'finishResizing'
     });
     return state.sizes;
   };
-
   const getIsColumnBeingResized = columnIndex => state.columnBeingResized !== undefined ? state.columnBeingResized === columnIndex : false;
-
   const getIsAnyColumnBeingResized = () => state.columnBeingResized !== undefined;
-
   const getHasTableBeenResized = () => state.hasBeenResized;
-
   const getTotalResizedTableWidth = () => {
     var _context2;
-
     if (!state.hasBeenResized || !state.sizes) {
       return -1;
     }
-
     return _reduceInstanceProperty__default["default"](_context2 = state.sizes).call(_context2, (a, b) => a + b.width, 0);
   };
-
   const 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'
     });
   };
-
   const getSizes = () => state.sizes;
-
   react$1.useDebugValue(state);
   return {
     reset,
@@ -716,24 +610,19 @@ const useManualColumnResizing = tableRef => {
     getTotalResizedTableWidth
   };
 };
-
 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 _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; }
-
 const getColumnsLayoutInfo = columns => _reduceInstanceProperty__default["default"](columns).call(columns, (acc, currentValue) => [...acc, {
   key: currentValue.key,
   width: currentValue.width
 }], []);
-
 const shouldRenderRowBottomBorder = (rowIndex, rowCount, footer) => {
   if (!footer) return true;
   if (rowIndex + 1 < rowCount) return true;
   return false;
 };
-
 const defaultProps = {
   columns: [],
   isCondensed: false,
@@ -744,14 +633,14 @@ const defaultProps = {
   // @ts-ignore
   itemRenderer: (row, column) => row[column.key]
 };
-
 const DataTable = props => {
   var _context, _context2;
   const tableRef = react$1.useRef();
-  const columnResizingReducer = useManualColumnResizing$1(tableRef); // if the table columns have been measured
+  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
-
   const columnsInfo = getColumnsLayoutInfo(props.columns);
   const prevLayout = hooks.usePrevious({
     columns: columnsInfo,
@@ -768,7 +657,8 @@ const DataTable = props => {
     }
   }, [columnResizingReducer, hasLayoutChanged]);
   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
+  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,
@@ -795,8 +685,7 @@ const DataTable = props => {
               horizontalCellAlignment: column.align ? column.align : props.horizontalCellAlignment,
               disableHeaderStickiness: props.disableHeaderStickiness,
               columnWidth: column.width
-              /* Sorting Props */
-              ,
+              /* Sorting Props */,
               onClick: props.onSortChange && props.onSortChange,
               sortedBy: props.sortedBy,
               columnKey: column.key,
@@ -824,14 +713,13 @@ const DataTable = props => {
     })]
   });
 };
-
 DataTable.propTypes = {};
 DataTable.defaultProps = defaultProps;
 DataTable.displayName = 'DataTable';
 var DataTable$1 = DataTable;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.0.0";
+var version = "16.1.0";
 
 Object.defineProperty(exports, 'useRowSelection', {
   enumerable: true,