Alert Dialog

import * as React from 'react'
import { AlertDialog } from '@hamur/react/alert-dialog'

const demoAlertDialog = AlertDialog.createHandle()

export default function AlertDialogDetachedTriggersSimpleExample() {
  return (
    <React.Fragment>
      <AlertDialog.Trigger className="button danger" handle={demoAlertDialog}>
        Discard draft
      </AlertDialog.Trigger>

      <AlertDialog.Root handle={demoAlertDialog}>
        <AlertDialog.Portal>
          <AlertDialog.Backdrop className="backdrop" />
          <AlertDialog.Popup className="dialog">
            <div className="dialog-intro">
              <AlertDialog.Title className="dialog-title">Discard draft?</AlertDialog.Title>
              <AlertDialog.Description className="muted">
                This action cannot be undone.
              </AlertDialog.Description>
            </div>
            <div className="actions">
              <AlertDialog.Close className="button">Cancel</AlertDialog.Close>
              <AlertDialog.Close className="button danger">Discard</AlertDialog.Close>
            </div>
          </AlertDialog.Popup>
        </AlertDialog.Portal>
      </AlertDialog.Root>
    </React.Fragment>
  )
}

import * as React from 'react'
import { AlertDialog } from '@hamur/react/alert-dialog'

type AlertPayload = { message: string }

const demoAlertDialog = AlertDialog.createHandle<AlertPayload>()

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

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

  return (
    <React.Fragment>
      <div className="button-row">
        <AlertDialog.Trigger
          className="button danger"
          handle={demoAlertDialog}
          id="alert-trigger-1"
          payload={{ message: 'Discard draft?' }}
        >
          Discard
        </AlertDialog.Trigger>
        <AlertDialog.Trigger
          className="button danger"
          handle={demoAlertDialog}
          id="alert-trigger-2"
          payload={{ message: 'Delete project?' }}
        >
          Delete
        </AlertDialog.Trigger>
        <AlertDialog.Trigger
          className="button"
          handle={demoAlertDialog}
          id="alert-trigger-3"
          payload={{ message: 'Sign out?' }}
        >
          Sign out
        </AlertDialog.Trigger>
        <button
          className="button"
          type="button"
          onClick={() => {
            setTriggerId('alert-trigger-2')
            setOpen(true)
          }}
        >
          Open programmatically
        </button>
      </div>

      <AlertDialog.Root<AlertPayload>
        handle={demoAlertDialog}
        open={open}
        onOpenChange={handleOpenChange}
        triggerId={triggerId}
      >
        {({ payload }) => (
          <AlertDialog.Portal>
            <AlertDialog.Backdrop className="backdrop" />
            <AlertDialog.Popup className="dialog">
              <div className="dialog-intro">
                <AlertDialog.Title className="dialog-title">
                  {payload?.message ?? 'Are you sure?'}
                </AlertDialog.Title>
                <AlertDialog.Description className="muted">
                  This action cannot be undone.
                </AlertDialog.Description>
              </div>
              <div className="actions">
                <AlertDialog.Close className="button">Cancel</AlertDialog.Close>
                <AlertDialog.Close className="button danger">Confirm</AlertDialog.Close>
              </div>
            </AlertDialog.Popup>
          </AlertDialog.Portal>
        )}
      </AlertDialog.Root>
    </React.Fragment>
  )
}

import * as React from 'react'
import { AlertDialog } from '@hamur/react/alert-dialog'
import { Menu } from '@hamur/react/menu'

export default function AlertDialogOpenFromMenuExample() {
  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 alert dialog when the menu item is clicked */}
              <Menu.Item className="menu-item" onClick={() => setDialogOpen(true)}>
                Delete…
              </Menu.Item>
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.Root>

      {/* Control the alert dialog state */}
      <AlertDialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
        <AlertDialog.Portal>
          <AlertDialog.Backdrop className="backdrop" />
          <AlertDialog.Popup className="dialog">
            <div className="dialog-intro">
              <AlertDialog.Title className="dialog-title">Delete playlist?</AlertDialog.Title>
              <AlertDialog.Description className="muted">
                You can't undo this action.
              </AlertDialog.Description>
            </div>
            <div className="actions">
              <AlertDialog.Close className="button">Cancel</AlertDialog.Close>
              <AlertDialog.Close className="button danger">Delete</AlertDialog.Close>
            </div>
          </AlertDialog.Popup>
        </AlertDialog.Portal>
      </AlertDialog.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>
  )
}