function Tree(props) {
    const {
        data,
        onNodeExpand,
        onNodeCheck,
        onNodeSelect,
        selectedNode,
        className,
        style,
        id,
        ariaLabel,
        ariaLabelledBy,
    } = props;

    const visibleNodes = useTreeNodesAsPlainList(data);

    const {
        autoFocus,
        focusedNode,
        setFocusedNode,
        clearFocusedNode,
        keyDownHandler,
    } = useKeyNavigation({
        visibleNodes,
        selectedNode,
        onNodeSelect,
        onNodeExpand,
    });

    const treeData = Array.isArray(data) ? data : [];

    return (
        <Provider
            value={{
                autoFocus,
                focusedNode,
                onPrivateFocusNode: setFocusedNode,
                onPrivateBlurNode: clearFocusedNode,
                onPrivateKeyDown: keyDownHandler,
            }}
        >
            <TreeContainerUl
                className={className}
                style={style}
                id={id}
                role="tree"
                aria-labelledby={ariaLabelledBy}
                aria-label={ariaLabel}
            >
                <TreeChildren
                    data={treeData}
                    onNodeExpand={onNodeExpand}
                    onNodeCheck={onNodeCheck}
                    nodePath={[]}
                    selectedNode={selectedNode}
                    onNodeSelect={onNodeSelect}
                />
            </TreeContainerUl>
        </Provider>
    );
}
A Tree is visualization of a structure hierarchy with nested elements. A branch can be expanded or collapsed or selected. This is a BETA version.
@category Layout