fix(overlay): Allow for custom onClick behavior

Author: mlaursen

packages/overlay/src/Overlay.tsx

@@ -79,6 +79,7 @@ export const Overlay = forwardRef<HTMLDivElement, OverlayProps>(
       portalInto,
       portalIntoId,
       tabIndex = -1,
+      onClick,
       ...props
     },
     nodeRef
@@ -112,7 +113,14 @@ export const Overlay = forwardRef<HTMLDivElement, OverlayProps>(
               }),
               className
             )}
-            onClick={onRequestClose}
+            onClick={(event) => {
+              onClick?.(event);
+              if (event.isPropagationStopped()) {
+                return;
+              }
+
+              onRequestClose();
+            }}
             tabIndex={tabIndex}
           >
             {children}

packages/overlay/src/__tests__/Overlay.tsx

@@ -56,4 +56,20 @@ describe("Overlay", () => {
     fireEvent.click(overlay);
     expect(onRequestClose).toBeCalledTimes(1);
   });
+
+  it("should not call onRequestClose if the onClick handler calls event.stopPropagation()", () => {
+    const onRequestClose = jest.fn();
+    const { getByTestId } = render(
+      <Overlay
+        data-testid="overlay"
+        visible
+        onRequestClose={onRequestClose}
+        onClick={(event) => event.stopPropagation()}
+      />
+    );
+
+    const overlay = getByTestId("overlay");
+    fireEvent.click(overlay);
+    expect(onRequestClose).not.toBeCalled();
+  });
 });