@mapka/maplibre-gl-sdk 0.16.3 → 0.16.4

package/src/components/PopupList.tsx

@@ -1,5 +1,9 @@
+import { useState } from "preact/hooks";
 import type { MapkaPopupOptionsResolved } from "../types/popup.js";
-import { PopupListItem } from "./PopupListItem.js";
+import { PopupContent } from "./PopupContent.js";
+import { ChevronUpIcon } from "./icons/ChevronUpIcon.js";
+import { ChevronDownIcon } from "./icons/ChevronDownIcon.js";
+import { noop } from "es-toolkit";
 
 interface PopupCollectionProps {
   items: MapkaPopupOptionsResolved[];
@@ -9,19 +13,90 @@ export function PopupCustomElement({ popup }: { popup: HTMLElement }) {
   return popup;
 }
 
+interface PopupListNavProps {
+  index: number;
+  total: number;
+  onPrev: (e: Event) => void;
+  onNext: (e: Event) => void;
+}
+
+function PopupListNav({ index, total, onPrev, onNext }: PopupListNavProps) {
+  const isFirst = index === 0;
+  const isLast = index === total - 1;
+
+  return (
+    <div class="mapka-popup-list-nav">
+      <button
+        type="button"
+        class="mapka-popup-list-nav-btn"
+        onClick={onPrev}
+        disabled={isFirst}
+        aria-label="Previous popup"
+      >
+        <ChevronUpIcon />
+      </button>
+      <div class="mapka-popup-list-nav-counter">
+        <span>{index + 1}</span>
+        <span class="mapka-popup-list-nav-counter-divider" />
+        <span>{total}</span>
+      </div>
+      <button
+        type="button"
+        class="mapka-popup-list-nav-btn"
+        onClick={onNext}
+        disabled={isLast}
+        aria-label="Next popup"
+      >
+        <ChevronDownIcon />
+      </button>
+    </div>
+  );
+}
+
 export function PopupList({ items }: PopupCollectionProps) {
+  const [index, setIndex] = useState(0);
+  const safeIndex = Math.min(index, items.length - 1);
+
+  const handlePrev = (e: Event) => {
+    e.stopPropagation();
+    if (safeIndex > 0) {
+      setIndex(safeIndex - 1);
+    }
+  };
+
+  const handleNext = (e: Event) => {
+    e.stopPropagation();
+    if (safeIndex < items.length - 1) {
+      setIndex(safeIndex + 1);
+    }
+  };
+  const { id, content } = items[safeIndex];
   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} />
-          ),
+        {content instanceof HTMLElement ? (
+          <PopupCustomElement key={id} popup={content} />
+        ) : (
+          <PopupContent
+            key={id}
+            title={content.title}
+            description={content.description}
+            rows={content.rows}
+            imageUrls={content.imageUrls}
+            primaryAction={content.primaryAction}
+            closeButton={false}
+            onClose={noop}
+          />
         )}
       </div>
-      <div class="mapka-popup-list-gradient" />
+      {items.length > 1 && (
+        <PopupListNav
+          index={safeIndex}
+          total={items.length}
+          onPrev={handlePrev}
+          onNext={handleNext}
+        />
+      )}
     </div>
   );
 }

package/src/components/icons/ChevronDownIcon.tsx

@@ -0,0 +1,20 @@
+export function ChevronDownIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      class="mapka-popup-icon mapka-popup-icon-sm"
+    >
+      <path
+        d="M3 6 7.3 10.3a1 1 0 0 0 1.4 0L13 6"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/ChevronUpIcon.tsx

@@ -0,0 +1,20 @@
+export function ChevronUpIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      class="mapka-popup-icon mapka-popup-icon-sm"
+    >
+      <path
+        d="M3 10 7.3 5.7a1 1 0 0 1 1.4 0L13 10"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

package/src/controls/MapkaDrawControl.css

@@ -1,5 +1,3 @@
-
-
 /* Draw Control Styles */
 .mapka-draw-control {
   display: flex;
@@ -50,4 +48,4 @@
 .mapka-draw-control-button--clear:hover {
   background-color: #fee2e2;
   color: #dc2626;
-}
+}

package/src/map.ts

@@ -87,7 +87,13 @@ export class MapkaMap extends maplibregl.Map {
   public scrollPopups: boolean = true;
   public popups: MapMapkaPopup[] = [];
 
-  public constructor({ transformRequest, apiKey, maxPopups = 1, scrollPopups = true, ...options }: MapkaMapOptions) {
+  public constructor({
+    transformRequest,
+    apiKey,
+    maxPopups = 1,
+    scrollPopups = true,
+    ...options
+  }: MapkaMapOptions) {
     super({
       ...options,
       transformRequest: createTransformRequest(apiKey, transformRequest),

package/src/modules/popupGroups.ts

@@ -58,7 +58,6 @@ function clustersByLocation(
       });
     }
   }
-
   return clusters;
 }
 

package/src/styles.css

@@ -2,7 +2,6 @@
 
 @import "./components/ImageCarousel.css";
 @import "./components/PopupList.css";
-@import "./components/PopupListItem.css";
 @import "./components/PopupDataRows.css";
 @import "./components/PopupContent.css";
 @import "./controls/MapkaDrawControl.css";

package/lib/components/PopupListItem.d.ts

@@ -1,13 +0,0 @@
-import type { MapkaPopupContent } from "../types/popup.js";
-interface PopupHeaderProps {
-    title?: string;
-    description?: string;
-    imageUrls: string[];
-}
-export declare function PopupHeader({ title, description, imageUrls: [firstImage] }: PopupHeaderProps): import("preact").JSX.Element;
-interface PopupCollectionItemProps {
-    popup: MapkaPopupContent;
-}
-export declare function PopupListItem({ popup: { title, description, rows, imageUrls }, }: PopupCollectionItemProps): import("preact").JSX.Element;
-export {};
-//# sourceMappingURL=PopupListItem.d.ts.map

package/lib/components/PopupListItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PopupListItem.d.ts","sourceRoot":"","sources":["../../src/components/PopupListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,gBAAgB,gCAW5F;AAED,UAAU,wBAAwB;IAChC,KAAK,EAAE,iBAAiB,CAAC;CAC1B;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,IAAS,EAAE,SAAc,EAAE,GACzD,EAAE,wBAAwB,gCAW1B"}

package/lib/components/PopupListItem.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { PopupDataRows } from "./PopupDataRows.js";
-export function PopupHeader({ title, description, imageUrls: [firstImage] }) {
-    return (_jsxs("div", { class: "mapka-popup-list-item-header", children: [firstImage && _jsx("img", { src: firstImage, alt: title, class: "mapka-popup-list-item-image" }), _jsxs("div", { class: "mapka-popup-list-item-info", children: [title && _jsx("span", { class: "mapka-popup-list-item-title", children: title }), description && _jsx("span", { class: "mapka-popup-list-item-description", children: description })] })] }));
-}
-export function PopupListItem({ popup: { title, description, rows = [], imageUrls = [] }, }) {
-    const hasImages = Boolean(imageUrls.length);
-    const hasHeader = Boolean(title || description || hasImages);
-    const hasDataRows = Boolean(rows.length);
-    return (_jsxs("div", { class: "mapka-popup-list-item", children: [hasHeader && _jsx(PopupHeader, { title: title, description: description, imageUrls: imageUrls }), hasDataRows && _jsx(PopupDataRows, { rows: rows })] }));
-}

package/src/components/PopupListItem.css

@@ -1,61 +0,0 @@
-.mapka-popup-list-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  background: #fff;
-  border-radius: 8px;
-  overflow: hidden;
-  cursor: pointer;
-}
-
-.mapka-popup-list-item + .mapka-popup-list-item {
-  border-top: 1px solid #dcdfe3;
-  padding-top: 8px;
-}
-
-.mapka-popup-list-item-header {
-  display: flex;
-  flex-direction: row;
-  height: 90px;
-  overflow: hidden;
-  border-radius: 8px;
-}
-
-.mapka-popup-list-item-image {
-  width: 90px;
-  height: 90px;
-  border-radius: 8px;
-  object-fit: cover;
-  flex-shrink: 0;
-  background: #ccd1d6;
-}
-
-.mapka-popup-list-item-info {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  flex: 1;
-  padding: 4px 4px 4px 8px;
-  min-width: 0;
-}
-
-.mapka-popup-list-item-title {
-  margin: 0;
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 20px;
-  color: #4f4f4f;
-}
-
-.mapka-popup-list-item-description {
-  margin: 0;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-  color: #4f4f4f;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  line-clamp: 3;
-  -webkit-box-orient: vertical;
-}

package/src/components/PopupListItem.tsx

@@ -1,40 +0,0 @@
-import { PopupDataRows } from "./PopupDataRows.js";
-import type { MapkaPopupContent } from "../types/popup.js";
-
-interface PopupHeaderProps {
-  title?: string;
-  description?: string;
-  imageUrls: string[];
-}
-
-export function PopupHeader({ title, description, imageUrls: [firstImage] }: PopupHeaderProps) {
-  return (
-    <div class="mapka-popup-list-item-header">
-      {firstImage && <img src={firstImage} alt={title} class="mapka-popup-list-item-image" />}
-
-      <div class="mapka-popup-list-item-info">
-        {title && <span class="mapka-popup-list-item-title">{title}</span>}
-        {description && <span class="mapka-popup-list-item-description">{description}</span>}
-      </div>
-    </div>
-  );
-}
-
-interface PopupCollectionItemProps {
-  popup: MapkaPopupContent;
-}
-
-export function PopupListItem({
-  popup: { title, description, rows = [], imageUrls = [] },
-}: PopupCollectionItemProps) {
-  const hasImages = Boolean(imageUrls.length);
-  const hasHeader = Boolean(title || description || hasImages);
-  const hasDataRows = Boolean(rows.length);
-
-  return (
-    <div class="mapka-popup-list-item">
-      {hasHeader && <PopupHeader title={title} description={description} imageUrls={imageUrls} />}
-      {hasDataRows && <PopupDataRows rows={rows} />}
-    </div>
-  );
-}