diff --git a/packages/core-components/report.api.md b/packages/core-components/report.api.md index 5298ac9816..5a9f5440ec 100644 --- a/packages/core-components/report.api.md +++ b/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, ): 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, + 'PopperComponent' | 'PaperComponent' | 'popupIcon' | 'renderInput' +> & { + name: string; + label?: string; + TextFieldProps?: Omit; + renderInput?: AutocompleteProps< + T, + Multiple, + DisableClearable, + FreeSolo + >['renderInput']; +}; + // @public export const AutoLogout: (props: AutoLogoutProps) => JSX.Element | null; diff --git a/packages/core-components/src/components/Autocomplete/Autocomplete.test.tsx b/packages/core-components/src/components/Autocomplete/Autocomplete.test.tsx index fff83eb26d..445267390a 100644 --- a/packages/core-components/src/components/Autocomplete/Autocomplete.test.tsx +++ b/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' }} />, ); diff --git a/packages/core-components/src/components/Autocomplete/Autocomplete.tsx b/packages/core-components/src/components/Autocomplete/Autocomplete.tsx index f0016be430..a34dd8728a 100644 --- a/packages/core-components/src/components/Autocomplete/Autocomplete.tsx +++ b/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) => ( ); +/** @public */ export type AutocompleteComponentProps< T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined, -> = { +> = Omit< + AutocompleteProps, + 'PopperComponent' | 'PaperComponent' | 'popupIcon' | 'renderInput' +> & { name: string; label?: string; - inputProps?: Omit; + TextFieldProps?: Omit; renderInput?: AutocompleteProps< T, Multiple, DisableClearable, FreeSolo >['renderInput']; -} & Omit< - AutocompleteProps, - '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) { - const { label, name, inputProps, ...rest } = props; + const { label, name, TextFieldProps, ...rest } = props; const classes = useStyles(); const renderInput = useCallback( (params: AutocompleteRenderInputParams) => ( - + ), - [], + [TextFieldProps], ); const autocomplete = ( ; }; - InputProps?: TextFieldProps['InputProps']; + InputProps?: TextFieldProps; initialSelectedOptions?: string[]; filtersForAvailableValues?: Array; }; diff --git a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx index d4f978fce5..3f4ec707c6 100644 --- a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx +++ b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx @@ -49,7 +49,7 @@ export type EntityAutocompletePickerProps< path: string; showCounts?: boolean; Filter: { new (values: string[]): NonNullable }; - InputProps?: TextFieldProps['InputProps']; + InputProps?: TextFieldProps; initialSelectedOptions?: string[]; filtersForAvailableValues?: Array; }; @@ -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) }