Dockable

A tab button (role="tab") following the APG tabs pattern with manual activation. Draggable.

"A tab button (role="tab"), following the APG tabs pattern with manual activation: arrow keys (along the tab list's orientation), Home and End move focus; click, Enter or Space selects. Enter or Space on the selected tab moves focus into its panel. Renders only its children."

<Dockable.Tab
    node={tab}
    className="px-3 data-selected:bg-palette-soft data-dragging:opacity-40"
>
    {tab.getName()}
    {tab.isCloseable() ? <CloseButton tab={tab} /> : null}
</Dockable.Tab>

Render it from a Dockable.TabList child function.

Props

TabProps extends the common primitive props.

prop	type	default	description
`node`	`TabNode`	required	the tab to render
`children`	`ReactNode`	none	the tab button's content; the primitive renders no text of its own

State

TabState:

field	type	description
`selected`	`boolean`	the tab is its tabset's selected tab
`pinned`	`boolean`	the tab is pinned
`dragging`	`boolean`	the tab is being dragged
`popoutEnabled`	`boolean`	the tab can be popped out into a window
`overflowHidden`	`boolean`	the tab does not fit in its strip, so it is hidden (tab overflow)

Data attributes and ARIA

attribute	value
`data-layout-path`	the tab button path: `/ts0/tb1`
`data-selected`	the selected tab
`data-pinned`	pinned
`data-dragging`	being dragged
`data-popout-enabled`	the tab allows popping out, and popouts are supported
`data-overflow-hidden`	the tab does not fit in its strip, so it is hidden (tab overflow); it also gets `display: none`
`id`	`getTabButtonId(tab)` (`dockable-tabbutton-<id>`)
`role`	`"tab"`
`aria-selected`	`true` or `false`
`aria-controls`	its panel's id
`aria-keyshortcuts`	`focusTabToggle` and (when closeable) `closeTab`
`tabIndex`	`0` on the tab stop (the selected tab, or the first tab when none is), else `-1`
`draggable`	the tab's `enableDrag`

Keyboard

key	does
Left/Right (Up/Down when vertical)	focus the previous/next tab
Home / End	focus the first/last tab
Enter, Space	select; on the selected tab, move focus into its panel
`closeTab` (`Ctrl+Delete`)	close the tab when closeable, focusing a neighbour first
`focusTabToggle` (off by default)	move focus into the tab's content

Behaviour

A click selects the tab (Actions.selectTab). In a border, a click on the selected tab closes the border's panel (the same action, which the model turns into a deselect).
It is the drag source for its tab (useDragNode), and the element the browser snapshots as the drag image.
The engine measures it (for drop hit-testing within the strip).

Tab overflow

A tab that does not fit in its strip gets display: none (structural) and data-overflow-hidden. The arrow keys still reach it: moving onto a hidden tab selects it, which brings it into the strip.