@itwin/itwinui-react 1.40.0 → 1.42.0

package/cjs/core/Tree/Tree.js

@@ -86,7 +86,7 @@ var TreeContext_1 = require("./TreeContext");
   />
  */
 var Tree = function (props) {
-    var data = props.data, className = props.className, nodeRenderer = props.nodeRenderer, getNode = props.getNode, rest = __rest(props, ["data", "className", "nodeRenderer", "getNode"]);
+    var data = props.data, className = props.className, nodeRenderer = props.nodeRenderer, getNode = props.getNode, _a = props.enableVirtualization, enableVirtualization = _a === void 0 ? false : _a, style = props.style, rest = __rest(props, ["data", "className", "nodeRenderer", "getNode", "enableVirtualization", "style"]);
     (0, utils_1.useTheme)();
     var treeRef = react_1.default.useRef(null);
     var focusedIndex = react_1.default.useRef(0);
@@ -124,7 +124,7 @@ var Tree = function (props) {
                 break;
         }
     };
-    var _a = react_1.default.useMemo(function () {
+    var _b = react_1.default.useMemo(function () {
         var flatList = [];
         var firstLevelNodes = [];
         var flattenNodes = function (nodes, depth, parentNode) {
@@ -153,25 +153,73 @@ var Tree = function (props) {
         };
         flattenNodes(data);
         return [flatList, firstLevelNodes];
-    }, [data, getNode]), flatNodesList = _a[0], firstLevelNodesList = _a[1];
-    return (react_1.default.createElement("ul", __assign({ className: (0, classnames_1.default)('iui-tree', className), role: 'tree', onKeyDown: handleKeyDown, ref: treeRef, tabIndex: 0, onFocus: function () {
-            var _a;
-            var items = getFocusableNodes();
-            if (items.length > 0) {
-                (_a = items[focusedIndex.current]) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-        } }, rest), flatNodesList.map(function (flatNode) {
+    }, [data, getNode]), flatNodesList = _b[0], firstLevelNodesList = _b[1];
+    var itemRenderer = react_1.default.useCallback(function (index) {
         var _a, _b, _c, _d;
-        return (react_1.default.createElement(TreeContext_1.TreeContext.Provider, { key: flatNode.nodeProps.nodeId, value: {
-                nodeDepth: flatNode.depth,
-                subNodeIds: flatNode.subNodeIds,
-                groupSize: flatNode.depth === 0
+        var node = flatNodesList[index];
+        return (react_1.default.createElement(TreeContext_1.TreeContext.Provider, { key: node.nodeProps.nodeId, value: {
+                nodeDepth: node.depth,
+                subNodeIds: node.subNodeIds,
+                groupSize: node.depth === 0
                     ? firstLevelNodesList.length
-                    : (_c = (_b = (_a = flatNode.parentNode) === null || _a === void 0 ? void 0 : _a.subNodeIds) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0,
-                indexInGroup: flatNode.indexInGroup,
-                parentNodeId: (_d = flatNode.parentNode) === null || _d === void 0 ? void 0 : _d.nodeProps.nodeId,
-            } }, nodeRenderer(flatNode.nodeProps)));
-    })));
+                    : (_c = (_b = (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.subNodeIds) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0,
+                indexInGroup: node.indexInGroup,
+                parentNodeId: (_d = node.parentNode) === null || _d === void 0 ? void 0 : _d.nodeProps.nodeId,
+                scrollToParent: node.parentNode
+                    ? function () {
+                        var _a;
+                        var parentNodeId = (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.nodeProps.nodeId;
+                        var parentNodeIndex = flatNodesList.findIndex(function (n) { return n.nodeProps.nodeId === parentNodeId; });
+                        setScrollToIndex(parentNodeIndex);
+                    }
+                    : undefined,
+            } }, nodeRenderer(node.nodeProps)));
+    }, [firstLevelNodesList.length, flatNodesList, nodeRenderer]);
+    var _c = react_1.default.useState(), scrollToIndex = _c[0], setScrollToIndex = _c[1];
+    var flatNodesListRef = react_1.default.useRef(flatNodesList);
+    react_1.default.useEffect(function () {
+        flatNodesListRef.current = flatNodesList;
+    }, [flatNodesList]);
+    react_1.default.useEffect(function () {
+        setTimeout(function () {
+            var _a;
+            if (scrollToIndex !== undefined) {
+                var nodeId = flatNodesListRef.current[scrollToIndex].nodeProps.nodeId;
+                var nodeElement = (_a = treeRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.querySelector("#".concat(nodeId));
+                nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.focus();
+                // Need to reset that if navigating with mouse and keyboard,
+                // e.g. pressing arrow left to go to parent node and then with mouse
+                // clicking some other child node and then pressing arrow left
+                setScrollToIndex(undefined);
+            }
+        });
+    }, [scrollToIndex]);
+    var handleFocus = function (event) {
+        var _a, _b;
+        if ((_a = treeRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) {
+            return;
+        }
+        var items = getFocusableNodes();
+        if (items.length > 0) {
+            (_b = items[focusedIndex.current]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null, enableVirtualization ? (react_1.default.createElement(VirtualizedTree, __assign({ flatNodesList: flatNodesList, itemRenderer: itemRenderer, scrollToIndex: scrollToIndex, onFocus: handleFocus, onKeyDown: handleKeyDown, ref: treeRef, className: className, style: style }, rest))) : (react_1.default.createElement(TreeElement, __assign({ onKeyDown: handleKeyDown, onFocus: handleFocus, className: className, style: style, ref: treeRef }, rest), flatNodesList.map(function (_, i) { return itemRenderer(i); })))));
 };
 exports.Tree = Tree;
+var TreeElement = react_1.default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (react_1.default.createElement("ul", __assign({ className: (0, classnames_1.default)('iui-tree', className), role: 'tree', ref: ref, tabIndex: 0 }, rest), children));
+});
+// Having virtualized tree separately prevents from running all virtualization logic
+var VirtualizedTree = react_1.default.forwardRef(function (_a, ref) {
+    var flatNodesList = _a.flatNodesList, itemRenderer = _a.itemRenderer, scrollToIndex = _a.scrollToIndex, className = _a.className, style = _a.style, rest = __rest(_a, ["flatNodesList", "itemRenderer", "scrollToIndex", "className", "style"]);
+    var _b = (0, utils_1.useVirtualization)({
+        itemsLength: flatNodesList.length,
+        itemRenderer: itemRenderer,
+        scrollToIndex: scrollToIndex,
+    }), outerProps = _b.outerProps, innerProps = _b.innerProps, visibleChildren = _b.visibleChildren;
+    return (react_1.default.createElement("div", __assign({}, __assign(__assign({}, outerProps), { className: (0, classnames_1.default)(className, outerProps.className), style: __assign(__assign({}, style), outerProps.style) })),
+        react_1.default.createElement(TreeElement, __assign({}, innerProps, rest, { ref: (0, utils_1.mergeRefs)(ref, innerProps.ref) }), visibleChildren)));
+});
 exports.default = exports.Tree;

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

@@ -20,6 +20,10 @@ export declare type TreeContextProps = {
      * Node index in the list of nodes under the same parent node or in the root. Used for an accessibility attribute.
      */
     indexInGroup: number;
+    /**
+     * Function that scrolls to the node's parent node.
+     */
+    scrollToParent?: () => void;
 };
 export declare const TreeContext: React.Context<TreeContextProps | undefined>;
 export declare const useTreeContext: () => TreeContextProps;

package/cjs/core/Tree/TreeNode.js

@@ -58,7 +58,7 @@ var TreeContext_1 = require("./TreeContext");
 var TreeNode = function (props) {
     var nodeId = props.nodeId, label = props.label, sublabel = props.sublabel, children = props.children, className = props.className, icon = props.icon, _a = props.hasSubNodes, hasSubNodes = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isExpanded, isExpanded = _c === void 0 ? false : _c, _d = props.isSelected, isSelected = _d === void 0 ? false : _d, onSelected = props.onSelected, onExpanded = props.onExpanded, checkbox = props.checkbox, expander = props.expander, rest = __rest(props, ["nodeId", "label", "sublabel", "children", "className", "icon", "hasSubNodes", "isDisabled", "isExpanded", "isSelected", "onSelected", "onExpanded", "checkbox", "expander"]);
     (0, utils_1.useTheme)();
-    var _e = (0, TreeContext_1.useTreeContext)(), nodeDepth = _e.nodeDepth, _f = _e.subNodeIds, subNodeIds = _f === void 0 ? [] : _f, parentNodeId = _e.parentNodeId, groupSize = _e.groupSize, indexInGroup = _e.indexInGroup;
+    var _e = (0, TreeContext_1.useTreeContext)(), nodeDepth = _e.nodeDepth, _f = _e.subNodeIds, subNodeIds = _f === void 0 ? [] : _f, parentNodeId = _e.parentNodeId, scrollToParent = _e.scrollToParent, groupSize = _e.groupSize, indexInGroup = _e.indexInGroup;
     var _g = react_1.default.useState(false), isFocused = _g[0], setIsFocused = _g[1];
     var nodeRef = react_1.default.useRef(null);
     var styleDepth = react_1.default.useMemo(function () {
@@ -68,7 +68,7 @@ var TreeNode = function (props) {
             : { marginLeft: nodeDepth ? nodeDepth * 28 : 0 };
     }, [nodeDepth]);
     var onKeyDown = function (event) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f;
         var isNodeFocused = nodeRef.current === ((_a = nodeRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement);
         switch (event.key) {
             case 'ArrowLeft': {
@@ -79,20 +79,19 @@ var TreeNode = function (props) {
                         break;
                     }
                     if (parentNodeId) {
-                        var parentNode = (_b = nodeRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.querySelector("#".concat(parentNodeId));
-                        parentNode === null || parentNode === void 0 ? void 0 : parentNode.focus();
+                        scrollToParent === null || scrollToParent === void 0 ? void 0 : scrollToParent();
                         break;
                     }
                     // If it is top level node (doesn't have parent node), then do nothing.
                     break;
                 }
                 var focusableElements = (0, utils_1.getFocusableElements)(nodeRef.current);
-                var currentIndex = focusableElements.indexOf((_c = nodeRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument.activeElement);
+                var currentIndex = focusableElements.indexOf((_b = nodeRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.activeElement);
                 if (currentIndex === 0) {
-                    (_d = nodeRef.current) === null || _d === void 0 ? void 0 : _d.focus();
+                    (_c = nodeRef.current) === null || _c === void 0 ? void 0 : _c.focus();
                 }
                 else {
-                    (_e = focusableElements[currentIndex - 1]) === null || _e === void 0 ? void 0 : _e.focus();
+                    (_d = focusableElements[currentIndex - 1]) === null || _d === void 0 ? void 0 : _d.focus();
                 }
                 break;
             }
@@ -104,10 +103,10 @@ var TreeNode = function (props) {
                         onExpanded(nodeId, true);
                         break;
                     }
-                    (_f = focusableElements[0]) === null || _f === void 0 ? void 0 : _f.focus();
+                    (_e = focusableElements[0]) === null || _e === void 0 ? void 0 : _e.focus();
                     break;
                 }
-                var currentIndex = focusableElements.indexOf((_g = nodeRef.current) === null || _g === void 0 ? void 0 : _g.ownerDocument.activeElement);
+                var currentIndex = focusableElements.indexOf((_f = nodeRef.current) === null || _f === void 0 ? void 0 : _f.ownerDocument.activeElement);
                 if (currentIndex < focusableElements.length - 1) {
                     focusableElements[currentIndex + 1].focus();
                     break;

package/cjs/core/Typography/Small/Small.js

@@ -43,6 +43,6 @@ require("@itwin/itwinui-css/css/text.css");
 exports.Small = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("p", __assign({ ref: ref, className: (0, classnames_1.default)('iui-text-small', { 'iui-text-muted': isMuted }, className) }, rest)));
+    return (react_1.default.createElement("small", __assign({ ref: ref, className: (0, classnames_1.default)('iui-text-small', { 'iui-text-muted': isMuted }, className) }, rest)));
 });
 exports.default = exports.Small;

package/cjs/core/utils/components/VirtualScroll.js

@@ -291,11 +291,11 @@ var useVirtualization = function (props) {
         updateVirtualScroll();
     }, [scrollContainerHeight, updateVirtualScroll]);
     return {
-        outerProps: __assign({ style: __assign({ overflow: 'hidden', minHeight: itemsLength > 1
+        outerProps: __assign({ style: __assign({ minHeight: itemsLength > 1
                     ? Math.max(itemsLength - 2, 0) * childHeight.current.middle +
                         childHeight.current.first +
                         childHeight.current.last
-                    : childHeight.current.middle, width: '100%' }, style) }, rest),
+                    : childHeight.current.middle, minWidth: '100%' }, style) }, rest),
         innerProps: {
             style: { willChange: 'transform' },
             ref: (0, hooks_1.mergeRefs)(parentRef), // convert object ref to callback ref for better types

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

@@ -7,3 +7,4 @@ export * from './useTheme';
 export * from './useIntersection';
 export * from './useMediaQuery';
 export * from './useSafeContext';
+export * from './useLatestRef';

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

@@ -27,3 +27,4 @@ __exportStar(require("./useTheme"), exports);
 __exportStar(require("./useIntersection"), exports);
 __exportStar(require("./useMediaQuery"), exports);
 __exportStar(require("./useSafeContext"), exports);
+__exportStar(require("./useLatestRef"), exports);

package/cjs/core/utils/hooks/useLatestRef.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * Hook that keeps track of the latest value in a ref.
+ * @private
+ * @example
+ * const { value } = props;
+ * const valueRef = useLatestRef(value);
+ */
+export declare const useLatestRef: <T>(value: T) => React.MutableRefObject<T>;

package/cjs/core/utils/hooks/useLatestRef.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLatestRef = 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"));
+/**
+ * Hook that keeps track of the latest value in a ref.
+ * @private
+ * @example
+ * const { value } = props;
+ * const valueRef = useLatestRef(value);
+ */
+var useLatestRef = function (value) {
+    var valueRef = react_1.default.useRef(value);
+    react_1.default.useEffect(function () {
+        valueRef.current = value;
+    }, [value]);
+    return valueRef;
+};
+exports.useLatestRef = useLatestRef;

package/esm/core/ComboBox/ComboBox.js

@@ -28,7 +28,7 @@ import React from 'react';
 import cx from 'classnames';
 import { MenuExtraContent } from '../Menu';
 import { Text } from '../Typography';
-import { useTheme, getRandomValue, mergeRefs, } from '../utils';
+import { useTheme, getRandomValue, mergeRefs, useLatestRef, } from '../utils';
 import 'tippy.js/animations/shift-away.css';
 import { ComboBoxActionContext, comboBoxReducer, ComboBoxRefsContext, ComboBoxStateContext, } from './helpers';
 import { ComboBoxDropdown } from './ComboBoxDropdown';
@@ -68,11 +68,10 @@ export var ComboBox = function (props) {
     var inputRef = React.useRef(null);
     var menuRef = React.useRef(null);
     var toggleButtonRef = React.useRef(null);
-    // Latest value of the onChange prop
-    var onChangeProp = React.useRef(onChange);
-    React.useEffect(function () {
-        onChangeProp.current = onChange;
-    }, [onChange]);
+    var mounted = React.useRef(false);
+    var valuePropRef = useLatestRef(valueProp);
+    var onChangeProp = useLatestRef(onChange);
+    var optionsRef = useLatestRef(options);
     // Record to store all extra information (e.g. original indexes), where the key is the id of the option
     var optionsExtraInfoRef = React.useRef({});
     // Clear the extra info when the options change so that it can be reinitialized below
@@ -91,7 +90,9 @@ export var ComboBox = function (props) {
     // Reducer where all the component-wide state is stored
     var _e = React.useReducer(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.useLayoutEffect(function () {
@@ -99,7 +100,7 @@ export 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
@@ -108,10 +109,10 @@ export 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.useState(0), minWidth = _g[0], setMinWidth = _g[1];
     React.useEffect(function () {
@@ -142,14 +143,14 @@ export 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.useEffect(function () {
         dispatch([
@@ -160,14 +161,17 @@ export var ComboBox = function (props) {
     // Call user-defined onChange when the value actually changes
     React.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.useCallback(function (option, filteredIndex) {
         var optionId = getOptionId(option, id);
         var __originalIndex = optionsExtraInfoRef.current[optionId].__originalIndex;

package/esm/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/esm/core/ErrorPage/ErrorPage.js

@@ -31,6 +31,8 @@ import Svg500 from '@itwin/itwinui-illustrations-react/cjs/illustrations/500';
 import Svg502 from '@itwin/itwinui-illustrations-react/cjs/illustrations/502';
 import Svg503 from '@itwin/itwinui-illustrations-react/cjs/illustrations/503';
 import SvgError from '@itwin/itwinui-illustrations-react/cjs/illustrations/Error';
+import SvgRedirect from '@itwin/itwinui-illustrations-react/cjs/illustrations/Redirect';
+import SvgTimedOut from '@itwin/itwinui-illustrations-react/cjs/illustrations/TimedOut';
 import React from 'react';
 import { Button } from '../Buttons/Button';
 import { useTheme } from '../utils';
@@ -44,9 +46,19 @@ import '@itwin/itwinui-css/css/non-ideal-state.css';
 export 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"]);
     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.createElement(SvgRedirect, { className: 'iui-non-ideal-state-illustration' });
+            }
             case '401': {
                 return React.createElement(Svg401, { className: 'iui-non-ideal-state-illustration' });
             }
@@ -56,6 +68,10 @@ export var ErrorPage = function (props) {
             case '404': {
                 return React.createElement(Svg404, { className: 'iui-non-ideal-state-illustration' });
             }
+            case '408':
+            case '504': {
+                return React.createElement(SvgTimedOut, { className: 'iui-non-ideal-state-illustration' });
+            }
             case '500': {
                 return React.createElement(Svg500, { className: 'iui-non-ideal-state-illustration' });
             }
@@ -76,6 +92,16 @@ export 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;
             }
@@ -85,6 +111,10 @@ export var ErrorPage = function (props) {
             case '404': {
                 return defaultErrorMessages.pageNotFound;
             }
+            case '408':
+            case '504': {
+                return defaultErrorMessages.timedOut || '';
+            }
             case '500': {
                 return defaultErrorMessages.internalServerError;
             }

package/esm/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/esm/core/Modal/Modal.js

@@ -30,6 +30,7 @@ import cx from 'classnames';
 import SvgClose from '@itwin/itwinui-icons-react/cjs/icons/Close';
 import { useTheme, getContainer, getDocument, FocusTrap, } from '../utils';
 import '@itwin/itwinui-css/css/dialog.css';
+import '@itwin/itwinui-css/css/backdrop.css';
 import { IconButton } from '../Buttons/IconButton';
 import { CSSTransition } from 'react-transition-group';
 /**
@@ -112,14 +113,16 @@ export var Modal = function (props) {
             onClose(event);
         }
     };
-    return !!container ? (ReactDOM.createPortal(React.createElement(CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true },
+    return !!container ? (ReactDOM.createPortal(React.createElement(React.Fragment, null,
+        React.createElement("div", { className: cx('iui-backdrop', { 'iui-backdrop-visible': isOpen }), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }),
         React.createElement(FocusTrap, null,
-            React.createElement("div", __assign({ className: cx('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.createElement("div", { className: 'iui-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true' },
-                    React.createElement("div", { className: 'iui-dialog-title-bar' },
-                        React.createElement("div", { className: 'iui-dialog-title' }, title),
-                        isDismissible && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
-                            React.createElement(SvgClose, null)))),
-                    children)))), container)) : (React.createElement(React.Fragment, null));
+            React.createElement("div", null,
+                React.createElement(CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true },
+                    React.createElement("div", __assign({ className: cx('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.createElement("div", { className: 'iui-dialog-title-bar' },
+                            React.createElement("div", { className: 'iui-dialog-title' }, title),
+                            isDismissible && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
+                                React.createElement(SvgClose, null)))),
+                        children))))), container)) : (React.createElement(React.Fragment, null));
 };
 export default Modal;

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

@@ -28,7 +28,7 @@ import React from 'react';
 import cx from 'classnames';
 import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, } from 'react-table';
 import { ProgressRadial } from '../ProgressIndicators';
-import { useTheme, useResizeObserver } from '../utils';
+import { useTheme, useResizeObserver, mergeRefs } from '../utils';
 import '@itwin/itwinui-css/css/table.css';
 import SvgSortDown from '@itwin/itwinui-icons-react/cjs/icons/SortDown';
 import SvgSortUp from '@itwin/itwinui-icons-react/cjs/icons/SortUp';
@@ -36,7 +36,7 @@ import { getCellStyle, getStickyStyle } from './utils';
 import { TableRowMemoized } from './TableRowMemoized';
 import { FilterToggle } from './filters';
 import { customFilterFunctions } from './filters/customFilterFunctions';
-import { useExpanderCell, useSelectionCell, useSubRowFiltering, useSubRowSelection, useResizeColumns, useColumnDragAndDrop, useStickyColumns, } from './hooks';
+import { useExpanderCell, useSelectionCell, useSubRowFiltering, useSubRowSelection, useResizeColumns, useColumnDragAndDrop, useScrollToRow, useStickyColumns, } from './hooks';
 import { onExpandHandler, onFilterHandler, onSelectHandler, onSingleSelectHandler, onTableResizeEnd, onTableResizeStart, } from './actionHandlers';
 import VirtualScroll from '../utils/components/VirtualScroll';
 import { SELECTION_CELL_ID } from './columns';
@@ -234,6 +234,7 @@ export var Table = function (props) {
         state.pageIndex,
         state.pageSize,
     ]);
+    var _r = useScrollToRow(__assign(__assign({}, props), { page: page })), scrollToIndex = _r.scrollToIndex, tableRowRef = _r.tableRowRef;
     var columnRefs = React.useRef({});
     var previousTableWidth = React.useRef(0);
     var onTableResize = React.useCallback(function (_a) {
@@ -269,22 +270,27 @@ export var Table = function (props) {
     });
     var headerRef = React.useRef(null);
     var bodyRef = React.useRef(null);
+    // Using `useState` to rerender rows when table body ref is available
+    var _s = React.useState(null), bodyRefState = _s[0], setBodyRefState = _s[1];
     var getPreparedRow = React.useCallback(function (index) {
         var row = page[index];
         prepareRow(row);
-        return (React.createElement(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.createElement(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.useCallback(function (index) { return getPreparedRow(index); }, [getPreparedRow]);
     var updateStickyState = function () {
@@ -360,13 +366,13 @@ export var Table = function (props) {
                     'iui-zebra-striping': styleType === 'zebra-rows',
                 }),
                 style: { outline: 0 },
-            }), { ref: bodyRef, onScroll: function () {
+            }), { ref: mergeRefs(bodyRef, setBodyRefState), onScroll: function () {
                     if (headerRef.current && bodyRef.current) {
                         headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
                         updateStickyState();
                     }
                 }, tabIndex: -1 }),
-                data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer })) : (page.map(function (_, index) { return getPreparedRow(index); })))),
+                data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer, scrollToIndex: scrollToIndex })) : (page.map(function (_, index) { return getPreparedRow(index); })))),
                 isLoading && data.length === 0 && (React.createElement("div", { className: 'iui-table-empty' },
                     React.createElement(ProgressRadial, { indeterminate: true }))),
                 isLoading && data.length !== 0 && (React.createElement("div", { className: 'iui-row' },

package/esm/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;