@transferwise/components 46.97.5 → 46.98.0

package/src/typeahead/typeaheadInput/TypeaheadInput.spec.tsx

@@ -0,0 +1,103 @@
+import { render, fireEvent, screen } from '../../test-utils';
+import TypeaheadInput, { TypeaheadInputProps } from './TypeaheadInput';
+import { TypeaheadOption } from '../Typeahead';
+
+const defaultProps: TypeaheadInputProps<number> = {
+  id: 'test-id',
+  name: 'test-name',
+  typeaheadId: 'test-id',
+  value: '',
+  selected: [],
+  onChange: jest.fn(),
+  onKeyDown: jest.fn(),
+  onFocus: jest.fn(),
+  onPaste: jest.fn(),
+  autoComplete: 'off',
+  placeholder: 'Search...',
+  renderChip: jest.fn(),
+};
+
+describe('TypeaheadInput', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders input with placeholder', () => {
+    render(<TypeaheadInput {...defaultProps} />);
+    expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
+  });
+
+  it('renders with given value', () => {
+    render(<TypeaheadInput {...defaultProps} value="hello" />);
+    expect(screen.getByDisplayValue('hello')).toBeInTheDocument();
+  });
+
+  it('calls onChange when input value changes', () => {
+    const onChange = jest.fn();
+    render(<TypeaheadInput {...defaultProps} onChange={onChange} />);
+    const input = screen.getByPlaceholderText('Search...');
+    fireEvent.change(input, { target: { value: 'test' } });
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('calls onFocus when input is focused', () => {
+    const onFocus = jest.fn();
+    render(<TypeaheadInput {...defaultProps} onFocus={onFocus} />);
+    const input = screen.getByPlaceholderText('Search...');
+    fireEvent.focus(input);
+    expect(onFocus).toHaveBeenCalled();
+  });
+
+  it('calls onPaste when input is pasted into', () => {
+    const onPaste = jest.fn();
+    render(<TypeaheadInput {...defaultProps} onPaste={onPaste} />);
+    const input = screen.getByPlaceholderText('Search...');
+    fireEvent.paste(input, { clipboardData: { getData: () => 'pasted' } });
+    expect(onPaste).toHaveBeenCalled();
+  });
+
+  it('calls onKeyDown when key is pressed', () => {
+    const onKeyDown = jest.fn();
+    render(<TypeaheadInput {...defaultProps} onKeyDown={onKeyDown} />);
+    const input = screen.getByPlaceholderText('Search...');
+    fireEvent.keyDown(input, { key: 'ArrowDown', code: 'ArrowDown' });
+    expect(onKeyDown).toHaveBeenCalled();
+  });
+
+  it('renders chips when multiple is true and selected has items', () => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+    const renderChip = jest.fn((chip, idx) => <span key={idx}>{chip.label}</span>);
+    const selected = [
+      { label: 'Chip 1', value: 1 },
+      { label: 'Chip 2', value: 2 },
+    ];
+    render(
+      <TypeaheadInput {...defaultProps} multiple selected={selected} renderChip={renderChip} />,
+    );
+    expect(screen.getByText('Chip 1')).toBeInTheDocument();
+    expect(screen.getByText('Chip 2')).toBeInTheDocument();
+  });
+
+  it('does not show placeholder if multiple is true and selected has items', () => {
+    const selected: TypeaheadOption<number>[] = [{ label: 'Chip', value: 1 }];
+    render(<TypeaheadInput<number> {...defaultProps} multiple selected={selected} />);
+    expect(screen.queryByPlaceholderText('Search...')).not.toBeInTheDocument();
+  });
+
+  it('applies input width style when multiple and selected has items', () => {
+    const selected = [{ label: 'Chip', value: 1 }];
+    const { container } = render(
+      <TypeaheadInput {...defaultProps} multiple selected={selected} value="test" />,
+    );
+    const input = container.querySelector('input');
+    expect(input?.style.width).not.toBe('');
+  });
+
+  it('sets aria attributes correctly', () => {
+    render(<TypeaheadInput {...defaultProps} dropdownOpen ariaActivedescendant="option-1" />);
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveAttribute('aria-expanded', 'true');
+    expect(input).toHaveAttribute('aria-haspopup', 'listbox');
+    expect(input).toHaveAttribute('aria-activedescendant', expect.stringContaining('option-1'));
+  });
+});

package/src/typeahead/util/highlight.spec.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '../../test-utils';
+import Highlight from './highlight';
+
+describe('Highlight', () => {
+  it('renders value with highlighted query (case-insensitive)', () => {
+    render(<Highlight value="Hello World" query="world" />);
+    expect(screen.getByText('World')).toBeInTheDocument();
+    expect(screen.getByText('World').tagName).toBe('STRONG');
+    expect(screen.getByText('Hello', { exact: false })).toBeInTheDocument();
+  });
+
+  it('renders value with highlighted query (case-sensitive in output)', () => {
+    render(<Highlight value="Hello World" query="HELLO" />);
+    expect(screen.getByText('Hello').tagName).toBe('STRONG');
+    expect(screen.getByText('World', { exact: false })).toBeInTheDocument();
+  });
+
+  it('renders value without highlight if query not found', () => {
+    render(<Highlight value="Hello World" query="foo" />);
+    expect(screen.getByText('Hello World')).toBeInTheDocument();
+    expect(screen.queryByRole('strong')).not.toBeInTheDocument();
+  });
+
+  it('renders value as is if query is empty', () => {
+    render(<Highlight value="Hello World" query="" />);
+    expect(screen.getByText('Hello World')).toBeInTheDocument();
+    expect(screen.queryByRole('strong')).not.toBeInTheDocument();
+  });
+
+  it('renders value as is if value is empty', () => {
+    render(<Highlight value="" query="test" />);
+    expect(screen.queryByText(/./)).not.toBeInTheDocument();
+    expect(screen.queryByRole('strong')).not.toBeInTheDocument();
+  });
+
+  it('wraps content in span if className is provided', () => {
+    const { container } = render(
+      <Highlight value="Hello World" query="world" className="highlighted" />,
+    );
+    expect(container.querySelector('span.highlighted')).toBeInTheDocument();
+    expect(container.querySelector('strong')).toBeInTheDocument();
+  });
+});

package/src/upload/Upload.spec.tsx

@@ -6,6 +6,14 @@ import { postData } from './utils/postData';
 
 jest.mock('./utils/asyncFileRead');
 jest.mock('./utils/postData');
+jest.mock('commonmark', () => ({
+  Parser: jest.fn().mockImplementation(() => ({
+    parse: jest.fn(() => ({})),
+  })),
+  HtmlRenderer: jest.fn().mockImplementation(() => ({
+    render: jest.fn(() => ''),
+  })),
+}));
 
 const TEST_FILE = new File(['test content'], 'test.png', { type: 'image/png' });
 const INVALID_FILE = new File(['invalid content'], 'invalid.txt', { type: 'text/plain' });
@@ -76,6 +84,11 @@ describe('Upload Component', () => {
         dispatchEvent: jest.fn(),
       })),
     });
+    props.onStart.mockReset();
+    props.onSuccess.mockReset();
+    props.onFailure.mockReset();
+    props.onCancel.mockReset();
+    props.onChange.mockReset();
   });
 
   afterEach(async () => {
@@ -292,4 +305,54 @@ describe('Upload Component', () => {
     const errorIcon = await screen.findByLabelText(/Custom error label/i);
     expect(errorIcon).toBeInTheDocument();
   });
+
+  function runAnimationDelayTest(label: string, delay: number) {
+    test(`should respect a ${label} animationDelay`, async () => {
+      (asyncFileRead as jest.Mock).mockResolvedValue('mockBase64Image');
+      (postData as jest.Mock).mockResolvedValue('mockSuccessResponse');
+
+      const { container, unmount } = render(<Upload {...props} animationDelay={delay} />);
+
+      await act(async () => {
+        const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(TEST_FILE);
+        fireEvent.drop(droppableElement!, { dataTransfer });
+      });
+
+      // Advance half the delay, should still be processing
+      await act(async () => {
+        jest.advanceTimersByTime(delay / 2);
+      });
+      expect(container.querySelector('.droppable-processing')).toBeInTheDocument();
+      expect(container.querySelector('.droppable-complete')).not.toBeInTheDocument();
+
+      // Advance the rest of the delay
+      await act(async () => {
+        jest.advanceTimersByTime(delay / 2 + 10);
+      });
+      expect(container.querySelector('.droppable-complete')).toBeInTheDocument();
+      expect(container.querySelector('.droppable-processing')).not.toBeInTheDocument();
+
+      unmount();
+    });
+  }
+
+  runAnimationDelayTest('short', 50);
+  runAnimationDelayTest('long', 500);
+
+  test('should handle disabled state correctly', async () => {
+    const { container } = render(<Upload {...props} usDisabled />);
+    const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
+
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(TEST_FILE);
+
+    await act(async () => {
+      fireEvent.drop(droppableElement!, { dataTransfer });
+    });
+
+    expect(container.querySelector('.droppable-processing')).not.toBeInTheDocument();
+    expect(props.onStart).not.toHaveBeenCalled();
+  });
 });

package/src/upload/Upload.story.tsx

@@ -38,54 +38,3 @@ export const Basic: Story = {
     onCancel: fn(),
   },
 } satisfies Story;
-
-export const MaxSizes = () => {
-  const bKB = 1024;
-  const bMB = 1024 * bKB;
-
-  const dKB = 1000;
-  const dMB = 1000 * dKB;
-
-  const binarySizes = [
-    10 * bMB,
-    5 * bMB,
-    1 * bMB,
-    500 * bKB,
-    100 * bKB,
-    50 * bKB,
-    10 * bKB,
-    5 * bKB,
-    1 * bKB,
-  ];
-
-  const decimalSizes = [
-    10 * dMB,
-    5 * dMB,
-    1 * dMB,
-    500 * dKB,
-    100 * dKB,
-    50 * dKB,
-    10 * dKB,
-    5 * dKB,
-    1 * dKB,
-  ];
-
-  return (
-    <div style={{ display: 'flex', gap: '1rem' }}>
-      <div style={{ flex: 1 }}>
-        {binarySizes.map((maxSize) => (
-          <Field key={maxSize} label={`Max size: ${maxSize} bytes`}>
-            <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
-          </Field>
-        ))}
-      </div>
-      <div style={{ flex: 1 }}>
-        {decimalSizes.map((maxSize) => (
-          <Field key={maxSize} label={`Max size: ${maxSize} bytes`}>
-            <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
-          </Field>
-        ))}
-      </div>
-    </div>
-  );
-};

package/src/upload/Upload.tests.story.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import Upload from '.';
+import { MAX_SIZE_DEFAULT } from './Upload';
+import { Field } from '../field/Field';
+
+const meta = {
+  component: Upload,
+  title: 'Forms/Upload/Tests',
+  argTypes: {
+    maxSize: {
+      control: {
+        type: 'number',
+        min: 0,
+      },
+    },
+  },
+} satisfies Meta<typeof Upload>;
+
+export default meta;
+
+export const MaxSizes = () => {
+  const bKB = 1024;
+  const bMB = 1024 * bKB;
+
+  const dKB = 1000;
+  const dMB = 1000 * dKB;
+
+  const binarySizes = [
+    10 * bMB,
+    5 * bMB,
+    1 * bMB,
+    500 * bKB,
+    100 * bKB,
+    50 * bKB,
+    10 * bKB,
+    5 * bKB,
+    1 * bKB,
+  ];
+
+  const decimalSizes = [
+    10 * dMB,
+    5 * dMB,
+    1 * dMB,
+    500 * dKB,
+    100 * dKB,
+    50 * dKB,
+    10 * dKB,
+    5 * dKB,
+    1 * dKB,
+  ];
+
+  return (
+    <div style={{ display: 'flex', gap: '1rem' }}>
+      <div style={{ flex: 1 }}>
+        {binarySizes.map((maxSize) => (
+          <Field key={maxSize} label={`Max size: ${maxSize} bytes`}>
+            <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
+          </Field>
+        ))}
+      </div>
+      <div style={{ flex: 1 }}>
+        {decimalSizes.map((maxSize) => (
+          <Field key={maxSize} label={`Max size: ${maxSize} bytes`}>
+            <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
+          </Field>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const AllVariants = () => {
+  return (
+    <div style={{ display: 'flex', gap: '1rem' }}>
+      <div style={{ flex: 1 }}>
+        <Field key="small" label="Small Upload">
+          <Upload usLabel="Pick a file, any file" size="sm" />
+        </Field>
+        <Field key="medium" label="Medium Upload">
+          <Upload usLabel="Pick a file, any file" size="md" />
+        </Field>
+        <Field key="large" label="Large Upload">
+          <Upload usLabel="Pick a file, any file" size="lg" />
+        </Field>
+        <Field key="disabled" label="Disabled Upload">
+          <Upload usLabel="Pick a file, any file" usDisabled />
+        </Field>
+      </div>
+    </div>
+  );
+};

package/src/upload/Upload.tsx

@@ -12,11 +12,6 @@ import { postData, asyncFileRead, isSizeValid, isTypeValid, getFileType } from '
 import { PostDataFetcher, PostDataHTTPOptions, ResponseError } from './utils/postData/postData';
 import { ProcessIndicatorStatus } from '../processIndicator';
 
-/*
- * This delay is required for the isError/isSuccess to be fired after isProcessing so the processIndicator, will be
- * rendered first and then updated with the right status.
- */
-const ANIMATION_FIX = 10;
 export const MAX_SIZE_DEFAULT = 5000000;
 
 export enum UploadStep {
@@ -85,7 +80,7 @@ export class Upload extends Component<UploadProps, UploadState> {
   declare props: UploadProps & Required<Pick<UploadProps, keyof typeof Upload.defaultProps>>;
 
   static defaultProps = {
-    animationDelay: 700,
+    animationDelay: 300,
     maxSize: MAX_SIZE_DEFAULT,
     psButtonDisabled: false,
     size: 'md',
@@ -160,41 +155,6 @@ export class Upload extends Component<UploadProps, UploadState> {
     }
   }
 
-  onAnimationCompleted = async (status: ProcessIndicatorStatus) => {
-    const { response, isProcessing, fileName } = this.state;
-    const { animationDelay } = this.props;
-
-    if (isProcessing && status === 'succeeded') {
-      const { onSuccess } = this.props;
-      this.timeouts = window.setTimeout(() => {
-        this.setState(
-          {
-            isProcessing: false,
-            isComplete: true,
-          },
-          onSuccess
-            ? () => {
-                onSuccess(response as string | Response, fileName);
-              }
-            : undefined,
-        );
-      }, animationDelay);
-    }
-
-    if (isProcessing && status === 'failed') {
-      const { onFailure } = this.props;
-      this.timeouts = window.setTimeout(() => {
-        this.setState(
-          {
-            isProcessing: false,
-            isComplete: true,
-          },
-          onFailure ? () => onFailure(response) : undefined,
-        );
-      }, animationDelay);
-    }
-  };
-
   asyncPost = async (file: File) => {
     const { httpOptions, fetcher } = this.props;
     if (httpOptions == null) {
@@ -209,15 +169,37 @@ export class Upload extends Component<UploadProps, UploadState> {
     return postData(httpOptions, formData, fetcher);
   };
 
-  asyncResponse = (response: unknown, type: 'success' | 'error') => {
-    // Gives time to the animation callback to fire.
+  handleUploadComplete = (type: 'success' | 'error', response: unknown) => {
+    const { animationDelay, onSuccess, onFailure } = this.props;
+    const { fileName } = this.state;
+
+    window.clearTimeout(this.timeouts);
     this.timeouts = window.setTimeout(() => {
-      this.setState({
+      this.setState(
+        {
+          isProcessing: false,
+          isComplete: true,
+        },
+        () => {
+          if (type === 'success') {
+            onSuccess?.(response as string | Response, fileName);
+          } else {
+            onFailure?.(response);
+          }
+        },
+      );
+    }, animationDelay);
+  };
+
+  asyncResponse = (response: unknown, type: 'success' | 'error') => {
+    this.setState(
+      {
         response,
         isError: type === 'error',
         isSuccess: type === 'success',
-      });
-    }, ANIMATION_FIX);
+      },
+      () => this.handleUploadComplete(type, response),
+    );
   };
 
   handleOnClear: React.MouseEventHandler<HTMLButtonElement> = (event) => {
@@ -395,8 +377,6 @@ export class Upload extends Component<UploadProps, UploadState> {
           />
         )}
 
-        {/* Starts render the step when isSuccess is true so markup is there when css transition kicks in
-      css transition to work properly */}
         {(isSuccess || isComplete) && !isError && (
           <CompleteStep
             fileName={fileName}
@@ -443,7 +423,6 @@ export class Upload extends Component<UploadProps, UploadState> {
             psButtonText={psButtonText || intl.formatMessage(messages.psButtonText)}
             psProcessingText={psProcessingText || intl.formatMessage(messages.psProcessingText)}
             psButtonDisabled={psButtonDisabled}
-            onAnimationCompleted={async (status) => this.onAnimationCompleted(status)}
             onClear={(event) => this.handleOnClear(event)}
           />
         )}

package/src/upload/steps/processingStep/processingStep.tsx

@@ -1,13 +1,12 @@
 import Button from '../../../button';
 import { Status, Typography } from '../../../common';
-import ProcessIndicator, { ProcessIndicatorStatus } from '../../../processIndicator';
+import ProcessIndicator from '../../../processIndicator';
 import Title from '../../../title';
 
 export interface ProcessingStepProps {
   isComplete: boolean;
   isError: boolean;
   isSuccess: boolean;
-  onAnimationCompleted: (status: ProcessIndicatorStatus) => void;
   onClear: React.MouseEventHandler<HTMLButtonElement>;
   psButtonText: string;
   psProcessingText: string;
@@ -18,7 +17,6 @@ export default function ProcessingStep({
   isComplete,
   isError,
   isSuccess,
-  onAnimationCompleted,
   onClear,
   psButtonText,
   psProcessingText,
@@ -35,10 +33,7 @@ export default function ProcessingStep({
   return (
     <div className="droppable-processing-card droppable-card" aria-hidden={isComplete}>
       <div className="droppable-card-content">
-        <ProcessIndicator
-          status={processStatus}
-          onAnimationCompleted={(status) => onAnimationCompleted(status)}
-        />
+        <ProcessIndicator status={processStatus} />
         <Title className="m-y-2" type={Typography.TITLE_BODY} aria-live="polite">
           {psProcessingText}
         </Title>

package/src/uploadInput/UploadInput.tsx

@@ -161,6 +161,7 @@ const UploadInput = ({
 }: UploadInputProps) => {
   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 { formatMessage } = useIntl();
   const uploadInputRef = useRef<HTMLInputElement | null>(null);
@@ -321,7 +322,13 @@ const UploadInput = ({
     }
   }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const [nextFocusable, setNextFocusable] = useState<HTMLDivElement | UploadItemRef | null>(
+  type NextFocusable =
+    | HTMLDivElement
+    | UploadItemRef
+    | { ref: HTMLDivElement | UploadItemRef; target: 'button' | 'link' }
+    | null;
+
+  const [nextFocusable, setNextFocusable] = useState<NextFocusable>(
     uploadInputRef.current,
   );
 
@@ -331,7 +338,15 @@ const UploadInput = ({
     });
 
     const filesCount = fileRefs.length;
-    let next: HTMLDivElement | UploadItemRef | null = uploadInputRef.current;
+    let next: UploadItemRef | HTMLDivElement | null = uploadInputRef.current;
+    let focusTarget: 'button' | 'link' = 'button';
+
+    // If there will be no files left after deletion, focus the upload button
+    if (filesCount === 1) {
+      next = uploadInputRef.current;
+      setNextFocusable(next);
+      return;
+    }
 
     if (filesCount > 1) {
       const currentFileIndex = fileRefs.findIndex((file) => file?.id === fileId);
@@ -344,15 +359,68 @@ const UploadInput = ({
       } else {
         next = fileRefs[currentFileIndex + 1];
       }
+
+      // If next is an UploadItemRef, check if it has a URL (succeeded)
+      if (next && 'status' in next) {
+        // Find the file object for this ref
+        const fileObj = uploadedFiles.find(f => f.id === next?.id);
+        if (
+          fileObj &&
+          (fileObj.status === Status.SUCCEEDED || fileObj.status === Status.DONE) &&
+          fileObj.url
+        ) {
+          focusTarget = 'link';
+        }
+      }
+      setNextFocusable(() => {
+        if (next && typeof (next as UploadItemRef).focus === 'function') {
+          return { ref: next, target: focusTarget };
+        }
+        return next;
+      });
     }
-    setNextFocusable(next);
   };
 
   const handleRefocus = () => {
-    if (nextFocusable && 'focus' in nextFocusable && typeof nextFocusable.focus === 'function') {
-      setTimeout(() => {
-        nextFocusable.focus();
-      }, 0);
+    const focusTarget = nextFocusable;
+    if (lastAttemptedDeleteId) {
+      setLastAttemptedDeleteId(null);
+      return;
+    }
+    if (focusTarget) {
+      // If there are no files left, focus the upload button
+      if (
+        uploadedFiles.length === 0 &&
+        uploadInputRef.current &&
+        typeof uploadInputRef.current.focus === 'function'
+      ) {
+        setTimeout(() => {
+          uploadInputRef.current!.focus();
+        }, 0);
+      } else if (
+        typeof focusTarget === 'object' &&
+        'ref' in focusTarget &&
+        focusTarget.ref &&
+        typeof focusTarget.ref.focus === 'function'
+      ) {
+        setTimeout(() => {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+          if (
+            focusTarget.ref &&
+            typeof (focusTarget.ref as UploadItemRef).focus === 'function'
+          ) {
+            // @ts-expect-error: focus may not exist on all possible ref types, but is safe here
+            (focusTarget.ref as UploadItemRef).focus(focusTarget.target);
+          }
+        }, 0);
+      } else if (
+        focusTarget &&
+        typeof (focusTarget as UploadItemRef).focus === 'function'
+      ) {
+        setTimeout(() => {
+          (focusTarget as UploadItemRef).focus();
+        }, 0);
+      }
     }
   };
 
@@ -391,10 +459,14 @@ const UploadInput = ({
               onDelete={
                 file.status === Status.FAILED
                   ? async () => {
+                      setLastAttemptedDeleteId(file.id);
                       await removeFile(file);
                       handleRefocus();
                     }
-                  : () => setMarkedFileForDelete(file)
+                  : () => {
+                      setLastAttemptedDeleteId(file.id);
+                      setMarkedFileForDelete(file);
+                    }
               }
               onDownload={onDownload}
               onFocus={() => handleFocus(file.id)}
@@ -451,6 +523,7 @@ const UploadInput = ({
                   void removeFile(markedFileForDelete);
                 }
                 setMarkedFileForDelete(null);
+                setLastAttemptedDeleteId(null);
               }}
             >
               {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}

package/src/uploadInput/uploadItem/UploadItem.css

@@ -152,7 +152,8 @@
   padding-left: var(--size-16);
 }
 .np-upload-input__item .np-upload-input-errors > li::before {
-  content: '•';
+  content: '•' ;
+  content: '•' / '';
   position: absolute;
   display: block;
   left: 0;

package/src/uploadInput/uploadItem/UploadItem.less

@@ -158,7 +158,7 @@
       padding-left: var(--size-16);
 
       &::before {
-        content: '•';
+        content: '•' / '';
         position: absolute;
         display: block;
         left: 0;