FX-1895 Allow for the Select component to be a controlled input

.gitignore

@@ -10,6 +10,9 @@ storybook-static
 # Jetbrains IDEs
 .idea
 
+# VS Code IDE
+.vscode
+
 .npmrc
 
 .DS_Store

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sofarsounds/maestro",
-  "version": "7.4.19",
+  "version": "7.4.20",
   "description": "The official sofar sounds react uikit library",
   "main": "dist/index.js",
   "scripts": {

src/hooks/useSelect/index.tsx

@@ -10,6 +10,8 @@ interface Props<T> {
   filterBy?: (option: T, query: string) => boolean;
   defaultOptions: T[];
   value?: T | null;
+  controlledInputValue?: string;
+  setControlledInputValue?: React.Dispatch<React.SetStateAction<string>>;
 }
 
 interface ReturnProps<T> {
@@ -33,12 +35,21 @@ const useSelect = <T extends {}>({
   searchable,
   filterBy,
   value,
-  onChange
+  onChange,
+  controlledInputValue,
+  setControlledInputValue
 }: Props<T>): ReturnProps<T> => {
   const ref = useRef<HTMLInputElement>();
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [selected, setSelected] = useState(defaultValue);
-  const [inputValue, setInputValue] = useState('');
+  const [uncontrolledInputValue, setUncontrolledInputValue] = useState('');
+
+  const inputValue = controlledInputValue
+    ? controlledInputValue
+    : uncontrolledInputValue;
+  const setInputValue = setControlledInputValue
+    ? setControlledInputValue
+    : setUncontrolledInputValue;
 
   const onOptionClick = useCallback(
     (option: T | null) => {

src/molecules/Select/Options/index.tsx

@@ -94,7 +94,7 @@ const Options = <T extends {}>({
         );
       }
       case SelectState.ready: {
-        if (options.length === 0) {
+        if (options.length === 0 && userIsSearching) {
           return (
             <MenuItem disabled data-qaid={`${qaId}-empty-msg`}>
               No options...

src/molecules/Select/index.tsx

@@ -25,6 +25,8 @@ export interface SelectProps<T> extends OptionsListProps<T> {
   hasError?: boolean;
   invertColor?: boolean;
   renderLeftIcon?: React.ReactNode;
+  inputValue?: string;
+  setInputValue?: React.Dispatch<React.SetStateAction<string>>;
 
   // typeahead props
   searchable?: boolean;
@@ -63,6 +65,8 @@ const Select = <T extends {}>({
   initialWidth,
   state = SelectState.ready,
   disableScrollWhenOpen = false,
+  inputValue,
+  setInputValue,
   'data-qaid': qaId
 }: SelectProps<T>) => {
   const {
@@ -81,7 +85,9 @@ const Select = <T extends {}>({
     filterBy,
     defaultOptions,
     // @ts-ignore
-    onChange
+    onChange,
+    controlledInputValue: inputValue,
+    setControlledInputValue: setInputValue
   });
 
   return (