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

@@ -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;

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>
+    );
 };