@sanity/google-maps-input 3.0.2-0 → 4.0.0-beta.0

package/dist/index.esm.js

@@ -0,0 +1,1043 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default, { useState, useEffect } from 'react';
+import { uniqueId } from 'lodash';
+import { Card, Box, Text, Code, TextInput, Stack, Grid, Button, Dialog } from '@sanity/ui';
+import { EditIcon, TrashIcon } from '@sanity/icons';
+import { ChangeIndicator, setIfMissing, set, unset, useUserColor, getAnnotationAtPath, DiffTooltip, definePlugin } from 'sanity';
+import { styled } from 'styled-components';
+const callbackName = "___sanity_googleMapsApiCallback";
+const authFailureCallbackName = "gm_authFailure";
+let AuthError$1 = class AuthError extends Error {};
+function _loadGoogleMapsApi(config) {
+  return new Promise((resolve, reject) => {
+    window[authFailureCallbackName] = () => {
+      reject(new AuthError$1("Authentication error when loading Google Maps API."));
+    };
+    window[callbackName] = () => {
+      resolve(window.google.maps);
+    };
+    const script = document.createElement("script");
+    script.onerror = (event, source, lineno, colno, error) => reject(new Error(coeerceError(event, error)));
+    script.src = "https://maps.googleapis.com/maps/api/js?key=".concat(config.apiKey, "&libraries=places&callback=").concat(callbackName, "&language=").concat(config.locale);
+    document.getElementsByTagName("head")[0].appendChild(script);
+  }).finally(() => {
+    delete window[callbackName];
+    delete window[authFailureCallbackName];
+  });
+}
+let memo = null;
+function loadGoogleMapsApi(config) {
+  if (memo) {
+    return memo;
+  }
+  memo = _loadGoogleMapsApi(config);
+  memo.catch(() => {
+    memo = null;
+  });
+  return memo;
+}
+function coeerceError(event, error) {
+  if (error) {
+    return error.message;
+  }
+  if (typeof event === "string") {
+    return event;
+  }
+  return isErrorEvent(event) ? event.message : "Failed to load Google Maps API";
+}
+function isErrorEvent(event) {
+  if (typeof event !== "object" || event === null) {
+    return false;
+  }
+  if (!("message" in event)) {
+    return false;
+  }
+  return typeof event.message === "string";
+}
+function LoadError(props) {
+  var _a;
+  return /* @__PURE__ */jsxs(Card, {
+    tone: "critical",
+    radius: 1,
+    children: [/* @__PURE__ */jsx(Box, {
+      as: "header",
+      paddingX: 4,
+      paddingTop: 4,
+      paddingBottom: 1,
+      children: /* @__PURE__ */jsx(Text, {
+        as: "h2",
+        weight: "bold",
+        children: "Google Maps failed to load"
+      })
+    }), /* @__PURE__ */jsx(Box, {
+      paddingX: 4,
+      paddingTop: 4,
+      paddingBottom: 1,
+      children: props.isAuthError ? /* @__PURE__ */jsx(AuthError, {}) : /* @__PURE__ */jsxs(Fragment, {
+        children: [/* @__PURE__ */jsx(Text, {
+          as: "h3",
+          children: "Error details:"
+        }), /* @__PURE__ */jsx("pre", {
+          children: /* @__PURE__ */jsx(Code, {
+            size: 1,
+            children: "error" in props && ((_a = props.error) == null ? void 0 : _a.message)
+          })
+        })]
+      })
+    })]
+  });
+}
+function AuthError() {
+  return /* @__PURE__ */jsxs(Text, {
+    children: [/* @__PURE__ */jsx("p", {
+      children: "The error appears to be related to authentication"
+    }), /* @__PURE__ */jsx("p", {
+      children: "Common causes include:"
+    }), /* @__PURE__ */jsxs("ul", {
+      children: [/* @__PURE__ */jsx("li", {
+        children: "Incorrect API key"
+      }), /* @__PURE__ */jsx("li", {
+        children: "Referer not allowed"
+      }), /* @__PURE__ */jsx("li", {
+        children: "Missing authentication scope"
+      })]
+    }), /* @__PURE__ */jsx("p", {
+      children: "Check the browser developer tools for more information."
+    })]
+  });
+}
+const browserLocale = typeof window !== "undefined" && window.navigator.language || "en";
+function useLoadGoogleMapsApi(config) {
+  const locale = config.defaultLocale || browserLocale || "en-US";
+  const [state, setState] = useState({
+    type: "loading"
+  });
+  useEffect(() => {
+    loadGoogleMapsApi({
+      locale,
+      apiKey: config.apiKey
+    }).then(api => setState({
+      type: "loaded",
+      api
+    }), err => setState({
+      type: "error",
+      error: {
+        type: err instanceof AuthError$1 ? "authError" : "loadError",
+        message: err.message
+      }
+    }));
+  }, [locale, config.apiKey]);
+  return state;
+}
+function GoogleMapsLoadProxy(props) {
+  const loadState = useLoadGoogleMapsApi(props.config);
+  switch (loadState.type) {
+    case "error":
+      return /* @__PURE__ */jsx(LoadError, {
+        error: loadState.error,
+        isAuthError: loadState.error.type === "authError"
+      });
+    case "loading":
+      return /* @__PURE__ */jsx("div", {
+        children: "Loading Google Maps API"
+      });
+    case "loaded":
+      return props.children(loadState.api);
+    default:
+      return null;
+  }
+}
+var __freeze$3 = Object.freeze;
+var __defProp$9 = Object.defineProperty;
+var __template$3 = (cooked, raw) => __freeze$3(__defProp$9(cooked, "raw", {
+  value: __freeze$3(raw || cooked.slice())
+}));
+var _a$3;
+const WrapperContainer = styled.div(_a$3 || (_a$3 = __template$3(["\n  position: absolute;\n  right: 10px;\n  top: 10px;\n  width: 220px;\n"])));
+var __defProp$8 = Object.defineProperty;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$8(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __publicField$5 = (obj, key, value) => {
+  __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class SearchInput extends React.PureComponent {
+  constructor() {
+    super(...arguments);
+    __publicField$5(this, "searchInputRef", React.createRef());
+    __publicField$5(this, "autoComplete");
+    __publicField$5(this, "handleChange", () => {
+      if (!this.autoComplete) {
+        return;
+      }
+      this.props.onChange(this.autoComplete.getPlace());
+      if (this.searchInputRef.current) {
+        this.searchInputRef.current.value = "";
+      }
+    });
+  }
+  componentDidMount() {
+    const input = this.searchInputRef.current;
+    if (!input) {
+      return;
+    }
+    const {
+      api,
+      map
+    } = this.props;
+    const {
+      Circle,
+      places,
+      event
+    } = api;
+    const searchBounds = new Circle({
+      center: map.getCenter(),
+      radius: 100
+    }).getBounds();
+    this.autoComplete = new places.Autocomplete(input, {
+      bounds: searchBounds,
+      types: []
+      // return all kinds of places
+    });
+
+    event.addListener(this.autoComplete, "place_changed", this.handleChange);
+  }
+  render() {
+    return /* @__PURE__ */jsx(WrapperContainer, {
+      children: /* @__PURE__ */jsx(TextInput, {
+        name: "place",
+        ref: this.searchInputRef,
+        placeholder: "Search for place or address",
+        padding: 4
+      })
+    });
+  }
+}
+function latLngAreEqual(latLng1, latLng2) {
+  const lat1 = typeof latLng1.lat === "function" ? latLng1.lat() : latLng1.lat;
+  const lng1 = typeof latLng1.lng === "function" ? latLng1.lng() : latLng1.lng;
+  const lat2 = typeof latLng2.lat === "function" ? latLng2.lat() : latLng2.lat;
+  const lng2 = typeof latLng2.lng === "function" ? latLng2.lng() : latLng2.lng;
+  return lat1 === lat2 && lng1 === lng2;
+}
+var __freeze$2 = Object.freeze;
+var __defProp$7 = Object.defineProperty;
+var __template$2 = (cooked, raw) => __freeze$2(__defProp$7(cooked, "raw", {
+  value: __freeze$2(raw || cooked.slice())
+}));
+var _a$2;
+const MapContainer = styled.div(_a$2 || (_a$2 = __template$2(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n"])));
+var __defProp$6 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$6(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => {
+  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class GoogleMap extends React__default.PureComponent {
+  constructor() {
+    super(...arguments);
+    __publicField$4(this, "state", {
+      map: void 0
+    });
+    __publicField$4(this, "clickHandler");
+    __publicField$4(this, "mapRef", React__default.createRef());
+    __publicField$4(this, "mapEl", null);
+    __publicField$4(this, "attachClickHandler", () => {
+      const map = this.state.map;
+      if (!map) {
+        return;
+      }
+      const {
+        api,
+        onClick
+      } = this.props;
+      const {
+        event
+      } = api;
+      if (this.clickHandler) {
+        this.clickHandler.remove();
+      }
+      if (onClick) {
+        this.clickHandler = event.addListener(map, "click", onClick);
+      }
+    });
+    __publicField$4(this, "setMapElement", element => {
+      if (element && element !== this.mapEl) {
+        const map = this.constructMap(element);
+        this.setState({
+          map
+        }, this.attachClickHandler);
+      }
+      this.mapEl = element;
+    });
+  }
+  componentDidMount() {
+    this.attachClickHandler();
+  }
+  componentDidUpdate(prevProps) {
+    const map = this.state.map;
+    if (!map) {
+      return;
+    }
+    const {
+      onClick,
+      location,
+      bounds
+    } = this.props;
+    if (prevProps.onClick !== onClick) {
+      this.attachClickHandler();
+    }
+    if (!latLngAreEqual(prevProps.location, location)) {
+      map.panTo(this.getCenter());
+    }
+    if (bounds && (!prevProps.bounds || !bounds.equals(prevProps.bounds))) {
+      map.fitBounds(bounds);
+    }
+  }
+  componentWillUnmount() {
+    if (this.clickHandler) {
+      this.clickHandler.remove();
+    }
+  }
+  getCenter() {
+    const {
+      location,
+      api
+    } = this.props;
+    return new api.LatLng(location.lat, location.lng);
+  }
+  constructMap(el) {
+    const {
+      defaultZoom,
+      api,
+      mapTypeControl,
+      controlSize,
+      bounds,
+      scrollWheel
+    } = this.props;
+    const map = new api.Map(el, {
+      zoom: defaultZoom,
+      center: this.getCenter(),
+      scrollwheel: scrollWheel,
+      streetViewControl: false,
+      mapTypeControl,
+      controlSize
+    });
+    if (bounds) {
+      map.fitBounds(bounds);
+    }
+    return map;
+  }
+  render() {
+    const {
+      children
+    } = this.props;
+    const {
+      map
+    } = this.state;
+    return /* @__PURE__ */jsxs(Fragment, {
+      children: [/* @__PURE__ */jsx(MapContainer, {
+        ref: this.setMapElement
+      }), children && map ? children(map) : null]
+    });
+  }
+}
+__publicField$4(GoogleMap, "defaultProps", {
+  defaultZoom: 8,
+  scrollWheel: true
+});
+var __defProp$5 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$5(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const markerPath = "M 3.052 3.7 C 1.56 5.293 0.626 7.612 0.663 9.793 C 0.738 14.352 2.793 16.077 6.078 22.351 C 7.263 25.111 8.497 28.032 9.672 32.871 C 9.835 33.584 9.994 34.246 10.069 34.305 C 10.143 34.362 10.301 33.697 10.465 32.983 C 11.639 28.145 12.875 25.226 14.059 22.466 C 17.344 16.192 19.398 14.466 19.474 9.908 C 19.511 7.727 18.574 5.405 17.083 3.814 C 15.379 1.994 12.809 0.649 10.069 0.593 C 7.328 0.536 4.756 1.882 3.052 3.7 Z";
+class Marker extends React.PureComponent {
+  constructor() {
+    super(...arguments);
+    __publicField$3(this, "marker");
+    __publicField$3(this, "eventHandlers", {});
+  }
+  componentDidMount() {
+    const {
+      position,
+      api,
+      map,
+      onMove,
+      zIndex,
+      opacity,
+      label,
+      markerRef,
+      color
+    } = this.props;
+    const {
+      Marker: GMarker
+    } = api;
+    let icon;
+    if (color) {
+      icon = {
+        path: markerPath,
+        fillOpacity: 1,
+        fillColor: color.background,
+        strokeColor: color.border,
+        strokeWeight: 2,
+        anchor: new api.Point(10, 35),
+        labelOrigin: new api.Point(10, 11)
+      };
+    }
+    this.marker = new GMarker({
+      draggable: Boolean(onMove),
+      position,
+      map,
+      zIndex,
+      opacity,
+      label,
+      icon
+    });
+    if (markerRef) {
+      markerRef.current = this.marker;
+    }
+    this.attachMoveHandler();
+    this.attachClickHandler();
+  }
+  componentDidUpdate(prevProps) {
+    if (!this.marker) {
+      return;
+    }
+    const {
+      position,
+      onMove,
+      label,
+      zIndex,
+      opacity,
+      map
+    } = this.props;
+    if (prevProps.onMove !== onMove) {
+      this.attachMoveHandler();
+    }
+    if (!latLngAreEqual(prevProps.position, position)) {
+      this.marker.setPosition(position);
+    }
+    if (prevProps.label !== label) {
+      this.marker.setLabel(label || null);
+    }
+    if (prevProps.zIndex !== zIndex) {
+      this.marker.setZIndex(zIndex || null);
+    }
+    if (prevProps.opacity !== opacity) {
+      this.marker.setOpacity(opacity || null);
+    }
+    if (prevProps.map !== map) {
+      this.marker.setMap(map);
+    }
+  }
+  componentWillUnmount() {
+    if (this.eventHandlers.move) {
+      this.eventHandlers.move.remove();
+    }
+    if (this.marker) {
+      this.marker.setMap(null);
+    }
+  }
+  attachMoveHandler() {
+    const {
+      api,
+      onMove
+    } = this.props;
+    if (this.eventHandlers.move) {
+      this.eventHandlers.move.remove();
+    }
+    if (this.marker && onMove) {
+      this.eventHandlers.move = api.event.addListener(this.marker, "dragend", onMove);
+    }
+  }
+  attachClickHandler() {
+    const {
+      api,
+      onClick
+    } = this.props;
+    if (this.eventHandlers.click) {
+      this.eventHandlers.click.remove();
+    }
+    if (this.marker && onClick) {
+      this.eventHandlers.click = api.event.addListener(this.marker, "click", onClick);
+    }
+  }
+  // eslint-disable-next-line class-methods-use-this
+  render() {
+    return null;
+  }
+}
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$4(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => {
+  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const fallbackLatLng = {
+  lat: 40.7058254,
+  lng: -74.1180863
+};
+class GeopointSelect extends React__default.PureComponent {
+  constructor() {
+    super(...arguments);
+    __publicField$2(this, "mapRef", React__default.createRef());
+    __publicField$2(this, "handlePlaceChanged", place => {
+      var _a;
+      if (!((_a = place.geometry) == null ? void 0 : _a.location)) {
+        return;
+      }
+      this.setValue(place.geometry.location);
+    });
+    __publicField$2(this, "handleMarkerDragEnd", event => {
+      if (event.latLng) this.setValue(event.latLng);
+    });
+    __publicField$2(this, "handleMapClick", event => {
+      if (event.latLng) this.setValue(event.latLng);
+    });
+  }
+  getCenter() {
+    const {
+      value = {},
+      defaultLocation = {}
+    } = this.props;
+    const point = {
+      ...fallbackLatLng,
+      ...defaultLocation,
+      ...value
+    };
+    return point;
+  }
+  setValue(geoPoint) {
+    if (this.props.onChange) {
+      this.props.onChange(geoPoint);
+    }
+  }
+  render() {
+    const {
+      api,
+      defaultZoom,
+      value,
+      onChange
+    } = this.props;
+    return /* @__PURE__ */jsx(GoogleMap, {
+      api,
+      location: this.getCenter(),
+      onClick: this.handleMapClick,
+      defaultZoom,
+      children: map => /* @__PURE__ */jsxs(Fragment, {
+        children: [/* @__PURE__ */jsx(SearchInput, {
+          api,
+          map,
+          onChange: this.handlePlaceChanged
+        }), value && /* @__PURE__ */jsx(Marker, {
+          api,
+          map,
+          position: value,
+          onMove: onChange ? this.handleMarkerDragEnd : void 0
+        })]
+      })
+    });
+  }
+}
+__publicField$2(GeopointSelect, "defaultProps", {
+  defaultZoom: 8,
+  defaultLocation: {
+    lng: 10.74609,
+    lat: 59.91273
+  }
+});
+var __freeze$1 = Object.freeze;
+var __defProp$3 = Object.defineProperty;
+var __template$1 = (cooked, raw) => __freeze$1(__defProp$3(cooked, "raw", {
+  value: __freeze$1(raw || cooked.slice())
+}));
+var _a$1, _b;
+const PreviewImage = styled.img(_a$1 || (_a$1 = __template$1(["\n  width: 100%;\n  height: auto;\n  vertical-align: top;\n"])));
+const DialogInnerContainer = styled.div(_b || (_b = __template$1(["\n  height: 40rem;\n  width: 50rem;\n"])));
+let config;
+function getGeoConfig() {
+  return config;
+}
+function setGeoConfig(newConfig) {
+  config = newConfig;
+}
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$2(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const getStaticImageUrl = (value, apiKey) => {
+  const loc = "".concat(value.lat, ",").concat(value.lng);
+  const params = {
+    key: apiKey,
+    center: loc,
+    markers: loc,
+    zoom: 13,
+    scale: 2,
+    size: "640x300"
+  };
+  const qs = Object.keys(params).reduce((res, param) => {
+    return res.concat("".concat(param, "=").concat(encodeURIComponent(params[param])));
+  }, []);
+  return "https://maps.googleapis.com/maps/api/staticmap?".concat(qs.join("&"));
+};
+class GeopointInput extends React__default.PureComponent {
+  constructor(props) {
+    super(props);
+    __publicField$1(this, "_geopointInputId", uniqueId("GeopointInput"));
+    __publicField$1(this, "editButton");
+    __publicField$1(this, "setEditButton", el => {
+      this.editButton = el;
+    });
+    __publicField$1(this, "handleToggleModal", () => {
+      this.setState(prevState => ({
+        modalOpen: !prevState.modalOpen
+      }));
+    });
+    __publicField$1(this, "handleCloseModal", () => {
+      this.setState({
+        modalOpen: false
+      });
+    });
+    __publicField$1(this, "handleChange", latLng => {
+      const {
+        schemaType,
+        onChange
+      } = this.props;
+      onChange([setIfMissing({
+        _type: schemaType.name
+      }), set(latLng.lat(), ["lat"]), set(latLng.lng(), ["lng"])]);
+    });
+    __publicField$1(this, "handleClear", () => {
+      const {
+        onChange
+      } = this.props;
+      onChange(unset());
+    });
+    this.state = {
+      modalOpen: false
+    };
+  }
+  focus() {
+    if (this.editButton) {
+      this.editButton.focus();
+    }
+  }
+  render() {
+    const {
+      value,
+      readOnly,
+      geoConfig: config,
+      path,
+      changed,
+      focused
+    } = this.props;
+    const {
+      modalOpen
+    } = this.state;
+    if (!config || !config.apiKey) {
+      return /* @__PURE__ */jsxs("div", {
+        children: [/* @__PURE__ */jsxs("p", {
+          children: ["The ", /* @__PURE__ */jsx("a", {
+            href: "https://sanity.io/docs/schema-types/geopoint-type",
+            children: "Geopoint type"
+          }), " needs a Google Maps API key with access to:"]
+        }), /* @__PURE__ */jsxs("ul", {
+          children: [/* @__PURE__ */jsx("li", {
+            children: "Google Maps JavaScript API"
+          }), /* @__PURE__ */jsx("li", {
+            children: "Google Places API Web Service"
+          }), /* @__PURE__ */jsx("li", {
+            children: "Google Static Maps API"
+          })]
+        }), /* @__PURE__ */jsx("p", {
+          children: "Please enter the API key with access to these services in your googleMapsInput plugin config."
+        })]
+      });
+    }
+    return /* @__PURE__ */jsxs(Stack, {
+      space: 3,
+      children: [value && /* @__PURE__ */jsx(ChangeIndicator, {
+        path,
+        isChanged: changed,
+        hasFocus: !!focused,
+        children: /* @__PURE__ */jsx(PreviewImage, {
+          src: getStaticImageUrl(value, config.apiKey),
+          alt: "Map location"
+        })
+      }), /* @__PURE__ */jsx(Box, {
+        children: /* @__PURE__ */jsxs(Grid, {
+          columns: value ? 2 : 1,
+          gap: 3,
+          children: [/* @__PURE__ */jsx(Button, {
+            mode: "ghost",
+            icon: value && EditIcon,
+            padding: 3,
+            ref: this.setEditButton,
+            text: value ? "Edit" : "Set location",
+            onClick: this.handleToggleModal,
+            disabled: readOnly
+          }), value && /* @__PURE__ */jsx(Button, {
+            tone: "critical",
+            icon: TrashIcon,
+            padding: 3,
+            mode: "ghost",
+            text: "Remove",
+            onClick: this.handleClear,
+            disabled: readOnly
+          })]
+        })
+      }), modalOpen && /* @__PURE__ */jsx(Dialog, {
+        id: "".concat(this._geopointInputId, "_dialog"),
+        onClose: this.handleCloseModal,
+        header: "Place the marker on the map",
+        width: 1,
+        children: /* @__PURE__ */jsx(DialogInnerContainer, {
+          children: /* @__PURE__ */jsx(GoogleMapsLoadProxy, {
+            config: getGeoConfig(),
+            children: api => /* @__PURE__ */jsx(GeopointSelect, {
+              api,
+              value: value || void 0,
+              onChange: readOnly ? void 0 : this.handleChange,
+              defaultLocation: config.defaultLocation,
+              defaultZoom: config.defaultZoom
+            })
+          })
+        })
+      })]
+    });
+  }
+}
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class Arrow extends React.PureComponent {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "line");
+    __publicField(this, "eventHandlers", {});
+  }
+  componentDidMount() {
+    const {
+      from,
+      to,
+      api,
+      map,
+      zIndex,
+      onClick,
+      color,
+      arrowRef
+    } = this.props;
+    const lineSymbol = {
+      path: api.SymbolPath.FORWARD_OPEN_ARROW
+    };
+    this.line = new api.Polyline({
+      map,
+      zIndex,
+      path: [from, to],
+      icons: [{
+        icon: lineSymbol,
+        offset: "50%"
+      }],
+      strokeOpacity: 0.55,
+      strokeColor: color ? color.text : "black"
+    });
+    if (onClick) {
+      this.eventHandlers.click = api.event.addListener(this.line, "click", onClick);
+    }
+    if (arrowRef) {
+      arrowRef.current = this.line;
+    }
+  }
+  componentDidUpdate(prevProps) {
+    if (!this.line) {
+      return;
+    }
+    const {
+      from,
+      to,
+      map
+    } = this.props;
+    if (!latLngAreEqual(prevProps.from, from) || !latLngAreEqual(prevProps.to, to)) {
+      this.line.setPath([from, to]);
+    }
+    if (prevProps.map !== map) {
+      this.line.setMap(map);
+    }
+  }
+  componentWillUnmount() {
+    if (this.line) {
+      this.line.setMap(null);
+    }
+    if (this.eventHandlers.click) {
+      this.eventHandlers.click.remove();
+    }
+  }
+  // eslint-disable-next-line class-methods-use-this
+  render() {
+    return null;
+  }
+}
+function GeopointMove(_ref) {
+  let {
+    diff,
+    api,
+    map,
+    label
+  } = _ref;
+  const {
+    fromValue: from,
+    toValue: to
+  } = diff;
+  const annotation = diff.isChanged ? diff.annotation : void 0;
+  const userColor = useUserColor(annotation ? annotation.author : null) || void 0;
+  const fromRef = React.useRef();
+  const toRef = React.useRef();
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [from && /* @__PURE__ */jsx(Marker, {
+      api,
+      map,
+      position: from,
+      zIndex: 0,
+      opacity: 0.55,
+      markerRef: fromRef,
+      color: userColor
+    }), from && to && /* @__PURE__ */jsx(Arrow, {
+      api,
+      map,
+      from,
+      to,
+      zIndex: 1,
+      color: userColor
+    }), to && /* @__PURE__ */jsx(Marker, {
+      api,
+      map,
+      position: to,
+      zIndex: 2,
+      markerRef: toRef,
+      label,
+      color: userColor
+    })]
+  });
+}
+var __freeze = Object.freeze;
+var __defProp = Object.defineProperty;
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", {
+  value: __freeze(raw || cooked.slice())
+}));
+var _a;
+const RootContainer = styled.div(_a || (_a = __template(["\n  position: relative;\n  min-height: 200px;\n\n  &:empty {\n    background-color: var(--card-skeleton-color-from);\n    display: table;\n    width: 100%;\n  }\n\n  &:empty:after {\n    content: 'Missing/invalid data';\n    display: table-cell;\n    vertical-align: middle;\n    text-align: center;\n    position: relative;\n  }\n"])));
+const GeopointArrayDiff = _ref2 => {
+  let {
+    diff,
+    schemaType
+  } = _ref2;
+  return /* @__PURE__ */jsx(RootContainer, {
+    children: /* @__PURE__ */jsx(GoogleMapsLoadProxy, {
+      config: getGeoConfig(),
+      children: api => /* @__PURE__ */jsx(GeopointDiff$1, {
+        api,
+        diff,
+        schemaType
+      })
+    })
+  });
+};
+function GeopointDiff$1(_ref3) {
+  let {
+    api,
+    diff
+  } = _ref3;
+  const fromValue = (diff.fromValue || []).filter(hasCoordinates);
+  const toValue = (diff.toValue || []).filter(hasCoordinates);
+  if (fromValue.length === 0 && toValue.length === 0) {
+    return null;
+  }
+  const bounds = getBounds$1(fromValue, toValue, api);
+  return /* @__PURE__ */jsx(GoogleMap, {
+    api,
+    location: bounds.getCenter().toJSON(),
+    mapTypeControl: false,
+    controlSize: 20,
+    bounds,
+    children: map => /* @__PURE__ */jsx(Fragment, {
+      children: diff.items.map(_ref4 => {
+        let {
+          toIndex,
+          diff: pointDiff
+        } = _ref4;
+        if (!isChangeDiff(pointDiff)) {
+          return null;
+        }
+        return /* @__PURE__ */jsx(GeopointMove, {
+          api,
+          map,
+          diff: pointDiff,
+          label: "".concat(toIndex)
+        }, toIndex);
+      })
+    })
+  });
+}
+function isChangeDiff(diff) {
+  return diff.action !== "unchanged" && diff.type === "object";
+}
+function hasCoordinates(point) {
+  return typeof point.lat === "number" && typeof point.lng === "number";
+}
+function getBounds$1(fromValue, toValue, api) {
+  const bounds = new api.LatLngBounds();
+  const points = [...(fromValue || []), ...(toValue || [])];
+  points.forEach(point => bounds.extend(point));
+  return bounds;
+}
+const GeopointFieldDiff = _ref5 => {
+  let {
+    diff,
+    schemaType
+  } = _ref5;
+  return /* @__PURE__ */jsx(RootContainer, {
+    children: /* @__PURE__ */jsx(GoogleMapsLoadProxy, {
+      config: getGeoConfig(),
+      children: api => /* @__PURE__ */jsx(GeopointDiff, {
+        api,
+        diff,
+        schemaType
+      })
+    })
+  });
+};
+function GeopointDiff(_ref6) {
+  let {
+    api,
+    diff
+  } = _ref6;
+  const {
+    fromValue,
+    toValue
+  } = diff;
+  const annotation = getAnnotationAtPath(diff, ["lat"]) || getAnnotationAtPath(diff, ["lng"]) || getAnnotationAtPath(diff, []);
+  const center = getCenter(diff, api);
+  const bounds = fromValue && toValue ? getBounds(fromValue, toValue, api) : void 0;
+  return /* @__PURE__ */jsx(DiffTooltip, {
+    annotations: annotation ? [annotation] : [],
+    description: getAction(diff),
+    children: /* @__PURE__ */jsx("div", {
+      children: /* @__PURE__ */jsx(GoogleMap, {
+        api,
+        location: center,
+        mapTypeControl: false,
+        controlSize: 20,
+        bounds,
+        scrollWheel: false,
+        children: map => /* @__PURE__ */jsx(GeopointMove, {
+          api,
+          map,
+          diff
+        })
+      })
+    })
+  });
+}
+function getBounds(fromValue, toValue, api) {
+  return new api.LatLngBounds().extend(fromValue).extend(toValue);
+}
+function getCenter(diff, api) {
+  const {
+    fromValue,
+    toValue
+  } = diff;
+  if (fromValue && toValue) {
+    return getBounds(fromValue, toValue, api).getCenter().toJSON();
+  }
+  if (fromValue) {
+    return fromValue;
+  }
+  if (toValue) {
+    return toValue;
+  }
+  throw new Error("Neither a from or a to value present");
+}
+function getAction(diff) {
+  const {
+    fromValue,
+    toValue
+  } = diff;
+  if (fromValue && toValue) {
+    return "Moved";
+  } else if (fromValue) {
+    return "Removed";
+  } else if (toValue) {
+    return "Added";
+  }
+  return "Unchanged";
+}
+const googleMapsInput = definePlugin(config => {
+  setGeoConfig(config);
+  return {
+    name: "google-maps-input",
+    form: {
+      components: {
+        input(props) {
+          if (isGeopoint(props.schemaType)) {
+            const castedProps = props;
+            return /* @__PURE__ */jsx(GeopointInput, {
+              ...castedProps,
+              geoConfig: config
+            });
+          }
+          return props.renderDefault(props);
+        }
+      }
+    }
+  };
+});
+function isGeopoint(schemaType) {
+  return isType("geopoint", schemaType);
+}
+function isType(name, schema) {
+  if ((schema == null ? void 0 : schema.name) === name) {
+    return true;
+  } else if (!(schema == null ? void 0 : schema.name)) {
+    return false;
+  }
+  return isType(name, schema == null ? void 0 : schema.type);
+}
+export { GeopointArrayDiff, GeopointFieldDiff, GeopointInput, googleMapsInput };
+//# sourceMappingURL=index.esm.js.map