@engie-group/fluid-design-system-react/lib/components/autocomplete/NJAutocomplete.d.ts

Fluid Design System React

import React from 'react';
import { WithHTMLAttributes } from '../../utils/typeHelpers';
import { ICommonFormItemProps } from '../form-item/NJFormItem';
export type NJAutocompleteValue = {
    name: string;
    value: string;
};
export type NJAutocompleteGenericProps = Omit<ICommonFormItemProps, 'value' | 'onChange' | 'id'> & {
    id?: string;
    /**
     * Data list to search on
     *<br>
     * name: name to search on<br>
     * value: a custom value returned when user selects an item
     */
    data?: Array<NJAutocompleteValue>;
    /**
     * Limit of results to show on search
     */
    searchLimit?: number;
    /**
     * Label of the list
     * @example "Countries suggestions"
     */
    listLabel: string;
    /**
     * Instructions on how to navigate the list. It is append after the input label.
     * @example "Use the UP / DOWN arrows to navigate within the suggestion list. Press Enter to select an option. On touch devices, use swipe to navigate and double tap to select an option"
     */
    inputInstructions: string;
    /**
     * Function that returns a string to display the results
     * count depending on the count (zero, one or more).
     * @example (count) => 'No result' || `${count} result` || `${count} results`
     */
    resultsCountMessage: (resultCount: number) => string;
    /**
     * Whether to show number of results or no
     */
    showNumberOfResults?: boolean;
    /**
     * Whether to show no results message
     */
    showNoResultsMessage?: boolean;
    initialValue?: NJAutocompleteValue;
    value?: NJAutocompleteValue;
    /**
     * Function called on value select
     * @param value NJAutocompleteValue
     */
    onChange?: (value?: NJAutocompleteValue) => void;
    initialInputValue?: string;
    inputValue?: string;
    onInputValueChange?: (value?: string) => void;
    /**
     * Whether to show a clear button when input has value
     * @default true
     */
    clearable?: boolean;
    /**
     * Function called when clear button is clicked
     */
    onClear?: () => void;
    /**
     * Aria label for the clear button
     * @default "Clear input"
     */
    clearButtonAriaLabel?: string;
};
export type NJAutocompleteProps = WithHTMLAttributes<NJAutocompleteGenericProps, 'input'>;
export declare const NJAutocomplete: React.ForwardRefExoticComponent<import("../../utils/typeHelpers").HTMLAttributesWithoutComponentProps<"input", NJAutocompleteGenericProps> & Omit<ICommonFormItemProps, "id" | "onChange" | "value"> & {
    id?: string;
    /**
     * Data list to search on
     *<br>
     * name: name to search on<br>
     * value: a custom value returned when user selects an item
     */
    data?: Array<NJAutocompleteValue>;
    /**
     * Limit of results to show on search
     */
    searchLimit?: number;
    /**
     * Label of the list
     * @example "Countries suggestions"
     */
    listLabel: string;
    /**
     * Instructions on how to navigate the list. It is append after the input label.
     * @example "Use the UP / DOWN arrows to navigate within the suggestion list. Press Enter to select an option. On touch devices, use swipe to navigate and double tap to select an option"
     */
    inputInstructions: string;
    /**
     * Function that returns a string to display the results
     * count depending on the count (zero, one or more).
     * @example (count) => 'No result' || `${count} result` || `${count} results`
     */
    resultsCountMessage: (resultCount: number) => string;
    /**
     * Whether to show number of results or no
     */
    showNumberOfResults?: boolean;
    /**
     * Whether to show no results message
     */
    showNoResultsMessage?: boolean;
    initialValue?: NJAutocompleteValue;
    value?: NJAutocompleteValue;
    /**
     * Function called on value select
     * @param value NJAutocompleteValue
     */
    onChange?: (value?: NJAutocompleteValue) => void;
    initialInputValue?: string;
    inputValue?: string;
    onInputValueChange?: (value?: string) => void;
    /**
     * Whether to show a clear button when input has value
     * @default true
     */
    clearable?: boolean;
    /**
     * Function called when clear button is clicked
     */
    onClear?: () => void;
    /**
     * Aria label for the clear button
     * @default "Clear input"
     */
    clearButtonAriaLabel?: string;
} & React.RefAttributes<HTMLInputElement>>;