@wordpress/element 6.46.0 → 7.0.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 7.0.0 (2026-05-27)
+
+### Breaking Changes
+
+-   Updated dependencies to React 19.2.4 ([#61521](https://github.com/WordPress/gutenberg/pull/61521)).
+-   Removed the `render`, `hydrate` and `unmountComponentAtNode` exports that have been deprecated since WordPress 6.2 after upgrade to React 18 ([#61521](https://github.com/WordPress/gutenberg/pull/61521)).
+
+### New Features
+
+-   Added new `react` exports: `Activity`, `use`, `useActionState`, `useEffectEvent`, and `useOptimistic` ([#61521](https://github.com/WordPress/gutenberg/pull/61521)).
+-   Added new `react-dom` exports: `useFormStatus`, `preconnect`, `prefetchDNS`, `preinit`, `preinitModule`, `preload`, and `preloadModule` ([#61521](https://github.com/WordPress/gutenberg/pull/61521)).
+
 ## 6.46.0 (2026-05-14)
 
 ## 6.45.0 (2026-04-29)

package/README.md

@@ -27,6 +27,18 @@ The offerings of any framework necessarily become more complex as these requirem
 
 <!-- START TOKEN(Autogenerated API docs) -->
 
+### Activity
+
+Hide and show parts of the UI while preserving state.
+
+_Related_
+
+-   <https://react.dev/reference/react/Activity>
+
+_Changelog_
+
+`7.1.0`
+
 ### Children
 
 Object that provides utilities for dealing with React children.
@@ -151,11 +163,17 @@ _Changelog_
 
 ### findDOMNode
 
-Finds the dom node of a React component.
+> **Deprecated** since WordPress 7.1.0. Use DOM refs instead.
+
+Finds the DOM node of a React component instance.
+
+_Related_
+
+-   <https://react.dev/reference/react-dom/findDOMNode>
 
 _Parameters_
 
--   _component_ `React.ComponentType`: Component's instance.
+-   _instance_ `any`: Component's instance.
 
 ### flushSync
 
@@ -181,16 +199,6 @@ _Returns_
 
 A component which renders its children without any wrapping element.
 
-### hydrate
-
-> **Deprecated** since WordPress 6.2.0. Use `hydrateRoot` instead.
-
-Hydrates a given element into the target DOM node.
-
-_Related_
-
--   <https://react.dev/reference/react-dom/hydrate>
-
 ### hydrateRoot
 
 Creates a new React root for the target DOM node and hydrates it with a pre-generated markup.
@@ -262,6 +270,78 @@ const placeholderLabel = Platform.select( {
 } );
 ```
 
+### preconnect
+
+Eagerly connect to a server that you expect to load resources from.
+
+_Related_
+
+-   <https://react.dev/reference/react-dom/preconnect>
+
+_Changelog_
+
+`7.1.0`
+
+### prefetchDNS
+
+Eagerly look up the IP of a server that you expect to load resources from.
+
+_Related_
+
+-   <https://react.dev/reference/react-dom/prefetchDNS>
+
+_Changelog_
+
+`7.1.0`
+
+### preinit
+
+Eagerly fetch and evaluate a stylesheet or external script.
+
+_Related_
+
+-   <https://react.dev/reference/react-dom/preinit>
+
+_Changelog_
+
+`7.1.0`
+
+### preinitModule
+
+Eagerly fetch and evaluate an ESM module.
+
+_Related_
+
+-   <https://react.dev/reference/react-dom/preinitModule>
+
+_Changelog_
+
+`7.1.0`
+
+### preload
+
+Eagerly fetch a resource such as a stylesheet, font, or external script.
+
+_Related_
+
+-   <https://react.dev/reference/react-dom/preload>
+
+_Changelog_
+
+`7.1.0`
+
+### preloadModule
+
+Eagerly fetch an ESM module that you expect to use.
+
+_Related_
+
+-   <https://react.dev/reference/react-dom/preloadModule>
+
+_Changelog_
+
+`7.1.0`
+
 ### PureComponent
 
 _Related_
@@ -296,16 +376,6 @@ _Returns_
 
 -   Dangerously-rendering component.
 
-### render
-
-> **Deprecated** since WordPress 6.2.0. Use `createRoot` instead.
-
-Renders a given element into the target DOM node.
-
-_Related_
-
--   <https://react.dev/reference/react-dom/render>
-
 ### renderToString
 
 Serializes a React element to string.
@@ -345,15 +415,29 @@ _Returns_
 
 -   `ReactNode`: The updated children object.
 
-### unmountComponentAtNode
+### use
+
+Read the value of a resource like a Promise or context.
 
-> **Deprecated** since WordPress 6.2.0. Use `root.unmount()` instead.
+_Related_
 
-Removes any mounted element from the target DOM node.
+-   <https://react.dev/reference/react/use>
+
+_Changelog_
+
+`7.1.0`
+
+### useActionState
+
+Manage state based on the result of a form action.
 
 _Related_
 
--   <https://react.dev/reference/react-dom/unmountComponentAtNode>
+-   <https://react.dev/reference/react/useActionState>
+
+_Changelog_
+
+`7.1.0`
 
 ### useCallback
 
@@ -385,6 +469,30 @@ _Related_
 
 -   <https://react.dev/reference/react/useEffect>
 
+### useEffectEvent
+
+Extract non-reactive logic from an Effect into an Effect Event.
+
+_Related_
+
+-   <https://react.dev/reference/react/useEffectEvent>
+
+_Changelog_
+
+`7.1.0`
+
+### useFormStatus
+
+Read the status information of the parent form.
+
+_Related_
+
+-   <https://react.dev/reference/react-dom/hooks/useFormStatus>
+
+_Changelog_
+
+`7.1.0`
+
 ### useId
 
 _Related_
@@ -415,6 +523,18 @@ _Related_
 
 -   <https://react.dev/reference/react/useMemo>
 
+### useOptimistic
+
+Show a different state while an async action is underway.
+
+_Related_
+
+-   <https://react.dev/reference/react/useOptimistic>
+
+_Changelog_
+
+`7.1.0`
+
 ### useReducer
 
 _Related_

package/build/find-dom-node.cjs

@@ -0,0 +1,99 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/element/src/find-dom-node.ts
+var find_dom_node_exports = {};
+__export(find_dom_node_exports, {
+  default: () => findDOMNode
+});
+module.exports = __toCommonJS(find_dom_node_exports);
+var import_deprecated = __toESM(require("@wordpress/deprecated"));
+var internalsKey = "_reactInternals";
+var HostComponent = 5;
+var HostText = 6;
+function findCurrentFiber(fiber) {
+  if (!fiber.alternate) {
+    return fiber;
+  }
+  let node = fiber;
+  while (node.return) {
+    node = node.return;
+  }
+  if (node.stateNode.current === node) {
+    return fiber;
+  }
+  return fiber.alternate;
+}
+function findHostFiber(fiber) {
+  const current = findCurrentFiber(fiber);
+  if (!current) {
+    return null;
+  }
+  return findHostFiberImpl(current);
+}
+function findHostFiberImpl(fiber) {
+  if (fiber.tag === HostComponent || fiber.tag === HostText) {
+    return fiber;
+  }
+  let child = fiber.child;
+  while (child) {
+    const hostFiber = findHostFiberImpl(child);
+    if (hostFiber) {
+      return hostFiber;
+    }
+    child = child.sibling;
+  }
+  return null;
+}
+function findDOMNode(instance) {
+  (0, import_deprecated.default)("wp.element.findDOMNode", {
+    since: "7.1",
+    alternative: "DOM refs",
+    link: "https://react.dev/reference/react-dom/findDOMNode"
+  });
+  if (instance === null || instance === void 0) {
+    return null;
+  }
+  if (instance.nodeType !== void 0) {
+    return instance;
+  }
+  const fiber = instance[internalsKey];
+  if (fiber === void 0) {
+    if (typeof instance.render === "function") {
+      throw new Error("Unable to find node on an unmounted component.");
+    }
+    const keys = Object.keys(instance).join(",");
+    throw new Error(
+      `Argument appears to not be a ReactComponent. Keys: ${keys}`
+    );
+  }
+  const hostFiber = findHostFiber(fiber);
+  return hostFiber?.stateNode ?? null;
+}
+//# sourceMappingURL=find-dom-node.cjs.map

package/build/find-dom-node.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/find-dom-node.ts"],
+  "sourcesContent": ["import deprecated from '@wordpress/deprecated';\n\nconst internalsKey = '_reactInternals';\n\n// HostComponent fiber tag, represents a DOM element like <div>.\nconst HostComponent = 5;\nconst HostText = 6;\n\nfunction findCurrentFiber( fiber: any ): any {\n\tif ( ! fiber.alternate ) {\n\t\t// First mount \u2014 only one version exists, and it's current.\n\t\treturn fiber;\n\t}\n\n\t// Walk up to the HostRoot to figure out which tree this fiber is on.\n\tlet node = fiber;\n\twhile ( node.return ) {\n\t\tnode = node.return;\n\t}\n\n\t// The root's stateNode.current points to the current tree's root fiber.\n\tif ( node.stateNode.current === node ) {\n\t\t// We walked up the current tree, so `fiber` is already current.\n\t\treturn fiber;\n\t}\n\n\t// We walked up the alternate tree \u2014 switch to the current version.\n\treturn fiber.alternate;\n}\n\nfunction findHostFiber( fiber: any ): any {\n\tconst current = findCurrentFiber( fiber );\n\tif ( ! current ) {\n\t\treturn null;\n\t}\n\treturn findHostFiberImpl( current );\n}\n\nfunction findHostFiberImpl( fiber: any ): any {\n\tif ( fiber.tag === HostComponent || fiber.tag === HostText ) {\n\t\treturn fiber;\n\t}\n\n\tlet child = fiber.child;\n\twhile ( child ) {\n\t\tconst hostFiber = findHostFiberImpl( child );\n\t\tif ( hostFiber ) {\n\t\t\treturn hostFiber;\n\t\t}\n\t\tchild = child.sibling;\n\t}\n\n\treturn null;\n}\n\n/**\n * Finds the DOM node of a React component instance.\n *\n * @deprecated since WordPress 7.1.0. Use DOM refs instead.\n * @see https://react.dev/reference/react-dom/findDOMNode\n *\n * @param      instance Component's instance.\n */\nexport default function findDOMNode( instance: any ): Element | Text | null {\n\tdeprecated( 'wp.element.findDOMNode', {\n\t\tsince: '7.1',\n\t\talternative: 'DOM refs',\n\t\tlink: 'https://react.dev/reference/react-dom/findDOMNode',\n\t} );\n\n\tif ( instance === null || instance === undefined ) {\n\t\treturn null;\n\t}\n\n\tif ( instance.nodeType !== undefined ) {\n\t\treturn instance as Element | Text;\n\t}\n\n\tconst fiber = instance[ internalsKey ];\n\tif ( fiber === undefined ) {\n\t\tif ( typeof instance.render === 'function' ) {\n\t\t\tthrow new Error( 'Unable to find node on an unmounted component.' );\n\t\t}\n\t\tconst keys = Object.keys( instance ).join( ',' );\n\t\tthrow new Error(\n\t\t\t`Argument appears to not be a ReactComponent. Keys: ${ keys }`\n\t\t);\n\t}\n\n\tconst hostFiber = findHostFiber( fiber );\n\treturn hostFiber?.stateNode ?? null;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AAEvB,IAAM,eAAe;AAGrB,IAAM,gBAAgB;AACtB,IAAM,WAAW;AAEjB,SAAS,iBAAkB,OAAkB;AAC5C,MAAK,CAAE,MAAM,WAAY;AAExB,WAAO;AAAA,EACR;AAGA,MAAI,OAAO;AACX,SAAQ,KAAK,QAAS;AACrB,WAAO,KAAK;AAAA,EACb;AAGA,MAAK,KAAK,UAAU,YAAY,MAAO;AAEtC,WAAO;AAAA,EACR;AAGA,SAAO,MAAM;AACd;AAEA,SAAS,cAAe,OAAkB;AACzC,QAAM,UAAU,iBAAkB,KAAM;AACxC,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AACA,SAAO,kBAAmB,OAAQ;AACnC;AAEA,SAAS,kBAAmB,OAAkB;AAC7C,MAAK,MAAM,QAAQ,iBAAiB,MAAM,QAAQ,UAAW;AAC5D,WAAO;AAAA,EACR;AAEA,MAAI,QAAQ,MAAM;AAClB,SAAQ,OAAQ;AACf,UAAM,YAAY,kBAAmB,KAAM;AAC3C,QAAK,WAAY;AAChB,aAAO;AAAA,IACR;AACA,YAAQ,MAAM;AAAA,EACf;AAEA,SAAO;AACR;AAUe,SAAR,YAA8B,UAAuC;AAC3E,wBAAAA,SAAY,0BAA0B;AAAA,IACrC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACP,CAAE;AAEF,MAAK,aAAa,QAAQ,aAAa,QAAY;AAClD,WAAO;AAAA,EACR;AAEA,MAAK,SAAS,aAAa,QAAY;AACtC,WAAO;AAAA,EACR;AAEA,QAAM,QAAQ,SAAU,YAAa;AACrC,MAAK,UAAU,QAAY;AAC1B,QAAK,OAAO,SAAS,WAAW,YAAa;AAC5C,YAAM,IAAI,MAAO,gDAAiD;AAAA,IACnE;AACA,UAAM,OAAO,OAAO,KAAM,QAAS,EAAE,KAAM,GAAI;AAC/C,UAAM,IAAI;AAAA,MACT,sDAAuD,IAAK;AAAA,IAC7D;AAAA,EACD;AAEA,QAAM,YAAY,cAAe,KAAM;AACvC,SAAO,WAAW,aAAa;AAChC;",
+  "names": ["deprecated"]
+}

package/build/index.cjs

@@ -34,6 +34,7 @@ __export(index_exports, {
   Platform: () => import_platform.default,
   RawHTML: () => import_raw_html.default,
   createInterpolateElement: () => import_create_interpolate_element.default,
+  findDOMNode: () => import_find_dom_node.default,
   renderToString: () => import_serialize.default
 });
 module.exports = __toCommonJS(index_exports);
@@ -44,11 +45,13 @@ __reExport(index_exports, require("./utils.cjs"), module.exports);
 var import_platform = __toESM(require("./platform.cjs"));
 var import_serialize = __toESM(require("./serialize.cjs"));
 var import_raw_html = __toESM(require("./raw-html.cjs"));
+var import_find_dom_node = __toESM(require("./find-dom-node.cjs"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Platform,
   RawHTML,
   createInterpolateElement,
+  findDOMNode,
   renderToString,
   ...require("./react.cjs"),
   ...require("./react-platform.cjs"),

package/build/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["export { default as createInterpolateElement } from './create-interpolate-element';\nexport * from './react';\nexport * from './react-platform';\nexport * from './utils';\nexport { default as Platform } from './platform';\nexport { default as renderToString } from './serialize';\nexport { default as RawHTML } from './raw-html';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wCAAoD;AACpD,0BAAc,wBADd;AAEA,0BAAc,iCAFd;AAGA,0BAAc,wBAHd;AAIA,sBAAoC;AACpC,uBAA0C;AAC1C,sBAAmC;",
+  "sourcesContent": ["export { default as createInterpolateElement } from './create-interpolate-element';\nexport * from './react';\nexport * from './react-platform';\nexport * from './utils';\nexport { default as Platform } from './platform';\nexport { default as renderToString } from './serialize';\nexport { default as RawHTML } from './raw-html';\nexport { default as findDOMNode } from './find-dom-node';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wCAAoD;AACpD,0BAAc,wBADd;AAEA,0BAAc,iCAFd;AAGA,0BAAc,wBAHd;AAIA,sBAAoC;AACpC,uBAA0C;AAC1C,sBAAmC;AACnC,2BAAuC;",
   "names": []
 }

package/build/react-platform.cjs

@@ -22,12 +22,15 @@ var react_platform_exports = {};
 __export(react_platform_exports, {
   createPortal: () => import_react_dom.createPortal,
   createRoot: () => import_client.createRoot,
-  findDOMNode: () => import_react_dom.findDOMNode,
   flushSync: () => import_react_dom.flushSync,
-  hydrate: () => import_react_dom.hydrate,
   hydrateRoot: () => import_client.hydrateRoot,
-  render: () => import_react_dom.render,
-  unmountComponentAtNode: () => import_react_dom.unmountComponentAtNode
+  preconnect: () => import_react_dom.preconnect,
+  prefetchDNS: () => import_react_dom.prefetchDNS,
+  preinit: () => import_react_dom.preinit,
+  preinitModule: () => import_react_dom.preinitModule,
+  preload: () => import_react_dom.preload,
+  preloadModule: () => import_react_dom.preloadModule,
+  useFormStatus: () => import_react_dom.useFormStatus
 });
 module.exports = __toCommonJS(react_platform_exports);
 var import_react_dom = require("react-dom");
@@ -36,11 +39,14 @@ var import_client = require("react-dom/client");
 0 && (module.exports = {
   createPortal,
   createRoot,
-  findDOMNode,
   flushSync,
-  hydrate,
   hydrateRoot,
-  render,
-  unmountComponentAtNode
+  preconnect,
+  prefetchDNS,
+  preinit,
+  preinitModule,
+  preload,
+  preloadModule,
+  useFormStatus
 });
 //# sourceMappingURL=react-platform.cjs.map

package/build/react-platform.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/react-platform.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tcreatePortal,\n\tfindDOMNode,\n\tflushSync,\n\t/* eslint-disable react/no-deprecated */\n\trender,\n\thydrate,\n\tunmountComponentAtNode,\n\t/* eslint-enable react/no-deprecated */\n} from 'react-dom';\nimport { createRoot, hydrateRoot } from 'react-dom/client';\n\n/**\n * Creates a portal into which a component can be rendered.\n *\n * @see https://github.com/facebook/react/issues/10309#issuecomment-318433235\n *\n * @param {React.ReactElement} child     Any renderable child, such as an element,\n *                                       string, or fragment.\n * @param {HTMLElement}        container DOM node into which element should be rendered.\n */\nexport { createPortal };\n\n/**\n * Finds the dom node of a React component.\n *\n * @param {React.ComponentType} component Component's instance.\n */\nexport { findDOMNode };\n\n/**\n * Forces React to flush any updates inside the provided callback synchronously.\n *\n * @param {Function} callback Callback to run synchronously.\n */\nexport { flushSync };\n\n/**\n * Renders a given element into the target DOM node.\n *\n * @deprecated since WordPress 6.2.0. Use `createRoot` instead.\n * @see https://react.dev/reference/react-dom/render\n */\nexport { render };\n\n/**\n * Hydrates a given element into the target DOM node.\n *\n * @deprecated since WordPress 6.2.0. Use `hydrateRoot` instead.\n * @see https://react.dev/reference/react-dom/hydrate\n */\nexport { hydrate };\n\n/**\n * Creates a new React root for the target DOM node.\n *\n * @since 6.2.0 Introduced in WordPress core.\n * @see https://react.dev/reference/react-dom/client/createRoot\n */\nexport { createRoot };\n\n/**\n * Creates a new React root for the target DOM node and hydrates it with a pre-generated markup.\n *\n * @since 6.2.0 Introduced in WordPress core.\n * @see https://react.dev/reference/react-dom/client/hydrateRoot\n */\nexport { hydrateRoot };\n\n/**\n * Removes any mounted element from the target DOM node.\n *\n * @deprecated since WordPress 6.2.0. Use `root.unmount()` instead.\n * @see https://react.dev/reference/react-dom/unmountComponentAtNode\n */\nexport { unmountComponentAtNode };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBASO;AACP,oBAAwC;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tcreatePortal,\n\tflushSync,\n\tpreconnect,\n\tprefetchDNS,\n\tpreinit,\n\tpreinitModule,\n\tpreload,\n\tpreloadModule,\n\tuseFormStatus,\n} from 'react-dom';\nimport { createRoot, hydrateRoot } from 'react-dom/client';\n\n/**\n * Creates a portal into which a component can be rendered.\n *\n * @see https://github.com/facebook/react/issues/10309#issuecomment-318433235\n *\n * @param {React.ReactElement} child     Any renderable child, such as an element,\n *                                       string, or fragment.\n * @param {HTMLElement}        container DOM node into which element should be rendered.\n */\nexport { createPortal };\n\n/**\n * Forces React to flush any updates inside the provided callback synchronously.\n *\n * @param {Function} callback Callback to run synchronously.\n */\nexport { flushSync };\n\n/**\n * Eagerly connect to a server that you expect to load resources from.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react-dom/preconnect\n */\nexport { preconnect };\n\n/**\n * Eagerly look up the IP of a server that you expect to load resources from.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react-dom/prefetchDNS\n */\nexport { prefetchDNS };\n\n/**\n * Eagerly fetch and evaluate a stylesheet or external script.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react-dom/preinit\n */\nexport { preinit };\n\n/**\n * Eagerly fetch and evaluate an ESM module.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react-dom/preinitModule\n */\nexport { preinitModule };\n\n/**\n * Eagerly fetch a resource such as a stylesheet, font, or external script.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react-dom/preload\n */\nexport { preload };\n\n/**\n * Eagerly fetch an ESM module that you expect to use.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react-dom/preloadModule\n */\nexport { preloadModule };\n\n/**\n * Read the status information of the parent form.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react-dom/hooks/useFormStatus\n */\nexport { useFormStatus };\n\n/**\n * Creates a new React root for the target DOM node.\n *\n * @since 6.2.0 Introduced in WordPress core.\n * @see https://react.dev/reference/react-dom/client/createRoot\n */\nexport { createRoot };\n\n/**\n * Creates a new React root for the target DOM node and hydrates it with a pre-generated markup.\n *\n * @since 6.2.0 Introduced in WordPress core.\n * @see https://react.dev/reference/react-dom/client/hydrateRoot\n */\nexport { hydrateRoot };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAUO;AACP,oBAAwC;",
   "names": []
 }

package/build/react.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/element/src/react.ts
 var react_exports = {};
 __export(react_exports, {
+  Activity: () => import_react.Activity,
   Children: () => import_react.Children,
   Component: () => import_react.Component,
   Fragment: () => import_react.Fragment,
@@ -37,16 +38,20 @@ __export(react_exports, {
   memo: () => import_react.memo,
   startTransition: () => import_react.startTransition,
   switchChildrenNodeName: () => switchChildrenNodeName,
+  use: () => import_react.use,
+  useActionState: () => import_react.useActionState,
   useCallback: () => import_react.useCallback,
   useContext: () => import_react.useContext,
   useDebugValue: () => import_react.useDebugValue,
   useDeferredValue: () => import_react.useDeferredValue,
   useEffect: () => import_react.useEffect,
+  useEffectEvent: () => import_react.useEffectEvent,
   useId: () => import_react.useId,
   useImperativeHandle: () => import_react.useImperativeHandle,
   useInsertionEffect: () => import_react.useInsertionEffect,
   useLayoutEffect: () => import_react.useLayoutEffect,
   useMemo: () => import_react.useMemo,
+  useOptimistic: () => import_react.useOptimistic,
   useReducer: () => import_react.useReducer,
   useRef: () => import_react.useRef,
   useState: () => import_react.useState,
@@ -89,6 +94,7 @@ function switchChildrenNodeName(children, nodeName) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Activity,
   Children,
   Component,
   Fragment,
@@ -106,16 +112,20 @@ function switchChildrenNodeName(children, nodeName) {
   memo,
   startTransition,
   switchChildrenNodeName,
+  use,
+  useActionState,
   useCallback,
   useContext,
   useDebugValue,
   useDeferredValue,
   useEffect,
+  useEffectEvent,
   useId,
   useImperativeHandle,
   useInsertionEffect,
   useLayoutEffect,
   useMemo,
+  useOptimistic,
   useReducer,
   useRef,
   useState,

package/build/react.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/react.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n// eslint-disable-next-line @typescript-eslint/no-restricted-imports\nimport {\n\tChildren,\n\tcloneElement,\n\tComponent,\n\tcreateContext,\n\tcreateElement,\n\tcreateRef,\n\tforwardRef,\n\tFragment,\n\tisValidElement,\n\tmemo,\n\tPureComponent,\n\tStrictMode,\n\tuseCallback,\n\tuseContext,\n\tuseDebugValue,\n\tuseDeferredValue,\n\tuseEffect,\n\tuseId,\n\tuseMemo,\n\tuseImperativeHandle,\n\tuseInsertionEffect,\n\tuseLayoutEffect,\n\tuseReducer,\n\tuseRef,\n\tuseState,\n\tuseSyncExternalStore,\n\tuseTransition,\n\tstartTransition,\n\tlazy,\n\tSuspense,\n} from 'react';\nimport type { ReactNode } from 'react';\n\n/**\n * Object containing a React element.\n */\nexport type Element = React.ReactElement;\n\n/**\n * Object containing a React component.\n */\nexport type ComponentType< T = any > = React.ComponentType< T >;\n\n/**\n * Object containing a React synthetic event.\n */\nexport type SyntheticEvent< T = Element > = React.SyntheticEvent< T >;\n\n/**\n * Object containing a React ref object.\n */\nexport type RefObject< T > = React.RefObject< T >;\n\n/**\n * Object containing a React ref callback.\n */\nexport type RefCallback< T > = React.RefCallback< T >;\n\n/**\n * Object containing a React ref.\n */\nexport type Ref< T > = React.Ref< T >;\n\n/**\n * Object that provides utilities for dealing with React children.\n */\nexport { Children };\n\n/**\n * Creates a copy of an element with extended props.\n *\n * @param {Element} element Element\n * @param {?Object} props   Props to apply to cloned element\n *\n * @return {Element} Cloned element.\n */\nexport { cloneElement };\n\n/**\n * A base class to create WordPress Components (Refs, state and lifecycle hooks)\n */\nexport { Component };\n\n/**\n * Creates a context object containing two components: a provider and consumer.\n *\n * @param {Object} defaultValue A default data stored in the context.\n *\n * @return {Object} Context object.\n */\nexport { createContext };\n\n/**\n * Returns a new element of given type. Type can be either a string tag name or\n * another function which itself returns an element.\n *\n * @param {?(string|Function)} type     Tag name or element creator\n * @param {Object}             props    Element properties, either attribute\n *                                      set to apply to DOM node or values to\n *                                      pass through to element creator\n * @param {...Element}         children Descendant elements\n *\n * @return {Element} Element.\n */\nexport { createElement };\n\n/**\n * Returns an object tracking a reference to a rendered element via its\n * `current` property as either a DOMElement or Element, dependent upon the\n * type of element rendered with the ref attribute.\n *\n * @return {Object} Ref object.\n */\nexport { createRef };\n\n/**\n * Component enhancer used to enable passing a ref to its wrapped component.\n * Pass a function argument which receives `props` and `ref` as its arguments,\n * returning an element using the forwarded ref. The return value is a new\n * component which forwards its ref.\n *\n * @param {Function} forwarder Function passed `props` and `ref`, expected to\n *                             return an element.\n *\n * @return {Component} Enhanced component.\n */\nexport { forwardRef };\n\n/**\n * A component which renders its children without any wrapping element.\n */\nexport { Fragment };\n\n/**\n * Checks if an object is a valid React Element.\n *\n * @param {Object} objectToCheck The object to be checked.\n *\n * @return {boolean} true if objectToTest is a valid React Element and false otherwise.\n */\nexport { isValidElement };\n\n/**\n * @see https://react.dev/reference/react/memo\n */\nexport { memo };\n\n/**\n * Component that activates additional checks and warnings for its descendants.\n */\nexport { StrictMode };\n\n/**\n * @see https://react.dev/reference/react/useCallback\n */\nexport { useCallback };\n\n/**\n * @see https://react.dev/reference/react/useContext\n */\nexport { useContext };\n\n/**\n * @see https://react.dev/reference/react/useDebugValue\n */\nexport { useDebugValue };\n\n/**\n * @see https://react.dev/reference/react/useDeferredValue\n */\nexport { useDeferredValue };\n\n/**\n * @see https://react.dev/reference/react/useEffect\n */\nexport { useEffect };\n\n/**\n * @see https://react.dev/reference/react/useId\n */\nexport { useId };\n\n/**\n * @see https://react.dev/reference/react/useImperativeHandle\n */\nexport { useImperativeHandle };\n\n/**\n * @see https://react.dev/reference/react/useInsertionEffect\n */\nexport { useInsertionEffect };\n\n/**\n * @see https://react.dev/reference/react/useLayoutEffect\n */\nexport { useLayoutEffect };\n\n/**\n * @see https://react.dev/reference/react/useMemo\n */\nexport { useMemo };\n\n/**\n * @see https://react.dev/reference/react/useReducer\n */\nexport { useReducer };\n\n/**\n * @see https://react.dev/reference/react/useRef\n */\nexport { useRef };\n\n/**\n * @see https://react.dev/reference/react/useState\n */\nexport { useState };\n\n/**\n * @see https://react.dev/reference/react/useSyncExternalStore\n */\nexport { useSyncExternalStore };\n\n/**\n * @see https://react.dev/reference/react/useTransition\n */\nexport { useTransition };\n\n/**\n * @see https://react.dev/reference/react/startTransition\n */\nexport { startTransition };\n\n/**\n * @see https://react.dev/reference/react/lazy\n */\nexport { lazy };\n\n/**\n * @see https://react.dev/reference/react/Suspense\n */\nexport { Suspense };\n\n/**\n * @see https://react.dev/reference/react/PureComponent\n */\nexport { PureComponent };\n\n/**\n * Concatenate two or more React children objects.\n *\n * @param childrenArguments - Array of children arguments (array of arrays/strings/objects) to concatenate.\n * @return The concatenated value.\n */\nexport function concatChildren(\n\t...childrenArguments: ReactNode[][]\n): ReactNode[] {\n\treturn childrenArguments.reduce< ReactNode[] >(\n\t\t( accumulator, children, i ) => {\n\t\t\tChildren.forEach( children, ( child, j ) => {\n\t\t\t\tif ( isValidElement( child ) && typeof child !== 'string' ) {\n\t\t\t\t\tchild = cloneElement( child, {\n\t\t\t\t\t\tkey: [ i, j ].join(),\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t\taccumulator.push( child );\n\t\t\t} );\n\n\t\t\treturn accumulator;\n\t\t},\n\t\t[]\n\t);\n}\n\n/**\n * Switches the nodeName of all the elements in the children object.\n *\n * @param children Children object.\n * @param nodeName Node name.\n *\n * @return  The updated children object.\n */\nexport function switchChildrenNodeName(\n\tchildren: ReactNode,\n\tnodeName: string\n): ReactNode {\n\treturn (\n\t\tchildren &&\n\t\tChildren.map( children, ( elt, index ) => {\n\t\t\tif ( typeof elt?.valueOf() === 'string' ) {\n\t\t\t\treturn createElement( nodeName, { key: index }, elt );\n\t\t\t}\n\t\t\tif ( ! isValidElement( elt ) ) {\n\t\t\t\treturn elt;\n\t\t\t}\n\n\t\t\tconst { children: childrenProp, ...props } = elt.props;\n\t\t\treturn createElement(\n\t\t\t\tnodeName,\n\t\t\t\t{ key: index, ...props },\n\t\t\t\tchildrenProp\n\t\t\t);\n\t\t} )\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBA+BO;AA+NA,SAAS,kBACZ,mBACW;AACd,SAAO,kBAAkB;AAAA,IACxB,CAAE,aAAa,UAAU,MAAO;AAC/B,4BAAS,QAAS,UAAU,CAAE,OAAO,MAAO;AAC3C,gBAAK,6BAAgB,KAAM,KAAK,OAAO,UAAU,UAAW;AAC3D,sBAAQ,2BAAc,OAAO;AAAA,YAC5B,KAAK,CAAE,GAAG,CAAE,EAAE,KAAK;AAAA,UACpB,CAAE;AAAA,QACH;AAEA,oBAAY,KAAM,KAAM;AAAA,MACzB,CAAE;AAEF,aAAO;AAAA,IACR;AAAA,IACA,CAAC;AAAA,EACF;AACD;AAUO,SAAS,uBACf,UACA,UACY;AACZ,SACC,YACA,sBAAS,IAAK,UAAU,CAAE,KAAK,UAAW;AACzC,QAAK,OAAO,KAAK,QAAQ,MAAM,UAAW;AACzC,iBAAO,4BAAe,UAAU,EAAE,KAAK,MAAM,GAAG,GAAI;AAAA,IACrD;AACA,QAAK,KAAE,6BAAgB,GAAI,GAAI;AAC9B,aAAO;AAAA,IACR;AAEA,UAAM,EAAE,UAAU,cAAc,GAAG,MAAM,IAAI,IAAI;AACjD,eAAO;AAAA,MACN;AAAA,MACA,EAAE,KAAK,OAAO,GAAG,MAAM;AAAA,MACvB;AAAA,IACD;AAAA,EACD,CAAE;AAEJ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n// eslint-disable-next-line @typescript-eslint/no-restricted-imports\nimport {\n\tActivity,\n\tChildren,\n\tcloneElement,\n\tComponent,\n\tcreateContext,\n\tcreateElement,\n\tcreateRef,\n\tforwardRef,\n\tFragment,\n\tisValidElement,\n\tmemo,\n\tPureComponent,\n\tStrictMode,\n\tuse,\n\tuseActionState,\n\tuseCallback,\n\tuseContext,\n\tuseDebugValue,\n\tuseDeferredValue,\n\tuseEffect,\n\tuseEffectEvent,\n\tuseId,\n\tuseMemo,\n\tuseImperativeHandle,\n\tuseInsertionEffect,\n\tuseLayoutEffect,\n\tuseOptimistic,\n\tuseReducer,\n\tuseRef,\n\tuseState,\n\tuseSyncExternalStore,\n\tuseTransition,\n\tstartTransition,\n\tlazy,\n\tSuspense,\n} from 'react';\nimport type { ReactNode } from 'react';\n\n/**\n * Object containing a React element.\n */\nexport type Element = React.ReactElement;\n\n/**\n * Object containing a React component.\n */\nexport type ComponentType< T = any > = React.ComponentType< T >;\n\n/**\n * Object containing a React synthetic event.\n */\nexport type SyntheticEvent< T = Element > = React.SyntheticEvent< T >;\n\n/**\n * Object containing a React ref object.\n */\nexport type RefObject< T > = React.RefObject< T >;\n\n/**\n * Object containing a React ref callback.\n */\nexport type RefCallback< T > = React.RefCallback< T >;\n\n/**\n * Object containing a React ref.\n */\nexport type Ref< T > = React.Ref< T >;\n\n/**\n * Hide and show parts of the UI while preserving state.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react/Activity\n */\nexport { Activity };\n\n/**\n * Object that provides utilities for dealing with React children.\n */\nexport { Children };\n\n/**\n * Creates a copy of an element with extended props.\n *\n * @param {Element} element Element\n * @param {?Object} props   Props to apply to cloned element\n *\n * @return {Element} Cloned element.\n */\nexport { cloneElement };\n\n/**\n * A base class to create WordPress Components (Refs, state and lifecycle hooks)\n */\nexport { Component };\n\n/**\n * Creates a context object containing two components: a provider and consumer.\n *\n * @param {Object} defaultValue A default data stored in the context.\n *\n * @return {Object} Context object.\n */\nexport { createContext };\n\n/**\n * Returns a new element of given type. Type can be either a string tag name or\n * another function which itself returns an element.\n *\n * @param {?(string|Function)} type     Tag name or element creator\n * @param {Object}             props    Element properties, either attribute\n *                                      set to apply to DOM node or values to\n *                                      pass through to element creator\n * @param {...Element}         children Descendant elements\n *\n * @return {Element} Element.\n */\nexport { createElement };\n\n/**\n * Returns an object tracking a reference to a rendered element via its\n * `current` property as either a DOMElement or Element, dependent upon the\n * type of element rendered with the ref attribute.\n *\n * @return {Object} Ref object.\n */\nexport { createRef };\n\n/**\n * Component enhancer used to enable passing a ref to its wrapped component.\n * Pass a function argument which receives `props` and `ref` as its arguments,\n * returning an element using the forwarded ref. The return value is a new\n * component which forwards its ref.\n *\n * @param {Function} forwarder Function passed `props` and `ref`, expected to\n *                             return an element.\n *\n * @return {Component} Enhanced component.\n */\nexport { forwardRef };\n\n/**\n * A component which renders its children without any wrapping element.\n */\nexport { Fragment };\n\n/**\n * Checks if an object is a valid React Element.\n *\n * @param {Object} objectToCheck The object to be checked.\n *\n * @return {boolean} true if objectToTest is a valid React Element and false otherwise.\n */\nexport { isValidElement };\n\n/**\n * @see https://react.dev/reference/react/memo\n */\nexport { memo };\n\n/**\n * Component that activates additional checks and warnings for its descendants.\n */\nexport { StrictMode };\n\n/**\n * Read the value of a resource like a Promise or context.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react/use\n */\nexport { use };\n\n/**\n * Manage state based on the result of a form action.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react/useActionState\n */\nexport { useActionState };\n\n/**\n * @see https://react.dev/reference/react/useCallback\n */\nexport { useCallback };\n\n/**\n * @see https://react.dev/reference/react/useContext\n */\nexport { useContext };\n\n/**\n * @see https://react.dev/reference/react/useDebugValue\n */\nexport { useDebugValue };\n\n/**\n * @see https://react.dev/reference/react/useDeferredValue\n */\nexport { useDeferredValue };\n\n/**\n * @see https://react.dev/reference/react/useEffect\n */\nexport { useEffect };\n\n/**\n * Extract non-reactive logic from an Effect into an Effect Event.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react/useEffectEvent\n */\nexport { useEffectEvent };\n\n/**\n * @see https://react.dev/reference/react/useId\n */\nexport { useId };\n\n/**\n * @see https://react.dev/reference/react/useImperativeHandle\n */\nexport { useImperativeHandle };\n\n/**\n * @see https://react.dev/reference/react/useInsertionEffect\n */\nexport { useInsertionEffect };\n\n/**\n * @see https://react.dev/reference/react/useLayoutEffect\n */\nexport { useLayoutEffect };\n\n/**\n * @see https://react.dev/reference/react/useMemo\n */\nexport { useMemo };\n\n/**\n * Show a different state while an async action is underway.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react/useOptimistic\n */\nexport { useOptimistic };\n\n/**\n * @see https://react.dev/reference/react/useReducer\n */\nexport { useReducer };\n\n/**\n * @see https://react.dev/reference/react/useRef\n */\nexport { useRef };\n\n/**\n * @see https://react.dev/reference/react/useState\n */\nexport { useState };\n\n/**\n * @see https://react.dev/reference/react/useSyncExternalStore\n */\nexport { useSyncExternalStore };\n\n/**\n * @see https://react.dev/reference/react/useTransition\n */\nexport { useTransition };\n\n/**\n * @see https://react.dev/reference/react/startTransition\n */\nexport { startTransition };\n\n/**\n * @see https://react.dev/reference/react/lazy\n */\nexport { lazy };\n\n/**\n * @see https://react.dev/reference/react/Suspense\n */\nexport { Suspense };\n\n/**\n * @see https://react.dev/reference/react/PureComponent\n */\nexport { PureComponent };\n\n/**\n * Concatenate two or more React children objects.\n *\n * @param childrenArguments - Array of children arguments (array of arrays/strings/objects) to concatenate.\n * @return The concatenated value.\n */\nexport function concatChildren(\n\t...childrenArguments: ReactNode[][]\n): ReactNode[] {\n\treturn childrenArguments.reduce< ReactNode[] >(\n\t\t( accumulator, children, i ) => {\n\t\t\tChildren.forEach( children, ( child, j ) => {\n\t\t\t\tif ( isValidElement( child ) && typeof child !== 'string' ) {\n\t\t\t\t\tchild = cloneElement( child, {\n\t\t\t\t\t\tkey: [ i, j ].join(),\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t\taccumulator.push( child );\n\t\t\t} );\n\n\t\t\treturn accumulator;\n\t\t},\n\t\t[]\n\t);\n}\n\n/**\n * Switches the nodeName of all the elements in the children object.\n *\n * @param children Children object.\n * @param nodeName Node name.\n *\n * @return  The updated children object.\n */\nexport function switchChildrenNodeName(\n\tchildren: ReactNode,\n\tnodeName: string\n): ReactNode {\n\treturn (\n\t\tchildren &&\n\t\tChildren.map( children, ( elt, index ) => {\n\t\t\tif ( typeof elt?.valueOf() === 'string' ) {\n\t\t\t\treturn createElement( nodeName, { key: index }, elt );\n\t\t\t}\n\t\t\tif ( ! isValidElement( elt ) ) {\n\t\t\t\treturn elt;\n\t\t\t}\n\n\t\t\tconst { children: childrenProp, ...props } = (\n\t\t\t\telt as React.ReactElement< React.PropsWithChildren< unknown > >\n\t\t\t ).props;\n\t\t\treturn createElement(\n\t\t\t\tnodeName,\n\t\t\t\t{ key: index, ...props },\n\t\t\t\tchildrenProp\n\t\t\t);\n\t\t} )\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAoCO;AAuQA,SAAS,kBACZ,mBACW;AACd,SAAO,kBAAkB;AAAA,IACxB,CAAE,aAAa,UAAU,MAAO;AAC/B,4BAAS,QAAS,UAAU,CAAE,OAAO,MAAO;AAC3C,gBAAK,6BAAgB,KAAM,KAAK,OAAO,UAAU,UAAW;AAC3D,sBAAQ,2BAAc,OAAO;AAAA,YAC5B,KAAK,CAAE,GAAG,CAAE,EAAE,KAAK;AAAA,UACpB,CAAE;AAAA,QACH;AAEA,oBAAY,KAAM,KAAM;AAAA,MACzB,CAAE;AAEF,aAAO;AAAA,IACR;AAAA,IACA,CAAC;AAAA,EACF;AACD;AAUO,SAAS,uBACf,UACA,UACY;AACZ,SACC,YACA,sBAAS,IAAK,UAAU,CAAE,KAAK,UAAW;AACzC,QAAK,OAAO,KAAK,QAAQ,MAAM,UAAW;AACzC,iBAAO,4BAAe,UAAU,EAAE,KAAK,MAAM,GAAG,GAAI;AAAA,IACrD;AACA,QAAK,KAAE,6BAAgB,GAAI,GAAI;AAC9B,aAAO;AAAA,IACR;AAEA,UAAM,EAAE,UAAU,cAAc,GAAG,MAAM,IACxC,IACE;AACH,eAAO;AAAA,MACN;AAAA,MACA,EAAE,KAAK,OAAO,GAAG,MAAM;AAAA,MACvB;AAAA,IACD;AAAA,EACD,CAAE;AAEJ;",
   "names": []
 }

package/build/serialize.cjs

@@ -431,7 +431,9 @@ function renderElement(element, context, legacyContext = {}) {
       return renderChildren(props.children, props.value, legacyContext);
     case Consumer.$$typeof:
       return renderElement(
-        props.children(context || type._currentValue),
+        props.children(
+          context || type._currentValue || type._context._currentValue
+        ),
         context,
         legacyContext
       );