@transferwise/components 0.0.0-experimental-2aa3886 → 0.0.0-experimental-e783ca8

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/uploadInput/UploadInput.tsx

@@ -161,7 +161,6 @@ 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);
@@ -322,13 +321,7 @@ const UploadInput = ({
     }
   }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  type NextFocusable =
-    | HTMLDivElement
-    | UploadItemRef
-    | { ref: HTMLDivElement | UploadItemRef; target: 'button' | 'link' }
-    | null;
-
-  const [nextFocusable, setNextFocusable] = useState<NextFocusable>(
+  const [nextFocusable, setNextFocusable] = useState<HTMLDivElement | UploadItemRef | null>(
     uploadInputRef.current,
   );
 
@@ -338,15 +331,7 @@ const UploadInput = ({
     });
 
     const filesCount = fileRefs.length;
-    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;
-    }
+    let next: HTMLDivElement | UploadItemRef | null = uploadInputRef.current;
 
     if (filesCount > 1) {
       const currentFileIndex = fileRefs.findIndex((file) => file?.id === fileId);
@@ -359,68 +344,15 @@ 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 = () => {
-    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);
-      }
+    if (nextFocusable && 'focus' in nextFocusable && typeof nextFocusable.focus === 'function') {
+      setTimeout(() => {
+        nextFocusable.focus();
+      }, 0);
     }
   };
 
@@ -459,14 +391,10 @@ const UploadInput = ({
               onDelete={
                 file.status === Status.FAILED
                   ? async () => {
-                      setLastAttemptedDeleteId(file.id);
                       await removeFile(file);
                       handleRefocus();
                     }
-                  : () => {
-                      setLastAttemptedDeleteId(file.id);
-                      setMarkedFileForDelete(file);
-                    }
+                  : () => setMarkedFileForDelete(file)
               }
               onDownload={onDownload}
               onFocus={() => handleFocus(file.id)}
@@ -523,7 +451,6 @@ const UploadInput = ({
                   void removeFile(markedFileForDelete);
                 }
                 setMarkedFileForDelete(null);
-                setLastAttemptedDeleteId(null);
               }}
             >
               {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -19,7 +19,7 @@ export type UploadItemProps = React.JSX.IntrinsicAttributes & {
   singleFileUpload: boolean;
   canDelete: boolean;
   onDelete: () => void;
-  onFocus: (target?: 'button' | 'link') => void;
+  onFocus: () => void;
 
   /**
    * Callback to be called when the file link is clicked.
@@ -63,15 +63,11 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
     const buttonRef = useRef<HTMLButtonElement>(null);
 
     useImperativeHandle<UploadItemRef, UploadItemRef>(ref, () => ({
-      focus: (target?: 'button' | 'link'): void => {
-        if (target === 'button' && buttonRef.current) {
-          buttonRef.current.focus();
-        } else if (target === 'link' && linkRef.current) {
-          linkRef.current.focus();
-        } else if (buttonRef.current) {
-          buttonRef.current.focus();
-        } else if (linkRef.current) {
-          linkRef.current.focus();
+      focus: (): void => {
+        if (url) {
+          linkRef.current?.focus();
+        } else {
+          buttonRef.current?.focus();
         }
       },
       id: file.id,
@@ -203,7 +199,6 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
               tabIndex={0}
               data-testid={`${file.id}-${TEST_IDS.action}`}
               onClick={() => onDelete()}
-              // @ts-expect-error: handleFocus is not a standard FocusEventHandler, but required for parent logic
               onFocus={handleFocus}
             >
               <Bin size={16} />

package/src/typeahead/Typeahead.rtl.spec.tsx

@@ -1,54 +0,0 @@
-import { Field } from '../field/Field';
-import { mockMatchMedia, render, screen } from '../test-utils';
-import Typeahead from './Typeahead';
-import { createIntl, createIntlCache } from 'react-intl';
-import messages from '../i18n';
-import { DEFAULT_LANG, DEFAULT_LOCALE } from '../common';
-
-mockMatchMedia();
-
-const cache = createIntlCache();
-const intl = createIntl({ locale: DEFAULT_LOCALE, messages: messages[DEFAULT_LANG] }, cache);
-
-describe('Typeahead', () => {
-  it('supports `Field` for labeling', () => {
-    render(
-      <Field id="test" label="Tags">
-        <Typeahead
-          id="test"
-          name="test"
-          options={[{ label: 'Test' }]}
-          intl={intl}
-          onChange={() => {}}
-        />
-      </Field>,
-    );
-    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Tags/);
-  });
-
-  describe('when no options are provided', () => {
-    it('does not render a dropdown when no options and no footer are provided', () => {
-      render(
-        <Field id="test" label="Tags">
-          <Typeahead id="test" name="test" options={[]} intl={intl} onChange={() => {}} />
-        </Field>,
-      );
-      expect(screen.queryByRole('menu')).not.toBeInTheDocument();
-    });
-    it('does render a dropdown when only a footer is provided', () => {
-      render(
-        <Field id="test" label="Tags">
-          <Typeahead
-            id="test"
-            name="test"
-            options={[]}
-            intl={intl}
-            footer={<p>hello</p>}
-            onChange={() => {}}
-          />
-        </Field>,
-      );
-      expect(screen.getByRole('menu')).toBeInTheDocument();
-    });
-  });
-});