@hazelcast/ui 2.0.4 → 3.0.0-canary.0

package/lib/components/Table/Table.js

@@ -1,27 +1,30 @@
-import debounce from 'lodash/debounce';
-import React, { useCallback, useEffect, useRef, useMemo, useState, } from 'react';
-import cn from 'classnames';
-import HotKeys from 'react-hot-keys';
-import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getExpandedRowModel, getFilteredRowModel, } from '@tanstack/react-table';
-import { AlertTriangle, ChevronDown, ChevronUp } from 'react-feather';
-import { Pagination } from '../Pagination';
-import { Cell } from './Cell';
-import { EnhancedCellRenderer, EnhancedHeaderFooterRenderer } from './EnhancedRenderers';
-import { Header } from './Header';
-import { HeaderRow, Row } from './Row';
-import { Loader } from '../Loader';
-import { EmptyState } from '../EmptyState';
-import { usePrevious } from '../../hooks/usePrevious';
-import { Icon } from '../Icon';
-import { TableContent } from './TableContent';
-import { ROW_EXPANDER_COLUMN_ID } from './constants';
-import { useColumnsSelection, ContextMenu } from './features/columnsSelection';
-import { useRefValue } from '../../hooks';
-import { useTrackTableState } from './useTrackTableState';
-import { getCellStyle, getColumnDef, getRowStyle, getTableInitialState, prepareRow } from './utils';
-import styles from './Table.module.scss';
-import styleConsts from '../../../styles/constants/export.module.scss';
-export * from './tableTypes';
+'use strict';
+
+var debounce = require('lodash/debounce');
+var React = require('react');
+var cn = require('classnames');
+var HotKeys = require('react-hot-keys');
+var reactTable = require('@tanstack/react-table');
+var reactFeather = require('react-feather');
+var components_Pagination = require('../Pagination.js');
+var components_Table_Cell = require('./Cell.js');
+var components_Table_EnhancedRenderers = require('./EnhancedRenderers.js');
+var components_Table_Header = require('./Header.js');
+var components_Table_Row = require('./Row.js');
+var components_Loader = require('../Loader.js');
+var components_EmptyState = require('../EmptyState.js');
+var hooks_usePrevious = require('../../hooks/usePrevious.js');
+var components_Icon = require('../Icon.js');
+var components_Table_TableContent = require('./TableContent.js');
+var components_Table_constants = require('./constants.js');
+var components_Table_features_columnsSelection_columnsSelection = require('./features/columnsSelection/columnsSelection.js');
+var components_Table_features_columnsSelection_ContextMenu_ContextMenu = require('./features/columnsSelection/ContextMenu/ContextMenu.js');
+var components_Table_useTrackTableState = require('./useTrackTableState.js');
+var components_Table_utils = require('./utils.js');
+var Table_module = require('./Table.module.scss.js');
+var export_module = require('../../styles/constants/export.module.scss.js');
+var hooks_useRefValue = require('../../hooks/useRefValue.js');
+
 /**
  * ### Purpose
  * Table component allows to arrange data in rows and columns.
@@ -33,228 +36,436 @@ export * from './tableTypes';
  * - Is able to resize columns out of the box
  */
 // Inspiration here: https://react-table.tanstack.com/docs/examples/basic
-export const Table = ({ 'data-test': dataTest, columns: propColumns, data, disableSortBy, onPaginationChange, onSortingChange, manualPagination, onRenderedContentChange, hidePagination = false, pageCount: controlledPageCount, defaultPageSize = 10, paginationOptions, onRowClick, getHref, AnchorComponent, getCustomRowProps, getCustomCellProps, loading, noDataTitle = 'The table is empty', pageIndex: incomingPageIndex, initialState = { paginationOptions: { pageIndex: incomingPageIndex || 0, pageSize: defaultPageSize } }, className = '', headerClassName = '', contentClassName = '', footerClassName = '', searchValue, hideHeader, onPageChange, overlayLoading, onRowSelect, columnsOrdering = false, children, renderRowSubComponent, onCopy, canExpand, onStateChange, }) => {
-    var _a;
-    const getOncopy = useRefValue(onCopy);
-    const getCanExpand = useRefValue(canExpand);
-    const getRenderRowSubComponent = useRefValue(renderRowSubComponent);
-    const [contextMenuAnchorEl, setContextMenuAnchorEl] = useState(null);
-    const draggedColumnRef = useRef(null);
-    const previousIncomingPageIndex = usePrevious(incomingPageIndex);
-    const columns = useMemo(() => {
-        if (renderRowSubComponent || data.some((item) => 'subRows' in item)) {
-            const expander = {
-                width: 60,
-                disableResizing: true,
-                id: ROW_EXPANDER_COLUMN_ID,
-                Header: () => React.createElement("span", { role: "contentinfo", "aria-label": "row-expander-column-header" }),
-                Cell: ({ row }) => {
-                    if (row.getCanExpand()) {
-                        return (React.createElement("div", { tabIndex: 0, role: "button", "data-test": "row-expander", "aria-expanded": row.getIsExpanded(), className: styles.expander, onClick: (e) => {
-                                e.preventDefault();
-                                row.getToggleExpandedHandler()();
-                            } },
-                            React.createElement(Icon, { icon: row.getIsExpanded() ? ChevronUp : ChevronDown, ariaLabel: "row-expander" })));
-                    }
-                    return React.createElement(React.Fragment, null, null);
-                },
-            };
-            return [expander, ...propColumns].map(getColumnDef);
+const Table = ({
+  'data-test': dataTest,
+  columns: propColumns,
+  data,
+  disableSortBy,
+  onPaginationChange,
+  onSortingChange,
+  manualPagination,
+  onRenderedContentChange,
+  hidePagination = false,
+  pageCount: controlledPageCount,
+  defaultPageSize = 10,
+  paginationOptions,
+  onRowClick,
+  getHref,
+  AnchorComponent,
+  getCustomRowProps,
+  getCustomCellProps,
+  loading,
+  noDataTitle = 'The table is empty',
+  pageIndex: incomingPageIndex,
+  initialState = {
+    paginationOptions: {
+      pageIndex: incomingPageIndex || 0,
+      pageSize: defaultPageSize
+    }
+  },
+  className = '',
+  headerClassName = '',
+  contentClassName = '',
+  footerClassName = '',
+  searchValue,
+  hideHeader,
+  onPageChange,
+  overlayLoading,
+  onRowSelect,
+  columnsOrdering = false,
+  children,
+  renderRowSubComponent,
+  onCopy,
+  canExpand,
+  onStateChange
+}) => {
+  var _a;
+  const getOncopy = hooks_useRefValue.useRefValue(onCopy);
+  const getCanExpand = hooks_useRefValue.useRefValue(canExpand);
+  const getRenderRowSubComponent = hooks_useRefValue.useRefValue(renderRowSubComponent);
+  const [contextMenuAnchorEl, setContextMenuAnchorEl] = React.useState(null);
+  const draggedColumnRef = React.useRef(null);
+  const previousIncomingPageIndex = hooks_usePrevious.usePrevious(incomingPageIndex);
+  const columns = React.useMemo(() => {
+    if (renderRowSubComponent || data.some(item => 'subRows' in item)) {
+      const expander = {
+        width: 60,
+        disableResizing: true,
+        id: components_Table_constants.ROW_EXPANDER_COLUMN_ID,
+        Header: () => /*#__PURE__*/React.createElement("span", {
+          role: "contentinfo",
+          "aria-label": "row-expander-column-header"
+        }),
+        Cell: ({
+          row
+        }) => {
+          if (row.getCanExpand()) {
+            return /*#__PURE__*/React.createElement("div", {
+              tabIndex: 0,
+              role: "button",
+              "data-test": "row-expander",
+              "aria-expanded": row.getIsExpanded(),
+              className: Table_module.default.expander,
+              onClick: e => {
+                e.preventDefault();
+                row.getToggleExpandedHandler()();
+              }
+            }, /*#__PURE__*/React.createElement(components_Icon.Icon, {
+              icon: row.getIsExpanded() ? reactFeather.ChevronUp : reactFeather.ChevronDown,
+              ariaLabel: "row-expander"
+            }));
+          }
+          return /*#__PURE__*/React.createElement(React.Fragment, null, null);
         }
-        return propColumns.map(getColumnDef);
-    }, [propColumns, data, renderRowSubComponent]);
-    const defaultColumn = useMemo(() => ({
-        cell: (props) => React.createElement(EnhancedCellRenderer, { cell: props.cell, columnResizing: props.column.getIsResizing() }),
-        minSize: Number(styleConsts.tableColumnMinWidth), // minWidth is only used as a limit for resizing
-        size: Number(styleConsts.tableColumnWidth), // width is used for both the flex-basis and flex-grow
-        maxSize: Number(styleConsts.tableColumnMaxWidth), // maxWidth is only used as a limit for resizing
-    }), []);
-    const tableInitialState = useMemo(() => getTableInitialState(initialState), [initialState]);
-    const tableInstance = useReactTable({
+      };
+      return [expander, ...propColumns].map(components_Table_utils.getColumnDef);
+    }
+    return propColumns.map(components_Table_utils.getColumnDef);
+  }, [propColumns, data, renderRowSubComponent]);
+  const defaultColumn = React.useMemo(() => ({
+    cell: props => /*#__PURE__*/React.createElement(components_Table_EnhancedRenderers.EnhancedCellRenderer, {
+      cell: props.cell,
+      columnResizing: props.column.getIsResizing()
+    }),
+    minSize: Number(export_module.default.tableColumnMinWidth),
+    // minWidth is only used as a limit for resizing
+    size: Number(export_module.default.tableColumnWidth),
+    // width is used for both the flex-basis and flex-grow
+    maxSize: Number(export_module.default.tableColumnMaxWidth) // maxWidth is only used as a limit for resizing
+  }), []);
+  const tableInitialState = React.useMemo(() => components_Table_utils.getTableInitialState(initialState), [initialState]);
+  const tableInstance = reactTable.useReactTable({
+    columns,
+    data,
+    enableSorting: !disableSortBy,
+    enableMultiSort: false,
+    // Pass our hoisted table state
+    initialState: tableInitialState,
+    // Tell the usePagination hook that we'll handle our own data fetching
+    manualPagination: manualPagination,
+    // This means we'll also have to provide our own pageCount
+    pageCount: controlledPageCount,
+    defaultColumn,
+    columnResizeMode: 'onChange',
+    paginateExpandedRows: false,
+    autoResetPageIndex: false,
+    getSubRows: React.useCallback(row => row.subRows, []),
+    getRowCanExpand: React.useCallback(row => {
+      var _a;
+      const cb = getCanExpand();
+      if (cb) {
+        return cb(components_Table_utils.prepareRow(row));
+      }
+      if (getRenderRowSubComponent()) {
+        return true;
+      }
+      return ((_a = row.subRows) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    }, [getCanExpand, getRenderRowSubComponent]),
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getPaginationRowModel: reactTable.getPaginationRowModel(),
+    getSortedRowModel: reactTable.getSortedRowModel(),
+    getExpandedRowModel: reactTable.getExpandedRowModel(),
+    getFilteredRowModel: reactTable.getFilteredRowModel()
+  });
+  const {
+    getVisibleFlatColumns,
+    nextPage,
+    setPageIndex: goToPage,
+    getRowCount,
+    getState,
+    previousPage,
+    setPageSize,
+    setGlobalFilter,
+    setColumnOrder,
+    getPageCount,
+    getCanNextPage,
+    getCanPreviousPage,
+    getFooterGroups
+  } = tableInstance;
+  components_Table_useTrackTableState.useTrackTableState(tableInstance, onStateChange);
+  const footerGroups = getFooterGroups();
+  const page = tableInstance.getPaginationRowModel().rows;
+  const rowsPerPage = getRowCount();
+  const pageCount = getPageCount();
+  const {
+    sorting: sortBy,
+    columnOrder,
+    columnSizing: columnResizing,
+    rowSelection: selectedRowIds,
+    pagination: {
+      pageIndex,
+      pageSize
+    }
+  } = getState();
+  const getColumnOrder = hooks_useRefValue.useRefValue(columnOrder);
+  // drag and drop
+  const onDragStart = React.useCallback(e => {
+    draggedColumnRef.current = Number(e.dataTransfer.getData('text/plain'));
+  }, []);
+  const onDrop = React.useCallback((_, columnIndex) => {
+    if (draggedColumnRef.current !== null && columnIndex !== draggedColumnRef.current) {
+      const visibleColumns = getColumnOrder() || getVisibleFlatColumns().map(({
+        id
+      }) => id);
+      const newColumns = [...visibleColumns];
+      newColumns[columnIndex] = visibleColumns[draggedColumnRef.current];
+      newColumns[draggedColumnRef.current] = visibleColumns[columnIndex];
+      setColumnOrder(newColumns);
+    }
+  }, [getColumnOrder, getVisibleFlatColumns, setColumnOrder]);
+  const columnsSelectionProps = components_Table_features_columnsSelection_columnsSelection.useColumnsSelection({
+    rowsPerPage,
+    columnsPerRow: columns.length
+  });
+  const {
+    onEndSelection,
+    getSelectedColumns,
+    selectedColumnValuesRef
+  } = columnsSelectionProps;
+  const onPaginationChangeDebounced = React.useMemo(() => onPaginationChange ? debounce(onPaginationChange, 200) : undefined, [onPaginationChange]);
+  const onKeyUp = React.useCallback(() => {
+    const callback = getOncopy();
+    if (callback) {
+      const {
         columns,
-        data,
-        enableSorting: !disableSortBy,
-        enableMultiSort: false,
-        // Pass our hoisted table state
-        initialState: tableInitialState,
-        // Tell the usePagination hook that we'll handle our own data fetching
-        manualPagination: manualPagination,
-        // This means we'll also have to provide our own pageCount
-        pageCount: controlledPageCount,
-        defaultColumn,
-        columnResizeMode: 'onChange',
-        paginateExpandedRows: false,
-        autoResetPageIndex: false,
-        getSubRows: useCallback((row) => row.subRows, []),
-        getRowCanExpand: useCallback((row) => {
-            var _a;
-            const cb = getCanExpand();
-            if (cb) {
-                return cb(prepareRow(row));
-            }
-            if (getRenderRowSubComponent()) {
-                return true;
-            }
-            return ((_a = row.subRows) === null || _a === void 0 ? void 0 : _a.length) > 0;
-        }, [getCanExpand, getRenderRowSubComponent]),
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getExpandedRowModel: getExpandedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-    });
-    const { getVisibleFlatColumns, nextPage, setPageIndex: goToPage, getRowCount, getState, previousPage, setPageSize, setGlobalFilter, setColumnOrder, getPageCount, getCanNextPage, getCanPreviousPage, getFooterGroups, } = tableInstance;
-    useTrackTableState(tableInstance, onStateChange);
-    const footerGroups = getFooterGroups();
-    const page = tableInstance.getPaginationRowModel().rows;
-    const rowsPerPage = getRowCount();
-    const pageCount = getPageCount();
-    const { sorting: sortBy, columnOrder, columnSizing: columnResizing, rowSelection: selectedRowIds, pagination: { pageIndex, pageSize }, } = getState();
-    const getColumnOrder = useRefValue(columnOrder);
-    // drag and drop
-    const onDragStart = useCallback((e) => {
-        draggedColumnRef.current = Number(e.dataTransfer.getData('text/plain'));
-    }, []);
-    const onDrop = useCallback((_, columnIndex) => {
-        if (draggedColumnRef.current !== null && columnIndex !== draggedColumnRef.current) {
-            const visibleColumns = getColumnOrder() || getVisibleFlatColumns().map(({ id }) => id);
-            const newColumns = [...visibleColumns];
-            newColumns[columnIndex] = visibleColumns[draggedColumnRef.current];
-            newColumns[draggedColumnRef.current] = visibleColumns[columnIndex];
-            setColumnOrder(newColumns);
-        }
-    }, [getColumnOrder, getVisibleFlatColumns, setColumnOrder]);
-    const columnsSelectionProps = useColumnsSelection({
-        rowsPerPage,
-        columnsPerRow: columns.length,
-    });
-    const { onEndSelection, getSelectedColumns, selectedColumnValuesRef } = columnsSelectionProps;
-    const onPaginationChangeDebounced = useMemo(() => (onPaginationChange ? debounce(onPaginationChange, 200) : undefined), [onPaginationChange]);
-    const onKeyUp = useCallback(() => {
-        const callback = getOncopy();
-        if (callback) {
-            const { columns, range } = getSelectedColumns();
-            if (columns.size || (range[0] !== undefined && range[0] !== undefined)) {
-                callback(selectedColumnValuesRef === null || selectedColumnValuesRef === void 0 ? void 0 : selectedColumnValuesRef.current);
-            }
-        }
-    }, [getOncopy, getSelectedColumns, selectedColumnValuesRef]);
-    useEffect(() => {
-        return () => {
-            document.body.removeEventListener('mouseup', onEndSelection);
-            document.body.removeEventListener('contextmenu', onEndSelection);
-            document.body.removeEventListener('keyup', onKeyUp);
-        };
-    }, [onKeyUp, onEndSelection]);
-    // Listen for changes in pagination and use the state to fetch new data. This is a recommended way to fetch new data: https://react-table.tanstack.com/docs/faq#how-can-i-use-the-table-state-to-fetch-new-data
-    useEffect(() => {
-        if (onPaginationChangeDebounced) {
-            onPaginationChangeDebounced({ pageIndex, pageSize });
-        }
-    }, [onPaginationChangeDebounced, pageIndex, pageSize]);
-    useEffect(() => {
-        if (onSortingChange) {
-            onSortingChange(sortBy);
-        }
-    }, [sortBy, onSortingChange]);
-    // Debounce our `fetchData` call for 200ms.
-    const onRenderedContentChangeDebounced = useMemo(() => (onRenderedContentChange ? debounce(onRenderedContentChange, 200) : undefined), [onRenderedContentChange]);
-    // Listen for changes in pagination and use the state to fetch new data. This is a recommended way to fetch new data: https://react-table.tanstack.com/docs/faq#how-can-i-use-the-table-state-to-fetch-new-data
-    useEffect(() => {
-        if (onRenderedContentChangeDebounced) {
-            onRenderedContentChangeDebounced(page.map(prepareRow));
-        }
-    }, [onRenderedContentChangeDebounced, page]);
-    // Apply global filter when searchValue changes
-    useEffect(() => {
-        if (searchValue !== undefined) {
-            ;
-            setGlobalFilter(searchValue);
-        }
-    }, [searchValue, setGlobalFilter]);
-    useEffect(() => {
-        if (pageCount < pageIndex + 1) {
-            goToPage(pageCount - 1);
-        }
-    }, [pageIndex, pageCount, goToPage]);
-    useEffect(() => {
-        if (incomingPageIndex !== undefined && incomingPageIndex !== previousIncomingPageIndex) {
-            goToPage(incomingPageIndex);
-        }
-    }, [goToPage, incomingPageIndex, previousIncomingPageIndex]);
-    useEffect(() => {
-        if (onRowSelect) {
-            onRowSelect(Object.keys(selectedRowIds));
-        }
-    }, [onRowSelect, selectedRowIds]);
-    const hasData = data.length > 0;
-    // If at least one of the columns has footer then we display the footer row
-    const hasFooter = !loading && hasData && columns.some((col) => !!col.footer);
-    // Header row has always aria-rowindex = 1.
-    const headerIndex = 1;
-    // We're using this offset to display correct aria-rowindex when pagination is in action.
-    const cellIndexOffset = pageSize * pageIndex + headerIndex;
-    // Total row count.
-    const rowCount = data.length + headerIndex + (hasFooter ? 1 : 0);
-    const content = (React.createElement(React.Fragment, null,
-        React.createElement("div", { "data-test": dataTest !== null && dataTest !== void 0 ? dataTest : 'table-wrapper', className: className },
-            React.createElement("div", { className: cn(styles.container, {
-                    [styles.spaceBottom]: !hidePagination,
-                }) },
-                React.createElement("div", { "data-test": "table", role: "table", "aria-rowcount": rowCount },
-                    !hideHeader && (React.createElement("div", { "data-test": "table-header-row-group", role: "rowgroup", className: headerClassName }, tableInstance.getHeaderGroups().map((headerGroup) => (React.createElement(HeaderRow, { key: headerGroup.id, role: "row", ariaRowIndex: headerIndex, style: getRowStyle({ totalSize: tableInstance.getTotalSize() }) }, headerGroup.headers.map((header, i) => {
-                        var _a, _b;
-                        const canSort = header.column.getCanSort();
-                        const isDraggable = columnsOrdering && header.id !== 'expander';
-                        return (React.createElement(Header, { index: i, colSpan: 1, key: header.id, role: "columnheader", onDragStart: onDragStart, style: getCellStyle({ size: header.getSize(), minSize: header.column.columnDef.minSize || header.getSize() }), canSort: canSort, isSorted: !!header.column.getIsSorted(), isSortedDesc: (_a = sortBy[header.column.getSortIndex()]) === null || _a === void 0 ? void 0 : _a.desc, canResize: header.column.getCanResize(), onDrop: isDraggable ? onDrop : undefined, resizeHandler: header.getResizeHandler(), isResizing: header.column.getIsResizing(), align: (_b = header.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.align, onClick: canSort ? header.column.getToggleSortingHandler() : undefined },
-                            React.createElement(EnhancedHeaderFooterRenderer, { type: "header", context: header.getContext() })));
-                    })))))),
-                    !overlayLoading && loading ? (React.createElement(Row, { role: "row" },
-                        React.createElement(Cell, { role: "cell", align: "center", colSpan: columns.length, "data-test": "table-loader-cell" },
-                            React.createElement(Loader, null)))) : hasData ? (React.createElement(HotKeys, { keyName: "ctrl+c, command+c", onKeyUp: onKeyUp },
-                        React.createElement("div", { "data-test": "table-cell-row-group", className: styles.hotKeys },
-                            React.createElement(TableContent, { page: page, onCopy: onCopy, getHref: getHref, totalSize: tableInstance.getTotalSize(), rootRef: setContextMenuAnchorEl, ...columnsSelectionProps, onRowClick: onRowClick, className: contentClassName, columnResizing: columnResizing, AnchorComponent: AnchorComponent, cellIndexOffset: cellIndexOffset, getCustomRowProps: getCustomRowProps, getCustomCellProps: getCustomCellProps, renderRowSubComponent: renderRowSubComponent })))) : (React.createElement("div", { role: "row" },
-                        React.createElement("div", { role: "cell" },
-                            React.createElement(EmptyState, { "data-test": "table-no-data", className: styles.empty, title: noDataTitle, icon: AlertTriangle, iconLabel: "Alert" })))),
-                    hasFooter && (React.createElement("div", { "data-test": "table-footer-row-group", role: "rowgroup", className: footerClassName }, footerGroups.map((group) => {
-                        const { id: footerGroupKey } = group;
-                        return (
-                        // Footer props getters do not provide role attributes
-                        React.createElement(Row, { key: footerGroupKey, ariaRowIndex: rowCount, style: getRowStyle({ totalSize: tableInstance.getTotalSize() }), role: "row" }, group.headers.map((column) => {
-                            var _a;
-                            const { id: footerKey, column: { columnDef }, } = column;
-                            return (
-                            // Footer props getters do not provide role attributes
-                            React.createElement(Cell, { key: footerKey, colSpan: 1, align: (_a = columnDef.meta) === null || _a === void 0 ? void 0 : _a.align, style: getCellStyle({ size: column.getSize(), maxSize: columnDef.maxSize, minSize: columnDef.minSize }), role: "cell" },
-                                React.createElement(EnhancedHeaderFooterRenderer, { context: column.getContext(), type: "footer" })));
-                        })));
-                    }))))),
-            !hidePagination && hasData && (React.createElement(Pagination, { pageCount: pageCount, currentPage: pageIndex + 1, canPreviousPage: getCanPreviousPage(), canNextPage: getCanNextPage(), goToPage: (p) => {
-                    if (onPageChange) {
-                        onPageChange(p - 1);
-                    }
-                    else {
-                        goToPage(p - 1);
-                    }
-                }, nextPage: () => {
-                    if (onPageChange) {
-                        onPageChange(pageIndex + 1);
-                    }
-                    else {
-                        nextPage();
-                    }
-                }, previousPage: () => {
-                    if (onPageChange) {
-                        onPageChange(pageIndex - 1);
-                    }
-                    else {
-                        previousPage();
-                    }
-                }, pageSize: pageSize, setPageSize: setPageSize, numberOfItems: data.length, pageSizeOptions: (_a = paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.pageSizeOptions) !== null && _a !== void 0 ? _a : [5, 10, 20] }))),
-        onCopy && React.createElement(ContextMenu, { anchorElement: contextMenuAnchorEl, onCopy: onKeyUp })));
-    if (children) {
-        return children(content);
+        range
+      } = getSelectedColumns();
+      if (columns.size || range[0] !== undefined && range[0] !== undefined) {
+        callback(selectedColumnValuesRef === null || selectedColumnValuesRef === void 0 ? void 0 : selectedColumnValuesRef.current);
+      }
+    }
+  }, [getOncopy, getSelectedColumns, selectedColumnValuesRef]);
+  React.useEffect(() => {
+    return () => {
+      document.body.removeEventListener('mouseup', onEndSelection);
+      document.body.removeEventListener('contextmenu', onEndSelection);
+      document.body.removeEventListener('keyup', onKeyUp);
+    };
+  }, [onKeyUp, onEndSelection]);
+  // Listen for changes in pagination and use the state to fetch new data. This is a recommended way to fetch new data: https://react-table.tanstack.com/docs/faq#how-can-i-use-the-table-state-to-fetch-new-data
+  React.useEffect(() => {
+    if (onPaginationChangeDebounced) {
+      onPaginationChangeDebounced({
+        pageIndex,
+        pageSize
+      });
+    }
+  }, [onPaginationChangeDebounced, pageIndex, pageSize]);
+  React.useEffect(() => {
+    if (onSortingChange) {
+      onSortingChange(sortBy);
+    }
+  }, [sortBy, onSortingChange]);
+  // Debounce our `fetchData` call for 200ms.
+  const onRenderedContentChangeDebounced = React.useMemo(() => onRenderedContentChange ? debounce(onRenderedContentChange, 200) : undefined, [onRenderedContentChange]);
+  // Listen for changes in pagination and use the state to fetch new data. This is a recommended way to fetch new data: https://react-table.tanstack.com/docs/faq#how-can-i-use-the-table-state-to-fetch-new-data
+  React.useEffect(() => {
+    if (onRenderedContentChangeDebounced) {
+      onRenderedContentChangeDebounced(page.map(components_Table_utils.prepareRow));
+    }
+  }, [onRenderedContentChangeDebounced, page]);
+  // Apply global filter when searchValue changes
+  React.useEffect(() => {
+    if (searchValue !== undefined) {
+      setGlobalFilter(searchValue);
+    }
+  }, [searchValue, setGlobalFilter]);
+  React.useEffect(() => {
+    if (pageCount < pageIndex + 1) {
+      goToPage(pageCount - 1);
+    }
+  }, [pageIndex, pageCount, goToPage]);
+  React.useEffect(() => {
+    if (incomingPageIndex !== undefined && incomingPageIndex !== previousIncomingPageIndex) {
+      goToPage(incomingPageIndex);
+    }
+  }, [goToPage, incomingPageIndex, previousIncomingPageIndex]);
+  React.useEffect(() => {
+    if (onRowSelect) {
+      onRowSelect(Object.keys(selectedRowIds));
     }
-    return content;
+  }, [onRowSelect, selectedRowIds]);
+  const hasData = data.length > 0;
+  // If at least one of the columns has footer then we display the footer row
+  const hasFooter = !loading && hasData && columns.some(col => !!col.footer);
+  // Header row has always aria-rowindex = 1.
+  const headerIndex = 1;
+  // We're using this offset to display correct aria-rowindex when pagination is in action.
+  const cellIndexOffset = pageSize * pageIndex + headerIndex;
+  // Total row count.
+  const rowCount = data.length + headerIndex + (hasFooter ? 1 : 0);
+  const content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "data-test": dataTest !== null && dataTest !== void 0 ? dataTest : 'table-wrapper',
+    className: className
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn(Table_module.default.container, {
+      [Table_module.default.spaceBottom]: !hidePagination
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-test": "table",
+    role: "table",
+    "aria-rowcount": rowCount
+  }, !hideHeader && (/*#__PURE__*/React.createElement("div", {
+    "data-test": "table-header-row-group",
+    role: "rowgroup",
+    className: headerClassName
+  }, tableInstance.getHeaderGroups().map(headerGroup => (/*#__PURE__*/React.createElement(components_Table_Row.HeaderRow, {
+    key: headerGroup.id,
+    role: "row",
+    ariaRowIndex: headerIndex,
+    style: components_Table_utils.getRowStyle({
+      totalSize: tableInstance.getTotalSize()
+    })
+  }, headerGroup.headers.map((header, i) => {
+    var _a, _b;
+    const canSort = header.column.getCanSort();
+    const isDraggable = columnsOrdering && header.id !== 'expander';
+    return /*#__PURE__*/React.createElement(components_Table_Header.Header, {
+      index: i,
+      colSpan: 1,
+      key: header.id,
+      role: "columnheader",
+      onDragStart: onDragStart,
+      style: components_Table_utils.getCellStyle({
+        size: header.getSize(),
+        minSize: header.column.columnDef.minSize || header.getSize()
+      }),
+      canSort: canSort,
+      isSorted: !!header.column.getIsSorted(),
+      isSortedDesc: (_a = sortBy[header.column.getSortIndex()]) === null || _a === void 0 ? void 0 : _a.desc,
+      canResize: header.column.getCanResize(),
+      onDrop: isDraggable ? onDrop : undefined,
+      resizeHandler: header.getResizeHandler(),
+      isResizing: header.column.getIsResizing(),
+      align: (_b = header.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.align,
+      onClick: canSort ? header.column.getToggleSortingHandler() : undefined
+    }, /*#__PURE__*/React.createElement(components_Table_EnhancedRenderers.EnhancedHeaderFooterRenderer, {
+      type: "header",
+      context: header.getContext()
+    }));
+  })))))), !overlayLoading && loading ? (/*#__PURE__*/React.createElement(components_Table_Row.Row, {
+    role: "row"
+  }, /*#__PURE__*/React.createElement(components_Table_Cell.Cell, {
+    role: "cell",
+    align: "center",
+    colSpan: columns.length,
+    "data-test": "table-loader-cell"
+  }, /*#__PURE__*/React.createElement(components_Loader.Loader, null)))) : hasData ? (/*#__PURE__*/React.createElement(HotKeys, {
+    keyName: "ctrl+c, command+c",
+    onKeyUp: onKeyUp
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-test": "table-cell-row-group",
+    className: Table_module.default.hotKeys
+  }, /*#__PURE__*/React.createElement(components_Table_TableContent.TableContent, {
+    page: page,
+    onCopy: onCopy,
+    getHref: getHref,
+    totalSize: tableInstance.getTotalSize(),
+    rootRef: setContextMenuAnchorEl,
+    ...columnsSelectionProps,
+    onRowClick: onRowClick,
+    className: contentClassName,
+    columnResizing: columnResizing,
+    AnchorComponent: AnchorComponent,
+    cellIndexOffset: cellIndexOffset,
+    getCustomRowProps: getCustomRowProps,
+    getCustomCellProps: getCustomCellProps,
+    renderRowSubComponent: renderRowSubComponent
+  })))) : (/*#__PURE__*/React.createElement("div", {
+    role: "row"
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "cell"
+  }, /*#__PURE__*/React.createElement(components_EmptyState.EmptyState, {
+    "data-test": "table-no-data",
+    className: Table_module.default.empty,
+    title: noDataTitle,
+    icon: reactFeather.AlertTriangle,
+    iconLabel: "Alert"
+  })))), hasFooter && (/*#__PURE__*/React.createElement("div", {
+    "data-test": "table-footer-row-group",
+    role: "rowgroup",
+    className: footerClassName
+  }, footerGroups.map(group => {
+    const {
+      id: footerGroupKey
+    } = group;
+    return (
+      /*#__PURE__*/
+      // Footer props getters do not provide role attributes
+      React.createElement(components_Table_Row.Row, {
+        key: footerGroupKey,
+        ariaRowIndex: rowCount,
+        style: components_Table_utils.getRowStyle({
+          totalSize: tableInstance.getTotalSize()
+        }),
+        role: "row"
+      }, group.headers.map(column => {
+        var _a;
+        const {
+          id: footerKey,
+          column: {
+            columnDef
+          }
+        } = column;
+        return (
+          /*#__PURE__*/
+          // Footer props getters do not provide role attributes
+          React.createElement(components_Table_Cell.Cell, {
+            key: footerKey,
+            colSpan: 1,
+            align: (_a = columnDef.meta) === null || _a === void 0 ? void 0 : _a.align,
+            style: components_Table_utils.getCellStyle({
+              size: column.getSize(),
+              maxSize: columnDef.maxSize,
+              minSize: columnDef.minSize
+            }),
+            role: "cell"
+          }, /*#__PURE__*/React.createElement(components_Table_EnhancedRenderers.EnhancedHeaderFooterRenderer, {
+            context: column.getContext(),
+            type: "footer"
+          }))
+        );
+      }))
+    );
+  }))))), !hidePagination && hasData && (/*#__PURE__*/React.createElement(components_Pagination.Pagination, {
+    pageCount: pageCount,
+    currentPage: pageIndex + 1,
+    canPreviousPage: getCanPreviousPage(),
+    canNextPage: getCanNextPage(),
+    goToPage: p => {
+      if (onPageChange) {
+        onPageChange(p - 1);
+      } else {
+        goToPage(p - 1);
+      }
+    },
+    nextPage: () => {
+      if (onPageChange) {
+        onPageChange(pageIndex + 1);
+      } else {
+        nextPage();
+      }
+    },
+    previousPage: () => {
+      if (onPageChange) {
+        onPageChange(pageIndex - 1);
+      } else {
+        previousPage();
+      }
+    },
+    pageSize: pageSize,
+    setPageSize: setPageSize,
+    numberOfItems: data.length,
+    pageSizeOptions: (_a = paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.pageSizeOptions) !== null && _a !== void 0 ? _a : [5, 10, 20]
+  }))), onCopy && /*#__PURE__*/React.createElement(components_Table_features_columnsSelection_ContextMenu_ContextMenu.ContextMenu, {
+    anchorElement: contextMenuAnchorEl,
+    onCopy: onKeyUp
+  }));
+  if (children) {
+    return children(content);
+  }
+  return content;
 };
-//# sourceMappingURL=Table.js.map
+
+exports.Table = Table;
+//# sourceMappingURL=Table.js.map