fix: update maplibre and mapbix types versions and add missing options

Author: Joxit

.gitignore

@@ -103,3 +103,4 @@ dist
 # TernJS port file
 .tern-port
 docs/
+package-lock.json

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jawg/types",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Shared TypeScript definitions for Jawg Maps projects",
   "types": "./index.d.ts",
   "typeScriptVersion": "2.3",
@@ -44,7 +44,7 @@
   "dependencies": {
     "@types/geojson": "^7946.0.7",
     "@types/leaflet": "^1.7.3",
-    "@types/mapbox-gl": "^2.3.1",
-    "@types/maplibre-gl": "^1.13.1"
+    "@types/mapbox-gl": "^1.13.2",
+    "maplibre-gl": "^1.15.2"
   }
 }

src/places-js.d.ts

@@ -3,6 +3,8 @@
 /// <reference types="mapbox-gl" />
 /// <reference types="maplibre-gl" />
 
+import L = require('leaflet');
+
 declare class AbstractPlaces {
   constructor(options: JawgPlaces.JawgPlacesOptions);
   /**
@@ -151,7 +153,7 @@ declare namespace JawgPlaces {
     accessToken?: string;
     /**
      * The `<input>` to transform into a geocoding search bar.
-     * This can be either a id (e.g `#my-input`), class selector (e.g `.my-input`) or the {@link HTMLElement}.
+     * This can be either a id (e.g `#my-input`), class selector (e.g `.my-input`) or the [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).
      * With some frameworks/UI libs such as React, you can't use the ref here.
      */
     input?: string | HTMLElement;
@@ -321,14 +323,20 @@ declare namespace JawgPlaces {
    * Options for {@link JawgPlaces.MapLibre} and {@link JawgPlaces.Mapbox}
    */
   interface JawgPlacesMaplibreOptions extends JawgPlacesOptions {
+    /**
+     * The custom `<div>` that will contain the input and geocoding results when Places JS is used as MapLibre Control.
+     * By default this is generated by Jawg Places JS.
+     * With some frameworks/UI libs such as React, you can't use the ref here.
+     */
+    container?: string | HTMLElement;
     /**
      * Placeholder text to add when the input in generated by the library.
      */
     placeholder?: string;
     /**
      * Class to add to the input when it's generated by the library.
      */
-    inputClasses?: string;
+    inputClasses?: string | string[];
     /**
      * Option to show administrative area when available.
      */
@@ -341,20 +349,30 @@ declare namespace JawgPlaces {
      * Option to configure transition on result selection.
      */
     transition?: MapGLTransitionOptions;
+    /**
+     * Set a custom message when no results are found. This can be disabled.
+     */
+    noResultsMessage?: string | false;
   }
 
   /**
    * Options for {@link JawgPlaces.Leaflet}
    */
   interface JawgPlacesLeafletOptions extends JawgPlacesOptions {
+    /**
+     * The custom `<div>` that will contain the input and geocoding results when Places JS is used as Leaflet Control.
+     * By default this is generated by Jawg Places JS.
+     * With some frameworks/UI libs such as React, you can't use the ref here.
+     */
+    container?: string | HTMLElement;
     /**
      * Placeholder text to add when the input in generated by the library.
      */
     placeholder?: string;
     /**
      * Class to add to the input when it's generated by the library.
      */
-    inputClasses?: string;
+    inputClasses?: string | string[];
     /**
      * Option to show administrative area when available.
      */
@@ -367,14 +385,18 @@ declare namespace JawgPlaces {
      * Option to configure transition on result selection.
      */
     transition?: LeafletTransitionOptions;
+    /**
+     * Set a custom message when no results are found. This can be disabled.
+     */
+    noResultsMessage?: string | false;
     /**
      * Position of the input on the map.
      */
     position?: 'topleft' | 'topright' | 'bottomleft' | 'bottomright';
     /**
      * The Leaflet instance for marker creation
      */
-    L: any;
+    L: typeof L;
   }
 
   /**
@@ -388,18 +410,20 @@ declare namespace JawgPlaces {
    * This class will help you to add or use search bar for geocoding with a MapLibre GL JS map.
    */
   class MapLibre extends AbstractPlaces {
-    constructor(options: JawgPlacesMaplibreOptions);
+    constructor(options?: JawgPlacesMaplibreOptions);
     /**
-     * This is the function used by MapLibre and Mapbox when you add a {@link mapboxgl.Control}.
+     * This is the function used by MapLibre and Mapbox when you add a [maplibre.IControl](https://maplibre.org/maplibre-gl-js-docs/api/markers/#icontrol) or [mapboxgl.IControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol).
      * Adds the control to the given map.
-     * @param map from MapLibre or Mapbox
+     * @param map from [MapLibre](https://maplibre.org/maplibre-gl-js-docs/api/map/) or [Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/map/)
+     * @returns the generated control container
      */
-    onAdd(map: mapboxgl.Map): HTMLElement;
+    onAdd(map: maplibregl.Map | mapboxgl.Map): HTMLElement;
     /**
-     * When Jawg Places is not used as a control within your map, you will need to call this function.
-     * @param map from MapLibre or Mapbox
+     * When Jawg Places **is not used** as a control within your map, you will need to call this function.
+     * @param map from [MapLibre](https://maplibre.org/maplibre-gl-js-docs/api/map/) or [Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/map/)
+     * @returns itself
      */
-    attachMap(map: mapboxgl.Map): MapLibre | Mapbox;
+    attachMap(map: maplibregl.Map | mapboxgl.Map): MapLibre;
     /**
      * The default position of the control in the map.
      */
@@ -409,17 +433,20 @@ declare namespace JawgPlaces {
   /**
    * This class will help you to add or use search bar for geocoding with a Mapbox GL JS map.
    */
-  class Mapbox extends MapLibre {}
+  class Mapbox extends MapLibre {
+    attachMap(map: maplibregl.Map | mapboxgl.Map): Mapbox;
+  }
 
   /**
    * This class will help you to add or use search bar for geocoding with a Leaflet map.
    */
   class Leaflet extends AbstractPlaces {
     constructor(options: JawgPlacesLeafletOptions);
     /**
-     * This is the function used by Leaflet when you add a {@link L.Control}.
+     * This is the function used by Leaflet when you add a [L.Control](https://leafletjs.com/reference-1.7.1.html#control).
      * Adds the control to the given map.
-     * @param map from Leaflet
+     * @param map from [Leaflet](https://leafletjs.com/reference-1.7.1.html#map-example)
+     * @returns the generated control container
      */
     onAdd(map: L.Map): void;
     /**
@@ -428,12 +455,13 @@ declare namespace JawgPlaces {
     getPosition(): string;
     /**
      * Adds the control to the given map.
-     * @param map from leaflet
+     * @param map from [Leaflet](https://leafletjs.com/reference-1.7.1.html#map-example)
      */
     addTo(map: L.Map): void;
     /**
-     * When Jawg Places is not used as a control within your map, you will need to call this function.
-     * @param map from Leaflet
+     * When Jawg Places **is not used** as a control within your map, you will need to call this function.
+     * @param map from [Leaflet](https://leafletjs.com/reference-1.7.1.html#map-example)
+     * @returns itself
      */
     attachMap(map: L.Map): Leaflet;
   }

test/places-js.ts

@@ -1,9 +1,9 @@
 import { Map as MapboxGLMap } from 'mapbox-gl';
 import { Map as MapLibreGLMap } from 'maplibre-gl';
+import L = require('leaflet');
 import { JawgPlaces } from '../';
 
-
-new JawgPlaces.Input({input: '', accessToken: '<Access-Token>'})
-new JawgPlaces.MapLibre({input: '', accessToken: '<Access-Token>'})
-new JawgPlaces.Mapbox({input: '', accessToken: '<Access-Token>'}).attachMap(new MapboxGLMap())
-new JawgPlaces.Leaflet({input: '', accessToken: '<Access-Token>', L: {}})
+new JawgPlaces.Input({ input: '', accessToken: '<Access-Token>' });
+new JawgPlaces.MapLibre({ input: '', accessToken: '<Access-Token>' }).attachMap(new MapLibreGLMap());
+new JawgPlaces.Mapbox({ input: '', accessToken: '<Access-Token>' }).attachMap(new MapboxGLMap());
+new JawgPlaces.Leaflet({ input: '', accessToken: '<Access-Token>', L }).attachMap(new L.Map('my-map'));