@tpzdsp/next-toolkit 1.15.0 → 1.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpzdsp/next-toolkit",
-  "version": "1.15.0",
+  "version": "1.15.1",
   "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

@@ -2,7 +2,7 @@
 
 import { memo, useEffect, useRef, useState } 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,7 +11,7 @@ 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 = {
@@ -44,7 +44,7 @@ const arrowStyles: Record<PopupDirection, string> = {
  * @return {*}
  */
 const MapComponentBase = ({ osMapsApiKey, basePath }: MapComponentProps) => {
-  const [popupFeatures, setPopupFeatures] = useState([]);
+  const [popupFeatures, setPopupFeatures] = useState<Feature[]>([]);
   const [popupCoordinate, setPopupCoordinate] = useState<number[] | null>(null);
   const [popupPositionClass, setPopupPositionClass] = useState<PopupDirection>('bottom-right');
 
@@ -117,17 +117,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
         }
       });
     });

package/src/map/Popup.tsx

@@ -41,13 +41,16 @@ export const Popup = ({
           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}`;
+          const libraryNotation = feature.get('libraryNotation');
+          const identifier = notation ?? name;
+          const url = libraryNotation
+            ? `${baseUrl}${libraryNotation}/${identifier}`
+            : `${baseUrl}${identifier}`;
 
           return (
-            <div key={id}>
+            <div key={identifier}>
               <strong>
                 <ExternalLink
                   href={url}