@commercetools-uikit/data-table 12.2.5 → 12.2.9

package/README.md

@@ -62,7 +62,7 @@ export default Example;
 | Props                     | Type                                                           | Required | Default                            | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | ------------------------- | -------------------------------------------------------------- | :------: | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `rows`                    | `Array: Row[]`<br/>[See signature.](#signature-rows)           |    ✅    |                                    | The list of data that needs to be rendered in the table. Each object in the list can&#xA;have any shape as long as it has a unique identifier.&#xA;The data is rendered by using the callback render function `itemRenderer`.                                                                                                                                                                                                                                                                                                                     |
-| `columns`                 | `Array: TColumn[]`<br/>[See signature.](#signature-columns)    |    ✅    |                                    | Each object requires a unique `key` which should correspond to property key of&#xA;the items of `rows` that you want to render under this column, and a `label`&#xA;which defines the name shown on the header.&#xA;The list of columns to be rendered.&#xA;Each column can be customized (see properties below).                                                                                                                                                                                                                                 |
+| `columns`                 | `Array: TColumn[]`<br/>[See signature.](#signature-columns)    |          | `[]`                               | Each object requires a unique `key` which should correspond to property key of&#xA;the items of `rows` that you want to render under this column, and a `label`&#xA;which defines the name shown on the header.&#xA;The list of columns to be rendered.&#xA;Each column can be customized (see properties below).                                                                                                                                                                                                                                 |
 | `footer`                  | `ReactNode`                                                    |          |                                    | Element to render within the `tfoot` (footer) element of the table.                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 | `maxWidth`                | `union`<br/>Possible values:<br/>`number , string`             |          |                                    | The max width (a number of pixels or a css value string with units) for which the table&#xA;is allowed to grow. If unset, the table will grow horizontally to fill its parent.                                                                                                                                                                                                                                                                                                                                                                    |
 | `maxHeight`               | `union`<br/>Possible values:<br/>`number , string`             |          |                                    | The max height (a number of pixels or a css value string with units) for which the table&#xA;is allowed to grow. If unset, the table will grow vertically to fill its parent.                                                                                                                                                                                                                                                                                                                                                                     |
@@ -112,7 +112,7 @@ export default Example;
    *
    * @@defaultValue@@: auto
    */
-  width?: number;
+  width?: string;
   /**
    * Use this to override the table's own `horizontalCellAlignment` prop for this specific column.
    */

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

@@ -7,7 +7,6 @@ var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArr
 var _pt = require('prop-types');
 var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
-var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
@@ -37,7 +36,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 var _pt__default = /*#__PURE__*/_interopDefault(_pt);
 var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
-var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
@@ -529,14 +527,6 @@ var HeaderCellWrapper = function HeaderCellWrapper(props) {
   });
 };
 
-HeaderCellWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: _pt__default["default"].node.isRequired,
-  columnKey: _pt__default["default"].string.isRequired,
-  columnWidth: _pt__default["default"].number,
-  disableResizing: _pt__default["default"].bool,
-  onColumnResized: _pt__default["default"].func,
-  disableHeaderStickiness: _pt__default["default"].bool
-} : {};
 HeaderCellWrapper.displayName = 'HeaderCellWrapper';
 var defaultProps$3 = {
   sortDirection: 'desc',
@@ -599,7 +589,7 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
   sortedBy: _pt__default["default"].string,
   children: _pt__default["default"].node.isRequired,
   columnKey: _pt__default["default"].string.isRequired,
-  columnWidth: _pt__default["default"].number,
+  columnWidth: _pt__default["default"].string,
   shouldWrap: _pt__default["default"].bool,
   isSortable: _pt__default["default"].bool,
   isCondensed: _pt__default["default"].bool,
@@ -894,7 +884,7 @@ var useManualColumnResizing = function useManualColumnResizing(tableRef) {
       var newColumnsSizes = setColumnWidth(state.sizes, columnIndex, width);
       if (!((_state$tableRef2 = state.tableRef) !== null && _state$tableRef2 !== void 0 && _state$tableRef2.current)) return;
       state.tableRef.current.style.gridTemplateColumns = getGridTemplateColumnsStyle(_mapInstanceProperty__default["default"](newColumnsSizes).call(newColumnsSizes, function (newColumnsSize) {
-        return newColumnsSize.width;
+        return newColumnsSize.width.toString();
       }));
     });
   };
@@ -982,6 +972,7 @@ var shouldRenderRowBottomBorder = function shouldRenderRowBottomBorder(rowIndex,
 };
 
 var defaultProps = {
+  columns: [],
   isCondensed: false,
   wrapHeaderLabels: true,
   verticalCellAlignment: 'top',
@@ -996,7 +987,7 @@ var defaultProps = {
 var DataTable = function DataTable(props) {
   var _context2, _context3;
 
-  process.env.NODE_ENV !== "production" ? utils.warning(_Array$isArray__default["default"](props.columns), "ui-kit/DataTable: the prop \"columns\" is required.") : void 0;
+  process.env.NODE_ENV !== "production" ? utils.warning(props.columns.length > 0, "ui-kit/DataTable: empty table \"columns\", expected at least one column. If you are using DataTableManager you need to pass the \"columns\" there and they will be injected into DataTable.") : void 0;
   var tableRef = react$1.useRef();
   var columnResizingReducer = useManualColumnResizing$1(tableRef); // if the table columns have been measured
   // and if the list of columns, their width field, or the isCondensed prop has changed
@@ -1035,7 +1026,7 @@ var DataTable = function DataTable(props) {
         value: columnResizingReducer,
         children: [jsxRuntime.jsx(Header, {
           children: jsxRuntime.jsx(Row, {
-            children: props.columns && _mapInstanceProperty__default["default"](_context2 = props.columns).call(_context2, function (column) {
+            children: _mapInstanceProperty__default["default"](_context2 = props.columns).call(_context2, function (column) {
               return jsxRuntime.jsx(HeaderCell$1, {
                 shouldWrap: props.wrapHeaderLabels,
                 isCondensed: props.isCondensed,
@@ -1083,7 +1074,7 @@ DataTable.propTypes = process.env.NODE_ENV !== "production" ? {
   columns: _pt__default["default"].arrayOf(_pt__default["default"].shape({
     key: _pt__default["default"].string.isRequired,
     label: _pt__default["default"].node.isRequired,
-    width: _pt__default["default"].number,
+    width: _pt__default["default"].string,
     align: _pt__default["default"].oneOf(['left', 'center', 'right']),
     onClick: _pt__default["default"].func,
     renderItem: _pt__default["default"].func,
@@ -1114,7 +1105,7 @@ DataTable.displayName = 'DataTable';
 var DataTable$1 = DataTable;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "12.2.5";
+var version = "12.2.9";
 
 Object.defineProperty(exports, 'useRowSelection', {
   enumerable: true,

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

@@ -7,7 +7,6 @@ var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArr
 require('prop-types');
 var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
-require('@babel/runtime-corejs3/core-js-stable/array/is-array');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
@@ -402,7 +401,6 @@ var HeaderCellWrapper = function HeaderCellWrapper(props) {
   });
 };
 
-HeaderCellWrapper.propTypes = {};
 HeaderCellWrapper.displayName = 'HeaderCellWrapper';
 var defaultProps$3 = {
   sortDirection: 'desc',
@@ -722,7 +720,7 @@ var useManualColumnResizing = function useManualColumnResizing(tableRef) {
       var newColumnsSizes = setColumnWidth(state.sizes, columnIndex, width);
       if (!((_state$tableRef2 = state.tableRef) !== null && _state$tableRef2 !== void 0 && _state$tableRef2.current)) return;
       state.tableRef.current.style.gridTemplateColumns = getGridTemplateColumnsStyle(_mapInstanceProperty__default["default"](newColumnsSizes).call(newColumnsSizes, function (newColumnsSize) {
-        return newColumnsSize.width;
+        return newColumnsSize.width.toString();
       }));
     });
   };
@@ -810,6 +808,7 @@ var shouldRenderRowBottomBorder = function shouldRenderRowBottomBorder(rowIndex,
 };
 
 var defaultProps = {
+  columns: [],
   isCondensed: false,
   wrapHeaderLabels: true,
   verticalCellAlignment: 'top',
@@ -861,7 +860,7 @@ var DataTable = function DataTable(props) {
         value: columnResizingReducer,
         children: [jsxRuntime.jsx(Header, {
           children: jsxRuntime.jsx(Row, {
-            children: props.columns && _mapInstanceProperty__default["default"](_context2 = props.columns).call(_context2, function (column) {
+            children: _mapInstanceProperty__default["default"](_context2 = props.columns).call(_context2, function (column) {
               return jsxRuntime.jsx(HeaderCell$1, {
                 shouldWrap: props.wrapHeaderLabels,
                 isCondensed: props.isCondensed,
@@ -910,7 +909,7 @@ DataTable.displayName = 'DataTable';
 var DataTable$1 = DataTable;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "12.2.5";
+var version = "12.2.9";
 
 Object.defineProperty(exports, 'useRowSelection', {
   enumerable: true,

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

@@ -3,7 +3,6 @@ import _toConsumableArray from '@babel/runtime-corejs3/helpers/esm/toConsumableA
 import _pt from 'prop-types';
 import _reduceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/reduce';
 import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
-import _Array$isArray from '@babel/runtime-corejs3/core-js-stable/array/is-array';
 import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
 import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
 import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
@@ -504,14 +503,6 @@ var HeaderCellWrapper = function HeaderCellWrapper(props) {
   });
 };
 
-HeaderCellWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: _pt.node.isRequired,
-  columnKey: _pt.string.isRequired,
-  columnWidth: _pt.number,
-  disableResizing: _pt.bool,
-  onColumnResized: _pt.func,
-  disableHeaderStickiness: _pt.bool
-} : {};
 HeaderCellWrapper.displayName = 'HeaderCellWrapper';
 var defaultProps$3 = {
   sortDirection: 'desc',
@@ -574,7 +565,7 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
   sortedBy: _pt.string,
   children: _pt.node.isRequired,
   columnKey: _pt.string.isRequired,
-  columnWidth: _pt.number,
+  columnWidth: _pt.string,
   shouldWrap: _pt.bool,
   isSortable: _pt.bool,
   isCondensed: _pt.bool,
@@ -869,7 +860,7 @@ var useManualColumnResizing = function useManualColumnResizing(tableRef) {
       var newColumnsSizes = setColumnWidth(state.sizes, columnIndex, width);
       if (!((_state$tableRef2 = state.tableRef) !== null && _state$tableRef2 !== void 0 && _state$tableRef2.current)) return;
       state.tableRef.current.style.gridTemplateColumns = getGridTemplateColumnsStyle(_mapInstanceProperty(newColumnsSizes).call(newColumnsSizes, function (newColumnsSize) {
-        return newColumnsSize.width;
+        return newColumnsSize.width.toString();
       }));
     });
   };
@@ -957,6 +948,7 @@ var shouldRenderRowBottomBorder = function shouldRenderRowBottomBorder(rowIndex,
 };
 
 var defaultProps = {
+  columns: [],
   isCondensed: false,
   wrapHeaderLabels: true,
   verticalCellAlignment: 'top',
@@ -971,7 +963,7 @@ var defaultProps = {
 var DataTable = function DataTable(props) {
   var _context2, _context3;
 
-  process.env.NODE_ENV !== "production" ? warning(_Array$isArray(props.columns), "ui-kit/DataTable: the prop \"columns\" is required.") : void 0;
+  process.env.NODE_ENV !== "production" ? warning(props.columns.length > 0, "ui-kit/DataTable: empty table \"columns\", expected at least one column. If you are using DataTableManager you need to pass the \"columns\" there and they will be injected into DataTable.") : void 0;
   var tableRef = useRef();
   var columnResizingReducer = useManualColumnResizing$1(tableRef); // if the table columns have been measured
   // and if the list of columns, their width field, or the isCondensed prop has changed
@@ -1010,7 +1002,7 @@ var DataTable = function DataTable(props) {
         value: columnResizingReducer,
         children: [jsx(Header, {
           children: jsx(Row, {
-            children: props.columns && _mapInstanceProperty(_context2 = props.columns).call(_context2, function (column) {
+            children: _mapInstanceProperty(_context2 = props.columns).call(_context2, function (column) {
               return jsx(HeaderCell$1, {
                 shouldWrap: props.wrapHeaderLabels,
                 isCondensed: props.isCondensed,
@@ -1058,7 +1050,7 @@ DataTable.propTypes = process.env.NODE_ENV !== "production" ? {
   columns: _pt.arrayOf(_pt.shape({
     key: _pt.string.isRequired,
     label: _pt.node.isRequired,
-    width: _pt.number,
+    width: _pt.string,
     align: _pt.oneOf(['left', 'center', 'right']),
     onClick: _pt.func,
     renderItem: _pt.func,
@@ -1089,6 +1081,6 @@ DataTable.displayName = 'DataTable';
 var DataTable$1 = DataTable;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "12.2.5";
+var version = "12.2.9";
 
 export { DataTable$1 as default, version };

package/dist/declarations/src/cell.d.ts

@@ -13,13 +13,9 @@ export declare type TDataCell = {
     handleRowCollapseClick?: () => void;
     isRowCollapsed?: boolean;
 };
-declare type TDefaultProps = {
-    isTruncated: boolean;
-    shouldRenderBottomBorder: boolean;
-};
 declare const DataCell: {
     (props: TDataCell): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
-    defaultProps: TDefaultProps;
+    defaultProps: Pick<TDataCell, "isTruncated" | "shouldRenderBottomBorder">;
 };
 export default DataCell;

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

@@ -5,7 +5,7 @@ export interface TRow {
 export declare type TColumn<Row extends TRow = TRow> = {
     key: string;
     label: ReactNode;
-    width?: number;
+    width?: string;
     align?: 'left' | 'center' | 'right';
     onClick?: (event: MouseEventHandler) => void;
     renderItem?: (row: Row, isRowCollapsed: boolean) => ReactNode;
@@ -36,7 +36,7 @@ export declare type TDataTableProps<Row extends TRow = TRow> = {
 };
 declare const DataTable: {
     <Row extends TRow = TRow>(props: TDataTableProps<Row>): import("@emotion/react/jsx-runtime").JSX.Element;
-    defaultProps: Pick<TDataTableProps<TRow>, "isCondensed" | "wrapHeaderLabels" | "horizontalCellAlignment" | "verticalCellAlignment" | "disableSelfContainment" | "itemRenderer">;
+    defaultProps: Pick<TDataTableProps<TRow>, "columns" | "isCondensed" | "wrapHeaderLabels" | "horizontalCellAlignment" | "verticalCellAlignment" | "disableSelfContainment" | "itemRenderer">;
     displayName: string;
 };
 export default DataTable;

package/dist/declarations/src/header-cell.d.ts

@@ -5,7 +5,7 @@ export declare type THeaderCell = {
     sortedBy?: string;
     children: ReactNode;
     columnKey: string;
-    columnWidth?: number;
+    columnWidth?: string;
     shouldWrap?: boolean;
     isSortable?: boolean;
     isCondensed?: boolean;

package/dist/declarations/src/header-cell.styles.d.ts

@@ -6,7 +6,7 @@ declare type TGetSortableHeaderStyles = {
 declare const HeaderCellInner: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Pick<THeaderCell, "isCondensed" | "horizontalCellAlignment" | "shouldWrap" | "isSortable"> & TGetSortableHeaderStyles, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & Pick<THeaderCell, "isCondensed" | "horizontalCellAlignment" | "isSortable" | "shouldWrap"> & TGetSortableHeaderStyles, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare type TBaseHeaderCell = {
     disableHeaderStickiness?: boolean;
     shouldClipContent?: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/data-table",
   "description": "A component for rendering tabular data.",
-  "version": "12.2.5",
+  "version": "12.2.9",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -9,12 +9,7 @@
     "directory": "packages/components/data-table"
   },
   "homepage": "https://uikit.commercetools.com",
-  "keywords": [
-    "javascript",
-    "design system",
-    "react",
-    "uikit"
-  ],
+  "keywords": ["javascript", "design system", "react", "uikit"],
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -22,18 +17,16 @@
   "sideEffects": false,
   "main": "dist/commercetools-uikit-data-table.cjs.js",
   "module": "dist/commercetools-uikit-data-table.esm.js",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "dependencies": {
-    "@babel/runtime": "7.16.3",
-    "@babel/runtime-corejs3": "7.16.3",
-    "@commercetools-uikit/accessible-button": "12.2.5",
-    "@commercetools-uikit/design-system": "12.2.5",
-    "@commercetools-uikit/hooks": "12.2.5",
-    "@commercetools-uikit/icons": "12.2.5",
-    "@commercetools-uikit/secondary-icon-button": "12.2.5",
-    "@commercetools-uikit/utils": "12.2.5",
+    "@babel/runtime": "7.16.5",
+    "@babel/runtime-corejs3": "7.16.5",
+    "@commercetools-uikit/accessible-button": "12.2.9",
+    "@commercetools-uikit/design-system": "12.2.9",
+    "@commercetools-uikit/hooks": "12.2.9",
+    "@commercetools-uikit/icons": "12.2.9",
+    "@commercetools-uikit/secondary-icon-button": "12.2.9",
+    "@commercetools-uikit/utils": "12.2.9",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "lodash": "4.17.21",