@wordpress/data 10.47.0 → 10.48.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 10.48.1 (2026-06-16)
+
+## 10.48.0 (2026-06-10)
+
+### Code Quality
+
+-   Add missing `@types/react` dependency. [#78882](https://github.com/WordPress/gutenberg/pull/78882).
+
 ## 10.47.0 (2026-05-27)
 
 ## 10.46.0 (2026-05-14)

package/README.md

@@ -613,9 +613,9 @@ _Returns_
 
 ### RegistryConsumer
 
-A custom react Context consumer exposing the provided `registry` to children components. Used along with the RegistryProvider.
+A custom React context consumer exposing the provided `registry` to children components. Used along with the RegistryProvider.
 
-You can read more about the react context api here: <https://react.dev/learn/passing-data-deeply-with-context#step-3-provide-the-context>
+You can read more about the React context API here: <https://react.dev/learn/passing-data-deeply-with-context#step-3-provide-the-context>
 
 _Usage_
 
@@ -646,7 +646,7 @@ const App = ( { props } ) => {
 
 A custom Context provider for exposing the provided `registry` to children components via a consumer.
 
-See <a name="#RegistryConsumer">RegistryConsumer</a> documentation for example.
+See <a href="#registryconsumer">RegistryConsumer</a> documentation for example.
 
 ### resolveSelect
 
@@ -790,11 +790,11 @@ _Returns_
 
 ### useRegistry
 
-A custom react hook exposing the registry context for use.
+A custom React hook exposing the registry context for use.
 
-This exposes the `registry` value provided via the <a href="#RegistryProvider">Registry Provider</a> to a component implementing this hook.
+This exposes the `registry` value provided via the <a href="#registryprovider">Registry Provider</a> to a component implementing this hook.
 
-It acts similarly to the `useContext` react hook.
+It acts similarly to the `useContext` React hook.
 
 Note: Generally speaking, `useRegistry` is a low level hook that in most cases won't be needed for implementation. Most interactions with the `@wordpress/data` API can be performed via the `useSelect` hook, or the `withSelect` and `withDispatch` higher order components.
 
@@ -821,7 +821,7 @@ const ParentProvidingRegistry = ( props ) => {
 
 _Returns_
 
--   `DataRegistry`: A custom react hook exposing the registry context value.
+-   `DataRegistry`: A custom React hook exposing the registry context value.
 
 ### useSelect
 

package/build/components/registry-provider/context.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/registry-provider/context.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport defaultRegistry from '../../default-registry';\n\nexport const Context = createContext( defaultRegistry );\nContext.displayName = 'RegistryProviderContext';\n\nconst { Consumer, Provider } = Context;\n\n/**\n * A custom react Context consumer exposing the provided `registry` to\n * children components. Used along with the RegistryProvider.\n *\n * You can read more about the react context api here:\n * https://react.dev/learn/passing-data-deeply-with-context#step-3-provide-the-context\n *\n * @example\n * ```js\n * import {\n *   RegistryProvider,\n *   RegistryConsumer,\n *   createRegistry\n * } from '@wordpress/data';\n *\n * const registry = createRegistry( {} );\n *\n * const App = ( { props } ) => {\n *   return <RegistryProvider value={ registry }>\n *     <div>Hello There</div>\n *     <RegistryConsumer>\n *       { ( registry ) => (\n *         <ComponentUsingRegistry\n *         \t\t{ ...props }\n *         \t  registry={ registry }\n *       ) }\n *     </RegistryConsumer>\n *   </RegistryProvider>\n * }\n * ```\n */\nexport const RegistryConsumer = Consumer;\n\n/**\n * A custom Context provider for exposing the provided `registry` to children\n * components via a consumer.\n *\n * See <a name=\"#RegistryConsumer\">RegistryConsumer</a> documentation for\n * example.\n */\nexport default Provider;\n"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport defaultRegistry from '../../default-registry';\n\nexport const Context = createContext( defaultRegistry );\nContext.displayName = 'RegistryProviderContext';\n\nconst { Consumer, Provider } = Context;\n\n/**\n * A custom React context consumer exposing the provided `registry` to\n * children components. Used along with the RegistryProvider.\n *\n * You can read more about the React context API here:\n * https://react.dev/learn/passing-data-deeply-with-context#step-3-provide-the-context\n *\n * @example\n * ```js\n * import {\n *   RegistryProvider,\n *   RegistryConsumer,\n *   createRegistry\n * } from '@wordpress/data';\n *\n * const registry = createRegistry( {} );\n *\n * const App = ( { props } ) => {\n *   return <RegistryProvider value={ registry }>\n *     <div>Hello There</div>\n *     <RegistryConsumer>\n *       { ( registry ) => (\n *         <ComponentUsingRegistry\n *         \t\t{ ...props }\n *         \t  registry={ registry }\n *       ) }\n *     </RegistryConsumer>\n *   </RegistryProvider>\n * }\n * ```\n */\nexport const RegistryConsumer = Consumer;\n\n/**\n * A custom Context provider for exposing the provided `registry` to children\n * components via a consumer.\n *\n * See <a href=\"#registryconsumer\">RegistryConsumer</a> documentation for\n * example.\n */\nexport default Provider;\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8B;AAK9B,8BAA4B;AAErB,IAAM,cAAU,8BAAe,wBAAAA,OAAgB;AACtD,QAAQ,cAAc;AAEtB,IAAM,EAAE,UAAU,SAAS,IAAI;AAiCxB,IAAM,mBAAmB;AAShC,IAAO,kBAAQ;",
   "names": ["defaultRegistry"]
 }

package/build/components/registry-provider/use-registry.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/registry-provider/use-registry.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Context } from './context';\nimport type { DataRegistry } from '../../types';\n\n/**\n * A custom react hook exposing the registry context for use.\n *\n * This exposes the `registry` value provided via the\n * <a href=\"#RegistryProvider\">Registry Provider</a> to a component implementing\n * this hook.\n *\n * It acts similarly to the `useContext` react hook.\n *\n * Note: Generally speaking, `useRegistry` is a low level hook that in most cases\n * won't be needed for implementation. Most interactions with the `@wordpress/data`\n * API can be performed via the `useSelect` hook,  or the `withSelect` and\n * `withDispatch` higher order components.\n *\n * @example\n * ```js\n * import {\n *   RegistryProvider,\n *   createRegistry,\n *   useRegistry,\n * } from '@wordpress/data';\n *\n * const registry = createRegistry( {} );\n *\n * const SomeChildUsingRegistry = ( props ) => {\n *   const registry = useRegistry();\n *   // ...logic implementing the registry in other react hooks.\n * };\n *\n *\n * const ParentProvidingRegistry = ( props ) => {\n *   return <RegistryProvider value={ registry }>\n *     <SomeChildUsingRegistry { ...props } />\n *   </RegistryProvider>\n * };\n * ```\n *\n * @return A custom react hook exposing the registry context value.\n */\nexport default function useRegistry(): DataRegistry {\n\treturn useContext( Context );\n}\n"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Context } from './context';\nimport type { DataRegistry } from '../../types';\n\n/**\n * A custom React hook exposing the registry context for use.\n *\n * This exposes the `registry` value provided via the\n * <a href=\"#registryprovider\">Registry Provider</a> to a component implementing\n * this hook.\n *\n * It acts similarly to the `useContext` React hook.\n *\n * Note: Generally speaking, `useRegistry` is a low level hook that in most cases\n * won't be needed for implementation. Most interactions with the `@wordpress/data`\n * API can be performed via the `useSelect` hook, or the `withSelect` and\n * `withDispatch` higher order components.\n *\n * @example\n * ```js\n * import {\n *   RegistryProvider,\n *   createRegistry,\n *   useRegistry,\n * } from '@wordpress/data';\n *\n * const registry = createRegistry( {} );\n *\n * const SomeChildUsingRegistry = ( props ) => {\n *   const registry = useRegistry();\n *   // ...logic implementing the registry in other react hooks.\n * };\n *\n *\n * const ParentProvidingRegistry = ( props ) => {\n *   return <RegistryProvider value={ registry }>\n *     <SomeChildUsingRegistry { ...props } />\n *   </RegistryProvider>\n * };\n * ```\n *\n * @return A custom React hook exposing the registry context value.\n */\nexport default function useRegistry(): DataRegistry {\n\treturn useContext( Context );\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA2B;AAK3B,qBAAwB;AA0CT,SAAR,cAA6C;AACnD,aAAO,2BAAY,sBAAQ;AAC5B;",
   "names": []
 }

package/build/components/with-select/index.cjs

@@ -34,14 +34,24 @@ __export(with_select_exports, {
 });
 module.exports = __toCommonJS(with_select_exports);
 var import_compose = require("@wordpress/compose");
+var import_element = require("@wordpress/element");
 var import_use_select = __toESM(require("../use-select/index.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var withSelect = (mapSelectToProps) => (0, import_compose.createHigherOrderComponent)(
-  (WrappedComponent) => (0, import_compose.pure)((ownProps) => {
-    const mapSelect = (select, registry) => mapSelectToProps(select, ownProps, registry);
-    const mergeProps = (0, import_use_select.default)(mapSelect);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WrappedComponent, { ...ownProps, ...mergeProps });
-  }),
+  (WrappedComponent) => (0, import_element.memo)(
+    (0, import_element.forwardRef)(function WithSelect(ownProps, ref) {
+      const mapSelect = (select, registry) => mapSelectToProps(select, ownProps, registry);
+      const mergeProps = (0, import_use_select.default)(mapSelect);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        WrappedComponent,
+        {
+          ref,
+          ...ownProps,
+          ...mergeProps
+        }
+      );
+    })
+  ),
   "withSelect"
 );
 var with_select_default = withSelect;

package/build/components/with-select/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/with-select/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent, pure } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport useSelect from '../use-select';\nimport type { SelectFunction, DataRegistry } from '../../types';\n\n/**\n * Higher-order component used to inject state-derived props using registered\n * selectors.\n *\n * @param mapSelectToProps Function called on every state change,\n *                         expected to return object of props to\n *                         merge with the component's own props.\n *\n * @example\n * ```js\n * import { withSelect } from '@wordpress/data';\n * import { store as myCustomStore } from 'my-custom-store';\n *\n * function PriceDisplay( { price, currency } ) {\n * \treturn new Intl.NumberFormat( 'en-US', {\n * \t\tstyle: 'currency',\n * \t\tcurrency,\n * \t} ).format( price );\n * }\n *\n * const HammerPriceDisplay = withSelect( ( select, ownProps ) => {\n * \tconst { getPrice } = select( myCustomStore );\n * \tconst { currency } = ownProps;\n *\n * \treturn {\n * \t\tprice: getPrice( 'hammer', currency ),\n * \t};\n * } )( PriceDisplay );\n *\n * // Rendered in the application:\n * //\n * //  <HammerPriceDisplay currency=\"USD\" />\n * ```\n * In the above example, when `HammerPriceDisplay` is rendered into an\n * application, it will pass the price into the underlying `PriceDisplay`\n * component and update automatically if the price of a hammer ever changes in\n * the store.\n *\n * @return Enhanced component with merged state data props.\n */\nconst withSelect = (\n\tmapSelectToProps: (\n\t\tselect: SelectFunction,\n\t\townProps: Record< string, unknown >,\n\t\tregistry: DataRegistry\n\t) => Record< string, unknown >\n) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) =>\n\t\t\tpure( ( ownProps: Record< string, unknown > ) => {\n\t\t\t\tconst mapSelect = (\n\t\t\t\t\tselect: SelectFunction,\n\t\t\t\t\tregistry: DataRegistry\n\t\t\t\t) => mapSelectToProps( select, ownProps, registry );\n\t\t\t\tconst mergeProps = useSelect( mapSelect );\n\t\t\t\treturn <WrappedComponent { ...ownProps } { ...mergeProps } />;\n\t\t\t} ),\n\t\t'withSelect'\n\t);\n\nexport default withSelect;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAiD;AAKjD,wBAAsB;AA0DX;AAfX,IAAM,aAAa,CAClB,yBAMA;AAAA,EACC,CAAE,yBACD,qBAAM,CAAE,aAAyC;AAChD,UAAM,YAAY,CACjB,QACA,aACI,iBAAkB,QAAQ,UAAU,QAAS;AAClD,UAAM,iBAAa,kBAAAA,SAAW,SAAU;AACxC,WAAO,4CAAC,oBAAmB,GAAG,UAAa,GAAG,YAAa;AAAA,EAC5D,CAAE;AAAA,EACH;AACD;AAED,IAAO,sBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { forwardRef, memo } from '@wordpress/element';\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport useSelect from '../use-select';\nimport type { SelectFunction, DataRegistry } from '../../types';\n\n/**\n * Higher-order component used to inject state-derived props using registered\n * selectors.\n *\n * @param mapSelectToProps Function called on every state change,\n *                         expected to return object of props to\n *                         merge with the component's own props.\n *\n * @example\n * ```js\n * import { withSelect } from '@wordpress/data';\n * import { store as myCustomStore } from 'my-custom-store';\n *\n * function PriceDisplay( { price, currency } ) {\n * \treturn new Intl.NumberFormat( 'en-US', {\n * \t\tstyle: 'currency',\n * \t\tcurrency,\n * \t} ).format( price );\n * }\n *\n * const HammerPriceDisplay = withSelect( ( select, ownProps ) => {\n * \tconst { getPrice } = select( myCustomStore );\n * \tconst { currency } = ownProps;\n *\n * \treturn {\n * \t\tprice: getPrice( 'hammer', currency ),\n * \t};\n * } )( PriceDisplay );\n *\n * // Rendered in the application:\n * //\n * //  <HammerPriceDisplay currency=\"USD\" />\n * ```\n * In the above example, when `HammerPriceDisplay` is rendered into an\n * application, it will pass the price into the underlying `PriceDisplay`\n * component and update automatically if the price of a hammer ever changes in\n * the store.\n *\n * @return Enhanced component with merged state data props.\n */\nconst withSelect = (\n\tmapSelectToProps: (\n\t\tselect: SelectFunction,\n\t\townProps: Record< string, unknown >,\n\t\tregistry: DataRegistry\n\t) => Record< string, unknown >\n) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) =>\n\t\t\tmemo(\n\t\t\t\tforwardRef( function WithSelect(\n\t\t\t\t\townProps: Record< string, unknown >,\n\t\t\t\t\tref: ForwardedRef< unknown >\n\t\t\t\t) {\n\t\t\t\t\tconst mapSelect = (\n\t\t\t\t\t\tselect: SelectFunction,\n\t\t\t\t\t\tregistry: DataRegistry\n\t\t\t\t\t) => mapSelectToProps( select, ownProps, registry );\n\t\t\t\t\tconst mergeProps = useSelect( mapSelect );\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\t{ ...ownProps }\n\t\t\t\t\t\t\t{ ...mergeProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} )\n\t\t\t),\n\t\t'withSelect'\n\t);\n\nexport default withSelect;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA2C;AAC3C,qBAAiC;AAMjC,wBAAsB;AA+DhB;AApBN,IAAM,aAAa,CAClB,yBAMA;AAAA,EACC,CAAE,yBACD;AAAA,QACC,2BAAY,SAAS,WACpB,UACA,KACC;AACD,YAAM,YAAY,CACjB,QACA,aACI,iBAAkB,QAAQ,UAAU,QAAS;AAClD,YAAM,iBAAa,kBAAAA,SAAW,SAAU;AACxC,aACC;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA;AAAA,MACN;AAAA,IAEF,CAAE;AAAA,EACH;AAAA,EACD;AACD;AAED,IAAO,sBAAQ;",
   "names": ["useSelect"]
 }

package/build-module/components/registry-provider/context.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/registry-provider/context.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport defaultRegistry from '../../default-registry';\n\nexport const Context = createContext( defaultRegistry );\nContext.displayName = 'RegistryProviderContext';\n\nconst { Consumer, Provider } = Context;\n\n/**\n * A custom react Context consumer exposing the provided `registry` to\n * children components. Used along with the RegistryProvider.\n *\n * You can read more about the react context api here:\n * https://react.dev/learn/passing-data-deeply-with-context#step-3-provide-the-context\n *\n * @example\n * ```js\n * import {\n *   RegistryProvider,\n *   RegistryConsumer,\n *   createRegistry\n * } from '@wordpress/data';\n *\n * const registry = createRegistry( {} );\n *\n * const App = ( { props } ) => {\n *   return <RegistryProvider value={ registry }>\n *     <div>Hello There</div>\n *     <RegistryConsumer>\n *       { ( registry ) => (\n *         <ComponentUsingRegistry\n *         \t\t{ ...props }\n *         \t  registry={ registry }\n *       ) }\n *     </RegistryConsumer>\n *   </RegistryProvider>\n * }\n * ```\n */\nexport const RegistryConsumer = Consumer;\n\n/**\n * A custom Context provider for exposing the provided `registry` to children\n * components via a consumer.\n *\n * See <a name=\"#RegistryConsumer\">RegistryConsumer</a> documentation for\n * example.\n */\nexport default Provider;\n"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport defaultRegistry from '../../default-registry';\n\nexport const Context = createContext( defaultRegistry );\nContext.displayName = 'RegistryProviderContext';\n\nconst { Consumer, Provider } = Context;\n\n/**\n * A custom React context consumer exposing the provided `registry` to\n * children components. Used along with the RegistryProvider.\n *\n * You can read more about the React context API here:\n * https://react.dev/learn/passing-data-deeply-with-context#step-3-provide-the-context\n *\n * @example\n * ```js\n * import {\n *   RegistryProvider,\n *   RegistryConsumer,\n *   createRegistry\n * } from '@wordpress/data';\n *\n * const registry = createRegistry( {} );\n *\n * const App = ( { props } ) => {\n *   return <RegistryProvider value={ registry }>\n *     <div>Hello There</div>\n *     <RegistryConsumer>\n *       { ( registry ) => (\n *         <ComponentUsingRegistry\n *         \t\t{ ...props }\n *         \t  registry={ registry }\n *       ) }\n *     </RegistryConsumer>\n *   </RegistryProvider>\n * }\n * ```\n */\nexport const RegistryConsumer = Consumer;\n\n/**\n * A custom Context provider for exposing the provided `registry` to children\n * components via a consumer.\n *\n * See <a href=\"#registryconsumer\">RegistryConsumer</a> documentation for\n * example.\n */\nexport default Provider;\n"],
   "mappings": ";AAGA,SAAS,qBAAqB;AAK9B,OAAO,qBAAqB;AAErB,IAAM,UAAU,cAAe,eAAgB;AACtD,QAAQ,cAAc;AAEtB,IAAM,EAAE,UAAU,SAAS,IAAI;AAiCxB,IAAM,mBAAmB;AAShC,IAAO,kBAAQ;",
   "names": []
 }

package/build-module/components/registry-provider/use-registry.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/registry-provider/use-registry.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Context } from './context';\nimport type { DataRegistry } from '../../types';\n\n/**\n * A custom react hook exposing the registry context for use.\n *\n * This exposes the `registry` value provided via the\n * <a href=\"#RegistryProvider\">Registry Provider</a> to a component implementing\n * this hook.\n *\n * It acts similarly to the `useContext` react hook.\n *\n * Note: Generally speaking, `useRegistry` is a low level hook that in most cases\n * won't be needed for implementation. Most interactions with the `@wordpress/data`\n * API can be performed via the `useSelect` hook,  or the `withSelect` and\n * `withDispatch` higher order components.\n *\n * @example\n * ```js\n * import {\n *   RegistryProvider,\n *   createRegistry,\n *   useRegistry,\n * } from '@wordpress/data';\n *\n * const registry = createRegistry( {} );\n *\n * const SomeChildUsingRegistry = ( props ) => {\n *   const registry = useRegistry();\n *   // ...logic implementing the registry in other react hooks.\n * };\n *\n *\n * const ParentProvidingRegistry = ( props ) => {\n *   return <RegistryProvider value={ registry }>\n *     <SomeChildUsingRegistry { ...props } />\n *   </RegistryProvider>\n * };\n * ```\n *\n * @return A custom react hook exposing the registry context value.\n */\nexport default function useRegistry(): DataRegistry {\n\treturn useContext( Context );\n}\n"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Context } from './context';\nimport type { DataRegistry } from '../../types';\n\n/**\n * A custom React hook exposing the registry context for use.\n *\n * This exposes the `registry` value provided via the\n * <a href=\"#registryprovider\">Registry Provider</a> to a component implementing\n * this hook.\n *\n * It acts similarly to the `useContext` React hook.\n *\n * Note: Generally speaking, `useRegistry` is a low level hook that in most cases\n * won't be needed for implementation. Most interactions with the `@wordpress/data`\n * API can be performed via the `useSelect` hook, or the `withSelect` and\n * `withDispatch` higher order components.\n *\n * @example\n * ```js\n * import {\n *   RegistryProvider,\n *   createRegistry,\n *   useRegistry,\n * } from '@wordpress/data';\n *\n * const registry = createRegistry( {} );\n *\n * const SomeChildUsingRegistry = ( props ) => {\n *   const registry = useRegistry();\n *   // ...logic implementing the registry in other react hooks.\n * };\n *\n *\n * const ParentProvidingRegistry = ( props ) => {\n *   return <RegistryProvider value={ registry }>\n *     <SomeChildUsingRegistry { ...props } />\n *   </RegistryProvider>\n * };\n * ```\n *\n * @return A custom React hook exposing the registry context value.\n */\nexport default function useRegistry(): DataRegistry {\n\treturn useContext( Context );\n}\n"],
   "mappings": ";AAGA,SAAS,kBAAkB;AAK3B,SAAS,eAAe;AA0CT,SAAR,cAA6C;AACnD,SAAO,WAAY,OAAQ;AAC5B;",
   "names": []
 }

package/build-module/components/with-select/index.mjs

@@ -1,13 +1,23 @@
 // packages/data/src/components/with-select/index.tsx
-import { createHigherOrderComponent, pure } from "@wordpress/compose";
+import { createHigherOrderComponent } from "@wordpress/compose";
+import { forwardRef, memo } from "@wordpress/element";
 import useSelect from "../use-select/index.mjs";
 import { jsx } from "react/jsx-runtime";
 var withSelect = (mapSelectToProps) => createHigherOrderComponent(
-  (WrappedComponent) => pure((ownProps) => {
-    const mapSelect = (select, registry) => mapSelectToProps(select, ownProps, registry);
-    const mergeProps = useSelect(mapSelect);
-    return /* @__PURE__ */ jsx(WrappedComponent, { ...ownProps, ...mergeProps });
-  }),
+  (WrappedComponent) => memo(
+    forwardRef(function WithSelect(ownProps, ref) {
+      const mapSelect = (select, registry) => mapSelectToProps(select, ownProps, registry);
+      const mergeProps = useSelect(mapSelect);
+      return /* @__PURE__ */ jsx(
+        WrappedComponent,
+        {
+          ref,
+          ...ownProps,
+          ...mergeProps
+        }
+      );
+    })
+  ),
   "withSelect"
 );
 var with_select_default = withSelect;

package/build-module/components/with-select/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/with-select/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent, pure } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport useSelect from '../use-select';\nimport type { SelectFunction, DataRegistry } from '../../types';\n\n/**\n * Higher-order component used to inject state-derived props using registered\n * selectors.\n *\n * @param mapSelectToProps Function called on every state change,\n *                         expected to return object of props to\n *                         merge with the component's own props.\n *\n * @example\n * ```js\n * import { withSelect } from '@wordpress/data';\n * import { store as myCustomStore } from 'my-custom-store';\n *\n * function PriceDisplay( { price, currency } ) {\n * \treturn new Intl.NumberFormat( 'en-US', {\n * \t\tstyle: 'currency',\n * \t\tcurrency,\n * \t} ).format( price );\n * }\n *\n * const HammerPriceDisplay = withSelect( ( select, ownProps ) => {\n * \tconst { getPrice } = select( myCustomStore );\n * \tconst { currency } = ownProps;\n *\n * \treturn {\n * \t\tprice: getPrice( 'hammer', currency ),\n * \t};\n * } )( PriceDisplay );\n *\n * // Rendered in the application:\n * //\n * //  <HammerPriceDisplay currency=\"USD\" />\n * ```\n * In the above example, when `HammerPriceDisplay` is rendered into an\n * application, it will pass the price into the underlying `PriceDisplay`\n * component and update automatically if the price of a hammer ever changes in\n * the store.\n *\n * @return Enhanced component with merged state data props.\n */\nconst withSelect = (\n\tmapSelectToProps: (\n\t\tselect: SelectFunction,\n\t\townProps: Record< string, unknown >,\n\t\tregistry: DataRegistry\n\t) => Record< string, unknown >\n) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) =>\n\t\t\tpure( ( ownProps: Record< string, unknown > ) => {\n\t\t\t\tconst mapSelect = (\n\t\t\t\t\tselect: SelectFunction,\n\t\t\t\t\tregistry: DataRegistry\n\t\t\t\t) => mapSelectToProps( select, ownProps, registry );\n\t\t\t\tconst mergeProps = useSelect( mapSelect );\n\t\t\t\treturn <WrappedComponent { ...ownProps } { ...mergeProps } />;\n\t\t\t} ),\n\t\t'withSelect'\n\t);\n\nexport default withSelect;\n"],
-  "mappings": ";AAGA,SAAS,4BAA4B,YAAY;AAKjD,OAAO,eAAe;AA0DX;AAfX,IAAM,aAAa,CAClB,qBAMA;AAAA,EACC,CAAE,qBACD,KAAM,CAAE,aAAyC;AAChD,UAAM,YAAY,CACjB,QACA,aACI,iBAAkB,QAAQ,UAAU,QAAS;AAClD,UAAM,aAAa,UAAW,SAAU;AACxC,WAAO,oBAAC,oBAAmB,GAAG,UAAa,GAAG,YAAa;AAAA,EAC5D,CAAE;AAAA,EACH;AACD;AAED,IAAO,sBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { forwardRef, memo } from '@wordpress/element';\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport useSelect from '../use-select';\nimport type { SelectFunction, DataRegistry } from '../../types';\n\n/**\n * Higher-order component used to inject state-derived props using registered\n * selectors.\n *\n * @param mapSelectToProps Function called on every state change,\n *                         expected to return object of props to\n *                         merge with the component's own props.\n *\n * @example\n * ```js\n * import { withSelect } from '@wordpress/data';\n * import { store as myCustomStore } from 'my-custom-store';\n *\n * function PriceDisplay( { price, currency } ) {\n * \treturn new Intl.NumberFormat( 'en-US', {\n * \t\tstyle: 'currency',\n * \t\tcurrency,\n * \t} ).format( price );\n * }\n *\n * const HammerPriceDisplay = withSelect( ( select, ownProps ) => {\n * \tconst { getPrice } = select( myCustomStore );\n * \tconst { currency } = ownProps;\n *\n * \treturn {\n * \t\tprice: getPrice( 'hammer', currency ),\n * \t};\n * } )( PriceDisplay );\n *\n * // Rendered in the application:\n * //\n * //  <HammerPriceDisplay currency=\"USD\" />\n * ```\n * In the above example, when `HammerPriceDisplay` is rendered into an\n * application, it will pass the price into the underlying `PriceDisplay`\n * component and update automatically if the price of a hammer ever changes in\n * the store.\n *\n * @return Enhanced component with merged state data props.\n */\nconst withSelect = (\n\tmapSelectToProps: (\n\t\tselect: SelectFunction,\n\t\townProps: Record< string, unknown >,\n\t\tregistry: DataRegistry\n\t) => Record< string, unknown >\n) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) =>\n\t\t\tmemo(\n\t\t\t\tforwardRef( function WithSelect(\n\t\t\t\t\townProps: Record< string, unknown >,\n\t\t\t\t\tref: ForwardedRef< unknown >\n\t\t\t\t) {\n\t\t\t\t\tconst mapSelect = (\n\t\t\t\t\t\tselect: SelectFunction,\n\t\t\t\t\t\tregistry: DataRegistry\n\t\t\t\t\t) => mapSelectToProps( select, ownProps, registry );\n\t\t\t\t\tconst mergeProps = useSelect( mapSelect );\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\t{ ...ownProps }\n\t\t\t\t\t\t\t{ ...mergeProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} )\n\t\t\t),\n\t\t'withSelect'\n\t);\n\nexport default withSelect;\n"],
+  "mappings": ";AAGA,SAAS,kCAAkC;AAC3C,SAAS,YAAY,YAAY;AAMjC,OAAO,eAAe;AA+DhB;AApBN,IAAM,aAAa,CAClB,qBAMA;AAAA,EACC,CAAE,qBACD;AAAA,IACC,WAAY,SAAS,WACpB,UACA,KACC;AACD,YAAM,YAAY,CACjB,QACA,aACI,iBAAkB,QAAQ,UAAU,QAAS;AAClD,YAAM,aAAa,UAAW,SAAU;AACxC,aACC;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA;AAAA,MACN;AAAA,IAEF,CAAE;AAAA,EACH;AAAA,EACD;AACD;AAED,IAAO,sBAAQ;",
   "names": []
 }

package/build-types/components/registry-provider/context.d.ts

@@ -1,10 +1,10 @@
 export declare const Context: import("react").Context<import("../..").DataRegistry>;
 declare const Provider: import("react").Provider<import("../..").DataRegistry>;
 /**
- * A custom react Context consumer exposing the provided `registry` to
+ * A custom React context consumer exposing the provided `registry` to
  * children components. Used along with the RegistryProvider.
  *
- * You can read more about the react context api here:
+ * You can read more about the React context API here:
  * https://react.dev/learn/passing-data-deeply-with-context#step-3-provide-the-context
  *
  * @example
@@ -36,7 +36,7 @@ export declare const RegistryConsumer: import("react").Consumer<import("../..").
  * A custom Context provider for exposing the provided `registry` to children
  * components via a consumer.
  *
- * See <a name="#RegistryConsumer">RegistryConsumer</a> documentation for
+ * See <a href="#registryconsumer">RegistryConsumer</a> documentation for
  * example.
  */
 export default Provider;

package/build-types/components/registry-provider/use-registry.d.ts

@@ -1,16 +1,16 @@
 import type { DataRegistry } from '../../types';
 /**
- * A custom react hook exposing the registry context for use.
+ * A custom React hook exposing the registry context for use.
  *
  * This exposes the `registry` value provided via the
- * <a href="#RegistryProvider">Registry Provider</a> to a component implementing
+ * <a href="#registryprovider">Registry Provider</a> to a component implementing
  * this hook.
  *
- * It acts similarly to the `useContext` react hook.
+ * It acts similarly to the `useContext` React hook.
  *
  * Note: Generally speaking, `useRegistry` is a low level hook that in most cases
  * won't be needed for implementation. Most interactions with the `@wordpress/data`
- * API can be performed via the `useSelect` hook,  or the `withSelect` and
+ * API can be performed via the `useSelect` hook, or the `withSelect` and
  * `withDispatch` higher order components.
  *
  * @example
@@ -36,7 +36,7 @@ import type { DataRegistry } from '../../types';
  * };
  * ```
  *
- * @return A custom react hook exposing the registry context value.
+ * @return A custom React hook exposing the registry context value.
  */
 export default function useRegistry(): DataRegistry;
 //# sourceMappingURL=use-registry.d.ts.map

package/build-types/components/with-select/index.d.ts

@@ -39,6 +39,6 @@ import type { SelectFunction, DataRegistry } from '../../types';
  *
  * @return Enhanced component with merged state data props.
  */
-declare const withSelect: (mapSelectToProps: (select: SelectFunction, ownProps: Record<string, unknown>, registry: DataRegistry) => Record<string, unknown>) => (Inner: import("react").ComponentType<any>) => import("react").ComponentType<Record<string, unknown>>;
+declare const withSelect: (mapSelectToProps: (select: SelectFunction, ownProps: Record<string, unknown>, registry: DataRegistry) => Record<string, unknown>) => (Inner: import("react").ComponentType<any>) => import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<Record<string, unknown>, "ref"> & import("react").RefAttributes<unknown>>>;
 export default withSelect;
 //# sourceMappingURL=index.d.ts.map

package/build-types/components/with-select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/with-select/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,QAAA,MAAM,UAAU,qBACG,CACjB,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,EACnC,QAAQ,EAAE,YAAY,KAClB,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,0GAa7B,CAAC;eAEY,UAAU"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/with-select/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,QAAA,MAAM,UAAU,qBACG,CACjB,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,EACnC,QAAQ,EAAE,YAAY,KAClB,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,iNAwB7B,CAAC;eAEY,UAAU"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data",
-	"version": "10.47.0",
+	"version": "10.48.1",
 	"description": "Data module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -40,19 +40,19 @@
 		},
 		"./package.json": "./package.json"
 	},
-	"react-native": "src/index",
 	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@wordpress/compose": "^8.0.0",
-		"@wordpress/deprecated": "^4.47.0",
-		"@wordpress/element": "^7.0.0",
-		"@wordpress/is-shallow-equal": "^5.47.0",
-		"@wordpress/priority-queue": "^3.47.0",
-		"@wordpress/private-apis": "^1.47.0",
-		"@wordpress/redux-routine": "^5.47.0",
-		"deepmerge": "^4.3.0",
+		"@types/react": "^18.3.27",
+		"@wordpress/compose": "^8.1.1",
+		"@wordpress/deprecated": "^4.48.1",
+		"@wordpress/element": "^8.0.1",
+		"@wordpress/is-shallow-equal": "^5.48.1",
+		"@wordpress/priority-queue": "^3.48.1",
+		"@wordpress/private-apis": "^1.48.1",
+		"@wordpress/redux-routine": "^5.48.1",
+		"deepmerge": "^4.3.1",
 		"equivalent-key-map": "^0.2.2",
 		"is-plain-object": "^5.0.0",
 		"is-promise": "^4.0.0",
@@ -61,13 +61,16 @@
 		"use-memo-one": "^1.1.1"
 	},
 	"devDependencies": {
-		"deep-freeze": "0.0.1"
+		"@testing-library/dom": "^10.4.1",
+		"@testing-library/react": "^16.3.2",
+		"@testing-library/user-event": "^14.6.1",
+		"deep-freeze": "^0.0.1"
 	},
 	"peerDependencies": {
-		"react": "^19.2.4"
+		"react": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d653c5fd6161571a0c2ebde28553d6e25624eacc"
+	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
 }

package/src/components/registry-provider/context.ts

@@ -14,10 +14,10 @@ Context.displayName = 'RegistryProviderContext';
 const { Consumer, Provider } = Context;
 
 /**
- * A custom react Context consumer exposing the provided `registry` to
+ * A custom React context consumer exposing the provided `registry` to
  * children components. Used along with the RegistryProvider.
  *
- * You can read more about the react context api here:
+ * You can read more about the React context API here:
  * https://react.dev/learn/passing-data-deeply-with-context#step-3-provide-the-context
  *
  * @example
@@ -50,7 +50,7 @@ export const RegistryConsumer = Consumer;
  * A custom Context provider for exposing the provided `registry` to children
  * components via a consumer.
  *
- * See <a name="#RegistryConsumer">RegistryConsumer</a> documentation for
+ * See <a href="#registryconsumer">RegistryConsumer</a> documentation for
  * example.
  */
 export default Provider;

package/src/components/registry-provider/use-registry.ts

@@ -10,17 +10,17 @@ import { Context } from './context';
 import type { DataRegistry } from '../../types';
 
 /**
- * A custom react hook exposing the registry context for use.
+ * A custom React hook exposing the registry context for use.
  *
  * This exposes the `registry` value provided via the
- * <a href="#RegistryProvider">Registry Provider</a> to a component implementing
+ * <a href="#registryprovider">Registry Provider</a> to a component implementing
  * this hook.
  *
- * It acts similarly to the `useContext` react hook.
+ * It acts similarly to the `useContext` React hook.
  *
  * Note: Generally speaking, `useRegistry` is a low level hook that in most cases
  * won't be needed for implementation. Most interactions with the `@wordpress/data`
- * API can be performed via the `useSelect` hook,  or the `withSelect` and
+ * API can be performed via the `useSelect` hook, or the `withSelect` and
  * `withDispatch` higher order components.
  *
  * @example
@@ -46,7 +46,7 @@ import type { DataRegistry } from '../../types';
  * };
  * ```
  *
- * @return A custom react hook exposing the registry context value.
+ * @return A custom React hook exposing the registry context value.
  */
 export default function useRegistry(): DataRegistry {
 	return useContext( Context );

package/src/components/use-select/test/suspense.js

@@ -6,13 +6,13 @@ import { render, screen } from '@testing-library/react';
 /**
  * WordPress dependencies
  */
-import { Component, Suspense } from '@wordpress/element';
 import {
 	createRegistry,
 	createReduxStore,
 	useSuspenseSelect,
 	RegistryProvider,
 } from '@wordpress/data';
+import { Component, Suspense } from '@wordpress/element';
 
 function createRegistryWithStore() {
 	const initialState = {
@@ -110,12 +110,10 @@ describe( 'useSuspenseSelect', () => {
 		render( <App /> );
 		await screen.findByLabelText( 'loaded' );
 
-		// Verify there were 4 attempts to render:
-		// - initial render with `getToken` not being resolved and suspending, rendering fallback;
-		// - second render for sibling prerendering which collects all other suspending promises early;
-		// - third render after `getToken` is resolved and `getData` suspends;
-		// - final fourth render after all data got loaded.
-		expect( attempts ).toBe( 4 );
+		// Verify there were 3 attempts to render. Suspended twice because of
+		// `getToken` and `getData` selectors not being resolved, and then finally
+		// rendered after all data got loaded.
+		expect( attempts ).toBe( 3 );
 		expect( renders ).toBe( 1 );
 	} );
 
@@ -231,23 +229,7 @@ describe( 'useSuspenseSelect', () => {
 		const slowLabel = await screen.findByLabelText( 'slow loaded' );
 		expect( slowLabel ).toHaveTextContent( 'slow' );
 
-		// Verify the number of renders. The reasoning behind is subtle but not that complicated:
-		// - initial render where both `FastUI` and `SlowUI` suspend and fallbacks are rendered;
-		// - second (async) render for sibling prerendering that tries to collect all suspending promises.
-		//   Both `FastUI` and `SlowUI` suspend again but this time the result is not committed, its purpose
-		//   was just to collect suspending promises.
-		// - `FastUI` renders for third time after its suspended promise is resolved. However, this render
-		//   is _not_ committed because of "suspense fallback throttling". The render is delayed/throttled for 300ms
-		//   so that the user doesn't see too many and too fast UI flashes. The fallback continues to be rendered.
-		// - `SlowUI` suspended promise is resolved and a third render is triggered. However, as the `FastUI` render
-		//   is not yet committed, a _fourth_ render is triggered, to make sure that we'll be committing the most
-		//   up-to-date state of the `FastUI` component.
-		//
-		// The above explains why there are 4 renders of `FastUI` and 3 renders of `SlowUI`. The non-obvious part
-		// is explained by a combination of two React features:
-		// - sibling prerendering that triggers an extra rerender after one component suspends;
-		// - fallback throttling that delays commit by 300ms and triggers an extra rerender.
-		expect( FastUI ).toHaveBeenCalledTimes( 4 );
-		expect( SlowUI ).toHaveBeenCalledTimes( 3 );
+		expect( FastUI ).toHaveBeenCalledTimes( 2 );
+		expect( SlowUI ).toHaveBeenCalledTimes( 2 );
 	} );
 } );

package/src/components/with-select/index.tsx

@@ -1,7 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { createHigherOrderComponent, pure } from '@wordpress/compose';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { forwardRef, memo } from '@wordpress/element';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -58,14 +60,25 @@ const withSelect = (
 ) =>
 	createHigherOrderComponent(
 		( WrappedComponent ) =>
-			pure( ( ownProps: Record< string, unknown > ) => {
-				const mapSelect = (
-					select: SelectFunction,
-					registry: DataRegistry
-				) => mapSelectToProps( select, ownProps, registry );
-				const mergeProps = useSelect( mapSelect );
-				return <WrappedComponent { ...ownProps } { ...mergeProps } />;
-			} ),
+			memo(
+				forwardRef( function WithSelect(
+					ownProps: Record< string, unknown >,
+					ref: ForwardedRef< unknown >
+				) {
+					const mapSelect = (
+						select: SelectFunction,
+						registry: DataRegistry
+					) => mapSelectToProps( select, ownProps, registry );
+					const mergeProps = useSelect( mapSelect );
+					return (
+						<WrappedComponent
+							ref={ ref }
+							{ ...ownProps }
+							{ ...mergeProps }
+						/>
+					);
+				} )
+			),
 		'withSelect'
 	);
 

package/src/components/with-select/test/index.js

@@ -8,7 +8,7 @@ import userEvent from '@testing-library/user-event';
  * WordPress dependencies
  */
 import { compose } from '@wordpress/compose';
-import { Component } from '@wordpress/element';
+import { Component, createRef, forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -626,5 +626,35 @@ describe( 'withSelect', () => {
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 2 );
 		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'second' );
 	} );
+
+	it( 'forwards refs to a function component wrapped with withSelect', () => {
+		const registry = createRegistry();
+		registry.registerStore( 'demo', {
+			reducer: ( state = 'value' ) => state,
+			selectors: {
+				getValue: ( state ) => state,
+			},
+		} );
+
+		const OriginalComponent = forwardRef( ( { value }, ref ) => (
+			<div ref={ ref } role="status">
+				{ value }
+			</div>
+		) );
+
+		const DataBoundComponent = withSelect( ( _select ) => ( {
+			value: _select( 'demo' ).getValue(),
+		} ) )( OriginalComponent );
+
+		const ref = createRef();
+
+		render(
+			<RegistryProvider value={ registry }>
+				<DataBoundComponent ref={ ref } />
+			</RegistryProvider>
+		);
+
+		expect( ref.current ).toBe( screen.getByRole( 'status' ) );
+	} );
 } );
 /* eslint-enable @wordpress/wp-global-usage */