@tpzdsp/next-toolkit 1.15.1 → 1.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpzdsp/next-toolkit",
-  "version": "1.15.1",
+  "version": "1.15.2",
   "description": "A reusable React component library for Next.js applications",
   "engines": {
     "node": ">= 24.12.0",

package/src/map/MapComponent.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { memo, useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState, type ReactNode } from 'react';
 
 import { Feature, Map, Overlay, View } from 'ol';
 import { Attribution, ScaleLine, Zoom } from 'ol/control';
@@ -17,6 +17,7 @@ import type { PopupDirection } from '../types/map';
 export type MapComponentProps = {
   osMapsApiKey?: string;
   basePath: string;
+  children?: ReactNode;
 };
 
 const positionTransforms: Record<PopupDirection, string> = {
@@ -43,8 +44,7 @@ const arrowStyles: Record<PopupDirection, string> = {
  *
  * @return {*}
  */
-const MapComponentBase = ({ osMapsApiKey, basePath }: MapComponentProps) => {
-  const [popupFeatures, setPopupFeatures] = useState<Feature[]>([]);
+const MapComponentBase = ({ osMapsApiKey, basePath, children }: MapComponentProps) => {
   const [popupCoordinate, setPopupCoordinate] = useState<number[] | null>(null);
   const [popupPositionClass, setPopupPositionClass] = useState<PopupDirection>('bottom-right');
 
@@ -57,6 +57,8 @@ const MapComponentBase = ({ osMapsApiKey, basePath }: MapComponentProps) => {
     mapConfig: { center, zoom },
     setMap,
     isDrawing,
+    popupFeatures,
+    setPopupFeatures,
   } = useMap();
 
   useEffect(() => {
@@ -187,12 +189,12 @@ const MapComponentBase = ({ osMapsApiKey, basePath }: MapComponentProps) => {
         >
           {popupFeatures.length > 0 ? (
             <Popup
-              features={popupFeatures}
               onClose={closePopup}
               clickedCoord={popupCoordinate}
               arrowClasses={arrowStyles[popupPositionClass]}
-              baseUrl={`${basePath}/sampling-point/`}
-            />
+            >
+              {children}
+            </Popup>
           ) : null}
         </div>
       </div>

package/src/map/MapContext.tsx

@@ -3,6 +3,7 @@
 import type { Dispatch, RefObject, ReactNode, SetStateAction } from 'react';
 import { createContext, useContext, useRef, useState, useMemo, useCallback } from 'react';
 
+import { Feature } from 'ol';
 import type { Coordinate } from 'ol/coordinate';
 import BaseLayer from 'ol/layer/Base';
 import Layer from 'ol/layer/Layer';
@@ -33,6 +34,8 @@ export type MapContextType = {
   setSelectedLayer: Dispatch<SetStateAction<Layer | null>>;
   isDrawing: boolean;
   setIsDrawing: Dispatch<SetStateAction<boolean>>;
+  popupFeatures: Feature[];
+  setPopupFeatures: Dispatch<SetStateAction<Feature[]>>;
 };
 
 type MapProviderProps = {
@@ -60,6 +63,7 @@ export const MapProvider = ({ initialState = {}, children }: MapProviderProps) =
   const [aoi, setAoi] = useState<Coordinate[][] | null>(null);
   const [selectedLayer, setSelectedLayer] = useState<Layer | null>(null);
   const [isDrawing, setIsDrawing] = useState(false);
+  const [popupFeatures, setPopupFeatures] = useState<Feature[]>([]);
 
   const getLayers = useCallback(() => map?.getLayers().getArray(), [map]);
 
@@ -163,6 +167,8 @@ export const MapProvider = ({ initialState = {}, children }: MapProviderProps) =
       setIsDrawing,
       clearLayer,
       resetMap,
+      popupFeatures,
+      setPopupFeatures,
       ...initialState,
     }),
     [
@@ -177,6 +183,7 @@ export const MapProvider = ({ initialState = {}, children }: MapProviderProps) =
       isDrawing,
       clearLayer,
       resetMap,
+      popupFeatures,
       initialState,
     ],
   );

package/src/map/Popup.tsx

@@ -1,27 +1,23 @@
 'use client';
 
-import { Feature } from 'ol';
-import { GoLinkExternal } from 'react-icons/go';
-import { IoMdCloseCircle } from 'react-icons/io';
+import { type ReactNode } from 'react';
 
-import { ExternalLink } from '../components/link/ExternalLink';
+import { IoMdCloseCircle } from 'react-icons/io';
 
 type PopupProps = {
-  features: Feature[];
+  children: ReactNode;
   onClose: () => void;
   clickedCoord: number[] | null;
   arrowClasses: string;
-  baseUrl: string;
 };
 
 export const Popup = ({
-  features,
+  children,
   onClose,
   clickedCoord,
   arrowClasses = 'bottom-left',
-  baseUrl,
 }: PopupProps) => {
-  if (!features.length || !clickedCoord) {
+  if (!clickedCoord) {
     return null;
   }
 
@@ -40,32 +36,7 @@ export const Popup = ({
         className="space-y-2 pt-4 pb-1 overflow-y-auto max-h-[300px] bg-white border border-border
           rounded-lg divide-y divide-gray-300"
       >
-        {features.map((feature) => {
-          const name = feature.get('name');
-          const notation = feature.get('notation');
-          const libraryNotation = feature.get('libraryNotation');
-          const identifier = notation ?? name;
-          const url = libraryNotation
-            ? `${baseUrl}${libraryNotation}/${identifier}`
-            : `${baseUrl}${identifier}`;
-
-          return (
-            <div key={identifier}>
-              <strong>
-                <ExternalLink
-                  href={url}
-                  className="px-4 my-2 text-blue-500 underline flex flex-row gap-1 items-center"
-                >
-                  <span>{name}</span>
-
-                  <span className="flex-none w-5 h-5 flex items-center justify-center">
-                    <GoLinkExternal size={20} className="cursor-pointer" />
-                  </span>
-                </ExternalLink>
-              </strong>
-            </div>
-          );
-        })}
+        {children}
       </div>
 
       <div