@alfadocs/ui-kit 1.3.13 → 1.4.0

package/dist/_chunks/map-view-2yZCQW2l.js

@@ -0,0 +1,445 @@
+import { jsx as a, jsxs as g } from "react/jsx-runtime";
+import { forwardRef as Q, useId as W, useMemo as w, useState as N, useEffect as f, useRef as h, useCallback as z, useImperativeHandle as X } from "react";
+import { c } from "./index-D2ZczOXr.js";
+import { useTranslation as L } from "react-i18next";
+import { A as Y, M as ee, a as te, P as se, b as ne, u as oe } from "./index.modern-Zta-A4Jm.js";
+import { B as ae } from "./button-CPGiR_bH.js";
+import { u as re } from "./registry-DvAUVLHh.js";
+import { M as ie } from "./map-pin-BaY37-Km.js";
+import { E as de } from "./external-link-CY6zAXXU.js";
+const le = {
+  id: "map-view",
+  // pan → scroll (viewport move); set_zoom → set_value; select_marker → pick
+  // (NON-persisting marker focus, no value state slot).
+  capabilities: ["scroll", "set_value", "pick"],
+  // Every action routes through the imperative bridge, which only exists
+  // inside the `APIProvider` subtree — and that subtree renders only once
+  // consent is granted (the default is `consentGranted={false}`). Under
+  // the gate all three actions are silent no-ops. `consentGranted` is the
+  // slot that tells an agent so; `center` / `zoom` are read off the live
+  // map because Google clamps zoom and animates pans, so requested is not
+  // applied; `selectedMarkerId` is the only confirmation the host accepted
+  // a `select_marker` proposal.
+  //
+  // A9: marker ids only (`MapMarker.id` is a stable opaque id). Never
+  // `MapMarker.label`, never the `address` prop (consumer-supplied free
+  // text, PII in any patient-address deployment), never `apiKey`.
+  state: {
+    consentGranted: {
+      type: "boolean",
+      descriptionKey: "ui.agent.mapView.state.consentGranted",
+      description: "True when the GDPR consent gate has been passed and the Google Maps subtree is mounted. Read this FIRST — while it is false every action is a silent no-op against a placeholder, and nothing else in the surface says so.",
+      read: (t) => t.isConsentGranted()
+    },
+    markerCount: {
+      type: "number",
+      descriptionKey: "ui.agent.mapView.state.markerCount",
+      description: "Number of markers the consumer passed. Zero means there is nothing for `select_marker` to select. A count only — no ids, labels or positions.",
+      read: (t) => t.getMarkerCount()
+    },
+    selectedMarkerId: {
+      type: "string | null",
+      descriptionKey: "ui.agent.mapView.state.selectedMarkerId",
+      description: "Id of the marker the host currently holds as selected, or null. Selection is fully controlled by the consumer, so `select_marker` only proposes — this slot is the only way to see whether the proposal was accepted.",
+      read: (t) => t.getSelectedMarkerId()
+    },
+    center: {
+      type: "{ lat: number; lng: number } | null",
+      descriptionKey: "ui.agent.mapView.state.center",
+      description: "Live map centre in lat/lng, or null while the map subtree is unmounted (consent not granted). The read-back for `pan_to`.",
+      read: (t) => t.getCenter()
+    },
+    zoom: {
+      type: "number | null",
+      descriptionKey: "ui.agent.mapView.state.zoom",
+      description: "Live zoom level, or null while the map subtree is unmounted. Google clamps zoom to the map type's range, so this is not necessarily the value last passed to `set_zoom`.",
+      read: (t) => t.getZoom()
+    }
+  },
+  actions: {
+    pan_to: {
+      // Ephemeral viewport move, no data loss → read.
+      safety: "read",
+      argsType: "{ position: { lat: number; lng: number } }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          position: {
+            type: "object",
+            properties: {
+              lat: { type: "number", description: "Latitude in degrees." },
+              lng: { type: "number", description: "Longitude in degrees." }
+            },
+            required: ["lat", "lng"]
+          }
+        },
+        required: ["position"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.mapView.actions.panTo",
+      description: "Pan the map to a new centre without changing zoom. Read the `center` slot back to confirm — Google animates the pan, so the applied centre settles after the call.",
+      errors: [
+        "Silent no-op while `consentGranted` is false — there is no map, only the consent placeholder."
+      ],
+      invoke: (t, r) => {
+        t.panTo(r.position);
+      }
+    },
+    set_zoom: {
+      // Ephemeral viewport zoom, no data loss → read.
+      safety: "read",
+      argsType: "{ zoom: number }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          zoom: {
+            type: "number",
+            description: "Zoom level, typical range 1–20."
+          }
+        },
+        required: ["zoom"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.mapView.actions.setZoom",
+      description: "Set the map zoom level (typical range 1–20). Read the `zoom` slot back — Google clamps the request to the map type’s supported range, so requested and applied can differ.",
+      errors: [
+        "Silent no-op while `consentGranted` is false — there is no map, only the consent placeholder.",
+        "Requested zoom is clamped to the map type's range; `zoom` reports what was actually applied."
+      ],
+      invoke: (t, r) => {
+        t.setZoom(r.zoom);
+      }
+    },
+    select_marker: {
+      // Ephemeral marker focus, no data loss → read.
+      safety: "read",
+      argsType: "{ id: string | null }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          id: {
+            type: ["string", "null"],
+            description: "Marker id to select, or null to clear the selection."
+          }
+        },
+        required: ["id"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.mapView.actions.selectMarker",
+      description: "Propose a marker selection by id, or pass null to clear it. Fires the host's `onMarkerClick`; selection is controlled by the host, so read the `selectedMarkerId` slot back to see whether it accepted.",
+      errors: [
+        "Silent no-op while `consentGranted` is false — there is no map, only the consent placeholder.",
+        "The host owns `selectedMarkerId` and may ignore the proposal; `selectedMarkerId` is unchanged when it does."
+      ],
+      invoke: (t, r) => {
+        t.selectMarker(r.id);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "map-view",
+      description: "Marks the element as a kit MapView."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, ce = c(
+  ["ds:relative ds:overflow-hidden ds:block", "ds:bg-[var(--muted)]"].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:[--map-block-size:14rem]",
+        md: "ds:[--map-block-size:20rem]",
+        lg: "ds:[--map-block-size:28rem]",
+        // `fill` defers sizing to the parent. The outer takes
+        // `block-size: 100%` so the inner (also 100%) has something
+        // to inherit from. Use inside a viewport-locked column —
+        // `<PracticeResults variant="map-first">` wires this through
+        // automatically; standalone consumers must give the parent
+        // a constrained block-size or the map collapses to 0.
+        fill: "ds:[block-size:100%]"
+      },
+      surface: {
+        bordered: "ds:rounded-[var(--radius-md)] ds:border ds:border-[color:var(--border)]",
+        elevated: "ds:rounded-[var(--radius-md)] ds:shadow-[var(--shadow-card)] ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2",
+        bare: "ds:rounded-none ds:border-0"
+      }
+    },
+    defaultVariants: { size: "md", surface: "bordered" }
+  }
+), pe = c("ds:block ds:inline-size-full", {
+  variants: {
+    size: {
+      sm: "ds:[block-size:var(--map-block-size)]",
+      md: "ds:[block-size:var(--map-block-size)]",
+      lg: "ds:[block-size:var(--map-block-size)]",
+      fill: "ds:[block-size:100%]"
+    }
+  },
+  defaultVariants: { size: "md" }
+}), me = c(
+  [
+    "ds:absolute ds:inset-0",
+    "ds:flex ds:flex-col ds:items-center ds:justify-center",
+    "ds:gap-[var(--spacing-sm)]",
+    "ds:p-[var(--spacing-md)]",
+    "ds:bg-[var(--muted)] ds:text-[var(--foreground)]",
+    "ds:text-center"
+  ].join(" ")
+), ue = c("type-heading-3 ds:m-0"), R = c(
+  "type-body-sm ds:text-[var(--muted-foreground)] ds:[max-inline-size:28rem] ds:m-0"
+);
+function he({
+  onHandleReady: t,
+  onMarkerSelect: r
+}) {
+  const s = oe();
+  return f(() => {
+    if (s)
+      return t({
+        panTo: (n) => s.panTo(n),
+        setZoom: (n) => s.setZoom(n),
+        selectMarker: (n) => r(n),
+        // Read straight off the live map: Google clamps `setZoom` to the
+        // map type's range and animates `panTo`, so requested and applied
+        // are not the same value.
+        getCenter: () => {
+          var n;
+          return ((n = s.getCenter()) == null ? void 0 : n.toJSON()) ?? null;
+        },
+        getZoom: () => s.getZoom() ?? null
+      }), () => t(null);
+  }, [s, t, r]), null;
+}
+function ge({
+  address: t,
+  description: r,
+  onLoadMap: s,
+  openInGoogleMapsHref: n,
+  consentCta: p
+}) {
+  const { t: l } = L();
+  return /* @__PURE__ */ g("div", { className: me(), "data-testid": "map-view-consent", children: [
+    /* @__PURE__ */ a(
+      ie,
+      {
+        "aria-hidden": "true",
+        className: "ds:size-6 ds:text-[var(--muted-foreground)]"
+      }
+    ),
+    /* @__PURE__ */ a("p", { className: ue(), children: l("mapView.consentTitle") }),
+    t ? /* @__PURE__ */ a(
+      "p",
+      {
+        className: R(),
+        "data-testid": "map-view-address",
+        children: t
+      }
+    ) : null,
+    /* @__PURE__ */ a("p", { className: R(), children: r }),
+    /* @__PURE__ */ g("div", { className: "ds:flex ds:gap-[var(--spacing-sm)] ds:flex-wrap ds:items-center ds:justify-center", children: [
+      p ?? /* @__PURE__ */ a(
+        ae,
+        {
+          type: "button",
+          intent: "primary",
+          size: "sm",
+          onClick: s,
+          "data-testid": "map-view-load-cta",
+          children: l("mapView.consentCta")
+        }
+      ),
+      /* @__PURE__ */ g(
+        "a",
+        {
+          href: n,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)] ds:text-[var(--primary)] ds:underline ds:underline-offset-2",
+          children: [
+            l("mapView.openInGoogleMaps"),
+            /* @__PURE__ */ a(de, { "aria-hidden": "true", className: "ds:size-3" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+const fe = Q(
+  ({
+    id: t,
+    apiKey: r,
+    center: s,
+    zoom: n = 15,
+    markers: p,
+    selectedMarkerId: l,
+    onMarkerClick: i,
+    consentGranted: _ = !1,
+    onConsentRequest: b,
+    address: m,
+    consentDescription: j,
+    consentCta: P,
+    mapId: V,
+    size: I,
+    surface: q,
+    ariaLabel: K,
+    className: A,
+    ...C
+  }, E) => {
+    const { t: y, i18n: H } = L(), M = W(), D = w(
+      () => `map-${M.replace(/[^a-zA-Z0-9-_]/g, "")}`,
+      [M]
+    ), [T, $] = N(!1);
+    f(() => {
+      if (typeof window > "u") return;
+      const e = window.matchMedia("(prefers-reduced-motion: reduce)"), o = () => $(e.matches);
+      return o(), e.addEventListener("change", o), () => e.removeEventListener("change", o);
+    }, []);
+    const B = w(() => `https://www.google.com/maps/search/?api=1&query=${m ? encodeURIComponent(m) : `${s.lat},${s.lng}`}`, [m, s.lat, s.lng]), d = h(null), F = z((e) => {
+      d.current = e;
+    }, []), x = h(!1), S = h(null), Z = h(0), u = z(
+      () => ({
+        panTo: (e) => {
+          var o;
+          return (o = d.current) == null ? void 0 : o.panTo(e);
+        },
+        setZoom: (e) => {
+          var o;
+          return (o = d.current) == null ? void 0 : o.setZoom(e);
+        },
+        selectMarker: (e) => {
+          var o;
+          return (o = d.current) == null ? void 0 : o.selectMarker(e);
+        },
+        // Without `isConsentGranted` an agent has no way to learn that
+        // its pan / zoom / select was swallowed by the GDPR gate rather
+        // than applied: under the default (`consentGranted={false}`) the
+        // whole Maps subtree is unmounted and every action optional-chains
+        // into nothing.
+        isConsentGranted: () => x.current,
+        getCenter: () => {
+          var e;
+          return ((e = d.current) == null ? void 0 : e.getCenter()) ?? null;
+        },
+        getZoom: () => {
+          var e;
+          return ((e = d.current) == null ? void 0 : e.getZoom()) ?? null;
+        },
+        getSelectedMarkerId: () => S.current,
+        getMarkerCount: () => Z.current
+      }),
+      []
+    );
+    X(E, u, [u]);
+    const U = w(
+      () => u(),
+      [u]
+    );
+    re(le, U, t), f(() => {
+      var e;
+      T || (e = d.current) == null || e.panTo(s);
+    }, [s.lat, s.lng, T]), f(() => {
+      var e;
+      (e = d.current) == null || e.setZoom(n);
+    }, [n]);
+    const [J, k] = N(!1), G = _ || J;
+    x.current = G, S.current = l ?? null, Z.current = (p ?? []).length;
+    const O = z(() => {
+      if (b) {
+        b(), k(!0);
+        return;
+      }
+      k(!0);
+    }, [b]);
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        className: ce({ size: I, surface: q, className: A }),
+        "data-component": "map-view",
+        "data-component-id": t ?? D,
+        role: "region",
+        "aria-label": K ?? y("mapView.label"),
+        ...C,
+        children: /* @__PURE__ */ a("div", { className: pe({ size: I }), children: G ? /* @__PURE__ */ a(
+          Y,
+          {
+            apiKey: r,
+            language: H.language,
+            children: /* @__PURE__ */ g(
+              ee,
+              {
+                defaultCenter: s,
+                defaultZoom: n,
+                mapId: V,
+                gestureHandling: "cooperative",
+                disableDefaultUI: !1,
+                onClick: () => i == null ? void 0 : i(null),
+                className: "ds:[inline-size:100%] ds:[block-size:100%]",
+                children: [
+                  /* @__PURE__ */ a(
+                    he,
+                    {
+                      onHandleReady: F,
+                      onMarkerSelect: (e) => i == null ? void 0 : i(e)
+                    }
+                  ),
+                  (p ?? []).map((e) => {
+                    const o = l != null && l === e.id, v = y("mapView.markerLabel", {
+                      label: e.label ?? e.id
+                    });
+                    return V ? /* @__PURE__ */ a(
+                      te,
+                      {
+                        position: e.position,
+                        title: v,
+                        "aria-label": v,
+                        "data-selected": o ? "true" : "false",
+                        onClick: () => i == null ? void 0 : i(e.id),
+                        children: /* @__PURE__ */ a(
+                          se,
+                          {
+                            background: "var(--primary)",
+                            borderColor: "var(--primary)",
+                            glyphColor: "var(--primary-foreground)"
+                          }
+                        )
+                      },
+                      e.id
+                    ) : /* @__PURE__ */ a(
+                      ne,
+                      {
+                        position: e.position,
+                        title: v,
+                        onClick: () => i == null ? void 0 : i(e.id)
+                      },
+                      e.id
+                    );
+                  })
+                ]
+              }
+            )
+          }
+        ) : /* @__PURE__ */ a(
+          ge,
+          {
+            address: m,
+            description: j ?? y("mapView.consentDescription"),
+            onLoadMap: O,
+            consentCta: P,
+            openInGoogleMapsHref: B
+          }
+        ) })
+      }
+    );
+  }
+);
+fe.displayName = "MapView";
+export {
+  fe as M
+};
+//# sourceMappingURL=map-view-2yZCQW2l.js.map