Flag Undo Delete

ProNew

A list where deleting removes the item at once and raises a flag with an Undo action that puts it back in the same position.

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.

undoMs1

Guide and examples

When to use it

Use this when deleting is common and cheap to reverse: removing a draft, a saved filter, a list item. People move faster when they are not asked and can still take it back.

Do not use it when the deletion triggers side effects that cannot wait for a delay (emails sent, access revoked) or cannot be reversed at all.

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	Required	Description
`items`	`UndoItem[]`	required	-
`onCommit`	`(item: UndoItem) => void`	optional	Called once the undo window passes without an undo.
`undoMs`	`number`	optional	Undo window in ms. Default 6000.

Accessibility

The flag is a status region, so the deletion and the Undo action are announced.
Undo is a real button; the timer pauses while the flag has hover or focus.
Undo returns the row at its old index, so the list does not reshuffle under the person.

Testing

The pattern ships with a Testing Library test (flag-undo-delete.test.tsx) that covers immediate removal, restoring at the old index and committing after the undo window.

Guide and examples

When to use it

Use this when deleting is common and cheap to reverse: removing a draft, a saved filter, a list item. People move faster when they are not asked and can still take it back.

Do not use it when the deletion triggers side effects that cannot wait for a delay (emails sent, access revoked) or cannot be reversed at all.

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	Required	Description
`items`	`UndoItem[]`	required	-
`onCommit`	`(item: UndoItem) => void`	optional	Called once the undo window passes without an undo.
`undoMs`	`number`	optional	Undo window in ms. Default 6000.

Accessibility

The flag is a status region, so the deletion and the Undo action are announced.
Undo is a real button; the timer pauses while the flag has hover or focus.
Undo returns the row at its old index, so the list does not reshuffle under the person.

Testing

The pattern ships with a Testing Library test (flag-undo-delete.test.tsx) that covers immediate removal, restoring at the old index and committing after the undo window.