@itwin/itwinui-react 1.40.0 → 1.42.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## [1.42.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.41.0...v1.42.0) (2022-07-26)
+
+### Fixes
+
+* **ComboBox:** Prevent infinite loop when `options` change ([#738](https://www.github.com/iTwin/iTwinUI-react/issues/738)) ([7788f45](https://www.github.com/iTwin/iTwinUI-react/commit/7788f451fcbf9dd7959d3fa727c0cdee3485bbcd))
+* **Small:** Use `small` element instead of `p` ([#735](https://www.github.com/iTwin/iTwinUI-react/issues/735)) ([c59f213](https://www.github.com/iTwin/iTwinUI-react/commit/c59f21326e049bce50e24c729a46482b74ef63c3))
+
+
+### What's new
+
+* **Table:** Scroll table to selected item ([#689](https://www.github.com/iTwin/iTwinUI-react/issues/689)) ([afa947b](https://www.github.com/iTwin/iTwinUI-react/commit/afa947b15411305c1bfc57b239d916fc599acfbe))
+* **Tree:** Virtualization ([#713](https://www.github.com/iTwin/iTwinUI-react/issues/713)) ([d4d3575](https://www.github.com/iTwin/iTwinUI-react/commit/d4d35758fa0c8f00811f387cc8453b82e9773c85))
+
+## [1.41.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.40.1...v1.41.0) (2022-07-13)
+
+### What's new
+
+* **ErrorPage:** Add time-out and redirect status codes ([#715](https://www.github.com/iTwin/iTwinUI-react/issues/715)) ([a5fb85f](https://www.github.com/iTwin/iTwinUI-react/commit/a5fb85f1f0ef9517a065db02384875d7c5d87f95))
+* **Modal:** Update classes through the css package update ([#724](https://www.github.com/iTwin/iTwinUI-react/issues/724)) ([d13e0bf](https://www.github.com/iTwin/iTwinUI-react/commit/d13e0bf7941581a3b8d275b744bf77ebd7ae95d4))
+  - Now `style` and `className` props are applied on the dialog element itself.
+* Border radius was changed from `3px` to `4px` through the css package update in all elements ([#724](https://www.github.com/iTwin/iTwinUI-react/issues/724)) ([d13e0bf](https://www.github.com/iTwin/iTwinUI-react/commit/d13e0bf7941581a3b8d275b744bf77ebd7ae95d4))
+
+### Fixes
+
+* **Combobox:** Allow users to reset the value ([#728](https://www.github.com/iTwin/iTwinUI-react/issues/728)) ([f6c0b0d](https://www.github.com/iTwin/iTwinUI-react/commit/f6c0b0d66ac9ac725a23e07980c9dd7298084ae4))
+* **Table:** Prevent crashing when clearing editable cell ([#732](https://www.github.com/iTwin/iTwinUI-react/issues/732)) ([0dedd3b](https://www.github.com/iTwin/iTwinUI-react/commit/0dedd3b8804ce98ce836d4bbbf58db83a4f9bfde))
+* **Table:** Set correct intersection root for margin to work ([#708](https://www.github.com/iTwin/iTwinUI-react/issues/708)) ([55e4848](https://www.github.com/iTwin/iTwinUI-react/commit/55e48481f95c3351c127d495bd3c20134fd4a77f))
+
+### [1.40.1](https://www.github.com/iTwin/iTwinUI-react/compare/v1.40.0...v1.40.1) (2022-06-17)
+
+### Fixes
+
+* **Table:** Horizontal scroll is working when virtual scroll is enabled ([#711](https://www.github.com/iTwin/iTwinUI-react/issues/711)) ([d3db504](https://www.github.com/iTwin/iTwinUI-react/commit/d3db504d3a44a4da2c1f34a392f99aae478ef2a3))
+
 ## [1.40.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.39.0...v1.40.0) (2022-06-10)
 
 ### What's new

package/cjs/core/ComboBox/ComboBox.js

@@ -74,11 +74,10 @@ var ComboBox = function (props) {
     var inputRef = react_1.default.useRef(null);
     var menuRef = react_1.default.useRef(null);
     var toggleButtonRef = react_1.default.useRef(null);
-    // Latest value of the onChange prop
-    var onChangeProp = react_1.default.useRef(onChange);
-    react_1.default.useEffect(function () {
-        onChangeProp.current = onChange;
-    }, [onChange]);
+    var mounted = react_1.default.useRef(false);
+    var valuePropRef = (0, utils_1.useLatestRef)(valueProp);
+    var onChangeProp = (0, utils_1.useLatestRef)(onChange);
+    var optionsRef = (0, utils_1.useLatestRef)(options);
     // Record to store all extra information (e.g. original indexes), where the key is the id of the option
     var optionsExtraInfoRef = react_1.default.useRef({});
     // Clear the extra info when the options change so that it can be reinitialized below
@@ -97,7 +96,9 @@ var ComboBox = function (props) {
     // Reducer where all the component-wide state is stored
     var _e = react_1.default.useReducer(helpers_1.comboBoxReducer, {
         isOpen: false,
-        selectedIndex: -1,
+        selectedIndex: valueProp
+            ? optionsRef.current.findIndex(function (option) { return option.value === valueProp; })
+            : -1,
         focusedIndex: -1,
     }), _f = _e[0], isOpen = _f.isOpen, selectedIndex = _f.selectedIndex, focusedIndex = _f.focusedIndex, dispatch = _e[1];
     react_1.default.useLayoutEffect(function () {
@@ -105,7 +106,7 @@ var ComboBox = function (props) {
         // When the dropdown opens
         if (isOpen) {
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); // Focus the input
-            setFilteredOptions(options); // Reset the filtered list
+            setFilteredOptions(optionsRef.current); // Reset the filtered list
             dispatch(['focus']);
         }
         // When the dropdown closes
@@ -114,10 +115,10 @@ var ComboBox = function (props) {
             dispatch(['focus']);
             // Reset the input value
             setInputValue(selectedIndex != undefined && selectedIndex >= 0
-                ? (_b = options[selectedIndex]) === null || _b === void 0 ? void 0 : _b.label
+                ? (_b = optionsRef.current[selectedIndex]) === null || _b === void 0 ? void 0 : _b.label
                 : '');
         }
-    }, [isOpen, options, selectedIndex]);
+    }, [isOpen, optionsRef, selectedIndex]);
     // Set min-width of menu to be same as input
     var _g = react_1.default.useState(0), minWidth = _g[0], setMinWidth = _g[1];
     react_1.default.useEffect(function () {
@@ -148,14 +149,14 @@ var ComboBox = function (props) {
         var value = event.currentTarget.value;
         setInputValue(value);
         dispatch(['open']); // reopen when typing
-        setFilteredOptions((_a = filterFunction === null || filterFunction === void 0 ? void 0 : filterFunction(options, value)) !== null && _a !== void 0 ? _a : options.filter(function (option) {
+        setFilteredOptions((_a = filterFunction === null || filterFunction === void 0 ? void 0 : filterFunction(optionsRef.current, value)) !== null && _a !== void 0 ? _a : optionsRef.current.filter(function (option) {
             return option.label.toLowerCase().includes(value.toLowerCase());
         }));
         if (focusedIndex != -1) {
             dispatch(['focus', -1]);
         }
         (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onChange) === null || _b === void 0 ? void 0 : _b.call(inputProps, event);
-    }, [filterFunction, focusedIndex, inputProps, options]);
+    }, [filterFunction, focusedIndex, inputProps, optionsRef]);
     // When the value prop changes, update the selectedIndex
     react_1.default.useEffect(function () {
         dispatch([
@@ -166,14 +167,17 @@ var ComboBox = function (props) {
     // Call user-defined onChange when the value actually changes
     react_1.default.useEffect(function () {
         var _a, _b;
-        if (selectedIndex != undefined && selectedIndex >= 0) {
-            var value = (_a = options[selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
-            if (value === valueProp) {
-                return;
-            }
-            (_b = onChangeProp.current) === null || _b === void 0 ? void 0 : _b.call(onChangeProp, value);
+        // Prevent user-defined onChange to be called on mount
+        if (!mounted.current) {
+            mounted.current = true;
+            return;
+        }
+        var currentValue = (_a = optionsRef.current[selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
+        if (currentValue === valuePropRef.current || selectedIndex === -1) {
+            return;
         }
-    }, [options, selectedIndex, valueProp]);
+        (_b = onChangeProp.current) === null || _b === void 0 ? void 0 : _b.call(onChangeProp, currentValue);
+    }, [onChangeProp, optionsRef, selectedIndex, valuePropRef]);
     var getMenuItem = react_1.default.useCallback(function (option, filteredIndex) {
         var optionId = getOptionId(option, id);
         var __originalIndex = optionsExtraInfoRef.current[optionId].__originalIndex;

package/cjs/core/ErrorPage/ErrorPage.d.ts

@@ -1,14 +1,16 @@
 import React from 'react';
 import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/non-ideal-state.css';
-export declare type ErrorPageType = '401' | '403' | '404' | '500' | '502' | '503' | 'generic';
+export declare type ErrorPageType = '300' | '301' | '302' | '303' | '304' | '305' | '307' | '308' | '401' | '403' | '404' | '408' | '500' | '502' | '503' | '504' | 'generic';
 export declare type ErrorTypeTranslations = {
     badGateway: string;
     error: string;
     forbidden: string;
     internalServerError: string;
+    redirect?: string;
     pageNotFound: string;
     serviceUnavailable: string;
+    timedOut?: string;
     unauthorized: string;
 };
 export declare type ErrorPageProps = {

package/cjs/core/ErrorPage/ErrorPage.js

@@ -37,6 +37,8 @@ var _500_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/ill
 var _502_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/illustrations/502"));
 var _503_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/illustrations/503"));
 var Error_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/illustrations/Error"));
+var Redirect_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/illustrations/Redirect"));
+var TimedOut_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/illustrations/TimedOut"));
 var react_1 = __importDefault(require("react"));
 var Button_1 = require("../Buttons/Button");
 var utils_1 = require("../utils");
@@ -50,9 +52,19 @@ require("@itwin/itwinui-css/css/non-ideal-state.css");
 var ErrorPage = function (props) {
     var errorType = props.errorType, errorName = props.errorName, errorMessage = props.errorMessage, primaryButtonHandle = props.primaryButtonHandle, primaryButtonLabel = props.primaryButtonLabel, secondaryButtonHandle = props.secondaryButtonHandle, secondaryButtonLabel = props.secondaryButtonLabel, translatedErrorMessages = props.translatedErrorMessages, className = props.className, rest = __rest(props, ["errorType", "errorName", "errorMessage", "primaryButtonHandle", "primaryButtonLabel", "secondaryButtonHandle", "secondaryButtonLabel", "translatedErrorMessages", "className"]);
     (0, utils_1.useTheme)();
-    var defaultErrorMessages = __assign({ badGateway: 'Bad gateway', error: 'Error', forbidden: 'Forbidden', internalServerError: 'Internal server error', pageNotFound: 'Page not found', serviceUnavailable: 'Service unavailable', unauthorized: 'Unauthorized' }, translatedErrorMessages);
+    var defaultErrorMessages = __assign({ badGateway: 'Bad gateway', error: 'Error', forbidden: 'Forbidden', internalServerError: 'Internal server error', redirect: 'Redirect', pageNotFound: 'Page not found', serviceUnavailable: 'Service unavailable', timedOut: 'Timed out', unauthorized: 'Unauthorized' }, translatedErrorMessages);
     function getErrorIcon() {
         switch (errorType) {
+            case '300':
+            case '301':
+            case '302':
+            case '303':
+            case '304':
+            case '305':
+            case '307':
+            case '308': {
+                return react_1.default.createElement(Redirect_1.default, { className: 'iui-non-ideal-state-illustration' });
+            }
             case '401': {
                 return react_1.default.createElement(_401_1.default, { className: 'iui-non-ideal-state-illustration' });
             }
@@ -62,6 +74,10 @@ var ErrorPage = function (props) {
             case '404': {
                 return react_1.default.createElement(_404_1.default, { className: 'iui-non-ideal-state-illustration' });
             }
+            case '408':
+            case '504': {
+                return react_1.default.createElement(TimedOut_1.default, { className: 'iui-non-ideal-state-illustration' });
+            }
             case '500': {
                 return react_1.default.createElement(_500_1.default, { className: 'iui-non-ideal-state-illustration' });
             }
@@ -82,6 +98,16 @@ var ErrorPage = function (props) {
             return errorName;
         }
         switch (errorType) {
+            case '300':
+            case '301':
+            case '302':
+            case '303':
+            case '304':
+            case '305':
+            case '307':
+            case '308': {
+                return defaultErrorMessages.redirect || '';
+            }
             case '401': {
                 return defaultErrorMessages.unauthorized;
             }
@@ -91,6 +117,10 @@ var ErrorPage = function (props) {
             case '404': {
                 return defaultErrorMessages.pageNotFound;
             }
+            case '408':
+            case '504': {
+                return defaultErrorMessages.timedOut || '';
+            }
             case '500': {
                 return defaultErrorMessages.internalServerError;
             }

package/cjs/core/Modal/Modal.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/dialog.css';
+import '@itwin/itwinui-css/css/backdrop.css';
 export declare type ModalProps = {
     /**
      * Flag whether modal should be shown.

package/cjs/core/Modal/Modal.js

@@ -36,6 +36,7 @@ var classnames_1 = __importDefault(require("classnames"));
 var Close_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Close"));
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/dialog.css");
+require("@itwin/itwinui-css/css/backdrop.css");
 var IconButton_1 = require("../Buttons/IconButton");
 var react_transition_group_1 = require("react-transition-group");
 /**
@@ -118,15 +119,17 @@ var Modal = function (props) {
             onClose(event);
         }
     };
-    return !!container ? (react_dom_1.default.createPortal(react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true },
+    return !!container ? (react_dom_1.default.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-backdrop', { 'iui-backdrop-visible': isOpen }), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }),
         react_1.default.createElement(utils_1.FocusTrap, null,
-            react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog-backdrop', { 'iui-dialog-default': styleType === 'default' }, { 'iui-dialog-full-page': styleType === 'fullPage' }, { 'iui-dialog-visible': isOpen }, className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
-                react_1.default.createElement("div", { className: 'iui-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true' },
-                    react_1.default.createElement("div", { className: 'iui-dialog-title-bar' },
-                        react_1.default.createElement("div", { className: 'iui-dialog-title' }, title),
-                        isDismissible && (react_1.default.createElement(IconButton_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
-                            react_1.default.createElement(Close_1.default, null)))),
-                    children)))), container)) : (react_1.default.createElement(react_1.default.Fragment, null));
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true },
+                    react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog', { 'iui-dialog-default': styleType === 'default' }, { 'iui-dialog-full-page': styleType === 'fullPage' }, { 'iui-dialog-visible': isOpen }, className), id: id, style: style, role: 'dialog', "aria-modal": 'true' }, rest),
+                        react_1.default.createElement("div", { className: 'iui-dialog-title-bar' },
+                            react_1.default.createElement("div", { className: 'iui-dialog-title' }, title),
+                            isDismissible && (react_1.default.createElement(IconButton_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
+                                react_1.default.createElement(Close_1.default, null)))),
+                        children))))), container)) : (react_1.default.createElement(react_1.default.Fragment, null));
 };
 exports.Modal = Modal;
 exports.default = exports.Modal;

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

@@ -182,6 +182,29 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
      * @default false
      */
     enableColumnReordering?: boolean;
+    /**
+     * Function that returns index of the row that you want to scroll to.
+     *
+     * It doesn't work with paginated tables and with lazy-loading.
+     * @beta
+     * @example
+     * <Table
+     *   scrollToRow={React.useCallback(
+     *     (rows, data) => rows.findIndex((row) => row.original === data[250]),
+     *     []
+     *   )}
+     *   {...restProps}
+     * />
+     * @example
+     * <Table
+     *   scrollToRow={React.useCallback(
+     *     (rows, data) => rows.findIndex((row) => row.original.id === data[250].id),
+     *     []
+     *   )}
+     *   {...restProps}
+     * />
+     */
+    scrollToRow?: (rows: Row<T>[], data: T[]) => number;
 } & Omit<CommonProps, 'title'>;
 /**
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).

package/cjs/core/Table/Table.js

@@ -240,6 +240,7 @@ var Table = function (props) {
         state.pageIndex,
         state.pageSize,
     ]);
+    var _r = (0, hooks_1.useScrollToRow)(__assign(__assign({}, props), { page: page })), scrollToIndex = _r.scrollToIndex, tableRowRef = _r.tableRowRef;
     var columnRefs = react_1.default.useRef({});
     var previousTableWidth = react_1.default.useRef(0);
     var onTableResize = react_1.default.useCallback(function (_a) {
@@ -275,22 +276,27 @@ var Table = function (props) {
     });
     var headerRef = react_1.default.useRef(null);
     var bodyRef = react_1.default.useRef(null);
+    // Using `useState` to rerender rows when table body ref is available
+    var _s = react_1.default.useState(null), bodyRefState = _s[0], setBodyRefState = _s[1];
     var getPreparedRow = react_1.default.useCallback(function (index) {
         var row = page[index];
         prepareRow(row);
-        return (react_1.default.createElement(TableRowMemoized_1.TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell }));
+        return (react_1.default.createElement(TableRowMemoized_1.TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, bodyRef: bodyRefState, tableRowRef: enableVirtualization ? undefined : tableRowRef(row) }));
     }, [
         page,
-        expanderCell,
-        hasAnySubRows,
-        instance,
-        intersectionMargin,
-        isRowDisabled,
-        onRowClickHandler,
         prepareRow,
         rowProps,
+        intersectionMargin,
         state,
+        onRowClickHandler,
         subComponent,
+        isRowDisabled,
+        hasAnySubRows,
+        instance,
+        expanderCell,
+        bodyRefState,
+        enableVirtualization,
+        tableRowRef,
     ]);
     var virtualizedItemRenderer = react_1.default.useCallback(function (index) { return getPreparedRow(index); }, [getPreparedRow]);
     var updateStickyState = function () {
@@ -366,13 +372,13 @@ var Table = function (props) {
                     'iui-zebra-striping': styleType === 'zebra-rows',
                 }),
                 style: { outline: 0 },
-            }), { ref: bodyRef, onScroll: function () {
+            }), { ref: (0, utils_1.mergeRefs)(bodyRef, setBodyRefState), onScroll: function () {
                     if (headerRef.current && bodyRef.current) {
                         headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
                         updateStickyState();
                     }
                 }, tabIndex: -1 }),
-                data.length !== 0 && (react_1.default.createElement(react_1.default.Fragment, null, enableVirtualization ? (react_1.default.createElement(VirtualScroll_1.default, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer })) : (page.map(function (_, index) { return getPreparedRow(index); })))),
+                data.length !== 0 && (react_1.default.createElement(react_1.default.Fragment, null, enableVirtualization ? (react_1.default.createElement(VirtualScroll_1.default, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer, scrollToIndex: scrollToIndex })) : (page.map(function (_, index) { return getPreparedRow(index); })))),
                 isLoading && data.length === 0 && (react_1.default.createElement("div", { className: 'iui-table-empty' },
                     react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { indeterminate: true }))),
                 isLoading && data.length !== 0 && (react_1.default.createElement("div", { className: 'iui-row' },

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

@@ -20,6 +20,8 @@ export declare const TableRow: <T extends Record<string, unknown>>(props: {
     tableHasSubRows: boolean;
     tableInstance: TableInstance<T>;
     expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined;
+    bodyRef: HTMLDivElement | null;
+    tableRowRef?: React.Ref<HTMLDivElement> | undefined;
 }) => JSX.Element;
 export declare const TableRowMemoized: <T extends Record<string, unknown>>(props: {
     row: Row<T>;
@@ -35,4 +37,6 @@ export declare const TableRowMemoized: <T extends Record<string, unknown>>(props
     tableHasSubRows: boolean;
     tableInstance: TableInstance<T>;
     expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined;
+    bodyRef: HTMLDivElement | null;
+    tableRowRef?: React.Ref<HTMLDivElement> | undefined;
 }) => JSX.Element;

package/cjs/core/Table/TableRowMemoized.js

@@ -30,14 +30,25 @@ var TableCell_1 = require("./TableCell");
  * When adding new features check whether it changes state that affects row. If it does then add equality check to `React.memo`.
  */
 var TableRow = function (props) {
-    var row = props.row, rowProps = props.rowProps, isLast = props.isLast, onRowInViewport = props.onRowInViewport, onBottomReached = props.onBottomReached, intersectionMargin = props.intersectionMargin, onClick = props.onClick, subComponent = props.subComponent, isDisabled = props.isDisabled, tableHasSubRows = props.tableHasSubRows, tableInstance = props.tableInstance, expanderCell = props.expanderCell;
+    var row = props.row, rowProps = props.rowProps, isLast = props.isLast, onRowInViewport = props.onRowInViewport, onBottomReached = props.onBottomReached, intersectionMargin = props.intersectionMargin, onClick = props.onClick, subComponent = props.subComponent, isDisabled = props.isDisabled, tableHasSubRows = props.tableHasSubRows, tableInstance = props.tableInstance, expanderCell = props.expanderCell, bodyRef = props.bodyRef, tableRowRef = props.tableRowRef;
     var onIntersect = react_1.default.useCallback(function () {
         var _a, _b;
         (_a = onRowInViewport.current) === null || _a === void 0 ? void 0 : _a.call(onRowInViewport, row.original);
         isLast && ((_b = onBottomReached.current) === null || _b === void 0 ? void 0 : _b.call(onBottomReached));
     }, [isLast, onBottomReached, onRowInViewport, row.original]);
-    var rowRef = (0, utils_1.useIntersection)(onIntersect, {
+    var intersectionRoot = react_1.default.useMemo(function () {
+        var _a, _b;
+        var isTableBodyScrollable = ((_a = bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.scrollHeight) !== null && _a !== void 0 ? _a : 0) > ((_b = bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.offsetHeight) !== null && _b !== void 0 ? _b : 0);
+        // If table body is scrollable, make it the intersection root
+        if (isTableBodyScrollable) {
+            return bodyRef;
+        }
+        // Otherwise, make the viewport the intersection root
+        return undefined;
+    }, [bodyRef]);
+    var intersectionRef = (0, utils_1.useIntersection)(onIntersect, {
         rootMargin: "".concat(intersectionMargin, "px"),
+        root: intersectionRoot,
     });
     var userRowProps = rowProps === null || rowProps === void 0 ? void 0 : rowProps(row);
     var mergedProps = __assign(__assign(__assign({}, row.getRowProps({ style: { flex: "0 0 auto", minWidth: '100%' } })), userRowProps), {
@@ -47,7 +58,7 @@ var TableRow = function (props) {
             'iui-disabled': isDisabled,
         }, userRowProps === null || userRowProps === void 0 ? void 0 : userRowProps.className),
     });
-    var refs = (0, utils_1.useMergedRefs)(rowRef, mergedProps.ref);
+    var refs = (0, utils_1.useMergedRefs)(intersectionRef, mergedProps.ref, tableRowRef);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", __assign({}, mergedProps, { ref: refs, onClick: function (event) {
                 var _a;
@@ -97,6 +108,7 @@ exports.TableRowMemoized = react_1.default.memo(exports.TableRow, function (prev
         prevProp.rowProps === nextProp.rowProps &&
         prevProp.expanderCell === nextProp.expanderCell &&
         prevProp.tableHasSubRows === nextProp.tableHasSubRows &&
+        prevProp.bodyRef === nextProp.bodyRef &&
         prevProp.state.columnOrder === nextProp.state.columnOrder &&
         !nextProp.state.columnResizing.isResizingColumn &&
         prevProp.state.isTableResizing === nextProp.state.isTableResizing &&

package/cjs/core/Table/cells/EditableCell.js

@@ -31,6 +31,7 @@ exports.EditableCell = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
+var utils_1 = require("../../utils");
 /**
  * Editable cell.
  * It should be passed to `cellRenderer`.
@@ -53,8 +54,9 @@ var EditableCell = function (props) {
     react_1.default.useEffect(function () {
         setValue(sanitizeString(cellProps.value));
     }, [cellProps.value]);
-    var _b = react_1.default.useState(false), isDirty = _b[0], setIsDirty = _b[1];
-    return (react_1.default.createElement("div", __assign({}, cellElementProps, { contentEditable: true, suppressContentEditableWarning: true }, rest, { onInput: function (e) {
+    var _b = react_1.default.useState((0, utils_1.getRandomValue)(10)), key = _b[0], setKey = _b[1];
+    var _c = react_1.default.useState(false), isDirty = _c[0], setIsDirty = _c[1];
+    return (react_1.default.createElement("div", __assign({}, cellElementProps, { contentEditable: true, suppressContentEditableWarning: true, key: key }, rest, { onInput: function (e) {
             var _a;
             setValue(sanitizeString(e.target.innerText));
             setIsDirty(true);
@@ -65,6 +67,9 @@ var EditableCell = function (props) {
                 onCellEdit(cellProps.column.id, value, cellProps.row.original);
             }
             (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            // Prevents error when text is cleared.
+            // New key makes React to reattach with the DOM so it won't complain about deleted text node.
+            setKey((0, utils_1.getRandomValue)(10));
         }, onKeyDown: function (e) {
             var _a;
             // Prevents from adding HTML elements (div, br) inside a cell on Enter press

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

@@ -4,4 +4,5 @@ export { useSubRowFiltering } from './useSubRowFiltering';
 export { useSubRowSelection } from './useSubRowSelection';
 export { useResizeColumns } from './useResizeColumns';
 export { useColumnDragAndDrop } from './useColumnDragAndDrop';
+export { useScrollToRow } from './useScrollToRow';
 export { useStickyColumns } from './useStickyColumns';

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStickyColumns = exports.useColumnDragAndDrop = exports.useResizeColumns = exports.useSubRowSelection = exports.useSubRowFiltering = exports.useSelectionCell = exports.useExpanderCell = void 0;
+exports.useStickyColumns = exports.useScrollToRow = exports.useColumnDragAndDrop = exports.useResizeColumns = exports.useSubRowSelection = exports.useSubRowFiltering = exports.useSelectionCell = exports.useExpanderCell = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -17,5 +17,7 @@ var useResizeColumns_1 = require("./useResizeColumns");
 Object.defineProperty(exports, "useResizeColumns", { enumerable: true, get: function () { return useResizeColumns_1.useResizeColumns; } });
 var useColumnDragAndDrop_1 = require("./useColumnDragAndDrop");
 Object.defineProperty(exports, "useColumnDragAndDrop", { enumerable: true, get: function () { return useColumnDragAndDrop_1.useColumnDragAndDrop; } });
+var useScrollToRow_1 = require("./useScrollToRow");
+Object.defineProperty(exports, "useScrollToRow", { enumerable: true, get: function () { return useScrollToRow_1.useScrollToRow; } });
 var useStickyColumns_1 = require("./useStickyColumns");
 Object.defineProperty(exports, "useStickyColumns", { enumerable: true, get: function () { return useStickyColumns_1.useStickyColumns; } });

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

@@ -0,0 +1,11 @@
+import type { Row } from 'react-table';
+import { TableProps } from '../Table';
+declare 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> & {
+    page: Row<T>[];
+};
+export declare function useScrollToRow<T extends Record<string, unknown>>({ data, enableVirtualization, page, paginatorRenderer, scrollToRow, onBottomReached, }: ScrollToRowProps<T>): ScrollToRow<T>;
+export {};

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

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollToRow = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+function useScrollToRow(_a) {
+    var data = _a.data, enableVirtualization = _a.enableVirtualization, page = _a.page, paginatorRenderer = _a.paginatorRenderer, scrollToRow = _a.scrollToRow, onBottomReached = _a.onBottomReached;
+    var rowRefs = react_1.default.useRef({});
+    // Refs prevents from having `page` and `data` as dependencies
+    // therefore we avoid unnecessary scroll to row.
+    var pageRef = react_1.default.useRef(page);
+    pageRef.current = page;
+    var dataRef = react_1.default.useRef(data);
+    dataRef.current = data;
+    // For virtualized tables, all we need to do is pass the index of the item
+    // to the VirtualScroll component
+    var scrollToIndex = react_1.default.useMemo(function () {
+        if (!scrollToRow || paginatorRenderer || onBottomReached) {
+            return undefined;
+        }
+        var index = scrollToRow(pageRef.current, dataRef.current);
+        return index < 0 ? undefined : index;
+    }, [onBottomReached, paginatorRenderer, scrollToRow]);
+    // For non-virtualized tables, we need to add a ref to each row
+    // and scroll to the element
+    react_1.default.useEffect(function () {
+        var _a;
+        if (enableVirtualization ||
+            scrollToIndex === undefined ||
+            scrollToIndex === null ||
+            scrollToIndex < 0) {
+            return;
+        }
+        (_a = rowRefs.current[pageRef.current[scrollToIndex].id]) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+    }, [enableVirtualization, scrollToIndex]);
+    var tableRowRef = react_1.default.useCallback(function (row) {
+        return function (element) {
+            rowRefs.current[row.id] = element;
+        };
+    }, []);
+    return { scrollToIndex: scrollToIndex, tableRowRef: tableRowRef };
+}
+exports.useScrollToRow = useScrollToRow;

package/cjs/core/Tree/Tree.d.ts

@@ -68,6 +68,15 @@ export declare type TreeProps<T> = {
      * }, [expandedNodes]);
      */
     getNode: (node: T) => NodeData<T>;
+    /**
+     * Virtualization is used to have a better performance with a lot of nodes.
+     *
+     * When enabled, Tree DOM structure will change - it will have a wrapper div
+     * to which `className` and `style` will be applied.
+     * @default false
+     * @beta
+     */
+    enableVirtualization?: boolean;
 } & Omit<CommonProps, 'title'>;
 /**
  * Tree component used to display a hierarchical structure of `TreeNodes`.