@itwin/itwinui-react 1.40.0 → 1.42.0

package/esm/core/Table/TableRowMemoized.js

@@ -24,14 +24,25 @@ import { TableCell } from './TableCell';
  * When adding new features check whether it changes state that affects row. If it does then add equality check to `React.memo`.
  */
 export 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.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 = useIntersection(onIntersect, {
+    var intersectionRoot = React.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 = 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), {
@@ -41,7 +52,7 @@ export var TableRow = function (props) {
             'iui-disabled': isDisabled,
         }, userRowProps === null || userRowProps === void 0 ? void 0 : userRowProps.className),
     });
-    var refs = useMergedRefs(rowRef, mergedProps.ref);
+    var refs = useMergedRefs(intersectionRef, mergedProps.ref, tableRowRef);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", __assign({}, mergedProps, { ref: refs, onClick: function (event) {
                 var _a;
@@ -90,6 +101,7 @@ export var TableRowMemoized = React.memo(TableRow, function (prevProp, nextProp)
         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/esm/core/Table/cells/EditableCell.js

@@ -25,6 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
+import { getRandomValue } from '../../utils';
 /**
  * Editable cell.
  * It should be passed to `cellRenderer`.
@@ -47,8 +48,9 @@ export var EditableCell = function (props) {
     React.useEffect(function () {
         setValue(sanitizeString(cellProps.value));
     }, [cellProps.value]);
-    var _b = React.useState(false), isDirty = _b[0], setIsDirty = _b[1];
-    return (React.createElement("div", __assign({}, cellElementProps, { contentEditable: true, suppressContentEditableWarning: true }, rest, { onInput: function (e) {
+    var _b = React.useState(getRandomValue(10)), key = _b[0], setKey = _b[1];
+    var _c = React.useState(false), isDirty = _c[0], setIsDirty = _c[1];
+    return (React.createElement("div", __assign({}, cellElementProps, { contentEditable: true, suppressContentEditableWarning: true, key: key }, rest, { onInput: function (e) {
             var _a;
             setValue(sanitizeString(e.target.innerText));
             setIsDirty(true);
@@ -59,6 +61,9 @@ export 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(getRandomValue(10));
         }, onKeyDown: function (e) {
             var _a;
             // Prevents from adding HTML elements (div, br) inside a cell on Enter press

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

@@ -8,4 +8,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/esm/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/esm/core/Table/hooks/useScrollToRow.js

@@ -0,0 +1,42 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+export 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.useRef({});
+    // Refs prevents from having `page` and `data` as dependencies
+    // therefore we avoid unnecessary scroll to row.
+    var pageRef = React.useRef(page);
+    pageRef.current = page;
+    var dataRef = React.useRef(data);
+    dataRef.current = data;
+    // For virtualized tables, all we need to do is pass the index of the item
+    // to the VirtualScroll component
+    var scrollToIndex = React.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.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.useCallback(function (row) {
+        return function (element) {
+            rowRefs.current[row.id] = element;
+        };
+    }, []);
+    return { scrollToIndex: scrollToIndex, tableRowRef: tableRowRef };
+}

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

@@ -25,7 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import { useTheme, getFocusableElements } from '../utils';
+import { useTheme, getFocusableElements, useVirtualization, mergeRefs, } from '../utils';
 import '@itwin/itwinui-css/css/tree.css';
 import cx from 'classnames';
 import { TreeContext } from './TreeContext';
@@ -80,7 +80,7 @@ import { TreeContext } from './TreeContext';
   />
  */
 export 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"]);
     useTheme();
     var treeRef = React.useRef(null);
     var focusedIndex = React.useRef(0);
@@ -118,7 +118,7 @@ export var Tree = function (props) {
                 break;
         }
     };
-    var _a = React.useMemo(function () {
+    var _b = React.useMemo(function () {
         var flatList = [];
         var firstLevelNodes = [];
         var flattenNodes = function (nodes, depth, parentNode) {
@@ -147,24 +147,72 @@ export var Tree = function (props) {
         };
         flattenNodes(data);
         return [flatList, firstLevelNodes];
-    }, [data, getNode]), flatNodesList = _a[0], firstLevelNodesList = _a[1];
-    return (React.createElement("ul", __assign({ className: cx('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.useCallback(function (index) {
         var _a, _b, _c, _d;
-        return (React.createElement(TreeContext.Provider, { key: flatNode.nodeProps.nodeId, value: {
-                nodeDepth: flatNode.depth,
-                subNodeIds: flatNode.subNodeIds,
-                groupSize: flatNode.depth === 0
+        var node = flatNodesList[index];
+        return (React.createElement(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.useState(), scrollToIndex = _c[0], setScrollToIndex = _c[1];
+    var flatNodesListRef = React.useRef(flatNodesList);
+    React.useEffect(function () {
+        flatNodesListRef.current = flatNodesList;
+    }, [flatNodesList]);
+    React.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.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualizedTree, __assign({ flatNodesList: flatNodesList, itemRenderer: itemRenderer, scrollToIndex: scrollToIndex, onFocus: handleFocus, onKeyDown: handleKeyDown, ref: treeRef, className: className, style: style }, rest))) : (React.createElement(TreeElement, __assign({ onKeyDown: handleKeyDown, onFocus: handleFocus, className: className, style: style, ref: treeRef }, rest), flatNodesList.map(function (_, i) { return itemRenderer(i); })))));
 };
+var TreeElement = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement("ul", __assign({ className: cx('iui-tree', className), role: 'tree', ref: ref, tabIndex: 0 }, rest), children));
+});
+// Having virtualized tree separately prevents from running all virtualization logic
+var VirtualizedTree = React.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 = useVirtualization({
+        itemsLength: flatNodesList.length,
+        itemRenderer: itemRenderer,
+        scrollToIndex: scrollToIndex,
+    }), outerProps = _b.outerProps, innerProps = _b.innerProps, visibleChildren = _b.visibleChildren;
+    return (React.createElement("div", __assign({}, __assign(__assign({}, outerProps), { className: cx(className, outerProps.className), style: __assign(__assign({}, style), outerProps.style) })),
+        React.createElement(TreeElement, __assign({}, innerProps, rest, { ref: mergeRefs(ref, innerProps.ref) }), visibleChildren)));
+});
 export default Tree;

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

@@ -52,7 +52,7 @@ import { useTreeContext } from './TreeContext';
 export 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"]);
     useTheme();
-    var _e = useTreeContext(), nodeDepth = _e.nodeDepth, _f = _e.subNodeIds, subNodeIds = _f === void 0 ? [] : _f, parentNodeId = _e.parentNodeId, groupSize = _e.groupSize, indexInGroup = _e.indexInGroup;
+    var _e = 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.useState(false), isFocused = _g[0], setIsFocused = _g[1];
     var nodeRef = React.useRef(null);
     var styleDepth = React.useMemo(function () {
@@ -62,7 +62,7 @@ export 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': {
@@ -73,20 +73,19 @@ export 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 = 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;
             }
@@ -98,10 +97,10 @@ export 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/esm/core/Typography/Small/Small.js

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

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

@@ -285,11 +285,11 @@ export 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: mergeRefs(parentRef), // convert object ref to callback ref for better types

package/esm/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/esm/core/utils/hooks/index.js

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

package/esm/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/esm/core/utils/hooks/useLatestRef.js

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+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 var useLatestRef = function (value) {
+    var valueRef = React.useRef(value);
+    React.useEffect(function () {
+        valueRef.current = value;
+    }, [value]);
+    return valueRef;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.40.0",
+  "version": "1.42.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -35,15 +35,15 @@
     "clean:coverage": "rimraf coverage",
     "test": "jest",
     "test:watch": "jest --watch",
-    "createComponent": "node scripts/createComponent.js",
     "format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write",
     "lint": "eslint \"**/*.{js,ts,tsx}\" --max-warnings=0",
     "lint:fix": "yarn lint --fix && node ../configs/copyrightLinter.js --fix \"*/**/*.{js,ts,tsx}\"",
     "copy-files": "cpy \"../../{README,LICENSE}.md\" .",
-    "dev": "yarn build:watch"
+    "dev": "yarn build:watch",
+    "createComponent": "node ../../scripts/createComponent.js"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.59.2",
+    "@itwin/itwinui-css": "^0.61.0",
     "@itwin/itwinui-icons-react": "^1.10.1",
     "@itwin/itwinui-illustrations-react": "^1.3.1",
     "@tippyjs/react": "^4.2.5",