import * as React from 'react';
import { type ReactNode } from 'react';
import { type AutocompleteProps, type TextFieldProps } from '@mui/material';
import { type ComponentsOverrides } from '@mui/material/styles';
import { type ChoicesProps, type RaRecord, type UseSuggestionsOptions } from 'ra-core';
import { type SupportCreateSuggestionOptions } from './useSupportCreateSuggestion';
import type { CommonInputProps } from './CommonInputProps';
/**
* An Input component for an autocomplete field, using an array of objects for the options
*
* Pass possible options as an array of objects in the 'choices' attribute.
*
* By default, the options are built from:
* - the 'id' property as the option value,
* - the 'name' property as the option text
* @example
* const choices = [
* { id: 'M', name: 'Male' },
* { id: 'F', name: 'Female' },
* ];
*
*
* You can also customize the properties to use for the option name and value,
* thanks to the 'optionText' and 'optionValue' attributes.
* @example
* const choices = [
* { _id: 123, full_name: 'Leo Tolstoi', sex: 'M' },
* { _id: 456, full_name: 'Jane Austen', sex: 'F' },
* ];
*
*
* `optionText` also accepts a function, so you can shape the option text at will:
* @example
* const choices = [
* { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
* { id: 456, first_name: 'Jane', last_name: 'Austen' },
* ];
* const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
*
*
* `optionText` also accepts a React Element, that can access
* the related choice through the `useRecordContext` hook. You can use Field components there.
* Note that you must also specify the `matchSuggestion` and `inputText` props
* @example
* const choices = [
* { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
* { id: 456, first_name: 'Jane', last_name: 'Austen' },
* ];
* const matchSuggestion = (filterValue, choice) => choice.first_name.match(filterValue) || choice.last_name.match(filterValue)
* const inputText = (record) => `${record.fullName} (${record.language})`;
*
* const FullNameField = () => {
* const record = useRecordContext();
* return {record.first_name} {record.last_name};
* }
* } matchSuggestion={matchSuggestion} inputText={inputText} />
*
* The choices are translated by default, so you can use translation identifiers as choices:
* @example
* const choices = [
* { id: 'M', name: 'myroot.gender.male' },
* { id: 'F', name: 'myroot.gender.female' },
* ];
*
* However, in some cases (e.g. inside a ``), you may not want
* the choice to be translated. In that case, set the `translateChoice` prop to false.
* @example
*
*
* The object passed as `options` props is passed to the Material UI component
*
* @example
*
*/
export declare const AutocompleteInput: (inProps: AutocompleteInputProps) => React.JSX.Element;
export declare const AutocompleteInputClasses: {
textField: string;
emptyLabel: string;
};
export interface AutocompleteInputProps extends Omit, ChoicesProps, UseSuggestionsOptions, Omit, Omit, 'onChange' | 'options' | 'renderInput'> {
children?: ReactNode;
debounce?: number;
emptyText?: string;
emptyValue?: any;
filterToQuery?: (searchText: string) => any;
inputText?: (option: any) => string;
onChange?: (value: Multiple extends true ? any[] : any, record: Multiple extends true ? OptionType[] : OptionType | '') => void;
setFilter?: (value: string) => void;
shouldRenderSuggestions?: any;
source?: string;
TextFieldProps?: TextFieldProps;
}
declare module '@mui/material/styles' {
interface ComponentNameToClassKey {
RaAutocompleteInput: 'root' | 'textField';
}
interface ComponentsPropsList {
RaAutocompleteInput: Partial;
}
interface Components {
RaAutocompleteInput?: {
defaultProps?: ComponentsPropsList['RaAutocompleteInput'];
styleOverrides?: ComponentsOverrides>['RaAutocompleteInput'];
};
}
}
//# sourceMappingURL=AutocompleteInput.d.ts.map