People Directory Tree

ProNew

A department tree you can search by name, role or email, which keeps the departments that hold a match and opens them. Use this when finding a person is the task and the tree is only a way to browse.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it for company directories and people pickers where users know a role or an email better than a name.

Do not use it for a very large company (search on the server) or for choosing several people (use a transfer list).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`departments`	`TreeNode<Employee>[]`	-	Departments with people carrying `data: { role, email }`.
`onSelect`	`(person) => void`	-	Enter or double click on a person.

Accessibility

The search field has an accessible name; the match count is a status message.
A person's role is part of the row's name ("Tom, Illustrator").
Matched text is marked with <mark> in the name and the role.

Testing

The pattern ships with a Testing Library test (people-directory-tree.test.tsx) that covers matching on name, role and email, opening the department and selecting a person.

Guide and examples

When to use it

Use it for company directories and people pickers where users know a role or an email better than a name.

Do not use it for a very large company (search on the server) or for choosing several people (use a transfer list).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`departments`	`TreeNode<Employee>[]`	-	Departments with people carrying `data: { role, email }`.
`onSelect`	`(person) => void`	-	Enter or double click on a person.

Accessibility

The search field has an accessible name; the match count is a status message.
A person's role is part of the row's name ("Tom, Illustrator").
Matched text is marked with <mark> in the name and the role.

Testing

The pattern ships with a Testing Library test (people-directory-tree.test.tsx) that covers matching on name, role and email, opening the department and selecting a person.