@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.10

package/esm/core/Tree/Tree.js

@@ -3,7 +3,13 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { getFocusableElements, useVirtualization, mergeRefs, Box, polymorphic, } from '../utils/index.js';
+import {
+  getFocusableElements,
+  useVirtualization,
+  mergeRefs,
+  Box,
+  polymorphic,
+} from '../utils/index.js';
 import cx from 'classnames';
 import { TreeContext } from './TreeContext.js';
 /**
@@ -57,142 +63,204 @@ import { TreeContext } from './TreeContext.js';
   />
  */
 export const Tree = (props) => {
-    const { data, className, nodeRenderer, getNode, enableVirtualization = false, style, ...rest } = props;
-    const treeRef = React.useRef(null);
-    const focusedIndex = React.useRef(0);
-    React.useEffect(() => {
-        focusedIndex.current = 0;
-    }, [data]);
-    const getFocusableNodes = React.useCallback(() => {
-        const focusableItems = getFocusableElements(treeRef.current);
-        // Filter out focusable elements that are inside each node, e.g. checkbox
-        return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
-    }, []);
-    const handleKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        const items = getFocusableNodes();
-        if (!(items === null || items === void 0 ? void 0 : items.length)) {
-            return;
-        }
-        const activeIndex = items.findIndex((el) => { var _a; return el.contains((_a = treeRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement); });
-        const currentIndex = activeIndex > -1 ? activeIndex : 0;
-        switch (event.key) {
-            case 'ArrowUp': {
-                event.preventDefault();
-                const 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);
-                items[newIndex].focus();
-                focusedIndex.current = newIndex;
-                break;
-            }
-            default:
-                break;
-        }
-    };
-    const [flatNodesList, firstLevelNodesList] = React.useMemo(() => {
-        const flatList = [];
-        const firstLevelNodes = [];
-        const flattenNodes = (nodes = [], depth = 0, parentNode) => {
-            const nodeIdList = Array();
-            nodes.forEach((element, index) => {
-                const { subNodes, ...nodeProps } = getNode(element);
-                const flatNode = {
-                    nodeProps,
-                    depth,
-                    parentNode,
-                    indexInGroup: index,
-                };
-                nodeIdList.push(flatNode.nodeProps.nodeId);
-                flatList.push(flatNode);
-                if (depth === 0) {
-                    firstLevelNodes.push(flatNode);
-                }
-                if (flatNode.nodeProps.isExpanded) {
-                    const subNodeIds = flattenNodes(subNodes, depth + 1, flatNode);
-                    flatNode.subNodeIds = subNodeIds;
-                }
-            });
-            return nodeIdList;
+  const {
+    data,
+    className,
+    nodeRenderer,
+    getNode,
+    enableVirtualization = false,
+    style,
+    ...rest
+  } = props;
+  const treeRef = React.useRef(null);
+  const focusedIndex = React.useRef(0);
+  React.useEffect(() => {
+    focusedIndex.current = 0;
+  }, [data]);
+  const getFocusableNodes = React.useCallback(() => {
+    const focusableItems = getFocusableElements(treeRef.current);
+    // Filter out focusable elements that are inside each node, e.g. checkbox
+    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) =>
+      el.contains(treeRef.current?.ownerDocument.activeElement),
+    );
+    const currentIndex = activeIndex > -1 ? activeIndex : 0;
+    switch (event.key) {
+      case 'ArrowUp': {
+        event.preventDefault();
+        const 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);
+        items[newIndex].focus();
+        focusedIndex.current = newIndex;
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  const [flatNodesList, firstLevelNodesList] = React.useMemo(() => {
+    const flatList = [];
+    const firstLevelNodes = [];
+    const flattenNodes = (nodes = [], depth = 0, parentNode) => {
+      const nodeIdList = Array();
+      nodes.forEach((element, index) => {
+        const { subNodes, ...nodeProps } = getNode(element);
+        const flatNode = {
+          nodeProps,
+          depth,
+          parentNode,
+          indexInGroup: index,
         };
-        flattenNodes(data);
-        return [flatList, firstLevelNodes];
-    }, [data, getNode]);
-    const itemRenderer = React.useCallback((index) => {
-        var _a, _b, _c, _d;
-        const 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 = 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
-                    ? () => {
-                        var _a;
-                        const parentNodeId = (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.nodeProps.nodeId;
-                        const parentNodeIndex = flatNodesList.findIndex((n) => n.nodeProps.nodeId === parentNodeId);
-                        setScrollToIndex(parentNodeIndex);
-                    }
-                    : undefined,
-            } }, nodeRenderer(node.nodeProps)));
-    }, [firstLevelNodesList.length, flatNodesList, nodeRenderer]);
-    const [scrollToIndex, setScrollToIndex] = React.useState();
-    const flatNodesListRef = React.useRef(flatNodesList);
-    React.useEffect(() => {
-        flatNodesListRef.current = flatNodesList;
-    }, [flatNodesList]);
-    React.useEffect(() => {
-        setTimeout(() => {
-            var _a;
-            if (scrollToIndex !== undefined) {
-                const nodeId = flatNodesListRef.current[scrollToIndex].nodeProps.nodeId;
-                const nodeElement = (_a = treeRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.querySelector(`#${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]);
-    const handleFocus = (event) => {
-        var _a, _b;
-        if ((_a = treeRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) {
-            return;
+        nodeIdList.push(flatNode.nodeProps.nodeId);
+        flatList.push(flatNode);
+        if (depth === 0) {
+          firstLevelNodes.push(flatNode);
         }
-        const items = getFocusableNodes();
-        if (items.length > 0) {
-            (_b = items[focusedIndex.current]) === null || _b === void 0 ? void 0 : _b.focus();
+        if (flatNode.nodeProps.isExpanded) {
+          const subNodeIds = flattenNodes(subNodes, depth + 1, flatNode);
+          flatNode.subNodeIds = subNodeIds;
         }
+      });
+      return nodeIdList;
     };
-    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, style: style, ref: treeRef, ...rest }, flatNodesList.map((_, i) => itemRenderer(i))))));
+    flattenNodes(data);
+    return [flatList, firstLevelNodes];
+  }, [data, getNode]);
+  const itemRenderer = React.useCallback(
+    (index) => {
+      const 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
+                : 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(
+                    (n) => n.nodeProps.nodeId === parentNodeId,
+                  );
+                  setScrollToIndex(parentNodeIndex);
+                }
+              : undefined,
+          },
+        },
+        nodeRenderer(node.nodeProps),
+      );
+    },
+    [firstLevelNodesList.length, flatNodesList, nodeRenderer],
+  );
+  const [scrollToIndex, setScrollToIndex] = React.useState();
+  const 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(
+          `#${nodeId}`,
+        );
+        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]);
+  const handleFocus = (event) => {
+    if (treeRef.current?.contains(event.relatedTarget)) {
+      return;
+    }
+    const 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,
+            style: style,
+            ref: treeRef,
+            ...rest,
+          },
+          flatNodesList.map((_, i) => itemRenderer(i)),
+        ),
+  );
 };
 const TreeElement = polymorphic.ul('iui-tree', {
-    role: 'tree',
-    tabIndex: 0,
+  role: 'tree',
+  tabIndex: 0,
 });
 // Having virtualized tree separately prevents from running all virtualization logic
-const VirtualizedTree = React.forwardRef(({ flatNodesList, itemRenderer, scrollToIndex, className, style, ...rest }, ref) => {
+const VirtualizedTree = React.forwardRef(
+  (
+    { flatNodesList, itemRenderer, scrollToIndex, className, style, ...rest },
+    ref,
+  ) => {
     const { outerProps, innerProps, visibleChildren } = useVirtualization({
-        itemsLength: flatNodesList.length,
-        itemRenderer: itemRenderer,
-        scrollToIndex,
+      itemsLength: flatNodesList.length,
+      itemRenderer: itemRenderer,
+      scrollToIndex,
     });
-    return (React.createElement(Box, { ...{
-            ...outerProps,
-            className: cx(className, outerProps.className),
-            style: { ...style, ...outerProps.style },
-        } },
-        React.createElement(TreeElement, { ...innerProps, ...rest, ref: mergeRefs(ref, innerProps.ref) }, visibleChildren)));
-});
+    return React.createElement(
+      Box,
+      {
+        ...outerProps,
+        className: cx(className, outerProps.className),
+        style: { ...style, ...outerProps.style },
+      },
+      React.createElement(
+        TreeElement,
+        { ...innerProps, ...rest, ref: mergeRefs(ref, innerProps.ref) },
+        visibleChildren,
+      ),
+    );
+  },
+);
 export default Tree;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type TreeContextProps = {
+export type TreeContextProps = {
     /**
      * Depth of the node.
      */

package/esm/core/Tree/TreeContext.js

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-declare type TreeNodeProps = {
+type TreeNodeProps = {
     /**
      * Unique id of the node.
      * It has to be compatible with HTML id attribute.
@@ -82,5 +82,5 @@ declare type TreeNodeProps = {
     icon={<SvgPlaceholder />}
   />
  */
-export declare const TreeNode: (props: TreeNodeProps) => JSX.Element;
+export declare const TreeNode: (props: TreeNodeProps) => React.JSX.Element;
 export default TreeNode;