fix(MaterialUI): migration of material ui to v6 (#2456)

* fix(MaterialUI): migration of material ui to v6 closes2453 * fix(MaterialUI): migration of material ui to v6 closes2453 * fix(MaterialUI): migration of material ui to v6 closes2453 * fix(MaterialUI): migration of material ui to v6 closes2453
Canadian-Geospatial-Platform · Sep 5, 2024 · 4f52eb0 · 4f52eb0
1 parent 5121c7b
commit 4f52eb0
Show file tree

Hide file tree

Showing 17 changed files with 411 additions and 206 deletions.
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/packages/geoview-core/package.json b/packages/geoview-core/package.json
@@ -46,16 +46,16 @@
     "generate.d.ts": "tsc --noEmit false --skipLibCheck true --declaration --allowJs --emitDeclarationOnly --outDir types"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "@mui/base": "5.0.0-beta.37",
-    "@mui/lab": "5.0.0-alpha.168",
-    "@mui/icons-material": "^5.15.11",
-    "@mui/material": "^5.15.11",
-    "@mui/styles": "^5.15.11",
-    "@mui/system": "^5.15.11",
+    "@mui/lab": "6.0.0-beta.9",
+    "@mui/icons-material": "^6.0.2",
+    "@mui/material": "^6.0.2",
+    "@mui/styles": "^6.0.2",
+    "@mui/system": "^6.0.2",
     "@nieuwlandgeo/sldreader": "^0.3.1",
-    "@mui/x-date-pickers": "^7.6.1",
+    "@mui/x-date-pickers": "^7.15.0",
     "@react-spring/web": "^9.7.3",
     "ajv": "^8.16.0",
     "ajv-errors": "^3.0.0",
@@ -70,7 +70,7 @@
     "linkify-html": "^4.1.1",
     "linkifyjs": "^4.1.0",
     "lodash": "^4.17.21",
-    "material-react-table": "^2.13.0",
+    "material-react-table": "^2.13.2",
     "ol": "^9.2.4",
     "ol-mapbox-style": "^12.2.1",
     "proj4": "^2.7.5",
@@ -116,10 +116,10 @@
     "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime": "^7.17.0",
     "@babel/runtime-corejs3": "^7.17.0",
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.11",
-    "@mui/material": "^5.15.11",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.0.2",
+    "@mui/material": "^6.0.2",
     "@types/create-react-class": "^15.6.3",
     "@types/flux": "^3.1.11",
     "@types/glob": "^7.2.0",

diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx
@@ -99,7 +99,7 @@ export function AppBar(props: AppBarProps): JSX.Element {
 
   const geoviewElement = useAppGeoviewHTMLElement().querySelector('[id^="mapTargetElement-"]') as HTMLElement;
 
-  const { setActiveAppBarTab, setActiveTrapGeoView } = useUIStoreActions();
+  const { setActiveAppBarTab } = useUIStoreActions();
 
   // get store config for app bar to add (similar logic as in footer-bar)
   const appBarConfig = useGeoViewConfig()?.appBar;
@@ -163,21 +163,19 @@ export function AppBar(props: AppBarProps): JSX.Element {
 
       // Get the button panel
       const buttonPanel = buttonPanelGroups[groupName][buttonId];
-      setActiveTrapGeoView(true);
       setActiveAppBarTab(buttonId, groupName, !buttonPanel.panel?.status);
     },
-    [buttonPanelGroups, setActiveAppBarTab, setActiveTrapGeoView]
+    [buttonPanelGroups, setActiveAppBarTab]
   );
 
   const handleGeneralCloseClicked = useCallback(
     (buttonId: string, groupName: string) => {
       // Log
       logger.logTraceUseCallback('APP-BAR - handleGeneralCloseClicked');
 
-      setActiveTrapGeoView(false);
       setActiveAppBarTab(buttonId, groupName, false);
     },
-    [setActiveAppBarTab, setActiveTrapGeoView]
+    [setActiveAppBarTab]
   );
 
   const handleAddButtonPanel = useCallback(

diff --git a/packages/geoview-core/src/core/components/common/focus-trap-container.tsx b/packages/geoview-core/src/core/components/common/focus-trap-container.tsx
@@ -57,7 +57,7 @@ export function FocusTrapContainer({ children, open = false, id, containerType }
   return (
     <FocusTrap open={id === focusItem.activeElementId || open} disableAutoFocus>
       <Box tabIndex={id === focusItem.activeElementId || open ? 0 : -1} sx={{ height: '100%' }}>
-        {containerType === CONTAINER_TYPE.FOOTER_BAR && (
+        {containerType === CONTAINER_TYPE.FOOTER_BAR && activeTrapGeoView && (
           <Button
             id={`${id}-exit-btn`}
             type="text"

diff --git a/packages/geoview-core/src/core/components/common/responsive-grid.tsx b/packages/geoview-core/src/core/components/common/responsive-grid.tsx
@@ -71,8 +71,7 @@ const ResponsiveGridLeftPanel = forwardRef(
     return (
       <Grid
         className={className}
-        item
-        {...getLeftPanelSize(fullWidth, isRightPanelVisible, isEnlarged)}
+        size={getLeftPanelSize(fullWidth, isRightPanelVisible, isEnlarged)}
         sx={{
           ...(!fullWidth && { [theme.breakpoints.down('md')]: { display: isRightPanelVisible ? 'none' : 'block' } }),
           ...(fullWidth && { display: isRightPanelVisible ? 'none' : 'block' }),
@@ -133,9 +132,8 @@ const ResponsiveGridRightPanel = forwardRef(
     const theme = useTheme();
     return (
       <Grid
-        item
         className={className}
-        {...getRightPanelSize(fullWidth, isRightPanelVisible, isEnlarged)}
+        size={getRightPanelSize(fullWidth, isRightPanelVisible, isEnlarged)}
         sx={{
           position: 'relative',
           [theme.breakpoints.up('md')]: { paddingLeft: '1rem' },

diff --git a/packages/geoview-core/src/core/components/data-table/data-table.tsx b/packages/geoview-core/src/core/components/data-table/data-table.tsx
@@ -437,17 +437,19 @@ function DataTable({ data, layerPath, tableHeight = '500px' }: DataTableProps):
     muiTableHeadCellProps: {
       sx: () => sxClasses.tableHeadCell,
     },
+    defaultColumn: {
+      muiFilterTextFieldProps: {
+        sx: () => ({
+          minWidth: '50px',
+        }),
+      },
+    },
     // override z-index of table when table is in fullscreen mode
     muiTablePaperProps: ({ table }) => ({
       style: {
         zIndex: table.getState().isFullScreen ? 999999 : undefined,
       },
     }),
-    muiFilterTextFieldProps: {
-      sx: () => ({
-        minWidth: '50px',
-      }),
-    },
     muiTableBodyProps: {
       sx: (theme) => ({
         // stripe the rows, make odd rows a darker color

diff --git a/packages/geoview-core/src/core/components/details/details-panel.tsx b/packages/geoview-core/src/core/components/details/details-panel.tsx
@@ -442,7 +442,7 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme
       return (
         <Box sx={fullWidth ? sxClasses.rightPanelContainer : { ...sxClasses.rightPanelContainer }}>
           <Grid container sx={sxClasses.rightPanelBtnHolder}>
-            <Grid item xs={6}>
+            <Grid size={{ xs: 6 }}>
               <Box style={{ marginLeft: '1.375rem' }}>
                 {t('details.featureDetailsTitle')
                   .replace('{count}', `${currentFeatureIndex + 1}`)
@@ -460,7 +460,7 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme
                 </IconButton>
               </Box>
             </Grid>
-            <Grid item xs={6}>
+            <Grid size={{ xs: 6 }}>
               <Box sx={{ textAlign: 'right', marginRight: '1.625rem' }}>
                 <IconButton
                   aria-label="backward"

diff --git a/packages/geoview-core/src/core/components/details/feature-info-table.tsx b/packages/geoview-core/src/core/components/details/feature-info-table.tsx
@@ -109,12 +109,10 @@ export function FeatureInfoTable({ featureInfoList }: FeatureInfoTableProps): JS
           }}
           key={`${featureInfoItem.alias} ${index.toString()}`}
         >
-          <Grid item xs="auto" sx={{ fontWeight: 'bold', width: '80% !important' }}>
+          <Grid size={{ xs: 'auto' }} sx={{ fontWeight: 'bold', width: '80% !important' }}>
             {featureInfoItem.alias}
           </Grid>
-          <Grid item sx={{ ml: 'auto', wordWrap: 'break-word', pr: '0.3125rem' }}>
-            {setFeatureItem(featureInfoItem)}
-          </Grid>
+          <Grid sx={{ ml: 'auto', wordWrap: 'break-word', pr: '0.3125rem' }}>{setFeatureItem(featureInfoItem)}</Grid>
         </Grid>
       ))}
       <LightBoxComponent />

diff --git a/packages/geoview-core/src/core/components/geolocator/geo-list.tsx b/packages/geoview-core/src/core/components/geolocator/geo-list.tsx
@@ -93,7 +93,7 @@ export default function GeoList({ geoListItems, searchValue }: GeoListProps): JS
           <ListItem component="div" disablePadding>
             <ListItemButton onClick={() => handleZoomToGeoLocator([geoListItem.lng, geoListItem.lat], geoListItem.bbox)}>
               <Grid container>
-                <Grid item xs={12} sm={8}>
+                <Grid size={{ xs: 12, sm: 8 }}>
                   <Typography sx={sxClassesList.listStyle}>
                     {transformListTitle(
                       geoListItem.name,
@@ -102,7 +102,7 @@ export default function GeoList({ geoListItems, searchValue }: GeoListProps): JS
                     )}
                   </Typography>
                 </Grid>
-                <Grid item xs={12} sm={4} sx={{ textAlign: 'right' }}>
+                <Grid size={{ xs: 12, sm: 4 }} sx={{ textAlign: 'right' }}>
                   {!!geoListItem.category && geoListItem.category !== 'null' && (
                     <Typography component="p" sx={sxClassesList.main}>
                       <Typography component="span"> {geoListItem.category}</Typography>

diff --git a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx
@@ -169,10 +169,8 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
       <Grid container direction="column" spacing={0} sx={sxClasses.itemsGrid} justifyContent="left" justifyItems="stretch">
         {layerDetails.items.length > 1 && (
           <Grid container direction="row" justifyContent="center" alignItems="stretch" justifyItems="stretch">
-            <Grid item xs="auto">
-              {renderHeaderCheckbox()}
-            </Grid>
-            <Grid item xs="auto">
+            <Grid size={{ xs: 'auto' }}>{renderHeaderCheckbox()}</Grid>
+            <Grid size={{ xs: 'auto' }}>
               <Box component="span">{t('general.name')}</Box>
             </Grid>
           </Grid>
@@ -185,10 +183,8 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
             justifyContent="center"
             alignItems="stretch"
           >
-            <Grid item xs="auto">
-              {renderItemCheckbox(item)}
-            </Grid>
-            <Grid item xs="auto">
+            <Grid size={{ xs: 'auto' }}>{renderItemCheckbox(item)}</Grid>
+            <Grid size={{ xs: 'auto' }}>
               {item.icon ? <Box component="img" alt={item.name} src={item.icon} /> : <BrowserNotSupportedIcon />}
               <Box component="span" style={sxClasses.tableIconLabel}>
                 {item.name}

diff --git a/packages/geoview-core/src/core/components/map-info/map-info-style.ts b/packages/geoview-core/src/core/components/map-info/map-info-style.ts
@@ -9,7 +9,6 @@ export const getSxClasses = (theme: Theme): any => ({
     zIndex: 200,
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'space-between',
     alignItems: 'center',
     width: 'calc(100%)',
     minHeight: '35px',
@@ -20,7 +19,6 @@ export const getSxClasses = (theme: Theme): any => ({
     pointerEvents: 'all',
     gap: 0.5,
     order: 3,
-
     fill: `${theme.palette.geoViewColor.grey.dark[900]} !important`,
     position: 'absolute',
     bottom: 0,
@@ -47,6 +45,7 @@ export const getSxClasses = (theme: Theme): any => ({
   mouseScaleControlsContainer: {
     display: 'flex',
     flexDirection: 'row',
+    flexWrap: 'noWrap',
     '& button': {
       cursor: 'pointer',
       margin: 'auto 0 auto auto',

diff --git a/packages/geoview-core/src/core/components/map-info/map-info.tsx b/packages/geoview-core/src/core/components/map-info/map-info.tsx
@@ -47,31 +47,30 @@ export function MapInfo(): JSX.Element {
       ref={mapInfoRef as MutableRefObject<HTMLDivElement>}
     >
       {interaction === 'dynamic' && <MapInfoExpandButton />}
-      <Grid container justifyContent="space-between">
+      <Grid container justifyContent="space-between" size={12}>
         {interaction === 'dynamic' && (
-          <Grid item md={1}>
+          <Grid size={{ md: 1 }}>
             <Attribution />
           </Grid>
         )}
 
-        <Grid container item md={interaction === 'dynamic' ? 11 : 12} spacing={2}>
+        <Grid container spacing={2} size={{ md: interaction === 'dynamic' ? 11 : 12 }}>
           <Grid
             container
-            justifyContent="flex-end"
             sx={{
-              [theme.breakpoints.down('md')]: {
-                marginTop: '-32px',
-              },
+              justifyContent: 'flexEnd',
+              flexWrap: 'nowrap',
+              width: '100%',
             }}
           >
-            <Grid item md={interaction === 'dynamic' ? 10 : 12}>
+            <Grid size={{ md: interaction === 'dynamic' ? 11 : 12 }}>
               <Box id="mouseAndScaleControls" sx={sxClasses.mouseScaleControlsContainer}>
                 {interaction === 'dynamic' && <MousePosition />}
                 <Scale />
               </Box>
             </Grid>
             {interaction === 'dynamic' && (
-              <Grid item md={2}>
+              <Grid size={{ md: 2 }}>
                 <Box
                   sx={{
                     ...sxClasses.rotationControlsContainer,

diff --git a/packages/geoview-core/src/ui/grid/index.ts b/packages/geoview-core/src/ui/grid/index.ts
@@ -1,5 +1,5 @@
-import Grid from '@mui/material/Grid';
-import { GridProps, SxProps } from '@mui/material';
+import Grid2 from '@mui/material/Grid2';
+import { Grid2Props, SxProps } from '@mui/material';
 
-export type { GridProps, SxProps };
-export { Grid };
+export type { Grid2Props as GridProps, SxProps };
+export { Grid2 as Grid };
diff --git a/packages/geoview-core/src/ui/layout/index.ts b/packages/geoview-core/src/ui/layout/index.ts
@@ -1 +1 @@
-export { Box, Container, Dialog, DialogActions, DialogTitle, Grid, Link, Stack, DialogContent } from '@mui/material';
+export { Box, Container, Dialog, DialogActions, DialogTitle, Link, Stack, DialogContent } from '@mui/material';
diff --git a/packages/geoview-core/src/ui/panel/panel.tsx b/packages/geoview-core/src/ui/panel/panel.tsx
@@ -11,7 +11,7 @@ import { logger } from '@/core/utils/logger';
 
 import { TypeIconButtonProps } from '@/ui/icon-button/icon-button-types';
 import { getSxClasses } from './panel-style';
-import { useUIActiveTrapGeoView, useUIMapInfoExpanded } from '@/core/stores/store-interface-and-intial-values/ui-state';
+import { useUIMapInfoExpanded } from '@/core/stores/store-interface-and-intial-values/ui-state';
 import { useMapSize } from '@/core/stores/store-interface-and-intial-values/map-state';
 import { CV_DEFAULT_APPBAR_CORE } from '@/api/config/types/config-constants';
 import { useGeoViewMapId } from '@/core/stores/geoview-store';
@@ -53,8 +53,6 @@ export function Panel(props: TypePanelAppProps): JSX.Element {
   const mapInfoExpanded = useUIMapInfoExpanded();
 
   // internal state
-  // set the active trap value for FocusTrap
-  const activeTrapGeoView = useUIActiveTrapGeoView();
   const panelContainerRef = useRef<HTMLDivElement>(null);
   const panelRef = useRef<HTMLButtonElement>(null);
   const panelHeader = useRef<HTMLButtonElement>(null);
@@ -124,7 +122,7 @@ export function Panel(props: TypePanelAppProps): JSX.Element {
 
   return (
     <Box sx={panelContainerStyles} ref={panelContainerRef}>
-      <FocusTrapContainer open={activeTrapGeoView && open} id="app-bar-focus-trap">
+      <FocusTrapContainer open={open} id="app-bar-focus-trap">
         <Card
           sx={{
             ...sxClasses.panelContainer,

diff --git a/packages/geoview-geochart/package.json b/packages/geoview-geochart/package.json
@@ -16,7 +16,7 @@
     "lodash": "^4.17.21",
     "geoview-core": "workspace:~1.0.0",
     "geochart": "Canadian-Geospatial-Platform/geochart#develop",
-    "@mui/material": "^5.15.11"
+    "@mui/material": "^6.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.17.0",
@@ -45,4 +45,4 @@
   "resolutions": {
     "@types/react": "^18.2.0"
   }
-}
+}
diff --git a/packages/geoview-time-slider/package.json b/packages/geoview-time-slider/package.json
@@ -11,7 +11,7 @@
   "license": "MIT",
   "dependencies": {
     "geoview-core": "workspace:~1.0.0",
-    "@mui/material": "^5.15.11"
+    "@mui/material": "^6.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.17.0",
@@ -39,4 +39,4 @@
   "resolutions": {
     "@types/react": "^18.2.0"
   }
-}
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { Box, Container, Dialog, DialogActions, DialogTitle, Grid, Link, Stack, DialogContent } from '@mui/material';
		export { Box, Container, Dialog, DialogActions, DialogTitle, Link, Stack, DialogContent } from '@mui/material';