@itwin/itwinui-react 3.0.4 → 3.0.5

package/cjs/core/Tree/Tree.js

@@ -1,15 +1,15 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tree = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const TreeContext_js_1 = require('./TreeContext.js');
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const classnames_1 = tslib_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.
@@ -61,212 +61,137 @@ const TreeContext_js_1 = require('./TreeContext.js');
   />
  */
 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 = (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);
+    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 = (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;
         }
-        if (flatNode.nodeProps.isExpanded) {
-          const subNodeIds = flattenNodes(subNodes, depth + 1, flatNode);
-          flatNode.subNodeIds = subNodeIds;
+        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;
         }
-      });
-      return nodeIdList;
     };
-    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);
+    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);
                 }
-              : 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)),
-        ),
-  );
+                if (flatNode.nodeProps.isExpanded) {
+                    const subNodeIds = flattenNodes(subNodes, depth + 1, flatNode);
+                    flatNode.subNodeIds = subNodeIds;
+                }
+            });
+            return nodeIdList;
+        };
+        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,
+            } }, 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))))));
 };
 exports.Tree = Tree;
 const TreeElement = index_js_1.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 { 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_js_1.useVirtualization)({
+        itemsLength: flatNodesList.length,
+        itemRenderer: itemRenderer,
+        scrollToIndex,
     });
-    return React.createElement(
-      index_js_1.Box,
-      {
-        ...outerProps,
+    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,
-      ),
-    );
-  },
-);
+        style: { ...style, ...outerProps.style } },
+        React.createElement(TreeElement, { ...innerProps, ...rest, ref: (0, index_js_1.mergeRefs)(ref, innerProps.ref) }, visibleChildren)));
+});
 exports.default = exports.Tree;

package/cjs/core/Tree/TreeContext.js

@@ -1,18 +1,18 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTreeContext = exports.TreeContext = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
+const React = tslib_1.__importStar(require("react"));
 exports.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(exports.TreeContext);
+    if (context == undefined) {
+        throw new Error('TreeContext must be used within a TreeContext.Provider');
+    }
+    return context;
 };
 exports.useTreeContext = useTreeContext;