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.

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
  ) {