Demo data does not work

[downright-development]

Describe the bug I'm copying demo items and demo uncontrolled tree and it does not function.

To Reproduce

import {
	StaticTreeDataProvider,
	Tree,
	UncontrolledTreeEnvironment,
} from "react-complex-tree";

import "react-complex-tree/lib/style-modern.css";

const items = {
	root: {
		index: "root",
		canMove: true,
		isFolder: true,
		children: ["child1", "child2"],
		data: "Root item",
		canRename: true,
	},
	child1: {
		index: "child1",
		canMove: true,
		isFolder: false,
		children: [],
		data: "Child item 1",
		canRename: true,
	},
	child2: {
		index: "child2",
		canMove: true,
		isFolder: false,
		children: [],
		data: "Child item 2",
		canRename: true,
	},
};

const ComplexTree = () => {
	return (
		<UncontrolledTreeEnvironment
			dataProvider={
				new StaticTreeDataProvider(items, (item, data) => ({ ...item, data }))
			}
			getItemTitle={(item) => item.data}
			viewState={{}}
		>
			<Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
		</UncontrolledTreeEnvironment>
	);
};

export default ComplexTree;

Expected behavior I expected the root folder to also render, it does not. See screenshot.

Screenshots

Additional context You can help by providing additional details that are available to you, such as

Chrome Browser

• Version of the Library or tool for which you report the bug -- "react-complex-tree": "^2.6.0",

[downright-development]

Perhaps this is some confusion --

https://rct.lukasbach.com/docs/getstarted Looking at your documentation, I don't see the root folder being rendered at the bottom either? Do we need to make some invisible root folder or something for drag reasons?

[lukasbach]

Hi @downright-development! This is by design, the top-level items rendered by the tree are the children of what is defined as root item. This allows you to render several top-level items without the library having to support additional interfaces for root-level, the "group" of top-level items are essentially just the children of the root item. This also allows you to have a tree environment with several trees, that have different root folders as entry points.

If you want to have the item you currently define as root visible in the tree, you will need to place it as child of another "fake-root" which you define as root to the interface of RCT.