@page-speed/maps 0.1.6 → 0.1.7

package/dist/components/geo-map.js

@@ -447,11 +447,55 @@ function MapLibre({
     }
     return getMapLibreStyleUrl("osm-bright", stadiaApiKey);
   }, [mapStyle, stadiaApiKey, styleUrl]);
+  const isInIframe = React3__default.useMemo(() => {
+    if (typeof window === "undefined") return false;
+    try {
+      return window.self !== window.top;
+    } catch {
+      return true;
+    }
+  }, []);
+  React3__default.useEffect(() => {
+    if (!isInIframe || !mapRef.current) return;
+    let lastHeight = 0;
+    let lastWidth = 0;
+    let resizeTimeout;
+    const handleResize = (entries) => {
+      clearTimeout(resizeTimeout);
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      const widthChanged = Math.abs(width - lastWidth) > 1;
+      const heightChanged = Math.abs(height - lastHeight) > 1;
+      if (widthChanged || heightChanged) {
+        lastWidth = width;
+        lastHeight = height;
+        resizeTimeout = setTimeout(() => {
+          mapRef.current?.resize();
+        }, 250);
+      }
+    };
+    const parentElement = mapRef.current.getContainer().parentElement;
+    if (parentElement) {
+      const resizeObserver = new ResizeObserver(handleResize);
+      resizeObserver.observe(parentElement);
+      return () => {
+        clearTimeout(resizeTimeout);
+        resizeObserver.disconnect();
+      };
+    }
+  }, [isInIframe]);
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: joinClassNames("relative w-full h-full", className),
-      style: { width: "100%", height: "100%", ...style },
+      style: {
+        width: "100%",
+        height: "100%",
+        // Prevent content from pushing container size in iframes
+        ...isInIframe && { overflow: "hidden", position: "relative" },
+        ...style
+      },
       children: /* @__PURE__ */ jsxs(
         Map$1,
         {
@@ -463,7 +507,7 @@ function MapLibre({
           onMoveEnd: handleMoveEnd,
           onClick: handleMapClick,
           attributionControl: false,
-          trackResize: true,
+          trackResize: !isInIframe,
           dragRotate: false,
           touchZoomRotate: false,
           children: [
@@ -1050,7 +1094,7 @@ function GeoMap({
         "div",
         {
           className: cn(
-            "relative w-[320px] overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-2xl",
+            "relative w-80 overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-2xl",
             panelClassName
           ),
           children: [
@@ -1124,7 +1168,7 @@ function GeoMap({
         "div",
         {
           className: cn(
-            "relative w-[320px] overflow-hidden rounded-xl border border-border bg-card text-card-foreground p-4 shadow-2xl",
+            "relative w-80 overflow-hidden rounded-xl border border-border bg-card text-card-foreground p-4 shadow-2xl",
             panelClassName
           ),
           children: [
@@ -1162,6 +1206,14 @@ function GeoMap({
     }
     return null;
   };
+  const isInIframe = React3.useMemo(() => {
+    if (typeof window === "undefined") return false;
+    try {
+      return window.self !== window.top;
+    } catch {
+      return true;
+    }
+  }, []);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1169,33 +1221,51 @@ function GeoMap({
         "relative overflow-hidden rounded-2xl border border-border bg-background",
         className
       ),
+      style: {
+        // Use CSS containment to prevent layout shifts in iframes
+        ...isInIframe && { contain: "layout size" }
+      },
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("h-[520px] w-full", mapWrapperClassName), children: /* @__PURE__ */ jsx(
-          MapLibre,
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            stadiaApiKey,
-            mapStyle,
-            styleUrl,
-            mapLibreCssHref,
-            viewState: resolvedViewState,
-            onViewStateChange: applyViewState,
-            markers: mapMarkers,
-            onClick: (coord) => {
-              onMapClick?.(coord);
-              if (clearSelectionOnMapClick) {
-                clearSelection();
-              }
+            className: cn(
+              "w-full",
+              // Default height, can be overridden by mapWrapperClassName
+              mapWrapperClassName || "h-[520px]"
+            ),
+            style: {
+              // Ensure proper height containment in iframes
+              ...isInIframe && !mapWrapperClassName && { height: "520px", minHeight: "420px" }
             },
-            onMarkerDrag,
-            showNavigationControl,
-            showGeolocateControl,
-            navigationControlPosition,
-            geolocateControlPosition,
-            flyToOptions,
-            className: cn("h-full w-full", mapClassName),
-            children: mapChildren
+            children: /* @__PURE__ */ jsx(
+              MapLibre,
+              {
+                stadiaApiKey,
+                mapStyle,
+                styleUrl,
+                mapLibreCssHref,
+                viewState: resolvedViewState,
+                onViewStateChange: applyViewState,
+                markers: mapMarkers,
+                onClick: (coord) => {
+                  onMapClick?.(coord);
+                  if (clearSelectionOnMapClick) {
+                    clearSelection();
+                  }
+                },
+                onMarkerDrag,
+                showNavigationControl,
+                showGeolocateControl,
+                navigationControlPosition,
+                geolocateControlPosition,
+                flyToOptions,
+                className: cn("h-full w-full", mapClassName),
+                children: mapChildren
+              }
+            )
           }
-        ) }),
+        ),
         selection.type !== "none" ? /* @__PURE__ */ jsx(
           "div",
           {