diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml index f8ff0441a95b7b..e4d9da813417eb 100644 --- a/.github/workflows/rnmobile-android-runner.yml +++ b/.github/workflows/rnmobile-android-runner.yml @@ -37,7 +37,7 @@ jobs: uses: ./.github/setup-node - name: Restore tests setup cache - uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2 + uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0 with: path: | ~/.appium @@ -52,7 +52,7 @@ jobs: # AVD cache disabled as it caused emulator termination to hang indefinitely. # https://github.com/ReactiveCircus/android-emulator-runner/issues/385 # - name: AVD cache - # uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2 + # uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0 # id: avd-cache # with: # path: | diff --git a/.github/workflows/rnmobile-ios-runner.yml b/.github/workflows/rnmobile-ios-runner.yml index d28ee65c719e43..e1e7fd8c755c97 100644 --- a/.github/workflows/rnmobile-ios-runner.yml +++ b/.github/workflows/rnmobile-ios-runner.yml @@ -42,7 +42,7 @@ jobs: uses: ./.github/setup-node - name: Restore tests setup cache - uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2 + uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0 with: path: | ~/.appium @@ -55,7 +55,7 @@ jobs: run: find package-lock.json packages/react-native-editor/ios packages/react-native-aztec/ios packages/react-native-bridge/ios -type f -print0 | sort -z | xargs -0 shasum | tee ios-checksums.txt - name: Restore build cache - uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2 + uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0 with: path: | packages/react-native-editor/ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app @@ -63,7 +63,7 @@ jobs: key: ${{ runner.os }}-ios-build-${{ matrix.xcode }}-${{ matrix.device }}-${{ hashFiles('ios-checksums.txt') }} - name: Restore pods cache - uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2 + uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0 with: path: | packages/react-native-editor/ios/Pods diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml index 46aa109c23e658..efc7ef76f8c648 100644 --- a/.github/workflows/unit-test.yml +++ b/.github/workflows/unit-test.yml @@ -296,7 +296,7 @@ jobs: run: echo "date=$(/bin/date -u --date='last Mon' "+%F")" >> $GITHUB_OUTPUT - name: Cache PHPCS scan cache - uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2 + uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0 with: path: .cache/phpcs.json key: ${{ runner.os }}-date-${{ steps.get-date.outputs.date }}-phpcs-cache-${{ hashFiles('**/composer.json', 'phpcs.xml.dist') }} diff --git a/backport-changelog/6.8/7069.md b/backport-changelog/6.8/7069.md index 69edbde58902d1..3e734637ddbb2f 100644 --- a/backport-changelog/6.8/7069.md +++ b/backport-changelog/6.8/7069.md @@ -3,3 +3,4 @@ https://github.com/WordPress/wordpress-develop/pull/7069 * https://github.com/WordPress/gutenberg/pull/63401 * https://github.com/WordPress/gutenberg/pull/66918 * https://github.com/WordPress/gutenberg/pull/67018 +* https://github.com/WordPress/gutenberg/pull/67552 diff --git a/backport-changelog/6.8/7976.md b/backport-changelog/6.8/7976.md new file mode 100644 index 00000000000000..e2942d5e4fbe15 --- /dev/null +++ b/backport-changelog/6.8/7976.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/7976 + +* https://github.com/WordPress/gutenberg/pull/67716 \ No newline at end of file diff --git a/docs/contributors/code/e2e/README.md b/docs/contributors/code/e2e/README.md index 3a123cc2988b7a..5aa4e21be909fe 100644 --- a/docs/contributors/code/e2e/README.md +++ b/docs/contributors/code/e2e/README.md @@ -75,7 +75,7 @@ To encourage better practices for querying elements, selectors are [strict](http ### Favor Page Object Model over utils -As mentioned above, [Page Object Model](https://playwright.dev/docs/test-pom) is the preferred way to create reusable utility functions on a certain page. +As mentioned above, [Page Object Model](https://playwright.dev/docs/pom) is the preferred way to create reusable utility functions on a certain page. The rationale behind using a POM is to group utils under namespaces to be easier to discover and use. In fact, `PageUtils` in the `e2e-test-utils-playwright` package is also a POM, which avoids the need for global variables, and utils can reference each other with `this`. diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 29033e278c3488..7800eae6c7f2ea 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -660,7 +660,7 @@ Contains the block elements used to render a post, like the title, date, feature - **Name:** core/post-template - **Category:** theme -- **Parent:** core/query +- **Ancestor:** core/query - **Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), layout, spacing (blockGap), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ ## Post Terms @@ -724,7 +724,7 @@ Contains the block elements used to render content when no query results are fou - **Name:** core/query-no-results - **Category:** theme -- **Parent:** core/query +- **Ancestor:** core/query - **Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ ## Pagination diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 083ce3516b71af..778dcdbec78d96 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1319,6 +1319,8 @@ public function get_settings() { * - `variables`: only the CSS Custom Properties for presets & custom ones. * - `styles`: only the styles section in theme.json. * - `presets`: only the classes for the presets. + * - `base-layout-styles`: only the base layout styles. + * - `custom-css`: only the custom CSS. * @param array $origins A list of origins to include. By default it includes VALID_ORIGINS. * @param array $options An array of options for now used for internal purposes only (may change without notice). * The options currently supported are: diff --git a/lib/compat/wordpress-6.8/blocks.php b/lib/compat/wordpress-6.8/blocks.php index 4d4bdee2bb393b..e0f5082bfce8dc 100644 --- a/lib/compat/wordpress-6.8/blocks.php +++ b/lib/compat/wordpress-6.8/blocks.php @@ -71,6 +71,10 @@ function gutenberg_stabilize_experimental_block_supports( $args ) { } $stabilize_config = function ( $unstable_config, $stable_support_key ) use ( $experimental_support_properties, $common_experimental_properties ) { + if ( ! is_array( $unstable_config ) ) { + return $unstable_config; + } + $stable_config = array(); foreach ( $unstable_config as $key => $value ) { // Get stable key from support-specific map, common properties map, or keep original. @@ -116,18 +120,19 @@ function gutenberg_stabilize_experimental_block_supports( $args ) { ( $key_positions[ $support ] ?? PHP_INT_MAX ) < ( $key_positions[ $stable_support_key ] ?? PHP_INT_MAX ); - if ( is_array( $args['supports'][ $stable_support_key ] ) ) { - /* - * To merge the alternative support config effectively, it also needs to be - * stabilized before merging to keep stabilized and experimental flags in - * sync. - */ - $args['supports'][ $stable_support_key ] = $stabilize_config( $args['supports'][ $stable_support_key ], $stable_support_key ); - $stable_config = $experimental_first + /* + * To merge the alternative support config effectively, it also needs to be + * stabilized before merging to keep stabilized and experimental flags in + * sync. + */ + $args['supports'][ $stable_support_key ] = $stabilize_config( $args['supports'][ $stable_support_key ], $stable_support_key ); + // Prevents reprocessing this support as it was stabilized above. + $done[ $stable_support_key ] = true; + + if ( is_array( $stable_config ) && is_array( $args['supports'][ $stable_support_key ] ) ) { + $stable_config = $experimental_first ? array_merge( $stable_config, $args['supports'][ $stable_support_key ] ) : array_merge( $args['supports'][ $stable_support_key ], $stable_config ); - // Prevents reprocessing this support as it was merged above. - $done[ $stable_support_key ] = true; } else { $stable_config = $experimental_first ? $args['supports'][ $stable_support_key ] diff --git a/lib/experimental/blocks.php b/lib/experimental/blocks.php index 68113276ec1c06..b4bf0d409b1596 100644 --- a/lib/experimental/blocks.php +++ b/lib/experimental/blocks.php @@ -117,3 +117,22 @@ function gutenberg_register_block_style( $block_name, $style_properties ) { return $result; } + +/** + * Additional data to expose to the view script module in the Form block. + */ +function gutenberg_block_core_form_view_script_module( $data ) { + if ( ! gutenberg_is_experiment_enabled( 'gutenberg-form-blocks' ) ) { + return $data; + } + + $data['nonce'] = wp_create_nonce( 'wp-block-form' ); + $data['ajaxUrl'] = admin_url( 'admin-ajax.php' ); + $data['action'] = 'wp_block_form_email_submit'; + + return $data; +} +add_filter( + 'script_module_data_@wordpress/block-library/form/view', + 'gutenberg_block_core_form_view_script_module' +); diff --git a/lib/global-styles-and-settings.php b/lib/global-styles-and-settings.php index c4446cf29cf011..3ff5e6cb135e18 100644 --- a/lib/global-styles-and-settings.php +++ b/lib/global-styles-and-settings.php @@ -9,7 +9,7 @@ * Returns the stylesheet resulting of merging core, theme, and user data. * * @param array $types Types of styles to load. Optional. - * It accepts as values: 'variables', 'presets', 'styles', 'base-layout-styles. + * See {@see 'WP_Theme_JSON::get_stylesheet'} for all valid types. * If empty, it'll load the following: * - for themes without theme.json: 'variables', 'presets', 'base-layout-styles'. * - for themes with theme.json: 'variables', 'presets', 'styles'. @@ -142,6 +142,8 @@ function gutenberg_get_global_settings( $path = array(), $context = array() ) { /** * Gets the global styles custom css from theme.json. * + * @deprecated Gutenberg 18.6.0 Use {@see 'gutenberg_get_global_stylesheet'} instead for top-level custom CSS, or {@see 'WP_Theme_JSON_Gutenberg::get_styles_for_block'} for block-level custom CSS. + * * @return string */ function gutenberg_get_global_styles_custom_css() { diff --git a/package-lock.json b/package-lock.json index 3084fd5f034401..a17e89f944c72b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -140,8 +140,8 @@ "resize-observer-polyfill": "1.5.1", "rimraf": "3.0.2", "rtlcss": "4.0.0", - "sass": "1.35.2", - "sass-loader": "12.1.0", + "sass": "1.50.1", + "sass-loader": "16.0.3", "semver": "7.5.4", "simple-git": "3.24.0", "snapshot-diff": "0.10.0", @@ -153,10 +153,10 @@ "style-loader": "3.2.1", "terser": "5.32.0", "terser-webpack-plugin": "5.3.10", - "typescript": "5.5.3", + "typescript": "5.7.2", "uuid": "9.0.1", "webdriverio": "8.16.20", - "webpack": "5.95.0", + "webpack": "5.97.0", "webpack-bundle-analyzer": "4.9.1", "worker-farm": "1.7.0" }, @@ -14681,9 +14681,10 @@ } }, "node_modules/@types/bonjour": { - "version": "3.5.11", - "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.11.tgz", - "integrity": "sha512-isGhjmBtLIxdHBDl2xGwUzEM8AOyOvWsADWq7rqirdi/ZQoHnLWErHvsThcEzTX8juDRiZtzp2Qkv5bgNh6mAg==", + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.13.tgz", + "integrity": "sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==", + "license": "MIT", "dependencies": { "@types/node": "*" } @@ -14708,9 +14709,10 @@ } }, "node_modules/@types/connect-history-api-fallback": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.1.tgz", - "integrity": "sha512-iaQslNbARe8fctL5Lk+DsmgWOM83lM+7FzP0eQUJs1jd3kBE8NWqBTIT2S8SqQOJjxvt2eyIjpOuYeRXq2AdMw==", + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.4.tgz", + "integrity": "sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==", + "license": "MIT", "dependencies": { "@types/express-serve-static-core": "*", "@types/node": "*" @@ -14759,12 +14761,21 @@ "version": "8.56.9", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.9.tgz", "integrity": "sha512-W4W3KcqzjJ0sHg2vAq9vfml6OhsJ53TcUjUqfzzZf/EChUtwspszj/S0pzMxnfRcO55/iGq47dscXw71Fxc4Zg==", - "dev": true, "dependencies": { "@types/estree": "*", "@types/json-schema": "*" } }, + "node_modules/@types/eslint-scope": { + "version": "3.7.7", + "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz", + "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==", + "license": "MIT", + "dependencies": { + "@types/eslint": "*", + "@types/estree": "*" + } + }, "node_modules/@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", @@ -14974,7 +14985,8 @@ "node_modules/@types/mime": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.3.tgz", - "integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==" + "integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==", + "dev": true }, "node_modules/@types/mime-types": { "version": "2.1.4", @@ -15031,6 +15043,15 @@ "form-data": "^4.0.0" } }, + "node_modules/@types/node-forge": { + "version": "1.3.11", + "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.11.tgz", + "integrity": "sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==", + "license": "MIT", + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/normalize-package-data": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.2.tgz", @@ -15158,9 +15179,10 @@ } }, "node_modules/@types/retry": { - "version": "0.12.1", - "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz", - "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==" + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", + "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==", + "license": "MIT" }, "node_modules/@types/scheduler": { "version": "0.16.2", @@ -15197,21 +15219,23 @@ } }, "node_modules/@types/serve-index": { - "version": "1.9.1", - "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz", - "integrity": "sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==", + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.4.tgz", + "integrity": "sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==", + "license": "MIT", "dependencies": { "@types/express": "*" } }, "node_modules/@types/serve-static": { - "version": "1.15.2", - "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.2.tgz", - "integrity": "sha512-J2LqtvFYCzaj8pVYKw8klQXrLLk7TBZmQ4ShlcdkELFKGwGMfevMLneMMRkMgZxotOD9wg497LpC7O8PcvAmfw==", + "version": "1.15.7", + "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.7.tgz", + "integrity": "sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==", + "license": "MIT", "dependencies": { "@types/http-errors": "*", - "@types/mime": "*", - "@types/node": "*" + "@types/node": "*", + "@types/send": "*" } }, "node_modules/@types/shell-quote": { @@ -15229,9 +15253,10 @@ } }, "node_modules/@types/sockjs": { - "version": "0.3.33", - "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz", - "integrity": "sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==", + "version": "0.3.36", + "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.36.tgz", + "integrity": "sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==", + "license": "MIT", "dependencies": { "@types/node": "*" } @@ -16908,24 +16933,27 @@ } }, "node_modules/@webassemblyjs/helper-numbers": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz", - "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz", + "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==", + "license": "MIT", "dependencies": { - "@webassemblyjs/floating-point-hex-parser": "1.11.6", - "@webassemblyjs/helper-api-error": "1.11.6", + "@webassemblyjs/floating-point-hex-parser": "1.13.2", + "@webassemblyjs/helper-api-error": "1.13.2", "@xtuc/long": "4.2.2" } }, "node_modules/@webassemblyjs/helper-numbers/node_modules/@webassemblyjs/floating-point-hex-parser": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz", - "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==" + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz", + "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==", + "license": "MIT" }, "node_modules/@webassemblyjs/helper-numbers/node_modules/@webassemblyjs/helper-api-error": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz", - "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==" + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz", + "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==", + "license": "MIT" }, "node_modules/@webassemblyjs/helper-wasm-bytecode": { "version": "1.9.0", @@ -17649,14 +17677,6 @@ "node": ">=0.4.0" } }, - "node_modules/acorn-import-attributes": { - "version": "1.9.5", - "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz", - "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==", - "peerDependencies": { - "acorn": "^8" - } - }, "node_modules/acorn-jsx": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz", @@ -19144,7 +19164,6 @@ "version": "9.2.1", "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.2.1.tgz", "integrity": "sha512-fqe8naHt46e0yIdkjUZYqddSXfej3AHajX+CSO5X7oy0EmPc6o5Xh+RClNoHjnieWz9AW4kZxW9yyFMhVB1QLA==", - "dev": true, "license": "MIT", "dependencies": { "find-cache-dir": "^4.0.0", @@ -19162,7 +19181,6 @@ "version": "8.17.1", "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", - "dev": true, "license": "MIT", "dependencies": { "fast-deep-equal": "^3.1.3", @@ -19179,7 +19197,6 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz", "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==", - "dev": true, "dependencies": { "fast-deep-equal": "^3.1.3" }, @@ -19191,7 +19208,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-4.0.0.tgz", "integrity": "sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==", - "dev": true, "dependencies": { "common-path-prefix": "^3.0.0", "pkg-dir": "^7.0.0" @@ -19207,7 +19223,6 @@ "version": "6.3.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-6.3.0.tgz", "integrity": "sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==", - "dev": true, "dependencies": { "locate-path": "^7.1.0", "path-exists": "^5.0.0" @@ -19222,14 +19237,12 @@ "node_modules/babel-loader/node_modules/json-schema-traverse": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", - "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", - "dev": true + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" }, "node_modules/babel-loader/node_modules/locate-path": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-7.2.0.tgz", "integrity": "sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==", - "dev": true, "dependencies": { "p-locate": "^6.0.0" }, @@ -19244,7 +19257,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz", "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==", - "dev": true, "dependencies": { "yocto-queue": "^1.0.0" }, @@ -19259,7 +19271,6 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-6.0.0.tgz", "integrity": "sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==", - "dev": true, "dependencies": { "p-limit": "^4.0.0" }, @@ -19274,7 +19285,6 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-5.0.0.tgz", "integrity": "sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==", - "dev": true, "engines": { "node": "^12.20.0 || ^14.13.1 || >=16.0.0" } @@ -19283,7 +19293,6 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-7.0.0.tgz", "integrity": "sha512-Ie9z/WINcxxLp27BKOCHGde4ITq9UklYKDzVo1nhk5sqGEXU3FpkwP5GM2voTGJkGd9B3Otl+Q4uwSOeSUtOBA==", - "dev": true, "dependencies": { "find-up": "^6.3.0" }, @@ -19298,7 +19307,6 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz", "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==", - "dev": true, "dependencies": { "@types/json-schema": "^7.0.9", "ajv": "^8.9.0", @@ -19317,7 +19325,6 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.1.tgz", "integrity": "sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==", - "dev": true, "license": "MIT", "engines": { "node": ">=12.20" @@ -19939,21 +19946,15 @@ } }, "node_modules/bonjour-service": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.1.1.tgz", - "integrity": "sha512-Z/5lQRMOG9k7W+FkeGTNjh7htqn/2LMnfOvBZ8pynNZCM9MwkQkI3zeI4oz09uWdcgmgHugVvBqxGg4VQJ5PCg==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.3.0.tgz", + "integrity": "sha512-3YuAUiSkWykd+2Azjgyxei8OWf8thdn8AITIog2M4UICzoqfjlqr64WIjEXZllf/W6vK1goqleSR6brGomxQqA==", + "license": "MIT", "dependencies": { - "array-flatten": "^2.1.2", - "dns-equal": "^1.0.0", "fast-deep-equal": "^3.1.3", "multicast-dns": "^7.2.5" } }, - "node_modules/bonjour-service/node_modules/array-flatten": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz", - "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==" - }, "node_modules/boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", @@ -23540,6 +23541,7 @@ "version": "6.0.3", "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz", "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==", + "license": "BSD-2-Clause", "dependencies": { "execa": "^5.0.0" }, @@ -23548,9 +23550,10 @@ } }, "node_modules/default-gateway/node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", + "license": "MIT", "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -23564,6 +23567,7 @@ "version": "5.1.1", "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz", "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==", + "license": "MIT", "dependencies": { "cross-spawn": "^7.0.3", "get-stream": "^6.0.0", @@ -23586,6 +23590,7 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz", "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==", + "license": "MIT", "engines": { "node": ">=10" }, @@ -23597,6 +23602,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz", "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==", + "license": "Apache-2.0", "engines": { "node": ">=10.17.0" } @@ -23605,6 +23611,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==", + "license": "MIT", "engines": { "node": ">=8" }, @@ -23616,6 +23623,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==", + "license": "MIT", "engines": { "node": ">=6" } @@ -23624,6 +23632,7 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==", + "license": "MIT", "dependencies": { "path-key": "^3.0.0" }, @@ -23635,6 +23644,7 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz", "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==", + "license": "MIT", "dependencies": { "mimic-fn": "^2.1.0" }, @@ -23649,6 +23659,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "license": "MIT", "engines": { "node": ">=8" } @@ -23657,6 +23668,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "license": "MIT", "dependencies": { "shebang-regex": "^3.0.0" }, @@ -23668,6 +23680,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "license": "MIT", "engines": { "node": ">=8" } @@ -23676,6 +23689,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "license": "ISC", "dependencies": { "isexe": "^2.0.0" }, @@ -24235,11 +24249,6 @@ "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", "dev": true }, - "node_modules/dns-equal": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", - "integrity": "sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==" - }, "node_modules/dns-packet": { "version": "5.6.1", "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz", @@ -29342,6 +29351,12 @@ "resolved": "https://registry.npmjs.org/image-ssim/-/image-ssim-0.2.0.tgz", "integrity": "sha512-W7+sO6/yhxy83L0G7xR8YAc5Z5QFtYEXXRV6EaE8tuYBZJnA3gVgp3q7X7muhLZVodeb9UfvjSbwt9VJwjIYAg==" }, + "node_modules/immutable": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz", + "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==", + "license": "MIT" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -31103,6 +31118,60 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/jest-dev-server": { + "version": "9.0.2", + "resolved": "https://registry.npmjs.org/jest-dev-server/-/jest-dev-server-9.0.2.tgz", + "integrity": "sha512-Zc/JB0IlNNrpXkhBw+h86cGrde/Mey52KvF+FER2eyrtYJTHObOwW7Iarxm3rPyTKby5+3Y2QZtl8pRz/5GCxg==", + "dependencies": { + "chalk": "^4.1.2", + "cwd": "^0.10.0", + "find-process": "^1.4.7", + "prompts": "^2.4.2", + "spawnd": "^9.0.2", + "tree-kill": "^1.2.2", + "wait-on": "^7.2.0" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/jest-dev-server/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-dev-server/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/jest-dev-server/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/jest-diff": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz", @@ -32269,12 +32338,13 @@ } }, "node_modules/launch-editor": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.6.0.tgz", - "integrity": "sha512-JpDCcQnyAAzZZaZ7vEiSqL690w7dAEyLao+KC96zBplnYbJS7TYNjvM3M7y3dGz+v7aIsJk3hllWuc0kWAjyRQ==", + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.9.1.tgz", + "integrity": "sha512-Gcnl4Bd+hRO9P9icCP/RVVT2o8SFlPXofuCxvA2SaZuH45whSvf5p8x5oih5ftLiVhEI4sp5xDY+R+b3zJBh5w==", + "license": "MIT", "dependencies": { "picocolors": "^1.0.0", - "shell-quote": "^1.7.3" + "shell-quote": "^1.8.1" } }, "node_modules/lazy-cache": { @@ -36474,11 +36544,13 @@ } }, "node_modules/mini-css-extract-plugin": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.5.1.tgz", - "integrity": "sha512-CRC6E2yedNjfOA3nQjpqAkpnranxhxmilhBPYtldnXcPT/QZb3aJFzvt0pp8W1jhuLR/E0zDa+QEHuC/HhhaLQ==", + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.2.tgz", + "integrity": "sha512-GJuACcS//jtq4kCtd5ii/M0SZf7OZRH+BxdqXZHaJfb8TJiVl+NgQRPwiYt2EuqeSkNydn/7vP+bcE27C5mb9w==", + "license": "MIT", "dependencies": { - "schema-utils": "^4.0.0" + "schema-utils": "^4.0.0", + "tapable": "^2.2.1" }, "engines": { "node": ">= 12.13.0" @@ -36511,6 +36583,7 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz", "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==", + "license": "MIT", "dependencies": { "fast-deep-equal": "^3.1.3" }, @@ -36521,12 +36594,14 @@ "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", - "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "license": "MIT" }, "node_modules/mini-css-extract-plugin/node_modules/schema-utils": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz", "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==", + "license": "MIT", "dependencies": { "@types/json-schema": "^7.0.9", "ajv": "^8.9.0", @@ -36541,6 +36616,15 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/mini-css-extract-plugin/node_modules/tapable": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", + "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", @@ -39574,11 +39658,12 @@ } }, "node_modules/p-retry": { - "version": "4.6.1", - "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.1.tgz", - "integrity": "sha512-e2xXGNhZOZ0lfgR9kL34iGlU8N/KO0xZnQxVEwdeOvpqNDQfdnxIYizvWtK8RglUa3bGqI8g0R/BdfzLMxRkiA==", + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz", + "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==", + "license": "MIT", "dependencies": { - "@types/retry": "^0.12.0", + "@types/retry": "0.12.0", "retry": "^0.13.1" }, "engines": { @@ -39589,6 +39674,7 @@ "version": "0.13.1", "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz", "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==", + "license": "MIT", "engines": { "node": ">= 4" } @@ -44990,42 +45076,46 @@ } }, "node_modules/sass": { - "version": "1.35.2", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.35.2.tgz", - "integrity": "sha512-jhO5KAR+AMxCEwIH3v+4zbB2WB0z67V1X0jbapfVwQQdjHZUGUyukpnoM6+iCMfsIUC016w9OPKQ5jrNOS9uXw==", + "version": "1.50.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.50.1.tgz", + "integrity": "sha512-noTnY41KnlW2A9P8sdwESpDmo+KBNkukI1i8+hOK3footBUcohNHtdOJbckp46XO95nuvcHDDZ+4tmOnpK3hjw==", + "license": "MIT", "dependencies": { - "chokidar": ">=3.0.0 <4.0.0" + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" }, "bin": { "sass": "sass.js" }, "engines": { - "node": ">=8.9.0" + "node": ">=12.0.0" } }, "node_modules/sass-loader": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.1.0.tgz", - "integrity": "sha512-FVJZ9kxVRYNZTIe2xhw93n3xJNYZADr+q69/s98l9nTCrWASo+DR2Ot0s5xTKQDDEosUkatsGeHxcH4QBp5bSg==", + "version": "16.0.3", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.3.tgz", + "integrity": "sha512-gosNorT1RCkuCMyihv6FBRR7BMV06oKRAs+l4UMp1mlcVg9rWN6KMmUj3igjQwmYys4mDP3etEYJgiHRbgHCHA==", + "license": "MIT", "dependencies": { - "klona": "^2.0.4", "neo-async": "^2.6.2" }, "engines": { - "node": ">= 12.13.0" + "node": ">= 18.12.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/webpack" }, "peerDependencies": { - "fibers": ">= 3.1.0", - "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0", + "@rspack/core": "0.x || 1.x", + "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", "sass": "^1.3.0", + "sass-embedded": "*", "webpack": "^5.0.0" }, "peerDependenciesMeta": { - "fibers": { + "@rspack/core": { "optional": true }, "node-sass": { @@ -45033,6 +45123,12 @@ }, "sass": { "optional": true + }, + "sass-embedded": { + "optional": true + }, + "webpack": { + "optional": true } } }, @@ -45102,10 +45198,12 @@ "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==" }, "node_modules/selfsigned": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.1.1.tgz", - "integrity": "sha512-GSL3aowiF7wa/WtSFwnUrludWFoNhftq8bUkH9pkzjpN2XSPOAYEgg6e0sS9s0rZwgJzJiQRPU18A6clnoW5wQ==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz", + "integrity": "sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==", + "license": "MIT", "dependencies": { + "@types/node-forge": "^1.3.0", "node-forge": "^1" }, "engines": { @@ -46244,6 +46342,30 @@ "integrity": "sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==", "dev": true }, + "node_modules/spawnd": { + "version": "9.0.2", + "resolved": "https://registry.npmjs.org/spawnd/-/spawnd-9.0.2.tgz", + "integrity": "sha512-nl8DVHEDQ57IcKakzpjanspVChkMpGLuVwMR/eOn9cXE55Qr6luD2Kn06sA0ootRMdgrU4tInN6lA6ohTNvysw==", + "dependencies": { + "signal-exit": "^4.1.0", + "tree-kill": "^1.2.2" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/spawnd/node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "license": "ISC", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/spdx-correct": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.0.tgz", @@ -48699,9 +48821,9 @@ } }, "node_modules/typescript": { - "version": "5.5.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz", - "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz", + "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==", "dev": true, "license": "Apache-2.0", "bin": { @@ -49578,6 +49700,45 @@ "node": ">=18" } }, + "node_modules/wait-on": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-7.2.0.tgz", + "integrity": "sha512-wCQcHkRazgjG5XoAq9jbTMLpNIjoSlZslrJ2+N9MxDsGEv1HnFoVjOCexL0ESva7Y9cu350j+DWADdk54s4AFQ==", + "license": "MIT", + "dependencies": { + "axios": "^1.6.1", + "joi": "^17.11.0", + "lodash": "^4.17.21", + "minimist": "^1.2.8", + "rxjs": "^7.8.1" + }, + "bin": { + "wait-on": "bin/wait-on" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/wait-on/node_modules/axios": { + "version": "1.7.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.8.tgz", + "integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/wait-on/node_modules/rxjs": { + "version": "7.8.1", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz", + "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==", + "license": "Apache-2.0", + "dependencies": { + "tslib": "^2.1.0" + } + }, "node_modules/wait-port": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/wait-port/-/wait-port-1.1.0.tgz", @@ -50338,17 +50499,18 @@ "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" }, "node_modules/webpack": { - "version": "5.95.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz", - "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==", - "dependencies": { - "@types/estree": "^1.0.5", - "@webassemblyjs/ast": "^1.12.1", - "@webassemblyjs/wasm-edit": "^1.12.1", - "@webassemblyjs/wasm-parser": "^1.12.1", - "acorn": "^8.7.1", - "acorn-import-attributes": "^1.9.5", - "browserslist": "^4.21.10", + "version": "5.97.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.97.0.tgz", + "integrity": "sha512-CWT8v7ShSfj7tGs4TLRtaOLmOCPWhoKEvp+eA7FVx8Xrjb3XfT0aXdxDItnRZmE8sHcH+a8ayDrJCOjXKxVFfQ==", + "license": "MIT", + "dependencies": { + "@types/eslint-scope": "^3.7.7", + "@types/estree": "^1.0.6", + "@webassemblyjs/ast": "^1.14.1", + "@webassemblyjs/wasm-edit": "^1.14.1", + "@webassemblyjs/wasm-parser": "^1.14.1", + "acorn": "^8.14.0", + "browserslist": "^4.24.0", "chrome-trace-event": "^1.0.2", "enhanced-resolve": "^5.17.1", "es-module-lexer": "^1.2.1", @@ -50669,9 +50831,10 @@ } }, "node_modules/webpack-dev-server": { - "version": "4.15.1", - "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.1.tgz", - "integrity": "sha512-5hbAst3h3C3L8w6W4P96L5vaV0PxSmJhxZvWKYIdgxOQm8pNZ5dEOmmSLBVpP85ReeyRt6AS1QJNyo/oFFPeVA==", + "version": "4.15.2", + "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz", + "integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==", + "license": "MIT", "dependencies": { "@types/bonjour": "^3.5.9", "@types/connect-history-api-fallback": "^1.3.5", @@ -50701,7 +50864,7 @@ "serve-index": "^1.9.1", "sockjs": "^0.3.24", "spdy": "^4.0.2", - "webpack-dev-middleware": "^5.3.1", + "webpack-dev-middleware": "^5.3.4", "ws": "^8.13.0" }, "bin": { @@ -50746,6 +50909,7 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz", "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==", + "license": "MIT", "dependencies": { "fast-deep-equal": "^3.1.3" }, @@ -50756,12 +50920,14 @@ "node_modules/webpack-dev-server/node_modules/colorette": { "version": "2.0.20", "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz", - "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==" + "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==", + "license": "MIT" }, "node_modules/webpack-dev-server/node_modules/ipaddr.js": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz", "integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==", + "license": "MIT", "engines": { "node": ">= 10" } @@ -50770,6 +50936,7 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", + "license": "MIT", "dependencies": { "is-docker": "^2.0.0" }, @@ -50780,12 +50947,14 @@ "node_modules/webpack-dev-server/node_modules/json-schema-traverse": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", - "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "license": "MIT" }, "node_modules/webpack-dev-server/node_modules/open": { "version": "8.4.2", "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz", "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==", + "license": "MIT", "dependencies": { "define-lazy-prop": "^2.0.0", "is-docker": "^2.1.1", @@ -50802,6 +50971,7 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz", "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==", + "license": "MIT", "dependencies": { "@types/json-schema": "^7.0.9", "ajv": "^8.9.0", @@ -50820,6 +50990,7 @@ "version": "5.3.4", "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz", "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==", + "license": "MIT", "dependencies": { "colorette": "^2.0.10", "memfs": "^3.4.3", @@ -50896,126 +51067,145 @@ "integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==", "dev": true }, + "node_modules/webpack/node_modules/@types/estree": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", + "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==", + "license": "MIT" + }, "node_modules/webpack/node_modules/@webassemblyjs/ast": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz", - "integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==", + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz", + "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==", + "license": "MIT", "dependencies": { - "@webassemblyjs/helper-numbers": "1.11.6", - "@webassemblyjs/helper-wasm-bytecode": "1.11.6" + "@webassemblyjs/helper-numbers": "1.13.2", + "@webassemblyjs/helper-wasm-bytecode": "1.13.2" } }, "node_modules/webpack/node_modules/@webassemblyjs/helper-api-error": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz", - "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==" + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz", + "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==", + "license": "MIT" }, "node_modules/webpack/node_modules/@webassemblyjs/helper-buffer": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz", - "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==" + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz", + "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==", + "license": "MIT" }, "node_modules/webpack/node_modules/@webassemblyjs/helper-wasm-bytecode": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz", - "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==" + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz", + "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==", + "license": "MIT" }, "node_modules/webpack/node_modules/@webassemblyjs/helper-wasm-section": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz", - "integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==", + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz", + "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==", + "license": "MIT", "dependencies": { - "@webassemblyjs/ast": "1.12.1", - "@webassemblyjs/helper-buffer": "1.12.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.6", - "@webassemblyjs/wasm-gen": "1.12.1" + "@webassemblyjs/ast": "1.14.1", + "@webassemblyjs/helper-buffer": "1.14.1", + "@webassemblyjs/helper-wasm-bytecode": "1.13.2", + "@webassemblyjs/wasm-gen": "1.14.1" } }, "node_modules/webpack/node_modules/@webassemblyjs/ieee754": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz", - "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz", + "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==", + "license": "MIT", "dependencies": { "@xtuc/ieee754": "^1.2.0" } }, "node_modules/webpack/node_modules/@webassemblyjs/leb128": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz", - "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz", + "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==", + "license": "Apache-2.0", "dependencies": { "@xtuc/long": "4.2.2" } }, "node_modules/webpack/node_modules/@webassemblyjs/utf8": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz", - "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==" + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz", + "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==", + "license": "MIT" }, "node_modules/webpack/node_modules/@webassemblyjs/wasm-edit": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz", - "integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==", + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz", + "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==", + "license": "MIT", "dependencies": { - "@webassemblyjs/ast": "1.12.1", - "@webassemblyjs/helper-buffer": "1.12.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.6", - "@webassemblyjs/helper-wasm-section": "1.12.1", - "@webassemblyjs/wasm-gen": "1.12.1", - "@webassemblyjs/wasm-opt": "1.12.1", - "@webassemblyjs/wasm-parser": "1.12.1", - "@webassemblyjs/wast-printer": "1.12.1" + "@webassemblyjs/ast": "1.14.1", + "@webassemblyjs/helper-buffer": "1.14.1", + "@webassemblyjs/helper-wasm-bytecode": "1.13.2", + "@webassemblyjs/helper-wasm-section": "1.14.1", + "@webassemblyjs/wasm-gen": "1.14.1", + "@webassemblyjs/wasm-opt": "1.14.1", + "@webassemblyjs/wasm-parser": "1.14.1", + "@webassemblyjs/wast-printer": "1.14.1" } }, "node_modules/webpack/node_modules/@webassemblyjs/wasm-gen": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz", - "integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==", + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz", + "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==", + "license": "MIT", "dependencies": { - "@webassemblyjs/ast": "1.12.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.6", - "@webassemblyjs/ieee754": "1.11.6", - "@webassemblyjs/leb128": "1.11.6", - "@webassemblyjs/utf8": "1.11.6" + "@webassemblyjs/ast": "1.14.1", + "@webassemblyjs/helper-wasm-bytecode": "1.13.2", + "@webassemblyjs/ieee754": "1.13.2", + "@webassemblyjs/leb128": "1.13.2", + "@webassemblyjs/utf8": "1.13.2" } }, "node_modules/webpack/node_modules/@webassemblyjs/wasm-opt": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz", - "integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==", + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz", + "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==", + "license": "MIT", "dependencies": { - "@webassemblyjs/ast": "1.12.1", - "@webassemblyjs/helper-buffer": "1.12.1", - "@webassemblyjs/wasm-gen": "1.12.1", - "@webassemblyjs/wasm-parser": "1.12.1" + "@webassemblyjs/ast": "1.14.1", + "@webassemblyjs/helper-buffer": "1.14.1", + "@webassemblyjs/wasm-gen": "1.14.1", + "@webassemblyjs/wasm-parser": "1.14.1" } }, "node_modules/webpack/node_modules/@webassemblyjs/wasm-parser": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz", - "integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==", + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz", + "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==", + "license": "MIT", "dependencies": { - "@webassemblyjs/ast": "1.12.1", - "@webassemblyjs/helper-api-error": "1.11.6", - "@webassemblyjs/helper-wasm-bytecode": "1.11.6", - "@webassemblyjs/ieee754": "1.11.6", - "@webassemblyjs/leb128": "1.11.6", - "@webassemblyjs/utf8": "1.11.6" + "@webassemblyjs/ast": "1.14.1", + "@webassemblyjs/helper-api-error": "1.13.2", + "@webassemblyjs/helper-wasm-bytecode": "1.13.2", + "@webassemblyjs/ieee754": "1.13.2", + "@webassemblyjs/leb128": "1.13.2", + "@webassemblyjs/utf8": "1.13.2" } }, "node_modules/webpack/node_modules/@webassemblyjs/wast-printer": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz", - "integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==", + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz", + "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==", + "license": "MIT", "dependencies": { - "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/ast": "1.14.1", "@xtuc/long": "4.2.2" } }, "node_modules/webpack/node_modules/acorn": { - "version": "8.13.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.13.0.tgz", - "integrity": "sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==", + "version": "8.14.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz", + "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==", "license": "MIT", "bin": { "acorn": "bin/acorn" @@ -54648,7 +54838,7 @@ "@babel/core": ">=7", "eslint": ">=8", "prettier": ">=3", - "typescript": ">=4" + "typescript": ">=5" }, "peerDependenciesMeta": { "prettier": { @@ -55600,7 +55790,7 @@ "json2php": "^0.0.9", "markdownlint-cli": "^0.31.1", "merge-deep": "^3.0.3", - "mini-css-extract-plugin": "^2.5.1", + "mini-css-extract-plugin": "^2.9.2", "minimist": "^1.2.0", "npm-package-json-lint": "^6.4.0", "npm-packlist": "^3.0.0", @@ -55612,14 +55802,14 @@ "read-pkg-up": "^7.0.1", "resolve-bin": "^0.4.0", "rtlcss-webpack-plugin": "^4.0.7", - "sass": "^1.35.2", - "sass-loader": "^12.1.0", + "sass": "^1.50.1", + "sass-loader": "^16.0.3", "schema-utils": "^4.2.0", "source-map-loader": "^3.0.0", "stylelint": "^16.8.2", "terser-webpack-plugin": "^5.3.10", "url-loader": "^4.1.1", - "webpack": "^5.95.0", + "webpack": "^5.97.0", "webpack-bundle-analyzer": "^4.9.1", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1" @@ -55653,154 +55843,16 @@ "url": "https://github.com/sponsors/epoberezkin" } }, - "packages/scripts/node_modules/axios": { - "version": "1.7.7", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz", - "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==", - "license": "MIT", - "dependencies": { - "follow-redirects": "^1.15.6", - "form-data": "^4.0.0", - "proxy-from-env": "^1.1.0" - } - }, - "packages/scripts/node_modules/babel-loader": { - "version": "8.4.1", - "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.4.1.tgz", - "integrity": "sha512-nXzRChX+Z1GoE6yWavBQg6jDslyFF3SDjl2paADuoQtQW10JqShJt62R6eJQ5m/pjJFDT8xgKIWSP85OY8eXeA==", + "packages/scripts/node_modules/ajv-keywords": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz", + "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==", "license": "MIT", "dependencies": { - "find-cache-dir": "^3.3.1", - "loader-utils": "^2.0.4", - "make-dir": "^3.1.0", - "schema-utils": "^2.6.5" - }, - "engines": { - "node": ">= 8.9" + "fast-deep-equal": "^3.1.3" }, "peerDependencies": { - "@babel/core": "^7.0.0", - "webpack": ">=2" - } - }, - "packages/scripts/node_modules/babel-loader/node_modules/ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "license": "MIT", - "dependencies": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/epoberezkin" - } - }, - "packages/scripts/node_modules/babel-loader/node_modules/json-schema-traverse": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", - "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", - "license": "MIT" - }, - "packages/scripts/node_modules/babel-loader/node_modules/schema-utils": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz", - "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==", - "license": "MIT", - "dependencies": { - "@types/json-schema": "^7.0.5", - "ajv": "^6.12.4", - "ajv-keywords": "^3.5.2" - }, - "engines": { - "node": ">= 8.9.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - } - }, - "packages/scripts/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "packages/scripts/node_modules/find-cache-dir": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz", - "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==", - "dependencies": { - "commondir": "^1.0.1", - "make-dir": "^3.0.2", - "pkg-dir": "^4.1.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/avajs/find-cache-dir?sponsor=1" - } - }, - "packages/scripts/node_modules/find-up": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", - "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dependencies": { - "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "packages/scripts/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "engines": { - "node": ">=8" - } - }, - "packages/scripts/node_modules/jest-dev-server": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/jest-dev-server/-/jest-dev-server-9.0.1.tgz", - "integrity": "sha512-eqpJKSvVl4M0ojHZUPNbka8yEzLNbIMiINXDsuMF3lYfIdRO2iPqy+ASR4wBQ6nUyR3OT24oKPWhpsfLhgAVyg==", - "dependencies": { - "chalk": "^4.1.2", - "cwd": "^0.10.0", - "find-process": "^1.4.7", - "prompts": "^2.4.2", - "spawnd": "^9.0.1", - "tree-kill": "^1.2.2", - "wait-on": "^7.0.1" - }, - "engines": { - "node": ">=16" - } - }, - "packages/scripts/node_modules/joi": { - "version": "17.11.0", - "resolved": "https://registry.npmjs.org/joi/-/joi-17.11.0.tgz", - "integrity": "sha512-NgB+lZLNoqISVy1rZocE9PZI36bL/77ie924Ri43yEvi9GUUMPeyVIr8KdFTMUlby1p0PBYMk9spIxEUQYqrJQ==", - "dependencies": { - "@hapi/hoek": "^9.0.0", - "@hapi/topo": "^5.0.0", - "@sideway/address": "^4.1.3", - "@sideway/formula": "^3.0.1", - "@sideway/pinpoint": "^2.0.0" + "ajv": "^8.8.2" } }, "packages/scripts/node_modules/json-schema-traverse": { @@ -55815,91 +55867,6 @@ "integrity": "sha512-fQMYwvPsQt8hxRnCGyg1r2JVi6yL8Um0DIIawiKiMK9yhAAkcRNj5UsBWoaFvFzPpcWbgw9L6wzj+UMYA702Mw==", "license": "BSD" }, - "packages/scripts/node_modules/locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "dependencies": { - "p-locate": "^4.1.0" - }, - "engines": { - "node": ">=8" - } - }, - "packages/scripts/node_modules/make-dir": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", - "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", - "dependencies": { - "semver": "^6.0.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "packages/scripts/node_modules/p-limit": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", - "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", - "dependencies": { - "p-try": "^2.0.0" - }, - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "packages/scripts/node_modules/p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "dependencies": { - "p-limit": "^2.2.0" - }, - "engines": { - "node": ">=8" - } - }, - "packages/scripts/node_modules/p-try": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", - "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", - "engines": { - "node": ">=6" - } - }, - "packages/scripts/node_modules/path-exists": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "engines": { - "node": ">=8" - } - }, - "packages/scripts/node_modules/pkg-dir": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", - "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==", - "dependencies": { - "find-up": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "packages/scripts/node_modules/rxjs": { - "version": "7.8.1", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz", - "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==", - "dependencies": { - "tslib": "^2.1.0" - } - }, "packages/scripts/node_modules/schema-utils": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz", @@ -55919,78 +55886,6 @@ "url": "https://opencollective.com/webpack" } }, - "packages/scripts/node_modules/schema-utils/node_modules/ajv-keywords": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz", - "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==", - "license": "MIT", - "dependencies": { - "fast-deep-equal": "^3.1.3" - }, - "peerDependencies": { - "ajv": "^8.8.2" - } - }, - "packages/scripts/node_modules/semver": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", - "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", - "bin": { - "semver": "bin/semver.js" - } - }, - "packages/scripts/node_modules/signal-exit": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", - "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "packages/scripts/node_modules/spawnd": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/spawnd/-/spawnd-9.0.1.tgz", - "integrity": "sha512-vaMk8E9CpbjTYToBxLXowDeArGf1+yI7A6PU6Nr57b2g8BVY8nRi5vTBj3bMF8UkCrMdTMyf/Lh+lrcrW2z7pw==", - "dependencies": { - "signal-exit": "^4.1.0", - "tree-kill": "^1.2.2" - }, - "engines": { - "node": ">=16" - } - }, - "packages/scripts/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "packages/scripts/node_modules/wait-on": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-7.2.0.tgz", - "integrity": "sha512-wCQcHkRazgjG5XoAq9jbTMLpNIjoSlZslrJ2+N9MxDsGEv1HnFoVjOCexL0ESva7Y9cu350j+DWADdk54s4AFQ==", - "dependencies": { - "axios": "^1.6.1", - "joi": "^17.11.0", - "lodash": "^4.17.21", - "minimist": "^1.2.8", - "rxjs": "^7.8.1" - }, - "bin": { - "wait-on": "bin/wait-on" - }, - "engines": { - "node": ">=12.0.0" - } - }, "packages/server-side-render": { "name": "@wordpress/server-side-render", "version": "5.13.0", diff --git a/package.json b/package.json index 190664e11551dd..ce32c8071cce03 100644 --- a/package.json +++ b/package.json @@ -149,8 +149,8 @@ "resize-observer-polyfill": "1.5.1", "rimraf": "3.0.2", "rtlcss": "4.0.0", - "sass": "1.35.2", - "sass-loader": "12.1.0", + "sass": "1.50.1", + "sass-loader": "16.0.3", "semver": "7.5.4", "simple-git": "3.24.0", "snapshot-diff": "0.10.0", @@ -162,10 +162,10 @@ "style-loader": "3.2.1", "terser": "5.32.0", "terser-webpack-plugin": "5.3.10", - "typescript": "5.5.3", + "typescript": "5.7.2", "uuid": "9.0.1", "webdriverio": "8.16.20", - "webpack": "5.95.0", + "webpack": "5.97.0", "webpack-bundle-analyzer": "4.9.1", "worker-farm": "1.7.0" }, diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index 65f98bf6f15bfc..e2f953e5787814 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -18,25 +18,25 @@ @mixin heading-small() { @include _text-heading(); font-size: $font-size-x-small; - line-height: $line-height-x-small; + line-height: $font-line-height-x-small; } @mixin heading-medium() { @include _text-heading(); font-size: $font-size-medium; - line-height: $line-height-small; + line-height: $font-line-height-small; } @mixin heading-large() { @include _text-heading(); font-size: $font-size-large; - line-height: $line-height-small; + line-height: $font-line-height-small; } @mixin heading-x-large() { @include _text-heading(); font-size: $font-size-x-large; - line-height: $line-height-medium; + line-height: $font-line-height-medium; } @mixin heading-2x-large() { @@ -48,25 +48,25 @@ @mixin body-small() { @include _text-body(); font-size: $font-size-small; - line-height: $line-height-x-small; + line-height: $font-line-height-x-small; } @mixin body-medium() { @include _text-body(); font-size: $font-size-medium; - line-height: $line-height-small; + line-height: $font-line-height-small; } @mixin body-large() { @include _text-body(); font-size: $font-size-large; - line-height: $line-height-medium; + line-height: $font-line-height-medium; } @mixin body-x-large() { @include _text-body(); font-size: $font-size-x-large; - line-height: $line-height-x-large; + line-height: $font-line-height-x-large; } /** diff --git a/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.js b/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.js index f2191220d6bb4c..9d029c30b48466 100644 --- a/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.js +++ b/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.js @@ -16,13 +16,13 @@ const meta = { component: AlignmentToolbar, argTypes: { value: { - control: { type: null }, + control: false, defaultValue: 'undefined', description: 'The current value of the alignment setting.', }, onChange: { action: 'onChange', - control: { type: null }, + control: false, description: "A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie: `left`, `center`, `right`, `undefined`) as the only argument.", }, diff --git a/packages/block-editor/src/components/alignment-control/stories/index.story.js b/packages/block-editor/src/components/alignment-control/stories/index.story.js index 85c92f7e0665a4..165f9343e1710b 100644 --- a/packages/block-editor/src/components/alignment-control/stories/index.story.js +++ b/packages/block-editor/src/components/alignment-control/stories/index.story.js @@ -20,13 +20,13 @@ const meta = { component: AlignmentControl, argTypes: { value: { - control: { type: null }, + control: false, defaultValue: 'undefined', description: 'The current value of the alignment setting.', }, onChange: { action: 'onChange', - control: { type: null }, + control: false, description: "A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie: `left`, `center`, `right`, `undefined`) as the only argument.", }, diff --git a/packages/block-editor/src/components/block-lock/modal.js b/packages/block-editor/src/components/block-lock/modal.js index 3be23f6adde146..df267e97165e36 100644 --- a/packages/block-editor/src/components/block-lock/modal.js +++ b/packages/block-editor/src/components/block-lock/modal.js @@ -99,9 +99,7 @@ export default function BlockLockModal( { clientId, onClose } ) { >
- { __( - 'Choose specific attributes to restrict or lock all available options.' - ) } + { __( 'Select the features you want to lock' ) } { /* * Disable reason: The `list` ARIA role is redundant but @@ -137,7 +135,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
  • setLock( ( prevLock ) => ( { @@ -159,7 +157,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
  • setLock( ( prevLock ) => ( { @@ -178,7 +176,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
  • setLock( ( prevLock ) => ( { diff --git a/packages/block-editor/src/components/block-parent-selector/index.js b/packages/block-editor/src/components/block-parent-selector/index.js index 9090de42f8b7d7..84b5211089cd95 100644 --- a/packages/block-editor/src/components/block-parent-selector/index.js +++ b/packages/block-editor/src/components/block-parent-selector/index.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { getBlockType, store as blocksStore } from '@wordpress/blocks'; import { ToolbarButton } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { __, sprintf } from '@wordpress/i18n'; @@ -24,31 +23,18 @@ import { unlock } from '../../lock-unlock'; */ export default function BlockParentSelector() { const { selectBlock } = useDispatch( blockEditorStore ); - const { parentClientId, isVisible } = useSelect( ( select ) => { + const { parentClientId } = useSelect( ( select ) => { const { - getBlockName, getBlockParents, getSelectedBlockClientId, - getBlockEditingMode, getParentSectionBlock, } = unlock( select( blockEditorStore ) ); - const { hasBlockSupport } = select( blocksStore ); const selectedBlockClientId = getSelectedBlockClientId(); const parentSection = getParentSectionBlock( selectedBlockClientId ); const parents = getBlockParents( selectedBlockClientId ); const _parentClientId = parentSection ?? parents[ parents.length - 1 ]; - const parentBlockName = getBlockName( _parentClientId ); - const _parentBlockType = getBlockType( parentBlockName ); return { parentClientId: _parentClientId, - isVisible: - _parentClientId && - getBlockEditingMode( _parentClientId ) !== 'disabled' && - hasBlockSupport( - _parentBlockType, - '__experimentalParentSelector', - true - ), }; }, [] ); const blockInformation = useBlockDisplayInformation( parentClientId ); @@ -61,10 +47,6 @@ export default function BlockParentSelector() { highlightParent: true, } ); - if ( ! isVisible ) { - return null; - } - return (
    - { ( Children.count( actions ) > 0 || secondaryActions ) && ( + { ( actions?.length > 0 || secondaryActions ) && (
    - { Children.count( actions ) > 0 && - Children.map( actions, ( action, i ) => ( + { actions?.length > 0 && + actions.map( ( action, i ) => ( { it( 'should show primary actions', () => { render( - Click me }>Message + Click me ] }> + Message + ); expect( diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index bcf5d9ff882f7b..adcea8b605aeb7 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { useEffect } from '@wordpress/element'; +import { useEffect, useRef } from '@wordpress/element'; /** * Internal dependencies @@ -12,32 +12,64 @@ import { unlock } from '../lock-unlock'; /** * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode. + * Concepts: + * - If we most recently changed the zoom level for them (in or out), we always resetZoomLevel() level when unmounting. + * - If the user most recently changed the zoom level (manually toggling), we do nothing when unmounting. * - * @param {boolean} zoomOut If we should enter into zoomOut mode or not + * @param {boolean} enabled If we should enter into zoomOut mode or not */ -export function useZoomOut( zoomOut = true ) { +export function useZoomOut( enabled = true ) { const { setZoomLevel, resetZoomLevel } = unlock( useDispatch( blockEditorStore ) ); - const { isZoomOut } = unlock( useSelect( blockEditorStore ) ); + /** + * We need access to both the value and the function. The value is to trigger a useEffect hook + * and the function is to check zoom out within another hook without triggering a re-render. + */ + const { isZoomedOut, isZoomOut } = useSelect( ( select ) => { + const { isZoomOut: _isZoomOut } = unlock( select( blockEditorStore ) ); + return { + isZoomedOut: _isZoomOut(), + isZoomOut: _isZoomOut, + }; + }, [] ); + + const controlZoomLevelRef = useRef( false ); + const isEnabledRef = useRef( enabled ); + + /** + * This hook tracks if the zoom state was changed manually by the user via clicking + * the zoom out button. We only want this to run when isZoomedOut changes, so we use + * a ref to track the enabled state. + */ useEffect( () => { - const isZoomOutOnMount = isZoomOut(); + // If the zoom state changed (isZoomOut) and it does not match the requested zoom + // state (zoomOut), then it means the user manually changed the zoom state while + // this hook was mounted, and we should no longer control the zoom state. + if ( isZoomedOut !== isEnabledRef.current ) { + controlZoomLevelRef.current = false; + } + }, [ isZoomedOut ] ); - return () => { - if ( isZoomOutOnMount ) { + useEffect( () => { + isEnabledRef.current = enabled; + + if ( enabled !== isZoomOut() ) { + controlZoomLevelRef.current = true; + + if ( enabled ) { setZoomLevel( 'auto-scaled' ); } else { resetZoomLevel(); } - }; - }, [] ); - - useEffect( () => { - if ( zoomOut ) { - setZoomLevel( 'auto-scaled' ); - } else { - resetZoomLevel(); } - }, [ zoomOut, setZoomLevel, resetZoomLevel ] ); + + return () => { + // If we are controlling zoom level and are zoomed out, reset the zoom level. + if ( controlZoomLevelRef.current && isZoomOut() ) { + resetZoomLevel(); + } + }; + }, [ enabled, isZoomOut, resetZoomLevel, setZoomLevel ] ); } diff --git a/packages/block-library/package.json b/packages/block-library/package.json index 77da5721abacb1..ab95896035c9f0 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -28,6 +28,7 @@ "wpScript": true, "wpScriptModuleExports": { "./file/view": "./build-module/file/view.js", + "./form/view": "./build-module/form/view.js", "./image/view": "./build-module/image/view.js", "./navigation/view": "./build-module/navigation/view.js", "./query/view": "./build-module/query/view.js", diff --git a/packages/block-library/src/form/block.json b/packages/block-library/src/form/block.json index fa5212822cc71e..20f3b89dc62b0c 100644 --- a/packages/block-library/src/form/block.json +++ b/packages/block-library/src/form/block.json @@ -64,6 +64,5 @@ } }, "__experimentalSelector": "form" - }, - "viewScript": "file:./view.min.js" + } } diff --git a/packages/block-library/src/form/index.php b/packages/block-library/src/form/index.php index c887d46ad86188..d2b4942d6a50b3 100644 --- a/packages/block-library/src/form/index.php +++ b/packages/block-library/src/form/index.php @@ -14,6 +14,7 @@ * @return string The content of the block being rendered. */ function render_block_core_form( $attributes, $content ) { + wp_enqueue_script_module( '@wordpress/block-library/form/view' ); $processed_content = new WP_HTML_Tag_Processor( $content ); $processed_content->next_tag( 'form' ); @@ -42,26 +43,6 @@ function render_block_core_form( $attributes, $content ) { ); } -/** - * Additional data to add to the view.js script for this block. - */ -function block_core_form_view_script() { - if ( ! gutenberg_is_experiment_enabled( 'gutenberg-form-blocks' ) ) { - return; - } - - wp_localize_script( - 'wp-block-form-view', - 'wpBlockFormSettings', - array( - 'nonce' => wp_create_nonce( 'wp-block-form' ), - 'ajaxUrl' => admin_url( 'admin-ajax.php' ), - 'action' => 'wp_block_form_email_submit', - ) - ); -} -add_action( 'wp_enqueue_scripts', 'block_core_form_view_script' ); - /** * Adds extra fields to the form. * diff --git a/packages/block-library/src/form/view.js b/packages/block-library/src/form/view.js index d162d66020f44b..43e5af99e21286 100644 --- a/packages/block-library/src/form/view.js +++ b/packages/block-library/src/form/view.js @@ -1,8 +1,21 @@ +let formSettings; +try { + formSettings = JSON.parse( + document.getElementById( + 'wp-script-module-data-@wordpress/block-library/form/view' + )?.textContent + ); +} catch {} + // eslint-disable-next-line eslint-comments/disable-enable-pair /* eslint-disable no-undef */ document.querySelectorAll( 'form.wp-block-form' ).forEach( function ( form ) { - // Bail If the form is not using the mailto: action. - if ( ! form.action || ! form.action.startsWith( 'mailto:' ) ) { + // Bail If the form settings not provided or the form is not using the mailto: action. + if ( + ! formSettings || + ! form.action || + ! form.action.startsWith( 'mailto:' ) + ) { return; } @@ -18,13 +31,13 @@ document.querySelectorAll( 'form.wp-block-form' ).forEach( function ( form ) { // Get the form data and merge it with the form action and nonce. const formData = Object.fromEntries( new FormData( form ).entries() ); formData.formAction = form.action; - formData._ajax_nonce = wpBlockFormSettings.nonce; - formData.action = wpBlockFormSettings.action; + formData._ajax_nonce = formSettings.nonce; + formData.action = formSettings.action; formData._wp_http_referer = window.location.href; formData.formAction = form.action; try { - const response = await fetch( wpBlockFormSettings.ajaxUrl, { + const response = await fetch( formSettings.ajaxUrl, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss index 2a01d177ef47c4..69a4746b5e751c 100644 --- a/packages/block-library/src/latest-posts/style.scss +++ b/packages/block-library/src/latest-posts/style.scss @@ -57,7 +57,8 @@ font-size: 0.8125em; } -.wp-block-latest-posts__post-excerpt { +.wp-block-latest-posts__post-excerpt, +.wp-block-latest-posts__post-full-content { margin-top: 0.5em; margin-bottom: 1em; } diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 9e2e171975570f..39073b848d3ca8 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -527,12 +527,6 @@ export default function NavigationLinkEdit( { ) } placeholder={ itemLabelPlaceholder } withoutInteractiveFormatting - allowedFormats={ [ - 'core/bold', - 'core/italic', - 'core/image', - 'core/strikethrough', - ] } /> { description && ( diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js index 261b2ad8502fb8..c89eadf1cb589e 100644 --- a/packages/block-library/src/navigation-submenu/edit.js +++ b/packages/block-library/src/navigation-submenu/edit.js @@ -461,12 +461,6 @@ export default function NavigationSubmenuEdit( { aria-label={ __( 'Navigation link text' ) } placeholder={ itemLabelPlaceholder } withoutInteractiveFormatting - allowedFormats={ [ - 'core/bold', - 'core/italic', - 'core/image', - 'core/strikethrough', - ] } onClick={ () => { if ( ! openSubmenusOnClick && ! url ) { setIsLinkOpen( true ); diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index d32b4e8d5eca02..02ca1feceae555 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -21,6 +21,7 @@ import { useSettings, useBlockEditingMode, } from '@wordpress/block-editor'; +import { getBlockSupport } from '@wordpress/blocks'; import { formatLtr } from '@wordpress/icons'; /** @@ -47,7 +48,7 @@ function hasDropCapDisabled( align ) { return align === ( isRTL() ? 'left' : 'right' ) || align === 'center'; } -function DropCapControl( { clientId, attributes, setAttributes } ) { +function DropCapControl( { clientId, attributes, setAttributes, name } ) { // Please do not add a useSelect call to the paragraph block unconditionally. // Every useSelect added to a (frequently used) block will degrade load // and type performance. By moving it within InspectorControls, the subscription is @@ -69,11 +70,18 @@ function DropCapControl( { clientId, attributes, setAttributes } ) { helpText = __( 'Show a large initial letter.' ); } + const isDropCapControlEnabledByDefault = getBlockSupport( + name, + 'typography.defaultControls.dropCap', + false + ); + return ( !! dropCap } label={ __( 'Drop cap' ) } + isShownByDefault={ isDropCapControlEnabledByDefault } onDeselect={ () => setAttributes( { dropCap: undefined } ) } resetAllFilter={ () => ( { dropCap: undefined } ) } panelId={ clientId } @@ -99,6 +107,7 @@ function ParagraphBlock( { setAttributes, clientId, isSelected: isSingleSelected, + name, } ) { const { align, content, direction, dropCap, placeholder } = attributes; const blockProps = useBlockProps( { @@ -136,6 +145,7 @@ function ParagraphBlock( { ) } { isSingleSelected && ( = { 'AlignmentMatrixControl.Icon': AlignmentMatrixControl.Icon, }, argTypes: { - onChange: { control: { type: null } }, - value: { control: { type: null } }, + onChange: { control: false }, + value: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/angle-picker-control/stories/index.story.tsx b/packages/components/src/angle-picker-control/stories/index.story.tsx index ebbf3425d802f1..d909f1ed3d205a 100644 --- a/packages/components/src/angle-picker-control/stories/index.story.tsx +++ b/packages/components/src/angle-picker-control/stories/index.story.tsx @@ -17,8 +17,8 @@ const meta: Meta< typeof AnglePickerControl > = { title: 'Components/AnglePickerControl', component: AnglePickerControl, argTypes: { - as: { control: { type: null } }, - value: { control: { type: null } }, + as: { control: false }, + value: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/base-control/stories/index.story.tsx b/packages/components/src/base-control/stories/index.story.tsx index 90517c75b5e95e..69188f869656da 100644 --- a/packages/components/src/base-control/stories/index.story.tsx +++ b/packages/components/src/base-control/stories/index.story.tsx @@ -18,7 +18,7 @@ const meta: Meta< typeof BaseControl > = { 'BaseControl.VisualLabel': BaseControl.VisualLabel, }, argTypes: { - children: { control: { type: null } }, + children: { control: false }, help: { control: { type: 'text' } }, label: { control: { type: 'text' } }, }, diff --git a/packages/components/src/border-box-control/stories/index.story.tsx b/packages/components/src/border-box-control/stories/index.story.tsx index 0a961d34fb93d3..3f118ae7cb37cc 100644 --- a/packages/components/src/border-box-control/stories/index.story.tsx +++ b/packages/components/src/border-box-control/stories/index.story.tsx @@ -20,7 +20,7 @@ const meta: Meta< typeof BorderBoxControl > = { component: BorderBoxControl, argTypes: { onChange: { action: 'onChange' }, - value: { control: { type: null } }, + value: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/border-control/stories/index.story.tsx b/packages/components/src/border-control/stories/index.story.tsx index 3b5fa740d092d6..ca8505c01a0ba0 100644 --- a/packages/components/src/border-control/stories/index.story.tsx +++ b/packages/components/src/border-control/stories/index.story.tsx @@ -23,7 +23,7 @@ const meta: Meta< typeof BorderControl > = { action: 'onChange', }, width: { control: { type: 'text' } }, - value: { control: { type: null } }, + value: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx index aa94e8c4bf00b8..0d8b96de063168 100644 --- a/packages/components/src/box-control/stories/index.story.tsx +++ b/packages/components/src/box-control/stories/index.story.tsx @@ -17,7 +17,7 @@ const meta: Meta< typeof BoxControl > = { title: 'Components/BoxControl', component: BoxControl, argTypes: { - values: { control: { type: null } }, + values: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/button-group/stories/index.story.tsx b/packages/components/src/button-group/stories/index.story.tsx index f6af2416977f40..4b5ab3d5dfdb6b 100644 --- a/packages/components/src/button-group/stories/index.story.tsx +++ b/packages/components/src/button-group/stories/index.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof ButtonGroup > = { title: 'Components/ButtonGroup', component: ButtonGroup, argTypes: { - children: { control: { type: null } }, + children: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/card/stories/index.story.tsx b/packages/components/src/card/stories/index.story.tsx index 03726abbe754ee..22fb749461785f 100644 --- a/packages/components/src/card/stories/index.story.tsx +++ b/packages/components/src/card/stories/index.story.tsx @@ -26,10 +26,10 @@ const meta: Meta< typeof Card > = { id: 'components-card', argTypes: { as: { - control: { type: null }, + control: false, }, children: { - control: { type: null }, + control: false, }, }, parameters: { diff --git a/packages/components/src/checkbox-control/stories/index.story.tsx b/packages/components/src/checkbox-control/stories/index.story.tsx index a68e380a8f7332..a2936654c8629a 100644 --- a/packages/components/src/checkbox-control/stories/index.story.tsx +++ b/packages/components/src/checkbox-control/stories/index.story.tsx @@ -24,7 +24,7 @@ const meta: Meta< typeof CheckboxControl > = { action: 'onChange', }, checked: { - control: { type: null }, + control: false, }, help: { control: { type: 'text' } }, }, diff --git a/packages/components/src/circular-option-picker/stories/index.story.tsx b/packages/components/src/circular-option-picker/stories/index.story.tsx index d0314670fe1694..84165bf24bff6c 100644 --- a/packages/components/src/circular-option-picker/stories/index.story.tsx +++ b/packages/components/src/circular-option-picker/stories/index.story.tsx @@ -32,8 +32,8 @@ const meta: Meta< typeof CircularOptionPicker > = { CircularOptionPicker.DropdownLinkAction, }, argTypes: { - actions: { control: { type: null } }, - options: { control: { type: null } }, + actions: { control: false }, + options: { control: false }, children: { control: { type: 'text' } }, }, parameters: { diff --git a/packages/components/src/color-palette/stories/index.story.tsx b/packages/components/src/color-palette/stories/index.story.tsx index 5342fc5222be6a..e4c4b89d524448 100644 --- a/packages/components/src/color-palette/stories/index.story.tsx +++ b/packages/components/src/color-palette/stories/index.story.tsx @@ -18,9 +18,9 @@ const meta: Meta< typeof ColorPalette > = { id: 'components-colorpalette', component: ColorPalette, argTypes: { - as: { control: { type: null } }, - onChange: { action: 'onChange', control: { type: null } }, - value: { control: { type: null } }, + as: { control: false }, + onChange: { action: 'onChange', control: false }, + value: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/color-picker/stories/index.story.tsx b/packages/components/src/color-picker/stories/index.story.tsx index 44040a5265c5d3..0886719a7de52c 100644 --- a/packages/components/src/color-picker/stories/index.story.tsx +++ b/packages/components/src/color-picker/stories/index.story.tsx @@ -13,8 +13,8 @@ const meta: Meta< typeof ColorPicker > = { title: 'Components/Selection & Input/Color/ColorPicker', id: 'components-colorpicker', argTypes: { - as: { control: { type: null } }, - color: { control: { type: null } }, + as: { control: false }, + color: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/combobox-control/stories/index.story.tsx b/packages/components/src/combobox-control/stories/index.story.tsx index 1b4972f167f745..f033742a336623 100644 --- a/packages/components/src/combobox-control/stories/index.story.tsx +++ b/packages/components/src/combobox-control/stories/index.story.tsx @@ -38,7 +38,7 @@ const meta: Meta< typeof ComboboxControl > = { id: 'components-comboboxcontrol', component: ComboboxControl, argTypes: { - value: { control: { type: null } }, + value: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/composite/stories/index.story.tsx b/packages/components/src/composite/stories/index.story.tsx index eefcd599134757..63731a15a8c9cd 100644 --- a/packages/components/src/composite/stories/index.story.tsx +++ b/packages/components/src/composite/stories/index.story.tsx @@ -36,9 +36,9 @@ const meta: Meta< typeof Composite > = { 'Composite.Context': Composite.Context, }, argTypes: { - children: { control: { type: null } }, - render: { control: { type: null } }, - setActiveId: { control: { type: null } }, + children: { control: false }, + render: { control: false }, + setActiveId: { control: false }, focusLoop: { control: 'select', options: [ true, false, 'horizontal', 'vertical', 'both' ], diff --git a/packages/components/src/confirm-dialog/stories/index.story.tsx b/packages/components/src/confirm-dialog/stories/index.story.tsx index 9496d85939edf3..7c08d48369a2b0 100644 --- a/packages/components/src/confirm-dialog/stories/index.story.tsx +++ b/packages/components/src/confirm-dialog/stories/index.story.tsx @@ -20,7 +20,7 @@ const meta: Meta< typeof ConfirmDialog > = { id: 'components-experimental-confirmdialog', argTypes: { isOpen: { - control: { type: null }, + control: false, }, }, parameters: { diff --git a/packages/components/src/custom-select-control-v2/stories/index.story.tsx b/packages/components/src/custom-select-control-v2/stories/index.story.tsx index 3595ee2e951990..75226314af8dbd 100644 --- a/packages/components/src/custom-select-control-v2/stories/index.story.tsx +++ b/packages/components/src/custom-select-control-v2/stories/index.story.tsx @@ -22,8 +22,8 @@ const meta: Meta< typeof CustomSelectControlV2 > = { 'CustomSelectControlV2.Item': CustomSelectControlV2.Item, }, argTypes: { - children: { control: { type: null } }, - value: { control: { type: null } }, + children: { control: false }, + value: { control: false }, }, tags: [ 'status-wip' ], parameters: { diff --git a/packages/components/src/custom-select-control/stories/index.story.tsx b/packages/components/src/custom-select-control/stories/index.story.tsx index 9d430b639547c6..8c5e200f7532e8 100644 --- a/packages/components/src/custom-select-control/stories/index.story.tsx +++ b/packages/components/src/custom-select-control/stories/index.story.tsx @@ -18,8 +18,8 @@ const meta: Meta< typeof CustomSelectControl > = { component: CustomSelectControl, id: 'components-customselectcontrol', argTypes: { - onChange: { control: { type: null } }, - value: { control: { type: null } }, + onChange: { control: false }, + value: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/date-time/stories/date-time.story.tsx b/packages/components/src/date-time/stories/date-time.story.tsx index 7636e2fdc80a30..e240b9da470563 100644 --- a/packages/components/src/date-time/stories/date-time.story.tsx +++ b/packages/components/src/date-time/stories/date-time.story.tsx @@ -20,7 +20,7 @@ const meta: Meta< typeof DateTimePicker > = { component: DateTimePicker, argTypes: { currentDate: { control: 'date' }, - onChange: { action: 'onChange', control: { type: null } }, + onChange: { action: 'onChange', control: false }, }, parameters: { controls: { expanded: true }, @@ -51,6 +51,9 @@ const Template: StoryFn< typeof DateTimePicker > = ( { }; export const Default: StoryFn< typeof DateTimePicker > = Template.bind( {} ); +Default.args = { + currentDate: new Date(), +}; export const WithEvents: StoryFn< typeof DateTimePicker > = Template.bind( {} ); WithEvents.args = { diff --git a/packages/components/src/date-time/stories/date.story.tsx b/packages/components/src/date-time/stories/date.story.tsx index 36fef0c5bfd195..d305edf7a29e1c 100644 --- a/packages/components/src/date-time/stories/date.story.tsx +++ b/packages/components/src/date-time/stories/date.story.tsx @@ -20,7 +20,7 @@ const meta: Meta< typeof DatePicker > = { component: DatePicker, argTypes: { currentDate: { control: 'date' }, - onChange: { action: 'onChange', control: { type: null } }, + onChange: { action: 'onChange', control: false }, }, parameters: { controls: { expanded: true }, @@ -51,6 +51,9 @@ const Template: StoryFn< typeof DatePicker > = ( { }; export const Default: StoryFn< typeof DatePicker > = Template.bind( {} ); +Default.args = { + currentDate: new Date(), +}; export const WithEvents: StoryFn< typeof DatePicker > = Template.bind( {} ); WithEvents.args = { diff --git a/packages/components/src/date-time/stories/time.story.tsx b/packages/components/src/date-time/stories/time.story.tsx index c19b5b4f48f5c2..5497b1e84138c0 100644 --- a/packages/components/src/date-time/stories/time.story.tsx +++ b/packages/components/src/date-time/stories/time.story.tsx @@ -21,7 +21,7 @@ const meta: Meta< typeof TimePicker > = { subcomponents: { 'TimePicker.TimeInput': TimePicker.TimeInput }, argTypes: { currentTime: { control: 'date' }, - onChange: { action: 'onChange', control: { type: null } }, + onChange: { action: 'onChange', control: false }, }, parameters: { controls: { expanded: true }, @@ -52,6 +52,9 @@ const Template: StoryFn< typeof TimePicker > = ( { }; export const Default: StoryFn< typeof TimePicker > = Template.bind( {} ); +Default.args = { + currentTime: new Date(), +}; const TimeInputTemplate: StoryFn< typeof TimePicker.TimeInput > = ( args ) => { return ; diff --git a/packages/components/src/dimension-control/stories/index.story.tsx b/packages/components/src/dimension-control/stories/index.story.tsx index 61fd0aae4ee768..086d75b198fb05 100644 --- a/packages/components/src/dimension-control/stories/index.story.tsx +++ b/packages/components/src/dimension-control/stories/index.story.tsx @@ -24,7 +24,7 @@ const meta: Meta< typeof DimensionControl > = { id: 'components-dimensioncontrol', argTypes: { onChange: { action: 'onChange' }, - value: { control: { type: null } }, + value: { control: false }, icon: { control: { type: 'select' }, options: [ '-', 'desktop', 'tablet', 'mobile' ], diff --git a/packages/components/src/disabled/stories/index.story.tsx b/packages/components/src/disabled/stories/index.story.tsx index 29d9c925f4f5d8..f017305507814e 100644 --- a/packages/components/src/disabled/stories/index.story.tsx +++ b/packages/components/src/disabled/stories/index.story.tsx @@ -22,8 +22,8 @@ const meta: Meta< typeof Disabled > = { id: 'components-disabled', component: Disabled, argTypes: { - as: { control: { type: null } }, - children: { control: { type: null } }, + as: { control: false }, + children: { control: false }, }, parameters: { controls: { @@ -82,7 +82,7 @@ Default.args = { export const ContentEditable: StoryFn< typeof Disabled > = ( args ) => { return ( -
    +
    contentEditable
    diff --git a/packages/components/src/divider/stories/index.story.tsx b/packages/components/src/divider/stories/index.story.tsx index 4910c1b591c524..3f143fc5237694 100644 --- a/packages/components/src/divider/stories/index.story.tsx +++ b/packages/components/src/divider/stories/index.story.tsx @@ -24,7 +24,7 @@ const meta: Meta< typeof Divider > = { control: { type: 'text' }, }, wrapElement: { - control: { type: null }, + control: false, }, ref: { table: { diff --git a/packages/components/src/draggable/stories/index.story.tsx b/packages/components/src/draggable/stories/index.story.tsx index 6ecb54a07a3fb2..537dd9b40d7f36 100644 --- a/packages/components/src/draggable/stories/index.story.tsx +++ b/packages/components/src/draggable/stories/index.story.tsx @@ -21,8 +21,8 @@ const meta: Meta< typeof Draggable > = { title: 'Components/Utilities/Draggable', id: 'components-draggable', argTypes: { - elementId: { control: { type: null } }, - __experimentalDragComponent: { control: { type: null } }, + elementId: { control: false }, + __experimentalDragComponent: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/dropdown-menu/index.tsx b/packages/components/src/dropdown-menu/index.tsx index de83695978c2df..195595fb9dc0de 100644 --- a/packages/components/src/dropdown-menu/index.tsx +++ b/packages/components/src/dropdown-menu/index.tsx @@ -169,7 +169,9 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) { indexOfSet, indexOfControl, ].join() } - onClick={ ( event ) => { + onClick={ ( + event: React.MouseEvent< HTMLButtonElement > + ) => { event.stopPropagation(); props.onClose(); if ( control.onClick ) { diff --git a/packages/components/src/dropdown-menu/stories/index.story.tsx b/packages/components/src/dropdown-menu/stories/index.story.tsx index 8c13a0b57dbda6..7b06ae979de84a 100644 --- a/packages/components/src/dropdown-menu/stories/index.story.tsx +++ b/packages/components/src/dropdown-menu/stories/index.story.tsx @@ -37,9 +37,9 @@ const meta: Meta< typeof DropdownMenu > = { mapping: { menu, chevronDown, more }, control: { type: 'select' }, }, - open: { control: { type: null } }, - defaultOpen: { control: { type: null } }, - onToggle: { control: { type: null } }, + open: { control: false }, + defaultOpen: { control: false }, + onToggle: { control: false }, }, }; export default meta; diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx index bfa51a07a97170..ff4d0101a377ef 100644 --- a/packages/components/src/dropdown/stories/index.story.tsx +++ b/packages/components/src/dropdown/stories/index.story.tsx @@ -25,13 +25,13 @@ const meta: Meta< typeof Dropdown > = { type: 'radio', }, }, - position: { control: { type: null } }, - renderContent: { control: { type: null } }, - renderToggle: { control: { type: null } }, - open: { control: { type: null } }, - defaultOpen: { control: { type: null } }, - onToggle: { control: { type: null } }, - onClose: { control: { type: null } }, + position: { control: false }, + renderContent: { control: false }, + renderToggle: { control: false }, + open: { control: false }, + defaultOpen: { control: false }, + onToggle: { control: false }, + onClose: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx b/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx index f06d0ee40a6ce3..bf8439c38bb854 100644 --- a/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx +++ b/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx @@ -19,7 +19,7 @@ const meta: Meta< typeof DuotonePicker > = { component: DuotonePicker, argTypes: { onChange: { action: 'onChange' }, - value: { control: { type: null } }, + value: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/flex/stories/index.story.tsx b/packages/components/src/flex/stories/index.story.tsx index 142f2796657219..fac5b2e7c31e05 100644 --- a/packages/components/src/flex/stories/index.story.tsx +++ b/packages/components/src/flex/stories/index.story.tsx @@ -17,7 +17,7 @@ const meta: Meta< typeof Flex > = { argTypes: { align: { control: { type: 'text' } }, as: { control: { type: 'text' } }, - children: { control: { type: null } }, + children: { control: false }, gap: { control: { type: 'text' } }, justify: { control: { type: 'text' } }, // Disabled isReversed because it's deprecated. diff --git a/packages/components/src/font-size-picker/stories/index.story.tsx b/packages/components/src/font-size-picker/stories/index.story.tsx index a0d83756ca1ec9..f6502fcfd537c8 100644 --- a/packages/components/src/font-size-picker/stories/index.story.tsx +++ b/packages/components/src/font-size-picker/stories/index.story.tsx @@ -17,7 +17,7 @@ const meta: Meta< typeof FontSizePicker > = { title: 'Components/FontSizePicker', component: FontSizePicker, argTypes: { - value: { control: { type: null } }, + value: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/form-file-upload/stories/index.story.tsx b/packages/components/src/form-file-upload/stories/index.story.tsx index 176d6b2af60983..cec182346c0a72 100644 --- a/packages/components/src/form-file-upload/stories/index.story.tsx +++ b/packages/components/src/form-file-upload/stories/index.story.tsx @@ -18,9 +18,9 @@ const meta: Meta< typeof FormFileUpload > = { id: 'components-formfileupload', component: FormFileUpload, argTypes: { - icon: { control: { type: null } }, - onChange: { action: 'onChange', control: { type: null } }, - onClick: { control: { type: null } }, + icon: { control: false }, + onChange: { action: 'onChange', control: false }, + onClick: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/form-token-field/stories/index.story.tsx b/packages/components/src/form-token-field/stories/index.story.tsx index c43d155c809bb7..52daabe5608b0a 100644 --- a/packages/components/src/form-token-field/stories/index.story.tsx +++ b/packages/components/src/form-token-field/stories/index.story.tsx @@ -19,10 +19,10 @@ const meta: Meta< typeof FormTokenField > = { id: 'components-formtokenfield', argTypes: { value: { - control: { type: null }, + control: false, }, __experimentalValidateInput: { - control: { type: null }, + control: false, }, }, parameters: { diff --git a/packages/components/src/gradient-picker/stories/index.story.tsx b/packages/components/src/gradient-picker/stories/index.story.tsx index b2b73b8b609966..7dc5f62df726db 100644 --- a/packages/components/src/gradient-picker/stories/index.story.tsx +++ b/packages/components/src/gradient-picker/stories/index.story.tsx @@ -22,7 +22,7 @@ const meta: Meta< typeof GradientPicker > = { actions: { argTypesRegex: '^on.*' }, }, argTypes: { - value: { control: { type: null } }, + value: { control: false }, }, }; export default meta; diff --git a/packages/components/src/grid/stories/index.story.tsx b/packages/components/src/grid/stories/index.story.tsx index 171b324e033c04..5b2284e22d27e3 100644 --- a/packages/components/src/grid/stories/index.story.tsx +++ b/packages/components/src/grid/stories/index.story.tsx @@ -15,7 +15,7 @@ const meta: Meta< typeof Grid > = { argTypes: { as: { control: { type: 'text' } }, align: { control: { type: 'text' } }, - children: { control: { type: null } }, + children: { control: false }, columnGap: { control: { type: 'text' } }, columns: { table: { type: { summary: 'number' } }, diff --git a/packages/components/src/h-stack/stories/index.story.tsx b/packages/components/src/h-stack/stories/index.story.tsx index 025c3384bddceb..a2e5b4fa55e9fa 100644 --- a/packages/components/src/h-stack/stories/index.story.tsx +++ b/packages/components/src/h-stack/stories/index.story.tsx @@ -46,10 +46,10 @@ const meta: Meta< typeof HStack > = { id: 'components-experimental-hstack', argTypes: { as: { - control: { type: null }, + control: false, }, children: { - control: { type: null }, + control: false, }, alignment: { control: { type: 'select' }, diff --git a/packages/components/src/input-control/stories/index.story.tsx b/packages/components/src/input-control/stories/index.story.tsx index 8cef6a5d37c81b..136301c42e7d09 100644 --- a/packages/components/src/input-control/stories/index.story.tsx +++ b/packages/components/src/input-control/stories/index.story.tsx @@ -23,10 +23,10 @@ const meta: Meta< typeof InputControl > = { subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper }, argTypes: { __unstableInputWidth: { control: { type: 'text' } }, - __unstableStateReducer: { control: { type: null } }, - onChange: { control: { type: null } }, - prefix: { control: { type: null } }, - suffix: { control: { type: null } }, + __unstableStateReducer: { control: false }, + onChange: { control: false }, + prefix: { control: false }, + suffix: { control: false }, type: { control: { type: 'text' } }, value: { control: { disable: true } }, }, diff --git a/packages/components/src/item-group/stories/index.story.tsx b/packages/components/src/item-group/stories/index.story.tsx index 99309b81ea314f..845843d2433db9 100644 --- a/packages/components/src/item-group/stories/index.story.tsx +++ b/packages/components/src/item-group/stories/index.story.tsx @@ -17,8 +17,8 @@ const meta: Meta< typeof ItemGroup > = { subcomponents: { Item }, title: 'Components (Experimental)/ItemGroup', argTypes: { - as: { control: { type: null } }, - children: { control: { type: null } }, + as: { control: false }, + children: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/menu-group/stories/index.story.tsx b/packages/components/src/menu-group/stories/index.story.tsx index f53cbbf5b7b0a0..c46804bc999007 100644 --- a/packages/components/src/menu-group/stories/index.story.tsx +++ b/packages/components/src/menu-group/stories/index.story.tsx @@ -20,7 +20,7 @@ const meta: Meta< typeof MenuGroup > = { component: MenuGroup, id: 'components-menugroup', argTypes: { - children: { control: { type: null } }, + children: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/menu-item/stories/index.story.tsx b/packages/components/src/menu-item/stories/index.story.tsx index 24c592b66f3aea..bef548c59d9461 100644 --- a/packages/components/src/menu-item/stories/index.story.tsx +++ b/packages/components/src/menu-item/stories/index.story.tsx @@ -20,7 +20,7 @@ const meta: Meta< typeof MenuItem > = { title: 'Components/Actions/MenuItem', id: 'components-menuitem', argTypes: { - children: { control: { type: null } }, + children: { control: false }, icon: { control: { type: 'select' }, options: [ 'check', 'link', 'more' ], diff --git a/packages/components/src/menu-items-choice/stories/index.story.tsx b/packages/components/src/menu-items-choice/stories/index.story.tsx index f4a14054e8f27f..b634eb5becedbf 100644 --- a/packages/components/src/menu-items-choice/stories/index.story.tsx +++ b/packages/components/src/menu-items-choice/stories/index.story.tsx @@ -21,7 +21,7 @@ const meta: Meta< typeof MenuItemsChoice > = { argTypes: { onHover: { action: 'onHover' }, onSelect: { action: 'onSelect' }, - value: { control: { type: null } }, + value: { control: false }, }, parameters: { controls: { diff --git a/packages/components/src/menu/stories/index.story.tsx b/packages/components/src/menu/stories/index.story.tsx index 92501c33269580..ad4794057e0e03 100644 --- a/packages/components/src/menu/stories/index.story.tsx +++ b/packages/components/src/menu/stories/index.story.tsx @@ -46,8 +46,8 @@ const meta: Meta< typeof Menu > = { ItemHelpText: Menu.ItemHelpText, }, argTypes: { - children: { control: { type: null } }, - trigger: { control: { type: null } }, + children: { control: false }, + trigger: { control: false }, }, tags: [ 'status-private' ], parameters: { diff --git a/packages/components/src/modal/stories/index.story.tsx b/packages/components/src/modal/stories/index.story.tsx index 880688ed5c51c3..be18ed141dd3fc 100644 --- a/packages/components/src/modal/stories/index.story.tsx +++ b/packages/components/src/modal/stories/index.story.tsx @@ -23,10 +23,10 @@ const meta: Meta< typeof Modal > = { id: 'components-modal', argTypes: { children: { - control: { type: null }, + control: false, }, onKeyDown: { - control: { type: null }, + control: false, }, focusOnMount: { options: [ true, false, 'firstElement', 'firstContentElement' ], diff --git a/packages/components/src/modal/test/index.tsx b/packages/components/src/modal/test/index.tsx index a0d0ee2653edb4..05dcc35dce18da 100644 --- a/packages/components/src/modal/test/index.tsx +++ b/packages/components/src/modal/test/index.tsx @@ -269,7 +269,8 @@ describe( 'Modal', () => { } ); describe( 'Focus handling', () => { - let originalGetClientRects: () => DOMRectList; + const originalGetClientRects = + window.HTMLElement.prototype.getClientRects; const FocusMountDemo = ( { focusOnMount, diff --git a/packages/components/src/navigable-container/stories/navigable-menu.story.tsx b/packages/components/src/navigable-container/stories/navigable-menu.story.tsx index 2ad7e028d6faf1..30986ff479e43f 100644 --- a/packages/components/src/navigable-container/stories/navigable-menu.story.tsx +++ b/packages/components/src/navigable-container/stories/navigable-menu.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof NavigableMenu > = { id: 'components-navigablemenu', component: NavigableMenu, argTypes: { - children: { control: { type: null } }, + children: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/navigable-container/stories/tabbable-container.story.tsx b/packages/components/src/navigable-container/stories/tabbable-container.story.tsx index 07c87a0c20f1bf..afb4119015b52a 100644 --- a/packages/components/src/navigable-container/stories/tabbable-container.story.tsx +++ b/packages/components/src/navigable-container/stories/tabbable-container.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof TabbableContainer > = { id: 'components-tabbablecontainer', component: TabbableContainer, argTypes: { - children: { control: { type: null } }, + children: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/navigation/stories/index.story.tsx b/packages/components/src/navigation/stories/index.story.tsx index 2f09ace29f16e5..8510b6f20b5370 100644 --- a/packages/components/src/navigation/stories/index.story.tsx +++ b/packages/components/src/navigation/stories/index.story.tsx @@ -39,10 +39,10 @@ const meta: Meta< typeof Navigation > = { NavigationMenu, }, argTypes: { - activeItem: { control: { type: null } }, - activeMenu: { control: { type: null } }, - children: { control: { type: null } }, - onActivateMenu: { control: { type: null } }, + activeItem: { control: false }, + activeMenu: { control: false }, + children: { control: false }, + onActivateMenu: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx index bd2cdc17a1263c..0baf6a1c9cf5bf 100644 --- a/packages/components/src/navigator/stories/index.story.tsx +++ b/packages/components/src/navigator/stories/index.story.tsx @@ -24,9 +24,9 @@ const meta: Meta< typeof Navigator > = { title: 'Components/Navigation/Navigator', id: 'components-navigator', argTypes: { - as: { control: { type: null } }, - children: { control: { type: null } }, - initialPath: { control: { type: null } }, + as: { control: false }, + children: { control: false }, + initialPath: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/number-control/stories/index.story.tsx b/packages/components/src/number-control/stories/index.story.tsx index 8710839fea6ea5..e66be3490bb716 100644 --- a/packages/components/src/number-control/stories/index.story.tsx +++ b/packages/components/src/number-control/stories/index.story.tsx @@ -23,7 +23,7 @@ const meta: Meta< typeof NumberControl > = { step: { control: { type: 'text' } }, suffix: { control: { type: 'text' } }, type: { control: { type: 'text' } }, - value: { control: null }, + value: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/panel/stories/index.story.tsx b/packages/components/src/panel/stories/index.story.tsx index af9cf626f8eecd..db66b911d4dc17 100644 --- a/packages/components/src/panel/stories/index.story.tsx +++ b/packages/components/src/panel/stories/index.story.tsx @@ -23,7 +23,7 @@ const meta: Meta< typeof Panel > = { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { PanelRow, PanelBody }, argTypes: { - children: { control: { type: null } }, + children: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/placeholder/stories/index.story.tsx b/packages/components/src/placeholder/stories/index.story.tsx index 1a0db673320bca..ffe60df0b4b857 100644 --- a/packages/components/src/placeholder/stories/index.story.tsx +++ b/packages/components/src/placeholder/stories/index.story.tsx @@ -21,9 +21,9 @@ const meta: Meta< typeof Placeholder > = { component: Placeholder, title: 'Components/Placeholder', argTypes: { - children: { control: { type: null } }, - notices: { control: { type: null } }, - preview: { control: { type: null } }, + children: { control: false }, + notices: { control: false }, + preview: { control: false }, icon: { control: { type: 'select' }, options: Object.keys( ICONS ), diff --git a/packages/components/src/popover/stories/index.story.tsx b/packages/components/src/popover/stories/index.story.tsx index 3d804f5d24d5c0..1e1d4225bd0233 100644 --- a/packages/components/src/popover/stories/index.story.tsx +++ b/packages/components/src/popover/stories/index.story.tsx @@ -37,18 +37,18 @@ const meta: Meta< typeof Popover > = { id: 'components-popover', component: Popover, argTypes: { - anchor: { control: { type: null } }, - anchorRef: { control: { type: null } }, - anchorRect: { control: { type: null } }, - children: { control: { type: null } }, + anchor: { control: false }, + anchorRef: { control: false }, + anchorRect: { control: false }, + children: { control: false }, focusOnMount: { control: { type: 'select' }, options: [ 'firstElement', true, false ], }, - getAnchorRect: { control: { type: null } }, + getAnchorRect: { control: false }, onClose: { action: 'onClose' }, onFocusOutside: { action: 'onFocusOutside' }, - __unstableSlotName: { control: { type: null } }, + __unstableSlotName: { control: false }, }, parameters: { controls: { expanded: true }, @@ -58,7 +58,9 @@ const meta: Meta< typeof Popover > = { export default meta; const PopoverWithAnchor = ( args: PopoverProps ) => { - const anchorRef = useRef( null ); + const [ popoverAnchor, setPopoverAnchor ] = useState< Element | null >( + null + ); return (
    { >

    Popover's anchor

    - +
    ); }; diff --git a/packages/components/src/query-controls/stories/index.story.tsx b/packages/components/src/query-controls/stories/index.story.tsx index 04fe185a59eac1..ad28d9aed0d0d9 100644 --- a/packages/components/src/query-controls/stories/index.story.tsx +++ b/packages/components/src/query-controls/stories/index.story.tsx @@ -22,12 +22,12 @@ const meta: Meta< typeof QueryControls > = { title: 'Components/QueryControls', component: QueryControls, argTypes: { - numberOfItems: { control: { type: null } }, - order: { control: { type: null } }, - orderBy: { control: { type: null } }, - selectedAuthorId: { control: { type: null } }, - selectedCategories: { control: { type: null } }, - selectedCategoryId: { control: { type: null } }, + numberOfItems: { control: false }, + order: { control: false }, + orderBy: { control: false }, + selectedAuthorId: { control: false }, + selectedCategories: { control: false }, + selectedCategoryId: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/radio-control/stories/index.story.tsx b/packages/components/src/radio-control/stories/index.story.tsx index 3c76f7610d0d79..7b7bc773f323a9 100644 --- a/packages/components/src/radio-control/stories/index.story.tsx +++ b/packages/components/src/radio-control/stories/index.story.tsx @@ -22,7 +22,7 @@ const meta: Meta< typeof RadioControl > = { action: 'onChange', }, selected: { - control: { type: null }, + control: false, }, label: { control: { type: 'text' }, diff --git a/packages/components/src/radio-group/stories/index.story.tsx b/packages/components/src/radio-group/stories/index.story.tsx index a19fb077e7ec46..aee8610e1b7002 100644 --- a/packages/components/src/radio-group/stories/index.story.tsx +++ b/packages/components/src/radio-group/stories/index.story.tsx @@ -21,8 +21,8 @@ const meta: Meta< typeof RadioGroup > = { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { Radio }, argTypes: { - onChange: { control: { type: null } }, - children: { control: { type: null } }, + onChange: { control: false }, + children: { control: false }, checked: { control: { type: 'text' } }, }, parameters: { @@ -99,5 +99,5 @@ Controlled.args = { id: 'controlled-radiogroup', }; Controlled.argTypes = { - checked: { control: { type: null } }, + checked: { control: false }, }; diff --git a/packages/components/src/range-control/mark.tsx b/packages/components/src/range-control/mark.tsx index a17665bb628aba..8692db679f2562 100644 --- a/packages/components/src/range-control/mark.tsx +++ b/packages/components/src/range-control/mark.tsx @@ -38,7 +38,6 @@ export default function RangeMark( { ...otherProps } aria-hidden="true" className={ classes } - isFilled={ isFilled } style={ style } /> { label && ( diff --git a/packages/components/src/range-control/stories/index.story.tsx b/packages/components/src/range-control/stories/index.story.tsx index 86a2609b8db649..5a4b2342a49ffb 100644 --- a/packages/components/src/range-control/stories/index.story.tsx +++ b/packages/components/src/range-control/stories/index.story.tsx @@ -33,18 +33,18 @@ const meta: Meta< typeof RangeControl > = { }, color: { control: { type: 'color' } }, help: { control: { type: 'text' } }, - icon: { control: { type: null } }, + icon: { control: false }, marks: { control: { type: 'object' } }, - onBlur: { control: { type: null } }, - onChange: { control: { type: null } }, - onFocus: { control: { type: null } }, - onMouseLeave: { control: { type: null } }, - onMouseMove: { control: { type: null } }, + onBlur: { control: false }, + onChange: { control: false }, + onFocus: { control: false }, + onMouseLeave: { control: false }, + onMouseMove: { control: false }, railColor: { control: { type: 'color' } }, step: { control: { type: 'number' } }, trackColor: { control: { type: 'color' } }, type: { control: { type: 'check' }, options: [ 'stepper' ] }, - value: { control: { type: null } }, + value: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts index 6e9c68ace97532..d943ca472911ed 100644 --- a/packages/components/src/range-control/styles/range-control-styles.ts +++ b/packages/components/src/range-control/styles/range-control-styles.ts @@ -130,6 +130,10 @@ export const Track = styled.span` margin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px; top: 0; + @media not ( prefers-reduced-motion ) { + transition: width ease 0.1s; + } + ${ trackBackgroundColor }; `; @@ -139,28 +143,18 @@ export const MarksWrapper = styled.span` position: relative; width: 100%; user-select: none; + margin-top: 17px; `; -const markFill = ( { disabled, isFilled }: RangeMarkProps ) => { - let backgroundColor = isFilled ? 'currentColor' : COLORS.gray[ 300 ]; - - if ( disabled ) { - backgroundColor = COLORS.gray[ 400 ]; - } - - return css( { - backgroundColor, - } ); -}; - export const Mark = styled.span` - height: ${ thumbSize }px; - left: 0; position: absolute; - top: 9px; - width: 1px; - - ${ markFill }; + left: 0; + top: -4px; + height: 4px; + width: 2px; + transform: translateX( -50% ); + background-color: ${ COLORS.ui.background }; + z-index: 1; `; const markLabelFill = ( { isFilled }: RangeMarkProps ) => { @@ -173,7 +167,7 @@ export const MarkLabel = styled.span` color: ${ COLORS.gray[ 300 ] }; font-size: 11px; position: absolute; - top: 22px; + top: 8px; white-space: nowrap; ${ rtl( { left: 0 } ) }; @@ -207,6 +201,11 @@ export const ThumbWrapper = styled.span` user-select: none; width: ${ thumbSize }px; border-radius: ${ CONFIG.radiusRound }; + z-index: 3; + + @media not ( prefers-reduced-motion ) { + transition: left ease 0.1s; + } ${ thumbColor }; ${ rtl( { marginLeft: -10 } ) }; diff --git a/packages/components/src/resizable-box/stories/index.story.tsx b/packages/components/src/resizable-box/stories/index.story.tsx index 489a094c33f119..aa5b080d00b51e 100644 --- a/packages/components/src/resizable-box/stories/index.story.tsx +++ b/packages/components/src/resizable-box/stories/index.story.tsx @@ -18,7 +18,7 @@ const meta: Meta< typeof ResizableBox > = { id: 'components-resizablebox', component: ResizableBox, argTypes: { - children: { control: { type: null } }, + children: { control: false }, enable: { control: 'object' }, onResizeStop: { action: 'onResizeStop' }, }, diff --git a/packages/components/src/responsive-wrapper/stories/index.story.tsx b/packages/components/src/responsive-wrapper/stories/index.story.tsx index d684a00c870028..5a834b999b715b 100644 --- a/packages/components/src/responsive-wrapper/stories/index.story.tsx +++ b/packages/components/src/responsive-wrapper/stories/index.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof ResponsiveWrapper > = { title: 'Components/Layout/ResponsiveWrapper', id: 'components-responsivewrapper', argTypes: { - children: { control: { type: null } }, + children: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/sandbox/stories/index.story.tsx b/packages/components/src/sandbox/stories/index.story.tsx index 0d083eac3e9026..6d5eaa4868e788 100644 --- a/packages/components/src/sandbox/stories/index.story.tsx +++ b/packages/components/src/sandbox/stories/index.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof SandBox > = { title: 'Components/Utilities/SandBox', id: 'components-sandbox', argTypes: { - onFocus: { control: { type: null } }, + onFocus: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/scrollable/stories/index.story.tsx b/packages/components/src/scrollable/stories/index.story.tsx index 53d4919de3aabf..4970b3720e8a07 100644 --- a/packages/components/src/scrollable/stories/index.story.tsx +++ b/packages/components/src/scrollable/stories/index.story.tsx @@ -22,7 +22,7 @@ const meta: Meta< typeof Scrollable > = { control: { type: 'text' }, }, children: { - control: { type: null }, + control: false, }, }, parameters: { @@ -70,6 +70,7 @@ const Template: StoryFn< typeof Scrollable > = ( { ...args } ) => { } } type="text" value="Focus me" + readOnly /> diff --git a/packages/components/src/search-control/stories/index.story.tsx b/packages/components/src/search-control/stories/index.story.tsx index 5e5f6b594e73e7..c3385c4eb21b44 100644 --- a/packages/components/src/search-control/stories/index.story.tsx +++ b/packages/components/src/search-control/stories/index.story.tsx @@ -19,7 +19,7 @@ const meta: Meta< typeof SearchControl > = { component: SearchControl, argTypes: { onChange: { action: 'onChange' }, - value: { control: { type: null } }, + value: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/select-control/stories/index.story.tsx b/packages/components/src/select-control/stories/index.story.tsx index e9461ef6904f6f..d872df540602e4 100644 --- a/packages/components/src/select-control/stories/index.story.tsx +++ b/packages/components/src/select-control/stories/index.story.tsx @@ -23,7 +23,7 @@ const meta: Meta< typeof SelectControl > = { label: { control: { type: 'text' } }, prefix: { control: { type: 'text' } }, suffix: { control: { type: 'text' } }, - value: { control: { type: null } }, + value: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/slot-fill/stories/index.story.tsx b/packages/components/src/slot-fill/stories/index.story.tsx index bc6c4f57ad9ce1..2c74496e1eada0 100644 --- a/packages/components/src/slot-fill/stories/index.story.tsx +++ b/packages/components/src/slot-fill/stories/index.story.tsx @@ -20,9 +20,9 @@ const meta: Meta< typeof Slot > = { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { Fill, SlotFillProvider }, argTypes: { - name: { control: { type: null } }, + name: { control: false }, as: { control: { type: 'text' } }, - fillProps: { control: { type: null } }, + fillProps: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/snackbar/stories/index.story.tsx b/packages/components/src/snackbar/stories/index.story.tsx index 9bd1dae42b71be..5c24044cc1ae68 100644 --- a/packages/components/src/snackbar/stories/index.story.tsx +++ b/packages/components/src/snackbar/stories/index.story.tsx @@ -19,17 +19,17 @@ const meta: Meta< typeof Snackbar > = { id: 'components-snackbar', component: Snackbar, argTypes: { - as: { control: { type: null } }, + as: { control: false }, onRemove: { action: 'onRemove', - control: { type: null }, + control: false, }, onDismiss: { action: 'onDismiss', - control: { type: null }, + control: false, }, listRef: { - control: { type: null }, + control: false, }, }, parameters: { diff --git a/packages/components/src/snackbar/stories/list.story.tsx b/packages/components/src/snackbar/stories/list.story.tsx index 1f93f374ec1745..69a4367c485759 100644 --- a/packages/components/src/snackbar/stories/list.story.tsx +++ b/packages/components/src/snackbar/stories/list.story.tsx @@ -18,10 +18,10 @@ const meta: Meta< typeof SnackbarList > = { id: 'components-snackbarlist', component: SnackbarList, argTypes: { - as: { control: { type: null } }, + as: { control: false }, onRemove: { action: 'onRemove', - control: { type: null }, + control: false, }, }, parameters: { diff --git a/packages/components/src/surface/stories/index.story.tsx b/packages/components/src/surface/stories/index.story.tsx index 7f6790d09c848e..1ef0c0d5637cb4 100644 --- a/packages/components/src/surface/stories/index.story.tsx +++ b/packages/components/src/surface/stories/index.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof Surface > = { component: Surface, title: 'Components (Experimental)/Surface', argTypes: { - children: { control: { type: null } }, + children: { control: false }, as: { control: { type: 'text' } }, }, parameters: { diff --git a/packages/components/src/text-control/stories/index.story.tsx b/packages/components/src/text-control/stories/index.story.tsx index 481ae714f0ce2f..fe7fb538805da3 100644 --- a/packages/components/src/text-control/stories/index.story.tsx +++ b/packages/components/src/text-control/stories/index.story.tsx @@ -21,7 +21,7 @@ const meta: Meta< typeof TextControl > = { help: { control: { type: 'text' } }, label: { control: { type: 'text' } }, onChange: { action: 'onChange' }, - value: { control: { type: null } }, + value: { control: false }, }, parameters: { controls: { diff --git a/packages/components/src/textarea-control/stories/index.story.tsx b/packages/components/src/textarea-control/stories/index.story.tsx index c303883a92c5d7..3160e0bfe68f31 100644 --- a/packages/components/src/textarea-control/stories/index.story.tsx +++ b/packages/components/src/textarea-control/stories/index.story.tsx @@ -21,7 +21,7 @@ const meta: Meta< typeof TextareaControl > = { onChange: { action: 'onChange' }, label: { control: { type: 'text' } }, help: { control: { type: 'text' } }, - value: { control: { type: null } }, + value: { control: false }, }, parameters: { controls: { diff --git a/packages/components/src/theme/stories/index.story.tsx b/packages/components/src/theme/stories/index.story.tsx index 67eec72533ff3f..8ef87cbe8ddb41 100644 --- a/packages/components/src/theme/stories/index.story.tsx +++ b/packages/components/src/theme/stories/index.story.tsx @@ -37,7 +37,7 @@ export const Default = Template.bind( {} ); Default.args = {}; export const Nested: StoryFn< typeof Theme > = ( args ) => ( - + diff --git a/packages/components/src/toggle-control/stories/index.story.tsx b/packages/components/src/toggle-control/stories/index.story.tsx index b9db0474bc7603..6511655810066f 100644 --- a/packages/components/src/toggle-control/stories/index.story.tsx +++ b/packages/components/src/toggle-control/stories/index.story.tsx @@ -18,7 +18,7 @@ const meta: Meta< typeof ToggleControl > = { id: 'components-togglecontrol', component: ToggleControl, argTypes: { - checked: { control: { type: null } }, + checked: { control: false }, help: { control: { type: 'text' } }, label: { control: { type: 'text' } }, onChange: { action: 'onChange' }, diff --git a/packages/components/src/toggle-group-control/stories/index.story.tsx b/packages/components/src/toggle-group-control/stories/index.story.tsx index bd6c67e2538870..0f3c0a299617af 100644 --- a/packages/components/src/toggle-group-control/stories/index.story.tsx +++ b/packages/components/src/toggle-group-control/stories/index.story.tsx @@ -32,7 +32,7 @@ const meta: Meta< typeof ToggleGroupControl > = { argTypes: { help: { control: { type: 'text' } }, onChange: { action: 'onChange' }, - value: { control: { type: null } }, + value: { control: false }, }, parameters: { controls: { expanded: true }, diff --git a/packages/components/src/toolbar/stories/index.story.tsx b/packages/components/src/toolbar/stories/index.story.tsx index e4fb3b07e1c904..8590c1ec8a2c6b 100644 --- a/packages/components/src/toolbar/stories/index.story.tsx +++ b/packages/components/src/toolbar/stories/index.story.tsx @@ -51,7 +51,7 @@ const meta: Meta< typeof Toolbar > = { ToolbarDropdownMenu, }, argTypes: { - children: { control: { type: null } }, + children: { control: false }, variant: { options: [ undefined, 'unstyled' ], control: { type: 'radio' }, diff --git a/packages/components/src/tools-panel/stories/index.story.tsx b/packages/components/src/tools-panel/stories/index.story.tsx index 0fbdae794d838d..76735c845c3ea6 100644 --- a/packages/components/src/tools-panel/stories/index.story.tsx +++ b/packages/components/src/tools-panel/stories/index.story.tsx @@ -31,9 +31,9 @@ const meta: Meta< typeof ToolsPanel > = { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { ToolsPanelItem }, argTypes: { - as: { control: { type: null } }, - children: { control: { type: null } }, - panelId: { control: { type: null } }, + as: { control: false }, + children: { control: false }, + panelId: { control: false }, resetAll: { action: 'resetAll' }, }, parameters: { diff --git a/packages/components/src/tooltip/stories/index.story.tsx b/packages/components/src/tooltip/stories/index.story.tsx index 4bddba0ff7b666..e3d21525dd345d 100644 --- a/packages/components/src/tooltip/stories/index.story.tsx +++ b/packages/components/src/tooltip/stories/index.story.tsx @@ -19,7 +19,7 @@ const meta: Meta< typeof Tooltip > = { id: 'components-tooltip', component: Tooltip, argTypes: { - children: { control: { type: null } }, + children: { control: false }, position: { control: { type: 'select' }, options: [ diff --git a/packages/components/src/tree-grid/cell.tsx b/packages/components/src/tree-grid/cell.tsx index a9883eb0512266..08261abe10313a 100644 --- a/packages/components/src/tree-grid/cell.tsx +++ b/packages/components/src/tree-grid/cell.tsx @@ -21,7 +21,11 @@ function UnforwardedTreeGridCell( return ( { withoutGridItem ? ( - <>{ children } + <> + { typeof children === 'function' + ? children( { ...props, ref } ) + : children } + ) : ( { children } ) } diff --git a/packages/components/src/tree-grid/stories/index.story.tsx b/packages/components/src/tree-grid/stories/index.story.tsx index 5a1ed95e1fd627..f91ba4631d3209 100644 --- a/packages/components/src/tree-grid/stories/index.story.tsx +++ b/packages/components/src/tree-grid/stories/index.story.tsx @@ -22,7 +22,7 @@ const meta: Meta< typeof TreeGrid > = { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { TreeGridRow, TreeGridCell }, argTypes: { - children: { control: { type: null } }, + children: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/tree-grid/types.ts b/packages/components/src/tree-grid/types.ts index 31d04882d1a815..f4946ba58ca8a0 100644 --- a/packages/components/src/tree-grid/types.ts +++ b/packages/components/src/tree-grid/types.ts @@ -36,7 +36,7 @@ export type TreeGridRowProps = { type RovingTabIndexItemPassThruProps = { ref: React.ForwardedRef< any >; tabIndex?: number; - onFocus: React.FocusEventHandler< any >; + onFocus?: React.FocusEventHandler< any >; [ key: string ]: any; }; diff --git a/packages/components/src/tree-select/stories/index.story.tsx b/packages/components/src/tree-select/stories/index.story.tsx index 703147dc145344..b43245e5e16213 100644 --- a/packages/components/src/tree-select/stories/index.story.tsx +++ b/packages/components/src/tree-select/stories/index.story.tsx @@ -22,7 +22,7 @@ const meta: Meta< typeof TreeSelect > = { label: { control: { type: 'text' } }, prefix: { control: { type: 'text' } }, suffix: { control: { type: 'text' } }, - selectedId: { control: { type: null } }, + selectedId: { control: false }, }, parameters: { controls: { diff --git a/packages/components/src/unit-control/stories/index.story.tsx b/packages/components/src/unit-control/stories/index.story.tsx index 87628c46441169..3a9da70ad5095f 100644 --- a/packages/components/src/unit-control/stories/index.story.tsx +++ b/packages/components/src/unit-control/stories/index.story.tsx @@ -20,11 +20,11 @@ const meta: Meta< typeof UnitControl > = { id: 'components-experimental-unitcontrol', argTypes: { __unstableInputWidth: { control: { type: 'text' } }, - __unstableStateReducer: { control: { type: null } }, - onChange: { control: { type: null } }, - onUnitChange: { control: { type: null } }, + __unstableStateReducer: { control: false }, + onChange: { control: false }, + onUnitChange: { control: false }, prefix: { control: { type: 'text' } }, - value: { control: { type: null } }, + value: { control: false }, }, parameters: { actions: { argTypesRegex: '^on.*' }, diff --git a/packages/components/src/view/stories/index.story.tsx b/packages/components/src/view/stories/index.story.tsx index 324825059deb20..ee4bb71b8a243f 100644 --- a/packages/components/src/view/stories/index.story.tsx +++ b/packages/components/src/view/stories/index.story.tsx @@ -12,7 +12,7 @@ const meta: Meta< typeof View > = { component: View, title: 'Components (Experimental)/View', argTypes: { - as: { control: { type: null } }, + as: { control: false }, children: { control: { type: 'text' } }, }, parameters: { diff --git a/packages/components/src/visually-hidden/stories/index.story.tsx b/packages/components/src/visually-hidden/stories/index.story.tsx index 6ebcf9a2e949ce..1c79718ddf6e04 100644 --- a/packages/components/src/visually-hidden/stories/index.story.tsx +++ b/packages/components/src/visually-hidden/stories/index.story.tsx @@ -13,7 +13,7 @@ const meta: Meta< typeof VisuallyHidden > = { title: 'Components/Typography/VisuallyHidden', id: 'components-visuallyhidden', argTypes: { - children: { control: { type: null } }, + children: { control: false }, as: { control: { type: 'text' } }, }, parameters: { diff --git a/packages/components/src/z-stack/stories/index.story.tsx b/packages/components/src/z-stack/stories/index.story.tsx index 46a364bc520f32..53c7d950e75b1b 100644 --- a/packages/components/src/z-stack/stories/index.story.tsx +++ b/packages/components/src/z-stack/stories/index.story.tsx @@ -16,7 +16,7 @@ const meta: Meta< typeof ZStack > = { title: 'Components (Experimental)/ZStack', argTypes: { as: { control: { type: 'text' } }, - children: { control: { type: null } }, + children: { control: false }, }, parameters: { controls: { diff --git a/packages/data/src/components/use-select/index.js b/packages/data/src/components/use-select/index.js index 15a3c88d2d5543..6931743151773c 100644 --- a/packages/data/src/components/use-select/index.js +++ b/packages/data/src/components/use-select/index.js @@ -19,6 +19,25 @@ import useAsyncMode from '../async-mode-provider/use-async-mode'; const renderQueue = createQueue(); +function warnOnUnstableReference( a, b ) { + if ( ! a || ! b ) { + return; + } + + const keys = + typeof a === 'object' && typeof b === 'object' + ? Object.keys( a ).filter( ( k ) => a[ k ] !== b[ k ] ) + : []; + + // eslint-disable-next-line no-console + console.warn( + 'The `useSelect` hook returns different values when called with the same state and parameters.\n' + + 'This can lead to unnecessary re-renders and performance issues if not fixed.\n\n' + + 'Non-equal value keys: %s\n\n', + keys.join( ', ' ) + ); +} + /** * @typedef {import('../../types').StoreDescriptor} StoreDescriptor * @template {import('../../types').AnyConfig} C @@ -159,10 +178,7 @@ function Store( registry, suspense ) { if ( ! didWarnUnstableReference ) { const secondMapResult = mapSelect( select, registry ); if ( ! isShallowEqual( mapResult, secondMapResult ) ) { - // eslint-disable-next-line no-console - console.warn( - `The 'useSelect' hook returns different values when called with the same state and parameters. This can lead to unnecessary rerenders.` - ); + warnOnUnstableReference( mapResult, secondMapResult ); didWarnUnstableReference = true; } } diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index 7ec1b24f8745c0..6b6f8ef6b54e11 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -2,6 +2,21 @@ ## Unreleased +## Breaking Changes + +- Support showing or hiding title, media and description fields ([#67477](https://github.com/WordPress/gutenberg/pull/67477)). +- Unify the `title`, `media` and `description` fields for the different layouts. So instead of the previous `view.layout.mediaField`, `view.layout.primaryField` and `view.layout.columnFields`, all the layouts now support these three fields with the following config ([#67477](https://github.com/WordPress/gutenberg/pull/67477)): + +```js +const view = { + type: 'table', + titleField: 'title', + mediaField: 'media', + descriptionField: 'description', + fields: [ 'author', 'date' ], +} +``` + ## Internal - Upgraded `@ariakit/react` (v0.4.13) and `@ariakit/test` (v0.4.5) ([#65907](https://github.com/WordPress/gutenberg/pull/65907)). diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md index 04b8a40ff3fa7e..6f74a13d8f197a 100644 --- a/packages/dataviews/README.md +++ b/packages/dataviews/README.md @@ -1,6 +1,6 @@ # The `@wordpress/dataviews` package -The DataViews package offers two React components and a few utilites to work with a list of data: +The DataViews package offers two React components and a few utilities to work with a list of data: - `DataViews`: to render the dataset using different types of layouts (table, grid, list) and interaction capabilities (search, filters, sorting, etc.). - `DataForm`: to edit the items of the dataset. @@ -15,7 +15,7 @@ npm install @wordpress/dataviews --save ## `DataViews` -
    At WordPress Gutenberg's Storybook there's and example implementation of the Dataviews component.
    +
    At WordPress Gutenberg's Storybook there's an example implementation of the Dataviews component.
    **Important note** If you're trying to use the `DataViews` component in a WordPress plugin or theme and you're building your scripts using the `@wordpress/scripts` package, you need to import the components from `@wordpress/dataviews/wp` instead of `@wordpress/dataviews`. @@ -68,13 +68,13 @@ const data = [ ]; ``` -The data can come from anywhere, from a static JSON file to a dynamic source like a HTTP Request. It's the consumer's responsiblity to query the data source appropiately and update the dataset based on the user's choices for sorting, filtering, etc. +The data can come from anywhere, from a static JSON file to a dynamic source like an HTTP Request. It's the consumer's responsibility to query the data source appropriately and update the dataset based on the user's choices for sorting, filtering, etc. Each record should have an `id` that identifies them uniquely. If they don't, the consumer should provide the `getItemId` property to `DataViews`: a function that returns an unique identifier for the record. #### `getItemId`: `function` -Function that receives an item and returns an unique identifier for it. +A function that receives an item and returns a unique identifier for it. It's optional. The field will get a default implementation by `DataViews` that returns the value of the `item[ id ]`. @@ -165,6 +165,7 @@ const view = { field: 'date', direction: 'desc', }, + titleField: 'title', fields: [ 'author', 'status' ], layout: {}, }; @@ -184,55 +185,27 @@ Properties: - `field`: the field used for sorting the dataset. - `direction`: the direction to use for sorting, one of `asc` or `desc`. - -- `fields`: a list of field `id` that are visible in the UI and the specific order in which they are displayed. +- `titleField`: The id of the field representing the title of the record. +- `mediaField`: The id of the field representing the media of the record. +- `descriptionField`: The id of the field representing the description of the record. +- `showTitle`: Whether the title should be shown in the UI. `true` by default. +- `showMedia`: Whether the media should be shown in the UI. `true` by default. +- `showDescription`: Whether the description should be shown in the UI. `true` by default. +- `fields`: a list of remaining field `id` that are visible in the UI and the specific order in which they are displayed. - `layout`: config that is specific to a particular layout type. ##### Properties of `layout` | Properties of `layout` | Table | Grid | List | | --------------------------------------------------------------------------------------------------------------- | ----- | ---- | ---- | -| `primaryField`: the field's `id` to be highlighted in each layout. It's not hidable. | ✓ | ✓ | ✓ | -| `mediaField`: the field's `id` to be used for rendering each card's media. It's not hiddable. | | ✓ | ✓ | -| `columnFields`: a list of field's `id` to render vertically stacked instead of horizontally (the default). | | ✓ | | | `badgeFields`: a list of field's `id` to render without label and styled as badges. | | ✓ | | -| `combinedFields`: a list of "virtual" fields that are made by combining others. See "Combining fields" section. | ✓ | | | | `styles`: additional `width`, `maxWidth`, `minWidth` styles for each field column. | ✓ | | | -##### Combining fields - -The `table` layout has the ability to create "virtual" fields that are made out by combining existing ones. - -Each "virtual field", has to provide an `id` and `label` (optionally a `header` instead), which have the same meaning as any other field. - -Additionally, they need to provide: - -- `children`: a list of field's `id` to combine -- `direction`: how should they be stacked, `vertical` or `horizontal` - -For example, this is how you'd define a `site` field which is a combination of a `title` and `description` fields, which are not displayed: - -```js -{ - fields: [ 'site', 'status' ], - layout: { - combinedFields: [ - { - id: 'site', - label: 'Site', - children: [ 'title', 'description' ], - direction: 'vertical', - } - ] - } -} -``` - #### `onChangeView`: `function` Callback executed when the view has changed. It receives the new view object as a parameter. -The view is a representation of the visible state of the dataset: what type of layout is used to display it (table, grid, etc.), how the dataset is filtered, how it is sorted or paginated. It's the consumer's responsibility to use the view config to query the data provider and make sure the user decisions (sort, pagination, filters, etc.) are respected. +The view is a representation of the visible state of the dataset: what type of layout is used to display it (table, grid, etc.), how the dataset is filtered, and how it is sorted or paginated. The consumer is responsible for using the view config to query the data provider and ensure the user decisions (sort, pagination, filters, etc.) are respected. The following example shows how a view object is used to query the WordPress REST API via the entities abstraction. The same can be done with any other data provider. @@ -255,6 +228,7 @@ function MyCustomPageTable() { value: [ 'publish', 'draft' ], }, ], + titleField: 'title', fields: [ 'author', 'status' ], layout: {}, } ); @@ -363,37 +337,38 @@ Whether the data is loading. `false` by default. #### `defaultLayouts`: `Record< string, view >` -This property provides layout information about the view types that are active. If empty, enables all layout types (see "Layout Types") with empty layout data. +This property provides layout information about active view types. If empty, this enables all layout types (see "Layout Types") with empty layout data. For example, this is how you'd enable only the table view type: ```js const defaultLayouts = { table: { - layout: { - primaryField: 'my-key', - }, + showMedia: false, }, + grid: { + showMedia: true, + } }; ``` -The `defaultLayouts` property should be an object that includes properties named `table`, `grid`, or `list`. Each of these properties should contain a `layout` property, which holds the configuration for each specific layout type. Check "Properties of layout" for the full list of properties available for each layout's configuration +The `defaultLayouts` property should be an object that includes properties named `table`, `grid`, or `list`. These properties are applied to the view object each time the user switches to the corresponding layout. #### `selection`: `string[]` The list of selected items' ids. -If `selection` and `onChangeSelection` are provided, the `DataViews` component behaves as a controlled component, otherwise, it behaves like an uncontrolled component. +If `selection` and `onChangeSelection` are provided, the `DataViews` component behaves like a controlled component. Otherwise, it behaves like an uncontrolled component. #### `onChangeSelection`: `function` -Callback that signals the user selected one of more items. It receives the list of selected items' ids as a parameter. +Callback that signals the user selected one of more items. It receives the list of selected items' IDs as a parameter. -If `selection` and `onChangeSelection` are provided, the `DataViews` component behaves as a controlled component, otherwise, it behaves like an uncontrolled component. +If `selection` and `onChangeSelection` are provided, the `DataViews` component behaves like a controlled component. Otherwise, it behaves like an uncontrolled component. ### `isItemClickable`: `function` -A function that determines if a media field or a primary field are clickable. It receives an item as an argument and returns a boolean value indicating whether the item can be clicked. +A function that determines if a media field or a primary field is clickable. It receives an item as an argument and returns a boolean value indicating whether the item can be clicked. ### `onClickItem`: `function` @@ -430,7 +405,7 @@ const Example = () => { A single item to be edited. -It can be think of as a single record coming from the `data` property of `DataViews` — though it doesn't need to be. It can be totally separated or a mix of records if your app supports bulk editing. +It can be thought of as a single record coming from the `data` property of `DataViews` — though it doesn't need to be. It can be totally separated or a mix of records if your app supports bulk editing. #### `fields`: `Object[]` @@ -525,7 +500,7 @@ Returns an object containing: ### `isItemValid` -Utility to determine whether or not the given item's value is valid according to the current fields and form config. +Utility is used to determine whether or not the given item's value is valid according to the current fields and form configuration. Parameters: @@ -712,7 +687,7 @@ Example: Field type. One of `text`, `integer`, `datetime`. -If a field declares a `type`, it gets default implementations for the `sort`, `isValid`, and `Edit` functions. They will overriden if the field provides its own. +If a field declares a `type`, it gets default implementations for the `sort`, `isValid`, and `Edit` functions if no other values are specified. - Type: `string`. - Optional. @@ -757,7 +732,7 @@ Example: ### `getValue` -React component that returns the value of a field. This value is used in sorting the fields, or when filtering. +React component that returns the value of a field. This value is used to sort or filter the fields. - Type: React component. - Optional. @@ -1002,13 +977,13 @@ Example: ### `elements` -List of valid values for a field. If provided, it creates a DataViews' filter for the field. DataForm's edit control will use these values as well (see `Edit` field property). +List of valid values for a field. If provided, it creates a DataViews' filter for the field. DataForm's edit control will also use these values. (See `Edit` field property.) - Type: `array` of objects. - Optional. - Each object can have the following properties: - - `value`: required, the value to match against the field's value. - - `label`: required, the name to display to users. + - `value`: the value to match against the field's value. (Required) + - `label`: the name to display to users. (Required) - `description`: optional, a longer description of the item. Example: @@ -1031,7 +1006,7 @@ Configuration of the filters. - Type: `object`. - Optional. - Properties: - - `operators`: the list of operators supported by the field. See "operators" below. By default, a filter will support the `isAny` and `isNone` multi-selection operators. + - `operators`: the list of operators supported by the field. See "operators" below. A filter will support the `isAny` and `isNone` multi-selection operators by default. - `isPrimary`: boolean, optional. Indicates if the filter is primary. A primary filter is always visible and is not listed in the "Add filter" component, except for the list layout where it behaves like a secondary filter. Operators: @@ -1045,7 +1020,7 @@ Operators: | `isAll` | Multiple items | `AND`. The item's field has all of the values in the list. | Category is all: Book, Review, Science Fiction | | `isNotAll` | Multiple items | `NOT AND`. The item's field doesn't have all of the values in the list. | Category is not all: Book, Review, Science Fiction | -`is` and `isNot` are single-selection operators, while `isAny`, `isNone`, `isAll`, and `isNotALl` are multi-selection. By default, a filter with no operators declared will support the `isAny` and `isNone` multi-selection operators. A filter cannot mix single-selection & multi-selection operators; if a single-selection operator is present in the list of valid operators, the multi-selection ones will be discarded and the filter won't allow selecting more than one item. +`is` and `isNot` are single-selection operators, while `isAny`, `isNone`, `isAll`, and `isNotALl` are multi-selection. A filter with no operators declared will support the `isAny` and `isNone` multi-selection operators by default. A filter cannot mix single-selection & multi-selection operators; if a single-selection operator is present in the list of valid operators, the multi-selection ones will be discarded, and the filter won't allow selecting more than one item. Example: diff --git a/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx b/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx index 92a3fe85f67e74..86f0bb6db0ba84 100644 --- a/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx +++ b/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import type { ReactElement } from 'react'; + /** * WordPress dependencies */ @@ -15,11 +20,46 @@ import { closeSmall } from '@wordpress/icons'; * Internal dependencies */ import DataViewsContext from '../dataviews-context'; -import { ActionWithModal } from '../dataviews-item-actions'; -import type { Action } from '../../types'; +import { ActionModal } from '../dataviews-item-actions'; +import type { Action, ActionModal as ActionModalType } from '../../types'; import type { SetSelection } from '../../private-types'; import type { ActionTriggerProps } from '../dataviews-item-actions'; +interface ActionWithModalProps< Item > { + action: ActionModalType< Item >; + items: Item[]; + ActionTriggerComponent: ( + props: ActionTriggerProps< Item > + ) => ReactElement; +} + +function ActionWithModal< Item >( { + action, + items, + ActionTriggerComponent, +}: ActionWithModalProps< Item > ) { + const [ isModalOpen, setIsModalOpen ] = useState( false ); + const actionTriggerProps = { + action, + onClick: () => { + setIsModalOpen( true ); + }, + items, + }; + return ( + <> + + { isModalOpen && ( + setIsModalOpen( false ) } + /> + ) } + + ); +} + export function useHasAPossibleBulkAction< Item >( actions: Action< Item >[], item: Item @@ -160,7 +200,7 @@ function ActionButton< Item >( { key={ action.id } action={ action } items={ selectedEligibleItems } - ActionTrigger={ ActionTrigger } + ActionTriggerComponent={ ActionTrigger } /> ); } diff --git a/packages/dataviews/src/components/dataviews-item-actions/index.tsx b/packages/dataviews/src/components/dataviews-item-actions/index.tsx index c5e1cb09adf15f..abe63e27a15b3b 100644 --- a/packages/dataviews/src/components/dataviews-item-actions/index.tsx +++ b/packages/dataviews/src/components/dataviews-item-actions/index.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import type { MouseEventHandler, ReactElement } from 'react'; +import type { MouseEventHandler } from 'react'; /** * WordPress dependencies @@ -32,20 +32,17 @@ export interface ActionTriggerProps< Item > { items: Item[]; } -interface ActionModalProps< Item > { +export interface ActionModalProps< Item > { action: ActionModalType< Item >; items: Item[]; - closeModal?: () => void; -} - -interface ActionWithModalProps< Item > extends ActionModalProps< Item > { - ActionTrigger: ( props: ActionTriggerProps< Item > ) => ReactElement; - isBusy?: boolean; + closeModal: () => void; } interface ActionsMenuGroupProps< Item > { actions: Action< Item >[]; item: Item; + registry: ReturnType< typeof useRegistry >; + setActiveModalAction: ( action: ActionModalType< Item > | null ) => void; } interface ItemActionsProps< Item > { @@ -58,6 +55,7 @@ interface CompactItemActionsProps< Item > { item: Item; actions: Action< Item >[]; isSmall?: boolean; + registry: ReturnType< typeof useRegistry >; } interface PrimaryActionsProps< Item > { @@ -65,12 +63,6 @@ interface PrimaryActionsProps< Item > { actions: Action< Item >[]; registry: ReturnType< typeof useRegistry >; } -interface ActionsListProps< Item > { - item: Item; - actions: Action< Item >[]; - registry: ReturnType< typeof useRegistry >; - ActionTrigger: ( props: ActionTriggerProps< Item > ) => ReactElement; -} function ButtonTrigger< Item >( { action, @@ -98,10 +90,7 @@ function MenuItemTrigger< Item >( { const label = typeof action.label === 'string' ? action.label : action.label( items ); return ( - + { label } ); @@ -118,7 +107,7 @@ export function ActionModal< Item >( { {} ) } + onRequestClose={ closeModal } focusOnMount="firstContentElement" size="medium" overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase( @@ -130,48 +119,28 @@ export function ActionModal< Item >( { ); } -export function ActionWithModal< Item >( { - action, - items, - ActionTrigger, - isBusy, -}: ActionWithModalProps< Item > ) { - const [ isModalOpen, setIsModalOpen ] = useState( false ); - const actionTriggerProps = { - action, - onClick: () => { - setIsModalOpen( true ); - }, - items, - isBusy, - }; - return ( - <> - - { isModalOpen && ( - setIsModalOpen( false ) } - /> - ) } - - ); -} - export function ActionsMenuGroup< Item >( { actions, item, + registry, + setActiveModalAction, }: ActionsMenuGroupProps< Item > ) { - const registry = useRegistry(); return ( - + { actions.map( ( action ) => ( + { + if ( 'RenderModal' in action ) { + setActiveModalAction( action ); + return; + } + action.callback( [ item ], { registry } ); + } } + items={ [ item ] } + /> + ) ) } ); } @@ -210,6 +179,7 @@ export default function ItemActions< Item >( { item={ item } actions={ eligibleActions } isSmall + registry={ registry } /> ); } @@ -239,7 +209,11 @@ export default function ItemActions< Item >( { actions={ primaryActions } registry={ registry } /> - + ); } @@ -248,23 +222,41 @@ function CompactItemActions< Item >( { item, actions, isSmall, + registry, }: CompactItemActionsProps< Item > ) { + const [ activeModalAction, setActiveModalAction ] = useState( + null as ActionModalType< Item > | null + ); return ( - + + } + placement="bottom-end" + > + - } - placement="bottom-end" - > - - + + { !! activeModalAction && ( + setActiveModalAction( null ) } + /> + ) } + ); } @@ -273,45 +265,33 @@ function PrimaryActions< Item >( { actions, registry, }: PrimaryActionsProps< Item > ) { + const [ activeModalAction, setActiveModalAction ] = useState( null as any ); if ( ! Array.isArray( actions ) || actions.length === 0 ) { return null; } return ( - - ); -} - -function ActionsList< Item >( { - item, - actions, - registry, - ActionTrigger, -}: ActionsListProps< Item > ) { - return actions.map( ( action ) => { - if ( 'RenderModal' in action ) { - return ( - + { actions.map( ( action ) => ( + { + if ( 'RenderModal' in action ) { + setActiveModalAction( action ); + return; + } + action.callback( [ item ], { registry } ); + } } items={ [ item ] } - ActionTrigger={ ActionTrigger } /> - ); - } - return ( - { - action.callback( [ item ], { registry } ); - } } - items={ [ item ] } - /> - ); - } ); + ) ) } + { !! activeModalAction && ( + setActiveModalAction( null ) } + /> + ) } + + ); } diff --git a/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx b/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx index c71636618716ba..827f061976443e 100644 --- a/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx +++ b/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx @@ -15,7 +15,7 @@ interface DataViewsSelectionCheckboxProps< Item > { onChangeSelection: SetSelection; item: Item; getItemId: ( item: Item ) => string; - primaryField?: Field< Item >; + titleField?: Field< Item >; disabled: boolean; } @@ -24,19 +24,19 @@ export default function DataViewsSelectionCheckbox< Item >( { onChangeSelection, item, getItemId, - primaryField, + titleField, disabled, }: DataViewsSelectionCheckboxProps< Item > ) { const id = getItemId( item ); const checked = ! disabled && selection.includes( id ); let selectionLabel; - if ( primaryField?.getValue && item ) { + if ( titleField?.getValue && item ) { // eslint-disable-next-line @wordpress/valid-sprintf selectionLabel = sprintf( checked ? /* translators: %s: item title. */ __( 'Deselect item: %s' ) : /* translators: %s: item title. */ __( 'Select item: %s' ), - primaryField.getValue( { item } ) + titleField.getValue( { item } ) ); } else { selectionLabel = checked diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx index f13670f27cdab7..3146064a41922b 100644 --- a/packages/dataviews/src/components/dataviews-view-config/index.tsx +++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx @@ -23,29 +23,27 @@ import { __experimentalText as Text, privateApis as componentsPrivateApis, BaseControl, + Icon, } from '@wordpress/components'; import { __, _x, sprintf } from '@wordpress/i18n'; import { memo, useContext, useMemo } from '@wordpress/element'; -import { chevronDown, chevronUp, cog, seen, unseen } from '@wordpress/icons'; +import { + chevronDown, + chevronUp, + cog, + seen, + unseen, + lock, +} from '@wordpress/icons'; import warning from '@wordpress/warning'; import { useInstanceId } from '@wordpress/compose'; /** * Internal dependencies */ -import { - SORTING_DIRECTIONS, - LAYOUT_TABLE, - sortIcons, - sortLabels, -} from '../../constants'; -import { - VIEW_LAYOUTS, - getNotHidableFieldIds, - getVisibleFieldIds, - getHiddenFieldIds, -} from '../../dataviews-layouts'; -import type { SupportedLayouts, View, Field } from '../../types'; +import { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants'; +import { VIEW_LAYOUTS } from '../../dataviews-layouts'; +import type { NormalizedField, SupportedLayouts, View } from '../../types'; import DataViewsContext from '../dataviews-context'; import { unlock } from '../../lock-unlock'; @@ -55,7 +53,11 @@ interface ViewTypeMenuProps { defaultLayouts?: SupportedLayouts; } -const DATAVIEWS_CONFIG_POPOVER_PROPS = { placement: 'bottom-end', offset: 9 }; +const DATAVIEWS_CONFIG_POPOVER_PROPS = { + className: 'dataviews-config__popover', + placement: 'bottom-end', + offset: 9, +}; function ViewTypeMenu( { defaultLayouts = { list: {}, grid: {}, table: {} }, @@ -93,8 +95,13 @@ function ViewTypeMenu( { case 'list': case 'grid': case 'table': + const viewWithoutLayout = { ...view }; + if ( 'layout' in viewWithoutLayout ) { + delete viewWithoutLayout.layout; + } + // @ts-expect-error return onChangeView( { - ...view, + ...viewWithoutLayout, type: e.target.value, ...defaultLayouts[ e.target.value ], } ); @@ -237,236 +244,331 @@ function ItemsPerPageControl() { ); } -interface FieldItemProps { - id: any; - label: string; - index: number; - isVisible: boolean; - isHidable: boolean; -} - function FieldItem( { - field: { id, label, index, isVisible, isHidable }, - fields, - view, - onChangeView, + field, + isVisible, + isFirst, + isLast, + canMove = true, + onToggleVisibility, + onMoveUp, + onMoveDown, }: { - field: FieldItemProps; - fields: Field< any >[]; - view: View; - onChangeView: ( view: View ) => void; + field: NormalizedField< any >; + isVisible: boolean; + isFirst?: boolean; + isLast?: boolean; + canMove?: boolean; + onToggleVisibility?: () => void; + onMoveUp?: () => void; + onMoveDown?: () => void; } ) { - const visibleFieldIds = getVisibleFieldIds( view, fields ); + const focusVisibilityField = () => { + // Focus the visibility button to avoid focus loss. + // Our code is safe against the component being unmounted, so we don't need to worry about cleaning the timeout. + // eslint-disable-next-line @wordpress/react-no-unsafe-timeout + setTimeout( () => { + const element = document.querySelector( + `.dataviews-field-control__field-${ field.id } .dataviews-field-control__field-visibility-button` + ); + if ( element instanceof HTMLElement ) { + element.focus(); + } + }, 50 ); + }; return ( - + - { label } + + { ! canMove && ! field.enableHiding && ( + + ) } + + + { field.label } + - { view.type === LAYOUT_TABLE && isVisible && ( + { isVisible && ( <>
    ) } @@ -259,18 +285,23 @@ function ListItem< Item >( { >
    - { renderedPrimaryField } + { renderedTitleField }
    { usedActions }     + { showDescription && descriptionField?.render && ( +
    + +
    + ) }
    - { visibleFields.map( ( field ) => ( + { otherFields.map( ( field ) => (
    ( props: ViewListProps< Item > ) { const selectedItem = data?.findLast( ( item ) => selection.includes( getItemId( item ) ) ); - - const mediaField = fields.find( - ( field ) => field.id === view.layout?.mediaField - ); - const primaryField = fields.find( - ( field ) => field.id === view.layout?.primaryField + const titleField = fields.find( ( field ) => field.id === view.titleField ); + const mediaField = fields.find( ( field ) => field.id === view.mediaField ); + const descriptionField = fields.find( + ( field ) => field.id === view.descriptionField ); - const viewFields = view.fields || fields.map( ( field ) => field.id ); - const visibleFields = fields.filter( + const otherFields = fields.filter( ( field ) => - viewFields.includes( field.id ) && - ! [ view.layout?.primaryField, view.layout?.mediaField ].includes( - field.id - ) + ( view.fields ?? [] ).includes( field.id ) && + ! [ + view.titleField, + view.mediaField, + view.descriptionField, + ].includes( field.id ) ); const onSelect = ( item: Item ) => @@ -465,14 +495,16 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) { return ( ); diff --git a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx index 7071e54620f369..763cf83b5c2f93 100644 --- a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx +++ b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx @@ -27,7 +27,6 @@ import type { ViewTable as ViewTableType, Operator, } from '../../types'; -import { getVisibleFieldIds } from '../index'; const { Menu } = unlock( componentsPrivateApis ); @@ -38,6 +37,7 @@ interface HeaderMenuProps< Item > { onChangeView: ( view: ViewTableType ) => void; onHide: ( field: NormalizedField< Item > ) => void; setOpenedFilter: ( fieldId: string ) => void; + canMove?: boolean; } function WithMenuSeparators( { children }: { children: ReactNode } ) { @@ -59,46 +59,38 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >( onChangeView, onHide, setOpenedFilter, + canMove = true, }: HeaderMenuProps< Item >, ref: Ref< HTMLButtonElement > ) { - const visibleFieldIds = getVisibleFieldIds( view, fields ); + const visibleFieldIds = view.fields ?? []; const index = visibleFieldIds?.indexOf( fieldId ) as number; const isSorted = view.sort?.field === fieldId; let isHidable = false; let isSortable = false; let canAddFilter = false; - let header; let operators: Operator[] = []; - - const combinedField = view.layout?.combinedFields?.find( - ( f ) => f.id === fieldId - ); const field = fields.find( ( f ) => f.id === fieldId ); - if ( ! combinedField ) { - if ( ! field ) { - // No combined or regular field found. - return null; - } + if ( ! field ) { + // No combined or regular field found. + return null; + } - isHidable = field.enableHiding !== false; - isSortable = field.enableSorting !== false; - header = field.header; + isHidable = field.enableHiding !== false; + isSortable = field.enableSorting !== false; + const header = field.header; - operators = sanitizeOperators( field ); - // Filter can be added: - // 1. If the field is not already part of a view's filters. - // 2. If the field meets the type and operator requirements. - // 3. If it's not primary. If it is, it should be already visible. - canAddFilter = - ! view.filters?.some( ( _filter ) => fieldId === _filter.field ) && - !! field.elements?.length && - !! operators.length && - ! field.filterBy?.isPrimary; - } else { - header = combinedField.header || combinedField.label; - } + operators = sanitizeOperators( field ); + // Filter can be added: + // 1. If the field is not already part of a view's filters. + // 2. If the field meets the type and operator requirements. + // 3. If it's not primary. If it is, it should be already visible. + canAddFilter = + ! view.filters?.some( ( _filter ) => fieldId === _filter.field ) && + !! field.elements?.length && + !! operators.length && + ! field.filterBy?.isPrimary; return ( ( ) } - - } - disabled={ index < 1 } - onClick={ () => { - onChangeView( { - ...view, - fields: [ - ...( visibleFieldIds.slice( - 0, - index - 1 - ) ?? [] ), - fieldId, - visibleFieldIds[ index - 1 ], - ...visibleFieldIds.slice( index + 1 ), - ], - } ); - } } - > - { __( 'Move left' ) } - - } - disabled={ index >= visibleFieldIds.length - 1 } - onClick={ () => { - onChangeView( { - ...view, - fields: [ - ...( visibleFieldIds.slice( 0, index ) ?? - [] ), - visibleFieldIds[ index + 1 ], - fieldId, - ...visibleFieldIds.slice( index + 2 ), - ], - } ); - } } - > - { __( 'Move right' ) } - - { isHidable && field && ( - } - onClick={ () => { - onHide( field ); - onChangeView( { - ...view, - fields: visibleFieldIds.filter( - ( id ) => id !== fieldId - ), - } ); - } } - > - - { __( 'Hide column' ) } - - - ) } - + { ( canMove || isHidable ) && field && ( + + { canMove && ( + } + disabled={ index < 1 } + onClick={ () => { + onChangeView( { + ...view, + fields: [ + ...( visibleFieldIds.slice( + 0, + index - 1 + ) ?? [] ), + fieldId, + visibleFieldIds[ index - 1 ], + ...visibleFieldIds.slice( + index + 1 + ), + ], + } ); + } } + > + + { __( 'Move left' ) } + + + ) } + { canMove && ( + } + disabled={ index >= visibleFieldIds.length - 1 } + onClick={ () => { + onChangeView( { + ...view, + fields: [ + ...( visibleFieldIds.slice( + 0, + index + ) ?? [] ), + visibleFieldIds[ index + 1 ], + fieldId, + ...visibleFieldIds.slice( + index + 2 + ), + ], + } ); + } } + > + + { __( 'Move right' ) } + + + ) } + { isHidable && field && ( + } + onClick={ () => { + onHide( field ); + onChangeView( { + ...view, + fields: visibleFieldIds.filter( + ( id ) => id !== fieldId + ), + } ); + } } + > + + { __( 'Hide column' ) } + + + ) } + + ) } ); diff --git a/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx b/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx new file mode 100644 index 00000000000000..6db65be72bdd4c --- /dev/null +++ b/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx @@ -0,0 +1,58 @@ +/** + * WordPress dependencies + */ +import { + __experimentalHStack as HStack, + __experimentalVStack as VStack, +} from '@wordpress/components'; + +/** + * Internal dependencies + */ +import type { NormalizedField } from '../../types'; +import getClickableItemProps from '../utils/get-clickable-item-props'; + +function ColumnPrimary< Item >( { + item, + titleField, + mediaField, + descriptionField, + onClickItem, + isItemClickable, +}: { + item: Item; + titleField?: NormalizedField< Item >; + mediaField?: NormalizedField< Item >; + descriptionField?: NormalizedField< Item >; + onClickItem?: ( item: Item ) => void; + isItemClickable: ( item: Item ) => boolean; +} ) { + const clickableProps = getClickableItemProps( { + item, + isItemClickable, + onClickItem, + className: + 'dataviews-view-table__cell-content-wrapper dataviews-title-field', + } ); + return ( + + { mediaField && ( +
    + +
    + ) } + + { titleField && ( +
    + +
    + ) } + { descriptionField && ( + + ) } +     +     + ); +} + +export default ColumnPrimary; diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx index 81d856451bfcdc..b010b3ff154fbb 100644 --- a/packages/dataviews/src/dataviews-layouts/table/index.tsx +++ b/packages/dataviews/src/dataviews-layouts/table/index.tsx @@ -7,17 +7,13 @@ import clsx from 'clsx'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { - Spinner, - __experimentalHStack as HStack, - __experimentalVStack as VStack, -} from '@wordpress/components'; +import { Spinner } from '@wordpress/components'; import { useEffect, useId, useRef, useState } from '@wordpress/element'; /** * Internal dependencies */ -import SingleSelectionCheckbox from '../../components/dataviews-selection-checkbox'; +import DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox'; import ItemActions from '../../components/dataviews-item-actions'; import { sortValues } from '../../constants'; import { @@ -30,39 +26,15 @@ import type { NormalizedField, ViewTable as ViewTableType, ViewTableProps, - CombinedField, } from '../../types'; import type { SetSelection } from '../../private-types'; import ColumnHeaderMenu from './column-header-menu'; -import { getVisibleFieldIds } from '../index'; -import getClickableItemProps from '../utils/get-clickable-item-props'; +import ColumnPrimary from './column-primary'; interface TableColumnFieldProps< Item > { - primaryField?: NormalizedField< Item >; - field: NormalizedField< Item >; - item: Item; - isItemClickable: ( item: Item ) => boolean; - onClickItem?: ( item: Item ) => void; -} - -interface TableColumnCombinedProps< Item > { - primaryField?: NormalizedField< Item >; - fields: NormalizedField< Item >[]; - field: CombinedField; - item: Item; - view: ViewTableType; - isItemClickable: ( item: Item ) => boolean; - onClickItem?: ( item: Item ) => void; -} - -interface TableColumnProps< Item > { - primaryField?: NormalizedField< Item >; fields: NormalizedField< Item >[]; - item: Item; column: string; - view: ViewTableType; - isItemClickable: ( item: Item ) => boolean; - onClickItem?: ( item: Item ) => void; + item: Item; } interface TableRowProps< Item > { @@ -72,7 +44,9 @@ interface TableRowProps< Item > { fields: NormalizedField< Item >[]; id: string; view: ViewTableType; - primaryField?: NormalizedField< Item >; + titleField?: NormalizedField< Item >; + mediaField?: NormalizedField< Item >; + descriptionField?: NormalizedField< Item >; selection: string[]; getItemId: ( item: Item ) => string; onChangeSelection: SetSelection; @@ -80,82 +54,24 @@ interface TableRowProps< Item > { onClickItem?: ( item: Item ) => void; } -function TableColumn< Item >( { - column, - fields, - view, - ...props -}: TableColumnProps< Item > ) { - const field = fields.find( ( f ) => f.id === column ); - if ( !! field ) { - return ; - } - const combinedField = view.layout?.combinedFields?.find( - ( f ) => f.id === column - ); - if ( !! combinedField ) { - return ( - - ); - } - - return null; -} - function TableColumnField< Item >( { - primaryField, item, - field, - isItemClickable, - onClickItem, + fields, + column, }: TableColumnFieldProps< Item > ) { - const isPrimaryField = primaryField?.id === field.id; - const isItemClickableField = ( i: Item ) => - isItemClickable( i ) && isPrimaryField; + const field = fields.find( ( f ) => f.id === column ); - const clickableProps = getClickableItemProps( { - item, - isItemClickable: isItemClickableField, - onClickItem, - className: 'dataviews-view-table__cell-content', - } ); + if ( ! field ) { + return null; + } return ( -
    -
    - -
    +
    +
    ); } -function TableColumnCombined< Item >( { - field, - ...props -}: TableColumnCombinedProps< Item > ) { - const children = field.children.map( ( child ) => ( - - ) ); - - if ( field.direction === 'horizontal' ) { - return ( - - { children } - - ); - } - return { children }; -} - function TableRow< Item >( { hasBulkActions, item, @@ -163,7 +79,9 @@ function TableRow< Item >( { fields, id, view, - primaryField, + titleField, + mediaField, + descriptionField, selection, getItemId, isItemClickable, @@ -173,7 +91,7 @@ function TableRow< Item >( { const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item ); const isSelected = hasPossibleBulkAction && selection.includes( id ); const [ isHovered, setIsHovered ] = useState( false ); - + const { showTitle = true, showMedia = true, showDescription = true } = view; const handleMouseEnter = () => { setIsHovered( true ); }; @@ -185,7 +103,11 @@ function TableRow< Item >( { // `onClick` and can be used to exclude touchscreen devices from certain // behaviours. const isTouchDeviceRef = useRef( false ); - const columns = getVisibleFieldIds( view, fields ); + const columns = view.fields ?? []; + const hasPrimaryColumn = + ( titleField && showTitle ) || + ( mediaField && showMedia ) || + ( descriptionField && showDescription ); return ( ( { } } >
    -
    ) } + { hasPrimaryColumn && ( + + + + ) } { columns.map( ( column: string ) => { // Explicits picks the supported styles. const { width, maxWidth, minWidth } = @@ -241,14 +177,10 @@ function TableRow< Item >( { return ( - ); @@ -322,12 +254,30 @@ function ViewTable< Item >( { setNextHeaderMenuToFocus( fallback?.node ); }; - const columns = getVisibleFieldIds( view, fields ); const hasData = !! data?.length; - const primaryField = fields.find( - ( field ) => field.id === view.layout?.primaryField + const titleField = fields.find( ( field ) => field.id === view.titleField ); + const mediaField = fields.find( ( field ) => field.id === view.mediaField ); + const descriptionField = fields.find( + ( field ) => field.id === view.descriptionField ); + const { showTitle = true, showMedia = true, showDescription = true } = view; + const hasPrimaryColumn = + ( titleField && showTitle ) || + ( mediaField && showMedia ) || + ( descriptionField && showDescription ); + const columns = view.fields ?? []; + const headerMenuRef = + ( column: string, index: number ) => ( node: HTMLButtonElement ) => { + if ( node ) { + headerMenuRefs.current.set( column, { + node, + fallback: columns[ index > 0 ? index - 1 : 1 ], + } ); + } else { + headerMenuRefs.current.delete( column ); + } + }; return ( <> @@ -361,6 +311,27 @@ function ViewTable< Item >( { /> ) } + { hasPrimaryColumn && ( + + + { titleField && ( + + ) } + + + ) } { columns.map( ( column, index ) => { // Explicits picks the supported styles. const { width, maxWidth, minWidth } = @@ -370,6 +341,7 @@ function ViewTable< Item >( { key={ column } style={ { width, maxWidth, minWidth } } aria-sort={ + view.sort?.direction && view.sort?.field === column ? sortValues[ view.sort.direction ] : undefined @@ -377,26 +349,7 @@ function ViewTable< Item >( { scope="col" > { - if ( node ) { - headerMenuRefs.current.set( - column, - { - node, - fallback: - columns[ - index > 0 - ? index - 1 - : 1 - ], - } - ); - } else { - headerMenuRefs.current.delete( - column - ); - } - } } + ref={ headerMenuRef( column, index ) } fieldId={ column } view={ view } fields={ fields } @@ -427,7 +380,9 @@ function ViewTable< Item >( { fields={ fields } id={ getItemId( item ) || index.toString() } view={ view } - primaryField={ primaryField } + titleField={ titleField } + mediaField={ mediaField } + descriptionField={ descriptionField } selection={ selection } getItemId={ getItemId } onChangeSelection={ onChangeSelection } diff --git a/packages/dataviews/src/dataviews-layouts/table/style.scss b/packages/dataviews/src/dataviews-layouts/table/style.scss index 3bbb045c73a9d9..5a713dd428c127 100644 --- a/packages/dataviews/src/dataviews-layouts/table/style.scss +++ b/packages/dataviews/src/dataviews-layouts/table/style.scss @@ -222,3 +222,7 @@ --checkbox-input-size: 16px; } } + +.dataviews-column-primary__media { + max-width: 60px; +} diff --git a/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts b/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts index d952839d376d2c..e03e3a6351ec15 100644 --- a/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts +++ b/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts @@ -7,14 +7,16 @@ export default function getClickableItemProps< Item >( { item: Item; isItemClickable: ( item: Item ) => boolean; onClickItem?: ( item: Item ) => void; - className: string; + className?: string; } ) { if ( ! isItemClickable( item ) || ! onClickItem ) { return { className }; } return { - className: `${ className } ${ className }--clickable`, + className: className + ? `${ className } ${ className }--clickable` + : undefined, role: 'button', tabIndex: 0, onClick: ( event: React.MouseEvent ) => { diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts index 0bce8b8cf2c08a..96fd4a8cd01afc 100644 --- a/packages/dataviews/src/types.ts +++ b/packages/dataviews/src/types.ts @@ -292,24 +292,36 @@ interface ViewBase { * The fields to render */ fields?: string[]; -} -export interface CombinedField { - id: string; + /** + * Title field + */ + titleField?: string; - label: string; + /** + * Media field + */ + mediaField?: string; - header?: string | ReactElement; + /** + * Description field + */ + descriptionField?: string; /** - * The fields to use as columns. + * Whether to show the title */ - children: string[]; + showTitle?: boolean; /** - * The direction of the stack. + * Whether to show the media */ - direction: 'horizontal' | 'vertical'; + showMedia?: boolean; + + /** + * Whether to show the description + */ + showDescription?: boolean; } export interface ColumnStyle { @@ -335,16 +347,6 @@ export interface ViewTable extends ViewBase { type: 'table'; layout?: { - /** - * The field to use as the primary field. - */ - primaryField?: string; - - /** - * The fields to use as columns. - */ - combinedFields?: CombinedField[]; - /** * The styles for the columns. */ @@ -359,39 +361,12 @@ export interface ViewTable extends ViewBase { export interface ViewList extends ViewBase { type: 'list'; - - layout?: { - /** - * The field to use as the primary field. - */ - primaryField?: string; - - /** - * The field to use as the media field. - */ - mediaField?: string; - }; } export interface ViewGrid extends ViewBase { type: 'grid'; layout?: { - /** - * The field to use as the primary field. - */ - primaryField?: string; - - /** - * The field to use as the media field. - */ - mediaField?: string; - - /** - * The fields to use as columns. - */ - columnFields?: string[]; - /** * The fields to use as badge fields. */ diff --git a/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap b/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap index bafae8eb914867..be69ee891743da 100644 --- a/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap +++ b/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap @@ -41,7 +41,7 @@ exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-dependency-g `; exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-dynamic-dependency-graph\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = ` -" array(array('id' => '@wordpress/interactivity', 'import' => 'dynamic')), 'version' => '3e43f50123c85675372f', 'type' => 'module'); +" array(array('id' => '@wordpress/interactivity', 'import' => 'dynamic')), 'version' => '3ca651be783423315165', 'type' => 'module'); " `; @@ -71,7 +71,7 @@ exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-external-dep `; exports[`DependencyExtractionWebpackPlugin modules Webpack \`dynamic-import\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = ` -" array(array('id' => '@wordpress/blob', 'import' => 'dynamic')), 'version' => '1c950858231a54e241b8', 'type' => 'module'); +" array(array('id' => '@wordpress/blob', 'import' => 'dynamic')), 'version' => 'fbb215dc4902543bce35', 'type' => 'module'); " `; @@ -265,17 +265,17 @@ exports[`DependencyExtractionWebpackPlugin modules Webpack \`polyfill-magic-comm exports[`DependencyExtractionWebpackPlugin modules Webpack \`polyfill-magic-comment-minified\` should produce expected output: External modules should match snapshot 1`] = `[]`; exports[`DependencyExtractionWebpackPlugin modules Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'a.asset.php' should match snapshot 1`] = ` -" array('@wordpress/blob'), 'version' => 'ee5ac21a1f0003d732e6', 'type' => 'module', 'handle' => 'runtime-chunk-single-modules-a'); +" array('@wordpress/blob'), 'version' => 'ab7fa97b1381e41e0f70', 'type' => 'module', 'handle' => 'runtime-chunk-single-modules-a'); " `; exports[`DependencyExtractionWebpackPlugin modules Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'b.asset.php' should match snapshot 1`] = ` -" array('@wordpress/blob', 'lodash'), 'version' => '5b112b32c6db548c2997', 'type' => 'module', 'handle' => 'runtime-chunk-single-modules-b'); +" array('@wordpress/blob', 'lodash'), 'version' => '498fd24026d68fa84ba9', 'type' => 'module', 'handle' => 'runtime-chunk-single-modules-b'); " `; exports[`DependencyExtractionWebpackPlugin modules Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'runtime.asset.php' should match snapshot 1`] = ` -" array(), 'version' => 'b1ca4106075e0bd94f9c', 'type' => 'module', 'handle' => 'runtime-chunk-single-modules-runtime'); +" array(), 'version' => '5ac0d6987a8e7fe809a3', 'type' => 'module', 'handle' => 'runtime-chunk-single-modules-runtime'); " `; @@ -556,7 +556,7 @@ exports[`DependencyExtractionWebpackPlugin scripts Webpack \`module-renames\` sh `; exports[`DependencyExtractionWebpackPlugin scripts Webpack \`no-default\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = ` -" array(), 'version' => '43880e6c42e7c39fcdf1'); +" array(), 'version' => 'be8b28b738de0d6b883a'); " `; diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index c230738a077d92..b0a2b3f7d76b81 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -548,7 +548,7 @@ function Layout( { return ( - +
    toggleFeature( 'welcomeGuide' ) } pages={ [ @@ -32,7 +32,7 @@ export default function WelcomeGuideDefault() { content: ( <>

    - { __( 'Welcome to the block editor' ) } + { __( 'Welcome to the editor' ) }

    { __( @@ -52,7 +52,7 @@ export default function WelcomeGuideDefault() { content: ( <>

    - { __( 'Make each block your own' ) } + { __( 'Customize each block' ) }

    { __( @@ -72,7 +72,7 @@ export default function WelcomeGuideDefault() { content: ( <>

    - { __( 'Get to know the block library' ) } + { __( 'Explore all blocks' ) }

    { createInterpolateElement( @@ -102,7 +102,7 @@ export default function WelcomeGuideDefault() { content: ( <>

    - { __( 'Learn how to use the block editor' ) } + { __( 'Learn more' ) }

    { createInterpolateElement( diff --git a/packages/edit-site/src/components/add-new-post/index.js b/packages/edit-site/src/components/add-new-post/index.js index 04e286e3967a44..a30f5995aab6fa 100644 --- a/packages/edit-site/src/components/add-new-post/index.js +++ b/packages/edit-site/src/components/add-new-post/index.js @@ -45,7 +45,7 @@ export default function AddNewPostModal( { postType, onSave, onClose } ) { { status: 'draft', title, - slug: title || __( 'No title' ), + slug: title ?? undefined, content: !! postTypeObject.template && postTypeObject.template.length diff --git a/packages/edit-site/src/components/error-boundary/index.js b/packages/edit-site/src/components/error-boundary/index.js deleted file mode 100644 index 88b04ae0b40e34..00000000000000 --- a/packages/edit-site/src/components/error-boundary/index.js +++ /dev/null @@ -1,44 +0,0 @@ -/** - * WordPress dependencies - */ -import { Component } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { doAction } from '@wordpress/hooks'; - -/** - * Internal dependencies - */ -import ErrorBoundaryWarning from './warning'; - -export default class ErrorBoundary extends Component { - constructor() { - super( ...arguments ); - - this.state = { - error: null, - }; - } - - componentDidCatch( error ) { - doAction( 'editor.ErrorBoundary.errorLogged', error ); - } - - static getDerivedStateFromError( error ) { - return { error }; - } - - render() { - if ( ! this.state.error ) { - return this.props.children; - } - - return ( - - ); - } -} diff --git a/packages/edit-site/src/components/error-boundary/test/error-boundary.js b/packages/edit-site/src/components/error-boundary/test/error-boundary.js deleted file mode 100644 index 27ec4c80419676..00000000000000 --- a/packages/edit-site/src/components/error-boundary/test/error-boundary.js +++ /dev/null @@ -1,40 +0,0 @@ -/** - * External dependencies - */ -import { render } from '@testing-library/react'; - -/** - * WordPress dependencies - */ -import * as wpHooks from '@wordpress/hooks'; - -/** - * Internal dependencies - */ -import ErrorBoundary from '../index'; - -const theError = new Error( 'Kaboom' ); - -const ChildComponent = () => { - throw theError; -}; - -describe( 'Error Boundary', () => { - describe( 'when error is thrown from a Child component', () => { - it( 'calls the `editor.ErrorBoundary.errorLogged` hook action with the error object', () => { - const doAction = jest.spyOn( wpHooks, 'doAction' ); - - render( - - - - ); - - expect( doAction ).toHaveBeenCalledWith( - 'editor.ErrorBoundary.errorLogged', - theError - ); - expect( console ).toHaveErrored(); - } ); - } ); -} ); diff --git a/packages/edit-site/src/components/error-boundary/warning.js b/packages/edit-site/src/components/error-boundary/warning.js deleted file mode 100644 index c4090c7e6b1190..00000000000000 --- a/packages/edit-site/src/components/error-boundary/warning.js +++ /dev/null @@ -1,30 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; -import { Warning } from '@wordpress/block-editor'; -import { useCopyToClipboard } from '@wordpress/compose'; - -function CopyButton( { text, children } ) { - const ref = useCopyToClipboard( text ); - return ( - - ); -} - -export default function ErrorBoundaryWarning( { message, error } ) { - const actions = [ - - { __( 'Copy Error' ) } - , - ]; - - return ( - - { message } - - ); -} diff --git a/packages/edit-site/src/components/global-styles/preview-colors.js b/packages/edit-site/src/components/global-styles/preview-colors.js index 8c1008330ec068..a7e6563748ca03 100644 --- a/packages/edit-site/src/components/global-styles/preview-colors.js +++ b/packages/edit-site/src/components/global-styles/preview-colors.js @@ -10,7 +10,7 @@ import { * Internal dependencies */ import PresetColors from './preset-colors'; -import PreviewIframe from './preview-iframe'; +import PreviewWrapper from './preview-wrapper'; const firstFrameVariants = { start: { @@ -25,7 +25,7 @@ const firstFrameVariants = { const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => { return ( - { ) } - + ); }; diff --git a/packages/edit-site/src/components/global-styles/preview-styles.js b/packages/edit-site/src/components/global-styles/preview-styles.js index dff1ef5a6f42ba..f392e99ae951e6 100644 --- a/packages/edit-site/src/components/global-styles/preview-styles.js +++ b/packages/edit-site/src/components/global-styles/preview-styles.js @@ -15,7 +15,7 @@ import { unlock } from '../../lock-unlock'; import { useStylesPreviewColors } from './hooks'; import TypographyExample from './typography-example'; import HighlightedColors from './highlighted-colors'; -import PreviewIframe from './preview-iframe'; +import PreviewWrapper from './preview-wrapper'; const { useGlobalStyle } = unlock( blockEditorPrivateApis ); @@ -67,7 +67,7 @@ const PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => { const { paletteColors } = useStylesPreviewColors(); return ( - { ) } - + ); }; diff --git a/packages/edit-site/src/components/global-styles/preview-typography.js b/packages/edit-site/src/components/global-styles/preview-typography.js index 26ae13eaa09083..686ebd1e6f0656 100644 --- a/packages/edit-site/src/components/global-styles/preview-typography.js +++ b/packages/edit-site/src/components/global-styles/preview-typography.js @@ -7,11 +7,11 @@ import { __experimentalHStack as HStack } from '@wordpress/components'; * Internal dependencies */ import TypographyExample from './typography-example'; -import PreviewIframe from './preview-iframe'; +import PreviewWrapper from './preview-wrapper'; const StylesPreviewTypography = ( { variation, isFocused, withHoverView } ) => { return ( - { /> ) } - + ); }; diff --git a/packages/edit-site/src/components/global-styles/preview-iframe.js b/packages/edit-site/src/components/global-styles/preview-wrapper.js similarity index 73% rename from packages/edit-site/src/components/global-styles/preview-iframe.js rename to packages/edit-site/src/components/global-styles/preview-wrapper.js index e830accf6d939b..b3c83bad69d844 100644 --- a/packages/edit-site/src/components/global-styles/preview-iframe.js +++ b/packages/edit-site/src/components/global-styles/preview-wrapper.js @@ -1,27 +1,21 @@ /** * WordPress dependencies */ -import { - __unstableIframe as Iframe, - __unstableEditorStyles as EditorStyles, - privateApis as blockEditorPrivateApis, -} from '@wordpress/block-editor'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { __unstableMotion as motion } from '@wordpress/components'; import { useThrottle, useReducedMotion, useResizeObserver, } from '@wordpress/compose'; -import { useLayoutEffect, useState, useMemo } from '@wordpress/element'; +import { useLayoutEffect, useState } from '@wordpress/element'; /** * Internal dependencies */ import { unlock } from '../../lock-unlock'; -const { useGlobalStyle, useGlobalStylesOutput } = unlock( - blockEditorPrivateApis -); +const { useGlobalStyle } = unlock( blockEditorPrivateApis ); const normalizedWidth = 248; const normalizedHeight = 152; @@ -33,7 +27,7 @@ const THROTTLE_OPTIONS = { trailing: true, }; -export default function PreviewIframe( { +export default function PreviewWrapper( { children, label, isFocused, @@ -41,7 +35,6 @@ export default function PreviewIframe( { } ) { const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' ); const [ gradientValue ] = useGlobalStyle( 'color.gradient' ); - const [ styles ] = useGlobalStylesOutput(); const disableMotion = useReducedMotion(); const [ isHovered, setIsHovered ] = useState( false ); const [ containerResizeListener, { width } ] = useResizeObserver(); @@ -54,7 +47,7 @@ export default function PreviewIframe( { THROTTLE_OPTIONS ); - // Must use useLayoutEffect to avoid a flash of the iframe at the wrong + // Must use useLayoutEffect to avoid a flash of the container at the wrong // size before the width is set. useLayoutEffect( () => { if ( width ) { @@ -62,7 +55,7 @@ export default function PreviewIframe( { } }, [ width, setThrottledWidth ] ); - // Must use useLayoutEffect to avoid a flash of the iframe at the wrong + // Must use useLayoutEffect to avoid a flash of the container at the wrong // size before the width is set. useLayoutEffect( () => { const newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1; @@ -89,24 +82,6 @@ export default function PreviewIframe( { */ const ratio = ratioState ? ratioState : fallbackRatio; - /* - * Reset leaked styles from WP common.css and remove main content layout padding and border. - * Add pointer cursor to the body to indicate the iframe is interactive, - * similar to Typography variation previews. - */ - const editorStyles = useMemo( () => { - if ( styles ) { - return [ - ...styles, - { - css: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;cursor: pointer;}', - isGlobalStyles: true, - }, - ]; - } - - return styles; - }, [ styles ] ); const isReady = !! width; return ( @@ -115,8 +90,8 @@ export default function PreviewIframe( { { containerResizeListener }

    { isReady && ( - +
    ) } ); diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 4674b5e5fc3ca4..11dbae7bc66b19 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -6,7 +6,7 @@ cursor: pointer; } -.edit-site-global-styles-preview__iframe { +.edit-site-global-styles-preview__wrapper { max-width: 100%; display: block; width: 100%; @@ -230,10 +230,6 @@ // The &#{&} is a workaround for the specificity of the Card component. &#{&}, &#{&} .edit-site-global-styles-screen-root__active-style-tile-preview { - box-shadow: none; border-radius: $radius-small; - .block-editor-iframe__container { - border: 1px solid $gray-200; - } } } diff --git a/packages/edit-site/src/components/global-styles/typography-example.js b/packages/edit-site/src/components/global-styles/typography-example.js index a491ca57bf5be4..9c0a4e0e1cb13a 100644 --- a/packages/edit-site/src/components/global-styles/typography-example.js +++ b/packages/edit-site/src/components/global-styles/typography-example.js @@ -14,7 +14,9 @@ import { unlock } from '../../lock-unlock'; import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles'; import { getFontFamilies } from './utils'; -const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); +const { useGlobalStyle, GlobalStylesContext } = unlock( + blockEditorPrivateApis +); const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis ); export default function PreviewTypography( { fontSize, variation } ) { @@ -23,6 +25,9 @@ export default function PreviewTypography( { fontSize, variation } ) { if ( variation ) { config = mergeBaseAndUserConfigs( base, variation ); } + + const [ textColor ] = useGlobalStyle( 'color.text' ); + const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( config ); const bodyPreviewStyle = bodyFontFamilies ? getFamilyPreviewStyle( bodyFontFamilies ) @@ -31,6 +36,11 @@ export default function PreviewTypography( { fontSize, variation } ) { ? getFamilyPreviewStyle( headingFontFamilies ) : {}; + if ( textColor ) { + bodyPreviewStyle.color = textColor; + headingPreviewStyle.color = textColor; + } + if ( fontSize ) { bodyPreviewStyle.fontSize = fontSize; headingPreviewStyle.fontSize = fontSize; @@ -52,6 +62,7 @@ export default function PreviewTypography( { fontSize, variation } ) { } } style={ { textAlign: 'center', + lineHeight: 1, } } > diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index e7606c57a70484..00bc323ea1535c 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -25,6 +25,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { EditorSnackbars, UnsavedChangesWarning, + ErrorBoundary, privateApis as editorPrivateApis, } from '@wordpress/editor'; import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands'; @@ -36,7 +37,6 @@ import { useDispatch } from '@wordpress/data'; /** * Internal dependencies */ -import ErrorBoundary from '../error-boundary'; import { default as SiteHub, SiteHubMobile } from '../site-hub'; import ResizableFrame from '../resizable-frame'; import { unlock } from '../../lock-unlock'; @@ -136,7 +136,9 @@ function Layout() { } routeKey={ routeKey } > - { areas.sidebar } + + { areas.sidebar } + @@ -160,7 +162,7 @@ function Layout() { /> ) } - { areas.mobile } + { areas.mobile }
    ) } @@ -173,7 +175,7 @@ function Layout() { maxWidth: widths?.content, } } > - { areas.content } + { areas.content }
    ) } @@ -184,7 +186,7 @@ function Layout() { maxWidth: widths?.edit, } } > - { areas.edit } + { areas.edit }
    ) } diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js index 9a4dedca098030..b23213fa1a6db3 100644 --- a/packages/edit-site/src/components/page-patterns/index.js +++ b/packages/edit-site/src/components/page-patterns/index.js @@ -41,11 +41,7 @@ const EMPTY_ARRAY = []; const defaultLayouts = { [ LAYOUT_TABLE ]: { layout: { - primaryField: 'title', styles: { - preview: { - width: '1%', - }, author: { width: '1%', }, @@ -54,8 +50,6 @@ const defaultLayouts = { }, [ LAYOUT_GRID ]: { layout: { - mediaField: 'preview', - primaryField: 'title', badgeFields: [ 'sync-status' ], }, }, @@ -65,9 +59,11 @@ const DEFAULT_VIEW = { search: '', page: 1, perPage: 20, - layout: defaultLayouts[ LAYOUT_GRID ].layout, - fields: [ 'title', 'sync-status' ], + titleField: 'title', + mediaField: 'preview', + fields: [ 'sync-status' ], filters: [], + ...defaultLayouts[ LAYOUT_GRID ], }; export default function DataviewsPatterns() { diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js index 934fb0be6784d7..0c62b9eb450acc 100644 --- a/packages/edit-site/src/components/page-templates/index.js +++ b/packages/edit-site/src/components/page-templates/index.js @@ -34,25 +34,9 @@ const EMPTY_ARRAY = []; const defaultLayouts = { [ LAYOUT_TABLE ]: { - fields: [ 'template', 'author' ], + showMedia: false, layout: { - primaryField: 'title', - combinedFields: [ - { - id: 'template', - label: __( 'Template' ), - children: [ 'title', 'description' ], - direction: 'vertical', - }, - ], styles: { - template: { - maxWidth: 400, - minWidth: 320, - }, - preview: { - width: '1%', - }, author: { width: '1%', }, @@ -60,18 +44,10 @@ const defaultLayouts = { }, }, [ LAYOUT_GRID ]: { - fields: [ 'title', 'description', 'author' ], - layout: { - mediaField: 'preview', - primaryField: 'title', - columnFields: [ 'description' ], - }, + showMedia: true, }, [ LAYOUT_LIST ]: { - fields: [ 'title', 'description', 'author' ], - layout: { - primaryField: 'title', - }, + showMedia: false, }, }; @@ -84,9 +60,12 @@ const DEFAULT_VIEW = { field: 'title', direction: 'asc', }, - fields: defaultLayouts[ LAYOUT_GRID ].fields, - layout: defaultLayouts[ LAYOUT_GRID ].layout, + titleField: 'title', + descriptionField: 'description', + mediaField: 'preview', + fields: [ 'author' ], filters: [], + ...defaultLayouts[ LAYOUT_GRID ], }; export default function PageTemplates() { @@ -99,8 +78,6 @@ export default function PageTemplates() { return { ...DEFAULT_VIEW, type: usedType, - layout: defaultLayouts[ usedType ].layout, - fields: defaultLayouts[ usedType ].fields, filters: activeView !== 'all' ? [ @@ -111,6 +88,7 @@ export default function PageTemplates() { }, ] : [], + ...defaultLayouts[ usedType ], }; }, [ layout, activeView ] ); const [ view, setView ] = useState( defaultView ); diff --git a/packages/edit-site/src/components/post-edit/header.js b/packages/edit-site/src/components/post-edit/header.js new file mode 100644 index 00000000000000..305589d0cc22bf --- /dev/null +++ b/packages/edit-site/src/components/post-edit/header.js @@ -0,0 +1,88 @@ +/** + * WordPress dependencies + */ +import { + __experimentalHStack as HStack, + __experimentalVStack as VStack, + Icon, + __experimentalText as Text, +} from '@wordpress/components'; +import { useMemo } from '@wordpress/element'; +import { + privateApis as editorPrivateApis, + store as editorStore, +} from '@wordpress/editor'; +import { store as coreStore } from '@wordpress/core-data'; +import { useSelect } from '@wordpress/data'; +import { sprintf, __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; + +const { PostCardPanel } = unlock( editorPrivateApis ); + +export default function PostEditHeader( { postType, postId } ) { + const ids = useMemo( () => postId.split( ',' ), [ postId ] ); + const { icon, labels } = useSelect( + ( select ) => { + const { getEditedEntityRecord, getPostType } = select( coreStore ); + const { getPostIcon } = unlock( select( editorStore ) ); + const _record = getEditedEntityRecord( + 'postType', + postType, + ids[ 0 ] + ); + + return { + icon: getPostIcon( postType, { + area: _record?.area, + } ), + labels: getPostType( postType )?.labels, + }; + }, + [ ids, postType ] + ); + + if ( ids.length === 1 ) { + return ( + + ); + } + + return ( + + + + + { labels?.name && + sprintf( + // translators: %i number of selected items %s: Name of the plural post type e.g: "Posts". + __( '%i %s' ), + ids.length, + labels?.name + ) } + + + + { sprintf( + // translators: %s: Name of the plural post type e.g: "Posts". + __( 'Changes will be applied to all selected %s.' ), + labels?.name.toLowerCase() + ) } + + + ); +} diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js index 9a99a987089c1a..b3954e4ddbdeaf 100644 --- a/packages/edit-site/src/components/post-edit/index.js +++ b/packages/edit-site/src/components/post-edit/index.js @@ -18,11 +18,12 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor'; * Internal dependencies */ import Page from '../page'; +import PostEditHeader from '../post-edit/header'; import { unlock } from '../../lock-unlock'; import usePatternSettings from '../page-patterns/use-pattern-settings'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; -const { PostCardPanel, usePostFields } = unlock( editorPrivateApis ); +const { usePostFields } = unlock( editorPrivateApis ); const fieldsWithBulkEditSupport = [ 'title', @@ -76,7 +77,6 @@ function PostEditForm( { postType, postId } ) { id: 'featured_media', layout: 'regular', }, - 'title', { id: 'status', label: __( 'Status & Visibility' ), @@ -159,9 +159,7 @@ function PostEditForm( { postType, postId } ) { return ( - { ids.length === 1 && ( - - ) } + { return { ...content, - layout: defaultLayouts[ content.type ]?.layout, + ...defaultLayouts[ content.type ], }; }; diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js index 72f4c94fe6bcdd..c08a2c1a57c58e 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js +++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js @@ -27,28 +27,9 @@ import { } from '../../utils/constants'; export const defaultLayouts = { - [ LAYOUT_TABLE ]: { - layout: { - primaryField: 'title', - styles: { - title: { - maxWidth: 300, - }, - }, - }, - }, - [ LAYOUT_GRID ]: { - layout: { - mediaField: 'featured_media', - primaryField: 'title', - }, - }, - [ LAYOUT_LIST ]: { - layout: { - primaryField: 'title', - mediaField: 'featured_media', - }, - }, + [ LAYOUT_TABLE ]: {}, + [ LAYOUT_GRID ]: {}, + [ LAYOUT_LIST ]: {}, }; const DEFAULT_POST_BASE = { @@ -61,8 +42,10 @@ const DEFAULT_POST_BASE = { field: 'date', direction: 'desc', }, - fields: [ 'title', 'author', 'status' ], - layout: defaultLayouts[ LAYOUT_LIST ].layout, + titleField: 'title', + mediaField: 'featured_media', + fields: [ 'author', 'status' ], + ...defaultLayouts[ LAYOUT_LIST ], }; export function useDefaultViews( { postType } ) { diff --git a/packages/edit-site/src/components/sidebar-dataviews/index.js b/packages/edit-site/src/components/sidebar-dataviews/index.js index 410767650c6f36..312bf43d6df657 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/index.js +++ b/packages/edit-site/src/components/sidebar-dataviews/index.js @@ -26,7 +26,7 @@ export default function DataViewsSidebarContent( { postType } ) { return ( <> - + { defaultViews.map( ( dataview ) => { return ( {}; - export default function SidebarNavigationScreenGlobalStylesContent() { - const { storedSettings } = useSelect( ( select ) => { - const { getSettings } = unlock( select( editSiteStore ) ); - - return { - storedSettings: getSettings(), - }; - }, [] ); - const gap = 3; - // Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are - // loaded. This is necessary because the Iframe component waits until - // the block editor store's `__internalIsInitialized` is true before - // rendering the iframe. Without this, the iframe previews will not render - // in mobile viewport sizes, where the editor canvas is hidden. return ( - - - - - - - + + + + ); } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js index 5cf162a8cd28cc..bd40a5ad540d4c 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js @@ -18,7 +18,7 @@ import { store as editSiteStore } from '../../store'; export function MainSidebarNavigationContent() { return ( - + - + { navigationMenus?.map( ( { id, title, status }, index ) => ( + { +type Props = { + colors: Color[] | Gradient[]; + type: 'colors' | 'gradients'; + templateColumns?: string | number; + itemHeight?: string; +}; + +const ColorExamples = ( { + colors, + type, + templateColumns = '1fr 1fr', + itemHeight = '52px', +}: Props ): JSX.Element | null => { if ( ! colors ) { return null; } return ( - + { colors.map( ( color: Color | Gradient ) => { const className = type === 'gradients' @@ -35,7 +47,13 @@ const ColorExamples = ( { colors, type } ): JSX.Element | null => { className ); - return ; + return ( + + ); } ) } ); diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts index 0cbbaec07086db..401d532b98cbb7 100644 --- a/packages/edit-site/src/components/style-book/constants.ts +++ b/packages/edit-site/src/components/style-book/constants.ts @@ -220,7 +220,6 @@ export const STYLE_BOOK_IFRAME_STYLES = ` } .edit-site-style-book__color-example { - height: 32px; border: 1px solid color-mix( in srgb, currentColor 10%, transparent ); } diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx index c944b87b09d7e1..b585d556341f8c 100644 --- a/packages/edit-site/src/components/style-book/examples.tsx +++ b/packages/edit-site/src/components/style-book/examples.tsx @@ -12,7 +12,12 @@ import { /** * Internal dependencies */ -import type { BlockExample, ColorOrigin, MultiOriginPalettes } from './types'; +import type { + Block, + BlockExample, + ColorOrigin, + MultiOriginPalettes, +} from './types'; import ColorExamples from './color-examples'; import DuotoneExamples from './duotone-examples'; import { STYLE_BOOK_COLOR_GROUPS } from './constants'; @@ -84,37 +89,45 @@ function getOverviewBlockExamples( title: __( 'Colors' ), category: 'overview', content: ( - + ), }; examples.push( themeColorexample ); } - const headingBlock = createBlock( 'core/heading', { - content: __( - `AaBbCcDdEeFfGgHhiiJjKkLIMmNnOoPpQakRrssTtUuVVWwXxxYyZzOl23356789X{(…)},2!*&:/A@HELFO™` - ), - level: 1, - } ); - const firstParagraphBlock = createBlock( 'core/paragraph', { - content: __( - `A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.` - ), - } ); - const secondParagraphBlock = createBlock( 'core/paragraph', { - content: __( - `Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.` - ), - } ); + // Get examples for typography blocks. + const typographyBlockExamples: Block[] = []; + + if ( getBlockType( 'core/heading' ) ) { + const headingBlock = createBlock( 'core/heading', { + content: __( + `AaBbCcDdEeFfGgHhiiJjKkLIMmNnOoPpQakRrssTtUuVVWwXxxYyZzOl23356789X{(…)},2!*&:/A@HELFO™` + ), + level: 1, + } ); + typographyBlockExamples.push( headingBlock ); + } + + if ( getBlockType( 'core/paragraph' ) ) { + const firstParagraphBlock = createBlock( 'core/paragraph', { + content: __( + `A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.` + ), + } ); + const secondParagraphBlock = createBlock( 'core/paragraph', { + content: __( + `Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.` + ), + } ); - const textExample = { - name: 'typography', - title: __( 'Typography' ), - category: 'overview', - blocks: [ - headingBlock, - createBlock( + if ( getBlockType( 'core/group' ) ) { + const groupBlock = createBlock( 'core/group', { layout: { @@ -129,10 +142,21 @@ function getOverviewBlockExamples( }, }, [ firstParagraphBlock, secondParagraphBlock ] - ), - ], - }; - examples.push( textExample ); + ); + typographyBlockExamples.push( groupBlock ); + } else { + typographyBlockExamples.push( firstParagraphBlock ); + } + } + + if ( !! typographyBlockExamples.length ) { + examples.push( { + name: 'typography', + title: __( 'Typography' ), + category: 'overview', + blocks: typographyBlockExamples, + } ); + } const otherBlockExamples = [ 'core/image', diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 6a044d80553007..f0992381943aaf 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -67,11 +67,14 @@ function isObjectEmpty( object ) { * @param {HTMLIFrameElement} iframe The target iframe. */ const scrollToSection = ( anchorId, iframe ) => { - if ( ! iframe || ! iframe?.contentDocument ) { + if ( ! anchorId || ! iframe || ! iframe?.contentDocument ) { return; } - const element = iframe.contentDocument.getElementById( anchorId ); + const element = + anchorId === 'top' + ? iframe.contentDocument.body + : iframe.contentDocument.getElementById( anchorId ); if ( element ) { element.scrollIntoView( { behavior: 'smooth', @@ -89,6 +92,12 @@ const scrollToSection = ( anchorId, iframe ) => { */ const getStyleBookNavigationFromPath = ( path ) => { if ( path && typeof path === 'string' ) { + if ( path === '/' ) { + return { + top: true, + }; + } + if ( path.startsWith( '/typography' ) ) { return { block: 'typography', @@ -365,10 +374,19 @@ const StyleBookBody = ( { const handleLoad = () => setHasIframeLoaded( true ); useLayoutEffect( () => { - if ( goTo?.block && hasIframeLoaded && iframeRef?.current ) { - scrollToSection( `example-${ goTo?.block }`, iframeRef?.current ); + if ( hasIframeLoaded && iframeRef?.current ) { + if ( goTo?.top ) { + scrollToSection( 'top', iframeRef?.current ); + return; + } + if ( goTo?.block ) { + scrollToSection( + `example-${ goTo?.block }`, + iframeRef?.current + ); + } } - }, [ iframeRef?.current, goTo?.block, scrollToSection, hasIframeLoaded ] ); + }, [ iframeRef?.current, goTo, scrollToSection, hasIframeLoaded ] ); return (