@wordpress/element 7.0.0 → 8.0.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 8.0.1 (2026-06-16)
+
+## 8.0.0 (2026-06-10)
+
+### Breaking Changes
+
+-   Revert React back to v18 [#78940](https://github.com/WordPress/gutenberg/pull/78940).
+
 ## 7.0.0 (2026-05-27)
 
 ### Breaking Changes

package/README.md

@@ -27,18 +27,6 @@ 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.
@@ -134,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
 
@@ -163,25 +146,19 @@ _Changelog_
 
 ### findDOMNode
 
-> **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>
+Finds the dom node of a React component.
 
 _Parameters_
 
--   _instance_ `any`: Component's instance.
+-   _component_ `React.ComponentType`: Component's instance.
 
 ### flushSync
 
 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
 
@@ -199,6 +176,16 @@ _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.
@@ -251,11 +238,7 @@ _Related_
 
 Component used to detect the current Platform being used. Use Platform.OS === 'web' to detect if running on web environment.
 
-This is the same concept as the React Native implementation.
-
-_Related_
-
--   <https://reactnative.dev/docs/platform-specific-code#platform-module> Here is an example of how to use the select method:
+Here is an example of how to use the select method:
 
 _Usage_
 
@@ -263,85 +246,13 @@ _Usage_
 import { Platform } from '@wordpress/element';
 
 const placeholderLabel = Platform.select( {
-	native: __( 'Add media' ),
 	web: __(
 		'Drag images, upload new ones or select files from your library.'
 	),
+	default: __( 'Add media' ),
 } );
 ```
 
-### 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_
@@ -376,6 +287,16 @@ _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.
@@ -415,29 +336,15 @@ _Returns_
 
 -   `ReactNode`: The updated children object.
 
-### use
-
-Read the value of a resource like a Promise or context.
-
-_Related_
-
--   <https://react.dev/reference/react/use>
-
-_Changelog_
+### unmountComponentAtNode
 
-`7.1.0`
+> **Deprecated** since WordPress 6.2.0. Use `root.unmount()` instead.
 
-### useActionState
-
-Manage state based on the result of a form action.
+Removes any mounted element from the target DOM node.
 
 _Related_
 
--   <https://react.dev/reference/react/useActionState>
-
-_Changelog_
-
-`7.1.0`
+-   <https://react.dev/reference/react-dom/unmountComponentAtNode>
 
 ### useCallback
 
@@ -469,30 +376,6 @@ _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_
@@ -523,18 +406,6 @@ _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/index.cjs

@@ -34,7 +34,6 @@ __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);
@@ -45,13 +44,11 @@ __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';\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;",
+  "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/platform.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/platform.ts"],
-  "sourcesContent": ["/**\n * Parts of this source were derived and modified from react-native-web,\n * released under the MIT license.\n *\n * Copyright (c) 2016-present, Nicolas Gallagher.\n * Copyright (c) 2015-present, Facebook, Inc.\n *\n */\n\n/**\n * Specification for platform-specific value selection.\n */\ntype PlatformSelectSpec< T > = {\n\tweb?: T;\n\tdefault?: T;\n};\n\n/**\n * Component used to detect the current Platform being used.\n * Use Platform.OS === 'web' to detect if running on web environment.\n *\n * This is the same concept as the React Native implementation.\n *\n * @see https://reactnative.dev/docs/platform-specific-code#platform-module\n *\n * Here is an example of how to use the select method:\n * @example\n * ```js\n * import { Platform } from '@wordpress/element';\n *\n * const placeholderLabel = Platform.select( {\n *   native: __( 'Add media' ),\n *   web: __( 'Drag images, upload new ones or select files from your library.' ),\n * } );\n * ```\n */\nconst Platform = {\n\t/** Platform identifier. Will always be `'web'` in this module. */\n\tOS: 'web' as const,\n\n\t/**\n\t * Select a value based on the platform.\n\t *\n\t * @template T\n\t * @param    spec - Object with optional platform-specific values.\n\t * @return The selected value.\n\t */\n\tselect< T >( spec: PlatformSelectSpec< T > ): T | undefined {\n\t\treturn 'web' in spec ? spec.web : spec.default;\n\t},\n\n\t/** Whether the platform is web */\n\tisWeb: true,\n};\n\nexport default Platform;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCA,IAAM,WAAW;AAAA;AAAA,EAEhB,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASJ,OAAa,MAA+C;AAC3D,WAAO,SAAS,OAAO,KAAK,MAAM,KAAK;AAAA,EACxC;AAAA;AAAA,EAGA,OAAO;AACR;AAEA,IAAO,mBAAQ;",
+  "sourcesContent": ["/**\n * Specification for platform-specific value selection.\n */\ntype PlatformSelectSpec< T > = {\n\tweb?: T;\n\tdefault?: T;\n};\n\n/**\n * Component used to detect the current Platform being used.\n * Use Platform.OS === 'web' to detect if running on web environment.\n *\n * Here is an example of how to use the select method:\n * @example\n * ```js\n * import { Platform } from '@wordpress/element';\n *\n * const placeholderLabel = Platform.select( {\n *   web: __( 'Drag images, upload new ones or select files from your library.' ),\n *   default: __( 'Add media' ),\n * } );\n * ```\n */\nconst Platform = {\n\t/** Platform identifier. Will always be `'web'` in this module. */\n\tOS: 'web' as const,\n\n\t/**\n\t * Select a value based on the platform.\n\t *\n\t * @template T\n\t * @param    spec - Object with optional platform-specific values.\n\t * @return The selected value.\n\t */\n\tselect< T >( spec: PlatformSelectSpec< T > ): T | undefined {\n\t\treturn 'web' in spec ? spec.web : spec.default;\n\t},\n\n\t/** Whether the platform is web */\n\tisWeb: true,\n};\n\nexport default Platform;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBA,IAAM,WAAW;AAAA;AAAA,EAEhB,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASJ,OAAa,MAA+C;AAC3D,WAAO,SAAS,OAAO,KAAK,MAAM,KAAK;AAAA,EACxC;AAAA;AAAA,EAGA,OAAO;AACR;AAEA,IAAO,mBAAQ;",
   "names": []
 }

package/build/react-platform.cjs

@@ -22,15 +22,12 @@ 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,
-  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
+  render: () => import_react_dom.render,
+  unmountComponentAtNode: () => import_react_dom.unmountComponentAtNode
 });
 module.exports = __toCommonJS(react_platform_exports);
 var import_react_dom = require("react-dom");
@@ -39,14 +36,11 @@ var import_client = require("react-dom/client");
 0 && (module.exports = {
   createPortal,
   createRoot,
+  findDOMNode,
   flushSync,
+  hydrate,
   hydrateRoot,
-  preconnect,
-  prefetchDNS,
-  preinit,
-  preinitModule,
-  preload,
-  preloadModule,
-  useFormStatus
+  render,
+  unmountComponentAtNode
 });
 //# 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\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;",
+  "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/{find-dom-node.cjs → react-polyfill-base.cjs}

@@ -1,9 +1,7 @@
 "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)
@@ -17,23 +15,19 @@ var __copyProps = (to, from, except, desc) => {
   }
   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
+// 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(find_dom_node_exports);
-var import_deprecated = __toESM(require("@wordpress/deprecated"));
+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;
@@ -72,11 +66,6 @@ function findHostFiberImpl(fiber) {
   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;
   }
@@ -96,4 +85,48 @@ function findDOMNode(instance) {
   const hostFiber = findHostFiber(fiber);
   return hostFiber?.stateNode ?? null;
 }
-//# sourceMappingURL=find-dom-node.cjs.map
+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"]
+}