diff --git a/striker-ui/components/Autocomplete.tsx b/striker-ui/components/Autocomplete.tsx index f727bd09..5bd11c3a 100644 --- a/striker-ui/components/Autocomplete.tsx +++ b/striker-ui/components/Autocomplete.tsx @@ -2,6 +2,7 @@ import { Autocomplete as MUIAutocomplete, autocompleteClasses as muiAutocompleteClasses, AutocompleteProps as MUIAutocompleteProps, + AutocompleteRenderInputParams as MUIAutocompleteRenderInputParams, Grow as MUIGrow, outlinedInputClasses as muiOutlinedInputClasses, Paper as MUIPaper, @@ -11,17 +12,26 @@ import { import { GREY, TEXT } from '../lib/consts/DEFAULT_THEME'; -import OutlinedInputWithLabel from './OutlinedInputWithLabel'; +import OutlinedInputWithLabel, { + OutlinedInputWithLabelProps, +} from './OutlinedInputWithLabel'; + +type AutocompleteOptionalProps = { + extendRenderInput?: ( + inputWithLabelProps: OutlinedInputWithLabelProps, + renderInputParams?: MUIAutocompleteRenderInputParams, + ) => void; +}; type AutocompleteProps< T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, -> = { label: string } & Omit< - MUIAutocompleteProps, - 'renderInput' -> & +> = AutocompleteOptionalProps & { label: string } & Omit< + MUIAutocompleteProps, + 'renderInput' + > & Partial< Pick< MUIAutocompleteProps, @@ -44,7 +54,8 @@ const Autocomplete = < >( autocompleteProps: AutocompleteProps, ): JSX.Element => { - const { componentsProps, label, renderInput, sx } = autocompleteProps; + const { componentsProps, extendRenderInput, label, renderInput, sx } = + autocompleteProps; const combinedComponentsProps: AutocompleteProps< T, Multiple, @@ -61,24 +72,29 @@ const Autocomplete = < }; const combinedRenderInput = renderInput ?? - (({ fullWidth, InputProps, InputLabelProps, inputProps }) => ( - - )); + ((renderInputParams) => { + const { fullWidth, InputProps, InputLabelProps, inputProps } = + renderInputParams; + const inputWithLabelProps: OutlinedInputWithLabelProps = { + formControlProps: { + fullWidth, + ref: InputProps.ref, + }, + inputLabelProps: InputLabelProps, + inputProps: { + className: InputProps.className, + endAdornment: InputProps.endAdornment, + inputProps, + startAdornment: InputProps.startAdornment, + }, + label, + }; + + extendRenderInput?.call(null, inputWithLabelProps, renderInputParams); + + // eslint-disable-next-line react/jsx-props-no-spreading + return ; + }); const combinedSx = { [`& .${muiOutlinedInputClasses.root} .${muiAutocompleteClasses.endAdornment}`]: {