Remove legacy context API (#1258)

## Summary
- replace `childContextTypes` usage with `IconContext` providers
- drop `prop-types` imports

## Testing
- `npm run lint`
- `npm run build`


------
https://chatgpt.com/codex/tasks/task_e_6868431f6ecc83318393a5d079ca736e

CHANGELOG.md

@@ -13,6 +13,7 @@
 - Upgrade OpenLayers from v6 to v10
 - When loading a style into localStorage that causes a QuotaExceededError, purge localStorage and retry
 - Remove react-autobind dependency
+- Remove usage of legacy `childContextTypes` API
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes

src/components/AppLayout.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import ScrollContainer from './ScrollContainer'
 import { WithTranslation, withTranslation } from 'react-i18next';
+import { IconContext } from 'react-icons';
 
 type AppLayoutInternalProps = {
   toolbar: React.ReactElement
@@ -13,20 +13,12 @@ type AppLayoutInternalProps = {
 } & WithTranslation;
 
 class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
-  static childContextTypes = {
-    reactIconBase: PropTypes.object
-  }
-
-  getChildContext() {
-    return {
-      reactIconBase: { size: 14 }
-    }
-  }
 
   render() {
     document.body.dir = this.props.i18n.dir();
 
-    return <div className="maputnik-layout">
+    return <IconContext.Provider value={{size: '14px'}}>
+      <div className="maputnik-layout">
         {this.props.toolbar}
         <div className="maputnik-layout-main">
           <div className="maputnik-layout-list">
@@ -45,6 +37,7 @@ class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
         }
         {this.props.modals}
       </div>
+    </IconContext.Provider>
   }
 }
 

src/components/LayerEditor.tsx

@@ -1,8 +1,8 @@
 import React, {type JSX} from 'react'
-import PropTypes from 'prop-types'
 import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
 import {Accordion} from 'react-accessible-accordion';
 import {MdMoreVert} from 'react-icons/md'
+import { IconContext } from 'react-icons'
 import {BackgroundLayerSpecification, LayerSpecification, SourceSpecification} from 'maplibre-gl';
 
 import FieldJson from './FieldJson'
@@ -86,10 +86,6 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
     onLayerDestroyed: () => {},
   }
 
-  static childContextTypes = {
-    reactIconBase: PropTypes.object
-  }
-
   constructor(props: LayerEditorInternalProps) {
     super(props)
 
@@ -116,14 +112,6 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
     };
   }
 
-  getChildContext () {
-    return {
-      reactIconBase: {
-        size: 14,
-        color: '#8e8e8e',
-      }
-    }
-  }
 
   changeProperty(group: keyof LayerSpecification | null, property: string, newValue: any) {
     this.props.onLayerChanged(
@@ -311,7 +299,8 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
       items[id].handler();
     }
 
-    return <section className="maputnik-layer-editor"
+    return <IconContext.Provider value={{size: '14px', color: '#8e8e8e'}}>
+      <section className="maputnik-layer-editor"
         role="main"
         aria-label={t("Layer editor")}
       >
@@ -358,6 +347,7 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
           {groups}
         </Accordion>
       </section>
+    </IconContext.Provider>
   }
 }
 

src/components/LayerListItem.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md'
+import { IconContext } from 'react-icons'
 
 import IconLayer from './IconLayer'
 import {SortableElement, SortableHandle} from 'react-sortable-hoc'
@@ -91,20 +91,11 @@ class LayerListItem extends React.Component<LayerListItemProps> {
     onLayerVisibilityToggle: () => {},
   }
 
-  static childContextTypes = {
-    reactIconBase: PropTypes.object
-  }
-
-  getChildContext() {
-    return {
-      reactIconBase: { size: 14 }
-    }
-  }
-
   render() {
     const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
 
-    return <li
+    return <IconContext.Provider value={{size: '14px'}}>
+      <li
         id={this.props.id}
         key={this.props.layerId}
         onClick={_e => this.props.onLayerSelect(this.props.layerIndex)}
@@ -136,6 +127,7 @@ class LayerListItem extends React.Component<LayerListItemProps> {
           onClick={_e => this.props.onLayerVisibilityToggle!(this.props.layerIndex)}
         />
       </li>
+    </IconContext.Provider>
   }
 }