@nish1896/rhf-mui-components
Version:
A suite of 20+ reusable Material UI components for React Hook Form to minimize your time and effort in creating and styling forms
30 lines (29 loc) • 2 kB
TypeScript
import { type ReactNode } from 'react';
import { type FieldValues, type Path, type Control, type RegisterOptions } from 'react-hook-form';
import { type AutocompleteProps } from '@mui/material/Autocomplete';
import type { FormLabelProps, FormControlLabelProps, CheckboxProps, FormHelperTextProps, StringArr, StrObjOption, AutoCompleteTextFieldProps, MuiChipProps } from '../../types';
type AutoCompleteProps = Omit<AutocompleteProps<StrObjOption, true, false, false>, 'freeSolo' | 'fullWidth' | 'renderInput' | 'renderOption' | 'options' | 'value' | 'defaultValue' | 'multiple' | 'onChange' | 'getOptionKey' | 'getOptionLabel' | 'isOptionEqualToValue' | 'autoHighlight' | 'disableCloseOnSelect' | 'ChipProps'>;
export type RHFMultiAutocompleteProps<T extends FieldValues> = {
fieldName: Path<T>;
control: Control<T>;
registerOptions?: RegisterOptions<T, Path<T>>;
options: StrObjOption[];
labelKey?: string;
valueKey?: string;
selectAllText?: string;
onValueChange?: (fieldValue: StringArr, targetValue?: string) => void;
label?: ReactNode;
showLabelAboveFormField?: boolean;
formLabelProps?: FormLabelProps;
checkboxProps?: CheckboxProps;
formControlLabelProps?: FormControlLabelProps;
required?: boolean;
helperText?: ReactNode;
errorMessage?: ReactNode;
hideErrorMessage?: boolean;
formHelperTextProps?: FormHelperTextProps;
textFieldProps?: AutoCompleteTextFieldProps;
ChipProps?: MuiChipProps;
} & AutoCompleteProps;
declare const RHFMultiAutocomplete: <T extends FieldValues>({ fieldName, control, registerOptions, options, labelKey, valueKey, selectAllText, onValueChange, label, showLabelAboveFormField, formLabelProps, checkboxProps, formControlLabelProps, required, helperText, errorMessage, hideErrorMessage, formHelperTextProps, textFieldProps, slotProps, ChipProps, ...otherAutoCompleteProps }: RHFMultiAutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
export default RHFMultiAutocomplete;