Packages: Add a new compose package (#7948)

* Compose: Extract UI-less Higher order components into a wordpress/compose package

* Use a range version for lodash

* Move createHigherOrderComponent to @wordpress/compose

* Fix unit tests

* Remove useless dev dependency

* Compose: Use ranges for dev dependencies

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/higher-order/navigate-regions/index.js

@@ -6,7 +6,8 @@ import classnames from 'classnames';
 /**
  * WordPress Dependencies
  */
-import { Component, createHigherOrderComponent } from '@wordpress/element';
+import { Component } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
  * Internal Dependencies

components/higher-order/with-api-data/index.js

@@ -6,7 +6,8 @@ import { mapValues, reduce, forEach, noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, createHigherOrderComponent } from '@wordpress/element';
+import { Component } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**

components/higher-order/with-constrained-tabbing/index.js

@@ -1,11 +1,8 @@
 /**
  * WordPress dependencies
  */
-import {
-	Component,
-	createRef,
-	createHigherOrderComponent,
-} from '@wordpress/element';
+import { Component, createRef } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import { keycodes } from '@wordpress/utils';
 import { focus } from '@wordpress/dom';
 

components/higher-order/with-context/index.js

@@ -6,7 +6,8 @@ import { noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, createHigherOrderComponent } from '@wordpress/element';
+import { Component } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
 
 export default ( contextName ) => ( mapSettingsToProps ) => createHigherOrderComponent(
 	( OriginalComponent ) => {

components/higher-order/with-fallback-styles/index.js

@@ -6,7 +6,8 @@ import { every, isEqual } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, createHigherOrderComponent } from '@wordpress/element';
+import { Component } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
 
 export default ( mapNodeToProps ) => createHigherOrderComponent(
 	( WrappedComponent ) => {

components/higher-order/with-filters/index.js

@@ -6,8 +6,9 @@ import { debounce, uniqueId } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, createHigherOrderComponent } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { addAction, applyFilters, removeAction } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
 
 const ANIMATION_FRAME_PERIOD = 16;
 

components/higher-order/with-focus-outside/index.js

@@ -6,7 +6,8 @@ import { includes } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, createHigherOrderComponent } from '@wordpress/element';
+import { Component } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
  * Input types which are classified as button types, for use in considering

components/higher-order/with-focus-return/index.js

@@ -1,7 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { Component, createHigherOrderComponent } from '@wordpress/element';
+import { Component } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
  * Higher Order Component used to be used to wrap disposable elements like

components/higher-order/with-notices/index.js

@@ -6,7 +6,8 @@ import uuid from 'uuid/v4';
 /**
  * WordPress dependencies
  */
-import { Component, createHigherOrderComponent } from '@wordpress/element';
+import { Component } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
  * Internal dependencies

components/higher-order/with-spoken-messages/index.js

@@ -6,8 +6,9 @@ import { debounce } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, createHigherOrderComponent } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { speak } from '@wordpress/a11y';
+import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
  * A Higher Order Component used to be provide a unique instance ID by

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 } ) => (