diff --git a/docs/manifest.json b/docs/manifest.json index 7bb1e847ce03fd..86a889406ce919 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -761,12 +761,6 @@ "markdown_source": "../packages/components/src/drop-zone/README.md", "parent": "components" }, - { - "title": "DropdownMenuV2Ariakit", - "slug": "dropdown-menu-v2-ariakit", - "markdown_source": "../packages/components/src/dropdown-menu-v2-ariakit/README.md", - "parent": "components" - }, { "title": "DropdownMenu", "slug": "dropdown-menu", diff --git a/lib/compat/plugin/footnotes.php b/lib/compat/plugin/footnotes.php index a14a7922b24a10..a3d89aba0ae96a 100644 --- a/lib/compat/plugin/footnotes.php +++ b/lib/compat/plugin/footnotes.php @@ -1,6 +1,6 @@ =10" - }, - "peerDependencies": { - "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-popper": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.1.tgz", - "integrity": "sha512-keYDcdMPNMjSC8zTsZ8wezUMiWM9Yj14wtF3s0PTIs9srnEPC9Kt2Gny1T3T81mmSeyDjZxsD9N5WCwNNb712w==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@floating-ui/react-dom": "0.7.2", - "@radix-ui/react-arrow": "1.0.2", - "@radix-ui/react-compose-refs": "1.0.0", - "@radix-ui/react-context": "1.0.0", - "@radix-ui/react-primitive": "1.0.2", - "@radix-ui/react-use-callback-ref": "1.0.0", - "@radix-ui/react-use-layout-effect": "1.0.0", - "@radix-ui/react-use-rect": "1.0.0", - "@radix-ui/react-use-size": "1.0.0", - "@radix-ui/rect": "1.0.0" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-popper/node_modules/@floating-ui/core": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz", - "integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==" - }, - "node_modules/@radix-ui/react-popper/node_modules/@floating-ui/dom": { - "version": "0.5.4", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz", - "integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==", - "dependencies": { - "@floating-ui/core": "^0.7.3" - } - }, - "node_modules/@radix-ui/react-popper/node_modules/@floating-ui/react-dom": { - "version": "0.7.2", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-0.7.2.tgz", - "integrity": "sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==", - "dependencies": { - "@floating-ui/dom": "^0.5.3", - "use-isomorphic-layout-effect": "^1.1.1" - }, - "peerDependencies": { - "react": ">=16.8.0", - "react-dom": ">=16.8.0" - } - }, - "node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-primitive": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz", - "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-slot": "1.0.1" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-slot": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz", - "integrity": "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-compose-refs": "1.0.0" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, "node_modules/@radix-ui/react-portal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.0.tgz", @@ -8027,52 +7649,6 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, - "node_modules/@radix-ui/react-roving-focus": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.3.tgz", - "integrity": "sha512-stjCkIoMe6h+1fWtXlA6cRfikdBzCLp3SnVk7c48cv/uy3DTGoXhN76YaOYUJuy3aEDvDIKwKR5KSmvrtPvQPQ==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/primitive": "1.0.0", - "@radix-ui/react-collection": "1.0.2", - "@radix-ui/react-compose-refs": "1.0.0", - "@radix-ui/react-context": "1.0.0", - "@radix-ui/react-direction": "1.0.0", - "@radix-ui/react-id": "1.0.0", - "@radix-ui/react-primitive": "1.0.2", - "@radix-ui/react-use-callback-ref": "1.0.0", - "@radix-ui/react-use-controllable-state": "1.0.0" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-primitive": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz", - "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-slot": "1.0.1" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-slot": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz", - "integrity": "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-compose-refs": "1.0.0" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, "node_modules/@radix-ui/react-select": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-1.2.2.tgz", @@ -8657,30 +8233,6 @@ } } }, - "node_modules/@radix-ui/react-use-rect": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.0.tgz", - "integrity": "sha512-TB7pID8NRMEHxb/qQJpvSt3hQU4sqNPM1VCTjTRjEOa7cEop/QMuq8S6fb/5Tsz64kqSvB9WnwsDHtjnrM9qew==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/rect": "1.0.0" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-use-size": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.0.tgz", - "integrity": "sha512-imZ3aYcoYCKhhgNpkNDh/aTiU05qw9hX+HHI1QDBTyIlcFjgeFlKKySNGMwTp7nYFLQg/j0VA2FmCY4WPDDHMg==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-use-layout-effect": "1.0.0" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, "node_modules/@radix-ui/react-visually-hidden": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz", @@ -8766,14 +8318,6 @@ } } }, - "node_modules/@radix-ui/rect": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.0.tgz", - "integrity": "sha512-d0O68AYy/9oeEy1DdC07bz1/ZXX+DqCskRd3i4JzLSTXwefzaepQrKjXC7aNM8lTHjFLDO0pDgaEiQ7jEk+HVg==", - "dependencies": { - "@babel/runtime": "^7.13.10" - } - }, "node_modules/@react-native-clipboard/clipboard": { "version": "1.11.2", "resolved": "https://registry.npmjs.org/@react-native-clipboard/clipboard/-/clipboard-1.11.2.tgz", @@ -51620,19 +51164,6 @@ } } }, - "node_modules/use-isomorphic-layout-effect": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", - "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/use-latest-callback": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.6.tgz", @@ -54717,7 +54248,7 @@ "version": "25.14.0", "license": "GPL-2.0-or-later", "dependencies": { - "@ariakit/react": "^0.3.5", + "@ariakit/react": "^0.3.10", "@babel/runtime": "^7.16.0", "@emotion/cache": "^11.7.1", "@emotion/css": "^11.7.1", @@ -54726,7 +54257,6 @@ "@emotion/styled": "^11.6.0", "@emotion/utils": "^1.0.0", "@floating-ui/react-dom": "^2.0.1", - "@radix-ui/react-dropdown-menu": "2.0.4", "@types/gradient-parser": "0.1.3", "@types/highlight-words-core": "1.2.1", "@use-gesture/react": "^10.2.24", @@ -54777,6 +54307,41 @@ "react-dom": "^18.0.0" } }, + "packages/components/node_modules/@ariakit/core": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.3.8.tgz", + "integrity": "sha512-LlSCwbyyozMX4ZEobpYGcv1LFqOdBTdTYPZw3lAVgLcFSNivsazi3NkKM9qNWNIu00MS+xTa0+RuIcuWAjlB2Q==" + }, + "packages/components/node_modules/@ariakit/react": { + "version": "0.3.10", + "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.3.10.tgz", + "integrity": "sha512-XRY69IOm8Oy+HSPoaspcVLAhLo3ToLhhJKSLK1voTAZtSzu5kUeUf4nUPxTzYFsvirKORZgOLAeNwuo1gPr61g==", + "dependencies": { + "@ariakit/react-core": "0.3.10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/ariakit" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + } + }, + "packages/components/node_modules/@ariakit/react-core": { + "version": "0.3.10", + "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.3.10.tgz", + "integrity": "sha512-CzSffcNlOyS2xuy21UB6fgJXi5LriJ9JrTSJzcgJmE+P9/WfQlplJC3L75d8O2yKgaGPeFnQ0hhDA6ItsI98eQ==", + "dependencies": { + "@ariakit/core": "0.3.8", + "@floating-ui/dom": "^1.0.0", + "use-sync-external-store": "^1.2.0" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + } + }, "packages/components/node_modules/@floating-ui/react-dom": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.1.tgz", @@ -57831,43 +57396,20 @@ } } }, - "@ariakit/core": { - "version": "0.3.4", - "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.3.4.tgz", - "integrity": "sha512-mMTWYOs0SvkrBbLPy4IY15E+fgvSbZKg4XzpBwE17meBG+G7wJjnuHq8lNiIAn9VnQBIc/lsXxqH3FCD7hHaUg==" - }, - "@ariakit/react": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.3.5.tgz", - "integrity": "sha512-x7LfGP0on0lVV1NcDNO8+aEBb64sUI6YYB1akEWXkb4lTiU4uG1sHGc8YhfHVh0cFS1kwpQcqyiNPzyB8OgymA==", - "requires": { - "@ariakit/react-core": "0.3.5" - } - }, - "@ariakit/react-core": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.3.5.tgz", - "integrity": "sha512-TdQmUj7BPJ7QWjpjlpP5M1YbANDQL/voYYvKq1Hele7uoEWk51v2nZNaNXo9DZ4He/bkG99ISDx5Tgkzi5En8Q==", - "requires": { - "@ariakit/core": "0.3.4", - "@floating-ui/dom": "^1.0.0", - "use-sync-external-store": "^1.2.0" - } - }, "@ariakit/test": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/@ariakit/test/-/test-0.3.0.tgz", - "integrity": "sha512-fngAzkzCl9zM4O/tzVaUf7ixWUAk779hjTegr/zcegoxaMS5SmaLhNQ7RU0AGx06LrhJse6GYGy8ZtK58HP/EQ==", + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@ariakit/test/-/test-0.3.5.tgz", + "integrity": "sha512-7UCQBnJZ88JptkEnAXT7iSgtxEZiFwqdkKtxLCXDssTOJNatbFsnq0Jow324y41jGfAE2n4Lf5qY2FsZUPf9XQ==", "dev": true, "requires": { - "@ariakit/core": "0.3.3", + "@ariakit/core": "0.3.8", "@testing-library/dom": "^8.0.0 || ^9.0.0" }, "dependencies": { "@ariakit/core": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.3.3.tgz", - "integrity": "sha512-8x77R0aE9O9pheygg+h/z0oU9Wx/Xdlr7nfkl4klGnkJma8/nAhJ2RrchCTQCUef4WMsRnq/doCz8m/sslP6CA==", + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.3.8.tgz", + "integrity": "sha512-LlSCwbyyozMX4ZEobpYGcv1LFqOdBTdTYPZw3lAVgLcFSNivsazi3NkKM9qNWNIu00MS+xTa0+RuIcuWAjlB2Q==", "dev": true } } @@ -62037,67 +61579,6 @@ "@babel/runtime": "^7.13.10" } }, - "@radix-ui/react-arrow": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.2.tgz", - "integrity": "sha512-fqYwhhI9IarZ0ll2cUSfKuXHlJK0qE4AfnRrPBbRwEH/4mGQn04/QFGomLi8TXWIdv9WJk//KgGm+aDxVIr1wA==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-primitive": "1.0.2" - }, - "dependencies": { - "@radix-ui/react-primitive": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz", - "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-slot": "1.0.1" - } - }, - "@radix-ui/react-slot": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz", - "integrity": "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-compose-refs": "1.0.0" - } - } - } - }, - "@radix-ui/react-collection": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.2.tgz", - "integrity": "sha512-s8WdQQ6wNXpaxdZ308KSr8fEWGrg4un8i4r/w7fhiS4ElRNjk5rRcl0/C6TANG2LvLOGIxtzo/jAg6Qf73TEBw==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-compose-refs": "1.0.0", - "@radix-ui/react-context": "1.0.0", - "@radix-ui/react-primitive": "1.0.2", - "@radix-ui/react-slot": "1.0.1" - }, - "dependencies": { - "@radix-ui/react-primitive": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz", - "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-slot": "1.0.1" - } - }, - "@radix-ui/react-slot": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz", - "integrity": "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-compose-refs": "1.0.0" - } - } - } - }, "@radix-ui/react-compose-refs": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz", @@ -62136,14 +61617,6 @@ "react-remove-scroll": "2.5.4" } }, - "@radix-ui/react-direction": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.0.tgz", - "integrity": "sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==", - "requires": { - "@babel/runtime": "^7.13.10" - } - }, "@radix-ui/react-dismissable-layer": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz", @@ -62157,41 +61630,6 @@ "@radix-ui/react-use-escape-keydown": "1.0.0" } }, - "@radix-ui/react-dropdown-menu": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.4.tgz", - "integrity": "sha512-y6AT9+MydyXcByivdK1+QpjWoKaC7MLjkS/cH1Q3keEyMvDkiY85m8o2Bi6+Z1PPUlCsMULopxagQOSfN0wahg==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/primitive": "1.0.0", - "@radix-ui/react-compose-refs": "1.0.0", - "@radix-ui/react-context": "1.0.0", - "@radix-ui/react-id": "1.0.0", - "@radix-ui/react-menu": "2.0.4", - "@radix-ui/react-primitive": "1.0.2", - "@radix-ui/react-use-controllable-state": "1.0.0" - }, - "dependencies": { - "@radix-ui/react-primitive": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz", - "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-slot": "1.0.1" - } - }, - "@radix-ui/react-slot": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz", - "integrity": "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-compose-refs": "1.0.0" - } - } - } - }, "@radix-ui/react-focus-guards": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz", @@ -62220,166 +61658,6 @@ "@radix-ui/react-use-layout-effect": "1.0.0" } }, - "@radix-ui/react-menu": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.4.tgz", - "integrity": "sha512-mzKR47tZ1t193trEqlQoJvzY4u9vYfVH16ryBrVrCAGZzkgyWnMQYEZdUkM7y8ak9mrkKtJiqB47TlEnubeOFQ==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/primitive": "1.0.0", - "@radix-ui/react-collection": "1.0.2", - "@radix-ui/react-compose-refs": "1.0.0", - "@radix-ui/react-context": "1.0.0", - "@radix-ui/react-direction": "1.0.0", - "@radix-ui/react-dismissable-layer": "1.0.3", - "@radix-ui/react-focus-guards": "1.0.0", - "@radix-ui/react-focus-scope": "1.0.2", - "@radix-ui/react-id": "1.0.0", - "@radix-ui/react-popper": "1.1.1", - "@radix-ui/react-portal": "1.0.2", - "@radix-ui/react-presence": "1.0.0", - "@radix-ui/react-primitive": "1.0.2", - "@radix-ui/react-roving-focus": "1.0.3", - "@radix-ui/react-slot": "1.0.1", - "@radix-ui/react-use-callback-ref": "1.0.0", - "aria-hidden": "^1.1.1", - "react-remove-scroll": "2.5.5" - }, - "dependencies": { - "@radix-ui/react-dismissable-layer": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.3.tgz", - "integrity": "sha512-nXZOvFjOuHS1ovumntGV7NNoLaEp9JEvTht3MBjP44NSW5hUKj/8OnfN3+8WmB+CEhN44XaGhpHoSsUIEl5P7Q==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/primitive": "1.0.0", - "@radix-ui/react-compose-refs": "1.0.0", - "@radix-ui/react-primitive": "1.0.2", - "@radix-ui/react-use-callback-ref": "1.0.0", - "@radix-ui/react-use-escape-keydown": "1.0.2" - } - }, - "@radix-ui/react-focus-scope": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.2.tgz", - "integrity": "sha512-spwXlNTfeIprt+kaEWE/qYuYT3ZAqJiAGjN/JgdvgVDTu8yc+HuX+WOWXrKliKnLnwck0F6JDkqIERncnih+4A==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-compose-refs": "1.0.0", - "@radix-ui/react-primitive": "1.0.2", - "@radix-ui/react-use-callback-ref": "1.0.0" - } - }, - "@radix-ui/react-portal": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.2.tgz", - "integrity": "sha512-swu32idoCW7KA2VEiUZGBSu9nB6qwGdV6k6HYhUoOo3M1FFpD+VgLzUqtt3mwL1ssz7r2x8MggpLSQach2Xy/Q==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-primitive": "1.0.2" - } - }, - "@radix-ui/react-primitive": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz", - "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-slot": "1.0.1" - } - }, - "@radix-ui/react-slot": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz", - "integrity": "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-compose-refs": "1.0.0" - } - }, - "@radix-ui/react-use-escape-keydown": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.2.tgz", - "integrity": "sha512-DXGim3x74WgUv+iMNCF+cAo8xUHHeqvjx8zs7trKf+FkQKPQXLk2sX7Gx1ysH7Q76xCpZuxIJE7HLPxRE+Q+GA==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-use-callback-ref": "1.0.0" - } - }, - "react-remove-scroll": { - "version": "2.5.5", - "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz", - "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==", - "requires": { - "react-remove-scroll-bar": "^2.3.3", - "react-style-singleton": "^2.2.1", - "tslib": "^2.1.0", - "use-callback-ref": "^1.3.0", - "use-sidecar": "^1.1.2" - } - } - } - }, - "@radix-ui/react-popper": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.1.tgz", - "integrity": "sha512-keYDcdMPNMjSC8zTsZ8wezUMiWM9Yj14wtF3s0PTIs9srnEPC9Kt2Gny1T3T81mmSeyDjZxsD9N5WCwNNb712w==", - "requires": { - "@babel/runtime": "^7.13.10", - "@floating-ui/react-dom": "0.7.2", - "@radix-ui/react-arrow": "1.0.2", - "@radix-ui/react-compose-refs": "1.0.0", - "@radix-ui/react-context": "1.0.0", - "@radix-ui/react-primitive": "1.0.2", - "@radix-ui/react-use-callback-ref": "1.0.0", - "@radix-ui/react-use-layout-effect": "1.0.0", - "@radix-ui/react-use-rect": "1.0.0", - "@radix-ui/react-use-size": "1.0.0", - "@radix-ui/rect": "1.0.0" - }, - "dependencies": { - "@floating-ui/core": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz", - "integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==" - }, - "@floating-ui/dom": { - "version": "0.5.4", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz", - "integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==", - "requires": { - "@floating-ui/core": "^0.7.3" - } - }, - "@floating-ui/react-dom": { - "version": "0.7.2", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-0.7.2.tgz", - "integrity": "sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==", - "requires": { - "@floating-ui/dom": "^0.5.3", - "use-isomorphic-layout-effect": "^1.1.1" - } - }, - "@radix-ui/react-primitive": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz", - "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-slot": "1.0.1" - } - }, - "@radix-ui/react-slot": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz", - "integrity": "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-compose-refs": "1.0.0" - } - } - } - }, "@radix-ui/react-portal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.0.tgz", @@ -62408,43 +61686,6 @@ "@radix-ui/react-slot": "1.0.0" } }, - "@radix-ui/react-roving-focus": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.3.tgz", - "integrity": "sha512-stjCkIoMe6h+1fWtXlA6cRfikdBzCLp3SnVk7c48cv/uy3DTGoXhN76YaOYUJuy3aEDvDIKwKR5KSmvrtPvQPQ==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/primitive": "1.0.0", - "@radix-ui/react-collection": "1.0.2", - "@radix-ui/react-compose-refs": "1.0.0", - "@radix-ui/react-context": "1.0.0", - "@radix-ui/react-direction": "1.0.0", - "@radix-ui/react-id": "1.0.0", - "@radix-ui/react-primitive": "1.0.2", - "@radix-ui/react-use-callback-ref": "1.0.0", - "@radix-ui/react-use-controllable-state": "1.0.0" - }, - "dependencies": { - "@radix-ui/react-primitive": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz", - "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-slot": "1.0.1" - } - }, - "@radix-ui/react-slot": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz", - "integrity": "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-compose-refs": "1.0.0" - } - } - } - }, "@radix-ui/react-select": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-1.2.2.tgz", @@ -62771,24 +62012,6 @@ "@babel/runtime": "^7.13.10" } }, - "@radix-ui/react-use-rect": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.0.tgz", - "integrity": "sha512-TB7pID8NRMEHxb/qQJpvSt3hQU4sqNPM1VCTjTRjEOa7cEop/QMuq8S6fb/5Tsz64kqSvB9WnwsDHtjnrM9qew==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/rect": "1.0.0" - } - }, - "@radix-ui/react-use-size": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.0.tgz", - "integrity": "sha512-imZ3aYcoYCKhhgNpkNDh/aTiU05qw9hX+HHI1QDBTyIlcFjgeFlKKySNGMwTp7nYFLQg/j0VA2FmCY4WPDDHMg==", - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-use-layout-effect": "1.0.0" - } - }, "@radix-ui/react-visually-hidden": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz", @@ -62830,14 +62053,6 @@ } } }, - "@radix-ui/rect": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.0.tgz", - "integrity": "sha512-d0O68AYy/9oeEy1DdC07bz1/ZXX+DqCskRd3i4JzLSTXwefzaepQrKjXC7aNM8lTHjFLDO0pDgaEiQ7jEk+HVg==", - "requires": { - "@babel/runtime": "^7.13.10" - } - }, "@react-native-clipboard/clipboard": { "version": "1.11.2", "resolved": "https://registry.npmjs.org/@react-native-clipboard/clipboard/-/clipboard-1.11.2.tgz", @@ -70152,7 +69367,7 @@ "@wordpress/components": { "version": "file:packages/components", "requires": { - "@ariakit/react": "^0.3.5", + "@ariakit/react": "^0.3.10", "@babel/runtime": "^7.16.0", "@emotion/cache": "^11.7.1", "@emotion/css": "^11.7.1", @@ -70161,7 +69376,6 @@ "@emotion/styled": "^11.6.0", "@emotion/utils": "^1.0.0", "@floating-ui/react-dom": "^2.0.1", - "@radix-ui/react-dropdown-menu": "2.0.4", "@types/gradient-parser": "0.1.3", "@types/highlight-words-core": "1.2.1", "@use-gesture/react": "^10.2.24", @@ -70205,6 +69419,29 @@ "valtio": "1.7.0" }, "dependencies": { + "@ariakit/core": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.3.8.tgz", + "integrity": "sha512-LlSCwbyyozMX4ZEobpYGcv1LFqOdBTdTYPZw3lAVgLcFSNivsazi3NkKM9qNWNIu00MS+xTa0+RuIcuWAjlB2Q==" + }, + "@ariakit/react": { + "version": "0.3.10", + "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.3.10.tgz", + "integrity": "sha512-XRY69IOm8Oy+HSPoaspcVLAhLo3ToLhhJKSLK1voTAZtSzu5kUeUf4nUPxTzYFsvirKORZgOLAeNwuo1gPr61g==", + "requires": { + "@ariakit/react-core": "0.3.10" + } + }, + "@ariakit/react-core": { + "version": "0.3.10", + "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.3.10.tgz", + "integrity": "sha512-CzSffcNlOyS2xuy21UB6fgJXi5LriJ9JrTSJzcgJmE+P9/WfQlplJC3L75d8O2yKgaGPeFnQ0hhDA6ItsI98eQ==", + "requires": { + "@ariakit/core": "0.3.8", + "@floating-ui/dom": "^1.0.0", + "use-sync-external-store": "^1.2.0" + } + }, "@floating-ui/react-dom": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.1.tgz", @@ -96891,11 +96128,6 @@ "tslib": "^2.0.0" } }, - "use-isomorphic-layout-effect": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", - "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==" - }, "use-latest-callback": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.6.tgz", diff --git a/package.json b/package.json index 489a55cd904538..4587306d20a3b0 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "devDependencies": { "@actions/core": "1.9.1", "@actions/github": "5.0.0", - "@ariakit/test": "^0.3.0", + "@ariakit/test": "^0.3.5", "@babel/core": "7.16.0", "@babel/plugin-proposal-export-namespace-from": "7.18.9", "@babel/plugin-syntax-jsx": "7.16.0", @@ -392,4 +392,4 @@ ], "welcome-build-command": "npm run dev" } -} +} \ No newline at end of file diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap index 3942c05ce96f11..7a04f41a29b050 100644 --- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap +++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap @@ -221,7 +221,6 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` aria-selected="true" class="components-button components-circular-option-picker__option" data-active-item="" - data-command="" id="components-circular-option-picker-0-0" role="option" style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);" diff --git a/packages/block-editor/src/components/provider/test/use-block-sync.js b/packages/block-editor/src/components/provider/test/use-block-sync.js index 09529c197516a3..9b16e966249fa7 100644 --- a/packages/block-editor/src/components/provider/test/use-block-sync.js +++ b/packages/block-editor/src/components/provider/test/use-block-sync.js @@ -263,13 +263,13 @@ describe( 'useBlockSync hook', () => { expect( onInput ).toHaveBeenCalledWith( [ { clientId: 'a', innerBlocks: [], attributes: { foo: 2 } } ], - { + expect.objectContaining( { selection: { selectionEnd: {}, selectionStart: {}, initialPosition: null, }, - } + } ) ); expect( onChange ).not.toHaveBeenCalled(); } ); @@ -303,13 +303,13 @@ describe( 'useBlockSync hook', () => { expect( onChange ).toHaveBeenCalledWith( [ { clientId: 'a', innerBlocks: [], attributes: { foo: 2 } } ], - { + expect.objectContaining( { selection: { selectionEnd: {}, selectionStart: {}, initialPosition: null, }, - } + } ) ); expect( onInput ).not.toHaveBeenCalled(); } ); @@ -406,13 +406,13 @@ describe( 'useBlockSync hook', () => { attributes: { foo: 2 }, }, ], - { + expect.objectContaining( { selection: { selectionEnd: {}, selectionStart: {}, initialPosition: null, }, - } + } ) ); expect( onInput ).not.toHaveBeenCalled(); } ); @@ -447,13 +447,16 @@ describe( 'useBlockSync hook', () => { { clientId: 'a', innerBlocks: [], attributes: { foo: 2 } }, ]; - expect( onChange1 ).toHaveBeenCalledWith( updatedBlocks1, { - selection: { - initialPosition: null, - selectionEnd: {}, - selectionStart: {}, - }, - } ); + expect( onChange1 ).toHaveBeenCalledWith( + updatedBlocks1, + expect.objectContaining( { + selection: { + initialPosition: null, + selectionEnd: {}, + selectionStart: {}, + }, + } ) + ); const newBlocks = [ { clientId: 'b', innerBlocks: [], attributes: { foo: 1 } }, @@ -485,13 +488,13 @@ describe( 'useBlockSync hook', () => { // The second callback should be called with the new change. expect( onChange2 ).toHaveBeenCalledWith( [ { clientId: 'b', innerBlocks: [], attributes: { foo: 3 } } ], - { + expect.objectContaining( { selection: { selectionEnd: {}, selectionStart: {}, initialPosition: null, }, - } + } ) ); } ); @@ -544,13 +547,13 @@ describe( 'useBlockSync hook', () => { // Only the new callback should be called. expect( onChange2 ).toHaveBeenCalledWith( [ { clientId: 'b', innerBlocks: [], attributes: { foo: 3 } } ], - { + expect.objectContaining( { selection: { selectionEnd: {}, selectionStart: {}, initialPosition: null, }, - } + } ) ); } ); } ); diff --git a/packages/block-editor/src/components/provider/use-block-sync.js b/packages/block-editor/src/components/provider/use-block-sync.js index 4f2300f380892e..969c0f1e4d1c5e 100644 --- a/packages/block-editor/src/components/provider/use-block-sync.js +++ b/packages/block-editor/src/components/provider/use-block-sync.js @@ -9,6 +9,7 @@ import { cloneBlock } from '@wordpress/blocks'; * Internal dependencies */ import { store as blockEditorStore } from '../../store'; +import { undoIgnoreBlocks } from '../../store/undo-ignore'; const noop = () => {}; @@ -264,6 +265,10 @@ export default function useBlockSync( { const updateParent = isPersistent ? onChangeRef.current : onInputRef.current; + const undoIgnore = undoIgnoreBlocks.has( blocks ); + if ( undoIgnore ) { + undoIgnoreBlocks.delete( blocks ); + } updateParent( blocks, { selection: { selectionStart: getSelectionStart(), @@ -271,6 +276,7 @@ export default function useBlockSync( { initialPosition: getSelectedBlocksInitialCaretPosition(), }, + undoIgnore, } ); } previousAreBlocksDifferent = areBlocksDifferent; diff --git a/packages/block-editor/src/store/private-actions.js b/packages/block-editor/src/store/private-actions.js index 1c29948d814165..48c5d15d469be4 100644 --- a/packages/block-editor/src/store/private-actions.js +++ b/packages/block-editor/src/store/private-actions.js @@ -3,6 +3,11 @@ */ import { Platform } from '@wordpress/element'; +/** + * Internal dependencies + */ +import { undoIgnoreBlocks } from './undo-ignore'; + const castArray = ( maybeArray ) => Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ]; @@ -291,10 +296,30 @@ export function deleteStyleOverride( id ) { }; } -export function syncDerivedBlockAttributes( clientId, attributes ) { - return { - type: 'SYNC_DERIVED_BLOCK_ATTRIBUTES', - clientIds: [ clientId ], - attributes, +/** + * A higher-order action that mark every change inside a callback as "non-persistent" + * and ignore pushing to the undo history stack. It's primarily used for synchronized + * derived updates from the block editor without affecting the undo history. + * + * @param {() => void} callback The synchronous callback to derive updates. + */ +export function syncDerivedUpdates( callback ) { + return ( { dispatch, select, registry } ) => { + registry.batch( () => { + // Mark every change in the `callback` as non-persistent. + dispatch( { + type: 'SET_EXPLICIT_PERSISTENT', + isPersistentChange: false, + } ); + callback(); + dispatch( { + type: 'SET_EXPLICIT_PERSISTENT', + isPersistentChange: undefined, + } ); + + // Ignore pushing undo stack for the updated blocks. + const updatedBlocks = select.getBlocks(); + undoIgnoreBlocks.add( updatedBlocks ); + } ); }; } diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 5319a3b2553654..11811afd83f6fe 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -453,14 +453,25 @@ const withBlockTree = function withPersistentBlockChange( reducer ) { let lastAction; let markNextChangeAsNotPersistent = false; + let explicitPersistent; return ( state, action ) => { let nextState = reducer( state, action ); - if ( action.type === 'SYNC_DERIVED_BLOCK_ATTRIBUTES' ) { - return nextState.isPersistentChange - ? { ...nextState, isPersistentChange: false } - : nextState; + let nextIsPersistentChange; + if ( action.type === 'SET_EXPLICIT_PERSISTENT' ) { + explicitPersistent = action.isPersistentChange; + nextIsPersistentChange = state.isPersistentChange ?? true; + } + + if ( explicitPersistent !== undefined ) { + nextIsPersistentChange = explicitPersistent; + return nextIsPersistentChange === nextState.isPersistentChange + ? nextState + : { + ...nextState, + isPersistentChange: nextIsPersistentChange, + }; } const isExplicitPersistentChange = @@ -473,7 +484,7 @@ function withPersistentBlockChange( reducer ) { markNextChangeAsNotPersistent = action.type === 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT'; - const nextIsPersistentChange = state?.isPersistentChange ?? true; + nextIsPersistentChange = state?.isPersistentChange ?? true; if ( state.isPersistentChange === nextIsPersistentChange ) { return state; } diff --git a/packages/block-editor/src/store/undo-ignore.js b/packages/block-editor/src/store/undo-ignore.js new file mode 100644 index 00000000000000..f0a64428ea7c26 --- /dev/null +++ b/packages/block-editor/src/store/undo-ignore.js @@ -0,0 +1,4 @@ +// Keep track of the blocks that should not be pushing an additional +// undo stack when editing the entity. +// See the implementation of `syncDerivedUpdates` and `useBlockSync`. +export const undoIgnoreBlocks = new WeakSet(); diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index fbfef0b4cf1778..67b2680f6840ed 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -137,6 +137,7 @@ export default function ReusableBlockEdit( { attributes: { ref, overrides }, __unstableParentLayout: parentLayout, clientId: patternClientId, + setAttributes, } ) { const registry = useRegistry(); const hasAlreadyRendered = useHasRecursion( ref ); @@ -154,7 +155,9 @@ export default function ReusableBlockEdit( { setBlockEditingMode, } = useDispatch( blockEditorStore ); const { getBlockEditingMode } = useSelect( blockEditorStore ); + const { syncDerivedUpdates } = unlock( useDispatch( blockEditorStore ) ); + // Apply the initial overrides from the pattern block to the inner blocks. useEffect( () => { const initialBlocks = editedRecord.blocks ?? @@ -164,17 +167,19 @@ export default function ReusableBlockEdit( { defaultValuesRef.current = {}; const editingMode = getBlockEditingMode( patternClientId ); + // Replace the contents of the blocks with the overrides. registry.batch( () => { setBlockEditingMode( patternClientId, 'default' ); - __unstableMarkNextChangeAsNotPersistent(); - replaceInnerBlocks( - patternClientId, - applyInitialOverrides( - initialBlocks, - initialOverrides.current, - defaultValuesRef.current - ) - ); + syncDerivedUpdates( () => { + replaceInnerBlocks( + patternClientId, + applyInitialOverrides( + initialBlocks, + initialOverrides.current, + defaultValuesRef.current + ) + ); + } ); setBlockEditingMode( patternClientId, editingMode ); } ); }, [ @@ -185,6 +190,7 @@ export default function ReusableBlockEdit( { registry, getBlockEditingMode, setBlockEditingMode, + syncDerivedUpdates, ] ); const innerBlocks = useSelect( @@ -220,29 +226,26 @@ export default function ReusableBlockEdit( { : InnerBlocks.ButtonBlockAppender, } ); - // Sync the `overrides` attribute from the updated blocks. - // `syncDerivedBlockAttributes` is an action that just like `updateBlockAttributes` - // but won't create an undo level. - // This can be abstracted into a `useSyncDerivedAttributes` hook if needed. + // Sync the `overrides` attribute from the updated blocks to the pattern block. + // `syncDerivedUpdates` is used here to avoid creating an additional undo level. useEffect( () => { const { getBlocks } = registry.select( blockEditorStore ); - const { syncDerivedBlockAttributes } = unlock( - registry.dispatch( blockEditorStore ) - ); let prevBlocks = getBlocks( patternClientId ); return registry.subscribe( () => { const blocks = getBlocks( patternClientId ); if ( blocks !== prevBlocks ) { prevBlocks = blocks; - syncDerivedBlockAttributes( patternClientId, { - overrides: getOverridesFromBlocks( - blocks, - defaultValuesRef.current - ), + syncDerivedUpdates( () => { + setAttributes( { + overrides: getOverridesFromBlocks( + blocks, + defaultValuesRef.current + ), + } ); } ); } }, blockEditorStore ); - }, [ patternClientId, registry ] ); + }, [ syncDerivedUpdates, patternClientId, registry, setAttributes ] ); let children = null; diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 093dea189bdf7b..f23b7ae308ede0 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -4,6 +4,7 @@ ### Bug Fix +- `DropdownMenu V2 `: better fallback on browsers that don't support CSS subgrid([#57327](https://github.com/WordPress/gutenberg/pull/57327)). - `FontSizePicker`: Use Button API for keeping focus on reset ([#57221](https://github.com/WordPress/gutenberg/pull/57221)). - `FontSizePicker`: Fix Reset button focus loss ([#57196](https://github.com/WordPress/gutenberg/pull/57196)). - `PaletteEdit`: Consider digits when generating kebab-cased slug ([#56713](https://github.com/WordPress/gutenberg/pull/56713)). @@ -16,12 +17,14 @@ ### Enhancements +- Update `ariakit` to version `0.3.10` ([#57325](https://github.com/WordPress/gutenberg/pull/57325)). - `DropdownMenuV2`: do not collapse suffix width ([#57238](https://github.com/WordPress/gutenberg/pull/57238)). - `DateTimePicker`: Adjustment of the dot position on DayButton and expansion of the button area. ([#55502](https://github.com/WordPress/gutenberg/pull/55502)). - `Modal`: Improve application of body class names ([#55430](https://github.com/WordPress/gutenberg/pull/55430)). ### Experimental +- `DropdownMenuV2`: remove temporary radix UI based implementation ([#55626](https://github.com/WordPress/gutenberg/pull/55626)). - `Tabs`: do not render hidden content ([#57046](https://github.com/WordPress/gutenberg/pull/57046)). - `Tabs`: improve hover and text alignment styles ([#57275](https://github.com/WordPress/gutenberg/pull/57275)). - `Tabs`: make sure `Tab`s are associated to the right `TabPanel`s, regardless of the order they're rendered in ([#57033](https://github.com/WordPress/gutenberg/pull/57033)). diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md index 825ce9eb506dfa..c948a8d389d68b 100644 --- a/packages/components/CONTRIBUTING.md +++ b/packages/components/CONTRIBUTING.md @@ -19,7 +19,6 @@ For an example of a component that follows these requirements, take a look at [` - [Documentation](#documentation) - [README example](#README-example) - [Folder structure](#folder-structure) -- [Using Radix UI primitives](#using-radix-ui-primitives) ## Introducing new components @@ -592,12 +591,3 @@ component-family-name/ ├── types.ts └── utils.ts ``` - -## Using Radix UI primitives - -Useful links: - -- [online docs](https://www.radix-ui.com/docs/primitives/overview/introduction) -- [repo](https://github.com/radix-ui/primitives) — useful for: - - inspecting source code - - running storybook examples (`yarn install && yarn dev`) diff --git a/packages/components/package.json b/packages/components/package.json index b7581679d90947..885c1e455fea40 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -30,7 +30,7 @@ ], "types": "build-types", "dependencies": { - "@ariakit/react": "^0.3.5", + "@ariakit/react": "^0.3.10", "@babel/runtime": "^7.16.0", "@emotion/cache": "^11.7.1", "@emotion/css": "^11.7.1", @@ -39,7 +39,6 @@ "@emotion/styled": "^11.6.0", "@emotion/utils": "^1.0.0", "@floating-ui/react-dom": "^2.0.1", - "@radix-ui/react-dropdown-menu": "2.0.4", "@types/gradient-parser": "0.1.3", "@types/highlight-words-core": "1.2.1", "@use-gesture/react": "^10.2.24", @@ -89,4 +88,4 @@ "publishConfig": { "access": "public" } -} +} \ No newline at end of file diff --git a/packages/components/src/card/card/README.md b/packages/components/src/card/card/README.md index c7b70c8c6c907a..5a97913c884076 100644 --- a/packages/components/src/card/card/README.md +++ b/packages/components/src/card/card/README.md @@ -99,7 +99,7 @@ const Example = () => ( - ... + ... ); ``` diff --git a/packages/components/src/dropdown-menu-v2-ariakit/README.md b/packages/components/src/dropdown-menu-v2-ariakit/README.md deleted file mode 100644 index 2902b541169766..00000000000000 --- a/packages/components/src/dropdown-menu-v2-ariakit/README.md +++ /dev/null @@ -1,331 +0,0 @@ -# `DropdownMenu` (v2) - -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- -`DropdownMenu` displays a menu to the user (such as a set of actions or functions) triggered by a button. - - -## Design guidelines - -### Usage - -#### When to use a DropdownMenu - -Use a DropdownMenu when you want users to: - -- Choose an action or change a setting from a list, AND -- Only see the available choices contextually. - -`DropdownMenu` is a React component to render an expandable menu of buttons. It is similar in purpose to a `