Components: Stop using react-click-outside as a depenency (#16878)

WordPress · Aug 29, 2019 · 844a47c · 844a47c
1 parent 9f32f13
commit 844a47c
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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',
  } ),