@page-speed/maps 0.2.2 → 0.2.4

package/dist/components/geo-map.cjs

@@ -704,8 +704,9 @@ function MarkerActions({ actions }) {
       ...rest
     } = action;
     const buttonStyles = cn(
-      "inline-flex items-center gap-2 px-4 py-2 rounded-md font-medium transition-colors",
-      variant === "outline" ? "border border-border bg-background hover:bg-muted" : "bg-primary text-primary-foreground hover:bg-primary/90",
+      "gap-2 px-4 py-2 rounded-md font-medium transition-colors duration-500",
+      "flex justify-center items-center",
+      variant === "outline" ? "border border-border bg-card text-card-foreground hover:bg-primary hover:text-primary-foreground" : "bg-primary text-primary-foreground hover:bg-primary/90",
       size === "sm" && "text-sm px-3 py-1.5",
       size === "icon" && "p-2",
       actionClassName
@@ -809,7 +810,7 @@ function MarkerMediaCarousel({
           children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { name: "lucide/arrow-right", size: 18 })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1.5 z-[2]", children: mediaItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1.5 z-2", children: mediaItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
@@ -1038,24 +1039,44 @@ function GeoMap({
     longitude: defaultViewState?.longitude ?? firstCoordinate.longitude,
     zoom: defaultViewState?.zoom ?? calculatedZoom
   });
-  const [dynamicPanelPosition, setDynamicPanelPosition] = React3__namespace.useState(
-    panelPosition
+  const [dynamicPanelPosition, setDynamicPanelPosition] = React3__namespace.useState(panelPosition);
+  const viewStateRef = React3__namespace.useRef(
+    uncontrolledViewState
   );
-  const viewStateRef = React3__namespace.useRef(uncontrolledViewState);
   React3__namespace.useEffect(() => {
     if (!viewState && !defaultViewState) {
-      setUncontrolledViewState({
-        latitude: firstCoordinate.latitude,
-        longitude: firstCoordinate.longitude,
-        zoom: calculatedZoom
+      setUncontrolledViewState((prev) => {
+        if (prev.latitude === firstCoordinate.latitude && prev.longitude === firstCoordinate.longitude && prev.zoom === calculatedZoom) {
+          return prev;
+        }
+        return {
+          latitude: firstCoordinate.latitude,
+          longitude: firstCoordinate.longitude,
+          zoom: calculatedZoom
+        };
       });
     }
-  }, [firstCoordinate, calculatedZoom, viewState, defaultViewState]);
+  }, [
+    // Use primitive values instead of objects to avoid reference changes
+    firstCoordinate.latitude,
+    firstCoordinate.longitude,
+    calculatedZoom,
+    viewState,
+    defaultViewState
+  ]);
   const isControlledViewState = viewState !== void 0;
   const resolvedViewState = isControlledViewState ? viewState : uncontrolledViewState;
   React3__namespace.useEffect(() => {
     viewStateRef.current = resolvedViewState || uncontrolledViewState;
-  }, [resolvedViewState, uncontrolledViewState]);
+  }, [
+    // Use primitive values to avoid reference changes
+    resolvedViewState?.latitude,
+    resolvedViewState?.longitude,
+    resolvedViewState?.zoom,
+    uncontrolledViewState.latitude,
+    uncontrolledViewState.longitude,
+    uncontrolledViewState.zoom
+  ]);
   const applyViewState = React3__namespace.useCallback(
     (nextState) => {
       if (!isControlledViewState) {
@@ -1094,7 +1115,13 @@ function GeoMap({
       setSelection({ type: "none" });
       onSelectionChange?.({ type: "none" });
     }
-  }, [onSelectionChange, selectedMarker, selection]);
+  }, [
+    // Use primitive values to avoid object reference issues
+    selection.type,
+    selection.markerId,
+    selectedMarker?.id,
+    onSelectionChange
+  ]);
   const emitSelectionChange = React3__namespace.useCallback(
     (nextSelection) => {
       if (nextSelection.type === "none") {
@@ -1389,7 +1416,7 @@ function GeoMap({
     {
       ref: containerRef,
       className: cn(
-        "relative rounded-2xl border border-border bg-background",
+        "relative",
         // Remove overflow-hidden from outer container to allow panel to overflow
         className
       ),
@@ -1404,7 +1431,7 @@ function GeoMap({
           "div",
           {
             className: cn(
-              "w-full rounded-2xl",
+              "w-full",
               // Only apply default height class if mapWrapperClassName not provided
               !mapWrapperClassName && `h-[${calculatedHeight}px]`,
               mapWrapperClassName