/// Data Display
OverflowList
A single-line list that measures its items and collapses whatever overflows into a trailing +N indicator.
import { OverflowList } from "@protocore/pds";Collapsing tags
Pass an array of items. The list renders as many as fit on one line and collapses the rest into a +N count chip. Resize the container — it remeasures and adjusts the split as room grows or shrinks.
How it measures
An off-screen row always holds every item at its natural width; a ResizeObserver on the visible container recomputes how many fit whenever the width changes, reserving room for the indicator. Because the measurement is real layout (not a guess), it handles variable-width items — tags, chips, avatars, breadcrumb segments — without you declaring widths.
Use it wherever a horizontal set might not fit: a tag row on a card, a filter summary, a toolbar of actions, a breadcrumb trail. Set min to always keep a few items visible, and gap to match your row spacing so the math is exact.
Usage
Do
- Feed it variable-width items — tags, chips, avatars, crumbs.
- Use `overflowIndicator` to make the tail reachable via a menu.
- Match `gap` to your visual row spacing.
- Set `min` to guarantee a few items always show.
Don't
- Rely on it for vertical wrapping; it's a single-line collapser.
- Hide critical actions behind `+N` with no menu to reveal them.
- Give it thousands of items; it measures every one.
Accessibility
- The measurement row is `aria-hidden`, so assistive tech sees each item only once.
- The default `+N` chip carries an `aria-label` ("N more"); when you supply a menu indicator, the collapsed items remain reachable through it.
OverflowList props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | |
gap | number | 8 | Gap between items in px (also reserved before the indicator). |
items * | ReactNode[] | — | The items to lay out; each is measured and shown until the row runs out of room. |
min | number | 0 | Minimum number of items to keep visible even under heavy overflow. |
overflowIndicator | ((hiddenCount: number, hiddenItems: ReactNode[]) => ReactNode) | — | Render the overflow affordance for the collapsed tail. Defaults to a `+N` count chip. Receives the hidden count and the hidden item nodes (e.g. to populate a DropdownMenu). |
style | CSSProperties | — |