@wordpress/compose 8.0.0 → 8.1.1

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

@@ -2,25 +2,40 @@
 import { useRef, useCallback, useLayoutEffect } from "@wordpress/element";
 function assignRef(ref, value) {
   if (typeof ref === "function") {
-    ref(value);
+    const returned = ref(value);
+    return typeof returned === "function" ? returned : void 0;
   } else if (ref && ref.hasOwnProperty("current")) {
     ref.current = value;
   }
+  return void 0;
+}
+function detachRef(ref, index, cleanups) {
+  const cleanup = cleanups[index];
+  if (cleanup) {
+    cleanups[index] = void 0;
+    cleanup();
+  } else {
+    assignRef(ref, null);
+  }
 }
 function useMergeRefs(refs) {
-  const element = useRef(null);
+  const elementRef = useRef(null);
   const isAttachedRef = useRef(false);
   const didElementChangeRef = useRef(false);
   const previousRefsRef = 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) {
-          assignRef(previousRef, null);
-          assignRef(ref, element.current);
+          detachRef(previousRef, index, cleanupsRef.current);
+          cleanupsRef.current[index] = assignRef(
+            ref,
+            elementRef.current
+          );
         }
       });
     }
@@ -30,12 +45,17 @@ function useMergeRefs(refs) {
     didElementChangeRef.current = false;
   });
   return useCallback((value) => {
-    assignRef(element, value);
+    elementRef.current = value;
     didElementChangeRef.current = true;
     isAttachedRef.current = value !== null;
-    const refsToAssign = value ? currentRefsRef.current : previousRefsRef.current;
-    for (const ref of refsToAssign) {
-      assignRef(ref, value);
+    if (value === null) {
+      previousRefsRef.current.forEach((ref, index) => {
+        detachRef(ref, index, cleanupsRef.current);
+      });
+    } else {
+      currentRefsRef.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 { Ref, RefCallback } from 'react';\n\nfunction assignRef< T >( ref: Ref< T >, value: T ) {\n\tif ( typeof ref === 'function' ) {\n\t\tref( value );\n\t} else if ( ref && ref.hasOwnProperty( 'current' ) ) {\n\t\tref.current = value;\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 * To make ref callbacks easier to use, you can also pass the result of\n * `useRefEffect`, which makes cleanup easier by allowing you to return a\n * cleanup function instead of handling `null`.\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 = useRefEffect( ( 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 element = useRef( null );\n\tconst isAttachedRef = useRef( false );\n\tconst didElementChangeRef = useRef( false );\n\tconst previousRefsRef = useRef< Ref< T >[] >( [] );\n\tconst currentRefsRef = useRef( refs );\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\tassignRef( previousRef, null );\n\t\t\t\t\tassignRef( ref, element.current );\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\tassignRef( element, 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\tconst refsToAssign = value\n\t\t\t? currentRefsRef.current\n\t\t\t: previousRefsRef.current;\n\n\t\t// Update the latest refs.\n\t\tfor ( const ref of refsToAssign ) {\n\t\t\tassignRef( ref, value );\n\t\t}\n\t}, [] );\n}\n"],
-  "mappings": ";AAGA,SAAS,QAAQ,aAAa,uBAAuB;AAGrD,SAAS,UAAgB,KAAe,OAAW;AAClD,MAAK,OAAO,QAAQ,YAAa;AAChC,QAAK,KAAM;AAAA,EACZ,WAAY,OAAO,IAAI,eAAgB,SAAU,GAAI;AACpD,QAAI,UAAU;AAAA,EACf;AACD;AA2Ce,SAAR,aACN,MACmB;AACnB,QAAM,UAAU,OAAQ,IAAK;AAC7B,QAAM,gBAAgB,OAAQ,KAAM;AACpC,QAAM,sBAAsB,OAAQ,KAAM;AAC1C,QAAM,kBAAkB,OAAsB,CAAC,CAAE;AACjD,QAAM,iBAAiB,OAAQ,IAAK;AAIpC,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,IAAK;AAC7B,oBAAW,KAAK,QAAQ,OAAQ;AAAA,QACjC;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,cAAW,SAAS,KAAM;AAE1B,wBAAoB,UAAU;AAC9B,kBAAc,UAAU,UAAU;AAIlC,UAAM,eAAe,QAClB,eAAe,UACf,gBAAgB;AAGnB,eAAY,OAAO,cAAe;AACjC,gBAAW,KAAK,KAAM;AAAA,IACvB;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\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;",
   "names": []
 }

package/build-module/hooks/use-resize-observer/use-resize-observer.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/use-resize-observer/use-resize-observer.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport useEvent from '../use-event';\n\n// This is the current implementation of `useResizeObserver`.\n//\n// The legacy implementation is still supported for backwards compatibility.\n// This is achieved by overloading the exported function with both signatures,\n// and detecting which API is being used at runtime.\nexport function useResizeObserver< T extends HTMLElement >(\n\tcallback: ResizeObserverCallback,\n\tresizeObserverOptions: ResizeObserverOptions = {}\n): ( element?: T | null ) => void {\n\tconst callbackEvent = useEvent( callback );\n\n\tconst observedElementRef = useRef< T >( null );\n\tconst resizeObserverRef = useRef< ResizeObserver >( undefined );\n\treturn useEvent( ( element?: T | null ) => {\n\t\tif ( element === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set up `ResizeObserver`.\n\t\tresizeObserverRef.current ??= new ResizeObserver( callbackEvent );\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Unobserve previous element.\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t}\n\n\t\t// Observe new element.\n\t\tobservedElementRef.current = element ?? null;\n\t\tif ( element ) {\n\t\t\tresizeObserver.observe( element, resizeObserverOptions );\n\t\t}\n\t} );\n}\n"],
-  "mappings": ";AAGA,SAAS,cAAc;AAIvB,OAAO,cAAc;AAOd,SAAS,kBACf,UACA,wBAA+C,CAAC,GACf;AACjC,QAAM,gBAAgB,SAAU,QAAS;AAEzC,QAAM,qBAAqB,OAAa,IAAK;AAC7C,QAAM,oBAAoB,OAA0B,MAAU;AAC9D,SAAO,SAAU,CAAE,YAAwB;AAC1C,QAAK,YAAY,mBAAmB,SAAU;AAC7C;AAAA,IACD;AAGA,sBAAkB,YAAY,IAAI,eAAgB,aAAc;AAChE,UAAM,EAAE,SAAS,eAAe,IAAI;AAGpC,QAAK,mBAAmB,SAAU;AACjC,qBAAe,UAAW,mBAAmB,OAAQ;AAAA,IACtD;AAGA,uBAAmB,UAAU,WAAW;AACxC,QAAK,SAAU;AACd,qBAAe,QAAS,SAAS,qBAAsB;AAAA,IACxD;AAAA,EACD,CAAE;AACH;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport useEvent from '../use-event';\n\n// This is the current implementation of `useResizeObserver`.\n//\n// The legacy implementation is still supported for backwards compatibility.\n// This is achieved by overloading the exported function with both signatures,\n// and detecting which API is being used at runtime.\nexport function useResizeObserver< T extends HTMLElement >(\n\tcallback: ResizeObserverCallback,\n\tresizeObserverOptions: ResizeObserverOptions = {}\n): ( element?: T | null ) => void {\n\tconst callbackEvent = useEvent( callback );\n\n\tconst observedElementRef = useRef< T | null >( null );\n\tconst resizeObserverRef = useRef< ResizeObserver >( undefined );\n\treturn useEvent( ( element?: T | null ) => {\n\t\tif ( element === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set up `ResizeObserver`.\n\t\tresizeObserverRef.current ??= new ResizeObserver( callbackEvent );\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Unobserve previous element.\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t}\n\n\t\t// Observe new element.\n\t\tobservedElementRef.current = element ?? null;\n\t\tif ( element ) {\n\t\t\tresizeObserver.observe( element, resizeObserverOptions );\n\t\t}\n\t} );\n}\n"],
+  "mappings": ";AAGA,SAAS,cAAc;AAIvB,OAAO,cAAc;AAOd,SAAS,kBACf,UACA,wBAA+C,CAAC,GACf;AACjC,QAAM,gBAAgB,SAAU,QAAS;AAEzC,QAAM,qBAAqB,OAAoB,IAAK;AACpD,QAAM,oBAAoB,OAA0B,MAAU;AAC9D,SAAO,SAAU,CAAE,YAAwB;AAC1C,QAAK,YAAY,mBAAmB,SAAU;AAC7C;AAAA,IACD;AAGA,sBAAkB,YAAY,IAAI,eAAgB,aAAc;AAChE,UAAM,EAAE,SAAS,eAAe,IAAI;AAGpC,QAAK,mBAAmB,SAAU;AACjC,qBAAe,UAAW,mBAAmB,OAAQ;AAAA,IACtD;AAGA,uBAAmB,UAAU,WAAW;AACxC,QAAK,SAAU;AACd,qBAAe,QAAS,SAAS,qBAAsB;AAAA,IACxD;AAAA,EACD,CAAE;AACH;",
   "names": []
 }

package/build-module/hooks/use-viewport-match/index.mjs

@@ -24,7 +24,7 @@ var ViewportMatchWidthContext = createContext(
   null
 );
 ViewportMatchWidthContext.displayName = "ViewportMatchWidthContext";
-var useViewportMatch = (breakpoint, operator = ">=", view = window) => {
+var useViewportMatch = (breakpoint, operator = ">=", view = typeof window !== "undefined" ? window : void 0) => {
   const simulatedWidth = useContext(ViewportMatchWidthContext);
   const mediaQuery = !simulatedWidth && `(${CONDITIONS[operator]}: ${BREAKPOINTS[breakpoint]}px)`;
   const mediaQueryResult = useMediaQuery(mediaQuery || void 0, view);

package/build-module/hooks/use-viewport-match/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/use-viewport-match/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useMediaQuery from '../use-media-query';\n\n/**\n * @typedef {\"xhuge\" | \"huge\" | \"wide\" | \"xlarge\" | \"large\" | \"medium\" | \"small\" | \"mobile\"} WPBreakpoint\n */\n\n/**\n * Hash of breakpoint names with pixel width at which it becomes effective.\n *\n * @see _breakpoints.scss\n *\n * @type {Record<WPBreakpoint, number>}\n */\nconst BREAKPOINTS = {\n\txhuge: 1920,\n\thuge: 1440,\n\twide: 1280,\n\txlarge: 1080,\n\tlarge: 960,\n\tmedium: 782,\n\tsmall: 600,\n\tmobile: 480,\n};\n\n/**\n * @typedef {\">=\" | \"<\"} WPViewportOperator\n */\n\n/**\n * Object mapping media query operators to the condition to be used.\n *\n * @type {Record<WPViewportOperator, string>}\n */\nconst CONDITIONS = {\n\t'>=': 'min-width',\n\t'<': 'max-width',\n};\n\n/**\n * Object mapping media query operators to a function that given a breakpointValue and a width evaluates if the operator matches the values.\n *\n * @type {Record<WPViewportOperator, (breakpointValue: number, width: number) => boolean>}\n */\nconst OPERATOR_EVALUATORS = {\n\t'>=': ( breakpointValue, width ) => width >= breakpointValue,\n\t'<': ( breakpointValue, width ) => width < breakpointValue,\n};\n\nconst ViewportMatchWidthContext = createContext(\n\t/** @type {null | number} */ ( null )\n);\nViewportMatchWidthContext.displayName = 'ViewportMatchWidthContext';\n\n/**\n * Returns true if the viewport matches the given query, or false otherwise.\n *\n * @param {WPBreakpoint}       breakpoint      Breakpoint size name.\n * @param {WPViewportOperator} [operator=\">=\"] Viewport operator.\n * @param {Window}             [view=window]   Window instance in which to perform viewport matching.\n *\n * @example\n *\n * ```js\n * useViewportMatch( 'huge', '<' );\n * useViewportMatch( 'medium' );\n * ```\n *\n * @return {boolean} Whether viewport matches query.\n */\nconst useViewportMatch = ( breakpoint, operator = '>=', view = window ) => {\n\tconst simulatedWidth = useContext( ViewportMatchWidthContext );\n\tconst mediaQuery =\n\t\t! simulatedWidth &&\n\t\t`(${ CONDITIONS[ operator ] }: ${ BREAKPOINTS[ breakpoint ] }px)`;\n\tconst mediaQueryResult = useMediaQuery( mediaQuery || undefined, view );\n\tif ( simulatedWidth ) {\n\t\treturn OPERATOR_EVALUATORS[ operator ](\n\t\t\tBREAKPOINTS[ breakpoint ],\n\t\t\tsimulatedWidth\n\t\t);\n\t}\n\treturn mediaQueryResult;\n};\n\nuseViewportMatch.__experimentalWidthProvider =\n\tViewportMatchWidthContext.Provider;\n\nexport default useViewportMatch;\n"],
-  "mappings": ";AAGA,SAAS,eAAe,kBAAkB;AAK1C,OAAO,mBAAmB;AAa1B,IAAM,cAAc;AAAA,EACnB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACT;AAWA,IAAM,aAAa;AAAA,EAClB,MAAM;AAAA,EACN,KAAK;AACN;AAOA,IAAM,sBAAsB;AAAA,EAC3B,MAAM,CAAE,iBAAiB,UAAW,SAAS;AAAA,EAC7C,KAAK,CAAE,iBAAiB,UAAW,QAAQ;AAC5C;AAEA,IAAM,4BAA4B;AAAA;AAAA,EACF;AAChC;AACA,0BAA0B,cAAc;AAkBxC,IAAM,mBAAmB,CAAE,YAAY,WAAW,MAAM,OAAO,WAAY;AAC1E,QAAM,iBAAiB,WAAY,yBAA0B;AAC7D,QAAM,aACL,CAAE,kBACF,IAAK,WAAY,QAAS,CAAE,KAAM,YAAa,UAAW,CAAE;AAC7D,QAAM,mBAAmB,cAAe,cAAc,QAAW,IAAK;AACtE,MAAK,gBAAiB;AACrB,WAAO,oBAAqB,QAAS;AAAA,MACpC,YAAa,UAAW;AAAA,MACxB;AAAA,IACD;AAAA,EACD;AACA,SAAO;AACR;AAEA,iBAAiB,8BAChB,0BAA0B;AAE3B,IAAO,6BAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useMediaQuery from '../use-media-query';\n\n/**\n * @typedef {\"xhuge\" | \"huge\" | \"wide\" | \"xlarge\" | \"large\" | \"medium\" | \"small\" | \"mobile\"} WPBreakpoint\n */\n\n/**\n * Hash of breakpoint names with pixel width at which it becomes effective.\n *\n * @see _breakpoints.scss\n *\n * @type {Record<WPBreakpoint, number>}\n */\nconst BREAKPOINTS = {\n\txhuge: 1920,\n\thuge: 1440,\n\twide: 1280,\n\txlarge: 1080,\n\tlarge: 960,\n\tmedium: 782,\n\tsmall: 600,\n\tmobile: 480,\n};\n\n/**\n * @typedef {\">=\" | \"<\"} WPViewportOperator\n */\n\n/**\n * Object mapping media query operators to the condition to be used.\n *\n * @type {Record<WPViewportOperator, string>}\n */\nconst CONDITIONS = {\n\t'>=': 'min-width',\n\t'<': 'max-width',\n};\n\n/**\n * Object mapping media query operators to a function that given a breakpointValue and a width evaluates if the operator matches the values.\n *\n * @type {Record<WPViewportOperator, (breakpointValue: number, width: number) => boolean>}\n */\nconst OPERATOR_EVALUATORS = {\n\t'>=': ( breakpointValue, width ) => width >= breakpointValue,\n\t'<': ( breakpointValue, width ) => width < breakpointValue,\n};\n\nconst ViewportMatchWidthContext = createContext(\n\t/** @type {null | number} */ ( null )\n);\nViewportMatchWidthContext.displayName = 'ViewportMatchWidthContext';\n\n/**\n * Returns true if the viewport matches the given query, or false otherwise.\n *\n * @param {WPBreakpoint}       breakpoint      Breakpoint size name.\n * @param {WPViewportOperator} [operator=\">=\"] Viewport operator.\n * @param {Window|undefined}   [view=window]   Window instance in which to perform viewport matching.\n *\n * @example\n *\n * ```js\n * useViewportMatch( 'huge', '<' );\n * useViewportMatch( 'medium' );\n * ```\n *\n * @return {boolean} Whether viewport matches query.\n */\nconst useViewportMatch = (\n\tbreakpoint,\n\toperator = '>=',\n\t// Resolve the default lazily so SSR (where `window` is undeclared) does not\n\t// throw a ReferenceError when this default expression is evaluated.\n\tview = typeof window !== 'undefined' ? window : undefined\n) => {\n\tconst simulatedWidth = useContext( ViewportMatchWidthContext );\n\tconst mediaQuery =\n\t\t! simulatedWidth &&\n\t\t`(${ CONDITIONS[ operator ] }: ${ BREAKPOINTS[ breakpoint ] }px)`;\n\tconst mediaQueryResult = useMediaQuery( mediaQuery || undefined, view );\n\tif ( simulatedWidth ) {\n\t\treturn OPERATOR_EVALUATORS[ operator ](\n\t\t\tBREAKPOINTS[ breakpoint ],\n\t\t\tsimulatedWidth\n\t\t);\n\t}\n\treturn mediaQueryResult;\n};\n\nuseViewportMatch.__experimentalWidthProvider =\n\tViewportMatchWidthContext.Provider;\n\nexport default useViewportMatch;\n"],
+  "mappings": ";AAGA,SAAS,eAAe,kBAAkB;AAK1C,OAAO,mBAAmB;AAa1B,IAAM,cAAc;AAAA,EACnB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACT;AAWA,IAAM,aAAa;AAAA,EAClB,MAAM;AAAA,EACN,KAAK;AACN;AAOA,IAAM,sBAAsB;AAAA,EAC3B,MAAM,CAAE,iBAAiB,UAAW,SAAS;AAAA,EAC7C,KAAK,CAAE,iBAAiB,UAAW,QAAQ;AAC5C;AAEA,IAAM,4BAA4B;AAAA;AAAA,EACF;AAChC;AACA,0BAA0B,cAAc;AAkBxC,IAAM,mBAAmB,CACxB,YACA,WAAW,MAGX,OAAO,OAAO,WAAW,cAAc,SAAS,WAC5C;AACJ,QAAM,iBAAiB,WAAY,yBAA0B;AAC7D,QAAM,aACL,CAAE,kBACF,IAAK,WAAY,QAAS,CAAE,KAAM,YAAa,UAAW,CAAE;AAC7D,QAAM,mBAAmB,cAAe,cAAc,QAAW,IAAK;AACtE,MAAK,gBAAiB;AACrB,WAAO,oBAAqB,QAAS;AAAA,MACpC,YAAa,UAAW;AAAA,MACxB;AAAA,IACD;AAAA,EACD;AACA,SAAO;AACR;AAEA,iBAAiB,8BAChB,0BAA0B;AAE3B,IAAO,6BAAQ;",
   "names": []
 }

package/build-types/higher-order/pure/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/pure/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAkB,MAAM,OAAO,CAAC;AAa3D;;;;;GAKG;AACH,QAAA,MAAM,IAAI,GAA0C,KAAK,SAAS,EAAE,sDAuBzD,CAAC;eAEG,IAAI"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/pure/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAkB,MAAM,OAAO,CAAC;AAc3D;;;;;GAKG;AACH,QAAA,MAAM,IAAI,GAA0C,KAAK,SAAS,EAAE,sDA4BzD,CAAC;eAEG,IAAI"}

package/build-types/higher-order/with-safe-timeout/index.d.ts

@@ -30,6 +30,9 @@ declare const withSafeTimeout: <C extends WithInjectedProps<C, TimeoutProps>>(In
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<WithoutInjectedProps<C, TimeoutProps>>;
         state: Readonly<{}>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
         componentDidMount?(): void;
         shouldComponentUpdate?(nextProps: Readonly<WithoutInjectedProps<C, TimeoutProps>>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
@@ -43,7 +46,6 @@ declare const withSafeTimeout: <C extends WithInjectedProps<C, TimeoutProps>>(In
         UNSAFE_componentWillUpdate?(nextProps: Readonly<WithoutInjectedProps<C, TimeoutProps>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     contextType?: import("react").Context<any> | undefined;
-    propTypes?: any;
 };
 export default withSafeTimeout;
 //# sourceMappingURL=index.d.ts.map

package/build-types/higher-order/with-safe-timeout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/with-safe-timeout/index.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EACX,iBAAiB,EACjB,oBAAoB,EACpB,MAAM,2CAA2C,CAAC;AAGnD;;;;;;;GAOG;AACH,UAAU,YAAY;IACrB,UAAU,EAAE,CAAE,EAAE,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,KAAM,MAAM,CAAC;IACxD,YAAY,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;CACrC;AAED;;;GAGG;AACH,QAAA,MAAM,eAAe,GAClB,CAAC,SAAS,iBAAiB,CAAE,CAAC,EAAE,YAAY,CAAE;;kBAKpC,MAAM,EAAE;;uBAaF,MAAM,IAAI,SAAS,MAAM;yBASvB,MAAM;;;;;;;;;;;;;;;;;;;;;CAoB1B,CAAC;eAEa,eAAe"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/with-safe-timeout/index.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EACX,iBAAiB,EACjB,oBAAoB,EACpB,MAAM,2CAA2C,CAAC;AAGnD;;;;;;;GAOG;AACH,UAAU,YAAY;IACrB,UAAU,EAAE,CAAE,EAAE,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,KAAM,MAAM,CAAC;IACxD,YAAY,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;CACrC;AAED;;;GAGG;AACH,QAAA,MAAM,eAAe,GAClB,CAAC,SAAS,iBAAiB,CAAE,CAAC,EAAE,YAAY,CAAE;;kBAKpC,MAAM,EAAE;;uBAaF,MAAM,IAAI,SAAS,MAAM;yBASvB,MAAM;;;;;;;;;;;;;;;;;;;;;;;CAoB1B,CAAC;eAEa,eAAe"}

package/build-types/hooks/use-media-query/index.d.ts

@@ -5,5 +5,5 @@
  * @param [view]  Window instance, else default to global window
  * @return return value of the media query.
  */
-export default function useMediaQuery(query?: string, view?: Window): boolean;
+export default function useMediaQuery(query?: string, view?: Window | undefined): boolean;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-media-query/index.ts"],"names":[],"mappings":"AAoEA;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CACpC,KAAK,CAAC,EAAE,MAAM,EACd,IAAI,GAAE,MAAe,GACnB,OAAO,CAQT"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-media-query/index.ts"],"names":[],"mappings":"AAuEA;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CACpC,KAAK,CAAC,EAAE,MAAM,EAGd,IAAI,GAAE,MAAM,GAAG,SAEH,GACV,OAAO,CAQT"}

package/build-types/hooks/use-merge-refs/index.d.ts

@@ -15,22 +15,24 @@ import type { Ref, RefCallback } from 'react';
  * old ref callback will be called with `null` and the new ref callback will be
  * called with the same value.
  *
- * To make ref callbacks easier to use, you can also pass the result of
- * `useRefEffect`, which makes cleanup easier by allowing you to return a
- * cleanup function instead of handling `null`.
+ * Inner ref callbacks may return a cleanup function (React 19's ref callback
+ * cleanup pattern). When a ref callback returns a function, that function is
+ * invoked at teardown (node change, dependency change, or unmount) **instead
+ * of** the callback being called with `null`. Callbacks that do not return a
+ * cleanup continue to receive `null` on teardown as before.
  *
  * It's also possible to _disable_ a ref (and its behaviour) by simply not
  * passing the ref.
  *
  * ```jsx
- * const ref = useRefEffect( ( node ) => {
+ * const ref = useCallback( ( node ) => {
  *   node.addEventListener( ... );
  *   return () => {
  *     node.removeEventListener( ... );
  *   };
  * }, [ ...dependencies ] );
  * const otherRef = useRef();
- * const mergedRefs useMergeRefs( [
+ * const mergedRefs = useMergeRefs( [
  *   enabled && ref,
  *   otherRef,
  * ] );

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,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAU9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,CAAC,EACtC,IAAI,EAAE,GAAG,CAAE,CAAC,CAAE,EAAE,GACd,WAAW,CAAE,CAAC,CAAE,CA0DlB"}
+{"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"}

package/build-types/hooks/use-viewport-match/index.d.ts

@@ -1,6 +1,6 @@
 export type WPBreakpoint = "xhuge" | "huge" | "wide" | "xlarge" | "large" | "medium" | "small" | "mobile";
 export type WPViewportOperator = ">=" | "<";
-declare function useViewportMatch(breakpoint: WPBreakpoint, operator?: WPViewportOperator, view?: Window): boolean;
+declare function useViewportMatch(breakpoint: WPBreakpoint, operator?: WPViewportOperator, view?: Window | undefined): boolean;
 declare namespace useViewportMatch {
     var __experimentalWidthProvider: import("react").Provider<number | null>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-viewport-match/index.js"],"names":[],"mappings":"AAWG,YAA0F,YAAY,GAA5F,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAc;AAsBtG,YAAsB,kBAAkB,GAA9B,IAAI,GAAG,GAAG,CAAoB;kCA4ChB,UAAU,EAb1B,YAa0B,EAAE,QAAQ,GAZpC,kBAY2C,EAAE,IAAI,GAXjD,MAW0D,GAFzD,OAAO;;;;eAoBJ,gBAAgB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-viewport-match/index.js"],"names":[],"mappings":"AAWG,YAA0F,YAAY,GAA5F,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAc;AAsBtG,YAAsB,kBAAkB,GAA9B,IAAI,GAAG,GAAG,CAAoB;kCA6C1C,UAAU,EAdA,YAcA,EACV,QAAQ,GAdE,kBAcK,EAGf,IAAI,GAhBM,MAAM,GAAC,SAgBwC,GAP9C,OAAO;;;;eA0BJ,gBAAgB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "8.0.0",
+	"version": "8.1.1",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,32 +41,36 @@
 		},
 		"./package.json": "./package.json"
 	},
-	"react-native": "src/index",
 	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^4.47.0",
-		"@wordpress/dom": "^4.47.0",
-		"@wordpress/element": "^7.0.0",
-		"@wordpress/is-shallow-equal": "^5.47.0",
-		"@wordpress/keycodes": "^4.47.0",
-		"@wordpress/priority-queue": "^3.47.0",
-		"@wordpress/private-apis": "^1.47.0",
-		"@wordpress/undo-manager": "^1.47.0",
+		"@types/react": "^18.3.27",
+		"@wordpress/deprecated": "^4.48.1",
+		"@wordpress/dom": "^4.48.1",
+		"@wordpress/element": "^8.0.1",
+		"@wordpress/is-shallow-equal": "^5.48.1",
+		"@wordpress/keycodes": "^4.48.1",
+		"@wordpress/priority-queue": "^3.48.1",
+		"@wordpress/private-apis": "^1.48.1",
+		"@wordpress/undo-manager": "^1.48.1",
 		"change-case": "^4.1.2",
 		"mousetrap": "^1.6.5",
 		"use-memo-one": "^1.1.1"
 	},
 	"devDependencies": {
-		"mock-match-media": "0.4.2"
+		"@testing-library/dom": "^10.4.1",
+		"@testing-library/react": "^16.3.2",
+		"@testing-library/user-event": "^14.6.1",
+		"mock-match-media": "^0.4.2",
+		"react-dom": "^18.3.1"
 	},
 	"peerDependencies": {
-		"react": "^19.2.4"
+		"react": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d653c5fd6161571a0c2ebde28553d6e25624eacc"
+	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
 }

package/src/higher-order/pure/index.tsx

@@ -8,6 +8,7 @@ import type { ComponentType, ComponentClass } from 'react';
  */
 import { isShallowEqual } from '@wordpress/is-shallow-equal';
 import { Component } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -23,6 +24,11 @@ import { createHigherOrderComponent } from '../../utils/create-higher-order-comp
 const pure = createHigherOrderComponent( function < Props extends {} >(
 	WrappedComponent: ComponentType< Props >
 ): ComponentType< Props > {
+	deprecated( 'wp.compose.pure', {
+		since: '7.1',
+		alternative: 'Use `memo` or `PureComponent` instead',
+	} );
+
 	if ( WrappedComponent.prototype instanceof Component ) {
 		return class extends ( WrappedComponent as ComponentClass< Props > ) {
 			shouldComponentUpdate( nextProps: Props, nextState: any ) {

package/src/higher-order/pure/test/index.js

@@ -2,12 +2,11 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { logged } from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -15,88 +14,22 @@ import { Component } from '@wordpress/element';
 import pure from '../';
 
 describe( 'pure', () => {
-	it( 'functional component should rerender only when props change', () => {
-		let i = 0;
-		const MyComp = pure( () => {
-			return <p data-testid="counter">{ ++i }</p>;
-		} );
-		const { rerender } = render( <MyComp /> );
-
-		// Updating with same props doesn't rerender.
-		rerender( <MyComp /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '1' );
-
-		// New prop should trigger a rerender.
-		rerender( <MyComp { ...{ prop: 'a' } } /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '2' );
-
-		// Keeping the same prop value should not rerender.
-		rerender( <MyComp { ...{ prop: 'a' } } /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '2' );
-
-		// Changing the prop value should rerender.
-		rerender( <MyComp { ...{ prop: 'b' } } /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '3' );
+	afterEach( () => {
+		for ( const key in logged ) {
+			delete logged[ key ];
+		}
 	} );
 
-	it( 'class component should rerender if the props or state change', async () => {
-		const user = userEvent.setup();
-		let i = 0;
-		const MyComp = pure(
-			class extends Component {
-				constructor() {
-					super( ...arguments );
-					this.state = {
-						val: '',
-					};
-				}
-				render() {
-					return (
-						<>
-							<p data-testid="counter">{ ++i }</p>
-							<input
-								type="text"
-								value={ this.state.val }
-								onChange={ ( e ) =>
-									this.setState( { val: e.target.value } )
-								}
-							/>
-							<input
-								type="button"
-								onClick={ () =>
-									this.setState( { val: this.state.val } )
-								}
-							/>
-						</>
-					);
-				}
-			}
-		);
-
-		const { rerender } = render( <MyComp /> );
+	it( 'wraps a component and logs a deprecation warning', () => {
+		const MyComp = pure( () => <p data-testid="content">content</p> );
 
-		// Updating with same props doesn't rerender.
-		rerender( <MyComp /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '1' );
+		render( <MyComp /> );
 
-		// New prop should trigger a rerender.
-		rerender( <MyComp { ...{ prop: 'a' } } /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '2' );
-
-		// Keeping the same prop value should not rerender.
-		rerender( <MyComp { ...{ prop: 'a' } } /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '2' );
-
-		// Changing the prop value should rerender.
-		rerender( <MyComp { ...{ prop: 'b' } } /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '3' );
-
-		// New state value should trigger a rerender.
-		await user.type( screen.getByRole( 'textbox' ), 'a' );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '4' );
-
-		// Keeping the same state value should not trigger a rerender.
-		await user.click( screen.getByRole( 'button' ) );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '4' );
+		expect( console ).toHaveWarnedWith(
+			'wp.compose.pure is deprecated since version 7.1. Please use Use `memo` or `PureComponent` instead instead.'
+		);
+		expect( screen.getByTestId( 'content' ) ).toHaveTextContent(
+			'content'
+		);
 	} );
 } );

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

@@ -45,14 +45,14 @@ export default function useDisabled( {
 			}
 
 			/** A variable keeping track of the previous updates in order to restore them. */
-			const updates: ( () => void )[] = [];
+			const updates: Function[] = [];
 			const disable = () => {
 				node.childNodes.forEach( ( child ) => {
 					if ( ! ( child instanceof defaultView.HTMLElement ) ) {
 						return;
 					}
-					if ( ! child.hasAttribute( 'inert' ) ) {
-						child.setAttribute( 'inert', '' );
+					if ( ! child.getAttribute( 'inert' ) ) {
+						child.setAttribute( 'inert', 'true' );
 						updates.push( () => {
 							child.removeAttribute( 'inert' );
 						} );

package/src/hooks/use-disabled/test/index.js

@@ -37,9 +37,9 @@ describe( 'useDisabled', () => {
 		const link = screen.getByRole( 'link' );
 		const p = screen.getByRole( 'document' );
 
-		expect( input ).toHaveAttribute( 'inert' );
-		expect( link ).toHaveAttribute( 'inert' );
-		expect( p ).toHaveAttribute( 'inert' );
+		expect( input ).toHaveAttribute( 'inert', 'true' );
+		expect( link ).toHaveAttribute( 'inert', 'true' );
+		expect( p ).toHaveAttribute( 'inert', 'true' );
 	} );
 
 	it( 'will disable an element rendered in an update to the component', async () => {
@@ -52,7 +52,7 @@ describe( 'useDisabled', () => {
 
 		const button = screen.getByText( 'Button' );
 		await waitFor( () => {
-			expect( button ).toHaveAttribute( 'inert' );
+			expect( button ).toHaveAttribute( 'inert', 'true' );
 		} );
 	} );
 } );

package/src/hooks/use-drop-zone/README.md

@@ -2,7 +2,7 @@
 
 A hook to facilitate drag and drop handling within a designated drop zone area. An optional `dropZoneElement` can be provided, however by default the drop zone is bound by the area where the returned `ref` is assigned.
 
-When using a `dropZoneElement`, it is expected that the `ref` will be attached to a node that is a descendent of the `dropZoneElement`. Additionally, the element passed to `dropZoneElement` should be stored in state rather than a plain ref to ensure reactive updating when it changes.
+When using a `dropZoneElement`, it is expected that the `ref` will be attached to a node that is a descendant of the `dropZoneElement`. Additionally, the element passed to `dropZoneElement` should be stored in state rather than a plain ref to ensure reactive updating when it changes.
 
 ## Usage
 

package/src/hooks/use-focus-return/index.js

@@ -29,9 +29,9 @@ let origin = null;
  * ```
  */
 function useFocusReturn( onFocusReturn ) {
-	/** @type {React.RefObject<HTMLElement| null>} */
+	/** @type {React.MutableRefObject<null | HTMLElement>} */
 	const ref = useRef( null );
-	/** @type {React.RefObject<Element | null>} */
+	/** @type {React.MutableRefObject<null | Element>} */
 	const focusedBeforeMount = useRef( null );
 	const onFocusReturnRef = useRef( onFocusReturn );
 	useEffect( () => {

package/src/hooks/use-media-query/index.ts

@@ -19,8 +19,11 @@ const EMPTY_SUBSCRIBER: MQLSubscriber = {
 	getValue: () => false,
 };
 
-function getMQLSubscriber( view: Window, query?: string ): MQLSubscriber {
-	if ( ! query || typeof view?.matchMedia !== 'function' ) {
+function getMQLSubscriber(
+	view: Window | undefined,
+	query?: string
+): MQLSubscriber {
+	if ( ! view || ! query || typeof view.matchMedia !== 'function' ) {
 		return EMPTY_SUBSCRIBER;
 	}
 
@@ -75,7 +78,11 @@ function getMQLSubscriber( view: Window, query?: string ): MQLSubscriber {
  */
 export default function useMediaQuery(
 	query?: string,
-	view: Window = window
+	// Resolve the default lazily so SSR (where `window` is undeclared) does not
+	// throw a ReferenceError when this default expression is evaluated.
+	view: Window | undefined = typeof window !== 'undefined'
+		? window
+		: undefined
 ): boolean {
 	const source = getMQLSubscriber( view, query );
 

package/src/hooks/use-media-query/test/ssr.js

@@ -0,0 +1,47 @@
+/**
+ * @jest-environment node
+ */
+
+/**
+ * External dependencies
+ */
+import { renderToString } from 'react-dom/server';
+
+/**
+ * Internal dependencies
+ */
+import useMediaQuery from '../';
+import useViewportMatch from '../../use-viewport-match';
+
+const MediaQueryComponent = ( { query } ) => {
+	const result = useMediaQuery( query );
+	return `useMediaQuery: ${ result }`;
+};
+
+const ViewportMatchComponent = ( { breakpoint, operator } ) => {
+	const result = useViewportMatch( breakpoint, operator );
+	return `useViewportMatch: ${ result }`;
+};
+
+describe( 'compose hooks in a server (no-window) environment', () => {
+	it( 'useMediaQuery renders to false without throwing when window is undefined', () => {
+		expect( typeof window ).toBe( 'undefined' );
+		expect(
+			renderToString( <MediaQueryComponent query="(min-width: 782px)" /> )
+		).toBe( 'useMediaQuery: false' );
+	} );
+
+	it( 'useMediaQuery renders to false when no query is provided', () => {
+		expect( renderToString( <MediaQueryComponent /> ) ).toBe(
+			'useMediaQuery: false'
+		);
+	} );
+
+	it( 'useViewportMatch renders to false without throwing when window is undefined', () => {
+		expect(
+			renderToString(
+				<ViewportMatchComponent breakpoint="small" operator=">=" />
+			)
+		).toBe( 'useViewportMatch: false' );
+	} );
+} );