@luminati-io/uikit 1.7.11-beta.1 → 1.7.11-beta.3

package/dist/uikit.umd.js

@@ -7122,6 +7122,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /*jslint react:true*/
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 
 
@@ -7143,19 +7144,18 @@ var Icon = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(
   var name = props.name,
     size = props.size,
     color = props.color,
-    className = props.className,
-    style = props.style;
+    verticalAlign = props.verticalAlign;
   var ic = _icons__WEBPACK_IMPORTED_MODULE_5__["default"][name];
   if (!ic) return null;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledSvg, {
-    ref: ref,
-    className: className,
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledSvg, _extends({
+    ref: ref
+  }, (0,_utils__WEBPACK_IMPORTED_MODULE_3__.getCommonProps)(props), {
     size: size,
     viewBox: ic.viewBox,
     color: _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color[color],
-    style: style,
+    verticalAlign: verticalAlign,
     "data-icon": name
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("use", {
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("use", {
     href: "#".concat(ic.id)
   }));
 });
@@ -7166,15 +7166,18 @@ Icon.defaultProps = {
 Icon.propTypes = {
   name: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_3__.iconNames).isRequired,
   color: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_3__.colorNames),
-  size: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['xxs', 'xs', 'sm', 'md', 'lg', 'xl'])
+  size: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['xxs', 'xs', 'sm', 'md', 'lg', 'xl']),
+  verticalAlign: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['top', 'middle', 'bottom', 'baseline'])
 };
 var StyledSvg = styled_components__WEBPACK_IMPORTED_MODULE_1___default().svg.withConfig({
   displayName: "StyledSvg",
   componentId: "sc-uhf282-0"
-})(["color:", ";", ""], function (props) {
+})(["color:", ";", " vertical-align:", ";"], function (props) {
   return props.color;
 }, function (props) {
   return toIconSize(props.size);
+}, function (props) {
+  return props.verticalAlign;
 });
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Icon);
 
@@ -10425,7 +10428,8 @@ Provider.propTypes = {
     maxWidth: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
     disableResizing: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
     disablePinning: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
-    disableEditing: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
+    disableEditing: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+    classNamePrefix: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
   })).isRequired,
   data: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().array),
   columnsSort: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
@@ -10438,7 +10442,6 @@ Provider.propTypes = {
   disableResizing: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   disablePinning: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   disableEditing: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
-  rowDensity: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['busy_bee', 'diamond_hand', 'white_spaced']),
   onRowClick: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
   stickyHeader: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool), (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object)]),
   scrollTarget: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().any),
@@ -10603,7 +10606,7 @@ var ItemsWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.
   componentId: "sc-1uptv2h-1"
 })(["width:100%;display:flex;flex-direction:column;gap:2px;box-sizing:border-box;", ""], function (props) {
   if (props.maxMenuHeight > 0) {
-    return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["max-height:", ";overflow-y:auto;"], (0,_utils__WEBPACK_IMPORTED_MODULE_11__.toPixel)(props.maxMenuHeight));
+    return (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["max-height:", ";overflow-y:auto;scrollbar-color:", " ", ";scrollbar-width:thin;&::-webkit-scrollbar{width:4px;height:4px;}&::-webkit-scrollbar-track{background-color:", ";}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:2px;}"], (0,_utils__WEBPACK_IMPORTED_MODULE_11__.toPixel)(props.maxMenuHeight), _theme__WEBPACK_IMPORTED_MODULE_8__["default"].color.white, _theme__WEBPACK_IMPORTED_MODULE_8__["default"].color.gray_6, _theme__WEBPACK_IMPORTED_MODULE_8__["default"].color.white, _theme__WEBPACK_IMPORTED_MODULE_8__["default"].color.gray_6);
   }
 });
 var CustomizeButtonPopover = function CustomizeButtonPopover(props) {
@@ -11764,6 +11767,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./context */ "./src/table/context.js");
 /* harmony import */ var _header_functions__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./header_functions */ "./src/table/header_functions.js");
 /* harmony import */ var _sort_icon__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./sort_icon */ "./src/table/sort_icon.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./util */ "./src/table/util.js");
 // LICENSE_CODE ZON
 
 
@@ -11772,7 +11776,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var _excluded = ["key"],
   _excluded2 = ["key"],
-  _excluded3 = ["row", "onRowClick"],
+  _excluded3 = ["classNamePrefix", "row", "onRowClick"],
   _excluded4 = ["key"];
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -11793,13 +11797,15 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
 
+
 var assign = Object.assign;
 var Table = function Table(props) {
   var className = props.className,
     rowDensity = props.rowDensity,
     onRowClick = props.onRowClick,
     stickyHeader = props.stickyHeader,
-    scrollTarget = props.scrollTarget;
+    scrollTarget = props.scrollTarget,
+    classNamePrefix = props.classNamePrefix;
   var offsetTop = lodash_isObject__WEBPACK_IMPORTED_MODULE_1___default()(stickyHeader) && stickyHeader.offsetTop || 0;
   var _useTableContext = (0,_context__WEBPACK_IMPORTED_MODULE_9__.useTableContext)(),
     getTableProps = _useTableContext.getTableProps,
@@ -11841,19 +11847,32 @@ var Table = function Table(props) {
   }, [scroll]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(TableWrapper, {
     ref: wrapperRef,
-    className: className
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_12__.classNames)(classNamePrefix, {
+      container: true
+    }, className)
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(StyledTable, _extends({
     ref: tableRef
-  }, getTableProps()), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(TableHeader, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement("div", _extends({
+  }, getTableProps(), {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_12__.classNames)(classNamePrefix, {
+      table: true
+    })
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(TableHeader, {
+    classNamePrefix: classNamePrefix
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement("div", _extends({
     "data-rowgroup-type": "body"
-  }, getTableBodyProps()), pinnedRows.map(function (row) {
+  }, getTableBodyProps(), {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_12__.classNames)(classNamePrefix, {
+      tableBody: true
+    })
+  }), pinnedRows.map(function (row) {
     prepareRow(row);
     return renderRow({
       row: row,
       columnStartEditing: columnStartEditing,
       columnDoneEditing: columnDoneEditing,
       rowDensity: rowDensity,
-      onRowClick: onRowClick
+      onRowClick: onRowClick,
+      classNamePrefix: classNamePrefix
     });
   }), !page.length && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(NoDataComp, null), page.map(function (row, i, arr) {
     prepareRow(row);
@@ -11864,16 +11883,19 @@ var Table = function Table(props) {
       columnDoneEditing: columnDoneEditing,
       rowDensity: rowDensity,
       onRowClick: onRowClick,
-      isLastRow: i == arr.length - 1
+      isLastRow: i == arr.length - 1,
+      classNamePrefix: classNamePrefix
     });
   })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(TableFooter, {
-    rowDensity: rowDensity
+    rowDensity: rowDensity,
+    classNamePrefix: classNamePrefix
   }), showSticky && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(StickyHeader, {
     top: offsetTop,
     width: width,
     left: left,
     onRowClick: onRowClick,
-    rowDensity: rowDensity
+    rowDensity: rowDensity,
+    classNamePrefix: classNamePrefix
   })));
 };
 Table.displayName = 'Table';
@@ -11884,7 +11906,8 @@ Table.propTypes = {
   rowDensity: prop_types__WEBPACK_IMPORTED_MODULE_4___default().oneOf(['busy_bee', 'diamond_hand', 'white_spaced']),
   onRowClick: (prop_types__WEBPACK_IMPORTED_MODULE_4___default().func),
   stickyHeader: prop_types__WEBPACK_IMPORTED_MODULE_4___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_4___default().bool), (prop_types__WEBPACK_IMPORTED_MODULE_4___default().object)]),
-  scrollTarget: (prop_types__WEBPACK_IMPORTED_MODULE_4___default().any)
+  scrollTarget: (prop_types__WEBPACK_IMPORTED_MODULE_4___default().any),
+  classNamePrefix: (prop_types__WEBPACK_IMPORTED_MODULE_4___default().string)
 };
 var TableWrapper = styled_components__WEBPACK_IMPORTED_MODULE_3___default().div.withConfig({
   displayName: "TableWrapper",
@@ -11897,7 +11920,8 @@ var StyledTable = styled_components__WEBPACK_IMPORTED_MODULE_3___default().div.w
 })(["min-width:100%;border-spacing:0;border-collapse:separate;"]);
 StyledTable.displayName = 'StyledTable';
 var StickyHeader = function StickyHeader(props) {
-  var top = props.top,
+  var classNamePrefix = props.classNamePrefix,
+    top = props.top,
     width = props.width,
     left = props.left,
     onRowClick = props.onRowClick,
@@ -11913,9 +11937,13 @@ var StickyHeader = function StickyHeader(props) {
     width: (0,_utils__WEBPACK_IMPORTED_MODULE_8__.toPixel)(width)
   };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(StickyHeaderWrapper, {
-    style: style
+    style: style,
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_12__.classNames)(classNamePrefix, {
+      stickyHeader: true
+    })
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(TableHeader, {
     left: left,
+    classNamePrefix: classNamePrefix,
     compact: true
   }), pinnedRows.map(function (row) {
     prepareRow(row);
@@ -11924,7 +11952,8 @@ var StickyHeader = function StickyHeader(props) {
       columnStartEditing: columnStartEditing,
       columnDoneEditing: columnDoneEditing,
       rowDensity: rowDensity,
-      onRowClick: onRowClick
+      onRowClick: onRowClick,
+      classNamePrefix: classNamePrefix
     });
   }));
 };
@@ -11935,7 +11964,8 @@ var StickyHeaderWrapper = styled_components__WEBPACK_IMPORTED_MODULE_3___default
 })(["position:fixed;z-index:3;overflow-x:hidden;box-shadow:0px 2px 4px -2px rgba(24,39,75,0.12);"]);
 StickyHeaderWrapper.displayName = 'StickyHeaderWrapper';
 var TableHeader = function TableHeader(props) {
-  var compact = props.compact,
+  var classNamePrefix = props.classNamePrefix,
+    compact = props.compact,
     left = props.left;
   var _useTableContext3 = (0,_context__WEBPACK_IMPORTED_MODULE_9__.useTableContext)(),
     headerGroups = _useTableContext3.headerGroups;
@@ -11946,26 +11976,41 @@ var TableHeader = function TableHeader(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement("div", _extends({
     role: "rowgroup",
     style: style
-  }, dataAttributes), headerGroups.map(function (group) {
+  }, dataAttributes, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_12__.classNames)(classNamePrefix, {
+      tableHeader: true,
+      'tableHeader--is-compact': compact
+    })
+  }), headerGroups.map(function (group) {
     var _group$getHeaderGroup = group.getHeaderGroupProps(),
       key = _group$getHeaderGroup.key,
       rest = _objectWithoutProperties(_group$getHeaderGroup, _excluded);
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement("div", _extends({
       key: key
-    }, rest), group.headers.map(function (header, i, arr) {
+    }, rest, {
+      className: (0,_util__WEBPACK_IMPORTED_MODULE_12__.classNames)(classNamePrefix, {
+        headerRow: true
+      })
+    }), group.headers.map(function (header, i, arr) {
       var isLast = i == arr.length - 1;
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(HeaderCell, {
         compact: compact,
         isLast: isLast,
         key: header.getHeaderProps().key,
-        header: header
+        header: header,
+        className: (0,_util__WEBPACK_IMPORTED_MODULE_12__.classNames)(classNamePrefix, {
+          headerCell: true,
+          'headerCell--is-compact': compact,
+          'headerCell--is-last': isLast
+        })
       });
     }));
   }));
 };
 TableHeader.displayName = 'TableHeader';
 var HeaderCell = function HeaderCell(props) {
-  var header = props.header,
+  var className = props.className,
+    header = props.header,
     compact = props.compact,
     isLast = props.isLast;
   var id = header.id,
@@ -11973,7 +12018,8 @@ var HeaderCell = function HeaderCell(props) {
     on_sort = header.on_sort,
     isResizing = header.isResizing,
     getHeaderProps = header.getHeaderProps,
-    getResizerProps = header.getResizerProps;
+    getResizerProps = header.getResizerProps,
+    classNamePrefix = header.classNamePrefix;
   var _useTableContext4 = (0,_context__WEBPACK_IMPORTED_MODULE_9__.useTableContext)(),
     columnsSort = _useTableContext4.columnsSort,
     fullWidth = _useTableContext4.fullWidth;
@@ -11994,7 +12040,11 @@ var HeaderCell = function HeaderCell(props) {
     _useState8 = _slicedToArray(_useState7, 2),
     hovered = _useState8[0],
     setHovered = _useState8[1];
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(StyledHeaderCell, _extends({}, getHeaderProps(), {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(StyledHeaderCell, _extends({
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_12__.classNames)(classNamePrefix, {
+      header: true
+    }, className)
+  }, getHeaderProps(), {
     onMouseOver: function onMouseOver() {
       return setHovered(true);
     },
@@ -12055,7 +12105,8 @@ var TableRow = styled_components__WEBPACK_IMPORTED_MODULE_3___default().div.with
 });
 TableRow.displayName = 'TableRow';
 var Cell = function Cell(props) {
-  var rowDensity = props.rowDensity,
+  var className = props.className,
+    rowDensity = props.rowDensity,
     isLastRow = props.isLastRow,
     isEditing = props.isEditing,
     columnStartEditing = props.columnStartEditing,
@@ -12065,7 +12116,8 @@ var Cell = function Cell(props) {
   var columnId = column.id,
     _column$type = column.type,
     type = _column$type === void 0 ? 'string' : _column$type,
-    canEdit = column.canEdit;
+    canEdit = column.canEdit,
+    classNamePrefix = column.classNamePrefix;
   var rowId = row.id;
   var startEditing = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)(function () {
     columnStartEditing(columnId, rowId);
@@ -12086,7 +12138,11 @@ var Cell = function Cell(props) {
       startEditing();
     }
   } : undefined);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(StyledCell, cellProps, props.render('Cell', {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(StyledCell, _extends({
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_12__.classNames)(classNamePrefix, {
+      cell: true
+    }, className)
+  }, cellProps), props.render('Cell', {
     row: row,
     isEditing: isEditing,
     startEditing: startEditing,
@@ -12095,7 +12151,8 @@ var Cell = function Cell(props) {
 };
 Cell.displayName = 'Cell';
 var TableFooter = function TableFooter(props) {
-  var rowDensity = props.rowDensity;
+  var classNamePrefix = props.classNamePrefix,
+    rowDensity = props.rowDensity;
   var _useTableContext5 = (0,_context__WEBPACK_IMPORTED_MODULE_9__.useTableContext)(),
     footerGroups = _useTableContext5.footerGroups,
     allColumns = _useTableContext5.allColumns,
@@ -12106,7 +12163,10 @@ var TableFooter = function TableFooter(props) {
   if (isFooterHidden) return null;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement("div", {
     role: "rowgroup",
-    "data-rowgroup-type": "footer"
+    "data-rowgroup-type": "footer",
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_12__.classNames)(classNamePrefix, {
+      tableFooter: true
+    })
   }, footerGroups.map(function (group) {
     var _group$getFooterGroup = group.getFooterGroupProps(),
       key = _group$getFooterGroup.key,
@@ -12114,26 +12174,38 @@ var TableFooter = function TableFooter(props) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement("div", _extends({
       key: key,
       role: "row"
-    }, rest), group.headers.map(function (column) {
+    }, rest, {
+      className: (0,_util__WEBPACK_IMPORTED_MODULE_12__.classNames)(classNamePrefix, {
+        footerRow: true
+      })
+    }), group.headers.map(function (column) {
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(FooterCell, {
         column: column,
         key: column.getFooterProps().key,
-        rowDensity: rowDensity
+        rowDensity: rowDensity,
+        className: (0,_util__WEBPACK_IMPORTED_MODULE_12__.classNames)(classNamePrefix, {
+          footerCell: true
+        })
       });
     }));
   }));
 };
 TableFooter.displayName = 'TableFooter';
 var FooterCell = function FooterCell(props) {
-  var column = props.column,
+  var className = props.className,
+    column = props.column,
     rowDensity = props.rowDensity;
   var _column$type2 = column.type,
-    type = _column$type2 === void 0 ? 'string' : _column$type2;
+    type = _column$type2 === void 0 ? 'string' : _column$type2,
+    classNamePrefix = column.classNamePrefix;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(StyledCell, _extends({
     type: type,
     role: "cell",
     rowDensity: rowDensity,
-    border: "top"
+    border: "top",
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_12__.classNames)(classNamePrefix, {
+      footer: true
+    }, className)
   }, column.getFooterProps()), column.render('Footer'));
 };
 FooterCell.displayName = 'FooterCell';
@@ -12161,7 +12233,8 @@ StyledCell.displayName = 'StyledCell';
 // -- util
 
 var renderRow = function renderRow(opt) {
-  var row = opt.row,
+  var classNamePrefix = opt.classNamePrefix,
+    row = opt.row,
     onRowClick = opt.onRowClick,
     cellProps = _objectWithoutProperties(opt, _excluded3);
   var _row$getRowProps = row.getRowProps(),
@@ -12175,10 +12248,19 @@ var renderRow = function renderRow(opt) {
     key: key,
     onClick: onClick,
     cursor: cursor
-  }, rowProps), row.cells.map(function (cell) {
+  }, rowProps, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_12__.classNames)(classNamePrefix, {
+      tableRow: true,
+      'tableRow--is-pinned': row.isPinned
+    })
+  }), row.cells.map(function (cell) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(Cell, _extends({
       key: cell.getCellProps().key
-    }, cellProps, cell));
+    }, cellProps, cell, {
+      className: (0,_util__WEBPACK_IMPORTED_MODULE_12__.classNames)(classNamePrefix, {
+        tableCell: true
+      })
+    }));
   }));
 };
 var renderCellContent = function renderCellContent(column, type, props) {
@@ -12205,6 +12287,7 @@ var renderCellContent = function renderCellContent(column, type, props) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "classNames": () => (/* binding */ classNames),
 /* harmony export */   "firstDefined": () => (/* binding */ firstDefined)
 /* harmony export */ });
 // LICENSE_CODE ZON
@@ -12219,6 +12302,27 @@ var firstDefined = function firstDefined() {
     if (typeof args[i] != 'undefined') return args[i];
   }
 };
+var applyPrefixToName = function applyPrefixToName(prefix, name) {
+  if (!name) return prefix;
+  if (name[0] == '-') return prefix + name;
+  return prefix + '__' + name;
+};
+var classNames = function classNames(prefix, state) {
+  for (var _len2 = arguments.length, classNameList = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+    classNameList[_key2 - 2] = arguments[_key2];
+  }
+  var arr = [].concat(classNameList);
+  if (state && prefix) {
+    for (var key in state) {
+      if (state.hasOwnProperty(key) && state[key]) arr.push("".concat(applyPrefixToName(prefix, key)));
+    }
+  }
+  return arr.filter(function (i) {
+    return i;
+  }).map(function (i) {
+    return String(i).trim();
+  }).join(' ');
+};
 
 /***/ }),
 
@@ -13349,7 +13453,7 @@ var toPixel = function toPixel(value) {
 };
 var getCommonProps = function getCommonProps(props) {
   return lodash_pickBy__WEBPACK_IMPORTED_MODULE_0___default()(props, function (v, k) {
-    var inc = ['id', 'className', 'onClick', 'role'];
+    var inc = ['id', 'className', 'style', 'onClick', 'role'];
     var starts = ['onMouse', 'aria-', 'data-'];
     return inc.includes(k) || starts.some(function (s) {
       return k.indexOf(s) == 0;