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', } ),