@itwin/presentation-hierarchies-react 2.0.0-alpha.3 → 2.0.0-alpha.30

package/CHANGELOG.md

@@ -1,5 +1,389 @@
 # @itwin/presentation-hierarchies-react
 
+## 2.0.0-alpha.30
+
+### Patch Changes
+
+- [#1037](https://github.com/iTwin/presentation/pull/1037): Added additional documentation for `RenameAction`
+
+## 2.0.0-alpha.29
+
+### Patch Changes
+
+- [#1035](https://github.com/iTwin/presentation/pull/1035): Version bump after merge from `master`.
+
+## 2.0.0-alpha.28
+
+### Patch Changes
+
+- [#1031](https://github.com/iTwin/presentation/pull/1031): Version bump
+- Updated dependencies:
+  - @itwin/presentation-hierarchies@2.0.0-alpha.3
+  - @itwin/unified-selection@1.5.1-alpha.0
+
+## 2.0.0-alpha.27
+
+### Patch Changes
+
+- [#1026](https://github.com/iTwin/presentation/pull/1026): Fix `reserveSpace` property being required instead of optional for `FilterAction` and `RenameAction`.
+
+## 2.0.0-alpha.26
+
+### Major Changes
+
+- [#1023](https://github.com/iTwin/presentation/pull/1023): Split `getActions` into `getMenuActions` & `getInlineActions` for `StrataKitTreeRenderer` and `StrataKitTreeNodeRenderer`.
+
+  Updated peer dependencies:
+
+  - @stratakit/bricks@0.3.3
+  - @stratakit/foundations@0.2.2
+  - @stratakit/structures@0.3.1
+
+  Added `reserveSpace` property to `FilterAction` and `RenameAction`, which reserves space for the action when it is not available
+
+### Minor Changes
+
+- [#1007](https://github.com/iTwin/presentation/pull/1007): Renames:
+  `FlatNode` => `FlatTreeNodeItem`
+  `FlatTreeNode` => `FlatTreeItem`
+  `PlaceholderNode` => `PlaceholderItem`
+  `useFlatTreeNodeList` => `useFlatTreeItems`
+
+  Changed `FlatTreeNodeItem` (previously `FlatNode`) to have property `node: PresentationHierarchyNode` instead of extending `PresentationHierarchyNode`.
+
+### Patch Changes
+
+- Updated dependencies:
+  - @itwin/presentation-hierarchies@2.0.0-alpha.2
+
+## 2.0.0-alpha.25
+
+### Patch Changes
+
+- Updated dependencies:
+  - @itwin/presentation-hierarchies@2.0.0-alpha.1
+  - @itwin/presentation-shared@2.0.0-alpha.1
+  - @itwin/unified-selection@1.4.3-alpha.0
+
+## 2.0.0-alpha.24
+
+### Patch Changes
+
+- [#975](https://github.com/iTwin/presentation/pull/975): Associate tree nodes rendered by `<StrataKitTreeNodeRenderer />` component with error messages rendered in `<TreeErrorRenderer />`. This improves accessibility by linking error information to the node.
+- [#979](https://github.com/iTwin/presentation/pull/979): Adjust how `useTree` and other variants of it determines `isReloading` value. `isReloading` is now set to `true` if root nodes are being loaded.
+
+## 2.0.0-alpha.23
+
+### Minor Changes
+
+- [#972](https://github.com/iTwin/presentation/pull/972): Added `getEditingProps` prop to `<StrataKitTreeRenderer />` component that allows to make node labels editable. In order to enter label editing mode `<RenameAction />` component was added.
+
+## 2.0.0-alpha.22
+
+### Minor Changes
+
+- [#970](https://github.com/iTwin/presentation/pull/970): Exposed the type of tree state hooks' result `treeRendererProps` attribute - `TreeRendererProps`. The type can be useful when creating custom tree renderers.
+
+## 2.0.0-alpha.21
+
+### Major Changes
+
+- [#961](https://github.com/iTwin/presentation/pull/961): **Breaking changes** to tree state hooks `useTree`, `useUnifiedSelectionTree`, `useIModelTree`, `useIModelUnifiedSelectionTree`:
+
+  - All tree rendering props have been moved under `treeRendererProps`. The value can be passed to `<StrataKitTreeRenderer />` component.
+  - In case an error occurs while loading the root hierarchy level, instead of `treeRendererProps`, the `rootErrorRendererProps` are set, which can be passed to `<StrataKitRootErrorRenderer />` component to render the error state.
+  - The `isLoading` attribute has been renamed to `isReloading`.
+  - Errors are no longer defined as children of `PresentationHierarchyNode` and instead are now included as `error` attribute for more fluent API.
+
+  When rendering tree state, the recommended order of checks is:
+
+  1. If `rootErrorRendererProps` is defined, there was an error - render error state.
+  2. If `treeRendererProps` is not defined, the component is doing the initial load - render loading state.
+  3. If `treeRendererProps` is defined, the hierarchy is loaded - render the tree component.
+
+     The `isReloading` attribute may also be set at the same time, indicating that the hierarchy is being reloaded in the background. Consumers may want to render an overlay in this case, or not render the tree at all.
+
+  Example:
+
+  ```ts
+  function MyComponent () {
+      const useTreeResult = useIModelUnifiedSelectionTree({...});
+
+      // handle possible root errors with our provided component or your own custom implementation
+      if (treeProps.rootErrorRendererProps) {
+        return <StrataKitRootErrorRenderer {...useTreeResult.rootErrorRendererProps} />;
+      }
+
+      // handle loading state
+      if (!treeProps.treeRendererProps) {
+        return <MyLoadingComponent />;
+      }
+
+      // handle loaded hierarchy
+      return <StrataKitTreeRenderer {...useTreeResult.treeProps} />;
+  }
+  ```
+
+## 2.0.0-alpha.20
+
+### Major Changes
+
+- [#965](https://github.com/iTwin/presentation/pull/965): Added `@stratakit/structures` as a peer dependency.
+
+## 2.0.0-alpha.19
+
+### Major Changes
+
+- [#954](https://github.com/iTwin/presentation/pull/954): Add additional requirements for types in `EC` metadata namespace, whose objects are returned by `ECSchemaProvider`.
+
+  - `EC.Schema`, `EC.Class` and `EC.Property` now all have an async `getCustomAttributes()` method that returns an `EC.CustomAttributeSet`, allowing consumers to access custom attributes of these schema items.
+  - `EC.Class` now additionally has these members:
+    - `baseClass: Promise<Class | undefined>`
+    - `getDerivedClasses(): Promise<Class[]>`
+
+  While this is an addition, it's considered a breaking change, because objects of the updated types are expected to be supplied to us by consumers.
+
+  In reality, consumers will likely use `@itwin/presentation-core-interop` package for creating them, and the package has been updated to handle the change, so reacting to the breaking change is as simple as bumping the version of `@itwin/presentation-core-interop` package in the consumer's `package.json`.
+
+### Patch Changes
+
+- [#957](https://github.com/iTwin/presentation/pull/957): Avoid leaking custom props to the `PlaceholderNode` that are causing console errors.
+- Updated dependencies:
+  - @itwin/presentation-hierarchies@2.0.0-alpha.0
+  - @itwin/presentation-shared@2.0.0-alpha.0
+  - @itwin/unified-selection@1.4.2-alpha.0
+
+## 2.0.0-alpha.18
+
+### Major Changes
+
+- [#951](https://github.com/iTwin/presentation/pull/951): Move from `@itwin/itwinui-react@5.0.0-alpha` to `@stratakit/*` packages.
+
+## 2.0.0-alpha.17
+
+### Patch Changes
+
+- [#949](https://github.com/iTwin/presentation/pull/949): Use default imports instead of `URL` constructor for icons.
+
+## 2.0.0-alpha.16
+
+### Minor Changes
+
+- [#945](https://github.com/iTwin/presentation/pull/945): Re-export `getLogger` and `setLogger` functions from `@itwin/presentation-hierarchies` to allow setting a logger.
+
+## 2.0.0-alpha.15
+
+### Major Changes
+
+- [#942](https://github.com/iTwin/presentation/pull/942): Unified selection API cleanup.
+
+  - Remove deprecated `UnifiedSelectionProvider`.
+  - Make `selectionStorage` prop required for unified selection - enabled tree state hooks (`useUnifiedSelectionTree` and `useIModelUnifiedSelectionTree`).
+
+  Previously, the `selectionStorage` prop was optional, and if not provided, the hooks used unified selection React context (provided by `UnifiedSelectionProvider`) as fallback. Finally, if the context was not provided either, the hooks acted as regular non-unified selection hooks.
+
+  This didn't make much sense, as the hooks were designed to work with unified selection, as their name suggests. So it makes sense to require the selection storage to be provided to them, and at that point the context becomes redundant.
+
+- [#936](https://github.com/iTwin/presentation/pull/936): Replaced `actions` property on `TreeNodeRenderer` with `getActions` to match how decorations are handled. Removed `useFilterAction` hook and replaced it with `FilterAction` component.
+
+  Before:
+
+  ```tsx
+  import { TreeNodeRenderer, useFilterAction } from "@itwin/presentation-hierarchies-react";
+
+  const filterAction = useFilterAction({ onFilter, getHierarchyLevelDetails });
+  return (
+    <TreeNodeRenderer
+      actions={useMemo(
+        () => [
+          filterAction,
+          (node) => ({
+            label: "Custom Action",
+            actions: () => log(node.label),
+            icon: customIconHref,
+          }),
+        ],
+        [filterAction],
+      )}
+    />
+  );
+  ```
+
+  After:
+
+  ```tsx
+  import { Icon, Tree } from "@itwin/itwinui-react";
+  import { FilterAction, TreeNodeRenderer } from "@itwin/presentation-hierarchies-react";
+
+  return (
+    <TreeNodeRenderer
+      getActions={useCallback(
+        (node) => [
+          <FilterAction key="filter" node={node} onFilter={onFilter} getHierarchyLevelDetails={getHierarchyLevelDetails} />,
+          <Tree.ItemAction key="customAction" label="Custom action" onClick={() => log(node.label)} icon={<Icon href={customIconHref} />} />,
+        ],
+        [onFilter, getHierarchyLevelDetails],
+      )}
+    />
+  );
+  ```
+
+### Minor Changes
+
+- [#930](https://github.com/iTwin/presentation/pull/930): Exposed `TreeErrorRenderer`, which takes `renderError` property to render custom error messages.
+  `TreeRenderer` now takes `errorRenderer` to render a custom error display component.
+
+  Custom error display component example:
+
+  ```ts
+  <TreeRenderer
+      {...treeProps}
+      errorRenderer={(errorsRendererProps) => (
+          <MyErrorRenderer {...errorsRendererProps} />
+      )}
+  />
+  ```
+
+  Custom error message example:
+
+  ```ts
+  <TreeRenderer
+      {...treeProps}
+      errorRenderer={(errorsRendererProps) => (
+          <TreeErrorRenderer
+              {...errorsRendererProps}
+              renderError={(errorProps) => {
+                  return <unstable_ErrorRegion.Item message={...} />;
+              }}
+          />
+      )}
+  />
+  ```
+
+- [#937](https://github.com/iTwin/presentation/pull/937): `TreeRenderer` now takes `rootErrorRenderer` to render a custom root error display component.
+
+  Custom error display component example:
+
+  ```ts
+  <TreeRenderer
+      {...treeProps}
+      rootErrorRenderer={(rootErrorRendererProps) => (
+          <MyRootErrorRenderer {...rootErrorRendererProps} />
+      )}
+  />
+  ```
+
+- [#930](https://github.com/iTwin/presentation/pull/930): Changed flat tree building functions to hooks:
+
+  - `flattenNodes` => `useFlatTreeNodeList`.
+  - `getErrors` => `useErrorList`.
+
+### Patch Changes
+
+- [#930](https://github.com/iTwin/presentation/pull/930): Fix `ResultSetTooLarge` error suggesting filtering when parent node is not filterable.
+
+## 2.0.0-alpha.14
+
+### Patch Changes
+
+- [#928](https://github.com/iTwin/presentation/pull/928): Memoize tree components to reduce the amount of renders.
+
+## 2.0.0-alpha.13
+
+### Patch Changes
+
+- [#924](https://github.com/iTwin/presentation/pull/924): Fix tree error dropdown not applying actions.
+
+## 2.0.0-alpha.12
+
+### Patch Changes
+
+- [#922](https://github.com/iTwin/presentation/pull/922): Fix tree displaying aditional scrollbars, when scrolling to the last element with low tree width.
+
+## 2.0.0-alpha.11
+
+### Patch Changes
+
+- [#916](https://github.com/iTwin/presentation/pull/916): Fix tree nodes overlapping when nodes with and without sublabel are rendered alongside.
+- [#920](https://github.com/iTwin/presentation/pull/920): Changed error display for node errors to match new design system.
+
+## 2.0.0-alpha.10
+
+### Patch Changes
+
+- [#913](https://github.com/iTwin/presentation/pull/913): Removed outline showed after node expander is clicked.
+
+## 2.0.0-alpha.9
+
+### Patch Changes
+
+- [#906](https://github.com/iTwin/presentation/pull/906): Replaced `TreeNodeRenderer.getIcon` prop with `getDecorations` prop.
+
+  The `getIcon` prop took either an icon URI, or a `ReactElement`. The new `getDecorations` prop allows passing multiple React elements, allowing consumers to render not just the icon, but also addition components like a tag or a color swatch. Migration:
+
+  ```ts
+  // previously, when `getIcon` returned a `ReactElement`:
+  function myGetIcon(node: PresentationHierarchyNode): React.ReactElement {
+    // implementation...
+  }
+  <TreeNodeRenderer getIcon={myGetIcon} />
+
+  // now:
+  <TreeNodeRenderer getDecorations={myGetIcon} />
+
+  // previously, when `getIcon` returned an icon URI:
+  function myGetIconUri(node: PresentationHierarchyNode): string {
+    // implementation...
+  }
+  <TreeNodeRenderer getIcon={myGetIconUri} />
+
+  // now:
+  <TreeNodeRenderer getDecorations={(node) => <Icon href={myGetIconUri(node)} />} />
+  ```
+
+- [#911](https://github.com/iTwin/presentation/pull/911): Fix incorrect left padding on tree items
+
+## 2.0.0-alpha.8
+
+### Patch Changes
+
+- [#903](https://github.com/iTwin/presentation/pull/903): Added `activeDescription` optional property to TreeItemAction interface, which when provided a value will display a dot above the button indicating an active state. The provided value is used to set accesible description and should explain why the action item is active.
+- [#903](https://github.com/iTwin/presentation/pull/903): Changed `createFilterAction` function to a React hook and renamed it to `useFilterAction`.
+
+## 2.0.0-alpha.7
+
+### Patch Changes
+
+- [#892](https://github.com/iTwin/presentation/pull/892): Fix focus outline for tree items not being visible on action items click.
+- [#894](https://github.com/iTwin/presentation/pull/894): Fix `treeRenderer` property `getSublabel` not being used.
+
+## 2.0.0-alpha.6
+
+### Patch Changes
+
+- [#890](https://github.com/iTwin/presentation/pull/890): Fix alpha peer dependencies to no longer have caret.
+
+## 2.0.0-alpha.5
+
+### Minor Changes
+
+- [#883](https://github.com/iTwin/presentation/pull/883): Trees rendered with `TreeRenderer` will now be virtualized.
+
+## 2.0.0-alpha.4
+
+### Minor Changes
+
+- [#878](https://github.com/iTwin/presentation/pull/878): Tree node renderer now uses `Tree.ItemAction`. `Show` property now takes in undefined values, values behave like this:
+
+  - `undefined` - visible on hover/focus,
+  - `true` - visible at all times,
+  - `false` - hidden at all times.
+
+  Updated peer dependencies:
+
+  - itwinui-icons to 5.0.0-alpha.3,
+  - itwinui-react to 5.0.0-alpha.6,
+
 ## 2.0.0-alpha.3
 
 ### Patch Changes
@@ -37,6 +421,142 @@
 
 - [#847](https://github.com/iTwin/presentation/pull/847): Moving tree rendering components to a new design systems.
 
+## 1.9.1
+
+### Patch Changes
+
+- [#1033](https://github.com/iTwin/presentation/pull/1033): Fix unified selection tree state hooks `useUnifiedSelectionTree` and `useIModelUnifiedSelectionTree` not handling the recently added `createSelectableForGenericNode` prop.
+
+## 1.9.0
+
+### Minor Changes
+
+- [#1027](https://github.com/iTwin/presentation/pull/1027): Added `getActions` property to `TreeRenderer` and `TreeNodeRenderer` to allow providing custom actions for tree nodes.
+
+## 1.8.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - @itwin/presentation-hierarchies@1.7.1
+
+## 1.8.0
+
+### Minor Changes
+
+- [#1019](https://github.com/iTwin/presentation/pull/1019): Add ability to customize `Selectable` objects that are added to unified selection, when a generic node in a unified selection-driven tree component is selected.
+
+  By default, when a generic node is selected in a unified selection-driven tree component, the `Selectable` that is created for it gets a per-tree unique identifier. This means that a similar generic node somewhere else in the tree or a different tree will not be considered the same. However, in some cases we do want generic nodes to be treated as the same, and for that matter unified selection-enabling tree state hooks now have a new `createSelectableForGenericNode` option:
+
+  ```tsx
+  import { useUnifiedSelectionTree } from "@itwin/presentation-hierarchies-react";
+
+  const treeState = useUnifiedSelectionTree({
+    selectionStorage,
+    createSelectableForGenericNode: useCallback<NonNullable<Props<typeof useUnifiedSelectionTree>["createSelectableForGenericNode"]>>(
+      (node, uniqueId) => ({ identifier: node.key.id, data: node, async *loadInstanceKeys() {} }),
+      [],
+    ),
+    // ...other options
+  });
+  ```
+
+### Patch Changes
+
+- Updated dependencies:
+  - @itwin/unified-selection@1.5.0
+
+## 1.7.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @itwin/presentation-hierarchies@1.7.0
+
+## 1.7.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - @itwin/presentation-hierarchies@1.6.1
+
+## 1.7.0
+
+### Minor Changes
+
+- 64e80beaeb87e5797d8238c14fa9cd8dbfcee7c3: Added `abortSignal` to `getFilteredPaths` callback used by `UseTree` hook. This allows to cancel ongoing requests when component is unmounted or new request is started.
+
+### Patch Changes
+
+- Updated dependencies:
+  - @itwin/presentation-hierarchies@1.6.0
+
+## 1.6.9
+
+### Patch Changes
+
+- [#1000](https://github.com/iTwin/presentation/pull/1000): Made sure `Apply filter` button becomes focused after hierarchy level filter is applied.
+
+## 1.6.8
+
+### Patch Changes
+
+- [#982](https://github.com/iTwin/presentation/pull/982): Update itwinjs-core dependencies to v5.0.0
+- Updated dependencies:
+  - @itwin/presentation-hierarchies@1.5.1
+  - @itwin/presentation-shared@1.2.2
+  - @itwin/unified-selection@1.4.2
+
+## 1.6.7
+
+### Patch Changes
+
+- [#974](https://github.com/iTwin/presentation/pull/974): Removed tree node outline on mobile devices.
+- Updated dependencies:
+  - @itwin/presentation-hierarchies@1.5.0
+
+## 1.6.6
+
+### Patch Changes
+
+- [#944](https://github.com/iTwin/presentation/pull/944): Fixed `extended` selection mode not replacing existing selection when selected node is clicked.
+
+## 1.6.5
+
+### Patch Changes
+
+- [#938](https://github.com/iTwin/presentation/pull/938): Fixed hierarchy level size exceeded message that suggest applying filtering on hierarchy levels that do not support filtering.
+
+## 1.6.4
+
+### Patch Changes
+
+- [#909](https://github.com/iTwin/presentation/pull/909): Do not use `dev` versions of `@itwin/*` packages.
+- Updated dependencies:
+  - @itwin/unified-selection@1.4.1
+  - @itwin/presentation-hierarchies@1.4.2
+  - @itwin/presentation-shared@1.2.1
+
+## 1.6.3
+
+### Patch Changes
+
+- Updated dependencies:
+  - @itwin/unified-selection@1.4.0
+
+## 1.6.2
+
+### Patch Changes
+
+- [#873](https://github.com/iTwin/presentation/pull/873): Fix hierarchy level size exceeds limit info message wrapping in narrow Tree on Safari browser.
+- [#873](https://github.com/iTwin/presentation/pull/873): Do not require two clicks to expand node with filter buttons on touch devices.
+
+## 1.6.1
+
+### Patch Changes
+
+- [#866](https://github.com/iTwin/presentation/pull/866): Updated hierarchy level size exceeded info message styling in narrow tree component to avoid cutting out text.
+
 ## 1.6.0
 
 ### Minor Changes

package/README.md

@@ -2,7 +2,7 @@
 
 Copyright © Bentley Systems, Incorporated. All rights reserved. See LICENSE.md for license terms and full copyright notice.
 
-The `@itwin/presentation-hierarchies-react` package provides APIs for building a headless UI for rendering tree components based on data in an [iTwin.js iModel](https://www.itwinjs.org/learning/imodels/#imodel-overview). In addition, it delivers a set of [iTwinUI](https://itwinui.bentley.com/)-based components for rendering the tree.
+The `@itwin/presentation-hierarchies-react` package provides APIs for building a headless UI for rendering tree components based on data in an [iTwin.js iModel](https://www.itwinjs.org/learning/imodels/#imodel-overview). In addition, it delivers a set of [StrataKit](https://www.npmjs.com/package/@stratakit/bricks)-based components for rendering the tree.
 
 ## Headless UI
 
@@ -125,21 +125,18 @@ The returned object contains 2 functions, that should be called by the node rend
 
 Our [tree renderer implementation](#treerenderer) calls this hook and passes the callbacks to the [node renderer](#treenoderenderer), so there's no need to use it unless implementing a custom tree renderer.
 
-## iTwinUI components
+## StrataKit components
 
-While the package provides a headless UI, it also delivers a set of [iTwinUI](https://itwinui.bentley.com/)-based components for rendering the tree, which should cover majority of use cases. Consumers using the below components are required to provide a compatible `@itwin/itwinui-react` package, which is an optional peer dependency to this package.
+While the package provides a headless UI, it also delivers a set of [StrataKit](https://www.npmjs.com/package/@stratakit/bricks)-based components for rendering the tree, which should cover majority of use cases. Consumers using the below components are required to provide compatible `@stratakit/bricks`/`@stratakit/icons`/`@stratakit/foundations` packages, which are optional peer dependencies to this package.
 
 ### `TreeRenderer`
 
-The component is based on [iTwinUI Tree component](https://itwinui.bentley.com/docs/tree) and uses our [`TreeNodeRenderer`](#treenoderenderer) to render the nodes. In addition, it makes use of the [`useSelectionHandler` hook](#useselectionhandler-hook) to add selection modes' support.
-
-The iTwinUI Tree component requires a `getNode` function that maps nodes to `NodeData<TNode>` objects. Our `TreeRenderer` uses `createRenderedTreeNodeData` function for this purpose, and it's available for consumers as well, in case a custom iTwinUI Tree component implementation is being written.
+The component is based on StrataKit `Tree` component and uses our [`TreeNodeRenderer`](#treenoderenderer) to render the nodes. In addition, it makes use of the [`useSelectionHandler` hook](#useselectionhandler-hook) to add selection modes' support.
 
 ### `TreeNodeRenderer`
 
-The component is based on `TreeNode` component from iTwinUI library and supports the following features:
+The component is based on `Tree.Item` component from StrataKit library and supports the following features:
 
-- Rendering informational type of nodes (e.g. "No filter matches", "Too many nodes in a hierarchy level", etc.).
 - Reporting click and key down events for use with [`useSelectionHandler` hook](#useselectionhandler-hook).
 - Icons, selection, expand / collapse.
 - Action buttons to clear / set hierarchy level instance filter.
@@ -306,28 +303,31 @@ In case the `TreeNodeRenderer` component is used within a custom tree renderer,
 import { Props } from "@itwin/presentation-shared";
 
 import { ComponentPropsWithoutRef, useCallback } from "react";
-import { Tree } from "@itwin/itwinui-react";
-import {
-  createRenderedTreeNodeData,
-  LocalizationContextProvider,
-  RenderedTreeNode,
-  TreeNodeRenderer,
-  TreeRenderer,
-} from "@itwin/presentation-hierarchies-react";
-
-type TreeProps = ComponentPropsWithoutRef<typeof Tree<RenderedTreeNode>>;
+import { Tree } from "@stratakit/bricks";
+import { LocalizationContextProvider, TreeRenderer, useFlatTreeNodeList } from "@itwin/presentation-hierarchies-react";
+
 type TreeRendererProps = Props<typeof TreeRenderer>;
 
 function MyTreeRenderer({ rootNodes }: TreeRendererProps) {
-  const nodeRenderer = useCallback<TreeProps["nodeRenderer"]>((nodeProps) => {
-    return <TreeNodeRenderer {...nodeProps} onFilterClick={() => {}} expandNode={() => {}} />;
-  }, []);
-
-  const getNode = useCallback<TreeProps["getNode"]>((node) => createRenderedTreeNodeData(node, () => false), []);
+  const flatNodes = useFlatTreeNodeList(rootNodes);
 
   return (
     <LocalizationContextProvider localizedStrings={localizedStrings}>
-      <Tree<RenderedTreeNode> data={rootNodes} nodeRenderer={nodeRenderer} getNode={getNode} enableVirtualization={true} />
+      <Tree.Root>
+        {flatNodes.map((flatNode) =>
+          isPlaceholderNode(flatNode) ? (
+            <Tree.Item key={flatNode.id} aria-level={flatNode.level} aria-posinset={1} aria-setsize={1} label="Loading" />
+          ) : (
+            <Tree.Item
+              key={flatNode.id}
+              aria-level={flatNode.level}
+              aria-posinset={flatNode.posInLevel}
+              aria-setsize={flatNode.levelSize}
+              label={flatNode.label}
+            />
+          ),
+        )}
+      </Tree.Root>
     </LocalizationContextProvider>
   );
 }