@synerise/ds-table 0.47.17 → 0.48.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.48.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.48.0...@synerise/ds-table@0.48.1) (2024-03-29)
+
+**Note:** Version bump only for package @synerise/ds-table
+
+
+
+
+
+# [0.48.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.47.17...@synerise/ds-table@0.48.0) (2024-03-20)
+
+
+### Features
+
+* **table:** sticky virtualised table ([4733821](https://github.com/synerise/synerise-design/commit/47338215ed6355a90edf7350e6002c96c9f83809))
+
+
+
+
+
 ## [0.47.17](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.47.16...@synerise/ds-table@0.47.17) (2024-03-18)
 
 **Note:** Version bump only for package @synerise/ds-table

package/dist/InfiniteScroll/BackToTopButton.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
 import { ButtonProps } from '@synerise/ds-button';
-export declare const BackToTopButton: (props: ButtonProps) => React.ReactElement;
+export declare const BackToTopButton: (props: ButtonProps & {
+    isSticky?: boolean;
+}) => React.ReactElement;
 export default BackToTopButton;

package/dist/InfiniteScroll/BackToTopButton.styles.d.ts

@@ -1,6 +1,10 @@
 import Button from '@synerise/ds-button';
-export declare const OffsetButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
+export declare const OffsetButton: import("styled-components").StyledComponent<typeof Button, any, {
+    isSticky?: boolean | undefined;
+}, never>;
 declare const _default: {
-    OffsetButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
+    OffsetButton: import("styled-components").StyledComponent<typeof Button, any, {
+        isSticky?: boolean | undefined;
+    }, never>;
 };
 export default _default;

package/dist/InfiniteScroll/BackToTopButton.styles.js

@@ -1,9 +1,11 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import Button from '@synerise/ds-button';
 export var OffsetButton = styled(Button).withConfig({
   displayName: "BackToTopButtonstyles__OffsetButton",
   componentId: "sc-8vxnei-0"
-})(["&&&{position:absolute;right:-16px;bottom:-16px;z-index:2;}"]);
+})(["", ""], function (props) {
+  return props.isSticky ? css(["&&&{transform:translate(10px,-100%);}"]) : css(["&&&{position:absolute;right:-16px;bottom:-16px;z-index:2;}"]);
+});
 export default {
   OffsetButton: OffsetButton
 };

package/dist/InfiniteScroll/InfiniteLoaderItem.d.ts

@@ -1,7 +1,4 @@
 import * as React from 'react';
-import { InfiniteScrollProps } from './constants';
-export interface LoaderItemProps {
-    infiniteScroll: InfiniteScrollProps;
-}
+import { LoaderItemProps } from './InfiniteLoaderItem.types';
 declare const InfiniteLoaderItem: ({ infiniteScroll }: LoaderItemProps) => React.ReactElement;
 export default InfiniteLoaderItem;

package/dist/InfiniteScroll/InfiniteLoaderItem.js

@@ -2,8 +2,8 @@ import * as React from 'react';
 import Alert from '@synerise/ds-alert';
 import Button from '@synerise/ds-button';
 import Icon, { RefreshM } from '@synerise/ds-icon';
-import Loader from '@synerise/ds-loader';
 import { TableLocaleContext } from '../utils/locale';
+import { Loader } from './InfiniteLoaderItem.styles';
 import { infiniteScrollPropsToState } from './utils';
 
 var LoadingItem = function LoadingItem() {

package/dist/InfiniteScroll/InfiniteLoaderItem.styles.d.ts

@@ -0,0 +1 @@
+export declare const Loader: import("styled-components").StyledComponent<({ size, label, labelPosition, color, percent, percentFormatter, text, fontSize, mode, className, }: import("@synerise/ds-loader/dist/Loader.types").LoaderProps) => JSX.Element, any, {}, never>;

package/dist/InfiniteScroll/InfiniteLoaderItem.styles.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import DSLoader from '@synerise/ds-loader';
+export var Loader = styled(DSLoader).withConfig({
+  displayName: "InfiniteLoaderItemstyles__Loader",
+  componentId: "lvwx4m-0"
+})(["justify-content:flex-start;"]);

package/dist/InfiniteScroll/InfiniteLoaderItem.types.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement, MouseEvent as ReactMouseEvent } from 'react';
+export type InfiniteScrollState = {
+    hasError: boolean;
+    hasMore: boolean;
+    isLoading: boolean;
+};
+export type InfiniteScrollProps = InfiniteScrollState & {
+    maxScroll?: number;
+    showBackToTopButton?: boolean;
+    render?: (state: InfiniteScrollState) => ReactElement;
+    onRetryButtonClick?: (event: ReactMouseEvent<HTMLElement, MouseEvent>) => void;
+    onScrollEndReach: () => void;
+    onScrollTopReach?: () => void;
+};
+export type LoaderItemProps = {
+    infiniteScroll: InfiniteScrollProps;
+};

package/dist/InfiniteScroll/InfiniteLoaderItem.types.js

@@ -0,0 +1 @@
+export {};

package/dist/InfiniteScroll/OuterListElement.d.ts

@@ -0,0 +1,3 @@
+import React, { MutableRefObject } from 'react';
+declare const OuterListElement: (containerRef: MutableRefObject<HTMLDivElement | null | undefined>, isSticky: boolean) => React.ForwardRefExoticComponent<React.HTMLAttributes<Element> & React.RefAttributes<HTMLDivElement>>;
+export default OuterListElement;

package/dist/InfiniteScroll/OuterListElement.js

@@ -0,0 +1,78 @@
+var _excluded = ["height"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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; }
+
+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; }
+
+import React, { useCallback, useState, forwardRef, useEffect } from 'react';
+import Scrollbar from '@synerise/ds-scrollbar';
+
+var OuterListElement = function OuterListElement(containerRef, isSticky) {
+  return forwardRef(function (_ref, ref) {
+    var onWheel = _ref.onWheel,
+        onScroll = _ref.onScroll,
+        children = _ref.children,
+        style = _ref.style;
+
+    var _useState = useState(null),
+        header = _useState[0],
+        setHeader = _useState[1];
+
+    useEffect(function () {
+      if (containerRef != null && containerRef.current) {
+        var headerElement = containerRef.current.querySelector('.ant-table-header');
+        headerElement && setHeader(headerElement);
+      }
+    }, []);
+    var onScrollHandler = useCallback(function (event) {
+      if (header) {
+        header.scrollTo({
+          left: event.currentTarget.scrollLeft
+        });
+      }
+
+      onScroll && onScroll(event);
+    }, [onScroll, header]);
+
+    var onWheelHandler = function onWheelHandler(event) {
+      if (header) {
+        var _event$currentTarget, _event$currentTarget$;
+
+        header.scrollTo({
+          left: (_event$currentTarget = event.currentTarget) == null ? void 0 : (_event$currentTarget$ = _event$currentTarget.parentElement) == null ? void 0 : _event$currentTarget$.scrollLeft
+        });
+      }
+
+      onWheel && onWheel(event);
+    };
+
+    if (isSticky) {
+      // uses native browser scroll
+      var _ref2 = style || {},
+          height = _ref2.height,
+          rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+      return /*#__PURE__*/React.createElement("div", {
+        ref: ref,
+        onWheel: onWheelHandler,
+        "data-testid": "virtual-table-scrollable-window-sticky",
+        style: _objectSpread({}, rest, {
+          maxHeight: height
+        })
+      }, children);
+    }
+
+    return /*#__PURE__*/React.createElement(Scrollbar, {
+      ref: ref,
+      onScroll: onScrollHandler,
+      absolute: true,
+      maxHeight: style == null ? void 0 : style.height
+    }, children);
+  });
+};
+
+export default OuterListElement;

package/dist/InfiniteScroll/constants.d.ts

@@ -1,14 +1 @@
-/// <reference types="react" />
-export interface InfiniteScrollState {
-    hasError: boolean;
-    hasMore: boolean;
-    isLoading: boolean;
-}
-export interface InfiniteScrollProps extends InfiniteScrollState {
-    showBackToTopButton?: boolean;
-    render?: (state: InfiniteScrollState) => React.ReactElement;
-    onRetryButtonClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    onScrollEndReach: () => void;
-    onScrollTopReach?: () => void;
-}
 export declare const infiniteLoaderItemHeight = 64;

package/dist/InfiniteScroll/utils.d.ts

@@ -1,4 +1,4 @@
-import { InfiniteScrollProps, InfiniteScrollState } from './constants';
+import { InfiniteScrollProps, InfiniteScrollState } from './InfiniteLoaderItem.types';
 export declare const infiniteScrollPropsToState: ({ hasError, hasMore, isLoading, }: InfiniteScrollProps) => InfiniteScrollState;
 declare const _default: {
     infiniteScrollPropsToState: ({ hasError, hasMore, isLoading, }: InfiniteScrollProps) => InfiniteScrollState;

package/dist/Table.js

@@ -35,6 +35,7 @@ function DSTable(props) {
       cellSize = props.cellSize,
       dataSource = props.dataSource,
       dataSourceFull = props.dataSourceFull,
+      dataSourceTotalCount = props.dataSourceTotalCount,
       roundedHeader = props.roundedHeader,
       filters = props.filters,
       searchComponent = props.searchComponent,
@@ -65,6 +66,7 @@ function DSTable(props) {
 
       return [].concat(items);
     }, []) : dataSource;
+    var totalCount = dataSourceTotalCount || (dataSource == null ? void 0 : dataSource.length) || (dataSourceFull == null ? void 0 : dataSourceFull.length);
     return !hideTitleBar && /*#__PURE__*/React.createElement(TableHeader, {
       withBorderTop: headerWithBorderTop,
       selectedRows: size,
@@ -74,6 +76,7 @@ function DSTable(props) {
       selection: selection,
       dataSource: data,
       dataSourceFull: dataSourceFull,
+      dataSourceTotalCount: totalCount,
       searchComponent: searchComponent,
       filterComponent: filterComponent,
       headerButton: headerButton,
@@ -82,7 +85,7 @@ function DSTable(props) {
       renderSelectionTitle: renderSelectionTitle,
       hideTitlePart: hideTitlePart
     });
-  }, [selection, grouped, dataSource, hideTitleBar, headerWithBorderTop, title, filters, itemsMenu, dataSourceFull, searchComponent, filterComponent, headerButton, rowKey, tableLocale, renderSelectionTitle, hideTitlePart]);
+  }, [selection, grouped, dataSource, dataSourceTotalCount, hideTitleBar, headerWithBorderTop, title, filters, itemsMenu, dataSourceFull, searchComponent, filterComponent, headerButton, rowKey, tableLocale, renderSelectionTitle, hideTitlePart]);
   var footerPagination = React.useMemo(function () {
     return _objectSpread({
       showTotal: function showTotal(total, range) {

package/dist/Table.styles.js

@@ -87,7 +87,7 @@ export var Spinner = styled.div.withConfig({
 export var TableWrapper = styled.div.withConfig({
   displayName: "Tablestyles__TableWrapper",
   componentId: "dacfhr-14"
-})(["table{.ant-table-thead{", ";}}.ant-table-wrapper .ant-table{z-index:1;}.ant-table .ant-table-cell.ant-table-selection-column,.ant-table .ant-table-cell.ds-table-star-column{padding:0 8px 0 24px;& > button{display:inline-block;}}.ant-table .ant-table-cell.ant-table-selection-column + .ant-table-cell.ds-table-star-column{padding-left:0;}.ant-table .ant-table-thead th{transition:background 0.3s,border-color 0.3s;background-color:", ";border-bottom-color:", ";&.ant-table-column-has-sorters{cursor:default;}&.ant-table-column-has-sorters:hover{background-color:", ";border-bottom:2px solid ", ";> *{margin-bottom:-1px;}}> *{display:flex;width:100%;}[class^='ant-table-column-sorters']{width:100%;}&.ant-table-column-sort{background-color:", ";border-bottom:2px solid ", ";&:hover{background-color:", ";border-bottom:2px solid ", ";}& > [class^='ant-table-column-sorters']{overflow:hidden;}> *{margin-bottom:-1px;}}&.ant-table-cell-ellipsis.ant-table-column-has-sorters{overflow:visible;}&:not(.ds-table-column-sort){.ds-table-column-sorter{margin-left:8px;}}&.ds-table-active-column{background-color:", ";border-bottom:2px solid ", ";cursor:default;&:hover{background-color:", ";border-bottom:2px solid ", ";}.ant-table-column-sorter{display:none;}> *{margin-bottom:-1px;}}}.ant-table tr.ant-table-row:not(:hover) td.ant-table-column-sort{background-color:", ";}.ant-table .ant-table-column-sorter{margin-left:8px;max-width:32px;min-width:32px;}.ant-table-cell .ds-sort-dropdown-button{opacity:0;}.ant-table-cell:hover .ds-sort-dropdown-button,.ant-table-cell.ant-table-column-sort .ds-sort-dropdown-button{opacity:1;}.ant-table-wrapper.virtual-table.virtual-table-infinite-scroll .ant-table .ant-table-header{box-shadow:0 4px 12px 0 rgba(35,41,54,0.04);}.virtual-table .ant-table-container{overflow:auto hidden;}.virtual-table .virtual-table-row:not(:hover) .virtual-table-cell.ant-table-column-sort{background-color:", ";}& .ant-table .ant-table-cell-scrollbar{box-shadow:none;}& .ant-table th.ant-table-cell{white-space:", ";}"], function (props) {
+})(["table{.ant-table-thead{", ";}}.ant-table-wrapper .ant-table{z-index:1;}.ant-table .ant-table-cell.ant-table-selection-column,.ant-table .ant-table-cell.ds-table-star-column{padding:0 8px 0 24px;& > button{display:inline-block;}}.ant-table .ant-table-cell.ant-table-selection-column + .ant-table-cell.ds-table-star-column{padding-left:0;}.ant-table .ant-table-thead th{transition:background 0.3s,border-color 0.3s;background-color:", ";border-bottom-color:", ";&.ant-table-column-has-sorters{cursor:default;}&.ant-table-column-has-sorters:hover{background-color:", ";border-bottom:2px solid ", ";> *{margin-bottom:-1px;}}> *{display:flex;width:100%;}[class^='ant-table-column-sorters']{width:100%;}&.ant-table-column-sort{background-color:", ";border-bottom:2px solid ", ";&:hover{background-color:", ";border-bottom:2px solid ", ";}& > [class^='ant-table-column-sorters']{overflow:hidden;}> *{margin-bottom:-1px;}}&.ant-table-cell-ellipsis.ant-table-column-has-sorters{overflow:visible;}&:not(.ds-table-column-sort){.ds-table-column-sorter{margin-left:8px;}}&.ds-table-active-column{background-color:", ";border-bottom:2px solid ", ";cursor:default;&:hover{background-color:", ";border-bottom:2px solid ", ";}.ant-table-column-sorter{display:none;}> *{margin-bottom:-1px;}}}.ant-table tr.ant-table-row:not(:hover) td.ant-table-column-sort{background-color:", ";}.ant-table .ant-table-column-sorter{margin-left:8px;max-width:32px;min-width:32px;}.ant-table-cell .ds-sort-dropdown-button{opacity:0;}.ant-table-cell:hover .ds-sort-dropdown-button,.ant-table-cell.ant-table-column-sort .ds-sort-dropdown-button{opacity:1;}.ant-table-wrapper.virtual-table.virtual-table-infinite-scroll .ant-table .ant-table-header{box-shadow:0 4px 12px 0 rgba(35,41,54,0.04);}.virtual-table:not(.with-sticky-header) .ant-table-container{overflow:auto hidden;}.virtual-table .virtual-table-row:not(:hover) .virtual-table-cell.ant-table-column-sort{background-color:", ";}& .ant-table .ant-table-cell-scrollbar{box-shadow:none;}& .ant-table th.ant-table-cell{white-space:", ";}"], function (props) {
   return props.hideColumnNames ? 'display: none' : '';
 }, function (_ref3) {
   var theme = _ref3.theme;

package/dist/Table.types.d.ts

@@ -72,18 +72,19 @@ export type DSColumnType<T> = Omit<ColumnType<T>, 'fixed'> & {
     sortRender?: SortRender<T>;
     childRender?: (value: unknown, row: T, index: number) => React.ReactNode;
 };
+export type CustomizeScrollBodyInfo = {
+    scrollbarSize: number;
+    ref: React.Ref<{
+        scrollLeft: number;
+    }>;
+    onScroll: (info: {
+        currentTarget?: HTMLElement;
+        scrollLeft?: number;
+    }) => void;
+};
 type AntTableComponentsType<T> = AntTableProps<T>['components'];
 type DSTableComponentsType<T> = AntTableComponentsType<T> & {
-    body?: (data: T[], info: {
-        scrollbarSize: number;
-        ref: React.Ref<{
-            scrollLeft: number;
-        }>;
-        onScroll: (info: {
-            currentTarget?: HTMLElement;
-            scrollLeft?: number;
-        }) => void;
-    }, defaultTableProps?: DSTableProps<T>) => React.ReactNode;
+    body?: (data: T[], info: CustomizeScrollBodyInfo, defaultTableProps?: DSTableProps<T>) => React.ReactNode;
 };
 export type SingleColumnSort = {
     columnKey: string;
@@ -116,5 +117,6 @@ export interface DSTableProps<T extends any & GroupType<T>> extends AntTableProp
     disableColumnNamesLineBreak?: boolean;
     onSort?: OnSortFn;
     dataSourceFull?: T[];
+    dataSourceTotalCount?: number;
 }
 export {};

package/dist/TableHeader/TableHeader.js

@@ -21,6 +21,7 @@ var TableHeader = function TableHeader(_ref) {
       selection = _ref.selection,
       dataSource = _ref.dataSource,
       dataSourceFull = _ref.dataSourceFull,
+      dataSourceTotalCount = _ref.dataSourceTotalCount,
       rowKey = _ref.rowKey,
       withBorderTop = _ref.withBorderTop,
       headerButton = _ref.headerButton,
@@ -76,8 +77,8 @@ var TableHeader = function TableHeader(_ref) {
       ref: titleRef
     }, title)) : /*#__PURE__*/React.createElement("strong", {
       ref: titleRef
-    }, title)), !hideTitlePart && /*#__PURE__*/React.createElement(S.TitleSeparator, null)), !hideTitlePart && /*#__PURE__*/React.createElement(S.TitlePart, null, /*#__PURE__*/React.createElement("strong", null, formatValue(dataSource.length)), " ", /*#__PURE__*/React.createElement("span", null, locale.pagination.items))));
-  }, [selection, dataSource, itemsMenu, locale, selectedRows, rowKey, dataSourceFull, renderSelectionTitle, filters, formatValue, title, isTitleTruncated, hideTitlePart]);
+    }, title)), !hideTitlePart && /*#__PURE__*/React.createElement(S.TitleSeparator, null)), !hideTitlePart && /*#__PURE__*/React.createElement(S.TitlePart, null, /*#__PURE__*/React.createElement("strong", null, formatValue(dataSourceTotalCount)), " ", /*#__PURE__*/React.createElement("span", null, locale.pagination.items))));
+  }, [selection, dataSource, itemsMenu, locale, selectedRows, rowKey, dataSourceFull, renderSelectionTitle, filters, formatValue, title, isTitleTruncated, hideTitlePart, dataSourceTotalCount]);
   return /*#__PURE__*/React.createElement(S.Header, {
     withBorderTop: withBorderTop
   }, renderLeftSide, /*#__PURE__*/React.createElement(S.Right, null, headerButton, filters == null ? void 0 : filters.map(function (filter) {

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

@@ -1,21 +1,22 @@
-import * as React from 'react';
+import { ReactText, ReactNode } from 'react';
 import { Filter, Locale, RowSelection } from '../Table.types';
-export interface Props<T extends {
-    key: React.ReactText;
-}> {
-    title?: React.ReactNode;
+export type Props<T extends {
+    key: ReactText;
+}> = {
+    title?: ReactNode;
     filters?: Filter[];
     selectedRows?: number;
-    itemsMenu: React.ReactNode;
+    itemsMenu: ReactNode;
     selection?: RowSelection<T>;
     dataSource: T[];
     dataSourceFull?: T[];
-    searchComponent?: React.ReactNode;
-    filterComponent?: React.ReactNode;
+    searchComponent?: ReactNode;
+    filterComponent?: ReactNode;
     rowKey?: Function | string;
     withBorderTop?: boolean;
-    headerButton?: React.ReactNode;
+    headerButton?: ReactNode;
     locale: Locale;
-    renderSelectionTitle?: (selection?: RowSelection<T>, filters?: Filter[]) => React.ReactNode;
+    renderSelectionTitle?: (selection?: RowSelection<T>, filters?: Filter[]) => ReactNode;
     hideTitlePart?: boolean;
-}
+    dataSourceTotalCount?: number;
+};

package/dist/VirtualTable/VirtualTable.d.ts

@@ -1,8 +1,23 @@
-import * as React from 'react';
-import { RowType } from '../Table.types';
-import { Props } from './VirtualTable.types';
-export declare const EXPANDED_ROW_PROPERTY = "expandedChild";
-declare function VirtualTable<T extends object & RowType<T> & {
-    [EXPANDED_ROW_PROPERTY]?: boolean;
-}>(props: Props<T>): React.ReactElement;
-export default VirtualTable;
+import React, { Ref, ReactElement } from 'react';
+import { FixedSizeList as List } from 'react-window';
+import { RowType, DSTableProps } from '../Table.types';
+import { Props, VirtualTableRef } from './VirtualTable.types';
+declare const _default: <T extends object & RowType<T> & {
+    expandedChild?: boolean | undefined;
+}>(p: DSTableProps<T> & {
+    cellHeight: number;
+    infiniteScroll?: import("../InfiniteScroll/InfiniteLoaderItem.types").InfiniteScrollProps | undefined;
+    initialWidth: number;
+    scroll: {
+        x?: number | undefined;
+        y: number;
+    };
+    sticky?: ((boolean | import("rc-table/lib/interface").TableSticky | undefined) & {
+        scrollThreshold?: number | undefined;
+    }) | undefined;
+    onListRefChange?: ((ref: React.RefObject<List<any>>) => void) | undefined;
+    onRowClick?: ((row: T) => void) | undefined;
+} & {
+    ref?: React.Ref<VirtualTableRef> | undefined;
+}) => ReactElement;
+export default _default;