Dialog

import { Dialog } from "@rebasepro/ui";

Props

Prop	Type	Required	Description
open	boolean	—
onOpenChange	(open: boolean) => void	—
children	React.ReactNode	yes
className	string	—
containerClassName	string	—
fullWidth	boolean	—
fullHeight	boolean	—
fullScreen	boolean	—
scrollable	boolean	—
maxWidth	"xl" | "2xl" | "xs" | "sm" | "md" | "lg" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full"	—
modal	boolean	—
onOpenAutoFocus	(e: Event) => void	—
onCloseAutoFocus	(e: Event) => void	—	Called when focus is about to return after the dialog closes. By default it goes back to the element that had it when the dialog opened; call preventDefault() to put it somewhere else.
onEscapeKeyDown	(e: KeyboardEvent) => void	—
onPointerDownOutside	(e: Event) => void	—
onInteractOutside	(e: Event) => void	—
dismissOnBackdrop	boolean	—	Whether a click on the dimmed backdrop closes the dialog. Off by default: a record or a form dialog holds work that one stray click must not throw away. Turn it on for a picker. Escape closes either kind.
initialFocus	React.RefObject<HTMLElement | null>	—	The element to focus when the dialog opens. Without it the dialog focuses itself, so a screen reader announces it by its title and a phone does not raise its keyboard.
disableInitialFocus	boolean	—	If true (the default), the dialog will not focus the first focusable element when opened: it focuses its own container instead. false lets the first focusable element take focus.
portalContainer	HTMLElement	—
aria-describedby	string	—

Focus

When a dialog opens, focus moves into it: to initialFocus if you name an element, otherwise to the dialog itself. Its title is announced, and the first Tab lands on its first control. When it closes, focus returns to whatever had it before — the button that opened it, or the trigger of the menu whose item did.

Example

This is the example the design-system sync renders and verifies for this component.

import {
    Dialog,
    DialogTitle,
    DialogContent,
    DialogActions,
    TextField,
    MultiSelect,
    MultiSelectItem,
    Button,
    LoadingButton
} from "@rebasepro/ui";

// Dialog is a Radix portal — it renders `fixed inset-0`, so it always
// escapes a grid card regardless of the wrapper below. Needs
// cfg.overrides.Dialog = { cardMode: "single", primaryStory: "FormDialog" }.
// `open` is the only prop the .d.ts exposes (no defaultOpen) — force it true.

// Canonical layout ported from UIReferenceView's "Form Dialog" section:
// title -> grid grid-cols-12 gap-4 body -> right-aligned actions.
export const FormDialog = () => (
    <div className="p-4 h-[320px]">
        <Dialog open onOpenChange={() => {}} maxWidth="lg">
            <DialogTitle>Edit collection</DialogTitle>
            <DialogContent>
                <div className="grid grid-cols-12 gap-4">
                    <div className="col-span-12">
                        <TextField name="name" required value="products" onChange={() => {}} label="Collection name"/>
                    </div>
                    <div className="col-span-12">
                        <TextField name="path" value="products" onChange={() => {}} label="Database table"/>
                    </div>
                    <div className="col-span-12">
                        <MultiSelect className="w-full" label="RLS policies" value={["read_authenticated"]} onValueChange={() => {}}>
                            <MultiSelectItem value="read_authenticated">read_authenticated</MultiSelectItem>
                            <MultiSelectItem value="write_owner">write_owner</MultiSelectItem>
                            <MultiSelectItem value="admin_all">admin_all</MultiSelectItem>
                        </MultiSelect>
                    </div>
                </div>
            </DialogContent>
            <DialogActions>
                <Button variant="text">Cancel</Button>
                <LoadingButton variant="filled" loading={false}>Save changes</LoadingButton>
            </DialogActions>
        </Dialog>
    </div>
);