@sanity/google-maps-input 2.25.4 → 2.26.1-purple-unicorn.560

package/lib/input/GeopointInput.js

@@ -1,194 +1,202 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ui = require("@sanity/ui");
-
-var _icons = require("@sanity/icons");
-
-var _googleMapsInput = _interopRequireDefault(require("config:@sanity/google-maps-input"));
-
-var _components = require("@sanity/base/components");
-
-var _patchEvent = require("part:@sanity/form-builder/patch-event");
-
-var _changeIndicators = require("@sanity/base/change-indicators");
-
-var _GoogleMapsLoadProxy = require("../loader/GoogleMapsLoadProxy");
-
-var _GeopointSelect = require("./GeopointSelect");
-
-var _GeopointInput = require("./GeopointInput.styles");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var getStaticImageUrl = value => {
-  var loc = "".concat(value.lat, ",").concat(value.lng);
-  var params = {
-    key: _googleMapsInput.default.apiKey,
-    center: loc,
-    markers: loc,
-    zoom: 13,
-    scale: 2,
-    size: '640x300'
-  };
-  var 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);
-
-    _defineProperty(this, "_geopointInputId", (0, _uniqueId2.default)('GeopointInput'));
-
-    _defineProperty(this, "editButton", void 0);
-
-    _defineProperty(this, "setEditButton", el => {
-      this.editButton = el;
-    });
-
-    _defineProperty(this, "handleFocus", event => {
-      this.props.onFocus(event);
-    });
-
-    _defineProperty(this, "handleBlur", () => {
-      this.props.onBlur();
-    });
-
-    _defineProperty(this, "handleToggleModal", () => {
-      var _this$props = this.props,
-          onFocus = _this$props.onFocus,
-          onBlur = _this$props.onBlur;
-      this.setState(prevState => ({
-        modalOpen: !prevState.modalOpen
-      }), () => {
-        if (this.state.modalOpen) {
-          onFocus(['$']);
-        } else {
-          onBlur();
-        }
-      });
-    });
-
-    _defineProperty(this, "handleCloseModal", () => {
-      this.setState({
-        modalOpen: false
-      });
-    });
-
-    _defineProperty(this, "handleChange", latLng => {
-      var _this$props2 = this.props,
-          type = _this$props2.type,
-          onChange = _this$props2.onChange;
-      onChange(_patchEvent.PatchEvent.from([(0, _patchEvent.setIfMissing)({
-        _type: type.name
-      }), (0, _patchEvent.set)(latLng.lat(), ['lat']), (0, _patchEvent.set)(latLng.lng(), ['lng'])]));
-    });
-
-    _defineProperty(this, "handleClear", () => {
-      var onChange = this.props.onChange;
-      onChange(_patchEvent.PatchEvent.from((0, _patchEvent.unset)()));
-    });
-
-    this.state = {
-      modalOpen: false
-    };
-  }
-
-  focus() {
-    if (this.editButton) {
-      this.editButton.focus();
-    }
-  }
-
-  render() {
-    var _this$props3 = this.props,
-        value = _this$props3.value,
-        compareValue = _this$props3.compareValue,
-        readOnly = _this$props3.readOnly,
-        type = _this$props3.type,
-        markers = _this$props3.markers,
-        level = _this$props3.level,
-        presence = _this$props3.presence;
-    var modalOpen = this.state.modalOpen;
-
-    if (!_googleMapsInput.default || !_googleMapsInput.default.apiKey) {
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "The ", /*#__PURE__*/_react.default.createElement("a", {
-        href: "https://sanity.io/docs/schema-types/geopoint-type"
-      }, "Geopoint type"), " needs a Google Maps API key with access to:"), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "Google Maps JavaScript API"), /*#__PURE__*/_react.default.createElement("li", null, "Google Places API Web Service"), /*#__PURE__*/_react.default.createElement("li", null, "Google Static Maps API")), /*#__PURE__*/_react.default.createElement("p", null, "Please enter the API key with access to these services in", /*#__PURE__*/_react.default.createElement("code", {
-        style: {
-          whiteSpace: 'nowrap'
-        }
-      }, "`<project-root>/config/@sanity/google-maps-input.json`")));
-    }
-
-    return /*#__PURE__*/_react.default.createElement(_components.FormFieldSet, {
-      level: level,
-      title: type.title,
-      description: type.description,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      __unstable_presence: presence,
-      __unstable_changeIndicator: false,
-      __unstable_markers: markers
-    }, /*#__PURE__*/_react.default.createElement("div", null, value && /*#__PURE__*/_react.default.createElement(_changeIndicators.ChangeIndicatorCompareValueProvider, {
-      value: value,
-      compareValue: compareValue
-    }, /*#__PURE__*/_react.default.createElement(_changeIndicators.ChangeIndicator, {
-      compareDeep: true
-    }, /*#__PURE__*/_react.default.createElement(_GeopointInput.PreviewImage, {
-      src: getStaticImageUrl(value),
-      alt: "Map location"
-    }))), !readOnly && /*#__PURE__*/_react.default.createElement(_ui.Box, {
-      marginTop: 4
-    }, /*#__PURE__*/_react.default.createElement(_ui.Grid, {
-      columns: 2,
-      gap: 2
-    }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
-      mode: "ghost",
-      icon: value && _icons.EditIcon,
-      padding: 3,
-      ref: this.setEditButton,
-      text: value ? 'Edit' : 'Set location',
-      onClick: this.handleToggleModal
-    }), value && /*#__PURE__*/_react.default.createElement(_ui.Button, {
-      tone: "critical",
-      icon: _icons.TrashIcon,
-      padding: 3,
-      mode: "ghost",
-      text: 'Remove',
-      onClick: this.handleClear
-    }))), modalOpen && /*#__PURE__*/_react.default.createElement(_ui.Dialog, {
-      id: "".concat(this._geopointInputId, "_dialog"),
-      onClose: this.handleCloseModal,
-      header: "Place the marker on the map",
-      width: 1
-    }, /*#__PURE__*/_react.default.createElement(_GeopointInput.DialogInnerContainer, null, /*#__PURE__*/_react.default.createElement(_GoogleMapsLoadProxy.GoogleMapsLoadProxy, null, api => /*#__PURE__*/_react.default.createElement(_GeopointSelect.GeopointSelect, {
-      api: api,
-      value: value,
-      onChange: readOnly ? undefined : this.handleChange,
-      defaultLocation: _googleMapsInput.default.defaultLocation,
-      defaultZoom: _googleMapsInput.default.defaultZoom
-    }))))));
-  }
+import * as React from 'react';
+import React__default from 'react';
+import { uniqueId } from 'lodash';
+import { TextInput, Box, Grid, Button, Dialog } from '@sanity/ui';
+import { EditIcon, TrashIcon } from '@sanity/icons';
+import config from 'config:@sanity/google-maps-input';
+import { FormFieldSet, ChangeIndicatorCompareValueProvider, ChangeIndicator } from '@sanity/base/components';
+import { PatchEvent, setIfMissing, set, unset } from '@sanity/base/form';
+import { G as GoogleMap, M as Marker, a as GoogleMapsLoadProxy } from '../_Marker-96f5387c.js';
+import styled from 'styled-components';
+import 'rxjs';
+
+const WrapperContainer = styled.div `
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 220px;
+`;
+
+class SearchInput extends React.PureComponent {
+    searchInputRef = React.createRef();
+    autoComplete;
+    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 (React.createElement(WrapperContainer, null,
+            React.createElement(TextInput, { name: "place", ref: this.searchInputRef, placeholder: "Search for place or address", padding: 4 })));
+    }
+}
 
+const fallbackLatLng = { lat: 40.7058254, lng: -74.1180863 };
+class GeopointSelect extends React__default.PureComponent {
+    static defaultProps = {
+        defaultZoom: 8,
+        defaultLocation: { lng: 10.74609, lat: 59.91273 },
+    };
+    mapRef = React__default.createRef();
+    getCenter() {
+        const { value = {}, defaultLocation = {} } = this.props;
+        const point = { ...fallbackLatLng, ...defaultLocation, ...value };
+        return point;
+    }
+    handlePlaceChanged = (place) => {
+        if (!place.geometry) {
+            return;
+        }
+        this.setValue(place.geometry.location);
+    };
+    handleMarkerDragEnd = (event) => {
+        this.setValue(event.latLng);
+    };
+    handleMapClick = (event) => {
+        this.setValue(event.latLng);
+    };
+    setValue(geoPoint) {
+        if (this.props.onChange) {
+            this.props.onChange(geoPoint);
+        }
+    }
+    render() {
+        const { api, defaultZoom, value, onChange } = this.props;
+        return (React__default.createElement(GoogleMap, { api: api, location: this.getCenter(), onClick: this.handleMapClick, defaultZoom: defaultZoom }, (map) => (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(SearchInput, { api: api, map: map, onChange: this.handlePlaceChanged }),
+            value && (React__default.createElement(Marker, { api: api, map: map, position: value, onMove: onChange ? this.handleMarkerDragEnd : undefined }))))));
+    }
 }
 
-_defineProperty(GeopointInput, "defaultProps", {
-  markers: []
-});
+const PreviewImage = styled.img `
+  width: 100%;
+  height: auto;
+  vertical-align: top;
+`;
+const DialogInnerContainer = styled.div `
+  height: 40rem;
+  width: 50rem;
+`;
+
+// @todo: remove the following line when part imports has been removed from this file
+const getStaticImageUrl = (value) => {
+    const loc = `${value.lat},${value.lng}`;
+    const params = {
+        key: config.apiKey,
+        center: loc,
+        markers: loc,
+        zoom: 13,
+        scale: 2,
+        size: '640x300',
+    };
+    const qs = Object.keys(params).reduce((res, param) => {
+        return res.concat(`${param}=${encodeURIComponent(params[param])}`);
+    }, []);
+    return `https://maps.googleapis.com/maps/api/staticmap?${qs.join('&')}`;
+};
+class GeopointInput extends React__default.PureComponent {
+    _geopointInputId = uniqueId('GeopointInput');
+    static defaultProps = {
+        validation: [],
+    };
+    editButton;
+    constructor(props) {
+        super(props);
+        this.state = {
+            modalOpen: false,
+        };
+    }
+    setEditButton = (el) => {
+        this.editButton = el;
+    };
+    focus() {
+        if (this.editButton) {
+            this.editButton.focus();
+        }
+    }
+    handleFocus = (event) => {
+        this.props.onFocus(event);
+    };
+    handleBlur = () => {
+        this.props.onBlur?.();
+    };
+    handleToggleModal = () => {
+        const { onFocus, onBlur } = this.props;
+        this.setState((prevState) => ({ modalOpen: !prevState.modalOpen }), () => {
+            if (this.state.modalOpen) {
+                onFocus(['$']);
+            }
+            else {
+                onBlur?.();
+            }
+        });
+    };
+    handleCloseModal = () => {
+        this.setState({ modalOpen: false });
+    };
+    handleChange = (latLng) => {
+        const { type, onChange } = this.props;
+        onChange(PatchEvent.from([
+            setIfMissing({
+                _type: type.name,
+            }),
+            set(latLng.lat(), ['lat']),
+            set(latLng.lng(), ['lng']),
+        ]));
+    };
+    handleClear = () => {
+        const { onChange } = this.props;
+        onChange(PatchEvent.from(unset()));
+    };
+    render() {
+        const { value, compareValue, readOnly, type, validation, level, presence } = this.props;
+        const { modalOpen } = this.state;
+        if (!config || !config.apiKey) {
+            return (React__default.createElement("div", null,
+                React__default.createElement("p", null,
+                    "The ",
+                    React__default.createElement("a", { href: "https://sanity.io/docs/schema-types/geopoint-type" }, "Geopoint type"),
+                    " needs a Google Maps API key with access to:"),
+                React__default.createElement("ul", null,
+                    React__default.createElement("li", null, "Google Maps JavaScript API"),
+                    React__default.createElement("li", null, "Google Places API Web Service"),
+                    React__default.createElement("li", null, "Google Static Maps API")),
+                React__default.createElement("p", null,
+                    "Please enter the API key with access to these services in",
+                    React__default.createElement("code", { style: { whiteSpace: 'nowrap' } }, "`<project-root>/config/@sanity/google-maps-input.json`"))));
+        }
+        return (React__default.createElement(FormFieldSet, { level: level, title: type.title, description: type.description, onFocus: this.handleFocus, onBlur: this.handleBlur, __unstable_presence: presence, __unstable_changeIndicator: false, validation: validation },
+            React__default.createElement("div", null,
+                value && (React__default.createElement(ChangeIndicatorCompareValueProvider, { value: value, compareValue: compareValue },
+                    React__default.createElement(ChangeIndicator, { compareDeep: true },
+                        React__default.createElement(PreviewImage, { src: getStaticImageUrl(value), alt: "Map location" })))),
+                !readOnly && (React__default.createElement(Box, { marginTop: 4 },
+                    React__default.createElement(Grid, { columns: 2, gap: 2 },
+                        React__default.createElement(Button, { mode: "ghost", icon: value && EditIcon, padding: 3, ref: this.setEditButton, text: value ? 'Edit' : 'Set location', onClick: this.handleToggleModal }),
+                        value && (React__default.createElement(Button, { tone: "critical", icon: TrashIcon, padding: 3, mode: "ghost", text: 'Remove', onClick: this.handleClear }))))),
+                modalOpen && (React__default.createElement(Dialog, { id: `${this._geopointInputId}_dialog`, onClose: this.handleCloseModal, header: "Place the marker on the map", width: 1 },
+                    React__default.createElement(DialogInnerContainer, null,
+                        React__default.createElement(GoogleMapsLoadProxy, null, (api) => (React__default.createElement(GeopointSelect, { api: api, value: value || undefined, onChange: readOnly ? undefined : this.handleChange, defaultLocation: config.defaultLocation, defaultZoom: config.defaultZoom })))))))));
+    }
+}
 
-var _default = GeopointInput;
-exports.default = _default;
+export { GeopointInput as default };
+//# sourceMappingURL=GeopointInput.js.map

package/lib/input/GeopointInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeopointInput.js","sources":["../../src/map/SearchInput.styles.tsx","../../src/map/SearchInput.tsx","../../src/input/GeopointSelect.tsx","../../src/input/GeopointInput.styles.tsx","../../src/input/GeopointInput.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nexport const WrapperContainer = styled.div`\n  position: absolute;\n  right: 10px;\n  top: 10px;\n  width: 220px;\n`\n","import * as React from 'react'\nimport {TextInput} from '@sanity/ui'\nimport {WrapperContainer} from './SearchInput.styles'\n\ninterface Props {\n  api: typeof window.google.maps\n  map: google.maps.Map\n  onChange: (result: google.maps.places.PlaceResult) => void\n}\n\nexport class SearchInput extends React.PureComponent<Props> {\n  searchInputRef = React.createRef<HTMLInputElement>()\n  autoComplete: google.maps.places.Autocomplete | undefined\n\n  handleChange = () => {\n    if (!this.autoComplete) {\n      return\n    }\n\n    this.props.onChange(this.autoComplete.getPlace())\n\n    if (this.searchInputRef.current) {\n      this.searchInputRef.current.value = ''\n    }\n  }\n\n  componentDidMount() {\n    const input = this.searchInputRef.current\n    if (!input) {\n      return\n    }\n\n    const {api, map} = this.props\n    const {Circle, places, event} = api\n    const searchBounds = new Circle({center: map.getCenter(), radius: 100}).getBounds()\n    this.autoComplete = new places.Autocomplete(input, {\n      bounds: searchBounds,\n      types: [], // return all kinds of places\n    })\n\n    event.addListener(this.autoComplete, 'place_changed', this.handleChange)\n  }\n\n  render() {\n    return (\n      <WrapperContainer>\n        <TextInput\n          name=\"place\"\n          ref={this.searchInputRef}\n          placeholder=\"Search for place or address\"\n          padding={4}\n        />\n      </WrapperContainer>\n    )\n  }\n}\n","import React from 'react'\nimport {SearchInput} from '../map/SearchInput'\nimport {GoogleMap} from '../map/Map'\nimport {Marker} from '../map/Marker'\nimport {LatLng, Geopoint} from '../types'\n\nconst fallbackLatLng: LatLng = {lat: 40.7058254, lng: -74.1180863}\n\ninterface SelectProps {\n  api: typeof window.google.maps\n  value?: Geopoint\n  onChange?: (latLng: google.maps.LatLng) => void\n  defaultLocation?: LatLng\n  defaultZoom?: number\n}\n\nexport class GeopointSelect extends React.PureComponent<SelectProps> {\n  static defaultProps = {\n    defaultZoom: 8,\n    defaultLocation: {lng: 10.74609, lat: 59.91273},\n  }\n\n  mapRef = React.createRef<HTMLDivElement>()\n\n  getCenter() {\n    const {value = {}, defaultLocation = {}} = this.props\n    const point: LatLng = {...fallbackLatLng, ...defaultLocation, ...value}\n    return point\n  }\n\n  handlePlaceChanged = (place: google.maps.places.PlaceResult) => {\n    if (!place.geometry) {\n      return\n    }\n\n    this.setValue(place.geometry.location)\n  }\n\n  handleMarkerDragEnd = (event: google.maps.MapMouseEvent) => {\n    this.setValue(event.latLng)\n  }\n\n  handleMapClick = (event: google.maps.MapMouseEvent) => {\n    this.setValue(event.latLng)\n  }\n\n  setValue(geoPoint: google.maps.LatLng) {\n    if (this.props.onChange) {\n      this.props.onChange(geoPoint)\n    }\n  }\n\n  render() {\n    const {api, defaultZoom, value, onChange} = this.props\n    return (\n      <GoogleMap\n        api={api}\n        location={this.getCenter()}\n        onClick={this.handleMapClick}\n        defaultZoom={defaultZoom}\n      >\n        {(map) => (\n          <>\n            <SearchInput api={api} map={map} onChange={this.handlePlaceChanged} />\n            {value && (\n              <Marker\n                api={api}\n                map={map}\n                position={value}\n                onMove={onChange ? this.handleMarkerDragEnd : undefined}\n              />\n            )}\n          </>\n        )}\n      </GoogleMap>\n    )\n  }\n}\n","import styled from 'styled-components'\n\nexport const PreviewImage = styled.img`\n  width: 100%;\n  height: auto;\n  vertical-align: top;\n`\n\nexport const DialogInnerContainer = styled.div`\n  height: 40rem;\n  width: 50rem;\n`\n","// @todo: remove the following line when part imports has been removed from this file\n///<reference types=\"@sanity/types/parts\" />\n\nimport React from 'react'\nimport {uniqueId} from 'lodash'\nimport {Box, Grid, Button, Dialog} from '@sanity/ui'\nimport {TrashIcon, EditIcon} from '@sanity/icons'\nimport config from 'config:@sanity/google-maps-input'\nimport {\n  FormFieldSet,\n  ChangeIndicatorCompareValueProvider,\n  ChangeIndicator,\n} from '@sanity/base/components'\nimport {FormInputProps, PatchEvent, set, setIfMissing, unset} from '@sanity/base/form'\nimport {GoogleMapsLoadProxy} from '../loader/GoogleMapsLoadProxy'\nimport {Geopoint, GeopointSchemaType} from '../types'\nimport {GeopointSelect} from './GeopointSelect'\nimport {PreviewImage, DialogInnerContainer} from './GeopointInput.styles'\n\nconst getStaticImageUrl = (value) => {\n  const loc = `${value.lat},${value.lng}`\n  const params = {\n    key: config.apiKey,\n    center: loc,\n    markers: loc,\n    zoom: 13,\n    scale: 2,\n    size: '640x300',\n  }\n\n  const qs = Object.keys(params).reduce((res, param) => {\n    return res.concat(`${param}=${encodeURIComponent(params[param])}`)\n  }, [] as string[])\n\n  return `https://maps.googleapis.com/maps/api/staticmap?${qs.join('&')}`\n}\n\ntype GeopointInputProps = FormInputProps<Geopoint, GeopointSchemaType>\n\n// @todo\n// interface Focusable {\n//   focus: () => void\n// }\ntype Focusable = any\n\ninterface InputState {\n  modalOpen: boolean\n}\n\nclass GeopointInput extends React.PureComponent<GeopointInputProps, InputState> {\n  _geopointInputId = uniqueId('GeopointInput')\n\n  static defaultProps = {\n    validation: [],\n  }\n\n  editButton: Focusable | undefined\n\n  constructor(props) {\n    super(props)\n\n    this.state = {\n      modalOpen: false,\n    }\n  }\n\n  setEditButton = (el: Focusable) => {\n    this.editButton = el\n  }\n\n  focus() {\n    if (this.editButton) {\n      this.editButton.focus()\n    }\n  }\n\n  handleFocus = (event) => {\n    this.props.onFocus(event)\n  }\n\n  handleBlur = () => {\n    this.props.onBlur?.()\n  }\n\n  handleToggleModal = () => {\n    const {onFocus, onBlur} = this.props\n    this.setState(\n      (prevState) => ({modalOpen: !prevState.modalOpen}),\n      () => {\n        if (this.state.modalOpen) {\n          onFocus(['$'])\n        } else {\n          onBlur?.()\n        }\n      }\n    )\n  }\n\n  handleCloseModal = () => {\n    this.setState({modalOpen: false})\n  }\n\n  handleChange = (latLng: google.maps.LatLng) => {\n    const {type, onChange} = this.props\n    onChange(\n      PatchEvent.from([\n        setIfMissing({\n          _type: type.name,\n        }),\n        set(latLng.lat(), ['lat']),\n        set(latLng.lng(), ['lng']),\n      ])\n    )\n  }\n\n  handleClear = () => {\n    const {onChange} = this.props\n    onChange(PatchEvent.from(unset()))\n  }\n\n  render() {\n    const {value, compareValue, readOnly, type, validation, level, presence} = this.props\n    const {modalOpen} = this.state\n\n    if (!config || !config.apiKey) {\n      return (\n        <div>\n          <p>\n            The <a href=\"https://sanity.io/docs/schema-types/geopoint-type\">Geopoint type</a> needs\n            a Google Maps API key with access to:\n          </p>\n          <ul>\n            <li>Google Maps JavaScript API</li>\n            <li>Google Places API Web Service</li>\n            <li>Google Static Maps API</li>\n          </ul>\n          <p>\n            Please enter the API key with access to these services in\n            <code style={{whiteSpace: 'nowrap'}}>\n              `&lt;project-root&gt;/config/@sanity/google-maps-input.json`\n            </code>\n          </p>\n        </div>\n      )\n    }\n\n    return (\n      <FormFieldSet\n        level={level}\n        title={type.title}\n        description={type.description}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        __unstable_presence={presence}\n        __unstable_changeIndicator={false}\n        validation={validation}\n      >\n        <div>\n          {value && (\n            <ChangeIndicatorCompareValueProvider value={value} compareValue={compareValue}>\n              <ChangeIndicator compareDeep>\n                <PreviewImage src={getStaticImageUrl(value)} alt=\"Map location\" />\n              </ChangeIndicator>\n            </ChangeIndicatorCompareValueProvider>\n          )}\n\n          {!readOnly && (\n            <Box marginTop={4}>\n              <Grid columns={2} gap={2}>\n                <Button\n                  mode=\"ghost\"\n                  icon={value && EditIcon}\n                  padding={3}\n                  ref={this.setEditButton}\n                  text={value ? 'Edit' : 'Set location'}\n                  onClick={this.handleToggleModal}\n                />\n\n                {value && (\n                  <Button\n                    tone=\"critical\"\n                    icon={TrashIcon}\n                    padding={3}\n                    mode=\"ghost\"\n                    text={'Remove'}\n                    onClick={this.handleClear}\n                  />\n                )}\n              </Grid>\n            </Box>\n          )}\n\n          {modalOpen && (\n            <Dialog\n              id={`${this._geopointInputId}_dialog`}\n              onClose={this.handleCloseModal}\n              header=\"Place the marker on the map\"\n              width={1}\n            >\n              <DialogInnerContainer>\n                <GoogleMapsLoadProxy>\n                  {(api) => (\n                    <GeopointSelect\n                      api={api}\n                      value={value || undefined}\n                      onChange={readOnly ? undefined : this.handleChange}\n                      defaultLocation={config.defaultLocation}\n                      defaultZoom={config.defaultZoom}\n                    />\n                  )}\n                </GoogleMapsLoadProxy>\n              </DialogInnerContainer>\n            </Dialog>\n          )}\n        </div>\n      </FormFieldSet>\n    )\n  }\n}\n\nexport default GeopointInput\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAEO,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;CAKzC;;ACGY,MAAA,WAAY,SAAQ,KAAK,CAAC,aAAoB,CAAA;AACzD,IAAA,cAAc,GAAG,KAAK,CAAC,SAAS,EAAoB,CAAA;AACpD,IAAA,YAAY,CAA6C;IAEzD,YAAY,GAAG,MAAK;AAClB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,OAAM;AACP,SAAA;AAED,QAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAA;AAEjD,QAAA,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;YAC/B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAA;AACvC,SAAA;AACH,KAAC,CAAA;IAED,iBAAiB,GAAA;AACf,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAA;QACzC,IAAI,CAAC,KAAK,EAAE;YACV,OAAM;AACP,SAAA;QAED,MAAM,EAAC,GAAG,EAAE,GAAG,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;QAC7B,MAAM,EAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAC,GAAG,GAAG,CAAA;QACnC,MAAM,YAAY,GAAG,IAAI,MAAM,CAAC,EAAC,MAAM,EAAE,GAAG,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC,CAAC,SAAS,EAAE,CAAA;QACnF,IAAI,CAAC,YAAY,GAAG,IAAI,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE;AACjD,YAAA,MAAM,EAAE,YAAY;YACpB,KAAK,EAAE,EAAE;AACV,SAAA,CAAC,CAAA;AAEF,QAAA,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,EAAE,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;KACzE;IAED,MAAM,GAAA;QACJ,QACE,oBAAC,gBAAgB,EAAA,IAAA;YACf,KAAC,CAAA,aAAA,CAAA,SAAS,IACR,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,cAAc,EACxB,WAAW,EAAC,6BAA6B,EACzC,OAAO,EAAE,CAAC,EAAA,CACV,CACe,EACpB;KACF;AACF;;ACjDD,MAAM,cAAc,GAAW,EAAC,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,UAAU,EAAC,CAAA;AAUrD,MAAA,cAAe,SAAQA,cAAK,CAAC,aAA0B,CAAA;IAClE,OAAO,YAAY,GAAG;AACpB,QAAA,WAAW,EAAE,CAAC;QACd,eAAe,EAAE,EAAC,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAC;KAChD,CAAA;AAED,IAAA,MAAM,GAAGA,cAAK,CAAC,SAAS,EAAkB,CAAA;IAE1C,SAAS,GAAA;AACP,QAAA,MAAM,EAAC,KAAK,GAAG,EAAE,EAAE,eAAe,GAAG,EAAE,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;AACrD,QAAA,MAAM,KAAK,GAAW,EAAC,GAAG,cAAc,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,EAAC,CAAA;AACvE,QAAA,OAAO,KAAK,CAAA;KACb;AAED,IAAA,kBAAkB,GAAG,CAAC,KAAqC,KAAI;AAC7D,QAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YACnB,OAAM;AACP,SAAA;QAED,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;AACxC,KAAC,CAAA;AAED,IAAA,mBAAmB,GAAG,CAAC,KAAgC,KAAI;AACzD,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;AAC7B,KAAC,CAAA;AAED,IAAA,cAAc,GAAG,CAAC,KAAgC,KAAI;AACpD,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;AAC7B,KAAC,CAAA;AAED,IAAA,QAAQ,CAAC,QAA4B,EAAA;AACnC,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AACvB,YAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;AAC9B,SAAA;KACF;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,EAAC,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;AACtD,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,EAC1B,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,WAAW,EAAE,WAAW,EAAA,EAEvB,CAAC,GAAG,MACHA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACE,YAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAI,CAAA;AACrE,YAAA,KAAK,KACJA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,KAAK,EACf,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC,mBAAmB,GAAG,SAAS,GACvD,CACH,CACA,CACJ,CACS,EACb;KACF;;;AC1EI,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;CAIrC,CAAA;AAEM,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;CAG7C;;ACXD;AAmBA,MAAM,iBAAiB,GAAG,CAAC,KAAK,KAAI;IAClC,MAAM,GAAG,GAAG,CAAA,EAAG,KAAK,CAAC,GAAG,CAAA,CAAA,EAAI,KAAK,CAAC,GAAG,CAAA,CAAE,CAAA;AACvC,IAAA,MAAM,MAAM,GAAG;QACb,GAAG,EAAE,MAAM,CAAC,MAAM;AAClB,QAAA,MAAM,EAAE,GAAG;AACX,QAAA,OAAO,EAAE,GAAG;AACZ,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,IAAI,EAAE,SAAS;KAChB,CAAA;AAED,IAAA,MAAM,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,KAAK,KAAI;AACnD,QAAA,OAAO,GAAG,CAAC,MAAM,CAAC,CAAA,EAAG,KAAK,CAAI,CAAA,EAAA,kBAAkB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA,CAAE,CAAC,CAAA;KACnE,EAAE,EAAc,CAAC,CAAA;IAElB,OAAO,CAAA,+CAAA,EAAkD,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAA;AACzE,CAAC,CAAA;AAcD,MAAM,aAAc,SAAQA,cAAK,CAAC,aAA6C,CAAA;AAC7E,IAAA,gBAAgB,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;IAE5C,OAAO,YAAY,GAAG;AACpB,QAAA,UAAU,EAAE,EAAE;KACf,CAAA;AAED,IAAA,UAAU,CAAuB;AAEjC,IAAA,WAAA,CAAY,KAAK,EAAA;QACf,KAAK,CAAC,KAAK,CAAC,CAAA;QAEZ,IAAI,CAAC,KAAK,GAAG;AACX,YAAA,SAAS,EAAE,KAAK;SACjB,CAAA;KACF;AAED,IAAA,aAAa,GAAG,CAAC,EAAa,KAAI;AAChC,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE,CAAA;AACtB,KAAC,CAAA;IAED,KAAK,GAAA;QACH,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;AACxB,SAAA;KACF;AAED,IAAA,WAAW,GAAG,CAAC,KAAK,KAAI;AACtB,QAAA,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;AAC3B,KAAC,CAAA;IAED,UAAU,GAAG,MAAK;AAChB,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAA;AACvB,KAAC,CAAA;IAED,iBAAiB,GAAG,MAAK;QACvB,MAAM,EAAC,OAAO,EAAE,MAAM,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;QACpC,IAAI,CAAC,QAAQ,CACX,CAAC,SAAS,MAAM,EAAC,SAAS,EAAE,CAAC,SAAS,CAAC,SAAS,EAAC,CAAC,EAClD,MAAK;AACH,YAAA,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;AACxB,gBAAA,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;AACf,aAAA;AAAM,iBAAA;gBACL,MAAM,IAAI,CAAA;AACX,aAAA;AACH,SAAC,CACF,CAAA;AACH,KAAC,CAAA;IAED,gBAAgB,GAAG,MAAK;QACtB,IAAI,CAAC,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC,CAAA;AACnC,KAAC,CAAA;AAED,IAAA,YAAY,GAAG,CAAC,MAA0B,KAAI;QAC5C,MAAM,EAAC,IAAI,EAAE,QAAQ,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;AACnC,QAAA,QAAQ,CACN,UAAU,CAAC,IAAI,CAAC;AACd,YAAA,YAAY,CAAC;gBACX,KAAK,EAAE,IAAI,CAAC,IAAI;aACjB,CAAC;YACF,GAAG,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;YAC1B,GAAG,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;AAC3B,SAAA,CAAC,CACH,CAAA;AACH,KAAC,CAAA;IAED,WAAW,GAAG,MAAK;AACjB,QAAA,MAAM,EAAC,QAAQ,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;QAC7B,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;AACpC,KAAC,CAAA;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,EAAC,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;AACrF,QAAA,MAAM,EAAC,SAAS,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;AAE9B,QAAA,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;AAC7B,YAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,gBAAAA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA;;oBACMA,cAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,IAAI,EAAC,mDAAmD,EAAkB,EAAA,eAAA,CAAA;AAE/E,oBAAA,8CAAA,CAAA;AACJ,gBAAAA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA;oBACEA,cAAmC,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,4BAAA,CAAA;oBACnCA,cAAsC,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,+BAAA,CAAA;AACtC,oBAAAA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,wBAAA,CAA+B,CAC5B;AACL,gBAAAA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA;;oBAEEA,cAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,EAAC,UAAU,EAAE,QAAQ,EAAC,EAE5B,EAAA,wDAAA,CAAA,CACL,CACA,EACP;AACF,SAAA;AAED,QAAA,QACEA,cAAC,CAAA,aAAA,CAAA,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,mBAAmB,EAAE,QAAQ,EAC7B,0BAA0B,EAAE,KAAK,EACjC,UAAU,EAAE,UAAU,EAAA;AAEtB,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;gBACG,KAAK,KACJA,cAAA,CAAA,aAAA,CAAC,mCAAmC,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAA;oBAC3EA,cAAC,CAAA,aAAA,CAAA,eAAe,IAAC,WAAW,EAAA,IAAA,EAAA;AAC1B,wBAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,GAAG,EAAE,iBAAiB,CAAC,KAAK,CAAC,EAAE,GAAG,EAAC,cAAc,EAAG,CAAA,CAClD,CACkB,CACvC;gBAEA,CAAC,QAAQ,KACRA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAC,EAAA,SAAS,EAAE,CAAC,EAAA;oBACfA,cAAC,CAAA,aAAA,CAAA,IAAI,IAAC,OAAO,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAA;AACtB,wBAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EACL,EAAA,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,KAAK,IAAI,QAAQ,EACvB,OAAO,EAAE,CAAC,EACV,GAAG,EAAE,IAAI,CAAC,aAAa,EACvB,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,cAAc,EACrC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,CAAA;AAED,wBAAA,KAAK,KACJA,cAAC,CAAA,aAAA,CAAA,MAAM,IACL,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,CAAC,EACV,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,CACzB,CACH,CACI,CACH,CACP;gBAEA,SAAS,KACRA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,EAAE,EAAE,CAAA,EAAG,IAAI,CAAC,gBAAgB,CAAA,OAAA,CAAS,EACrC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,MAAM,EAAC,6BAA6B,EACpC,KAAK,EAAE,CAAC,EAAA;AAER,oBAAAA,cAAA,CAAA,aAAA,CAAC,oBAAoB,EAAA,IAAA;wBACnBA,cAAC,CAAA,aAAA,CAAA,mBAAmB,EACjB,IAAA,EAAA,CAAC,GAAG,MACHA,cAAC,CAAA,aAAA,CAAA,cAAc,EACb,EAAA,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IAAI,SAAS,EACzB,QAAQ,EAAE,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,YAAY,EAClD,eAAe,EAAE,MAAM,CAAC,eAAe,EACvC,WAAW,EAAE,MAAM,CAAC,WAAW,EAAA,CAC/B,CACH,CACmB,CACD,CAChB,CACV,CACG,CACO,EAChB;KACF;;;;;"}

package/package.json

@@ -1,13 +1,33 @@
 {
   "name": "@sanity/google-maps-input",
-  "version": "2.25.4",
+  "version": "2.26.1-purple-unicorn.560+8672b3b5e3",
   "description": "Sanity plugin providing input handlers for geo-related input types using Google Maps",
-  "main": "lib/index.js",
-  "types": "./dist/dts",
+  "main": "lib/input/GeopointInput.cjs",
+  "module": "lib/input/GeopointInput.js",
+  "exports": {
+    "./input/GeopointInput": {
+      "source": "./src/input/GeopointInput.tsx",
+      "require": "./lib/input/GeopointInput.cjs",
+      "default": "./lib/input/GeopointInput.js"
+    },
+    "./diff/resolver": {
+      "source": "./src/diff/resolver.ts",
+      "require": "./lib/diff/resolver.cjs",
+      "default": "./lib/diff/resolver.js"
+    }
+  },
+  "types": "./lib/dts/src/input/GeopointInput.d.ts",
   "author": "Sanity.io <hello@sanity.io>",
   "license": "MIT",
   "scripts": {
-    "clean": "rimraf lib dest"
+    "build": "../../../bin/pkg-utils bundle",
+    "clean": "rimraf lib",
+    "_exports:check": "../../../bin/pkg-utils exports-check",
+    "exports:clean": "../../../bin/pkg-utils exports-clean",
+    "exports:generate": "../../../bin/pkg-utils exports-generate",
+    "postbuild": "run-s exports:generate",
+    "prebuild": "yarn clean",
+    "watch": "../../../bin/pkg-utils bundle --watch"
   },
   "keywords": [
     "sanity",
@@ -19,20 +39,23 @@
     "sanity-plugin"
   ],
   "dependencies": {
-    "@sanity/field": "2.25.4",
     "@sanity/icons": "^1.2.1",
-    "@sanity/types": "2.24.0",
-    "@sanity/ui": "^0.37.2",
-    "lodash": "^4.17.15",
+    "@sanity/types": "2.26.1-purple-unicorn.560+8672b3b5e3",
+    "@sanity/ui": "^0.37.5",
+    "lodash": "^4.17.21",
     "rxjs": "^6.5.3"
   },
   "devDependencies": {
-    "@sanity/base": "2.25.4",
+    "@sanity/base": "2.26.1-purple-unicorn.560+8672b3b5e3",
+    "@sanity/form-builder": "2.26.1-purple-unicorn.560+8672b3b5e3",
     "@types/googlemaps": "^3.43.0",
-    "rimraf": "^2.7.1"
+    "react": "17.0.2",
+    "rimraf": "^3.0.2",
+    "styled-components": "^5.2.0"
   },
   "peerDependencies": {
     "@sanity/base": "^2.0.0",
+    "@sanity/form-builder": "^2.27",
     "react": "^16.9 || ^17",
     "react-dom": "^16.9 || ^17",
     "styled-components": "^5.2.0"
@@ -46,5 +69,5 @@
     "url": "https://github.com/sanity-io/sanity/issues"
   },
   "homepage": "https://www.sanity.io/",
-  "gitHead": "300fe66daba470c332a976cb3d78ced2d4a89292"
+  "gitHead": "8672b3b5e39b2aeea500d16ac197b068ba7c943c"
 }

package/src/@types/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const styles: Record<string, string>
+  export default styles
+}

package/src/diff/GeopointArrayDiff.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react'
+import {
+  ArrayDiff,
+  ObjectDiff,
+  Diff,
+  DiffProps as GenericDiffProps,
+  DiffComponent,
+} from '@sanity/base/field'
+import {GoogleMapsLoadProxy} from '../loader/GoogleMapsLoadProxy'
+import {GoogleMap} from '../map/Map'
+import {Geopoint} from '../types'
+import {GeopointMove} from './GeopointMove'
+import {RootContainer} from './GeopointFieldDiff.styles'
+
+export type DiffProps = GenericDiffProps<ArrayDiff<Geopoint>>
+
+export const GeopointArrayDiff: DiffComponent<ArrayDiff<Geopoint>> = ({diff, schemaType}) => {
+  return (
+    <RootContainer>
+      <GoogleMapsLoadProxy>
+        {(api) => <GeopointDiff api={api} diff={diff} schemaType={schemaType} />}
+      </GoogleMapsLoadProxy>
+    </RootContainer>
+  )
+}
+
+function GeopointDiff({api, diff}: DiffProps & {api: typeof window.google.maps}) {
+  const fromValue = (diff.fromValue || []).filter(hasCoordinates)
+  const toValue = (diff.toValue || []).filter(hasCoordinates)
+  if (fromValue.length === 0 && toValue.length === 0) {
+    return null
+  }
+
+  const bounds = getBounds(fromValue, toValue, api)
+  return (
+    <GoogleMap
+      api={api}
+      location={bounds.getCenter().toJSON()}
+      mapTypeControl={false}
+      controlSize={20}
+      bounds={bounds}
+    >
+      {(map) => (
+        <>
+          {diff.items.map(({toIndex, diff: pointDiff}) => {
+            if (!isChangeDiff(pointDiff)) {
+              return null
+            }
+
+            return (
+              <GeopointMove
+                key={toIndex}
+                api={api}
+                map={map}
+                diff={pointDiff}
+                label={`${toIndex}`}
+              />
+            )
+          })}
+        </>
+      )}
+    </GoogleMap>
+  )
+}
+
+function isChangeDiff(diff: Diff): diff is ObjectDiff<Geopoint> {
+  return diff.action !== 'unchanged' && diff.type === 'object'
+}
+
+function hasCoordinates(point: Partial<Geopoint>): point is Geopoint {
+  return typeof point.lat === 'number' && typeof point.lng === 'number'
+}
+
+function getBounds(
+  fromValue: google.maps.LatLngLiteral[] | null | undefined,
+  toValue: google.maps.LatLngLiteral[] | null | undefined,
+  api: typeof window.google.maps
+): google.maps.LatLngBounds {
+  const bounds = new api.LatLngBounds()
+  const points = [...(fromValue || []), ...(toValue || [])]
+  points.forEach((point) => bounds.extend(point))
+  return bounds
+}

package/src/diff/GeopointFieldDiff.styles.tsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+
+export const RootContainer = styled.div`
+  position: relative;
+  min-height: 200px;
+
+  &:empty {
+    background-color: var(--card-skeleton-color-from);
+    display: table;
+    width: 100%;
+  }
+
+  &:empty:after {
+    content: 'Missing/invalid data';
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    position: relative;
+  }
+`