Dialog

import { Dialog } from '@hamur/react/dialog'

export default function DialogNestedExample() {
  return (
    <Dialog.Root>
      <Dialog.Trigger className="button">View notifications</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Backdrop className="backdrop" />
        <Dialog.Popup className="dialog dialog-stacked">
          <div className="dialog-intro">
            <Dialog.Title className="dialog-title">Notifications</Dialog.Title>
            <Dialog.Description className="muted">
              You are all caught up. Good job!
            </Dialog.Description>
          </div>
          <div className="actions start">
            <Dialog.Root>
              <Dialog.Trigger className="button">Customize</Dialog.Trigger>
              <Dialog.Portal>
                <Dialog.Popup className="dialog dialog-stacked">
                  <div className="dialog-intro">
                    <Dialog.Title className="dialog-title">Customize notifications</Dialog.Title>
                    <Dialog.Description className="muted">
                      Review your settings here.
                    </Dialog.Description>
                  </div>
                  <div className="actions">
                    <Dialog.Close className="button">Close</Dialog.Close>
                  </div>
                </Dialog.Popup>
              </Dialog.Portal>
            </Dialog.Root>
          </div>
        </Dialog.Popup>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

import * as React from 'react'
import { Dialog } from '@hamur/react/dialog'

export default function DialogFocusManagementExample() {
  const initialFocusRef = React.useRef<HTMLInputElement | null>(null)
  const finalFocusRef = React.useRef<HTMLButtonElement | null>(null)
  const nameId = React.useId()
  const feedbackId = React.useId()

  return (
    <div className="button-row">
      <Dialog.Root>
        <Dialog.Trigger className="button">Open feedback</Dialog.Trigger>
        <Dialog.Portal>
          <Dialog.Backdrop className="backdrop" />
          <Dialog.Popup
            className="dialog"
            initialFocus={initialFocusRef}
            finalFocus={finalFocusRef}
          >
            <div className="dialog-intro">
              <Dialog.Title className="dialog-title">Feedback form</Dialog.Title>
              <Dialog.Description className="muted">
                Your feedback means a lot to us.
              </Dialog.Description>
            </div>
            <div className="dialog-fields">
              <div className="field">
                <label htmlFor={nameId}>Full name</label>
                <input id={nameId} placeholder="Enter your name" className="input" />
              </div>
              <div className="field">
                <label htmlFor={feedbackId}>Feedback</label>
                <input
                  id={feedbackId}
                  ref={initialFocusRef}
                  required
                  placeholder="Enter your feedback"
                  className="input"
                />
              </div>
            </div>
            <div className="actions">
              <Dialog.Close className="button">Close</Dialog.Close>
            </div>
          </Dialog.Popup>
        </Dialog.Portal>
      </Dialog.Root>
      <button ref={finalFocusRef} type="button" className="button">
        Final focus
      </button>
    </div>
  )
}

import * as React from 'react'
import { Dialog } from '@hamur/react/dialog'

export default function DialogOutsideScrollExample() {
  const popupRef = React.useRef<HTMLDivElement>(null)
  return (
    <Dialog.Root>
      <Dialog.Trigger className="button">Open dialog</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Backdrop className="backdrop" />
        <Dialog.Viewport className="outside-scroll-viewport">
          <div className="outside-scroll-content">
            <Dialog.Popup ref={popupRef} className="outside-scroll-popup" initialFocus={popupRef}>
              <div className="outside-scroll-header">
                <Dialog.Title className="dialog-title">Dialog</Dialog.Title>
                <Dialog.Description className="muted">
                  This layout keeps an outer container scrollable while the dialog can extend past
                  the bottom edge.
                </Dialog.Description>
                <Dialog.Close className="icon-button outside-scroll-close" aria-label="Close">
                  <XIcon />
                </Dialog.Close>
              </div>

              <div className="outside-scroll-body">
                {CONTENT_SECTIONS.map((item) => (
                  <section className="scroll-section" key={item.title}>
                    <h3 className="scroll-section-title">{item.title}</h3>
                    <p className="scroll-section-body">{item.body}</p>
                  </section>
                ))}
              </div>

              <p className="muted">
                Related docs:{' '}
                {RELATED_LINKS.map((item, index) => (
                  <React.Fragment key={item.href}>
                    {index > 0 ? ', ' : null}
                    <a className="footer-link" href={item.href}>
                      {item.label}
                    </a>
                  </React.Fragment>
                ))}
                .
              </p>
            </Dialog.Popup>
          </div>
        </Dialog.Viewport>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

function XIcon() {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeLinecap="square"
      strokeLinejoin="round"
      className="icon"
    >
      <path d="m2.5 2.5 11 11m-11 0 11-11" />
    </svg>
  )
}

const CONTENT_SECTIONS = [
  {
    title: 'What a dialog is for',
    body: 'Use a dialog when you need the user to complete a focused task or read something important without navigating away. It opens on top of the page and returns focus back where it started when closed.',
  },
  {
    title: 'Anatomy at a glance',
    body: 'Root, Trigger, Portal, Backdrop, Viewport, Popup, Title, Description, Close. Keep the title short and the first paragraph specific so screen readers announce something meaningful.',
  },
  {
    title: 'Opening and closing',
    body: 'Control it using external state via the `open` and `onOpenChange` props, or let it manage state for you internally.',
  },
  {
    title: 'Keyboard and focus behavior',
    body: 'Focus moves inside the dialog when it opens. Tab and Shift+Tab loop within, and Esc requests close.',
  },
  {
    title: 'Accessible labeling',
    body: 'Set an explicit title and description using the `Dialog.Title` and `Dialog.Description` components.',
  },
  {
    title: 'Backdrop and page scrolling',
    body: 'The backdrop visually separates layers while background content is inert. Don’t rely on dimness alone—keep copy clear and buttons obvious so actions are easy to choose.',
  },
  {
    title: 'Portals and stacking',
    body: 'Dialogs render in a portal so they sit above the `isolation: isolate` app content and avoid local z-index wars.',
  },
  {
    title: 'Viewport overflow',
    body: 'Let long content overflow the bottom edge and reveal as you scroll the page container. Keep generous padding at the top and bottom so the dialog doesn’t feel jammed against the edges.',
  },
  {
    title: 'Nested dialogs and confirmations',
    body: 'If closing a dialog needs confirmation, open a child alert dialog rather than mutating the current one. The parent stays visible behind it; only the topmost layer should feel interactive.',
  },
  {
    title: 'Transitions that respect motion settings',
    body: 'Use small, fast transitions (opacity plus a few pixels of Y translation or scale). Subtle motion helps people notice what changed without slowing them down.',
  },
  {
    title: 'Controlled vs. uncontrolled',
    body: 'Controlled state is best when other parts of the page need to react to open/close. Uncontrolled is fine for local cases where only the dialog matters.',
  },
  {
    title: 'Close affordances',
    body: 'Always offer a visible close button in the corner. Don’t rely only on Esc or the backdrop for pointer outside presses. Touch screen readers and accessibility users benefit from a clear, targetable control to click to close the dialog.',
  },
  {
    title: 'Forms inside dialogs',
    body: 'Keep forms short; longer flows usually deserve a full page. Validate inline, keep button text specific (“Create project”), and disable destructive actions until the input is valid.',
  },
  {
    title: 'Content guidelines',
    body: 'Lead with the outcome (“Rename project?”) and follow with one or two short, concrete sentences. Avoid long prose; link out for details instead.',
  },
  {
    title: 'SSR and hydration notes',
    body: 'Because dialogs render in a portal, make sure your portal container exists on the client.',
  },
  {
    title: 'Mobile ergonomics',
    body: 'Use larger touch targets and keep the close button reachable with the thumb. Avoid full-screen modals unless the task truly needs a whole screen.',
  },
  {
    title: 'Theming and density',
    body: 'Match spacing and corner radius to your system. Use a slightly denser layout than pages so the dialog feels purpose-built, not like a mini web page.',
  },
  {
    title: 'Internationalization',
    body: 'Plan for longer text. Buttons can grow to two lines; titles should wrap gracefully. Keep destructive terms consistent across locales.',
  },
  {
    title: 'Performance',
    body: 'Children are mounted lazily when the dialog opens. If the dialog can reopen often, consider the `keepMounted` prop sparingly to perform the work only once on mount to avoid re-initializing complex React trees on each open.',
  },
  {
    title: 'When a popover is better',
    body: 'If the content is a small hint or a few quick actions anchored to a control, use a popover or menu instead of a dialog. Dialogs interrupt on purpose—use that sparingly.',
  },
  {
    title: 'Follow-up and cleanup',
    body: 'After a successful action, close the dialog and show confirmation in context (toast, inline message, or updated UI) so people can see the result of what they just did.',
  },
]

const RELATED_LINKS = [
  { href: '/docs?component=scroll-area', label: 'Scroll Area' },
  { href: '/docs?component=drawer', label: 'Drawer' },
  { href: '/docs?component=popover', label: 'Popover' },
] as const

import { Dialog } from '@hamur/react/dialog'

export default function DialogInsideScrollExample() {
  return (
    <Dialog.Root>
      <Dialog.Trigger className="button">Open dialog</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Backdrop className="backdrop" />
        <Dialog.Viewport className="inside-scroll-viewport">
          <Dialog.Popup className="inside-scroll-popup">
            <div className="inside-scroll-header">
              <Dialog.Title className="dialog-title">Dialog</Dialog.Title>
              <Dialog.Description className="muted">
                This layout keeps the popup fully on screen while allowing its content to scroll.
              </Dialog.Description>
            </div>
            <div className="inside-scroll-body">
              {CONTENT_SECTIONS.map((item) => (
                <section className="scroll-section" key={item.title}>
                  <h3 className="scroll-section-title">{item.title}</h3>
                  <p className="scroll-section-body">{item.body}</p>
                </section>
              ))}
            </div>
            <div className="inside-scroll-actions">
              <Dialog.Close className="button">Close</Dialog.Close>
            </div>
          </Dialog.Popup>
        </Dialog.Viewport>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

const CONTENT_SECTIONS = [
  {
    title: 'What a dialog is for',
    body: 'Use a dialog when you need the user to complete a focused task or read something important without navigating away. It opens on top of the page and returns focus back where it started when closed.',
  },
  {
    title: 'Anatomy at a glance',
    body: 'Root, Trigger, Portal, Backdrop, Popup, Title/Description, Close. Keep the title short and the first paragraph specific so screen readers announce something meaningful.',
  },
  {
    title: 'Opening and closing',
    body: 'Control it using external state via the `open` and `onOpenChange` props, or let it manage state for you internally.',
  },
  {
    title: 'Keyboard and focus behavior',
    body: 'Focus moves inside the dialog when it opens. Tab and Shift+Tab loop within, and Esc requests close.',
  },
  {
    title: 'Accessible labeling',
    body: 'Set an explicit title and description using the `Dialog.Title` and `Dialog.Description` components.',
  },
  {
    title: 'Backdrop and page scrolling',
    body: 'The backdrop visually separates layers while background content is inert. Don’t rely on dimness alone—keep copy clear and buttons obvious so actions are easy to choose.',
  },
  {
    title: 'Portals and stacking',
    body: 'Dialogs render in a portal so they sit above the `isolation: isolate` app content and avoid local z-index wars.',
  },
  {
    title: 'Viewport overflow',
    body: 'Let long content overflow the bottom edge and reveal as you scroll the page container. Keep generous padding at the top and bottom so the dialog doesn’t feel jammed against the edges.',
  },
  {
    title: 'Nested dialogs and confirmations',
    body: 'If closing a dialog needs confirmation, open a child alert dialog rather than mutating the current one. The parent stays visible behind it; only the topmost layer should feel interactive.',
  },
  {
    title: 'Transitions that respect motion settings',
    body: 'Use small, fast transitions (opacity plus a few pixels of Y translation or scale). Subtle motion helps people notice what changed without slowing them down.',
  },
  {
    title: 'Controlled vs. uncontrolled',
    body: 'Controlled state is best when other parts of the page need to react to open/close. Uncontrolled is fine for local cases where only the dialog matters.',
  },
  {
    title: 'Close affordances',
    body: 'Always offer a visible close button in the corner. Don’t rely only on Esc or the backdrop for pointer outside presses. Touch screen readers and accessibility users benefit from a clear, targetable control to click to close the dialog.',
  },
  {
    title: 'Forms inside dialogs',
    body: 'Keep forms short; longer flows usually deserve a full page. Validate inline, keep button text specific (“Create project”), and disable destructive actions until the input is valid.',
  },
  {
    title: 'Content guidelines',
    body: 'Lead with the outcome (“Rename project?”) and follow with one or two short, concrete sentences. Avoid long prose; link out for details instead.',
  },
  {
    title: 'SSR and hydration notes',
    body: 'Because dialogs render in a portal, make sure your portal container exists on the client.',
  },
  {
    title: 'Mobile ergonomics',
    body: 'Use larger touch targets and keep the close button reachable with the thumb. Avoid full-screen modals unless the task truly needs a whole screen.',
  },
  {
    title: 'Theming and density',
    body: 'Match spacing and corner radius to your system. Use a slightly denser layout than pages so the dialog feels purpose-built, not like a mini web page.',
  },
  {
    title: 'Internationalization',
    body: 'Plan for longer text. Buttons can grow to two lines; titles should wrap gracefully. Keep destructive terms consistent across locales.',
  },
  {
    title: 'Performance',
    body: 'Children are mounted lazily when the dialog opens. If the dialog can reopen often, consider the `keepMounted` prop sparingly to perform the work only once on mount to avoid re-initializing complex React trees on each open.',
  },
  {
    title: 'When a popover is better',
    body: 'If the content is a small hint or a few quick actions anchored to a control, use a popover or menu instead of a dialog. Dialogs interrupt on purpose—use that sparingly.',
  },
  {
    title: 'Follow-up and cleanup',
    body: 'After a successful action, close the dialog and show confirmation in context (toast, inline message, or updated UI) so people can see the result of what they just did.',
  },
]

import { Dialog } from '@hamur/react/dialog'

export default function DialogUncontainedExample() {
  return (
    <Dialog.Root>
      <Dialog.Trigger className="button">Open dialog</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Backdrop className="backdrop" />
        <Dialog.Viewport className="uncontained-viewport">
          <Dialog.Popup className="uncontained-root">
            <Dialog.Close className="uncontained-close" aria-label="Close">
              <XIcon />
            </Dialog.Close>
            <div className="uncontained-popup" />
          </Dialog.Popup>
        </Dialog.Viewport>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

function XIcon() {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeLinecap="square"
      strokeLinejoin="round"
      className="icon"
    >
      <path d="m2.5 2.5 11 11m-11 0 11-11" />
    </svg>
  )
}

import * as React from 'react'
import { Dialog } from '@hamur/react/dialog'

const demoDialog = Dialog.createHandle()

export default function DialogDetachedTriggersSimpleExample() {
  return (
    <React.Fragment>
      <Dialog.Trigger className="button" handle={demoDialog}>
        View notifications
      </Dialog.Trigger>

      <Dialog.Root handle={demoDialog}>
        <Dialog.Portal>
          <Dialog.Backdrop className="backdrop" />
          <Dialog.Popup className="dialog">
            <div className="dialog-intro">
              <Dialog.Title className="dialog-title">Notifications</Dialog.Title>
              <Dialog.Description className="muted">
                You are all caught up. Good job!
              </Dialog.Description>
            </div>
            <div className="actions">
              <Dialog.Close className="button">Close</Dialog.Close>
            </div>
          </Dialog.Popup>
        </Dialog.Portal>
      </Dialog.Root>
    </React.Fragment>
  )
}

import * as React from 'react'
import { Dialog } from '@hamur/react/dialog'

const demoDialog = Dialog.createHandle<number>()

export default function DialogDetachedTriggersControlledExample() {
  const [open, setOpen] = React.useState(false)
  const [triggerId, setTriggerId] = React.useState<string | null>(null)

  const handleOpenChange = (isOpen: boolean, eventDetails: Dialog.Root.ChangeEventDetails) => {
    setOpen(isOpen)
    setTriggerId(eventDetails.trigger?.id ?? null)
  }

  return (
    <React.Fragment>
      <div className="button-row">
        <Dialog.Trigger className="button" handle={demoDialog} id="trigger-1" payload={1}>
          Open 1
        </Dialog.Trigger>
        <Dialog.Trigger className="button" handle={demoDialog} id="trigger-2" payload={2}>
          Open 2
        </Dialog.Trigger>
        <Dialog.Trigger className="button" handle={demoDialog} id="trigger-3" payload={3}>
          Open 3
        </Dialog.Trigger>
        <button
          className="button"
          type="button"
          onClick={() => {
            setTriggerId('trigger-2')
            setOpen(true)
          }}
        >
          Open programmatically
        </button>
      </div>

      <Dialog.Root
        handle={demoDialog}
        open={open}
        onOpenChange={handleOpenChange}
        triggerId={triggerId}
      >
        {({ payload }) => (
          <Dialog.Portal>
            <Dialog.Backdrop className="backdrop" />
            <Dialog.Popup className="dialog">
              {payload !== undefined && (
                <Dialog.Title className="dialog-title">Dialog {payload}</Dialog.Title>
              )}
              <div className="actions">
                <Dialog.Close className="button">Close</Dialog.Close>
              </div>
            </Dialog.Popup>
          </Dialog.Portal>
        )}
      </Dialog.Root>
    </React.Fragment>
  )
}

import * as React from 'react'
import { Dialog } from '@hamur/react/dialog'
import { Menu } from '@hamur/react/menu'

export default function DialogOpenFromMenuExample() {
  const [dialogOpen, setDialogOpen] = React.useState(false)

  return (
    <React.Fragment>
      <Menu.Root>
        <Menu.Trigger className="button">
          Playlist <CaretDownIcon />
        </Menu.Trigger>
        <Menu.Portal>
          <Menu.Positioner sideOffset={8} align="start">
            <Menu.Popup className="menu">
              <Menu.Item className="menu-item">Play</Menu.Item>
              <Menu.Item className="menu-item">Share</Menu.Item>
              <Menu.Separator className="menu-separator" />
              {/* Open the dialog when the menu item is clicked */}
              <Menu.Item className="menu-item" onClick={() => setDialogOpen(true)}>
                Details…
              </Menu.Item>
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.Root>

      {/* Control the dialog state */}
      <Dialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
        <Dialog.Portal>
          <Dialog.Backdrop className="backdrop" />
          <Dialog.Popup className="dialog">
            <div className="dialog-intro">
              <Dialog.Title className="dialog-title">Playlist details</Dialog.Title>
              <Dialog.Description className="muted">
                This playlist contains 24 songs and was last updated today.
              </Dialog.Description>
            </div>
            <div className="actions">
              <Dialog.Close className="button">Close</Dialog.Close>
            </div>
          </Dialog.Popup>
        </Dialog.Portal>
      </Dialog.Root>
    </React.Fragment>
  )
}

function CaretDownIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" className="icon">
      <path d="M12 6H4l4 4.5z" />
    </svg>
  )
}