diff --git a/packages/odyssey-react-mui/src/Autocomplete.tsx b/packages/odyssey-react-mui/src/Autocomplete.tsx index 16138187c3..be41317fa5 100644 --- a/packages/odyssey-react-mui/src/Autocomplete.tsx +++ b/packages/odyssey-react-mui/src/Autocomplete.tsx @@ -19,23 +19,65 @@ import { memo, useCallback } from "react"; import { Field } from "./Field"; -export type AutocompleteProps = { - isDisabled?: boolean; +export type AutocompleteProps< + OptionType, + HasMultipleChoices extends boolean | undefined, + IsCustomValueAllowed extends boolean | undefined +> = { + hasMultipleChoices?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["multiple"]; hint?: string; + isCustomValueAllowed?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["freeSolo"]; + isDisabled?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["disabled"]; label: string; - onChange?: MuiAutocompleteProps["onChange"]; - options: MuiAutocompleteProps["options"]; - value?: MuiAutocompleteProps["value"]; + onChange?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["onChange"]; + options: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["options"]; + value?: MuiAutocompleteProps< + OptionType, + HasMultipleChoices, + undefined, + IsCustomValueAllowed + >["value"]; }; -const Autocomplete = ({ +const Autocomplete = < + OptionType, + HasMultipleChoices extends boolean | undefined, + IsCustomValueAllowed extends boolean | undefined +>({ + isCustomValueAllowed, + hasMultipleChoices, isDisabled, hint, label, onChange, options, value, -}: AutocompleteProps) => { +}: AutocompleteProps) => { const renderInput = useCallback( ({ InputLabelProps, InputProps, ...params }) => ( ({ return ( = (args) => { hint="Select your favorite movie" label="Movie" options={top100Films} + value={{ label: "", year: 2000 }} /> ); }; @@ -220,6 +221,7 @@ const MuiTemplate: ComponentStory = (args) => { {...args} options={top100Films} // renderInput={(params) => } + value={{ label: "", year: 2000 }} /> ); };