[useAutocomplete] Improve TS typing of groupedOptions prop

[lewxdev]

• I have followed (at least) the PR section of the contributing guide.

resolves #40739

[mui-bot]

Netlify deploy preview

https://deploy-preview-44657--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against a3adeea

[mj12albert]

@lewxdev Hey thanks for the PR, we are no longer maintaining @mui/base here (and the API is going through a huge overhaul)

However useAutocomplete is moved to Material UI in v6 here where it continues to receives support and fixes

Would you mind making the change to that file instead 😬

[ZeeshanTamboli]

@lewxdev What issue are facing by directly passing it through UseAutocompleteProps which you proposed in the issue?

[lewxdev]

@ZeeshanTamboli because groupBy is a function (unlike the other generic props), I had trouble getting the option param to be inferred by typescript..
the proposed solution worked when not using the option param or when manually typing the option param
see this playground

[ZeeshanTamboli]

@lewxdev What about the following changes:

--- a/packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts
+++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts
@@ -373,14 +373,6 @@ export function useAutocomplete<
     groupBy?: undefined;
   },
 ): UseAutocompleteReturnValue<Value, Multiple, DisableClearable, FreeSolo, false>;
-export function useAutocomplete<
-  Value,
-  Multiple extends boolean | undefined = false,
-  DisableClearable extends boolean | undefined = false,
-  FreeSolo extends boolean | undefined = false,
->(
-  props: UseAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo>,
-): UseAutocompleteReturnValue<Value, Multiple, DisableClearable, FreeSolo, unknown>;

 export interface UseAutocompleteRenderedOption<Value> {
   option: Value;
@@ -392,7 +384,7 @@ export interface UseAutocompleteReturnValue<
   Multiple extends boolean | undefined = false,
   DisableClearable extends boolean | undefined = false,
   FreeSolo extends boolean | undefined = false,
-  HasGroupBy extends boolean | unknown = false,
+  HasGroupBy extends boolean = false,
 > {
   /**
    * Resolver for the root slot's props.
@@ -483,11 +475,7 @@ export interface UseAutocompleteReturnValue<
   /**
    * The options to render. It's either `Value[]` or `AutocompleteGroupedOption<Value>[]` if the groupBy prop is pr
ovided.
    */
-  groupedOptions: HasGroupBy extends true
-    ? AutocompleteGroupedOption<Value>[]
-    : HasGroupBy extends false
-      ? Value[]
-      : Value[] | AutocompleteGroupedOption<Value>[];
+  groupedOptions: HasGroupBy extends true ? AutocompleteGroupedOption<Value>[] : Value[];
 }

 export default useAutocomplete;

[ZeeshanTamboli]

We will also need to change the description of groupedOptions here. My suggestion:

/**
 * The options to render.
 * - If `groupBy` is provided, the options are grouped and represented as `AutocompleteGroupedOption<Value>[]`.
 * - Otherwise, the options are represented as a flat array of `Value[]`.
 */

[lewxdev]

@ZeeshanTamboli the issue with the first proposed change is if someone passes an option to groupBy that can't be narrowed (e.g. the input type is ((option: Value) => string) | undefined), it will give a potentially incorrect type for groupedOptions.

options:

• accept the proposed change as potentially incorrect
• accept only exactly undefined OR ((option: Value) => string) (likely requires a utility type or complex typing that may make the overall type more confusing)

[ZeeshanTamboli]

@ZeeshanTamboli the issue with the first proposed change is if someone passes an option to groupBy that can't be narrowed (e.g. the input type is ((option: Value) => string) | undefined), it will give a potentially incorrect type for groupedOptions.

@lewxdev I didn’t fully understand this. Does the issue come from the proposed change I mentioned here? Could you provide a TS playground example to explain?

[lewxdev]

@ZeeshanTamboli ah, that was a misunderstanding on my part. I've not worked with declaration files in this way before and thought the overload required an implementation signature.

after looking into the documentation on overloaded function declarations, I understand your proposed change.

all proposed changes have been made

[ZeeshanTamboli]

@lewxdev I noticed the groupBy type in IntelliSense appears like this:

This might be caused by intersecting types in the overload. Can we correct it?

[lewxdev]

@ZeeshanTamboli I believe I've corrected it. I've used Omit and PartiallyRequired from '@mui/types' to update the function overloads, hopefully this works

[ZeeshanTamboli]

@lewxdev I updated the demos to use useAutocomplete from Material UI and removed type assertions since the type is now conditional. Looks good, thanks!

[maapteh]

why make an optional prop in minor release suddenly required ...

[ZeeshanTamboli]

why make an optional prop in minor release suddenly required ...

It isn't required. Replied in #45044.