@wordpress/element 8.0.0 → 8.0.1

package/CHANGELOG.md

@@ -2,7 +2,9 @@
 
 ## Unreleased
 
-## 8.0.0 (2026-06-04)
+## 8.0.1 (2026-06-16)
+
+## 8.0.0 (2026-06-10)
 
 ### Breaking Changes
 

package/README.md

@@ -238,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_
 
@@ -250,10 +246,10 @@ _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' ),
 } );
 ```
 

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-module/platform.mjs.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": ";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": ";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-types/find-dom-node.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 default function findDOMNode(instance: any): Element | Text | null;
+//# sourceMappingURL=find-dom-node.d.ts.map

package/build-types/find-dom-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"find-dom-node.d.ts","sourceRoot":"","sources":["../src/find-dom-node.ts"],"names":[],"mappings":"AAuDA;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,QAAQ,EAAE,GAAG,GAAI,OAAO,GAAG,IAAI,GAAG,IAAI,CA4B1E"}

package/build-types/platform.d.ts

@@ -1,11 +1,3 @@
-/**
- * Parts of this source were derived and modified from react-native-web,
- * released under the MIT license.
- *
- * Copyright (c) 2016-present, Nicolas Gallagher.
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- */
 /**
  * Specification for platform-specific value selection.
  */
@@ -17,18 +9,14 @@ type PlatformSelectSpec<T> = {
  * 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.
- *
- * @see https://reactnative.dev/docs/platform-specific-code#platform-module
- *
  * Here is an example of how to use the select method:
  * @example
  * ```js
  * 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' ),
  * } );
  * ```
  */

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

@@ -1 +1 @@
-{"version":3,"file":"platform.d.ts","sourceRoot":"","sources":["../src/platform.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,KAAK,kBAAkB,CAAE,CAAC,IAAK;IAC9B,GAAG,CAAC,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,CAAC,CAAC;CACZ,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,QAAQ;IACb,kEAAkE;IAClE,EAAE,EAAE,KAAK;IAET;;;;;;OAMG;IACH,MAAM,CAAE,CAAC,QAAU,kBAAkB,CAAE,CAAC,CAAE,GAAI,CAAC,GAAG,SAAS;IAI3D,kCAAkC;IAClC,KAAK;CACL,CAAC;eAEa,QAAQ"}
+{"version":3,"file":"platform.d.ts","sourceRoot":"","sources":["../src/platform.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,KAAK,kBAAkB,CAAE,CAAC,IAAK;IAC9B,GAAG,CAAC,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,CAAC,CAAC;CACZ,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,QAAQ;IACb,kEAAkE;IAClE,EAAE,EAAE,KAAK;IAET;;;;;;OAMG;IACH,MAAM,CAAE,CAAC,QAAU,kBAAkB,CAAE,CAAC,CAAE,GAAI,CAAC,GAAG,SAAS;IAI3D,kCAAkC;IAClC,KAAK;CACL,CAAC;eAEa,QAAQ"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/element",
-	"version": "8.0.0",
+	"version": "8.0.1",
 	"description": "Element React module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,22 +41,25 @@
 		"./react-polyfill": "./src/react-polyfill-base.ts",
 		"./package.json": "./package.json"
 	},
-	"react-native": "src/index",
 	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
 		"@types/react": "^18.3.27",
 		"@types/react-dom": "^18.3.1",
-		"@wordpress/deprecated": "^4.48.0",
-		"@wordpress/escape-html": "^3.48.0",
+		"@wordpress/deprecated": "^4.48.1",
+		"@wordpress/escape-html": "^3.48.1",
 		"change-case": "^4.1.2",
 		"is-plain-object": "^5.0.0",
-		"react": "^18.3.0",
-		"react-dom": "^18.3.0"
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1"
+	},
+	"devDependencies": {
+		"@testing-library/dom": "^10.4.1",
+		"@testing-library/react": "^16.3.2"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
+	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
 }

package/src/platform.ts

@@ -1,12 +1,3 @@
-/**
- * Parts of this source were derived and modified from react-native-web,
- * released under the MIT license.
- *
- * Copyright (c) 2016-present, Nicolas Gallagher.
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- */
-
 /**
  * Specification for platform-specific value selection.
  */
@@ -19,18 +10,14 @@ type PlatformSelectSpec< T > = {
  * 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.
- *
- * @see https://reactnative.dev/docs/platform-specific-code#platform-module
- *
  * Here is an example of how to use the select method:
  * @example
  * ```js
  * 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' ),
  * } );
  * ```
  */

package/src/test/platform.js

@@ -4,12 +4,20 @@
 import Platform from '../platform';
 
 describe( 'Platform', () => {
-	it( 'is chooses the right thing', () => {
+	it( 'selects the web value', () => {
 		const element = Platform.select( {
 			web: <div />,
-			native: <button />,
+			default: <button />,
 		} );
 
 		expect( element ).toEqual( <div /> );
 	} );
+
+	it( 'falls back to the default value when no web value is provided', () => {
+		const element = Platform.select( {
+			default: <button />,
+		} );
+
+		expect( element ).toEqual( <button /> );
+	} );
 } );

package/src/platform.android.js

@@ -1,21 +0,0 @@
-/**
- * External dependencies
- */
-import { Platform as OriginalPlatform } from 'react-native';
-
-const Platform = {
-	...OriginalPlatform,
-	OS: 'native',
-	select: ( spec ) => {
-		if ( 'android' in spec ) {
-			return spec.android;
-		} else if ( 'native' in spec ) {
-			return spec.native;
-		}
-		return spec.default;
-	},
-	isNative: true,
-	isAndroid: true,
-};
-
-export default Platform;

package/src/platform.ios.js

@@ -1,21 +0,0 @@
-/**
- * External dependencies
- */
-import { Platform as OriginalPlatform } from 'react-native';
-
-const Platform = {
-	...OriginalPlatform,
-	OS: 'native',
-	select: ( spec ) => {
-		if ( 'ios' in spec ) {
-			return spec.ios;
-		} else if ( 'native' in spec ) {
-			return spec.native;
-		}
-		return spec.default;
-	},
-	isNative: true,
-	isIOS: true,
-};
-
-export default Platform;

package/src/react-platform.native.js

@@ -1,14 +0,0 @@
-/**
- * External dependencies
- */
-import { AppRegistry } from 'react-native';
-
-/**
- * Registers an app root component allowing the native system to run the app.
- *
- * @param {string}   appKey            Unique app name identifier.
- * @param {Function} componentProvider Function returning the app root React component.
- */
-export const registerComponent = ( appKey, componentProvider ) => {
-	AppRegistry.registerComponent( appKey, componentProvider );
-};

package/src/test/platform.native.js

@@ -1,15 +0,0 @@
-/**
- * Internal dependencies
- */
-import Platform from '../platform';
-
-describe( 'Platform', () => {
-	it( 'is chooses the right thing', () => {
-		const selection = Platform.select( {
-			web: 'web',
-			native: 'native',
-		} );
-
-		expect( selection ).toBe( 'native' );
-	} );
-} );