@wordpress/compose 8.3.0 → 8.4.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## Unreleased
 
+## 8.4.0 (2026-07-14)
+
+### Enhancements
+
+-   Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)).
+
+### Bug Fixes
+
+-   `useMergeRefs`: Apply ref changes when the element attached outside a render of the calling component (e.g. a merged ref passed to a child that mounts the element in its own commit); previously the first ref change after such an attachment was skipped, leaving stale callbacks on the element ([#80133](https://github.com/WordPress/gutenberg/pull/80133)).
+
 ## 8.3.0 (2026-07-01)
 
 ## 8.2.0 (2026-06-24)

package/build/hooks/use-merge-refs/index.cjs

@@ -44,40 +44,34 @@ function detachRef(ref, index, cleanups) {
 }
 function useMergeRefs(refs) {
   const elementRef = (0, import_element.useRef)(null);
-  const isAttachedRef = (0, import_element.useRef)(false);
-  const didElementChangeRef = (0, import_element.useRef)(false);
-  const previousRefsRef = (0, import_element.useRef)([]);
+  const attachedRefsRef = (0, import_element.useRef)([]);
   const currentRefsRef = (0, import_element.useRef)(refs);
   const cleanupsRef = (0, import_element.useRef)([]);
   currentRefsRef.current = refs;
   (0, import_element.useLayoutEffect)(() => {
-    if (didElementChangeRef.current === false && isAttachedRef.current === true) {
-      refs.forEach((ref, index) => {
-        const previousRef = previousRefsRef.current[index];
-        if (ref !== previousRef) {
-          detachRef(previousRef, index, cleanupsRef.current);
-          cleanupsRef.current[index] = assignRef(
-            ref,
-            elementRef.current
-          );
-        }
-      });
+    const element = elementRef.current;
+    if (element === null) {
+      return;
     }
-    previousRefsRef.current = refs;
+    refs.forEach((ref, index) => {
+      const attachedRef = attachedRefsRef.current[index];
+      if (ref !== attachedRef) {
+        detachRef(attachedRef, index, cleanupsRef.current);
+        cleanupsRef.current[index] = assignRef(ref, element);
+      }
+    });
+    attachedRefsRef.current = refs;
   }, refs);
-  (0, import_element.useLayoutEffect)(() => {
-    didElementChangeRef.current = false;
-  });
   return (0, import_element.useCallback)((value) => {
     elementRef.current = value;
-    didElementChangeRef.current = true;
-    isAttachedRef.current = value !== null;
     if (value === null) {
-      previousRefsRef.current.forEach((ref, index) => {
+      attachedRefsRef.current.forEach((ref, index) => {
         detachRef(ref, index, cleanupsRef.current);
       });
+      attachedRefsRef.current = [];
     } else {
-      currentRefsRef.current.forEach((ref, index) => {
+      attachedRefsRef.current = currentRefsRef.current;
+      attachedRefsRef.current.forEach((ref, index) => {
         cleanupsRef.current[index] = assignRef(ref, value);
       });
     }

package/build/hooks/use-merge-refs/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/use-merge-refs/index.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useLayoutEffect } from '@wordpress/element';\nimport type { MutableRefObject, Ref, RefCallback } from 'react';\n\n// Returns a cleanup function if the ref callback returned one (React 19 ref\n// callback cleanup pattern), otherwise `undefined`. Object refs never have a\n// cleanup and only set `.current`.\nfunction assignRef< T >( ref: Ref< T >, value: T ): ( () => void ) | undefined {\n\tif ( typeof ref === 'function' ) {\n\t\tconst returned = ref( value );\n\t\treturn typeof returned === 'function' ? returned : undefined;\n\t} else if ( ref && ref.hasOwnProperty( 'current' ) ) {\n\t\t( ref as MutableRefObject< T > ).current = value;\n\t}\n\treturn undefined;\n}\n\n// Tear down a ref at the given index: prefer the stored cleanup; otherwise\n// fall back to calling the ref with `null`.\nfunction detachRef< T >(\n\tref: Ref< T >,\n\tindex: number,\n\tcleanups: Array< ( () => void ) | undefined >\n): void {\n\tconst cleanup = cleanups[ index ];\n\tif ( cleanup ) {\n\t\tcleanups[ index ] = undefined;\n\t\tcleanup();\n\t} else {\n\t\tassignRef( ref, null );\n\t}\n}\n\n/**\n * Merges refs into one ref callback.\n *\n * It also ensures that the merged ref callbacks are only called when they\n * change (as a result of a `useCallback` dependency update) OR when the ref\n * value changes, just as React does when passing a single ref callback to the\n * component.\n *\n * As expected, if you pass a new function on every render, the ref callback\n * will be called after every render.\n *\n * If you don't wish a ref callback to be called after every render, wrap it\n * with `useCallback( callback, dependencies )`. When a dependency changes, the\n * old ref callback will be called with `null` and the new ref callback will be\n * called with the same value.\n *\n * Inner ref callbacks may return a cleanup function (React 19's ref callback\n * cleanup pattern). When a ref callback returns a function, that function is\n * invoked at teardown (node change, dependency change, or unmount) **instead\n * of** the callback being called with `null`. Callbacks that do not return a\n * cleanup continue to receive `null` on teardown as before.\n *\n * It's also possible to _disable_ a ref (and its behaviour) by simply not\n * passing the ref.\n *\n * ```jsx\n * const ref = useCallback( ( node ) => {\n *   node.addEventListener( ... );\n *   return () => {\n *     node.removeEventListener( ... );\n *   };\n * }, [ ...dependencies ] );\n * const otherRef = useRef();\n * const mergedRefs = useMergeRefs( [\n *   enabled && ref,\n *   otherRef,\n * ] );\n * return <div ref={ mergedRefs } />;\n * ```\n *\n * @param refs The refs to be merged.\n * @return The merged ref callback.\n */\nexport default function useMergeRefs< T >(\n\trefs: Ref< T >[]\n): RefCallback< T > {\n\tconst elementRef = useRef< T | null >( null );\n\tconst isAttachedRef = useRef( false );\n\tconst didElementChangeRef = useRef( false );\n\tconst previousRefsRef = useRef< Ref< T >[] >( [] );\n\tconst currentRefsRef = useRef( refs );\n\t// Position-indexed cleanups returned by inner ref callbacks. A slot is\n\t// `undefined` when the ref at that position did not return a cleanup (or\n\t// is an object ref / disabled).\n\tconst cleanupsRef = useRef< Array< ( () => void ) | undefined > >( [] );\n\n\t// Update on render before the ref callback is called, so the ref callback\n\t// always has access to the current refs.\n\tcurrentRefsRef.current = refs;\n\n\t// If any of the refs change, call the previous ref with `null` and the new\n\t// ref with the node, except when the element changes in the same cycle, in\n\t// which case the ref callbacks will already have been called.\n\tuseLayoutEffect( () => {\n\t\tif (\n\t\t\tdidElementChangeRef.current === false &&\n\t\t\tisAttachedRef.current === true\n\t\t) {\n\t\t\trefs.forEach( ( ref, index ) => {\n\t\t\t\tconst previousRef = previousRefsRef.current[ index ];\n\t\t\t\tif ( ref !== previousRef ) {\n\t\t\t\t\tdetachRef( previousRef, index, cleanupsRef.current );\n\t\t\t\t\tcleanupsRef.current[ index ] = assignRef(\n\t\t\t\t\t\tref,\n\t\t\t\t\t\telementRef.current as T\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\tpreviousRefsRef.current = refs;\n\t}, refs );\n\n\t// No dependencies, must be reset after every render so ref callbacks are\n\t// correctly called after a ref change.\n\tuseLayoutEffect( () => {\n\t\tdidElementChangeRef.current = false;\n\t} );\n\n\t// There should be no dependencies so that `callback` is only called when\n\t// the node changes.\n\treturn useCallback( ( value: T | null ) => {\n\t\t// Update the element so it can be used when calling ref callbacks on a\n\t\t// dependency change.\n\t\telementRef.current = value;\n\n\t\tdidElementChangeRef.current = true;\n\t\tisAttachedRef.current = value !== null;\n\n\t\t// When an element changes, the current ref callback should be called\n\t\t// with the new element and the previous one with `null`.\n\t\tif ( value === null ) {\n\t\t\tpreviousRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tdetachRef( ref, index, cleanupsRef.current );\n\t\t\t} );\n\t\t} else {\n\t\t\tcurrentRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tcleanupsRef.current[ index ] = assignRef( ref, value );\n\t\t\t} );\n\t\t}\n\t}, [] );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAqD;AAMrD,SAAS,UAAgB,KAAe,OAAuC;AAC9E,MAAK,OAAO,QAAQ,YAAa;AAChC,UAAM,WAAW,IAAK,KAAM;AAC5B,WAAO,OAAO,aAAa,aAAa,WAAW;AAAA,EACpD,WAAY,OAAO,IAAI,eAAgB,SAAU,GAAI;AACpD,IAAE,IAA+B,UAAU;AAAA,EAC5C;AACA,SAAO;AACR;AAIA,SAAS,UACR,KACA,OACA,UACO;AACP,QAAM,UAAU,SAAU,KAAM;AAChC,MAAK,SAAU;AACd,aAAU,KAAM,IAAI;AACpB,YAAQ;AAAA,EACT,OAAO;AACN,cAAW,KAAK,IAAK;AAAA,EACtB;AACD;AA6Ce,SAAR,aACN,MACmB;AACnB,QAAM,iBAAa,uBAAoB,IAAK;AAC5C,QAAM,oBAAgB,uBAAQ,KAAM;AACpC,QAAM,0BAAsB,uBAAQ,KAAM;AAC1C,QAAM,sBAAkB,uBAAsB,CAAC,CAAE;AACjD,QAAM,qBAAiB,uBAAQ,IAAK;AAIpC,QAAM,kBAAc,uBAA+C,CAAC,CAAE;AAItE,iBAAe,UAAU;AAKzB,sCAAiB,MAAM;AACtB,QACC,oBAAoB,YAAY,SAChC,cAAc,YAAY,MACzB;AACD,WAAK,QAAS,CAAE,KAAK,UAAW;AAC/B,cAAM,cAAc,gBAAgB,QAAS,KAAM;AACnD,YAAK,QAAQ,aAAc;AAC1B,oBAAW,aAAa,OAAO,YAAY,OAAQ;AACnD,sBAAY,QAAS,KAAM,IAAI;AAAA,YAC9B;AAAA,YACA,WAAW;AAAA,UACZ;AAAA,QACD;AAAA,MACD,CAAE;AAAA,IACH;AAEA,oBAAgB,UAAU;AAAA,EAC3B,GAAG,IAAK;AAIR,sCAAiB,MAAM;AACtB,wBAAoB,UAAU;AAAA,EAC/B,CAAE;AAIF,aAAO,4BAAa,CAAE,UAAqB;AAG1C,eAAW,UAAU;AAErB,wBAAoB,UAAU;AAC9B,kBAAc,UAAU,UAAU;AAIlC,QAAK,UAAU,MAAO;AACrB,sBAAgB,QAAQ,QAAS,CAAE,KAAK,UAAW;AAClD,kBAAW,KAAK,OAAO,YAAY,OAAQ;AAAA,MAC5C,CAAE;AAAA,IACH,OAAO;AACN,qBAAe,QAAQ,QAAS,CAAE,KAAK,UAAW;AACjD,oBAAY,QAAS,KAAM,IAAI,UAAW,KAAK,KAAM;AAAA,MACtD,CAAE;AAAA,IACH;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useLayoutEffect } from '@wordpress/element';\nimport type { MutableRefObject, Ref, RefCallback } from 'react';\n\n// Returns a cleanup function if the ref callback returned one (React 19 ref\n// callback cleanup pattern), otherwise `undefined`. Object refs never have a\n// cleanup and only set `.current`.\nfunction assignRef< T >( ref: Ref< T >, value: T ): ( () => void ) | undefined {\n\tif ( typeof ref === 'function' ) {\n\t\tconst returned = ref( value );\n\t\treturn typeof returned === 'function' ? returned : undefined;\n\t} else if ( ref && ref.hasOwnProperty( 'current' ) ) {\n\t\t( ref as MutableRefObject< T > ).current = value;\n\t}\n\treturn undefined;\n}\n\n// Tear down a ref at the given index: prefer the stored cleanup; otherwise\n// fall back to calling the ref with `null`.\nfunction detachRef< T >(\n\tref: Ref< T >,\n\tindex: number,\n\tcleanups: Array< ( () => void ) | undefined >\n): void {\n\tconst cleanup = cleanups[ index ];\n\tif ( cleanup ) {\n\t\tcleanups[ index ] = undefined;\n\t\tcleanup();\n\t} else {\n\t\tassignRef( ref, null );\n\t}\n}\n\n/**\n * Merges refs into one ref callback.\n *\n * It also ensures that the merged ref callbacks are only called when they\n * change (as a result of a `useCallback` dependency update) OR when the ref\n * value changes, just as React does when passing a single ref callback to the\n * component.\n *\n * As expected, if you pass a new function on every render, the ref callback\n * will be called after every render.\n *\n * If you don't wish a ref callback to be called after every render, wrap it\n * with `useCallback( callback, dependencies )`. When a dependency changes, the\n * old ref callback will be called with `null` and the new ref callback will be\n * called with the same value.\n *\n * Inner ref callbacks may return a cleanup function (React 19's ref callback\n * cleanup pattern). When a ref callback returns a function, that function is\n * invoked at teardown (node change, dependency change, or unmount) **instead\n * of** the callback being called with `null`. Callbacks that do not return a\n * cleanup continue to receive `null` on teardown as before.\n *\n * It's also possible to _disable_ a ref (and its behaviour) by simply not\n * passing the ref.\n *\n * ```jsx\n * const ref = useCallback( ( node ) => {\n *   node.addEventListener( ... );\n *   return () => {\n *     node.removeEventListener( ... );\n *   };\n * }, [ ...dependencies ] );\n * const otherRef = useRef();\n * const mergedRefs = useMergeRefs( [\n *   enabled && ref,\n *   otherRef,\n * ] );\n * return <div ref={ mergedRefs } />;\n * ```\n *\n * @param refs The refs to be merged.\n * @return The merged ref callback.\n */\nexport default function useMergeRefs< T >(\n\trefs: Ref< T >[]\n): RefCallback< T > {\n\tconst elementRef = useRef< T | null >( null );\n\t// The refs that are attached to the element: set when the element\n\t// attaches, and kept in sync when a changed ref is swapped on render.\n\tconst attachedRefsRef = useRef< Ref< T >[] >( [] );\n\tconst currentRefsRef = useRef( refs );\n\t// Position-indexed cleanups returned by inner ref callbacks. A slot is\n\t// `undefined` when the ref at that position did not return a cleanup (or\n\t// is an object ref / disabled).\n\tconst cleanupsRef = useRef< Array< ( () => void ) | undefined > >( [] );\n\n\t// Update on render before the ref callback is called, so the ref callback\n\t// always has access to the current refs.\n\tcurrentRefsRef.current = refs;\n\n\t// If any of the refs change, call the attached ref with `null` and the\n\t// new ref with the node. Comparing against the refs that are attached to\n\t// the element, rather than the previous render's refs, also covers an\n\t// element that attaches outside a render of this component (a merged ref\n\t// passed to a child that mounts the element in its own commit): the\n\t// change is still detected on the next render. When the element attached\n\t// during this commit, the ref callback has already been called with the\n\t// current refs, which compare equal here.\n\tuseLayoutEffect( () => {\n\t\tconst element = elementRef.current;\n\n\t\tif ( element === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\trefs.forEach( ( ref, index ) => {\n\t\t\tconst attachedRef = attachedRefsRef.current[ index ];\n\t\t\tif ( ref !== attachedRef ) {\n\t\t\t\tdetachRef( attachedRef, index, cleanupsRef.current );\n\t\t\t\tcleanupsRef.current[ index ] = assignRef( ref, element );\n\t\t\t}\n\t\t} );\n\n\t\tattachedRefsRef.current = refs;\n\t}, refs );\n\n\t// There should be no dependencies so that `callback` is only called when\n\t// the node changes.\n\treturn useCallback( ( value: T | null ) => {\n\t\t// Update the element so it can be used when calling ref callbacks on a\n\t\t// dependency change.\n\t\telementRef.current = value;\n\n\t\t// When an element changes, the current ref callback should be called\n\t\t// with the new element and the attached one with `null`.\n\t\tif ( value === null ) {\n\t\t\tattachedRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tdetachRef( ref, index, cleanupsRef.current );\n\t\t\t} );\n\t\t\tattachedRefsRef.current = [];\n\t\t} else {\n\t\t\tattachedRefsRef.current = currentRefsRef.current;\n\t\t\tattachedRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tcleanupsRef.current[ index ] = assignRef( ref, value );\n\t\t\t} );\n\t\t}\n\t}, [] );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAqD;AAMrD,SAAS,UAAgB,KAAe,OAAuC;AAC9E,MAAK,OAAO,QAAQ,YAAa;AAChC,UAAM,WAAW,IAAK,KAAM;AAC5B,WAAO,OAAO,aAAa,aAAa,WAAW;AAAA,EACpD,WAAY,OAAO,IAAI,eAAgB,SAAU,GAAI;AACpD,IAAE,IAA+B,UAAU;AAAA,EAC5C;AACA,SAAO;AACR;AAIA,SAAS,UACR,KACA,OACA,UACO;AACP,QAAM,UAAU,SAAU,KAAM;AAChC,MAAK,SAAU;AACd,aAAU,KAAM,IAAI;AACpB,YAAQ;AAAA,EACT,OAAO;AACN,cAAW,KAAK,IAAK;AAAA,EACtB;AACD;AA6Ce,SAAR,aACN,MACmB;AACnB,QAAM,iBAAa,uBAAoB,IAAK;AAG5C,QAAM,sBAAkB,uBAAsB,CAAC,CAAE;AACjD,QAAM,qBAAiB,uBAAQ,IAAK;AAIpC,QAAM,kBAAc,uBAA+C,CAAC,CAAE;AAItE,iBAAe,UAAU;AAUzB,sCAAiB,MAAM;AACtB,UAAM,UAAU,WAAW;AAE3B,QAAK,YAAY,MAAO;AACvB;AAAA,IACD;AAEA,SAAK,QAAS,CAAE,KAAK,UAAW;AAC/B,YAAM,cAAc,gBAAgB,QAAS,KAAM;AACnD,UAAK,QAAQ,aAAc;AAC1B,kBAAW,aAAa,OAAO,YAAY,OAAQ;AACnD,oBAAY,QAAS,KAAM,IAAI,UAAW,KAAK,OAAQ;AAAA,MACxD;AAAA,IACD,CAAE;AAEF,oBAAgB,UAAU;AAAA,EAC3B,GAAG,IAAK;AAIR,aAAO,4BAAa,CAAE,UAAqB;AAG1C,eAAW,UAAU;AAIrB,QAAK,UAAU,MAAO;AACrB,sBAAgB,QAAQ,QAAS,CAAE,KAAK,UAAW;AAClD,kBAAW,KAAK,OAAO,YAAY,OAAQ;AAAA,MAC5C,CAAE;AACF,sBAAgB,UAAU,CAAC;AAAA,IAC5B,OAAO;AACN,sBAAgB,UAAU,eAAe;AACzC,sBAAgB,QAAQ,QAAS,CAAE,KAAK,UAAW;AAClD,oBAAY,QAAS,KAAM,IAAI,UAAW,KAAK,KAAM;AAAA,MACtD,CAAE;AAAA,IACH;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
   "names": []
 }

package/build-module/hooks/use-merge-refs/index.mjs

@@ -20,40 +20,34 @@ function detachRef(ref, index, cleanups) {
 }
 function useMergeRefs(refs) {
   const elementRef = useRef(null);
-  const isAttachedRef = useRef(false);
-  const didElementChangeRef = useRef(false);
-  const previousRefsRef = useRef([]);
+  const attachedRefsRef = useRef([]);
   const currentRefsRef = useRef(refs);
   const cleanupsRef = useRef([]);
   currentRefsRef.current = refs;
   useLayoutEffect(() => {
-    if (didElementChangeRef.current === false && isAttachedRef.current === true) {
-      refs.forEach((ref, index) => {
-        const previousRef = previousRefsRef.current[index];
-        if (ref !== previousRef) {
-          detachRef(previousRef, index, cleanupsRef.current);
-          cleanupsRef.current[index] = assignRef(
-            ref,
-            elementRef.current
-          );
-        }
-      });
+    const element = elementRef.current;
+    if (element === null) {
+      return;
     }
-    previousRefsRef.current = refs;
+    refs.forEach((ref, index) => {
+      const attachedRef = attachedRefsRef.current[index];
+      if (ref !== attachedRef) {
+        detachRef(attachedRef, index, cleanupsRef.current);
+        cleanupsRef.current[index] = assignRef(ref, element);
+      }
+    });
+    attachedRefsRef.current = refs;
   }, refs);
-  useLayoutEffect(() => {
-    didElementChangeRef.current = false;
-  });
   return useCallback((value) => {
     elementRef.current = value;
-    didElementChangeRef.current = true;
-    isAttachedRef.current = value !== null;
     if (value === null) {
-      previousRefsRef.current.forEach((ref, index) => {
+      attachedRefsRef.current.forEach((ref, index) => {
         detachRef(ref, index, cleanupsRef.current);
       });
+      attachedRefsRef.current = [];
     } else {
-      currentRefsRef.current.forEach((ref, index) => {
+      attachedRefsRef.current = currentRefsRef.current;
+      attachedRefsRef.current.forEach((ref, index) => {
         cleanupsRef.current[index] = assignRef(ref, value);
       });
     }

package/build-module/hooks/use-merge-refs/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/use-merge-refs/index.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useLayoutEffect } from '@wordpress/element';\nimport type { MutableRefObject, Ref, RefCallback } from 'react';\n\n// Returns a cleanup function if the ref callback returned one (React 19 ref\n// callback cleanup pattern), otherwise `undefined`. Object refs never have a\n// cleanup and only set `.current`.\nfunction assignRef< T >( ref: Ref< T >, value: T ): ( () => void ) | undefined {\n\tif ( typeof ref === 'function' ) {\n\t\tconst returned = ref( value );\n\t\treturn typeof returned === 'function' ? returned : undefined;\n\t} else if ( ref && ref.hasOwnProperty( 'current' ) ) {\n\t\t( ref as MutableRefObject< T > ).current = value;\n\t}\n\treturn undefined;\n}\n\n// Tear down a ref at the given index: prefer the stored cleanup; otherwise\n// fall back to calling the ref with `null`.\nfunction detachRef< T >(\n\tref: Ref< T >,\n\tindex: number,\n\tcleanups: Array< ( () => void ) | undefined >\n): void {\n\tconst cleanup = cleanups[ index ];\n\tif ( cleanup ) {\n\t\tcleanups[ index ] = undefined;\n\t\tcleanup();\n\t} else {\n\t\tassignRef( ref, null );\n\t}\n}\n\n/**\n * Merges refs into one ref callback.\n *\n * It also ensures that the merged ref callbacks are only called when they\n * change (as a result of a `useCallback` dependency update) OR when the ref\n * value changes, just as React does when passing a single ref callback to the\n * component.\n *\n * As expected, if you pass a new function on every render, the ref callback\n * will be called after every render.\n *\n * If you don't wish a ref callback to be called after every render, wrap it\n * with `useCallback( callback, dependencies )`. When a dependency changes, the\n * old ref callback will be called with `null` and the new ref callback will be\n * called with the same value.\n *\n * Inner ref callbacks may return a cleanup function (React 19's ref callback\n * cleanup pattern). When a ref callback returns a function, that function is\n * invoked at teardown (node change, dependency change, or unmount) **instead\n * of** the callback being called with `null`. Callbacks that do not return a\n * cleanup continue to receive `null` on teardown as before.\n *\n * It's also possible to _disable_ a ref (and its behaviour) by simply not\n * passing the ref.\n *\n * ```jsx\n * const ref = useCallback( ( node ) => {\n *   node.addEventListener( ... );\n *   return () => {\n *     node.removeEventListener( ... );\n *   };\n * }, [ ...dependencies ] );\n * const otherRef = useRef();\n * const mergedRefs = useMergeRefs( [\n *   enabled && ref,\n *   otherRef,\n * ] );\n * return <div ref={ mergedRefs } />;\n * ```\n *\n * @param refs The refs to be merged.\n * @return The merged ref callback.\n */\nexport default function useMergeRefs< T >(\n\trefs: Ref< T >[]\n): RefCallback< T > {\n\tconst elementRef = useRef< T | null >( null );\n\tconst isAttachedRef = useRef( false );\n\tconst didElementChangeRef = useRef( false );\n\tconst previousRefsRef = useRef< Ref< T >[] >( [] );\n\tconst currentRefsRef = useRef( refs );\n\t// Position-indexed cleanups returned by inner ref callbacks. A slot is\n\t// `undefined` when the ref at that position did not return a cleanup (or\n\t// is an object ref / disabled).\n\tconst cleanupsRef = useRef< Array< ( () => void ) | undefined > >( [] );\n\n\t// Update on render before the ref callback is called, so the ref callback\n\t// always has access to the current refs.\n\tcurrentRefsRef.current = refs;\n\n\t// If any of the refs change, call the previous ref with `null` and the new\n\t// ref with the node, except when the element changes in the same cycle, in\n\t// which case the ref callbacks will already have been called.\n\tuseLayoutEffect( () => {\n\t\tif (\n\t\t\tdidElementChangeRef.current === false &&\n\t\t\tisAttachedRef.current === true\n\t\t) {\n\t\t\trefs.forEach( ( ref, index ) => {\n\t\t\t\tconst previousRef = previousRefsRef.current[ index ];\n\t\t\t\tif ( ref !== previousRef ) {\n\t\t\t\t\tdetachRef( previousRef, index, cleanupsRef.current );\n\t\t\t\t\tcleanupsRef.current[ index ] = assignRef(\n\t\t\t\t\t\tref,\n\t\t\t\t\t\telementRef.current as T\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\tpreviousRefsRef.current = refs;\n\t}, refs );\n\n\t// No dependencies, must be reset after every render so ref callbacks are\n\t// correctly called after a ref change.\n\tuseLayoutEffect( () => {\n\t\tdidElementChangeRef.current = false;\n\t} );\n\n\t// There should be no dependencies so that `callback` is only called when\n\t// the node changes.\n\treturn useCallback( ( value: T | null ) => {\n\t\t// Update the element so it can be used when calling ref callbacks on a\n\t\t// dependency change.\n\t\telementRef.current = value;\n\n\t\tdidElementChangeRef.current = true;\n\t\tisAttachedRef.current = value !== null;\n\n\t\t// When an element changes, the current ref callback should be called\n\t\t// with the new element and the previous one with `null`.\n\t\tif ( value === null ) {\n\t\t\tpreviousRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tdetachRef( ref, index, cleanupsRef.current );\n\t\t\t} );\n\t\t} else {\n\t\t\tcurrentRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tcleanupsRef.current[ index ] = assignRef( ref, value );\n\t\t\t} );\n\t\t}\n\t}, [] );\n}\n"],
-  "mappings": ";AAGA,SAAS,QAAQ,aAAa,uBAAuB;AAMrD,SAAS,UAAgB,KAAe,OAAuC;AAC9E,MAAK,OAAO,QAAQ,YAAa;AAChC,UAAM,WAAW,IAAK,KAAM;AAC5B,WAAO,OAAO,aAAa,aAAa,WAAW;AAAA,EACpD,WAAY,OAAO,IAAI,eAAgB,SAAU,GAAI;AACpD,IAAE,IAA+B,UAAU;AAAA,EAC5C;AACA,SAAO;AACR;AAIA,SAAS,UACR,KACA,OACA,UACO;AACP,QAAM,UAAU,SAAU,KAAM;AAChC,MAAK,SAAU;AACd,aAAU,KAAM,IAAI;AACpB,YAAQ;AAAA,EACT,OAAO;AACN,cAAW,KAAK,IAAK;AAAA,EACtB;AACD;AA6Ce,SAAR,aACN,MACmB;AACnB,QAAM,aAAa,OAAoB,IAAK;AAC5C,QAAM,gBAAgB,OAAQ,KAAM;AACpC,QAAM,sBAAsB,OAAQ,KAAM;AAC1C,QAAM,kBAAkB,OAAsB,CAAC,CAAE;AACjD,QAAM,iBAAiB,OAAQ,IAAK;AAIpC,QAAM,cAAc,OAA+C,CAAC,CAAE;AAItE,iBAAe,UAAU;AAKzB,kBAAiB,MAAM;AACtB,QACC,oBAAoB,YAAY,SAChC,cAAc,YAAY,MACzB;AACD,WAAK,QAAS,CAAE,KAAK,UAAW;AAC/B,cAAM,cAAc,gBAAgB,QAAS,KAAM;AACnD,YAAK,QAAQ,aAAc;AAC1B,oBAAW,aAAa,OAAO,YAAY,OAAQ;AACnD,sBAAY,QAAS,KAAM,IAAI;AAAA,YAC9B;AAAA,YACA,WAAW;AAAA,UACZ;AAAA,QACD;AAAA,MACD,CAAE;AAAA,IACH;AAEA,oBAAgB,UAAU;AAAA,EAC3B,GAAG,IAAK;AAIR,kBAAiB,MAAM;AACtB,wBAAoB,UAAU;AAAA,EAC/B,CAAE;AAIF,SAAO,YAAa,CAAE,UAAqB;AAG1C,eAAW,UAAU;AAErB,wBAAoB,UAAU;AAC9B,kBAAc,UAAU,UAAU;AAIlC,QAAK,UAAU,MAAO;AACrB,sBAAgB,QAAQ,QAAS,CAAE,KAAK,UAAW;AAClD,kBAAW,KAAK,OAAO,YAAY,OAAQ;AAAA,MAC5C,CAAE;AAAA,IACH,OAAO;AACN,qBAAe,QAAQ,QAAS,CAAE,KAAK,UAAW;AACjD,oBAAY,QAAS,KAAM,IAAI,UAAW,KAAK,KAAM;AAAA,MACtD,CAAE;AAAA,IACH;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useLayoutEffect } from '@wordpress/element';\nimport type { MutableRefObject, Ref, RefCallback } from 'react';\n\n// Returns a cleanup function if the ref callback returned one (React 19 ref\n// callback cleanup pattern), otherwise `undefined`. Object refs never have a\n// cleanup and only set `.current`.\nfunction assignRef< T >( ref: Ref< T >, value: T ): ( () => void ) | undefined {\n\tif ( typeof ref === 'function' ) {\n\t\tconst returned = ref( value );\n\t\treturn typeof returned === 'function' ? returned : undefined;\n\t} else if ( ref && ref.hasOwnProperty( 'current' ) ) {\n\t\t( ref as MutableRefObject< T > ).current = value;\n\t}\n\treturn undefined;\n}\n\n// Tear down a ref at the given index: prefer the stored cleanup; otherwise\n// fall back to calling the ref with `null`.\nfunction detachRef< T >(\n\tref: Ref< T >,\n\tindex: number,\n\tcleanups: Array< ( () => void ) | undefined >\n): void {\n\tconst cleanup = cleanups[ index ];\n\tif ( cleanup ) {\n\t\tcleanups[ index ] = undefined;\n\t\tcleanup();\n\t} else {\n\t\tassignRef( ref, null );\n\t}\n}\n\n/**\n * Merges refs into one ref callback.\n *\n * It also ensures that the merged ref callbacks are only called when they\n * change (as a result of a `useCallback` dependency update) OR when the ref\n * value changes, just as React does when passing a single ref callback to the\n * component.\n *\n * As expected, if you pass a new function on every render, the ref callback\n * will be called after every render.\n *\n * If you don't wish a ref callback to be called after every render, wrap it\n * with `useCallback( callback, dependencies )`. When a dependency changes, the\n * old ref callback will be called with `null` and the new ref callback will be\n * called with the same value.\n *\n * Inner ref callbacks may return a cleanup function (React 19's ref callback\n * cleanup pattern). When a ref callback returns a function, that function is\n * invoked at teardown (node change, dependency change, or unmount) **instead\n * of** the callback being called with `null`. Callbacks that do not return a\n * cleanup continue to receive `null` on teardown as before.\n *\n * It's also possible to _disable_ a ref (and its behaviour) by simply not\n * passing the ref.\n *\n * ```jsx\n * const ref = useCallback( ( node ) => {\n *   node.addEventListener( ... );\n *   return () => {\n *     node.removeEventListener( ... );\n *   };\n * }, [ ...dependencies ] );\n * const otherRef = useRef();\n * const mergedRefs = useMergeRefs( [\n *   enabled && ref,\n *   otherRef,\n * ] );\n * return <div ref={ mergedRefs } />;\n * ```\n *\n * @param refs The refs to be merged.\n * @return The merged ref callback.\n */\nexport default function useMergeRefs< T >(\n\trefs: Ref< T >[]\n): RefCallback< T > {\n\tconst elementRef = useRef< T | null >( null );\n\t// The refs that are attached to the element: set when the element\n\t// attaches, and kept in sync when a changed ref is swapped on render.\n\tconst attachedRefsRef = useRef< Ref< T >[] >( [] );\n\tconst currentRefsRef = useRef( refs );\n\t// Position-indexed cleanups returned by inner ref callbacks. A slot is\n\t// `undefined` when the ref at that position did not return a cleanup (or\n\t// is an object ref / disabled).\n\tconst cleanupsRef = useRef< Array< ( () => void ) | undefined > >( [] );\n\n\t// Update on render before the ref callback is called, so the ref callback\n\t// always has access to the current refs.\n\tcurrentRefsRef.current = refs;\n\n\t// If any of the refs change, call the attached ref with `null` and the\n\t// new ref with the node. Comparing against the refs that are attached to\n\t// the element, rather than the previous render's refs, also covers an\n\t// element that attaches outside a render of this component (a merged ref\n\t// passed to a child that mounts the element in its own commit): the\n\t// change is still detected on the next render. When the element attached\n\t// during this commit, the ref callback has already been called with the\n\t// current refs, which compare equal here.\n\tuseLayoutEffect( () => {\n\t\tconst element = elementRef.current;\n\n\t\tif ( element === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\trefs.forEach( ( ref, index ) => {\n\t\t\tconst attachedRef = attachedRefsRef.current[ index ];\n\t\t\tif ( ref !== attachedRef ) {\n\t\t\t\tdetachRef( attachedRef, index, cleanupsRef.current );\n\t\t\t\tcleanupsRef.current[ index ] = assignRef( ref, element );\n\t\t\t}\n\t\t} );\n\n\t\tattachedRefsRef.current = refs;\n\t}, refs );\n\n\t// There should be no dependencies so that `callback` is only called when\n\t// the node changes.\n\treturn useCallback( ( value: T | null ) => {\n\t\t// Update the element so it can be used when calling ref callbacks on a\n\t\t// dependency change.\n\t\telementRef.current = value;\n\n\t\t// When an element changes, the current ref callback should be called\n\t\t// with the new element and the attached one with `null`.\n\t\tif ( value === null ) {\n\t\t\tattachedRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tdetachRef( ref, index, cleanupsRef.current );\n\t\t\t} );\n\t\t\tattachedRefsRef.current = [];\n\t\t} else {\n\t\t\tattachedRefsRef.current = currentRefsRef.current;\n\t\t\tattachedRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tcleanupsRef.current[ index ] = assignRef( ref, value );\n\t\t\t} );\n\t\t}\n\t}, [] );\n}\n"],
+  "mappings": ";AAGA,SAAS,QAAQ,aAAa,uBAAuB;AAMrD,SAAS,UAAgB,KAAe,OAAuC;AAC9E,MAAK,OAAO,QAAQ,YAAa;AAChC,UAAM,WAAW,IAAK,KAAM;AAC5B,WAAO,OAAO,aAAa,aAAa,WAAW;AAAA,EACpD,WAAY,OAAO,IAAI,eAAgB,SAAU,GAAI;AACpD,IAAE,IAA+B,UAAU;AAAA,EAC5C;AACA,SAAO;AACR;AAIA,SAAS,UACR,KACA,OACA,UACO;AACP,QAAM,UAAU,SAAU,KAAM;AAChC,MAAK,SAAU;AACd,aAAU,KAAM,IAAI;AACpB,YAAQ;AAAA,EACT,OAAO;AACN,cAAW,KAAK,IAAK;AAAA,EACtB;AACD;AA6Ce,SAAR,aACN,MACmB;AACnB,QAAM,aAAa,OAAoB,IAAK;AAG5C,QAAM,kBAAkB,OAAsB,CAAC,CAAE;AACjD,QAAM,iBAAiB,OAAQ,IAAK;AAIpC,QAAM,cAAc,OAA+C,CAAC,CAAE;AAItE,iBAAe,UAAU;AAUzB,kBAAiB,MAAM;AACtB,UAAM,UAAU,WAAW;AAE3B,QAAK,YAAY,MAAO;AACvB;AAAA,IACD;AAEA,SAAK,QAAS,CAAE,KAAK,UAAW;AAC/B,YAAM,cAAc,gBAAgB,QAAS,KAAM;AACnD,UAAK,QAAQ,aAAc;AAC1B,kBAAW,aAAa,OAAO,YAAY,OAAQ;AACnD,oBAAY,QAAS,KAAM,IAAI,UAAW,KAAK,OAAQ;AAAA,MACxD;AAAA,IACD,CAAE;AAEF,oBAAgB,UAAU;AAAA,EAC3B,GAAG,IAAK;AAIR,SAAO,YAAa,CAAE,UAAqB;AAG1C,eAAW,UAAU;AAIrB,QAAK,UAAU,MAAO;AACrB,sBAAgB,QAAQ,QAAS,CAAE,KAAK,UAAW;AAClD,kBAAW,KAAK,OAAO,YAAY,OAAQ;AAAA,MAC5C,CAAE;AACF,sBAAgB,UAAU,CAAC;AAAA,IAC5B,OAAO;AACN,sBAAgB,UAAU,eAAe;AACzC,sBAAgB,QAAQ,QAAS,CAAE,KAAK,UAAW;AAClD,oBAAY,QAAS,KAAM,IAAI,UAAW,KAAK,KAAM;AAAA,MACtD,CAAE;AAAA,IACH;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
   "names": []
 }

package/build-types/higher-order/with-global-events/listener.d.ts

@@ -4,6 +4,8 @@
  * removing the handler when no instances are listening for the event.
  */
 declare class Listener {
+    /** @type {any} */
+    listeners: any;
     constructor();
     add(/** @type {any} */ eventType: any, /** @type {any} */ instance: any): void;
     remove(/** @type {any} */ eventType: any, /** @type {any} */ instance: any): void;

package/build-types/higher-order/with-global-events/listener.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listener.d.ts","sourceRoot":"","sources":["../../../src/higher-order/with-global-events/listener.js"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,cAAM,QAAQ;IACb,cAKC;IAED,GAAG,CAAE,kBAAkB,CAAC,SAAS,EAAjB,GAAiB,EAAE,kBAAkB,CAAC,QAAQ,EAAhB,GAAgB,QAQ7D;IAED,MAAM,CAAE,kBAAkB,CAAC,SAAS,EAAjB,GAAiB,EAAE,kBAAkB,CAAC,QAAQ,EAAhB,GAAgB,QAchE;IAED,WAAW,CAAE,kBAAkB,CAAC,KAAK,EAAb,GAAa,QAMpC;CACD;eAEc,QAAQ"}
+{"version":3,"file":"listener.d.ts","sourceRoot":"","sources":["../../../src/higher-order/with-global-events/listener.js"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,cAAM,QAAQ;IAEZ,kBAAkB;IACb,SAAS,EADH,GAAG;IADf,cAKC;IAED,GAAG,CAAE,kBAAkB,CAAC,SAAS,EAAjB,GAAiB,EAAE,kBAAkB,CAAC,QAAQ,EAAhB,GAAgB,QAQ7D;IAED,MAAM,CAAE,kBAAkB,CAAC,SAAS,EAAjB,GAAiB,EAAE,kBAAkB,CAAC,QAAQ,EAAhB,GAAgB,QAchE;IAED,WAAW,CAAE,kBAAkB,CAAC,KAAK,EAAb,GAAa,QAMpC;CACD;eAEc,QAAQ"}

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

@@ -24,7 +24,7 @@
  * };
  * ```
  */
-export default function useDisabled({ isDisabled: isDisabledProp }?: {
+export default function useDisabled({ isDisabled: isDisabledProp, }?: {
     isDisabled?: boolean;
 }): import("react").RefCallback<Node | null>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-disabled/index.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EACpC,UAAU,EAAE,cAAsB,EAClC,GAAE;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;CAChB,4CAmDL"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-disabled/index.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EACpC,UAAU,EAAE,cAAsB,GAClC,GAAE;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;CAChB,4CAmDL"}

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

@@ -8,5 +8,5 @@ import type { DraggingProps, DraggingReturn } from './types';
  * @param props.onDragEnd
  * @return Drag state and handlers
  */
-export default function useDragging({ onDragStart, onDragMove, onDragEnd }: DraggingProps): DraggingReturn;
+export default function useDragging({ onDragStart, onDragMove, onDragEnd, }: DraggingProps): DraggingReturn;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-dragging/index.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE7D;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EACpC,WAAW,EACX,UAAU,EACV,SAAS,EACT,EAAE,aAAa,GAAI,cAAc,CAqDjC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-dragging/index.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE7D;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EACpC,WAAW,EACX,UAAU,EACV,SAAS,GACT,EAAE,aAAa,GAAI,cAAc,CAqDjC"}

package/build-types/hooks/use-drop-zone/index.d.ts

@@ -5,5 +5,5 @@ import type { UseDropZoneProps } from './types';
  * @param {UseDropZoneProps} props Hook options
  * @return Ref callback to be passed to the drop zone element.
  */
-export default function useDropZone({ dropZoneElement, isDisabled, onDrop: _onDrop, onDragStart: _onDragStart, onDragEnter: _onDragEnter, onDragLeave: _onDragLeave, onDragEnd: _onDragEnd, onDragOver: _onDragOver }: UseDropZoneProps): React.RefCallback<HTMLElement>;
+export default function useDropZone({ dropZoneElement, isDisabled, onDrop: _onDrop, onDragStart: _onDragStart, onDragEnter: _onDragEnter, onDragLeave: _onDragLeave, onDragEnd: _onDragEnd, onDragOver: _onDragOver, }: UseDropZoneProps): React.RefCallback<HTMLElement>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-drop-zone/index.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EACpC,eAAe,EACf,UAAU,EACV,MAAM,EAAE,OAAO,EACf,WAAW,EAAE,YAAY,EACzB,WAAW,EAAE,YAAY,EACzB,WAAW,EAAE,YAAY,EACzB,SAAS,EAAE,UAAU,EACrB,UAAU,EAAE,WAAW,EACvB,EAAE,gBAAgB,GAAI,KAAK,CAAC,WAAW,CAAE,WAAW,CAAE,CAmLtD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-drop-zone/index.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EACpC,eAAe,EACf,UAAU,EACV,MAAM,EAAE,OAAO,EACf,WAAW,EAAE,YAAY,EACzB,WAAW,EAAE,YAAY,EACzB,WAAW,EAAE,YAAY,EACzB,SAAS,EAAE,UAAU,EACrB,UAAU,EAAE,WAAW,GACvB,EAAE,gBAAgB,GAAI,KAAK,CAAC,WAAW,CAAE,WAAW,CAAE,CAmLtD"}

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.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,eAAe,CAC9B,YAAY,GAAE,eAAe,CAAC,IAAqB,mDA+DnD;AAED,yBAAiB,eAAe,CAAC,CAAC;IACjC,KAAY,IAAI,GAAG,OAAO,GAAG,cAAc,GAAG,mBAAmB,CAAC;CAClE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-on-mount/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,eAAe,CAC9B,YAAY,GAAE,eAAe,CAAC,IAAqB,mDA+DnD;AAED,yBAAiB,eAAe,CAAC;IAChC,KAAY,IAAI,GAAG,OAAO,GAAG,cAAc,GAAG,mBAAmB,CAAC;CAClE"}

package/build-types/hooks/use-keyboard-shortcut/index.d.ts

@@ -35,6 +35,6 @@ type KeyboardShortcutConfig = {
  * @param options.isDisabled
  * @param options.target
  */
-declare function useKeyboardShortcut(shortcuts: string[] | string, callback: (e: ExtendedKeyboardEvent, combo: string) => void, { bindGlobal, eventName, isDisabled, target }?: Partial<KeyboardShortcutConfig>): void;
+declare function useKeyboardShortcut(shortcuts: string[] | string, callback: (e: ExtendedKeyboardEvent, combo: string) => void, { bindGlobal, eventName, isDisabled, target, }?: Partial<KeyboardShortcutConfig>): void;
 export default useKeyboardShortcut;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-keyboard-shortcut/index.ts"],"names":[],"mappings":"AAIA,OAAO,wDAAwD,CAAC;AAChE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAEvD;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIpD,KAAK,sBAAsB,GAAG;IAC7B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,SAAS,CAAE,WAAW,CAAE,CAAC;CACjC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,iBAAS,mBAAmB,CAC3B,SAAS,EAAE,MAAM,EAAE,GAAG,MAAM,EAC5B,QAAQ,EAAE,CAAE,CAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,KAAM,IAAI,EAC7D,EACC,UAAkB,EAClB,SAAqB,EACrB,UAAkB,EAClB,MAAM,EACN,GAAE,OAAO,CAAE,sBAAsB,CAAO,QA4DzC;eAEc,mBAAmB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-keyboard-shortcut/index.ts"],"names":[],"mappings":"AAIA,OAAO,wDAAwD,CAAC;AAChE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAEvD;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIpD,KAAK,sBAAsB,GAAG;IAC7B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,SAAS,CAAE,WAAW,CAAE,CAAC;CACjC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,iBAAS,mBAAmB,CAC3B,SAAS,EAAE,MAAM,EAAE,GAAG,MAAM,EAC5B,QAAQ,EAAE,CAAE,CAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,KAAM,IAAI,EAC7D,EACC,UAAkB,EAClB,SAAqB,EACrB,UAAkB,EAClB,MAAM,GACN,GAAE,OAAO,CAAE,sBAAsB,CAAO,QA4DzC;eAEc,mBAAmB"}

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;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"}
+{"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,CA8DlB"}

package/build-types/utils/subscribe-delegated-listener/index.d.ts

@@ -1,27 +1,2 @@
-/**
- * Adds a callback to a shared `addEventListener`. Only one underlying
- * native listener is attached per (root, event type, phase); subscribers
- * join an in-JS registry that dispatches events along the DOM ancestry
- * of `event.target`.
- *
- * The model mirrors React's synthetic event system: a single root
- * listener handles every event of a given type, and callbacks bound to
- * an `Element` only fire when that element is on the target's path.
- * Callbacks bound to a `Document` always fire (document is the root of
- * every event in that document); callbacks bound to a `Window` always
- * fire as a flat fan-out, since `window` isn't on the DOM tree.
- *
- * @param target    `Element`, `Document`, or `Window` to bind the
- *                  callback to. For `Element`, the callback only fires
- *                  when the event happens on the element or a
- *                  descendant.
- * @param eventType DOM event name.
- * @param callback  Listener to be invoked with the event.
- * @param capture   Use the capture phase. Required when ancestor
- *                  listeners gate on `event.defaultPrevented`, since a
- *                  bubble-phase root listener fires after them. Defaults
- *                  to `false`.
- * @return Unsubscribe function.
- */
 export default function subscribeDelegatedListener(target: EventTarget, eventType: string, callback: EventListener, capture?: boolean): () => void;
 //# sourceMappingURL=index.d.ts.map

package/build-types/utils/subscribe-delegated-listener/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/subscribe-delegated-listener/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAYH,MAAM,CAAC,OAAO,UAAU,0BAA0B,CACjD,MAAM,EAAE,WAAW,EACnB,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,aAAa,EACvB,OAAO,GAAE,OAAe,GACtB,MAAM,IAAI,CAsFZ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/subscribe-delegated-listener/index.ts"],"names":[],"mappings":"AAoCA,MAAM,CAAC,OAAO,UAAU,0BAA0B,CACjD,MAAM,EAAE,WAAW,EACnB,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,aAAa,EACvB,OAAO,GAAE,OAAe,GACtB,MAAM,IAAI,CAsFZ"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "8.3.0",
+	"version": "8.4.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -46,14 +46,14 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^4.50.0",
-		"@wordpress/dom": "^4.50.0",
-		"@wordpress/element": "^8.2.0",
-		"@wordpress/is-shallow-equal": "^5.50.0",
-		"@wordpress/keycodes": "^4.50.0",
-		"@wordpress/priority-queue": "^3.50.0",
-		"@wordpress/private-apis": "^1.50.0",
-		"@wordpress/undo-manager": "^1.50.0",
+		"@wordpress/deprecated": "^4.51.0",
+		"@wordpress/dom": "^4.51.0",
+		"@wordpress/element": "^8.3.0",
+		"@wordpress/is-shallow-equal": "^5.51.0",
+		"@wordpress/keycodes": "^4.51.0",
+		"@wordpress/priority-queue": "^3.51.0",
+		"@wordpress/private-apis": "^1.51.0",
+		"@wordpress/undo-manager": "^1.51.0",
 		"change-case": "^4.1.2",
 		"mousetrap": "^1.6.5",
 		"use-memo-one": "^1.1.1"
@@ -66,8 +66,8 @@
 		"react-dom": "^18.3.1"
 	},
 	"peerDependencies": {
-		"@types/react": "^18.3.27",
-		"react": "^18.0.0"
+		"@types/react": "^18 || ^19",
+		"react": "^18 || ^19"
 	},
 	"peerDependenciesMeta": {
 		"@types/react": {
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "fee6e24e8e63d36f6bbcf487c193461e9bd79753"
+	"gitHead": "e9a74f9c14095a34398ecd4d1f7a908e55051205"
 }

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

@@ -80,9 +80,9 @@ export default function useMergeRefs< T >(
 	refs: Ref< T >[]
 ): RefCallback< T > {
 	const elementRef = useRef< T | null >( null );
-	const isAttachedRef = useRef( false );
-	const didElementChangeRef = useRef( false );
-	const previousRefsRef = useRef< Ref< T >[] >( [] );
+	// The refs that are attached to the element: set when the element
+	// attaches, and kept in sync when a changed ref is swapped on render.
+	const attachedRefsRef = 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
@@ -93,34 +93,31 @@ export default function useMergeRefs< T >(
 	// always has access to the 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.
+	// If any of the refs change, call the attached ref with `null` and the
+	// new ref with the node. Comparing against the refs that are attached to
+	// the element, rather than the previous render's refs, also covers an
+	// element that attaches outside a render of this component (a merged ref
+	// passed to a child that mounts the element in its own commit): the
+	// change is still detected on the next render. When the element attached
+	// during this commit, the ref callback has already been called with the
+	// current refs, which compare equal here.
 	useLayoutEffect( () => {
-		if (
-			didElementChangeRef.current === false &&
-			isAttachedRef.current === true
-		) {
-			refs.forEach( ( ref, index ) => {
-				const previousRef = previousRefsRef.current[ index ];
-				if ( ref !== previousRef ) {
-					detachRef( previousRef, index, cleanupsRef.current );
-					cleanupsRef.current[ index ] = assignRef(
-						ref,
-						elementRef.current as T
-					);
-				}
-			} );
+		const element = elementRef.current;
+
+		if ( element === null ) {
+			return;
 		}
 
-		previousRefsRef.current = refs;
-	}, refs );
+		refs.forEach( ( ref, index ) => {
+			const attachedRef = attachedRefsRef.current[ index ];
+			if ( ref !== attachedRef ) {
+				detachRef( attachedRef, index, cleanupsRef.current );
+				cleanupsRef.current[ index ] = assignRef( ref, element );
+			}
+		} );
 
-	// No dependencies, must be reset after every render so ref callbacks are
-	// correctly called after a ref change.
-	useLayoutEffect( () => {
-		didElementChangeRef.current = false;
-	} );
+		attachedRefsRef.current = refs;
+	}, refs );
 
 	// There should be no dependencies so that `callback` is only called when
 	// the node changes.
@@ -129,17 +126,16 @@ export default function useMergeRefs< T >(
 		// dependency change.
 		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`.
+		// with the new element and the attached one with `null`.
 		if ( value === null ) {
-			previousRefsRef.current.forEach( ( ref, index ) => {
+			attachedRefsRef.current.forEach( ( ref, index ) => {
 				detachRef( ref, index, cleanupsRef.current );
 			} );
+			attachedRefsRef.current = [];
 		} else {
-			currentRefsRef.current.forEach( ( ref, index ) => {
+			attachedRefsRef.current = currentRefsRef.current;
+			attachedRefsRef.current.forEach( ( ref, index ) => {
 				cleanupsRef.current[ index ] = assignRef( ref, value );
 			} );
 		}

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

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 
 /**
  * WordPress dependencies
  */
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -344,6 +344,74 @@ describe( 'useMergeRefs', () => {
 			[ [], [] ],
 		] );
 	} );
+
+	it( 'should work for dependency change after attachment outside a render of the owner', () => {
+		// The merged ref is created by a parent, but the element is mounted
+		// by a child in a commit of its own (e.g. the editor iframe portals
+		// the canvas body once the iframe document is available). The parent
+		// does not render in that commit, so the hook must still detect and
+		// apply a later ref change on the parent's next render.
+		function Child( { mergedRefs } ) {
+			const [ attached, setAttached ] = useState( false );
+			return (
+				<>
+					<button onClick={ () => setAttached( true ) } />
+					{ attached && <ul ref={ mergedRefs } /> }
+				</>
+			);
+		}
+
+		function Parent( { count } ) {
+			function refCallback1( value ) {
+				refCallback1.history.push( value );
+			}
+
+			refCallback1.history = [];
+
+			function refCallback2( value ) {
+				refCallback2.history.push( value );
+			}
+
+			refCallback2.history = [];
+
+			renderCallback( [ refCallback1.history, refCallback2.history ] );
+
+			const ref1 = useCallback( refCallback1, [] );
+			const ref2 = useCallback( refCallback2, [ count ] );
+			return <Child mergedRefs={ useMergeRefs( [ ref1, ref2 ] ) } />;
+		}
+
+		const { rerender, unmount } = render( <Parent count={ 1 } /> );
+
+		// Mount the element in a child-only commit: the parent does not
+		// render.
+		fireEvent.click( screen.getByRole( 'button' ) );
+
+		const originalElement = screen.getByRole( 'list' );
+
+		expect( renderCallback.history ).toEqual( [
+			[ [ originalElement ], [ originalElement ] ],
+		] );
+
+		rerender( <Parent count={ 2 } /> );
+
+		// The dependency change must still swap the second ref: the initial
+		// function called with null, the new function with the attached node.
+		expect( renderCallback.history ).toEqual( [
+			[ [ originalElement ], [ originalElement, null ] ],
+			[ [], [ originalElement ] ],
+		] );
+
+		unmount();
+
+		expect( renderCallback.history ).toEqual( [
+			[
+				[ originalElement, null ],
+				[ originalElement, null ],
+			],
+			[ [], [ originalElement, null ] ],
+		] );
+	} );
 } );
 
 describe( 'useMergeRefs with cleanup-returning ref callbacks', () => {