Share Link Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the file: 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 LinkFields component and share the block's state, so a switch flipped in the copy is flipped 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.

The link is built from the choices, not typed once per state: the file's address, then ?role= and the access you picked, then &until= and the end day when it expires. The end day is the as-of day in the file (15 October 2026) plus 7 or 30 days, by UTC arithmetic, so it never moves with your clock. The sentence under the selects says the same thing in words: who can do what, and when the link stops working. Turn the switch off and the field says so, the selects wait and Copy link explains what is missing.

It draws what a person with the link would find. With Can view or Can comment the toolbar behind the dialog dims and a chip names the limit; with Can edit nothing is locked and the sentence says so. It only changes the drawing and the status line, because this demo has no real file, and it stays on after you close the dialog so you can look at the result. Turn the link off and the preview waits, since nobody could open the file.

Yes. The browser's clipboard is real, so pressing it puts the whole link, suffix included, on your clipboard, the button reads Copied for three seconds and the status line says what was copied. If the browser refuses (a page without permission), a short alert under the field says so and asks you to select the link and copy it by hand. The link itself is typed in the file and points nowhere: in your app create the link on your server and return it.

Yes. The real dialog is named by its title and described by its sentence, focus starts on the link switch, and Escape, Done and the close button return focus to the Share button. Every control is a real switch, select or input with a name, 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 but the clipboard. Nothing is shared: switching the link on, picking an access or an expiry and previewing only change this block's state and the drawing, and the link is a typed address. In your app call your API when a control changes (turn link sharing on or off, set the role, set an end date), return the link it makes, and check the role and the end date on the server every time the link is opened, never in the page.