@tpzdsp/next-toolkit 1.12.0 → 1.13.0

package/src/map/FullScreenControl.ts

@@ -0,0 +1,126 @@
+/* eslint-disable no-restricted-syntax */
+import { Map } from 'ol';
+import { Control } from 'ol/control';
+import type { Options as ControlOptions } from 'ol/control/Control';
+
+import { CONTROL_ICONS, createControlButton } from './createControlButton';
+
+const FULL_SCREEN_CLASS = 'map-fullscreen';
+const ARIA_LABEL_TOGGLE = 'Toggle full screen';
+const ARIA_LABEL_EXIT = 'Exit full screen';
+
+export class FullScreenControl extends Control {
+  private isFullScreen = false;
+  private readonly button!: HTMLButtonElement;
+  liveRegion!: HTMLElement;
+  private mapContainer: HTMLElement | null = null;
+
+  constructor(options?: ControlOptions) {
+    const button = createControlButton({
+      ariaLabel: ARIA_LABEL_TOGGLE,
+      title: ARIA_LABEL_TOGGLE,
+      iconSvg: CONTROL_ICONS.EXPAND,
+      className: 'ol-fullscreen-toggle',
+    });
+
+    const element = document.createElement('div');
+
+    element.className = 'ol-fullscreen ol-unselectable ol-control';
+    element.appendChild(button);
+
+    // Create a live region for screen reader announcements
+    const liveRegion = document.createElement('div');
+
+    liveRegion.setAttribute('aria-live', 'polite');
+    liveRegion.setAttribute('role', 'status');
+    liveRegion.className = 'ol-fullscreen-live-region';
+    liveRegion.style.position = 'absolute';
+    liveRegion.style.width = '1px';
+    liveRegion.style.height = '1px';
+    liveRegion.style.margin = '-1px';
+    liveRegion.style.border = '0';
+    liveRegion.style.padding = '0';
+    liveRegion.style.overflow = 'hidden';
+    liveRegion.style.clipPath = 'inset(50%)';
+    element.appendChild(liveRegion);
+
+    super({
+      element,
+      target: options?.target,
+    });
+
+    this.button = button;
+    this.liveRegion = liveRegion;
+
+    button.addEventListener('click', this.toggleFullScreen, false);
+  }
+
+  setMap(map: Map | null) {
+    super.setMap(map);
+
+    if (map) {
+      // Find the map container (the target element)
+      this.mapContainer = map.getTargetElement();
+    }
+  }
+
+  private readonly updateButtonIcon = (isFullScreen: boolean): void => {
+    // Update the SVG icon content
+    const svg = this.button.querySelector('svg');
+
+    if (svg) {
+      svg.innerHTML = isFullScreen ? CONTROL_ICONS.COLLAPSE : CONTROL_ICONS.EXPAND;
+    }
+  };
+
+  toggleFullScreen = (): void => {
+    if (!this.mapContainer) {
+      console.warn('Map container not found');
+
+      return;
+    }
+
+    this.isFullScreen = !this.isFullScreen;
+
+    if (this.isFullScreen) {
+      // Enter full screen mode
+      this.mapContainer.classList.add(FULL_SCREEN_CLASS);
+      this.updateButtonIcon(true);
+      this.button.setAttribute('aria-label', ARIA_LABEL_EXIT);
+      this.button.setAttribute('title', ARIA_LABEL_EXIT);
+      this.liveRegion.textContent = 'Full screen mode enabled';
+    } else {
+      // Exit full screen mode
+      this.mapContainer.classList.remove(FULL_SCREEN_CLASS);
+      this.updateButtonIcon(false);
+      this.button.setAttribute('aria-label', ARIA_LABEL_TOGGLE);
+      this.button.setAttribute('title', ARIA_LABEL_TOGGLE);
+      this.liveRegion.textContent = 'Full screen mode disabled';
+    }
+
+    // Force map to update its size after the transition
+    const map = this.getMap();
+
+    if (map) {
+      // Wait for CSS transition to complete before updating size
+      setTimeout(() => {
+        map.updateSize();
+      }, 300);
+    }
+  };
+
+  // Public method to exit full screen programmatically
+  exitFullScreen(): void {
+    if (this.isFullScreen) {
+      this.toggleFullScreen();
+    }
+  }
+
+  dispose(): void {
+    if (this.button) {
+      this.button.removeEventListener('click', this.toggleFullScreen);
+    }
+
+    super.dispose?.();
+  }
+}

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,
+  );
+};