react-spatial 1.8.2 → 1.9.0

package/README.md

@@ -2,11 +2,10 @@
 
 [![npm](https://img.shields.io/npm/v/react-spatial.svg?style=flat-square)](https://www.npmjs.com/package/react-spatial)
 [![build](https://github.com/geops/react-spatial/workflows/main/badge.svg)](https://github.com/geops/react-spatial/actions?query=workflow%3Amain)
-[![Renovate](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 ![Vercel](https://vercelbadge.vercel.app/api/geops/react-spatial)
 
-This library provides React components to build web applications and to visualize real-time geographical information based on [OpenLayers](https://openlayers.org/) and [Mapbox GL](https://docs.mapbox.com/mapbox-gl-js/api/).
+This library provides React components to build web applications and to visualize real-time geographical information based on [OpenLayers](https://openlayers.org/) and [Malibre GL](https://maplibre.org/maplibre-gl-js/).
 
 This library uses the [mobility-toolbox-js](https://mobility-toolbox-js.geops.io/) library.
 

package/components/Geolocation/Geolocation.js

@@ -99,17 +99,17 @@ class Geolocation extends PureComponent {
     const { onError } = this.props;
     const geolocation = "geolocation" in navigator;
     if (!geolocation) {
-      onError();
+      onError(new Error("Geolocation not supported"));
     } else if (!active) {
       this.activate();
     } else {
       this.deactivate();
     }
   }
-  error() {
+  error(error) {
     const { onError } = this.props;
     this.deactivate();
-    onError();
+    onError(error);
   }
   deactivate() {
     const { map, onDeactivate } = this.props;

package/components/Geolocation/Geolocation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Geolocation/Geolocation.js"],
-  "sourcesContent": ["import React, { PureComponent } from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport OLMap from \"ol/Map\";\nimport { transform } from \"ol/proj\";\nimport Point from \"ol/geom/Point\";\nimport Feature from \"ol/Feature\";\nimport { unByKey } from \"ol/Observable\";\n\nimport Style from \"ol/style/Style\";\nimport Circle from \"ol/style/Circle\";\nimport Fill from \"ol/style/Fill\";\nimport Stroke from \"ol/style/Stroke\";\n\nimport VectorLayer from \"ol/layer/Vector\";\nimport VectorSource from \"ol/source/Vector\";\n\nimport { FaRegDotCircle } from \"react-icons/fa\";\n\nconst propTypes = {\n  /**\n   * CSS class of the button.\n   */\n  className: PropTypes.string,\n\n  /**\n   *  Children content of the Geolocation button.\n   */\n  children: PropTypes.node,\n\n  /**\n   * An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).\n   */\n  map: PropTypes.instanceOf(OLMap).isRequired,\n\n  /**\n   * Function triggered when geolocating is not successful.\n   */\n  onError: PropTypes.func,\n\n  /**\n   * Function triggered after successful geoLocation calls. Takes the ol/map, the current lat/lon coordinate and the component instance as arguments.\n   */\n  onSuccess: PropTypes.func,\n\n  /**\n   * Function triggered after the geolocation is activated. Takes the ol/map and the component instance as arguments.\n   */\n  onActivate: PropTypes.func,\n\n  /**\n   * Function triggered after the geolocation is deactivated. Takes the ol/map and the component instance as arguments..\n   */\n  onDeactivate: PropTypes.func,\n\n  /**\n   * If true, the map is not centered after it has been dragged once.\n   */\n  noCenterAfterDrag: PropTypes.bool,\n\n  /**\n   * If true, the map will center once on the position then will constantly recenter to the current Position.\n   * If false, the map will center once on the position then will never recenter if the position changes.\n   */\n  alwaysRecenterToPosition: PropTypes.bool,\n\n  /**\n   * If true, the map will never center to the current position\n   */\n  neverCenterToPosition: PropTypes.bool,\n\n  /**\n   * Color (Number array with rgb values) or style function.\n   * If a color is given, the style is animated.\n   */\n  colorOrStyleFunc: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.number),\n    PropTypes.func,\n  ]),\n};\n\nconst defaultProps = {\n  className: \"rs-geolocation\",\n  children: <FaRegDotCircle focusable={false} />,\n  onError: () => {},\n  onSuccess: () => {},\n  onActivate: () => {},\n  onDeactivate: () => {},\n  noCenterAfterDrag: false,\n  alwaysRecenterToPosition: true,\n  neverCenterToPosition: false,\n  colorOrStyleFunc: [235, 0, 0],\n};\n\n/**\n * The GeoLocation component creates a button to display the current device's location on an\n * [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).\n */\nclass Geolocation extends PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.layer = new VectorLayer({\n      source: new VectorSource(),\n    });\n\n    this.isRecenteringToPosition = true;\n\n    this.state = {\n      active: false,\n    };\n    this.point = undefined;\n  }\n\n  componentWillUnmount() {\n    this.deactivate();\n  }\n\n  toggle() {\n    const { active } = this.state;\n    const { onError } = this.props;\n    const geolocation = \"geolocation\" in navigator;\n\n    if (!geolocation) {\n      onError();\n    } else if (!active) {\n      this.activate();\n    } else {\n      this.deactivate();\n    }\n  }\n\n  error() {\n    const { onError } = this.props;\n\n    this.deactivate();\n    onError();\n  }\n\n  deactivate() {\n    const { map, onDeactivate } = this.props;\n    window.clearInterval(this.interval);\n    this.layer.setMap(null);\n    navigator.geolocation.clearWatch(this.watch);\n\n    this.setState({\n      active: false,\n    });\n\n    this.isRecenteringToPosition = true;\n    this.point = undefined;\n    onDeactivate(map, this);\n    unByKey(this.dragListener);\n  }\n\n  activate() {\n    const { map, noCenterAfterDrag, onActivate } = this.props;\n\n    this.projection = map.getView().getProjection().getCode();\n    this.point = new Point([0, 0]);\n    this.highlight();\n    this.layer.setMap(map);\n    this.setState({ active: true });\n\n    this.watch = navigator.geolocation.watchPosition(\n      this.update.bind(this),\n      this.error.bind(this),\n      {\n        enableHighAccuracy: true,\n      },\n    );\n\n    if (noCenterAfterDrag) {\n      this.dragListener = map.on(\"pointerdrag\", () => {\n        this.isRecenteringToPosition = false;\n      });\n    }\n\n    onActivate(map, this);\n  }\n\n  update({ coords: { latitude, longitude } }) {\n    const { map, alwaysRecenterToPosition, neverCenterToPosition, onSuccess } =\n      this.props;\n\n    const position = transform(\n      [longitude, latitude],\n      \"EPSG:4326\",\n      this.projection,\n    );\n    this.point.setCoordinates(position);\n\n    if (!neverCenterToPosition && this.isRecenteringToPosition) {\n      map.getView().setCenter(position);\n      if (!alwaysRecenterToPosition) {\n        this.isRecenteringToPosition = false;\n      }\n    }\n\n    onSuccess(map, [latitude, longitude], this);\n  }\n\n  highlight() {\n    const { colorOrStyleFunc } = this.props;\n    const feature = new Feature({\n      geometry: this.point,\n    });\n\n    if (Array.isArray(colorOrStyleFunc)) {\n      const color = colorOrStyleFunc;\n\n      let decrease = true;\n      let opacity = 0.5;\n      let rotation = 0;\n\n      window.clearInterval(this.interval);\n      this.interval = window.setInterval(() => {\n        rotation += 0.03;\n        decrease = opacity < 0.1 ? false : decrease;\n        decrease = opacity > 0.5 ? true : decrease;\n        opacity += decrease ? -0.03 : 0.03;\n        if (feature) {\n          feature.changed();\n        }\n      }, 50);\n\n      feature.setStyle(() => {\n        const circleStyle = new Style({\n          image: new Circle({\n            radius: 20,\n            rotation,\n            fill: new Fill({\n              color: \"rgba(255, 255, 255, 0.01)\",\n            }),\n            stroke: new Stroke({\n              lineDash: [30, 10],\n              width: 6,\n              color: `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${opacity})`,\n            }),\n          }),\n        });\n\n        circleStyle.getImage().setRotation(rotation);\n\n        return [\n          new Style({\n            image: new Circle({\n              radius: 10,\n              fill: new Fill({\n                color: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.5)`,\n              }),\n            }),\n          }),\n          circleStyle,\n        ];\n      });\n    } else {\n      feature.setStyle(colorOrStyleFunc);\n    }\n\n    this.layer.getSource().clear();\n    this.layer.getSource().addFeature(feature);\n  }\n\n  render() {\n    const { children, className } = this.props;\n    // Remove component props from other HTML props.\n    const other = Object.entries(this.props).reduce((props, [key, value]) => {\n      return propTypes[key] ? props : { ...props, [key]: value };\n    }, {});\n    const { active } = this.state;\n\n    return (\n      <div\n        role=\"button\"\n        tabIndex=\"0\"\n        className={`${className} ${active ? \"rs-active\" : \"\"}`}\n        onClick={() => {\n          return this.toggle();\n        }}\n        onKeyPress={(e) => {\n          return e.which === 13 && this.toggle();\n        }}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...other}\n      >\n        {children}\n      </div>\n    );\n  }\n}\n\nGeolocation.propTypes = propTypes;\nGeolocation.defaultProps = defaultProps;\n\nexport default Geolocation;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { PureComponent } from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport OLMap from \"ol/Map\";\nimport { transform } from \"ol/proj\";\nimport Point from \"ol/geom/Point\";\nimport Feature from \"ol/Feature\";\nimport { unByKey } from \"ol/Observable\";\n\nimport Style from \"ol/style/Style\";\nimport Circle from \"ol/style/Circle\";\nimport Fill from \"ol/style/Fill\";\nimport Stroke from \"ol/style/Stroke\";\n\nimport VectorLayer from \"ol/layer/Vector\";\nimport VectorSource from \"ol/source/Vector\";\n\nimport { FaRegDotCircle } from \"react-icons/fa\";\n\nconst propTypes = {\n  /**\n   * CSS class of the button.\n   */\n  className: PropTypes.string,\n\n  /**\n   *  Children content of the Geolocation button.\n   */\n  children: PropTypes.node,\n\n  /**\n   * An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).\n   */\n  map: PropTypes.instanceOf(OLMap).isRequired,\n\n  /**\n   * Function triggered when geolocating is not successful.\n   */\n  onError: PropTypes.func,\n\n  /**\n   * Function triggered after successful geoLocation calls. Takes the ol/map, the current lat/lon coordinate and the component instance as arguments.\n   */\n  onSuccess: PropTypes.func,\n\n  /**\n   * Function triggered after the geolocation is activated. Takes the ol/map and the component instance as arguments.\n   */\n  onActivate: PropTypes.func,\n\n  /**\n   * Function triggered after the geolocation is deactivated. Takes the ol/map and the component instance as arguments..\n   */\n  onDeactivate: PropTypes.func,\n\n  /**\n   * If true, the map is not centered after it has been dragged once.\n   */\n  noCenterAfterDrag: PropTypes.bool,\n\n  /**\n   * If true, the map will center once on the position then will constantly recenter to the current Position.\n   * If false, the map will center once on the position then will never recenter if the position changes.\n   */\n  alwaysRecenterToPosition: PropTypes.bool,\n\n  /**\n   * If true, the map will never center to the current position\n   */\n  neverCenterToPosition: PropTypes.bool,\n\n  /**\n   * Color (Number array with rgb values) or style function.\n   * If a color is given, the style is animated.\n   */\n  colorOrStyleFunc: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.number),\n    PropTypes.func,\n  ]),\n};\n\nconst defaultProps = {\n  className: \"rs-geolocation\",\n  children: <FaRegDotCircle focusable={false} />,\n  onError: () => {},\n  onSuccess: () => {},\n  onActivate: () => {},\n  onDeactivate: () => {},\n  noCenterAfterDrag: false,\n  alwaysRecenterToPosition: true,\n  neverCenterToPosition: false,\n  colorOrStyleFunc: [235, 0, 0],\n};\n\n/**\n * The GeoLocation component creates a button to display the current device's location on an\n * [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).\n */\nclass Geolocation extends PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.layer = new VectorLayer({\n      source: new VectorSource(),\n    });\n\n    this.isRecenteringToPosition = true;\n\n    this.state = {\n      active: false,\n    };\n    this.point = undefined;\n  }\n\n  componentWillUnmount() {\n    this.deactivate();\n  }\n\n  toggle() {\n    const { active } = this.state;\n    const { onError } = this.props;\n    const geolocation = \"geolocation\" in navigator;\n\n    if (!geolocation) {\n      onError(new Error(\"Geolocation not supported\"));\n    } else if (!active) {\n      this.activate();\n    } else {\n      this.deactivate();\n    }\n  }\n\n  error(error) {\n    const { onError } = this.props;\n\n    this.deactivate();\n    onError(error);\n  }\n\n  deactivate() {\n    const { map, onDeactivate } = this.props;\n    window.clearInterval(this.interval);\n    this.layer.setMap(null);\n    navigator.geolocation.clearWatch(this.watch);\n\n    this.setState({\n      active: false,\n    });\n\n    this.isRecenteringToPosition = true;\n    this.point = undefined;\n    onDeactivate(map, this);\n    unByKey(this.dragListener);\n  }\n\n  activate() {\n    const { map, noCenterAfterDrag, onActivate } = this.props;\n\n    this.projection = map.getView().getProjection().getCode();\n    this.point = new Point([0, 0]);\n    this.highlight();\n    this.layer.setMap(map);\n    this.setState({ active: true });\n\n    this.watch = navigator.geolocation.watchPosition(\n      this.update.bind(this),\n      this.error.bind(this),\n      {\n        enableHighAccuracy: true,\n      },\n    );\n\n    if (noCenterAfterDrag) {\n      this.dragListener = map.on(\"pointerdrag\", () => {\n        this.isRecenteringToPosition = false;\n      });\n    }\n\n    onActivate(map, this);\n  }\n\n  update({ coords: { latitude, longitude } }) {\n    const { map, alwaysRecenterToPosition, neverCenterToPosition, onSuccess } =\n      this.props;\n\n    const position = transform(\n      [longitude, latitude],\n      \"EPSG:4326\",\n      this.projection,\n    );\n    this.point.setCoordinates(position);\n\n    if (!neverCenterToPosition && this.isRecenteringToPosition) {\n      map.getView().setCenter(position);\n      if (!alwaysRecenterToPosition) {\n        this.isRecenteringToPosition = false;\n      }\n    }\n\n    onSuccess(map, [latitude, longitude], this);\n  }\n\n  highlight() {\n    const { colorOrStyleFunc } = this.props;\n    const feature = new Feature({\n      geometry: this.point,\n    });\n\n    if (Array.isArray(colorOrStyleFunc)) {\n      const color = colorOrStyleFunc;\n\n      let decrease = true;\n      let opacity = 0.5;\n      let rotation = 0;\n\n      window.clearInterval(this.interval);\n      this.interval = window.setInterval(() => {\n        rotation += 0.03;\n        decrease = opacity < 0.1 ? false : decrease;\n        decrease = opacity > 0.5 ? true : decrease;\n        opacity += decrease ? -0.03 : 0.03;\n        if (feature) {\n          feature.changed();\n        }\n      }, 50);\n\n      feature.setStyle(() => {\n        const circleStyle = new Style({\n          image: new Circle({\n            radius: 20,\n            rotation,\n            fill: new Fill({\n              color: \"rgba(255, 255, 255, 0.01)\",\n            }),\n            stroke: new Stroke({\n              lineDash: [30, 10],\n              width: 6,\n              color: `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${opacity})`,\n            }),\n          }),\n        });\n\n        circleStyle.getImage().setRotation(rotation);\n\n        return [\n          new Style({\n            image: new Circle({\n              radius: 10,\n              fill: new Fill({\n                color: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.5)`,\n              }),\n            }),\n          }),\n          circleStyle,\n        ];\n      });\n    } else {\n      feature.setStyle(colorOrStyleFunc);\n    }\n\n    this.layer.getSource().clear();\n    this.layer.getSource().addFeature(feature);\n  }\n\n  render() {\n    const { children, className } = this.props;\n    // Remove component props from other HTML props.\n    const other = Object.entries(this.props).reduce((props, [key, value]) => {\n      return propTypes[key] ? props : { ...props, [key]: value };\n    }, {});\n    const { active } = this.state;\n\n    return (\n      <div\n        role=\"button\"\n        tabIndex=\"0\"\n        className={`${className} ${active ? \"rs-active\" : \"\"}`}\n        onClick={() => {\n          return this.toggle();\n        }}\n        onKeyPress={(e) => {\n          return e.which === 13 && this.toggle();\n        }}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...other}\n      >\n        {children}\n      </div>\n    );\n  }\n}\n\nGeolocation.propTypes = propTypes;\nGeolocation.defaultProps = defaultProps;\n\nexport default Geolocation;\n"],
+  "mappings": "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",
   "names": []
 }

package/components/LayerTree/LayerTree.js

@@ -71,6 +71,10 @@ const propTypes = {
    * @return {node} A jsx node.
    */
   renderLabel: PropTypes.func,
+  /**
+   * Custom function to render the checkbox.
+   */
+  renderCheckbox: PropTypes.func,
   /**
    * Object holding title for the layer tree's buttons.
    */
@@ -118,6 +122,7 @@ const defaultProps = {
   renderItemContent: null,
   renderBeforeItem: null,
   renderAfterItem: null,
+  renderCheckbox: null,
   renderLabel: (layer, layerComp) => {
     const { t } = layerComp.props;
     return t(layer.name);
@@ -244,7 +249,7 @@ class LayerTree extends Component {
     return expLayers;
   }
   renderInput(layer, inputProps) {
-    const { titles, isItemHidden } = this.props;
+    const { titles, isItemHidden, renderCheckbox } = this.props;
     let tabIndex = 0;
     if (!(layer.children || []).filter((c) => {
       return !isItemHidden(c);
@@ -252,7 +257,7 @@ class LayerTree extends Component {
       tabIndex = -1;
     }
     const inputType = layer.get("group") ? "radio" : "checkbox";
-    return (
+    return renderCheckbox ? renderCheckbox(layer, this, inputProps) : (
       // eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/no-noninteractive-element-interactions
       /* @__PURE__ */ React.createElement(
         "label",

package/components/LayerTree/LayerTree.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/LayerTree/LayerTree.js"],
-  "sourcesContent": ["import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Layer, getLayersAsFlatArray } from \"mobility-toolbox-js/ol\";\nimport { unByKey } from \"ol/Observable\";\n\nconst propTypes = {\n  /**\n   * Layers provider.\n   */\n  layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)),\n\n  /**\n   * CSS class to apply on the container.\n   */\n  className: PropTypes.string,\n\n  /**\n   * Padding left to apply on each level.\n   */\n  padding: PropTypes.number,\n\n  /**\n   * Determine if the item is hidden in the tree or not.\n   *\n   * @param {object} item The item to hide or not.\n   *\n   * @return {bool} true if the item is not displayed in the tree\n   */\n  isItemHidden: PropTypes.func,\n\n  /**\n   * Determine the className used by the div containing the parent and its children.\n   */\n  getParentClassName: PropTypes.func,\n\n  /**\n   * Custom function to render an item in the tree.\n   *\n   * @param {object} item The item to render.\n   *\n   * @return {node} A jsx node.\n   */\n  renderItem: PropTypes.func,\n\n  /**\n   * Custom function to render only the content of an item in the tree.\n   * inputProps und toggleProps can be used when calling the default renderItemContent function\n   * (comp.renderItemContent(layer, inputProps, toggleProps)) to overwrite the default input and label props\n   *\n   * @param {Layer} layer The layer the item content is created for\n   * @param {LayerTree} comp The LayerTree component.\n   *\n   * @return {node} A jsx node.\n   */\n  renderItemContent: PropTypes.func,\n\n  /**\n   * Custom function to render custom content before the list of children of an item.\n   *\n   * @param {object} item The item to render.\n   *\n   * @return {node} A jsx node.\n   */\n  renderBeforeItem: PropTypes.func,\n\n  /**\n   * Custom function to render custom content after the list of children of an item.\n   *\n   * @param {object} item The item to render.\n   *\n   * @return {node} A jsx node.\n   */\n  renderAfterItem: PropTypes.func,\n\n  /**\n   * Custom function to render the label.\n   *\n   * @param {string} item The label to render.\n   * @param {LayerTree} comp The LayerTree component.\n   *\n   * @return {node} A jsx node.\n   */\n  renderLabel: PropTypes.func,\n\n  /**\n   * Object holding title for the layer tree's buttons.\n   */\n  titles: PropTypes.shape({\n    /**\n     * aria-label on checkbox to show layer.\n     */\n    layerShow: PropTypes.string,\n    /**\n     * aria-label on checkbox to hide layer.\n     */\n    layerHide: PropTypes.string,\n    /**\n     * title on button to show sublayers.\n     */\n    subLayerShow: PropTypes.string,\n    /**\n     * title on button to show sublayers.\n     */\n    subLayerHide: PropTypes.string,\n  }),\n\n  /**\n   * Boolean determining whether children collapse/expand when their parent is toggled\n   * @param {...(boolean|function)} expandChildren Boolean or function returning a boolean.\n   * @return {boolean} True or false\n   */\n  expandChildren: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),\n\n  /**\n   * Translation function.\n   * @param {function} Translation function returning the translated string.\n   */\n  t: PropTypes.func,\n};\n\nconst defaultProps = {\n  layers: [],\n  className: \"rs-layer-tree\",\n  padding: 30,\n  isItemHidden: () => {\n    return false;\n  },\n  getParentClassName: () => {\n    return undefined;\n  },\n  renderItem: null,\n  renderItemContent: null,\n  renderBeforeItem: null,\n  renderAfterItem: null,\n  renderLabel: (layer, layerComp) => {\n    const { t } = layerComp.props;\n    return t(layer.name);\n  },\n  titles: {\n    layerShow: \"Show layer\",\n    layerHide: \"Hide layer\",\n    subLayerShow: \"Show sublayer\",\n    subLayerHide: \"Hide sublayer\",\n  },\n  t: (s) => {\n    return s;\n  },\n  expandChildren: false,\n};\n\n/**\n * The LayerTree component renders an interface for toggling\n * [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers)\n * and their corresponding child layers.\n */\n\nclass LayerTree extends Component {\n  constructor(props) {\n    super(props);\n\n    const { layers, isItemHidden } = this.props;\n    const initialExpandedLayers = layers\n      ? this.getExpandedLayers(\n          layers.filter((l) => {\n            return (\n              !isItemHidden(l) &&\n              (l.children || [])\n                .filter((child) => {\n                  return child.visible;\n                })\n                .filter((c) => {\n                  return !isItemHidden(c);\n                }).length\n            );\n          }),\n        )\n      : [];\n\n    this.state = {\n      rootLayer: new Layer(),\n      expandedLayers: initialExpandedLayers,\n      revision: 0,\n    };\n    // this.updateLayers = this.updateLayers.bind(this);\n    this.olKeys = [];\n  }\n\n  componentDidMount() {\n    this.updateLayers();\n  }\n\n  componentDidUpdate(prevProps) {\n    const { layers } = this.props;\n\n    if (layers !== prevProps.layers) {\n      this.updateLayers();\n    }\n  }\n\n  componentWillUnmount() {\n    unByKey(this.olKeys);\n    this.olKeys = [];\n  }\n\n  onInputClick(layer, toggle = false) {\n    if (toggle) {\n      this.onToggle(layer);\n    } else if (layer.setVisible) {\n      layer.setVisible(!layer.visible);\n    } else {\n      // eslint-disable-next-line no-param-reassign\n      layer.visible = !layer.visible;\n    }\n  }\n\n  onToggle(layer) {\n    const { expandedLayers } = this.state;\n    const pos = expandedLayers.indexOf(layer);\n    if (pos > -1) {\n      expandedLayers.splice(pos, 1);\n    } else {\n      expandedLayers.push(...this.getExpandedLayers([layer]));\n    }\n    this.setState({ expandedLayers });\n  }\n\n  /**\n   * Get the always expanded ancestors (isAlwaysExpanded=true) of the given layers\n   * together with the (given) initially expanded layers\n   *\n   * @param  {Layer} layers Initially expanded layers\n   * @return {Array.<Layer>} Initially expanded layers and all its always expanded ancestors\n   */\n  getExpandedLayers(layers) {\n    const { isItemHidden } = this.props;\n    const children = layers.flatMap((l) => {\n      return l.children.filter((c) => {\n        return !isItemHidden(c) && c.get(\"isAlwaysExpanded\");\n      });\n    });\n\n    if (!children.length) {\n      return layers;\n    }\n    return [...layers, this.getExpandedLayers(children)].flat();\n  }\n\n  updateLayers() {\n    const { layers, expandChildren } = this.props;\n\n    // Update the root layer\n    let rootLayer = new Layer();\n    if (Array.isArray(layers)) {\n      if (layers.length === 1) {\n        [rootLayer] = layers;\n      }\n      rootLayer = new Layer({ children: layers });\n    } else {\n      rootLayer = layers;\n    }\n\n    getLayersAsFlatArray(rootLayer).forEach((layer) => {\n      this.olKeys.push(\n        layer.on(\"propertychange\", () => {\n          const { revision } = this.state;\n          this.setState({ revision: revision + 1 });\n        }),\n      );\n    });\n\n    const state = { rootLayer };\n    if (\n      typeof expandChildren === \"function\"\n        ? expandChildren(layers)\n        : expandChildren\n    ) {\n      state.expandedLayers = rootLayer.children.flatMap((l) => {\n        return this.expandLayer(l);\n      });\n    }\n\n    this.setState(state);\n  }\n\n  expandLayer(layer, expLayers = []) {\n    const { isItemHidden } = this.props;\n    if (layer.visible && !isItemHidden(layer)) {\n      const children = layer.children\n        .filter((c) => {\n          return !isItemHidden(c) && !c.get(\"isAlwaysExpanded\");\n        })\n        .flatMap((c) => {\n          return this.expandLayer(c, expLayers);\n        });\n      return [...expLayers, ...children, layer];\n    }\n    return expLayers;\n  }\n\n  renderInput(layer, inputProps) {\n    const { titles, isItemHidden } = this.props;\n    let tabIndex = 0;\n\n    if (\n      !(layer.children || []).filter((c) => {\n        return !isItemHidden(c);\n      }).length\n    ) {\n      // We forbid focus on keypress event for first level layers and layers without children.\n      tabIndex = -1;\n    }\n\n    const inputType = layer.get(\"group\") ? \"radio\" : \"checkbox\";\n    return (\n      // eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/no-noninteractive-element-interactions\n      <label\n        className={`rs-layer-tree-input rs-layer-tree-input-${inputType} rs-${inputType}`}\n        tabIndex={tabIndex}\n        title={layer.visible ? titles.layerHide : titles.layerShow}\n        aria-label={layer.visible ? titles.layerHide : titles.layerShow}\n        onKeyPress={(e) => {\n          if (e.which === 13) {\n            this.onInputClick(layer);\n          }\n        }}\n      >\n        <input\n          type={inputType}\n          tabIndex={-1}\n          checked={layer.visible}\n          readOnly\n          onClick={() => {\n            return this.onInputClick(layer);\n          }}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...inputProps}\n        />\n        <span />\n      </label>\n    );\n  }\n\n  renderArrow(layer) {\n    const { isItemHidden } = this.props;\n    const { expandedLayers } = this.state;\n\n    if (\n      !(layer.children || []).filter((c) => {\n        return !isItemHidden(c);\n      }).length ||\n      layer.get(\"isAlwaysExpanded\")\n    ) {\n      return null;\n    }\n\n    return (\n      <div\n        className={`rs-layer-tree-arrow rs-layer-tree-arrow-${\n          !expandedLayers.includes(layer) ? \"collapsed\" : \"expanded\"\n        }`}\n      />\n    );\n  }\n\n  // Render a button which expands/collapse the layer if there is children\n  // or simulate a click on the input otherwise.\n  renderToggleButton(layer, toggleProps) {\n    const { t, titles, isItemHidden, renderLabel } = this.props;\n    const { expandedLayers } = this.state;\n\n    const onInputClick = () => {\n      this.onInputClick(\n        layer,\n        (layer.children || []).filter((c) => {\n          return !isItemHidden(c);\n        }).length && !layer.get(\"isAlwaysExpanded\"),\n      );\n    };\n    const title = `${t(layer.name)} ${\n      expandedLayers.includes(layer) ? titles.subLayerHide : titles.subLayerShow\n    }`;\n\n    return (\n      <div\n        role=\"button\"\n        tabIndex={0}\n        className=\"rs-layer-tree-toggle\"\n        title={title}\n        aria-expanded={expandedLayers.includes(layer)}\n        aria-label={title}\n        onClick={onInputClick}\n        onKeyPress={onInputClick}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...toggleProps}\n      >\n        <div>{renderLabel(layer, this)}</div>\n        {this.renderArrow(layer)}\n      </div>\n    );\n  }\n\n  renderItemContent(layer, inputProps = {}, toggleProps = {}) {\n    return (\n      <>\n        {this.renderInput(layer, inputProps)}\n        {this.renderToggleButton(layer, toggleProps)}\n      </>\n    );\n  }\n\n  renderItem(layer, level) {\n    const { isItemHidden } = this.props;\n    const { expandedLayers } = this.state;\n    const {\n      renderItem,\n      renderItemContent,\n      renderBeforeItem,\n      renderAfterItem,\n      padding,\n      getParentClassName,\n    } = this.props;\n\n    const children = expandedLayers.includes(layer)\n      ? [\n          ...(layer.children || []).filter((c) => {\n            return !isItemHidden(c);\n          }),\n        ]\n      : [];\n\n    if (renderItem) {\n      return renderItem(layer, this.onInputClick, this.onToggle);\n    }\n\n    return (\n      <div className={getParentClassName()} key={layer.key}>\n        <div\n          className={`rs-layer-tree-item ${layer.visible ? \"rs-visible\" : \"\"}`}\n          style={{\n            paddingLeft: `${padding * level}px`,\n          }}\n        >\n          {renderItemContent\n            ? renderItemContent(layer, this)\n            : this.renderItemContent(layer)}\n        </div>\n        {renderBeforeItem && renderBeforeItem(layer, level, this)}\n        {[...children].reverse().map((child) => {\n          return this.renderItem(child, level + 1);\n        })}\n        {renderAfterItem && renderAfterItem(layer, level, this)}\n      </div>\n    );\n  }\n\n  renderTree() {\n    const { isItemHidden } = this.props;\n    const { rootLayer } = this.state;\n\n    if (!rootLayer?.children?.length) {\n      return null;\n    }\n\n    return (\n      <>\n        {rootLayer.children\n          .filter((l) => {\n            return !isItemHidden(l);\n          })\n          .reverse()\n          .map((l) => {\n            return this.renderItem(l, 0);\n          })}\n      </>\n    );\n  }\n\n  render() {\n    const { className } = this.props;\n    return <div className={className}>{this.renderTree()}</div>;\n  }\n}\n\nLayerTree.propTypes = propTypes;\nLayerTree.defaultProps = defaultProps;\n\nexport default LayerTree;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Layer, getLayersAsFlatArray } from \"mobility-toolbox-js/ol\";\nimport { unByKey } from \"ol/Observable\";\n\nconst propTypes = {\n  /**\n   * Layers provider.\n   */\n  layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)),\n\n  /**\n   * CSS class to apply on the container.\n   */\n  className: PropTypes.string,\n\n  /**\n   * Padding left to apply on each level.\n   */\n  padding: PropTypes.number,\n\n  /**\n   * Determine if the item is hidden in the tree or not.\n   *\n   * @param {object} item The item to hide or not.\n   *\n   * @return {bool} true if the item is not displayed in the tree\n   */\n  isItemHidden: PropTypes.func,\n\n  /**\n   * Determine the className used by the div containing the parent and its children.\n   */\n  getParentClassName: PropTypes.func,\n\n  /**\n   * Custom function to render an item in the tree.\n   *\n   * @param {object} item The item to render.\n   *\n   * @return {node} A jsx node.\n   */\n  renderItem: PropTypes.func,\n\n  /**\n   * Custom function to render only the content of an item in the tree.\n   * inputProps und toggleProps can be used when calling the default renderItemContent function\n   * (comp.renderItemContent(layer, inputProps, toggleProps)) to overwrite the default input and label props\n   *\n   * @param {Layer} layer The layer the item content is created for\n   * @param {LayerTree} comp The LayerTree component.\n   *\n   * @return {node} A jsx node.\n   */\n  renderItemContent: PropTypes.func,\n\n  /**\n   * Custom function to render custom content before the list of children of an item.\n   *\n   * @param {object} item The item to render.\n   *\n   * @return {node} A jsx node.\n   */\n  renderBeforeItem: PropTypes.func,\n\n  /**\n   * Custom function to render custom content after the list of children of an item.\n   *\n   * @param {object} item The item to render.\n   *\n   * @return {node} A jsx node.\n   */\n  renderAfterItem: PropTypes.func,\n\n  /**\n   * Custom function to render the label.\n   *\n   * @param {string} item The label to render.\n   * @param {LayerTree} comp The LayerTree component.\n   *\n   * @return {node} A jsx node.\n   */\n  renderLabel: PropTypes.func,\n\n  /**\n   * Custom function to render the checkbox.\n   */\n  renderCheckbox: PropTypes.func,\n\n  /**\n   * Object holding title for the layer tree's buttons.\n   */\n  titles: PropTypes.shape({\n    /**\n     * aria-label on checkbox to show layer.\n     */\n    layerShow: PropTypes.string,\n    /**\n     * aria-label on checkbox to hide layer.\n     */\n    layerHide: PropTypes.string,\n    /**\n     * title on button to show sublayers.\n     */\n    subLayerShow: PropTypes.string,\n    /**\n     * title on button to show sublayers.\n     */\n    subLayerHide: PropTypes.string,\n  }),\n\n  /**\n   * Boolean determining whether children collapse/expand when their parent is toggled\n   * @param {...(boolean|function)} expandChildren Boolean or function returning a boolean.\n   * @return {boolean} True or false\n   */\n  expandChildren: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),\n\n  /**\n   * Translation function.\n   * @param {function} Translation function returning the translated string.\n   */\n  t: PropTypes.func,\n};\n\nconst defaultProps = {\n  layers: [],\n  className: \"rs-layer-tree\",\n  padding: 30,\n  isItemHidden: () => {\n    return false;\n  },\n  getParentClassName: () => {\n    return undefined;\n  },\n  renderItem: null,\n  renderItemContent: null,\n  renderBeforeItem: null,\n  renderAfterItem: null,\n  renderCheckbox: null,\n  renderLabel: (layer, layerComp) => {\n    const { t } = layerComp.props;\n    return t(layer.name);\n  },\n  titles: {\n    layerShow: \"Show layer\",\n    layerHide: \"Hide layer\",\n    subLayerShow: \"Show sublayer\",\n    subLayerHide: \"Hide sublayer\",\n  },\n  t: (s) => {\n    return s;\n  },\n  expandChildren: false,\n};\n\n/**\n * The LayerTree component renders an interface for toggling\n * [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers)\n * and their corresponding child layers.\n */\n\nclass LayerTree extends Component {\n  constructor(props) {\n    super(props);\n\n    const { layers, isItemHidden } = this.props;\n    const initialExpandedLayers = layers\n      ? this.getExpandedLayers(\n          layers.filter((l) => {\n            return (\n              !isItemHidden(l) &&\n              (l.children || [])\n                .filter((child) => {\n                  return child.visible;\n                })\n                .filter((c) => {\n                  return !isItemHidden(c);\n                }).length\n            );\n          }),\n        )\n      : [];\n\n    this.state = {\n      rootLayer: new Layer(),\n      expandedLayers: initialExpandedLayers,\n      revision: 0,\n    };\n    // this.updateLayers = this.updateLayers.bind(this);\n    this.olKeys = [];\n  }\n\n  componentDidMount() {\n    this.updateLayers();\n  }\n\n  componentDidUpdate(prevProps) {\n    const { layers } = this.props;\n\n    if (layers !== prevProps.layers) {\n      this.updateLayers();\n    }\n  }\n\n  componentWillUnmount() {\n    unByKey(this.olKeys);\n    this.olKeys = [];\n  }\n\n  onInputClick(layer, toggle = false) {\n    if (toggle) {\n      this.onToggle(layer);\n    } else if (layer.setVisible) {\n      layer.setVisible(!layer.visible);\n    } else {\n      // eslint-disable-next-line no-param-reassign\n      layer.visible = !layer.visible;\n    }\n  }\n\n  onToggle(layer) {\n    const { expandedLayers } = this.state;\n    const pos = expandedLayers.indexOf(layer);\n    if (pos > -1) {\n      expandedLayers.splice(pos, 1);\n    } else {\n      expandedLayers.push(...this.getExpandedLayers([layer]));\n    }\n    this.setState({ expandedLayers });\n  }\n\n  /**\n   * Get the always expanded ancestors (isAlwaysExpanded=true) of the given layers\n   * together with the (given) initially expanded layers\n   *\n   * @param  {Layer} layers Initially expanded layers\n   * @return {Array.<Layer>} Initially expanded layers and all its always expanded ancestors\n   */\n  getExpandedLayers(layers) {\n    const { isItemHidden } = this.props;\n    const children = layers.flatMap((l) => {\n      return l.children.filter((c) => {\n        return !isItemHidden(c) && c.get(\"isAlwaysExpanded\");\n      });\n    });\n\n    if (!children.length) {\n      return layers;\n    }\n    return [...layers, this.getExpandedLayers(children)].flat();\n  }\n\n  updateLayers() {\n    const { layers, expandChildren } = this.props;\n\n    // Update the root layer\n    let rootLayer = new Layer();\n    if (Array.isArray(layers)) {\n      if (layers.length === 1) {\n        [rootLayer] = layers;\n      }\n      rootLayer = new Layer({ children: layers });\n    } else {\n      rootLayer = layers;\n    }\n\n    getLayersAsFlatArray(rootLayer).forEach((layer) => {\n      this.olKeys.push(\n        layer.on(\"propertychange\", () => {\n          const { revision } = this.state;\n          this.setState({ revision: revision + 1 });\n        }),\n      );\n    });\n\n    const state = { rootLayer };\n    if (\n      typeof expandChildren === \"function\"\n        ? expandChildren(layers)\n        : expandChildren\n    ) {\n      state.expandedLayers = rootLayer.children.flatMap((l) => {\n        return this.expandLayer(l);\n      });\n    }\n\n    this.setState(state);\n  }\n\n  expandLayer(layer, expLayers = []) {\n    const { isItemHidden } = this.props;\n    if (layer.visible && !isItemHidden(layer)) {\n      const children = layer.children\n        .filter((c) => {\n          return !isItemHidden(c) && !c.get(\"isAlwaysExpanded\");\n        })\n        .flatMap((c) => {\n          return this.expandLayer(c, expLayers);\n        });\n      return [...expLayers, ...children, layer];\n    }\n    return expLayers;\n  }\n\n  renderInput(layer, inputProps) {\n    const { titles, isItemHidden, renderCheckbox } = this.props;\n    let tabIndex = 0;\n\n    if (\n      !(layer.children || []).filter((c) => {\n        return !isItemHidden(c);\n      }).length\n    ) {\n      // We forbid focus on keypress event for first level layers and layers without children.\n      tabIndex = -1;\n    }\n\n    const inputType = layer.get(\"group\") ? \"radio\" : \"checkbox\";\n    return renderCheckbox ? (\n      renderCheckbox(layer, this, inputProps)\n    ) : (\n      // eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/no-noninteractive-element-interactions\n      <label\n        className={`rs-layer-tree-input rs-layer-tree-input-${inputType} rs-${inputType}`}\n        tabIndex={tabIndex}\n        title={layer.visible ? titles.layerHide : titles.layerShow}\n        aria-label={layer.visible ? titles.layerHide : titles.layerShow}\n        onKeyPress={(e) => {\n          if (e.which === 13) {\n            this.onInputClick(layer);\n          }\n        }}\n      >\n        <input\n          type={inputType}\n          tabIndex={-1}\n          checked={layer.visible}\n          readOnly\n          onClick={() => {\n            return this.onInputClick(layer);\n          }}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...inputProps}\n        />\n        <span />\n      </label>\n    );\n  }\n\n  renderArrow(layer) {\n    const { isItemHidden } = this.props;\n    const { expandedLayers } = this.state;\n\n    if (\n      !(layer.children || []).filter((c) => {\n        return !isItemHidden(c);\n      }).length ||\n      layer.get(\"isAlwaysExpanded\")\n    ) {\n      return null;\n    }\n\n    return (\n      <div\n        className={`rs-layer-tree-arrow rs-layer-tree-arrow-${\n          !expandedLayers.includes(layer) ? \"collapsed\" : \"expanded\"\n        }`}\n      />\n    );\n  }\n\n  // Render a button which expands/collapse the layer if there is children\n  // or simulate a click on the input otherwise.\n  renderToggleButton(layer, toggleProps) {\n    const { t, titles, isItemHidden, renderLabel } = this.props;\n    const { expandedLayers } = this.state;\n\n    const onInputClick = () => {\n      this.onInputClick(\n        layer,\n        (layer.children || []).filter((c) => {\n          return !isItemHidden(c);\n        }).length && !layer.get(\"isAlwaysExpanded\"),\n      );\n    };\n    const title = `${t(layer.name)} ${\n      expandedLayers.includes(layer) ? titles.subLayerHide : titles.subLayerShow\n    }`;\n\n    return (\n      <div\n        role=\"button\"\n        tabIndex={0}\n        className=\"rs-layer-tree-toggle\"\n        title={title}\n        aria-expanded={expandedLayers.includes(layer)}\n        aria-label={title}\n        onClick={onInputClick}\n        onKeyPress={onInputClick}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...toggleProps}\n      >\n        <div>{renderLabel(layer, this)}</div>\n        {this.renderArrow(layer)}\n      </div>\n    );\n  }\n\n  renderItemContent(layer, inputProps = {}, toggleProps = {}) {\n    return (\n      <>\n        {this.renderInput(layer, inputProps)}\n        {this.renderToggleButton(layer, toggleProps)}\n      </>\n    );\n  }\n\n  renderItem(layer, level) {\n    const { isItemHidden } = this.props;\n    const { expandedLayers } = this.state;\n    const {\n      renderItem,\n      renderItemContent,\n      renderBeforeItem,\n      renderAfterItem,\n      padding,\n      getParentClassName,\n    } = this.props;\n\n    const children = expandedLayers.includes(layer)\n      ? [\n          ...(layer.children || []).filter((c) => {\n            return !isItemHidden(c);\n          }),\n        ]\n      : [];\n\n    if (renderItem) {\n      return renderItem(layer, this.onInputClick, this.onToggle);\n    }\n\n    return (\n      <div className={getParentClassName()} key={layer.key}>\n        <div\n          className={`rs-layer-tree-item ${layer.visible ? \"rs-visible\" : \"\"}`}\n          style={{\n            paddingLeft: `${padding * level}px`,\n          }}\n        >\n          {renderItemContent\n            ? renderItemContent(layer, this)\n            : this.renderItemContent(layer)}\n        </div>\n        {renderBeforeItem && renderBeforeItem(layer, level, this)}\n        {[...children].reverse().map((child) => {\n          return this.renderItem(child, level + 1);\n        })}\n        {renderAfterItem && renderAfterItem(layer, level, this)}\n      </div>\n    );\n  }\n\n  renderTree() {\n    const { isItemHidden } = this.props;\n    const { rootLayer } = this.state;\n\n    if (!rootLayer?.children?.length) {\n      return null;\n    }\n\n    return (\n      <>\n        {rootLayer.children\n          .filter((l) => {\n            return !isItemHidden(l);\n          })\n          .reverse()\n          .map((l) => {\n            return this.renderItem(l, 0);\n          })}\n      </>\n    );\n  }\n\n  render() {\n    const { className } = this.props;\n    return <div className={className}>{this.renderTree()}</div>;\n  }\n}\n\nLayerTree.propTypes = propTypes;\nLayerTree.defaultProps = defaultProps;\n\nexport default LayerTree;\n"],
+  "mappings": "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",
   "names": []
 }

package/components/StopsFinder/StopsFinder.js

@@ -1,24 +1,20 @@
 import React, { useMemo, useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { Autocomplete } from "@material-ui/lab";
+import { Autocomplete, autocompleteClasses, styled } from "@mui/material";
 import { FaSearch } from "react-icons/fa";
-import TextField from "@material-ui/core/TextField";
-import CircularProgress from "@material-ui/core/CircularProgress";
+import TextField from "@mui/material/TextField";
+import CircularProgress from "@mui/material/CircularProgress";
 import { StopFinderControl } from "mobility-toolbox-js/ol";
 import { Map } from "ol";
-import { makeStyles } from "@material-ui/core";
-import StopsFinderOptions from "./StopsFinderOption";
-const useStyles = makeStyles(() => {
-  return {
-    popupIndicatorOpen: {
-      transform: "rotate(0)"
-    }
-  };
-});
+import StopsFinderOption from "./StopsFinderOption";
+const StyledAutocomplete = styled(Autocomplete)(() => ({
+  [`&.${autocompleteClasses.popupIndicatorOpen}`]: {
+    transform: "rotate(0)"
+  }
+}));
 function StopsFinder({
   agencies,
   apiKey,
-  autocompleteProps,
   bbox,
   field,
   limit,
@@ -28,9 +24,10 @@ function StopsFinder({
   radius,
   refLocation,
   renderAutocomplete,
-  url
+  url,
+  textFieldProps,
+  ...props
 }) {
-  const classes = useStyles();
   const [inputValue, setInputValue] = useState("");
   const [suggestions, setSuggestions] = useState([]);
   const [isLoading, setLoading] = useState(false);
@@ -104,13 +101,8 @@ function StopsFinder({
       setLoading
     );
   }
-  const textFieldProps = {
-    ...(autocompleteProps || {}).textFieldProps || {}
-  };
-  const autocProps = { ...autocompleteProps };
-  delete autocProps.textFieldProps;
   return /* @__PURE__ */ React.createElement(
-    Autocomplete,
+    StyledAutocomplete,
     {
       fullWidth: true,
       autoComplete: true,
@@ -120,7 +112,7 @@ function StopsFinder({
         return option.properties.name;
       },
       onChange: (evt, value, reason) => {
-        if (onSelect && reason === "select-option") {
+        if (onSelect && reason === "selectOption") {
           onSelect(value, evt);
         }
       },
@@ -130,10 +122,8 @@ function StopsFinder({
           TextField,
           {
             label: "Search stops",
-            ...{
-              ...params,
-              ...textFieldProps
-            },
+            ...params,
+            ...textFieldProps,
             InputProps: {
               ...params.InputProps,
               endAdornment: /* @__PURE__ */ React.createElement(React.Fragment, null, isLoading && /* @__PURE__ */ React.createElement(CircularProgress, { size: 20 }), params.InputProps.endAdornment)
@@ -141,11 +131,17 @@ function StopsFinder({
           }
         );
       },
-      renderOption: (option) => {
-        return /* @__PURE__ */ React.createElement(StopsFinderOptions, { option });
+      renderOption: (liProps, option) => {
+        return /* @__PURE__ */ React.createElement(
+          StopsFinderOption,
+          {
+            key: option.properties?.name,
+            option,
+            ...liProps
+          }
+        );
       },
-      ...autocProps,
-      classes: { ...classes, ...autocompleteProps.classes },
+      ...props,
       inputValue,
       open: isOpen,
       options: suggestions,
@@ -177,10 +173,9 @@ StopsFinder.propTypes = {
    */
   apiKey: PropTypes.string,
   /**
-   * Properties apply to the default [MUI Autocomplete component](https://material-ui.com/api/autocomplete/).
-   * We add a custom properties textFieldProps for the default [MUI TextField component](https://material-ui.com/api/text-field/) used by the Autocomplete.
+   * Properties apply to the default [MUI TextField component](https://material-ui.com/api/text-field/) used by the Autocomplete.
    */
-  autocompleteProps: PropTypes.object,
+  textFieldProps: PropTypes.object,
   /**
    * minX,minY,maxX,maxY coordinates in WGS84 wherein the station should lie.
    */
@@ -241,7 +236,7 @@ StopsFinder.propTypes = {
 StopsFinder.defaultProps = {
   agencies: null,
   apiKey: null,
-  autocompleteProps: {},
+  textFieldProps: {},
   bbox: null,
   field: null,
   limit: null,

package/components/StopsFinder/StopsFinder.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/StopsFinder/StopsFinder.js"],
-  "sourcesContent": ["import React, { useMemo, useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Autocomplete } from \"@material-ui/lab\";\nimport { FaSearch } from \"react-icons/fa\";\nimport TextField from \"@material-ui/core/TextField\";\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\nimport { StopFinderControl } from \"mobility-toolbox-js/ol\";\nimport { Map } from \"ol\";\nimport { makeStyles } from \"@material-ui/core\";\nimport StopsFinderOptions from \"./StopsFinderOption\";\n\nconst useStyles = makeStyles(() => {\n  return {\n    popupIndicatorOpen: {\n      transform: \"rotate(0)\",\n    },\n  };\n});\n\nfunction StopsFinder({\n  agencies,\n  apiKey,\n  autocompleteProps,\n  bbox,\n  field,\n  limit,\n  map,\n  mots,\n  onSelect,\n  radius,\n  refLocation,\n  renderAutocomplete,\n  url,\n}) {\n  const classes = useStyles();\n  const [inputValue, setInputValue] = useState(\"\");\n  const [suggestions, setSuggestions] = useState([]);\n  const [isLoading, setLoading] = useState(false);\n  const [isOpen, setOpen] = useState(false);\n\n  const control = useMemo(() => {\n    return new StopFinderControl({\n      url,\n      apiKey,\n      target: document.createElement(\"div\"),\n      element: document.createElement(\"div\"),\n      render(newSuggestions = { features: [] }) {\n        setSuggestions(newSuggestions.features);\n        setLoading(false);\n      },\n    });\n  }, [apiKey, url]);\n\n  useEffect(() => {\n    if (!inputValue) {\n      setSuggestions([]);\n      setLoading(false);\n      return () => {};\n    }\n    const abortController = new AbortController();\n    setLoading(true);\n    control.apiParams = {\n      prefAgencies: agencies && agencies.toString(),\n      bbox: bbox && bbox.toString(),\n      field: field && field.toString(),\n      limit,\n      mots: mots && mots.toString(),\n      radius,\n      ref_location: refLocation && refLocation.toString(),\n    };\n    control.search(inputValue, abortController);\n    return () => {\n      abortController.abort();\n    };\n  }, [\n    agencies,\n    bbox,\n    control,\n    field,\n    inputValue,\n    limit,\n    mots,\n    radius,\n    refLocation,\n  ]);\n\n  // Ensure the control is not associated to the wrong map\n  useEffect(() => {\n    if (!control) {\n      return () => {};\n    }\n\n    control.map = map;\n\n    return () => {\n      control.map = null;\n    };\n  }, [map, control]);\n\n  if (!control) {\n    return null;\n  }\n\n  if (renderAutocomplete) {\n    return renderAutocomplete(\n      suggestions,\n      inputValue,\n      setInputValue,\n      isOpen,\n      setOpen,\n      isLoading,\n      setLoading,\n    );\n  }\n  const textFieldProps = {\n    ...((autocompleteProps || {}).textFieldProps || {}),\n  };\n  const autocProps = { ...autocompleteProps };\n  delete autocProps.textFieldProps;\n\n  return (\n    <Autocomplete\n      fullWidth\n      autoComplete\n      autoHighlight\n      selectOnFocus\n      getOptionLabel={(option) => {\n        return option.properties.name;\n      }}\n      onChange={(evt, value, reason) => {\n        if (onSelect && reason === \"select-option\") {\n          onSelect(value, evt);\n        }\n      }}\n      popupIcon={<FaSearch focusable={false} size={15} />}\n      renderInput={(params) => {\n        return (\n          <TextField\n            label=\"Search stops\"\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...{\n              ...params,\n              ...textFieldProps,\n            }}\n            InputProps={{\n              ...params.InputProps,\n              endAdornment: (\n                <>\n                  {isLoading && <CircularProgress size={20} />}\n                  {params.InputProps.endAdornment}\n                </>\n              ),\n            }}\n          />\n        );\n      }}\n      renderOption={(option) => {\n        return <StopsFinderOptions option={option} />;\n      }}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...autocProps}\n      classes={{ ...classes, ...autocompleteProps.classes }}\n      inputValue={inputValue}\n      open={isOpen}\n      options={suggestions}\n      loading={isLoading}\n      onOpen={() => {\n        setOpen(true);\n      }}\n      onClose={() => {\n        setOpen(false);\n      }}\n      onInputChange={(evt, val) => {\n        setInputValue(val);\n      }}\n    />\n  );\n}\n\nStopsFinder.propTypes = {\n  /**\n   * Array or a comma separated list of agencies which should be available.\n   * Order of these agencies chooses which agency will be preferred.\n   * Available values : sbb, db\n   */\n  agencies: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n  ]),\n\n  /**\n   * geOps api key to access the StopsFinder service.\n   */\n  apiKey: PropTypes.string,\n\n  /**\n   * Properties apply to the default [MUI Autocomplete component](https://material-ui.com/api/autocomplete/).\n   * We add a custom properties textFieldProps for the default [MUI TextField component](https://material-ui.com/api/text-field/) used by the Autocomplete.\n   */\n  autocompleteProps: PropTypes.object,\n\n  /**\n   * minX,minY,maxX,maxY coordinates in WGS84 wherein the station should lie.\n   */\n  bbox: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.number),\n  ]),\n\n  /**\n   * Array or a comma separated list of fields which should be used for look up.\n   * Available values : id, name, coords\n   */\n  field: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n  ]),\n\n  /**\n   * Control how many matches will be returned.\n   */\n  limit: PropTypes.number,\n\n  /**\n   * A map.\n   */\n  map: PropTypes.instanceOf(Map).isRequired,\n\n  /**\n   * Array or a comma separated list of mode of transpaorts which should be available.\n   * Available values : bus, ferry, gondola, tram, rail, funicular, cable_car, subway\n   */\n  mots: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n  ]),\n\n  /**\n   * Function called when a suggestion is selected.\n   */\n  onSelect: PropTypes.func,\n\n  /**\n   * Radius around refLocation in meters that is most relevant.\n   * Used as granularity for location rank.\n   */\n  radius: PropTypes.number,\n\n  /**\n   * Coordinates in WGS84 (in lat,lon order) used to rank stops close to this position higher.\n   * Available values : id, name, coords\n   */\n  refLocation: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.number),\n  ]),\n\n  /**\n   * Function to render a different autocomplete input than the default one.\n   */\n  renderAutocomplete: PropTypes.func,\n\n  /**\n   * Url of the geOps StopsFinder service.\n   */\n  url: PropTypes.string,\n};\n\nStopsFinder.defaultProps = {\n  agencies: null,\n  apiKey: null,\n  autocompleteProps: {},\n  bbox: null,\n  field: null,\n  limit: null,\n  mots: null,\n  onSelect: null,\n  radius: null,\n  refLocation: null,\n  url: null,\n  renderAutocomplete: null,\n};\n\nexport default StopsFinder;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable react/jsx-props-no-spreading */\nimport React, { useMemo, useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Autocomplete, autocompleteClasses, styled } from \"@mui/material\";\nimport { FaSearch } from \"react-icons/fa\";\nimport TextField from \"@mui/material/TextField\";\nimport CircularProgress from \"@mui/material/CircularProgress\";\nimport { StopFinderControl } from \"mobility-toolbox-js/ol\";\nimport { Map } from \"ol\";\nimport StopsFinderOption from \"./StopsFinderOption\";\n\nconst StyledAutocomplete = styled(Autocomplete)(() => ({\n  [`&.${autocompleteClasses.popupIndicatorOpen}`]: {\n    transform: \"rotate(0)\",\n  },\n}));\n\nfunction StopsFinder({\n  agencies,\n  apiKey,\n  bbox,\n  field,\n  limit,\n  map,\n  mots,\n  onSelect,\n  radius,\n  refLocation,\n  renderAutocomplete,\n  url,\n  textFieldProps,\n  ...props\n}) {\n  const [inputValue, setInputValue] = useState(\"\");\n  const [suggestions, setSuggestions] = useState([]);\n  const [isLoading, setLoading] = useState(false);\n  const [isOpen, setOpen] = useState(false);\n\n  const control = useMemo(() => {\n    return new StopFinderControl({\n      url,\n      apiKey,\n      target: document.createElement(\"div\"),\n      element: document.createElement(\"div\"),\n      render(newSuggestions = { features: [] }) {\n        setSuggestions(newSuggestions.features);\n        setLoading(false);\n      },\n    });\n  }, [apiKey, url]);\n\n  useEffect(() => {\n    if (!inputValue) {\n      setSuggestions([]);\n      setLoading(false);\n      return () => {};\n    }\n    const abortController = new AbortController();\n    setLoading(true);\n    control.apiParams = {\n      prefAgencies: agencies && agencies.toString(),\n      bbox: bbox && bbox.toString(),\n      field: field && field.toString(),\n      limit,\n      mots: mots && mots.toString(),\n      radius,\n      ref_location: refLocation && refLocation.toString(),\n    };\n    control.search(inputValue, abortController);\n    return () => {\n      abortController.abort();\n    };\n  }, [\n    agencies,\n    bbox,\n    control,\n    field,\n    inputValue,\n    limit,\n    mots,\n    radius,\n    refLocation,\n  ]);\n\n  // Ensure the control is not associated to the wrong map\n  useEffect(() => {\n    if (!control) {\n      return () => {};\n    }\n\n    control.map = map;\n\n    return () => {\n      control.map = null;\n    };\n  }, [map, control]);\n\n  if (!control) {\n    return null;\n  }\n\n  if (renderAutocomplete) {\n    return renderAutocomplete(\n      suggestions,\n      inputValue,\n      setInputValue,\n      isOpen,\n      setOpen,\n      isLoading,\n      setLoading,\n    );\n  }\n  return (\n    <StyledAutocomplete\n      fullWidth\n      autoComplete\n      autoHighlight\n      selectOnFocus\n      getOptionLabel={(option) => {\n        return option.properties.name;\n      }}\n      onChange={(evt, value, reason) => {\n        if (onSelect && reason === \"selectOption\") {\n          onSelect(value, evt);\n        }\n      }}\n      popupIcon={<FaSearch focusable={false} size={15} />}\n      renderInput={(params) => {\n        return (\n          <TextField\n            label=\"Search stops\"\n            {...params}\n            {...textFieldProps}\n            InputProps={{\n              ...params.InputProps,\n              endAdornment: (\n                <>\n                  {isLoading && <CircularProgress size={20} />}\n                  {params.InputProps.endAdornment}\n                </>\n              ),\n            }}\n          />\n        );\n      }}\n      renderOption={(liProps, option) => {\n        return (\n          <StopsFinderOption\n            key={option.properties?.name}\n            option={option}\n            {...liProps}\n          />\n        );\n      }}\n      {...props}\n      inputValue={inputValue}\n      open={isOpen}\n      options={suggestions}\n      loading={isLoading}\n      onOpen={() => {\n        setOpen(true);\n      }}\n      onClose={() => {\n        setOpen(false);\n      }}\n      onInputChange={(evt, val) => {\n        setInputValue(val);\n      }}\n    />\n  );\n}\n\nStopsFinder.propTypes = {\n  /**\n   * Array or a comma separated list of agencies which should be available.\n   * Order of these agencies chooses which agency will be preferred.\n   * Available values : sbb, db\n   */\n  agencies: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n  ]),\n\n  /**\n   * geOps api key to access the StopsFinder service.\n   */\n  apiKey: PropTypes.string,\n\n  /**\n   * Properties apply to the default [MUI TextField component](https://material-ui.com/api/text-field/) used by the Autocomplete.\n   */\n  textFieldProps: PropTypes.object,\n\n  /**\n   * minX,minY,maxX,maxY coordinates in WGS84 wherein the station should lie.\n   */\n  bbox: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.number),\n  ]),\n\n  /**\n   * Array or a comma separated list of fields which should be used for look up.\n   * Available values : id, name, coords\n   */\n  field: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n  ]),\n\n  /**\n   * Control how many matches will be returned.\n   */\n  limit: PropTypes.number,\n\n  /**\n   * A map.\n   */\n  map: PropTypes.instanceOf(Map).isRequired,\n\n  /**\n   * Array or a comma separated list of mode of transpaorts which should be available.\n   * Available values : bus, ferry, gondola, tram, rail, funicular, cable_car, subway\n   */\n  mots: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n  ]),\n\n  /**\n   * Function called when a suggestion is selected.\n   */\n  onSelect: PropTypes.func,\n\n  /**\n   * Radius around refLocation in meters that is most relevant.\n   * Used as granularity for location rank.\n   */\n  radius: PropTypes.number,\n\n  /**\n   * Coordinates in WGS84 (in lat,lon order) used to rank stops close to this position higher.\n   * Available values : id, name, coords\n   */\n  refLocation: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.number),\n  ]),\n\n  /**\n   * Function to render a different autocomplete input than the default one.\n   */\n  renderAutocomplete: PropTypes.func,\n\n  /**\n   * Url of the geOps StopsFinder service.\n   */\n  url: PropTypes.string,\n};\n\nStopsFinder.defaultProps = {\n  agencies: null,\n  apiKey: null,\n  textFieldProps: {},\n  bbox: null,\n  field: null,\n  limit: null,\n  mots: null,\n  onSelect: null,\n  radius: null,\n  refLocation: null,\n  url: null,\n  renderAutocomplete: null,\n};\n\nexport default StopsFinder;\n"],
+  "mappings": "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",
   "names": []
 }

package/components/StopsFinder/StopsFinderOption.js

@@ -1,6 +1,6 @@
-import React, { lazy, Suspense } from "react";
+import React, { Suspense, lazy } from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core";
+import { CircularProgress, styled } from "@mui/material";
 const ext = "_round-blue-01.svg";
 const iconForMot = {};
 [
@@ -17,23 +17,16 @@ const iconForMot = {};
     return import(`../../images/mots/${mot}${ext}`);
   });
 });
-const useStyles = makeStyles((theme) => {
-  return {
-    flex: {
-      display: "flex",
-      alignItems: "center"
-    },
-    icon: {
-      marginRight: theme.spacing(2)
-    }
-  };
-});
-function StopsFinderOption({ option }) {
-  const classes = useStyles();
-  return /* @__PURE__ */ React.createElement(Suspense, { fallback: /* @__PURE__ */ React.createElement("div", null) }, /* @__PURE__ */ React.createElement("div", { className: classes.flex }, Object.entries(option.properties.mot).map(([key, value]) => {
+const StyledFlex = styled("div")(() => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 5
+}));
+function StopsFinderOption({ option, ...props }) {
+  return /* @__PURE__ */ React.createElement(Suspense, { fallback: /* @__PURE__ */ React.createElement(CircularProgress, { size: 20 }) }, /* @__PURE__ */ React.createElement(StyledFlex, { ...props }, Object.entries(option.properties?.mot).map(([key, value]) => {
     if (value) {
       const MotIcon = iconForMot[key];
-      return /* @__PURE__ */ React.createElement("span", { className: classes.icon, key }, /* @__PURE__ */ React.createElement(MotIcon, null));
+      return /* @__PURE__ */ React.createElement(StyledFlex, { key }, /* @__PURE__ */ React.createElement(MotIcon, null));
     }
     return null;
   }), /* @__PURE__ */ React.createElement("span", null, option.properties.name)));

package/components/StopsFinder/StopsFinderOption.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/StopsFinder/StopsFinderOption.js"],
-  "sourcesContent": ["import React, { lazy, Suspense } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { makeStyles } from \"@material-ui/core\";\n\nconst ext = \"_round-blue-01.svg\";\nconst iconForMot = {};\n[\n  \"bus\",\n  \"ferry\",\n  \"gondola\",\n  \"tram\",\n  \"rail\",\n  \"funicular\",\n  \"cable_car\",\n  \"subway\",\n].forEach((mot) => {\n  iconForMot[mot] = lazy(() => {\n    return import(`../../images/mots/${mot}${ext}`);\n  });\n});\n\nconst useStyles = makeStyles((theme) => {\n  return {\n    flex: {\n      display: \"flex\",\n      alignItems: \"center\",\n    },\n    icon: {\n      marginRight: theme.spacing(2),\n    },\n  };\n});\n\nfunction StopsFinderOption({ option }) {\n  const classes = useStyles();\n\n  return (\n    <Suspense fallback={<div />}>\n      <div className={classes.flex}>\n        {Object.entries(option.properties.mot).map(([key, value]) => {\n          if (value) {\n            const MotIcon = iconForMot[key];\n            return (\n              <span className={classes.icon} key={key}>\n                <MotIcon />\n              </span>\n            );\n          }\n          return null;\n        })}\n        <span>{option.properties.name}</span>\n      </div>\n    </Suspense>\n  );\n}\n\nStopsFinderOption.propTypes = {\n  option: PropTypes.object.isRequired,\n};\n\nexport default React.memo(StopsFinderOption);\n"],
-  "mappings": "AAAA,OAAO,SAAS,MAAM,gBAAgB;AACtC,OAAO,eAAe;AACtB,SAAS,kBAAkB;AAE3B,MAAM,MAAM;AACZ,MAAM,aAAa,CAAC;AACpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,QAAQ,CAAC,QAAQ;AACjB,aAAW,GAAG,IAAI,KAAK,MAAM;AAC3B,WAAO,OAAO,qBAAqB,GAAG,GAAG,GAAG;AAAA,EAC9C,CAAC;AACH,CAAC;AAED,MAAM,YAAY,WAAW,CAAC,UAAU;AACtC,SAAO;AAAA,IACL,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,MACJ,aAAa,MAAM,QAAQ,CAAC;AAAA,IAC9B;AAAA,EACF;AACF,CAAC;AAED,SAAS,kBAAkB,EAAE,OAAO,GAAG;AACrC,QAAM,UAAU,UAAU;AAE1B,SACE,oCAAC,YAAS,UAAU,oCAAC,WAAI,KACvB,oCAAC,SAAI,WAAW,QAAQ,QACrB,OAAO,QAAQ,OAAO,WAAW,GAAG,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAC3D,QAAI,OAAO;AACT,YAAM,UAAU,WAAW,GAAG;AAC9B,aACE,oCAAC,UAAK,WAAW,QAAQ,MAAM,OAC7B,oCAAC,aAAQ,CACX;AAAA,IAEJ;AACA,WAAO;AAAA,EACT,CAAC,GACD,oCAAC,cAAM,OAAO,WAAW,IAAK,CAChC,CACF;AAEJ;AAEA,kBAAkB,YAAY;AAAA,EAC5B,QAAQ,UAAU,OAAO;AAC3B;AAEA,eAAe,MAAM,KAAK,iBAAiB;",
+  "sourcesContent": ["/* eslint-disable react/jsx-props-no-spreading */\nimport React, { Suspense, lazy } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { CircularProgress, styled } from \"@mui/material\";\n\nconst ext = \"_round-blue-01.svg\";\nconst iconForMot = {};\n[\n  \"bus\",\n  \"ferry\",\n  \"gondola\",\n  \"tram\",\n  \"rail\",\n  \"funicular\",\n  \"cable_car\",\n  \"subway\",\n].forEach((mot) => {\n  iconForMot[mot] = lazy(() => {\n    return import(`../../images/mots/${mot}${ext}`);\n  });\n});\n\nconst StyledFlex = styled(\"div\")(() => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 5,\n}));\n\nfunction StopsFinderOption({ option, ...props }) {\n  return (\n    <Suspense fallback={<CircularProgress size={20} />}>\n      <StyledFlex {...props}>\n        {Object.entries(option.properties?.mot).map(([key, value]) => {\n          if (value) {\n            const MotIcon = iconForMot[key];\n            return (\n              <StyledFlex key={key}>\n                <MotIcon />\n              </StyledFlex>\n            );\n          }\n          return null;\n        })}\n        <span>{option.properties.name}</span>\n      </StyledFlex>\n    </Suspense>\n  );\n}\n\nStopsFinderOption.propTypes = {\n  option: PropTypes.object.isRequired,\n};\n\nexport default React.memo(StopsFinderOption);\n"],
+  "mappings": "AACA,OAAO,SAAS,UAAU,YAAY;AACtC,OAAO,eAAe;AACtB,SAAS,kBAAkB,cAAc;AAEzC,MAAM,MAAM;AACZ,MAAM,aAAa,CAAC;AACpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,QAAQ,CAAC,QAAQ;AACjB,aAAW,GAAG,IAAI,KAAK,MAAM;AAC3B,WAAO,OAAO,qBAAqB,GAAG,GAAG,GAAG;AAAA,EAC9C,CAAC;AACH,CAAC;AAED,MAAM,aAAa,OAAO,KAAK,EAAE,OAAO;AAAA,EACtC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK;AACP,EAAE;AAEF,SAAS,kBAAkB,EAAE,QAAQ,GAAG,MAAM,GAAG;AAC/C,SACE,oCAAC,YAAS,UAAU,oCAAC,oBAAiB,MAAM,IAAI,KAC9C,oCAAC,cAAY,GAAG,SACb,OAAO,QAAQ,OAAO,YAAY,GAAG,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAC5D,QAAI,OAAO;AACT,YAAM,UAAU,WAAW,GAAG;AAC9B,aACE,oCAAC,cAAW,OACV,oCAAC,aAAQ,CACX;AAAA,IAEJ;AACA,WAAO;AAAA,EACT,CAAC,GACD,oCAAC,cAAM,OAAO,WAAW,IAAK,CAChC,CACF;AAEJ;AAEA,kBAAkB,YAAY;AAAA,EAC5B,QAAQ,UAAU,OAAO;AAC3B;AAEA,eAAe,MAAM,KAAK,iBAAiB;",
   "names": []
 }

package/package.json

@@ -2,12 +2,13 @@
   "name": "react-spatial",
   "license": "MIT",
   "description": "Components to build React map apps.",
-  "version": "1.8.2",
+  "version": "1.9.0",
   "dependencies": {
-    "@geops/geops-ui": "0.1.18",
-    "@material-ui/core": "4.12.4",
-    "@material-ui/icons": "4.11.3",
-    "@material-ui/lab": "4.0.0-alpha.61",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@geops/geops-ui": "0.3.2",
+    "@mui/icons-material": "^5.15.9",
+    "@mui/material": "^5.15.9",
     "re-resizable": "6.9.11",
     "react-icons": "5.0.1",
     "resize-observer-polyfill": "1.5.1"
@@ -21,23 +22,23 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@babel/preset-env": "7.23.8",
+    "@babel/preset-env": "7.23.9",
     "@babel/preset-react": "7.23.3",
     "@cfaester/enzyme-adapter-react-18": "0.7.1",
-    "@commitlint/cli": "18.4.4",
-    "@commitlint/config-conventional": "18.4.4",
+    "@commitlint/cli": "18.6.0",
+    "@commitlint/config-conventional": "18.6.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/webpack": "8.1.0",
-    "@testing-library/jest-dom": "6.2.0",
-    "@testing-library/react": "14.1.2",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/react": "14.2.1",
     "@testing-library/user-event": "14.5.2",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "canvas": "2.11.2",
-    "css-loader": "6.9.0",
+    "css-loader": "6.10.0",
     "enzyme": "3.11.0",
-    "esbuild": "^0.19.11",
-    "esbuild-loader": "^4.0.2",
+    "esbuild": "^0.20.0",
+    "esbuild-loader": "^4.0.3",
     "eslint": "8.56.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.1.0",
@@ -49,7 +50,7 @@
     "file-loader": "6.2.0",
     "fixpack": "4.0.0",
     "generact": "0.4.0",
-    "husky": "8.0.3",
+    "husky": "9.0.10",
     "identity-obj-proxy": "^3.0.0",
     "is-ci": "3.0.1",
     "jest": "29.7.0",
@@ -61,33 +62,33 @@
     "jest-transform-file": "1.1.1",
     "jest-transformer-svg": "^2.0.2",
     "jsts": "2.11.0",
-    "lint-staged": "15.2.0",
+    "lint-staged": "15.2.2",
     "mapbox-gl": "1.13.1",
-    "maplibre-gl": "3.6.2",
-    "mobility-toolbox-js": "2.3.7",
+    "maplibre-gl": "4.0.0",
+    "mobility-toolbox-js": "2.3.8",
     "ol": "8.2.0",
-    "postcss": "^8.4.33",
-    "prettier": "3.2.4",
+    "postcss": "^8.4.35",
+    "prettier": "3.2.5",
     "proj4": "2.10.0",
     "prop-types": "15.8.1",
     "react": "18",
     "react-dom": "18",
-    "react-styleguidist": "13.1.1",
+    "react-styleguidist": "13.1.2",
     "react-svg-loader": "3.0.3",
     "react-test-renderer": "18.2.0",
     "sass": "1.70.0",
-    "sass-loader": "14.0.0",
+    "sass-loader": "14.1.0",
     "standard-version": "9.5.0",
     "stream-array": "1.1.2",
     "style-loader": "3.3.4",
-    "stylelint": "16.1.0",
+    "stylelint": "16.2.1",
     "stylelint-config-recommended-scss": "14.0.0",
     "stylelint-config-standard": "36.0.0",
-    "stylelint-scss": "6.0.0",
+    "stylelint-scss": "6.1.0",
     "terser-webpack-plugin": "^5.3.10",
     "url-loader": "4.1.1",
     "vinyl-fs": "4.0.0",
-    "webpack": "^5.89.0",
+    "webpack": "^5.90.1",
     "xml-beautifier": "0.5.0"
   },
   "scripts": {