import React from 'react'; import type { ColorToken, MapPrecision } from '../map/map.types'; export interface MapFeatureListItem { id: string; label: string; /** Secondary line — a value, a count, a status. */ description?: string; colorToken?: ColorToken; /** How the position was obtained, surfaced so the reader can judge it. */ precision?: MapPrecision; precisionLabel?: string; data?: unknown; } export interface MapFeatureListProps extends Omit, 'onSelect'> { features: MapFeatureListItem[]; selectedId?: string | null; onSelect: (id: string | null) => void; /** Replaces the default row rendering. */ renderItem?: (feature: MapFeatureListItem, selected: boolean) => React.ReactNode; title?: string; /** @default "Map features" */ ariaLabel?: string; /** @default "No features to list" */ emptyLabel?: string; /** Caps the height and scrolls. */ maxHeight?: string; } /** * The map's content as an operable list. * * @description * A map is a spatial control, and a spatial control alone is not reachable by * everyone. Pairing it with a list that shares `selectedId` in both directions * gives the same information and the same actions through plain keyboard and * screen-reader navigation — selecting in the list highlights the point, and * selecting the point highlights the row. * * Implemented as a `listbox`: arrow keys move, Enter and Space select, Escape * clears, and roving `tabIndex` keeps the whole list to a single tab stop * instead of one per feature. * * @ai-rules * 1. Share one `selectedId` state between `` and this list — that two-way link is the point. * 2. Do not hide the list at small breakpoints. It is the accessible path to the same data, not a desktop extra. * 3. Surface `precisionLabel` whenever positions are centroids, so an approximate location is never read as exact. */ export declare const MapFeatureList: React.ForwardRefExoticComponent>;