@commercetools-uikit/data-table 19.20.1 → 19.22.0

package/dist/commercetools-uikit-data-table.esm.js

@@ -1,7 +1,3 @@
-import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
-import _pt from 'prop-types';
-import _reduceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/reduce';
-import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
 import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
 import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
 import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
@@ -10,6 +6,11 @@ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
 import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
 import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
+import _pt from 'prop-types';
+import _reduceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/reduce';
+import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
 import { createContext, useContext, useRef, useState, useEffect, useDebugValue, useReducer, useLayoutEffect } from 'react';
 import isEqual from 'lodash/isEqual';
 import { warning, filterDataAttributes } from '@commercetools-uikit/utils';
@@ -19,7 +20,7 @@ import _styled from '@emotion/styled/base';
 import { css, keyframes, createElement } from '@emotion/react';
 import { designTokens } from '@commercetools-uikit/design-system';
 import AccessibleButton from '@commercetools-uikit/accessible-button';
-import { ArrowDownIcon, ArrowUpIcon, AngleUpDownIcon, RightTriangleFilledIcon, RightTriangleLinearIcon } from '@commercetools-uikit/icons';
+import { AngleUpDownIcon, ArrowDownIcon, ArrowUpIcon, RightTriangleFilledIcon, RightTriangleLinearIcon } from '@commercetools-uikit/icons';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import _Number$isNaN from '@babel/runtime-corejs3/core-js-stable/number/is-nan';
 import _parseInt from '@babel/runtime-corejs3/core-js-stable/parse-int';
@@ -360,7 +361,7 @@ const TableRow = /*#__PURE__*/_styled("tr", process.env.NODE_ENV === "production
   label: "TableRow"
 })("display:contents;", getClickableRowStyle, " :hover,:focus-within{", RowExpandCollapseButton, "{opacity:1;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRhdGEtdGFibGUuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpSXNEIiwiZmlsZSI6ImRhdGEtdGFibGUuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgUm93RXhwYW5kQ29sbGFwc2VCdXR0b24gfSBmcm9tICcuL2NlbGwuc3R5bGVzJztcbmltcG9ydCB7IEJhc2VIZWFkZXJDZWxsIH0gZnJvbSAnLi9oZWFkZXItY2VsbC5zdHlsZXMnO1xuaW1wb3J0IGNvbnZlcnROdW1lcmljRGltZW5zaW9uVG9QaXhlbFZhbHVlIGZyb20gJy4vdXRpbHMvY29udmVydC1udW1lcmljLWRpbWVuc2lvbi10by1waXhlbC12YWx1ZSc7XG5pbXBvcnQgdHlwZSB7IFREYXRhVGFibGVQcm9wcyB9IGZyb20gJy4vZGF0YS10YWJsZSc7XG5cbnR5cGUgVEdldENsaWNrYWJsZVJvd1N0eWxlUHJvcHMgPSB7XG4gIGlzUm93Q2xpY2thYmxlOiBib29sZWFuO1xufTtcblxuY29uc3QgZ2V0Q2xpY2thYmxlUm93U3R5bGUgPSAocHJvcHM6IFRHZXRDbGlja2FibGVSb3dTdHlsZVByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5pc1Jvd0NsaWNrYWJsZSkge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgICAmOmhvdmVyIHRkIHtcbiAgICAgICAgYmFja2dyb3VuZDogJHtkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZH07XG4gICAgICB9XG4gICAgYDtcbiAgfVxuICByZXR1cm4gJyc7XG59O1xuXG50eXBlIFRHZXREaXNhYmxlZFNlbGZDb250YWlubWVudFN0eWxlcyA9IHtcbiAgZGlzYWJsZVNlbGZDb250YWlubWVudDogYm9vbGVhbjtcbn07XG5cbmNvbnN0IGdldERpc2FibGVkU2VsZkNvbnRhaW5tZW50U3R5bGVzID0gKFxuICBwcm9wczogVEdldERpc2FibGVkU2VsZkNvbnRhaW5tZW50U3R5bGVzXG4pID0+IHtcbiAgaWYgKHByb3BzLmRpc2FibGVTZWxmQ29udGFpbm1lbnQpIHtcbiAgICByZXR1cm4gY3NzYFxuICAgICAgcG9zaXRpb246IHVuc2V0O1xuICAgICAgb3ZlcmZsb3cteDogdW5zZXQ7XG4gICAgICBvdmVyZmxvdy15OiB1bnNldDtcbiAgICBgO1xuICB9XG4gIHJldHVybiAnJztcbn07XG5cbnR5cGUgVFRhYmxlQ29udGFpbmVyID0ge1xuICBpc0JlaW5nUmVzaXplZD86IGJvb2xlYW47XG4gIG1heFdpZHRoPzogc3RyaW5nIHwgbnVtYmVyO1xuICBtYXhIZWlnaHQ/OiBzdHJpbmcgfCBudW1iZXI7XG4gIGRpc2FibGVTZWxmQ29udGFpbm1lbnQ6IGJvb2xlYW47XG59O1xuXG5jb25zdCBUYWJsZUNvbnRhaW5lciA9IHN0eWxlZC5kaXY8VFRhYmxlQ29udGFpbmVyPmBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB6LWluZGV4OiAwO1xuICBib3gtc2hhZG93OiAke2Rlc2lnblRva2Vucy5zaGFkb3cxN307XG4gIGJvcmRlcjogMXB4IHNvbGlkICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDk1fTtcbiAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNH07XG5cbiAgJHsocHJvcHMpID0+XG4gICAgLy8gdGhpcyBpcyBuZWVkZWQgaW4gb3JkZXIgdG8gaGF2ZSBhIHN0aWNreSBoZWFkZXJcbiAgICBwcm9wcy5tYXhIZWlnaHQgPyBgb3ZlcmZsb3cteDogYXV0bztgIDogJyd9XG5cbiAgJHsocHJvcHMpID0+XG4gICAgcHJvcHMubWF4V2lkdGggJiYgIXByb3BzLmRpc2FibGVTZWxmQ29udGFpbm1lbnRcbiAgICAgID8gYG1heC13aWR0aDogJHtjb252ZXJ0TnVtZXJpY0RpbWVuc2lvblRvUGl4ZWxWYWx1ZShwcm9wcy5tYXhXaWR0aCl9O2BcbiAgICAgIDogJyd9XG5cbiAgJHsocHJvcHMpID0+XG4gICAgcHJvcHMuaXNCZWluZ1Jlc2l6ZWQgJiZcbiAgICBgXG4gICAgKiB7XG4gICAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICB9YH1cblxuICAke2dldERpc2FibGVkU2VsZkNvbnRhaW5tZW50U3R5bGVzfVxuYDtcblxudHlwZSBUVGFibGVHcmlkID0ge1xuICByZXNpemVkVG90YWxXaWR0aD86IG51bWJlcjtcbiAgY29sdW1ucz86IFREYXRhVGFibGVQcm9wc1snY29sdW1ucyddO1xuICBkaXNhYmxlU2VsZkNvbnRhaW5tZW50OiBib29sZWFuO1xuICBtYXhIZWlnaHQ/OiBzdHJpbmcgfCBudW1iZXI7XG59O1xuXG5jb25zdCBUYWJsZUdyaWQgPSBzdHlsZWQudGFibGU8VFRhYmxlR3JpZD5gXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIC8qIHN0eWxlbGludC1kaXNhYmxlIGZ1bmN0aW9uLXdoaXRlc3BhY2UtYWZ0ZXIgKi9cbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAkeyhwcm9wcykgPT5cbiAgICBwcm9wcy5jb2x1bW5zICYmXG4gICAgcHJvcHMuY29sdW1ucy5tYXAoKGNvbHVtbikgPT4gY29sdW1uLndpZHRoIHx8ICdhdXRvJykuam9pbignICcpfTtcbiAgLyogc3R5bGVsaW50LWVuYWJsZSBmdW5jdGlvbi13aGl0ZXNwYWNlLWFmdGVyICovXG5cbiAgJHsocHJvcHMpID0+XG4gICAgLy8gdGhpcyBpcyBuZWVkZWQgaW4gb3JkZXIgdG8gaGF2ZSBhIHN0aWNreSBoZWFkZXJcbiAgICBwcm9wcy5tYXhIZWlnaHQgPyBgb3ZlcmZsb3cteTogYXV0bztgIDogJyd9XG5cbiAgJHsocHJvcHMpID0+XG4gICAgcHJvcHMubWF4SGVpZ2h0ICYmICFwcm9wcy5kaXNhYmxlU2VsZkNvbnRhaW5tZW50XG4gICAgICA/IGBtYXgtaGVpZ2h0OiAke2NvbnZlcnROdW1lcmljRGltZW5zaW9uVG9QaXhlbFZhbHVlKHByb3BzLm1heEhlaWdodCl9O2BcbiAgICAgIDogJyd9XG5cbiAgJHsocHJvcHMpID0+XG4gICAgcHJvcHMucmVzaXplZFRvdGFsV2lkdGggPyBgbWF4LXdpZHRoOiAke3Byb3BzLnJlc2l6ZWRUb3RhbFdpZHRofXB4O2AgOiAnJ31cblxuICAke2dldERpc2FibGVkU2VsZkNvbnRhaW5tZW50U3R5bGVzfVxuYDtcblxuY29uc3QgVGFibGVIZWFkZXIgPSBzdHlsZWQudGhlYWRgXG4gIGRpc3BsYXk6IGNvbnRlbnRzO1xuICAvKiBBZGRzIHJpZ2h0IGJvcmRlciB0aGF0IGRvZXNuJ3QgYWZmZWN0IGNvbHVtbiB3aWR0aFxuICAqICB0byBlYWNoIGhlYWRlciBjZWxsIHdoZW4gdGFibGUgaGVhZGVyIGlzIGhvdmVyZWRcbiAgKi9cbiAgOmhvdmVyIHtcbiAgICAke0Jhc2VIZWFkZXJDZWxsfTpiZWZvcmUge1xuICAgICAgY29udGVudDogJyc7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICBib3JkZXItcmlnaHQ6IDFweCBzb2xpZCAke2Rlc2lnblRva2Vucy5jb2xvck5ldXRyYWx9O1xuICAgICAgdG9wOiAke2Rlc2lnblRva2Vucy5zcGFjaW5nMjB9O1xuICAgICAgcmlnaHQ6IDA7XG4gICAgICBib3R0b206ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcyMH07XG4gICAgfVxuICAgIC8qIERvZXMgbm90IGRpc3BsYXkgYm9yZGVyIG9uIGZhciByaWdodCAobGFzdCkgaGVhZGVyIGNlbGwgKi9cbiAgICAke0Jhc2VIZWFkZXJDZWxsfTpsYXN0LWNoaWxkOmJlZm9yZSB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgVGFibGVCb2R5ID0gc3R5bGVkLnRib2R5YFxuICBkaXNwbGF5OiBjb250ZW50cztcbmA7XG5cbmNvbnN0IFRhYmxlUm93ID0gc3R5bGVkLnRyPFRHZXRDbGlja2FibGVSb3dTdHlsZVByb3BzPmBcbiAgZGlzcGxheTogY29udGVudHM7XG4gICR7Z2V0Q2xpY2thYmxlUm93U3R5bGV9XG4gIDpob3ZlciwgOmZvY3VzLXdpdGhpbiB7XG4gICAgJHtSb3dFeHBhbmRDb2xsYXBzZUJ1dHRvbn0ge1xuICAgICAgb3BhY2l0eTogMTtcbiAgICB9XG4gIH1cbmA7XG5cbmV4cG9ydCB7IFRhYmxlQ29udGFpbmVyLCBUYWJsZUdyaWQsIFRhYmxlSGVhZGVyLCBUYWJsZUJvZHksIFRhYmxlUm93IH07XG4iXX0= */"));
 
-const defaultProps$4 = {
+const defaultProps = {
   horizontalCellAlignment: 'left'
 };
 const Footer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
@@ -370,7 +371,7 @@ const Footer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production"
   label: "Footer"
 })("box-sizing:border-box;display:block;", getPaddingStyle, " ", getHorizontalAlignmentStyle, " background-color:", designTokens.colorSurface, ";border-top:1px solid ", designTokens.colorNeutral90, ";border-bottom:1px solid ", designTokens.colorNeutral90, ";width:100%;", props => props.resizedTotalWidth ? `max-width: ${props.resizedTotalWidth}px;` : '', ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZvb3Rlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0JrQyIsImZpbGUiOiJmb290ZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgeyBnZXRQYWRkaW5nU3R5bGUsIGdldEhvcml6b250YWxBbGlnbm1lbnRTdHlsZSB9IGZyb20gJy4vY2VsbC5zdHlsZXMnO1xuXG50eXBlIFRGb290ZXIgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gIGlzQ29uZGVuc2VkPzogYm9vbGVhbjtcbiAgaG9yaXpvbnRhbENlbGxBbGlnbm1lbnQ/OiAnbGVmdCcgfCAnY2VudGVyJyB8ICdyaWdodCc7XG4gIHJlc2l6ZWRUb3RhbFdpZHRoPzogbnVtYmVyO1xufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFRGb290ZXIsICdob3Jpem9udGFsQ2VsbEFsaWdubWVudCc+ID0ge1xuICBob3Jpem9udGFsQ2VsbEFsaWdubWVudDogJ2xlZnQnLFxufTtcblxuY29uc3QgRm9vdGVyID0gc3R5bGVkLmRpdjxURm9vdGVyPmBcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZGlzcGxheTogYmxvY2s7XG4gICR7Z2V0UGFkZGluZ1N0eWxlfVxuICAke2dldEhvcml6b250YWxBbGlnbm1lbnRTdHlsZX1cbiAgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlfTtcbiAgYm9yZGVyLXRvcDogMXB4IHNvbGlkICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDkwfTtcbiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDkwfTtcbiAgd2lkdGg6IDEwMCU7XG4gICR7KHByb3BzKSA9PlxuICAgIHByb3BzLnJlc2l6ZWRUb3RhbFdpZHRoID8gYG1heC13aWR0aDogJHtwcm9wcy5yZXNpemVkVG90YWxXaWR0aH1weDtgIDogJyd9XG5gO1xuRm9vdGVyLmRpc3BsYXlOYW1lID0gJ0Zvb3Rlcic7XG5cbkZvb3Rlci5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5leHBvcnQgZGVmYXVsdCBGb290ZXI7XG4iXX0= */"));
 Footer.displayName = 'Footer';
-Footer.defaultProps = defaultProps$4;
+Footer.defaultProps = defaultProps;
 var Footer$1 = Footer;
 
 const ResizerIndicator = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
@@ -407,6 +408,7 @@ const isFixedWidthValue = value => {
 };
 var isFixedWidthValue$1 = isFixedWidthValue;
 
+const _excluded$3 = ["sortDirection", "disableHeaderStickiness", "horizontalCellAlignment"];
 function ownKeys$3(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 const HeaderCellWrapper = props => {
@@ -446,21 +448,23 @@ const HeaderCellWrapper = props => {
   });
 };
 HeaderCellWrapper.displayName = 'HeaderCellWrapper';
-const defaultProps$3 = {
-  sortDirection: 'desc',
-  disableHeaderStickiness: false,
-  horizontalCellAlignment: 'left'
-};
-const HeaderCell = props => {
+const HeaderCell = _ref => {
+  let _ref$sortDirection = _ref.sortDirection,
+    sortDirection = _ref$sortDirection === void 0 ? 'desc' : _ref$sortDirection,
+    _ref$disableHeaderSti = _ref.disableHeaderStickiness,
+    disableHeaderStickiness = _ref$disableHeaderSti === void 0 ? false : _ref$disableHeaderSti,
+    _ref$horizontalCellAl = _ref.horizontalCellAlignment,
+    horizontalCellAlignment = _ref$horizontalCellAl === void 0 ? 'left' : _ref$horizontalCellAl,
+    props = _objectWithoutProperties(_ref, _excluded$3);
   let sortableHeaderProps = {};
   let SortingIcon;
   if (props.isSortable) {
     const isActive = props.sortedBy === props.columnKey;
-    const nextSortDirection = !isActive || props.sortDirection === 'desc' ? 'asc' : 'desc';
-    SortingIcon = props.sortDirection === 'desc' ? ArrowDownIcon : ArrowUpIcon;
+    const nextSortDirection = !isActive || sortDirection === 'desc' ? 'asc' : 'desc';
+    SortingIcon = sortDirection === 'desc' ? ArrowDownIcon : ArrowUpIcon;
     sortableHeaderProps = {
       as: 'button',
-      label: props.sortDirection,
+      label: sortDirection,
       onClick: () => props.onClick && props.onClick(props.columnKey, nextSortDirection),
       isActive,
       isSortable: true
@@ -472,11 +476,11 @@ const HeaderCell = props => {
     columnKey: props.columnKey,
     onColumnResized: props.onColumnResized,
     disableResizing: props.disableResizing,
-    disableHeaderStickiness: props.disableHeaderStickiness,
+    disableHeaderStickiness: disableHeaderStickiness,
     children: jsxs(HeaderCellInner, _objectSpread$3(_objectSpread$3({
       shouldWrap: props.shouldWrap,
       isCondensed: props.isCondensed,
-      horizontalCellAlignment: props.horizontalCellAlignment
+      horizontalCellAlignment: horizontalCellAlignment
     }, sortableHeaderProps), {}, {
       children: [jsxs(HeaderLabelWrapper, {
         children: [jsx(HeaderLabelTextWrapper, {
@@ -510,21 +514,22 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
   sortDirection: _pt.oneOf(['desc', 'asc']),
   disableResizing: _pt.bool,
   onColumnResized: _pt.func,
-  disableHeaderStickiness: _pt.bool.isRequired,
-  horizontalCellAlignment: _pt.oneOf(['left', 'center', 'right']).isRequired,
+  disableHeaderStickiness: _pt.bool,
+  horizontalCellAlignment: _pt.oneOf(['left', 'center', 'right']),
   iconComponent: _pt.node
 } : {};
 HeaderCell.displayName = 'HeaderCell';
-HeaderCell.defaultProps = defaultProps$3;
 var HeaderCell$1 = HeaderCell;
 
+const _excluded$2 = ["isTruncated", "shouldRenderBottomBorder"];
 function ownKeys$2(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-const defaultProps$2 = {
-  isTruncated: false,
-  shouldRenderBottomBorder: true
-};
-const DataCell = props => {
+const DataCell = _ref => {
+  let _ref$isTruncated = _ref.isTruncated,
+    isTruncated = _ref$isTruncated === void 0 ? false : _ref$isTruncated,
+    _ref$shouldRenderBott = _ref.shouldRenderBottomBorder,
+    shouldRenderBottomBorder = _ref$shouldRenderBott === void 0 ? true : _ref$shouldRenderBott,
+    props = _objectWithoutProperties(_ref, _excluded$2);
   if (props.shouldRenderCollapseButton) {
     process.env.NODE_ENV !== "production" ? warning(typeof props.handleRowCollapseClick === 'function', 'DataTable: "handleRowCollapseClick" is required when shouldRenderCollapseButton is true.') : void 0;
     process.env.NODE_ENV !== "production" ? warning(typeof props.isRowCollapsed === 'boolean', 'DataTable: "isRowCollapsed" is required when shouldRenderCollapseButton is true.') : void 0;
@@ -533,14 +538,17 @@ const DataCell = props => {
   return jsxs(BaseCell, {
     onClick: props.onCellClick,
     shouldIgnoreRowClick: props.shouldIgnoreRowClick,
-    shouldClipContent: props.isTruncated && !props.shouldRenderResizingIndicator,
-    shouldRenderBottomBorder: props.shouldRenderBottomBorder,
+    shouldClipContent: isTruncated && !props.shouldRenderResizingIndicator,
+    shouldRenderBottomBorder: shouldRenderBottomBorder,
     children: [jsx(CellInner, _objectSpread$2(_objectSpread$2({
       isCondensed: props.isCondensed,
-      isTruncated: props.isTruncated,
+      isTruncated: isTruncated,
       verticalCellAlignment: props.verticalCellAlignment,
       horizontalCellAlignment: props.horizontalCellAlignment
-    }, filterDataAttributes(props)), {}, {
+    }, filterDataAttributes(_objectSpread$2({
+      isTruncated,
+      shouldRenderBottomBorder
+    }, props))), {}, {
       children: props.children
     })), props.shouldRenderCollapseButton && jsx(RowExpandCollapseButton, {
       label: "Expand/Collapse Row",
@@ -565,32 +573,36 @@ DataCell.propTypes = process.env.NODE_ENV !== "production" ? {
   shouldIgnoreRowClick: _pt.bool,
   verticalCellAlignment: _pt.oneOf(['top', 'center', 'bottom']),
   horizontalCellAlignment: _pt.oneOf(['left', 'center', 'right']),
-  shouldRenderBottomBorder: _pt.bool.isRequired,
+  shouldRenderBottomBorder: _pt.bool,
   shouldRenderCollapseButton: _pt.bool.isRequired,
   shouldRenderResizingIndicator: _pt.bool.isRequired,
   handleRowCollapseClick: _pt.func,
   isRowCollapsed: _pt.bool
 } : {};
 DataCell.displayName = 'DataCell';
-DataCell.defaultProps = defaultProps$2;
 var DataCell$1 = DataCell;
 
-const defaultItemRenderer = (row, column) => {
+const _excluded$1 = ["isCondensed", "shouldClipContent", "verticalCellAlignment", "horizontalCellAlignment", "shouldRenderBottomBorder", "itemRenderer"];
+const defaultItemRenderer = (row, column, _isRowCollapsed) => {
   // @ts-ignore
   return row[column.key];
 };
-const defaultProps$1 = {
-  isCondensed: true,
-  shouldClipContent: false,
-  verticalCellAlignment: 'top',
-  horizontalCellAlignment: 'left',
-  shouldRenderBottomBorder: true,
-  itemRenderer: defaultItemRenderer
-};
-const DataRow = props => {
+const DataRow = _ref => {
   var _context, _context2;
-  const _ref = useContext(ColumnResizingContext),
-    getIsColumnBeingResized = _ref.getIsColumnBeingResized;
+  let _ref$isCondensed = _ref.isCondensed,
+    isCondensed = _ref$isCondensed === void 0 ? true : _ref$isCondensed;
+    _ref.shouldClipContent;
+    let _ref$verticalCellAlig = _ref.verticalCellAlignment,
+    verticalCellAlignment = _ref$verticalCellAlig === void 0 ? 'top' : _ref$verticalCellAlig,
+    _ref$horizontalCellAl = _ref.horizontalCellAlignment,
+    horizontalCellAlignment = _ref$horizontalCellAl === void 0 ? 'left' : _ref$horizontalCellAl,
+    _ref$shouldRenderBott = _ref.shouldRenderBottomBorder,
+    shouldRenderBottomBorder = _ref$shouldRenderBott === void 0 ? true : _ref$shouldRenderBott,
+    _ref$itemRenderer = _ref.itemRenderer,
+    itemRenderer = _ref$itemRenderer === void 0 ? defaultItemRenderer : _ref$itemRenderer,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  const _ref2 = useContext(ColumnResizingContext),
+    getIsColumnBeingResized = _ref2.getIsColumnBeingResized;
   const rowHasTruncatedColumn = _someInstanceProperty(_context = props.columns).call(_context, column => column.isTruncated);
   const _useState = useState(rowHasTruncatedColumn),
     _useState2 = _slicedToArray(_useState, 2),
@@ -614,17 +626,17 @@ const DataRow = props => {
     children: _mapInstanceProperty(_context2 = props.columns).call(_context2, (column, columnIndex) => jsx(DataCell$1, {
       "data-testid": `cell-${props.rowIndex}-${column.key}`,
       isTruncated: column.isTruncated && isRowCollapsed,
-      isCondensed: props.isCondensed,
+      isCondensed: isCondensed,
       isRowCollapsed: isRowCollapsed,
-      verticalCellAlignment: props.verticalCellAlignment,
-      horizontalCellAlignment: column.align ? column.align : props.horizontalCellAlignment,
+      verticalCellAlignment: verticalCellAlignment,
+      horizontalCellAlignment: column.align ? column.align : horizontalCellAlignment,
       shouldIgnoreRowClick: column.shouldIgnoreRowClick,
       handleRowCollapseClick: handleRowCollapseClick,
       shouldRenderCollapseButton: shouldRenderCollapseButton(props.columns.length, columnIndex),
       onCellClick: props.onRowClick && !column.shouldIgnoreRowClick ? () => props.onRowClick?.(props.row, props.rowIndex, column.key) : undefined,
-      shouldRenderBottomBorder: props.shouldRenderBottomBorder,
+      shouldRenderBottomBorder: shouldRenderBottomBorder,
       shouldRenderResizingIndicator: getIsColumnBeingResized(columnIndex),
-      children: column.renderItem ? column.renderItem(props.row, isRowCollapsed) : props.itemRenderer(props.row, column, isRowCollapsed)
+      children: column.renderItem ? column.renderItem(props.row, isRowCollapsed) : itemRenderer(props.row, column, isRowCollapsed)
     }, `${props.row.id}-${column.key}`))
   });
 };
@@ -636,7 +648,6 @@ DataRow.propTypes = process.env.NODE_ENV !== "production" ? {
   shouldRenderBottomBorder: _pt.bool.isRequired,
   onExpandRow: _pt.func
 } : {};
-DataRow.defaultProps = defaultProps$1;
 DataRow.displayName = 'DataRow';
 var DataRow$1 = DataRow;
 
@@ -792,6 +803,7 @@ const useManualColumnResizing = tableRef => {
 };
 var useManualColumnResizing$1 = useManualColumnResizing;
 
+const _excluded = ["columns", "isCondensed", "wrapHeaderLabels", "verticalCellAlignment", "horizontalCellAlignment", "disableSelfContainment", "itemRenderer"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 const getColumnsLayoutInfo = columns => _reduceInstanceProperty(columns).call(columns, (acc, currentValue) => [...acc, {
@@ -803,24 +815,29 @@ const shouldRenderRowBottomBorder = (rowIndex, rowCount, footer) => {
   if (rowIndex + 1 < rowCount) return true;
   return false;
 };
-const defaultProps = {
-  columns: [],
-  isCondensed: true,
-  wrapHeaderLabels: true,
-  verticalCellAlignment: 'top',
-  horizontalCellAlignment: 'left',
-  disableSelfContainment: false,
-  // @ts-ignore
-  itemRenderer: (row, column) => row[column.key]
-};
-const DataTable = props => {
+const DataTable = _ref => {
   var _context;
+  let _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? [] : _ref$columns,
+    _ref$isCondensed = _ref.isCondensed,
+    isCondensed = _ref$isCondensed === void 0 ? true : _ref$isCondensed,
+    _ref$wrapHeaderLabels = _ref.wrapHeaderLabels,
+    wrapHeaderLabels = _ref$wrapHeaderLabels === void 0 ? true : _ref$wrapHeaderLabels,
+    _ref$verticalCellAlig = _ref.verticalCellAlignment,
+    verticalCellAlignment = _ref$verticalCellAlig === void 0 ? 'top' : _ref$verticalCellAlig,
+    _ref$horizontalCellAl = _ref.horizontalCellAlignment,
+    horizontalCellAlignment = _ref$horizontalCellAl === void 0 ? 'left' : _ref$horizontalCellAl,
+    _ref$disableSelfConta = _ref.disableSelfContainment,
+    disableSelfContainment = _ref$disableSelfConta === void 0 ? false : _ref$disableSelfConta,
+    _ref$itemRenderer = _ref.itemRenderer,
+    itemRenderer = _ref$itemRenderer === void 0 ? (row, column) => row[column.key] : _ref$itemRenderer,
+    props = _objectWithoutProperties(_ref, _excluded);
   const _useDataTableManagerC = useDataTableManagerContext(),
-    columns = _useDataTableManagerC.columns,
-    isCondensed = _useDataTableManagerC.isCondensed;
-  const isValueFromProvider = Boolean(columns && columns.length !== 0);
-  const columnsData = isValueFromProvider ? columns : props.columns;
-  const condensedValue = isValueFromProvider && isCondensed !== undefined ? isCondensed : props.isCondensed;
+    contextColumns = _useDataTableManagerC.columns,
+    contextIsCondensed = _useDataTableManagerC.isCondensed;
+  const isValueFromProvider = Boolean(contextColumns && contextColumns.length !== 0);
+  const columnsData = isValueFromProvider ? contextColumns : columns;
+  const condensedValue = isValueFromProvider && contextIsCondensed !== undefined ? contextIsCondensed : isCondensed;
 
   //  TODO - initial poc for the nested rows
   // const [openedItemIds, setOpenedItemIds] = useState<string[]>([]);
@@ -861,13 +878,19 @@ const DataTable = props => {
     maxWidth: props.maxWidth,
     maxHeight: props.maxHeight,
     isBeingResized: columnResizingReducer.getIsAnyColumnBeingResized(),
-    disableSelfContainment: !!props.disableSelfContainment,
+    disableSelfContainment: !!disableSelfContainment,
     children: [jsx(TableGrid, _objectSpread(_objectSpread({
       ref: tableRef
-    }, filterDataAttributes(props)), {}, {
+    }, filterDataAttributes(_objectSpread({
+      isCondensed,
+      wrapHeaderLabels,
+      verticalCellAlignment,
+      horizontalCellAlignment,
+      disableSelfContainment
+    }, props))), {}, {
       columns: columnsData,
       maxHeight: props.maxHeight,
-      disableSelfContainment: !!props.disableSelfContainment,
+      disableSelfContainment: !!disableSelfContainment,
       resizedTotalWidth: resizedTotalWidth,
       children: jsxs(ColumnResizingContext.Provider, {
         value: columnResizingReducer,
@@ -875,13 +898,13 @@ const DataTable = props => {
           children: jsx(TableRow, {
             isRowClickable: false,
             children: _mapInstanceProperty(columnsData).call(columnsData, column => jsx(HeaderCell$1, {
-              shouldWrap: props.wrapHeaderLabels,
+              shouldWrap: wrapHeaderLabels,
               isCondensed: condensedValue,
               iconComponent: column.headerIcon,
               onColumnResized: props.onColumnResized,
               disableResizing: column.disableResizing,
-              horizontalCellAlignment: column.align ? column.align : props.horizontalCellAlignment,
-              disableHeaderStickiness: props.disableHeaderStickiness,
+              horizontalCellAlignment: column.align ? column.align : horizontalCellAlignment,
+              disableHeaderStickiness: Boolean(props.disableHeaderStickiness),
               columnWidth: column.width
               /* Sorting Props */,
               onClick: props.onSortChange && props.onSortChange,
@@ -894,12 +917,13 @@ const DataTable = props => {
           })
         }), jsx(TableBody, {
           children: _mapInstanceProperty(_context = props.rows).call(_context, (row, rowIndex) => createElement(DataRow$1, _objectSpread(_objectSpread({}, props), {}, {
+            itemRenderer: itemRenderer,
             isCondensed: condensedValue,
             columns: columnsData,
             row: row,
             key: row.id,
             rowIndex: rowIndex,
-            shouldClipContent: columnResizingReducer.getIsAnyColumnBeingResized() || hasTableBeenResized,
+            shouldClipContent: columnResizingReducer.getIsAnyColumnBeingResized() || Boolean(hasTableBeenResized),
             shouldRenderBottomBorder: shouldRenderRowBottomBorder(rowIndex, props.rows.length, props.footer)
           })))
         })]
@@ -907,7 +931,7 @@ const DataTable = props => {
     })), props.footer && jsx(Footer$1, {
       "data-testid": "footer",
       isCondensed: condensedValue,
-      horizontalCellAlignment: props.horizontalCellAlignment,
+      horizontalCellAlignment: horizontalCellAlignment,
       resizedTotalWidth: resizedTotalWidth,
       children: props.footer
     })]
@@ -927,7 +951,7 @@ DataTable.propTypes = process.env.NODE_ENV !== "production" ? {
     isSortable: _pt.bool,
     disableResizing: _pt.bool,
     shouldIgnoreRowClick: _pt.bool
-  })).isRequired,
+  })),
   customColumns: _pt.arrayOf(_pt.shape({
     key: _pt.string.isRequired,
     label: _pt.node.isRequired,
@@ -949,7 +973,7 @@ DataTable.propTypes = process.env.NODE_ENV !== "production" ? {
   onColumnResized: _pt.func,
   disableSelfContainment: _pt.bool,
   disableHeaderStickiness: _pt.bool,
-  itemRenderer: _pt.func.isRequired,
+  itemRenderer: _pt.func,
   wrapHeaderLabels: _pt.bool,
   verticalCellAlignment: _pt.oneOf(['top', 'center', 'bottom']),
   horizontalCellAlignment: _pt.oneOf(['left', 'center', 'right']),
@@ -959,11 +983,10 @@ DataTable.propTypes = process.env.NODE_ENV !== "production" ? {
   renderNestedRow: _pt.func,
   maxExpandableHeight: _pt.number
 } : {};
-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 = "19.20.1";
+var version = "19.22.0";
 
 export { DataTable$1 as default, version };

package/dist/declarations/src/data-table.d.ts

@@ -110,7 +110,7 @@ export type TDataTableProps<Row extends TRow = TRow> = {
      *
      * [Colum signatures with description](/?path=/docs/components-datatable-readme--props#signatures)
      */
-    columns: TColumn<Row>[];
+    columns?: TColumn<Row>[];
     /**
      * The columns of the nested items to be rendered in the table. Just like the columns, Each object requires a unique `key` which should correspond to property key of
      * the items of `rows` that you want to render under this column, and a `label`
@@ -165,7 +165,7 @@ export type TDataTableProps<Row extends TRow = TRow> = {
      * The default function used to render the content of each item in a cell.
      * In case a column has its own `renderItem` render function, it will take precedence over this function.
      */
-    itemRenderer: (item: Row, column: TColumn<Row>, isRowCollapsed: boolean) => ReactNode;
+    itemRenderer?: (item: Row, column: TColumn<Row>, isRowCollapsed: boolean) => ReactNode;
     /**
      * Set this to `false` to ensure that every column can render their label in one line.
      * By default the header cell grows in height in case the label does not fit in one line.
@@ -204,8 +204,7 @@ export type TDataTableProps<Row extends TRow = TRow> = {
     maxExpandableHeight?: number;
 };
 declare const DataTable: {
-    <Row extends TRow = TRow>(props: TDataTableProps<Row>): import("@emotion/react/jsx-runtime").JSX.Element;
-    defaultProps: Pick<TDataTableProps<TRow>, "columns" | "isCondensed" | "wrapHeaderLabels" | "horizontalCellAlignment" | "verticalCellAlignment" | "disableSelfContainment" | "itemRenderer">;
+    <Row extends TRow = TRow>({ columns, isCondensed, wrapHeaderLabels, verticalCellAlignment, horizontalCellAlignment, disableSelfContainment, itemRenderer, ...props }: TDataTableProps<Row>): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DataTable;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/data-table",
   "description": "A component for rendering tabular data.",
-  "version": "19.20.1",
+  "version": "19.22.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,13 +21,13 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/accessible-button": "19.20.1",
-    "@commercetools-uikit/data-table-manager": "19.20.1",
-    "@commercetools-uikit/design-system": "19.20.1",
-    "@commercetools-uikit/hooks": "19.20.1",
-    "@commercetools-uikit/icons": "19.20.1",
-    "@commercetools-uikit/secondary-icon-button": "19.20.1",
-    "@commercetools-uikit/utils": "19.20.1",
+    "@commercetools-uikit/accessible-button": "19.22.0",
+    "@commercetools-uikit/data-table-manager": "19.22.0",
+    "@commercetools-uikit/design-system": "19.22.0",
+    "@commercetools-uikit/hooks": "19.22.0",
+    "@commercetools-uikit/icons": "19.22.0",
+    "@commercetools-uikit/secondary-icon-button": "19.22.0",
+    "@commercetools-uikit/utils": "19.22.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",