From 95fdf92cc2d27d994bc7d558d21ae79a12fb6202 Mon Sep 17 00:00:00 2001
From: Justin Powell <jpowell@users.noreply.github.com>
Date: Wed, 10 Oct 2018 14:52:42 -0500
Subject: [PATCH] react-modal updates for 3.6 (#29585)

* updates react-modal definitions for 3.6

* adds specs for react-modal definition updates

* adds attribution for react-modal updates

* remove trailing whitespace
---
 types/react-modal/index.d.ts            | 11 +++++++++--
 types/react-modal/react-modal-tests.tsx |  6 ++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/types/react-modal/index.d.ts b/types/react-modal/index.d.ts
index 237c725332..d04a6b5c18 100644
--- a/types/react-modal/index.d.ts
+++ b/types/react-modal/index.d.ts
@@ -1,11 +1,12 @@
-// Type definitions for react-modal 3.2
+// Type definitions for react-modal 3.6
 // Project: https://github.com/reactjs/react-modal
 // Definitions by: Rajab Shakirov <https://github.com/radziksh>,
 //                 Drew Noakes <https://github.com/drewnoakes>,
 //                 Thomas B Homburg <https://github.com/homburg>,
 //                 Tatu Tamminen <https://github.com/ttamminen>,
 //                 Uwe Wiemer <https://github.com/hallowatcher>,
-//                 Peter Blazejewicz <https://github.com/peterblazejewicz>
+//                 Peter Blazejewicz <https://github.com/peterblazejewicz>,
+//                 Justin Powell <https://github.com/jpowell>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -48,6 +49,9 @@ declare namespace ReactModal {
         /* String className to be applied to the document.body. */
         bodyOpenClassName?: string;
 
+        /* String className to be applied to the document.html. */
+        htmlOpenClassName?: string;
+
         /* String or object className to be applied to the modal content. */
         className?: string | Classes;
 
@@ -87,6 +91,9 @@ declare namespace ReactModal {
         /* Additional aria attributes. */
         aria?: Aria;
 
+        /* Additional data attributes to be applied to to the modal content in the form of "data-*" */
+        data?: any;
+
         /* String indicating the role of the modal, allowing the 'dialog' role to be applied if desired. */
         role?: string;
 
diff --git a/types/react-modal/react-modal-tests.tsx b/types/react-modal/react-modal-tests.tsx
index 463ac1c7be..8dfd6d35e3 100644
--- a/types/react-modal/react-modal-tests.tsx
+++ b/types/react-modal/react-modal-tests.tsx
@@ -51,6 +51,10 @@ class ExampleOfUsingReactModal extends React.Component {
       labelledby: 'labelledby',
       describedby: 'describedby'
     };
+    const customDataVariables = {
+      dataOne: 'one',
+      dataTwo: 'two'
+    };
     return (
       <ReactModal
         isOpen={true}
@@ -62,7 +66,9 @@ class ExampleOfUsingReactModal extends React.Component {
         className={customClasses}
         overlayClassName={customOverlayClasses}
         bodyOpenClassName={'bodyOpenClassName'}
+        htmlOpenClassName={'htmlOpenClassName'}
         aria={customAriaVariables}
+        data={customDataVariables}
         contentRef={instance => this.contentRef = instance}
         overlayRef={instance => this.overlayRef = instance}
         >