@sanity/google-maps-input 4.0.0 → 4.1.0

package/dist/index.esm.js

@@ -1,1042 +0,0 @@
-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