@itwin/itwinui-react 3.13.4 → 3.14.1

package/DEV-esm/core/Tree/Tree.js

@@ -1,188 +1,239 @@
 import * as React from 'react';
-import { getFocusableElements, polymorphic, cloneElementWithRef, useVirtualScroll, ShadowRoot, useMergedRefs, useLayoutEffect } from '../../utils/index.js';
+import {
+  getFocusableElements,
+  polymorphic,
+  cloneElementWithRef,
+  useVirtualScroll,
+  ShadowRoot,
+  useMergedRefs,
+  useLayoutEffect,
+} from '../../utils/index.js';
 import { TreeContext } from './TreeContext.js';
-export const Tree = (props)=>{
-    let { data, className, nodeRenderer, getNode, size = 'default', enableVirtualization = false, style, ...rest } = props;
-    let treeRef = React.useRef(null);
-    let focusedIndex = React.useRef(0);
-    React.useEffect(()=>{
-        focusedIndex.current = 0;
-    }, [
-        data
-    ]);
-    let getFocusableNodes = React.useCallback(()=>{
-        let focusableItems = getFocusableElements(treeRef.current);
-        return focusableItems.filter((i)=>!focusableItems.some((p)=>p.contains(i.parentElement)));
-    }, []);
-    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));
-        let currentIndex = activeIndex > -1 ? activeIndex : 0;
-        switch(event.key){
-            case 'ArrowUp':
-                {
-                    event.preventDefault();
-                    let newIndex = Math.max(0, currentIndex - 1);
-                    items[newIndex].focus();
-                    focusedIndex.current = newIndex;
-                    break;
-                }
-            case 'ArrowDown':
-                {
-                    event.preventDefault();
-                    let newIndex = Math.min(items.length - 1, currentIndex + 1);
-                    items[newIndex].focus();
-                    focusedIndex.current = newIndex;
-                    break;
-                }
-            default:
-                break;
+export const Tree = (props) => {
+  let {
+    data,
+    className,
+    nodeRenderer,
+    getNode,
+    size = 'default',
+    enableVirtualization = false,
+    style,
+    ...rest
+  } = props;
+  let treeRef = React.useRef(null);
+  let focusedIndex = React.useRef(0);
+  React.useEffect(() => {
+    focusedIndex.current = 0;
+  }, [data]);
+  let getFocusableNodes = React.useCallback(() => {
+    let focusableItems = getFocusableElements(treeRef.current);
+    return focusableItems.filter(
+      (i) => !focusableItems.some((p) => p.contains(i.parentElement)),
+    );
+  }, []);
+  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),
+    );
+    let currentIndex = activeIndex > -1 ? activeIndex : 0;
+    switch (event.key) {
+      case 'ArrowUp': {
+        event.preventDefault();
+        let newIndex = Math.max(0, currentIndex - 1);
+        items[newIndex].focus();
+        focusedIndex.current = newIndex;
+        break;
+      }
+      case 'ArrowDown': {
+        event.preventDefault();
+        let newIndex = Math.min(items.length - 1, currentIndex + 1);
+        items[newIndex].focus();
+        focusedIndex.current = newIndex;
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  let [flatNodesList, firstLevelNodesList] = React.useMemo(() => {
+    let flatList = [];
+    let firstLevelNodes = [];
+    let flattenNodes = (nodes = [], depth = 0, parentNode) => {
+      let nodeIdList = Array();
+      nodes.forEach((element, index) => {
+        let { subNodes, ...nodeProps } = getNode(element);
+        let flatNode = {
+          nodeProps,
+          depth,
+          parentNode,
+          indexInGroup: index,
+        };
+        nodeIdList.push(flatNode.nodeProps.nodeId);
+        flatList.push(flatNode);
+        if (0 === depth) firstLevelNodes.push(flatNode);
+        if (flatNode.nodeProps.isExpanded) {
+          let subNodeIds = flattenNodes(subNodes, depth + 1, flatNode);
+          flatNode.subNodeIds = subNodeIds;
         }
+      });
+      return nodeIdList;
     };
-    let [flatNodesList, firstLevelNodesList] = React.useMemo(()=>{
-        let flatList = [];
-        let firstLevelNodes = [];
-        let flattenNodes = (nodes = [], depth = 0, parentNode)=>{
-            let nodeIdList = Array();
-            nodes.forEach((element, index)=>{
-                let { subNodes, ...nodeProps } = getNode(element);
-                let flatNode = {
-                    nodeProps,
-                    depth,
-                    parentNode,
-                    indexInGroup: index
-                };
-                nodeIdList.push(flatNode.nodeProps.nodeId);
-                flatList.push(flatNode);
-                if (0 === depth) firstLevelNodes.push(flatNode);
-                if (flatNode.nodeProps.isExpanded) {
-                    let subNodeIds = flattenNodes(subNodes, depth + 1, flatNode);
-                    flatNode.subNodeIds = subNodeIds;
-                }
-            });
-            return nodeIdList;
-        };
-        flattenNodes(data);
-        return [
-            flatList,
-            firstLevelNodes
-        ];
-    }, [
-        data,
-        getNode
-    ]);
-    let itemRenderer = React.useCallback((index, virtualItem, virtualizer)=>{
-        let node = flatNodesList[index];
-        return React.createElement(TreeContext.Provider, {
-            key: node.nodeProps.nodeId,
-            value: {
-                nodeDepth: node.depth,
-                subNodeIds: node.subNodeIds,
-                groupSize: 0 === node.depth ? firstLevelNodesList.length : node.parentNode?.subNodeIds?.length ?? 0,
-                indexInGroup: node.indexInGroup,
-                parentNodeId: node.parentNode?.nodeProps.nodeId,
-                scrollToParent: node.parentNode ? ()=>{
-                    let parentNodeId = node.parentNode?.nodeProps.nodeId;
-                    let parentNodeIndex = flatNodesList.findIndex((n)=>n.nodeProps.nodeId === parentNodeId);
-                    setScrollToIndex(parentNodeIndex);
-                } : void 0,
-                size
-            }
-        }, virtualItem && virtualizer ? cloneElementWithRef(nodeRenderer(node.nodeProps), (children)=>({
-                ...children.props,
-                key: virtualItem.key,
-                'data-iui-index': virtualItem.index,
-                'data-iui-virtualizer': 'item',
-                ref: virtualizer.measureElement,
-                style: {
-                    ...children.props.style,
-                    '--_iui-width': '100%',
-                    transform: `translateY(${virtualItem.start}px)`
+    flattenNodes(data);
+    return [flatList, firstLevelNodes];
+  }, [data, getNode]);
+  let itemRenderer = React.useCallback(
+    (index, virtualItem, virtualizer) => {
+      let node = flatNodesList[index];
+      return React.createElement(
+        TreeContext.Provider,
+        {
+          key: node.nodeProps.nodeId,
+          value: {
+            nodeDepth: node.depth,
+            subNodeIds: node.subNodeIds,
+            groupSize:
+              0 === node.depth
+                ? firstLevelNodesList.length
+                : node.parentNode?.subNodeIds?.length ?? 0,
+            indexInGroup: node.indexInGroup,
+            parentNodeId: node.parentNode?.nodeProps.nodeId,
+            scrollToParent: node.parentNode
+              ? () => {
+                  let parentNodeId = node.parentNode?.nodeProps.nodeId;
+                  let parentNodeIndex = flatNodesList.findIndex(
+                    (n) => n.nodeProps.nodeId === parentNodeId,
+                  );
+                  setScrollToIndex(parentNodeIndex);
                 }
-            })) : nodeRenderer(node.nodeProps));
-    }, [
-        firstLevelNodesList.length,
-        flatNodesList,
-        nodeRenderer,
-        size
-    ]);
-    let [scrollToIndex, setScrollToIndex] = React.useState();
-    let flatNodesListRef = React.useRef(flatNodesList);
-    React.useEffect(()=>{
-        flatNodesListRef.current = flatNodesList;
-    }, [
-        flatNodesList
-    ]);
-    React.useEffect(()=>{
-        setTimeout(()=>{
-            if (void 0 !== scrollToIndex) {
-                let nodeId = flatNodesListRef.current[scrollToIndex].nodeProps.nodeId;
-                let nodeElement = treeRef.current?.ownerDocument.querySelector(`#${nodeId}`);
-                nodeElement?.focus();
-                setScrollToIndex(void 0);
-            }
-        });
-    }, [
-        scrollToIndex
-    ]);
-    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, null, enableVirtualization ? React.createElement(VirtualizedTree, {
-        flatNodesList: flatNodesList,
-        itemRenderer: itemRenderer,
-        scrollToIndex: scrollToIndex,
-        onFocus: handleFocus,
-        onKeyDown: handleKeyDown,
-        ref: treeRef,
-        className: className,
-        style: style,
-        ...rest
-    }) : React.createElement(TreeElement, {
-        onKeyDown: handleKeyDown,
-        onFocus: handleFocus,
-        className: className,
-        "data-iui-size": 'small' === size ? 'small' : void 0,
-        style: style,
-        ref: treeRef,
-        ...rest
-    }, flatNodesList.map((_, i)=>itemRenderer(i))));
+              : void 0,
+            size,
+          },
+        },
+        virtualItem && virtualizer
+          ? cloneElementWithRef(nodeRenderer(node.nodeProps), (children) => ({
+              ...children.props,
+              key: virtualItem.key,
+              'data-iui-index': virtualItem.index,
+              'data-iui-virtualizer': 'item',
+              ref: virtualizer.measureElement,
+              style: {
+                ...children.props.style,
+                '--_iui-width': '100%',
+                transform: `translateY(${virtualItem.start}px)`,
+              },
+            }))
+          : nodeRenderer(node.nodeProps),
+      );
+    },
+    [firstLevelNodesList.length, flatNodesList, nodeRenderer, size],
+  );
+  let [scrollToIndex, setScrollToIndex] = React.useState();
+  let flatNodesListRef = React.useRef(flatNodesList);
+  React.useEffect(() => {
+    flatNodesListRef.current = flatNodesList;
+  }, [flatNodesList]);
+  React.useEffect(() => {
+    setTimeout(() => {
+      if (void 0 !== scrollToIndex) {
+        let nodeId = flatNodesListRef.current[scrollToIndex].nodeProps.nodeId;
+        let nodeElement = treeRef.current?.ownerDocument.querySelector(
+          `#${nodeId}`,
+        );
+        nodeElement?.focus();
+        setScrollToIndex(void 0);
+      }
+    });
+  }, [scrollToIndex]);
+  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,
+    null,
+    enableVirtualization
+      ? React.createElement(VirtualizedTree, {
+          flatNodesList: flatNodesList,
+          itemRenderer: itemRenderer,
+          scrollToIndex: scrollToIndex,
+          onFocus: handleFocus,
+          onKeyDown: handleKeyDown,
+          ref: treeRef,
+          className: className,
+          style: style,
+          ...rest,
+        })
+      : React.createElement(
+          TreeElement,
+          {
+            onKeyDown: handleKeyDown,
+            onFocus: handleFocus,
+            className: className,
+            'data-iui-size': 'small' === size ? 'small' : void 0,
+            style: style,
+            ref: treeRef,
+            ...rest,
+          },
+          flatNodesList.map((_, i) => itemRenderer(i)),
+        ),
+  );
 };
 Tree.displayName = 'Tree';
 let TreeElement = polymorphic.div('iui-tree', {
-    role: 'tree',
-    tabIndex: 0
+  role: 'tree',
+  tabIndex: 0,
 });
-let VirtualizedTree = React.forwardRef(({ flatNodesList, itemRenderer, scrollToIndex, ...rest }, ref)=>{
+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 getItemKey = React.useCallback(
+      (index) => flatNodesList[index].nodeProps.nodeId,
+      [flatNodesList],
+    );
     let { virtualizer, css: virtualizerCss } = useVirtualScroll({
-        count: flatNodesList.length,
-        getScrollElement: ()=>parentRef.current,
-        estimateSize: ()=>39,
-        getItemKey
+      count: flatNodesList.length,
+      getScrollElement: () => parentRef.current,
+      estimateSize: () => 39,
+      getItemKey,
     });
-    useLayoutEffect(()=>{
-        if (scrollToIndex) virtualizer.scrollToIndex(scrollToIndex);
-    }, [
-        virtualizer,
-        scrollToIndex
-    ]);
-    return React.createElement(TreeElement, {
+    useLayoutEffect(() => {
+      if (scrollToIndex) virtualizer.scrollToIndex(scrollToIndex);
+    }, [virtualizer, scrollToIndex]);
+    return React.createElement(
+      TreeElement,
+      {
         ...rest,
-        ref: useMergedRefs(ref, parentRef)
-    }, React.createElement(ShadowRoot, {
-        css: virtualizerCss
-    }, React.createElement("div", {
-        "data-iui-virtualizer": "root",
-        style: {
-            minBlockSize: virtualizer.getTotalSize()
-        }
-    }, React.createElement("slot", null))), React.createElement(React.Fragment, null, virtualizer.getVirtualItems().map((virtualItem)=>itemRenderer(virtualItem.index, virtualItem, virtualizer))));
-});
+        ref: useMergedRefs(ref, parentRef),
+      },
+      React.createElement(
+        ShadowRoot,
+        {
+          css: virtualizerCss,
+        },
+        React.createElement(
+          'div',
+          {
+            'data-iui-virtualizer': 'root',
+            style: {
+              minBlockSize: virtualizer.getTotalSize(),
+            },
+          },
+          React.createElement('slot', null),
+        ),
+      ),
+      React.createElement(
+        React.Fragment,
+        null,
+        virtualizer
+          .getVirtualItems()
+          .map((virtualItem) =>
+            itemRenderer(virtualItem.index, virtualItem, virtualizer),
+          ),
+      ),
+    );
+  },
+);

package/DEV-esm/core/Tree/TreeContext.js

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