@multiplatform.one/forms 7.10.0 → 7.15.0

package/src/fields/Geolocation/index.tsx

@@ -3,6 +3,7 @@ import {
   pressTargetHitSlop,
   useResolvedKnobs,
   useGlyphColor,
+  useTouchSurface,
   type KnobProps,
 } from "@multiplatform.one/theme";
 import { MagnifyingGlassIcon, MapPinIcon, NavigationArrowIcon, XIcon } from "@phosphor-icons/react";
@@ -18,6 +19,7 @@ import { Input as InputParts } from "../../InputParts";
 import { Skeleton } from "../../Skeleton";
 import { GeolocationMap } from "./GeolocationMap";
 import { createNativeSearchFocus } from "./nativeSearchFocus";
+import { useGeocoder } from "./geocoderContext";
 import { detectGeoShape, formatGeoValue, parseGeoValue } from "./geoValue";
 import {
   queryPermissionState,
@@ -303,7 +305,7 @@ export interface GeolocationMapProps {
   knobProps: KnobProps;
 }
 
-/** Overlay buttons sit inside the map — 2px ring at offset 0 (media-13). */
+/** The map frame and the coordinate line take a 2px ring at offset 0 (media-13). */
 const overlayFocusRing = ensureFocusVisibleRing({ outlineOffset: 0 });
 
 function ResultRow({
@@ -646,7 +648,7 @@ function GeoMapSurface({
           />
         )}
 
-        {!hasValue && !locateErrorOpen ? (
+        {!hasValue ? (
           <YStack
             testID="geolocation-empty"
             position="absolute"
@@ -657,89 +659,71 @@ function GeoMapSurface({
             zIndex={2}
             alignItems="center"
             justifyContent="center"
-            gap="$2"
-            pointerEvents="box-none"
+            pointerEvents="none"
           >
-            <Text {...knobProps.body} color={formCommonColors.muted} pointerEvents="none">
+            <Text {...knobProps.body} color={formCommonColors.muted}>
               {t("No location set")}
             </Text>
-            {!readOnly && !disabled ? (
-              <Button
-                size="$4"
-                onPress={onUseMyLocation}
-                disabled={locating}
-                testID="geolocation-empty-locate"
-                aria-label={t("Use my current location")}
-              >
-                <Button.Text>{t("Use my current location")}</Button.Text>
-              </Button>
-            ) : null}
           </YStack>
         ) : null}
+      </YStack>
 
-        {handleExpand && expandIcon && (
-          <View position="absolute" top="$2" insetInlineEnd="$2" zIndex={2}>
-            <Button
-              size="$2"
-              circular
-              disabled={disabled}
-              onPress={handleExpand}
-              backgroundColor="$background"
-              aria-label={t("Expand map")}
-              focusVisibleStyle={overlayFocusRing}
-              hitSlop={pressTargetHitSlop(32)}
-            >
-              {expandIcon}
+      {locateErrorOpen ? (
+        <YStack
+          testID="geolocation-locate-panel"
+          role="alert"
+          {...knobProps.borderRadius}
+          {...knobProps.inputSurface}
+          borderColor={formInputColors.border.base}
+          padding="$3"
+          gap="$2"
+          alignItems="center"
+        >
+          <Text {...knobProps.body} color={formCommonColors.error} textAlign="center">
+            {locateError}
+          </Text>
+          <XStack gap="$2">
+            <Button size="$2" onPress={onRetryLocate} aria-label={t("Retry location")}>
+              {t("Retry")}
             </Button>
-          </View>
-        )}
-
-        {!readOnly && !locateErrorOpen && (
-          <View position="absolute" bottom="$2" insetInlineEnd="$2" zIndex={2}>
-            <Button
-              size="$2"
-              circular
-              disabled={disabled || locating}
-              onPress={onUseMyLocation}
-              backgroundColor="$background"
-              icon={locating ? <Spinner size="small" /> : locationIcon}
-              aria-label={locating ? t("Locating") : t("Locate")}
-              focusVisibleStyle={overlayFocusRing}
-              hitSlop={pressTargetHitSlop(32)}
-            />
-          </View>
-        )}
+            <Button size="$2" onPress={onCloseLocate} aria-label={t("Close location")}>
+              {t("Close")}
+            </Button>
+          </XStack>
+        </YStack>
+      ) : null}
 
-        {locateErrorOpen && (
-          <YStack
-            testID="geolocation-locate-panel"
-            position="absolute"
-            bottom="$2"
-            left="$2"
-            right="$2"
-            zIndex={3}
-            {...knobProps.borderRadius}
-            {...knobProps.inputSurface}
-            borderColor={formInputColors.border.base}
-            padding="$3"
-            gap="$2"
-            alignItems="center"
+      <XStack testID="geolocation-map-footer" alignItems="center" flexWrap="wrap" gap="$2">
+        <YStack flexGrow={1} flexShrink={1} flexBasis={0} minWidth={160}>
+          {coordLine}
+        </YStack>
+        {!readOnly && !locateErrorOpen ? (
+          <Button
+            size="$2"
+            disabled={disabled || locating}
+            onPress={onUseMyLocation}
+            icon={locating ? <Spinner size="small" /> : locationIcon}
+            testID={hasValue ? "geolocation-locate" : "geolocation-empty-locate"}
+            aria-label={hasValue ? t("Locate") : t("Use my current location")}
+            aria-busy={locating || undefined}
+            hitSlop={pressTargetHitSlop(32)}
           >
-            <Text {...knobProps.body} color={formCommonColors.error} textAlign="center">
-              {locateError}
-            </Text>
-            <XStack gap="$2">
-              <Button size="$2" onPress={onRetryLocate} aria-label={t("Retry location")}>
-                {t("Retry")}
-              </Button>
-              <Button size="$2" onPress={onCloseLocate} aria-label={t("Close location")}>
-                {t("Close")}
-              </Button>
-            </XStack>
-          </YStack>
-        )}
-      </YStack>
-      {coordLine}
+            <Button.Text>{hasValue ? t("Locate") : t("Use my current location")}</Button.Text>
+          </Button>
+        ) : null}
+        {handleExpand && expandIcon ? (
+          <Button
+            size="$2"
+            disabled={disabled}
+            onPress={handleExpand}
+            icon={expandIcon}
+            aria-label={t("Expand map")}
+            hitSlop={pressTargetHitSlop(32)}
+          >
+            <Button.Text>{t("Expand")}</Button.Text>
+          </Button>
+        ) : null}
+      </XStack>
 
       {expandIcon && (
         <AdaptivePopup
@@ -805,8 +789,9 @@ export interface GeolocationProps {
   /**
    * Convenience bag for `geocode` + `reverseGeocode`. Explicit props win.
    * Any object satisfying `Geocoder` works. No provider is constructed for you.
+   * Omitted, the nearest `GeocoderProvider` supplies one; `null` opts out.
    */
-  geocoder?: Geocoder;
+  geocoder?: Geocoder | null;
 }
 
 function CellFace({
@@ -880,6 +865,7 @@ export function Geolocation({
   reverseGeocode: reverseGeocodeProp,
   geocoder,
 }: GeolocationProps) {
+  const hydrationTouch = useTouchSurface();
   const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const glyphColor = useGlyphColor();
@@ -892,10 +878,11 @@ export function Geolocation({
   const inTableCell = useIsInTableCell();
   const viewportGtSm = useViewportGtSm();
   const shouldUseSheet = !isWeb || !viewportGtSm;
+  const contextGeocoder = useGeocoder();
   const { geocode, reverseGeocode } = resolveGeocoder({
     geocode: geocodeProp,
     reverseGeocode: reverseGeocodeProp,
-    geocoder,
+    geocoder: geocoder === undefined ? (contextGeocoder ?? undefined) : (geocoder ?? undefined),
   });
   const searchEnabled = Boolean(geocode) && !disabled && !readOnly;
   const listId = useId();
@@ -1182,7 +1169,11 @@ export function Geolocation({
     [startLocate, requestPosition, cancelLocate, applyAddress, closeSearch],
   );
 
-  const mapHeight = getFieldHeight((size ?? knobProps.sizeToken) as SizeTokens, compact ? 4 : 5);
+  const mapHeight = getFieldHeight(
+    (size ?? knobProps.sizeToken) as SizeTokens,
+    compact ? 4 : 5,
+    hydrationTouch,
+  );
   const displayError = error || preflightError;
 
   const renderSearch = (
@@ -1271,11 +1262,15 @@ export function Geolocation({
                   }
                 : {})}
               onFocus={() => {
+                // Web opens on a press, typing or ArrowDown only: a panel
+                // that moves focus in on open (a cell editor, a sheet) must
+                // not drop the idle results over the map (MPO-360).
                 if (
+                  !isWeb &&
                   searchEnabled &&
                   !opts.editingCell &&
                   !closingSearchRef.current &&
-                  (isWeb || nativeSearchFocus.canOpen(!!opts.sheetHeader))
+                  nativeSearchFocus.canOpen(!!opts.sheetHeader)
                 )
                   setResultsOpen(true);
               }}

package/src/fields/Geolocation/photonGeocoder.spec.ts

@@ -0,0 +1,214 @@
+import { describe, expect, it, vi } from "vitest";
+import { createPhotonGeocoder, photonFeatureToResult } from "./photonGeocoder";
+
+// Recorded from https://photon.komoot.io on 2026-09-26 (trimmed to the fields
+// the adapter reads). Photon returns one feature per OSM way, so a long street
+// arrives as several segments with the same name.
+const mannerheimSearch = {
+  type: "FeatureCollection",
+  features: [
+    {
+      type: "Feature",
+      properties: {
+        osm_key: "highway",
+        type: "street",
+        name: "Mannerheimintie",
+        locality: "Keskusta",
+        district: "Kluuvi",
+        city: "Helsinki",
+        state: "Uusimaa",
+        country: "Suomi",
+      },
+      geometry: { type: "Point", coordinates: [24.9374103, 60.1707623] },
+    },
+    {
+      type: "Feature",
+      properties: {
+        osm_key: "highway",
+        type: "street",
+        name: "Mannerheimintie",
+        locality: "Keskusta",
+        district: "Kluuvi",
+        city: "Helsinki",
+        state: "Uusimaa",
+        country: "Suomi",
+      },
+      geometry: { type: "Point", coordinates: [24.9413811, 60.1681296] },
+    },
+  ],
+};
+
+const kamppiReverse = {
+  type: "FeatureCollection",
+  features: [
+    {
+      type: "Feature",
+      properties: {
+        type: "house",
+        name: "P-Simonkenttä",
+        street: "Narinkkatori",
+        district: "Kamppi",
+        city: "Helsinki",
+        state: "Uusimaa",
+        country: "Suomi",
+      },
+      geometry: { type: "Point", coordinates: [24.9356429, 60.1694307] },
+    },
+  ],
+};
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+describe("createPhotonGeocoder", () => {
+  it("searches the public instance and maps features to place rows", async () => {
+    const fetch = vi.fn().mockResolvedValue(jsonResponse(mannerheimSearch));
+    const geocoder = createPhotonGeocoder({ fetch });
+    const results = await geocoder.geocode({ query: " mannerheimintie " });
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch.mock.calls[0][0]).toBe("https://photon.komoot.io/api/?q=mannerheimintie&limit=5");
+    expect(results).toEqual([
+      {
+        lat: 60.1707623,
+        lng: 24.9374103,
+        label: "Mannerheimintie",
+        description: "Kluuvi, Helsinki, Uusimaa, Suomi",
+      },
+    ]);
+  });
+
+  it("reverse geocodes a pair to its nearest place", async () => {
+    const fetch = vi.fn().mockResolvedValue(jsonResponse(kamppiReverse));
+    const geocoder = createPhotonGeocoder({ fetch });
+    const result = await geocoder.reverseGeocode({ lat: 60.16952, lng: 24.93545 });
+    expect(fetch.mock.calls[0][0]).toBe(
+      "https://photon.komoot.io/reverse?lat=60.16952&lon=24.93545&limit=1",
+    );
+    expect(result).toEqual({
+      lat: 60.1694307,
+      lng: 24.9356429,
+      label: "P-Simonkenttä",
+      description: "Narinkkatori, Kamppi, Helsinki, Uusimaa, Suomi",
+    });
+  });
+
+  it("answers null when nothing is near the pair", async () => {
+    const fetch = vi
+      .fn()
+      .mockResolvedValue(jsonResponse({ type: "FeatureCollection", features: [] }));
+    const geocoder = createPhotonGeocoder({ fetch });
+    await expect(geocoder.reverseGeocode({ lat: 0, lng: -160 })).resolves.toBeNull();
+  });
+
+  it("takes a self-hosted base URL and a language", async () => {
+    const fetch = vi.fn().mockResolvedValue(jsonResponse(mannerheimSearch));
+    const geocoder = createPhotonGeocoder({
+      fetch,
+      baseUrl: "https://geo.example.test/photon/",
+      lang: "en",
+      limit: 3,
+    });
+    await geocoder.geocode({ query: "Café & Bar" });
+    expect(fetch.mock.calls[0][0]).toBe(
+      "https://geo.example.test/photon/api/?q=Caf%C3%A9%20%26%20Bar&limit=3&lang=en",
+    );
+  });
+
+  it("never calls out for a blank query", async () => {
+    const fetch = vi.fn();
+    const geocoder = createPhotonGeocoder({ fetch });
+    await expect(geocoder.geocode({ query: "   " })).resolves.toEqual([]);
+    expect(fetch).not.toHaveBeenCalled();
+  });
+
+  it("serves a repeated query and a repeated pair from its cache", async () => {
+    const fetch = vi
+      .fn()
+      .mockImplementation(async (url: string) =>
+        jsonResponse(url.includes("/reverse") ? kamppiReverse : mannerheimSearch),
+      );
+    const geocoder = createPhotonGeocoder({ fetch });
+    await geocoder.geocode({ query: "mannerheimintie" });
+    await geocoder.geocode({ query: "mannerheimintie" });
+    await Promise.all([
+      geocoder.reverseGeocode({ lat: 60.16952, lng: 24.93545 }),
+      geocoder.reverseGeocode({ lat: 60.16952, lng: 24.93545 }),
+    ]);
+    expect(fetch).toHaveBeenCalledTimes(2);
+  });
+
+  it("rejects on an HTTP error and retries it on the next call", async () => {
+    const fetch = vi
+      .fn()
+      .mockResolvedValueOnce(jsonResponse({ message: "busy" }, 503))
+      .mockResolvedValueOnce(jsonResponse(mannerheimSearch));
+    const geocoder = createPhotonGeocoder({ fetch });
+    await expect(geocoder.geocode({ query: "mannerheimintie" })).rejects.toThrow(
+      "Photon answered 503",
+    );
+    await expect(geocoder.geocode({ query: "mannerheimintie" })).resolves.toHaveLength(1);
+    expect(fetch).toHaveBeenCalledTimes(2);
+  });
+
+  it("rejects a body that is not a feature collection", async () => {
+    const fetch = vi.fn().mockResolvedValue(jsonResponse({ error: "bad request" }));
+    const geocoder = createPhotonGeocoder({ fetch });
+    await expect(geocoder.geocode({ query: "x" })).rejects.toThrow("no feature collection");
+  });
+
+  it("aborts a request that outlives timeoutMs", async () => {
+    const fetch = vi.fn(
+      (_url: string, init?: RequestInit) =>
+        new Promise<Response>((_resolve, reject) => {
+          init?.signal?.addEventListener("abort", () => reject(new Error("aborted")));
+        }),
+    );
+    const geocoder = createPhotonGeocoder({
+      fetch: fetch as typeof globalThis.fetch,
+      timeoutMs: 20,
+    });
+    await expect(geocoder.geocode({ query: "slow" })).rejects.toThrow("aborted");
+  });
+});
+
+describe("photonFeatureToResult", () => {
+  it("labels an unnamed house by street and number", () => {
+    expect(
+      photonFeatureToResult({
+        geometry: { type: "Point", coordinates: [24.93545, 60.16952] },
+        properties: {
+          street: "Mannerheimintie",
+          housenumber: "3",
+          district: "Kamppi",
+          city: "Helsinki",
+          country: "Finland",
+        },
+      }),
+    ).toEqual({
+      lat: 60.16952,
+      lng: 24.93545,
+      label: "Mannerheimintie 3",
+      description: "Kamppi, Helsinki, Finland",
+    });
+  });
+
+  it("drops a feature without a point or a name", () => {
+    expect(photonFeatureToResult({ properties: { name: "Nowhere" } })).toBeNull();
+    expect(
+      photonFeatureToResult({ geometry: { type: "Point", coordinates: [1, 2] }, properties: {} }),
+    ).toBeNull();
+  });
+
+  it("gives a country alone no description", () => {
+    expect(
+      photonFeatureToResult({
+        geometry: { type: "Point", coordinates: [25.9, 64.9] },
+        properties: { name: "Suomi", country: "Suomi" },
+      }),
+    ).toEqual({ lat: 64.9, lng: 25.9, label: "Suomi" });
+  });
+});

package/src/fields/Geolocation/photonGeocoder.ts

@@ -0,0 +1,150 @@
+import type { GeocodeResult, Geocoder } from "./geocoder";
+import { formatPlace } from "./geocoder";
+
+/**
+ * Keyless geocoder over Photon (https://github.com/komoot/photon), the
+ * OpenStreetMap geocoder built for search-as-you-type. Opt-in: the field never
+ * constructs it. An app passes it to `GeocoderProvider` or the field's
+ * `geocoder` prop.
+ *
+ * `baseUrl` defaults to komoot's public instance, which asks for fair use and
+ * promises no availability. Production apps point `baseUrl` at their own
+ * Photon or a proxy, read from runtime config so the endpoint can move
+ * without a release.
+ */
+export interface PhotonGeocoderOptions {
+  baseUrl?: string;
+  /** Photon result language: `"default"` (local names), `"en"`, `"de"` or `"fr"`. */
+  lang?: string;
+  /** Forward results per query. */
+  limit?: number;
+  /** A request slower than this rejects, and the field shows its error state. */
+  timeoutMs?: number;
+  /** Cached queries and reverse lookups kept per geocoder. */
+  cacheSize?: number;
+  fetch?: typeof fetch;
+}
+
+interface PhotonProperties {
+  name?: string;
+  housenumber?: string;
+  street?: string;
+  district?: string;
+  locality?: string;
+  city?: string;
+  county?: string;
+  state?: string;
+  country?: string;
+}
+
+interface PhotonFeature {
+  geometry?: { type?: string; coordinates?: unknown };
+  properties?: PhotonProperties;
+}
+
+const photonPublicUrl = "https://photon.komoot.io";
+
+function streetLine(props: PhotonProperties): string | undefined {
+  if (!props.street) return undefined;
+  return props.housenumber ? `${props.street} ${props.housenumber}` : props.street;
+}
+
+export function photonFeatureToResult(feature: PhotonFeature): GeocodeResult | null {
+  const coordinates = feature.geometry?.coordinates;
+  if (!Array.isArray(coordinates)) return null;
+  const [lng, lat] = coordinates as [unknown, unknown];
+  if (typeof lat !== "number" || typeof lng !== "number") return null;
+  if (!Number.isFinite(lat) || !Number.isFinite(lng)) return null;
+  const props = feature.properties ?? {};
+  const street = streetLine(props);
+  const label = props.name ?? street ?? props.city ?? props.county ?? props.state ?? props.country;
+  if (!label) return null;
+  const seen = new Set([label]);
+  const parts: string[] = [];
+  for (const part of [
+    props.name ? street : undefined,
+    props.district ?? props.locality,
+    props.city ?? props.county,
+    props.state,
+    props.country,
+  ]) {
+    if (!part || seen.has(part)) continue;
+    seen.add(part);
+    parts.push(part);
+  }
+  return parts.length > 0
+    ? { lat, lng, label, description: parts.join(", ") }
+    : { lat, lng, label };
+}
+
+function toResults(body: unknown): GeocodeResult[] {
+  const features = (body as { features?: unknown } | null)?.features;
+  if (!Array.isArray(features)) throw new Error("Photon returned no feature collection");
+  const seen = new Set<string>();
+  const results: GeocodeResult[] = [];
+  for (const feature of features) {
+    const result = photonFeatureToResult(feature as PhotonFeature);
+    if (!result) continue;
+    const key = formatPlace(result);
+    if (seen.has(key)) continue;
+    seen.add(key);
+    results.push(result);
+  }
+  return results;
+}
+
+function query(params: Record<string, string | number | undefined>): string {
+  return Object.entries(params)
+    .filter((entry): entry is [string, string | number] => entry[1] !== undefined)
+    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`)
+    .join("&");
+}
+
+export function createPhotonGeocoder(options: PhotonGeocoderOptions = {}): Geocoder {
+  const baseUrl = (options.baseUrl ?? photonPublicUrl).replace(/\/+$/, "");
+  const lang = options.lang;
+  const limit = options.limit ?? 5;
+  const timeoutMs = options.timeoutMs ?? 8000;
+  const cacheSize = options.cacheSize ?? 100;
+  const doFetch = options.fetch ?? ((input, init) => fetch(input, init));
+  const cache = new Map<string, Promise<GeocodeResult[]>>();
+
+  const load = (url: string): Promise<GeocodeResult[]> => {
+    const hit = cache.get(url);
+    if (hit) return hit;
+    const controller = typeof AbortController === "function" ? new AbortController() : undefined;
+    const timer = controller ? setTimeout(() => controller.abort(), timeoutMs) : undefined;
+    const pending = doFetch(url, {
+      headers: { Accept: "application/json" },
+      signal: controller?.signal,
+    })
+      .then(async (response) => {
+        if (!response.ok) throw new Error(`Photon answered ${response.status}`);
+        return toResults(await response.json());
+      })
+      .finally(() => {
+        if (timer !== undefined) clearTimeout(timer);
+      });
+    cache.set(url, pending);
+    if (cache.size > cacheSize) {
+      const oldest = cache.keys().next().value;
+      if (oldest !== undefined) cache.delete(oldest);
+    }
+    pending.catch(() => cache.delete(url));
+    return pending;
+  };
+
+  return {
+    geocode: ({ query: text }) => {
+      const trimmed = text.trim();
+      if (!trimmed) return Promise.resolve([]);
+      return load(`${baseUrl}/api/?${query({ q: trimmed, limit, lang })}`);
+    },
+    reverseGeocode: async ({ lat, lng }) => {
+      const results = await load(
+        `${baseUrl}/reverse?${query({ lat: lat.toFixed(5), lon: lng.toFixed(5), limit: 1, lang })}`,
+      );
+      return results[0] ?? null;
+    },
+  };
+}

package/src/fields/Input/index.tsx

@@ -1,3 +1,4 @@
+import { useTouchSurface } from "@multiplatform.one/theme";
 import type { ComponentProps, ReactElement, ReactNode } from "react";
 import { useCallback, useRef } from "react";
 import { writeToClipboard } from "@multiplatform.one/platform";
@@ -160,6 +161,7 @@ export function Input({
   copy,
   onCopyResult,
 }: InputProps) {
+  const hydrationTouch = useTouchSurface();
   const { resolvedForm, knobProps, control, id } = useFormField({
     form: formProp,
     id: idProp,
@@ -178,7 +180,7 @@ export function Input({
   // density ≠ size: compact steps knobProps.sizeToken; an explicit `size`
   // ejects only the painted box height and leaves density alone.
   const resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
-  const visualHeight = getFieldHeight(resolvedSize);
+  const visualHeight = getFieldHeight(resolvedSize, 1, hydrationTouch);
   const belowFloor = visualHeight < MIN_PRESS_TARGET;
   const visibleLabel = labelHidden ? undefined : label;
   const resolvedAriaLabel =