@itwin/itwinui-react 3.12.2 → 3.13.0

package/cjs/core/Table/TableCell.js

@@ -18,7 +18,7 @@ const _index = require('./columns/index.js');
 const _index1 = require('./cells/index.js');
 const _index2 = require('../../utils/index.js');
 const TableCell = (props) => {
-  const {
+  let {
     cell,
     cellIndex,
     isDisabled,
@@ -27,10 +27,10 @@ const TableCell = (props) => {
     expanderCell,
     density,
   } = props;
-  const hasSubRowExpander =
+  let hasSubRowExpander =
     cellIndex ===
     cell.row.cells.findIndex((c) => c.column.id !== _index.SELECTION_CELL_ID);
-  const cellElementProps = cell.getCellProps({
+  let cellElementProps = cell.getCellProps({
     className: (0, _classnames.default)(
       'iui-table-cell',
       cell.column.cellClassName,
@@ -52,16 +52,14 @@ const TableCell = (props) => {
       ...(0, _utils.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 &&
@@ -77,20 +75,20 @@ 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(_index2.Box, {
           className: 'iui-table-cell-shadow-right',
           slot: 'shadows',
         }),
-      cell.column.sticky === 'right' &&
+      'right' === cell.column.sticky &&
         tableInstance.state.sticky.isScrolledToLeft &&
         _react.createElement(_index2.Box, {
           className: 'iui-table-cell-shadow-left',

package/cjs/core/Table/TablePaginator.js

@@ -30,11 +30,11 @@ const defaultLocalization = {
   rowsPerPageLabel: 'Rows per page',
   rowsSelectedLabel: (totalSelectedRowsCount) =>
     `${totalSelectedRowsCount} ${
-      totalSelectedRowsCount === 1 ? 'row' : 'rows'
+      1 === totalSelectedRowsCount ? 'row' : 'rows'
     } selected`,
 };
 const TablePaginator = (props) => {
-  const {
+  let {
     currentPage,
     totalRowsCount,
     pageSize,
@@ -50,23 +50,23 @@ const TablePaginator = (props) => {
     ...rest
   } = props;
   (0, _index.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',
         ) ?? [],
@@ -76,8 +76,8 @@ 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.Button,
@@ -96,57 +96,47 @@ 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] = (0, _index.useOverflow)(pageList);
-  const [paginatorResizeRef, paginatorWidth] = (0, _index.useContainerWidth)();
-  const onKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    const focusPage = (delta) => {
-      const newFocusedIndex = (0, _index.getBoundedValue)(
+  let [overflowRef, visibleCount] = (0, _index.useOverflow)(pageList);
+  let [paginatorResizeRef, paginatorWidth] = (0, _index.useContainerWidth)();
+  let onKeyDown = (event) => {
+    if (event.altKey) return;
+    let focusPage = (delta) => {
+      let newFocusedIndex = (0, _index.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) {
@@ -157,21 +147,20 @@ 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(
     _index.Box,
     {
       as: 'span',
       className: (0, _classnames.default)('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
@@ -189,9 +178,7 @@ const TablePaginator = (props) => {
           '1',
         ),
   );
-  if (!showPagesList && !showPageSizeList) {
-    return null;
-  }
+  if (!showPagesList && !showPageSizeList) return null;
   return _react.createElement(
     _index.Box,
     {
@@ -222,7 +209,7 @@ const TablePaginator = (props) => {
           _IconButton.IconButton,
           {
             styleType: 'borderless',
-            disabled: currentPage === 0,
+            disabled: 0 === currentPage,
             onClick: () => onPageChange(currentPage - 1),
             size: buttonSize,
             'aria-label': localization.previousPage,
@@ -238,16 +225,12 @@ 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,
@@ -297,7 +280,7 @@ const TablePaginator = (props) => {
         _react.createElement(
           _react.Fragment,
           null,
-          localization.rowsPerPageLabel !== null &&
+          null !== localization.rowsPerPageLabel &&
             paginatorWidth >= 1024 &&
             _react.createElement(
               _index.Box,

package/cjs/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/cjs/core/Table/TableRowMemoized.js

@@ -24,7 +24,7 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const _TableCell = require('./TableCell.js');
 const TableRow = (props) => {
-  const {
+  let {
     row,
     rowProps,
     isLast,
@@ -40,52 +40,59 @@ 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 = (0, _index.useIntersection)(onIntersect, {
+  let intersectionRef = (0, _index.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: (0, _classnames.default)(
-        '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: (0, _classnames.default)(
+      '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 = (0, _index.useMergedRefs)(
+  let refs = (0, _index.useMergedRefs)(
     intersectionRef,
     mergedProps.ref,
     tableRowRef,
+    virtualizer?.measureElement,
   );
   return _react.createElement(
     _react.Fragment,
@@ -100,8 +107,8 @@ const TableRow = (props) => {
           onClick?.(event, row);
         },
       },
-      row.cells.map((cell, index) => {
-        return _react.createElement(_TableCell.TableCell, {
+      row.cells.map((cell, index) =>
+        _react.createElement(_TableCell.TableCell, {
           key: cell.getCellProps().key,
           cell: cell,
           cellIndex: index,
@@ -110,8 +117,8 @@ const TableRow = (props) => {
           tableInstance: tableInstance,
           expanderCell: expanderCell,
           density: density,
-        });
-      }),
+        }),
+      ),
     ),
     subComponent &&
       _react.createElement(
@@ -134,9 +141,7 @@ const TableRow = (props) => {
   );
 };
 const hasAnySelectedSubRow = (row, selectedRowIds) => {
-  if (selectedRowIds?.[row.id]) {
-    return true;
-  }
+  if (selectedRowIds?.[row.id]) return true;
   return row.subRows.some((subRow) =>
     hasAnySelectedSubRow(subRow, selectedRowIds),
   );
@@ -180,5 +185,8 @@ 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/cjs/core/Table/actionHandlers/expandHandler.js

@@ -13,11 +13,9 @@ 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/cjs/core/Table/actionHandlers/filterHandler.js

@@ -15,12 +15,12 @@ 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/cjs/core/Table/actionHandlers/resizeHandler.js

@@ -17,21 +17,17 @@ _export(exports, {
     return onTableResizeStart;
   },
 });
-const onTableResizeStart = (state) => {
-  return {
-    ...state,
-    isTableResizing: true,
-  };
-};
-const onTableResizeEnd = (state, action) => {
-  return {
-    ...state,
-    isTableResizing: false,
-    columnResizing: {
-      ...state.columnResizing,
-      columnWidths: {
-        ...action.columnWidths,
-      },
+const onTableResizeStart = (state) => ({
+  ...state,
+  isTableResizing: true,
+});
+const onTableResizeEnd = (state, action) => ({
+  ...state,
+  isTableResizing: false,
+  columnResizing: {
+    ...state.columnResizing,
+    columnWidths: {
+      ...action.columnWidths,
     },
-  };
-};
+  },
+});

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

@@ -25,29 +25,24 @@ const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
     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);
 };
@@ -68,17 +63,17 @@ 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,
@@ -93,9 +88,7 @@ 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),
@@ -105,14 +98,14 @@ 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,
       }
@@ -120,12 +113,12 @@ 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,
   };
@@ -133,11 +126,9 @@ const onShiftSelectHandler = (
   return newState;
 };
 const getSelectedData = (selectedRowIds, instance) => {
-  const selectedData = [];
-  const setSelectedData = (row) => {
-    if (selectedRowIds[row.id]) {
-      selectedData.push(row.original);
-    }
+  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/cjs/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/cjs/core/Table/cells/DefaultCell.js

@@ -15,15 +15,15 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../../utils/index.js');
 const _utils = require('../utils.js');
 const DefaultCell = (props) => {
-  const columnsProp = _react.useContext(_utils.TableColumnsContext);
-  const isCustomCell = _react.useMemo(
+  let columnsProp = _react.useContext(_utils.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,
@@ -37,7 +37,7 @@ const DefaultCell = (props) => {
     className,
     style,
     status,
-    clamp = typeof cellProps.value === 'string' && !isCustomCell,
+    clamp = 'string' == typeof cellProps.value && !isCustomCell,
     ...rest
   } = props;
   return _react.createElement(
@@ -46,7 +46,7 @@ const DefaultCell = (props) => {
       ...cellElementProps,
       ...rest,
       className: (0, _classnames.default)(cellElementClassName, className),
-      'aria-disabled': isDisabled?.(cellProps.row.original) || undefined,
+      'aria-disabled': isDisabled?.(cellProps.row.original) || void 0,
       'data-iui-status': status,
       style: {
         ...cellElementStyle,

package/cjs/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;
+};