Edit Record Dialog Block for React

So you can see it without a click. On load the sheet 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 Edit items button opens the real Sheet, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same RecordFields component and share the block's state, so a name typed in the copy is there in the real one. In your app keep the Sheet and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

The catalog's sheet sides are physical, a left and a right, so in a right-to-left page a "right" sheet would open at the wrong edge. The block reads the page's direction when the sheet opens and picks the side that is the end of the line: the right in English, the left in Arabic or Hebrew. On a phone it fills the width. The copy shown on load uses logical positions, so it is at the end edge on its own.

The name can't be empty, and the quantity and reorder level must be whole numbers, up to 999 and 200. The checks run when you save, not while you type. A failed save keeps you where you are, takes the place of the hint at the top with a sentence such as "Fix 2 fields to save: Name, Reorder level", marks each field with its own problem under it, and moves focus to the first one. The summary links are real buttons, so each one focuses its field.

With the previous and next buttons or with Save and next. The two arrows are quiet while the form has unsaved changes, and pressing one says "Save or reset first" in the polite status message, so an edit is never lost by a click. On the last item the main button reads "Save and close". Moving puts focus in the Name field of the next item, and the table behind the sheet redraws the saved row.

The eight items are typed in ITEMS and saved into local state; the table behind the sheet is drawn from that state, and a reload restores the originals. Nothing is sent. In your app post the item in the save handler, show the server's refusal on the field it names, and update the row from the response; keep the previous and next guard so an unsaved edit is not dropped.

Yes. The real sheet is named by its title and described by its sentence, focus starts in the Name field and stays inside until it closes, and Escape and the close button return focus to Edit items. The trigger is passed to SheetTrigger through render, and the sheet is controlled with open and onOpenChange. Ctrl or Command with Enter saves from any field. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus on Edit items.