From 1a9f5e2d0fe26cc5476c4f7fe85de7ac52408538 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 18 Dec 2024 09:52:45 +0200 Subject: [PATCH 01/13] Bump MUI Internal (#15923) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 4 +- package.json | 4 +- packages/x-charts/package.json | 2 +- packages/x-data-grid-premium/package.json | 2 +- packages/x-data-grid-pro/package.json | 2 +- packages/x-data-grid/package.json | 2 +- packages/x-date-pickers-pro/package.json | 2 +- packages/x-date-pickers/package.json | 2 +- packages/x-internals/package.json | 2 +- packages/x-license/package.json | 2 +- packages/x-tree-view-pro/package.json | 2 +- packages/x-tree-view/package.json | 2 +- pnpm-lock.yaml | 152 +++++++++++++--------- 13 files changed, 104 insertions(+), 76 deletions(-) diff --git a/docs/package.json b/docs/package.json index 8c53a86a88b86..2bc07a1da5a0d 100644 --- a/docs/package.json +++ b/docs/package.json @@ -27,7 +27,7 @@ "@emotion/react": "^11.14.0", "@emotion/server": "^11.11.0", "@emotion/styled": "^11.14.0", - "@mui/docs": "6.2.0", + "@mui/docs": "6.2.1", "@mui/icons-material": "^5.16.11", "@mui/joy": "^5.0.0-beta.48", "@mui/lab": "^5.0.0-alpha.173", @@ -103,7 +103,7 @@ "@babel/plugin-transform-react-constant-elements": "^7.25.9", "@babel/preset-typescript": "^7.26.0", "@mui/internal-docs-utils": "^1.0.16", - "@mui/internal-scripts": "^1.0.29", + "@mui/internal-scripts": "^1.0.30", "@types/chance": "^1.1.6", "@types/d3-scale": "^4.0.8", "@types/d3-scale-chromatic": "^3.1.0", diff --git a/package.json b/package.json index e1b20d15ccdc4..260fef7db7316 100644 --- a/package.json +++ b/package.json @@ -91,9 +91,9 @@ "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", "@mui/icons-material": "^5.16.11", - "@mui/internal-babel-plugin-resolve-imports": "1.0.18", + "@mui/internal-babel-plugin-resolve-imports": "1.0.19", "@mui/internal-markdown": "^1.0.22", - "@mui/internal-test-utils": "^1.0.22", + "@mui/internal-test-utils": "^1.0.23", "@mui/material": "^5.16.11", "@mui/monorepo": "github:mui/material-ui#356d5dffbcbc1c18b5ab8060a173ea7a3e90b58c", "@mui/utils": "^5.16.8", diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json index f1873a566d75f..037f74d86b175 100644 --- a/packages/x-charts/package.json +++ b/packages/x-charts/package.json @@ -68,7 +68,7 @@ } }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.22", + "@mui/internal-test-utils": "^1.0.23", "@mui/material": "^5.16.11", "@mui/system": "^5.16.8", "@react-spring/core": "^9.7.5", diff --git a/packages/x-data-grid-premium/package.json b/packages/x-data-grid-premium/package.json index f6b2e3380de16..2c6a945e9fb49 100644 --- a/packages/x-data-grid-premium/package.json +++ b/packages/x-data-grid-premium/package.json @@ -72,7 +72,7 @@ } }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.22", + "@mui/internal-test-utils": "^1.0.23", "@mui/material": "^5.16.11", "@mui/system": "^5.16.8", "@types/prop-types": "^15.7.14", diff --git a/packages/x-data-grid-pro/package.json b/packages/x-data-grid-pro/package.json index bd600ea45ca1c..bd0a99c48c656 100644 --- a/packages/x-data-grid-pro/package.json +++ b/packages/x-data-grid-pro/package.json @@ -70,7 +70,7 @@ } }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.22", + "@mui/internal-test-utils": "^1.0.23", "@mui/material": "^5.16.11", "@mui/system": "^5.16.8", "@types/prop-types": "^15.7.14", diff --git a/packages/x-data-grid/package.json b/packages/x-data-grid/package.json index add19cd5b2ac4..ef26bf4c18b33 100644 --- a/packages/x-data-grid/package.json +++ b/packages/x-data-grid/package.json @@ -71,7 +71,7 @@ } }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.22", + "@mui/internal-test-utils": "^1.0.23", "@mui/material": "^5.16.11", "@mui/system": "^5.16.8", "@mui/types": "^7.2.15", diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json index 6a83c87d49498..9acf95c7ab0b2 100644 --- a/packages/x-date-pickers-pro/package.json +++ b/packages/x-date-pickers-pro/package.json @@ -96,7 +96,7 @@ } }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.22", + "@mui/internal-test-utils": "^1.0.23", "@mui/material": "^5.16.11", "@mui/system": "^5.16.8", "@types/luxon": "^3.4.2", diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index 42f4e23805609..4fad0edc9ffc7 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -98,7 +98,7 @@ } }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.22", + "@mui/internal-test-utils": "^1.0.23", "@mui/material": "^5.16.11", "@mui/system": "^5.16.8", "@types/luxon": "^3.4.2", diff --git a/packages/x-internals/package.json b/packages/x-internals/package.json index a2e4c1120b30f..62515eaf39e6c 100644 --- a/packages/x-internals/package.json +++ b/packages/x-internals/package.json @@ -48,7 +48,7 @@ "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.22", + "@mui/internal-test-utils": "^1.0.23", "rimraf": "^6.0.1" }, "engines": { diff --git a/packages/x-license/package.json b/packages/x-license/package.json index 1d8a8fda7b37b..59f5be0f717d1 100644 --- a/packages/x-license/package.json +++ b/packages/x-license/package.json @@ -41,7 +41,7 @@ "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.22", + "@mui/internal-test-utils": "^1.0.23", "rimraf": "^6.0.1" }, "engines": { diff --git a/packages/x-tree-view-pro/package.json b/packages/x-tree-view-pro/package.json index bf023f2587869..5fe97d5430177 100644 --- a/packages/x-tree-view-pro/package.json +++ b/packages/x-tree-view-pro/package.json @@ -72,7 +72,7 @@ } }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.22", + "@mui/internal-test-utils": "^1.0.23", "@mui/material": "^5.16.11", "@mui/system": "^5.16.8", "@types/prop-types": "^15.7.14", diff --git a/packages/x-tree-view/package.json b/packages/x-tree-view/package.json index e8d7e73d66c2e..fb7c566f00043 100644 --- a/packages/x-tree-view/package.json +++ b/packages/x-tree-view/package.json @@ -70,7 +70,7 @@ } }, "devDependencies": { - "@mui/internal-test-utils": "^1.0.22", + "@mui/internal-test-utils": "^1.0.23", "@mui/material": "^5.16.11", "@mui/system": "^5.16.8", "@types/prop-types": "^15.7.14", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f7e6a5cc84d86..99dd4ae83b665 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -87,14 +87,14 @@ importers: specifier: ^5.16.11 version: 5.16.11(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.17)(react@18.3.1) '@mui/internal-babel-plugin-resolve-imports': - specifier: 1.0.18 - version: 1.0.18(@babel/core@7.26.0) + specifier: 1.0.19 + version: 1.0.19(@babel/core@7.26.0) '@mui/internal-markdown': specifier: ^1.0.22 version: 1.0.22 '@mui/internal-test-utils': - specifier: ^1.0.22 - version: 1.0.22(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.23 + version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^5.16.11 version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -426,8 +426,8 @@ importers: specifier: ^11.14.0 version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1) '@mui/docs': - specifier: 6.2.0 - version: 6.2.0(eb2oyg27a76ocz25oknkeatdru) + specifier: 6.2.1 + version: 6.2.1(eb2oyg27a76ocz25oknkeatdru) '@mui/icons-material': specifier: ^5.16.11 version: 5.16.11(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.17)(react@18.3.1) @@ -649,8 +649,8 @@ importers: specifier: ^1.0.16 version: 1.0.16 '@mui/internal-scripts': - specifier: ^1.0.29 - version: 1.0.29 + specifier: ^1.0.30 + version: 1.0.30 '@types/chance': specifier: ^1.1.6 version: 1.1.6 @@ -777,8 +777,8 @@ importers: version: 1.4.0(react@18.3.1) devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.22 - version: 1.0.22(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.23 + version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^5.16.11 version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1030,8 +1030,8 @@ importers: version: 5.1.1 devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.22 - version: 1.0.22(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.23 + version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^5.16.11 version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1139,8 +1139,8 @@ importers: version: 5.1.1 devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.22 - version: 1.0.22(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.23 + version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^5.16.11 version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1201,8 +1201,8 @@ importers: version: 5.1.1 devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.22 - version: 1.0.22(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.23 + version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^5.16.11 version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1254,8 +1254,8 @@ importers: version: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.22 - version: 1.0.22(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.23 + version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^5.16.11 version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1349,8 +1349,8 @@ importers: version: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.22 - version: 1.0.22(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.23 + version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^5.16.11 version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1396,8 +1396,8 @@ importers: version: 18.3.1 devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.22 - version: 1.0.22(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.23 + version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) rimraf: specifier: ^6.0.1 version: 6.0.1 @@ -1416,8 +1416,8 @@ importers: version: 18.3.1 devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.22 - version: 1.0.22(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.23 + version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) rimraf: specifier: ^6.0.1 version: 6.0.1 @@ -1466,8 +1466,8 @@ importers: version: 1.4.0(react@18.3.1) devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.22 - version: 1.0.22(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.23 + version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^5.16.11 version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1534,8 +1534,8 @@ importers: version: 1.4.0(react@18.3.1) devDependencies: '@mui/internal-test-utils': - specifier: ^1.0.22 - version: 1.0.22(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.23 + version: 1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^5.16.11 version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -3101,8 +3101,8 @@ packages: '@mui/core-downloads-tracker@5.16.11': resolution: {integrity: sha512-2eVDGg9OvIXNRmfDUQyKYH+jNcjdv1JkCH5F2YDgUye5fMX5nxGiYHAUe1BXaXyDMaLSwXC7LRksEKMiIQsFdw==} - '@mui/docs@6.2.0': - resolution: {integrity: sha512-M4OioRcyRAn3v7R5+7cCK03EtzqpU/9YW0Ev6mW5efrXriFxc3LGZ9MVZVen1RQqtWcKPL4IE8oX7s6C8hOIwQ==} + '@mui/docs@6.2.1': + resolution: {integrity: sha512-dXycT1yA9EG6YNKEcXeWAPKLYSDQROmwrwE9qHUj9JbWP8/dYTCFiqB7gYpfBf1sJ4XsL7l+IFnoqsoCEiHuuQ==} engines: {node: '>=14.0.0'} peerDependencies: '@mui/base': '*' @@ -3129,8 +3129,8 @@ packages: '@types/react': optional: true - '@mui/internal-babel-plugin-resolve-imports@1.0.18': - resolution: {integrity: sha512-S3jKD/tsHU0q2tHy/rrWfr/0QGFZ22mb34/NrEQviHCOZW1syGxSHpnuj6S3o9uCT20r69S98MPworq6kGCiFw==} + '@mui/internal-babel-plugin-resolve-imports@1.0.19': + resolution: {integrity: sha512-iHiTgBC37qyOflSnWLu4zXYuZe4bFgR4/+OHc00fwMLgD/ohNlOWRbPLAeiIHsAmIA/Iw7f4Y8UcUl0eVMfHFw==} peerDependencies: '@babel/core': '7' @@ -3140,14 +3140,14 @@ packages: '@mui/internal-markdown@1.0.22': resolution: {integrity: sha512-js8VF3uDbHjV3gByPVZBcVF0sGkKM22MhFoxKw+W0nGMj6cy1+68Jg3jspFz38diGRqv4lElz9rL31YjY45U9w==} - '@mui/internal-scripts@1.0.29': - resolution: {integrity: sha512-s+ceBqTrrBme/bvt5VQ8uXgV67tFz2eA/UQ2XsMQ+6umHh/9cMuzIYG3qossj7iWUWI3CohwpLDtU+qWbqthAw==} + '@mui/internal-scripts@1.0.30': + resolution: {integrity: sha512-fc3pOA+bvee6TOnIVxf0+v7b0TIUO22uXqoZi8wnYTibrQp0xJcjSKlKOprZS/RmH+WARcqTlvkYOwJaDprUFg==} - '@mui/internal-test-utils@1.0.22': - resolution: {integrity: sha512-XJvX6mt3SO/Y4o4BRvhoMt0lAaJ3rryHelOkMPCpMzp25aSKoAYCJ/cMGty7wbcsPbqrPugrheMshz21O49Sfg==} + '@mui/internal-test-utils@1.0.23': + resolution: {integrity: sha512-SgnKIkaIqr5iokUFMeL6oOCwYP/haikvry2OSTLMzSEucVUoDxy5VU8boZiLj2B++6zVKJ2lCUbyHfF8HU9zaQ==} peerDependencies: - react: ^18.2.0 - react-dom: ^18.2.0 + react: ^19.0.0 + react-dom: ^19.0.0 '@mui/joy@5.0.0-beta.48': resolution: {integrity: sha512-OhTvjuGl9I5IvpBr0BQyDehIW/xb2yteW6YglHJMdOb/279nItn76X1NBtPV9ImldNlBjReGwvpOXmBTTGER9w==} @@ -6963,8 +6963,8 @@ packages: resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==} hasBin: true - is-core-module@2.15.1: - resolution: {integrity: sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==} + is-core-module@2.16.0: + resolution: {integrity: sha512-urTSINYfAYgcbLb0yDQ6egFm6h3Mo1DcF9EkyXSRjjzdHbsulg01qhwWuXdOoUBuTkbQ80KDboXa0vFJ+BDH+g==} engines: {node: '>= 0.4'} is-data-view@1.0.1: @@ -7989,6 +7989,11 @@ packages: engines: {node: '>= 14.0.0'} hasBin: true + mocha@11.0.1: + resolution: {integrity: sha512-+3GkODfsDG71KSCQhc4IekSW+ItCK/kiez1Z28ksWvYhKXV/syxMlerR/sC7whDp7IyreZ4YxceMLdTs5hQE8A==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + hasBin: true + modify-values@1.0.1: resolution: {integrity: sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==} engines: {node: '>=0.10.0'} @@ -9069,8 +9074,8 @@ packages: resolve@1.1.7: resolution: {integrity: sha512-9znBF0vBcaSN3W2j7wKvdERPwqTxSpCq+if5C0WoTCyV9n24rua28jeuQ2pL/HOf+yUe/Mef+H/5p60K0Id3bg==} - resolve@1.22.8: - resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==} + resolve@1.22.9: + resolution: {integrity: sha512-QxrmX1DzraFIi9PxdG5VkRfRwIgjwyud+z/iBwfRRrVmHc+P9Q7u2lSSpQ6bjr2gy5lrqIiU9vb6iAeGf2400A==} hasBin: true resolve@2.0.0-next.5: @@ -10659,7 +10664,7 @@ snapshots: '@babel/helper-plugin-utils': 7.25.9 debug: 4.3.7(supports-color@8.1.1) lodash.debounce: 4.0.8 - resolve: 1.22.8 + resolve: 1.22.9 transitivePeerDependencies: - supports-color @@ -12045,7 +12050,7 @@ snapshots: '@mui/core-downloads-tracker@5.16.11': {} - '@mui/docs@6.2.0(eb2oyg27a76ocz25oknkeatdru)': + '@mui/docs@6.2.1(eb2oyg27a76ocz25oknkeatdru)': dependencies: '@babel/runtime': 7.26.0 '@mui/base': 5.0.0-beta.40(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -12072,10 +12077,10 @@ snapshots: optionalDependencies: '@types/react': 18.3.17 - '@mui/internal-babel-plugin-resolve-imports@1.0.18(@babel/core@7.26.0)': + '@mui/internal-babel-plugin-resolve-imports@1.0.19(@babel/core@7.26.0)': dependencies: '@babel/core': 7.26.0 - resolve: 1.22.8 + resolve: 1.22.9 '@mui/internal-docs-utils@1.0.16': dependencies: @@ -12089,7 +12094,7 @@ snapshots: marked: 15.0.3 prismjs: 1.29.0 - '@mui/internal-scripts@1.0.29': + '@mui/internal-scripts@1.0.30': dependencies: '@babel/core': 7.26.0 '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.26.0) @@ -12104,7 +12109,7 @@ snapshots: transitivePeerDependencies: - supports-color - '@mui/internal-test-utils@1.0.22(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/internal-test-utils@1.0.23(@babel/core@7.26.0)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/plugin-transform-modules-commonjs': 7.25.9(@babel/core@7.26.0) '@babel/preset-typescript': 7.26.0(@babel/core@7.26.0) @@ -12122,7 +12127,7 @@ snapshots: fs-extra: 11.2.0 jsdom: 25.0.1 lodash: 4.17.21 - mocha: 10.8.2 + mocha: 11.0.1 playwright: 1.49.1 prop-types: 15.8.1 react: 18.3.1 @@ -14112,7 +14117,7 @@ snapshots: dependencies: '@babel/runtime': 7.26.0 cosmiconfig: 7.1.0 - resolve: 1.22.8 + resolve: 1.22.9 babel-plugin-module-resolver@5.0.2: dependencies: @@ -14120,7 +14125,7 @@ snapshots: glob: 9.3.5 pkg-up: 3.1.0 reselect: 4.1.8 - resolve: 1.22.8 + resolve: 1.22.9 babel-plugin-optimize-clsx@2.6.2: dependencies: @@ -15445,8 +15450,8 @@ snapshots: eslint-import-resolver-node@0.3.9: dependencies: debug: 3.2.7 - is-core-module: 2.15.1 - resolve: 1.22.8 + is-core-module: 2.16.0 + resolve: 1.22.9 transitivePeerDependencies: - supports-color @@ -15458,7 +15463,7 @@ snapshots: find-root: 1.1.0 hasown: 2.0.2 interpret: 1.4.0 - is-core-module: 2.15.1 + is-core-module: 2.16.0 is-regex: 1.2.0 lodash: 4.17.21 resolve: 2.0.0-next.5 @@ -15499,7 +15504,7 @@ snapshots: eslint-import-resolver-node: 0.3.9 eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.10)(eslint@8.57.1) hasown: 2.0.2 - is-core-module: 2.15.1 + is-core-module: 2.16.0 is-glob: 4.0.3 minimatch: 3.1.2 object.fromentries: 2.0.8 @@ -16650,7 +16655,7 @@ snapshots: dependencies: ci-info: 3.9.0 - is-core-module@2.15.1: + is-core-module@2.16.0: dependencies: hasown: 2.0.2 @@ -17931,6 +17936,29 @@ snapshots: yargs-parser: 20.2.9 yargs-unparser: 2.0.0 + mocha@11.0.1: + dependencies: + ansi-colors: 4.1.3 + browser-stdout: 1.3.1 + chokidar: 3.6.0 + debug: 4.3.7(supports-color@8.1.1) + diff: 5.2.0 + escape-string-regexp: 4.0.0 + find-up: 5.0.0 + glob: 10.4.5 + he: 1.2.0 + js-yaml: 4.1.0 + log-symbols: 4.1.0 + minimatch: 5.1.6 + ms: 2.1.3 + serialize-javascript: 6.0.2 + strip-json-comments: 3.1.1 + supports-color: 8.1.1 + workerpool: 6.5.1 + yargs: 16.2.0 + yargs-parser: 20.2.9 + yargs-unparser: 2.0.0 + modify-values@1.0.1: {} moment-hijri@3.0.0: @@ -18121,14 +18149,14 @@ snapshots: normalize-package-data@2.5.0: dependencies: hosted-git-info: 2.8.9 - resolve: 1.22.8 + resolve: 1.22.9 semver: 5.7.2 validate-npm-package-license: 3.0.4 normalize-package-data@3.0.3: dependencies: hosted-git-info: 4.1.0 - is-core-module: 2.15.1 + is-core-module: 2.16.0 semver: 7.6.3 validate-npm-package-license: 3.0.4 @@ -19022,7 +19050,7 @@ snapshots: rechoir@0.8.0: dependencies: - resolve: 1.22.8 + resolve: 1.22.9 redent@3.0.0: dependencies: @@ -19146,15 +19174,15 @@ snapshots: resolve@1.1.7: {} - resolve@1.22.8: + resolve@1.22.9: dependencies: - is-core-module: 2.15.1 + is-core-module: 2.16.0 path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 resolve@2.0.0-next.5: dependencies: - is-core-module: 2.15.1 + is-core-module: 2.16.0 path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 From c4710e809cfa2b89298ef6912b186435002303cc Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 18 Dec 2024 10:14:14 +0100 Subject: [PATCH 02/13] Bump mocha to ^11.0.1 (#15900) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- pnpm-lock.yaml | 45 ++------------------------------------------- 2 files changed, 3 insertions(+), 44 deletions(-) diff --git a/package.json b/package.json index 260fef7db7316..dd6757400040f 100644 --- a/package.json +++ b/package.json @@ -171,7 +171,7 @@ "lerna": "^8.1.9", "lodash": "^4.17.21", "markdownlint-cli2": "^0.16.0", - "mocha": "^10.8.2", + "mocha": "^11.0.1", "moment": "^2.30.1", "moment-timezone": "^0.5.46", "nyc": "^17.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 99dd4ae83b665..bdb2b65cb0608 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -327,8 +327,8 @@ importers: specifier: ^0.16.0 version: 0.16.0 mocha: - specifier: ^10.8.2 - version: 10.8.2 + specifier: ^11.0.1 + version: 11.0.1 moment: specifier: ^2.30.1 version: 2.30.1 @@ -6602,11 +6602,6 @@ packages: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} deprecated: Glob versions prior to v9 are no longer supported - glob@8.1.0: - resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==} - engines: {node: '>=12'} - deprecated: Glob versions prior to v9 are no longer supported - glob@9.3.5: resolution: {integrity: sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==} engines: {node: '>=16 || 14 >=14.17'} @@ -7984,11 +7979,6 @@ packages: engines: {node: '>=10'} hasBin: true - mocha@10.8.2: - resolution: {integrity: sha512-VZlYo/WE8t1tstuRmqgeyBgCbJc/lEdopaa+axcKzTBJ+UIdlAB9XnmvTCAH4pwR4ElNInaedhEBmZD8iCSVEg==} - engines: {node: '>= 14.0.0'} - hasBin: true - mocha@11.0.1: resolution: {integrity: sha512-+3GkODfsDG71KSCQhc4IekSW+ItCK/kiez1Z28ksWvYhKXV/syxMlerR/sC7whDp7IyreZ4YxceMLdTs5hQE8A==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} @@ -16238,14 +16228,6 @@ snapshots: once: 1.4.0 path-is-absolute: 1.0.1 - glob@8.1.0: - dependencies: - fs.realpath: 1.0.0 - inflight: 1.0.6 - inherits: 2.0.4 - minimatch: 5.1.6 - once: 1.4.0 - glob@9.3.5: dependencies: fs.realpath: 1.0.0 @@ -17913,29 +17895,6 @@ snapshots: mkdirp@1.0.4: {} - mocha@10.8.2: - dependencies: - ansi-colors: 4.1.3 - browser-stdout: 1.3.1 - chokidar: 3.6.0 - debug: 4.3.7(supports-color@8.1.1) - diff: 5.2.0 - escape-string-regexp: 4.0.0 - find-up: 5.0.0 - glob: 8.1.0 - he: 1.2.0 - js-yaml: 4.1.0 - log-symbols: 4.1.0 - minimatch: 5.1.6 - ms: 2.1.3 - serialize-javascript: 6.0.2 - strip-json-comments: 3.1.1 - supports-color: 8.1.1 - workerpool: 6.5.1 - yargs: 16.2.0 - yargs-parser: 20.2.9 - yargs-unparser: 2.0.0 - mocha@11.0.1: dependencies: ansi-colors: 4.1.3 From 5f8204daa33a464c4775ed26360fcde631a05c71 Mon Sep 17 00:00:00 2001 From: Rajat Date: Wed, 18 Dec 2024 15:25:35 +0530 Subject: [PATCH 03/13] [DataGrid] Consider `columnGroupHeaderHeight` prop in `getTotalHeaderHeight` method (#15915) --- .../src/hooks/features/columns/gridColumnsUtils.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts b/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts index e468f750e98ba..7c2d327c52db8 100644 --- a/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts +++ b/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts @@ -442,7 +442,7 @@ export function getTotalHeaderHeight( apiRef: React.MutableRefObject, props: Pick< DataGridProcessedProps, - 'columnHeaderHeight' | 'headerFilterHeight' | 'unstable_listView' + 'columnHeaderHeight' | 'headerFilterHeight' | 'unstable_listView' | 'columnGroupHeaderHeight' >, ) { if (props.unstable_listView) { @@ -454,9 +454,12 @@ export function getTotalHeaderHeight( const isHeaderFilteringEnabled = gridHeaderFilteringEnabledSelector(apiRef); const columnHeadersHeight = Math.floor(props.columnHeaderHeight * densityFactor); + const columnGroupHeadersHeight = Math.floor( + (props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor, + ); const filterHeadersHeight = isHeaderFilteringEnabled ? Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor) : 0; - return columnHeadersHeight * (1 + (maxDepth ?? 0)) + filterHeadersHeight; + return columnHeadersHeight + columnGroupHeadersHeight * maxDepth + filterHeadersHeight; } From dc61edbe7ded8f884c5a83b9afa6eb52a2014ade Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 18 Dec 2024 14:13:34 +0200 Subject: [PATCH 04/13] Bump next to ^15.1.1 (#15144) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 2 +- pnpm-lock.yaml | 209 ++++++++++++++++++++++------------------------ 2 files changed, 102 insertions(+), 109 deletions(-) diff --git a/docs/package.json b/docs/package.json index 2bc07a1da5a0d..aca4dfdc157a5 100644 --- a/docs/package.json +++ b/docs/package.json @@ -76,7 +76,7 @@ "moment-hijri": "^3.0.0", "moment-jalaali": "^0.10.4", "moment-timezone": "^0.5.46", - "next": "^14.2.20", + "next": "^15.1.1", "nprogress": "^0.2.0", "postcss": "^8.4.49", "prismjs": "^1.29.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bdb2b65cb0608..058a1f47988fa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -319,7 +319,7 @@ importers: version: 5.0.1(webpack@5.97.1) lerna: specifier: ^8.1.9 - version: 8.1.9(@swc/core@1.9.3(@swc/helpers@0.5.5))(babel-plugin-macros@3.1.0)(encoding@0.1.13) + version: 8.1.9(@swc/core@1.9.3(@swc/helpers@0.5.15))(babel-plugin-macros@3.1.0)(encoding@0.1.13) lodash: specifier: ^4.17.21 version: 4.17.21 @@ -373,7 +373,7 @@ importers: version: 3.1.0(webpack@5.97.1) terser-webpack-plugin: specifier: ^5.3.11 - version: 5.3.11(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack@5.97.1) + version: 5.3.11(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack@5.97.1) tsx: specifier: ^4.19.2 version: 4.19.2 @@ -388,7 +388,7 @@ importers: version: 0.12.5 webpack: specifier: ^5.97.1 - version: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) + version: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) webpack-bundle-analyzer: specifier: ^4.10.2 version: 4.10.2 @@ -427,7 +427,7 @@ importers: version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1) '@mui/docs': specifier: 6.2.1 - version: 6.2.1(eb2oyg27a76ocz25oknkeatdru) + version: 6.2.1(q437wrjjq574dufmyowoezxxyi) '@mui/icons-material': specifier: ^5.16.11 version: 5.16.11(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.17)(react@18.3.1) @@ -442,7 +442,7 @@ importers: version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material-nextjs': specifier: ^5.16.8 - version: 5.16.8(@emotion/cache@11.14.0)(@emotion/server@11.11.0)(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.17)(next@14.2.20(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 5.16.8(@emotion/cache@11.14.0)(@emotion/server@11.11.0)(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.17)(next@15.1.1(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@mui/styles': specifier: ^5.16.11 version: 5.16.11(@types/react@18.3.17)(react@18.3.1) @@ -573,8 +573,8 @@ importers: specifier: ^0.5.46 version: 0.5.46 next: - specifier: ^14.2.20 - version: 14.2.20(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^15.1.1 + version: 15.1.1(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) nprogress: specifier: ^0.2.0 version: 0.2.0 @@ -692,7 +692,7 @@ importers: version: 4.2.7 '@types/webpack-bundle-analyzer': specifier: ^4.7.0 - version: 4.7.0(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) + version: 4.7.0(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) gm: specifier: ^1.25.0 version: 1.25.0 @@ -1677,7 +1677,7 @@ importers: version: 4.3.4(vite@5.4.11(@types/node@20.17.10)(terser@5.36.0)) '@vitejs/plugin-react-swc': specifier: ^3.7.2 - version: 3.7.2(@swc/helpers@0.5.5)(vite@5.4.11(@types/node@20.17.10)(terser@5.36.0)) + version: 3.7.2(@swc/helpers@0.5.15)(vite@5.4.11(@types/node@20.17.10)(terser@5.36.0)) '@vitest/browser': specifier: 2.1.8 version: 2.1.8(@types/node@20.17.10)(playwright@1.49.1)(typescript@5.7.2)(vite@5.4.11(@types/node@20.17.10)(terser@5.36.0))(vitest@2.1.8) @@ -3306,62 +3306,56 @@ packages: resolution: {integrity: sha512-q3L9i3HoNfz0SGpTIS4zTcKBbRkxzCRpd169eyiTuk3IwcPC3/85mzLHranlKo2b+HYT0gu37YxGB45aD8A3Tw==} engines: {node: '>=18.0.0'} - '@next/env@14.2.20': - resolution: {integrity: sha512-JfDpuOCB0UBKlEgEy/H6qcBSzHimn/YWjUHzKl1jMeUO+QVRdzmTTl8gFJaNO87c8DXmVKhFCtwxQ9acqB3+Pw==} + '@next/env@15.1.1': + resolution: {integrity: sha512-ldU8IpUqxa87LsWyMh8eIqAzejt8+ZuEsdtCV+fpDog++cBO5b/PWaI7wQQwun8LKJeFFpnY4kv/6r+/dCON6A==} '@next/eslint-plugin-next@15.1.0': resolution: {integrity: sha512-+jPT0h+nelBT6HC9ZCHGc7DgGVy04cv4shYdAe6tKlEbjQUtwU3LzQhzbDHQyY2m6g39m6B0kOFVuLGBrxxbGg==} - '@next/swc-darwin-arm64@14.2.20': - resolution: {integrity: sha512-WDfq7bmROa5cIlk6ZNonNdVhKmbCv38XteVFYsxea1vDJt3SnYGgxLGMTXQNfs5OkFvAhmfKKrwe7Y0Hs+rWOg==} + '@next/swc-darwin-arm64@15.1.1': + resolution: {integrity: sha512-pq7Hzu0KaaH6UYcCQ22mOuj2mWCD6iqGvYprp/Ep1EcCxbdNOSS+8EJADFbPHsaXLkaonIJ8lTKBGWXaFxkeNQ==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] - '@next/swc-darwin-x64@14.2.20': - resolution: {integrity: sha512-XIQlC+NAmJPfa2hruLvr1H1QJJeqOTDV+v7tl/jIdoFvqhoihvSNykLU/G6NMgoeo+e/H7p/VeWSOvMUHKtTIg==} + '@next/swc-darwin-x64@15.1.1': + resolution: {integrity: sha512-h567/b/AHAnMpaJ1D3l3jKLrzNOgN9bmDSRd+Gb0hXTkLZh8mE0Kd9MbIw39QeTZQJ3192uFRFWlDjWiifwVhQ==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] - '@next/swc-linux-arm64-gnu@14.2.20': - resolution: {integrity: sha512-pnzBrHTPXIMm5QX3QC8XeMkpVuoAYOmyfsO4VlPn+0NrHraNuWjdhe+3xLq01xR++iCvX+uoeZmJDKcOxI201Q==} + '@next/swc-linux-arm64-gnu@15.1.1': + resolution: {integrity: sha512-I5Q6M3T9jzTUM2JlwTBy/VBSX+YCDvPLnSaJX5wE5GEPeaJkipMkvTA9+IiFK5PG5ljXTqVFVUj5BSHiYLCpoQ==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] - '@next/swc-linux-arm64-musl@14.2.20': - resolution: {integrity: sha512-WhJJAFpi6yqmUx1momewSdcm/iRXFQS0HU2qlUGlGE/+98eu7JWLD5AAaP/tkK1mudS/rH2f9E3WCEF2iYDydQ==} + '@next/swc-linux-arm64-musl@15.1.1': + resolution: {integrity: sha512-4cPMSYmyXlOAk8U04ouEACEGnOwYM9uJOXZnm9GBXIKRbNEvBOH9OePhHiDWqOws6iaHvGayaKr+76LmM41yJA==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] - '@next/swc-linux-x64-gnu@14.2.20': - resolution: {integrity: sha512-ao5HCbw9+iG1Kxm8XsGa3X174Ahn17mSYBQlY6VGsdsYDAbz/ZP13wSLfvlYoIDn1Ger6uYA+yt/3Y9KTIupRg==} + '@next/swc-linux-x64-gnu@15.1.1': + resolution: {integrity: sha512-KgIiKDdV35KwL9TrTxPFGsPb3J5RuDpw828z3MwMQbWaOmpp/T4MeWQCwo+J2aOxsyAcfsNE334kaWXCb6YTTA==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - '@next/swc-linux-x64-musl@14.2.20': - resolution: {integrity: sha512-CXm/kpnltKTT7945np6Td3w7shj/92TMRPyI/VvveFe8+YE+/YOJ5hyAWK5rpx711XO1jBCgXl211TWaxOtkaA==} + '@next/swc-linux-x64-musl@15.1.1': + resolution: {integrity: sha512-aHP/29x8loFhB3WuW2YaWaYFJN389t6/SBsug19aNwH+PRLzDEQfCvtuP6NxRCido9OAoExd+ZuYJKF9my1Kpg==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - '@next/swc-win32-arm64-msvc@14.2.20': - resolution: {integrity: sha512-upJn2HGQgKNDbXVfIgmqT2BN8f3z/mX8ddoyi1I565FHbfowVK5pnMEwauvLvaJf4iijvuKq3kw/b6E9oIVRWA==} + '@next/swc-win32-arm64-msvc@15.1.1': + resolution: {integrity: sha512-klbzXYwqHMwiucNFF0tWiWJyPb45MBX1q/ATmxrMjEYgA+V/0OXc9KmNVRIn6G/ab0ASUk4uWqxik5m6wvm1sg==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] - '@next/swc-win32-ia32-msvc@14.2.20': - resolution: {integrity: sha512-igQW/JWciTGJwj3G1ipalD2V20Xfx3ywQy17IV0ciOUBbFhNfyU1DILWsTi32c8KmqgIDviUEulW/yPb2FF90w==} - engines: {node: '>= 10'} - cpu: [ia32] - os: [win32] - - '@next/swc-win32-x64-msvc@14.2.20': - resolution: {integrity: sha512-AFmqeLW6LtxeFTuoB+MXFeM5fm5052i3MU6xD0WzJDOwku6SkZaxb1bxjBaRC8uNqTRTSPl0yMFtjNowIVI67w==} + '@next/swc-win32-x64-msvc@15.1.1': + resolution: {integrity: sha512-V5fm4aULqHSlMQt3U1rWAWuwJTFsb6Yh4P8p1kQFoayAF9jAQtjBvHku4zCdrtQuw9u9crPC0FNML00kN4WGhA==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -4002,8 +3996,8 @@ packages: '@swc/counter@0.1.3': resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==} - '@swc/helpers@0.5.5': - resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==} + '@swc/helpers@0.5.15': + resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==} '@swc/types@0.1.17': resolution: {integrity: sha512-V5gRru+aD8YVyCOMAjMpWR1Ui577DD5KSJsHP8RAxopAH22jFz6GZd/qxqjO6MJHQhcsjvjOFXyDhyLQUnMveQ==} @@ -8074,21 +8068,24 @@ packages: nested-error-stacks@2.1.1: resolution: {integrity: sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==} - next@14.2.20: - resolution: {integrity: sha512-yPvIiWsiyVYqJlSQxwmzMIReXn5HxFNq4+tlVQ812N1FbvhmE+fDpIAD7bcS2mGYQwPJ5vAsQouyme2eKsxaug==} - engines: {node: '>=18.17.0'} + next@15.1.1: + resolution: {integrity: sha512-SBZlcvdIxajw8//H3uOR1G3iu3jxsra/77m2ulRIxi3m89p+s3ACsoOXR49JEAbaun/DVoRJ9cPKq8eF/oNB5g==} + engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0} hasBin: true peerDependencies: '@opentelemetry/api': ^1.1.0 '@playwright/test': ^1.41.2 - react: ^18.2.0 - react-dom: ^18.2.0 + babel-plugin-react-compiler: '*' + react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0 + react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0 sass: ^1.3.0 peerDependenciesMeta: '@opentelemetry/api': optional: true '@playwright/test': optional: true + babel-plugin-react-compiler: + optional: true sass: optional: true @@ -9507,13 +9504,13 @@ packages: react: '>= 16.8.0' react-dom: '>= 16.8.0' - styled-jsx@5.1.1: - resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==} + styled-jsx@5.1.6: + resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==} engines: {node: '>= 12.0.0'} peerDependencies: '@babel/core': '*' babel-plugin-macros: '*' - react: '>= 16.8.0 || 17.x.x || ^18.0.0-0' + react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0' peerDependenciesMeta: '@babel/core': optional: true @@ -11932,12 +11929,12 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.0 - '@lerna/create@8.1.9(@swc/core@1.9.3(@swc/helpers@0.5.5))(babel-plugin-macros@3.1.0)(encoding@0.1.13)(typescript@5.7.2)': + '@lerna/create@8.1.9(@swc/core@1.9.3(@swc/helpers@0.5.15))(babel-plugin-macros@3.1.0)(encoding@0.1.13)(typescript@5.7.2)': dependencies: '@npmcli/arborist': 7.5.4 '@npmcli/package-json': 5.2.0 '@npmcli/run-script': 8.1.0 - '@nx/devkit': 20.1.4(nx@20.1.4(@swc/core@1.9.3(@swc/helpers@0.5.5))) + '@nx/devkit': 20.1.4(nx@20.1.4(@swc/core@1.9.3(@swc/helpers@0.5.15))) '@octokit/plugin-enterprise-rest': 6.0.1 '@octokit/rest': 19.0.11(encoding@0.1.13) aproba: 2.0.0 @@ -11976,7 +11973,7 @@ snapshots: npm-package-arg: 11.0.2 npm-packlist: 8.0.2 npm-registry-fetch: 17.1.0 - nx: 20.1.4(@swc/core@1.9.3(@swc/helpers@0.5.5)) + nx: 20.1.4(@swc/core@1.9.3(@swc/helpers@0.5.15)) p-map: 4.0.0 p-map-series: 2.1.0 p-queue: 6.6.2 @@ -12040,7 +12037,7 @@ snapshots: '@mui/core-downloads-tracker@5.16.11': {} - '@mui/docs@6.2.1(eb2oyg27a76ocz25oknkeatdru)': + '@mui/docs@6.2.1(q437wrjjq574dufmyowoezxxyi)': dependencies: '@babel/runtime': 7.26.0 '@mui/base': 5.0.0-beta.40(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -12052,7 +12049,7 @@ snapshots: clipboard-copy: 4.0.1 clsx: 2.1.1 csstype: 3.1.3 - next: 14.2.20(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 15.1.1(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) nprogress: 0.2.0 prop-types: 15.8.1 react: 18.3.1 @@ -12166,11 +12163,11 @@ snapshots: '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1) '@types/react': 18.3.17 - '@mui/material-nextjs@5.16.8(@emotion/cache@11.14.0)(@emotion/server@11.11.0)(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.17)(next@14.2.20(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': + '@mui/material-nextjs@5.16.8(@emotion/cache@11.14.0)(@emotion/server@11.11.0)(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.17)(next@15.1.1(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 '@mui/material': 5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - next: 14.2.20(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 15.1.1(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 optionalDependencies: '@emotion/cache': 11.14.0 @@ -12304,37 +12301,34 @@ snapshots: '@netlify/node-cookies': 0.1.0 urlpattern-polyfill: 8.0.2 - '@next/env@14.2.20': {} + '@next/env@15.1.1': {} '@next/eslint-plugin-next@15.1.0': dependencies: fast-glob: 3.3.1 - '@next/swc-darwin-arm64@14.2.20': + '@next/swc-darwin-arm64@15.1.1': optional: true - '@next/swc-darwin-x64@14.2.20': + '@next/swc-darwin-x64@15.1.1': optional: true - '@next/swc-linux-arm64-gnu@14.2.20': + '@next/swc-linux-arm64-gnu@15.1.1': optional: true - '@next/swc-linux-arm64-musl@14.2.20': + '@next/swc-linux-arm64-musl@15.1.1': optional: true - '@next/swc-linux-x64-gnu@14.2.20': + '@next/swc-linux-x64-gnu@15.1.1': optional: true - '@next/swc-linux-x64-musl@14.2.20': + '@next/swc-linux-x64-musl@15.1.1': optional: true - '@next/swc-win32-arm64-msvc@14.2.20': + '@next/swc-win32-arm64-msvc@15.1.1': optional: true - '@next/swc-win32-ia32-msvc@14.2.20': - optional: true - - '@next/swc-win32-x64-msvc@14.2.20': + '@next/swc-win32-x64-msvc@15.1.1': optional: true '@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3': @@ -12482,13 +12476,13 @@ snapshots: - bluebird - supports-color - '@nx/devkit@20.1.4(nx@20.1.4(@swc/core@1.9.3(@swc/helpers@0.5.5)))': + '@nx/devkit@20.1.4(nx@20.1.4(@swc/core@1.9.3(@swc/helpers@0.5.15)))': dependencies: ejs: 3.1.10 enquirer: 2.3.6 ignore: 5.3.2 minimatch: 9.0.3 - nx: 20.1.4(@swc/core@1.9.3(@swc/helpers@0.5.5)) + nx: 20.1.4(@swc/core@1.9.3(@swc/helpers@0.5.15)) semver: 7.6.3 tmp: 0.2.3 tslib: 2.8.1 @@ -13070,7 +13064,7 @@ snapshots: '@swc/core-win32-x64-msvc@1.9.3': optional: true - '@swc/core@1.9.3(@swc/helpers@0.5.5)': + '@swc/core@1.9.3(@swc/helpers@0.5.15)': dependencies: '@swc/counter': 0.1.3 '@swc/types': 0.1.17 @@ -13085,13 +13079,12 @@ snapshots: '@swc/core-win32-arm64-msvc': 1.9.3 '@swc/core-win32-ia32-msvc': 1.9.3 '@swc/core-win32-x64-msvc': 1.9.3 - '@swc/helpers': 0.5.5 + '@swc/helpers': 0.5.15 '@swc/counter@0.1.3': {} - '@swc/helpers@0.5.5': + '@swc/helpers@0.5.15': dependencies: - '@swc/counter': 0.1.3 tslib: 2.8.1 '@swc/types@0.1.17': @@ -13400,11 +13393,11 @@ snapshots: '@types/use-sync-external-store@0.0.6': {} - '@types/webpack-bundle-analyzer@4.7.0(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1))': + '@types/webpack-bundle-analyzer@4.7.0(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1))': dependencies: '@types/node': 20.17.10 tapable: 2.2.1 - webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) + webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) transitivePeerDependencies: - '@swc/core' - esbuild @@ -13543,9 +13536,9 @@ snapshots: '@ungap/structured-clone@1.2.0': {} - '@vitejs/plugin-react-swc@3.7.2(@swc/helpers@0.5.5)(vite@5.4.11(@types/node@20.17.10)(terser@5.36.0))': + '@vitejs/plugin-react-swc@3.7.2(@swc/helpers@0.5.15)(vite@5.4.11(@types/node@20.17.10)(terser@5.36.0))': dependencies: - '@swc/core': 1.9.3(@swc/helpers@0.5.5) + '@swc/core': 1.9.3(@swc/helpers@0.5.15) vite: 5.4.11(@types/node@20.17.10)(terser@5.36.0) transitivePeerDependencies: - '@swc/helpers' @@ -13712,17 +13705,17 @@ snapshots: '@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1))(webpack@5.97.1)': dependencies: - webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) + webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1) '@webpack-cli/info@2.0.2(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1))(webpack@5.97.1)': dependencies: - webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) + webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1) '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1))(webpack@5.97.1)': dependencies: - webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) + webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1) '@xtuc/ieee754@1.2.0': {} @@ -14091,7 +14084,7 @@ snapshots: '@babel/core': 7.26.0 find-cache-dir: 4.0.0 schema-utils: 4.3.0 - webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) + webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) babel-plugin-istanbul@7.0.0: dependencies: @@ -14603,7 +14596,7 @@ snapshots: dependencies: schema-utils: 4.3.0 serialize-javascript: 6.0.2 - webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) + webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) compression@1.7.4: dependencies: @@ -15458,7 +15451,7 @@ snapshots: lodash: 4.17.21 resolve: 2.0.0-next.5 semver: 5.7.2 - webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) + webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) transitivePeerDependencies: - supports-color @@ -16433,7 +16426,7 @@ snapshots: pretty-error: 4.0.0 tapable: 2.2.1 optionalDependencies: - webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) + webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) htmlparser2@6.1.0: dependencies: @@ -17146,7 +17139,7 @@ snapshots: dependencies: glob: 7.2.3 minimatch: 9.0.5 - webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) + webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) webpack-merge: 4.2.2 karma@6.4.4: @@ -17197,13 +17190,13 @@ snapshots: dependencies: readable-stream: 2.3.8 - lerna@8.1.9(@swc/core@1.9.3(@swc/helpers@0.5.5))(babel-plugin-macros@3.1.0)(encoding@0.1.13): + lerna@8.1.9(@swc/core@1.9.3(@swc/helpers@0.5.15))(babel-plugin-macros@3.1.0)(encoding@0.1.13): dependencies: - '@lerna/create': 8.1.9(@swc/core@1.9.3(@swc/helpers@0.5.5))(babel-plugin-macros@3.1.0)(encoding@0.1.13)(typescript@5.7.2) + '@lerna/create': 8.1.9(@swc/core@1.9.3(@swc/helpers@0.5.15))(babel-plugin-macros@3.1.0)(encoding@0.1.13)(typescript@5.7.2) '@npmcli/arborist': 7.5.4 '@npmcli/package-json': 5.2.0 '@npmcli/run-script': 8.1.0 - '@nx/devkit': 20.1.4(nx@20.1.4(@swc/core@1.9.3(@swc/helpers@0.5.5))) + '@nx/devkit': 20.1.4(nx@20.1.4(@swc/core@1.9.3(@swc/helpers@0.5.15))) '@octokit/plugin-enterprise-rest': 6.0.1 '@octokit/rest': 19.0.11(encoding@0.1.13) aproba: 2.0.0 @@ -17248,7 +17241,7 @@ snapshots: npm-package-arg: 11.0.2 npm-packlist: 8.0.2 npm-registry-fetch: 17.1.0 - nx: 20.1.4(@swc/core@1.9.3(@swc/helpers@0.5.5)) + nx: 20.1.4(@swc/core@1.9.3(@swc/helpers@0.5.15)) p-map: 4.0.0 p-map-series: 2.1.0 p-pipe: 3.1.0 @@ -18010,28 +18003,28 @@ snapshots: nested-error-stacks@2.1.1: {} - next@14.2.20(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + next@15.1.1(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: - '@next/env': 14.2.20 - '@swc/helpers': 0.5.5 + '@next/env': 15.1.1 + '@swc/counter': 0.1.3 + '@swc/helpers': 0.5.15 busboy: 1.6.0 caniuse-lite: 1.0.30001686 - graceful-fs: 4.2.11 postcss: 8.4.31 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - styled-jsx: 5.1.1(@babel/core@7.26.0)(babel-plugin-macros@3.1.0)(react@18.3.1) + styled-jsx: 5.1.6(@babel/core@7.26.0)(babel-plugin-macros@3.1.0)(react@18.3.1) optionalDependencies: - '@next/swc-darwin-arm64': 14.2.20 - '@next/swc-darwin-x64': 14.2.20 - '@next/swc-linux-arm64-gnu': 14.2.20 - '@next/swc-linux-arm64-musl': 14.2.20 - '@next/swc-linux-x64-gnu': 14.2.20 - '@next/swc-linux-x64-musl': 14.2.20 - '@next/swc-win32-arm64-msvc': 14.2.20 - '@next/swc-win32-ia32-msvc': 14.2.20 - '@next/swc-win32-x64-msvc': 14.2.20 + '@next/swc-darwin-arm64': 15.1.1 + '@next/swc-darwin-x64': 15.1.1 + '@next/swc-linux-arm64-gnu': 15.1.1 + '@next/swc-linux-arm64-musl': 15.1.1 + '@next/swc-linux-x64-gnu': 15.1.1 + '@next/swc-linux-x64-musl': 15.1.1 + '@next/swc-win32-arm64-msvc': 15.1.1 + '@next/swc-win32-x64-msvc': 15.1.1 '@playwright/test': 1.49.1 + sharp: 0.33.5 transitivePeerDependencies: - '@babel/core' - babel-plugin-macros @@ -18187,7 +18180,7 @@ snapshots: nwsapi@2.2.16: {} - nx@20.1.4(@swc/core@1.9.3(@swc/helpers@0.5.5)): + nx@20.1.4(@swc/core@1.9.3(@swc/helpers@0.5.15)): dependencies: '@napi-rs/wasm-runtime': 0.2.4 '@yarnpkg/lockfile': 1.1.0 @@ -18232,7 +18225,7 @@ snapshots: '@nx/nx-linux-x64-musl': 20.1.4 '@nx/nx-win32-arm64-msvc': 20.1.4 '@nx/nx-win32-x64-msvc': 20.1.4 - '@swc/core': 1.9.3(@swc/helpers@0.5.5) + '@swc/core': 1.9.3(@swc/helpers@0.5.15) transitivePeerDependencies: - debug @@ -19598,7 +19591,7 @@ snapshots: dependencies: loader-utils: 2.0.4 schema-utils: 3.3.0 - webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) + webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) string-width@4.2.3: dependencies: @@ -19711,7 +19704,7 @@ snapshots: stylis: 4.3.2 tslib: 2.6.2 - styled-jsx@5.1.1(@babel/core@7.26.0)(babel-plugin-macros@3.1.0)(react@18.3.1): + styled-jsx@5.1.6(@babel/core@7.26.0)(babel-plugin-macros@3.1.0)(react@18.3.1): dependencies: client-only: 0.0.1 react: 18.3.1 @@ -19793,16 +19786,16 @@ snapshots: temp-dir@1.0.0: {} - terser-webpack-plugin@5.3.11(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack@5.97.1): + terser-webpack-plugin@5.3.11(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack@5.97.1): dependencies: '@jridgewell/trace-mapping': 0.3.25 jest-worker: 27.5.1 schema-utils: 4.3.0 serialize-javascript: 6.0.2 terser: 5.36.0 - webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) + webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) optionalDependencies: - '@swc/core': 1.9.3(@swc/helpers@0.5.5) + '@swc/core': 1.9.3(@swc/helpers@0.5.15) terser@5.36.0: dependencies: @@ -20328,7 +20321,7 @@ snapshots: import-local: 3.2.0 interpret: 3.1.1 rechoir: 0.8.0 - webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) + webpack: 5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)) webpack-merge: 5.10.0 optionalDependencies: webpack-bundle-analyzer: 4.10.2 @@ -20345,7 +20338,7 @@ snapshots: webpack-sources@3.2.3: {} - webpack@5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)): + webpack@5.97.1(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.97.1)): dependencies: '@types/eslint-scope': 3.7.7 '@types/estree': 1.0.6 @@ -20367,7 +20360,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.11(@swc/core@1.9.3(@swc/helpers@0.5.5))(webpack@5.97.1) + terser-webpack-plugin: 5.3.11(@swc/core@1.9.3(@swc/helpers@0.5.15))(webpack@5.97.1) watchpack: 2.4.2 webpack-sources: 3.2.3 optionalDependencies: From d13909acadb8cfddc4d54e51311ea753dd7f68b6 Mon Sep 17 00:00:00 2001 From: Rajat Date: Wed, 18 Dec 2024 18:58:31 +0530 Subject: [PATCH 05/13] [DataGrid] Fix autosizing with virtualized columns (#15116) Co-authored-by: Andrew Cherniavskii --- docs/pages/x/api/data-grid/data-grid-premium.json | 2 +- docs/pages/x/api/data-grid/data-grid-pro.json | 2 +- docs/pages/x/api/data-grid/data-grid.json | 2 +- .../src/DataGridPremium/DataGridPremium.tsx | 1 + .../src/DataGridPro/DataGridPro.tsx | 1 + packages/x-data-grid/src/DataGrid/DataGrid.tsx | 1 + packages/x-data-grid/src/components/GridRow.tsx | 14 ++++++++++++-- .../columnHeaders/useGridColumnHeaders.tsx | 13 ++++++++++--- .../features/columnResize/gridColumnResizeApi.ts | 6 ++++++ .../features/columnResize/useGridColumnResize.tsx | 15 +++++++++++---- 10 files changed, 45 insertions(+), 12 deletions(-) diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index 68275bbffcd52..6781abc79ef0e 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -27,7 +27,7 @@ "autosizeOptions": { "type": { "name": "shape", - "description": "{ columns?: Array<string>, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }" + "description": "{ columns?: Array<string>, disableColumnVirtualization?: bool, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }" } }, "cellModesModel": { "type": { "name": "object" } }, diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index 25e5f5e232470..1799239dd781d 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -18,7 +18,7 @@ "autosizeOptions": { "type": { "name": "shape", - "description": "{ columns?: Array<string>, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }" + "description": "{ columns?: Array<string>, disableColumnVirtualization?: bool, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }" } }, "cellModesModel": { "type": { "name": "object" } }, diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index d0cd9370ee9b8..4fb963ffeb3a2 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -18,7 +18,7 @@ "autosizeOptions": { "type": { "name": "shape", - "description": "{ columns?: Array<string>, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }" + "description": "{ columns?: Array<string>, disableColumnVirtualization?: bool, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }" } }, "cellModesModel": { "type": { "name": "object" } }, diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index a9c7dd1897ce9..5b02b06b2d42f 100644 --- a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -132,6 +132,7 @@ DataGridPremiumRaw.propTypes = { */ autosizeOptions: PropTypes.shape({ columns: PropTypes.arrayOf(PropTypes.string), + disableColumnVirtualization: PropTypes.bool, expand: PropTypes.bool, includeHeaders: PropTypes.bool, includeOutliers: PropTypes.bool, diff --git a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index 38fd379304025..214ab5380f3eb 100644 --- a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -119,6 +119,7 @@ DataGridProRaw.propTypes = { */ autosizeOptions: PropTypes.shape({ columns: PropTypes.arrayOf(PropTypes.string), + disableColumnVirtualization: PropTypes.bool, expand: PropTypes.bool, includeHeaders: PropTypes.bool, includeOutliers: PropTypes.bool, diff --git a/packages/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/x-data-grid/src/DataGrid/DataGrid.tsx index 2396b003e5336..5a5384eeff74f 100644 --- a/packages/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/x-data-grid/src/DataGrid/DataGrid.tsx @@ -129,6 +129,7 @@ DataGridRaw.propTypes = { */ autosizeOptions: PropTypes.shape({ columns: PropTypes.arrayOf(PropTypes.string), + disableColumnVirtualization: PropTypes.bool, expand: PropTypes.bool, includeHeaders: PropTypes.bool, includeOutliers: PropTypes.bool, diff --git a/packages/x-data-grid/src/components/GridRow.tsx b/packages/x-data-grid/src/components/GridRow.tsx index c46499ff7692a..edca8b2e81ec6 100644 --- a/packages/x-data-grid/src/components/GridRow.tsx +++ b/packages/x-data-grid/src/components/GridRow.tsx @@ -29,6 +29,7 @@ import { GridScrollbarFillerCell as ScrollbarFiller } from './GridScrollbarFille import { getPinnedCellOffset } from '../internals/utils/getPinnedCellOffset'; import { useGridConfiguration } from '../hooks/utils/useGridConfiguration'; import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext'; +import { gridVirtualizationColumnEnabledSelector } from '../hooks'; export interface GridRowProps extends React.HTMLAttributes { row: GridRowModel; @@ -111,7 +112,7 @@ const GridRow = React.forwardRef(function GridRow( const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width; const editing = apiRef.current.getRowMode(rowId) === GridRowModes.Edit; const editable = rootProps.editMode === GridEditModes.Row; - + const hasColumnVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector); const hasFocusCell = focusedColumnIndex !== undefined; const hasVirtualFocusCellLeft = hasFocusCell && @@ -397,8 +398,17 @@ const GridRow = React.forwardRef(function GridRow( ), ); } + let firstColumnIndex; + let lastColumnIndex; + if (!rootProps.disableVirtualization && !hasColumnVirtualization) { + firstColumnIndex = 0; + lastColumnIndex = visibleColumns.length; + } else { + firstColumnIndex = renderContext.firstColumnIndex; + lastColumnIndex = renderContext.lastColumnIndex; + } - for (let i = renderContext.firstColumnIndex; i < renderContext.lastColumnIndex; i += 1) { + for (let i = firstColumnIndex; i < lastColumnIndex; i += 1) { const column = visibleColumns[i]; const indexInSection = i - pinnedColumns.left.length; diff --git a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx index 2e9804d6c51fb..aae228e6aeb43 100644 --- a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx +++ b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx @@ -101,7 +101,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { const isRtl = useRtl(); const rootProps = useGridRootProps(); const dimensions = useGridSelector(apiRef, gridDimensionsSelector); - const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector); + const hasColumnVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector); const columnGroupsModel = useGridSelector(apiRef, gridColumnGroupsUnwrappedModelSelector); const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector); const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector); @@ -162,8 +162,15 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { const { renderContext: currentContext = renderContext, maxLastColumn = visibleColumns.length } = params || {}; - const firstColumnToRender = currentContext.firstColumnIndex; - const lastColumnToRender = !hasVirtualization ? maxLastColumn : currentContext.lastColumnIndex; + let firstColumnToRender; + let lastColumnToRender; + if (!rootProps.disableVirtualization && !hasColumnVirtualization) { + firstColumnToRender = 0; + lastColumnToRender = maxLastColumn; + } else { + firstColumnToRender = currentContext.firstColumnIndex; + lastColumnToRender = currentContext.lastColumnIndex; + } const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender); return { diff --git a/packages/x-data-grid/src/hooks/features/columnResize/gridColumnResizeApi.ts b/packages/x-data-grid/src/hooks/features/columnResize/gridColumnResizeApi.ts index 3b0e62969221f..88b8b3a0fcc74 100644 --- a/packages/x-data-grid/src/hooks/features/columnResize/gridColumnResizeApi.ts +++ b/packages/x-data-grid/src/hooks/features/columnResize/gridColumnResizeApi.ts @@ -5,6 +5,7 @@ export const DEFAULT_GRID_AUTOSIZE_OPTIONS = { includeOutliers: false, outliersFactor: 1.5, expand: false, + disableColumnVirtualization: true, }; export type GridAutosizeOptions = { @@ -32,6 +33,11 @@ export type GridAutosizeOptions = { * @default false */ expand?: boolean; + /** + * If false, column virtualization is not disabled while resizing. + * @default true + */ + disableColumnVirtualization?: boolean; }; /** diff --git a/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx index 75792dd697634..2f33a2bdd0bfe 100644 --- a/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -278,6 +278,7 @@ export const useGridColumnResize = ( | 'disableAutosize' | 'onColumnResize' | 'onColumnWidthChange' + | 'disableVirtualization' >, ) => { const isRtl = useRtl(); @@ -687,6 +688,7 @@ export const useGridColumnResize = ( apiRef.current.autosizeColumns({ ...props.autosizeOptions, + disableColumnVirtualization: false, columns: [column.field], }); }); @@ -719,8 +721,10 @@ export const useGridColumnResize = ( const columns = options.columns.map((c) => apiRef.current.state.columns.lookup[c]); try { - apiRef.current.unstable_setColumnVirtualization(false); - await columnVirtualizationDisabled(); + if (!props.disableVirtualization && options.disableColumnVirtualization) { + apiRef.current.unstable_setColumnVirtualization(false); + await columnVirtualizationDisabled(); + } const widthByField = extractColumnWidths(apiRef, options, columns); @@ -766,11 +770,14 @@ export const useGridColumnResize = ( } }); } finally { - apiRef.current.unstable_setColumnVirtualization(true); + if (!props.disableVirtualization) { + apiRef.current.unstable_setColumnVirtualization(true); + } + isAutosizingRef.current = false; } }, - [apiRef, columnVirtualizationDisabled], + [apiRef, columnVirtualizationDisabled, props.disableVirtualization], ); /** From 2700d7e093c64873ac8fd5af5b58e22fefa11f28 Mon Sep 17 00:00:00 2001 From: Lukas Tyla Date: Wed, 18 Dec 2024 17:20:57 +0200 Subject: [PATCH 06/13] [code-infra] Remove `@mui/material-nextjs` dependency (#15925) --- babel.config.js | 1 - docs/package.json | 1 - pnpm-lock.yaml | 32 -------------------------------- renovate.json | 1 - scripts/useMaterialUIv6.mjs | 1 - test/regressions/index.test.ts | 7 ++++++- webpackBaseConfig.js | 4 ---- 7 files changed, 6 insertions(+), 41 deletions(-) diff --git a/babel.config.js b/babel.config.js index b67f02fa534d7..31279ecad0686 100644 --- a/babel.config.js +++ b/babel.config.js @@ -30,7 +30,6 @@ const defaultAlias = { '@mui/x-tree-view': resolveAliasPath('./packages/x-tree-view/src'), '@mui/x-tree-view-pro': resolveAliasPath('./packages/x-tree-view-pro/src'), '@mui/x-internals': resolveAliasPath('./packages/x-internals/src'), - '@mui/material-nextjs': '@mui/monorepo/packages/mui-material-nextjs/src', '@mui-internal/api-docs-builder': resolveAliasPath( './node_modules/@mui/monorepo/packages/api-docs-builder', ), diff --git a/docs/package.json b/docs/package.json index aca4dfdc157a5..b1389e9b87cf5 100644 --- a/docs/package.json +++ b/docs/package.json @@ -32,7 +32,6 @@ "@mui/joy": "^5.0.0-beta.48", "@mui/lab": "^5.0.0-alpha.173", "@mui/material": "^5.16.11", - "@mui/material-nextjs": "^5.16.8", "@mui/styles": "^5.16.11", "@mui/system": "^5.16.8", "@mui/utils": "^5.16.8", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 058a1f47988fa..25a9db4e0e577 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -440,9 +440,6 @@ importers: '@mui/material': specifier: ^5.16.11 version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/material-nextjs': - specifier: ^5.16.8 - version: 5.16.8(@emotion/cache@11.14.0)(@emotion/server@11.11.0)(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.17)(next@15.1.1(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@mui/styles': specifier: ^5.16.11 version: 5.16.11(@types/react@18.3.17)(react@18.3.1) @@ -3184,24 +3181,6 @@ packages: '@types/react': optional: true - '@mui/material-nextjs@5.16.8': - resolution: {integrity: sha512-UJhXaizQWrl3a5uXeCYyAHITXZnRBJJFCarccXk04gH5+NS9UArNl20mG6emyuPwV67UDh8DBNUSjpHd1pTVGg==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@emotion/cache': ^11.11.0 - '@emotion/server': ^11.11.0 - '@mui/material': ^5.0.0 - '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 - next: ^13.0.0 || ^14.0.0 - react: ^17.0.0 || ^18.0.0 || ^19.0.0 - peerDependenciesMeta: - '@emotion/cache': - optional: true - '@emotion/server': - optional: true - '@types/react': - optional: true - '@mui/material@5.16.11': resolution: {integrity: sha512-uoc67oecKdnVKaMHBVE433YrMuxQs22xY5nIjRb5sAPB+GaeZQWp8brQ3/adeH6k2IDa8+9i2IVd4fNLuvHSvA==} engines: {node: '>=12.0.0'} @@ -12163,17 +12142,6 @@ snapshots: '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1) '@types/react': 18.3.17 - '@mui/material-nextjs@5.16.8(@emotion/cache@11.14.0)(@emotion/server@11.11.0)(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.17)(next@15.1.1(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': - dependencies: - '@babel/runtime': 7.26.0 - '@mui/material': 5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - next: 15.1.1(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - react: 18.3.1 - optionalDependencies: - '@emotion/cache': 11.14.0 - '@emotion/server': 11.11.0 - '@types/react': 18.3.17 - '@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 diff --git a/renovate.json b/renovate.json index eb56e266d6d03..38f4e54f1c4b9 100644 --- a/renovate.json +++ b/renovate.json @@ -88,7 +88,6 @@ "@mui/joy", "@mui/lab", "@mui/material", - "@mui/material-nextjs", "@mui/styles", "@mui/system", "@mui/types", diff --git a/scripts/useMaterialUIv6.mjs b/scripts/useMaterialUIv6.mjs index abc2fe55845b4..e730521d69f8f 100644 --- a/scripts/useMaterialUIv6.mjs +++ b/scripts/useMaterialUIv6.mjs @@ -9,7 +9,6 @@ const pnpmUpdate = childProcess.spawnSync( '@mui/system@6.x', '@mui/icons-material@6.x', '@mui/utils@6.x', - '@mui/material-nextjs@6.x', '@mui/styles@6.x', '@mui/lab@latest', ], diff --git a/test/regressions/index.test.ts b/test/regressions/index.test.ts index 472ba8ee836c8..3f159c9bf6b5e 100644 --- a/test/regressions/index.test.ts +++ b/test/regressions/index.test.ts @@ -14,7 +14,12 @@ function sleep(timeoutMS: number | undefined) { const isMaterialUIv6 = materialPackageJson.version.startsWith('6.'); // Tests that need a longer timeout. -const timeSensitiveSuites = ['ColumnAutosizingAsync', 'DensitySelectorGrid']; +const timeSensitiveSuites = [ + 'ColumnAutosizingAsync', + 'DensitySelectorGrid', + 'DataGridOverlays', + 'PopularFeaturesDemo', +]; const isConsoleWarningIgnored = (msg?: string) => { const isMuiV6Error = diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js index 2ada3fe5f14ad..fc0446a9ae48d 100644 --- a/webpackBaseConfig.js +++ b/webpackBaseConfig.js @@ -21,10 +21,6 @@ module.exports = { '@mui/x-tree-view-pro': path.resolve(__dirname, './packages/x-tree-view-pro/src'), '@mui/x-license': path.resolve(__dirname, './packages/x-license/src'), '@mui/x-internals': path.resolve(__dirname, './packages/x-internals/src'), - '@mui/material-nextjs': path.resolve( - __dirname, - './node_modules/@mui/monorepo/packages/mui-material-nextjs/src', - ), docs: path.resolve(__dirname, './node_modules/@mui/monorepo/docs'), docsx: path.resolve(__dirname, './docs'), }, From 1eaf1d84d834ee06096bd21e8542713874ad82ce Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Thu, 19 Dec 2024 10:55:53 +0100 Subject: [PATCH 07/13] [pickers] Remove `PickersMonth` and `PickersYear` from the theme and remove the `div` wrapping each button (#15806) Signed-off-by: Flavien DELANGLE Co-authored-by: Nora <72460825+noraleonte@users.noreply.github.com> --- .../custom-components/MonthButtonComponent.js | 1 - .../MonthButtonComponent.tsx | 1 - .../custom-components/YearButtonComponent.js | 1 - .../custom-components/YearButtonComponent.tsx | 1 - .../date-picker/examplesConfig.styling.tsx | 24 +--- .../migration-pickers-v7.md | 98 +++++++++++++- .../x/api/date-pickers/month-calendar.json | 18 +++ .../x/api/date-pickers/year-calendar.json | 18 +++ .../modules/components/overview/MainDemo.tsx | 8 +- .../components/overview/themes/customTheme.ts | 8 +- .../modules/components/overview/themes/md3.ts | 15 +-- .../month-calendar/month-calendar.json | 15 ++- .../year-calendar/year-calendar.json | 15 ++- .../DateCalendar/tests/DateCalendar.test.tsx | 2 +- .../src/MonthCalendar/MonthCalendar.tsx | 38 ++++-- .../src/MonthCalendar/MonthCalendar.types.ts | 4 +- ...ckersMonth.tsx => MonthCalendarButton.tsx} | 125 ++++++------------ .../x-date-pickers/src/MonthCalendar/index.ts | 4 - .../src/MonthCalendar/monthCalendarClasses.ts | 8 +- .../src/MonthCalendar/pickersMonthClasses.ts | 28 ---- .../tests/MonthCalendar.test.tsx | 2 +- .../src/YearCalendar/YearCalendar.tsx | 50 +++++-- .../src/YearCalendar/YearCalendar.types.ts | 4 +- ...PickersYear.tsx => YearCalendarButton.tsx} | 119 ++++++----------- .../x-date-pickers/src/YearCalendar/index.ts | 3 - .../src/YearCalendar/pickersYearClasses.ts | 28 ---- .../YearCalendar/tests/YearCalendar.test.tsx | 14 +- .../src/YearCalendar/yearCalendarClasses.ts | 13 +- .../src/themeAugmentation/components.d.ts | 8 -- .../src/themeAugmentation/overrides.d.ts | 6 +- .../src/themeAugmentation/props.d.ts | 6 +- .../themeAugmentation.spec.ts | 36 ----- scripts/x-date-pickers-pro.exports.json | 8 -- scripts/x-date-pickers.exports.json | 8 -- 34 files changed, 356 insertions(+), 381 deletions(-) rename packages/x-date-pickers/src/MonthCalendar/{PickersMonth.tsx => MonthCalendarButton.tsx} (56%) delete mode 100644 packages/x-date-pickers/src/MonthCalendar/pickersMonthClasses.ts rename packages/x-date-pickers/src/YearCalendar/{PickersYear.tsx => YearCalendarButton.tsx} (59%) delete mode 100644 packages/x-date-pickers/src/YearCalendar/pickersYearClasses.ts diff --git a/docs/data/date-pickers/custom-components/MonthButtonComponent.js b/docs/data/date-pickers/custom-components/MonthButtonComponent.js index 8f0c336d4b22b..2b94d95414f82 100644 --- a/docs/data/date-pickers/custom-components/MonthButtonComponent.js +++ b/docs/data/date-pickers/custom-components/MonthButtonComponent.js @@ -6,7 +6,6 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; const CustomMonthButton = styled('button')({ - margin: '8px 0', height: 36, width: 72, }); diff --git a/docs/data/date-pickers/custom-components/MonthButtonComponent.tsx b/docs/data/date-pickers/custom-components/MonthButtonComponent.tsx index 8f0c336d4b22b..2b94d95414f82 100644 --- a/docs/data/date-pickers/custom-components/MonthButtonComponent.tsx +++ b/docs/data/date-pickers/custom-components/MonthButtonComponent.tsx @@ -6,7 +6,6 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; const CustomMonthButton = styled('button')({ - margin: '8px 0', height: 36, width: 72, }); diff --git a/docs/data/date-pickers/custom-components/YearButtonComponent.js b/docs/data/date-pickers/custom-components/YearButtonComponent.js index 6fe7a05365d87..eee824d0d8727 100644 --- a/docs/data/date-pickers/custom-components/YearButtonComponent.js +++ b/docs/data/date-pickers/custom-components/YearButtonComponent.js @@ -6,7 +6,6 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; const CustomYearButton = styled('button')({ - margin: '8px 0', height: 36, width: 72, }); diff --git a/docs/data/date-pickers/custom-components/YearButtonComponent.tsx b/docs/data/date-pickers/custom-components/YearButtonComponent.tsx index 6fe7a05365d87..eee824d0d8727 100644 --- a/docs/data/date-pickers/custom-components/YearButtonComponent.tsx +++ b/docs/data/date-pickers/custom-components/YearButtonComponent.tsx @@ -6,7 +6,6 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; const CustomYearButton = styled('button')({ - margin: '8px 0', height: 36, width: 72, }); diff --git a/docs/data/date-pickers/date-picker/examplesConfig.styling.tsx b/docs/data/date-pickers/date-picker/examplesConfig.styling.tsx index 07602069862ce..0e1a6e4e8c4e1 100644 --- a/docs/data/date-pickers/date-picker/examplesConfig.styling.tsx +++ b/docs/data/date-pickers/date-picker/examplesConfig.styling.tsx @@ -115,25 +115,7 @@ export const staticDatePickerExamples: PickersSubcomponentType = { componentProps: { views: ['month'] }, }, }, - slots: ['root'], - }, - PickersMonth: { - examples: { - customTheme: { - type: 'success', - componentProps: { views: ['month'] }, - }, - sxProp: { - type: 'success', - componentProps: { views: ['month'] }, - }, - - styledComponents: { - type: 'success', - componentProps: { views: ['month'] }, - }, - }, - slots: ['root', 'monthButton'], + slots: ['root', 'button'], }, }; @@ -240,7 +222,7 @@ export const datePickerExamples: PickersSubcomponentType = { }, slots: ['root', 'today'], }, - PickersMonth: { + MonthCalendar: { examples: { customTheme: { type: 'success', @@ -263,7 +245,7 @@ export const datePickerExamples: PickersSubcomponentType = { componentProps: { views: ['month'] }, }, }, - slots: ['root', 'monthButton'], + slots: ['button'], }, PickersTextField: { examples: { diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md index e442c69242932..6bc805040ba90 100644 --- a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md +++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md @@ -68,7 +68,9 @@ After running the codemods, make sure to test your application and that you don' Feel free to [open an issue](https://github.com/mui/mui-x/issues/new/choose) for support if you need help to proceed with your migration. ::: -## New DOM structure for the field +## Components breaking changes + +### New DOM structure for the field Before version `v7.x`, the fields' DOM structure consisted of an ``, which held the whole value for the component. Unfortunately it presented accessibility limitations, which are impossible to resolve. @@ -78,7 +80,7 @@ This approach is recommended in [W3C ARIA](https://www.w3.org/WAI/ARIA/apg/patte Starting with version `v8.x`, the new DOM structure is the default for all fields. -### Fallback to the non-accessible DOM structure +#### Fallback to the non-accessible DOM structure ```tsx @@ -86,7 +88,7 @@ Starting with version `v8.x`, the new DOM structure is the default for all field ``` -### Migrate `slotProps.field` +#### Migrate `slotProps.field` When using `slotProps.field` to pass props to your field component, the field consumes some props (for example `shouldRespectLeadingZeros`) and forwards the rest to the `TextField`. @@ -120,7 +122,7 @@ the field consumes some props (for example `shouldRespectLeadingZeros`) and forw /> ``` -### Migrate `slotProps.textField` +#### Migrate `slotProps.textField` If you are passing props to `slotProps.textField`, these props will now be received by `PickersTextField` and should keep working the same way as before. @@ -142,14 +144,14 @@ If you are passing `inputProps` to `slotProps.textField`, these props will now be passed to the hidden `` element. ::: -### Migrate `slots.field` +#### Migrate `slots.field` If you are passing a custom field component to your pickers, you need to create a new one that is using the accessible DOM structure. This new component will need to use the `PickersSectionList` component instead of an `` HTML element. You can have a look at the [Using a custom input](/x/react-date-pickers/custom-field/#using-a-custom-input) section to have a concrete example. -### Migrate `slots.textField` +#### Migrate `slots.textField` If you are passing a custom `TextField` component to your fields and pickers, you need to create a new one that is using the accessible DOM structure. @@ -162,7 +164,7 @@ please consider having a look at the [Using a custom input](/x/react-date-picker This approach can be more appropriate for deeper changes. ::: -### Migrate the theme +#### Migrate the theme If you are using the theme to customize `MuiTextField`, you need to pass the same config to `MuiPickersTextField`: @@ -260,6 +262,88 @@ const theme = createTheme({ }); ``` +### Month Calendar + +To simplify the theme and class structure, the `` component has been moved inside the Month Calendar component. +This change causes a few breaking changes: + +- The classes from `pickersMonthClasses` have been moved inside `monthCalendarClasses`: + + ```diff + -import { pickersMonthClasses } from '@mui/x-date-pickers/MonthCalendar'; + +import { monthCalendarClasses } from '@mui/x-date-pickers/MonthCalendar'; + + -const buttonClassName = pickersMonthClasses.monthButton; + +const buttonClassName = monthCalendarClasses.button; + + -const selectedButtonClassName = pickersMonthClasses.selected; + +const selectedButtonClassName = monthCalendarClasses.selected; + + -const disabledButtonClassName = pickersMonthClasses.disabled; + +const disabledButtonClassName = monthCalendarClasses.disabled; + ``` + +- The `monthButton` slot of the `PickersMonth` style overrides has been replaced by the `button` slot of the `MonthCalendar` theme entry: + + ```diff + const theme = createTheme({ + components: { + - PickersMonth: { + + MonthCalendar: { + styleOverrides: { + - monthButton: { + + button: { + color: 'red', + }, + }, + }, + }, + }); + ``` + +- The button to render a single month is no longer wrapped in a `
`, the spacing are instead defined inside the `root` slot of the Month Calendar. + +### Year Calendar + +To simplify the theme and class structure, the `` component has been moved inside the Year Calendar component. +This change causes a few breaking changes: + +- The classes from `pickersYearClasses` have been moved inside `yearCalendarClasses`: + + ```diff + -import { pickersYearClasses } from '@mui/x-date-pickers/YearCalendar'; + +import { yearCalendarClasses } from '@mui/x-date-pickers/YearCalendar'; + + -const buttonClassName = pickersYearClasses.monthButton; + +const buttonClassName = yearCalendarClasses.button; + + -const selectedButtonClassName = pickersYearClasses.selected; + +const selectedButtonClassName = yearCalendarClasses.selected; + + -const disabledButtonClassName = pickersYearClasses.disabled; + +const disabledButtonClassName = yearCalendarClasses.disabled; + ``` + +- The `yearButton` slot of the `PickersYear` style overrides has been replaced by the `button` slot of the `YearCalendar` theme entry: + + ```diff + const theme = createTheme({ + components: { + - PickersYear: { + + YearCalendar: { + styleOverrides: { + - yearButton: { + + button: { + color: 'red', + }, + }, + }, + }, + }); + ``` + +- The button to render a single year is no longer wrapped in a `
`, the spacing are instead defined inside the `root` slot of the Year Calendar. + ## Slots breaking changes ### Slot: `layout` diff --git a/docs/pages/x/api/date-pickers/month-calendar.json b/docs/pages/x/api/date-pickers/month-calendar.json index 1f23727e31371..fe50f964d8e86 100644 --- a/docs/pages/x/api/date-pickers/month-calendar.json +++ b/docs/pages/x/api/date-pickers/month-calendar.json @@ -70,11 +70,29 @@ } ], "classes": [ + { + "key": "button", + "className": "MuiMonthCalendar-button", + "description": "Styles applied to the button element that represents a single month", + "isGlobal": false + }, + { + "key": "disabled", + "className": "Mui-disabled", + "description": "Styles applied to a disabled button element.", + "isGlobal": true + }, { "key": "root", "className": "MuiMonthCalendar-root", "description": "Styles applied to the root element.", "isGlobal": false + }, + { + "key": "selected", + "className": "Mui-selected", + "description": "Styles applied to a selected button element.", + "isGlobal": true } ], "spread": true, diff --git a/docs/pages/x/api/date-pickers/year-calendar.json b/docs/pages/x/api/date-pickers/year-calendar.json index e40978126d0b7..cdb5e131d367e 100644 --- a/docs/pages/x/api/date-pickers/year-calendar.json +++ b/docs/pages/x/api/date-pickers/year-calendar.json @@ -74,11 +74,29 @@ } ], "classes": [ + { + "key": "button", + "className": "MuiYearCalendar-button", + "description": "Styles applied to the button element that represents a single year", + "isGlobal": false + }, + { + "key": "disabled", + "className": "Mui-disabled", + "description": "Styles applied to a disabled button element.", + "isGlobal": true + }, { "key": "root", "className": "MuiYearCalendar-root", "description": "Styles applied to the root element.", "isGlobal": false + }, + { + "key": "selected", + "className": "Mui-selected", + "description": "Styles applied to a selected button element.", + "isGlobal": true } ], "spread": true, diff --git a/docs/src/modules/components/overview/MainDemo.tsx b/docs/src/modules/components/overview/MainDemo.tsx index 52e697ed6fef9..cc3f2ce6125b5 100644 --- a/docs/src/modules/components/overview/MainDemo.tsx +++ b/docs/src/modules/components/overview/MainDemo.tsx @@ -26,9 +26,9 @@ const components: Components = { }), }, }, - MuiPickersMonth: { + MuiMonthCalendar: { styleOverrides: { - monthButton: ({ theme }) => ({ + button: ({ theme }) => ({ fontWeight: 400, fontSize: '0.875rem', borderRadius: theme.shape.borderRadius, @@ -37,9 +37,9 @@ const components: Components = { }), }, }, - MuiPickersYear: { + MuiYearCalendar: { styleOverrides: { - yearButton: ({ theme }) => ({ + button: ({ theme }) => ({ fontWeight: 400, fontSize: '0.875rem', borderRadius: theme.shape.borderRadius, diff --git a/docs/src/modules/components/overview/themes/customTheme.ts b/docs/src/modules/components/overview/themes/customTheme.ts index 64e2edc7dca3a..61440b5ce4aa1 100644 --- a/docs/src/modules/components/overview/themes/customTheme.ts +++ b/docs/src/modules/components/overview/themes/customTheme.ts @@ -371,16 +371,16 @@ export const getCustomTheme = (mode: PaletteMode, config: Config): ThemeOptions }), }, }, - MuiPickersMonth: { + MuiMonthCalendar: { styleOverrides: { - monthButton: ({ theme }) => ({ + button: ({ theme }) => ({ borderRadius: theme.shape.borderRadius, }), }, }, - MuiPickersYear: { + MuiYearCalendar: { styleOverrides: { - yearButton: ({ theme }) => ({ + button: ({ theme }) => ({ borderRadius: theme.shape.borderRadius, }), }, diff --git a/docs/src/modules/components/overview/themes/md3.ts b/docs/src/modules/components/overview/themes/md3.ts index 8a13b16b2799f..c7506eaf5ed77 100644 --- a/docs/src/modules/components/overview/themes/md3.ts +++ b/docs/src/modules/components/overview/themes/md3.ts @@ -245,7 +245,6 @@ export const getMD3Theme = (mode: PaletteMode, config: Config): ThemeOptions => height: 'fit-content', maxHeight: 'initial', }, - viewTransitionContainer: ({ theme }) => ({ height: theme.mixins.density.height * 7 + theme.mixins.density.spacing * 6, }), @@ -258,6 +257,11 @@ export const getMD3Theme = (mode: PaletteMode, config: Config): ThemeOptions => borderBottom: `1px solid ${theme.palette.divider}`, alignContent: 'flex-start', width: theme.mixins.density.width * 7 + theme.mixins.density.spacing * 6 + 40, + columnGap: '12px', + }), + button: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + height: theme.mixins.density.height, }), }, }, @@ -298,15 +302,6 @@ export const getMD3Theme = (mode: PaletteMode, config: Config): ThemeOptions => }), }, }, - MuiPickersYear: { - styleOverrides: { - yearButton: ({ theme, ownerState }) => ({ - borderRadius: theme.shape.borderRadius, - height: theme.mixins.density.height, - ...(!ownerState.selected && { color: theme.palette.text.secondary }), - }), - }, - }, MuiCard: { styleOverrides: { root: { diff --git a/docs/translations/api-docs/date-pickers/month-calendar/month-calendar.json b/docs/translations/api-docs/date-pickers/month-calendar/month-calendar.json index 547d39e20c12e..c9ada403d18bb 100644 --- a/docs/translations/api-docs/date-pickers/month-calendar/month-calendar.json +++ b/docs/translations/api-docs/date-pickers/month-calendar/month-calendar.json @@ -48,7 +48,20 @@ }, "value": { "description": "The selected value. Used when the component is controlled." } }, - "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, + "classDescriptions": { + "button": { + "description": "Styles applied to the button element that represents a single month" + }, + "disabled": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "a disabled button element" + }, + "root": { "description": "Styles applied to the root element." }, + "selected": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "a selected button element" + } + }, "slotDescriptions": { "monthButton": "Button displayed to render a single month in the month view." } diff --git a/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json b/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json index 3741404f4a847..59ad06a05723d 100644 --- a/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json +++ b/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json @@ -51,7 +51,20 @@ }, "yearsPerRow": { "description": "Years rendered per row." } }, - "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, + "classDescriptions": { + "button": { + "description": "Styles applied to the button element that represents a single year" + }, + "disabled": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "a disabled button element" + }, + "root": { "description": "Styles applied to the root element." }, + "selected": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "a selected button element" + } + }, "slotDescriptions": { "yearButton": "Button displayed to render a single year in the year view." } diff --git a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx index aafc00857bd53..a6456ef66a570 100644 --- a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx +++ b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx @@ -439,7 +439,7 @@ describe('', () => { it('renders year selection standalone', () => { render(); - expect(screen.getAllByTestId('year')).to.have.length(200); + expect(screen.getAllByRole('radio')).to.have.length(200); }); it('should select the closest enabled date in the month if the current date is disabled', () => { diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx index 0667892ee47c3..d57564fdd172a 100644 --- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx +++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { useRtl } from '@mui/system/RtlProvider'; +import { shouldForwardProp } from '@mui/system/createStyled'; import { styled, useThemeProps } from '@mui/material/styles'; import { unstable_useControlled as useControlled, @@ -10,7 +11,7 @@ import { unstable_useEventCallback as useEventCallback, } from '@mui/utils'; import { DefaultizedProps } from '@mui/x-internals/types'; -import { PickersMonth } from './PickersMonth'; +import { MonthCalendarButton } from './MonthCalendarButton'; import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils'; import { getMonthCalendarUtilityClass, MonthCalendarClasses } from './monthCalendarClasses'; import { applyDefaultDate, getMonthsInYear } from '../internals/utils/date-utils'; @@ -33,7 +34,10 @@ const useUtilityClasses = (classes: Partial | undefined) = export function useMonthCalendarDefaultizedProps( props: MonthCalendarProps, name: string, -): DefaultizedProps { +): DefaultizedProps< + MonthCalendarProps, + 'minDate' | 'maxDate' | 'disableFuture' | 'disablePast' | 'monthsPerRow' +> { const utils = useUtils(); const defaultDates = useDefaultDates(); const themeProps = useThemeProps({ @@ -45,6 +49,7 @@ export function useMonthCalendarDefaultizedProps( disableFuture: false, disablePast: false, ...themeProps, + monthsPerRow: themeProps.monthsPerRow ?? 3, minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate), maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate), }; @@ -54,14 +59,26 @@ const MonthCalendarRoot = styled('div', { name: 'MuiMonthCalendar', slot: 'Root', overridesResolver: (props, styles) => styles.root, -})<{ ownerState: PickerOwnerState }>({ + shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'monthsPerRow', +})<{ ownerState: PickerOwnerState; monthsPerRow: 3 | 4 }>({ display: 'flex', flexWrap: 'wrap', - alignContent: 'stretch', - padding: '0 4px', + justifyContent: 'space-evenly', + rowGap: 16, + padding: '8px 0', width: DIALOG_WIDTH, // avoid padding increasing width over defined boxSizing: 'border-box', + variants: [ + { + props: { monthsPerRow: 3 }, + style: { columnGap: 24 }, + }, + { + props: { monthsPerRow: 4 }, + style: { columnGap: 0 }, + }, + ], }); type MonthCalendarComponent = (( @@ -83,6 +100,7 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar( ) { const props = useMonthCalendarDefaultizedProps(inProps, 'MuiMonthCalendar'); const { + autoFocus, className, classes: classesProp, value: valueProp, @@ -97,11 +115,10 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar( shouldDisableMonth, readOnly, disableHighlightToday, - autoFocus = false, onMonthFocus, hasFocus, onFocusedViewChange, - monthsPerRow = 3, + monthsPerRow, timezone: timezoneProp, gridLabelId, slots, @@ -268,6 +285,7 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar( ownerState={ownerState} role="radiogroup" aria-labelledby={gridLabelId} + monthsPerRow={monthsPerRow} {...other} > {getMonthsInYear(utils, value ?? referenceDate).map((month) => { @@ -278,7 +296,7 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar( const isDisabled = disabled || isMonthDisabled(month); return ( - {monthText} - + ); })} diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts index 14506792ce94d..05b1b4a0fd473 100644 --- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts +++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts @@ -7,7 +7,7 @@ import { BaseDateValidationProps, MonthValidationProps } from '../internals/mode import { PickerOwnerState, PickerValidDate, TimezoneProps } from '../models'; import { FormProps } from '../internals/models/formProps'; -export interface PickerMonthOwnerState extends PickerOwnerState { +export interface MonthButtonOwnerState extends PickerOwnerState { isMonthSelected: boolean; isMonthDisabled: boolean; } @@ -24,7 +24,7 @@ export interface MonthCalendarSlotProps { monthButton?: SlotComponentPropsFromProps< React.HTMLAttributes & { sx: SxProps }, {}, - PickerMonthOwnerState + MonthButtonOwnerState >; } diff --git a/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx b/packages/x-date-pickers/src/MonthCalendar/MonthCalendarButton.tsx similarity index 56% rename from packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx rename to packages/x-date-pickers/src/MonthCalendar/MonthCalendarButton.tsx index 992053d82bc92..4702657cc0367 100644 --- a/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx +++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendarButton.tsx @@ -1,91 +1,69 @@ import * as React from 'react'; -import clsx from 'clsx'; -import { styled, alpha, useThemeProps } from '@mui/material/styles'; +import { styled, alpha } from '@mui/material/styles'; import useSlotProps from '@mui/utils/useSlotProps'; import composeClasses from '@mui/utils/composeClasses'; import useEnhancedEffect from '@mui/utils/useEnhancedEffect'; -import { - getPickersMonthUtilityClass, - pickersMonthClasses, - PickersMonthClasses, -} from './pickersMonthClasses'; import { MonthCalendarSlotProps, MonthCalendarSlots, - PickerMonthOwnerState, + MonthButtonOwnerState, } from './MonthCalendar.types'; import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext'; +import { + getMonthCalendarUtilityClass, + monthCalendarClasses, + MonthCalendarClasses, +} from './monthCalendarClasses'; -export interface ExportedPickersMonthProps { - classes?: Partial; -} - -export interface PickersMonthProps extends ExportedPickersMonthProps { - 'aria-current'?: React.AriaAttributes['aria-current']; - 'aria-label'?: React.AriaAttributes['aria-label']; +export interface MonthCalendarButtonProps { + value: number; + tabIndex: number; + selected: boolean; + disabled: boolean; autoFocus: boolean; + classes: Partial | undefined; + slots: MonthCalendarSlots | undefined; + slotProps: MonthCalendarSlotProps | undefined; + 'aria-current': React.AriaAttributes['aria-current']; + 'aria-label': React.AriaAttributes['aria-label']; children: React.ReactNode; - className?: string; - disabled?: boolean; onClick: (event: React.MouseEvent, month: number) => void; onKeyDown: (event: React.KeyboardEvent, month: number) => void; onFocus: (event: React.FocusEvent, month: number) => void; onBlur: (event: React.FocusEvent, month: number) => void; - selected?: boolean; - value: number; - tabIndex: number; - monthsPerRow: 3 | 4; - slots?: MonthCalendarSlots; - slotProps?: MonthCalendarSlotProps; } const useUtilityClasses = ( - classes: Partial | undefined, - ownerState: PickerMonthOwnerState, + classes: Partial | undefined, + ownerState: MonthButtonOwnerState, ) => { const slots = { - root: ['root'], - monthButton: [ - 'monthButton', + button: [ + 'button', ownerState.isMonthDisabled && 'disabled', ownerState.isMonthSelected && 'selected', ], }; - return composeClasses(slots, getPickersMonthUtilityClass, classes); + return composeClasses(slots, getMonthCalendarUtilityClass, classes); }; -const PickersMonthRoot = styled('div', { - name: 'MuiPickersMonth', - slot: 'Root', - overridesResolver: (_, styles) => [styles.root], -})<{ - ownerState: PickerMonthOwnerState; -}>({ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - flexBasis: '33.3%', - variants: [{ props: { monthsPerRow: 4 }, style: { flexBasis: '25%' } }], -}); - -const MonthCalendarButton = styled('button', { - name: 'MuiPickersMonth', - slot: 'MonthButton', +const DefaultMonthButton = styled('button', { + name: 'MuiMonthCalendar', + slot: 'Button', overridesResolver: (_, styles) => [ - styles.monthButton, - { [`&.${pickersMonthClasses.disabled}`]: styles.disabled }, - { [`&.${pickersMonthClasses.selected}`]: styles.selected }, + styles.button, + { [`&.${monthCalendarClasses.disabled}`]: styles.disabled }, + { [`&.${monthCalendarClasses.selected}`]: styles.selected }, ], })<{ - ownerState?: PickerMonthOwnerState; + ownerState?: MonthButtonOwnerState; }>(({ theme }) => ({ color: 'unset', backgroundColor: 'transparent', border: 0, outline: 0, ...theme.typography.subtitle1, - margin: '8px 0', height: 36, width: 72, borderRadius: 18, @@ -104,10 +82,10 @@ const MonthCalendarButton = styled('button', { cursor: 'auto', pointerEvents: 'none', }, - [`&.${pickersMonthClasses.disabled}`]: { + [`&.${monthCalendarClasses.disabled}`]: { color: (theme.vars || theme).palette.text.secondary, }, - [`&.${pickersMonthClasses.selected}`]: { + [`&.${monthCalendarClasses.selected}`]: { color: (theme.vars || theme).palette.primary.contrastText, backgroundColor: (theme.vars || theme).palette.primary.main, '&:focus, &:hover': { @@ -119,28 +97,19 @@ const MonthCalendarButton = styled('button', { /** * @ignore - do not document. */ -export const PickersMonth = React.memo(function PickersMonth(inProps: PickersMonthProps) { - const props = useThemeProps({ - props: inProps, - name: 'MuiPickersMonth', - }); +export const MonthCalendarButton = React.memo(function MonthCalendarButton( + props: MonthCalendarButtonProps, +) { const { autoFocus, - className, classes: classesProp, - children, - disabled = false, - selected = false, + disabled, + selected, value, - tabIndex, onClick, onKeyDown, onFocus, onBlur, - 'aria-current': ariaCurrent, - 'aria-label': ariaLabel, - // We don't want to forward this prop to the root element - monthsPerRow, slots, slotProps, ...other @@ -148,7 +117,7 @@ export const PickersMonth = React.memo(function PickersMonth(inProps: PickersMon const ref = React.useRef(null); const { ownerState: pickerOwnerState } = usePickerPrivateContext(); - const ownerState: PickerMonthOwnerState = { + const ownerState: MonthButtonOwnerState = { ...pickerOwnerState, isMonthDisabled: disabled, isMonthSelected: selected, @@ -164,37 +133,25 @@ export const PickersMonth = React.memo(function PickersMonth(inProps: PickersMon } }, [autoFocus]); - const MonthButton = slots?.monthButton ?? MonthCalendarButton; + const MonthButton = slots?.monthButton ?? DefaultMonthButton; const monthButtonProps = useSlotProps({ elementType: MonthButton, externalSlotProps: slotProps?.monthButton, + externalForwardedProps: other, additionalProps: { - children, disabled, - tabIndex, ref, type: 'button' as const, role: 'radio', - 'aria-current': ariaCurrent, 'aria-checked': selected, - 'aria-label': ariaLabel, onClick: (event: React.MouseEvent) => onClick(event, value), onKeyDown: (event: React.KeyboardEvent) => onKeyDown(event, value), onFocus: (event: React.FocusEvent) => onFocus(event, value), onBlur: (event: React.FocusEvent) => onBlur(event, value), }, ownerState, - className: classes.monthButton, + className: classes.button, }); - return ( - - - - ); + return ; }); diff --git a/packages/x-date-pickers/src/MonthCalendar/index.ts b/packages/x-date-pickers/src/MonthCalendar/index.ts index c7f6f59c9b89a..fa29a7bb17142 100644 --- a/packages/x-date-pickers/src/MonthCalendar/index.ts +++ b/packages/x-date-pickers/src/MonthCalendar/index.ts @@ -7,7 +7,3 @@ export type { export { monthCalendarClasses, getMonthCalendarUtilityClass } from './monthCalendarClasses'; export type { MonthCalendarClasses, MonthCalendarClassKey } from './monthCalendarClasses'; - -export { pickersMonthClasses } from './pickersMonthClasses'; -export type { PickersMonthClassKey, PickersMonthClasses } from './pickersMonthClasses'; -export type { ExportedPickersMonthProps } from './PickersMonth'; diff --git a/packages/x-date-pickers/src/MonthCalendar/monthCalendarClasses.ts b/packages/x-date-pickers/src/MonthCalendar/monthCalendarClasses.ts index 7f2cb1a3cf4df..a2e15ce85a083 100644 --- a/packages/x-date-pickers/src/MonthCalendar/monthCalendarClasses.ts +++ b/packages/x-date-pickers/src/MonthCalendar/monthCalendarClasses.ts @@ -10,11 +10,17 @@ export function getMonthCalendarUtilityClass(slot: string) { export interface MonthCalendarClasses { /** Styles applied to the root element. */ root: string; + /** Styles applied to the button element that represents a single month */ + button: string; + /** Styles applied to a disabled button element. */ + disabled: string; + /** Styles applied to a selected button element. */ + selected: string; } export type MonthCalendarClassKey = keyof MonthCalendarClasses; export const monthCalendarClasses = generateUtilityClasses( 'MuiMonthCalendar', - ['root'], + ['root', 'button', 'disabled', 'selected'], ); diff --git a/packages/x-date-pickers/src/MonthCalendar/pickersMonthClasses.ts b/packages/x-date-pickers/src/MonthCalendar/pickersMonthClasses.ts deleted file mode 100644 index 4070fc9ab04a1..0000000000000 --- a/packages/x-date-pickers/src/MonthCalendar/pickersMonthClasses.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { - unstable_generateUtilityClass as generateUtilityClass, - unstable_generateUtilityClasses as generateUtilityClasses, -} from '@mui/utils'; - -export interface PickersMonthClasses { - /** Styles applied to the root element. */ - root: string; - /** Styles applied to the month button element. */ - monthButton: string; - /** Styles applied to a disabled month button element. */ - disabled: string; - /** Styles applied to a selected month button element. */ - selected: string; -} - -export type PickersMonthClassKey = keyof PickersMonthClasses; - -export function getPickersMonthUtilityClass(slot: string) { - return generateUtilityClass('MuiPickersMonth', slot); -} - -export const pickersMonthClasses = generateUtilityClasses('MuiPickersMonth', [ - 'root', - 'monthButton', - 'disabled', - 'selected', -]); diff --git a/packages/x-date-pickers/src/MonthCalendar/tests/MonthCalendar.test.tsx b/packages/x-date-pickers/src/MonthCalendar/tests/MonthCalendar.test.tsx index 72037d514c1ca..572a9703454d9 100644 --- a/packages/x-date-pickers/src/MonthCalendar/tests/MonthCalendar.test.tsx +++ b/packages/x-date-pickers/src/MonthCalendar/tests/MonthCalendar.test.tsx @@ -52,7 +52,7 @@ describe('', () => { expect(onChangeMock.callCount).to.equal(0); }); - it('clicking on a PickersMonth button should not trigger the form submit', () => { + it('clicking on a month button should not trigger the form submit', () => { const onSubmitMock = spy(); render(
diff --git a/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx b/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx index 423c78caf2df1..dcaf7d8ce4369 100644 --- a/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx +++ b/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { useRtl } from '@mui/system/RtlProvider'; +import { shouldForwardProp } from '@mui/system/createStyled'; import { styled, useThemeProps } from '@mui/material/styles'; import { unstable_useForkRef as useForkRef, @@ -11,7 +12,7 @@ import { unstable_useEventCallback as useEventCallback, } from '@mui/utils'; import { DefaultizedProps } from '@mui/x-internals/types'; -import { PickersYear } from './PickersYear'; +import { YearCalendarButton } from './YearCalendarButton'; import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils'; import { getYearCalendarUtilityClass, YearCalendarClasses } from './yearCalendarClasses'; import { applyDefaultDate } from '../internals/utils/date-utils'; @@ -36,7 +37,7 @@ function useYearCalendarDefaultizedProps( name: string, ): DefaultizedProps< YearCalendarProps, - 'minDate' | 'maxDate' | 'disableFuture' | 'disablePast' | 'yearsPerRow' + 'minDate' | 'maxDate' | 'disableFuture' | 'disablePast' | 'yearsPerRow' | 'yearsOrder' > { const utils = useUtils(); const defaultDates = useDefaultDates(); @@ -50,6 +51,7 @@ function useYearCalendarDefaultizedProps( disableFuture: false, ...themeProps, yearsPerRow: themeProps.yearsPerRow ?? 3, + yearsOrder: themeProps.yearsOrder ?? 'asc', minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate), maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate), }; @@ -58,19 +60,38 @@ function useYearCalendarDefaultizedProps( const YearCalendarRoot = styled('div', { name: 'MuiYearCalendar', slot: 'Root', - overridesResolver: (props, styles) => styles.root, -})<{ ownerState: PickerOwnerState }>({ + shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'yearsPerRow', +})<{ ownerState: PickerOwnerState; yearsPerRow: 3 | 4 }>({ display: 'flex', - flexDirection: 'row', flexWrap: 'wrap', + justifyContent: 'space-evenly', + rowGap: 12, + padding: '6px 0', overflowY: 'auto', height: '100%', - padding: '0 4px', width: DIALOG_WIDTH, maxHeight: MAX_CALENDAR_HEIGHT, // avoid padding increasing width over defined boxSizing: 'border-box', position: 'relative', + variants: [ + { + props: { yearsPerRow: 3 }, + style: { columnGap: 24 }, + }, + { + props: { yearsPerRow: 4 }, + style: { columnGap: 0, padding: '0 2px' }, + }, + ], +}); + +const YearCalendarButtonFiller = styled('div', { + name: 'MuiYearCalendar', + slot: 'ButtonFiller', +})({ + height: 36, + width: 72, }); type YearCalendarComponent = ((props: YearCalendarProps) => React.JSX.Element) & { @@ -110,7 +131,7 @@ export const YearCalendar = React.forwardRef(function YearCalendar( onYearFocus, hasFocus, onFocusedViewChange, - yearsOrder = 'asc', + yearsOrder, yearsPerRow, timezone: timezoneProp, gridLabelId, @@ -294,6 +315,11 @@ export const YearCalendar = React.forwardRef(function YearCalendar( yearRange.reverse(); } + let fillerAmount = yearsPerRow - (yearRange.length % yearsPerRow); + if (fillerAmount === yearsPerRow) { + fillerAmount = 0; + } + return ( {yearRange.map((year) => { @@ -309,7 +336,7 @@ export const YearCalendar = React.forwardRef(function YearCalendar( const isDisabled = disabled || isYearDisabled(year); return ( - {utils.format(year, 'year')} - + ); })} + {Array.from({ length: fillerAmount }, (_, index) => ( + + ))} ); }) as YearCalendarComponent; diff --git a/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts b/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts index 8b7604afbe4aa..955aa0cffc777 100644 --- a/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts +++ b/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts @@ -7,7 +7,7 @@ import { BaseDateValidationProps, YearValidationProps } from '../internals/model import { PickerOwnerState, PickerValidDate, TimezoneProps } from '../models'; import { FormProps } from '../internals/models/formProps'; -export interface PickerYearOwnerState extends PickerOwnerState { +export interface YearButtonOwnerState extends PickerOwnerState { isYearSelected: boolean; isYearDisabled: boolean; } @@ -24,7 +24,7 @@ export interface YearCalendarSlotProps { yearButton?: SlotComponentPropsFromProps< React.HTMLAttributes & { sx: SxProps }, {}, - PickerYearOwnerState + YearButtonOwnerState >; } diff --git a/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx b/packages/x-date-pickers/src/YearCalendar/YearCalendarButton.tsx similarity index 59% rename from packages/x-date-pickers/src/YearCalendar/PickersYear.tsx rename to packages/x-date-pickers/src/YearCalendar/YearCalendarButton.tsx index 80f81f95d0a2d..4362bceb4fcef 100644 --- a/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx +++ b/packages/x-date-pickers/src/YearCalendar/YearCalendarButton.tsx @@ -1,79 +1,60 @@ import * as React from 'react'; -import clsx from 'clsx'; -import { styled, alpha, useThemeProps } from '@mui/material/styles'; +import { styled, alpha } from '@mui/material/styles'; import useSlotProps from '@mui/utils/useSlotProps'; import composeClasses from '@mui/utils/composeClasses'; import useEnhancedEffect from '@mui/utils/useEnhancedEffect'; import { - getPickersYearUtilityClass, - pickersYearClasses, - PickersYearClasses, -} from './pickersYearClasses'; -import { - PickerYearOwnerState, + YearButtonOwnerState, YearCalendarSlotProps, YearCalendarSlots, } from './YearCalendar.types'; import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext'; import { PickerOwnerState } from '../models/pickers'; +import { + getYearCalendarUtilityClass, + yearCalendarClasses, + YearCalendarClasses, +} from './yearCalendarClasses'; -export interface ExportedPickersYearProps { - classes?: Partial; -} - -export interface PickersYearProps extends ExportedPickersYearProps { - 'aria-current'?: React.AriaAttributes['aria-current']; - autoFocus?: boolean; +export interface YearCalendarButtonProps { + value: number; + tabIndex: number; + selected: boolean; + disabled: boolean; + autoFocus: boolean; + classes: Partial | undefined; + slots: YearCalendarSlots | undefined; + slotProps: YearCalendarSlotProps | undefined; + 'aria-current': React.AriaAttributes['aria-current']; children: React.ReactNode; - className?: string; - disabled?: boolean; onClick: (event: React.MouseEvent, year: number) => void; onKeyDown: (event: React.KeyboardEvent, year: number) => void; onFocus: (event: React.FocusEvent, year: number) => void; onBlur: (event: React.FocusEvent, year: number) => void; - selected: boolean; - value: number; - tabIndex: number; - yearsPerRow: 3 | 4; - slots?: YearCalendarSlots; - slotProps?: YearCalendarSlotProps; } const useUtilityClasses = ( - classes: Partial | undefined, - ownerState: PickerYearOwnerState, + classes: Partial | undefined, + ownerState: YearButtonOwnerState, ) => { const slots = { - root: ['root'], - yearButton: [ - 'yearButton', + button: [ + 'button', ownerState.isYearDisabled && 'disabled', ownerState.isYearSelected && 'selected', ], }; - return composeClasses(slots, getPickersYearUtilityClass, classes); + return composeClasses(slots, getYearCalendarUtilityClass, classes); }; -const PickersYearRoot = styled('div', { - name: 'MuiPickersYear', - slot: 'Root', - overridesResolver: (_, styles) => [styles.root], -})<{ ownerState: PickerOwnerState }>({ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - flexBasis: '33.3%', - variants: [{ props: { yearsPerRow: 4 }, style: { flexBasis: '25%' } }], -}); - -const YearCalendarButton = styled('button', { - name: 'MuiPickersYear', - slot: 'YearButton', +const DefaultYearButton = styled('button', { + name: 'MuiYearCalendar', + slot: 'Button', overridesResolver: (_, styles) => [ - styles.yearButton, - { [`&.${pickersYearClasses.disabled}`]: styles.disabled }, - { [`&.${pickersYearClasses.selected}`]: styles.selected }, + styles.button, + { [`&.${yearCalendarClasses.disabled}`]: styles.disabled }, + { [`&.${yearCalendarClasses.selected}`]: styles.selected }, ], })<{ ownerState: PickerOwnerState }>(({ theme }) => ({ color: 'unset', @@ -81,7 +62,6 @@ const YearCalendarButton = styled('button', { border: 0, outline: 0, ...theme.typography.subtitle1, - margin: '6px 0', height: 36, width: 72, borderRadius: 18, @@ -100,10 +80,10 @@ const YearCalendarButton = styled('button', { cursor: 'auto', pointerEvents: 'none', }, - [`&.${pickersYearClasses.disabled}`]: { + [`&.${yearCalendarClasses.disabled}`]: { color: (theme.vars || theme).palette.text.secondary, }, - [`&.${pickersYearClasses.selected}`]: { + [`&.${yearCalendarClasses.selected}`]: { color: (theme.vars || theme).palette.primary.contrastText, backgroundColor: (theme.vars || theme).palette.primary.main, '&:focus, &:hover': { @@ -115,27 +95,19 @@ const YearCalendarButton = styled('button', { /** * @ignore - internal component. */ -export const PickersYear = React.memo(function PickersYear(inProps: PickersYearProps) { - const props = useThemeProps({ - props: inProps, - name: 'MuiPickersYear', - }); +export const YearCalendarButton = React.memo(function YearCalendarButton( + props: YearCalendarButtonProps, +) { const { autoFocus, - className, classes: classesProp, - children, - disabled = false, - selected = false, + disabled, + selected, value, - tabIndex, onClick, onKeyDown, onFocus, onBlur, - 'aria-current': ariaCurrent, - // We don't want to forward this prop to the root element - yearsPerRow, slots, slotProps, ...other @@ -143,7 +115,7 @@ export const PickersYear = React.memo(function PickersYear(inProps: PickersYearP const ref = React.useRef(null); const { ownerState: pickerOwnerState } = usePickerPrivateContext(); - const ownerState: PickerYearOwnerState = { + const ownerState: YearButtonOwnerState = { ...pickerOwnerState, isYearDisabled: disabled, isYearSelected: selected, @@ -158,18 +130,16 @@ export const PickersYear = React.memo(function PickersYear(inProps: PickersYearP } }, [autoFocus]); - const YearButton = slots?.yearButton ?? YearCalendarButton; + const YearButton = slots?.yearButton ?? DefaultYearButton; const yearButtonProps = useSlotProps({ elementType: YearButton, externalSlotProps: slotProps?.yearButton, + externalForwardedProps: other, additionalProps: { - children, disabled, - tabIndex, ref, type: 'button' as const, role: 'radio', - 'aria-current': ariaCurrent, 'aria-checked': selected, onClick: (event: React.MouseEvent) => onClick(event, value), onKeyDown: (event: React.KeyboardEvent) => onKeyDown(event, value), @@ -177,17 +147,8 @@ export const PickersYear = React.memo(function PickersYear(inProps: PickersYearP onBlur: (event: React.FocusEvent) => onBlur(event, value), }, ownerState, - className: classes.yearButton, + className: classes.button, }); - return ( - - - - ); + return ; }); diff --git a/packages/x-date-pickers/src/YearCalendar/index.ts b/packages/x-date-pickers/src/YearCalendar/index.ts index fce796c41eeb2..0dc3d85906110 100644 --- a/packages/x-date-pickers/src/YearCalendar/index.ts +++ b/packages/x-date-pickers/src/YearCalendar/index.ts @@ -7,6 +7,3 @@ export type { export { yearCalendarClasses, getYearCalendarUtilityClass } from './yearCalendarClasses'; export type { YearCalendarClasses, YearCalendarClassKey } from './yearCalendarClasses'; -export { pickersYearClasses } from './pickersYearClasses'; -export type { PickersYearClasses, PickersYearClassKey } from './pickersYearClasses'; -export type { ExportedPickersYearProps } from './PickersYear'; diff --git a/packages/x-date-pickers/src/YearCalendar/pickersYearClasses.ts b/packages/x-date-pickers/src/YearCalendar/pickersYearClasses.ts deleted file mode 100644 index 67a37ee31b212..0000000000000 --- a/packages/x-date-pickers/src/YearCalendar/pickersYearClasses.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { - unstable_generateUtilityClass as generateUtilityClass, - unstable_generateUtilityClasses as generateUtilityClasses, -} from '@mui/utils'; - -export interface PickersYearClasses { - /** Styles applied to the root element. */ - root: string; - /** Styles applied to the year button element. */ - yearButton: string; - /** Styles applied to a selected year button element. */ - selected: string; - /** Styles applied to a disabled year button element. */ - disabled: string; -} - -export type PickersYearClassKey = keyof PickersYearClasses; - -export function getPickersYearUtilityClass(slot: string) { - return generateUtilityClass('MuiPickersYear', slot); -} - -export const pickersYearClasses = generateUtilityClasses('MuiPickersYear', [ - 'root', - 'yearButton', - 'selected', - 'disabled', -]); diff --git a/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx b/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx index 630b5ab09fdd5..77cc4f757b1ff 100644 --- a/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx +++ b/packages/x-date-pickers/src/YearCalendar/tests/YearCalendar.test.tsx @@ -57,8 +57,8 @@ describe('', () => { />, ); - const yearButttons = screen.queryAllByTestId('year'); - expect(yearButttons[0].children.item(0)?.textContent).to.equal('2020'); + const yearButtons = screen.queryAllByRole('radio'); + expect(yearButtons[0]?.textContent).to.equal('2020'); }); it('should display years in descending (reverse chronological) order when props.yearsOrder = "desc"', () => { @@ -70,8 +70,8 @@ describe('', () => { />, ); - const yearButtons = screen.queryAllByTestId('year'); - expect(yearButtons[0].children.item(0)?.textContent).to.equal('2024'); + const yearButtons = screen.queryAllByRole('radio'); + expect(yearButtons[0]?.textContent).to.equal('2024'); }); describe('Disabled', () => { @@ -79,9 +79,9 @@ describe('', () => { const onChange = spy(); render(); - screen.getAllByRole('radio').forEach((monthButton) => { - expect(monthButton).to.have.attribute('disabled'); - fireEvent.click(monthButton); + screen.getAllByRole('radio').forEach((yearButton) => { + expect(yearButton).to.have.attribute('disabled'); + fireEvent.click(yearButton); expect(onChange.callCount).to.equal(0); }); }); diff --git a/packages/x-date-pickers/src/YearCalendar/yearCalendarClasses.ts b/packages/x-date-pickers/src/YearCalendar/yearCalendarClasses.ts index 8d9962731b5b4..67e4666c52f06 100644 --- a/packages/x-date-pickers/src/YearCalendar/yearCalendarClasses.ts +++ b/packages/x-date-pickers/src/YearCalendar/yearCalendarClasses.ts @@ -6,6 +6,12 @@ import { export interface YearCalendarClasses { /** Styles applied to the root element. */ root: string; + /** Styles applied to the button element that represents a single year */ + button: string; + /** Styles applied to a disabled button element. */ + disabled: string; + /** Styles applied to a selected button element. */ + selected: string; } export type YearCalendarClassKey = keyof YearCalendarClasses; @@ -14,4 +20,9 @@ export function getYearCalendarUtilityClass(slot: string) { return generateUtilityClass('MuiYearCalendar', slot); } -export const yearCalendarClasses = generateUtilityClasses('MuiYearCalendar', ['root']); +export const yearCalendarClasses = generateUtilityClasses('MuiYearCalendar', [ + 'root', + 'button', + 'disabled', + 'selected', +]); diff --git a/packages/x-date-pickers/src/themeAugmentation/components.d.ts b/packages/x-date-pickers/src/themeAugmentation/components.d.ts index 7ec1df957c555..fe83141400e00 100644 --- a/packages/x-date-pickers/src/themeAugmentation/components.d.ts +++ b/packages/x-date-pickers/src/themeAugmentation/components.d.ts @@ -78,10 +78,6 @@ export interface PickerComponents { defaultProps?: ComponentsProps['MuiPickersFadeTransitionGroup']; styleOverrides?: ComponentsOverrides['MuiPickersFadeTransitionGroup']; }; - MuiPickersMonth?: { - defaultProps?: ComponentsProps['MuiPickersMonth']; - styleOverrides?: ComponentsOverrides['MuiPickersMonth']; - }; MuiPickersPopper?: { defaultProps?: ComponentsProps['MuiPickersPopper']; styleOverrides?: ComponentsOverrides['MuiPickersPopper']; @@ -106,10 +102,6 @@ export interface PickerComponents { defaultProps?: ComponentsProps['MuiPickersLayout']; styleOverrides?: ComponentsOverrides['MuiPickersLayout']; }; - MuiPickersYear?: { - defaultProps?: ComponentsProps['MuiPickersYear']; - styleOverrides?: ComponentsOverrides['MuiPickersYear']; - }; MuiTimeClock?: { defaultProps?: ComponentsProps['MuiTimeClock']; styleOverrides?: ComponentsOverrides['MuiTimeClock']; diff --git a/packages/x-date-pickers/src/themeAugmentation/overrides.d.ts b/packages/x-date-pickers/src/themeAugmentation/overrides.d.ts index 085620287683f..2722d0ad6267d 100644 --- a/packages/x-date-pickers/src/themeAugmentation/overrides.d.ts +++ b/packages/x-date-pickers/src/themeAugmentation/overrides.d.ts @@ -12,9 +12,9 @@ import { TimeClockClassKey, ClockPointerClassKey, } from '../TimeClock'; -import { MonthCalendarClassKey, PickersMonthClassKey } from '../MonthCalendar'; +import { MonthCalendarClassKey } from '../MonthCalendar'; import { PickersDayClassKey } from '../PickersDay'; -import { PickersYearClassKey, YearCalendarClassKey } from '../YearCalendar'; +import { YearCalendarClassKey } from '../YearCalendar'; import { PickersLayoutClassKey } from '../PickersLayout'; import { DatePickerToolbarClassKey } from '../DatePicker'; import { TimePickerToolbarClassKey } from '../TimePicker'; @@ -58,13 +58,11 @@ export interface PickersComponentNameToClassKey { MuiPickersDay: PickersDayClassKey; MuiPickersFadeTransitionGroup: PickersFadeTransitionGroupClassKey; MuiPickersLayout: PickersLayoutClassKey; - MuiPickersMonth: PickersMonthClassKey; MuiPickersPopper: PickersPopperClassKey; MuiPickersSlideTransition: PickersSlideTransitionClassKey; MuiPickersToolbar: PickersToolbarClassKey; MuiPickersToolbarButton: PickersToolbarButtonClassKey; MuiPickersToolbarText: PickersToolbarTextClassKey; - MuiPickersYear: PickersYearClassKey; MuiTimeClock: TimeClockClassKey; MuiTimePickerToolbar: TimePickerToolbarClassKey; MuiYearCalendar: YearCalendarClassKey; diff --git a/packages/x-date-pickers/src/themeAugmentation/props.d.ts b/packages/x-date-pickers/src/themeAugmentation/props.d.ts index f5bdfe45dadea..453152c396646 100644 --- a/packages/x-date-pickers/src/themeAugmentation/props.d.ts +++ b/packages/x-date-pickers/src/themeAugmentation/props.d.ts @@ -5,9 +5,9 @@ import { } from '../DateCalendar'; import { DayCalendarSkeletonProps } from '../DayCalendarSkeleton'; import { ClockNumberProps, TimeClockProps, ClockPointerProps, ClockProps } from '../TimeClock'; -import { ExportedPickersMonthProps, MonthCalendarProps } from '../MonthCalendar'; +import { MonthCalendarProps } from '../MonthCalendar'; import { PickersDayProps } from '../PickersDay'; -import { ExportedPickersYearProps, YearCalendarProps } from '../YearCalendar'; +import { YearCalendarProps } from '../YearCalendar'; import { DateFieldProps } from '../DateField'; import { LocalizationProviderProps } from '../LocalizationProvider'; import { PickersLayoutProps } from '../PickersLayout'; @@ -75,14 +75,12 @@ export interface PickersComponentsPropsList { MuiPickersCalendarHeader: ExportedPickersCalendarHeaderProps; MuiPickersDay: PickersDayProps; MuiPickersFadeTransitionGroup: PickersFadeTransitionGroupProps; - MuiPickersMonth: ExportedPickersMonthProps; MuiPickersPopper: PickerPopperProps; MuiPickersSlideTransition: ExportedSlideTransitionProps; MuiPickersToolbar: PickersToolbarProps; MuiPickersToolbarButton: PickersToolbarButtonProps; MuiPickersToolbarText: ExportedPickersToolbarTextProps; MuiPickersLayout: PickersLayoutProps; - MuiPickersYear: ExportedPickersYearProps; MuiTimeClock: TimeClockProps; MuiTimeField: TimeFieldProps; MuiTimePickerToolbar: ExportedTimePickerToolbarProps; diff --git a/packages/x-date-pickers/src/themeAugmentation/themeAugmentation.spec.ts b/packages/x-date-pickers/src/themeAugmentation/themeAugmentation.spec.ts index 0909e08f5cf63..8bd7cdc5e7d7f 100644 --- a/packages/x-date-pickers/src/themeAugmentation/themeAugmentation.spec.ts +++ b/packages/x-date-pickers/src/themeAugmentation/themeAugmentation.spec.ts @@ -18,7 +18,6 @@ import { pickersArrowSwitcherClasses } from '../internals/components/PickersArro import { pickersPopperClasses } from '../internals/components/pickersPopperClasses'; import { pickersDayClasses } from '../PickersDay'; import { timePickerToolbarClasses } from '../TimePicker'; -import { pickersMonthClasses } from '../MonthCalendar'; import { digitalClockClasses } from '../DigitalClock'; import { multiSectionDigitalClockClasses, @@ -355,25 +354,6 @@ createTheme({ }, }, }, - MuiPickersMonth: { - defaultProps: { - classes: { selected: 'test' }, - // @ts-expect-error invalid MuiPickersMonth prop - someRandomProp: true, - }, - styleOverrides: { - root: { - backgroundColor: 'red', - [`.${pickersMonthClasses.monthButton}`]: { - backgroundColor: 'green', - }, - }, - // @ts-expect-error invalid MuiPickersMonth class key - content: { - backgroundColor: 'blue', - }, - }, - }, MuiPickersPopper: { defaultProps: { open: true, @@ -479,22 +459,6 @@ createTheme({ }, }, }, - MuiPickersYear: { - defaultProps: { - classes: { yearButton: 'test' }, - // @ts-expect-error invalid MuiPickersYear prop - someRandomProp: true, - }, - styleOverrides: { - yearButton: { - backgroundColor: 'red', - }, - // @ts-expect-error invalid MuiPickersYear class key - content: { - backgroundColor: 'blue', - }, - }, - }, MuiTimeClock: { defaultProps: { view: 'hours', diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 36b6475908895..9ec0515027031 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -149,10 +149,8 @@ { "name": "ExportedPickersCalendarHeaderProps", "kind": "TypeAlias" }, { "name": "ExportedPickersLayoutSlotProps", "kind": "Interface" }, { "name": "ExportedPickersLayoutSlots", "kind": "Interface" }, - { "name": "ExportedPickersMonthProps", "kind": "Interface" }, { "name": "ExportedPickersRangeCalendarHeaderProps", "kind": "Interface" }, { "name": "ExportedPickersSectionListProps", "kind": "Interface" }, - { "name": "ExportedPickersYearProps", "kind": "Interface" }, { "name": "ExportedSlideTransitionProps", "kind": "Interface" }, { "name": "ExportedUseClearableFieldProps", "kind": "Interface" }, { "name": "extractValidationProps", "kind": "Variable" }, @@ -301,9 +299,6 @@ { "name": "PickersLayoutSlotProps", "kind": "Interface" }, { "name": "PickersLayoutSlots", "kind": "Interface" }, { "name": "PickersLocaleText", "kind": "Interface" }, - { "name": "pickersMonthClasses", "kind": "Variable" }, - { "name": "PickersMonthClasses", "kind": "Interface" }, - { "name": "PickersMonthClassKey", "kind": "TypeAlias" }, { "name": "PickersOutlinedInput", "kind": "Variable" }, { "name": "pickersOutlinedInputClasses", "kind": "Variable" }, { "name": "PickersOutlinedInputClasses", "kind": "Interface" }, @@ -333,9 +328,6 @@ { "name": "PickersTextFieldProps", "kind": "TypeAlias" }, { "name": "PickersTimezone", "kind": "TypeAlias" }, { "name": "PickersTranslationKeys", "kind": "TypeAlias" }, - { "name": "pickersYearClasses", "kind": "Variable" }, - { "name": "PickersYearClasses", "kind": "Interface" }, - { "name": "PickersYearClassKey", "kind": "TypeAlias" }, { "name": "PickerValidDate", "kind": "TypeAlias" }, { "name": "PickerValidDateLookup", "kind": "Interface" }, { "name": "PickerValueType", "kind": "TypeAlias" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index 60cb4180bd3c7..ff4ae2da325fb 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -98,9 +98,7 @@ { "name": "ExportedPickersCalendarHeaderProps", "kind": "TypeAlias" }, { "name": "ExportedPickersLayoutSlotProps", "kind": "Interface" }, { "name": "ExportedPickersLayoutSlots", "kind": "Interface" }, - { "name": "ExportedPickersMonthProps", "kind": "Interface" }, { "name": "ExportedPickersSectionListProps", "kind": "Interface" }, - { "name": "ExportedPickersYearProps", "kind": "Interface" }, { "name": "ExportedSlideTransitionProps", "kind": "Interface" }, { "name": "ExportedUseClearableFieldProps", "kind": "Interface" }, { "name": "extractValidationProps", "kind": "Variable" }, @@ -215,9 +213,6 @@ { "name": "PickersLayoutSlotProps", "kind": "Interface" }, { "name": "PickersLayoutSlots", "kind": "Interface" }, { "name": "PickersLocaleText", "kind": "Interface" }, - { "name": "pickersMonthClasses", "kind": "Variable" }, - { "name": "PickersMonthClasses", "kind": "Interface" }, - { "name": "PickersMonthClassKey", "kind": "TypeAlias" }, { "name": "PickersOutlinedInput", "kind": "Variable" }, { "name": "pickersOutlinedInputClasses", "kind": "Variable" }, { "name": "PickersOutlinedInputClasses", "kind": "Interface" }, @@ -245,9 +240,6 @@ { "name": "PickersTextFieldProps", "kind": "TypeAlias" }, { "name": "PickersTimezone", "kind": "TypeAlias" }, { "name": "PickersTranslationKeys", "kind": "TypeAlias" }, - { "name": "pickersYearClasses", "kind": "Variable" }, - { "name": "PickersYearClasses", "kind": "Interface" }, - { "name": "PickersYearClassKey", "kind": "TypeAlias" }, { "name": "PickerValidDate", "kind": "TypeAlias" }, { "name": "PickerValidDateLookup", "kind": "Interface" }, { "name": "PickerValueType", "kind": "TypeAlias" }, From 878a5382e3a7cf5de8d81baad6b845c5bec7ee6c Mon Sep 17 00:00:00 2001 From: Kenan Yusuf Date: Thu, 19 Dec 2024 13:38:57 +0000 Subject: [PATCH 08/13] v8.0.0-alpha.5 (#15937) Signed-off-by: Kenan Yusuf Co-authored-by: Flavien DELANGLE Co-authored-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com> Co-authored-by: Lukas Tyla --- CHANGELOG.md | 103 ++++++++++++++++++++ package.json | 2 +- packages/x-charts-pro/package.json | 2 +- packages/x-charts/package.json | 2 +- packages/x-codemod/package.json | 2 +- packages/x-data-grid-generator/package.json | 2 +- packages/x-data-grid-premium/package.json | 2 +- packages/x-data-grid-pro/package.json | 2 +- packages/x-data-grid/package.json | 2 +- packages/x-date-pickers-pro/package.json | 2 +- packages/x-date-pickers/package.json | 2 +- packages/x-internals/package.json | 2 +- packages/x-license/package.json | 2 +- packages/x-tree-view-pro/package.json | 2 +- packages/x-tree-view/package.json | 2 +- 15 files changed, 117 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 94b199a3aedb6..559e7b32771d1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,108 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 8.0.0-alpha.5 + +_Dec 19, 2024_ + +We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨: + +- 🌍 Improve Korean (ko-KR) locale on the Data Grid +- 🐞 Bugfixes + +Special thanks go out to the community contributors who have helped make this release possible: +@good-jinu, @k-rajat19. +Following are all team members who have contributed to this release: +@alexfauquette, @cherniavskii, @flaviendelangle, @KenanYusuf, @LukasTy, @MBilalShafi, @romgrk. + + + +### Data Grid + +#### Breaking changes + +- Passing additional props (like `data-*`, `aria-*`) directly on the Data Grid component is no longer supported. To pass the props, use `slotProps`. + + - For `.root` element, use `slotProps.root`. + - For `.main` element (the one with `role="grid"`), use `slotProps.main`. + +- `detailPanelExpandedRowIds` and `onDetailPanelExpandedRowIdsChange` props use a [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) instead of an array: + + ```diff + -detailPanelExpandedRowIds?: GridRowId[]; + +detailPanelExpandedRowIds?: Set; + + -onDetailPanelExpandedRowIdsChange?: (ids: GridRowId[], details: GridCallbackDetails) => void; + +onDetailPanelExpandedRowIdsChange?: (ids: Set, details: GridCallbackDetails) => void; + ``` + +- `apiRef.current.getExpandedDetailPanels` and `apiRef.current.setExpandedDetailPanels` methods receive and return a [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) instead of an array. +- `gridDetailPanelExpandedRowIdsSelector` returns a [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) instead of an array. +- `gridDetailPanelExpandedRowsHeightCacheSelector` was removed. + +#### `@mui/x-data-grid@8.0.0-alpha.5` + +- [DataGrid] Consider `columnGroupHeaderHeight` prop in `getTotalHeaderHeight` method (#15915) @k-rajat19 +- [DataGrid] Fix autosizing with virtualized columns (#15116) @k-rajat19 +- [DataGrid] Move `` to leaf import (#15879) @romgrk +- [DataGrid] Move `` and `` to leaf import (#15869) @romgrk +- [DataGrid] Remove the Joy UI demo (#15913) @romgrk +- [DataGrid] Update quick filter input variant (#15909) @KenanYusuf +- [DataGrid] Use `slotProps` to forward props to `.main` and `.root` elements (#15870) @MBilalShafi +- [l10n] Improve Korean(ko-KR) locale (#15878) @good-jinu + +#### `@mui/x-data-grid-pro@8.0.0-alpha.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-data-grid@8.0.0-alpha.5`, plus: + +- [DataGridPro] Use `Set` for `detailPanelExpandedRowIds` (#15835) @cherniavskii + +#### `@mui/x-data-grid-premium@8.0.0-alpha.5` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan') + +Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.5`. + +### Date and Time Pickers + +#### Breaking changes + +- The `` component has been moved inside the Month Calendar component — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#month-calendar). + +- The `` component has been moved inside the Year Calendar component — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#year-calendar). + +#### `@mui/x-date-pickers@8.0.0-alpha.5` + +- [pickers] Add verification to disable skipped hours in spring forward DST (#15849) @flaviendelangle +- [pickers] Remove `PickersMonth` and `PickersYear` from the theme and remove the `div` wrapping each button (#15806) @flaviendelangle +- [pickers] Use the new `ownerState` object on the `` component (#15863) @flaviendelangle + +#### `@mui/x-date-pickers-pro@8.0.0-alpha.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-date-pickers@8.0.0-alpha.5`. + +### Charts + +#### `@mui/x-charts@8.0.0-alpha.5` + +- [charts] Fix `` value type if `null` (#15917) @alexfauquette + +#### `@mui/x-charts-pro@8.0.0-alpha.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-charts@8.0.0-alpha.5`. + +### Tree View + +#### `@mui/x-tree-view@8.0.0-alpha.5` + +No changes since `@mui/x-tree-view-pro@v8.0.0-alpha.4`. + +#### `@mui/x-tree-view-pro@8.0.0-alpha.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-tree-view@8.0.0-alpha.5`. + +### Core + +- [code-infra] Remove `@mui/material-nextjs` dependency (#15925) @LukasTy + ## 8.0.0-alpha.4 _Dec 13, 2024_ @@ -39,6 +141,7 @@ Following are all team members who have contributed to this release: -const output = useGridSelector(apiRef, selector, equals) +const output = useGridSelector(apiRef, selector, arguments, equals) ``` + - The default variant for text fields and selects in the filter panel has been changed to `outlined`. - The "row spanning" feature is now stable. ```diff diff --git a/package.json b/package.json index dd6757400040f..577832d12ae0f 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "private": true, "scripts": { "preinstall": "npx only-allow pnpm", diff --git a/packages/x-charts-pro/package.json b/packages/x-charts-pro/package.json index 1707539f3aaad..51d20ee27b2f8 100644 --- a/packages/x-charts-pro/package.json +++ b/packages/x-charts-pro/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-charts-pro", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "The Pro plan edition of the Charts components (MUI X).", "author": "MUI Team", "main": "src/index.ts", diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json index 037f74d86b175..18338aa9d7301 100644 --- a/packages/x-charts/package.json +++ b/packages/x-charts/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-charts", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "The community edition of the Charts components (MUI X).", "author": "MUI Team", "main": "src/index.js", diff --git a/packages/x-codemod/package.json b/packages/x-codemod/package.json index af7effbdab202..4d41f0fce71c9 100644 --- a/packages/x-codemod/package.json +++ b/packages/x-codemod/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-codemod", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "bin": "./codemod.js", "private": false, "author": "MUI Team", diff --git a/packages/x-data-grid-generator/package.json b/packages/x-data-grid-generator/package.json index 4b8e1b587c90e..4e259bf5a51e3 100644 --- a/packages/x-data-grid-generator/package.json +++ b/packages/x-data-grid-generator/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-generator", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Generate fake data for demo purposes only.", "author": "MUI Team", "main": "src/index.ts", diff --git a/packages/x-data-grid-premium/package.json b/packages/x-data-grid-premium/package.json index 2c6a945e9fb49..d4dc13b8cd042 100644 --- a/packages/x-data-grid-premium/package.json +++ b/packages/x-data-grid-premium/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-premium", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "The Premium plan edition of the Data Grid Components (MUI X).", "author": "MUI Team", "main": "src/index.ts", diff --git a/packages/x-data-grid-pro/package.json b/packages/x-data-grid-pro/package.json index bd0a99c48c656..0b9b9de947644 100644 --- a/packages/x-data-grid-pro/package.json +++ b/packages/x-data-grid-pro/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid-pro", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "The Pro plan edition of the Data Grid components (MUI X).", "author": "MUI Team", "main": "src/index.ts", diff --git a/packages/x-data-grid/package.json b/packages/x-data-grid/package.json index ef26bf4c18b33..793580b3d310a 100644 --- a/packages/x-data-grid/package.json +++ b/packages/x-data-grid/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-data-grid", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "The Community plan edition of the Data Grid components (MUI X).", "author": "MUI Team", "main": "src/index.ts", diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json index 9acf95c7ab0b2..bf0326cd0f83c 100644 --- a/packages/x-date-pickers-pro/package.json +++ b/packages/x-date-pickers-pro/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-date-pickers-pro", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "The Pro plan edition of the Date and Time Picker components (MUI X).", "author": "MUI Team", "main": "src/index.ts", diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index 4fad0edc9ffc7..cb4aeb6f1f552 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-date-pickers", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "The community edition of the Date and Time Picker components (MUI X).", "author": "MUI Team", "main": "src/index.ts", diff --git a/packages/x-internals/package.json b/packages/x-internals/package.json index 62515eaf39e6c..d0090484dd5cc 100644 --- a/packages/x-internals/package.json +++ b/packages/x-internals/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-internals", - "version": "8.0.0-alpha.2", + "version": "8.0.0-alpha.5", "description": "Utility functions for the MUI X packages (internal use only).", "author": "MUI Team", "license": "MIT", diff --git a/packages/x-license/package.json b/packages/x-license/package.json index 59f5be0f717d1..86c1963741198 100644 --- a/packages/x-license/package.json +++ b/packages/x-license/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-license", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "MUI X License verification", "author": "MUI Team", "main": "src/index.ts", diff --git a/packages/x-tree-view-pro/package.json b/packages/x-tree-view-pro/package.json index 5fe97d5430177..c244f89d4f582 100644 --- a/packages/x-tree-view-pro/package.json +++ b/packages/x-tree-view-pro/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-tree-view-pro", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "The Pro plan edition of the Tree View components (MUI X).", "author": "MUI Team", "main": "src/index.ts", diff --git a/packages/x-tree-view/package.json b/packages/x-tree-view/package.json index fb7c566f00043..ad5ddcad0d009 100644 --- a/packages/x-tree-view/package.json +++ b/packages/x-tree-view/package.json @@ -1,6 +1,6 @@ { "name": "@mui/x-tree-view", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "The community edition of the Tree View components (MUI X).", "author": "MUI Team", "main": "src/index.ts", From 9a8aa052c124538f491f830f235197ffde26ef9c Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Thu, 19 Dec 2024 16:55:31 +0100 Subject: [PATCH 09/13] [pickers] Use `usePickerContext()` and `usePickerActionsContext()` to get the actions in the `actionBar` slot and in internal components (#15843) Signed-off-by: Flavien DELANGLE Co-authored-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> --- .../custom-components/ActionBarComponent.js | 17 ++- .../custom-components/ActionBarComponent.tsx | 17 ++- .../custom-layout/AddComponent.js | 18 ++- .../custom-layout/AddComponent.tsx | 19 ++- .../custom-layout/MovingActions.js | 15 +- .../custom-layout/MovingActions.tsx | 15 +- .../migration-pickers-v7.md | 72 ++++++++- .../useDesktopRangePicker.tsx | 12 +- .../hooks/useEnrichedRangePickerFieldProps.ts | 17 ++- .../useMobileRangePicker.tsx | 9 +- .../DesktopDateTimePickerLayout.tsx | 7 - .../PickersActionBar.test.tsx | 111 ++++---------- .../src/PickersActionBar/PickersActionBar.tsx | 21 +-- .../src/PickersLayout/PickersLayout.tsx | 7 - .../src/PickersLayout/usePickerLayout.tsx | 8 - packages/x-date-pickers/src/hooks/index.tsx | 4 +- .../src/hooks/usePickerActionsContext.ts | 20 +++ .../internals/components/PickerProvider.tsx | 25 +++- .../components/PickersModalDialog.tsx | 13 +- .../internals/components/PickersPopper.tsx | 18 +-- .../useDesktopPicker/useDesktopPicker.tsx | 12 +- .../hooks/useMobilePicker/useMobilePicker.tsx | 12 +- .../internals/hooks/usePicker/usePicker.ts | 2 - .../hooks/usePicker/usePicker.types.ts | 2 +- .../hooks/usePicker/usePickerProvider.ts | 5 +- .../hooks/usePicker/usePickerValue.ts | 137 +++++++++--------- .../hooks/usePicker/usePickerValue.types.ts | 59 +++++--- .../hooks/usePicker/usePickerViews.ts | 8 +- .../x-date-pickers/src/internals/index.ts | 2 +- .../themeAugmentation.spec.ts | 2 +- scripts/x-date-pickers-pro.exports.json | 1 + scripts/x-date-pickers.exports.json | 1 + 32 files changed, 377 insertions(+), 311 deletions(-) create mode 100644 packages/x-date-pickers/src/hooks/usePickerActionsContext.ts diff --git a/docs/data/date-pickers/custom-components/ActionBarComponent.js b/docs/data/date-pickers/custom-components/ActionBarComponent.js index 94e402db3cb9d..f4eb08d5a5b79 100644 --- a/docs/data/date-pickers/custom-components/ActionBarComponent.js +++ b/docs/data/date-pickers/custom-components/ActionBarComponent.js @@ -9,11 +9,16 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker'; -import { usePickerTranslations } from '@mui/x-date-pickers/hooks'; +import { + usePickerActionsContext, + usePickerTranslations, +} from '@mui/x-date-pickers/hooks'; function CustomActionBar(props) { - const { onAccept, onClear, onCancel, onSetToday, actions, className } = props; + const { actions, className } = props; const translations = usePickerTranslations(); + const { clearValue, setValueToToday, acceptValueChanges, cancelValueChanges } = + usePickerActionsContext(); const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); const id = useId(); @@ -28,7 +33,7 @@ function CustomActionBar(props) { return ( { - onClear(); + clearValue(); setAnchorEl(null); }} key={actionType} @@ -42,7 +47,7 @@ function CustomActionBar(props) { { setAnchorEl(null); - onCancel(); + cancelValueChanges(); }} key={actionType} > @@ -55,7 +60,7 @@ function CustomActionBar(props) { { setAnchorEl(null); - onAccept(); + acceptValueChanges(); }} key={actionType} > @@ -68,7 +73,7 @@ function CustomActionBar(props) { { setAnchorEl(null); - onSetToday(); + setValueToToday(); }} key={actionType} > diff --git a/docs/data/date-pickers/custom-components/ActionBarComponent.tsx b/docs/data/date-pickers/custom-components/ActionBarComponent.tsx index e28c354c962a4..e69413bb2645f 100644 --- a/docs/data/date-pickers/custom-components/ActionBarComponent.tsx +++ b/docs/data/date-pickers/custom-components/ActionBarComponent.tsx @@ -9,11 +9,16 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker'; import { PickersActionBarProps } from '@mui/x-date-pickers/PickersActionBar'; -import { usePickerTranslations } from '@mui/x-date-pickers/hooks'; +import { + usePickerActionsContext, + usePickerTranslations, +} from '@mui/x-date-pickers/hooks'; function CustomActionBar(props: PickersActionBarProps) { - const { onAccept, onClear, onCancel, onSetToday, actions, className } = props; + const { actions, className } = props; const translations = usePickerTranslations(); + const { clearValue, setValueToToday, acceptValueChanges, cancelValueChanges } = + usePickerActionsContext(); const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); const id = useId(); @@ -28,7 +33,7 @@ function CustomActionBar(props: PickersActionBarProps) { return ( { - onClear(); + clearValue(); setAnchorEl(null); }} key={actionType} @@ -41,7 +46,7 @@ function CustomActionBar(props: PickersActionBarProps) { { setAnchorEl(null); - onCancel(); + cancelValueChanges(); }} key={actionType} > @@ -53,7 +58,7 @@ function CustomActionBar(props: PickersActionBarProps) { { setAnchorEl(null); - onAccept(); + acceptValueChanges(); }} key={actionType} > @@ -65,7 +70,7 @@ function CustomActionBar(props: PickersActionBarProps) { { setAnchorEl(null); - onSetToday(); + setValueToToday(); }} key={actionType} > diff --git a/docs/data/date-pickers/custom-layout/AddComponent.js b/docs/data/date-pickers/custom-layout/AddComponent.js index 0e904ef3d2889..c17022f0ec918 100644 --- a/docs/data/date-pickers/custom-layout/AddComponent.js +++ b/docs/data/date-pickers/custom-layout/AddComponent.js @@ -8,7 +8,6 @@ import ListItemText from '@mui/material/ListItemText'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker'; - import RestaurantIcon from '@mui/icons-material/Restaurant'; import { usePickerLayout, @@ -17,17 +16,22 @@ import { PickersLayoutContentWrapper, } from '@mui/x-date-pickers/PickersLayout'; +import { usePickerActionsContext } from '@mui/x-date-pickers/hooks'; + function ActionList(props) { - const { onAccept, onClear, onCancel, onSetToday } = props; + const { className } = props; + const { clearValue, setValueToToday, acceptValueChanges, cancelValueChanges } = + usePickerActionsContext(); + const actions = [ - { text: 'Accept', method: onAccept }, - { text: 'Clear', method: onClear }, - { text: 'Cancel', method: onCancel }, - { text: 'Today', method: onSetToday }, + { text: 'Accept', method: acceptValueChanges }, + { text: 'Clear', method: clearValue }, + { text: 'Cancel', method: cancelValueChanges }, + { text: 'Today', method: setValueToToday }, ]; return ( - + {actions.map(({ text, method }) => ( diff --git a/docs/data/date-pickers/custom-layout/AddComponent.tsx b/docs/data/date-pickers/custom-layout/AddComponent.tsx index 9fc41c2b0666b..837f63dd89fe8 100644 --- a/docs/data/date-pickers/custom-layout/AddComponent.tsx +++ b/docs/data/date-pickers/custom-layout/AddComponent.tsx @@ -8,7 +8,6 @@ import ListItemText from '@mui/material/ListItemText'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker'; -import { PickersActionBarProps } from '@mui/x-date-pickers/PickersActionBar'; import RestaurantIcon from '@mui/icons-material/Restaurant'; import { PickersLayoutProps, @@ -18,17 +17,23 @@ import { PickersLayoutContentWrapper, } from '@mui/x-date-pickers/PickersLayout'; import { DateView } from '@mui/x-date-pickers/models'; +import { PickersActionBarProps } from '@mui/x-date-pickers/PickersActionBar'; +import { usePickerActionsContext } from '@mui/x-date-pickers/hooks'; function ActionList(props: PickersActionBarProps) { - const { onAccept, onClear, onCancel, onSetToday } = props; + const { className } = props; + const { clearValue, setValueToToday, acceptValueChanges, cancelValueChanges } = + usePickerActionsContext(); + const actions = [ - { text: 'Accept', method: onAccept }, - { text: 'Clear', method: onClear }, - { text: 'Cancel', method: onCancel }, - { text: 'Today', method: onSetToday }, + { text: 'Accept', method: acceptValueChanges }, + { text: 'Clear', method: clearValue }, + { text: 'Cancel', method: cancelValueChanges }, + { text: 'Today', method: setValueToToday }, ]; + return ( - + {actions.map(({ text, method }) => ( diff --git a/docs/data/date-pickers/custom-layout/MovingActions.js b/docs/data/date-pickers/custom-layout/MovingActions.js index 09ade4dcee744..be4da62f76096 100644 --- a/docs/data/date-pickers/custom-layout/MovingActions.js +++ b/docs/data/date-pickers/custom-layout/MovingActions.js @@ -8,13 +8,18 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { pickersLayoutClasses } from '@mui/x-date-pickers/PickersLayout'; import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker'; +import { usePickerActionsContext } from '@mui/x-date-pickers/hooks'; + function ActionList(props) { - const { onAccept, onClear, onCancel, onSetToday, className } = props; + const { className } = props; + const { clearValue, setValueToToday, acceptValueChanges, cancelValueChanges } = + usePickerActionsContext(); + const actions = [ - { text: 'Accept', method: onAccept }, - { text: 'Clear', method: onClear }, - { text: 'Cancel', method: onCancel }, - { text: 'Today', method: onSetToday }, + { text: 'Accept', method: acceptValueChanges }, + { text: 'Clear', method: clearValue }, + { text: 'Cancel', method: cancelValueChanges }, + { text: 'Today', method: setValueToToday }, ]; return ( diff --git a/docs/data/date-pickers/custom-layout/MovingActions.tsx b/docs/data/date-pickers/custom-layout/MovingActions.tsx index cc2af78da992c..e8a42e3a195d3 100644 --- a/docs/data/date-pickers/custom-layout/MovingActions.tsx +++ b/docs/data/date-pickers/custom-layout/MovingActions.tsx @@ -8,15 +8,20 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { pickersLayoutClasses } from '@mui/x-date-pickers/PickersLayout'; import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker'; import { PickersActionBarProps } from '@mui/x-date-pickers/PickersActionBar'; +import { usePickerActionsContext } from '@mui/x-date-pickers/hooks'; function ActionList(props: PickersActionBarProps) { - const { onAccept, onClear, onCancel, onSetToday, className } = props; + const { className } = props; + const { clearValue, setValueToToday, acceptValueChanges, cancelValueChanges } = + usePickerActionsContext(); + const actions = [ - { text: 'Accept', method: onAccept }, - { text: 'Clear', method: onClear }, - { text: 'Cancel', method: onCancel }, - { text: 'Today', method: onSetToday }, + { text: 'Accept', method: acceptValueChanges }, + { text: 'Clear', method: clearValue }, + { text: 'Cancel', method: cancelValueChanges }, + { text: 'Today', method: setValueToToday }, ]; + return ( // Propagate the className such that CSS selectors can be applied diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md index 6bc805040ba90..62df8c1afa4c8 100644 --- a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md +++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md @@ -393,7 +393,7 @@ This change causes a few breaking changes: } ``` -- The component passed to the `layout` slot no longer receives an `orientation` and the `isLandscape` props, instead you can use the `usePickerContext` hook: +- The component passed to the `layout` slot no longer receives the `orientation` and `isLandscape` props, instead you can use the `usePickerContext` hook: ```diff -console.log(props.orientation); @@ -415,6 +415,51 @@ This change causes a few breaking changes: +console.log(variant); ``` +- The component passed to the `layout` slot no longer receives the `onClear`, `onSetToday`, `onAccept`, `onCancel`, `onOpen`, `onClose` and `onDismiss` props, instead you can use the `usePickerActionsContext` or the `usePickerContext` hooks: + + ```diff + +import { usePickerActionsContext } from '@mui/x-date-pickers/hooks'; + + -const { onClear } = props; + +const { clearValue } = usePickerActionsContext(); + + -const { onSetToday } = props; + +const { setValueToToday } = usePickerActionsContext(); + + -const { onAccept } = props; + +const { acceptValueChanges } = usePickerActionsContext(); + + -const { onCancel } = props; + +const { cancelValueChanges } = usePickerActionsContext(); + + -const { onOpen } = props; + +const { setOpen } = usePickerActionsContext(); + +const onOpen = event => { + + event.preventDefault(); + + setOpen(true); + +} + + -props.onClose(); + +const { setOpen } = usePickerActionsContext(); + +const onClose = event => { + + event.preventDefault(); + + setOpen(false); + +} + + // This contains a small behavior change. + // If the picker is not controlled and has a default value, + // opening it and calling `acceptValueChanges` without any change will call `onAccept` with the default value. + // Whereas before, opening it and calling `onDimiss` without any change would not have called `onAccept`. + -const { onDismiss } = props; + +const { acceptValueChanges } = usePickerActionsContext(); + +const onDismiss = acceptValueChanges + ``` + + :::success + The `usePickerContext` also contain all the actions returned by `usePickerActionsContext`. + The only difference is that `usePickerActionsContext` only contains variables with stable references that won't cause a re-render of your component. + ::: + ### Slot: `toolbar` - The component passed to the `toolbar` slot no longer receives a `disabled` prop, instead you can use the `usePickerContext` hook: @@ -435,6 +480,31 @@ This change causes a few breaking changes: +console.log(readOnly); ``` +### Slot: `actionBar` + +- The component passed to the `actionBar` slot no longer receives the `onClear`, `onSetToday`, `onAccept` and `onCancel` props. You can use the `usePickerActionsContext` or the `usePickerContext` hooks instead: + + ```diff + +import { usePickerActionsContext } from '@mui/x-date-pickers/hooks'; + + -const { onClear } = props; + +const { clearValue } = usePickerActionsContext(); + + -const { onSetToday } = props; + +const { setValueToToday } = usePickerActionsContext(); + + -const { onAccept } = props; + +const { acceptValueChanges } = usePickerActionsContext(); + + -const { onCancel } = props; + +const { cancelValueChanges } = usePickerActionsContext(); + ``` + + :::success + The `usePickerContext` also contain all the actions returned by `usePickerActionsContext`. + The only difference is that `usePickerActionsContext` only contains variables with stable references that won't cause a re-render of your component. + ::: + ## Renamed variables and types The following variables and types have been renamed to have a coherent `Picker` / `Pickers` prefix: diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx index 4dabe621a1e73..e4910f76bb6a4 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx @@ -90,8 +90,6 @@ export const useDesktopRangePicker = < } const { - open, - actions, layoutProps, providerProps, renderCurrentView, @@ -127,7 +125,8 @@ export const useDesktopRangePicker = < return; } - actions.onDismiss(); + // This direct access to `providerProps` will go away once the range fields stop having their views in a tooltip. + providerProps.privateContextValue.dismissViews(); }); }; @@ -170,8 +169,9 @@ export const useDesktopRangePicker = < >({ variant: 'desktop', fieldType, - open, - actions, + // These direct access to `providerProps` will go away once the range fields handle the picker opening + open: providerProps.contextValue.open, + setOpen: providerProps.contextValue.setOpen, readOnly, disableOpenPicker, label, @@ -215,8 +215,6 @@ export const useDesktopRangePicker = < containerRef={popperRef} anchorEl={anchorRef.current} onBlur={handleBlur} - {...actions} - open={open} slots={slots} slotProps={slotProps} shouldRestoreFocus={shouldRestoreFocus} diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts index a858ae3df40b3..99bd3516edfba 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts @@ -20,7 +20,7 @@ import { import { PickersInputLocaleText } from '@mui/x-date-pickers/locales'; import { onSpaceOrEnter, - UsePickerResponse, + UsePickerValueContextValue, PickerVariant, DateOrTimeViewWithMeridiem, BaseSingleInputFieldProps, @@ -91,7 +91,7 @@ export interface UseEnrichedRangePickerFieldPropsParams< TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, -> extends Pick, 'open' | 'actions'>, +> extends Pick, UseRangePositionResponse { variant: PickerVariant; fieldType: FieldType; @@ -124,7 +124,7 @@ const useMultiInputFieldSlotProps = < >({ variant, open, - actions, + setOpen, readOnly, labelId, disableOpenPicker, @@ -180,7 +180,8 @@ const useMultiInputFieldSlotProps = < event.stopPropagation(); onRangePositionChange('start'); if (!readOnly && !disableOpenPicker) { - actions.onOpen(event); + event.preventDefault(); + setOpen(true); } }; @@ -188,7 +189,8 @@ const useMultiInputFieldSlotProps = < event.stopPropagation(); onRangePositionChange('end'); if (!readOnly && !disableOpenPicker) { - actions.onOpen(event); + event.preventDefault(); + setOpen(true); } }; @@ -297,7 +299,7 @@ const useSingleInputFieldSlotProps = < >({ variant, open, - actions, + setOpen, readOnly, labelId, disableOpenPicker, @@ -371,7 +373,8 @@ const useSingleInputFieldSlotProps = < event.stopPropagation(); if (!readOnly && !disableOpenPicker) { - actions.onOpen(event); + event.preventDefault(); + setOpen(true); } }; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx index 32b4ac1dab036..8164a5da2fea9 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx @@ -86,8 +86,6 @@ export const useMobileRangePicker = < } const { - open, - actions, layoutProps, providerProps, renderCurrentView, @@ -145,8 +143,9 @@ export const useMobileRangePicker = < >({ variant: 'mobile', fieldType, - open, - actions, + // These direct access to `providerProps` will go away once the range fields handle the picker opening + open: providerProps.contextValue.open, + setOpen: providerProps.contextValue.setOpen, readOnly, labelId, disableOpenPicker, @@ -213,7 +212,7 @@ export const useMobileRangePicker = < const renderPicker = () => ( - + ', () => { const { render } = createPickerRenderer({ clock: 'fake' }); + const renderWithContext = (element: React.ReactElement) => { + const spys = { + setOpen: spy(), + clearValue: spy(), + setValueToToday: spy(), + acceptValueChanges: spy(), + cancelValueChanges: spy(), + }; + + render({element}); + + return spys; + }; + it('should not render buttons if actions array is empty', () => { - const onAccept = () => {}; - const onClear = () => {}; - const onCancel = () => {}; - const onSetToday = () => {}; - render( - , - ); + renderWithContext(); expect(screen.queryByRole('button')).to.equal(null); }); it('should render button for "clear" action calling the associated callback', () => { - const onAccept = spy(); - const onClear = spy(); - const onCancel = spy(); - const onSetToday = spy(); - - render( - , - ); + const { clearValue } = renderWithContext(); fireEvent.click(screen.getByText(/clear/i)); - expect(onClear.callCount).to.equal(1); + expect(clearValue.callCount).to.equal(1); }); it('should render button for "cancel" action calling the associated callback', () => { - const onAccept = spy(); - const onClear = spy(); - const onCancel = spy(); - const onSetToday = spy(); - - render( - , - ); + const { cancelValueChanges } = renderWithContext(); fireEvent.click(screen.getByText(/cancel/i)); - expect(onCancel.callCount).to.equal(1); + expect(cancelValueChanges.callCount).to.equal(1); }); it('should render button for "accept" action calling the associated callback', () => { - const onAccept = spy(); - const onClear = spy(); - const onCancel = spy(); - const onSetToday = spy(); - - render( - , - ); + const { acceptValueChanges } = renderWithContext(); fireEvent.click(screen.getByText(/ok/i)); - expect(onAccept.callCount).to.equal(1); + expect(acceptValueChanges.callCount).to.equal(1); }); it('should render button for "today" action calling the associated callback', () => { - const onAccept = spy(); - const onClear = spy(); - const onCancel = spy(); - const onSetToday = spy(); - - render( - , - ); + const { setValueToToday } = renderWithContext(); fireEvent.click(screen.getByText(/today/i)); - expect(onSetToday.callCount).to.equal(1); + expect(setValueToToday.callCount).to.equal(1); }); it('should respect actions order', () => { - const onAccept = () => {}; - const onClear = () => {}; - const onCancel = () => {}; - const onSetToday = () => {}; - render( - , - ); + renderWithContext(); const buttons = screen.getAllByRole('button'); diff --git a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx index 54bd78c6dea02..8551bbf6d7fa5 100644 --- a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx +++ b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx @@ -5,6 +5,7 @@ import { styled } from '@mui/material/styles'; import Button from '@mui/material/Button'; import DialogActions, { DialogActionsProps } from '@mui/material/DialogActions'; import { usePickerTranslations } from '../hooks/usePickerTranslations'; +import { usePickerActionsContext } from '../hooks'; export type PickersActionBarAction = 'clear' | 'cancel' | 'accept' | 'today'; @@ -15,10 +16,6 @@ export interface PickersActionBarProps extends DialogActionsProps { * @default `['cancel', 'accept']` for mobile and `[]` for desktop */ actions?: PickersActionBarAction[]; - onAccept: () => void; - onClear: () => void; - onCancel: () => void; - onSetToday: () => void; } const PickersActionBarRoot = styled(DialogActions, { @@ -38,9 +35,11 @@ const PickersActionBarRoot = styled(DialogActions, { * - [PickersActionBar API](https://mui.com/x/api/date-pickers/pickers-action-bar/) */ function PickersActionBar(props: PickersActionBarProps) { - const { onAccept, onClear, onCancel, onSetToday, actions, ...other } = props; + const { actions, ...other } = props; const translations = usePickerTranslations(); + const { clearValue, setValueToToday, acceptValueChanges, cancelValueChanges } = + usePickerActionsContext(); if (actions == null || actions.length === 0) { return null; @@ -50,28 +49,28 @@ function PickersActionBar(props: PickersActionBarProps) { switch (actionType) { case 'clear': return ( - ); case 'cancel': return ( - ); case 'accept': return ( - ); case 'today': return ( - ); @@ -100,10 +99,6 @@ PickersActionBar.propTypes = { * @default false */ disableSpacing: PropTypes.bool, - onAccept: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired, - onClear: PropTypes.func.isRequired, - onSetToday: PropTypes.func.isRequired, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx index db7d88b6f2a71..7a7908fc3d900 100644 --- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx +++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx @@ -154,15 +154,8 @@ PickersLayout.propTypes = { classes: PropTypes.object, className: PropTypes.string, isValid: PropTypes.func.isRequired, - onAccept: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, - onClear: PropTypes.func.isRequired, - onClose: PropTypes.func.isRequired, - onDismiss: PropTypes.func.isRequired, - onOpen: PropTypes.func.isRequired, onSelectShortcut: PropTypes.func.isRequired, - onSetToday: PropTypes.func.isRequired, onViewChange: PropTypes.func.isRequired, /** * The props used for each component slot. diff --git a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx index be4f6e3b5e95d..200e0f7e6895e 100644 --- a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx +++ b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx @@ -48,10 +48,6 @@ const usePickerLayout = { + const value = React.useContext(PickerActionsContext); + if (value == null) { + throw new Error( + [ + 'MUI X: The `usePickerActionsContext` can only be called in fields that are used as a slot of a picker component', + ].join('\n'), + ); + } + + return value; +}; diff --git a/packages/x-date-pickers/src/internals/components/PickerProvider.tsx b/packages/x-date-pickers/src/internals/components/PickerProvider.tsx index 0f558077d4fc3..191e45601a0fc 100644 --- a/packages/x-date-pickers/src/internals/components/PickerProvider.tsx +++ b/packages/x-date-pickers/src/internals/components/PickerProvider.tsx @@ -3,10 +3,16 @@ import { PickerOwnerState } from '../../models'; import { PickersInputLocaleText } from '../../locales'; import { LocalizationProvider } from '../../LocalizationProvider'; import { PickerOrientation, PickerVariant } from '../models'; -import type { UsePickerValueContextValue } from '../hooks/usePicker/usePickerValue.types'; +import type { + UsePickerValueActionsContextValue, + UsePickerValueContextValue, + UsePickerValuePrivateContextValue, +} from '../hooks/usePicker/usePickerValue.types'; export const PickerContext = React.createContext(null); +export const PickerActionsContext = React.createContext(null); + export const PickerPrivateContext = React.createContext({ ownerState: { isPickerDisabled: false, @@ -16,6 +22,7 @@ export const PickerPrivateContext = React.createContext {}, }); /** @@ -26,19 +33,22 @@ export const PickerPrivateContext = React.createContext - - {children} - + + + {children} + + ); } export interface PickerProviderProps { contextValue: PickerContextValue; + actionsContextValue: PickerActionsContextValue; privateContextValue: PickerPrivateContextValue; localeText: PickersInputLocaleText | undefined; children: React.ReactNode; @@ -71,7 +81,10 @@ export interface PickerContextValue extends UsePickerValueContextValue { */ orientation: PickerOrientation; } -export interface PickerPrivateContextValue { + +export interface PickerActionsContextValue extends UsePickerValueActionsContextValue {} + +export interface PickerPrivateContextValue extends UsePickerValuePrivateContextValue { /** * The ownerState of the picker. */ diff --git a/packages/x-date-pickers/src/internals/components/PickersModalDialog.tsx b/packages/x-date-pickers/src/internals/components/PickersModalDialog.tsx index 5b89bb61cf1be..6c9e7a99e8948 100644 --- a/packages/x-date-pickers/src/internals/components/PickersModalDialog.tsx +++ b/packages/x-date-pickers/src/internals/components/PickersModalDialog.tsx @@ -6,7 +6,8 @@ import { PaperProps as MuiPaperProps } from '@mui/material/Paper'; import { TransitionProps as MuiTransitionProps } from '@mui/material/transitions'; import { styled } from '@mui/material/styles'; import { DIALOG_WIDTH } from '../constants/dimensions'; -import { UsePickerValueActions } from '../hooks/usePicker/usePickerValue.types'; +import { usePickerContext } from '../../hooks'; +import { usePickerPrivateContext } from '../hooks/usePickerPrivateContext'; export interface PickersModalDialogSlots { /** @@ -41,7 +42,7 @@ export interface PickersModalDialogSlotProps { mobileTransition?: Partial; } -export interface PickersModalDialogProps extends UsePickerValueActions { +export interface PickersModalDialogProps { /** * Overridable component slots. * @default {} @@ -52,7 +53,6 @@ export interface PickersModalDialogProps extends UsePickerValueActions { * @default {} */ slotProps?: PickersModalDialogSlotProps; - open: boolean; } const PickersModalDialogRoot = styled(MuiDialog)({ @@ -72,7 +72,10 @@ const PickersModalDialogContent = styled(DialogContent)({ }); export function PickersModalDialog(props: React.PropsWithChildren) { - const { children, onDismiss, open, slots, slotProps } = props; + const { children, slots, slotProps } = props; + + const { open } = usePickerContext(); + const { dismissViews } = usePickerPrivateContext(); const Dialog = slots?.dialog ?? PickersModalDialogRoot; const Transition = slots?.mobileTransition ?? Fade; @@ -80,7 +83,7 @@ export function PickersModalDialog(props: React.PropsWithChildren; } -export interface PickerPopperProps extends UsePickerValueActions { +export interface PickerPopperProps { role: 'tooltip' | 'dialog'; anchorEl: MuiPopperProps['anchorEl']; - open: MuiPopperProps['open']; /** * @default "bottom" */ @@ -339,8 +338,6 @@ export function PickersPopper(inProps: PickerPopperProps) { containerRef = null, shouldRestoreFocus, onBlur, - onDismiss, - open, role, placement = 'bottom', slots, @@ -349,10 +346,13 @@ export function PickersPopper(inProps: PickerPopperProps) { classes: classesProp, } = props; + const { open } = usePickerContext(); + const { dismissViews } = usePickerPrivateContext(); + React.useEffect(() => { function handleKeyDown(nativeEvent: KeyboardEvent) { if (open && nativeEvent.key === 'Escape') { - onDismiss(); + dismissViews(); } } @@ -361,7 +361,7 @@ export function PickersPopper(inProps: PickerPopperProps) { return () => { document.removeEventListener('keydown', handleKeyDown); }; - }, [onDismiss, open]); + }, [dismissViews, open]); const lastFocusedElementRef = React.useRef(null); React.useEffect(() => { @@ -387,7 +387,7 @@ export function PickersPopper(inProps: PickerPopperProps) { const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener( open, - onBlur ?? onDismiss, + onBlur ?? dismissViews, ); const paperRef = React.useRef(null); const handleRef = useForkRef(paperRef, containerRef); @@ -403,7 +403,7 @@ export function PickersPopper(inProps: PickerPopperProps) { if (event.key === 'Escape') { // stop the propagation to avoid closing parent modal event.stopPropagation(); - onDismiss(); + dismissViews(); } }; diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx index 3ac24e4b6227e..f206939d69f87 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx @@ -60,8 +60,6 @@ export const useDesktopPicker = < const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false; const { - open, - actions, hasUIView, layoutProps, providerProps, @@ -95,7 +93,11 @@ export const useDesktopPicker = < externalSlotProps: innerSlotProps?.openPickerButton, additionalProps: { disabled: disabled || readOnly, - onClick: open ? actions.onClose : actions.onOpen, + // This direct access to `providerProps` will go away in https://github.com/mui/mui-x/pull/15671 + onClick: (event: React.UIEvent) => { + event.preventDefault(); + providerProps.contextValue.setOpen((prevOpen) => !prevOpen); + }, 'aria-label': getOpenDialogAriaText(pickerFieldProps.value), edge: inputAdornmentProps.position, }, @@ -135,7 +137,7 @@ export const useDesktopPicker = < sx, label, name, - focused: open ? true : undefined, + focused: providerProps.contextValue.open ? true : undefined, ...(isToolbarHidden && { id: labelId }), ...(!!inputRef && { inputRef }), }, @@ -202,8 +204,6 @@ export const useDesktopPicker = < role="dialog" placement="bottom-start" anchorEl={containerRef.current} - {...actions} - open={open} slots={slots} slotProps={slotProps} shouldRestoreFocus={shouldRestoreFocus} diff --git a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx index fc1ef14d56bef..101e2013d2cce 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx @@ -56,8 +56,6 @@ export const useMobilePicker = < const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false; const { - open, - actions, layoutProps, providerProps, renderCurrentView, @@ -100,8 +98,12 @@ export const useMobilePicker = < name, ...(isToolbarHidden && { id: labelId }), ...(!(disabled || readOnly) && { - onClick: actions.onOpen, - onKeyDown: onSpaceOrEnter(actions.onOpen), + // These direct access to `providerProps` will go away in https://github.com/mui/mui-x/pull/15671 + onClick: (event: React.UIEvent) => { + event.preventDefault(); + providerProps.contextValue.setOpen(true); + }, + onKeyDown: onSpaceOrEnter(() => providerProps.contextValue.setOpen(true)), }), ...(!!inputRef && { inputRef }), }, @@ -151,7 +153,7 @@ export const useMobilePicker = < slotProps={slotProps} unstableFieldRef={handleFieldRef} /> - + {renderCurrentView()} diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts index 8fff61acb1c9e..444ed5c24a8be 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts @@ -64,8 +64,6 @@ export const usePicker = < return { // Picker value - open: pickerValueResponse.open, - actions: pickerValueResponse.actions, fieldProps: pickerValueResponse.fieldProps, // Picker views diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts index d77e131106eb4..a7717e8860d2e 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts @@ -62,7 +62,7 @@ export interface UsePickerResponse< TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, -> extends Pick, 'open' | 'actions' | 'fieldProps'>, +> extends Pick, 'fieldProps'>, Pick, 'shouldRestoreFocus' | 'renderCurrentView'> { ownerState: PickerOwnerState; providerProps: UsePickerProviderReturnValue; diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts index 10a3f4f0a50af..1ced411b7ae6e 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts @@ -113,13 +113,14 @@ export function usePickerProvider< ); const privateContextValue = React.useMemo( - () => ({ ownerState }), - [ownerState], + () => ({ ...paramsFromUsePickerValue.privateContextValue, ownerState }), + [paramsFromUsePickerValue, ownerState], ); return { localeText, contextValue, + actionsContextValue: paramsFromUsePickerValue.actionsContextValue, privateContextValue, }; } diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts index e973b01eaba34..a3adeb812499f 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts @@ -18,11 +18,12 @@ import { UsePickerValueFieldResponse, UsePickerValueLayoutResponse, UsePickerValueViewsResponse, - UsePickerValueActions, PickerSelectionState, PickerValueUpdaterParams, UsePickerValueContextValue, UsePickerValueProviderParams, + UsePickerValueActionsContextValue, + UsePickerValuePrivateContextValue, } from './usePickerValue.types'; import { useValueWithTimezone } from '../useValueWithTimezone'; import { PickerValidValue } from '../../models'; @@ -339,56 +340,6 @@ export const usePickerValue = < })); } - const handleClear = useEventCallback(() => { - updateDate({ - value: valueManager.emptyValue, - name: 'setValueFromAction', - pickerAction: 'clear', - }); - }); - - const handleAccept = useEventCallback(() => { - updateDate({ - value: dateState.lastPublishedValue, - name: 'setValueFromAction', - pickerAction: 'accept', - }); - }); - - const handleDismiss = useEventCallback(() => { - updateDate({ - value: dateState.lastPublishedValue, - name: 'setValueFromAction', - pickerAction: 'dismiss', - }); - }); - - const handleCancel = useEventCallback(() => { - updateDate({ - value: dateState.lastCommittedValue, - name: 'setValueFromAction', - pickerAction: 'cancel', - }); - }); - - const handleSetToday = useEventCallback(() => { - updateDate({ - value: valueManager.getTodayValue(utils, timezone, valueType), - name: 'setValueFromAction', - pickerAction: 'today', - }); - }); - - const handleOpen = useEventCallback((event: React.UIEvent) => { - event.preventDefault(); - setOpen(true); - }); - - const handleClose = useEventCallback((event?: React.UIEvent) => { - event?.preventDefault(); - setOpen(false); - }); - const handleChange = useEventCallback( (newValue: TValue, selectionState: PickerSelectionState = 'partial') => updateDate({ name: 'setValueFromView', value: newValue, selectionState }), @@ -413,16 +364,6 @@ export const usePickerValue = < updateDate({ name: 'setValueFromField', value: newValue, context }), ); - const actions: UsePickerValueActions = { - onClear: handleClear, - onAccept: handleAccept, - onDismiss: handleDismiss, - onCancel: handleCancel, - onSetToday: handleSetToday, - onOpen: handleOpen, - onClose: handleClose, - }; - const fieldResponse: UsePickerValueFieldResponse = { value: dateState.draft, onChange: handleChangeFromField, @@ -436,8 +377,8 @@ export const usePickerValue = < const viewResponse: UsePickerValueViewsResponse = { value: valueWithoutError, onChange: handleChange, - onClose: handleClose, open, + setOpen, }; const isValid = (testedValue: TValue) => { @@ -452,31 +393,87 @@ export const usePickerValue = < }; const layoutResponse: UsePickerValueLayoutResponse = { - ...actions, value: valueWithoutError, onChange: handleChange, onSelectShortcut: handleSelectShortcut, isValid, }; - const contextValue = React.useMemo(() => { - return { - open, + const clearValue = useEventCallback(() => + updateDate({ + value: valueManager.emptyValue, + name: 'setValueFromAction', + pickerAction: 'clear', + }), + ); + + const setValueToToday = useEventCallback(() => + updateDate({ + value: valueManager.getTodayValue(utils, timezone, valueType), + name: 'setValueFromAction', + pickerAction: 'today', + }), + ); + + const acceptValueChanges = useEventCallback(() => + updateDate({ + value: dateState.lastPublishedValue, + name: 'setValueFromAction', + pickerAction: 'accept', + }), + ); + + const cancelValueChanges = useEventCallback(() => + updateDate({ + value: dateState.lastCommittedValue, + name: 'setValueFromAction', + pickerAction: 'cancel', + }), + ); + + const dismissViews = useEventCallback(() => { + updateDate({ + value: dateState.lastPublishedValue, + name: 'setValueFromAction', + pickerAction: 'dismiss', + }); + }); + + const actionsContextValue = React.useMemo( + () => ({ setOpen, - }; - }, [open, setOpen]); + clearValue, + setValueToToday, + acceptValueChanges, + cancelValueChanges, + }), + [setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges], + ); + + const contextValue = React.useMemo( + () => ({ + ...actionsContextValue, + open, + }), + [actionsContextValue, open], + ); + + const privateContextValue = React.useMemo( + () => ({ dismissViews }), + [dismissViews], + ); const providerParams: UsePickerValueProviderParams = { value: valueWithoutError, contextValue, + actionsContextValue, + privateContextValue, }; return { - open, fieldProps: fieldResponse, viewProps: viewResponse, layoutProps: layoutResponse, - actions, provider: providerParams, }; }; diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts index d58af8940c43a..9644f63baa90b 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts @@ -275,16 +275,6 @@ export interface UsePickerValueParams< validator: Validator, TExternalProps>; } -export interface UsePickerValueActions { - onAccept: () => void; - onClear: () => void; - onDismiss: () => void; - onCancel: () => void; - onSetToday: () => void; - onOpen: (event: React.UIEvent) => void; - onClose: (event?: React.UIEvent) => void; -} - export type UsePickerValueFieldResponse = Required< Pick, 'value' | 'onChange'> >; @@ -296,14 +286,13 @@ export interface UsePickerValueViewsResponse { value: TValue; onChange: (value: TValue, selectionState?: PickerSelectionState) => void; open: boolean; - onClose: (event?: React.MouseEvent) => void; + setOpen: React.Dispatch>; } /** * Props passed to `usePickerLayoutProps`. */ -export interface UsePickerValueLayoutResponse - extends UsePickerValueActions { +export interface UsePickerValueLayoutResponse { value: TValue; onChange: (newValue: TValue) => void; onSelectShortcut: ( @@ -320,20 +309,27 @@ export interface UsePickerValueLayoutResponse export interface UsePickerValueProviderParams { value: TValue; contextValue: UsePickerValueContextValue; + actionsContextValue: UsePickerValueActionsContextValue; + privateContextValue: UsePickerValuePrivateContextValue; } export interface UsePickerValueResponse { - open: boolean; - actions: UsePickerValueActions; viewProps: UsePickerValueViewsResponse; fieldProps: UsePickerValueFieldResponse; layoutProps: UsePickerValueLayoutResponse; provider: UsePickerValueProviderParams; } -export interface UsePickerValueContextValue { +export interface UsePickerValueContextValue extends UsePickerValueActionsContextValue { /** - * Sets the current open state of the Picker. + * `true` if the picker is open, `false` otherwise. + */ + open: boolean; +} + +export interface UsePickerValueActionsContextValue { + /** + * Set the current open state of the Picker. * ```ts * setOpen(true); // Opens the picker. * setOpen(false); // Closes the picker. @@ -344,7 +340,32 @@ export interface UsePickerValueContextValue { */ setOpen: React.Dispatch>; /** - * `true` if the picker is open, `false` otherwise. + * Set the current value of the picker to be empty. + * The value will be `null` on single pickers and `[null, null]` on range pickers. */ - open: boolean; + clearValue: () => void; + /** + * Set the current value of the picker to be the current date. + * The value will be `today` on single pickers and `[today, today]` on range pickers. + * With `today` being the current date, with its time set to `00:00:00` on Date Pickers and its time set to the current time on Time and Date Pickers. + */ + setValueToToday: () => void; + /** + * Accept the current value of the picker. + * Will call `onAccept` if defined. + * If the picker is re-opened, this value will be the one used to initialize the views. + */ + acceptValueChanges: () => void; + /** + * Cancel the changes made to the current value of the picker. + * The value will be reset to the last accepted value. + */ + cancelValueChanges: () => void; +} + +export interface UsePickerValuePrivateContextValue { + /** + * Closes the picker and accepts the current value if it is not equal to the last accepted value. + */ + dismissViews: () => void; } diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts index cf782eadbb9c8..d6199b9725c59 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts @@ -24,7 +24,7 @@ export type PickerViewsRendererProps< TAdditionalProps extends {}, > = Omit & TAdditionalProps & - UsePickerValueViewsResponse & { + Pick, 'value' | 'onChange'> & { view: TView; views: readonly TView[]; focusedView: TView | null; @@ -159,7 +159,7 @@ export const usePickerViews = < TExternalProps, TAdditionalProps >): UsePickerViewsResponse => { - const { onChange, open, onClose } = propsFromPickerValue; + const { onChange, value, open, setOpen } = propsFromPickerValue; const { view: inView, views, openTo, onViewChange, viewRenderers, timezone } = props; const { className, sx, ...propsToForwardToView } = props; @@ -220,7 +220,7 @@ export const usePickerViews = < useEnhancedEffect(() => { // Handle case of `DateTimePicker` without time renderers if (currentViewMode === 'field' && open) { - onClose(); + setOpen(false); setTimeout(() => { fieldRef?.current?.setSelectedSections(view); // focusing the input before the range selection is done @@ -290,9 +290,9 @@ export const usePickerViews = < > = { ...propsToForwardToView, ...additionalViewProps, - ...propsFromPickerValue, views, timezone, + value, onChange: setValueAndGoToNextView, view: popperView, onViewChange: setView, diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index d96774401a835..71f1671a2c784 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -68,13 +68,13 @@ export { useFieldOwnerState } from './hooks/useFieldOwnerState'; export type { MobileOnlyPickerProps } from './hooks/useMobilePicker'; export { usePicker } from './hooks/usePicker'; export type { - UsePickerResponse, UsePickerParams, UsePickerProps, UsePickerValueFieldResponse, PickerViewsRendererProps, } from './hooks/usePicker'; export type { + UsePickerValueContextValue, UsePickerValueNonStaticProps, PickerValueManager, PickerSelectionState, diff --git a/packages/x-date-pickers/src/themeAugmentation/themeAugmentation.spec.ts b/packages/x-date-pickers/src/themeAugmentation/themeAugmentation.spec.ts index 8bd7cdc5e7d7f..a622d4fda8e29 100644 --- a/packages/x-date-pickers/src/themeAugmentation/themeAugmentation.spec.ts +++ b/packages/x-date-pickers/src/themeAugmentation/themeAugmentation.spec.ts @@ -356,7 +356,7 @@ createTheme({ }, MuiPickersPopper: { defaultProps: { - open: true, + placement: 'bottom', // @ts-expect-error invalid MuiPickersPopper prop someRandomProp: true, }, diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 9ec0515027031..4598d445e78f6 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -415,6 +415,7 @@ { "name": "UseMultiInputTimeRangeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseMultiInputTimeRangeFieldProps", "kind": "Interface" }, { "name": "useParsedFormat", "kind": "Variable" }, + { "name": "usePickerActionsContext", "kind": "Variable" }, { "name": "usePickerContext", "kind": "Variable" }, { "name": "usePickerLayout", "kind": "ExportAssignment" }, { "name": "usePickerTranslations", "kind": "Variable" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index ff4ae2da325fb..b402815637025 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -300,6 +300,7 @@ { "name": "UseDateFieldProps", "kind": "Interface" }, { "name": "UseDateTimeFieldProps", "kind": "Interface" }, { "name": "useParsedFormat", "kind": "Variable" }, + { "name": "usePickerActionsContext", "kind": "Variable" }, { "name": "usePickerContext", "kind": "Variable" }, { "name": "usePickerLayout", "kind": "ExportAssignment" }, { "name": "usePickerTranslations", "kind": "Variable" }, From 488e6bbd6f080e78060c277ab6cbefebbdaaad4f Mon Sep 17 00:00:00 2001 From: Jose C Quintas Jr Date: Thu, 19 Dec 2024 18:12:25 +0100 Subject: [PATCH 10/13] Revert "[code-infra] Remove @mui/material-nextjs dependency (#15925)" (#15945) --- babel.config.js | 1 + docs/package.json | 1 + pnpm-lock.yaml | 32 ++++++++++++++++++++++++++++++++ renovate.json | 1 + scripts/useMaterialUIv6.mjs | 1 + webpackBaseConfig.js | 4 ++++ 6 files changed, 40 insertions(+) diff --git a/babel.config.js b/babel.config.js index 31279ecad0686..b67f02fa534d7 100644 --- a/babel.config.js +++ b/babel.config.js @@ -30,6 +30,7 @@ const defaultAlias = { '@mui/x-tree-view': resolveAliasPath('./packages/x-tree-view/src'), '@mui/x-tree-view-pro': resolveAliasPath('./packages/x-tree-view-pro/src'), '@mui/x-internals': resolveAliasPath('./packages/x-internals/src'), + '@mui/material-nextjs': '@mui/monorepo/packages/mui-material-nextjs/src', '@mui-internal/api-docs-builder': resolveAliasPath( './node_modules/@mui/monorepo/packages/api-docs-builder', ), diff --git a/docs/package.json b/docs/package.json index b1389e9b87cf5..aca4dfdc157a5 100644 --- a/docs/package.json +++ b/docs/package.json @@ -32,6 +32,7 @@ "@mui/joy": "^5.0.0-beta.48", "@mui/lab": "^5.0.0-alpha.173", "@mui/material": "^5.16.11", + "@mui/material-nextjs": "^5.16.8", "@mui/styles": "^5.16.11", "@mui/system": "^5.16.8", "@mui/utils": "^5.16.8", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 25a9db4e0e577..058a1f47988fa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -440,6 +440,9 @@ importers: '@mui/material': specifier: ^5.16.11 version: 5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material-nextjs': + specifier: ^5.16.8 + version: 5.16.8(@emotion/cache@11.14.0)(@emotion/server@11.11.0)(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.17)(next@15.1.1(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@mui/styles': specifier: ^5.16.11 version: 5.16.11(@types/react@18.3.17)(react@18.3.1) @@ -3181,6 +3184,24 @@ packages: '@types/react': optional: true + '@mui/material-nextjs@5.16.8': + resolution: {integrity: sha512-UJhXaizQWrl3a5uXeCYyAHITXZnRBJJFCarccXk04gH5+NS9UArNl20mG6emyuPwV67UDh8DBNUSjpHd1pTVGg==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@emotion/cache': ^11.11.0 + '@emotion/server': ^11.11.0 + '@mui/material': ^5.0.0 + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + next: ^13.0.0 || ^14.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/cache': + optional: true + '@emotion/server': + optional: true + '@types/react': + optional: true + '@mui/material@5.16.11': resolution: {integrity: sha512-uoc67oecKdnVKaMHBVE433YrMuxQs22xY5nIjRb5sAPB+GaeZQWp8brQ3/adeH6k2IDa8+9i2IVd4fNLuvHSvA==} engines: {node: '>=12.0.0'} @@ -12142,6 +12163,17 @@ snapshots: '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1) '@types/react': 18.3.17 + '@mui/material-nextjs@5.16.8(@emotion/cache@11.14.0)(@emotion/server@11.11.0)(@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.17)(next@15.1.1(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.0 + '@mui/material': 5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 15.1.1(@babel/core@7.26.0)(@playwright/test@1.49.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react: 18.3.1 + optionalDependencies: + '@emotion/cache': 11.14.0 + '@emotion/server': 11.11.0 + '@types/react': 18.3.17 + '@mui/material@5.16.11(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react@18.3.1))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 diff --git a/renovate.json b/renovate.json index 38f4e54f1c4b9..eb56e266d6d03 100644 --- a/renovate.json +++ b/renovate.json @@ -88,6 +88,7 @@ "@mui/joy", "@mui/lab", "@mui/material", + "@mui/material-nextjs", "@mui/styles", "@mui/system", "@mui/types", diff --git a/scripts/useMaterialUIv6.mjs b/scripts/useMaterialUIv6.mjs index e730521d69f8f..abc2fe55845b4 100644 --- a/scripts/useMaterialUIv6.mjs +++ b/scripts/useMaterialUIv6.mjs @@ -9,6 +9,7 @@ const pnpmUpdate = childProcess.spawnSync( '@mui/system@6.x', '@mui/icons-material@6.x', '@mui/utils@6.x', + '@mui/material-nextjs@6.x', '@mui/styles@6.x', '@mui/lab@latest', ], diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js index fc0446a9ae48d..2ada3fe5f14ad 100644 --- a/webpackBaseConfig.js +++ b/webpackBaseConfig.js @@ -21,6 +21,10 @@ module.exports = { '@mui/x-tree-view-pro': path.resolve(__dirname, './packages/x-tree-view-pro/src'), '@mui/x-license': path.resolve(__dirname, './packages/x-license/src'), '@mui/x-internals': path.resolve(__dirname, './packages/x-internals/src'), + '@mui/material-nextjs': path.resolve( + __dirname, + './node_modules/@mui/monorepo/packages/mui-material-nextjs/src', + ), docs: path.resolve(__dirname, './node_modules/@mui/monorepo/docs'), docsx: path.resolve(__dirname, './docs'), }, From 695f807cc5f1256994bf1e5f478768ec7462b14f Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Thu, 19 Dec 2024 18:36:11 +0100 Subject: [PATCH 11/13] [pickers] Use `usePickerContext()` to get the view-related props in the layout, toolbar and tabs slots (#15606) Signed-off-by: Flavien DELANGLE Co-authored-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> --- .../custom-layout/AddComponent.tsx | 3 +- .../migration-pickers-v7.md | 89 ++++++++++++------ .../api/date-pickers/date-picker-toolbar.json | 19 ---- .../date-range-picker-toolbar.json | 10 -- .../date-pickers/date-time-picker-tabs.json | 12 --- .../date-time-picker-toolbar.json | 20 +--- .../date-time-range-picker-tabs.json | 12 --- .../date-time-range-picker-toolbar.json | 19 ---- .../api/date-pickers/time-picker-toolbar.json | 19 ---- .../overview/CustomLayoutRangePicker.tsx | 2 +- .../components/overview/mainDemo/Clock.tsx | 3 +- .../mainDemo/DateRangeWithShortcuts.tsx | 2 +- .../overview/mainDemo/DigitalClock.tsx | 3 +- .../date-picker-toolbar.json | 8 +- .../date-range-picker-toolbar.json | 8 +- .../date-time-picker-tabs.json | 7 +- .../date-time-picker-toolbar.json | 8 +- .../date-time-range-picker-tabs.json | 7 +- .../date-time-range-picker-toolbar.json | 8 +- .../time-picker-toolbar.json | 8 +- .../DateRangePickerToolbar.tsx | 19 +--- .../DateTimeRangePickerTabs.tsx | 42 ++++----- .../DateTimeRangePickerToolbar.tsx | 93 ++++++++----------- .../DesktopDateRangePicker.types.ts | 7 +- .../DesktopDateTimeRangePicker.types.ts | 8 +- .../MobileDateRangePicker.types.ts | 7 +- .../MobileDateTimeRangePicker.types.ts | 8 +- .../StaticDateRangePicker.types.ts | 4 +- .../internals/hooks/models/useRangePicker.ts | 10 +- .../useDesktopRangePicker.tsx | 13 ++- .../useDesktopRangePicker.types.ts | 14 +-- .../useMobileRangePicker.tsx | 2 +- .../useMobileRangePicker.types.ts | 14 +-- .../useStaticRangePicker.tsx | 2 +- .../useStaticRangePicker.types.ts | 11 +-- .../src/DatePicker/DatePickerToolbar.tsx | 23 +---- .../DateTimePicker/DateTimePicker.types.ts | 4 +- .../src/DateTimePicker/DateTimePickerTabs.tsx | 25 +---- .../DateTimePicker/DateTimePickerToolbar.tsx | 47 +++++----- .../src/DateTimePicker/shared.tsx | 8 +- .../DesktopDatePicker.types.ts | 5 +- .../DesktopDateTimePicker.types.ts | 7 +- .../DesktopDateTimePickerLayout.tsx | 16 +--- .../DesktopTimePicker.types.ts | 4 +- .../MobileDatePicker.types.ts | 5 +- .../MobileDateTimePicker.types.ts | 16 ++-- .../MobileTimePicker.types.ts | 16 ++-- .../src/PickersLayout/PickersLayout.tsx | 22 ++--- .../src/PickersLayout/PickersLayout.types.ts | 45 +++------ .../src/PickersLayout/usePickerLayout.tsx | 25 ++--- .../StaticDatePicker.types.ts | 7 +- .../StaticDateTimePicker.types.ts | 6 +- .../StaticTimePicker.types.ts | 6 +- .../src/TimePicker/TimePicker.types.ts | 6 +- .../src/TimePicker/TimePickerToolbar.tsx | 23 +---- .../src/hooks/usePickerContext.ts | 9 +- .../internals/components/PickerProvider.tsx | 12 ++- .../internals/components/PickersToolbar.tsx | 22 ++--- .../useDesktopPicker.types.ts | 19 ++-- .../useMobilePicker/useMobilePicker.types.ts | 19 ++-- .../internals/hooks/usePicker/usePicker.ts | 1 - .../hooks/usePicker/usePicker.types.ts | 3 +- .../hooks/usePicker/usePickerProvider.ts | 12 ++- .../hooks/usePicker/usePickerViews.ts | 32 +++++-- .../useStaticPicker/useStaticPicker.types.ts | 10 +- .../x-date-pickers/src/internals/index.ts | 4 +- .../src/internals/models/props/tabs.ts | 14 --- .../src/internals/models/props/toolbar.ts | 21 +---- .../src/themeAugmentation/props.d.ts | 5 +- .../themeAugmentation.spec.ts | 2 +- 70 files changed, 354 insertions(+), 668 deletions(-) diff --git a/docs/data/date-pickers/custom-layout/AddComponent.tsx b/docs/data/date-pickers/custom-layout/AddComponent.tsx index 837f63dd89fe8..2b398876c7d21 100644 --- a/docs/data/date-pickers/custom-layout/AddComponent.tsx +++ b/docs/data/date-pickers/custom-layout/AddComponent.tsx @@ -16,7 +16,6 @@ import { PickersLayoutRoot, PickersLayoutContentWrapper, } from '@mui/x-date-pickers/PickersLayout'; -import { DateView } from '@mui/x-date-pickers/models'; import { PickersActionBarProps } from '@mui/x-date-pickers/PickersActionBar'; import { usePickerActionsContext } from '@mui/x-date-pickers/hooks'; @@ -63,7 +62,7 @@ function RestaurantHeader() { ); } -function CustomLayout(props: PickersLayoutProps) { +function CustomLayout(props: PickersLayoutProps) { const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props); return ( diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md index 62df8c1afa4c8..d7315974d17d4 100644 --- a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md +++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md @@ -364,55 +364,62 @@ This change causes a few breaking changes: ); ``` -- The component passed to the `layout` slot no longer receives a `disabled` prop, instead you can use the `usePickerContext` hook: +- The component passed to the `layout` slot no longer receives the `disabled` and `readOnly` props, instead you can use the `usePickerContext` hook: ```diff - -console.log(props.disabled); +import { usePickerContext } from '@mui/x-date-pickers/hooks'; - +const { disabled } = usePickerContext(); - +console.log(disabled); - ``` -- The component passed to the `layout` slot no longer receives a `readOnly` prop, instead you can use the `usePickerContext` hook: + -const { disabled } = props; + +const { disabled } = usePickerContext(); - ```diff - -console.log(props.readOnly); - +import { usePickerContext } from '@mui/x-date-pickers/hooks'; + -const { readOnly } = props; +const { readOnly } = usePickerContext(); - +console.log(readOnly); ``` - The component passed to the `layout` slot no longer receives an `isRtl` prop. If you need to access this information, you can use the `useRtl` hook from `@mui/system`: ```diff +import { useRtl } from '@mui/system/RtlProvider'; - function CustomLayout(props) { - - console.log(props.isRtl); + + - const { isRtl } = props; + const isRtl = useRtl(); - + console.log(isRtl); - } ``` - The component passed to the `layout` slot no longer receives the `orientation` and `isLandscape` props, instead you can use the `usePickerContext` hook: ```diff - -console.log(props.orientation); +import { usePickerContext } from '@mui/x-date-pickers/hooks'; + + -const { orientation } = props; +const { orientation } = usePickerContext(); - +console.log(orientation); - -console.log(props.isLandscape); - +import { usePickerContext } from '@mui/x-date-pickers/hooks'; + + -const { isLandscape } = props; +const { orientation } = usePickerContext(); - +console.log(orientation === 'landscape'); + +const isLandscape = orientation === 'landscape'; ``` - The component passed to the `layout` slot no longer receives a `wrapperVariant` prop, instead you can use the `usePickerContext` hook: ```diff - -console.log(props.wrapperVariant); +import { usePickerContext } from '@mui/x-date-pickers/hooks'; + + -const { wrapperVariant } = props; +const { variant } = usePickerContext(); - +console.log(variant); + ``` + +- The component passed to the `layout` slot no longer receives the `view`, `views` and `onViewChange` props, instead you can use the `usePickerContext` hook: + + ```diff + +import { usePickerContext } from '@mui/x-date-pickers/hooks'; + + -const { view } = props; + +const { view } = usePickerContext(); + + -const { views } = props; + +const { views } = usePickerContext(); + + -const { onViewChange } = props; + +const { onViewChange } = usePickerContext(); ``` - The component passed to the `layout` slot no longer receives the `onClear`, `onSetToday`, `onAccept`, `onCancel`, `onOpen`, `onClose` and `onDismiss` props, instead you can use the `usePickerActionsContext` or the `usePickerContext` hooks: @@ -462,22 +469,48 @@ This change causes a few breaking changes: ### Slot: `toolbar` -- The component passed to the `toolbar` slot no longer receives a `disabled` prop, instead you can use the `usePickerContext` hook: +- The component passed to the `toolbar` slot no longer receives the `disabled` and `readOnly` props, instead you can use the `usePickerContext` hook: ```diff - -console.log(props.disabled); +import { usePickerContext } from '@mui/x-date-pickers/hooks'; + + -const { disabled } = props; +const { disabled } = usePickerContext(); - +console.log(disabled); + + -const { readOnly } = props; + +const { readOnly } = usePickerContext(); ``` -- The component passed to the `toolbar` slot no longer receives a `readOnly` prop, instead you can use the `usePickerContext` hook: +- The component passed to the `toolbar` slot no longer receives a `view`, `views` and `onViewChange` props, instead you can use the `usePickerContext` hook: ```diff - -console.log(props.readOnly); +import { usePickerContext } from '@mui/x-date-pickers/hooks'; - +const { readOnly } = usePickerContext(); - +console.log(readOnly); + + -const { view } = props; + +const { view } = usePickerContext(); + + -const { views } = props; + +const { views } = usePickerContext(); + + -const { onViewChange } = props; + +const { onViewChange } = usePickerContext(); + ``` + +### Slot: `tabs` + +- The component passed to the `tabs` slot no longer receives a `view`, `views` and `onViewChange` props, instead you can use the `usePickerContext` hook: + + ```diff + +import { usePickerContext } from '@mui/x-date-pickers/hooks'; + + -const { view } = props; + +const { view } = usePickerContext(); + + -const { views } = props; + +const { views } = usePickerContext(); + + -const { onViewChange } = props; + +const { onViewChange } = usePickerContext(); ``` ### Slot: `actionBar` diff --git a/docs/pages/x/api/date-pickers/date-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-picker-toolbar.json index aa2ee2a36df1d..d45ecc4dc212b 100644 --- a/docs/pages/x/api/date-pickers/date-picker-toolbar.json +++ b/docs/pages/x/api/date-pickers/date-picker-toolbar.json @@ -1,24 +1,5 @@ { "props": { - "onViewChange": { - "type": { "name": "func" }, - "required": true, - "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] } - }, - "view": { - "type": { - "name": "enum", - "description": "'day'
| 'month'
| 'year'" - }, - "required": true - }, - "views": { - "type": { - "name": "arrayOf", - "description": "Array<'day'
| 'month'
| 'year'>" - }, - "required": true - }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." }, "sx": { diff --git a/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json index 8e907ede02236..b95d8610ead83 100644 --- a/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json +++ b/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json @@ -1,15 +1,5 @@ { "props": { - "onViewChange": { - "type": { "name": "func" }, - "required": true, - "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] } - }, - "view": { "type": { "name": "enum", "description": "'day'" }, "required": true }, - "views": { - "type": { "name": "arrayOf", "description": "Array<'day'>" }, - "required": true - }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." }, "sx": { diff --git a/docs/pages/x/api/date-pickers/date-time-picker-tabs.json b/docs/pages/x/api/date-pickers/date-time-picker-tabs.json index 1b401f930604a..7c1e83a7debb6 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker-tabs.json +++ b/docs/pages/x/api/date-pickers/date-time-picker-tabs.json @@ -1,17 +1,5 @@ { "props": { - "onViewChange": { - "type": { "name": "func" }, - "required": true, - "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] } - }, - "view": { - "type": { - "name": "enum", - "description": "'day'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'year'" - }, - "required": true - }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "dateIcon": { "type": { "name": "node" }, "default": "DateRange" }, "hidden": { diff --git a/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json index 5e4b5e44022b3..97fb4c4871116 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json +++ b/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json @@ -1,17 +1,5 @@ { "props": { - "onViewChange": { - "type": { "name": "func" }, - "required": true, - "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] } - }, - "views": { - "type": { - "name": "arrayOf", - "description": "Array<'day'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'year'>" - }, - "required": true - }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." }, "sx": { @@ -23,13 +11,7 @@ }, "toolbarFormat": { "type": { "name": "string" } }, "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" }, - "toolbarTitle": { "type": { "name": "node" } }, - "view": { - "type": { - "name": "enum", - "description": "'day'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'year'" - } - } + "toolbarTitle": { "type": { "name": "node" } } }, "name": "DateTimePickerToolbar", "imports": [ diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.json b/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.json index ddc60b796d52c..732d525f3e0bb 100644 --- a/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.json +++ b/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.json @@ -1,17 +1,5 @@ { "props": { - "onViewChange": { - "type": { "name": "func" }, - "required": true, - "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] } - }, - "view": { - "type": { - "name": "enum", - "description": "'day'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'year'" - }, - "required": true - }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "dateIcon": { "type": { "name": "element" }, "default": "DateRangeIcon" }, "hidden": { diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json index c7b155134c015..3489711e1a703 100644 --- a/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json +++ b/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json @@ -1,24 +1,5 @@ { "props": { - "onViewChange": { - "type": { "name": "func" }, - "required": true, - "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] } - }, - "view": { - "type": { - "name": "enum", - "description": "'day'
| 'hours'
| 'meridiem'
| 'minutes'
| 'seconds'" - }, - "required": true - }, - "views": { - "type": { - "name": "arrayOf", - "description": "Array<'day'
| 'hours'
| 'meridiem'
| 'minutes'
| 'seconds'>" - }, - "required": true - }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." }, "sx": { diff --git a/docs/pages/x/api/date-pickers/time-picker-toolbar.json b/docs/pages/x/api/date-pickers/time-picker-toolbar.json index 0ac030abb5f11..649a49a01c186 100644 --- a/docs/pages/x/api/date-pickers/time-picker-toolbar.json +++ b/docs/pages/x/api/date-pickers/time-picker-toolbar.json @@ -1,24 +1,5 @@ { "props": { - "onViewChange": { - "type": { "name": "func" }, - "required": true, - "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] } - }, - "view": { - "type": { - "name": "enum", - "description": "'hours'
| 'meridiem'
| 'minutes'
| 'seconds'" - }, - "required": true - }, - "views": { - "type": { - "name": "arrayOf", - "description": "Array<'hours'
| 'meridiem'
| 'minutes'
| 'seconds'>" - }, - "required": true - }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." }, "sx": { diff --git a/docs/src/modules/components/overview/CustomLayoutRangePicker.tsx b/docs/src/modules/components/overview/CustomLayoutRangePicker.tsx index d6b757465b968..da7dd57266b0a 100644 --- a/docs/src/modules/components/overview/CustomLayoutRangePicker.tsx +++ b/docs/src/modules/components/overview/CustomLayoutRangePicker.tsx @@ -55,7 +55,7 @@ const shortcutsItems: PickersShortcutsItem>[] = [ { label: 'Reset', getValue: () => [null, null] }, ]; -interface CustomLayoutProps extends PickersLayoutProps, 'day'> { +interface CustomLayoutProps extends PickersLayoutProps> { layout: Layout; } diff --git a/docs/src/modules/components/overview/mainDemo/Clock.tsx b/docs/src/modules/components/overview/mainDemo/Clock.tsx index 1b574dede42c1..dc3efca35696d 100644 --- a/docs/src/modules/components/overview/mainDemo/Clock.tsx +++ b/docs/src/modules/components/overview/mainDemo/Clock.tsx @@ -10,7 +10,6 @@ import { PickersLayoutRoot, PickersLayoutContentWrapper, } from '@mui/x-date-pickers/PickersLayout'; -import { TimeView } from '@mui/x-date-pickers/models'; const StyledLayout = styled(PickersLayoutRoot)({ overflow: 'auto', @@ -31,7 +30,7 @@ const StyledLayout = styled(PickersLayoutRoot)({ }, }); -function CustomLayout(props: PickersLayoutProps) { +function CustomLayout(props: PickersLayoutProps) { const { actionBar, content, toolbar, ownerState } = usePickerLayout(props); return ( diff --git a/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx b/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx index 5d0485b192d09..f1199ef6aa422 100644 --- a/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx +++ b/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx @@ -55,7 +55,7 @@ const shortcutsItems: PickersShortcutsItem>[] = [ { label: 'Reset', getValue: () => [null, null] }, ]; -interface CustomLayoutProps extends PickersLayoutProps, 'day'> { +interface CustomLayoutProps extends PickersLayoutProps> { isHorizontal?: boolean; } function CustomLayout(props: CustomLayoutProps) { diff --git a/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx b/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx index d2dc94b2a1537..e2d30b7f8211c 100644 --- a/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx +++ b/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx @@ -13,7 +13,6 @@ import { PickersLayoutContentWrapper, } from '@mui/x-date-pickers/PickersLayout'; import { renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers'; -import { TimeView } from '@mui/x-date-pickers/models'; const StyledLayout = styled(PickersLayoutRoot)({ overflow: 'auto', @@ -24,7 +23,7 @@ const StyledLayout = styled(PickersLayoutRoot)({ }, }); -function CustomLayout(props: PickersLayoutProps) { +function CustomLayout(props: PickersLayoutProps) { const { actionBar, content, ownerState } = usePickerLayout(props); return ( diff --git a/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json index 35ceea6728aab..d69f7f54c1b0c 100644 --- a/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json +++ b/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json @@ -3,19 +3,13 @@ "propDescriptions": { "classes": { "description": "Override or extend the styles applied to the component." }, "hidden": { "description": "If true, show the toolbar even in desktop mode." }, - "onViewChange": { - "description": "Callback called when a toolbar is clicked", - "typeDescriptions": { "view": "The view to open" } - }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." }, "toolbarFormat": { "description": "Toolbar date format." }, "toolbarPlaceholder": { "description": "Toolbar value placeholder—it is displayed when the value is empty." - }, - "view": { "description": "Currently visible picker view." }, - "views": { "description": "Available views." } + } }, "classDescriptions": { "root": { "description": "Styles applied to the root element." }, diff --git a/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json index 6198bb709b0e6..c812f7977b2cd 100644 --- a/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json +++ b/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json @@ -3,19 +3,13 @@ "propDescriptions": { "classes": { "description": "Override or extend the styles applied to the component." }, "hidden": { "description": "If true, show the toolbar even in desktop mode." }, - "onViewChange": { - "description": "Callback called when a toolbar is clicked", - "typeDescriptions": { "view": "The view to open" } - }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." }, "toolbarFormat": { "description": "Toolbar date format." }, "toolbarPlaceholder": { "description": "Toolbar value placeholder—it is displayed when the value is empty." - }, - "view": { "description": "Currently visible picker view." }, - "views": { "description": "Available views." } + } }, "classDescriptions": { "container": { diff --git a/docs/translations/api-docs/date-pickers/date-time-picker-tabs/date-time-picker-tabs.json b/docs/translations/api-docs/date-pickers/date-time-picker-tabs/date-time-picker-tabs.json index 57e9f88d0d2c4..bde77f89c9696 100644 --- a/docs/translations/api-docs/date-pickers/date-time-picker-tabs/date-time-picker-tabs.json +++ b/docs/translations/api-docs/date-pickers/date-time-picker-tabs/date-time-picker-tabs.json @@ -4,15 +4,10 @@ "classes": { "description": "Override or extend the styles applied to the component." }, "dateIcon": { "description": "Date tab icon." }, "hidden": { "description": "Toggles visibility of the tabs allowing view switching." }, - "onViewChange": { - "description": "Callback called when a tab is clicked.", - "typeDescriptions": { "view": "The view to open" } - }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." }, - "timeIcon": { "description": "Time tab icon." }, - "view": { "description": "Currently visible picker view." } + "timeIcon": { "description": "Time tab icon." } }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } } } diff --git a/docs/translations/api-docs/date-pickers/date-time-picker-toolbar/date-time-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-time-picker-toolbar/date-time-picker-toolbar.json index fa51d520fd070..1617f547fbfd6 100644 --- a/docs/translations/api-docs/date-pickers/date-time-picker-toolbar/date-time-picker-toolbar.json +++ b/docs/translations/api-docs/date-pickers/date-time-picker-toolbar/date-time-picker-toolbar.json @@ -3,10 +3,6 @@ "propDescriptions": { "classes": { "description": "Override or extend the styles applied to the component." }, "hidden": { "description": "If true, show the toolbar even in desktop mode." }, - "onViewChange": { - "description": "Callback called when a toolbar is clicked", - "typeDescriptions": { "view": "The view to open" } - }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." }, @@ -16,9 +12,7 @@ }, "toolbarTitle": { "description": "If provided, it will be used instead of dateTimePickerToolbarTitle from localization." - }, - "view": { "description": "Currently visible picker view." }, - "views": { "description": "Available views." } + } }, "classDescriptions": { "ampmLabel": { "description": "Styles applied to {{nodeName}}.", "nodeName": "am/pm labels" }, diff --git a/docs/translations/api-docs/date-pickers/date-time-range-picker-tabs/date-time-range-picker-tabs.json b/docs/translations/api-docs/date-pickers/date-time-range-picker-tabs/date-time-range-picker-tabs.json index 40d062cc2ac95..d75a7d177e62f 100644 --- a/docs/translations/api-docs/date-pickers/date-time-range-picker-tabs/date-time-range-picker-tabs.json +++ b/docs/translations/api-docs/date-pickers/date-time-range-picker-tabs/date-time-range-picker-tabs.json @@ -4,15 +4,10 @@ "classes": { "description": "Override or extend the styles applied to the component." }, "dateIcon": { "description": "Date tab icon." }, "hidden": { "description": "Toggles visibility of the tabs allowing view switching." }, - "onViewChange": { - "description": "Callback called when a tab is clicked.", - "typeDescriptions": { "view": "The view to open" } - }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." }, - "timeIcon": { "description": "Time tab icon." }, - "view": { "description": "Currently visible picker view." } + "timeIcon": { "description": "Time tab icon." } }, "classDescriptions": { "filler": { diff --git a/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json index 2819a2b5a12f8..839dbbc465ac8 100644 --- a/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json +++ b/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json @@ -3,19 +3,13 @@ "propDescriptions": { "classes": { "description": "Override or extend the styles applied to the component." }, "hidden": { "description": "If true, show the toolbar even in desktop mode." }, - "onViewChange": { - "description": "Callback called when a toolbar is clicked", - "typeDescriptions": { "view": "The view to open" } - }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." }, "toolbarFormat": { "description": "Toolbar date format." }, "toolbarPlaceholder": { "description": "Toolbar value placeholder—it is displayed when the value is empty." - }, - "view": { "description": "Currently visible picker view." }, - "views": { "description": "Available views." } + } }, "classDescriptions": { "endToolbar": { diff --git a/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json b/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json index e0a4f0248d90c..d918f8d53050b 100644 --- a/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json +++ b/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json @@ -3,19 +3,13 @@ "propDescriptions": { "classes": { "description": "Override or extend the styles applied to the component." }, "hidden": { "description": "If true, show the toolbar even in desktop mode." }, - "onViewChange": { - "description": "Callback called when a toolbar is clicked", - "typeDescriptions": { "view": "The view to open" } - }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." }, "toolbarFormat": { "description": "Toolbar date format." }, "toolbarPlaceholder": { "description": "Toolbar value placeholder—it is displayed when the value is empty." - }, - "view": { "description": "Currently visible picker view." }, - "views": { "description": "Available views." } + } }, "classDescriptions": { "ampmLabel": { diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx index 2ce9fb24f1d27..2019d54515ace 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx @@ -33,7 +33,7 @@ const useUtilityClasses = (classes: Partial | und export interface DateRangePickerToolbarProps extends ExportedDateRangePickerToolbarProps, - Omit, 'onChange' | 'isLandscape'>, + Omit, 'onChange' | 'isLandscape'>, Pick {} export interface ExportedDateRangePickerToolbarProps extends ExportedBaseToolbarProps { @@ -87,9 +87,6 @@ const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar( toolbarFormat, className, classes: classesProp, - onViewChange, - view, - views, ...other } = props; @@ -149,12 +146,6 @@ DateRangePickerToolbar.propTypes = { */ hidden: PropTypes.bool, onRangePositionChange: PropTypes.func.isRequired, - /** - * Callback called when a toolbar is clicked - * @template TView - * @param {TView} view The view to open - */ - onViewChange: PropTypes.func.isRequired, rangePosition: PropTypes.oneOf(['end', 'start']).isRequired, /** * The system prop that allows defining system overrides as well as additional CSS styles. @@ -175,14 +166,6 @@ DateRangePickerToolbar.propTypes = { */ toolbarPlaceholder: PropTypes.node, value: PropTypes.arrayOf(PropTypes.object).isRequired, - /** - * Currently visible picker view. - */ - view: PropTypes.oneOf(['day']).isRequired, - /** - * Available views. - */ - views: PropTypes.arrayOf(PropTypes.oneOf(['day'])).isRequired, } as any; export { DateRangePickerToolbar }; diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx index e2c0511949eba..88fef68210bc5 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx @@ -8,13 +8,12 @@ import useEventCallback from '@mui/utils/useEventCallback'; import { TimeIcon, DateRangeIcon, ArrowLeftIcon, ArrowRightIcon } from '@mui/x-date-pickers/icons'; import { DateOrTimeViewWithMeridiem, - BaseTabsProps, ExportedBaseTabsProps, isDatePickerView, usePickerPrivateContext, } from '@mui/x-date-pickers/internals'; import { PickerOwnerState } from '@mui/x-date-pickers/models'; -import { usePickerTranslations } from '@mui/x-date-pickers/hooks'; +import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks'; import IconButton from '@mui/material/IconButton'; import Button from '@mui/material/Button'; import { @@ -66,7 +65,6 @@ export interface ExportedDateTimeRangePickerTabsProps extends ExportedBaseTabsPr export interface DateTimeRangePickerTabsProps extends ExportedDateTimeRangePickerTabsProps, - BaseTabsProps, Pick {} const useUtilityClasses = (classes: Partial | undefined) => { @@ -114,9 +112,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs( const props = useThemeProps({ props: inProps, name: 'MuiDateTimeRangePickerTabs' }); const { dateIcon = , - onViewChange, timeIcon = , - view, hidden = typeof window === 'undefined' || window.innerHeight < 667, rangePosition, onRangePositionChange, @@ -127,8 +123,12 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs( const translations = usePickerTranslations(); const { ownerState } = usePickerPrivateContext(); + const { view, onViewChange } = usePickerContext(); const classes = useUtilityClasses(classesProp); - const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]); + const value = React.useMemo( + () => (view == null ? null : viewToTab(view, rangePosition)), + [view, rangePosition], + ); const isPreviousHidden = value === 'start-date'; const isNextHidden = value === 'end-time'; const tabLabel = React.useMemo(() => { @@ -161,13 +161,13 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs( }); const changeToPreviousTab = useEventCallback(() => { - const previousTab = tabOptions[tabOptions.indexOf(value) - 1]; + const previousTab = value == null ? tabOptions[0] : tabOptions[tabOptions.indexOf(value) - 1]; onViewChange(tabToView(previousTab)); handleRangePositionChange(previousTab); }); const changeToNextTab = useEventCallback(() => { - const nextTab = tabOptions[tabOptions.indexOf(value) + 1]; + const nextTab = value == null ? tabOptions[0] : tabOptions[tabOptions.indexOf(value) + 1]; onViewChange(tabToView(nextTab)); handleRangePositionChange(nextTab); }); @@ -176,6 +176,15 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs( return null; } + let startIcon: React.ReactNode; + if (view == null) { + startIcon = null; + } else if (isDatePickerView(view)) { + startIcon = dateIcon; + } else { + startIcon = timeIcon; + } + return ( )} - + {tabLabel} {!isNextHidden ? ( @@ -237,12 +242,6 @@ DateTimeRangePickerTabs.propTypes = { */ hidden: PropTypes.bool, onRangePositionChange: PropTypes.func.isRequired, - /** - * Callback called when a tab is clicked. - * @template TView - * @param {TView} view The view to open - */ - onViewChange: PropTypes.func.isRequired, rangePosition: PropTypes.oneOf(['end', 'start']).isRequired, /** * The system prop that allows defining system overrides as well as additional CSS styles. @@ -257,11 +256,6 @@ DateTimeRangePickerTabs.propTypes = { * @default TimeIcon */ timeIcon: PropTypes.element, - /** - * Currently visible picker view. - */ - view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']) - .isRequired, } as any; export { DateTimeRangePickerTabs }; diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx index bc2dcc282966a..64a761e663a09 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx @@ -12,7 +12,7 @@ import { PickerRangeValue, useToolbarOwnerState, PickerToolbarOwnerState, - DateTimePickerToolbarForceDesktopVariant, + DateTimePickerToolbarOverrideContext, } from '@mui/x-date-pickers/internals'; import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks'; import { PickerValidDate } from '@mui/x-date-pickers/models'; @@ -37,7 +37,7 @@ const useUtilityClasses = (classes: Partial | type DateTimeRangeViews = Exclude; export interface DateTimeRangePickerToolbarProps - extends BaseToolbarProps, + extends BaseToolbarProps, Pick, ExportedDateTimeRangePickerToolbarProps { ampm?: boolean; @@ -93,12 +93,9 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker onRangePositionChange, className, classes: classesProp, - onViewChange, onChange, classes: inClasses, - view, isLandscape, - views, ampm, hidden, toolbarFormat, @@ -108,7 +105,7 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker ...other } = props; - const { disabled, readOnly } = usePickerContext(); + const { disabled, readOnly, view, onViewChange, views } = usePickerContext(); const translations = usePickerTranslations(); const ownerState = useToolbarOwnerState(); const classes = useUtilityClasses(classesProp); @@ -124,8 +121,23 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker toolbarPlaceholder, }; - const handleStartRangeViewChange = React.useCallback( - (newView: DateOrTimeViewWithMeridiem) => { + const handleOnChange = React.useCallback( + (newDate: PickerValidDate | null) => { + const { nextSelection, newRange } = calculateRangeChange({ + newDate, + utils, + range: props.value, + rangePosition, + allowRangeFlip: true, + }); + onRangePositionChange(nextSelection); + onChange(newRange); + }, + [onChange, onRangePositionChange, props.value, rangePosition, utils], + ); + + const startOverrides = React.useMemo(() => { + const handleStartRangeViewChange = (newView: DateOrTimeViewWithMeridiem) => { if (newView === 'year' || newView === 'month') { return; } @@ -133,12 +145,17 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker onRangePositionChange('start'); } onViewChange(newView); - }, - [onRangePositionChange, onViewChange, rangePosition], - ); + }; + + return { + forceDesktopVariant: true, + onViewChange: handleStartRangeViewChange, + view: rangePosition === 'start' ? view : null, + }; + }, [rangePosition, view, onRangePositionChange, onViewChange]); - const handleEndRangeViewChange = React.useCallback( - (newView: DateOrTimeViewWithMeridiem) => { + const endOverrides = React.useMemo(() => { + const handleEndRangeViewChange = (newView: DateOrTimeViewWithMeridiem) => { if (newView === 'year' || newView === 'month') { return; } @@ -146,24 +163,14 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker onRangePositionChange('end'); } onViewChange(newView); - }, - [onRangePositionChange, onViewChange, rangePosition], - ); + }; - const handleOnChange = React.useCallback( - (newDate: PickerValidDate | null) => { - const { nextSelection, newRange } = calculateRangeChange({ - newDate, - utils, - range: props.value, - rangePosition, - allowRangeFlip: true, - }); - onRangePositionChange(nextSelection); - onChange(newRange); - }, - [onChange, onRangePositionChange, props.value, rangePosition, utils], - ); + return { + forceDesktopVariant: true, + onViewChange: handleEndRangeViewChange, + view: rangePosition === 'end' ? view : null, + }; + }, [rangePosition, view, onRangePositionChange, onViewChange]); if (hidden) { return null; @@ -177,30 +184,28 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker sx={sx} {...other} > - + + + - + ); }) as DateTimeRangePickerToolbarComponent; @@ -224,12 +229,6 @@ DateTimeRangePickerToolbar.propTypes = { isLandscape: PropTypes.bool.isRequired, onChange: PropTypes.func.isRequired, onRangePositionChange: PropTypes.func.isRequired, - /** - * Callback called when a toolbar is clicked - * @template TView - * @param {TView} view The view to open - */ - onViewChange: PropTypes.func.isRequired, rangePosition: PropTypes.oneOf(['end', 'start']).isRequired, /** * The system prop that allows defining system overrides as well as additional CSS styles. @@ -250,16 +249,6 @@ DateTimeRangePickerToolbar.propTypes = { */ toolbarPlaceholder: PropTypes.node, value: PropTypes.arrayOf(PropTypes.object).isRequired, - /** - * Currently visible picker view. - */ - view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'seconds']).isRequired, - /** - * Available views. - */ - views: PropTypes.arrayOf( - PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'seconds']).isRequired, - ).isRequired, } as any; export { DateTimeRangePickerToolbar }; diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts index 5b238ebbf61d7..0ee5c02e826f3 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts @@ -12,14 +12,11 @@ import { export interface DesktopDateRangePickerSlots extends BaseDateRangePickerSlots, - MakeOptional, 'field'> {} + MakeOptional {} export interface DesktopDateRangePickerSlotProps extends BaseDateRangePickerSlotProps, - Omit< - UseDesktopRangePickerSlotProps<'day', TEnableAccessibleFieldDOMStructure>, - 'tabs' | 'toolbar' - > {} + Omit, 'tabs' | 'toolbar'> {} export interface DesktopDateRangePickerProps< TEnableAccessibleFieldDOMStructure extends boolean = true, diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.ts b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.ts index 0cd82589c67bd..a62e765b35c4e 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.ts @@ -9,19 +9,15 @@ import { BaseDateTimeRangePickerSlots, BaseDateTimeRangePickerSlotProps, } from '../DateTimeRangePicker/shared'; -import { DateTimeRangePickerView } from '../internals/models'; export interface DesktopDateTimeRangePickerSlots extends BaseDateTimeRangePickerSlots, - MakeOptional, 'field'> {} + MakeOptional {} export interface DesktopDateTimeRangePickerSlotProps< TEnableAccessibleFieldDOMStructure extends boolean, > extends BaseDateTimeRangePickerSlotProps, - Omit< - UseDesktopRangePickerSlotProps, - 'tabs' | 'toolbar' - > {} + Omit, 'tabs' | 'toolbar'> {} export interface DesktopDateTimeRangePickerProps< TEnableAccessibleFieldDOMStructure extends boolean = true, diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts index 567a57d4495c3..1394be24521eb 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts @@ -12,14 +12,11 @@ import { export interface MobileDateRangePickerSlots extends BaseDateRangePickerSlots, - MakeOptional, 'field'> {} + MakeOptional {} export interface MobileDateRangePickerSlotProps extends BaseDateRangePickerSlotProps, - Omit< - UseMobileRangePickerSlotProps<'day', TEnableAccessibleFieldDOMStructure>, - 'tabs' | 'toolbar' - > {} + Omit, 'tabs' | 'toolbar'> {} export interface MobileDateRangePickerProps< TEnableAccessibleFieldDOMStructure extends boolean = true, diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts index 4dd3305f8d9b4..e3db572d44998 100644 --- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts @@ -9,19 +9,15 @@ import { BaseDateTimeRangePickerSlots, BaseDateTimeRangePickerSlotProps, } from '../DateTimeRangePicker/shared'; -import { DateTimeRangePickerView } from '../internals/models'; export interface MobileDateTimeRangePickerSlots extends BaseDateTimeRangePickerSlots, - MakeOptional, 'field'> {} + MakeOptional {} export interface MobileDateTimeRangePickerSlotProps< TEnableAccessibleFieldDOMStructure extends boolean, > extends BaseDateTimeRangePickerSlotProps, - Omit< - UseMobileRangePickerSlotProps, - 'tabs' | 'toolbar' - > {} + Omit, 'tabs' | 'toolbar'> {} export interface MobileDateTimeRangePickerProps< TEnableAccessibleFieldDOMStructure extends boolean = true, diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.types.ts b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.types.ts index 071fd9b1f2156..a705718f8ecd2 100644 --- a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.types.ts @@ -12,11 +12,11 @@ import { export interface StaticDateRangePickerSlots extends BaseDateRangePickerSlots, - UseStaticRangePickerSlots<'day'> {} + UseStaticRangePickerSlots {} export interface StaticDateRangePickerSlotProps extends BaseDateRangePickerSlotProps, - Omit, 'toolbar'> {} + Omit {} export interface StaticDateRangePickerProps extends BaseDateRangePickerProps, diff --git a/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts b/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts index 9564e78e3c579..1002b2db6766b 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts @@ -21,14 +21,12 @@ import { RangePickerFieldSlotProps, } from '../useEnrichedRangePickerFieldProps'; -export interface UseRangePickerSlots - extends ExportedPickersLayoutSlots, +export interface UseRangePickerSlots + extends ExportedPickersLayoutSlots, RangePickerFieldSlots {} -export interface UseRangePickerSlotProps< - TView extends DateOrTimeViewWithMeridiem, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends ExportedPickersLayoutSlotProps, +export interface UseRangePickerSlotProps + extends ExportedPickersLayoutSlotProps, RangePickerFieldSlotProps { tabs?: ExportedBaseTabsProps; toolbar?: ExportedBaseToolbarProps; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx index e4910f76bb6a4..f3133425b48c5 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx @@ -110,8 +110,8 @@ export const useDesktopRangePicker = < }); React.useEffect(() => { - if (layoutProps.view) { - initialView.current = layoutProps.view; + if (providerProps.contextValue.view) { + initialView.current = providerProps.contextValue.view; } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); @@ -186,12 +186,15 @@ export const useDesktopRangePicker = < startFieldRef, endFieldRef, singleInputFieldRef, - currentView: layoutProps.view !== props.openTo ? layoutProps.view : undefined, + currentView: + providerProps.contextValue.view !== props.openTo + ? providerProps.contextValue.view + : undefined, initialView: initialView.current ?? undefined, - onViewChange: layoutProps.onViewChange, + onViewChange: providerProps.contextValue.onViewChange, }); - const slotPropsForLayout: PickersLayoutSlotProps = { + const slotPropsForLayout: PickersLayoutSlotProps = { ...slotProps, tabs: { ...slotProps?.tabs, diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts index 3b49eff80e25b..0761f8b4a6715 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts @@ -13,14 +13,10 @@ import { UseRangePickerSlots, } from '../models/useRangePicker'; -export interface UseDesktopRangePickerSlots - extends UseRangePickerSlots, - PickersPopperSlots {} +export interface UseDesktopRangePickerSlots extends UseRangePickerSlots, PickersPopperSlots {} -export interface UseDesktopRangePickerSlotProps< - TView extends DateOrTimeViewWithMeridiem, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends UseRangePickerSlotProps, +export interface UseDesktopRangePickerSlotProps + extends UseRangePickerSlotProps, PickersPopperSlotProps {} export interface DesktopRangeOnlyPickerProps extends RangeOnlyPickerProps { @@ -45,12 +41,12 @@ export interface UseDesktopRangePickerProps< * Overridable component slots. * @default {} */ - slots: UseDesktopRangePickerSlots; + slots: UseDesktopRangePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: UseDesktopRangePickerSlotProps; + slotProps?: UseDesktopRangePickerSlotProps; } export interface DesktopRangePickerAdditionalViewProps extends RangePickerAdditionalViewProps {} diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx index 8164a5da2fea9..bd1c7725cd011 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx @@ -161,7 +161,7 @@ export const useMobileRangePicker = < singleInputFieldRef, }); - const slotPropsForLayout: PickersLayoutSlotProps = { + const slotPropsForLayout: PickersLayoutSlotProps = { ...innerSlotProps, tabs: { ...innerSlotProps?.tabs, diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts index fb6d4901af27e..3d77b15fdff50 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts @@ -13,14 +13,10 @@ import { UseRangePickerSlots, } from '../models/useRangePicker'; -export interface UseMobileRangePickerSlots - extends UseRangePickerSlots, - PickersModalDialogSlots {} +export interface UseMobileRangePickerSlots extends UseRangePickerSlots, PickersModalDialogSlots {} -export interface UseMobileRangePickerSlotProps< - TView extends DateOrTimeViewWithMeridiem, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends UseRangePickerSlotProps, +export interface UseMobileRangePickerSlotProps + extends UseRangePickerSlotProps, PickersModalDialogSlotProps {} export interface MobileRangeOnlyPickerProps extends RangeOnlyPickerProps {} @@ -35,12 +31,12 @@ export interface UseMobileRangePickerProps< * Overridable component slots. * @default {} */ - slots: UseMobileRangePickerSlots; + slots: UseMobileRangePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: UseMobileRangePickerSlotProps; + slotProps?: UseMobileRangePickerSlotProps; } export interface MobileRangePickerAdditionalViewProps extends RangePickerAdditionalViewProps {} diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx index c37b8aa219039..3d4d0d6f00326 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx @@ -57,7 +57,7 @@ export const useStaticRangePicker = < }); const Layout = slots?.layout ?? PickerStaticLayout; - const slotPropsForLayout: PickersLayoutSlotProps = { + const slotPropsForLayout: PickersLayoutSlotProps = { ...slotProps, toolbar: { ...slotProps?.toolbar, diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.ts b/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.ts index b4c62b6437d0a..8a92b17eefdcc 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.ts @@ -13,11 +13,10 @@ import { } from '@mui/x-date-pickers/PickersLayout'; import { UseRangePositionProps } from '../useRangePosition'; -export interface UseStaticRangePickerSlots - extends ExportedPickersLayoutSlots {} +export interface UseStaticRangePickerSlots extends ExportedPickersLayoutSlots {} -export interface UseStaticRangePickerSlotProps - extends ExportedPickersLayoutSlotProps { +export interface UseStaticRangePickerSlotProps + extends ExportedPickersLayoutSlotProps { toolbar?: ExportedBaseToolbarProps; } @@ -33,12 +32,12 @@ export interface UseStaticRangePickerProps< * Overridable components. * @default {} */ - slots?: UseStaticRangePickerSlots; + slots?: UseStaticRangePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: UseStaticRangePickerSlotProps; + slotProps?: UseStaticRangePickerSlotProps; } export interface UseStaticRangePickerParams< diff --git a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx index bfcde2a512468..380abbc098e10 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx @@ -9,7 +9,6 @@ import { PickersToolbar } from '../internals/components/PickersToolbar'; import { usePickerTranslations } from '../hooks/usePickerTranslations'; import { useUtils } from '../internals/hooks/useUtils'; import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar'; -import { DateView } from '../models'; import { DatePickerToolbarClasses, getDatePickerToolbarUtilityClass, @@ -20,9 +19,11 @@ import { PickerToolbarOwnerState, useToolbarOwnerState, } from '../internals/hooks/useToolbarOwnerState'; +import { usePickerContext } from '../hooks'; +import { DateView } from '../models/views'; export interface DatePickerToolbarProps - extends BaseToolbarProps, + extends BaseToolbarProps, ExportedDatePickerToolbarProps {} export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps { @@ -87,14 +88,12 @@ export const DatePickerToolbar = React.forwardRef(function DatePickerToolbar( onChange, toolbarFormat, toolbarPlaceholder = '––', - views, className, classes: classesProp, - onViewChange, - view, ...other } = props; const utils = useUtils(); + const { views } = usePickerContext(); const translations = usePickerTranslations(); const ownerState = useToolbarOwnerState(); const classes = useUtilityClasses(classesProp); @@ -147,12 +146,6 @@ DatePickerToolbar.propTypes = { hidden: PropTypes.bool, isLandscape: PropTypes.bool.isRequired, onChange: PropTypes.func.isRequired, - /** - * Callback called when a toolbar is clicked - * @template TView - * @param {TView} view The view to open - */ - onViewChange: PropTypes.func.isRequired, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ @@ -172,12 +165,4 @@ DatePickerToolbar.propTypes = { */ toolbarPlaceholder: PropTypes.node, value: PropTypes.object, - /** - * Currently visible picker view. - */ - view: PropTypes.oneOf(['day', 'month', 'year']).isRequired, - /** - * Available views. - */ - views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired).isRequired, } as any; diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts index 1013150e535b1..a8d562209c310 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts @@ -19,11 +19,11 @@ import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types'; export interface DateTimePickerSlots extends DesktopDateTimePickerSlots, - MobileDateTimePickerSlots {} + MobileDateTimePickerSlots {} export interface DateTimePickerSlotProps extends DesktopDateTimePickerSlotProps, - MobileDateTimePickerSlotProps {} + MobileDateTimePickerSlotProps {} export interface DateTimePickerProps extends DesktopDateTimePickerProps, diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx index 480365be10cfb..2ae198b28f762 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx @@ -13,10 +13,11 @@ import { DateTimePickerTabsClasses, getDateTimePickerTabsUtilityClass, } from './dateTimePickerTabsClasses'; -import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs'; +import { ExportedBaseTabsProps } from '../internals/models/props/tabs'; import { isDatePickerView } from '../internals/utils/date-utils'; import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext'; import { PickerOwnerState } from '../models/pickers'; +import { usePickerContext } from '../hooks'; type TabValue = 'date' | 'time'; @@ -36,7 +37,7 @@ const tabToView = (tab: TabValue): DateOrTimeViewWithMeridiem => { return 'hours'; }; -export interface ExportedDateTimePickerTabsProps extends ExportedBaseTabsProps { +export interface DateTimePickerTabsProps extends ExportedBaseTabsProps { /** * Toggles visibility of the tabs allowing view switching. * @default `window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker` @@ -58,10 +59,6 @@ export interface ExportedDateTimePickerTabsProps extends ExportedBaseTabsProps { classes?: Partial; } -export interface DateTimePickerTabsProps - extends ExportedDateTimePickerTabsProps, - BaseTabsProps {} - const useUtilityClasses = (classes: Partial | undefined) => { const slots = { root: ['root'], @@ -99,9 +96,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa const props = useThemeProps({ props: inProps, name: 'MuiDateTimePickerTabs' }); const { dateIcon = , - onViewChange, timeIcon = , - view, hidden = typeof window === 'undefined' || window.innerHeight < 667, className, classes: classesProp, @@ -110,6 +105,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa const translations = usePickerTranslations(); const { ownerState } = usePickerPrivateContext(); + const { view, onViewChange } = usePickerContext(); const classes = useUtilityClasses(classesProp); const handleChange = (event: React.SyntheticEvent, value: TabValue) => { @@ -124,7 +120,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa , 'view'> { + BaseToolbarProps { /** * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization. */ @@ -235,10 +234,15 @@ const DateTimePickerToolbarAmPmSelection = styled('div', { }); /** - * If this context value is set to true, the toolbar will always be rendered in the desktop mode. + * If `forceDesktopVariant` is set to `true`, the toolbar will always be rendered in the desktop mode. + * If `onViewChange` is defined, the toolbar will call it instead of calling the default handler from `usePickerContext`. * This is used by the Date Time Range Picker Toolbar. */ -export const DateTimePickerToolbarForceDesktopVariant = React.createContext(false); +export const DateTimePickerToolbarOverrideContext = React.createContext<{ + forceDesktopVariant: boolean; + onViewChange: (view: DateOrTimeViewWithMeridiem) => void; + view: DateOrTimeViewWithMeridiem | null; +} | null>(null); /** * Demos: @@ -257,31 +261,38 @@ function DateTimePickerToolbar(inProps: DateTimePickerToolbarProps) { ampmInClock, value, onChange, - view, isLandscape, - onViewChange, toolbarFormat, toolbarPlaceholder = '––', - views, toolbarTitle: inToolbarTitle, className, classes: classesProp, ...other } = props; - const { disabled, readOnly, variant } = usePickerContext(); + const { + disabled, + readOnly, + variant, + view: viewCtx, + onViewChange: onViewChangeCtx, + views, + } = usePickerContext(); const ownerState = useToolbarOwnerState(); const classes = useUtilityClasses(classesProp, ownerState); const utils = useUtils(); const { meridiemMode, handleMeridiemChange } = useMeridiemMode(value, ampm, onChange); const translations = usePickerTranslations(); - const forceDesktopVariant = React.useContext(DateTimePickerToolbarForceDesktopVariant); + const overrides = React.useContext(DateTimePickerToolbarOverrideContext); - const toolbarVariant = forceDesktopVariant ? 'desktop' : variant; + const toolbarVariant = overrides?.forceDesktopVariant ? 'desktop' : variant; const isDesktop = toolbarVariant === 'desktop'; const showAmPmControl = Boolean(ampm && !ampmInClock); const toolbarTitle = inToolbarTitle ?? translations.dateTimePickerToolbarTitle; + const view = overrides ? overrides.view : viewCtx; + const onViewChange = overrides ? overrides.onViewChange : onViewChangeCtx; + const formatHours = (time: PickerValidDate) => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h'); @@ -446,12 +457,6 @@ DateTimePickerToolbar.propTypes = { hidden: PropTypes.bool, isLandscape: PropTypes.bool.isRequired, onChange: PropTypes.func.isRequired, - /** - * Callback called when a toolbar is clicked - * @template TView - * @param {TView} view The view to open - */ - onViewChange: PropTypes.func.isRequired, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ @@ -475,16 +480,6 @@ DateTimePickerToolbar.propTypes = { */ toolbarTitle: PropTypes.node, value: PropTypes.object, - /** - * Currently visible picker view. - */ - view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), - /** - * Available views. - */ - views: PropTypes.arrayOf( - PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired, - ).isRequired, } as any; export { DateTimePickerToolbar }; diff --git a/packages/x-date-pickers/src/DateTimePicker/shared.tsx b/packages/x-date-pickers/src/DateTimePicker/shared.tsx index a4f52ac694d6a..fef86bebde7ab 100644 --- a/packages/x-date-pickers/src/DateTimePicker/shared.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/shared.tsx @@ -11,11 +11,7 @@ import { import { TimeClockSlots, TimeClockSlotProps } from '../TimeClock/TimeClock.types'; import { BasePickerInputProps } from '../internals/models/props/basePickerProps'; import { applyDefaultDate } from '../internals/utils/date-utils'; -import { - DateTimePickerTabs, - DateTimePickerTabsProps, - ExportedDateTimePickerTabsProps, -} from './DateTimePickerTabs'; +import { DateTimePickerTabs, DateTimePickerTabsProps } from './DateTimePickerTabs'; import { LocalizedComponent, PickersInputLocaleText } from '../locales/utils/pickersLocaleTextApi'; import { DateTimePickerToolbar, @@ -50,7 +46,7 @@ export interface BaseDateTimePickerSlotProps extends DateCalendarSlotProps, Time /** * Props passed down to the tabs component. */ - tabs?: ExportedDateTimePickerTabsProps; + tabs?: DateTimePickerTabsProps; /** * Props passed down to the toolbar component. */ diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts index 168d39f4a34bd..737f91ae3f46c 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts @@ -9,16 +9,15 @@ import { BaseDatePickerSlots, BaseDatePickerSlotProps, } from '../DatePicker/shared'; -import { DateView } from '../models'; import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types'; export interface DesktopDatePickerSlots extends BaseDatePickerSlots, - MakeOptional, 'field' | 'openPickerIcon'> {} + MakeOptional {} export interface DesktopDatePickerSlotProps extends BaseDatePickerSlotProps, - ExportedUseDesktopPickerSlotProps {} + ExportedUseDesktopPickerSlotProps {} export interface DesktopDatePickerProps extends BaseDatePickerProps, diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts index 2d46378b7296d..ab5bb47fd4a93 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts @@ -21,16 +21,13 @@ import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types'; export interface DesktopDateTimePickerSlots extends BaseDateTimePickerSlots, - MakeOptional, 'field' | 'openPickerIcon'>, + MakeOptional, DigitalClockSlots, MultiSectionDigitalClockSlots {} export interface DesktopDateTimePickerSlotProps extends BaseDateTimePickerSlotProps, - ExportedUseDesktopPickerSlotProps< - DateOrTimeViewWithMeridiem, - TEnableAccessibleFieldDOMStructure - >, + ExportedUseDesktopPickerSlotProps, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {} diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx index da1ccf8aac91f..cafef574827f0 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx @@ -9,15 +9,11 @@ import { pickersLayoutClasses, usePickerLayout, } from '../PickersLayout'; -import { DateOrTimeViewWithMeridiem } from '../internals/models/common'; import { usePickerContext } from '../hooks/usePickerContext'; import { PickerValidValue } from '../internals/models'; -type DesktopDateTimePickerLayoutComponent = (< - TValue extends PickerValidValue, - TView extends DateOrTimeViewWithMeridiem, ->( - props: PickersLayoutProps & React.RefAttributes, +type DesktopDateTimePickerLayoutComponent = (( + props: PickersLayoutProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -25,8 +21,7 @@ type DesktopDateTimePickerLayoutComponent = (< */ const DesktopDateTimePickerLayout = React.forwardRef(function DesktopDateTimePickerLayout< TValue extends PickerValidValue, - TView extends DateOrTimeViewWithMeridiem, ->(props: PickersLayoutProps, ref: React.Ref) { +>(props: PickersLayoutProps, ref: React.Ref) { const { toolbar, tabs, content, actionBar, shortcuts, ownerState } = usePickerLayout(props); const { orientation } = usePickerContext(); const { sx, className, classes } = props; @@ -75,7 +70,6 @@ DesktopDateTimePickerLayout.propTypes = { isValid: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, onSelectShortcut: PropTypes.func.isRequired, - onViewChange: PropTypes.func.isRequired, /** * The props used for each component slot. * @default {} @@ -95,10 +89,6 @@ DesktopDateTimePickerLayout.propTypes = { PropTypes.object, ]), value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), - view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), - views: PropTypes.arrayOf( - PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired, - ).isRequired, } as any; export { DesktopDateTimePickerLayout }; diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts index 91f223ad80e69..c3eecd985273e 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts +++ b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts @@ -20,13 +20,13 @@ import { TimeView } from '../models'; export interface DesktopTimePickerSlots extends BaseTimePickerSlots, - MakeOptional, 'field' | 'openPickerIcon'>, + MakeOptional, DigitalClockSlots, MultiSectionDigitalClockSlots {} export interface DesktopTimePickerSlotProps extends BaseTimePickerSlotProps, - ExportedUseDesktopPickerSlotProps, + ExportedUseDesktopPickerSlotProps, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {} diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts index f826ccce7d7af..60e59a4ff631c 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts @@ -9,15 +9,14 @@ import { BaseDatePickerSlots, BaseDatePickerSlotProps, } from '../DatePicker/shared'; -import { DateView } from '../models'; export interface MobileDatePickerSlots extends BaseDatePickerSlots, - MakeOptional, 'field'> {} + MakeOptional {} export interface MobileDatePickerSlotProps extends BaseDatePickerSlotProps, - ExportedUseMobilePickerSlotProps {} + ExportedUseMobilePickerSlotProps {} export interface MobileDatePickerProps extends BaseDatePickerProps, diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts index 6ba454d95810a..1ee7a59f95185 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts @@ -12,15 +12,13 @@ import { import { DateOrTimeView } from '../models'; import { DateOrTimeViewWithMeridiem } from '../internals/models'; -export interface MobileDateTimePickerSlots +export interface MobileDateTimePickerSlots extends BaseDateTimePickerSlots, - MakeOptional, 'field'> {} + MakeOptional {} -export interface MobileDateTimePickerSlotProps< - TView extends DateOrTimeViewWithMeridiem, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends BaseDateTimePickerSlotProps, - ExportedUseMobilePickerSlotProps {} +export interface MobileDateTimePickerSlotProps + extends BaseDateTimePickerSlotProps, + ExportedUseMobilePickerSlotProps {} export interface MobileDateTimePickerProps< TView extends DateOrTimeViewWithMeridiem = DateOrTimeView, @@ -31,10 +29,10 @@ export interface MobileDateTimePickerProps< * Overridable component slots. * @default {} */ - slots?: MobileDateTimePickerSlots; + slots?: MobileDateTimePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: MobileDateTimePickerSlotProps; + slotProps?: MobileDateTimePickerSlotProps; } diff --git a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts index 1304bfb6d8b46..0ac529a2bef99 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts +++ b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts @@ -12,15 +12,13 @@ import { import { TimeView } from '../models'; import { TimeViewWithMeridiem } from '../internals/models'; -export interface MobileTimePickerSlots +export interface MobileTimePickerSlots extends BaseTimePickerSlots, - MakeOptional, 'field'> {} + MakeOptional {} -export interface MobileTimePickerSlotProps< - TView extends TimeViewWithMeridiem, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends BaseTimePickerSlotProps, - ExportedUseMobilePickerSlotProps {} +export interface MobileTimePickerSlotProps + extends BaseTimePickerSlotProps, + ExportedUseMobilePickerSlotProps {} export interface MobileTimePickerProps< TView extends TimeViewWithMeridiem = TimeView, @@ -31,10 +29,10 @@ export interface MobileTimePickerProps< * Overridable component slots. * @default {} */ - slots?: MobileTimePickerSlots; + slots?: MobileTimePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: MobileTimePickerSlotProps; + slotProps?: MobileTimePickerSlotProps; } diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx index 7a7908fc3d900..bccc518ae565e 100644 --- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx +++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx @@ -11,7 +11,7 @@ import { PickersLayoutClasses, } from './pickersLayoutClasses'; import usePickerLayout from './usePickerLayout'; -import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../internals/models'; +import { PickerValidValue } from '../internals/models'; import { usePickerContext } from '../hooks/usePickerContext'; const useUtilityClasses = ( @@ -87,11 +87,8 @@ export const PickersLayoutContentWrapper = styled('div', { flexDirection: 'column', }); -type PickersLayoutComponent = (< - TValue extends PickerValidValue, - TView extends DateOrTimeViewWithMeridiem, ->( - props: PickersLayoutProps & React.RefAttributes, +type PickersLayoutComponent = (( + props: PickersLayoutProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -103,10 +100,10 @@ type PickersLayoutComponent = (< * * - [PickersLayout API](https://mui.com/x/api/date-pickers/pickers-layout/) */ -const PickersLayout = React.forwardRef(function PickersLayout< - TValue extends PickerValidValue, - TView extends DateOrTimeViewWithMeridiem, ->(inProps: PickersLayoutProps, ref: React.Ref) { +const PickersLayout = React.forwardRef(function PickersLayout( + inProps: PickersLayoutProps, + ref: React.Ref, +) { const props = useThemeProps({ props: inProps, name: 'MuiPickersLayout' }); const { toolbar, content, tabs, actionBar, shortcuts, ownerState } = usePickerLayout(props); @@ -156,7 +153,6 @@ PickersLayout.propTypes = { isValid: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, onSelectShortcut: PropTypes.func.isRequired, - onViewChange: PropTypes.func.isRequired, /** * The props used for each component slot. * @default {} @@ -176,10 +172,6 @@ PickersLayout.propTypes = { PropTypes.object, ]), value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), - view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), - views: PropTypes.arrayOf( - PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired, - ).isRequired, } as any; export { PickersLayout }; diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts index b6382d370840c..c7e2e388edce4 100644 --- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts +++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts @@ -3,9 +3,8 @@ import { SxProps, Theme } from '@mui/material/styles'; import { SlotComponentProps } from '@mui/utils'; import { PickersActionBar, PickersActionBarProps } from '../PickersActionBar'; import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar'; -import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs'; +import { ExportedBaseTabsProps } from '../internals/models/props/tabs'; import { PickersLayoutClasses } from './pickersLayoutClasses'; -import { DateOrTimeViewWithMeridiem } from '../internals/models/common'; import { PickersShortcutsProps } from '../PickersShortcuts'; import { ExportedPickersShortcutProps, @@ -13,13 +12,9 @@ import { } from '../PickersShortcuts/PickersShortcuts'; import { PickerOwnerState } from '../models'; import { PickerValidValue } from '../internals/models'; -import { UsePickerViewsLayoutResponse } from '../internals/hooks/usePicker/usePickerViews'; import { UsePickerValueLayoutResponse } from '../internals/hooks/usePicker/usePickerValue.types'; -export interface ExportedPickersLayoutSlots< - TValue extends PickerValidValue, - TView extends DateOrTimeViewWithMeridiem, -> { +export interface ExportedPickersLayoutSlots { /** * Custom component for the action bar, it is placed below the picker views. * @default PickersActionBar @@ -35,7 +30,7 @@ export interface ExportedPickersLayoutSlots< * It wraps the toolbar, views, action bar, and shortcuts. */ layout?: React.JSXElementConstructor< - PickersLayoutProps & React.RefAttributes + PickersLayoutProps & React.RefAttributes >; } @@ -49,10 +44,7 @@ export interface PickerLayoutOwnerState extends PickerOwnerState { layoutDirection: 'ltr' | 'rtl'; } -export interface ExportedPickersLayoutSlotProps< - TValue extends PickerValidValue, - TView extends DateOrTimeViewWithMeridiem, -> { +export interface ExportedPickersLayoutSlotProps { /** * Props passed down to the action bar component. */ @@ -64,28 +56,24 @@ export interface ExportedPickersLayoutSlotProps< /** * Props passed down to the layoutRoot component. */ - layout?: Partial>; + layout?: Partial>; } -export interface PickersLayoutSlots< - TValue extends PickerValidValue, - TView extends DateOrTimeViewWithMeridiem, -> extends ExportedPickersLayoutSlots { +export interface PickersLayoutSlots + extends ExportedPickersLayoutSlots { /** * Tabs enabling toggling between views. */ - tabs?: React.ElementType>; + tabs?: React.ElementType<{}>; /** * Custom component for the toolbar. * It is placed above the picker views. */ - toolbar?: React.JSXElementConstructor>; + toolbar?: React.JSXElementConstructor>; } -export interface PickersLayoutSlotProps< - TValue extends PickerValidValue, - TView extends DateOrTimeViewWithMeridiem, -> extends ExportedPickersLayoutSlotProps { +export interface PickersLayoutSlotProps + extends ExportedPickersLayoutSlotProps { /** * Props passed down to the tabs component. */ @@ -96,11 +84,8 @@ export interface PickersLayoutSlotProps< toolbar?: ExportedBaseToolbarProps; } -export interface PickersLayoutProps< - TValue extends PickerValidValue, - TView extends DateOrTimeViewWithMeridiem, -> extends UsePickerViewsLayoutResponse, - UsePickerValueLayoutResponse { +export interface PickersLayoutProps + extends UsePickerValueLayoutResponse { className?: string; children?: React.ReactNode; /** @@ -115,12 +100,12 @@ export interface PickersLayoutProps< * Overridable component slots. * @default {} */ - slots?: PickersLayoutSlots; + slots?: PickersLayoutSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: PickersLayoutSlotProps; + slotProps?: PickersLayoutSlotProps; } export interface SubComponents { diff --git a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx index 200e0f7e6895e..33cc7113d0dc0 100644 --- a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx +++ b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx @@ -8,13 +8,13 @@ import { PickerLayoutOwnerState, PickersLayoutProps, SubComponents } from './Pic import { getPickersLayoutUtilityClass, PickersLayoutClasses } from './pickersLayoutClasses'; import { PickersShortcuts } from '../PickersShortcuts'; import { BaseToolbarProps } from '../internals/models/props/toolbar'; -import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../internals/models'; +import { PickerValidValue } from '../internals/models'; import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext'; import { usePickerContext } from '../hooks'; -function toolbarHasView( - toolbarProps: BaseToolbarProps | any, -): toolbarProps is BaseToolbarProps { +function toolbarHasView( + toolbarProps: BaseToolbarProps | any, +): toolbarProps is BaseToolbarProps { return toolbarProps.view !== null; } @@ -40,17 +40,14 @@ interface UsePickerLayoutResponse extends SubCo ownerState: PickerLayoutOwnerState; } -const usePickerLayout = ( - props: PickersLayoutProps, +const usePickerLayout = ( + props: PickersLayoutProps, ): UsePickerLayoutResponse => { const { ownerState: pickerOwnerState } = usePickerPrivateContext(); - const { variant, orientation } = usePickerContext(); + const { variant, orientation, view } = usePickerContext(); const isRtl = useRtl(); const { - view, - views, - onViewChange, value, onChange, onSelectShortcut, @@ -93,9 +90,6 @@ const usePickerLayout = - ) : null; + const tabs = view && Tabs ? : null; // Shortcuts const Shortcuts = slots?.shortcuts ?? PickersShortcuts; diff --git a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts index 27271bbcca561..00dc03e4ca024 100644 --- a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts +++ b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts @@ -9,15 +9,12 @@ import { UseStaticPickerSlots, UseStaticPickerSlotProps, } from '../internals/hooks/useStaticPicker'; -import { DateView } from '../models'; -export interface StaticDatePickerSlots - extends BaseDatePickerSlots, - UseStaticPickerSlots {} +export interface StaticDatePickerSlots extends BaseDatePickerSlots, UseStaticPickerSlots {} export interface StaticDatePickerSlotProps extends BaseDatePickerSlotProps, - UseStaticPickerSlotProps {} + UseStaticPickerSlotProps {} export interface StaticDatePickerProps extends BaseDatePickerProps, diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts index c6591da17a8bf..3cf70d0b8241c 100644 --- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts +++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts @@ -11,13 +11,11 @@ import { } from '../internals/hooks/useStaticPicker'; import { DateOrTimeView } from '../models'; -export interface StaticDateTimePickerSlots - extends BaseDateTimePickerSlots, - UseStaticPickerSlots {} +export interface StaticDateTimePickerSlots extends BaseDateTimePickerSlots, UseStaticPickerSlots {} export interface StaticDateTimePickerSlotProps extends BaseDateTimePickerSlotProps, - UseStaticPickerSlotProps {} + UseStaticPickerSlotProps {} export interface StaticDateTimePickerProps extends BaseDateTimePickerProps, diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts index 8de99acfe5c1c..fcba7c012813a 100644 --- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts +++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts @@ -11,13 +11,11 @@ import { } from '../internals/hooks/useStaticPicker'; import { TimeView } from '../models'; -export interface StaticTimePickerSlots - extends BaseTimePickerSlots, - UseStaticPickerSlots {} +export interface StaticTimePickerSlots extends BaseTimePickerSlots, UseStaticPickerSlots {} export interface StaticTimePickerSlotProps extends BaseTimePickerSlotProps, - UseStaticPickerSlotProps {} + UseStaticPickerSlotProps {} export interface StaticTimePickerProps extends BaseTimePickerProps, diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts b/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts index 03ce715b6e850..c4fc53a2cb751 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts +++ b/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts @@ -12,13 +12,11 @@ import { import { TimeValidationError } from '../models'; import { ValidateTimeProps } from '../validation/validateTime'; -export interface TimePickerSlots - extends DesktopTimePickerSlots, - MobileTimePickerSlots {} +export interface TimePickerSlots extends DesktopTimePickerSlots, MobileTimePickerSlots {} export interface TimePickerSlotProps extends DesktopTimePickerSlotProps, - MobileTimePickerSlotProps {} + MobileTimePickerSlotProps {} export interface TimePickerProps extends DesktopTimePickerProps, diff --git a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx index f7e3130bdb76b..3dce9ed968566 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx +++ b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx @@ -27,7 +27,7 @@ import { } from '../internals/hooks/useToolbarOwnerState'; export interface TimePickerToolbarProps - extends BaseToolbarProps, + extends BaseToolbarProps, ExportedTimePickerToolbarProps { ampm?: boolean; ampmInClock?: boolean; @@ -160,9 +160,6 @@ function TimePickerToolbar(inProps: TimePickerToolbarProps) { value, isLandscape, onChange, - view, - onViewChange, - views, className, classes: classesProp, ...other @@ -171,7 +168,8 @@ function TimePickerToolbar(inProps: TimePickerToolbarProps) { const translations = usePickerTranslations(); const ownerState = useToolbarOwnerState(); const classes = useUtilityClasses(classesProp, ownerState); - const { disabled, readOnly } = usePickerContext(); + const { disabled, readOnly, view, onViewChange, views } = + usePickerContext(); const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours')); const { meridiemMode, handleMeridiemChange } = useMeridiemMode(value, ampm, onChange); @@ -280,12 +278,6 @@ TimePickerToolbar.propTypes = { hidden: PropTypes.bool, isLandscape: PropTypes.bool.isRequired, onChange: PropTypes.func.isRequired, - /** - * Callback called when a toolbar is clicked - * @template TView - * @param {TView} view The view to open - */ - onViewChange: PropTypes.func.isRequired, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ @@ -305,15 +297,6 @@ TimePickerToolbar.propTypes = { */ toolbarPlaceholder: PropTypes.node, value: PropTypes.object, - /** - * Currently visible picker view. - */ - view: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']).isRequired, - /** - * Available views. - */ - views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']).isRequired) - .isRequired, } as any; export { TimePickerToolbar }; diff --git a/packages/x-date-pickers/src/hooks/usePickerContext.ts b/packages/x-date-pickers/src/hooks/usePickerContext.ts index ba3d36ed8854a..61d4ffe9f4b11 100644 --- a/packages/x-date-pickers/src/hooks/usePickerContext.ts +++ b/packages/x-date-pickers/src/hooks/usePickerContext.ts @@ -1,12 +1,15 @@ 'use client'; import * as React from 'react'; -import { PickerContext } from '../internals/components/PickerProvider'; +import { PickerContext, PickerContextValue } from '../internals/components/PickerProvider'; +import { DateOrTimeViewWithMeridiem } from '../internals/models'; /** * Returns the context passed by the picker that wraps the current component. */ -export const usePickerContext = () => { - const value = React.useContext(PickerContext); +export const usePickerContext = < + TView extends DateOrTimeViewWithMeridiem = DateOrTimeViewWithMeridiem, +>() => { + const value = React.useContext(PickerContext) as PickerContextValue; if (value == null) { throw new Error( [ diff --git a/packages/x-date-pickers/src/internals/components/PickerProvider.tsx b/packages/x-date-pickers/src/internals/components/PickerProvider.tsx index 191e45601a0fc..95238191b4a0e 100644 --- a/packages/x-date-pickers/src/internals/components/PickerProvider.tsx +++ b/packages/x-date-pickers/src/internals/components/PickerProvider.tsx @@ -2,14 +2,15 @@ import * as React from 'react'; import { PickerOwnerState } from '../../models'; import { PickersInputLocaleText } from '../../locales'; import { LocalizationProvider } from '../../LocalizationProvider'; -import { PickerOrientation, PickerVariant } from '../models'; +import { DateOrTimeViewWithMeridiem, PickerOrientation, PickerVariant } from '../models'; import type { UsePickerValueActionsContextValue, UsePickerValueContextValue, UsePickerValuePrivateContextValue, } from '../hooks/usePicker/usePickerValue.types'; +import { UsePickerViewsContextValue } from '../hooks/usePicker/usePickerViews'; -export const PickerContext = React.createContext(null); +export const PickerContext = React.createContext | null>(null); export const PickerActionsContext = React.createContext(null); @@ -47,14 +48,17 @@ export function PickerProvider(props: PickerProviderProps) { } export interface PickerProviderProps { - contextValue: PickerContextValue; + contextValue: PickerContextValue; actionsContextValue: PickerActionsContextValue; privateContextValue: PickerPrivateContextValue; localeText: PickersInputLocaleText | undefined; children: React.ReactNode; } -export interface PickerContextValue extends UsePickerValueContextValue { +export interface PickerContextValue< + TView extends DateOrTimeViewWithMeridiem = DateOrTimeViewWithMeridiem, +> extends UsePickerValueContextValue, + UsePickerViewsContextValue { /** * `true` if the picker is disabled, `false` otherwise. */ diff --git a/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx b/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx index a63d819df0aa7..cee826d3cd7de 100644 --- a/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx +++ b/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx @@ -6,13 +6,11 @@ import composeClasses from '@mui/utils/composeClasses'; import { shouldForwardProp } from '@mui/system/createStyled'; import { BaseToolbarProps } from '../models/props/toolbar'; import { getPickersToolbarUtilityClass, PickersToolbarClasses } from './pickersToolbarClasses'; -import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../models'; +import { PickerValidValue } from '../models'; import { PickerToolbarOwnerState, useToolbarOwnerState } from '../hooks/useToolbarOwnerState'; -export interface PickersToolbarProps< - TValue extends PickerValidValue, - TView extends DateOrTimeViewWithMeridiem, -> extends Pick, 'isLandscape' | 'hidden' | 'titleId'> { +export interface PickersToolbarProps + extends Pick, 'isLandscape' | 'hidden' | 'titleId'> { className?: string; landscapeDirection?: 'row' | 'column'; toolbarTitle: React.ReactNode; @@ -86,21 +84,13 @@ const PickersToolbarContent = styled('div', { ], }); -type PickersToolbarComponent = (< - TValue extends PickerValidValue, - TView extends DateOrTimeViewWithMeridiem, ->( - props: React.PropsWithChildren> & - React.RefAttributes, +type PickersToolbarComponent = (( + props: React.PropsWithChildren> & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; export const PickersToolbar = React.forwardRef(function PickersToolbar< TValue extends PickerValidValue, - TView extends DateOrTimeViewWithMeridiem, ->( - inProps: React.PropsWithChildren>, - ref: React.Ref, -) { +>(inProps: React.PropsWithChildren>, ref: React.Ref) { const props = useThemeProps({ props: inProps, name: 'MuiPickersToolbar' }); const { children, diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts index 114e346a36e14..dc08d3ab261bc 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts @@ -31,12 +31,12 @@ import { import { PickersTextFieldProps } from '../../../PickersTextField'; import { UsePickerProviderNonStaticProps } from '../usePicker/usePickerProvider'; -export interface UseDesktopPickerSlots +export interface UseDesktopPickerSlots extends Pick< PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper' >, - ExportedPickersLayoutSlots, + ExportedPickersLayoutSlots, UseClearableFieldSlots { /** * Component used to enter the date with the keyboard. @@ -63,17 +63,14 @@ export interface UseDesktopPickerSlots openPickerIcon: React.ElementType; } -export interface UseDesktopPickerSlotProps< - TView extends DateOrTimeViewWithMeridiem, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends ExportedUseDesktopPickerSlotProps, - Pick, 'toolbar'> {} +export interface UseDesktopPickerSlotProps + extends ExportedUseDesktopPickerSlotProps, + Pick, 'toolbar'> {} export interface ExportedUseDesktopPickerSlotProps< - TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, > extends PickersPopperSlotProps, - ExportedPickersLayoutSlotProps, + ExportedPickersLayoutSlotProps, UseClearableFieldSlotProps { field?: SlotComponentPropsFromProps< PickerFieldSlotProps, @@ -113,12 +110,12 @@ export interface UseDesktopPickerProps< * Overridable component slots. * @default {} */ - slots: UseDesktopPickerSlots; + slots: UseDesktopPickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: UseDesktopPickerSlotProps; + slotProps?: UseDesktopPickerSlotProps; } export interface UseDesktopPickerParams< diff --git a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts index edbfeef65b9df..c01b00e785df8 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts @@ -28,9 +28,9 @@ import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models'; import { PickersTextFieldProps } from '../../../PickersTextField'; import { UsePickerProviderNonStaticProps } from '../usePicker/usePickerProvider'; -export interface UseMobilePickerSlots +export interface UseMobilePickerSlots extends PickersModalDialogSlots, - ExportedPickersLayoutSlots { + ExportedPickersLayoutSlots { /** * Component used to enter the date with the keyboard. */ @@ -43,10 +43,9 @@ export interface UseMobilePickerSlots } export interface ExportedUseMobilePickerSlotProps< - TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, > extends PickersModalDialogSlotProps, - ExportedPickersLayoutSlotProps { + ExportedPickersLayoutSlotProps { field?: SlotComponentPropsFromProps< PickerFieldSlotProps, {}, @@ -59,11 +58,9 @@ export interface ExportedUseMobilePickerSlotProps< >; } -export interface UseMobilePickerSlotProps< - TView extends DateOrTimeViewWithMeridiem, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends ExportedUseMobilePickerSlotProps, - Pick, 'toolbar'> {} +export interface UseMobilePickerSlotProps + extends ExportedUseMobilePickerSlotProps, + Pick, 'toolbar'> {} export interface MobileOnlyPickerProps extends BaseNonStaticPickerProps, @@ -82,12 +79,12 @@ export interface UseMobilePickerProps< * Overridable component slots. * @default {} */ - slots: UseMobilePickerSlots; + slots: UseMobilePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: UseMobilePickerSlotProps; + slotProps?: UseMobilePickerSlotProps; } export interface UseMobilePickerParams< diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts index 444ed5c24a8be..46d94bdfa4897 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts @@ -73,7 +73,6 @@ export const usePicker = < // Picker layout layoutProps: { - ...pickerViewsResponse.layoutProps, ...pickerValueResponse.layoutProps, }, diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts index a7717e8860d2e..34a81c4e0bf44 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts @@ -66,8 +66,7 @@ export interface UsePickerResponse< Pick, 'shouldRestoreFocus' | 'renderCurrentView'> { ownerState: PickerOwnerState; providerProps: UsePickerProviderReturnValue; - layoutProps: UsePickerValueResponse['layoutProps'] & - UsePickerViewsResponse['layoutProps']; + layoutProps: UsePickerValueResponse['layoutProps']; // TODO v8: Remove in https://github.com/mui/mui-x/pull/15671 hasUIView: boolean; } diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts index 1ced411b7ae6e..1d9260a09ee98 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts @@ -101,15 +101,23 @@ export function usePickerProvider< ], ); - const contextValue = React.useMemo( + const contextValue = React.useMemo>( () => ({ ...paramsFromUsePickerValue.contextValue, + ...paramsFromUsePickerViews.contextValue, disabled: props.disabled ?? false, readOnly: props.readOnly ?? false, variant, orientation, }), - [paramsFromUsePickerValue.contextValue, variant, orientation, props.disabled, props.readOnly], + [ + paramsFromUsePickerValue.contextValue, + paramsFromUsePickerViews.contextValue, + variant, + orientation, + props.disabled, + props.readOnly, + ], ); const privateContextValue = React.useMemo( diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts index d6199b9725c59..375d13abaf27f 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts @@ -120,19 +120,30 @@ export interface UsePickerViewParams< export interface UsePickerViewsResponse { renderCurrentView: () => React.ReactNode; shouldRestoreFocus: () => boolean; - layoutProps: UsePickerViewsLayoutResponse; provider: UsePickerViewsProviderParams; } -export interface UsePickerViewsLayoutResponse { +export interface UsePickerViewsContextValue { + /** + * Available views. + */ + views: readonly TView[]; + /** + * View currently rendered. + */ view: TView | null; + /** + * Callback called when the view to render changes + * @template TView + * @param {TView} view The view to render + */ onViewChange: (view: TView) => void; - views: readonly TView[]; } export interface UsePickerViewsProviderParams { hasUIView: boolean; views: readonly TView[]; + contextValue: UsePickerViewsContextValue; } /** @@ -257,20 +268,23 @@ export const usePickerViews = < setFocusedView(newView, true); }, [open]); // eslint-disable-line react-hooks/exhaustive-deps - const layoutProps: UsePickerViewsLayoutResponse = { - views, - view: popperView, - onViewChange: setView, - }; + const contextValue = React.useMemo>( + () => ({ + views, + view: popperView, + onViewChange: setView, + }), + [views, popperView, setView], + ); const providerParams: UsePickerViewsProviderParams = { hasUIView, views, + contextValue, }; return { shouldRestoreFocus, - layoutProps, provider: providerParams, renderCurrentView: () => { if (popperView == null) { diff --git a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts index aecb74e3eae81..c6c4c52d70c90 100644 --- a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts @@ -8,11 +8,9 @@ import { UsePickerParams } from '../usePicker'; import { UsePickerViewsProps } from '../usePicker/usePickerViews'; import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models'; -export interface UseStaticPickerSlots - extends ExportedPickersLayoutSlots {} +export interface UseStaticPickerSlots extends ExportedPickersLayoutSlots {} -export interface UseStaticPickerSlotProps - extends ExportedPickersLayoutSlotProps {} +export interface UseStaticPickerSlotProps extends ExportedPickersLayoutSlotProps {} export interface StaticOnlyPickerProps { /** @@ -43,12 +41,12 @@ export interface UseStaticPickerProps< * Overridable component slots. * @default {} */ - slots?: UseStaticPickerSlots; + slots?: UseStaticPickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: UseStaticPickerSlotProps; + slotProps?: UseStaticPickerSlotProps; } export interface UseStaticPickerParams< diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index 71f1671a2c784..17226de88c7f3 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -107,7 +107,7 @@ export type { BaseNonStaticPickerProps, } from './models/props/basePickerProps'; export type { BaseClockProps, DesktopOnlyTimePickerProps, AmPmProps } from './models/props/time'; -export type { BaseTabsProps, ExportedBaseTabsProps } from './models/props/tabs'; +export type { ExportedBaseTabsProps } from './models/props/tabs'; export type { BaseToolbarProps, ExportedBaseToolbarProps } from './models/props/toolbar'; export type { FormProps } from './models/formProps'; export type { @@ -171,4 +171,4 @@ export { useCalendarState } from '../DateCalendar/useCalendarState'; export { isInternalTimeView, isTimeView } from './utils/time-utils'; -export { DateTimePickerToolbarForceDesktopVariant } from '../DateTimePicker/DateTimePickerToolbar'; +export { DateTimePickerToolbarOverrideContext } from '../DateTimePicker/DateTimePickerToolbar'; diff --git a/packages/x-date-pickers/src/internals/models/props/tabs.ts b/packages/x-date-pickers/src/internals/models/props/tabs.ts index 576939e81aa94..676454a85c059 100644 --- a/packages/x-date-pickers/src/internals/models/props/tabs.ts +++ b/packages/x-date-pickers/src/internals/models/props/tabs.ts @@ -1,19 +1,5 @@ import { SxProps } from '@mui/system'; import { Theme } from '@mui/material/styles'; -import { DateOrTimeViewWithMeridiem } from '../common'; - -export interface BaseTabsProps { - /** - * Currently visible picker view. - */ - view: TView; - /** - * Callback called when a tab is clicked. - * @template TView - * @param {TView} view The view to open - */ - onViewChange: (view: TView) => void; -} export interface ExportedBaseTabsProps { className?: string; diff --git a/packages/x-date-pickers/src/internals/models/props/toolbar.ts b/packages/x-date-pickers/src/internals/models/props/toolbar.ts index 9b0a82632df99..9b7727766c688 100644 --- a/packages/x-date-pickers/src/internals/models/props/toolbar.ts +++ b/packages/x-date-pickers/src/internals/models/props/toolbar.ts @@ -1,30 +1,13 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { Theme } from '@mui/material/styles'; -import { DateOrTimeViewWithMeridiem } from '../common'; import { PickerValidValue } from '../value'; -export interface BaseToolbarProps< - TValue extends PickerValidValue, - TView extends DateOrTimeViewWithMeridiem, -> extends ExportedBaseToolbarProps { +export interface BaseToolbarProps + extends ExportedBaseToolbarProps { isLandscape: boolean; onChange: (newValue: TValue) => void; value: TValue; - /** - * Currently visible picker view. - */ - view: TView; - /** - * Callback called when a toolbar is clicked - * @template TView - * @param {TView} view The view to open - */ - onViewChange: (view: TView) => void; - /** - * Available views. - */ - views: readonly TView[]; titleId?: string; } diff --git a/packages/x-date-pickers/src/themeAugmentation/props.d.ts b/packages/x-date-pickers/src/themeAugmentation/props.d.ts index 453152c396646..c630c3c86e2e4 100644 --- a/packages/x-date-pickers/src/themeAugmentation/props.d.ts +++ b/packages/x-date-pickers/src/themeAugmentation/props.d.ts @@ -17,7 +17,6 @@ import { PickerPopperProps } from '../internals/components/PickersPopper'; import { PickersToolbarProps } from '../internals/components/PickersToolbar'; import { PickersToolbarButtonProps } from '../internals/components/PickersToolbarButton'; import { ExportedPickersToolbarTextProps } from '../internals/components/PickersToolbarText'; -import { DateOrTimeView } from '../models'; import { DatePickerProps } from '../DatePicker'; import { ExportedDatePickerToolbarProps } from '../DatePicker/DatePickerToolbar'; @@ -77,10 +76,10 @@ export interface PickersComponentsPropsList { MuiPickersFadeTransitionGroup: PickersFadeTransitionGroupProps; MuiPickersPopper: PickerPopperProps; MuiPickersSlideTransition: ExportedSlideTransitionProps; - MuiPickersToolbar: PickersToolbarProps; + MuiPickersToolbar: PickersToolbarProps; MuiPickersToolbarButton: PickersToolbarButtonProps; MuiPickersToolbarText: ExportedPickersToolbarTextProps; - MuiPickersLayout: PickersLayoutProps; + MuiPickersLayout: PickersLayoutProps; MuiTimeClock: TimeClockProps; MuiTimeField: TimeFieldProps; MuiTimePickerToolbar: ExportedTimePickerToolbarProps; diff --git a/packages/x-date-pickers/src/themeAugmentation/themeAugmentation.spec.ts b/packages/x-date-pickers/src/themeAugmentation/themeAugmentation.spec.ts index a622d4fda8e29..b32594f9dcfc6 100644 --- a/packages/x-date-pickers/src/themeAugmentation/themeAugmentation.spec.ts +++ b/packages/x-date-pickers/src/themeAugmentation/themeAugmentation.spec.ts @@ -213,7 +213,7 @@ createTheme({ }, MuiDateTimePickerTabs: { defaultProps: { - view: 'day', + hidden: true, // @ts-expect-error invalid MuiDateTimePicker prop someRandomProp: true, }, From b1c7f61b2b22dc68ffad10ac1ab06ce4f045fc07 Mon Sep 17 00:00:00 2001 From: Jose C Quintas Jr Date: Thu, 19 Dec 2024 20:06:45 +0100 Subject: [PATCH 12/13] [code-infra] Add new `next-env.d.ts` changes (#15947) --- docs/next-env.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts index a4a7b3f5cfa2f..52e831b434248 100644 --- a/docs/next-env.d.ts +++ b/docs/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. +// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. From 38eabdbdae2806e3aab0bb9cf25e3153ffb1a1ea Mon Sep 17 00:00:00 2001 From: Rajat Date: Fri, 20 Dec 2024 02:40:12 +0530 Subject: [PATCH 13/13] [DataGridPremium] Fix column unpinning with row grouping (#15908) Co-authored-by: Armin Mehinovic --- .../useGridRowGroupingPreProcessors.ts | 22 +++++--- .../rowGrouping.DataGridPremium.test.tsx | 52 +++++++++++++++++++ 2 files changed, 66 insertions(+), 8 deletions(-) diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts index ac43f038695ab..435ac1ca1a7eb 100644 --- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts +++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts @@ -116,10 +116,13 @@ export const useGridRowGroupingPreProcessors = ( const groupingColDefs = getGroupingColDefs(columnsState); let newColumnFields: string[] = []; const newColumnsLookup: GridColumnRawLookup = {}; + const prevGroupingfields: string[] = []; // We only keep the non-grouping columns columnsState.orderedFields.forEach((field) => { - if (!isGroupingColumn(field)) { + if (isGroupingColumn(field)) { + prevGroupingfields.push(field); + } else { newColumnFields.push(field); newColumnsLookup[field] = columnsState.lookup[field]; } @@ -135,14 +138,17 @@ export const useGridRowGroupingPreProcessors = ( newColumnsLookup[groupingColDef.field] = groupingColDef; }); - const startIndex = newColumnFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0; - newColumnFields = [ - ...newColumnFields.slice(0, startIndex), - ...groupingColDefs.map((colDef) => colDef.field), - ...newColumnFields.slice(startIndex), - ]; - columnsState.orderedFields = newColumnFields; + if (prevGroupingfields.length !== groupingColDefs.length) { + const startIndex = newColumnFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0; + newColumnFields = [ + ...newColumnFields.slice(0, startIndex), + ...groupingColDefs.map((colDef) => colDef.field), + ...newColumnFields.slice(startIndex), + ]; + columnsState.orderedFields = newColumnFields; + } + columnsState.lookup = newColumnsLookup; return columnsState; diff --git a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx index f30b9e4374c7a..6a0979cff342c 100644 --- a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx @@ -2632,6 +2632,58 @@ describe(' - Row grouping', () => { }); }); + describe('column pinning', () => { + it('should keep the checkbox selection column position after column is unpinned when groupingColumnMode = "single"', () => { + const { setProps } = render( + , + ); + const initialColumnOrder = ['', 'category1', 'id', 'category1', 'category2']; + expect(getColumnHeadersTextContent()).to.deep.equal(initialColumnOrder); + setProps({ pinnedColumns: { left: ['id'] } }); + expect(getColumnHeadersTextContent()).to.deep.equal([ + 'id', + '', + 'category1', + 'category1', + 'category2', + ]); + setProps({ pinnedColumns: { left: [] } }); + expect(getColumnHeadersTextContent()).to.deep.equal(initialColumnOrder); + }); + + it('should keep the checkbox selection column position after column is unpinned when groupingColumnMode = "multiple"', () => { + const { setProps } = render( + , + ); + const initialColumnOrder = ['', 'category1', 'category2', 'id', 'category1', 'category2']; + expect(getColumnHeadersTextContent()).to.deep.equal(initialColumnOrder); + setProps({ + pinnedColumns: { + left: ['__row_group_by_columns_group_category2__', 'id'], + }, + }); + expect(getColumnHeadersTextContent()).to.deep.equal([ + 'category2', + 'id', + '', + 'category1', + 'category1', + 'category2', + ]); + setProps({ pinnedColumns: { left: [] } }); + expect(getColumnHeadersTextContent()).to.deep.equal(initialColumnOrder); + }); + }); + describe('apiRef: addRowGroupingCriteria', () => { clock.withFakeTimers();