@transferwise/components 46.97.5 → 46.98.1

package/src/selectOption/SelectOption.tsx

@@ -1,151 +0,0 @@
-import { useRef, useState } from 'react';
-import { ActionButtonProps } from '../actionButton';
-import { clsx } from 'clsx';
-import Option from '../common/Option';
-import type { OptionProps } from '../common/Option/Option';
-import { Breakpoint, Position } from '../common';
-import Section from '../section';
-import Header from '../header';
-import { HeaderProps } from '../header/Header';
-import NavigationOption from '../navigationOption';
-import NavigationOptionsList from '../navigationOptionsList';
-import { useInputAttributes } from '../inputs/contexts';
-import messages from './SelectOption.messages';
-import { useIntl } from 'react-intl';
-import ResponsivePanel from '../common/responsivePanel';
-import { useScreenSize } from '../common/hooks/useScreenSize';
-import { ChevronDown, Plus } from '@transferwise/icons';
-
-export type SelectOptiopsSection<T = unknown> = {
-  title?: HeaderProps['title'];
-  options: SelectOptionValue<T>[];
-};
-
-export type SelectOptionValue<T = unknown> = Pick<
-  OptionProps,
-  'media' | 'title' | 'content' | 'disabled'
-> & {
-  value?: T;
-};
-
-export type SelectOptionPlaceholder = Pick<OptionProps, 'media' | 'title' | 'content'> & {
-  actionLabel?: ActionButtonProps['children'];
-};
-
-export type SelectOptionProps<T = unknown> = {
-  onChange: (selected: SelectOptionValue<T>) => void;
-  selected?: SelectOptionValue<T>;
-  options: SelectOptiopsSection<T>[];
-  placeholder: SelectOptionPlaceholder;
-} & Omit<
-  OptionProps,
-  'as' | 'title' | 'media' | 'content' | 'onClick' | 'onChange' | 'showMediaAtAllSizes' | 'decision'
->;
-
-export default function SelectOption<T>({
-  selected = undefined,
-  options,
-  onChange,
-  placeholder,
-  disabled,
-  ...props
-}: SelectOptionProps<T>) {
-  const intl = useIntl();
-  const rootRef = useRef(null);
-  const [showOptions, setShowOptions] = useState(false);
-
-  const hasSelected = selected !== undefined;
-  const isLargeScreen = useScreenSize(Breakpoint.SMALL);
-
-  const inputAttributes = useInputAttributes();
-  const ariaLabelledBy = props['aria-labelledby'] ?? inputAttributes?.['aria-labelledby'];
-
-  function handleOnClick(showOptionsStatus: boolean) {
-    return () => {
-      setShowOptions(showOptionsStatus);
-    };
-  }
-
-  function handleOnChange(data: SelectOptionValue<T>) {
-    return () => {
-      setShowOptions(false);
-      onChange(data);
-    };
-  }
-
-  function getOptions(isLargeScreen = false) {
-    return (
-      <div className={clsx({ 'np-select-option-list': isLargeScreen })}>
-        {options.map((optionsSection, index) => (
-          <Section key={index} className={clsx({ 'p-x-2 p-y-1': isLargeScreen })}>
-            {optionsSection.title && <Header title={optionsSection.title} />}
-            <NavigationOptionsList>
-              {optionsSection.options.map((option, index) => {
-                return (
-                  <NavigationOption
-                    key={index}
-                    isContainerAligned={!isLargeScreen}
-                    showMediaCircle
-                    showMediaAtAllSizes
-                    onClick={handleOnChange(option)}
-                    {...option}
-                  />
-                );
-              })}
-            </NavigationOptionsList>
-          </Section>
-        ))}
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <Option
-        ref={rootRef}
-        as="div"
-        showMediaAtAllSizes
-        disabled={disabled}
-        decision={false}
-        media={hasSelected ? selected.media : (placeholder.media ?? <Plus size={24} />)}
-        title={(hasSelected ? selected : placeholder).title}
-        content={(hasSelected ? selected : placeholder).content}
-        className={clsx(
-          'np-select-option',
-          'clickable',
-          hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder',
-          props.className,
-        )}
-        button={
-          <button
-            {...inputAttributes}
-            type="button"
-            disabled={disabled}
-            aria-labelledby={ariaLabelledBy}
-            aria-haspopup="dialog"
-            aria-expanded={showOptions}
-            className={hasSelected ? 'btn-unstyled' : 'np-action-btn'}
-            aria-label={hasSelected ? undefined : props['aria-label']}
-            onClick={handleOnClick(true)}
-          >
-            {hasSelected ? (
-              <ChevronDown title={intl.formatMessage(messages.selectedActionLabel)} />
-            ) : (
-              placeholder.actionLabel || intl.formatMessage(messages.actionLabel)
-            )}
-          </button>
-        }
-      />
-      <ResponsivePanel
-        anchorWidth
-        altAxis
-        anchorRef={rootRef}
-        open={showOptions}
-        position={Position.BOTTOM}
-        onClose={handleOnClick(false)}
-      >
-        {getOptions(isLargeScreen)}
-      </ResponsivePanel>
-    </>
-  );
-}

package/src/selectOption/index.ts

@@ -1,2 +0,0 @@
-export { default } from './SelectOption';
-export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './SelectOption';

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();
-    });
-  });
-});

package/src/typeahead/Typeahead.spec.js

@@ -1,404 +0,0 @@
-import { mount } from 'enzyme';
-import doTimes from 'lodash.times';
-import { mockMatchMedia } from '../test-utils';
-
-import { InlineAlert } from '..';
-import { Sentiment } from '../common';
-import { fakeEvent, fakeKeyDownEventForKey } from '../common/fakeEvents';
-
-import Typeahead from './Typeahead';
-
-mockMatchMedia();
-
-const defaultLocale = 'en-GB';
-jest.mock('react-intl', () => {
-  const mockedIntl = {
-    locale: defaultLocale,
-    formatMessage: (id) => String(id),
-  };
-  return {
-    injectIntl: (Component) => (props) => <Component {...props} intl={mockedIntl} />,
-    defineMessages: (translations) => translations,
-    useIntl: () => mockedIntl,
-  };
-});
-
-describe('Typeahead', () => {
-  let component;
-  let props;
-  const closeButton = () => component.find('.input-group-addon button');
-  const formGroup = () => component.find('.form-group');
-  const input = () => component.find('input');
-  const chip = () => component.find('.np-chip');
-  const option = () => component.find('.dropdown-item');
-  const menu = () => component.find('.dropdown');
-
-  beforeEach(() => {
-    props = {
-      id: 'test',
-      onChange: () => {},
-      name: 'test',
-      options: [
-        {
-          label: 'Test',
-        },
-        {
-          label: 'Test1',
-        },
-        {
-          label: 'Test2',
-        },
-        {
-          label: 'Test3',
-        },
-      ],
-    };
-
-    component = mount(<Typeahead {...props} />);
-  });
-
-  it('renders addon', () => {
-    expect(component.find('#test-addon')).toHaveLength(0);
-    component.setProps({ addon: <div id="test-addon" /> });
-    expect(component.find('#test-addon')).toHaveLength(1);
-  });
-
-  it('renders clear button', () => {
-    component.setProps({
-      clearable: true,
-    });
-    input().simulate('change', { target: { value: 'test' } });
-
-    expect(closeButton()).toHaveLength(1);
-  });
-
-  it('splits pasted value correctly', () => {
-    const chips = ['test', 'test2', 'test3'];
-    const event = {
-      preventDefault: jest.fn(),
-      clipboardData: {
-        getData: () => chips.join(', '),
-      },
-    };
-
-    component.setProps({
-      allowNew: true,
-      multiple: true,
-      chipSeparators: [',', ' '],
-    });
-
-    input().simulate('paste', event);
-    const renderedChips = chip().map((chipNode) => chipNode.text());
-
-    expect(renderedChips.every((label, idx) => chips[idx] === label)).toBe(true);
-    expect(renderedChips).toHaveLength(chips.length);
-    expect(event.preventDefault).toHaveBeenCalledTimes(1);
-  });
-
-  it('removes last selected value when backspace clicked on empty input', () => {
-    const event = {
-      key: 'Backspace',
-    };
-
-    component.setProps({
-      multiple: true,
-    });
-
-    expect(chip()).toHaveLength(0);
-
-    input().simulate('change', { target: { value: 'test' } });
-    option().at(0).simulate('click', fakeEvent());
-
-    expect(chip()).toHaveLength(1);
-
-    input().simulate('keyDown', event);
-
-    expect(chip()).toHaveLength(0);
-  });
-
-  it('does not remove last selected value when backspace clicked on non-empty input', () => {
-    const event = {
-      key: 'Backspace',
-    };
-
-    component.setProps({
-      multiple: true,
-    });
-
-    expect(chip()).toHaveLength(0);
-
-    input().simulate('change', { target: { value: 'test' } });
-    option().at(0).simulate('click', fakeEvent());
-
-    expect(chip()).toHaveLength(1);
-
-    input().simulate('change', { target: { value: 'test' } });
-    input().simulate('keyDown', event);
-
-    expect(chip()).toHaveLength(1);
-  });
-
-  it('adds new value as selected and clears the input when separator is entered', () => {
-    const event = {
-      key: ',',
-      preventDefault: jest.fn(),
-    };
-    const text = 'test';
-
-    component.setProps({
-      multiple: true,
-      allowNew: true,
-      showSuggestions: false,
-      chipSeparators: [','],
-    });
-
-    input().simulate('change', { target: { value: text } });
-    input().simulate('keyDown', event);
-
-    expect(chip().text()).toStrictEqual(text);
-    expect(event.preventDefault).toHaveBeenCalledTimes(1);
-  });
-
-  it('adds new value as selected and clears the input when Enter is pressed', () => {
-    const event = {
-      key: 'Enter',
-      preventDefault: jest.fn(),
-    };
-    const text = 'test';
-
-    component.setProps({
-      multiple: true,
-      allowNew: true,
-      showSuggestions: false,
-      chipSeparators: [','],
-    });
-
-    input().simulate('change', { target: { value: text } });
-    input().simulate('keyDown', event);
-
-    expect(chip().text()).toStrictEqual(text);
-    expect(event.preventDefault).toHaveBeenCalledTimes(1);
-  });
-
-  it('adds new value as selected and clears the input when Tab is pressed', () => {
-    const event = {
-      key: 'Tab',
-      preventDefault: jest.fn(),
-    };
-    const text = 'test';
-
-    component.setProps({
-      multiple: true,
-      allowNew: true,
-      showSuggestions: false,
-      chipSeparators: [','],
-    });
-
-    input().simulate('change', { target: { value: text } });
-    input().simulate('keyDown', event);
-
-    expect(chip().text()).toStrictEqual(text);
-    expect(event.preventDefault).toHaveBeenCalledTimes(1);
-  });
-
-  it('clears typeahead when clear button is clicked', () => {
-    const event = {
-      key: ',',
-      preventDefault: jest.fn(),
-    };
-
-    const query = 'test';
-
-    component.setProps({
-      multiple: true,
-      allowNew: true,
-      showSuggestions: false,
-      chipSeparators: [','],
-      clearable: true,
-    });
-
-    input().simulate('change', { target: { value: query } });
-    input().simulate('keyDown', event);
-    input().simulate('change', { target: { value: query } });
-
-    expect(chip()).toHaveLength(1);
-    expect(input().getDOMNode().value).toBe(query);
-
-    closeButton().simulate('click', fakeEvent());
-    expect(chip()).toHaveLength(0);
-    expect(input().getDOMNode().value).toBe('');
-  });
-
-  it('moves selected items when down and up keys pressed', () => {
-    doTimes(3, () => input().simulate('keyDown', fakeKeyDownEventForKey('ArrowDown')));
-
-    expect(option().at(2).parent().is('.tw-dropdown-item--focused')).toBe(true);
-
-    input().simulate('keyDown', fakeKeyDownEventForKey('ArrowUp'));
-    expect(option().at(1).parent().is('.tw-dropdown-item--focused')).toBe(true);
-
-    doTimes(5, () => input().simulate('keyDown', fakeKeyDownEventForKey('ArrowDown')));
-    expect(option().last().parent().is('.tw-dropdown-item--focused')).toBe(true);
-  });
-
-  it('adds new value as selected and clears the input when no option is highlighted and enter is pressed', () => {
-    const event = {
-      key: 'Enter',
-      preventDefault: jest.fn(),
-    };
-    const text = 'test';
-
-    component.setProps({
-      multiple: true,
-      allowNew: true,
-      chipSeparators: [','],
-    });
-
-    input().simulate('change', { target: { value: text } });
-    input().simulate('keyDown', event);
-
-    expect(chip().text()).toStrictEqual(text);
-    expect(event.preventDefault).toHaveBeenCalledTimes(1);
-  });
-
-  it('sets aria-activedescendant correctly based on focus', () => {
-    const inputElement = input().getDOMNode();
-
-    doTimes(3, () => input().simulate('keyDown', fakeKeyDownEventForKey('ArrowDown')));
-
-    expect(inputElement).toHaveAttribute('aria-activedescendant', 'menu-test option-Test2');
-  });
-
-  it('displays alert when alert is provided and chips are valid or alert type is error', () => {
-    const event = {
-      key: 'Enter',
-      preventDefault: jest.fn(),
-    };
-    const text = 'test';
-
-    expect(component.find(InlineAlert)).toHaveLength(0);
-    expect(formGroup().hasClass('has-error')).toBe(false);
-    component.setProps({
-      validateChip: () => {
-        return false;
-      },
-      allowNew: true,
-      alert: {
-        message: 'test',
-        type: Sentiment.ERROR,
-      },
-    });
-
-    expect(formGroup().hasClass('has-error')).toBe(true);
-    expect(component.find(InlineAlert)).toHaveLength(1);
-
-    input().simulate('change', { target: { value: text } });
-    input().simulate('keyDown', event);
-
-    expect(formGroup().hasClass('has-error')).toBe(true);
-    expect(component.find(InlineAlert)).toHaveLength(1);
-    component.setProps({
-      alert: {
-        message: 'test',
-        type: Sentiment.WARNING,
-      },
-    });
-
-    expect(formGroup().hasClass('has-error')).toBe(true);
-    expect(component.find(InlineAlert)).toHaveLength(0);
-
-    closeButton().simulate('click', fakeEvent());
-
-    expect(formGroup().hasClass('has-error')).toBe(false);
-    expect(formGroup().hasClass('has-warning')).toBe(true);
-    expect(component.find(InlineAlert)).toHaveLength(1);
-  });
-
-  it('allows supplying options with arbitrary data that will be included with the onChange callback', () => {
-    const text = 'test';
-    const options = [
-      {
-        label: 'label 1',
-        note: 'note-1',
-        secondary: 'secondary-1',
-        value: { id: 123, name: 'Neptune' },
-      },
-    ];
-    let selectedOption;
-
-    component.setProps({
-      onChange: (selections) => {
-        selectedOption = selections[0];
-      },
-      options,
-    });
-
-    input().simulate('change', { target: { value: text } });
-    option().at(0).simulate('click', fakeEvent());
-    expect(selectedOption).toStrictEqual({
-      label: 'label 1',
-      note: 'note-1',
-      secondary: 'secondary-1',
-      value: { id: 123, name: 'Neptune' },
-    });
-  });
-
-  describe('menu', () => {
-    it('should render footer', () => {
-      component.setProps({
-        footer: <div id="footer">footer</div>,
-      });
-
-      expect(component.find('#footer')).toHaveLength(1);
-    });
-
-    it('renders all options', () => {
-      const options = option().map((optNode) => optNode.text());
-      expect(options).toHaveLength(props.options.length);
-      expect(options.every((label, i) => label === props.options[i].label)).toBe(true);
-    });
-
-    it('renders dropdown-menu if has options', () => {
-      expect(component.find('.dropdown-menu')).toHaveLength(1);
-      component.setProps({ options: [] });
-      expect(component.find('.dropdown-menu')).toHaveLength(0);
-    });
-
-    it('does not render new option if showNewEntry is false', () => {
-      component.setProps({
-        allowNew: true,
-        showNewEntry: false,
-      });
-      input().simulate('change', { target: { value: 'check' } });
-
-      const options = option().map((optNode) => optNode.text());
-      expect(options).toHaveLength(props.options.length);
-    });
-
-    it('renders new option if showNewEntry is true', () => {
-      component.setProps({
-        allowNew: true,
-        showNewEntry: true,
-      });
-      input().simulate('change', { target: { value: 'check' } });
-
-      const options = option().map((optNode) => optNode.text());
-      expect(options).toHaveLength(props.options.length + 1);
-    });
-
-    it('does not show options if query is too short', () => {
-      expect(menu().is('.open')).toBe(false);
-      input().simulate('change', { target: { value: 'test' } });
-      expect(menu().is('.open')).toBe(true);
-    });
-
-    it('sets aria-expanded to true when options are shown', () => {
-      expect(input().prop('aria-expanded')).toBe(false);
-      // we don't want aria-expanded to be true on focus or before 3 characters are entered (that's when the menu is shown)
-      input().simulate('change', { target: { value: 'aa' } });
-      expect(input().prop('aria-expanded')).toBe(false);
-      input().simulate('change', { target: { value: 'aaa' } });
-      expect(input().prop('aria-expanded')).toBe(true);
-    });
-  });
-});

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

@@ -1,74 +0,0 @@
-import { shallow } from 'enzyme';
-
-import { Input } from '../../inputs/Input';
-
-import TypeaheadInput from './TypeaheadInput';
-
-describe('Typeahead input', () => {
-  let component;
-  let props;
-
-  const inputWrapper = () => component.find('.typeahead__input-wrapper');
-  const input = () => component.find(Input);
-
-  beforeEach(() => {
-    props = {
-      name: 'test',
-      typeaheadId: 'test',
-      multiple: false,
-      value: '',
-      renderChip: jest.fn(),
-      onKeyDown: jest.fn(),
-      onFocus: jest.fn(),
-      onPaste: jest.fn(),
-      onChange: jest.fn(),
-      autoComplete: 'off',
-      selected: [],
-    };
-
-    component = shallow(<TypeaheadInput {...props} />);
-  });
-
-  it('renders single input when multiple is false', () => {
-    expect(component.children()).toHaveLength(0);
-    expect(component.is(Input)).toBe(true);
-  });
-
-  it('renders chips when provided', () => {
-    const selected = [{ label: 'test1' }, { label: 'test2' }];
-    component.setProps({
-      multiple: true,
-      selected,
-      renderChip: jest.fn(({ label }, idx) => <span key={idx}>{label}</span>),
-    });
-
-    expect(inputWrapper().find('span')).toHaveLength(selected.length);
-  });
-
-  it('adds aria-controls prop if dropdown is open', () => {
-    expect(component.prop('aria-controls')).toBeUndefined();
-    component.setProps({ dropdownOpen: true });
-    expect(component.prop('aria-controls')).toBe('menu-test');
-  });
-
-  it('passes all callbacks to input', () => {
-    const event = {};
-    const extraProps = {
-      multiple: true,
-      value: '',
-      onKeyDown: jest.fn(),
-      onBlur: jest.fn(),
-      onFocus: jest.fn(),
-      onPaste: jest.fn(),
-    };
-    component.setProps(extraProps);
-
-    input().simulate('focus', event);
-    input().simulate('paste', event);
-    input().simulate('keyDown', event);
-    const inputProps = input().props();
-    expect(inputProps.onKeyDown).toHaveBeenCalledWith(event);
-    expect(inputProps.onFocus).toHaveBeenCalledWith(event);
-    expect(inputProps.onPaste).toHaveBeenCalledWith(event);
-  });
-});