@radarlabs/plugin-autocomplete 5.0.0-beta.5

package/README.md

@@ -0,0 +1,128 @@
+# @radarlabs/plugin-autocomplete
+
+Autocomplete UI plugin for
+[radar-sdk-js](https://www.npmjs.com/package/radar-sdk-js). Provides a
+drop-in `Radar.ui.autocomplete()` widget with search-as-you-type address
+results powered by the
+[Radar Autocomplete API](https://radar.com/documentation/api#autocomplete).
+
+## Installation
+
+### With npm
+
+```bash
+npm install radar-sdk-js @radarlabs/plugin-autocomplete
+```
+
+```js
+import Radar from 'radar-sdk-js';
+import { createAutocompletePlugin } from '@radarlabs/plugin-autocomplete';
+import '@radarlabs/plugin-autocomplete/dist/radar-autocomplete.css';
+
+Radar.registerPlugin(createAutocompletePlugin());
+Radar.initialize('prj_test_pk_...');
+```
+
+### With a script tag
+
+Load the core SDK first, then the autocomplete plugin. The CDN bundle
+auto-registers with the core SDK.
+
+```html
+<link href="https://js.radar.com/autocomplete/v5.0.0-beta.4/radar-autocomplete.css" rel="stylesheet">
+<script src="https://js.radar.com/v5.0.0-beta.3/radar.min.js"></script>
+<script src="https://js.radar.com/autocomplete/v5.0.0-beta.4/radar-autocomplete.min.js"></script>
+```
+
+## Usage
+
+### Create an autocomplete input
+
+Pass a container element ID (or an `HTMLElement` reference) to render the
+widget:
+
+```js
+const autocomplete = Radar.ui.autocomplete({
+  container: 'autocomplete',
+  onSelection: (result) => {
+    console.log(result);
+  },
+});
+```
+
+You can also pass an existing `<input>` element as the container. In that
+case, the widget attaches the results dropdown to the input instead of
+creating a new one.
+
+### Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `container` | `string \| HTMLElement` | `'autocomplete'` | Container element or ID |
+| `onSelection` | `(result) => void` | — | Called when the user selects a result |
+| `onResults` | `(results) => void` | — | Called after results are fetched |
+| `onRequest` | `(params) => void` | — | Called before each API request |
+| `onError` | `(error) => void` | — | Called on fetch errors |
+| `placeholder` | `string` | `'Search address'` | Input placeholder text |
+| `minCharacters` | `number` | `3` | Minimum characters before searching |
+| `debounceMS` | `number` | `200` | Debounce delay in milliseconds |
+| `limit` | `number` | `8` | Maximum number of results |
+| `responsive` | `boolean` | `true` | Use 100% width (with optional `maxWidth`) |
+| `width` | `string \| number` | `400` | Fixed width, or max-width if responsive |
+| `maxHeight` | `string \| number` | — | Max height for the results dropdown |
+| `disabled` | `boolean` | `false` | Disable the input |
+| `showMarkers` | `boolean` | `true` | Show marker icons next to results |
+| `markerColor` | `string` | `'#ACBDC8'` | Color of result marker icons |
+| `hideResultsOnBlur` | `boolean` | `true` | Close results when input loses focus |
+| `near` | `Location \| string` | — | Bias results near a location |
+| `layers` | `string[]` | — | Filter by geocode layers |
+| `countryCode` | `string` | — | Filter results by country |
+| `lang` | `string` | — | Language for results |
+| `postalCode` | `string` | — | Filter results by postal code |
+| `mailable` | `boolean` | — | Only return mailable addresses |
+
+### Chainable setters
+
+All setters return the `AutocompleteUI` instance for chaining:
+
+```js
+autocomplete
+  .setNear({ latitude: 40.735, longitude: -73.991 })
+  .setPlaceholder('Enter an address')
+  .setMinCharacters(2)
+  .setLimit(5)
+  .setWidth('500px')
+  .setResponsive(true);
+```
+
+Available setters: `setNear()`, `setPlaceholder()`, `setDisabled()`,
+`setResponsive()`, `setWidth()`, `setMaxHeight()`, `setMinCharacters()`,
+`setLimit()`, `setLang()`, `setPostalCode()`, `setShowMarkers()`,
+`setMarkerColor()`, `setHideResultsOnBlur()`.
+
+### Remove the widget
+
+Call `remove()` to clean up the widget and its DOM elements:
+
+```js
+autocomplete.remove();
+```
+
+## Accessibility
+
+The autocomplete widget includes ARIA attributes for screen readers:
+
+- `role="combobox"` on the input
+- `role="listbox"` on the results list
+- `aria-live="polite"` for dynamic result announcements
+- Keyboard navigation with Arrow keys, Tab, Enter, and Escape
+
+## Peer dependencies
+
+| Package | Version |
+|---------|---------|
+| `radar-sdk-js` | `>=5.0.0-beta.1` |
+
+## Support
+
+Have questions? We're here to help! Email us at [support@radar.com](mailto:support@radar.com).

package/cdn/radar-autocomplete.css

@@ -0,0 +1 @@
+:root{--radar-gray1:#f6fafc;--radar-gray2:#eaf1f6;--radar-gray3:#dbe5eb;--radar-gray5:#acbdc8;--radar-gray6:#5a6872;--radar-gray8:#051723;--radar-sapphire:#0005fb;--radar-midnight:#000257}@font-face{font-family:Graphik;font-weight:400;src:url(https://static.radar.com/fonts/Graphik-Regular.woff) format("woff")}@font-face{font-family:Graphik;font-weight:600;src:url(https://static.radar.com/fonts/Graphik-Semibold.woff) format("woff")}.radar-autocomplete-wrapper{font-family:Graphik,sans-serif;position:relative}.radar-autocomplete-input{border:1px solid var(--radar-gray3);border-radius:4px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;color:var(--radar-gray8);font-size:1rem;font-weight:400;height:2.25rem;line-height:1.5;margin:0;outline:none;padding:.375rem .75rem .375rem 40px;text-overflow:ellipsis;transition:all .3s ease;-webkit-transition:all -webkit-transform .3s ease;width:100%}.radar-autocomplete-input:disabled,.radar-autocomplete-input:hover:disabled{background:var(--radar-gray3);cursor:not-allowed;opacity:1}.radar-autocomplete-input::placeholder{color:var(--radar-gray5);transition:all .3s ease;-webkit-transition:all -webkit-transform .3s ease}.radar-autocomplete-input:focus::placeholder{font-size:15.5px;opacity:.7;padding:.1rem .4rem}.radar-autocomplete-input:hover::placeholder{opacity:.8;transition:all .3s ease;-webkit-transition:all -webkit-transform .3s ease}.radar-autocomplete-input:focus{border:1px solid var(--radar-gray3);box-shadow:0 0 4px #81beff;opacity:1}.radar-autocomplete-search-icon{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.78 10.717 9.989 8.925l-.54-.54a5.187 5.187 0 0 0 1.05-3.135A5.255 5.255 0 0 0 5.25 0 5.255 5.255 0 0 0 0 5.25a5.255 5.255 0 0 0 5.25 5.25 5.217 5.217 0 0 0 3.134-1.05l1.26 1.26 1.072 1.072c.142.15.337.218.532.218a.747.747 0 0 0 .532-1.275v-.008ZM1.5 5.25c0-2.07 1.68-3.75 3.75-3.75a3.751 3.751 0 0 1 0 7.5C3.18 9 1.5 7.32 1.5 5.25Z' fill='%23ACBDC8'/%3E%3C/svg%3E");display:block;height:12px;left:16px;position:absolute;top:12px;width:12px}.radar-autocomplete-results-list{background-color:#fff;border:1px solid var(--radar-gray3);border-radius:4px;box-shadow:0 4px 12px rgba(5,23,35,.1);box-sizing:border-box;left:0;list-style:none;margin:.5rem 0 0;outline:none;padding:8px 0 0;position:absolute;right:0;transition:opacity .15s ease-in-out;-moz-transition:opacity .15s ease-in-out;-webkit-transition:opacity .15s ease-in-out;z-index:1}.radar-autocomplete-results-list:empty,.radar-autocomplete-results-list[hidden]{display:block;opacity:0;transform:scale(0)}.radar-autocomplete-results-item{align-items:center;color:var(--radar-gray6);display:flex;font-size:14px;line-height:24px;overflow:hidden;padding:8px 16px;text-align:left;text-overflow:ellipsis;transition:all .2s ease;white-space:nowrap}.radar-autocomplete-results-item b{color:var(--radar-gray8);font-weight:600;margin-right:8px}.radar-autocomplete-results-marker{margin-right:16px}.radar-autocomplete-results-item:hover{background-color:var(--radar-gray1);cursor:pointer}.radar-autocomplete-results-item-selected,.radar-autocomplete-results-item[aria-selected=true]{background-color:var(--radar-gray2)}.radar-powered{align-items:center;color:var(--radar-gray6);display:flex;font-size:10px;font-style:normal;font-weight:400;justify-content:flex-end;line-height:10px;padding:8px 16px}.radar-powered a{text-decoration:none!important}.radar-powered a,.radar-powered a:visited{color:var(--radar-gray6)!important}.radar-powered #radar-powered-logo{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='40' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.462 8.836V1.207h2.832c1.89 0 2.942.81 2.942 2.422v.043c0 1.088-.546 1.696-1.304 2.006l1.73 3.158h-2.185L14.01 6.104h-.486v2.732h-2.063Zm2.063-4.15h.668c.697 0 1.041-.31 1.041-.929v-.043c0-.618-.364-.864-1.031-.864h-.678v1.835Zm6.26 4.278c-.95 0-1.79-.491-1.79-1.675 0-1.313 1.052-1.825 2.811-1.825h.506v-.128c0-.533-.122-.885-.698-.885-.495 0-.678.309-.718.661h-1.699c.081-1.344 1.082-2.006 2.528-2.006 1.456 0 2.387.63 2.387 2.113v3.617h-1.76v-.651c-.253.405-.718.779-1.567.779Zm.627-1.291c.515 0 .9-.31.9-.79v-.341h-.476c-.728 0-1.051.15-1.051.608 0 .32.202.523.627.523Zm5.693 1.29c-1.223 0-2.225-.927-2.225-2.859V6.02c0-1.9.992-2.913 2.245-2.913.83 0 1.325.374 1.629.94V.801h1.81v8.034h-1.81v-.907a1.774 1.774 0 0 1-1.649 1.035Zm.637-1.46c.658-.001 1.062-.481 1.062-1.43v-.086c0-.939-.374-1.44-1.041-1.44-.678 0-1.042.48-1.042 1.45v.086c0 .939.394 1.419 1.021 1.419Zm5.38 1.46c-.95 0-1.79-.49-1.79-1.674 0-1.313 1.052-1.825 2.812-1.825h.505v-.128c0-.533-.121-.885-.697-.885-.496 0-.678.309-.718.661h-1.7c.082-1.344 1.083-2.006 2.529-2.006 1.456 0 2.386.63 2.386 2.113v3.617h-1.76v-.651c-.252.405-.717.779-1.567.779Zm.627-1.29c.516 0 .9-.31.9-.79v-.341h-.475c-.728 0-1.052.15-1.052.608 0 .32.203.523.627.523Zm3.732 1.163h1.81V6.19c0-.897.607-1.26 1.709-1.227V3.18c-.82-.01-1.375.352-1.709 1.184v-1.11h-1.81v5.58ZM3.871 0 0 9.99l3.871-1.677L7.743 10 3.87 0Z' fill='%235A6872'/%3E%3C/svg%3E");color:transparent;display:inline-block;height:10px;margin-left:4px;width:40px}.radar-no-results{padding:8px 16px}

package/cdn/radar-autocomplete.js

@@ -0,0 +1,546 @@
+(function (Radar) {
+    'use strict';
+
+    class RadarAutocompleteContainerNotFound extends Radar.RadarError {
+        constructor(message) {
+            super(message);
+            this.name = 'RadarAutocompleteContainerNotFound';
+            this.status = 'CONTAINER_NOT_FOUND';
+        }
+    }
+
+    const CLASSNAMES = {
+        WRAPPER: 'radar-autocomplete-wrapper',
+        INPUT: 'radar-autocomplete-input',
+        SEARCH_ICON: 'radar-autocomplete-search-icon',
+        RESULTS_LIST: 'radar-autocomplete-results-list',
+        RESULTS_ITEM: 'radar-autocomplete-results-item',
+        RESULTS_MARKER: 'radar-autocomplete-results-marker',
+        SELECTED_ITEM: 'radar-autocomplete-results-item-selected',
+        POWERED_BY_RADAR: 'radar-powered',
+        NO_RESULTS: 'radar-no-results',
+    };
+    const defaultAutocompleteOptions = {
+        container: 'autocomplete',
+        debounceMS: 200, // Debounce time in milliseconds
+        minCharacters: 3, // Minimum number of characters to trigger autocomplete
+        limit: 8, // Maximum number of autocomplete results
+        placeholder: 'Search address', // Placeholder text for the input field
+        responsive: true,
+        disabled: false,
+        showMarkers: true,
+        hideResultsOnBlur: true,
+    };
+    // determine whether to use px or CSS string
+    const formatCSSValue = (value) => {
+        if (typeof value === 'number') {
+            return `${value}px`;
+        }
+        return value;
+    };
+    const DEFAULT_WIDTH = 400;
+    const setWidth = (input, options) => {
+        // if responsive and width is provided, treat it as maxWidth
+        if (options.responsive) {
+            input.style.width = '100%';
+            if (options.width) {
+                input.style.maxWidth = formatCSSValue(options.width);
+            }
+            return;
+        }
+        // if not responsive, set fixed width and unset maxWidth
+        input.style.width = formatCSSValue(options.width || DEFAULT_WIDTH);
+        input.style.removeProperty('max-width');
+    };
+    const setHeight = (resultsList, options) => {
+        if (options.maxHeight) {
+            resultsList.style.maxHeight = formatCSSValue(options.maxHeight);
+            resultsList.style.overflowY = 'auto'; /* allow overflow when maxHeight is applied */
+        }
+    };
+    const getMarkerIcon = (color = "#ACBDC8") => {
+        const fill = color.replace('#', '%23');
+        const svg = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.5704 6.57036C12.5704 4.11632 10.6342 2.11257 8.21016 2C8.14262 2 8.06757 2 8.00003 2C7.93249 2 7.85744 2 7.7899 2C5.35838 2.11257 3.42967 4.11632 3.42967 6.57036C3.42967 6.60037 3.42967 6.6379 3.42967 6.66792C3.42967 6.69794 3.42967 6.73546 3.42967 6.76548C3.42967 9.46717 7.09196 13.3621 7.4672 13.7598C7.61729 13.9174 7.84994 14 8.00003 14C8.15012 14 8.38277 13.9174 8.53286 13.7598C8.9156 13.3621 12.5704 9.46717 12.5704 6.76548C12.5704 6.72795 12.5704 6.69794 12.5704 6.66792C12.5704 6.6379 12.5704 6.60037 12.5704 6.57036ZM7.99252 8.28893C7.04693 8.28893 6.27395 7.52345 6.27395 6.57036C6.27395 5.61726 7.03943 4.85178 7.99252 4.85178C8.94562 4.85178 9.7111 5.61726 9.7111 6.57036C9.7111 7.52345 8.94562 8.28893 7.99252 8.28893Z" fill="${fill}"/>
+  </svg>`.trim();
+        return `data:image/svg+xml;charset=utf-8,${svg}`;
+    };
+    class AutocompleteUI {
+        constructor(options, ctx) {
+            this.ctx = ctx;
+            const { Logger } = this.ctx;
+            this.config = Object.assign({}, defaultAutocompleteOptions, options);
+            // setup state
+            this.isOpen = false;
+            this.debouncedFetchResults = this.debounce(this.fetchResults, this.config.debounceMS);
+            this.results = [];
+            this.highlightedIndex = -1;
+            // set threshold alias
+            if (this.config.threshold !== undefined) {
+                this.config.minCharacters = this.config.threshold;
+                Logger.warn('AutocompleteUI option "threshold" is deprecated, use "minCharacters" instead.');
+            }
+            if (options.near) {
+                if (typeof options.near === 'string') {
+                    this.near = options.near;
+                }
+                else {
+                    this.near = `${options.near.latitude},${options.near.longitude}`;
+                }
+            }
+            // get container element
+            let containerEL;
+            if (typeof this.config.container === 'string') { // lookup container element by ID
+                containerEL = document.getElementById(this.config.container);
+            }
+            else { // use provided element
+                containerEL = this.config.container; // HTMLElement
+            }
+            if (!containerEL) {
+                throw new RadarAutocompleteContainerNotFound(`Could not find container element: ${this.config.container}`);
+            }
+            this.container = containerEL;
+            // create wrapper for input and result list
+            this.wrapper = document.createElement('div');
+            this.wrapper.classList.add(CLASSNAMES.WRAPPER);
+            this.wrapper.style.display = this.config.responsive ? 'block' : 'inline-block';
+            setWidth(this.wrapper, this.config);
+            // result list element
+            this.resultsList = document.createElement('ul');
+            this.resultsList.classList.add(CLASSNAMES.RESULTS_LIST);
+            this.resultsList.setAttribute('id', CLASSNAMES.RESULTS_LIST);
+            this.resultsList.setAttribute('role', 'listbox');
+            this.resultsList.setAttribute('aria-live', 'polite');
+            this.resultsList.setAttribute('aria-label', 'Search results');
+            setHeight(this.resultsList, this.config);
+            if (containerEL.nodeName === 'INPUT') {
+                // if an <input> element is provided, use that as the inputField,
+                // and append the resultList to it's parent container
+                this.inputField = containerEL;
+                // append to dom
+                this.wrapper.appendChild(this.resultsList);
+                containerEL.parentNode.appendChild(this.wrapper);
+            }
+            else {
+                // if container is not an input, create new input and append to container
+                // create new input
+                this.inputField = document.createElement('input');
+                this.inputField.classList.add(CLASSNAMES.INPUT);
+                this.inputField.placeholder = this.config.placeholder;
+                this.inputField.type = 'text';
+                this.inputField.disabled = this.config.disabled;
+                // search icon
+                const searchIcon = document.createElement('div');
+                searchIcon.classList.add(CLASSNAMES.SEARCH_ICON);
+                // append to DOM
+                this.wrapper.appendChild(this.inputField);
+                this.wrapper.appendChild(this.resultsList);
+                this.wrapper.appendChild(searchIcon);
+                this.container.appendChild(this.wrapper);
+            }
+            // disable browser autofill
+            this.inputField.setAttribute('autocomplete', 'off');
+            // set aria roles
+            this.inputField.setAttribute('role', 'combobox');
+            this.inputField.setAttribute('aria-controls', CLASSNAMES.RESULTS_LIST);
+            this.inputField.setAttribute('aria-expanded', 'false');
+            this.inputField.setAttribute('aria-haspopup', 'listbox');
+            this.inputField.setAttribute('aria-autocomplete', 'list');
+            this.inputField.setAttribute('aria-activedescendant', '');
+            // setup event listeners
+            this.inputField.addEventListener('input', this.handleInput.bind(this));
+            this.inputField.addEventListener('keydown', this.handleKeyboardNavigation.bind(this));
+            if (this.config.hideResultsOnBlur) {
+                this.inputField.addEventListener('blur', this.close.bind(this), true);
+            }
+            Logger.debug('AutocompleteUI initialized with options', this.config);
+        }
+        handleInput() {
+            const { Logger } = this.ctx;
+            // Fetch autocomplete results and display them
+            const query = this.inputField.value;
+            if (query.length < this.config.minCharacters) {
+                return;
+            }
+            this.debouncedFetchResults(query)
+                .then((results) => {
+                const onResults = this.config.onResults;
+                if (onResults) {
+                    onResults(results);
+                }
+                this.displayResults(results);
+            })
+                .catch((error) => {
+                Logger.warn(`Autocomplete ui error: ${error.message}`);
+                const onError = this.config.onError;
+                if (onError) {
+                    onError(error);
+                }
+            });
+        }
+        debounce(fn, delay) {
+            let timeoutId;
+            let resolveFn;
+            let rejectFn;
+            return (...args) => {
+                clearTimeout(timeoutId);
+                timeoutId = setTimeout(() => {
+                    const result = fn.apply(this, args);
+                    if (result instanceof Promise) {
+                        result
+                            .then((value) => {
+                            if (resolveFn) {
+                                resolveFn(value);
+                            }
+                        })
+                            .catch((error) => {
+                            if (rejectFn) {
+                                rejectFn(error);
+                            }
+                        });
+                    }
+                }, delay);
+                return new Promise((resolve, reject) => {
+                    resolveFn = resolve;
+                    rejectFn = reject;
+                });
+            };
+        }
+        async fetchResults(query) {
+            const { apis } = this.ctx;
+            const { limit, layers, countryCode, expandUnits, mailable, lang, postalCode, onRequest } = this.config;
+            const params = {
+                query,
+                limit,
+                layers,
+                countryCode,
+                expandUnits,
+                mailable,
+                lang,
+                postalCode,
+            };
+            if (this.near) {
+                params.near = this.near;
+            }
+            if (onRequest) {
+                onRequest(params);
+            }
+            const { addresses } = await apis.Search.autocomplete(params, 'autocomplete-ui');
+            return addresses;
+        }
+        displayResults(results) {
+            // Clear the previous results
+            this.clearResultsList();
+            this.results = results;
+            let marker;
+            if (this.config.showMarkers) {
+                marker = document.createElement('img');
+                marker.classList.add(CLASSNAMES.RESULTS_MARKER);
+                marker.setAttribute('src', getMarkerIcon(this.config.markerColor));
+            }
+            // Create and append list items for each result
+            results.forEach((result, index) => {
+                const li = document.createElement('li');
+                li.classList.add(CLASSNAMES.RESULTS_ITEM);
+                li.setAttribute('role', 'option');
+                li.setAttribute('id', `${CLASSNAMES.RESULTS_ITEM}}-${index}`);
+                // construct result with bolded label
+                let listContent;
+                if (result.formattedAddress.includes(result.addressLabel) && result.layer !== 'postalCode') {
+                    // if addressLabel is contained in the formatted address, bold the address label
+                    const regex = new RegExp(`(${result.addressLabel}),?`);
+                    listContent = result.formattedAddress.replace(regex, '<b>$1</b>');
+                }
+                else {
+                    // otherwise append the address or place label to formatted address
+                    const label = result.placeLabel || result.addressLabel;
+                    listContent = `<b>${label}</b> ${result.formattedAddress}`;
+                }
+                li.innerHTML = listContent;
+                // prepend marker if enabled
+                if (marker) {
+                    li.prepend(marker.cloneNode());
+                }
+                // add click handler to each result, use mousedown to fire before blur event
+                li.addEventListener('mousedown', () => {
+                    this.select(index);
+                });
+                this.resultsList.appendChild(li);
+            });
+            this.open();
+            if (results.length > 0) {
+                const link = document.createElement('a');
+                link.href = 'https://radar.com?ref=powered_by_radar';
+                link.target = '_blank';
+                this.poweredByLink = link;
+                const poweredByText = document.createElement('span');
+                poweredByText.textContent = 'Powered by';
+                link.appendChild(poweredByText);
+                const radarLogo = document.createElement('span');
+                radarLogo.id = 'radar-powered-logo';
+                radarLogo.textContent = 'Radar';
+                link.appendChild(radarLogo);
+                const poweredByContainer = document.createElement('div');
+                poweredByContainer.classList.add(CLASSNAMES.POWERED_BY_RADAR);
+                poweredByContainer.appendChild(link);
+                this.resultsList.appendChild(poweredByContainer);
+            }
+            else {
+                const noResultsText = document.createElement('div');
+                noResultsText.classList.add(CLASSNAMES.NO_RESULTS);
+                noResultsText.textContent = 'No results';
+                this.resultsList.appendChild(noResultsText);
+            }
+        }
+        open() {
+            if (this.isOpen) {
+                return;
+            }
+            this.inputField.setAttribute('aria-expanded', 'true');
+            this.resultsList.removeAttribute('hidden');
+            this.isOpen = true;
+        }
+        close(e) {
+            if (!this.isOpen) {
+                return;
+            }
+            // run this code async to allow link click to propagate before blur
+            // (add 100ms delay if closed from link click)
+            const linkClick = e && (e.relatedTarget === this.poweredByLink);
+            setTimeout(() => {
+                this.inputField.setAttribute('aria-expanded', 'false');
+                this.inputField.setAttribute('aria-activedescendant', '');
+                this.resultsList.setAttribute('hidden', '');
+                this.highlightedIndex = -1;
+                this.isOpen = false;
+                this.clearResultsList();
+            }, linkClick ? 100 : 0);
+        }
+        goTo(index) {
+            if (!this.isOpen || !this.results.length) {
+                return;
+            }
+            // wrap around
+            if (index < 0) {
+                index = this.results.length - 1;
+            }
+            else if (index >= this.results.length) {
+                index = 0;
+            }
+            const resultItems = this.resultsList.getElementsByTagName('li');
+            if (this.highlightedIndex > -1) {
+                // clear class names on previously highlighted item
+                resultItems[this.highlightedIndex].classList.remove(CLASSNAMES.SELECTED_ITEM);
+            }
+            // add class name to newly highlighted item
+            resultItems[index].classList.add(CLASSNAMES.SELECTED_ITEM);
+            // set aria active descendant
+            this.inputField.setAttribute('aria-activedescendant', `${CLASSNAMES.RESULTS_ITEM}-${index}`);
+            this.highlightedIndex = index;
+        }
+        handleKeyboardNavigation(event) {
+            let key = event.key;
+            // allow event to propagate if result list is not open
+            if (!this.isOpen) {
+                return;
+            }
+            // treat shift+tab as up key
+            if (key === 'Tab' && event.shiftKey) {
+                key = 'ArrowUp';
+            }
+            switch (key) {
+                // Next item
+                case 'Tab':
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.goTo(this.highlightedIndex + 1);
+                    break;
+                // Prev item
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.goTo(this.highlightedIndex - 1);
+                    break;
+                // Select
+                case 'Enter':
+                    this.select(this.highlightedIndex);
+                    break;
+                // Close
+                case 'Esc':
+                    this.close();
+                    break;
+            }
+        }
+        select(index) {
+            const { Logger } = this.ctx;
+            const result = this.results[index];
+            if (!result) {
+                Logger.warn(`No autocomplete result found at index: ${index}`);
+                return;
+            }
+            let inputValue;
+            if (result.formattedAddress.includes(result.addressLabel)) {
+                inputValue = result.formattedAddress;
+            }
+            else {
+                const label = result.placeLabel || result.addressLabel;
+                inputValue = `${label}, ${result.formattedAddress}`;
+            }
+            this.inputField.value = inputValue;
+            const onSelection = this.config.onSelection;
+            if (onSelection) {
+                onSelection(result);
+            }
+            // clear results list
+            this.close();
+        }
+        clearResultsList() {
+            this.resultsList.innerHTML = '';
+            this.results = [];
+        }
+        // remove elements from DOM
+        remove() {
+            const { Logger } = this.ctx;
+            Logger.debug('AutocompleteUI removed.');
+            this.inputField.remove();
+            this.resultsList.remove();
+            this.wrapper.remove();
+        }
+        setNear(near) {
+            if (near === undefined || near === null) {
+                this.near = undefined;
+            }
+            else if (typeof near === 'string') {
+                this.near = near;
+            }
+            else {
+                this.near = `${near.latitude},${near.longitude}`;
+            }
+            return this;
+        }
+        setPlaceholder(placeholder) {
+            this.config.placeholder = placeholder;
+            this.inputField.placeholder = placeholder;
+            return this;
+        }
+        setDisabled(disabled) {
+            this.config.disabled = disabled;
+            this.inputField.disabled = disabled;
+            return this;
+        }
+        setResponsive(responsive) {
+            this.config.responsive = responsive;
+            setWidth(this.wrapper, this.config);
+            return this;
+        }
+        setWidth(width) {
+            if (width === null) {
+                this.config.width = undefined;
+            }
+            else if (typeof width === 'string' || typeof width === 'number') {
+                this.config.width = width;
+            }
+            setWidth(this.wrapper, this.config);
+            return this;
+        }
+        setMaxHeight(height) {
+            if (height === null) {
+                this.config.maxHeight = undefined;
+            }
+            else if (typeof height === 'string' || typeof height === 'number') {
+                this.config.maxHeight = height;
+            }
+            setHeight(this.resultsList, this.config);
+            return this;
+        }
+        setMinCharacters(minCharacters) {
+            this.config.minCharacters = minCharacters;
+            this.config.threshold = minCharacters;
+            return this;
+        }
+        setLimit(limit) {
+            this.config.limit = limit;
+            return this;
+        }
+        setLang(lang) {
+            if (lang === null) {
+                this.config.lang = undefined;
+            }
+            else if (typeof lang === 'string') {
+                this.config.lang = lang;
+            }
+            return this;
+        }
+        setPostalCode(postalCode) {
+            if (postalCode === null) {
+                this.config.postalCode = undefined;
+            }
+            else if (typeof postalCode === 'string') {
+                this.config.postalCode = postalCode;
+            }
+            return this;
+        }
+        setShowMarkers(showMarkers) {
+            this.config.showMarkers = showMarkers;
+            if (showMarkers) {
+                const marker = document.createElement('img');
+                marker.classList.add(CLASSNAMES.RESULTS_MARKER);
+                marker.setAttribute('src', getMarkerIcon(this.config.markerColor));
+                const resultItems = this.resultsList.getElementsByTagName('li');
+                for (let i = 0; i < resultItems.length; i++) {
+                    const currentMarker = resultItems[i].getElementsByClassName(CLASSNAMES.RESULTS_MARKER)[0];
+                    if (!currentMarker) {
+                        resultItems[i].prepend(marker.cloneNode());
+                    }
+                }
+            }
+            else {
+                const resultItems = this.resultsList.getElementsByTagName('li');
+                for (let i = 0; i < resultItems.length; i++) {
+                    const marker = resultItems[i].getElementsByClassName(CLASSNAMES.RESULTS_MARKER)[0];
+                    if (marker) {
+                        marker.remove();
+                    }
+                }
+            }
+            return this;
+        }
+        setMarkerColor(color) {
+            this.config.markerColor = color;
+            const marker = this.resultsList.getElementsByClassName(CLASSNAMES.RESULTS_MARKER);
+            for (let i = 0; i < marker.length; i++) {
+                marker[i].setAttribute('src', getMarkerIcon(color));
+            }
+            return this;
+        }
+        setHideResultsOnBlur(hideResultsOnBlur) {
+            this.config.hideResultsOnBlur = hideResultsOnBlur;
+            if (hideResultsOnBlur) {
+                this.inputField.addEventListener('blur', this.close.bind(this), true);
+            }
+            else {
+                this.inputField.removeEventListener('blur', this.close.bind(this), true);
+            }
+            return this;
+        }
+    }
+
+    var version = '5.0.0-beta.5';
+
+    function createAutocompletePlugin() {
+        return {
+            name: 'autocomplete',
+            version,
+            install(ctx) {
+                const existing = ctx.Radar.ui || {};
+                // NOTE(jasonl): we're merging with the existing ui namespace since other plugins also add to it like maps
+                ctx.Radar.ui = {
+                    ...existing,
+                    autocomplete: (options) => new AutocompleteUI(options, ctx),
+                };
+            },
+        };
+    }
+
+    Radar.registerPlugin(createAutocompletePlugin());
+
+})(Radar);