@commercetools-uikit/data-table 19.20.0 → 19.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/commercetools-uikit-data-table.cjs.dev.js +100 -77
  2. package/dist/commercetools-uikit-data-table.cjs.prod.js +97 -74
  3. package/dist/commercetools-uikit-data-table.esm.js +98 -75
  4. package/dist/declarations/src/data-table.d.ts +3 -4
  5. package/package.json +8 -8
package/dist/commercetools-uikit-data-table.cjs.dev.js CHANGED
@@ -2,10 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
6
- var _pt = require('prop-types');
7
- var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
8
- var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
9
5
  var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
10
6
  var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
11
7
  var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -14,6 +10,11 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
14
10
  var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
15
11
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
16
12
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
13
+ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
14
+ var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
15
+ var _pt = require('prop-types');
16
+ var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
17
+ var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
17
18
  var react$1 = require('react');
18
19
  var isEqual = require('lodash/isEqual');
19
20
  var utils = require('@commercetools-uikit/utils');
@@ -32,9 +33,6 @@ var dataTableManagerProvider = require('@commercetools-uikit/data-table-manager/
32
33
 
33
34
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
34
35
 
35
- var _pt__default = /*#__PURE__*/_interopDefault(_pt);
36
- var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
37
- var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
38
36
  var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
39
37
  var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
40
38
  var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
@@ -43,6 +41,9 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
43
41
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
44
42
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
45
43
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
44
+ var _pt__default = /*#__PURE__*/_interopDefault(_pt);
45
+ var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
46
+ var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
46
47
  var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
47
48
  var _styled__default = /*#__PURE__*/_interopDefault(_styled);
48
49
  var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
@@ -383,7 +384,7 @@ const TableRow = /*#__PURE__*/_styled__default["default"]("tr", process.env.NODE
383
384
  label: "TableRow"
384
385
  })("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= */"));
385
386
 
386
- const defaultProps$4 = {
387
+ const defaultProps = {
387
388
  horizontalCellAlignment: 'left'
388
389
  };
389
390
  const Footer = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
@@ -393,7 +394,7 @@ const Footer = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_
393
394
  label: "Footer"
394
395
  })("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, ";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= */"));
395
396
  Footer.displayName = 'Footer';
396
- Footer.defaultProps = defaultProps$4;
397
+ Footer.defaultProps = defaultProps;
397
398
  var Footer$1 = Footer;
398
399
 
399
400
  const ResizerIndicator = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
@@ -430,6 +431,7 @@ const isFixedWidthValue = value => {
430
431
  };
431
432
  var isFixedWidthValue$1 = isFixedWidthValue;
432
433
 
434
+ const _excluded$3 = ["sortDirection", "disableHeaderStickiness", "horizontalCellAlignment"];
433
435
  function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
434
436
  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__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
435
437
  const HeaderCellWrapper = props => {
@@ -469,21 +471,23 @@ const HeaderCellWrapper = props => {
469
471
  });
470
472
  };
471
473
  HeaderCellWrapper.displayName = 'HeaderCellWrapper';
472
- const defaultProps$3 = {
473
- sortDirection: 'desc',
474
- disableHeaderStickiness: false,
475
- horizontalCellAlignment: 'left'
476
- };
477
- const HeaderCell = props => {
474
+ const HeaderCell = _ref => {
475
+ let _ref$sortDirection = _ref.sortDirection,
476
+ sortDirection = _ref$sortDirection === void 0 ? 'desc' : _ref$sortDirection,
477
+ _ref$disableHeaderSti = _ref.disableHeaderStickiness,
478
+ disableHeaderStickiness = _ref$disableHeaderSti === void 0 ? false : _ref$disableHeaderSti,
479
+ _ref$horizontalCellAl = _ref.horizontalCellAlignment,
480
+ horizontalCellAlignment = _ref$horizontalCellAl === void 0 ? 'left' : _ref$horizontalCellAl,
481
+ props = _objectWithoutProperties(_ref, _excluded$3);
478
482
  let sortableHeaderProps = {};
479
483
  let SortingIcon;
480
484
  if (props.isSortable) {
481
485
  const isActive = props.sortedBy === props.columnKey;
482
- const nextSortDirection = !isActive || props.sortDirection === 'desc' ? 'asc' : 'desc';
483
- SortingIcon = props.sortDirection === 'desc' ? icons.ArrowDownIcon : icons.ArrowUpIcon;
486
+ const nextSortDirection = !isActive || sortDirection === 'desc' ? 'asc' : 'desc';
487
+ SortingIcon = sortDirection === 'desc' ? icons.ArrowDownIcon : icons.ArrowUpIcon;
484
488
  sortableHeaderProps = {
485
489
  as: 'button',
486
- label: props.sortDirection,
490
+ label: sortDirection,
487
491
  onClick: () => props.onClick && props.onClick(props.columnKey, nextSortDirection),
488
492
  isActive,
489
493
  isSortable: true
@@ -495,11 +499,11 @@ const HeaderCell = props => {
495
499
  columnKey: props.columnKey,
496
500
  onColumnResized: props.onColumnResized,
497
501
  disableResizing: props.disableResizing,
498
- disableHeaderStickiness: props.disableHeaderStickiness,
502
+ disableHeaderStickiness: disableHeaderStickiness,
499
503
  children: jsxRuntime.jsxs(HeaderCellInner, _objectSpread$3(_objectSpread$3({
500
504
  shouldWrap: props.shouldWrap,
501
505
  isCondensed: props.isCondensed,
502
- horizontalCellAlignment: props.horizontalCellAlignment
506
+ horizontalCellAlignment: horizontalCellAlignment
503
507
  }, sortableHeaderProps), {}, {
504
508
  children: [jsxRuntime.jsxs(HeaderLabelWrapper, {
505
509
  children: [jsxRuntime.jsx(HeaderLabelTextWrapper, {
@@ -538,16 +542,17 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
538
542
  iconComponent: _pt__default["default"].node
539
543
  } : {};
540
544
  HeaderCell.displayName = 'HeaderCell';
541
- HeaderCell.defaultProps = defaultProps$3;
542
545
  var HeaderCell$1 = HeaderCell;
543
546
 
547
+ const _excluded$2 = ["isTruncated", "shouldRenderBottomBorder"];
544
548
  function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
545
549
  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__default["default"](_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
546
- const defaultProps$2 = {
547
- isTruncated: false,
548
- shouldRenderBottomBorder: true
549
- };
550
- const DataCell = props => {
550
+ const DataCell = _ref => {
551
+ let _ref$isTruncated = _ref.isTruncated,
552
+ isTruncated = _ref$isTruncated === void 0 ? false : _ref$isTruncated,
553
+ _ref$shouldRenderBott = _ref.shouldRenderBottomBorder,
554
+ shouldRenderBottomBorder = _ref$shouldRenderBott === void 0 ? true : _ref$shouldRenderBott,
555
+ props = _objectWithoutProperties(_ref, _excluded$2);
551
556
  if (props.shouldRenderCollapseButton) {
552
557
  process.env.NODE_ENV !== "production" ? utils.warning(typeof props.handleRowCollapseClick === 'function', 'DataTable: "handleRowCollapseClick" is required when shouldRenderCollapseButton is true.') : void 0;
553
558
  process.env.NODE_ENV !== "production" ? utils.warning(typeof props.isRowCollapsed === 'boolean', 'DataTable: "isRowCollapsed" is required when shouldRenderCollapseButton is true.') : void 0;
@@ -556,14 +561,17 @@ const DataCell = props => {
556
561
  return jsxRuntime.jsxs(BaseCell, {
557
562
  onClick: props.onCellClick,
558
563
  shouldIgnoreRowClick: props.shouldIgnoreRowClick,
559
- shouldClipContent: props.isTruncated && !props.shouldRenderResizingIndicator,
560
- shouldRenderBottomBorder: props.shouldRenderBottomBorder,
564
+ shouldClipContent: isTruncated && !props.shouldRenderResizingIndicator,
565
+ shouldRenderBottomBorder: shouldRenderBottomBorder,
561
566
  children: [jsxRuntime.jsx(CellInner, _objectSpread$2(_objectSpread$2({
562
567
  isCondensed: props.isCondensed,
563
- isTruncated: props.isTruncated,
568
+ isTruncated: isTruncated,
564
569
  verticalCellAlignment: props.verticalCellAlignment,
565
570
  horizontalCellAlignment: props.horizontalCellAlignment
566
- }, utils.filterDataAttributes(props)), {}, {
571
+ }, utils.filterDataAttributes(_objectSpread$2({
572
+ isTruncated,
573
+ shouldRenderBottomBorder
574
+ }, props))), {}, {
567
575
  children: props.children
568
576
  })), props.shouldRenderCollapseButton && jsxRuntime.jsx(RowExpandCollapseButton, {
569
577
  label: "Expand/Collapse Row",
@@ -595,25 +603,29 @@ DataCell.propTypes = process.env.NODE_ENV !== "production" ? {
595
603
  isRowCollapsed: _pt__default["default"].bool
596
604
  } : {};
597
605
  DataCell.displayName = 'DataCell';
598
- DataCell.defaultProps = defaultProps$2;
599
606
  var DataCell$1 = DataCell;
600
607
 
601
- const defaultItemRenderer = (row, column) => {
608
+ const _excluded$1 = ["isCondensed", "shouldClipContent", "verticalCellAlignment", "horizontalCellAlignment", "shouldRenderBottomBorder", "itemRenderer"];
609
+ const defaultItemRenderer = (row, column, _isRowCollapsed) => {
602
610
  // @ts-ignore
603
611
  return row[column.key];
604
612
  };
605
- const defaultProps$1 = {
606
- isCondensed: true,
607
- shouldClipContent: false,
608
- verticalCellAlignment: 'top',
609
- horizontalCellAlignment: 'left',
610
- shouldRenderBottomBorder: true,
611
- itemRenderer: defaultItemRenderer
612
- };
613
- const DataRow = props => {
613
+ const DataRow = _ref => {
614
614
  var _context, _context2;
615
- const _ref = react$1.useContext(ColumnResizingContext),
616
- getIsColumnBeingResized = _ref.getIsColumnBeingResized;
615
+ let _ref$isCondensed = _ref.isCondensed,
616
+ isCondensed = _ref$isCondensed === void 0 ? true : _ref$isCondensed;
617
+ _ref.shouldClipContent;
618
+ let _ref$verticalCellAlig = _ref.verticalCellAlignment,
619
+ verticalCellAlignment = _ref$verticalCellAlig === void 0 ? 'top' : _ref$verticalCellAlig,
620
+ _ref$horizontalCellAl = _ref.horizontalCellAlignment,
621
+ horizontalCellAlignment = _ref$horizontalCellAl === void 0 ? 'left' : _ref$horizontalCellAl,
622
+ _ref$shouldRenderBott = _ref.shouldRenderBottomBorder,
623
+ shouldRenderBottomBorder = _ref$shouldRenderBott === void 0 ? true : _ref$shouldRenderBott,
624
+ _ref$itemRenderer = _ref.itemRenderer,
625
+ itemRenderer = _ref$itemRenderer === void 0 ? defaultItemRenderer : _ref$itemRenderer,
626
+ props = _objectWithoutProperties(_ref, _excluded$1);
627
+ const _ref2 = react$1.useContext(ColumnResizingContext),
628
+ getIsColumnBeingResized = _ref2.getIsColumnBeingResized;
617
629
  const rowHasTruncatedColumn = _someInstanceProperty__default["default"](_context = props.columns).call(_context, column => column.isTruncated);
618
630
  const _useState = react$1.useState(rowHasTruncatedColumn),
619
631
  _useState2 = _slicedToArray(_useState, 2),
@@ -637,17 +649,17 @@ const DataRow = props => {
637
649
  children: _mapInstanceProperty__default["default"](_context2 = props.columns).call(_context2, (column, columnIndex) => jsxRuntime.jsx(DataCell$1, {
638
650
  "data-testid": `cell-${props.rowIndex}-${column.key}`,
639
651
  isTruncated: column.isTruncated && isRowCollapsed,
640
- isCondensed: props.isCondensed,
652
+ isCondensed: isCondensed,
641
653
  isRowCollapsed: isRowCollapsed,
642
- verticalCellAlignment: props.verticalCellAlignment,
643
- horizontalCellAlignment: column.align ? column.align : props.horizontalCellAlignment,
654
+ verticalCellAlignment: verticalCellAlignment,
655
+ horizontalCellAlignment: column.align ? column.align : horizontalCellAlignment,
644
656
  shouldIgnoreRowClick: column.shouldIgnoreRowClick,
645
657
  handleRowCollapseClick: handleRowCollapseClick,
646
658
  shouldRenderCollapseButton: shouldRenderCollapseButton(props.columns.length, columnIndex),
647
659
  onCellClick: props.onRowClick && !column.shouldIgnoreRowClick ? () => props.onRowClick?.(props.row, props.rowIndex, column.key) : undefined,
648
- shouldRenderBottomBorder: props.shouldRenderBottomBorder,
660
+ shouldRenderBottomBorder: shouldRenderBottomBorder,
649
661
  shouldRenderResizingIndicator: getIsColumnBeingResized(columnIndex),
650
- children: column.renderItem ? column.renderItem(props.row, isRowCollapsed) : props.itemRenderer(props.row, column, isRowCollapsed)
662
+ children: column.renderItem ? column.renderItem(props.row, isRowCollapsed) : itemRenderer(props.row, column, isRowCollapsed)
651
663
  }, `${props.row.id}-${column.key}`))
652
664
  });
653
665
  };
@@ -659,7 +671,6 @@ DataRow.propTypes = process.env.NODE_ENV !== "production" ? {
659
671
  shouldRenderBottomBorder: _pt__default["default"].bool.isRequired,
660
672
  onExpandRow: _pt__default["default"].func
661
673
  } : {};
662
- DataRow.defaultProps = defaultProps$1;
663
674
  DataRow.displayName = 'DataRow';
664
675
  var DataRow$1 = DataRow;
665
676
 
@@ -815,6 +826,7 @@ const useManualColumnResizing = tableRef => {
815
826
  };
816
827
  var useManualColumnResizing$1 = useManualColumnResizing;
817
828
 
829
+ const _excluded = ["columns", "isCondensed", "wrapHeaderLabels", "verticalCellAlignment", "horizontalCellAlignment", "disableSelfContainment", "itemRenderer"];
818
830
  function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
819
831
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
820
832
  const getColumnsLayoutInfo = columns => _reduceInstanceProperty__default["default"](columns).call(columns, (acc, currentValue) => [...acc, {
@@ -826,24 +838,29 @@ const shouldRenderRowBottomBorder = (rowIndex, rowCount, footer) => {
826
838
  if (rowIndex + 1 < rowCount) return true;
827
839
  return false;
828
840
  };
829
- const defaultProps = {
830
- columns: [],
831
- isCondensed: true,
832
- wrapHeaderLabels: true,
833
- verticalCellAlignment: 'top',
834
- horizontalCellAlignment: 'left',
835
- disableSelfContainment: false,
836
- // @ts-ignore
837
- itemRenderer: (row, column) => row[column.key]
838
- };
839
- const DataTable = props => {
841
+ const DataTable = _ref => {
840
842
  var _context;
843
+ let _ref$columns = _ref.columns,
844
+ columns = _ref$columns === void 0 ? [] : _ref$columns,
845
+ _ref$isCondensed = _ref.isCondensed,
846
+ isCondensed = _ref$isCondensed === void 0 ? true : _ref$isCondensed,
847
+ _ref$wrapHeaderLabels = _ref.wrapHeaderLabels,
848
+ wrapHeaderLabels = _ref$wrapHeaderLabels === void 0 ? true : _ref$wrapHeaderLabels,
849
+ _ref$verticalCellAlig = _ref.verticalCellAlignment,
850
+ verticalCellAlignment = _ref$verticalCellAlig === void 0 ? 'top' : _ref$verticalCellAlig,
851
+ _ref$horizontalCellAl = _ref.horizontalCellAlignment,
852
+ horizontalCellAlignment = _ref$horizontalCellAl === void 0 ? 'left' : _ref$horizontalCellAl,
853
+ _ref$disableSelfConta = _ref.disableSelfContainment,
854
+ disableSelfContainment = _ref$disableSelfConta === void 0 ? false : _ref$disableSelfConta,
855
+ _ref$itemRenderer = _ref.itemRenderer,
856
+ itemRenderer = _ref$itemRenderer === void 0 ? (row, column) => row[column.key] : _ref$itemRenderer,
857
+ props = _objectWithoutProperties(_ref, _excluded);
841
858
  const _useDataTableManagerC = dataTableManagerProvider.useDataTableManagerContext(),
842
- columns = _useDataTableManagerC.columns,
843
- isCondensed = _useDataTableManagerC.isCondensed;
844
- const isValueFromProvider = Boolean(columns && columns.length !== 0);
845
- const columnsData = isValueFromProvider ? columns : props.columns;
846
- const condensedValue = isValueFromProvider && isCondensed !== undefined ? isCondensed : props.isCondensed;
859
+ contextColumns = _useDataTableManagerC.columns,
860
+ contextIsCondensed = _useDataTableManagerC.isCondensed;
861
+ const isValueFromProvider = Boolean(contextColumns && contextColumns.length !== 0);
862
+ const columnsData = isValueFromProvider ? contextColumns : columns;
863
+ const condensedValue = isValueFromProvider && contextIsCondensed !== undefined ? contextIsCondensed : isCondensed;
847
864
 
848
865
  // TODO - initial poc for the nested rows
849
866
  // const [openedItemIds, setOpenedItemIds] = useState<string[]>([]);
@@ -884,13 +901,19 @@ const DataTable = props => {
884
901
  maxWidth: props.maxWidth,
885
902
  maxHeight: props.maxHeight,
886
903
  isBeingResized: columnResizingReducer.getIsAnyColumnBeingResized(),
887
- disableSelfContainment: !!props.disableSelfContainment,
904
+ disableSelfContainment: !!disableSelfContainment,
888
905
  children: [jsxRuntime.jsx(TableGrid, _objectSpread(_objectSpread({
889
906
  ref: tableRef
890
- }, utils.filterDataAttributes(props)), {}, {
907
+ }, utils.filterDataAttributes(_objectSpread({
908
+ isCondensed,
909
+ wrapHeaderLabels,
910
+ verticalCellAlignment,
911
+ horizontalCellAlignment,
912
+ disableSelfContainment
913
+ }, props))), {}, {
891
914
  columns: columnsData,
892
915
  maxHeight: props.maxHeight,
893
- disableSelfContainment: !!props.disableSelfContainment,
916
+ disableSelfContainment: !!disableSelfContainment,
894
917
  resizedTotalWidth: resizedTotalWidth,
895
918
  children: jsxRuntime.jsxs(ColumnResizingContext.Provider, {
896
919
  value: columnResizingReducer,
@@ -898,13 +921,13 @@ const DataTable = props => {
898
921
  children: jsxRuntime.jsx(TableRow, {
899
922
  isRowClickable: false,
900
923
  children: _mapInstanceProperty__default["default"](columnsData).call(columnsData, column => jsxRuntime.jsx(HeaderCell$1, {
901
- shouldWrap: props.wrapHeaderLabels,
924
+ shouldWrap: wrapHeaderLabels,
902
925
  isCondensed: condensedValue,
903
926
  iconComponent: column.headerIcon,
904
927
  onColumnResized: props.onColumnResized,
905
928
  disableResizing: column.disableResizing,
906
- horizontalCellAlignment: column.align ? column.align : props.horizontalCellAlignment,
907
- disableHeaderStickiness: props.disableHeaderStickiness,
929
+ horizontalCellAlignment: column.align ? column.align : horizontalCellAlignment,
930
+ disableHeaderStickiness: Boolean(props.disableHeaderStickiness),
908
931
  columnWidth: column.width
909
932
  /* Sorting Props */,
910
933
  onClick: props.onSortChange && props.onSortChange,
@@ -917,12 +940,13 @@ const DataTable = props => {
917
940
  })
918
941
  }), jsxRuntime.jsx(TableBody, {
919
942
  children: _mapInstanceProperty__default["default"](_context = props.rows).call(_context, (row, rowIndex) => react.createElement(DataRow$1, _objectSpread(_objectSpread({}, props), {}, {
943
+ itemRenderer: itemRenderer,
920
944
  isCondensed: condensedValue,
921
945
  columns: columnsData,
922
946
  row: row,
923
947
  key: row.id,
924
948
  rowIndex: rowIndex,
925
- shouldClipContent: columnResizingReducer.getIsAnyColumnBeingResized() || hasTableBeenResized,
949
+ shouldClipContent: columnResizingReducer.getIsAnyColumnBeingResized() || Boolean(hasTableBeenResized),
926
950
  shouldRenderBottomBorder: shouldRenderRowBottomBorder(rowIndex, props.rows.length, props.footer)
927
951
  })))
928
952
  })]
@@ -930,7 +954,7 @@ const DataTable = props => {
930
954
  })), props.footer && jsxRuntime.jsx(Footer$1, {
931
955
  "data-testid": "footer",
932
956
  isCondensed: condensedValue,
933
- horizontalCellAlignment: props.horizontalCellAlignment,
957
+ horizontalCellAlignment: horizontalCellAlignment,
934
958
  resizedTotalWidth: resizedTotalWidth,
935
959
  children: props.footer
936
960
  })]
@@ -950,7 +974,7 @@ DataTable.propTypes = process.env.NODE_ENV !== "production" ? {
950
974
  isSortable: _pt__default["default"].bool,
951
975
  disableResizing: _pt__default["default"].bool,
952
976
  shouldIgnoreRowClick: _pt__default["default"].bool
953
- })).isRequired,
977
+ })),
954
978
  customColumns: _pt__default["default"].arrayOf(_pt__default["default"].shape({
955
979
  key: _pt__default["default"].string.isRequired,
956
980
  label: _pt__default["default"].node.isRequired,
@@ -972,7 +996,7 @@ DataTable.propTypes = process.env.NODE_ENV !== "production" ? {
972
996
  onColumnResized: _pt__default["default"].func,
973
997
  disableSelfContainment: _pt__default["default"].bool,
974
998
  disableHeaderStickiness: _pt__default["default"].bool,
975
- itemRenderer: _pt__default["default"].func.isRequired,
999
+ itemRenderer: _pt__default["default"].func,
976
1000
  wrapHeaderLabels: _pt__default["default"].bool,
977
1001
  verticalCellAlignment: _pt__default["default"].oneOf(['top', 'center', 'bottom']),
978
1002
  horizontalCellAlignment: _pt__default["default"].oneOf(['left', 'center', 'right']),
@@ -982,12 +1006,11 @@ DataTable.propTypes = process.env.NODE_ENV !== "production" ? {
982
1006
  renderNestedRow: _pt__default["default"].func,
983
1007
  maxExpandableHeight: _pt__default["default"].number
984
1008
  } : {};
985
- DataTable.defaultProps = defaultProps;
986
1009
  DataTable.displayName = 'DataTable';
987
1010
  var DataTable$1 = DataTable;
988
1011
 
989
1012
  // NOTE: This string will be replaced on build time with the package version.
990
- var version = "19.20.0";
1013
+ var version = "19.21.0";
991
1014
 
992
1015
  Object.defineProperty(exports, 'useRowSelection', {
993
1016
  enumerable: true,
package/dist/commercetools-uikit-data-table.cjs.prod.js CHANGED
@@ -2,10 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
6
- require('prop-types');
7
- var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
8
- var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
9
5
  var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
10
6
  var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
11
7
  var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -14,6 +10,11 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
14
10
  var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
15
11
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
16
12
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
13
+ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
14
+ var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
15
+ require('prop-types');
16
+ var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
17
+ var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
17
18
  var react$1 = require('react');
18
19
  var isEqual = require('lodash/isEqual');
19
20
  var utils = require('@commercetools-uikit/utils');
@@ -32,8 +33,6 @@ var dataTableManagerProvider = require('@commercetools-uikit/data-table-manager/
32
33
 
33
34
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
34
35
 
35
- var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
36
- var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
37
36
  var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
38
37
  var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
39
38
  var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
@@ -42,6 +41,8 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
42
41
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
43
42
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
44
43
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
44
+ var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
45
+ var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
45
46
  var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
46
47
  var _styled__default = /*#__PURE__*/_interopDefault(_styled);
47
48
  var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
@@ -267,14 +268,14 @@ const TableRow = /*#__PURE__*/_styled__default["default"]("tr", {
267
268
  target: "epk01s20"
268
269
  } )("display:contents;", getClickableRowStyle, " :hover,:focus-within{", RowExpandCollapseButton, "{opacity:1;}}" + ("" ));
269
270
 
270
- const defaultProps$4 = {
271
+ const defaultProps = {
271
272
  horizontalCellAlignment: 'left'
272
273
  };
273
274
  const Footer = /*#__PURE__*/_styled__default["default"]("div", {
274
275
  target: "e2ce7vj0"
275
276
  } )("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, ";width:100%;", props => props.resizedTotalWidth ? `max-width: ${props.resizedTotalWidth}px;` : '', ";" + ("" ));
276
277
  Footer.displayName = 'Footer';
277
- Footer.defaultProps = defaultProps$4;
278
+ Footer.defaultProps = defaultProps;
278
279
  var Footer$1 = Footer;
279
280
 
280
281
  const ResizerIndicator = /*#__PURE__*/_styled__default["default"]("div", {
@@ -302,6 +303,7 @@ const isFixedWidthValue = value => {
302
303
  };
303
304
  var isFixedWidthValue$1 = isFixedWidthValue;
304
305
 
306
+ const _excluded$3 = ["sortDirection", "disableHeaderStickiness", "horizontalCellAlignment"];
305
307
  function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
306
308
  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__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
307
309
  const HeaderCellWrapper = props => {
@@ -341,21 +343,23 @@ const HeaderCellWrapper = props => {
341
343
  });
342
344
  };
343
345
  HeaderCellWrapper.displayName = 'HeaderCellWrapper';
344
- const defaultProps$3 = {
345
- sortDirection: 'desc',
346
- disableHeaderStickiness: false,
347
- horizontalCellAlignment: 'left'
348
- };
349
- const HeaderCell = props => {
346
+ const HeaderCell = _ref => {
347
+ let _ref$sortDirection = _ref.sortDirection,
348
+ sortDirection = _ref$sortDirection === void 0 ? 'desc' : _ref$sortDirection,
349
+ _ref$disableHeaderSti = _ref.disableHeaderStickiness,
350
+ disableHeaderStickiness = _ref$disableHeaderSti === void 0 ? false : _ref$disableHeaderSti,
351
+ _ref$horizontalCellAl = _ref.horizontalCellAlignment,
352
+ horizontalCellAlignment = _ref$horizontalCellAl === void 0 ? 'left' : _ref$horizontalCellAl,
353
+ props = _objectWithoutProperties(_ref, _excluded$3);
350
354
  let sortableHeaderProps = {};
351
355
  let SortingIcon;
352
356
  if (props.isSortable) {
353
357
  const isActive = props.sortedBy === props.columnKey;
354
- const nextSortDirection = !isActive || props.sortDirection === 'desc' ? 'asc' : 'desc';
355
- SortingIcon = props.sortDirection === 'desc' ? icons.ArrowDownIcon : icons.ArrowUpIcon;
358
+ const nextSortDirection = !isActive || sortDirection === 'desc' ? 'asc' : 'desc';
359
+ SortingIcon = sortDirection === 'desc' ? icons.ArrowDownIcon : icons.ArrowUpIcon;
356
360
  sortableHeaderProps = {
357
361
  as: 'button',
358
- label: props.sortDirection,
362
+ label: sortDirection,
359
363
  onClick: () => props.onClick && props.onClick(props.columnKey, nextSortDirection),
360
364
  isActive,
361
365
  isSortable: true
@@ -366,11 +370,11 @@ const HeaderCell = props => {
366
370
  columnKey: props.columnKey,
367
371
  onColumnResized: props.onColumnResized,
368
372
  disableResizing: props.disableResizing,
369
- disableHeaderStickiness: props.disableHeaderStickiness,
373
+ disableHeaderStickiness: disableHeaderStickiness,
370
374
  children: jsxRuntime.jsxs(HeaderCellInner, _objectSpread$3(_objectSpread$3({
371
375
  shouldWrap: props.shouldWrap,
372
376
  isCondensed: props.isCondensed,
373
- horizontalCellAlignment: props.horizontalCellAlignment
377
+ horizontalCellAlignment: horizontalCellAlignment
374
378
  }, sortableHeaderProps), {}, {
375
379
  children: [jsxRuntime.jsxs(HeaderLabelWrapper, {
376
380
  children: [jsxRuntime.jsx(HeaderLabelTextWrapper, {
@@ -394,29 +398,33 @@ const HeaderCell = props => {
394
398
  };
395
399
  HeaderCell.propTypes = {};
396
400
  HeaderCell.displayName = 'HeaderCell';
397
- HeaderCell.defaultProps = defaultProps$3;
398
401
  var HeaderCell$1 = HeaderCell;
399
402
 
403
+ const _excluded$2 = ["isTruncated", "shouldRenderBottomBorder"];
400
404
  function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
401
405
  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__default["default"](_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
402
- const defaultProps$2 = {
403
- isTruncated: false,
404
- shouldRenderBottomBorder: true
405
- };
406
- const DataCell = props => {
406
+ const DataCell = _ref => {
407
+ let _ref$isTruncated = _ref.isTruncated,
408
+ isTruncated = _ref$isTruncated === void 0 ? false : _ref$isTruncated,
409
+ _ref$shouldRenderBott = _ref.shouldRenderBottomBorder,
410
+ shouldRenderBottomBorder = _ref$shouldRenderBott === void 0 ? true : _ref$shouldRenderBott,
411
+ props = _objectWithoutProperties(_ref, _excluded$2);
407
412
  if (props.shouldRenderCollapseButton) ;
408
413
  const Icon = props.isRowCollapsed ? icons.RightTriangleFilledIcon : icons.RightTriangleLinearIcon;
409
414
  return jsxRuntime.jsxs(BaseCell, {
410
415
  onClick: props.onCellClick,
411
416
  shouldIgnoreRowClick: props.shouldIgnoreRowClick,
412
- shouldClipContent: props.isTruncated && !props.shouldRenderResizingIndicator,
413
- shouldRenderBottomBorder: props.shouldRenderBottomBorder,
417
+ shouldClipContent: isTruncated && !props.shouldRenderResizingIndicator,
418
+ shouldRenderBottomBorder: shouldRenderBottomBorder,
414
419
  children: [jsxRuntime.jsx(CellInner, _objectSpread$2(_objectSpread$2({
415
420
  isCondensed: props.isCondensed,
416
- isTruncated: props.isTruncated,
421
+ isTruncated: isTruncated,
417
422
  verticalCellAlignment: props.verticalCellAlignment,
418
423
  horizontalCellAlignment: props.horizontalCellAlignment
419
- }, utils.filterDataAttributes(props)), {}, {
424
+ }, utils.filterDataAttributes(_objectSpread$2({
425
+ isTruncated,
426
+ shouldRenderBottomBorder
427
+ }, props))), {}, {
420
428
  children: props.children
421
429
  })), props.shouldRenderCollapseButton && jsxRuntime.jsx(RowExpandCollapseButton, {
422
430
  label: "Expand/Collapse Row",
@@ -435,25 +443,29 @@ const DataCell = props => {
435
443
  };
436
444
  DataCell.propTypes = {};
437
445
  DataCell.displayName = 'DataCell';
438
- DataCell.defaultProps = defaultProps$2;
439
446
  var DataCell$1 = DataCell;
440
447
 
441
- const defaultItemRenderer = (row, column) => {
448
+ const _excluded$1 = ["isCondensed", "shouldClipContent", "verticalCellAlignment", "horizontalCellAlignment", "shouldRenderBottomBorder", "itemRenderer"];
449
+ const defaultItemRenderer = (row, column, _isRowCollapsed) => {
442
450
  // @ts-ignore
443
451
  return row[column.key];
444
452
  };
445
- const defaultProps$1 = {
446
- isCondensed: true,
447
- shouldClipContent: false,
448
- verticalCellAlignment: 'top',
449
- horizontalCellAlignment: 'left',
450
- shouldRenderBottomBorder: true,
451
- itemRenderer: defaultItemRenderer
452
- };
453
- const DataRow = props => {
453
+ const DataRow = _ref => {
454
454
  var _context, _context2;
455
- const _ref = react$1.useContext(ColumnResizingContext),
456
- getIsColumnBeingResized = _ref.getIsColumnBeingResized;
455
+ let _ref$isCondensed = _ref.isCondensed,
456
+ isCondensed = _ref$isCondensed === void 0 ? true : _ref$isCondensed;
457
+ _ref.shouldClipContent;
458
+ let _ref$verticalCellAlig = _ref.verticalCellAlignment,
459
+ verticalCellAlignment = _ref$verticalCellAlig === void 0 ? 'top' : _ref$verticalCellAlig,
460
+ _ref$horizontalCellAl = _ref.horizontalCellAlignment,
461
+ horizontalCellAlignment = _ref$horizontalCellAl === void 0 ? 'left' : _ref$horizontalCellAl,
462
+ _ref$shouldRenderBott = _ref.shouldRenderBottomBorder,
463
+ shouldRenderBottomBorder = _ref$shouldRenderBott === void 0 ? true : _ref$shouldRenderBott,
464
+ _ref$itemRenderer = _ref.itemRenderer,
465
+ itemRenderer = _ref$itemRenderer === void 0 ? defaultItemRenderer : _ref$itemRenderer,
466
+ props = _objectWithoutProperties(_ref, _excluded$1);
467
+ const _ref2 = react$1.useContext(ColumnResizingContext),
468
+ getIsColumnBeingResized = _ref2.getIsColumnBeingResized;
457
469
  const rowHasTruncatedColumn = _someInstanceProperty__default["default"](_context = props.columns).call(_context, column => column.isTruncated);
458
470
  const _useState = react$1.useState(rowHasTruncatedColumn),
459
471
  _useState2 = _slicedToArray(_useState, 2),
@@ -477,22 +489,21 @@ const DataRow = props => {
477
489
  children: _mapInstanceProperty__default["default"](_context2 = props.columns).call(_context2, (column, columnIndex) => jsxRuntime.jsx(DataCell$1, {
478
490
  "data-testid": `cell-${props.rowIndex}-${column.key}`,
479
491
  isTruncated: column.isTruncated && isRowCollapsed,
480
- isCondensed: props.isCondensed,
492
+ isCondensed: isCondensed,
481
493
  isRowCollapsed: isRowCollapsed,
482
- verticalCellAlignment: props.verticalCellAlignment,
483
- horizontalCellAlignment: column.align ? column.align : props.horizontalCellAlignment,
494
+ verticalCellAlignment: verticalCellAlignment,
495
+ horizontalCellAlignment: column.align ? column.align : horizontalCellAlignment,
484
496
  shouldIgnoreRowClick: column.shouldIgnoreRowClick,
485
497
  handleRowCollapseClick: handleRowCollapseClick,
486
498
  shouldRenderCollapseButton: shouldRenderCollapseButton(props.columns.length, columnIndex),
487
499
  onCellClick: props.onRowClick && !column.shouldIgnoreRowClick ? () => props.onRowClick?.(props.row, props.rowIndex, column.key) : undefined,
488
- shouldRenderBottomBorder: props.shouldRenderBottomBorder,
500
+ shouldRenderBottomBorder: shouldRenderBottomBorder,
489
501
  shouldRenderResizingIndicator: getIsColumnBeingResized(columnIndex),
490
- children: column.renderItem ? column.renderItem(props.row, isRowCollapsed) : props.itemRenderer(props.row, column, isRowCollapsed)
502
+ children: column.renderItem ? column.renderItem(props.row, isRowCollapsed) : itemRenderer(props.row, column, isRowCollapsed)
491
503
  }, `${props.row.id}-${column.key}`))
492
504
  });
493
505
  };
494
506
  DataRow.propTypes = {};
495
- DataRow.defaultProps = defaultProps$1;
496
507
  DataRow.displayName = 'DataRow';
497
508
  var DataRow$1 = DataRow;
498
509
 
@@ -648,6 +659,7 @@ const useManualColumnResizing = tableRef => {
648
659
  };
649
660
  var useManualColumnResizing$1 = useManualColumnResizing;
650
661
 
662
+ const _excluded = ["columns", "isCondensed", "wrapHeaderLabels", "verticalCellAlignment", "horizontalCellAlignment", "disableSelfContainment", "itemRenderer"];
651
663
  function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
652
664
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
653
665
  const getColumnsLayoutInfo = columns => _reduceInstanceProperty__default["default"](columns).call(columns, (acc, currentValue) => [...acc, {
@@ -659,24 +671,29 @@ const shouldRenderRowBottomBorder = (rowIndex, rowCount, footer) => {
659
671
  if (rowIndex + 1 < rowCount) return true;
660
672
  return false;
661
673
  };
662
- const defaultProps = {
663
- columns: [],
664
- isCondensed: true,
665
- wrapHeaderLabels: true,
666
- verticalCellAlignment: 'top',
667
- horizontalCellAlignment: 'left',
668
- disableSelfContainment: false,
669
- // @ts-ignore
670
- itemRenderer: (row, column) => row[column.key]
671
- };
672
- const DataTable = props => {
674
+ const DataTable = _ref => {
673
675
  var _context;
676
+ let _ref$columns = _ref.columns,
677
+ columns = _ref$columns === void 0 ? [] : _ref$columns,
678
+ _ref$isCondensed = _ref.isCondensed,
679
+ isCondensed = _ref$isCondensed === void 0 ? true : _ref$isCondensed,
680
+ _ref$wrapHeaderLabels = _ref.wrapHeaderLabels,
681
+ wrapHeaderLabels = _ref$wrapHeaderLabels === void 0 ? true : _ref$wrapHeaderLabels,
682
+ _ref$verticalCellAlig = _ref.verticalCellAlignment,
683
+ verticalCellAlignment = _ref$verticalCellAlig === void 0 ? 'top' : _ref$verticalCellAlig,
684
+ _ref$horizontalCellAl = _ref.horizontalCellAlignment,
685
+ horizontalCellAlignment = _ref$horizontalCellAl === void 0 ? 'left' : _ref$horizontalCellAl,
686
+ _ref$disableSelfConta = _ref.disableSelfContainment,
687
+ disableSelfContainment = _ref$disableSelfConta === void 0 ? false : _ref$disableSelfConta,
688
+ _ref$itemRenderer = _ref.itemRenderer,
689
+ itemRenderer = _ref$itemRenderer === void 0 ? (row, column) => row[column.key] : _ref$itemRenderer,
690
+ props = _objectWithoutProperties(_ref, _excluded);
674
691
  const _useDataTableManagerC = dataTableManagerProvider.useDataTableManagerContext(),
675
- columns = _useDataTableManagerC.columns,
676
- isCondensed = _useDataTableManagerC.isCondensed;
677
- const isValueFromProvider = Boolean(columns && columns.length !== 0);
678
- const columnsData = isValueFromProvider ? columns : props.columns;
679
- const condensedValue = isValueFromProvider && isCondensed !== undefined ? isCondensed : props.isCondensed;
692
+ contextColumns = _useDataTableManagerC.columns,
693
+ contextIsCondensed = _useDataTableManagerC.isCondensed;
694
+ const isValueFromProvider = Boolean(contextColumns && contextColumns.length !== 0);
695
+ const columnsData = isValueFromProvider ? contextColumns : columns;
696
+ const condensedValue = isValueFromProvider && contextIsCondensed !== undefined ? contextIsCondensed : isCondensed;
680
697
  const tableRef = react$1.useRef();
681
698
  const columnResizingReducer = useManualColumnResizing$1(tableRef);
682
699
 
@@ -706,13 +723,19 @@ const DataTable = props => {
706
723
  maxWidth: props.maxWidth,
707
724
  maxHeight: props.maxHeight,
708
725
  isBeingResized: columnResizingReducer.getIsAnyColumnBeingResized(),
709
- disableSelfContainment: !!props.disableSelfContainment,
726
+ disableSelfContainment: !!disableSelfContainment,
710
727
  children: [jsxRuntime.jsx(TableGrid, _objectSpread(_objectSpread({
711
728
  ref: tableRef
712
- }, utils.filterDataAttributes(props)), {}, {
729
+ }, utils.filterDataAttributes(_objectSpread({
730
+ isCondensed,
731
+ wrapHeaderLabels,
732
+ verticalCellAlignment,
733
+ horizontalCellAlignment,
734
+ disableSelfContainment
735
+ }, props))), {}, {
713
736
  columns: columnsData,
714
737
  maxHeight: props.maxHeight,
715
- disableSelfContainment: !!props.disableSelfContainment,
738
+ disableSelfContainment: !!disableSelfContainment,
716
739
  resizedTotalWidth: resizedTotalWidth,
717
740
  children: jsxRuntime.jsxs(ColumnResizingContext.Provider, {
718
741
  value: columnResizingReducer,
@@ -720,13 +743,13 @@ const DataTable = props => {
720
743
  children: jsxRuntime.jsx(TableRow, {
721
744
  isRowClickable: false,
722
745
  children: _mapInstanceProperty__default["default"](columnsData).call(columnsData, column => jsxRuntime.jsx(HeaderCell$1, {
723
- shouldWrap: props.wrapHeaderLabels,
746
+ shouldWrap: wrapHeaderLabels,
724
747
  isCondensed: condensedValue,
725
748
  iconComponent: column.headerIcon,
726
749
  onColumnResized: props.onColumnResized,
727
750
  disableResizing: column.disableResizing,
728
- horizontalCellAlignment: column.align ? column.align : props.horizontalCellAlignment,
729
- disableHeaderStickiness: props.disableHeaderStickiness,
751
+ horizontalCellAlignment: column.align ? column.align : horizontalCellAlignment,
752
+ disableHeaderStickiness: Boolean(props.disableHeaderStickiness),
730
753
  columnWidth: column.width
731
754
  /* Sorting Props */,
732
755
  onClick: props.onSortChange && props.onSortChange,
@@ -739,12 +762,13 @@ const DataTable = props => {
739
762
  })
740
763
  }), jsxRuntime.jsx(TableBody, {
741
764
  children: _mapInstanceProperty__default["default"](_context = props.rows).call(_context, (row, rowIndex) => react.createElement(DataRow$1, _objectSpread(_objectSpread({}, props), {}, {
765
+ itemRenderer: itemRenderer,
742
766
  isCondensed: condensedValue,
743
767
  columns: columnsData,
744
768
  row: row,
745
769
  key: row.id,
746
770
  rowIndex: rowIndex,
747
- shouldClipContent: columnResizingReducer.getIsAnyColumnBeingResized() || hasTableBeenResized,
771
+ shouldClipContent: columnResizingReducer.getIsAnyColumnBeingResized() || Boolean(hasTableBeenResized),
748
772
  shouldRenderBottomBorder: shouldRenderRowBottomBorder(rowIndex, props.rows.length, props.footer)
749
773
  })))
750
774
  })]
@@ -752,19 +776,18 @@ const DataTable = props => {
752
776
  })), props.footer && jsxRuntime.jsx(Footer$1, {
753
777
  "data-testid": "footer",
754
778
  isCondensed: condensedValue,
755
- horizontalCellAlignment: props.horizontalCellAlignment,
779
+ horizontalCellAlignment: horizontalCellAlignment,
756
780
  resizedTotalWidth: resizedTotalWidth,
757
781
  children: props.footer
758
782
  })]
759
783
  });
760
784
  };
761
785
  DataTable.propTypes = {};
762
- DataTable.defaultProps = defaultProps;
763
786
  DataTable.displayName = 'DataTable';
764
787
  var DataTable$1 = DataTable;
765
788
 
766
789
  // NOTE: This string will be replaced on build time with the package version.
767
- var version = "19.20.0";
790
+ var version = "19.21.0";
768
791
 
769
792
  Object.defineProperty(exports, 'useRowSelection', {
770
793
  enumerable: true,
package/dist/commercetools-uikit-data-table.esm.js CHANGED
@@ -1,7 +1,3 @@
1
- import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
2
- import _pt from 'prop-types';
3
- import _reduceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/reduce';
4
- import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
5
1
  import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
6
2
  import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
7
3
  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
10
6
  import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
11
7
  import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
12
8
  import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
9
+ import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
10
+ import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
11
+ import _pt from 'prop-types';
12
+ import _reduceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/reduce';
13
+ import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
13
14
  import { createContext, useContext, useRef, useState, useEffect, useDebugValue, useReducer, useLayoutEffect } from 'react';
14
15
  import isEqual from 'lodash/isEqual';
15
16
  import { warning, filterDataAttributes } from '@commercetools-uikit/utils';
@@ -19,7 +20,7 @@ import _styled from '@emotion/styled/base';
19
20
  import { css, keyframes, createElement } from '@emotion/react';
20
21
  import { designTokens } from '@commercetools-uikit/design-system';
21
22
  import AccessibleButton from '@commercetools-uikit/accessible-button';
22
- import { ArrowDownIcon, ArrowUpIcon, AngleUpDownIcon, RightTriangleFilledIcon, RightTriangleLinearIcon } from '@commercetools-uikit/icons';
23
+ import { AngleUpDownIcon, ArrowDownIcon, ArrowUpIcon, RightTriangleFilledIcon, RightTriangleLinearIcon } from '@commercetools-uikit/icons';
23
24
  import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
24
25
  import _Number$isNaN from '@babel/runtime-corejs3/core-js-stable/number/is-nan';
25
26
  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
360
361
  label: "TableRow"
361
362
  })("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= */"));
362
363
 
363
- const defaultProps$4 = {
364
+ const defaultProps = {
364
365
  horizontalCellAlignment: 'left'
365
366
  };
366
367
  const Footer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
@@ -370,7 +371,7 @@ const Footer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production"
370
371
  label: "Footer"
371
372
  })("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= */"));
372
373
  Footer.displayName = 'Footer';
373
- Footer.defaultProps = defaultProps$4;
374
+ Footer.defaultProps = defaultProps;
374
375
  var Footer$1 = Footer;
375
376
 
376
377
  const ResizerIndicator = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
@@ -407,6 +408,7 @@ const isFixedWidthValue = value => {
407
408
  };
408
409
  var isFixedWidthValue$1 = isFixedWidthValue;
409
410
 
411
+ const _excluded$3 = ["sortDirection", "disableHeaderStickiness", "horizontalCellAlignment"];
410
412
  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; }
411
413
  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; }
412
414
  const HeaderCellWrapper = props => {
@@ -446,21 +448,23 @@ const HeaderCellWrapper = props => {
446
448
  });
447
449
  };
448
450
  HeaderCellWrapper.displayName = 'HeaderCellWrapper';
449
- const defaultProps$3 = {
450
- sortDirection: 'desc',
451
- disableHeaderStickiness: false,
452
- horizontalCellAlignment: 'left'
453
- };
454
- const HeaderCell = props => {
451
+ const HeaderCell = _ref => {
452
+ let _ref$sortDirection = _ref.sortDirection,
453
+ sortDirection = _ref$sortDirection === void 0 ? 'desc' : _ref$sortDirection,
454
+ _ref$disableHeaderSti = _ref.disableHeaderStickiness,
455
+ disableHeaderStickiness = _ref$disableHeaderSti === void 0 ? false : _ref$disableHeaderSti,
456
+ _ref$horizontalCellAl = _ref.horizontalCellAlignment,
457
+ horizontalCellAlignment = _ref$horizontalCellAl === void 0 ? 'left' : _ref$horizontalCellAl,
458
+ props = _objectWithoutProperties(_ref, _excluded$3);
455
459
  let sortableHeaderProps = {};
456
460
  let SortingIcon;
457
461
  if (props.isSortable) {
458
462
  const isActive = props.sortedBy === props.columnKey;
459
- const nextSortDirection = !isActive || props.sortDirection === 'desc' ? 'asc' : 'desc';
460
- SortingIcon = props.sortDirection === 'desc' ? ArrowDownIcon : ArrowUpIcon;
463
+ const nextSortDirection = !isActive || sortDirection === 'desc' ? 'asc' : 'desc';
464
+ SortingIcon = sortDirection === 'desc' ? ArrowDownIcon : ArrowUpIcon;
461
465
  sortableHeaderProps = {
462
466
  as: 'button',
463
- label: props.sortDirection,
467
+ label: sortDirection,
464
468
  onClick: () => props.onClick && props.onClick(props.columnKey, nextSortDirection),
465
469
  isActive,
466
470
  isSortable: true
@@ -472,11 +476,11 @@ const HeaderCell = props => {
472
476
  columnKey: props.columnKey,
473
477
  onColumnResized: props.onColumnResized,
474
478
  disableResizing: props.disableResizing,
475
- disableHeaderStickiness: props.disableHeaderStickiness,
479
+ disableHeaderStickiness: disableHeaderStickiness,
476
480
  children: jsxs(HeaderCellInner, _objectSpread$3(_objectSpread$3({
477
481
  shouldWrap: props.shouldWrap,
478
482
  isCondensed: props.isCondensed,
479
- horizontalCellAlignment: props.horizontalCellAlignment
483
+ horizontalCellAlignment: horizontalCellAlignment
480
484
  }, sortableHeaderProps), {}, {
481
485
  children: [jsxs(HeaderLabelWrapper, {
482
486
  children: [jsx(HeaderLabelTextWrapper, {
@@ -515,16 +519,17 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
515
519
  iconComponent: _pt.node
516
520
  } : {};
517
521
  HeaderCell.displayName = 'HeaderCell';
518
- HeaderCell.defaultProps = defaultProps$3;
519
522
  var HeaderCell$1 = HeaderCell;
520
523
 
524
+ const _excluded$2 = ["isTruncated", "shouldRenderBottomBorder"];
521
525
  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; }
522
526
  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; }
523
- const defaultProps$2 = {
524
- isTruncated: false,
525
- shouldRenderBottomBorder: true
526
- };
527
- const DataCell = props => {
527
+ const DataCell = _ref => {
528
+ let _ref$isTruncated = _ref.isTruncated,
529
+ isTruncated = _ref$isTruncated === void 0 ? false : _ref$isTruncated,
530
+ _ref$shouldRenderBott = _ref.shouldRenderBottomBorder,
531
+ shouldRenderBottomBorder = _ref$shouldRenderBott === void 0 ? true : _ref$shouldRenderBott,
532
+ props = _objectWithoutProperties(_ref, _excluded$2);
528
533
  if (props.shouldRenderCollapseButton) {
529
534
  process.env.NODE_ENV !== "production" ? warning(typeof props.handleRowCollapseClick === 'function', 'DataTable: "handleRowCollapseClick" is required when shouldRenderCollapseButton is true.') : void 0;
530
535
  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 => {
533
538
  return jsxs(BaseCell, {
534
539
  onClick: props.onCellClick,
535
540
  shouldIgnoreRowClick: props.shouldIgnoreRowClick,
536
- shouldClipContent: props.isTruncated && !props.shouldRenderResizingIndicator,
537
- shouldRenderBottomBorder: props.shouldRenderBottomBorder,
541
+ shouldClipContent: isTruncated && !props.shouldRenderResizingIndicator,
542
+ shouldRenderBottomBorder: shouldRenderBottomBorder,
538
543
  children: [jsx(CellInner, _objectSpread$2(_objectSpread$2({
539
544
  isCondensed: props.isCondensed,
540
- isTruncated: props.isTruncated,
545
+ isTruncated: isTruncated,
541
546
  verticalCellAlignment: props.verticalCellAlignment,
542
547
  horizontalCellAlignment: props.horizontalCellAlignment
543
- }, filterDataAttributes(props)), {}, {
548
+ }, filterDataAttributes(_objectSpread$2({
549
+ isTruncated,
550
+ shouldRenderBottomBorder
551
+ }, props))), {}, {
544
552
  children: props.children
545
553
  })), props.shouldRenderCollapseButton && jsx(RowExpandCollapseButton, {
546
554
  label: "Expand/Collapse Row",
@@ -572,25 +580,29 @@ DataCell.propTypes = process.env.NODE_ENV !== "production" ? {
572
580
  isRowCollapsed: _pt.bool
573
581
  } : {};
574
582
  DataCell.displayName = 'DataCell';
575
- DataCell.defaultProps = defaultProps$2;
576
583
  var DataCell$1 = DataCell;
577
584
 
578
- const defaultItemRenderer = (row, column) => {
585
+ const _excluded$1 = ["isCondensed", "shouldClipContent", "verticalCellAlignment", "horizontalCellAlignment", "shouldRenderBottomBorder", "itemRenderer"];
586
+ const defaultItemRenderer = (row, column, _isRowCollapsed) => {
579
587
  // @ts-ignore
580
588
  return row[column.key];
581
589
  };
582
- const defaultProps$1 = {
583
- isCondensed: true,
584
- shouldClipContent: false,
585
- verticalCellAlignment: 'top',
586
- horizontalCellAlignment: 'left',
587
- shouldRenderBottomBorder: true,
588
- itemRenderer: defaultItemRenderer
589
- };
590
- const DataRow = props => {
590
+ const DataRow = _ref => {
591
591
  var _context, _context2;
592
- const _ref = useContext(ColumnResizingContext),
593
- getIsColumnBeingResized = _ref.getIsColumnBeingResized;
592
+ let _ref$isCondensed = _ref.isCondensed,
593
+ isCondensed = _ref$isCondensed === void 0 ? true : _ref$isCondensed;
594
+ _ref.shouldClipContent;
595
+ let _ref$verticalCellAlig = _ref.verticalCellAlignment,
596
+ verticalCellAlignment = _ref$verticalCellAlig === void 0 ? 'top' : _ref$verticalCellAlig,
597
+ _ref$horizontalCellAl = _ref.horizontalCellAlignment,
598
+ horizontalCellAlignment = _ref$horizontalCellAl === void 0 ? 'left' : _ref$horizontalCellAl,
599
+ _ref$shouldRenderBott = _ref.shouldRenderBottomBorder,
600
+ shouldRenderBottomBorder = _ref$shouldRenderBott === void 0 ? true : _ref$shouldRenderBott,
601
+ _ref$itemRenderer = _ref.itemRenderer,
602
+ itemRenderer = _ref$itemRenderer === void 0 ? defaultItemRenderer : _ref$itemRenderer,
603
+ props = _objectWithoutProperties(_ref, _excluded$1);
604
+ const _ref2 = useContext(ColumnResizingContext),
605
+ getIsColumnBeingResized = _ref2.getIsColumnBeingResized;
594
606
  const rowHasTruncatedColumn = _someInstanceProperty(_context = props.columns).call(_context, column => column.isTruncated);
595
607
  const _useState = useState(rowHasTruncatedColumn),
596
608
  _useState2 = _slicedToArray(_useState, 2),
@@ -614,17 +626,17 @@ const DataRow = props => {
614
626
  children: _mapInstanceProperty(_context2 = props.columns).call(_context2, (column, columnIndex) => jsx(DataCell$1, {
615
627
  "data-testid": `cell-${props.rowIndex}-${column.key}`,
616
628
  isTruncated: column.isTruncated && isRowCollapsed,
617
- isCondensed: props.isCondensed,
629
+ isCondensed: isCondensed,
618
630
  isRowCollapsed: isRowCollapsed,
619
- verticalCellAlignment: props.verticalCellAlignment,
620
- horizontalCellAlignment: column.align ? column.align : props.horizontalCellAlignment,
631
+ verticalCellAlignment: verticalCellAlignment,
632
+ horizontalCellAlignment: column.align ? column.align : horizontalCellAlignment,
621
633
  shouldIgnoreRowClick: column.shouldIgnoreRowClick,
622
634
  handleRowCollapseClick: handleRowCollapseClick,
623
635
  shouldRenderCollapseButton: shouldRenderCollapseButton(props.columns.length, columnIndex),
624
636
  onCellClick: props.onRowClick && !column.shouldIgnoreRowClick ? () => props.onRowClick?.(props.row, props.rowIndex, column.key) : undefined,
625
- shouldRenderBottomBorder: props.shouldRenderBottomBorder,
637
+ shouldRenderBottomBorder: shouldRenderBottomBorder,
626
638
  shouldRenderResizingIndicator: getIsColumnBeingResized(columnIndex),
627
- children: column.renderItem ? column.renderItem(props.row, isRowCollapsed) : props.itemRenderer(props.row, column, isRowCollapsed)
639
+ children: column.renderItem ? column.renderItem(props.row, isRowCollapsed) : itemRenderer(props.row, column, isRowCollapsed)
628
640
  }, `${props.row.id}-${column.key}`))
629
641
  });
630
642
  };
@@ -636,7 +648,6 @@ DataRow.propTypes = process.env.NODE_ENV !== "production" ? {
636
648
  shouldRenderBottomBorder: _pt.bool.isRequired,
637
649
  onExpandRow: _pt.func
638
650
  } : {};
639
- DataRow.defaultProps = defaultProps$1;
640
651
  DataRow.displayName = 'DataRow';
641
652
  var DataRow$1 = DataRow;
642
653
 
@@ -792,6 +803,7 @@ const useManualColumnResizing = tableRef => {
792
803
  };
793
804
  var useManualColumnResizing$1 = useManualColumnResizing;
794
805
 
806
+ const _excluded = ["columns", "isCondensed", "wrapHeaderLabels", "verticalCellAlignment", "horizontalCellAlignment", "disableSelfContainment", "itemRenderer"];
795
807
  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; }
796
808
  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; }
797
809
  const getColumnsLayoutInfo = columns => _reduceInstanceProperty(columns).call(columns, (acc, currentValue) => [...acc, {
@@ -803,24 +815,29 @@ const shouldRenderRowBottomBorder = (rowIndex, rowCount, footer) => {
803
815
  if (rowIndex + 1 < rowCount) return true;
804
816
  return false;
805
817
  };
806
- const defaultProps = {
807
- columns: [],
808
- isCondensed: true,
809
- wrapHeaderLabels: true,
810
- verticalCellAlignment: 'top',
811
- horizontalCellAlignment: 'left',
812
- disableSelfContainment: false,
813
- // @ts-ignore
814
- itemRenderer: (row, column) => row[column.key]
815
- };
816
- const DataTable = props => {
818
+ const DataTable = _ref => {
817
819
  var _context;
820
+ let _ref$columns = _ref.columns,
821
+ columns = _ref$columns === void 0 ? [] : _ref$columns,
822
+ _ref$isCondensed = _ref.isCondensed,
823
+ isCondensed = _ref$isCondensed === void 0 ? true : _ref$isCondensed,
824
+ _ref$wrapHeaderLabels = _ref.wrapHeaderLabels,
825
+ wrapHeaderLabels = _ref$wrapHeaderLabels === void 0 ? true : _ref$wrapHeaderLabels,
826
+ _ref$verticalCellAlig = _ref.verticalCellAlignment,
827
+ verticalCellAlignment = _ref$verticalCellAlig === void 0 ? 'top' : _ref$verticalCellAlig,
828
+ _ref$horizontalCellAl = _ref.horizontalCellAlignment,
829
+ horizontalCellAlignment = _ref$horizontalCellAl === void 0 ? 'left' : _ref$horizontalCellAl,
830
+ _ref$disableSelfConta = _ref.disableSelfContainment,
831
+ disableSelfContainment = _ref$disableSelfConta === void 0 ? false : _ref$disableSelfConta,
832
+ _ref$itemRenderer = _ref.itemRenderer,
833
+ itemRenderer = _ref$itemRenderer === void 0 ? (row, column) => row[column.key] : _ref$itemRenderer,
834
+ props = _objectWithoutProperties(_ref, _excluded);
818
835
  const _useDataTableManagerC = useDataTableManagerContext(),
819
- columns = _useDataTableManagerC.columns,
820
- isCondensed = _useDataTableManagerC.isCondensed;
821
- const isValueFromProvider = Boolean(columns && columns.length !== 0);
822
- const columnsData = isValueFromProvider ? columns : props.columns;
823
- const condensedValue = isValueFromProvider && isCondensed !== undefined ? isCondensed : props.isCondensed;
836
+ contextColumns = _useDataTableManagerC.columns,
837
+ contextIsCondensed = _useDataTableManagerC.isCondensed;
838
+ const isValueFromProvider = Boolean(contextColumns && contextColumns.length !== 0);
839
+ const columnsData = isValueFromProvider ? contextColumns : columns;
840
+ const condensedValue = isValueFromProvider && contextIsCondensed !== undefined ? contextIsCondensed : isCondensed;
824
841
 
825
842
  // TODO - initial poc for the nested rows
826
843
  // const [openedItemIds, setOpenedItemIds] = useState<string[]>([]);
@@ -861,13 +878,19 @@ const DataTable = props => {
861
878
  maxWidth: props.maxWidth,
862
879
  maxHeight: props.maxHeight,
863
880
  isBeingResized: columnResizingReducer.getIsAnyColumnBeingResized(),
864
- disableSelfContainment: !!props.disableSelfContainment,
881
+ disableSelfContainment: !!disableSelfContainment,
865
882
  children: [jsx(TableGrid, _objectSpread(_objectSpread({
866
883
  ref: tableRef
867
- }, filterDataAttributes(props)), {}, {
884
+ }, filterDataAttributes(_objectSpread({
885
+ isCondensed,
886
+ wrapHeaderLabels,
887
+ verticalCellAlignment,
888
+ horizontalCellAlignment,
889
+ disableSelfContainment
890
+ }, props))), {}, {
868
891
  columns: columnsData,
869
892
  maxHeight: props.maxHeight,
870
- disableSelfContainment: !!props.disableSelfContainment,
893
+ disableSelfContainment: !!disableSelfContainment,
871
894
  resizedTotalWidth: resizedTotalWidth,
872
895
  children: jsxs(ColumnResizingContext.Provider, {
873
896
  value: columnResizingReducer,
@@ -875,13 +898,13 @@ const DataTable = props => {
875
898
  children: jsx(TableRow, {
876
899
  isRowClickable: false,
877
900
  children: _mapInstanceProperty(columnsData).call(columnsData, column => jsx(HeaderCell$1, {
878
- shouldWrap: props.wrapHeaderLabels,
901
+ shouldWrap: wrapHeaderLabels,
879
902
  isCondensed: condensedValue,
880
903
  iconComponent: column.headerIcon,
881
904
  onColumnResized: props.onColumnResized,
882
905
  disableResizing: column.disableResizing,
883
- horizontalCellAlignment: column.align ? column.align : props.horizontalCellAlignment,
884
- disableHeaderStickiness: props.disableHeaderStickiness,
906
+ horizontalCellAlignment: column.align ? column.align : horizontalCellAlignment,
907
+ disableHeaderStickiness: Boolean(props.disableHeaderStickiness),
885
908
  columnWidth: column.width
886
909
  /* Sorting Props */,
887
910
  onClick: props.onSortChange && props.onSortChange,
@@ -894,12 +917,13 @@ const DataTable = props => {
894
917
  })
895
918
  }), jsx(TableBody, {
896
919
  children: _mapInstanceProperty(_context = props.rows).call(_context, (row, rowIndex) => createElement(DataRow$1, _objectSpread(_objectSpread({}, props), {}, {
920
+ itemRenderer: itemRenderer,
897
921
  isCondensed: condensedValue,
898
922
  columns: columnsData,
899
923
  row: row,
900
924
  key: row.id,
901
925
  rowIndex: rowIndex,
902
- shouldClipContent: columnResizingReducer.getIsAnyColumnBeingResized() || hasTableBeenResized,
926
+ shouldClipContent: columnResizingReducer.getIsAnyColumnBeingResized() || Boolean(hasTableBeenResized),
903
927
  shouldRenderBottomBorder: shouldRenderRowBottomBorder(rowIndex, props.rows.length, props.footer)
904
928
  })))
905
929
  })]
@@ -907,7 +931,7 @@ const DataTable = props => {
907
931
  })), props.footer && jsx(Footer$1, {
908
932
  "data-testid": "footer",
909
933
  isCondensed: condensedValue,
910
- horizontalCellAlignment: props.horizontalCellAlignment,
934
+ horizontalCellAlignment: horizontalCellAlignment,
911
935
  resizedTotalWidth: resizedTotalWidth,
912
936
  children: props.footer
913
937
  })]
@@ -927,7 +951,7 @@ DataTable.propTypes = process.env.NODE_ENV !== "production" ? {
927
951
  isSortable: _pt.bool,
928
952
  disableResizing: _pt.bool,
929
953
  shouldIgnoreRowClick: _pt.bool
930
- })).isRequired,
954
+ })),
931
955
  customColumns: _pt.arrayOf(_pt.shape({
932
956
  key: _pt.string.isRequired,
933
957
  label: _pt.node.isRequired,
@@ -949,7 +973,7 @@ DataTable.propTypes = process.env.NODE_ENV !== "production" ? {
949
973
  onColumnResized: _pt.func,
950
974
  disableSelfContainment: _pt.bool,
951
975
  disableHeaderStickiness: _pt.bool,
952
- itemRenderer: _pt.func.isRequired,
976
+ itemRenderer: _pt.func,
953
977
  wrapHeaderLabels: _pt.bool,
954
978
  verticalCellAlignment: _pt.oneOf(['top', 'center', 'bottom']),
955
979
  horizontalCellAlignment: _pt.oneOf(['left', 'center', 'right']),
@@ -959,11 +983,10 @@ DataTable.propTypes = process.env.NODE_ENV !== "production" ? {
959
983
  renderNestedRow: _pt.func,
960
984
  maxExpandableHeight: _pt.number
961
985
  } : {};
962
- DataTable.defaultProps = defaultProps;
963
986
  DataTable.displayName = 'DataTable';
964
987
  var DataTable$1 = DataTable;
965
988
 
966
989
  // NOTE: This string will be replaced on build time with the package version.
967
- var version = "19.20.0";
990
+ var version = "19.21.0";
968
991
 
969
992
  export { DataTable$1 as default, version };
package/dist/declarations/src/data-table.d.ts CHANGED
@@ -110,7 +110,7 @@ export type TDataTableProps<Row extends TRow = TRow> = {
110
110
  *
111
111
  * [Colum signatures with description](/?path=/docs/components-datatable-readme--props#signatures)
112
112
  */
113
- columns: TColumn<Row>[];
113
+ columns?: TColumn<Row>[];
114
114
  /**
115
115
  * 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
116
116
  * 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> = {
165
165
  * The default function used to render the content of each item in a cell.
166
166
  * In case a column has its own `renderItem` render function, it will take precedence over this function.
167
167
  */
168
- itemRenderer: (item: Row, column: TColumn<Row>, isRowCollapsed: boolean) => ReactNode;
168
+ itemRenderer?: (item: Row, column: TColumn<Row>, isRowCollapsed: boolean) => ReactNode;
169
169
  /**
170
170
  * Set this to `false` to ensure that every column can render their label in one line.
171
171
  * 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> = {
204
204
  maxExpandableHeight?: number;
205
205
  };
206
206
  declare const DataTable: {
207
- <Row extends TRow = TRow>(props: TDataTableProps<Row>): import("@emotion/react/jsx-runtime").JSX.Element;
208
- defaultProps: Pick<TDataTableProps<TRow>, "columns" | "isCondensed" | "wrapHeaderLabels" | "horizontalCellAlignment" | "verticalCellAlignment" | "disableSelfContainment" | "itemRenderer">;
207
+ <Row extends TRow = TRow>({ columns, isCondensed, wrapHeaderLabels, verticalCellAlignment, horizontalCellAlignment, disableSelfContainment, itemRenderer, ...props }: TDataTableProps<Row>): import("@emotion/react/jsx-runtime").JSX.Element;
209
208
  displayName: string;
210
209
  };
211
210
  export default DataTable;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/data-table",
3
3
  "description": "A component for rendering tabular data.",
4
- "version": "19.20.0",
4
+ "version": "19.21.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,13 +21,13 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/accessible-button": "19.20.0",
25
- "@commercetools-uikit/data-table-manager": "19.20.0",
26
- "@commercetools-uikit/design-system": "19.20.0",
27
- "@commercetools-uikit/hooks": "19.20.0",
28
- "@commercetools-uikit/icons": "19.20.0",
29
- "@commercetools-uikit/secondary-icon-button": "19.20.0",
30
- "@commercetools-uikit/utils": "19.20.0",
24
+ "@commercetools-uikit/accessible-button": "19.21.0",
25
+ "@commercetools-uikit/data-table-manager": "19.21.0",
26
+ "@commercetools-uikit/design-system": "19.21.0",
27
+ "@commercetools-uikit/hooks": "19.21.0",
28
+ "@commercetools-uikit/icons": "19.21.0",
29
+ "@commercetools-uikit/secondary-icon-button": "19.21.0",
30
+ "@commercetools-uikit/utils": "19.21.0",
31
31
  "@emotion/react": "^11.10.5",
32
32
  "@emotion/styled": "^11.10.5",
33
33
  "lodash": "4.17.21",