@wordpress/compose 7.6.0 → 7.8.1-next.5368f64a9.0

package/build-types/hooks/use-event/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Any function.
+ */
+export type AnyFunction = (...args: any) => any;
+/**
+ * Creates a stable callback function that has access to the latest state and
+ * can be used within event handlers and effect callbacks. Throws when used in
+ * the render phase.
+ *
+ * @param callback The callback function to wrap.
+ *
+ * @example
+ *
+ * ```tsx
+ * function Component( props ) {
+ *   const onClick = useEvent( props.onClick );
+ *   useEffect( () => {
+ *     onClick();
+ *     // Won't trigger the effect again when props.onClick is updated.
+ *   }, [ onClick ] );
+ *   // Won't re-render Button when props.onClick is updated (if `Button` is
+ *   // wrapped in `React.memo`).
+ *   return <Button onClick={ onClick } />;
+ * }
+ * ```
+ */
+export default function useEvent<T extends AnyFunction>(
+/**
+ * The callback function to wrap.
+ */
+callback?: T): T;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-event/index.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,CAAE,GAAG,IAAI,EAAE,GAAG,KAAM,GAAG,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAE,CAAC,SAAS,WAAW;AACtD;;GAEG;AACH,QAAQ,CAAC,EAAE,CAAC,GAaP,CAAC,CACN"}

package/build-types/hooks/use-focus-on-mount/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-on-mount/index.js"],"names":[],"mappings":"AAWA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,uDAlBW,OAAO,GAAG,cAAc,GACvB,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAuEnD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-on-mount/index.js"],"names":[],"mappings":"AAWA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,uDAlBW,OAAO,GAAG,cAAc,GACvB,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAqEnD"}

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.js"],"names":[],"mappings":"AA4BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qCALwC,IAAI,SAA/B,OAAQ,OAAO,EAAE,GAAG,CAAC,GAAG,CAAE,QAC5B,KAAK,CAAC,IAAI,CAAC,GAEV,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CA6DzD;wBA3HY,CAAC,IACD,CAAC,SAAS,OAAO,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-merge-refs/index.js"],"names":[],"mappings":"AA4BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qCALwC,IAAI,SAA/B,OAAQ,OAAO,EAAE,GAAG,CAAC,GAAG,CAAE,QAC5B,KAAK,CAAC,IAAI,CAAC,GAEV,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CA+DzD;wBA7HY,CAAC,IACD,CAAC,SAAS,OAAO,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK"}

package/build-types/hooks/use-resize-observer/_legacy/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ReactElement } from 'react';
+export type ObservedSize = {
+    width: number | null;
+    height: number | null;
+};
+/**
+ * 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
+ *
+ * ```js
+ * const App = () => {
+ * 	const [ resizeListener, sizes ] = useResizeObserver();
+ *
+ * 	return (
+ * 		<div>
+ * 			{ resizeListener }
+ * 			Your content here
+ * 		</div>
+ * 	);
+ * };
+ * ```
+ */
+export default function useLegacyResizeObserver(): [
+    ReactElement,
+    ObservedSize
+];
+//# sourceMappingURL=index.d.ts.map

package/build-types/hooks/use-resize-observer/_legacy/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-resize-observer/_legacy/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAW1C,MAAM,MAAM,YAAY,GAAG;IAC1B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAwFF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,UAAU,uBAAuB,IAAI;IAClD,YAAY;IACZ,YAAY;CACZ,CAeA"}

package/build-types/hooks/use-resize-observer/index.d.ts

@@ -1,15 +1,49 @@
+import type { ObservedSize } from './_legacy';
 /**
  * External dependencies
  */
 import type { ReactElement } from 'react';
-declare global {
-    interface ResizeObserverEntry {
-        readonly devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>;
-    }
-}
 /**
- * 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.
+ * Sets up a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)
+ * for an HTML or SVG element.
+ *
+ * Pass the returned setter as a callback ref to the React element you want
+ * to observe, or use it in layout effects for advanced use cases.
+ *
+ * @example
+ *
+ * ```tsx
+ * const setElement = useResizeObserver(
+ * 	( resizeObserverEntries ) => console.log( resizeObserverEntries ),
+ * 	{ box: 'border-box' }
+ * );
+ * <div ref={ setElement } />;
+ *
+ * // The setter can be used in other ways, for example:
+ * useLayoutEffect( () => {
+ * 	setElement( document.querySelector( `data-element-id="${ elementId }"` ) );
+ * }, [ elementId ] );
+ * ```
+ *
+ * @param callback The `ResizeObserver` callback - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback).
+ * @param options  Options passed to `ResizeObserver.observe` when called - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#options). Changes will be ignored.
+ */
+export default function useResizeObserver<T extends Element>(
+/**
+ * The `ResizeObserver` callback - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback).
+ */
+callback: ResizeObserverCallback, 
+/**
+ * Options passed to `ResizeObserver.observe` when called - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#options). Changes will be ignored.
+ */
+options?: ResizeObserverOptions): (element?: T | null) => void;
+/**
+ * **This is a legacy API and should not be used.**
+ *
+ * @deprecated Use the other `useResizeObserver` API instead: `const ref = useResizeObserver( ( entries ) => { ... } )`.
+ *
+ * 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
  *
@@ -26,11 +60,5 @@ declare global {
  * };
  * ```
  */
-export default function useResizeAware(): [
-    ReactElement,
-    {
-        width: number | null;
-        height: number | null;
-    }
-];
+export default function useResizeObserver(): [ReactElement, ObservedSize];
 //# sourceMappingURL=index.d.ts.map

package/build-types/hooks/use-resize-observer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-resize-observer/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAA0B,MAAM,OAAO,CAAC;AAwGlE,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,mBAAmB;QAC5B,QAAQ,CAAC,yBAAyB,EAAE,aAAa,CAAE,kBAAkB,CAAE,CAAC;KACxE;CACD;AA6MD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,IAAI;IACzC,YAAY;IACZ;QAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE;CAC/C,CAuBA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-resize-observer/index.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAqC1C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAE,CAAC,SAAS,OAAO;AAC3D;;GAEG;AACH,QAAQ,EAAE,sBAAsB;AAChC;;GAEG;AACH,OAAO,CAAC,EAAE,qBAAqB,GAC7B,CAAE,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,KAAM,IAAI,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,IAAI,CAAE,YAAY,EAAE,YAAY,CAAE,CAAC"}

package/build-types/index.d.ts

@@ -15,6 +15,7 @@ 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 useDisabled } from "./hooks/use-disabled";
+export { default as useEvent } from "./hooks/use-event";
 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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "7.6.0",
+	"version": "7.8.1-next.5368f64a9.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,13 +32,13 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^4.6.0",
-		"@wordpress/dom": "^4.6.0",
-		"@wordpress/element": "^6.6.0",
-		"@wordpress/is-shallow-equal": "^5.6.0",
-		"@wordpress/keycodes": "^4.6.0",
-		"@wordpress/priority-queue": "^3.6.0",
-		"@wordpress/undo-manager": "^1.6.0",
+		"@wordpress/deprecated": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/dom": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/element": "^6.7.1-next.5368f64a9.0",
+		"@wordpress/is-shallow-equal": "^5.7.1-next.5368f64a9.0",
+		"@wordpress/keycodes": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/priority-queue": "^3.7.1-next.5368f64a9.0",
+		"@wordpress/undo-manager": "^1.7.1-next.5368f64a9.0",
 		"change-case": "^4.1.2",
 		"clipboard": "^2.0.11",
 		"mousetrap": "^1.6.5",
@@ -50,5 +50,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ab9564947967bb3f00343130954b9efacba6cdd7"
+	"gitHead": "24934a1f5251bbee15045d1fd953d9c5650317cd"
 }

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-drop-zone/index.js

@@ -86,6 +86,7 @@ export default function useDropZone( {
 			 */
 			function isElementInZone( targetToCheck ) {
 				const { defaultView } = ownerDocument;
+
 				if (
 					! targetToCheck ||
 					! defaultView ||
@@ -165,6 +166,7 @@ export default function useDropZone( {
 				// zone.
 				// Note: This is not entirely reliable in Safari due to this bug
 				// https://bugs.webkit.org/show_bug.cgi?id=66547
+
 				if ( isElementInZone( event.relatedTarget ) ) {
 					return;
 				}

package/src/hooks/use-event/index.ts

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useInsertionEffect, useCallback } from '@wordpress/element';
+
+/**
+ * Any function.
+ */
+export type AnyFunction = ( ...args: any ) => any;
+
+/**
+ * Creates a stable callback function that has access to the latest state and
+ * can be used within event handlers and effect callbacks. Throws when used in
+ * the render phase.
+ *
+ * @param callback The callback function to wrap.
+ *
+ * @example
+ *
+ * ```tsx
+ * function Component( props ) {
+ *   const onClick = useEvent( props.onClick );
+ *   useEffect( () => {
+ *     onClick();
+ *     // Won't trigger the effect again when props.onClick is updated.
+ *   }, [ onClick ] );
+ *   // Won't re-render Button when props.onClick is updated (if `Button` is
+ *   // wrapped in `React.memo`).
+ *   return <Button onClick={ onClick } />;
+ * }
+ * ```
+ */
+export default function useEvent< T extends AnyFunction >(
+	/**
+	 * The callback function to wrap.
+	 */
+	callback?: T
+) {
+	const ref = useRef< AnyFunction | undefined >( () => {
+		throw new Error(
+			'Callbacks created with `useEvent` cannot be called during rendering.'
+		);
+	} );
+	useInsertionEffect( () => {
+		ref.current = callback;
+	} );
+	return useCallback< AnyFunction >(
+		( ...args ) => ref.current?.( ...args ),
+		[]
+	) as T;
+}

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;
@@ -64,23 +64,21 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
 			return;
 		}
 
-		if ( focusOnMountRef.current === 'firstElement' ) {
-			timerId.current = setTimeout( () => {
-				const firstTabbable = focus.tabbable.find( node )[ 0 ];
-
-				if ( firstTabbable ) {
-					setFocus( firstTabbable );
-				}
-			}, 0 );
-
+		if ( focusOnMountRef.current !== 'firstElement' ) {
+			setFocus( node );
 			return;
 		}
 
-		setFocus( node );
+		timerIdRef.current = setTimeout( () => {
+			const firstTabbable = focus.tabbable.find( node )[ 0 ];
+			if ( firstTabbable ) {
+				setFocus( firstTabbable );
+			}
+		}, 0 );
 
 		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 );
 }