@multiplatform.one/forms 7.5.0 → 7.6.1

package/src/fields/Geolocation/Geolocation.spec.tsx

@@ -6,6 +6,52 @@ import { Geolocation, preflightGeolocation } from "./index";
 
 const locationIcon = <span data-testid="location-icon" />;
 
+/**
+ * Recorded stock-Frappe Geolocation value: what
+ * `JSON.stringify(editableLayers.toGeoJSON())` writes for a circle marker at
+ * 37.7749,-122.4194. GeoJSON order is [lng, lat].
+ */
+const stockFrappePoint = JSON.stringify({
+  type: "FeatureCollection",
+  features: [
+    {
+      type: "Feature",
+      properties: { point_type: "circle", radius: 10 },
+      geometry: { type: "Point", coordinates: [-122.4194, 37.7749] },
+    },
+  ],
+});
+
+/**
+ * Stock Frappe's geolocation.js load path: JSON.parse then L.geoJSON. Compact
+ * `{"lat","lng"}` parses as JSON but is not GeoJSON, so Leaflet adds nothing
+ * and the desk field renders empty. A FeatureCollection with a Point is what
+ * survives a round trip through both clients.
+ */
+function frappeGeoJsonReads(value: string): { lat: number; lng: number } | null {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(value);
+  } catch {
+    return null;
+  }
+  if (!parsed || typeof parsed !== "object") return null;
+  const collection = parsed as { type?: unknown; features?: unknown };
+  if (collection.type !== "FeatureCollection" || !Array.isArray(collection.features)) {
+    return null;
+  }
+  for (const feature of collection.features) {
+    if (!feature || typeof feature !== "object") continue;
+    const geometry = (feature as { geometry?: { type?: unknown; coordinates?: unknown } }).geometry;
+    if (!geometry || geometry.type !== "Point" || !Array.isArray(geometry.coordinates)) continue;
+    const [lng, lat] = geometry.coordinates as [unknown, unknown];
+    if (typeof lng !== "number" || typeof lat !== "number") continue;
+    if (!Number.isFinite(lng) || !Number.isFinite(lat)) continue;
+    return { lat, lng };
+  }
+  return null;
+}
+
 describe("Geolocation", () => {
   describe("without form context", () => {
     it("renders with label", () => {
@@ -418,4 +464,84 @@ describe("Geolocation", () => {
       expect(result.findTextElement("Location")).toBeDefined();
     });
   });
+
+  describe("MPO-100 stock Frappe FeatureCollection", () => {
+    it("paints a recorded stock value instead of rendering empty", () => {
+      const result = renderWithProviders(
+        <Geolocation label="Location" value={stockFrappePoint} locationIcon={locationIcon} />,
+      );
+      expect(result.container.textContent).toContain("37.7749, -122.4194");
+      expect(result.container.textContent).not.toContain("Set location");
+      expect(result.container.querySelector("[data-testid='geolocation-map']")).not.toBeNull();
+    });
+
+    it("a compact {lat,lng} write is invisible to Frappe's parser (negative control)", () => {
+      expect(frappeGeoJsonReads(JSON.stringify({ lat: 37.7749, lng: -122.4194 }))).toBeNull();
+      expect(frappeGeoJsonReads(stockFrappePoint)).toEqual({ lat: 37.7749, lng: -122.4194 });
+    });
+
+    it("editing a stock value still reads in Frappe's parser and keeps properties", async () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Geolocation
+          label="Location"
+          locationIcon={locationIcon}
+          value={stockFrappePoint}
+          onChange={onChange}
+        />,
+      );
+      fireEvent.click(result.container.querySelector("[aria-label='Edit coordinates']") as Element);
+      await waitFor(() => {
+        expect(document.querySelector("[data-testid='geolocation-coords-panel']")).not.toBeNull();
+      });
+      const latInput = document.querySelector("input[aria-label='Latitude']") as HTMLInputElement;
+      expect(latInput).not.toBeNull();
+      fireEvent.change(latInput, { target: { value: "12.34" } });
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalled();
+      });
+      const written = onChange.mock.calls[0][0] as string;
+      expect(JSON.parse(written).type).toBe("FeatureCollection");
+      expect(frappeGeoJsonReads(written)).toEqual({ lat: 12.34, lng: -122.4194 });
+      expect(JSON.parse(written).features[0].properties).toEqual({
+        point_type: "circle",
+        radius: 10,
+      });
+    });
+
+    it("map pick on a stock value writes FeatureCollection, not compact latlng", () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Geolocation
+          label="Location"
+          value={stockFrappePoint}
+          onChange={onChange}
+          locationIcon={locationIcon}
+        />,
+      );
+      const pick = result.container.querySelector(
+        "[data-testid='geolocation-map-pick']",
+      ) as HTMLElement;
+      expect(pick).not.toBeNull();
+      pick.getBoundingClientRect = () =>
+        ({
+          width: 200,
+          height: 200,
+          left: 0,
+          top: 0,
+          right: 200,
+          bottom: 200,
+          x: 0,
+          y: 0,
+          toJSON() {},
+        }) as DOMRect;
+      fireEvent.click(pick, { clientX: 150, clientY: 50 });
+      expect(onChange).toHaveBeenCalled();
+      const written = onChange.mock.calls[0][0] as string;
+      expect(JSON.parse(written).type).toBe("FeatureCollection");
+      const read = frappeGeoJsonReads(written);
+      expect(read).not.toBeNull();
+      expect(read?.lat).not.toBeCloseTo(37.7749, 3);
+    });
+  });
 });

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

@@ -0,0 +1,169 @@
+import { describe, expect, it } from "vitest";
+import { detectGeoShape, formatGeoValue, parseGeoValue } from "./geoValue";
+
+/**
+ * Recorded stock-Frappe value: what `JSON.stringify(editableLayers.toGeoJSON())`
+ * writes for a single circle marker dropped at 37.7749,-122.4194. Leaflet emits
+ * GeoJSON order, so coordinates are [lng, lat].
+ */
+const stockFrappePoint = JSON.stringify({
+  type: "FeatureCollection",
+  features: [
+    {
+      type: "Feature",
+      properties: { point_type: "circle", radius: 10 },
+      geometry: { type: "Point", coordinates: [-122.4194, 37.7749] },
+    },
+  ],
+});
+
+const nativePoint = JSON.stringify({ lat: 37.7749, lng: -122.4194 });
+
+describe("parseGeoValue", () => {
+  it("reads the repo-native {lat,lng} shape", () => {
+    expect(parseGeoValue(nativePoint)).toEqual({ lat: 37.7749, lng: -122.4194 });
+  });
+
+  it("reads a stock Frappe FeatureCollection and yields the SAME coordinates", () => {
+    expect(parseGeoValue(stockFrappePoint)).toEqual(parseGeoValue(nativePoint));
+  });
+
+  it("does not swap lat/lng — GeoJSON stores [lng, lat]", () => {
+    const parsed = parseGeoValue(stockFrappePoint);
+    expect(parsed?.lat).toBeCloseTo(37.7749, 10);
+    expect(parsed?.lng).toBeCloseTo(-122.4194, 10);
+  });
+
+  it("round-trips a stock value through JSON.parse/stringify unchanged", () => {
+    const reserialized = JSON.stringify(JSON.parse(stockFrappePoint));
+    expect(parseGeoValue(reserialized)).toEqual({ lat: 37.7749, lng: -122.4194 });
+  });
+
+  it("picks the first Point when Frappe also stored drawn shapes", () => {
+    const mixed = JSON.stringify({
+      type: "FeatureCollection",
+      features: [
+        {
+          type: "Feature",
+          properties: {},
+          geometry: {
+            type: "Polygon",
+            coordinates: [
+              [
+                [0, 0],
+                [1, 0],
+                [1, 1],
+                [0, 0],
+              ],
+            ],
+          },
+        },
+        {
+          type: "Feature",
+          properties: { point_type: "marker" },
+          geometry: { type: "Point", coordinates: [12.4924, 41.8902] },
+        },
+      ],
+    });
+    expect(parseGeoValue(mixed)).toEqual({ lat: 41.8902, lng: 12.4924 });
+  });
+
+  it("returns null for an empty FeatureCollection (Frappe's cleared value)", () => {
+    expect(parseGeoValue(JSON.stringify({ type: "FeatureCollection", features: [] }))).toBeNull();
+  });
+
+  it("returns null for empty, blank, malformed, and non-finite values", () => {
+    expect(parseGeoValue(undefined)).toBeNull();
+    expect(parseGeoValue("")).toBeNull();
+    expect(parseGeoValue("   ")).toBeNull();
+    expect(parseGeoValue("{not json")).toBeNull();
+    expect(parseGeoValue(JSON.stringify({ lat: "37.7", lng: -122 }))).toBeNull();
+    expect(parseGeoValue(JSON.stringify({ lat: Number.NaN, lng: -122 }))).toBeNull();
+  });
+});
+
+describe("detectGeoShape", () => {
+  it("reports featurecollection for a stock Frappe value", () => {
+    expect(detectGeoShape(stockFrappePoint)).toBe("featurecollection");
+  });
+
+  it("reports latlng for the repo-native value and for unreadable input", () => {
+    expect(detectGeoShape(nativePoint)).toBe("latlng");
+    expect(detectGeoShape("")).toBe("latlng");
+    expect(detectGeoShape("{not json")).toBe("latlng");
+  });
+});
+
+describe("formatGeoValue", () => {
+  it("keeps the repo-native shape for a doc that arrived native", () => {
+    expect(formatGeoValue({ lat: 1.5, lng: -2.5 }, "latlng", nativePoint)).toBe(
+      JSON.stringify({ lat: 1.5, lng: -2.5 }),
+    );
+  });
+
+  it("writes a FeatureCollection back when the doc arrived from stock Frappe", () => {
+    const written = JSON.parse(
+      formatGeoValue({ lat: 1.5, lng: -2.5 }, "featurecollection", stockFrappePoint),
+    );
+    expect(written.type).toBe("FeatureCollection");
+    expect(written.features).toHaveLength(1);
+    expect(written.features[0].geometry).toEqual({ type: "Point", coordinates: [-2.5, 1.5] });
+  });
+
+  it("emits [lng, lat] so stock Frappe's parser reads the edit back", () => {
+    const written = formatGeoValue({ lat: 1.5, lng: -2.5 }, "featurecollection", stockFrappePoint);
+    expect(parseGeoValue(written)).toEqual({ lat: 1.5, lng: -2.5 });
+  });
+
+  it("preserves the feature properties Frappe wrote (point_type/radius)", () => {
+    const written = JSON.parse(
+      formatGeoValue({ lat: 1.5, lng: -2.5 }, "featurecollection", stockFrappePoint),
+    );
+    expect(written.features[0].properties).toEqual({ point_type: "circle", radius: 10 });
+  });
+
+  it("does not destroy a drawn Polygon sibling when the point moves", () => {
+    const polygon = {
+      type: "Feature",
+      properties: { name: "zone" },
+      geometry: {
+        type: "Polygon",
+        coordinates: [
+          [
+            [0, 0],
+            [0, 1],
+            [1, 1],
+            [0, 0],
+          ],
+        ],
+      },
+    };
+    const previous = JSON.stringify({
+      type: "FeatureCollection",
+      features: [polygon, JSON.parse(stockFrappePoint).features[0]],
+    });
+    const written = JSON.parse(formatGeoValue({ lat: 9, lng: 8 }, "featurecollection", previous));
+    expect(written.features).toHaveLength(2);
+    expect(written.features[0]).toEqual(polygon);
+    expect(written.features[1].geometry.coordinates).toEqual([8, 9]);
+  });
+
+  it("appends a plain marker when the collection had no Point to move", () => {
+    const previous = JSON.stringify({ type: "FeatureCollection", features: [] });
+    const written = JSON.parse(formatGeoValue({ lat: 9, lng: 8 }, "featurecollection", previous));
+    expect(written.features).toEqual([
+      { type: "Feature", properties: {}, geometry: { type: "Point", coordinates: [8, 9] } },
+    ]);
+  });
+
+  it("round-trips: parse a stock value, write it back, parse again", () => {
+    const read = parseGeoValue(stockFrappePoint);
+    expect(read).toEqual({ lat: 37.7749, lng: -122.4194 });
+    const written = formatGeoValue(
+      read as { lat: number; lng: number },
+      detectGeoShape(stockFrappePoint),
+      stockFrappePoint,
+    );
+    expect(JSON.parse(written)).toEqual(JSON.parse(stockFrappePoint));
+  });
+});

package/src/fields/Geolocation/geoValue.ts

@@ -0,0 +1,149 @@
+/**
+ * Geolocation value shapes (MPO-100).
+ *
+ * Stock Frappe stores the Geolocation fieldtype as a GeoJSON FeatureCollection
+ * STRING — `geolocation.js` does
+ * `set_value(JSON.stringify(this.editableLayers.toGeoJSON()))`, where Leaflet's
+ * `toGeoJSON()` emits `[lng, lat]` coordinate pairs.
+ *
+ * This repo's field stores the compact `{"lat":n,"lng":n}` object. Both are read
+ * here so a doc created in stock Frappe renders instead of coming up empty.
+ * `detectGeoShape` reports which shape a stored value used, so the write path
+ * can persist back in the shape the doc arrived in.
+ */
+
+export interface GeoValue {
+  lat: number;
+  lng: number;
+}
+
+/** Which on-disk shape a stored Geolocation value used. */
+export type GeoShape = "latlng" | "featurecollection";
+
+interface GeoJsonPoint {
+  type: "Point";
+  coordinates: [number, number];
+}
+
+function isFiniteNumber(n: unknown): n is number {
+  return typeof n === "number" && Number.isFinite(n);
+}
+
+function parseJson(value: string | undefined): unknown {
+  if (!value || !value.trim()) return null;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Pull the first Point geometry out of a stock Frappe FeatureCollection.
+ * Frappe also stores Polygon/LineString features (drawn shapes); those carry no
+ * single coordinate for our lat/lng field, so they are skipped rather than
+ * approximated.
+ */
+function firstPoint(parsed: unknown): GeoJsonPoint | null {
+  if (!parsed || typeof parsed !== "object") return null;
+  const collection = parsed as { type?: unknown; features?: unknown };
+  if (collection.type !== "FeatureCollection" || !Array.isArray(collection.features)) return null;
+  for (const feature of collection.features) {
+    if (!feature || typeof feature !== "object") continue;
+    const geometry = (feature as { geometry?: unknown }).geometry as
+      | { type?: unknown; coordinates?: unknown }
+      | undefined;
+    if (!geometry || geometry.type !== "Point") continue;
+    const coordinates = geometry.coordinates;
+    if (!Array.isArray(coordinates) || coordinates.length < 2) continue;
+    const [lng, lat] = coordinates;
+    if (!isFiniteNumber(lng) || !isFiniteNumber(lat)) continue;
+    return { type: "Point", coordinates: [lng, lat] };
+  }
+  return null;
+}
+
+/**
+ * Read a stored Geolocation value in EITHER shape. Returns null when the value
+ * is empty, unparseable, or carries no usable point.
+ */
+export function parseGeoValue(value: string | undefined): GeoValue | null {
+  const parsed = parseJson(value);
+  if (!parsed || typeof parsed !== "object") return null;
+
+  const native = parsed as Record<string, unknown>;
+  if (isFiniteNumber(native.lat) && isFiniteNumber(native.lng)) {
+    return { lat: native.lat, lng: native.lng };
+  }
+
+  const point = firstPoint(parsed);
+  if (point) {
+    const [lng, lat] = point.coordinates;
+    return { lat, lng };
+  }
+  return null;
+}
+
+/**
+ * Report which shape a stored value used, so an edit can be written back in the
+ * same shape. Unreadable values report the repo-native shape.
+ */
+export function detectGeoShape(value: string | undefined): GeoShape {
+  const parsed = parseJson(value);
+  if (!parsed || typeof parsed !== "object") return "latlng";
+  if ((parsed as { type?: unknown }).type === "FeatureCollection") return "featurecollection";
+  return "latlng";
+}
+
+interface GeoJsonFeature {
+  type: "Feature";
+  properties: Record<string, unknown>;
+  geometry: { type?: unknown; coordinates?: unknown } | null;
+}
+
+function asFeatures(parsed: unknown): GeoJsonFeature[] {
+  if (!parsed || typeof parsed !== "object") return [];
+  const collection = parsed as { type?: unknown; features?: unknown };
+  if (collection.type !== "FeatureCollection" || !Array.isArray(collection.features)) return [];
+  return collection.features.filter(
+    (feature): feature is GeoJsonFeature => !!feature && typeof feature === "object",
+  );
+}
+
+function isPointFeature(feature: GeoJsonFeature): boolean {
+  return !!feature.geometry && (feature.geometry as { type?: unknown }).type === "Point";
+}
+
+/**
+ * Serialise coordinates back to disk in the shape the document arrived in.
+ *
+ * `latlng` emits this repo's compact `{"lat":n,"lng":n}`. `featurecollection`
+ * emits a stock-Frappe GeoJSON FeatureCollection with `[lng, lat]` ordering, so
+ * `geolocation.js` reads the edit back.
+ *
+ * `previous` (the value being replaced) is preserved as far as it can be: the
+ * first Point feature is moved in place and keeps its `properties` (Frappe
+ * writes `point_type`/`radius` there for circles), and any Polygon/LineString
+ * features the user drew in Frappe survive a coordinate edit untouched. With no
+ * Point feature to move, one is appended with the empty `properties` a plain
+ * `L.marker` serialises to.
+ */
+export function formatGeoValue(coordinates: GeoValue, shape: GeoShape, previous?: string): string {
+  if (shape !== "featurecollection") return JSON.stringify(coordinates);
+
+  const point = {
+    type: "Point" as const,
+    coordinates: [coordinates.lng, coordinates.lat] as [number, number],
+  };
+  const existing = asFeatures(parseJson(previous));
+  let moved = false;
+  const features = existing.map((feature) => {
+    if (moved || !isPointFeature(feature)) return feature;
+    moved = true;
+    return { ...feature, geometry: point };
+  });
+  if (!moved) {
+    features.push({ type: "Feature", properties: {}, geometry: point });
+  }
+  return JSON.stringify({ type: "FeatureCollection", features });
+}

package/src/fields/Geolocation/index.tsx

@@ -9,6 +9,7 @@ import { Button } from "../../Button";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { FloatingPanel } from "../../FloatingPanel";
 import { GeolocationMap } from "./GeolocationMap";
+import { detectGeoShape, formatGeoValue, type GeoValue, parseGeoValue } from "./geoValue";
 import { Input as InputParts } from "../../InputParts";
 import { Skeleton } from "../../Skeleton";
 import {
@@ -27,11 +28,6 @@ import {
 } from "../../shared/utils";
 import type { AnyFormApi } from "../../types";
 
-interface GeoValue {
-  lat: number;
-  lng: number;
-}
-
 type LocatePhase = "idle" | "locating" | "error";
 
 /**
@@ -79,18 +75,6 @@ function mapGeolocationError(
   return err.message || t("Failed to get location");
 }
 
-function parseGeoValue(value: string | undefined): GeoValue | null {
-  if (!value || !value.trim()) return null;
-  try {
-    const parsed = JSON.parse(value) as Record<string, unknown>;
-    if (typeof parsed.lat !== "number" || typeof parsed.lng !== "number") return null;
-    if (!Number.isFinite(parsed.lat) || !Number.isFinite(parsed.lng)) return null;
-    return { lat: parsed.lat, lng: parsed.lng };
-  } catch {
-    return null;
-  }
-}
-
 function clampLat(val: number): number {
   return Math.max(-90, Math.min(90, val));
 }
@@ -639,6 +623,9 @@ export function Geolocation({
   const [preflightError, setPreflightError] = useState<string | undefined>();
   const preflightingRef = useRef(false);
   const onValueChangeRef = useRef<(value: string) => void>(() => {});
+  // MPO-100: the value being replaced, so an async locate writes back in the
+  // shape the doc arrived in instead of forcing this repo's compact shape.
+  const currentValueRef = useRef<string>("");
 
   const requestPosition = useCallback(() => {
     if (!navigator?.geolocation) {
@@ -652,7 +639,8 @@ export function Geolocation({
       (position) => {
         const lat = clampLat(position.coords.latitude);
         const lng = clampLng(position.coords.longitude);
-        onValueChangeRef.current(JSON.stringify({ lat, lng }));
+        const previous = currentValueRef.current;
+        onValueChangeRef.current(formatGeoValue({ lat, lng }, detectGeoShape(previous), previous));
         setLocatePhase("idle");
         setLocateError(null);
       },
@@ -691,15 +679,18 @@ export function Geolocation({
   const makeHandlers = useCallback(
     (currentValue: string, onValueChange: (value: string) => void) => {
       onValueChangeRef.current = onValueChange;
+      currentValueRef.current = currentValue;
       const coordinates = parseGeoValue(currentValue);
+      const shape = detectGeoShape(currentValue);
+      const write = (lat: number, lng: number) => {
+        onValueChange(
+          formatGeoValue({ lat: clampLat(lat), lng: clampLng(lng) }, shape, currentValue),
+        );
+      };
       return {
         coordinates,
-        onCommitCoordinates: (lat: number, lng: number) => {
-          onValueChange(JSON.stringify({ lat: clampLat(lat), lng: clampLng(lng) }));
-        },
-        onMapChange: (lat: number, lng: number) => {
-          onValueChange(JSON.stringify({ lat: clampLat(lat), lng: clampLng(lng) }));
-        },
+        onCommitCoordinates: write,
+        onMapChange: write,
         onUseMyLocation: () => {
           void startLocate();
         },

package/src/fields/Icon/Icon.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof Icon> = {
     docs: {
       description: {
         component:
-          "Icon picker over FloatingPanel. Options come from the DG-IDN-06 drawn set. Field-shaped panel matches the trigger width.",
+          "Icon picker over FloatingPanel. Options come from the DG-IDN-06 drawn set. Field-shaped panel uses widthMode at-least-trigger.",
       },
     },
   },

package/src/fields/Icon/index.tsx

@@ -239,6 +239,7 @@ function IconControl({
       disabled={disabled}
       scrollable
       sizing="fill"
+      widthMode="at-least-trigger"
       triggerA11y={{
         label: a11yLabel || t("Icon"),
         value: value || placeholder,