@synerise/ds-table 1.9.10 → 1.9.12

package/dist/VirtualTable/VirtualTable.js

@@ -1,193 +1,179 @@
-var _excluded = ["style"];
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import classnames from 'classnames';
-import compact from 'lodash.compact';
-import ResizeObserver from 'rc-resize-observer';
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { useIntl } from 'react-intl';
-import { FixedSizeList as List } from 'react-window';
-import Scrollbar from '@synerise/ds-scrollbar';
-import { useElementInView } from '@synerise/ds-utils';
-import BackToTopButton from '../InfiniteScroll/BackToTopButton';
-import OuterListElement from '../InfiniteScroll/OuterListElement';
-import { infiniteLoaderItemHeight } from '../InfiniteScroll/constants';
-import { RowSelectionColumn } from '../RowSelection';
-import DSTable from '../Table';
-import { useRowKey } from '../hooks/useRowKey';
-import { useRowStar } from '../hooks/useRowStar';
-import { calculateColumnWidths, useTableLocale } from '../utils';
-import { getChildrenColumnName } from '../utils/getChildrenColumnName';
-import * as S from './VirtualTable.styles';
-import VirtualTableRow, { INFINITE_LOADED_ITEM_HEIGHT } from './VirtualTableRow';
-import { EXPANDED_ROW_PROPERTY, HEADER_ROW_HEIGHT, LOAD_DATA_OFFSET } from './constants';
-var relativeInlineStyle = {
-  position: 'relative'
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import compact from "lodash.compact";
+import ResizeObserver from "rc-resize-observer";
+import React, { forwardRef, useRef, useState, useCallback, useEffect, useImperativeHandle, useMemo } from "react";
+import { useIntl } from "react-intl";
+import { FixedSizeList } from "react-window";
+import Scrollbar from "@synerise/ds-scrollbar";
+import { useElementInView } from "@synerise/ds-utils";
+import { BackToTopButton } from "../InfiniteScroll/BackToTopButton.js";
+import OuterListElement from "../InfiniteScroll/OuterListElement.js";
+import { infiniteLoaderItemHeight } from "../InfiniteScroll/constants.js";
+import { RowSelectionColumn } from "../RowSelection/RowSelectionColumn.js";
+import DSTable from "../Table.js";
+import { useRowKey } from "../hooks/useRowKey/useRowKey.js";
+import { useRowStar } from "../hooks/useRowStar/useRowStar.js";
+import { calculateColumnWidths } from "../utils/calculateColumnWidths.js";
+import "unit-to-px";
+import { getChildrenColumnName } from "../utils/getChildrenColumnName.js";
+import "../Table.styles.js";
+import "@synerise/ds-skeleton";
+import "uuid";
+import "styled-components";
+import "@synerise/ds-typography";
+import "ramda";
+import { useTableLocale } from "../utils/locale.js";
+import { InnerListElement, VirtualTableWrapper, StickyScrollbarWrapper, StickyScrollbarContent, VirtualListWrapper } from "./VirtualTable.styles.js";
+import VirtualTableRow, { INFINITE_LOADED_ITEM_HEIGHT } from "./VirtualTableRow.js";
+import { EXPANDED_ROW_PROPERTY, HEADER_ROW_HEIGHT, LOAD_DATA_OFFSET } from "./constants.js";
+const relativeInlineStyle = {
+  position: "relative"
 };
-var VirtualTable = function VirtualTable(props, forwardedRef) {
-  var _infiniteScroll$prevP2, _infiniteScroll$prevP4;
-  var _props$columns = props.columns,
-    columns = _props$columns === void 0 ? [] : _props$columns,
-    scroll = props.scroll,
-    className = props.className,
-    _props$cellHeight = props.cellHeight,
-    cellHeight = _props$cellHeight === void 0 ? 52 : _props$cellHeight,
-    infiniteScroll = props.infiniteScroll,
-    selection = props.selection,
-    onRowClick = props.onRowClick,
-    rowKey = props.rowKey,
-    rowStar = props.rowStar,
-    _props$initialWidth = props.initialWidth,
-    initialWidth = _props$initialWidth === void 0 ? 0 : _props$initialWidth,
-    _props$dataSource = props.dataSource,
-    dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
-    dataSourceFull = props.dataSourceFull,
-    expandable = props.expandable,
-    locale = props.locale,
-    loading = props.loading,
-    sticky = props.sticky,
-    getRowTooltipProps = props.getRowTooltipProps,
-    onListRefChange = props.onListRefChange,
-    onItemsRendered = props.onItemsRendered,
-    onScrollToRecordIndex = props.onScrollToRecordIndex;
-  var intl = useIntl();
-  var tableLocale = useTableLocale(intl, locale);
-  var listRef = useRef(null);
-  var listScrollTopRef = useRef(0);
-  var outerListRef = useRef(null);
-  var containerRef = useRef(null);
-  var horizontalScrollRef = useRef(null);
-  var customBodyOnScrollRef = useRef();
-  var _useState = useState(false),
-    isHeaderVisible = _useState[0],
-    setIsHeaderVisible = _useState[1];
-  var _useState2 = useState(null),
-    firstItem = _useState2[0],
-    setFirstItem = _useState2[1];
-  var childrenColumnName = getChildrenColumnName(expandable == null ? void 0 : expandable.childrenColumnName);
-  var hasInfiniteScroll = Boolean(infiniteScroll);
-  var isSticky = Boolean(sticky);
-  var stickyScrollThreshold = sticky && sticky.scrollThreshold;
-  var dataSourceEmpty = dataSource.length === 0;
-  var updateFirstItem = useCallback(function (findFirstItem) {
-    var prevFirstItemIndex = dataSource.findIndex(findFirstItem);
+const VirtualTable = (props, forwardedRef) => {
+  const {
+    columns = [],
+    scroll,
+    className,
+    cellHeight = 52,
+    infiniteScroll,
+    selection,
+    onRowClick,
+    rowKey,
+    rowStar,
+    initialWidth = 0,
+    dataSource = [],
+    dataSourceFull,
+    expandable,
+    locale,
+    loading,
+    sticky,
+    getRowTooltipProps,
+    onListRefChange,
+    onItemsRendered,
+    onScrollToRecordIndex
+  } = props;
+  const intl = useIntl();
+  const tableLocale = useTableLocale(intl, locale);
+  const listRef = useRef(null);
+  const listScrollTopRef = useRef(0);
+  const outerListRef = useRef(null);
+  const containerRef = useRef(null);
+  const horizontalScrollRef = useRef(null);
+  const customBodyOnScrollRef = useRef();
+  const [isHeaderVisible, setIsHeaderVisible] = useState(false);
+  const [firstItem, setFirstItem] = useState(null);
+  const childrenColumnName = getChildrenColumnName(expandable?.childrenColumnName);
+  const hasInfiniteScroll = Boolean(infiniteScroll);
+  const isSticky = Boolean(sticky);
+  const stickyScrollThreshold = sticky && sticky.scrollThreshold;
+  const dataSourceEmpty = dataSource.length === 0;
+  const updateFirstItem = useCallback((findFirstItem) => {
+    const prevFirstItemIndex = dataSource.findIndex(findFirstItem);
     setFirstItem(dataSource[0]);
-    if (prevFirstItemIndex >= 0 && listRef != null && listRef.current) {
+    if (prevFirstItemIndex >= 0 && listRef?.current) {
       if (onScrollToRecordIndex) {
-        onScrollToRecordIndex(prevFirstItemIndex, function () {
-          (listRef == null ? void 0 : listRef.current) && listRef.current.scrollToItem(prevFirstItemIndex, 'start');
+        onScrollToRecordIndex(prevFirstItemIndex, () => {
+          listRef?.current && listRef.current.scrollToItem(prevFirstItemIndex, "start");
         });
       } else {
-        listRef.current.scrollToItem(prevFirstItemIndex, 'start');
+        listRef.current.scrollToItem(prevFirstItemIndex, "start");
       }
     }
   }, [dataSource, setFirstItem, onScrollToRecordIndex]);
-  useEffect(function () {
+  useEffect(() => {
     if (dataSourceEmpty) {
       setIsHeaderVisible(false);
     }
   }, [dataSourceEmpty]);
-  useEffect(function () {
+  useEffect(() => {
     try {
-      if (!(infiniteScroll != null && infiniteScroll.prevPage) || dataSourceEmpty) {
+      if (!infiniteScroll?.prevPage || dataSourceEmpty) {
         return;
       }
       if (firstItem === null) {
         setFirstItem(dataSource[0]);
         return;
       }
-      if (rowKey === undefined) {
-        var firstItemStringified = JSON.stringify(firstItem);
+      if (rowKey === void 0) {
+        const firstItemStringified = JSON.stringify(firstItem);
         if (JSON.stringify(dataSource[0]) !== firstItemStringified) {
-          updateFirstItem(function (item) {
-            return JSON.stringify(item) === firstItemStringified;
-          });
+          updateFirstItem((item) => JSON.stringify(item) === firstItemStringified);
         }
         return;
       }
-      if (typeof rowKey === 'string') {
+      if (typeof rowKey === "string") {
         if (dataSource[0][rowKey] !== firstItem[rowKey]) {
-          updateFirstItem(function (item) {
-            return item[rowKey] === firstItem[rowKey];
-          });
+          updateFirstItem((item) => item[rowKey] === firstItem[rowKey]);
         }
         return;
       }
-      if (typeof rowKey === 'function') {
+      if (typeof rowKey === "function") {
         if (rowKey(dataSource[0]) !== rowKey(firstItem)) {
-          updateFirstItem(function (item) {
-            return rowKey(item) === rowKey(firstItem);
-          });
+          updateFirstItem((item) => rowKey(item) === rowKey(firstItem));
         }
       }
     } catch (_error) {
-      throw new Error('Cannot find firs item');
+      throw new Error("Cannot find firs item");
     }
   }, [dataSource, dataSourceEmpty, rowKey, firstItem, infiniteScroll, updateFirstItem]);
-  useEffect(function () {
-    var _infiniteScroll$prevP;
-    if (listRef.current && infiniteScroll != null && (_infiniteScroll$prevP = infiniteScroll.prevPage) != null && _infiniteScroll$prevP.hasMore) {
+  useEffect(() => {
+    if (listRef.current && infiniteScroll?.prevPage?.hasMore) {
       listRef.current.scrollTo(INFINITE_LOADED_ITEM_HEIGHT);
     }
-  }, [listRef, infiniteScroll == null || (_infiniteScroll$prevP2 = infiniteScroll.prevPage) == null ? void 0 : _infiniteScroll$prevP2.hasMore]);
-  useImperativeHandle(forwardedRef, function () {
-    return {
-      virtualListRef: listRef,
-      outerListRef: outerListRef,
-      horizontalScrollRef: horizontalScrollRef,
-      scrollTo: scrollTo,
-      scrollToTop: scrollToTop
-    };
-  });
-  var _useState3 = useState(initialWidth),
-    tableWidth = _useState3[0],
-    setTableWidth = _useState3[1];
-  var _useState4 = useState(initialWidth),
-    scrollWidth = _useState4[0],
-    setScrollWidth = _useState4[1];
-  var _useState5 = useState(0),
-    titleBarHeight = _useState5[0],
-    setTitleBarHeight = _useState5[1];
-  var _useRowStar = useRowStar((rowStar == null ? void 0 : rowStar.starredRowKeys) || []),
-    getRowStarColumn = _useRowStar.getRowStarColumn;
-
-  // deprecated, verify if not used and remove
-  useEffect(function () {
+  }, [listRef, infiniteScroll?.prevPage?.hasMore]);
+  useImperativeHandle(forwardedRef, () => ({
+    virtualListRef: listRef,
+    outerListRef,
+    horizontalScrollRef,
+    scrollTo,
+    scrollToTop
+  }));
+  const [tableWidth, setTableWidth] = useState(initialWidth);
+  const [scrollWidth, setScrollWidth] = useState(initialWidth);
+  const [titleBarHeight, setTitleBarHeight] = useState(0);
+  const {
+    getRowStarColumn
+  } = useRowStar(rowStar?.starredRowKeys || []);
+  useEffect(() => {
     listRef.current && onListRefChange && onListRefChange(listRef);
   });
-  var _useRowKey = useRowKey(rowKey),
-    getRowKey = _useRowKey.getRowKey;
-  var allData = dataSourceFull || dataSource;
-  var propsForRowStar = _extends({}, props, {
-    rowStar: _extends({}, rowStar, {
-      onClick: function onClick(e) {
+  const {
+    getRowKey
+  } = useRowKey(rowKey);
+  const allData = dataSourceFull || dataSource;
+  const propsForRowStar = {
+    ...props,
+    rowStar: {
+      ...rowStar,
+      onClick: (e) => {
         e.stopPropagation();
-        if (typeof (rowStar == null ? void 0 : rowStar.onClick) === 'function') {
+        if (typeof rowStar?.onClick === "function") {
           rowStar.onClick(e);
         }
       }
-    }),
-    getRowKey: getRowKey,
+    },
+    getRowKey,
     locale: tableLocale
-  });
-  var rowStarColumn = getRowStarColumn(propsForRowStar);
-  var selectedRecords = useMemo(function () {
+  };
+  const rowStarColumn = getRowStarColumn(propsForRowStar);
+  const selectedRecords = useMemo(() => {
     if (selection) {
-      var _ref = selection,
-        _ref$selectedRowKeys = _ref.selectedRowKeys,
-        selectedRowKeys = _ref$selectedRowKeys === void 0 ? [] : _ref$selectedRowKeys;
-      var selectedRows = [];
-      allData.forEach(function (row) {
-        var key = getRowKey(row);
-        var rowChildren = row[childrenColumnName];
+      const {
+        selectedRowKeys = []
+      } = selection;
+      let selectedRows = [];
+      allData.forEach((row) => {
+        const key = getRowKey(row);
+        const rowChildren = row[childrenColumnName];
         if (key && selectedRowKeys.indexOf(key) >= 0) {
-          selectedRows = [].concat(selectedRows, [row]);
+          selectedRows = [...selectedRows, row];
         }
-        if (rowChildren !== undefined && Array.isArray(rowChildren)) {
-          rowChildren.forEach(function (child) {
-            var childKey = getRowKey(child);
+        if (rowChildren !== void 0 && Array.isArray(rowChildren)) {
+          rowChildren.forEach((child) => {
+            const childKey = getRowKey(child);
             if (childKey && selectedRowKeys.indexOf(childKey) >= 0) {
-              selectedRows = [].concat(selectedRows, [child]);
+              selectedRows = [...selectedRows, child];
             }
           });
         }
@@ -196,158 +182,143 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
     }
     return [];
   }, [allData, childrenColumnName, getRowKey, selection]);
-  var renderRowSelection = useCallback(function (key, record) {
-    var _selection$globalSele;
-    var _ref2 = selection,
-      selectedRowKeys = _ref2.selectedRowKeys,
-      limit = _ref2.limit,
-      independentSelectionExpandedRows = _ref2.independentSelectionExpandedRows,
-      onChange = _ref2.onChange,
-      checkRowSelectionStatus = _ref2.checkRowSelectionStatus;
-    var handleChange = function handleChange(keys, records) {
+  const renderRowSelection = useCallback((key, record) => {
+    const {
+      selectedRowKeys,
+      limit,
+      independentSelectionExpandedRows,
+      onChange,
+      checkRowSelectionStatus
+    } = selection;
+    const handleChange = (keys, records) => {
       if (isSticky && listScrollTopRef.current) {
         setIsHeaderVisible(true);
       }
       onChange(keys, records);
     };
-    return /*#__PURE__*/React.createElement(RowSelectionColumn, {
-      rowKey: rowKey,
-      record: record,
-      limit: limit,
-      selectedRowKeys: selectedRowKeys,
-      independentSelectionExpandedRows: independentSelectionExpandedRows,
-      onChange: handleChange,
-      selectedRecords: selectedRecords,
-      isGlobalAllSelected: selection == null || (_selection$globalSele = selection.globalSelection) == null ? void 0 : _selection$globalSele.isSelected,
-      tableLocale: locale,
-      getSelectionTooltipProps: selection == null ? void 0 : selection.getSelectionTooltipProps,
-      checkRowSelectionStatus: checkRowSelectionStatus,
-      childrenColumnName: childrenColumnName
-    });
+    return /* @__PURE__ */ jsx(RowSelectionColumn, { rowKey, record, limit, selectedRowKeys, independentSelectionExpandedRows, onChange: handleChange, selectedRecords, isGlobalAllSelected: selection?.globalSelection?.isSelected, tableLocale: locale, getSelectionTooltipProps: selection?.getSelectionTooltipProps, checkRowSelectionStatus, childrenColumnName });
   }, [isSticky, locale, rowKey, selectedRecords, selection, childrenColumnName]);
-  var virtualColumns = useMemo(function () {
+  const virtualColumns = useMemo(() => {
     return compact([!!selection && {
       width: 64,
-      key: 'key',
-      dataIndex: 'key',
+      key: "key",
+      dataIndex: "key",
       render: renderRowSelection
-    }, !!rowStar && rowStarColumn].concat(columns));
+    }, !!rowStar && rowStarColumn, ...columns]);
   }, [selection, renderRowSelection, rowStar, rowStarColumn, columns]);
-  var mergedColumns = useMemo(function () {
-    var columnWidths = calculateColumnWidths(virtualColumns, tableWidth);
-    var cumulativeRightOffset = 0;
-    var cumulativeLeftOffset = 0;
-    var firstFixedRightFound = false;
-    var _virtualColumns$reduc = virtualColumns.reduce(function (prev, column, index) {
-        var left = cumulativeLeftOffset;
-        var right = cumulativeRightOffset;
-        var width = columnWidths[index];
-        if (column.fixed === 'right') {
-          cumulativeRightOffset += width;
-          var fixedFirst = !firstFixedRightFound;
-          if (!firstFixedRightFound) {
-            firstFixedRightFound = true;
-          }
-          return _extends({}, prev, {
-            fixedRight: [].concat(prev.fixedRight, [_extends({}, column, {
-              fixedFirst: fixedFirst,
-              right: right,
-              width: width
-            })])
-          });
-        }
-        if (column.fixed === 'left') {
-          cumulativeLeftOffset += width;
-          var prevFixedLeft = prev.fixedLeft;
-          var newFixedLeft = prevFixedLeft.length ? [].concat(prevFixedLeft, [_extends({}, prevFixedLeft.pop(), {
-            fixedFirst: false
-          }), _extends({}, column, {
-            fixedFirst: true,
-            left: left,
-            width: width
-          })]) : [].concat(prevFixedLeft, [_extends({}, column, {
-            fixedFirst: true,
-            left: left,
-            width: width
-          })]);
-          return _extends({}, prev, {
-            fixedLeft: newFixedLeft
-          });
+  const mergedColumns = useMemo(() => {
+    const columnWidths = calculateColumnWidths(virtualColumns, tableWidth);
+    let cumulativeRightOffset = 0;
+    let cumulativeLeftOffset = 0;
+    let firstFixedRightFound = false;
+    const {
+      fixedLeft,
+      remaining,
+      fixedRight
+    } = virtualColumns.reduce((prev, column, index) => {
+      const left = cumulativeLeftOffset;
+      const right = cumulativeRightOffset;
+      const width = columnWidths[index];
+      if (column.fixed === "right") {
+        cumulativeRightOffset += width;
+        const fixedFirst = !firstFixedRightFound;
+        if (!firstFixedRightFound) {
+          firstFixedRightFound = true;
         }
-        return _extends({}, prev, {
-          remaining: [].concat(prev.remaining, [_extends({}, column, {
-            width: width
-          })])
-        });
-      }, {
-        fixedLeft: [],
-        fixedRight: [],
-        remaining: []
-      }),
-      fixedLeft = _virtualColumns$reduc.fixedLeft,
-      remaining = _virtualColumns$reduc.remaining,
-      fixedRight = _virtualColumns$reduc.fixedRight;
-    return [].concat(fixedLeft, remaining, fixedRight);
+        return {
+          ...prev,
+          fixedRight: [...prev.fixedRight, {
+            ...column,
+            fixedFirst,
+            right,
+            width
+          }]
+        };
+      }
+      if (column.fixed === "left") {
+        cumulativeLeftOffset += width;
+        const {
+          fixedLeft: prevFixedLeft
+        } = prev;
+        const newFixedLeft = prevFixedLeft.length ? [...prevFixedLeft, {
+          ...prevFixedLeft.pop(),
+          fixedFirst: false
+        }, {
+          ...column,
+          fixedFirst: true,
+          left,
+          width
+        }] : [...prevFixedLeft, {
+          ...column,
+          fixedFirst: true,
+          left,
+          width
+        }];
+        return {
+          ...prev,
+          fixedLeft: newFixedLeft
+        };
+      }
+      return {
+        ...prev,
+        remaining: [...prev.remaining, {
+          ...column,
+          width
+        }]
+      };
+    }, {
+      fixedLeft: [],
+      fixedRight: [],
+      remaining: []
+    });
+    return [...fixedLeft, ...remaining, ...fixedRight];
   }, [tableWidth, virtualColumns]);
-  var infiniteLoaderOffset = useMemo(function () {
-    var _infiniteScroll$prevP3;
-    if (isSticky && infiniteScroll != null && (_infiniteScroll$prevP3 = infiniteScroll.prevPage) != null && _infiniteScroll$prevP3.hasMore) {
+  const infiniteLoaderOffset = useMemo(() => {
+    if (isSticky && infiniteScroll?.prevPage?.hasMore) {
       return infiniteLoaderItemHeight * 2;
     }
     return infiniteLoaderItemHeight;
-  }, [isSticky, infiniteScroll == null || (_infiniteScroll$prevP4 = infiniteScroll.prevPage) == null ? void 0 : _infiniteScroll$prevP4.hasMore]);
-  var listInnerElementType = useMemo(function () {
-    return /*#__PURE__*/forwardRef(function (_ref3, innerElementRef) {
-      var style = _ref3.style,
-        rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
-      return /*#__PURE__*/React.createElement(S.InnerListElement, _extends({
-        ref: innerElementRef,
-        style: _extends({}, style, {
-          height: Number(style == null ? void 0 : style.height) + infiniteLoaderOffset + "px"
-        })
-      }, rest));
-    });
-  }, [infiniteLoaderOffset]);
-  var scrollTo = useCallback(function (top) {
+  }, [isSticky, infiniteScroll?.prevPage?.hasMore]);
+  const listInnerElementType = useMemo(() => forwardRef(({
+    style,
+    ...rest
+  }, innerElementRef) => /* @__PURE__ */ jsx(InnerListElement, { ref: innerElementRef, style: {
+    ...style,
+    height: `${Number(style?.height) + infiniteLoaderOffset}px`
+  }, ...rest })), [infiniteLoaderOffset]);
+  const scrollTo = useCallback((top) => {
     if (!listRef.current) {
       return;
     }
     listRef.current.scrollTo(top);
   }, []);
-  var scrollToTop = function scrollToTop() {
+  const scrollToTop = () => {
     scrollTo(0);
   };
-  var outerElement = useMemo(function () {
-    return OuterListElement(containerRef, isSticky);
-  }, [isSticky]);
-  var createItemData = useCallback(function (data, defaultTableProps
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ) {
-    return {
-      mergedColumns: mergedColumns,
-      selection: selection,
-      rowStar: rowStar,
-      onRowClick: onRowClick,
-      getRowTooltipProps: getRowTooltipProps,
-      dataSource: data,
-      infiniteScroll: infiniteScroll,
-      cellHeight: cellHeight,
-      defaultTableProps: defaultTableProps
-    };
-  }, [mergedColumns, getRowTooltipProps, selection, rowStar, onRowClick, infiniteScroll, cellHeight]);
-  var offsetScroll = sticky && sticky !== true ? sticky.offsetScroll : 0;
-  var offsetStickyHeader = sticky && sticky !== true ? sticky.offsetHeader : 0;
-  var connectObject = useMemo(function () {
-    var obj = {};
-    Object.defineProperty(obj, 'scrollLeft', {
-      get: function get() {
+  const outerElement = useMemo(() => OuterListElement(containerRef, isSticky), [isSticky]);
+  const createItemData = useCallback((data, defaultTableProps) => ({
+    mergedColumns,
+    selection,
+    rowStar,
+    onRowClick,
+    getRowTooltipProps,
+    dataSource: data,
+    infiniteScroll,
+    cellHeight,
+    defaultTableProps
+  }), [mergedColumns, getRowTooltipProps, selection, rowStar, onRowClick, infiniteScroll, cellHeight]);
+  const offsetScroll = sticky && sticky !== true ? sticky.offsetScroll : 0;
+  const offsetStickyHeader = sticky && sticky !== true ? sticky.offsetHeader : 0;
+  const connectObject = useMemo(() => {
+    const obj = {};
+    Object.defineProperty(obj, "scrollLeft", {
+      get: () => {
         if (outerListRef.current) {
-          var _outerListRef$current;
-          return (_outerListRef$current = outerListRef.current) == null ? void 0 : _outerListRef$current.scrollLeft;
+          return outerListRef.current?.scrollLeft;
         }
         return null;
       },
-      set: function set(scrollLeft) {
+      set: (scrollLeft) => {
         if (outerListRef.current) {
           outerListRef.current.scrollTo({
             left: scrollLeft
@@ -357,7 +328,7 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
     });
     return obj;
   }, []);
-  var handleStickyScrollbarScroll = useCallback(function (event) {
+  const handleStickyScrollbarScroll = useCallback((event) => {
     if (isSticky && customBodyOnScrollRef.current) {
       customBodyOnScrollRef.current({
         scrollLeft: event.currentTarget.scrollLeft
@@ -366,58 +337,59 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
       connectObject.scrollLeft = event.currentTarget.scrollLeft;
     }
   }, [connectObject, isSticky]);
-  var renderBody = useCallback(function (rawData, meta, defaultTableProps) {
-    var _expandable$expandedR;
-    var onScroll = meta.onScroll,
-      ref = meta.ref;
+  const renderBody = useCallback((rawData, meta, defaultTableProps) => {
+    const {
+      onScroll,
+      ref
+    } = meta;
     customBodyOnScrollRef.current = onScroll;
-    // sticky header feature does NOT work without the ref assigned to a html node in the document.
-    // without sticky header the ref needs to point to the connect proxy in order for the header and body components to scroll in sync
-    // this gets resolved in antd 5.9.0, when antd supports virtualisation out of the box (but not infinite loader)
     if (!isSticky) {
-      // @ts-expect-error Property 'current' does not exist on type '(instance: ScrollProxyType | null) => void
       ref.current = connectObject;
     }
-    var renderVirtualList = function renderVirtualList(data) {
-      var _infiniteScroll$nextP, _infiniteScroll$prevP5;
-      var listHeight = data.length * cellHeight - scroll.y + infiniteLoaderOffset;
-      var listMaxScroll = stickyScrollThreshold && infiniteScroll != null && infiniteScroll.maxScroll ? infiniteScroll.maxScroll - stickyScrollThreshold : listHeight;
-      var handleListScroll = function handleListScroll(_ref4) {
-        var scrollOffset = _ref4.scrollOffset,
-          scrollDirection = _ref4.scrollDirection;
+    const renderVirtualList = (data) => {
+      const listHeight = data.length * cellHeight - scroll.y + infiniteLoaderOffset;
+      const listMaxScroll = stickyScrollThreshold && infiniteScroll?.maxScroll ? infiniteScroll.maxScroll - stickyScrollThreshold : listHeight;
+      const handleListScroll = ({
+        scrollOffset,
+        scrollDirection
+      }) => {
         if (!infiniteScroll || loading || listMaxScroll <= 0) {
           return;
         }
-        var onScrollTopReach = infiniteScroll.onScrollTopReach,
-          isLoading = infiniteScroll.isLoading,
-          onScrollEndReach = infiniteScroll.onScrollEndReach;
-        var roundedOffset = Math.ceil(scrollOffset);
+        const {
+          onScrollTopReach,
+          isLoading,
+          onScrollEndReach
+        } = infiniteScroll;
+        const roundedOffset = Math.ceil(scrollOffset);
         listScrollTopRef.current = roundedOffset;
-        if (isSticky && scrollDirection === 'forward' && containerRef.current) {
+        if (isSticky && scrollDirection === "forward" && containerRef.current) {
           setIsHeaderVisible(false);
         }
-        if (isSticky && scrollDirection === 'backward' && containerRef.current) {
+        if (isSticky && scrollDirection === "backward" && containerRef.current) {
           setIsHeaderVisible(roundedOffset > 0);
         }
         if (isLoading) {
           return;
         }
-        if (scrollDirection === 'forward' && roundedOffset >= listMaxScroll - LOAD_DATA_OFFSET && typeof onScrollEndReach === 'function') {
+        if (scrollDirection === "forward" && roundedOffset >= listMaxScroll - LOAD_DATA_OFFSET && typeof onScrollEndReach === "function") {
           onScrollEndReach();
-        } else if (scrollDirection === 'backward' && (offsetScroll && roundedOffset <= offsetScroll + LOAD_DATA_OFFSET || roundedOffset < LOAD_DATA_OFFSET) && typeof onScrollTopReach === 'function') {
+        } else if (scrollDirection === "backward" && (offsetScroll && roundedOffset <= offsetScroll + LOAD_DATA_OFFSET || roundedOffset < LOAD_DATA_OFFSET) && typeof onScrollTopReach === "function") {
           onScrollTopReach();
         }
       };
-      var itemData = createItemData(data, defaultTableProps);
-      var scrollableHeight = isSticky ? scroll.y - HEADER_ROW_HEIGHT : scroll.y;
-      if (infiniteScroll != null && (_infiniteScroll$nextP = infiniteScroll.nextPage) != null && _infiniteScroll$nextP.hasMore && (_infiniteScroll$prevP5 = infiniteScroll.prevPage) != null && _infiniteScroll$prevP5.hasMore) {
+      const itemData = createItemData(data, defaultTableProps);
+      let scrollableHeight = isSticky ? scroll.y - HEADER_ROW_HEIGHT : scroll.y;
+      if (infiniteScroll?.nextPage?.hasMore && infiniteScroll.prevPage?.hasMore) {
         scrollableHeight += cellHeight;
       }
-      var handleBodyScroll = function handleBodyScroll(event) {
-        var scrollLeft = event.currentTarget.scrollLeft;
+      const handleBodyScroll = (event) => {
+        const {
+          scrollLeft
+        } = event.currentTarget;
         if (isSticky) {
-          var info = {
-            scrollLeft: scrollLeft,
+          const info = {
+            scrollLeft,
             currentTarget: event.currentTarget
           };
           onScroll(info);
@@ -430,79 +402,60 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
           setPingLeft(Math.floor(scrollLeft) > 0);
         }
       };
-      return /*#__PURE__*/React.createElement(S.VirtualListWrapper, {
-        listWidth: tableWidth,
-        "data-testid": "virtual-list-wrapper",
-        isSticky: isSticky,
-        listHeight: listHeight + HEADER_ROW_HEIGHT,
-        onScroll: handleBodyScroll
-        // @ts-expect-error Type 'RefObject<ScrollProxyType>' is not assignable to type 'RefObject<HTMLDivElement>'
-        ,
-        ref: isSticky ? ref : undefined
-      }, /*#__PURE__*/React.createElement(List, {
-        ref: listRef,
-        key: "virtual-list",
-        onScroll: handleListScroll,
-        onItemsRendered: onItemsRendered,
-        className: "virtual-grid",
-        height: scrollableHeight,
-        layout: "vertical",
-        itemCount: data.length,
-        itemSize: cellHeight,
-        width: scrollWidth,
-        itemData: itemData,
-        itemKey: function itemKey(index) {
-          var key = getRowKey(data[index]);
-          // @ts-expect-error The left-hand side of an 'instanceof' expression must be of type 'any', an object type or a type parameter.
-          return String(key instanceof String ? key.toLowerCase() : key);
-        },
-        outerElementType: outerElement,
-        overscanCount: 5,
-        outerRef: outerListRef,
-        innerElementType: infiniteScroll && listInnerElementType
-      }, VirtualTableRow));
+      return /* @__PURE__ */ jsx(
+        VirtualListWrapper,
+        {
+          listWidth: tableWidth,
+          "data-testid": "virtual-list-wrapper",
+          isSticky,
+          listHeight: listHeight + HEADER_ROW_HEIGHT,
+          onScroll: handleBodyScroll,
+          ref: isSticky ? ref : void 0,
+          children: /* @__PURE__ */ jsx(FixedSizeList, { ref: listRef, onScroll: handleListScroll, onItemsRendered, className: "virtual-grid", height: scrollableHeight, layout: "vertical", itemCount: data.length, itemSize: cellHeight, width: scrollWidth, itemData, itemKey: (index) => {
+            const key = getRowKey(data[index]);
+            return String(key instanceof String ? key.toLowerCase() : key);
+          }, outerElementType: outerElement, overscanCount: 5, outerRef: outerListRef, innerElementType: infiniteScroll && listInnerElementType, children: VirtualTableRow }, "virtual-list")
+        }
+      );
     };
-    if (expandable != null && (_expandable$expandedR = expandable.expandedRowKeys) != null && _expandable$expandedR.length) {
-      var expandedRows = rawData.reduce(function (result, currentRow) {
-        var _expandable$expandedR2;
-        var key = getRowKey(currentRow);
-        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 _extends2;
-            return _extends({}, child, (_extends2 = {}, _extends2[EXPANDED_ROW_PROPERTY] = true, _extends2.index = index, _extends2));
-          }));
+    if (expandable?.expandedRowKeys?.length) {
+      const expandedRows = rawData.reduce((result, currentRow) => {
+        const key = getRowKey(currentRow);
+        const rowChildren = currentRow[childrenColumnName];
+        if (key !== void 0 && expandable?.expandedRowKeys?.includes(key) && Array.isArray(rowChildren) && rowChildren.length) {
+          return [...result, currentRow, ...rowChildren.map((child, index) => ({
+            ...child,
+            [EXPANDED_ROW_PROPERTY]: true,
+            index
+          }))];
         }
-        return [].concat(result, [currentRow]);
+        return [...result, currentRow];
       }, []);
       return renderVirtualList(expandedRows);
     }
     return renderVirtualList(rawData);
-  }, [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 () {
-    return classnames('virtual-table', className, {
-      'virtual-table-infinite-scroll': hasInfiniteScroll,
-      'with-sticky-header': isSticky,
-      'ds-table-ping-left': pingLeft,
-      'ds-table-ping-right': pingRight
+  }, [connectObject, expandable?.expandedRowKeys, cellHeight, scroll.y, isSticky, stickyScrollThreshold, infiniteScroll, createItemData, tableWidth, scrollWidth, onItemsRendered, outerElement, listInnerElementType, loading, offsetScroll, getRowKey, infiniteLoaderOffset, childrenColumnName]);
+  const columnsSliceStartIndex = Number(!!selection) + Number(!!rowStar);
+  const scrollValue = !dataSource || dataSource?.length === 0 ? void 0 : scroll;
+  const [pingRight, setPingRight] = useState(false);
+  const [pingLeft, setPingLeft] = useState(false);
+  const classNames$1 = React.useMemo(() => {
+    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
+  const finalColumns = mergedColumns.slice(columnsSliceStartIndex);
+  useEffect(() => {
     if (customBodyOnScrollRef.current && outerListRef.current && outerListRef.current.parentElement) {
-      var scrollableElement = outerListRef.current.parentElement;
-      var scrollLeft = scrollableElement.scrollLeft,
-        fullWidth = scrollableElement.scrollWidth,
-        clientWidth = scrollableElement.clientWidth;
+      const scrollableElement = outerListRef.current.parentElement;
+      const {
+        scrollLeft,
+        scrollWidth: fullWidth,
+        clientWidth
+      } = scrollableElement;
       setPingLeft(fullWidth > clientWidth && Math.floor(scrollLeft) > 0);
       setPingRight(fullWidth > clientWidth && Math.ceil(scrollLeft) < fullWidth - clientWidth);
       customBodyOnScrollRef.current({
@@ -510,56 +463,34 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
       });
     }
   }, [tableWidth, scrollWidth]);
-  useEffect(function () {
-    if (containerRef != null && containerRef.current) {
-      var headerElement = containerRef.current.querySelector('.ant-table-header');
-      var titleElement = containerRef.current.querySelector('.ant-table-title');
+  useEffect(() => {
+    if (containerRef?.current) {
+      const headerElement = containerRef.current.querySelector(".ant-table-header");
+      const titleElement = containerRef.current.querySelector(".ant-table-title");
       headerElement && setScrollWidth(headerElement.scrollWidth);
       titleElement && setTitleBarHeight(titleElement.clientHeight);
     }
   }, [tableWidth, mergedColumns.length, dataSource.length, loading]);
-  var _useElementInView = useElementInView({
-      rootMargin: "0px 0px 12px 0px",
-      threshold: 0
-    }, containerRef),
-    isStuck = _useElementInView.isIntersecting,
-    elementRef = _useElementInView.elementRef;
-  return /*#__PURE__*/React.createElement(S.VirtualTableWrapper, {
-    isSticky: isSticky,
-    titleBarTop: offsetStickyHeader || 0,
-    titleBarHeight: titleBarHeight,
-    style: isSticky ? {} : relativeInlineStyle,
-    key: "relative-container",
-    ref: containerRef,
-    isHeaderVisible: isHeaderVisible
-  }, /*#__PURE__*/React.createElement(ResizeObserver, {
-    onResize: function onResize(_ref5) {
-      var offsetWidth = _ref5.offsetWidth;
+  const {
+    isIntersecting: isStuck,
+    elementRef
+  } = useElementInView({
+    rootMargin: `0px 0px 12px 0px`,
+    threshold: 0
+  }, containerRef);
+  return /* @__PURE__ */ jsxs(VirtualTableWrapper, { isSticky, titleBarTop: offsetStickyHeader || 0, titleBarHeight, style: isSticky ? {} : relativeInlineStyle, ref: containerRef, isHeaderVisible, children: [
+    /* @__PURE__ */ jsx(ResizeObserver, { onResize: ({
+      offsetWidth
+    }) => {
       setTableWidth(offsetWidth);
-    }
-  }, /*#__PURE__*/React.createElement(DSTable, _extends({}, props, {
-    sticky: dataSource.length ? sticky : undefined,
-    loading: loading,
-    scroll: scrollValue,
-    className: classNames,
-    columns: finalColumns,
-    pagination: false,
-    components: {
+    }, children: /* @__PURE__ */ jsx(DSTable, { ...props, sticky: dataSource.length ? sticky : void 0, loading, scroll: scrollValue, className: classNames$1, columns: finalColumns, pagination: false, components: {
       body: renderBody
-    },
-    locale: tableLocale
-  }))), !!(infiniteScroll != null && infiniteScroll.showBackToTopButton) && /*#__PURE__*/React.createElement(BackToTopButton, {
-    onClick: scrollToTop
-  }, tableLocale.infiniteScrollBackToTop), isSticky && dataSource.length ? /*#__PURE__*/React.createElement(S.StickyScrollbarWrapper, {
-    isStuck: isStuck,
-    scrollOffset: offsetScroll || 0
-  }, /*#__PURE__*/React.createElement(Scrollbar, {
-    absolute: true,
-    onScroll: handleStickyScrollbarScroll,
-    ref: horizontalScrollRef
-  }, /*#__PURE__*/React.createElement(S.StickyScrollbarContent, {
-    ref: elementRef,
-    scrollWidth: scrollWidth
-  }))) : null);
+    }, locale: tableLocale }) }),
+    !!infiniteScroll?.showBackToTopButton && /* @__PURE__ */ jsx(BackToTopButton, { onClick: scrollToTop, children: tableLocale.infiniteScrollBackToTop }),
+    isSticky && dataSource.length ? /* @__PURE__ */ jsx(StickyScrollbarWrapper, { isStuck, scrollOffset: offsetScroll || 0, children: /* @__PURE__ */ jsx(Scrollbar, { absolute: true, onScroll: handleStickyScrollbarScroll, ref: horizontalScrollRef, children: /* @__PURE__ */ jsx(StickyScrollbarContent, { ref: elementRef, scrollWidth }) }) }) : null
+  ] }, "relative-container");
+};
+const VirtualTable$1 = forwardRef(VirtualTable);
+export {
+  VirtualTable$1 as default
 };
-export default /*#__PURE__*/forwardRef(VirtualTable);