@tpzdsp/next-toolkit 1.12.1 → 1.14.0

package/src/map/LayerSwitcherControl.ts

@@ -1,40 +1,36 @@
 /* eslint-disable no-restricted-syntax */
-import { createFocusTrap } from 'focus-trap';
-import type { FocusTrap } from 'focus-trap';
+import { createElement } from 'react';
+
 import { Map } from 'ol';
 import { Control } from 'ol/control';
 import type { Options as ControlOptions } from 'ol/control/Control';
 import BaseLayer from 'ol/layer/Base';
+import { createRoot } from 'react-dom/client';
+import type { Root } from 'react-dom/client';
 
-const TIMEOUT = 300; // Match CSS transition duration
-const ARIA_LABEL = 'aria-label';
+import { createControlButton } from './createControlButton';
+import { LayerSwitcherPanel } from './LayerSwitcherPanel';
 
 const MAP_LOGO =
   '<path d="M20.5 3l-5.7 2.1-6-2L3.5 5c-.3.1-.5.5-.5.8v15.2c0 .3.2.6.5.7l5.7-2.1 6 2 5.3-1.9c.3-.1.5-.4.5-.7V3.8c0-.3-.2-.6-.5-.8zM10 5.2l4 1.3v12.3l-4-1.3V5.2zm-6 1.1l4-1.4v12.3l-4 1.4V6.3zm16 12.4l-4 1.4V7.8l4-1.4v12.3z"/>';
 
 export class LayerSwitcherControl extends Control {
   map!: Map;
-  panel!: HTMLElement;
   liveRegion!: HTMLElement;
   isOpen = false;
-  private focusTrap: FocusTrap | null = null;
+  private readonly layers: BaseLayer[];
+  private reactRoot: Root | null = null;
+  private reactContainer: HTMLDivElement | null = null;
+  private readonly button!: HTMLButtonElement;
+  private isClosingFromPanel = false;
 
   constructor(layers: BaseLayer[], options?: ControlOptions) {
-    const button = document.createElement('button');
-
-    button.setAttribute(ARIA_LABEL, 'Button to toggle layer switcher');
-    button.setAttribute('title', 'Basemap switcher');
-    button.setAttribute('aria-expanded', 'false');
-    button.className = 'ol-layer-switcher-toggle ol-btn';
-
-    const switcherIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-
-    switcherIcon.setAttribute('width', '20');
-    switcherIcon.setAttribute('height', '20');
-    switcherIcon.setAttribute('viewBox', '0 0 24 24');
-    switcherIcon.setAttribute('fill', 'currentColor');
-    switcherIcon.innerHTML = MAP_LOGO;
-    button.appendChild(switcherIcon);
+    const button = createControlButton({
+      ariaLabel: 'Toggle basemap selector',
+      title: 'Basemap selector',
+      iconSvg: MAP_LOGO,
+      hasPopup: true,
+    });
 
     const element = document.createElement('div');
 
@@ -62,206 +58,116 @@ export class LayerSwitcherControl extends Control {
       target: options?.target,
     });
 
-    // Assign the live region to the class property so it can be used in other functions.
+    this.layers = layers;
+    this.button = button;
     this.liveRegion = liveRegion;
 
-    this.panel = document.createElement('div');
-    this.panel.className = 'ol-layer-switcher-panel';
-    this.panel.setAttribute('role', 'dialog');
-    this.panel.setAttribute('aria-modal', 'true');
-    this.panel.setAttribute(ARIA_LABEL, 'Basemap switcher');
-
-    // Create the header for the close button
-    const header = document.createElement('div');
-
-    header.className = 'ol-layer-switcher-header';
-
-    // Create the close button
-    const closeBtn = document.createElement('button');
-
-    closeBtn.className = 'ol-layer-switcher-close ol-btn';
-    closeBtn.setAttribute(ARIA_LABEL, 'Close basemap switcher');
-    closeBtn.innerHTML = '&times;';
-    closeBtn.type = 'button';
-    closeBtn.addEventListener('click', () => {
-      this.toggleLayerSwitcher();
-    });
-    header.appendChild(closeBtn);
-
-    // Create the content area for basemap buttons
-    const content = document.createElement('div');
-
-    content.className = 'ol-layer-switcher-content';
-
-    // Add a button for each basemap layer
-    layers.forEach((layer) => {
-      const img = document.createElement('img');
-
-      img.src = layer.get('image') as string;
-      img.setAttribute('title', layer.get('name'));
-      img.setAttribute('alt', `Preview of ${layer.get('name')}`);
-
-      const switcherText = document.createElement('div');
-
-      switcherText.textContent = layer.get('name') as string;
-
-      const btn = document.createElement('button');
-
-      btn.setAttribute('type', 'button');
-      btn.setAttribute('aria-pressed', btn.classList.contains('active') ? 'true' : 'false');
-      btn.appendChild(img);
-      btn.appendChild(switcherText);
-
-      btn.addEventListener('click', () => this.selectBasemap(layer.get('name') as string), false);
-
-      content.appendChild(btn);
-    });
-
-    // Assemble the panel
-    this.panel.appendChild(header);
-    this.panel.appendChild(content);
-
-    // Create focus trap once - will be activated/deactivated as needed
-    this.focusTrap = createFocusTrap(this.panel, {
-      clickOutsideDeactivates: (event) => {
-        // if the user happens to click on the open button again we let the button handle the click event, not the focus trap
-        if (button.contains(event.target as Node)) {
-          return true;
-        }
-
-        this.toggleLayerSwitcher();
-
-        return false;
-      },
-      escapeDeactivates: () => {
-        this.toggleLayerSwitcher();
-
-        return false;
-      },
-      returnFocusOnDeactivate: true,
-      fallbackFocus: () => {
-        return this.panel;
-      },
-    });
+    // Create React container
+    this.reactContainer = document.createElement('div');
+    this.reactRoot = createRoot(this.reactContainer);
 
     button.addEventListener('click', this.toggleLayerSwitcher, false);
   }
 
   private getCurrentBasemap(): BaseLayer | undefined {
-    return this.getMap()
-      ?.getLayers()
-      .getArray()
-      .filter((layer: BaseLayer) => layer.get('basemap') === true)
-      .find((layer: BaseLayer) => layer.getVisible() === true);
+    return this.layers.find((layer: BaseLayer) => layer.getVisible() === true);
   }
 
   private getBasemapByName(layerName: string): BaseLayer | undefined {
-    return this.getMap()
-      ?.getLayers()
-      .getArray()
-      .find((layer: BaseLayer) => layer.get('name') === layerName);
+    return this.layers.find((layer: BaseLayer) => layer.get('name') === layerName);
   }
 
-  private announceBasemapChange(layerName: string) {
-    if (this.liveRegion) {
-      this.liveRegion.textContent = `Basemap changed to ${layerName}`;
-      // Optionally clear the message after a short delay to allow repeated announcements
-      setTimeout(() => {
-        if (this.liveRegion) {
-          this.liveRegion.textContent = '';
-        }
-      }, 1000);
-    }
-  }
-
-  setMap(map: Map) {
+  setMap(map: Map | null) {
     super.setMap(map);
 
     if (map) {
-      // Ensure we only set the initial active layer when the map is assigned
-      map.once('rendercomplete', this.setInitialActiveLayer);
+      this.map = map;
     }
   }
 
-  // Arrow function: 'this' is always bound to the class instance
-  toggleLayerSwitcher = () => {
-    if (!this.isOpen) {
-      this.element.appendChild(this.panel);
-
-      requestAnimationFrame(() => {
-        this.panel.classList.add('open'); // Ensure animation works after adding to DOM
-
-        // Activate the existing focus trap
-        this.focusTrap?.activate();
-      });
-    } else {
-      this.panel.classList.remove('open');
-
-      // Deactivate focus trap but keep the instance
-      this.focusTrap?.deactivate();
+  toggleLayerSwitcher = (): void => {
+    // Prevent double-toggle when panel closes via focus trap
+    if (this.isClosingFromPanel) {
+      this.isClosingFromPanel = false;
 
-      setTimeout(() => {
-        this.element.removeChild(this.panel);
-      }, TIMEOUT); // Matches CSS transition time to prevent flickering
+      return;
     }
 
     this.isOpen = !this.isOpen;
+    this.button.setAttribute('aria-expanded', this.isOpen.toString());
 
-    // Update aria-expanded on the toggle button
-    const toggleBtn = this.element.querySelector('button.ol-layer-switcher-toggle');
-
-    if (toggleBtn) {
-      toggleBtn.setAttribute('aria-expanded', this.isOpen.toString());
+    if (this.isOpen) {
+      this.liveRegion.textContent = 'Basemap switcher opened';
+      this.renderPanel();
+    } else {
+      this.liveRegion.textContent = 'Basemap switcher closed';
+      this.closePanel();
     }
   };
 
-  selectBasemap = (layerName: string) => {
-    const currentBasemap = this.getCurrentBasemap();
-
-    const newBasemap = this.getBasemapByName(layerName);
-
-    currentBasemap?.setVisible(false);
-    newBasemap?.setVisible(true);
-
-    this.updateActiveButton(layerName); // Update the active button style
-
-    this.announceBasemapChange(layerName);
+  private readonly handlePanelClose = (): void => {
+    if (this.isOpen) {
+      this.isClosingFromPanel = true;
+      this.isOpen = false;
+      this.button.setAttribute('aria-expanded', 'false');
+      this.liveRegion.textContent = 'Basemap switcher closed';
+      this.closePanel();
+    }
   };
 
-  setInitialActiveLayer = () => {
-    const map = this.getMap();
-
-    if (!map) {
+  private readonly renderPanel = (): void => {
+    if (!this.reactRoot || !this.reactContainer) {
       return;
     }
 
-    const currentBasemap = this.getCurrentBasemap();
-
-    if (currentBasemap) {
-      const activeLayerName = currentBasemap.get('name');
+    const buttonRect = this.button.getBoundingClientRect();
+    const activeLayer = this.getCurrentBasemap();
+    const activeLayerName = activeLayer ? (activeLayer.get('name') as string) : '';
+
+    this.reactRoot.render(
+      createElement(LayerSwitcherPanel, {
+        isOpen: this.isOpen,
+        onClose: this.handlePanelClose,
+        layers: this.layers,
+        activeLayerName,
+        onSelectLayer: this.selectBasemap,
+        buttonRect,
+      }),
+    );
+  };
 
-      this.updateActiveButton(activeLayerName);
+  private readonly closePanel = (): void => {
+    if (!this.reactRoot) {
+      return;
     }
+
+    this.reactRoot.render(null);
   };
 
-  updateActiveButton = (layerName: string) => {
-    const buttons = this.panel.querySelectorAll('button');
+  selectBasemap = (layerName: string): void => {
+    const currentBasemap = this.getCurrentBasemap();
+    const newBasemap = this.getBasemapByName(layerName);
+
+    currentBasemap?.setVisible(false);
+    newBasemap?.setVisible(true);
 
-    buttons.forEach((btn: HTMLButtonElement) => {
-      const isActive = btn.textContent?.trim() === layerName;
+    this.liveRegion.textContent = `${layerName} basemap selected`;
 
-      btn.classList.toggle('active', isActive);
-      btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');
-    });
+    // Re-render to update active state
+    if (this.isOpen) {
+      this.renderPanel();
+    }
   };
 
-  // Cleanup method - call this when removing the control
-  destroy() {
-    // Deactivate and destroy focus trap
-    if (this.focusTrap) {
-      this.focusTrap.deactivate();
+  dispose(): void {
+    // Clean up React root
+    if (this.reactRoot) {
+      this.reactRoot.unmount();
+      this.reactRoot = null;
     }
 
-    this.focusTrap = null;
+    this.reactContainer = null;
+
+    super.dispose?.();
   }
 }

package/src/map/LayerSwitcherPanel.tsx

@@ -0,0 +1,173 @@
+'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 null;
+  }
+
+  // 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,
+  );
+};

package/src/map/MapComponent.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 
 import { Map, Overlay, View } from 'ol';
-import { Attribution, Control, ScaleLine, Zoom } from 'ol/control';
+import { Attribution, ScaleLine, Zoom } from 'ol/control';
 import { fromLonLat } from 'ol/proj';
 
 import { initializeBasemapLayers } from './basemaps';
-import { initializeGeocoder } from './geocoder';
+import { FullScreenControl } from './FullScreenControl';
 import { LayerSwitcherControl } from './LayerSwitcherControl';
 import { useMap } from './MapContext';
 import { Popup } from './Popup';
@@ -16,9 +16,7 @@ import type { PopupDirection } from '../types/map';
 
 export type MapComponentProps = {
   osMapsApiKey?: string;
-  geocoderUrl: string;
   basePath: string;
-  isLoading?: boolean;
 };
 
 const positionTransforms: Record<PopupDirection, string> = {
@@ -40,14 +38,12 @@ const arrowStyles: Record<PopupDirection, string> = {
  * and basic controls are added to the map. The map component encapsulates
  * a number of child components, used to interact with the map itself.
  *
+ * Memoized to prevent unnecessary re-renders that could conflict with
+ * OpenLayers' imperative DOM manipulation.
+ *
  * @return {*}
  */
-export const MapComponent = ({
-  osMapsApiKey,
-  geocoderUrl,
-  basePath,
-  isLoading,
-}: MapComponentProps) => {
+const MapComponentBase = ({ osMapsApiKey, basePath }: MapComponentProps) => {
   const [popupFeatures, setPopupFeatures] = useState([]);
   const [popupCoordinate, setPopupCoordinate] = useState<number[] | null>(null);
   const [popupPositionClass, setPopupPositionClass] = useState<PopupDirection>('bottom-right');
@@ -88,9 +84,10 @@ export const MapComponent = ({
     const scaleLine = new ScaleLine({ units: 'metric' });
     const attribution = new Attribution();
     const layerSwitcher = new LayerSwitcherControl(layers);
+    const fullScreenControl = new FullScreenControl();
 
     // Add controls in the desired order
-    const controls = [mapZoom, layerSwitcher, scaleLine, attribution];
+    const controls = [mapZoom, layerSwitcher, fullScreenControl, scaleLine, attribution];
 
     const newMap = new Map({
       target,
@@ -98,36 +95,14 @@ export const MapComponent = ({
       layers,
       view: new View({
         projection: 'EPSG:3857',
-        // extent: transformExtent(
-        //   [-8.371582, 49.852152, 2.021484, 59.445075],
-        //   'EPSG:4326',
-        //   'EPSG:3857',
-        // ),
         center: fromLonLat(center),
         zoom,
       }),
     });
 
     // Mark the map as initialized to prevent re-initialization
-    // This is a workaround to avoid re-initializing the map when the component
-    // re-renders. The map is only initialized once when the component mounts.
-    // This is important because the map is a singleton and should not be
-    // re-initialized.
     mapInitializedRef.current = true;
 
-    // Create an instance of the custom provider, passing any options that are
-    // required
-    // Only initialize geocoder if API key is available
-    if (osMapsApiKey) {
-      try {
-        const geocoder = initializeGeocoder(osMapsApiKey, geocoderUrl, newMap);
-
-        newMap.addControl(geocoder as Control);
-      } catch (error) {
-        console.error('Failed to initialize geocoder:', error);
-      }
-    }
-
     // Setup popup overlay
     const overlay = new Overlay({
       element: document.getElementById('popup-container') ?? undefined,
@@ -151,7 +126,7 @@ export const MapComponent = ({
 
           setPopupFeatures(features);
           setPopupCoordinate(coordinate);
-          setPopupPositionClass(direction); // new state we add below
+          setPopupPositionClass(direction);
           overlay.setPosition(event.coordinate);
         }
       });
@@ -182,17 +157,6 @@ export const MapComponent = ({
         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex={0}
       >
-        {isLoading ? (
-          <div className="absolute inset-0 flex items-center justify-center bg-white/50 z-10">
-            <div
-              className="w-9 h-9 border-4 border-gray-200 border-t-blue-500 rounded-full
-                animate-spin"
-            />
-          </div>
-        ) : null}
-
-        <div className="absolute top-36 z-20" id="geocoder" />
-
         <div
           className={`absolute z-20 ${positionTransforms[popupPositionClass]}`}
           id="popup-container"
@@ -211,3 +175,5 @@ export const MapComponent = ({
     </div>
   );
 };
+
+export const MapComponent = memo(MapComponentBase);