@wordpress/compose 7.6.0 → 7.7.0

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

@@ -31,7 +31,7 @@ export default function useCopyOnClick( ref, text, timeout = 4000 ) {
 	} );
 
 	/** @type {import('react').MutableRefObject<Clipboard | undefined>} */
-	const clipboard = useRef();
+	const clipboardRef = useRef();
 	const [ hasCopied, setHasCopied ] = useState( false );
 
 	useEffect( () => {
@@ -43,11 +43,11 @@ export default function useCopyOnClick( ref, text, timeout = 4000 ) {
 		}
 
 		// Clipboard listens to click events.
-		clipboard.current = new Clipboard( ref.current, {
+		clipboardRef.current = new Clipboard( ref.current, {
 			text: () => ( typeof text === 'function' ? text() : text ),
 		} );
 
-		clipboard.current.on( 'success', ( { clearSelection, trigger } ) => {
+		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.
@@ -66,8 +66,8 @@ export default function useCopyOnClick( ref, text, timeout = 4000 ) {
 		} );
 
 		return () => {
-			if ( clipboard.current ) {
-				clipboard.current.destroy();
+			if ( clipboardRef.current ) {
+				clipboardRef.current.destroy();
 			}
 			clearTimeout( timeoutId );
 		};

package/src/hooks/use-focus-on-mount/index.js

@@ -49,7 +49,7 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
 	};
 
 	/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */
-	const timerId = useRef();
+	const timerIdRef = useRef();
 
 	useEffect( () => {
 		focusOnMountRef.current = focusOnMount;
@@ -65,7 +65,7 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
 		}
 
 		if ( focusOnMountRef.current === 'firstElement' ) {
-			timerId.current = setTimeout( () => {
+			timerIdRef.current = setTimeout( () => {
 				const firstTabbable = focus.tabbable.find( node )[ 0 ];
 
 				if ( firstTabbable ) {
@@ -79,8 +79,8 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
 		setFocus( node );
 
 		return () => {
-			if ( timerId.current ) {
-				clearTimeout( timerId.current );
+			if ( timerIdRef.current ) {
+				clearTimeout( timerIdRef.current );
 			}
 		};
 	}, [] );

package/src/hooks/use-focus-outside/index.ts

@@ -71,20 +71,20 @@ type UseFocusOutsideReturn = {
 export default function useFocusOutside(
 	onFocusOutside: ( ( event: React.FocusEvent ) => void ) | undefined
 ): UseFocusOutsideReturn {
-	const currentOnFocusOutside = useRef( onFocusOutside );
+	const currentOnFocusOutsideRef = useRef( onFocusOutside );
 	useEffect( () => {
-		currentOnFocusOutside.current = onFocusOutside;
+		currentOnFocusOutsideRef.current = onFocusOutside;
 	}, [ onFocusOutside ] );
 
-	const preventBlurCheck = useRef( false );
+	const preventBlurCheckRef = useRef( false );
 
-	const blurCheckTimeoutId = useRef< number | undefined >();
+	const blurCheckTimeoutIdRef = useRef< number | undefined >();
 
 	/**
 	 * Cancel a blur check timeout.
 	 */
 	const cancelBlurCheck = useCallback( () => {
-		clearTimeout( blurCheckTimeoutId.current );
+		clearTimeout( blurCheckTimeoutIdRef.current );
 	}, [] );
 
 	// Cancel blur checks on unmount.
@@ -116,9 +116,9 @@ export default function useFocusOutside(
 		const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
 
 		if ( isInteractionEnd ) {
-			preventBlurCheck.current = false;
+			preventBlurCheckRef.current = false;
 		} else if ( isFocusNormalizedButton( target ) ) {
-			preventBlurCheck.current = true;
+			preventBlurCheckRef.current = true;
 		}
 	}, [] );
 
@@ -135,7 +135,7 @@ export default function useFocusOutside(
 		event.persist();
 
 		// Skip blur check if clicking button. See `normalizeButtonFocus`.
-		if ( preventBlurCheck.current ) {
+		if ( preventBlurCheckRef.current ) {
 			return;
 		}
 
@@ -156,7 +156,7 @@ export default function useFocusOutside(
 			return;
 		}
 
-		blurCheckTimeoutId.current = setTimeout( () => {
+		blurCheckTimeoutIdRef.current = setTimeout( () => {
 			// If document is not focused then focus should remain
 			// inside the wrapped component and therefore we cancel
 			// this blur event thereby leaving focus in place.
@@ -166,8 +166,8 @@ export default function useFocusOutside(
 				return;
 			}
 
-			if ( 'function' === typeof currentOnFocusOutside.current ) {
-				currentOnFocusOutside.current( event );
+			if ( 'function' === typeof currentOnFocusOutsideRef.current ) {
+				currentOnFocusOutsideRef.current( event );
 			}
 		}, 0 );
 	}, [] );

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

@@ -42,9 +42,9 @@ function useKeyboardShortcut(
 		target,
 	} = {}
 ) {
-	const currentCallback = useRef( callback );
+	const currentCallbackRef = useRef( callback );
 	useEffect( () => {
-		currentCallback.current = callback;
+		currentCallbackRef.current = callback;
 	}, [ callback ] );
 
 	useEffect( () => {
@@ -93,7 +93,7 @@ function useKeyboardShortcut(
 					/** @type {[e: import('mousetrap').ExtendedKeyboardEvent, combo: string]} */ ...args
 				) =>
 					/* eslint-enable jsdoc/valid-types */
-					currentCallback.current( ...args ),
+					currentCallbackRef.current( ...args ),
 				eventName
 			);
 		} );

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

@@ -71,28 +71,28 @@ function assignRef( ref, value ) {
  */
 export default function useMergeRefs( refs ) {
 	const element = useRef();
-	const isAttached = useRef( false );
-	const didElementChange = useRef( false );
+	const isAttachedRef = useRef( false );
+	const didElementChangeRef = useRef( false );
 	/* eslint-disable jsdoc/no-undefined-types */
 	/** @type {import('react').MutableRefObject<TRef[]>} */
 	/* eslint-enable jsdoc/no-undefined-types */
-	const previousRefs = useRef( [] );
-	const currentRefs = useRef( refs );
+	const previousRefsRef = useRef( [] );
+	const currentRefsRef = useRef( refs );
 
 	// Update on render before the ref callback is called, so the ref callback
 	// always has access to the current refs.
-	currentRefs.current = refs;
+	currentRefsRef.current = refs;
 
 	// If any of the refs change, call the previous ref with `null` and the new
 	// ref with the node, except when the element changes in the same cycle, in
 	// which case the ref callbacks will already have been called.
 	useLayoutEffect( () => {
 		if (
-			didElementChange.current === false &&
-			isAttached.current === true
+			didElementChangeRef.current === false &&
+			isAttachedRef.current === true
 		) {
 			refs.forEach( ( ref, index ) => {
-				const previousRef = previousRefs.current[ index ];
+				const previousRef = previousRefsRef.current[ index ];
 				if ( ref !== previousRef ) {
 					assignRef( previousRef, null );
 					assignRef( ref, element.current );
@@ -100,13 +100,13 @@ export default function useMergeRefs( refs ) {
 			} );
 		}
 
-		previousRefs.current = refs;
+		previousRefsRef.current = refs;
 	}, refs );
 
 	// No dependencies, must be reset after every render so ref callbacks are
 	// correctly called after a ref change.
 	useLayoutEffect( () => {
-		didElementChange.current = false;
+		didElementChangeRef.current = false;
 	} );
 
 	// There should be no dependencies so that `callback` is only called when
@@ -116,12 +116,14 @@ export default function useMergeRefs( refs ) {
 		// dependency change.
 		assignRef( element, value );
 
-		didElementChange.current = true;
-		isAttached.current = value !== null;
+		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 ? currentRefs.current : previousRefs.current;
+		const refsToAssign = value
+			? currentRefsRef.current
+			: previousRefsRef.current;
 
 		// Update the latest refs.
 		for ( const ref of refsToAssign ) {

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

@@ -31,12 +31,12 @@ export default function useRefEffect< TElement = Node >(
 	callback: ( node: TElement ) => ( () => void ) | void,
 	dependencies: DependencyList
 ): RefCallback< TElement | null > {
-	const cleanup = useRef< ( () => void ) | void >();
+	const cleanupRef = useRef< ( () => void ) | void >();
 	return useCallback( ( node: TElement | null ) => {
 		if ( node ) {
-			cleanup.current = callback( node );
-		} else if ( cleanup.current ) {
-			cleanup.current();
+			cleanupRef.current = callback( node );
+		} else if ( cleanupRef.current ) {
+			cleanupRef.current();
 		}
 	}, dependencies );
 }

package/src/hooks/use-resize-observer/index.tsx

@@ -1,116 +1,23 @@
 /**
  * External dependencies
  */
-import type { ReactElement, RefCallback, RefObject } from 'react';
+import type { ReactElement } from 'react';
 
 /**
  * WordPress dependencies
  */
 import {
-	useMemo,
-	useRef,
 	useCallback,
-	useEffect,
+	useLayoutEffect,
+	useRef,
 	useState,
 } from '@wordpress/element';
 
-type SubscriberCleanup = () => void;
-type SubscriberResponse = SubscriberCleanup | void;
-
-// This of course could've been more streamlined with internal state instead of
-// refs, but then host hooks / components could not opt out of renders.
-// This could've been exported to its own module, but the current build doesn't
-// seem to work with module imports and I had no more time to spend on this...
-function useResolvedElement< T extends HTMLElement >(
-	subscriber: ( element: T ) => SubscriberResponse,
-	refOrElement?: T | RefObject< T > | null
-): RefCallback< T > {
-	const callbackRefElement = useRef< T | null >( null );
-	const lastReportRef = useRef< {
-		reporter: () => void;
-		element: T | null;
-	} | null >( null );
-	const cleanupRef = useRef< SubscriberResponse | null >();
-
-	const callSubscriber = useCallback( () => {
-		let element = null;
-		if ( callbackRefElement.current ) {
-			element = callbackRefElement.current;
-		} else if ( refOrElement ) {
-			if ( refOrElement instanceof HTMLElement ) {
-				element = refOrElement;
-			} else {
-				element = refOrElement.current;
-			}
-		}
-
-		if (
-			lastReportRef.current &&
-			lastReportRef.current.element === element &&
-			lastReportRef.current.reporter === callSubscriber
-		) {
-			return;
-		}
-
-		if ( cleanupRef.current ) {
-			cleanupRef.current();
-			// Making sure the cleanup is not called accidentally multiple times.
-			cleanupRef.current = null;
-		}
-		lastReportRef.current = {
-			reporter: callSubscriber,
-			element,
-		};
-
-		// Only calling the subscriber, if there's an actual element to report.
-		if ( element ) {
-			cleanupRef.current = subscriber( element );
-		}
-	}, [ refOrElement, subscriber ] );
-
-	// On each render, we check whether a ref changed, or if we got a new raw
-	// element.
-	useEffect( () => {
-		// With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a
-		// render accompanying that change as well.
-		// To guarantee we always have the right element, one must use the ref callback provided instead, but we support
-		// RefObjects to make the hook API more convenient in certain cases.
-		callSubscriber();
-	}, [ callSubscriber ] );
-
-	return useCallback< RefCallback< T > >(
-		( element ) => {
-			callbackRefElement.current = element;
-			callSubscriber();
-		},
-		[ callSubscriber ]
-	);
-}
-
 type ObservedSize = {
-	width: number | undefined;
-	height: number | undefined;
+	width: number | null;
+	height: number | null;
 };
 
-type ResizeHandler = ( size: ObservedSize ) => void;
-
-type HookResponse< T extends HTMLElement > = {
-	ref: RefCallback< T >;
-} & ObservedSize;
-
-// Declaring my own type here instead of using the one provided by TS (available since 4.2.2), because this way I'm not
-// forcing consumers to use a specific TS version.
-type ResizeObserverBoxOptions =
-	| 'border-box'
-	| 'content-box'
-	| 'device-pixel-content-box';
-
-declare global {
-	interface ResizeObserverEntry {
-		readonly devicePixelContentBoxSize: ReadonlyArray< ResizeObserverSize >;
-	}
-}
-
 // We're only using the first element of the size sequences, until future versions of the spec solidify on how
 // exactly it'll be used for fragments in multi-column scenarios:
 // From the spec:
@@ -136,187 +43,88 @@ declare global {
 // even though it seems we have access to results for all box types.
 // This also means that we get to keep the current api, being able to return a simple { width, height } pair,
 // regardless of box option.
-const extractSize = (
-	entry: ResizeObserverEntry,
-	boxProp: 'borderBoxSize' | 'contentBoxSize' | 'devicePixelContentBoxSize',
-	sizeType: keyof ResizeObserverSize
-): number | undefined => {
-	if ( ! entry[ boxProp ] ) {
-		if ( boxProp === 'contentBoxSize' ) {
-			// The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.
-			// See the 6th step in the description for the RO algorithm:
-			// https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h
-			// > Set this.contentRect to logical this.contentBoxSize given target and observedBox of "content-box".
-			// In real browser implementations of course these objects differ, but the width/height values should be equivalent.
-			return entry.contentRect[
-				sizeType === 'inlineSize' ? 'width' : 'height'
-			];
-		}
-
-		return undefined;
+const extractSize = ( entry: ResizeObserverEntry ): ObservedSize => {
+	let entrySize;
+	if ( ! entry.contentBoxSize ) {
+		// The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.
+		// See the 6th step in the description for the RO algorithm:
+		// https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h
+		// > Set this.contentRect to logical this.contentBoxSize given target and observedBox of "content-box".
+		// In real browser implementations of course these objects differ, but the width/height values should be equivalent.
+		entrySize = [ entry.contentRect.width, entry.contentRect.height ];
+	} else if ( entry.contentBoxSize[ 0 ] ) {
+		const contentBoxSize = entry.contentBoxSize[ 0 ];
+		entrySize = [ contentBoxSize.inlineSize, contentBoxSize.blockSize ];
+	} else {
+		// TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's buggy
+		// behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
+		const contentBoxSize =
+			entry.contentBoxSize as unknown as ResizeObserverSize;
+		entrySize = [ contentBoxSize.inlineSize, contentBoxSize.blockSize ];
 	}
 
-	// A couple bytes smaller than calling Array.isArray() and just as effective here.
-	return entry[ boxProp ][ 0 ]
-		? entry[ boxProp ][ 0 ][ sizeType ]
-		: // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current
-		  // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
-		  // @ts-ignore
-		  entry[ boxProp ][ sizeType ];
+	const [ width, height ] = entrySize.map( ( d ) => Math.round( d ) );
+	return { width, height };
+};
+
+const RESIZE_ELEMENT_STYLES = {
+	position: 'absolute',
+	top: 0,
+	left: 0,
+	right: 0,
+	bottom: 0,
+	pointerEvents: 'none',
+	opacity: 0,
+	overflow: 'hidden',
+	zIndex: -1,
+} as const;
+
+type ResizeElementProps = {
+	onResize: ( s: ObservedSize ) => void;
 };
 
-type RoundingFunction = ( n: number ) => number;
+function ResizeElement( { onResize }: ResizeElementProps ) {
+	const resizeElementRef = useRef< HTMLDivElement >( null );
+	const resizeCallbackRef = useRef( onResize );
 
-function useResizeObserver< T extends HTMLElement >(
-	opts: {
-		ref?: RefObject< T > | T | null | undefined;
-		onResize?: ResizeHandler;
-		box?: ResizeObserverBoxOptions;
-		round?: RoundingFunction;
-	} = {}
-): HookResponse< T > {
-	// Saving the callback as a ref. With this, I don't need to put onResize in the
-	// effect dep array, and just passing in an anonymous function without memoising
-	// will not reinstantiate the hook's ResizeObserver.
-	const onResize = opts.onResize;
-	const onResizeRef = useRef< ResizeHandler | undefined >( undefined );
-	onResizeRef.current = onResize;
-	const round = opts.round || Math.round;
+	useLayoutEffect( () => {
+		resizeCallbackRef.current = onResize;
+	}, [ onResize ] );
 
-	// Using a single instance throughout the hook's lifetime
-	const resizeObserverRef = useRef< {
-		box?: ResizeObserverBoxOptions;
-		round?: RoundingFunction;
-		instance: ResizeObserver;
-	} >();
+	useLayoutEffect( () => {
+		const resizeElement = resizeElementRef.current as HTMLDivElement;
+		const resizeObserver = new ResizeObserver( ( entries ) => {
+			for ( const entry of entries ) {
+				const newSize = extractSize( entry );
+				resizeCallbackRef.current( newSize );
+			}
+		} );
 
-	const [ size, setSize ] = useState< {
-		width?: number;
-		height?: number;
-	} >( {
-		width: undefined,
-		height: undefined,
-	} );
+		resizeObserver.observe( resizeElement );
 
-	// In certain edge cases the RO might want to report a size change just after
-	// the component unmounted.
-	const didUnmount = useRef( false );
-	useEffect( () => {
-		didUnmount.current = false;
 		return () => {
-			didUnmount.current = true;
+			resizeObserver.unobserve( resizeElement );
 		};
 	}, [] );
 
-	// Using a ref to track the previous width / height to avoid unnecessary renders.
-	const previous: {
-		current: {
-			width?: number;
-			height?: number;
-		};
-	} = useRef( {
-		width: undefined,
-		height: undefined,
-	} );
-
-	// This block is kinda like a useEffect, only it's called whenever a new
-	// element could be resolved based on the ref option. It also has a cleanup
-	// function.
-	const refCallback = useResolvedElement< T >(
-		useCallback(
-			( element ) => {
-				// We only use a single Resize Observer instance, and we're instantiating it on demand, only once there's something to observe.
-				// This instance is also recreated when the `box` option changes, so that a new observation is fired if there was a previously observed element with a different box option.
-				if (
-					! resizeObserverRef.current ||
-					resizeObserverRef.current.box !== opts.box ||
-					resizeObserverRef.current.round !== round
-				) {
-					resizeObserverRef.current = {
-						box: opts.box,
-						round,
-						instance: new ResizeObserver( ( entries ) => {
-							const entry = entries[ 0 ];
-
-							let boxProp:
-								| 'borderBoxSize'
-								| 'contentBoxSize'
-								| 'devicePixelContentBoxSize' = 'borderBoxSize';
-							if ( opts.box === 'border-box' ) {
-								boxProp = 'borderBoxSize';
-							} else {
-								boxProp =
-									opts.box === 'device-pixel-content-box'
-										? 'devicePixelContentBoxSize'
-										: 'contentBoxSize';
-							}
-
-							const reportedWidth = extractSize(
-								entry,
-								boxProp,
-								'inlineSize'
-							);
-							const reportedHeight = extractSize(
-								entry,
-								boxProp,
-								'blockSize'
-							);
-
-							const newWidth = reportedWidth
-								? round( reportedWidth )
-								: undefined;
-							const newHeight = reportedHeight
-								? round( reportedHeight )
-								: undefined;
-
-							if (
-								previous.current.width !== newWidth ||
-								previous.current.height !== newHeight
-							) {
-								const newSize = {
-									width: newWidth,
-									height: newHeight,
-								};
-								previous.current.width = newWidth;
-								previous.current.height = newHeight;
-								if ( onResizeRef.current ) {
-									onResizeRef.current( newSize );
-								} else if ( ! didUnmount.current ) {
-									setSize( newSize );
-								}
-							}
-						} ),
-					};
-				}
-
-				resizeObserverRef.current.instance.observe( element, {
-					box: opts.box,
-				} );
-
-				return () => {
-					if ( resizeObserverRef.current ) {
-						resizeObserverRef.current.instance.unobserve( element );
-					}
-				};
-			},
-			[ opts.box, round ]
-		),
-		opts.ref
+	return (
+		<div
+			ref={ resizeElementRef }
+			style={ RESIZE_ELEMENT_STYLES }
+			aria-hidden="true"
+		/>
 	);
+}
 
-	return useMemo(
-		() => ( {
-			ref: refCallback,
-			width: size.width,
-			height: size.height,
-		} ),
-		[ refCallback, size ? size.width : null, size ? size.height : null ]
-	);
+function sizeEquals( a: ObservedSize, b: ObservedSize ) {
+	return a.width === b.width && a.height === b.height;
 }
 
+const NULL_SIZE: ObservedSize = { width: null, height: null };
+
 /**
- * Hook which allows to listen the resize event of any target element when it changes sizes.
- * _Note: `useResizeObserver` will report `null` until after first render.
+ * Hook which allows to listen to the resize event of any target element when it changes size.
+ * _Note: `useResizeObserver` will report `null` sizes until after first render.
  *
  * @example
  *
@@ -333,30 +141,19 @@ function useResizeObserver< T extends HTMLElement >(
  * };
  * ```
  */
-export default function useResizeAware(): [
-	ReactElement,
-	{ width: number | null; height: number | null },
-] {
-	const { ref, width, height } = useResizeObserver();
-	const sizes = useMemo( () => {
-		return { width: width ?? null, height: height ?? null };
-	}, [ width, height ] );
-	const resizeListener = (
-		<div
-			style={ {
-				position: 'absolute',
-				top: 0,
-				left: 0,
-				right: 0,
-				bottom: 0,
-				pointerEvents: 'none',
-				opacity: 0,
-				overflow: 'hidden',
-				zIndex: -1,
-			} }
-			aria-hidden="true"
-			ref={ ref }
-		/>
-	);
-	return [ resizeListener, sizes ];
+export default function useResizeObserver(): [ ReactElement, ObservedSize ] {
+	const [ size, setSize ] = useState( NULL_SIZE );
+
+	// Using a ref to track the previous width / height to avoid unnecessary renders.
+	const previousSizeRef = useRef( NULL_SIZE );
+
+	const handleResize = useCallback( ( newSize: ObservedSize ) => {
+		if ( ! sizeEquals( previousSizeRef.current, newSize ) ) {
+			previousSizeRef.current = newSize;
+			setSize( newSize );
+		}
+	}, [] );
+
+	const resizeElement = <ResizeElement onResize={ handleResize } />;
+	return [ resizeElement, size ];
 }