@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/Table/TableCell.js

@@ -1,7 +1,3 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
 import { getCellStyle, getStickyStyle, getSubRowStyle } from './utils.js';
@@ -10,44 +6,90 @@ import { SELECTION_CELL_ID } from './columns/index.js';
 import { DefaultCell } from './cells/index.js';
 import { Box } from '../../utils/index.js';
 export const TableCell = (props) => {
-    const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density, } = props;
-    const hasSubRowExpander = cellIndex ===
-        cell.row.cells.findIndex((c) => c.column.id !== SELECTION_CELL_ID);
-    const cellElementProps = cell.getCellProps({
-        className: cx('iui-table-cell', cell.column.cellClassName, {
-            'iui-table-cell-sticky': !!cell.column.sticky,
+  const {
+    cell,
+    cellIndex,
+    isDisabled,
+    tableHasSubRows,
+    tableInstance,
+    expanderCell,
+    density,
+  } = props;
+  const hasSubRowExpander =
+    cellIndex ===
+    cell.row.cells.findIndex((c) => c.column.id !== SELECTION_CELL_ID);
+  const cellElementProps = cell.getCellProps({
+    className: cx('iui-table-cell', cell.column.cellClassName, {
+      'iui-table-cell-sticky': !!cell.column.sticky,
+    }),
+    style: {
+      ...getCellStyle(cell.column, !!tableInstance.state.isTableResizing),
+      ...(tableHasSubRows &&
+        hasSubRowExpander &&
+        getSubRowStyle({
+          density,
+          depth: cell.row.depth + (cell.row.canExpand ? 0 : 1),
+        })),
+      ...getStickyStyle(cell.column, tableInstance.visibleColumns),
+    },
+  });
+  const cellProps = {
+    ...tableInstance,
+    ...{
+      cell,
+      row: cell.row,
+      value: cell.value,
+      column: cell.column,
+    },
+  };
+  const cellContent = React.createElement(
+    React.Fragment,
+    null,
+    tableHasSubRows &&
+      hasSubRowExpander &&
+      cell.row.canExpand &&
+      React.createElement(SubRowExpander, {
+        cell: cell,
+        isDisabled: isDisabled,
+        cellProps: cellProps,
+        expanderCell: expanderCell,
+        density: density,
+        slot: 'start',
+      }),
+    cell.render('Cell'),
+  );
+  const cellRendererProps = {
+    cellElementProps,
+    cellProps,
+    children: React.createElement(
+      React.Fragment,
+      null,
+      cellContent,
+      cell.column.sticky === 'left' &&
+        tableInstance.state.sticky.isScrolledToRight &&
+        React.createElement(Box, {
+          className: 'iui-table-cell-shadow-right',
+          slot: 'shadows',
         }),
-        style: {
-            ...getCellStyle(cell.column, !!tableInstance.state.isTableResizing),
-            ...(tableHasSubRows &&
-                hasSubRowExpander &&
-                getSubRowStyle({
-                    density,
-                    // If it doesn't have sub-rows then shift by another level to align with expandable rows on the same depth
-                    depth: cell.row.depth + (cell.row.canExpand ? 0 : 1),
-                })),
-            ...getStickyStyle(cell.column, tableInstance.visibleColumns),
-        },
-    });
-    const cellProps = {
-        ...tableInstance,
-        ...{ cell, row: cell.row, value: cell.value, column: cell.column },
-    };
-    const cellContent = (React.createElement(React.Fragment, null,
-        tableHasSubRows && hasSubRowExpander && cell.row.canExpand && (React.createElement(SubRowExpander, { cell: cell, isDisabled: isDisabled, cellProps: cellProps, expanderCell: expanderCell, density: density, slot: 'start' })),
-        cell.render('Cell')));
-    const cellRendererProps = {
-        cellElementProps,
-        cellProps,
-        children: (React.createElement(React.Fragment, null,
-            cellContent,
-            cell.column.sticky === 'left' &&
-                tableInstance.state.sticky.isScrolledToRight && (React.createElement(Box, { className: 'iui-table-cell-shadow-right', slot: 'shadows' })),
-            cell.column.sticky === 'right' &&
-                tableInstance.state.sticky.isScrolledToLeft && (React.createElement(Box, { className: 'iui-table-cell-shadow-left', slot: 'shadows' })))),
-    };
-    return (React.createElement(React.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer({
-        ...cellRendererProps,
-        isDisabled: () => isDisabled,
-    })) : (React.createElement(DefaultCell, { ...cellRendererProps, isDisabled: () => isDisabled }))));
+      cell.column.sticky === 'right' &&
+        tableInstance.state.sticky.isScrolledToLeft &&
+        React.createElement(Box, {
+          className: 'iui-table-cell-shadow-left',
+          slot: 'shadows',
+        }),
+    ),
+  };
+  return React.createElement(
+    React.Fragment,
+    null,
+    cell.column.cellRenderer
+      ? cell.column.cellRenderer({
+          ...cellRendererProps,
+          isDisabled: () => isDisabled,
+        })
+      : React.createElement(DefaultCell, {
+          ...cellRendererProps,
+          isDisabled: () => isDisabled,
+        }),
+  );
 };

package/esm/core/Table/TablePaginator.js

@@ -1,7 +1,3 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
 import { IconButton } from '../Buttons/IconButton.js';
@@ -9,146 +5,333 @@ import { Button } from '../Buttons/Button.js';
 import { DropdownButton } from '../Buttons/DropdownButton.js';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import { MenuItem } from '../Menu/MenuItem.js';
-import { getBoundedValue, useGlobals, useOverflow, useContainerWidth, SvgChevronLeft, SvgChevronRight, Box, } from '../../utils/index.js';
+import {
+  getBoundedValue,
+  useGlobals,
+  useOverflow,
+  useContainerWidth,
+  SvgChevronLeft,
+  SvgChevronRight,
+  Box,
+} from '../../utils/index.js';
 const defaultLocalization = {
-    pageSizeLabel: (size) => `${size} per page`,
-    rangeLabel: (startIndex, endIndex, totalRows, isLoading) => isLoading
-        ? `${startIndex}-${endIndex}…`
-        : `${startIndex}-${endIndex} of ${totalRows}`,
-    previousPage: 'Previous page',
-    nextPage: 'Next page',
-    goToPageLabel: (page) => `Go to page ${page}`,
-    rowsPerPageLabel: 'Rows per page',
-    rowsSelectedLabel: (totalSelectedRowsCount) => `${totalSelectedRowsCount} ${totalSelectedRowsCount === 1 ? 'row' : 'rows'} selected`,
+  pageSizeLabel: (size) => `${size} per page`,
+  rangeLabel: (startIndex, endIndex, totalRows, isLoading) =>
+    isLoading
+      ? `${startIndex}-${endIndex}…`
+      : `${startIndex}-${endIndex} of ${totalRows}`,
+  previousPage: 'Previous page',
+  nextPage: 'Next page',
+  goToPageLabel: (page) => `Go to page ${page}`,
+  rowsPerPageLabel: 'Rows per page',
+  rowsSelectedLabel: (totalSelectedRowsCount) =>
+    `${totalSelectedRowsCount} ${
+      totalSelectedRowsCount === 1 ? 'row' : 'rows'
+    } selected`,
 };
-/**
- * Table paginator component. Recommended to pass to the `Table` as `paginatorRenderer` prop.
- * Passing `props` from `paginatorRenderer` handles all state management and is enough for basic use-cases.
- * @example
- * <Table
- *   // ...
- *   paginatorRenderer={(props) => <TablePaginator {...props} />}
- * />
- */
 export const TablePaginator = (props) => {
-    const { currentPage, totalRowsCount, pageSize, onPageChange, totalSelectedRowsCount = 0, focusActivationMode = 'manual', isLoading = false, size = 'default', pageSizeList, onPageSizeChange, localization: userLocalization, className, ...rest } = props;
-    useGlobals();
-    const localization = React.useMemo(() => ({ ...defaultLocalization, ...userLocalization }), [userLocalization]);
-    const pageListRef = React.useRef(null);
-    const [focusedIndex, setFocusedIndex] = React.useState(currentPage);
-    React.useEffect(() => {
-        setFocusedIndex(currentPage);
-    }, [currentPage]);
-    const needFocus = React.useRef(false);
-    const isMounted = React.useRef(false);
-    React.useEffect(() => {
-        // Checking `isMounted.current` prevents from focusing on initial load.
-        // Checking `needFocus.current` prevents from focusing page when clicked on previous/next page.
-        if (isMounted.current && needFocus.current) {
-            const buttonToFocus = Array.from(pageListRef.current?.querySelectorAll('.iui-table-paginator-page-button') ?? []).find((el) => el.textContent?.trim() === (focusedIndex + 1).toString());
-            buttonToFocus?.focus();
-            needFocus.current = false;
-        }
-        isMounted.current = true;
-    }, [focusedIndex]);
-    const buttonSize = size != 'default' ? 'small' : undefined;
-    const pageButton = React.useCallback((index, tabIndex = index === focusedIndex ? 0 : -1) => (React.createElement(Button, { key: index, className: 'iui-table-paginator-page-button', styleType: 'borderless', size: buttonSize, "data-iui-active": index === currentPage, onClick: () => onPageChange(index), "aria-current": index === currentPage, "aria-label": localization.goToPageLabel(index + 1), tabIndex: tabIndex }, index + 1)), [focusedIndex, currentPage, localization, buttonSize, onPageChange]);
-    const totalPagesCount = Math.ceil(totalRowsCount / pageSize);
-    const pageList = React.useMemo(() => new Array(totalPagesCount)
+  const {
+    currentPage,
+    totalRowsCount,
+    pageSize,
+    onPageChange,
+    totalSelectedRowsCount = 0,
+    focusActivationMode = 'manual',
+    isLoading = false,
+    size = 'default',
+    pageSizeList,
+    onPageSizeChange,
+    localization: userLocalization,
+    className,
+    ...rest
+  } = props;
+  useGlobals();
+  const localization = React.useMemo(
+    () => ({
+      ...defaultLocalization,
+      ...userLocalization,
+    }),
+    [userLocalization],
+  );
+  const pageListRef = React.useRef(null);
+  const [focusedIndex, setFocusedIndex] = React.useState(currentPage);
+  React.useEffect(() => {
+    setFocusedIndex(currentPage);
+  }, [currentPage]);
+  const needFocus = React.useRef(false);
+  const isMounted = React.useRef(false);
+  React.useEffect(() => {
+    if (isMounted.current && needFocus.current) {
+      const buttonToFocus = Array.from(
+        pageListRef.current?.querySelectorAll(
+          '.iui-table-paginator-page-button',
+        ) ?? [],
+      ).find((el) => el.textContent?.trim() === (focusedIndex + 1).toString());
+      buttonToFocus?.focus();
+      needFocus.current = false;
+    }
+    isMounted.current = true;
+  }, [focusedIndex]);
+  const buttonSize = size != 'default' ? 'small' : undefined;
+  const pageButton = React.useCallback(
+    (index, tabIndex = index === focusedIndex ? 0 : -1) =>
+      React.createElement(
+        Button,
+        {
+          key: index,
+          className: 'iui-table-paginator-page-button',
+          styleType: 'borderless',
+          size: buttonSize,
+          'data-iui-active': index === currentPage,
+          onClick: () => onPageChange(index),
+          'aria-current': index === currentPage,
+          'aria-label': localization.goToPageLabel(index + 1),
+          tabIndex: tabIndex,
+        },
+        index + 1,
+      ),
+    [focusedIndex, currentPage, localization, buttonSize, onPageChange],
+  );
+  const totalPagesCount = Math.ceil(totalRowsCount / pageSize);
+  const pageList = React.useMemo(
+    () =>
+      new Array(totalPagesCount)
         .fill(null)
-        .map((_, index) => pageButton(index)), [pageButton, totalPagesCount]);
-    const [overflowRef, visibleCount] = useOverflow(pageList);
-    const [paginatorResizeRef, paginatorWidth] = useContainerWidth();
-    const onKeyDown = (event) => {
-        // alt + arrow keys are used by browser/assistive technologies
-        if (event.altKey) {
-            return;
+        .map((_, index) => pageButton(index)),
+    [pageButton, totalPagesCount],
+  );
+  const [overflowRef, visibleCount] = useOverflow(pageList);
+  const [paginatorResizeRef, paginatorWidth] = useContainerWidth();
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    const focusPage = (delta) => {
+      const newFocusedIndex = getBoundedValue(
+        focusedIndex + delta,
+        0,
+        totalPagesCount - 1,
+      );
+      needFocus.current = true;
+      if (focusActivationMode === 'auto') {
+        onPageChange(newFocusedIndex);
+      } else {
+        setFocusedIndex(newFocusedIndex);
+      }
+    };
+    switch (event.key) {
+      case 'ArrowRight': {
+        focusPage(+1);
+        event.preventDefault();
+        break;
+      }
+      case 'ArrowLeft': {
+        focusPage(-1);
+        event.preventDefault();
+        break;
+      }
+      case 'Enter':
+      case ' ':
+      case 'Spacebar': {
+        if (focusActivationMode === 'manual') {
+          onPageChange(focusedIndex);
         }
-        const focusPage = (delta) => {
-            const newFocusedIndex = getBoundedValue(focusedIndex + delta, 0, totalPagesCount - 1);
-            needFocus.current = true;
-            if (focusActivationMode === 'auto') {
-                onPageChange(newFocusedIndex);
-            }
-            else {
-                setFocusedIndex(newFocusedIndex);
-            }
-        };
-        switch (event.key) {
-            case 'ArrowRight': {
-                focusPage(+1);
-                event.preventDefault();
-                break;
-            }
-            case 'ArrowLeft': {
-                focusPage(-1);
-                event.preventDefault();
-                break;
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  const halfVisibleCount = Math.floor(visibleCount / 2);
+  let startPage = focusedIndex - halfVisibleCount;
+  let endPage = focusedIndex + halfVisibleCount + 1;
+  if (startPage < 0) {
+    endPage = Math.min(totalPagesCount, endPage + Math.abs(startPage));
+    startPage = 0;
+  }
+  if (endPage > totalPagesCount) {
+    startPage = Math.max(0, startPage - (endPage - totalPagesCount));
+    endPage = totalPagesCount;
+  }
+  const hasNoRows = totalPagesCount === 0;
+  const showPagesList = totalPagesCount > 1 || isLoading;
+  const showPageSizeList =
+    pageSizeList && !!onPageSizeChange && !!totalRowsCount;
+  const ellipsis = React.createElement(
+    Box,
+    {
+      as: 'span',
+      className: cx('iui-table-paginator-ellipsis', {
+        'iui-table-paginator-ellipsis-small': size === 'small',
+      }),
+    },
+    '…',
+  );
+  const noRowsContent = React.createElement(
+    React.Fragment,
+    null,
+    isLoading
+      ? React.createElement(ProgressRadial, {
+          indeterminate: true,
+          size: 'small',
+        })
+      : React.createElement(
+          Button,
+          {
+            styleType: 'borderless',
+            disabled: true,
+            size: buttonSize,
+          },
+          '1',
+        ),
+  );
+  if (!showPagesList && !showPageSizeList) {
+    return null;
+  }
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-table-paginator', className),
+      ref: paginatorResizeRef,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
+        className: 'iui-left',
+      },
+      totalSelectedRowsCount > 0 &&
+        React.createElement(
+          'span',
+          null,
+          localization.rowsSelectedLabel(totalSelectedRowsCount),
+        ),
+    ),
+    showPagesList &&
+      React.createElement(
+        Box,
+        {
+          className: 'iui-center',
+          ref: overflowRef,
+        },
+        React.createElement(
+          IconButton,
+          {
+            styleType: 'borderless',
+            disabled: currentPage === 0,
+            onClick: () => onPageChange(currentPage - 1),
+            size: buttonSize,
+            'aria-label': localization.previousPage,
+          },
+          React.createElement(SvgChevronLeft, null),
+        ),
+        React.createElement(
+          Box,
+          {
+            as: 'span',
+            className: 'iui-table-paginator-pages-group',
+            onKeyDown: onKeyDown,
+            ref: pageListRef,
+          },
+          (() => {
+            if (hasNoRows) {
+              return noRowsContent;
             }
-            case 'Enter':
-            case ' ':
-            case 'Spacebar': {
-                if (focusActivationMode === 'manual') {
-                    onPageChange(focusedIndex);
-                }
-                break;
+            if (visibleCount === 1) {
+              return pageButton(focusedIndex);
             }
-            default:
-                break;
-        }
-    };
-    const halfVisibleCount = Math.floor(visibleCount / 2);
-    let startPage = focusedIndex - halfVisibleCount;
-    let endPage = focusedIndex + halfVisibleCount + 1;
-    if (startPage < 0) {
-        endPage = Math.min(totalPagesCount, endPage + Math.abs(startPage)); // If no room at the beginning, show extra pages at the end
-        startPage = 0;
-    }
-    if (endPage > totalPagesCount) {
-        startPage = Math.max(0, startPage - (endPage - totalPagesCount)); // If no room at the end, show extra pages at the beginning
-        endPage = totalPagesCount;
-    }
-    const hasNoRows = totalPagesCount === 0;
-    const showPagesList = totalPagesCount > 1 || isLoading;
-    const showPageSizeList = pageSizeList && !!onPageSizeChange && !!totalRowsCount;
-    const ellipsis = (React.createElement(Box, { as: 'span', className: cx('iui-table-paginator-ellipsis', {
-            'iui-table-paginator-ellipsis-small': size === 'small',
-        }) }, "\u2026"));
-    const noRowsContent = (React.createElement(React.Fragment, null, isLoading ? (React.createElement(ProgressRadial, { indeterminate: true, size: 'small' })) : (React.createElement(Button, { styleType: 'borderless', disabled: true, size: buttonSize }, "1"))));
-    if (!showPagesList && !showPageSizeList) {
-        return null;
-    }
-    return (React.createElement(Box, { className: cx('iui-table-paginator', className), ref: paginatorResizeRef, ...rest },
-        React.createElement(Box, { className: 'iui-left' }, totalSelectedRowsCount > 0 && (React.createElement("span", null, localization.rowsSelectedLabel(totalSelectedRowsCount)))),
-        showPagesList && (React.createElement(Box, { className: 'iui-center', ref: overflowRef },
-            React.createElement(IconButton, { styleType: 'borderless', disabled: currentPage === 0, onClick: () => onPageChange(currentPage - 1), size: buttonSize, "aria-label": localization.previousPage },
-                React.createElement(SvgChevronLeft, null)),
-            React.createElement(Box, { as: 'span', className: 'iui-table-paginator-pages-group', onKeyDown: onKeyDown, ref: pageListRef }, (() => {
-                if (hasNoRows) {
-                    return noRowsContent;
-                }
-                if (visibleCount === 1) {
-                    return pageButton(focusedIndex);
-                }
-                return (React.createElement(React.Fragment, null,
-                    startPage !== 0 && (React.createElement(React.Fragment, null,
-                        pageButton(0, 0),
-                        ellipsis)),
-                    pageList.slice(startPage, endPage),
-                    endPage !== totalPagesCount && !isLoading && (React.createElement(React.Fragment, null,
-                        ellipsis,
-                        pageButton(totalPagesCount - 1, 0))),
-                    isLoading && (React.createElement(React.Fragment, null,
-                        ellipsis,
-                        React.createElement(ProgressRadial, { indeterminate: true, size: 'small' })))));
-            })()),
-            React.createElement(IconButton, { styleType: 'borderless', disabled: currentPage === totalPagesCount - 1 || hasNoRows, onClick: () => onPageChange(currentPage + 1), size: buttonSize, "aria-label": localization.nextPage },
-                React.createElement(SvgChevronRight, null)))),
-        React.createElement(Box, { className: 'iui-right' }, showPageSizeList && (React.createElement(React.Fragment, null,
-            localization.rowsPerPageLabel !== null &&
-                paginatorWidth >= 1024 && (React.createElement(Box, { as: 'span', className: 'iui-table-paginator-page-size-label' }, localization.rowsPerPageLabel)),
-            React.createElement(DropdownButton, { styleType: 'borderless', size: buttonSize, menuItems: (close) => pageSizeList.map((size) => (React.createElement(MenuItem, { key: size, isSelected: size === pageSize, onClick: () => {
+            return React.createElement(
+              React.Fragment,
+              null,
+              startPage !== 0 &&
+                React.createElement(
+                  React.Fragment,
+                  null,
+                  pageButton(0, 0),
+                  ellipsis,
+                ),
+              pageList.slice(startPage, endPage),
+              endPage !== totalPagesCount &&
+                !isLoading &&
+                React.createElement(
+                  React.Fragment,
+                  null,
+                  ellipsis,
+                  pageButton(totalPagesCount - 1, 0),
+                ),
+              isLoading &&
+                React.createElement(
+                  React.Fragment,
+                  null,
+                  ellipsis,
+                  React.createElement(ProgressRadial, {
+                    indeterminate: true,
+                    size: 'small',
+                  }),
+                ),
+            );
+          })(),
+        ),
+        React.createElement(
+          IconButton,
+          {
+            styleType: 'borderless',
+            disabled: currentPage === totalPagesCount - 1 || hasNoRows,
+            onClick: () => onPageChange(currentPage + 1),
+            size: buttonSize,
+            'aria-label': localization.nextPage,
+          },
+          React.createElement(SvgChevronRight, null),
+        ),
+      ),
+    React.createElement(
+      Box,
+      {
+        className: 'iui-right',
+      },
+      showPageSizeList &&
+        React.createElement(
+          React.Fragment,
+          null,
+          localization.rowsPerPageLabel !== null &&
+            paginatorWidth >= 1024 &&
+            React.createElement(
+              Box,
+              {
+                as: 'span',
+                className: 'iui-table-paginator-page-size-label',
+              },
+              localization.rowsPerPageLabel,
+            ),
+          React.createElement(
+            DropdownButton,
+            {
+              styleType: 'borderless',
+              size: buttonSize,
+              menuItems: (close) =>
+                pageSizeList.map((size) =>
+                  React.createElement(
+                    MenuItem,
+                    {
+                      key: size,
+                      isSelected: size === pageSize,
+                      onClick: () => {
                         close();
                         onPageSizeChange(size);
-                    } }, localization.pageSizeLabel(size)))) }, localization.rangeLabel(currentPage * pageSize + 1, Math.min(totalRowsCount, (currentPage + 1) * pageSize), totalRowsCount, isLoading)))))));
+                      },
+                    },
+                    localization.pageSizeLabel(size),
+                  ),
+                ),
+            },
+            localization.rangeLabel(
+              currentPage * pageSize + 1,
+              Math.min(totalRowsCount, (currentPage + 1) * pageSize),
+              totalRowsCount,
+              isLoading,
+            ),
+          ),
+        ),
+    ),
+  );
 };

package/esm/core/Table/TableRowMemoized.d.ts

@@ -8,43 +8,23 @@ import type { CellProps, Row, TableInstance, TableState } from '../../react-tabl
  */
 export declare const TableRow: <T extends Record<string, unknown>>(props: {
     row: Row<T>;
-    rowProps?: ((row: Row<T>) => React.ComponentPropsWithRef<'div'> & {
-        status?: 'positive' | 'warning' | 'negative';
+    rowProps?: (row: Row<T>) => React.ComponentPropsWithRef<"div"> & {
+        status?: "positive" | "warning" | "negative";
         isLoading?: boolean;
-    }) | undefined;
+    };
     isLast: boolean;
     onRowInViewport: React.MutableRefObject<((rowData: T) => void) | undefined>;
     onBottomReached: React.MutableRefObject<(() => void) | undefined>;
     intersectionMargin: number;
     state: TableState<T>;
-    onClick?: ((event: React.MouseEvent, row: Row<T>) => void) | undefined;
-    subComponent?: ((row: Row<T>) => React.ReactNode) | undefined;
+    onClick?: (event: React.MouseEvent, row: Row<T>) => void;
+    subComponent?: (row: Row<T>) => React.ReactNode;
     isDisabled: boolean;
     tableHasSubRows: boolean;
     tableInstance: TableInstance<T>;
-    expanderCell?: ((cellProps: CellProps<T>) => React.ReactNode) | undefined;
+    expanderCell?: (cellProps: CellProps<T>) => React.ReactNode;
     scrollContainerRef: HTMLDivElement | null;
-    tableRowRef?: React.Ref<HTMLDivElement> | undefined;
-    density?: "default" | "condensed" | "extra-condensed" | undefined;
-}) => React.JSX.Element;
-export declare const TableRowMemoized: <T extends Record<string, unknown>>(props: {
-    row: Row<T>;
-    rowProps?: ((row: Row<T>) => React.ComponentPropsWithRef<'div'> & {
-        status?: 'positive' | 'warning' | 'negative';
-        isLoading?: boolean;
-    }) | undefined;
-    isLast: boolean;
-    onRowInViewport: React.MutableRefObject<((rowData: T) => void) | undefined>;
-    onBottomReached: React.MutableRefObject<(() => void) | undefined>;
-    intersectionMargin: number;
-    state: TableState<T>;
-    onClick?: ((event: React.MouseEvent, row: Row<T>) => void) | undefined;
-    subComponent?: ((row: Row<T>) => React.ReactNode) | undefined;
-    isDisabled: boolean;
-    tableHasSubRows: boolean;
-    tableInstance: TableInstance<T>;
-    expanderCell?: ((cellProps: CellProps<T>) => React.ReactNode) | undefined;
-    scrollContainerRef: HTMLDivElement | null;
-    tableRowRef?: React.Ref<HTMLDivElement> | undefined;
-    density?: "default" | "condensed" | "extra-condensed" | undefined;
+    tableRowRef?: React.Ref<HTMLDivElement>;
+    density?: "default" | "condensed" | "extra-condensed";
 }) => React.JSX.Element;
+export declare const TableRowMemoized: typeof TableRow;