@mocanvas/mocanvas · function
declare function OverflowingToolbar({ label, maxInline, children }: OverflowingToolbarProps): react.JSX.ElementA toolbar that moves whatever will not fit into a "more" popover.
The split is measured, not guessed, so the same component works in a 320px phone frame and in a 1600px desktop one without the caller configuring anything.
## Why the *container* is measured, not the bar
The plate is width: max-content, so its own width is a consequence of how
many children it is currently showing. Deriving the split from that is a
feedback loop: dropping a button narrows the bar, which drops another. The
room available to it — the container, less what the CSS reserves for the
docks on either side — is independent of the decision, so the split settles.
A child that renders nothing still takes a slot, so a caller mapping over a fixed list gets a split that does not jump around as tools appear.
mocanvas is built by Symbio. Free for non-commercial, non-profit and development use; commercial use needs an agreement. Not affiliated with or endorsed by tldraw.