@transferwise/components 46.140.1 → 46.141.0

package/src/promoCard/PromoCardGroup.tsx

@@ -67,8 +67,45 @@ const PromoCardGroup: FunctionComponent<PromoCardGroupProps> = ({
   onChange = () => {},
   testId,
 }) => {
-  const [state, setState] = useState<string>(defaultChecked);
-  const [containerRole, setContainerRole] = useState<string | null>(null);
+  const [promoCardState, setPromoCardState] = useState<{
+    defaultChecked: string;
+    state: string;
+  }>({
+    defaultChecked,
+    state: defaultChecked,
+  });
+
+  useEffect(() => {
+    if (promoCardState.defaultChecked !== defaultChecked) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing defaultChecked prop to internal state
+      setPromoCardState({
+        defaultChecked,
+        state: defaultChecked,
+      });
+    }
+  }, [defaultChecked, promoCardState.defaultChecked]);
+
+  const { state } = promoCardState;
+  const setState = (newState: string) =>
+    setPromoCardState((prev) => ({ ...prev, state: newState }));
+
+  // Derive container role from children
+  const containerRole = useMemo(() => {
+    // Collect an array of types from the children PromoCard components
+    const types =
+      React.Children.map(children, (child) => {
+        if (React.isValidElement<PromoCardProps>(child) && child.props.type) {
+          return child.props.type;
+        }
+        return null;
+      })?.filter((type): type is 'radio' | 'checkbox' => type !== null && type !== undefined) ?? [];
+
+    // Check if all types are the same
+    const allTypesAreTheSame = types.every((type) => type === types[0]);
+
+    // If all types are the same and the type is 'radio', return 'radiogroup'
+    return allTypesAreTheSame && types[0] === 'radio' ? 'radiogroup' : null;
+  }, [children]);
 
   /**
    * The context value for the PromoCardGroup.
@@ -103,25 +140,6 @@ const PromoCardGroup: FunctionComponent<PromoCardGroupProps> = ({
     role: containerRole as AriaRoleRadioGroup | undefined, // Add the role attribute here
   };
 
-  useEffect(() => {
-    setState(defaultChecked);
-
-    // Collect an array of types from the children PromoCard components
-    const types =
-      React.Children.map(children, (child) => {
-        if (React.isValidElement<PromoCardProps>(child) && child.props.type) {
-          return child.props.type;
-        }
-        return null;
-      })?.filter((type): type is 'radio' | 'checkbox' => type !== null && type !== undefined) ?? [];
-
-    // Check if all types are the same
-    const allTypesAreTheSame = types.every((type) => type === types[0]);
-
-    // If all types are the same and the type is 'radio', set the container role
-    setContainerRole(allTypesAreTheSame && types[0] === 'radio' ? 'radiogroup' : null);
-  }, [defaultChecked, children]);
-
   return (
     <PromoCardContext.Provider value={contextValue}>
       <div {...commonProps}>{children}</div>

package/src/segmentedControl/SegmentedControl.test.tsx

@@ -188,4 +188,29 @@ describe('SegmentedControl', () => {
       'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',
     );
   });
+
+  describe('animation behavior', () => {
+    it('skips animation on initial render', () => {
+      renderSegmentedControl();
+
+      // On initial render, the component should render without triggering animation
+      // The isMountedRef ensures animation is skipped on first render
+      const segmentedControl = screen.getByTestId('segmented-control');
+
+      // Verify the component renders successfully
+      expect(segmentedControl).toBeInTheDocument();
+    });
+
+    it('enables animation after value change', async () => {
+      renderSegmentedControl();
+
+      // Change value by clicking on a different segment
+      const payroll = screen.getByRole('radio', { name: 'Payroll' });
+      await userEvent.click(payroll);
+
+      // After a value change, the component should have completed at least one update cycle
+      // verifying that the isMountedRef tracking works correctly
+      expect(onChange).toHaveBeenCalledWith('payroll');
+    });
+  });
 });

package/src/segmentedControl/SegmentedControl.tsx

@@ -38,6 +38,7 @@ const SegmentedControl = ({
   segments,
   onChange,
 }: SegmentedControlProps) => {
+  const isMountedRef = useRef(false);
   const [animate, setAnimate] = useState(false);
 
   const segmentsRef = useRef<HTMLDivElement>(null);
@@ -67,7 +68,12 @@ const SegmentedControl = ({
   };
 
   useEffect(() => {
-    setAnimate(true);
+    if (isMountedRef.current) {
+      setAnimate(true);
+    } else {
+      isMountedRef.current = true;
+    }
+
     updateSegmentPosition();
 
     const handleWindowSizeChange = () => {

package/src/select/Select.story.tsx

@@ -43,7 +43,7 @@ const ImageIcon = () => (
 );
 
 const isSelectOptionItem = (option: SelectItem | null): option is SelectOptionItem => {
-  return option !== null && typeof option.value !== 'undefined';
+  return typeof option?.value !== 'undefined';
 };
 
 export const Basic: Story = {

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}