For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt, and this page is available as Markdown at https://wallarm.github.io/design-system/components/overflow-list.md.
Design System

    OverflowList

    Lays a set of items out in one row and folds whatever will not fit into an overflow control — reach for OverflowTooltip instead when the thing overrunning is a single run of text rather than a set. By default the overflow is a +N more chip opening a popover of every item; compose it yourself from the OverflowListMore parts (Trigger, Content, Header, Items, Count), or pass any overflowRenderer(hiddenItems, { allItems, visibleItems }) of your own. It re-measures whenever the container changes width.

    Source · Storybook

    Usage

    import { OverflowList } from '@wallarm-org/design-system/OverflowList';
import { Tag } from '@wallarm-org/design-system/Tag';

    Examples

    Collapsed

    The same nine in 200px: two survive and the +N takes the rest, which is the whole job.

    Collapse from start

    collapseFrom='start' hides the beginning and keeps the end in view — for a path or a history where the most recent items are the ones that matter.

    Min visible items

    minVisibleItems puts a floor under the measurement: however tight the column gets, that many items stay and the rest go to the +N rather than the row emptying out.

    Resizable container

    Drag the box's right edge: the split is re-measured as the width changes rather than at breakpoints, which is what makes it safe inside a resizable panel.

    With header

    The full composition: a header counting every item over the popover list, built from OverflowListMoreHeader and OverflowListMoreCount in plain JSX. Items already in the row are listed first and faded.

    Hidden only

    show='hidden' lists only what the row folded away — the pattern for editable contexts such as a multi-select input, where the visible chips are right there.

    Cover placement

    placement='cover' opens the popover over the row itself, from its left edge.

    Pluralized header

    When the header needs the number as a value — pluralization, i18n — read it with useOverflowListMore() inside your own component instead of OverflowListMoreCount.

    Custom renderer

    overflowRenderer is just a function of the hidden items — anything goes, no popover required.

    Props

    PropTypeDefaultDescription
    items *T[]Measurements are cached by array identity — keep it referentially stable.
    itemRenderer *(item: T, index: number) => ReactNode
    overflowRendererOverflowListRenderer<T> | undefinedRenders the overflow indicator. Also called once in the hidden measurement layer with every item hidden, so it must be pure. Compose it from the OverflowListMore parts; defaults to <OverflowListMore />.
    minVisibleItemsnumber | undefinedKeep at least this many items visible however narrow the row gets.
    onOverflow((hiddenItems: T[]) => void) | undefined
    collapseFromCollapseDirection | undefined
    alwaysRenderOverflowboolean | undefinedCall overflowRenderer even when nothing is hidden. OverflowListMore itself renders nothing at zero hidden items.
    defaultCheckedboolean | undefined
    defaultValuestring | number | readonly string[] | undefined
    autoFocusboolean | undefined
    idstring | undefined
    tabIndexnumber | undefined
    titlestring | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined
    data-testidstring | undefined

    OverflowListMore

    PropTypeDefaultDescription
    placement"trigger" | "cover" | undefinedtriggertrigger — the popover opens below the "+N" chip. cover — the popover opens over the row, from the list's left edge.
    openboolean | undefined
    onOpenChange((open: boolean) => void) | undefined
    data-testidstring | undefined

    OverflowListMoreContent

    PropTypeDefaultDescription
    titlestring | undefined
    defaultCheckedboolean | undefined
    defaultValuestring | number | readonly string[] | undefined
    autoFocusboolean | undefined
    tabIndexnumber | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined
    data-testidstring | undefined
    minWidthPopoverSizeDimension | undefined
    maxWidthPopoverSizeDimension | undefined360px
    minHeightPopoverSizeDimension | undefinedauto
    maxHeightPopoverSizeDimension | undefined

    OverflowListMoreCount

    PropTypeDefaultDescription
    of"hidden" | "total" | undefinedhiddenhidden — items folded into the overflow; total — every item.
    titlestring | undefined
    defaultCheckedboolean | undefined
    defaultValuestring | number | readonly string[] | undefined
    autoFocusboolean | undefined
    idstring | undefined
    tabIndexnumber | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined
    data-testidstring | undefined

    OverflowListMoreHeader

    PropTypeDefaultDescription
    titlestring | undefined
    defaultCheckedboolean | undefined
    defaultValuestring | number | readonly string[] | undefined
    autoFocusboolean | undefined
    idstring | undefined
    tabIndexnumber | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined
    asChildboolean | undefined
    data-testidstring | undefined
    align{ left: string; center: string; right: string; }
    inline{ true: string; }
    grow{ true: string; }
    truncate{ true: string; false: string; }
    decoration{ dashed: string; }
    lineHeight{ none: string; tight: string; snug: string; normal: string; relaxed: string; }
    textTransform{ uppercase: string; lowercase: string; capitalize: string; none: string; }
    lineClampnumber | undefined

    OverflowListMoreItems

    PropTypeDefaultDescription
    show"hidden" | "all" | undefinedallall lists every item (visible ones first); hidden only the folded ones.
    dimVisibleboolean | undefinedtrueFade the items that are already visible in the row. Only with show='all'.
    renderItem((item: T, index: number) => ReactNode) | undefinedItem renderer for the popover. Defaults to the list's itemRenderer. T is not linked to the list's item type — annotate the parameter.
    titlestring | undefined
    defaultCheckedboolean | undefined
    defaultValuestring | number | readonly string[] | undefined
    autoFocusboolean | undefined
    idstring | undefined
    tabIndexnumber | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined
    data-testidstring | undefined

    OverflowListMoreTrigger

    PropTypeDefaultDescription
    size"small" | "medium" | "large" | null | undefined
    titlestring | undefined
    defaultCheckedboolean | undefined
    defaultValuestring | number | readonly string[] | undefined
    autoFocusboolean | undefined
    idstring | undefined
    tabIndexnumber | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined
    type"button" | "submit" | "reset" | undefined
    disabledboolean | undefined
    namestring | undefined
    data-testidstring | undefined