@mapbox/search-js-web - npm Package Compare versions

Comparing version 1.0.0-beta.7 to 1.0.0-beta.8

dist/autofill.d.ts

@@ -20,4 +20,61 @@ import { AutofillOptions, AutofillRetrieveResponse, AutofillSuggestionResponse, Evented, MapboxAutofill } from '@mapbox/search-js-core';
 interface EventTypes<AutofillSuggestionResponse, AutofillRetrieveResponse> {
+    /**
+     * Fired when the user is typing in the input and provides a list of suggestions.
+     *
+     * The underlying response from {@link MapboxAutofill} is passed as the event's detail,
+     * while the responsible input is passed as the event's target.
+     *
+     * @event suggest
+     * @instance
+     * @memberof AutofillCollection
+     * @type {AutofillSuggestionResponse}
+     * @example
+     * ```typescript
+     * collection.addEventListener('suggest', (event) => {
+     *   const suggestions = event.detail.suggestions;
+     *   const inputEl = event.target;
+     *   // ...
+     * });
+     * ```
+     */
     suggest: MapboxHTMLEvent<AutofillSuggestionResponse>;
+    /**
+     * Fired when {@link MapboxAutofill} has errored providing a list of suggestions.
+     *
+     * The underlying error is passed as the event's detail,
+     * while the responsible input is passed as the event's target.
+     *
+     * @event suggesterror
+     * @instance
+     * @memberof AutofillCollection
+     * @type {Error}
+     * @example
+     * ```typescript
+     * collection.addEventListener('suggesterror', (event) => {
+     *   const error = event.detail;
+     *   const inputEl = event.target;
+     *   // ...
+     * });
+     * ```
+     */
     suggesterror: MapboxHTMLEvent<Error>;
+    /**
+     * Fired when the user has selected a suggestion, before the form is autofilled.
+     *
+     * The underlying response from {@link MapboxAutofill} is passed as the event's detail,
+     * while the responsible input is passed as the event's target.
+     *
+     * @event retrieve
+     * @instance
+     * @memberof AutofillCollection
+     * @type {AutofillRetrieveResponse}
+     * @example
+     * ```typescript
+     * autofill.addEventListener('retrieve', (event) => {
+     *   const featureCollection = event.detail;
+     *   const inputEl = event.target;
+     *   // ...
+     * });
+     * ```
+     */
     retrieve: MapboxHTMLEvent<AutofillRetrieveResponse>;
@@ -27,2 +84,4 @@ }
 /**
+ * Underlying collection object class returned by the {@link autofill} function.
+ *
  * @class AutofillCollection
@@ -85,2 +144,7 @@ */
      * when this is called and to call {@link AutofillCollection#unobserve} when finished.
+     *
+     * @example
+     * ```typescript
+     * collection.observe();
+     * ```
      */
@@ -91,2 +155,7 @@ observe(): void;
      * after {@link AutofillCollection#observe}.
+     *
+     * @example
+     * ```typescript
+     * collection.unobserve();
+     * ```
      */
@@ -99,3 +168,3 @@ unobserve(): void;
  * Compared to {@link MapboxAddressAutofill}, this function automatically attaches
- * to eligible inputs in place.
+ * to eligible [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text) elements in-place.
  *
@@ -112,10 +181,10 @@ * You must have a [Mapbox access token](https://www.mapbox.com/help/create-api-access-token/).
  * @param optionsArg
- * @param {string} optionsArg.accessToken
- * @param {Partial<AutofillOptions>} [optionsArg.options]
+ * @param {string} optionsArg.accessToken - A [Mapbox access token](https://www.mapbox.com/help/create-api-access-token/).
+ * @param {Partial<AutofillOptions>} [optionsArg.options] - Options to set on the underlying Autofill API.
  * @example
  * <input type="text" autocomplete="street-address" />
  * <script>
- * autofill({
+ * mapboxsearch.autofill({
  *   accessToken: 'pk.my.token',
- *   options: {}
+ *   options: { country: 'us' }
  * };
@@ -125,3 +194,3 @@ * </script>
  * ```typescript
- * const collection = mapboxsearch.autofill({
+ * const collection = autofill({
  *   accessToken: 'pk.my.token',
@@ -128,0 +197,0 @@ *   options

dist/components/MapboxAddressConfirmation.d.ts

@@ -7,2 +7,24 @@ import { AutofillFeatureSuggestion, AutofillOptions } from '@mapbox/search-js-core';
 import { Theme } from '../theme';
+import { MapboxAddressMinimap } from './MapboxAddressMinimap';
+/**
+ * Styling and theming options for a {@link MapboxAddressMinimap} embedded inside a confirmation dialog.
+ *
+ * @typedef ConfirmationMinimapOptions
+ * @example
+ * ```typescript
+ * const result = await confirmAddress(form, {
+ *   accessToken: 'abc-123',
+ *   minimap: {
+ *     defaultMapStyle: ['mapbox', 'outdoors-v11'],
+ *     theme: { icons: { marker: MARKER_SVG } },
+ *     mapStyleMode: 'default',
+ *     satelliteToggle: true
+ *   }
+ * });
+ * ```
+ */
+export declare type ConfirmationMinimapOptions = Partial<Pick<MapboxAddressMinimap, 'defaultMapStyle' | 'theme' | 'mapStyleMode' | 'satelliteToggle'>>;
+/**
+ * @typedef AddressConfirmOptions
+ */
 export interface AddressConfirmOptions {
@@ -24,4 +46,6 @@ /**
      * If true, a static minimap showing the suggested address location will be displayed in the modal dialog.
+     * If an object, a minimap will be displayed with the specified styling and theming configuration.
+     * Defaults to false.
      */
-    minimap?: boolean;
+    minimap?: boolean | ConfirmationMinimapOptions;
     /**
@@ -28,0 +52,0 @@ * An array of section names used within form element `autocomplete` attributes to identify and group one address section from another, e.g. "section-shipping" or "section-billing".

dist/components/MapboxAddressConfirmationFeature.d.ts

 import { AutofillFeatureSuggestion } from '@mapbox/search-js-core';
 import { HTMLScopedElement } from './HTMLScopedElement';
-import { AddressConfirmationEventTypes } from './MapboxAddressConfirmation';
+import { AddressConfirmationEventTypes, ConfirmationMinimapOptions } from './MapboxAddressConfirmation';
 import { AutofillValueMap } from '../utils/autofill';
 import { Theme } from '../theme';
 /**
- * {@link MapboxAddressConfirmationFeature} is a custom element that
- * will display the "Did you mean..." message when the user
- * enters an address that doesn't match any of the results
- * returned by the Mapbox Autofill API.
+ * {@link MapboxAddressConfirmationNoFeature} is a custom element that
+ * will display a notification showing the closest suggested address to what a user has provided in the form.
+ * Optionally, it can display a {@link MapboxAddressMinimap} for the suggesested address feature.
  *
- * This element is used by {@link MapboxAddressAutofill} and the {@link autofill}
- * method, and should not be exposed to the user.
+ * This element is hosted by {@link MapboxAddressConfirmation} and should not be exposed to the user.
  */
@@ -22,3 +20,3 @@ export declare class MapboxAddressConfirmationFeature extends HTMLScopedElement<AddressConfirmationEventTypes> {
     set theme(theme: Theme);
-    minimap: boolean;
+    minimap: boolean | ConfirmationMinimapOptions;
     accessToken: string;
@@ -25,0 +23,0 @@ /**

dist/components/MapboxAddressConfirmationNoFeature.d.ts

@@ -10,4 +10,3 @@ import { HTMLScopedElement } from './HTMLScopedElement';
  *
- * This element is used by {@link MapboxAddressConfirmation},
- * and should not be exposed to the user.
+ * This element is hosted by {@link MapboxAddressConfirmation} and should not be exposed to the user.
  */
@@ -14,0 +13,0 @@ export declare class MapboxAddressConfirmationNoFeature extends HTMLScopedElement<AddressConfirmationEventTypes> {

dist/components/MapboxAddressMinimap.d.ts

@@ -22,4 +22,5 @@ import { HTMLScopedElement } from './HTMLScopedElement';
  * ```typescript
- * const mapboxAddressMinimap = document.createElement('mapbox-address-minimap');
- * mapboxAddressMinimap.feature = {
+ * const minimap = new MapboxAddressMinimap();
+ * containerElement.appendChild(minimap);
+ * minimap.feature = {
  *   type: 'Feature',
@@ -49,3 +50,4 @@ *   geometry: {
      */
-    canAdjustMarker: boolean;
+    get canAdjustMarker(): boolean;
+    set canAdjustMarker(val: boolean);
     /**
@@ -80,2 +82,3 @@ * If `true`, the map when panned moves around the marker, keeping the marker
     onSaveMarkerLocation: (coordinate: [number, number]) => void;
+    /** @section {Input data} */
     /**
@@ -123,3 +126,4 @@ * The [Mapbox access token](https://docs.mapbox.com/help/glossary/access-token/) to use for all requests.
      */
-    satelliteToggle: boolean;
+    get satelliteToggle(): boolean;
+    set satelliteToggle(val: boolean);
     /**
@@ -126,0 +130,0 @@ * The {@link Theme} to use for styling the editing interface.

dist/components/MapboxSearchListbox.d.ts

@@ -1,2 +0,2 @@
-import { SearchSession, Suggestion as SearchSuggestion, AutofillSuggestion } from '@mapbox/search-js-core';
+import { SearchSession, Suggestion as SearchSuggestion, AutofillSuggestion, FeatureSuggestion, AutofillFeatureSuggestion } from '@mapbox/search-js-core';
 import { HTMLScopedElement } from './HTMLScopedElement';
@@ -30,2 +30,3 @@ import { MapboxHTMLEvent } from '../MapboxHTMLEvent';
     set theme(theme: Theme);
+    retrieveFeature: FeatureSuggestion | AutofillFeatureSuggestion;
     connectedCallback(): void;
@@ -32,0 +33,0 @@ disconnectedCallback(): void;

dist/config.d.ts

@@ -14,3 +14,17 @@ import { SessionToken } from '@mapbox/search-js-core';
 }
+/**
+ * Global configuration singleton object storing settings shared across Search JS Web components.
+ *
+ * @property {string} accessToken - A [Mapbox access token](https://docs.mapbox.com/help/glossary/access-token/) used if one is not passed in explicitly to web components.
+ * @property {boolean} feedbackEnabled - If true, Autofill address or marker location corrections will be submitted to the Mapbox Contribute API to help improve our data accuracy. Defaults to true.
+ * @example
+ * ```typescript
+ * config.accessToken = 'pk.abc.123';
+ * ...
+ * // Don't need to explicitly pass in token to some components
+ * autofill({});
+ * confirmAddress(form);
+ * ```
+ */
 declare const config: Config;
 export { config };

dist/confirmAddress.d.ts

@@ -14,3 +14,17 @@ import { AddressConfirmOptions } from './components/MapboxAddressConfirmation';
  * @returns A promise resolving with a result object indicating the decision made by the user
+ * @example
+ * ```typescript
+ * form.addEventListener("submit", async (e) => {
+ *   e.preventDefault();
+ *   const result = await confirmAddress(form, {
+ *     minimap: true,
+ *     skipConfirmModal: (feature) =>
+ *       ['exact', 'high'].includes(
+ *         feature.properties.match_code.confidence
+ *       )
+ *   });
+ *   if (result.type === 'nochange') submitForm();
+ * });
+ * ```
  */
 export declare function confirmAddress(form: HTMLFormElement, optionsArg?: AddressConfirmOptions): Promise<AddressConfirmShowResult>;

dist/constants.d.ts

 export declare const STATIC_BASE_URL_SATELLITE: string;
 export declare const AUTOFILL_SKU_TOKEN_PREFIX = "20d01";
+export declare const MAPBOX_DOMAINS: string[];

dist/index.d.ts

@@ -6,3 +6,3 @@ /// <reference path="../src/types/custom_elements.d.ts" />
 import './components/MapboxAddressConfirmationNoFeature';
-export { MapboxAddressConfirmation, AddressConfirmOptions } from './components/MapboxAddressConfirmation';
+export { MapboxAddressConfirmation, AddressConfirmOptions, ConfirmationMinimapOptions } from './components/MapboxAddressConfirmation';
 export { MapboxAddressAutofill } from './components/MapboxAddressAutofill';
@@ -9,0 +9,0 @@ export { MapboxSearchBox } from './components/MapboxSearchBox';

dist/utils/autofill.d.ts

@@ -113,2 +113,20 @@ import { AutofillFeatureSuggestion, AutofillSuggestion } from '@mapbox/search-js-core';
 export declare function fillFormWithFeature(feature: AutofillFeatureSuggestion, input: HTMLInputElement): void;
+/**
+ * Gets address property values from an Autofill feature.
+ *
+ * @param feature - A {@link AutofillFeatureSuggestion} object.
+ * @returns A object mapping WHATWG autocomplete properties to their respective feature values
+ */
+export declare function featureToAutofillValueMap(feature: AutofillFeatureSuggestion): AutofillValueMap;
+/**
+ * Checks if WHATWG address values from one object match those from another.
+ *
+ * Can be used to compare an HTML form state against the most recently retrieved Autofill feature
+ * to determine if a form has been manually edited after a previous Autofill event.
+ *
+ * @param targetMap - An {@link AutofillValueMap} object.
+ * @param referenceMap - An {@link AutofillValueMap} object.
+ * @returns False if all values from the target map are equal to their corresponding value from the reference map.
+ */
+export declare function checkAutofillValuesChanged(targetMap: AutofillValueMap, referenceMap: AutofillValueMap): boolean;
 export {};

dist/utils/confirmation.d.ts

@@ -1,6 +0,9 @@
-import { AutofillSuggestion } from '@mapbox/search-js-core';
+import { AutofillFeatureSuggestion } from '@mapbox/search-js-core';
 import { AutofillValueMap } from './autofill';
+/**
+ * @typedef AddressConfirmShowResult
+ */
 export declare type AddressConfirmShowResult = {
     type: 'change';
-    suggestion: AutofillSuggestion;
+    feature: AutofillFeatureSuggestion;
 } | {
@@ -7,0 +10,0 @@ type: 'nochange';

dist/utils/index.d.ts

@@ -29,1 +29,7 @@ /**
 export declare function isLocalServer(hostname: string): boolean;
+/**
+ * Returns true if a hostname matches a Mapbox domain
+ * @param hostname - A string representing window.location.hostname
+ * @returns A boolean value
+ */
+export declare function isMapboxDomain(hostname: string): boolean;

package.json

 {
   "name": "@mapbox/search-js-web",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.8",
   "description": "Search web component with form autocomplete.",
@@ -22,3 +22,3 @@ "main": "dist/index.js",
   "dependencies": {
-    "@mapbox/search-js-core": "^1.0.0-beta.7",
+    "@mapbox/search-js-core": "^1.0.0-beta.8",
     "@mapbox/sphericalmercator": "^1.2.0",
@@ -25,0 +25,0 @@ "@popperjs/core": "^2.11.2",

web/index.ts

@@ -152,3 +152,7 @@ import mapboxgl from 'mapbox-gl';
       accessToken: ACCESS_TOKEN,
-      minimap: true,
+      minimap: {
+        defaultMapStyle: ['mapbox', 'light-v10'],
+        satelliteToggle: true,
+        theme: { icons: { marker: CUSTOM_MARKER } }
+      },
       skipConfirmModal: (feature) =>
@@ -155,0 +159,0 @@ ['exact', 'high'].includes(feature.properties.match_code.confidence)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2770528

increased by4.57%

Number of package files

63

increased by1.61%

Lines of code

10537

increased by5.71%

Worsened metrics

Number of medium maintenance alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

6

increased by20%

Dependency changes

• Updated@mapbox/search-js-core@^1.0.0-beta.8