@page-speed/maps 0.1.5 → 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: [
@@ -526,10 +570,7 @@ function resolveActionKey(action, index) {
   }
   return `action:${index}`;
 }
-var FallbackIcon = ({
-  size = 20,
-  className
-}) => /* @__PURE__ */ jsx(
+var FallbackIcon = ({ size = 20, className }) => /* @__PURE__ */ jsx(
   "svg",
   {
     width: size,
@@ -648,7 +689,7 @@ function MarkerMediaCarousel({
         {
           type: "button",
           "aria-label": "Show previous media",
-          className: "absolute left-4 top-1/2 inline-flex size-10 -translate-y-1/2 items-center justify-center rounded-2xl bg-card text-card-foreground shadow-lg border-4 border-black hover:border-white hover:bg-black hover:text-white transition-all duration-500 z-[2]",
+          className: "absolute left-4 top-1/2 inline-flex size-10 -translate-y-1/2 items-center justify-center rounded-2xl bg-card text-card-foreground shadow-lg border-4 border-black hover:border-white hover:bg-black hover:text-white transition-all duration-500 z-2",
           onClick: () => {
             setActiveIndex(
               (current) => (current - 1 + totalItems) % totalItems
@@ -781,10 +822,16 @@ function GeoMap({
   const firstCoordinate = React3.useMemo(() => {
     const allCoords = [];
     normalizedStandaloneMarkers.forEach((marker) => {
-      allCoords.push({ latitude: marker.latitude, longitude: marker.longitude });
+      allCoords.push({
+        latitude: marker.latitude,
+        longitude: marker.longitude
+      });
     });
     normalizedClusters.forEach((cluster) => {
-      allCoords.push({ latitude: cluster.latitude, longitude: cluster.longitude });
+      allCoords.push({
+        latitude: cluster.latitude,
+        longitude: cluster.longitude
+      });
     });
     if (allCoords.length > 0) {
       const sum = allCoords.reduce(
@@ -810,10 +857,16 @@ function GeoMap({
     }
     const allCoords = [];
     normalizedStandaloneMarkers.forEach((marker) => {
-      allCoords.push({ latitude: marker.latitude, longitude: marker.longitude });
+      allCoords.push({
+        latitude: marker.latitude,
+        longitude: marker.longitude
+      });
     });
     normalizedClusters.forEach((cluster) => {
-      allCoords.push({ latitude: cluster.latitude, longitude: cluster.longitude });
+      allCoords.push({
+        latitude: cluster.latitude,
+        longitude: cluster.longitude
+      });
     });
     if (allCoords.length === 0) {
       return DEFAULT_VIEW_STATE.zoom;
@@ -1041,7 +1094,7 @@ function GeoMap({
         "div",
         {
           className: cn(
-            "relative w-[min(24rem,calc(100vw-2rem))] 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: [
@@ -1115,7 +1168,7 @@ function GeoMap({
         "div",
         {
           className: cn(
-            "relative w-[min(24rem,calc(100vw-2rem))] 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: [
@@ -1153,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",
     {
@@ -1160,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",
           {