@djangocfg/ui-tools 2.1.404 → 2.1.408

package/src/tools/Map/components/LayerSwitcher.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useCallback, useMemo, memo } from 'react'
+import { useState, useCallback, useMemo, useEffect, memo, type KeyboardEvent } from 'react'
 import { useMapLayers } from '../hooks/useMapLayers'
 
 import type { LayerSwitcherProps, LayerConfig } from '../types'
@@ -36,14 +36,29 @@ function LayerSwitcherComponent({
 
   const [visibility, setVisibility] = useState<Record<string, boolean>>(initialVisibility)
 
+  // Keep visibility in sync when the `layers` prop changes: add entries for
+  // new layers, drop stale ones, preserve user toggles for existing layers.
+  useEffect(() => {
+    setVisibility((prev) => {
+      const next: Record<string, boolean> = {}
+      for (const layer of layers) {
+        next[layer.id] =
+          layer.id in prev ? prev[layer.id] : layer.defaultVisible !== false
+      }
+      return next
+    })
+  }, [layers])
+
   const handleToggle = useCallback(
     (layerId: string) => {
-      const newVisible = !visibility[layerId]
-      setVisibility((prev) => ({ ...prev, [layerId]: newVisible }))
-      setLayerVisibility(layerId, newVisible)
-      onChange?.(layerId, newVisible)
+      setVisibility((prev) => {
+        const newVisible = !prev[layerId]
+        setLayerVisibility(layerId, newVisible)
+        onChange?.(layerId, newVisible)
+        return { ...prev, [layerId]: newVisible }
+      })
     },
-    [visibility, setLayerVisibility, onChange]
+    [setLayerVisibility, onChange]
   )
 
   const handleToggleAll = useCallback(
@@ -66,7 +81,9 @@ function LayerSwitcherComponent({
     () => ({
       position: 'absolute',
       ...positionStyles[position],
-      backgroundColor: 'white',
+      backgroundColor: 'var(--color-popover)',
+      color: 'var(--color-popover-foreground)',
+      border: '1px solid var(--color-border)',
       borderRadius: 8,
       boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
       padding: collapsed ? 8 : 12,
@@ -86,7 +103,7 @@ function LayerSwitcherComponent({
       cursor: collapsible ? 'pointer' : 'default',
       fontWeight: 600,
       fontSize: 12,
-      color: '#333',
+      color: 'var(--color-foreground)',
       marginBottom: collapsed ? 0 : 8,
     }),
     [collapsible, collapsed]
@@ -99,7 +116,7 @@ function LayerSwitcherComponent({
       gap: 8,
       padding: '4px 0',
       fontSize: 12,
-      color: '#666',
+      color: 'var(--color-muted-foreground)',
       cursor: 'pointer',
     }),
     []
@@ -126,23 +143,40 @@ function LayerSwitcherComponent({
     )
   }, [layers])
 
-  const handleHeaderClick = collapsible ? () => setCollapsed(!collapsed) : undefined
+  const handleHeaderClick = collapsible ? () => setCollapsed((c) => !c) : undefined
 
   return (
     <div className={className} style={containerStyle}>
-      <div style={headerStyle} onClick={handleHeaderClick}>
+      <div
+        style={headerStyle}
+        onClick={handleHeaderClick}
+        {...(collapsible
+          ? {
+              role: 'button' as const,
+              tabIndex: 0,
+              'aria-expanded': !collapsed,
+              onKeyDown: (e: KeyboardEvent) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                  setCollapsed((c) => !c)
+                }
+              },
+            }
+          : {})}
+      >
         <span>{title}</span>
         {collapsible && (
           <svg
             width="12"
             height="12"
             viewBox="0 0 12 12"
+            aria-hidden="true"
             style={{
               transform: collapsed ? 'rotate(-90deg)' : 'rotate(0deg)',
               transition: 'transform 0.2s',
             }}
           >
-            <path d="M3 4.5L6 7.5L9 4.5" stroke="#666" fill="none" />
+            <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" fill="none" />
           </svg>
         )}
       </div>
@@ -152,12 +186,14 @@ function LayerSwitcherComponent({
             <div
               style={{
                 ...itemStyle,
-                borderBottom: '1px solid #eee',
+                cursor: 'default',
+                borderBottom: '1px solid var(--color-border)',
                 marginBottom: 4,
                 paddingBottom: 8,
               }}
             >
               <button
+                type="button"
                 onClick={() => handleToggleAll(true)}
                 disabled={allVisible}
                 style={{
@@ -170,6 +206,7 @@ function LayerSwitcherComponent({
                 All
               </button>
               <button
+                type="button"
                 onClick={() => handleToggleAll(false)}
                 disabled={noneVisible}
                 style={{
@@ -190,7 +227,7 @@ function LayerSwitcherComponent({
                   style={{
                     fontSize: 10,
                     fontWeight: 600,
-                    color: '#999',
+                    color: 'var(--color-muted-foreground)',
                     marginTop: 8,
                     marginBottom: 4,
                     textTransform: 'uppercase',
@@ -200,19 +237,15 @@ function LayerSwitcherComponent({
                 </div>
               )}
               {groupLayers.map((layer) => (
-                <div
-                  key={layer.id}
-                  style={itemStyle}
-                  onClick={() => handleToggle(layer.id)}
-                >
+                <label key={layer.id} style={itemStyle}>
                   <input
                     type="checkbox"
-                    checked={visibility[layer.id]}
+                    checked={visibility[layer.id] ?? false}
                     onChange={() => handleToggle(layer.id)}
                     style={checkboxStyle}
                   />
                   <span>{layer.label}</span>
-                </div>
+                </label>
               ))}
             </div>
           ))}

package/src/tools/Map/components/MapCluster.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useState, useEffect, memo, type ReactNode } from 'react'
+import { useCallback, useState, useEffect, useMemo, memo, type ReactNode } from 'react'
 import { Source, Layer, useMap, Popup } from 'react-map-gl/maplibre'
 import type { GeoJSONSource, MapMouseEvent } from 'maplibre-gl'
 import { createClusterLayers } from '../layers'
@@ -78,15 +78,21 @@ export const MapCluster = memo(function MapCluster({
     injectPopupStyles()
   }, [])
 
-  const layerOptions: ClusterLayerOptions = {
-    sourceId,
-    colors,
-    radii,
-    thresholds,
-    hoverColor,
-  }
+  // Memoize layers so layer ids stay referentially stable across renders.
+  // Without this, the click/hover effect below re-subscribes on every render.
+  const { cluster, clusterCount, unclusteredPoint } = useMemo(() => {
+    const layerOptions: ClusterLayerOptions = {
+      sourceId,
+      colors,
+      radii,
+      thresholds,
+      hoverColor,
+    }
+    return createClusterLayers(layerOptions)
+  }, [sourceId, colors, radii, thresholds, hoverColor])
 
-  const { cluster, clusterCount, unclusteredPoint } = createClusterLayers(layerOptions)
+  const clusterLayerId = cluster.id as string
+  const pointLayerId = unclusteredPoint.id as string
 
   const handleClosePopup = useCallback(() => {
     setSelectedFeature(null)
@@ -98,7 +104,7 @@ export const MapCluster = memo(function MapCluster({
       if (!map) return
 
       const features = map.queryRenderedFeatures(event.point, {
-        layers: [cluster.id!, unclusteredPoint.id!],
+        layers: [clusterLayerId, pointLayerId],
       })
 
       if (!features || features.length === 0) return
@@ -143,7 +149,7 @@ export const MapCluster = memo(function MapCluster({
         }
       }
     },
-    [map, sourceId, cluster.id, unclusteredPoint.id, onClusterClick, onPointClick, renderPopup, panOffsetX, panOffsetY]
+    [map, sourceId, clusterLayerId, pointLayerId, onClusterClick, onPointClick, renderPopup, panOffsetX, panOffsetY]
   )
 
   // Close popup when clicking empty area
@@ -152,7 +158,7 @@ export const MapCluster = memo(function MapCluster({
       if (!map) return
 
       const features = map.queryRenderedFeatures(event.point, {
-        layers: [cluster.id!, unclusteredPoint.id!],
+        layers: [clusterLayerId, pointLayerId],
       })
 
       // Close popup if clicked on empty area (no features)
@@ -160,24 +166,25 @@ export const MapCluster = memo(function MapCluster({
         handleClosePopup()
       }
     },
-    [map, cluster.id, unclusteredPoint.id, handleClosePopup]
+    [map, clusterLayerId, pointLayerId, handleClosePopup]
   )
 
   // Register click and hover handlers with proper cleanup
   useEffect(() => {
     if (!map) return
 
-    const clusterLayerId = cluster.id!
-    const pointLayerId = unclusteredPoint.id!
     let currentHoveredId: number | string | null = null
 
-    // Helper to clear hover state
+    // Helper to clear hover state.
+    // Guarded: on unmount the source may already be gone, which would throw.
     const clearHoverState = () => {
       if (currentHoveredId !== null) {
-        map.setFeatureState(
-          { source: sourceId, id: currentHoveredId },
-          { hover: false }
-        )
+        if (map.getSource(sourceId)) {
+          map.setFeatureState(
+            { source: sourceId, id: currentHoveredId },
+            { hover: false }
+          )
+        }
         currentHoveredId = null
       }
     }
@@ -231,7 +238,7 @@ export const MapCluster = memo(function MapCluster({
       map.off('mouseleave', clusterLayerId, handleMouseLeave)
       map.off('mouseleave', pointLayerId, handleMouseLeave)
     }
-  }, [map, sourceId, cluster.id, unclusteredPoint.id, handleClick, handleMapClick])
+  }, [map, sourceId, clusterLayerId, pointLayerId, handleClick, handleMapClick])
 
   return (
     <>

package/src/tools/Map/components/MapContainer.tsx

@@ -28,6 +28,8 @@ export interface MapContainerProps {
   autoResetDelay?: number
   /** Show reset button */
   showResetButton?: boolean
+  /** Accessible label for the map region (screen readers) */
+  ariaLabel?: string
 }
 
 interface MapInnerProps extends Omit<MapContainerProps, 'initialViewport'> {}
@@ -44,6 +46,7 @@ function MapInner({
   openInMapsLabel = 'Open in Maps',
   autoResetDelay = 0,
   showResetButton = false,
+  ariaLabel = 'Interactive map',
 }: MapInnerProps) {
   const { mapRef, viewport, setViewport, setIsLoaded, resetToInitial, initialViewport } = useMapContext()
   const resetTimerRef = useRef<NodeJS.Timeout | null>(null)
@@ -125,6 +128,7 @@ function MapInner({
           ...style,
         }}
         cursor={cursor}
+        aria-label={ariaLabel}
       >
         {children}
       </Map>
@@ -136,13 +140,15 @@ function MapInner({
           <button
             type="button"
             onClick={resetToInitial}
+            aria-label="Reset map view"
             className={cn(
               'inline-flex items-center gap-2 px-3 py-2 rounded-lg',
               'bg-background/95 backdrop-blur-sm text-foreground text-sm font-medium',
-              'hover:bg-background transition-colors shadow-sm border border-border'
+              'hover:bg-background transition-colors shadow-sm border border-border',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
             )}
           >
-            <RotateCcw className="w-4 h-4" />
+            <RotateCcw className="w-4 h-4" aria-hidden="true" />
             Reset
           </button>
         )}
@@ -156,10 +162,11 @@ function MapInner({
             className={cn(
               'inline-flex items-center gap-2 px-4 py-2 rounded-lg',
               'bg-background/95 backdrop-blur-sm text-foreground text-sm font-medium',
-              'hover:bg-background transition-colors shadow-sm border border-border'
+              'hover:bg-background transition-colors shadow-sm border border-border',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
             )}
           >
-            <ExternalLink className="w-4 h-4" />
+            <ExternalLink className="w-4 h-4" aria-hidden="true" />
             {openInMapsLabel}
           </a>
         )}

package/src/tools/Map/components/MapLegend.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useMemo, memo } from 'react'
+import { useState, useMemo, memo, type KeyboardEvent } from 'react'
 
 import type { MapLegendProps, LegendItem } from '../types'
 
@@ -23,13 +23,13 @@ function LegendIcon({
   switch (type) {
     case 'circle':
       return (
-        <svg width="16" height="16" viewBox="0 0 16 16">
+        <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
           <circle cx="8" cy="8" r="6" fill={fill} />
         </svg>
       )
     case 'line':
       return (
-        <svg width="16" height="16" viewBox="0 0 16 16">
+        <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
           <line
             x1="0"
             y1="8"
@@ -43,14 +43,14 @@ function LegendIcon({
       )
     case 'fill':
       return (
-        <svg width="16" height="16" viewBox="0 0 16 16">
+        <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
           <rect x="1" y="1" width="14" height="14" fill={fill} rx="2" />
         </svg>
       )
     case 'symbol':
     default:
       return (
-        <svg width="16" height="16" viewBox="0 0 16 16">
+        <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
           <path
             d="M8 1l2.5 5 5.5.8-4 3.9.9 5.3L8 13.5l-4.9 2.5.9-5.3-4-3.9 5.5-.8z"
             fill={fill}
@@ -76,7 +76,9 @@ function MapLegendComponent({
     () => ({
       position: 'absolute',
       ...positionStyles[position],
-      backgroundColor: 'white',
+      backgroundColor: 'var(--color-popover)',
+      color: 'var(--color-popover-foreground)',
+      border: '1px solid var(--color-border)',
       borderRadius: 8,
       boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
       padding: collapsed ? 8 : 12,
@@ -96,7 +98,7 @@ function MapLegendComponent({
       cursor: collapsible ? 'pointer' : 'default',
       fontWeight: 600,
       fontSize: 12,
-      color: '#333',
+      color: 'var(--color-foreground)',
       marginBottom: collapsed ? 0 : 8,
     }),
     [collapsible, collapsed]
@@ -109,50 +111,79 @@ function MapLegendComponent({
       gap: 8,
       padding: '4px 0',
       fontSize: 12,
-      color: '#666',
+      color: 'var(--color-muted-foreground)',
       cursor: onItemClick ? 'pointer' : 'default',
     }),
     [onItemClick]
   )
 
-  const handleHeaderClick = collapsible ? () => setCollapsed(!collapsed) : undefined
+  const handleHeaderClick = collapsible ? () => setCollapsed((c) => !c) : undefined
 
   return (
     <div className={className} style={containerStyle}>
       {(title || collapsible) && (
-        <div style={headerStyle} onClick={handleHeaderClick}>
+        <div
+          style={headerStyle}
+          onClick={handleHeaderClick}
+          {...(collapsible
+            ? {
+                role: 'button' as const,
+                tabIndex: 0,
+                'aria-expanded': !collapsed,
+                onKeyDown: (e: KeyboardEvent) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    setCollapsed((c) => !c)
+                  }
+                },
+              }
+            : {})}
+        >
           {title && <span>{title}</span>}
           {collapsible && (
             <svg
               width="12"
               height="12"
               viewBox="0 0 12 12"
+              aria-hidden="true"
               style={{
                 transform: collapsed ? 'rotate(-90deg)' : 'rotate(0deg)',
                 transition: 'transform 0.2s',
               }}
             >
-              <path d="M3 4.5L6 7.5L9 4.5" stroke="#666" fill="none" />
+              <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" fill="none" />
             </svg>
           )}
         </div>
       )}
       {!collapsed && (
-        <div>
+        <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
           {items.map((item) => (
-            <div
+            <li
               key={item.id}
               style={{
                 ...itemStyle,
                 opacity: item.visible === false ? 0.5 : 1,
               }}
               onClick={onItemClick ? () => onItemClick(item) : undefined}
+              {...(onItemClick
+                ? {
+                    role: 'button' as const,
+                    tabIndex: 0,
+                    onKeyDown: (e: KeyboardEvent) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault()
+                        onItemClick(item)
+                      }
+                    },
+                  }
+                : {})}
             >
               {item.icon || <LegendIcon type={item.type} color={item.color} />}
               <span>{item.label}</span>
-            </div>
+            </li>
           ))}
-        </div>
+        </ul>
       )}
     </div>
   )

package/src/tools/Map/components/MapMarker.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, memo, type ReactNode } from 'react'
+import { useCallback, memo, type ReactNode, type KeyboardEvent } from 'react'
 import { Marker, type MarkerEvent, type MarkerDragEvent } from 'react-map-gl/maplibre'
 import type { LngLat } from 'maplibre-gl'
 import type { MarkerData } from '../types'
@@ -16,6 +16,8 @@ export interface MapMarkerProps {
   onDragEnd?: (marker: MarkerData, lngLat: LngLat) => void
   color?: string
   size?: number
+  /** Accessible label for the marker (used when onClick is set) */
+  ariaLabel?: string
 }
 
 const DefaultPin = memo(function DefaultPin({
@@ -31,6 +33,7 @@ const DefaultPin = memo(function DefaultPin({
       height={size}
       viewBox="0 0 24 24"
       fill="none"
+      aria-hidden="true"
       style={{ cursor: 'pointer' }}
     >
       <path
@@ -55,6 +58,7 @@ export const MapMarker = memo(function MapMarker({
   onDragEnd,
   color,
   size,
+  ariaLabel,
 }: MapMarkerProps) {
   const handleClick = useCallback(
     (e: MarkerEvent<MouseEvent>) => {
@@ -85,6 +89,19 @@ export const MapMarker = memo(function MapMarker({
     [onDragEnd, marker]
   )
 
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!onClick) return
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        onClick(marker)
+      }
+    },
+    [onClick, marker]
+  )
+
+  const content = children ?? <DefaultPin color={color} size={size} />
+
   return (
     <Marker
       longitude={marker.longitude}
@@ -96,7 +113,19 @@ export const MapMarker = memo(function MapMarker({
       onDrag={handleDrag}
       onDragEnd={handleDragEnd}
     >
-      {children ?? <DefaultPin color={color} size={size} />}
+      {onClick ? (
+        <div
+          role="button"
+          tabIndex={0}
+          aria-label={ariaLabel ?? `Map marker ${marker.id}`}
+          onKeyDown={handleKeyDown}
+          style={{ cursor: 'pointer', display: 'inline-flex', outline: 'none' }}
+        >
+          {content}
+        </div>
+      ) : (
+        content
+      )}
     </Marker>
   )
 })