Transfer with Undo

ProNew

A transfer list that offers Undo for a few seconds after every move, also on Ctrl or Cmd+Z, instead of asking to confirm. Use this when moves are frequent and a confirmation dialog would slow people down.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

undoMs8000

Guide and examples

When to use it

Use it for mail folders, sync settings and dashboards where lists are rearranged often and a mistake is cheap to reverse.

Do not use it for moves with side effects that cannot be reversed (sending, deleting for good): ask first, as in confirm-removal-transfer.

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.
`titles`	`[string, string]`	`["Available", "Selected"]`	List names.
`defaultValue`	`string[]`	`[]`	Items on the right at the start.
`undoMs`	`number`	`8000`	How long Undo stays.
`onValueChange`	`(ids) => void`	-	Called for moves and for undos.

Accessibility

The bar is a polite live region: it says what moved and holds a real Undo button.
Ctrl or Cmd+Z works while focus is anywhere inside the pattern.
Undo and expiry are announced; nothing steals focus.

Testing

The pattern ships with a Testing Library test (transfer-with-undo.test.tsx) that covers applying a move, Undo, Ctrl+Z, expiry and replacing the bar.

Guide and examples

When to use it

Use it for mail folders, sync settings and dashboards where lists are rearranged often and a mistake is cheap to reverse.

Do not use it for moves with side effects that cannot be reversed (sending, deleting for good): ask first, as in confirm-removal-transfer.

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.
`titles`	`[string, string]`	`["Available", "Selected"]`	List names.
`defaultValue`	`string[]`	`[]`	Items on the right at the start.
`undoMs`	`number`	`8000`	How long Undo stays.
`onValueChange`	`(ids) => void`	-	Called for moves and for undos.

Accessibility

The bar is a polite live region: it says what moved and holds a real Undo button.
Ctrl or Cmd+Z works while focus is anywhere inside the pattern.
Undo and expiry are announced; nothing steals focus.

Testing

The pattern ships with a Testing Library test (transfer-with-undo.test.tsx) that covers applying a move, Undo, Ctrl+Z, expiry and replacing the bar.