ConfirmDialog

tsximport { createTavo } from "@tavojs/core";
import { ConfirmDialog } from "@tavojs/ui/confirm-dialog";
import { Button, Text } from "@tavojs/ui";

type State = { open: boolean; removed: boolean };

export const ConfirmDialogExample1 = createTavo<Record<string, never>, State>({
  model: () => ({ open: false, removed: false }),
  view: ({ state, model }) => (
    <>
      <Button id="remove-draft-trigger" onClick={() => model.set("open", true)} disabled={state.removed}>Remove draft</Button>
      <ConfirmDialog
        open={state.open}
        title="Remove draft?"
        labelledBy="remove-draft-title"
        description="This demo only changes local state."
        use={(overlay: HTMLDivElement) => { overlay.querySelector("button")?.focus(); }}
        onConfirm={() => {
          model.patch({ open: false, removed: true });
          document.getElementById("remove-draft-status")?.focus();
        }}
        onCancel={() => {
          model.set("open", false);
          document.getElementById("remove-draft-trigger")?.focus();
        }}
      />
      <Text id="remove-draft-status" role="status" tabIndex={-1}>{state.removed ? "Draft removed from this demo." : "Draft available."}</Text>
    </>
  )
});