@wordpress/compose 5.8.0 → 5.11.0

package/src/higher-order/if-condition/index.tsx

@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import type { ComponentType } from 'react';
+
 /**
  * Internal dependencies
  */
-import createHigherOrderComponent from '../../utils/create-higher-order-component';
+import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
 
 /**
  * Higher-order component creator, creating a new component which renders if
@@ -20,12 +25,10 @@ import createHigherOrderComponent from '../../utils/create-higher-order-componen
  *
  * @return Higher-order component.
  */
-const ifCondition = < TProps extends Record< string, any > >(
-	predicate: ( props: TProps ) => boolean
-) =>
-	createHigherOrderComponent< {} >(
-		( WrappedComponent ) => ( props ) => {
-			if ( ! predicate( props as TProps ) ) {
+function ifCondition< Props >( predicate: ( props: Props ) => boolean ) {
+	return createHigherOrderComponent(
+		( WrappedComponent: ComponentType< Props > ) => ( props: Props ) => {
+			if ( ! predicate( props ) ) {
 				return null;
 			}
 
@@ -33,5 +36,6 @@ const ifCondition = < TProps extends Record< string, any > >(
 		},
 		'ifCondition'
 	);
+}
 
 export default ifCondition;

package/src/higher-order/pure/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentType, ComponentClass } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -7,43 +12,36 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import createHigherOrderComponent from '../../utils/create-higher-order-component';
-
-/**
- * External dependencies
- */
-import type { ComponentType, ComponentClass } from 'react';
+import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
 
 /**
  * Given a component returns the enhanced component augmented with a component
  * only re-rendering when its props/state change
  */
-const pure = createHigherOrderComponent(
-	< TProps extends Record< string, any > >(
-		Wrapped: ComponentType< TProps >
-	) => {
-		if ( Wrapped.prototype instanceof Component ) {
-			return class extends ( Wrapped as ComponentClass< TProps > ) {
-				shouldComponentUpdate( nextProps: TProps, nextState: any ) {
-					return (
-						! isShallowEqual( nextProps, this.props ) ||
-						! isShallowEqual( nextState, this.state )
-					);
-				}
-			};
-		}
-
-		return class extends Component< TProps > {
-			shouldComponentUpdate( nextProps: TProps ) {
-				return ! isShallowEqual( nextProps, this.props );
-			}
-
-			render() {
-				return <Wrapped { ...this.props } />;
+const pure = createHigherOrderComponent( function < Props >(
+	WrappedComponent: ComponentType< Props >
+): ComponentType< Props > {
+	if ( WrappedComponent.prototype instanceof Component ) {
+		return class extends ( WrappedComponent as ComponentClass< Props > ) {
+			shouldComponentUpdate( nextProps: Props, nextState: any ) {
+				return (
+					! isShallowEqual( nextProps, this.props ) ||
+					! isShallowEqual( nextState, this.state )
+				);
 			}
 		};
-	},
-	'pure'
-);
+	}
+
+	return class extends Component< Props > {
+		shouldComponentUpdate( nextProps: Props ) {
+			return ! isShallowEqual( nextProps, this.props );
+		}
+
+		render() {
+			return <WrappedComponent { ...this.props } />;
+		}
+	};
+},
+'pure' );
 
 export default pure;

package/src/higher-order/with-global-events/index.js

@@ -12,7 +12,7 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import createHigherOrderComponent from '../../utils/create-higher-order-component';
+import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
 import Listener from './listener';
 
 /**
@@ -71,7 +71,9 @@ export default function withGlobalEvents( eventTypesToHandlers ) {
 			handleEvent( /** @type {any} */ event ) {
 				const handler =
 					eventTypesToHandlers[
-						/** @type {keyof GlobalEventHandlersEventMap} */ ( event.type )
+						/** @type {keyof GlobalEventHandlersEventMap} */ (
+							event.type
+						)
 						/* eslint-enable jsdoc/no-undefined-types */
 					];
 				if ( typeof this.wrappedRef[ handler ] === 'function' ) {

package/src/higher-order/with-global-events/test/index.js

@@ -82,8 +82,8 @@ describe( 'withGlobalEvents', () => {
 		mountEnhancedComponent();
 
 		// Get the HOC wrapper instance.
-		const hocInstance = wrapper.root.findByType( OriginalComponent ).parent
-			.instance;
+		const hocInstance =
+			wrapper.root.findByType( OriginalComponent ).parent.instance;
 
 		expect( Listener._instance.add ).toHaveBeenCalledWith(
 			'resize',

package/src/higher-order/with-instance-id/index.tsx

@@ -1,21 +1,30 @@
 /**
  * Internal dependencies
  */
-import createHigherOrderComponent from '../../utils/create-higher-order-component';
+import {
+	createHigherOrderComponent,
+	WithInjectedProps,
+	WithoutInjectedProps,
+} from '../../utils/create-higher-order-component';
 import useInstanceId from '../../hooks/use-instance-id';
 
+type InstanceIdProps = { instanceId: string | number };
+
 /**
  * A Higher Order Component used to be provide a unique instance ID by
  * component.
  */
-const withInstanceId = createHigherOrderComponent< {
-	instanceId: string | number;
-} >( ( WrappedComponent ) => {
-	return ( props ) => {
-		const instanceId = useInstanceId( WrappedComponent );
-		// @ts-ignore
-		return <WrappedComponent { ...props } instanceId={ instanceId } />;
-	};
-}, 'withInstanceId' );
+const withInstanceId = createHigherOrderComponent(
+	< C extends WithInjectedProps< C, InstanceIdProps > >(
+		WrappedComponent: C
+	) => {
+		return ( props: WithoutInjectedProps< C, InstanceIdProps > ) => {
+			const instanceId = useInstanceId( WrappedComponent );
+			// @ts-ignore
+			return <WrappedComponent { ...props } instanceId={ instanceId } />;
+		};
+	},
+	'instanceId'
+);
 
 export default withInstanceId;

package/src/higher-order/with-preferred-color-scheme/index.native.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import createHigherOrderComponent from '../../utils/create-higher-order-component';
+import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
 import usePreferredColorScheme from '../../hooks/use-preferred-color-scheme';
 
 /**

package/src/higher-order/with-safe-timeout/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { without } from 'lodash';
-import type { ComponentType } from 'react';
 
 /**
  * WordPress dependencies
@@ -12,7 +11,11 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import createHigherOrderComponent from '../../utils/create-higher-order-component';
+import {
+	createHigherOrderComponent,
+	WithInjectedProps,
+	WithoutInjectedProps,
+} from '../../utils/create-higher-order-component';
 
 /**
  * We cannot use the `Window['setTimeout']` and `Window['clearTimeout']`
@@ -22,25 +25,24 @@ import createHigherOrderComponent from '../../utils/create-higher-order-componen
  * In the case of this component, we only handle the simplest case where
  * `setTimeout` only accepts a function (not a string) and an optional delay.
  */
-type TimeoutProps = {
+interface TimeoutProps {
 	setTimeout: ( fn: () => void, delay: number ) => number;
 	clearTimeout: ( id: number ) => void;
-};
+}
 
 /**
  * A higher-order component used to provide and manage delayed function calls
  * that ought to be bound to a component's lifecycle.
  */
-const withSafeTimeout = createHigherOrderComponent< TimeoutProps >(
-	< TProps extends TimeoutProps >(
-		OriginalComponent: ComponentType< TProps >
+const withSafeTimeout = createHigherOrderComponent(
+	< C extends WithInjectedProps< C, TimeoutProps > >(
+		OriginalComponent: C
 	) => {
-		return class WrappedComponent extends Component<
-			Omit< TProps, keyof TimeoutProps >
-		> {
+		type WrappedProps = WithoutInjectedProps< C, TimeoutProps >;
+		return class WrappedComponent extends Component< WrappedProps > {
 			timeouts: number[];
 
-			constructor( props: Omit< TProps, keyof TimeoutProps > ) {
+			constructor( props: WrappedProps ) {
 				super( props );
 				this.timeouts = [];
 				this.setTimeout = this.setTimeout.bind( this );
@@ -51,7 +53,7 @@ const withSafeTimeout = createHigherOrderComponent< TimeoutProps >(
 				this.timeouts.forEach( clearTimeout );
 			}
 
-			setTimeout( fn: ( ...args: any[] ) => void, delay: number ) {
+			setTimeout( fn: () => void, delay: number ) {
 				const id = setTimeout( () => {
 					fn();
 					this.clearTimeout( id );
@@ -66,13 +68,14 @@ const withSafeTimeout = createHigherOrderComponent< TimeoutProps >(
 			}
 
 			render() {
-				const props = {
-					...this.props,
-					setTimeout: this.setTimeout,
-					clearTimeout: this.clearTimeout,
-				} as TProps;
-
-				return <OriginalComponent { ...props } />;
+				return (
+					// @ts-ignore
+					<OriginalComponent
+						{ ...this.props }
+						setTimeout={ this.setTimeout }
+						clearTimeout={ this.clearTimeout }
+					/>
+				);
 			}
 		};
 	},

package/src/higher-order/with-state/index.js

@@ -7,7 +7,7 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import createHigherOrderComponent from '../../utils/create-higher-order-component';
+import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
 
 /**
  * A Higher Order Component used to provide and manage internal component state

package/src/hooks/use-debounce/index.js

@@ -27,11 +27,10 @@ import { useEffect } from '@wordpress/element';
  */
 export default function useDebounce( fn, wait, options ) {
 	/* eslint-enable jsdoc/valid-types */
-	const debounced = useMemoOne( () => debounce( fn, wait, options ), [
-		fn,
-		wait,
-		options,
-	] );
+	const debounced = useMemoOne(
+		() => debounce( fn, wait, options ),
+		[ fn, wait, options ]
+	);
 	useEffect( () => () => debounced.cancel(), [ debounced ] );
 	return debounced;
 }

package/src/hooks/use-dialog/index.js

@@ -13,13 +13,14 @@ import useFocusReturn from '../use-focus-return';
 import useFocusOutside from '../use-focus-outside';
 import useMergeRefs from '../use-merge-refs';
 
-/* eslint-disable jsdoc/valid-types */
+/**
+ * @typedef {import('../use-focus-on-mount').default} useFocusOnMount
+ */
 /**
  * @typedef DialogOptions
  * @property {Parameters<useFocusOnMount>[0]} focusOnMount Focus on mount arguments.
  * @property {() => void}                     onClose      Function to call when the dialog is closed.
  */
-/* eslint-enable jsdoc/valid-types */
 
 /**
  * Returns a ref and props to apply to a dialog wrapper to enable the following behaviors:
@@ -57,19 +58,20 @@ function useDialog( options ) {
 			return;
 		}
 
-		node.addEventListener( 'keydown', (
-			/** @type {KeyboardEvent} */ event
-		) => {
-			// Close on escape.
-			if (
-				event.keyCode === ESCAPE &&
-				! event.defaultPrevented &&
-				currentOptions.current?.onClose
-			) {
-				event.preventDefault();
-				currentOptions.current.onClose();
+		node.addEventListener(
+			'keydown',
+			( /** @type {KeyboardEvent} */ event ) => {
+				// Close on escape.
+				if (
+					event.keyCode === ESCAPE &&
+					! event.defaultPrevented &&
+					currentOptions.current?.onClose
+				) {
+					event.preventDefault();
+					currentOptions.current.onClose();
+				}
 			}
-		} );
+		);
 	}, [] );
 
 	return [

package/src/hooks/use-disabled/index.js

@@ -70,9 +70,8 @@ export default function useDisabled( {
 
 			const disable = () => {
 				if ( node.style.getPropertyValue( 'user-select' ) !== 'none' ) {
-					const previousValue = node.style.getPropertyValue(
-						'user-select'
-					);
+					const previousValue =
+						node.style.getPropertyValue( 'user-select' );
 					node.style.setProperty( 'user-select', 'none' );
 					node.style.setProperty( '-webkit-user-select', 'none' );
 					updates.push( () => {
@@ -110,9 +109,8 @@ export default function useDisabled( {
 						focusable.nodeName === 'A' &&
 						focusable.getAttribute( 'tabindex' ) !== '-1'
 					) {
-						const previousValue = focusable.getAttribute(
-							'tabindex'
-						);
+						const previousValue =
+							focusable.getAttribute( 'tabindex' );
 						focusable.setAttribute( 'tabindex', '-1' );
 						updates.push( () => {
 							if ( ! focusable.isConnected ) {
@@ -158,9 +156,10 @@ export default function useDisabled( {
 						focusable instanceof
 							node.ownerDocument.defaultView.HTMLElement
 					) {
-						const previousValue = focusable.style.getPropertyValue(
-							'pointer-events'
-						);
+						const previousValue =
+							focusable.style.getPropertyValue(
+								'pointer-events'
+							);
 						focusable.style.setProperty( 'pointer-events', 'none' );
 						updates.push( () => {
 							if ( ! focusable.isConnected ) {

package/src/hooks/use-focus-return/index.js

@@ -64,7 +64,9 @@ function useFocusReturn( onFocusReturn ) {
 			if ( onFocusReturnRef.current ) {
 				onFocusReturnRef.current();
 			} else {
-				/** @type {null | HTMLElement} */ ( focusedBeforeMount.current )?.focus();
+				/** @type {null | HTMLElement} */ (
+					focusedBeforeMount.current
+				)?.focus();
 			}
 		}
 	}, [] );

package/src/hooks/use-keyboard-shortcut/index.js

@@ -73,7 +73,7 @@ function useKeyboardShortcut(
 				: // We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`.
 				  // Not sure if this is a mistake but it was the behavior previous to the addition of types so we're just doing what's
 				  // necessary to maintain the existing behavior.
-				  /** @type {Element} */ (/** @type {unknown} */ ( document ))
+				  /** @type {Element} */ ( /** @type {unknown} */ ( document ) )
 		);
 		castArray( shortcuts ).forEach( ( shortcut ) => {
 			const keys = shortcut.split( '+' );

package/src/hooks/use-merge-refs/index.js

@@ -20,7 +20,8 @@ function assignRef( ref, value ) {
 		ref( value );
 	} else if ( ref && ref.hasOwnProperty( 'current' ) ) {
 		/* eslint-disable jsdoc/no-undefined-types */
-		/** @type {import('react').MutableRefObject<T>} */ ( ref ).current = value;
+		/** @type {import('react').MutableRefObject<T>} */ ( ref ).current =
+			value;
 		/* eslint-enable jsdoc/no-undefined-types */
 	}
 }

package/src/hooks/use-throttle/index.js

@@ -25,11 +25,10 @@ import { useEffect } from '@wordpress/element';
  * @return {import('lodash').DebouncedFunc<TFunc>} Throttled function.
  */
 export default function useThrottle( fn, wait, options ) {
-	const throttled = useMemoOne( () => throttle( fn, wait, options ), [
-		fn,
-		wait,
-		options,
-	] );
+	const throttled = useMemoOne(
+		() => throttle( fn, wait, options ),
+		[ fn, wait, options ]
+	);
 	useEffect( () => () => throttled.cancel(), [ throttled ] );
 	return throttled;
 }

package/src/index.js

@@ -1,5 +1,5 @@
-// Utils.
-export { default as createHigherOrderComponent } from './utils/create-higher-order-component';
+// The `createHigherOrderComponent` helper and helper types.
+export * from './utils/create-higher-order-component';
 
 // Compose helper (aliased flowRight from Lodash)
 export { default as compose } from './higher-order/compose';

package/src/index.native.js

@@ -1,5 +1,5 @@
-// Utils.
-export { default as createHigherOrderComponent } from './utils/create-higher-order-component';
+// The `createHigherOrderComponent` helper and helper types.
+export * from './utils/create-higher-order-component';
 
 // Compose helper (aliased flowRight from Lodash)
 export { default as compose } from './higher-order/compose';

package/src/utils/create-higher-order-component/index.ts

@@ -4,22 +4,13 @@
 import { camelCase, upperFirst } from 'lodash';
 import type { ComponentType } from 'react';
 
-/**
- * Higher order components can cause props to be obviated. For example a HOC that
- * injects i18n props will obviate the need for the i18n props to be passed to the component.
- *
- * If a HOC does not obviate the need for any specific props then we default to `{}` which
- * essentially subtracts 0 from the original props of the passed in component. An example
- * of this is the `pure` HOC which does not change the API surface of the component but
- * simply modifies the internals.
- */
-export type HigherOrderComponent< HOCProps extends Record< string, any > > = <
-	InnerProps extends HOCProps
->(
-	Inner: ComponentType< InnerProps >
-) => {} extends HOCProps
-	? ComponentType< InnerProps >
-	: ComponentType< Omit< InnerProps, keyof HOCProps > >;
+type GetProps< C > = C extends ComponentType< infer P > ? P : never;
+
+export type WithoutInjectedProps< C, I > = Omit< GetProps< C >, keyof I >;
+
+export type WithInjectedProps< C, I > = ComponentType<
+	WithoutInjectedProps< C, I > & I
+>;
 
 /**
  * Given a function mapping a component to an enhanced component and modifier
@@ -30,19 +21,31 @@ export type HigherOrderComponent< HOCProps extends Record< string, any > > = <
  *
  * @return Component class with generated display name assigned.
  */
-function createHigherOrderComponent<
-	HOCProps extends Record< string, any > = {}
->( mapComponent: HigherOrderComponent< HOCProps >, modifierName: string ) {
-	return < InnerProps extends HOCProps >(
-		Inner: ComponentType< InnerProps >
-	) => {
+export function createHigherOrderComponent<
+	TInner extends ComponentType< any >,
+	TOuter extends ComponentType< any >
+>( mapComponent: ( Inner: TInner ) => TOuter, modifierName: string ) {
+	return ( Inner: TInner ) => {
 		const Outer = mapComponent( Inner );
-		const displayName = Inner.displayName || Inner.name || 'Component';
-		Outer.displayName = `${ upperFirst(
-			camelCase( modifierName )
-		) }(${ displayName })`;
+		Outer.displayName = hocName( modifierName, Inner );
 		return Outer;
 	};
 }
 
-export default createHigherOrderComponent;
+/**
+ * Returns a displayName for a higher-order component, given a wrapper name.
+ *
+ * @example
+ *     hocName( 'MyMemo', Widget ) === 'MyMemo(Widget)';
+ *     hocName( 'MyMemo', <div /> ) === 'MyMemo(Component)';
+ *
+ * @param  name  Name assigned to higher-order component's wrapper component.
+ * @param  Inner Wrapped component inside higher-order component.
+ * @return       Wrapped name of higher-order component.
+ */
+const hocName = ( name: string, Inner: ComponentType< any > ) => {
+	const inner = Inner.displayName || Inner.name || 'Component';
+	const outer = upperFirst( camelCase( name ) );
+
+	return `${ outer }(${ inner })`;
+};

package/src/utils/create-higher-order-component/test/index.js

@@ -6,7 +6,7 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import createHigherOrderComponent from '../';
+import { createHigherOrderComponent } from '../';
 
 describe( 'createHigherOrderComponent', () => {
 	it( 'should use default name for anonymous function', () => {