feat: update mui 9

package.json

@@ -6,9 +6,9 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@geops/geops-ui": "1.1.0",
-    "@mui/icons-material": "^7.3.9",
-    "@mui/material": "^7.3.9",
+    "@geops/geops-ui": "beta",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
     "re-resizable": "6.11.2",
     "react-icons": "5.6.0",
     "resize-observer-polyfill": "1.5.1"
@@ -21,7 +21,7 @@
     "react-dom": "^19"
   },
   "devDependencies": {
-    "@babel/preset-env": "7.29.3",
+    "@babel/preset-env": "7.29.5",
     "@babel/preset-react": "7.28.5",
     "@commitlint/cli": "20.5.3",
     "@commitlint/config-conventional": "20.5.3",

src/components/StopsFinder/README.md

@@ -34,7 +34,6 @@ const { apiKey } = window;
   />
 
   <StopsFinder
-    map={map}
     apiKey={apiKey}
     onSelect={({ geometry }) => {
       map.getView().setCenter(fromLonLat(geometry.coordinates));

src/components/StopsFinder/StopsFinder.js

@@ -22,6 +22,7 @@ const StyledAutocomplete = styled(Autocomplete)(() => {
 });
 
 const defaultProps = {
+  loadingComp: <CircularProgress size={20} />,
   textFieldProps: {},
 };
 
@@ -31,7 +32,7 @@ function StopsFinder({
   bbox,
   field,
   limit,
-  map,
+  loadingComp = defaultProps.loadingComp,
   mots,
   onSelect,
   radius,
@@ -131,14 +132,17 @@ function StopsFinder({
             label="Search stops"
             {...params}
             {...textFieldProps}
-            InputProps={{
-              ...params.InputProps,
-              endAdornment: (
-                <>
-                  {isLoading && <CircularProgress size={20} />}
-                  {params.InputProps.endAdornment}
-                </>
-              ),
+            slotProps={{
+              ...params.slotProps,
+              input: {
+                ...params.slotProps.input,
+                endAdornment: (
+                  <>
+                    {isLoading && loadingComp}
+                    {params.slotProps.input.endAdornment}
+                  </>
+                ),
+              },
             }}
           />
         );
@@ -147,6 +151,7 @@ function StopsFinder({
         return (
           <StopsFinderOption
             key={option.properties?.name}
+            loadingComp={loadingComp}
             option={option}
             {...liProps}
           />
@@ -155,7 +160,6 @@ function StopsFinder({
       selectOnFocus
       {...props}
       inputValue={inputValue}
-      loading={isLoading}
       onClose={() => {
         setOpen(false);
       }}
@@ -210,12 +214,12 @@ StopsFinder.propTypes = {
   limit: PropTypes.number,
 
   /**
-   * A map.
+   * Component used for loading state in the options list. By default, a MUI CircularProgress is used.
    */
-  map: PropTypes.instanceOf(Map).isRequired,
+  loadingComp: PropTypes.element,
 
   /**
-   * Array or a comma separated list of mode of transpaorts which should be available.
+   * Array or a comma separated list of mode of transports which should be available.
    * Available values : bus, ferry, gondola, tram, rail, funicular, cable_car, subway
    */
   mots: PropTypes.oneOfType([

src/components/StopsFinder/StopsFinderOption.js

@@ -1,4 +1,3 @@
-import { CircularProgress, styled } from "@mui/material";
 import PropTypes from "prop-types";
 import React, { lazy, Suspense } from "react";
 
@@ -19,36 +18,33 @@ const iconForMot = {};
   });
 });
 
-const StyledFlex = styled("div")(() => {
-  return {
-    alignItems: "center",
-    display: "flex",
-    gap: 5,
-  };
-});
-
 function StopsFinderOption({ option, ...props }) {
   return (
-    <Suspense fallback={<CircularProgress size={20} />}>
-      <StyledFlex {...props}>
-        {Object.entries(option.properties?.mot).map(([key, value]) => {
-          if (value) {
+    <Suspense fallback={option.loadingComp}>
+      <div
+        style={{
+          alignItems: "center",
+          display: "flex",
+          gap: 10,
+        }}
+        {...props}
+      >
+        {Object.entries(option.properties?.mot)
+          .filter(([, value]) => {
+            return !!value;
+          })
+          .map(([key]) => {
             const MotIcon = iconForMot[key];
-            return (
-              <StyledFlex key={key}>
-                <MotIcon />
-              </StyledFlex>
-            );
-          }
-          return null;
-        })}
+            return <MotIcon key={key} />;
+          })}
         <span>{option.properties.name}</span>
-      </StyledFlex>
+      </div>
     </Suspense>
   );
 }
 
 StopsFinderOption.propTypes = {
+  loadingComp: PropTypes.element,
   option: PropTypes.object.isRequired,
 };
 

src/components/StopsFinder/__snapshots__/StopsFinder.test.js.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`StopsFinder matches snapshots. 1`] = `
-<div class="MuiAutocomplete-root MuiAutocomplete-fullWidth MuiAutocomplete-hasPopupIcon css-1235akp-MuiAutocomplete-root">
+<div map="[object Object]"
+     class="MuiAutocomplete-root MuiAutocomplete-fullWidth MuiAutocomplete-hasPopupIcon css-1235akp-MuiAutocomplete-root"
+>
   <div class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-cmpglg-MuiFormControl-root-MuiTextField-root">
     <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined css-19qnlrw-MuiFormLabel-root-MuiInputLabel-root"
            data-shrink="false"
@@ -14,7 +16,7 @@ exports[`StopsFinder matches snapshots. 1`] = `
       <input aria-invalid="false"
              autocomplete="off"
              id="_r_0_"
-             class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1dune0f-MuiInputBase-input-MuiOutlinedInput-input"
+             class="MuiInputBase-input MuiOutlinedInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused css-1dune0f-MuiInputBase-input-MuiOutlinedInput-input"
              aria-autocomplete="both"
              aria-expanded="false"
              autocapitalize="none"