@sanity/google-maps-input 4.0.0 → 4.1.0

package/src/input/GeopointInput.tsx

@@ -1,173 +1,179 @@
-import React from 'react'
-import {uniqueId} from 'lodash'
+import {useCallback, useEffect, useId, useRef, useState} from 'react'
 import {Box, Button, Dialog, Grid, Stack} from '@sanity/ui'
 import {EditIcon, TrashIcon} from '@sanity/icons'
-import {ObjectInputProps, set, setIfMissing, unset, ChangeIndicator} from 'sanity'
+import {ObjectInputProps, set, setIfMissing, unset, ChangeIndicator, Path} from 'sanity'
 import {GoogleMapsLoadProxy} from '../loader/GoogleMapsLoadProxy'
-import {Geopoint, GeopointSchemaType, LatLng} from '../types'
-import {GeopointSelect} from './GeopointSelect'
-import {DialogInnerContainer, PreviewImage} from './GeopointInput.styles'
-import {GoogleMapsInputConfig} from '../index'
+import type {Geopoint, GeopointSchemaType, GoogleMapsInputConfig, LatLng} from '../types'
 import {getGeoConfig} from '../global-workaround'
+import {DialogInnerContainer, PreviewImage} from './GeopointInput.styles'
+import {GeopointSelect} from './GeopointSelect'
+
+const EMPTY_PATH: Path = []
 
 const getStaticImageUrl = (value: LatLng, apiKey: string) => {
   const loc = `${value.lat},${value.lng}`
-  const params = {
+  const qs = new URLSearchParams({
     key: apiKey,
     center: loc,
     markers: loc,
-    zoom: 13,
-    scale: 2,
+    zoom: '13',
+    scale: '2',
     size: '640x300',
-  } as const
-  const qs = Object.keys(params).reduce((res, param) => {
-    return res.concat(`${param}=${encodeURIComponent(params[param as keyof typeof params])}`)
-  }, [] as string[])
+  })
 
-  return `https://maps.googleapis.com/maps/api/staticmap?${qs.join('&')}`
+  return `https://maps.googleapis.com/maps/api/staticmap?${qs.toString()}`
 }
 
 export type GeopointInputProps = ObjectInputProps<Geopoint, GeopointSchemaType> & {
   geoConfig: GoogleMapsInputConfig
 }
 
-type Focusable = any
-
-interface InputState {
-  modalOpen: boolean
-}
-
-class GeopointInput extends React.PureComponent<GeopointInputProps, InputState> {
-  _geopointInputId = uniqueId('GeopointInput')
-
-  editButton: Focusable | undefined
-
-  constructor(props: GeopointInputProps) {
-    super(props)
-
-    this.state = {
-      modalOpen: false,
-    }
-  }
-
-  setEditButton = (el: Focusable) => {
-    this.editButton = el
-  }
-
-  focus() {
-    if (this.editButton) {
-      this.editButton.focus()
-    }
-  }
-
-  handleToggleModal = () => {
-    this.setState((prevState) => ({modalOpen: !prevState.modalOpen}))
-  }
-
-  handleCloseModal = () => {
-    this.setState({modalOpen: false})
-  }
-
-  handleChange = (latLng: google.maps.LatLng) => {
-    const {schemaType, onChange} = this.props
-    onChange([
-      setIfMissing({
-        _type: schemaType.name,
-      }),
-      set(latLng.lat(), ['lat']),
-      set(latLng.lng(), ['lng']),
-    ])
-  }
-
-  handleClear = () => {
-    const {onChange} = this.props
+export function GeopointInput(props: GeopointInputProps) {
+  const {
+    changed,
+    elementProps,
+    focused,
+    geoConfig: config,
+    onChange,
+    onPathFocus,
+    path,
+    readOnly,
+    schemaType,
+    value,
+  } = props
+
+  const {
+    id,
+    ref: inputRef,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    'aria-describedby': ariaDescribedBy,
+  } = elementProps
+
+  const schemaTypeName = schemaType.name
+  const dialogId = useId()
+  const dialogRef = useRef<HTMLDivElement | null>(null)
+  const handleFocusButton = useCallback(() => inputRef?.current?.focus(), [inputRef])
+  const [modalOpen, setModalOpen] = useState(false)
+
+  const handleCloseModal = useCallback(() => {
+    if (dialogRef.current) dialogRef.current.blur()
+    setModalOpen(false)
+    handleFocusButton()
+  }, [setModalOpen, handleFocusButton])
+
+  const handleToggleModal = useCallback(
+    () => setModalOpen((currentState) => !currentState),
+    [setModalOpen],
+  )
+
+  const handleChange = useCallback(
+    (latLng: google.maps.LatLng) => {
+      onChange([
+        setIfMissing({_type: schemaTypeName}),
+        set(latLng.lat(), ['lat']),
+        set(latLng.lng(), ['lng']),
+      ])
+    },
+    [schemaTypeName, onChange],
+  )
+
+  const handleClear = useCallback(() => {
     onChange(unset())
-  }
+  }, [onChange])
 
-  render() {
-    const {value, readOnly, geoConfig: config, path, changed, focused} = 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 your googleMapsInput plugin
-            config.
-          </p>
-        </div>
-      )
+  useEffect(() => {
+    if (modalOpen) {
+      onPathFocus(EMPTY_PATH)
     }
+  }, [modalOpen, onPathFocus])
 
+  if (!config || !config.apiKey) {
     return (
-      <Stack space={3}>
-        {value && (
-          <ChangeIndicator path={path} isChanged={changed} hasFocus={!!focused}>
-            <PreviewImage src={getStaticImageUrl(value, config.apiKey)} alt="Map location" />
-          </ChangeIndicator>
-        )}
-
-        <Box>
-          <Grid columns={value ? 2 : 1} gap={3}>
+      <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 your googleMapsInput plugin
+          config.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <Stack space={3}>
+      {value && (
+        <ChangeIndicator path={path} isChanged={changed} hasFocus={!!focused}>
+          <PreviewImage
+            src={getStaticImageUrl(value, config.apiKey)}
+            alt="Map location"
+            onClick={handleFocusButton}
+            onDoubleClick={handleToggleModal}
+          />
+        </ChangeIndicator>
+      )}
+
+      <Box>
+        <Grid columns={value ? 2 : 1} gap={3}>
+          <Button
+            aria-describedby={ariaDescribedBy}
+            disabled={readOnly}
+            icon={value && EditIcon}
+            id={id}
+            mode="ghost"
+            onClick={handleToggleModal}
+            onFocus={handleFocus}
+            padding={3}
+            ref={inputRef}
+            text={value ? 'Edit' : 'Set location'}
+          />
+
+          {value && (
             <Button
+              disabled={readOnly}
+              icon={TrashIcon}
               mode="ghost"
-              icon={value && EditIcon}
+              onClick={handleClear}
               padding={3}
-              ref={this.setEditButton}
-              text={value ? 'Edit' : 'Set location'}
-              onClick={this.handleToggleModal}
-              disabled={readOnly}
+              text="Remove"
+              tone="critical"
             />
-
-            {value && (
-              <Button
-                tone="critical"
-                icon={TrashIcon}
-                padding={3}
-                mode="ghost"
-                text={'Remove'}
-                onClick={this.handleClear}
-                disabled={readOnly}
-              />
-            )}
-          </Grid>
-        </Box>
-
-        {modalOpen && (
-          <Dialog
-            id={`${this._geopointInputId}_dialog`}
-            onClose={this.handleCloseModal}
-            header="Place the marker on the map"
-            width={1}
-          >
-            <DialogInnerContainer>
-              <GoogleMapsLoadProxy config={getGeoConfig()}>
-                {(api) => (
-                  <GeopointSelect
-                    api={api}
-                    value={value || undefined}
-                    onChange={readOnly ? undefined : this.handleChange}
-                    defaultLocation={config.defaultLocation}
-                    defaultZoom={config.defaultZoom}
-                  />
-                )}
-              </GoogleMapsLoadProxy>
-            </DialogInnerContainer>
-          </Dialog>
-        )}
-      </Stack>
-    )
-  }
+          )}
+        </Grid>
+      </Box>
+
+      {modalOpen && (
+        <Dialog
+          header="Place the marker on the map"
+          id={`${dialogId}_dialog`}
+          onBlur={handleBlur}
+          onClose={handleCloseModal}
+          ref={dialogRef}
+          width={1}
+        >
+          <DialogInnerContainer>
+            <GoogleMapsLoadProxy config={getGeoConfig()}>
+              {(api) => (
+                <GeopointSelect
+                  api={api}
+                  value={value || undefined}
+                  onChange={readOnly ? undefined : handleChange}
+                  defaultLocation={config.defaultLocation}
+                  defaultZoom={config.defaultZoom}
+                />
+              )}
+            </GoogleMapsLoadProxy>
+          </DialogInnerContainer>
+        </Dialog>
+      )}
+    </Stack>
+  )
 }
-
-export default GeopointInput

package/src/input/GeopointSelect.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import {type FC, useCallback} from 'react'
 import {SearchInput} from '../map/SearchInput'
 import {GoogleMap} from '../map/Map'
 import {Marker} from '../map/Marker'
-import {LatLng, Geopoint} from '../types'
+import type {LatLng, Geopoint} from '../types'
 
 const fallbackLatLng: LatLng = {lat: 40.7058254, lng: -74.1180863}
 
@@ -14,65 +14,66 @@ interface SelectProps {
   defaultZoom?: number
 }
 
-export class GeopointSelect extends React.PureComponent<SelectProps> {
-  static defaultProps = {
-    defaultZoom: 8,
-    defaultLocation: {lng: 10.74609, lat: 59.91273},
-  }
-
-  mapRef = React.createRef<HTMLDivElement>()
-
-  getCenter() {
-    const {value = {}, defaultLocation = {}} = this.props
+export const GeopointSelect: FC<SelectProps> = ({
+  api,
+  value,
+  onChange,
+  defaultLocation = {lng: 10.74609, lat: 59.91273},
+  defaultZoom = 8,
+}) => {
+  const getCenter = useCallback(() => {
     const point: LatLng = {...fallbackLatLng, ...defaultLocation, ...value}
     return point
-  }
-
-  handlePlaceChanged = (place: google.maps.places.PlaceResult) => {
-    if (!place.geometry?.location) {
-      return
-    }
+  }, [value, defaultLocation])
 
-    this.setValue(place.geometry.location)
-  }
+  const setValue = useCallback(
+    (geoPoint: google.maps.LatLng) => {
+      if (onChange) {
+        onChange(geoPoint)
+      }
+    },
+    [onChange],
+  )
 
-  handleMarkerDragEnd = (event: google.maps.MapMouseEvent) => {
-    if (event.latLng) this.setValue(event.latLng)
-  }
+  const handlePlaceChanged = useCallback(
+    (place: google.maps.places.PlaceResult) => {
+      if (!place.geometry?.location) {
+        return
+      }
+      setValue(place.geometry.location)
+    },
+    [setValue],
+  )
 
-  handleMapClick = (event: google.maps.MapMouseEvent) => {
-    if (event.latLng) this.setValue(event.latLng)
-  }
+  const handleMarkerDragEnd = useCallback(
+    (event: google.maps.MapMouseEvent) => {
+      if (event.latLng) setValue(event.latLng)
+    },
+    [setValue],
+  )
 
-  setValue(geoPoint: google.maps.LatLng) {
-    if (this.props.onChange) {
-      this.props.onChange(geoPoint)
-    }
-  }
+  const handleMapClick = useCallback(
+    (event: google.maps.MapMouseEvent) => {
+      if (event.latLng) setValue(event.latLng)
+    },
+    [setValue],
+  )
 
-  render() {
-    const {api, defaultZoom, value, onChange} = this.props
-    return (
-      <GoogleMap
-        api={api}
-        location={this.getCenter()}
-        onClick={this.handleMapClick}
-        defaultZoom={defaultZoom}
-      >
-        {(map) => (
-          <>
-            <SearchInput api={api} map={map} onChange={this.handlePlaceChanged} />
-            {value && (
-              <Marker
-                api={api}
-                map={map}
-                position={value}
-                onMove={onChange ? this.handleMarkerDragEnd : undefined}
-              />
-            )}
-          </>
-        )}
-      </GoogleMap>
-    )
-  }
+  return (
+    <GoogleMap api={api} location={getCenter()} onClick={handleMapClick} defaultZoom={defaultZoom}>
+      {(map) => (
+        <>
+          <SearchInput api={api} map={map} onChange={handlePlaceChanged} />
+          {value && (
+            <Marker
+              api={api}
+              map={map}
+              position={value}
+              onMove={onChange ? handleMarkerDragEnd : undefined}
+            />
+          )}
+        </>
+      )}
+    </GoogleMap>
+  )
 }

package/src/loader/GoogleMapsLoadProxy.tsx

@@ -1,10 +1,10 @@
-import React, {useEffect, useState} from 'react'
+import {type ReactElement, useEffect, useState} from 'react'
+import type {GoogleMapsInputConfig} from '../types'
 import {AuthError, loadGoogleMapsApi} from './loadGoogleMapsApi'
 import {LoadError as LoadErrorView} from './LoadError'
-import {GoogleMapsInputConfig} from '../index'
 
 interface LoadProps {
-  children: (api: typeof window.google.maps) => React.ReactElement
+  children: (api: typeof window.google.maps) => ReactElement
   config: GoogleMapsInputConfig
 }
 
@@ -29,6 +29,10 @@ function useLoadGoogleMapsApi(config: {defaultLocale?: string; apiKey: string}):
   const [state, setState] = useState<LoadState>({type: 'loading'})
 
   useEffect(() => {
+    if (typeof window === 'undefined') {
+      return
+    }
+
     loadGoogleMapsApi({locale, apiKey: config.apiKey}).then(
       (api) => setState({type: 'loaded', api}),
       (err) =>

package/src/loader/LoadError.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import {Card, Box, Text, Code} from '@sanity/ui'
 
 type Props = {error: {message?: string}; isAuthError: false} | {isAuthError: true}

package/src/map/Arrow.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
-import {LatLng} from '../types'
+import {type MutableRefObject, PureComponent} from 'react'
+import type {LatLng} from '../types'
 import {latLngAreEqual} from './util'
 
 interface Props {
@@ -9,11 +9,11 @@ interface Props {
   to: LatLng
   color?: {background: string; border: string; text: string}
   zIndex?: number
-  arrowRef?: React.MutableRefObject<google.maps.Polyline | undefined>
+  arrowRef?: MutableRefObject<google.maps.Polyline | undefined>
   onClick?: (event: google.maps.MapMouseEvent) => void
 }
 
-export class Arrow extends React.PureComponent<Props> {
+export class Arrow extends PureComponent<Props> {
   line: google.maps.Polyline | undefined
 
   eventHandlers: {

package/src/map/Map.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import {LatLng} from '../types'
+import {createRef, PureComponent, type ReactElement} from 'react'
+import type {LatLng} from '../types'
 import {latLngAreEqual} from './util'
 import {MapContainer} from './Map.styles'
 
@@ -12,14 +12,14 @@ interface MapProps {
   scrollWheel?: boolean
   controlSize?: number
   onClick?: (event: google.maps.MapMouseEvent) => void
-  children?: (map: google.maps.Map) => React.ReactElement
+  children?: (map: google.maps.Map) => ReactElement
 }
 
 interface MapState {
   map: google.maps.Map | undefined
 }
 
-export class GoogleMap extends React.PureComponent<MapProps, MapState> {
+export class GoogleMap extends PureComponent<MapProps, MapState> {
   static defaultProps = {
     defaultZoom: 8,
     scrollWheel: true,
@@ -27,7 +27,7 @@ export class GoogleMap extends React.PureComponent<MapProps, MapState> {
 
   state: MapState = {map: undefined}
   clickHandler: google.maps.MapsEventListener | undefined
-  mapRef = React.createRef<HTMLDivElement>()
+  mapRef = createRef<HTMLDivElement>()
   mapEl: HTMLDivElement | null = null
 
   componentDidMount() {

package/src/map/Marker.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
-import {LatLng} from '../types'
+import {PureComponent, type MutableRefObject} from 'react'
+import type {LatLng} from '../types'
 import {latLngAreEqual} from './util'
 
 const markerPath =
@@ -14,11 +14,11 @@ interface Props {
   zIndex?: number
   opacity?: number
   label?: string
-  markerRef?: React.MutableRefObject<google.maps.Marker | undefined>
+  markerRef?: MutableRefObject<google.maps.Marker | undefined>
   color?: {background: string; border: string; text: string}
 }
 
-export class Marker extends React.PureComponent<Props> {
+export class Marker extends PureComponent<Props> {
   marker: google.maps.Marker | undefined
 
   eventHandlers: {

package/src/map/SearchInput.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
 import {TextInput} from '@sanity/ui'
 import {WrapperContainer} from './SearchInput.styles'
+import {createRef, PureComponent} from 'react'
 
 interface Props {
   api: typeof window.google.maps
@@ -8,8 +8,8 @@ interface Props {
   onChange: (result: google.maps.places.PlaceResult) => void
 }
 
-export class SearchInput extends React.PureComponent<Props> {
-  searchInputRef = React.createRef<HTMLInputElement>()
+export class SearchInput extends PureComponent<Props> {
+  searchInputRef = createRef<HTMLInputElement>()
   autoComplete: google.maps.places.Autocomplete | undefined
 
   handleChange = () => {

package/src/map/util.ts

@@ -1,4 +1,4 @@
-import {LatLng} from '../types'
+import type {LatLng} from '../types'
 
 export function latLngAreEqual(
   latLng1: LatLng | google.maps.LatLng,

package/src/plugin.tsx

@@ -1,18 +1,7 @@
-import React from 'react'
-import {definePlugin, SchemaType} from 'sanity'
-import GeopointInput, {GeopointInputProps} from './input/GeopointInput'
+import {definePlugin, type SchemaType} from 'sanity'
+import {GeopointInput, type GeopointInputProps} from './input/GeopointInput'
 import {setGeoConfig} from './global-workaround'
-import {GeopointSchemaType} from './types'
-
-export interface GoogleMapsInputConfig {
-  apiKey: string
-  defaultZoom?: number
-  defaultLocale?: string
-  defaultLocation?: {
-    lat: number
-    lng: number
-  }
-}
+import type {GeopointSchemaType, GoogleMapsInputConfig} from './types'
 
 export const googleMapsInput = definePlugin<GoogleMapsInputConfig>((config) => {
   setGeoConfig(config)

package/src/types.ts

@@ -1,5 +1,5 @@
-import {DiffComponent, DiffComponentOptions, ObjectDiff} from 'sanity'
-import {ObjectSchemaType} from 'sanity'
+import type {DiffComponent, DiffComponentOptions, ObjectDiff} from 'sanity'
+import type {ObjectSchemaType} from 'sanity'
 
 export interface LatLng {
   lat: number
@@ -17,3 +17,13 @@ export interface Geopoint {
 export interface GeopointSchemaType extends ObjectSchemaType {
   diffComponent?: DiffComponent<ObjectDiff<Geopoint>> | DiffComponentOptions<ObjectDiff<Geopoint>>
 }
+
+export interface GoogleMapsInputConfig {
+  apiKey: string
+  defaultZoom?: number
+  defaultLocale?: string
+  defaultLocation?: {
+    lat: number
+    lng: number
+  }
+}

package/dist/index.cjs.mjs

@@ -1,7 +0,0 @@
-import cjs from './index.js';
-
-export const GeopointArrayDiff = cjs.GeopointArrayDiff;
-export const GeopointFieldDiff = cjs.GeopointFieldDiff;
-export const GeopointInput = cjs.GeopointInput;
-export const googleMapsInput = cjs.googleMapsInput;
-