@itwin/itwinui-react 3.12.2 → 3.13.0

package/esm/core/Tree/Tree.js

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import {
   getFocusableElements,
-  useVirtualization,
-  mergeRefs,
-  Box,
   polymorphic,
+  cloneElementWithRef,
+  useVirtualScroll,
+  ShadowRoot,
+  useMergedRefs,
+  useLayoutEffect,
 } from '../../utils/index.js';
-import cx from 'classnames';
 import { TreeContext } from './TreeContext.js';
 export const Tree = (props) => {
-  const {
+  let {
     data,
     className,
     nodeRenderer,
@@ -19,40 +20,36 @@ export const Tree = (props) => {
     style,
     ...rest
   } = props;
-  const treeRef = React.useRef(null);
-  const focusedIndex = React.useRef(0);
+  let treeRef = React.useRef(null);
+  let focusedIndex = React.useRef(0);
   React.useEffect(() => {
     focusedIndex.current = 0;
   }, [data]);
-  const getFocusableNodes = React.useCallback(() => {
-    const focusableItems = getFocusableElements(treeRef.current);
+  let getFocusableNodes = React.useCallback(() => {
+    let focusableItems = getFocusableElements(treeRef.current);
     return focusableItems.filter(
       (i) => !focusableItems.some((p) => p.contains(i.parentElement)),
     );
   }, []);
-  const handleKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    const items = getFocusableNodes();
-    if (!items?.length) {
-      return;
-    }
-    const activeIndex = items.findIndex((el) =>
+  let handleKeyDown = (event) => {
+    if (event.altKey) return;
+    let items = getFocusableNodes();
+    if (!items?.length) return;
+    let activeIndex = items.findIndex((el) =>
       el.contains(treeRef.current?.ownerDocument.activeElement),
     );
-    const currentIndex = activeIndex > -1 ? activeIndex : 0;
+    let currentIndex = activeIndex > -1 ? activeIndex : 0;
     switch (event.key) {
       case 'ArrowUp': {
         event.preventDefault();
-        const newIndex = Math.max(0, currentIndex - 1);
+        let newIndex = Math.max(0, currentIndex - 1);
         items[newIndex].focus();
         focusedIndex.current = newIndex;
         break;
       }
       case 'ArrowDown': {
         event.preventDefault();
-        const newIndex = Math.min(items.length - 1, currentIndex + 1);
+        let newIndex = Math.min(items.length - 1, currentIndex + 1);
         items[newIndex].focus();
         focusedIndex.current = newIndex;
         break;
@@ -61,14 +58,14 @@ export const Tree = (props) => {
         break;
     }
   };
-  const [flatNodesList, firstLevelNodesList] = React.useMemo(() => {
-    const flatList = [];
-    const firstLevelNodes = [];
-    const flattenNodes = (nodes = [], depth = 0, parentNode) => {
-      const nodeIdList = Array();
+  let [flatNodesList, firstLevelNodesList] = React.useMemo(() => {
+    let flatList = [];
+    let firstLevelNodes = [];
+    let flattenNodes = (nodes = [], depth = 0, parentNode) => {
+      let nodeIdList = Array();
       nodes.forEach((element, index) => {
-        const { subNodes, ...nodeProps } = getNode(element);
-        const flatNode = {
+        let { subNodes, ...nodeProps } = getNode(element);
+        let flatNode = {
           nodeProps,
           depth,
           parentNode,
@@ -76,11 +73,9 @@ export const Tree = (props) => {
         };
         nodeIdList.push(flatNode.nodeProps.nodeId);
         flatList.push(flatNode);
-        if (depth === 0) {
-          firstLevelNodes.push(flatNode);
-        }
+        if (0 === depth) firstLevelNodes.push(flatNode);
         if (flatNode.nodeProps.isExpanded) {
-          const subNodeIds = flattenNodes(subNodes, depth + 1, flatNode);
+          let subNodeIds = flattenNodes(subNodes, depth + 1, flatNode);
           flatNode.subNodeIds = subNodeIds;
         }
       });
@@ -89,9 +84,9 @@ export const Tree = (props) => {
     flattenNodes(data);
     return [flatList, firstLevelNodes];
   }, [data, getNode]);
-  const itemRenderer = React.useCallback(
-    (index) => {
-      const node = flatNodesList[index];
+  let itemRenderer = React.useCallback(
+    (index, virtualItem, virtualizer) => {
+      let node = flatNodesList[index];
       return React.createElement(
         TreeContext.Provider,
         {
@@ -100,53 +95,63 @@ export const Tree = (props) => {
             nodeDepth: node.depth,
             subNodeIds: node.subNodeIds,
             groupSize:
-              node.depth === 0
+              0 === node.depth
                 ? firstLevelNodesList.length
                 : node.parentNode?.subNodeIds?.length ?? 0,
             indexInGroup: node.indexInGroup,
             parentNodeId: node.parentNode?.nodeProps.nodeId,
             scrollToParent: node.parentNode
               ? () => {
-                  const parentNodeId = node.parentNode?.nodeProps.nodeId;
-                  const parentNodeIndex = flatNodesList.findIndex(
+                  let parentNodeId = node.parentNode?.nodeProps.nodeId;
+                  let parentNodeIndex = flatNodesList.findIndex(
                     (n) => n.nodeProps.nodeId === parentNodeId,
                   );
                   setScrollToIndex(parentNodeIndex);
                 }
-              : undefined,
+              : void 0,
             size,
           },
         },
-        nodeRenderer(node.nodeProps),
+        virtualItem && virtualizer
+          ? cloneElementWithRef(nodeRenderer(node.nodeProps), (children) => ({
+              ...children.props,
+              key: virtualItem.key,
+              'data-iui-index': virtualItem.index,
+              ref: virtualizer.measureElement,
+              style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                transform: `translateY(${virtualItem.start}px)`,
+              },
+            }))
+          : nodeRenderer(node.nodeProps),
       );
     },
     [firstLevelNodesList.length, flatNodesList, nodeRenderer, size],
   );
-  const [scrollToIndex, setScrollToIndex] = React.useState();
-  const flatNodesListRef = React.useRef(flatNodesList);
+  let [scrollToIndex, setScrollToIndex] = React.useState();
+  let flatNodesListRef = React.useRef(flatNodesList);
   React.useEffect(() => {
     flatNodesListRef.current = flatNodesList;
   }, [flatNodesList]);
   React.useEffect(() => {
     setTimeout(() => {
-      if (scrollToIndex !== undefined) {
-        const nodeId = flatNodesListRef.current[scrollToIndex].nodeProps.nodeId;
-        const nodeElement = treeRef.current?.ownerDocument.querySelector(
+      if (void 0 !== scrollToIndex) {
+        let nodeId = flatNodesListRef.current[scrollToIndex].nodeProps.nodeId;
+        let nodeElement = treeRef.current?.ownerDocument.querySelector(
           `#${nodeId}`,
         );
         nodeElement?.focus();
-        setScrollToIndex(undefined);
+        setScrollToIndex(void 0);
       }
     });
   }, [scrollToIndex]);
-  const handleFocus = (event) => {
-    if (treeRef.current?.contains(event.relatedTarget)) {
-      return;
-    }
-    const items = getFocusableNodes();
-    if (items.length > 0) {
-      items[focusedIndex.current]?.focus();
-    }
+  let handleFocus = (event) => {
+    if (treeRef.current?.contains(event.relatedTarget)) return;
+    let items = getFocusableNodes();
+    if (items.length > 0) items[focusedIndex.current]?.focus();
   };
   return React.createElement(
     React.Fragment,
@@ -169,7 +174,7 @@ export const Tree = (props) => {
             onKeyDown: handleKeyDown,
             onFocus: handleFocus,
             className: className,
-            'data-iui-size': size === 'small' ? 'small' : undefined,
+            'data-iui-size': 'small' === size ? 'small' : void 0,
             style: style,
             ref: treeRef,
             ...rest,
@@ -178,38 +183,54 @@ export const Tree = (props) => {
         ),
   );
 };
-const TreeElement = polymorphic.ul('iui-tree', {
+let TreeElement = polymorphic.div('iui-tree', {
   role: 'tree',
   tabIndex: 0,
 });
-const VirtualizedTree = React.forwardRef(
-  (
-    { flatNodesList, itemRenderer, scrollToIndex, className, style, ...rest },
-    ref,
-  ) => {
-    const { outerProps, innerProps, visibleChildren } = useVirtualization({
-      itemsLength: flatNodesList.length,
-      itemRenderer: itemRenderer,
-      scrollToIndex,
+let VirtualizedTree = React.forwardRef(
+  ({ flatNodesList, itemRenderer, scrollToIndex, ...rest }, ref) => {
+    let parentRef = React.useRef(null);
+    let getItemKey = React.useCallback(
+      (index) => flatNodesList[index].nodeProps.nodeId,
+      [flatNodesList],
+    );
+    let virtualizer = useVirtualScroll({
+      count: flatNodesList.length,
+      getScrollElement: () => parentRef.current,
+      estimateSize: () => 39,
+      getItemKey,
     });
+    useLayoutEffect(() => {
+      if (scrollToIndex) virtualizer.scrollToIndex(scrollToIndex);
+    }, [virtualizer, scrollToIndex]);
     return React.createElement(
-      Box,
+      TreeElement,
       {
-        ...outerProps,
-        className: cx(className, outerProps.className),
-        style: {
-          ...style,
-          ...outerProps.style,
-        },
+        ...rest,
+        ref: useMergedRefs(ref, parentRef),
       },
       React.createElement(
-        TreeElement,
-        {
-          ...innerProps,
-          ...rest,
-          ref: mergeRefs(ref, innerProps.ref),
-        },
-        visibleChildren,
+        ShadowRoot,
+        null,
+        React.createElement(
+          'div',
+          {
+            style: {
+              minBlockSize: virtualizer.getTotalSize(),
+              contain: 'strict',
+            },
+          },
+          React.createElement('slot', null),
+        ),
+      ),
+      React.createElement(
+        React.Fragment,
+        null,
+        virtualizer
+          .getVirtualItems()
+          .map((virtualItem) =>
+            itemRenderer(virtualItem.index, virtualItem, virtualizer),
+          ),
       ),
     );
   },

package/esm/core/Tree/TreeContext.js

@@ -1,9 +1,8 @@
 import * as React from 'react';
-export const TreeContext = React.createContext(undefined);
+export const TreeContext = React.createContext(void 0);
 export const useTreeContext = () => {
-  const context = React.useContext(TreeContext);
-  if (context == undefined) {
+  let context = React.useContext(TreeContext);
+  if (void 0 == context)
     throw new Error('TreeContext must be used within a TreeContext.Provider');
-  }
   return context;
 };

package/esm/core/Tree/TreeNode.d.ts

@@ -50,7 +50,7 @@ type TreeNodeProps = {
     /**
      * Props for subTree list(affects all subnodes of this node).
      */
-    subTreeProps?: React.ComponentProps<'ul'>;
+    subTreeProps?: React.ComponentProps<'div'>;
     /**
      * Flag whether the node is disabled.
      * @default false
@@ -128,5 +128,5 @@ type TreeNodeProps = {
     icon={<SvgPlaceholder />}
   />
  */
-export declare const TreeNode: PolymorphicForwardRefComponent<"li", TreeNodeProps>;
+export declare const TreeNode: PolymorphicForwardRefComponent<"div", TreeNodeProps>;
 export {};

package/esm/core/Tree/TreeNode.js

@@ -9,7 +9,7 @@ import cx from 'classnames';
 import { TreeNodeExpander } from './TreeNodeExpander.js';
 import { useTreeContext } from './TreeContext.js';
 export const TreeNode = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     nodeId,
     nodeProps = {},
     label,
@@ -35,7 +35,7 @@ export const TreeNode = React.forwardRef((props, forwardedRef) => {
     expander,
     ...rest
   } = props;
-  const {
+  let {
     nodeDepth,
     subNodeIds = [],
     parentNodeId,
@@ -43,13 +43,11 @@ export const TreeNode = React.forwardRef((props, forwardedRef) => {
     groupSize,
     indexInGroup,
   } = useTreeContext();
-  const [isFocused, setIsFocused] = React.useState(false);
-  const nodeRef = React.useRef(null);
-  const onKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    const isNodeFocused =
+  let [isFocused, setIsFocused] = React.useState(false);
+  let nodeRef = React.useRef(null);
+  let onKeyDown = (event) => {
+    if (event.altKey) return;
+    let isNodeFocused =
       nodeRef.current === nodeRef.current?.ownerDocument.activeElement;
     switch (event.key) {
       case 'ArrowLeft': {
@@ -59,26 +57,20 @@ export const TreeNode = React.forwardRef((props, forwardedRef) => {
             onExpanded(nodeId, false);
             break;
           }
-          if (parentNodeId) {
-            scrollToParent?.();
-            break;
-          }
+          if (parentNodeId) scrollToParent?.();
           break;
         }
-        const focusableElements = getFocusableElements(nodeRef.current);
-        const currentIndex = focusableElements.indexOf(
+        let focusableElements = getFocusableElements(nodeRef.current);
+        let currentIndex = focusableElements.indexOf(
           nodeRef.current?.ownerDocument.activeElement,
         );
-        if (currentIndex === 0) {
-          nodeRef.current?.focus();
-        } else {
-          focusableElements[currentIndex - 1]?.focus();
-        }
+        if (0 === currentIndex) nodeRef.current?.focus();
+        else focusableElements[currentIndex - 1]?.focus();
         break;
       }
       case 'ArrowRight': {
         event.preventDefault();
-        const focusableElements = getFocusableElements(nodeRef.current);
+        let focusableElements = getFocusableElements(nodeRef.current);
         if (isNodeFocused) {
           if (!isExpanded && hasSubNodes) {
             onExpanded(nodeId, true);
@@ -87,32 +79,25 @@ export const TreeNode = React.forwardRef((props, forwardedRef) => {
           focusableElements[0]?.focus();
           break;
         }
-        const currentIndex = focusableElements.indexOf(
+        let currentIndex = focusableElements.indexOf(
           nodeRef.current?.ownerDocument.activeElement,
         );
-        if (currentIndex < focusableElements.length - 1) {
+        if (currentIndex < focusableElements.length - 1)
           focusableElements[currentIndex + 1].focus();
-          break;
-        }
         break;
       }
       case ' ':
       case 'Spacebar':
-      case 'Enter': {
-        if (event.target !== nodeRef.current) {
-          break;
-        }
+      case 'Enter':
+        if (event.target !== nodeRef.current) break;
         event.preventDefault();
-        if (!isDisabled) {
-          onSelected?.(nodeId, !isSelected);
-        }
+        if (!isDisabled) onSelected?.(nodeId, !isSelected);
         break;
-      }
       default:
         break;
     }
   };
-  const onExpanderClick = React.useCallback(
+  let onExpanderClick = React.useCallback(
     (event) => {
       onExpanded(nodeId, !isExpanded);
       event.stopPropagation();
@@ -122,10 +107,10 @@ export const TreeNode = React.forwardRef((props, forwardedRef) => {
   return React.createElement(
     Box,
     {
-      as: 'li',
+      as: 'div',
       role: 'treeitem',
       className: cx('iui-tree-item', className),
-      'aria-expanded': hasSubNodes ? isExpanded : undefined,
+      'aria-expanded': hasSubNodes ? isExpanded : void 0,
       'aria-disabled': isDisabled,
       'aria-selected': isSelected,
       'aria-level': nodeDepth + 1,
@@ -242,7 +227,7 @@ export const TreeNode = React.forwardRef((props, forwardedRef) => {
     ),
     hasSubNodes &&
       React.createElement(Box, {
-        as: 'ul',
+        as: 'div',
         role: 'group',
         'aria-owns': subNodeIds.join(' '),
         ...subTreeProps,

package/esm/core/Tree/TreeNodeExpander.js

@@ -4,9 +4,9 @@ import { SvgChevronRight, SvgChevronRightSmall } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { TreeContext } from './TreeContext.js';
 export const TreeNodeExpander = React.forwardRef((props, ref) => {
-  const { isExpanded, expanderIconProps = {}, ...rest } = props;
-  const size = React.useContext(TreeContext)?.size ?? 'default';
-  const ChevronIcon = size === 'small' ? SvgChevronRightSmall : SvgChevronRight;
+  let { isExpanded, expanderIconProps = {}, ...rest } = props;
+  let size = React.useContext(TreeContext)?.size ?? 'default';
+  let ChevronIcon = 'small' === size ? SvgChevronRightSmall : SvgChevronRight;
   return React.createElement(
     IconButton,
     {

package/esm/core/Typography/Anchor.js

@@ -4,13 +4,13 @@ import { Box } from '../../utils/index.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 import { TextContext } from './Text.js';
 export const Anchor = React.forwardRef((props, forwardedRef) => {
-  const isInsideText = React.useContext(TextContext);
-  const { isExternal, underline = isInsideText, children, ...rest } = props;
+  let isInsideText = React.useContext(TextContext);
+  let { isExternal, underline = isInsideText, children, ...rest } = props;
   return React.createElement(
     Box,
     {
       as: 'a',
-      'data-iui-underline': underline ? 'true' : undefined,
+      'data-iui-underline': underline ? 'true' : void 0,
       ...rest,
       ref: forwardedRef,
       className: cx(
@@ -22,7 +22,7 @@ export const Anchor = React.forwardRef((props, forwardedRef) => {
       ),
     },
     children,
-    props.target === '_blank' &&
+    '_blank' === props.target &&
       React.createElement(VisuallyHidden, null, ' (opens in new tab)'),
   );
 });

package/esm/core/Typography/Blockquote.js

@@ -2,7 +2,7 @@ import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
 export const Blockquote = React.forwardRef((props, ref) => {
-  const { className, children, footer, ...rest } = props;
+  let { className, children, footer, ...rest } = props;
   return React.createElement(
     Box,
     {

package/esm/core/Typography/Kbd.js

@@ -17,7 +17,7 @@ export const KbdKeys = {
   Down: '\u2193',
 };
 export const Kbd = React.forwardRef((props, forwardedRef) => {
-  const { className, children, ...rest } = props;
+  let { className, children, ...rest } = props;
   return React.createElement(
     Box,
     {

package/esm/core/Typography/Text.js

@@ -2,7 +2,7 @@ import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
 export const Text = React.forwardRef((props, ref) => {
-  const {
+  let {
     variant = 'body',
     className,
     isMuted = false,
@@ -17,8 +17,8 @@ export const Text = React.forwardRef((props, ref) => {
     React.createElement(Box, {
       className: cx(
         {
-          [`iui-text-${variant}`]: variant !== 'body',
-          'iui-text-block': variant === 'body',
+          [`iui-text-${variant}`]: 'body' !== variant,
+          'iui-text-block': 'body' === variant,
           'iui-text-muted': isMuted,
           'iui-skeleton': isSkeleton,
         },

package/esm/core/VisuallyHidden/VisuallyHidden.js

@@ -2,17 +2,16 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Box, ShadowRoot, useHydration } from '../../utils/index.js';
 export const VisuallyHidden = React.forwardRef((props, ref) => {
-  const {
+  let {
     as: asProp = 'span',
     className,
     unhideOnFocus = true,
     children: childrenProp,
     ...rest
   } = props;
-  const isHydrated = useHydration() === 'hydrated';
-  const children = !['div', 'span', 'p'].includes(asProp)
-    ? childrenProp
-    : React.createElement(
+  let isHydrated = 'hydrated' === useHydration();
+  let children = ['div', 'span', 'p'].includes(asProp)
+    ? React.createElement(
         React.Fragment,
         null,
         React.createElement(
@@ -23,20 +22,21 @@ export const VisuallyHidden = React.forwardRef((props, ref) => {
           React.createElement('slot', null),
         ),
         isHydrated && childrenProp,
-      );
+      )
+    : childrenProp;
   return React.createElement(
     Box,
     {
       as: asProp,
       className: cx('iui-visually-hidden', className),
-      'data-iui-unhide-on-focus': unhideOnFocus ? true : undefined,
+      'data-iui-unhide-on-focus': !!unhideOnFocus || void 0,
       ref: ref,
       ...rest,
     },
     children,
   );
 });
-const css = `
+let css = `
   :host(:where(:not([data-iui-unhide-on-focus]:is(:focus-within, :active)))) {
     clip-path: inset(50%) !important;
     overflow: hidden !important;