@itwin/itwinui-react 3.11.2 → 3.12.0

package/cjs/core/Tree/Tree.js

@@ -1,222 +1,213 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tree = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const index_js_1 = require("../../utils/index.js");
-const classnames_1 = __importDefault(require("classnames"));
-const TreeContext_js_1 = require("./TreeContext.js");
-/**
- * Tree component used to display a hierarchical structure of `TreeNodes`.
- * User should control state of expanded, selected and disabled nodes using `getNode` prop.
- * @example
-  type DemoData = {
-    id: string;
-    label: string;
-    subItems: DemoData[];
-  };
-
-  const data: Array<DemoData> = [
-    {
-      id: 'Node-1',
-      label: 'Facility 1',
-      subItems: [{ id: 'Node-1-1', label: 'Unit 1', subItems: [] }],
-    },
-    {
-      id: 'Node-2',
-      label: 'Facility 2',
-      subItems: [{ id: 'Node-2-1', label: 'Unit 2', subItems: [] }],
-    },
-  ];
-
-  const [expandedNodes, setExpandedNodes] = React.useState<Record<string, boolean>>({});
-  const onNodeExpanded = React.useCallback((nodeId: string, isExpanded: boolean) => {
-    setExpandedNodes((oldExpanded) => ({ ...oldExpanded, [nodeId]: isExpanded }));
-  }, []);
-
-  const getNode = React.useCallback((node: DemoData): NodeData<DemoData> => {
-    return {
-      subNodes: node.subItems,
-      nodeId: node.id,
-      node,
-      isExpanded: expandedNodes[node.id],
-      hasSubNodes: node.subItems.length > 0,
-    };
-  }, [expandedNodes]);
-
-  <Tree<DemoData>
-    data={data}
-    getNode={getNode}
-    nodeRenderer={React.useCallback(({ node, ...rest }) => (
-      <TreeNode
-        label={node.label}
-        onNodeExpanded={onNodeExpanded}
-        {...rest}
-      />
-    ), [onNodeExpanded])}
-  />
- */
+Object.defineProperty(exports, 'Tree', {
+  enumerable: true,
+  get: function () {
+    return Tree;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../utils/index.js');
+const _classnames = _interop_require_default._(require('classnames'));
+const _TreeContext = require('./TreeContext.js');
 const Tree = (props) => {
-    const { data, className, nodeRenderer, getNode, size = 'default', 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 = (0, index_js_1.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,
-                };
-                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,
+    size = 'default',
+    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 = (0, _index.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) =>
+      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) => {
-        const node = flatNodesList[index];
-        return (React.createElement(TreeContext_js_1.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,
-                size,
-            } }, nodeRenderer(node.nodeProps)));
-    }, [firstLevelNodesList.length, flatNodesList, nodeRenderer, size]);
-    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;
+        nodeIdList.push(flatNode.nodeProps.nodeId);
+        flatList.push(flatNode);
+        if (depth === 0) {
+          firstLevelNodes.push(flatNode);
         }
-        const items = getFocusableNodes();
-        if (items.length > 0) {
-            items[focusedIndex.current]?.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, "data-iui-size": size === 'small' ? 'small' : undefined, 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 (0, _jsxruntime.jsx)(
+        _TreeContext.TreeContext.Provider,
+        {
+          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,
+            size,
+          },
+          children: nodeRenderer(node.nodeProps),
+        },
+        node.nodeProps.nodeId,
+      );
+    },
+    [firstLevelNodesList.length, flatNodesList, nodeRenderer, size],
+  );
+  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();
+        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 (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+    children: enableVirtualization
+      ? (0, _jsxruntime.jsx)(VirtualizedTree, {
+          flatNodesList: flatNodesList,
+          itemRenderer: itemRenderer,
+          scrollToIndex: scrollToIndex,
+          onFocus: handleFocus,
+          onKeyDown: handleKeyDown,
+          ref: treeRef,
+          className: className,
+          style: style,
+          ...rest,
+        })
+      : (0, _jsxruntime.jsx)(TreeElement, {
+          onKeyDown: handleKeyDown,
+          onFocus: handleFocus,
+          className: className,
+          'data-iui-size': size === 'small' ? 'small' : undefined,
+          style: style,
+          ref: treeRef,
+          ...rest,
+          children: flatNodesList.map((_, i) => itemRenderer(i)),
+        }),
+  });
 };
-exports.Tree = Tree;
-const TreeElement = index_js_1.polymorphic.ul('iui-tree', {
-    role: 'tree',
-    tabIndex: 0,
+const TreeElement = _index.polymorphic.ul('iui-tree', {
+  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 { outerProps, innerProps, visibleChildren } = (0, index_js_1.useVirtualization)({
-        itemsLength: flatNodesList.length,
-        itemRenderer: itemRenderer,
-        scrollToIndex,
+const VirtualizedTree = _react.forwardRef(
+  (
+    { flatNodesList, itemRenderer, scrollToIndex, className, style, ...rest },
+    ref,
+  ) => {
+    const { outerProps, innerProps, visibleChildren } = (0,
+    _index.useVirtualization)({
+      itemsLength: flatNodesList.length,
+      itemRenderer: itemRenderer,
+      scrollToIndex,
     });
-    return (React.createElement(index_js_1.Box, { ...outerProps,
-        className: (0, classnames_1.default)(className, outerProps.className),
-        style: { ...style, ...outerProps.style } },
-        React.createElement(TreeElement, { ...innerProps, ...rest, ref: (0, index_js_1.mergeRefs)(ref, innerProps.ref) }, visibleChildren)));
-});
+    return (0, _jsxruntime.jsx)(_index.Box, {
+      ...outerProps,
+      className: (0, _classnames.default)(className, outerProps.className),
+      style: {
+        ...style,
+        ...outerProps.style,
+      },
+      children: (0, _jsxruntime.jsx)(TreeElement, {
+        ...innerProps,
+        ...rest,
+        ref: (0, _index.mergeRefs)(ref, innerProps.ref),
+        children: visibleChildren,
+      }),
+    });
+  },
+);

package/cjs/core/Tree/TreeContext.js

@@ -1,40 +1,29 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTreeContext = exports.TreeContext = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-exports.TreeContext = React.createContext(undefined);
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  TreeContext: function () {
+    return TreeContext;
+  },
+  useTreeContext: function () {
+    return useTreeContext;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const TreeContext = _react.createContext(undefined);
 const useTreeContext = () => {
-    const context = React.useContext(exports.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;
 };
-exports.useTreeContext = useTreeContext;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CommonProps } from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { TreeNodeExpander } from './TreeNodeExpander.js';
 type TreeNodeProps = {
     /**
@@ -8,7 +8,10 @@ type TreeNodeProps = {
      */
     nodeId: string;
     /**
-     * Props for treeNode
+     * Props for main node inside the treeitem (excluding the sub-tree).
+     *
+     * If you need to customize the root node instead, pass top-level props
+     * directly to the `TreeNode` component.
      */
     nodeProps?: React.ComponentProps<'div'>;
     /**
@@ -101,7 +104,11 @@ type TreeNodeProps = {
      * Content shown after `TreeNode`.
      */
     children?: React.ReactNode;
-} & Omit<CommonProps, 'id'>;
+    /**
+     * @deprecated Use `nodeId` instead.
+     */
+    id?: never;
+};
 /**
  * `TreeNode` component to display node content within a `Tree`.
  * Must be used inside `Tree` component to correctly set node `depth` and `subNodes`.
@@ -121,5 +128,5 @@ type TreeNodeProps = {
     icon={<SvgPlaceholder />}
   />
  */
-export declare const TreeNode: (props: TreeNodeProps) => React.JSX.Element;
+export declare const TreeNode: PolymorphicForwardRefComponent<"li", TreeNodeProps>;
 export {};