@transferwise/components 0.0.0-experimental-af6dee0 → 0.0.0-experimental-199a021

package/src/main.css

@@ -30839,17 +30839,6 @@ button.np-link {
 }
 
 .tw-loader {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  gap: var(--size-16);
-  width: 190px;
-  text-align: center;
-  word-break: break-word;
-}
-
-.tw-loader-asset {
   overflow: hidden;
   border-radius: 50%;
   backface-visibility: hidden;
@@ -30866,11 +30855,11 @@ button.np-link {
   transition: opacity 300ms cubic-bezier(0.24, 0, 0.3, 1);
 }
 
-.tw-loader-asset--visible {
+.tw-loader--visible {
   opacity: 1;
 }
 
-.tw-loader-asset::before {
+.tw-loader::before {
   content: "";
   display: block;
   width: 4.5rem;
@@ -30890,7 +30879,7 @@ button.np-link {
   animation-iteration-count: infinite;
 }
 
-.tw-loader-asset--sm {
+.tw-loader--sm {
   --coin-size: 3rem;
   --coin-edge-width-offset: translateX(0.275rem);
   --coin-edge-width-negative-offset: translateX(-0.275rem);
@@ -30898,7 +30887,7 @@ button.np-link {
   --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour);
 }
 
-.tw-loader-asset--md {
+.tw-loader--md {
   --coin-size: 4.5rem;
   --coin-edge-width-offset: translateX(0.375rem);
   --coin-edge-width-negative-offset: translateX(-0.375rem);

package/src/nudge/Nudge.tsx

@@ -96,8 +96,21 @@ const Nudge = ({
   action,
 }: Props) => {
   const intl = useIntl();
-  const [isDismissed, setIsDismissed] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
+  const [nudgeState, setNudgeState] = useState(() => {
+    const initialDismissed =
+      persistDismissal && id ? !!getLocalStorage()?.find((item) => item === id) : false;
+    return {
+      isDismissed: initialDismissed,
+      isMounted: false,
+    };
+  });
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect
+    setNudgeState((prev) => ({ ...prev, isMounted: true }));
+  }, []);
+
+  const { isDismissed } = nudgeState;
 
   const handleOnDismiss = () => {
     const dismissedNudgesStorage = getLocalStorage();
@@ -105,9 +118,9 @@ const Nudge = ({
     if (persistDismissal && id) {
       try {
         localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));
-      } catch (error) {}
+      } catch {}
 
-      setIsDismissed(true);
+      setNudgeState((prev) => ({ ...prev, isDismissed: true }));
     }
 
     if (onDismiss) {
@@ -116,25 +129,15 @@ const Nudge = ({
   };
 
   useEffect(() => {
-    if (persistDismissal && id) {
+    if (persistDismissal && id && isPreviouslyDismissed) {
       const dismissedNudgesStorage = getLocalStorage();
-      let isDismissed = false;
-
-      if (dismissedNudgesStorage?.find((item) => item === id)) {
-        setIsDismissed(true);
-        isDismissed = true;
-      }
-
-      if (isPreviouslyDismissed) {
-        isPreviouslyDismissed(isDismissed);
-      }
+      const wasDismissed = !!dismissedNudgesStorage?.find((item) => item === id);
+      isPreviouslyDismissed(wasDismissed);
     }
-
-    setIsMounted(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, persistDismissal]);
 
-  if (persistDismissal && (isDismissed || !isMounted)) {
+  if (persistDismissal && (isDismissed || !nudgeState.isMounted)) {
     return null;
   }
 
@@ -143,7 +146,7 @@ const Nudge = ({
       {!!mediaName && (
         <div className="wds-nudge-media">
           <Illustration
-            name={mediaName as IllustrationNames}
+            name={mediaName}
             className={clsx(`wds-nudge-media-${mediaName}`)}
             size="small"
             disablePadding

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -75,12 +75,13 @@ const PhoneNumberInput = ({
 
   const { locale, formatMessage } = useIntl();
 
+  const [randomId] = useState(() => Math.random().toString(36).slice(2, 8));
+
   const createId = (customID: string | undefined, backup: string): string => {
     if (customID) {
       return customID + (backup ? `-${backup}` : '');
     }
-    const random = Math.random().toString(36).slice(2, 8);
-    return `${backup}-${random}`;
+    return `${backup}-${randomId}`;
   };
 
   // Link the first non-disabled input to the the Field label, if present
@@ -107,14 +108,16 @@ const PhoneNumberInput = ({
 
     return explodeNumberModel(cleanValue);
   });
-  const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);
+  const broadcastedValueRef = useRef<PhoneNumber>(internalValue);
 
   const [suffixDirty, setSuffixDirty] = useState(false);
+
   useEffect(() => {
-    if (internalValue.suffix) {
+    if (!suffixDirty && internalValue.suffix) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Tracking when suffix becomes dirty
       setSuffixDirty(true);
     }
-  }, [internalValue.suffix]);
+  }, [internalValue.suffix, suffixDirty]);
 
   const countriesByPrefix = useMemo(
     () =>
@@ -152,13 +155,8 @@ const PhoneNumberInput = ({
   };
 
   useEffect(() => {
-    if (broadcastedValue === null) {
-      setBroadcastedValue(internalValue);
-      return;
-    }
-
     const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;
-    const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;
+    const broadcastedPhoneNumber = `${broadcastedValueRef.current.prefix ?? ''}${broadcastedValueRef.current.suffix}`;
 
     if (internalPhoneNumber === broadcastedPhoneNumber) {
       return;
@@ -172,8 +170,8 @@ const PhoneNumberInput = ({
       newValue,
       internalValue.prefix ?? '', // TODO: Allow `null` in public API
     );
-    setBroadcastedValue(internalValue);
-  }, [onChange, broadcastedValue, internalValue]);
+    broadcastedValueRef.current = internalValue;
+  }, [onChange, internalValue]);
 
   useEffect(() => {
     const labelRef = fieldLabelRef?.current;

package/src/promoCard/PromoCard.story.tsx

@@ -47,7 +47,7 @@ export const TaskCard: Story = {
     isSmall: true,
     useDisplayFont: false,
     className: 'taskCard',
-  } as PromoCardLinkProps,
+  },
   decorators: [
     (Story) => (
       <div>
@@ -90,7 +90,7 @@ export const TaskCardWithCustomIcon: Story = {
   args: {
     ...TaskCard.args,
     indicatorIcon: <StarFill size={24} aria-hidden="true" />,
-  } as PromoCardLinkProps,
+  },
   decorators: TaskCard.decorators,
 };
 
@@ -101,7 +101,7 @@ export const TaskCardCompleted: Story = {
     href: undefined,
     indicatorIcon: 'check',
     className: 'taskCard taskCard--completed np-theme--personal np-theme-personal--forest-green',
-  } as PromoCardLinkProps,
+  },
   decorators: TaskCard.decorators,
 };
 

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.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.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),
     );
@@ -274,13 +275,11 @@ const UploadInput = ({
 
         if (!isTypeValid(file, allowedFileTypes)) {
           handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));
-          continue;
         }
 
         if (typeof sizeLimit === 'number' && !isSizeValid(file, sizeLimit * 1000)) {
           const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);
           handleFileUploadFailure(file, failureMessage);
-          continue;
         }
 
         if (areMaximumFilesUploadedAlready()) {
@@ -288,7 +287,6 @@ const UploadInput = ({
             maxFilesErrorMessage ||
             formatMessage(MESSAGES.maximumFilesAlreadyUploaded, { maxFilesAllowed: maxFiles });
           handleFileUploadFailure(file, failureMessage);
-          continue;
         }
 
         const existingFile = uploadedFiles.find((f) => f.filename === file.name);
@@ -321,14 +319,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 +336,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 +355,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 +401,7 @@ const UploadInput = ({
         typeof uploadInputRef.current.focus === 'function'
       ) {
         setTimeout(() => {
-          uploadInputRef.current!.focus();
+          uploadInputRef.current?.focus();
         }, 0);
       } else if (
         typeof focusTarget === 'object' &&
@@ -436,17 +436,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 +478,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}