Share Permissions Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the drive: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Share 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 PeopleFields component and share the block's state, so someone added in the copy is 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.

Because a popup opened from inside a modal fights the modal. A combobox's list is portalled out of the dialog, so on some libraries the dialog counts a click on it as outside and closes, and React Aria makes it inert. Here the suggestions are a Listbox in the same box as the people list: while the field has text the box shows the matches, and when it is empty it shows who has access, so the dialog never changes height. Arrow Down in the field moves into the list, the arrow keys move through it, Enter picks, and Enter in the field takes the top match.

People who have access to the file only because they have access to the folder. They are shown so the count is true, with a lock and their role, and they have no select and no Remove: changing them is a job for the folder's own sharing. The owner row is fixed the same way. The line above the list counts the owner, the inherited people and everyone you added, and says the new count after each add, change or removal.

Yes. The real dialog is named by its title and described by its sentence, focus starts on the add field, and Escape, Cancel and the close button return focus to the Share button. The people list is a keyboard-reachable scroll region, every role select and Remove has the person's name in its label, and what changes is spoken once in a polite status line (inside the dialog while it is open). The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange.

Everything. Nobody is invited and nothing is shared: the directory of eight people, the owner and the inherited rows are typed in the file, an address typed into the field only becomes a row in this block's state, and Done writes the list to the drawn drive. In your app search your directory on the server as the person types, send the invite from your API, check the role on every request, and read the inherited people from the folder's own permissions.

The copy shown on load docks to the foot of the page as a bottom sheet with its buttons pinned and the content scrolling above them, the add field first. Each person's row gets a second line for the role select so a name is never cut. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.