@wordpress/compose 7.40.1-next.v.202602271551.0 → 7.40.1

package/src/hooks/use-viewport-match/test/index.js

@@ -44,15 +44,18 @@ describe( 'useViewportMatch', () => {
 		expect( useMediaQueryMock ).toHaveBeenCalledTimes( 3 );
 		expect( useMediaQueryMock ).toHaveBeenNthCalledWith(
 			1,
-			'(max-width: 1280px)'
+			'(max-width: 1280px)',
+			window
 		);
 		expect( useMediaQueryMock ).toHaveBeenNthCalledWith(
 			2,
-			'(min-width: 782px)'
+			'(min-width: 782px)',
+			window
 		);
 		expect( useMediaQueryMock ).toHaveBeenNthCalledWith(
 			3,
-			'(min-width: 600px)'
+			'(min-width: 600px)',
+			window
 		);
 	} );
 
@@ -76,15 +79,18 @@ describe( 'useViewportMatch', () => {
 		expect( useMediaQueryMock ).toHaveBeenCalledTimes( 3 );
 		expect( useMediaQueryMock ).toHaveBeenNthCalledWith(
 			1,
-			'(min-width: 1440px)'
+			'(min-width: 1440px)',
+			window
 		);
 		expect( useMediaQueryMock ).toHaveBeenNthCalledWith(
 			2,
-			'(max-width: 960px)'
+			'(max-width: 960px)',
+			window
 		);
 		expect( useMediaQueryMock ).toHaveBeenNthCalledWith(
 			3,
-			'(max-width: 480px)'
+			'(max-width: 480px)',
+			window
 		);
 	} );
 
@@ -121,9 +127,25 @@ describe( 'useViewportMatch', () => {
 
 		expect( useMediaQueryMock ).toHaveBeenCalledTimes( 4 );
 		// `useMediaQuery` is expected to receive `undefined` when simulating width.
-		expect( useMediaQueryMock ).toHaveBeenNthCalledWith( 1, undefined );
-		expect( useMediaQueryMock ).toHaveBeenNthCalledWith( 2, undefined );
-		expect( useMediaQueryMock ).toHaveBeenNthCalledWith( 3, undefined );
-		expect( useMediaQueryMock ).toHaveBeenNthCalledWith( 4, undefined );
+		expect( useMediaQueryMock ).toHaveBeenNthCalledWith(
+			1,
+			undefined,
+			window
+		);
+		expect( useMediaQueryMock ).toHaveBeenNthCalledWith(
+			2,
+			undefined,
+			window
+		);
+		expect( useMediaQueryMock ).toHaveBeenNthCalledWith(
+			3,
+			undefined,
+			window
+		);
+		expect( useMediaQueryMock ).toHaveBeenNthCalledWith(
+			4,
+			undefined,
+			window
+		);
 	} );
 } );

package/src/index.js

@@ -27,7 +27,7 @@ export { default as __experimentalUseDialog } from './hooks/use-dialog';
 export { default as useDisabled } from './hooks/use-disabled';
 export { default as useEvent } from './hooks/use-event';
 export { default as __experimentalUseDragging } from './hooks/use-dragging';
-export { useFocusOnMount } from './hooks/use-focus-on-mount';
+export { default as useFocusOnMount } from './hooks/use-focus-on-mount';
 export { default as __experimentalUseFocusOutside } from './hooks/use-focus-outside';
 export { default as useFocusReturn } from './hooks/use-focus-return';
 export { default as useInstanceId } from './hooks/use-instance-id';

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;
-}

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

@@ -1,69 +0,0 @@
-/**
- * External dependencies
- */
-import Clipboard from 'clipboard';
-
-/**
- * WordPress dependencies
- */
-import { useRef, useLayoutEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import useRefEffect from '../use-ref-effect';
-
-/**
- * @template T
- * @param {T} value
- * @return {React.RefObject<T>} The updated ref
- */
-function useUpdatedRef( value ) {
-	const ref = useRef( value );
-	useLayoutEffect( () => {
-		ref.current = value;
-	}, [ value ] );
-	return ref;
-}
-
-/**
- * Copies the given text to the clipboard when the element is clicked.
- *
- * @template {HTMLElement} TElementType
- * @param {string | (() => string)} text      The text to copy. Use a function if not
- *                                            already available and expensive to compute.
- * @param {Function}                onSuccess Called when to text is copied.
- *
- * @return {React.Ref<TElementType>} A ref to assign to the target element.
- */
-export default function useCopyToClipboard( text, onSuccess ) {
-	// Store the dependencies as refs and continuously update them so they're
-	// fresh when the callback is called.
-	const textRef = useUpdatedRef( text );
-	const onSuccessRef = useUpdatedRef( onSuccess );
-	return useRefEffect( ( node ) => {
-		// Clipboard listens to click events.
-		const clipboard = new Clipboard( node, {
-			text() {
-				return typeof textRef.current === 'function'
-					? textRef.current()
-					: textRef.current || '';
-			},
-		} );
-
-		clipboard.on( 'success', ( { clearSelection } ) => {
-			// 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();
-
-			if ( onSuccessRef.current ) {
-				onSuccessRef.current();
-			}
-		} );
-
-		return () => {
-			clipboard.destroy();
-		};
-	}, [] );
-}