diff --git a/packages/desktop-client/src/components/autocomplete/NewAutocomplete.js b/packages/desktop-client/src/components/autocomplete/NewAutocomplete.tsx similarity index 82% rename from packages/desktop-client/src/components/autocomplete/NewAutocomplete.js rename to packages/desktop-client/src/components/autocomplete/NewAutocomplete.tsx index d082c07b5611365a9c4f752f6369572bbb262526..f01fc128ba1c8a0572e7edca916be0e1c155e0d7 100644 --- a/packages/desktop-client/src/components/autocomplete/NewAutocomplete.js +++ b/packages/desktop-client/src/components/autocomplete/NewAutocomplete.tsx @@ -1,5 +1,10 @@ import React, { useState } from 'react'; -import Select from 'react-select'; +import Select, { + Props as SelectProps, + PropsValue, + SingleValue, + SelectInstance, +} from 'react-select'; import CreatableSelect from 'react-select/creatable'; @@ -7,7 +12,17 @@ import { NullComponent } from '../common'; import styles from './autocomplete-styles'; -const Autocomplete = React.forwardRef( +type OptionValue = string; + +interface AutocompleteProps extends SelectProps<OptionValue> { + focused: boolean; + embedded: boolean; + onSelect: (value: PropsValue<OptionValue>) => void; + onCreateOption: (value: SingleValue<OptionValue>) => void; + isCreatable: boolean; +} + +const Autocomplete = React.forwardRef<SelectInstance, AutocompleteProps>( ( { value, @@ -96,7 +111,7 @@ const Autocomplete = React.forwardRef( }} maxMenuHeight={200} styles={styles} - embedded={embedded} + data-embedded={embedded} menuPlacement="auto" menuPortalTarget={embedded ? undefined : document.body} {...props} diff --git a/packages/desktop-client/src/components/autocomplete/autocomplete-styles.js b/packages/desktop-client/src/components/autocomplete/autocomplete-styles.js index 858f0e5cd39f6af54772f6ba919cbe547453354c..3c7acdcdb44cf92e34e19013ecf04ea3c51babd5 100644 --- a/packages/desktop-client/src/components/autocomplete/autocomplete-styles.js +++ b/packages/desktop-client/src/components/autocomplete/autocomplete-styles.js @@ -29,7 +29,7 @@ const colourStyles = { backgroundColor: colors.n1, marginTop: 2, marginBottom: 2, - position: selectProps.embedded ? 'relative' : styles.position, + position: selectProps['data-embedded'] ? 'relative' : styles.position, overflow: 'hidden', }), menuList: styles => ({ diff --git a/upcoming-release-notes/831.md b/upcoming-release-notes/831.md new file mode 100644 index 0000000000000000000000000000000000000000..9438182e4369549d88a6ccbddbf546cd6d121a18 --- /dev/null +++ b/upcoming-release-notes/831.md @@ -0,0 +1,6 @@ +--- +category: Maintenance +authors: [MatissJanis] +--- + +Moved `NewAutocomplete` component to TypeScript