API select

• Item

• config?: PropsConfig<SelectProps<Item>>

an optional alert config

SelectWidget<Item>

a SelectWidget

SelectProps<any>

a copy of the default 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

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

• 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

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)

''

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

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

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)

''

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

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