@wordpress/compose 7.41.0 → 7.41.1-next.v.202603161435.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "7.41.0",
+	"version": "7.41.1-next.v.202603161435.0+ab4981c4f",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -47,15 +47,14 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^4.41.0",
-		"@wordpress/dom": "^4.41.0",
-		"@wordpress/element": "^6.41.0",
-		"@wordpress/is-shallow-equal": "^5.41.0",
-		"@wordpress/keycodes": "^4.41.0",
-		"@wordpress/priority-queue": "^3.41.0",
-		"@wordpress/undo-manager": "^1.41.0",
+		"@wordpress/deprecated": "^4.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/dom": "^4.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/element": "^6.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/is-shallow-equal": "^5.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/keycodes": "^4.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/priority-queue": "^3.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/undo-manager": "^1.41.1-next.v.202603161435.0+ab4981c4f",
 		"change-case": "^4.1.2",
-		"clipboard": "^2.0.11",
 		"mousetrap": "^1.6.5",
 		"use-memo-one": "^1.1.1"
 	},
@@ -68,5 +67,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8bfc179b9aed74c0a6dd6e8edf7a49e40e4f87cc"
+	"gitHead": "748f4e4564fcc0e6ae90200d90bb993a3cef5828"
 }

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

@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+import type { RefObject } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { clearSelection, copyToClipboard } from '../use-copy-to-clipboard';
+
+/**
+ * Copies the text to the clipboard when the element is clicked.
+ *
+ * @deprecated
+ * @param ref      Reference with the element.
+ * @param text    The text to copy.
+ * @param timeout Optional timeout to reset the returned
+ *                state. 4 seconds by default.
+ * @return   Whether or not the text has been copied. Resets after the
+ *           timeout.
+ */
+export default function useCopyOnClick(
+	ref: RefObject< string | Element | NodeListOf< Element > >,
+	text: string | ( () => string ),
+	timeout: number = 4000
+): boolean {
+	deprecated( 'wp.compose.useCopyOnClick', {
+		since: '5.8',
+		alternative: 'wp.compose.useCopyToClipboard',
+	} );
+
+	const [ hasCopied, setHasCopied ] = useState( false );
+
+	useEffect( () => {
+		// Flag to prevent state updates after unmount when the Promise resolves.
+		let isActive = true;
+		let timeoutId: ReturnType< typeof setTimeout > | undefined;
+		if ( ! ref.current ) {
+			return;
+		}
+
+		let targets: Element[];
+		if ( typeof ref.current === 'string' ) {
+			targets =
+				typeof document !== 'undefined'
+					? Array.from( document.querySelectorAll( ref.current ) )
+					: [];
+		} else if (
+			'length' in ref.current &&
+			typeof ref.current.length === 'number'
+		) {
+			targets = Array.from( ref.current );
+		} else {
+			targets = [ ref.current as Element ];
+		}
+
+		if ( targets.length === 0 ) {
+			return;
+		}
+
+		const handleClick = async ( event: Event ) => {
+			const trigger = event.currentTarget as Element;
+			if ( ! trigger ) {
+				return;
+			}
+			const success = await copyToClipboard(
+				typeof text === 'function' ? text() : text || '',
+				trigger
+			);
+			if ( ! isActive ) {
+				return;
+			}
+			if ( success ) {
+				clearSelection( trigger );
+				if ( timeout ) {
+					setHasCopied( true );
+					clearTimeout( timeoutId );
+					timeoutId = setTimeout(
+						() => setHasCopied( false ),
+						timeout
+					);
+				}
+			}
+		};
+
+		for ( const target of targets ) {
+			target.addEventListener( 'click', handleClick );
+		}
+		return () => {
+			isActive = false;
+			for ( const target of targets ) {
+				target.removeEventListener( 'click', handleClick );
+			}
+			clearTimeout( timeoutId );
+		};
+	}, [ ref, text, timeout ] );
+
+	return hasCopied;
+}

package/src/hooks/use-copy-on-click/test/index.tsx

@@ -0,0 +1,162 @@
+/**
+ * External dependencies
+ */
+import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+import { useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useCopyOnClick from '../';
+
+jest.mock( '@wordpress/deprecated' );
+
+interface TestComponentProps {
+	text: string | ( () => string );
+	timeout?: number;
+}
+
+describe( 'useCopyOnClick', () => {
+	const TestComponent = ( { text, timeout = 4000 }: TestComponentProps ) => {
+		const ref = useRef< HTMLButtonElement >( null );
+		const hasCopied = useCopyOnClick( ref, text, timeout );
+		return (
+			<button ref={ ref } type="button">
+				{ hasCopied ? 'Copied!' : 'Copy' }
+			</button>
+		);
+	};
+
+	it( 'should call deprecated when the hook is used', () => {
+		jest.mocked( deprecated ).mockClear();
+		render( <TestComponent text="test text" /> );
+
+		expect( deprecated ).toHaveBeenCalledWith(
+			'wp.compose.useCopyOnClick',
+			{
+				since: '5.8',
+				alternative: 'wp.compose.useCopyToClipboard',
+			}
+		);
+	} );
+
+	it( 'should copy text on click', async () => {
+		const user = userEvent.setup();
+		render( <TestComponent text="test text" /> );
+
+		const writeTextMock = jest
+			.spyOn( navigator.clipboard, 'writeText' )
+			.mockResolvedValue();
+
+		await user.click( screen.getByRole( 'button' ) );
+
+		expect( writeTextMock ).toHaveBeenCalledTimes( 1 );
+		expect( writeTextMock ).toHaveBeenCalledWith( 'test text' );
+	} );
+
+	it( 'should set hasCopied to true when copy succeeds', async () => {
+		const user = userEvent.setup();
+		render( <TestComponent text="test text" /> );
+
+		jest.spyOn( navigator.clipboard, 'writeText' ).mockResolvedValue();
+
+		expect( screen.getByRole( 'button' ) ).toHaveTextContent( 'Copy' );
+
+		await user.click( screen.getByRole( 'button' ) );
+
+		await act( async () => {
+			await new Promise( ( resolve ) => setTimeout( resolve, 0 ) );
+		} );
+
+		expect( screen.getByRole( 'button' ) ).toHaveTextContent( 'Copied!' );
+	} );
+
+	it( 'should reset hasCopied after timeout', async () => {
+		jest.useFakeTimers();
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+		render( <TestComponent text="test text" timeout={ 1000 } /> );
+
+		jest.spyOn( navigator.clipboard, 'writeText' ).mockResolvedValue();
+
+		await user.click( screen.getByRole( 'button' ) );
+
+		await act( async () => {
+			const p = new Promise( ( resolve ) => setTimeout( resolve, 0 ) );
+			jest.advanceTimersByTime( 0 );
+			await p;
+		} );
+		expect( screen.getByRole( 'button' ) ).toHaveTextContent( 'Copied!' );
+
+		act( () => {
+			jest.advanceTimersByTime( 1000 );
+		} );
+		expect( screen.getByRole( 'button' ) ).toHaveTextContent( 'Copy' );
+
+		jest.useRealTimers();
+	} );
+
+	it( 'should not set hasCopied when copy fails', async () => {
+		const user = userEvent.setup();
+		render( <TestComponent text="test text" /> );
+
+		jest.spyOn( navigator.clipboard, 'writeText' ).mockRejectedValue(
+			new Error()
+		);
+
+		await user.click( screen.getByRole( 'button' ) );
+
+		await act( async () => {
+			await new Promise( ( resolve ) => setTimeout( resolve, 0 ) );
+		} );
+
+		expect( screen.getByRole( 'button' ) ).toHaveTextContent( 'Copy' );
+	} );
+
+	it( 'should not update hasCopied after unmount', async () => {
+		const renderSpy = jest.fn();
+
+		const SpyComponent = ( { text }: { text: string } ) => {
+			const ref = useRef< HTMLButtonElement >( null );
+			const hasCopied = useCopyOnClick( ref, text );
+			renderSpy( hasCopied );
+			return (
+				<button ref={ ref } type="button">
+					{ hasCopied ? 'Copied!' : 'Copy' }
+				</button>
+			);
+		};
+
+		let resolvePromise: () => void;
+		const delayedPromise = new Promise< void >( ( resolve ) => {
+			resolvePromise = resolve;
+		} );
+		jest.spyOn( navigator.clipboard, 'writeText' ).mockReturnValue(
+			delayedPromise as Promise< void >
+		);
+
+		const user = userEvent.setup();
+		const { unmount } = render( <SpyComponent text="test" /> );
+
+		expect( renderSpy ).toHaveBeenLastCalledWith( false );
+		const renderCountBeforeUnmount = renderSpy.mock.calls.length;
+
+		await user.click( screen.getByRole( 'button' ) );
+		unmount();
+
+		await act( async () => {
+			resolvePromise();
+			await new Promise( ( resolve ) => setTimeout( resolve, 0 ) );
+		} );
+
+		// No additional renders after unmount — setHasCopied(true) was not called.
+		expect( renderSpy ).toHaveBeenCalledTimes( renderCountBeforeUnmount );
+	} );
+} );

package/src/hooks/use-copy-to-clipboard/index.ts

@@ -0,0 +1,120 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useLayoutEffect } from '@wordpress/element';
+import type { MutableRefObject, RefCallback } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import useRefEffect from '../use-ref-effect';
+
+/**
+ * Copies text to the clipboard using the Clipboard API when available,
+ * with a fallback for non-secure contexts (e.g. HTTP) and older browsers.
+ *
+ * @param text    The text to copy.
+ * @param trigger The element that triggered the copy.
+ * @return Resolves to true if successful, false otherwise.
+ */
+export async function copyToClipboard(
+	text: string,
+	trigger: Element | null
+): Promise< boolean > {
+	if ( ! trigger ) {
+		return false;
+	}
+	const { ownerDocument } = trigger;
+	if ( ! ownerDocument ) {
+		return false;
+	}
+	const { defaultView } = ownerDocument;
+	try {
+		if ( defaultView?.navigator?.clipboard?.writeText ) {
+			await defaultView.navigator.clipboard.writeText( text );
+			return true;
+		}
+		// Fallback for non-secure contexts (HTTP) and older browsers.
+		const textarea = ownerDocument.createElement( 'textarea' );
+		textarea.value = text;
+		textarea.setAttribute( 'readonly', '' );
+		textarea.style.position = 'fixed';
+		textarea.style.left = '-9999px';
+		textarea.style.top = '-9999px';
+		ownerDocument.body.appendChild( textarea );
+		textarea.select();
+		const success = ownerDocument.execCommand( 'copy' );
+		textarea.remove();
+		return success;
+	} catch {
+		return false;
+	}
+}
+
+/**
+ * Clears the current selection and restores focus to the trigger element.
+ *
+ * @param trigger The element that triggered the copy.
+ */
+export function clearSelection( trigger: Element ): void {
+	if ( 'focus' in trigger && typeof trigger.focus === 'function' ) {
+		trigger.focus();
+	}
+	trigger.ownerDocument?.defaultView?.getSelection()?.removeAllRanges();
+}
+
+/**
+ * @template T
+ * @param    value
+ * @return   A ref to assign to the target element.
+ */
+function useUpdatedRef< T >( value: T ): MutableRefObject< T > {
+	const ref = useRef< T >( value );
+	useLayoutEffect( () => {
+		ref.current = value;
+	}, [ value ] );
+	return ref;
+}
+
+/**
+ * Copies the given text to the clipboard when the element is clicked.
+ *
+ * @template T
+ * @param    text      The text to copy. Use a function if not
+ *                     already available and expensive to compute.
+ * @param    onSuccess Called when to text is copied.
+ *
+ * @return   A ref to assign to the target element.
+ */
+export default function useCopyToClipboard< T extends HTMLElement >(
+	text: string | ( () => string ),
+	onSuccess?: () => void
+): RefCallback< T > {
+	const textRef = useUpdatedRef( text );
+	const onSuccessRef = useUpdatedRef( onSuccess );
+	return useRefEffect( ( node ) => {
+		// Flag to prevent callbacks after unmount when the Promise resolves.
+		let isActive = true;
+		const handleClick = async () => {
+			const textToCopy =
+				typeof textRef.current === 'function'
+					? textRef.current()
+					: textRef.current || '';
+			const success = await copyToClipboard( textToCopy, node );
+			if ( ! isActive ) {
+				return;
+			}
+			if ( success ) {
+				clearSelection( node );
+				if ( onSuccessRef.current ) {
+					onSuccessRef.current();
+				}
+			}
+		};
+		node.addEventListener( 'click', handleClick );
+		return () => {
+			isActive = false;
+			node.removeEventListener( 'click', handleClick );
+		};
+	}, [] );
+}

package/src/hooks/use-copy-to-clipboard/test/index.tsx

@@ -0,0 +1,144 @@
+/**
+ * External dependencies
+ */
+import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import useCopyToClipboard, { copyToClipboard, clearSelection } from '../';
+
+interface TestComponentProps {
+	text: string | ( () => string );
+	onSuccess?: () => void;
+}
+
+describe( 'useCopyToClipboard', () => {
+	const TestComponent = ( { text, onSuccess }: TestComponentProps ) => {
+		const ref = useCopyToClipboard( text, onSuccess );
+		return <button ref={ ref }>Copy</button>;
+	};
+
+	it( 'should copy text on click', async () => {
+		const user = userEvent.setup();
+		render( <TestComponent text="test text" /> );
+
+		const writeTextMock = jest
+			.spyOn( navigator.clipboard, 'writeText' )
+			.mockResolvedValue();
+
+		await user.click( screen.getByRole( 'button' ) );
+
+		expect( writeTextMock ).toHaveBeenCalledTimes( 1 );
+		expect( writeTextMock ).toHaveBeenCalledWith( 'test text' );
+	} );
+
+	it( 'should call onSuccess when copy succeeds', async () => {
+		const user = userEvent.setup();
+		const onSuccess = jest.fn();
+		render( <TestComponent text="test text" onSuccess={ onSuccess } /> );
+
+		await user.click( screen.getByRole( 'button' ) );
+
+		expect( onSuccess ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should call onSuccess when copy empty text', async () => {
+		const user = userEvent.setup();
+		const onSuccess = jest.fn();
+		render( <TestComponent text="" onSuccess={ onSuccess } /> );
+
+		await user.click( screen.getByRole( 'button' ) );
+
+		expect( onSuccess ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should not call onSuccess when copy fails', async () => {
+		const user = userEvent.setup();
+		const onSuccess = jest.fn();
+		render( <TestComponent text="test text" onSuccess={ onSuccess } /> );
+
+		jest.spyOn( navigator.clipboard, 'writeText' ).mockRejectedValue(
+			new Error()
+		);
+
+		await user.click( screen.getByRole( 'button' ) );
+
+		expect( onSuccess ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should not call onSuccess after unmount', async () => {
+		let resolvePromise: () => void;
+		const delayedPromise = new Promise< void >( ( resolve ) => {
+			resolvePromise = resolve;
+		} );
+		jest.spyOn( navigator.clipboard, 'writeText' ).mockReturnValue(
+			delayedPromise
+		);
+
+		const user = userEvent.setup();
+		const onSuccess = jest.fn();
+		const { unmount } = render(
+			<TestComponent text="test" onSuccess={ onSuccess } />
+		);
+
+		await user.click( screen.getByRole( 'button' ) );
+		unmount();
+
+		await act( async () => {
+			resolvePromise();
+			await new Promise( ( resolve ) => setTimeout( resolve, 0 ) );
+		} );
+
+		expect( onSuccess ).not.toHaveBeenCalled();
+	} );
+} );
+
+describe( 'copyToClipboard', () => {
+	it( 'should use execCommand fallback when clipboard API is not available', async () => {
+		const trigger = document.createElement( 'button' );
+		document.body.appendChild( trigger );
+
+		const originalClipboard = navigator.clipboard;
+		Object.defineProperty( navigator, 'clipboard', {
+			value: undefined,
+			configurable: true,
+		} );
+
+		// JSDOM does not implement execCommand; add a mock for the fallback path.
+		// See: https://github.com/jsdom/jsdom/issues/1742
+		const execCommandMock = jest.fn().mockReturnValue( true );
+		Object.defineProperty( document, 'execCommand', {
+			value: execCommandMock,
+			configurable: true,
+			writable: true,
+		} );
+
+		const result = await copyToClipboard( 'fallback text', trigger );
+
+		expect( result ).toBe( true );
+		expect( execCommandMock ).toHaveBeenCalledWith( 'copy' );
+
+		delete ( document as { execCommand?: unknown } ).execCommand;
+		Object.defineProperty( navigator, 'clipboard', {
+			value: originalClipboard,
+			configurable: true,
+		} );
+		document.body.removeChild( trigger );
+	} );
+} );
+
+describe( 'clearSelection', () => {
+	it( 'should focus the trigger element', () => {
+		const trigger = document.createElement( 'button' );
+		document.body.appendChild( trigger );
+		const focusMock = jest.spyOn( trigger, 'focus' );
+
+		clearSelection( trigger );
+
+		expect( focusMock ).toHaveBeenCalledTimes( 1 );
+
+		document.body.removeChild( trigger );
+	} );
+} );

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

@@ -1,75 +0,0 @@
-/**
- * External dependencies
- */
-import Clipboard from 'clipboard';
-
-/**
- * WordPress dependencies
- */
-import { useRef, useEffect, useState } from '@wordpress/element';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Copies the text to the clipboard when the element is clicked.
- *
- * @deprecated
- *
- * @param {React.RefObject<string | Element | NodeListOf<Element>>} ref       Reference with the element.
- * @param {string|Function}                                         text      The text to copy.
- * @param {number}                                                  [timeout] Optional timeout to reset the returned
- *                                                                            state. 4 seconds by default.
- *
- * @return {boolean} Whether or not the text has been copied. Resets after the
- *                   timeout.
- */
-export default function useCopyOnClick( ref, text, timeout = 4000 ) {
-	deprecated( 'wp.compose.useCopyOnClick', {
-		since: '5.8',
-		alternative: 'wp.compose.useCopyToClipboard',
-	} );
-
-	/** @type {React.MutableRefObject<Clipboard | undefined>} */
-	const clipboardRef = useRef( undefined );
-	const [ hasCopied, setHasCopied ] = useState( false );
-
-	useEffect( () => {
-		/** @type {number | undefined} */
-		let timeoutId;
-
-		if ( ! ref.current ) {
-			return;
-		}
-
-		// Clipboard listens to click events.
-		clipboardRef.current = new Clipboard( ref.current, {
-			text: () => ( typeof text === 'function' ? text() : text ),
-		} );
-
-		clipboardRef.current.on( 'success', ( { clearSelection, trigger } ) => {
-			// Clearing selection will move focus back to the triggering button,
-			// ensuring that it is not reset to the body, and further that it is
-			// kept within the rendered node.
-			clearSelection();
-
-			// Handle ClipboardJS focus bug, see https://github.com/zenorocha/clipboard.js/issues/680
-			if ( trigger ) {
-				/** @type {HTMLElement} */ ( trigger ).focus();
-			}
-
-			if ( timeout ) {
-				setHasCopied( true );
-				clearTimeout( timeoutId );
-				timeoutId = setTimeout( () => setHasCopied( false ), timeout );
-			}
-		} );
-
-		return () => {
-			if ( clipboardRef.current ) {
-				clipboardRef.current.destroy();
-			}
-			clearTimeout( timeoutId );
-		};
-	}, [ text, timeout, setHasCopied ] );
-
-	return hasCopied;
-}