@wordpress/element 6.46.0 → 8.0.0

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 ## Unreleased
 
+## 8.0.0 (2026-06-04)
+
+### Breaking Changes
+
+-   Revert React back to v18 [#78940](https://github.com/WordPress/gutenberg/pull/78940).
+
+## 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

@@ -122,12 +122,7 @@ Creates a portal into which a component can be rendered.
 
 _Related_
 
--   <https://github.com/facebook/react/issues/10309#issuecomment-318433235>
-
-_Parameters_
-
--   _child_ `React.ReactElement`: Any renderable child, such as an element, string, or fragment.
--   _container_ `HTMLElement`: DOM node into which element should be rendered.
+-   <https://react.dev/reference/react-dom/createPortal>
 
 ### createRef
 
@@ -161,9 +156,9 @@ _Parameters_
 
 Forces React to flush any updates inside the provided callback synchronously.
 
-_Parameters_
+_Related_
 
--   _callback_ `Function`: Callback to run synchronously.
+-   <https://react.dev/reference/react-dom/flushSync>
 
 ### forwardRef
 

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"],
+  "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// export {\n// \tfindDOMNode,\n// \trender,\n// \thydrate,\n// \tunmountComponentAtNode,\n// } from './react-polyfill';\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;",
   "names": []
 }

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"],
+  "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://react.dev/reference/react-dom/createPortal\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 * @see https://react.dev/reference/react-dom/flushSync\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;",
   "names": []
 }

package/build/react-polyfill-base.cjs

@@ -0,0 +1,132 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/element/src/react-polyfill-base.ts
+var react_polyfill_base_exports = {};
+__export(react_polyfill_base_exports, {
+  findDOMNode: () => findDOMNode,
+  hydrate: () => hydrate,
+  render: () => render,
+  unmountComponentAtNode: () => unmountComponentAtNode
+});
+module.exports = __toCommonJS(react_polyfill_base_exports);
+var import_react_dom = require("react-dom");
+var import_client = require("react-dom/client");
+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) {
+  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;
+}
+var roots = /* @__PURE__ */ new WeakMap();
+function render(element, container, callback) {
+  let root = roots.get(container);
+  if (!root) {
+    root = (0, import_client.createRoot)(container);
+    roots.set(container, root);
+  }
+  (0, import_react_dom.flushSync)(() => {
+    root.render(element);
+  });
+  if (typeof callback === "function") {
+    callback();
+  }
+}
+function hydrate(element, container, callback) {
+  let root = roots.get(container);
+  if (!root) {
+    root = (0, import_client.hydrateRoot)(container, element);
+    roots.set(container, root);
+  } else {
+    root.render(element);
+  }
+  if (typeof callback === "function") {
+    callback();
+  }
+}
+function unmountComponentAtNode(container) {
+  const root = roots.get(container);
+  if (!root) {
+    return false;
+  }
+  (0, import_react_dom.flushSync)(() => {
+    root.unmount();
+  });
+  roots.delete(container);
+  return true;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  findDOMNode,
+  hydrate,
+  render,
+  unmountComponentAtNode
+});
+//# sourceMappingURL=react-polyfill-base.cjs.map

package/build/react-polyfill-base.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/react-polyfill-base.ts"],
+  "sourcesContent": ["import { flushSync } from 'react-dom';\nimport { createRoot, hydrateRoot } from 'react-dom/client';\nimport type { Root } from 'react-dom/client';\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\nexport function findDOMNode( instance: any ): Element | Text | null {\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\nconst roots = new WeakMap< Element, Root >();\n\nexport function render(\n\telement: React.ReactNode,\n\tcontainer: Element,\n\tcallback?: () => void\n): void {\n\tlet root = roots.get( container );\n\tif ( ! root ) {\n\t\troot = createRoot( container );\n\t\troots.set( container, root );\n\t}\n\n\tflushSync( () => {\n\t\troot.render( element );\n\t} );\n\n\tif ( typeof callback === 'function' ) {\n\t\tcallback();\n\t}\n}\n\nexport function hydrate(\n\telement: React.ReactNode,\n\tcontainer: Element,\n\tcallback?: () => void\n): void {\n\tlet root = roots.get( container );\n\tif ( ! root ) {\n\t\troot = hydrateRoot( container, element );\n\t\troots.set( container, root );\n\t} else {\n\t\troot.render( element );\n\t}\n\n\tif ( typeof callback === 'function' ) {\n\t\tcallback();\n\t}\n}\n\nexport function unmountComponentAtNode( container: Element ): boolean {\n\tconst root = roots.get( container );\n\tif ( ! root ) {\n\t\treturn false;\n\t}\n\n\tflushSync( () => {\n\t\troot.unmount();\n\t} );\n\troots.delete( container );\n\treturn true;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0B;AAC1B,oBAAwC;AAGxC,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;AAEO,SAAS,YAAa,UAAuC;AACnE,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;AAEA,IAAM,QAAQ,oBAAI,QAAyB;AAEpC,SAAS,OACf,SACA,WACA,UACO;AACP,MAAI,OAAO,MAAM,IAAK,SAAU;AAChC,MAAK,CAAE,MAAO;AACb,eAAO,0BAAY,SAAU;AAC7B,UAAM,IAAK,WAAW,IAAK;AAAA,EAC5B;AAEA,kCAAW,MAAM;AAChB,SAAK,OAAQ,OAAQ;AAAA,EACtB,CAAE;AAEF,MAAK,OAAO,aAAa,YAAa;AACrC,aAAS;AAAA,EACV;AACD;AAEO,SAAS,QACf,SACA,WACA,UACO;AACP,MAAI,OAAO,MAAM,IAAK,SAAU;AAChC,MAAK,CAAE,MAAO;AACb,eAAO,2BAAa,WAAW,OAAQ;AACvC,UAAM,IAAK,WAAW,IAAK;AAAA,EAC5B,OAAO;AACN,SAAK,OAAQ,OAAQ;AAAA,EACtB;AAEA,MAAK,OAAO,aAAa,YAAa;AACrC,aAAS;AAAA,EACV;AACD;AAEO,SAAS,uBAAwB,WAA8B;AACrE,QAAM,OAAO,MAAM,IAAK,SAAU;AAClC,MAAK,CAAE,MAAO;AACb,WAAO;AAAA,EACR;AAEA,kCAAW,MAAM;AAChB,SAAK,QAAQ;AAAA,EACd,CAAE;AACF,QAAM,OAAQ,SAAU;AACxB,SAAO;AACR;",
+  "names": []
+}

package/build/react-polyfill.cjs

@@ -0,0 +1,80 @@
+"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/react-polyfill.ts
+var react_polyfill_exports = {};
+__export(react_polyfill_exports, {
+  findDOMNode: () => findDOMNode,
+  hydrate: () => hydrate,
+  render: () => render,
+  unmountComponentAtNode: () => unmountComponentAtNode
+});
+module.exports = __toCommonJS(react_polyfill_exports);
+var import_deprecated = __toESM(require("@wordpress/deprecated"));
+var import_react_polyfill_base = require("./react-polyfill-base.cjs");
+function findDOMNode(instance) {
+  (0, import_deprecated.default)("wp.element.findDOMNode", {
+    since: "7.1",
+    alternative: "DOM refs",
+    link: "https://react.dev/reference/react-dom/findDOMNode"
+  });
+  return (0, import_react_polyfill_base.findDOMNode)(instance);
+}
+function render(element, container, callback) {
+  (0, import_deprecated.default)("wp.element.render", {
+    since: "6.2",
+    alternative: "wp.element.createRoot",
+    link: "https://react.dev/reference/react-dom/client/createRoot"
+  });
+  (0, import_react_polyfill_base.render)(element, container, callback);
+}
+function hydrate(element, container, callback) {
+  (0, import_deprecated.default)("wp.element.hydrate", {
+    since: "6.2",
+    alternative: "wp.element.hydrateRoot",
+    link: "https://react.dev/reference/react-dom/client/hydrateRoot"
+  });
+  (0, import_react_polyfill_base.hydrate)(element, container, callback);
+}
+function unmountComponentAtNode(container) {
+  (0, import_deprecated.default)("wp.element.unmountComponentAtNode", {
+    since: "6.2",
+    alternative: "root.unmount()",
+    link: "https://react.dev/reference/react-dom/client/createRoot#root-unmount"
+  });
+  return (0, import_react_polyfill_base.unmountComponentAtNode)(container);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  findDOMNode,
+  hydrate,
+  render,
+  unmountComponentAtNode
+});
+//# sourceMappingURL=react-polyfill.cjs.map

package/build/react-polyfill.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/react-polyfill.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport {\n\tfindDOMNode as findDOMNodeBase,\n\trender as renderBase,\n\thydrate as hydrateBase,\n\tunmountComponentAtNode as unmountComponentAtNodeBase,\n} from './react-polyfill-base';\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 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\treturn findDOMNodeBase( instance );\n}\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 *\n * @param      element   Element to render.\n * @param      container DOM node into which to render.\n * @param      callback  Optional callback called after render.\n */\nexport function render(\n\telement: React.ReactNode,\n\tcontainer: Element,\n\tcallback?: () => void\n): void {\n\tdeprecated( 'wp.element.render', {\n\t\tsince: '6.2',\n\t\talternative: 'wp.element.createRoot',\n\t\tlink: 'https://react.dev/reference/react-dom/client/createRoot',\n\t} );\n\n\trenderBase( element, container, callback );\n}\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 *\n * @param      element   Element to hydrate.\n * @param      container DOM node to hydrate.\n * @param      callback  Optional callback called after hydration.\n */\nexport function hydrate(\n\telement: React.ReactNode,\n\tcontainer: Element,\n\tcallback?: () => void\n): void {\n\tdeprecated( 'wp.element.hydrate', {\n\t\tsince: '6.2',\n\t\talternative: 'wp.element.hydrateRoot',\n\t\tlink: 'https://react.dev/reference/react-dom/client/hydrateRoot',\n\t} );\n\n\thydrateBase( element, container, callback );\n}\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 *\n * @param      container DOM node in which to unmount.\n * @return Whether the node was unmounted.\n */\nexport function unmountComponentAtNode( container: Element ): boolean {\n\tdeprecated( 'wp.element.unmountComponentAtNode', {\n\t\tsince: '6.2',\n\t\talternative: 'root.unmount()',\n\t\tlink: 'https://react.dev/reference/react-dom/client/createRoot#root-unmount',\n\t} );\n\n\treturn unmountComponentAtNodeBase( container );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAuB;AAKvB,iCAKO;AAUA,SAAS,YAAa,UAAuC;AACnE,wBAAAA,SAAY,0BAA0B;AAAA,IACrC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACP,CAAE;AAEF,aAAO,2BAAAC,aAAiB,QAAS;AAClC;AAYO,SAAS,OACf,SACA,WACA,UACO;AACP,wBAAAD,SAAY,qBAAqB;AAAA,IAChC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACP,CAAE;AAEF,iCAAAE,QAAY,SAAS,WAAW,QAAS;AAC1C;AAYO,SAAS,QACf,SACA,WACA,UACO;AACP,wBAAAF,SAAY,sBAAsB;AAAA,IACjC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACP,CAAE;AAEF,iCAAAG,SAAa,SAAS,WAAW,QAAS;AAC3C;AAWO,SAAS,uBAAwB,WAA8B;AACrE,wBAAAH,SAAY,qCAAqC;AAAA,IAChD,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACP,CAAE;AAEF,aAAO,2BAAAI,wBAA4B,SAAU;AAC9C;",
+  "names": ["deprecated", "findDOMNodeBase", "renderBase", "hydrateBase", "unmountComponentAtNodeBase"]
+}

package/build-module/index.mjs.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"],
+  "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// export {\n// \tfindDOMNode,\n// \trender,\n// \thydrate,\n// \tunmountComponentAtNode,\n// } from './react-polyfill';\n"],
   "mappings": ";AAAA,SAAoB,WAAXA,gBAA2C;AACpD,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAoB,WAAXA,gBAA2B;AACpC,SAAoB,WAAXA,gBAAiC;AAC1C,SAAoB,WAAXA,gBAA0B;",
   "names": ["default"]
 }

package/build-module/react-platform.mjs.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"],
+  "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://react.dev/reference/react-dom/createPortal\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 * @see https://react.dev/reference/react-dom/flushSync\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": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OAEM;AACP,SAAS,YAAY,mBAAmB;",
   "names": []
 }

package/build-module/react-polyfill-base.mjs

@@ -0,0 +1,104 @@
+// packages/element/src/react-polyfill-base.ts
+import { flushSync } from "react-dom";
+import { createRoot, hydrateRoot } from "react-dom/client";
+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) {
+  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;
+}
+var roots = /* @__PURE__ */ new WeakMap();
+function render(element, container, callback) {
+  let root = roots.get(container);
+  if (!root) {
+    root = createRoot(container);
+    roots.set(container, root);
+  }
+  flushSync(() => {
+    root.render(element);
+  });
+  if (typeof callback === "function") {
+    callback();
+  }
+}
+function hydrate(element, container, callback) {
+  let root = roots.get(container);
+  if (!root) {
+    root = hydrateRoot(container, element);
+    roots.set(container, root);
+  } else {
+    root.render(element);
+  }
+  if (typeof callback === "function") {
+    callback();
+  }
+}
+function unmountComponentAtNode(container) {
+  const root = roots.get(container);
+  if (!root) {
+    return false;
+  }
+  flushSync(() => {
+    root.unmount();
+  });
+  roots.delete(container);
+  return true;
+}
+export {
+  findDOMNode,
+  hydrate,
+  render,
+  unmountComponentAtNode
+};
+//# sourceMappingURL=react-polyfill-base.mjs.map

package/build-module/react-polyfill-base.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/react-polyfill-base.ts"],
+  "sourcesContent": ["import { flushSync } from 'react-dom';\nimport { createRoot, hydrateRoot } from 'react-dom/client';\nimport type { Root } from 'react-dom/client';\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\nexport function findDOMNode( instance: any ): Element | Text | null {\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\nconst roots = new WeakMap< Element, Root >();\n\nexport function render(\n\telement: React.ReactNode,\n\tcontainer: Element,\n\tcallback?: () => void\n): void {\n\tlet root = roots.get( container );\n\tif ( ! root ) {\n\t\troot = createRoot( container );\n\t\troots.set( container, root );\n\t}\n\n\tflushSync( () => {\n\t\troot.render( element );\n\t} );\n\n\tif ( typeof callback === 'function' ) {\n\t\tcallback();\n\t}\n}\n\nexport function hydrate(\n\telement: React.ReactNode,\n\tcontainer: Element,\n\tcallback?: () => void\n): void {\n\tlet root = roots.get( container );\n\tif ( ! root ) {\n\t\troot = hydrateRoot( container, element );\n\t\troots.set( container, root );\n\t} else {\n\t\troot.render( element );\n\t}\n\n\tif ( typeof callback === 'function' ) {\n\t\tcallback();\n\t}\n}\n\nexport function unmountComponentAtNode( container: Element ): boolean {\n\tconst root = roots.get( container );\n\tif ( ! root ) {\n\t\treturn false;\n\t}\n\n\tflushSync( () => {\n\t\troot.unmount();\n\t} );\n\troots.delete( container );\n\treturn true;\n}\n"],
+  "mappings": ";AAAA,SAAS,iBAAiB;AAC1B,SAAS,YAAY,mBAAmB;AAGxC,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;AAEO,SAAS,YAAa,UAAuC;AACnE,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;AAEA,IAAM,QAAQ,oBAAI,QAAyB;AAEpC,SAAS,OACf,SACA,WACA,UACO;AACP,MAAI,OAAO,MAAM,IAAK,SAAU;AAChC,MAAK,CAAE,MAAO;AACb,WAAO,WAAY,SAAU;AAC7B,UAAM,IAAK,WAAW,IAAK;AAAA,EAC5B;AAEA,YAAW,MAAM;AAChB,SAAK,OAAQ,OAAQ;AAAA,EACtB,CAAE;AAEF,MAAK,OAAO,aAAa,YAAa;AACrC,aAAS;AAAA,EACV;AACD;AAEO,SAAS,QACf,SACA,WACA,UACO;AACP,MAAI,OAAO,MAAM,IAAK,SAAU;AAChC,MAAK,CAAE,MAAO;AACb,WAAO,YAAa,WAAW,OAAQ;AACvC,UAAM,IAAK,WAAW,IAAK;AAAA,EAC5B,OAAO;AACN,SAAK,OAAQ,OAAQ;AAAA,EACtB;AAEA,MAAK,OAAO,aAAa,YAAa;AACrC,aAAS;AAAA,EACV;AACD;AAEO,SAAS,uBAAwB,WAA8B;AACrE,QAAM,OAAO,MAAM,IAAK,SAAU;AAClC,MAAK,CAAE,MAAO;AACb,WAAO;AAAA,EACR;AAEA,YAAW,MAAM;AAChB,SAAK,QAAQ;AAAA,EACd,CAAE;AACF,QAAM,OAAQ,SAAU;AACxB,SAAO;AACR;",
+  "names": []
+}

package/build-module/react-polyfill.mjs

@@ -0,0 +1,47 @@
+// packages/element/src/react-polyfill.ts
+import deprecated from "@wordpress/deprecated";
+import {
+  findDOMNode as findDOMNodeBase,
+  render as renderBase,
+  hydrate as hydrateBase,
+  unmountComponentAtNode as unmountComponentAtNodeBase
+} from "./react-polyfill-base.mjs";
+function findDOMNode(instance) {
+  deprecated("wp.element.findDOMNode", {
+    since: "7.1",
+    alternative: "DOM refs",
+    link: "https://react.dev/reference/react-dom/findDOMNode"
+  });
+  return findDOMNodeBase(instance);
+}
+function render(element, container, callback) {
+  deprecated("wp.element.render", {
+    since: "6.2",
+    alternative: "wp.element.createRoot",
+    link: "https://react.dev/reference/react-dom/client/createRoot"
+  });
+  renderBase(element, container, callback);
+}
+function hydrate(element, container, callback) {
+  deprecated("wp.element.hydrate", {
+    since: "6.2",
+    alternative: "wp.element.hydrateRoot",
+    link: "https://react.dev/reference/react-dom/client/hydrateRoot"
+  });
+  hydrateBase(element, container, callback);
+}
+function unmountComponentAtNode(container) {
+  deprecated("wp.element.unmountComponentAtNode", {
+    since: "6.2",
+    alternative: "root.unmount()",
+    link: "https://react.dev/reference/react-dom/client/createRoot#root-unmount"
+  });
+  return unmountComponentAtNodeBase(container);
+}
+export {
+  findDOMNode,
+  hydrate,
+  render,
+  unmountComponentAtNode
+};
+//# sourceMappingURL=react-polyfill.mjs.map

package/build-module/react-polyfill.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/react-polyfill.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport {\n\tfindDOMNode as findDOMNodeBase,\n\trender as renderBase,\n\thydrate as hydrateBase,\n\tunmountComponentAtNode as unmountComponentAtNodeBase,\n} from './react-polyfill-base';\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 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\treturn findDOMNodeBase( instance );\n}\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 *\n * @param      element   Element to render.\n * @param      container DOM node into which to render.\n * @param      callback  Optional callback called after render.\n */\nexport function render(\n\telement: React.ReactNode,\n\tcontainer: Element,\n\tcallback?: () => void\n): void {\n\tdeprecated( 'wp.element.render', {\n\t\tsince: '6.2',\n\t\talternative: 'wp.element.createRoot',\n\t\tlink: 'https://react.dev/reference/react-dom/client/createRoot',\n\t} );\n\n\trenderBase( element, container, callback );\n}\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 *\n * @param      element   Element to hydrate.\n * @param      container DOM node to hydrate.\n * @param      callback  Optional callback called after hydration.\n */\nexport function hydrate(\n\telement: React.ReactNode,\n\tcontainer: Element,\n\tcallback?: () => void\n): void {\n\tdeprecated( 'wp.element.hydrate', {\n\t\tsince: '6.2',\n\t\talternative: 'wp.element.hydrateRoot',\n\t\tlink: 'https://react.dev/reference/react-dom/client/hydrateRoot',\n\t} );\n\n\thydrateBase( element, container, callback );\n}\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 *\n * @param      container DOM node in which to unmount.\n * @return Whether the node was unmounted.\n */\nexport function unmountComponentAtNode( container: Element ): boolean {\n\tdeprecated( 'wp.element.unmountComponentAtNode', {\n\t\tsince: '6.2',\n\t\talternative: 'root.unmount()',\n\t\tlink: 'https://react.dev/reference/react-dom/client/createRoot#root-unmount',\n\t} );\n\n\treturn unmountComponentAtNodeBase( container );\n}\n"],
+  "mappings": ";AAGA,OAAO,gBAAgB;AAKvB;AAAA,EACC,eAAe;AAAA,EACf,UAAU;AAAA,EACV,WAAW;AAAA,EACX,0BAA0B;AAAA,OACpB;AAUA,SAAS,YAAa,UAAuC;AACnE,aAAY,0BAA0B;AAAA,IACrC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACP,CAAE;AAEF,SAAO,gBAAiB,QAAS;AAClC;AAYO,SAAS,OACf,SACA,WACA,UACO;AACP,aAAY,qBAAqB;AAAA,IAChC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACP,CAAE;AAEF,aAAY,SAAS,WAAW,QAAS;AAC1C;AAYO,SAAS,QACf,SACA,WACA,UACO;AACP,aAAY,sBAAsB;AAAA,IACjC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACP,CAAE;AAEF,cAAa,SAAS,WAAW,QAAS;AAC3C;AAWO,SAAS,uBAAwB,WAA8B;AACrE,aAAY,qCAAqC;AAAA,IAChD,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACP,CAAE;AAEF,SAAO,2BAA4B,SAAU;AAC9C;",
+  "names": []
+}

package/build-types/react-platform.d.ts

@@ -6,11 +6,7 @@ import { createRoot, hydrateRoot } from 'react-dom/client';
 /**
  * Creates a portal into which a component can be rendered.
  *
- * @see https://github.com/facebook/react/issues/10309#issuecomment-318433235
- *
- * @param {React.ReactElement} child     Any renderable child, such as an element,
- *                                       string, or fragment.
- * @param {HTMLElement}        container DOM node into which element should be rendered.
+ * @see https://react.dev/reference/react-dom/createPortal
  */
 export { createPortal };
 /**
@@ -22,7 +18,7 @@ export { findDOMNode };
 /**
  * Forces React to flush any updates inside the provided callback synchronously.
  *
- * @param {Function} callback Callback to run synchronously.
+ * @see https://react.dev/reference/react-dom/flushSync
  */
 export { flushSync };
 /**

package/build-types/react-platform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react-platform.d.ts","sourceRoot":"","sources":["../src/react-platform.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EACN,YAAY,EACZ,WAAW,EACX,SAAS,EAET,MAAM,EACN,OAAO,EACP,sBAAsB,EAEtB,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE3D;;;;;;;;GAQG;AACH,OAAO,EAAE,YAAY,EAAE,CAAC;AAExB;;;;GAIG;AACH,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB;;;;GAIG;AACH,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB;;;;;GAKG;AACH,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB;;;;;GAKG;AACH,OAAO,EAAE,OAAO,EAAE,CAAC;AAEnB;;;;;GAKG;AACH,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB;;;;;GAKG;AACH,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB;;;;;GAKG;AACH,OAAO,EAAE,sBAAsB,EAAE,CAAC"}
+{"version":3,"file":"react-platform.d.ts","sourceRoot":"","sources":["../src/react-platform.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EACN,YAAY,EACZ,WAAW,EACX,SAAS,EAET,MAAM,EACN,OAAO,EACP,sBAAsB,EAEtB,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE3D;;;;GAIG;AACH,OAAO,EAAE,YAAY,EAAE,CAAC;AAExB;;;;GAIG;AACH,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB;;;;GAIG;AACH,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB;;;;;GAKG;AACH,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB;;;;;GAKG;AACH,OAAO,EAAE,OAAO,EAAE,CAAC;AAEnB;;;;;GAKG;AACH,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB;;;;;GAKG;AACH,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB;;;;;GAKG;AACH,OAAO,EAAE,sBAAsB,EAAE,CAAC"}

package/build-types/react-polyfill-base.d.ts

@@ -0,0 +1,5 @@
+export declare function findDOMNode(instance: any): Element | Text | null;
+export declare function render(element: React.ReactNode, container: Element, callback?: () => void): void;
+export declare function hydrate(element: React.ReactNode, container: Element, callback?: () => void): void;
+export declare function unmountComponentAtNode(container: Element): boolean;
+//# sourceMappingURL=react-polyfill-base.d.ts.map

package/build-types/react-polyfill-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-polyfill-base.d.ts","sourceRoot":"","sources":["../src/react-polyfill-base.ts"],"names":[],"mappings":"AAyDA,wBAAgB,WAAW,CAAE,QAAQ,EAAE,GAAG,GAAI,OAAO,GAAG,IAAI,GAAG,IAAI,CAsBlE;AAID,wBAAgB,MAAM,CACrB,OAAO,EAAE,KAAK,CAAC,SAAS,EACxB,SAAS,EAAE,OAAO,EAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,GACnB,IAAI,CAcN;AAED,wBAAgB,OAAO,CACtB,OAAO,EAAE,KAAK,CAAC,SAAS,EACxB,SAAS,EAAE,OAAO,EAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,GACnB,IAAI,CAYN;AAED,wBAAgB,sBAAsB,CAAE,SAAS,EAAE,OAAO,GAAI,OAAO,CAWpE"}

package/build-types/react-polyfill.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Finds the DOM node of a React component instance.
+ *
+ * @deprecated since WordPress 7.1.0. Use DOM refs instead.
+ * @see https://react.dev/reference/react-dom/findDOMNode
+ *
+ * @param      instance Component's instance.
+ */
+export declare function findDOMNode(instance: any): Element | Text | null;
+/**
+ * Renders a given element into the target DOM node.
+ *
+ * @deprecated since WordPress 6.2.0. Use `createRoot` instead.
+ * @see https://react.dev/reference/react-dom/render
+ *
+ * @param      element   Element to render.
+ * @param      container DOM node into which to render.
+ * @param      callback  Optional callback called after render.
+ */
+export declare function render(element: React.ReactNode, container: Element, callback?: () => void): void;
+/**
+ * Hydrates a given element into the target DOM node.
+ *
+ * @deprecated since WordPress 6.2.0. Use `hydrateRoot` instead.
+ * @see https://react.dev/reference/react-dom/hydrate
+ *
+ * @param      element   Element to hydrate.
+ * @param      container DOM node to hydrate.
+ * @param      callback  Optional callback called after hydration.
+ */
+export declare function hydrate(element: React.ReactNode, container: Element, callback?: () => void): void;
+/**
+ * Removes any mounted element from the target DOM node.
+ *
+ * @deprecated since WordPress 6.2.0. Use `root.unmount()` instead.
+ * @see https://react.dev/reference/react-dom/unmountComponentAtNode
+ *
+ * @param      container DOM node in which to unmount.
+ * @return Whether the node was unmounted.
+ */
+export declare function unmountComponentAtNode(container: Element): boolean;
+//# sourceMappingURL=react-polyfill.d.ts.map

package/build-types/react-polyfill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-polyfill.d.ts","sourceRoot":"","sources":["../src/react-polyfill.ts"],"names":[],"mappings":"AAeA;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAE,QAAQ,EAAE,GAAG,GAAI,OAAO,GAAG,IAAI,GAAG,IAAI,CAQlE;AAED;;;;;;;;;GASG;AACH,wBAAgB,MAAM,CACrB,OAAO,EAAE,KAAK,CAAC,SAAS,EACxB,SAAS,EAAE,OAAO,EAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,GACnB,IAAI,CAQN;AAED;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CACtB,OAAO,EAAE,KAAK,CAAC,SAAS,EACxB,SAAS,EAAE,OAAO,EAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,GACnB,IAAI,CAQN;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAE,SAAS,EAAE,OAAO,GAAI,OAAO,CAQpE"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/element",
-	"version": "6.46.0",
+	"version": "8.0.0",
 	"description": "Element React module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,6 +38,7 @@
 			"import": "./build-module/index.mjs",
 			"require": "./build/index.cjs"
 		},
+		"./react-polyfill": "./src/react-polyfill-base.ts",
 		"./package.json": "./package.json"
 	},
 	"react-native": "src/index",
@@ -47,7 +48,8 @@
 	"dependencies": {
 		"@types/react": "^18.3.27",
 		"@types/react-dom": "^18.3.1",
-		"@wordpress/escape-html": "^3.46.0",
+		"@wordpress/deprecated": "^4.48.0",
+		"@wordpress/escape-html": "^3.48.0",
 		"change-case": "^4.1.2",
 		"is-plain-object": "^5.0.0",
 		"react": "^18.3.0",
@@ -56,5 +58,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "51264e33b95fadff9a06b68141e674ce9cde9675"
+	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
 }

package/src/index.ts

@@ -5,3 +5,9 @@ export * from './utils';
 export { default as Platform } from './platform';
 export { default as renderToString } from './serialize';
 export { default as RawHTML } from './raw-html';
+// export {
+// 	findDOMNode,
+// 	render,
+// 	hydrate,
+// 	unmountComponentAtNode,
+// } from './react-polyfill';

package/src/react-platform.ts

@@ -16,11 +16,7 @@ import { createRoot, hydrateRoot } from 'react-dom/client';
 /**
  * Creates a portal into which a component can be rendered.
  *
- * @see https://github.com/facebook/react/issues/10309#issuecomment-318433235
- *
- * @param {React.ReactElement} child     Any renderable child, such as an element,
- *                                       string, or fragment.
- * @param {HTMLElement}        container DOM node into which element should be rendered.
+ * @see https://react.dev/reference/react-dom/createPortal
  */
 export { createPortal };
 
@@ -34,7 +30,7 @@ export { findDOMNode };
 /**
  * Forces React to flush any updates inside the provided callback synchronously.
  *
- * @param {Function} callback Callback to run synchronously.
+ * @see https://react.dev/reference/react-dom/flushSync
  */
 export { flushSync };
 

package/src/react-polyfill-base.ts

@@ -0,0 +1,133 @@
+import { flushSync } from 'react-dom';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+import type { Root } from 'react-dom/client';
+
+const internalsKey = '_reactInternals';
+
+// HostComponent fiber tag, represents a DOM element like <div>.
+const HostComponent = 5;
+const HostText = 6;
+
+function findCurrentFiber( fiber: any ): any {
+	if ( ! fiber.alternate ) {
+		// First mount — only one version exists, and it's current.
+		return fiber;
+	}
+
+	// Walk up to the HostRoot to figure out which tree this fiber is on.
+	let node = fiber;
+	while ( node.return ) {
+		node = node.return;
+	}
+
+	// The root's stateNode.current points to the current tree's root fiber.
+	if ( node.stateNode.current === node ) {
+		// We walked up the current tree, so `fiber` is already current.
+		return fiber;
+	}
+
+	// We walked up the alternate tree — switch to the current version.
+	return fiber.alternate;
+}
+
+function findHostFiber( fiber: any ): any {
+	const current = findCurrentFiber( fiber );
+	if ( ! current ) {
+		return null;
+	}
+	return findHostFiberImpl( current );
+}
+
+function findHostFiberImpl( fiber: any ): any {
+	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;
+}
+
+export function findDOMNode( instance: any ): Element | Text | null {
+	if ( instance === null || instance === undefined ) {
+		return null;
+	}
+
+	if ( instance.nodeType !== undefined ) {
+		return instance as Element | Text;
+	}
+
+	const fiber = instance[ internalsKey ];
+	if ( fiber === undefined ) {
+		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;
+}
+
+const roots = new WeakMap< Element, Root >();
+
+export function render(
+	element: React.ReactNode,
+	container: Element,
+	callback?: () => void
+): void {
+	let root = roots.get( container );
+	if ( ! root ) {
+		root = createRoot( container );
+		roots.set( container, root );
+	}
+
+	flushSync( () => {
+		root.render( element );
+	} );
+
+	if ( typeof callback === 'function' ) {
+		callback();
+	}
+}
+
+export function hydrate(
+	element: React.ReactNode,
+	container: Element,
+	callback?: () => void
+): void {
+	let root = roots.get( container );
+	if ( ! root ) {
+		root = hydrateRoot( container, element );
+		roots.set( container, root );
+	} else {
+		root.render( element );
+	}
+
+	if ( typeof callback === 'function' ) {
+		callback();
+	}
+}
+
+export function unmountComponentAtNode( container: Element ): boolean {
+	const root = roots.get( container );
+	if ( ! root ) {
+		return false;
+	}
+
+	flushSync( () => {
+		root.unmount();
+	} );
+	roots.delete( container );
+	return true;
+}

package/src/react-polyfill.ts

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import {
+	findDOMNode as findDOMNodeBase,
+	render as renderBase,
+	hydrate as hydrateBase,
+	unmountComponentAtNode as unmountComponentAtNodeBase,
+} from './react-polyfill-base';
+
+/**
+ * Finds the DOM node of a React component instance.
+ *
+ * @deprecated since WordPress 7.1.0. Use DOM refs instead.
+ * @see https://react.dev/reference/react-dom/findDOMNode
+ *
+ * @param      instance Component's instance.
+ */
+export function findDOMNode( instance: any ): Element | Text | null {
+	deprecated( 'wp.element.findDOMNode', {
+		since: '7.1',
+		alternative: 'DOM refs',
+		link: 'https://react.dev/reference/react-dom/findDOMNode',
+	} );
+
+	return findDOMNodeBase( instance );
+}
+
+/**
+ * Renders a given element into the target DOM node.
+ *
+ * @deprecated since WordPress 6.2.0. Use `createRoot` instead.
+ * @see https://react.dev/reference/react-dom/render
+ *
+ * @param      element   Element to render.
+ * @param      container DOM node into which to render.
+ * @param      callback  Optional callback called after render.
+ */
+export function render(
+	element: React.ReactNode,
+	container: Element,
+	callback?: () => void
+): void {
+	deprecated( 'wp.element.render', {
+		since: '6.2',
+		alternative: 'wp.element.createRoot',
+		link: 'https://react.dev/reference/react-dom/client/createRoot',
+	} );
+
+	renderBase( element, container, callback );
+}
+
+/**
+ * Hydrates a given element into the target DOM node.
+ *
+ * @deprecated since WordPress 6.2.0. Use `hydrateRoot` instead.
+ * @see https://react.dev/reference/react-dom/hydrate
+ *
+ * @param      element   Element to hydrate.
+ * @param      container DOM node to hydrate.
+ * @param      callback  Optional callback called after hydration.
+ */
+export function hydrate(
+	element: React.ReactNode,
+	container: Element,
+	callback?: () => void
+): void {
+	deprecated( 'wp.element.hydrate', {
+		since: '6.2',
+		alternative: 'wp.element.hydrateRoot',
+		link: 'https://react.dev/reference/react-dom/client/hydrateRoot',
+	} );
+
+	hydrateBase( element, container, callback );
+}
+
+/**
+ * Removes any mounted element from the target DOM node.
+ *
+ * @deprecated since WordPress 6.2.0. Use `root.unmount()` instead.
+ * @see https://react.dev/reference/react-dom/unmountComponentAtNode
+ *
+ * @param      container DOM node in which to unmount.
+ * @return Whether the node was unmounted.
+ */
+export function unmountComponentAtNode( container: Element ): boolean {
+	deprecated( 'wp.element.unmountComponentAtNode', {
+		since: '6.2',
+		alternative: 'root.unmount()',
+		link: 'https://react.dev/reference/react-dom/client/createRoot#root-unmount',
+	} );
+
+	return unmountComponentAtNodeBase( container );
+}

package/src/test/find-dom-node.js

@@ -0,0 +1,109 @@
+import { act, render } from '@testing-library/react';
+import { Component } from '..';
+import { findDOMNode as findDOMNodePolyfill } from '../react-polyfill';
+
+describe.skip( 'findDOMNode', () => {
+	it( 'should return null when passed null', () => {
+		expect( findDOMNodePolyfill( null ) ).toBeNull();
+		expect( console ).toHaveWarned();
+	} );
+
+	it( 'should return the element when passed a DOM element', () => {
+		const div = document.createElement( 'div' );
+		expect( findDOMNodePolyfill( div ) ).toBe( div );
+	} );
+
+	it( 'should track the current DOM node across re-renders', () => {
+		class Toggle extends Component {
+			constructor( props ) {
+				super( props );
+				this.state = { count: 0 };
+				this.results = [];
+			}
+
+			componentDidMount() {
+				this.recordNode();
+			}
+
+			componentDidUpdate() {
+				this.recordNode();
+			}
+
+			recordNode() {
+				const node = findDOMNodePolyfill( this );
+				this.results.push( node.tagName );
+			}
+
+			render() {
+				return this.state.count % 2 === 0 ? (
+					<div>even</div>
+				) : (
+					<span>odd</span>
+				);
+			}
+		}
+
+		let toggleRef;
+		render( <Toggle ref={ ( ref ) => ( toggleRef = ref ) } /> );
+		act( () => toggleRef.setState( { count: 1 } ) );
+		act( () => toggleRef.setState( { count: 2 } ) );
+		act( () => toggleRef.setState( { count: 3 } ) );
+
+		expect( toggleRef.results ).toEqual( [ 'DIV', 'SPAN', 'DIV', 'SPAN' ] );
+	} );
+
+	it( 'should return null for an unmounted component', () => {
+		class MyComponent extends Component {
+			render() {
+				return <div>hello</div>;
+			}
+		}
+
+		let instanceRef;
+		const { rerender } = render(
+			<MyComponent
+				ref={ ( ref ) => {
+					instanceRef = ref;
+					return () => {};
+				} }
+			/>
+		);
+
+		expect( findDOMNodePolyfill( instanceRef ) ).toBeInstanceOf(
+			window.HTMLDivElement
+		);
+
+		rerender( <p>replaced</p> );
+
+		expect( instanceRef ).not.toBeNull();
+		expect( findDOMNodePolyfill( instanceRef ) ).toBeNull();
+	} );
+
+	it( 'should find DOM node rendered by a nested child component', () => {
+		function Empty() {
+			return null;
+		}
+
+		function Inner() {
+			return <span className="inner">hello</span>;
+		}
+
+		class Outer extends Component {
+			render() {
+				return (
+					<>
+						<Empty />
+						<Inner />
+					</>
+				);
+			}
+		}
+
+		let outerRef;
+		render( <Outer ref={ ( ref ) => ( outerRef = ref ) } /> );
+
+		const node = findDOMNodePolyfill( outerRef );
+		expect( node ).toBeInstanceOf( window.HTMLSpanElement );
+		expect( node.className ).toBe( 'inner' );
+	} );
+} );

package/src/test/react-polyfill.js

@@ -0,0 +1,77 @@
+/**
+ * Internal dependencies
+ */
+import { createElement } from '..';
+import { render, hydrate, unmountComponentAtNode } from '../react-polyfill';
+
+describe.skip( 'render', () => {
+	it( 'should render into a container', () => {
+		const container = document.createElement( 'div' );
+
+		render( createElement( 'p', null, 'hello' ), container );
+
+		expect( container ).toHaveTextContent( 'hello' );
+		expect( console ).toHaveWarned();
+	} );
+
+	it( 'should update the container on subsequent renders', () => {
+		const container = document.createElement( 'div' );
+
+		render( createElement( 'p', null, 'hello' ), container );
+		render( createElement( 'p', null, 'world' ), container );
+
+		expect( container ).toHaveTextContent( 'world' );
+	} );
+
+	it( 'should call the callback after rendering', () => {
+		const container = document.createElement( 'div' );
+		const callback = jest.fn();
+
+		render( createElement( 'p', null, 'hello' ), container, callback );
+
+		expect( callback ).toHaveBeenCalledTimes( 1 );
+		expect( container ).toHaveTextContent( 'hello' );
+	} );
+} );
+
+describe.skip( 'hydrate', () => {
+	it( 'should hydrate into a container with matching markup', () => {
+		const container = document.createElement( 'div' );
+		container.innerHTML = '<p>hello</p>';
+
+		hydrate( createElement( 'p', null, 'hello' ), container );
+
+		expect( container ).toHaveTextContent( 'hello' );
+		expect( console ).toHaveWarned();
+	} );
+
+	it( 'should call the callback after hydrating', () => {
+		const container = document.createElement( 'div' );
+		container.innerHTML = '<p>hello</p>';
+		const callback = jest.fn();
+
+		hydrate( createElement( 'p', null, 'hello' ), container, callback );
+
+		expect( callback ).toHaveBeenCalledTimes( 1 );
+	} );
+} );
+
+describe.skip( 'unmountComponentAtNode', () => {
+	it( 'should return false when the container has no root', () => {
+		const container = document.createElement( 'div' );
+
+		expect( unmountComponentAtNode( container ) ).toBe( false );
+		expect( console ).toHaveWarned();
+	} );
+
+	it( 'should unmount and return true when a root exists', () => {
+		const container = document.createElement( 'div' );
+
+		render( createElement( 'p', null, 'hello' ), container );
+		expect( container ).toHaveTextContent( 'hello' );
+
+		expect( unmountComponentAtNode( container ) ).toBe( true );
+		expect( container ).toHaveTextContent( '' );
+		expect( unmountComponentAtNode( container ) ).toBe( false );
+	} );
+} );