@transferwise/components 0.0.0-experimental-05bf45b → 0.0.0-experimental-62a0fe9

package/build/uploadInput/uploadItem/UploadItemLink.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"UploadItemLink.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n  url?: string;\n  onDownload?: (event: MouseEvent) => void;\n  singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, UploadItemLinkProps>(\n  ({ children, url, onDownload, singleFileUpload }, ref) => {\n    if (!url) {\n      return (\n        <div\n          ref={ref as React.RefObject<HTMLDivElement>}\n          className={clsx('np-upload-input__item-container')}\n        >\n          {children}\n        </div>\n      );\n    }\n\n    return (\n      <a\n        ref={ref as React.RefObject<HTMLAnchorElement>}\n        href={url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className={clsx(\n          'np-upload-input__item-link',\n          singleFileUpload ? 'np-upload-input__item-link--single-file' : '',\n        )}\n        tabIndex={0}\n        onClick={onDownload}\n      >\n        {children}\n      </a>\n    );\n  },\n);\n"],"names":["UploadItemLink","forwardRef","children","url","onDownload","singleFileUpload","ref","_jsx","className","clsx","href","target","rel","tabIndex","onClick"],"mappings":";;;;AASaA,MAAAA,cAAc,gBAAGC,UAAU,CACtC,CAAC;EAAEC,QAAQ;EAAEC,GAAG;EAAEC,UAAU;AAAEC,EAAAA,gBAAAA;CAAkB,EAAEC,GAAG,KAAI;EACvD,IAAI,CAACH,GAAG,EAAE;AACR,IAAA,oBACEI,GAAA,CAAA,KAAA,EAAA;AACED,MAAAA,GAAG,EAAEA,GAAuC;AAC5CE,MAAAA,SAAS,EAAEC,IAAI,CAAC,iCAAiC,CAAE;AAAAP,MAAAA,QAAA,EAElDA,QAAAA;AAAQ,KACN,CAAC,CAAA;AAEV,GAAA;AAEA,EAAA,oBACEK,GAAA,CAAA,GAAA,EAAA;AACED,IAAAA,GAAG,EAAEA,GAA0C;AAC/CI,IAAAA,IAAI,EAAEP,GAAI;AACVQ,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBJ,SAAS,EAAEC,IAAI,CACb,4BAA4B,EAC5BJ,gBAAgB,GAAG,yCAAyC,GAAG,EAAE,CACjE;AACFQ,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,OAAO,EAAEV,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER,CAAC;;;;"}
+{"version":3,"file":"UploadItemLink.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n  url?: string;\n  onDownload?: (event: MouseEvent) => void;\n  singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, UploadItemLinkProps>(\n  ({ children, url, onDownload, singleFileUpload }, ref) => {\n    if (!url) {\n      return <div ref={ref as React.RefObject<HTMLDivElement>} className={clsx('np-upload-input__item-container')}>{children}</div>;\n    }\n\n    return (\n      <a\n        ref={ref as React.RefObject<HTMLAnchorElement>}\n        href={url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className={clsx(\n          'np-upload-input__item-link',\n          singleFileUpload ? 'np-upload-input__item-link--single-file' : '',\n        )}\n        onClick={onDownload}\n      >\n        {children}\n      </a>\n    );\n  },\n);\n"],"names":["UploadItemLink","forwardRef","children","url","onDownload","singleFileUpload","ref","_jsx","className","clsx","href","target","rel","onClick"],"mappings":";;;;AASaA,MAAAA,cAAc,gBAAGC,UAAU,CACtC,CAAC;EAAEC,QAAQ;EAAEC,GAAG;EAAEC,UAAU;AAAEC,EAAAA,gBAAAA;CAAkB,EAAEC,GAAG,KAAI;EACvD,IAAI,CAACH,GAAG,EAAE;AACR,IAAA,oBAAOI,GAAA,CAAA,KAAA,EAAA;AAAKD,MAAAA,GAAG,EAAEA,GAAuC;AAACE,MAAAA,SAAS,EAAEC,IAAI,CAAC,iCAAiC,CAAE;AAAAP,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAC/H,GAAA;AAEA,EAAA,oBACEK,GAAA,CAAA,GAAA,EAAA;AACED,IAAAA,GAAG,EAAEA,GAA0C;AAC/CI,IAAAA,IAAI,EAAEP,GAAI;AACVQ,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBJ,SAAS,EAAEC,IAAI,CACb,4BAA4B,EAC5BJ,gBAAgB,GAAG,yCAAyC,GAAG,EAAE,CACjE;AACFQ,IAAAA,OAAO,EAAET,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-05bf45b",
+  "version": "0.0.0-experimental-62a0fe9",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -76,8 +76,8 @@
     "@types/lodash": "4.17.6",
     "@types/lodash.clamp": "^4.0.9",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
     "@types/react-transition-group": "4.4.10",
     "@wise/art": "^2.7.0",
     "babel-plugin-formatjs": "^10.5.16",
@@ -92,14 +92,14 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@wise/components-theming": "1.6.0",
-    "@transferwise/neptune-css": "14.19.1"
+    "@transferwise/neptune-css": "14.19.1",
+    "@wise/components-theming": "0.0.0-experimental-62a0fe9"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
     "@transferwise/neptune-css": "^14.9.6",
     "@wise/art": "^2.7.0",
-    "@wise/components-theming": "^1.0.0",
+    "@wise/components-theming": "0.0.0-experimental-62a0fe9",
     "react": ">=18",
     "react-dom": ">=18",
     "react-intl": "^5.10.0 || ^6"

package/src/common/polymorphicWithOverrides/PolymorphicWithOverrides.tsx

@@ -11,9 +11,13 @@ export interface PolymorphicWithOverridesProps {
 /**
  * For overcoming the limitations of third-party components with an `as` prop.
  */
-export const PolymorphicWithOverrides = forwardRef(function PolymorphicWithOverrides(
-  { __overrides: { as: Element, ...restOverrides }, ...restProps }: PolymorphicWithOverridesProps,
-  ref: React.ForwardedRef<Element | null>,
-) {
-  return <Element ref={ref} {...restProps} {...restOverrides} />;
-});
+export const PolymorphicWithOverrides = forwardRef<Element | null, PolymorphicWithOverridesProps>(
+  function PolymorphicWithOverrides(
+    { __overrides, ...restProps },
+    ref: React.ForwardedRef<Element | null>,
+  ) {
+    const { as: Element, ...restOverrides } =
+      __overrides as PolymorphicWithOverridesProps['__overrides'];
+    return <Element ref={ref} {...restProps} {...restOverrides} />;
+  },
+);

package/src/uploadInput/UploadInput.spec.tsx

@@ -139,7 +139,7 @@ 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 () => {
         await jest.runOnlyPendingTimersAsync();
@@ -190,7 +190,7 @@ 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 () => {
         await jest.runOnlyPendingTimersAsync();
@@ -212,94 +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,
-      });
-
-      const fileToDelete = screen.getByTestId('1-uploadItem');
-      const nextFileAction = screen.getByTestId('3-action');
-
-      within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
-      await act(async () => {
-        await jest.runOnlyPendingTimersAsync();
-      });
-
-      screen.getByText('Remove').click();
-
-      await waitForElementToBeRemoved(fileToDelete);
-      expect(props.onDeleteFile).toHaveBeenCalledWith(files[0].id);
-
-      await waitFor(() => {
-        expect(nextFileAction).toHaveFocus();
-      });
-    });
-
-    it('should focus the Upload Input Button if the last item is removed', 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,
-      });
-
-      const fileToDelete = screen.getByTestId('3-uploadItem');
-      const uploadInput = screen.getByTestId('uploadInput');
-
-      within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
-      await act(async () => {
-        await jest.runOnlyPendingTimersAsync();
-      });
-
-      screen.getByText('Remove').click();
-
-      await waitForElementToBeRemoved(fileToDelete);
-      expect(props.onDeleteFile).toHaveBeenCalledWith(files[2].id);
-
-      await waitFor(() => {
-        expect(uploadInput).toHaveFocus();
-      });
-    });
   });
 
   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;
 
   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);

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -4,8 +4,9 @@ import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useIntl } from 'react-intl';
 
 import Body from '../../body';
-import { Size, Status, Typography } from '../../common';
+import { Size, Status, Typography, Sentiment } from '../../common';
 import ProcessIndicator from '../../processIndicator/ProcessIndicator';
+import StatusIcon from '../../statusIcon/StatusIcon';
 import { UploadedFile, UploadError } from '../types';
 
 import MESSAGES from './UploadItem.messages';
@@ -37,8 +38,6 @@ interface UploadItemRef {
 export enum TEST_IDS {
   uploadItem = 'uploadItem',
   mediaBody = 'mediaBody',
-  link = 'link',
-  action = 'action',
 }
 
 const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
@@ -47,7 +46,6 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
     const { status, filename, error, errors, url } = file;
     const linkRef = useRef<HTMLAnchorElement>(null);
     const buttonRef = useRef<HTMLButtonElement>(null);
-    const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
 
     useImperativeHandle<UploadItemRef, UploadItemRef>(ref, () => ({
       focus: (): void => {
@@ -59,6 +57,8 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
       },
     }));
 
+    const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
+
     /**
      * We're temporarily reverting to the regular icon components,
      * until the StatusIcon receives 24px sizing. Some misalignment
@@ -152,20 +152,16 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
     return (
       <div
         className={clsx('np-upload-input__item', { 'is-interactive': isSucceeded && url })}
-        data-testid={`${file.id}-${TEST_IDS.uploadItem}`}
+        data-testid={TEST_IDS.uploadItem}
       >
         <UploadItemLink
           ref={linkRef}
           url={isSucceeded ? url : undefined}
           singleFileUpload={singleFileUpload}
-          data-testid={`${file.id}-${TEST_IDS.link}`}
           onDownload={onDownloadFile}
         >
           <span className="np-upload-input__icon">{getIcon()}</span>
-          <div
-            className="np-upload-input__item-content"
-            data-testid={`${file.id}-${TEST_IDS.mediaBody}`}
-          >
+          <div className="np-upload-input__item-content" data-testid={TEST_IDS.mediaBody}>
             <Body type={Typography.BODY_LARGE} className="np-upload-input__title text-word-break">
               {getTitle()}
             </Body>
@@ -179,8 +175,6 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
               aria-label={formatMessage(MESSAGES.removeFile, { filename })}
               className="np-upload-input__item-button"
               type="button"
-              tabIndex={0}
-              data-testid={`${file.id}-${TEST_IDS.action}`}
               onClick={() => onDelete()}
             >
               <Bin size={16} />

package/src/uploadInput/uploadItem/UploadItemLink.tsx

@@ -10,14 +10,7 @@ type UploadItemLinkProps = PropsWithChildren<{
 export const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, UploadItemLinkProps>(
   ({ children, url, onDownload, singleFileUpload }, ref) => {
     if (!url) {
-      return (
-        <div
-          ref={ref as React.RefObject<HTMLDivElement>}
-          className={clsx('np-upload-input__item-container')}
-        >
-          {children}
-        </div>
-      );
+      return <div ref={ref as React.RefObject<HTMLDivElement>} className={clsx('np-upload-input__item-container')}>{children}</div>;
     }
 
     return (
@@ -30,7 +23,6 @@ export const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, Upl
           'np-upload-input__item-link',
           singleFileUpload ? 'np-upload-input__item-link--single-file' : '',
         )}
-        tabIndex={0}
         onClick={onDownload}
       >
         {children}