File Rename 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 Rename 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 RenameFields 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 Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

checksOf returns the four rules for the name as it stands: it is not empty, it has none of the characters a folder refuses, the whole name with its extension is at most 120 characters, and no other file in the drawer already has it, whatever the capitals. Each row says Passes or Fails for screen readers as well as showing a tick or a cross. The checks run on every keystroke, and pressing Rename with a failing check keeps the dialog open, names the first problem and puts focus back in the field. Mirror the same rules on your server: it has the last word.

Changing an extension can make a file open in the wrong app or in none, so the dialog keeps it as part of the name you cannot type over. The Change extension switch turns it into a small field next to the name, with its warning in place of the usual line; turning the switch off puts the original extension back. The name and the extension are checked together, so a dot in the extension field is removed as you type.

Here it changes the name shown on the selected row of the drawn list and in the header's sentence, closes the dialog and says in a polite status message that nothing was renamed on a disk. In your app call your API in rename, keep the button busy until it answers, and update the row only on success; a name the server refuses goes in the field's error line, with the dialog open.

Yes. F2 opens the real dialog while focus is anywhere inside the block, as a file manager does, and Escape, Cancel and the close button return focus to Rename. Focus starts in the name field. 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. The switch and the checks are named, and one polite status message reports the result.

The copy shown on load docks to the foot of the page as a bottom sheet, its actions pinned at the bottom with Rename on top, and the field and the checks scroll above them. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.