Dialog

const Preview = () => {
  return (
    <Dialog.TriggerContext>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      <Dialog>
        <Heading style={{ marginBottom: 'var(--ds-size-2)' }}>
          Dialog header
        </Heading>
        <Paragraph style={{ marginBottom: 'var(--ds-size-2)' }}>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis
          doloremque obcaecati assumenda odio ducimus sunt et.
        </Paragraph>
        <Paragraph data-size='sm'>Dialog footer</Paragraph>
      </Dialog>
    </Dialog.TriggerContext>
  );
};

render(<Preview />)

const WithCommand = () => (
  <>
    <Button command='show-modal' commandfor='my-dialog-commant'>
      Open Dialog with ref
    </Button>
    <Dialog id='my-dialog-commant'>
      <Heading style={{ marginBottom: 'var(--ds-size-2)' }}>
        Dialog header
      </Heading>
      <Paragraph style={{ marginBottom: 'var(--ds-size-2)' }}>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis
        doloremque obcaecati assumenda odio ducimus sunt et.
      </Paragraph>
    </Dialog>
  </>
);

render(<WithCommand />)

const WithRef = () => {
  const dialogRef = useRef<HTMLDialogElement>(null);

  return (
    <>
      <Button
        aria-haspopup='dialog'
        onClick={() => dialogRef.current?.showModal()}
      >
        Open Dialog with ref
      </Button>
      <Dialog ref={dialogRef}>
        <Heading style={{ marginBottom: 'var(--ds-size-2)' }}>
          Dialog header
        </Heading>
        <Paragraph style={{ marginBottom: 'var(--ds-size-2)' }}>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis
          doloremque obcaecati assumenda odio ducimus sunt et.
        </Paragraph>
      </Dialog>
    </>
  );
};

render(<WithRef />)

const WithForm = () => {
  const [input, setInput] = useState('');

  return (
    <Dialog.TriggerContext>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      <Dialog onClose={() => setInput('')} closedby='any' id='my-dialog-form'>
        <Heading style={{ marginBottom: 'var(--ds-size-2)' }}>
          Dialog med skjema
        </Heading>
        <Textfield
          label='Navn'
          value={input}
          onChange={(e) => setInput(e.target.value)}
          // @ts-expect-error We want the native "autofocus" and Reacts onMount smartness (see https://react.dev/reference/react-dom/components/input#input)
          autofocus='true'
        />
        <div
          style={{
            display: 'flex',
            gap: 'var(--ds-size-4)',
            marginTop: 'var(--ds-size-4)',
          }}
        >
          <Button
            command='close'
            commandfor='my-dialog-form'
            onClick={() => alert(`Du har sendt inn skjema med navn: ${input}`)}
          >
            Send inn skjema
          </Button>
          <Button
            variant='secondary'
            data-color='danger'
            command='close'
            commandfor='my-dialog-form'
          >
            Avbryt
          </Button>
        </div>
      </Dialog>
    </Dialog.TriggerContext>
  );
};

render(<WithForm />)

const WithBlocks = () => (
  <Dialog.TriggerContext>
    <Dialog.Trigger>Open Dialog</Dialog.Trigger>
    <Dialog id='my-dialog-blocks'>
      <Dialog.Block>
        <Paragraph data-size='sm'>Dialog subtitle</Paragraph>
        <Heading>Dialog with dividers</Heading>
      </Dialog.Block>
      <Dialog.Block>
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
          sodales eros justo.
        </Paragraph>
      </Dialog.Block>
      <Dialog.Block>
        <Button
          variant='secondary'
          command='close'
          commandfor='my-dialog-blocks'
        >
          Lukk
        </Button>
      </Dialog.Block>
    </Dialog>
  </Dialog.TriggerContext>
);

render(<WithBlocks />)

const CloseWithClickOutside = () => (
  <Dialog.TriggerContext>
    <Dialog.Trigger>Open Dialog</Dialog.Trigger>
    <Dialog closedby='any'>
      <Heading>Click outside to close</Heading>
    </Dialog>
  </Dialog.TriggerContext>
);

render(<CloseWithClickOutside />)