Reorder Items Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Reorder sections button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same OrderBody component and share the block's state, so what you moved in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Tab to a row's grip. Space or Enter lifts it (the grip shows as pressed and a line says "Lifted Pricing, position 4 of 5"), Up and Down move it one place, Home and End send it to the first or last place, and Space or Enter drops it. Escape while a row is lifted puts the list back as it was when you lifted it and keeps the dialog open; a second Escape closes the dialog. Focus stays on the grip as the row moves, and each move is said in a polite message with the new position out of five.

Every row has Move up and Move down buttons, which are the whole interaction for a phone and for anyone who prefers pressing to holding: focus stays on the button you pressed, or moves to its partner when the row reaches an end. The grip also takes a pointer drag, written with pointer events and a transform, no drag library: the row follows the pointer, the others step aside, and releasing drops it. Drag is the extra, never the only way.

Nothing leaves the tab. Save order copies the order into the drawn page's bands and says so in a polite message, and says "nothing to save" when the order is unchanged. Reset order goes back to the shipped order, and Cancel or Escape throws the unsaved order away. In your app keep the list of ids in state as here and post it from save; the server's order is the one to render back.

Yes. The real dialog is named by its title and described by its sentence, focus starts on the first grip and stays inside until it closes, and Escape, Cancel and the close button return focus to Reorder sections. Every grip is named with its section and position, "Reorder Pricing, position 4 of 5", and described by the key instructions, so nothing depends on seeing the drag. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the button.