Update React to 19 (#1360)

## Launch Checklist

This updates React to 19.
It removes the unmaintained `react-icon-base` package and uses icons
from the existing one (also removes the svgs).
It also updates the other packages so that everything should be up to
date.

 - [x] Briefly describe the changes in this PR.

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

src/components/App.tsx

@@ -696,7 +696,7 @@ export default class App extends React.Component<any, AppState> {
         {...mapProps}
         onChange={this.onMapChange}
         debugToolbox={this.state.openlayersDebugOptions.debugToolbox}
-        onLayerSelect={this.onLayerSelect}
+        onLayerSelect={(layerId) => this.onLayerSelect(+layerId)}
       />
     } else {
 

src/components/AppMessagePanel.tsx

@@ -7,7 +7,7 @@ type AppMessagePanelInternalProps = {
   errors?: unknown[]
   infos?: string[]
   mapStyle?: StyleSpecification
-  onLayerSelect?(...args: unknown[]): unknown
+  onLayerSelect?(index: number): void;
   currentLayer?: LayerSpecification
   selectedLayerIndex?: number
 } & WithTranslation;

src/components/Block.tsx

@@ -88,7 +88,7 @@ export default class Block extends React.Component<BlockProps, BlockState> {
       <div className="maputnik-input-block-action">
         {this.props.action}
       </div>
-      <div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
+      <div className="maputnik-input-block-content" ref={el => {this._blockEl = el}}>
         {this.props.children}
       </div>
       {this.props.fieldSpec &&

src/components/FieldDocLabel.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
 import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'
 
 type FieldDocLabelProps = {

src/components/IconBackground.tsx

@@ -1,13 +1,10 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
+import React, { type CSSProperties } from 'react'
+import { BsDiamondFill } from 'react-icons/bs';
 
-
-export default class IconBackground extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <path d="m 1.821019,10.255581 7.414535,5.020197 c 0.372277,0.25206 0.958697,0.239771 1.30985,-0.02745 L 17.539255,9.926162 C 17.89041,9.658941 17.873288,9.238006 17.501015,8.985946 L 10.08648,3.9657402 C 9.714204,3.7136802 9.127782,3.7259703 8.776627,3.9931918 L 1.782775,9.315365 c -0.3511551,0.267221 -0.3340331,0.688156 0.03824,0.940216 z" />
-      </IconBase>
-    )
-  }
+const IconBackground: React.FC<{style: CSSProperties | undefined}> = (props) => {
+  return (
+    <BsDiamondFill {...props} />
+  )
 }
+
+export default IconBackground;

src/components/IconCircle.tsx

@@ -1,13 +1,9 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
+import React, { type CSSProperties } from 'react'
+import {MdOutlineCircle} from 'react-icons/md'
 
-
-export default class IconCircle extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <path transform="translate(2 2)" d="M7.5,0C11.6422,0,15,3.3578,15,7.5S11.6422,15,7.5,15 S0,11.6422,0,7.5S3.3578,0,7.5,0z M7.5,1.6666c-3.2217,0-5.8333,2.6117-5.8333,5.8334S4.2783,13.3334,7.5,13.3334 s5.8333-2.6117,5.8333-5.8334S10.7217,1.6666,7.5,1.6666z"></path>
-      </IconBase>
-    )
-  }
+const IconCircle: React.FC<{style: CSSProperties | undefined}> = (props) => {
+  return (
+    <MdOutlineCircle {...props} />
+  )
 }
+export default IconCircle;

src/components/IconFill.tsx

@@ -1,13 +1,10 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
+import React, { type CSSProperties } from 'react'
+import { BsDiamond } from 'react-icons/bs';
 
 
-export default class IconFill extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <path d="M 2.84978,9.763512 9.462149,4.7316391 16.47225,9.478015 9.859886,14.509879 2.84978,9.763512 m -1.028761,0.492069 7.414535,5.020197 c 0.372277,0.25206 0.958697,0.239771 1.30985,-0.02745 L 17.539255,9.926162 C 17.89041,9.658941 17.873288,9.238006 17.501015,8.985946 L 10.08648,3.9657402 C 9.714204,3.7136802 9.127782,3.7259703 8.776627,3.9931918 L 1.782775,9.315365 c -0.3511551,0.267221 -0.3340331,0.688156 0.03824,0.940216 l 0,0 z" />
-      </IconBase>
-    )
-  }
+const IconFill: React.FC<{style: CSSProperties | undefined}> = (props) => {
+  return (
+    <BsDiamond {...props} />
+  )
 }
+export default IconFill;

src/components/IconLayer.tsx

@@ -6,27 +6,28 @@ import IconSymbol from './IconSymbol'
 import IconBackground from './IconBackground'
 import IconCircle from './IconCircle'
 import IconMissing from './IconMissing'
+import type {CSSProperties} from 'react'
 
 type IconLayerProps = {
   type: string
-  style?: object
+  style?: CSSProperties
   className?: string
 };
 
-export default class IconLayer extends React.Component<IconLayerProps> {
-  render() {
-    const iconProps = { style: this.props.style }
-    switch(this.props.type) {
-    case 'fill-extrusion': return <IconBackground {...iconProps} />
-    case 'raster': return <IconFill {...iconProps} />
-    case 'hillshade': return <IconFill {...iconProps} />
-    case 'heatmap': return <IconFill {...iconProps} />
-    case 'fill': return <IconFill {...iconProps} />
-    case 'background': return <IconBackground {...iconProps} />
-    case 'line': return <IconLine {...iconProps} />
-    case 'symbol': return <IconSymbol {...iconProps} />
-    case 'circle': return <IconCircle {...iconProps} />
-    default: return <IconMissing {...iconProps} />
-    }
+const IconLayer: React.FC<IconLayerProps> = (props) => {
+  const iconProps = { style: props.style }
+  switch(props.type) {
+  case 'fill-extrusion': return <IconBackground {...iconProps} />
+  case 'raster': return <IconFill {...iconProps} />
+  case 'hillshade': return <IconFill {...iconProps} />
+  case 'heatmap': return <IconFill {...iconProps} />
+  case 'fill': return <IconFill {...iconProps} />
+  case 'background': return <IconBackground {...iconProps} />
+  case 'line': return <IconLine {...iconProps} />
+  case 'symbol': return <IconSymbol {...iconProps} />
+  case 'circle': return <IconCircle {...iconProps} />
+  default: return <IconMissing {...iconProps} />
   }
 }
+
+export default IconLayer;

src/components/IconLine.tsx

@@ -1,13 +1,11 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
+import React, { type CSSProperties } from 'react'
+import { IoAnalyticsOutline } from 'react-icons/io5';
 
 
-export default class IconLine extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <path d="M 12.34,1.29 C 12.5114,1.1076 12.7497,1.0029 13,1 13.5523,1 14,1.4477 14,2 14.0047,2.2478 13.907,2.4866 13.73,2.66 9.785626,6.5516986 6.6148407,9.7551593 2.65,13.72 2.4793,13.8963 2.2453,13.9971 2,14 1.4477,14 1,13.5523 1,13 0.9953,12.7522 1.093,12.5134 1.27,12.34 4.9761967,8.7018093 9.0356422,4.5930579 12.34,1.29 Z" transform="translate(2,2)" />
-      </IconBase>
-    )
-  }
+const IconLine: React.FC<{style: CSSProperties | undefined}> = (props) => {
+  return (
+    <IoAnalyticsOutline {...props} />
+  )
 }
+
+export default IconLine;

src/components/IconMissing.tsx

@@ -1,11 +1,9 @@
-import React from 'react'
+import React, { type CSSProperties } from 'react'
 import {MdPriorityHigh} from 'react-icons/md'
 
-
-export default class IconMissing extends React.Component {
-  render() {
-    return (
-      <MdPriorityHigh {...this.props} />
-    )
-  }
+const IconMissing: React.FC<{style: CSSProperties | undefined}> = (props) => {
+  return (
+    <MdPriorityHigh {...props} />
+  )
 }
+export default IconMissing;

src/components/IconSymbol.tsx

@@ -1,15 +1,10 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
+import React, { type CSSProperties } from 'react'
+import { BsFonts } from 'react-icons/bs';
 
 
-export default class IconSymbol extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <g transform="matrix(1.2718518,0,0,1.2601269,16.559526,-7.4065264)">
-          <path d="m -9.7959773,11.060163 c -0.3734787,-0.724437 -0.3580577,-1.2147051 -0.00547,-1.8767873 l 8.6034029,-0.019416 c 0.39670292,0.6865644 0.38365934,1.4750693 -0.011097,1.8864953 l -3.1359613,-0.0033 -0.013695,7.1305 c -0.4055357,0.397083 -1.3146432,0.397083 -1.7769191,-0.02274 l 0.030226,-7.104422 z" />
-        </g>
-      </IconBase>
-    )
-  }
+const IconSymbol: React.FC<{style: CSSProperties | undefined}> = (props) => {
+  return (
+    <BsFonts {...props} />
+  )
 }
+export default IconSymbol;

src/components/InputColor.tsx

@@ -122,7 +122,7 @@ export default class InputColor extends React.Component<InputColorProps> {
         spellCheck="false"
         autoComplete="off"
         className="maputnik-color"
-        ref={(input) => this.colorInput = input}
+        ref={(input) => {this.colorInput = input}}
         onClick={this.togglePicker}
         style={this.props.style}
         name={this.props.name}

src/components/InputJson.tsx

@@ -173,7 +173,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
       </div>
       <div
         className={classnames("codemirror-container", this.props.className)}
-        ref={(el) => this._el = el}
+        ref={(el) => {this._el = el}}
         style={style}
       />
     </div>

src/components/InputUrl.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
 import InputString from './InputString'
 import SmallError from './SmallError'
 import { Trans, WithTranslation, withTranslation } from 'react-i18next';

src/components/LayerList.tsx

@@ -28,7 +28,7 @@ type LayerListContainerProps = {
   layers: LayerSpecification[]
   selectedLayerIndex: number
   onLayersChange(layers: LayerSpecification[]): unknown
-  onLayerSelect(...args: unknown[]): unknown
+  onLayerSelect(index: number): void;
   onLayerDestroy?(...args: unknown[]): unknown
   onLayerCopy(...args: unknown[]): unknown
   onLayerVisibilityToggle(...args: unknown[]): unknown
@@ -50,7 +50,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
     onLayerSelect: () => {},
   }
   selectedItemRef: React.RefObject<any>;
-  scrollContainerRef: React.RefObject<HTMLElement>;
+  scrollContainerRef: React.RefObject<HTMLElement | null>;
 
   constructor(props: LayerListContainerInternalProps) {
     super(props);
@@ -276,6 +276,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
 
     return <section
       className="maputnik-layer-list"
+      data-wd-key="layer-list"
       role="complementary"
       aria-label={t("Layers list")}
       ref={this.scrollContainerRef}

src/components/LayerListItem.tsx

@@ -21,6 +21,7 @@ const DraggableLabel: React.FC<DraggableLabelProps> = (props) => {
     <IconLayer
       className="layer-handle__icon"
       type={props.layerType}
+      style={{ width: '1em', height: '1em', verticalAlign: 'middle' }}
     />
     <button className="maputnik-layer-list-item-id">
       {props.layerId}
@@ -79,7 +80,7 @@ type LayerListItemProps = {
   isSelected?: boolean
   visibility?: string
   className?: string
-  onLayerSelect(...args: unknown[]): unknown
+  onLayerSelect(index: number): void;
   onLayerCopy?(...args: unknown[]): unknown
   onLayerDestroy?(...args: unknown[]): unknown
   onLayerVisibilityToggle?(...args: unknown[]): unknown

src/components/MapMaplibreGl.tsx

@@ -61,7 +61,7 @@ function buildInspectStyle(originalMapStyle: StyleSpecification, coloredLayers:
 
 type MapMaplibreGlInternalProps = {
   onDataChange?(event: {map: Map | null}): unknown
-  onLayerSelect(...args: unknown[]): unknown
+  onLayerSelect(index: number): void
   mapStyle: StyleSpecification
   inspectModeEnabled: boolean
   highlightedLayer?: HighlightedLayer
@@ -306,7 +306,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       className="maputnik-map__map"
       role="region"
       aria-label={t("Map view")}
-      ref={x => this.container = x}
+      ref={x => {this.container = x}}
       data-wd-key="maplibre:map"
     ></div>
   }

src/components/MapOpenLayers.tsx

@@ -29,7 +29,7 @@ type MapOpenLayersInternalProps = {
   mapStyle: object
   accessToken?: string
   style?: object
-  onLayerSelect(...args: unknown[]): unknown
+  onLayerSelect(layerId: string): void
   debugToolbox: boolean
   replaceAccessTokens(...args: unknown[]): unknown
   onChange(...args: unknown[]): unknown
@@ -156,7 +156,7 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
     const t = this.props.t;
     return <div className="maputnik-ol-container">
       <div
-        ref={x => this.popupContainer = x}
+        ref={x => {this.popupContainer = x}}
         style={{background: "black"}}
         className="maputnik-popup"
       >
@@ -193,7 +193,7 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
       }
       <div
         className="maputnik-ol"
-        ref={x => this.container = x}
+        ref={x => {this.container = x}}
         role="region"
         aria-label={t("Map view")}
         style={{