27 lines
1.5 KiB
JavaScript
27 lines
1.5 KiB
JavaScript
'use client';
|
|
import * as React from 'react';
|
|
import { useTreeItem_unstable } from './useTreeItem';
|
|
import { renderTreeItem_unstable } from './renderTreeItem';
|
|
import { useTreeItemStyles_unstable } from './useTreeItemStyles.styles';
|
|
import { useTreeItemContextValues_unstable } from './useTreeItemContextValues';
|
|
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
|
|
/**
|
|
* The `TreeItem` component represents a single item in a tree.
|
|
* It expects a certain order of children to work properly: the first child should be the node itself,
|
|
* and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.
|
|
* This order follows the same order as document traversal for the TreeWalker API in JavaScript:
|
|
* https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.
|
|
* The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,
|
|
* which should be used as a direct child of TreeItem.
|
|
*
|
|
* When a TreeItem has nested child subtree, an expand/collapse control is displayed,
|
|
* allowing the user to show or hide the children.
|
|
*/ export const TreeItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
const state = useTreeItem_unstable(props, ref);
|
|
useTreeItemStyles_unstable(state);
|
|
useCustomStyleHook_unstable('useTreeItemStyles_unstable')(state);
|
|
const contextValues = useTreeItemContextValues_unstable(state);
|
|
return renderTreeItem_unstable(state, contextValues);
|
|
});
|
|
TreeItem.displayName = 'TreeItem';
|