Separate event types

src/components/map.tsx

@@ -8,7 +8,7 @@ import createRef, {MapRef} from '../mapbox/create-ref';
 import type {CSSProperties} from 'react';
 import useIsomorphicLayoutEffect from '../utils/use-isomorphic-layout-effect';
 import setGlobals, {GlobalSettings} from '../utils/set-globals';
-import type {MapLib, MapInstance, MapStyle} from '../types';
+import type {MapLib, MapInstance, MapStyle, Callbacks} from '../types';
 
 export type MapContextValue<MapT extends MapInstance = MapInstance> = {
   mapLib: MapLib<MapT>;
@@ -25,9 +25,10 @@ type MapInitOptions<MapOptions> = Omit<
 export type MapProps<
   MapOptions,
   StyleT extends MapStyle,
+  CallbacksT extends Callbacks,
   MapT extends MapInstance
 > = MapInitOptions<MapOptions> &
-  MapboxProps<StyleT, MapT> &
+  MapboxProps<StyleT, CallbacksT> &
   GlobalSettings & {
     mapLib?: MapLib<MapT> | Promise<MapLib<MapT>>;
     reuseMaps?: boolean;
@@ -38,21 +39,26 @@ export type MapProps<
     children?: any;
   };
 
-export default function Map<MapOptions, StyleT extends MapStyle, MapT extends MapInstance>(
-  props: MapProps<MapOptions, StyleT, MapT>,
+export default function Map<
+  MapOptions,
+  StyleT extends MapStyle,
+  CallbacksT extends Callbacks,
+  MapT extends MapInstance
+>(
+  props: MapProps<MapOptions, StyleT, CallbacksT, MapT>,
   ref: React.Ref<MapRef<MapT>>,
   defaultLib: MapLib<MapT> | Promise<MapLib<MapT>>
 ) {
   const mountedMapsContext = useContext(MountedMapsContext);
-  const [mapInstance, setMapInstance] = useState<Mapbox<StyleT, MapT>>(null);
+  const [mapInstance, setMapInstance] = useState<Mapbox<StyleT, CallbacksT, MapT>>(null);
   const containerRef = useRef();
 
   const {current: contextValue} = useRef<MapContextValue<MapT>>({mapLib: null, map: null});
 
   useEffect(() => {
     const mapLib = props.mapLib;
     let isMounted = true;
-    let mapbox: Mapbox<StyleT, MapT>;
+    let mapbox: Mapbox<StyleT, CallbacksT, MapT>;
 
     Promise.resolve(mapLib || defaultLib)
       .then((module: MapLib<MapT> | {default: MapLib<MapT>}) => {

src/components/source.ts

@@ -65,7 +65,9 @@ function updateSource<SourceT extends ISource>(
   const type = props.type;
 
   if (type === 'geojson') {
-    (source as GeoJSONSourceImplementation).setData((props as unknown as GeoJSONSource).data as any);
+    (source as GeoJSONSourceImplementation).setData(
+      (props as unknown as GeoJSONSource).data as any
+    );
   } else if (type === 'image') {
     (source as ImageSourceImplemtation).updateImage({
       url: (props as unknown as ImageSource).url,

src/exports-mapbox.ts

@@ -42,17 +42,18 @@ import {default as _Source, SourceProps as _SourceProps} from './components/sour
 import {useMap as _useMap} from './components/use-map';
 import type {MapRef as _MapRef} from './mapbox/create-ref';
 import type * as events from './types/events';
+import type {MapCallbacks} from './types/events-mapbox';
 
 export function useMap() {
   return _useMap<MapboxMap>();
 }
 
-export type MapProps = _MapProps<MapboxOptions, MapboxStyle, MapboxMap>;
+export type MapProps = _MapProps<MapboxOptions, MapboxStyle, MapCallbacks, MapboxMap>;
 export type MapRef = _MapRef<MapboxMap>;
 const mapLib = import('mapbox-gl');
 export const Map = (() => {
   return React.forwardRef(function Map(props: MapProps, ref: React.Ref<MapRef>) {
-    return _Map(props, ref, mapLib);
+    return _Map<MapboxOptions, MapboxStyle, MapCallbacks, MapboxMap>(props, ref, mapLib);
   });
 })();
 
@@ -115,17 +116,19 @@ export * from './types/public';
 export * from './types/style-spec-mapbox';
 
 // Events
-export type MapEvent = events.MapEvent<MapboxMap>;
-export type ErrorEvent = events.ErrorEvent<MapboxMap>;
-export type MapStyleDataEvent = events.MapStyleDataEvent<MapboxMap>;
-export type MapSourceDataEvent = events.MapSourceDataEvent<MapboxMap>;
-export type MapMouseEvent = events.MapMouseEvent<MapboxMap>;
-export type MapLayerMouseEvent = events.MapLayerMouseEvent<MapboxMap>;
-export type MapTouchEvent = events.MapTouchEvent<MapboxMap>;
-export type MapLayerTouchEvent = events.MapLayerTouchEvent<MapboxMap>;
-export type MapWheelEvent = events.MapWheelEvent<MapboxMap>;
-export type MapBoxZoomEvent = events.MapBoxZoomEvent<MapboxMap>;
-export type ViewStateChangeEvent = events.ViewStateChangeEvent<MapboxMap>;
+export {
+  MapEvent,
+  MapMouseEvent,
+  MapLayerMouseEvent,
+  MapTouchEvent,
+  MapLayerTouchEvent,
+  MapStyleDataEvent,
+  MapSourceDataEvent,
+  MapWheelEvent,
+  MapBoxZoomEvent,
+  ErrorEvent,
+  ViewStateChangeEvent
+} from './types/events-mapbox';
 export type PopupEvent = events.PopupEvent<MapboxPopup>;
 export type MarkerEvent = events.MarkerEvent<MapboxMarker>;
 export type MarkerDragEvent = events.MarkerDragEvent<MapboxMarker>;

src/exports-maplibre.ts

@@ -42,17 +42,18 @@ import {default as _Source, SourceProps as _SourceProps} from './components/sour
 import {useMap as _useMap} from './components/use-map';
 import type {MapRef as _MapRef} from './mapbox/create-ref';
 import type * as events from './types/events';
+import type {MapCallbacks} from './types/events-maplibre';
 
 export function useMap() {
   return _useMap<MaplibreMap>();
 }
 
-export type MapProps = _MapProps<MapOptions, MapboxStyle, MaplibreMap>;
+export type MapProps = _MapProps<MapOptions, MapboxStyle, MapCallbacks, MaplibreMap>;
 export type MapRef = _MapRef<MaplibreMap>;
 const mapLib = import('maplibre-gl');
 export const Map = (() => {
   return React.forwardRef(function Map(props: MapProps, ref: React.Ref<MapRef>) {
-    return _Map(props, ref, mapLib);
+    return _Map<MapOptions, MapboxStyle, MapCallbacks, MaplibreMap>(props, ref, mapLib);
   });
 })();
 
@@ -115,17 +116,19 @@ export * from './types/public';
 export * from './types/style-spec-maplibre';
 
 // Events
-export type MapEvent = events.MapEvent<MaplibreMap>;
-export type ErrorEvent = events.ErrorEvent<MaplibreMap>;
-export type MapStyleDataEvent = events.MapStyleDataEvent<MaplibreMap>;
-export type MapSourceDataEvent = events.MapSourceDataEvent<MaplibreMap>;
-export type MapMouseEvent = events.MapMouseEvent<MaplibreMap>;
-export type MapLayerMouseEvent = events.MapLayerMouseEvent<MaplibreMap>;
-export type MapTouchEvent = events.MapTouchEvent<MaplibreMap>;
-export type MapLayerTouchEvent = events.MapLayerTouchEvent<MaplibreMap>;
-export type MapWheelEvent = events.MapWheelEvent<MaplibreMap>;
-export type MapBoxZoomEvent = events.MapBoxZoomEvent<MaplibreMap>;
-export type ViewStateChangeEvent = events.ViewStateChangeEvent<MaplibreMap>;
+export {
+  MapEvent,
+  MapMouseEvent,
+  MapLayerMouseEvent,
+  MapTouchEvent,
+  MapLayerTouchEvent,
+  MapStyleDataEvent,
+  MapSourceDataEvent,
+  MapWheelEvent,
+  MapBoxZoomEvent,
+  ErrorEvent,
+  ViewStateChangeEvent
+} from './types/events-maplibre';
 export type PopupEvent = events.PopupEvent<MaplibrePopup>;
 export type MarkerEvent = events.MarkerEvent<MaplibreMarker>;
 export type MarkerDragEvent = events.MarkerDragEvent<MaplibreMarker>;

src/mapbox/create-ref.ts

@@ -1,4 +1,11 @@
-import type {MapInstance, MapInstanceInternal, MapStyle, LngLatLike, PointLike} from '../types';
+import type {
+  MapInstance,
+  MapInstanceInternal,
+  MapStyle,
+  Callbacks,
+  LngLatLike,
+  PointLike
+} from '../types';
 import type Mapbox from './mapbox';
 
 /** These methods may break the react binding if called directly */
@@ -29,9 +36,11 @@ export type MapRef<MapT extends MapInstance> = {
   getMap(): MapT;
 } & Omit<MapT, typeof skipMethods[number]>;
 
-export default function createRef<StyleT extends MapStyle, MapT extends MapInstance>(
-  mapInstance: Mapbox<StyleT, MapT>
-): MapRef<MapT> {
+export default function createRef<
+  StyleT extends MapStyle,
+  CallbacksT extends Callbacks,
+  MapT extends MapInstance
+>(mapInstance: Mapbox<StyleT, CallbacksT, MapT>): MapRef<MapT> {
   if (!mapInstance) {
     return null;
   }