Dockable.TabOverflowTrigger

"The button that opens the consumer's menu of hidden tabs, inside Dockable.TabSet or Dockable.Border, next to the Dockable.TabList. It renders only while tabs are hidden, and the engine reserves the space it takes in the strip. It renders no menu: make it your menu's trigger (render), list useTabOverflow(node).hiddenTabs (or the state's hiddenTabs, typed with <Dockable.TabOverflowTrigger<Types>>), and select with tab.select, which brings the tab into the strip. It has no name of its own: give it an aria-label."

function Header({ tabset }: { tabset: TabsetNode<Types> }) {
    const { model } = useDockable<Types>();
    const { hiddenTabs } = useTabOverflow(tabset);
    return (
        <div className="flex">
            <Dockable.TabList<Types> className="flex min-w-0 flex-1">
                {(tab) => <Dockable.Tab node={tab}>{tab.label}</Dockable.Tab>}
            </Dockable.TabList>
            <Menu.Root>
                <Dockable.TabOverflowTrigger aria-label="More tabs" render={<Menu.Trigger />}>
                    {`+${hiddenTabs.length}`}
                </Dockable.TabOverflowTrigger>
                <Menu.Content>
                    {hiddenTabs.map((tab) => (
                        <Menu.Item key={tab.id} onClick={() => model.run("tab.select", { tabId: tab.id })}>
                            {tab.label}
                        </Menu.Item>
                    ))}
                </Menu.Content>
            </Menu.Root>
        </div>
    );
}

The state's hiddenTabs holds the same tabs: with the registry as the type argument (<Dockable.TabOverflowTrigger<Types>>), a render function or a className function gets typed tabs (TabOf<Types>[]).

See Tab overflow.

Props

TabOverflowTriggerProps<T> extends the common primitive props and the <button> attributes.

State

TabOverflowTriggerState<T>:

Data attributes and ARIA

Notes

• Put it in the same flex line as the tab list, with the list able to shrink (flex: 1; min-width: 0): the engine measures the space the trigger takes beside the list and keeps it for it, so the tabs and the trigger never overlap.
• It unmounts when every tab fits again; a menu left open with it closes with it.