From 844a47c74e4d33c6a6925ad69eb1d55eefc75183 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?=
 <grzegorz@gziolo.pl>
Date: Thu, 8 Aug 2019 11:46:01 +0200
Subject: [PATCH] Components: Stop using `react-click-outside` as a depenency
 (#16878)

---
 package-lock.json                      | 16 ----------------
 packages/components/CHANGELOG.md       |  1 +
 packages/components/package.json       |  1 -
 packages/components/src/modal/frame.js | 12 ++++--------
 4 files changed, 5 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2413d9d0c96d2..99732d520f926 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4727,7 +4727,6 @@
 				"moment": "^2.22.1",
 				"mousetrap": "^1.6.2",
 				"re-resizable": "^5.0.1",
-				"react-click-outside": "^3.0.0",
 				"react-dates": "^17.1.1",
 				"react-spring": "^8.0.20",
 				"rememo": "^3.0.0",
@@ -21573,21 +21572,6 @@
 				"prop-types": "^15.5.6"
 			}
 		},
-		"react-click-outside": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/react-click-outside/-/react-click-outside-3.0.1.tgz",
-			"integrity": "sha512-d0KWFvBt+esoZUF15rL2UBB7jkeAqLU8L/Ny35oLK6fW6mIbOv/ChD+ExF4sR9PD26kVx+9hNfD0FTIqRZEyRQ==",
-			"requires": {
-				"hoist-non-react-statics": "^2.1.1"
-			},
-			"dependencies": {
-				"hoist-non-react-statics": {
-					"version": "2.5.5",
-					"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
-					"integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
-				}
-			}
-		},
 		"react-dates": {
 			"version": "17.2.0",
 			"resolved": "https://registry.npmjs.org/react-dates/-/react-dates-17.2.0.tgz",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index de312a2b2e761..afe7a14e81421 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -17,6 +17,7 @@
 
 - The `Dropdown` component has been refactored to focus changes using the `Popover` component's `onFocusOutside` prop.
 - The `MenuItem` component will now always use an `IconButton`. This prevents a focus loss when clicking a menu item.
+- Package no longer depends on external `react-click-outside` library.
 
 ## 8.0.0 (2019-06-12)
 
diff --git a/packages/components/package.json b/packages/components/package.json
index 7421ef260b543..c8c1df080d67a 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -42,7 +42,6 @@
 		"moment": "^2.22.1",
 		"mousetrap": "^1.6.2",
 		"re-resizable": "^5.0.1",
-		"react-click-outside": "^3.0.0",
 		"react-dates": "^17.1.1",
 		"react-spring": "^8.0.20",
 		"rememo": "^3.0.0",
diff --git a/packages/components/src/modal/frame.js b/packages/components/src/modal/frame.js
index 04f738e2fa254..35cb4b96c88d0 100644
--- a/packages/components/src/modal/frame.js
+++ b/packages/components/src/modal/frame.js
@@ -6,14 +6,10 @@ import { ESCAPE } from '@wordpress/keycodes';
 import { focus } from '@wordpress/dom';
 import { withGlobalEvents, compose } from '@wordpress/compose';
 
-/**
- * External dependencies
- */
-import clickOutside from 'react-click-outside';
-
 /**
  * Internal dependencies
  */
+import withFocusOutside from '../higher-order/with-focus-outside';
 import withFocusReturn from '../higher-order/with-focus-return';
 import withConstrainedTabbing from '../higher-order/with-constrained-tabbing';
 
@@ -23,7 +19,7 @@ class ModalFrame extends Component {
 
 		this.containerRef = createRef();
 		this.handleKeyDown = this.handleKeyDown.bind( this );
-		this.handleClickOutside = this.handleClickOutside.bind( this );
+		this.handleFocusOutside = this.handleFocusOutside.bind( this );
 		this.focusFirstTabbable = this.focusFirstTabbable.bind( this );
 	}
 
@@ -52,7 +48,7 @@ class ModalFrame extends Component {
 	 *
 	 * @param {Object} event Mouse click event.
 	 */
-	handleClickOutside( event ) {
+	handleFocusOutside( event ) {
 		if ( this.props.shouldCloseOnClickOutside ) {
 			this.onRequestClose( event );
 		}
@@ -133,7 +129,7 @@ class ModalFrame extends Component {
 export default compose( [
 	withFocusReturn,
 	withConstrainedTabbing,
-	clickOutside,
+	withFocusOutside,
 	withGlobalEvents( {
 		keydown: 'handleKeyDown',
 	} ),