Passer au contenu principal

SeatMap

Implemented

Venue seating chart as a CSS-grid of seat buttons: sections → rows → seats, five seat statuses (available / held / sold / blocked / inaccessible) driving color PLUS non-color cues (dashed border = held, dotted = blocked, strikethrough = sold/inaccessible). Edit mode toggles a controlled selection through selectedSeats + onSeatSelect; view mode renders read-only. Pair with SeatMapLegend (tier legend) and SeatPicker (capped, checkout-oriented picker) — SeatPicker reuses this component's seat types.

Categoryorganisms
Sourcecomponents/organisms/SeatMap/SeatMap.tsx
AI HintUse for event-detail / order-confirmation seating charts and admin seat overviews. Pass locale for FR; pass title/description/emptyLabel as localized strings. Compose SeatMapLegend above it when tiers need a price legend, or use SeatPicker when a checkout needs a max-seats cap.

Venue seating chart — sections → rows → seats with five statuses (available / held / sold / blocked / inaccessible) carrying both color and non-color cues.

SeatMap

design-system

SeatMap preview and API reference.

Seat map

Orchestra

Props

Preview

SeatMap

Prop
Type
Required
Default
Description
eventId
string
Required
—

Event id — echoed to `data-event` for analytics/event delegation.

venueId
string
Required
—

Venue id — echoed to `data-venue`.

sections
SeatSection[]
Required
—

Sections → rows → seats to render (bounded 1–50 sections in practice).

mode
"view" | "edit"
Required
—

View renders read-only; edit makes eligible seats toggleable buttons.

selectedSeats
string[]
Optional
[]

Controlled selected seat ids (edit mode). Drives aria-pressed/selection ring.

onSeatSelect
(seatIds: string[]) => void
Optional
—

Emits the next selected-id array when an eligible seat is toggled in edit mode. Sold/blocked seats and view mode never fire it.

onSeatUpdate
(seatId: string, updates: Partial<Seat>) => Promise<void> | void
Optional
—

RESERVED for per-seat edit tools — accepted for forward-compatibility but NOT yet wired (edit mode only toggles selection today).

tools
SeatMapTool[]
Optional
—

RESERVED for the edit-tool palette (select | paint | block | label) — accepted for forward-compatibility but NOT yet wired.

locale
"fr" | "en"
Optional
'en'

Localizes the built-in aria-label templates and status words (Row/Rang, Seat/Siège, disponible/retenu/vendu/bloqué…). title/description/emptyLabel stay caller-localized strings.

title
string
Optional
'Seat map'

Section heading + root aria-label. Provide a localized string; built-in default is English.

description
string
Optional
—

Optional supporting line under the heading.

emptyLabel
string
Optional
'No sections configured'

Empty-state copy when sections is empty. Provide a localized string.

className
string
Optional
—

Appended to the root section element.

id
string
Optional
`seatmap-${useId()}`

Root element id (autogenerated from useId when omitted).

Quick use:<SeatMap />

Accessibility

ARIA roleapplication

Type

1 rule

NASA Rule 2 + 5

sections bounded 1-50; mode required (NASA Rule 2 + 5)

ARIA

1 rule

WCAG 2.1.1, 4.1.2

Root section has role='application' aria-label={title}; each row exposes 'Row/Rang {label}'; each seat button exposes '{Seat/Siège} {row}{number}, {status}' with aria-pressed

a11y

1 rule

WCAG 1.4.1

Seat status carries non-color cues (dashed=held, dotted=blocked, strikethrough=sold/inaccessible) so status survives without color vision

Usage

Import

tsxSnippet
import { SeatMap } from "@epasslive/design-system"

Example 1

tsxSnippet
<SeatMap eventId={e.id} venueId={e.venueId} sections={sections} mode="edit" selectedSeats={sel} onSeatSelect={setSel} />

Example 2

tsxSnippet
<SeatMap eventId={e.id} venueId={e.venueId} sections={sections} mode="view" locale="fr" title="Plan de salle" emptyLabel="Aucune section configurée" />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources

— Do not pass onSeatUpdate/tools expecting behavior — both are reserved and currently no-op

Design System v4.1.0 | ePassLive