From b2af3da9b1f84bd627bd218e1271a0e2166facb4 Mon Sep 17 00:00:00 2001 From: Manjesh M Pillai Date: Thu, 21 Nov 2024 13:27:09 +0000 Subject: [PATCH 01/18] upgrade mui packages to v6 --- package.json | 6 +- pnpm-lock.yaml | 267 ++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 212 insertions(+), 61 deletions(-) diff --git a/package.json b/package.json index 610dba117..f6ed69484 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "devDependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", - "@mui/material": "^5.16.4", + "@mui/material": "^6.0.0", "@mui/x-data-grid-generator": "^7.10.0", "@playwright/test": "^1.45.2", "@storybook/addon-actions": "^8.2.6", @@ -101,7 +101,7 @@ }, "dependencies": { "@juggle/resize-observer": "^3.4.0", - "@mui/icons-material": "^5.16.4", + "@mui/icons-material": "^6.0.0", "@mui/x-data-grid": "^7.10.0", "@mui/x-tree-view": "^7.10.0", "@types/css-mediaquery": "^0.1.4", @@ -125,7 +125,7 @@ "peerDependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.0", - "@mui/material": "^5.15.14", + "@mui/material": "^6.0.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2ae1792e7..4b14e94af 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,14 +9,14 @@ dependencies: specifier: ^3.4.0 version: 3.4.0 '@mui/icons-material': - specifier: ^5.16.4 - version: 5.16.4(@mui/material@5.16.4)(@types/react@18.3.3)(react@18.3.1) + specifier: ^6.0.0 + version: 6.1.8(@mui/material@6.1.8)(@types/react@18.3.3)(react@18.3.1) '@mui/x-data-grid': specifier: ^7.10.0 - version: 7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.16.4)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + version: 7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@6.1.8)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) '@mui/x-tree-view': specifier: ^7.10.0 - version: 7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.16.4)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + version: 7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@6.1.8)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) '@types/css-mediaquery': specifier: ^0.1.4 version: 0.1.4 @@ -34,10 +34,10 @@ dependencies: version: 2.9.3 material-ui-confirm: specifier: 3.0.16 - version: 3.0.16(@mui/material@5.16.4)(react-dom@18.3.1)(react@18.3.1) + version: 3.0.16(@mui/material@6.1.8)(react-dom@18.3.1)(react@18.3.1) material-ui-popup-state: specifier: ^5.1.2 - version: 5.1.2(@mui/material@5.16.4)(react@18.3.1) + version: 5.1.2(@mui/material@6.1.8)(react@18.3.1) plotly.js: specifier: ^2.33.0 version: 2.33.0(mapbox-gl@1.13.3) @@ -77,11 +77,11 @@ devDependencies: specifier: ^11.11.5 version: 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.3)(react@18.3.1) '@mui/material': - specifier: ^5.16.4 - version: 5.16.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + specifier: ^6.0.0 + version: 6.1.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) '@mui/x-data-grid-generator': specifier: ^7.10.0 - version: 7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/icons-material@5.16.4)(@mui/material@5.16.4)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + version: 7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/icons-material@6.1.8)(@mui/material@6.1.8)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) '@playwright/test': specifier: ^1.45.2 version: 1.45.2 @@ -1529,6 +1529,12 @@ packages: dependencies: regenerator-runtime: 0.14.1 + /@babel/runtime@7.26.0: + resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==} + engines: {node: '>=6.9.0'} + dependencies: + regenerator-runtime: 0.14.1 + /@babel/template@7.24.6: resolution: {integrity: sha512-3vgazJlLwNXi9jhrR1ef8qiB65L1RK90+lEQwv4OxveHnqC3BfmnHdgySwRLzf6akhlOYenT+b7AfWq+a//AHw==} engines: {node: '>=6.9.0'} @@ -1583,7 +1589,7 @@ packages: resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==} dependencies: '@babel/helper-module-imports': 7.24.6 - '@babel/runtime': 7.24.6 + '@babel/runtime': 7.24.8 '@emotion/hash': 0.9.1 '@emotion/memoize': 0.8.1 '@emotion/serialize': 1.1.4 @@ -1603,9 +1609,21 @@ packages: '@emotion/weak-memoize': 0.3.1 stylis: 4.2.0 + /@emotion/cache@11.13.5: + resolution: {integrity: sha512-Z3xbtJ+UcK76eWkagZ1onvn/wAVb1GOMuR15s30Fm2wrMgC7jzpnO2JZXr4eujTTqoQFUrZIw/rT0c6Zzjca1g==} + dependencies: + '@emotion/memoize': 0.9.0 + '@emotion/sheet': 1.4.0 + '@emotion/utils': 1.4.2 + '@emotion/weak-memoize': 0.4.0 + stylis: 4.2.0 + /@emotion/hash@0.9.1: resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==} + /@emotion/hash@0.9.2: + resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==} + /@emotion/is-prop-valid@1.2.2: resolution: {integrity: sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==} dependencies: @@ -1614,6 +1632,9 @@ packages: /@emotion/memoize@0.8.1: resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} + /@emotion/memoize@0.9.0: + resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==} + /@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1): resolution: {integrity: sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==} peerDependencies: @@ -1643,9 +1664,21 @@ packages: '@emotion/utils': 1.2.1 csstype: 3.1.3 + /@emotion/serialize@1.3.3: + resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==} + dependencies: + '@emotion/hash': 0.9.2 + '@emotion/memoize': 0.9.0 + '@emotion/unitless': 0.10.0 + '@emotion/utils': 1.4.2 + csstype: 3.1.3 + /@emotion/sheet@1.2.2: resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==} + /@emotion/sheet@1.4.0: + resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==} + /@emotion/styled@11.11.5(@emotion/react@11.11.4)(@types/react@18.3.3)(react@18.3.1): resolution: {integrity: sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==} peerDependencies: @@ -1666,6 +1699,9 @@ packages: '@types/react': 18.3.3 react: 18.3.1 + /@emotion/unitless@0.10.0: + resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==} + /@emotion/unitless@0.8.1: resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==} @@ -1679,9 +1715,15 @@ packages: /@emotion/utils@1.2.1: resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==} + /@emotion/utils@1.4.2: + resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==} + /@emotion/weak-memoize@0.3.1: resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==} + /@emotion/weak-memoize@0.4.0: + resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==} + /@esbuild/aix-ppc64@0.21.5: resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==} engines: {node: '>=12'} @@ -2367,52 +2409,55 @@ packages: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - /@mui/core-downloads-tracker@5.16.4: - resolution: {integrity: sha512-rNdHXhclwjEZnK+//3SR43YRx0VtjdHnUFhMSGYmAMJve+KiwEja/41EYh8V3pZKqF2geKyfcFUenTfDTYUR4w==} + /@mui/core-downloads-tracker@6.1.8: + resolution: {integrity: sha512-TGAvzwUg9hybDacwfIGFjI2bXYXrIqky+vMfaeay8rvT56/PNAlvIDUJ54kpT5KRc9AWAihOvtDI7/LJOThOmQ==} - /@mui/icons-material@5.16.4(@mui/material@5.16.4)(@types/react@18.3.3)(react@18.3.1): - resolution: {integrity: sha512-j9/CWctv6TH6Dou2uR2EH7UOgu79CW/YcozxCYVLJ7l03pCsiOlJ5sBArnWJxJ+nGkFwyL/1d1k8JEPMDR125A==} - engines: {node: '>=12.0.0'} + /@mui/icons-material@6.1.8(@mui/material@6.1.8)(@types/react@18.3.3)(react@18.3.1): + resolution: {integrity: sha512-6frsXcf1TcJKWevWwRup6V4L8lzI33cbHcAjT83YLgKw0vYRZKY0kjMI9fhrJZdRWXgFFgKKvEv3GjoxbqFF7A==} + engines: {node: '>=14.0.0'} peerDependencies: - '@mui/material': ^5.0.0 - '@types/react': ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 + '@mui/material': ^6.1.8 + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 peerDependenciesMeta: '@types/react': optional: true dependencies: - '@babel/runtime': 7.24.6 - '@mui/material': 5.16.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@babel/runtime': 7.26.0 + '@mui/material': 6.1.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) '@types/react': 18.3.3 react: 18.3.1 - /@mui/material@5.16.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): - resolution: {integrity: sha512-dBnh3/zRYgEVIS3OE4oTbujse3gifA0qLMmuUk13ywsDCbngJsdgwW5LuYeiT5pfA8PGPGSqM7mxNytYXgiMCw==} - engines: {node: '>=12.0.0'} + /@mui/material@6.1.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-QZdQFnXct+7NXIzHgT3qt+sQiO7HYGZU2vymP9Xl9tUMXEOA/S1mZMMb7+WGZrk5TzNlU/kP/85K0da5V1jXoQ==} + engines: {node: '>=14.0.0'} peerDependencies: '@emotion/react': ^11.5.0 '@emotion/styled': ^11.3.0 - '@types/react': ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - react-dom: ^17.0.0 || ^18.0.0 + '@mui/material-pigment-css': ^6.1.8 + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 peerDependenciesMeta: '@emotion/react': optional: true '@emotion/styled': optional: true + '@mui/material-pigment-css': + optional: true '@types/react': optional: true dependencies: - '@babel/runtime': 7.24.6 + '@babel/runtime': 7.26.0 '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.3)(react@18.3.1) - '@mui/core-downloads-tracker': 5.16.4 - '@mui/system': 5.16.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1) - '@mui/types': 7.2.15(@types/react@18.3.3) - '@mui/utils': 5.16.4(@types/react@18.3.3)(react@18.3.1) + '@mui/core-downloads-tracker': 6.1.8 + '@mui/system': 6.1.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1) + '@mui/types': 7.2.19(@types/react@18.3.3) + '@mui/utils': 6.1.8(@types/react@18.3.3)(react@18.3.1) '@popperjs/core': 2.11.8 '@types/react': 18.3.3 - '@types/react-transition-group': 4.4.10 + '@types/react-transition-group': 4.4.11 clsx: 2.1.1 csstype: 3.1.3 prop-types: 15.8.1 @@ -2431,12 +2476,28 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.24.6 + '@babel/runtime': 7.24.8 '@mui/utils': 5.16.4(@types/react@18.3.3)(react@18.3.1) '@types/react': 18.3.3 prop-types: 15.8.1 react: 18.3.1 + /@mui/private-theming@6.1.8(@types/react@18.3.3)(react@18.3.1): + resolution: {integrity: sha512-TuKl7msynCNCVvhX3c0ef1sF0Qb3VHcPs8XOGB/8bdOGBr/ynmIG1yTMjZeiFQXk8yN9fzK/FDEKMFxILNn3wg==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.26.0 + '@mui/utils': 6.1.8(@types/react@18.3.3)(react@18.3.1) + '@types/react': 18.3.3 + prop-types: 15.8.1 + react: 18.3.1 + /@mui/styled-engine@5.16.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1): resolution: {integrity: sha512-0+mnkf+UiAmTVB8PZFqOhqf729Yh0Cxq29/5cA3VAyDVTRIUUQ8FXQhiAhUIbijFmM72rY80ahFPXIm4WDbzcA==} engines: {node: '>=12.0.0'} @@ -2450,7 +2511,7 @@ packages: '@emotion/styled': optional: true dependencies: - '@babel/runtime': 7.24.6 + '@babel/runtime': 7.24.8 '@emotion/cache': 11.11.0 '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.3)(react@18.3.1) @@ -2458,6 +2519,29 @@ packages: prop-types: 15.8.1 react: 18.3.1 + /@mui/styled-engine@6.1.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1): + resolution: {integrity: sha512-ZvEoT0U2nPLSLI+B4by4cVjaZnPT2f20f4JUPkyHdwLv65ZzuoHiTlwyhqX1Ch63p8bcJzKTHQVGisEoMK6PGA==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@emotion/react': ^11.4.1 + '@emotion/styled': ^11.3.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true + dependencies: + '@babel/runtime': 7.26.0 + '@emotion/cache': 11.13.5 + '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) + '@emotion/serialize': 1.3.3 + '@emotion/sheet': 1.4.0 + '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.3)(react@18.3.1) + csstype: 3.1.3 + prop-types: 15.8.1 + react: 18.3.1 + /@mui/system@5.16.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1): resolution: {integrity: sha512-ET1Ujl2/8hbsD611/mqUuNArMCGv/fIWO/f8B3ZqF5iyPHM2aS74vhTNyjytncc4i6dYwGxNk+tLa7GwjNS0/w==} engines: {node: '>=12.0.0'} @@ -2474,7 +2558,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.24.6 + '@babel/runtime': 7.24.8 '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.3)(react@18.3.1) '@mui/private-theming': 5.16.4(@types/react@18.3.3)(react@18.3.1) @@ -2487,6 +2571,35 @@ packages: prop-types: 15.8.1 react: 18.3.1 + /@mui/system@6.1.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1): + resolution: {integrity: sha512-i1kLfQoWxzFpXTBQIuPoA3xKnAnP3en4I2T8xIolovSolGQX5k8vGjw1JaydQS40td++cFsgCdEU458HDNTGUA==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@emotion/react': ^11.5.0 + '@emotion/styled': ^11.3.0 + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.26.0 + '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) + '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.3)(react@18.3.1) + '@mui/private-theming': 6.1.8(@types/react@18.3.3)(react@18.3.1) + '@mui/styled-engine': 6.1.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1) + '@mui/types': 7.2.19(@types/react@18.3.3) + '@mui/utils': 6.1.8(@types/react@18.3.3)(react@18.3.1) + '@types/react': 18.3.3 + clsx: 2.1.1 + csstype: 3.1.3 + prop-types: 15.8.1 + react: 18.3.1 + /@mui/types@7.2.14(@types/react@18.3.3): resolution: {integrity: sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==} peerDependencies: @@ -2507,6 +2620,16 @@ packages: dependencies: '@types/react': 18.3.3 + /@mui/types@7.2.19(@types/react@18.3.3): + resolution: {integrity: sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==} + peerDependencies: + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.3.3 + /@mui/utils@5.15.14(@types/react@18.3.3)(react@18.3.1): resolution: {integrity: sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==} engines: {node: '>=12.0.0'} @@ -2534,7 +2657,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.24.6 + '@babel/runtime': 7.24.8 '@types/prop-types': 15.7.12 '@types/react': 18.3.3 clsx: 2.1.1 @@ -2542,7 +2665,26 @@ packages: react: 18.3.1 react-is: 18.3.1 - /@mui/x-data-grid-generator@7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/icons-material@5.16.4)(@mui/material@5.16.4)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): + /@mui/utils@6.1.8(@types/react@18.3.3)(react@18.3.1): + resolution: {integrity: sha512-O2DWb1kz8hiANVcR7Z4gOB3SvPPsSQGUmStpyBDzde6dJIfBzgV9PbEQOBZd3EBsd1pB+Uv1z5LAJAbymmawrA==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.26.0 + '@mui/types': 7.2.19(@types/react@18.3.3) + '@types/prop-types': 15.7.13 + '@types/react': 18.3.3 + clsx: 2.1.1 + prop-types: 15.8.1 + react: 18.3.1 + react-is: 18.3.1 + + /@mui/x-data-grid-generator@7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/icons-material@6.1.8)(@mui/material@6.1.8)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-Kppti/Nl4sPkZGeirmPsGwxNR+fmt+Zo5Q972jTwcSizooJyPZDZBmIZDwJpHKmu88vI1IPRQjO1YjSpmx9HDQ==} engines: {node: '>=14.0.0'} peerDependencies: @@ -2552,9 +2694,9 @@ packages: dependencies: '@babel/runtime': 7.24.8 '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) - '@mui/icons-material': 5.16.4(@mui/material@5.16.4)(@types/react@18.3.3)(react@18.3.1) - '@mui/material': 5.16.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) - '@mui/x-data-grid-premium': 7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.16.4)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@mui/icons-material': 6.1.8(@mui/material@6.1.8)(@types/react@18.3.3)(react@18.3.1) + '@mui/material': 6.1.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@mui/x-data-grid-premium': 7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@6.1.8)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) chance: 1.1.11 clsx: 2.1.1 lru-cache: 10.4.3 @@ -2566,7 +2708,7 @@ packages: - react-dom dev: true - /@mui/x-data-grid-premium@7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.16.4)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): + /@mui/x-data-grid-premium@7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@6.1.8)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-CD0c1YSX0uT3TZ6Zmc+im2UGfH5peQ6DCGGug5yp8GnVPyBICoRNVn0b8RDozFD3UNDZRQsQ1K0Yv6nQGYB6lQ==} engines: {node: '>=14.0.0'} peerDependencies: @@ -2575,11 +2717,11 @@ packages: react-dom: ^17.0.0 || ^18.0.0 dependencies: '@babel/runtime': 7.24.8 - '@mui/material': 5.16.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@mui/material': 6.1.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) '@mui/system': 5.16.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1) '@mui/utils': 5.16.4(@types/react@18.3.3)(react@18.3.1) - '@mui/x-data-grid': 7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.16.4)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) - '@mui/x-data-grid-pro': 7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.16.4)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@mui/x-data-grid': 7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@6.1.8)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@mui/x-data-grid-pro': 7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@6.1.8)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) '@mui/x-internals': 7.10.0(@types/react@18.3.3)(react@18.3.1) '@mui/x-license': 7.10.0(@types/react@18.3.3)(react@18.3.1) '@types/format-util': 1.0.4 @@ -2595,7 +2737,7 @@ packages: - '@types/react' dev: true - /@mui/x-data-grid-pro@7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.16.4)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): + /@mui/x-data-grid-pro@7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@6.1.8)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-81gGE3lsNVagwn1BlmGHaNl2uqg/yaMxvLhS2qorSC6Lx9FE4fb1LuFyEuuAVu5ahpMj9LAEW4o80prmCLQaRg==} engines: {node: '>=14.0.0'} peerDependencies: @@ -2604,10 +2746,10 @@ packages: react-dom: ^17.0.0 || ^18.0.0 dependencies: '@babel/runtime': 7.24.8 - '@mui/material': 5.16.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@mui/material': 6.1.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) '@mui/system': 5.16.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1) '@mui/utils': 5.16.4(@types/react@18.3.3)(react@18.3.1) - '@mui/x-data-grid': 7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.16.4)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@mui/x-data-grid': 7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@6.1.8)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) '@mui/x-internals': 7.10.0(@types/react@18.3.3)(react@18.3.1) '@mui/x-license': 7.10.0(@types/react@18.3.3)(react@18.3.1) '@types/format-util': 1.0.4 @@ -2622,7 +2764,7 @@ packages: - '@types/react' dev: true - /@mui/x-data-grid@7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.16.4)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): + /@mui/x-data-grid@7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@6.1.8)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-8nOwgtjOe7GzkygJsQow0Rf8ceV1s1oxHEUI2hx1IKfCsnVLGuX6cn9QZJcUwAaaUcVmWU3Pisz9vH2nFSioOQ==} engines: {node: '>=14.0.0'} peerDependencies: @@ -2631,7 +2773,7 @@ packages: react-dom: ^17.0.0 || ^18.0.0 dependencies: '@babel/runtime': 7.24.8 - '@mui/material': 5.16.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@mui/material': 6.1.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) '@mui/system': 5.16.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1) '@mui/utils': 5.16.4(@types/react@18.3.3)(react@18.3.1) '@mui/x-internals': 7.10.0(@types/react@18.3.3)(react@18.3.1) @@ -2670,7 +2812,7 @@ packages: - '@types/react' dev: true - /@mui/x-tree-view@7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.16.4)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): + /@mui/x-tree-view@7.10.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@6.1.8)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-9OCAIb0wS5uuEDyjcSwSturrB4RUXBfE0UO/xpKjrMvRzCaAvxbCf2aFILP8uH9NyynYZkIGYfGnlqdAPy2OLg==} engines: {node: '>=14.0.0'} peerDependencies: @@ -2684,7 +2826,7 @@ packages: '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.3)(react@18.3.1) '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) - '@mui/material': 5.16.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@mui/material': 6.1.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) '@mui/system': 5.16.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1) '@mui/utils': 5.16.4(@types/react@18.3.3)(react@18.3.1) '@types/react-transition-group': 4.4.10 @@ -4268,6 +4410,9 @@ packages: /@types/prop-types@15.7.12: resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==} + /@types/prop-types@15.7.13: + resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==} + /@types/qs@6.9.15: resolution: {integrity: sha512-uXHQKES6DQKKCLh441Xv/dwxOq1TVS3JPUMlEqoEglvlhR6Mxnlew/Xq/LRVHpLyk7iK3zODe1qYHIMltO7XGg==} dev: true @@ -4305,6 +4450,12 @@ packages: resolution: {integrity: sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==} dependencies: '@types/react': 18.3.3 + dev: false + + /@types/react-transition-group@4.4.11: + resolution: {integrity: sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==} + dependencies: + '@types/react': 18.3.3 /@types/react@18.3.3: resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==} @@ -5040,7 +5191,7 @@ packages: resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==} engines: {node: '>=10', npm: '>=6'} dependencies: - '@babel/runtime': 7.24.6 + '@babel/runtime': 7.24.8 cosmiconfig: 7.1.0 resolve: 1.22.8 @@ -6189,7 +6340,7 @@ packages: /dom-helpers@5.2.1: resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==} dependencies: - '@babel/runtime': 7.24.6 + '@babel/runtime': 7.24.8 csstype: 3.1.3 /draw-svg-path@1.0.0: @@ -9357,19 +9508,19 @@ packages: react: 18.3.1 dev: true - /material-ui-confirm@3.0.16(@mui/material@5.16.4)(react-dom@18.3.1)(react@18.3.1): + /material-ui-confirm@3.0.16(@mui/material@6.1.8)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-aJoa/FM/U/86qztoljlk8FWmjSJbAMzDWCdWbDqU5WwB0WzcWPyGrhBvIqihR9uKdHKBf1YrvMjn68uOrfsXAg==} peerDependencies: '@mui/material': '>= 5.0.0' react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 dependencies: - '@mui/material': 5.16.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@mui/material': 6.1.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) dev: false - /material-ui-popup-state@5.1.2(@mui/material@5.16.4)(react@18.3.1): + /material-ui-popup-state@5.1.2(@mui/material@6.1.8)(react@18.3.1): resolution: {integrity: sha512-+MPpydg2a/NqSbF4vNKbsHeEktiH6j0OPtNud0ZbhElKRc915XdyNH3Z7N+lL/l1erHcsCHB85izHC+zc6GgmQ==} engines: {node: '>=16'} peerDependencies: @@ -9377,7 +9528,7 @@ packages: react: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: '@babel/runtime': 7.24.6 - '@mui/material': 5.16.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@mui/material': 6.1.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) '@types/prop-types': 15.7.12 '@types/react': 18.3.3 classnames: 2.5.1 @@ -10737,7 +10888,7 @@ packages: react: '>=16.6.0' react-dom: '>=16.6.0' dependencies: - '@babel/runtime': 7.24.6 + '@babel/runtime': 7.24.8 dom-helpers: 5.2.1 loose-envify: 1.4.0 prop-types: 15.8.1 From d7c2d4c98dc3f5afb3f10063b26efadb8007fe27 Mon Sep 17 00:00:00 2001 From: Manjesh M Pillai Date: Thu, 21 Nov 2024 14:21:06 +0000 Subject: [PATCH 02/18] Update Grid to Grid2 EditLabelDialog --- src/EditLabelDialog/EditLabelDialog.jsx | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/src/EditLabelDialog/EditLabelDialog.jsx b/src/EditLabelDialog/EditLabelDialog.jsx index 517aabb12..c7a922f66 100644 --- a/src/EditLabelDialog/EditLabelDialog.jsx +++ b/src/EditLabelDialog/EditLabelDialog.jsx @@ -6,7 +6,7 @@ import { Dialog, DialogActions, DialogContent, - Grid, + Grid2 as Grid, TextField, Typography } from "@mui/material"; @@ -143,34 +143,30 @@ export default function EditLabelDialog({ {title} - + setName(event.target.value)} error={!isLabelNameValid || !isLabelLengthValid} helperText={nameErrorMessage()} /> - + setDescription(event.target.value)} /> - + theme.palette.text.secondary, @@ -182,14 +178,14 @@ export default function EditLabelDialog({ Label Color * - + setColor(color)} showNoColor={false} /> - + {name ? ( From d4c289d57a37070043ae204e85e1fe6fc856a5ed Mon Sep 17 00:00:00 2001 From: Manjesh M Pillai Date: Thu, 21 Nov 2024 14:27:53 +0000 Subject: [PATCH 03/18] Update Grid to Grid2 FileUploader --- src/FileUploader/FileUploader.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/FileUploader/FileUploader.tsx b/src/FileUploader/FileUploader.tsx index 6ed439b88..efe86a20f 100644 --- a/src/FileUploader/FileUploader.tsx +++ b/src/FileUploader/FileUploader.tsx @@ -1,7 +1,7 @@ import { Box, Chip, - Grid, + Grid2 as Grid, LinearProgress, Stack, Typography, @@ -150,7 +150,7 @@ export default function FileUploader({ {selectedFiles.map((thisFile, i) => { return ( - + Date: Thu, 21 Nov 2024 14:53:55 +0000 Subject: [PATCH 04/18] Update Grid to Grid2 in LoginForm --- src/LoginForm/LoginForm.jsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/LoginForm/LoginForm.jsx b/src/LoginForm/LoginForm.jsx index 777c51a4a..9f4d1050e 100644 --- a/src/LoginForm/LoginForm.jsx +++ b/src/LoginForm/LoginForm.jsx @@ -1,4 +1,11 @@ -import { Box, Button, CircularProgress, Grid, TextField } from "@mui/material"; +import { + Box, + Button, + CircularProgress, + Grid2 as Grid, + TextField +} from "@mui/material"; + import PropTypes from "prop-types"; import React from "react"; import { useMaterialForm } from "../utils/form"; @@ -18,7 +25,7 @@ export default function LoginForm({ loading = false, onLogin = () => {} }) { return (
- + {} }) { label="Email Address" autoComplete="username" autoFocus={!loading} - inputProps={{ "aria-label": "email" }} + slotProps={{ input: { "aria-label": "email" } }} error={Boolean(errors.email)} helperText={errors.email && errors.email.message} disabled={loading} @@ -40,7 +47,7 @@ export default function LoginForm({ loading = false, onLogin = () => {} }) { })} /> - + {} }) { label="Password" type="password" autoComplete="current-password" - inputProps={{ "aria-label": "password" }} + slotProps={{ input: { "aria-label": "password" } }} error={Boolean(errors.password)} disabled={loading} {...register("password", { required: true })} From 9a570c66651f79d99ea9e92d42e748395cdc6e4d Mon Sep 17 00:00:00 2001 From: Manjesh M Pillai Date: Thu, 21 Nov 2024 15:06:58 +0000 Subject: [PATCH 05/18] Update Grid to Grid2 in PasswordChangeDialog --- .../PasswordChangeDialog.jsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/PasswordChangeDialog/PasswordChangeDialog.jsx b/src/PasswordChangeDialog/PasswordChangeDialog.jsx index 4bfce336d..937e17ae6 100644 --- a/src/PasswordChangeDialog/PasswordChangeDialog.jsx +++ b/src/PasswordChangeDialog/PasswordChangeDialog.jsx @@ -1,4 +1,5 @@ import * as React from "react"; + import { Alert, Button, @@ -7,19 +8,20 @@ import { DialogActions, DialogContent, FormHelperText, - Grid, + Grid2 as Grid, IconButton, DialogTitle as MuiDialogTitle, TextField, Typography } from "@mui/material"; + import CloseIcon from "@mui/icons-material/Close"; import PropTypes from "prop-types"; import { useMaterialForm } from "../utils/form"; import zxcvbn from "zxcvbn"; /** - * Dialog for authenticated users to change their password. Requries reauthentication using existing password. + * Dialog for authenticated users to change their password. Requires re-authentication using existing password. */ export default function PasswordChangeDialog({ errorMessage = "Woops, something went wrong. Please try again.", @@ -27,7 +29,7 @@ export default function PasswordChangeDialog({ onSubmit, open, status = "init", - successMessage = "Password succesfully changed." + successMessage = "Password successfully changed." }) { // form state const { @@ -59,7 +61,7 @@ export default function PasswordChangeDialog({ {["init", "loading", "error"].includes(status) && ( - + - + )} - + theme.palette.grey[500], From 8e67cb4e03d7432bb7373efceec45e94f45d1486 Mon Sep 17 00:00:00 2001 From: Manjesh M Pillai Date: Thu, 21 Nov 2024 15:10:28 +0000 Subject: [PATCH 06/18] Update Grid to Grid2 in PasswordChangeForm --- src/PasswordChangeForm/PasswordChangeForm.jsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/PasswordChangeForm/PasswordChangeForm.jsx b/src/PasswordChangeForm/PasswordChangeForm.jsx index 25ddb5418..06219879c 100644 --- a/src/PasswordChangeForm/PasswordChangeForm.jsx +++ b/src/PasswordChangeForm/PasswordChangeForm.jsx @@ -3,9 +3,10 @@ import { Button, CircularProgress, FormHelperText, - Grid, + Grid2 as Grid, TextField } from "@mui/material"; + import PropTypes from "prop-types"; import React from "react"; import { useMaterialForm } from "../utils/form"; @@ -40,7 +41,7 @@ export default function PasswordChangeForm({ loading, onSubmit }) { return ( - + )} - + Date: Thu, 21 Nov 2024 15:12:59 +0000 Subject: [PATCH 07/18] Update Grid to Grid2 in PasswordResetForm --- src/PasswordResetForm/PasswordResetForm.jsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/PasswordResetForm/PasswordResetForm.jsx b/src/PasswordResetForm/PasswordResetForm.jsx index a31afdb3b..93908336c 100644 --- a/src/PasswordResetForm/PasswordResetForm.jsx +++ b/src/PasswordResetForm/PasswordResetForm.jsx @@ -1,4 +1,11 @@ -import { Box, Button, CircularProgress, Grid, TextField } from "@mui/material"; +import { + Box, + Button, + CircularProgress, + Grid2 as Grid, + TextField +} from "@mui/material"; + import PropTypes from "prop-types"; import React from "react"; import { useMaterialForm } from "../utils/form"; @@ -19,7 +26,7 @@ export default function PasswordResetForm({ loading, onSubmit }) { return ( - + Date: Thu, 21 Nov 2024 15:17:28 +0000 Subject: [PATCH 08/18] Update Grid to Grid2 in RegistrationForm --- src/RegistrationForm/RegistrationForm.jsx | 35 +++++++++++++++-------- 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/src/RegistrationForm/RegistrationForm.jsx b/src/RegistrationForm/RegistrationForm.jsx index a2c656c9f..50a393775 100644 --- a/src/RegistrationForm/RegistrationForm.jsx +++ b/src/RegistrationForm/RegistrationForm.jsx @@ -4,10 +4,11 @@ import { CircularProgress, FormControl, FormHelperText, - Grid, + Grid2 as Grid, MenuItem, TextField } from "@mui/material"; + import { Controller } from "react-hook-form"; import PropTypes from "prop-types"; import React from "react"; @@ -49,7 +50,12 @@ export default function RegistrationForm({ return ( - + - + - + - + - + )} - + Date: Thu, 21 Nov 2024 16:37:58 +0000 Subject: [PATCH 09/18] moving Typography color system prop into sx --- src/AppHeader/AppHeader.tsx | 7 +++-- src/LoadErrorMessage/LoadErrorMessage.tsx | 38 ++++++++++++++--------- src/Sidebar/Sidebar.tsx | 2 +- src/SurfacePlot/SurfacePlot.tsx | 2 +- src/Uploader/UploaderHeader.tsx | 2 +- src/VirtoAppHeader/VirtoAppHeader.tsx | 7 +++-- 6 files changed, 34 insertions(+), 24 deletions(-) diff --git a/src/AppHeader/AppHeader.tsx b/src/AppHeader/AppHeader.tsx index 5ffc146e1..5405fd718 100644 --- a/src/AppHeader/AppHeader.tsx +++ b/src/AppHeader/AppHeader.tsx @@ -41,9 +41,10 @@ function AppHeader({ lineHeight="34px" letterSpacing="0.05em" fontWeight="600" - color={theme => - theme.palette.mode === "dark" ? "#003063" : "white" - } + sx={{ + color: theme => + theme.palette.mode === "dark" ? "#003063" : "white" + }} > {appName} diff --git a/src/LoadErrorMessage/LoadErrorMessage.tsx b/src/LoadErrorMessage/LoadErrorMessage.tsx index 55c1e929b..8f02e6e4d 100644 --- a/src/LoadErrorMessage/LoadErrorMessage.tsx +++ b/src/LoadErrorMessage/LoadErrorMessage.tsx @@ -69,7 +69,9 @@ const LoadErrorMessage = ({ variant="h6" fontWeight="600" textAlign="center" - color={theme => theme.palette.error.main} + sx={{ + color: theme => theme.palette.error.main + }} > {title} @@ -77,11 +79,12 @@ const LoadErrorMessage = ({ - theme.palette.mode === "dark" - ? lighten(theme.palette.text.secondary, 0.7) - : theme.palette.text.primary - } + sx={{ + color: theme => + theme.palette.mode === "dark" + ? lighten(theme.palette.text.secondary, 0.7) + : theme.palette.text.primary + }} > {message} @@ -97,8 +100,10 @@ const LoadErrorMessage = ({ {/* Render the "Hide More Details" text */} theme.palette.primary.main} - sx={{ cursor: "pointer" }} + sx={{ + color: theme => theme.palette.primary.main, + cursor: "pointer" + }} onClick={handleDetailsClick} > Hide More Details @@ -114,8 +119,10 @@ const LoadErrorMessage = ({ {errorDetails && !detailsVisible && ( theme.palette.primary.main} - sx={{ cursor: "pointer" }} + sx={{ + color: theme => theme.palette.primary.main, + cursor: "pointer" + }} onClick={handleDetailsClick} > View More Details @@ -125,11 +132,12 @@ const LoadErrorMessage = ({ {contactTeam !== "none" ? ( - theme.palette.mode === "dark" - ? lighten(theme.palette.text.secondary, 0.7) - : theme.palette.text.primary - } + sx={{ + color: theme => + theme.palette.mode === "dark" + ? lighten(theme.palette.text.secondary, 0.7) + : theme.palette.text.primary + }} > If this persists, contact {/* Render the contact team link */} {contactUrl ? ( diff --git a/src/Sidebar/Sidebar.tsx b/src/Sidebar/Sidebar.tsx index 72f26524e..d316362c7 100644 --- a/src/Sidebar/Sidebar.tsx +++ b/src/Sidebar/Sidebar.tsx @@ -37,7 +37,7 @@ function Sidebar({ ) : null} {showVersion ? ( - theme.palette.text.primary}> + theme.palette.text.primary }}> {appVersion} ) : null} diff --git a/src/SurfacePlot/SurfacePlot.tsx b/src/SurfacePlot/SurfacePlot.tsx index 2d9b90770..31b505053 100644 --- a/src/SurfacePlot/SurfacePlot.tsx +++ b/src/SurfacePlot/SurfacePlot.tsx @@ -56,7 +56,7 @@ const SurfacePlot = ({ {!isFullscreen && showTitle ? ( {title || ""} diff --git a/src/Uploader/UploaderHeader.tsx b/src/Uploader/UploaderHeader.tsx index 29b54ce60..ecb52de8f 100644 --- a/src/Uploader/UploaderHeader.tsx +++ b/src/Uploader/UploaderHeader.tsx @@ -60,10 +60,10 @@ export default function UploaderHeader({ {title} {required ? ( theme.palette.error.main} component="span" lineHeight="inherit" sx={{ + color: theme => theme.palette.error.main, marginLeft: "4px", verticalAlign: "text-top" }} diff --git a/src/VirtoAppHeader/VirtoAppHeader.tsx b/src/VirtoAppHeader/VirtoAppHeader.tsx index 861a264e1..27c486b3b 100644 --- a/src/VirtoAppHeader/VirtoAppHeader.tsx +++ b/src/VirtoAppHeader/VirtoAppHeader.tsx @@ -87,9 +87,10 @@ function Header({ letterSpacing="0.05em" textTransform="uppercase" fontWeight="700" - color={theme => - theme.palette.mode === "dark" ? "#003063" : "white" - } + sx={{ + color: theme => + theme.palette.mode === "dark" ? "#003063" : "white" + }} > {`.`} {appName} From 674a3788e4d7995511e91dafae8721afd58f20cd Mon Sep 17 00:00:00 2001 From: Manjesh M Pillai Date: Thu, 21 Nov 2024 17:00:57 +0000 Subject: [PATCH 10/18] adding ode mode utility in styles components --- src/AppHeader/AppHeader.tsx | 10 ++++++---- src/ToggleColorMode/ToggleColorMode.jsx | 21 +++++++++++---------- 2 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/AppHeader/AppHeader.tsx b/src/AppHeader/AppHeader.tsx index 5405fd718..830f57fc8 100644 --- a/src/AppHeader/AppHeader.tsx +++ b/src/AppHeader/AppHeader.tsx @@ -41,10 +41,12 @@ function AppHeader({ lineHeight="34px" letterSpacing="0.05em" fontWeight="600" - sx={{ - color: theme => - theme.palette.mode === "dark" ? "#003063" : "white" - }} + sx={theme => ({ + color: "white", + ...theme.applyStyles("dark", { + color: "#003063" + }) + })} > {appName} diff --git a/src/ToggleColorMode/ToggleColorMode.jsx b/src/ToggleColorMode/ToggleColorMode.jsx index ab09e1a94..e82d469b9 100644 --- a/src/ToggleColorMode/ToggleColorMode.jsx +++ b/src/ToggleColorMode/ToggleColorMode.jsx @@ -16,11 +16,11 @@ export default function ToggleColorMode({ mode, onChange }) { "& .MuiSwitch-switchBase": { "&.Mui-checked": { "& + .MuiSwitch-track": { - backgroundColor: - theme.palette.mode === "dark" - ? "rgba(0, 0, 0, 0.3)" - : "rgba(255, 255, 255, 0.16)", - opacity: 1 + backgroundColor: "rgba(255, 255, 255, 0.16)", + opacity: 1, + ...theme.applyStyles("dark", { + backgroundColor: "rgba(0, 0, 0, 0.3)" + }) }, "& .MuiSwitch-thumb": { "&:before": { @@ -55,12 +55,13 @@ export default function ToggleColorMode({ mode, onChange }) { width: 32.5 }, "& .MuiSwitch-track": { - backgroundColor: - theme.palette.mode === "dark" - ? "rgba(0, 0, 0, 0.3)" - : "rgba(255, 255, 255, 0.16)", + backgroundColor: "rgba(255, 255, 255, 0.16)", borderRadius: 20 / 2, - opacity: 1 + opacity: 1, + + ...theme.applyStyles("dark", { + backgroundColor: "rgba(0, 0, 0, 0.3)" + }) }, height: 34, padding: 7, From 082ad8c32c1d6964b9ff79a3bb8c41dd9816fbfb Mon Sep 17 00:00:00 2001 From: Manjesh M Pillai Date: Mon, 25 Nov 2024 12:20:11 +0000 Subject: [PATCH 11/18] theme sx props override for MUI 6 and using theme.applyStyles() for mode --- src/ActionDialog/ActionDialog.tsx | 6 +- src/AppLauncher/AppLauncher.tsx | 31 +++++----- src/AppLayout/AppLayout.tsx | 6 +- src/Canvas/SelectionRectangle.jsx | 6 +- src/CanvasItem/CanvasItem.stories.jsx | 4 +- src/CanvasItem/ResizeHandle.jsx | 8 +-- src/CanvasItem/RotateHandle.jsx | 14 ++--- src/Card/DetailCard/DetailCard.tsx | 18 +++--- src/Card/SummaryCard/SummaryCard.stories.tsx | 4 +- src/Color/Color.jsx | 12 ++-- src/ConfirmProvider/ConfirmationDialog.tsx | 24 ++++---- src/DeletableList/DeletableList.tsx | 4 +- src/DialogTitle/DialogTitle.tsx | 6 +- src/EditLabelDialog/EditLabelDialog.jsx | 6 +- src/FontPicker/FontPicker.jsx | 1 + src/LinePlot/LinePlot.stories.tsx | 18 +++--- src/LoadErrorMessage/LoadErrorMessage.tsx | 43 +++++++------ src/ModelButton/ModelButton.tsx | 60 +++++++++++-------- src/SearchBar/SearchBar.tsx | 24 +++++--- src/SelectorButton/SelectorButton.tsx | 11 ++-- src/Sidebar/SidebarDivider/SidebarDivider.tsx | 8 ++- .../StatusCountTable/StatusCountTable.tsx | 18 +++--- src/TabPanel/TabPanel.tsx | 10 ++-- src/TransferList/TransferList.tsx | 26 ++++---- src/VirtoAppHeader/VirtoAppHeader.tsx | 31 +++++----- 25 files changed, 218 insertions(+), 181 deletions(-) diff --git a/src/ActionDialog/ActionDialog.tsx b/src/ActionDialog/ActionDialog.tsx index ff5ab3ae1..a78ace660 100644 --- a/src/ActionDialog/ActionDialog.tsx +++ b/src/ActionDialog/ActionDialog.tsx @@ -52,12 +52,12 @@ export default function ActionDialog({ data-testid="close-icon" aria-label="close" onClick={onCancelClick} - sx={{ - color: theme => theme.palette.grey[500], + sx={theme => ({ + color: theme.palette.grey[500], position: "absolute", right: 8, top: 8 - }} + })} > diff --git a/src/AppLauncher/AppLauncher.tsx b/src/AppLauncher/AppLauncher.tsx index 9851060d3..2f7cf4220 100644 --- a/src/AppLauncher/AppLauncher.tsx +++ b/src/AppLauncher/AppLauncher.tsx @@ -12,7 +12,6 @@ import { VirtoVehicle } from "../SvgIcons"; -import { Theme } from "@mui/material/styles"; import VirtoLogo from "../SvgIcons/VirtoLogo"; // AppLauncher component for app which displays logo, list of items and app version @@ -85,17 +84,21 @@ function AppLauncher({ - theme.palette.mode === "dark" - ? "white" - : theme.palette.primary.main, + sx={theme => ({ + color: theme.palette.primary.main, height: 40, - width: 160 - }} + width: 160, + ...theme.applyStyles("dark", { + color: "white" + }) + })} /> - theme.spacing(3, 0, 1.5, 0) }} /> + ({ + margin: theme.spacing(3, 0, 1.5, 0) + })} + /> ); @@ -132,11 +135,11 @@ function AppLauncher({ data-testid={app.name} sx={theme => ({ "&:hover": { - backgroundColor: - theme.palette.mode === "dark" - ? theme.palette.action.hover - : "white", - boxShadow: theme.shadows[2] + backgroundColor: "white", + boxShadow: theme.shadows[2], + ...theme.applyStyles("dark", { + backgroundColor: theme.palette.action.hover + }) }, background: "transparent", boxShadow: "none", diff --git a/src/AppLayout/AppLayout.tsx b/src/AppLayout/AppLayout.tsx index 7ed184f82..a4124f0f1 100644 --- a/src/AppLayout/AppLayout.tsx +++ b/src/AppLayout/AppLayout.tsx @@ -94,9 +94,9 @@ function Layout({ flexGrow={1} display="flex" flexDirection="column" - sx={{ - background: theme => theme.palette.background.default - }} + sx={theme => ({ + background: theme.palette.background.default + })} > theme.mixins.toolbar} /> ({ backgroundColor: theme => alpha(theme.palette.primary.light, 0.1), cursor: "crosshair", height: `${height}px`, left, - outline: theme => `1px solid ${theme.palette.primary.main}`, + outline: `1px solid ${theme.palette.primary.main}`, position: "absolute", top, width: `${width}px` - }} + })} /> ); } diff --git a/src/CanvasItem/CanvasItem.stories.jsx b/src/CanvasItem/CanvasItem.stories.jsx index f65e8ed6b..3b6432e5a 100644 --- a/src/CanvasItem/CanvasItem.stories.jsx +++ b/src/CanvasItem/CanvasItem.stories.jsx @@ -100,7 +100,9 @@ const Template = args => { onClick={onClick} > theme.palette.grey[100] }} + sx={theme => ({ + background: theme.palette.grey[100] + })} width="100%" height="100%" > diff --git a/src/CanvasItem/ResizeHandle.jsx b/src/CanvasItem/ResizeHandle.jsx index e5f56525d..b9614c4f7 100644 --- a/src/CanvasItem/ResizeHandle.jsx +++ b/src/CanvasItem/ResizeHandle.jsx @@ -72,15 +72,15 @@ export default function ResizeHandle({ onResize, direction, rotateAngle }) { return ( theme.palette.primary.main, + sx={theme => ({ + background: theme.palette.primary.main, cursor: `${cursor}-resize`, height: "10px", - outline: theme => `2px solid ${theme.palette.background.paper}`, + outline: `2px solid ${theme.palette.background.paper}`, position: "absolute", width: "10px", ...getOffset(direction) - }} + })} onMouseDown={handleResize} onDragStart={e => e.preventDefault()} onDrag={e => e.preventDefault()} diff --git a/src/CanvasItem/RotateHandle.jsx b/src/CanvasItem/RotateHandle.jsx index e3c43bfdf..88bbef9c7 100644 --- a/src/CanvasItem/RotateHandle.jsx +++ b/src/CanvasItem/RotateHandle.jsx @@ -22,26 +22,26 @@ export default function RotateHandle({ onRotate }) { onClick={e => e.stopPropagation()} > theme.palette.primary.main, + sx={theme => ({ + background: theme.palette.primary.main, height: "100%", left: "50%", position: "absolute", width: "1px" - }} + })} > theme.palette.primary.main, + sx={theme => ({ + background: theme.palette.primary.main, borderRadius: "50%", cursor: "grab", height: "10px", left: "0px", - outline: theme => `2px solid ${theme.palette.background.paper}`, + outline: `2px solid ${theme.palette.background.paper}`, position: "absolute", top: "0px", width: "10px" - }} + })} onMouseDown={onRotate} onDragStart={e => e.preventDefault()} onDrag={e => e.preventDefault()} diff --git a/src/Card/DetailCard/DetailCard.tsx b/src/Card/DetailCard/DetailCard.tsx index 4829f6313..cc0d9f46b 100644 --- a/src/Card/DetailCard/DetailCard.tsx +++ b/src/Card/DetailCard/DetailCard.tsx @@ -142,21 +142,23 @@ function DetailCardHeader({ > - theme.palette.mode === "dark" ? "white" : "black", + sx={theme => ({ + color: "black", fontSize: 20, - fontWeight: 700 - }} + fontWeight: 700, + ...theme.applyStyles("dark", { + color: "white" + }) + })} > {title} theme.palette.text.secondary, + sx={theme => ({ + color: theme.palette.text.secondary, fontSize: 14, fontWeight: 400 - }} + })} > {subtitle} diff --git a/src/Card/SummaryCard/SummaryCard.stories.tsx b/src/Card/SummaryCard/SummaryCard.stories.tsx index b8bec1331..a707c80b0 100644 --- a/src/Card/SummaryCard/SummaryCard.stories.tsx +++ b/src/Card/SummaryCard/SummaryCard.stories.tsx @@ -178,7 +178,9 @@ const MoreActions = ( theme.palette.primary.main }} + sx={theme => ({ + background: theme.palette.primary.main + })} />