Confirm Removal Transfer

ProNew

A transfer list that moves items freely, but asks first when something that is in use is taken out, naming what depends on it. Use this when removing an item has consequences elsewhere and adding does not.

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 shipping origins, notification rules, enabled integrations and other lists where an item may be referenced elsewhere.

Do not use it when no item is ever in use (use transfer-list) or for cheap moves that can be undone (use transfer-with-undo).

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
`items`	`TransferItem[]`	-	The things to move.
`usage`	`Record<string, string>`	-	Id to a short description of what depends on it.
`titles`	`[string, string]`	`["Available", "Selected"]`	List names.
`defaultValue`	`string[]`	`[]`	Items on the right.
`onValueChange`	`(ids) => void`	-	Called when a move is applied.

Accessibility

The confirmation is an alertdialog named by the question and described by the list of dependencies.
The default action is Keep them (Cancel); the destructive action is named "Remove anyway".
Until confirmed, the lists do not change.

Testing

The pattern ships with a Testing Library test (confirm-removal-transfer.test.tsx) that covers free adds, free removal of unused items, the confirmation, cancel and confirm.

Guide and examples

When to use it

Use it for shipping origins, notification rules, enabled integrations and other lists where an item may be referenced elsewhere.

Do not use it when no item is ever in use (use transfer-list) or for cheap moves that can be undone (use transfer-with-undo).

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
`items`	`TransferItem[]`	-	The things to move.
`usage`	`Record<string, string>`	-	Id to a short description of what depends on it.
`titles`	`[string, string]`	`["Available", "Selected"]`	List names.
`defaultValue`	`string[]`	`[]`	Items on the right.
`onValueChange`	`(ids) => void`	-	Called when a move is applied.

Accessibility

The confirmation is an alertdialog named by the question and described by the list of dependencies.
The default action is Keep them (Cancel); the destructive action is named "Remove anyway".
Until confirmed, the lists do not change.

Testing

The pattern ships with a Testing Library test (confirm-removal-transfer.test.tsx) that covers free adds, free removal of unused items, the confirmation, cancel and confirm.