@multiplatform.one/forms 7.7.4 → 7.8.0

package/dist/esm/fields/Geolocation/index.mjs

@@ -1,20 +1,35 @@
-import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
-import { NavigationArrowIcon } from "@phosphor-icons/react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Spinner, Text, View, XStack, YStack, isWeb } from "tamagui";
+import { ensureFocusVisibleRing, pressTargetHitSlop, useResolvedKnobs, useGlyphColor } from "@multiplatform.one/theme";
+import { MagnifyingGlassIcon, MapPinIcon, NavigationArrowIcon, XIcon } from "@phosphor-icons/react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { ScrollView, Spinner, Text, View, XStack, YStack, isWeb } from "tamagui";
 import { AdaptivePopup } from "../../AdaptivePopup/index.mjs";
 import { Button } from "../../Button/index.mjs";
 import { Field, FieldLayout } from "../../fieldLayout.mjs";
-import { FloatingPanel } from "../../FloatingPanel/index.mjs";
-import { GeolocationMap } from "./GeolocationMap.mjs";
-import { detectGeoShape, formatGeoValue, parseGeoValue } from "./geoValue.mjs";
+import { FloatingPanel, useViewportGtSm } from "../../FloatingPanel/index.mjs";
 import { Input as InputParts } from "../../InputParts/index.mjs";
 import { Skeleton } from "../../Skeleton/index.mjs";
+import { GeolocationMap } from "./GeolocationMap.mjs";
+import { createNativeSearchFocus } from "./nativeSearchFocus.mjs";
+import { detectGeoShape, formatGeoValue, parseGeoValue } from "./geoValue.mjs";
 import { queryPermissionState } from "../../shared/capabilityPreflight.mjs";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps.mjs";
 import { t } from "../../shared/t.mjs";
+import { pressSlopProps } from "../../shared/pressSlopProps.mjs";
+import { useIsInTableCell } from "../../shared/tableCellContext.mjs";
+import { zIndex } from "../../shared/zIndex.mjs";
 import { clampRadiusForLargeComponent, getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clampLat, clampLng, formatCoordPair, formatPlace, parseLatLngPair, resolveGeocoder } from "./geocoder.mjs";
+import { clampLat as clampLat2, clampLng as clampLng2, formatCoordPair as formatCoordPair2, formatPlace as formatPlace2, parseLatLngPair as parseLatLngPair2, resolveGeocoder as resolveGeocoder2 } from "./geocoder.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function coordinateKey({
+  lat,
+  lng
+}) {
+  return `${lat},${lng}`;
+}
+const SEARCH_DEBOUNCE_MS = 300;
+const COORD_LINE_HEIGHT = 28;
+const RESULTS_PANEL_SHADOW = "0px 8px 28px rgba(0,0,0,0.12), 0px 2px 6px rgba(0,0,0,0.04)";
 async function preflightGeolocation() {
   if (typeof navigator === "undefined" || !navigator.geolocation) {
     const insecure = typeof window !== "undefined" && window.isSecureContext === false;
@@ -47,15 +62,6 @@ function mapGeolocationError(err) {
   }
   return err.message || t("Failed to get location");
 }
-function clampLat(val) {
-  return Math.max(-90, Math.min(90, val));
-}
-function clampLng(val) {
-  return Math.max(-180, Math.min(180, val));
-}
-function formatCoordChip(lat, lng) {
-  return `${lat.toFixed(4)}, ${lng.toFixed(4)}`;
-}
 function tryParseCoord(text, clamp) {
   const trimmed = text.trim();
   if (trimmed === "" || trimmed === "-" || trimmed === "." || trimmed === "-.") return void 0;
@@ -210,8 +216,132 @@ function ExpandedMapView({
   });
 }
 const overlayFocusRing = ensureFocusVisibleRing({
-  outlineOffset: -2
+  outlineOffset: 0
 });
+function ResultRow({
+  testID,
+  label,
+  description,
+  onPress,
+  disabled
+}) {
+  return /* @__PURE__ */jsxs(YStack, {
+    testID,
+    role: "option",
+    "aria-selected": false,
+    "aria-disabled": disabled || void 0,
+    ...(isWeb ? {
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: event => {
+        if (disabled) return;
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onPress();
+        } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          event.preventDefault();
+          const rows = [...(event.currentTarget.parentElement?.querySelectorAll("[role='option']:not([aria-disabled='true'])") ?? [])];
+          const index = rows.indexOf(event.currentTarget);
+          rows[(index + (event.key === "ArrowDown" ? 1 : -1) + rows.length) % rows.length]?.focus();
+        }
+      }
+    } : {}),
+    minHeight: description ? 62 : 44,
+    justifyContent: "center",
+    paddingHorizontal: "$3",
+    paddingVertical: description ? "$2" : 0,
+    cursor: disabled ? "not-allowed" : "pointer",
+    hoverStyle: disabled ? void 0 : {
+      backgroundColor: "$color3"
+    },
+    pressStyle: disabled ? void 0 : {
+      backgroundColor: "$color3"
+    },
+    onPress: disabled ? void 0 : onPress,
+    opacity: disabled ? 0.5 : 1,
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$4",
+      lineHeight: 25,
+      color: "$color12",
+      children: label
+    }), description ? /* @__PURE__ */jsx(Text, {
+      fontSize: "$3",
+      lineHeight: 24,
+      color: formCommonColors.muted,
+      children: description
+    }) : null]
+  });
+}
+function StatusRow({
+  children,
+  testID
+}) {
+  return /* @__PURE__ */jsx(XStack, {
+    testID,
+    minHeight: 44,
+    alignItems: "center",
+    paddingHorizontal: "$3",
+    role: "status",
+    children: /* @__PURE__ */jsx(Text, {
+      fontSize: "$4",
+      lineHeight: 25,
+      color: formCommonColors.muted,
+      children
+    })
+  });
+}
+function SearchResultsList({
+  listId,
+  status,
+  query,
+  results,
+  pair,
+  onLocate,
+  onPick,
+  onPickPair,
+  locateDisabled
+}) {
+  const showLocate = status === "idle" || status === "results" || pair != null;
+  return /* @__PURE__ */jsxs(YStack, {
+    testID: "geolocation-results",
+    id: listId,
+    overflow: "hidden",
+    ...(isWeb ?
+    // role="listbox" is a valid ARIA role but outside RN's `Role` union;
+    // this web-only bag forwards it to the DOM node (house Record cast).
+    {
+      role: "listbox"
+    } : void 0),
+    children: [showLocate ? /* @__PURE__ */jsx(ResultRow, {
+      testID: "geolocation-use-location",
+      label: t("Use my current location"),
+      onPress: onLocate,
+      disabled: locateDisabled
+    }) : null, status === "searching" ? /* @__PURE__ */jsx(StatusRow, {
+      testID: "geolocation-search-status",
+      children: t("Searching\u2026")
+    }) : null, status === "error" ? /* @__PURE__ */jsx(StatusRow, {
+      testID: "geolocation-search-status",
+      children: t("Search is unavailable \u2014 check your connection")
+    }) : null, status === "empty" && !pair ? /* @__PURE__ */jsx(StatusRow, {
+      testID: "geolocation-search-status",
+      children: t('No places match "{{query}}"', {
+        query
+      })
+    }) : null, pair ? /* @__PURE__ */jsx(ResultRow, {
+      testID: "geolocation-coord-result",
+      label: t("Go to {{pair}}", {
+        pair: formatCoordPair(pair.lat, pair.lng)
+      }),
+      description: t("Exact coordinates \u2014 no address"),
+      onPress: () => onPickPair(pair.lat, pair.lng)
+    }) : null, status === "results" ? results.map((result, index) => /* @__PURE__ */jsx(ResultRow, {
+      testID: `geolocation-result-${index}`,
+      label: result.label,
+      description: result.description,
+      onPress: () => onPick(result)
+    }, `${result.lat},${result.lng},${index}`)) : null]
+  });
+}
 function GeoMapSurface({
   id,
   coordinates,
@@ -251,7 +381,7 @@ function GeoMapSurface({
   };
   const handleMapKeyDown = event => {
     if (!interactive) return;
-    if (event.key === "Enter") {
+    if (event.key === "Enter" && hasValue) {
       event.preventDefault();
       setCoordsOpen(true);
       return;
@@ -271,7 +401,68 @@ function GeoMapSurface({
     disabled,
     knobProps
   }) : null;
-  return /* @__PURE__ */jsxs(Fragment, {
+  const coordLine = readOnly || disabled ? /* @__PURE__ */jsx(XStack, {
+    testID: "geolocation-coordline",
+    alignItems: "center",
+    minHeight: COORD_LINE_HEIGHT,
+    paddingHorizontal: "$2",
+    hitSlop: pressTargetHitSlop(COORD_LINE_HEIGHT),
+    children: /* @__PURE__ */jsx(Text, {
+      fontFamily: "$mono",
+      fontSize: 12,
+      lineHeight: 22,
+      color: formCommonColors.muted,
+      children: hasValue ? formatCoordPair(mapLat, mapLng) : t("Enter coordinates")
+    })
+  }) : /* @__PURE__ */jsx(FloatingPanel, {
+    open: coordsOpen,
+    onOpenChange: handleCoordsOpenChange,
+    disabled,
+    fitContent: false,
+    sizing: "fill",
+    contentPadding: "none",
+    trigger: /* @__PURE__ */jsx(XStack, {
+      testID: "geolocation-coordline",
+      alignItems: "center",
+      minHeight: COORD_LINE_HEIGHT,
+      paddingHorizontal: "$2",
+      cursor: "pointer",
+      ...pressSlopProps(COORD_LINE_HEIGHT, true),
+      hoverStyle: {
+        backgroundColor: "$color3"
+      },
+      focusVisibleStyle: overlayFocusRing,
+      ...(isWeb ? {
+        tabIndex: 0,
+        role: "button",
+        "aria-label": t("Edit coordinates"),
+        onKeyDown: event => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            setCoordsOpen(true);
+          }
+        }
+      } : {}),
+      children: /* @__PURE__ */jsx(Text, {
+        fontFamily: "$mono",
+        fontSize: 12,
+        lineHeight: 22,
+        color: formCommonColors.muted,
+        children: hasValue ? formatCoordPair(mapLat, mapLng) : t("Enter coordinates")
+      })
+    }),
+    children: /* @__PURE__ */jsx(CoordinatesPanel, {
+      lat: mapLat,
+      lng: mapLng,
+      knobProps,
+      required,
+      hasError,
+      flushRef: coordsFlushRef,
+      onCommit: onCommitCoordinates
+    })
+  });
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$2",
     children: [/* @__PURE__ */jsxs(YStack, {
       testID: "geolocation-map",
       id,
@@ -293,7 +484,7 @@ function GeoMapSurface({
         tabIndex: 0,
         role: "application",
         "aria-label": t("Location map"),
-        "aria-valuetext": hasValue ? formatCoordChip(mapLat, mapLng) : t("No location set"),
+        "aria-valuetext": hasValue ? formatCoordPair(mapLat, mapLng) : t("No location set"),
         onKeyDown: handleMapKeyDown
       } : {}),
       children: [customMap ?? /* @__PURE__ */jsx(GeolocationMap, {
@@ -304,59 +495,34 @@ function GeoMapSurface({
         disabled,
         readOnly,
         hasValue
-      }), readOnly ? /* @__PURE__ */jsx(View, {
+      }), !hasValue && !locateErrorOpen ? /* @__PURE__ */jsxs(YStack, {
+        testID: "geolocation-empty",
         position: "absolute",
-        top: "$2",
-        insetInlineStart: "$2",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
         zIndex: 2,
-        backgroundColor: "$background",
-        opacity: 0.92,
-        paddingHorizontal: "$2",
-        paddingVertical: "$1",
-        ...knobProps.borderRadius,
-        children: /* @__PURE__ */jsx(Text, {
-          testID: "geolocation-coords-chip",
-          fontSize: "$1",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "$2",
+        pointerEvents: "box-none",
+        children: [/* @__PURE__ */jsx(Text, {
           ...knobProps.body,
           color: formCommonColors.muted,
-          children: hasValue ? formatCoordChip(mapLat, mapLng) : t("No location set")
-        })
-      }) : /* @__PURE__ */jsx(View, {
-        position: "absolute",
-        top: "$2",
-        insetInlineStart: "$2",
-        zIndex: 2,
-        children: /* @__PURE__ */jsx(FloatingPanel, {
-          open: coordsOpen,
-          onOpenChange: handleCoordsOpenChange,
-          disabled,
-          fitContent: true,
-          sizing: "fill",
-          contentPadding: "none",
-          trigger: /* @__PURE__ */jsx(Button, {
-            size: "$2",
-            disabled,
-            backgroundColor: "$background",
-            opacity: 0.92,
-            testID: "geolocation-coords-chip",
-            "aria-label": t("Edit coordinates"),
-            focusVisibleStyle: overlayFocusRing,
-            onPress: isWeb && !disabled ? () => setCoordsOpen(true) : void 0,
-            children: /* @__PURE__ */jsx(Button.Text, {
-              children: hasValue ? formatCoordChip(mapLat, mapLng) : t("Set location")
-            })
-          }),
-          children: /* @__PURE__ */jsx(CoordinatesPanel, {
-            lat: mapLat,
-            lng: mapLng,
-            knobProps,
-            required,
-            hasError,
-            flushRef: coordsFlushRef,
-            onCommit: onCommitCoordinates
+          pointerEvents: "none",
+          children: t("No location set")
+        }), !readOnly && !disabled ? /* @__PURE__ */jsx(Button, {
+          size: "$4",
+          onPress: onUseMyLocation,
+          disabled: locating,
+          testID: "geolocation-empty-locate",
+          "aria-label": t("Use my current location"),
+          children: /* @__PURE__ */jsx(Button.Text, {
+            children: t("Use my current location")
           })
-        })
-      }), handleExpand && expandIcon && /* @__PURE__ */jsx(View, {
+        }) : null]
+      }) : null, handleExpand && expandIcon && /* @__PURE__ */jsx(View, {
         position: "absolute",
         top: "$2",
         insetInlineEnd: "$2",
@@ -367,9 +533,9 @@ function GeoMapSurface({
           disabled,
           onPress: handleExpand,
           backgroundColor: "$background",
-          opacity: 0.92,
           "aria-label": t("Expand map"),
           focusVisibleStyle: overlayFocusRing,
+          hitSlop: pressTargetHitSlop(32),
           children: expandIcon
         })
       }), !readOnly && !locateErrorOpen && /* @__PURE__ */jsx(View, {
@@ -383,12 +549,12 @@ function GeoMapSurface({
           disabled: disabled || locating,
           onPress: onUseMyLocation,
           backgroundColor: "$background",
-          opacity: 0.92,
           icon: locating ? /* @__PURE__ */jsx(Spinner, {
             size: "small"
           }) : locationIcon,
           "aria-label": locating ? t("Locating") : t("Locate"),
-          focusVisibleStyle: overlayFocusRing
+          focusVisibleStyle: overlayFocusRing,
+          hitSlop: pressTargetHitSlop(32)
         })
       }), locateErrorOpen && /* @__PURE__ */jsxs(YStack, {
         testID: "geolocation-locate-panel",
@@ -423,7 +589,7 @@ function GeoMapSurface({
           })]
         })]
       })]
-    }), expandIcon && /* @__PURE__ */jsx(AdaptivePopup, {
+    }), coordLine, expandIcon && /* @__PURE__ */jsx(AdaptivePopup, {
       open: expanded,
       onOpenChange: setExpanded,
       title: t("Select Location"),
@@ -439,9 +605,45 @@ function GeoMapSurface({
     })]
   });
 }
-const defaultLocationIcon = /* @__PURE__ */jsx(NavigationArrowIcon, {
-  size: 16
-});
+function CellFace({
+  address,
+  coordinates,
+  onOpen
+}) {
+  const glyphColor = useGlyphColor();
+  const text = address ? address : coordinates ? formatCoordPair(coordinates.lat, coordinates.lng) : t("No location set");
+  return /* @__PURE__ */jsxs(XStack, {
+    testID: "geolocation-cell-face",
+    ...(isWeb && onOpen ? {
+      tabIndex: 0,
+      role: "button",
+      "aria-label": t("Edit location"),
+      onKeyDown: event => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onOpen();
+        }
+      }
+    } : {}),
+    alignItems: "center",
+    gap: "$2",
+    minHeight: 44,
+    minWidth: 0,
+    flex: 1,
+    children: [/* @__PURE__ */jsx(MapPinIcon, {
+      size: 14,
+      color: glyphColor
+    }), /* @__PURE__ */jsx(Text, {
+      fontSize: "$3",
+      lineHeight: 24,
+      color: "$color12",
+      numberOfLines: 1,
+      flex: 1,
+      minWidth: 0,
+      children: text
+    })]
+  });
+}
 function Geolocation({
   name,
   form: formProp,
@@ -459,11 +661,14 @@ function Geolocation({
   onBlur,
   disabled,
   readOnly,
-  locationIcon = defaultLocationIcon,
+  locationIcon,
   expandIcon,
   renderMap,
   skeleton,
-  compact
+  compact,
+  geocode: geocodeProp,
+  reverseGeocode: reverseGeocodeProp,
+  geocoder
 }) {
   const {
     resolvedForm,
@@ -475,13 +680,81 @@ function Geolocation({
     compact
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const glyphColor = useGlyphColor();
+  const resolvedLocationIcon = locationIcon === void 0 ? /* @__PURE__ */jsx(NavigationArrowIcon, {
+    size: 16,
+    color: glyphColor
+  }) : locationIcon;
+  const inTableCell = useIsInTableCell();
+  const viewportGtSm = useViewportGtSm();
+  const shouldUseSheet = !isWeb || !viewportGtSm;
+  const {
+    geocode,
+    reverseGeocode
+  } = resolveGeocoder({
+    geocode: geocodeProp,
+    reverseGeocode: reverseGeocodeProp,
+    geocoder
+  });
+  const searchEnabled = Boolean(geocode) && !disabled && !readOnly;
+  const listId = useId();
   const [locatePhase, setLocatePhase] = useState("idle");
   const [locateError, setLocateError] = useState(null);
   const [preflightError, setPreflightError] = useState();
+  const [address, setAddress] = useState(null);
+  const [query, setQuery] = useState("");
+  const [resultsOpen, setResultsOpen] = useState(false);
+  const [searchStatus, setSearchStatus] = useState("idle");
+  const [results, setResults] = useState([]);
+  const [cellOpen, setCellOpen] = useState(false);
   const preflightingRef = useRef(false);
   const onValueChangeRef = useRef(() => {});
   const currentValueRef = useRef("");
+  const searchGenRef = useRef(0);
+  const reverseGenRef = useRef(0);
+  const searchRootRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const sheetSearchInputRef = useRef(null);
+  const closingSearchRef = useRef(false);
+  const [nativeSearchFocus] = useState(createNativeSearchFocus);
+  const skipResultsReturnFocusRef = useRef(true);
+  const closeSearch = useCallback((restoreFocus = true) => {
+    if (!isWeb) nativeSearchFocus.dismiss();
+    closingSearchRef.current = true;
+    setResultsOpen(false);
+    if (isWeb && restoreFocus) searchInputRef.current?.focus({
+      preventScroll: true
+    });
+    closingSearchRef.current = false;
+  }, [nativeSearchFocus]);
+  const queryIsAddressRef = useRef(true);
+  const selectedPlaceRef = useRef(null);
+  const locateGenRef = useRef(0);
+  const interactiveRef = useRef(!disabled && !readOnly);
+  interactiveRef.current = !disabled && !readOnly;
+  const cancelLocate = useCallback(() => {
+    ++locateGenRef.current;
+    setLocatePhase("idle");
+    setLocateError(null);
+  }, []);
+  useEffect(() => {
+    if (disabled || readOnly) cancelLocate();
+  }, [disabled, readOnly, cancelLocate]);
+  useEffect(() => () => {
+    ++locateGenRef.current;
+    ++reverseGenRef.current;
+    ++searchGenRef.current;
+  }, []);
+  const applyAddress = useCallback((next, intoQuery) => {
+    setAddress(next);
+    if (intoQuery) {
+      queryIsAddressRef.current = true;
+      setQuery(next?.label ?? "");
+    }
+  }, []);
   const requestPosition = useCallback(() => {
+    if (!interactiveRef.current) return;
+    const gen = ++locateGenRef.current;
     if (!navigator?.geolocation) {
       setLocateError(t("Geolocation unavailable: not supported in this browser."));
       setLocatePhase("error");
@@ -490,6 +763,9 @@ function Geolocation({
     setLocatePhase("locating");
     setLocateError(null);
     navigator.geolocation.getCurrentPosition(position => {
+      if (gen !== locateGenRef.current || !interactiveRef.current) return;
+      selectedPlaceRef.current = null;
+      queryIsAddressRef.current = true;
       const lat = clampLat(position.coords.latitude);
       const lng = clampLng(position.coords.longitude);
       const previous = currentValueRef.current;
@@ -499,20 +775,25 @@ function Geolocation({
       }, detectGeoShape(previous), previous));
       setLocatePhase("idle");
       setLocateError(null);
+      closeSearch();
+      setCellOpen(false);
     }, err => {
+      if (gen !== locateGenRef.current || !interactiveRef.current) return;
       setLocateError(mapGeolocationError(err));
       setLocatePhase("error");
     }, {
       enableHighAccuracy: true,
       timeout: 1e4
     });
-  }, []);
+  }, [closeSearch]);
   const startLocate = useCallback(async () => {
     if (disabled || readOnly) return;
     if (preflightingRef.current || locatePhase === "locating") return;
     preflightingRef.current = true;
+    const gen = ++locateGenRef.current;
     try {
       const result = await preflightGeolocation();
+      if (gen !== locateGenRef.current || !interactiveRef.current) return;
       if (result.ok) {
         setPreflightError(void 0);
         requestPosition();
@@ -525,12 +806,108 @@ function Geolocation({
       preflightingRef.current = false;
     }
   }, [disabled, readOnly, locatePhase, requestPosition]);
+  const runReverse = useCallback(async (lat, lng) => {
+    const gen = ++reverseGenRef.current;
+    if (lat === void 0 || lng === void 0) {
+      selectedPlaceRef.current = null;
+      applyAddress(null, queryIsAddressRef.current);
+      return;
+    }
+    const key = coordinateKey({
+      lat,
+      lng
+    });
+    const selected = selectedPlaceRef.current;
+    if (selected?.key === key) {
+      applyAddress({
+        key,
+        label: formatPlace(selected.place)
+      }, queryIsAddressRef.current);
+      return;
+    }
+    applyAddress(null, queryIsAddressRef.current);
+    if (!reverseGeocode) {
+      return;
+    }
+    try {
+      const result = await reverseGeocode({
+        lat,
+        lng
+      });
+      if (gen !== reverseGenRef.current) return;
+      applyAddress(result ? {
+        key,
+        label: formatPlace(result)
+      } : null, queryIsAddressRef.current);
+    } catch {
+      if (gen !== reverseGenRef.current) return;
+      applyAddress(null, queryIsAddressRef.current);
+    }
+  }, [reverseGeocode, applyAddress]);
+  const runSearch = useCallback(async text => {
+    if (!geocode) return;
+    const gen = ++searchGenRef.current;
+    setSearchStatus("searching");
+    try {
+      const next = await geocode({
+        query: text
+      });
+      if (gen !== searchGenRef.current) return;
+      setResults(next);
+      setSearchStatus(next.length > 0 ? "results" : "empty");
+    } catch {
+      if (gen !== searchGenRef.current) return;
+      setResults([]);
+      setSearchStatus("error");
+    }
+  }, [geocode]);
+  useEffect(() => {
+    ++searchGenRef.current;
+    if (!searchEnabled || !resultsOpen) return;
+    const trimmed = query.trim();
+    if (queryIsAddressRef.current) return;
+    if (!trimmed) {
+      setSearchStatus("idle");
+      setResults([]);
+      return;
+    }
+    if (parseLatLngPair(trimmed)) {
+      setSearchStatus("idle");
+      setResults([]);
+      return;
+    }
+    const handle = setTimeout(() => {
+      void runSearch(trimmed);
+    }, SEARCH_DEBOUNCE_MS);
+    return () => {
+      clearTimeout(handle);
+      ++searchGenRef.current;
+    };
+  }, [query, resultsOpen, searchEnabled, runSearch]);
+  useEffect(() => {
+    if (!resultsOpen || shouldUseSheet) return;
+    const onDoc = event => {
+      const root = searchRootRef.current;
+      if (root && event.target instanceof Node && root.contains(event.target)) return;
+      closeSearch(false);
+    };
+    const onKey = event => {
+      if (event.key === "Escape") closeSearch();
+    };
+    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [resultsOpen, shouldUseSheet, closeSearch]);
   const makeHandlers = useCallback((currentValue, onValueChange) => {
     onValueChangeRef.current = onValueChange;
     currentValueRef.current = currentValue;
     const coordinates = parseGeoValue(currentValue);
     const shape = detectGeoShape(currentValue);
     const write = (lat, lng) => {
+      cancelLocate();
       onValueChange(formatGeoValue({
         lat: clampLat(lat),
         lng: clampLng(lng)
@@ -538,51 +915,294 @@ function Geolocation({
     };
     return {
       coordinates,
-      onCommitCoordinates: write,
-      onMapChange: write,
+      onCommitCoordinates: (lat, lng) => {
+        write(lat, lng);
+        selectedPlaceRef.current = null;
+        queryIsAddressRef.current = true;
+      },
+      onMapChange: (lat, lng) => {
+        write(lat, lng);
+        selectedPlaceRef.current = null;
+        queryIsAddressRef.current = true;
+      },
       onUseMyLocation: () => {
         void startLocate();
       },
       onRetryLocate: () => {
         requestPosition();
       },
-      onCloseLocate: () => {
-        setLocatePhase("idle");
-        setLocateError(null);
+      onCloseLocate: cancelLocate,
+      onPick: result => {
+        ++reverseGenRef.current;
+        const place = {
+          ...result,
+          lat: clampLat(result.lat),
+          lng: clampLng(result.lng)
+        };
+        selectedPlaceRef.current = {
+          key: coordinateKey(place),
+          place
+        };
+        write(result.lat, result.lng);
+        queryIsAddressRef.current = true;
+        setQuery(formatPlace(result));
+        closeSearch();
+        setCellOpen(false);
+        setSearchStatus("idle");
+      },
+      onPickPair: (lat, lng) => {
+        write(lat, lng);
+        selectedPlaceRef.current = null;
+        queryIsAddressRef.current = true;
+        closeSearch();
+        setCellOpen(false);
+        setSearchStatus("idle");
+      },
+      onClear: () => {
+        cancelLocate();
+        ++searchGenRef.current;
+        ++reverseGenRef.current;
+        selectedPlaceRef.current = null;
+        onValueChange("");
+        applyAddress(null, true);
+        setQuery("");
+        setResults([]);
+        setSearchStatus("idle");
       }
     };
-  }, [startLocate, requestPosition]);
+  }, [startLocate, requestPosition, cancelLocate, applyAddress, closeSearch]);
   const mapHeight = getFieldHeight(size ?? knobProps.sizeToken, compact ? 4 : 5);
-  if (skeleton) {
-    return /* @__PURE__ */jsx(FieldLayout, {
-      id,
-      label,
-      size,
-      knobProps,
-      children: /* @__PURE__ */jsx(Skeleton, {
-        variant: "rounded",
-        width: "100%",
-        height: mapHeight
+  const displayError = error || preflightError;
+  const renderSearch = (handlers, opts = {}) => {
+    const showClear = Boolean(query) && !disabled && !readOnly;
+    const inputRef = opts.sheetHeader ? sheetSearchInputRef : searchInputRef;
+    const activateNativeSearch = (focusInput = false) => {
+      nativeSearchFocus.activate();
+      if (!searchEnabled || opts.editingCell) return;
+      const nativeInput = inputRef.current;
+      if (nativeInput?.isFocused?.()) setResultsOpen(true);else if (focusInput) nativeInput?.focus();
+    };
+    const clearSearch = () => {
+      handlers.onClear();
+      closingSearchRef.current = true;
+      if (isWeb) inputRef.current?.focus({
+        preventScroll: true
+      });
+      closingSearchRef.current = false;
+    };
+    return /* @__PURE__ */jsx(InputParts, {
+      size: size || knobProps.sizeToken,
+      children: /* @__PURE__ */jsxs(InputParts.Box, {
+        disabled: disabled || !searchEnabled,
+        style: {
+          overflow: "visible"
+        },
+        ...(opts.sheetHeader ? {
+          borderWidth: 0,
+          borderBottomWidth: 1,
+          borderRadius: 0
+        } : {}),
+        children: [/* @__PURE__ */jsx(InputParts.Section, {
+          children: /* @__PURE__ */jsx(InputParts.Icon, {
+            adornment: "leading",
+            children: /* @__PURE__ */jsx(MagnifyingGlassIcon, {
+              size: 16
+            })
+          })
+        }), /* @__PURE__ */jsx(InputParts.Section, {
+          children: /* @__PURE__ */jsx(InputParts.Area, {
+            ref: inputRef,
+            value: query,
+            disabled: disabled || !searchEnabled,
+            placeholder: t("Search address or place"),
+            "aria-label": t("Search for a location"),
+            role: "combobox",
+            "aria-haspopup": "listbox",
+            "aria-expanded": resultsOpen,
+            "aria-controls": listId,
+            "aria-autocomplete": "list",
+            "data-testid": "geolocation-search",
+            onChangeText: text => {
+              if (!isWeb) nativeSearchFocus.activate();
+              ++searchGenRef.current;
+              queryIsAddressRef.current = false;
+              setResults([]);
+              setSearchStatus("idle");
+              setQuery(text);
+              if (searchEnabled) setResultsOpen(true);
+            },
+            onKeyDown: event => {
+              if (event.key === "ArrowDown") {
+                if (searchEnabled) setResultsOpen(true);
+                event.preventDefault();
+                document.getElementById(listId)?.querySelector("[role='option']:not([aria-disabled='true'])")?.focus();
+              }
+            },
+            onClick: () => {
+              if (searchEnabled) setResultsOpen(true);
+            },
+            ...(!isWeb ? {
+              onPressIn: () => activateNativeSearch(),
+              onAccessibilityTap: () => activateNativeSearch(true),
+              onBlur: () => nativeSearchFocus.blur(!!opts.sheetHeader, resultsOpen)
+            } : {}),
+            onFocus: () => {
+              if (searchEnabled && !opts.editingCell && !closingSearchRef.current && (isWeb || nativeSearchFocus.canOpen(!!opts.sheetHeader))) setResultsOpen(true);
+            }
+          })
+        }), showClear ? /* @__PURE__ */jsx(InputParts.Section, {
+          children: /* @__PURE__ */jsx(InputParts.Button, {
+            glyphRing: true,
+            onPress: clearSearch,
+            onKeyDown: event => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                event.stopPropagation();
+                clearSearch();
+              }
+            },
+            "aria-label": t("Clear location"),
+            testID: "geolocation-search-clear",
+            children: /* @__PURE__ */jsx(InputParts.Icon, {
+              children: /* @__PURE__ */jsx(XIcon, {
+                size: 14
+              })
+            })
+          })
+        }) : null]
       })
     });
-  }
-  const displayError = error || preflightError;
-  if (!resolvedForm || !name) {
-    const handlers = makeHandlers(value || "", v => onChange?.(v));
-    return /* @__PURE__ */jsx(FieldLayout, {
-      id,
-      label,
-      labelProps,
-      error: displayError,
-      helperText,
-      required,
-      size,
-      knobProps,
-      onBlur,
-      disabled,
-      children: /* @__PURE__ */jsx(GeoMapSurface, {
+  };
+  const renderResults = handlers => /* @__PURE__ */jsx(SearchResultsList, {
+    listId,
+    status: searchStatus,
+    query: query.trim(),
+    results,
+    pair: parseLatLngPair(query),
+    onLocate: handlers.onUseMyLocation,
+    onPick: handlers.onPick,
+    onPickPair: handlers.onPickPair,
+    locateDisabled: disabled || locatePhase === "locating"
+  });
+  const renderFormBody = (currentValue, onValueChange, editingCell = false, resolvedError = displayError) => {
+    const handlers = makeHandlers(currentValue, onValueChange);
+    const coordinates = handlers.coordinates;
+    const key = coordinates ? coordinateKey(coordinates) : null;
+    const selected = selectedPlaceRef.current;
+    const displayAddress = (selected?.key === key ? formatPlace(selected.place) : null) ?? (address?.key === key ? address.label : null) ?? (coordinates ? formatCoordPair(coordinates.lat, coordinates.lng) : null);
+    if (inTableCell && !editingCell) {
+      const face = /* @__PURE__ */jsx(CellFace, {
+        address: displayAddress,
+        coordinates,
+        onOpen: !disabled && !readOnly ? () => setCellOpen(true) : void 0
+      });
+      if (readOnly || disabled) return face;
+      return /* @__PURE__ */jsx(FloatingPanel, {
+        open: cellOpen,
+        onOpenChange: setCellOpen,
+        disabled,
+        fitContent: false,
+        contentPadding: "none",
+        trigger: face,
+        children: /* @__PURE__ */jsx(YStack, {
+          minWidth: 260,
+          maxWidth: 420,
+          children: renderFormBody(currentValue, onValueChange, true, resolvedError)
+        })
+      });
+    }
+    if (readOnly) {
+      return /* @__PURE__ */jsxs(YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */jsxs(XStack, {
+          testID: "geolocation-readonly-address",
+          alignItems: "center",
+          gap: "$2",
+          minHeight: 25,
+          children: [/* @__PURE__ */jsx(MapPinIcon, {
+            size: 14,
+            color: glyphColor
+          }), /* @__PURE__ */jsx(Text, {
+            fontSize: "$4",
+            lineHeight: 25,
+            color: "$color12",
+            children: displayAddress ?? t("No location set")
+          })]
+        }), /* @__PURE__ */jsx(GeoMapSurface, {
+          id,
+          coordinates,
+          onCommitCoordinates: handlers.onCommitCoordinates,
+          onUseMyLocation: handlers.onUseMyLocation,
+          onRetryLocate: handlers.onRetryLocate,
+          onCloseLocate: handlers.onCloseLocate,
+          onMapChange: handlers.onMapChange,
+          disabled: !!disabled,
+          readOnly: true,
+          locatePhase,
+          locateError,
+          knobProps,
+          locationIcon: resolvedLocationIcon,
+          expandIcon,
+          renderMap,
+          required,
+          hasError: !!resolvedError,
+          mapHeight
+        })]
+      });
+    }
+    const resultsPanel = resultsOpen && searchEnabled ? shouldUseSheet ? /* @__PURE__ */jsx(FloatingPanel, {
+      open: resultsOpen,
+      onOpenChange: open => open ? setResultsOpen(true) : closeSearch(),
+      onNativeShow: () => sheetSearchInputRef.current?.focus(),
+      skipReturnFocusRef: skipResultsReturnFocusRef,
+      sheet: true,
+      sheetFill: true,
+      scrollable: true,
+      contentPadding: "none",
+      header: renderSearch(handlers, {
+        sheetHeader: true
+      }),
+      trigger: /* @__PURE__ */jsx(View, {
+        testID: "geolocation-sheet-trigger",
+        height: 1,
+        width: "100%"
+      }),
+      children: /* @__PURE__ */jsx(YStack, {
+        testID: "geolocation-results-sheet",
+        children: renderResults(handlers)
+      })
+    }) : /* @__PURE__ */jsx(YStack, {
+      position: "absolute",
+      top: "100%",
+      left: 0,
+      right: 0,
+      zIndex: zIndex.dropdown,
+      backgroundColor: "$color1",
+      borderWidth: 1,
+      borderColor: formInputColors.border.base,
+      borderRadius: knobProps.borderRadius.borderRadius,
+      overflow: "hidden",
+      style: {
+        boxShadow: RESULTS_PANEL_SHADOW
+      },
+      children: /* @__PURE__ */jsx(ScrollView, {
+        maxHeight: mapHeight * 1.5,
+        children: renderResults(handlers)
+      })
+    }) : null;
+    return /* @__PURE__ */jsxs(YStack, {
+      gap: "$2",
+      children: [/* @__PURE__ */jsxs(YStack, {
+        ref: searchRootRef,
+        position: "relative",
+        testID: "geolocation-search-anchor",
+        "data-sheet": shouldUseSheet ? "true" : "false",
+        children: [renderSearch(handlers, {
+          editingCell
+        }), resultsPanel]
+      }), /* @__PURE__ */jsx(GeoMapSurface, {
         id,
-        coordinates: handlers.coordinates,
+        coordinates,
         onCommitCoordinates: handlers.onCommitCoordinates,
         onUseMyLocation: handlers.onUseMyLocation,
         onRetryLocate: handlers.onRetryLocate,
@@ -593,15 +1213,58 @@ function Geolocation({
         locatePhase,
         locateError,
         knobProps,
-        locationIcon,
+        locationIcon: resolvedLocationIcon,
         expandIcon,
         renderMap,
         required,
-        hasError: !!displayError,
+        hasError: !!resolvedError,
         mapHeight
+      })]
+    });
+  };
+  if (skeleton) {
+    return /* @__PURE__ */jsx(FieldLayout, {
+      id,
+      label,
+      size,
+      knobProps,
+      children: /* @__PURE__ */jsxs(YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */jsx(Skeleton, {
+          variant: "rounded",
+          width: "100%",
+          height: 44
+        }), /* @__PURE__ */jsx(Skeleton, {
+          variant: "rounded",
+          width: "100%",
+          height: mapHeight
+        })]
       })
     });
   }
+  const wrap = (currentValue, onValueChange, resolvedError, fieldBlur) => {
+    const coordinates = parseGeoValue(currentValue);
+    const taughtHelper = helperText ?? (!coordinates && !readOnly ? t("Search, tap the map, or use your location.") : void 0);
+    return /* @__PURE__ */jsxs(FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error: resolvedError ?? displayError,
+      helperText: inTableCell ? void 0 : taughtHelper,
+      required,
+      size,
+      knobProps,
+      onBlur: fieldBlur ?? onBlur,
+      disabled,
+      children: [/* @__PURE__ */jsx(GeolocationValueSync, {
+        value: currentValue,
+        runReverse
+      }), renderFormBody(currentValue, onValueChange, false, resolvedError)]
+    });
+  };
+  if (!resolvedForm || !name) {
+    return wrap(value || "", v => onChange?.(v));
+  }
   return /* @__PURE__ */jsx(Field, {
     form: resolvedForm,
     name,
@@ -609,44 +1272,24 @@ function Geolocation({
     validators: resolvedValidators,
     children: field => {
       const resolvedError = getFieldError(field, displayError);
-      const handlers = makeHandlers(field.state.value || "", v => {
+      return wrap(field.state.value || "", v => {
         field.handleChange(v);
         onChange?.(v);
-      });
-      return /* @__PURE__ */jsx(FieldLayout, {
-        id,
-        label,
-        labelProps,
-        error: resolvedError,
-        helperText,
-        required,
-        size,
-        knobProps,
-        onBlur: mergeFieldHandler(field, "handleBlur", onBlur),
-        disabled,
-        children: /* @__PURE__ */jsx(GeoMapSurface, {
-          id,
-          coordinates: handlers.coordinates,
-          onCommitCoordinates: handlers.onCommitCoordinates,
-          onUseMyLocation: handlers.onUseMyLocation,
-          onRetryLocate: handlers.onRetryLocate,
-          onCloseLocate: handlers.onCloseLocate,
-          onMapChange: handlers.onMapChange,
-          disabled: !!disabled,
-          readOnly: !!readOnly,
-          locatePhase,
-          locateError,
-          knobProps,
-          locationIcon,
-          expandIcon,
-          renderMap,
-          required,
-          hasError: !!resolvedError,
-          mapHeight
-        })
-      });
+      }, resolvedError, mergeFieldHandler(field, "handleBlur", onBlur));
     }
   });
 }
-export { Geolocation, preflightGeolocation };
+function GeolocationValueSync({
+  value,
+  runReverse
+}) {
+  const coords = parseGeoValue(value);
+  const key = coords ? coordinateKey(coords) : "";
+  useEffect(() => {
+    const next = parseGeoValue(value);
+    void runReverse(next?.lat, next?.lng);
+  }, [key, value, runReverse]);
+  return null;
+}
+export { Geolocation, clampLat2 as clampLat, clampLng2 as clampLng, formatCoordPair2 as formatCoordPair, formatPlace2 as formatPlace, parseLatLngPair2 as parseLatLngPair, preflightGeolocation, resolveGeocoder2 as resolveGeocoder };
 //# sourceMappingURL=index.mjs.map