@sanity/google-maps-input 2.29.1 → 2.29.4-purple-unicorn.509

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","import React from 'react'\nimport {uniqueId} from 'lodash'\nimport {Box, Grid, Button, Dialog} from '@sanity/ui'\nimport {TrashIcon, EditIcon} from '@sanity/icons'\n// @ts-expect-error TODO: remove the types eventually\nimport config from 'config:@sanity/google-maps-input'\nimport {\n  FormFieldSet,\n  ChangeIndicatorCompareValueProvider,\n  ChangeIndicator,\n} from '@sanity/base/_unstable'\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;;ACMD,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,46 @@
 {
   "name": "@sanity/google-maps-input",
-  "version": "2.29.1",
+  "version": "2.29.4-purple-unicorn.509+183505a0b3",
   "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",
+  "//": "the typesVersion config below is a workaround for TypeScript's lack of support for package exports",
+  "typesVersions": {
+    "*": {
+      "input/GeopointInput": [
+        "./lib/dts/src/input/GeopointInput.d.ts"
+      ],
+      "schema": [
+        "./lib/dts/src/schema.d.ts"
+      ],
+      "diff/resolver": [
+        "./lib/dts/src/diff/resolver.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",
+    "watch": "../../../bin/pkg-utils bundle --watch"
   },
   "keywords": [
     "sanity",
@@ -19,17 +52,18 @@
     "sanity-plugin"
   ],
   "dependencies": {
-    "@sanity/field": "2.29.1",
-    "@sanity/icons": "^1.2.1",
-    "@sanity/types": "2.28.0",
-    "@sanity/ui": "^0.37.2",
-    "lodash": "^4.17.15",
+    "@sanity/icons": "^1.2.8",
+    "@sanity/types": "2.29.4-purple-unicorn.509+183505a0b3",
+    "@sanity/ui": "^0.37.8",
+    "lodash": "^4.17.21",
     "rxjs": "^6.5.3"
   },
   "devDependencies": {
-    "@sanity/base": "2.29.1",
+    "@sanity/base": "2.29.4-purple-unicorn.509+183505a0b3",
     "@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",
@@ -46,5 +80,5 @@
     "url": "https://github.com/sanity-io/sanity/issues"
   },
   "homepage": "https://www.sanity.io/",
-  "gitHead": "f31c92025c75dbd5591bbb02f4bd7f8c01cc5178"
+  "gitHead": "183505a0b3ea400181bff4f4370c146374b58068"
 }

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/_unstable'
+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;
+  }
+`

package/src/diff/GeopointFieldDiff.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react'
+import {
+  DiffComponent,
+  ObjectDiff,
+  DiffProps as GenericDiffProps,
+  DiffTooltip,
+  getAnnotationAtPath,
+} from '@sanity/base/_unstable'
+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<ObjectDiff<Geopoint>>
+
+export const GeopointFieldDiff: DiffComponent<ObjectDiff<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, 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) : undefined
+
+  return (
+    <DiffTooltip annotations={annotation ? [annotation] : []} description={getAction(diff)}>
+      <div>
+        <GoogleMap
+          api={api}
+          location={center}
+          mapTypeControl={false}
+          controlSize={20}
+          bounds={bounds}
+          scrollWheel={false}
+        >
+          {(map) => <GeopointMove api={api} map={map} diff={diff} />}
+        </GoogleMap>
+      </div>
+    </DiffTooltip>
+  )
+}
+
+function getBounds(
+  fromValue: google.maps.LatLngLiteral,
+  toValue: google.maps.LatLngLiteral,
+  api: typeof window.google.maps
+): google.maps.LatLngBounds {
+  return new api.LatLngBounds().extend(fromValue).extend(toValue)
+}
+
+function getCenter(
+  diff: DiffProps['diff'],
+  api: typeof window.google.maps
+): google.maps.LatLngLiteral {
+  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: ObjectDiff<Geopoint>) {
+  const {fromValue, toValue} = diff
+  if (fromValue && toValue) {
+    return 'Moved'
+  } else if (fromValue) {
+    return 'Removed'
+  } else if (toValue) {
+    return 'Added'
+  }
+
+  return 'Unchanged'
+}

package/src/diff/GeopointMove.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react'
+import {useUserColor, ObjectDiff} from '@sanity/base/_unstable'
+import {Marker} from '../map/Marker'
+import {Arrow} from '../map/Arrow'
+import {Geopoint} from '../types'
+
+interface Props {
+  api: typeof window.google.maps
+  map: google.maps.Map
+  diff: ObjectDiff<Geopoint>
+  label?: string
+}
+
+export function GeopointMove({diff, api, map, label}: Props) {
+  const {fromValue: from, toValue: to} = diff
+  const annotation = diff.isChanged ? diff.annotation : undefined
+  const userColor = useUserColor(annotation ? annotation.author : null) || undefined
+  const fromRef = React.useRef<google.maps.Marker>()
+  const toRef = React.useRef<google.maps.Marker>()
+
+  return (
+    <>
+      {from && (
+        <Marker
+          api={api}
+          map={map}
+          position={from}
+          zIndex={0}
+          opacity={0.55}
+          markerRef={fromRef}
+          color={userColor}
+        />
+      )}
+      {from && to && <Arrow api={api} map={map} from={from} to={to} zIndex={1} color={userColor} />}
+      {to && (
+        <Marker
+          api={api}
+          map={map}
+          position={to}
+          zIndex={2}
+          markerRef={toRef}
+          label={label}
+          color={userColor}
+        />
+      )}
+    </>
+  )
+}

package/src/diff/resolver.ts

@@ -0,0 +1,21 @@
+import {DiffComponentResolver} from '@sanity/base/_unstable'
+import {GeopointFieldDiff} from './GeopointFieldDiff'
+import {GeopointArrayDiff} from './GeopointArrayDiff'
+
+const diffResolver: DiffComponentResolver = function diffResolver({schemaType}) {
+  if (schemaType.name === 'geopoint') {
+    return GeopointFieldDiff
+  }
+
+  if (
+    schemaType.jsonType === 'array' &&
+    schemaType.of.length === 1 &&
+    schemaType.of[0].name === 'geopoint'
+  ) {
+    return GeopointArrayDiff
+  }
+
+  return undefined
+}
+
+export default diffResolver

package/src/input/GeopointInput.styles.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+export const PreviewImage = styled.img`
+  width: 100%;
+  height: auto;
+  vertical-align: top;
+`
+
+export const DialogInnerContainer = styled.div`
+  height: 40rem;
+  width: 50rem;
+`

package/src/input/GeopointInput.tsx

@@ -0,0 +1,219 @@
+import React from 'react'
+import {uniqueId} from 'lodash'
+import {Box, Grid, Button, Dialog} from '@sanity/ui'
+import {TrashIcon, EditIcon} from '@sanity/icons'
+// @ts-expect-error TODO: remove the types eventually
+import config from 'config:@sanity/google-maps-input'
+import {
+  FormFieldSet,
+  ChangeIndicatorCompareValueProvider,
+  ChangeIndicator,
+} from '@sanity/base/_unstable'
+import {FormInputProps, PatchEvent, set, setIfMissing, unset} from '@sanity/base/form'
+import {GoogleMapsLoadProxy} from '../loader/GoogleMapsLoadProxy'
+import {Geopoint, GeopointSchemaType} from '../types'
+import {GeopointSelect} from './GeopointSelect'
+import {PreviewImage, DialogInnerContainer} from './GeopointInput.styles'
+
+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])}`)
+  }, [] as string[])
+
+  return `https://maps.googleapis.com/maps/api/staticmap?${qs.join('&')}`
+}
+
+type GeopointInputProps = FormInputProps<Geopoint, GeopointSchemaType>
+
+// @todo
+// interface Focusable {
+//   focus: () => void
+// }
+type Focusable = any
+
+interface InputState {
+  modalOpen: boolean
+}
+
+class GeopointInput extends React.PureComponent<GeopointInputProps, InputState> {
+  _geopointInputId = uniqueId('GeopointInput')
+
+  static defaultProps = {
+    validation: [],
+  }
+
+  editButton: Focusable | undefined
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      modalOpen: false,
+    }
+  }
+
+  setEditButton = (el: Focusable) => {
+    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: google.maps.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 (
+        <div>
+          <p>
+            The <a href="https://sanity.io/docs/schema-types/geopoint-type">Geopoint type</a> needs
+            a Google Maps API key with access to:
+          </p>
+          <ul>
+            <li>Google Maps JavaScript API</li>
+            <li>Google Places API Web Service</li>
+            <li>Google Static Maps API</li>
+          </ul>
+          <p>
+            Please enter the API key with access to these services in
+            <code style={{whiteSpace: 'nowrap'}}>
+              `&lt;project-root&gt;/config/@sanity/google-maps-input.json`
+            </code>
+          </p>
+        </div>
+      )
+    }
+
+    return (
+      <FormFieldSet
+        level={level}
+        title={type.title}
+        description={type.description}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
+        __unstable_presence={presence}
+        __unstable_changeIndicator={false}
+        validation={validation}
+      >
+        <div>
+          {value && (
+            <ChangeIndicatorCompareValueProvider value={value} compareValue={compareValue}>
+              <ChangeIndicator compareDeep>
+                <PreviewImage src={getStaticImageUrl(value)} alt="Map location" />
+              </ChangeIndicator>
+            </ChangeIndicatorCompareValueProvider>
+          )}
+
+          {!readOnly && (
+            <Box marginTop={4}>
+              <Grid columns={2} gap={2}>
+                <Button
+                  mode="ghost"
+                  icon={value && EditIcon}
+                  padding={3}
+                  ref={this.setEditButton}
+                  text={value ? 'Edit' : 'Set location'}
+                  onClick={this.handleToggleModal}
+                />
+
+                {value && (
+                  <Button
+                    tone="critical"
+                    icon={TrashIcon}
+                    padding={3}
+                    mode="ghost"
+                    text={'Remove'}
+                    onClick={this.handleClear}
+                  />
+                )}
+              </Grid>
+            </Box>
+          )}
+
+          {modalOpen && (
+            <Dialog
+              id={`${this._geopointInputId}_dialog`}
+              onClose={this.handleCloseModal}
+              header="Place the marker on the map"
+              width={1}
+            >
+              <DialogInnerContainer>
+                <GoogleMapsLoadProxy>
+                  {(api) => (
+                    <GeopointSelect
+                      api={api}
+                      value={value || undefined}
+                      onChange={readOnly ? undefined : this.handleChange}
+                      defaultLocation={config.defaultLocation}
+                      defaultZoom={config.defaultZoom}
+                    />
+                  )}
+                </GoogleMapsLoadProxy>
+              </DialogInnerContainer>
+            </Dialog>
+          )}
+        </div>
+      </FormFieldSet>
+    )
+  }
+}
+
+export default GeopointInput