@sanity/google-maps-input 4.1.1 → 4.2.1

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useEffect, PureComponent, createRef, useCallback, useId, useRef } from "react";
-import { Card, Box, Text, Code, TextInput, Stack, Grid, Button, Dialog } from "@sanity/ui";
+import { Card, Box, Text, Code, TextInput, Stack, Grid, Button, Dialog, Label } from "@sanity/ui";
 import { EditIcon, TrashIcon } from "@sanity/icons";
 import { setIfMissing, set, unset, ChangeIndicator, useUserColor, getAnnotationAtPath, DiffTooltip, definePlugin } from "sanity";
 import { styled } from "styled-components";
@@ -33,12 +33,11 @@ function isErrorEvent(event) {
   return typeof event != "object" || event === null || !("message" in event) ? !1 : 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(AuthError2, {}) : /* @__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) }) })
+      /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx(Code, { size: 1, children: "error" in props && props.error?.message }) })
     ] }) })
   ] });
 }
@@ -56,7 +55,7 @@ function AuthError2() {
 }
 const browserLocale = typeof window < "u" && window.navigator.language || "en";
 function useLoadGoogleMapsApi(config2) {
-  const locale = config2.defaultLocale || browserLocale || "en-US", [state, setState] = useState({ type: "loading" });
+  const locale = config2.defaultLocale || browserLocale, [state, setState] = useState({ type: "loading" });
   return useEffect(() => {
     typeof window > "u" || loadGoogleMapsApi({ locale, apiKey: config2.apiKey }).then(
       (api) => setState({ type: "loaded", api }),
@@ -99,13 +98,12 @@ const PreviewImage = styled.img`
   top: 10px;
   width: 220px;
 `;
-var __defProp$5 = Object.defineProperty, __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __publicField$3 = (obj, key, value) => __defNormalProp$5(obj, typeof key != "symbol" ? key + "" : key, value);
 class SearchInput extends PureComponent {
-  constructor() {
-    super(...arguments), __publicField$3(this, "searchInputRef", createRef()), __publicField$3(this, "autoComplete"), __publicField$3(this, "handleChange", () => {
-      this.autoComplete && (this.props.onChange(this.autoComplete.getPlace()), this.searchInputRef.current && (this.searchInputRef.current.value = ""));
-    });
-  }
+  searchInputRef = createRef();
+  autoComplete;
+  handleChange = () => {
+    this.autoComplete && (this.props.onChange(this.autoComplete.getPlace()), this.searchInputRef.current && (this.searchInputRef.current.value = ""));
+  };
   componentDidMount() {
     const input = this.searchInputRef.current;
     if (!input)
@@ -141,26 +139,25 @@ const MapContainer = styled.div`
   width: 100%;
   box-sizing: border-box;
 `;
-var __defProp$4 = Object.defineProperty, __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __publicField$2 = (obj, key, value) => __defNormalProp$4(obj, typeof key != "symbol" ? key + "" : key, value);
 class GoogleMap extends PureComponent {
-  constructor() {
-    super(...arguments), __publicField$2(this, "state", { map: void 0 }), __publicField$2(this, "clickHandler"), __publicField$2(this, "mapRef", createRef()), __publicField$2(this, "mapEl", null), __publicField$2(this, "attachClickHandler", () => {
-      const map = this.state.map;
-      if (!map)
-        return;
-      const { api, onClick } = this.props, { event } = api;
-      this.clickHandler && this.clickHandler.remove(), onClick && (this.clickHandler = event.addListener(map, "click", onClick));
-    }), __publicField$2(this, "setMapElement", (element) => {
-      if (element && element !== this.mapEl) {
-        const map = this.constructMap(element);
-        this.setState({ map }, this.attachClickHandler);
-      }
-      this.mapEl = element;
-    });
-  }
+  static defaultProps = {
+    defaultZoom: 8,
+    scrollWheel: !0
+  };
+  state = { map: void 0 };
+  clickHandler;
+  mapRef = createRef();
+  mapEl = null;
   componentDidMount() {
     this.attachClickHandler();
   }
+  attachClickHandler = () => {
+    const map = this.state.map;
+    if (!map)
+      return;
+    const { api, onClick } = this.props, { event } = api;
+    this.clickHandler && this.clickHandler.remove(), onClick && (this.clickHandler = event.addListener(map, "click", onClick));
+  };
   componentDidUpdate(prevProps) {
     const map = this.state.map;
     if (!map)
@@ -186,6 +183,13 @@ class GoogleMap extends PureComponent {
     });
     return bounds && map.fitBounds(bounds), map;
   }
+  setMapElement = (element) => {
+    if (element && element !== this.mapEl) {
+      const map = this.constructMap(element);
+      this.setState({ map }, this.attachClickHandler);
+    }
+    this.mapEl = element;
+  };
   render() {
     const { children } = this.props, { map } = this.state;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -194,16 +198,10 @@ class GoogleMap extends PureComponent {
     ] });
   }
 }
-__publicField$2(GoogleMap, "defaultProps", {
-  defaultZoom: 8,
-  scrollWheel: !0
-});
-var __defProp$3 = Object.defineProperty, __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __publicField$1 = (obj, key, value) => __defNormalProp$3(obj, typeof key != "symbol" ? key + "" : key, 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 PureComponent {
-  constructor() {
-    super(...arguments), __publicField$1(this, "marker"), __publicField$1(this, "eventHandlers", {});
-  }
+  marker;
+  eventHandlers = {};
   componentDidMount() {
     const { position, api, map, onMove, zIndex, opacity, label, markerRef, color } = this.props, { Marker: GMarker } = api;
     let icon;
@@ -247,30 +245,21 @@ class Marker extends PureComponent {
     return null;
   }
 }
-var __defProp$2 = Object.defineProperty, __getOwnPropSymbols$1 = Object.getOwnPropertySymbols, __hasOwnProp$1 = Object.prototype.hasOwnProperty, __propIsEnum$1 = Object.prototype.propertyIsEnumerable, __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$1 = (a, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$1.call(b, prop) && __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b))
-      __propIsEnum$1.call(b, prop) && __defNormalProp$2(a, prop, b[prop]);
-  return a;
-};
-const fallbackLatLng = { lat: 40.7058254, lng: -74.1180863 }, GeopointSelect = ({
+const fallbackLatLng$1 = { lat: 40.7058254, lng: -74.1180863 }, GeopointSelect = ({
   api,
   value,
   onChange,
   defaultLocation = { lng: 10.74609, lat: 59.91273 },
   defaultZoom = 8
 }) => {
-  const getCenter2 = useCallback(() => __spreadValues$1(__spreadValues$1(__spreadValues$1({}, fallbackLatLng), defaultLocation), value), [value, defaultLocation]), setValue = useCallback(
+  const getCenter2 = useCallback(() => ({ ...fallbackLatLng$1, ...defaultLocation, ...value }), [value, defaultLocation]), setValue = useCallback(
     (geoPoint) => {
       onChange && onChange(geoPoint);
     },
     [onChange]
   ), handlePlaceChanged = useCallback(
     (place) => {
-      var _a;
-      (_a = place.geometry) != null && _a.location && setValue(place.geometry.location);
+      place.geometry?.location && setValue(place.geometry.location);
     },
     [setValue]
   ), handleMarkerDragEnd = useCallback(
@@ -296,7 +285,7 @@ const fallbackLatLng = { lat: 40.7058254, lng: -74.1180863 }, GeopointSelect = (
       }
     )
   ] }) });
-}, EMPTY_PATH = [], getStaticImageUrl = (value, apiKey) => {
+}, EMPTY_PATH$1 = [], getStaticImageUrl$1 = (value, apiKey) => {
   const loc = `${value.lat},${value.lng}`;
   return `https://maps.googleapis.com/maps/api/staticmap?${new URLSearchParams({
     key: apiKey,
@@ -325,10 +314,7 @@ function GeopointInput(props) {
     onBlur: handleBlur,
     onFocus: handleFocus,
     "aria-describedby": ariaDescribedBy
-  } = elementProps, schemaTypeName = schemaType.name, dialogId = useId(), dialogRef = useRef(null), handleFocusButton = useCallback(() => {
-    var _a;
-    return (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.focus();
-  }, [inputRef]), [modalOpen, setModalOpen] = useState(!1), handleCloseModal = useCallback(() => {
+  } = elementProps, schemaTypeName = schemaType.name, dialogId = useId(), dialogRef = useRef(null), handleFocusButton = useCallback(() => inputRef?.current?.focus(), [inputRef]), [modalOpen, setModalOpen] = useState(!1), handleCloseModal = useCallback(() => {
     dialogRef.current && dialogRef.current.blur(), setModalOpen(!1), handleFocusButton();
   }, [setModalOpen, handleFocusButton]), handleToggleModal = useCallback(
     () => setModalOpen((currentState) => !currentState),
@@ -346,7 +332,7 @@ function GeopointInput(props) {
     onChange(unset());
   }, [onChange]);
   return useEffect(() => {
-    modalOpen && onPathFocus(EMPTY_PATH);
+    modalOpen && onPathFocus(EMPTY_PATH$1);
   }, [modalOpen, onPathFocus]), !config2 || !config2.apiKey ? /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("p", { children: [
       "The ",
@@ -363,7 +349,7 @@ function GeopointInput(props) {
     value && /* @__PURE__ */ jsx(ChangeIndicator, { path, isChanged: changed, hasFocus: !!focused, children: /* @__PURE__ */ jsx(
       PreviewImage,
       {
-        src: getStaticImageUrl(value, config2.apiKey),
+        src: getStaticImageUrl$1(value, config2.apiKey),
         alt: "Map location",
         onClick: handleFocusButton,
         onDoubleClick: handleToggleModal
@@ -421,11 +407,274 @@ function GeopointInput(props) {
     )
   ] });
 }
-var __defProp$1 = Object.defineProperty, __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __publicField = (obj, key, value) => __defNormalProp$1(obj, typeof key != "symbol" ? key + "" : key, value);
-class Arrow extends PureComponent {
-  constructor() {
-    super(...arguments), __publicField(this, "line"), __publicField(this, "eventHandlers", {});
+const fallbackLatLng = { lat: 40.7058254, lng: -74.1180863 }, MarkerDragSync = ({ api, marker, circleRef, isMarkerDragging }) => (useEffect(() => {
+  const handleDrag = () => {
+    isMarkerDragging.current = !0;
+  }, handleDragEnd = () => {
+    isMarkerDragging.current = !1;
+  }, dragListener = api.event.addListener(marker, "drag", handleDrag), dragEndListener = api.event.addListener(marker, "dragend", handleDragEnd);
+  return () => {
+    api.event.removeListener(dragListener), api.event.removeListener(dragEndListener);
+  };
+}, [api, marker, circleRef, isMarkerDragging]), null), GeopointRadiusSelect = ({
+  api,
+  value,
+  onChange,
+  defaultLocation = { lng: 10.74609, lat: 59.91273 },
+  defaultRadiusZoom = 12,
+  defaultRadius = 1e3
+}) => {
+  const circleRef = useRef(null), markerRef = useRef(void 0), isMarkerDragging = useRef(!1), getCenter2 = useCallback(() => ({ ...fallbackLatLng, ...defaultLocation, ...value }), [value, defaultLocation]), setValue = useCallback(
+    (geoPoint, radius) => {
+      if (onChange) {
+        const roundedRadius = radius ? Math.round(radius) : void 0;
+        onChange(geoPoint, roundedRadius);
+      }
+    },
+    [onChange]
+  ), handlePlaceChanged = useCallback(
+    (place) => {
+      place.geometry?.location && setValue(place.geometry.location, value?.radius || defaultRadius);
+    },
+    [setValue, value?.radius, defaultRadius]
+  ), handleMarkerDragEnd = useCallback(
+    (event) => {
+      event.latLng && (circleRef.current && circleRef.current.setCenter(event.latLng), setValue(event.latLng, value?.radius || defaultRadius));
+    },
+    [setValue, value?.radius, defaultRadius]
+  ), handleMapClick = useCallback(
+    (event) => {
+      event.latLng && setValue(event.latLng, value?.radius || defaultRadius);
+    },
+    [setValue, value?.radius, defaultRadius]
+  );
+  return useEffect(() => {
+    value && circleRef.current && (circleRef.current.setCenter({ lat: value.lat, lng: value.lng }), circleRef.current.setRadius(value.radius));
+  }, [value]), /* @__PURE__ */ jsx(
+    GoogleMap,
+    {
+      api,
+      location: getCenter2(),
+      onClick: handleMapClick,
+      defaultZoom: defaultRadiusZoom,
+      children: (map) => (value && !circleRef.current && (circleRef.current = new api.Circle({
+        map,
+        center: { lat: value.lat, lng: value.lng },
+        radius: value.radius,
+        fillColor: "#4285F4",
+        fillOpacity: 0.2,
+        strokeColor: "#4285F4",
+        strokeOpacity: 0.8,
+        strokeWeight: 2,
+        editable: !0
+      }), circleRef.current.addListener("center_changed", () => {
+        if (circleRef.current && markerRef.current && !isMarkerDragging.current) {
+          const circleCenter = circleRef.current.getCenter();
+          circleCenter && markerRef.current.setPosition(circleCenter);
+        }
+      }), circleRef.current.addListener("radius_changed", () => {
+        if (circleRef.current) {
+          const center = circleRef.current.getCenter(), radius = circleRef.current.getRadius();
+          center && setValue(center, Math.round(radius));
+        }
+      }), circleRef.current.addListener("dragend", () => {
+        if (circleRef.current) {
+          const center = circleRef.current.getCenter(), radius = circleRef.current.getRadius();
+          center && setValue(center, Math.round(radius));
+        }
+      })), /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SearchInput, { api, map, onChange: handlePlaceChanged }),
+        value && /* @__PURE__ */ jsx(
+          Marker,
+          {
+            api,
+            map,
+            position: value,
+            onMove: onChange ? handleMarkerDragEnd : void 0,
+            markerRef
+          }
+        ),
+        value && markerRef.current && /* @__PURE__ */ jsx(
+          MarkerDragSync,
+          {
+            api,
+            marker: markerRef.current,
+            circleRef,
+            isMarkerDragging
+          }
+        )
+      ] }))
+    }
+  );
+}, EMPTY_PATH = [], generateCirclePoints = (lat, lng, radius) => {
+  const points = [];
+  for (let i = 0; i <= 32; i++) {
+    const angle = i / 32 * 2 * Math.PI, latOffset = radius / 111e3 * Math.cos(angle), lngOffset = radius / (111e3 * Math.cos(lat * Math.PI / 180)) * Math.sin(angle);
+    points.push({
+      lat: lat + latOffset,
+      lng: lng + lngOffset
+    });
+  }
+  return points;
+}, getStaticImageUrl = (value, apiKey) => {
+  const loc = `${value.lat},${value.lng}`;
+  let zoom = 13;
+  if (value.radius) {
+    const scale = (value.radius + value.radius / 2) / 500, calculatedZoom = 16 - Math.log(scale) / Math.log(2);
+    zoom = Math.max(8, Math.min(16, Math.round(calculatedZoom - 0.4)));
   }
+  const qs = new URLSearchParams({
+    key: apiKey,
+    center: loc,
+    markers: loc,
+    zoom: zoom.toString(),
+    scale: "2",
+    size: "640x300"
+  });
+  if (value.radius) {
+    const path = generateCirclePoints(value.lat, value.lng, value.radius).map((p) => `${p.lat},${p.lng}`).join("|");
+    qs.append("path", `fillcolor:0x4285F480|color:0x4285F4|weight:2|${path}`);
+  }
+  return `https://maps.googleapis.com/maps/api/staticmap?${qs.toString()}`;
+};
+function GeopointRadiusInput(props) {
+  const {
+    changed,
+    elementProps,
+    focused,
+    geoConfig: config2,
+    onChange,
+    onPathFocus,
+    path,
+    readOnly,
+    schemaType,
+    value
+  } = props, {
+    id,
+    ref: inputRef,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    "aria-describedby": ariaDescribedBy
+  } = elementProps, schemaTypeName = schemaType.name, dialogId = useId(), dialogRef = useRef(null), handleFocusButton = useCallback(() => inputRef?.current?.focus(), [inputRef]), [modalOpen, setModalOpen] = useState(!1), handleCloseModal = useCallback(() => {
+    dialogRef.current && dialogRef.current.blur(), setModalOpen(!1), handleFocusButton();
+  }, [setModalOpen, handleFocusButton]), handleToggleModal = useCallback(
+    () => setModalOpen((currentState) => !currentState),
+    [setModalOpen]
+  ), handleChange = useCallback(
+    (latLng, radius) => {
+      const currentRadius = radius ?? value?.radius ?? config2.defaultRadius ?? 1e3;
+      onChange([
+        setIfMissing({ _type: schemaTypeName }),
+        set(latLng.lat(), ["lat"]),
+        set(latLng.lng(), ["lng"]),
+        set(currentRadius, ["radius"])
+      ]);
+    },
+    [schemaTypeName, onChange, value?.radius, config2.defaultRadius]
+  ), handleRadiusChange = useCallback(
+    (event) => {
+      value && onChange([set(Math.round(Number(event.currentTarget.value)), ["radius"])]);
+    },
+    [onChange, value]
+  ), handleClear = useCallback(() => {
+    onChange(unset());
+  }, [onChange]);
+  return useEffect(() => {
+    modalOpen && onPathFocus(EMPTY_PATH);
+  }, [modalOpen, onPathFocus]), !config2 || !config2.apiKey ? /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("p", { children: [
+      "The ",
+      /* @__PURE__ */ jsx("a", { href: "https://sanity.io/docs/schema-types/geopoint-type", children: "Geopoint Radius 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." })
+  ] }) : /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+    value && /* @__PURE__ */ jsx(ChangeIndicator, { path, isChanged: changed, hasFocus: !!focused, children: /* @__PURE__ */ jsx(
+      PreviewImage,
+      {
+        src: getStaticImageUrl(value, config2.apiKey),
+        alt: "Map location with radius",
+        onClick: handleFocusButton,
+        onDoubleClick: handleToggleModal
+      }
+    ) }),
+    value && /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+      /* @__PURE__ */ jsx(Label, { children: "Radius (meters)" }),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          type: "number",
+          value: Math.round(value.radius || config2.defaultRadius || 1e3),
+          onChange: handleRadiusChange,
+          disabled: readOnly,
+          min: 1,
+          max: 5e4,
+          step: 1
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Grid, { columns: value ? 2 : 1, gap: 3, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-describedby": ariaDescribedBy,
+          disabled: readOnly,
+          icon: value && EditIcon,
+          id,
+          mode: "ghost",
+          onClick: handleToggleModal,
+          onFocus: handleFocus,
+          padding: 3,
+          ref: inputRef,
+          text: value ? "Edit" : "Set location and radius"
+        }
+      ),
+      value && /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: readOnly,
+          icon: TrashIcon,
+          mode: "ghost",
+          onClick: handleClear,
+          padding: 3,
+          text: "Remove",
+          tone: "critical"
+        }
+      )
+    ] }) }),
+    modalOpen && /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        header: "Place the marker and set radius on the map",
+        id: `${dialogId}_dialog`,
+        onBlur: handleBlur,
+        onClose: handleCloseModal,
+        ref: dialogRef,
+        width: 1,
+        children: /* @__PURE__ */ jsx(DialogInnerContainer, { children: /* @__PURE__ */ jsx(GoogleMapsLoadProxy, { config: getGeoConfig(), children: (api) => /* @__PURE__ */ jsx(
+          GeopointRadiusSelect,
+          {
+            api,
+            value: value || void 0,
+            onChange: readOnly ? void 0 : handleChange,
+            defaultLocation: config2.defaultLocation,
+            defaultRadiusZoom: config2.defaultRadiusZoom,
+            defaultRadius: config2.defaultRadius
+          }
+        ) }) })
+      }
+    )
+  ] });
+}
+class Arrow extends PureComponent {
+  line;
+  eventHandlers = {};
   componentDidMount() {
     const { from, to, api, map, zIndex, onClick, color, arrowRef } = this.props, lineSymbol = {
       path: api.SymbolPath.FORWARD_OPEN_ARROW
@@ -454,7 +703,7 @@ class Arrow extends PureComponent {
   }
 }
 function GeopointMove({ diff, api, map, label }) {
-  const { fromValue: from, toValue: to } = diff, annotation = diff.isChanged ? diff.annotation : void 0, userColor = useUserColor(annotation ? annotation.author : null) || void 0, fromRef = useRef(), toRef = useRef();
+  const { fromValue: from, toValue: to } = diff, annotation = diff.isChanged ? diff.annotation : void 0, userColor = useUserColor(annotation ? annotation.author : null) || void 0, fromRef = useRef(void 0), toRef = useRef(void 0);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     from && /* @__PURE__ */ jsx(
       Marker,
@@ -508,7 +757,7 @@ function GeopointDiff$1({ api, diff }) {
   const fromValue = (diff.fromValue || []).filter(hasCoordinates), toValue = (diff.toValue || []).filter(hasCoordinates);
   if (fromValue.length === 0 && toValue.length === 0)
     return null;
-  const bounds = getBounds$1(fromValue, toValue, api);
+  const bounds = getBounds$2(fromValue, toValue, api);
   return /* @__PURE__ */ jsx(
     GoogleMap,
     {
@@ -536,7 +785,7 @@ function isChangeDiff(diff) {
 function hasCoordinates(point) {
   return typeof point.lat == "number" && typeof point.lng == "number";
 }
-function getBounds$1(fromValue, toValue, api) {
+function getBounds$2(fromValue, toValue, api) {
   const bounds = new api.LatLngBounds();
   return [...fromValue || [], ...toValue || []].forEach((point) => bounds.extend(point)), bounds;
 }
@@ -545,8 +794,8 @@ const GeopointFieldDiff = ({
   schemaType
 }) => /* @__PURE__ */ jsx(RootContainer, { children: /* @__PURE__ */ jsx(GoogleMapsLoadProxy, { config: getGeoConfig(), children: (api) => /* @__PURE__ */ jsx(GeopointDiff, { api, diff, schemaType }) }) });
 function GeopointDiff({ api, diff }) {
-  const { fromValue, toValue } = diff, annotation = getAnnotationAtPath(diff, ["lat"]) || getAnnotationAtPath(diff, ["lng"]) || getAnnotationAtPath(diff, []), center = getCenter(diff, api), 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(
+  const { fromValue, toValue } = diff, annotation = getAnnotationAtPath(diff, ["lat"]) || getAnnotationAtPath(diff, ["lng"]) || getAnnotationAtPath(diff, []), center = getCenter$1(diff, api), bounds = fromValue && toValue ? getBounds$1(fromValue, toValue, api) : void 0;
+  return /* @__PURE__ */ jsx(DiffTooltip, { annotations: annotation ? [annotation] : [], description: getAction$1(diff), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
     GoogleMap,
     {
       api,
@@ -559,9 +808,117 @@ function GeopointDiff({ api, diff }) {
     }
   ) }) });
 }
-function getBounds(fromValue, toValue, api) {
+function getBounds$1(fromValue, toValue, api) {
   return new api.LatLngBounds().extend(fromValue).extend(toValue);
 }
+function getCenter$1(diff, api) {
+  const { fromValue, toValue } = diff;
+  if (fromValue && toValue)
+    return getBounds$1(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$1(diff) {
+  const { fromValue, toValue } = diff;
+  return fromValue && toValue ? "Moved" : fromValue ? "Removed" : toValue ? "Added" : "Unchanged";
+}
+function GeopointRadiusMove({ diff, api, map, label }) {
+  const { fromValue: from, toValue: to } = diff, annotation = diff.isChanged ? diff.annotation : void 0, userColor = useUserColor(annotation ? annotation.author : null) || void 0, fromRef = useRef(void 0), toRef = useRef(void 0), fromCircleRef = useRef(void 0), toCircleRef = useRef(void 0);
+  return useEffect(() => {
+    const color = userColor?.background || "#4285F4";
+    return from && from.radius && (fromCircleRef.current = new api.Circle({
+      map,
+      center: { lat: from.lat, lng: from.lng },
+      radius: from.radius,
+      fillColor: color,
+      fillOpacity: 0.1,
+      strokeColor: color,
+      strokeOpacity: 0.3,
+      strokeWeight: 1,
+      zIndex: 0
+    })), to && to.radius && (toCircleRef.current = new api.Circle({
+      map,
+      center: { lat: to.lat, lng: to.lng },
+      radius: to.radius,
+      fillColor: color,
+      fillOpacity: 0.2,
+      strokeColor: color,
+      strokeOpacity: 0.8,
+      strokeWeight: 2,
+      zIndex: 2
+    })), () => {
+      fromCircleRef.current && fromCircleRef.current.setMap(null), toCircleRef.current && toCircleRef.current.setMap(null);
+    };
+  }, [api, map, from, to, userColor]), /* @__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
+      }
+    )
+  ] });
+}
+const GeopointRadiusFieldDiff = ({
+  diff,
+  schemaType
+}) => /* @__PURE__ */ jsx(RootContainer, { children: /* @__PURE__ */ jsx(GoogleMapsLoadProxy, { config: getGeoConfig(), children: (api) => /* @__PURE__ */ jsx(GeopointRadiusDiff, { api, diff, schemaType }) }) });
+function GeopointRadiusDiff({ api, diff }) {
+  const { fromValue, toValue } = diff, annotation = getAnnotationAtPath(diff, ["lat"]) || getAnnotationAtPath(diff, ["lng"]) || getAnnotationAtPath(diff, ["radius"]) || getAnnotationAtPath(diff, []), center = getCenter(diff, api), 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: !1,
+      controlSize: 20,
+      bounds,
+      scrollWheel: !1,
+      children: (map) => /* @__PURE__ */ jsx(GeopointRadiusMove, { api, map, diff })
+    }
+  ) }) });
+}
+function getBounds(fromValue, toValue, api) {
+  const bounds = new api.LatLngBounds().extend(fromValue).extend(toValue), fromRadius = fromValue.radius || 0, toRadius = toValue.radius || 0, maxRadius = Math.max(fromRadius, toRadius);
+  if (maxRadius > 0) {
+    const radiusInDegrees = maxRadius / 111e3;
+    bounds.extend({
+      lat: fromValue.lat + radiusInDegrees,
+      lng: fromValue.lng + radiusInDegrees
+    }), bounds.extend({
+      lat: fromValue.lat - radiusInDegrees,
+      lng: fromValue.lng - radiusInDegrees
+    }), bounds.extend({
+      lat: toValue.lat + radiusInDegrees,
+      lng: toValue.lng + radiusInDegrees
+    }), bounds.extend({
+      lat: toValue.lat - radiusInDegrees,
+      lng: toValue.lng - radiusInDegrees
+    });
+  }
+  return bounds;
+}
 function getCenter(diff, api) {
   const { fromValue, toValue } = diff;
   if (fromValue && toValue)
@@ -574,22 +931,70 @@ function getCenter(diff, api) {
 }
 function getAction(diff) {
   const { fromValue, toValue } = diff;
-  return fromValue && toValue ? "Moved" : fromValue ? "Removed" : toValue ? "Added" : "Unchanged";
+  if (fromValue && toValue) {
+    const latChanged = fromValue.lat !== toValue.lat || fromValue.lng !== toValue.lng, radiusChanged = fromValue.radius !== toValue.radius;
+    return latChanged && radiusChanged ? "Moved and radius changed" : latChanged ? "Moved" : radiusChanged ? "Radius changed" : "Unchanged";
+  } else {
+    if (fromValue)
+      return "Removed";
+    if (toValue)
+      return "Added";
+  }
+  return "Unchanged";
 }
-var __defProp = Object.defineProperty, __defProps = Object.defineProperties, __getOwnPropDescs = Object.getOwnPropertyDescriptors, __getOwnPropSymbols = Object.getOwnPropertySymbols, __hasOwnProp = Object.prototype.hasOwnProperty, __propIsEnum = Object.prototype.propertyIsEnumerable, __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp.call(b, prop) && __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b))
-      __propIsEnum.call(b, prop) && __defNormalProp(a, prop, b[prop]);
-  return a;
-}, __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const googleMapsInput = definePlugin((config2) => (setGeoConfig(config2), {
   name: "google-maps-input",
+  schema: {
+    types: [
+      {
+        name: "geopointRadius",
+        title: "Geopoint with Radius",
+        type: "object",
+        fields: [
+          {
+            name: "lat",
+            title: "Latitude",
+            type: "number",
+            validation: (Rule) => Rule.required().min(-90).max(90)
+          },
+          {
+            name: "lng",
+            title: "Longitude",
+            type: "number",
+            validation: (Rule) => Rule.required().min(-180).max(180)
+          },
+          {
+            name: "alt",
+            title: "Altitude",
+            type: "number"
+          },
+          {
+            name: "radius",
+            title: "Radius (meters)",
+            type: "number",
+            validation: (Rule) => Rule.required().min(1).max(5e4)
+          }
+        ],
+        preview: {
+          select: {
+            lat: "lat",
+            lng: "lng",
+            radius: "radius"
+          },
+          prepare({ lat, lng, radius }) {
+            return {
+              title: `${lat.toFixed(6)}, ${lng.toFixed(6)}`,
+              subtitle: radius ? `Radius: ${radius}m` : "No radius set"
+            };
+          }
+        }
+      }
+    ]
+  },
   form: {
     components: {
       input(props) {
-        return isGeopoint(props.schemaType) ? /* @__PURE__ */ jsx(GeopointInput, __spreadProps(__spreadValues({}, props), { geoConfig: config2 })) : props.renderDefault(props);
+        return isGeopoint(props.schemaType) ? /* @__PURE__ */ jsx(GeopointInput, { ...props, geoConfig: config2 }) : isGeopointRadius(props.schemaType) ? /* @__PURE__ */ jsx(GeopointRadiusInput, { ...props, geoConfig: config2 }) : props.renderDefault(props);
       }
     }
   }
@@ -597,13 +1002,18 @@ const googleMapsInput = definePlugin((config2) => (setGeoConfig(config2), {
 function isGeopoint(schemaType) {
   return isType("geopoint", schemaType);
 }
+function isGeopointRadius(schemaType) {
+  return isType("geopointRadius", schemaType);
+}
 function isType(name, schema) {
-  return (schema == null ? void 0 : schema.name) === name ? !0 : schema != null && schema.name ? isType(name, schema == null ? void 0 : schema.type) : !1;
+  return schema?.name === name ? !0 : schema?.name ? isType(name, schema?.type) : !1;
 }
 export {
   GeopointArrayDiff,
   GeopointFieldDiff,
   GeopointInput,
+  GeopointRadiusFieldDiff,
+  GeopointRadiusInput,
   googleMapsInput
 };
 //# sourceMappingURL=index.js.map