From 2b7ddc24d3430b7bf93af9eec79d43634f888ae7 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Sun, 24 Mar 2024 07:52:49 +0000 Subject: [PATCH 01/14] Bump MUI X to 7.0.0 --- docs/package.json | 2 +- examples/react-pages/package.json | 2 +- package.json | 2 +- .../toolpad-studio-components/package.json | 6 +- packages/toolpad-studio/package.json | 12 +- pnpm-lock.yaml | 226 ++++++++++++------ 6 files changed, 166 insertions(+), 84 deletions(-) diff --git a/docs/package.json b/docs/package.json index d80acd4ec23..10b1e490fec 100644 --- a/docs/package.json +++ b/docs/package.json @@ -34,7 +34,7 @@ "@mui/monorepo": "github:mui/material-ui#0102a9579628d48d784511a562b7b72f0f51847e", "@mui/styles": "5.15.14", "@mui/utils": "5.15.14", - "@mui/x-data-grid-pro": "6.19.8", + "@mui/x-data-grid-pro": "7.0.0", "@toolpad/studio": "workspace:*", "@trendmicro/react-interpolate": "0.5.5", "@types/lodash": "4.14.202", diff --git a/examples/react-pages/package.json b/examples/react-pages/package.json index 77f86c4d3e1..7ee9861fa97 100644 --- a/examples/react-pages/package.json +++ b/examples/react-pages/package.json @@ -10,7 +10,7 @@ "dependencies": { "@mui/material": "5.15.14", "@toolpad/studio": "0.1.53", - "@mui/x-data-grid": "6.19.8", + "@mui/x-data-grid": "7.0.0", "@tanstack/react-query": "5.18.1" }, "devDependencies": {} diff --git a/package.json b/package.json index 10cc4b344a0..a206d5740fc 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "devDependencies": { "@argos-ci/core": "1.5.5", "@mui/monorepo": "github:mui/material-ui#0102a9579628d48d784511a562b7b72f0f51847e", - "@mui/x-charts": "6.19.8", + "@mui/x-charts": "7.0.0", "@next/eslint-plugin-next": "14.1.4", "@playwright/test": "1.42.1", "@testing-library/react": "14.2.1", diff --git a/packages/toolpad-studio-components/package.json b/packages/toolpad-studio-components/package.json index 4a8796a3bc9..736181df547 100644 --- a/packages/toolpad-studio-components/package.json +++ b/packages/toolpad-studio-components/package.json @@ -42,9 +42,9 @@ "@mui/icons-material": "5.15.14", "@mui/lab": "5.0.0-alpha.169", "@mui/material": "5.15.14", - "@mui/x-charts": "6.19.8", - "@mui/x-data-grid-pro": "6.19.8", - "@mui/x-date-pickers": "6.19.8", + "@mui/x-charts": "7.0.0", + "@mui/x-data-grid-pro": "7.0.0", + "@mui/x-date-pickers": "7.0.0", "@mui/x-license-pro": "6.10.2", "@tanstack/react-query": "5.18.1", "@toolpad/studio-runtime": "workspace:*", diff --git a/packages/toolpad-studio/package.json b/packages/toolpad-studio/package.json index c9838d52b83..e645ddfa9bb 100644 --- a/packages/toolpad-studio/package.json +++ b/packages/toolpad-studio/package.json @@ -54,12 +54,12 @@ "@mui/system": "5.15.14", "@mui/types": "7.2.14", "@mui/utils": "5.15.14", - "@mui/x-charts": "6.19.8", - "@mui/x-data-grid": "6.19.8", - "@mui/x-data-grid-pro": "6.19.8", - "@mui/x-date-pickers": "6.19.8", - "@mui/x-date-pickers-pro": "6.19.8", - "@mui/x-tree-view": "6.17.0", + "@mui/x-charts": "7.0.0", + "@mui/x-data-grid": "7.0.0", + "@mui/x-data-grid-pro": "7.0.0", + "@mui/x-date-pickers": "7.0.0", + "@mui/x-date-pickers-pro": "7.0.0", + "@mui/x-tree-view": "7.0.0", "@tanstack/react-query": "5.18.1", "@tanstack/react-query-devtools": "5.18.1", "@toolpad/studio-components": "workspace:*", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bc81fe1079c..400d15270cd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -58,8 +58,8 @@ importers: specifier: github:mui/material-ui#0102a9579628d48d784511a562b7b72f0f51847e version: github.com/mui/material-ui/0102a9579628d48d784511a562b7b72f0f51847e '@mui/x-charts': - specifier: 6.19.8 - version: 6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.0.0 + version: 7.0.0(@mui/material@5.15.14)(react-dom@18.2.0)(react@18.2.0) '@next/eslint-plugin-next': specifier: 14.1.4 version: 14.1.4 @@ -229,8 +229,8 @@ importers: specifier: 5.15.14 version: 5.15.14(@types/react@18.2.66)(react@18.2.0) '@mui/x-data-grid-pro': - specifier: 6.19.8 - version: 6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.0.0 + version: 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(react-dom@18.2.0)(react@18.2.0) '@toolpad/studio': specifier: workspace:* version: link:../packages/toolpad-studio @@ -557,23 +557,23 @@ importers: specifier: 5.15.14 version: 5.15.14(@types/react@18.2.66)(react@18.2.0) '@mui/x-charts': - specifier: 6.19.8 - version: 6.19.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.0.0 + version: 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) '@mui/x-data-grid': - specifier: 6.19.8 - version: 6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.0.0 + version: 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) '@mui/x-data-grid-pro': - specifier: 6.19.8 - version: 6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.0.0 + version: 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) '@mui/x-date-pickers': - specifier: 6.19.8 - version: 6.19.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.0.0 + version: 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0) '@mui/x-date-pickers-pro': - specifier: 6.19.8 - version: 6.19.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.0.0 + version: 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0) '@mui/x-tree-view': - specifier: 6.17.0 - version: 6.17.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.0.0 + version: 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) '@tanstack/react-query': specifier: 5.18.1 version: 5.18.1(react@18.2.0) @@ -882,14 +882,14 @@ importers: specifier: 5.15.14 version: 5.15.14(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) '@mui/x-charts': - specifier: 6.19.8 - version: 6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.0.0 + version: 7.0.0(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) '@mui/x-data-grid-pro': - specifier: 6.19.8 - version: 6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.0.0 + version: 7.0.0(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) '@mui/x-date-pickers': - specifier: 6.19.8 - version: 6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.0.0 + version: 7.0.0(@mui/material@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0) '@mui/x-license-pro': specifier: 6.10.2 version: 6.10.2(@types/react@18.2.66)(react@18.2.0) @@ -3450,14 +3450,13 @@ packages: react-is: 18.2.0 dev: false - /@mui/x-charts@6.19.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-cjwsCJrUPDlMytJHBV+g3gDoSRURiphjclZs8sRnkZ+h4QbHn24K5QkK4bxEj7aCkO2HVJmDE0aqYEg4BnWCOA==} + /@mui/x-charts@7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-pL/HtRuv4X6mHPyFV54K3ZuGRx/d99uhY4MNVtCSUl3mR4r9uc4QOdhQabnrd7C2x4l0+01ED6MCdXXEIFEtMg==} engines: {node: '>=14.0.0'} peerDependencies: '@emotion/react': ^11.9.0 '@emotion/styled': ^11.8.1 - '@mui/material': ^5.4.1 - '@mui/system': ^5.4.1 + '@mui/material': ^5.15.14 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 peerDependenciesMeta: @@ -3472,10 +3471,13 @@ packages: '@mui/base': 5.0.0-beta.40(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) '@mui/material': 5.15.14(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) '@mui/system': 5.15.14(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.66)(react@18.2.0) + '@mui/utils': 5.15.14(@types/react@18.2.66)(react@18.2.0) '@react-spring/rafz': 9.7.3 '@react-spring/web': 9.7.3(react-dom@18.2.0)(react@18.2.0) clsx: 2.1.0 d3-color: 3.1.0 + d3-delaunay: 6.0.4 + d3-interpolate: 3.0.1 d3-scale: 4.0.2 d3-shape: 3.2.0 prop-types: 15.8.1 @@ -3485,14 +3487,13 @@ packages: - '@types/react' dev: false - /@mui/x-charts@6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-cjwsCJrUPDlMytJHBV+g3gDoSRURiphjclZs8sRnkZ+h4QbHn24K5QkK4bxEj7aCkO2HVJmDE0aqYEg4BnWCOA==} + /@mui/x-charts@7.0.0(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-pL/HtRuv4X6mHPyFV54K3ZuGRx/d99uhY4MNVtCSUl3mR4r9uc4QOdhQabnrd7C2x4l0+01ED6MCdXXEIFEtMg==} engines: {node: '>=14.0.0'} peerDependencies: '@emotion/react': ^11.9.0 '@emotion/styled': ^11.8.1 - '@mui/material': ^5.4.1 - '@mui/system': ^5.4.1 + '@mui/material': ^5.15.14 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 peerDependenciesMeta: @@ -3505,10 +3506,13 @@ packages: '@mui/base': 5.0.0-beta.40(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) '@mui/material': 5.15.14(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) '@mui/system': 5.15.14(@types/react@18.2.66)(react@18.2.0) + '@mui/utils': 5.15.14(@types/react@18.2.66)(react@18.2.0) '@react-spring/rafz': 9.7.3 '@react-spring/web': 9.7.3(react-dom@18.2.0)(react@18.2.0) clsx: 2.1.0 d3-color: 3.1.0 + d3-delaunay: 6.0.4 + d3-interpolate: 3.0.1 d3-scale: 4.0.2 d3-shape: 3.2.0 prop-types: 15.8.1 @@ -3518,14 +3522,13 @@ packages: - '@types/react' dev: false - /@mui/x-charts@6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-cjwsCJrUPDlMytJHBV+g3gDoSRURiphjclZs8sRnkZ+h4QbHn24K5QkK4bxEj7aCkO2HVJmDE0aqYEg4BnWCOA==} + /@mui/x-charts@7.0.0(@mui/material@5.15.14)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-pL/HtRuv4X6mHPyFV54K3ZuGRx/d99uhY4MNVtCSUl3mR4r9uc4QOdhQabnrd7C2x4l0+01ED6MCdXXEIFEtMg==} engines: {node: '>=14.0.0'} peerDependencies: '@emotion/react': ^11.9.0 '@emotion/styled': ^11.8.1 - '@mui/material': ^5.4.1 - '@mui/system': ^5.4.1 + '@mui/material': ^5.15.14 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 peerDependenciesMeta: @@ -3538,10 +3541,13 @@ packages: '@mui/base': 5.0.0-beta.40(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) '@mui/material': 5.15.14(react-dom@18.2.0)(react@18.2.0) '@mui/system': 5.15.14(react@18.2.0) + '@mui/utils': 5.15.14(@types/react@18.2.66)(react@18.2.0) '@react-spring/rafz': 9.7.3 '@react-spring/web': 9.7.3(react-dom@18.2.0)(react@18.2.0) clsx: 2.1.0 d3-color: 3.1.0 + d3-delaunay: 6.0.4 + d3-interpolate: 3.0.1 d3-scale: 4.0.2 d3-shape: 3.2.0 prop-types: 15.8.1 @@ -3551,12 +3557,11 @@ packages: - '@types/react' dev: true - /@mui/x-data-grid-pro@6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-G1mr+AUoIxxU0+Tgus5wk2uPVqtz9Ij3Ta20bhmuDFi78fvDdyHwN52K913Ob9dQS+kfeVDhvcJYN7gN6jz4DQ==} + /@mui/x-data-grid-pro@7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-2lauQfkV3gksfFS5cBC992/Xs1PDfOAcr9JV8bQNX2MmwdYFhCJmJR+MYK5VbO72bDrwCDRJC399Pgxnw9Saxg==} engines: {node: '>=14.0.0'} peerDependencies: - '@mui/material': ^5.4.1 - '@mui/system': ^5.4.1 + '@mui/material': ^5.15.14 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 dependencies: @@ -3564,8 +3569,8 @@ packages: '@mui/material': 5.15.14(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) '@mui/system': 5.15.14(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.66)(react@18.2.0) '@mui/utils': 5.15.14(@types/react@18.2.66)(react@18.2.0) - '@mui/x-data-grid': 6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) - '@mui/x-license-pro': 6.10.2(@types/react@18.2.66)(react@18.2.0) + '@mui/x-data-grid': 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-license': 7.0.0(@types/react@18.2.66)(react@18.2.0) '@types/format-util': 1.0.4 clsx: 2.1.0 prop-types: 15.8.1 @@ -3573,15 +3578,16 @@ packages: react-dom: 18.2.0(react@18.2.0) reselect: 4.1.8 transitivePeerDependencies: + - '@emotion/react' + - '@emotion/styled' - '@types/react' dev: false - /@mui/x-data-grid-pro@6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-G1mr+AUoIxxU0+Tgus5wk2uPVqtz9Ij3Ta20bhmuDFi78fvDdyHwN52K913Ob9dQS+kfeVDhvcJYN7gN6jz4DQ==} + /@mui/x-data-grid-pro@7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-2lauQfkV3gksfFS5cBC992/Xs1PDfOAcr9JV8bQNX2MmwdYFhCJmJR+MYK5VbO72bDrwCDRJC399Pgxnw9Saxg==} engines: {node: '>=14.0.0'} peerDependencies: - '@mui/material': ^5.4.1 - '@mui/system': ^5.4.1 + '@mui/material': ^5.15.14 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 dependencies: @@ -3589,8 +3595,34 @@ packages: '@mui/material': 5.15.14(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0) '@mui/system': 5.15.14(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0) '@mui/utils': 5.15.14(@types/react@18.2.66)(react@18.2.0) - '@mui/x-data-grid': 6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(react-dom@18.2.0)(react@18.2.0) - '@mui/x-license-pro': 6.10.2(@types/react@18.2.66)(react@18.2.0) + '@mui/x-data-grid': 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-license': 7.0.0(@types/react@18.2.66)(react@18.2.0) + '@types/format-util': 1.0.4 + clsx: 2.1.0 + prop-types: 15.8.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + reselect: 4.1.8 + transitivePeerDependencies: + - '@emotion/react' + - '@emotion/styled' + - '@types/react' + dev: false + + /@mui/x-data-grid-pro@7.0.0(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-2lauQfkV3gksfFS5cBC992/Xs1PDfOAcr9JV8bQNX2MmwdYFhCJmJR+MYK5VbO72bDrwCDRJC399Pgxnw9Saxg==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@mui/material': ^5.15.14 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + dependencies: + '@babel/runtime': 7.24.0 + '@mui/material': 5.15.14(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) + '@mui/system': 5.15.14(@types/react@18.2.66)(react@18.2.0) + '@mui/utils': 5.15.14(@types/react@18.2.66)(react@18.2.0) + '@mui/x-data-grid': 7.0.0(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-license': 7.0.0(@types/react@18.2.66)(react@18.2.0) '@types/format-util': 1.0.4 clsx: 2.1.0 prop-types: 15.8.1 @@ -3598,15 +3630,16 @@ packages: react-dom: 18.2.0(react@18.2.0) reselect: 4.1.8 transitivePeerDependencies: + - '@emotion/react' + - '@emotion/styled' - '@types/react' dev: false - /@mui/x-data-grid@6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-QsOW9GhJdhvagJfUb5jpZE1MMaCLugxx0l89amxJAthMia95BlGS7jndiDEh8IQNthgzfxjAzrSv8GZpcgSEaA==} + /@mui/x-data-grid@7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-Nwwfr+ot/di0oH/pVwIxKV2QD7QyUY/MKkTWRSKzQoJw2aiFQf1Usmvq9Fu1qsCsvMmqIFaToY7972p0cczRjw==} engines: {node: '>=14.0.0'} peerDependencies: - '@mui/material': ^5.4.1 - '@mui/system': ^5.4.1 + '@mui/material': ^5.15.14 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 dependencies: @@ -3620,15 +3653,16 @@ packages: react-dom: 18.2.0(react@18.2.0) reselect: 4.1.8 transitivePeerDependencies: + - '@emotion/react' + - '@emotion/styled' - '@types/react' dev: false - /@mui/x-data-grid@6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-QsOW9GhJdhvagJfUb5jpZE1MMaCLugxx0l89amxJAthMia95BlGS7jndiDEh8IQNthgzfxjAzrSv8GZpcgSEaA==} + /@mui/x-data-grid@7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-Nwwfr+ot/di0oH/pVwIxKV2QD7QyUY/MKkTWRSKzQoJw2aiFQf1Usmvq9Fu1qsCsvMmqIFaToY7972p0cczRjw==} engines: {node: '>=14.0.0'} peerDependencies: - '@mui/material': ^5.4.1 - '@mui/system': ^5.4.1 + '@mui/material': ^5.15.14 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 dependencies: @@ -3642,17 +3676,41 @@ packages: react-dom: 18.2.0(react@18.2.0) reselect: 4.1.8 transitivePeerDependencies: + - '@emotion/react' + - '@emotion/styled' - '@types/react' dev: false - /@mui/x-date-pickers-pro@6.19.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-0E4He1uxcJLYovKG0BByvQq2lTqL0MkpPoIdZwKA7PSP4iexSEn46zGsufgbGrcHEi7ievSUxXbjazpcDQPTiQ==} + /@mui/x-data-grid@7.0.0(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-Nwwfr+ot/di0oH/pVwIxKV2QD7QyUY/MKkTWRSKzQoJw2aiFQf1Usmvq9Fu1qsCsvMmqIFaToY7972p0cczRjw==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@mui/material': ^5.15.14 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + dependencies: + '@babel/runtime': 7.24.0 + '@mui/material': 5.15.14(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) + '@mui/system': 5.15.14(@types/react@18.2.66)(react@18.2.0) + '@mui/utils': 5.15.14(@types/react@18.2.66)(react@18.2.0) + clsx: 2.1.0 + prop-types: 15.8.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + reselect: 4.1.8 + transitivePeerDependencies: + - '@emotion/react' + - '@emotion/styled' + - '@types/react' + dev: false + + /@mui/x-date-pickers-pro@7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-3S8ehXGR4XcU9+DhMZcd/1qHhM8tROoQVQk8qtULZE16VgV9D4gDCyRNBpnbH18/K0erf41CJfUPxeiZBA5GfA==} engines: {node: '>=14.0.0'} peerDependencies: '@emotion/react': ^11.9.0 '@emotion/styled': ^11.8.1 - '@mui/material': ^5.8.6 - '@mui/system': ^5.8.0 + '@mui/material': ^5.15.14 date-fns: ^2.25.0 || ^3.2.0 date-fns-jalali: ^2.13.0-0 dayjs: ^1.10.7 @@ -3689,8 +3747,8 @@ packages: '@mui/material': 5.15.14(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0) '@mui/system': 5.15.14(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.66)(react@18.2.0) '@mui/utils': 5.15.14(@types/react@18.2.66)(react@18.2.0) - '@mui/x-date-pickers': 6.19.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0) - '@mui/x-license-pro': 6.10.2(@types/react@18.2.66)(react@18.2.0) + '@mui/x-date-pickers': 7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-license': 7.0.0(@types/react@18.2.66)(react@18.2.0) clsx: 2.1.0 dayjs: 1.11.10 prop-types: 15.8.1 @@ -3701,14 +3759,13 @@ packages: - '@types/react' dev: false - /@mui/x-date-pickers@6.19.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-6wgc2DoRTR9/mKesku4CVCKr9yYkY3FI2Oy/wshLTs2rFkw2Z10uxXFHBR9ugEtNPNCQv0qqwldElenYI97wsA==} + /@mui/x-date-pickers@7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-/9mp4O2WMixHOso63DBoZVfJVYGrzOHF5voheV2tYQ4XqDdTKp2AdWS3oh8PGwrsvCzqkvb3quzTqhKoEsJUwA==} engines: {node: '>=14.0.0'} peerDependencies: '@emotion/react': ^11.9.0 '@emotion/styled': ^11.8.1 - '@mui/material': ^5.8.6 - '@mui/system': ^5.8.0 + '@mui/material': ^5.15.14 date-fns: ^2.25.0 || ^3.2.0 date-fns-jalali: ^2.13.0-0 dayjs: ^1.10.7 @@ -3756,14 +3813,13 @@ packages: - '@types/react' dev: false - /@mui/x-date-pickers@6.19.8(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-6wgc2DoRTR9/mKesku4CVCKr9yYkY3FI2Oy/wshLTs2rFkw2Z10uxXFHBR9ugEtNPNCQv0qqwldElenYI97wsA==} + /@mui/x-date-pickers@7.0.0(@mui/material@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-/9mp4O2WMixHOso63DBoZVfJVYGrzOHF5voheV2tYQ4XqDdTKp2AdWS3oh8PGwrsvCzqkvb3quzTqhKoEsJUwA==} engines: {node: '>=14.0.0'} peerDependencies: '@emotion/react': ^11.9.0 '@emotion/styled': ^11.8.1 - '@mui/material': ^5.8.6 - '@mui/system': ^5.8.0 + '@mui/material': ^5.15.14 date-fns: ^2.25.0 || ^3.2.0 date-fns-jalali: ^2.13.0-0 dayjs: ^1.10.7 @@ -3822,14 +3878,26 @@ packages: - '@types/react' dev: false - /@mui/x-tree-view@6.17.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@mui/system@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-09dc2D+Rjg2z8KOaxbUXyPi0aw7fm2jurEtV8Xw48xJ00joLWd5QJm1/v4CarEvaiyhTQzHImNqdgeJW8ZQB6g==} + /@mui/x-license@7.0.0(@types/react@18.2.66)(react@18.2.0): + resolution: {integrity: sha512-WR9OkroKKGmnIno6tw4RzuyCQqI/Y+nbzt1r9sKtBgDQG/LvoBI45lC6zNtVosi8HhGWuXVsHDC7NYsEh31suA==} + engines: {node: '>=14.0.0'} + peerDependencies: + react: ^17.0.0 || ^18.0.0 + dependencies: + '@babel/runtime': 7.24.0 + '@mui/utils': 5.15.14(@types/react@18.2.66)(react@18.2.0) + react: 18.2.0 + transitivePeerDependencies: + - '@types/react' + dev: false + + /@mui/x-tree-view@7.0.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@mui/material@5.15.14)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-9nus8fesjBT/V/SzjZKhABG3qvGtupkccoOnz43ebLts8MSYtR8jwnOMArwrVnzrEoaS4F4dv3M8SYVQkHWfaQ==} engines: {node: '>=14.0.0'} peerDependencies: '@emotion/react': ^11.9.0 '@emotion/styled': ^11.8.1 - '@mui/material': ^5.8.6 - '@mui/system': ^5.8.0 + '@mui/material': ^5.15.14 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 dependencies: @@ -7372,6 +7440,12 @@ packages: resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==} engines: {node: '>=12'} + /d3-delaunay@6.0.4: + resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==} + engines: {node: '>=12'} + dependencies: + delaunator: 5.0.1 + /d3-ease@3.0.1: resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==} engines: {node: '>=12'} @@ -7589,6 +7663,11 @@ packages: has-property-descriptors: 1.0.2 object-keys: 1.1.1 + /delaunator@5.0.1: + resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==} + dependencies: + robust-predicates: 3.0.2 + /delayed-stream@1.0.0: resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} engines: {node: '>=0.4.0'} @@ -13587,6 +13666,9 @@ packages: inherits: 2.0.4 dev: true + /robust-predicates@3.0.2: + resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==} + /rollup@3.29.4: resolution: {integrity: sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==} engines: {node: '>=14.18.0', npm: '>=8.0.0'} From 2890daaa2f79a2156138c72595de59ca240a308e Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Wed, 27 Mar 2024 16:20:52 +0100 Subject: [PATCH 02/14] fixes --- .../toolpad-studio-components/package.json | 2 +- .../src/DataGrid.tsx | 50 ++++++++++--------- .../AppEditor/HierarchyExplorer/index.tsx | 16 +++--- .../PageEditor/QueriesExplorer/index.tsx | 12 ++--- .../toolpad/AppEditor/PagesExplorer/index.tsx | 18 +++---- pnpm-lock.yaml | 19 ++----- 6 files changed, 54 insertions(+), 63 deletions(-) diff --git a/packages/toolpad-studio-components/package.json b/packages/toolpad-studio-components/package.json index 736181df547..b9ebccf7f9e 100644 --- a/packages/toolpad-studio-components/package.json +++ b/packages/toolpad-studio-components/package.json @@ -45,7 +45,7 @@ "@mui/x-charts": "7.0.0", "@mui/x-data-grid-pro": "7.0.0", "@mui/x-date-pickers": "7.0.0", - "@mui/x-license-pro": "6.10.2", + "@mui/x-license": "7.0.0", "@tanstack/react-query": "5.18.1", "@toolpad/studio-runtime": "workspace:*", "@toolpad/utils": "workspace:*", diff --git a/packages/toolpad-studio-components/src/DataGrid.tsx b/packages/toolpad-studio-components/src/DataGrid.tsx index 98bf918baf5..4f51c45e98d 100644 --- a/packages/toolpad-studio-components/src/DataGrid.tsx +++ b/packages/toolpad-studio-components/src/DataGrid.tsx @@ -10,7 +10,6 @@ import { GridRowSelectionModel, GridValueFormatterParams, GridColDef, - GridValueGetterParams, useGridApiRef, GridRenderCellParams, useGridRootProps, @@ -37,11 +36,14 @@ import { GridEventListener, GridRowEditStopReasons, GridRowEditStartReasons, + GridValueGetter, + GridToolbarProps, + GridColType, } from '@mui/x-data-grid-pro'; import { Unstable_LicenseInfoProvider as LicenseInfoProvider, Unstable_LicenseInfoProviderProps as LicenseInfoProviderProps, -} from '@mui/x-license-pro'; +} from '@mui/x-license'; import * as React from 'react'; import { useNode, @@ -348,7 +350,7 @@ function ImageCell({ field, id, value: src }: GridRenderCellParams): Date | undefined { +const dateValueGetter: GridValueGetter = (value): Date | undefined => { if (value === null || value === undefined || value === '') { return undefined; } @@ -374,7 +376,7 @@ function dateValueGetter({ value }: GridValueGetterParams): Date | und // It's fine if this turns out to be an invalid date, the user wanted a date column, if the data can't be parsed as a date // it should just show as such return INVALID_DATE; -} +}; function ComponentErrorFallback({ error }: FallbackProps) { return ( @@ -442,8 +444,9 @@ export const CUSTOM_COLUMN_TYPES: Record = { export interface SerializableGridColumn extends Pick< GridColDef, - 'field' | 'type' | 'align' | 'width' | 'headerName' | 'sortable' | 'filterable' | 'editable' + 'field' | 'align' | 'width' | 'headerName' | 'sortable' | 'filterable' | 'editable' > { + type?: string; numberFormat?: NumberFormat; dateFormat?: DateFormat; dateTimeFormat?: DateFormat; @@ -467,7 +470,7 @@ export function inferColumns(rows: GridRowsProp): SerializableGridColumns { } export function parseColumns(columns: SerializableGridColumns): GridColDef[] { - return columns.map((column) => { + return columns.map(({ type: colType, ...column }) => { const isIdColumn = column.field === 'id'; if (isIdColumn) { @@ -479,26 +482,24 @@ export function parseColumns(columns: SerializableGridColumns): GridColDef[] { }; } - let baseColumn: Omit = { editable: true }; + let baseColumn: Omit = { editable: true }; - if (column.type) { - baseColumn = { ...baseColumn, ...CUSTOM_COLUMN_TYPES[column.type] }; + if (colType) { + baseColumn = { ...baseColumn, ...CUSTOM_COLUMN_TYPES[colType], ...column }; } - if (column.type === 'number' && column.numberFormat) { + if (colType === 'number' && column.numberFormat) { const format = createNumberFormat(column.numberFormat); - return { + baseColumn = { ...baseColumn, - ...column, valueFormatter: ({ value }) => format.format(value), }; } - if (column.type === 'date') { + if (colType === 'date') { const format = createDateFormat(column.dateFormat); - return { + baseColumn = { ...baseColumn, - ...column, valueFormatter: ({ value }) => { try { return format.format(value); @@ -509,11 +510,10 @@ export function parseColumns(columns: SerializableGridColumns): GridColDef[] { }; } - if (column.type === 'dateTime') { + if (colType === 'dateTime') { const format = createDateFormat(column.dateTimeFormat); - return { + baseColumn = { ...baseColumn, - ...column, valueFormatter: ({ value }) => { try { return format.format(value); @@ -524,7 +524,9 @@ export function parseColumns(columns: SerializableGridColumns): GridColDef[] { }; } - const type = column.type && column.type in DEFAULT_COLUMN_TYPES ? column.type : undefined; + const type = (colType && colType in DEFAULT_COLUMN_TYPES ? colType : undefined) as + | GridColType + | undefined; return { ...baseColumn, ...column, type }; }); @@ -603,7 +605,7 @@ function DeleteAction({ id, dataProvider, refetch }: DeleteActionProps) { ); } -interface EditToolbarProps { +interface EditToolbarProps extends GridToolbarProps { hasCreateButton?: boolean; createDisabled?: boolean; onCreateClick?: () => void; @@ -991,11 +993,13 @@ function useDataProviderDataGridProps( }; } -interface NoRowsOverlayProps extends React.ComponentProps { - error: Error; +type NoRowsOverlayProps = React.ComponentProps; + +interface NoRowsOverlayPropsX extends NoRowsOverlayProps { + error?: Error | null; } -function NoRowsOverlay(props: NoRowsOverlayProps) { +function NoRowsOverlay(props: NoRowsOverlayPropsX) { if (props.error) { return ; } diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx index caa9ae91871..91ab55b19e2 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { NodeId } from '@toolpad/studio-runtime'; import { Box, Typography } from '@mui/material'; -import { TreeView, TreeItem, TreeItemProps } from '@mui/x-tree-view'; +import { SimpleTreeView, TreeItem, TreeItemProps } from '@mui/x-tree-view'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import useBoolean from '@toolpad/utils/hooks/useBoolean'; @@ -212,15 +212,15 @@ export default function HierarchyExplorer() { return ( - } defaultExpandIcon={} - expanded={Array.from(expandedDomNodeIdSet)} - selected={selectedDomNodeId} - onNodeSelect={handleNodeSelect} - onNodeFocus={handleNodeFocus} - onNodeToggle={handleNodeToggle} + expandedItems={Array.from(expandedDomNodeIdSet)} + selectedItems={selectedDomNodeId} + onSelectedItemsChange={handleNodeSelect} + onItemFocus={handleNodeFocus} + onExpandedItemsChange={handleNodeToggle} onKeyDown={handleKeyDown} sx={{ flexGrow: 1, @@ -233,7 +233,7 @@ export default function HierarchyExplorer() { {rootChildren.map((childNode) => ( ))} - + ); } diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx index 18ea5c9c9df..b0dc31400ef 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx @@ -13,7 +13,7 @@ import { Paper, SxProps, } from '@mui/material'; -import { TreeView, treeItemClasses } from '@mui/x-tree-view'; +import { SimpleTreeView, treeItemClasses } from '@mui/x-tree-view'; import AddIcon from '@mui/icons-material/Add'; import MoreVertIcon from '@mui/icons-material/MoreVert'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; @@ -349,10 +349,10 @@ function Explorer({ nodes, setAnchorEl, nodeName, headerText }: ExplorerProps) { onCreate={handleCreateClick} createLabelText={`Create new ${nodeName}`} /> - ( ))} - + ); } diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx index 79c61e9f41d..9b4dccb914c 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled, Box, IconButton, Stack, Tooltip } from '@mui/material'; -import { TreeView, treeItemClasses } from '@mui/x-tree-view'; +import { SimpleTreeView, treeItemClasses } from '@mui/x-tree-view'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import MoreVertIcon from '@mui/icons-material/MoreVert'; @@ -347,13 +347,13 @@ export default function PagesExplorer({ className }: PagesExplorerProps) { onCreate={handleOpenCreateNewPage} createLabelText="Create new page" /> - } defaultExpandIcon={} @@ -364,7 +364,7 @@ export default function PagesExplorer({ className }: PagesExplorerProps) { > {isCreateNewPageOpen ? ( ( ))} - + ); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 400d15270cd..81de6d63d34 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -890,9 +890,9 @@ importers: '@mui/x-date-pickers': specifier: 7.0.0 version: 7.0.0(@mui/material@5.15.14)(@types/react@18.2.66)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0) - '@mui/x-license-pro': - specifier: 6.10.2 - version: 6.10.2(@types/react@18.2.66)(react@18.2.0) + '@mui/x-license': + specifier: 7.0.0 + version: 7.0.0(@types/react@18.2.66)(react@18.2.0) '@tanstack/react-query': specifier: 5.18.1 version: 5.18.1(react@18.2.0) @@ -3865,19 +3865,6 @@ packages: - '@types/react' dev: false - /@mui/x-license-pro@6.10.2(@types/react@18.2.66)(react@18.2.0): - resolution: {integrity: sha512-Baw3shilU+eHgU+QYKNPFUKvfS5rSyNJ98pQx02E0gKA22hWp/XAt88K1qUfUMPlkPpvg/uci6gviQSSLZkuKw==} - engines: {node: '>=14.0.0'} - peerDependencies: - react: ^17.0.0 || ^18.0.0 - dependencies: - '@babel/runtime': 7.24.0 - '@mui/utils': 5.15.14(@types/react@18.2.66)(react@18.2.0) - react: 18.2.0 - transitivePeerDependencies: - - '@types/react' - dev: false - /@mui/x-license@7.0.0(@types/react@18.2.66)(react@18.2.0): resolution: {integrity: sha512-WR9OkroKKGmnIno6tw4RzuyCQqI/Y+nbzt1r9sKtBgDQG/LvoBI45lC6zNtVosi8HhGWuXVsHDC7NYsEh31suA==} engines: {node: '>=14.0.0'} From cef2e2b43bbb0191de33651beb1de790e3bf0cc1 Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Wed, 27 Mar 2024 16:50:37 +0100 Subject: [PATCH 03/14] lets go --- packages/toolpad-studio/src/theme.ts | 2 +- .../AppEditor/AppAuthorizationEditor.tsx | 1 + .../AppEditor/HierarchyExplorer/index.tsx | 26 ++++++---- .../PageEditor/QueriesExplorer/index.tsx | 21 ++++---- .../toolpad/AppEditor/PagesExplorer/index.tsx | 15 +++--- .../src/toolpad/FunctionsEditor/index.tsx | 48 +++++++++++-------- 6 files changed, 66 insertions(+), 47 deletions(-) diff --git a/packages/toolpad-studio/src/theme.ts b/packages/toolpad-studio/src/theme.ts index a346e151376..54d33bd373f 100644 --- a/packages/toolpad-studio/src/theme.ts +++ b/packages/toolpad-studio/src/theme.ts @@ -37,7 +37,7 @@ declare module '@mui/material/styles/createTypography' { } } -declare module '@mui/material/Chip' { +declare module '@mui/material' { interface ChipPropsColorOverrides { grey: true; } diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/AppAuthorizationEditor.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/AppAuthorizationEditor.tsx index 048cb94fcd2..c99dbaa5e3f 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/AppAuthorizationEditor.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/AppAuthorizationEditor.tsx @@ -457,6 +457,7 @@ export function AppRolesEditor({ onRowUpdateError }: { onRowUpdateError: (error: return true; }} slots={{ + // @ts-expect-error https://github.com/mui/mui-toolpad/pull/3310#issuecomment-2023043453 toolbar: RolesToolbar, }} slotProps={{ diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx index 91ab55b19e2..bc1fcc2b2dc 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { NodeId } from '@toolpad/studio-runtime'; -import { Box, Typography } from '@mui/material'; +import { Box, Typography, styled } from '@mui/material'; import { SimpleTreeView, TreeItem, TreeItemProps } from '@mui/x-tree-view'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; @@ -13,6 +13,9 @@ import { removePageLayoutNode } from '../pageLayout'; import EditableTreeItem from '../../../components/EditableTreeItem'; import ExplorerHeader from '../ExplorerHeader'; +const CollapseIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 }); +const ExpandIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 }); + export interface CustomTreeItemProps extends TreeItemProps { ref?: React.RefObject; node: appDom.ElementNode; @@ -100,7 +103,7 @@ function RecursiveSubTree({ dom, root }: { dom: appDom.AppDom; root: appDom.Elem if (children.length > 0) { return ( - + {children.map((childNode) => ( ))} @@ -110,12 +113,12 @@ function RecursiveSubTree({ dom, root }: { dom: appDom.AppDom; root: appDom.Elem if (renderItem.length > 0) { return ( {root.name}} > renderItem} > {renderItem.map((childNode) => ( @@ -126,7 +129,7 @@ function RecursiveSubTree({ dom, root }: { dom: appDom.AppDom; root: appDom.Elem ); } - return ; + return ; } export default function HierarchyExplorer() { @@ -156,14 +159,17 @@ export default function HierarchyExplorer() { }, [dom, currentPageNode]); const handleNodeSelect = React.useCallback( - (event: React.SyntheticEvent, nodeId: string) => { - appStateApi.selectNode(nodeId as NodeId); + (event: React.SyntheticEvent, itemIds: string | null) => { + if (!itemIds) { + return; + } + appStateApi.selectNode(itemIds as NodeId); }, [appStateApi], ); const handleNodeFocus = React.useCallback( - (event: React.SyntheticEvent, nodeId: string) => { + (event: React.SyntheticEvent | null, nodeId: string) => { appStateApi.hoverNode(nodeId as NodeId); }, [appStateApi], @@ -214,8 +220,8 @@ export default function HierarchyExplorer() { } - defaultExpandIcon={} + // TODO: This belongs as a default property in the theme + slots={{ collapseIcon: CollapseIcon, expandIcon: ExpandIcon }} expandedItems={Array.from(expandedDomNodeIdSet)} selectedItems={selectedDomNodeId} onSelectedItemsChange={handleNodeSelect} diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx index b0dc31400ef..cb6bd1dc668 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx @@ -27,6 +27,9 @@ import EditableTreeItem, { EditableTreeItemProps } from '../../../../components/ import NodeMenu from '../../NodeMenu'; import ExplorerHeader from '../../ExplorerHeader'; +const CollapseIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 }); +const ExpandIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 }); + const classes = { treeItemMenuButton: 'Toolpad__QueryListItem', treeItemMenuOpen: 'Toolpad__QueryListItemMenuOpen', @@ -62,7 +65,7 @@ interface StyledTreeItemProps extends EditableTreeItemProps { function DataTreeItem(props: StyledTreeItemProps) { const { - nodeId, + itemId, labelText, labelTextSx, labelIconSx, @@ -86,11 +89,11 @@ function DataTreeItem(props: StyledTreeItemProps) { const handleRenameConfirm = React.useCallback( (updatedName: string) => { if (onRenameNode) { - onRenameNode(nodeId as NodeId, updatedName); + onRenameNode(itemId as NodeId, updatedName); stopEditing(); } }, - [nodeId, onRenameNode, stopEditing], + [itemId, onRenameNode, stopEditing], ); const validateEditableQueryName = React.useCallback( @@ -109,18 +112,18 @@ function DataTreeItem(props: StyledTreeItemProps) { }, [onSelectNode, toolpadNodeId]); const queryCreationMode = React.useMemo(() => { - if (props.nodeId === ':query') { + if (props.itemId === ':query') { return 'query'; } - if (props.nodeId === ':mutation') { + if (props.itemId === ':mutation') { return 'mutation'; } return undefined; - }, [props.nodeId]); + }, [props.itemId]); return ( ( @@ -357,8 +360,8 @@ function Explorer({ nodes, setAnchorEl, nodeName, headerText }: ExplorerProps) { ? currentView.view.nodeId : '' } - defaultCollapseIcon={} - defaultExpandIcon={} + // TODO: This belongs as a default property in the theme + slots={{ collapseIcon: CollapseIcon, expandIcon: ExpandIcon }} sx={{ flexGrow: 1, maxWidth: 400, diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx index 9b4dccb914c..cee1791072f 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx @@ -19,6 +19,9 @@ import EditableTreeItem, { EditableTreeItemProps } from '../../../components/Edi import { scrollIntoViewIfNeeded } from '../../../utils/dom'; import ExplorerHeader from '../ExplorerHeader'; +const CollapseIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 }); +const ExpandIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 }); + const PagesExplorerRoot = styled(Stack)({ height: '100%', width: '100%', @@ -58,7 +61,7 @@ interface StyledTreeItemProps extends EditableTreeItemProps { function PagesExplorerTreeItem(props: StyledTreeItemProps) { const { - nodeId, + itemId, labelIcon, labelText, title, @@ -78,11 +81,11 @@ function PagesExplorerTreeItem(props: StyledTreeItemProps) { const handleRenameConfirm = React.useCallback( (updatedName: string) => { if (onRenameNode) { - onRenameNode(nodeId as NodeId, updatedName); + onRenameNode(itemId as NodeId, updatedName); stopEditing(); } }, - [nodeId, onRenameNode, stopEditing], + [itemId, onRenameNode, stopEditing], ); const validateEditablePageName = React.useCallback( @@ -97,7 +100,7 @@ function PagesExplorerTreeItem(props: StyledTreeItemProps) { return ( ( @@ -355,8 +358,8 @@ export default function PagesExplorer({ className }: PagesExplorerProps) { expandedItems={expanded} onExpandedItemsChange={handleToggle} multiSelect - defaultCollapseIcon={} - defaultExpandIcon={} + // TODO: This belongs as a default property in the theme + slots={{ collapseIcon: CollapseIcon, expandIcon: ExpandIcon }} sx={{ overflow: 'auto', scrollbarGutter: 'stable', diff --git a/packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx b/packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx index f8a42d12f74..a0dc9cb14a8 100644 --- a/packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx +++ b/packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx @@ -16,7 +16,7 @@ import { Toolbar, } from '@mui/material'; import { errorFrom } from '@toolpad/utils/errors'; -import { TreeView, treeItemClasses, TreeItem } from '@mui/x-tree-view'; +import { treeItemClasses, TreeItem, SimpleTreeView } from '@mui/x-tree-view'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import AddIcon from '@mui/icons-material/Add'; @@ -44,6 +44,9 @@ import ExplorerHeader from '../AppEditor/ExplorerHeader'; import EditableTreeItem, { EditableTreeItemProps } from '../../components/EditableTreeItem'; import { scrollIntoViewIfNeeded } from '../../utils/dom'; +const CollapseIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 }); +const ExpandIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 }); + const fileTreeItemClasses = generateUtilityClasses('FileTreeItem', ['actionButton', 'handlerItem']); const FileTreeItemRoot = styled(EditableTreeItem)(({ theme }) => ({ @@ -57,7 +60,7 @@ const FileTreeItemRoot = styled(EditableTreeItem)(({ theme }) => ({ }, }, - [`& .${treeItemClasses.group}`]: { + [`& .${treeItemClasses.groupTransition}`]: { borderLeft: `1px solid ${alpha(theme.palette.text.primary, 0.2)}`, position: 'relative', left: '-2px', @@ -84,7 +87,7 @@ interface HandlerFileTreeItemProps extends EditableTreeItemProps { function HandlerFileTreeItem({ file, - nodeId, + itemId, validateItemName, onRename, ...other @@ -114,7 +117,7 @@ function HandlerFileTreeItem({ return ( ( @@ -141,7 +144,7 @@ function HandlerFileTreeItem({ ); @@ -190,10 +193,13 @@ export default function FunctionsEditor() { }); const handleSelectFunction = React.useCallback( - (_event: React.SyntheticEvent, nodeId: string) => { - const parsed = parseFunctionId(nodeId); + (_event: React.SyntheticEvent, itemId: string | null) => { + if (!itemId) { + return; + } + const parsed = parseFunctionId(itemId); if (parsed.handler) { - setSelectedHandler(nodeId); + setSelectedHandler(itemId); } }, [setSelectedHandler], @@ -329,14 +335,14 @@ export default function FunctionsEditor() { onSearch={handleSearch} hasPersistentSearch /> - } - defaultExpandIcon={} - expanded={expanded} - onNodeToggle={(_event, nodeIds) => setExpanded(nodeIds)} + selectedItems={selectedNodeId} + onSelectedItemsChange={handleSelectFunction} + // TODO: This belongs as a default property in the theme + slots={{ collapseIcon: CollapseIcon, expandIcon: ExpandIcon }} + expandedItems={expanded} + onExpandedItemsChange={(_event, itemIds) => setExpanded(itemIds)} sx={{ px: 1, overflow: 'auto', @@ -345,7 +351,7 @@ export default function FunctionsEditor() { > {isCreateNewHandlerOpen ? ( ( - } /> - } /> - } /> + } /> + } /> + } /> ) : null} - + {introspection.error ? ( Date: Wed, 27 Mar 2024 17:55:15 +0100 Subject: [PATCH 04/14] changes --- .../src/DataGrid.tsx | 6 +-- test/integration/backend-basic/index.spec.ts | 41 +++++++++++++------ 2 files changed, 31 insertions(+), 16 deletions(-) diff --git a/packages/toolpad-studio-components/src/DataGrid.tsx b/packages/toolpad-studio-components/src/DataGrid.tsx index 4f51c45e98d..af34a680049 100644 --- a/packages/toolpad-studio-components/src/DataGrid.tsx +++ b/packages/toolpad-studio-components/src/DataGrid.tsx @@ -492,7 +492,7 @@ export function parseColumns(columns: SerializableGridColumns): GridColDef[] { const format = createNumberFormat(column.numberFormat); baseColumn = { ...baseColumn, - valueFormatter: ({ value }) => format.format(value), + valueFormatter: (value: any) => format.format(value), }; } @@ -500,7 +500,7 @@ export function parseColumns(columns: SerializableGridColumns): GridColDef[] { const format = createDateFormat(column.dateFormat); baseColumn = { ...baseColumn, - valueFormatter: ({ value }) => { + valueFormatter: (value: any) => { try { return format.format(value); } catch { @@ -514,7 +514,7 @@ export function parseColumns(columns: SerializableGridColumns): GridColDef[] { const format = createDateFormat(column.dateTimeFormat); baseColumn = { ...baseColumn, - valueFormatter: ({ value }) => { + valueFormatter: (value: any) => { try { return format.format(value); } catch { diff --git a/test/integration/backend-basic/index.spec.ts b/test/integration/backend-basic/index.spec.ts index 4ece04f1b96..2e5127e6e89 100644 --- a/test/integration/backend-basic/index.spec.ts +++ b/test/integration/backend-basic/index.spec.ts @@ -245,16 +245,16 @@ test('data providers', async ({ page }) => { await clickCenter(page, grid1); - await grid1.getByRole('button', { name: 'Go to next page' }).click(); + await editorModel.appCanvas.getByRole('button', { name: 'Go to next page' }).nth(0).click(); await expect(grid1.getByText('Index item 100')).toBeVisible(); await clickCenter(page, grid2); - await grid2.getByRole('button', { name: 'Go to next page' }).click(); + await editorModel.appCanvas.getByRole('button', { name: 'Go to next page' }).nth(1).click(); await expect(grid2.getByText('Cursor item 100')).toBeVisible(); await expect(grid2.getByText('Cursor item 0')).not.toBeVisible(); - await grid2.getByRole('combobox', { name: 'Rows per page:' }).click(); + await editorModel.appCanvas.getByRole('combobox', { name: 'Rows per page:' }).nth(1).click(); await editorModel.appCanvas.getByRole('option', { name: '25', exact: true }).click(); await expect(grid2.getByText('Cursor item 0')).toBeVisible(); @@ -272,7 +272,9 @@ test('data providers crud', async ({ page }) => { await clickCenter(page, grid); - await grid.getByRole('button', { name: 'Delete row with id "5"', exact: true }).click(); + await editorModel.appCanvas + .getByRole('button', { name: 'Delete row with id "5"', exact: true }) + .click(); await expect( editorModel.appCanvas.getByText('Record deleted successfully', { exact: true }), @@ -280,19 +282,25 @@ test('data providers crud', async ({ page }) => { await expect(grid.getByText('Index item 5')).not.toBeVisible(); - await grid.getByRole('button', { name: 'Edit row with id "7"', exact: true }).click(); + await editorModel.appCanvas + .getByRole('button', { name: 'Edit row with id "7"', exact: true }) + .click(); await cellLocator(grid, 8, 1).getByRole('textbox').fill('edited'); - await grid.getByRole('button', { name: 'Cancel updates', exact: true }).click(); + await editorModel.appCanvas.getByRole('button', { name: 'Cancel updates', exact: true }).click(); await expect(cellLocator(grid, 8, 1)).toHaveText('Index item 7'); - await grid.getByRole('button', { name: 'Edit row with id "7"', exact: true }).click(); + await editorModel.appCanvas + .getByRole('button', { name: 'Edit row with id "7"', exact: true }) + .click(); await cellLocator(grid, 8, 1).getByRole('textbox').fill('edited'); - await grid.getByRole('button', { name: 'Save updates to row with id "7"', exact: true }).click(); + await editorModel.appCanvas + .getByRole('button', { name: 'Save updates to row with id "7"', exact: true }) + .click(); await expect( editorModel.appCanvas.getByText('Record updated successfully', { exact: true }), @@ -300,16 +308,23 @@ test('data providers crud', async ({ page }) => { await expect(cellLocator(grid, 8, 1)).toHaveText('edited'); - await expect(grid.getByRole('button', { name: 'Cancel updates', exact: true })).not.toBeVisible(); await expect( - grid.getByRole('button', { name: 'Save updates to row with id "7"', exact: true }), + editorModel.appCanvas.getByRole('button', { name: 'Cancel updates', exact: true }), + ).not.toBeVisible(); + await expect( + editorModel.appCanvas.getByRole('button', { + name: 'Save updates to row with id "7"', + exact: true, + }), ).not.toBeVisible(); - await grid.getByRole('button', { name: 'Add record', exact: true }).click(); + await editorModel.appCanvas.getByRole('button', { name: 'Add record', exact: true }).click(); await cellLocator(grid, 2, 1).getByRole('textbox').fill('created'); - await grid.getByRole('button', { name: 'Save updates to new row', exact: true }).click(); + await editorModel.appCanvas + .getByRole('button', { name: 'Save updates to new row', exact: true }) + .click(); await expect( editorModel.appCanvas.getByText('New record created successfully', { exact: true }), @@ -319,7 +334,7 @@ test('data providers crud', async ({ page }) => { await expect(cellLocator(grid, 102, 1)).toHaveText('created'); - await grid.getByRole('button', { name: 'Add record', exact: true }).click(); + await editorModel.appCanvas.getByRole('button', { name: 'Add record', exact: true }).click(); await page.keyboard.press('Escape'); From c504d2ee2151983231f1acec077acb9d8a91f1bc Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Wed, 27 Mar 2024 18:26:56 +0100 Subject: [PATCH 05/14] Update EditableTreeItem.tsx --- .../src/components/EditableTreeItem.tsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/toolpad-studio/src/components/EditableTreeItem.tsx b/packages/toolpad-studio/src/components/EditableTreeItem.tsx index 8d43ee00f4c..0192a7cb288 100644 --- a/packages/toolpad-studio/src/components/EditableTreeItem.tsx +++ b/packages/toolpad-studio/src/components/EditableTreeItem.tsx @@ -183,16 +183,13 @@ export default function EditableTreeItem({ ), )} - sx={ - isEditing - ? { - ...sx, - '> .MuiTreeItem-content': { - backgroundColor: alpha(theme.palette.primary.main, 0.2), - }, - } - : sx - } + sx={{ + ...sx, + '> .MuiTreeItem-content': { + padding: 0, + backgroundColor: isEditing ? alpha(theme.palette.primary.main, 0.2) : undefined, + }, + }} /> ); } From ff6d4b4d6f93caa4684e8ad010a377bf3aeffb8b Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Wed, 27 Mar 2024 18:31:17 +0100 Subject: [PATCH 06/14] Update EditableTreeItem.tsx --- packages/toolpad-studio/src/components/EditableTreeItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolpad-studio/src/components/EditableTreeItem.tsx b/packages/toolpad-studio/src/components/EditableTreeItem.tsx index 0192a7cb288..7a2e7212bf2 100644 --- a/packages/toolpad-studio/src/components/EditableTreeItem.tsx +++ b/packages/toolpad-studio/src/components/EditableTreeItem.tsx @@ -186,7 +186,7 @@ export default function EditableTreeItem({ sx={{ ...sx, '> .MuiTreeItem-content': { - padding: 0, + padding: ['8px', 0], backgroundColor: isEditing ? alpha(theme.palette.primary.main, 0.2) : undefined, }, }} From 32ab65dabaa70a404a786eaf0fc211caabbb6d05 Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Wed, 27 Mar 2024 18:40:34 +0100 Subject: [PATCH 07/14] id column align --- packages/toolpad-studio-components/src/DataGrid.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/toolpad-studio-components/src/DataGrid.tsx b/packages/toolpad-studio-components/src/DataGrid.tsx index af34a680049..bb0ba805a78 100644 --- a/packages/toolpad-studio-components/src/DataGrid.tsx +++ b/packages/toolpad-studio-components/src/DataGrid.tsx @@ -469,6 +469,10 @@ export function inferColumns(rows: GridRowsProp): SerializableGridColumns { }); } +function getNarrowedColType(type?: string): GridColType | undefined { + return (type && type in DEFAULT_COLUMN_TYPES ? type : undefined) as GridColType | undefined; +} + export function parseColumns(columns: SerializableGridColumns): GridColDef[] { return columns.map(({ type: colType, ...column }) => { const isIdColumn = column.field === 'id'; @@ -476,6 +480,7 @@ export function parseColumns(columns: SerializableGridColumns): GridColDef[] { if (isIdColumn) { return { ...column, + type: getNarrowedColType(colType), editable: false, hide: true, renderCell: ({ row, value }) => (row[DRAFT_ROW_MARKER] ? '' : value), @@ -524,11 +529,7 @@ export function parseColumns(columns: SerializableGridColumns): GridColDef[] { }; } - const type = (colType && colType in DEFAULT_COLUMN_TYPES ? colType : undefined) as - | GridColType - | undefined; - - return { ...baseColumn, ...column, type }; + return { ...baseColumn, ...column, type: getNarrowedColType(colType) }; }); } @@ -1269,6 +1270,8 @@ const DataGridComponent = React.forwardRef(function DataGridComponent( return result; }, [columns, getProviderActions]); + console.log(renderedColumns); + return ( From bcbe49eb3cbd14069684db8700db2b1e5681632e Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Wed, 27 Mar 2024 18:45:22 +0100 Subject: [PATCH 08/14] Update DataGrid.tsx --- packages/toolpad-studio-components/src/DataGrid.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/toolpad-studio-components/src/DataGrid.tsx b/packages/toolpad-studio-components/src/DataGrid.tsx index bb0ba805a78..71d35ac6783 100644 --- a/packages/toolpad-studio-components/src/DataGrid.tsx +++ b/packages/toolpad-studio-components/src/DataGrid.tsx @@ -1270,8 +1270,6 @@ const DataGridComponent = React.forwardRef(function DataGridComponent( return result; }, [columns, getProviderActions]); - console.log(renderedColumns); - return ( From da79d432bc29a3a56f3484e3eecd4ff8d001d94c Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Wed, 27 Mar 2024 19:09:55 +0100 Subject: [PATCH 09/14] more tereview tweaks --- packages/toolpad-studio/src/components/EditableTreeItem.tsx | 2 +- .../src/toolpad/AppEditor/HierarchyExplorer/index.tsx | 4 ++-- .../toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx | 4 ++-- .../src/toolpad/AppEditor/PagesExplorer/index.tsx | 4 ++-- packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx | 4 ++-- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/toolpad-studio/src/components/EditableTreeItem.tsx b/packages/toolpad-studio/src/components/EditableTreeItem.tsx index 7a2e7212bf2..59928c38877 100644 --- a/packages/toolpad-studio/src/components/EditableTreeItem.tsx +++ b/packages/toolpad-studio/src/components/EditableTreeItem.tsx @@ -186,7 +186,7 @@ export default function EditableTreeItem({ sx={{ ...sx, '> .MuiTreeItem-content': { - padding: ['8px', 0], + padding: theme.spacing(0, 0.5), backgroundColor: isEditing ? alpha(theme.palette.primary.main, 0.2) : undefined, }, }} diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx index bc1fcc2b2dc..f3f9ffec620 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/HierarchyExplorer/index.tsx @@ -13,8 +13,8 @@ import { removePageLayoutNode } from '../pageLayout'; import EditableTreeItem from '../../../components/EditableTreeItem'; import ExplorerHeader from '../ExplorerHeader'; -const CollapseIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 }); -const ExpandIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 }); +const CollapseIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 }); +const ExpandIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 }); export interface CustomTreeItemProps extends TreeItemProps { ref?: React.RefObject; diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx index cb6bd1dc668..fbe4936db98 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx @@ -27,8 +27,8 @@ import EditableTreeItem, { EditableTreeItemProps } from '../../../../components/ import NodeMenu from '../../NodeMenu'; import ExplorerHeader from '../../ExplorerHeader'; -const CollapseIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 }); -const ExpandIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 }); +const CollapseIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 }); +const ExpandIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 }); const classes = { treeItemMenuButton: 'Toolpad__QueryListItem', diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx index cee1791072f..4aed969f561 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/PagesExplorer/index.tsx @@ -19,8 +19,8 @@ import EditableTreeItem, { EditableTreeItemProps } from '../../../components/Edi import { scrollIntoViewIfNeeded } from '../../../utils/dom'; import ExplorerHeader from '../ExplorerHeader'; -const CollapseIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 }); -const ExpandIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 }); +const CollapseIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 }); +const ExpandIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 }); const PagesExplorerRoot = styled(Stack)({ height: '100%', diff --git a/packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx b/packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx index a0dc9cb14a8..f83700849af 100644 --- a/packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx +++ b/packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx @@ -44,8 +44,8 @@ import ExplorerHeader from '../AppEditor/ExplorerHeader'; import EditableTreeItem, { EditableTreeItemProps } from '../../components/EditableTreeItem'; import { scrollIntoViewIfNeeded } from '../../utils/dom'; -const CollapseIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 }); -const ExpandIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 }); +const CollapseIcon = styled(ExpandMoreIcon)({ fontSize: '0.9rem', opacity: 0.5 }); +const ExpandIcon = styled(ChevronRightIcon)({ fontSize: '0.9rem', opacity: 0.5 }); const fileTreeItemClasses = generateUtilityClasses('FileTreeItem', ['actionButton', 'handlerItem']); From 70d73d07405268093340075668f242100162e2a0 Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Wed, 27 Mar 2024 19:23:42 +0100 Subject: [PATCH 10/14] egr --- .../PageEditor/RenderPanel/NodeHud.tsx | 6 +++++- test/visual/components/index.spec.ts | 17 +++++++++++++---- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeHud.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeHud.tsx index a335ee28a7d..c7f00dad948 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeHud.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeHud.tsx @@ -240,7 +240,11 @@ export default function NodeHud({ ) : null} {isSelected ? ( - +
{ clip: appCanvasBoundingBox || undefined, }; - const firstGrid = editorModel.appCanvas.getByRole('grid').nth(0); + const firstGrid = editorModel.appCanvas.getByRole('grid').nth(0).locator('xpath=..'); await clickCenter(page, firstGrid); + await expect(editorModel.appCanvas.getByTestId('node-hud-tag')).toHaveText('dataGrid'); + await argosScreenshot('vertical-resize-before', screenshotConfig); - const firstGridBoundingBox = await waitForBoundingBox(firstGrid); + const firstGridBoundingBox = await waitForBoundingBox( + editorModel.appCanvas.getByTestId('node-hud-selection'), + ); await page.mouse.move( firstGridBoundingBox!.x + firstGridBoundingBox!.width / 2, @@ -152,11 +156,14 @@ test('resizing element heights', async ({ page, argosScreenshot }) => { await page.mouse.up(); - const thirdGrid = editorModel.appCanvas.getByRole('grid').nth(2); + const thirdGrid = editorModel.appCanvas.getByRole('grid').nth(2).locator('xpath=..'); await clickCenter(page, thirdGrid); + await expect(editorModel.appCanvas.getByTestId('node-hud-tag')).toHaveText('dataGrid1'); - const thirdGridBoundingBox = await waitForBoundingBox(thirdGrid); + const thirdGridBoundingBox = await waitForBoundingBox( + editorModel.appCanvas.getByTestId('node-hud-selection'), + ); await page.mouse.move( thirdGridBoundingBox!.x + thirdGridBoundingBox!.width / 2, @@ -175,6 +182,8 @@ test('resizing element heights', async ({ page, argosScreenshot }) => { await page.mouse.up(); await clickCenter(page, firstGrid); + await expect(editorModel.appCanvas.getByTestId('node-hud-tag')).toHaveText('dataGrid'); + await argosScreenshot('vertical-resize-after', screenshotConfig); }); From 6a86ea36bc96e3134771a27c89e532d1877f2c56 Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Thu, 28 Mar 2024 09:09:39 +0100 Subject: [PATCH 11/14] yet --- packages/toolpad-studio-components/src/DataGrid.tsx | 2 +- .../toolpad-studio/src/toolpad/FunctionsEditor/index.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/toolpad-studio-components/src/DataGrid.tsx b/packages/toolpad-studio-components/src/DataGrid.tsx index 71d35ac6783..20784d766fc 100644 --- a/packages/toolpad-studio-components/src/DataGrid.tsx +++ b/packages/toolpad-studio-components/src/DataGrid.tsx @@ -350,7 +350,7 @@ function ImageCell({ field, id, value: src }: GridRenderCellParams = (value): Date | undefined => { +const dateValueGetter: GridValueGetter = (value: any): Date | undefined => { if (value === null || value === undefined || value === '') { return undefined; } diff --git a/packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx b/packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx index f83700849af..6444823ca36 100644 --- a/packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx +++ b/packages/toolpad-studio/src/toolpad/FunctionsEditor/index.tsx @@ -395,9 +395,9 @@ export default function FunctionsEditor() { {introspection.isLoading ? ( - } /> - } /> - } /> + } /> + } /> + } /> ) : null} From 2b28bdd66d616dfc1c16a35875e1805ef49e729c Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Thu, 28 Mar 2024 09:29:40 +0100 Subject: [PATCH 12/14] frwfwr --- packages/toolpad-studio/src/routes.ts | 3 --- packages/toolpad-studio/src/theme.ts | 3 +++ packages/toolpad-studio/src/toolpad/Toolpad.tsx | 3 +-- 3 files changed, 4 insertions(+), 5 deletions(-) delete mode 100644 packages/toolpad-studio/src/routes.ts diff --git a/packages/toolpad-studio/src/routes.ts b/packages/toolpad-studio/src/routes.ts deleted file mode 100644 index 929b11ac366..00000000000 --- a/packages/toolpad-studio/src/routes.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const APP_FUNCTIONS_ROUTE = '/app/functions'; - -export const PREVIEW_PAGE_ROUTE = '/preview/pages/:nodeId'; diff --git a/packages/toolpad-studio/src/theme.ts b/packages/toolpad-studio/src/theme.ts index 54d33bd373f..9fed14e47f5 100644 --- a/packages/toolpad-studio/src/theme.ts +++ b/packages/toolpad-studio/src/theme.ts @@ -1,6 +1,9 @@ import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded'; import { tooltipClasses } from '@mui/material'; import { createTheme, ThemeOptions, Theme, alpha } from '@mui/material/styles'; +import type {} from '@mui/x-data-grid/themeAugmentation'; +import type {} from '@mui/x-data-grid-pro/themeAugmentation'; +import type {} from '@mui/x-tree-view/themeAugmentation'; declare module '@mui/material/styles/createPalette' { interface ColorRange { diff --git a/packages/toolpad-studio/src/toolpad/Toolpad.tsx b/packages/toolpad-studio/src/toolpad/Toolpad.tsx index 979599acac4..c6a1f18299c 100644 --- a/packages/toolpad-studio/src/toolpad/Toolpad.tsx +++ b/packages/toolpad-studio/src/toolpad/Toolpad.tsx @@ -11,7 +11,6 @@ import useBoolean from '@toolpad/utils/hooks/useBoolean'; import AppEditor from './AppEditor'; import ErrorAlert from './AppEditor/PageEditor/ErrorAlert'; import { ThemeProvider } from '../ThemeContext'; -import { APP_FUNCTIONS_ROUTE } from '../routes'; import ToolpadShell from './ToolpadShell'; import { getViewFromPathname } from '../utils/domView'; import AppProvider, { AppState, useAppStateContext } from './AppState'; @@ -168,7 +167,7 @@ export function ToolpadEditorRoutes({ appUrl }: ToolpadEditorRoutesProps) { {FEATURE_FLAG_GLOBAL_FUNCTIONS ? ( - } /> + } /> ) : null} } /> From de2779ad4e48a013205a8f7c2c2ea3aaa488a8e7 Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Thu, 28 Mar 2024 09:41:04 +0100 Subject: [PATCH 13/14] Update AppAuthorizationEditor.tsx --- .../src/toolpad/AppEditor/AppAuthorizationEditor.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/AppAuthorizationEditor.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/AppAuthorizationEditor.tsx index c99dbaa5e3f..4f66eb6e09c 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/AppAuthorizationEditor.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/AppAuthorizationEditor.tsx @@ -38,6 +38,7 @@ import GoogleIcon from '@mui/icons-material/Google'; import { TabContext, TabList } from '@mui/lab'; import { updateArray } from '@toolpad/utils/immutability'; import * as appDom from '@toolpad/studio-runtime/appDom'; +import invariant from 'invariant'; import { useAppState, useAppStateApi } from '../AppState'; import TabPanel from '../../components/TabPanel'; import AzureIcon from '../../components/icons/AzureIcon'; @@ -201,12 +202,14 @@ export function AppAuthenticationEditor() { ); } -interface RolesToolbarProps { - addNewRoleDisabled: boolean; - onAddNewRole: () => void; +interface RolesToolbarProps extends React.ComponentProps { + addNewRoleDisabled?: boolean; + onAddNewRole?: () => void; } function RolesToolbar({ addNewRoleDisabled, onAddNewRole }: RolesToolbarProps) { + invariant(typeof addNewRoleDisabled === 'boolean', 'addNewRoleDisabled is required in slotProps'); + invariant(typeof onAddNewRole === 'function', 'onAddNewRole is required in slotProps'); return (