shadcn.io is not affiliated with official shadcn/ui
Bulk Update Success Block for React Aria
A confirmation panel for a bulk edit: a drawn contacts list whose twelve owner cells were just reassigned, with an undo bar docked at the foot of the stage whose Undo restores every cell, then offers Redo, and a button that applies the edit again.
Installation
Overview
Give a bulk edit a way back that does not run out, with this undo bar for React with React Aria. It is the panel Pipeloom, a sales pipeline tool, shows after twelve contacts were reassigned to one owner: a header with one action, the Shine Button Reassign owner, over one framed stage that holds a drawing of the contacts list. Drawn names, companies and stages stand for the rows, and the Owner column is text, so you can see the cells change. A card-styled bar docks at the foot of the stage with the result, an Undo Button that puts every cell back and then becomes Redo, and a Dismiss button. For bulk edits, merges, moves and any change worth taking back.
FAQ
What stays in the page, and how do I wire it for real?
Everything: nothing was saved and the contacts are drawn shapes with typed sample owners. Undo, Redo and Reassign owner change the page's state and say so in a polite status line. To wire it, keep the previous owners from your edit's response, make Undo send them back to your server and Redo send the new owner again, and replace the drawing with your own table.
Why is the undo bar drawn, and why does it never time out?
A real toast portals out of the page and would escape the frame, so the bar is drawn inside the stage. In your app use your toast component with an Undo action. The bar here has no timer: a way back that disappears after a few seconds fails people who need longer, so it stays until you dismiss it, and Reassign owner in the header brings it back.
How do Undo and Redo work?
They are one button, so focus stays on it. Undo puts each of the twelve owner cells back to its own previous owner (Gideon P., Ansel R. or Tove M.) and the bar says the contacts are back with their owners; the button then reads Redo, which sets them to the new owner again. Each press is announced.
What does Reassign owner do?
It applies the edit again. With the cells already reassigned and the bar shown, it only says so; after an Undo, or after you dismissed the bar, it sets the twelve cells to the new owner and shows the bar again.