@transferwise/components 46.62.1 → 46.64.0

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -2,13 +2,14 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
-import CheckboxButton, { CheckboxButtonProps } from './CheckboxButton';
+import CheckboxButton from './CheckboxButton';
 
 export default {
   component: CheckboxButton,
   title: 'Actions/CheckboxButton',
   tags: ['autodocs'],
   args: {
+    disabled: false,
     onBlur: action('blur'),
     onClick: action('click'),
     onFocus: action('focus'),
@@ -20,7 +21,6 @@ type Story = StoryObj<typeof CheckboxButton>;
 export const Basic: Story = {
   args: {
     'aria-label': 'Toggle email updates',
-    disabled: false,
   },
   render: (args) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -30,25 +30,22 @@ export const Basic: Story = {
   },
 };
 
-const Template = (props: CheckboxButtonProps) => {
-  const checked = true;
-  const [indeterminate, setIndeterminate] = useState(true);
-
-  return (
-    <CheckboxButton
-      {...props}
-      checked={checked}
-      indeterminate={indeterminate}
-      onChange={() => setIndeterminate(!indeterminate)}
-    />
-  );
-};
-
-export const Indeterminate = () => {
-  const args = {
+export const Indeterminate: Story = {
+  args: {
     'aria-label': 'Group checkbox with indeterminate state',
-    disabled: false,
     indeterminate: true,
-  };
-  return <Template {...args} />;
+  },
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [indeterminate, setIndeterminate] = useState(true);
+
+    return (
+      <CheckboxButton
+        {...args}
+        checked
+        indeterminate={indeterminate}
+        onChange={() => setIndeterminate(!indeterminate)}
+      />
+    );
+  },
 };

package/src/circularButton/CircularButton.tsx

@@ -3,7 +3,7 @@ import { cloneElement } from 'react';
 
 import Body from '../body/Body';
 import { typeClassMap, priorityClassMap } from '../button/classMap';
-import { ControlType, Priority , Typography } from '../common';
+import { ControlType, Priority, Typography } from '../common';
 
 export interface CircularButtonProps {
   className?: string;

package/src/common/locale/index.ts

@@ -79,7 +79,7 @@ export function getLangFromLocale(locale: string) {
  */
 export function getCountryFromLocale(locale: string) {
   const adjustedLocale = adjustLocale(locale);
-  return adjustedLocale != null ? new Intl.Locale(adjustedLocale).region ?? null : null;
+  return adjustedLocale != null ? (new Intl.Locale(adjustedLocale).region ?? null) : null;
 }
 
 /**

package/src/dateLookup/tableLink/TableLink.tsx

@@ -56,21 +56,21 @@ const TableLink = ({
 
   return (
     <button
-        ref={buttonRef}
-        type="button"
-        className={clsx(
-          `tw-date-lookup-${type}-option np-text-body-default-bold`,
-          { active: !!active },
-          { today: !!today },
-        )}
-        disabled={disabled}
-        tabIndex={autofocus ? 0 : -1}
-        aria-label={calculateAriaLabel()}
-        aria-pressed={active}
-        onClick={onCalendarClick}
-      >
-        {title || item}
-      </button>
+      ref={buttonRef}
+      type="button"
+      className={clsx(
+        `tw-date-lookup-${type}-option np-text-body-default-bold`,
+        { active: !!active },
+        { today: !!today },
+      )}
+      disabled={disabled}
+      tabIndex={autofocus ? 0 : -1}
+      aria-label={calculateAriaLabel()}
+      aria-pressed={active}
+      onClick={onCalendarClick}
+    >
+      {title || item}
+    </button>
   );
 };
 

package/src/instructionsList/InstructionsList.tsx

@@ -57,10 +57,7 @@ function Instruction({ item, type }: { item: ReactNode | InstructionNode; type:
   const isInstructionNode =
     typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;
   return (
-    <li
-      className="instruction"
-      aria-label={isInstructionNode ? (item['aria-label']) : undefined}
-    >
+    <li className="instruction" aria-label={isInstructionNode ? item['aria-label'] : undefined}>
       {type === 'do' ? (
         <DoIcon size={24} className={type} />
       ) : (

package/src/radio/Radio.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 
 import Body from '../body/Body';
@@ -22,20 +21,19 @@ export default function Radio<T extends string | number = ''>({
   secondary,
   ...otherProps
 }: RadioProps<T>) {
-  const { isModern } = useTheme();
   return (
     <div
       className={clsx(
         'radio np-radio',
         {
           'radio-lg': secondary,
-          disabled: isModern && disabled,
+          'radio-disabled': disabled,
         },
         className,
       )}
     >
       <label className={clsx({ disabled })} htmlFor={id}>
-        <span className={clsx(isModern ? 'm-r-2' : 'p-r-2', 'np-radio-button')}>
+        <span className="m-r-2 np-radio-button">
           <RadioButton id={id} disabled={disabled} {...otherProps} />
         </span>
         <Body
@@ -44,11 +42,7 @@ export default function Radio<T extends string | number = ''>({
           className="np-radio__text"
         >
           {label}
-          {secondary && (
-            <Body as="span" className={clsx({ secondary: !isModern })}>
-              {secondary}
-            </Body>
-          )}
+          {secondary && <Body as="span">{secondary}</Body>}
         </Body>
         {avatar && <span className="np-radio__avatar m-l-auto">{avatar}</span>}
       </label>

package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap

@@ -9,7 +9,7 @@ exports[`Radio shows the avatar when supplied 1`] = `
       class=""
     >
       <span
-        class="p-r-2 np-radio-button"
+        class="m-r-2 np-radio-button"
       >
         <input
           class="sr-only"

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx

@@ -2,6 +2,7 @@ import { StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
 
 import TextareaWithDisplayFormat from './TextareaWithDisplayFormat';
+import { Field } from '../field/Field';
 
 export default {
   component: TextareaWithDisplayFormat,
@@ -11,15 +12,19 @@ export default {
 type Story = StoryObj<typeof TextareaWithDisplayFormat>;
 
 export const Basic: Story = {
-  render: (args) => {
+  render: () => {
+    const label = 'Textarea with display format';
+    const id = label.replaceAll(' ', '-').toLowerCase();
+
     return (
-      <>
+      <Field id={id} label={label}>
         <TextareaWithDisplayFormat
+          id={id}
           value="0000"
           displayPattern="**** - **** - ****"
           onChange={console.log}
         />
-      </>
+      </Field>
     );
   },
   // intentionally use interactive typing (over init value via `value` prop)

package/src/uploadInput/UploadInput.tests.story.tsx

@@ -23,21 +23,25 @@ const files = [
   {
     id: 2,
     filename: 'purchase-receipt-1.pdf',
+  },
+  {
+    id: 6,
+    filename: 'purchase-receipt-1.pdf',
     url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
   },
   {
-    id: 2,
+    id: 3,
     filename: 'receipt failed.png',
     status: Status.FAILED,
   },
   {
-    id: 3,
+    id: 4,
     filename: 'receipt failed With error string.png',
     status: Status.FAILED,
     error: 'Something went wrong',
   },
   {
-    id: 4,
+    id: 5,
     filename: 'receipt failed With error object.png',
     status: Status.FAILED,
     error: { message: 'Something went wrong' },

package/src/uploadInput/UploadInput.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useLayoutEffect } from 'react';
 import { useIntl } from 'react-intl';
 
 import Button from '../button';
@@ -101,6 +101,10 @@ export type UploadInputProps = {
   Pick<UploadItemProps, 'onDownload'> &
   CommonProps;
 
+interface UploadItemRef {
+  focus: () => void;
+}
+
 function generateFileId(file: File) {
   const { name, size } = file;
   const uploadTimeStamp = new Date().getTime();
@@ -131,8 +135,11 @@ const UploadInput = ({
   const inputAttributes = useInputAttributes({ nonLabelable: true });
 
   const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | 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]);
 
@@ -174,21 +181,28 @@ const UploadInput = ({
     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);
+    setFileToRemoveIndex(index);
 
     if (status === Status.FAILED) {
-      // If removing a failed upload, we're just updating the view
       removeFileFromList(file);
+      setFileToRemove(file);
     } else if (onDeleteFile && id) {
-      // Set status to PROCESSING
       modifyFileInList(file, { status: Status.PROCESSING, error: undefined });
 
-      // Notify host app about deletion
       onDeleteFile(id)
-        .then(() => removeFileFromList(file))
+        .then(() => {
+          removeFileFromList(file);
+        })
         .catch((error) => {
           modifyFileInList(file, { error: error as UploadError });
+        })
+        .finally(() => {
+          setFileToRemove(file);
         });
     }
   };
@@ -263,10 +277,18 @@ 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,
-          filename: name,
+          id: generateFileId(file),
+          filename: file.name,
           status: Status.PENDING,
         };
 
@@ -290,6 +312,22 @@ const UploadInput = ({
     }
   };
 
+  useLayoutEffect(() => {
+    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
+    }
+  }, [uploadedFiles, fileToRemove, fileToRemoveIndex, itemRefs, uploadInputRef]);
+
   useEffect(() => {
     setMounted(true);
   }, []);
@@ -307,9 +345,12 @@ const UploadInput = ({
         className={clsx('np-upload-input', className, { disabled })}
         {...inputAttributes}
       >
-        {uploadedFiles.map((file) => (
+        {uploadedFiles.map((file, index) => (
           <UploadItem
             key={file.id}
+            ref={(el: UploadItemRef | null) => {
+              itemRefs.current[index] = el;
+            }}
             file={file}
             singleFileUpload={!multiple}
             canDelete={
@@ -326,6 +367,7 @@ const UploadInput = ({
         ))}
         {(multiple || (!multiple && !uploadedFiles.length)) && (
           <UploadButton
+            ref={uploadInputRef}
             id={id}
             uploadButtonTitle={uploadButtonTitle}
             disabled={areMaximumFilesUploadedAlready() || disabled}