Dialogs and floating surfaces

<div class="catalog-row">
  <label>
    <Input
      type="checkbox"
      checked={locked}
      onChange={(event) => setLocked(event.currentTarget.checked)}
    />{' '}
    Locked item
  </label>
  <label>
    <Input
      type="checkbox"
      checked={customOnly}
      onChange={(event) => setCustomOnly(event.currentTarget.checked)}
    />{' '}
    Hide standard actions
  </label>
</div>
<DialogForm
  aria-label="Shared editor composition"
  onSubmit={(event) => {
    event.preventDefault();
    setResult(`Saved ${title}`);
  }}
>
  <EditableDialogHeader
    titleId="shared-editor-title"
    title={title}
    name="Edit event"
    inputLabel="Event title"
    inputProps={{
      value: title,
      disabled: locked,
      onInput: (event) => setTitle(event.currentTarget.value),
    }}
    closeLabel="Close example"
    onClose={() => setResult('Closed')}
  />
  {locked && (
    <Alert class="rv-dialog__message" tone="danger">
      This item is locked. Editing is disabled.
    </Alert>
  )}
  <DialogBody>
    <p>Shared editable heading, body, and bottom action panel.</p>
  </DialogBody>
  <DialogActionFooter
    deleteAction={
      customOnly
        ? false
        : { disabled: locked, onClick: () => setResult('Deleted') }
    }
    reset={
      customOnly
        ? false
        : {
            disabled: locked,
            onClick: () => {
              setTitle('Project review');
              setResult('Reset');
            },
          }
    }
    cancel={customOnly ? false : { onClick: () => setResult('Canceled') }}
    save={customOnly ? false : { disabled: locked }}
    start={
      <ButtonControl
        type="button"
        onClick={() => setResult('Custom start')}
      >
        Custom start
      </ButtonControl>
    }
    end={
      <ButtonControl
        type="button"
        onClick={() => setResult('Custom end')}
      >
        Custom end
      </ButtonControl>
    }
  />
</DialogForm>
<output aria-label="Dialog action result">{result}</output>

<div class="catalog-row">
  <Button onClick={() => setDialog(true)}>Open dialog</Button>
  <Button onClick={() => setConfirm(true)}>Confirm action</Button>
  <Button
    ref={setAnchor}
    onClick={() => setPopover(!popover)}
    aria-expanded={popover}
  >
    Open popover
  </Button>
</div>
<output aria-label="Confirmation result">{confirmation}</output>