AlertDialog

Prezentare generală

Utilizați AlertDialog pentru o decizie care întrerupe fluxul de lucru curent, cum ar fi confirmarea ștergerii. Oferă semantica alertdialog, gestionarea focalizării și confirmare sau anulare explicită. Această componentă primitivă este destinată interfețelor Twenty UI autonome și interfețelor deținute de gazdă. Componentele Front trebuie să solicite o confirmare prin intermediul API-ului de dialog al gazdei SDK. Dialog, AlertDialog directe și dialogurile native ale browserului sunt interzise în cadrul randatorului de componente frontale.

Utilizare

Stare necontrolată

Utilizați defaultOpen pentru a seta vizibilitatea inițială. Dialogul gestionează modificările ulterioare prin declanșatorul său, controalele de închidere și interacțiunile de anulare.

import { Button } from 'twenty-ui/primitives/input';
import { AlertDialog } from 'twenty-ui/primitives/surfaces';

type DeleteConfirmationProps = { onDelete: () => void };

export const DeleteConfirmation = ({ onDelete }: DeleteConfirmationProps) => (
  <AlertDialog.Root defaultOpen={false}>
    <AlertDialog.Trigger
      render={<Button variant="solid">Delete record</Button>}
    />
    <AlertDialog.Portal>
      <AlertDialog.Backdrop />
      <AlertDialog.Viewport>
        <AlertDialog.Popup>
          <AlertDialog.Header>
            <AlertDialog.Title>Delete this record?</AlertDialog.Title>
            <AlertDialog.Description>
              This record will be permanently deleted. This action cannot be
              undone.
            </AlertDialog.Description>
          </AlertDialog.Header>
          <AlertDialog.Footer>
            <AlertDialog.Close render={<Button>Cancel</Button>} />
            <AlertDialog.Close
              onClick={onDelete}
              render={<Button color="danger">Delete</Button>}
            />
          </AlertDialog.Footer>
        </AlertDialog.Popup>
      </AlertDialog.Viewport>
    </AlertDialog.Portal>
  </AlertDialog.Root>
);

defaultOpen are implicit valoarea false, deci poate fi omis. Acest exemplu utilizează un callback de confirmare sincron și se închide după rularea acțiunii.

Anatomie

Păstrați părțile asociate în AlertDialog.Root sau conectați declanșatoarele detașate printr-un handle. Compuneți separat portalul, fundalul, viewportul și fereastra pop-up.

AlertDialog.Root
├── AlertDialog.Trigger
└── AlertDialog.Portal
    ├── AlertDialog.Backdrop
    └── AlertDialog.Viewport
        └── AlertDialog.Popup
            ├── AlertDialog.Header
            │   ├── AlertDialog.Title
            │   └── AlertDialog.Description
            ├── AlertDialog.Body
            └── AlertDialog.Footer
                ├── AlertDialog.Close
                └── Confirmation action

Parte	Cerință	Scop
`Root`	Obligatoriu	Coordonează starea de deschidere și comportamentul modal.
`Declanșator`	Opțional pentru o casetă de dialog deschisă programatic	Deschide caseta de dialog și oferă o țintă pentru revenirea focalizării.
`Portal`	Recomandat	Mută suprapunerea în containerul său și controlează montarea.
`Backdrop`	Opțional	Separă vizual alerta de pagina înconjurătoare.
`Viewport`	Recomandat	Poziționează fereastra pop-up și furnizează zona înconjurătoare derulabilă a acesteia.
`Popup`	Obligatoriu	Redă conținutul alertei cu gestionarea focalizării.
`Titlu`	Recomandat	Furnizează numele vizibil al alertei. Este întotdeauna necesar un nume accesibil.
`Description`	Recomandat pentru o confirmare	Explică decizia și consecințele acesteia.
`Header`, `Body`, `Footer`	Părți opționale ale structurii	Aranjează titlurile, conținutul suplimentar și acțiunile.
`Închide`	Recomandat pentru anulare	Furnizează o acțiune explicită de închidere.

Setați container și keepMounted pe Portal, atributele de fundal pe Backdrop, atributele de aspect pe Viewport, precum și proprietățile size și de focalizare pe Popup. Fiecare parte a elementului acceptă propriile atribute native, handlere, ref și compunerea render. Popup.ref indică elementul de conținut al alertei. Title și Description stabilesc relațiile de accesibilitate; furnizați aria-label pe Popup când omiteți un titlu. Acțiunea de confirmare este conținut al aplicației, nu o parte exportată. Utilizați Close cu un gestionar sincron sau un Button cu stare de deschidere controlată pentru confirmarea asincronă.

Stare controlată

Transmiteți open și actualizați-l cu onOpenChange pentru a gestiona vizibilitatea aceluiași dialog în starea React. Callbackul primește valoarea booleană solicitată și detaliile evenimentului upstream, inclusiv reason, event și cancel(). Apelați eventDetails.cancel() pentru a respinge o modificare solicitată. onOpenChangeComplete se execută după finalizarea tranzițiilor de deschidere sau închidere.

import { useState } from 'react';
import { Button } from 'twenty-ui/primitives/input';
import { AlertDialog } from 'twenty-ui/primitives/surfaces';

type DeleteConfirmationProps = { onDelete: () => void };

export const DeleteConfirmation = ({ onDelete }: DeleteConfirmationProps) => {
  const [open, setOpen] = useState(false);

  return (
    <AlertDialog.Root open={open} onOpenChange={setOpen}>
      <AlertDialog.Trigger
        render={<Button variant="solid">Delete record</Button>}
      />
      <AlertDialog.Portal>
        <AlertDialog.Backdrop />
        <AlertDialog.Viewport>
          <AlertDialog.Popup>
            <AlertDialog.Header>
              <AlertDialog.Title>Delete this record?</AlertDialog.Title>
              <AlertDialog.Description>
                This record will be permanently deleted. This action cannot be
                undone.
              </AlertDialog.Description>
            </AlertDialog.Header>
            <AlertDialog.Footer>
              <AlertDialog.Close render={<Button>Cancel</Button>} />
              <AlertDialog.Close
                onClick={onDelete}
                render={<Button color="danger">Delete</Button>}
              />
            </AlertDialog.Footer>
          </AlertDialog.Popup>
        </AlertDialog.Viewport>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
};

Pentru confirmarea asincronă, utilizați un Button cu handlerul acțiunii în loc de AlertDialog.Close. Mențineți open la valoarea true cât timp acțiunea este în așteptare, apelați setOpen(false) după ce reușește și afișați o eroare în dialog dacă eșuează.

Compuneți cu butoane

Utilizați render pentru a oferi declanșatorului și controalelor de închidere stilul de buton Twenty UI. Părțile casetei de dialog furnizează butoanelor gestionarele de interacțiune și referințele lor.

import { Button } from 'twenty-ui/primitives/input';
import { AlertDialog } from 'twenty-ui/primitives/surfaces';

type DeleteConfirmationProps = { onDelete: () => void };

export const DeleteConfirmation = ({ onDelete }: DeleteConfirmationProps) => (
  <AlertDialog.Root>
    <AlertDialog.Trigger
      render={<Button variant="solid">Delete record</Button>}
    />
    <AlertDialog.Portal>
      <AlertDialog.Backdrop />
      <AlertDialog.Viewport>
        <AlertDialog.Popup>
          <AlertDialog.Header>
            <AlertDialog.Title>Delete this record?</AlertDialog.Title>
            <AlertDialog.Description>
              This record will be permanently deleted. This action cannot be
              undone.
            </AlertDialog.Description>
          </AlertDialog.Header>
          <AlertDialog.Footer>
            <AlertDialog.Close render={<Button>Cancel</Button>} />
            <AlertDialog.Close
              onClick={onDelete}
              render={<Button color="danger">Delete</Button>}
            />
          </AlertDialog.Footer>
        </AlertDialog.Popup>
      </AlertDialog.Viewport>
    </AlertDialog.Portal>
  </AlertDialog.Root>
);

Păstrați fiecare acțiune ca un singur control interactiv. Dacă încapsulați Button în propriul component, transmiteți mai departe proprietățile și referința furnizate.

Declanșatoare detașate și acțiuni imperative

Creați o dată un handle cu AlertDialog.createHandle\<Payload>() și transmiteți-l către handle pe Root și pe fiecare Trigger detașat. payload tipizat al unui declanșator este disponibil pentru funcția de randare copil a rădăcinii. Un handle acceptă și open(triggerId), openWithPayload(payload), close() și getterul isOpen cât timp rădăcina sa este montată. Transmiteți un ID de declanșator corespunzător către open sau null pentru a deschide fără un declanșator. Apelați metode imperative din handlere de evenimente sau efecte. Root.actionsRef expune close() și unmount(). Pentru o animație de închidere controlată extern, apelați eventDetails.preventUnmountOnClose() în onOpenChange, apoi apelați actionsRef.current?.unmount() după finalizarea animației. Părțile stilizate obișnuite își gestionează propriile tranziții fără aceste acțiuni imperative.

Dimensionare și portaluri

Popup.size acceptă sm, md, lg, xl și fullscreen și are implicit valoarea md. Dimensiunea și aspectul aparțin suprafeței AlertDialog și nu trebuie să corespundă presetărilor Dialog. Portal.container are implicit containerul portalului din cea mai apropiată temă. Fără unul, Base UI utilizează destinația implicită a portalului, în mod normal document.body. Un element explicit, o rădăcină shadow sau un ref înlocuiește acea destinație. Un null explicit amână montarea până când este disponibil un container. Base UI rezolvă un ref al cărui current este null folosind destinația sa implicită; utilizați container={null} când montarea trebuie să aștepte. Conținutul portalizat păstrează contextul temei. Portal și Viewport moștenesc direcția de text furnizată, cu excepția cazului în care setați explicit dir. Setați Portal.keepMounted pentru a păstra conținutul montat și starea formularului cât timp este închis.

Focalizare și închidere

Alerta reține focalizarea, blochează interacțiunea din exterior și blochează derularea paginii cât timp este deschisă. Escape solicită închiderea; clicul în exterior nu o solicită. Pentru a preveni închiderea prin Escape, anulați modificarea escape-key în onOpenChange. Oferiți întotdeauna o acțiune vizibilă Anulare sau Închidere. Implicit, focalizarea se mută la primul control accesibil cu Tab sau la fereastra pop-up pentru o deschidere prin atingere. Puneți prima acțiunea cea mai puțin distructivă sau utilizați Popup.initialFocus pentru a o selecta. Focalizarea revine la declanșator sau la elementul focalizat anterior când alerta se închide. Utilizați Popup.finalFocus când o acțiune reușită elimină acea țintă. Ambele proprietăți de focalizare acceptă o valoare booleană, un ref de element sau un callback pentru tipul de interacțiune, conform contractului upstream.

Proprietăți

Referința este generată din tipurile publice ale componentei. Atributele native, inclusiv numele accesibile și gestionarii de evenimente, sunt acceptate și pentru părțile care redau elemente.

AlertDialog.Root

RefObject<DialogRootActions | null>

A ref to imperative actions.

unmount: Ends the closing phase of the alert dialog after an externally controlled closing animation finishes. Call preventUnmountOnClose() in onOpenChange first, otherwise the alert dialog completes closing on its own. Whether it leaves the DOM is decided by keepMounted on the portal.
close: Closes the alert dialog imperatively when called.

ReactNode | PayloadChildRenderFunction<Payload>

The content of the dialog. This can be a regular React node or a render function that receives the payload of the active trigger.

boolean

implicit:"false"

Whether the dialog is initially open.To render a controlled dialog, use the open prop instead.

string | null

ID of the trigger that the dialog is associated with. This is useful in conjunction with the defaultOpen prop to create an initially open dialog.

AlertDialogHandle<Payload>

A handle to associate the alert dialog with a trigger. If specified, allows external triggers to control the alert dialog’s open state. Can be created with the AlertDialog.createHandle() method.

((open: boolean, eventDetails: AlertDialogRootChangeEventDetails) => void)

Event handler called when the alert dialog is opened or closed.

((open: boolean) => void)

Event handler called after any animations complete when the dialog is opened or closed.

boolean

Whether the dialog is currently open.

string | null

ID of the trigger that the dialog is associated with. This is useful in conjunction with the open prop to create a controlled dialog. There’s no need to specify this prop when the dialog is uncontrolled (that is, when the open prop is not set).

AlertDialog.Trigger

string | ((state: DialogTriggerState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

AlertDialogHandle<Payload>

A handle to associate the trigger with an alert dialog. Can be created with the AlertDialog.createHandle() method.

string

ID of the trigger. In addition to being forwarded to the rendered element, it is also used to specify the active trigger for the dialog in controlled mode (with the DialogRoot triggerId prop).

boolean

implicit:"true"

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).

Payload

A payload to pass to the dialog when it is opened.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogTriggerState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: DialogTriggerState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

AlertDialog.Portal

string | ((state: DialogPortalState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

Portal destination. Omission uses the theme container or Base UI default; explicit null defers mounting. A ref with a null current value uses the Base UI default destination.

boolean

implicit:"false"

Keeps content mounted while the alert is closed.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogPortalState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: DialogPortalState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

AlertDialog.Backdrop

string | ((state: DialogBackdropState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

boolean

implicit:"false"

Whether the backdrop is forced to render even when nested.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogBackdropState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: DialogBackdropState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

AlertDialog.Viewport

string | ((state: DialogViewportState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogViewportState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: DialogViewportState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

CSS class applied to the element, or a function that returns a class based on the component’s state.

Determines the element to focus when the dialog is closed.

false: Do not move focus.
true: Move focus based on the default behavior (trigger or previously focused element).
RefObject: Move focus to the ref element.
function: Called with the interaction type (mouse, touch, pen, or keyboard). Return an element to focus, true to use the default behavior, null to fall back to the default behavior, or false/undefined to do nothing.

Determines the element to focus when the dialog is opened. By default, focus moves to the first tabbable element inside the popup, except when the dialog is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.

false: Do not move focus.
true: Move focus based on the default behavior (first tabbable element or popup).
RefObject: Move focus to the ref element.
function: Called with the interaction type (mouse, touch, pen, or keyboard). Return an element to focus, true to use the default behavior, null to fall back to the default behavior, or false/undefined to do nothing.

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

Width of the alert, or fullscreen to fill the viewport.

Style applied to the element, or a function that returns a style object based on the component’s state.

AlertDialog.Title

string | ((state: DialogTitleState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogTitleState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: DialogTitleState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

AlertDialog.Description

string | ((state: DialogDescriptionState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogDescriptionState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: DialogDescriptionState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

AlertDialog.Close

string | ((state: DialogCloseState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

boolean

implicit:"true"

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogCloseState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: DialogCloseState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

AlertDialog.Header

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

AlertDialog.Body

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

Dezvoltatori

Aplicații

API

Autogazda

Contribuie

Biblioteca UI

Prezentare generală

Utilizare

Stare necontrolată

Anatomie

Stare controlată

Compuneți cu butoane

Declanșatoare detașate și acțiuni imperative

Dimensionare și portaluri

Focalizare și închidere

Proprietăți

AlertDialog.Root

AlertDialog.Trigger

AlertDialog.Portal

AlertDialog.Backdrop

AlertDialog.Viewport

AlertDialog.Title

AlertDialog.Description

AlertDialog.Close

AlertDialog.Header

AlertDialog.Body

AlertDialog.Footer

​Prezentare generală

​Utilizare

​Stare necontrolată

​Anatomie

​Stare controlată

​Compuneți cu butoane

​Declanșatoare detașate și acțiuni imperative

​Dimensionare și portaluri

​Focalizare și închidere

​Proprietăți

​AlertDialog.Root

​AlertDialog.Trigger

​AlertDialog.Portal

​AlertDialog.Backdrop

​AlertDialog.Viewport

​AlertDialog.Popup

​AlertDialog.Title

​AlertDialog.Description

​AlertDialog.Close

​AlertDialog.Header

​AlertDialog.Body

​AlertDialog.Footer

Prezentare generală

Utilizare

Stare necontrolată

Anatomie

Stare controlată

Compuneți cu butoane

Declanșatoare detașate și acțiuni imperative

Dimensionare și portaluri

Focalizare și închidere

Proprietăți

AlertDialog.Root

AlertDialog.Trigger

AlertDialog.Portal

AlertDialog.Backdrop

AlertDialog.Viewport

AlertDialog.Popup

AlertDialog.Title

AlertDialog.Description

AlertDialog.Close

AlertDialog.Header

AlertDialog.Body

AlertDialog.Footer