@itwin/itwinui-react 3.0.3 → 3.0.5

package/esm/core/Tree/Tree.js

@@ -3,13 +3,7 @@
  * 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';
 /**
@@ -63,204 +57,136 @@ 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?.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 = 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.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.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,
+    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,
-      ),
-    );
-  },
-);
+        style: { ...style, ...outerProps.style } },
+        React.createElement(TreeElement, { ...innerProps, ...rest, ref: mergeRefs(ref, innerProps.ref) }, visibleChildren)));
+});
 export default Tree;

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.js

@@ -27,202 +27,103 @@ import { useTreeContext } from './TreeContext.js';
   />
  */
 export const TreeNode = (props) => {
-  const {
-    nodeId,
-    label,
-    sublabel,
-    children,
-    className,
-    icon,
-    hasSubNodes = false,
-    isDisabled = false,
-    isExpanded = false,
-    isSelected = false,
-    onSelected,
-    onExpanded,
-    checkbox,
-    expander,
-    ...rest
-  } = props;
-  const {
-    nodeDepth,
-    subNodeIds = [],
-    parentNodeId,
-    scrollToParent,
-    groupSize,
-    indexInGroup,
-  } = useTreeContext();
-  const [isFocused, setIsFocused] = React.useState(false);
-  const nodeRef = React.useRef(null);
-  const onKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    const isNodeFocused =
-      nodeRef.current === nodeRef.current?.ownerDocument.activeElement;
-    switch (event.key) {
-      case 'ArrowLeft': {
-        event.preventDefault();
-        if (isNodeFocused) {
-          if (isExpanded) {
-            onExpanded(nodeId, false);
-            break;
-          }
-          if (parentNodeId) {
-            scrollToParent?.();
-            break;
-          }
-          // If it is top level node (doesn't have parent node), then do nothing.
-          break;
-        }
-        const focusableElements = getFocusableElements(nodeRef.current);
-        const currentIndex = focusableElements.indexOf(
-          nodeRef.current?.ownerDocument.activeElement,
-        );
-        if (currentIndex === 0) {
-          nodeRef.current?.focus();
-        } else {
-          focusableElements[currentIndex - 1]?.focus();
-        }
-        break;
-      }
-      case 'ArrowRight': {
-        event.preventDefault();
-        const focusableElements = getFocusableElements(nodeRef.current);
-        if (isNodeFocused) {
-          if (!isExpanded && hasSubNodes) {
-            onExpanded(nodeId, true);
-            break;
-          }
-          focusableElements[0]?.focus();
-          break;
+    const { nodeId, label, sublabel, children, className, icon, hasSubNodes = false, isDisabled = false, isExpanded = false, isSelected = false, onSelected, onExpanded, checkbox, expander, ...rest } = props;
+    const { nodeDepth, subNodeIds = [], parentNodeId, scrollToParent, groupSize, indexInGroup, } = useTreeContext();
+    const [isFocused, setIsFocused] = React.useState(false);
+    const nodeRef = React.useRef(null);
+    const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
         }
-        const currentIndex = focusableElements.indexOf(
-          nodeRef.current?.ownerDocument.activeElement,
-        );
-        if (currentIndex < focusableElements.length - 1) {
-          focusableElements[currentIndex + 1].focus();
-          break;
+        const isNodeFocused = nodeRef.current === nodeRef.current?.ownerDocument.activeElement;
+        switch (event.key) {
+            case 'ArrowLeft': {
+                event.preventDefault();
+                if (isNodeFocused) {
+                    if (isExpanded) {
+                        onExpanded(nodeId, false);
+                        break;
+                    }
+                    if (parentNodeId) {
+                        scrollToParent?.();
+                        break;
+                    }
+                    // If it is top level node (doesn't have parent node), then do nothing.
+                    break;
+                }
+                const focusableElements = getFocusableElements(nodeRef.current);
+                const currentIndex = focusableElements.indexOf(nodeRef.current?.ownerDocument.activeElement);
+                if (currentIndex === 0) {
+                    nodeRef.current?.focus();
+                }
+                else {
+                    focusableElements[currentIndex - 1]?.focus();
+                }
+                break;
+            }
+            case 'ArrowRight': {
+                event.preventDefault();
+                const focusableElements = getFocusableElements(nodeRef.current);
+                if (isNodeFocused) {
+                    if (!isExpanded && hasSubNodes) {
+                        onExpanded(nodeId, true);
+                        break;
+                    }
+                    focusableElements[0]?.focus();
+                    break;
+                }
+                const currentIndex = focusableElements.indexOf(nodeRef.current?.ownerDocument.activeElement);
+                if (currentIndex < focusableElements.length - 1) {
+                    focusableElements[currentIndex + 1].focus();
+                    break;
+                }
+                break;
+            }
+            case ' ':
+            case 'Spacebar':
+            case 'Enter': {
+                // Ignore if it is called on the element inside, e.g. checkbox or expander
+                if (event.target !== nodeRef.current) {
+                    break;
+                }
+                event.preventDefault();
+                if (!isDisabled) {
+                    onSelected?.(nodeId, !isSelected);
+                }
+                break;
+            }
+            default:
+                break;
         }
-        break;
-      }
-      case ' ':
-      case 'Spacebar':
-      case 'Enter': {
-        // Ignore if it is called on the element inside, e.g. checkbox or expander
-        if (event.target !== nodeRef.current) {
-          break;
-        }
-        event.preventDefault();
-        if (!isDisabled) {
-          onSelected?.(nodeId, !isSelected);
-        }
-        break;
-      }
-      default:
-        break;
-    }
-  };
-  const onExpanderClick = React.useCallback(
-    (event) => {
-      onExpanded(nodeId, !isExpanded);
-      event.stopPropagation();
-    },
-    [isExpanded, nodeId, onExpanded],
-  );
-  return React.createElement(
-    Box,
-    {
-      as: 'li',
-      role: 'treeitem',
-      className: cx('iui-tree-item', className),
-      id: nodeId,
-      'aria-expanded': hasSubNodes ? isExpanded : undefined,
-      'aria-disabled': isDisabled,
-      'aria-selected': isSelected,
-      'aria-level': nodeDepth + 1,
-      'aria-setsize': groupSize,
-      'aria-posinset': indexInGroup + 1,
-      tabIndex: -1,
-      onFocus: (e) => {
-        setIsFocused(true);
-        // Prevents from triggering onFocus on parent Tree
-        e.stopPropagation();
-      },
-      onBlur: () => {
-        setIsFocused(false);
-      },
-      ref: nodeRef,
-      onKeyDown: onKeyDown,
-      ...rest,
-    },
-    React.createElement(
-      Box,
-      {
-        className: cx('iui-tree-node', {
-          'iui-active': isSelected,
-          'iui-disabled': isDisabled,
-        }),
-        style: { '--level': nodeDepth },
-        onClick: () => !isDisabled && onSelected?.(nodeId, !isSelected),
-      },
-      checkbox &&
-        React.createElement(
-          Box,
-          { className: 'iui-tree-node-checkbox' },
-          React.isValidElement(checkbox)
-            ? React.cloneElement(checkbox, {
-                tabIndex: isFocused ? 0 : -1,
-              })
-            : checkbox,
-        ),
-      React.createElement(
-        Box,
-        { className: 'iui-tree-node-content' },
-        hasSubNodes && expander,
-        hasSubNodes &&
-          !expander &&
-          React.createElement(TreeNodeExpander, {
-            isExpanded: isExpanded,
-            disabled: isDisabled,
-            onClick: onExpanderClick,
-            tabIndex: isFocused ? 0 : -1,
-          }),
-        icon &&
-          React.createElement(
-            Box,
-            {
-              as: 'span',
-              className: 'iui-tree-node-content-icon',
-              'aria-hidden': true,
-            },
-            icon,
-          ),
-        React.createElement(
-          Box,
-          { className: 'iui-tree-node-content-label' },
-          React.createElement(
-            Box,
-            { className: 'iui-tree-node-content-title' },
-            label,
-          ),
-          sublabel &&
-            React.createElement(
-              Box,
-              { className: 'iui-tree-node-content-caption' },
-              sublabel,
-            ),
-        ),
-        children,
-      ),
-    ),
-    hasSubNodes &&
-      React.createElement(Box, {
-        as: 'ul',
-        className: 'iui-sub-tree',
-        role: 'group',
-        'aria-owns': subNodeIds.join(' '),
-      }),
-  );
+    };
+    const onExpanderClick = React.useCallback((event) => {
+        onExpanded(nodeId, !isExpanded);
+        event.stopPropagation();
+    }, [isExpanded, nodeId, onExpanded]);
+    return (React.createElement(Box, { as: 'li', role: 'treeitem', className: cx('iui-tree-item', className), id: nodeId, "aria-expanded": hasSubNodes ? isExpanded : undefined, "aria-disabled": isDisabled, "aria-selected": isSelected, "aria-level": nodeDepth + 1, "aria-setsize": groupSize, "aria-posinset": indexInGroup + 1, tabIndex: -1, onFocus: (e) => {
+            setIsFocused(true);
+            // Prevents from triggering onFocus on parent Tree
+            e.stopPropagation();
+        }, onBlur: () => {
+            setIsFocused(false);
+        }, ref: nodeRef, onKeyDown: onKeyDown, ...rest },
+        React.createElement(Box, { className: cx('iui-tree-node', {
+                'iui-active': isSelected,
+                'iui-disabled': isDisabled,
+            }), style: { '--level': nodeDepth }, onClick: () => !isDisabled && onSelected?.(nodeId, !isSelected) },
+            checkbox && (React.createElement(Box, { className: 'iui-tree-node-checkbox' }, React.isValidElement(checkbox)
+                ? React.cloneElement(checkbox, {
+                    tabIndex: isFocused ? 0 : -1,
+                })
+                : checkbox)),
+            React.createElement(Box, { className: 'iui-tree-node-content' },
+                hasSubNodes && expander,
+                hasSubNodes && !expander && (React.createElement(TreeNodeExpander, { isExpanded: isExpanded, disabled: isDisabled, onClick: onExpanderClick, tabIndex: isFocused ? 0 : -1 })),
+                icon && (React.createElement(Box, { as: 'span', className: 'iui-tree-node-content-icon', "aria-hidden": true }, icon)),
+                React.createElement(Box, { className: 'iui-tree-node-content-label' },
+                    React.createElement(Box, { className: 'iui-tree-node-content-title' }, label),
+                    sublabel && (React.createElement(Box, { className: 'iui-tree-node-content-caption' }, sublabel))),
+                children)),
+        hasSubNodes && (React.createElement(Box, { as: 'ul', className: 'iui-sub-tree', role: 'group', "aria-owns": subNodeIds.join(' ') }))));
 };
 export default TreeNode;