@synerise/ds-table 0.56.7 → 0.57.0

package/dist/Table.js

@@ -7,13 +7,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl';
 import '@synerise/ds-core/dist/js/style';
-import "./style/index.css";
 import Icon, { AngleLeftS, AngleRightS, SpinnerM } from '@synerise/ds-icon';
 import Button from '@synerise/ds-button';
-import { useIntl } from 'react-intl';
 import Skeleton from '@synerise/ds-skeleton';
 import { useDataFormat } from '@synerise/ds-data-format';
+import "./style/index.css";
 import * as S from './Table.styles';
 import TableHeader from './TableHeader/TableHeader';
 import DefaultTable from './DefaultTable/DefaultTable';
@@ -26,7 +26,7 @@ export var SELECTION_INVERT = 'SELECTION_INVERT';
 var ITEM_RENDER_TYPE = {
   prev: 'prev',
   next: 'next'
-}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+};
 
 function DSTable(props) {
   var intl = useIntl();
@@ -54,7 +54,8 @@ function DSTable(props) {
       hideTitlePart = props.hideTitlePart,
       disableColumnNamesLineBreak = props.disableColumnNamesLineBreak,
       expandable = props.expandable,
-      maxHeight = props.maxHeight;
+      maxHeight = props.maxHeight,
+      skeletonProps = props.skeletonProps;
   var tableLocale = useTableLocale(intl, locale);
 
   var _useDataFormat = useDataFormat(),
@@ -129,9 +130,9 @@ function DSTable(props) {
     }, pagination);
   }, [pagination, formatValue, grouped, tableLocale, hideTitlePart]);
   var defaultTableContent = useMemo(function () {
-    return loading && !(dataSource != null && dataSource.length) ? /*#__PURE__*/React.createElement(TableSkeleton, {
+    return loading && !(dataSource != null && dataSource.length) ? /*#__PURE__*/React.createElement(TableSkeleton, _extends({
       maxHeight: maxHeight
-    }) : /*#__PURE__*/React.createElement(DefaultTable, _extends({
+    }, skeletonProps)) : /*#__PURE__*/React.createElement(DefaultTable, _extends({
       scroll: {
         x: 'auto'
       },
@@ -141,7 +142,7 @@ function DSTable(props) {
       title: renderHeader,
       pagination: dataSource != null && dataSource.length && pagination ? footerPagination : false
     }));
-  }, [dataSource == null ? void 0 : dataSource.length, footerPagination, loading, pagination, props, renderHeader, maxHeight, tableLocale]);
+  }, [dataSource == null ? void 0 : dataSource.length, skeletonProps, footerPagination, loading, pagination, props, renderHeader, maxHeight, tableLocale]);
   return /*#__PURE__*/React.createElement(TableLocaleContext.Provider, {
     value: tableLocale
   }, /*#__PURE__*/React.createElement(S.TableWrapper, {

package/dist/Table.types.d.ts

@@ -1,6 +1,8 @@
 import { ReactNode, ReactText, Ref } from 'react';
 import { ColumnType, TableProps } from 'antd/lib/table';
 import { TableLocale, TableRowSelection } from 'antd/lib/table/interface';
+import { TableSkeletonProps } from 'TableSkeleton/TableSkeleton.types';
+import { LiteralStringUnion } from '@synerise/ds-utils';
 import DSTable from './Table';
 import { GroupType } from './GroupTable/GroupTable.types';
 import { RowStar } from './hooks/useRowStar';
@@ -103,7 +105,7 @@ export type DSTableProps<T extends any & GroupType<T>> = AntTableProps<T> & {
     headerWithBorderTop?: boolean;
     itemsMenu?: string | ReactNode;
     search?: string;
-    cellSize?: string | 'medium' | 'small';
+    cellSize?: LiteralStringUnion<'medium' | 'small'>;
     roundedHeader?: boolean;
     selection?: RowSelection<T>;
     rowStar?: RowStar<T>;
@@ -126,5 +128,6 @@ export type DSTableProps<T extends any & GroupType<T>> = AntTableProps<T> & {
     dataSourceFull?: T[];
     dataSourceTotalCount?: number;
     maxHeight?: number;
+    skeletonProps?: Pick<TableSkeletonProps, 'headerHeight' | 'subheaderHeight' | 'rowHeight'>;
 };
 export {};

package/dist/TableHeader/TableHeader.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Props } from './TableHeader.types';
 declare const TableHeader: React.FC<Props>;
 export default TableHeader;

package/dist/TableHeader/TableHeader.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import Tooltip from '@synerise/ds-tooltip';
 import { useDataFormat } from '@synerise/ds-data-format';
 import * as S from '../Table.styles';

package/dist/TableHeader/TableLimit/TableLimit.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { TableLimitProps } from './TableLimit.types';
 export declare function TableLimit<T extends {
     key: React.ReactText;

package/dist/TableHeader/TableLimit/TableLimit.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import Alert from '@synerise/ds-alert';
 import { useDataFormat } from '@synerise/ds-data-format';
 import * as S from './TableLimit.styles';

package/dist/TableHeader/TableLimit/TableLimit.types.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Locale, RowSelection } from '../../Table.types';
 export interface TableLimitProps<T extends {
     key: React.ReactText;

package/dist/TableHeader/TableSelection.types.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { RowSelection, Locale } from '../Table.types';
 export interface Props<T extends {
     key: React.ReactText;

package/dist/TableSkeleton/TableSkeleton.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { TableSkeletonProps } from './TableSkeleton.types';
-export declare const TableSkeleton: ({ maxHeight, ...htmlAttributes }: TableSkeletonProps) => React.JSX.Element;
+export declare const TableSkeleton: ({ maxHeight, headerHeight, subheaderHeight, rowHeight, ...htmlAttributes }: TableSkeletonProps) => React.JSX.Element;

package/dist/TableSkeleton/TableSkeleton.js

@@ -1,4 +1,4 @@
-var _excluded = ["maxHeight"];
+var _excluded = ["maxHeight", "headerHeight", "subheaderHeight", "rowHeight"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -10,6 +10,9 @@ import { DEFAULT_ROW_COUNT, TABLE_HEADER, GAP, ROW_HEIGHT, PADDING } from './con
 import { TableSkeletonHeader, TableSkeletonSubheader, TableSkeletonBody } from './components';
 export var TableSkeleton = function TableSkeleton(_ref) {
   var maxHeight = _ref.maxHeight,
+      headerHeight = _ref.headerHeight,
+      subheaderHeight = _ref.subheaderHeight,
+      rowHeight = _ref.rowHeight,
       htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var rowCount = useMemo(function () {
@@ -20,7 +23,12 @@ export var TableSkeleton = function TableSkeleton(_ref) {
     maxHeight: maxHeight
   }, htmlAttributes, {
     "data-testid": "ds-table-skeleton"
-  }), /*#__PURE__*/React.createElement(TableSkeletonHeader, null), /*#__PURE__*/React.createElement(TableSkeletonSubheader, null), /*#__PURE__*/React.createElement(TableSkeletonBody, {
+  }), /*#__PURE__*/React.createElement(TableSkeletonHeader, {
+    headerHeight: headerHeight
+  }), /*#__PURE__*/React.createElement(TableSkeletonSubheader, {
+    subheaderHeight: subheaderHeight
+  }), /*#__PURE__*/React.createElement(TableSkeletonBody, {
+    rowHeight: rowHeight,
     rows: rowCount
   }));
 };

package/dist/TableSkeleton/TableSkeleton.styles.d.ts

@@ -2,13 +2,19 @@
 export declare const TableSkeletonWrapper: import("styled-components").StyledComponent<"div", any, {
     maxHeight?: number | undefined;
 }, never>;
-export declare const TableSkeletonHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableSkeletonHeader: import("styled-components").StyledComponent<"div", any, {
+    headerHeight?: number | undefined;
+}, never>;
 export declare const Skeleton: import("styled-components").StyledComponent<({ size, numberOfSkeletons, width, height, className }: import("@synerise/ds-skeleton").SkeletonProps) => import("react").JSX.Element, any, {}, never>;
 export declare const SkeletonWrapper: import("styled-components").StyledComponent<"div", any, {
     width?: number | undefined;
 }, never>;
-export declare const TableSkeletonSubHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableSkeletonSubHeader: import("styled-components").StyledComponent<"div", any, {
+    subheaderHeight?: number | undefined;
+}, never>;
 export declare const TableSkeletonLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TableSkeletonRight: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TableSkeletonBody: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TableSkeletonRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableSkeletonRow: import("styled-components").StyledComponent<"div", any, {
+    rowHeight?: number | undefined;
+}, never>;

package/dist/TableSkeleton/TableSkeleton.styles.js

@@ -1,5 +1,8 @@
 import styled, { css } from 'styled-components';
 import DSSkeleton from '@synerise/ds-skeleton';
+var HEADER_HEIGHT = 73;
+var SUBHEADER_HEIGHT = 64;
+var ROW_HEIGHT = 73;
 var rowCss = css(["display:flex;flex-direction:row;justify-content:space-between;"]);
 export var TableSkeletonWrapper = styled.div.withConfig({
   displayName: "TableSkeletonstyles__TableSkeletonWrapper",
@@ -12,7 +15,9 @@ export var TableSkeletonWrapper = styled.div.withConfig({
 export var TableSkeletonHeader = styled.div.withConfig({
   displayName: "TableSkeletonstyles__TableSkeletonHeader",
   componentId: "sc-9yqnm1-1"
-})(["", " padding:18px;"], rowCss);
+})(["", " padding:0 18px;height:", "px;"], rowCss, function (props) {
+  return props.headerHeight || HEADER_HEIGHT;
+});
 export var Skeleton = styled(DSSkeleton).withConfig({
   displayName: "TableSkeletonstyles__Skeleton",
   componentId: "sc-9yqnm1-2"
@@ -26,24 +31,28 @@ export var SkeletonWrapper = styled.div.withConfig({
 export var TableSkeletonSubHeader = styled.div.withConfig({
   displayName: "TableSkeletonstyles__TableSkeletonSubHeader",
   componentId: "sc-9yqnm1-4"
-})(["", " border-top:solid 1px ", ";border-bottom:solid 1px ", ";padding:18px 18px 18px 84px;"], rowCss, function (props) {
+})(["", " border-top:solid 1px ", ";border-bottom:solid 1px ", ";padding:0 18px 0 84px;height:", "px;"], rowCss, function (props) {
   return props.theme.palette['grey-200'];
 }, function (props) {
   return props.theme.palette['grey-200'];
+}, function (props) {
+  return props.subheaderHeight || SUBHEADER_HEIGHT;
 });
 export var TableSkeletonLeft = styled.div.withConfig({
   displayName: "TableSkeletonstyles__TableSkeletonLeft",
   componentId: "sc-9yqnm1-5"
-})(["display:flex;flex-direction:row;gap:50px;"]);
+})(["display:flex;flex-direction:row;gap:50px;align-items:center;"]);
 export var TableSkeletonRight = styled.div.withConfig({
   displayName: "TableSkeletonstyles__TableSkeletonRight",
   componentId: "sc-9yqnm1-6"
-})(["display:flex;flex-direction:row;gap:50px;"]);
+})(["display:flex;flex-direction:row;gap:50px;align-items:center;"]);
 export var TableSkeletonBody = styled.div.withConfig({
   displayName: "TableSkeletonstyles__TableSkeletonBody",
   componentId: "sc-9yqnm1-7"
-})(["display:flex;flex-direction:column;gap:36px;padding:18px;"]);
+})(["display:flex;flex-direction:column;padding:0 18px;"]);
 export var TableSkeletonRow = styled.div.withConfig({
   displayName: "TableSkeletonstyles__TableSkeletonRow",
   componentId: "sc-9yqnm1-8"
-})(["", ""], rowCss);
+})(["", " height:", "px;"], rowCss, function (props) {
+  return props.rowHeight || ROW_HEIGHT;
+});

package/dist/TableSkeleton/TableSkeleton.types.d.ts

@@ -1,4 +1,7 @@
 import { HTMLAttributes } from 'react';
 export type TableSkeletonProps = HTMLAttributes<HTMLDivElement> & {
     maxHeight?: number;
+    headerHeight?: number;
+    subheaderHeight?: number;
+    rowHeight?: number;
 };

package/dist/TableSkeleton/components/TableSkeletonBody.d.ts

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes } from 'react';
 type TableSkeletonBodyProps = HTMLAttributes<HTMLDivElement> & {
     rows: number;
+    rowHeight?: number;
 };
-export declare const TableSkeletonBody: ({ rows, ...htmlAttributes }: TableSkeletonBodyProps) => React.JSX.Element;
+export declare const TableSkeletonBody: ({ rows, rowHeight, ...htmlAttributes }: TableSkeletonBodyProps) => React.JSX.Element;
 export {};

package/dist/TableSkeleton/components/TableSkeletonBody.js

@@ -1,4 +1,4 @@
-var _excluded = ["rows"];
+var _excluded = ["rows", "rowHeight"];
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
@@ -11,12 +11,14 @@ import { SKELETON_BAR_TINY, SKELETON_BAR_WIDE } from '../constants';
 export var TableSkeletonBody = function TableSkeletonBody(_ref) {
   var _ref$rows = _ref.rows,
       rows = _ref$rows === void 0 ? 10 : _ref$rows,
+      rowHeight = _ref.rowHeight,
       htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(S.TableSkeletonBody, htmlAttributes, Array.from({
     length: rows
   }, function (_, index) {
     return /*#__PURE__*/React.createElement(S.TableSkeletonRow, {
+      rowHeight: rowHeight,
       "data-testid": "ds-table-skeleton-row",
       key: "ds-skeleton-row-" + index
     }, /*#__PURE__*/React.createElement(S.TableSkeletonLeft, null, /*#__PURE__*/React.createElement(TableSkeletonBar, {

package/dist/TableSkeleton/components/TableSkeletonHeader.d.ts

@@ -1,2 +1,4 @@
 import React, { HTMLAttributes } from 'react';
-export declare const TableSkeletonHeader: (props: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+export declare const TableSkeletonHeader: (props: HTMLAttributes<HTMLDivElement> & {
+    headerHeight?: number;
+}) => React.JSX.Element;

package/dist/TableSkeleton/components/TableSkeletonSubheader.d.ts

@@ -1,2 +1,4 @@
 import React, { HTMLAttributes } from 'react';
-export declare const TableSkeletonSubheader: (props: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+export declare const TableSkeletonSubheader: (props: HTMLAttributes<HTMLDivElement> & {
+    subheaderHeight?: number;
+}) => React.JSX.Element;

package/dist/TreeTable/TreeTable.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import '@synerise/ds-core/dist/js/style';
 import { DSTableProps } from '../Table.types';
 declare function TreeTable<T extends object = any>(props: DSTableProps<T>): React.ReactElement;

package/dist/TreeTable/TreeTable.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import * as React from 'react';
+import React from 'react';
 import '@synerise/ds-core/dist/js/style';
 import classNames from 'classnames';
 import Button from '@synerise/ds-button';

package/dist/VirtualTable/VirtualTable.d.ts

@@ -11,7 +11,7 @@ declare const _default: <T extends object & RowType<T> & {
     headerWithBorderTop?: boolean | undefined;
     itemsMenu?: React.ReactNode;
     search?: string | undefined;
-    cellSize?: string | undefined;
+    cellSize?: import("@synerise/ds-utils").LiteralStringUnion<"small" | "medium"> | undefined;
     roundedHeader?: boolean | undefined;
     selection?: RowSelection<T> | undefined;
     rowStar?: import("../hooks/useRowStar").RowStar<T> | undefined;
@@ -36,6 +36,7 @@ declare const _default: <T extends object & RowType<T> & {
     dataSourceFull?: T[] | undefined;
     dataSourceTotalCount?: number | undefined;
     maxHeight?: number | undefined;
+    skeletonProps?: Pick<import("../TableSkeleton/TableSkeleton.types").TableSkeletonProps, "headerHeight" | "subheaderHeight" | "rowHeight"> | undefined;
 } & {
     cellHeight: number;
     infiniteScroll?: import("../InfiniteScroll/InfiniteLoaderItem.types").InfiniteScrollProps | undefined;

package/dist/hooks/useRowKey/useRowKey.js

@@ -1,4 +1,4 @@
-import * as React from 'react'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import React from 'react'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 // eslint-disable-next-line import/prefer-default-export
 export var useRowKey = function useRowKey(rowKey) {

package/dist/hooks/useRowStar/useRowStar.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import Button from '@synerise/ds-button';
 import Tooltip from '@synerise/ds-tooltip';
 var STAR_COL_WIDTH_SINGLE = 64;

package/dist/hooks/useRowStar/useRowStar.types.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { ColumnType } from 'antd/lib/table';
 import { DSTableProps, DSColumnType } from '../../Table.types';
 export interface RowStar<T> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-table",
-  "version": "0.56.7",
+  "version": "0.57.0",
   "description": "Table UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -33,35 +33,35 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^0.8.27",
-    "@synerise/ds-badge": "^0.8.8",
-    "@synerise/ds-button": "^0.21.9",
-    "@synerise/ds-button-group": "^0.7.13",
-    "@synerise/ds-checkbox": "^0.12.6",
-    "@synerise/ds-column-manager": "^0.11.71",
-    "@synerise/ds-data-format": "^0.5.2",
-    "@synerise/ds-dropdown": "^0.18.13",
-    "@synerise/ds-flag": "^0.5.1",
-    "@synerise/ds-icon": "^0.65.4",
-    "@synerise/ds-input": "^0.24.3",
-    "@synerise/ds-loader": "^0.3.13",
-    "@synerise/ds-menu": "^0.19.13",
-    "@synerise/ds-modal": "^0.17.40",
-    "@synerise/ds-pagination": "^0.7.61",
-    "@synerise/ds-result": "^0.7.3",
-    "@synerise/ds-scrollbar": "^0.11.9",
-    "@synerise/ds-search": "^0.9.9",
-    "@synerise/ds-select": "^0.16.15",
-    "@synerise/ds-skeleton": "^0.6.7",
-    "@synerise/ds-status": "^0.6.21",
-    "@synerise/ds-tags": "^0.10.6",
-    "@synerise/ds-tooltip": "^0.14.39",
-    "@synerise/ds-typography": "^0.15.1",
-    "@synerise/ds-utils": "^0.29.1",
+    "@synerise/ds-alert": "^0.8.29",
+    "@synerise/ds-badge": "^0.8.10",
+    "@synerise/ds-button": "^0.21.11",
+    "@synerise/ds-button-group": "^0.7.15",
+    "@synerise/ds-checkbox": "^0.12.8",
+    "@synerise/ds-column-manager": "^0.12.0",
+    "@synerise/ds-data-format": "^0.5.3",
+    "@synerise/ds-dropdown": "^0.18.15",
+    "@synerise/ds-flag": "^0.5.2",
+    "@synerise/ds-icon": "^0.65.6",
+    "@synerise/ds-input": "^0.24.5",
+    "@synerise/ds-loader": "^0.3.15",
+    "@synerise/ds-menu": "^0.19.15",
+    "@synerise/ds-modal": "^0.17.42",
+    "@synerise/ds-pagination": "^0.7.63",
+    "@synerise/ds-result": "^0.7.5",
+    "@synerise/ds-scrollbar": "^0.11.11",
+    "@synerise/ds-search": "^0.9.11",
+    "@synerise/ds-select": "^0.16.17",
+    "@synerise/ds-skeleton": "^0.6.9",
+    "@synerise/ds-status": "^0.6.23",
+    "@synerise/ds-tags": "^0.10.8",
+    "@synerise/ds-tooltip": "^0.14.41",
+    "@synerise/ds-typography": "^0.15.2",
+    "@synerise/ds-utils": "^0.29.3",
     "@types/react-window": "^1.8.5",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
-    "lodash": "^4.17.19",
+    "lodash": "^4.17.21",
     "ramda": "0.27.0",
     "rc-resize-observer": "^0.2.1",
     "rc-table": "7.10.4",
@@ -77,5 +77,5 @@
     "react-dom": "^16.14.0",
     "styled-components": "5.0.1"
   },
-  "gitHead": "fcf3fa64e906cf9fefb37a61ee28218c8eed9b73"
+  "gitHead": "ae3c38b44ca0f9071cd55f7b82c182a99b5710e8"
 }