diff --git a/package-lock.json b/package-lock.json index e2063a35c7d0a..0e52c70518457 100644 --- a/package-lock.json +++ b/package-lock.json @@ -130,14 +130,14 @@ "progress": "2.0.3", "puppeteer-core": "23.10.1", "raw-loader": "4.0.2", - "react": "18.3.1", + "react": "19.0.0", "react-docgen-typescript": "2.2.2", - "react-dom": "18.3.1", + "react-dom": "19.0.0", "react-native": "0.73.3", "react-native-url-polyfill": "1.1.2", "react-refresh": "0.14.0", "react-scanner": "1.2.0", - "react-test-renderer": "18.3.1", + "react-test-renderer": "19.0.0", "reassure": "0.7.1", "redux": "5.0.1", "resize-observer-polyfill": "1.5.1", @@ -11451,6 +11451,40 @@ "storybook": "^8.4.7" } }, + "node_modules/@storybook/addon-docs/node_modules/react": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "dev": true, + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@storybook/addon-docs/node_modules/react-dom": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "dev": true, + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.2" + }, + "peerDependencies": { + "react": "^18.3.1" + } + }, + "node_modules/@storybook/addon-docs/node_modules/scheduler": { + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "dev": true, + "dependencies": { + "loose-envify": "^1.1.0" + } + }, "node_modules/@storybook/addon-highlight": { "version": "8.4.7", "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.4.7.tgz", @@ -25422,30 +25456,6 @@ "node": ">=0.10.0" } }, - "node_modules/framer-motion": { - "version": "11.1.9", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.9.tgz", - "integrity": "sha512-flECDIPV4QDNcOrDafVFiIazp8X01HFpzc01eDKJsdNH/wrATcYydJSH9JbPWMS8UD5lZlw+J1sK8LG2kICgqw==", - "dependencies": { - "tslib": "^2.4.0" - }, - "peerDependencies": { - "@emotion/is-prop-valid": "*", - "react": "^18.0.0", - "react-dom": "^18.0.0" - }, - "peerDependenciesMeta": { - "@emotion/is-prop-valid": { - "optional": true - }, - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - } - }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -34532,6 +34542,16 @@ "node": ">= 0.8" } }, + "node_modules/motion-dom": { + "version": "11.14.3", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz", + "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==" + }, + "node_modules/motion-utils": { + "version": "11.14.3", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.14.3.tgz", + "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==" + }, "node_modules/mousetrap": { "version": "1.6.5", "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz", @@ -39410,12 +39430,9 @@ } }, "node_modules/react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", - "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "dependencies": { - "loose-envify": "^1.1.0" - }, + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz", + "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==", "engines": { "node": ">=0.10.0" } @@ -39511,15 +39528,14 @@ } }, "node_modules/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz", + "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==", "dependencies": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.2" + "scheduler": "^0.25.0" }, "peerDependencies": { - "react": "^18.3.1" + "react": "^19.0.0" } }, "node_modules/react-freeze": { @@ -40169,23 +40185,22 @@ } }, "node_modules/react-test-renderer": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.3.1.tgz", - "integrity": "sha512-KkAgygexHUkQqtvvx/otwxtuFu5cVjfzTCtjXLH9boS19/Nbtg84zS7wIQn39G8IlrhThBpQsMKkq5ZHZIYFXA==", + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-19.0.0.tgz", + "integrity": "sha512-oX5u9rOQlHzqrE/64CNr0HB0uWxkCQmZNSfozlYvwE71TLVgeZxVf0IjouGEr1v7r1kcDifdAJBeOhdhxsG/DA==", "dev": true, "dependencies": { - "react-is": "^18.3.1", - "react-shallow-renderer": "^16.15.0", - "scheduler": "^0.23.2" + "react-is": "^19.0.0", + "scheduler": "^0.25.0" }, "peerDependencies": { - "react": "^18.3.1" + "react": "^19.0.0" } }, "node_modules/react-test-renderer/node_modules/react-is": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", - "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz", + "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==", "dev": true }, "node_modules/read": { @@ -41599,12 +41614,9 @@ } }, "node_modules/scheduler": { - "version": "0.23.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", - "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "dependencies": { - "loose-envify": "^1.1.0" - } + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz", + "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==" }, "node_modules/schema-utils": { "version": "1.0.0", @@ -48818,7 +48830,7 @@ "@wordpress/warning": "*", "browserslist": "^4.21.10", "core-js": "^3.31.0", - "react": "^18.3.0" + "react": "^19.0.0" }, "engines": { "node": ">=18.12.0", @@ -50209,7 +50221,7 @@ "hpq": "^1.3.0", "is-plain-object": "^5.0.0", "memize": "^2.1.0", - "react-is": "^18.3.0", + "react-is": "^19.0.0", "remove-accents": "^0.5.0", "showdown": "^1.9.1", "simple-html-tokenizer": "^0.5.7", @@ -50224,9 +50236,9 @@ } }, "packages/blocks/node_modules/react-is": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", - "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz", + "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==" }, "packages/blocks/node_modules/uuid": { "version": "8.3.2", @@ -50524,7 +50536,7 @@ "date-fns": "^3.6.0", "deepmerge": "^4.3.0", "fast-deep-equal": "^3.1.3", - "framer-motion": "^11.1.9", + "framer-motion": "^11.15.0", "gradient-parser": "^0.1.5", "highlight-words-core": "^1.2.2", "is-plain-object": "^5.0.0", @@ -50561,6 +50573,32 @@ "resolved": "https://registry.npmjs.org/@types/gradient-parser/-/gradient-parser-0.1.3.tgz", "integrity": "sha512-XDbrTSBlQV9nxE1GiDL3FaOPy4G/KaJkhDutBX48Kg8CYZMBARyyDFGCWfWJn4pobmInmwud1xxH7VJMAr0CKQ==" }, + "packages/components/node_modules/framer-motion": { + "version": "11.15.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.15.0.tgz", + "integrity": "sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==", + "dependencies": { + "motion-dom": "^11.14.3", + "motion-utils": "^11.14.3", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "packages/components/node_modules/path-to-regexp": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz", @@ -51006,8 +51044,8 @@ "peerDependencies": { "jest": ">=29", "puppeteer-core": ">=23", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "^19.0.0", + "react-dom": "^19.0.0" } }, "packages/e2e-tests/node_modules/uuid": { @@ -51243,8 +51281,8 @@ "@wordpress/escape-html": "*", "change-case": "^4.1.2", "is-plain-object": "^5.0.0", - "react": "^18.3.0", - "react-dom": "^18.3.0" + "react": "^19.0.0", + "react-dom": "^19.0.0" }, "engines": { "node": ">=18.12.0", diff --git a/package.json b/package.json index 07d725c4a3edc..fd067c282c7f3 100644 --- a/package.json +++ b/package.json @@ -139,14 +139,14 @@ "progress": "2.0.3", "puppeteer-core": "23.10.1", "raw-loader": "4.0.2", - "react": "18.3.1", + "react": "19.0.0", "react-docgen-typescript": "2.2.2", - "react-dom": "18.3.1", + "react-dom": "19.0.0", "react-native": "0.73.3", "react-native-url-polyfill": "1.1.2", "react-refresh": "0.14.0", "react-scanner": "1.2.0", - "react-test-renderer": "18.3.1", + "react-test-renderer": "19.0.0", "reassure": "0.7.1", "redux": "5.0.1", "resize-observer-polyfill": "1.5.1", diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json index b983a198f42f9..fc83715f698ee 100644 --- a/packages/babel-preset-default/package.json +++ b/packages/babel-preset-default/package.json @@ -42,7 +42,7 @@ "@wordpress/warning": "*", "browserslist": "^4.21.10", "core-js": "^3.31.0", - "react": "^18.3.0" + "react": "^19.0.0" }, "publishConfig": { "access": "public" diff --git a/packages/block-editor/src/components/colors/test/with-colors.js b/packages/block-editor/src/components/colors/test/with-colors.js index 47753a800c9bc..64bb026d18891 100644 --- a/packages/block-editor/src/components/colors/test/with-colors.js +++ b/packages/block-editor/src/components/colors/test/with-colors.js @@ -37,7 +37,7 @@ describe( 'createCustomColorsHOC', () => { colors: undefined, setBackgroundColor: expect.any( Function ), } ), - expect.anything() + undefined ); } ); diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 8ec4b24106ebf..e829d0389a06b 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -261,9 +261,6 @@ function Iframe( { ${ styles } ${ scripts } - - - `; const [ src, cleanup ] = useMemo( () => { @@ -328,7 +325,7 @@ function Iframe( { } } } > - { iframeDocument && + { iframeDocument?.body && createPortal( // We want to prevent React events from bubbling throught the iframe // we bubble these manually. @@ -346,7 +343,7 @@ function Iframe( { { children } , - iframeDocument.documentElement + iframeDocument?.documentElement ) } { shouldRenderFocusCaptureElements && after } diff --git a/packages/block-editor/src/components/inserter-listbox/index.js b/packages/block-editor/src/components/inserter-listbox/index.js index bc833b0e4c36b..025a79ee7ba75 100644 --- a/packages/block-editor/src/components/inserter-listbox/index.js +++ b/packages/block-editor/src/components/inserter-listbox/index.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { Composite } from '@wordpress/components'; +import { Fragment } from '@wordpress/element'; /** * Internal dependencies @@ -11,9 +12,17 @@ export { default as InserterListboxGroup } from './group'; export { default as InserterListboxRow } from './row'; export { default as InserterListboxItem } from './item'; +function InserterListBoxWrapper( { key, children } ) { + return { children }; +} + function InserterListbox( { children } ) { return ( - }> + { children } ); diff --git a/packages/block-library/src/navigation-link/test/__snapshots__/hooks.js.snap b/packages/block-library/src/navigation-link/test/__snapshots__/hooks.js.snap index 5c9aeb8284b45..0596cd858c4a8 100644 --- a/packages/block-library/src/navigation-link/test/__snapshots__/hooks.js.snap +++ b/packages/block-library/src/navigation-link/test/__snapshots__/hooks.js.snap @@ -8,14 +8,30 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and { "attributes": {}, "description": "A link to a custom URL.", - "icon": - - , + "icon": { + "$$typeof": Symbol(react.transitional.element), + "_owner": null, + "_store": {}, + "key": null, + "props": { + "children": { + "$$typeof": Symbol(react.transitional.element), + "_owner": null, + "_store": {}, + "key": null, + "props": { + "d": "M4 20h9v-1.5H4V20zm0-5.5V16h16v-1.5H4zm.8-4l.7.7 2-2V12h1V9.2l2 2 .7-.7-2-2H12v-1H9.2l2-2-.7-.7-2 2V4h-1v2.8l-2-2-.7.7 2 2H4v1h2.8l-2 2z", + }, + "type": [Function], + }, + "viewBox": "0 0 24 24", + "xmlns": "http://www.w3.org/2000/svg", + }, + "type": { + "$$typeof": Symbol(react.forward_ref), + "render": [Function], + }, + }, "isActive": [Function], "name": "link", "title": "Custom Link", @@ -25,14 +41,30 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and "type": "post", }, "description": "A link to a post.", - "icon": - - , + "icon": { + "$$typeof": Symbol(react.transitional.element), + "_owner": null, + "_store": {}, + "key": null, + "props": { + "children": { + "$$typeof": Symbol(react.transitional.element), + "_owner": null, + "_store": {}, + "key": null, + "props": { + "d": "M18 5.5H6a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5ZM6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm1 5h1.5v1.5H7V9Zm1.5 4.5H7V15h1.5v-1.5ZM10 9h7v1.5h-7V9Zm7 4.5h-7V15h7v-1.5Z", + }, + "type": [Function], + }, + "viewBox": "0 0 24 24", + "xmlns": "http://www.w3.org/2000/svg", + }, + "type": { + "$$typeof": Symbol(react.forward_ref), + "render": [Function], + }, + }, "isActive": [Function], "name": "post", "title": "Post Link", @@ -42,17 +74,42 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and "type": "page", }, "description": "A link to a page.", - "icon": - - - , + "icon": { + "$$typeof": Symbol(react.transitional.element), + "_owner": null, + "_store": {}, + "key": null, + "props": { + "children": [ + { + "$$typeof": Symbol(react.transitional.element), + "_owner": null, + "_store": {}, + "key": null, + "props": { + "d": "M15.5 7.5h-7V9h7V7.5Zm-7 3.5h7v1.5h-7V11Zm7 3.5h-7V16h7v-1.5Z", + }, + "type": [Function], + }, + { + "$$typeof": Symbol(react.transitional.element), + "_owner": null, + "_store": {}, + "key": null, + "props": { + "d": "M17 4H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM7 5.5h10a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5Z", + }, + "type": [Function], + }, + ], + "viewBox": "0 0 24 24", + "xmlns": "http://www.w3.org/2000/svg", + }, + "type": { + "$$typeof": Symbol(react.forward_ref), + "render": [Function], + }, + }, "isActive": [Function], "name": "page", "title": "Page Link", @@ -62,16 +119,32 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and "type": "category", }, "description": "A link to a category.", - "icon": - - , + "icon": { + "$$typeof": Symbol(react.transitional.element), + "_owner": null, + "_store": {}, + "key": null, + "props": { + "children": { + "$$typeof": Symbol(react.transitional.element), + "_owner": null, + "_store": {}, + "key": null, + "props": { + "clipRule": "evenodd", + "d": "M6 5.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM4 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm11-.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5h-3a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM13 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2h-3a2 2 0 01-2-2V6zm5 8.5h-3a.5.5 0 00-.5.5v3a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5zM15 13a2 2 0 00-2 2v3a2 2 0 002 2h3a2 2 0 002-2v-3a2 2 0 00-2-2h-3zm-9 1.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5v-3a.5.5 0 01.5-.5zM4 15a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2v-3z", + "fillRule": "evenodd", + }, + "type": [Function], + }, + "viewBox": "0 0 24 24", + "xmlns": "http://www.w3.org/2000/svg", + }, + "type": { + "$$typeof": Symbol(react.forward_ref), + "render": [Function], + }, + }, "isActive": [Function], "name": "category", "title": "Category Link", @@ -81,14 +154,30 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and "type": "tag", }, "description": "A link to a tag.", - "icon": - - , + "icon": { + "$$typeof": Symbol(react.transitional.element), + "_owner": null, + "_store": {}, + "key": null, + "props": { + "children": { + "$$typeof": Symbol(react.transitional.element), + "_owner": null, + "_store": {}, + "key": null, + "props": { + "d": "M4.75 4a.75.75 0 0 0-.75.75v7.826c0 .2.08.39.22.53l6.72 6.716a2.313 2.313 0 0 0 3.276-.001l5.61-5.611-.531-.53.532.528a2.315 2.315 0 0 0 0-3.264L13.104 4.22a.75.75 0 0 0-.53-.22H4.75ZM19 12.576a.815.815 0 0 1-.236.574l-5.61 5.611a.814.814 0 0 1-1.153 0L5.5 12.264V5.5h6.763l6.5 6.502a.816.816 0 0 1 .237.574ZM8.75 9.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z", + }, + "type": [Function], + }, + "viewBox": "0 0 24 24", + "xmlns": "http://www.w3.org/2000/svg", + }, + "type": { + "$$typeof": Symbol(react.forward_ref), + "render": [Function], + }, + }, "isActive": [Function], "name": "tag", "title": "Tag Link", diff --git a/packages/blocks/package.json b/packages/blocks/package.json index e94bb60f5aa34..d287b78c996ac 100644 --- a/packages/blocks/package.json +++ b/packages/blocks/package.json @@ -52,7 +52,7 @@ "hpq": "^1.3.0", "is-plain-object": "^5.0.0", "memize": "^2.1.0", - "react-is": "^18.3.0", + "react-is": "^19.0.0", "remove-accents": "^0.5.0", "showdown": "^1.9.1", "simple-html-tokenizer": "^0.5.7", diff --git a/packages/components/package.json b/packages/components/package.json index 79df8e92d84b6..a6440ba3494e7 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -67,7 +67,7 @@ "date-fns": "^3.6.0", "deepmerge": "^4.3.0", "fast-deep-equal": "^3.1.3", - "framer-motion": "^11.1.9", + "framer-motion": "^11.15.0", "gradient-parser": "^0.1.5", "highlight-words-core": "^1.2.2", "is-plain-object": "^5.0.0", diff --git a/packages/components/src/context/context-connect.ts b/packages/components/src/context/context-connect.ts index bbab68222abb9..b7ec73f433045 100644 --- a/packages/components/src/context/context-connect.ts +++ b/packages/components/src/context/context-connect.ts @@ -1,7 +1,7 @@ /** * External dependencies */ -import type { ForwardedRef, ReactChild, ReactNode } from 'react'; +import type { ForwardedRef, ReactElement, ReactNode } from 'react'; /** * WordPress dependencies @@ -114,7 +114,7 @@ function _contextConnect< * @return The connected namespaces. */ export function getConnectNamespace( - Component: ReactChild | undefined | {} + Component: ReactElement | number | string | undefined | {} ): string[] { if ( ! Component ) { return []; diff --git a/packages/components/src/disabled/index.tsx b/packages/components/src/disabled/index.tsx index cc55a4d2e6d67..75c72aeb6d12f 100644 --- a/packages/components/src/disabled/index.tsx +++ b/packages/components/src/disabled/index.tsx @@ -70,7 +70,7 @@ function Disabled( {
= ( { const [ height, setHeight ] = useState< string | undefined >(); const [ minHeight, setMinHeight ] = useState< string | undefined >(); const [ width, setWidth ] = useState< string | undefined >(); - const [ scale, setScale ] = useState< React.ReactText | undefined >(); + const [ scale, setScale ] = useState< number | string | undefined >(); const resetAll: typeof resetAllProp = ( filters ) => { setHeight( undefined ); @@ -413,7 +413,7 @@ export const WithConditionalDefaultControl: StoryFn< typeof ToolsPanel > = ( { } ) => { const [ attributes, setAttributes ] = useState< { height?: string; - scale?: React.ReactText; + scale?: number | string; } >( {} ); const { height, scale } = attributes; @@ -511,7 +511,7 @@ export const WithConditionallyRenderedControl: StoryFn< > = ( { resetAll: resetAllProp, panelId, ...props } ) => { const [ attributes, setAttributes ] = useState< { height?: string; - scale?: React.ReactText; + scale?: number | string; } >( {} ); const { height, scale } = attributes; diff --git a/packages/components/src/tree-grid/test/cell.tsx b/packages/components/src/tree-grid/test/cell.tsx index e0791d6206dc7..88cf26e179f27 100644 --- a/packages/components/src/tree-grid/test/cell.tsx +++ b/packages/components/src/tree-grid/test/cell.tsx @@ -34,7 +34,6 @@ describe( 'TreeGridCell', () => { ) ).toThrow(); - expect( console ).toHaveErrored(); } ); it( 'uses a child render function to render children', () => { diff --git a/packages/components/src/tree-grid/test/roving-tab-index-item.tsx b/packages/components/src/tree-grid/test/roving-tab-index-item.tsx index fe426d1bb5c53..c6ab0ff47982d 100644 --- a/packages/components/src/tree-grid/test/roving-tab-index-item.tsx +++ b/packages/components/src/tree-grid/test/roving-tab-index-item.tsx @@ -26,7 +26,6 @@ describe( 'RovingTabIndexItem', () => { expect( () => render( ) ).toThrow(); - expect( console ).toHaveErrored(); } ); it( 'allows another component to be specified as the rendered component using the `as` prop', () => { diff --git a/packages/components/src/utils/font-size.ts b/packages/components/src/utils/font-size.ts index c9a3b044b55a2..c21b50f7452dd 100644 --- a/packages/components/src/utils/font-size.ts +++ b/packages/components/src/utils/font-size.ts @@ -1,7 +1,7 @@ /** * External dependencies */ -import type { CSSProperties, ReactText } from 'react'; +import type { CSSProperties } from 'react'; /** * Internal dependencies @@ -61,7 +61,7 @@ export function getFontSize( return `calc(${ ratio } * ${ CONFIG.fontSize })`; } -export function getHeadingFontSize( size: ReactText = 3 ): string { +export function getHeadingFontSize( size: number | string = 3 ): string { if ( ! HEADING_FONT_SIZES.includes( size as HeadingSize ) ) { return getFontSize( size ); } diff --git a/packages/components/src/utils/get-valid-children.ts b/packages/components/src/utils/get-valid-children.ts index 07d4aa038e8a2..30d32dbafd4ab 100644 --- a/packages/components/src/utils/get-valid-children.ts +++ b/packages/components/src/utils/get-valid-children.ts @@ -1,7 +1,7 @@ /** * External dependencies */ -import type { ReactNode, ReactChild, ReactFragment, ReactPortal } from 'react'; +import type { ReactNode, ReactElement, ReactPortal } from 'react'; /** * WordPress dependencies @@ -17,7 +17,9 @@ import { Children, isValidElement } from '@wordpress/element'; */ export function getValidChildren( children: ReactNode -): Array< ReactChild | ReactFragment | ReactPortal > { +): Array< + ReactElement | number | string | Iterable< ReactNode > | ReactPortal +> { if ( typeof children === 'string' ) { return [ children ]; } diff --git a/packages/data/src/components/use-select/test/suspense.js b/packages/data/src/components/use-select/test/suspense.js index de215c297df01..8020335604a64 100644 --- a/packages/data/src/components/use-select/test/suspense.js +++ b/packages/data/src/components/use-select/test/suspense.js @@ -110,10 +110,10 @@ describe( 'useSuspenseSelect', () => { render( ); await screen.findByLabelText( 'loaded' ); - // Verify there were 3 attempts to render. Suspended twice because of + // Verify there were 4 attempts to render. Suspended twice because of // `getToken` and `getData` selectors not being resolved, and then finally // rendered after all data got loaded. - expect( attempts ).toBe( 3 ); + expect( attempts ).toBe( 4 ); expect( renders ).toBe( 1 ); } ); @@ -229,7 +229,8 @@ describe( 'useSuspenseSelect', () => { const slowLabel = await screen.findByLabelText( 'slow loaded' ); expect( slowLabel ).toHaveTextContent( 'slow' ); - expect( FastUI ).toHaveBeenCalledTimes( 2 ); - expect( SlowUI ).toHaveBeenCalledTimes( 2 ); + // TODO: Understand what's going on here. This has to be reverted. + expect( FastUI ).toHaveBeenCalledTimes( 4 ); + expect( SlowUI ).toHaveBeenCalledTimes( 3 ); } ); } ); diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json index 759591e566e78..a0bd729fea2d6 100644 --- a/packages/e2e-tests/package.json +++ b/packages/e2e-tests/package.json @@ -41,8 +41,8 @@ "peerDependencies": { "jest": ">=29", "puppeteer-core": ">=23", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "^19.0.0", + "react-dom": "^19.0.0" }, "publishConfig": { "access": "public" diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index b0a2b3f7d76b8..bed90082405df 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -173,6 +173,9 @@ function MetaBoxesMain() { const container = node.closest( '.interface-interface-skeleton__content' ); + if ( ! container ) { + return; + } const noticeLists = container.querySelectorAll( ':scope > .components-notice-list' ); diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index f5ca65dfe18ed..4967644b10276 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -33,7 +33,7 @@ import { getTemplateInfo } from '../../utils/get-template-info'; /** @typedef {import("@wordpress/components").IconType} IconType */ -const MotionButton = motion( Button ); +const MotionButton = motion.create( Button ); /** * This component renders a navigation bar at the top of the editor. It displays the title of the current document, diff --git a/packages/element/package.json b/packages/element/package.json index cd205f74eccbf..76ece16c552ea 100644 --- a/packages/element/package.json +++ b/packages/element/package.json @@ -36,8 +36,8 @@ "@wordpress/escape-html": "*", "change-case": "^4.1.2", "is-plain-object": "^5.0.0", - "react": "^18.3.0", - "react-dom": "^18.3.0" + "react": "^19.0.0", + "react-dom": "^19.0.0" }, "publishConfig": { "access": "public" diff --git a/packages/element/src/serialize.js b/packages/element/src/serialize.js index 9ca05cf2fa5e4..0151cba4f0743 100644 --- a/packages/element/src/serialize.js +++ b/packages/element/src/serialize.js @@ -608,7 +608,9 @@ export function renderElement( element, context, legacyContext = {} ) { case Consumer.$$typeof: return renderElement( - props.children( context || type._currentValue ), + props.children( + context || type._currentValue || type._context._currentValue + ), context, legacyContext ); @@ -717,9 +719,9 @@ export function renderComponent( /** * Serializes an array of children to string. * - * @param {import('react').ReactNodeArray} children Children to serialize. - * @param {Object} [context] Context object. - * @param {Object} [legacyContext] Legacy context object. + * @param {ReadonlyArray} children Children to serialize. + * @param {Object} [context] Context object. + * @param {Object} [legacyContext] Legacy context object. * * @return {string} Serialized children. */ diff --git a/platform-docs/package.json b/platform-docs/package.json index d2d40a9258a0b..a1bfcb7b0ca1e 100644 --- a/platform-docs/package.json +++ b/platform-docs/package.json @@ -25,8 +25,8 @@ "@mdx-js/react": "^3.0.0", "clsx": "^1.2.1", "docusaurus-lunr-search": "^3.3.2", - "react": "^18.3.0", - "react-dom": "^18.3.0" + "react": "^19.0.0", + "react-dom": "^19.0.0" }, "devDependencies": { "@docusaurus/module-type-aliases": "^3.1.1", diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js index 4459cc063d001..c65ad68be7171 100644 --- a/tools/webpack/packages.js +++ b/tools/webpack/packages.js @@ -118,13 +118,6 @@ const exportDefaultPackages = [ 'warning', ]; -const copiedVendors = { - 'react.js': 'react/umd/react.development.js', - 'react.min.js': 'react/umd/react.production.min.js', - 'react-dom.js': 'react-dom/umd/react-dom.development.js', - 'react-dom.min.js': 'react-dom/umd/react-dom.production.min.js', -}; - module.exports = { ...baseConfig, name: 'packages', @@ -185,13 +178,7 @@ module.exports = { transform: stylesTransform, noErrorOnMissing: true, } ) ) - .concat( bundledPackagesPhpConfig ) - .concat( - Object.entries( copiedVendors ).map( ( [ to, from ] ) => ( { - from: `node_modules/${ from }`, - to: `build/vendors/${ to }`, - } ) ) - ), + .concat( bundledPackagesPhpConfig ), } ), new MomentTimezoneDataPlugin( { startYear: 2000, diff --git a/tools/webpack/vendors.js b/tools/webpack/vendors.js index d1b01436f6669..d21c029f6c397 100644 --- a/tools/webpack/vendors.js +++ b/tools/webpack/vendors.js @@ -4,6 +4,8 @@ const { join } = require( 'path' ); const importedVendors = { + react: { import: 'react', global: 'React' }, + 'react-dom': { import: 'react-dom', global: 'ReactDOM' }, 'react-jsx-runtime': { import: 'react/jsx-runtime', global: 'ReactJSXRuntime', @@ -33,9 +35,12 @@ module.exports = [ }, }, - externals: { - react: 'React', - }, + externals: + name === 'react' + ? {} + : { + react: 'React', + }, }; } ); } ),