Positioned dialog

An example of positioning the dialog using floating UI.

import { useRef, useState } from 'react';
import {
  arrow,
  autoUpdate,
  flip,
  FloatingArrow,
  offset,
  useFloating,
} from '@floating-ui/react';
import { Dialog } from '@citizensadvice/react-dialogs';

export function Example() {
  const [show, setShow] = useState();
  const arrowRef = useRef();

  const { context, refs, floatingStyles } = useFloating({
    middleware: [offset(8), flip(), arrow({ element: arrowRef })],
    whileElementsMounted: autoUpdate,
  });

  return (
    <div className="centred-button">
      <button
        type="button"
        onClick={() => setShow(!show)}
        aria-expanded={show}
        aria-haspopup="dialog"
        ref={refs.setReference}
      >
        Toggle
      </button>
      {show && (
        <Dialog
          className="dialog-small"
          onClose={() => setShow(false)}
          ref={refs.setFloating}
          style={floatingStyles}
          title="Dialog title"
        >
          <FloatingArrow ref={arrowRef} context={context} />
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </Dialog>
      )}
    </div>
  );
}