Function Tree

packages/react-stately/stories/tree/useTreeState.stories.tsx:53–74

(props)

}

function Tree(props) {
  let state = useTreeState(props);
  let ref = useRef(null);

  let keyboardDelegate = useMemo(
    () => new TreeKeyboardDelegate(state.collection, state.disabledKeys),
    [state.collection, state.disabledKeys]
  );

  let {collectionProps} = useSelectableCollection({
    keyboardDelegate,
    ref,
    selectionManager: state.selectionManager
  });

  return (
    <div {...collectionProps} ref={ref} role="tree">
      {/* oxlint-disable-next-line react/react-compiler */}
      {TreeNodes({nodes: state.collection, state})}
    </div>
  );
}

function TreeNodes({nodes, state}: {nodes: Collection<Node<any>>; state: any}) {
  return Array.from(nodes).map(node => <TreeItem node={node} key={node.key} state={state} />);