Function AlertDialogRoot

primitives/src/alert_dialog.rs:81–115

(props: AlertDialogRootProps)

/// - `data-state`: Indicates if the alert dialog is open or closed. It can be either "open" or "closed".
#[component]
pub fn AlertDialogRoot(props: AlertDialogRootProps) -> Element {
    let labelledby = use_unique_id().to_string();
    let describedby = use_unique_id().to_string();
    let mut open_signal = use_signal(|| props.default_open);
    let set_open = use_callback(move |v: bool| {
        open_signal.set(v);
        props.on_open_change.call(v);
    });
    let open = use_memo(move || (props.open)().unwrap_or_else(&*open_signal));
    use_context_provider(|| AlertDialogCtx {
        open,
        set_open,
        labelledby,
        describedby,
    });

    let id = use_unique_id();
    let id = use_id_or(id, props.id);
    let render_element = use_animated_open(id, open);

    rsx! {
        document::Script {
            src: FOCUS_TRAP_JS,
            defer: true
        }
        if render_element() {
            div {
                id,
                "data-state": if open() { "open" } else { "closed" },
                ..props.attributes,
                {props.children}
            }
        }
    }
}

/// The props for the [`AlertDialogContent`] component.
#[derive(Props, Clone, PartialEq)]