Interface DualListSelectorProps

Acts as a container for all other DualListSelector sub-components when using a composable dual list selector.

interface DualListSelectorProps {
    addAll?: ((newAvailableOptions: ReactNode[], newChosenOptions: ReactNode[]) => void);
    addAllAriaLabel?: string;
    addAllTooltip?: ReactNode;
    addAllTooltipProps?: any;
    addSelected?: ((newAvailableOptions: ReactNode[], newChosenOptions: ReactNode[]) => void);
    addSelectedAriaLabel?: string;
    addSelectedTooltip?: ReactNode;
    addSelectedTooltipProps?: any;
    availableOptions?: ReactNode[] | DualListSelectorTreeItemData[];
    availableOptionsActions?: ReactNode[];
    availableOptionsSearchAriaLabel?: string;
    availableOptionsStatus?: string;
    availableOptionsTitle?: string;
    children?: ReactNode;
    chosenOptions?: ReactNode[] | DualListSelectorTreeItemData[];
    chosenOptionsActions?: ReactNode[];
    chosenOptionsSearchAriaLabel?: string;
    chosenOptionsStatus?: string;
    chosenOptionsTitle?: string;
    className?: string;
    controlsAriaLabel?: string;
    filterOption?: ((option: ReactNode, input: string) => boolean);
    id?: string;
    isDisabled?: boolean;
    isSearchable?: boolean;
    isTree?: boolean;
    onAvailableOptionsSearchInputChanged?: ((event: FormEvent<HTMLInputElement>, value: string) => void);
    onChosenOptionsSearchInputChanged?: ((event: FormEvent<HTMLInputElement>, value: string) => void);
    onListChange?: ((event: MouseEvent<HTMLElement, MouseEvent>, newAvailableOptions: ReactNode[], newChosenOptions: ReactNode[]) => void);
    onOptionCheck?: ((event: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element> | ChangeEvent<HTMLInputElement>, checked: boolean, checkedId: string, newCheckedItems: string[]) => void);
    onOptionSelect?: ((event: MouseEvent<Element, MouseEvent> | ChangeEvent<Element> | KeyboardEvent<Element>, index: number, isChosen: boolean, id: string, itemData: any, parentData: any) => void);
    removeAll?: ((newAvailableOptions: ReactNode[], newChosenOptions: ReactNode[]) => void);
    removeAllAriaLabel?: string;
    removeAllTooltip?: ReactNode;
    removeAllTooltipProps?: any;
    removeSelected?: ((newAvailableOptions: ReactNode[], newChosenOptions: ReactNode[]) => void);
    removeSelectedAriaLabel?: string;
    removeSelectedTooltip?: ReactNode;
    removeSelectedTooltipProps?: any;
}

Properties

addAll? addAllAriaLabel? addAllTooltip? addAllTooltipProps? addSelected? addSelectedAriaLabel? addSelectedTooltip? addSelectedTooltipProps? availableOptions? availableOptionsActions? availableOptionsSearchAriaLabel? availableOptionsStatus? availableOptionsTitle? children? chosenOptions? chosenOptionsActions? chosenOptionsSearchAriaLabel? chosenOptionsStatus? chosenOptionsTitle? className? controlsAriaLabel? filterOption? id? isDisabled? isSearchable? isTree? onAvailableOptionsSearchInputChanged? onChosenOptionsSearchInputChanged? onListChange? onOptionCheck? onOptionSelect? removeAll? removeAllAriaLabel? removeAllTooltip? removeAllTooltipProps? removeSelected? removeSelectedAriaLabel? removeSelectedTooltip? removeSelectedTooltipProps?

Properties

OptionaladdAll

addAll?: ((newAvailableOptions: ReactNode[], newChosenOptions: ReactNode[]) => void)

Optional callback for the dynamically built add all button

OptionaladdAllAriaLabel

addAllAriaLabel?: string

Accessible label for the dynamically built add all button

OptionaladdAllTooltip

addAllTooltip?: ReactNode

Tooltip content for the dynamically built add all button

OptionaladdAllTooltipProps

addAllTooltipProps?: any

Additonal tooltip properties for the dynamically built add all tooltip

OptionaladdSelected

addSelected?: ((newAvailableOptions: ReactNode[], newChosenOptions: ReactNode[]) => void)

Optional callback for the dynamically built add selected button

OptionaladdSelectedAriaLabel

addSelectedAriaLabel?: string

Accessible label for the dynamically built add selected button

OptionaladdSelectedTooltip

addSelectedTooltip?: ReactNode

Tooltip content for the dynamically built add selected button

OptionaladdSelectedTooltipProps

addSelectedTooltipProps?: any

Additonal tooltip properties for the dynamically built add selected tooltip

OptionalavailableOptions

availableOptions?: ReactNode[] | DualListSelectorTreeItemData[]

Options to display in the dynamically built available options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format.

OptionalavailableOptionsActions

availableOptionsActions?: ReactNode[]

Actions to be displayed above the dynamically built available options pane.

OptionalavailableOptionsSearchAriaLabel

availableOptionsSearchAriaLabel?: string

Accessible label for the search input on the dynamically built available options pane.

OptionalavailableOptionsStatus

availableOptionsStatus?: string

Status message to display above the dynamically built available options pane.

OptionalavailableOptionsTitle

availableOptionsTitle?: string

Title applied to the dynamically built available options pane.

Optionalchildren

children?: ReactNode

Content to be rendered in the dual list selector. Panes & controls will not be built dynamically when children are provided.

OptionalchosenOptions

chosenOptions?: ReactNode[] | DualListSelectorTreeItemData[]

Options to display in the dynamically built chosen options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format.

OptionalchosenOptionsActions

chosenOptionsActions?: ReactNode[]

Actions to be displayed above the dynamically built chosen options pane.

OptionalchosenOptionsSearchAriaLabel

chosenOptionsSearchAriaLabel?: string

Accessible label for the search input on the dynamically built chosen options pane.

OptionalchosenOptionsStatus

chosenOptionsStatus?: string

Status message to display above the dynamically built chosen options pane.

OptionalchosenOptionsTitle

chosenOptionsTitle?: string

Title applied to the dynamically built chosen options pane.

OptionalclassName

className?: string

Additional classes applied to the dual list selector.

OptionalcontrolsAriaLabel

controlsAriaLabel?: string

Accessible label for the dynamically built controls between the two panes.

OptionalfilterOption

filterOption?: ((option: ReactNode, input: string) => boolean)

Optional filter function for custom filtering based on search string. Used with a dynamically built search input.

Optionalid

id?: string

Id of the dual list selector.

OptionalisDisabled

isDisabled?: boolean

Flag indicating if the dual list selector is in a disabled state

OptionalisSearchable

isSearchable?: boolean

Flag indicating a search bar should be included above both the dynamically built available and chosen panes.

OptionalisTree

isTree?: boolean

Flag indicating if the dual list selector uses trees instead of simple lists

OptionalonAvailableOptionsSearchInputChanged

onAvailableOptionsSearchInputChanged?: ((event: FormEvent<HTMLInputElement>, value: string) => void)

A callback for when the search input value for the dynamically built available options changes.

OptionalonChosenOptionsSearchInputChanged

onChosenOptionsSearchInputChanged?: ((event: FormEvent<HTMLInputElement>, value: string) => void)

A callback for when the search input value for the dynamically built chosen options changes.

OptionalonListChange

onListChange?: ((event: MouseEvent<HTMLElement, MouseEvent>, newAvailableOptions: ReactNode[], newChosenOptions: ReactNode[]) => void)

Callback fired every time dynamically built options are chosen or removed

OptionalonOptionCheck

onOptionCheck?: ((event: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element> | ChangeEvent<HTMLInputElement>, checked: boolean, checkedId: string, newCheckedItems: string[]) => void)

Optional callback fired when a dynamically built option is checked

OptionalonOptionSelect

onOptionSelect?: ((event: MouseEvent<Element, MouseEvent> | ChangeEvent<Element> | KeyboardEvent<Element>, index: number, isChosen: boolean, id: string, itemData: any, parentData: any) => void)

Optional callback fired when a dynamically built option is selected

OptionalremoveAll

removeAll?: ((newAvailableOptions: ReactNode[], newChosenOptions: ReactNode[]) => void)

Optional callback for the dynamically built remove all button

OptionalremoveAllAriaLabel

removeAllAriaLabel?: string

Accessible label for the dynamically built remove all button

OptionalremoveAllTooltip

removeAllTooltip?: ReactNode

Tooltip content for the dynamically built remove all button

OptionalremoveAllTooltipProps

removeAllTooltipProps?: any

Additonal tooltip properties for the dynamically built remove all tooltip

OptionalremoveSelected

removeSelected?: ((newAvailableOptions: ReactNode[], newChosenOptions: ReactNode[]) => void)

Optional callback for the dynamically built remove selected button

OptionalremoveSelectedAriaLabel

removeSelectedAriaLabel?: string

Accessible label for the dynamically built remove selected button

OptionalremoveSelectedTooltip

removeSelectedTooltip?: ReactNode

Tooltip content for the dynamically built remove selected button

OptionalremoveSelectedTooltipProps

removeSelectedTooltipProps?: any

Additonal tooltip properties for the dynamically built remove selected tooltip

Settings

Member Visibility

On This Page

Properties