Fix more types, migrate two more files

package-lock.json

@@ -75,6 +75,7 @@
         "@types/lodash.isequal": "^4.5.8",
         "@types/lodash.throttle": "^4.1.9",
         "@types/react": "^16.14.52",
+        "@types/react-aria-menubutton": "^6.2.13",
         "@types/react-aria-modal": "^4.0.9",
         "@types/react-autocomplete": "^1.8.9",
         "@types/react-collapse": "^5.0.4",
@@ -4889,6 +4890,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-aria-menubutton": {
+      "version": "6.2.13",
+      "resolved": "https://registry.npmjs.org/@types/react-aria-menubutton/-/react-aria-menubutton-6.2.13.tgz",
+      "integrity": "sha512-olSjeIzNzn0KrbShOmBwchHS++khDXBYFTO2U802o8LDHANLms7zUsJhdecfqFpwdFMHxFiMMlCn2nJNCEHWlQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-aria-modal": {
       "version": "4.0.9",
       "resolved": "https://registry.npmjs.org/@types/react-aria-modal/-/react-aria-modal-4.0.9.tgz",

package.json

@@ -104,6 +104,7 @@
     "@types/lodash.isequal": "^4.5.8",
     "@types/lodash.throttle": "^4.1.9",
     "@types/react": "^16.14.52",
+    "@types/react-aria-menubutton": "^6.2.13",
     "@types/react-aria-modal": "^4.0.9",
     "@types/react-autocomplete": "^1.8.9",
     "@types/react-collapse": "^5.0.4",

src/components/Block.tsx

@@ -12,7 +12,7 @@ type BlockProps = {
   onChange?(...args: unknown[]): unknown
   fieldSpec?: object
   wideMode?: boolean
-  error?: unknown[]
+  error?: {message: string}
 };
 
 type BlockState = {

src/components/FieldComment.tsx

@@ -5,7 +5,8 @@ import InputString from './InputString'
 
 type FieldCommentProps = {
   value?: string
-  onChange(...args: unknown[]): unknown
+  onChange(value: string | undefined): unknown
+  error: {message: string}
 };
 
 export default class FieldComment extends React.Component<FieldCommentProps> {
@@ -18,6 +19,7 @@ export default class FieldComment extends React.Component<FieldCommentProps> {
       label={"Comments"}
       fieldSpec={fieldSpec}
       data-wd-key="layer-comment"
+      error={this.props.error}
     >
       <InputString
         multi={true}

src/components/FieldFunction.tsx

@@ -107,7 +107,7 @@ type FieldFunctionProps = {
   fieldName: string
   fieldType: string
   fieldSpec: any
-  errors?: unknown[]
+  errors?: {[key: string]: {message: string}}
   value?: any
 };
 

src/components/FieldId.tsx

@@ -7,8 +7,8 @@ import InputString from './InputString'
 type FieldIdProps = {
   value: string
   wdKey: string
-  onChange(...args: unknown[]): unknown
+  onChange(value: string | undefined): unknown
-  error?: unknown[]
+  error?: {message: string}
 };
 
 export default class FieldId extends React.Component<FieldIdProps> {

src/components/FieldMaxZoom.tsx

@@ -6,8 +6,8 @@ import InputNumber from './InputNumber'
 
 type FieldMaxZoomProps = {
   value?: number
-  onChange(...args: unknown[]): unknown
+  onChange(value: number | undefined): unknown
-  error?: unknown[]
+  error?: {message: string}
 };
 
 export default class FieldMaxZoom extends React.Component<FieldMaxZoomProps> {

src/components/FieldMinZoom.tsx

@@ -7,7 +7,7 @@ import InputNumber from './InputNumber'
 type FieldMinZoomProps = {
   value?: number
   onChange(...args: unknown[]): unknown
-  error?: unknown[]
+  error?: {message: string}
 };
 
 export default class FieldMinZoom extends React.Component<FieldMinZoomProps> {

src/components/FieldSource.tsx

@@ -7,9 +7,9 @@ import InputAutocomplete from './InputAutocomplete'
 type FieldSourceProps = {
   value?: string
   wdKey?: string
-  onChange?(...args: unknown[]): unknown
+  onChange?(value: string| undefined): unknown
   sourceIds?: unknown[]
-  error?: unknown[]
+  error?: {message: string}
 };
 
 export default class FieldSource extends React.Component<FieldSourceProps> {

src/components/FieldSourceLayer.tsx

@@ -9,6 +9,7 @@ type FieldSourceLayerProps = {
   onChange?(...args: unknown[]): unknown
   sourceLayerIds?: unknown[]
   isFixed?: boolean
+  error?: {message: string}
 };
 
 export default class FieldSourceLayer extends React.Component<FieldSourceLayerProps> {
@@ -19,8 +20,11 @@ export default class FieldSourceLayer extends React.Component<FieldSourceLayerPr
   }
 
   render() {
-    return <Block label={"Source Layer"} fieldSpec={latest.layer['source-layer']}
+    return <Block 
+      label={"Source Layer"} 
+      fieldSpec={latest.layer['source-layer']}
       data-wd-key="layer-source-layer"
+      error={this.props.error}
     >
       <InputAutocomplete
         keepMenuWithinWindowBounds={!!this.props.isFixed}

src/components/FieldType.tsx

@@ -8,8 +8,8 @@ import InputString from './InputString'
 type FieldTypeProps = {
   value: string
   wdKey?: string
-  onChange(...args: unknown[]): unknown
+  onChange(value: string): unknown
-  error?: unknown[] | undefined
+  error?: {message: string}
   disabled?: boolean
 };
 

src/components/FilterEditor.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import {combiningFilterOps} from '../libs/filterops'
 import {mdiTableRowPlusAfter} from '@mdi/js';
 import {isEqual} from 'lodash';
 
-import {latest, migrate, convertFilter} from '@maplibre/maplibre-gl-style-spec'
+import {latest, migrate, convertFilter, ExpressionSpecification, LegacyFilterSpecification, StyleSpecification} from '@maplibre/maplibre-gl-style-spec'
 import InputSelect from './InputSelect'
 import Block from './Block'
 import SingleFilterEditor from './SingleFilterEditor'
@@ -15,7 +14,7 @@ import ExpressionProperty from './_ExpressionProperty';
 import {mdiFunctionVariant} from '@mdi/js';
 
 
-function combiningFilter (props) {
+function combiningFilter(props: FilterEditorProps): LegacyFilterSpecification | ExpressionSpecification {
   let filter = props.filter || ['all'];
 
   if (!Array.isArray(filter)) {
@@ -30,14 +29,14 @@ function combiningFilter (props) {
     filters = [filter.slice(0)];
   }
 
-  return [combiningOp, ...filters];
+  return [combiningOp, ...filters] as LegacyFilterSpecification | ExpressionSpecification;
 }
 
-function migrateFilter (filter) {
+function migrateFilter(filter: LegacyFilterSpecification | ExpressionSpecification) {
-  return migrate(createStyleFromFilter(filter)).layers[0].filter;
+  return (migrate(createStyleFromFilter(filter)).layers[0] as any).filter;
 }
 
-function createStyleFromFilter (filter) {
+function createStyleFromFilter(filter: LegacyFilterSpecification | ExpressionSpecification): StyleSpecification & {id: string} {
   return {
     "id": "tmp",
     "version": 8,
@@ -69,7 +68,7 @@ const FILTER_OPS = [
 ];
 
 // If we convert a filter that is an expression to an expression it'll remain the same in value
-function checkIfSimpleFilter (filter) {
+function checkIfSimpleFilter (filter: LegacyFilterSpecification | ExpressionSpecification) {
   if (filter.length === 1 && FILTER_OPS.includes(filter[0])) {
     return true;
   }
@@ -77,33 +76,38 @@ function checkIfSimpleFilter (filter) {
   return !isEqual(expression, filter);
 }
 
-function hasCombiningFilter(filter) {
+function hasCombiningFilter(filter: LegacyFilterSpecification | ExpressionSpecification) {
   return combiningFilterOps.indexOf(filter[0]) >= 0
 }
 
-function hasNestedCombiningFilter(filter) {
+function hasNestedCombiningFilter(filter: LegacyFilterSpecification | ExpressionSpecification) {
   if(hasCombiningFilter(filter)) {
-    const combinedFilters = filter.slice(1)
+    return filter.slice(1).map(f => hasCombiningFilter(f as any)).filter(f => f == true).length > 0
-    return filter.slice(1).map(f => hasCombiningFilter(f)).filter(f => f == true).length > 0
   }
   return false
 }
 
-export default class FilterEditor extends React.Component {
+type FilterEditorProps = {
-  static propTypes = {
+  /** Properties of the vector layer and the available fields */
-    /** Properties of the vector layer and the available fields */
+  properties?: {[key:string]: any}
-    properties: PropTypes.object,
+  filter?: any[]
-    filter: PropTypes.array,
+  errors?: {[key:string]: any}
-    errors: PropTypes.object,
+  onChange(value: LegacyFilterSpecification | ExpressionSpecification): unknown
-    onChange: PropTypes.func.isRequired,
+};
-  }
 
+type FilterEditorState = {
+  showDoc: boolean
+  displaySimpleFilter: boolean
+  valueIsSimpleFilter?: boolean
+};
+
+export default class FilterEditor extends React.Component<FilterEditorProps, FilterEditorState> {
   static defaultProps = {
     filter: ["all"],
   }
 
-  constructor (props) {
+  constructor (props: FilterEditorProps) {
-    super();
+    super(props);
     this.state = {
       showDoc: false,
       displaySimpleFilter: checkIfSimpleFilter(combiningFilter(props)),
@@ -111,25 +115,25 @@ export default class FilterEditor extends React.Component {
   }
 
   // Convert filter to combining filter
-  onFilterPartChanged(filterIdx, newPart) {
+  onFilterPartChanged(filterIdx: number, newPart: any[]) {
-    const newFilter = combiningFilter(this.props).slice(0)
+    const newFilter = combiningFilter(this.props).slice(0) as LegacyFilterSpecification | ExpressionSpecification
     newFilter[filterIdx] = newPart
     this.props.onChange(newFilter)
   }
 
-  deleteFilterItem(filterIdx) {
+  deleteFilterItem(filterIdx: number) {
-    const newFilter = combiningFilter(this.props).slice(0)
+    const newFilter = combiningFilter(this.props).slice(0) as LegacyFilterSpecification | ExpressionSpecification
     newFilter.splice(filterIdx + 1, 1)
     this.props.onChange(newFilter)
   }
 
   addFilterItem = () => {
-    const newFilterItem = combiningFilter(this.props).slice(0)
+    const newFilterItem = combiningFilter(this.props).slice(0) as LegacyFilterSpecification | ExpressionSpecification
-    newFilterItem.push(['==', 'name', ''])
+    (newFilterItem as any[]).push(['==', 'name', ''])
     this.props.onChange(newFilterItem)
   }
 
-  onToggleDoc = (val) => {
+  onToggleDoc = (val: boolean) => {
     this.setState({
       showDoc: val
     });
@@ -149,8 +153,7 @@ export default class FilterEditor extends React.Component {
     })
   }
 
-  static getDerivedStateFromProps (props, currentState) {
+  static getDerivedStateFromProps(props: FilterEditorProps, currentState: FilterEditorState) {
-    const {filter} = props;
     const displaySimpleFilter = checkIfSimpleFilter(combiningFilter(props));
 
     // Upgrade but never downgrade
@@ -178,7 +181,7 @@ export default class FilterEditor extends React.Component {
     const fieldSpec={
       doc: latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."
     };
-    const defaultFilter = ["all"];
+    const defaultFilter = ["all"] as LegacyFilterSpecification | ExpressionSpecification;
 
     const isNestedCombiningFilter = displaySimpleFilter && hasNestedCombiningFilter(combiningFilter(this.props));
 
@@ -201,7 +204,7 @@ export default class FilterEditor extends React.Component {
     else if (displaySimpleFilter) {
       const filter = combiningFilter(this.props);
       let combiningOp = filter[0];
-      let filters = filter.slice(1)
+      let filters = filter.slice(1) as (LegacyFilterSpecification | ExpressionSpecification)[];
 
       const actions = (
         <div>
@@ -218,7 +221,7 @@ export default class FilterEditor extends React.Component {
       );
 
       const editorBlocks = filters.map((f, idx) => {
-        const error = errors[`filter[${idx+1}]`];
+        const error = errors![`filter[${idx+1}]`];
 
         return (
           <div key={`block-${idx}`}>
@@ -247,7 +250,7 @@ export default class FilterEditor extends React.Component {
           >
             <InputSelect
               value={combiningOp}
-              onChange={this.onFilterPartChanged.bind(this, 0)}
+              onChange={(v: [string, any]) => this.onFilterPartChanged(0, v)}
               options={[["all", "every filter matches"], ["none", "no filter matches"], ["any", "any filter matches"]]}
             />
           </Block>

src/components/IconLayer.tsx

@@ -10,6 +10,7 @@ import IconMissing from './IconMissing'
 type IconLayerProps = {
   type: string
   style?: object
+  className?: string
 };
 
 export default class IconLayer extends React.Component<IconLayerProps> {

src/components/InputAutocomplete.tsx

@@ -8,7 +8,7 @@ const MAX_HEIGHT = 140;
 export type InputAutocompleteProps = {
   value?: string
   options: any[]
-  onChange(...args: unknown[]): unknown
+  onChange(value: string | undefined): unknown
   keepMenuWithinWindowBounds?: boolean
   'aria-label'?: string
 };

src/components/InputSelect.tsx

@@ -5,7 +5,7 @@ export type InputSelectProps = {
   "data-wd-key"?: string
   options: [string, any][] | string[]
   style?: object
-  onChange(value: string): unknown
+  onChange(value: string | [string, any]): unknown
   title?: string
   'aria-label'?: string
 };

src/components/LayerEditor.tsx

@@ -1,6 +1,8 @@
 import React 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 FieldJson from './FieldJson'
 import FilterEditor from './FilterEditor'
@@ -13,20 +15,18 @@ import FieldMaxZoom from './FieldMaxZoom'
 import FieldComment from './FieldComment'
 import FieldSource from './FieldSource'
 import FieldSourceLayer from './FieldSourceLayer'
-import {Accordion} from 'react-accessible-accordion';
-
-import {MdMoreVert} from 'react-icons/md'
-
 import { changeType, changeProperty } from '../libs/layer'
 import layout from '../config/layout.json'
 import {formatLayerId} from '../util/format';
+import { SourceSpecification } from '@maplibre/maplibre-gl-style-spec';
+import { BackgroundLayerSpecification, LayerSpecification } from 'maplibre-gl';
 
 
-function getLayoutForType (type) {
+function getLayoutForType(type: LayerSpecification["type"]) {
   return layout[type] ? layout[type] : layout.invalid;
 }
 
-function layoutGroups(layerType) {
+function layoutGroups(layerType: LayerSpecification["type"]): {title: string, type: string, fields?: string[]}[] {
   const layerGroup = {
     title: 'Layer',
     type: 'layer'
@@ -44,25 +44,29 @@ function layoutGroups(layerType) {
     .concat([editorGroup])
 }
 
-/** Layer editor supporting multiple types of layers. */
+type LayerEditorProps = {
-export default class LayerEditor extends React.Component {
+  layer: LayerSpecification
-  static propTypes = {
+  sources?: SourceSpecification
-    layer: PropTypes.object.isRequired,
+  vectorLayers: {[key: string]: any}
-    sources: PropTypes.object,
+  spec: object
-    vectorLayers: PropTypes.object,
+  onLayerChanged(...args: unknown[]): unknown
-    spec: PropTypes.object.isRequired,
+  onLayerIdChange(...args: unknown[]): unknown
-    onLayerChanged: PropTypes.func,
+  onMoveLayer(...args: unknown[]): unknown
-    onLayerIdChange: PropTypes.func,
+  onLayerDestroy(...args: unknown[]): unknown
-    onMoveLayer: PropTypes.func,
+  onLayerCopy(...args: unknown[]): unknown
-    onLayerDestroy: PropTypes.func,
+  onLayerVisibilityToggle(...args: unknown[]): unknown
-    onLayerCopy: PropTypes.func,
+  isFirstLayer?: boolean
-    onLayerVisibilityToggle: PropTypes.func,
+  isLastLayer?: boolean
-    isFirstLayer: PropTypes.bool,
+  layerIndex: number
-    isLastLayer: PropTypes.bool,
+  errors?: any[]
-    layerIndex: PropTypes.number,
+};
-    errors: PropTypes.array,
-  }
 
+type LayerEditorState = {
+  editorGroups: {[keys:string]: boolean}
+};
+
+/** Layer editor supporting multiple types of layers. */
+export default class LayerEditor extends React.Component<LayerEditorProps, LayerEditorState> {
   static defaultProps = {
     onLayerChanged: () => {},
     onLayerIdChange: () => {},
@@ -73,11 +77,11 @@ export default class LayerEditor extends React.Component {
     reactIconBase: PropTypes.object
   }
 
-  constructor(props) {
+  constructor(props: LayerEditorProps) {
     super(props)
 
     //TODO: Clean this up and refactor into function
-    const editorGroups = {}
+    const editorGroups: {[keys:string]: boolean} = {}
     layoutGroups(this.props.layer.type).forEach(group => {
       editorGroups[group.title] = true
     })
@@ -85,7 +89,7 @@ export default class LayerEditor extends React.Component {
     this.state = { editorGroups }
   }
 
-  static getDerivedStateFromProps(props, state) {
+  static getDerivedStateFromProps(props: LayerEditorProps, state: LayerEditorState) {
     const additionalGroups = { ...state.editorGroups }
 
     getLayoutForType(props.layer.type).groups.forEach(group => {
@@ -108,14 +112,14 @@ export default class LayerEditor extends React.Component {
     }
   }
 
-  changeProperty(group, property, newValue) {
+  changeProperty(group: keyof LayerSpecification | null, property: string, newValue: any) {
     this.props.onLayerChanged(
       this.props.layerIndex,
       changeProperty(this.props.layer, group, property, newValue)
     )
   }
 
-  onGroupToggle(groupTitle, active) {
+  onGroupToggle(groupTitle: string, active: boolean) {
     const changedActiveGroups = {
       ...this.state.editorGroups,
       [groupTitle]: active,
@@ -125,15 +129,15 @@ export default class LayerEditor extends React.Component {
     })
   }
 
-  renderGroupType(type, fields) {
+  renderGroupType(type: string, fields?: string[]): JSX.Element {
     let comment = ""
     if(this.props.layer.metadata) {
-      comment = this.props.layer.metadata['maputnik:comment']
+      comment = (this.props.layer.metadata as any)['maputnik:comment']
     }
     const {errors, layerIndex} = this.props;
 
-    const errorData = {};
+    const errorData: {[key in LayerSpecification as string]: {message: string}} = {};
-    errors.forEach(error => {
+    errors!.forEach(error => {
       if (
         error.parsed &&
         error.parsed.type === "layer" &&
@@ -146,8 +150,8 @@ export default class LayerEditor extends React.Component {
     })
 
     let sourceLayerIds;
-    if(this.props.sources.hasOwnProperty(this.props.layer.source)) {
+    if(this.props.sources?.hasOwnProperty((this.props.layer as Exclude<LayerSpecification, BackgroundLayerSpecification>).source)) {
-      sourceLayerIds = this.props.sources[this.props.layer.source].layers;
+      sourceLayerIds = (this.props.sources as any)[(this.props.layer as any).source].layers;
     }
 
     switch(type) {
@@ -169,7 +173,7 @@ export default class LayerEditor extends React.Component {
         />
         {this.props.layer.type !== 'background' && <FieldSource
           error={errorData.source}
-          sourceIds={Object.keys(this.props.sources)}
+          sourceIds={Object.keys(this.props.sources!)}
           value={this.props.layer.source}
           onChange={v => this.changeProperty(null, 'source', v)}
         />
@@ -178,7 +182,7 @@ export default class LayerEditor extends React.Component {
         <FieldSourceLayer
           error={errorData['source-layer']}
           sourceLayerIds={sourceLayerIds}
-          value={this.props.layer['source-layer']}
+          value={(this.props.layer as any)['source-layer']}
           onChange={v => this.changeProperty(null, 'source-layer', v)}
         />
         }
@@ -202,8 +206,8 @@ export default class LayerEditor extends React.Component {
         <div className="maputnik-filter-editor-wrapper">
           <FilterEditor
             errors={errorData}
-            filter={this.props.layer.filter}
+            filter={(this.props.layer as any).filter}
-            properties={this.props.vectorLayers[this.props.layer['source-layer']]}
+            properties={this.props.vectorLayers[(this.props.layer as any)['source-layer']]}
             onChange={f => this.changeProperty(null, 'filter', f)}
           />
         </div>
@@ -212,7 +216,7 @@ export default class LayerEditor extends React.Component {
         return <PropertyGroup
           errors={errorData}
           layer={this.props.layer}
-          groupFields={fields}
+          groupFields={fields!}
           spec={this.props.spec}
           onChange={this.changeProperty.bind(this)}
         />
@@ -226,10 +230,11 @@ export default class LayerEditor extends React.Component {
             );
           }}
         />
+        default: return <></>
     }
   }
 
-  moveLayer(offset) {
+  moveLayer(offset: number) {
     this.props.onMoveLayer({
       oldIndex: this.props.layerIndex,
       newIndex: this.props.layerIndex+offset
@@ -237,7 +242,7 @@ export default class LayerEditor extends React.Component {
   }
 
   render() {
-    const groupIds = [];
+    const groupIds: string[] = [];
     const layerType = this.props.layer.type
     const groups = layoutGroups(layerType).filter(group => {
       return !(layerType === 'background' && group.type === 'source')
@@ -258,7 +263,7 @@ export default class LayerEditor extends React.Component {
 
     const layout = this.props.layer.layout || {}
 
-    const items = {
+    const items: {[key: string]: {text: string, handler: () => void, disabled?: boolean}} = {
       delete: {
         text: "Delete",
         handler: () => this.props.onLayerDestroy(this.props.layerIndex)
@@ -285,8 +290,8 @@ export default class LayerEditor extends React.Component {
       }
     }
 
-    function handleSelection(id, event) {
+    function handleSelection(id: string, event: React.SyntheticEvent) {
-      event.stopPropagation;
+      event.stopPropagation();
       items[id].handler();
     }
 
@@ -310,7 +315,7 @@ export default class LayerEditor extends React.Component {
               </Button>
               <Menu>
                 <ul className="more-menu__menu">
-                  {Object.keys(items).map((id, idx) => {
+                  {Object.keys(items).map((id) => {
                     const item = items[id];
                     return <li key={id}>
                       <MenuItem value={id} className='more-menu__menu__item'>

src/components/LayerEditorGroup.tsx

@@ -18,7 +18,7 @@ type LayerEditorGroupProps = {
   title: string
   isActive: boolean
   children: React.ReactElement
-  onActiveToggle(...args: unknown[]): unknown
+  onActiveToggle(active: boolean): unknown
 };
 
 

src/components/LayerList.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import lodash from 'lodash';
 
@@ -8,20 +7,13 @@ import LayerListItem from './LayerListItem'
 import ModalAdd from './ModalAdd'
 
 import {SortableContainer} from 'react-sortable-hoc';
+import { LayerSpecification } from '@maplibre/maplibre-gl-style-spec';
 
-const layerListPropTypes = {
+function layerPrefix(name: string) {
-  layers: PropTypes.array.isRequired,
-  selectedLayerIndex: PropTypes.number.isRequired,
-  onLayersChange: PropTypes.func.isRequired,
-  onLayerSelect: PropTypes.func,
-  sources: PropTypes.object.isRequired,
-}
-
-function layerPrefix(name) {
   return name.replace(' ', '-').replace('_', '-').split('-')[0]
 }
 
-function findClosestCommonPrefix(layers, idx) {
+function findClosestCommonPrefix(layers: LayerSpecification[], idx: number) {
   const currentLayerPrefix = layerPrefix(layers[idx].id)
   let closestIdx = idx
   for (let i = idx; i > 0; i--) {
@@ -37,14 +29,34 @@ function findClosestCommonPrefix(layers, idx) {
 
 let UID = 0;
 
+type LayerListContainerProps = {
+  layers: LayerSpecification[]
+  selectedLayerIndex: number
+  onLayersChange(...args: unknown[]): unknown
+  onLayerSelect(...args: unknown[]): unknown
+  onLayerDestroy?(...args: unknown[]): unknown
+  onLayerCopy(...args: unknown[]): unknown
+  onLayerVisibilityToggle(...args: unknown[]): unknown
+  sources: object
+  errors: any[]
+};
+
+type LayerListContainerState = {
+  collapsedGroups: {[ket: string]: boolean}
+  areAllGroupsExpanded: boolean
+  keys: {[key: string]: number}
+  isOpen: {[key: string]: boolean}
+};
+
 // List of collapsible layer editors
-class LayerListContainer extends React.Component {
+class LayerListContainer extends React.Component<LayerListContainerProps, LayerListContainerState> {
-  static propTypes = {...layerListPropTypes}
   static defaultProps = {
     onLayerSelect: () => {},
   }
+  selectedItemRef: React.RefObject<any>;
+  scrollContainerRef: React.RefObject<HTMLElement>;
 
-  constructor(props) {
+  constructor(props: LayerListContainerProps) {
     super(props);
     this.selectedItemRef = React.createRef();
     this.scrollContainerRef = React.createRef();
@@ -60,7 +72,7 @@ class LayerListContainer extends React.Component {
     }
   }
 
-  toggleModal(modalName) {
+  toggleModal(modalName: string) {
     this.setState({
       keys: {
         ...this.state.keys,
@@ -74,9 +86,9 @@ class LayerListContainer extends React.Component {
   }
 
   toggleLayers = () => {
-    let idx=0
+    let idx = 0
 
-    let newGroups=[]
+    let newGroups: {[key:string]: boolean} = {}
 
     this.groupedLayers().forEach(layers => {
       const groupPrefix = layerPrefix(layers[0].id)
@@ -87,7 +99,7 @@ class LayerListContainer extends React.Component {
         newGroups[lookupKey] = this.state.areAllGroupsExpanded
       }
 
-      layers.forEach((layer) => {
+      layers.forEach((_layer) => {
         idx += 1
       })
     });
@@ -98,7 +110,7 @@ class LayerListContainer extends React.Component {
     })
   }
 
-  groupedLayers() {
+  groupedLayers(): (LayerSpecification & {key: string})[][] {
     const groups = []
     const layerIdCount = new Map();
 
@@ -122,7 +134,7 @@ class LayerListContainer extends React.Component {
     return groups
   }
 
-  toggleLayerGroup(groupPrefix, idx) {
+  toggleLayerGroup(groupPrefix: string, idx: number) {
     const lookupKey = [groupPrefix, idx].join('-')
     const newGroups = { ...this.state.collapsedGroups }
     if(lookupKey in this.state.collapsedGroups) {
@@ -135,12 +147,12 @@ class LayerListContainer extends React.Component {
     })
   }
 
-  isCollapsed(groupPrefix, idx) {
+  isCollapsed(groupPrefix: string, idx: number) {
     const collapsed = this.state.collapsedGroups[[groupPrefix, idx].join('-')]
     return collapsed === undefined ? true : collapsed
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
+  shouldComponentUpdate (nextProps: LayerListContainerProps, nextState: LayerListContainerState) {
     // Always update on state change
     if (this.state !== nextState) {
       return true;
@@ -148,8 +160,8 @@ class LayerListContainer extends React.Component {
 
     // This component tree only requires id and visibility from the layers
     // objects
-    function getRequiredProps (layer) {
+    function getRequiredProps(layer: LayerSpecification) {
-      const out = {
+      const out: {id: string, layout?: { visibility: any}} = {
         id: layer.id,
       };
 
@@ -165,10 +177,10 @@ class LayerListContainer extends React.Component {
       this.props.layers.map(getRequiredProps),
     );
 
-    function withoutLayers (props) {
+    function withoutLayers(props: LayerListContainerProps) {
       const out = {
         ...props
-      };
+      } as LayerListContainerProps & { layers?: any };
       delete out['layers'];
       return out;
     }
@@ -184,7 +196,7 @@ class LayerListContainer extends React.Component {
     return propsChanged;
   }
 
-  componentDidUpdate (prevProps) {
+  componentDidUpdate (prevProps: LayerListContainerProps) {
     if (prevProps.selectedLayerIndex !== this.props.selectedLayerIndex) {
       const selectedItemNode = this.selectedItemRef.current;
       if (selectedItemNode && selectedItemNode.node) {
@@ -207,7 +219,7 @@ class LayerListContainer extends React.Component {
 
   render() {
 
-    const listItems = []
+    const listItems: JSX.Element[] = []
     let idx = 0
     const layersByGroup = this.groupedLayers();
     layersByGroup.forEach(layers => {
@@ -235,7 +247,7 @@ class LayerListContainer extends React.Component {
           );
         });
 
-        const additionalProps = {};
+        const additionalProps: {ref?: React.RefObject<any>} = {};
         if (idx === this.props.selectedLayerIndex) {
           additionalProps.ref = this.selectedItemRef;
         }
@@ -255,7 +267,7 @@ class LayerListContainer extends React.Component {
           visibility={(layer.layout || {}).visibility}
           isSelected={idx === this.props.selectedLayerIndex}
           onLayerSelect={this.props.onLayerSelect}
-          onLayerDestroy={this.props.onLayerDestroy.bind(this)}
+          onLayerDestroy={this.props.onLayerDestroy?.bind(this)}
           onLayerCopy={this.props.onLayerCopy.bind(this)}
           onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(this)}
           {...additionalProps}
@@ -316,11 +328,13 @@ class LayerListContainer extends React.Component {
   }
 }
 
-const LayerListContainerSortable = SortableContainer((props) => <LayerListContainer {...props} />)
+const LayerListContainerSortable = SortableContainer((props: LayerListContainerProps) => <LayerListContainer {...props} />)
 
-export default class LayerList extends React.Component {
+type LayerListProps = LayerListContainerProps & {
-  static propTypes = {...layerListPropTypes}
+  onMoveLayer(...args: unknown[]): unknown
+};
 
+export default class LayerList extends React.Component<LayerListProps> {
   render() {
     return <LayerListContainerSortable
       {...this.props}

src/components/LayerListItem.tsx

@@ -8,7 +8,12 @@ import IconLayer from './IconLayer'
 import {SortableElement, SortableHandle} from 'react-sortable-hoc'
 
 
-const DraggableLabel = SortableHandle((props) => {
+type DraggableLabelProps = {
+  layerId: string
+  layerType: string
+};
+
+const DraggableLabel = SortableHandle((props: DraggableLabelProps) => {
   return <div className="maputnik-layer-list-item-handle">
     <IconLayer
       className="layer-handle__icon"
@@ -20,15 +25,15 @@ const DraggableLabel = SortableHandle((props) => {
   </div>
 });
 
-class IconAction extends React.Component {
+type IconActionProps = {
-  static propTypes = {
+  action: string
-    action: PropTypes.string.isRequired,
+  onClick(...args: unknown[]): unknown
-    onClick: PropTypes.func.isRequired,
+  wdKey?: string
-    wdKey: PropTypes.string,
+  classBlockName?: string
-    classBlockName: PropTypes.string,
+  classBlockModifier?: string
-    classBlockModifier: PropTypes.string,
+};
-  }
 
+class IconAction extends React.Component<IconActionProps> {
   renderIcon() {
     switch(this.props.action) {
       case 'duplicate': return <MdContentCopy />
@@ -51,7 +56,7 @@ class IconAction extends React.Component {
     }
 
     return <button
-      tabIndex="-1"
+      tabIndex={-1}
       title={this.props.action}
       className={`maputnik-layer-list-icon-action ${classAdditions}`}
       data-wd-key={this.props.wdKey}
@@ -63,21 +68,21 @@ class IconAction extends React.Component {
   }
 }
 
-class LayerListItem extends React.Component {
+type LayerListItemProps = {
-  static propTypes = {
+  id?: string
-    layerIndex: PropTypes.number.isRequired,
+  layerIndex: number
-    layerId: PropTypes.string.isRequired,
+  layerId: string
-    layerType: PropTypes.string.isRequired,
+  layerType: string
-    isSelected: PropTypes.bool,
+  isSelected?: boolean
-    visibility: PropTypes.string,
+  visibility?: string
-    className: PropTypes.string,
+  className?: string
-
+  onLayerSelect(...args: unknown[]): unknown
-    onLayerSelect: PropTypes.func.isRequired,
+  onLayerCopy?(...args: unknown[]): unknown
-    onLayerCopy: PropTypes.func,
+  onLayerDestroy?(...args: unknown[]): unknown
-    onLayerDestroy: PropTypes.func,
+  onLayerVisibilityToggle?(...args: unknown[]): unknown
-    onLayerVisibilityToggle: PropTypes.func,
+};
-  }
 
+class LayerListItem extends React.Component<LayerListItemProps> {
   static defaultProps = {
     isSelected: false,
     visibility: 'visible',
@@ -102,12 +107,12 @@ class LayerListItem extends React.Component {
     return <li
       id={this.props.id}
       key={this.props.layerId}
-      onClick={e => this.props.onLayerSelect(this.props.layerIndex)}
+      onClick={_e => this.props.onLayerSelect(this.props.layerIndex)}
       data-wd-key={"layer-list-item:"+this.props.layerId}
       className={classnames({
         "maputnik-layer-list-item": true,
         "maputnik-layer-list-item-selected": this.props.isSelected,
-        [this.props.className]: true,
+        [this.props.className!]: true,
       })}>
         <DraggableLabel {...this.props} />
         <span style={{flexGrow: 1}} />
@@ -115,25 +120,25 @@ class LayerListItem extends React.Component {
           wdKey={"layer-list-item:"+this.props.layerId+":delete"}
           action={'delete'}
           classBlockName="delete"
-          onClick={e => this.props.onLayerDestroy(this.props.layerIndex)}
+          onClick={_e => this.props.onLayerDestroy!(this.props.layerIndex)}
         />
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":copy"}
           action={'duplicate'}
           classBlockName="duplicate"
-          onClick={e => this.props.onLayerCopy(this.props.layerIndex)}
+          onClick={_e => this.props.onLayerCopy!(this.props.layerIndex)}
         />
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
           action={visibilityAction}
           classBlockName="visibility"
           classBlockModifier={visibilityAction}
-          onClick={e => this.props.onLayerVisibilityToggle(this.props.layerIndex)}
+          onClick={_e => this.props.onLayerVisibilityToggle!(this.props.layerIndex)}
         />
     </li>
   }
 }
 
-const LayerListItemSortable = SortableElement((props) => <LayerListItem {...props} />);
+const LayerListItemSortable = SortableElement((props: LayerListItemProps) => <LayerListItem {...props} />);
 
 export default LayerListItemSortable;

src/components/MapMaplibreGl.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
-import MapLibreGl from 'maplibre-gl'
+import MapLibreGl, {LayerSpecification, Map, MapOptions, SourceSpecification, StyleSpecification} from 'maplibre-gl'
+// @ts-ignore
 import MapboxInspect from 'mapbox-gl-inspect'
-import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup'
+// @ts-ignore
-import MapMaplibreGlFeaturePropertyPopup from './MapMaplibreGlFeaturePropertyPopup'
-import tokens from '../config/tokens.json'
 import colors from 'mapbox-gl-inspect/lib/colors'
+import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup'
+import MapMaplibreGlFeaturePropertyPopup, { InspectFeature } from './MapMaplibreGlFeaturePropertyPopup'
 import Color from 'color'
 import ZoomControl from '../libs/zoomcontrol'
-import { colorHighlightedLayer } from '../libs/highlight'
+import { HighlightedLayer, colorHighlightedLayer } from '../libs/highlight'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import '../maplibregl.css'
 import '../libs/maplibre-rtl'
@@ -17,26 +17,26 @@ import '../libs/maplibre-rtl'
 
 const IS_SUPPORTED = MapLibreGl.supported();
 
-function renderPopup(popup, mountNode) {
+function renderPopup(popup: JSX.Element, mountNode: ReactDOM.Container) {
   ReactDOM.render(popup, mountNode);
   return mountNode;
 }
 
-function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
+function buildInspectStyle(originalMapStyle: StyleSpecification, coloredLayers: HighlightedLayer[], highlightedLayer?: HighlightedLayer) {
   const backgroundLayer = {
     "id": "background",
     "type": "background",
     "paint": {
       "background-color": '#1c1f24',
     }
-  }
+  } as LayerSpecification
 
   const layer = colorHighlightedLayer(highlightedLayer)
   if(layer) {
     coloredLayers.push(layer)
   }
 
-  const sources = {}
+  const sources: {[key:string]: SourceSpecification} = {}
   Object.keys(originalMapStyle.sources).forEach(sourceId => {
     const source = originalMapStyle.sources[sourceId]
     if(source.type !== 'raster' && source.type !== 'raster-dem') {
@@ -47,32 +47,43 @@ function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
   const inspectStyle = {
     ...originalMapStyle,
     sources: sources,
-    layers: [backgroundLayer].concat(coloredLayers)
+    layers: [backgroundLayer].concat(coloredLayers as LayerSpecification[])
   }
   return inspectStyle
 }
 
-export default class MapMaplibreGl extends React.Component {
+type MapMaplibreGlProps = {
-  static propTypes = {
+  onDataChange?(...args: unknown[]): unknown
-    onDataChange: PropTypes.func,
+  onLayerSelect(...args: unknown[]): unknown
-    onLayerSelect: PropTypes.func.isRequired,
+  mapStyle: StyleSpecification
-    mapStyle: PropTypes.object.isRequired,
+  inspectModeEnabled: boolean
-    inspectModeEnabled: PropTypes.bool.isRequired,
+  highlightedLayer?: HighlightedLayer
-    highlightedLayer: PropTypes.object,
+  options?: MapOptions & {
-    options: PropTypes.object,
+    showTileBoundaries?: boolean
-    replaceAccessTokens: PropTypes.func.isRequired,
+    showCollisionBoxes?: boolean
-    onChange: PropTypes.func.isRequired,
+    showOverdrawInspector?: boolean
   }
+  replaceAccessTokens(mapStyle: StyleSpecification): StyleSpecification
+  onChange(...args: unknown[]): unknown
+};
 
+type MapMaplibreGlState = {
+  map: Map | null
+  inspect: MapboxInspect | null
+  zoom?: number
+};
+
+export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, MapMaplibreGlState> {
   static defaultProps = {
     onMapLoaded: () => {},
     onDataChange: () => {},
     onLayerSelect: () => {},
     onChange: () => {},
-    options: {},
+    options: {} as MapOptions,
   }
+  container: HTMLDivElement | null = null
 
-  constructor(props) {
+  constructor(props: MapMaplibreGlProps) {
     super(props)
     this.state = {
       map: null,
@@ -80,7 +91,7 @@ export default class MapMaplibreGl extends React.Component {
     }
   }
 
-  updateMapFromProps(props) {
+  updateMapFromProps(props: MapMaplibreGlProps) {
     if(!IS_SUPPORTED) return;
 
     if(!this.state.map) return
@@ -93,7 +104,7 @@ export default class MapMaplibreGl extends React.Component {
     )
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
+  shouldComponentUpdate(nextProps: MapMaplibreGlProps, nextState: MapMaplibreGlState) {
     let should = false;
     try {
       should = JSON.stringify(this.props) !== JSON.stringify(nextProps) || JSON.stringify(this.state) !== JSON.stringify(nextState);
@@ -103,7 +114,7 @@ export default class MapMaplibreGl extends React.Component {
     return should;
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate() {
     if(!IS_SUPPORTED) return;
 
     const map = this.state.map;
@@ -128,9 +139,9 @@ export default class MapMaplibreGl extends React.Component {
         }
       }
 
-      map.showTileBoundaries = this.props.options.showTileBoundaries;
+      map.showTileBoundaries = this.props.options?.showTileBoundaries!;
-      map.showCollisionBoxes = this.props.options.showCollisionBoxes;
+      map.showCollisionBoxes = this.props.options?.showCollisionBoxes!;
-      map.showOverdrawInspector = this.props.options.showOverdrawInspector;
+      map.showOverdrawInspector = this.props.options?.showOverdrawInspector!;
     }
   }
 
@@ -139,7 +150,7 @@ export default class MapMaplibreGl extends React.Component {
 
     const mapOpts = {
       ...this.props.options,
-      container: this.container,
+      container: this.container!,
       style: this.props.mapStyle,
       hash: true,
       maxZoom: 24
@@ -154,9 +165,9 @@ export default class MapMaplibreGl extends React.Component {
     }
     mapViewChange();
 
-    map.showTileBoundaries = mapOpts.showTileBoundaries;
+    map.showTileBoundaries = mapOpts.showTileBoundaries!;
-    map.showCollisionBoxes = mapOpts.showCollisionBoxes;
+    map.showCollisionBoxes = mapOpts.showCollisionBoxes!;
-    map.showOverdrawInspector = mapOpts.showOverdrawInspector;
+    map.showOverdrawInspector = mapOpts.showOverdrawInspector!;
 
     const zoomControl = new ZoomControl;
     map.addControl(zoomControl, 'top-right');
@@ -175,11 +186,11 @@ export default class MapMaplibreGl extends React.Component {
       showInspectMapPopupOnHover: true,
       showInspectButton: false,
       blockHoverPopupOnClick: true,
-      assignLayerColor: (layerId, alpha) => {
+      assignLayerColor: (layerId: string, alpha: number) => {
         return Color(colors.brightColor(layerId, alpha)).desaturate(0.5).string()
       },
-      buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
+      buildInspectStyle: (originalMapStyle: StyleSpecification, coloredLayers: HighlightedLayer[]) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
-      renderPopup: features => {
+      renderPopup: (features: InspectFeature[]) => {
         if(this.props.inspectModeEnabled) {
           return renderPopup(<MapMaplibreGlFeaturePropertyPopup features={features} />, tmpNode);
         } else {
@@ -199,7 +210,7 @@ export default class MapMaplibreGl extends React.Component {
 
     map.on("data", e => {
       if(e.dataType !== 'tile') return
-      this.props.onDataChange({
+      this.props.onDataChange!({
         map: this.state.map
       })
     })
@@ -208,7 +219,7 @@ export default class MapMaplibreGl extends React.Component {
       console.log("ERROR", e);
     })
 
-    map.on("zoom", e => {
+    map.on("zoom", _e => {
       this.setState({
         zoom: map.getZoom()
       });
@@ -218,7 +229,7 @@ export default class MapMaplibreGl extends React.Component {
     map.on("zoomend", mapViewChange);
   }
 
-  onLayerSelectById = (id) => {
+  onLayerSelectById = (id: string) => {
     const index = this.props.mapStyle.layers.findIndex(layer => layer.id === id);
     this.props.onLayerSelect(index);
   }

src/components/MapMaplibreGlFeaturePropertyPopup.tsx

@@ -1,9 +1,18 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import Block from './Block'
 import FieldString from './FieldString'
 
-function displayValue(value) {
+export type InspectFeature = {
+  id: string
+  properties: {[key:string]: any}
+  layer: {[key:string]: any}
+  geometry: GeoJSON.Geometry
+  sourceLayer: string
+  inspectModeCounter?: number
+  counter?: number
+}
+
+function displayValue(value: string | number | Date | object) {
   if (typeof value === 'undefined' || value === null) return value;
   if (value instanceof Date) return value.toLocaleString();
   if (typeof value === 'object' ||
@@ -12,7 +21,7 @@ function displayValue(value) {
   return value;
 }
 
-function renderProperties(feature) {
+function renderProperties(feature: InspectFeature) {
   return Object.keys(feature.properties).map(propertyName => {
     const property = feature.properties[propertyName]
     return <Block key={propertyName} label={propertyName}>
@@ -21,13 +30,13 @@ function renderProperties(feature) {
   })
 }
 
-function renderFeatureId(feature) {
+function renderFeatureId(feature: InspectFeature) {
   return <Block key={"feature-id"} label={"feature_id"}>
     <FieldString value={displayValue(feature.id)} style={{backgroundColor: 'transparent'}} />
   </Block>
   }
 
-function renderFeature(feature, idx) {
+function renderFeature(feature: InspectFeature, idx: number) {
   return <div key={`${feature.sourceLayer}-${idx}`}>
     <div className="maputnik-popup-layer-id">{feature.layer['source']}: {feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</div>
     <Block key={"property-type"} label={"$type"}>
@@ -38,8 +47,8 @@ function renderFeature(feature, idx) {
   </div>
 }
 
-function removeDuplicatedFeatures(features) {
+function removeDuplicatedFeatures(features: InspectFeature[]) {
-  let uniqueFeatures = [];
+  let uniqueFeatures: InspectFeature[] = [];
 
   features.forEach(feature => {
     const featureIndex = uniqueFeatures.findIndex(feature2 => {
@@ -50,8 +59,8 @@ function removeDuplicatedFeatures(features) {
     if(featureIndex === -1) {
       uniqueFeatures.push(feature)
     } else {
-      if(uniqueFeatures[featureIndex].hasOwnProperty('inspectModeCounter')) {
+      if('inspectModeCounter' in uniqueFeatures[featureIndex]) {
-        uniqueFeatures[featureIndex].inspectModeCounter++
+        uniqueFeatures[featureIndex].inspectModeCounter!++
       } else {
         uniqueFeatures[featureIndex].inspectModeCounter = 2
       }
@@ -61,11 +70,11 @@ function removeDuplicatedFeatures(features) {
   return uniqueFeatures
 }
 
-class FeaturePropertyPopup extends React.Component {
+type FeaturePropertyPopupProps = {
-  static propTypes = {
+  features: InspectFeature[]
-    features: PropTypes.array
+};
-  }
 
+class FeaturePropertyPopup extends React.Component<FeaturePropertyPopupProps> {
   render() {
     const features = removeDuplicatedFeatures(this.props.features)
     return <div className="maputnik-feature-property-popup">

src/components/MapMaplibreGlLayerPopup.tsx

@@ -1,18 +1,19 @@
 import React from 'react'
 import IconLayer from './IconLayer'
+import type {InspectFeature} from './MapMaplibreGlFeaturePropertyPopup';
 
-function groupFeaturesBySourceLayer(features: any[]) {
+function groupFeaturesBySourceLayer(features: InspectFeature[]) {
-  const sources = {} as any
+  const sources: {[key: string]: InspectFeature[]} = {}
 
-  let returnedFeatures = {} as any;
+  let returnedFeatures: {[key: string]: number} = {}
 
   features.forEach(feature => {
     if(returnedFeatures.hasOwnProperty(feature.layer.id)) {
       returnedFeatures[feature.layer.id]++
 
-      const featureObject = sources[feature.layer['source-layer']].find((f: any) => f.layer.id === feature.layer.id)
+      const featureObject = sources[feature.layer['source-layer']].find((f: InspectFeature) => f.layer.id === feature.layer.id)
 
-      featureObject.counter = returnedFeatures[feature.layer.id]
+      featureObject!.counter = returnedFeatures[feature.layer.id]
     } else {
       sources[feature.layer['source-layer']] = sources[feature.layer['source-layer']] || []
       sources[feature.layer['source-layer']].push(feature)
@@ -25,13 +26,13 @@ function groupFeaturesBySourceLayer(features: any[]) {
 }
 
 type FeatureLayerPopupProps = {
-  onLayerSelect(...args: unknown[]): unknown
+  onLayerSelect(layerId: string): unknown
-  features: any[]
+  features: InspectFeature[]
   zoom?: number
 };
 
 class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
-  _getFeatureColor(feature: any, _zoom?: number) {
+  _getFeatureColor(feature: InspectFeature, _zoom?: number) {
     // Guard because openlayers won't have this
     if (!feature.layer.paint) {
       return;
@@ -75,7 +76,7 @@ class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
     const sources = groupFeaturesBySourceLayer(this.props.features)
 
     const items = Object.keys(sources).map(vectorLayerId => {
-      const layers = sources[vectorLayerId].map((feature: any, idx: number) => {
+      const layers = sources[vectorLayerId].map((feature: InspectFeature, idx: number) => {
         const featureColor = this._getFeatureColor(feature, this.props.zoom);
 
         return <div

src/components/PropertyGroup.tsx

@@ -39,7 +39,7 @@ type PropertyGroupProps = {
   groupFields: string[]
   onChange(...args: unknown[]): unknown
   spec: any
-  errors?: unknown[]
+  errors?: {[key: string]: {message: string}}
 };
 
 export default class PropertyGroup extends React.Component<PropertyGroupProps> {

src/components/SingleFilterEditor.tsx

@@ -36,7 +36,7 @@ function parseFilter(v: string | boolean | number) {
 
 type SingleFilterEditorProps = {
   filter: any[]
-  onChange(...args: unknown[]): unknown
+  onChange(filter: any[]): unknown
   properties?: {[key: string]: string}
 };
 

src/components/_DataProperty.tsx

@@ -288,7 +288,7 @@ export default class DataProperty extends React.Component<DataPropertyProps, Dat
             <div className="maputnik-data-spec-property-input">
               <InputSelect
                 value={this.props.value!.type}
-                onChange={propVal => this.changeDataType(propVal)}
+                onChange={(propVal: string) => this.changeDataType(propVal)}
                 title={"Select a type of data scale (default is 'categorical')."}
                 options={this.getDataFunctionTypes(this.props.fieldSpec)}
               />

src/components/_ExpressionProperty.tsx

@@ -14,7 +14,7 @@ type ExpressionPropertyProps = {
   fieldType?: string
   fieldSpec?: object
   value?: any
-  errors?: {[key: string]: any}
+  errors?: {[key: string]: {message: string}}
   onChange?(...args: unknown[]): unknown
   onUndo?(...args: unknown[]): unknown
   canUndo?(...args: unknown[]): unknown
@@ -109,7 +109,8 @@ export default class ExpressionProperty extends React.Component<ExpressionProper
     }
 
     return <Block
-      error={foundErrors}
+      // this feels like an incorrect type...? `foundErrors` is an array of objects, not a single object
+      error={foundErrors as any}
       fieldSpec={this.props.fieldSpec}
       label={labelFromFieldName(this.props.fieldName)}
       action={deleteStopBtn}

src/components/_FieldId.tsx

@@ -8,7 +8,7 @@ type BlockIdProps = {
   value: string
   wdKey: string
   onChange(...args: unknown[]): unknown
-  error?: unknown[]
+  error?: {message: string}
 };
 
 export default class BlockId extends React.Component<BlockIdProps> {

src/components/_FieldMaxZoom.tsx

@@ -7,7 +7,7 @@ import FieldNumber from './FieldNumber'
 type BlockMaxZoomProps = {
   value?: number
   onChange(...args: unknown[]): unknown
-  error?: unknown[]
+  error?: {message: string}
 };
 
 export default class BlockMaxZoom extends React.Component<BlockMaxZoomProps> {

src/components/_FieldMinZoom.tsx

@@ -7,7 +7,7 @@ import FieldNumber from './FieldNumber'
 type BlockMinZoomProps = {
   value?: number
   onChange(...args: unknown[]): unknown
-  error?: unknown[]
+  error?: {message: string}
 };
 
 export default class BlockMinZoom extends React.Component<BlockMinZoomProps> {

src/components/_FieldSource.tsx

@@ -9,7 +9,7 @@ type BlockSourceProps = {
   wdKey?: string
   onChange?(...args: unknown[]): unknown
   sourceIds?: unknown[]
-  error?: unknown[]
+  error?: {message: string}
 };
 
 export default class BlockSource extends React.Component<BlockSourceProps> {

src/components/_FieldType.tsx

@@ -9,7 +9,7 @@ type BlockTypeProps = {
   value: string
   wdKey?: string
   onChange(...args: unknown[]): unknown
-  error?: unknown[]
+  error?: {message: string}
   disabled?: boolean
 };
 

src/components/_SpecProperty.tsx

@@ -13,7 +13,7 @@ type SpecPropertyProps = SpecFieldProps & {
   fieldType?: string
   fieldSpec?: any
   value?: any
-  errors?: unknown[]
+  errors?: {[key: string]: {message: string}}
   onExpressionClick?(...args: unknown[]): unknown
 };
 

src/components/_ZoomProperty.tsx

@@ -195,7 +195,7 @@ export default class ZoomProperty extends React.Component<ZoomPropertyProps, Zoo
             <div className="maputnik-data-spec-property-input">
               <InputSelect
                 value={"interpolate"}
-                onChange={propVal => this.changeDataType(propVal)}
+                onChange={(propVal: string) => this.changeDataType(propVal)}
                 title={"Select a type of data scale (default is 'categorical')."}
                 options={this.getDataFunctionTypes(this.props.fieldSpec!)}
               />

src/libs/highlight.ts

@@ -4,38 +4,40 @@ import stylegen from 'mapbox-gl-inspect/lib/stylegen'
 import colors from 'mapbox-gl-inspect/lib/colors'
 import {FilterSpecification,LayerSpecification } from '@maplibre/maplibre-gl-style-spec'
 
-export function colorHighlightedLayer(layer: LayerSpecification) {
+export type HighlightedLayer = LayerSpecification & {filter?: FilterSpecification};
-  if(!layer || layer.type === 'background' || layer.type === 'raster') return null
 
-  function changeLayer(l: LayerSpecification & {filter?: FilterSpecification}) {
+function changeLayer(l: HighlightedLayer, layer: LayerSpecification) {
-    if(l.type === 'circle') {
+  if(l.type === 'circle') {
-      l.paint!['circle-radius'] = 3
+    l.paint!['circle-radius'] = 3
-    } else if(l.type === 'line') {
+  } else if(l.type === 'line') {
-      l.paint!['line-width'] = 2
+    l.paint!['line-width'] = 2
-    }
-
-    if("filter" in layer) {
-      l.filter = layer.filter
-    } else {
-      delete l['filter']
-    }
-    l.id = l.id + '_highlight'
-    return l
   }
 
+  if("filter" in layer) {
+    l.filter = layer.filter
+  } else {
+    delete l['filter']
+  }
+  l.id = l.id + '_highlight'
+  return l
+}
+
+export function colorHighlightedLayer(layer?: LayerSpecification): HighlightedLayer | null {
+  if(!layer || layer.type === 'background' || layer.type === 'raster') return null
+
   const sourceLayerId = layer['source-layer'] || ''
   const color = colors.brightColor(sourceLayerId, 1);
 
   if(layer.type === "fill" || layer.type === 'fill-extrusion') {
-    return changeLayer(stylegen.polygonLayer(color, color, layer.source, layer['source-layer']))
+    return changeLayer(stylegen.polygonLayer(color, color, layer.source, layer['source-layer']), layer)
   }
 
   if(layer.type === "symbol" || layer.type === 'circle') {
-    return changeLayer(stylegen.circleLayer(color, layer.source, layer['source-layer']))
+    return changeLayer(stylegen.circleLayer(color, layer.source, layer['source-layer']), layer)
   }
 
   if(layer.type === 'line') {
-    return changeLayer(stylegen.lineLayer(color, layer.source, layer['source-layer']))
+    return changeLayer(stylegen.lineLayer(color, layer.source, layer['source-layer']), layer)
   }
 
   return null

src/libs/layer.ts

@@ -27,7 +27,7 @@ export function changeType(layer: LayerSpecification, newType: string) {
 /** A {@property} in either the paint our layout {@group} has changed
  * to a {@newValue}.
  */
-export function changeProperty(layer: LayerSpecification, group: keyof LayerSpecification, property: string, newValue: any) {
+export function changeProperty(layer: LayerSpecification, group: keyof LayerSpecification | null, property: string, newValue: any) {
   // Remove the property if undefined
   if(newValue === undefined) {
     if(group) {