Click outside a modal should close the modal

[tom-teamcoda]

Describe the problem feature solves
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
When want to close a modal or pop-up the close buttons should be clicked. Would be more intuitive to just click outside the modal

Describe the solution you'd like
A clear and concise description of what you want to happen.
Click outside a modal should close the modal

[ariansobczak-rst]

To close modal on clicking outside you can use callback onOverlayClick from ModalProps.

Please see example https://storybook.adminjs.co/?path=/story/designsystem-molecules-modal--default or

import React, { FC, useCallback, useState } from 'react';
import { Box, Button, Modal, ModalProps } from '@adminjs/design-system';

const ModalExample: FC = () => {
  const [showModal, setShowModal] = useState(false);
  const handleButtonClick = useCallback(() => setShowModal(true), []);

  const modalProps: ModalProps = {
    variant: 'primary',
    label: 'Modal header',
    icon: 'PopUp',
    title: 'Modal title',
    subTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    buttons: [{ label: 'Cancel' }, { label: 'Delete', variant: 'danger' }],
    onClose: () => setShowModal(false),
    onOverlayClick: () => setShowModal(false),
  };

  return (
    <Box m="xl">
      <Button onClick={handleButtonClick}>Show modal</Button>
      {showModal && <Modal {...modalProps}></Modal>}
    </Box>
  );
};

export default ModalExample;

Currently, we are improving the example/demo page of AdminJS, and a modal example will be presented also there.