feat(react-headless-components-preview): add headless Tree component family

change/@fluentui-react-tree-bbd9207d-d370-4635-b213-bbe2b2d53a24.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Export useTreeItemPersonaLayoutContextValues_unstable and TreeItemPersonaLayoutContextValues from @fluentui/react-tree",
+  "packageName": "@fluentui/react-tree",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2026-04-26T20:21:03.202Z"
+}

packages/react-components/react-headless-components-preview/library/package.json

@@ -50,6 +50,7 @@
     "@fluentui/react-tabs": "^9.11.2",
     "@fluentui/react-tags": "^9.7.19",
     "@fluentui/react-textarea": "^9.7.0",
+    "@fluentui/react-tree": "^9.15.16",
     "@fluentui/react-toolbar": "^9.7.7",
     "@fluentui/react-utilities": "^9.26.2",
     "@swc/helpers": "^0.5.1"

packages/react-components/react-headless-components-preview/library/src/Tree.ts

@@ -0,0 +1,72 @@
+export { Tree, renderTree, useTree, useTreeContextValues } from './components/Tree';
+export type {
+  TreeSlots,
+  TreeProps,
+  TreeState,
+  TreeContextValues,
+  TreeCheckedChangeData,
+  TreeCheckedChangeEvent,
+  TreeNavigationData_unstable,
+  TreeNavigationEvent_unstable,
+  TreeNavigationDataParam,
+  TreeNavigationMode,
+  TreeOpenChangeData,
+  TreeOpenChangeEvent,
+  TreeSelectionValue,
+} from './components/Tree';
+
+export {
+  FlatTree,
+  renderFlatTree,
+  useFlatTree,
+  useFlatTreeContextValues,
+  useHeadlessFlatTree,
+} from './components/Tree/FlatTree';
+export type {
+  FlatTreeSlots,
+  FlatTreeProps,
+  FlatTreeState,
+  FlatTreeContextValues,
+  HeadlessFlatTree,
+  HeadlessFlatTreeItem,
+  HeadlessFlatTreeItemProps,
+  HeadlessFlatTreeOptions,
+} from './components/Tree/FlatTree';
+
+export { FlatTreeItem } from './components/Tree/FlatTreeItem';
+export type { FlatTreeItemProps } from './components/Tree/FlatTreeItem';
+
+export { TreeItem, renderTreeItem, useTreeItem, useTreeItemContextValues } from './components/Tree/TreeItem';
+export type {
+  TreeItemSlots,
+  TreeItemProps,
+  TreeItemState,
+  TreeItemContextValues,
+  TreeItemType,
+  TreeItemValue,
+  TreeItemCSSProperties,
+  TreeItemOpenChangeData,
+  TreeItemOpenChangeEvent,
+} from './components/Tree/TreeItem';
+
+export { TreeItemLayout, renderTreeItemLayout, useTreeItemLayout } from './components/Tree/TreeItemLayout';
+export type {
+  TreeItemLayoutSlots,
+  TreeItemLayoutProps,
+  TreeItemLayoutState,
+  TreeItemLayoutActionSlotProps,
+  TreeItemLayoutActionVisibilityChangeData,
+} from './components/Tree/TreeItemLayout';
+
+export {
+  TreeItemPersonaLayout,
+  renderTreeItemPersonaLayout,
+  useTreeItemPersonaLayout,
+  useTreeItemPersonaLayoutContextValues,
+} from './components/Tree/TreeItemPersonaLayout';
+export type {
+  TreeItemPersonaLayoutSlots,
+  TreeItemPersonaLayoutProps,
+  TreeItemPersonaLayoutState,
+  TreeItemPersonaLayoutContextValues,
+} from './components/Tree/TreeItemPersonaLayout';

packages/react-components/react-headless-components-preview/library/src/components/Tree/FlatTree/FlatTree.tsx

@@ -0,0 +1,13 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { FlatTreeProps } from './FlatTree.types';
+import { useFlatTree, useFlatTreeContextValues } from './useFlatTree';
+import { renderFlatTree } from './renderFlatTree';
+
+export const FlatTree: ForwardRefComponent<FlatTreeProps> = React.forwardRef((props, ref) => {
+  const state = useFlatTree(props, ref);
+  const contextValues = useFlatTreeContextValues(state);
+  return renderFlatTree(state, contextValues);
+});
+FlatTree.displayName = 'FlatTree';

packages/react-components/react-headless-components-preview/library/src/components/Tree/FlatTree/FlatTree.types.ts

@@ -0,0 +1,10 @@
+export type {
+  FlatTreeSlots,
+  FlatTreeProps,
+  FlatTreeState,
+  FlatTreeContextValues,
+  HeadlessFlatTree,
+  HeadlessFlatTreeItem,
+  HeadlessFlatTreeItemProps,
+  HeadlessFlatTreeOptions,
+} from '@fluentui/react-tree';

packages/react-components/react-headless-components-preview/library/src/components/Tree/FlatTree/index.ts

@@ -0,0 +1,13 @@
+export { FlatTree } from './FlatTree';
+export { renderFlatTree } from './renderFlatTree';
+export { useFlatTree, useFlatTreeContextValues, useHeadlessFlatTree } from './useFlatTree';
+export type {
+  FlatTreeSlots,
+  FlatTreeProps,
+  FlatTreeState,
+  FlatTreeContextValues,
+  HeadlessFlatTree,
+  HeadlessFlatTreeItem,
+  HeadlessFlatTreeItemProps,
+  HeadlessFlatTreeOptions,
+} from './FlatTree.types';

packages/react-components/react-headless-components-preview/library/src/components/Tree/FlatTree/renderFlatTree.ts

@@ -0,0 +1,2 @@
+'use client';
+export { renderFlatTree_unstable as renderFlatTree } from '@fluentui/react-tree';

packages/react-components/react-headless-components-preview/library/src/components/Tree/FlatTree/useFlatTree.ts

@@ -0,0 +1,12 @@
+'use client';
+import {
+  useFlatTree_unstable,
+  useFlatTreeContextValues_unstable,
+  useHeadlessFlatTree_unstable,
+} from '@fluentui/react-tree';
+import type { FlatTreeState, FlatTreeContextValues } from './FlatTree.types';
+export const useFlatTree = useFlatTree_unstable;
+export const useFlatTreeContextValues = useFlatTreeContextValues_unstable as (
+  state: FlatTreeState,
+) => FlatTreeContextValues;
+export const useHeadlessFlatTree = useHeadlessFlatTree_unstable;

packages/react-components/react-headless-components-preview/library/src/components/Tree/FlatTreeItem/FlatTreeItem.tsx

@@ -0,0 +1,2 @@
+'use client';
+export { FlatTreeItem } from '@fluentui/react-tree';

packages/react-components/react-headless-components-preview/library/src/components/Tree/FlatTreeItem/FlatTreeItem.types.ts

@@ -0,0 +1 @@
+export type { FlatTreeItemProps } from '@fluentui/react-tree';

packages/react-components/react-headless-components-preview/library/src/components/Tree/FlatTreeItem/index.ts

@@ -0,0 +1,2 @@
+export { FlatTreeItem } from './FlatTreeItem';
+export type { FlatTreeItemProps } from './FlatTreeItem.types';

packages/react-components/react-headless-components-preview/library/src/components/Tree/Tree.test.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Tree } from './Tree';
+
+describe('Tree', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Tree />);
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('applies className', () => {
+    const { container } = render(<Tree className="custom" />);
+    expect(container.firstChild).toHaveClass('custom');
+  });
+});

packages/react-components/react-headless-components-preview/library/src/components/Tree/Tree.tsx

@@ -0,0 +1,13 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { TreeProps } from './Tree.types';
+import { useTree, useTreeContextValues } from './useTree';
+import { renderTree } from './renderTree';
+
+export const Tree: ForwardRefComponent<TreeProps> = React.forwardRef((props, ref) => {
+  const state = useTree(props, ref);
+  const contextValues = useTreeContextValues(state);
+  return renderTree(state, contextValues);
+});
+Tree.displayName = 'Tree';

packages/react-components/react-headless-components-preview/library/src/components/Tree/Tree.types.ts

@@ -0,0 +1,15 @@
+export type {
+  TreeSlots,
+  TreeProps,
+  TreeState,
+  TreeContextValues,
+  TreeCheckedChangeData,
+  TreeCheckedChangeEvent,
+  TreeNavigationData_unstable,
+  TreeNavigationEvent_unstable,
+  TreeNavigationDataParam,
+  TreeNavigationMode,
+  TreeOpenChangeData,
+  TreeOpenChangeEvent,
+  TreeSelectionValue,
+} from '@fluentui/react-tree';

packages/react-components/react-headless-components-preview/library/src/components/Tree/TreeItem/TreeItem.tsx

@@ -0,0 +1,13 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { TreeItemProps } from './TreeItem.types';
+import { useTreeItem, useTreeItemContextValues } from './useTreeItem';
+import { renderTreeItem } from './renderTreeItem';
+
+export const TreeItem: ForwardRefComponent<TreeItemProps> = React.forwardRef((props, ref) => {
+  const state = useTreeItem(props, ref);
+  const contextValues = useTreeItemContextValues(state);
+  return renderTreeItem(state, contextValues);
+});
+TreeItem.displayName = 'TreeItem';

packages/react-components/react-headless-components-preview/library/src/components/Tree/TreeItem/TreeItem.types.ts

@@ -0,0 +1,11 @@
+export type {
+  TreeItemSlots,
+  TreeItemProps,
+  TreeItemState,
+  TreeItemContextValues,
+  TreeItemType,
+  TreeItemValue,
+  TreeItemCSSProperties,
+  TreeItemOpenChangeData,
+  TreeItemOpenChangeEvent,
+} from '@fluentui/react-tree';

packages/react-components/react-headless-components-preview/library/src/components/Tree/TreeItem/index.ts

@@ -0,0 +1,14 @@
+export { TreeItem } from './TreeItem';
+export { renderTreeItem } from './renderTreeItem';
+export { useTreeItem, useTreeItemContextValues } from './useTreeItem';
+export type {
+  TreeItemSlots,
+  TreeItemProps,
+  TreeItemState,
+  TreeItemContextValues,
+  TreeItemType,
+  TreeItemValue,
+  TreeItemCSSProperties,
+  TreeItemOpenChangeData,
+  TreeItemOpenChangeEvent,
+} from './TreeItem.types';

packages/react-components/react-headless-components-preview/library/src/components/Tree/TreeItem/renderTreeItem.ts

@@ -0,0 +1,2 @@
+'use client';
+export { renderTreeItem_unstable as renderTreeItem } from '@fluentui/react-tree';

packages/react-components/react-headless-components-preview/library/src/components/Tree/TreeItem/useTreeItem.ts

@@ -0,0 +1,7 @@
+'use client';
+import { useTreeItem_unstable, useTreeItemContextValues_unstable } from '@fluentui/react-tree';
+import type { TreeItemState, TreeItemContextValues } from './TreeItem.types';
+export const useTreeItem = useTreeItem_unstable;
+export const useTreeItemContextValues = useTreeItemContextValues_unstable as (
+  state: TreeItemState,
+) => TreeItemContextValues;

packages/react-components/react-headless-components-preview/library/src/components/Tree/TreeItemLayout/TreeItemLayout.tsx

@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { TreeItemLayoutProps } from './TreeItemLayout.types';
+import { useTreeItemLayout } from './useTreeItemLayout';
+import { renderTreeItemLayout } from './renderTreeItemLayout';
+
+export const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps> = React.forwardRef((props, ref) => {
+  return renderTreeItemLayout(useTreeItemLayout(props, ref));
+});
+TreeItemLayout.displayName = 'TreeItemLayout';

packages/react-components/react-headless-components-preview/library/src/components/Tree/TreeItemLayout/TreeItemLayout.types.ts

@@ -0,0 +1,7 @@
+export type {
+  TreeItemLayoutSlots,
+  TreeItemLayoutProps,
+  TreeItemLayoutState,
+  TreeItemLayoutActionSlotProps,
+  TreeItemLayoutActionVisibilityChangeData,
+} from '@fluentui/react-tree';

packages/react-components/react-headless-components-preview/library/src/components/Tree/TreeItemLayout/index.ts

@@ -0,0 +1,10 @@
+export { TreeItemLayout } from './TreeItemLayout';
+export { renderTreeItemLayout } from './renderTreeItemLayout';
+export { useTreeItemLayout } from './useTreeItemLayout';
+export type {
+  TreeItemLayoutSlots,
+  TreeItemLayoutProps,
+  TreeItemLayoutState,
+  TreeItemLayoutActionSlotProps,
+  TreeItemLayoutActionVisibilityChangeData,
+} from './TreeItemLayout.types';

packages/react-components/react-headless-components-preview/library/src/components/Tree/TreeItemLayout/renderTreeItemLayout.ts

@@ -0,0 +1,2 @@
+'use client';
+export { renderTreeItemLayout_unstable as renderTreeItemLayout } from '@fluentui/react-tree';

packages/react-components/react-headless-components-preview/library/src/components/Tree/TreeItemLayout/useTreeItemLayout.ts

@@ -0,0 +1,2 @@
+'use client';
+export { useTreeItemLayout_unstable as useTreeItemLayout } from '@fluentui/react-tree';

packages/react-components/react-headless-components-preview/library/src/components/Tree/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx

@@ -0,0 +1,13 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types';
+import { useTreeItemPersonaLayout, useTreeItemPersonaLayoutContextValues } from './useTreeItemPersonaLayout';
+import { renderTreeItemPersonaLayout } from './renderTreeItemPersonaLayout';
+
+export const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps> = React.forwardRef((props, ref) => {
+  const state = useTreeItemPersonaLayout(props, ref);
+  const contextValues = useTreeItemPersonaLayoutContextValues(state);
+  return renderTreeItemPersonaLayout(state, contextValues);
+});
+TreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';

packages/react-components/react-headless-components-preview/library/src/components/Tree/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts

@@ -0,0 +1,6 @@
+export type {
+  TreeItemPersonaLayoutSlots,
+  TreeItemPersonaLayoutProps,
+  TreeItemPersonaLayoutState,
+  TreeItemPersonaLayoutContextValues,
+} from '@fluentui/react-tree';

packages/react-components/react-headless-components-preview/library/src/components/Tree/TreeItemPersonaLayout/index.ts

@@ -0,0 +1,9 @@
+export { TreeItemPersonaLayout } from './TreeItemPersonaLayout';
+export { renderTreeItemPersonaLayout } from './renderTreeItemPersonaLayout';
+export { useTreeItemPersonaLayout, useTreeItemPersonaLayoutContextValues } from './useTreeItemPersonaLayout';
+export type {
+  TreeItemPersonaLayoutSlots,
+  TreeItemPersonaLayoutProps,
+  TreeItemPersonaLayoutState,
+  TreeItemPersonaLayoutContextValues,
+} from './TreeItemPersonaLayout.types';

packages/react-components/react-headless-components-preview/library/src/components/Tree/TreeItemPersonaLayout/renderTreeItemPersonaLayout.ts

@@ -0,0 +1,2 @@
+'use client';
+export { renderTreeItemPersonaLayout_unstable as renderTreeItemPersonaLayout } from '@fluentui/react-tree';

packages/react-components/react-headless-components-preview/library/src/components/Tree/TreeItemPersonaLayout/useTreeItemPersonaLayout.ts

@@ -0,0 +1,10 @@
+'use client';
+import {
+  useTreeItemPersonaLayout_unstable,
+  useTreeItemPersonaLayoutContextValues_unstable,
+} from '@fluentui/react-tree';
+import type { TreeItemPersonaLayoutState, TreeItemPersonaLayoutContextValues } from './TreeItemPersonaLayout.types';
+export const useTreeItemPersonaLayout = useTreeItemPersonaLayout_unstable;
+export const useTreeItemPersonaLayoutContextValues = useTreeItemPersonaLayoutContextValues_unstable as (
+  state: TreeItemPersonaLayoutState,
+) => TreeItemPersonaLayoutContextValues;

packages/react-components/react-headless-components-preview/library/src/components/Tree/index.ts

@@ -0,0 +1,18 @@
+export { Tree } from './Tree';
+export { renderTree } from './renderTree';
+export { useTree, useTreeContextValues } from './useTree';
+export type {
+  TreeSlots,
+  TreeProps,
+  TreeState,
+  TreeContextValues,
+  TreeCheckedChangeData,
+  TreeCheckedChangeEvent,
+  TreeNavigationData_unstable,
+  TreeNavigationEvent_unstable,
+  TreeNavigationDataParam,
+  TreeNavigationMode,
+  TreeOpenChangeData,
+  TreeOpenChangeEvent,
+  TreeSelectionValue,
+} from './Tree.types';

packages/react-components/react-headless-components-preview/library/src/components/Tree/renderTree.ts

@@ -0,0 +1,2 @@
+'use client';
+export { renderTree_unstable as renderTree } from '@fluentui/react-tree';

packages/react-components/react-headless-components-preview/library/src/components/Tree/useTree.ts

@@ -0,0 +1,5 @@
+'use client';
+import { useTree_unstable, useTreeContextValues_unstable } from '@fluentui/react-tree';
+import type { TreeState, TreeContextValues } from './Tree.types';
+export const useTree = useTree_unstable;
+export const useTreeContextValues = useTreeContextValues_unstable as (state: TreeState) => TreeContextValues;