@commercetools-uikit/data-table 19.11.0 → 19.12.1

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

@@ -22,14 +22,12 @@ var _styled = require('@emotion/styled/base');
 var react = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
 var AccessibleButton = require('@commercetools-uikit/accessible-button');
-var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
 var icons = require('@commercetools-uikit/icons');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _Number$isNaN = require('@babel/runtime-corejs3/core-js-stable/number/is-nan');
 var _parseInt = require('@babel/runtime-corejs3/core-js-stable/parse-int');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
-var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var dataTableManagerProvider = require('@commercetools-uikit/data-table-manager/data-table-manager-provider');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -50,7 +48,6 @@ var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
 var _Number$isNaN__default = /*#__PURE__*/_interopDefault(_Number$isNaN);
 var _parseInt__default = /*#__PURE__*/_interopDefault(_parseInt);
 var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
-var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 
 const getPaddingStyle = props => {
   if (props.isCondensed) return /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing40, ";" + ("" ), "" );
@@ -141,7 +138,7 @@ var _ref2 = {
 } ;
 const BaseCell = /*#__PURE__*/_styled__default["default"]("td", {
   target: "e10u1n7e2"
-} )("position:relative;display:flex;background-color:", designSystem.designTokens.colorSurface, ";border-bottom:", props => props.shouldRenderBottomBorder ? "1px solid ".concat(designSystem.designTokens.colorNeutral95, ";") : 'none', ";font-size:", designSystem.designTokens.fontSize20, ";", props => props.shouldClipContent ? _ref2 : '', " ", props => props.shouldIgnoreRowClick ? _ref$1 : '', ";" + ("" ));
+} )("position:relative;display:flex;background-color:", designSystem.designTokens.colorSurface, ";border-bottom:", props => props.shouldRenderBottomBorder ? `1px solid ${designSystem.designTokens.colorNeutral95};` : 'none', ";font-size:", designSystem.designTokens.fontSize20, ";", props => props.shouldClipContent ? _ref2 : '', " ", props => props.shouldIgnoreRowClick ? _ref$1 : '', ";" + ("" ));
 /*#__PURE__*/_styled__default["default"]("td", {
   target: "e10u1n7e1"
 } )("position:", props => props.disableFooterStickiness ? 'relative' : 'sticky', ";left:0;bottom:0;grid-column:1/", props => props.numberOfColumns, ";background-color:", designSystem.designTokens.colorSurface, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";border-top:1px solid ", designSystem.designTokens.colorNeutral90, ";margin-top:-1px;" + ("" ));
@@ -149,7 +146,6 @@ const RowExpandCollapseButton = /*#__PURE__*/_styled__default["default"](Accessi
   target: "e10u1n7e0"
 } )("cursor:", props => props.isRowCollapsed ? /*#__PURE__*/react.css("" , "" ) : /*#__PURE__*/react.css("" , "" ), ";position:absolute;height:16px;width:16px;bottom:0;right:0;opacity:0;display:flex;justify-content:flex-end;align-items:flex-end;" + ("" ));
 
-var _templateObject, _templateObject2, _templateObject3;
 const getButtonStyle = () => /*#__PURE__*/react.css("cursor:pointer;border:none;background:none;text-decoration:none;color:inherit;font:inherit;font-size:", designSystem.designTokens.fontSize10, ";font-family:inherit;" + ("" ), "" );
 
 /* When a sortable header is deselected,
@@ -160,19 +156,38 @@ const getButtonStyle = () => /*#__PURE__*/react.css("cursor:pointer;border:none;
  *  is not the active sorted column, the icon for
  *  the current sort direction is animated with fadeIn
  */
-const fadeIn = react.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+const fadeIn = react.keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
 
 /* When a sortable header is activated/selected,
  *  and the sort direction is 'desc', the ArrowDown
  *  icon is animated with rotateClockwise
  */
-const rotateClockwise = react.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(-180deg);\n  } to {\n    transform: rotate(0deg);\n  }\n"])));
+const rotateClockwise = react.keyframes`
+  from {
+    transform: rotate(-180deg);
+  } to {
+    transform: rotate(0deg);
+  }
+`;
 
 /* When a sortable header is activated/selected,
  *  and the sort direction is 'asc', the ArrowUp
  *  icon is animated with rotateCounterClockwise
  */
-const rotateCounterClockwise = react.keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(180deg);\n  } to {\n    transform: rotate(0deg);\n  }\n"])));
+const rotateCounterClockwise = react.keyframes`
+  from {
+    transform: rotate(180deg);
+  } to {
+    transform: rotate(0deg);
+  }
+`;
 
 /* A sortable header has the two arrow svg icons
  * GIVEN column is sortable and is not focused
@@ -204,7 +219,7 @@ const HeaderIconWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1ipt8n20"
 } )("display:inline-flex;align-items:center;justify-content:center;margin-left:", designSystem.designTokens.spacing20, ";vertical-align:middle;" + ("" ));
 
-const convertNumericDimensionToPixelValue = dimensionValue => typeof dimensionValue === 'number' ? "".concat(dimensionValue, "px") : dimensionValue;
+const convertNumericDimensionToPixelValue = dimensionValue => typeof dimensionValue === 'number' ? `${dimensionValue}px` : dimensionValue;
 var convertNumericDimensionToPixelValue$1 = convertNumericDimensionToPixelValue;
 
 const getClickableRowStyle = props => {
@@ -227,7 +242,10 @@ const TableContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "epk01s24"
 } )("position:relative;z-index:0;box-shadow:", designSystem.designTokens.shadow17, ";border:1px solid ", designSystem.designTokens.colorNeutral95, ";border-radius:", designSystem.designTokens.borderRadius4, ";", props =>
 // this is needed in order to have a sticky header
-props.maxHeight ? "overflow-x: auto;" : '', " ", props => props.maxWidth && !props.disableSelfContainment ? "max-width: ".concat(convertNumericDimensionToPixelValue$1(props.maxWidth), ";") : '', " ", props => props.isBeingResized && "\n    * {\n      user-select: none;\n    }", " ", getDisabledSelfContainmentStyles, ";" + ("" ));
+props.maxHeight ? `overflow-x: auto;` : '', " ", props => props.maxWidth && !props.disableSelfContainment ? `max-width: ${convertNumericDimensionToPixelValue$1(props.maxWidth)};` : '', " ", props => props.isBeingResized && `
+    * {
+      user-select: none;
+    }`, " ", getDisabledSelfContainmentStyles, ";" + ("" ));
 const TableGrid = /*#__PURE__*/_styled__default["default"]("table", {
   target: "epk01s23"
 } )("display:grid;grid-template-columns:", props => {
@@ -235,7 +253,7 @@ const TableGrid = /*#__PURE__*/_styled__default["default"]("table", {
   return props.columns && _mapInstanceProperty__default["default"](_context = props.columns).call(_context, column => column.width || 'auto').join(' ');
 }, ";", props =>
 // this is needed in order to have a sticky header
-props.maxHeight ? "overflow-y: auto;" : '', " ", props => props.maxHeight && !props.disableSelfContainment ? "max-height: ".concat(convertNumericDimensionToPixelValue$1(props.maxHeight), ";") : '', " ", props => props.resizedTotalWidth ? "max-width: ".concat(props.resizedTotalWidth, "px;") : '', " ", getDisabledSelfContainmentStyles, ";" + ("" ));
+props.maxHeight ? `overflow-y: auto;` : '', " ", props => props.maxHeight && !props.disableSelfContainment ? `max-height: ${convertNumericDimensionToPixelValue$1(props.maxHeight)};` : '', " ", props => props.resizedTotalWidth ? `max-width: ${props.resizedTotalWidth}px;` : '', " ", getDisabledSelfContainmentStyles, ";" + ("" ));
 const TableHeader = /*#__PURE__*/_styled__default["default"]("thead", {
   target: "epk01s22"
 } )("display:contents;:hover{", BaseHeaderCell, ":before{content:'';position:absolute;border-right:1px solid ", designSystem.designTokens.colorNeutral, ";top:", designSystem.designTokens.spacing20, ";right:0;bottom:", designSystem.designTokens.spacing20, ";}", BaseHeaderCell, ":last-child:before{display:none;}}" + ("" ));
@@ -254,7 +272,7 @@ const defaultProps$4 = {
 };
 const Footer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e2ce7vj0"
-} )("box-sizing:border-box;display:block;", getPaddingStyle, " ", getHorizontalAlignmentStyle, " background-color:", designSystem.designTokens.colorSurface, ";border-top:1px solid ", designSystem.designTokens.colorNeutral90, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";", props => props.resizedTotalWidth ? "max-width: ".concat(props.resizedTotalWidth, "px;") : '', ";" + ("" ));
+} )("box-sizing:border-box;display:block;", getPaddingStyle, " ", getHorizontalAlignmentStyle, " background-color:", designSystem.designTokens.colorSurface, ";border-top:1px solid ", designSystem.designTokens.colorNeutral90, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";", props => props.resizedTotalWidth ? `max-width: ${props.resizedTotalWidth}px;` : '', ";" + ("" ));
 Footer.displayName = 'Footer';
 Footer.defaultProps = defaultProps$4;
 var Footer$1 = Footer;
@@ -287,16 +305,12 @@ var isFixedWidthValue$1 = isFixedWidthValue;
 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; }
 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; }
 const HeaderCellWrapper = props => {
-  var _headerRef$current2;
   const columnResizingReducer = react$1.useContext(ColumnResizingContext);
   const headerRef = react$1.useRef(null);
   const onStartResizing = event => {
     columnResizingReducer.startResizing(headerRef, event);
   };
-  const onDrag = event => {
-    var _headerRef$current;
-    return columnResizingReducer.onDragResizing(event, (_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.cellIndex);
-  };
+  const onDrag = event => columnResizingReducer.onDragResizing(event, headerRef.current?.cellIndex);
   const onDragEnd = () => {
     const finalSizes = columnResizingReducer.finishResizing();
     if (props.onColumnResized) {
@@ -305,7 +319,7 @@ const HeaderCellWrapper = props => {
     window.removeEventListener('mousemove', onDrag);
     window.removeEventListener('mouseup', onDragEnd);
   };
-  if (columnResizingReducer.getIsColumnBeingResized((_headerRef$current2 = headerRef.current) === null || _headerRef$current2 === void 0 ? void 0 : _headerRef$current2.cellIndex)) {
+  if (columnResizingReducer.getIsColumnBeingResized(headerRef.current?.cellIndex)) {
     window.addEventListener('mousemove', onDrag);
     window.addEventListener('mouseup', onDragEnd);
   }
@@ -317,7 +331,7 @@ const HeaderCellWrapper = props => {
   const shouldClipContent = props.columnWidth && isFixedWidthValue$1(props.columnWidth) || columnResizingReducer.getHasTableBeenResized() || columnResizingReducer.getIsAnyColumnBeingResized();
   return jsxRuntime.jsxs(BaseHeaderCell, {
     ref: headerRef,
-    "data-testid": "header-".concat(props.columnKey),
+    "data-testid": `header-${props.columnKey}`,
     "data-id": props.columnKey,
     shouldClipContent: shouldClipContent,
     disableHeaderStickiness: props.disableHeaderStickiness,
@@ -362,7 +376,7 @@ const HeaderCell = props => {
         children: [jsxRuntime.jsx(HeaderLabelTextWrapper, {
           children: props.children
         }), props.iconComponent && jsxRuntime.jsx(HeaderIconWrapper, {
-          children: props.iconComponent
+          children: typeof props.iconComponent === 'function' ? props.iconComponent() : props.iconComponent
         })]
       }), props.isSortable && jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [jsxRuntime.jsx(icons.AngleUpDownIcon, {
@@ -460,27 +474,21 @@ const DataRow = props => {
   const shouldRenderCollapseButton = (totalColumnsLength, currentColumnIndex) => rowHasTruncatedColumn && totalColumnsLength - 1 === currentColumnIndex;
   return jsxRuntime.jsx(TableRow, {
     isRowClickable: Boolean(props.onRowClick),
-    children: _mapInstanceProperty__default["default"](_context2 = props.columns).call(_context2, (column, columnIndex) => {
-      var _context3, _context4;
-      return jsxRuntime.jsx(DataCell$1, {
-        "data-testid": _concatInstanceProperty__default["default"](_context4 = "cell-".concat(props.rowIndex, "-")).call(_context4, column.key),
-        isTruncated: column.isTruncated && isRowCollapsed,
-        isCondensed: props.isCondensed,
-        isRowCollapsed: isRowCollapsed,
-        verticalCellAlignment: props.verticalCellAlignment,
-        horizontalCellAlignment: column.align ? column.align : props.horizontalCellAlignment,
-        shouldIgnoreRowClick: column.shouldIgnoreRowClick,
-        handleRowCollapseClick: handleRowCollapseClick,
-        shouldRenderCollapseButton: shouldRenderCollapseButton(props.columns.length, columnIndex),
-        onCellClick: props.onRowClick && !column.shouldIgnoreRowClick ? () => {
-          var _props$onRowClick;
-          return (_props$onRowClick = props.onRowClick) === null || _props$onRowClick === void 0 ? void 0 : _props$onRowClick.call(props, props.row, props.rowIndex, column.key);
-        } : undefined,
-        shouldRenderBottomBorder: props.shouldRenderBottomBorder,
-        shouldRenderResizingIndicator: getIsColumnBeingResized(columnIndex),
-        children: column.renderItem ? column.renderItem(props.row, isRowCollapsed) : props.itemRenderer(props.row, column, isRowCollapsed)
-      }, _concatInstanceProperty__default["default"](_context3 = "".concat(props.row.id, "-")).call(_context3, column.key));
-    })
+    children: _mapInstanceProperty__default["default"](_context2 = props.columns).call(_context2, (column, columnIndex) => jsxRuntime.jsx(DataCell$1, {
+      "data-testid": `cell-${props.rowIndex}-${column.key}`,
+      isTruncated: column.isTruncated && isRowCollapsed,
+      isCondensed: props.isCondensed,
+      isRowCollapsed: isRowCollapsed,
+      verticalCellAlignment: props.verticalCellAlignment,
+      horizontalCellAlignment: column.align ? column.align : props.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,
+      shouldRenderResizingIndicator: getIsColumnBeingResized(columnIndex),
+      children: column.renderItem ? column.renderItem(props.row, isRowCollapsed) : props.itemRenderer(props.row, column, isRowCollapsed)
+    }, `${props.row.id}-${column.key}`))
   });
 };
 DataRow.propTypes = {};
@@ -513,7 +521,7 @@ const setColumnWidth = function () {
   });
   return columns;
 };
-const getGridTemplateColumnsStyle = columns => "".concat(_mapInstanceProperty__default["default"](columns).call(columns, width => "".concat(width || 0, "px")).join(' '));
+const getGridTemplateColumnsStyle = columns => `${_mapInstanceProperty__default["default"](columns).call(columns, width => `${width || 0}px`).join(' ')}`;
 const initialState = tableRef => ({
   initialColWidth: undefined,
   initialMousePosition: undefined,
@@ -560,14 +568,13 @@ const useManualResizingReducer = tableRef => {
   return [manualResizingState, dispatch];
 };
 const useManualColumnResizing = tableRef => {
-  var _state$tableRef;
   const _useManualResizingRed = useManualResizingReducer(tableRef),
     _useManualResizingRed2 = _slicedToArray(_useManualResizingRed, 2),
     state = _useManualResizingRed2[0],
     dispatch = _useManualResizingRed2[1];
 
   // if the table element has been rendered and we haven't yet measured the columns
-  if ((_state$tableRef = state.tableRef) !== null && _state$tableRef !== void 0 && _state$tableRef.current && !state.sizes) {
+  if (state.tableRef?.current && !state.sizes) {
     var _context;
     const renderedColumnMeasurements = [];
     _forEachInstanceProperty__default["default"](_context = state.tableRef.current.querySelectorAll(':scope > thead > tr > th')).call(_context, header => {
@@ -596,10 +603,9 @@ const useManualColumnResizing = tableRef => {
   const onDragResizing = (event, columnIndex) => {
     // throttle and sync resizing update rate with screen refresh rate
     requestAnimationFrame(() => {
-      var _state$tableRef2;
       const width = calculateNewSize(state.initialColWidth, state.initialMousePosition, event.clientX);
       const newColumnsSizes = setColumnWidth(state.sizes, columnIndex, width);
-      if (!((_state$tableRef2 = state.tableRef) !== null && _state$tableRef2 !== void 0 && _state$tableRef2.current)) return;
+      if (!state.tableRef?.current) return;
       state.tableRef.current.style.gridTemplateColumns = getGridTemplateColumnsStyle(_mapInstanceProperty__default["default"](newColumnsSizes).call(newColumnsSizes, newColumnsSize => newColumnsSize.width.toString()));
     });
   };
@@ -620,8 +626,7 @@ const useManualColumnResizing = tableRef => {
     return _reduceInstanceProperty__default["default"](_context2 = state.sizes).call(_context2, (a, b) => a + b.width, 0);
   };
   const reset = () => {
-    var _state$tableRef3;
-    if (!((_state$tableRef3 = state.tableRef) !== null && _state$tableRef3 !== void 0 && _state$tableRef3.current)) return;
+    if (!state.tableRef?.current) return;
     state.tableRef.current.style.gridTemplateColumns = '';
     return dispatch({
       type: 'reset'
@@ -759,7 +764,7 @@ DataTable.displayName = 'DataTable';
 var DataTable$1 = DataTable;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.11.0";
+var version = "19.12.1";
 
 Object.defineProperty(exports, 'useRowSelection', {
   enumerable: true,