react-map-gl - npm Package Compare versions

Comparing version 7.0.0-alpha.6 to 7.0.0-alpha.7

CHANGELOG.md

@@ -5,2 +5,7 @@ # CHANGELOG
 
+## 7.0.0-alpha.7 (Jan 17, 2022)
+
+- Improve typing (#1695)
+- [v7] Fix popup className update in mapbox v1/maplibre (#1694)
+
 ## 7.0.0-alpha.6 (Jan 9, 2022)
@@ -7,0 +12,0 @@

dist/es5/components/geolocate-control.d.ts

 /// <reference types="mapbox-gl" />
 import * as React from 'react';
-import type { ControlPosition, PositionOptions, FitBoundsOptions, MapboxEvent, GeolocateEvent, GeolocateErrorEvent } from '../types';
+import type { ControlPosition, PositionOptions, FitBoundsOptions, GeolocateEvent, GeolocateResultEvent, GeolocateErrorEvent } from '../types';
 export declare type GeolocateControlRef = {
@@ -42,3 +42,3 @@ /** Triggers a geolocate event */
     /** Called on each Geolocation API position update that returned as success. */
-    onGeolocate?: (e: GeolocateEvent) => void;
+    onGeolocate?: (e: GeolocateResultEvent) => void;
     /** Called on each Geolocation API position update that returned as an error. */
@@ -48,9 +48,9 @@ onError?: (e: GeolocateErrorEvent) => void;
      * is out of map `maxBounds`. */
-    onOutOfMaxBounds?: (e: GeolocateEvent) => void;
+    onOutOfMaxBounds?: (e: GeolocateResultEvent) => void;
     /** Called when the GeolocateControl changes to the active lock state. */
-    onTrackUserLocationStart?: (e: MapboxEvent) => void;
+    onTrackUserLocationStart?: (e: GeolocateEvent) => void;
     /** Called when the GeolocateControl changes to the background state. */
-    onTrackUserLocationEnd?: (e: MapboxEvent) => void;
+    onTrackUserLocationEnd?: (e: GeolocateEvent) => void;
 };
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<GeolocateControlProps & React.RefAttributes<GeolocateControlRef>>>;
 export default _default;

dist/es5/components/layer.js

@@ -13,2 +13,18 @@ "use strict";
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -77,3 +93,3 @@ var react_1 = require("react");
     var propsRef = (0, react_1.useRef)(props);
-    var _a = (0, react_1.useState)(0), setStyleLoaded = _a[1];
+    var _a = __read((0, react_1.useState)(0), 2), setStyleLoaded = _a[1];
     var id = (0, react_1.useMemo)(function () { return props.id || "jsx-layer-".concat(layerCounter++); }, []);
@@ -80,0 +96,0 @@ (0, react_1.useEffect)(function () {

dist/es5/components/map.d.ts

@@ -55,3 +55,3 @@ /// <reference types="mapbox-gl" />
     scrollZoom?: boolean | import("mapbox-gl").InteractiveOptions;
-    touchPitch?: boolean | import("mapbox-gl").InteractiveOptions;
+    touchPitch?: boolean;
     touchZoomRotate?: boolean | import("mapbox-gl").InteractiveOptions;
@@ -86,3 +86,2 @@ maxBounds?: import("mapbox-gl").LngLatBoundsLike;
     onContextMenu?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
-    onWheel?: (e: import("mapbox-gl").MapWheelEvent) => void;
     onTouchStart?: (e: import("mapbox-gl").MapLayerTouchEvent) => void;
@@ -107,5 +106,6 @@ onTouchEnd?: (e: import("mapbox-gl").MapLayerTouchEvent) => void;
     onPitchEnd?: (e: import("../types").ViewStateChangeEvent) => void;
-    onBoxZoomStart?: (e: import("../types").ViewStateChangeEvent) => void;
-    onBoxZoomEnd?: (e: import("../types").ViewStateChangeEvent) => void;
-    onBoxZoomCancel?: (e: import("../types").ViewStateChangeEvent) => void;
+    onWheel?: (e: import("mapbox-gl").MapWheelEvent) => void;
+    onBoxZoomStart?: (e: import("mapbox-gl").MapBoxZoomEvent) => void;
+    onBoxZoomEnd?: (e: import("mapbox-gl").MapBoxZoomEvent) => void;
+    onBoxZoomCancel?: (e: import("mapbox-gl").MapBoxZoomEvent) => void;
     onResize?: (e: import("mapbox-gl").MapboxEvent<undefined>) => void;
@@ -117,5 +117,5 @@ onLoad?: (e: import("mapbox-gl").MapboxEvent<undefined>) => void;
     onRemove?: (e: import("mapbox-gl").MapboxEvent<undefined>) => void;
-    onData?: (e: import("mapbox-gl").MapDataEvent) => void;
-    onStyleData?: (e: import("mapbox-gl").MapDataEvent) => void;
-    onSourceData?: (e: import("mapbox-gl").MapDataEvent) => void;
+    onData?: (e: import("mapbox-gl").MapSourceDataEvent | import("mapbox-gl").MapStyleDataEvent) => void;
+    onStyleData?: (e: import("mapbox-gl").MapStyleDataEvent) => void;
+    onSourceData?: (e: import("mapbox-gl").MapSourceDataEvent) => void;
 } & GlobalSettings & {
@@ -122,0 +122,0 @@ /** Map container id */

dist/es5/components/map.js

@@ -13,2 +13,18 @@ "use strict";
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -50,4 +66,4 @@ exports.MapContext = void 0;
     var mountedMapsContext = (0, react_1.useContext)(use_map_1.MountedMapsContext);
-    var _a = (0, react_1.useState)(null), mapInstance = _a[0], setMapInstance = _a[1];
-    var _b = (0, react_1.useState)(true), isSupported = _b[0], setIsSupported = _b[1];
+    var _a = __read((0, react_1.useState)(null), 2), mapInstance = _a[0], setMapInstance = _a[1];
+    var _b = __read((0, react_1.useState)(true), 2), isSupported = _b[0], setIsSupported = _b[1];
     var containerRef = (0, react_1.useRef)();
@@ -54,0 +70,0 @@ (0, react_1.useEffect)(function () {

dist/es5/components/popup.d.ts

 /// <reference types="mapbox-gl" />
 import * as React from 'react';
-import type { MapboxEvent, Anchor, PointLike } from '../types';
+import type { PopupEvent, Anchor, PointLike } from '../types';
 export declare type PopupProps = {
@@ -53,4 +53,4 @@ /** Longitude of the anchor location */
     maxWidth?: string;
-    onOpen?: (e: MapboxEvent) => void;
-    onClose?: (e: MapboxEvent) => void;
+    onOpen?: (e: PopupEvent) => void;
+    onClose?: (e: PopupEvent) => void;
     children?: React.ReactNode;
@@ -57,0 +57,0 @@ };

dist/es5/components/popup.js

@@ -13,2 +13,13 @@ "use strict";
 };
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -22,3 +33,8 @@ /* global document */
 var deep_equal_1 = require("../utils/deep-equal");
+// Adapted from https://github.com/mapbox/mapbox-gl-js/blob/v1.13.0/src/ui/popup.js
+function getClassList(className) {
+    return new Set(className ? className.trim().split(/\s+/) : []);
+}
 function Popup(props) {
+    var e_1, _a, e_2, _b;
     var map = (0, react_1.useContext)(map_1.MapContext);
@@ -62,11 +78,39 @@ var container = (0, react_1.useMemo)(function () {
         }
-        // Adapted from https://github.com/mapbox/mapbox-gl-js/blob/main/src/ui/popup.js
         // @ts-ignore
         if (popup.options.className !== props.className) {
             // @ts-ignore
+            var prevClassList = getClassList(popup.options.className);
+            var nextClassList = getClassList(props.className);
+            try {
+                for (var prevClassList_1 = __values(prevClassList), prevClassList_1_1 = prevClassList_1.next(); !prevClassList_1_1.done; prevClassList_1_1 = prevClassList_1.next()) {
+                    var c = prevClassList_1_1.value;
+                    if (!nextClassList.has(c)) {
+                        popup.removeClassName(c);
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (prevClassList_1_1 && !prevClassList_1_1.done && (_a = prevClassList_1.return)) _a.call(prevClassList_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            try {
+                for (var nextClassList_1 = __values(nextClassList), nextClassList_1_1 = nextClassList_1.next(); !nextClassList_1_1.done; nextClassList_1_1 = nextClassList_1.next()) {
+                    var c = nextClassList_1_1.value;
+                    if (!prevClassList.has(c)) {
+                        popup.addClassName(c);
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (nextClassList_1_1 && !nextClassList_1_1.done && (_b = nextClassList_1.return)) _b.call(nextClassList_1);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            // @ts-ignore
             popup.options.className = props.className;
-            // @ts-ignore
-            popup._classList = new Set(props.className ? props.className.trim().split(/\s+/) : []);
-            // @ts-ignore
-            popup._updateClassList();
         }
@@ -73,0 +117,0 @@ }

dist/es5/components/source.js

@@ -13,2 +13,18 @@ "use strict";
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -84,3 +100,3 @@ var React = require("react");
     var propsRef = (0, react_1.useRef)(props);
-    var _a = (0, react_1.useState)(0), setStyleLoaded = _a[1];
+    var _a = __read((0, react_1.useState)(0), 2), setStyleLoaded = _a[1];
     var id = (0, react_1.useMemo)(function () { return props.id || "jsx-source-".concat(sourceCounter++); }, []);
@@ -87,0 +103,0 @@ (0, react_1.useEffect)(function () {

dist/es5/components/use-map.js

@@ -13,2 +13,18 @@ "use strict";
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -20,3 +36,3 @@ exports.useMap = exports.MapProvider = exports.MountedMapsContext = void 0;
 var MapProvider = function (props) {
-    var _a = (0, react_1.useState)({}), maps = _a[0], setMaps = _a[1];
+    var _a = __read((0, react_1.useState)({}), 2), maps = _a[0], setMaps = _a[1];
     var onMapMount = (0, react_1.useCallback)(function (map, id) {
@@ -23,0 +39,0 @@ if (id === void 0) { id = 'default'; }

dist/es5/index.d.ts

@@ -21,3 +21,3 @@ export { default } from './components/map';
 export type { FullscreenControlProps } from './components/fullscreen-control';
-export type { GeolocateControlProps } from './components/geolocate-control';
+export type { GeolocateControlProps, GeolocateControlRef } from './components/geolocate-control';
 export type { NavigationControlProps } from './components/navigation-control';
@@ -24,0 +24,0 @@ export type { ScaleControlProps } from './components/scale-control';

dist/es5/mapbox/create-ref.js

 "use strict";
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -28,2 +39,3 @@ var mapboxgl_1 = require("../utils/mapboxgl");
 function createRef(mapInstance) {
+    var e_1, _a;
     if (!mapInstance) {
@@ -49,9 +61,18 @@ return null;
     };
-    for (var _i = 0, _a = getMethodNames(map); _i < _a.length; _i++) {
-        var key = _a[_i];
-        // @ts-expect-error
-        if (!(key in result) && !skipMethods.includes(key)) {
-            result[key] = map[key].bind(map);
+    try {
+        for (var _b = __values(getMethodNames(map)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var key = _c.value;
+            // @ts-expect-error
+            if (!(key in result) && !skipMethods.includes(key)) {
+                result[key] = map[key].bind(map);
+            }
         }
     }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
     return result;
@@ -61,14 +82,24 @@ }
 function getMethodNames(obj) {
+    var e_2, _a;
     var result = new Set();
     var proto = obj;
     while (proto) {
-        for (var _i = 0, _a = Object.getOwnPropertyNames(proto); _i < _a.length; _i++) {
-            var key = _a[_i];
-            if (key[0] !== '_' &&
-                typeof obj[key] === 'function' &&
-                key !== 'fire' &&
-                key !== 'setEventedParent') {
-                result.add(key);
+        try {
+            for (var _b = (e_2 = void 0, __values(Object.getOwnPropertyNames(proto))), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var key = _c.value;
+                if (key[0] !== '_' &&
+                    typeof obj[key] === 'function' &&
+                    key !== 'fire' &&
+                    key !== 'setEventedParent') {
+                    result.add(key);
+                }
             }
         }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
         proto = Object.getPrototypeOf(proto);
@@ -75,0 +106,0 @@ }

dist/es5/mapbox/mapbox.d.ts

 /// <reference types="mapbox-gl" />
-import type { Transform, ProjectionSpecification, ViewState, ViewStateChangeEvent, DragPanOptions, InteractiveOptions, TransformRequestFunction, Light, Fog, TerrainSpecification, MapboxStyle, ImmutableLike, LngLatBoundsLike, FitBoundsOptions, MapMouseEvent, MapLayerMouseEvent, MapLayerTouchEvent, MapWheelEvent, MapDataEvent, MapboxEvent, ErrorEvent, MapboxMap } from '../types';
+import type { Transform, ProjectionSpecification, ViewState, ViewStateChangeEvent, DragPanOptions, ZoomRotateOptions, TransformRequestFunction, Light, Fog, TerrainSpecification, MapboxStyle, ImmutableLike, LngLatBoundsLike, FitBoundsOptions, MapMouseEvent, MapLayerMouseEvent, MapLayerTouchEvent, MapWheelEvent, MapBoxZoomEvent, MapStyleDataEvent, MapSourceDataEvent, MapboxEvent, ErrorEvent, MapboxMap } from '../types';
 export declare type MapboxProps = Partial<ViewState> & {
@@ -183,3 +183,3 @@ mapboxAccessToken?: string;
      */
-    scrollZoom?: boolean | InteractiveOptions;
+    scrollZoom?: boolean | ZoomRotateOptions;
     /**
@@ -190,3 +190,3 @@ * If `true`, the "drag to pitch" interaction is enabled.
      */
-    touchPitch?: boolean | InteractiveOptions;
+    touchPitch?: boolean;
     /**
@@ -197,3 +197,3 @@ * If `true`, the "pinch to rotate and zoom" interaction is enabled.
      */
-    touchZoomRotate?: boolean | InteractiveOptions;
+    touchZoomRotate?: boolean | ZoomRotateOptions;
     /** If set, the map is constrained to the given bounds. */
@@ -251,3 +251,2 @@ maxBounds?: LngLatBoundsLike;
     onContextMenu?: (e: MapLayerMouseEvent) => void;
-    onWheel?: (e: MapWheelEvent) => void;
     onTouchStart?: (e: MapLayerTouchEvent) => void;
@@ -272,5 +271,6 @@ onTouchEnd?: (e: MapLayerTouchEvent) => void;
     onPitchEnd?: (e: ViewStateChangeEvent) => void;
-    onBoxZoomStart?: (e: ViewStateChangeEvent) => void;
-    onBoxZoomEnd?: (e: ViewStateChangeEvent) => void;
-    onBoxZoomCancel?: (e: ViewStateChangeEvent) => void;
+    onWheel?: (e: MapWheelEvent) => void;
+    onBoxZoomStart?: (e: MapBoxZoomEvent) => void;
+    onBoxZoomEnd?: (e: MapBoxZoomEvent) => void;
+    onBoxZoomCancel?: (e: MapBoxZoomEvent) => void;
     onResize?: (e: MapboxEvent) => void;
@@ -282,5 +282,5 @@ onLoad?: (e: MapboxEvent) => void;
     onRemove?: (e: MapboxEvent) => void;
-    onData?: (e: MapDataEvent) => void;
-    onStyleData?: (e: MapDataEvent) => void;
-    onSourceData?: (e: MapDataEvent) => void;
+    onData?: (e: MapStyleDataEvent | MapSourceDataEvent) => void;
+    onStyleData?: (e: MapStyleDataEvent) => void;
+    onSourceData?: (e: MapSourceDataEvent) => void;
 };
@@ -287,0 +287,0 @@ /**

dist/es5/mapbox/mapbox.js

@@ -13,2 +13,13 @@ "use strict";
 };
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -49,9 +60,9 @@ var transform_1 = require("../utils/transform");
     pitch: 'onPitch',
-    pitchend: 'onPitchEnd',
-    boxzoomstart: 'onBoxZoomStart',
-    boxzoomend: 'onBoxZoomEnd',
-    boxzoomcancel: 'onBoxZoomCancel'
+    pitchend: 'onPitchEnd'
 };
 var otherEvents = {
     wheel: 'onWheel',
+    boxzoomstart: 'onBoxZoomStart',
+    boxzoomend: 'onBoxZoomEnd',
+    boxzoomcancel: 'onBoxZoomCancel',
     resize: 'onResize',
@@ -293,11 +304,21 @@ load: 'onLoad',
     Mapbox.prototype._updateSettings = function (nextProps, currProps) {
+        var e_1, _a;
         var map = this._map;
         var changed = false;
-        for (var _i = 0, settingNames_1 = settingNames; _i < settingNames_1.length; _i++) {
-            var propName = settingNames_1[_i];
-            if (propName in nextProps && !(0, deep_equal_1.deepEqual)(nextProps[propName], currProps[propName])) {
-                changed = true;
-                map["set".concat(propName[0].toUpperCase()).concat(propName.slice(1))](nextProps[propName]);
+        try {
+            for (var settingNames_1 = __values(settingNames), settingNames_1_1 = settingNames_1.next(); !settingNames_1_1.done; settingNames_1_1 = settingNames_1.next()) {
+                var propName = settingNames_1_1.value;
+                if (propName in nextProps && !(0, deep_equal_1.deepEqual)(nextProps[propName], currProps[propName])) {
+                    changed = true;
+                    map["set".concat(propName[0].toUpperCase()).concat(propName.slice(1))](nextProps[propName]);
+                }
             }
         }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (settingNames_1_1 && !settingNames_1_1.done && (_a = settingNames_1.return)) _a.call(settingNames_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
         return changed;
@@ -358,17 +379,27 @@ };
     Mapbox.prototype._updateHandlers = function (nextProps, currProps) {
+        var e_2, _a;
         var map = this._map;
         var changed = false;
-        for (var _i = 0, handlerNames_1 = handlerNames; _i < handlerNames_1.length; _i++) {
-            var propName = handlerNames_1[_i];
-            var newValue = nextProps[propName];
-            if (!(0, deep_equal_1.deepEqual)(newValue, currProps[propName])) {
-                changed = true;
-                if (newValue) {
-                    map[propName].enable(newValue);
+        try {
+            for (var handlerNames_1 = __values(handlerNames), handlerNames_1_1 = handlerNames_1.next(); !handlerNames_1_1.done; handlerNames_1_1 = handlerNames_1.next()) {
+                var propName = handlerNames_1_1.value;
+                var newValue = nextProps[propName];
+                if (!(0, deep_equal_1.deepEqual)(newValue, currProps[propName])) {
+                    changed = true;
+                    if (newValue) {
+                        map[propName].enable(newValue);
+                    }
+                    else {
+                        map[propName].disable();
+                    }
                 }
-                else {
-                    map[propName].disable();
-                }
             }
         }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (handlerNames_1_1 && !handlerNames_1_1.done && (_a = handlerNames_1.return)) _a.call(handlerNames_1);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
         return changed;
@@ -375,0 +406,0 @@ };

dist/es5/types/external.d.ts

@@ -1,2 +0,2 @@
-import type { PaddingOptions, MapboxEvent, LngLat } from 'mapbox-gl';
+import type { PaddingOptions, MapboxEvent, Popup, Marker, GeolocateControl, LngLat } from 'mapbox-gl';
 /** Defines the projection that the map should be rendered in */
@@ -27,10 +27,24 @@ export declare type ProjectionSpecification = {
 }
-export declare type ViewStateChangeEvent = MapboxEvent & {
+export declare type ViewStateChangeEvent = (MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & {
+    type: 'movestart' | 'move' | 'moveend' | 'zoomstart' | 'zoom' | 'zoomend';
     viewState: ViewState;
+}) | (MapboxEvent<MouseEvent | TouchEvent | undefined> & {
+    type: 'rotatestart' | 'rotate' | 'rotateend' | 'dragstart' | 'drag' | 'dragend' | 'pitchstart' | 'pitch' | 'pitchend';
+    viewState: ViewState;
+});
+export declare type PopupEvent = {
+    type: 'open' | 'close';
+    target: Popup;
 };
-export declare type MarkerDragEvent = MapboxEvent & {
+export declare type MarkerDragEvent = {
+    type: 'dragstart' | 'drag' | 'dragend';
+    target: Marker;
     lngLat: LngLat;
 };
-export declare type GeolocateEvent = MapboxEvent & GeolocationPosition;
-export declare type GeolocateErrorEvent = MapboxEvent & GeolocationPositionError;
-export type { Point, PointLike, LngLat, LngLatLike, LngLatBounds, LngLatBoundsLike, Anchor, Alignment, PaddingOptions, PositionOptions, FitBoundsOptions, DragPanOptions, InteractiveOptions, TransformRequestFunction, Light, Fog, TerrainSpecification, Style as MapboxStyle, BackgroundLayer, CircleLayer, FillExtrusionLayer, FillLayer, HeatmapLayer, HillshadeLayer, LineLayer, RasterLayer, SymbolLayer, CustomLayerInterface, SkyLayer, GeoJSONSourceRaw, VideoSourceRaw, ImageSourceRaw, CanvasSourceRaw, GeoJSONSource, VideoSource, ImageSource, CanvasSource, VectorSourceImpl, VectorSource, RasterSource, RasterDemSource, MapMouseEvent, MapLayerMouseEvent, MapLayerTouchEvent, MapWheelEvent, MapDataEvent, MapboxEvent, ErrorEvent, MapboxGeoJSONFeature, IControl, Map as MapboxMap } from 'mapbox-gl';
+export declare type GeolocateEvent = {
+    type: string;
+    target: GeolocateControl;
+};
+export declare type GeolocateResultEvent = GeolocateEvent & GeolocationPosition;
+export declare type GeolocateErrorEvent = GeolocateEvent & GeolocationPositionError;
+export type { Point, PointLike, LngLat, LngLatLike, LngLatBounds, LngLatBoundsLike, Anchor, Alignment, PaddingOptions, PositionOptions, FitBoundsOptions, DragPanOptions, InteractiveOptions as ZoomRotateOptions, TransformRequestFunction, Light, Fog, TerrainSpecification, Style as MapboxStyle, BackgroundLayer, CircleLayer, FillExtrusionLayer, FillLayer, HeatmapLayer, HillshadeLayer, LineLayer, RasterLayer, SymbolLayer, CustomLayerInterface, SkyLayer, GeoJSONSourceRaw, VideoSourceRaw, ImageSourceRaw, CanvasSourceRaw, GeoJSONSource, VideoSource, ImageSource, CanvasSource, VectorSourceImpl as VectorTileSource, VectorSource as VectorSourceRaw, RasterSource, RasterDemSource, MapLayerMouseEvent, MapLayerTouchEvent, MapBoxZoomEvent, MapWheelEvent, MapStyleDataEvent, MapSourceDataEvent, MapboxEvent, ErrorEvent, MapboxGeoJSONFeature, IControl, Map as MapboxMap } from 'mapbox-gl';

dist/es5/types/index.d.ts

 import { PaddingOptions, LngLat, Point, LngLatBounds } from 'mapbox-gl';
 export * from './external';
-export type { AnyLayer, AnySourceData, AnySourceImpl, Popup as MapboxPopup } from 'mapbox-gl';
+export type { AnyLayer, AnySourceData, AnySourceImpl, MapMouseEvent, Popup as MapboxPopup } from 'mapbox-gl';
 /**
@@ -5,0 +5,0 @@ * Stub for mapbox's Transform class

dist/es5/utils/deep-equal.js

 "use strict";
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -25,2 +36,3 @@ exports.deepEqual = exports.arePointsEqual = void 0;
 function deepEqual(a, b) {
+    var e_1, _a;
     if (a === b) {
@@ -52,10 +64,19 @@ return true;
         }
-        for (var _i = 0, aKeys_1 = aKeys; _i < aKeys_1.length; _i++) {
-            var key = aKeys_1[_i];
-            if (!b.hasOwnProperty(key)) {
-                return false;
+        try {
+            for (var aKeys_1 = __values(aKeys), aKeys_1_1 = aKeys_1.next(); !aKeys_1_1.done; aKeys_1_1 = aKeys_1.next()) {
+                var key = aKeys_1_1.value;
+                if (!b.hasOwnProperty(key)) {
+                    return false;
+                }
+                if (!deepEqual(a[key], b[key])) {
+                    return false;
+                }
             }
-            if (!deepEqual(a[key], b[key])) {
-                return false;
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (aKeys_1_1 && !aKeys_1_1.done && (_a = aKeys_1.return)) _a.call(aKeys_1);
             }
+            finally { if (e_1) throw e_1.error; }
         }
@@ -62,0 +83,0 @@ return true;

dist/es5/utils/set-globals.js

 "use strict";
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -12,8 +23,18 @@ var mapboxgl_1 = require("./mapboxgl");
 function setGlobals(props) {
-    for (var _i = 0, globalSettings_1 = globalSettings; _i < globalSettings_1.length; _i++) {
-        var key = globalSettings_1[_i];
-        if (key in props) {
-            mapboxgl_1.default[key] = props[key];
+    var e_1, _a;
+    try {
+        for (var globalSettings_1 = __values(globalSettings), globalSettings_1_1 = globalSettings_1.next(); !globalSettings_1_1.done; globalSettings_1_1 = globalSettings_1.next()) {
+            var key = globalSettings_1_1.value;
+            if (key in props) {
+                mapboxgl_1.default[key] = props[key];
+            }
         }
     }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (globalSettings_1_1 && !globalSettings_1_1.done && (_a = globalSettings_1.return)) _a.call(globalSettings_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
     if (props.RTLTextPlugin && mapboxgl_1.default.getRTLTextPluginStatus() === 'unavailable') {
@@ -20,0 +41,0 @@ mapboxgl_1.default.setRTLTextPlugin(props.RTLTextPlugin, function (error) {

dist/es5/utils/style-utils.js

@@ -13,2 +13,13 @@ "use strict";
 };
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -21,2 +32,3 @@ exports.normalizeStyle = void 0;
 function normalizeStyle(style) {
+    var e_1, _a;
     if (!style) {
@@ -35,7 +47,17 @@ return null;
     var layerIndex = {};
-    for (var _i = 0, _a = style.layers; _i < _a.length; _i++) {
-        var layer = _a[_i];
-        layerIndex[layer.id] = layer;
+    try {
+        for (var _b = __values(style.layers), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var layer = _c.value;
+            layerIndex[layer.id] = layer;
+        }
     }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
     var layers = style.layers.map(function (layer) {
+        var e_2, _a;
         // @ts-expect-error
@@ -53,9 +75,18 @@ var layerRef = layerIndex[layer.ref];
             delete normalizedLayer.ref;
-            // https://github.com/mapbox/mapbox-gl-js/blob/master/src/style-spec/deref.js
-            for (var _i = 0, refProps_1 = refProps; _i < refProps_1.length; _i++) {
-                var propName = refProps_1[_i];
-                if (propName in layerRef) {
-                    normalizedLayer[propName] = layerRef[propName];
+            try {
+                // https://github.com/mapbox/mapbox-gl-js/blob/master/src/style-spec/deref.js
+                for (var refProps_1 = __values(refProps), refProps_1_1 = refProps_1.next(); !refProps_1_1.done; refProps_1_1 = refProps_1.next()) {
+                    var propName = refProps_1_1.value;
+                    if (propName in layerRef) {
+                        normalizedLayer[propName] = layerRef[propName];
+                    }
                 }
             }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (refProps_1_1 && !refProps_1_1.done && (_a = refProps_1.return)) _a.call(refProps_1);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
         }
@@ -62,0 +93,0 @@ return normalizedLayer || layer;

dist/esm/components/geolocate-control.d.ts

 /// <reference types="mapbox-gl" />
 import * as React from 'react';
-import type { ControlPosition, PositionOptions, FitBoundsOptions, MapboxEvent, GeolocateEvent, GeolocateErrorEvent } from '../types';
+import type { ControlPosition, PositionOptions, FitBoundsOptions, GeolocateEvent, GeolocateResultEvent, GeolocateErrorEvent } from '../types';
 export declare type GeolocateControlRef = {
@@ -42,3 +42,3 @@ /** Triggers a geolocate event */
     /** Called on each Geolocation API position update that returned as success. */
-    onGeolocate?: (e: GeolocateEvent) => void;
+    onGeolocate?: (e: GeolocateResultEvent) => void;
     /** Called on each Geolocation API position update that returned as an error. */
@@ -48,9 +48,9 @@ onError?: (e: GeolocateErrorEvent) => void;
      * is out of map `maxBounds`. */
-    onOutOfMaxBounds?: (e: GeolocateEvent) => void;
+    onOutOfMaxBounds?: (e: GeolocateResultEvent) => void;
     /** Called when the GeolocateControl changes to the active lock state. */
-    onTrackUserLocationStart?: (e: MapboxEvent) => void;
+    onTrackUserLocationStart?: (e: GeolocateEvent) => void;
     /** Called when the GeolocateControl changes to the background state. */
-    onTrackUserLocationEnd?: (e: MapboxEvent) => void;
+    onTrackUserLocationEnd?: (e: GeolocateEvent) => void;
 };
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<GeolocateControlProps & React.RefAttributes<GeolocateControlRef>>>;
 export default _default;

dist/esm/components/map.d.ts

@@ -55,3 +55,3 @@ /// <reference types="mapbox-gl" />
     scrollZoom?: boolean | import("mapbox-gl").InteractiveOptions;
-    touchPitch?: boolean | import("mapbox-gl").InteractiveOptions;
+    touchPitch?: boolean;
     touchZoomRotate?: boolean | import("mapbox-gl").InteractiveOptions;
@@ -86,3 +86,2 @@ maxBounds?: import("mapbox-gl").LngLatBoundsLike;
     onContextMenu?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
-    onWheel?: (e: import("mapbox-gl").MapWheelEvent) => void;
     onTouchStart?: (e: import("mapbox-gl").MapLayerTouchEvent) => void;
@@ -107,5 +106,6 @@ onTouchEnd?: (e: import("mapbox-gl").MapLayerTouchEvent) => void;
     onPitchEnd?: (e: import("../types").ViewStateChangeEvent) => void;
-    onBoxZoomStart?: (e: import("../types").ViewStateChangeEvent) => void;
-    onBoxZoomEnd?: (e: import("../types").ViewStateChangeEvent) => void;
-    onBoxZoomCancel?: (e: import("../types").ViewStateChangeEvent) => void;
+    onWheel?: (e: import("mapbox-gl").MapWheelEvent) => void;
+    onBoxZoomStart?: (e: import("mapbox-gl").MapBoxZoomEvent) => void;
+    onBoxZoomEnd?: (e: import("mapbox-gl").MapBoxZoomEvent) => void;
+    onBoxZoomCancel?: (e: import("mapbox-gl").MapBoxZoomEvent) => void;
     onResize?: (e: import("mapbox-gl").MapboxEvent<undefined>) => void;
@@ -117,5 +117,5 @@ onLoad?: (e: import("mapbox-gl").MapboxEvent<undefined>) => void;
     onRemove?: (e: import("mapbox-gl").MapboxEvent<undefined>) => void;
-    onData?: (e: import("mapbox-gl").MapDataEvent) => void;
-    onStyleData?: (e: import("mapbox-gl").MapDataEvent) => void;
-    onSourceData?: (e: import("mapbox-gl").MapDataEvent) => void;
+    onData?: (e: import("mapbox-gl").MapSourceDataEvent | import("mapbox-gl").MapStyleDataEvent) => void;
+    onStyleData?: (e: import("mapbox-gl").MapStyleDataEvent) => void;
+    onSourceData?: (e: import("mapbox-gl").MapSourceDataEvent) => void;
 } & GlobalSettings & {
@@ -122,0 +122,0 @@ /** Map container id */

dist/esm/components/popup.d.ts

 /// <reference types="mapbox-gl" />
 import * as React from 'react';
-import type { MapboxEvent, Anchor, PointLike } from '../types';
+import type { PopupEvent, Anchor, PointLike } from '../types';
 export declare type PopupProps = {
@@ -53,4 +53,4 @@ /** Longitude of the anchor location */
     maxWidth?: string;
-    onOpen?: (e: MapboxEvent) => void;
-    onClose?: (e: MapboxEvent) => void;
+    onOpen?: (e: PopupEvent) => void;
+    onClose?: (e: PopupEvent) => void;
     children?: React.ReactNode;
@@ -57,0 +57,0 @@ };

dist/esm/components/popup.js

@@ -8,2 +8,6 @@ /* global document */
 import { deepEqual } from '../utils/deep-equal';
+// Adapted from https://github.com/mapbox/mapbox-gl-js/blob/v1.13.0/src/ui/popup.js
+function getClassList(className) {
+    return new Set(className ? className.trim().split(/\s+/) : []);
+}
 function Popup(props) {
@@ -46,11 +50,19 @@ const map = useContext(MapContext);
         }
-        // Adapted from https://github.com/mapbox/mapbox-gl-js/blob/main/src/ui/popup.js
         // @ts-ignore
         if (popup.options.className !== props.className) {
             // @ts-ignore
+            const prevClassList = getClassList(popup.options.className);
+            const nextClassList = getClassList(props.className);
+            for (const c of prevClassList) {
+                if (!nextClassList.has(c)) {
+                    popup.removeClassName(c);
+                }
+            }
+            for (const c of nextClassList) {
+                if (!prevClassList.has(c)) {
+                    popup.addClassName(c);
+                }
+            }
+            // @ts-ignore
             popup.options.className = props.className;
-            // @ts-ignore
-            popup._classList = new Set(props.className ? props.className.trim().split(/\s+/) : []);
-            // @ts-ignore
-            popup._updateClassList();
         }
@@ -57,0 +69,0 @@ }

dist/esm/index.d.ts

@@ -21,3 +21,3 @@ export { default } from './components/map';
 export type { FullscreenControlProps } from './components/fullscreen-control';
-export type { GeolocateControlProps } from './components/geolocate-control';
+export type { GeolocateControlProps, GeolocateControlRef } from './components/geolocate-control';
 export type { NavigationControlProps } from './components/navigation-control';
@@ -24,0 +24,0 @@ export type { ScaleControlProps } from './components/scale-control';

dist/esm/mapbox/mapbox.d.ts

 /// <reference types="mapbox-gl" />
-import type { Transform, ProjectionSpecification, ViewState, ViewStateChangeEvent, DragPanOptions, InteractiveOptions, TransformRequestFunction, Light, Fog, TerrainSpecification, MapboxStyle, ImmutableLike, LngLatBoundsLike, FitBoundsOptions, MapMouseEvent, MapLayerMouseEvent, MapLayerTouchEvent, MapWheelEvent, MapDataEvent, MapboxEvent, ErrorEvent, MapboxMap } from '../types';
+import type { Transform, ProjectionSpecification, ViewState, ViewStateChangeEvent, DragPanOptions, ZoomRotateOptions, TransformRequestFunction, Light, Fog, TerrainSpecification, MapboxStyle, ImmutableLike, LngLatBoundsLike, FitBoundsOptions, MapMouseEvent, MapLayerMouseEvent, MapLayerTouchEvent, MapWheelEvent, MapBoxZoomEvent, MapStyleDataEvent, MapSourceDataEvent, MapboxEvent, ErrorEvent, MapboxMap } from '../types';
 export declare type MapboxProps = Partial<ViewState> & {
@@ -183,3 +183,3 @@ mapboxAccessToken?: string;
      */
-    scrollZoom?: boolean | InteractiveOptions;
+    scrollZoom?: boolean | ZoomRotateOptions;
     /**
@@ -190,3 +190,3 @@ * If `true`, the "drag to pitch" interaction is enabled.
      */
-    touchPitch?: boolean | InteractiveOptions;
+    touchPitch?: boolean;
     /**
@@ -197,3 +197,3 @@ * If `true`, the "pinch to rotate and zoom" interaction is enabled.
      */
-    touchZoomRotate?: boolean | InteractiveOptions;
+    touchZoomRotate?: boolean | ZoomRotateOptions;
     /** If set, the map is constrained to the given bounds. */
@@ -251,3 +251,2 @@ maxBounds?: LngLatBoundsLike;
     onContextMenu?: (e: MapLayerMouseEvent) => void;
-    onWheel?: (e: MapWheelEvent) => void;
     onTouchStart?: (e: MapLayerTouchEvent) => void;
@@ -272,5 +271,6 @@ onTouchEnd?: (e: MapLayerTouchEvent) => void;
     onPitchEnd?: (e: ViewStateChangeEvent) => void;
-    onBoxZoomStart?: (e: ViewStateChangeEvent) => void;
-    onBoxZoomEnd?: (e: ViewStateChangeEvent) => void;
-    onBoxZoomCancel?: (e: ViewStateChangeEvent) => void;
+    onWheel?: (e: MapWheelEvent) => void;
+    onBoxZoomStart?: (e: MapBoxZoomEvent) => void;
+    onBoxZoomEnd?: (e: MapBoxZoomEvent) => void;
+    onBoxZoomCancel?: (e: MapBoxZoomEvent) => void;
     onResize?: (e: MapboxEvent) => void;
@@ -282,5 +282,5 @@ onLoad?: (e: MapboxEvent) => void;
     onRemove?: (e: MapboxEvent) => void;
-    onData?: (e: MapDataEvent) => void;
-    onStyleData?: (e: MapDataEvent) => void;
-    onSourceData?: (e: MapDataEvent) => void;
+    onData?: (e: MapStyleDataEvent | MapSourceDataEvent) => void;
+    onStyleData?: (e: MapStyleDataEvent) => void;
+    onSourceData?: (e: MapSourceDataEvent) => void;
 };
@@ -287,0 +287,0 @@ /**

dist/esm/mapbox/mapbox.js

@@ -35,9 +35,9 @@ import { transformToViewState, applyViewStateToTransform } from '../utils/transform';
     pitch: 'onPitch',
-    pitchend: 'onPitchEnd',
-    boxzoomstart: 'onBoxZoomStart',
-    boxzoomend: 'onBoxZoomEnd',
-    boxzoomcancel: 'onBoxZoomCancel'
+    pitchend: 'onPitchEnd'
 };
 const otherEvents = {
     wheel: 'onWheel',
+    boxzoomstart: 'onBoxZoomStart',
+    boxzoomend: 'onBoxZoomEnd',
+    boxzoomcancel: 'onBoxZoomCancel',
     resize: 'onResize',
@@ -44,0 +44,0 @@ load: 'onLoad',

dist/esm/types/external.d.ts

@@ -1,2 +0,2 @@
-import type { PaddingOptions, MapboxEvent, LngLat } from 'mapbox-gl';
+import type { PaddingOptions, MapboxEvent, Popup, Marker, GeolocateControl, LngLat } from 'mapbox-gl';
 /** Defines the projection that the map should be rendered in */
@@ -27,10 +27,24 @@ export declare type ProjectionSpecification = {
 }
-export declare type ViewStateChangeEvent = MapboxEvent & {
+export declare type ViewStateChangeEvent = (MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & {
+    type: 'movestart' | 'move' | 'moveend' | 'zoomstart' | 'zoom' | 'zoomend';
     viewState: ViewState;
+}) | (MapboxEvent<MouseEvent | TouchEvent | undefined> & {
+    type: 'rotatestart' | 'rotate' | 'rotateend' | 'dragstart' | 'drag' | 'dragend' | 'pitchstart' | 'pitch' | 'pitchend';
+    viewState: ViewState;
+});
+export declare type PopupEvent = {
+    type: 'open' | 'close';
+    target: Popup;
 };
-export declare type MarkerDragEvent = MapboxEvent & {
+export declare type MarkerDragEvent = {
+    type: 'dragstart' | 'drag' | 'dragend';
+    target: Marker;
     lngLat: LngLat;
 };
-export declare type GeolocateEvent = MapboxEvent & GeolocationPosition;
-export declare type GeolocateErrorEvent = MapboxEvent & GeolocationPositionError;
-export type { Point, PointLike, LngLat, LngLatLike, LngLatBounds, LngLatBoundsLike, Anchor, Alignment, PaddingOptions, PositionOptions, FitBoundsOptions, DragPanOptions, InteractiveOptions, TransformRequestFunction, Light, Fog, TerrainSpecification, Style as MapboxStyle, BackgroundLayer, CircleLayer, FillExtrusionLayer, FillLayer, HeatmapLayer, HillshadeLayer, LineLayer, RasterLayer, SymbolLayer, CustomLayerInterface, SkyLayer, GeoJSONSourceRaw, VideoSourceRaw, ImageSourceRaw, CanvasSourceRaw, GeoJSONSource, VideoSource, ImageSource, CanvasSource, VectorSourceImpl, VectorSource, RasterSource, RasterDemSource, MapMouseEvent, MapLayerMouseEvent, MapLayerTouchEvent, MapWheelEvent, MapDataEvent, MapboxEvent, ErrorEvent, MapboxGeoJSONFeature, IControl, Map as MapboxMap } from 'mapbox-gl';
+export declare type GeolocateEvent = {
+    type: string;
+    target: GeolocateControl;
+};
+export declare type GeolocateResultEvent = GeolocateEvent & GeolocationPosition;
+export declare type GeolocateErrorEvent = GeolocateEvent & GeolocationPositionError;
+export type { Point, PointLike, LngLat, LngLatLike, LngLatBounds, LngLatBoundsLike, Anchor, Alignment, PaddingOptions, PositionOptions, FitBoundsOptions, DragPanOptions, InteractiveOptions as ZoomRotateOptions, TransformRequestFunction, Light, Fog, TerrainSpecification, Style as MapboxStyle, BackgroundLayer, CircleLayer, FillExtrusionLayer, FillLayer, HeatmapLayer, HillshadeLayer, LineLayer, RasterLayer, SymbolLayer, CustomLayerInterface, SkyLayer, GeoJSONSourceRaw, VideoSourceRaw, ImageSourceRaw, CanvasSourceRaw, GeoJSONSource, VideoSource, ImageSource, CanvasSource, VectorSourceImpl as VectorTileSource, VectorSource as VectorSourceRaw, RasterSource, RasterDemSource, MapLayerMouseEvent, MapLayerTouchEvent, MapBoxZoomEvent, MapWheelEvent, MapStyleDataEvent, MapSourceDataEvent, MapboxEvent, ErrorEvent, MapboxGeoJSONFeature, IControl, Map as MapboxMap } from 'mapbox-gl';

dist/esm/types/index.d.ts

 import { PaddingOptions, LngLat, Point, LngLatBounds } from 'mapbox-gl';
 export * from './external';
-export type { AnyLayer, AnySourceData, AnySourceImpl, Popup as MapboxPopup } from 'mapbox-gl';
+export type { AnyLayer, AnySourceData, AnySourceImpl, MapMouseEvent, Popup as MapboxPopup } from 'mapbox-gl';
 /**
@@ -5,0 +5,0 @@ * Stub for mapbox's Transform class

package.json

 {
   "name": "react-map-gl",
   "description": "React components for Mapbox GL JS-compatible libraries",
-  "version": "7.0.0-alpha.6",
+  "version": "7.0.0-alpha.7",
   "keywords": [
@@ -6,0 +6,0 @@ "mapbox",

src/components/geolocate-control.ts

@@ -12,2 +12,3 @@ import * as React from 'react';
   GeolocateEvent,
+  GeolocateResultEvent,
   GeolocateErrorEvent
@@ -56,3 +57,3 @@ } from '../types';
   /** Called on each Geolocation API position update that returned as success. */
-  onGeolocate?: (e: GeolocateEvent) => void;
+  onGeolocate?: (e: GeolocateResultEvent) => void;
   /** Called on each Geolocation API position update that returned as an error. */
@@ -62,7 +63,7 @@ onError?: (e: GeolocateErrorEvent) => void;
    * is out of map `maxBounds`. */
-  onOutOfMaxBounds?: (e: GeolocateEvent) => void;
+  onOutOfMaxBounds?: (e: GeolocateResultEvent) => void;
   /** Called when the GeolocateControl changes to the active lock state. */
-  onTrackUserLocationStart?: (e: MapboxEvent) => void;
+  onTrackUserLocationStart?: (e: GeolocateEvent) => void;
   /** Called when the GeolocateControl changes to the background state. */
-  onTrackUserLocationEnd?: (e: MapboxEvent) => void;
+  onTrackUserLocationEnd?: (e: GeolocateEvent) => void;
 };
@@ -78,3 +79,3 @@
       gc.on('geolocate', e => {
-        thisRef.current.props.onGeolocate?.(e as GeolocateEvent);
+        thisRef.current.props.onGeolocate?.(e as GeolocateResultEvent);
       });
@@ -85,9 +86,9 @@ gc.on('error', e => {
       gc.on('outofmaxbounds', e => {
-        thisRef.current.props.onOutOfMaxBounds?.(e as GeolocateEvent);
+        thisRef.current.props.onOutOfMaxBounds?.(e as GeolocateResultEvent);
       });
       gc.on('trackuserlocationstart', e => {
-        thisRef.current.props.onTrackUserLocationStart?.(e as MapboxEvent);
+        thisRef.current.props.onTrackUserLocationStart?.(e as GeolocateEvent);
       });
       gc.on('trackuserlocationend', e => {
-        thisRef.current.props.onTrackUserLocationEnd?.(e as MapboxEvent);
+        thisRef.current.props.onTrackUserLocationEnd?.(e as GeolocateEvent);
       });
@@ -94,0 +95,0 @@

src/components/popup.ts

@@ -7,3 +7,3 @@ /* global document */
 import mapboxgl from '../utils/mapboxgl';
-import type {MapboxEvent, Anchor, PointLike} from '../types';
+import type {PopupEvent, Anchor, PointLike} from '../types';
 
@@ -61,7 +61,12 @@ import {MapContext} from './map';
 
-  onOpen?: (e: MapboxEvent) => void;
-  onClose?: (e: MapboxEvent) => void;
+  onOpen?: (e: PopupEvent) => void;
+  onClose?: (e: PopupEvent) => void;
   children?: React.ReactNode;
 };
 
+// Adapted from https://github.com/mapbox/mapbox-gl-js/blob/v1.13.0/src/ui/popup.js
+function getClassList(className: string) {
+  return new Set(className ? className.trim().split(/\s+/) : []);
+}
+
 function Popup(props: PopupProps) {
@@ -81,6 +86,6 @@ const map = useContext(MapContext);
     popup.on('open', e => {
-      thisRef.current.props.onOpen?.(e as MapboxEvent);
+      thisRef.current.props.onOpen?.(e as PopupEvent);
     });
     popup.on('close', e => {
-      thisRef.current.props.onClose?.(e as MapboxEvent);
+      thisRef.current.props.onClose?.(e as PopupEvent);
     });
@@ -108,11 +113,20 @@ popup.setDOMContent(container).addTo(map);
     }
-    // Adapted from https://github.com/mapbox/mapbox-gl-js/blob/main/src/ui/popup.js
     // @ts-ignore
     if (popup.options.className !== props.className) {
       // @ts-ignore
+      const prevClassList = getClassList(popup.options.className);
+      const nextClassList = getClassList(props.className);
+
+      for (const c of prevClassList) {
+        if (!nextClassList.has(c)) {
+          popup.removeClassName(c);
+        }
+      }
+      for (const c of nextClassList) {
+        if (!prevClassList.has(c)) {
+          popup.addClassName(c);
+        }
+      }
+      // @ts-ignore
       popup.options.className = props.className;
-      // @ts-ignore
-      popup._classList = new Set(props.className ? props.className.trim().split(/\s+/) : []);
-      // @ts-ignore
-      popup._updateClassList();
     }
@@ -119,0 +133,0 @@ }

src/index.ts

@@ -24,3 +24,3 @@ export {default} from './components/map';
 export type {FullscreenControlProps} from './components/fullscreen-control';
-export type {GeolocateControlProps} from './components/geolocate-control';
+export type {GeolocateControlProps, GeolocateControlRef} from './components/geolocate-control';
 export type {NavigationControlProps} from './components/navigation-control';
@@ -27,0 +27,0 @@ export type {ScaleControlProps} from './components/scale-control';

src/mapbox/mapbox.ts

@@ -11,3 +11,3 @@ import {transformToViewState, applyViewStateToTransform} from '../utils/transform';
   DragPanOptions,
-  InteractiveOptions,
+  ZoomRotateOptions,
   TransformRequestFunction,
@@ -25,3 +25,5 @@ Light,
   MapWheelEvent,
-  MapDataEvent,
+  MapBoxZoomEvent,
+  MapStyleDataEvent,
+  MapSourceDataEvent,
   MapboxEvent,
@@ -218,3 +220,3 @@ ErrorEvent,
    */
-  scrollZoom?: boolean | InteractiveOptions;
+  scrollZoom?: boolean | ZoomRotateOptions;
   /**
@@ -225,3 +227,3 @@ * If `true`, the "drag to pitch" interaction is enabled.
    */
-  touchPitch?: boolean | InteractiveOptions;
+  touchPitch?: boolean;
   /**
@@ -232,3 +234,3 @@ * If `true`, the "pinch to rotate and zoom" interaction is enabled.
    */
-  touchZoomRotate?: boolean | InteractiveOptions;
+  touchZoomRotate?: boolean | ZoomRotateOptions;
 
@@ -295,3 +297,2 @@ // Constraints
   onContextMenu?: (e: MapLayerMouseEvent) => void;
-  onWheel?: (e: MapWheelEvent) => void;
   onTouchStart?: (e: MapLayerTouchEvent) => void;
@@ -317,6 +318,8 @@ onTouchEnd?: (e: MapLayerTouchEvent) => void;
   onPitchEnd?: (e: ViewStateChangeEvent) => void;
-  onBoxZoomStart?: (e: ViewStateChangeEvent) => void;
-  onBoxZoomEnd?: (e: ViewStateChangeEvent) => void;
-  onBoxZoomCancel?: (e: ViewStateChangeEvent) => void;
 
+  onWheel?: (e: MapWheelEvent) => void;
+  onBoxZoomStart?: (e: MapBoxZoomEvent) => void;
+  onBoxZoomEnd?: (e: MapBoxZoomEvent) => void;
+  onBoxZoomCancel?: (e: MapBoxZoomEvent) => void;
+
   onResize?: (e: MapboxEvent) => void;
@@ -328,5 +331,5 @@ onLoad?: (e: MapboxEvent) => void;
   onRemove?: (e: MapboxEvent) => void;
-  onData?: (e: MapDataEvent) => void;
-  onStyleData?: (e: MapDataEvent) => void;
-  onSourceData?: (e: MapDataEvent) => void;
+  onData?: (e: MapStyleDataEvent | MapSourceDataEvent) => void;
+  onStyleData?: (e: MapStyleDataEvent) => void;
+  onSourceData?: (e: MapSourceDataEvent) => void;
 };
@@ -365,9 +368,9 @@
   pitch: 'onPitch',
-  pitchend: 'onPitchEnd',
-  boxzoomstart: 'onBoxZoomStart',
-  boxzoomend: 'onBoxZoomEnd',
-  boxzoomcancel: 'onBoxZoomCancel'
+  pitchend: 'onPitchEnd'
 };
 const otherEvents = {
   wheel: 'onWheel',
+  boxzoomstart: 'onBoxZoomStart',
+  boxzoomend: 'onBoxZoomEnd',
+  boxzoomcancel: 'onBoxZoomCancel',
   resize: 'onResize',
@@ -374,0 +377,0 @@ load: 'onLoad',

src/types/external.ts

@@ -1,2 +0,2 @@
-import type {PaddingOptions, MapboxEvent, LngLat} from 'mapbox-gl';
+import type {PaddingOptions, MapboxEvent, Popup, Marker, GeolocateControl, LngLat} from 'mapbox-gl';
 
@@ -41,14 +41,41 @@ /** Defines the projection that the map should be rendered in */
 
-export type ViewStateChangeEvent = MapboxEvent & {
-  viewState: ViewState;
+export type ViewStateChangeEvent =
+  | (MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & {
+      type: 'movestart' | 'move' | 'moveend' | 'zoomstart' | 'zoom' | 'zoomend';
+      viewState: ViewState;
+    })
+  | (MapboxEvent<MouseEvent | TouchEvent | undefined> & {
+      type:
+        | 'rotatestart'
+        | 'rotate'
+        | 'rotateend'
+        | 'dragstart'
+        | 'drag'
+        | 'dragend'
+        | 'pitchstart'
+        | 'pitch'
+        | 'pitchend';
+      viewState: ViewState;
+    });
+
+export type PopupEvent = {
+  type: 'open' | 'close';
+  target: Popup;
 };
 
-export type MarkerDragEvent = MapboxEvent & {
+export type MarkerDragEvent = {
+  type: 'dragstart' | 'drag' | 'dragend';
+  target: Marker;
   lngLat: LngLat;
 };
 
-export type GeolocateEvent = MapboxEvent & GeolocationPosition;
+export type GeolocateEvent = {
+  type: string;
+  target: GeolocateControl;
+};
 
-export type GeolocateErrorEvent = MapboxEvent & GeolocationPositionError;
+export type GeolocateResultEvent = GeolocateEvent & GeolocationPosition;
 
+export type GeolocateErrorEvent = GeolocateEvent & GeolocationPositionError;
+
 /* re-export mapbox types */
@@ -69,3 +96,3 @@
   DragPanOptions,
-  InteractiveOptions,
+  InteractiveOptions as ZoomRotateOptions,
   TransformRequestFunction,
@@ -95,11 +122,12 @@ Light,
   CanvasSource,
-  VectorSourceImpl,
-  VectorSource,
+  VectorSourceImpl as VectorTileSource,
+  VectorSource as VectorSourceRaw,
   RasterSource,
   RasterDemSource,
-  MapMouseEvent,
   MapLayerMouseEvent,
   MapLayerTouchEvent,
+  MapBoxZoomEvent,
   MapWheelEvent,
-  MapDataEvent,
+  MapStyleDataEvent,
+  MapSourceDataEvent,
   MapboxEvent,
@@ -106,0 +134,0 @@ ErrorEvent,

src/types/index.ts

@@ -6,3 +6,9 @@ import {PaddingOptions, LngLat, Point, LngLatBounds} from 'mapbox-gl';
 // re-export mapbox types
-export type {AnyLayer, AnySourceData, AnySourceImpl, Popup as MapboxPopup} from 'mapbox-gl';
+export type {
+  AnyLayer,
+  AnySourceData,
+  AnySourceImpl,
+  MapMouseEvent,
+  Popup as MapboxPopup
+} from 'mapbox-gl';
 
@@ -9,0 +15,0 @@ /**

No alert changes

Improved metrics

Total package byte prevSize

395465

increased by3.61%

Lines of code

7037

increased by4.95%

No dependency changes