# TreeItem

**Kind:** Component

**Source:** [`atloria-monorepo/packages/ui-react/src/components/NavigationTree.tsx`](https://github.com/sherkety/atloria/blob/main/atloria-monorepo/packages/ui-react/src/components/NavigationTree.tsx#L59)

## Props

| Name | Type | Required | Default |
|---|---|---|---|
| `node` | `DocumentTreeNode` | ✓ | - |
| `level` | `number` | ✓ | - |
| `activeId` | `string` | - | - |
| `expandedIds` | `string[]` | ✓ | - |
| `onToggleExpand` | `Function` | ✓ | - |
| `onItemClick` | `Function` | - | - |
| `showStateIndicator` | `boolean` | - | - |
| `focusedId` | `string | null` | ✓ | - |
| `onFocusChange` | `Function` | ✓ | - |
| `onKeyDown` | `Function` | ✓ | - |
| `itemRefs` | `unknown` | ✓ | - |

## Diagram

```mermaid
graph TD
    component_TreeItem_636541b4["TreeItem"]
    class component_TreeItem_636541b4 rootComponent
```

## Relationships

- RENDERS → `TreeItem`
- USES_HOOK → `useCallback`

## Referenced By

- `TreeItem` (RENDERS)
- `NavigationTree` (RENDERS)