@wordpress/compose 8.1.0 → 8.1.1

package/build-types/hooks/use-merge-refs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-merge-refs/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAoB,GAAG,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAUhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,CAAC,EACtC,IAAI,EAAE,GAAG,CAAE,CAAC,CAAE,EAAE,GACd,WAAW,CAAE,CAAC,CAAE,CA0DlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-merge-refs/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAoB,GAAG,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AA+BhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,CAAC,EACtC,IAAI,EAAE,GAAG,CAAE,CAAC,CAAE,EAAE,GACd,WAAW,CAAE,CAAC,CAAE,CAkElB"}

package/build-types/hooks/use-viewport-match/index.d.ts

@@ -1,6 +1,6 @@
 export type WPBreakpoint = "xhuge" | "huge" | "wide" | "xlarge" | "large" | "medium" | "small" | "mobile";
 export type WPViewportOperator = ">=" | "<";
-declare function useViewportMatch(breakpoint: WPBreakpoint, operator?: WPViewportOperator, view?: Window): boolean;
+declare function useViewportMatch(breakpoint: WPBreakpoint, operator?: WPViewportOperator, view?: Window | undefined): boolean;
 declare namespace useViewportMatch {
     var __experimentalWidthProvider: import("react").Provider<number | null>;
 }

package/build-types/hooks/use-viewport-match/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-viewport-match/index.js"],"names":[],"mappings":"AAWG,YAA0F,YAAY,GAA5F,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAc;AAsBtG,YAAsB,kBAAkB,GAA9B,IAAI,GAAG,GAAG,CAAoB;kCA4ChB,UAAU,EAb1B,YAa0B,EAAE,QAAQ,GAZpC,kBAY2C,EAAE,IAAI,GAXjD,MAW0D,GAFzD,OAAO;;;;eAoBJ,gBAAgB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-viewport-match/index.js"],"names":[],"mappings":"AAWG,YAA0F,YAAY,GAA5F,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAc;AAsBtG,YAAsB,kBAAkB,GAA9B,IAAI,GAAG,GAAG,CAAoB;kCA6C1C,UAAU,EAdA,YAcA,EACV,QAAQ,GAdE,kBAcK,EAGf,IAAI,GAhBM,MAAM,GAAC,SAgBwC,GAP9C,OAAO;;;;eA0BJ,gBAAgB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "8.1.0",
+	"version": "8.1.1",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,26 +41,30 @@
 		},
 		"./package.json": "./package.json"
 	},
-	"react-native": "src/index",
 	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^4.48.0",
-		"@wordpress/dom": "^4.48.0",
-		"@wordpress/element": "^8.0.0",
-		"@wordpress/is-shallow-equal": "^5.48.0",
-		"@wordpress/keycodes": "^4.48.0",
-		"@wordpress/priority-queue": "^3.48.0",
-		"@wordpress/private-apis": "^1.48.0",
-		"@wordpress/undo-manager": "^1.48.0",
+		"@types/react": "^18.3.27",
+		"@wordpress/deprecated": "^4.48.1",
+		"@wordpress/dom": "^4.48.1",
+		"@wordpress/element": "^8.0.1",
+		"@wordpress/is-shallow-equal": "^5.48.1",
+		"@wordpress/keycodes": "^4.48.1",
+		"@wordpress/priority-queue": "^3.48.1",
+		"@wordpress/private-apis": "^1.48.1",
+		"@wordpress/undo-manager": "^1.48.1",
 		"change-case": "^4.1.2",
 		"mousetrap": "^1.6.5",
 		"use-memo-one": "^1.1.1"
 	},
 	"devDependencies": {
-		"mock-match-media": "0.4.2"
+		"@testing-library/dom": "^10.4.1",
+		"@testing-library/react": "^16.3.2",
+		"@testing-library/user-event": "^14.6.1",
+		"mock-match-media": "^0.4.2",
+		"react-dom": "^18.3.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0"
@@ -68,5 +72,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
+	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
 }

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

@@ -8,6 +8,7 @@ import type { ComponentType, ComponentClass } from 'react';
  */
 import { isShallowEqual } from '@wordpress/is-shallow-equal';
 import { Component } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -23,6 +24,11 @@ import { createHigherOrderComponent } from '../../utils/create-higher-order-comp
 const pure = createHigherOrderComponent( function < Props extends {} >(
 	WrappedComponent: ComponentType< Props >
 ): ComponentType< Props > {
+	deprecated( 'wp.compose.pure', {
+		since: '7.1',
+		alternative: 'Use `memo` or `PureComponent` instead',
+	} );
+
 	if ( WrappedComponent.prototype instanceof Component ) {
 		return class extends ( WrappedComponent as ComponentClass< Props > ) {
 			shouldComponentUpdate( nextProps: Props, nextState: any ) {

package/src/higher-order/pure/test/index.js

@@ -2,12 +2,11 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { logged } from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -15,88 +14,22 @@ import { Component } from '@wordpress/element';
 import pure from '../';
 
 describe( 'pure', () => {
-	it( 'functional component should rerender only when props change', () => {
-		let i = 0;
-		const MyComp = pure( () => {
-			return <p data-testid="counter">{ ++i }</p>;
-		} );
-		const { rerender } = render( <MyComp /> );
-
-		// Updating with same props doesn't rerender.
-		rerender( <MyComp /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '1' );
-
-		// New prop should trigger a rerender.
-		rerender( <MyComp { ...{ prop: 'a' } } /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '2' );
-
-		// Keeping the same prop value should not rerender.
-		rerender( <MyComp { ...{ prop: 'a' } } /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '2' );
-
-		// Changing the prop value should rerender.
-		rerender( <MyComp { ...{ prop: 'b' } } /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '3' );
+	afterEach( () => {
+		for ( const key in logged ) {
+			delete logged[ key ];
+		}
 	} );
 
-	it( 'class component should rerender if the props or state change', async () => {
-		const user = userEvent.setup();
-		let i = 0;
-		const MyComp = pure(
-			class extends Component {
-				constructor() {
-					super( ...arguments );
-					this.state = {
-						val: '',
-					};
-				}
-				render() {
-					return (
-						<>
-							<p data-testid="counter">{ ++i }</p>
-							<input
-								type="text"
-								value={ this.state.val }
-								onChange={ ( e ) =>
-									this.setState( { val: e.target.value } )
-								}
-							/>
-							<input
-								type="button"
-								onClick={ () =>
-									this.setState( { val: this.state.val } )
-								}
-							/>
-						</>
-					);
-				}
-			}
-		);
-
-		const { rerender } = render( <MyComp /> );
+	it( 'wraps a component and logs a deprecation warning', () => {
+		const MyComp = pure( () => <p data-testid="content">content</p> );
 
-		// Updating with same props doesn't rerender.
-		rerender( <MyComp /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '1' );
+		render( <MyComp /> );
 
-		// New prop should trigger a rerender.
-		rerender( <MyComp { ...{ prop: 'a' } } /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '2' );
-
-		// Keeping the same prop value should not rerender.
-		rerender( <MyComp { ...{ prop: 'a' } } /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '2' );
-
-		// Changing the prop value should rerender.
-		rerender( <MyComp { ...{ prop: 'b' } } /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '3' );
-
-		// New state value should trigger a rerender.
-		await user.type( screen.getByRole( 'textbox' ), 'a' );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '4' );
-
-		// Keeping the same state value should not trigger a rerender.
-		await user.click( screen.getByRole( 'button' ) );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '4' );
+		expect( console ).toHaveWarnedWith(
+			'wp.compose.pure is deprecated since version 7.1. Please use Use `memo` or `PureComponent` instead instead.'
+		);
+		expect( screen.getByTestId( 'content' ) ).toHaveTextContent(
+			'content'
+		);
 	} );
 } );

package/src/hooks/use-drop-zone/README.md

@@ -2,7 +2,7 @@
 
 A hook to facilitate drag and drop handling within a designated drop zone area. An optional `dropZoneElement` can be provided, however by default the drop zone is bound by the area where the returned `ref` is assigned.
 
-When using a `dropZoneElement`, it is expected that the `ref` will be attached to a node that is a descendent of the `dropZoneElement`. Additionally, the element passed to `dropZoneElement` should be stored in state rather than a plain ref to ensure reactive updating when it changes.
+When using a `dropZoneElement`, it is expected that the `ref` will be attached to a node that is a descendant of the `dropZoneElement`. Additionally, the element passed to `dropZoneElement` should be stored in state rather than a plain ref to ensure reactive updating when it changes.
 
 ## Usage
 

package/src/hooks/use-media-query/index.ts

@@ -19,8 +19,11 @@ const EMPTY_SUBSCRIBER: MQLSubscriber = {
 	getValue: () => false,
 };
 
-function getMQLSubscriber( view: Window, query?: string ): MQLSubscriber {
-	if ( ! query || typeof view?.matchMedia !== 'function' ) {
+function getMQLSubscriber(
+	view: Window | undefined,
+	query?: string
+): MQLSubscriber {
+	if ( ! view || ! query || typeof view.matchMedia !== 'function' ) {
 		return EMPTY_SUBSCRIBER;
 	}
 
@@ -75,7 +78,11 @@ function getMQLSubscriber( view: Window, query?: string ): MQLSubscriber {
  */
 export default function useMediaQuery(
 	query?: string,
-	view: Window = window
+	// Resolve the default lazily so SSR (where `window` is undeclared) does not
+	// throw a ReferenceError when this default expression is evaluated.
+	view: Window | undefined = typeof window !== 'undefined'
+		? window
+		: undefined
 ): boolean {
 	const source = getMQLSubscriber( view, query );
 

package/src/hooks/use-media-query/test/ssr.js

@@ -0,0 +1,47 @@
+/**
+ * @jest-environment node
+ */
+
+/**
+ * External dependencies
+ */
+import { renderToString } from 'react-dom/server';
+
+/**
+ * Internal dependencies
+ */
+import useMediaQuery from '../';
+import useViewportMatch from '../../use-viewport-match';
+
+const MediaQueryComponent = ( { query } ) => {
+	const result = useMediaQuery( query );
+	return `useMediaQuery: ${ result }`;
+};
+
+const ViewportMatchComponent = ( { breakpoint, operator } ) => {
+	const result = useViewportMatch( breakpoint, operator );
+	return `useViewportMatch: ${ result }`;
+};
+
+describe( 'compose hooks in a server (no-window) environment', () => {
+	it( 'useMediaQuery renders to false without throwing when window is undefined', () => {
+		expect( typeof window ).toBe( 'undefined' );
+		expect(
+			renderToString( <MediaQueryComponent query="(min-width: 782px)" /> )
+		).toBe( 'useMediaQuery: false' );
+	} );
+
+	it( 'useMediaQuery renders to false when no query is provided', () => {
+		expect( renderToString( <MediaQueryComponent /> ) ).toBe(
+			'useMediaQuery: false'
+		);
+	} );
+
+	it( 'useViewportMatch renders to false without throwing when window is undefined', () => {
+		expect(
+			renderToString(
+				<ViewportMatchComponent breakpoint="small" operator=">=" />
+			)
+		).toBe( 'useViewportMatch: false' );
+	} );
+} );

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

@@ -4,12 +4,33 @@
 import { useRef, useCallback, useLayoutEffect } from '@wordpress/element';
 import type { MutableRefObject, Ref, RefCallback } from 'react';
 
-function assignRef< T >( ref: Ref< T >, value: T ) {
+// Returns a cleanup function if the ref callback returned one (React 19 ref
+// callback cleanup pattern), otherwise `undefined`. Object refs never have a
+// cleanup and only set `.current`.
+function assignRef< T >( ref: Ref< T >, value: T ): ( () => void ) | undefined {
 	if ( typeof ref === 'function' ) {
-		ref( value );
+		const returned = ref( value );
+		return typeof returned === 'function' ? returned : undefined;
 	} else if ( ref && ref.hasOwnProperty( 'current' ) ) {
 		( ref as MutableRefObject< T > ).current = value;
 	}
+	return undefined;
+}
+
+// Tear down a ref at the given index: prefer the stored cleanup; otherwise
+// fall back to calling the ref with `null`.
+function detachRef< T >(
+	ref: Ref< T >,
+	index: number,
+	cleanups: Array< ( () => void ) | undefined >
+): void {
+	const cleanup = cleanups[ index ];
+	if ( cleanup ) {
+		cleanups[ index ] = undefined;
+		cleanup();
+	} else {
+		assignRef( ref, null );
+	}
 }
 
 /**
@@ -28,22 +49,24 @@ function assignRef< T >( ref: Ref< T >, value: T ) {
  * old ref callback will be called with `null` and the new ref callback will be
  * called with the same value.
  *
- * To make ref callbacks easier to use, you can also pass the result of
- * `useRefEffect`, which makes cleanup easier by allowing you to return a
- * cleanup function instead of handling `null`.
+ * Inner ref callbacks may return a cleanup function (React 19's ref callback
+ * cleanup pattern). When a ref callback returns a function, that function is
+ * invoked at teardown (node change, dependency change, or unmount) **instead
+ * of** the callback being called with `null`. Callbacks that do not return a
+ * cleanup continue to receive `null` on teardown as before.
  *
  * It's also possible to _disable_ a ref (and its behaviour) by simply not
  * passing the ref.
  *
  * ```jsx
- * const ref = useRefEffect( ( node ) => {
+ * const ref = useCallback( ( node ) => {
  *   node.addEventListener( ... );
  *   return () => {
  *     node.removeEventListener( ... );
  *   };
  * }, [ ...dependencies ] );
  * const otherRef = useRef();
- * const mergedRefs useMergeRefs( [
+ * const mergedRefs = useMergeRefs( [
  *   enabled && ref,
  *   otherRef,
  * ] );
@@ -56,11 +79,15 @@ function assignRef< T >( ref: Ref< T >, value: T ) {
 export default function useMergeRefs< T >(
 	refs: Ref< T >[]
 ): RefCallback< T > {
-	const element = useRef( null );
+	const elementRef = useRef< T | null >( null );
 	const isAttachedRef = useRef( false );
 	const didElementChangeRef = useRef( false );
 	const previousRefsRef = useRef< Ref< T >[] >( [] );
 	const currentRefsRef = useRef( refs );
+	// Position-indexed cleanups returned by inner ref callbacks. A slot is
+	// `undefined` when the ref at that position did not return a cleanup (or
+	// is an object ref / disabled).
+	const cleanupsRef = useRef< Array< ( () => void ) | undefined > >( [] );
 
 	// Update on render before the ref callback is called, so the ref callback
 	// always has access to the current refs.
@@ -77,8 +104,11 @@ export default function useMergeRefs< T >(
 			refs.forEach( ( ref, index ) => {
 				const previousRef = previousRefsRef.current[ index ];
 				if ( ref !== previousRef ) {
-					assignRef( previousRef, null );
-					assignRef( ref, element.current );
+					detachRef( previousRef, index, cleanupsRef.current );
+					cleanupsRef.current[ index ] = assignRef(
+						ref,
+						elementRef.current as T
+					);
 				}
 			} );
 		}
@@ -97,20 +127,21 @@ export default function useMergeRefs< T >(
 	return useCallback( ( value: T | null ) => {
 		// Update the element so it can be used when calling ref callbacks on a
 		// dependency change.
-		assignRef( element, value );
+		elementRef.current = value;
 
 		didElementChangeRef.current = true;
 		isAttachedRef.current = value !== null;
 
 		// When an element changes, the current ref callback should be called
 		// with the new element and the previous one with `null`.
-		const refsToAssign = value
-			? currentRefsRef.current
-			: previousRefsRef.current;
-
-		// Update the latest refs.
-		for ( const ref of refsToAssign ) {
-			assignRef( ref, value );
+		if ( value === null ) {
+			previousRefsRef.current.forEach( ( ref, index ) => {
+				detachRef( ref, index, cleanupsRef.current );
+			} );
+		} else {
+			currentRefsRef.current.forEach( ( ref, index ) => {
+				cleanupsRef.current[ index ] = assignRef( ref, value );
+			} );
 		}
 	}, [] );
 }