List
Inbox-style record rows with independent destinations and menus.
Import from @commenda/pathfinder/list and load the shared stylesheet once. This component represents inbox/mailroom records, not bullet lists or selection options.
API reference
| Prop | Type | Behavior |
|---|---|---|
labelRequired | string | Accessible list name |
itemsRequired | readonly ListItem[] | Stable ID and title; each item has onAction or linkConfig |
selectedId | string|null | The currently open record |
onSelectionChange | (id: string) => void | Activation notification; app owns selection |
loadingConfig | ObjectView fields | Announces loading and marks list busy |
emptyContent | ReactNode | Defaults to No items. |
paginationConfig | ObjectView fields | App-owned paging with Load more |
className | string | Root styling |
loadingConfigObject fields
| Field | Type | Requirement |
|---|---|---|
isLoading | boolean | Required |
label | string | Optional |
paginationConfigObject fields
| Field | Type | Requirement |
|---|---|---|
hasMore | boolean | Required |
isLoading | boolean | Required |
onLoadMore | () => void | Required |
Items also accept description, leadingIcon, entityConfig: { label, flag }, timestamp: { label, dateTime? }, unread, pinned, and menuConfig using Dropdown's existing menu groups. linkConfig preserves native link behavior and supports an anchor-compatible render function for Next Link. More is a separate control; it never activates the row.
Titles, entity names, and previews truncate with the full text retained in the DOM and native title. The selected row retains the same font weight. Time and More share reserved space, with menus available on focus and touch.
Loading and empty states
Paging
Use server paging for large datasets. List renders the provided page without virtualization; avoid loading an entire unbounded inbox. It does not fetch or automatically advance pages. Read the record component rules.
Design rules
Figma guidance and reviewed implementation decisions for this component. Rule IDs remain stable for source comments and AI references.
Source rules
| Rule | Contract and provenance |
|---|---|
| LIST-001 | Figma 1101:3: 80px minimum inbox/mailroom rows, stable font weight; selected soft-pearl 300. |
| LIST-002 | Native record link/action and a separate More button. No nested buttons or accidental record activation from its menu. |
| LIST-003 | Application owns paging, selection, and remote state. Timestamp swaps with More without shifting content; touch exposes actions. |