@itwin/itwinui-react 3.0.0-dev.4 → 3.0.0-dev.5

package/cjs/core/Table/hooks/useScrollToRow.d.ts

@@ -1,10 +1,10 @@
 import type { Row } from 'react-table';
 import type { TableProps } from '../Table.js';
-declare type ScrollToRow<T extends Record<string, unknown>> = {
+type ScrollToRow<T extends Record<string, unknown>> = {
     scrollToIndex: number | undefined;
     tableRowRef: (row: Row<T>) => (element: HTMLDivElement) => void;
 };
-declare type ScrollToRowProps<T extends Record<string, unknown>> = TableProps<T> & {
+type ScrollToRowProps<T extends Record<string, unknown>> = TableProps<T> & {
     page: Row<T>[];
 };
 export declare function useScrollToRow<T extends Record<string, unknown>>({ data, enableVirtualization, page, paginatorRenderer, scrollToRow, }: ScrollToRowProps<T>): ScrollToRow<T>;

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

@@ -1,67 +1,53 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.useScrollToRow = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-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 };
+const React = tslib_1.__importStar(require('react'));
+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 };
 }
 exports.useScrollToRow = useScrollToRow;

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

@@ -1,17 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.useSelectionCell = void 0;
-const index_js_1 = require("../columns/index.js");
-const useSelectionCell = (isSelectable, selectionMode, isRowDisabled, density = 'default') => (hooks) => {
+const index_js_1 = require('../columns/index.js');
+const useSelectionCell =
+  (isSelectable, selectionMode, isRowDisabled, density = 'default') =>
+  (hooks) => {
     if (!isSelectable) {
-        return;
+      return;
     }
-    hooks.allColumns.push((columns) => selectionMode === 'single' ||
-        columns.find((c) => c.id === index_js_1.SELECTION_CELL_ID)
+    hooks.allColumns.push((columns) =>
+      selectionMode === 'single' ||
+      columns.find((c) => c.id === index_js_1.SELECTION_CELL_ID)
         ? columns
         : [
-            (0, index_js_1.SelectionColumn)({ isDisabled: isRowDisabled, density: density }),
+            (0, index_js_1.SelectionColumn)({
+              isDisabled: isRowDisabled,
+              density: density,
+            }),
             ...columns,
-        ]);
-};
+          ],
+    );
+  };
 exports.useSelectionCell = useSelectionCell;

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

@@ -1,77 +1,79 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.useStickyColumns = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const react_table_1 = require("react-table");
+const react_table_1 = require('react-table');
 react_table_1.actions.setScrolledLeft = 'setScrolledLeft';
 react_table_1.actions.setScrolledRight = 'setScrolledRight';
 const useStickyColumns = (hooks) => {
-    hooks.stateReducers.push(reducer);
-    hooks.useInstance.push(useInstance);
+  hooks.stateReducers.push(reducer);
+  hooks.useInstance.push(useInstance);
 };
 exports.useStickyColumns = useStickyColumns;
 const reducer = (newState, action) => {
-    if (action.type === react_table_1.actions.init) {
-        return {
-            ...newState,
-            sticky: {},
-        };
+  if (action.type === react_table_1.actions.init) {
+    return {
+      ...newState,
+      sticky: {},
+    };
+  }
+  if (
+    action.type === react_table_1.actions.setScrolledLeft &&
+    newState.sticky?.isScrolledToLeft !== action.value // Prevents unnecessary re-render
+  ) {
+    return {
+      ...newState,
+      sticky: {
+        ...newState.sticky,
+        isScrolledToLeft: action.value,
+      },
+    };
+  }
+  if (
+    action.type === react_table_1.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';
     }
-    if (action.type === react_table_1.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;
+  });
+  // 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 === react_table_1.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';
-        }
-    });
+  });
+  // 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/cjs/core/Table/hooks/useSubRowFiltering.js

@@ -1,125 +1,110 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.useSubRowFiltering = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const defaultFilterFunctions_js_1 = require("../filters/defaultFilterFunctions.js");
+const React = tslib_1.__importStar(require('react'));
+const defaultFilterFunctions_js_1 = require('../filters/defaultFilterFunctions.js');
 const useSubRowFiltering = (hasAnySubRows) => (hooks) => {
-    hooks.useInstance.push(useInstance.bind({}, hasAnySubRows));
+  hooks.useInstance.push(useInstance.bind({}, hasAnySubRows));
 };
 exports.useSubRowFiltering = useSubRowFiltering;
 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);
-        });
+  // 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);
+      });
     };
-    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_js_1.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_js_1.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 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 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;
 };

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

@@ -1,63 +1,42 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.useSubRowSelection = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
+const React = tslib_1.__importStar(require('react'));
 const useSubRowSelection = (hooks) => {
-    hooks.useInstance.push(useInstance);
+  hooks.useInstance.push(useInstance);
 };
 exports.useSubRowSelection = useSubRowSelection;
 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,
+  });
 };