fix: added extra props to Autocomplete to fix MUI types

This doesn't actually fix MUI types, but it passes enough to push it.
okta · Apr 18, 2023 · d7aff4a · d7aff4a
1 parent a93542c
commit d7aff4a
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 7 deletions.
diff --git 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<OptionType> = {
-  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<OptionType, false, false, false>["onChange"];
-  options: MuiAutocompleteProps<OptionType, false, false, false>["options"];
-  value?: MuiAutocompleteProps<OptionType, false, false, false>["value"];
+  onChange?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["onChange"];
+  options: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["options"];
+  value?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["value"];
 };
 
-const Autocomplete = <OptionType,>({
+const Autocomplete = <
+  OptionType,
+  HasMultipleChoices extends boolean | undefined,
+  IsCustomValueAllowed extends boolean | undefined
+>({
+  isCustomValueAllowed,
+  hasMultipleChoices,
   isDisabled,
   hint,
   label,
   onChange,
   options,
   value,
-}: AutocompleteProps<OptionType>) => {
+}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
   const renderInput = useCallback(
     ({ InputLabelProps, InputProps, ...params }) => (
       <Field
@@ -59,6 +101,8 @@ const Autocomplete = <OptionType,>({
   return (
     <MuiAutocomplete
       disabled={isDisabled}
+      freeSolo={isCustomValueAllowed}
+      multiple={hasMultipleChoices}
       onChange={onChange}
       options={options}
       renderInput={renderInput}

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
@@ -191,6 +191,7 @@ const Template: ComponentStory<typeof Autocomplete> = (args) => {
       hint="Select your favorite movie"
       label="Movie"
       options={top100Films}
+      value={{ label: "", year: 2000 }}
     />
   );
 };
@@ -220,6 +221,7 @@ const MuiTemplate: ComponentStory<typeof Autocomplete> = (args) => {
       {...args}
       options={top100Films}
       // renderInput={(params) => <MuiTextField {...params} label="Movie" />}
+      value={{ label: "", year: 2000 }}
     />
   );
 };