Dialog

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPanel,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";

const DialogBasicDemo = () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button size="sm" variant="outline">
        Open dialog
      </Button>
    </DialogTrigger>
    <DialogPopup className="sm:max-w-sm">
      <DialogHeader>
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription>
          Make changes here. Save when you are done.
        </DialogDescription>
      </DialogHeader>
      <DialogPanel>
        <Input defaultValue="Jane Doe" aria-label="Name" />
      </DialogPanel>
      <DialogFooter>
        <DialogClose asChild>
          <Button size="sm" variant="ghost">
            Cancel
          </Button>
        </DialogClose>
        <Button size="sm" type="button">
          Save
        </Button>
      </DialogFooter>
    </DialogPopup>
  </Dialog>
);

export default DialogBasicDemo;

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPanel,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";

const DialogBasicDemo = () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button size="sm" variant="outline">
        Open dialog
      </Button>
    </DialogTrigger>
    <DialogPopup className="sm:max-w-sm">
      <DialogHeader>
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription>
          Make changes here. Save when you are done.
        </DialogDescription>
      </DialogHeader>
      <DialogPanel>
        <Input defaultValue="Jane Doe" aria-label="Name" />
      </DialogPanel>
      <DialogFooter>
        <DialogClose asChild>
          <Button size="sm" variant="ghost">
            Cancel
          </Button>
        </DialogClose>
        <Button size="sm" type="button">
          Save
        </Button>
      </DialogFooter>
    </DialogPopup>
  </Dialog>
);

export default DialogBasicDemo;

import { Button } from "@/components/ui/button";
import {
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPanel,
  DialogPopup,
  DialogRootProvider,
  DialogTitle,
  useDialog,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";

const DialogNestedDemo = () => {
  const parentDialog = useDialog();
  const childDialog = useDialog();

  return (
    <>
      <Button
        size="sm"
        type="button"
        variant="outline"
        onClick={() => parentDialog.setOpen(true)}
      >
        Open parent
      </Button>

      <DialogRootProvider value={parentDialog}>
        <DialogPopup className="sm:max-w-md" showCloseButton={false}>
          <DialogHeader>
            <DialogTitle>Manage team member</DialogTitle>
            <DialogDescription>
              Two sibling{" "}
              <code className="rounded bg-muted px-1 py-px text-xs">
                DialogRootProvider
              </code>{" "}
              trees with{" "}
              <code className="rounded bg-muted px-1 py-px text-xs">
                useDialog
              </code>
              . When the child is open, the parent panel gets{" "}
              <code className="rounded bg-muted px-1 py-px text-xs">
                data-has-nested
              </code>{" "}
              and scales down.
            </DialogDescription>
          </DialogHeader>
          <DialogPanel className="grid gap-4">
            <div className="grid gap-1">
              <p className="text-muted-foreground text-sm">Name</p>
              <p className="font-medium text-sm">Bora Baloglu</p>
            </div>
            <div className="grid gap-1">
              <p className="text-muted-foreground text-sm">Email</p>
              <p className="font-medium text-sm">bora@example.com</p>
            </div>
          </DialogPanel>
          <DialogFooter>
            <Button
              size="sm"
              type="button"
              variant="outline"
              onClick={() => childDialog.setOpen(true)}
            >
              Edit details
            </Button>
          </DialogFooter>
        </DialogPopup>
      </DialogRootProvider>

      <DialogRootProvider value={childDialog}>
        <DialogPopup className="sm:max-w-sm" showCloseButton={false}>
          <DialogHeader>
            <DialogTitle>Edit details</DialogTitle>
            <DialogDescription>
              Update member information below.
            </DialogDescription>
          </DialogHeader>
          <DialogPanel className="grid gap-4">
            <Input defaultValue="Bora Baloglu" aria-label="Name" />
            <Input
              defaultValue="bora@example.com"
              aria-label="Email"
              type="email"
            />
          </DialogPanel>
          <DialogFooter>
            <DialogClose asChild>
              <Button size="sm" type="button" variant="ghost">
                Cancel
              </Button>
            </DialogClose>
            <Button size="sm" type="button">
              Save changes
            </Button>
          </DialogFooter>
        </DialogPopup>
      </DialogRootProvider>
    </>
  );
};

export default DialogNestedDemo;

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPanel,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";

const DialogNonModal = () => (
  <Dialog modal={false}>
    <DialogTrigger asChild>
      <Button size="sm" variant="outline">
        Open non-modal dialog
      </Button>
    </DialogTrigger>
    <DialogPopup className="sm:max-w-sm">
      <DialogHeader>
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription>
          Make changes here. Save when you are done.
        </DialogDescription>
      </DialogHeader>
      <DialogPanel>
        <Input defaultValue="Jane Doe" aria-label="Name" />
      </DialogPanel>
      <DialogFooter>
        <DialogClose asChild>
          <Button size="sm" variant="ghost">
            Cancel
          </Button>
        </DialogClose>
        <Button size="sm" type="button">
          Save
        </Button>
      </DialogFooter>
    </DialogPopup>
  </Dialog>
);

export default DialogNonModal;

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

const DialogControlledDemo = () => {
  const [open, setOpen] = useState(false);

  return (
    <Dialog open={open} onOpenChange={(details) => setOpen(details.open)}>
      <DialogTrigger asChild>
        <Button size="sm" variant="outline">
          Open controlled dialog
        </Button>
      </DialogTrigger>
      <DialogPopup className="sm:max-w-sm">
        <DialogHeader>
          <DialogTitle>Session settings</DialogTitle>
          <DialogDescription>
            This dialog is controlled with React state and Ark&apos;s
            `onOpenChange`.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button
            size="sm"
            type="button"
            variant="ghost"
            onClick={() => setOpen(false)}
          >
            Close
          </Button>
        </DialogFooter>
      </DialogPopup>
    </Dialog>
  );
};

export default DialogControlledDemo;

import { useRef } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPanel,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";

const DialogInitialFocusDemo = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <Dialog initialFocusEl={() => inputRef.current}>
      <DialogTrigger asChild>
        <Button size="sm" variant="outline">
          Open initial focus dialog
        </Button>
      </DialogTrigger>
      <DialogPopup className="sm:max-w-sm">
        <DialogHeader>
          <DialogTitle>Edit profile</DialogTitle>
          <DialogDescription>
            The first input receives focus when the dialog opens.
          </DialogDescription>
        </DialogHeader>
        <DialogPanel className="grid gap-3">
          <Input ref={inputRef} defaultValue="Jane Doe" aria-label="Name" />
          <Input
            defaultValue="jane@example.com"
            aria-label="Email"
            type="email"
          />
        </DialogPanel>
        <DialogFooter>
          <DialogClose asChild>
            <Button size="sm" type="button" variant="ghost">
              Cancel
            </Button>
          </DialogClose>
          <Button size="sm" type="button">
            Save
          </Button>
        </DialogFooter>
      </DialogPopup>
    </Dialog>
  );
};

export default DialogInitialFocusDemo;

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPanel,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";

type User = {
  email: string;
  id: string;
  name: string;
};

const users: User[] = [
  { id: "1", name: "Alice Johnson", email: "alice@example.com" },
  { id: "2", name: "Bob Smith", email: "bob@example.com" },
  { id: "3", name: "Carol Davis", email: "carol@example.com" },
];

const DialogMultipleTriggersDemo = () => {
  const [activeUser, setActiveUser] = useState<User | null>(null);

  return (
    <Dialog
      onTriggerValueChange={(details) => {
        setActiveUser(users.find((user) => user.id === details.value) ?? null);
      }}
    >
      <div className="flex flex-wrap gap-2">
        {users.map((user) => (
          <DialogTrigger asChild key={user.id} value={user.id}>
            <Button size="sm" variant="outline">
              Edit {user.name}
            </Button>
          </DialogTrigger>
        ))}
      </div>
      <DialogPopup className="sm:max-w-sm">
        <DialogHeader>
          <DialogTitle>Edit user</DialogTitle>
          <DialogDescription>
            Multiple triggers open one dialog and pass the selected user through
            trigger value.
          </DialogDescription>
        </DialogHeader>
        {activeUser ? (
          <>
            <DialogPanel className="grid gap-3">
              <Input aria-label="Name" defaultValue={activeUser.name} />
              <Input
                aria-label="Email"
                defaultValue={activeUser.email}
                type="email"
              />
            </DialogPanel>
            <DialogFooter>
              <DialogClose asChild>
                <Button size="sm" type="button" variant="ghost">
                  Cancel
                </Button>
              </DialogClose>
              <Button size="sm" type="button">
                Save
              </Button>
            </DialogFooter>
          </>
        ) : null}
      </DialogPopup>
    </Dialog>
  );
};

export default DialogMultipleTriggersDemo;

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPanel,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

const sections = [
  {
    body: "By using this service, you agree to be bound by these terms and conditions.",
    title: "1. Acceptance of terms",
  },
  {
    body: "Permission is granted to use this service for personal and internal business use.",
    title: "2. Use license",
  },
  {
    body: "You are responsible for keeping your account credentials confidential.",
    title: "3. User responsibilities",
  },
  {
    body: "Your use of this service is subject to our privacy and data retention policy.",
    title: "4. Privacy policy",
  },
  {
    body: "We may update these terms at any time. Continued use means acceptance.",
    title: "5. Revisions",
  },
];

const DialogInsideScrollDemo = () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button size="sm" variant="outline">
        Open inside scroll dialog
      </Button>
    </DialogTrigger>
    <DialogPopup className="sm:max-w-md" showCloseButton={false}>
      <DialogHeader>
        <DialogTitle>Terms of service</DialogTitle>
        <DialogDescription>
          This follows Ark UI&apos;s inside-scroll dialog pattern.
        </DialogDescription>
      </DialogHeader>
      <DialogPanel className="max-h-72 overflow-y-auto pr-2">
        <div className="grid gap-4">
          {sections.map((section) => (
            <section className="grid gap-1" key={section.title}>
              <h4 className="font-medium text-sm">{section.title}</h4>
              <p className="text-muted-foreground text-sm">{section.body}</p>
            </section>
          ))}
        </div>
      </DialogPanel>
      <DialogFooter>
        <DialogClose asChild>
          <Button size="sm" type="button" variant="ghost">
            Decline
          </Button>
        </DialogClose>
        <DialogClose asChild>
          <Button size="sm" type="button">
            Accept
          </Button>
        </DialogClose>
      </DialogFooter>
    </DialogPopup>
  </Dialog>
);

export default DialogInsideScrollDemo;

import { useRef } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogDescription,
  DialogHeader,
  DialogPanel,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

const CONTENT_SECTIONS = [
  {
    body: "We collect information you provide directly, such as when you create an account, make a purchase, or contact us for support. This may include your name, email address, and payment information.",
    title: "1. Information We Collect",
  },
  {
    body: "We use the information we collect to provide and improve our services, process transactions, send communications, and personalize your experience.",
    title: "2. How We Use Your Information",
  },
  {
    body: "We do not sell your personal information. We may share information with service providers who assist in our operations, or when required by law.",
    title: "3. Information Sharing",
  },
  {
    body: "We implement appropriate technical and organizational measures to protect your personal information against unauthorized access, alteration, or destruction.",
    title: "4. Data Security",
  },
  {
    body: "You have the right to access, correct, or delete your personal information. You may also opt out of marketing communications at any time.",
    title: "5. Your Rights",
  },
  {
    body: "We use cookies and similar technologies to enhance your experience, analyze usage patterns, and deliver targeted content. You can manage cookie preferences in your browser settings.",
    title: "6. Cookies and Tracking",
  },
  {
    body: "Our service may contain links to third-party websites. We are not responsible for the privacy practices of these external sites.",
    title: "7. Third-Party Services",
  },
  {
    body: "Our services are not directed to children under 13. We do not knowingly collect personal information from children without parental consent.",
    title: "8. Children Privacy",
  },
  {
    body: "Your information may be transferred to and processed in countries other than your own. We ensure appropriate safeguards are in place for such transfers.",
    title: "9. International Transfers",
  },
  {
    body: "We may update this privacy policy from time to time. We will notify you of significant changes by posting a notice on our website or sending you an email.",
    title: "10. Changes to This Policy",
  },
  {
    body: "We retain your personal information for as long as necessary to fulfill the purposes outlined in this policy, unless a longer retention period is required by law.",
    title: "11. Data Retention",
  },
  {
    body: "If you have questions about this privacy policy or our data practices, please contact our privacy team through the support channels provided on our website.",
    title: "12. Contact Us",
  },
  {
    body: "This is a long section of text to test the outside scroll dialog. It should be long enough to cause the dialog to scroll outside the viewport.",
    title: "13. Long Section",
  },
  {
    body: "This is a long section of text to test the outside scroll dialog. It should be long enough to cause the dialog to scroll outside the viewport.",
    title: "14. Long Section",
  },
  {
    body: "This is a long section of text to test the outside scroll dialog. It should be long enough to cause the dialog to scroll outside the viewport.",
    title: "15. Long Section",
  },
  {
    body: "This is a long section of text to test the outside scroll dialog. It should be long enough to cause the dialog to scroll outside the viewport.",
    title: "16. Long Section",
  },
  {
    body: "This is a long section of text to test the outside scroll dialog. It should be long enough to cause the dialog to scroll outside the viewport.",
    title: "17. Long Section",
  },
  {
    body: "This is a long section of text to test the outside scroll dialog. It should be long enough to cause the dialog to scroll outside the viewport.",
    title: "18. Long Section",
  },
  {
    body: "This is a long section of text to test the outside scroll dialog. It should be long enough to cause the dialog to scroll outside the viewport.",
    title: "19. Long Section",
  },
  {
    body: "This is a long section of text to test the outside scroll dialog. It should be long enough to cause the dialog to scroll outside the viewport.",
    title: "20. Long Section",
  },
];

const DialogOutsideScrollDemo = () => {
  const contentRef = useRef<HTMLDivElement | null>(null);

  return (
    <Dialog initialFocusEl={() => contentRef.current}>
      <DialogTrigger asChild>
        <Button size="sm" variant="outline">
          Open outside scroll dialog
        </Button>
      </DialogTrigger>
      <DialogPopup
        bottomStickOnMobile={false}
        className="sm:max-w-md my-16 max-h-none"
        id="dialog-outside-scroll-content"
        positionerClassName="overflow-y-auto items-start py-8"
      >
        <DialogHeader>
          <DialogTitle>Privacy Policy</DialogTitle>
          <DialogDescription>
            This layout allows the dialog to extend beyond the viewport while
            keeping the outer container scrollable.
          </DialogDescription>
        </DialogHeader>
        <DialogPanel
          className="grid gap-4"
          ref={(node: HTMLDivElement | null) => {
            contentRef.current = node;
          }}
        >
          {CONTENT_SECTIONS.map((section) => (
            <section className="grid gap-1" key={section.title}>
              <h4 className="font-medium text-sm">{section.title}</h4>
              <p className="text-muted-foreground text-sm">{section.body}</p>
            </section>
          ))}
        </DialogPanel>
      </DialogPopup>
    </Dialog>
  );
};

export default DialogOutsideScrollDemo;

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPanel,
  DialogPopup,
  DialogRootProvider,
  DialogTitle,
  useDialog,
} from "@/components/ui/dialog";
import { Textarea } from "@/components/ui/textarea";

const DialogConfirmationDemo = () => {
  const [formContent, setFormContent] = useState("");

  const confirmDialog = useDialog();
  const parentDialog = useDialog({
    onOpenChange: (details) => {
      if (!details.open && formContent.trim()) {
        confirmDialog.setOpen(true);
        return;
      }
      confirmDialog.setOpen(false);
      if (!details.open) {
        setFormContent("");
      }
    },
  });

  const handleDiscardChanges = () => {
    setFormContent("");
    confirmDialog.setOpen(false);
    parentDialog.setOpen(false);
  };

  return (
    <>
      <Button
        size="sm"
        type="button"
        variant="outline"
        onClick={() => parentDialog.setOpen(true)}
      >
        Open confirmation dialog
      </Button>

      <DialogRootProvider value={parentDialog}>
        <DialogPopup className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Edit content</DialogTitle>
            <DialogDescription>
              Try typing and then closing. A confirmation dialog appears before
              discarding changes.
            </DialogDescription>
          </DialogHeader>
          <DialogPanel>
            <Textarea
              value={formContent}
              onChange={(event) => setFormContent(event.target.value)}
              placeholder="Type something here..."
              rows={4}
            />
          </DialogPanel>
          <DialogFooter>
            <DialogClose asChild>
              <Button size="sm" type="button" variant="ghost">
                Close
              </Button>
            </DialogClose>
          </DialogFooter>
        </DialogPopup>
      </DialogRootProvider>

      <DialogRootProvider value={confirmDialog}>
        <DialogPopup className="sm:max-w-sm" showCloseButton={false}>
          <DialogHeader>
            <DialogTitle>Unsaved changes</DialogTitle>
            <DialogDescription>
              You have unsaved changes. Do you want to discard them?
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button
              size="sm"
              type="button"
              variant="ghost"
              onClick={() => confirmDialog.setOpen(false)}
            >
              Keep editing
            </Button>
            <Button size="sm" type="button" onClick={handleDiscardChanges}>
              Discard changes
            </Button>
          </DialogFooter>
        </DialogPopup>
      </DialogRootProvider>
    </>
  );
};

export default DialogConfirmationDemo;