@itwin/itwinui-react 3.12.2 → 3.13.0

package/esm/core/Table/TableCell.js

@@ -6,7 +6,7 @@ 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 {
+  let {
     cell,
     cellIndex,
     isDisabled,
@@ -15,10 +15,10 @@ export const TableCell = (props) => {
     expanderCell,
     density,
   } = props;
-  const hasSubRowExpander =
+  let hasSubRowExpander =
     cellIndex ===
     cell.row.cells.findIndex((c) => c.column.id !== SELECTION_CELL_ID);
-  const cellElementProps = cell.getCellProps({
+  let cellElementProps = cell.getCellProps({
     className: cx('iui-table-cell', cell.column.cellClassName, {
       'iui-table-cell-sticky': !!cell.column.sticky,
     }),
@@ -33,16 +33,14 @@ export const TableCell = (props) => {
       ...getStickyStyle(cell.column, tableInstance.visibleColumns),
     },
   });
-  const cellProps = {
+  let cellProps = {
     ...tableInstance,
-    ...{
-      cell,
-      row: cell.row,
-      value: cell.value,
-      column: cell.column,
-    },
+    cell,
+    row: cell.row,
+    value: cell.value,
+    column: cell.column,
   };
-  const cellContent = React.createElement(
+  let cellContent = React.createElement(
     React.Fragment,
     null,
     tableHasSubRows &&
@@ -58,20 +56,20 @@ export const TableCell = (props) => {
       }),
     cell.render('Cell'),
   );
-  const cellRendererProps = {
+  let cellRendererProps = {
     cellElementProps,
     cellProps,
     children: React.createElement(
       React.Fragment,
       null,
       cellContent,
-      cell.column.sticky === 'left' &&
+      'left' === cell.column.sticky &&
         tableInstance.state.sticky.isScrolledToRight &&
         React.createElement(Box, {
           className: 'iui-table-cell-shadow-right',
           slot: 'shadows',
         }),
-      cell.column.sticky === 'right' &&
+      'right' === cell.column.sticky &&
         tableInstance.state.sticky.isScrolledToLeft &&
         React.createElement(Box, {
           className: 'iui-table-cell-shadow-left',

package/esm/core/Table/TablePaginator.js

@@ -14,7 +14,7 @@ import {
   SvgChevronRight,
   Box,
 } from '../../utils/index.js';
-const defaultLocalization = {
+let defaultLocalization = {
   pageSizeLabel: (size) => `${size} per page`,
   rangeLabel: (startIndex, endIndex, totalRows, isLoading) =>
     isLoading
@@ -26,11 +26,11 @@ const defaultLocalization = {
   rowsPerPageLabel: 'Rows per page',
   rowsSelectedLabel: (totalSelectedRowsCount) =>
     `${totalSelectedRowsCount} ${
-      totalSelectedRowsCount === 1 ? 'row' : 'rows'
+      1 === totalSelectedRowsCount ? 'row' : 'rows'
     } selected`,
 };
 export const TablePaginator = (props) => {
-  const {
+  let {
     currentPage,
     totalRowsCount,
     pageSize,
@@ -46,23 +46,23 @@ export const TablePaginator = (props) => {
     ...rest
   } = props;
   useGlobals();
-  const localization = React.useMemo(
+  let localization = React.useMemo(
     () => ({
       ...defaultLocalization,
       ...userLocalization,
     }),
     [userLocalization],
   );
-  const pageListRef = React.useRef(null);
-  const [focusedIndex, setFocusedIndex] = React.useState(currentPage);
+  let pageListRef = React.useRef(null);
+  let [focusedIndex, setFocusedIndex] = React.useState(currentPage);
   React.useEffect(() => {
     setFocusedIndex(currentPage);
   }, [currentPage]);
-  const needFocus = React.useRef(false);
-  const isMounted = React.useRef(false);
+  let needFocus = React.useRef(false);
+  let isMounted = React.useRef(false);
   React.useEffect(() => {
     if (isMounted.current && needFocus.current) {
-      const buttonToFocus = Array.from(
+      let buttonToFocus = Array.from(
         pageListRef.current?.querySelectorAll(
           '.iui-table-paginator-page-button',
         ) ?? [],
@@ -72,8 +72,8 @@ export const TablePaginator = (props) => {
     }
     isMounted.current = true;
   }, [focusedIndex]);
-  const buttonSize = size != 'default' ? 'small' : undefined;
-  const pageButton = React.useCallback(
+  let buttonSize = 'default' != size ? 'small' : void 0;
+  let pageButton = React.useCallback(
     (index, tabIndex = index === focusedIndex ? 0 : -1) =>
       React.createElement(
         Button,
@@ -92,57 +92,47 @@ export const TablePaginator = (props) => {
       ),
     [focusedIndex, currentPage, localization, buttonSize, onPageChange],
   );
-  const totalPagesCount = Math.ceil(totalRowsCount / pageSize);
-  const pageList = React.useMemo(
+  let totalPagesCount = Math.ceil(totalRowsCount / pageSize);
+  let 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) => {
-    if (event.altKey) {
-      return;
-    }
-    const focusPage = (delta) => {
-      const newFocusedIndex = getBoundedValue(
+  let [overflowRef, visibleCount] = useOverflow(pageList);
+  let [paginatorResizeRef, paginatorWidth] = useContainerWidth();
+  let onKeyDown = (event) => {
+    if (event.altKey) return;
+    let focusPage = (delta) => {
+      let newFocusedIndex = getBoundedValue(
         focusedIndex + delta,
         0,
         totalPagesCount - 1,
       );
       needFocus.current = true;
-      if (focusActivationMode === 'auto') {
-        onPageChange(newFocusedIndex);
-      } else {
-        setFocusedIndex(newFocusedIndex);
-      }
+      if ('auto' === focusActivationMode) onPageChange(newFocusedIndex);
+      else setFocusedIndex(newFocusedIndex);
     };
     switch (event.key) {
-      case 'ArrowRight': {
-        focusPage(+1);
+      case 'ArrowRight':
+        focusPage(1);
         event.preventDefault();
         break;
-      }
-      case 'ArrowLeft': {
+      case 'ArrowLeft':
         focusPage(-1);
         event.preventDefault();
         break;
-      }
       case 'Enter':
       case ' ':
-      case 'Spacebar': {
-        if (focusActivationMode === 'manual') {
-          onPageChange(focusedIndex);
-        }
+      case 'Spacebar':
+        if ('manual' === focusActivationMode) onPageChange(focusedIndex);
         break;
-      }
       default:
         break;
     }
   };
-  const halfVisibleCount = Math.floor(visibleCount / 2);
+  let halfVisibleCount = Math.floor(visibleCount / 2);
   let startPage = focusedIndex - halfVisibleCount;
   let endPage = focusedIndex + halfVisibleCount + 1;
   if (startPage < 0) {
@@ -153,21 +143,20 @@ export const TablePaginator = (props) => {
     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(
+  let hasNoRows = 0 === totalPagesCount;
+  let showPagesList = totalPagesCount > 1 || isLoading;
+  let showPageSizeList = pageSizeList && !!onPageSizeChange && !!totalRowsCount;
+  let ellipsis = React.createElement(
     Box,
     {
       as: 'span',
       className: cx('iui-table-paginator-ellipsis', {
-        'iui-table-paginator-ellipsis-small': size === 'small',
+        'iui-table-paginator-ellipsis-small': 'small' === size,
       }),
     },
     '…',
   );
-  const noRowsContent = React.createElement(
+  let noRowsContent = React.createElement(
     React.Fragment,
     null,
     isLoading
@@ -185,9 +174,7 @@ export const TablePaginator = (props) => {
           '1',
         ),
   );
-  if (!showPagesList && !showPageSizeList) {
-    return null;
-  }
+  if (!showPagesList && !showPageSizeList) return null;
   return React.createElement(
     Box,
     {
@@ -218,7 +205,7 @@ export const TablePaginator = (props) => {
           IconButton,
           {
             styleType: 'borderless',
-            disabled: currentPage === 0,
+            disabled: 0 === currentPage,
             onClick: () => onPageChange(currentPage - 1),
             size: buttonSize,
             'aria-label': localization.previousPage,
@@ -234,16 +221,12 @@ export const TablePaginator = (props) => {
             ref: pageListRef,
           },
           (() => {
-            if (hasNoRows) {
-              return noRowsContent;
-            }
-            if (visibleCount === 1) {
-              return pageButton(focusedIndex);
-            }
+            if (hasNoRows) return noRowsContent;
+            if (1 === visibleCount) return pageButton(focusedIndex);
             return React.createElement(
               React.Fragment,
               null,
-              startPage !== 0 &&
+              0 !== startPage &&
                 React.createElement(
                   React.Fragment,
                   null,
@@ -293,7 +276,7 @@ export const TablePaginator = (props) => {
         React.createElement(
           React.Fragment,
           null,
-          localization.rowsPerPageLabel !== null &&
+          null !== localization.rowsPerPageLabel &&
             paginatorWidth >= 1024 &&
             React.createElement(
               Box,

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { CellProps, Row, TableInstance, TableState } from '../../react-table/react-table.js';
+import type { Virtualizer, VirtualItem } from '@tanstack/react-virtual';
 /**
  * Memoization is needed to avoid unnecessary re-renders of all rows when additional data is added when lazy-loading.
  * Using `isLast` here instead of passing data length to avoid re-renders of all rows when more data is added. Now only the last row re-renders.
@@ -26,5 +27,7 @@ export declare const TableRow: <T extends Record<string, unknown>>(props: {
     scrollContainerRef: HTMLDivElement | null;
     tableRowRef?: React.Ref<HTMLDivElement>;
     density?: "default" | "condensed" | "extra-condensed";
+    virtualItem?: VirtualItem<Element>;
+    virtualizer?: Virtualizer<Element, Element>;
 }) => React.JSX.Element;
 export declare const TableRowMemoized: typeof TableRow;

package/esm/core/Table/TableRowMemoized.js

@@ -8,7 +8,7 @@ import {
 } from '../../utils/index.js';
 import { TableCell } from './TableCell.js';
 export const TableRow = (props) => {
-  const {
+  let {
     row,
     rowProps,
     isLast,
@@ -24,49 +24,60 @@ export const TableRow = (props) => {
     scrollContainerRef,
     tableRowRef,
     density,
+    virtualItem,
+    virtualizer,
   } = props;
-  const onIntersect = React.useCallback(() => {
+  let onIntersect = React.useCallback(() => {
     onRowInViewport.current?.(row.original);
     isLast && onBottomReached.current?.();
   }, [isLast, onBottomReached, onRowInViewport, row.original]);
-  const intersectionRoot = React.useMemo(() => {
-    const isTableScrollable =
+  let intersectionRoot = React.useMemo(() => {
+    let isTableScrollable =
       (scrollContainerRef?.scrollHeight ?? 0) >
       (scrollContainerRef?.offsetHeight ?? 0);
-    if (isTableScrollable) {
-      return scrollContainerRef;
-    }
-    return undefined;
+    if (isTableScrollable) return scrollContainerRef;
   }, [scrollContainerRef]);
-  const intersectionRef = useIntersection(onIntersect, {
+  let intersectionRef = useIntersection(onIntersect, {
     rootMargin: `${intersectionMargin}px`,
     root: intersectionRoot,
   });
-  const userRowProps = rowProps?.(row) ?? {};
-  const { status, isLoading, ...restUserRowProps } = userRowProps;
-  const mergedProps = {
+  let userRowProps = rowProps?.(row) ?? {};
+  let { status, isLoading, ...restUserRowProps } = userRowProps;
+  let mergedProps = {
     ...row.getRowProps({
       style: {
-        flex: `0 0 auto`,
+        flex: '0 0 auto',
         minWidth: '100%',
+        ...(null != virtualItem
+          ? {
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              transform: `translateY(${virtualItem.start}px)`,
+            }
+          : {}),
       },
     }),
     ...restUserRowProps,
-    ...{
-      className: cx(
-        'iui-table-row',
-        {
-          'iui-table-row-expanded': row.isExpanded && subComponent,
-          'iui-loading': isLoading,
-        },
-        userRowProps?.className,
-      ),
-      'aria-selected': row.isSelected || undefined,
-      'aria-disabled': isDisabled || undefined,
-      'data-iui-status': status,
-    },
+    className: cx(
+      'iui-table-row',
+      {
+        'iui-table-row-expanded': row.isExpanded && subComponent,
+        'iui-loading': isLoading,
+      },
+      userRowProps?.className,
+    ),
+    'aria-selected': row.isSelected || void 0,
+    'aria-disabled': isDisabled || void 0,
+    'data-iui-status': status,
+    'data-iui-index': virtualItem?.index,
   };
-  const refs = useMergedRefs(intersectionRef, mergedProps.ref, tableRowRef);
+  let refs = useMergedRefs(
+    intersectionRef,
+    mergedProps.ref,
+    tableRowRef,
+    virtualizer?.measureElement,
+  );
   return React.createElement(
     React.Fragment,
     null,
@@ -80,8 +91,8 @@ export const TableRow = (props) => {
           onClick?.(event, row);
         },
       },
-      row.cells.map((cell, index) => {
-        return React.createElement(TableCell, {
+      row.cells.map((cell, index) =>
+        React.createElement(TableCell, {
           key: cell.getCellProps().key,
           cell: cell,
           cellIndex: index,
@@ -90,8 +101,8 @@ export const TableRow = (props) => {
           tableInstance: tableInstance,
           expanderCell: expanderCell,
           density: density,
-        });
-      }),
+        }),
+      ),
     ),
     subComponent &&
       React.createElement(
@@ -110,10 +121,8 @@ export const TableRow = (props) => {
       ),
   );
 };
-const hasAnySelectedSubRow = (row, selectedRowIds) => {
-  if (selectedRowIds?.[row.id]) {
-    return true;
-  }
+let hasAnySelectedSubRow = (row, selectedRowIds) => {
+  if (selectedRowIds?.[row.id]) return true;
   return row.subRows.some((subRow) =>
     hasAnySelectedSubRow(subRow, selectedRowIds),
   );
@@ -157,5 +166,8 @@ export const TableRowMemoized = React.memo(
       nextProp.state.sticky.isScrolledToLeft &&
     prevProp.state.sticky.isScrolledToRight ===
       nextProp.state.sticky.isScrolledToRight &&
-    prevProp.density === nextProp.density,
+    prevProp.density === nextProp.density &&
+    prevProp.virtualizer === nextProp.virtualizer &&
+    prevProp.virtualItem?.index === nextProp.virtualItem?.index &&
+    prevProp.virtualItem?.start === nextProp.virtualItem?.start,
 );

package/esm/core/Table/actionHandlers/expandHandler.js

@@ -3,11 +3,9 @@ export const onExpandHandler = (newState, instance, onExpand) => {
     onExpand?.([], newState);
     return;
   }
-  const expandedData = [];
+  let expandedData = [];
   instance.preFilteredFlatRows.forEach((row) => {
-    if (newState.expanded[row.id]) {
-      expandedData.push(row.original);
-    }
+    if (newState.expanded[row.id]) expandedData.push(row.original);
   });
   onExpand?.(expandedData, newState);
 };

package/esm/core/Table/actionHandlers/filterHandler.js

@@ -5,12 +5,12 @@ export const onFilterHandler = (
   currentFilter,
   instance,
 ) => {
-  const previousFilter = previousState.filters.find(
+  let previousFilter = previousState.filters.find(
     (f) => f.id === action.columnId,
   );
   if (previousFilter?.value != action.filterValue) {
-    const filters = newState.filters.map((f) => {
-      const column = instance?.allColumns.find((c) => c.id === f.id);
+    let filters = newState.filters.map((f) => {
+      let column = instance?.allColumns.find((c) => c.id === f.id);
       return {
         id: f.id,
         value: f.value,

package/esm/core/Table/actionHandlers/resizeHandler.js

@@ -1,18 +1,14 @@
-export const onTableResizeStart = (state) => {
-  return {
-    ...state,
-    isTableResizing: true,
-  };
-};
-export const onTableResizeEnd = (state, action) => {
-  return {
-    ...state,
-    isTableResizing: false,
-    columnResizing: {
-      ...state.columnResizing,
-      columnWidths: {
-        ...action.columnWidths,
-      },
+export const onTableResizeStart = (state) => ({
+  ...state,
+  isTableResizing: true,
+});
+export const onTableResizeEnd = (state, action) => ({
+  ...state,
+  isTableResizing: false,
+  columnResizing: {
+    ...state.columnResizing,
+    columnWidths: {
+      ...action.columnWidths,
     },
-  };
-};
+  },
+});

package/esm/core/Table/actionHandlers/selectHandler.js

@@ -1,31 +1,26 @@
-const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
+let onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
   if (!instance?.rows.length) {
     onSelect?.([], newState);
     return;
   }
-  const newSelectedRowIds = {};
-  const handleRow = (row) => {
-    if (isRowDisabled?.(row.original)) {
-      return false;
-    }
+  let newSelectedRowIds = {};
+  let handleRow = (row) => {
+    if (isRowDisabled?.(row.original)) return false;
     let isAllSubSelected = true;
     row.initialSubRows.forEach((subRow) => {
-      const result = handleRow(subRow);
-      if (!result) {
-        isAllSubSelected = false;
-      }
+      let result = handleRow(subRow);
+      if (!result) isAllSubSelected = false;
     });
     if (
       (!instance.selectSubRows && newState.selectedRowIds[row.id]) ||
       (!row.initialSubRows.length && newState.selectedRowIds[row.id]) ||
       (row.initialSubRows.length && isAllSubSelected)
-    ) {
+    )
       newSelectedRowIds[row.id] = true;
-    }
     return !!newSelectedRowIds[row.id];
   };
   instance.initialRows.forEach((row) => handleRow(row));
-  const selectedData = getSelectedData(newSelectedRowIds, instance);
+  let selectedData = getSelectedData(newSelectedRowIds, instance);
   newState.selectedRowIds = newSelectedRowIds;
   onSelect?.(selectedData, newState);
 };
@@ -46,17 +41,17 @@ export const onSingleSelectHandler = (
   onSelect,
   isRowDisabled,
 ) => {
-  const selectedRowIds = {
+  let selectedRowIds = {
     [action.id]: true,
   };
   if (instance?.selectSubRows) {
-    const handleRow = (row) => {
+    let handleRow = (row) => {
       selectedRowIds[row.id] = true;
       row.subRows.forEach((r) => handleRow(r));
     };
     handleRow(instance.rowsById[action.id]);
   }
-  const newState = {
+  let newState = {
     ...state,
     lastSelectedRowId: action.id,
     selectedRowIds,
@@ -71,9 +66,7 @@ export const onShiftSelectHandler = (
   onSelect,
   isRowDisabled,
 ) => {
-  if (instance == null) {
-    return state;
-  }
+  if (null == instance) return state;
   let startIndex = Math.max(
     0,
     instance.flatRows.findIndex((row) => row.id === state.lastSelectedRowId),
@@ -83,14 +76,14 @@ export const onShiftSelectHandler = (
     instance.flatRows.findIndex((row) => row.id === action.id),
   );
   if (startIndex > endIndex) {
-    const temp = startIndex;
+    let temp = startIndex;
     startIndex = endIndex;
     endIndex = temp;
   }
-  const isLastSelectedRowIdSelected =
-    state.lastSelectedRowId == null ||
+  let isLastSelectedRowIdSelected =
+    null == state.lastSelectedRowId ||
     !!state.selectedRowIds[state.lastSelectedRowId];
-  const selectedRowIds = !!action.ctrlPressed
+  let selectedRowIds = action.ctrlPressed
     ? {
         ...state.selectedRowIds,
       }
@@ -98,24 +91,22 @@ export const onShiftSelectHandler = (
   instance.flatRows
     .slice(startIndex, endIndex + 1)
     .forEach((r) => (selectedRowIds[r.id] = isLastSelectedRowIdSelected));
-  const handleRow = (row) => {
+  let handleRow = (row) => {
     selectedRowIds[row.id] = isLastSelectedRowIdSelected;
     row.subRows.forEach((r) => handleRow(r));
   };
   handleRow(instance.flatRows[endIndex]);
-  const newState = {
+  let newState = {
     ...state,
     selectedRowIds,
   };
   onSelectHandler(newState, instance, onSelect, isRowDisabled);
   return newState;
 };
-const getSelectedData = (selectedRowIds, instance) => {
-  const selectedData = [];
-  const setSelectedData = (row) => {
-    if (selectedRowIds[row.id]) {
-      selectedData.push(row.original);
-    }
+let getSelectedData = (selectedRowIds, instance) => {
+  let selectedData = [];
+  let setSelectedData = (row) => {
+    if (selectedRowIds[row.id]) selectedData.push(row.original);
     row.initialSubRows.forEach((subRow) => setSelectedData(subRow));
   };
   instance?.initialRows.forEach((row) => setSelectedData(row));

package/esm/core/Table/cells/DefaultCell.d.ts

@@ -32,4 +32,7 @@ export type DefaultCellProps<T extends Record<string, unknown>> = {
  *   cellRenderer: (props) => <DefaultCell {...props} />,
  * }
  */
-export declare const DefaultCell: <T extends Record<string, unknown>>(props: DefaultCellProps<T>) => React.JSX.Element;
+export declare const DefaultCell: {
+    <T extends Record<string, unknown>>(props: DefaultCellProps<T>): React.JSX.Element;
+    displayName: string;
+};

package/esm/core/Table/cells/DefaultCell.js

@@ -3,15 +3,15 @@ import cx from 'classnames';
 import { Box, LineClamp, ShadowRoot } from '../../../utils/index.js';
 import { TableColumnsContext } from '../utils.js';
 export const DefaultCell = (props) => {
-  const columnsProp = React.useContext(TableColumnsContext);
-  const isCustomCell = React.useMemo(
+  let columnsProp = React.useContext(TableColumnsContext);
+  let isCustomCell = React.useMemo(
     () =>
       columnsProp
         .find(({ id }) => props.cellProps.column.id === id)
         ?.hasOwnProperty('Cell'),
     [props.cellProps.column.id, columnsProp],
   );
-  const {
+  let {
     cellElementProps: {
       className: cellElementClassName,
       style: cellElementStyle,
@@ -25,7 +25,7 @@ export const DefaultCell = (props) => {
     className,
     style,
     status,
-    clamp = typeof cellProps.value === 'string' && !isCustomCell,
+    clamp = 'string' == typeof cellProps.value && !isCustomCell,
     ...rest
   } = props;
   return React.createElement(
@@ -34,7 +34,7 @@ export const DefaultCell = (props) => {
       ...cellElementProps,
       ...rest,
       className: cx(cellElementClassName, className),
-      'aria-disabled': isDisabled?.(cellProps.row.original) || undefined,
+      'aria-disabled': isDisabled?.(cellProps.row.original) || void 0,
       'data-iui-status': status,
       style: {
         ...cellElementStyle,

package/esm/core/Table/cells/EditableCell.d.ts

@@ -30,4 +30,7 @@ export type EditableCellProps<T extends Record<string, unknown>> = CellRendererP
  *   cellRenderer: (props) => <EditableCell {...props} onCellEdit={onCellEditHandler} />,
  * }
  */
-export declare const EditableCell: <T extends Record<string, unknown>>(props: EditableCellProps<T>) => React.JSX.Element;
+export declare const EditableCell: {
+    <T extends Record<string, unknown>>(props: EditableCellProps<T>): React.JSX.Element;
+    displayName: string;
+};