@transferwise/components 46.62.1 → 46.64.0

package/src/uploadInput/uploadItem/UploadItemLink.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, MouseEvent } from 'react';
+import { PropsWithChildren, MouseEvent, forwardRef } from 'react';
 import { clsx } from 'clsx';
 
 type UploadItemLinkProps = PropsWithChildren<{
@@ -7,28 +7,26 @@ type UploadItemLinkProps = PropsWithChildren<{
   singleFileUpload: boolean;
 }>;
 
-export const UploadItemLink = ({
-  children,
-  url,
-  onDownload,
-  singleFileUpload,
-}: UploadItemLinkProps) => {
-  if (!url) {
-    return <div>{children}</div>;
-  }
+export const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, UploadItemLinkProps>(
+  ({ children, url, onDownload, singleFileUpload }, ref) => {
+    if (!url) {
+      return <div ref={ref as React.RefObject<HTMLDivElement>}>{children}</div>;
+    }
 
-  return (
-    <a
-      href={url}
-      target="_blank"
-      rel="noopener noreferrer"
-      className={clsx(
-        'np-upload-item__link',
-        singleFileUpload ? 'np-upload-item--single-file' : '',
-      )}
-      onClick={onDownload}
-    >
-      {children}
-    </a>
-  );
-};
+    return (
+      <a
+        ref={ref as React.RefObject<HTMLAnchorElement>}
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={clsx(
+          'np-upload-item__link',
+          singleFileUpload ? 'np-upload-item--single-file' : '',
+        )}
+        onClick={onDownload}
+      >
+        {children}
+      </a>
+    );
+  },
+);