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