@itwin/itwinui-react 3.0.4 → 3.0.5

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

@@ -3,46 +3,38 @@
  * 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({});
+    // 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 };
 }

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

@@ -1,17 +1,13 @@
 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 }),
             ...columns,
-          ],
-    );
-  };
+        ]);
+};

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

@@ -6,70 +6,68 @@ 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.setScrolledLeft &&
-    newState.sticky?.isScrolledToLeft !== action.value // Prevents unnecessary re-render
-  ) {
-    return {
-      ...newState,
-      sticky: {
-        ...newState.sticky,
-        isScrolledToLeft: action.value,
-      },
-    };
-  }
-  if (
-    action.type === actions.setScrolledRight &&
-    newState.sticky?.isScrolledToRight !== action.value // Prevents unnecessary re-render
-  ) {
-    return {
-      ...newState,
-      sticky: {
-        ...newState.sticky,
-        isScrolledToRight: action.value,
-      },
-    };
-  }
-  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 (action.type === actions.init) {
+        return {
+            ...newState,
+            sticky: {},
+        };
     }
-    if (hasLeftStickyColumn) {
-      header.sticky = 'left';
+    if (action.type === actions.setScrolledLeft &&
+        newState.sticky?.isScrolledToLeft !== action.value // Prevents unnecessary re-render
+    ) {
+        return {
+            ...newState,
+            sticky: {
+                ...newState.sticky,
+                isScrolledToLeft: action.value,
+            },
+        };
     }
-  });
-  // 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 (action.type === actions.setScrolledRight &&
+        newState.sticky?.isScrolledToRight !== action.value // Prevents unnecessary re-render
+    ) {
+        return {
+            ...newState,
+            sticky: {
+                ...newState.sticky,
+                isScrolledToRight: action.value,
+            },
+        };
     }
-    if (hasRightStickyColumn) {
-      header.sticky = 'right';
-    }
-  });
+    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';
+        }
+    });
 };

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

@@ -5,101 +5,94 @@
 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);
-    });
-  };
-  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);
-      });
+    // 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);
+        });
     };
-    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),
-      );
+    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,
     });
-    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,
-  });
 };
 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;
+    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;
     }
-    return result;
-  });
-  // If row has any sub-rows that meet filter conditions,
-  // then that row also needs to be shown.
-  if (hasFilteredSubRows) {
-    return true;
-  }
-  const result = filterFn([row], [columnId], filterValue);
-  return !!result.length;
+    const result = filterFn([row], [columnId], filterValue);
+    return !!result.length;
 };

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

@@ -4,34 +4,33 @@
  *--------------------------------------------------------------------------------------------*/
 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.subRows.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.subRows.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

@@ -6,9 +6,5 @@ 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';
 export default './Table';

package/esm/core/Table/utils.js

@@ -1,47 +1,45 @@
 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}`;
+    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;
+    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;
+    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);
     }
-    left += Number(col.width || col.resizeWidth || 0);
-  }
-  let right = 0;
-  for (const col of [...columnList].reverse()) {
-    if (col.id === column.id) {
-      break;
+    let right = 0;
+    for (const col of [...columnList].reverse()) {
+        if (col.id === column.id) {
+            break;
+        }
+        right += Number(col.width || col.resizeWidth || 0);
     }
-    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,
-  };
+    return {
+        '--iui-table-sticky-left': column.sticky === 'left' ? `${left}px` : undefined,
+        '--iui-table-sticky-right': column.sticky === 'right' ? `${right}px` : undefined,
+    };
 };