Reference headless

tabs

import { … } from '@kumiki/headless/tabs'

interface 4 type 7 function 1

interface Interfaces 4

interface tabs/index.ts · L84

# CreateTabsOptions

Members

activation?: optional activation?: TabsActivation
###### Inherited from

CreateTabsInput.activation
defaultValue?: optional defaultValue?: string | null
###### Inherited from

CreateTabsInput.defaultValue
direction?: optional direction?: TabsDirection
disabled?: optional disabled?: boolean
###### Inherited from

CreateTabsInput.disabled
id?: optional id?: string
items: items: readonly TabItem[]
###### Inherited from

CreateTabsInput.items
navigation?: optional navigation?: "wrap" | "clamp"
Whether arrow navigation wraps (default per APG) or clamps.

###### Inherited from

CreateTabsInput.navigation
onValueChange?: optional onValueChange?: (value) => void
###### Parameters

###### value

string | null

###### Returns

void
orientation?: optional orientation?: TabsOrientation

interface

# TabItem

Members

disabled?: readonly optional disabled?: boolean
###### Overrides

CollectionItem.disabled
id: readonly id: string
###### Overrides

CollectionItem.id
label?: readonly optional label?: string
###### Overrides

CollectionItem.label
value: readonly value: string

interface

# TabsContext

Members

activation: activation: TabsActivation
focusedId: focusedId: string | null
items: items: readonly TabItem[]
value: value: string | null

interface tabs/index.ts · L41

# TabsController

Members

activation: readonly activation: TabsActivation
context: readonly context: Readonly<TabsContext>
disabled: readonly disabled: boolean
focusedId: readonly focusedId: string | null
id: readonly id: string
items: readonly items: readonly TabItem[]
list: readonly list: Attachment
Attach to the tablist container.
machine: readonly machine: TabsMachine
state: readonly state: TabsState
value: readonly value: string | null
panel(): panel(item): Attachment
Attach to one tabpanel.

###### Parameters

###### item

TabItem

###### Returns

Attachment
panelElementId(): panelElementId(itemId): string
DOM id for a panel by its item id.

###### Parameters

###### itemId

string

###### Returns

string
select(): select(id): void
###### Parameters

###### id

string

###### Returns

void
setActivation(): setActivation(activation): void
###### Parameters

###### activation

TabsActivation

###### Returns

void
setDirection(): setDirection(direction): void
Update writing direction. RTL only affects horizontal orientation: ArrowLeft becomes next, ArrowRight becomes prev.

###### Parameters

###### direction

TabsDirection

###### Returns

void
setDisabled(): setDisabled(disabled): void
###### Parameters

###### disabled

boolean

###### Returns

void
setItems(): setItems(items): void
###### Parameters

###### items

readonly TabItem[]

###### Returns

void
setOrientation(): setOrientation(orientation): void
Update the visual orientation. The machine doesn't care; this only changes which arrow keys the controller listens for.

###### Parameters

###### orientation

TabsOrientation

###### Returns

void
setValue(): setValue(value): void
###### Parameters

###### value

string | null

###### Returns

void
subscribe(): subscribe(listener): () => void
###### Parameters

###### listener

(snapshot) => void

###### Returns

() => void
tab(): tab(item): Attachment
Attach to one tab button.

###### Parameters

###### item

TabItem

###### Returns

Attachment
tabElementId(): tabElementId(itemId): string
DOM id for a tab button by its item id.

###### Parameters

###### itemId

string

###### Returns

string

type Type Aliases 7

type tabs/index.ts · L36

# Attachment

Attachment = (node) => void | (() => void)

Parameters

node: HTMLElement

Returns

void | (() => void)

type

# TabsActivation

TabsActivation = "automatic" | "manual"

type tabs/index.ts · L39

# TabsDirection

TabsDirection = "ltr" | "rtl"

type

# TabsEvent

TabsEvent = { id: string; type: "SELECT"; } | { id: string; type: "FOCUS"; } | { type: "BLUR"; } | { direction: NavigateDirection; type: "NAVIGATE"; } | { type: "ACTIVATE_FOCUSED"; } | { type: "SET.VALUE"; value: string | null; } | { items: ReadonlyArray<TabItem>; type: "SET.ITEMS"; } | { activation: TabsActivation; type: "SET.ACTIVATION"; } | { type: "DISABLE"; } | { type: "ENABLE"; }

type

# TabsMachine

TabsMachine = Machine<TabsContext, TabsEvent, TabsState>

type tabs/index.ts · L38

# TabsOrientation

TabsOrientation = "horizontal" | "vertical"

type

# TabsState

TabsState = "idle" | "disabled"

function Functions 1

function tabs/index.ts · L103

# createTabs ( )

createTabs(options): TabsController

Create a Tabs controller plus list / tab / panel attachment factories.

Parameters

options: CreateTabsOptions

Returns

TabsController