prevent input classnames breaking change

Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>

packages/core-components/report.api.md

@@ -78,8 +78,6 @@ export type AppIconProps = IconComponentProps & {
   Fallback?: IconComponent;
 };
 
-// Warning: (ae-forgotten-export) The symbol "AutocompleteComponentProps" needs to be exported by the entry point index.d.ts
-//
 // @public (undocumented)
 export function Autocomplete<
   T,
@@ -90,6 +88,27 @@ export function Autocomplete<
   props: AutocompleteComponentProps<T, Multiple, DisableClearable, FreeSolo>,
 ): React_2.JSX.Element;
 
+// @public (undocumented)
+export type AutocompleteComponentProps<
+  T,
+  Multiple extends boolean | undefined = undefined,
+  DisableClearable extends boolean | undefined = undefined,
+  FreeSolo extends boolean | undefined = undefined,
+> = Omit<
+  AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,
+  'PopperComponent' | 'PaperComponent' | 'popupIcon' | 'renderInput'
+> & {
+  name: string;
+  label?: string;
+  TextFieldProps?: Omit<OutlinedTextFieldProps, 'variant'>;
+  renderInput?: AutocompleteProps<
+    T,
+    Multiple,
+    DisableClearable,
+    FreeSolo
+  >['renderInput'];
+};
+
 // @public
 export const AutoLogout: (props: AutoLogoutProps) => JSX.Element | null;
 

packages/core-components/src/components/Autocomplete/Autocomplete.test.tsx

@@ -69,7 +69,7 @@ describe('Autocomplete', () => {
         name="test-autocomplete"
         options={mockOptions}
         label="Test Label"
-        inputProps={{ required: true }}
+        TextFieldProps={{ required: true }}
       />,
     );
 
@@ -83,7 +83,7 @@ describe('Autocomplete', () => {
         name="test-autocomplete"
         options={mockOptions}
         label="Test Label"
-        inputProps={{ helperText: 'Helper text' }}
+        TextFieldProps={{ helperText: 'Helper text' }}
       />,
     );
 

packages/core-components/src/components/Autocomplete/Autocomplete.tsx

@@ -32,10 +32,13 @@ import Autocomplete, {
   AutocompleteRenderInputParams,
 } from '@material-ui/lab/Autocomplete';
 import React, { ReactNode, useCallback } from 'react';
+import { merge } from 'lodash';
 
 const useStyles = makeStyles(
   theme => ({
-    root: {},
+    root: {
+      margin: theme.spacing(1, 0),
+    },
     label: {
       position: 'relative',
       fontWeight: 'bold',
@@ -48,7 +51,6 @@ const useStyles = makeStyles(
         position: 'absolute',
       },
     },
-    input: {},
   }),
   { name: 'BackstageAutocomplete' },
 );
@@ -67,8 +69,8 @@ const BootstrapAutocomplete = withStyles(
         marginTop: 24,
         backgroundColor: theme.palette.background.paper,
         '$root$hasClearIcon$hasPopupIcon &': {
-          paddingBlock: theme.spacing(1.5625),
-          paddingInlineStart: theme.spacing(1.5),
+          paddingBlock: theme.spacing(0.75),
+          paddingInlineStart: theme.spacing(0.75),
         },
         '$root$focused &': {
           outline: 'none',
@@ -85,6 +87,9 @@ const BootstrapAutocomplete = withStyles(
         padding: 0,
         margin: 0,
         color: '#616161',
+        '&:hover': {
+          backgroundColor: 'unset',
+        },
         '& [class*="MuiTouchRipple-root"]': {
           display: 'none',
         },
@@ -97,7 +102,7 @@ const BootstrapAutocomplete = withStyles(
       input: {
         '$root$hasClearIcon$hasPopupIcon &': {
           fontSize: theme.typography.body1.fontSize,
-          padding: 0,
+          paddingBlock: theme.spacing(0.8125),
         },
       },
     }),
@@ -118,25 +123,26 @@ const PaperComponent = (props: PaperProps) => (
   <Paper {...props} elevation={8} />
 );
 
+/** @public */
 export type AutocompleteComponentProps<
   T,
   Multiple extends boolean | undefined = undefined,
   DisableClearable extends boolean | undefined = undefined,
   FreeSolo extends boolean | undefined = undefined,
-> = {
+> = Omit<
+  AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,
+  'PopperComponent' | 'PaperComponent' | 'popupIcon' | 'renderInput'
+> & {
   name: string;
   label?: string;
-  inputProps?: Omit<OutlinedTextFieldProps, 'variant'>;
+  TextFieldProps?: Omit<OutlinedTextFieldProps, 'variant'>;
   renderInput?: AutocompleteProps<
     T,
     Multiple,
     DisableClearable,
     FreeSolo
   >['renderInput'];
-} & Omit<
-  AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,
-  'PopperComponent' | 'PaperComponent' | 'popupIcon'
->;
+};
 
 /** @public */
 export function AutocompleteComponent<
@@ -145,18 +151,13 @@ export function AutocompleteComponent<
   DisableClearable extends boolean | undefined = undefined,
   FreeSolo extends boolean | undefined = undefined,
 >(props: AutocompleteComponentProps<T, Multiple, DisableClearable, FreeSolo>) {
-  const { label, name, inputProps, ...rest } = props;
+  const { label, name, TextFieldProps, ...rest } = props;
   const classes = useStyles();
   const renderInput = useCallback(
     (params: AutocompleteRenderInputParams) => (
-      <TextField
-        {...inputProps}
-        {...params}
-        className={classes.input}
-        variant="outlined"
-      />
+      <TextField {...merge(params, TextFieldProps)} variant="outlined" />
     ),
-    [],
+    [TextFieldProps],
   );
   const autocomplete = (
     <BootstrapAutocomplete

packages/core-components/src/components/Autocomplete/index.tsx

@@ -13,4 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { AutocompleteComponent as Autocomplete } from './Autocomplete';
+export {
+  AutocompleteComponent as Autocomplete,
+  type AutocompleteComponentProps,
+} from './Autocomplete';

plugins/catalog-react/report.api.md

@@ -205,7 +205,7 @@ export type EntityAutocompletePickerProps<
   Filter: {
     new (values: string[]): NonNullable<T[Name]>;
   };
-  InputProps?: TextFieldProps['InputProps'];
+  InputProps?: TextFieldProps;
   initialSelectedOptions?: string[];
   filtersForAvailableValues?: Array<keyof T>;
 };

plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx

@@ -49,7 +49,7 @@ export type EntityAutocompletePickerProps<
   path: string;
   showCounts?: boolean;
   Filter: { new (values: string[]): NonNullable<T[Name]> };
-  InputProps?: TextFieldProps['InputProps'];
+  InputProps?: TextFieldProps;
   initialSelectedOptions?: string[];
   filtersForAvailableValues?: Array<keyof T>;
 };
@@ -79,6 +79,7 @@ export function EntityAutocompletePicker<
     path,
     showCounts,
     Filter,
+    InputProps,
     initialSelectedOptions = [],
     filtersForAvailableValues = ['kind'],
   } = props;
@@ -154,6 +155,7 @@ export function EntityAutocompletePicker<
         name={`${String(name)}-picker`}
         options={availableOptions}
         value={selectedOptions}
+        TextFieldProps={InputProps}
         onChange={(_event: object, options: string[]) =>
           setSelectedOptions(options)
         }