@mapka/maplibre-gl-sdk 0.16.0 → 0.16.3

package/src/components/PopupContent.css

@@ -1,212 +1,102 @@
-
-/* Mapka Tooltip Styles */
-.mapka-tooltip {
-  border-radius: 12px;
-  overflow: hidden;
-  background: #fff;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-}
-
-.mapka-popup-icon {
-  display: block;
-  fill: none;
-  height: 16px;
-  width: 16px;
-  stroke: currentColor;
-  overflow: visible;
-}
-
-.mapka-popup-icon-sm {
-  height: 12px;
-  width: 12px;
-}
-
-.mapka-popup-icon-star {
-  height: 12px;
-  width: 12px;
-  fill: currentColor;
-  stroke: none;
+/* Mapka Popup Styles */
+.mapka-popup-container {
+  margin-top: -15px;
+  margin-bottom: -15px;
+  margin-left: -10px;
+  margin-right: -10px;
 }
 
-/* Carousel */
-.mapka-popup-carousel {
+.mapka-popup {
   position: relative;
-  width: 100%;
-  height: 200px;
-  overflow: hidden;
-  border-radius: 12px 12px 0 0;
-}
-
-.mapka-popup-carousel-track {
   display: flex;
-  height: 100%;
-  transition: transform 0.3s ease;
-}
-
-.mapka-popup-carousel-image {
-  min-width: 100%;
-  height: 100%;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-.mapka-popup-carousel-actions {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  display: flex;
-  gap: 8px;
-  z-index: 3;
-}
-
-.mapka-popup-action-btn {
-  background: rgba(255, 255, 255, 0.95);
-  border: none;
-  border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
-  transition: background 0.2s ease, transform 0.2s ease;
-  color: #222;
-}
-
-.mapka-popup-action-btn:hover {
+  flex-direction: column;
+  align-items: flex-start;
   background: #fff;
-  transform: scale(1.05);
+  border: 1px solid #dcdfe3;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow:
+    0px 4px 32px -4px rgba(69, 72, 76, 0.12),
+    0px 3px 12px -2px rgba(173, 181, 189, 0.06);
 }
 
-.mapka-popup-carousel-btn {
+.mapka-popup-close-btn {
   position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  background: rgba(255, 255, 255, 0.95);
-  border: none;
-  border-radius: 50%;
-  width: 28px;
-  height: 28px;
-  cursor: pointer;
+  top: 10px;
+  right: 10px;
+  z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 2;
-  transition: background 0.2s ease, transform 0.2s ease;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
-  color: #222;
-}
-
-.mapka-popup-carousel-btn:hover {
-  background: #fff;
-  transform: translateY(-50%) scale(1.05);
-}
-
-.mapka-popup-carousel-prev {
-  left: 12px;
-}
-
-.mapka-popup-carousel-next {
-  right: 12px;
-}
-
-.mapka-popup-dots {
-  position: absolute;
-  bottom: 12px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 6px;
-  z-index: 2;
-}
-
-.mapka-popup-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.6);
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
   border: none;
+  background: rgba(255, 255, 255, 0.8);
   cursor: pointer;
   padding: 0;
-  transition: background 0.2s ease, transform 0.2s ease;
+  color: #4f4f4f;
 }
 
-.mapka-popup-dot:hover {
-  background: rgba(255, 255, 255, 0.8);
-  transform: scale(1.2);
+.mapka-popup-close-btn .mapka-popup-icon {
+  width: 16px;
+  height: 16px;
 }
 
-.mapka-popup-dot-active {
-  background: #fff;
+.mapka-popup-close-btn:hover {
+  background: rgba(255, 255, 255, 0.95);
 }
 
-/* Content */
 .mapka-popup-content {
-  padding: 12px 16px 16px;
-}
-
-.mapka-popup-header {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   align-items: flex-start;
-  gap: 8px;
-  margin-bottom: 4px;
+  gap: 12px;
+  padding: 16px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .mapka-popup-title {
   margin: 0;
-  font-size: 15px;
-  font-weight: 600;
-  color: #222;
-  line-height: 1.3;
-  flex: 1;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 28px;
+  color: #4f4f4f;
 }
 
-
 .mapka-popup-description {
-  margin: 0 0 4px 0;
+  margin: 0;
+  font-weight: 400;
   font-size: 14px;
-  color: #717171;
-  line-height: 1.4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-/* Rows */
-.mapka-popup-rows {
-  margin: 12px 0 0 0;
-  padding: 12px 0 0 0;
-  border-top: 1px solid #ebebeb;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px 16px;
+  line-height: 18px;
+  color: #4f4f4f;
 }
 
-.mapka-popup-row {
-  display: contents;
+.mapka-popup-actions {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  width: 100%;
 }
 
-.mapka-popup-row-label {
-  font-size: 13px;
+.mapka-popup-button-primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  flex: 1;
+  padding: 10px 16px;
+  background: #4f4f4f;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
   font-weight: 500;
-  color: #717171;
-  margin: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  font-size: 14px;
+  line-height: 18px;
+  color: #fff;
 }
 
-.mapka-popup-row-value {
-  font-size: 13px;
-  font-weight: 400;
-  color: #222;
-  margin: 0;
-  text-align: right;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+.mapka-popup-button-primary:hover {
+  background: #3a3a3a;
+}

package/src/components/PopupContent.tsx

@@ -1,197 +1,32 @@
-import { Fragment } from "preact";
-import { useState } from "preact/hooks";
+import type { MouseEventHandler } from "preact";
 import type { MapkaPopupContent } from "../types/popup.js";
+import { CloseIcon } from "./icons/CloseIcon.js";
+import { PopupDataRows } from "./PopupDataRows.js";
+import { ImageCarousel } from "./ImageCarousel.js";
 
 interface PopupProps extends MapkaPopupContent {
   onClose?: () => void;
   closeButton?: boolean;
 }
 
-function HeartIcon({ filled }: { filled?: boolean }) {
-  return (
-    <svg
-      viewBox="0 0 32 32"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      focusable="false"
-      class="mapka-popup-icon"
-    >
-      <path
-        d="M16 28c7-4.73 14-10 14-17a6.98 6.98 0 0 0-7-7c-1.8 0-3.58.68-4.95 2.05L16 8.1l-2.05-2.05a6.98 6.98 0 0 0-9.9 0A6.98 6.98 0 0 0 2 11c0 7 7 12.27 14 17z"
-        fill={filled ? "currentColor" : "none"}
-        stroke="currentColor"
-        stroke-width="2"
-      />
-    </svg>
-  );
-}
-
-function CloseIcon() {
-  return (
-    <svg
-      viewBox="0 0 32 32"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      focusable="false"
-      class="mapka-popup-icon"
-    >
-      <path d="m6 6 20 20M26 6 6 26" fill="none" stroke="currentColor" stroke-width="3" />
-    </svg>
-  );
-}
+function PrimaryButton({ label, onClick }: { label: string; onClick?: () => void }) {
+  const handleClick = (e: Event) => {
+    e.stopPropagation();
+    onClick?.();
+  };
 
-function ChevronLeftIcon() {
   return (
-    <svg
-      viewBox="0 0 32 32"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      focusable="false"
-      class="mapka-popup-icon mapka-popup-icon-sm"
-    >
-      <path
-        d="M20 28 8.7 16.7a1 1 0 0 1 0-1.4L20 4"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="4"
-      />
-    </svg>
+    <button type="button" class="mapka-popup-button-primary" onClick={handleClick}>
+      {label}
+    </button>
   );
 }
 
-function ChevronRightIcon() {
+export function CloseButton({ onClose }: { onClose?: MouseEventHandler<HTMLButtonElement> }) {
   return (
-    <svg
-      viewBox="0 0 32 32"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      focusable="false"
-      class="mapka-popup-icon mapka-popup-icon-sm"
-    >
-      <path
-        d="m12 4 11.3 11.3a1 1 0 0 1 0 1.4L12 28"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="4"
-      />
-    </svg>
-  );
-}
-
-function ImageCarousel({
-  imageUrls,
-  title,
-  onFavorite,
-  id,
-  closeButton,
-  onClose,
-}: {
-  imageUrls: string[];
-  title?: string;
-  closeButton?: boolean;
-  onFavorite?: (id: string) => void;
-  id?: string;
-  onClose?: () => void;
-}) {
-  const [currentIndex, setCurrentIndex] = useState(0);
-
-  const handlePrev = (e: Event) => {
-    e.stopPropagation();
-    setCurrentIndex((prev) => (prev === 0 ? imageUrls.length - 1 : prev - 1));
-  };
-
-  const handleNext = (e: Event) => {
-    e.stopPropagation();
-    setCurrentIndex((prev) => (prev + 1) % imageUrls.length);
-  };
-
-  const handleFavoriteClick = (e: Event) => {
-    e.stopPropagation();
-    if (onFavorite && id) {
-      onFavorite(id);
-    }
-  };
-
-  const handleCloseClick = (e: Event) => {
-    e.stopPropagation();
-    onClose?.();
-  };
-
-  return (
-    <div class="mapka-popup-carousel">
-      <div
-        class="mapka-popup-carousel-track"
-        style={{ transform: `translateX(-${currentIndex * 100}%)` }}
-      >
-        {imageUrls.map((url, index) => (
-          <img
-            key={index}
-            src={url}
-            alt={title || `Image ${index + 1}`}
-            class="mapka-popup-carousel-image"
-          />
-        ))}
-      </div>
-
-      <div class="mapka-popup-carousel-actions">
-        {onFavorite && (
-          <button
-            type="button"
-            class="mapka-popup-action-btn"
-            onClick={handleFavoriteClick}
-            aria-label="Add to favorites"
-          >
-            <HeartIcon />
-          </button>
-        )}
-        {closeButton && (
-          <button
-            type="button"
-            class="mapka-popup-action-btn"
-            onClick={handleCloseClick}
-            aria-label="Close"
-          >
-            <CloseIcon />
-          </button>
-        )}
-      </div>
-
-      {imageUrls.length > 1 && (
-        <Fragment>
-          <button
-            type="button"
-            class="mapka-popup-carousel-btn mapka-popup-carousel-prev"
-            onClick={handlePrev}
-            aria-label="Previous image"
-          >
-            <ChevronLeftIcon />
-          </button>
-          <button
-            type="button"
-            class="mapka-popup-carousel-btn mapka-popup-carousel-next"
-            onClick={handleNext}
-            aria-label="Next image"
-          >
-            <ChevronRightIcon />
-          </button>
-
-          <div class="mapka-popup-dots">
-            {imageUrls.map((_, index) => (
-              <button
-                key={index}
-                type="button"
-                class={`mapka-popup-dot ${index === currentIndex ? "mapka-popup-dot-active" : ""}`}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setCurrentIndex(index);
-                }}
-                aria-label={`Go to image ${index + 1}`}
-              />
-            ))}
-          </div>
-        </Fragment>
-      )}
-    </div>
+    <button type="button" class="mapka-popup-close-btn" onClick={onClose} aria-label="Close">
+      <CloseIcon />
+    </button>
   );
 }
 
@@ -200,38 +35,33 @@ export function PopupContent({
   description,
   rows,
   closeButton,
-  imageUrls,
-  onFavorite,
+  imageUrls = [],
+  primaryAction,
   onClose,
 }: PopupProps) {
   const hasImages = imageUrls && imageUrls.length > 0;
   const hasRows = rows && rows.length > 0;
 
+  const handleCloseClick = (e: Event) => {
+    e.stopPropagation();
+    onClose?.();
+  };
+
   return (
-    <div class="mapka-tooltip">
-      {hasImages && (
-        <ImageCarousel
-          imageUrls={imageUrls}
-          title={title}
-          closeButton={closeButton}
-          onFavorite={onFavorite}
-          onClose={onClose}
-        />
-      )}
+    <div class="mapka-popup">
+      {closeButton && <CloseButton onClose={handleCloseClick} />}
+      {hasImages && <ImageCarousel imageUrls={imageUrls} title={title} />}
 
       <div class="mapka-popup-content">
         {title && <h3 class="mapka-popup-title">{title}</h3>}
         {description && <p class="mapka-popup-description">{description}</p>}
 
-        {hasRows && (
-          <dl class="mapka-popup-rows">
-            {rows.map((row, index) => (
-              <div key={index} class="mapka-popup-row">
-                <dt class="mapka-popup-row-label">{row.name}</dt>
-                <dd class="mapka-popup-row-value">{row.value != null ? String(row.value) : "—"}</dd>
-              </div>
-            ))}
-          </dl>
+        {hasRows && <PopupDataRows rows={rows} />}
+
+        {primaryAction && (
+          <div class="mapka-popup-actions">
+            <PrimaryButton label={primaryAction.label} onClick={primaryAction.onClick} />
+          </div>
         )}
       </div>
     </div>

package/src/components/PopupDataRows.css

@@ -0,0 +1,41 @@
+.mapka-popup-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  width: 100%;
+}
+
+.mapka-popup-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+  height: 30px;
+  padding: 0 8px;
+  border-radius: 6px;
+}
+
+.mapka-popup-row-label {
+  flex: 1;
+  margin: 0;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #4f4f4f;
+}
+
+.mapka-popup-row-value {
+  flex: 1;
+  margin: 0;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #4f4f4f;
+}
+
+.mapka-popup-row-divider {
+  height: 0;
+  border-bottom: 1px solid #e0e0e0;
+  width: 100%;
+}

package/src/components/PopupDataRows.tsx

@@ -0,0 +1,39 @@
+import type { MapkaPopupRow } from "../types/popup.js";
+
+export function displayRowValue(value: unknown) {
+  if (value == null) {
+    return "-";
+  }
+
+  if (typeof value === "number") {
+    return value.toLocaleString();
+  }
+  if (typeof value === "boolean") {
+    return value ? "true" : "false";
+  }
+  if (typeof value === "object") {
+    return JSON.stringify(value);
+  }
+
+  return value;
+}
+
+export function displayRowName(name: string) {
+  return name;
+}
+
+export function PopupDataRows({ rows }: { rows: MapkaPopupRow[] }) {
+  return (
+    <dl class="mapka-popup-rows">
+      {rows.map((row, index) => (
+        <>
+          {index > 0 && <div class="mapka-popup-row-divider" />}
+          <div key={index} class="mapka-popup-row">
+            <dt class="mapka-popup-row-label">{displayRowName(row.name)}</dt>
+            <dd class="mapka-popup-row-value">{displayRowValue(row.value)}</dd>
+          </div>
+        </>
+      ))}
+    </dl>
+  );
+}

package/src/components/PopupList.css

@@ -0,0 +1,24 @@
+.mapka-popup-list-wrapper {
+  width: 100%;
+  overflow-y: auto;
+}
+
+.mapka-popup-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+  max-height: 265px;
+  padding: 8px 8px 24px;
+  box-sizing: border-box;
+}
+
+.mapka-popup-list-gradient {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 54px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
+  pointer-events: none;
+}

package/src/components/PopupList.tsx

@@ -0,0 +1,27 @@
+import type { MapkaPopupOptionsResolved } from "../types/popup.js";
+import { PopupListItem } from "./PopupListItem.js";
+
+interface PopupCollectionProps {
+  items: MapkaPopupOptionsResolved[];
+}
+
+export function PopupCustomElement({ popup }: { popup: HTMLElement }) {
+  return popup;
+}
+
+export function PopupList({ items }: PopupCollectionProps) {
+  return (
+    <div class="mapka-popup-list-wrapper">
+      <div class="mapka-popup-list">
+        {items.map(({ content, id }) =>
+          content instanceof HTMLElement ? (
+            <PopupCustomElement key={id} popup={content} />
+          ) : (
+            <PopupListItem key={id} popup={content} />
+          ),
+        )}
+      </div>
+      <div class="mapka-popup-list-gradient" />
+    </div>
+  );
+}