@longline/aqua-ui 1.0.0

package/map/controls/CompassButton/CompassButton.js

@@ -0,0 +1,88 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { useMap } from 'react-map-gl';
+import styled, { css } from 'styled-components';
+import { MapButton } from '../base/MapButton';
+import { useViewState } from '../../Map';
+import { Mouse } from '../../../controls/Mouse';
+import { Key } from '../../../controls/Key';
+var CompassButtonBase = function (p) {
+    var viewState = useViewState();
+    var map = useMap().current;
+    return (React.createElement(MapButton, __assign({ onClick: function () { map.rotateTo(0); map.resetNorthPitch(); } }, p),
+        React.createElement("div", { style: { transform: "rotateX(".concat(p.visualizePitch ? viewState.pitch : 0, "deg)") } },
+            React.createElement("svg", { style: { transform: "rotateZ(".concat(-viewState.bearing, "deg)") }, xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 1000 1000" },
+                React.createElement("polygon", { className: "tip", points: "100,1000 500,0 900,1000 500,700 " }),
+                React.createElement("polygon", { className: "arrow", points: "500,0 423,192.6 500,351.6 577,192.6 " })))));
+};
+var CompassButtonStyled = styled(CompassButtonBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /* Add custom tip color if specified. */\n  ", "\n"], ["\n  /* Add custom tip color if specified. */\n  ", "\n"
+    /**
+     * The `CompassButton` shows a bearing arrow which points to the north.
+     * It optionally tilts the arrow to reflect the current pitch.
+     *
+     * The current map ViewState must be passed to this control, which is done
+     * automatically when the control is hosted inside a `Map` instance. The ViewState
+     * is then passed down through a context and can be accessed using `useViewState`.
+     *
+     * A default _hint_ is provided, but can be overridden using `hint`. The hint can
+     * be removed entirely by setting `hint={null}`.
+     *
+     * ```tsx
+     * <CompassButton
+     *   x={40} y={50} visualizePitch contrastTip
+     * />
+     * ```
+     */
+])), function (p) { return p.contrastTip && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    svg polygon.arrow {\n      fill: ", ";\n    }"], ["\n    svg polygon.arrow {\n      fill: ", ";\n    }"])), typeof p.contrastTip === "string" ? p.contrastTip : "red"); });
+/**
+ * The `CompassButton` shows a bearing arrow which points to the north.
+ * It optionally tilts the arrow to reflect the current pitch.
+ *
+ * The current map ViewState must be passed to this control, which is done
+ * automatically when the control is hosted inside a `Map` instance. The ViewState
+ * is then passed down through a context and can be accessed using `useViewState`.
+ *
+ * A default _hint_ is provided, but can be overridden using `hint`. The hint can
+ * be removed entirely by setting `hint={null}`.
+ *
+ * ```tsx
+ * <CompassButton
+ *   x={40} y={50} visualizePitch contrastTip
+ * />
+ * ```
+ */
+var CompassButton = function (_a) {
+    var _b = _a.hint, hint = _b === void 0 ? React.createElement(React.Fragment, null,
+        React.createElement(Key, { value: "Ctrl" }),
+        " + ",
+        React.createElement(Mouse, { size: 16, left: true }),
+        " Adjust pitch/bearing") : _b, props = __rest(_a, ["hint"]);
+    return React.createElement(CompassButtonStyled, __assign({ hint: hint }, props));
+};
+export { CompassButton };
+var templateObject_1, templateObject_2;

package/map/controls/FullscreenButton/FullscreenButton.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IMapButtonProps } from '../base/MapButton';
+interface IProps {
+    /**
+     * (Optional) Container that should be made fullscreen. If omitted, this
+     * will be the map's direct container.
+     */
+    container?: HTMLDivElement;
+}
+/**
+ * The `FullscreenButton` toggles the map full-screen when clicked.
+ *
+ * A default _hint_ is provided, but can be overridden using `hint`. The hint can
+ * be removed entirely by setting `hint={null}`.
+ *
+ * ```tsx
+ * <FullscreenButton x={40} y={50}/>
+ * ```
+ */
+declare const FullscreenButton: ({ hint, ...props }: IMapButtonProps & IProps) => React.JSX.Element;
+export { FullscreenButton, IProps };

package/map/controls/FullscreenButton/FullscreenButton.js

@@ -0,0 +1,62 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { useMap } from 'react-map-gl';
+import { MapButton } from '../base/MapButton';
+/**
+ * The `FullscreenButton` toggles the map full-screen when clicked.
+ *
+ * A default _hint_ is provided, but can be overridden using `hint`. The hint can
+ * be removed entirely by setting `hint={null}`.
+ *
+ * ```tsx
+ * <FullscreenButton x={40} y={50}/>
+ * ```
+ */
+var FullscreenButton = function (_a) {
+    var _b = _a.hint, hint = _b === void 0 ? React.createElement(React.Fragment, null, "Toggle fullscreen map") : _b, props = __rest(_a, ["hint"]);
+    var map = useMap().current;
+    //
+    // Does the browser offer full screen support?
+    var checkFullscreenSupport = function () {
+        return !!(window.document.fullscreenEnabled ||
+            window.document.webkitFullscreenEnabled);
+    };
+    var toggle = function () {
+        if (document.fullscreenElement === null) {
+            if (props.container) {
+                props.container.requestFullscreen();
+            }
+            else {
+                map.getContainer().requestFullscreen();
+            }
+        }
+        else {
+            window.document.exitFullscreen();
+        }
+    };
+    return (React.createElement(MapButton, __assign({ disabled: !checkFullscreenSupport(), onClick: toggle, hint: hint }, props),
+        React.createElement("svg", { width: "100", height: "100", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z" }))));
+};
+export { FullscreenButton };

package/map/controls/Geocoder/Geocoder.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { IMapControlProps } from '../base/MapControl';
+interface IGeocoderProps extends IMapControlProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Mapbox access token.
+     */
+    access_token: string;
+    /**
+     * Optional control width, in pixels.
+     * @default 300
+     */
+    width?: number;
+    /**
+     * If set, shows a static search icon.
+     * @default false
+     */
+    searchIcon?: boolean;
+    /**
+     * Optional placeholder for input box.
+     * @default "Type to search places"
+     */
+    placeholder?: string;
+    /**
+     * For point features with no bounding box, this is the zoom level that
+     * the map will fly to.
+     * When a feature has a bounding box, the map will fit the bounding box.
+     * @default 15
+     */
+    pointZoom?: number;
+    /**
+     * If set, bias will be given to results around the user's IP address.
+     * @default true
+     */
+    proximityIP?: boolean;
+}
+/**
+ * The `Geocoder` control displays an input box. Typing into it sends requests
+ * to Mapbox for geocoding (with a debounce), and a list of matches appears.
+ * Clicking a match has the map fly to the selection location. The control
+ * must be provided with a map `access_token` to work.
+ *
+ * The input box can be placed using the `x` and `y` props.
+ *
+ * Mapbox geocoding playground: https://docs.mapbox.com/playground/geocoding/
+ */
+declare const Geocoder: ({ width, searchIcon, placeholder, pointZoom, proximityIP, ...props }: IGeocoderProps) => React.JSX.Element;
+export { Geocoder, IGeocoderProps };

package/map/controls/Geocoder/Geocoder.js

@@ -0,0 +1,179 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { useMap } from 'react-map-gl';
+import { GeocoderApi } from './GeocoderApi';
+import { GeocoderEntry } from './GeocoderEntry';
+import { GeocoderList } from './GeocoderList';
+import { GeocoderSelector } from './GeocoderSelector';
+import { MapControl } from '../base/MapControl';
+var GeocoderBase = function (props) {
+    var wrapperRef = React.useRef(null);
+    var map = useMap().current;
+    // Timer is used for debouncing requests:
+    var _a = React.useState(null), timer = _a[0], setTimer = _a[1];
+    // Current query:
+    var _b = React.useState(""), q = _b[0], setQ = _b[1];
+    // Currently retrieved features:
+    var _c = React.useState([]), features = _c[0], setFeatures = _c[1];
+    // Offset of currently-selected feature (0-based):
+    var _d = React.useState(-1), selectedIndex = _d[0], setSelectedIndex = _d[1];
+    //
+    // Clear the control, removing any items.
+    // Focus on input.
+    //  
+    var clear = function () {
+        setQ("");
+        setFeatures([]);
+        setSelectedIndex(-1);
+        if (wrapperRef)
+            wrapperRef.current.querySelector('input').focus();
+    };
+    //
+    // Call mapbox geocoder API, and store results in state.
+    //
+    var lookup = function (q) {
+        if (q == "")
+            return;
+        var options = {
+            proximityIP: props.proximityIP
+        };
+        GeocoderApi.lookup(q, props.access_token, options)
+            .then(function (res) {
+            setFeatures(res);
+            if (res.length > 0)
+                setSelectedIndex(0);
+        });
+    };
+    // 
+    // Debounce calls to lookup by 350ms.
+    // 
+    var lookupDebounced = function (q) {
+        if (timer != null) {
+            window.clearTimeout(timer);
+            setTimer(null);
+        }
+        setTimer(window.setTimeout(function () { return lookup(q); }, 350));
+    };
+    //
+    // Handle document-wide mousedown event by closing the list.
+    //
+    var handleClickOutside = function () {
+        var elem = event.target;
+        if (wrapperRef && !wrapperRef.current.contains(elem)) {
+            clear();
+        }
+    };
+    var handleChange = function (newq) {
+        // When clearing, we want immediate result:
+        if (newq == "") {
+            clear();
+            return;
+        }
+        // Non-clearing needs a debounce.
+        setQ(newq);
+        lookupDebounced(newq);
+    };
+    var handleClick = function (feature) {
+        if (feature.properties.bbox) {
+            map.fitBounds(feature.properties.bbox);
+        }
+        else {
+            map.flyTo({
+                center: { lng: feature.properties.coordinates.longitude, lat: feature.properties.coordinates.latitude },
+                zoom: props.pointZoom
+            });
+        }
+        clear();
+    };
+    var handleKeyDown = function (e) {
+        switch (e.code) {
+            case 'ArrowDown':
+            case 'Numpad2':
+                e.preventDefault();
+                setSelectedIndex(Math.min(selectedIndex + 1, features.length - 1));
+                break;
+            case 'ArrowUp':
+            case 'Numpad8':
+                e.preventDefault();
+                setSelectedIndex(Math.max(selectedIndex - 1, 0));
+                break;
+            case 'Enter':
+            case 'NumpadEnter':
+                e.preventDefault();
+                handleClick(features[selectedIndex]);
+                break;
+            case 'Escape':
+                e.preventDefault();
+                clear();
+                break;
+        }
+    };
+    React.useEffect(function () {
+        // Listen for document-wide mousedown event when control mounts.
+        document.addEventListener('mousedown', handleClickOutside);
+        // Clean up document-wide mousedown event when control unmounts.
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    });
+    return (React.createElement(MapControl, { x: props.x, y: props.y },
+        React.createElement("div", { className: props.className, onKeyDown: function (e) { return handleKeyDown(e); }, ref: wrapperRef },
+            React.createElement(GeocoderSelector, { placeholder: props.placeholder, searchIcon: props.searchIcon, value: q, onChange: handleChange }),
+            React.createElement(GeocoderList, null, features.map(function (f, idx) {
+                return React.createElement(GeocoderEntry, { key: idx, feature: f, selected: idx == selectedIndex, onClick: function () { return handleClick(f); } });
+            })))));
+};
+var GeocoderStyled = styled(GeocoderBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", "px;\n  pointer-events: all !important;\n"], ["\n  width: ", "px;\n  pointer-events: all !important;\n"
+    /**
+     * The `Geocoder` control displays an input box. Typing into it sends requests
+     * to Mapbox for geocoding (with a debounce), and a list of matches appears.
+     * Clicking a match has the map fly to the selection location. The control
+     * must be provided with a map `access_token` to work.
+     *
+     * The input box can be placed using the `x` and `y` props.
+     *
+     * Mapbox geocoding playground: https://docs.mapbox.com/playground/geocoding/
+     */
+])), function (p) { return p.width; });
+/**
+ * The `Geocoder` control displays an input box. Typing into it sends requests
+ * to Mapbox for geocoding (with a debounce), and a list of matches appears.
+ * Clicking a match has the map fly to the selection location. The control
+ * must be provided with a map `access_token` to work.
+ *
+ * The input box can be placed using the `x` and `y` props.
+ *
+ * Mapbox geocoding playground: https://docs.mapbox.com/playground/geocoding/
+ */
+var Geocoder = function (_a) {
+    var _b = _a.width, width = _b === void 0 ? 300 : _b, _c = _a.searchIcon, searchIcon = _c === void 0 ? false : _c, _d = _a.placeholder, placeholder = _d === void 0 ? "Type to search places" : _d, _e = _a.pointZoom, pointZoom = _e === void 0 ? 15 : _e, _f = _a.proximityIP, proximityIP = _f === void 0 ? true : _f, props = __rest(_a, ["width", "searchIcon", "placeholder", "pointZoom", "proximityIP"]);
+    return React.createElement(GeocoderStyled, __assign({ width: width, searchIcon: searchIcon, placeholder: placeholder, pointZoom: pointZoom, proximityIP: proximityIP }, props));
+};
+export { Geocoder };
+var templateObject_1;

package/map/controls/Geocoder/GeocoderApi.d.ts

@@ -0,0 +1,59 @@
+/** @module @ignore */
+interface IGeocoderFeature {
+    type: string;
+    id: string;
+    geometry: {
+        type: string;
+        coordinates: number[];
+    };
+    properties: {
+        mapbox_id: string;
+        feature_type: string;
+        full_address: string;
+        name: string;
+        name_preferred: string;
+        coordinates: {
+            longitude: number;
+            latitude: number;
+        };
+        place_formatted: string;
+        bbox: [number, number, number, number];
+        context: {
+            postcode: {
+                mapbox_id: string;
+                name: string;
+            };
+            place: {
+                mapbox_id: string;
+                name: string;
+                wikidate_id: string;
+            };
+            region: {
+                mapbox_id: string;
+                name: string;
+                wikidate_id: string;
+                region_code: string;
+                region_code_full: string;
+            };
+            country: {
+                mapbox_id: string;
+                name: string;
+                wikidata_id: string;
+                country_code: string;
+                country_code_alpha_3: string;
+            };
+            neighborhood: {
+                mapbox_id: string;
+                name: string;
+            };
+        };
+    };
+}
+interface IGeocoderOptions {
+    proximityIP?: boolean;
+    country?: string;
+}
+declare class GeocoderApi {
+    static lookup(q: string, mapkey: string, options: IGeocoderOptions): Promise<IGeocoderFeature[]>;
+}
+export { GeocoderApi, IGeocoderFeature };

package/map/controls/Geocoder/GeocoderApi.js

@@ -0,0 +1,68 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var GeocoderApi = /** @class */ (function () {
+    function GeocoderApi() {
+    }
+    GeocoderApi.lookup = function (q, mapkey, options) {
+        return __awaiter(this, void 0, void 0, function () {
+            var url, res, json;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        url = new URL("https://api.mapbox.com/search/geocode/v6/forward");
+                        url.searchParams.append("q", q);
+                        url.searchParams.append("access_token", mapkey);
+                        if (options.country)
+                            url.searchParams.append("country", options.country);
+                        if (options.proximityIP)
+                            url.searchParams.append("proximity", "ip");
+                        return [4 /*yield*/, fetch(url, {
+                                method: 'GET',
+                            })];
+                    case 1:
+                        res = _a.sent();
+                        return [4 /*yield*/, res.json()];
+                    case 2:
+                        json = _a.sent();
+                        return [2 /*return*/, json.features];
+                }
+            });
+        });
+    };
+    return GeocoderApi;
+}());
+export { GeocoderApi };

package/map/controls/Geocoder/GeocoderEntry.d.ts

@@ -0,0 +1,15 @@
+/** @module @ignore */
+import * as React from 'react';
+import { IGeocoderFeature } from './GeocoderApi';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** Feature to show in this entry. */
+    feature: IGeocoderFeature;
+    /** Fired when entry is clicked. */
+    onClick: () => void;
+    /** Is entry currently keyboard-selected? */
+    selected?: boolean;
+}
+declare const GeocoderEntry: (props: IProps) => React.JSX.Element;
+export { GeocoderEntry };

package/map/controls/Geocoder/GeocoderEntry.js

@@ -0,0 +1,18 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+/** @module @ignore */
+import * as React from 'react';
+import styled from 'styled-components';
+import { ListRow } from '../../../containers/List';
+var GeocoderEntry = function (props) {
+    return React.createElement(ListRow, { onClick: props.onClick, active: props.selected },
+        React.createElement("div", { style: { width: '100%' } },
+            React.createElement(ResultText, null, props.feature.properties.name_preferred),
+            React.createElement(ResultPlace, null, props.feature.properties.full_address)));
+};
+var ResultText = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  user-select: none;\n  font: ", ";\n"], ["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  user-select: none;\n  font: ", ";\n"])), function (p) { return p.theme.font.bodyMedium; });
+var ResultPlace = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  user-select: none;\n  font: ", ";\n"], ["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  user-select: none;\n  font: ", ";\n"])), function (p) { return p.theme.font.bodySmall; });
+export { GeocoderEntry };
+var templateObject_1, templateObject_2;

package/map/controls/Geocoder/GeocoderList.d.ts

@@ -0,0 +1,10 @@
+/** @module @ignore */
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+}
+declare const GeocoderList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export { GeocoderList };

package/map/controls/Geocoder/GeocoderList.js

@@ -0,0 +1,18 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+/** @module @ignore */
+import * as React from 'react';
+import styled from 'styled-components';
+import { List } from '../../../containers/List';
+/**
+ * Animated list of fixed-height items.
+ */
+var GeocoderListBase = function (props) {
+    return React.createElement("div", { className: props.className },
+        React.createElement(List, { tall: true, maxItems: 5, contract: true }, props.children));
+};
+var GeocoderList = styled(GeocoderListBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  left: 0;\n  top: 42px;\n"], ["\n  position: absolute;\n  width: 100%;\n  left: 0;\n  top: 42px;\n"])));
+export { GeocoderList };
+var templateObject_1;

package/map/controls/Geocoder/GeocoderSelector.d.ts

@@ -0,0 +1,16 @@
+/** @module @ignore */
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** Current value of input. */
+    value: string;
+    /** Show a static search icon? */
+    searchIcon: boolean;
+    /** Placeholder. */
+    placeholder: string;
+    /** Fired when input value changes. */
+    onChange: (q: string) => void;
+}
+declare const GeocoderSelector: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export { GeocoderSelector };

package/map/controls/Geocoder/GeocoderSelector.js

@@ -0,0 +1,25 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+/** @module @ignore */
+import * as React from 'react';
+import styled, { useTheme } from 'styled-components';
+import { Icon } from '../../../controls/Icon';
+import { SVG } from '../../../svg';
+var GeocoderSelectorBase = function (props) {
+    var theme = useTheme();
+    // 
+    // Receive value from ChangeEvent and send it on.
+    // 
+    var handleChange = function (e) {
+        props.onChange(e.target.value);
+    };
+    return (React.createElement("div", { className: props.className },
+        props.searchIcon &&
+            React.createElement(Icon, { url: SVG.Icons.Search, color: theme.colors.neutral[50] }),
+        React.createElement("input", { placeholder: props.placeholder, value: props.value, onChange: handleChange })));
+};
+var GeocoderSelector = styled(GeocoderSelectorBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: 34px;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  // Content:  \n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  // Appearance:\n  background-color: ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n  border: none;\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  // Focus:\n  :focus-within > & {\n    outline: solid 2px ", ";\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n  \n  input {\n    width:            100%;\n    box-sizing:       border-box;\n    z-index:          0;\n    text-align:       left;\n    border:           none;\n    outline:          none;\n    background-color: transparent;\n    color:            ", ";\n    \n    // Define colors for placeholder text.\n    &::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n\n    // Define colors for selected text.\n    &::selection {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    /* Define colors for selected text. */\n    &::selection {\n      background-color: rgba(100,100,100,.4);\n      color: ", ";\n    }\n\n    /* Make sure HTML5 validation does not show up. */\n    &:valid {\n      box-shadow: none;\n    }\n    &:invalid {\n      box-shadow: none;\n    }\n\n    /* Turn off number spinners. */\n    &[type=number]::-webkit-inner-spin-button, \n    &[type=number]::-webkit-outer-spin-button { \n      -webkit-appearance: none;  /* Webkit (Chrome) */\n      margin: 0; \n    }    \n    &[type=number] {\n      -moz-appearance: textfield; /* Firefox */\n      appearance: textfield;\n    }\n  }\n"], ["\n  position: relative;\n  height: 34px;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  // Content:  \n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  // Appearance:\n  background-color: ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n  border: none;\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  // Focus:\n  :focus-within > & {\n    outline: solid 2px ", ";\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n  \n  input {\n    width:            100%;\n    box-sizing:       border-box;\n    z-index:          0;\n    text-align:       left;\n    border:           none;\n    outline:          none;\n    background-color: transparent;\n    color:            ", ";\n    \n    // Define colors for placeholder text.\n    &::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n\n    // Define colors for selected text.\n    &::selection {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    /* Define colors for selected text. */\n    &::selection {\n      background-color: rgba(100,100,100,.4);\n      color: ", ";\n    }\n\n    /* Make sure HTML5 validation does not show up. */\n    &:valid {\n      box-shadow: none;\n    }\n    &:invalid {\n      box-shadow: none;\n    }\n\n    /* Turn off number spinners. */\n    &[type=number]::-webkit-inner-spin-button, \n    &[type=number]::-webkit-outer-spin-button { \n      -webkit-appearance: none;  /* Webkit (Chrome) */\n      margin: 0; \n    }    \n    &[type=number] {\n      -moz-appearance: textfield; /* Firefox */\n      appearance: textfield;\n    }\n  }\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.fontColor; });
+export { GeocoderSelector };
+var templateObject_1;