Compose: Extract UI-less Higher order components into a wordpress/com…

…pose package

components/autocomplete/index.js

@@ -8,9 +8,10 @@ import 'element-closest';
 /**
  * WordPress dependencies
  */
-import { Component, compose, renderToString } from '@wordpress/element';
+import { Component, renderToString } from '@wordpress/element';
 import { ENTER, ESCAPE, UP, DOWN, LEFT, RIGHT, SPACE } from '@wordpress/keycodes';
 import { __, _n, sprintf } from '@wordpress/i18n';
+import { withInstanceId, compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -19,7 +20,6 @@ import './style.scss';
 import withFocusOutside from '../higher-order/with-focus-outside';
 import Button from '../button';
 import Popover from '../popover';
-import withInstanceId from '../higher-order/with-instance-id';
 import withSpokenMessages from '../higher-order/with-spoken-messages';
 
 /**

components/checkbox-control/index.js

@@ -1,8 +1,12 @@
+/**
+ * External dependencies
+ */
+import { withInstanceId } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
 import BaseControl from '../base-control';
-import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
 function CheckboxControl( { label, className, heading, checked, help, instanceId, onChange, ...props } ) {

components/deprecated.js

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { mapValues } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	ifCondition,
+	withGlobalEvents,
+	withInstanceId,
+	withSafeTimeout,
+	withState,
+} from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
+
+const deprecatedFunctions = {
+	ifCondition,
+	withGlobalEvents,
+	withInstanceId,
+	withSafeTimeout,
+	withState,
+};
+
+export default mapValues( deprecatedFunctions, ( deprecatedFunction, key ) => {
+	return ( ...args ) => {
+		deprecated( 'wp.components.' + key, {
+			version: '3.5',
+			alternative: 'wp.compose.' + key,
+		} );
+
+		return deprecatedFunction( ...args );
+	};
+} );

components/draggable/index.js

@@ -8,11 +8,11 @@ import classnames from 'classnames';
  * WordPress Dependencies
  */
 import { Component } from '@wordpress/element';
+import { withSafeTimeout } from '@wordpress/compose';
 
 /**
  * Internal Dependencies
  */
-import withSafeTimeout from '../higher-order/with-safe-timeout';
 import './style.scss';
 
 const dragImageClass = 'components-draggable__invisible-drag-image';

components/focusable-iframe/index.js

@@ -7,11 +7,7 @@ import { omit } from 'lodash';
  * WordPress dependencies
  */
 import { Component, createRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import withGlobalEvents from '../higher-order/with-global-events';
+import { withGlobalEvents } from '@wordpress/compose';
 
 /**
  * Browser dependencies

components/form-token-field/index.js

@@ -9,6 +9,7 @@ import classnames from 'classnames';
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
+import { withInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -17,7 +18,6 @@ import './style.scss';
 import Token from './token';
 import TokenInput from './token-input';
 import SuggestionsList from './suggestions-list';
-import withInstanceId from '../higher-order/with-instance-id';
 import withSpokenMessages from '../higher-order/with-spoken-messages';
 
 const initialState = {

components/form-token-field/token.js

@@ -7,7 +7,7 @@ import { noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import withInstanceId from '../higher-order/with-instance-id';
+import { withInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**

components/index.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import deprecated from './deprecated';
+
 // Components
 export { default as APIProvider } from './higher-order/with-api-data/provider';
 export { default as Autocomplete } from './autocomplete';
@@ -57,7 +62,6 @@ export { default as TreeSelect } from './tree-select';
 export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
 
 // Higher-Order Components
-export { default as ifCondition } from './higher-order/if-condition';
 export { default as navigateRegions } from './higher-order/navigate-regions';
 export { default as withAPIData } from './higher-order/with-api-data';
 export { default as withContext } from './higher-order/with-context';
@@ -66,9 +70,11 @@ export { default as withFallbackStyles } from './higher-order/with-fallback-styl
 export { default as withFilters } from './higher-order/with-filters';
 export { default as withFocusOutside } from './higher-order/with-focus-outside';
 export { default as withFocusReturn } from './higher-order/with-focus-return';
-export { default as withGlobalEvents } from './higher-order/with-global-events';
-export { default as withInstanceId } from './higher-order/with-instance-id';
 export { default as withNotices } from './higher-order/with-notices';
-export { default as withSafeTimeout } from './higher-order/with-safe-timeout';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
-export { default as withState } from './higher-order/with-state';
+
+export const ifCondition = deprecated.ifCondition;
+export const withGlobalEvents = deprecated.withGlobalEvents;
+export const withInstanceId = deprecated.withInstanceId;
+export const withSafeTimeout = deprecated.withSafeTimeout;
+export const withState = deprecated.withState;

components/menu-group/index.js

@@ -8,13 +8,13 @@ import classnames from 'classnames';
  */
 import { Children } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
+import { withInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import { NavigableMenu } from '../navigable-container';
-import withInstanceId from '../higher-order/with-instance-id';
 
 export function MenuGroup( {
 	children,

components/modal/frame.js

@@ -1,9 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { Component, compose, createRef } from '@wordpress/element';
+import { Component, createRef } from '@wordpress/element';
 import { ESCAPE } from '@wordpress/keycodes';
 import { focus } from '@wordpress/dom';
+import { withGlobalEvents, compose } from '@wordpress/compose';
 
 /**
  * External dependencies
@@ -16,7 +17,6 @@ import clickOutside from 'react-click-outside';
 import './style.scss';
 import withFocusReturn from '../higher-order/with-focus-return';
 import withConstrainedTabbing from '../higher-order/with-constrained-tabbing';
-import withGlobalEvents from '../higher-order/with-global-events';
 
 class ModalFrame extends Component {
 	constructor() {

components/modal/index.js

@@ -8,6 +8,7 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { Component, createPortal } from '@wordpress/element';
+import { withInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -16,7 +17,6 @@ import './style.scss';
 import ModalFrame from './frame';
 import ModalHeader from './header';
 import * as ariaHelper from './aria-helper';
-import withInstanceId from '../higher-order/with-instance-id';
 
 // Used to count the number of open modals.
 let parentElement,

components/radio-control/index.js

@@ -4,11 +4,15 @@
 import { isEmpty } from 'lodash';
 import classnames from 'classnames';
 
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
 import BaseControl from '../base-control';
-import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
 function RadioControl( { label, className, selected, help, instanceId, onChange, options = [] } ) {

components/range-control/index.js

@@ -8,12 +8,12 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { withInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { BaseControl, Button, Dashicon } from '../';
-import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
 function RangeControl( {

components/sandbox/index.js

@@ -2,12 +2,12 @@
  * WordPress dependencies
  */
 import { Component, renderToString, createRef } from '@wordpress/element';
+import { withGlobalEvents } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import FocusableIframe from '../focusable-iframe';
-import withGlobalEvents from '../higher-order/with-global-events';
 
 class Sandbox extends Component {
 	constructor() {
@@ -151,7 +151,7 @@ class Sandbox extends Component {
 						aspectRatio = potentialIframe.width / potentialIframe.height;
 						potentialIframe.width = '100%';
 					}
-				}					
+				}
 
 				sendResize();
 

components/select-control/index.js

@@ -3,11 +3,15 @@
  */
 import { isEmpty } from 'lodash';
 
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
 import BaseControl from '../base-control';
-import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
 function SelectControl( {

components/tab-panel/index.js

@@ -7,11 +7,11 @@ import { partial, noop, find } from 'lodash';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
+import { withInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { default as withInstanceId } from '../higher-order/with-instance-id';
 import { NavigableMenu } from '../navigable-container';
 
 const TabButton = ( { tabId, onClick, children, selected, ...rest } ) => (

components/text-control/index.js

@@ -1,8 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
 import BaseControl from '../base-control';
-import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
 function TextControl( { label, value, help, className, instanceId, onChange, type = 'text', ...props } ) {

components/textarea-control/index.js

@@ -1,8 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
 import BaseControl from '../base-control';
-import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
 function TextareaControl( { label, value, help, instanceId, onChange, rows = 4, className, ...props } ) {

components/toggle-control/index.js

@@ -7,12 +7,12 @@ import { isFunction } from 'lodash';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import FormToggle from '../form-toggle';
-import withInstanceId from '../higher-order/with-instance-id';
+import { withInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
+import FormToggle from '../form-toggle';
 import BaseControl from './../base-control';
 import './style.scss';
 

core-blocks/block/edit-panel/index.js

@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { Button, withInstanceId } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { Component, Fragment, createRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { ESCAPE } from '@wordpress/keycodes';
+import { withInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies

core-blocks/block/edit.js

@@ -6,11 +6,12 @@ import { noop, partial } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, Fragment, compose } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
 import { Placeholder, Spinner, Disabled } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { BlockEdit } from '@wordpress/editor';
+import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies

core-blocks/file/edit.js

@@ -15,14 +15,15 @@ import {
 	withNotices,
 } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
-import { Component, compose, Fragment } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
 import {
 	MediaUpload,
 	MediaPlaceholder,
 	BlockControls,
 	RichText,
 	editorMediaUpload,
 } from '@wordpress/editor';
+import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies

core-blocks/html/index.js

@@ -3,9 +3,10 @@
  */
 import { RawHTML } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { withState, Disabled, SandBox, CodeEditor } from '@wordpress/components';
+import { Disabled, SandBox, CodeEditor } from '@wordpress/components';
 import { getPhrasingContentSchema } from '@wordpress/blocks';
 import { BlockControls } from '@wordpress/editor';
+import { withState } from '@wordpress/compose';
 
 /**
  * Internal dependencies