Resizable primitive

Headless Resizable: the behavior, keyboard support and ARIA of the WAI-ARIA Window Splitter pattern, with no styles.

@ndop/primitives/resizable
WAI-ARIA: Window Splitter

Import

Primitives ship in the @ndop/primitives package and have no styles. Their state is on data attributes for you to style. The styled Resizable is built on this one.

import {
  NdResizablePanelGroup,
  NdResizableHandle,
  NdResizablePanel,
} from '@ndop/primitives/resizable';

Accessibility

Implements the Window Splitter pattern of the WAI-ARIA Authoring Practices.

Keyboard

Keys the component handles.

Key	Action
`Tab`	Moves focus to the next handle, in document order.
`ArrowLeft`or`ArrowRight`	In a horizontal group, moves the focused handle toward that side by `keyboardStep`.
`ArrowUp`or`ArrowDown`	In a vertical group, moves the focused handle up or down by `keyboardStep`.
`Home`	Shrinks the panel before the handle to its `minSize`, as far as the panel after it allows.
`End`	Grows the panel before the handle to its `maxSize`, as far as the panel after it allows.

Focus

Handles are in the tab order unless disabled; panels aren't.
Dragging a handle with the pointer doesn't move focus.

Right-to-left

In a horizontal group in a right-to-left layout, the panels run from right to left, so ArrowLeft grows the panel before the handle and ArrowRight shrinks it, and dragging follows the pointer. Direction comes from the nearest dir attribute.

API reference

NdResizablePanelGroup

[ndResizablePanelGroup]from @ndop/primitives/resizable

A group of resizable panels: the WAI-ARIA Window Splitter pattern. Its panels share its width (or height) and each NdResizableHandle between two panels moves the boundary between them, with the keyboard or a pointer.

NdResizablePanelGroup binding	Type	Default
`[orientation]` Whether the panels sit side by side or stacked.	`'vertical' \| 'horizontal'`	`'horizontal'`
`[keyboardStep]` How far an arrow key moves a handle, in percent.	`number`	`10`
`[(sizes)]` The panels' sizes in percent, in document order. Two-way bindable with `[(sizes)]`; when unset, each panel's `defaultSize` applies.	`readonly number[]`	`[]`

Data attribute	Values
`data-orientation`	—

NdResizableHandle

[ndResizableHandle]role separatorfrom @ndop/primitives/resizable

The handle between two panels (role="separator"): arrow keys, Home and End, or a pointer drag move the boundary between the panel before it and the panel after it. Name it with aria-label or aria-labelledby.

Manages aria-orientation, aria-valuenow, aria-valuemin, aria-valuemax, aria-controls, tabindex.

NdResizableHandle binding	Type	Default
`[disabled]` Stops it moving and takes it out of the tab order.	`boolean`	`false`

Data attribute	Values
`data-dragging`	—
`data-disabled`	—

NdResizablePanel

[ndResizablePanel]from @ndop/primitives/resizable

One panel of a NdResizablePanelGroup. Its flex style follows its size, and its content is clipped to it.

Manages id.

NdResizablePanel binding	Type	Default
`[defaultSize]` Initial size in percent; without one, it shares the space left.	`number \| undefined`	`undefined`
`[minSize]` Smallest size in percent.	`number`	`0`
`[maxSize]` Largest size in percent.	`number`	`100`

Data attribute	Values
`data-size`	—