Ported NewAutocomplete to TypeScript (#831)

Small migration of `NewAutocomplete`.

---------

Co-authored-by: Jed Fox <git@jedfox.com>

packages/desktop-client/src/components/autocomplete/NewAutocomplete.js → packages/desktop-client/src/components/autocomplete/NewAutocomplete.tsx

 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}

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 => ({

upcoming-release-notes/831.md

+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Moved `NewAutocomplete` component to TypeScript