@engie-group/fluid-design-system-react/lib/components/multi-select/NJMultiSelect.d.ts

Fluid Design System React

import React from 'react';
import { ICommonFormItemProps } from '../form-item/NJFormItem';
import { IListItemProps } from '../list';
export declare const NJMultiSelect: React.ForwardRefExoticComponent<Omit<ICommonFormItemProps, "value"> & IMultiSelectInputProps & React.RefAttributes<HTMLInputElement>>;
export interface IMultiSelectInputProps {
    /**
     * Instructions on how to navigate the list. It is append after the input label.
     * @example "Use up and down arrows and Enter to select a value"
     */
    listNavigationLabel: string;
    /**
     * Button default label when no value is selected. It is append after the input label.
     * @example "Select a value"
     */
    buttonDefaultValueLabel: string;
    /**
     * Input values
     */
    value?: string[];
    children: React.ReactElement<IListItemProps> | React.ReactElement<IListItemProps>[];
    onChange?: (newValues: string[]) => void;
    onOptionToggle?: (value: string, isSelected: boolean) => void;
    /**
     * Max tags to display
     */
    maxTagsToDisplay?: number;
    /**
     * Selected options tag color. Can only be grey or brand
     */
    tagColor?: 'brand' | 'grey';
    /**
     * Whether or no to display selected items. When set to `false` and number of selected > 1,
     * instead of displaying each selected item as tags it only display one tag `X selected`
     */
    displaySelectedItems?: boolean;
    /**
     * Selected text when `displaySelectedItems = false`:
     * @example '5 selected`
     */
    selectedText?: string;
    /**
     * Tag close label for accessibility, default is `Deselect` and it will be followed by the tag label. So focusing the close icon will read `Remove tag label`.
     * Make sure to set a meaningful value and a translated one
     */
    tagCloseLabel?: string;
    /**
     * Tag close label for accessibility, default is `Deselect all`. So focusing the close icon will read `Deselect all`.
     * Make sure to set a meaningful value and a translated one
     */
    tagResetSelectionLabel?: string;
}