@multiplatform.one/forms 6.6.0 → 7.0.0

package/dist/cjs/fields/Geolocation/index.cjs

@@ -75,17 +75,17 @@ function mapGeolocationError(err) {
   return err.message || (0, import_t.t)("Failed to get location");
 }
 function parseGeoValue(value) {
+  if (!value || !value.trim()) return null;
   try {
     const parsed = JSON.parse(value);
+    if (typeof parsed.lat !== "number" || typeof parsed.lng !== "number") return null;
+    if (!Number.isFinite(parsed.lat) || !Number.isFinite(parsed.lng)) return null;
     return {
-      lat: typeof parsed.lat === "number" ? parsed.lat : 0,
-      lng: typeof parsed.lng === "number" ? parsed.lng : 0
+      lat: parsed.lat,
+      lng: parsed.lng
     };
   } catch {
-    return {
-      lat: 0,
-      lng: 0
-    };
+    return null;
   }
 }
 function clampLat(val) {
@@ -226,7 +226,8 @@ function ExpandedMapView({
   lng,
   onChange,
   disabled,
-  readOnly
+  readOnly,
+  hasValue
 }) {
   const {
     knobProps
@@ -239,16 +240,21 @@ function ExpandedMapView({
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_GeolocationMap.GeolocationMap, {
       lat,
       lng,
-      delta: 0.05,
+      delta: hasValue ? 0.05 : 40,
       minHeight: 400,
       title: (0, import_t.t)("Location selection"),
       onChange,
       disabled,
-      readOnly
+      readOnly,
+      hasValue
     })
   });
 }
+const overlayFocusRing = (0, import_theme.ensureFocusVisibleRing)({
+  outlineOffset: -2
+});
 function GeoMapSurface({
+  id,
   coordinates,
   onCommitCoordinates,
   onUseMyLocation,
@@ -264,23 +270,44 @@ function GeoMapSurface({
   expandIcon,
   renderMap,
   required,
-  hasError
+  hasError,
+  mapHeight
 }) {
   const [expanded, setExpanded] = (0, import_react2.useState)(false);
   const [coordsOpen, setCoordsOpen] = (0, import_react2.useState)(false);
   const coordsFlushRef = (0, import_react2.useRef)(null);
   const locating = locatePhase === "locating";
-  const locateSurfaceOpen = locatePhase === "locating" || locatePhase === "error";
-  const handleExpand = expandIcon ? () => setExpanded(true) : void 0;
+  const locateErrorOpen = locatePhase === "error";
+  const hasValue = coordinates != null;
+  const mapLat = coordinates?.lat ?? 0;
+  const mapLng = coordinates?.lng ?? 0;
+  const interactive = !disabled && !readOnly;
+  const cappedRadius = (0, import_utils.clampRadiusForLargeComponent)(knobProps.borderRadius.borderRadius);
+  const handleExpand = expandIcon ? () => !disabled && setExpanded(true) : void 0;
   const handleCoordsOpenChange = open => {
     if (!open) {
       coordsFlushRef.current?.();
     }
     setCoordsOpen(open);
   };
+  const handleMapKeyDown = event => {
+    if (!interactive) return;
+    if (event.key === "Enter") {
+      event.preventDefault();
+      setCoordsOpen(true);
+      return;
+    }
+    if (!coordinates) return;
+    const step = event.shiftKey ? 0.01 : 1e-3;
+    let nextLat = coordinates.lat;
+    let nextLng = coordinates.lng;
+    if (event.key === "ArrowUp") nextLat = clampLat(nextLat + step);else if (event.key === "ArrowDown") nextLat = clampLat(nextLat - step);else if (event.key === "ArrowLeft") nextLng = clampLng(nextLng - step);else if (event.key === "ArrowRight") nextLng = clampLng(nextLng + step);else return;
+    event.preventDefault();
+    onMapChange(nextLat, nextLng);
+  };
   const customMap = renderMap ? renderMap({
-    lat: coordinates.lat,
-    lng: coordinates.lng,
+    lat: mapLat,
+    lng: mapLng,
     onChange: onMapChange,
     disabled,
     knobProps
@@ -288,23 +315,41 @@ function GeoMapSurface({
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
       testID: "geolocation-map",
+      id,
       ...knobProps.borderRadius,
       ...knobProps.inputSurface,
-      borderColor: import_colorRamps.formInputColors.border.base,
+      borderRadius: cappedRadius,
+      borderColor: hasError ? import_colorRamps.formCommonColors.error : import_colorRamps.formInputColors.border.base,
       overflow: "hidden",
-      height: 200,
+      height: mapHeight,
       position: "relative",
+      outlineWidth: 0,
+      focusStyle: {
+        outlineWidth: 0
+      },
+      focusVisibleStyle: interactive ? overlayFocusRing : {
+        outlineWidth: 0
+      },
+      ...(interactive && import_tamagui.isWeb ? {
+        tabIndex: 0,
+        role: "application",
+        "aria-label": (0, import_t.t)("Location map"),
+        "aria-valuetext": hasValue ? formatCoordChip(mapLat, mapLng) : (0, import_t.t)("No location set"),
+        onKeyDown: handleMapKeyDown
+      } : {}),
       children: [customMap ?? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_GeolocationMap.GeolocationMap, {
-        lat: coordinates.lat,
-        lng: coordinates.lng,
+        lat: mapLat,
+        lng: mapLng,
+        delta: hasValue ? 0.02 : 40,
         onChange: onMapChange,
         disabled,
-        readOnly
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        readOnly,
+        hasValue
+      }), readOnly ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         position: "absolute",
         top: "$2",
         insetInlineStart: "$2",
-        zIndex: 1,
+        zIndex: 2,
         backgroundColor: "$background",
         opacity: 0.92,
         paddingHorizontal: "$2",
@@ -315,27 +360,13 @@ function GeoMapSurface({
           fontSize: "$1",
           ...knobProps.body,
           color: import_colorRamps.formCommonColors.muted,
-          children: formatCoordChip(coordinates.lat, coordinates.lng)
+          children: hasValue ? formatCoordChip(mapLat, mapLng) : (0, import_t.t)("No location set")
         })
-      }), handleExpand && expandIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         position: "absolute",
         top: "$2",
-        insetInlineEnd: "$2",
-        zIndex: 1,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-          size: "$2",
-          circular: true,
-          onPress: handleExpand,
-          backgroundColor: "$background",
-          opacity: 0.9,
-          "aria-label": (0, import_t.t)("Expand map"),
-          children: expandIcon
-        })
-      }), !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        position: "absolute",
-        bottom: "$2",
         insetInlineStart: "$2",
-        zIndex: 1,
+        zIndex: 2,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
           open: coordsOpen,
           onOpenChange: handleCoordsOpenChange,
@@ -347,16 +378,18 @@ function GeoMapSurface({
             size: "$2",
             disabled,
             backgroundColor: "$background",
-            opacity: 0.9,
+            opacity: 0.92,
+            testID: "geolocation-coords-chip",
             "aria-label": (0, import_t.t)("Edit coordinates"),
+            focusVisibleStyle: overlayFocusRing,
             onPress: import_tamagui.isWeb && !disabled ? () => setCoordsOpen(true) : void 0,
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
-              children: (0, import_t.t)("Coordinates")
+              children: hasValue ? formatCoordChip(mapLat, mapLng) : (0, import_t.t)("Set location")
             })
           }),
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(CoordinatesPanel, {
-            lat: coordinates.lat,
-            lng: coordinates.lng,
+            lat: mapLat,
+            lng: mapLng,
             knobProps,
             required,
             hasError,
@@ -364,35 +397,53 @@ function GeoMapSurface({
             onCommit: onCommitCoordinates
           })
         })
-      }), !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      }), handleExpand && expandIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        position: "absolute",
+        top: "$2",
+        insetInlineEnd: "$2",
+        zIndex: 2,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+          size: "$2",
+          circular: true,
+          disabled,
+          onPress: handleExpand,
+          backgroundColor: "$background",
+          opacity: 0.92,
+          "aria-label": (0, import_t.t)("Expand map"),
+          focusVisibleStyle: overlayFocusRing,
+          children: expandIcon
+        })
+      }), !readOnly && !locateErrorOpen && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         position: "absolute",
         bottom: "$2",
         insetInlineEnd: "$2",
-        zIndex: 1,
+        zIndex: 2,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
           size: "$2",
+          circular: true,
           disabled: disabled || locating,
           onPress: onUseMyLocation,
           backgroundColor: "$background",
-          opacity: 0.9,
+          opacity: 0.92,
           icon: locating ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Spinner, {
             size: "small"
           }) : locationIcon,
           "aria-label": locating ? (0, import_t.t)("Locating") : (0, import_t.t)("Locate"),
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
-            children: locating ? (0, import_t.t)("Locating...") : (0, import_t.t)("Locate")
-          })
+          focusVisibleStyle: overlayFocusRing
         })
-      })]
-    }), locateSurfaceOpen && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-      testID: "geolocation-locate-panel",
-      ...knobProps.borderRadius,
-      ...knobProps.inputSurface,
-      borderColor: import_colorRamps.formInputColors.border.base,
-      padding: "$3",
-      gap: "$3",
-      alignItems: "center",
-      children: locatePhase === "error" ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      }), locateErrorOpen && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        testID: "geolocation-locate-panel",
+        position: "absolute",
+        bottom: "$2",
+        left: "$2",
+        right: "$2",
+        zIndex: 3,
+        ...knobProps.borderRadius,
+        ...knobProps.inputSurface,
+        borderColor: import_colorRamps.formInputColors.border.base,
+        padding: "$3",
+        gap: "$2",
+        alignItems: "center",
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
           ...knobProps.body,
           color: import_colorRamps.formCommonColors.error,
@@ -401,34 +452,30 @@ function GeoMapSurface({
         }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
           gap: "$2",
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-            size: knobProps.sizeToken,
+            size: "$2",
             onPress: onRetryLocate,
             "aria-label": (0, import_t.t)("Retry location"),
             children: (0, import_t.t)("Retry")
           }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-            size: knobProps.sizeToken,
+            size: "$2",
             onPress: onCloseLocate,
             "aria-label": (0, import_t.t)("Close location"),
             children: (0, import_t.t)("Close")
           })]
         })]
-      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        ...knobProps.body,
-        textAlign: "center",
-        opacity: 0.7,
-        children: (0, import_t.t)("Requesting location\u2026")
-      })
+      })]
     }), expandIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_AdaptivePopup.AdaptivePopup, {
       open: expanded,
       onOpenChange: setExpanded,
       title: (0, import_t.t)("Select Location"),
       size: "lg",
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ExpandedMapView, {
-        lat: coordinates.lat,
-        lng: coordinates.lng,
+        lat: mapLat,
+        lng: mapLng,
         onChange: onMapChange,
         disabled,
-        readOnly
+        readOnly,
+        hasValue
       })
     })]
   });
@@ -519,10 +566,7 @@ function Geolocation({
   }, [disabled, readOnly, locatePhase, requestPosition]);
   const makeHandlers = (0, import_react2.useCallback)((currentValue, onValueChange) => {
     onValueChangeRef.current = onValueChange;
-    const coordinates = currentValue ? parseGeoValue(currentValue) : {
-      lat: 0,
-      lng: 0
-    };
+    const coordinates = parseGeoValue(currentValue);
     return {
       coordinates,
       onCommitCoordinates: (lat, lng) => {
@@ -549,6 +593,7 @@ function Geolocation({
       }
     };
   }, [startLocate, requestPosition]);
+  const mapHeight = (0, import_utils.getFieldHeight)(size ?? knobProps.sizeToken, compact ? 4 : 5);
   if (skeleton) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
@@ -558,7 +603,7 @@ function Geolocation({
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
         variant: "rounded",
         width: "100%",
-        height: 200
+        height: mapHeight
       })
     });
   }
@@ -577,6 +622,7 @@ function Geolocation({
       onBlur,
       disabled,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(GeoMapSurface, {
+        id,
         coordinates: handlers.coordinates,
         onCommitCoordinates: handlers.onCommitCoordinates,
         onUseMyLocation: handlers.onUseMyLocation,
@@ -592,7 +638,8 @@ function Geolocation({
         expandIcon,
         renderMap,
         required,
-        hasError: !!displayError
+        hasError: !!displayError,
+        mapHeight
       })
     });
   }
@@ -619,6 +666,7 @@ function Geolocation({
         onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
         disabled,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(GeoMapSurface, {
+          id,
           coordinates: handlers.coordinates,
           onCommitCoordinates: handlers.onCommitCoordinates,
           onUseMyLocation: handlers.onUseMyLocation,
@@ -634,7 +682,8 @@ function Geolocation({
           expandIcon,
           renderMap,
           required,
-          hasError: !!resolvedError
+          hasError: !!resolvedError,
+          mapHeight
         })
       });
     }