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

Comparing version 1.0.0-beta.13 to 1.0.0-beta.14

dist/autofill.d.ts

@@ -1,2 +0,2 @@
-import { AutofillOptions, AutofillRetrieveResponse, AutofillSuggestionResponse, Evented, MapboxAutofill } from '@mapbox/search-js-core';
+import { AutofillFeatureSuggestion, AutofillOptions, AutofillRetrieveResponse, AutofillSuggestion, AutofillSuggestionResponse, Evented, MapboxAutofill } from '@mapbox/search-js-core';
 import { MapboxSearchListbox } from './components/MapboxSearchListbox';
@@ -12,7 +12,9 @@ import { MapboxHTMLEvent } from './MapboxHTMLEvent';
     #private;
-    listbox: MapboxSearchListbox<unknown, import("@mapbox/search-js-core").Suggestion | import("@mapbox/search-js-core").AutofillSuggestion, {
-        suggestions: (import("@mapbox/search-js-core").Suggestion | import("@mapbox/search-js-core").AutofillSuggestion)[];
-    }, unknown>;
+    get input(): HTMLInputElement;
+    options: Partial<AutofillOptions>;
+    retrieveFeature: AutofillFeatureSuggestion;
+    listbox: MapboxSearchListbox<AutofillSuggestion | import("@mapbox/search-js-core").Suggestion | import("@mapbox/search-js-core").GeocodeFeature>;
     constructor(collection: AutofillCollectionType, input: HTMLInputElement, autofillRef: MapboxAutofill);
     remove(): void;
+    simulateRetrieve(feature: AutofillFeatureSuggestion): void;
 }
@@ -47,2 +49,8 @@ /**
     confirmOnBrowserAutofill?: boolean | AddressConfirmOptions;
+    /**
+     * Enables the browser's autocomplete popup to show during the first two typed characters while Mapbox results are suppressed. Defaults to false.
+     *
+     * **Note:** Due to varying specifications, efforts to suppress browser autocomplete behavior may not work on all browsers.
+     */
+    browserAutofillEnabled?: boolean;
 }
@@ -120,3 +128,3 @@ interface EventTypes<AutofillSuggestionResponse, AutofillRetrieveResponse> {
     instances: AutofillInstance[];
-    constructor({ accessToken, options, theme, popoverOptions, confirmOnBrowserAutofill }: AutofillCollectionOptions);
+    constructor({ accessToken, options, theme, popoverOptions, confirmOnBrowserAutofill, browserAutofillEnabled }: AutofillCollectionOptions);
     /**
@@ -196,2 +204,17 @@ * The [Mapbox access token](https://docs.mapbox.com/help/glossary/access-token/) to use for all requests.
     confirmOnBrowserAutofill: boolean | AddressConfirmOptions;
+    /**
+     * Enables the browser's autocomplete popup to show during the first two typed characters while Mapbox results are suppressed. Defaults to false.
+     *
+     * **Note:** Due to varying specifications, efforts to suppress browser autocomplete behavior may not work on all browsers.
+     *
+     * @name browserAutofillEnabled
+     * @instance
+     * @memberof AutofillCollection
+     * @type {boolean}
+     * @example
+     * ```typescript
+     * autofill.browserAutofillEnabled = true;
+     * ```
+     */
+    browserAutofillEnabled?: boolean;
     /** @section {Methods} */
@@ -198,0 +221,0 @@ /**

dist/components/MapboxAddressAutofill.d.ts

@@ -1,2 +0,2 @@
-import { AutofillOptions, AutofillRetrieveResponse, AutofillSuggestion, AutofillSuggestionResponse } from '@mapbox/search-js-core';
+import { AutofillFeatureSuggestion, AutofillOptions, AutofillRetrieveResponse, AutofillSuggestion, AutofillSuggestionResponse } from '@mapbox/search-js-core';
 import { MapboxSearchListbox } from './MapboxSearchListbox';
@@ -8,3 +8,3 @@ import { HTMLScopedElement } from './HTMLScopedElement';
 import { PopoverOptions } from '../utils/popover';
-export declare type MapboxSearchListboxAutofillType = MapboxSearchListbox<AutofillOptions, AutofillSuggestion, AutofillSuggestionResponse, AutofillRetrieveResponse>;
+export declare type MapboxSearchListboxAutofillType = MapboxSearchListbox<AutofillSuggestion>;
 declare type AutofillEventTypes = {
@@ -65,2 +65,21 @@ /**
     retrieve: MapboxHTMLEvent<AutofillRetrieveResponse>;
+    /**
+     * Fired when the user has changed the `<input>` text.
+     *
+     * The new input value is passed as the event's detail.
+     *
+     * @event input
+     * @instance
+     * @memberof MapboxAddressAutofill
+     * @type {string}
+     * @example
+     * ```typescript
+     * autofill.addEventListener('input', (event) => {
+     *   if (e.target !== e.currentTarget) return;
+     *   const searchText = event.detail;
+     *   // ...
+     * });
+     * ```
+     */
+    input: MapboxHTMLEvent<unknown>;
 };
@@ -113,2 +132,11 @@ /**
     /**
+     * The `<input>` element wrapped by the autofill component.
+     *
+     * @name input
+     * @instance
+     * @memberof MapboxAddressAutofill
+     * @type {HTMLInputElement}
+     */
+    get input(): HTMLInputElement;
+    /**
      * Options to pass to the underlying {@link MapboxAutofill} interface.
@@ -128,4 +156,3 @@ *
      */
-    get options(): Partial<AutofillOptions>;
-    set options(newOptions: Partial<AutofillOptions>);
+    options: Partial<AutofillOptions>;
     /**
@@ -190,2 +217,33 @@ * The {@link Theme} to use for styling the autofill component.
     confirmOnBrowserAutofill: boolean | AddressConfirmOptions;
+    /**
+     * Enables the browser's autocomplete popup to show during the first two typed characters while Mapbox results are suppressed. Defaults to false.
+     *
+     * **Note:** Due to varying specifications, efforts to suppress browser autocomplete behavior may not work on all browsers.
+     *
+     * @name browserAutofillEnabled
+     * @instance
+     * @memberof MapboxAddressAutofill
+     * @type {boolean}
+     * @example
+     * ```typescript
+     * autofill.browserAutofillEnabled = true;
+     * ```
+     */
+    get browserAutofillEnabled(): boolean;
+    set browserAutofillEnabled(enable: boolean);
+    retrieveFeature: AutofillFeatureSuggestion;
+    /**
+     * A callback providing the opportunity to validate and/or manipulate the input text before it triggers a search, for example by using a regular expression.
+     * If a truthy string value is returned, it will be passed into the underlying search API. If `null`, `undefined` or empty string is returned, no search request will be performed.
+     *
+     * @name interceptSearch
+     * @instance
+     * @memberof MapboxAddressAutofill
+     * @example
+     * Enable search only when the input value length is more than 3 characters.
+     * ```typescript
+     * search.interceptSearch = (val) => val?.length > 3 ? val : null;
+     * ```
+     */
+    interceptSearch: (val: string) => string;
     connectedCallback(): void;
@@ -199,2 +257,9 @@ disconnectedCallback(): void;
     focus(): void;
+    /**
+     * Trigger side effects from a retrieve event with a simulated result.
+     * Used by {@link confirmAddress} when a suggested addresses is accepted.
+     *
+     * @ignore
+     */
+    simulateRetrieve(feature: AutofillFeatureSuggestion): void;
 }
@@ -201,0 +266,0 @@ declare global {

dist/components/MapboxSearchBox.d.ts

@@ -8,3 +8,3 @@ import { Options, RetrieveResponse, Suggestion, SuggestionResponse } from '@mapbox/search-js-core';
 import { PopoverOptions } from '../utils/popover';
-export declare type MapboxSearchListboxSearchType = MapboxSearchListbox<Options, Suggestion, SuggestionResponse, RetrieveResponse>;
+export declare type MapboxSearchListboxSearchType = MapboxSearchListbox<Suggestion>;
 declare type SearchEventTypes = {
@@ -65,2 +65,20 @@ /**
     retrieve: MapboxHTMLEvent<RetrieveResponse>;
+    /**
+     * Fired when the user has changed the `<input>` text.
+     *
+     * The new input value is passed as the event's detail.
+     *
+     * @event input
+     * @instance
+     * @memberof MapboxSearchBox
+     * @type {string}
+     * @example
+     * ```typescript
+     * search.addEventListener('input', (event) => {
+     *   if (e.target !== e.currentTarget) return;
+     *   const searchText = event.detail;
+     *   // ...
+     * });
+     * ```
+     */
     input: MapboxHTMLEvent<unknown>;
@@ -132,2 +150,11 @@ };
     set value(newValue: string);
+    /**
+     * The `<input>` element wrapped by the autofill component.
+     *
+     * @name input
+     * @instance
+     * @memberof MapboxAddressAutofill
+     * @type {HTMLInputElement}
+     */
+    get input(): HTMLInputElement;
     protected get template(): HTMLTemplateElement;
@@ -151,4 +178,3 @@ protected get templateStyle(): string;
      */
-    get options(): Partial<Options>;
-    set options(newOptions: Partial<Options>);
+    options: Partial<Options>;
     /**
@@ -191,2 +217,16 @@ * The {@link Theme} to use for styling the suggestion box and search box.
     set popoverOptions(newOptions: Partial<PopoverOptions>);
+    /**
+     * A callback providing the opportunity to validate and/or manipulate the input text before it triggers a search, for example by using a regular expression.
+     * If a truthy string value is returned, it will be passed into the underlying search API. If `null`, `undefined` or empty string is returned, no search request will be performed.
+     *
+     * @name interceptSearch
+     * @instance
+     * @memberof MapboxSearchBox
+     * @example
+     * Enable search only when the input value length is more than 3 characters.
+     * ```typescript
+     * search.interceptSearch = (val) => val?.length > 3 ? val : null;
+     * ```
+     */
+    interceptSearch: (val: string) => string;
     connectedCallback(): void;
@@ -193,0 +233,0 @@ disconnectedCallback(): void;

dist/components/MapboxSearchListbox.d.ts

@@ -1,14 +0,28 @@
-import { SearchSession, Suggestion as SearchSuggestion, AutofillSuggestion, FeatureSuggestion, AutofillFeatureSuggestion } from '@mapbox/search-js-core';
+import { Suggestion as SearchSuggestion, AutofillSuggestion, GeocodeFeature } from '@mapbox/search-js-core';
 import { HTMLScopedElement } from './HTMLScopedElement';
-import { MapboxHTMLEvent } from '../MapboxHTMLEvent';
 import { Theme } from '../theme';
 import { PopoverOptions } from '../utils/popover';
-declare type ListboxEventTypes<SuggestionResponse, RetrieveResponse> = {
-    suggest: MapboxHTMLEvent<SuggestionResponse>;
-    suggesterror: MapboxHTMLEvent<Error>;
-    retrieve: MapboxHTMLEvent<RetrieveResponse>;
+import { MapboxHTMLEvent } from '../MapboxHTMLEvent';
+import { MapboxAddressAutofill } from './MapboxAddressAutofill';
+import { AutofillInstance } from '../autofill';
+declare type ListboxEventTypes<Suggestion> = {
+    /**
+     * Triggered on `input` events, i.e. typing  in the `<input>` element.
+     */
+    input: MapboxHTMLEvent<string>;
+    /**
+     * Triggered on selection events, i.e. clicking on an item in the results list
+     * or hitting `Enter` with an item highlighted.
+     */
+    select: MapboxHTMLEvent<Suggestion>;
+    /**
+     * Triggered on `blur` event, i.e. focus moves away from the `<input>` element.
+     */
+    blur: MapboxHTMLEvent<unknown>;
+    /**
+     * Triggered on `focus` evenet, i.e. focus moves onto the `<input>` element.
+     */
+    focus: MapboxHTMLEvent<unknown>;
 };
-export declare class MapboxSearchListbox<Options, Suggestion extends SearchSuggestion | AutofillSuggestion, SuggestionResponse extends {
-    suggestions: Suggestion[];
-}, RetrieveResponse> extends HTMLScopedElement<ListboxEventTypes<SuggestionResponse, RetrieveResponse>> {
+export declare class MapboxSearchListbox<Suggestion extends SearchSuggestion | AutofillSuggestion | GeocodeFeature> extends HTMLScopedElement<ListboxEventTypes<Suggestion>> {
     #private;
@@ -18,13 +32,18 @@ protected get template(): HTMLTemplateElement;
     protected get templateUserStyle(): string;
-    get session(): SearchSession<Options, Suggestion, SuggestionResponse, RetrieveResponse> | null;
-    set session(newSession: SearchSession<Options, Suggestion, SuggestionResponse, RetrieveResponse> | null);
-    get suggestions(): Suggestion[] | null;
+    /**
+     * The current list of suggestions to be rendered in the results box.
+     */
+    suggestions: Suggestion[] | null;
+    /**
+     * The Autofill instance driving the listbox.
+     * Can be either the custom element or function.
+     */
+    autofillHost?: MapboxAddressAutofill | AutofillInstance;
     get input(): HTMLInputElement | null;
     set input(newInput: HTMLInputElement | null);
-    get selectedIndex(): number;
+    get selectedIndex(): number | undefined;
     set selectedIndex(newIndex: number);
+    hideResults(): void;
     renderItem(i: number): HTMLElement;
-    fillItem(el: Element, item: Suggestion, i: number): void;
-    get options(): Partial<Options>;
-    set options(newOptions: Partial<Options>);
+    fillItem(el: Element, item: Suggestion, i: number, totalLength: number): void;
     get theme(): Theme;
@@ -34,7 +53,17 @@ set theme(theme: Theme);
     set popoverOptions(newOptions: Partial<PopoverOptions>);
-    retrieveFeature: FeatureSuggestion | AutofillFeatureSuggestion;
+    renderAriaMessage: () => void;
+    clearAriaMessage: () => void;
+    /**
+     * Handles the rendering of suggestion items returned from the input text search.
+     * @param suggestions Array of suggestions or features returned from the search
+     */
+    handleSuggest: (suggestions: Suggestion[]) => void;
+    /**
+     * Handles the results box rendering when an error has occurred.
+     */
+    handleError: () => void;
+    handleArrowUp: () => void;
+    handleArrowDown: () => void;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    retrieve(suggestion: Suggestion): Promise<void>;
-    simulateRetrieve(feature: AutofillFeatureSuggestion): void;
     focus(): void;
@@ -41,0 +70,0 @@ blur(): void;

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[];
+export declare const LISTBOX_TEMPLATE: HTMLTemplateElement;
+export declare const LISTBOX_SUGGESTION_TEMPLATE: HTMLTemplateElement;

dist/theme.d.ts

@@ -52,2 +52,8 @@ /**
     /**
+     * Padding of powered by mapbox label in footer of search listbox.
+     *
+     * Analogous to CSS [`<length>`](https://developer.mozilla.org/en-US/docs/Web/CSS/length).
+     */
+    paddingFooterLabel?: string;
+    /**
      * Padding for contents of modal elements.
@@ -217,2 +223,10 @@ *
     marker?: string;
+    /**
+     * Icon for streets results in search list box.
+     */
+    street?: string;
+    /**
+     * Icon for address results in search list box.
+     */
+    addressMarker?: string;
 }
@@ -219,0 +233,0 @@ /**

dist/utils/autofill.d.ts

@@ -1,2 +0,2 @@
-import { AutofillFeatureSuggestion, AutofillSuggestion } from '@mapbox/search-js-core';
+import { AutofillFeatureSuggestion, AutofillSuggestion, GeocodeFeature, Suggestion as SearchSuggestion } from '@mapbox/search-js-core';
 import { InputFormElement } from './dom';
@@ -152,2 +152,17 @@ /**
 export declare function checkAutofillValuesChanged(targetMap: AutofillValueMap, referenceMap: AutofillValueMap): boolean;
+/**
+ * Returns the string from suggestions that meant to be used as first stroke
+ * title in search results list for that particular suggestion.
+ */
+export declare const getSuggestionTitle: (item: SearchSuggestion | AutofillSuggestion | GeocodeFeature) => string;
+/**
+ * Takes the suggestions array and filters streets inside it to leave only unique ones
+ */
+export declare const distinctExactStreetResults: (suggestions: (SearchSuggestion | AutofillSuggestion | GeocodeFeature)[]) => (SearchSuggestion | AutofillSuggestion | GeocodeFeature)[];
+/**
+ * Returns parsed/formatted description text to show in the second line of an autofill suggestion element
+ */
+export declare const buildSuggestionDescription: (item: SearchSuggestion | AutofillSuggestion | GeocodeFeature) => string;
+export declare const toggleAutocompletion: (input: HTMLInputElement, initialAutocompleteValue: string, enableBrowserAutocomplete: boolean) => void;
+export declare const handleStreetSelection: (input: HTMLInputElement, initialAutocompleteValue: string, suggestion: AutofillSuggestion) => void;
 export {};

dist/utils/geocoder.d.ts

 export declare const REVERSE_GEOCODE_COORD_RGX: RegExp;
+export declare function isReverseQuery(query: string): boolean;

dist/utils/map.d.ts

@@ -1,2 +0,1 @@
-import { AdministrativeUnitTypes } from '@mapbox/search-js-core';
 import mapboxgl from 'mapbox-gl';
@@ -18,7 +17,7 @@ /**
  * Gets the maximum zoom level for a [Mapbox Search API](https://docs.mapbox.com/api/search/search/)
- * place type.
+ * or [Mapbox Geocoding API](https://docs.mapbox.com/api/search/geocoding/) place type.
  *
  * @returns The maximum zoom level for the given place type, `16` if the type is not supported.
  */
-export declare function getMaxZoom(placeType: AdministrativeUnitTypes): number;
+export declare function getMaxZoom(placeType: string): number;
 /**
@@ -25,0 +24,0 @@ * Gets the base URL for the Static Images API for a given user style

package.json

 {
   "name": "@mapbox/search-js-web",
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.14",
   "description": "Search web component with form autocomplete.",
@@ -23,3 +23,3 @@ "main": "dist/index.js",
     "@floating-ui/dom": "^0.5.2",
-    "@mapbox/search-js-core": "^1.0.0-beta.13",
+    "@mapbox/search-js-core": "^1.0.0-beta.14",
     "@mapbox/sphericalmercator": "^1.2.0",
@@ -26,0 +26,0 @@ "focus-trap": "^6.7.3",

web/index.ts

@@ -151,2 +151,6 @@ import mapboxgl from 'mapbox-gl';
 
+  element.addEventListener('suggest', (res) => console.log('suggest', res));
+  element.addEventListener('suggesterror', (err) => console.log('error', err));
+  element.addEventListener('retrieve', (res) => console.log('retrieve', res));
+
   form.addEventListener('submit', async (e) => {
@@ -186,2 +190,12 @@ e.preventDefault();
 
+    element.addEventListener('input', (e) => {
+      if (e.target !== e.currentTarget) return;
+      console.log('input', e);
+    });
+    element.addEventListener('suggest', (res) => console.log('suggest', res));
+    element.addEventListener('suggesterror', (err) =>
+      console.log('error', err)
+    );
+    element.addEventListener('retrieve', (res) => console.log('retrieve', res));
+
     const clonedElement = element.cloneNode(true) as MapboxSearchBox;
@@ -188,0 +202,0 @@ clonedElement.accessToken = ACCESS_TOKEN;

New alerts

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

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

Improved metrics

Total package byte prevSize

3085383

increased by7.35%

Lines of code

12327

increased by1.59%

Number of medium supply chain risk alerts

5

decreased by-16.67%

Worsened metrics

Number of package files

68

decreased by-5.56%

Dependency changes

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