From 565c96ae0c2494db2a0423202a64d053fb04cf2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20B=C5=82a=C5=BCejewicz=20=28Peter=20Blazejewicz=29?=
 <peterblazejewicz@users.noreply.github.com>
Date: Fri, 17 Jan 2020 19:27:27 +0100
Subject: [PATCH] feat(react-modal): optional parametrized `onAfterOpen`
 (#41475)

This aligns definition of the `onAfterOpen` callback function with
changes introduced here:
reactjs/react-modal#741
that is optionally typed object containing references to the overlay and
content elements.

Thanks!
---
 types/react-modal/index.d.ts            | 15 ++++++++++++++-
 types/react-modal/react-modal-tests.tsx | 17 +++++++++++++++--
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/types/react-modal/index.d.ts b/types/react-modal/index.d.ts
index 3ca3b6865e..fe1a2fdf23 100644
--- a/types/react-modal/index.d.ts
+++ b/types/react-modal/index.d.ts
@@ -37,6 +37,19 @@ declare namespace ReactModal {
         modal?: boolean | 'false' | 'true';
     }
 
+    /** Describes overlay and content element references passed to onAfterOpen function */
+    interface OnAfterOpenCallbackOptions {
+        /** overlay element reference */
+        overlayEl: Element;
+        /** content element reference */
+        contentEl: HTMLDivElement;
+    }
+
+    /** Describes unction that will be run after the modal has opened */
+    interface OnAfterOpenCallback {
+        (obj?: OnAfterOpenCallbackOptions): void;
+    }
+
     interface Props {
         /* Boolean describing if the modal should be shown or not. Defaults to false. */
         isOpen: boolean;
@@ -63,7 +76,7 @@ declare namespace ReactModal {
         appElement?: HTMLElement | {};
 
         /* Function that will be run after the modal has opened. */
-        onAfterOpen?(): void;
+        onAfterOpen?: OnAfterOpenCallback;
 
         /* Function that will be run after the modal has closed. */
         onAfterClose?(): void;
diff --git a/types/react-modal/react-modal-tests.tsx b/types/react-modal/react-modal-tests.tsx
index 0e515f21c6..2820234ef1 100644
--- a/types/react-modal/react-modal-tests.tsx
+++ b/types/react-modal/react-modal-tests.tsx
@@ -11,7 +11,12 @@ class ExampleOfUsingReactModal extends React.Component {
   contentRef: HTMLDivElement;
   overlayRef: HTMLDivElement;
   render() {
-    const onAfterOpenFn = () => { };
+    const reactModalRef = React.useRef<ReactModal>();
+    // typed params of `OnAfterOpen` callback
+    const onAfterOpenFn: ReactModal.OnAfterOpenCallback = ({ contentEl, overlayEl }) => {
+        console.assert(contentEl === reactModalRef.current.portal.content);
+        console.assert(overlayEl === reactModalRef.current.portal.overlay);
+    };
     const onAfterCloseFn = () => { };
     const onRequestCloseFn = (event: React.MouseEvent | React.KeyboardEvent) => { };
     const customStyle: ReactModal.Styles = {
@@ -85,11 +90,19 @@ class ExampleOfUsingReactModal extends React.Component {
 
 const MyWrapperComponent: React.FC = () => {
     const reactModaRef = React.useRef<ReactModal>();
+    // typed params of `OnAfterOpen` are optional for backward compatible types
+    const onAfterOpenOptionalObjFn = () => {};
 
     React.useLayoutEffect(() => {
         reactModaRef.current.portal.overlay.getAttribute('foo');
         reactModaRef.current.portal.content.focus();
     });
 
-    return <ReactModal isOpen ref={reactModaRef}>Hello, World!</ReactModal>;
+    return (
+        <ReactModal isOpen
+            onAfterOpen={onAfterOpenOptionalObjFn}
+            ref={reactModaRef}>
+            Hello, World!
+        </ReactModal>
+    );
 };