@aws-amplify/ui-react-geo 1.0.2 → 2.0.0

package/dist/esm/components/LocationSearch/LocationSearch.mjs

@@ -1 +1,72 @@
-import{__rest as r}from"tslib";import e,{useRef as t,useEffect as o}from"react";import i from"maplibre-gl";import{createAmplifyGeocoder as n}from"maplibre-gl-js-amplify";import{useMap as l,useControl as m}from"react-map-gl";const p={maplibregl:i,marker:{color:"#3FB1CE"},popup:!0,showResultMarkers:{color:"#3FB1CE"},showResultsWhileTyping:!0},s="geocoder-container",a=e=>{var{position:t="top-right"}=e,o=r(e,["position"]);return m((()=>n(o)),{position:t}),null},c=r=>{const i=t(!1);return o((()=>{i.current||(n(r).addTo(`#${s}`),i.current=!0)}),[r]),e.createElement("div",{id:s})},u=r=>{const{current:t}=l();return t?e.createElement(a,Object.assign({},p,r)):e.createElement(c,Object.assign({},p,r))};export{u as LocationSearch};
+import React, { useRef, useEffect } from 'react';
+import maplibregl from 'maplibre-gl';
+import { createAmplifyGeocoder } from 'maplibre-gl-js-amplify';
+import { useMap, useControl } from 'react-map-gl';
+import { useSetUserAgent } from '@aws-amplify/ui-react-core';
+import { VERSION } from '../../version.mjs';
+
+const LOCATION_SEARCH_OPTIONS = {
+    maplibregl,
+    marker: { color: '#3FB1CE' },
+    popup: true,
+    showResultMarkers: { color: '#3FB1CE' },
+    showResultsWhileTyping: true,
+};
+const LOCATION_SEARCH_CONTAINER = 'geocoder-container';
+const LocationSearchControl = ({ position = 'top-right', ...props }) => {
+    useControl(() => createAmplifyGeocoder(props), {
+        position,
+    });
+    return null;
+};
+const LocationSearchStandalone = (props) => {
+    const hasMounted = useRef(false);
+    useEffect(() => {
+        if (!hasMounted.current) {
+            createAmplifyGeocoder(props).addTo(`#${LOCATION_SEARCH_CONTAINER}`);
+            hasMounted.current = true;
+        }
+    }, [props]);
+    return React.createElement("div", { id: LOCATION_SEARCH_CONTAINER });
+};
+/**
+ * The `<LocationSearch>` component provides location search.
+ *
+ * [📖 Docs](https://ui.docs.amplify.aws/react/connected-components/geo#location-search)
+ *
+ * @example
+ * // Used as a map control:
+ * function App() {
+ *   return (
+ *     <MapView>
+ *       <LocationSearch />
+ *     </MapView>
+ *   );
+ * }
+ *
+ * @example
+ * // Used as a standalone component:
+ * function App() {
+ *   return <LocationSearch />;
+ * }
+ */
+const LocationSearch = (props) => {
+    const { current: map } = useMap();
+    useSetUserAgent({
+        componentName: 'LocationSearch',
+        packageName: 'react-geo',
+        version: VERSION,
+    });
+    /**
+     * This logic determines whether the LocationSearch exists as part of a Map component or if it is a standalone component.
+     * The `useControl` hook inside `LocationSearchControl` from `react-map-gl` makes it easy to add a control to a map,
+     * but throws an error if that map doesn't exist. If the map doesn't exist, the LocationSearch is mounted to a container
+     * upon rendering inside the `LocationSearchStandalone`.
+     */
+    if (map) {
+        return React.createElement(LocationSearchControl, { ...LOCATION_SEARCH_OPTIONS, ...props });
+    }
+    return React.createElement(LocationSearchStandalone, { ...LOCATION_SEARCH_OPTIONS, ...props });
+};
+
+export { LocationSearch };

package/dist/esm/components/MapView/MapView.mjs

@@ -1 +1,62 @@
-import{__rest as e,__awaiter as i}from"tslib";import o,{forwardRef as r,useMemo as t,useState as l,useEffect as a}from"react";import n from"maplibre-gl";import{AmplifyMapLibreRequest as m}from"maplibre-gl-js-amplify";import s from"react-map-gl";import{Amplify as p,Auth as v}from"aws-amplify";const f=r(((r,f)=>{var c,{mapLib:d,mapStyle:u,style:g}=r,y=e(r,["mapLib","mapStyle","style"]);const b=p.configure(),w=t((()=>{var e,i,o,r;return null!==(r=null!==(i=null===(e=b.geo)||void 0===e?void 0:e.amazon_location_service)&&void 0!==i?i:null===(o=b.geo)||void 0===o?void 0:o.AmazonLocationService)&&void 0!==r?r:{}}),[b]),[h,L]=l(),S=t((()=>Object.assign({height:"100vh",position:"relative",width:"100vw"},g)),[g]);return a((()=>{i(void 0,void 0,void 0,(function*(){const e=yield v.currentUserCredentials();if(e){const{region:i}=w,{transformRequest:o}=new m(e,i);L((()=>o))}}))}),[w]),h?o.createElement(s,Object.assign({},y,{mapLib:null!=d?d:n,mapStyle:null!=u?u:null===(c=w.maps)||void 0===c?void 0:c.default,ref:f,style:S,transformRequest:h,fog:y.fog,terrain:y.terrain})):null}));f.displayName="MapView";export{f as MapView};
+import { Amplify } from 'aws-amplify';
+import { fetchAuthSession } from 'aws-amplify/auth';
+import React, { forwardRef, useMemo, useState, useEffect } from 'react';
+import maplibregl from 'maplibre-gl';
+import { AmplifyMapLibreRequest } from 'maplibre-gl-js-amplify';
+import ReactMapGL from 'react-map-gl';
+
+/**
+ * The `MapView` component uses [react-map-gl](https://visgl.github.io/react-map-gl/) and
+ * [maplibre-gl-js](https://visgl.github.io/react-map-gl/) to provide an interactive map using
+ * [Amplify Geo APIs](https://docs.amplify.aws/lib/geo/getting-started/q/platform/js/) powered by
+ * [Amazon Location Service](https://aws.amazon.com/location/). Since `MapView` is a wrapper of the
+ * [react-map-gl default Map](https://visgl.github.io/react-map-gl/docs/api-reference/map/), it accepts the same
+ * properties except `transformRequest` which is set by Amplify.
+ *
+ * [📖 Docs](https://ui.docs.amplify.aws/react/connected-components/geo#mapview)
+ *
+ * @example
+ * // Basic usage of MapView:
+ * function App() {
+ *   return <MapView />
+ * }
+ */
+const MapView = forwardRef(({ mapLib, mapStyle, style, ...props }, ref) => {
+    const geoConfig = useMemo(() => {
+        return (Amplify.getConfig().Geo?.LocationService ??
+            {});
+    }, []);
+    const [transformRequest, setTransformRequest] = useState();
+    const styleProps = useMemo(() => ({
+        height: '100vh',
+        position: 'relative',
+        width: '100vw',
+        ...style,
+    }), [style]);
+    /**
+     * The transformRequest is a callback used by react-map-gl before it makes a request for an external URL. It signs
+     * the request with AWS Sigv4 Auth, provided valid credentials, and is how we integrate react-map-gl with Amplify Geo
+     * and Amazon Location Service. Once the transformRequest is created, we render the map.
+     */
+    useEffect(() => {
+        (async () => {
+            const { credentials } = await fetchAuthSession();
+            if (credentials && geoConfig) {
+                const { region } = geoConfig;
+                const { transformRequest: amplifyTransformRequest } = new AmplifyMapLibreRequest(credentials, region);
+                setTransformRequest(() => amplifyTransformRequest);
+            }
+        })();
+    }, [geoConfig]);
+    /**
+     * The mapLib property is used by react-map-gl@v7 to override the underlying map library. The default library is
+     * mapbox-gl-js, which uses its own copyrighted license. We override the map library with the BSD-licensed
+     * maplibre-gl-js.
+     *
+     * The default mapStyle we use is just the map ID provided by aws-exports.
+     */
+    return transformRequest ? (React.createElement(ReactMapGL, { ...props, mapLib: mapLib ?? maplibregl, mapStyle: mapStyle ?? geoConfig?.maps?.default, ref: ref, style: styleProps, transformRequest: transformRequest, fog: props.fog, terrain: props.terrain })) : null;
+});
+MapView.displayName = 'MapView';
+
+export { MapView };

package/dist/esm/index.mjs

@@ -1 +1,2 @@
-export{MapView}from"./components/MapView/MapView.mjs";export{LocationSearch}from"./components/LocationSearch/LocationSearch.mjs";
+export { MapView } from './components/MapView/MapView.mjs';
+export { LocationSearch } from './components/LocationSearch/LocationSearch.mjs';

package/dist/esm/version.mjs

@@ -0,0 +1,3 @@
+const VERSION = '1.0.2';
+
+export { VERSION };

package/dist/index.js

@@ -1 +1,140 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react"),r=require("maplibre-gl"),i=require("maplibre-gl-js-amplify"),o=require("react-map-gl"),a=require("aws-amplify");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(t),s=l(r),u=l(o);const c=t.forwardRef(((r,o)=>{var l,{mapLib:c,mapStyle:p,style:d}=r,f=e.__rest(r,["mapLib","mapStyle","style"]);const m=a.Amplify.configure(),v=t.useMemo((()=>{var e,t,r,i;return null!==(i=null!==(t=null===(e=m.geo)||void 0===e?void 0:e.amazon_location_service)&&void 0!==t?t:null===(r=m.geo)||void 0===r?void 0:r.AmazonLocationService)&&void 0!==i?i:{}}),[m]),[g,y]=t.useState(),b=t.useMemo((()=>Object.assign({height:"100vh",position:"relative",width:"100vw"},d)),[d]);return t.useEffect((()=>{e.__awaiter(void 0,void 0,void 0,(function*(){const e=yield a.Auth.currentUserCredentials();if(e){const{region:t}=v,{transformRequest:r}=new i.AmplifyMapLibreRequest(e,t);y((()=>r))}}))}),[v]),g?n.default.createElement(u.default,Object.assign({},f,{mapLib:null!=c?c:s.default,mapStyle:null!=p?p:null===(l=v.maps)||void 0===l?void 0:l.default,ref:o,style:b,transformRequest:g,fog:f.fog,terrain:f.terrain})):null}));c.displayName="MapView";const p={maplibregl:s.default,marker:{color:"#3FB1CE"},popup:!0,showResultMarkers:{color:"#3FB1CE"},showResultsWhileTyping:!0},d="geocoder-container",f=t=>{var{position:r="top-right"}=t,a=e.__rest(t,["position"]);return o.useControl((()=>i.createAmplifyGeocoder(a)),{position:r}),null},m=e=>{const r=t.useRef(!1);return t.useEffect((()=>{r.current||(i.createAmplifyGeocoder(e).addTo(`#${d}`),r.current=!0)}),[e]),n.default.createElement("div",{id:d})};exports.LocationSearch=e=>{const{current:t}=o.useMap();return t?n.default.createElement(f,Object.assign({},p,e)):n.default.createElement(m,Object.assign({},p,e))},exports.MapView=c;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var awsAmplify = require('aws-amplify');
+var auth = require('aws-amplify/auth');
+var React = require('react');
+var maplibregl = require('maplibre-gl');
+var maplibreGlJsAmplify = require('maplibre-gl-js-amplify');
+var ReactMapGL = require('react-map-gl');
+var uiReactCore = require('@aws-amplify/ui-react-core');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var maplibregl__default = /*#__PURE__*/_interopDefaultLegacy(maplibregl);
+var ReactMapGL__default = /*#__PURE__*/_interopDefaultLegacy(ReactMapGL);
+
+/**
+ * The `MapView` component uses [react-map-gl](https://visgl.github.io/react-map-gl/) and
+ * [maplibre-gl-js](https://visgl.github.io/react-map-gl/) to provide an interactive map using
+ * [Amplify Geo APIs](https://docs.amplify.aws/lib/geo/getting-started/q/platform/js/) powered by
+ * [Amazon Location Service](https://aws.amazon.com/location/). Since `MapView` is a wrapper of the
+ * [react-map-gl default Map](https://visgl.github.io/react-map-gl/docs/api-reference/map/), it accepts the same
+ * properties except `transformRequest` which is set by Amplify.
+ *
+ * [📖 Docs](https://ui.docs.amplify.aws/react/connected-components/geo#mapview)
+ *
+ * @example
+ * // Basic usage of MapView:
+ * function App() {
+ *   return <MapView />
+ * }
+ */
+const MapView = React.forwardRef(({ mapLib, mapStyle, style, ...props }, ref) => {
+    const geoConfig = React.useMemo(() => {
+        return (awsAmplify.Amplify.getConfig().Geo?.LocationService ??
+            {});
+    }, []);
+    const [transformRequest, setTransformRequest] = React.useState();
+    const styleProps = React.useMemo(() => ({
+        height: '100vh',
+        position: 'relative',
+        width: '100vw',
+        ...style,
+    }), [style]);
+    /**
+     * The transformRequest is a callback used by react-map-gl before it makes a request for an external URL. It signs
+     * the request with AWS Sigv4 Auth, provided valid credentials, and is how we integrate react-map-gl with Amplify Geo
+     * and Amazon Location Service. Once the transformRequest is created, we render the map.
+     */
+    React.useEffect(() => {
+        (async () => {
+            const { credentials } = await auth.fetchAuthSession();
+            if (credentials && geoConfig) {
+                const { region } = geoConfig;
+                const { transformRequest: amplifyTransformRequest } = new maplibreGlJsAmplify.AmplifyMapLibreRequest(credentials, region);
+                setTransformRequest(() => amplifyTransformRequest);
+            }
+        })();
+    }, [geoConfig]);
+    /**
+     * The mapLib property is used by react-map-gl@v7 to override the underlying map library. The default library is
+     * mapbox-gl-js, which uses its own copyrighted license. We override the map library with the BSD-licensed
+     * maplibre-gl-js.
+     *
+     * The default mapStyle we use is just the map ID provided by aws-exports.
+     */
+    return transformRequest ? (React__default["default"].createElement(ReactMapGL__default["default"], { ...props, mapLib: mapLib ?? maplibregl__default["default"], mapStyle: mapStyle ?? geoConfig?.maps?.default, ref: ref, style: styleProps, transformRequest: transformRequest, fog: props.fog, terrain: props.terrain })) : null;
+});
+MapView.displayName = 'MapView';
+
+const VERSION = '1.0.2';
+
+const LOCATION_SEARCH_OPTIONS = {
+    maplibregl: maplibregl__default["default"],
+    marker: { color: '#3FB1CE' },
+    popup: true,
+    showResultMarkers: { color: '#3FB1CE' },
+    showResultsWhileTyping: true,
+};
+const LOCATION_SEARCH_CONTAINER = 'geocoder-container';
+const LocationSearchControl = ({ position = 'top-right', ...props }) => {
+    ReactMapGL.useControl(() => maplibreGlJsAmplify.createAmplifyGeocoder(props), {
+        position,
+    });
+    return null;
+};
+const LocationSearchStandalone = (props) => {
+    const hasMounted = React.useRef(false);
+    React.useEffect(() => {
+        if (!hasMounted.current) {
+            maplibreGlJsAmplify.createAmplifyGeocoder(props).addTo(`#${LOCATION_SEARCH_CONTAINER}`);
+            hasMounted.current = true;
+        }
+    }, [props]);
+    return React__default["default"].createElement("div", { id: LOCATION_SEARCH_CONTAINER });
+};
+/**
+ * The `<LocationSearch>` component provides location search.
+ *
+ * [📖 Docs](https://ui.docs.amplify.aws/react/connected-components/geo#location-search)
+ *
+ * @example
+ * // Used as a map control:
+ * function App() {
+ *   return (
+ *     <MapView>
+ *       <LocationSearch />
+ *     </MapView>
+ *   );
+ * }
+ *
+ * @example
+ * // Used as a standalone component:
+ * function App() {
+ *   return <LocationSearch />;
+ * }
+ */
+const LocationSearch = (props) => {
+    const { current: map } = ReactMapGL.useMap();
+    uiReactCore.useSetUserAgent({
+        componentName: 'LocationSearch',
+        packageName: 'react-geo',
+        version: VERSION,
+    });
+    /**
+     * This logic determines whether the LocationSearch exists as part of a Map component or if it is a standalone component.
+     * The `useControl` hook inside `LocationSearchControl` from `react-map-gl` makes it easy to add a control to a map,
+     * but throws an error if that map doesn't exist. If the map doesn't exist, the LocationSearch is mounted to a container
+     * upon rendering inside the `LocationSearchStandalone`.
+     */
+    if (map) {
+        return React__default["default"].createElement(LocationSearchControl, { ...LOCATION_SEARCH_OPTIONS, ...props });
+    }
+    return React__default["default"].createElement(LocationSearchStandalone, { ...LOCATION_SEARCH_OPTIONS, ...props });
+};
+
+exports.LocationSearch = LocationSearch;
+exports.MapView = MapView;

package/dist/types/version.d.ts

@@ -0,0 +1 @@
+export declare const VERSION = "1.0.2";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-geo",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -35,45 +35,25 @@
     "prebuild": "rimraf dist",
     "size": "yarn size-limit",
     "test": "jest",
-    "test:ci": "yarn test && yarn check:esm",
     "test:watch": "yarn test --watch",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@aws-amplify/ui-react-core": "3.0.0",
     "mapbox-gl": "1.13.1",
     "maplibre-gl": "2.1.9",
-    "maplibre-gl-js-amplify": "^3.1.0",
+    "maplibre-gl-js-amplify": "^4.0.0",
     "react-map-gl": "7.0.23",
-    "tslib": "2.4.1"
+    "tslib": "^2.5.2"
   },
   "peerDependencies": {
-    "aws-amplify": "^5.0.1",
-    "react": ">= 16.14.0",
-    "react-dom": ">= 16.14.0"
+    "@aws-amplify/geo": "^3.0.2",
+    "aws-amplify": "^6.0.2",
+    "react": "^16.14.0 || ^17.0 || ^18.0",
+    "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },
   "devDependencies": {
-    "@aws-amplify/eslint-config-amplify-ui": "0.0.0",
-    "@rollup/plugin-typescript": "^8.3.1",
-    "@size-limit/preset-big-lib": "^8.2.6",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.1",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^26.0.23",
-    "@types/mapbox__mapbox-gl-draw": "^1.3.3",
-    "@types/react": "^17.0.2",
-    "@types/testing-library__jest-dom": "^5.14.1",
-    "eslint": "^8.44.0",
-    "jest": "^27.0.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.70.0",
-    "rollup-plugin-node-externals": "^4.1.1",
-    "rollup-plugin-styles": "^4.0.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "size-limit": "^8.2.6",
-    "ts-jest": "^27.0.3"
+    "@types/mapbox__mapbox-gl-draw": "^1.3.3"
   },
   "sideEffects": [
     "dist/**/*.css"