@itwin/itwinui-react 1.41.0 → 1.43.1

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) {
@@ -276,11 +277,11 @@ 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 _r = react_1.default.useState(null), bodyRefState = _r[0], setBodyRefState = _r[1];
+    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, bodyRef: bodyRefState }));
+        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,
         prepareRow,
@@ -294,6 +295,8 @@ var Table = function (props) {
         instance,
         expanderCell,
         bodyRefState,
+        enableVirtualization,
+        tableRowRef,
     ]);
     var virtualizedItemRenderer = react_1.default.useCallback(function (index) { return getPreparedRow(index); }, [getPreparedRow]);
     var updateStickyState = function () {
@@ -330,7 +333,12 @@ var Table = function (props) {
             className: (0, classnames_1.default)('iui-table', (_a = {}, _a["iui-".concat(density)] = density !== 'default', _a), className),
             style: __assign({ minWidth: 0 }, style),
         }), ariaDataAttributes),
-            react_1.default.createElement("div", { className: 'iui-table-header-wrapper', ref: headerRef },
+            react_1.default.createElement("div", { className: 'iui-table-header-wrapper', ref: headerRef, onScroll: function () {
+                    if (headerRef.current && bodyRef.current) {
+                        bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
+                        updateStickyState();
+                    }
+                } },
                 react_1.default.createElement("div", { className: 'iui-table-header' }, headerGroups.slice(1).map(function (headerGroup) {
                     var headerGroupProps = headerGroup.getHeaderGroupProps({
                         className: 'iui-row',
@@ -375,7 +383,7 @@ var Table = function (props) {
                         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

@@ -21,6 +21,7 @@ export declare const TableRow: <T extends Record<string, unknown>>(props: {
     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>;
@@ -37,4 +38,5 @@ export declare const TableRowMemoized: <T extends Record<string, unknown>>(props
     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,7 +30,7 @@ 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, bodyRef = props.bodyRef;
+    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);
@@ -58,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)(intersectionRef, 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;

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

@@ -1,5 +1,11 @@
 /// <reference types="react" />
 import { HeaderProps } from 'react-table';
+import { DropdownMenuProps } from '../../DropdownMenu';
+declare type ActionColumnProps = {
+    columnManager?: boolean | {
+        dropdownMenuProps: Omit<DropdownMenuProps, 'menuItems' | 'children'>;
+    };
+};
 /**
  * Action column that adds column manager to the Table header.
  * It is recommended to add this column to the end of the Table
@@ -19,9 +25,7 @@ import { HeaderProps } from 'react-table';
  *   ),
  * },
  */
-export declare const ActionColumn: <T extends Record<string, unknown>>({ columnManager, }?: {
-    columnManager?: boolean | undefined;
-}) => {
+export declare const ActionColumn: <T extends Record<string, unknown>>({ columnManager, }?: ActionColumnProps) => {
     id: string;
     disableResizing: boolean;
     disableGroupBy: boolean;
@@ -33,3 +37,4 @@ export declare const ActionColumn: <T extends Record<string, unknown>>({ columnM
     disableReordering: boolean;
     Header: ({ allColumns, dispatch, state }: HeaderProps<T>) => JSX.Element | null;
 };
+export {};

package/cjs/core/Table/columns/actionColumn.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -17,6 +28,7 @@ var Menu_1 = require("../../Menu");
 var Table_1 = require("../Table");
 var selectionColumn_1 = require("./selectionColumn");
 var expanderColumn_1 = require("./expanderColumn");
+var classnames_1 = __importDefault(require("classnames"));
 var ACTION_CELL_ID = 'iui-table-action';
 /**
  * Action column that adds column manager to the Table header.
@@ -52,6 +64,7 @@ var ActionColumn = function (_a) {
         Header: function (_a) {
             var allColumns = _a.allColumns, dispatch = _a.dispatch, state = _a.state;
             var _b = react_1.default.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+            var buttonRef = react_1.default.useRef(null);
             if (!columnManager) {
                 return null;
             }
@@ -77,13 +90,31 @@ var ActionColumn = function (_a) {
                         }
                         // Triggers an update to resize the widths of all visible columns
                         dispatch({ type: Table_1.tableResizeStartAction });
+                        // If some columns were resized and some columns visibility was enabled, then horizontal scrollbar appears
+                        // and table is scrolled to the very left which means our visibility dropdown menu is not visible.
+                        // So for better UX we need to scroll to that dropdown menu.
+                        queueMicrotask(function () {
+                            var _a;
+                            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+                        });
                     };
                     return (react_1.default.createElement(Menu_1.MenuItem, { key: column.id, icon: react_1.default.createElement(Checkbox_1.Checkbox, { checked: checked, disabled: column.disableToggleVisibility, onClick: function (e) { return e.stopPropagation(); }, onChange: onClick, "aria-labelledby": "iui-column-".concat(column.id) }), onClick: onClick, disabled: column.disableToggleVisibility },
                         react_1.default.createElement("div", { id: "iui-column-".concat(column.id) }, column.render('Header'))));
                 });
             };
-            return (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { menuItems: headerCheckBoxes, onHide: function () { return setIsOpen(false); }, onShow: function () { return setIsOpen(true); } },
-                react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', isActive: isOpen },
+            var dropdownMenuProps = typeof columnManager !== 'boolean'
+                ? columnManager.dropdownMenuProps
+                : {};
+            return (react_1.default.createElement(DropdownMenu_1.DropdownMenu, __assign({}, dropdownMenuProps, { menuItems: headerCheckBoxes, onHide: function (i) {
+                    var _a;
+                    setIsOpen(false);
+                    (_a = dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+                }, onShow: function (i) {
+                    var _a;
+                    setIsOpen(true);
+                    (_a = dropdownMenuProps.onShow) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+                }, style: __assign({ maxHeight: '315px' }, dropdownMenuProps.style), className: (0, classnames_1.default)('iui-scroll', dropdownMenuProps.className) }),
+                react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', isActive: isOpen, ref: buttonRef },
                     react_1.default.createElement(ColumnManager_1.default, null))));
         },
     };

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, }: 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;
+    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) {
+            return undefined;
+        }
+        var 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_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`.

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/index.d.ts

@@ -1,5 +1,7 @@
 export { Alert } from './Alert';
 export type { AlertProps } from './Alert';
+export { Backdrop } from './Backdrop';
+export type { BackdropProps } from './Backdrop';
 export { Badge } from './Badge';
 export type { BadgeProps } from './Badge';
 export { Breadcrumbs } from './Breadcrumbs';
@@ -28,7 +30,7 @@ export { Fieldset } from './Fieldset';
 export type { FieldsetProps } from './Fieldset';
 export { FileUpload, FileUploadTemplate } from './FileUpload';
 export type { FileUploadProps, FileUploadTemplateProps } from './FileUpload';
-export { Footer } from './Footer';
+export { Footer, defaultFooterElements } from './Footer';
 export type { FooterProps, FooterElement, TitleTranslations } from './Footer';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export type { HeaderProps, HeaderBreadcrumbsProps, HeaderButtonProps, HeaderLogoProps, } from './Header';

package/cjs/core/index.js

@@ -3,15 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
-exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = exports.Modal = void 0;
-exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = void 0;
+exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.Alert = void 0;
+exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = void 0;
+exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = 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 Alert_1 = require("./Alert");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_1.Alert; } });
+var Backdrop_1 = require("./Backdrop");
+Object.defineProperty(exports, "Backdrop", { enumerable: true, get: function () { return Backdrop_1.Backdrop; } });
 var Badge_1 = require("./Badge");
 Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
 var Breadcrumbs_1 = require("./Breadcrumbs");
@@ -52,6 +54,7 @@ Object.defineProperty(exports, "FileUpload", { enumerable: true, get: function (
 Object.defineProperty(exports, "FileUploadTemplate", { enumerable: true, get: function () { return FileUpload_1.FileUploadTemplate; } });
 var Footer_1 = require("./Footer");
 Object.defineProperty(exports, "Footer", { enumerable: true, get: function () { return Footer_1.Footer; } });
+Object.defineProperty(exports, "defaultFooterElements", { enumerable: true, get: function () { return Footer_1.defaultFooterElements; } });
 var Header_1 = require("./Header");
 Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return Header_1.Header; } });
 Object.defineProperty(exports, "HeaderBreadcrumbs", { enumerable: true, get: function () { return Header_1.HeaderBreadcrumbs; } });

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

@@ -42,7 +42,7 @@ var FocusTrap = function (props) {
             lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
         }
     };
-    return (react_1.default.createElement("div", null,
+    return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { tabIndex: 0, onFocus: onFirstFocus, "aria-hidden": true }),
         react_1.default.cloneElement(children, {
             ref: (0, useMergedRefs_1.mergeRefs)(children.ref, childRef),

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

@@ -44,7 +44,7 @@ var MiddleTextTruncation = function (props) {
     var _b = (0, useOverflow_1.useOverflow)(text), ref = _b[0], visibleCount = _b[1];
     var truncatedText = react_1.default.useMemo(function () {
         if (visibleCount < text.length) {
-            return "".concat(text.substr(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)).concat(ELLIPSIS_CHAR).concat(text.substr(text.length - endCharsCount));
+            return "".concat(text.substring(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)).concat(ELLIPSIS_CHAR).concat(text.substring(text.length - endCharsCount));
         }
         else {
             return text;

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/Backdrop/Backdrop.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/backdrop.css';
+export declare type BackdropProps = {
+    /**
+     * Flag whether backdrop should be shown.
+     * @default true
+     */
+    isVisible?: boolean;
+} & React.ComponentPropsWithRef<'div'>;
+export declare const Backdrop: React.ForwardRefExoticComponent<Pick<BackdropProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "isVisible"> & React.RefAttributes<HTMLDivElement>>;