@synerise/ds-table 0.60.11 → 0.61.1

package/dist/Table.styles.js

@@ -44,18 +44,22 @@ export var Left = styled.div.withConfig({
 export var Right = styled.div.withConfig({
   displayName: "Tablestyles__Right",
   componentId: "dacfhr-7"
-})(["display:flex;align-items:center;justify-content:flex-start;> *{margin-left:8px;min-width:32px;}&&& .ds-button.btn-search{min-width:unset;}"]);
+})(["display:flex;align-items:center;justify-content:flex-start;gap:8px;> *{min-width:32px;}&&& .ds-button.btn-search{min-width:unset;}"]);
+export var RightSideWrapper = styled.div.withConfig({
+  displayName: "Tablestyles__RightSideWrapper",
+  componentId: "dacfhr-8"
+})([""]);
 export var Icon = styled.div.withConfig({
   displayName: "Tablestyles__Icon",
-  componentId: "dacfhr-8"
+  componentId: "dacfhr-9"
 })(["transition:all 0.5s ease;position:absolute;left:4px;z-index:1;"]);
 export var Input = styled.div.withConfig({
   displayName: "Tablestyles__Input",
-  componentId: "dacfhr-9"
+  componentId: "dacfhr-10"
 })(["transition:all 0.2s ease;overflow:hidden;position:relative;right:0;> div{margin:0;}"]);
 export var InputWrapper = styled.div.withConfig({
   displayName: "Tablestyles__InputWrapper",
-  componentId: "dacfhr-10"
+  componentId: "dacfhr-11"
 })(["", ";transition:all 0.5s ease;position:relative;display:flex;align-items:center;direction:ltr;", "{opacity:", ";width:", ";}&{input{padding-left:32px;", ";}}.search-input{width:0;}"], function (props) {
   return props.searchValue !== '' || props.isOpen ? "width: 100%" : 'width: 30px';
 }, Input, function (props) {
@@ -67,19 +71,19 @@ export var InputWrapper = styled.div.withConfig({
 });
 export var Selection = styled.div.withConfig({
   displayName: "Tablestyles__Selection",
-  componentId: "dacfhr-11"
+  componentId: "dacfhr-12"
 })(["display:flex;align-items:center;justify-content:flex-start;max-width:64px;margin-right:24px;border-radius:3px;&:hover{background-color:", ";}.ant-btn.ds-button:first-of-type{border-top-right-radius:0;border-bottom-right-radius:0;}.ant-btn.ds-button:last-of-type{border-top-left-radius:0;border-bottom-left-radius:0;}", "{padding:0;}"], function (_ref2) {
   var theme = _ref2.theme;
   return theme.palette['grey-100'];
 }, CheckboxWrapper);
 export var SelectionMenu = styled(Menu).withConfig({
   displayName: "Tablestyles__SelectionMenu",
-  componentId: "dacfhr-12"
+  componentId: "dacfhr-13"
 })(["padding:8px;"]);
 var spinnerAnimation = keyframes(["from{transform:rotateZ(0deg);}to{transform:rotateZ(360deg);}"]);
 export var Spinner = styled.div.withConfig({
   displayName: "Tablestyles__Spinner",
-  componentId: "dacfhr-13"
+  componentId: "dacfhr-14"
 })(["position:absolute !important;top:0;left:0;width:100%;height:100%;margin:0;border-radius:inherit;display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,0.6);z-index:10;", "{animation:", " 1s forwards linear infinite;svg{color:", ";fill:", ";}}"], IconContainer, spinnerAnimation, function (props) {
   return props.theme.palette['blue-600'];
 }, function (props) {
@@ -87,8 +91,8 @@ 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: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) {
+  componentId: "dacfhr-15"
+})(["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:", ";}&&& .ant-table-thead > tr > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before{position:relative;}"], function (props) {
   return props.hideColumnNames ? 'display: none' : '';
 }, function (_ref3) {
   var theme = _ref3.theme;
@@ -137,11 +141,11 @@ export var TableWrapper = styled.div.withConfig({
 });
 export var Skeleton = styled(DSSkeleton).withConfig({
   displayName: "Tablestyles__Skeleton",
-  componentId: "dacfhr-15"
+  componentId: "dacfhr-16"
 })(["padding:0;"]);
 export var TableSkeletonCell = styled.div.withConfig({
   displayName: "Tablestyles__TableSkeletonCell",
-  componentId: "dacfhr-16"
+  componentId: "dacfhr-17"
 })(["display:flex;height:", ";width:", ";align-items:center;justify-content:flex-start;"], function (props) {
   return props.height + "px" || 'auto';
 }, function (props) {

package/dist/Table.types.d.ts

@@ -1,12 +1,12 @@
-import { ReactNode, ReactText, Ref } from 'react';
-import { ColumnType, TableProps } from 'antd/lib/table';
-import { TableLocale, TableRowSelection } from 'antd/lib/table/interface';
-import { LiteralStringUnion } from '@synerise/ds-utils';
-import DSTable from './Table';
-import { GroupType } from './GroupTable/GroupTable.types';
-import { RowStar } from './hooks/useRowStar';
-import { SortRender } from './ColumnSortMenu/TitleWithSort';
-import { ColumnSortOrder, ColumnsSortState } from './ColumnSortMenu/useSortState';
+import type { Key, ReactNode, Ref } from 'react';
+import type { ColumnType, TableProps } from 'antd/lib/table';
+import type { TableLocale, TableRowSelection } from 'antd/lib/table/interface';
+import type { LiteralStringUnion } from '@synerise/ds-utils';
+import type DSTable from './Table';
+import type { GroupType } from './GroupTable/GroupTable.types';
+import type { RowStar } from './hooks/useRowStar';
+import type { SortRender } from './ColumnSortMenu/TitleWithSort';
+import type { ColumnSortOrder, ColumnsSortState } from './ColumnSortMenu/useSortState';
 export type AntTableProps<T> = Omit<TableProps<T>, 'title' | 'subTitle' | 'onSearch' | 'itemsMenu' | 'search' | 'locale' | 'columns'>;
 export type Selection = {
     key: string;
@@ -16,9 +16,9 @@ export type Selection = {
 export type SelectionItem = typeof DSTable.SELECTION_ALL | typeof DSTable.SELECTION_INVERT | Selection | null | undefined;
 export type RowSelection<T> = Omit<TableRowSelection<T>, 'selections'> & {
     fixed?: boolean;
-    selectedRowKeys: ReactText[];
+    selectedRowKeys: Key[];
     selections?: SelectionItem[];
-    onChange: (selectedRowKeys: ReactText[], selectedRows: T[]) => void;
+    onChange: (selectedRowKeys: Key[], selectedRows: T[]) => void;
     limit?: number;
     independentSelectionExpandedRows?: boolean;
     checkRowSelectionStatus?: (record: T) => {
@@ -45,7 +45,7 @@ export type Filter = {
     disabled?: boolean;
 };
 export type RowType<T> = {
-    key?: string | number;
+    key?: Key;
     children?: T[];
 };
 export type Locale = TableLocale & {
@@ -99,7 +99,7 @@ export type SingleColumnSort = {
 };
 export type OnSortFn = (singleColumnSort: SingleColumnSort, sortState: ColumnsSortState) => void;
 export type DSTableProps<T extends any & GroupType<T>> = AntTableProps<T> & {
-    title?: string | ReactNode;
+    title?: ReactNode | (() => ReactNode);
     hideTitleBar?: boolean;
     headerWithBorderTop?: boolean;
     itemsMenu?: string | ReactNode;

package/dist/TableHeader/TableHeader.js

@@ -70,7 +70,7 @@ var TableHeader = function TableHeader(_ref) {
           autoAdjustOverflow: true
         }
       }
-    }, title), !hideTitlePart && /*#__PURE__*/React.createElement(S.TitleSeparator, null)), !isLoading && !hideTitlePart && /*#__PURE__*/React.createElement(S.TitlePart, null, /*#__PURE__*/React.createElement("strong", null, formatValue(dataSourceTotalCount || dataSource.length)), " ", /*#__PURE__*/React.createElement("span", null, locale == null || (_locale$pagination = locale.pagination) == null ? void 0 : _locale$pagination.items))));
+    }, title), !hideTitlePart && /*#__PURE__*/React.createElement(S.TitleSeparator, null)), !isLoading && !hideTitlePart && /*#__PURE__*/React.createElement(S.TitlePart, null, /*#__PURE__*/React.createElement("strong", null, formatValue(dataSourceTotalCount || dataSource.length)), ' ', /*#__PURE__*/React.createElement("span", null, locale == null || (_locale$pagination = locale.pagination) == null ? void 0 : _locale$pagination.items))));
   }, [selection, dataSourceTotalCount, dataSource, itemsMenu, locale, selectedRows, rowKey, dataSourceFull, childrenColumnName, renderSelectionTitle, filters, formatValue, title, hideTitlePart, isLoading]);
   return /*#__PURE__*/React.createElement(S.Header, {
     withBorderTop: withBorderTop
@@ -88,6 +88,10 @@ var TableHeader = function TableHeader(_ref) {
       selected: filter.selected,
       disabled: filter.disabled
     });
-  }), filterComponent, searchComponent));
+  }), filterComponent && /*#__PURE__*/React.createElement(S.RightSideWrapper, {
+    "data-testid": "ds-table-filter-wrapper"
+  }, filterComponent), searchComponent && /*#__PURE__*/React.createElement(S.RightSideWrapper, {
+    "data-testid": "ds-table-search-wrapper"
+  }, searchComponent)));
 };
 export default TableHeader;

package/dist/TableHeader/TableSelection.js

@@ -1,8 +1,4 @@
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 React, { useCallback, useMemo } from 'react';
 import Dropdown from '@synerise/ds-dropdown';
 import Button from '@synerise/ds-button';
@@ -146,10 +142,9 @@ var TableSelection = function TableSelection(_ref) {
     selectableRecordsCount = _useBulkSelectionCoun.selectableRecordsCount,
     selectableAndSelectedRecordsCount = _useBulkSelectionCoun.selectableAndSelectedRecordsCount,
     selectedRecordsCount = _useBulkSelectionCoun.selectedRecordsCount;
-  var isIndeterminate = selectedRecordsCount > 0 && allRecordsCount !== selectableRecordsCount;
+  var isIndeterminate = selectedRecordsCount > 0 && selectableRecordsCount !== selectableAndSelectedRecordsCount;
   var disabledBulkSelection = allRecordsCount === 0 || selectableRecordsCount === 0;
-  var isChecked = !disabledBulkSelection && allRecordsCount === selectableRecordsCount;
-  var isAllSelected = selectableRecordsCount === selectableAndSelectedRecordsCount;
+  var isAllSelected = !disabledBulkSelection && selectableRecordsCount === selectableAndSelectedRecordsCount;
   var selectionTooltipTitle = !isAllSelected ? locale == null ? void 0 : locale.selectAllTooltip : locale == null ? void 0 : locale.unselectAll;
   var menuDataSource = useMemo(function () {
     var _selection$selections;
@@ -175,7 +170,7 @@ var TableSelection = function TableSelection(_ref) {
         default:
           {
             var sel = selectionMenuElement;
-            return _objectSpread({}, sel, {
+            return _extends({}, sel, {
               text: sel.label
             });
           }
@@ -189,7 +184,7 @@ var TableSelection = function TableSelection(_ref) {
   }, /*#__PURE__*/React.createElement(Button.Checkbox, {
     disabled: disabledBulkSelection,
     "data-testid": "ds-table-batch-selection-button",
-    checked: isChecked,
+    checked: isAllSelected,
     onChange: function onChange() {
       if (!isAllSelected) {
         selectAll();

package/dist/VirtualTable/VirtualTable.d.ts

@@ -1,64 +1,11 @@
-import React from 'react';
 import type { Ref, ReactElement } from 'react';
-import { FixedSizeList as List } from 'react-window';
-import type { RowType, DSTableProps, RowSelection, CustomizeScrollBodyInfo, DSColumnType } from '../Table.types';
+import type { RowType } from '../Table.types';
 import type { VirtualTableRef, VirtualTableProps } from './VirtualTable.types';
-declare const _default: <T extends object & RowType<T> & {
-    expandedChild?: boolean | undefined;
-}>(p: import("../Table.types").AntTableProps<T> & {
-    title?: React.ReactNode;
-    hideTitleBar?: boolean | undefined;
-    headerWithBorderTop?: boolean | undefined;
-    itemsMenu?: React.ReactNode;
-    search?: 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;
-    filters?: import("../Table.types").Filter[] | undefined;
-    searchComponent?: React.ReactNode;
-    filterComponent?: React.ReactNode;
-    emptyDataComponent?: React.ReactNode;
-    headerButton?: React.ReactNode;
-    grouped?: boolean | undefined;
-    hideGroupExpander?: boolean | undefined;
-    initialGroupsCollapsed?: boolean | undefined;
-    hideColumnNames?: boolean | undefined;
-    columns?: DSColumnType<T>[] | undefined;
-    locale?: import("../Table.types").Locale | undefined;
-    components?: import("rc-table/lib/interface").TableComponents<T> | (import("rc-table/lib/interface").TableComponents<T> & {
-        body?: ((data: T[], info: CustomizeScrollBodyInfo, defaultTableProps?: DSTableProps<T> | undefined) => React.ReactNode) | undefined;
-    }) | undefined;
-    renderSelectionTitle?: ((selection?: RowSelection<T> | undefined, filters?: import("../Table.types").Filter[] | undefined) => React.ReactNode) | undefined;
-    hideTitlePart?: boolean | undefined;
-    disableColumnNamesLineBreak?: boolean | undefined;
-    onSort?: import("../Table.types").OnSortFn | undefined;
-    dataSourceFull?: T[] | undefined;
-    dataSourceTotalCount?: number | undefined;
-    skeletonProps?: {
-        maxHeight?: number | undefined;
-        headerHeight?: number | undefined;
-        subheaderHeight?: number | undefined;
-        cellHeight?: number | undefined;
-    } | undefined;
-} & {
-    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;
-        offsetHeader?: number | undefined;
-        getContainer: () => HTMLDivElement;
-    }) | undefined;
-    onListRefChange?: ((ref: React.RefObject<List<any>>) => void) | undefined;
-    onRowClick?: ((row: T) => void) | undefined;
-    onItemsRendered?: ((props: import("react-window").ListOnItemsRenderedProps) => void) | undefined;
-    onScrollToRecordIndex?: ((recordIndex: number, callback?: (() => void) | undefined) => void) | undefined;
-} & {
-    ref?: React.Ref<VirtualTableRef> | undefined;
+import { EXPANDED_ROW_PROPERTY } from './constants';
+type VirtualTableType = <T extends object & RowType<T> & {
+    [EXPANDED_ROW_PROPERTY]?: boolean;
+}>(p: VirtualTableProps<T> & {
+    ref?: Ref<VirtualTableRef>;
 }) => ReactElement;
+declare const _default: VirtualTableType;
 export default _default;

package/dist/VirtualTable/VirtualTable.js

@@ -1,16 +1,12 @@
 var _excluded = ["style"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 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; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 React, { useCallback, useState, useRef, forwardRef, useEffect, useMemo, useImperativeHandle } from 'react';
 import { FixedSizeList as List } from 'react-window';
 import ResizeObserver from 'rc-resize-observer';
 import { compact } from 'lodash';
 import { useIntl } from 'react-intl';
+import classnames from 'classnames';
 import { useElementInView } from '@synerise/ds-utils';
 import { infiniteLoaderItemHeight } from '../InfiniteScroll/constants';
 import BackToTopButton from '../InfiniteScroll/BackToTopButton';
@@ -162,8 +158,8 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
   var _useRowKey = useRowKey(rowKey),
     getRowKey = _useRowKey.getRowKey;
   var allData = dataSourceFull || dataSource;
-  var propsForRowStar = _objectSpread({}, props, {
-    rowStar: _objectSpread({}, rowStar, {
+  var propsForRowStar = _extends({}, props, {
+    rowStar: _extends({}, rowStar, {
       onClick: function onClick(e) {
         e.stopPropagation();
         if (typeof (rowStar == null ? void 0 : rowStar.onClick) === 'function') {
@@ -248,8 +244,8 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
           if (!firstFixedRightFound) {
             firstFixedRightFound = true;
           }
-          return _objectSpread({}, prev, {
-            fixedRight: [].concat(prev.fixedRight, [_objectSpread({}, column, {
+          return _extends({}, prev, {
+            fixedRight: [].concat(prev.fixedRight, [_extends({}, column, {
               fixedFirst: fixedFirst,
               right: right,
               width: width
@@ -259,23 +255,23 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
         if (column.fixed === 'left') {
           cumulativeLeftOffset += width;
           var prevFixedLeft = prev.fixedLeft;
-          var newFixedLeft = prevFixedLeft.length ? [].concat(prevFixedLeft, [_objectSpread({}, prevFixedLeft.pop(), {
+          var newFixedLeft = prevFixedLeft.length ? [].concat(prevFixedLeft, [_extends({}, prevFixedLeft.pop(), {
             fixedFirst: false
-          }), _objectSpread({}, column, {
+          }), _extends({}, column, {
             fixedFirst: true,
             left: left,
             width: width
-          })]) : [].concat(prevFixedLeft, [_objectSpread({}, column, {
+          })]) : [].concat(prevFixedLeft, [_extends({}, column, {
             fixedFirst: true,
             left: left,
             width: width
           })]);
-          return _objectSpread({}, prev, {
+          return _extends({}, prev, {
             fixedLeft: newFixedLeft
           });
         }
-        return _objectSpread({}, prev, {
-          remaining: [].concat(prev.remaining, [_objectSpread({}, column, {
+        return _extends({}, prev, {
+          remaining: [].concat(prev.remaining, [_extends({}, column, {
             width: width
           })])
         });
@@ -302,7 +298,7 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
         rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
       return /*#__PURE__*/React.createElement(S.InnerListElement, _extends({
         ref: innerElementRef,
-        style: _objectSpread({}, style, {
+        style: _extends({}, style, {
           height: Number(style == null ? void 0 : style.height) + infiniteLoaderOffset + "px"
         })
       }, rest));
@@ -423,6 +419,8 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
           horizontalScrollRef.current.scrollTo({
             left: scrollLeft
           });
+          setPingRight(Math.ceil(scrollLeft) < horizontalScrollRef.current.scrollWidth - horizontalScrollRef.current.clientWidth);
+          setPingLeft(Math.floor(scrollLeft) > 0);
         }
       };
       return /*#__PURE__*/React.createElement(S.VirtualListWrapper, {
@@ -464,8 +462,8 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
         var rowChildren = currentRow[childrenColumnName];
         if (key !== undefined && expandable != null && (_expandable$expandedR2 = expandable.expandedRowKeys) != null && _expandable$expandedR2.includes(key) && Array.isArray(rowChildren) && rowChildren.length) {
           return [].concat(result, [currentRow], rowChildren.map(function (child, index) {
-            var _objectSpread2;
-            return _objectSpread({}, child, (_objectSpread2 = {}, _objectSpread2[EXPANDED_ROW_PROPERTY] = true, _objectSpread2.index = index, _objectSpread2));
+            var _extends2;
+            return _extends({}, child, (_extends2 = {}, _extends2[EXPANDED_ROW_PROPERTY] = true, _extends2.index = index, _extends2));
           }));
         }
         return [].concat(result, [currentRow]);
@@ -476,17 +474,32 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
   }, [connectObject, expandable == null ? void 0 : expandable.expandedRowKeys, cellHeight, scroll.y, isSticky, stickyScrollThreshold, infiniteScroll, createItemData, tableWidth, scrollWidth, onItemsRendered, outerElement, listInnerElementType, loading, offsetScroll, getRowKey, infiniteLoaderOffset, childrenColumnName]);
   var columnsSliceStartIndex = Number(!!selection) + Number(!!rowStar);
   var scrollValue = !dataSource || (dataSource == null ? void 0 : dataSource.length) === 0 ? undefined : scroll;
+  var _useState6 = useState(false),
+    pingRight = _useState6[0],
+    setPingRight = _useState6[1];
+  var _useState7 = useState(false),
+    pingLeft = _useState7[0],
+    setPingLeft = _useState7[1];
   var classNames = React.useMemo(function () {
-    var infiniteScrollTableClassName = hasInfiniteScroll ? 'virtual-table-infinite-scroll' : '';
-    var stickyClassName = isSticky ? 'with-sticky-header' : '';
-    return "virtual-table " + className + " " + infiniteScrollTableClassName + " " + stickyClassName;
-  }, [className, hasInfiniteScroll, isSticky]);
+    return classnames('virtual-table', className, {
+      'virtual-table-infinite-scroll': hasInfiniteScroll,
+      'with-sticky-header': isSticky,
+      'ds-table-ping-left': pingLeft,
+      'ds-table-ping-right': pingRight
+    });
+  }, [className, hasInfiniteScroll, isSticky, pingLeft, pingRight]);
   var finalColumns = mergedColumns.slice(columnsSliceStartIndex);
   useEffect(function () {
     // trigger body component onScroll to toggle .ant-table-ping-left / .ant-table-ping-right classes that indicate where columns overflow
     if (customBodyOnScrollRef.current && outerListRef.current && outerListRef.current.parentElement) {
+      var scrollableElement = outerListRef.current.parentElement;
+      var scrollLeft = scrollableElement.scrollLeft,
+        fullWidth = scrollableElement.scrollWidth,
+        clientWidth = scrollableElement.clientWidth;
+      setPingLeft(fullWidth > clientWidth && Math.floor(scrollLeft) > 0);
+      setPingRight(fullWidth > clientWidth && Math.ceil(scrollLeft) < fullWidth - clientWidth);
       customBodyOnScrollRef.current({
-        currentTarget: outerListRef.current.parentElement
+        currentTarget: scrollableElement
       });
     }
   }, [tableWidth, scrollWidth]);

package/dist/VirtualTable/VirtualTable.styles.js

@@ -57,5 +57,5 @@ export var VirtualTableWrapper = styled.div.withConfig({
   displayName: "VirtualTablestyles__VirtualTableWrapper",
   componentId: "aehkhc-7"
 })(["", ""], function (props) {
-  return props.isSticky ? css([".ant-table-title{position:sticky;top:", "px;z-index:99;}.ant-table-title,.ant-table-sticky-header{transition:top 0.3s ease-in-out;}", ";"], props.titleBarTop - props.titleBarHeight, props.isHeaderVisible && css([".ant-table-title{top:", "px;}.ant-table-sticky-header{top:", "px !important;}"], props.titleBarTop, props.titleBarTop + props.titleBarHeight)) : css(["position:relative;"]);
+  return props.isSticky ? css([".ant-table-title{position:sticky;top:", "px;z-index:99;}.ant-table-title,.ant-table-sticky-holder{transition:top 0.3s ease-in-out;}", ";"], props.titleBarTop - props.titleBarHeight, props.isHeaderVisible && css([".ant-table-title{top:", "px;}.ant-table-sticky-holder{top:", "px !important;}"], props.titleBarTop, props.titleBarTop + props.titleBarHeight)) : css(["position:relative;"]);
 });

package/dist/VirtualTable/VirtualTableRow.d.ts

@@ -6,7 +6,7 @@ import { RowStar } from '../hooks/useRowStar';
 export declare const INFINITE_LOADED_ITEM_HEIGHT = 64;
 export interface VirtualTableRowProps<T> {
     data: {
-        dataSource: T[];
+        dataSource: readonly T[];
         cellHeight: number;
         infiniteScroll: InfiniteScrollProps | undefined;
         mergedColumns: any[];

package/dist/VirtualTable/VirtualTableRow.js

@@ -1,8 +1,4 @@
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 React, { memo, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
 import { areEqual } from 'react-window';
@@ -59,13 +55,13 @@ function VirtualTableRow(_ref) {
       top = Number(style.top) + cellHeight + prevDataInfiniteLoaderHeight + "px";
     }
     return infiniteLoaderItemProps && isVisible && /*#__PURE__*/React.createElement(S.RowWrapper, {
-      style: _objectSpread({}, style, {
+      style: _extends({}, style, {
         top: top,
         height: INFINITE_LOADED_ITEM_HEIGHT + "px",
         padding: '16px 24px'
       })
     }, /*#__PURE__*/React.createElement(InfiniteLoaderItem, {
-      infiniteScroll: _objectSpread({}, infiniteScroll, {}, infiniteLoaderItemProps),
+      infiniteScroll: _extends({}, infiniteScroll, infiniteLoaderItemProps),
       position: position
     }));
   }, [cellHeight, dataSource.length, index, infiniteScroll, style]);
@@ -74,7 +70,7 @@ function VirtualTableRow(_ref) {
     className: classNames('virtual-table-row', {
       'ds-expanded-row': rowData[EXPANDED_ROW_PROPERTY]
     }),
-    style: _objectSpread({}, style, {
+    style: _extends({}, style, {
       top: top
     }),
     onClick: function onClick(event) {
@@ -103,7 +99,7 @@ function VirtualTableRow(_ref) {
       minWidth: calculateToPixelsIfDefined(column == null ? void 0 : column.minWidth),
       width: column.width,
       maxWidth: calculateToPixelsIfDefined(column == null ? void 0 : column.maxWidth)
-    }, renderColumn(column, rowData, columnIndex));
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, renderColumn(column, rowData, columnIndex)));
   })), infiniteLoader('BOTTOM'));
 }
 export default memo(VirtualTableRow, areEqual);

package/dist/hooks/useBulkSelection/useBulkSelection.js

@@ -1,8 +1,4 @@
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 { useCallback, useMemo } from 'react';
 import { useRowKey } from '../useRowKey';
 import { isRecordSelectable } from '../../utils';
@@ -63,7 +59,7 @@ export var useBulkSelectionCount = function useBulkSelectionCount(_ref) {
       };
     }, initialValue);
   }, [childrenColumnName, dataSource, getRowKey, getSelectableChildren, selection]);
-  return _objectSpread({}, result, {
+  return _extends({}, result, {
     allRecordsCount: dataSource.length
   });
 };

package/dist/hooks/useRowStar/useRowStar.js

@@ -10,7 +10,8 @@ var createRowStarColumn = function createRowStarColumn(_ref) {
     var locale = _ref2.locale,
       rowStar = _ref2.rowStar,
       selection = _ref2.selection,
-      getRowKey = _ref2.getRowKey;
+      getRowKey = _ref2.getRowKey,
+      loading = _ref2.loading;
     return {
       key: '_row-star',
       className: ((rowStar == null ? void 0 : rowStar.className) || '') + " ds-table-star-column",
@@ -18,7 +19,7 @@ var createRowStarColumn = function createRowStarColumn(_ref) {
       render: (rowStar == null ? void 0 : rowStar.renderCell) || function (value, record) {
         var expandedChild = record.expandedChild;
         var keyString = String(getRowKey(record));
-        if (expandedChild && rowStar != null && rowStar.disableForExpandedRows) return null;
+        if (loading || expandedChild && rowStar != null && rowStar.disableForExpandedRows) return null;
         return /*#__PURE__*/React.createElement(Tooltip, {
           title: locale == null ? void 0 : locale.starRowTooltip
         }, /*#__PURE__*/React.createElement(Button.Star, {

package/dist/modules.d.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';