Team Roles 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 Change roles 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 RolesFields component and share the block's state, so a member ticked in the copy is ticked 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.

After every tick and every choice the dialog counts the Owners the workspace would have if you applied now: the ticked members get the new role, the others keep theirs. If that is zero, the select turns invalid, an alert says "A workspace needs at least one Owner", and Apply stays on the page with a quiet look. Pressing it names the problem and moves focus to the role select. Untick the Owner, or give the Owner role to someone else in the same change, and the guard lets go.

It reads the number of ticked members: none is unchecked, all seven is checked, anything between is a dash, which assistive technology hears as mixed. Pressing it ticks everyone, or clears everyone when all are ticked. The rows show what would happen to each ticked member ("Becomes Editor") in place of their email, so you can check the selection without leaving the list, and a line counts "3 of 7 selected".

Yes. The real dialog is named by its title and described by its sentence, focus starts on the select-all box, and Escape, Cancel and the close button return focus to the Change roles button. Every box is named for its member, the role select is a native select, the permissions are a description list with the answer in words as well as an icon, 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. The seven members, the four roles and what each can do are typed in the file, and Apply only changes this block's state and the drawn table. In your app send the change to your API, enforce the last-owner rule on the server as well (the page's guard is a courtesy, not a lock), and show the permissions from the same table the server checks.

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 members first, then the role, what it allows, the sentence and the guard in one column. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.