@wordpress/compose 5.0.5 → 5.1.0

package/build-types/utils/create-higher-order-component/index.d.ts

@@ -8,18 +8,16 @@ import type { ComponentType } from 'react';
  * of this is the `pure` HOC which does not change the API surface of the component but
  * simply modifies the internals.
  */
-export declare type HigherOrderComponent<TInnerProps, TOuterProps> = (Inner: ComponentType<TInnerProps>) => ComponentType<TOuterProps>;
-export declare type SimpleHigherOrderComponent = <TProps>(Inner: ComponentType<TProps>) => ComponentType<TProps>;
-export declare type PropInjectingHigherOrderComponent<TRemovedProps> = <TProps extends TRemovedProps>(Inner: ComponentType<TProps>) => ComponentType<Omit<TProps, keyof TRemovedProps>>;
+export declare type HigherOrderComponent<HOCProps extends Record<string, any>> = <InnerProps extends HOCProps>(Inner: ComponentType<InnerProps>) => {} extends HOCProps ? ComponentType<InnerProps> : ComponentType<Omit<InnerProps, keyof HOCProps>>;
 /**
  * Given a function mapping a component to an enhanced component and modifier
  * name, returns the enhanced component augmented with a generated displayName.
  *
- * @param  mapComponentToEnhancedComponent Function mapping component to enhanced component.
- * @param  modifierName                    Seed name from which to generated display name.
+ * @param mapComponent Function mapping component to enhanced component.
+ * @param modifierName Seed name from which to generated display name.
  *
  * @return Component class with generated display name assigned.
  */
-declare function createHigherOrderComponent<TInnerProps, TOuterProps>(mapComponent: HigherOrderComponent<TInnerProps, TOuterProps>, modifierName: string): HigherOrderComponent<TInnerProps, TOuterProps>;
+declare function createHigherOrderComponent<HOCProps extends Record<string, any> = {}>(mapComponent: HigherOrderComponent<HOCProps>, modifierName: string): <InnerProps extends HOCProps>(Inner: ComponentType<InnerProps>) => {} extends HOCProps ? ComponentType<InnerProps> : ComponentType<Omit<InnerProps, keyof HOCProps>>;
 export default createHigherOrderComponent;
 //# sourceMappingURL=index.d.ts.map

package/build-types/utils/create-higher-order-component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/create-higher-order-component/index.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;;;;;GAQG;AACH,oBAAY,oBAAoB,CAAE,WAAW,EAAE,WAAW,IAAK,CAC9D,KAAK,EAAE,aAAa,CAAE,WAAW,CAAE,KAC/B,aAAa,CAAE,WAAW,CAAE,CAAC;AAElC,oBAAY,0BAA0B,GAAG,CAAE,MAAM,EAChD,KAAK,EAAE,aAAa,CAAE,MAAM,CAAE,KAC1B,aAAa,CAAE,MAAM,CAAE,CAAC;AAE7B,oBAAY,iCAAiC,CAAE,aAAa,IAAK,CAChE,MAAM,SAAS,aAAa,EAE5B,KAAK,EAAE,aAAa,CAAE,MAAM,CAAE,KAC1B,aAAa,CAAE,IAAI,CAAE,MAAM,EAAE,MAAM,aAAa,CAAE,CAAE,CAAC;AAE1D;;;;;;;;GAQG;AAEH,iBAAS,0BAA0B,CAAE,WAAW,EAAE,WAAW,EAC5D,YAAY,EAAE,oBAAoB,CAAE,WAAW,EAAE,WAAW,CAAE,EAC9D,YAAY,EAAE,MAAM,GAClB,oBAAoB,CAAE,WAAW,EAAE,WAAW,CAAE,CASlD;AACD,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/create-higher-order-component/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;;;;;GAQG;AACH,oBAAY,oBAAoB,CAAE,QAAQ,SAAS,MAAM,CAAE,MAAM,EAAE,GAAG,CAAE,IAAK,CAC5E,UAAU,SAAS,QAAQ,EAE3B,KAAK,EAAE,aAAa,CAAE,UAAU,CAAE,KAC9B,EAAE,SAAS,QAAQ,GACrB,aAAa,CAAE,UAAU,CAAE,GAC3B,aAAa,CAAE,IAAI,CAAE,UAAU,EAAE,MAAM,QAAQ,CAAE,CAAE,CAAC;AAEvD;;;;;;;;GAQG;AACH,iBAAS,0BAA0B,CAClC,QAAQ,SAAS,MAAM,CAAE,MAAM,EAAE,GAAG,CAAE,GAAG,EAAE,EACzC,YAAY,EAAE,oBAAoB,CAAE,QAAQ,CAAE,EAAE,YAAY,EAAE,MAAM,wKAWtE;AAED,eAAe,0BAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "5.0.5",
+	"version": "5.1.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,23 +29,26 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.13.10",
+		"@babel/runtime": "^7.16.0",
 		"@types/lodash": "^4.14.172",
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^3.2.2",
-		"@wordpress/dom": "^3.2.6",
-		"@wordpress/element": "^4.0.3",
-		"@wordpress/is-shallow-equal": "^4.2.0",
-		"@wordpress/keycodes": "^3.2.3",
-		"@wordpress/priority-queue": "^2.2.2",
+		"@wordpress/deprecated": "^3.3.0",
+		"@wordpress/dom": "^3.3.0",
+		"@wordpress/element": "^4.1.0",
+		"@wordpress/is-shallow-equal": "^4.3.0",
+		"@wordpress/keycodes": "^3.3.0",
+		"@wordpress/priority-queue": "^2.3.0",
 		"clipboard": "^2.0.8",
 		"lodash": "^4.17.21",
 		"mousetrap": "^1.6.5",
 		"react-resize-aware": "^3.1.0",
 		"use-memo-one": "^1.1.1"
 	},
+	"peerDependencies": {
+		"react": "^17.0.0"
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "393c2b5533837fd637e998d23f0124c081a10df0"
+	"gitHead": "d95ccb9366e249133cdb1d7b25c382446b9ee502"
 }

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

@@ -2,7 +2,6 @@
  * Internal dependencies
  */
 import createHigherOrderComponent from '../../utils/create-higher-order-component';
-import type { HigherOrderComponent } from '../../utils/create-higher-order-component';
 
 /**
  * Higher-order component creator, creating a new component which renders if
@@ -21,12 +20,12 @@ import type { HigherOrderComponent } from '../../utils/create-higher-order-compo
  *
  * @return Higher-order component.
  */
-const ifCondition = < TProps, >(
+const ifCondition = < TProps extends Record< string, any > >(
 	predicate: ( props: TProps ) => boolean
-): HigherOrderComponent< TProps, TProps > =>
-	createHigherOrderComponent(
-		( WrappedComponent ) => ( props: TProps ) => {
-			if ( ! predicate( props ) ) {
+) =>
+	createHigherOrderComponent< {} >(
+		( WrappedComponent ) => ( props ) => {
+			if ( ! predicate( props as TProps ) ) {
 				return null;
 			}
 

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

@@ -8,20 +8,20 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import createHigherOrderComponent from '../../utils/create-higher-order-component';
-import type { SimpleHigherOrderComponent } from '../../utils/create-higher-order-component';
 
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { ComponentType, ComponentClass } from 'react';
 
 /**
  * Given a component returns the enhanced component augmented with a component
- * only rerendering when its props/state change
+ * only re-rendering when its props/state change
  */
-const pure: SimpleHigherOrderComponent = createHigherOrderComponent(
-	< TProps, >( Wrapped: ComponentType< TProps > ) => {
+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 ) {

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

@@ -46,6 +46,7 @@ export default function withGlobalEvents( eventTypesToHandlers ) {
 		alternative: 'useEffect',
 	} );
 
+	// @ts-ignore We don't need to fix the type-related issues because this is deprecated.
 	return createHigherOrderComponent( ( WrappedComponent ) => {
 		class Wrapper extends Component {
 			constructor( /** @type {any} */ props ) {

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

@@ -1,37 +1,21 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import type { ComponentType } from 'react';
-
 /**
  * Internal dependencies
  */
 import createHigherOrderComponent from '../../utils/create-higher-order-component';
-import type { PropInjectingHigherOrderComponent } from '../../utils/create-higher-order-component';
 import useInstanceId from '../../hooks/use-instance-id';
 
 /**
  * A Higher Order Component used to be provide a unique instance ID by
  * component.
  */
-const withInstanceId: PropInjectingHigherOrderComponent< {
+const withInstanceId = createHigherOrderComponent< {
 	instanceId: string | number;
-} > = createHigherOrderComponent(
-	< TProps extends { instanceId: string | number } >(
-		WrappedComponent: ComponentType< TProps >
-	) => {
-		return ( props: Omit< TProps, 'instanceId' > ) => {
-			const instanceId = useInstanceId( WrappedComponent );
-			return (
-				<WrappedComponent
-					{ ...( props as TProps ) }
-					instanceId={ instanceId }
-				/>
-			);
-		};
-	},
-	'withInstanceId'
-);
+} >( ( WrappedComponent ) => {
+	return ( props ) => {
+		const instanceId = useInstanceId( WrappedComponent );
+		// @ts-ignore
+		return <WrappedComponent { ...props } instanceId={ instanceId } />;
+	};
+}, 'withInstanceId' );
 
 export default withInstanceId;

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { without } from 'lodash';
-// eslint-disable-next-line no-restricted-imports
 import type { ComponentType } from 'react';
 
 /**
@@ -14,7 +13,6 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import createHigherOrderComponent from '../../utils/create-higher-order-component';
-import type { PropInjectingHigherOrderComponent } from '../../utils/create-higher-order-component';
 
 /**
  * We cannot use the `Window['setTimeout']` and `Window['clearTimeout']`
@@ -33,7 +31,7 @@ type TimeoutProps = {
  * A higher-order component used to provide and manage delayed function calls
  * that ought to be bound to a component's lifecycle.
  */
-const withSafeTimeout: PropInjectingHigherOrderComponent< TimeoutProps > = createHigherOrderComponent(
+const withSafeTimeout = createHigherOrderComponent< TimeoutProps >(
 	< TProps extends TimeoutProps >(
 		OriginalComponent: ComponentType< TProps >
 	) => {
@@ -42,7 +40,7 @@ const withSafeTimeout: PropInjectingHigherOrderComponent< TimeoutProps > = creat
 		> {
 			timeouts: number[];
 
-			constructor( props: any ) {
+			constructor( props: Omit< TProps, keyof TimeoutProps > ) {
 				super( props );
 				this.timeouts = [];
 				this.setTimeout = this.setTimeout.bind( this );
@@ -72,8 +70,9 @@ const withSafeTimeout: PropInjectingHigherOrderComponent< TimeoutProps > = creat
 					...this.props,
 					setTimeout: this.setTimeout,
 					clearTimeout: this.clearTimeout,
-				};
-				return <OriginalComponent { ...( props as TProps ) } />;
+				} as TProps;
+
+				return <OriginalComponent { ...props } />;
 			}
 		};
 	},

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

@@ -21,6 +21,7 @@ import createHigherOrderComponent from '../../utils/create-higher-order-componen
  */
 export default function withState( initialState = {} ) {
 	deprecated( 'wp.compose.withState', {
+		since: '5.8',
 		alternative: 'wp.element.useState',
 	} );
 

package/src/hooks/use-copy-on-click/index.js

@@ -26,8 +26,7 @@ import deprecated from '@wordpress/deprecated';
 export default function useCopyOnClick( ref, text, timeout = 4000 ) {
 	/* eslint-enable jsdoc/no-undefined-types */
 	deprecated( 'wp.compose.useCopyOnClick', {
-		since: '10.3',
-		plugin: 'Gutenberg',
+		since: '5.8',
 		alternative: 'wp.compose.useCopyToClipboard',
 	} );
 

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

@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import { includes, debounce } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useLayoutEffect, useRef } from '@wordpress/element';
+import { focus } from '@wordpress/dom';
+
+/**
+ * Names of control nodes which qualify for disabled behavior.
+ *
+ * See WHATWG HTML Standard: 4.10.18.5: "Enabling and disabling form controls: the disabled attribute".
+ *
+ * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute
+ *
+ * @type {string[]}
+ */
+const DISABLED_ELIGIBLE_NODE_NAMES = [
+	'BUTTON',
+	'FIELDSET',
+	'INPUT',
+	'OPTGROUP',
+	'OPTION',
+	'SELECT',
+	'TEXTAREA',
+];
+
+/**
+ * In some circumstances, such as block previews, all focusable DOM elements
+ * (input fields, links, buttons, etc.) need to be disabled. This hook adds the
+ * behavior to disable nested DOM elements to the returned ref.
+ *
+ * @return {import('react').RefObject<HTMLElement>} Element Ref.
+ *
+ * @example
+ * ```js
+ * import { __experimentalUseDisabled as useDisabled } from '@wordpress/compose';
+ * const DisabledExample = () => {
+ * 	const disabledRef = useDisabled();
+ *	return (
+ *		<div ref={ disabledRef }>
+ *			<a href="#">This link will have tabindex set to -1</a>
+ *			<input placeholder="This input will have the disabled attribute added to it." type="text" />
+ *		</div>
+ *	);
+ * };
+ * ```
+ */
+export default function useDisabled() {
+	/** @type {import('react').RefObject<HTMLElement>} */
+	const node = useRef( null );
+
+	const disable = () => {
+		if ( ! node.current ) {
+			return;
+		}
+
+		focus.focusable.find( node.current ).forEach( ( focusable ) => {
+			if (
+				includes( DISABLED_ELIGIBLE_NODE_NAMES, focusable.nodeName )
+			) {
+				focusable.setAttribute( 'disabled', '' );
+			}
+
+			if ( focusable.nodeName === 'A' ) {
+				focusable.setAttribute( 'tabindex', '-1' );
+			}
+
+			const tabIndex = focusable.getAttribute( 'tabindex' );
+			if ( tabIndex !== null && tabIndex !== '-1' ) {
+				focusable.removeAttribute( 'tabindex' );
+			}
+
+			if ( focusable.hasAttribute( 'contenteditable' ) ) {
+				focusable.setAttribute( 'contenteditable', 'false' );
+			}
+		} );
+	};
+
+	// Debounce re-disable since disabling process itself will incur
+	// additional mutations which should be ignored.
+	const debouncedDisable = useCallback(
+		debounce( disable, undefined, { leading: true } ),
+		[]
+	);
+
+	useLayoutEffect( () => {
+		disable();
+
+		/** @type {MutationObserver | undefined} */
+		let observer;
+		if ( node.current ) {
+			observer = new window.MutationObserver( debouncedDisable );
+			observer.observe( node.current, {
+				childList: true,
+				attributes: true,
+				subtree: true,
+			} );
+		}
+
+		return () => {
+			if ( observer ) {
+				observer.disconnect();
+			}
+			debouncedDisable.cancel();
+		};
+	}, [] );
+
+	return node;
+}

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

@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import { render, screen, waitFor } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useDisabled from '../';
+
+jest.mock( '@wordpress/dom', () => {
+	const focus = jest.requireActual( '../../../../../dom/src' ).focus;
+
+	return {
+		focus: {
+			...focus,
+			focusable: {
+				...focus.focusable,
+				find( context ) {
+					// In JSDOM, all elements have zero'd widths and height.
+					// This is a metric for focusable's `isVisible`, so find
+					// and apply an arbitrary non-zero width.
+					Array.from( context.querySelectorAll( '*' ) ).forEach(
+						( element ) => {
+							Object.defineProperties( element, {
+								offsetWidth: {
+									get: () => 1,
+									configurable: true,
+								},
+							} );
+						}
+					);
+
+					return focus.focusable.find( ...arguments );
+				},
+			},
+		},
+	};
+} );
+
+jest.useRealTimers();
+
+describe( 'useDisabled', () => {
+	const Form = forwardRef( ( { showButton }, ref ) => {
+		return (
+			<form ref={ ref }>
+				<input />
+				<a href="https://wordpress.org/">A link</a>
+				<p contentEditable={ true } tabIndex="0"></p>
+				{ showButton && <button>Button</button> }
+			</form>
+		);
+	} );
+
+	function DisabledComponent( props ) {
+		const disabledRef = useDisabled();
+		return <Form ref={ disabledRef } { ...props } />;
+	}
+
+	it( 'will disable all fields', () => {
+		const { container } = render( <DisabledComponent /> );
+
+		const input = screen.getByRole( 'textbox' );
+		const link = screen.getByRole( 'link' );
+		const p = container.querySelector( 'p' );
+
+		expect( input.hasAttribute( 'disabled' ) ).toBe( true );
+		expect( link.getAttribute( 'tabindex' ) ).toBe( '-1' );
+		expect( p.getAttribute( 'contenteditable' ) ).toBe( 'false' );
+		expect( p.hasAttribute( 'tabindex' ) ).toBe( false );
+		expect( p.hasAttribute( 'disabled' ) ).toBe( false );
+	} );
+
+	it( 'will disable an element rendered in an update to the component', async () => {
+		const { rerender } = render(
+			<DisabledComponent showButton={ false } />
+		);
+
+		expect( screen.queryByText( 'Button' ) ).not.toBeInTheDocument();
+		rerender( <DisabledComponent showButton={ true } /> );
+
+		const button = screen.getByText( 'Button' );
+		await waitFor( () => {
+			expect( button.hasAttribute( 'disabled' ) ).toBe( true );
+		} );
+	} );
+} );

package/src/hooks/use-ref-effect/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { DependencyList, RefCallback } from 'react';
 
 /**

package/src/index.js

@@ -17,6 +17,7 @@ export { default as useConstrainedTabbing } from './hooks/use-constrained-tabbin
 export { default as useCopyOnClick } from './hooks/use-copy-on-click';
 export { default as useCopyToClipboard } from './hooks/use-copy-to-clipboard';
 export { default as __experimentalUseDialog } from './hooks/use-dialog';
+export { default as __experimentalUseDisabled } from './hooks/use-disabled';
 export { default as __experimentalUseDragging } from './hooks/use-dragging';
 export { default as useFocusOnMount } from './hooks/use-focus-on-mount';
 export { default as __experimentalUseFocusOutside } from './hooks/use-focus-outside';

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { camelCase, upperFirst } from 'lodash';
-// eslint-disable-next-line no-restricted-imports
 import type { ComponentType } from 'react';
 
 /**
@@ -14,35 +13,29 @@ import type { ComponentType } from 'react';
  * of this is the `pure` HOC which does not change the API surface of the component but
  * simply modifies the internals.
  */
-export type HigherOrderComponent< TInnerProps, TOuterProps > = (
-	Inner: ComponentType< TInnerProps >
-) => ComponentType< TOuterProps >;
-
-export type SimpleHigherOrderComponent = < TProps >(
-	Inner: ComponentType< TProps >
-) => ComponentType< TProps >;
-
-export type PropInjectingHigherOrderComponent< TRemovedProps > = <
-	TProps extends TRemovedProps
+export type HigherOrderComponent< HOCProps extends Record< string, any > > = <
+	InnerProps extends HOCProps
 >(
-	Inner: ComponentType< TProps >
-) => ComponentType< Omit< TProps, keyof TRemovedProps > >;
+	Inner: ComponentType< InnerProps >
+) => {} extends HOCProps
+	? ComponentType< InnerProps >
+	: ComponentType< Omit< InnerProps, keyof HOCProps > >;
 
 /**
  * Given a function mapping a component to an enhanced component and modifier
  * name, returns the enhanced component augmented with a generated displayName.
  *
- * @param  mapComponentToEnhancedComponent Function mapping component to enhanced component.
- * @param  modifierName                    Seed name from which to generated display name.
+ * @param mapComponent Function mapping component to enhanced component.
+ * @param modifierName Seed name from which to generated display name.
  *
  * @return Component class with generated display name assigned.
  */
-
-function createHigherOrderComponent< TInnerProps, TOuterProps >(
-	mapComponent: HigherOrderComponent< TInnerProps, TOuterProps >,
-	modifierName: string
-): HigherOrderComponent< TInnerProps, TOuterProps > {
-	return ( Inner ) => {
+function createHigherOrderComponent<
+	HOCProps extends Record< string, any > = {}
+>( mapComponent: HigherOrderComponent< HOCProps >, modifierName: string ) {
+	return < InnerProps extends HOCProps >(
+		Inner: ComponentType< InnerProps >
+	) => {
 		const Outer = mapComponent( Inner );
 		const displayName = Inner.displayName || Inner.name || 'Component';
 		Outer.displayName = `${ upperFirst(
@@ -51,4 +44,5 @@ function createHigherOrderComponent< TInnerProps, TOuterProps >(
 		return Outer;
 	};
 }
+
 export default createHigherOrderComponent;