@opengeoweb/core 9.29.0 → 9.29.1

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useState, useCallback, useRef } from 'react';
-import { Grid, Box, MenuItem, Typography, useTheme, Popper, Fade, Tooltip, styled, LinearProgress, FormControl, InputLabel, Paper, List, ListItemButton, ListItemText, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, Button, circularProgressClasses, ListItemIcon, Checkbox } from '@mui/material';
+import { Grid2, Box, MenuItem, Typography, useTheme, Popper, Fade, Tooltip, styled, LinearProgress, FormControl, InputLabel, Paper, List, ListItemButton, ListItemText, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, Button, circularProgressClasses, ListItemIcon, Checkbox } from '@mui/material';
 import { SHARED_NAMESPACE, sharedTranslations, CustomIconButton, TooltipSelect, AlertIcon, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomTooltip, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, PROJECTION, calculateStartSize, ToolContainerDraggable, useDebounce, dateUtils, withEggs, ErrorBoundary } from '@opengeoweb/shared';
 import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, CloudLoading, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, WorldMapProjection, Layers, ExitDomain, Info, Search, Exclamation, MyLocation, Close, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import i18n from 'i18next';
@@ -2341,9 +2341,8 @@ const DescriptionRow = _a => {
     })
   }) : undefined);
   const hasMapPresetsModule = mapPresetsModule !== undefined;
-  return jsxs(Grid, Object.assign({
+  return jsxs(Grid2, Object.assign({
     container: true,
-    item: true,
     "data-testid": "descriptionRow",
     sx: {
       height: 40
@@ -2351,8 +2350,7 @@ const DescriptionRow = _a => {
     className: "descriptionRow",
     alignItems: "center"
   }, gridProps, {
-    children: [jsx(Grid, Object.assign({
-      item: true,
+    children: [jsx(Grid2, Object.assign({
       className: columnClasses.column1,
       sx: Object.assign(Object.assign({}, leftButtonsStyle), {
         justifyContent: 'center',
@@ -2363,7 +2361,7 @@ const DescriptionRow = _a => {
         tooltipTitle: (_b = settings === null || settings === void 0 ? void 0 : settings.addLayer) === null || _b === void 0 ? void 0 : _b.tooltipTitle,
         icon: (_c = settings === null || settings === void 0 ? void 0 : settings.addLayer) === null || _c === void 0 ? void 0 : _c.icon
       })
-    })), jsxs(Grid, Object.assign({
+    })), jsxs(Grid2, Object.assign({
       className: columnClasses.column2
     }, {
       children: [jsx(Box, Object.assign({
@@ -2379,7 +2377,7 @@ const DescriptionRow = _a => {
       }, {
         children: mapPresetsModuleInline
       }))]
-    })), jsx(Grid, Object.assign({
+    })), jsx(Grid2, Object.assign({
       className: columnClasses.column3
     }, {
       children: jsx(Box, Object.assign({
@@ -2387,7 +2385,7 @@ const DescriptionRow = _a => {
       }, {
         children: (_g = (_f = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _f === void 0 ? void 0 : _f.title) !== null && _g !== void 0 ? _g : t('layermanager-style-title')
       }))
-    })), jsx(Grid, Object.assign({
+    })), jsx(Grid2, Object.assign({
       className: columnClasses.column4
     }, {
       children: jsx(Box, Object.assign({
@@ -2395,7 +2393,7 @@ const DescriptionRow = _a => {
       }, {
         children: (_j = (_h = settings === null || settings === void 0 ? void 0 : settings.opacity) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : t('layermanager-opacity-title')
       }))
-    })), jsx(Grid, Object.assign({
+    })), jsx(Grid2, Object.assign({
       className: columnClasses.column5
     }, {
       children: jsx(Box, Object.assign({
@@ -2403,7 +2401,7 @@ const DescriptionRow = _a => {
       }, {
         children: (_l = (_k = settings === null || settings === void 0 ? void 0 : settings.dimensions) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : t('layermanager-dimensions-title')
       }))
-    })), jsx(Grid, Object.assign({
+    })), jsx(Grid2, Object.assign({
       className: columnClasses.acceptanceTime
     }, {
       children: jsx(Box, Object.assign({
@@ -2413,7 +2411,7 @@ const DescriptionRow = _a => {
       }, {
         children: (_o = (_m = settings === null || settings === void 0 ? void 0 : settings.acceptanceTime) === null || _m === void 0 ? void 0 : _m.title) !== null && _o !== void 0 ? _o : t('layermanager-acceptance-time')
       }))
-    })), jsx(Grid, Object.assign({
+    })), jsx(Grid2, Object.assign({
       className: columnClasses.loadDuration
     }, {
       children: jsx(Box, Object.assign({
@@ -2424,7 +2422,7 @@ const DescriptionRow = _a => {
       }, {
         children: jsx(CloudLoading, {})
       }))
-    })), jsx(Grid, {
+    })), jsx(Grid2, {
       className: columnClasses.column6
     })]
   }));
@@ -2948,15 +2946,14 @@ const DimensionSelect = ({
   const defaultValueTooltip = (_d = defaultDimensionValueTooltip(selectedDimension)) !== null && _d !== void 0 ? _d : '';
   const nameTooltip = (_e = tooltipGenerator === null || tooltipGenerator === void 0 ? void 0 : tooltipGenerator(selectedDimension)) !== null && _e !== void 0 ? _e : defaultNameTooltip;
   const valueTooltip = (_f = tooltipGenerator === null || tooltipGenerator === void 0 ? void 0 : tooltipGenerator(selectedDimension, true)) !== null && _f !== void 0 ? _f : defaultValueTooltip;
-  return jsx(Grid, Object.assign({
+  return jsx(Grid2, Object.assign({
     container: true,
     direction: "row",
     justifyContent: "flex-start",
     alignItems: "center"
   }, {
-    children: jsxs(Grid, Object.assign({
-      item: true,
-      xs: 12
+    children: jsxs(Grid2, Object.assign({
+      size: 12
     }, {
       children: [collapseDimensionDropdown ? jsx(SingleValueComponent, Object.assign({}, _layerDimensions[0], {
         nameMappings: nameMappings,
@@ -3984,8 +3981,7 @@ const LayerRowUnstyled = ({
     jsx("div", Object.assign({
       className: className
     }, {
-      children: jsxs(Grid, Object.assign({
-        item: true,
+      children: jsxs(Grid2, Object.assign({
         container: true,
         "data-testid": `layerRow-${layerId}`,
         className: "layerRow",
@@ -4028,8 +4024,7 @@ const LayerRowUnstyled = ({
           DeleteLayer: layerDeleteLayout || jsx(DeleteLayer, {
             onClick: deleteLayer
           })
-        }), jsx(Grid, Object.assign({
-          item: true,
+        }), jsx(Grid2, Object.assign({
           className: columnClasses.column1,
           alignItems: "center"
         }, {
@@ -4044,8 +4039,7 @@ const LayerRowUnstyled = ({
             onChangeEnable: changeEnable,
             onChangeActive: onClickRow
           })
-        })), jsx(Grid, Object.assign({
-          item: true,
+        })), jsx(Grid2, Object.assign({
           className: columnClasses.column2
         }, {
           children: layerServicesLayout || jsx(RenderLayers, {
@@ -4058,8 +4052,7 @@ const LayerRowUnstyled = ({
               });
             }
           })
-        })), _isLayerMissing ? jsx(Grid, Object.assign({
-          item: true,
+        })), _isLayerMissing ? jsx(Grid2, Object.assign({
           className: columnClasses.column7
         }, {
           children: jsx(AlertBanner, {
@@ -4067,24 +4060,21 @@ const LayerRowUnstyled = ({
             isCompact: true
           })
         })) : jsxs(Fragment, {
-          children: [jsx(Grid, Object.assign({
-            item: true,
+          children: [jsx(Grid2, Object.assign({
             className: columnClasses.column3
           }, {
             children: layerStylesLayout || jsx(Styles, {
               style: layer.style,
               onChangeStyle: changeStyle
             })
-          })), jsx(Grid, Object.assign({
-            item: true,
+          })), jsx(Grid2, Object.assign({
             className: columnClasses.column4
           }, {
             children: layerOpacityLayout || jsx(Opacity, {
               opacity: layer.opacity,
               onChangeOpacity: changeOpacity
             })
-          })), jsx(Grid, Object.assign({
-            item: true,
+          })), jsx(Grid2, Object.assign({
             className: columnClasses.column5
           }, {
             children: layerDimensionLayout || jsx(DimensionSelect, {
@@ -4101,16 +4091,14 @@ const LayerRowUnstyled = ({
                 });
               }
             })
-          })), jsx(Grid, Object.assign({
-            item: true,
+          })), jsx(Grid2, Object.assign({
             className: columnClasses.acceptanceTime
           }, {
             children: layerAcceptanceTimeLayout || jsx(Acceptance, {
               acceptanceTime: layer.acceptanceTimeInMinutes,
               onChangeAcceptanceTime: changeAcceptanceTime
             })
-          })), jsx(Grid, Object.assign({
-            item: true,
+          })), jsx(Grid2, Object.assign({
             display: "flex",
             justifyContent: "flex-end",
             className: columnClasses.loadDuration
@@ -4120,8 +4108,7 @@ const LayerRowUnstyled = ({
               mapId: mapId
             })
           }))]
-        }), jsxs(Grid, Object.assign({
-          item: true,
+        }), jsxs(Grid2, Object.assign({
           className: columnClasses.column6,
           alignItems: "center"
         }, {
@@ -4195,68 +4182,53 @@ const Accordion = ({
       }))]
     })
   }, {
-    children: jsxs(Grid, Object.assign({
+    children: jsxs(Grid2, Object.assign({
       container: true,
       sx: {
         padding: '16px 32px'
       },
       spacing: 3
     }, {
-      children: [jsxs(Grid, Object.assign({
-        container: true,
-        item: true
+      children: [jsxs(Grid2, Object.assign({
+        container: true
       }, {
-        children: [jsx(Grid, Object.assign({
-          item: true
-        }, {
+        children: [jsx(Grid2, {
           children: t('layermanager-style-title')
-        })), Styles]
-      })), jsxs(Grid, Object.assign({
+        }), Styles]
+      })), jsxs(Grid2, Object.assign({
         container: true,
-        item: true,
         sx: {
           '.MuiButtonBase-root': {
             justifyContent: 'flex-start'
           }
         }
       }, {
-        children: [jsx(Grid, Object.assign({
-          item: true
-        }, {
+        children: [jsx(Grid2, {
           children: t('layermanager-opacity-title')
-        })), Opacity]
-      })), jsxs(Grid, Object.assign({
-        container: true,
-        item: true
+        }), Opacity]
+      })), jsxs(Grid2, Object.assign({
+        container: true
       }, {
-        children: [jsx(Grid, Object.assign({
-          item: true
-        }, {
+        children: [jsx(Grid2, {
           children: t('layermanager-acceptance-time')
-        })), Acceptance]
-      })), jsxs(Grid, Object.assign({
+        }), Acceptance]
+      })), jsxs(Grid2, Object.assign({
         container: true,
-        item: true,
         flexDirection: "column"
       }, {
-        children: [jsx(Grid, Object.assign({
-          item: true
-        }, {
+        children: [jsx(Grid2, {
           children: jsx(CloudLoading, {})
-        })), LoadDuration]
-      })), jsxs(Grid, Object.assign({
+        }), LoadDuration]
+      })), jsxs(Grid2, Object.assign({
         container: true,
-        item: true,
         justifyContent: "center",
         spacing: 2
       }, {
-        children: [jsx(Grid, Object.assign({
-          item: true,
+        children: [jsx(Grid2, Object.assign({
           sx: {}
         }, {
           children: ShowLayerInfo
-        })), jsx(Grid, Object.assign({
-          item: true,
+        })), jsx(Grid2, Object.assign({
           sx: {}
         }, {
           children: DeleteLayer
@@ -5158,9 +5130,8 @@ const LayerContainerRow = /*#__PURE__*/React.memo(_a => {
       });
     }
   }, [layerLength, rowsToDisplay]);
-  return jsx(Grid, Object.assign({
+  return jsx(Grid2, Object.assign({
     container: true,
-    item: true,
     "data-testid": "layerContainerRow",
     className: "layerContainerRow",
     sx: {
@@ -5691,23 +5662,18 @@ const WMSServerList = ({
   };
   const sortedServices = [...availableServices].sort((a, b) => a.name.localeCompare(b.name));
   return jsxs(Fragment, {
-    children: [jsx(Grid, Object.assign({
+    children: [jsx(Grid2, Object.assign({
       container: true,
       direction: "row",
-      spacing: 1,
       style: {
-        height: '34px'
+        height: '26px'
       }
     }, {
-      children: jsx(Grid, Object.assign({
-        item: true
+      children: jsx(InputLabel, Object.assign({
+        shrink: true,
+        htmlFor: "select-multiple-native"
       }, {
-        children: jsx(InputLabel, Object.assign({
-          shrink: true,
-          htmlFor: "select-multiple-native"
-        }, {
-          children: t('add-layer-popup-available-services')
-        }))
+        children: t('add-layer-popup-available-services')
       }))
     })), jsx(Paper, Object.assign({
       style: {
@@ -5741,15 +5707,13 @@ const WMSLayerTreeHeader = ({
   const {
     t
   } = useCoreTranslation();
-  return jsxs(Grid, Object.assign({
+  return jsxs(Grid2, Object.assign({
     container: true,
     direction: "row",
     spacing: 1,
     justifyContent: "space-between"
   }, {
-    children: [jsx(Grid, Object.assign({
-      item: true
-    }, {
+    children: [jsx(Grid2, {
       children: jsx(InputLabel, Object.assign({
         shrink: true,
         htmlFor: "select-multiple-native"
@@ -5758,9 +5722,7 @@ const WMSLayerTreeHeader = ({
           serviceName
         })
       }))
-    })), onClickReload && jsx(Grid, Object.assign({
-      item: true
-    }, {
+    }), onClickReload && jsx(Grid2, {
       children: jsx(CustomIconButton, Object.assign({
         tooltipTitle: t('add-layer-popup-reload-layers'),
         "data-testid": "reloadLayers",
@@ -5768,7 +5730,7 @@ const WMSLayerTreeHeader = ({
       }, {
         children: jsx(Cached, {})
       }))
-    }))]
+    })]
   }));
 };
 
@@ -6270,14 +6232,13 @@ const AddLayersPopup = ({
       }), jsx(Box, Object.assign({
         m: 2
       }, {
-        children: jsx(Grid, Object.assign({
+        children: jsx(Grid2, Object.assign({
           container: true,
           direction: "row",
           alignItems: "center"
         }, {
-          children: jsx(Grid, Object.assign({
-            item: true,
-            xs: 12
+          children: jsx(Grid2, Object.assign({
+            size: 12
           }, {
             children: jsx(TextField, {
               margin: "dense",
@@ -6328,24 +6289,22 @@ const AddLayersPopup = ({
       })), jsx(Box, Object.assign({
         m: 2
       }, {
-        children: jsxs(Grid, Object.assign({
+        children: jsxs(Grid2, Object.assign({
           container: true,
           direction: "row",
           alignItems: "center",
           spacing: 3
         }, {
-          children: [jsx(Grid, Object.assign({
-            item: true,
-            xs: 4
+          children: [jsx(Grid2, Object.assign({
+            size: 4
           }, {
             children: jsx(WMSServerList, {
               availableServices: services,
               service: activeService,
               handleChangeService: handleChangeService
             })
-          })), jsx(Grid, Object.assign({
-            item: true,
-            xs: 8
+          })), jsx(Grid2, Object.assign({
+            size: 8
           }, {
             children: onRenderTree ? onRenderTree(activeService) : jsx(WMSLayerTreeConnect, {
               mapId: "",
@@ -6438,9 +6397,8 @@ const BaseLayerRow = _a => {
     } = _a,
     gridProps = __rest(_a, ["mapId", "preloadedAvailableBaseLayers", "preloadedServices", "tooltip", "settings"]);
   const theme = useTheme();
-  return jsxs(Grid, Object.assign({
+  return jsxs(Grid2, Object.assign({
     container: true,
-    item: true,
     "data-testid": "baseLayerRow",
     className: "addLayer-column",
     sx: Object.assign({
@@ -6448,8 +6406,7 @@ const BaseLayerRow = _a => {
       height: '36px'
     }, theme.palette.geowebColors.layerManager.baseLayerRow.root)
   }, gridProps, {
-    children: [jsxs(Grid, Object.assign({
-      item: true,
+    children: [jsxs(Grid2, Object.assign({
       className: columnClasses.column1,
       sx: [{
         marginTop: '-2px'
@@ -6464,8 +6421,7 @@ const BaseLayerRow = _a => {
           layerType: LayerType.baseLayer
         })
       }), (_d = settings === null || settings === void 0 ? void 0 : settings.baseLayerRow) === null || _d === void 0 ? void 0 : _d.title]
-    })), jsx(Grid, Object.assign({
-      item: true,
+    })), jsx(Grid2, Object.assign({
       className: columnClasses.column2
     }, {
       children: jsx(BaseLayersConnect, {
@@ -6577,7 +6533,7 @@ const ProjectionSelect = ({
   const index = availableProjections.findIndex(projection => projection.value === currentProjection);
   const currentProjectionObject = availableProjections.find(projection => projection.value === currentProjection);
   const title = t('projection-title');
-  return jsxs(Grid, Object.assign({
+  return jsxs(Grid2, Object.assign({
     container: true,
     className: "setProjection-column",
     sx: {
@@ -6585,8 +6541,7 @@ const ProjectionSelect = ({
       height: '36px'
     }
   }, {
-    children: [jsx(Grid, Object.assign({
-      item: true,
+    children: [jsx(Grid2, Object.assign({
       className: columnClasses.column1,
       sx: [{
         marginTop: '-2px'
@@ -6601,8 +6556,7 @@ const ProjectionSelect = ({
       }, {
         children: jsx(WorldMapProjection, {})
       }))
-    })), jsx(Grid, Object.assign({
-      item: true,
+    })), jsx(Grid2, Object.assign({
       className: columnClasses.column2
     }, {
       children: jsx(FormControl, Object.assign({
@@ -6802,7 +6756,7 @@ const LayerManager = ({
             title: error,
             shouldClose: true
           })
-        })), jsxs(Grid, Object.assign({
+        })), jsxs(Grid2, Object.assign({
           container: true,
           "data-testid": "layerManagerRowContainer",
           sx: styles$1.layerRowContainer
@@ -8382,7 +8336,7 @@ const GetFeatureInfoDialog = ({
           if (!result) {
             return null;
           }
-          return jsxs(Grid, Object.assign({
+          return jsxs(Grid2, Object.assign({
             sx: {
               margin: '4px 6px 4px 6px',
               padding: '6px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "9.29.0",
+  "version": "9.29.1",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {

package/src/lib/components/LanguageSelect/Languages.stories.d.ts

@@ -1,9 +1,10 @@
+import * as React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const Languages: {
-    (): JSX.Element;
+    (): React.ReactElement;
     parameters: {
         layout: string;
     };

package/src/lib/components/LayerManager/BaseLayerRow/BaseLayerRow.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Grid } from '@mui/material';
+import { Grid2 as Grid } from '@mui/material';
 import { layerTypes, serviceTypes } from '@opengeoweb/store';
 import { LayerManagerCustomSettings } from '../LayerManagerUtils';
 interface BaseLayerRowProps extends React.ComponentProps<typeof Grid> {

package/src/lib/components/LayerManager/DescriptionRow/DescriptionRow.d.ts

@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material';
+import { Grid2 as Grid } from '@mui/material';
 import * as React from 'react';
 import { uiTypes } from '@opengeoweb/store';
 import { LayerManagerCustomSettings } from '../LayerManagerUtils';

package/src/lib/components/LayerManager/LayerContainerRow/LayerContainerRow.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Grid } from '@mui/material';
+import { Grid2 as Grid } from '@mui/material';
 import { LayerManagerCustomSettings } from '../LayerManagerUtils';
 interface LayerContainerRowProps extends React.ComponentProps<typeof Grid> {
     mapId: string;

package/src/lib/components/TimeSliderConnect/TimeSliderButtonsConnect/BackwardForwardStepButtonConnect.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 export interface BackwardForwardStepButtonConnectProps {
     mapId: string;
     isForwardStep?: boolean;
 }
-export declare const BackwardForwardStepButtonConnect: ({ isForwardStep, mapId, }: BackwardForwardStepButtonConnectProps) => JSX.Element;
+export declare const BackwardForwardStepButtonConnect: ({ isForwardStep, mapId, }: BackwardForwardStepButtonConnectProps) => React.ReactElement;

package/src/lib/components/TimeSliderConnect/TimeSliderButtonsConnect/SpeedButtonConnect.d.ts

@@ -1,5 +1,6 @@
+import * as React from 'react';
 interface SpeedButtonConnectProps {
     mapId: string;
 }
-export declare const SpeedButtonConnect: ({ mapId, }: SpeedButtonConnectProps) => JSX.Element;
+export declare const SpeedButtonConnect: ({ mapId, }: SpeedButtonConnectProps) => React.ReactElement;
 export {};

package/src/lib/components/TimeSliderConnect/TimeSliderButtonsConnect/TimeSpanButtonConnect.d.ts

@@ -1,4 +1,5 @@
+import * as React from 'react';
 export interface TimeSpanButtonConnectProps {
     mapId: string;
 }
-export declare const TimeSpanButtonConnect: ({ mapId, }: TimeSpanButtonConnectProps) => JSX.Element;
+export declare const TimeSpanButtonConnect: ({ mapId, }: TimeSpanButtonConnectProps) => React.ReactElement;