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

Fluid Design System React

import React, { ComponentPropsWithoutRef } from 'react';
import { ICommonFormItemProps } from '../../form-item/NJFormItem';
import { NJMultiSelectItemProps } from '../item/NJMultiSelectItem';
export type NJMultiSelectRootProps = Omit<ICommonFormItemProps, 'value' | 'onChange'> & Omit<ComponentPropsWithoutRef<'button'>, 'size' | 'onChange' | 'value'> & {
    /**
     * 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;
    /**
     * Input values
     */
    value?: string[];
    initialValue?: string[];
    children: React.ReactElement<NJMultiSelectItemProps> | React.ReactElement<NJMultiSelectItemProps>[];
    onChange?: (newValues: string[]) => 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;
};
export declare const NJMultiSelectRoot: React.ForwardRefExoticComponent<Omit<ICommonFormItemProps, "onChange" | "value"> & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onChange" | "size" | "value"> & {
    /**
     * 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;
    /**
     * Input values
     */
    value?: string[];
    initialValue?: string[];
    children: React.ReactElement<NJMultiSelectItemProps> | React.ReactElement<NJMultiSelectItemProps>[];
    onChange?: (newValues: string[]) => 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;
} & React.RefAttributes<HTMLInputElement>>;