[Autocomplete][Joy] Fix types (mui#35153)

daniel-rabe · Nov 29, 2022 · f87cf6e · f87cf6e
1 parent a0b3bc4
commit f87cf6e
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 31 deletions.
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.spec.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.spec.tsx
@@ -16,3 +16,28 @@ const top100Films = [{ title: 'The Shawshank Redemption', year: 1994 }];
   multiple
   sx={{ width: '500px' }}
 />;
+
+<Autocomplete
+  options={top100Films}
+  componentsProps={{
+    clearIndicator: {
+      color: 'danger',
+      variant: 'outlined',
+      size: 'sm',
+    },
+    popupIndicator: (ownerState) => ({
+      color: ownerState.inputFocused ? 'danger' : 'neutral',
+      variant: 'outlined',
+      size: 'sm',
+    }),
+    listbox: {
+      color: 'danger',
+      variant: 'outlined',
+      size: 'sm',
+    },
+    option: {
+      color: 'danger',
+      variant: 'outlined',
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
@@ -378,7 +378,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(
   const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
 
-  // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
   const ownerState = {
     ...props,
     value,
@@ -391,7 +390,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
     size,
     color,
     variant,
-  } as OwnerState;
+  };
 
   const classes = useUtilityClasses(ownerState);
 

diff --git a/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts b/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { OverridableStringUnion } from '@mui/types';
 import { SlotComponentProps } from '@mui/base/utils';
 import {
-  useAutocomplete,
   AutocompleteValue,
   AutocompleteChangeDetails,
   AutocompleteChangeReason,
@@ -12,9 +11,6 @@ import {
 } from '@mui/base/AutocompleteUnstyled';
 import { PopperUnstyledOwnProps } from '@mui/base/PopperUnstyled';
 import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
-import { IconButtonOwnerState } from '../IconButton/IconButtonProps';
-import { AutocompleteListboxProps } from '../AutocompleteListbox/AutocompleteListboxProps';
-import { AutocompleteOptionProps } from '../AutocompleteOption/AutocompleteOptionProps';
 
 export type AutocompleteSlot = keyof ComponentsProps;
 
@@ -51,18 +47,6 @@ export interface AutocompleteRenderGroupParams {
   children?: React.ReactNode;
 }
 
-export interface AutocompleteRenderInputParams {
-  placeholder?: string;
-  disabled: boolean;
-  size: OverridableStringUnion<'sm' | 'md' | 'lg', AutocompletePropsSizeOverrides>;
-  ref: React.Ref<any>;
-  startDecorator: React.ReactNode;
-  endDecorator?: React.ReactNode;
-  componentsProps: {
-    input: ReturnType<ReturnType<typeof useAutocomplete>['getInputProps']>;
-  };
-}
-
 interface ComponentsProps {
   root?: SlotComponentProps<
     'div',
@@ -91,35 +75,45 @@ interface ComponentsProps {
   >;
   clearIndicator?: SlotComponentProps<
     'button',
-    { component?: React.ElementType; sx?: SxProps } & Pick<
-      IconButtonOwnerState,
-      'color' | 'variant' | 'size'
-    >,
-    AutocompleteOwnerState<any, any, any, any> & IconButtonOwnerState
+    {
+      component?: React.ElementType;
+      sx?: SxProps;
+      color?: OverridableStringUnion<ColorPaletteProp, AutocompletePropsColorOverrides>;
+      variant?: OverridableStringUnion<VariantProp, AutocompletePropsVariantOverrides>;
+      size?: OverridableStringUnion<'sm' | 'md' | 'lg', AutocompletePropsSizeOverrides>;
+    },
+    AutocompleteOwnerState<any, any, any, any>
   >;
   popupIndicator?: SlotComponentProps<
     'button',
-    { component?: React.ElementType; sx?: SxProps } & Pick<
-      IconButtonOwnerState,
-      'color' | 'variant' | 'size'
-    >,
-    AutocompleteOwnerState<any, any, any, any> & IconButtonOwnerState
+    {
+      component?: React.ElementType;
+      sx?: SxProps;
+      color?: OverridableStringUnion<ColorPaletteProp, AutocompletePropsColorOverrides>;
+      variant?: OverridableStringUnion<VariantProp, AutocompletePropsVariantOverrides>;
+      size?: OverridableStringUnion<'sm' | 'md' | 'lg', AutocompletePropsSizeOverrides>;
+    },
+    AutocompleteOwnerState<any, any, any, any>
   >;
   listbox?: SlotComponentProps<
     'ul',
     {
       component?: React.ElementType;
       sx?: SxProps;
-    } & Omit<PopperUnstyledOwnProps, 'components' | 'componentsProps' | 'open'> &
-      Pick<AutocompleteListboxProps, 'color' | 'variant' | 'size'>,
+      color?: OverridableStringUnion<ColorPaletteProp, AutocompletePropsColorOverrides>;
+      variant?: OverridableStringUnion<VariantProp, AutocompletePropsVariantOverrides>;
+      size?: OverridableStringUnion<'sm' | 'md' | 'lg', AutocompletePropsSizeOverrides>;
+    } & Omit<PopperUnstyledOwnProps, 'components' | 'componentsProps' | 'open'>,
     AutocompleteOwnerState<any, any, any, any>
   >;
   option?: SlotComponentProps<
     'li',
     {
       component?: React.ElementType;
       sx?: SxProps;
-    } & Pick<AutocompleteOptionProps, 'color' | 'variant'>,
+      color?: OverridableStringUnion<ColorPaletteProp, AutocompletePropsColorOverrides>;
+      variant?: OverridableStringUnion<VariantProp, AutocompletePropsVariantOverrides>;
+    },
     AutocompleteOwnerState<any, any, any, any>
   >;
   loading?: SlotComponentProps<