@basic-ui/core 0.0.60 → 0.0.61

package/src/Tree/Tree.tsx

@@ -0,0 +1,1081 @@
+import type {
+  CSSProperties,
+  FocusEvent,
+  KeyboardEvent,
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+} from 'react';
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import {
+  flattenAllItems,
+  parseTreeChildren,
+  shouldRenderLoadingRow,
+  useTreeCollection,
+} from './collection';
+import { TreeItemRenderContext } from './context';
+import type {
+  ParsedTreeItem,
+  ParsedTreeNode,
+  ParsedTreeSection,
+  TreeDisabledBehavior,
+  TreeExpandedKeys,
+  TreeHeaderProps,
+  TreeItemProps,
+  TreeItemRenderContextValue,
+  TreeKey,
+  TreeProps,
+  TreeRenderState,
+  TreeSectionProps,
+  TreeSelection,
+  TreeVisibleRow,
+} from './types';
+import { assignMultipleRefs, wrapEvent } from '../utils';
+
+const TYPEAHEAD_TIMEOUT = 500;
+
+export const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(
+  props,
+  forwardedRef
+) {
+  const {
+    as: Comp = 'div',
+    innerAs,
+    children,
+    selectionMode = 'none',
+    selectionBehavior = 'toggle',
+    selectedKeys: selectedKeysProp,
+    defaultSelectedKeys,
+    onSelectionChange,
+    disallowEmptySelection = false,
+    disabledKeys: disabledKeysProp,
+    disabledBehavior = 'all',
+    expandedKeys: expandedKeysProp,
+    defaultExpandedKeys,
+    onExpandedChange,
+    autoFocus = false,
+    onAction,
+    keyboardNavigationBehavior = 'arrow',
+    escapeKeyBehavior = 'clearSelection',
+    shouldFocusWrap = false,
+    disallowTypeAhead = false,
+    disallowSelectAll = false,
+    direction: directionProp,
+    renderEmptyState,
+    renderLoadingState,
+    renderedRowIndices,
+    onVisibleRowsChange,
+    onFocusedKeyChange,
+    renderRow,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    onMouseDown,
+    id: idProp,
+    tabIndex,
+    ...otherProps
+  } = props;
+
+  const generatedId = useId();
+  const treeId = idProp ?? generatedId;
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const itemRefs = useRef(new Map<TreeKey, HTMLDivElement>());
+  const typeaheadStringRef = useRef('');
+  const typeaheadTimeoutRef = useRef<
+    ReturnType<typeof setTimeout> | undefined
+  >(undefined);
+  const [isFocused, setFocused] = useState(false);
+  const [isFocusVisible, setFocusVisible] = useState(false);
+  const [focusedKey, setFocusedKey] = useState<TreeKey | null>(null);
+  const [pressedKey, setPressedKey] = useState<TreeKey | null>(null);
+  const lastSelectedKeyRef = useRef<TreeKey | null>(null);
+
+  const disabledKeys = useMemo(
+    () => new Set(disabledKeysProp ?? []),
+    [disabledKeysProp]
+  );
+
+  const parsedTree = useMemo(() => parseTreeChildren(children), [children]);
+  const allItems = useMemo(() => flattenAllItems(parsedTree), [parsedTree]);
+  const allItemKeys = useMemo(() => allItems.map((item) => item.key), [allItems]);
+  const expandableKeys = useMemo(
+    () =>
+      allItems
+        .filter((item) => item.hasChildItems || item.childItems.length > 0)
+        .map((item) => item.key),
+    [allItems]
+  );
+
+  const [uncontrolledExpandedKeys, setUncontrolledExpandedKeys] = useState(
+    () => makeKeySet(defaultExpandedKeys, expandableKeys)
+  );
+  const expandedKeys =
+    expandedKeysProp !== undefined
+      ? makeKeySet(expandedKeysProp, expandableKeys)
+      : uncontrolledExpandedKeys;
+
+  const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] = useState(() =>
+    makeKeySet(defaultSelectedKeys, allItemKeys)
+  );
+  const selectedKeys =
+    selectedKeysProp !== undefined
+      ? makeKeySet(selectedKeysProp, allItemKeys)
+      : uncontrolledSelectedKeys;
+
+  const treeCollection = useTreeCollection(children, {
+    expandedKeys,
+    renderLoadingState,
+  });
+  const visibleItems = treeCollection.visibleItems;
+  const visibleRows = treeCollection.visibleRows;
+
+  const focusableItems = useMemo(
+    () =>
+      visibleItems.filter(
+        (item) => !(disabledBehavior === 'all' && isItemDisabled(item, disabledKeys))
+      ),
+    [disabledBehavior, disabledKeys, visibleItems]
+  );
+
+  const direction =
+    directionProp ??
+    (typeof document !== 'undefined' && document.dir === 'rtl' ? 'rtl' : 'ltr');
+  const expandKey = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+  const collapseKey = direction === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+
+  const setExpandedKeys = useCallback(
+    (keys: Set<TreeKey>) => {
+      if (expandedKeysProp === undefined) {
+        setUncontrolledExpandedKeys(keys);
+      }
+      onExpandedChange?.(new Set(keys));
+    },
+    [expandedKeysProp, onExpandedChange]
+  );
+
+  const setSelectedKeys = useCallback(
+    (keys: Set<TreeKey>) => {
+      if (selectedKeysProp === undefined) {
+        setUncontrolledSelectedKeys(keys);
+      }
+      onSelectionChange?.(new Set(keys));
+    },
+    [onSelectionChange, selectedKeysProp]
+  );
+
+  const getItemByKey = useCallback(
+    (key: TreeKey | null) =>
+      key == null ? undefined : allItems.find((item) => item.key === key),
+    [allItems]
+  );
+
+  const canSelectItem = useCallback(
+    (item: ParsedTreeItem) =>
+      selectionMode !== 'none' && !isItemDisabled(item, disabledKeys),
+    [disabledKeys, selectionMode]
+  );
+
+  const focusItem = useCallback(
+    (key: TreeKey | null) => {
+      setFocusedKey(key);
+      if (key == null) {
+        onFocusedKeyChange?.(null, null);
+        return;
+      }
+
+      const rowIndex = visibleRows.findIndex(
+        (row) => row.type === 'item' && row.item.key === key
+      );
+      onFocusedKeyChange?.(key, rowIndex === -1 ? null : rowIndex);
+
+      requestAnimationFrame(() => {
+        itemRefs.current.get(key)?.focus({ preventScroll: true });
+      });
+    },
+    [onFocusedKeyChange, visibleRows]
+  );
+
+  const updateSelection = useCallback(
+    (
+      item: ParsedTreeItem,
+      event?: MouseEvent<any> | KeyboardEvent<any>,
+      options?: { forceToggle?: boolean; range?: boolean }
+    ) => {
+      if (!canSelectItem(item)) {
+        return;
+      }
+
+      let next = new Set(selectedKeys);
+      const isSelected = next.has(item.key);
+
+      if (selectionMode === 'single') {
+        if (isSelected && !disallowEmptySelection) {
+          next.delete(item.key);
+        } else {
+          next = new Set([item.key]);
+        }
+      } else if (selectionMode === 'multiple') {
+        if (
+          options?.range &&
+          lastSelectedKeyRef.current != null &&
+          visibleItems.some((visibleItem) => visibleItem.key === lastSelectedKeyRef.current)
+        ) {
+          next = addRangeToSelection(
+            visibleItems,
+            lastSelectedKeyRef.current,
+            item.key,
+            selectedKeys,
+            (candidate) => canSelectItem(candidate)
+          );
+        } else if (
+          options?.forceToggle ||
+          selectionBehavior === 'toggle' ||
+          event?.ctrlKey ||
+          event?.metaKey
+        ) {
+          if (isSelected) {
+            if (!disallowEmptySelection || next.size > 1) {
+              next.delete(item.key);
+            }
+          } else {
+            next.add(item.key);
+          }
+        } else {
+          next = new Set([item.key]);
+        }
+      }
+
+      lastSelectedKeyRef.current = item.key;
+      setSelectedKeys(next);
+    },
+    [
+      canSelectItem,
+      disallowEmptySelection,
+      selectedKeys,
+      selectionBehavior,
+      selectionMode,
+      setSelectedKeys,
+      visibleItems,
+    ]
+  );
+
+  const toggleExpanded = useCallback(
+    (item: ParsedTreeItem) => {
+      if (!item.hasChildItems && item.childItems.length === 0) {
+        return;
+      }
+
+      const next = new Set(expandedKeys);
+      if (next.has(item.key)) {
+        next.delete(item.key);
+      } else {
+        next.add(item.key);
+      }
+      setExpandedKeys(next);
+    },
+    [expandedKeys, setExpandedKeys]
+  );
+
+  const navigateByIndex = useCallback(
+    (currentKey: TreeKey | null, delta: number) => {
+      if (focusableItems.length === 0) {
+        return;
+      }
+
+      const currentIndex = focusableItems.findIndex(
+        (item) => item.key === currentKey
+      );
+      let nextIndex = currentIndex === -1 ? (delta > 0 ? 0 : -1) : currentIndex + delta;
+
+      if (nextIndex < 0 || nextIndex >= focusableItems.length) {
+        if (!shouldFocusWrap) {
+          return;
+        }
+        nextIndex =
+          ((nextIndex % focusableItems.length) + focusableItems.length) %
+          focusableItems.length;
+      }
+
+      focusItem(focusableItems[nextIndex].key);
+    },
+    [focusItem, focusableItems, shouldFocusWrap]
+  );
+
+  const navigateToEdge = useCallback(
+    (edge: 'first' | 'last') => {
+      const item =
+        edge === 'first' ? focusableItems[0] : focusableItems[focusableItems.length - 1];
+      if (item) {
+        focusItem(item.key);
+      }
+    },
+    [focusItem, focusableItems]
+  );
+
+  const handleTypeahead = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (disallowTypeAhead || event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) {
+        return false;
+      }
+
+      event.preventDefault();
+      const key = event.key.toLocaleLowerCase();
+      if (
+        typeaheadStringRef.current.length === 0 ||
+        typeaheadStringRef.current.slice(-1) !== key
+      ) {
+        typeaheadStringRef.current += key;
+      }
+
+      clearTimeout(typeaheadTimeoutRef.current);
+      typeaheadTimeoutRef.current = setTimeout(() => {
+        typeaheadStringRef.current = '';
+      }, TYPEAHEAD_TIMEOUT);
+
+      const search = typeaheadStringRef.current;
+      const currentIndex = focusableItems.findIndex(
+        (item) => item.key === focusedKey
+      );
+      for (
+        let i = search.length === 1 ? 1 : 0;
+        i <= focusableItems.length;
+        i++
+      ) {
+        const index =
+          ((currentIndex + i) % focusableItems.length + focusableItems.length) %
+          focusableItems.length;
+        const item = focusableItems[index];
+        if (item?.textValue.toLocaleLowerCase().startsWith(search)) {
+          focusItem(item.key);
+          return true;
+        }
+      }
+
+      return true;
+    },
+    [disallowTypeAhead, focusItem, focusableItems, focusedKey]
+  );
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const target = event.target;
+    if (!(target instanceof Node) || !rootRef.current?.contains(target)) {
+      return;
+    }
+
+    setFocusVisible(true);
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        navigateByIndex(focusedKey, 1);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        navigateByIndex(focusedKey, -1);
+        break;
+      case 'Home':
+        event.preventDefault();
+        navigateToEdge('first');
+        break;
+      case 'End':
+        event.preventDefault();
+        navigateToEdge('last');
+        break;
+      case 'a':
+        if (
+          (event.ctrlKey || event.metaKey) &&
+          selectionMode === 'multiple' &&
+          !disallowSelectAll
+        ) {
+          event.preventDefault();
+          setSelectedKeys(
+            new Set(
+              allItems
+                .filter((item) => canSelectItem(item))
+                .map((item) => item.key)
+            )
+          );
+        } else {
+          handleTypeahead(event);
+        }
+        break;
+      case 'Escape':
+        if (
+          escapeKeyBehavior === 'clearSelection' &&
+          !disallowEmptySelection &&
+          selectedKeys.size > 0
+        ) {
+          event.preventDefault();
+          event.stopPropagation();
+          setSelectedKeys(new Set());
+        }
+        break;
+      case ' ':
+        if (focusedKey != null && event.target === itemRefs.current.get(focusedKey)) {
+          const item = getItemByKey(focusedKey);
+          if (item) {
+            event.preventDefault();
+            updateSelection(item, event, {
+              forceToggle: true,
+              range: event.shiftKey,
+            });
+          }
+        }
+        break;
+      case 'Enter':
+        if (focusedKey != null && event.target === itemRefs.current.get(focusedKey)) {
+          const item = getItemByKey(focusedKey);
+          if (item && !isInteractionDisabled(item, disabledKeys, disabledBehavior)) {
+            event.preventDefault();
+            if (item.props.onAction) {
+              item.props.onAction();
+            } else if (onAction) {
+              onAction(item.key);
+            } else if (selectionMode === 'none' && item.hasChildItems) {
+              toggleExpanded(item);
+            }
+          }
+        }
+        break;
+      default:
+        handleTypeahead(event);
+        break;
+    }
+  };
+
+  const handleFocus = (event: FocusEvent<HTMLDivElement>) => {
+    if (!rootRef.current?.contains(event.target)) {
+      return;
+    }
+
+    setFocused(true);
+    if (event.target === rootRef.current) {
+      const key =
+        focusedKey ??
+        firstVisibleSelectedKey(visibleItems, selectedKeys) ??
+        focusableItems[0]?.key ??
+        null;
+      focusItem(key);
+    }
+  };
+
+  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
+    if (
+      event.relatedTarget instanceof Node &&
+      rootRef.current?.contains(event.relatedTarget)
+    ) {
+      return;
+    }
+
+    setFocused(false);
+  };
+
+  const handleMouseDown = () => {
+    setFocusVisible(false);
+  };
+
+  useEffect(() => {
+    if (focusedKey != null && !focusableItems.some((item) => item.key === focusedKey)) {
+      setFocusedKey(focusableItems[0]?.key ?? null);
+    }
+  }, [focusableItems, focusedKey]);
+
+  useEffect(() => {
+    onVisibleRowsChange?.(visibleRows);
+  }, [onVisibleRowsChange, visibleRows]);
+
+  useEffect(() => {
+    if (!autoFocus) {
+      return;
+    }
+
+    const key =
+      autoFocus === 'last'
+        ? focusableItems[focusableItems.length - 1]?.key
+        : firstVisibleSelectedKey(visibleItems, selectedKeys) ??
+          focusableItems[0]?.key;
+    if (key != null) {
+      setFocused(true);
+      focusItem(key);
+    } else {
+      rootRef.current?.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(typeaheadTimeoutRef.current);
+    };
+  }, []);
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!otherProps['aria-label'] && !otherProps['aria-labelledby']) {
+      console.warn(
+        'An aria-label or aria-labelledby prop is required for <Tree> accessibility.'
+      );
+    }
+  }
+
+  const renderState: TreeRenderState = {
+    allItems,
+    visibleItems,
+    visibleRows,
+    focusedKey,
+    expandedKeys,
+    selectedKeys,
+    selectionMode,
+    selectionBehavior,
+  };
+
+  const renderItem = (
+    item: ParsedTreeItem,
+    options: {
+      rowIndex?: number;
+      virtualIndex?: number;
+      measureElement?: (element: HTMLElement | null) => void;
+    } = {}
+  ) => {
+    const isDisabled = isInteractionDisabled(item, disabledKeys, disabledBehavior);
+    const isExpanded = expandedKeys.has(item.key);
+    const isSelected = selectedKeys.has(item.key);
+    const rowId = `${treeId}-row-${sanitizeId(item.keyString)}`;
+    const rowProps = getItemDOMProps(item.props);
+    const canSelect = canSelectItem(item);
+    const itemOnClick = rowProps.onClick;
+    const itemOnDoubleClick = rowProps.onDoubleClick;
+    const itemOnFocus = rowProps.onFocus;
+    const itemOnKeyDownCapture = rowProps.onKeyDownCapture;
+    const itemOnMouseDown = rowProps.onMouseDown;
+    const itemOnMouseUp = rowProps.onMouseUp;
+    const itemOnMouseLeave = rowProps.onMouseLeave;
+    const itemOnKeyDown = rowProps.onKeyDown;
+
+    const contextValue: TreeItemRenderContextValue = {
+      item,
+      rowId,
+      isExpanded,
+      isSelected,
+      isDisabled,
+      canSelect,
+      selectionMode,
+      selectionBehavior,
+      toggleExpanded: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!isDisabled) {
+          toggleExpanded(item);
+          focusItem(item.key);
+        }
+      },
+      toggleSelection: (event) => {
+        event.stopPropagation();
+        updateSelection(item, event, { forceToggle: true });
+        focusItem(item.key);
+      },
+    };
+
+    const handleRowKeyDownCapture = (event: KeyboardEvent<HTMLDivElement>) => {
+      if (!rootRef.current || !itemRefs.current.get(item.key)) {
+        return;
+      }
+
+      const row = itemRefs.current.get(item.key)!;
+      const activeElement = getActiveElement(row);
+
+      if (activeElement === row) {
+        if (event.key === expandKey && item.hasChildItems && !isExpanded && !isDisabled) {
+          event.preventDefault();
+          event.stopPropagation();
+          toggleExpanded(item);
+        } else if (event.key === collapseKey) {
+          if (item.hasChildItems && isExpanded && !isDisabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            toggleExpanded(item);
+          } else if (item.parentKey != null) {
+            event.preventDefault();
+            event.stopPropagation();
+            focusItem(item.parentKey);
+          }
+        }
+        return;
+      }
+
+      if (
+        keyboardNavigationBehavior === 'arrow' &&
+        activeElement instanceof HTMLElement &&
+        row.contains(activeElement) &&
+        (event.key === 'ArrowLeft' || event.key === 'ArrowRight')
+      ) {
+        const focusables = getFocusableElements(row);
+        const currentIndex = focusables.indexOf(activeElement);
+        const delta =
+          (event.key === 'ArrowRight' && direction === 'ltr') ||
+          (event.key === 'ArrowLeft' && direction === 'rtl')
+            ? 1
+            : -1;
+        const next = focusables[currentIndex + delta] ?? row;
+        event.preventDefault();
+        event.stopPropagation();
+        next.focus({ preventScroll: true });
+      }
+    };
+
+    const handleRowClick = (event: MouseEvent<HTMLDivElement>) => {
+      if (isDisabled || isInteractiveEventTarget(event, itemRefs.current.get(item.key))) {
+        return;
+      }
+
+      focusItem(item.key);
+
+      if (selectionMode === 'none') {
+        if (item.props.onAction) {
+          item.props.onAction();
+        } else if (onAction) {
+          onAction(item.key);
+        } else if (item.hasChildItems) {
+          toggleExpanded(item);
+        }
+        return;
+      }
+
+      updateSelection(item, event, { range: event.shiftKey });
+    };
+
+    const handleRowDoubleClick = () => {
+      if (
+        selectionBehavior === 'replace' &&
+        !isDisabled &&
+        (item.props.onAction || onAction)
+      ) {
+        item.props.onAction?.();
+        if (!item.props.onAction) {
+          onAction?.(item.key);
+        }
+      }
+    };
+
+    const handleRowFocus = () => {
+      setFocusedKey(item.key);
+    };
+
+    return (
+      <TreeItemRenderContext.Provider key={item.keyString} value={contextValue}>
+        <div
+          {...rowProps}
+          ref={(node) => {
+            options.measureElement?.(node);
+            if (node) {
+              itemRefs.current.set(item.key, node);
+            } else {
+              itemRefs.current.delete(item.key);
+            }
+          }}
+          id={rowId}
+          role="row"
+          data-index={options.virtualIndex}
+          aria-rowindex={options.rowIndex}
+          tabIndex={focusedKey === item.key ? 0 : -1}
+          aria-label={(item.props['aria-label'] ?? item.textValue) || undefined}
+          style={
+            {
+              ...rowProps.style,
+              '--tree-item-level': item.level,
+            } as CSSProperties
+          }
+          aria-expanded={item.hasChildItems ? isExpanded : undefined}
+          aria-level={item.level}
+          aria-posinset={item.posInSet}
+          aria-setsize={item.setSize}
+          aria-selected={canSelect ? isSelected : undefined}
+          aria-disabled={isDisabled || undefined}
+          data-tree-item=""
+          data-key={item.keyString}
+          data-expanded={item.hasChildItems && isExpanded ? '' : undefined}
+          data-has-child-items={item.hasChildItems ? '' : undefined}
+          data-level={item.level}
+          data-selected={isSelected ? '' : undefined}
+          data-disabled={isDisabled ? '' : undefined}
+          data-focused={focusedKey === item.key && isFocused ? '' : undefined}
+          data-focus-visible={
+            focusedKey === item.key && isFocusVisible ? '' : undefined
+          }
+          data-pressed={pressedKey === item.key ? '' : undefined}
+          data-selection-mode={
+            selectionMode === 'none' ? undefined : selectionMode
+          }
+          onClick={wrapEvent(itemOnClick as any, handleRowClick)}
+          onDoubleClick={wrapEvent(
+            itemOnDoubleClick as any,
+            handleRowDoubleClick
+          )}
+          onFocus={wrapEvent(itemOnFocus as any, handleRowFocus)}
+          onKeyDownCapture={wrapEvent(
+            itemOnKeyDownCapture as any,
+            handleRowKeyDownCapture
+          )}
+          onKeyDown={itemOnKeyDown}
+          onMouseDown={wrapEvent(itemOnMouseDown as any, () => {
+            if (!isDisabled) {
+              setPressedKey(item.key);
+            }
+          })}
+          onMouseUp={wrapEvent(itemOnMouseUp as any, () => {
+            setPressedKey(null);
+          })}
+          onMouseLeave={wrapEvent(itemOnMouseLeave as any, () => {
+            setPressedKey(null);
+          })}
+        >
+          <div role="gridcell" aria-colindex={1}>
+            {renderTreeItemContent(item, contextValue)}
+          </div>
+        </div>
+      </TreeItemRenderContext.Provider>
+    );
+  };
+
+  const renderItemBranch = (item: ParsedTreeItem): ReactNode[] => {
+    const rows: ReactNode[] = [renderItem(item)];
+    if (expandedKeys.has(item.key)) {
+      item.childItems.forEach((childItem) => {
+        rows.push(...renderItemBranch(childItem));
+      });
+      if (
+        shouldRenderLoadingRow(item, renderLoadingState)
+      ) {
+        rows.push(renderLoadingRow(item));
+      }
+    }
+    return rows;
+  };
+
+  const renderItemBranches = (items: ParsedTreeItem[]) => {
+    const rows: ReactNode[] = [];
+    items.forEach((item) => {
+      rows.push(...renderItemBranch(item));
+    });
+    return rows;
+  };
+
+  const renderNode = (node: ParsedTreeNode) => {
+    if (node.type === 'item') {
+      return renderItemBranch(node);
+    }
+
+    const sectionDOMProps = getSectionDOMProps(node.sectionProps);
+    const headerId = `${treeId}-section-${sanitizeId(node.key)}-header`;
+    return (
+      <div
+        {...sectionDOMProps}
+        key={node.key}
+        role="rowgroup"
+        aria-labelledby={node.header ? headerId : undefined}
+        aria-label={
+          node.header ? undefined : node.sectionProps['aria-label'] ?? undefined
+        }
+      >
+        {node.header ? (
+          <div role="row">
+            <div
+              {...getHeaderDOMProps(node.headerProps)}
+              id={headerId}
+              role="rowheader"
+            >
+              {node.header}
+            </div>
+          </div>
+        ) : null}
+        {renderItemBranches(node.items)}
+      </div>
+    );
+  };
+
+  const renderSectionRow = (
+    node: ParsedTreeSection,
+    options: {
+      rowIndex?: number;
+      virtualIndex?: number;
+      measureElement?: (element: HTMLElement | null) => void;
+    } = {}
+  ) => {
+    const headerId = `${treeId}-section-${sanitizeId(node.key)}-header`;
+    return (
+      <div
+        key={node.key}
+        ref={options.measureElement}
+        role="row"
+        data-index={options.virtualIndex}
+        aria-rowindex={options.rowIndex}
+      >
+        <div
+          {...getHeaderDOMProps(node.headerProps)}
+          id={headerId}
+          role="rowheader"
+        >
+          {node.header}
+        </div>
+      </div>
+    );
+  };
+
+  const renderLoadingRow = (
+    item: ParsedTreeItem,
+    options: {
+      rowIndex?: number;
+      virtualIndex?: number;
+      measureElement?: (element: HTMLElement | null) => void;
+    } = {}
+  ) => (
+    <div
+      key={`${item.keyString}-loading`}
+      ref={options.measureElement}
+      role="row"
+      data-index={options.virtualIndex}
+      aria-level={item.level + 1}
+      aria-rowindex={options.rowIndex}
+      data-tree-loading-row=""
+      data-level={item.level + 1}
+      style={
+        {
+          '--tree-item-level': item.level + 1,
+        } as CSSProperties
+      }
+    >
+      <div role="gridcell" aria-colindex={1}>
+        {renderLoadingState?.(item)}
+      </div>
+    </div>
+  );
+
+  const renderVisibleRow = (
+    row: TreeVisibleRow,
+    index: number,
+    measureElement?: (element: HTMLElement | null) => void
+  ) => {
+    let defaultRow: ReactElement;
+    if (row.type === 'item') {
+      defaultRow = renderItem(row.item, {
+        rowIndex: index + 1,
+        virtualIndex: index,
+        measureElement,
+      });
+    } else if (row.type === 'section') {
+      defaultRow = renderSectionRow(row.section, {
+        rowIndex: index + 1,
+        virtualIndex: index,
+        measureElement,
+      });
+    } else {
+      defaultRow = renderLoadingRow(row.item, {
+        rowIndex: index + 1,
+        virtualIndex: index,
+        measureElement,
+      });
+    }
+
+    return renderRow?.(row, defaultRow, renderState) ?? defaultRow;
+  };
+
+  const emptyState =
+    allItems.length === 0 && renderEmptyState ? (
+      <div role="row" aria-level={1}>
+        <div role="gridcell" aria-colindex={1}>
+          {renderEmptyState()}
+        </div>
+      </div>
+    ) : null;
+
+  return (
+    <Comp
+      {...otherProps}
+      as={innerAs}
+      ref={assignMultipleRefs(forwardedRef, rootRef)}
+      id={treeId}
+      role="treegrid"
+      aria-rowcount={renderedRowIndices ? visibleRows.length : undefined}
+      tabIndex={focusedKey == null ? tabIndex ?? 0 : tabIndex ?? -1}
+      aria-multiselectable={selectionMode === 'multiple' ? true : undefined}
+      data-tree=""
+      data-empty={allItems.length === 0 ? '' : undefined}
+      data-focused={isFocused ? '' : undefined}
+      data-focus-visible={isFocusVisible ? '' : undefined}
+      data-selection-mode={selectionMode}
+      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+      onFocus={wrapEvent(onFocus, handleFocus)}
+      onBlur={wrapEvent(onBlur, handleBlur)}
+      onMouseDown={wrapEvent(onMouseDown, handleMouseDown)}
+    >
+      {emptyState ??
+        (renderedRowIndices
+          ? renderFlatRows(visibleRows, renderedRowIndices, renderVisibleRow)
+          : parsedTree.map(renderNode))}
+    </Comp>
+  );
+});
+
+function renderFlatRows(
+  visibleRows: TreeVisibleRow[],
+  renderedRowIndices: Iterable<number>,
+  renderVisibleRow: (
+    row: TreeVisibleRow,
+    index: number
+  ) => ReactNode
+) {
+  return Array.from(renderedRowIndices, (index) => {
+    const row = visibleRows[index];
+    return row ? renderVisibleRow(row, index) : null;
+  });
+}
+
+function renderTreeItemContent(
+  item: ParsedTreeItem,
+  context: TreeItemRenderContextValue
+) {
+  if (item.props.title === undefined || !item.hasChildItems) {
+    return item.content;
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        slot="chevron"
+        aria-expanded={context.isExpanded}
+        aria-label={context.isExpanded ? 'Collapse' : 'Expand'}
+        aria-labelledby={context.rowId}
+        disabled={context.isDisabled}
+        tabIndex={-1}
+        onClick={context.toggleExpanded}
+      >
+        <span aria-hidden="true">&gt;</span>
+      </button>
+      {item.content}
+    </>
+  );
+}
+
+function makeKeySet(
+  keys: TreeSelection | TreeExpandedKeys | undefined,
+  allKeys: TreeKey[]
+) {
+  if (!keys) {
+    return new Set<TreeKey>();
+  }
+
+  if (keys === 'all') {
+    return new Set(allKeys);
+  }
+
+  return new Set(keys);
+}
+
+function addRangeToSelection(
+  visibleItems: ParsedTreeItem[],
+  anchorKey: TreeKey,
+  key: TreeKey,
+  selectedKeys: Set<TreeKey>,
+  canSelect: (item: ParsedTreeItem) => boolean
+) {
+  const anchorIndex = visibleItems.findIndex((item) => item.key === anchorKey);
+  const keyIndex = visibleItems.findIndex((item) => item.key === key);
+  if (anchorIndex === -1 || keyIndex === -1) {
+    return new Set(selectedKeys);
+  }
+
+  const [start, end] =
+    anchorIndex < keyIndex ? [anchorIndex, keyIndex] : [keyIndex, anchorIndex];
+  const next = new Set(selectedKeys);
+  for (let index = start; index <= end; index++) {
+    const item = visibleItems[index];
+    if (canSelect(item)) {
+      next.add(item.key);
+    }
+  }
+  return next;
+}
+
+function firstVisibleSelectedKey(
+  visibleItems: ParsedTreeItem[],
+  selectedKeys: Set<TreeKey>
+) {
+  return visibleItems.find((item) => selectedKeys.has(item.key))?.key ?? null;
+}
+
+function isItemDisabled(item: ParsedTreeItem, disabledKeys: Set<TreeKey>) {
+  return item.disabled || disabledKeys.has(item.key);
+}
+
+function isInteractionDisabled(
+  item: ParsedTreeItem,
+  disabledKeys: Set<TreeKey>,
+  disabledBehavior: TreeDisabledBehavior
+) {
+  return disabledBehavior === 'all' && isItemDisabled(item, disabledKeys);
+}
+
+function getItemDOMProps(props: TreeItemProps) {
+  const {
+    id,
+    title,
+    textValue,
+    isDisabled,
+    disabled,
+    hasChildItems,
+    isLoading,
+    onAction,
+    children,
+    ...domProps
+  } = props;
+  return domProps;
+}
+
+function getSectionDOMProps(props: TreeSectionProps) {
+  const { as, innerAs, children, ...domProps } = props;
+  return domProps;
+}
+
+function getHeaderDOMProps(props: TreeHeaderProps) {
+  const { as, innerAs, children, ...domProps } = props;
+  return domProps;
+}
+
+function sanitizeId(value: string) {
+  return value.replace(/[^A-Za-z0-9_-]/g, '-');
+}
+
+function getActiveElement(root: HTMLElement) {
+  return root.ownerDocument.activeElement;
+}
+
+function getFocusableElements(root: HTMLElement) {
+  return Array.from(
+    root.querySelectorAll<HTMLElement>(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    )
+  ).filter((element) => !element.hasAttribute('disabled'));
+}
+
+function isInteractiveEventTarget(
+  event: MouseEvent<HTMLElement>,
+  row: HTMLElement | undefined
+) {
+  if (!row || !(event.target instanceof HTMLElement) || event.target === row) {
+    return false;
+  }
+
+  const interactiveElement = event.target.closest(
+    'a[href], button, input, select, textarea, [role="button"], [role="checkbox"], [tabindex]'
+  );
+  return Boolean(interactiveElement && interactiveElement !== row);
+}