@tpzdsp/next-toolkit 2.5.1 → 3.1.0

package/src/map/LayerSwitcherPanel.tsx

@@ -1,173 +1,2 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-
-import { FocusTrap } from 'focus-trap-react';
-import BaseLayer from 'ol/layer/Base';
-import { createPortal } from 'react-dom';
-
-import { cn } from '../utils';
-
-type LayerSwitcherPanelProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  layers: BaseLayer[];
-  activeLayerName: string | null;
-  onSelectLayer: (layerName: string) => void;
-  buttonRect: DOMRect | null;
-};
-
-export const LayerSwitcherPanel = ({
-  isOpen,
-  onClose,
-  layers,
-  activeLayerName,
-  onSelectLayer,
-  buttonRect,
-}: LayerSwitcherPanelProps) => {
-  const [isMounted, setIsMounted] = useState(false);
-  const [isTrapActive, setIsTrapActive] = useState(false);
-  const panelRef = useRef<HTMLDivElement>(null);
-  const closeButtonRef = useRef<HTMLButtonElement>(null);
-
-  const handleClose = () => {
-    setIsTrapActive(false);
-    onClose();
-  };
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  useEffect(() => {
-    if (isOpen) {
-      setIsTrapActive(true);
-    } else {
-      setIsTrapActive(false);
-    }
-  }, [isOpen]);
-
-  if (!isMounted || !isOpen) {
-    return <></>;
-  }
-
-  // Calculate position based on button position
-  const top = buttonRect ? buttonRect.bottom + 8 : 118;
-  const right = 48; // 3rem = 48px
-
-  // Calculate max-height to prevent panel from going off-screen
-  // Leave 16px padding at the bottom
-  const maxHeight = buttonRect
-    ? `${window.innerHeight - buttonRect.bottom - 24}px`
-    : 'calc(100vh - 150px)';
-
-  const panelClasses = cn(
-    'fixed bg-white rounded-lg shadow-lg border border-gray-200',
-    'flex flex-col',
-    'p-2 gap-2',
-    'w-[180px] max-w-[250px]',
-    'transition-all duration-300 ease-in-out',
-    'z-[9999]',
-    isOpen ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-full pointer-events-none',
-  );
-
-  const contentClasses = cn(
-    'grid grid-cols-1 gap-2',
-    'flex-1 min-h-0',
-    'overflow-y-auto overflow-x-hidden',
-  );
-
-  return createPortal(
-    <FocusTrap
-      active={isTrapActive}
-      focusTrapOptions={{
-        clickOutsideDeactivates: true,
-        escapeDeactivates: true,
-        onDeactivate: handleClose,
-        returnFocusOnDeactivate: true,
-        initialFocus: false, // Don't auto-focus close button
-        fallbackFocus: () => panelRef.current ?? document.body,
-      }}
-    >
-      {/* We use role="dialog" instead of <dialog> tag for better portal positioning control */}
-      <div
-        ref={panelRef}
-        role="dialog"
-        aria-modal="true"
-        aria-label="Basemap switcher"
-        aria-describedby="layer-switcher-description"
-        style={{ top, right, maxHeight }}
-        className={panelClasses}
-      >
-        {/* Screen reader description */}
-        <div id="layer-switcher-description" className="sr-only">
-          Select a basemap layer. Use arrow keys to navigate between options, Enter or Space to
-          select. Press Escape to close.
-        </div>
-        {/* Header with close button */}
-        <div className="flex justify-end flex-shrink-0">
-          <button
-            ref={closeButtonRef}
-            type="button"
-            onClick={handleClose}
-            aria-label="Close basemap switcher"
-            tabIndex={0}
-            className="w-8 h-8 flex items-center justify-center rounded text-gray-600 hover:bg-focus
-              focus:outline focus:outline-2 focus:outline-focus focus:bg-focus transition-colors"
-          >
-            <span className="text-xl leading-none" aria-hidden="true">
-              &times;
-            </span>
-          </button>
-        </div>
-
-        {/* Content with basemap buttons */}
-        <div className={contentClasses} role="radiogroup" aria-label="Basemap options">
-          {layers.map((layer) => {
-            const name = layer.get('name') as string;
-            const image = layer.get('image') as string;
-            const isActive = name === activeLayerName;
-
-            return (
-              <button
-                key={name}
-                type="button"
-                role="radio"
-                aria-checked={isActive}
-                aria-label={`${name} basemap${isActive ? ', currently selected' : ''}`}
-                onClick={() => onSelectLayer(name)}
-                className={cn(
-                  'flex flex-col items-center justify-start gap-2',
-                  'w-full p-2',
-                  'border-2 rounded',
-                  'transition-all duration-200',
-                  'focus:outline focus:outline-2 focus:outline-focus',
-                  isActive
-                    ? 'bg-focus text-black border-focus'
-                    : 'bg-white text-black border-gray-300 hover:bg-focus',
-                )}
-              >
-                <div className="flex items-center justify-center w-full flex-shrink-0">
-                  <img
-                    src={image}
-                    alt={`Preview of ${name}`}
-                    title={name}
-                    className={cn(
-                      'max-w-[60px] max-h-[60px] w-auto h-auto object-contain border',
-                      isActive ? 'border-black' : 'grayscale border-black',
-                    )}
-                  />
-                </div>
-
-                <div className="text-xs leading-tight text-center w-full flex-shrink-0 px-1">
-                  {name}
-                </div>
-              </button>
-            );
-          })}
-        </div>
-      </div>
-    </FocusTrap>,
-    document.body,
-  );
-};
+export { LayerSwitcher } from '../components/LayerSwitcher/LayerSwitcher';
+export type { LayerSwitcherProps, LayerOption } from '../components/LayerSwitcher/LayerSwitcher';

package/src/map/LegendShim.tsx

@@ -0,0 +1,2 @@
+export { Legend } from '../components/Legend/Legend';
+export type { LegendProps, LegendOption } from '../components/Legend/Legend';

package/src/map/MapComponent.tsx

@@ -13,11 +13,13 @@ import { getPopupPositionClass, LAYER_NAMES } from './utils';
 import type { PopupDirection } from '../types/map';
 
 export type MapComponentProps = {
-  osMapsApiKey?: string;
   basePath: string;
   children?: ReactNode;
 };
 
+// Where the popup-container div itself sits relative to the clicked
+// coordinate. Popup owns the matching arrow-position lookup for its own
+// pointer, since that's internal to how it renders, not where it's placed.
 const positionTransforms: Record<PopupDirection, string> = {
   'bottom-left': 'top-[-2em] right-[1em]',
   'top-left': 'bottom-[-2em] right-[1em]',
@@ -25,13 +27,6 @@ const positionTransforms: Record<PopupDirection, string> = {
   'bottom-right': 'top-[-2em] left-[1em]',
 };
 
-const arrowStyles: Record<PopupDirection, string> = {
-  'bottom-left': 'right-[-.5em] top-[1em]',
-  'bottom-right': 'left-[-.5em] top-[1em]',
-  'top-left': 'right-[-.5em] bottom-[1em]',
-  'top-right': 'left-[-.5em] bottom-[1em]',
-};
-
 /**
  * This component  manages the main map, this is where the basemap layers
  * and basic controls are added to the map. The map component encapsulates
@@ -42,7 +37,7 @@ const arrowStyles: Record<PopupDirection, string> = {
  *
  * @return {*}
  */
-const MapComponentBase = ({ osMapsApiKey, basePath, children }: MapComponentProps) => {
+const MapComponentBase = ({ basePath, children }: MapComponentProps) => {
   const [popupCoordinate, setPopupCoordinate] = useState<number[] | null>(null);
   const [popupPositionClass, setPopupPositionClass] = useState<PopupDirection>('bottom-right');
 
@@ -65,11 +60,6 @@ const MapComponentBase = ({ osMapsApiKey, basePath, children }: MapComponentProp
       return;
     }
 
-    if (!osMapsApiKey) {
-      console.warn('OS Maps API key not provided. Geocoder will not be available.');
-      // Continue with map initialization but skip geocoder
-    }
-
     // Initialise map's basemap layers.
     const layers = initializeBasemapLayers(basePath);
 
@@ -160,10 +150,10 @@ const MapComponentBase = ({ osMapsApiKey, basePath, children }: MapComponentProp
   };
 
   return (
-    <div className="flex flex-grow min-h-0">
+    <div className="flex grow min-h-0">
       <div
         ref={mapRef}
-        className="flex flex-grow relative z-10"
+        className="flex grow relative z-10"
         id="map"
         role="application"
         aria-label="Map"
@@ -178,7 +168,7 @@ const MapComponentBase = ({ osMapsApiKey, basePath, children }: MapComponentProp
             <Popup
               onClose={closePopup}
               clickedCoord={popupCoordinate}
-              arrowClasses={arrowStyles[popupPositionClass]}
+              direction={popupPositionClass}
             >
               {children}
             </Popup>

package/src/map/MapControlsOverlay.tsx

@@ -1,97 +1,52 @@
 'use client';
 
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-  type RefObject,
-} from 'react';
+import { useCallback, useEffect, useMemo, useState, type RefObject } from 'react';
 
 import BaseLayer from 'ol/layer/Base';
-import { LuLayers, LuList, LuMaximize2, LuMinus, LuMinimize2, LuPlus } from 'react-icons/lu';
+import { LuMaximize2, LuMinimize2, LuMinus, LuPlus } from 'react-icons/lu';
 
-import { LayerSwitcherPanel } from './LayerSwitcherPanel';
-import { LegendPanel } from './LegendPanel';
 import { useMap } from './MapContext';
-
-type MapControlsOverlayProps = {
+import { Button } from '../components/Button/Button';
+import type { LayerOption } from '../components/LayerSwitcher/LayerSwitcher';
+import { LayerSwitcher } from '../components/LayerSwitcher/LayerSwitcher';
+import { ButtonGroup } from '../components/Layout/ButtonGroup/ButtonGroup';
+import type { LegendOption } from '../components/Legend/Legend';
+import { Legend } from '../components/Legend/Legend';
+
+export type MapControlsOverlayProps = {
   mapContainerRef: RefObject<HTMLDivElement | null>;
-  isLegendVisible?: boolean;
-  isLegendEnabled?: boolean;
-  legendContent?: ReactNode;
-  // Whether the map is the currently visible view (e.g. the "Map" tab is
-  // active). The legend renders via a portal to document.body, so it isn't
-  // hidden by the normal tab-panel `hidden` mechanism when another tab is
-  // shown — this closes it explicitly instead.
-  isActive?: boolean;
-};
-
-type ControlButtonProps = {
-  ariaLabel: string;
-  title: string;
-  icon: ReactNode;
-  onClick: () => void;
-  isPressed?: boolean;
-  isDisabled?: boolean;
-  hasPopup?: boolean;
-  isExpanded?: boolean;
-  buttonRef?: RefObject<HTMLButtonElement | null>;
+  legendItems?: LegendOption[];
 };
 
-const ControlButton = ({
-  ariaLabel,
-  title,
-  icon,
-  onClick,
-  isPressed,
-  isDisabled = false,
-  hasPopup,
-  isExpanded,
-  buttonRef,
-}: ControlButtonProps) => (
-  <button
-    ref={buttonRef}
-    type="button"
-    className="ol-btn"
-    aria-label={ariaLabel}
-    title={title}
-    onClick={onClick}
-    disabled={isDisabled}
-    aria-pressed={isPressed}
-    aria-haspopup={hasPopup ? 'dialog' : undefined}
-    aria-expanded={isExpanded}
-  >
-    <span aria-hidden="true">{icon}</span>
-  </button>
-);
-
-export const MapControlsOverlay = ({
-  mapContainerRef,
-  isLegendVisible = false,
-  isLegendEnabled = false,
-  legendContent,
-  isActive = true,
-}: MapControlsOverlayProps) => {
+export const MapControlsOverlay = ({ mapContainerRef, legendItems }: MapControlsOverlayProps) => {
   const { map, getLayers } = useMap();
   const [isFullScreen, setIsFullScreen] = useState(false);
-  const [isLayerSwitcherOpen, setIsLayerSwitcherOpen] = useState(false);
-  const [layerSwitcherButtonRect, setLayerSwitcherButtonRect] = useState<DOMRect | null>(null);
-  const layerSwitcherButtonRef = useRef<HTMLButtonElement>(null);
-  const [isLegendOpen, setIsLegendOpen] = useState(false);
-  const [legendButtonRect, setLegendButtonRect] = useState<DOMRect | null>(null);
-  const legendButtonRef = useRef<HTMLButtonElement>(null);
 
   const basemapLayers = useMemo(
     () => (getLayers()?.filter((l: BaseLayer) => l.get('basemap') === true) ?? []) as BaseLayer[],
     [getLayers],
   );
 
-  const activeLayerName =
-    (basemapLayers.find((l: BaseLayer) => l.getVisible())?.get('name') as string | undefined) ??
-    null;
+  const layerOptions = useMemo<LayerOption[]>(
+    () =>
+      basemapLayers.map((l) => ({
+        name: l.get('name') as string,
+        image: l.get('image') as string | undefined,
+      })),
+    [basemapLayers],
+  );
+
+  // OL layer visibility is mutated directly (setVisible below), which doesn't
+  // trigger a React re-render on its own, so this can't just be read during
+  // render like a derived value, it needs to be actual state, synced here
+  // once basemapLayers is available and updated directly on selection.
+  const [activeLayerName, setActiveLayerName] = useState<string | null>(null);
+
+  useEffect(() => {
+    const visible = basemapLayers.find((l: BaseLayer) => l.getVisible());
+
+    setActiveLayerName((visible?.get('name') as string | undefined) ?? null);
+  }, [basemapLayers]);
 
   const handleFullScreen = useCallback(() => {
     const container = mapContainerRef.current;
@@ -110,40 +65,6 @@ export const MapControlsOverlay = ({
     }
   }, [isFullScreen, map, mapContainerRef]);
 
-  const handleLayerSwitcherToggle = useCallback(() => {
-    const rect = layerSwitcherButtonRef.current?.getBoundingClientRect() ?? null;
-
-    setLayerSwitcherButtonRect(rect);
-    setIsLayerSwitcherOpen((prev) => !prev);
-  }, []);
-
-  const handleLayerSwitcherClose = useCallback(() => {
-    setIsLayerSwitcherOpen(false);
-    layerSwitcherButtonRef.current?.focus();
-  }, []);
-
-  const handleLegendToggle = useCallback(() => {
-    const rect = legendButtonRef.current?.getBoundingClientRect() ?? null;
-
-    setLegendButtonRect(rect);
-    setIsLegendOpen((prev) => !prev);
-  }, []);
-
-  const handleLegendClose = useCallback(() => {
-    setIsLegendOpen(false);
-    legendButtonRef.current?.focus();
-  }, []);
-
-  // Force-close on leaving the map view rather than remembering the open
-  // state — the legend describes what's on the map, so re-opening it after
-  // returning is a deliberate, cheap action rather than something worth
-  // restoring automatically.
-  useEffect(() => {
-    if (!isActive) {
-      setIsLegendOpen(false);
-    }
-  }, [isActive]);
-
   const handleSelectLayer = useCallback(
     (layerName: string) => {
       const current = basemapLayers.find((l: BaseLayer) => l.getVisible());
@@ -151,6 +72,7 @@ export const MapControlsOverlay = ({
 
       current?.setVisible(false);
       next?.setVisible(true);
+      setActiveLayerName(layerName);
     },
     [basemapLayers],
   );
@@ -181,75 +103,46 @@ export const MapControlsOverlay = ({
     }
   }, [map]);
 
-  const fullScreenLabel = isFullScreen ? 'Exit full screen' : 'Toggle full screen';
-  const legendLabel = isLegendOpen ? 'Hide legend' : 'Show legend';
-
   return (
-    <>
-      <div className="flex flex-col" role="group" aria-label="Map controls">
-        <ControlButton
-          ariaLabel={fullScreenLabel}
-          title={fullScreenLabel}
-          icon={isFullScreen ? <LuMinimize2 size={20} /> : <LuMaximize2 size={20} />}
-          onClick={handleFullScreen}
-        />
-
-        <ControlButton
-          buttonRef={layerSwitcherButtonRef}
-          ariaLabel="Toggle basemap selector"
-          title="Basemap selector"
-          icon={<LuLayers size={20} />}
-          onClick={handleLayerSwitcherToggle}
-          hasPopup
-          isExpanded={isLayerSwitcherOpen}
-        />
-
-        <ControlButton
-          ariaLabel="Zoom in"
-          title="Zoom in"
-          icon={<LuPlus size={20} />}
-          onClick={handleZoomIn}
-        />
-
-        <ControlButton
-          ariaLabel="Zoom out"
-          title="Zoom out"
-          icon={<LuMinus size={20} />}
-          onClick={handleZoomOut}
-        />
-
-        {isLegendVisible ? (
-          <ControlButton
-            buttonRef={legendButtonRef}
-            ariaLabel={legendLabel}
-            title={legendLabel}
-            icon={<LuList size={20} />}
-            onClick={handleLegendToggle}
-            hasPopup
-            isExpanded={isLegendOpen}
-            isDisabled={!isLegendEnabled}
-          />
-        ) : null}
-      </div>
-
-      <LayerSwitcherPanel
-        isOpen={isLayerSwitcherOpen}
-        onClose={handleLayerSwitcherClose}
-        layers={basemapLayers}
+    <ButtonGroup orientation="vertical" compressed role="toolbar" aria-label="Map controls">
+      <Button
+        variant="icon"
+        appearance="panel"
+        aria-label={isFullScreen ? 'Exit full screen' : 'Enter full screen'}
+        onClick={handleFullScreen}
+      >
+        {isFullScreen ? <LuMinimize2 aria-hidden /> : <LuMaximize2 aria-hidden />}
+      </Button>
+
+      <LayerSwitcher
+        layers={layerOptions}
         activeLayerName={activeLayerName}
         onSelectLayer={handleSelectLayer}
-        buttonRect={layerSwitcherButtonRect}
       />
 
-      {isLegendVisible ? (
-        <LegendPanel
-          isOpen={isLegendOpen}
-          onClose={handleLegendClose}
-          buttonRect={legendButtonRect}
-        >
-          {legendContent}
-        </LegendPanel>
+      <Button
+        variant="icon"
+        appearance="panel"
+        aria-label="Zoom in"
+        onClick={handleZoomIn}
+        disabled={!map}
+      >
+        <LuPlus aria-hidden />
+      </Button>
+
+      <Button
+        variant="icon"
+        appearance="panel"
+        aria-label="Zoom out"
+        onClick={handleZoomOut}
+        disabled={!map}
+      >
+        <LuMinus aria-hidden />
+      </Button>
+
+      {legendItems !== undefined ? (
+        <Legend items={legendItems} disabled={legendItems.length === 0} />
       ) : null}
-    </>
+    </ButtonGroup>
   );
 };

package/src/map/Popup.tsx

@@ -1,48 +1,95 @@
 'use client';
 
-import { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
-import { IoMdCloseCircle } from 'react-icons/io';
+import { LuX } from 'react-icons/lu';
 
-type PopupProps = {
+import { Button } from '../components/Button/Button';
+import type { PopupDirection } from '../types/map';
+import { cn } from '../utils/components';
+
+// Which corner of the popup box points back at the clicked coordinate,
+// matching MapComponent's own positionTransforms lookup (which decides
+// where the box itself sits) so the two stay in sync.
+const POPUP_ARROW_POSITIONS = {
+  'bottom-left': 'right-[-.5em] top-[1em]',
+  'bottom-right': 'left-[-.5em] top-[1em]',
+  'top-left': 'right-[-.5em] bottom-[1em]',
+  'top-right': 'left-[-.5em] bottom-[1em]',
+} as const;
+
+// The arrow only ever pokes out the left or right edge (see the offsets
+// above), never top/bottom, so it only ever needs to point left or right.
+// Same rotation math @radix-ui/react-popper uses for its own Arrow (see
+// PopperArrow's per-side transform): the un-rotated shape points down,
+// rotate(90deg) makes it point left, rotate(-90deg) makes it point right.
+const POPUP_ARROW_ROTATIONS = {
+  'bottom-left': '-rotate-90',
+  'bottom-right': 'rotate-90',
+  'top-left': '-rotate-90',
+  'top-right': 'rotate-90',
+} as const;
+
+export type PopupProps = {
   children: ReactNode;
   onClose: () => void;
   clickedCoord: number[] | null;
-  arrowClasses: string;
+  direction?: PopupDirection;
 };
 
+// Not built on Modal: it's a non-modal panel pinned to a map coordinate
+// (with a directional arrow pointing back at it) rather than a centred,
+// backdrop-blocking dialog, but it borrows Modal's visual language (panel,
+// no rounded corners, same close button treatment) so the two feel related.
+// One padded box holding everything (close button and content both), same
+// as ModalContent, rather than nesting a second, separately-padded box
+// inside it, so the two actually share the exact same padding math.
 export const Popup = ({
   children,
   onClose,
   clickedCoord,
-  arrowClasses = 'bottom-left',
+  direction = 'bottom-left',
 }: PopupProps) => {
   if (!clickedCoord) {
-    return <></>;
+    return null;
   }
 
   return (
-    <div className={'relative z-50 w-[300px] shadow-md'}>
-      <button
-        type="button"
-        onClick={onClose}
-        className="absolute z-4 top-[.5em] right-[1em] text-gray-500 hover:text-black text-sm"
-        aria-label="Close popup"
-      >
-        <IoMdCloseCircle size={20} />
-      </button>
+    <div
+      role="dialog"
+      aria-label="Feature details"
+      className="cn-z-top panel relative w-75 p-gds-4"
+    >
+      <div className="absolute top-gds-2 right-gds-2">
+        <Button variant="icon" appearance="ghost" onClick={onClose}>
+          <LuX />
 
-      <div
-        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"
-      >
-        {children}
+          <span className="sr-only">Close popup</span>
+        </Button>
       </div>
 
-      <div
-        className={`absolute z-[-1] w-4 h-4 bg-white border border-gray-300 rotate-45
-          ${arrowClasses}`}
-      />
+      <div className="flex max-h-75 flex-col gap-gds-2 overflow-y-auto">{children}</div>
+
+      {/* Same shape/proportions as PopoverContent/TooltipContent's own
+          Radix Arrow (viewBox 0 0 30 10, width 10, height 5), reimplemented
+          rather than reused directly: Radix's Arrow depends on its Popper
+          positioning context (floating-ui), which only exists inside a real
+          Popover.Content/Tooltip.Content, not this OpenLayers-positioned
+          overlay. */}
+      <svg
+        aria-hidden
+        width={10}
+        height={5}
+        viewBox="0 0 30 10"
+        preserveAspectRatio="none"
+        className={cn(
+          'fill-panel-border absolute -z-10',
+          POPUP_ARROW_POSITIONS[direction],
+          POPUP_ARROW_ROTATIONS[direction],
+        )}
+      >
+        <polygon points="0,0 30,0 15,10" />
+      </svg>
     </div>
   );
 };