@itwin/itwinui-react 3.11.2 → 3.12.0

package/esm/core/Table/hooks/useScrollToRow.js

@@ -1,40 +1,41 @@
-/*---------------------------------------------------------------------------------------------
- * 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';
-export function useScrollToRow({ data, enableVirtualization, page, paginatorRenderer, scrollToRow, }) {
-    const rowRefs = React.useRef({});
-    // Refs prevents from having `page` and `data` as dependencies
-    // therefore we avoid unnecessary scroll to row.
-    const pageRef = React.useRef(page);
-    pageRef.current = page;
-    const dataRef = React.useRef(data);
-    dataRef.current = data;
-    // For virtualized tables, all we need to do is pass the index of the item
-    // to the VirtualScroll component
-    const scrollToIndex = React.useMemo(() => {
-        if (!scrollToRow || paginatorRenderer) {
-            return undefined;
-        }
-        const index = scrollToRow(pageRef.current, dataRef.current);
-        return index < 0 ? undefined : index;
-    }, [paginatorRenderer, scrollToRow]);
-    // For non-virtualized tables, we need to add a ref to each row
-    // and scroll to the element
-    React.useEffect(() => {
-        if (enableVirtualization ||
-            scrollToIndex === undefined ||
-            scrollToIndex === null ||
-            scrollToIndex < 0) {
-            return;
-        }
-        rowRefs.current[pageRef.current[scrollToIndex]?.id]?.scrollIntoView();
-    }, [enableVirtualization, scrollToIndex]);
-    const tableRowRef = React.useCallback((row) => {
-        return (element) => {
-            rowRefs.current[row.id] = element;
-        };
-    }, []);
-    return { scrollToIndex, tableRowRef };
+export function useScrollToRow({
+  data,
+  enableVirtualization,
+  page,
+  paginatorRenderer,
+  scrollToRow,
+}) {
+  const rowRefs = React.useRef({});
+  const pageRef = React.useRef(page);
+  pageRef.current = page;
+  const dataRef = React.useRef(data);
+  dataRef.current = data;
+  const scrollToIndex = React.useMemo(() => {
+    if (!scrollToRow || paginatorRenderer) {
+      return undefined;
+    }
+    const index = scrollToRow(pageRef.current, dataRef.current);
+    return index < 0 ? undefined : index;
+  }, [paginatorRenderer, scrollToRow]);
+  React.useEffect(() => {
+    if (
+      enableVirtualization ||
+      scrollToIndex === undefined ||
+      scrollToIndex === null ||
+      scrollToIndex < 0
+    ) {
+      return;
+    }
+    rowRefs.current[pageRef.current[scrollToIndex]?.id]?.scrollIntoView();
+  }, [enableVirtualization, scrollToIndex]);
+  const tableRowRef = React.useCallback((row) => {
+    return (element) => {
+      rowRefs.current[row.id] = element;
+    };
+  }, []);
+  return {
+    scrollToIndex,
+    tableRowRef,
+  };
 }

package/esm/core/Table/hooks/useSelectionCell.d.ts

@@ -1,2 +1,2 @@
 import type { Hooks } from '../../../react-table/react-table.js';
-export declare const useSelectionCell: <T extends Record<string, unknown>>(isSelectable: boolean, selectionMode: 'multi' | 'single', isRowDisabled?: ((rowData: T) => boolean) | undefined, density?: 'default' | 'condensed' | 'extra-condensed') => (hooks: Hooks<T>) => void;
+export declare const useSelectionCell: <T extends Record<string, unknown>>(isSelectable: boolean, selectionMode: "multi" | "single", isRowDisabled?: (rowData: T) => boolean, density?: "default" | "condensed" | "extra-condensed") => (hooks: Hooks<T>) => void;

package/esm/core/Table/hooks/useSelectionCell.js

@@ -1,13 +1,20 @@
 import { SelectionColumn, SELECTION_CELL_ID } from '../columns/index.js';
-export const useSelectionCell = (isSelectable, selectionMode, isRowDisabled, density = 'default') => (hooks) => {
+export const useSelectionCell =
+  (isSelectable, selectionMode, isRowDisabled, density = 'default') =>
+  (hooks) => {
     if (!isSelectable) {
-        return;
+      return;
     }
-    hooks.allColumns.push((columns) => selectionMode === 'single' ||
-        columns.find((c) => c.id === SELECTION_CELL_ID)
+    hooks.allColumns.push((columns) =>
+      selectionMode === 'single' ||
+      columns.find((c) => c.id === SELECTION_CELL_ID)
         ? columns
         : [
-            SelectionColumn({ isDisabled: isRowDisabled, density: density }),
+            SelectionColumn({
+              isDisabled: isRowDisabled,
+              density: density,
+            }),
             ...columns,
-        ]);
-};
+          ],
+    );
+  };

package/esm/core/Table/hooks/useStickyColumns.js

@@ -1,73 +1,68 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import { actions } from 'react-table';
 actions.setScrolledLeft = 'setScrolledLeft';
 actions.setScrolledRight = 'setScrolledRight';
 export const useStickyColumns = (hooks) => {
-    hooks.stateReducers.push(reducer);
-    hooks.useInstance.push(useInstance);
+  hooks.stateReducers.push(reducer);
+  hooks.useInstance.push(useInstance);
 };
 const reducer = (newState, action) => {
-    if (action.type === actions.init) {
-        return {
-            ...newState,
-            sticky: {},
-        };
+  if (action.type === actions.init) {
+    return {
+      ...newState,
+      sticky: {},
+    };
+  }
+  if (
+    action.type === actions.setScrolledLeft &&
+    newState.sticky?.isScrolledToLeft !== action.value
+  ) {
+    return {
+      ...newState,
+      sticky: {
+        ...newState.sticky,
+        isScrolledToLeft: action.value,
+      },
+    };
+  }
+  if (
+    action.type === actions.setScrolledRight &&
+    newState.sticky?.isScrolledToRight !== action.value
+  ) {
+    return {
+      ...newState,
+      sticky: {
+        ...newState.sticky,
+        isScrolledToRight: action.value,
+      },
+    };
+  }
+  return newState;
+};
+const useInstance = (instance) => {
+  const { flatHeaders } = instance;
+  flatHeaders.forEach((header) => {
+    if (!header.originalSticky) {
+      header.originalSticky = header.sticky ?? 'none';
     }
-    if (action.type === actions.setScrolledLeft &&
-        newState.sticky?.isScrolledToLeft !== action.value // Prevents unnecessary re-render
-    ) {
-        return {
-            ...newState,
-            sticky: {
-                ...newState.sticky,
-                isScrolledToLeft: action.value,
-            },
-        };
+    header.sticky =
+      header.originalSticky === 'none' ? undefined : header.originalSticky;
+  });
+  let hasLeftStickyColumn = false;
+  [...flatHeaders].reverse().forEach((header) => {
+    if (header.sticky === 'left') {
+      hasLeftStickyColumn = true;
     }
-    if (action.type === actions.setScrolledRight &&
-        newState.sticky?.isScrolledToRight !== action.value // Prevents unnecessary re-render
-    ) {
-        return {
-            ...newState,
-            sticky: {
-                ...newState.sticky,
-                isScrolledToRight: action.value,
-            },
-        };
+    if (hasLeftStickyColumn) {
+      header.sticky = 'left';
     }
-    return newState;
-};
-const useInstance = (instance) => {
-    const { flatHeaders } = instance;
-    // Edge case. Saving original sticky state in case sticky columns are reordered.
-    flatHeaders.forEach((header) => {
-        if (!header.originalSticky) {
-            header.originalSticky = header.sticky ?? 'none';
-        }
-        header.sticky =
-            header.originalSticky === 'none' ? undefined : header.originalSticky;
-    });
-    // If there is a column that is sticked to the left, make every column prior to that sticky too.
-    let hasLeftStickyColumn = false;
-    [...flatHeaders].reverse().forEach((header) => {
-        if (header.sticky === 'left') {
-            hasLeftStickyColumn = true;
-        }
-        if (hasLeftStickyColumn) {
-            header.sticky = 'left';
-        }
-    });
-    // If there is a column that is sticked to the right, make every column after to that sticky too.
-    let hasRightStickyColumn = false;
-    flatHeaders.forEach((header) => {
-        if (header.sticky === 'right') {
-            hasRightStickyColumn = true;
-        }
-        if (hasRightStickyColumn) {
-            header.sticky = 'right';
-        }
-    });
+  });
+  let hasRightStickyColumn = false;
+  flatHeaders.forEach((header) => {
+    if (header.sticky === 'right') {
+      hasRightStickyColumn = true;
+    }
+    if (hasRightStickyColumn) {
+      header.sticky = 'right';
+    }
+  });
 };

package/esm/core/Table/hooks/useSubRowFiltering.js

@@ -1,98 +1,98 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { defaultFilterFunctions } from '../filters/defaultFilterFunctions.js';
 export const useSubRowFiltering = (hasAnySubRows) => (hooks) => {
-    hooks.useInstance.push(useInstance.bind({}, hasAnySubRows));
+  hooks.useInstance.push(useInstance.bind({}, hasAnySubRows));
 };
 const useInstance = (hasAnySubRows, instance) => {
-    // There is a bug in react-table that filtered out sub-rows won't be shown after clearing the filter.
-    // Therefore saving original sub-rows separately.
-    // Related issue: https://github.com/tannerlinsley/react-table/issues/2928
-    const setInitialSubRows = (rows) => {
-        rows.forEach((row) => {
-            if (!row.initialSubRows) {
-                row.initialSubRows = row.subRows;
-            }
-            setInitialSubRows(row.subRows);
-        });
+  const setInitialSubRows = (rows) => {
+    rows.forEach((row) => {
+      if (!row.initialSubRows) {
+        row.initialSubRows = row.subRows;
+      }
+      setInitialSubRows(row.subRows);
+    });
+  };
+  setInitialSubRows(instance.initialRows);
+  const {
+    filteredRows = instance.filteredRows,
+    filteredFlatRows = instance.filteredFlatRows,
+    filteredRowsById = instance.filteredRowsById,
+  } = React.useMemo(() => {
+    if (!hasAnySubRows) {
+      return {};
+    }
+    const setSubRows = (rows) => {
+      rows.forEach((row) => {
+        row.subRows = row.initialSubRows ?? [];
+        setSubRows(row.subRows);
+      });
     };
-    setInitialSubRows(instance.initialRows);
-    const { filteredRows = instance.filteredRows, filteredFlatRows = instance.filteredFlatRows, filteredRowsById = instance.filteredRowsById, } = React.useMemo(() => {
-        if (!hasAnySubRows) {
-            return {};
-        }
-        // Restore original sub-rows
-        const setSubRows = (rows) => {
-            rows.forEach((row) => {
-                row.subRows = row.initialSubRows ?? [];
-                setSubRows(row.subRows);
-            });
-        };
-        setSubRows(instance.initialRows);
-        let currentlyFilteredRows = [...instance.initialRows];
-        instance.state.filters.forEach(({ id: columnId, value: filterValue }) => {
-            const column = instance.allColumns.find((c) => c.id === columnId);
-            if (!column) {
-                return;
-            }
-            const filterTypes = {
-                ...defaultFilterFunctions,
-                ...instance.filterTypes,
-            };
-            const filterFn = typeof column.filter === 'function'
-                ? column.filter
-                : filterTypes[column.filter ?? 'text'];
-            currentlyFilteredRows = currentlyFilteredRows.filter((row) => handleRowFiltering(row, filterFn, columnId, filterValue));
-        });
-        const filteredRows = [];
-        const filteredFlatRows = [];
-        const filteredRowsById = {};
-        // Setting rows here helps to keep them ordered.
-        const populateRows = (row) => {
-            if (row.depth === 0) {
-                filteredRows.push(row);
-            }
-            filteredFlatRows.push(row);
-            filteredRowsById[row.id] = row;
-            if (row.subRows.length) {
-                row.subRows.forEach((r) => populateRows(r));
-            }
-        };
-        currentlyFilteredRows.forEach((row) => populateRows(row));
-        return { filteredRows, filteredFlatRows, filteredRowsById };
-    }, [
-        instance.allColumns,
-        instance.filterTypes,
-        instance.initialRows,
-        instance.state.filters,
-        hasAnySubRows,
-    ]);
-    Object.assign(instance, {
-        filteredRows,
-        filteredFlatRows,
-        filteredRowsById,
-        rows: filteredRows,
-        flatRows: filteredFlatRows,
-        rowsById: filteredRowsById,
+    setSubRows(instance.initialRows);
+    let currentlyFilteredRows = [...instance.initialRows];
+    instance.state.filters.forEach(({ id: columnId, value: filterValue }) => {
+      const column = instance.allColumns.find((c) => c.id === columnId);
+      if (!column) {
+        return;
+      }
+      const filterTypes = {
+        ...defaultFilterFunctions,
+        ...instance.filterTypes,
+      };
+      const filterFn =
+        typeof column.filter === 'function'
+          ? column.filter
+          : filterTypes[column.filter ?? 'text'];
+      currentlyFilteredRows = currentlyFilteredRows.filter((row) =>
+        handleRowFiltering(row, filterFn, columnId, filterValue),
+      );
     });
+    const filteredRows = [];
+    const filteredFlatRows = [];
+    const filteredRowsById = {};
+    const populateRows = (row) => {
+      if (row.depth === 0) {
+        filteredRows.push(row);
+      }
+      filteredFlatRows.push(row);
+      filteredRowsById[row.id] = row;
+      if (row.subRows.length) {
+        row.subRows.forEach((r) => populateRows(r));
+      }
+    };
+    currentlyFilteredRows.forEach((row) => populateRows(row));
+    return {
+      filteredRows,
+      filteredFlatRows,
+      filteredRowsById,
+    };
+  }, [
+    instance.allColumns,
+    instance.filterTypes,
+    instance.initialRows,
+    instance.state.filters,
+    hasAnySubRows,
+  ]);
+  Object.assign(instance, {
+    filteredRows,
+    filteredFlatRows,
+    filteredRowsById,
+    rows: filteredRows,
+    flatRows: filteredFlatRows,
+    rowsById: filteredRowsById,
+  });
 };
 const handleRowFiltering = (row, filterFn, columnId, filterValue) => {
-    let hasFilteredSubRows = false;
-    row.subRows = row.initialSubRows.filter((subRow) => {
-        const result = handleRowFiltering(subRow, filterFn, columnId, filterValue);
-        if (result) {
-            hasFilteredSubRows = true;
-        }
-        return result;
-    });
-    // If row has any sub-rows that meet filter conditions,
-    // then that row also needs to be shown.
-    if (hasFilteredSubRows) {
-        return true;
+  let hasFilteredSubRows = false;
+  row.subRows = row.initialSubRows.filter((subRow) => {
+    const result = handleRowFiltering(subRow, filterFn, columnId, filterValue);
+    if (result) {
+      hasFilteredSubRows = true;
     }
-    const result = filterFn([row], [columnId], filterValue);
-    return !!result.length;
+    return result;
+  });
+  if (hasFilteredSubRows) {
+    return true;
+  }
+  const result = filterFn([row], [columnId], filterValue);
+  return !!result.length;
 };

package/esm/core/Table/hooks/useSubRowSelection.js

@@ -1,36 +1,33 @@
-/*---------------------------------------------------------------------------------------------
- * 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';
 export const useSubRowSelection = (hooks) => {
-    hooks.useInstance.push(useInstance);
+  hooks.useInstance.push(useInstance);
 };
 const useInstance = (instance) => {
-    const selectedFlatRows = React.useMemo(() => {
-        const selectedFlatRows = [];
-        const setSelectionState = (row, selectedRowIds) => {
-            let isSomeSubRowsSelected = false;
-            row.initialSubRows.forEach((subRow) => {
-                setSelectionState(subRow, selectedRowIds);
-                if (subRow.isSelected || subRow.isSomeSelected) {
-                    isSomeSubRowsSelected = true;
-                }
-            });
-            if (selectedRowIds[row.id]) {
-                row.isSelected = true;
-                row.isSomeSelected = false;
-                selectedFlatRows.push(row);
-            }
-            else {
-                row.isSelected = false;
-                row.isSomeSelected = isSomeSubRowsSelected;
-            }
-        };
-        instance.rows.forEach((row) => setSelectionState(row, instance.state.selectedRowIds));
-        return selectedFlatRows;
-    }, [instance.rows, instance.state.selectedRowIds]);
-    Object.assign(instance, {
-        selectedFlatRows,
-    });
+  const selectedFlatRows = React.useMemo(() => {
+    const selectedFlatRows = [];
+    const setSelectionState = (row, selectedRowIds) => {
+      let isSomeSubRowsSelected = false;
+      row.initialSubRows.forEach((subRow) => {
+        setSelectionState(subRow, selectedRowIds);
+        if (subRow.isSelected || subRow.isSomeSelected) {
+          isSomeSubRowsSelected = true;
+        }
+      });
+      if (selectedRowIds[row.id]) {
+        row.isSelected = true;
+        row.isSomeSelected = false;
+        selectedFlatRows.push(row);
+      } else {
+        row.isSelected = false;
+        row.isSomeSelected = isSomeSubRowsSelected;
+      }
+    };
+    instance.rows.forEach((row) =>
+      setSelectionState(row, instance.state.selectedRowIds),
+    );
+    return selectedFlatRows;
+  }, [instance.rows, instance.state.selectedRowIds]);
+  Object.assign(instance, {
+    selectedFlatRows,
+  });
 };

package/esm/core/Table/index.js

@@ -1,9 +1,9 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 export { Table } from './Table.js';
 export { BaseFilter, FilterButtonBar, tableFilters } from './filters/index.js';
 export { DefaultCell, EditableCell } from './cells/index.js';
 export { TablePaginator } from './TablePaginator.js';
-export { ActionColumn, ExpanderColumn, SelectionColumn, } from './columns/index.js';
+export {
+  ActionColumn,
+  ExpanderColumn,
+  SelectionColumn,
+} from './columns/index.js';

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

@@ -8,4 +8,4 @@ export declare const getSubRowStyle: ({ density, depth }: {
 }) => {
     paddingInlineStart: number;
 };
-export declare const TableColumnsContext: React.Context<Column[]>;
+export declare const TableColumnsContext: React.Context<Column<Record<string, unknown>>[]>;

package/esm/core/Table/utils.js

@@ -1,67 +1,63 @@
-/*---------------------------------------------------------------------------------------------
- * 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';
 export const getCellStyle = (column, isTableResizing) => {
-    const style = {};
-    style.flex = `1 1 145px`;
-    if (column.width) {
-        const width = typeof column.width === 'string' ? column.width : `${column.width}px`;
-        style.width = width;
-        // This allows flexbox to handle the width of the column on table resize
-        if (isTableResizing && column.canResize) {
-            style.flex = `${Number(column.width)} ${Number(column.width)} ${width}`;
-        }
-        else {
-            style.flex = `0 0 ${width}`;
-        }
-    }
-    if (column.maxWidth) {
-        style.maxWidth = `${column.maxWidth}px`;
-    }
-    if (column.minWidth) {
-        style.minWidth = `${column.minWidth}px`;
-    }
-    return style;
+  const style = {};
+  style.flex = `1 1 145px`;
+  if (column.width) {
+    const width =
+      typeof column.width === 'string' ? column.width : `${column.width}px`;
+    style.width = width;
+    if (isTableResizing && column.canResize) {
+      style.flex = `${Number(column.width)} ${Number(column.width)} ${width}`;
+    } else {
+      style.flex = `0 0 ${width}`;
+    }
+  }
+  if (column.maxWidth) {
+    style.maxWidth = `${column.maxWidth}px`;
+  }
+  if (column.minWidth) {
+    style.minWidth = `${column.minWidth}px`;
+  }
+  return style;
 };
 export const getStickyStyle = (column, columnList) => {
-    if (!column.sticky) {
-        return {};
-    }
-    let left = 0;
-    for (const col of columnList) {
-        if (col.id === column.id) {
-            break;
-        }
-        left += Number(col.width || col.resizeWidth || 0);
-    }
-    let right = 0;
-    for (const col of [...columnList].reverse()) {
-        if (col.id === column.id) {
-            break;
-        }
-        right += Number(col.width || col.resizeWidth || 0);
-    }
-    return {
-        '--iui-table-sticky-left': column.sticky === 'left' ? `${left}px` : undefined,
-        '--iui-table-sticky-right': column.sticky === 'right' ? `${right}px` : undefined,
-    };
+  if (!column.sticky) {
+    return {};
+  }
+  let left = 0;
+  for (const col of columnList) {
+    if (col.id === column.id) {
+      break;
+    }
+    left += Number(col.width || col.resizeWidth || 0);
+  }
+  let right = 0;
+  for (const col of [...columnList].reverse()) {
+    if (col.id === column.id) {
+      break;
+    }
+    right += Number(col.width || col.resizeWidth || 0);
+  }
+  return {
+    '--iui-table-sticky-left':
+      column.sticky === 'left' ? `${left}px` : undefined,
+    '--iui-table-sticky-right':
+      column.sticky === 'right' ? `${right}px` : undefined,
+  };
 };
 export const getSubRowStyle = ({ density = 'default', depth = 1 }) => {
-    let cellPadding = 16;
-    let expanderMargin = 8;
-    if (density === 'condensed') {
-        cellPadding = 12;
-        expanderMargin = 4;
-    }
-    else if (density === 'extra-condensed') {
-        cellPadding = 8;
-        expanderMargin = 4;
-    }
-    const multiplier = 26 + expanderMargin; // 26 = expander width
-    return {
-        paddingInlineStart: cellPadding + depth * multiplier,
-    };
+  let cellPadding = 16;
+  let expanderMargin = 8;
+  if (density === 'condensed') {
+    cellPadding = 12;
+    expanderMargin = 4;
+  } else if (density === 'extra-condensed') {
+    cellPadding = 8;
+    expanderMargin = 4;
+  }
+  const multiplier = 26 + expanderMargin;
+  return {
+    paddingInlineStart: cellPadding + depth * multiplier,
+  };
 };
 export const TableColumnsContext = React.createContext([]);