From 16e177b0ea451dadf5b867487b1875398c8e6bb9 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 6 Dec 2022 18:02:35 +0100 Subject: [PATCH 01/15] Bump babel (#35336) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 4 +- package.json | 8 +- packages/api-docs-builder/package.json | 2 +- packages/mui-base/package.json | 2 +- packages/mui-codemod/package.json | 6 +- packages/mui-docs/package.json | 2 +- packages/mui-icons-material/package.json | 2 +- packages/mui-joy/package.json | 2 +- packages/mui-lab/package.json | 2 +- packages/mui-material-next/package.json | 2 +- packages/mui-material/package.json | 2 +- packages/mui-private-theming/package.json | 2 +- packages/mui-styled-engine-sc/package.json | 2 +- packages/mui-styled-engine/package.json | 2 +- packages/mui-styles/package.json | 2 +- packages/mui-system/package.json | 2 +- packages/mui-utils/package.json | 2 +- packages/typescript-to-proptypes/package.json | 4 +- yarn.lock | 118 +++++++++--------- 19 files changed, 84 insertions(+), 84 deletions(-) diff --git a/docs/package.json b/docs/package.json index 00ac89266ceb7f..cc55d8ec4cb209 100644 --- a/docs/package.json +++ b/docs/package.json @@ -20,9 +20,9 @@ "link-check": "node ./scripts/reportBrokenLinks.js" }, "dependencies": { - "@babel/core": "^7.20.2", + "@babel/core": "^7.20.5", "@babel/plugin-transform-object-assign": "^7.18.6", - "@babel/runtime-corejs2": "^7.20.1", + "@babel/runtime-corejs2": "^7.20.6", "@docsearch/react": "^3.3.0", "@emotion/cache": "^11.10.5", "@emotion/react": "^11.10.5", diff --git a/package.json b/package.json index 0a2555dd8c3277..834288daaf2d1a 100644 --- a/package.json +++ b/package.json @@ -74,8 +74,8 @@ "devDependencies": { "@argos-ci/core": "^0.5.1", "@babel/cli": "^7.19.3", - "@babel/core": "^7.20.2", - "@babel/node": "^7.20.2", + "@babel/core": "^7.20.5", + "@babel/node": "^7.20.5", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-proposal-object-rest-spread": "^7.20.2", "@babel/plugin-transform-object-assign": "^7.18.6", @@ -205,7 +205,7 @@ "yarn-deduplicate": "^3.1.0" }, "resolutions": { - "**/@babel/core": "^7.20.2", + "**/@babel/core": "^7.20.5", "**/@babel/code-frame": "^7.18.6", "**/@babel/plugin-proposal-class-properties": "^7.18.6", "**/@babel/plugin-proposal-object-rest-spread": "^7.20.2", @@ -217,7 +217,7 @@ "**/@babel/preset-env": "^7.20.2", "**/@babel/preset-react": "^7.18.6", "**/@babel/preset-typescript": "^7.18.6", - "**/@babel/runtime": "^7.20.1", + "**/@babel/runtime": "^7.20.6", "**/@definitelytyped/typescript-versions": "^0.0.137", "**/@types/react": "^18.0.25", "**/@types/react-is": "^17.0.3", diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json index 5d8e65ed2a4f92..2d364c96eb60f3 100644 --- a/packages/api-docs-builder/package.json +++ b/packages/api-docs-builder/package.json @@ -7,7 +7,7 @@ "typescript": "tsc -p tsconfig.json" }, "dependencies": { - "@babel/core": "^7.20.2", + "@babel/core": "^7.20.5", "@mui-internal/docs-utilities": "*", "@mui/markdown": "*", "ast-types": "^0.14.2", diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index 4288f28a372c40..0c511aeef5fd7b 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -51,7 +51,7 @@ } }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@emotion/is-prop-valid": "^1.2.0", "@mui/types": "^7.2.2", "@mui/utils": "^5.10.16", diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json index a1117cdc290e54..f8c761b9e4ed88 100644 --- a/packages/mui-codemod/package.json +++ b/packages/mui-codemod/package.json @@ -30,9 +30,9 @@ "url": "https://opencollective.com/mui" }, "dependencies": { - "@babel/core": "^7.20.2", - "@babel/runtime": "^7.20.1", - "@babel/traverse": "^7.20.1", + "@babel/core": "^7.20.5", + "@babel/runtime": "^7.20.6", + "@babel/traverse": "^7.20.5", "jscodeshift": "^0.13.1", "jscodeshift-add-imports": "^1.0.10", "yargs": "^17.6.2" diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json index 5b6207e5cfec54..3dca6c2acca1b4 100644 --- a/packages/mui-docs/package.json +++ b/packages/mui-docs/package.json @@ -44,7 +44,7 @@ } }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@mui/utils": "^5.10.16", "nprogress": "^0.2.0" }, diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json index 6ea87c7dfcec26..fa576c8cd230f3 100644 --- a/packages/mui-icons-material/package.json +++ b/packages/mui-icons-material/package.json @@ -56,7 +56,7 @@ } }, "dependencies": { - "@babel/runtime": "^7.20.1" + "@babel/runtime": "^7.20.6" }, "devDependencies": { "fs-extra": "^10.1.0", diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json index a92e8aebbe92ed..ce1fe854dd4eec 100644 --- a/packages/mui-joy/package.json +++ b/packages/mui-joy/package.json @@ -56,7 +56,7 @@ } }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@mui/base": "5.0.0-alpha.109", "@mui/core-downloads-tracker": "^5.10.17", "@mui/system": "^5.10.17", diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json index 0f40c9cf7ae4f7..7f0230e76db23d 100644 --- a/packages/mui-lab/package.json +++ b/packages/mui-lab/package.json @@ -60,7 +60,7 @@ } }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@mui/base": "5.0.0-alpha.109", "@mui/system": "^5.10.17", "@mui/types": "^7.2.2", diff --git a/packages/mui-material-next/package.json b/packages/mui-material-next/package.json index 04ebf34e9864b0..e1767b57a03102 100644 --- a/packages/mui-material-next/package.json +++ b/packages/mui-material-next/package.json @@ -58,7 +58,7 @@ } }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@mui/base": "5.0.0-alpha.109", "@mui/material": "^5.10.17", "@mui/system": "^5.10.17", diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index ebda3e43b6e50a..611577d09aa0ca 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -60,7 +60,7 @@ } }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@mui/base": "5.0.0-alpha.109", "@mui/core-downloads-tracker": "^5.10.17", "@mui/system": "^5.10.17", diff --git a/packages/mui-private-theming/package.json b/packages/mui-private-theming/package.json index bb9e097a2aa03a..e4f287961ae22b 100644 --- a/packages/mui-private-theming/package.json +++ b/packages/mui-private-theming/package.json @@ -47,7 +47,7 @@ } }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@mui/utils": "^5.10.16", "prop-types": "^15.8.1" }, diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json index 65f4bf29c1fb0e..a410484a8dec91 100644 --- a/packages/mui-styled-engine-sc/package.json +++ b/packages/mui-styled-engine-sc/package.json @@ -38,7 +38,7 @@ "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json" }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "prop-types": "^15.8.1" }, "peerDependencies": { diff --git a/packages/mui-styled-engine/package.json b/packages/mui-styled-engine/package.json index 653c97dbcdf86e..c6587c7a653d0d 100644 --- a/packages/mui-styled-engine/package.json +++ b/packages/mui-styled-engine/package.json @@ -38,7 +38,7 @@ "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json" }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@emotion/cache": "^11.10.5", "csstype": "^3.1.1", "prop-types": "^15.8.1" diff --git a/packages/mui-styles/package.json b/packages/mui-styles/package.json index 6882278360ee8e..00ca24c4db6ae9 100644 --- a/packages/mui-styles/package.json +++ b/packages/mui-styles/package.json @@ -47,7 +47,7 @@ } }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@emotion/hash": "^0.9.0", "@mui/private-theming": "^5.10.16", "@mui/types": "^7.2.2", diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json index 650dc506aad9eb..85b615f650006c 100644 --- a/packages/mui-system/package.json +++ b/packages/mui-system/package.json @@ -57,7 +57,7 @@ } }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@mui/private-theming": "^5.10.16", "@mui/styled-engine": "^5.10.16", "@mui/types": "^7.2.2", diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json index a7bc54dd9d6f96..5ba05cfd91618e 100644 --- a/packages/mui-utils/package.json +++ b/packages/mui-utils/package.json @@ -42,7 +42,7 @@ "react": "^17.0.0 || ^18.0.0" }, "dependencies": { - "@babel/runtime": "^7.20.1", + "@babel/runtime": "^7.20.6", "@types/prop-types": "^15.7.5", "@types/react-is": "^16.7.1 || ^17.0.0", "prop-types": "^15.8.1", diff --git a/packages/typescript-to-proptypes/package.json b/packages/typescript-to-proptypes/package.json index e38f5ca0926a4e..1c11c9b18a06d2 100644 --- a/packages/typescript-to-proptypes/package.json +++ b/packages/typescript-to-proptypes/package.json @@ -33,10 +33,10 @@ "rimraf": "^3.0.2" }, "dependencies": { - "@babel/core": "^7.20.2", + "@babel/core": "^7.20.5", "@babel/plugin-syntax-class-properties": "^7.12.13", "@babel/plugin-syntax-jsx": "^7.18.6", - "@babel/types": "^7.20.2", + "@babel/types": "^7.20.5", "doctrine": "^3.0.0", "lodash": "^4.17.21", "typescript": "^4.9.3", diff --git a/yarn.lock b/yarn.lock index 7e1f13677ebcf4..82ae3d3a959e24 100644 --- a/yarn.lock +++ b/yarn.lock @@ -179,33 +179,33 @@ resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.1.tgz#f2e6ef7790d8c8dbf03d379502dcc246dcce0b30" integrity sha512-EWZ4mE2diW3QALKvDMiXnbZpRvlj+nayZ112nK93SnhqOtpdsbVD4W+2tEoT3YNBAG9RBR0ISY758ZkOgsn6pQ== -"@babel/core@^7.12.3", "@babel/core@^7.13.16", "@babel/core@^7.17.9", "@babel/core@^7.20.2", "@babel/core@^7.7.5": - version "7.20.2" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.20.2.tgz#8dc9b1620a673f92d3624bd926dc49a52cf25b92" - integrity sha512-w7DbG8DtMrJcFOi4VrLm+8QM4az8Mo+PuLBKLp2zrYRCow8W/f9xiXm5sN53C8HksCyDQwCKha9JiDoIyPjT2g== +"@babel/core@^7.12.3", "@babel/core@^7.13.16", "@babel/core@^7.17.9", "@babel/core@^7.20.5", "@babel/core@^7.7.5": + version "7.20.5" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.20.5.tgz#45e2114dc6cd4ab167f81daf7820e8fa1250d113" + integrity sha512-UdOWmk4pNWTm/4DlPUl/Pt4Gz4rcEMb7CY0Y3eJl5Yz1vI8ZJGmHWaVE55LoxRjdpx0z259GE9U5STA9atUinQ== dependencies: "@ampproject/remapping" "^2.1.0" "@babel/code-frame" "^7.18.6" - "@babel/generator" "^7.20.2" + "@babel/generator" "^7.20.5" "@babel/helper-compilation-targets" "^7.20.0" "@babel/helper-module-transforms" "^7.20.2" - "@babel/helpers" "^7.20.1" - "@babel/parser" "^7.20.2" + "@babel/helpers" "^7.20.5" + "@babel/parser" "^7.20.5" "@babel/template" "^7.18.10" - "@babel/traverse" "^7.20.1" - "@babel/types" "^7.20.2" + "@babel/traverse" "^7.20.5" + "@babel/types" "^7.20.5" convert-source-map "^1.7.0" debug "^4.1.0" gensync "^1.0.0-beta.2" json5 "^2.2.1" semver "^6.3.0" -"@babel/generator@^7.12.11", "@babel/generator@^7.20.1", "@babel/generator@^7.20.2", "@babel/generator@^7.6.2": - version "7.20.4" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.4.tgz#4d9f8f0c30be75fd90a0562099a26e5839602ab8" - integrity sha512-luCf7yk/cm7yab6CAW1aiFnmEfBJplb/JojV56MYEK7ziWfGmFlTfmL9Ehwfy4gFhbjBfWO1wj7/TuSbVNEEtA== +"@babel/generator@^7.12.11", "@babel/generator@^7.20.5", "@babel/generator@^7.6.2": + version "7.20.5" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.5.tgz#cb25abee3178adf58d6814b68517c62bdbfdda95" + integrity sha512-jl7JY2Ykn9S0yj4DQP82sYvPU+T3g0HFcWTqDLqiuA9tGRNIj9VfbtXGAYTTkyNEnQk1jkMGOdYka8aG/lulCA== dependencies: - "@babel/types" "^7.20.2" + "@babel/types" "^7.20.5" "@jridgewell/gen-mapping" "^0.3.2" jsesc "^2.5.1" @@ -401,14 +401,14 @@ "@babel/traverse" "^7.19.0" "@babel/types" "^7.19.0" -"@babel/helpers@^7.20.1": - version "7.20.1" - resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.20.1.tgz#2ab7a0fcb0a03b5bf76629196ed63c2d7311f4c9" - integrity sha512-J77mUVaDTUJFZ5BpP6mMn6OIl3rEWymk2ZxDBQJUG3P+PbmyMcF3bYWvz0ma69Af1oobDqT/iAsvzhB58xhQUg== +"@babel/helpers@^7.20.5": + version "7.20.6" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.20.6.tgz#e64778046b70e04779dfbdf924e7ebb45992c763" + integrity sha512-Pf/OjgfgFRW5bApskEz5pvidpim7tEDPlFtKcNRXWmfHGn9IEI2W2flqRQXTFb7gIPTyK++N6rVHuwKut4XK6w== dependencies: "@babel/template" "^7.18.10" - "@babel/traverse" "^7.20.1" - "@babel/types" "^7.20.0" + "@babel/traverse" "^7.20.5" + "@babel/types" "^7.20.5" "@babel/highlight@^7.18.6": version "7.18.6" @@ -419,22 +419,22 @@ chalk "^2.0.0" js-tokens "^4.0.0" -"@babel/node@^7.20.2": - version "7.20.2" - resolved "https://registry.yarnpkg.com/@babel/node/-/node-7.20.2.tgz#9422926a5ccffa559b96fea1d0fbc9c5af8369bc" - integrity sha512-s4zKG8fccCpqXEXxSkzE8vAREefRneatdGfNQDPqikTTpQmWF4Bt1OTZ9r8GghKJSeNEgRJwbI5ZSmGBQLvAEQ== +"@babel/node@^7.20.5": + version "7.20.5" + resolved "https://registry.yarnpkg.com/@babel/node/-/node-7.20.5.tgz#5afdc32f4e195019b6c566f418ad630a9ee42695" + integrity sha512-ElSr40UtumWE4fYYF1xfLP2C6b9nfS/rswK7YYpLo9HDGEXGXEAWZaGCxIirxGIDyoV0rbl6jV1LyFMQ6ZOQSA== dependencies: "@babel/register" "^7.18.9" commander "^4.0.1" - core-js "^3.25.1" + core-js "^3.26.0" node-environment-flags "^1.0.5" - regenerator-runtime "^0.13.10" + regenerator-runtime "^0.13.11" v8flags "^3.1.1" -"@babel/parser@^7.1.0", "@babel/parser@^7.13.16", "@babel/parser@^7.14.7", "@babel/parser@^7.18.10", "@babel/parser@^7.20.1", "@babel/parser@^7.20.2", "@babel/parser@^7.8.3": - version "7.20.3" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.3.tgz#5358cf62e380cf69efcb87a7bb922ff88bfac6e2" - integrity sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg== +"@babel/parser@^7.1.0", "@babel/parser@^7.13.16", "@babel/parser@^7.14.7", "@babel/parser@^7.18.10", "@babel/parser@^7.20.5", "@babel/parser@^7.8.3": + version "7.20.5" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.5.tgz#7f3c7335fe417665d929f34ae5dceae4c04015e8" + integrity sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA== "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6": version "7.18.6" @@ -1166,13 +1166,13 @@ pirates "^4.0.5" source-map-support "^0.5.16" -"@babel/runtime-corejs2@^7.20.1": - version "7.20.1" - resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.20.1.tgz#2b81ce0ff37e0b1e79816ea79775ccf84d247fc7" - integrity sha512-9hxzcvnXxG38gZ3ycsZ91+PNbpWwPVXmTsKaaS6mvJyXs49XziitKsj2SHCpTVwcedRc3hmYrzjGSs+9aAQe7Q== +"@babel/runtime-corejs2@^7.20.6": + version "7.20.6" + resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.20.6.tgz#cf463639cdc4b58599f53dc337fb7ed4a9de5e63" + integrity sha512-6qz3LPkwPDBDEAOsf/fXdsX/c5u2GNy33QlY1caaR8qPVG2Q0tTkS0mKYMXRhT9wsDQAAEj4T7scykRB3nBjWA== dependencies: core-js "^2.6.12" - regenerator-runtime "^0.13.10" + regenerator-runtime "^0.13.11" "@babel/runtime-corejs3@^7.10.2": version "7.19.0" @@ -1182,12 +1182,12 @@ core-js-pure "^3.20.2" regenerator-runtime "^0.13.4" -"@babel/runtime@7.0.0", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.2.0", "@babel/runtime@^7.20.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": - version "7.20.1" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.1.tgz#1148bb33ab252b165a06698fde7576092a78b4a9" - integrity sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg== +"@babel/runtime@7.0.0", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.2.0", "@babel/runtime@^7.20.6", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": + version "7.20.6" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.6.tgz#facf4879bfed9b5326326273a64220f099b0fce3" + integrity sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA== dependencies: - regenerator-runtime "^0.13.10" + regenerator-runtime "^0.13.11" "@babel/template@^7.18.10", "@babel/template@^7.6.0": version "7.18.10" @@ -1198,26 +1198,26 @@ "@babel/parser" "^7.18.10" "@babel/types" "^7.18.10" -"@babel/traverse@^7.1.6", "@babel/traverse@^7.19.0", "@babel/traverse@^7.19.1", "@babel/traverse@^7.20.1", "@babel/traverse@^7.4.5", "@babel/traverse@^7.8.3": - version "7.20.1" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.1.tgz#9b15ccbf882f6d107eeeecf263fbcdd208777ec8" - integrity sha512-d3tN8fkVJwFLkHkBN479SOsw4DMZnz8cdbL/gvuDuzy3TS6Nfw80HuQqhw1pITbIruHyh7d1fMA47kWzmcUEGA== +"@babel/traverse@^7.1.6", "@babel/traverse@^7.19.0", "@babel/traverse@^7.19.1", "@babel/traverse@^7.20.1", "@babel/traverse@^7.20.5", "@babel/traverse@^7.4.5", "@babel/traverse@^7.8.3": + version "7.20.5" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.5.tgz#78eb244bea8270fdda1ef9af22a5d5e5b7e57133" + integrity sha512-WM5ZNN3JITQIq9tFZaw1ojLU3WgWdtkxnhM1AegMS+PvHjkM5IXjmYEGY7yukz5XS4sJyEf2VzWjI8uAavhxBQ== dependencies: "@babel/code-frame" "^7.18.6" - "@babel/generator" "^7.20.1" + "@babel/generator" "^7.20.5" "@babel/helper-environment-visitor" "^7.18.9" "@babel/helper-function-name" "^7.19.0" "@babel/helper-hoist-variables" "^7.18.6" "@babel/helper-split-export-declaration" "^7.18.6" - "@babel/parser" "^7.20.1" - "@babel/types" "^7.20.0" + "@babel/parser" "^7.20.5" + "@babel/types" "^7.20.5" debug "^4.1.0" globals "^11.1.0" -"@babel/types@^7.0.0", "@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.2.0", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.6.1": - version "7.20.2" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.2.tgz#67ac09266606190f496322dbaff360fdaa5e7842" - integrity sha512-FnnvsNWgZCr232sqtXggapvlkk/tuwR/qhGzcmxI0GXLCjmPYQPzio2FbdlWuY6y1sHFfQKk+rRbUZ9VStQMog== +"@babel/types@^7.0.0", "@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.2.0", "@babel/types@^7.20.2", "@babel/types@^7.20.5", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.6.1": + version "7.20.5" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.5.tgz#e206ae370b5393d94dfd1d04cd687cace53efa84" + integrity sha512-c9fst/h2/dcF7H+MJKZ2T0KjEQ8hY/BNnDk/H3XY8C4Aw/eWQXWn/lWntHF9ooUBnGmEvbfGrTgLWc+um0YDUg== dependencies: "@babel/helper-string-parser" "^7.19.4" "@babel/helper-validator-identifier" "^7.19.1" @@ -6188,10 +6188,10 @@ core-js@^2.6.11, core-js@^2.6.12: resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec" integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ== -core-js@^3.25.1, core-js@^3.8.2: - version "3.25.3" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.25.3.tgz#cbc2be50b5ddfa7981837bd8c41639f27b166593" - integrity sha512-y1hvKXmPHvm5B7w4ln1S4uc9eV/O5+iFExSRUimnvIph11uaizFR8LFMdONN8hG3P2pipUfX4Y/fR8rAEtcHcQ== +core-js@^3.26.0, core-js@^3.8.2: + version "3.26.1" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.26.1.tgz#7a9816dabd9ee846c1c0fe0e8fcad68f3709134e" + integrity sha512-21491RRQVzUn0GGM9Z1Jrpr6PNPxPi+Za8OM9q4tksTSnlbXXGKK1nXNg/QvwFYettXvSX6zWKCtHHfjN4puyA== core-util-is@1.0.2: version "1.0.2" @@ -13684,10 +13684,10 @@ regenerate@^1.4.2: resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a" integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A== -regenerator-runtime@^0.13.10, regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.9: - version "0.13.10" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz#ed07b19616bcbec5da6274ebc75ae95634bfc2ee" - integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw== +regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.9: + version "0.13.11" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9" + integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg== regenerator-transform@^0.15.0: version "0.15.0" From a03c4ac6b9a6b27e0be11771e83d534e79dd7b0d Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 6 Dec 2022 18:17:05 +0100 Subject: [PATCH 02/15] Bump react-router-dom to ^6.4.4 (#35337) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 2 +- package.json | 2 +- yarn.lock | 30 +++++++++++++++--------------- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/docs/package.json b/docs/package.json index cc55d8ec4cb209..1f0b3f738532be 100644 --- a/docs/package.json +++ b/docs/package.json @@ -102,7 +102,7 @@ "react-intersection-observer": "^9.4.1", "react-is": "^18.2.0", "react-number-format": "^4.9.4", - "react-router-dom": "^6.4.3", + "react-router-dom": "^6.4.4", "react-runner": "^1.0.3", "react-simple-code-editor": "^0.13.1", "react-spring": "^8.0.27", diff --git a/package.json b/package.json index 834288daaf2d1a..4eddf8b35a329c 100644 --- a/package.json +++ b/package.json @@ -173,7 +173,7 @@ "raw-loader": "4.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.4.3", + "react-router-dom": "^6.4.4", "react-test-renderer": "^18.2.0", "remark": "^13.0.0", "rimraf": "^3.0.2", diff --git a/yarn.lock b/yarn.lock index 82ae3d3a959e24..60fa3e0bdbb117 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3096,10 +3096,10 @@ optionalDependencies: npmlog "2 || ^3.1.0 || ^4.0.0" -"@remix-run/router@1.0.3": - version "1.0.3" - resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.3.tgz#953b88c20ea00d0eddaffdc1b115c08474aa295d" - integrity sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q== +"@remix-run/router@1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.4.tgz#cbfbec6735711e7c2fc93b9b40adf70ef5a39990" + integrity sha512-gTL8H5USTAKOyVA4xczzDJnC3HMssdFa3tRlwBicXynx9XfiXwneHnYQogwSKpdCkjXISrEKSTtX62rLpNEVQg== "@rollup/plugin-replace@^5.0.1": version "5.0.1" @@ -13291,20 +13291,20 @@ react-resize-detector@^7.1.2: dependencies: lodash "^4.17.21" -react-router-dom@^6.4.3: - version "6.4.3" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.4.3.tgz#70093b5f65f85f1df9e5d4182eb7ff3a08299275" - integrity sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ== +react-router-dom@^6.4.4: + version "6.4.4" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.4.4.tgz#4271ec66333c440d1754477e4e6a3a5acb5487f8" + integrity sha512-0Axverhw5d+4SBhLqLpzPhNkmv7gahUwlUVIOrRLGJ4/uwt30JVajVJXqv2Qr/LCwyvHhQc7YyK1Do8a9Jj7qA== dependencies: - "@remix-run/router" "1.0.3" - react-router "6.4.3" + "@remix-run/router" "1.0.4" + react-router "6.4.4" -react-router@6.4.3: - version "6.4.3" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.4.3.tgz#9ed3ee4d6e95889e9b075a5d63e29acc7def0d49" - integrity sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA== +react-router@6.4.4: + version "6.4.4" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.4.4.tgz#8e7794f55ccc7050cb03937c87ff3720ce9f8b60" + integrity sha512-SA6tSrUCRfuLWeYsTJDuriRqfFIsrSvuH7SqAJHegx9ZgxadE119rU8oOX/rG5FYEthpdEaEljdjDlnBxvfr+Q== dependencies: - "@remix-run/router" "1.0.3" + "@remix-run/router" "1.0.4" react-runner@^1.0.3: version "1.0.3" From c8849430204076221ad4a03ca8d3907d194e3174 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 6 Dec 2022 18:17:50 +0100 Subject: [PATCH 03/15] Bump GitHub Actions (#35335) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- .github/workflows/codeql.yml | 4 ++-- .github/workflows/scorecards.yml | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 7b3475abea31d2..cbbee4e2cda6ed 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -19,7 +19,7 @@ jobs: uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0 # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL - uses: github/codeql-action/init@312e093a1892bd801f026f1090904ee8e460b9b6 # v2.1.34 + uses: github/codeql-action/init@b2a92eb56d8cb930006a1c6ed86b0782dd8a4297 # v2.1.35 with: languages: typescript config-file: ./.github/codeql/codeql-config.yml @@ -30,4 +30,4 @@ jobs: # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs # queries: security-extended,security-and-quality - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@312e093a1892bd801f026f1090904ee8e460b9b6 # v2.1.34 + uses: github/codeql-action/analyze@b2a92eb56d8cb930006a1c6ed86b0782dd8a4297 # v2.1.35 diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml index 77b99a38ff1933..d45f5ea1f8cb1a 100644 --- a/.github/workflows/scorecards.yml +++ b/.github/workflows/scorecards.yml @@ -43,6 +43,6 @@ jobs: # Upload the results to GitHub's code scanning dashboard. - name: Upload to code-scanning - uses: github/codeql-action/upload-sarif@ea25ff07d1d19b19a3bb9fc8a1392902a203f988 # v1.1.34 + uses: github/codeql-action/upload-sarif@54d8b0da6bba52eaed1c8042082f6560bc02ecb6 # v1.1.35 with: sarif_file: results.sarif From 59a66e04750c368a2c68fd7a3fd41f5cdf5f0cad Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 6 Dec 2022 18:18:05 +0100 Subject: [PATCH 04/15] Bump aws-sdk to ^2.1268.0 (#35339) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- packages/feedback/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/feedback/package.json b/packages/feedback/package.json index e6d5b531cece95..56884ea3d695d2 100644 --- a/packages/feedback/package.json +++ b/packages/feedback/package.json @@ -25,6 +25,6 @@ "claudia": "^5.14.1" }, "optionalDependencies": { - "aws-sdk": "^2.1262.0" + "aws-sdk": "^2.1268.0" } } diff --git a/yarn.lock b/yarn.lock index 60fa3e0bdbb117..69e75398293c8e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4811,10 +4811,10 @@ available-typed-arrays@^1.0.5: resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7" integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw== -aws-sdk@^2.1009.0, aws-sdk@^2.1262.0: - version "2.1262.0" - resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.1262.0.tgz#434980d0bee9e67c4764a532577f3a2a54b1c38a" - integrity sha512-XbaK/XUIxwLEBnHANhJ0RTZtiU288lFRj5FllSihQ5Kb0fibKyW8kJFPsY+NzzDezLH5D3WdGbTKb9fycn5TbA== +aws-sdk@^2.1009.0, aws-sdk@^2.1268.0: + version "2.1268.0" + resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.1268.0.tgz#a7bb57493f554322057f949fe41c64ee4b9e98a5" + integrity sha512-N2A42YrSMTDFCY5lU3QOJz+CZbGKIrAQS3We9+HjEeDP+FPE+M2H9Zzy8Mk18uC6v8bP3lbTTCpTTvtje6i+Pw== dependencies: buffer "4.9.2" events "1.1.1" From 00a1bf5a62502705e2cd6039c993b1879f9917c5 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 6 Dec 2022 18:18:22 +0100 Subject: [PATCH 05/15] Bump @types/node to ^16.18.6 (#35334) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- packages/typescript-to-proptypes/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/typescript-to-proptypes/package.json b/packages/typescript-to-proptypes/package.json index 1c11c9b18a06d2..1bc2ab7b93b0b4 100644 --- a/packages/typescript-to-proptypes/package.json +++ b/packages/typescript-to-proptypes/package.json @@ -24,7 +24,7 @@ "@types/babel__core": "^7.1.19", "@types/doctrine": "^0.0.5", "@types/lodash": "^4.14.190", - "@types/node": "^16.18.3", + "@types/node": "^16.18.6", "@types/prettier": "^2.7.1", "@types/react": "^18.0.25", "@types/uuid": "^8.3.4", diff --git a/yarn.lock b/yarn.lock index 69e75398293c8e..c19166a35945b8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3724,10 +3724,10 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.29.tgz#a0c58d67a42f8953c13d32f0acda47ed26dfce40" integrity sha512-LhF+9fbIX4iPzhsRLpK5H7iPdvW8L4IwGciXQIOEcuF62+9nw/VQVsOViAOOGxY3OlOKGLFv0sWwJXdwQeTn6A== -"@types/node@^16.18.3": - version "16.18.3" - resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.3.tgz#d7f7ba828ad9e540270f01ce00d391c54e6e0abc" - integrity sha512-jh6m0QUhIRcZpNv7Z/rpN+ZWXOicUUQbSoWks7Htkbb9IjFQj4kzcX/xFCkjstCj5flMsN8FiSvt+q+Tcs4Llg== +"@types/node@^16.18.6": + version "16.18.6" + resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.6.tgz#87846192fd51b693368fad3e99123169225621d4" + integrity sha512-vmYJF0REqDyyU0gviezF/KHq/fYaUbFhkcNbQCuPGFQj6VTbXuHZoxs/Y7mutWe73C8AC6l9fFu8mSYiBAqkGA== "@types/normalize-package-data@^2.4.0": version "2.4.1" From f3b9d5c9da5877db36a993351cc4b40af46dc8bc Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 6 Dec 2022 18:18:54 +0100 Subject: [PATCH 06/15] Bump @types/mocha to ^10.0.1 (#35333) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- packages/api-docs-builder/package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 4eddf8b35a329c..c159b927f04073 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,7 @@ "@types/fs-extra": "^9.0.13", "@types/jsdom": "^20.0.1", "@types/lodash": "^4.14.190", - "@types/mocha": "^10.0.0", + "@types/mocha": "^10.0.1", "@types/node": "^18.11.9", "@types/prettier": "^2.7.1", "@types/react": "^18.0.25", diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json index 2d364c96eb60f3..354867fd9b9265 100644 --- a/packages/api-docs-builder/package.json +++ b/packages/api-docs-builder/package.json @@ -19,7 +19,7 @@ "yargs": "^17.6.2" }, "devDependencies": { - "@types/mocha": "^10.0.0", + "@types/mocha": "^10.0.1", "@types/node": "^18.11.9", "chai": "^4.3.7", "sinon": "^14.0.2", diff --git a/yarn.lock b/yarn.lock index c19166a35945b8..7af3403349f80c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3709,10 +3709,10 @@ resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c" integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ== -"@types/mocha@^10.0.0": - version "10.0.0" - resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.0.tgz#3d9018c575f0e3f7386c1de80ee66cc21fbb7a52" - integrity sha512-rADY+HtTOA52l9VZWtgQfn4p+UDVM2eDVkMZT1I6syp0YKxW2F9v+0pbRZLsvskhQv/vMb6ZfCay81GHbz5SHg== +"@types/mocha@^10.0.1": + version "10.0.1" + resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.1.tgz#2f4f65bb08bc368ac39c96da7b2f09140b26851b" + integrity sha512-/fvYntiO1GeICvqbQ3doGDIP97vWmvFt83GKguJ6prmQM2iXZfFcq6YE8KteFyRtX2/h5Hf91BYvPodJKFYv5Q== "@types/node@*", "@types/node@>=10.0.0", "@types/node@^18.11.9": version "18.11.9" From 411cf851085e46f15937863a751300f56f654248 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 6 Dec 2022 18:19:46 +0100 Subject: [PATCH 07/15] Bump @chakra-ui/system to ^2.3.4 (#35331) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- benchmark/package.json | 2 +- yarn.lock | 62 +++++++++++++++++++++--------------------- 2 files changed, 32 insertions(+), 32 deletions(-) diff --git a/benchmark/package.json b/benchmark/package.json index fc590f9f7cf026..8af3cdc719e72b 100644 --- a/benchmark/package.json +++ b/benchmark/package.json @@ -11,7 +11,7 @@ "server:system": "cd ../ && cross-env NODE_ENV=production BABEL_ENV=benchmark babel-node benchmark/server/scenarios/system.js --inspect=0.0.0.0:9229 --extensions \".tsx,.ts,.js\"" }, "dependencies": { - "@chakra-ui/system": "^2.3.3", + "@chakra-ui/system": "^2.3.4", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@mdx-js/react": "^2.1.5", diff --git a/yarn.lock b/yarn.lock index 7af3403349f80c..bc0c828c4c36ca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1252,50 +1252,50 @@ dependencies: "@chakra-ui/utils" "2.0.12" -"@chakra-ui/styled-system@2.3.5": - version "2.3.5" - resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-2.3.5.tgz#88f1530d77c30285c6aa7c561d4bd770bebd705c" - integrity sha512-Xj78vEq/R+1OVx36tJnAb/vLtX6DD9k/yxj3lCigl3q5Qjr6aglPBjqHdfFbGaQeB0Gt4ABPyxUDO3sAhdxC4w== +"@chakra-ui/styled-system@2.4.0": + version "2.4.0" + resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-2.4.0.tgz#4b50079606331e4e8fda7ea59da9db51b446d40c" + integrity sha512-G4HpbFERq4C1cBwKNDNkpCiliOICLXjYwKI/e/6hxNY+GlPxt8BCzz3uhd3vmEoG2vRM4qjidlVjphhWsf6vRQ== dependencies: csstype "^3.0.11" lodash.mergewith "4.6.2" -"@chakra-ui/system@^2.3.3": - version "2.3.3" - resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-2.3.3.tgz#1557f573a3394e375411631b0836f0e79c9f68f9" - integrity sha512-nOEXC08d4PiK/4QwSV4tnci2SoWjDHEVSveWW9qoRRr1iZUbQffpwYyJY4pBpPJE7CsA2w3GXK7NdMFRwPtamQ== +"@chakra-ui/system@^2.3.4": + version "2.3.4" + resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-2.3.4.tgz#425bf7eebf61bd92aa68f60a6b62c380274fbe4e" + integrity sha512-/2m8hFfFzOMO2OlwHxTWqINOBJMjxWwU5V/AcB7C0qS51Dcj9c7kupilM6QdqiOLLdMS7mIVRSYr8jn8gMw9fA== dependencies: "@chakra-ui/color-mode" "2.1.10" "@chakra-ui/react-utils" "2.0.9" - "@chakra-ui/styled-system" "2.3.5" - "@chakra-ui/theme-utils" "2.0.4" + "@chakra-ui/styled-system" "2.4.0" + "@chakra-ui/theme-utils" "2.0.5" "@chakra-ui/utils" "2.0.12" react-fast-compare "3.2.0" -"@chakra-ui/theme-tools@2.0.13": - version "2.0.13" - resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-2.0.13.tgz#cde5503b4044832ab659904281e8a260deae73bb" - integrity sha512-Dvai4lljtrs9f2aha3b9yajmxroNaVGNvkKkwh77dRW2jcNNBXepkGWfNLXVkP68Yydz5O+Lt5DKvETrEho9cQ== +"@chakra-ui/theme-tools@2.0.14": + version "2.0.14" + resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-2.0.14.tgz#6c523284ab384ca57a3aef1fcfa7c32ed357fbde" + integrity sha512-lVcDmq5pyU0QbsIFKjt/iVUFDap7di2QHvPvGChA1YSjtg1PtuUi+BxEXWzp3Nfgw/N4rMvlBs+S0ynJypdwbg== dependencies: "@chakra-ui/anatomy" "2.1.0" - "@ctrl/tinycolor" "^3.4.0" + color2k "^2.0.0" -"@chakra-ui/theme-utils@2.0.4": - version "2.0.4" - resolved "https://registry.yarnpkg.com/@chakra-ui/theme-utils/-/theme-utils-2.0.4.tgz#7357dd03734bc74d3a8be09db19d6b73c8f34075" - integrity sha512-vrYuZxzc31c1bevfJRCk4j68dUw4Bxt6QAm3RZcUQyvTnS6q5FhMz+R1X6vS3+IfIhSscZFxwRQSp/TpyY4Vtw== +"@chakra-ui/theme-utils@2.0.5": + version "2.0.5" + resolved "https://registry.yarnpkg.com/@chakra-ui/theme-utils/-/theme-utils-2.0.5.tgz#ad1e53fc7f71326d15b9b01a157c7e2a029f3dda" + integrity sha512-QQowSM8fvQlTmT0w9wtqUlWOB4i+9eA7P4XRm4bfhBMZ7XpK4ctV95sPeGqaXVccsz5m0q1AuGWa+j6eMCbrrg== dependencies: - "@chakra-ui/styled-system" "2.3.5" - "@chakra-ui/theme" "2.2.1" + "@chakra-ui/styled-system" "2.4.0" + "@chakra-ui/theme" "2.2.2" lodash.mergewith "4.6.2" -"@chakra-ui/theme@2.2.1": - version "2.2.1" - resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-2.2.1.tgz#83f5e484640bf8d97075f9fa3ca41f02c5caf3f7" - integrity sha512-6qEJMfnTjB5vGoY1kO/fDarK0Ivrb77UzDw8rY0aTHbjLJkOVxtd7d2H7m8xufh6gecCI5HuXqq8I297pLYm+w== +"@chakra-ui/theme@2.2.2": + version "2.2.2" + resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-2.2.2.tgz#5ea69adde78ee6ea59f9dce674947ed8be2ebc62" + integrity sha512-7DlOQiXmnaqYyqXwqmfFSCWGkUonuqmNC5mmUCwxI435KgHNCaE2bIm6DI7N2NcIcuVcfc8Vn0UqrDoGU3zJBg== dependencies: "@chakra-ui/anatomy" "2.1.0" - "@chakra-ui/theme-tools" "2.0.13" + "@chakra-ui/theme-tools" "2.0.14" "@chakra-ui/utils@2.0.12": version "2.0.12" @@ -1319,11 +1319,6 @@ dependencies: "@jridgewell/trace-mapping" "0.3.9" -"@ctrl/tinycolor@^3.4.0": - version "3.4.1" - resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz#75b4c27948c81e88ccd3a8902047bcd797f38d32" - integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw== - "@date-io/core@^2.15.0": version "2.15.0" resolved "https://registry.yarnpkg.com/@date-io/core/-/core-2.15.0.tgz#8133860c8ce163b8d0cca3c1caed8d5d1fbfb14e" @@ -5845,6 +5840,11 @@ color-support@^1.1.3: resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2" integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg== +color2k@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/color2k/-/color2k-2.0.0.tgz#86992c82e248c29f524023ed0822bc152c4fa670" + integrity sha512-DWX9eXOC4fbJNiuvdH4QSHvvfLWyFo9TuFp7V9OzdsbPAdrWAuYc8qvFP2bIQ/LKh4LrAVnJ6vhiQYPvAHdtTg== + color@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a" From 470d98b0b1088db3043698008508cdd3dd40446b Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 6 Dec 2022 18:20:16 +0100 Subject: [PATCH 08/15] Bump decode-uri-component from 0.2.0 to 0.2.2 (#35321) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index bc0c828c4c36ca..361ffa76d17076 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6676,9 +6676,9 @@ decimal.js@^10.4.2: integrity sha512-ic1yEvwT6GuvaYwBLLY6/aFFgjZdySKTE8en/fkU3QICTmRtgtSlFn0u0BXN06InZwtfCelR7j8LRiDI/02iGA== decode-uri-component@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545" - integrity sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og== + version "0.2.2" + resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9" + integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ== decompress-response@^6.0.0: version "6.0.0" From 5e6c97058ed747e1875f1864b752e3e9b44ffd56 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 6 Dec 2022 18:20:51 +0100 Subject: [PATCH 09/15] Bump chai to ^4.3.7 (#35117) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 4 ++-- yarn.lock | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index c159b927f04073..89badd3fbcf446 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,7 @@ "@rollup/plugin-replace": "^5.0.1", "@testing-library/dom": "^8.19.0", "@testing-library/react": "^13.4.0", - "@types/chai": "^4.3.3", + "@types/chai": "^4.3.4", "@types/chai-dom": "^1.11.0", "@types/enzyme": "^3.10.12", "@types/format-util": "^1.0.2", @@ -119,7 +119,7 @@ "babel-plugin-react-remove-properties": "^0.3.0", "babel-plugin-tester": "^10.1.0", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", - "chai": "^4.3.6", + "chai": "^4.3.7", "chai-dom": "^1.11.0", "chalk": "^5.1.2", "compression-webpack-plugin": "^10.0.0", diff --git a/yarn.lock b/yarn.lock index 361ffa76d17076..5d4a6a439e4e3c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3482,10 +3482,10 @@ dependencies: "@types/chai" "*" -"@types/chai@*", "@types/chai@^4.3.3": - version "4.3.3" - resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.3.tgz#3c90752792660c4b562ad73b3fbd68bf3bc7ae07" - integrity sha512-hC7OMnszpxhZPduX+m+nrx+uFoLkWOMiR4oa/AZF3MuSETYTZmFfJAHqZEM8MVlvfG7BEUcgvtwoCTxBp6hm3g== +"@types/chai@*", "@types/chai@^4.3.4": + version "4.3.4" + resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.4.tgz#e913e8175db8307d78b4e8fa690408ba6b65dee4" + integrity sha512-KnRanxnpfpjUTqTCXslZSEdLfXExwgNxYPdiO2WGUj8+HDjFi8R3k5RVKPeSCzLjCcshCAtVO2QBbVuAV4kTnw== "@types/cheerio@*": version "0.22.31" @@ -5444,7 +5444,7 @@ chai-dom@^1.11.0: resolved "https://registry.yarnpkg.com/chai-dom/-/chai-dom-1.11.0.tgz#aa3af405b3d9b0470d185b17081ed23ca5fdaeb4" integrity sha512-ZzGlEfk1UhHH5+N0t9bDqstOxPEXmn3EyXvtsok5rfXVDOFDJbHVy12rED6ZwkJAUDs2w7/Da4Hlq2LB63kltg== -chai@^4.3.6, chai@^4.3.7: +chai@^4.3.7: version "4.3.7" resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.7.tgz#ec63f6df01829088e8bf55fca839bcd464a8ec51" integrity sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A== From 6876d429c2897cff966a3b94436fc01367dd47b9 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 6 Dec 2022 18:21:13 +0100 Subject: [PATCH 10/15] Bump @types/babel__core to ^7.1.20 (#35115) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- packages/typescript-to-proptypes/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/typescript-to-proptypes/package.json b/packages/typescript-to-proptypes/package.json index 1bc2ab7b93b0b4..a195b192e30647 100644 --- a/packages/typescript-to-proptypes/package.json +++ b/packages/typescript-to-proptypes/package.json @@ -21,7 +21,7 @@ "typescript": "tsc -p tsconfig.json" }, "devDependencies": { - "@types/babel__core": "^7.1.19", + "@types/babel__core": "^7.1.20", "@types/doctrine": "^0.0.5", "@types/lodash": "^4.14.190", "@types/node": "^16.18.6", diff --git a/yarn.lock b/yarn.lock index 5d4a6a439e4e3c..c54668c9e8d586 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3432,10 +3432,10 @@ "@types/babel__core" "*" "@types/prettier" "*" -"@types/babel__core@*", "@types/babel__core@^7.1.19": - version "7.1.19" - resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.19.tgz#7b497495b7d1b4812bdb9d02804d0576f43ee460" - integrity sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw== +"@types/babel__core@*", "@types/babel__core@^7.1.20": + version "7.1.20" + resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.20.tgz#e168cdd612c92a2d335029ed62ac94c95b362359" + integrity sha512-PVb6Bg2QuscZ30FvOU7z4guG6c926D9YRvOxEaelzndpMsvP+YM74Q/dAFASpg2l6+XLalxSGxcq/lrgYWZtyQ== dependencies: "@babel/parser" "^7.1.0" "@babel/types" "^7.0.0" From 5b1c85a226a772d3c4f7696d18e5a31201147777 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 7 Dec 2022 07:20:09 +0100 Subject: [PATCH 11/15] Bump @types/lodash to ^4.14.191 (#35332) --- package.json | 2 +- packages/typescript-to-proptypes/package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 89badd3fbcf446..42abc32c194b77 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@types/format-util": "^1.0.2", "@types/fs-extra": "^9.0.13", "@types/jsdom": "^20.0.1", - "@types/lodash": "^4.14.190", + "@types/lodash": "^4.14.191", "@types/mocha": "^10.0.1", "@types/node": "^18.11.9", "@types/prettier": "^2.7.1", diff --git a/packages/typescript-to-proptypes/package.json b/packages/typescript-to-proptypes/package.json index a195b192e30647..20f12bac26526a 100644 --- a/packages/typescript-to-proptypes/package.json +++ b/packages/typescript-to-proptypes/package.json @@ -23,7 +23,7 @@ "devDependencies": { "@types/babel__core": "^7.1.20", "@types/doctrine": "^0.0.5", - "@types/lodash": "^4.14.190", + "@types/lodash": "^4.14.191", "@types/node": "^16.18.6", "@types/prettier": "^2.7.1", "@types/react": "^18.0.25", diff --git a/yarn.lock b/yarn.lock index c54668c9e8d586..2fcec528f6a728 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3665,10 +3665,10 @@ dependencies: "@types/lodash" "*" -"@types/lodash@*", "@types/lodash@^4.14.190": - version "4.14.190" - resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.190.tgz#d8e99647af141c63902d0ca53cf2b34d2df33545" - integrity sha512-5iJ3FBJBvQHQ8sFhEhJfjUP+G+LalhavTkYyrAYqz5MEJG+erSv0k9KJLb6q7++17Lafk1scaTIFXcMJlwK8Mw== +"@types/lodash@*", "@types/lodash@^4.14.191": + version "4.14.191" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.191.tgz#09511e7f7cba275acd8b419ddac8da9a6a79e2fa" + integrity sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ== "@types/markdown-to-jsx@^7.0.1": version "7.0.1" From d23e42b34e208b7385ff0ebd52a762e297b5c684 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 7 Dec 2022 08:18:33 +0100 Subject: [PATCH 12/15] [system] Enable configuring the `sx` prop in the `theme` (#35150) --- .../theme-components/GlobalThemeOverrideSx.js | 30 +- .../GlobalThemeOverrideSx.tsx | 30 +- .../theme-components/theme-components.md | 20 +- .../ChangeTheBehaviorSxProp.js | 31 ++ .../ChangeTheBehaviorSxProp.tsx | 38 +++ .../ChangeTheBehaviorSxProp.tsx.preview | 5 + .../configure-the-sx-prop/ExtendTheSxProp.js | 37 +++ .../configure-the-sx-prop/ExtendTheSxProp.tsx | 37 +++ .../ExtendTheSxProp.tsx.preview | 8 + .../configure-the-sx-prop.md | 26 ++ .../system/getting-started/usage/usage.md | 6 +- docs/data/system/pages.ts | 11 + docs/data/system/styled/UsingWithSx.js | 11 +- docs/data/system/styled/UsingWithSx.tsx | 11 +- docs/data/system/styled/styled.md | 6 +- .../callback-support-in-style-overrides.md | 29 +- docs/pages/experiments/md3/index.tsx | 3 + .../experimental-api/configure-the-sx-prop.js | 7 + docs/translations/translations.json | 2 + packages/mui-joy/src/Box/Box.test.js | 187 ++++++++++- packages/mui-joy/src/Box/Box.tsx | 2 - .../mui-joy/src/styles/CssVarsProvider.tsx | 12 +- packages/mui-joy/src/styles/ThemeProvider.tsx | 18 +- .../mui-joy/src/styles/defaultTheme.test.js | 2 + packages/mui-joy/src/styles/defaultTheme.ts | 9 +- .../mui-joy/src/styles/extendTheme.test.js | 2 + packages/mui-joy/src/styles/extendTheme.ts | 17 +- packages/mui-joy/src/styles/index.ts | 1 - .../src/styles/styleFunctionSx.spec.tsx | 18 +- .../src/styles/styleFunctionSx.test.js | 132 -------- .../mui-joy/src/styles/styleFunctionSx.ts | 113 ------- packages/mui-joy/src/styles/styled.test.tsx | 30 +- packages/mui-joy/src/styles/styled.ts | 3 +- packages/mui-joy/src/styles/sxConfig.ts | 35 ++ packages/mui-joy/src/styles/types/theme.ts | 4 + .../src/styles/CssVarsProvider.tsx | 10 +- .../src/styles/Theme.types.ts | 4 +- .../src/styles/defaultTheme.ts | 7 + .../src/styles/extendTheme.ts | 14 + .../src/styles/styleFunctionSx.ts | 153 --------- .../src/styles/styled.test.js | 202 ++++++++++++ .../mui-material-next/src/styles/styled.ts | 3 +- .../mui-material-next/src/styles/sxConfig.ts | 64 ++++ .../src/styles/CssVarsProvider.tsx | 18 +- .../mui-material/src/styles/createTheme.d.ts | 11 +- .../mui-material/src/styles/createTheme.js | 17 +- .../src/styles/experimental_extendTheme.d.ts | 3 + .../src/styles/experimental_extendTheme.js | 13 + packages/mui-material/src/styles/index.d.ts | 1 - packages/mui-material/src/styles/index.js | 1 - .../mui-material/src/styles/index.spec.ts | 19 +- .../mui-material/src/styles/styled.spec.tsx | 25 +- packages/mui-system/src/borders.js | 12 +- packages/mui-system/src/createBox.d.ts | 2 - packages/mui-system/src/createBox.js | 9 +- packages/mui-system/src/createStyled.js | 3 +- packages/mui-system/src/createStyled.test.js | 12 +- .../src/createTheme/createTheme.d.ts | 5 + .../mui-system/src/createTheme/createTheme.js | 13 + .../createTheme.test.js} | 37 +-- packages/mui-system/src/index.d.ts | 3 +- packages/mui-system/src/index.js | 2 +- packages/mui-system/src/palette.js | 8 +- packages/mui-system/src/sizing.js | 18 +- packages/mui-system/src/spacing.js | 4 +- packages/mui-system/src/style.d.ts | 18 +- packages/mui-system/src/style.js | 2 +- .../src/styleFunctionSx/defaultSxConfig.d.ts | 20 ++ .../src/styleFunctionSx/defaultSxConfig.js | 306 ++++++++++++++++++ .../src/styleFunctionSx/extendSxProp.js | 6 +- .../mui-system/src/styleFunctionSx/index.d.ts | 4 + .../mui-system/src/styleFunctionSx/index.js | 1 + .../src/styleFunctionSx/styleFunctionSx.d.ts | 3 +- .../src/styleFunctionSx/styleFunctionSx.js | 72 +++-- packages/mui-system/src/styled.test.js | 41 +++ packages/mui-system/src/sx/index.d.ts | 1 - packages/mui-system/src/sx/index.js | 1 - packages/mui-system/src/sx/sx.d.ts | 4 - packages/mui-system/src/sx/sx.js | 7 - packages/mui-system/src/sx/sx.spec.ts | 10 - 80 files changed, 1481 insertions(+), 641 deletions(-) create mode 100644 docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js create mode 100644 docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx create mode 100644 docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx.preview create mode 100644 docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.js create mode 100644 docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx create mode 100644 docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx.preview create mode 100644 docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md create mode 100644 docs/pages/system/experimental-api/configure-the-sx-prop.js delete mode 100644 packages/mui-joy/src/styles/styleFunctionSx.test.js delete mode 100644 packages/mui-joy/src/styles/styleFunctionSx.ts create mode 100644 packages/mui-joy/src/styles/sxConfig.ts delete mode 100644 packages/mui-material-next/src/styles/styleFunctionSx.ts create mode 100644 packages/mui-material-next/src/styles/styled.test.js create mode 100644 packages/mui-material-next/src/styles/sxConfig.ts rename packages/mui-system/src/{sx/sx.test.js => createTheme/createTheme.test.js} (85%) create mode 100644 packages/mui-system/src/styleFunctionSx/defaultSxConfig.d.ts create mode 100644 packages/mui-system/src/styleFunctionSx/defaultSxConfig.js delete mode 100644 packages/mui-system/src/sx/index.d.ts delete mode 100644 packages/mui-system/src/sx/index.js delete mode 100644 packages/mui-system/src/sx/sx.d.ts delete mode 100644 packages/mui-system/src/sx/sx.js delete mode 100644 packages/mui-system/src/sx/sx.spec.ts diff --git a/docs/data/material/customization/theme-components/GlobalThemeOverrideSx.js b/docs/data/material/customization/theme-components/GlobalThemeOverrideSx.js index d78df9369e8e28..28329516e060c1 100644 --- a/docs/data/material/customization/theme-components/GlobalThemeOverrideSx.js +++ b/docs/data/material/customization/theme-components/GlobalThemeOverrideSx.js @@ -1,9 +1,5 @@ import * as React from 'react'; -import { - ThemeProvider, - createTheme, - experimental_sx as sx, -} from '@mui/material/styles'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; import Chip from '@mui/material/Chip'; import Check from '@mui/icons-material/Check'; @@ -11,20 +7,22 @@ const finalTheme = createTheme({ components: { MuiChip: { styleOverrides: { - root: sx({ - // https://mui.com/system/getting-started/the-sx-prop/#spacing - px: 1, - py: 0.25, - // https://mui.com/system/borders/#border-radius - borderRadius: 1, // 4px as default. - }), + root: ({ theme }) => + theme.unstable_sx({ + // https://mui.com/system/getting-started/the-sx-prop/#spacing + px: 1, + py: 0.25, + // https://mui.com/system/borders/#border-radius + borderRadius: 1, // 4px as default. + }), label: { padding: 'initial', }, - icon: sx({ - mr: 0.5, - ml: '-2px', - }), + icon: ({ theme }) => + theme.unstable_sx({ + mr: 0.5, + ml: '-2px', + }), }, }, }, diff --git a/docs/data/material/customization/theme-components/GlobalThemeOverrideSx.tsx b/docs/data/material/customization/theme-components/GlobalThemeOverrideSx.tsx index d78df9369e8e28..28329516e060c1 100644 --- a/docs/data/material/customization/theme-components/GlobalThemeOverrideSx.tsx +++ b/docs/data/material/customization/theme-components/GlobalThemeOverrideSx.tsx @@ -1,9 +1,5 @@ import * as React from 'react'; -import { - ThemeProvider, - createTheme, - experimental_sx as sx, -} from '@mui/material/styles'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; import Chip from '@mui/material/Chip'; import Check from '@mui/icons-material/Check'; @@ -11,20 +7,22 @@ const finalTheme = createTheme({ components: { MuiChip: { styleOverrides: { - root: sx({ - // https://mui.com/system/getting-started/the-sx-prop/#spacing - px: 1, - py: 0.25, - // https://mui.com/system/borders/#border-radius - borderRadius: 1, // 4px as default. - }), + root: ({ theme }) => + theme.unstable_sx({ + // https://mui.com/system/getting-started/the-sx-prop/#spacing + px: 1, + py: 0.25, + // https://mui.com/system/borders/#border-radius + borderRadius: 1, // 4px as default. + }), label: { padding: 'initial', }, - icon: sx({ - mr: 0.5, - ml: '-2px', - }), + icon: ({ theme }) => + theme.unstable_sx({ + mr: 0.5, + ml: '-2px', + }), }, }, }, diff --git a/docs/data/material/customization/theme-components/theme-components.md b/docs/data/material/customization/theme-components/theme-components.md index 188e86cabd1683..046c1c85dce85a 100644 --- a/docs/data/material/customization/theme-components/theme-components.md +++ b/docs/data/material/customization/theme-components/theme-components.md @@ -116,18 +116,20 @@ const finalTheme = createTheme({ components: { MuiChip: { styleOverrides: { - root: sx({ - px: 1, - py: 0.25, - borderRadius: 1, - }), + root: ({ theme }) => + theme.unstable_sx({ + px: 1, + py: 0.25, + borderRadius: 1, + }), label: { padding: 'initial', }, - icon: sx({ - mr: 0.5, - ml: '-2px', - }), + icon: ({ theme }) => + theme.unstable_sx({ + mr: 0.5, + ml: '-2px', + }), }, }, }, diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js new file mode 100644 index 00000000000000..37efe351afd4a5 --- /dev/null +++ b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js @@ -0,0 +1,31 @@ +import * as React from 'react'; +import { createTheme, ThemeProvider, Box, Stack } from '@mui/system'; + +// Retain type safety. + +const theme = createTheme({ + unstable_sxConfig: { + // You can now use the background key in sx + // by providing direct values from the palette + borderRadius: { + themeKey: 'shape', + }, + }, + shape: { + sm: 4, + md: 8, + lg: 12, + }, +}); + +export default function ChangeTheBehaviorSxProp() { + return ( + + + + + + + + ); +} diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx new file mode 100644 index 00000000000000..eb0477a69f2a34 --- /dev/null +++ b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; +import { createTheme, ThemeProvider, Box, Stack } from '@mui/system'; + +// Retain type safety. +declare module '@mui/system' { + interface Shape { + sm: number; + md: number; + lg: number; + } +} + +const theme = createTheme({ + unstable_sxConfig: { + // You can now use the background key in sx + // by providing direct values from the palette + borderRadius: { + themeKey: 'shape', + }, + }, + shape: { + sm: 4, + md: 8, + lg: 12, + }, +}); + +export default function ChangeTheBehaviorSxProp() { + return ( + + + + + + + + ); +} diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx.preview b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx.preview new file mode 100644 index 00000000000000..563ab3ef514f8b --- /dev/null +++ b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx.preview @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.js b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.js new file mode 100644 index 00000000000000..2b96d7f2a88f43 --- /dev/null +++ b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.js @@ -0,0 +1,37 @@ +import * as React from 'react'; +import { createTheme, ThemeProvider, Box, handleBreakpoints } from '@mui/system'; + +const customTheme = createTheme({ + unstable_sxConfig: { + size: { + style: (props) => { + const { size, theme } = props; + + const styleFromPropValue = (propValueFinal) => { + const value = theme.spacing(propValueFinal); + + return { + width: value, + height: value, + }; + }; + + // Adding support for the breakpoints syntax + return handleBreakpoints(props, size, styleFromPropValue); + }, + }, + }, +}); + +export default function ExtendSxProp() { + return ( + + + + ); +} diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx new file mode 100644 index 00000000000000..a6f071dc97282f --- /dev/null +++ b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import { createTheme, ThemeProvider, Box, handleBreakpoints } from '@mui/system'; + +const customTheme = createTheme({ + unstable_sxConfig: { + size: { + style: (props) => { + const { size, theme } = props; + + const styleFromPropValue = (propValueFinal: number) => { + const value = theme.spacing(propValueFinal); + + return { + width: value, + height: value, + }; + }; + + // Adding support for the breakpoints syntax + return handleBreakpoints(props, size, styleFromPropValue); + }, + }, + }, +}); + +export default function ExtendSxProp() { + return ( + + + + ); +} diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx.preview b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx.preview new file mode 100644 index 00000000000000..4ca9079ae6b641 --- /dev/null +++ b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx.preview @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md b/docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md new file mode 100644 index 00000000000000..1e80481d137ec6 --- /dev/null +++ b/docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md @@ -0,0 +1,26 @@ +# Configure the sx prop + +

Learn about the experimental API for extending or changing the behavior of the sx prop.

+ +## Extend the sx prop + +You can add new keys to be processed by the `sx` prop by extending the `unstable_sxConfig` option inside the theme, as shown below: + +{{"demo": "ExtendTheSxProp.js" }} + +## Override existing behavior + +It is also possible to change some of the existing behavior of the `sx` prop. +For example, in some design systems, the border radiuses need to be restricted to specific values, instead of allowing any number to be used—as is the default with MUI System. +You can change this behavior by providing a custom config for the `borderRadius` property: + +{{"demo": "ChangeTheBehaviorSxProp.js" }} + +## API + +Each key in the `unstable_sx` config can define the following properties: + +- `cssProperty` (_string_ [optional]): Indicates the CSS property, if it is different than the key +- `themeKey` (_string_ [optional]): The path of the theme mapping +- `transform` (_(cssValue: unknown, userValue: unknown) => number | string | React.CSSProperties | CSSObject_ [optional]): Lets users define a function that can transform the value before it's returned +- `style` (_(props: any) => CSSObject_ [optional]): Offers maximum customizability. Note that you need to make sure that the breakpoint values can be processed diff --git a/docs/data/system/getting-started/usage/usage.md b/docs/data/system/getting-started/usage/usage.md index 9e300e6da04b24..2d1c0a179874c4 100644 --- a/docs/data/system/getting-started/usage/usage.md +++ b/docs/data/system/getting-started/usage/usage.md @@ -157,9 +157,9 @@ It works with both Emotion and styled-components. | Benchmark case | Code snippet | Time normalized | | :-------------------------------- | :-------------------- | --------------- | | a. Render 1,000 primitives | `
` | 100ms | - | b. Render 1,000 components | `
` | 120ms | - | c. Render 1,000 styled components | `` | 160ms | - | d. Render 1,000 Box | `` | 370ms | + | b. Render 1,000 components | `
` | 112ms | + | c. Render 1,000 styled components | `` | 181ms | + | d. Render 1,000 Box | `` | 296ms | diff --git a/docs/data/system/pages.ts b/docs/data/system/pages.ts index b8dff15a1777d4..a2936405ac5688 100644 --- a/docs/data/system/pages.ts +++ b/docs/data/system/pages.ts @@ -63,6 +63,17 @@ const pages = [ icon: 'CodeIcon', children: pagesApi, }, + { + pathname: '/system/experimental-api', + title: 'Experimental APIs', + icon: 'ExperimentIcon', + children: [ + { + pathname: '/system/experimental-api/configure-the-sx-prop', + title: 'Configure the sx prop', + }, + ], + }, { pathname: '/system/styles', title: 'Styles', diff --git a/docs/data/system/styled/UsingWithSx.js b/docs/data/system/styled/UsingWithSx.js index 9e50b6d44f5f71..ba14414f409018 100644 --- a/docs/data/system/styled/UsingWithSx.js +++ b/docs/data/system/styled/UsingWithSx.js @@ -1,10 +1,5 @@ import * as React from 'react'; -import { - styled, - createTheme, - ThemeProvider, - experimental_sx as sx, -} from '@mui/system'; +import { styled, createTheme, ThemeProvider } from '@mui/system'; const customTheme = createTheme({ palette: { @@ -15,8 +10,8 @@ const customTheme = createTheme({ }, }); -const MyThemeComponent = styled('div')( - sx({ +const MyThemeComponent = styled('div')(({ theme }) => + theme.unstable_sx({ color: 'primary.contrastText', backgroundColor: 'primary.main', padding: 1, diff --git a/docs/data/system/styled/UsingWithSx.tsx b/docs/data/system/styled/UsingWithSx.tsx index 9e50b6d44f5f71..ba14414f409018 100644 --- a/docs/data/system/styled/UsingWithSx.tsx +++ b/docs/data/system/styled/UsingWithSx.tsx @@ -1,10 +1,5 @@ import * as React from 'react'; -import { - styled, - createTheme, - ThemeProvider, - experimental_sx as sx, -} from '@mui/system'; +import { styled, createTheme, ThemeProvider } from '@mui/system'; const customTheme = createTheme({ palette: { @@ -15,8 +10,8 @@ const customTheme = createTheme({ }, }); -const MyThemeComponent = styled('div')( - sx({ +const MyThemeComponent = styled('div')(({ theme }) => + theme.unstable_sx({ color: 'primary.contrastText', backgroundColor: 'primary.main', padding: 1, diff --git a/docs/data/system/styled/styled.md b/docs/data/system/styled/styled.md index 6f3a69f6f9238a..5af4d2c8d68398 100644 --- a/docs/data/system/styled/styled.md +++ b/docs/data/system/styled/styled.md @@ -208,13 +208,13 @@ const MyStyledButton = (props) => ( ### How can I use the `sx` syntax with the `styled()` utility? -If you are one of those who prefers the `sx` syntax and wants to use it in both the `sx` prop and the `styled()` utility, you can use the `experimental_sx` utility from the `@mui/system`: +If you prefer the `sx` syntax and want to use it in both the `sx` prop and the `styled()` utility, you can use the `unstable_sx` utility from the `theme`: {{"demo": "UsingWithSx.js", "defaultCodeOpen": true}} -The overhead added by using the `experimental_sx` utility is the same as if you were to use the `sx` prop on the component. +The overhead added by using the `unstable_sx` utility is the same as if you were to use the `sx` prop on the component. -> Note: You can use `experimental_sx` outside of the `styled()` utility, too; e.g., for defining `variants` in your custom theme. +> Note: You can use `unstable_sx` outside of the `styled()` utility, too; e.g., for defining `variants` in your custom theme. ## How to use components selector API diff --git a/docs/pages/blog/callback-support-in-style-overrides.md b/docs/pages/blog/callback-support-in-style-overrides.md index 96f088a1226f55..b7e25bc17cd95d 100644 --- a/docs/pages/blog/callback-support-in-style-overrides.md +++ b/docs/pages/blog/callback-support-in-style-overrides.md @@ -117,26 +117,23 @@ const Label = styled('span')({ `sx` helps developers write less code and be more productive once they are familiar with the API. With the callback support in `styleOverrides`, it is now possible to use an `sx`-like syntax in global theme overrides. -All you need is to use the [`experimental_sx`](/system/styled/#how-can-i-use-the-sx-syntax-with-the-styled-utility) function. In the following example, I use `sx` to theme the `Chip` component: +All you need is to use the [`unstable_sx`](/system/styled/#how-can-i-use-the-sx-syntax-with-the-styled-utility) function from the `theme`. In the following example, the `sx` is used to style the `Chip` component: ```jsx -import { - ThemeProvider, - createTheme, - experimental_sx as sx, -} from '@mui/material/styles'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; + theme.unstable_sx({ + px: '12px', // shorthand for padding-left & right + py: '6px', // shorthand for padding-top & bottom + fontWeight: 500, + borderRadius: '8px', + }), label: { padding: 0, }, @@ -159,19 +156,19 @@ An array can be used as a return type to make the code easier to add/remove cond ```js // The is omitted for readability. { - root: ({ ownerState }) => [ - sx({ + root: ({ ownerState, theme }) => [ + theme.unstable_sx({ px: '12px', py: '6px', fontWeight: 500, borderRadius: '8px', }), ownerState.variant === 'outlined' && ownerState.color === 'default' && - sx({ + theme.unstable_sx({ borderColor: 'text.secondary', }), ownerState.size === 'small' && - sx({ + theme.unstable_sx({ fontSize: { xs: '0.875rem', sm: '0.75rem' }, }) ], diff --git a/docs/pages/experiments/md3/index.tsx b/docs/pages/experiments/md3/index.tsx index 61614b46bf6467..0472963c9ffd07 100644 --- a/docs/pages/experiments/md3/index.tsx +++ b/docs/pages/experiments/md3/index.tsx @@ -151,6 +151,7 @@ function DemoComponents() { bgcolor: 'error', border: 1, borderColor: 'tertiary', + borderRadius: '1px', }} > Button @@ -161,10 +162,12 @@ function DemoComponents() { bgcolor: 'error.40', border: 1, borderColor: 'tertiary.40', + borderRadius: 2, }} > Button + MD2 Button

CSS vars playground

diff --git a/docs/pages/system/experimental-api/configure-the-sx-prop.js b/docs/pages/system/experimental-api/configure-the-sx-prop.js new file mode 100644 index 00000000000000..45c27611cde73e --- /dev/null +++ b/docs/pages/system/experimental-api/configure-the-sx-prop.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 26149cf9612b28..9c4f72bd77bb7a 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -193,6 +193,8 @@ "/system/react-container": "Container", "/system/react-grid": "Grid", "/system/react-stack": "Stack", + "/system/experimental-api": "Experimental APIs", + "/system/experimental-api/configure-the-sx-prop": "Configure the sx prop", "/system/styles": "Styles", "/system/styles/basics": "Basics", "/system/styles/advanced": "Advanced", diff --git a/packages/mui-joy/src/Box/Box.test.js b/packages/mui-joy/src/Box/Box.test.js index 54193a56457090..b99f66c0393e17 100644 --- a/packages/mui-joy/src/Box/Box.test.js +++ b/packages/mui-joy/src/Box/Box.test.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { createRenderer, describeConformance } from 'test/utils'; -import { ThemeProvider } from '@mui/joy/styles'; +import { ThemeProvider, CssVarsProvider, extendTheme } from '@mui/joy/styles'; import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/joy/className'; import Box from '@mui/joy/Box'; @@ -65,4 +65,189 @@ describe('Joy ', () => { expect(container.firstChild).to.have.class('CompanyBox-root'); }); }); + + describe('sx', () => { + const theme = extendTheme({ + colorSchemes: { + light: { + palette: { + primary: { + 500: 'rgb(0, 0, 255)', + }, + }, + }, + }, + radius: { + md: '77px', + }, + shadow: { + md: 'rgb(0, 0, 0) 0px 0px 10px 0px', + }, + }); + + it('color', function test() { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + color: 'rgb(0, 0, 255)', + }); + }); + + it('bgcolor', function test() { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + backgroundColor: 'rgb(0, 0, 255)', + }); + }); + + it('backgroundColor', function test() { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + backgroundColor: 'rgb(0, 0, 255)', + }); + }); + + it('borderRadius', function test() { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + borderTopLeftRadius: '77px', + borderTopRightRadius: '77px', + borderBottomLeftRadius: '77px', + borderBottomRightRadius: '77px', + }); + }); + + it('boxShadow', function test() { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + boxShadow: 'rgb(0, 0, 0) 0px 0px 10px 0px', + }); + }); + + it('fontSize', function test() { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + fontSize: '16px', + }); + }); + + it('fontWeight', function test() { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + fontWeight: '500', + }); + }); + + it('letterSpacing', function test() { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + letterSpacing: '1.328px', + }); + }); + + it('lineHeight', function test() { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + lineHeight: '24px', + }); + }); + }); }); diff --git a/packages/mui-joy/src/Box/Box.tsx b/packages/mui-joy/src/Box/Box.tsx index 6f3115e13cc403..9192e6a906140a 100644 --- a/packages/mui-joy/src/Box/Box.tsx +++ b/packages/mui-joy/src/Box/Box.tsx @@ -4,13 +4,11 @@ import { OverridableComponent } from '@mui/types'; import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className'; import { BoxTypeMap } from './BoxProps'; import defaultTheme from '../styles/defaultTheme'; -import styleFunctionSx from '../styles/styleFunctionSx'; const Box = createBox({ defaultTheme, defaultClassName: 'JoyBox-root', generateClassName: ClassNameGenerator.generate, - styleFunctionSx, }) as OverridableComponent; Box.propTypes /* remove-proptypes */ = { diff --git a/packages/mui-joy/src/styles/CssVarsProvider.tsx b/packages/mui-joy/src/styles/CssVarsProvider.tsx index f47e62034c3886..ec25fd66ade574 100644 --- a/packages/mui-joy/src/styles/CssVarsProvider.tsx +++ b/packages/mui-joy/src/styles/CssVarsProvider.tsx @@ -1,8 +1,11 @@ import { deepmerge } from '@mui/utils'; -import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system'; +import { + unstable_createCssVarsProvider as createCssVarsProvider, + unstable_styleFunctionSx as styleFunctionSx, +} from '@mui/system'; import extendTheme from './extendTheme'; import { createSoftInversion, createSolidInversion } from './variantUtils'; -import type { Theme, DefaultColorScheme, ExtendedColorScheme } from './types'; +import type { Theme, DefaultColorScheme, ExtendedColorScheme, SxProps } from './types'; const shouldSkipGeneratingVar = (keys: string[]) => !!keys[0].match(/^(typography|variants|breakpoints|colorInversion|colorInversionConfig)$/) || @@ -30,6 +33,11 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssV mergedTheme.colorInversion, { clone: false }, ); + + // TOOD remove this intermediary function call. + mergedTheme.unstable_sx = function sx(props: SxProps) { + return styleFunctionSx({ sx: props, theme: this }); + }; return mergedTheme; }, shouldSkipGeneratingVar, diff --git a/packages/mui-joy/src/styles/ThemeProvider.tsx b/packages/mui-joy/src/styles/ThemeProvider.tsx index 76df36c94ff756..2a8d8029d10eaa 100644 --- a/packages/mui-joy/src/styles/ThemeProvider.tsx +++ b/packages/mui-joy/src/styles/ThemeProvider.tsx @@ -1,5 +1,10 @@ import * as React from 'react'; -import { ThemeProvider as SystemThemeProvider, useTheme as useSystemTheme } from '@mui/system'; +import { + ThemeProvider as SystemThemeProvider, + unstable_styleFunctionSx as styleFunctionSx, + useTheme as useSystemTheme, +} from '@mui/system'; +import { SxProps } from './types'; import defaultTheme, { getThemeWithVars } from './defaultTheme'; import type { CssVarsThemeOptions } from './extendTheme'; @@ -7,6 +12,15 @@ export const useTheme = () => { return useSystemTheme(defaultTheme); }; +const getTheme = (themeInput: CssVarsThemeOptions) => { + const theme = getThemeWithVars(themeInput); + theme.unstable_sx = function sx(props: SxProps) { + return styleFunctionSx({ sx: props, theme: this }); + }; + + return theme; +}; + export default function ThemeProvider({ children, theme: themeInput, @@ -14,7 +28,7 @@ export default function ThemeProvider({ theme?: CssVarsThemeOptions; }>) { return ( - + {children} ); diff --git a/packages/mui-joy/src/styles/defaultTheme.test.js b/packages/mui-joy/src/styles/defaultTheme.test.js index 38928cc057b694..b3125cabadaff9 100644 --- a/packages/mui-joy/src/styles/defaultTheme.test.js +++ b/packages/mui-joy/src/styles/defaultTheme.test.js @@ -29,6 +29,8 @@ describe('defaultTheme', () => { 'vars', 'cssVarPrefix', 'getColorSchemeSelector', + 'unstable_sxConfig', + 'unstable_sx', ]).to.includes(field); }); }); diff --git a/packages/mui-joy/src/styles/defaultTheme.ts b/packages/mui-joy/src/styles/defaultTheme.ts index cce16945265ee6..7d48cf03a1291a 100644 --- a/packages/mui-joy/src/styles/defaultTheme.ts +++ b/packages/mui-joy/src/styles/defaultTheme.ts @@ -1,7 +1,9 @@ import { deepmerge } from '@mui/utils'; +import { unstable_styleFunctionSx as styleFunctionSx } from '@mui/system'; import extendTheme from './extendTheme'; +import defaultSxConfig from './sxConfig'; import type { CssVarsThemeOptions, ColorSystemOptions } from './extendTheme'; -import type { Theme, RuntimeColorSystem } from './types'; +import type { Theme, RuntimeColorSystem, SxProps } from './types'; import { createVariant, createSoftInversion, createSolidInversion } from './variantUtils'; export const getThemeWithVars = ( @@ -95,4 +97,9 @@ defaultTheme.colorInversion = deepmerge( defaultTheme.colorInversion, ); +defaultTheme.unstable_sxConfig = defaultSxConfig; +defaultTheme.unstable_sx = function sx(props: SxProps) { + return styleFunctionSx({ sx: props, theme: this }); +}; + export default defaultTheme; diff --git a/packages/mui-joy/src/styles/extendTheme.test.js b/packages/mui-joy/src/styles/extendTheme.test.js index 37f5636066f82e..cf39c5667968c9 100644 --- a/packages/mui-joy/src/styles/extendTheme.test.js +++ b/packages/mui-joy/src/styles/extendTheme.test.js @@ -23,6 +23,8 @@ describe('extendTheme', () => { 'colorInversionConfig', 'variants', 'cssVarPrefix', + 'unstable_sxConfig', + 'unstable_sx', ]).to.includes(field); }); }); diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts index bff0c2f194c0b9..141a3d4f05c220 100644 --- a/packages/mui-joy/src/styles/extendTheme.ts +++ b/packages/mui-joy/src/styles/extendTheme.ts @@ -6,14 +6,17 @@ import { createSpacing, unstable_createGetCssVar as systemCreateGetCssVar, colorChannel, + unstable_styleFunctionSx as styleFunctionSx, + SxConfig, } from '@mui/system'; +import defaultSxConfig from './sxConfig'; import colors from '../colors'; import { DefaultColorScheme, ExtendedColorScheme } from './types/colorScheme'; import { ColorSystem, ColorPaletteProp, PaletteRange } from './types/colorSystem'; import { Focus } from './types/focus'; import { TypographySystem, FontSize } from './types/typography'; import { Variants, VariantOverrides, ColorInversionConfig } from './types/variants'; -import { Theme, ThemeCssVar, ThemeScales } from './types'; +import { Theme, ThemeCssVar, ThemeScales, SxProps } from './types'; import { Components } from './components'; import { generateUtilityClass } from '../className'; import { createVariant } from './variantUtils'; @@ -60,6 +63,7 @@ export interface CssVarsThemeOptions extends Partial2Level { spacing?: SpacingOptions; components?: Components; colorSchemes?: Partial>; + unstable_sxConfig?: SxConfig; } export const createGetCssVar = (cssVarPrefix = 'joy') => @@ -623,5 +627,16 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { attachColorChannels(colorSystem.palette); }); + theme.unstable_sxConfig = { + ...defaultSxConfig, + ...themeOptions?.unstable_sxConfig, + }; + theme.unstable_sx = function sx(props: SxProps) { + return styleFunctionSx({ + sx: props, + theme: this, + }); + }; + return theme; } diff --git a/packages/mui-joy/src/styles/index.ts b/packages/mui-joy/src/styles/index.ts index f674dcf5b89451..254a66e088fd5d 100644 --- a/packages/mui-joy/src/styles/index.ts +++ b/packages/mui-joy/src/styles/index.ts @@ -71,7 +71,6 @@ export { default as styled } from './styled'; export { default as ThemeProvider } from './ThemeProvider'; export * from './ThemeProvider'; export { default as useThemeProps } from './useThemeProps'; -export { sx as experimental_sx } from './styleFunctionSx'; export { ColorInversionProvider, useColorInversion } from './ColorInversion'; export { default as extendTheme, createGetCssVar } from './extendTheme'; export type { CssVarsThemeOptions } from './extendTheme'; diff --git a/packages/mui-joy/src/styles/styleFunctionSx.spec.tsx b/packages/mui-joy/src/styles/styleFunctionSx.spec.tsx index e143ae90a818e7..e2bde5aad54bed 100644 --- a/packages/mui-joy/src/styles/styleFunctionSx.spec.tsx +++ b/packages/mui-joy/src/styles/styleFunctionSx.spec.tsx @@ -1,10 +1,22 @@ -import { experimental_sx as sx, styled } from '@mui/joy/styles'; +import { styled } from '@mui/joy/styles'; // Can be used in the styled() utility -const Test = styled('div')( - sx({ +const Test = styled('div')(({ theme }) => + theme.unstable_sx({ color: 'primary.100', bgcolor: 'primary.700', m: 2, }), ); + +// Can be used in when styles are defined as arrays +const TestArray = styled('div')( + ({ theme }) => theme.unstable_sx({ color: 'primary.100' }), + ({ theme }) => theme.unstable_sx({ mt: 2 }), +); + +// Can be used inside pseudo elements +const TestPseudo = styled('div')(({ theme }) => ({ + ...theme.unstable_sx({ color: 'primary.100' }), + '&:hover': theme.unstable_sx({ color: 'primary.700' }), +})); diff --git a/packages/mui-joy/src/styles/styleFunctionSx.test.js b/packages/mui-joy/src/styles/styleFunctionSx.test.js deleted file mode 100644 index b16baf81347169..00000000000000 --- a/packages/mui-joy/src/styles/styleFunctionSx.test.js +++ /dev/null @@ -1,132 +0,0 @@ -import { expect } from 'chai'; -import { createBreakpoints } from '@mui/system'; -import styleFunctionSx from './styleFunctionSx'; - -describe('styleFunctionSx', () => { - const theme = { - palette: { - primary: { - 500: '#ff5252', - }, - }, - vars: { - palette: { - primary: { - 500: 'var(--palette-primary-500)', - textColor: 'var(--palette-primary-textColor)', - containedBg: 'var(--palette-primary-containedBg)', - outlinedBorder: 'var(--palette-primary-outlinedBorder)', - }, - }, - radius: { - md: 'var(--radius-md)', - }, - shadow: { - md: 'var(--shadow-md)', - }, - fontFamily: { - display: 'var(--fontFamily-display)', - }, - fontSize: { - sm: 'var(--fontSize-sm)', - md: 'var(--fontSize-md)', - xl: 'var(--fontSize-xl)', - }, - fontWeight: { - md: 'var(--fontWeight-md)', - }, - letterSpacing: { - md: 'var(--letterSpacing-md)', - }, - lineHeight: { - md: 'var(--lineHeight-md)', - }, - }, - breakpoints: createBreakpoints({}), - }; - it('color', () => { - expect(styleFunctionSx({ theme, sx: { color: 'primary.500' } })).to.deep.equal({ - color: 'var(--palette-primary-500)', - }); - }); - - it('bgcolor', () => { - expect(styleFunctionSx({ theme, sx: { bgcolor: 'primary.containedBg' } })).to.deep.equal({ - backgroundColor: 'var(--palette-primary-containedBg)', - }); - }); - - it('backgroundColor', () => { - expect( - styleFunctionSx({ theme, sx: { backgroundColor: 'primary.containedBg' } }), - ).to.deep.equal({ - backgroundColor: 'var(--palette-primary-containedBg)', - }); - }); - - it('borderColor', () => { - expect(styleFunctionSx({ theme, sx: { borderColor: 'primary.outlinedBorder' } })).to.deep.equal( - { - borderColor: 'var(--palette-primary-outlinedBorder)', - }, - ); - }); - - it('borderRadius', () => { - expect(styleFunctionSx({ theme, sx: { borderRadius: 'md' } })).to.deep.equal({ - borderRadius: 'var(--radius-md)', - }); - }); - - it('boxShadow', () => { - expect(styleFunctionSx({ theme, sx: { boxShadow: 'md' } })).to.deep.equal({ - boxShadow: 'var(--shadow-md)', - }); - }); - - it('fontFamily', () => { - expect(styleFunctionSx({ theme, sx: { fontFamily: 'display' } })).to.deep.equal({ - fontFamily: 'var(--fontFamily-display)', - }); - }); - - it('fontSize', () => { - expect(styleFunctionSx({ theme, sx: { fontSize: 'md' } })).to.deep.equal({ - fontSize: 'var(--fontSize-md)', - }); - }); - - it('fontWeight', () => { - expect(styleFunctionSx({ theme, sx: { fontWeight: 'md' } })).to.deep.equal({ - fontWeight: 'var(--fontWeight-md)', - }); - }); - - it('letterSpacing', () => { - expect(styleFunctionSx({ theme, sx: { letterSpacing: 'md' } })).to.deep.equal({ - letterSpacing: 'var(--letterSpacing-md)', - }); - }); - - it('lineHeight', () => { - expect(styleFunctionSx({ theme, sx: { lineHeight: 'md' } })).to.deep.equal({ - lineHeight: 'var(--lineHeight-md)', - }); - }); - - it('should handle reponsive styles', () => { - expect( - styleFunctionSx({ theme, sx: { fontSize: { xs: 'sm', md: 'md', xl: 'xl' } } }), - ).to.deep.equal({ - '@media (min-width:0px)': { - fontSize: 'var(--fontSize-sm)', - }, - '@media (min-width:900px)': { - fontSize: 'var(--fontSize-md)', - }, - '@media (min-width:1536px)': { - fontSize: 'var(--fontSize-xl)', - }, - }); - }); -}); diff --git a/packages/mui-joy/src/styles/styleFunctionSx.ts b/packages/mui-joy/src/styles/styleFunctionSx.ts deleted file mode 100644 index 363b9dc8de62bf..00000000000000 --- a/packages/mui-joy/src/styles/styleFunctionSx.ts +++ /dev/null @@ -1,113 +0,0 @@ -import { - Interpolation, - unstable_createStyleFunctionSx, - compose, - style, - display, - flexbox, - grid, - positions, - sizing, - spacing, - border, - borderTop, - borderRight, - borderBottom, - borderLeft, - borderColor, - borderTopColor, - borderRightColor, - borderBottomColor, - borderLeftColor, - palette, - typographyVariant, -} from '@mui/system'; -import { Theme, SxProps } from './types'; - -// The default system themeKey is shape -const borderRadius = style({ - prop: 'borderRadius', - themeKey: 'radius', -}); - -const borders = compose( - border, - borderTop, - borderRight, - borderBottom, - borderLeft, - borderColor, - borderTopColor, - borderRightColor, - borderBottomColor, - borderLeftColor, - borderRadius, -); - -// The default system themeKey is shadows -const boxShadow = style({ - prop: 'boxShadow', - themeKey: 'shadow', -}); - -// The default system themeKey is typography -export const fontFamily = style({ - prop: 'fontFamily', - themeKey: 'fontFamily', -}); - -// The default system themeKey is typography -export const fontSize = style({ - prop: 'fontSize', - themeKey: 'fontSize', -}); - -// The default system themeKey is typography -export const fontWeight = style({ - prop: 'fontWeight', - themeKey: 'fontWeight', -}); - -// The default system themeKey is typography -export const letterSpacing = style({ - prop: 'letterSpacing', - themeKey: 'letterSpacing', -}); - -export const lineHeight = style({ - prop: 'lineHeight', - themeKey: 'lineHeight', -}); - -const typography = compose( - typographyVariant, - fontFamily, - fontSize, - fontWeight, - letterSpacing, - lineHeight, -); - -const styleFunctionMapping = { - borders, - display, - flexbox, - grid, - positions, - palette, - boxShadow, - sizing, - spacing, - typography, -}; - -const styleFunctionSx = unstable_createStyleFunctionSx(styleFunctionMapping); - -styleFunctionSx.filterProps = ['sx']; - -export const sx = (styles: SxProps) => { - return ({ theme }: { theme: Theme }) => - styleFunctionSx({ sx: styles, theme }) as Interpolation<{ theme: Theme }>; -}; - -export default styleFunctionSx; diff --git a/packages/mui-joy/src/styles/styled.test.tsx b/packages/mui-joy/src/styles/styled.test.tsx index e4fe16ce320f13..8ce677f6efd539 100644 --- a/packages/mui-joy/src/styles/styled.test.tsx +++ b/packages/mui-joy/src/styles/styled.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { createRenderer } from 'test/utils'; -import { ThemeProvider, styled } from '@mui/joy/styles'; +import { CssVarsProvider, ThemeProvider, styled, extendTheme } from '@mui/joy/styles'; import defaultTheme from './defaultTheme'; const toPixel = (val: string | number | undefined) => (typeof val === 'number' ? `${val}px` : val); @@ -47,4 +47,32 @@ describe('[Joy] styled', () => { borderBottomLeftRadius: '50%', }); }); + + it('supports unstable_sx in the theme callback', function test() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const customTheme = extendTheme({ + colorSchemes: { + light: { + palette: { + primary: { + plainColor: 'rgb(255, 0, 0)', + }, + }, + }, + }, + }); + const Text = styled('div')(({ theme }) => theme.unstable_sx({ color: 'primary.plainColor' })); + + const { container } = render( + + Text + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + color: 'rgb(255, 0, 0)', + }); + }); }); diff --git a/packages/mui-joy/src/styles/styled.ts b/packages/mui-joy/src/styles/styled.ts index 0b3efd0b9649e9..a6dfd1c5a1f408 100644 --- a/packages/mui-joy/src/styles/styled.ts +++ b/packages/mui-joy/src/styles/styled.ts @@ -1,8 +1,7 @@ import { createStyled } from '@mui/system'; import { Theme } from './types'; import defaultTheme from './defaultTheme'; -import styleFunctionSx from './styleFunctionSx'; -const styled = createStyled({ defaultTheme, styleFunctionSx }); +const styled = createStyled({ defaultTheme }); export default styled; diff --git a/packages/mui-joy/src/styles/sxConfig.ts b/packages/mui-joy/src/styles/sxConfig.ts new file mode 100644 index 00000000000000..40963c5e80b70c --- /dev/null +++ b/packages/mui-joy/src/styles/sxConfig.ts @@ -0,0 +1,35 @@ +import { SxConfig, unstable_defaultSxConfig } from '@mui/system'; + +const sxConfig: SxConfig = { + ...unstable_defaultSxConfig, + // The default system themeKey is shape + borderRadius: { + themeKey: 'radius', + }, + // The default system themeKey is shadows + boxShadow: { + themeKey: 'shadow', + }, + // The default system themeKey is typography + fontFamily: { + themeKey: 'fontFamily', + }, + // The default system themeKey is typography + fontSize: { + themeKey: 'fontSize', + }, + // The default system themeKey is typography + fontWeight: { + themeKey: 'fontWeight', + }, + // The default system themeKey is typography + letterSpacing: { + themeKey: 'letterSpacing', + }, + // The default system themeKey is typography + lineHeight: { + themeKey: 'lineHeight', + }, +}; + +export default sxConfig; diff --git a/packages/mui-joy/src/styles/types/theme.ts b/packages/mui-joy/src/styles/types/theme.ts index 4621a31fdc4967..7a4a4352a606ae 100644 --- a/packages/mui-joy/src/styles/types/theme.ts +++ b/packages/mui-joy/src/styles/types/theme.ts @@ -4,6 +4,8 @@ import { Spacing, SxProps as SystemSxProps, SystemProps as SystemSystemProps, + CSSObject, + SxConfig, } from '@mui/system'; import { DefaultColorScheme, ExtendedColorScheme } from './colorScheme'; import { ColorSystem } from './colorSystem'; @@ -80,6 +82,8 @@ export interface Theme extends ThemeScales, RuntimeColorSystem { vars: ThemeVars; getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string; getColorSchemeSelector: (colorScheme: DefaultColorScheme | ExtendedColorScheme) => string; + unstable_sxConfig: SxConfig; + unstable_sx: (props: SxProps) => CSSObject; } export type SxProps = SystemSxProps; diff --git a/packages/mui-material-next/src/styles/CssVarsProvider.tsx b/packages/mui-material-next/src/styles/CssVarsProvider.tsx index 05a9aef2bb47a2..b3a7522df9074e 100644 --- a/packages/mui-material-next/src/styles/CssVarsProvider.tsx +++ b/packages/mui-material-next/src/styles/CssVarsProvider.tsx @@ -1,9 +1,14 @@ -import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system'; +import { + unstable_createCssVarsProvider as createCssVarsProvider, + unstable_styleFunctionSx as styleFunctionSx, + SxProps, +} from '@mui/system'; import { SupportedColorScheme, private_createTypography as createTypography, private_excludeVariablesFromRoot as excludeVariablesFromRoot, } from '@mui/material/styles'; +import { Theme } from './Theme.types'; import defaultTheme from './defaultTheme'; const shouldSkipGeneratingVar = (keys: string[]) => @@ -26,6 +31,9 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = typography: createTypography(theme.palette, theme.typography), }; + newTheme.unstable_sx = function sx(props: SxProps) { + return styleFunctionSx({ sx: props, theme: this }); + }; return newTheme; }, shouldSkipGeneratingVar, diff --git a/packages/mui-material-next/src/styles/Theme.types.ts b/packages/mui-material-next/src/styles/Theme.types.ts index 5db38f25017d04..964e05a6342831 100644 --- a/packages/mui-material-next/src/styles/Theme.types.ts +++ b/packages/mui-material-next/src/styles/Theme.types.ts @@ -1,4 +1,4 @@ -import { SxProps as SystemSxProps } from '@mui/system'; +import { SxProps as SystemSxProps, SxConfig, CSSObject } from '@mui/system'; import { CssVarsTheme as MD2Theme, SupportedColorScheme, @@ -192,6 +192,8 @@ export interface Theme extends Omit { shape: Shapes; }; }; + unstable_sxConfig: SxConfig; + unstable_sx: (props: SystemSxProps) => CSSObject; } export type SxProps = SystemSxProps; diff --git a/packages/mui-material-next/src/styles/defaultTheme.ts b/packages/mui-material-next/src/styles/defaultTheme.ts index 394ec08f05c481..3daba490449ec5 100644 --- a/packages/mui-material-next/src/styles/defaultTheme.ts +++ b/packages/mui-material-next/src/styles/defaultTheme.ts @@ -1,6 +1,8 @@ import { deepmerge } from '@mui/utils'; +import { unstable_styleFunctionSx as styleFunctionSx, SxProps } from '@mui/system'; import extendTheme from './extendTheme'; import type { Theme, CssVarsThemeOptions, ColorSystemOptions } from './Theme.types'; +import defaultSxConfig from './sxConfig'; export const getThemeWithVars = ( themeInput?: Omit & ColorSystemOptions, @@ -78,4 +80,9 @@ export const getThemeWithVars = ( const defaultTheme = getThemeWithVars(); +defaultTheme.unstable_sxConfig = defaultSxConfig; +defaultTheme.unstable_sx = function sx(props: SxProps) { + return styleFunctionSx({ sx: props, theme: this }); +}; + export default defaultTheme; diff --git a/packages/mui-material-next/src/styles/extendTheme.ts b/packages/mui-material-next/src/styles/extendTheme.ts index 90df3bac3eefaf..b321d806e38908 100644 --- a/packages/mui-material-next/src/styles/extendTheme.ts +++ b/packages/mui-material-next/src/styles/extendTheme.ts @@ -6,6 +6,8 @@ import { lighten, emphasize, unstable_createGetCssVar as systemCreateGetCssVar, + unstable_styleFunctionSx as styleFunctionSx, + SxProps, } from '@mui/system'; import { createTheme as createThemeWithoutVars, @@ -14,6 +16,7 @@ import { ColorSystem as MD2ColorSystem, Overlays, } from '@mui/material/styles'; +import defaultSxConfig from './sxConfig'; import { Theme, MD3Palettes, MD3ColorSchemeTokens, CssVarsThemeOptions } from './Theme.types'; import md3CommonPalette from './palette'; import createMd3LightColorScheme from './createLightColorScheme'; @@ -420,5 +423,16 @@ export default function extendTheme(options: CssVarsThemeOptions = {}, ...args: theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme); + theme.unstable_sxConfig = { + ...defaultSxConfig, + ...input?.unstable_sxConfig, + }; + theme.unstable_sx = function sx(props: SxProps) { + return styleFunctionSx({ + sx: props, + theme: this, + }); + }; + return theme; } diff --git a/packages/mui-material-next/src/styles/styleFunctionSx.ts b/packages/mui-material-next/src/styles/styleFunctionSx.ts deleted file mode 100644 index 9160b29d1bd000..00000000000000 --- a/packages/mui-material-next/src/styles/styleFunctionSx.ts +++ /dev/null @@ -1,153 +0,0 @@ -import { - Interpolation, - unstable_createStyleFunctionSx, - compose, - getPath, - getStyleValue as getValue, - display, - flexbox, - grid, - positions, - sizing, - spacing, - border, - borderTop, - borderRight, - borderBottom, - borderLeft, - borderTopColor, - borderRightColor, - borderBottomColor, - borderLeftColor, - createUnaryUnit, - handleBreakpoints, - responsivePropType, - typography, -} from '@mui/system'; -import { SxProps, Theme } from './Theme.types'; - -interface PaletteStyleOptions { - prop: string; - cssProperty?: string | boolean; -} - -function paletteStyle(options: PaletteStyleOptions = { prop: 'color' }) { - const { prop, cssProperty = options.prop } = options; - - const fn = (props: Record) => { - if (props[prop] == null) { - return null; - } - - const propValue: any = props[prop]; - const theme = props.theme; - const colorThemeMapping = getPath(theme, 'sys.color') || {}; - const paletteThemeMapping = getPath(theme, 'ref.palette') || {}; - - const styleFromPropValue = (propValueFinal: any) => { - // check the value in the color mapping first - let value = getValue(colorThemeMapping, undefined, propValueFinal); - - if (propValueFinal === value) { - // haven't found value in colors mapping, so we are checking in the palette mapping - value = getValue(paletteThemeMapping, undefined, propValueFinal); - } - - if (cssProperty === false) { - return value; - } - - return { - [cssProperty as string]: value, - }; - }; - - return handleBreakpoints(props, propValue, styleFromPropValue); - }; - - fn.propTypes = - process.env.NODE_ENV !== 'production' - ? { - [prop]: responsivePropType, - } - : {}; - - fn.filterProps = [prop]; - - return fn; -} - -// Palette values should reference the color tokens -export const color = paletteStyle({ - prop: 'color', -}); - -export const bgcolor = paletteStyle({ - prop: 'bgcolor', - cssProperty: 'backgroundColor', -}); - -export const backgroundColor = paletteStyle({ - prop: 'backgroundColor', -}); - -const palette = compose(color, bgcolor, backgroundColor); - -// Border radius should mapa to md3.shape -export const borderRadius = (props: any) => { - if (props.borderRadius !== undefined && props.borderRadius !== null) { - const transformer = createUnaryUnit(props.theme, 'md3.shape.borderRadius', 4, 'borderRadius'); - const styleFromPropValue = (propValue: any) => ({ - // @ts-ignore - borderRadius: getValue(transformer, propValue), - }); - return handleBreakpoints(props, props.borderRadius, styleFromPropValue); - } - - return null; -}; - -borderRadius.propTypes = - process.env.NODE_ENV !== 'production' ? { borderRadius: responsivePropType } : {}; - -const borderColor = paletteStyle({ - prop: 'borderColor', -}); - -borderRadius.filterProps = ['borderRadius']; -const borders = compose( - border, - borderTop, - borderRight, - borderBottom, - borderLeft, - borderColor, - borderTopColor, - borderRightColor, - borderBottomColor, - borderLeftColor, - borderRadius, -); - -const styleFunctionMapping = { - borders, - display, - flexbox, - grid, - positions, - palette, - sizing, - spacing, - typography, -}; - -const styleFunctionSx = unstable_createStyleFunctionSx(styleFunctionMapping); - -styleFunctionSx.filterProps = ['sx']; - -export const sx = (styles: SxProps) => { - return ({ theme }: { theme: Theme }) => - styleFunctionSx({ sx: styles, theme }) as Interpolation<{ theme: Theme }>; -}; - -export default styleFunctionSx; diff --git a/packages/mui-material-next/src/styles/styled.test.js b/packages/mui-material-next/src/styles/styled.test.js new file mode 100644 index 00000000000000..43fa2987f0b07e --- /dev/null +++ b/packages/mui-material-next/src/styles/styled.test.js @@ -0,0 +1,202 @@ +import * as React from 'react'; +import { expect } from 'chai'; +import { createRenderer, screen } from 'test/utils'; +import { styled } from '@mui/material-next/styles'; + +describe('styled', () => { + const { render } = createRenderer(); + + it('should work', () => { + const Div = styled('div')` + width: 200px; + `; + + const { container } = render(
Test
); + + expect(container.firstChild).toHaveComputedStyle({ + width: '200px', + }); + }); + + it('should use defaultTheme if no theme is provided', () => { + const Div = styled('div')` + width: ${(props) => props.theme.spacing(1)}; + `; + + const { container } = render(
Test
); + + expect(container.firstChild).toHaveComputedStyle({ + width: '8px', + }); + }); + + describe('dynamic styles', () => { + it('can adapt styles to props', () => { + const Div = styled('div')` + font-size: ${(props) => props.scale * 8}px; + padding-left: ${(props) => props.scale * 2}px; + `; + render(
); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + fontSize: '32px', + paddingLeft: '8px', + }); + }); + }); + + describe('sx prop', () => { + it('should apply color prop to theme.sys.color if available', function test() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render(
); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + color: 'rgb(179, 38, 30)', + }); + }); + it('should apply color prop to theme.ref.palette if available', function test() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render(
); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + color: 'rgb(242, 184, 181)', + }); + }); + it('should apply bgcolor prop to theme.sys.color if available', function test() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render(
); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + backgroundColor: 'rgb(179, 38, 30)', + }); + }); + it('should apply bgcolor prop to theme.ref.palette if available', function test() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render(
); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + backgroundColor: 'rgb(242, 184, 181)', + }); + }); + it('should apply backgroundColor prop to theme.sys.color if available', function test() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render(
); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + backgroundColor: 'rgb(179, 38, 30)', + }); + }); + it('should apply backgroundColor prop to theme.ref.palette if available', function test() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render(
); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + backgroundColor: 'rgb(242, 184, 181)', + }); + }); + it('should apply border*Color props to theme.sys.color if available', function test() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render( +
, + ); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + borderTopColor: 'rgb(179, 38, 30)', + borderBottomColor: 'rgb(179, 38, 30)', + borderLeftColor: 'rgb(179, 38, 30)', + borderRightColor: 'rgb(179, 38, 30)', + }); + }); + it('should apply border*Color props to theme.ref.palette if available', function test() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render( +
, + ); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + borderTopColor: 'rgb(242, 184, 181)', + borderBottomColor: 'rgb(242, 184, 181)', + borderLeftColor: 'rgb(242, 184, 181)', + borderRightColor: 'rgb(242, 184, 181)', + }); + }); + it('should apply borderColor props to theme.sys.color if available', function test() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render(
); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + borderTopColor: 'rgb(179, 38, 30)', + borderBottomColor: 'rgb(179, 38, 30)', + borderLeftColor: 'rgb(179, 38, 30)', + borderRightColor: 'rgb(179, 38, 30)', + }); + }); + it('should apply borderColor props to theme.ref.palette if available', function test() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render(
); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + borderTopColor: 'rgb(242, 184, 181)', + borderBottomColor: 'rgb(242, 184, 181)', + borderLeftColor: 'rgb(242, 184, 181)', + borderRightColor: 'rgb(242, 184, 181)', + }); + }); + }); +}); diff --git a/packages/mui-material-next/src/styles/styled.ts b/packages/mui-material-next/src/styles/styled.ts index 2e8f6c5a463872..f0cccfa63f3c13 100644 --- a/packages/mui-material-next/src/styles/styled.ts +++ b/packages/mui-material-next/src/styles/styled.ts @@ -1,8 +1,7 @@ import { createStyled } from '@mui/system'; import { Theme } from './Theme.types'; import defaultTheme from './defaultTheme'; -import styleFunctionSx from './styleFunctionSx'; -const styled = createStyled({ defaultTheme, styleFunctionSx }); +const styled = createStyled({ defaultTheme }); export default styled; diff --git a/packages/mui-material-next/src/styles/sxConfig.ts b/packages/mui-material-next/src/styles/sxConfig.ts new file mode 100644 index 00000000000000..eb2bc0efa2743d --- /dev/null +++ b/packages/mui-material-next/src/styles/sxConfig.ts @@ -0,0 +1,64 @@ +import { getPath, handleBreakpoints, SxConfig, unstable_defaultSxConfig } from '@mui/system'; + +interface PaletteStyleOptions { + prop: string; + cssProperty?: string | boolean; +} + +function createPaletteStyle(options: PaletteStyleOptions = { prop: 'color' }) { + const { prop, cssProperty = options.prop } = options; + + const fn = (props: Record) => { + if (props[prop] == null) { + return null; + } + + const propValue: any = props[prop]; + const theme = props.theme; + + const styleFromPropValue = (propValueFinal: any) => { + const value = + getPath(theme, `sys.color.${propValueFinal}`, true) || + getPath(theme, `ref.palette.${propValueFinal}`, true) || + getPath(theme, `palette.${propValueFinal}`, true) || + propValueFinal; + + return { + [cssProperty as string]: value, + }; + }; + + return handleBreakpoints(props, propValue, styleFromPropValue); + }; + return fn; +} + +const sxConfig: SxConfig = { + ...unstable_defaultSxConfig, + color: { + style: createPaletteStyle({ prop: 'color' }), + }, + bgcolor: { + style: createPaletteStyle({ prop: 'bgcolor', cssProperty: 'backgroundColor' }), + }, + backgroundColor: { + style: createPaletteStyle({ prop: 'backgroundColor', cssProperty: 'backgroundColor' }), + }, + borderColor: { + style: createPaletteStyle({ prop: 'borderColor' }), + }, + borderTopColor: { + style: createPaletteStyle({ prop: 'borderTopColor' }), + }, + borderBottomColor: { + style: createPaletteStyle({ prop: 'borderBottomColor' }), + }, + borderLeftColor: { + style: createPaletteStyle({ prop: 'borderLeftColor' }), + }, + borderRightColor: { + style: createPaletteStyle({ prop: 'borderRightColor' }), + }, +}; + +export default sxConfig; diff --git a/packages/mui-material/src/styles/CssVarsProvider.tsx b/packages/mui-material/src/styles/CssVarsProvider.tsx index f45fd6ec66bd77..3a6b6d2e0e3840 100644 --- a/packages/mui-material/src/styles/CssVarsProvider.tsx +++ b/packages/mui-material/src/styles/CssVarsProvider.tsx @@ -1,5 +1,12 @@ -import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system'; -import experimental_extendTheme, { SupportedColorScheme } from './experimental_extendTheme'; +import { + unstable_createCssVarsProvider as createCssVarsProvider, + SxProps, + unstable_styleFunctionSx as styleFunctionSx, +} from '@mui/system'; +import experimental_extendTheme, { + SupportedColorScheme, + CssVarsTheme, +} from './experimental_extendTheme'; import createTypography from './createTypography'; import excludeVariablesFromRoot from './excludeVariablesFromRoot'; @@ -25,6 +32,13 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = typography: createTypography(theme.palette, theme.typography), }; + newTheme.unstable_sx = function sx(props: SxProps) { + return styleFunctionSx({ + sx: props, + theme: this, + }); + }; + return newTheme; }, shouldSkipGeneratingVar, diff --git a/packages/mui-material/src/styles/createTheme.d.ts b/packages/mui-material/src/styles/createTheme.d.ts index e9b8fd92cb2084..ef8cb895b1fb14 100644 --- a/packages/mui-material/src/styles/createTheme.d.ts +++ b/packages/mui-material/src/styles/createTheme.d.ts @@ -1,4 +1,10 @@ -import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme } from '@mui/system'; +import { + ThemeOptions as SystemThemeOptions, + Theme as SystemTheme, + SxProps, + CSSObject, + SxConfig, +} from '@mui/system'; import { Mixins, MixinsOptions } from './createMixins'; import { Palette, PaletteOptions } from './createPalette'; import { Typography, TypographyOptions } from './createTypography'; @@ -16,6 +22,7 @@ export interface ThemeOptions extends Omit { typography?: TypographyOptions | ((palette: Palette) => TypographyOptions); zIndex?: ZIndexOptions; unstable_strictMode?: boolean; + unstable_sxConfig?: SxConfig; } interface BaseTheme extends SystemTheme { @@ -36,6 +43,8 @@ export {}; */ export interface Theme extends BaseTheme { components?: Components; + unstable_sx: (props: SxProps) => CSSObject; + unstable_sxConfig: SxConfig; } /** diff --git a/packages/mui-material/src/styles/createTheme.js b/packages/mui-material/src/styles/createTheme.js index 18f999af86aeca..0073130a2a8070 100644 --- a/packages/mui-material/src/styles/createTheme.js +++ b/packages/mui-material/src/styles/createTheme.js @@ -1,5 +1,9 @@ import { deepmerge } from '@mui/utils'; -import { createTheme as systemCreateTheme } from '@mui/system'; +import { + createTheme as systemCreateTheme, + unstable_defaultSxConfig as defaultSxConfig, + unstable_styleFunctionSx as styleFunctionSx, +} from '@mui/system'; import MuiError from '@mui/utils/macros/MuiError.macro'; import generateUtilityClass from '../generateUtilityClass'; import createMixins from './createMixins'; @@ -104,6 +108,17 @@ function createTheme(options = {}, ...args) { }); } + muiTheme.unstable_sxConfig = { + ...defaultSxConfig, + ...other?.unstable_sxConfig, + }; + muiTheme.unstable_sx = function sx(props) { + return styleFunctionSx({ + sx: props, + theme: this, + }); + }; + return muiTheme; } diff --git a/packages/mui-material/src/styles/experimental_extendTheme.d.ts b/packages/mui-material/src/styles/experimental_extendTheme.d.ts index 3ade54bca13098..2fe728b1be0ed8 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.d.ts +++ b/packages/mui-material/src/styles/experimental_extendTheme.d.ts @@ -1,5 +1,6 @@ /* eslint-disable @typescript-eslint/naming-convention */ import { OverridableStringUnion } from '@mui/types'; +import { SxConfig, SxProps, CSSObject } from '@mui/system'; import { ThemeOptions, Theme } from './createTheme'; import { Palette, PaletteOptions } from './createPalette'; import { Shadows } from './shadows'; @@ -401,6 +402,8 @@ export interface CssVarsTheme extends ColorSystem { shadows: Theme['shadows']; mixins: Theme['mixins']; zIndex: Theme['zIndex']; + unstable_sxConfig: SxConfig; + unstable_sx: (props: SxProps) => CSSObject; } /** diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index b86ac72cb0bd55..6dad1260415650 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -6,6 +6,8 @@ import { private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, unstable_createGetCssVar as systemCreateGetCssVar, + unstable_defaultSxConfig as defaultSxConfig, + unstable_styleFunctionSx as styleFunctionSx, } from '@mui/system'; import createThemeWithoutVars from './createTheme'; import getOverlayAlpha from './getOverlayAlpha'; @@ -390,5 +392,16 @@ export default function extendTheme(options = {}, ...args) { theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme); + theme.unstable_sxConfig = { + ...defaultSxConfig, + ...input?.unstable_sxConfig, + }; + theme.unstable_sx = function sx(props) { + return styleFunctionSx({ + sx: props, + theme: this, + }); + }; + return theme; } diff --git a/packages/mui-material/src/styles/index.d.ts b/packages/mui-material/src/styles/index.d.ts index bb2e23b2f89e26..f7d1a625424649 100644 --- a/packages/mui-material/src/styles/index.d.ts +++ b/packages/mui-material/src/styles/index.d.ts @@ -64,7 +64,6 @@ export { ColorObject, StyledEngineProvider, SxProps, - experimental_sx, } from '@mui/system'; export { default as useTheme } from './useTheme'; export { default as useThemeProps } from './useThemeProps'; diff --git a/packages/mui-material/src/styles/index.js b/packages/mui-material/src/styles/index.js index 011245f31907b7..c87fa88993319e 100644 --- a/packages/mui-material/src/styles/index.js +++ b/packages/mui-material/src/styles/index.js @@ -13,7 +13,6 @@ export { lighten, css, keyframes, - experimental_sx, } from '@mui/system'; export { default as createTheme, createMuiTheme } from './createTheme'; export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictModeTheme'; diff --git a/packages/mui-material/src/styles/index.spec.ts b/packages/mui-material/src/styles/index.spec.ts index 537faa39dadef5..fc1e9f35054f10 100644 --- a/packages/mui-material/src/styles/index.spec.ts +++ b/packages/mui-material/src/styles/index.spec.ts @@ -1,25 +1,26 @@ -import { experimental_sx as sx, styled, createTheme } from '@mui/material/styles'; +import { styled, createTheme } from '@mui/material/styles'; -// Can use the experimental_sx in the styled() utility -const Test = styled('div')( - sx({ +// Can use the unstable_sx in the styled() utility +const Test = styled('div')(({ theme }) => + theme.unstable_sx({ color: 'primary.main', bgcolor: 'primary.light', m: 2, }), ); -// Can use the experimental_sx in the theme's variants +// Can use the unstable_sx in the theme's variants const customTheme = createTheme({ components: { MuiButton: { variants: [ { props: {}, - style: sx({ - m: 2, - p: 1, - }), + style: ({ theme }) => + theme.unstable_sx({ + m: 2, + p: 1, + }), }, ], }, diff --git a/packages/mui-material/src/styles/styled.spec.tsx b/packages/mui-material/src/styles/styled.spec.tsx index ecf22af2ef8d4f..5a15be60f0b7e0 100644 --- a/packages/mui-material/src/styles/styled.spec.tsx +++ b/packages/mui-material/src/styles/styled.spec.tsx @@ -1,11 +1,5 @@ import * as React from 'react'; -import { - styled, - css, - ThemeProvider, - createTheme, - experimental_sx as sx, -} from '@mui/material/styles'; +import { styled, css, ThemeProvider, createTheme } from '@mui/material/styles'; const Box = styled('div')(({ theme }) => ({ color: theme.palette.primary.main, @@ -140,13 +134,14 @@ function Button({ mark: (props) => ({ ...(props['data-index'] === 0 && {}), }), - thumb: sx({ - p: 1, - }), - track: ({ ownerState }) => [ - sx({ height: 10 }), + thumb: ({ theme }) => + theme.unstable_sx({ + p: 1, + }), + track: ({ ownerState, theme }) => [ + theme.unstable_sx({ height: 10 }), ownerState.orientation === 'vertical' && - sx({ + theme.unstable_sx({ my: 2, }), ], @@ -159,7 +154,3 @@ function Button({ Hello ; - -/** - * ============================================================ - */ diff --git a/packages/mui-system/src/borders.js b/packages/mui-system/src/borders.js index 18f3360ca81e8a..7ed3d41588fa1c 100644 --- a/packages/mui-system/src/borders.js +++ b/packages/mui-system/src/borders.js @@ -4,7 +4,7 @@ import compose from './compose'; import { createUnaryUnit, getValue } from './spacing'; import { handleBreakpoints } from './breakpoints'; -function getBorder(value) { +export function borderTransform(value) { if (typeof value !== 'number') { return value; } @@ -15,31 +15,31 @@ function getBorder(value) { export const border = style({ prop: 'border', themeKey: 'borders', - transform: getBorder, + transform: borderTransform, }); export const borderTop = style({ prop: 'borderTop', themeKey: 'borders', - transform: getBorder, + transform: borderTransform, }); export const borderRight = style({ prop: 'borderRight', themeKey: 'borders', - transform: getBorder, + transform: borderTransform, }); export const borderBottom = style({ prop: 'borderBottom', themeKey: 'borders', - transform: getBorder, + transform: borderTransform, }); export const borderLeft = style({ prop: 'borderLeft', themeKey: 'borders', - transform: getBorder, + transform: borderTransform, }); export const borderColor = style({ diff --git a/packages/mui-system/src/createBox.d.ts b/packages/mui-system/src/createBox.d.ts index cdf0123ddde8b9..707fd655467278 100644 --- a/packages/mui-system/src/createBox.d.ts +++ b/packages/mui-system/src/createBox.d.ts @@ -1,9 +1,7 @@ import Box from './Box'; -import styleFunctionSx from './styleFunctionSx'; export default function createBox(options?: { defaultTheme: object; defaultClassName?: string; generateClassName?: (componentName: string) => string; - styleFunctionSx?: typeof styleFunctionSx; }): typeof Box; diff --git a/packages/mui-system/src/createBox.js b/packages/mui-system/src/createBox.js index a47792ad6df652..080b7df08c5e91 100644 --- a/packages/mui-system/src/createBox.js +++ b/packages/mui-system/src/createBox.js @@ -1,16 +1,11 @@ import * as React from 'react'; import clsx from 'clsx'; import styled from '@mui/styled-engine'; -import defaultStyleFunctionSx, { extendSxProp } from './styleFunctionSx'; +import styleFunctionSx, { extendSxProp } from './styleFunctionSx'; import useTheme from './useTheme'; export default function createBox(options = {}) { - const { - defaultTheme, - defaultClassName = 'MuiBox-root', - generateClassName, - styleFunctionSx = defaultStyleFunctionSx, - } = options; + const { defaultTheme, defaultClassName = 'MuiBox-root', generateClassName } = options; const BoxRoot = styled('div', { shouldForwardProp: (prop) => prop !== 'theme' && prop !== 'sx' && prop !== 'as', })(styleFunctionSx); diff --git a/packages/mui-system/src/createStyled.js b/packages/mui-system/src/createStyled.js index 8f5938fad48c17..679dd95d7c3f04 100644 --- a/packages/mui-system/src/createStyled.js +++ b/packages/mui-system/src/createStyled.js @@ -3,7 +3,7 @@ import styledEngineStyled, { internal_processStyles as processStyles } from '@mu import { getDisplayName } from '@mui/utils'; import createTheme from './createTheme'; import propsToClassKey from './propsToClassKey'; -import defaultStyleFunctionSx from './styleFunctionSx'; +import styleFunctionSx from './styleFunctionSx'; function isEmpty(obj) { return Object.keys(obj).length === 0; @@ -81,7 +81,6 @@ export default function createStyled(input = {}) { defaultTheme = systemDefaultTheme, rootShouldForwardProp = shouldForwardProp, slotShouldForwardProp = shouldForwardProp, - styleFunctionSx = defaultStyleFunctionSx, } = input; const systemSx = (props) => { diff --git a/packages/mui-system/src/createStyled.test.js b/packages/mui-system/src/createStyled.test.js index 05f3c9913d8b03..833ed5b735aad9 100644 --- a/packages/mui-system/src/createStyled.test.js +++ b/packages/mui-system/src/createStyled.test.js @@ -4,7 +4,6 @@ import { spy } from 'sinon'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import { createRenderer } from 'test/utils'; import createStyled from './createStyled'; -import sx from './sx'; describe('createStyled', () => { const { render } = createRenderer(); @@ -294,12 +293,13 @@ describe('createStyled', () => { components: { MuiButton: { styleOverrides: { - root: sx({ - pt: 10, - }), - icon: ({ ownerState }) => [ + root: ({ theme }) => + theme.unstable_sx({ + pt: 10, + }), + icon: ({ ownerState, theme }) => [ ownerState.color === 'primary' && - sx({ + theme.unstable_sx({ mr: 10, }), ], diff --git a/packages/mui-system/src/createTheme/createTheme.d.ts b/packages/mui-system/src/createTheme/createTheme.d.ts index f32a14211b791e..8de5e3c8d6340e 100644 --- a/packages/mui-system/src/createTheme/createTheme.d.ts +++ b/packages/mui-system/src/createTheme/createTheme.d.ts @@ -1,6 +1,8 @@ +import { CSSObject } from '@mui/styled-engine'; import { Breakpoints, BreakpointsOptions } from './createBreakpoints'; import { Shape, ShapeOptions } from './shape'; import { Spacing, SpacingOptions } from './createSpacing'; +import { SxConfig, SxProps } from '../styleFunctionSx'; export { Breakpoint, BreakpointOverrides } from './createBreakpoints'; @@ -18,6 +20,7 @@ export interface ThemeOptions { components?: Record; typography?: unknown; zIndex?: Record; + unstable_sxConfig?: SxConfig; } export interface Theme { @@ -32,6 +35,8 @@ export interface Theme { mixins?: unknown; typography?: unknown; zIndex?: unknown; + unstable_sxConfig: SxConfig; + unstable_sx: (props: SxProps) => CSSObject; } /** diff --git a/packages/mui-system/src/createTheme/createTheme.js b/packages/mui-system/src/createTheme/createTheme.js index 079979a4af01e1..2cb236a1e2ac28 100644 --- a/packages/mui-system/src/createTheme/createTheme.js +++ b/packages/mui-system/src/createTheme/createTheme.js @@ -2,6 +2,8 @@ import { deepmerge } from '@mui/utils'; import createBreakpoints from './createBreakpoints'; import shape from './shape'; import createSpacing from './createSpacing'; +import styleFunctionSx from '../styleFunctionSx/styleFunctionSx'; +import defaultSxConfig from '../styleFunctionSx/defaultSxConfig'; function createTheme(options = {}, ...args) { const { @@ -29,6 +31,17 @@ function createTheme(options = {}, ...args) { muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme); + muiTheme.unstable_sxConfig = { + ...defaultSxConfig, + ...other?.unstable_sxConfig, + }; + muiTheme.unstable_sx = function sx(props) { + return styleFunctionSx({ + sx: props, + theme: this, + }); + }; + return muiTheme; } diff --git a/packages/mui-system/src/sx/sx.test.js b/packages/mui-system/src/createTheme/createTheme.test.js similarity index 85% rename from packages/mui-system/src/sx/sx.test.js rename to packages/mui-system/src/createTheme/createTheme.test.js index 2e14aa33e47a4e..c86c8911ccae13 100644 --- a/packages/mui-system/src/sx/sx.test.js +++ b/packages/mui-system/src/createTheme/createTheme.test.js @@ -1,9 +1,9 @@ import * as React from 'react'; import { expect } from 'chai'; import { createRenderer } from 'test/utils'; -import { experimental_sx as sx, styled, ThemeProvider } from '@mui/system'; +import { createTheme, styled, ThemeProvider } from '@mui/system'; -describe('sx', () => { +describe('createTheme', () => { const { render } = createRenderer(); const breakpointsValues = { xs: 0, @@ -15,7 +15,7 @@ describe('sx', () => { const round = (value) => Math.round(value * 1e5) / 1e5; - const theme = { + const theme = createTheme({ spacing: (val) => `${val * 10}px`, breakpoints: { keys: ['xs', 'sm', 'md', 'lg', 'xl'], @@ -52,7 +52,7 @@ describe('sx', () => { lineHeight: 1.43, }, }, - }; + }); describe('system', () => { it('resolves system when used inside styled()', function test() { @@ -60,8 +60,8 @@ describe('sx', () => { this.skip(); } - const Test = styled('div')( - sx({ + const Test = styled('div')(({ theme: t }) => + t.unstable_sx({ color: 'primary.main', bgcolor: 'secondary.main', m: 2, @@ -105,22 +105,23 @@ describe('sx', () => { variants: [ { props: {}, // all props - style: sx({ - color: 'primary.main', - bgcolor: 'secondary.main', - m: 2, - p: 1, - fontSize: 'fontSize', - maxWidth: 'sm', - }), + style: ({ theme: t }) => + t.unstable_sx({ + color: 'primary.main', + bgcolor: 'secondary.main', + m: 2, + p: 1, + fontSize: 'fontSize', + maxWidth: 'sm', + }), }, ], }, }, }; - const Test = styled('div', { name: 'MuiTest', slot: 'Root' })( - sx({ + const Test = styled('div', { name: 'MuiTest', slot: 'Root' })(({ theme: t }) => + t.unstable_sx({ color: 'primary.main', bgcolor: 'secondary.main', m: 2, @@ -154,8 +155,8 @@ describe('sx', () => { }); it('does not throw if used without ThemeProvider', function test() { - const Test = styled('div')( - sx({ + const Test = styled('div')(({ theme: t }) => + t.unstable_sx({ color: 'primary.main', bgcolor: 'secondary.main', m: 2, diff --git a/packages/mui-system/src/index.d.ts b/packages/mui-system/src/index.d.ts index a89703928d4a5a..2f2a9d6b838bdb 100644 --- a/packages/mui-system/src/index.d.ts +++ b/packages/mui-system/src/index.d.ts @@ -119,11 +119,10 @@ export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, + unstable_defaultSxConfig, } from './styleFunctionSx'; export * from './styleFunctionSx'; -export { default as experimental_sx } from './sx'; - export { default as Box } from './Box'; export * from './Box'; diff --git a/packages/mui-system/src/index.js b/packages/mui-system/src/index.js index 62c21b57d11bef..a3bf2528a8cc89 100644 --- a/packages/mui-system/src/index.js +++ b/packages/mui-system/src/index.js @@ -29,8 +29,8 @@ export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, + unstable_defaultSxConfig, } from './styleFunctionSx'; -export { default as experimental_sx } from './sx'; export { default as unstable_getThemeValue } from './getThemeValue'; export { default as Box } from './Box'; export { default as createBox } from './createBox'; diff --git a/packages/mui-system/src/palette.js b/packages/mui-system/src/palette.js index 8b9d7e83944ac7..10a49c9ffb3d26 100644 --- a/packages/mui-system/src/palette.js +++ b/packages/mui-system/src/palette.js @@ -1,7 +1,7 @@ import style from './style'; import compose from './compose'; -function transform(value, userValue) { +export function paletteTransform(value, userValue) { if (userValue === 'grey') { return userValue; } @@ -11,20 +11,20 @@ function transform(value, userValue) { export const color = style({ prop: 'color', themeKey: 'palette', - transform, + transform: paletteTransform, }); export const bgcolor = style({ prop: 'bgcolor', cssProperty: 'backgroundColor', themeKey: 'palette', - transform, + transform: paletteTransform, }); export const backgroundColor = style({ prop: 'backgroundColor', themeKey: 'palette', - transform, + transform: paletteTransform, }); const palette = compose(color, bgcolor, backgroundColor); diff --git a/packages/mui-system/src/sizing.js b/packages/mui-system/src/sizing.js index 57e75c9cf7bcc9..0454dfb1702845 100644 --- a/packages/mui-system/src/sizing.js +++ b/packages/mui-system/src/sizing.js @@ -2,13 +2,13 @@ import style from './style'; import compose from './compose'; import { handleBreakpoints, values as breakpointsValues } from './breakpoints'; -function transform(value) { +export function sizingTransform(value) { return value <= 1 && value !== 0 ? `${value * 100}%` : value; } export const width = style({ prop: 'width', - transform, + transform: sizingTransform, }); export const maxWidth = (props) => { @@ -17,7 +17,7 @@ export const maxWidth = (props) => { const breakpoint = props.theme?.breakpoints?.values?.[propValue] || breakpointsValues[propValue]; return { - maxWidth: breakpoint || transform(propValue), + maxWidth: breakpoint || sizingTransform(propValue), }; }; return handleBreakpoints(props, props.maxWidth, styleFromPropValue); @@ -28,34 +28,34 @@ maxWidth.filterProps = ['maxWidth']; export const minWidth = style({ prop: 'minWidth', - transform, + transform: sizingTransform, }); export const height = style({ prop: 'height', - transform, + transform: sizingTransform, }); export const maxHeight = style({ prop: 'maxHeight', - transform, + transform: sizingTransform, }); export const minHeight = style({ prop: 'minHeight', - transform, + transform: sizingTransform, }); export const sizeWidth = style({ prop: 'size', cssProperty: 'width', - transform, + transform: sizingTransform, }); export const sizeHeight = style({ prop: 'size', cssProperty: 'height', - transform, + transform: sizingTransform, }); export const boxSizing = style({ diff --git a/packages/mui-system/src/spacing.js b/packages/mui-system/src/spacing.js index 9307f5b5c808c5..f22063fdfd1229 100644 --- a/packages/mui-system/src/spacing.js +++ b/packages/mui-system/src/spacing.js @@ -44,7 +44,7 @@ const getCssProperties = memoize((prop) => { return Array.isArray(direction) ? direction.map((dir) => property + dir) : [property + direction]; }); -const marginKeys = [ +export const marginKeys = [ 'm', 'mt', 'mr', @@ -67,7 +67,7 @@ const marginKeys = [ 'marginBlockEnd', ]; -const paddingKeys = [ +export const paddingKeys = [ 'p', 'pt', 'pr', diff --git a/packages/mui-system/src/style.d.ts b/packages/mui-system/src/style.d.ts index a631aa6c57d4a0..2f004defba6e59 100644 --- a/packages/mui-system/src/style.d.ts +++ b/packages/mui-system/src/style.d.ts @@ -1,6 +1,11 @@ import { CSSObject } from '@mui/styled-engine'; import { StyleFunction } from './Box'; +export type TransformFunction = ( + cssValue: unknown, + userValue: unknown, +) => number | string | React.CSSProperties | CSSObject; + export interface StyleOptions { cssProperty?: PropKey | keyof React.CSSProperties | false; prop: PropKey; @@ -8,18 +13,15 @@ export interface StyleOptions { * dot access in `Theme` */ themeKey?: string; - transform?: ( - cssValue: unknown, - userValue: unknown, - ) => number | string | React.CSSProperties | CSSObject; + transform?: TransformFunction; } export function style( options: StyleOptions, ): StyleFunction<{ [K in PropKey]?: unknown } & { theme?: Theme }> & { filterProps: string[] }; export function getPath(obj: T, path: string | undefined, checkVars?: boolean): null | unknown; export function getStyleValue( - themeMapping: object | ((val: any) => any), - transform?: (val: any, userVal: any) => any, - propValueFinal?: any, - userValue?: any, + themeMapping: object | ((arg: any) => any), + transform: TransformFunction | null, + propValueFinal: unknown, + userValue?: unknown, ): any; diff --git a/packages/mui-system/src/style.js b/packages/mui-system/src/style.js index a07880366b47f2..b88928a526909e 100644 --- a/packages/mui-system/src/style.js +++ b/packages/mui-system/src/style.js @@ -36,7 +36,7 @@ export function getStyleValue(themeMapping, transform, propValueFinal, userValue } if (transform) { - value = transform(value, userValue); + value = transform(value, userValue, themeMapping); } return value; diff --git a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.d.ts b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.d.ts new file mode 100644 index 00000000000000..7b65306ec8afb5 --- /dev/null +++ b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.d.ts @@ -0,0 +1,20 @@ +import { StyleFunction } from '../Box'; +import { TransformFunction } from '../style'; + +type SimpleStyleFunction = StyleFunction>>; + +export interface SxConfigRecord { + cssProperty?: keyof React.CSSProperties | false; + /** + * dot access in `Theme` + */ + themeKey?: string; + transform?: TransformFunction; + style?: SimpleStyleFunction; +} + +export type SxConfig = Record; + +declare const defaultSxConfig: SxConfig; + +export default defaultSxConfig; diff --git a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js new file mode 100644 index 00000000000000..7087c424593b5d --- /dev/null +++ b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js @@ -0,0 +1,306 @@ +import { padding, margin } from '../spacing'; +import { borderRadius, borderTransform } from '../borders'; +import { gap, rowGap, columnGap } from '../cssGrid'; +import { paletteTransform } from '../palette'; +import { maxWidth, sizingTransform } from '../sizing'; + +const defaultSxConfig = { + // borders + border: { + themeKey: 'borders', + transform: borderTransform, + }, + + borderTop: { + themeKey: 'borders', + transform: borderTransform, + }, + + borderRight: { + themeKey: 'borders', + transform: borderTransform, + }, + + borderBottom: { + themeKey: 'borders', + transform: borderTransform, + }, + + borderLeft: { + themeKey: 'borders', + transform: borderTransform, + }, + + borderColor: { + themeKey: 'palette', + }, + + borderTopColor: { + themeKey: 'palette', + }, + + borderRightColor: { + themeKey: 'palette', + }, + + borderBottomColor: { + themeKey: 'palette', + }, + + borderLeftColor: { + themeKey: 'palette', + }, + + borderRadius: { + themeKey: 'shape.borderRadius', + style: borderRadius, + }, + + // palette + color: { + themeKey: 'palette', + transform: paletteTransform, + }, + bgcolor: { + themeKey: 'palette', + cssProperty: 'backgroundColor', + transform: paletteTransform, + }, + backgroundColor: { + themeKey: 'palette', + transform: paletteTransform, + }, + + // spacing + p: { + style: padding, + }, + pt: { + style: padding, + }, + pr: { + style: padding, + }, + pb: { + style: padding, + }, + pl: { + style: padding, + }, + px: { + style: padding, + }, + py: { + style: padding, + }, + padding: { + style: padding, + }, + paddingTop: { + style: padding, + }, + paddingRight: { + style: padding, + }, + paddingBottom: { + style: padding, + }, + paddingLeft: { + style: padding, + }, + paddingX: { + style: padding, + }, + paddingY: { + style: padding, + }, + paddingInline: { + style: padding, + }, + paddingInlineStart: { + style: padding, + }, + paddingInlineEnd: { + style: padding, + }, + paddingBlock: { + style: padding, + }, + paddingBlockStart: { + style: padding, + }, + paddingBlockEnd: { + style: padding, + }, + + m: { + style: margin, + }, + mt: { + style: margin, + }, + mr: { + style: margin, + }, + mb: { + style: margin, + }, + ml: { + style: margin, + }, + mx: { + style: margin, + }, + my: { + style: margin, + }, + margin: { + style: margin, + }, + marginTop: { + style: margin, + }, + marginRight: { + style: margin, + }, + marginBottom: { + style: margin, + }, + marginLeft: { + style: margin, + }, + marginX: { + style: margin, + }, + marginY: { + style: margin, + }, + marginInline: { + style: margin, + }, + marginInlineStart: { + style: margin, + }, + marginInlineEnd: { + style: margin, + }, + marginBlock: { + style: margin, + }, + marginBlockStart: { + style: margin, + }, + marginBlockEnd: { + style: margin, + }, + + // display + displayPrint: { + cssProperty: false, + transform: (value) => ({ + '@media print': { + display: value, + }, + }), + }, + display: {}, + overflow: {}, + textOverflow: {}, + visibility: {}, + whiteSpace: {}, + + // flexbox + flexBasis: {}, + flexDirection: {}, + flexWrap: {}, + justifyContent: {}, + alignItems: {}, + alignContent: {}, + order: {}, + flex: {}, + flexGrow: {}, + flexShrink: {}, + alignSelf: {}, + justifyItems: {}, + justifySelf: {}, + + // grid + gap: { + style: gap, + }, + rowGap: { + style: rowGap, + }, + columnGap: { + style: columnGap, + }, + gridColumn: {}, + gridRow: {}, + gridAutoFlow: {}, + gridAutoColumns: {}, + gridAutoRows: {}, + gridTemplateColumns: {}, + gridTemplateRows: {}, + gridTemplateAreas: {}, + gridArea: {}, + + // positions + position: {}, + zIndex: { + themeKey: 'zIndex', + }, + top: {}, + right: {}, + bottom: {}, + left: {}, + + // shadows + boxShadow: { + themeKey: 'shadows', + }, + + // sizing + width: { + transform: sizingTransform, + }, + maxWidth: { + style: maxWidth, + }, + minWidth: { + transform: sizingTransform, + }, + height: { + transform: sizingTransform, + }, + maxHeight: { + transform: sizingTransform, + }, + minHeight: { + transform: sizingTransform, + }, + boxSizing: {}, + + // typography + fontFamily: { + themeKey: 'typography', + }, + fontSize: { + themeKey: 'typography', + }, + fontStyle: { + themeKey: 'typography', + }, + fontWeight: { + themeKey: 'typography', + }, + letterSpacing: {}, + textTransform: {}, + lineHeight: {}, + textAlign: {}, + typography: { + cssProperty: false, + themeKey: 'typography', + }, +}; + +export default defaultSxConfig; diff --git a/packages/mui-system/src/styleFunctionSx/extendSxProp.js b/packages/mui-system/src/styleFunctionSx/extendSxProp.js index c01ed5046faa17..773172783f79c2 100644 --- a/packages/mui-system/src/styleFunctionSx/extendSxProp.js +++ b/packages/mui-system/src/styleFunctionSx/extendSxProp.js @@ -1,5 +1,5 @@ import { isPlainObject } from '@mui/utils'; -import { propToStyleFunction } from '../getThemeValue'; +import defaultSxConfig from './defaultSxConfig'; const splitProps = (props) => { const result = { @@ -7,8 +7,10 @@ const splitProps = (props) => { otherProps: {}, }; + const config = props?.theme?.unstable_sxConfig ?? defaultSxConfig; + Object.keys(props).forEach((prop) => { - if (propToStyleFunction[prop]) { + if (config[prop]) { result.systemProps[prop] = props[prop]; } else { result.otherProps[prop] = props[prop]; diff --git a/packages/mui-system/src/styleFunctionSx/index.d.ts b/packages/mui-system/src/styleFunctionSx/index.d.ts index 7dd890cdebd973..cfce74e073b682 100644 --- a/packages/mui-system/src/styleFunctionSx/index.d.ts +++ b/packages/mui-system/src/styleFunctionSx/index.d.ts @@ -6,4 +6,8 @@ export * from './OverwriteCSSProperties'; export * from './StandardCssProperties'; export { default as extendSxProp } from './extendSxProp'; + +export { default as unstable_defaultSxConfig } from './defaultSxConfig'; +export * from './defaultSxConfig'; + export * from './extendSxProp'; diff --git a/packages/mui-system/src/styleFunctionSx/index.js b/packages/mui-system/src/styleFunctionSx/index.js index ec677c0b0fa342..1b08c2e61dd050 100644 --- a/packages/mui-system/src/styleFunctionSx/index.js +++ b/packages/mui-system/src/styleFunctionSx/index.js @@ -1,3 +1,4 @@ export { default } from './styleFunctionSx'; export { unstable_createStyleFunctionSx } from './styleFunctionSx'; export { default as extendSxProp } from './extendSxProp'; +export { default as unstable_defaultSxConfig } from './defaultSxConfig'; diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.d.ts b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.d.ts index e86dcfc67e200e..929177b4cd99ee 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.d.ts +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.d.ts @@ -1,4 +1,5 @@ import * as CSS from 'csstype'; +import { CSSObject } from '@mui/styled-engine'; import { StandardCSSProperties } from './StandardCssProperties'; import { AliasesCSSProperties } from './AliasesCSSProperties'; import { OverwriteCSSProperties } from './OverwriteCSSProperties'; @@ -74,7 +75,7 @@ export type SxProps = >; export interface StyleFunctionSx { - (props: object): object; + (props: object): CSSObject; filterProps?: string[]; } diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js index 084b3550890a1e..c675671f7abc0b 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js @@ -1,10 +1,12 @@ +import { unstable_capitalize as capitalize } from '@mui/utils'; import merge from '../merge'; -import { styleFunctionMapping as defaultStyleFunctionMapping } from '../getThemeValue'; +import { getPath, getStyleValue as getValue } from '../style'; import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints, } from '../breakpoints'; +import defaultSxConfig from './defaultSxConfig'; function objectsHaveSameKeys(...objects) { const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []); @@ -17,31 +19,65 @@ function callIfFn(maybeFn, arg) { } // eslint-disable-next-line @typescript-eslint/naming-convention -export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultStyleFunctionMapping) { - const propToStyleFunction = Object.keys(styleFunctionMapping).reduce((acc, styleFnName) => { - styleFunctionMapping[styleFnName].filterProps.forEach((propName) => { - acc[propName] = styleFunctionMapping[styleFnName]; - }); - - return acc; - }, {}); - - function getThemeValue(prop, value, theme) { - const inputProps = { - [prop]: value, +export function unstable_createStyleFunctionSx() { + function getThemeValue(prop, val, theme, config) { + const props = { + [prop]: val, theme, }; - const styleFunction = propToStyleFunction[prop]; - return styleFunction ? styleFunction(inputProps) : { [prop]: value }; + const options = config[prop]; + + if (!options) { + return { [prop]: val }; + } + + const { cssProperty = prop, themeKey, transform, style } = options; + + if (val == null) { + return null; + } + + const themeMapping = getPath(theme, themeKey) || {}; + + if (style) { + return style(props); + } + + const styleFromPropValue = (propValueFinal) => { + let value = getValue(themeMapping, transform, propValueFinal); + + if (propValueFinal === value && typeof propValueFinal === 'string') { + // Haven't found value + value = getValue( + themeMapping, + transform, + `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, + propValueFinal, + ); + } + + if (cssProperty === false) { + return value; + } + + return { + [cssProperty]: value, + }; + }; + + return handleBreakpoints(props, val, styleFromPropValue); } function styleFunctionSx(props) { const { sx, theme = {} } = props || {}; + if (!sx) { return null; // Emotion & styled-components will neglect null } + const config = theme.unstable_sxConfig ?? defaultSxConfig; + /* * Receive `sxInput` as object or callback * and then recursively check keys & values to create media query object styles. @@ -67,8 +103,8 @@ export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultSty const value = callIfFn(sxObject[styleKey], theme); if (value !== null && value !== undefined) { if (typeof value === 'object') { - if (propToStyleFunction[styleKey]) { - css = merge(css, getThemeValue(styleKey, value, theme)); + if (config[styleKey]) { + css = merge(css, getThemeValue(styleKey, value, theme, config)); } else { const breakpointsValues = handleBreakpoints({ theme }, value, (x) => ({ [styleKey]: x, @@ -81,7 +117,7 @@ export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultSty } } } else { - css = merge(css, getThemeValue(styleKey, value, theme)); + css = merge(css, getThemeValue(styleKey, value, theme, config)); } } }); diff --git a/packages/mui-system/src/styled.test.js b/packages/mui-system/src/styled.test.js index 444aaa9bf1917c..995c4a7fabe95c 100644 --- a/packages/mui-system/src/styled.test.js +++ b/packages/mui-system/src/styled.test.js @@ -482,6 +482,47 @@ describe('styled', () => { }); }); + it('should resolve the theme.unstable_sx when used in an array styles', () => { + const TestComponent = styled('div')( + ({ theme: userTheme }) => + userTheme.unstable_sx({ + mt: 2, + }), + ({ theme: userTheme }) => + userTheme.unstable_sx({ + mb: 2, + }), + ); + const { container } = render( + + Test + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + marginTop: '16px', + marginBottom: '16px', + }); + }); + + it('should resolve the theme.unstable_sx when used in an pseudo object', () => { + const TestComponent = styled('div')(({ theme: userTheme }) => ({ + '&.test-classname': userTheme.unstable_sx({ + mt: 2, + }), + })); + + const { container } = render( + + Test + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + marginTop: '16px', + }); + }); + it('should respect the skipSx option', () => { const testOverridesResolver = (props, styles) => ({ ...styles.root, diff --git a/packages/mui-system/src/sx/index.d.ts b/packages/mui-system/src/sx/index.d.ts deleted file mode 100644 index 4232fe22d6b4bb..00000000000000 --- a/packages/mui-system/src/sx/index.d.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './sx'; diff --git a/packages/mui-system/src/sx/index.js b/packages/mui-system/src/sx/index.js deleted file mode 100644 index 4232fe22d6b4bb..00000000000000 --- a/packages/mui-system/src/sx/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './sx'; diff --git a/packages/mui-system/src/sx/sx.d.ts b/packages/mui-system/src/sx/sx.d.ts deleted file mode 100644 index d17929c4ee803a..00000000000000 --- a/packages/mui-system/src/sx/sx.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { CSSObject } from '@mui/styled-engine'; -import { SxProps } from '../styleFunctionSx'; - -export default function sx(styles: SxProps): CSSObject; diff --git a/packages/mui-system/src/sx/sx.js b/packages/mui-system/src/sx/sx.js deleted file mode 100644 index 770503fa5136e5..00000000000000 --- a/packages/mui-system/src/sx/sx.js +++ /dev/null @@ -1,7 +0,0 @@ -import styleFunctionSx from '../styleFunctionSx'; - -function sx(styles) { - return ({ theme }) => styleFunctionSx({ sx: styles, theme }); -} - -export default sx; diff --git a/packages/mui-system/src/sx/sx.spec.ts b/packages/mui-system/src/sx/sx.spec.ts deleted file mode 100644 index faca7d15ad7d7a..00000000000000 --- a/packages/mui-system/src/sx/sx.spec.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { experimental_sx as sx, styled } from '@mui/system'; - -// Can be used in the styled() utility -const Test = styled('div')( - sx({ - color: 'primary.main', - bgcolor: 'primary.light', - m: 2, - }), -); From 5bf70cc0c4fdc374e69ba40eba09fb473de95974 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Wed, 7 Dec 2022 09:20:31 +0100 Subject: [PATCH 13/15] [core] Support `only` and `skip` on `describeConformance` (and other MUI describes) (#35300) --- test/utils/createDescribe.ts | 31 ++++++++++ test/utils/describeConformance.tsx | 69 +++++++++++----------- test/utils/describeConformanceUnstyled.tsx | 15 ++--- test/utils/index.js | 1 + 4 files changed, 75 insertions(+), 41 deletions(-) create mode 100644 test/utils/createDescribe.ts diff --git a/test/utils/createDescribe.ts b/test/utils/createDescribe.ts new file mode 100644 index 00000000000000..bef9ed3af9e954 --- /dev/null +++ b/test/utils/createDescribe.ts @@ -0,0 +1,31 @@ +/* eslint-env mocha */ + +type MUIDescribe

= { + (...args: P): void; + + skip: (...args: P) => void; + only: (...args: P) => void; +}; +export default

( + message: string, + callback: (...args: P) => void, +): MUIDescribe

=> { + const muiDescribe = (...args: P) => { + describe(message, () => { + callback(...args); + }); + }; + + muiDescribe.skip = (...args: P) => { + describe.skip(message, () => { + callback(...args); + }); + }; + muiDescribe.only = (...args: P) => { + describe.only(message, () => { + callback(...args); + }); + }; + + return muiDescribe; +}; diff --git a/test/utils/describeConformance.tsx b/test/utils/describeConformance.tsx index 6d564a591b82bb..3b95ef49db4ab9 100644 --- a/test/utils/describeConformance.tsx +++ b/test/utils/describeConformance.tsx @@ -6,6 +6,7 @@ import { ThemeProvider as MDThemeProvider, createTheme } from '@mui/material/sty import { unstable_capitalize as capitalize } from '@mui/utils'; import ReactTestRenderer from 'react-test-renderer'; import createMount from './createMount'; +import createDescribe from './createDescribe'; import findOutermostIntrinsic from './findOutermostIntrinsic'; import { MuiRenderResult } from './createRenderer'; @@ -914,46 +915,46 @@ const fullSuite = { * Tests various aspects of a component that should be equal across MUI * components. */ -export default function describeConformance( +function describeConformance( minimalElement: React.ReactElement, getOptions: () => InputConformanceOptions, ) { - describe('MUI component API', () => { - const { - after: runAfterHook = () => {}, - only = Object.keys(fullSuite), - slots, - skip = [], - wrapMount, - } = getOptions(); - - let filteredTests = Object.keys(fullSuite).filter( - (testKey) => - only.indexOf(testKey) !== -1 && skip.indexOf(testKey as keyof typeof fullSuite) === -1, - ) as (keyof typeof fullSuite)[]; - - const slotBasedTests = ['slotsProp', 'slotPropsProp', 'slotPropsCallback']; - - if (!slots) { - // if `slots` are not defined, do not run tests that depend on them - filteredTests = filteredTests.filter((testKey) => !slotBasedTests.includes(testKey)); - } + const { + after: runAfterHook = () => {}, + only = Object.keys(fullSuite), + slots, + skip = [], + wrapMount, + } = getOptions(); - const baseMount = createMount(); - const mount = wrapMount !== undefined ? wrapMount(baseMount) : baseMount; + let filteredTests = Object.keys(fullSuite).filter( + (testKey) => + only.indexOf(testKey) !== -1 && skip.indexOf(testKey as keyof typeof fullSuite) === -1, + ) as (keyof typeof fullSuite)[]; - after(runAfterHook); + const slotBasedTests = ['slotsProp', 'slotPropsProp', 'slotPropsCallback']; - function getTestOptions(): ConformanceOptions { - return { - ...getOptions(), - mount, - }; - } + if (!slots) { + // if `slots` are not defined, do not run tests that depend on them + filteredTests = filteredTests.filter((testKey) => !slotBasedTests.includes(testKey)); + } - filteredTests.forEach((testKey) => { - const test = fullSuite[testKey]; - test(minimalElement, getTestOptions); - }); + const baseMount = createMount(); + const mount = wrapMount !== undefined ? wrapMount(baseMount) : baseMount; + + after(runAfterHook); + + function getTestOptions(): ConformanceOptions { + return { + ...getOptions(), + mount, + }; + } + + filteredTests.forEach((testKey) => { + const test = fullSuite[testKey]; + test(minimalElement, getTestOptions); }); } + +export default createDescribe('MUI component API', describeConformance); diff --git a/test/utils/describeConformanceUnstyled.tsx b/test/utils/describeConformanceUnstyled.tsx index 9f9c83578bf313..cc95c10c828c98 100644 --- a/test/utils/describeConformanceUnstyled.tsx +++ b/test/utils/describeConformanceUnstyled.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { MuiRenderResult, RenderOptions, screen } from './createRenderer'; +import createDescribe from './createDescribe'; import { ConformanceOptions, SlotTestingOptions, @@ -329,7 +330,7 @@ const fullSuite = { ownerStatePropagation: testOwnerStatePropagation, }; -export default function describeConformanceUnstyled( +function describeConformanceUnstyled( minimalElement: React.ReactElement, getOptions: () => UnstyledConformanceOptions, ) { @@ -340,12 +341,12 @@ export default function describeConformanceUnstyled( only.indexOf(testKey) !== -1 && skip.indexOf(testKey as keyof typeof fullSuite) === -1, ) as (keyof typeof fullSuite)[]; - describe('MUI unstyled component API', () => { - after(runAfterHook); + after(runAfterHook); - filteredTests.forEach((testKey) => { - const test = fullSuite[testKey]; - test(minimalElement, getOptions as any); - }); + filteredTests.forEach((testKey) => { + const test = fullSuite[testKey]; + test(minimalElement, getOptions as any); }); } + +export default createDescribe('MUI unstyled component API', describeConformanceUnstyled); diff --git a/test/utils/index.js b/test/utils/index.js index dfbf35520d1953..b5ead3436a0483 100644 --- a/test/utils/index.js +++ b/test/utils/index.js @@ -3,6 +3,7 @@ import * as React from 'react'; export * from './components'; export { default as describeConformance } from './describeConformance'; export { default as describeConformanceUnstyled } from './describeConformanceUnstyled'; +export { default as createDescribe } from './createDescribe'; export * from './createRenderer'; export { default as createMount } from './createMount'; export { default as findOutermostIntrinsic, wrapsIntrinsicElement } from './findOutermostIntrinsic'; From f646bcc3c76dd3745cf8f5c7de8b29f33de7f7cc Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Wed, 7 Dec 2022 12:14:47 +0100 Subject: [PATCH 14/15] [docs] Format feedback to add a link to the commented section (#35381) --- docs/src/modules/components/AppLayoutDocsFooter.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js index 8e07dd740b2704..5721325be287df 100644 --- a/docs/src/modules/components/AppLayoutDocsFooter.js +++ b/docs/src/modules/components/AppLayoutDocsFooter.js @@ -157,7 +157,9 @@ async function postFeedbackOnSlack(data) { `New comment ${rating === 1 ? '👍' : ''}${rating === 0 ? '👎' : ''}`, `>${comment.split('\n').join('\n>')}`, `sent from ${window.location.href}${ - commentedSection.text ? ` (from section ${commentedSection.text})` : '' + commentedSection.text + ? ` (from section <${window.location.origin}${window.location.pathname}#${commentedSection.hash}|${commentedSection.text})>` + : '' }`, ].join('\n\n'); From 845ac04d294a0a0eeec22bfb66535187194ac5b2 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 7 Dec 2022 17:30:10 +0000 Subject: [PATCH 15/15] [docs] Standardize the usage of callouts in the MUI Core docs (#35361) --- docs/data/base/components/portal/portal.md | 2 +- .../base/getting-started/overview/overview.md | 4 +- .../working-with-tailwind-css.md | 2 +- docs/data/joy/components/alert/alert.md | 6 +-- .../components/aspect-ratio/aspect-ratio.md | 4 +- .../components/autocomplete/autocomplete.md | 8 ++-- docs/data/joy/components/avatar/avatar.md | 6 +-- docs/data/joy/components/badge/badge.md | 4 +- .../joy/components/breadcrumbs/breadcrumbs.md | 2 +- docs/data/joy/components/button/button.md | 8 ++-- docs/data/joy/components/card/card.md | 12 ++--- docs/data/joy/components/checkbox/checkbox.md | 4 +- docs/data/joy/components/chip/chip.md | 2 +- .../circular-progress/circular-progress.md | 2 +- docs/data/joy/components/divider/divider.md | 4 +- .../linear-progress/linear-progress.md | 2 +- docs/data/joy/components/list/list.md | 6 +-- docs/data/joy/components/menu/menu.md | 2 +- docs/data/joy/components/modal/modal.md | 6 +-- docs/data/joy/components/radio/radio.md | 4 +- docs/data/joy/components/select/select.md | 10 ++--- docs/data/joy/components/slider/slider.md | 2 +- docs/data/joy/components/switch/switch.md | 2 +- docs/data/joy/components/tabs/tabs.md | 2 +- .../joy/components/typography/typography.md | 12 ++--- .../default-theme/default-theme.md | 2 +- .../theme-tokens/theme-tokens.md | 10 ++--- .../theme-typography/theme-typography.md | 4 +- .../themed-components/themed-components.md | 2 +- .../using-css-variables.md | 4 +- docs/data/joy/getting-started/usage/usage.md | 2 +- .../using-joy-ui-and-material-ui.md | 4 +- .../components/accordion/accordion.md | 1 - .../components/autocomplete/autocomplete.md | 8 ++-- docs/data/material/components/cards/cards.md | 2 +- .../components/checkboxes/checkboxes.md | 2 +- .../components/css-baseline/css-baseline.md | 3 +- .../material/components/dividers/dividers.md | 4 +- docs/data/material/components/grid/grid.md | 4 +- .../data/material/components/hidden/hidden.md | 4 +- docs/data/material/components/icons/icons.md | 4 +- .../material/components/masonry/masonry.md | 2 +- docs/data/material/components/modal/modal.md | 2 - .../components/pagination/pagination.md | 4 +- .../material/components/selects/selects.md | 2 +- .../material/components/steppers/steppers.md | 2 +- .../material/components/tooltips/tooltips.md | 2 +- .../use-media-query/use-media-query.md | 2 +- .../customization/dark-mode/dark-mode.md | 4 +- .../default-theme/default-theme.md | 6 +-- .../how-to-customize/how-to-customize.md | 10 ++--- .../theme-components/theme-components.md | 2 +- .../material/customization/theming/theming.md | 2 +- .../customization/typography/typography.md | 2 +- .../material/discover-more/roadmap/roadmap.md | 2 +- .../classname-generator.md | 4 +- .../css-theme-variables/customization.md | 10 ++--- .../css-theme-variables/migration.md | 4 +- .../css-theme-variables/usage.md | 6 +-- docs/data/material/getting-started/faq/faq.md | 4 +- .../getting-started/support/support.md | 4 +- .../guides/composition/composition.md | 2 +- .../content-security-policy.md | 2 +- .../interoperability/interoperability.md | 8 ++-- .../guides/localization/localization.md | 2 +- .../pickers-migration/pickers-migration.md | 2 +- .../guides/right-to-left/right-to-left.md | 2 +- docs/data/material/guides/routing/routing.md | 2 +- .../guides/styled-engine/styled-engine.md | 7 ++- .../understand-mui-packages.md | 2 +- .../migration-v4/migrating-from-jss.md | 6 +-- .../migration/migration-v4/migration-v4.md | 8 ++-- .../migration/migration-v4/troubleshooting.md | 2 +- .../migration-v4/v5-component-changes.md | 2 +- .../migration-v4/v5-style-changes.md | 2 +- docs/data/system/components/grid/grid.md | 2 +- .../system/getting-started/usage/usage.md | 2 +- docs/pages/blog/premium-plan-release.md | 2 +- docs/pages/experiments/docs/callouts.md | 44 +++++-------------- 79 files changed, 163 insertions(+), 190 deletions(-) diff --git a/docs/data/base/components/portal/portal.md b/docs/data/base/components/portal/portal.md index f8a1ff43a07197..ec99747ae62830 100644 --- a/docs/data/base/components/portal/portal.md +++ b/docs/data/base/components/portal/portal.md @@ -51,7 +51,7 @@ The following demo shows how a `` nested within a Portal can be appended t ### Server-side -:::warning +:::error React doesn't support the [`createPortal()` API](https://reactjs.org/docs/portals.html) on the server. See [this GitHub issue](https://github.com/facebook/react/issues/13097) for details. ::: diff --git a/docs/data/base/getting-started/overview/overview.md b/docs/data/base/getting-started/overview/overview.md index 151a1f3f597589..3104b36eb1cb93 100644 --- a/docs/data/base/getting-started/overview/overview.md +++ b/docs/data/base/getting-started/overview/overview.md @@ -16,8 +16,8 @@ MUI Base includes prebuilt components with production-ready functionality, along With MUI Base, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engine or theme. -:::info -**Note:** as of today, MUI Base is in alpha. +:::warning +MUI Base is currently in alpha. We're adding new components and features regularly, and you're welcome to contribute! diff --git a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md index baaf3b2f06d111..4f3c5421d9b02e 100644 --- a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md +++ b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md @@ -22,7 +22,7 @@ Here's what it will look like in the end: {{"demo": "PlayerFinal.js", "hideToolbar": true, "bg": true}} :::info -💡 All credits go to the Tailwind Labs team for designing this component, found on the [Tailwind CSS website](https://tailwindcss.com/). +All credits go to the Tailwind Labs team for designing this component, found on the [Tailwind CSS website](https://tailwindcss.com/). ::: ## Setting up the project diff --git a/docs/data/joy/components/alert/alert.md b/docs/data/joy/components/alert/alert.md index 85e2104e2d62fa..1da2586e3ae050 100644 --- a/docs/data/joy/components/alert/alert.md +++ b/docs/data/joy/components/alert/alert.md @@ -13,7 +13,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/alert/ The Alert component can be used to provide important and potentially time-sensitive information in a way that does not interfere with the user's tasks. (Source: [ARIA APG](https://www.w3.org/WAI/ARIA/apg/patterns/alert/).) -:::warning +:::info Alerts should not be confused with alert _dialogs_ ([ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/)), which _are_ intended to interrupt the user to obtain a response. Use the Joy UI [Modal](https://mui.com/joy-ui/react-modal/) if you need the behavior of a dialog. ::: @@ -40,7 +40,7 @@ The Alert component supports Joy UI's four [global variants](/joy-ui/main-featur {{"demo": "AlertVariants.js"}} -:::success +:::info To learn how to add your own variants, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants). Note that you lose the global variants when you add custom variants. ::: @@ -51,7 +51,7 @@ The Alert component comes in three sizes: `sm`, `md` (default), and `lg`: {{"demo": "AlertSizes.js"}} -:::success +:::info To learn how to add custom sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes). ::: diff --git a/docs/data/joy/components/aspect-ratio/aspect-ratio.md b/docs/data/joy/components/aspect-ratio/aspect-ratio.md index f92f7056a29639..9d6cd6c74eee30 100644 --- a/docs/data/joy/components/aspect-ratio/aspect-ratio.md +++ b/docs/data/joy/components/aspect-ratio/aspect-ratio.md @@ -38,7 +38,7 @@ The Aspect Ratio component supports Joy UI's four [global variants](/joy-ui/main {{"demo": "VariantsRatio.js"}} -:::success +:::info To learn how to add your own variants, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants). Note that you lose the global variants when you add custom variants. ::: @@ -105,7 +105,7 @@ function App() { ### Mobile carousel -:::info +:::warning In designs like this, make sure to assign a `minWidth` value to prevent the Aspect Ratio component from shrinking. ::: diff --git a/docs/data/joy/components/autocomplete/autocomplete.md b/docs/data/joy/components/autocomplete/autocomplete.md index c91d9fa492cc46..fb900b9dae34cd 100644 --- a/docs/data/joy/components/autocomplete/autocomplete.md +++ b/docs/data/joy/components/autocomplete/autocomplete.md @@ -74,7 +74,7 @@ The autocomplete component supports the four global variants: `outlined` (defaul {{"demo": "InputAppearance.js"}} -:::success +:::info To learn how to add more variants to the component, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants). ::: @@ -98,7 +98,7 @@ The component has two states that can be controlled: 2. the "input value" state with the `inputValue`/`onInputChange` props combination. This state represents the value displayed in the textbox. :::warning -⚠️ These two states are isolated, they should be controlled independently. +These two states are isolated, and should be controlled independently. ::: {{"demo": "ControllableStates.js"}} @@ -130,7 +130,7 @@ Use `freeSolo` to create a **search input** with suggestions experience, e.g. Go {{"demo": "FreeSolo.js"}} :::warning -⚠️ Be careful when using the free solo mode with non-string options, as it may cause type mismatch. +Be careful when using the free solo mode with non-string options, as it may cause type mismatch. The value created by typing into the textbox is always a string, regardless of the type of the options. ::: @@ -186,7 +186,7 @@ The autocomplete component comes with three sizes out of the box: `sm`, `md` (th {{"demo": "Sizes.js"}} -:::success +:::info To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes). ::: diff --git a/docs/data/joy/components/avatar/avatar.md b/docs/data/joy/components/avatar/avatar.md index bef9d3aded874f..2af0046c7dc7ac 100644 --- a/docs/data/joy/components/avatar/avatar.md +++ b/docs/data/joy/components/avatar/avatar.md @@ -59,7 +59,7 @@ The Avatar component supports Joy UI's four [global variants](/joy-ui/main-featu {{"demo": "AvatarVariants.js"}} -:::success +:::info To learn how to add your own variants, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants). Note that you lose the global variants when you add custom variants. ::: @@ -70,7 +70,7 @@ The Avatar component comes in three sizes: `sm`, `md` (default), and `lg`: {{"demo": "AvatarSizes.js"}} -:::success +:::info To learn how to add custom sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes). ::: @@ -114,7 +114,7 @@ You can reverse the overlapping order by reversing the order of the Avatars and To render the Avatar Group vertically, add the CSS `writing-mode: vertical-rl` property and rotate the interior element (if one is present) by -90 degrees. -:::info +:::success This approach is preferable because it preserves the overlapping offset between Avatars; the alternative—`flexDirection: column`—does not. ::: diff --git a/docs/data/joy/components/badge/badge.md b/docs/data/joy/components/badge/badge.md index 7f075164c6fdfe..7783adb475f136 100644 --- a/docs/data/joy/components/badge/badge.md +++ b/docs/data/joy/components/badge/badge.md @@ -60,7 +60,7 @@ The Badge component supports Joy UI's four [global variants](/joy-ui/main-featur {{"demo": "BadgeVariants.js"}} -:::success +:::info To learn how to add your own variants, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants). Note that you lose the global variants when you add custom variants. ::: @@ -71,7 +71,7 @@ The Badge component comes in three sizes: `sm`, `md` (default), and `lg`: {{"demo": "BadgeSizes.js"}} -:::success +:::info To learn how to add custom sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes). ::: diff --git a/docs/data/joy/components/breadcrumbs/breadcrumbs.md b/docs/data/joy/components/breadcrumbs/breadcrumbs.md index 409cd54de074df..7c8ea3ff10f1d3 100644 --- a/docs/data/joy/components/breadcrumbs/breadcrumbs.md +++ b/docs/data/joy/components/breadcrumbs/breadcrumbs.md @@ -36,7 +36,7 @@ The Breadcrumbs component comes in three sizes: `sm`, `md` (default), and `lg`: {{"demo": "BreadcrumbsSizes.js"}} -:::success +:::info To learn how to add custom sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes). ::: diff --git a/docs/data/joy/components/button/button.md b/docs/data/joy/components/button/button.md index e27ac18c864e9d..36a8db10e4d12c 100644 --- a/docs/data/joy/components/button/button.md +++ b/docs/data/joy/components/button/button.md @@ -37,7 +37,7 @@ Which variant you should choose depends on the relative importance of the button {{"demo": "ButtonVariants.js"}} -:::success +:::info To learn how to add more variants to the component, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants). ::: @@ -54,7 +54,7 @@ The button components comes with three sizes out of the box: `sm`, `md` (the def {{"demo": "ButtonSizes.js"}} -:::success +:::info To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes). ::: @@ -99,8 +99,8 @@ import IconButton from '@mui/joy/IconButton'; {{"demo": "IconButtons.js"}} -:::info -**♿️ Accessibility tip**: Make sure to provide a meaningful [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) to the icon button. +:::warning +Make sure to provide a meaningful [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) to the icon button. It helps screen readers to properly identify the component. ```js diff --git a/docs/data/joy/components/card/card.md b/docs/data/joy/components/card/card.md index e2a3af02da5ac6..e76a64665546f8 100644 --- a/docs/data/joy/components/card/card.md +++ b/docs/data/joy/components/card/card.md @@ -67,8 +67,8 @@ It uses [`object-fit: cover`](https://developer.mozilla.org/en-US/docs/Web/CSS/o To create a gradient overlay, frequently seen when a colorful image is used as background, insert an additional `CardCover` component. -:::info -💡 **Tip:** Make sure to darken the gradient overlay up to have enough contrast between the background image and the text content. +:::warning +Make sure to darken the gradient overlay up to have enough contrast between the background image and the text content. ::: {{"demo": "GradientCover.js" }} @@ -87,8 +87,8 @@ The `CardOverflow` will adapt based on its position. By default, whenever you have additional action elements such as links and buttons, they stay on top of the whole interactive area. In some cases, you might have to manually control each element's `z-index`. -:::info -💡 **Tip**: use CSS's pseudo-class [`:focus-within`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) to style the card when any of its children is focused. +:::success +Use the CSS pseudo-class [`:focus-within`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) to style the card when any of its children are focused. ::: {{"demo": "MultipleInteractionCard.js" }} @@ -109,8 +109,8 @@ Play around with all the CSS variables available in the slider component to see You can use those to customize the component on both the `sx` prop and the theme. -:::info -💡 **Tip**: If you want to adjust a card's padding or border-radius, it's preferable to do it using the variables below instead of using CSS properties directly. +:::success +If you want to adjust a card's padding or border-radius, it's preferable to do it using the variables below instead of using CSS properties directly. That's because the variables will also be used to calculate a proper radius for the card's children. ::: diff --git a/docs/data/joy/components/checkbox/checkbox.md b/docs/data/joy/components/checkbox/checkbox.md index 28bb935799c421..b4dcedea8785c8 100644 --- a/docs/data/joy/components/checkbox/checkbox.md +++ b/docs/data/joy/components/checkbox/checkbox.md @@ -16,7 +16,7 @@ For toggling between on and off or single option selection, consider using a swi {{"demo": "CheckboxUsage.js", "hideToolbar": true, "bg": "gradient"}} -:::success +:::info To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page. ::: @@ -81,7 +81,7 @@ It's common to find it in tables where you have one checkbox that selects every Use the `indeterminate` prop to circle around these states. :::warning -**⚠️ Keep in mind:** When the indeterminate state is set, the value of the `checked` prop only impacts the form submitted values. +When the indeterminate state is set, the value of the `checked` prop only impacts the form submitted values. It has no accessibility or UX implications. ::: diff --git a/docs/data/joy/components/chip/chip.md b/docs/data/joy/components/chip/chip.md index 25b1261a5bb46f..9595edf652ea6d 100644 --- a/docs/data/joy/components/chip/chip.md +++ b/docs/data/joy/components/chip/chip.md @@ -16,7 +16,7 @@ The badge component is most frequently used to signal status (online, offline, b {{"demo": "ChipUsage.js", "hideToolbar": true, "bg": "gradient"}} -:::success +:::info To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page. ::: diff --git a/docs/data/joy/components/circular-progress/circular-progress.md b/docs/data/joy/components/circular-progress/circular-progress.md index 398c834f364fba..0d9fb8d37898a6 100644 --- a/docs/data/joy/components/circular-progress/circular-progress.md +++ b/docs/data/joy/components/circular-progress/circular-progress.md @@ -52,7 +52,7 @@ The circular progress component comes with three sizes out of the box: `sm`, `md {{"demo": "CircularProgressSizes.js"}} -:::success +:::info To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes). ::: diff --git a/docs/data/joy/components/divider/divider.md b/docs/data/joy/components/divider/divider.md index 12edb9eb326773..d2a5afd6bddab9 100644 --- a/docs/data/joy/components/divider/divider.md +++ b/docs/data/joy/components/divider/divider.md @@ -32,8 +32,8 @@ export default function MyApp() { Use the `Divider` to wrap elements that will be added to it. -:::info -♿️ **a11y tip**: When using the `Divider` component for visual decoration, such as in a heading, explicitly specify `role="presentation"` on it to make sure screen readers can announce its content: +:::warning +When using the `Divider` component for visual decoration, such as in a heading, explicitly specify `role="presentation"` on it to make sure screen readers can announce its content: ```js diff --git a/docs/data/joy/components/linear-progress/linear-progress.md b/docs/data/joy/components/linear-progress/linear-progress.md index bc56dcb995e07e..e4a26b777cac2b 100644 --- a/docs/data/joy/components/linear-progress/linear-progress.md +++ b/docs/data/joy/components/linear-progress/linear-progress.md @@ -52,7 +52,7 @@ The linear progress component comes with three sizes out of the box: `sm`, `md` {{"demo": "LinearProgressSizes.js"}} -:::success +:::info To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes). ::: diff --git a/docs/data/joy/components/list/list.md b/docs/data/joy/components/list/list.md index 306b76c03c6ecb..29f490031bddb4 100644 --- a/docs/data/joy/components/list/list.md +++ b/docs/data/joy/components/list/list.md @@ -53,7 +53,7 @@ Use the `size` prop to control font-size and general list density. {{"demo": "SizesList.js"}} -:::success +:::info To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes). ::: @@ -106,7 +106,7 @@ The nested list inherits the list `size` and a few other CSS variables, such as {{"demo": "NestedList.js"}} :::info -**Note:** By default, nested lists stick to the left of the root list. +By default, nested lists stick to the left of the root list. To add spacing to the start of the nested list, use `--List-nestedInsetStart: ${value}`: ```js @@ -120,7 +120,7 @@ To add spacing to the start of the nested list, use `--List-nestedInsetStart: ${ To show a list in a horizontal direction, use the `row` prop on the `List` component. :::warning -**Note:** Nested lists don't work in the horizontal direction. +Nested lists don't work in the horizontal direction. To do that, create a custom pop-up component instead (see the [Navigation menu](#navigation-menu) example). ::: diff --git a/docs/data/joy/components/menu/menu.md b/docs/data/joy/components/menu/menu.md index af6ceecc72744a..81f59af1cd3358 100644 --- a/docs/data/joy/components/menu/menu.md +++ b/docs/data/joy/components/menu/menu.md @@ -55,7 +55,7 @@ When specifying a size for the `Menu` component, menu items inside of it will in {{"demo": "SizeMenu.js"}} -:::success +:::info To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes). ::: diff --git a/docs/data/joy/components/modal/modal.md b/docs/data/joy/components/modal/modal.md index 59b2bff08b96b4..bc8d946ee98288 100644 --- a/docs/data/joy/components/modal/modal.md +++ b/docs/data/joy/components/modal/modal.md @@ -30,7 +30,6 @@ Joy UI provides three modal-related components: {{"component": "modules/components/ComponentLinkHeader.js", "design": false}} :::info -**Note:** The term "modal" is sometimes used interchangeably with "dialog," but this is incorrect. A modal [blocks interaction with the rest of the application](https://en.wikipedia.org/wiki/Modal_window), forcing the user to take action. @@ -60,7 +59,7 @@ Use the `ModalClose` component to render a close button that inherits the modal' {{"demo": "BasicModal.js"}} :::info -💡 **Quick tip:** The `ModalClose` accepts the variant prop because it uses the same styles as the [`IconButton`](/joy-ui/react-button/#icon-button). +`ModalClose` accepts the variant prop because it uses the same styles as the [`IconButton`](/joy-ui/react-button/#icon-button). ::: ### Close reason @@ -154,7 +153,6 @@ The modal components can be nested: {{"demo": "NestedModals.js"}} :::warning -⚠️ **Keep in mind:** Though it is possible to create nested modals, stacking more than two at a time is discouraged. This is because each successive modal blocks interaction with all elements behind it, making prior states inaccessible and overly complicated for the user to navigate through. ::: @@ -216,7 +214,7 @@ See the [WAI-ARIA guide on the Dialog (Modal) pattern](https://www.w3.org/WAI/AR - Follow the [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/dialog.html) to help you set the initial focus on the most relevant element based on the content of the modal. :::warning - **Keep in mind:** A modal window can sit on top of either the parent application, or another modal window. + A modal window can sit on top of either the parent application, or another modal window. _All_ windows under the topmost modal are **inert**, meaning the user cannot interact with them. This can lead to [conflicting behaviors](#focus-trap). ::: diff --git a/docs/data/joy/components/radio/radio.md b/docs/data/joy/components/radio/radio.md index 5ca6897f8ef192..07b9b6a37df048 100644 --- a/docs/data/joy/components/radio/radio.md +++ b/docs/data/joy/components/radio/radio.md @@ -17,7 +17,7 @@ For more in-depth about when to use each, visit [the NNg's documentation](https: {{"demo": "RadioUsage.js", "hideToolbar": true, "bg": "gradient"}} -:::success +:::info To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page. ::: @@ -90,7 +90,7 @@ You can also use it directly in the `RadioGroup` component as it will automatica {{"demo": "OverlayRadio.js"}} :::info -💡 **Tip:** Use the CSS variable `--Radio-action-radius` to control the border radius of the clickable area. +Use the CSS variable `--Radio-action-radius` to control the border radius of the clickable area. ::: ### Icon diff --git a/docs/data/joy/components/select/select.md b/docs/data/joy/components/select/select.md index 85c78bcc8ad995..73b15b859530c3 100644 --- a/docs/data/joy/components/select/select.md +++ b/docs/data/joy/components/select/select.md @@ -16,7 +16,7 @@ The `Select` component is used to trigger a popup that displays a list of `Optio {{"demo": "SelectUsage.js", "hideToolbar": true, "bg": "gradient"}} -:::success +:::info To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page. ::: @@ -110,8 +110,8 @@ We're also using the `ListDivider` as a visual separator. {{"demo": "SelectCustomOption.js"}} -:::info -💡 **Keep in mind:** By default, the option children is used for displaying the selected value. +:::warning +By default, the option children are used for displaying the selected value. Take a look at [selected value appearance](#selected-value-appearance) to see how to customize its appearance. ::: @@ -122,8 +122,8 @@ That way, you'll have a consistent height and will be able to leverage nested CS {{"demo": "SelectGroupedOptions.js"}} -:::info -💡 **Keep in mind:** If you'd like to set a `max-height` for a long list of options, make sure to specify it to the `listbox` slot so that keyboard-based navigation works as expected. +:::warning +If you'd like to set a `max-height` for a long list of options, make sure to specify it to the `listbox` slot so that keyboard-based navigation works as expected. ```jsx ` components by applying `variant="standard"` if no variant is defined—the default variant has changed from `"standard"` in v4 to `"outlined"` in v5. :::error -❗️ You should _not_ use this codemod if you have already defined `variant: "outlined"` as the default in the theme. +You should _not_ use this codemod if you have already defined `variant: "outlined"` as the default in the theme. ::: ```js @@ -344,7 +344,7 @@ For more details, check out the [variant-prop codemod README](https://github.com This codemod transforms the `` component by applying `underline="hover"` if there is no `underline` prop defined—the default `underline` has changed from `"hover"` in v4 to `"always"` in v5. :::error -❗️ You should _not_ use this codemod if you have already defined `underline: "always"` as the default in the theme. +You should _not_ use this codemod if you have already defined `underline: "always"` as the default in the theme. ::: ```js diff --git a/docs/data/material/migration/migration-v4/troubleshooting.md b/docs/data/material/migration/migration-v4/troubleshooting.md index 5d7a22ce288717..6833bb1e278803 100644 --- a/docs/data/material/migration/migration-v4/troubleshooting.md +++ b/docs/data/material/migration/migration-v4/troubleshooting.md @@ -86,7 +86,7 @@ export const decorators = [withThemeProvider]; // ...other storybook exports ``` -:::warning +:::info This solution has been tested on the following versions: diff --git a/docs/data/material/migration/migration-v4/v5-component-changes.md b/docs/data/material/migration/migration-v4/v5-component-changes.md index f6d87b193d70d1..61c643c144f696 100644 --- a/docs/data/material/migration/migration-v4/v5-component-changes.md +++ b/docs/data/material/migration/migration-v4/v5-component-changes.md @@ -394,7 +394,7 @@ This was an exception to Material Design, and was removed from the specification + ``` -:::warning +:::error If you had previously customized `determinate`, then your customizations are most likely no longer valid. Please remove them. ::: diff --git a/docs/data/material/migration/migration-v4/v5-style-changes.md b/docs/data/material/migration/migration-v4/v5-style-changes.md index 9e66feb1b8d887..5f72818cf8e526 100644 --- a/docs/data/material/migration/migration-v4/v5-style-changes.md +++ b/docs/data/material/migration/migration-v4/v5-style-changes.md @@ -208,7 +208,7 @@ To correct the injection order, add the `prepend` option to `createCache`, as sh } ``` -:::info +:::warning If you are using styled-components and have a `StyleSheetManager` with a custom `target`, make sure that the target is the first element in the HTML ``. To see how it can be done, take a look at the [`StyledEngineProvider` implementation](https://github.com/mui/material-ui/blob/master/packages/mui-styled-engine-sc/src/StyledEngineProvider/StyledEngineProvider.js) in the `@mui/styled-engine-sc` package. diff --git a/docs/data/system/components/grid/grid.md b/docs/data/system/components/grid/grid.md index 6eb4ed9bf95d4e..ded3cf03e90554 100644 --- a/docs/data/system/components/grid/grid.md +++ b/docs/data/system/components/grid/grid.md @@ -26,7 +26,7 @@ The grid system is implemented with the `Grid` component: - It **does not** offer auto-placement children feature. It will try to fit the children one by one and if there is not enough space, the rest of the children will start on the next line and so on. If you need the auto-placement feature, we recommend to use [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout) instead. :::warning -⚠️ The `Grid` component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to [the `DataGrid` component](/x/react-data-grid/). +The Grid component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to [the Data Grid component](/x/react-data-grid/). ::: ## Fluid grids diff --git a/docs/data/system/getting-started/usage/usage.md b/docs/data/system/getting-started/usage/usage.md index 2d1c0a179874c4..73ea0dfddab30f 100644 --- a/docs/data/system/getting-started/usage/usage.md +++ b/docs/data/system/getting-started/usage/usage.md @@ -298,7 +298,7 @@ Here's what that looks like: {{"demo": "BreakpointsAsArray.js"}} -:::warning +:::success This option should only be considered when the theme has a limited number of breakpoints, e.g. 3. We recommend using the object API instead if you need to define more than a few breakpoints. diff --git a/docs/pages/blog/premium-plan-release.md b/docs/pages/blog/premium-plan-release.md index d0270774f8190f..c7076498009a93 100644 --- a/docs/pages/blog/premium-plan-release.md +++ b/docs/pages/blog/premium-plan-release.md @@ -79,7 +79,7 @@ We'd also like to keep it within reach of individuals and small teams, while sti Here is a list of everything that has changed: :::warning -⚠️ Please note: The following **pricing** changes apply only to **new customers**. +The following **pricing** changes apply only to **new customers**. Existing customers are grandfathered, they can renew their license under the [previous terms](https://mui.com/legal/mui-x-eula-2022-05-08/) once. Their last renewal can have a support duration of up to 5 years. ::: diff --git a/docs/pages/experiments/docs/callouts.md b/docs/pages/experiments/docs/callouts.md index 386e78db5d6b0f..f58442e61826cd 100644 --- a/docs/pages/experiments/docs/callouts.md +++ b/docs/pages/experiments/docs/callouts.md @@ -2,44 +2,22 @@

Type of callouts.

-:::error -❌ **Error callout** - -This is an error alert — check it out! -::: - :::info -ℹ️ **Info callout** - -This is an info alert — check it out! -::: - -:::warning -⚠️ **Warning callout** - -This is an warning alert — check it out! +This is an info callout. +It says, "Here's a bit of extra insight to help you understand this feature." ::: :::success -✅ **Success callout** - -This is an success alert — check it out! +This is a success callout. +It says, "Here's an actionable suggestion to help you succeed." ::: -:::info - -**Title** - -Some description - -- list item 1 -- list item 2 - ```js -
Test
- ``` -- list item 3 - ```js -
Test
- ``` +:::warning +This is a warning callout. +It says, "Be careful! Keep this detail in mind to avoid potential issues." +::: +:::error +This is an error callout. +It says, "You will fail if you don't heed this dire warning." :::