@tpzdsp/next-toolkit 1.15.0 → 1.15.2

package/package.json

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

package/src/components/accordion/Accordion.tsx

@@ -11,6 +11,7 @@ type Props = {
   title: string;
   children: ReactNode;
   defaultOpen?: boolean;
+  disabled?: boolean;
 };
 
 export type AccordionProps = ExtendProps<'div', Props>;
@@ -19,6 +20,7 @@ export const Accordion = ({
   title,
   children,
   defaultOpen = false,
+  disabled = false,
   className,
   ...props
 }: AccordionProps) => {
@@ -28,14 +30,25 @@ export const Accordion = ({
   const [isOpen, setIsOpen] = useState(defaultOpen);
 
   return (
-    <div className={cn('flex flex-col border-l-2 border-neutral-100', className)} {...props}>
+    <div
+      className={cn(
+        'flex flex-col border-l-2 border-neutral-100',
+        disabled ? 'opacity-50' : '',
+        className,
+      )}
+      {...props}
+    >
       <button
-        aria-expanded={isOpen}
-        aria-controls={contentId}
-        className="flex justify-between items-center px-2 py-1 bg-[#fefefefe] text-[color:#000000]
-          border-y-2 border-neutral-100 focus-yellow"
+        aria-expanded={disabled ? undefined : isOpen}
+        aria-controls={disabled ? undefined : contentId}
+        disabled={disabled}
+        className={cn(
+          `flex justify-between items-center px-2 py-1 bg-[#fefefefe] text-[color:#000000]
+          border-y-2 border-neutral-100`,
+          disabled ? 'cursor-not-allowed' : 'focus-yellow',
+        )}
         id={buttonId}
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={disabled ? undefined : () => setIsOpen(!isOpen)}
         type="button"
       >
         <span>{title}</span>
@@ -45,14 +58,16 @@ export const Accordion = ({
         </span>
       </button>
 
-      <section
-        id={contentId}
-        aria-labelledby={buttonId}
-        aria-hidden={!isOpen}
-        className={cn('p-2 bg-[#efefef]', isOpen ? 'block' : 'hidden')}
-      >
-        {children}
-      </section>
+      {!disabled ? (
+        <section
+          id={contentId}
+          aria-labelledby={buttonId}
+          aria-hidden={!isOpen}
+          className={cn('p-2 bg-[#efefef]', isOpen ? 'block' : 'hidden')}
+        >
+          {children}
+        </section>
+      ) : null}
     </div>
   );
 };

package/src/map/MapComponent.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { memo, useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState, type ReactNode } from 'react';
 
-import { Map, Overlay, View } from 'ol';
+import { Feature, Map, Overlay, View } from 'ol';
 import { Attribution, ScaleLine, Zoom } from 'ol/control';
 import { fromLonLat } from 'ol/proj';
 
@@ -11,12 +11,13 @@ import { FullScreenControl } from './FullScreenControl';
 import { LayerSwitcherControl } from './LayerSwitcherControl';
 import { useMap } from './MapContext';
 import { Popup } from './Popup';
-import { getPopupPositionClass } from './utils';
+import { getPopupPositionClass, LAYER_NAMES } from './utils';
 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([]);
+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(() => {
@@ -117,17 +119,41 @@ const MapComponentBase = ({ osMapsApiKey, basePath }: MapComponentProps) => {
         return;
       }
 
-      newMap.forEachFeatureAtPixel(event.pixel, (feature) => {
-        const features = feature.get('features');
+      newMap.forEachFeatureAtPixel(event.pixel, (feature, layer) => {
+        const clusterFeatures = feature.get('features');
+        const layerName = (layer as { get(k: string): unknown } | null)?.get('name');
 
-        if (features?.length > 0) {
+        if (clusterFeatures?.length > 0) {
           const coordinate = event.coordinate;
           const direction = getPopupPositionClass(coordinate, newMap);
 
-          setPopupFeatures(features);
+          setPopupFeatures(clusterFeatures);
           setPopupCoordinate(coordinate);
           setPopupPositionClass(direction);
           overlay.setPosition(event.coordinate);
+
+          return true; // stop iteration
+        }
+
+        // Direct feature (e.g. polygon) — only show popup for the sampling points
+        // layer, not boundary or AOI layers which may also have name properties.
+        if (layerName !== LAYER_NAMES.SamplingPoints) {
+          return;
+        }
+
+        const name = feature.get('name');
+        const notation = feature.get('notation');
+
+        if (name || notation) {
+          const coordinate = event.coordinate;
+          const direction = getPopupPositionClass(coordinate, newMap);
+
+          setPopupFeatures([feature as Feature]);
+          setPopupCoordinate(coordinate);
+          setPopupPositionClass(direction);
+          overlay.setPosition(event.coordinate);
+
+          return true; // stop iteration
         }
       });
     });
@@ -163,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,29 +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 id = feature.get('id');
-          const name = feature.get('name');
-          const notation = feature.get('notation');
-          const url = `${baseUrl}${notation}`;
-
-          return (
-            <div key={id}>
-              <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