feat: Add clickOutside prop to Modal (#2214)

For the Ruff settings editor, I wanted to close the modal when pressing
escape, but not clicking outside. Turns out this wasn't possible with
our previous modal component.

Author: mattrunyon

packages/components/src/modal/Modal.test.tsx

@@ -8,6 +8,7 @@ function makeModal({
   className,
   children,
   keyboard,
+  clickOutside,
   isOpen,
   centered,
   onOpened,
@@ -17,6 +18,7 @@ function makeModal({
   className?: string;
   children?;
   keyboard?: boolean;
+  clickOutside?: boolean;
   isOpen?: boolean;
   centered?: boolean;
   onOpened?: () => void;
@@ -27,6 +29,7 @@ function makeModal({
     <Modal
       className={className}
       keyboard={keyboard}
+      clickOutside={clickOutside}
       isOpen={isOpen}
       centered={centered}
       onOpened={onOpened}
@@ -103,6 +106,32 @@ it('closes only when clicking outside the modal', async () => {
   expect(toggle).toBeCalledTimes(0);
 });
 
+it('does not close on mouseUp outside the modal when initiated from inside the modal', async () => {
+  const user = userEvent.setup();
+  const toggle = jest.fn();
+  render(makeModal({ isOpen: true, toggle }));
+
+  const modalContent = document.querySelector('.modal-content')!;
+  await user.pointer({ target: modalContent, keys: '[MouseLeft>]' });
+  expect(toggle).toBeCalledTimes(0);
+
+  await user.pointer({
+    target: screen.getByRole('dialog'),
+    keys: '[/MouseLeft]',
+  });
+  expect(toggle).toBeCalledTimes(0);
+});
+
+it('does not close when clicking outside when clickOutside is false', async () => {
+  const user = userEvent.setup();
+  const toggle = jest.fn();
+  render(makeModal({ isOpen: true, toggle, clickOutside: false }));
+
+  // note that outer div covers the entire screen
+  await user.click(screen.getByRole('dialog'));
+  expect(toggle).toBeCalledTimes(0);
+});
+
 it('calls onOpen when opens', () => {
   const onOpened = jest.fn();
   const toggle = jest.fn();

packages/components/src/modal/Modal.tsx

@@ -16,6 +16,7 @@ interface ModalProps {
   children?: ReactNode;
   role?: string;
   keyboard?: boolean;
+  clickOutside?: boolean;
   isOpen?: boolean;
   centered?: boolean;
   size?: 'sm' | 'lg' | 'xl' | undefined;
@@ -30,6 +31,7 @@ function Modal({
   children,
   role = 'role',
   keyboard = true,
+  clickOutside = true,
   isOpen = false,
   centered = false,
   size,
@@ -146,6 +148,7 @@ function Modal({
               onMouseUp={e => {
                 if (
                   backgroundClicked &&
+                  clickOutside &&
                   e.target === background.current &&
                   toggle !== undefined
                 ) {