@transferwise/components 46.140.0 → 46.141.0

package/src/styles/less/neptune.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:11 GMT
+ * Generated on Thu, 14 May 2026 16:11:43 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business--bright-green {
@@ -4351,48 +4351,53 @@ a.text-inverse:focus {
 
 @media (max-width: 320px) {
   .np-theme-personal {
-    --delta: 2;
-    --size-4: calc(4px / var(--delta));
-    --size-5: calc(5px / var(--delta));
-    --size-8: calc(8px / var(--delta));
-    --size-10: calc(10px / var(--delta));
-    --size-12: calc(12px / var(--delta));
-    --size-14: calc(14px / var(--delta));
-    --size-16: calc(16px / var(--delta));
-    --size-24: calc(24px / var(--delta));
-    --size-32: calc(32px / var(--delta));
-    --size-40: calc(40px / var(--delta));
-    --size-48: calc(48px / var(--delta));
-    --size-52: calc(52px / var(--delta));
-    --size-56: calc(56px / var(--delta));
-    --size-60: calc(60px / var(--delta));
-    --size-64: calc(64px / var(--delta));
-    --size-72: calc(72px / var(--delta));
-    --size-80: calc(80px / var(--delta));
-    --size-88: calc(88px / var(--delta));
-    --size-96: calc(96px / var(--delta));
-    --size-104: calc(104px / var(--delta));
-    --size-112: calc(112px / var(--delta));
-    --size-120: calc(120px / var(--delta));
-    --size-126: calc(126px / var(--delta));
-    --size-128: calc(128px / var(--delta));
-    --size-146: calc(146px / var(--delta));
-    --size-154: calc(154px / var(--delta));
-    --size-x-small: calc(24px / var(--delta));
-    --size-small: calc(32px / var(--delta));
-    --size-medium: calc(40px / var(--delta));
-    --size-large: calc(48px / var(--delta));
-    --size-x-large: calc(56px / var(--delta));
-    --size-2x-large: calc(72px / var(--delta));
-    --space-content-horizontal: calc(16px / var(--delta));
-    --space-small: calc(16px / var(--delta));
-    --space-medium: calc(32px / var(--delta));
-    --space-large: calc(40px / var(--delta));
-    --space-x-large: calc(56px / var(--delta));
-    --padding-x-small: var(--size-8);
-    --padding-small: var(--size-16);
-    --padding-medium: var(--size-24);
-    --padding-large: var(--size-32);
+    --padding-x-small: 4px;
+    --padding-small: 8px;
+    --padding-medium: 12px;
+    --padding-large: 16px;
+    --size-4: 2px;
+    --size-5: 2.5px;
+    --size-8: 4px;
+    --size-10: 5px;
+    --size-12: 6px;
+    --size-14: 7px;
+    --size-16: 8px;
+    --size-24: 12px;
+    --size-32: 16px;
+    --size-40: 20px;
+    --size-48: 24px;
+    --size-52: 26px;
+    --size-56: 28px;
+    --size-60: 30px;
+    --size-64: 32px;
+    --size-72: 36px;
+    --size-80: 40px;
+    --size-88: 44px;
+    --size-96: 48px;
+    --size-104: 52px;
+    --size-112: 56px;
+    --size-120: 60px;
+    --size-126: 63px;
+    --size-128: 64px;
+    --size-146: 73px;
+    --size-154: 77px;
+    --size-160: 80px;
+    --size-x-small: 12px;
+    --size-small: 16px;
+    --size-medium: 20px;
+    --size-large: 24px;
+    --size-x-large: 28px;
+    --size-2x-large: 36px;
+    --space-content-horizontal: 8px;
+    --space-small: 8px;
+    --space-medium: 16px;
+    --space-large: 20px;
+    --space-x-large: 28px;
+  }
+}
+
+@media (max-width: 320px) {
+  .np-theme-personal {
     --input-height-base: var(--size-32);
     --input-height-large: var(--input-height-small);
     --input-padding: var(--input-padding-small);

package/src/tabs/Tabs.tsx

@@ -254,7 +254,7 @@ export default class Tabs extends Component<TabsProps, TabsState> {
   };
 
   onKeyDown = (index: number) => (event: React.KeyboardEvent<HTMLLIElement>) => {
-    if (event && event.key === 'Enter') {
+    if (event?.key === 'Enter') {
       this.switchTab(index);
     }
   };

package/src/tooltip/Tooltip.tsx

@@ -51,6 +51,7 @@ const Tooltip = ({
     middleware: [
       offset(16),
       flip({ fallbackPlacements: [Position.TOP] }),
+      // eslint-disable-next-line react-hooks/refs -- arrowRef is passed to floating-ui middleware, legitimate API usage
       arrowMiddleware({ element: arrowRef, padding: 8 }),
     ],
     whileElementsMounted: open ? autoUpdate : undefined,
@@ -63,6 +64,7 @@ const Tooltip = ({
   };
 
   return (
+    /* eslint-disable react-hooks/refs -- setReference and setFloating are callback refs from floating-ui, safe to pass during render */
     <span
       ref={refs.setReference}
       className="tw-tooltip-container"
@@ -96,6 +98,7 @@ const Tooltip = ({
         </div>
       </div>
     </span>
+    /* eslint-enable react-hooks/refs */
   );
 };
 

package/src/uploadInput/UploadInput.test.tsx

@@ -66,6 +66,25 @@ describe('UploadInput', () => {
     jest.useRealTimers();
   });
 
+  describe('onFilesChange mount behavior', () => {
+    it('should not call onFilesChange on initial mount', () => {
+      const onFilesChange = jest.fn();
+      renderComponent({
+        ...props,
+        files: [
+          {
+            id: 1,
+            filename: 'existing-file.pdf',
+            status: Status.SUCCEEDED,
+          },
+        ],
+        onFilesChange,
+      });
+
+      expect(onFilesChange).not.toHaveBeenCalled();
+    });
+  });
+
   describe('single file upload', () => {
     it('should trigger onUploadFiles & onFilesChange with a single FormData entry containing `file` field', async () => {
       const date = Date.now();

package/src/uploadInput/UploadInput.tsx

@@ -170,10 +170,10 @@ const UploadInput = ({
   const inputAttributes = useInputAttributes({ nonLabelable: true });
   const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);
   const [lastAttemptedDeleteId, setLastAttemptedDeleteId] = useState<string | number | null>(null);
-  const [mounted, setMounted] = useState(false);
+  const mountedRef = useRef(false);
   const { formatMessage } = useIntl();
   const uploadInputRef = useRef<HTMLInputElement | null>(null);
-  let fileRefs: (HTMLDivElement | UploadItemRef | null)[] = [];
+  const fileRefs = useRef<(HTMLDivElement | UploadItemRef | null)[]>([]);
 
   const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);
 
@@ -196,7 +196,7 @@ const UploadInput = ({
     updateFileList((list) =>
       list.filter((fileInList) => file !== fileInList && file.id !== fileInList.id),
     );
-    fileRefs = fileRefs.filter((ref) => ref && ref.id !== file.id);
+    fileRefs.current = fileRefs.current.filter((ref) => ref && ref.id !== file.id);
   }
 
   function modifyFileInList(file: UploadedFile, updates: Partial<UploadedFile>) {
@@ -208,18 +208,18 @@ const UploadInput = ({
   }
 
   const removeFile = async (file: UploadedFile) => {
-    const { id, status } = file;
-    fileRefs = fileRefs.filter((item) => item && item.id !== file.id);
+    const { id: fileId, status } = file;
+    fileRefs.current = fileRefs.current.filter((item) => item && item.id !== file.id);
 
     if (status === Status.FAILED) {
       removeFileFromList(file);
       return Promise.resolve();
     }
 
-    if (onDeleteFile && id) {
+    if (onDeleteFile && fileId) {
       modifyFileInList(file, { status: Status.PROCESSING, error: undefined });
 
-      return onDeleteFile(id)
+      return onDeleteFile(fileId)
         .then(() => {
           removeFileFromList(file);
         })
@@ -248,6 +248,7 @@ const UploadInput = ({
 
   function getNumberOfFilesUploaded() {
     const uploadInitiatedStatus = new Set([Status.SUCCEEDED, Status.PENDING]);
+
     const validFiles = uploadedFilesListReference.current.filter(
       (file) => file.status && uploadInitiatedStatus.has(file.status),
     );
@@ -321,14 +322,16 @@ const UploadInput = ({
   };
 
   useEffect(() => {
-    setMounted(true);
-  }, []);
+    // Skip onFilesChange call on initial mount, only call on updates
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
 
-  useEffect(() => {
-    if (onFilesChange && mounted) {
+    if (onFilesChange) {
       onFilesChange([...uploadedFiles]);
     }
-  }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [onFilesChange, uploadedFiles]);
 
   type NextFocusable =
     | HTMLDivElement
@@ -336,14 +339,14 @@ const UploadInput = ({
     | { ref: HTMLDivElement | UploadItemRef; target: 'button' | 'link' }
     | null;
 
-  const [nextFocusable, setNextFocusable] = useState<NextFocusable>(uploadInputRef.current);
+  const [nextFocusable, setNextFocusable] = useState<NextFocusable>(null);
 
   const handleFocus = (fileId: string | number) => {
-    fileRefs = fileRefs.filter((ref) => {
+    fileRefs.current = fileRefs.current.filter((ref) => {
       return ref && ref.id !== markedFileForDelete?.id;
     });
 
-    const filesCount = fileRefs.length;
+    const filesCount = fileRefs.current.length;
     let next: UploadItemRef | HTMLDivElement | null = uploadInputRef.current;
     let focusTarget: 'button' | 'link' = 'button';
 
@@ -355,15 +358,15 @@ const UploadInput = ({
     }
 
     if (filesCount > 1) {
-      const currentFileIndex = fileRefs.findIndex((file) => file?.id === fileId);
-      const currentFileId = fileRefs?.[currentFileIndex]?.id;
-      const lastFileId = fileRefs?.[filesCount - 1]?.id;
+      const currentFileIndex = fileRefs.current.findIndex((file) => file?.id === fileId);
+      const currentFileId = fileRefs.current?.[currentFileIndex]?.id;
+      const lastFileId = fileRefs.current?.[filesCount - 1]?.id;
 
       // if last file, select a previous one
       if (currentFileId === lastFileId) {
-        next = fileRefs[filesCount - 2];
+        next = fileRefs.current[filesCount - 2];
       } else {
-        next = fileRefs[currentFileIndex + 1];
+        next = fileRefs.current[currentFileIndex + 1];
       }
 
       // If next is an UploadItemRef, check if it has a URL (succeeded)
@@ -401,7 +404,7 @@ const UploadInput = ({
         typeof uploadInputRef.current.focus === 'function'
       ) {
         setTimeout(() => {
-          uploadInputRef.current!.focus();
+          uploadInputRef.current?.focus();
         }, 0);
       } else if (
         typeof focusTarget === 'object' &&
@@ -436,17 +439,17 @@ const UploadInput = ({
           aria-relevant="all"
           role="region"
         >
-          {uploadedFiles.map((file, index) => (
+          {uploadedFiles.map((file) => (
             <UploadItem
               key={file.id}
               ref={(el: UploadItemRef | null) => {
                 if (
                   el &&
                   el.id !== markedFileForDelete?.id &&
-                  !fileRefs.some((ref) => ref && ref.id === el.id) &&
+                  !fileRefs.current.some((ref) => ref?.id === el.id) &&
                   el.status !== 'processing'
                 ) {
-                  fileRefs.push(el);
+                  fileRefs.current.push(el);
                 }
               }}
               file={file}
@@ -478,6 +481,7 @@ const UploadInput = ({
               ref={uploadInputRef}
               id={id}
               uploadButtonTitle={uploadButtonTitle}
+              // eslint-disable-next-line react-hooks/refs -- Function reads ref for file count check
               disabled={areMaximumFilesUploadedAlready() || disabled}
               multiple={multiple}
               fileTypes={fileTypes}