Queue

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import Queue, QueueMaxHeight from @prepared911/ui/queue.

Queue takes the props below and nothing else: no native attributes, no ref, no style.

Prop	Type	Default	Notes
`label`	`LocalizedMessage \| DisplayValue`	required	Header text; names the header button with the tally
`items`	`readonly QueueItem[]`	`[]`	The entries, oldest first
`icon`	`Glyph`		Decorative glyph before the label
`count`	`number`	`items.length`	Tally beside the label
`maxHeight`	`QueueMaxHeight`		Caps the entries' height and scrolls beyond it
`completedLabel`	`LocalizedMessage`		Names a completed entry's check; development builds warn once when an entry is completed and this is missing
`open`	`boolean`		Controlled open state
`defaultOpen`	`boolean`	`true`	Initial open state when uncontrolled
`onOpenChange`	`(open: boolean, details: ChangeDetails) => void`		Cancelable with `details.cancel()`
`className`	`string`		Appended to the section

QueueItem

Field	Type	Notes
`id`	`string`	Required; the React key
`content`	`LocalizedMessage \| DisplayValue`	Required
`description`	`LocalizedMessage \| DisplayValue`	Second line
`completed`	`boolean`	Default `false`
`actions`	`readonly QueueItemAction[]`	Icon buttons for the entry

QueueItemAction

Field	Type	Notes
`icon`	`Glyph`	Glyph of the icon-only button
`label`	`LocalizedMessage`	Accessible name and list key
`onClick`	`() => void`	Runs on press

QueueMaxHeight

Small (96px), Medium (128px), Large (256px).

Exports

Queue, QueueMaxHeight, and the types QueueProps, QueueItem and QueueItemAction.

Props

Name	Type	Default	Description
`label`	`LocalizedMessage \| DisplayValue`	—	Section header, such as "Queued": copy from a formatter, or data. It names the disclosure button.
`className`	`string`	—	@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
`completedLabel`	`LocalizedMessage`	—	Text that marks a completed entry for assistive technology, such as "Completed". Read before the content of each completed entry. Required in practice whenever an entry is `completed`; development builds warn once when it is missing.
`count`	`number`	—	Tally beside the label. Defaults to the number of items; pass a number to show another tally such as completed.
`defaultOpen`	`boolean`	`true`	Initial open state when uncontrolled.
`icon`	`Glyph`	—	Decorative glyph before the label.
`items`	`readonly QueueItem[]`	—	The queue, oldest first. The list layout is owned by the component; callers supply data, not structure.
`maxHeight`	`QueueMaxHeight`	—	Caps the height of the items and scrolls beyond it. Omitted, the section grows with its items.
`onOpenChange`	`CollapsibleOpenChangeHandler`	—	Fires when the header button requests a change. `details.cancel()` keeps the current state.
`open`	`boolean`	—	Whether the items are shown (controlled).

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Queue / Usage

Queue / Accessibility

On this page

Queue

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import Queue, QueueMaxHeight from @prepared911/ui/queue.

Queue takes the props below and nothing else: no native attributes, no ref, no style.

Prop	Type	Default	Notes
`label`	`LocalizedMessage \| DisplayValue`	required	Header text; names the header button with the tally
`items`	`readonly QueueItem[]`	`[]`	The entries, oldest first
`icon`	`Glyph`		Decorative glyph before the label
`count`	`number`	`items.length`	Tally beside the label
`maxHeight`	`QueueMaxHeight`		Caps the entries' height and scrolls beyond it
`completedLabel`	`LocalizedMessage`		Names a completed entry's check; development builds warn once when an entry is completed and this is missing
`open`	`boolean`		Controlled open state
`defaultOpen`	`boolean`	`true`	Initial open state when uncontrolled
`onOpenChange`	`(open: boolean, details: ChangeDetails) => void`		Cancelable with `details.cancel()`
`className`	`string`		Appended to the section

QueueItem

Field	Type	Notes
`id`	`string`	Required; the React key
`content`	`LocalizedMessage \| DisplayValue`	Required
`description`	`LocalizedMessage \| DisplayValue`	Second line
`completed`	`boolean`	Default `false`
`actions`	`readonly QueueItemAction[]`	Icon buttons for the entry

QueueItemAction

Field	Type	Notes
`icon`	`Glyph`	Glyph of the icon-only button
`label`	`LocalizedMessage`	Accessible name and list key
`onClick`	`() => void`	Runs on press

QueueMaxHeight

Small (96px), Medium (128px), Large (256px).

Exports

Queue, QueueMaxHeight, and the types QueueProps, QueueItem and QueueItemAction.

Props

Name	Type	Default	Description
`label`	`LocalizedMessage \| DisplayValue`	—	Section header, such as "Queued": copy from a formatter, or data. It names the disclosure button.
`className`	`string`	—	@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
`completedLabel`	`LocalizedMessage`	—	Text that marks a completed entry for assistive technology, such as "Completed". Read before the content of each completed entry. Required in practice whenever an entry is `completed`; development builds warn once when it is missing.
`count`	`number`	—	Tally beside the label. Defaults to the number of items; pass a number to show another tally such as completed.
`defaultOpen`	`boolean`	`true`	Initial open state when uncontrolled.
`icon`	`Glyph`	—	Decorative glyph before the label.
`items`	`readonly QueueItem[]`	—	The queue, oldest first. The list layout is owned by the component; callers supply data, not structure.
`maxHeight`	`QueueMaxHeight`	—	Caps the height of the items and scrolls beyond it. Omitted, the section grows with its items.
`onOpenChange`	`CollapsibleOpenChangeHandler`	—	Fires when the header button requests a change. `details.cancel()` keeps the current state.
`open`	`boolean`	—	Whether the items are shown (controlled).

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Queue / Usage

Queue / Accessibility

On this page