@transferwise/components 46.17.2 → 46.18.0

package/src/typeahead/Typeahead.story.tsx

@@ -5,6 +5,7 @@ import { Search as SearchIcon } from '@transferwise/icons';
 import { useState } from 'react';
 
 import { Sentiment } from '../common';
+import { Input } from '../inputs/Input';
 
 import Typeahead, { type TypeaheadOption } from './Typeahead';
 
@@ -120,3 +121,111 @@ Basic.play = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
   await userEvent.type(canvas.getByRole('combobox'), 'abc{ArrowDown}');
 };
+
+type Result =
+  | {
+      type: 'action';
+      value: string;
+    }
+  | {
+      type: 'search';
+      value: string;
+    };
+
+type SearchState = 'success' | 'idle' | 'error' | 'loading';
+
+export const Search = () => {
+  const [results, setResults] = useState<Result[]>([]);
+  const [state, setState] = useState<SearchState>('idle');
+  const [filledValue, setFilledValue] = useState<string | null>(null);
+
+  const onChange = (query: string) => {
+    if (query === 'loading') {
+      setState('loading');
+      setResults([]);
+      return;
+    }
+    if (query === 'error') {
+      setState('error');
+      setResults([]);
+      return;
+    }
+    if (query === 'nothing') {
+      setState('success');
+      setResults([]);
+      return;
+    }
+
+    setState('success');
+    setResults(getResults(query));
+  };
+
+  const onResultSelected = (option: Result) => {
+    if (option.type === 'search') {
+      setResults([
+        { type: 'action', value: `${option.value} Result #1` },
+        { type: 'action', value: `${option.value} Result #2` },
+        { type: 'action', value: `${option.value} Result #3` },
+      ]);
+    }
+    if (option.type === 'action') {
+      setFilledValue(option.value);
+    }
+  };
+
+  const getResults = (query: string): Result[] => {
+    return [
+      { type: 'action', value: `${query} Result #1` },
+      { type: 'action', value: `${query} Result #2` },
+      { type: 'action', value: `${query} Result #3` },
+      { type: 'search', value: `Search for more: '${query}'` },
+    ];
+  };
+
+  return (
+    <>
+      <Typeahead<Result>
+        id="typeahead-input-id"
+        name="typeahead-input-name"
+        size="md"
+        maxHeight={100}
+        footer={<SearchFooter options={results} state={state} />}
+        multiple={false}
+        clearable={false}
+        addon={<SearchIcon />}
+        options={results.map((option) => ({
+          value: option,
+          label: option.value,
+          keepFocusOnSelect: option.type === 'search',
+          clearQueryOnSelect: option.type === 'action',
+        }))}
+        onChange={(values) => {
+          if (values.length > 0) {
+            const [updatedValue] = values;
+            if (updatedValue.value) {
+              onResultSelected(updatedValue.value);
+            }
+          }
+        }}
+        onInputChange={onChange}
+      />
+      {filledValue != null ? <Input value={filledValue} /> : null}
+    </>
+  );
+};
+
+function SearchFooter({ options, state }: { options: Result[]; state: SearchState }) {
+  if (state === 'loading') {
+    return <p className="m-y-2 m-x-2">Loading...</p>;
+  }
+
+  if (state === 'success' && options.length === 0) {
+    return <p className="m-y-2 m-x-2">No results found</p>;
+  }
+
+  if (state === 'error' && options.length === 0) {
+    return <div className="m-y-2 m-x-2">Something went wrong</div>;
+  }
+
+  return null;
+}

package/src/typeahead/Typeahead.tsx

@@ -30,6 +30,8 @@ export type TypeaheadOption<T = string> = {
   note?: string;
   secondary?: string;
   value?: T;
+  clearQueryOnSelect?: boolean;
+  keepFocusOnSelect?: boolean;
 };
 
 export interface TypeaheadProps<T> {
@@ -43,16 +45,16 @@ export interface TypeaheadProps<T> {
   allowNew?: boolean;
   autoFillOnBlur?: boolean;
   autoFocus?: boolean;
-  chipSeparators?: string[];
+  chipSeparators?: readonly string[];
   clearable?: boolean;
   footer?: ReactNode;
-  initialValue?: TypeaheadOption<T>[];
+  initialValue?: readonly TypeaheadOption<T>[];
   inputAutoComplete?: string;
   maxHeight?: number;
   minQueryLength?: number;
   placeholder?: string;
   multiple?: boolean;
-  options: TypeaheadOption<T>[];
+  options: readonly TypeaheadOption<T>[];
   searchDelay?: number;
   showSuggestions?: boolean;
   showNewEntry?: boolean;
@@ -67,7 +69,7 @@ export interface TypeaheadProps<T> {
 }
 
 type TypeaheadState<T> = {
-  selected: TypeaheadOption<T>[];
+  selected: readonly TypeaheadOption<T>[];
   keyboardFocusedOptionIndex: number | null;
   errorState: boolean;
   query: string;
@@ -250,7 +252,15 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     }
 
     this.updateSelectedValue(selected);
-    this.hideMenu();
+
+    if (!item.keepFocusOnSelect) {
+      this.hideMenu();
+    }
+
+    if (item.clearQueryOnSelect) {
+      query = '';
+    }
+
     this.setState({
       query,
     });
@@ -311,12 +321,12 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     );
   };
 
-  updateSelectedValue = (selected: TypeaheadOption<T>[]) => {
+  updateSelectedValue = (selected: readonly TypeaheadOption<T>[]) => {
     const { onChange, validateChip } = this.props;
 
     const errorState = selected.some((chip) => !validateChip(chip));
     this.setState({ selected, errorState }, () => {
-      onChange(selected);
+      onChange([...selected]);
     });
   };
 
@@ -499,8 +509,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
               </div>
             )}
           </div>
-          {displayAlert && <InlineAlert type={alert.type}>{alert.message}</InlineAlert>}
-          {menu}
+          {displayAlert ? <InlineAlert type={alert.type}>{alert.message}</InlineAlert> : menu}
         </div>
       </div>
     );

package/src/typeahead/typeaheadInput/TypeaheadInput.tsx

@@ -12,7 +12,7 @@ const DEFAULT_INPUT_MIN_WIDTH = 10;
 export type TypeaheadInputProps<T> = {
   typeaheadId: string;
   value: string;
-  selected: TypeaheadOption<T>[];
+  selected: readonly TypeaheadOption<T>[];
   optionsShown?: boolean;
   autoComplete: string;
   onChange: React.ChangeEventHandler<HTMLInputElement>;

package/src/uploadInput/UploadInput.tsx

@@ -19,7 +19,7 @@ export type UploadInputProps = {
   /**
    * List of already existing, failed or in progress files
    */
-  files?: UploadedFile[];
+  files?: readonly UploadedFile[];
 
   /**
    * The key of the file in the returned FormData object (default: file)
@@ -135,14 +135,14 @@ const UploadInput = ({
 
   const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);
 
-  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>(
+  const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(
     multiple || files.length === 0 ? files : [files[0]],
   );
 
   const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);
 
   function addFileToList(recentUploadedFile: UploadedFile) {
-    function addToList(listToAddTo: UploadedFile[]) {
+    function addToList(listToAddTo: readonly UploadedFile[]) {
       return [...listToAddTo, recentUploadedFile];
     }
 
@@ -151,7 +151,7 @@ const UploadInput = ({
   }
 
   const removeFileFromList = (file: UploadedFile) => {
-    function filterOutFrom(listToFilterFrom: UploadedFile[]) {
+    function filterOutFrom(listToFilterFrom: readonly UploadedFile[]) {
       return listToFilterFrom.filter(
         (fileInList) => file !== fileInList && file.id !== fileInList.id,
       );
@@ -162,7 +162,7 @@ const UploadInput = ({
   };
 
   const modifyFileInList = (file: UploadedFile, updates: Partial<UploadedFile>) => {
-    const updateListItem = (listToUpdate: UploadedFile[]) =>
+    const updateListItem = (listToUpdate: readonly UploadedFile[]) =>
       listToUpdate.map((fileInList) => {
         return fileInList === file || fileInList.id === file.id
           ? { ...file, ...updates }
@@ -295,7 +295,7 @@ const UploadInput = ({
 
   useEffect(() => {
     if (onFilesChange && mounted) {
-      onFilesChange(uploadedFiles);
+      onFilesChange([...uploadedFiles]);
     }
   }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps
 

package/src/uploadInput/uploadButton/UploadButton.tsx

@@ -12,7 +12,7 @@ import MESSAGES from './UploadButton.messages';
 import { DEFAULT_SIZE_LIMIT, imageFileTypes } from './defaults';
 import getAllowedFileTypes from './getAllowedFileTypes';
 
-type AllowedFileTypes = string | string[] | FileType[];
+type AllowedFileTypes = string | readonly string[] | readonly FileType[];
 export type UploadButtonProps = {
   /**
    * Disable the upload button if your app is not yet ready to accept uploads
@@ -144,9 +144,7 @@ const UploadButton = ({
       return fileTypes;
     }
 
-    return Array.isArray(fileTypes)
-      ? getAllowedFileTypes(fileTypes).join(', ')
-      : getAllowedFileTypes([fileTypes]).join(', ');
+    return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');
   };
 
   function getDescription() {
@@ -165,18 +163,18 @@ const UploadButton = ({
     });
   }
 
-  function getAcceptedTypes() {
+  function getAcceptedTypes(): Pick<React.ComponentPropsWithoutRef<'input'>, 'accept'> {
     const areAllFilesAllowed = getFileTypesDescription() === '*';
 
     if (areAllFilesAllowed) {
-      return null; //file input by default allows all files
+      return {}; //file input by default allows all files
     }
 
     if (Array.isArray(fileTypes)) {
       return { accept: fileTypes.join(',') };
     }
 
-    return { accept: fileTypes };
+    return { accept: fileTypes as string };
   }
 
   function renderDescription() {

package/src/uploadInput/uploadButton/getAllowedFileTypes.ts

@@ -1,6 +1,6 @@
 import { FileType } from '../../common';
 
-const getAllowedFileTypes = (fileTypes: FileType[] | string[]): string[] =>
+const getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>
   fileTypes.map((fileTypeDefinition: string) =>
     fileTypeDefinition
       .split(',')