Permission Inheritance Tree

ProNew

A checkbox tree where granting a folder or group grants everything below it, shown ticked and locked as inherited. Use this when access flows down a hierarchy and people must see what is inherited and what is explicit.

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 folder, project and workspace sharing where permissions flow downwards.

Do not use it when children can be denied separately from the parent (that needs an allow and deny model, not a single tick).

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
`nodes`	`TreeNode[]`	-	The hierarchy.
`value / defaultValue / onValueChange`	`string[]`	`[]`	Directly granted ids. Grants covered by a parent are removed.

Accessibility

Inherited rows are aria-checked="true" and aria-disabled, and their name ends in "(inherited)", so the reason is spoken.
Locked rows stay focusable so keyboard users can read them.
The change handler gets direct grants only, which is what you store.

Testing

The pattern ships with a Testing Library test (permission-inheritance-tree.test.tsx) that covers inherited rows, granting and revoking, locked rows and redundant grants.

Guide and examples

When to use it

Use it for folder, project and workspace sharing where permissions flow downwards.

Do not use it when children can be denied separately from the parent (that needs an allow and deny model, not a single tick).

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
`nodes`	`TreeNode[]`	-	The hierarchy.
`value / defaultValue / onValueChange`	`string[]`	`[]`	Directly granted ids. Grants covered by a parent are removed.

Accessibility

Inherited rows are aria-checked="true" and aria-disabled, and their name ends in "(inherited)", so the reason is spoken.
Locked rows stay focusable so keyboard users can read them.
The change handler gets direct grants only, which is what you store.

Testing

The pattern ships with a Testing Library test (permission-inheritance-tree.test.tsx) that covers inherited rows, granting and revoking, locked rows and redundant grants.