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

Comparing version 1.0.0-beta.9 to 1.0.0-beta.10

dist/autofill.d.ts

@@ -5,2 +5,3 @@ import { AutofillOptions, AutofillRetrieveResponse, AutofillSuggestionResponse, Evented, MapboxAutofill } from '@mapbox/search-js-core';
 import { Theme } from './theme';
+import { AddressConfirmOptions } from './components/MapboxAddressConfirmation';
 /**
@@ -19,2 +20,3 @@ * @class AutofillInstance
     theme?: Theme;
+    confirmOnBrowserAutofill?: boolean | AddressConfirmOptions;
 }
@@ -83,3 +85,3 @@ interface EventTypes<AutofillSuggestionResponse, AutofillRetrieveResponse> {
 }
-declare type AutofillCollectionType = AutofillCollection<AutofillSuggestionResponse, AutofillRetrieveResponse>;
+export declare type AutofillCollectionType = AutofillCollection<AutofillSuggestionResponse, AutofillRetrieveResponse>;
 /**
@@ -93,3 +95,3 @@ * Underlying collection object class returned by the {@link autofill} function.
     instances: AutofillInstance[];
-    constructor({ accessToken, options, theme }: AutofillCollectionOptions);
+    constructor({ accessToken, options, theme, confirmOnBrowserAutofill }: AutofillCollectionOptions);
     /**
@@ -132,2 +134,25 @@ * The [Mapbox access token](https://docs.mapbox.com/help/glossary/access-token/) to use for all requests.
     set theme(newTheme: Theme);
+    /**
+     * If true, forms autofilled by the browser will prompt the
+     * {@link confirmAddress} dialog for user confirmation.
+     * An {@link AddressConfirmOptions} object can also be passed
+     * to prompt {@link confirmAddress} with custom options.
+     * Defaults to false.
+     *
+     * @name confirmOnBrowserAutofill
+     * @instance
+     * @memberof AutofillCollection
+     * @type {boolean | AddressConfirmOptions}
+     * @example
+     * ```typescript
+     * autofill.confirmOnBrowserAutofill = {
+     *   minimap: true,
+     *   skipConfirmModal: (feature) =>
+     *     ['exact', 'high'].includes(
+     *       feature.properties.match_code.confidence
+     *     )
+     * };
+     * ```
+     */
+    confirmOnBrowserAutofill: boolean | AddressConfirmOptions;
     /** @section {Methods} */
@@ -164,2 +189,11 @@ /**
     unobserve(): void;
+    /**
+     * Removes all autofill instances and listeners in the document.
+     *
+     * @example
+     * ```typescript
+     * collection.remove();
+     * ```
+     */
+    remove(): void;
 }
@@ -166,0 +200,0 @@ /**

dist/components/MapboxAddressAutofill.d.ts

@@ -6,2 +6,3 @@ import { AutofillOptions, AutofillRetrieveResponse, AutofillSuggestion, AutofillSuggestionResponse } from '@mapbox/search-js-core';
 import { MapboxHTMLEvent } from '../MapboxHTMLEvent';
+import { AddressConfirmOptions } from './MapboxAddressConfirmation';
 export declare type MapboxSearchListboxAutofillType = MapboxSearchListbox<AutofillOptions, AutofillSuggestion, AutofillSuggestionResponse, AutofillRetrieveResponse>;
@@ -144,2 +145,25 @@ declare type AutofillEventTypes = {
     set theme(theme: Theme);
+    /**
+     * If true, forms autofilled by the browser will prompt the
+     * {@link confirmAddress} dialog for user confirmation.
+     * An {@link AddressConfirmOptions} object can also be passed
+     * to prompt {@link confirmAddress} with custom options.
+     * Defaults to false.
+     *
+     * @name confirmOnBrowserAutofill
+     * @instance
+     * @memberof MapboxAddressAutofill
+     * @type {boolean | AddressConfirmOptions}
+     * @example
+     * ```typescript
+     * autofill.confirmOnBrowserAutofill = {
+     *   minimap: true,
+     *   skipConfirmModal: (feature) =>
+     *     ['exact', 'high'].includes(
+     *       feature.properties.match_code.confidence
+     *     )
+     * };
+     * ```
+     */
+    confirmOnBrowserAutofill: boolean | AddressConfirmOptions;
     connectedCallback(): void;
@@ -146,0 +170,0 @@ disconnectedCallback(): void;

dist/components/MapboxSearchListbox.d.ts

@@ -34,3 +34,5 @@ import { SearchSession, Suggestion as SearchSuggestion, AutofillSuggestion, FeatureSuggestion, AutofillFeatureSuggestion } from '@mapbox/search-js-core';
     retrieve(suggestion: Suggestion): Promise<void>;
+    simulateRetrieve(feature: AutofillFeatureSuggestion): void;
     focus(): void;
+    blur(): void;
     updatePopover(): void;
@@ -37,0 +39,0 @@ }

dist/config.d.ts

@@ -13,2 +13,3 @@ import { SessionToken } from '@mapbox/search-js-core';
     autofillSessionEnabled: boolean;
+    detectBrowserAutofillEnabled: boolean;
 }
@@ -15,0 +16,0 @@ /**

dist/utils/confirmation.d.ts

 import { AutofillFeatureSuggestion } from '@mapbox/search-js-core';
+import { AddressConfirmOptions } from '../components/MapboxAddressConfirmation';
 import { AutofillValueMap } from './autofill';
@@ -23,1 +24,12 @@ /**
 export declare function createAddressElement(autofillValues: AutofillValueMap, baseAddress?: string): HTMLElement;
+/**
+ * Checks a browser autofill event against an Address Autofill input and, given
+ * custom options, determines and configures if/how to show invoke {@link confirmAddress}.
+ *
+ * @param input - The `<input>` element wrapped or targeted by Address Autofill.
+ * @param event - The custom window event detected and triggered on a browser autofill event.
+ * @param confirmOnBrowserAutofill - The value of the instance property set on the autofill instance.
+ * @param accessToken - A Mapbox access token.
+ * @returns
+ */
+export declare function tryConfirmBrowserAutofill(input: HTMLInputElement, event: CustomEvent, confirmOnBrowserAutofill: boolean | AddressConfirmOptions, accessToken: string): Promise<void>;

dist/utils/detect_browser_autofill.d.ts

@@ -5,6 +5,36 @@ /**
  */
+export declare const ATTR_NAME = "browser-autofilled";
 /**
- * Detects browser autofill events
- * @param form - The same HTML <form> element targeted by Mapbox Address Autofill
+ * Manage an input element when its value is autocompleted
+ * by the browser
+ *
+ * @param {HtmlInputElement} element
  */
-export declare function initDetectBrowserAutofill(form?: HTMLFormElement): void;
+export declare function browserAutofill(element: HTMLInputElement): void;
+/**
+ * Manage an input element when its autocompleted value is
+ * removed by the browser
+ *
+ * @param {HtmlInputElement} element
+ */
+export declare function cancelBrowserAutofill(element: HTMLInputElement): void;
+/**
+ * Handler for -webkit based browser that listen for a custom
+ * animation create using the :pseudo-selector in the stylesheet.
+ * Works with Chrome, Safari
+ *
+ * @param {AnimationEvent} event
+ */
+export declare function onAnimationStart(event: AnimationEvent): void;
+/**
+ * Handler for non-webkit based browser that listen for input
+ * event to trigger the autocomplete-cancel process.
+ * Works with Firefox, Edge, IE11
+ *
+ * @param {InputEvent} event
+ */
+export declare function onInput(event: InputEvent): void;
+/**
+ * Enables detection of browser autofill events
+ */
+export declare function initDetectBrowserAutofill(): void;

dist/utils/dom.d.ts

@@ -50,1 +50,5 @@ export declare function bindElements<Binding extends {
 };
+/**
+ * Adds a style to the current page document for the root CSS from the Mapbox search-js-web package.
+ */
+export declare function addDocumentStyle(css: string): void;

dist/utils/minimap.d.ts

@@ -8,6 +8,12 @@ export declare type MapStyleMode = 'default' | 'satellite';
 interface MarkerTransform {
+    /** X offset to correct for anchor position */
     anchorX: number;
+    /** Y offset to correct for anchor position */
     anchorY: number;
+    /** X offset from manual marker movement */
     globalX: number;
+    /** Y offset from manual marker movement */
     globalY: number;
+    correctionX: number;
+    correctionY: number;
 }
@@ -29,2 +35,3 @@ /**
     imgContainerElement: HTMLElement;
+    imgElement: HTMLImageElement;
     markerElement: HTMLElement;
@@ -45,5 +52,11 @@ keepMarkerCentered: boolean;
     markerDeltaY: number;
-    /** Lng/lat of image center represented as screen pixels */
+    /**
+     * Lng/lat of feature coordinate and initial image center represented as screen pixels.
+     * Value is fixed for a given original coordinate.
+     */
     imgCenterPx: [number, number];
-    /** Lng/lat of adjusted image center as screen pixels */
+    /**
+     * Lng/lat of adjusted image center as screen pixels.
+     * Value changes as the image is panned around in its container.
+     */
     imgCenterAdjustedPx: [number, number];
@@ -53,2 +66,3 @@ /**
      * @param imageContainer - The parent element of the <img>
+     * @param imageContainer - The <img> element
      * @param marker - SVG Element used as the map marker
@@ -59,3 +73,3 @@ * @param keepMarkerCentered - If true, the marker will stay centered within the frame while the map moves behind it
      */
-    constructor(imageContainer: HTMLElement, marker: HTMLElement, keepMarkerCentered: boolean, zoom: number, anchor: Anchor);
+    constructor(imageContainer: HTMLElement, imageElement: HTMLImageElement, marker: HTMLElement, keepMarkerCentered: boolean, zoom: number, anchor: Anchor);
     get anchor(): Anchor;
@@ -69,6 +83,2 @@ set anchor(newAnchor: Anchor);
     set isActive(val: boolean);
-    /** Height of the <img> element */
-    get imgHeight(): number;
-    /** Width of the <img> element */
-    get imgWidth(): number;
     /** Lng/lat of the current marker location */
@@ -80,3 +90,12 @@ get coordinate(): [number, number];
     reCenter: () => void;
+    /**
+     * The x/y offset of the image from its center based on its scrolled position within its container.
+     */
+    get imgCenterOffset(): {
+        x: number;
+        y: number;
+    };
+    /** Update image scroll position when the Minimap has been resized */
+    handleMinimapResize: () => void;
 }
 export {};

NOTICE.md

@@ -32,1 +32,27 @@ # Third Party Notices
 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+---
+
+Contains a portion of [detect-autofill](https://github.com/matteobad/detect-autofill)
+
+MIT License
+
+Copyright (c) 2019 Matteo Badini
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package.json

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

web/index.ts

@@ -146,2 +146,6 @@ import mapboxgl from 'mapbox-gl';
 if (form && element instanceof MapboxAddressAutofill) {
+  element.confirmOnBrowserAutofill = {
+    minimap: true
+  };
+
   form.addEventListener('submit', async (e) => {
@@ -148,0 +152,0 @@ e.preventDefault();

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

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

Mixed license

License

(Experimental) Package contains multiple licenses.

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

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

Improved metrics

Total package byte prevSize

2892163

increased by4.39%

Number of package files

65

increased by3.17%

Lines of code

11089

increased by5.24%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

Dependency changes

• + Addedmapbox-gl@3.7.0(transitive)

• - Removedmapbox-gl@3.8.0(transitive)

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