@page-speed/maps 0.1.7 → 0.1.9

package/dist/components/geo-map.cjs

@@ -468,53 +468,50 @@ function MapLibre({
     }
     return getMapLibreStyleUrl("osm-bright", stadiaApiKey);
   }, [mapStyle, stadiaApiKey, styleUrl]);
-  const isInIframe = React3__namespace.default.useMemo(() => {
-    if (typeof window === "undefined") return false;
-    try {
-      return window.self !== window.top;
-    } catch {
-      return true;
-    }
-  }, []);
+  const containerRef = React3__namespace.default.useRef(null);
   React3__namespace.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);
+    if (!mapRef.current || !containerRef.current) return;
+    const enforceContainerHeight = () => {
+      const container = containerRef.current;
+      const map = mapRef.current;
+      if (!container || !map) return;
+      const rect = container.getBoundingClientRect();
+      const maxHeight = Math.min(rect.height, window.innerHeight);
+      const canvas = map.getCanvas();
+      if (canvas && canvas.style.height) {
+        const canvasHeight = parseInt(canvas.style.height);
+        if (canvasHeight > maxHeight || canvasHeight > 2e3) {
+          map.resize();
+        }
       }
     };
-    const parentElement = mapRef.current.getContainer().parentElement;
-    if (parentElement) {
-      const resizeObserver = new ResizeObserver(handleResize);
-      resizeObserver.observe(parentElement);
-      return () => {
-        clearTimeout(resizeTimeout);
-        resizeObserver.disconnect();
-      };
+    const interval = setInterval(enforceContainerHeight, 1e3);
+    let resizeObserver = null;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        enforceContainerHeight();
+      });
+      resizeObserver.observe(containerRef.current);
     }
-  }, [isInIframe]);
+    return () => {
+      clearInterval(interval);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ref: containerRef,
       className: joinClassNames("relative w-full h-full", className),
       style: {
         width: "100%",
         height: "100%",
-        // Prevent content from pushing container size in iframes
-        ...isInIframe && { overflow: "hidden", position: "relative" },
+        maxHeight: "100vh",
+        // Prevent excessive height
+        overflow: "hidden",
+        position: "relative",
         ...style
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -528,7 +525,7 @@ function MapLibre({
           onMoveEnd: handleMoveEnd,
           onClick: handleMapClick,
           attributionControl: false,
-          trackResize: !isInIframe,
+          trackResize: true,
           dragRotate: false,
           touchZoomRotate: false,
           children: [
@@ -786,9 +783,25 @@ function GeoMap({
   clearSelectionOnMapClick = true,
   mapChildren,
   optixFlowConfig,
+  mapSize,
   IconComponent = FallbackIcon,
   ImgComponent = FallbackImg
 }) {
+  const [isMobile, setIsMobile] = React3__namespace.useState(false);
+  React3__namespace.useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  const calculatedHeight = React3__namespace.useMemo(() => {
+    if (mapSize) {
+      return isMobile ? mapSize.mobile : mapSize.desktop;
+    }
+    return isMobile ? 420 : 520;
+  }, [mapSize, isMobile]);
   const normalizedStandaloneMarkers = React3__namespace.useMemo(
     () => markers.map((marker, index) => ({
       ...marker,
@@ -897,14 +910,17 @@ function GeoMap({
     const latDiff = Math.max(...lats) - Math.min(...lats);
     const lngDiff = Math.max(...lngs) - Math.min(...lngs);
     const maxDiff = Math.max(latDiff, lngDiff);
-    if (maxDiff > 10) return 3;
-    if (maxDiff > 5) return 5;
-    if (maxDiff > 2) return 7;
-    if (maxDiff > 1) return 9;
-    if (maxDiff > 0.5) return 10;
-    if (maxDiff > 0.1) return 12;
-    return 13;
-  }, [normalizedClusters, normalizedStandaloneMarkers, markerFocusZoom]);
+    const heightFactor = calculatedHeight / 520;
+    const paddingFactor = 0.85;
+    if (maxDiff > 10) return Math.max(2, 3 * heightFactor * paddingFactor);
+    if (maxDiff > 5) return Math.max(4, 5 * heightFactor * paddingFactor);
+    if (maxDiff > 2) return Math.max(6, 7 * heightFactor * paddingFactor);
+    if (maxDiff > 1) return Math.max(8, 9 * heightFactor * paddingFactor);
+    if (maxDiff > 0.5) return Math.max(9, 10 * heightFactor * paddingFactor);
+    if (maxDiff > 0.1) return Math.max(11, 12 * heightFactor * paddingFactor);
+    if (maxDiff > 0.01) return Math.max(12, 13 * heightFactor * paddingFactor);
+    return Math.max(11, 12 * heightFactor * paddingFactor);
+  }, [normalizedClusters, normalizedStandaloneMarkers, markerFocusZoom, calculatedHeight]);
   const [uncontrolledViewState, setUncontrolledViewState] = React3__namespace.useState({
     latitude: defaultViewState?.latitude ?? firstCoordinate.latitude,
     longitude: defaultViewState?.longitude ?? firstCoordinate.longitude,
@@ -1227,37 +1243,38 @@ function GeoMap({
     }
     return null;
   };
-  const isInIframe = React3__namespace.useMemo(() => {
-    if (typeof window === "undefined") return false;
-    try {
-      return window.self !== window.top;
-    } catch {
-      return true;
-    }
-  }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
-        "relative overflow-hidden rounded-2xl border border-border bg-background",
+        "relative rounded-2xl border border-border bg-background",
+        // Remove overflow-hidden from outer container to allow panel to overflow
         className
       ),
       style: {
-        // Use CSS containment to prevent layout shifts in iframes
-        ...isInIframe && { contain: "layout size" }
+        // If className includes height settings, they'll override via CSS specificity
+        height: className?.includes("h-[") || className?.includes("min-h-[") || className?.includes("max-h-[") ? void 0 : `${calculatedHeight}px`,
+        // Explicitly allow overflow for marker panels
+        overflow: "visible"
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn(
-              "w-full",
-              // Default height, can be overridden by mapWrapperClassName
-              mapWrapperClassName || "h-[520px]"
+              "w-full rounded-2xl",
+              // Only apply default height class if mapWrapperClassName not provided
+              !mapWrapperClassName && `h-[${calculatedHeight}px]`,
+              mapWrapperClassName
             ),
             style: {
-              // Ensure proper height containment in iframes
-              ...isInIframe && !mapWrapperClassName && { height: "520px", minHeight: "420px" }
+              // If mapWrapperClassName includes height, let it handle the height
+              height: mapWrapperClassName?.includes("h-[") || mapWrapperClassName?.includes("min-h-[") || mapWrapperClassName?.includes("max-h-[") ? void 0 : `${calculatedHeight}px`,
+              maxHeight: "100vh",
+              // Prevent excessive growth
+              position: "relative",
+              // Keep overflow hidden only on the map wrapper to contain the canvas
+              overflow: "hidden"
             },
             children: /* @__PURE__ */ jsxRuntime.jsx(
               MapLibre,
@@ -1282,6 +1299,10 @@ function GeoMap({
                 geolocateControlPosition,
                 flyToOptions,
                 className: cn("h-full w-full", mapClassName),
+                style: {
+                  // Pass the calculated height to MapLibre for better zoom calculations
+                  height: mapClassName?.includes("h-[") || mapClassName?.includes("min-h-[") || mapClassName?.includes("max-h-[") ? void 0 : `${calculatedHeight}px`
+                },
                 children: mapChildren
               }
             )
@@ -1291,9 +1312,13 @@ function GeoMap({
           "div",
           {
             className: cn(
-              "pointer-events-none absolute z-20",
+              "pointer-events-none absolute z-30",
               PANEL_POSITION_CLASS[panelPosition]
             ),
+            style: {
+              // Ensure panel can overflow and has higher z-index
+              zIndex: 30
+            },
             children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto", children: renderMarkerPanel() })
           }
         ) : null