@transferwise/components 0.0.0-experimental-e5e0684 → 0.0.0-experimental-37d8e2c

package/src/statusIcon/StatusIcon.story.tsx

@@ -20,32 +20,36 @@ export const Basic: Story = {
 };
 
 export const Variants: Story = {
-  render: () => (
-    <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
-      {[
-        Sentiment.POSITIVE,
-        Sentiment.NEGATIVE,
-        Sentiment.NEUTRAL,
-        Sentiment.WARNING,
-        Sentiment.PENDING,
-      ].map((sentiment) => {
-        return (
-          <span
-            key={sentiment}
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              flexDirection: 'column',
-              minHeight: '150px',
-              alignItems: 'center',
-            }}
-          >
-            {([Size.SMALL, Size.MEDIUM, Size.LARGE] as const).map((size) => {
-              return <StatusIcon key={size} size={size} sentiment={sentiment} />;
-            })}
-          </span>
-        );
-      })}
-    </span>
-  ),
+  render: () => {
+    const sizes = [16, 24, 32, 40, 48, 56, 72];
+    return (
+      <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
+        {[
+          Sentiment.POSITIVE,
+          Sentiment.NEGATIVE,
+          Sentiment.WARNING,
+          Sentiment.NEUTRAL,
+          Sentiment.PENDING,
+        ].map((sentiment) => {
+          return (
+            <span
+              key={sentiment}
+              style={{
+                display: 'flex',
+                gap: '1em',
+                justifyContent: 'space-between',
+                flexDirection: 'column',
+                minHeight: '150px',
+                alignItems: 'center',
+              }}
+            >
+              {sizes.map((size) => {
+                return <StatusIcon key={size} size={size} sentiment={sentiment} />;
+              })}
+            </span>
+          );
+        })}
+      </span>
+    );
+  },
 };

package/src/statusIcon/StatusIcon.tsx

@@ -5,9 +5,14 @@ import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '.
 import Circle, { CircleProps } from '../common/circle';
 import { useMedia } from '../common/hooks/useMedia';
 
+/**
+ * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead
+ */
+type LegacySizes = SizeSmall | SizeMedium | SizeLarge;
+
 export type StatusIconProps = {
-  sentiment: `${Sentiment}`;
-  size: SizeSmall | SizeMedium | SizeLarge;
+  sentiment?: `${Sentiment}`;
+  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;
 };
 
 const iconTypeMap = {
@@ -31,13 +36,22 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 'md' }: StatusIcon
   const Icon = iconTypeMap[sentiment];
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
-  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];
+  const size =
+    sizeProp === Size.SMALL && isTinyViewport
+      ? 32
+      : typeof sizeProp === 'string'
+        ? mapLegacySize[sizeProp]
+        : sizeProp;
   return (
     <Circle
       as="span"
       size={size}
       data-testid="status-icon"
-      className={clsx('status-circle', `status-circle-${sizeProp}`, sentiment)}
+      className={clsx(
+        'status-circle',
+        // `status-circle-${sizeProp}`,
+        sentiment,
+      )}
     >
       <Icon className={clsx('status-icon', iconColor)} />
     </Circle>

package/src/typeahead/typeaheadOption/TypeaheadOption.spec.js

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { fakeEvent } from '../../common/fakeEvents';
 
@@ -11,7 +11,7 @@ describe('Typeahead Option', () => {
 
   const labelHighlight = () => component.find(Highlight);
   const noteSpan = () => component.find('.np-text-body-default.m-l-1');
-  const secondaryTextHighlight = () => component.find('.np-text-body-default.text-ellipsis');
+  const secondaryTextHighlight = () => component.find('.np-text-body-default.text-ellipsis > span');
   const dropdownItem = () => component.find('.dropdown-item');
 
   beforeEach(() => {
@@ -21,13 +21,13 @@ describe('Typeahead Option', () => {
       },
     };
 
-    component = shallow(<TypeaheadOption {...props} />);
+    component = mount(<TypeaheadOption {...props} />);
   });
 
   it('renders a label', () => {
     const label = 'test';
     component.setProps({ option: { label } });
-    expect(labelHighlight().dive().text()).toStrictEqual(label);
+    expect(labelHighlight().text()).toStrictEqual(label);
   });
 
   it('renders a note', () => {
@@ -41,10 +41,11 @@ describe('Typeahead Option', () => {
     const label = 'test';
     const secondary = 'test note';
     component.setProps({ option: { label, secondary } });
-    expect(secondaryTextHighlight().dive().text()).toStrictEqual(secondary);
+    expect(secondaryTextHighlight().text()).toStrictEqual(secondary);
   });
 
   it('highlights when selected', () => {
+    component = shallow(<TypeaheadOption {...props} />);
     component.setProps({
       selected: true,
     });
@@ -53,6 +54,7 @@ describe('Typeahead Option', () => {
   });
 
   it('expect aria-selected to be true', () => {
+    component = shallow(<TypeaheadOption {...props} />);
     component.setProps({
       selected: true,
     });

package/src/typeahead/util/highlight.tsx

@@ -7,16 +7,21 @@ export default function Highlight({
   value: string;
   query: string;
 }) {
+  const content = <HighlightContent value={value} query={query} />;
+  return className ? <span className={className}>{content}</span> : content;
+}
+
+function HighlightContent({ value, query }: { value: string; query: string }) {
   if (value && query) {
     const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
     const highlightEnd = highlightStart + query.trim().length;
     if (highlightStart !== -1) {
       return (
-        <span className={className}>
+        <>
           {value.slice(0, Math.max(0, highlightStart))}
           <strong>{value.slice(highlightStart, highlightEnd)}</strong>
           {value.slice(Math.max(0, highlightEnd))}
-        </span>
+        </>
       );
     }
   }

package/src/uploadInput/UploadInput.spec.tsx

@@ -12,36 +12,6 @@ import { TEST_IDS as UPLOAD_ITEM_TEST_IDS } from './uploadItem/UploadItem';
 
 const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
 
-const deleteFileAndWaitForFocus = async (fileToDeleteTestId: string, nextFocusTestId: string) => {
-  const fileToDelete = screen.getByTestId(fileToDeleteTestId);
-  const nextFocus = screen.getByTestId(nextFocusTestId);
-
-  await act(async () => {
-    within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
-    await jest.runOnlyPendingTimersAsync();
-  });
-
-  await act(async () => {
-    const removeButton = screen.queryByText('Remove');
-    if (removeButton) {
-      removeButton.click();
-      await jest.runOnlyPendingTimersAsync();
-    }
-  });
-
-  await waitFor(() => {
-    expect(screen.queryByTestId(fileToDeleteTestId)).not.toBeInTheDocument();
-  });
-
-  await act(async () => {
-    await jest.runOnlyPendingTimersAsync();
-  });
-
-  await waitFor(() => {
-    expect(nextFocus).toHaveFocus();
-  });
-};
-
 mockMatchMedia();
 
 describe('UploadInput', () => {
@@ -169,21 +139,15 @@ describe('UploadInput', () => {
         onFilesChange,
       });
 
-      const fileToDelete = screen.getByTestId('1-uploadItem');
+      const fileToDelete = screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0];
+      within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
       await act(async () => {
-        within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
         await jest.runOnlyPendingTimersAsync();
       });
 
-      await act(async () => {
-        screen.getByText('Remove').click();
-        await jest.runOnlyPendingTimersAsync();
-      });
-
-      await waitFor(() => {
-        expect(screen.queryByTestId('1-uploadItem')).not.toBeInTheDocument();
-      });
+      screen.getByText('Remove').click();
 
+      await waitForElementToBeRemoved(fileToDelete);
       expect(props.onDeleteFile).toHaveBeenCalledWith(files[0].id);
 
       expect(onFilesChange).toHaveBeenCalledTimes(2);
@@ -226,9 +190,9 @@ describe('UploadInput', () => {
         onFilesChange,
       });
 
-      const fileToDelete = screen.getByTestId('1-uploadItem');
+      const fileToDelete = screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0];
+      within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
       await act(async () => {
-        within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
         await jest.runOnlyPendingTimersAsync();
       });
 
@@ -248,114 +212,6 @@ describe('UploadInput', () => {
 
       expect(screen.queryByLabelText('Remove file ', { exact: false })).not.toBeInTheDocument();
     });
-
-    it('should focus the next item after a file is deleted', async () => {
-      const files = [
-        {
-          id: 1,
-          filename: 'Sales-2024-invoice.pdf',
-          status: Status.DONE,
-        },
-        {
-          id: 2,
-          filename: 'CoWork-0317-invoice.pdf',
-          status: Status.DONE,
-        },
-        {
-          id: 3,
-          filename: 'purchase-receipt.pdf',
-          status: Status.DONE,
-        },
-      ];
-
-      renderComponent({
-        ...props,
-        files,
-        multiple: true,
-        onFilesChange,
-      });
-
-      await deleteFileAndWaitForFocus('1-uploadItem', '2-action');
-    });
-
-    it('should focus the upload input after the last file is deleted', async () => {
-      const files = [
-        {
-          id: 1,
-          filename: 'Sales-2024-invoice.pdf',
-          status: Status.DONE,
-        },
-        {
-          id: 2,
-          filename: 'CoWork-0317-invoice.pdf',
-          status: Status.DONE,
-        },
-        {
-          id: 3,
-          filename: 'purchase-receipt.pdf',
-          status: Status.DONE,
-        },
-      ];
-
-      renderComponent({
-        ...props,
-        files,
-        multiple: true,
-        onFilesChange,
-      });
-
-      await deleteFileAndWaitForFocus('3-uploadItem', 'uploadInput');
-    });
-
-    it('should focus the upload input after the only file is deleted', async () => {
-      const singleFile = [
-        {
-          id: 3,
-          filename: 'purchase-receipt.pdf',
-          status: Status.DONE,
-        },
-      ];
-
-      renderComponent({
-        ...props,
-        files: singleFile,
-        multiple: true,
-        onFilesChange,
-      });
-
-      await deleteFileAndWaitForFocus('3-uploadItem', 'uploadInput');
-    });
-
-    it('should focus the third item, then the second and finally upload input', async () => {
-      const filesWithFailed = [
-        {
-          id: 1,
-          filename: 'Sales-2024-invoice.pdf',
-          status: Status.DONE,
-        },
-        {
-          id: 2,
-          filename: 'CoWork-0317-invoice.pdf',
-          status: Status.FAILED,
-        },
-        {
-          id: 3,
-          filename: 'purchase-receipt.pdf',
-          status: Status.DONE,
-        },
-      ];
-
-      renderComponent({
-        ...props,
-        files: filesWithFailed,
-        multiple: true,
-        onFilesChange,
-      });
-
-      await deleteFileAndWaitForFocus('3-uploadItem', 'uploadInput');
-      await deleteFileAndWaitForFocus('1-uploadItem', '2-action');
-      await deleteFileAndWaitForFocus('2-uploadItem', 'uploadInput');
-    });
   });
 
   describe('Max File Upload limit', () => {

package/src/uploadInput/UploadInput.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useLayoutEffect } from 'react';
 import { useIntl } from 'react-intl';
 
 import Button from '../button';
@@ -99,45 +99,16 @@ export type UploadInputProps = {
   'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'
 > & { onDownload?: UploadItemProps['onDownload'] } & CommonProps;
 
-/**
- * Interface representing a reference to an UploadItem component.
- * Provides a method to focus the UploadItem.
- */
 interface UploadItemRef {
-  /**
-   * Focuses the UploadItem component.
-   */
   focus: () => void;
 }
 
-/**
- * Represents the next item to focus on after an action is performed.
- */
-type NextFocusItem = {
-  /** The ID of the next item to focus on. If null, no specific item is targeted. */
-  focusId: number | null;
-  /** Indicates if the next item to focus on is the last item in the list. */
-  isLastItem: boolean;
-};
-
-/**
- * Generates a unique ID for a file based on its name, size, and the current timestamp
- */
 function generateFileId(file: File) {
   const { name, size } = file;
   const uploadTimeStamp = new Date().getTime();
   return `${name}_${size}_${uploadTimeStamp}`;
 }
 
-/**
- * The component allows users to upload files, manage the list of uploaded files,
- * and handle file validation and deletion.
- *
- * @param {UploadInputProps} props - The properties for the UploadInput component.
- *
- * @see {@link UploadInput} for further information.
- * @see {@link https://storybook.wise.design/?path=/docs/forms-uploadinput--docs|Storybook Wise Design}
- */
 const UploadInput = ({
   files = [],
   fileInputName = 'file',
@@ -160,15 +131,15 @@ const UploadInput = ({
   uploadButtonTitle,
 }: UploadInputProps) => {
   const inputAttributes = useInputAttributes({ nonLabelable: true });
+
   const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);
-  const [nextFocusItem, setNextFocusItem] = useState<NextFocusItem | null>(null);
+  const [fileToRemoveIndex, setFileToRemoveIndex] = useState<number | null>(null);
   const [mounted, setMounted] = useState(false);
   const { formatMessage } = useIntl();
   const itemRefs = useRef<(HTMLDivElement | UploadItemRef | null)[]>([]);
   const uploadInputRef = useRef<HTMLInputElement | null>(null);
 
   const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);
-  const FOCUS_TIMEOUT = 400; // Set to 400ms to allow animations and Modal to unmount
 
   const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(
     multiple || files.length === 0 ? files : [files[0]],
@@ -176,64 +147,50 @@ const UploadInput = ({
 
   const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);
 
-  function updateFileList(updateFn: (list: readonly UploadedFile[]) => readonly UploadedFile[]) {
-    setUploadedFiles(updateFn);
-    uploadedFilesListReference.current = updateFn(uploadedFilesListReference.current);
-  }
-
   function addFileToList(recentUploadedFile: UploadedFile) {
-    updateFileList((list) => [...list, recentUploadedFile]);
-  }
+    function addToList(listToAddTo: readonly UploadedFile[]) {
+      return [...listToAddTo, recentUploadedFile];
+    }
 
-  function removeFileFromList(file: UploadedFile) {
-    updateFileList((list) =>
-      list.filter((fileInList) => file !== fileInList && file.id !== fileInList.id),
-    );
+    setUploadedFiles(addToList);
+    uploadedFilesListReference.current = addToList(uploadedFilesListReference.current);
   }
 
-  function modifyFileInList(file: UploadedFile, updates: Partial<UploadedFile>) {
-    updateFileList((list) =>
-      list.map((fileInList) =>
-        fileInList === file || fileInList.id === file.id ? { ...file, ...updates } : fileInList,
-      ),
-    );
-  }
+  const removeFileFromList = (file: UploadedFile) => {
+    function filterOutFrom(listToFilterFrom: readonly UploadedFile[]) {
+      return listToFilterFrom.filter(
+        (fileInList) => file !== fileInList && file.id !== fileInList.id,
+      );
+    }
 
-  function focusNextItem(
-    focusId: number | null = null,
-    isLastItem = false,
-    timeout: number = FOCUS_TIMEOUT,
-  ) {
-    const nextFocusIdIndex = focusId
-      ? uploadedFilesListReference.current.findIndex((item: UploadedFile) => item.id === focusId)
-      : -1;
-
-    requestAnimationFrame(() => {
-      setTimeout(() => {
-        if (isLastItem || nextFocusIdIndex === -1) {
-          // If it's the last item or no next item, focus on the upload input reference
-          uploadInputRef.current?.focus();
-        } else {
-          const nextFocusElement = itemRefs.current[nextFocusIdIndex];
-          nextFocusElement?.focus();
-        }
-      }, timeout);
-    });
-  }
+    setUploadedFiles(filterOutFrom);
+    uploadedFilesListReference.current = filterOutFrom(uploadedFilesListReference.current);
+  };
+
+  const modifyFileInList = (file: UploadedFile, updates: Partial<UploadedFile>) => {
+    const updateListItem = (listToUpdate: readonly UploadedFile[]) =>
+      listToUpdate.map((fileInList) => {
+        return fileInList === file || fileInList.id === file.id
+          ? { ...file, ...updates }
+          : fileInList;
+      });
+
+    setUploadedFiles(updateListItem);
+    uploadedFilesListReference.current = updateListItem(uploadedFilesListReference.current);
+  };
+
+  const [fileToRemove, setFileToRemove] = useState<UploadedFile | null>(null);
 
   const removeFile = (file: UploadedFile) => {
     const { id, status } = file;
     const index = uploadedFiles.findIndex((f) => f.id === file.id);
-    const isLastItem = index === uploadedFiles.length - 1;
-    const nextIndexId = uploadedFiles[index + 1]?.id as number;
-    const focusId = nextIndexId ?? null;
+    setFileToRemoveIndex(index);
 
     if (status === Status.FAILED) {
       removeFileFromList(file);
-      setNextFocusItem({ focusId: focusId ?? null, isLastItem });
+      setFileToRemove(file);
     } else if (onDeleteFile && id) {
       modifyFileInList(file, { status: Status.PROCESSING, error: undefined });
-      setNextFocusItem({ focusId, isLastItem });
 
       onDeleteFile(id)
         .then(() => {
@@ -241,7 +198,9 @@ const UploadInput = ({
         })
         .catch((error) => {
           modifyFileInList(file, { error: error as UploadError });
-          setNextFocusItem({ focusId, isLastItem });
+        })
+        .finally(() => {
+          setFileToRemove(file);
         });
     }
   };
@@ -280,10 +239,12 @@ const UploadInput = ({
     return numberOfValidFiles >= maxFiles;
   }
 
+  // One or more files selected, create entries for them
   const addFiles = (selectedFiles: FileList) => {
     for (let i = 0; i < selectedFiles.length; i += 1) {
       const file = selectedFiles.item(i);
 
+      // Returning a FormData[] array instead of FileList so we can filter out incorrect files
       const formData = new FormData();
 
       if (file) {
@@ -292,11 +253,14 @@ const UploadInput = ({
 
         const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');
 
+        // Check if file type is valid
         if (!isTypeValid(file, allowedFileTypes)) {
           handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));
           continue;
         }
 
+        // Check if the filesize is valid
+        // Convert to rough bytes
         if (!isSizeValid(file, sizeLimit * 1000)) {
           const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);
           handleFileUploadFailure(file, failureMessage);
@@ -311,11 +275,14 @@ const UploadInput = ({
           continue;
         }
 
+        // Check if the file is already in the list
         const existingFile = uploadedFiles.find((f) => f.filename === file.name);
         if (existingFile) {
+          // Remove the file from the list before adding it again
           removeFileFromList(existingFile);
         }
 
+        // Add the file to the list
         formData.append(fileInputName, file);
         const pendingFile = {
           id: generateFileId(file),
@@ -325,8 +292,10 @@ const UploadInput = ({
 
         addFileToList(pendingFile);
 
+        // Start uploading the file
         onUploadFile(formData)
           .then(({ id, url, error }: UploadResponse) => {
+            // Replace the temporary id with the final one received from the API, and also set any errors
             modifyFileInList(pendingFile, { id, url, error, status: Status.SUCCEEDED });
           })
           .catch((error) => {
@@ -334,6 +303,7 @@ const UploadInput = ({
           });
 
         if (!multiple) {
+          // Only upload a single file
           break;
         }
       }
@@ -341,11 +311,20 @@ const UploadInput = ({
   };
 
   useLayoutEffect(() => {
-    if (nextFocusItem) {
-      focusNextItem(nextFocusItem.focusId, nextFocusItem.isLastItem);
+    if (fileToRemove && fileToRemoveIndex !== null) {
+      requestAnimationFrame(() => {
+        const nextFocusIndex = Math.min(fileToRemoveIndex, uploadedFiles.length - 1);
+        if (itemRefs.current[nextFocusIndex]) {
+          itemRefs.current[nextFocusIndex].focus(); // Focus the next UploadItem
+        } else {
+          // If there's only one item left, focus the UploadButton
+          uploadInputRef.current?.focus();
+        }
+      });
+      setFileToRemove(null); // Reset the state
+      setFileToRemoveIndex(null); // Reset the index
     }
-    setNextFocusItem(null);
-  }, [nextFocusItem]);
+  }, [uploadedFiles, fileToRemove, fileToRemoveIndex, itemRefs, uploadInputRef]);
 
   useEffect(() => {
     setMounted(true);