Select

• Item

• config?: PropsConfig<SelectProps<Item>>

config of the modal, either as a store or as an object containing values or stores.

SelectWidget<Item>

a new select widget instance

SelectProps<any>

the default Select config

• T

id: string

Unique id to identify the item

item: T

Original item given in the parameters

selected: boolean

Specify if the item is checked

• Item

The type of the items in the selection.

• props: Partial<SelectProps<Item>>

The properties for the Select component.

Element

The rendered Select component.

The rendered Select component.

This component uses a widget context to manage its state and directives. It supports custom badge labels and item labels through the widget configuration.

• Item

clear(): void

Clear all the selected items

void

clearText(): void

Clear the filter text

void

close(): void

close the select

void

highlight(item): void

Highlight the given item, if there is a corresponding match among the visible list

• item: Item

void

highlightFirst(): void

Highlight the first item among the visible list

void

highlightLast(): void

Highlight the last item among the visible list

void

highlightNext(): void

Highlight the next item among the visible list. Loop to the first item if needed

void

highlightPrevious(): void

Highlight the previous item among the visible list Loop to the last item if needed

void

open(): void

open the select

void

select(item): void

Select the provided item. The selected list is used to

• item: Item

the item to select

void

toggle(isOpen?): void

Toggle the dropdown menu

• isOpen?: boolean

If specified, set the menu in the defined state.

void

toggleItem(item, selected?): void

Toggle the selection of an item

• item: Item

the item to toggle

• selected?: boolean

an optional boolean to enforce the selected/unselected state instead of toggling

void

unselect(item): void

Unselect the provided item.

• item: Item

the item to unselect

void

• SelectItemContext

• Item

The type of the items in the Select component.

api: SelectApi<Item>

all the api functions to interact with the widget

directives: SelectDirectives<Item>

directives to be used on html elements in the template of the widget or in the slots

state: SelectState<Item>

the state of the widget

• Item

badgeAttributesDirective: Directive<ItemContext<Item>>

A directive that applies all the necessary attributes to the container badges

badgeCloseButtonDirective: Directive<ItemContext<Item>>

A directive to be applied to a button that closes a badge

floatingDirective: Directive<void, SSRHTMLElement>

Directive that enables dynamic positioning of menu element

hasFocusDirective: Directive

Directive to be used in the input group and the menu containers

inputContainerDirective: Directive

A directive to be applied to the element that contains the badges and the input

inputDirective: Directive

A directive to be applied to the input

itemAttributesDirective: Directive<ItemContext<Item>>

A directive that applies all the necessary attributes to the dropdown item

menuAttributesDirective: Directive

A directive that applies all the necessary attributes to the dropdown menu

referenceDirective: Directive<void, SSRHTMLElement>

A directive to be applied to the input group element serves as the base for menu positioning

• Item

The type of the item within the select context.

api: SelectApi<Item>

all the api functions to interact with the widget

directives: SelectDirectives<Item>

directives to be used on html elements in the template of the widget or in the slots

itemContext: ItemContext<Item>

Contextual data related to an item

state: SelectState<Item>

the state of the widget

• Item

The type of the items in the select component.

allowedPlacements: Placement[]

List of allowed placements for the dropdown. This refers to the allowedPlacements from floating UI, given the different Placement possibilities.

['bottom-start', 'top-start', 'bottom-end', 'top-end']

ariaLabel: undefined | string

aria-label used for the input inside the select

'Select'

badgeClassName: string

Class to be added on selected items (displayed in the input zone)

''

badgeLabel: SlotContent<SelectItemContext<Item>>

The template to override the way each badge on the left of the input is displayed. This define the content of the badge inside the badge container.

({itemContext}: SelectItemContext<any>) => itemContext.item

className: string

CSS classes to be applied on the widget main container

''

disabled: boolean

true if the select is disabled

false

filterText: string

Filtered text to be display in the filter input

''

id: undefined | string

id used for the input inside the select

itemLabel: SlotContent<SelectItemContext<Item>>

The template to override the way each item is displayed in the list. This define the content of the badge inside the badge container.

({itemContext}: SelectItemContext<any>) => itemContext.item

items: Item[]

List of available items for the dropdown

[]

loading: boolean

true if a loading process is being done

false

menuClassName: string

Class to be added on the dropdown menu container

''

menuItemClassName: string

Class to be added on menu items

''

open: boolean

true if the select is open

false

selected: Item[]

List of selected item ids

[]

itemIdFn(item): string

Custom function to get the id of an item By default, the item is returned

• item: Item

string

(item: any) => '' + item

navSelector(node): NodeListOf<HTMLInputElement | HTMLSpanElement>

Retrieves navigable elements within an HTML element containing badges and the input.

• node: HTMLElement

HTMLElement that contains the badges and the input

NodeListOf<HTMLInputElement | HTMLSpanElement>

(node: HTMLElement) => node.querySelectorAll('.au-select-badge,input')

onFilterTextChange(text): void

Callback called when the text filter change

• text: string

Filtered text

void

() => {}

onOpenChange(isOpen): void

Callback called dropdown open state change

• isOpen: boolean

updated open state

void

() => {}

onSelectedChange(selected): void

Callback called when the selection change

• selected: Item[]

void

() => {}

• Item

The type of the items in the select component.

ariaLabel: undefined | string

aria-label used for the input inside the select

'Select'

badgeClassName: string

Class to be added on selected items (displayed in the input zone)

''

badgeLabel: SlotContent<SelectItemContext<Item>>

The template to override the way each badge on the left of the input is displayed. This define the content of the badge inside the badge container.

({itemContext}: SelectItemContext<any>) => itemContext.item

className: string

CSS classes to be applied on the widget main container

''

disabled: boolean

true if the select is disabled

false

filterText: string

Filtered text to be display in the filter input

''

highlighted: undefined | ItemContext<Item>

Highlighted item context. It is designed to define the highlighted item in the dropdown menu

id: undefined | string

id used for the input inside the select

itemLabel: SlotContent<SelectItemContext<Item>>

The template to override the way each item is displayed in the list. This define the content of the badge inside the badge container.

({itemContext}: SelectItemContext<any>) => itemContext.item

loading: boolean

true if a loading process is being done

false

menuClassName: string

Class to be added on the dropdown menu container

''

menuItemClassName: string

Class to be added on menu items

''

open: boolean

true if the select is open

false

placement: undefined | Placement

Current placement of the dropdown

selected: Item[]

List of selected item ids

[]

selectedContexts: ItemContext<Item>[]

List of selected items to be display

visibleItems: ItemContext<Item>[]

List of item contexts, to be displayed in the menu

• Item

The type of the items that the select widget will handle.