From 68881a20c7dedca5027d413880324a61392de86e Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Fri, 11 Oct 2024 11:16:15 +0200 Subject: [PATCH 1/4] Bump Public packages' dependencies (major) (#725) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Michał Dudak --- .../eslint-plugin-material-ui/package.json | 2 +- packages/mui-base/package.json | 4 +- pnpm-lock.yaml | 167 ++++++++++++------ renovate.json | 4 +- 4 files changed, 116 insertions(+), 61 deletions(-) diff --git a/packages/eslint-plugin-material-ui/package.json b/packages/eslint-plugin-material-ui/package.json index 9385a40ae..5a7e5a991 100644 --- a/packages/eslint-plugin-material-ui/package.json +++ b/packages/eslint-plugin-material-ui/package.json @@ -7,7 +7,7 @@ "devDependencies": { "@types/eslint": "^8.56.12", "@typescript-eslint/experimental-utils": "^5.62.0", - "@typescript-eslint/parser": "^7.8.0" + "@typescript-eslint/parser": "^8.8.1" }, "scripts": { "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/eslint-plugin-material-ui/**/*.test.js' --timeout 3000" diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index 0faaf17c5..0a2c4e0c5 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -53,7 +53,7 @@ }, "devDependencies": { "@mui/internal-test-utils": "1.0.14", - "@testing-library/react": "^15.0.7", + "@testing-library/react": "^16.0.1", "@testing-library/user-event": "^14.5.2", "@types/chai": "^4.3.20", "@types/chai-dom": "^1.11.3", @@ -67,7 +67,7 @@ "lodash": "^4.17.21", "react": "^18.3.1", "react-dom": "^18.3.1", - "sinon": "^17.0.1", + "sinon": "^19.0.2", "typescript": "^5.4.5" }, "peerDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a38792543..08ae29252 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -540,8 +540,8 @@ importers: specifier: ^5.62.0 version: 5.62.0(eslint@9.8.0)(typescript@5.6.3) '@typescript-eslint/parser': - specifier: ^7.8.0 - version: 7.8.0(eslint@9.8.0)(typescript@5.6.3) + specifier: ^8.8.1 + version: 8.8.1(eslint@9.8.0)(typescript@5.6.3) packages/mui-base: dependencies: @@ -577,8 +577,8 @@ importers: specifier: 1.0.14 version: 1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@testing-library/react': - specifier: ^15.0.7 - version: 15.0.7(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^16.0.1 + version: 16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@testing-library/user-event': specifier: ^14.5.2 version: 14.5.2(@testing-library/dom@10.4.0) @@ -619,8 +619,8 @@ importers: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) sinon: - specifier: ^17.0.1 - version: 17.0.1 + specifier: ^19.0.2 + version: 19.0.2 typescript: specifier: ^5.4.5 version: 5.6.3 @@ -2544,20 +2544,20 @@ packages: resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==} engines: {node: '>=18'} - '@sinonjs/commons@2.0.0': - resolution: {integrity: sha512-uLa0j859mMrg2slwQYdO/AkrOfmH+X6LTVmNTS9CqexuE2IvVORIkSpJLqePAbEnKJ77aMmCwr1NUZ57120Xcg==} - '@sinonjs/commons@3.0.1': resolution: {integrity: sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==} '@sinonjs/fake-timers@11.2.2': resolution: {integrity: sha512-G2piCSxQ7oWOxwGSAyFHfPIsyeJGXYtc6mFbnFA+kRXkiEnTl8c/8jul2S329iFBnDI9HGoeWWAZvuvOkZccgw==} - '@sinonjs/samsam@8.0.0': - resolution: {integrity: sha512-Bp8KUVlLp8ibJZrnvq2foVhP0IVX2CIprMJPK0vqGqgrDa0OHVKeZyBykqskkrdxV6yKBPmGasO8LVjAKR3Gew==} + '@sinonjs/fake-timers@13.0.2': + resolution: {integrity: sha512-4Bb+oqXZTSTZ1q27Izly9lv8B9dlV61CROxPiVtywwzv5SnytJqhvYe6FclHYuXml4cd1VHPo1zd5PmTeJozvA==} + + '@sinonjs/samsam@8.0.2': + resolution: {integrity: sha512-v46t/fwnhejRSFTGqbpn9u+LQ9xJDse10gNnPgAcxgdoCDMXj/G2asWAC/8Qs+BAZDicX+MNZouXT1A7c83kVw==} - '@sinonjs/text-encoding@0.7.2': - resolution: {integrity: sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==} + '@sinonjs/text-encoding@0.7.3': + resolution: {integrity: sha512-DE427ROAphMQzU4ENbliGYrBSYPXF+TtLg9S8vzeA+OF4ZKzoDdzfL8sxuMUGS/lgRhM6j1URSk9ghf7Xo1tyA==} '@slack/bolt@3.22.0': resolution: {integrity: sha512-iKDqGPEJDnrVwxSVlFW6OKTkijd7s4qLBeSufoBsTM0reTyfdp/5izIQVkxNfzjHi3o6qjdYbRXkYad5HBsBog==} @@ -2604,17 +2604,6 @@ packages: resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==} engines: {node: '>=18'} - '@testing-library/react@15.0.7': - resolution: {integrity: sha512-cg0RvEdD1TIhhkm1IeYMQxrzy0MtUNfa3minv4MjbgcYzJAZ7yD0i0lwoPOTPr+INtiXFezt2o8xMSnyHhEn2Q==} - engines: {node: '>=18'} - peerDependencies: - '@types/react': ^18.3.10 - react: ^18.0.0 - react-dom: ^18.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - '@testing-library/react@16.0.1': resolution: {integrity: sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg==} engines: {node: '>=18'} @@ -2849,6 +2838,16 @@ packages: typescript: optional: true + '@typescript-eslint/parser@8.8.1': + resolution: {integrity: sha512-hQUVn2Lij2NAxVFEdvIGxT9gP1tq2yM83m+by3whWFsWC+1y8pxxxHUFE1UqDu2VsGi2i6RLcv4QvouM84U+ow==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + '@typescript-eslint/scope-manager@5.62.0': resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -2857,6 +2856,10 @@ packages: resolution: {integrity: sha512-viEmZ1LmwsGcnr85gIq+FCYI7nO90DVbE37/ll51hjv9aG+YZMb4WDE2fyWpUR4O/UrhGRpYXK/XajcGTk2B8g==} engines: {node: ^18.18.0 || >=20.0.0} + '@typescript-eslint/scope-manager@8.8.1': + resolution: {integrity: sha512-X4JdU+66Mazev/J0gfXlcC/dV6JI37h+93W9BRYXrSn0hrE64IoWgVkO9MSJgEzoWkxONgaQpICWg8vAN74wlA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@typescript-eslint/type-utils@7.8.0': resolution: {integrity: sha512-H70R3AefQDQpz9mGv13Uhi121FNMh+WEaRqcXTX09YEDky21km4dV1ZXJIp8QjXc4ZaVkXVdohvWDzbnbHDS+A==} engines: {node: ^18.18.0 || >=20.0.0} @@ -2875,6 +2878,10 @@ packages: resolution: {integrity: sha512-wf0peJ+ZGlcH+2ZS23aJbOv+ztjeeP8uQ9GgwMJGVLx/Nj9CJt17GWgWWoSmoRVKAX2X+7fzEnAjxdvK2gqCLw==} engines: {node: ^18.18.0 || >=20.0.0} + '@typescript-eslint/types@8.8.1': + resolution: {integrity: sha512-WCcTP4SDXzMd23N27u66zTKMuEevH4uzU8C9jf0RO4E04yVHgQgW+r+TeVTNnO1KIfrL8ebgVVYYMMO3+jC55Q==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@typescript-eslint/typescript-estree@5.62.0': resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -2893,6 +2900,15 @@ packages: typescript: optional: true + '@typescript-eslint/typescript-estree@8.8.1': + resolution: {integrity: sha512-A5d1R9p+X+1js4JogdNilDuuq+EHZdsH9MjTVxXOdVFfTJXunKJR/v+fNNyO4TnoOn5HqobzfRlc70NC6HTcdg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + '@typescript-eslint/utils@5.62.0': resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -2913,6 +2929,10 @@ packages: resolution: {integrity: sha512-q4/gibTNBQNA0lGyYQCmWRS5D15n8rXh4QjK3KV+MBPlTYHpfBUT3D3PaPR/HeNiI9W6R7FvlkcGhNyAoP+caA==} engines: {node: ^18.18.0 || >=20.0.0} + '@typescript-eslint/visitor-keys@8.8.1': + resolution: {integrity: sha512-0/TdC3aeRAsW7MDvYRwEc1Uwm0TIBfzjPFgg60UU2Haj5qsCs9cc3zNgY71edqE3LbWfF/WoZQd3lJoDXFQpag==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@ungap/structured-clone@1.2.0': resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} @@ -4064,6 +4084,10 @@ packages: resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==} engines: {node: '>=0.3.1'} + diff@7.0.0: + resolution: {integrity: sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==} + engines: {node: '>=0.3.1'} + dir-glob@3.0.1: resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==} engines: {node: '>=8'} @@ -6437,8 +6461,8 @@ packages: nise@5.1.9: resolution: {integrity: sha512-qOnoujW4SV6e40dYxJOb3uvuoPHtmLzIk4TFo+j0jPJoC+5Z9xja5qH5JZobEPsa8+YYphMrOSwnrshEhG2qww==} - nise@6.0.0: - resolution: {integrity: sha512-K8ePqo9BFvN31HXwEtTNGzgrPpmvgciDsFz8aztFjt4LqKO/JeFD8tBOeuDiCMXrIl/m1YvfH8auSpxfaD09wg==} + nise@6.1.1: + resolution: {integrity: sha512-aMSAzLVY7LyeM60gvBS423nBmIPP+Wy7St7hsb+8/fc1HmeoHJfLO8CKse4u3BtOZvQLJghYPI2i/1WZrEj5/g==} no-case@3.0.4: resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==} @@ -7696,6 +7720,9 @@ packages: sinon@18.0.1: resolution: {integrity: sha512-a2N2TDY1uGviajJ6r4D1CyRAkzE9NNVlYOV1wX5xQDuAk0ONgzgRl0EjCQuRCPxOwp13ghsMwt9Gdldujs39qw==} + sinon@19.0.2: + resolution: {integrity: sha512-euuToqM+PjO4UgXeLETsfQiuoyPXlqFezr6YZDFwHR3t4qaX0fZUe1MfPMznTL5f8BWrVS89KduLdMUsxFCO6g==} + sirv@2.0.4: resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==} engines: {node: '>= 10'} @@ -11000,10 +11027,6 @@ snapshots: '@sindresorhus/merge-streams@4.0.0': {} - '@sinonjs/commons@2.0.0': - dependencies: - type-detect: 4.0.8 - '@sinonjs/commons@3.0.1': dependencies: type-detect: 4.0.8 @@ -11012,13 +11035,17 @@ snapshots: dependencies: '@sinonjs/commons': 3.0.1 - '@sinonjs/samsam@8.0.0': + '@sinonjs/fake-timers@13.0.2': dependencies: - '@sinonjs/commons': 2.0.0 + '@sinonjs/commons': 3.0.1 + + '@sinonjs/samsam@8.0.2': + dependencies: + '@sinonjs/commons': 3.0.1 lodash.get: 4.4.2 type-detect: 4.1.0 - '@sinonjs/text-encoding@0.7.2': {} + '@sinonjs/text-encoding@0.7.3': {} '@slack/bolt@3.22.0': dependencies: @@ -11121,16 +11148,6 @@ snapshots: lz-string: 1.5.0 pretty-format: 27.5.1 - '@testing-library/react@15.0.7(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@babel/runtime': 7.25.6 - '@testing-library/dom': 10.4.0 - '@types/react-dom': 18.3.0 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - optionalDependencies: - '@types/react': 18.3.10 - '@testing-library/react@16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.25.6 @@ -11376,12 +11393,12 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/parser@7.8.0(eslint@9.8.0)(typescript@5.6.3)': + '@typescript-eslint/parser@8.8.1(eslint@9.8.0)(typescript@5.6.3)': dependencies: - '@typescript-eslint/scope-manager': 7.8.0 - '@typescript-eslint/types': 7.8.0 - '@typescript-eslint/typescript-estree': 7.8.0(typescript@5.6.3) - '@typescript-eslint/visitor-keys': 7.8.0 + '@typescript-eslint/scope-manager': 8.8.1 + '@typescript-eslint/types': 8.8.1 + '@typescript-eslint/typescript-estree': 8.8.1(typescript@5.6.3) + '@typescript-eslint/visitor-keys': 8.8.1 debug: 4.3.7(supports-color@8.1.1) eslint: 9.8.0 optionalDependencies: @@ -11399,6 +11416,11 @@ snapshots: '@typescript-eslint/types': 7.8.0 '@typescript-eslint/visitor-keys': 7.8.0 + '@typescript-eslint/scope-manager@8.8.1': + dependencies: + '@typescript-eslint/types': 8.8.1 + '@typescript-eslint/visitor-keys': 8.8.1 + '@typescript-eslint/type-utils@7.8.0(eslint@8.57.1)(typescript@5.6.3)': dependencies: '@typescript-eslint/typescript-estree': 7.8.0(typescript@5.6.3) @@ -11415,6 +11437,8 @@ snapshots: '@typescript-eslint/types@7.8.0': {} + '@typescript-eslint/types@8.8.1': {} + '@typescript-eslint/typescript-estree@5.62.0(typescript@5.6.3)': dependencies: '@typescript-eslint/types': 5.62.0 @@ -11444,6 +11468,21 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/typescript-estree@8.8.1(typescript@5.6.3)': + dependencies: + '@typescript-eslint/types': 8.8.1 + '@typescript-eslint/visitor-keys': 8.8.1 + debug: 4.3.7(supports-color@8.1.1) + fast-glob: 3.3.2 + is-glob: 4.0.3 + minimatch: 9.0.4 + semver: 7.6.3 + ts-api-utils: 1.3.0(typescript@5.6.3) + optionalDependencies: + typescript: 5.6.3 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/utils@5.62.0(eslint@8.57.1)(typescript@5.6.3)': dependencies: '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.1) @@ -11498,6 +11537,11 @@ snapshots: '@typescript-eslint/types': 7.8.0 eslint-visitor-keys: 3.4.3 + '@typescript-eslint/visitor-keys@8.8.1': + dependencies: + '@typescript-eslint/types': 8.8.1 + eslint-visitor-keys: 3.4.3 + '@ungap/structured-clone@1.2.0': {} '@webassemblyjs/ast@1.12.1': @@ -12786,6 +12830,8 @@ snapshots: diff@5.2.0: {} + diff@7.0.0: {} + dir-glob@3.0.1: dependencies: path-type: 4.0.0 @@ -15990,17 +16036,17 @@ snapshots: dependencies: '@sinonjs/commons': 3.0.1 '@sinonjs/fake-timers': 11.2.2 - '@sinonjs/text-encoding': 0.7.2 + '@sinonjs/text-encoding': 0.7.3 just-extend: 6.2.0 path-to-regexp: 6.2.2 - nise@6.0.0: + nise@6.1.1: dependencies: '@sinonjs/commons': 3.0.1 - '@sinonjs/fake-timers': 11.2.2 - '@sinonjs/text-encoding': 0.7.2 + '@sinonjs/fake-timers': 13.0.2 + '@sinonjs/text-encoding': 0.7.3 just-extend: 6.2.0 - path-to-regexp: 6.2.2 + path-to-regexp: 8.2.0 no-case@3.0.4: dependencies: @@ -17479,7 +17525,7 @@ snapshots: dependencies: '@sinonjs/commons': 3.0.1 '@sinonjs/fake-timers': 11.2.2 - '@sinonjs/samsam': 8.0.0 + '@sinonjs/samsam': 8.0.2 diff: 5.2.0 nise: 5.1.9 supports-color: 7.2.0 @@ -17488,9 +17534,18 @@ snapshots: dependencies: '@sinonjs/commons': 3.0.1 '@sinonjs/fake-timers': 11.2.2 - '@sinonjs/samsam': 8.0.0 + '@sinonjs/samsam': 8.0.2 diff: 5.2.0 - nise: 6.0.0 + nise: 6.1.1 + supports-color: 7.2.0 + + sinon@19.0.2: + dependencies: + '@sinonjs/commons': 3.0.1 + '@sinonjs/fake-timers': 13.0.2 + '@sinonjs/samsam': 8.0.2 + diff: 7.0.0 + nise: 6.1.1 supports-color: 7.2.0 sirv@2.0.4: diff --git a/renovate.json b/renovate.json index 5dbdb963f..9f3c3927b 100644 --- a/renovate.json +++ b/renovate.json @@ -96,7 +96,7 @@ }, { "groupName": "chai - incompatible versions", - "matchPackageNames": ["chai"], + "matchPackageNames": ["chai", "@types/chai"], "allowedVersions": "< 5.0.0" }, { @@ -106,7 +106,7 @@ }, { "groupName": "eslint - incompatible versions", - "matchPackageNames": ["eslint"], + "matchPackageNames": ["eslint", "@types/eslint"], "allowedVersions": "< 9.0.0" } ], From 9e4c5e660a30472b204ced968729613b61ad6a09 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Fri, 11 Oct 2024 12:03:40 +0200 Subject: [PATCH 2/4] Bump Public packages' dependencies (#724) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michał Dudak --- packages/mui-base/package.json | 10 ++--- packages/mui-base/test/createRenderer.ts | 8 +++- pnpm-lock.yaml | 49 +++--------------------- 3 files changed, 16 insertions(+), 51 deletions(-) diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index 0a2c4e0c5..275f1d144 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -41,18 +41,18 @@ "typescript": "tsc -b tsconfig.json" }, "dependencies": { - "@babel/runtime": "^7.25.6", + "@babel/runtime": "^7.25.7", "@floating-ui/react": "^0.26.24", "@floating-ui/react-dom": "^2.1.2", "@floating-ui/utils": "^0.2.8", - "@mui/types": "^7.2.17", - "@mui/utils": "^6.1.1", + "@mui/types": "^7.2.18", + "@mui/utils": "^6.1.3", "clsx": "^2.1.1", "prop-types": "^15.8.1", "use-sync-external-store": "^1.2.2" }, "devDependencies": { - "@mui/internal-test-utils": "1.0.14", + "@mui/internal-test-utils": "1.0.16", "@testing-library/react": "^16.0.1", "@testing-library/user-event": "^14.5.2", "@types/chai": "^4.3.20", @@ -68,7 +68,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "sinon": "^19.0.2", - "typescript": "^5.4.5" + "typescript": "^5.6.3" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0", diff --git a/packages/mui-base/test/createRenderer.ts b/packages/mui-base/test/createRenderer.ts index a71f56089..d0e237f2c 100644 --- a/packages/mui-base/test/createRenderer.ts +++ b/packages/mui-base/test/createRenderer.ts @@ -10,16 +10,20 @@ import { type BaseUITestRenderer = Omit & { render: ( - element: React.ReactElement, + element: React.ReactElement, options?: RenderOptions, ) => Promise; }; +interface DataAttributes { + [key: `data-${string}`]: string; +} + export function createRenderer(globalOptions?: CreateRendererOptions): BaseUITestRenderer { const createRendererResult = sharedCreateRenderer(globalOptions); const { render: originalRender } = createRendererResult; - const render = async (element: React.ReactElement, options?: RenderOptions) => + const render = async (element: React.ReactElement, options?: RenderOptions) => act(async () => { const result = await originalRender(element, options); await flushMicrotasks(); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 08ae29252..5c674c693 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -558,10 +558,10 @@ importers: specifier: ^0.2.8 version: 0.2.8 '@mui/types': - specifier: ^7.2.17 + specifier: ^7.2.18 version: 7.2.18(@types/react@18.3.10) '@mui/utils': - specifier: ^6.1.1 + specifier: ^6.1.3 version: 6.1.3(@types/react@18.3.10)(react@18.3.1) clsx: specifier: ^2.1.1 @@ -574,8 +574,8 @@ importers: version: 1.2.2(react@18.3.1) devDependencies: '@mui/internal-test-utils': - specifier: 1.0.14 - version: 1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 1.0.16 + version: 1.0.16(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@testing-library/react': specifier: ^16.0.1 version: 16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -622,7 +622,7 @@ importers: specifier: ^19.0.2 version: 19.0.2 typescript: - specifier: ^5.4.5 + specifier: ^5.6.3 version: 5.6.3 publishDirectory: build @@ -1913,12 +1913,6 @@ packages: '@mui/internal-scripts@1.0.23': resolution: {integrity: sha512-YUaIaZLpeazuw4tWt5G6aKXW9Zxy1fmOe/Xz0XlnbY9pINYEE8A4nNEU2kDZ8dWqgNxp0Hxzp0t/XrCm1EBDQQ==} - '@mui/internal-test-utils@1.0.14': - resolution: {integrity: sha512-yjaSlij39hzWZ643b9gTLLPur8JUF3lQDIs9fwDAgBERhyuhhfV7+6L7xpqAZ7hrkZ7Rr7YqbtiCtSgfgDRG5g==} - peerDependencies: - react: ^18.2.0 - react-dom: ^18.2.0 - '@mui/internal-test-utils@1.0.16': resolution: {integrity: sha512-giAwbpBEr61qZA2+aW1D+ZM9ZOfKdNnc9lfecTPmAoGr+Zg7sBS6OAjdNFUKjFWYFrR6yyZxNPeec8NiE26HBw==} peerDependencies: @@ -10267,39 +10261,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@mui/internal-test-utils@1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@babel/plugin-transform-modules-commonjs': 7.24.8(@babel/core@7.25.2) - '@babel/preset-typescript': 7.24.7(@babel/core@7.25.2) - '@babel/register': 7.24.6(@babel/core@7.25.2) - '@babel/runtime': 7.25.6 - '@emotion/cache': 11.13.1 - '@emotion/react': 11.13.3(@types/react@18.3.10)(react@18.3.1) - '@testing-library/dom': 10.4.0 - '@testing-library/react': 16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@testing-library/user-event': 14.5.2(@testing-library/dom@10.4.0) - chai: 4.5.0 - chai-dom: 1.12.0(chai@4.5.0) - dom-accessibility-api: 0.7.0 - format-util: 1.0.5 - fs-extra: 11.2.0 - jsdom: 24.0.0 - lodash: 4.17.21 - mocha: 10.7.3 - playwright: 1.48.0 - prop-types: 15.8.1 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - sinon: 18.0.1 - transitivePeerDependencies: - - '@babel/core' - - '@types/react' - - '@types/react-dom' - - bufferutil - - canvas - - supports-color - - utf-8-validate - '@mui/internal-test-utils@1.0.16(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/plugin-transform-modules-commonjs': 7.24.8(@babel/core@7.25.2) From 9d18ff94ee894a5a7ba392a2fbe8dd76b89b5978 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 13 Oct 2024 20:10:43 +0200 Subject: [PATCH 3/4] [examples] Avoid git diff when playing with examples --- examples/.gitignore | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/.gitignore b/examples/.gitignore index e0f7d4b6d..d11ce49a1 100644 --- a/examples/.gitignore +++ b/examples/.gitignore @@ -1 +1,3 @@ -**/yarn.lock +package-lock.json +pnpm-lock.yaml +yarn.lock From 0b5da679016467bbdd28d60825aad808c0ea576b Mon Sep 17 00:00:00 2001 From: atomiks Date: Mon, 14 Oct 2024 12:45:34 +1100 Subject: [PATCH 4/4] =?UTF-8?q?[Checkbox][Switch]=20Split=20data-state=20i?= =?UTF-8?q?nto=20data-checked,=20data-unchecked=E2=80=A6=20(#721)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/index.js | 6 ++--- .../css/index.tsx | 6 ++--- .../system/index.js | 6 ++--- .../system/index.tsx | 6 ++--- .../tailwind/index.js | 2 +- .../tailwind/index.tsx | 2 +- .../UnstyledCheckboxGroupNested.js | 6 ++--- .../UnstyledCheckboxGroupNested.tsx | 6 ++--- .../checkbox/UnstyledCheckboxIndeterminate.js | 8 +++--- .../UnstyledCheckboxIndeterminate.tsx | 8 +++--- .../UnstyledCheckboxIndeterminateGroup.js | 6 ++--- .../UnstyledCheckboxIndeterminateGroup.tsx | 6 ++--- .../css-modules/index.js | 6 ++--- .../css-modules/index.tsx | 6 ++--- .../system/index.js | 6 ++--- .../system/index.tsx | 6 ++--- .../tailwind/index.js | 2 +- .../tailwind/index.tsx | 2 +- .../css-modules/styles.module.css | 6 ++--- .../system/index.js | 6 ++--- .../system/index.tsx | 6 ++--- .../src/Checkbox/Root/CheckboxRoot.test.tsx | 26 ++++++++++++------- .../utils/useCustomStyleHookMapping.ts | 16 +++++++----- .../src/Switch/Root/SwitchRoot.test.tsx | 20 +++++++++----- packages/mui-base/src/Switch/styleHooks.ts | 12 ++++++++- 25 files changed, 109 insertions(+), 79 deletions(-) diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js index 7a8dff8d4..6bd20db61 100644 --- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js +++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js @@ -100,7 +100,7 @@ function Styles() { outline-offset: 2px; } - .Checkbox[data-state="checked"] { + .Checkbox[data-checked] { border-color: ${grey[800]}; background: ${grey[800]}; } @@ -112,7 +112,7 @@ function Styles() { color: ${grey[100]}; } - .Checkbox-indicator[data-state="checked"] { + .Checkbox-indicator[data-checked] { visibility: visible; } @@ -131,7 +131,7 @@ function Styles() { outline-offset: 2px; } - .Checkbox[data-state="checked"] { + .Checkbox[data-checked] { border-color: ${grey[300]}; background: ${grey[300]}; } diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx index ad487a037..3d7b05826 100644 --- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx +++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx @@ -100,7 +100,7 @@ function Styles() { outline-offset: 2px; } - .Checkbox[data-state="checked"] { + .Checkbox[data-checked] { border-color: ${grey[800]}; background: ${grey[800]}; } @@ -112,7 +112,7 @@ function Styles() { color: ${grey[100]}; } - .Checkbox-indicator[data-state="checked"] { + .Checkbox-indicator[data-checked] { visibility: visible; } @@ -131,7 +131,7 @@ function Styles() { outline-offset: 2px; } - .Checkbox[data-state="checked"] { + .Checkbox[data-checked] { border-color: ${grey[300]}; background: ${grey[300]}; } diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js index 22affdf91..1033cfc87 100644 --- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js +++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js @@ -98,7 +98,7 @@ const Checkbox = styled(BaseCheckbox.Root)( outline-offset: 2px; } - &[data-state="checked"], &[data-state="mixed"] { + &[data-checked], &[data-indeterminate] { border-color: transparent; background: ${blue[600]}; } @@ -132,8 +132,8 @@ const Indicator = styled(BaseCheckbox.Indicator)` visibility: hidden; color: ${grey[100]}; - &[data-state='checked'], - &[data-state='mixed'] { + &[data-checked], + &[data-indeterminate] { visibility: visible; } `; diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx index d3e65b1c7..a83acafc0 100644 --- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx +++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx @@ -98,7 +98,7 @@ const Checkbox = styled(BaseCheckbox.Root)( outline-offset: 2px; } - &[data-state="checked"], &[data-state="mixed"] { + &[data-checked], &[data-indeterminate] { border-color: transparent; background: ${blue[600]}; } @@ -132,8 +132,8 @@ const Indicator = styled(BaseCheckbox.Indicator)` visibility: hidden; color: ${grey[100]}; - &[data-state='checked'], - &[data-state='mixed'] { + &[data-checked], + &[data-indeterminate] { visibility: visible; } `; diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js index f058738f5..577e7db15 100644 --- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js +++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js @@ -104,7 +104,7 @@ const Indicator = React.forwardRef(function Indicator(props, ref) { ref={ref} className={(state) => classNames( - 'h-full inline-block invisible data-[state=checked]:visible text-gray-100', + 'h-full inline-block invisible data-[checked]:visible text-gray-100', typeof props.className === 'function' ? props.className(state) : props.className, diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx index 5c0615461..3169ca830 100644 --- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx +++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx @@ -99,7 +99,7 @@ const Indicator = React.forwardRef classNames( - 'h-full inline-block invisible data-[state=checked]:visible text-gray-100', + 'h-full inline-block invisible data-[checked]:visible text-gray-100', typeof props.className === 'function' ? props.className(state) : props.className, diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js index ffe0f6883..c70d40384 100644 --- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js +++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js @@ -89,7 +89,7 @@ const Checkbox = styled(BaseCheckbox.Root)( outline-offset: 2px; } - &[data-state="checked"], &[data-state="mixed"] { + &[data-checked], &[data-indeterminate] { border-color: transparent; background: ${blue[600]}; } @@ -141,8 +141,8 @@ const Indicator = styled(BaseCheckbox.Indicator)` visibility: hidden; color: ${grey[100]}; - &[data-state='checked'], - &[data-state='mixed'] { + &[data-checked], + &[data-indeterminate] { visibility: visible; } `; diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx index 2a212b9e9..13326baf0 100644 --- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx +++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx @@ -89,7 +89,7 @@ const Checkbox = styled(BaseCheckbox.Root)( outline-offset: 2px; } - &[data-state="checked"], &[data-state="mixed"] { + &[data-checked], &[data-indeterminate] { border-color: transparent; background: ${blue[600]}; } @@ -143,8 +143,8 @@ const Indicator = styled(BaseCheckbox.Indicator)` visibility: hidden; color: ${grey[100]}; - &[data-state='checked'], - &[data-state='mixed'] { + &[data-checked], + &[data-indeterminate] { visibility: visible; } `; diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js index 167666851..786d49acc 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js +++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js @@ -52,8 +52,8 @@ const Checkbox = styled(BaseCheckbox.Root)( outline-offset: 2px; } - &[data-state='checked'], - &[data-state='mixed'] { + &[data-checked], + &[data-indeterminate] { border-color: transparent; background: ${blue[600]}; } @@ -84,8 +84,8 @@ const Indicator = styled(BaseCheckbox.Indicator)` display: inline-block; visibility: hidden; - &[data-state='checked'], - &[data-state='mixed'] { + &[data-checked], + &[data-indeterminate] { visibility: visible; } `; diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx index 2a41d4853..3b9e87f9a 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx +++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx @@ -52,8 +52,8 @@ const Checkbox = styled(BaseCheckbox.Root)( outline-offset: 2px; } - &[data-state='checked'], - &[data-state='mixed'] { + &[data-checked], + &[data-indeterminate] { border-color: transparent; background: ${blue[600]}; } @@ -86,8 +86,8 @@ const Indicator = styled(BaseCheckbox.Indicator)` display: inline-block; visibility: hidden; - &[data-state='checked'], - &[data-state='mixed'] { + &[data-checked], + &[data-indeterminate] { visibility: visible; } `; diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js index d80db2e23..44234bb4c 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js +++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js @@ -101,7 +101,7 @@ const Checkbox = styled(BaseCheckbox.Root)( outline-offset: 2px; } - &[data-state="checked"], &[data-state="mixed"] { + &[data-checked], &[data-indeterminate] { border-color: transparent; background: ${blue[600]}; } @@ -153,8 +153,8 @@ const Indicator = styled(BaseCheckbox.Indicator)` visibility: hidden; color: ${grey[100]}; - &[data-state='checked'], - &[data-state='mixed'] { + &[data-checked], + &[data-indeterminate] { visibility: visible; } `; diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx index 4f8cb9e50..f6907fe19 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx +++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx @@ -101,7 +101,7 @@ const Checkbox = styled(BaseCheckbox.Root)( outline-offset: 2px; } - &[data-state="checked"], &[data-state="mixed"] { + &[data-checked], &[data-indeterminate] { border-color: transparent; background: ${blue[600]}; } @@ -155,8 +155,8 @@ const Indicator = styled(BaseCheckbox.Indicator)` visibility: hidden; color: ${grey[100]}; - &[data-state='checked'], - &[data-state='mixed'] { + &[data-checked], + &[data-indeterminate] { visibility: visible; } `; diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js index 1b5d63a53..b4a264dad 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js +++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js @@ -92,7 +92,7 @@ function Styles() { outline-offset: 2px; } - .Checkbox[data-state="checked"] { + .Checkbox[data-checked] { border-color: ${grey[800]}; background: ${grey[800]}; } @@ -104,7 +104,7 @@ function Styles() { color: ${isDarkMode ? grey[900] : grey[100]}; } - .Checkbox-indicator[data-state="checked"] { + .Checkbox-indicator[data-checked] { visibility: visible; } @@ -118,7 +118,7 @@ function Styles() { border-color: ${grey[500]}; } - .Checkbox[data-state="checked"] { + .Checkbox[data-checked] { border-color: ${grey[300]}; background: ${grey[300]}; } diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx index 130758f8f..758acd41b 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx +++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx @@ -92,7 +92,7 @@ function Styles() { outline-offset: 2px; } - .Checkbox[data-state="checked"] { + .Checkbox[data-checked] { border-color: ${grey[800]}; background: ${grey[800]}; } @@ -104,7 +104,7 @@ function Styles() { color: ${isDarkMode ? grey[900] : grey[100]}; } - .Checkbox-indicator[data-state="checked"] { + .Checkbox-indicator[data-checked] { visibility: visible; } @@ -118,7 +118,7 @@ function Styles() { border-color: ${grey[500]}; } - .Checkbox[data-state="checked"] { + .Checkbox[data-checked] { border-color: ${grey[300]}; background: ${grey[300]}; } diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js index 517b2c262..d5004c166 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js +++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js @@ -66,7 +66,7 @@ const Checkbox = styled(BaseCheckbox.Root)( outline-offset: 2px; } - &[data-state="checked"], &[data-state="mixed"] { + &[data-checked], &[data-indeterminate] { border-color: transparent; background: ${blue[600]}; } @@ -100,8 +100,8 @@ const Indicator = styled(BaseCheckbox.Indicator)` display: inline-block; visibility: hidden; - &[data-state='checked'], - &[data-state='mixed'] { + &[data-checked], + &[data-indeterminate] { visibility: visible; } `; diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx index f3990ce3c..599539a6e 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx +++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx @@ -66,7 +66,7 @@ const Checkbox = styled(BaseCheckbox.Root)( outline-offset: 2px; } - &[data-state="checked"], &[data-state="mixed"] { + &[data-checked], &[data-indeterminate] { border-color: transparent; background: ${blue[600]}; } @@ -100,8 +100,8 @@ const Indicator = styled(BaseCheckbox.Indicator)` display: inline-block; visibility: hidden; - &[data-state='checked'], - &[data-state='mixed'] { + &[data-checked], + &[data-indeterminate] { visibility: visible; } `; diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js index d85f45e48..f27426ca2 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js +++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js @@ -76,7 +76,7 @@ const Indicator = React.forwardRef(function Indicator(props, ref) { ref={ref} className={(state) => classNames( - 'h-full inline-block invisible data-[state=checked]:visible text-gray-100', + 'h-full inline-block invisible data-[checked]:visible text-gray-100', typeof props.className === 'function' ? props.className(state) : props.className, diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx index 43d903023..595509db4 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx +++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx @@ -71,7 +71,7 @@ const Indicator = React.forwardRef classNames( - 'h-full inline-block invisible data-[state=checked]:visible text-gray-100', + 'h-full inline-block invisible data-[checked]:visible text-gray-100', typeof props.className === 'function' ? props.className(state) : props.className, diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/styles.module.css b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/styles.module.css index d0b25a599..37dde94ec 100644 --- a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/styles.module.css +++ b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/styles.module.css @@ -42,12 +42,12 @@ } } - &[data-state='checked'] { + &[data-checked] { border: none; background: var(--cyan-500); } - &[data-state='checked']:not([data-disabled]):hover { + &[data-checked]:not([data-disabled]):hover { background: var(--cyan-700); } } @@ -73,7 +73,7 @@ } } -.thumb[data-state='checked'] { +.thumb[data-checked] { left: 18px; background-color: #fff; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.js b/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.js index bac765760..12d3ea815 100644 --- a/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.js +++ b/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.js @@ -72,12 +72,12 @@ const Switch = styled(BaseSwitch.Root)( box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]}; } - &[data-state="checked"] { + &[data-checked] { border: none; background: ${blue[500]}; } - &[data-state="checked"]:not([data-disabled]):hover { + &[data-checked]:not([data-disabled]):hover { background: ${blue[700]}; } `, @@ -101,7 +101,7 @@ const Thumb = styled(BaseSwitch.Thumb)( theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)' }; - &[data-state="checked"] { + &[data-checked] { left: 18px; background-color: #fff; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.tsx b/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.tsx index bac765760..12d3ea815 100644 --- a/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.tsx +++ b/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.tsx @@ -72,12 +72,12 @@ const Switch = styled(BaseSwitch.Root)( box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]}; } - &[data-state="checked"] { + &[data-checked] { border: none; background: ${blue[500]}; } - &[data-state="checked"]:not([data-disabled]):hover { + &[data-checked]:not([data-disabled]):hover { background: ${blue[700]}; } `, @@ -101,7 +101,7 @@ const Thumb = styled(BaseSwitch.Thumb)( theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)' }; - &[data-state="checked"] { + &[data-checked] { left: 18px; background-color: #fff; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); diff --git a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx index 5f136f54b..169a0f38a 100644 --- a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx +++ b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx @@ -17,7 +17,7 @@ describe('', () => { describe('extra props', () => { it('can override the built-in attributes', async () => { - const { container } = await render(); + const { container } = await render(); expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'switch'); }); }); @@ -156,11 +156,6 @@ describe('', () => { expect(checkbox).to.have.attribute('aria-checked', 'mixed'); }); - it('should not set the `data-indeterminate` attribute', async () => { - const { getAllByRole } = await render(); - expect(getAllByRole('checkbox')[0]).to.not.have.attribute('data-indeterminate', 'true'); - }); - it('should not have the aria attribute when `indeterminate` is not set', async () => { const { getAllByRole } = await render(); expect(getAllByRole('checkbox')[0]).not.to.have.attribute('aria-checked', 'mixed'); @@ -185,7 +180,7 @@ describe('', () => { }); it('should place the style hooks on the root and the indicator', async () => { - const { getAllByRole } = await render( + const { getAllByRole, setProps } = await render( , @@ -194,15 +189,28 @@ describe('', () => { const [checkbox] = getAllByRole('checkbox'); const indicator = checkbox.querySelector('span'); - expect(checkbox).to.have.attribute('data-state', 'checked'); + expect(checkbox).to.have.attribute('data-checked', ''); + expect(checkbox).not.to.have.attribute('data-unchecked'); + expect(checkbox).to.have.attribute('data-disabled', 'true'); expect(checkbox).to.have.attribute('data-readonly', 'true'); expect(checkbox).to.have.attribute('data-required', 'true'); - expect(indicator).to.have.attribute('data-state', 'checked'); + expect(indicator).to.have.attribute('data-checked', ''); + expect(indicator).not.to.have.attribute('data-unchecked'); + expect(indicator).to.have.attribute('data-disabled', 'true'); expect(indicator).to.have.attribute('data-readonly', 'true'); expect(indicator).to.have.attribute('data-required', 'true'); + + setProps({ disabled: false, readOnly: false }); + fireEvent.click(checkbox); + + expect(checkbox).to.have.attribute('data-unchecked', ''); + expect(checkbox).not.to.have.attribute('data-checked'); + + expect(indicator).to.have.attribute('data-unchecked', ''); + expect(indicator).not.to.have.attribute('data-checked'); }); it('should set the name attribute on the input', async () => { diff --git a/packages/mui-base/src/Checkbox/utils/useCustomStyleHookMapping.ts b/packages/mui-base/src/Checkbox/utils/useCustomStyleHookMapping.ts index d0b604d65..7b2d06cfc 100644 --- a/packages/mui-base/src/Checkbox/utils/useCustomStyleHookMapping.ts +++ b/packages/mui-base/src/Checkbox/utils/useCustomStyleHookMapping.ts @@ -6,16 +6,20 @@ import type { CheckboxRoot } from '../Root/CheckboxRoot'; export function useCustomStyleHookMapping(ownerState: CheckboxRoot.OwnerState) { return React.useMemo>( () => ({ - // `data-state="mixed"` is used to style the checkbox when it's indeterminate - indeterminate: () => null, - checked(value) { - let state = value ? 'checked' : 'unchecked'; + checked(value): Record { if (ownerState.indeterminate) { - state = 'mixed'; + // `data-indeterminate` is already handled by the `indeterminate` prop. + return {}; + } + + if (value) { + return { + 'data-checked': '', + }; } return { - 'data-state': state, + 'data-unchecked': '', }; }, }), diff --git a/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx b/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx index ecfc91645..110ee301e 100644 --- a/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx +++ b/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { act, screen } from '@mui/internal-test-utils'; +import { act, fireEvent, screen } from '@mui/internal-test-utils'; import * as Switch from '@base_ui/react/Switch'; import { userEvent } from '@testing-library/user-event'; import { describeConformance, createRenderer } from '#test-utils'; @@ -72,9 +72,8 @@ describe('', () => { describe('extra props', () => { it('should override the built-in attributes', async () => { - await render(); + await render(); expect(screen.getByTestId('switch')).to.have.attribute('role', 'checkbox'); - expect(screen.getByTestId('switch')).to.have.attribute('data-state', 'checked'); }); }); @@ -247,7 +246,7 @@ describe('', () => { }); it('should place the style hooks on the root and the thumb', async () => { - await render( + const { setProps } = await render( , @@ -256,15 +255,24 @@ describe('', () => { const switchElement = screen.getByRole('switch'); const thumb = screen.getByTestId('thumb'); - expect(switchElement).to.have.attribute('data-state', 'checked'); + expect(switchElement).to.have.attribute('data-checked', ''); expect(switchElement).to.have.attribute('data-disabled', 'true'); expect(switchElement).to.have.attribute('data-readonly', 'true'); expect(switchElement).to.have.attribute('data-required', 'true'); - expect(thumb).to.have.attribute('data-state', 'checked'); + expect(thumb).to.have.attribute('data-checked', ''); expect(thumb).to.have.attribute('data-disabled', 'true'); expect(thumb).to.have.attribute('data-readonly', 'true'); expect(thumb).to.have.attribute('data-required', 'true'); + + setProps({ disabled: false, readOnly: false }); + fireEvent.click(switchElement); + + expect(switchElement).to.have.attribute('data-unchecked', ''); + expect(switchElement).not.to.have.attribute('data-checked'); + + expect(thumb).to.have.attribute('data-unchecked', ''); + expect(thumb).not.to.have.attribute('data-checked'); }); it('should set the name attribute on the input', async () => { diff --git a/packages/mui-base/src/Switch/styleHooks.ts b/packages/mui-base/src/Switch/styleHooks.ts index 0c8fd40ab..c95bcd792 100644 --- a/packages/mui-base/src/Switch/styleHooks.ts +++ b/packages/mui-base/src/Switch/styleHooks.ts @@ -2,5 +2,15 @@ import type { SwitchRoot } from './Root/SwitchRoot'; import type { CustomStyleHookMapping } from '../utils/getStyleHookProps'; export const styleHookMapping: CustomStyleHookMapping = { - checked: (value) => ({ 'data-state': value ? 'checked' : 'unchecked' }), + checked(value): Record { + if (value) { + return { + 'data-checked': '', + }; + } + + return { + 'data-unchecked': '', + }; + }, };