@transferwise/components 0.0.0-experimental-c654bc3 → 0.0.0-experimental-a7e0e6f

package/src/typeahead/{Typeahead.story.js → Typeahead.story.tsx}

@@ -1,18 +1,19 @@
 import { select, boolean } from '@storybook/addon-knobs';
+import { StoryContext } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
 import { Search as SearchIcon } from '@transferwise/icons';
 import { useState } from 'react';
 
 import { Sentiment } from '../common';
 
-import Typeahead from './Typeahead';
+import { Typeahead, TypeaheadOption } from './Typeahead';
 
 export default {
   component: Typeahead,
   title: 'Forms/Typeahead',
 };
 
-const validateChip = (option) => {
+const validateChip = (option: TypeaheadOption) => {
   // eslint-disable-next-line unicorn/no-unsafe-regex
   return /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
     option.label,
@@ -43,7 +44,7 @@ export const createable = () => {
   );
 };
 
-createable.play = async ({ canvasElement }) => {
+createable.play = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
   await userEvent.type(canvas.getByRole('combobox'), 'chip{Enter}chip2{Enter}');
 };
@@ -76,7 +77,7 @@ export const Basic = () => {
   ]);
 
   const validateChipWhenMultiple = () => {
-    return multiple && allowNew ? (option) => validateChip(option) : undefined;
+    return multiple && allowNew ? (option: TypeaheadOption) => validateChip(option) : undefined;
   };
 
   const multiple = boolean('multiple', false);
@@ -101,8 +102,8 @@ export const Basic = () => {
       showNewEntry={showNewEntry}
       placeholder="placeholder"
       chipSeparators={[',', ' ']}
-      validateChip={validateChipWhenMultiple}
-      alert={showAlert && { message: `Couldn't add item`, type: alertType }}
+      validateChip={validateChipWhenMultiple()}
+      alert={showAlert ? { message: `Couldn't add item`, type: alertType } : undefined}
       addon={<SearchIcon size={24} />}
       options={options}
       inputAutoComplete="off"
@@ -115,7 +116,7 @@ export const Basic = () => {
   );
 };
 
-Basic.play = async ({ canvasElement }) => {
+Basic.play = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
   await userEvent.type(canvas.getByRole('combobox'), 'abc{ArrowDown}');
 };

package/src/typeahead/{Typeahead.js → Typeahead.tsx}

@@ -4,18 +4,20 @@
 
 import { Cross as CrossIcon } from '@transferwise/icons';
 import classNames from 'classnames';
+import { DebouncedFunc } from 'lodash';
 import clamp from 'lodash.clamp';
 import debounce from 'lodash.debounce';
-import PropTypes from 'prop-types';
-import { Component } from 'react';
+import { Component, ReactNode } from 'react';
 
 import Chip from '../chips/Chip';
-import { Size, Sentiment } from '../common';
+import { Size, Sentiment, SizeMedium, SizeLarge } from '../common';
 import {
   addClickClassToDocumentOnIos,
   removeClickClassFromDocumentOnIos,
+  stopPropagation,
 } from '../common/domHelpers';
 import InlineAlert from '../inlineAlert';
+import { InlineAlertProps } from '../inlineAlert/InlineAlert';
 
 import TypeaheadInput from './typeaheadInput/TypeaheadInput';
 import TypeaheadOption from './typeaheadOption/TypeaheadOption';
@@ -23,8 +25,81 @@ import TypeaheadOption from './typeaheadOption/TypeaheadOption';
 const DEFAULT_MIN_QUERY_LENGTH = 3;
 const SEARCH_DELAY = 200;
 
-export default class Typeahead extends Component {
-  constructor(props) {
+export type TypeaheadOption<T = string> = {
+  label: string;
+  note?: string;
+  secondary?: string;
+  value?: T;
+};
+
+export interface TypeaheadProps<T> {
+  id: string;
+  name: string;
+  addon: ReactNode;
+  alert?: {
+    message: InlineAlertProps['children'];
+    type: InlineAlertProps['type'];
+  };
+  allowNew: boolean;
+  autoFillOnBlur?: boolean;
+  autoFocus: boolean;
+  chipSeparators?: string[];
+  clearable: boolean;
+  footer: ReactNode;
+  initialValue: TypeaheadOption<T>[];
+  inputAutoComplete?: string;
+  maxHeight: number;
+  minQueryLength: number;
+  placeholder?: string;
+  multiple: boolean;
+  options: TypeaheadOption<T>[];
+  searchDelay: number;
+  showSuggestions: boolean;
+  showNewEntry: boolean;
+  size?: SizeMedium | SizeLarge;
+
+  onBlur?: () => void;
+  onChange: (options: TypeaheadOption<T>[]) => void;
+  onFocus?: () => void;
+  onInputChange?: (query: string) => void;
+  onSearch?: (query: string) => void;
+  validateChip?: (chip: TypeaheadOption<T>) => boolean;
+}
+
+type TypeaheadState<T> = {
+  selected: TypeaheadOption<T>[];
+  keyboardFocusedOptionIndex: number | null;
+  errorState: boolean;
+  query: string;
+  optionsShown?: boolean;
+  isFocused?: boolean;
+};
+
+export class Typeahead<T> extends Component<TypeaheadProps<T>, TypeaheadState<T>> {
+  declare props: TypeaheadProps<T> &
+    Required<Pick<TypeaheadProps<T>, keyof typeof Typeahead.defaultProps>>;
+
+  static defaultProps = {
+    addon: null,
+    allowNew: false,
+    autoFillOnBlur: true,
+    autoFocus: false,
+    chipSeparators: [],
+    clearable: true,
+    footer: null,
+    initialValue: [],
+    inputAutoComplete: 'new-password',
+    maxHeight: null,
+    minQueryLength: DEFAULT_MIN_QUERY_LENGTH,
+    multiple: false,
+    searchDelay: SEARCH_DELAY,
+    showSuggestions: true,
+    showNewEntry: true,
+    size: Size.MEDIUM,
+    validateChip: () => true,
+  };
+
+  constructor(props: TypeaheadProps<T>) {
     super(props);
     const { searchDelay, initialValue, multiple } = props;
     this.handleSearchDebounced = debounce(this.handleSearch, searchDelay);
@@ -37,7 +112,9 @@ export default class Typeahead extends Component {
     };
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  handleSearchDebounced: DebouncedFunc<(query: string) => void>;
+
+  UNSAFE_componentWillReceiveProps(nextProps: TypeaheadProps<T>) {
     if (nextProps.multiple !== this.props.multiple) {
       this.setState((previousState) => {
         const { selected } = previousState;
@@ -49,6 +126,7 @@ export default class Typeahead extends Component {
         }
         return {
           query: '',
+          selected: previousState.selected,
         };
       });
     }
@@ -59,20 +137,16 @@ export default class Typeahead extends Component {
   }
 
   handleOnFocus = () => {
-    const { onFocus } = this.props;
     this.showMenu();
-
-    if (onFocus) {
-      this.props.onFocus();
-    }
+    this.props.onFocus?.();
   };
 
-  onOptionSelected = (event, item) => {
+  onOptionSelected = (event: React.MouseEvent, item: TypeaheadOption<T>) => {
     event.preventDefault();
     this.selectItem(item);
   };
 
-  handleOnChange = (event) => {
+  handleOnChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     const { optionsShown, selected } = this.state;
     const { multiple, onInputChange } = this.props;
 
@@ -94,7 +168,7 @@ export default class Typeahead extends Component {
     });
   };
 
-  handleOnPaste = (event) => {
+  handleOnPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {
     const { allowNew, multiple, chipSeparators } = this.props;
     const { selected } = this.state;
 
@@ -113,7 +187,7 @@ export default class Typeahead extends Component {
     }
   };
 
-  handleOnKeyDown = (event) => {
+  handleOnKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
     const { showSuggestions, allowNew, multiple, chipSeparators, options } = this.props;
     const { keyboardFocusedOptionIndex, query, selected } = this.state;
     const chipsMode = !showSuggestions && allowNew && multiple;
@@ -133,7 +207,7 @@ export default class Typeahead extends Component {
           break;
         case 'Enter':
           event.preventDefault();
-          if (options[keyboardFocusedOptionIndex]) {
+          if (keyboardFocusedOptionIndex && options[keyboardFocusedOptionIndex]) {
             this.selectItem(options[keyboardFocusedOptionIndex]);
           } else if (allowNew && query.trim()) {
             this.selectItem({ label: query });
@@ -150,7 +224,7 @@ export default class Typeahead extends Component {
     }
   };
 
-  moveFocusedOption(offset) {
+  moveFocusedOption(offset: number) {
     this.setState((previousState) => {
       const { keyboardFocusedOptionIndex } = previousState;
       const { options } = this.props;
@@ -164,7 +238,7 @@ export default class Typeahead extends Component {
     });
   }
 
-  selectItem = (item) => {
+  selectItem = (item: TypeaheadOption<T>) => {
     const { multiple } = this.props;
     let selected = [...this.state.selected];
     let query;
@@ -183,15 +257,7 @@ export default class Typeahead extends Component {
     });
   };
 
-  stopPropagation = (event) => {
-    event.stopPropagation();
-    event.preventDefault();
-    if (event.nativeEvent && event.nativeEvent.stopImmediatePropagation) {
-      event.nativeEvent.stopImmediatePropagation();
-    }
-  };
-
-  handleSearch = (query) => {
+  handleSearch = (query: string) => {
     const { onSearch } = this.props;
     if (onSearch) {
       onSearch(query);
@@ -246,7 +312,7 @@ export default class Typeahead extends Component {
     );
   };
 
-  updateSelectedValue = (selected) => {
+  updateSelectedValue = (selected: TypeaheadOption<T>[]) => {
     const { onChange, validateChip } = this.props;
 
     const errorState = selected.some((chip) => !validateChip(chip));
@@ -255,7 +321,7 @@ export default class Typeahead extends Component {
     });
   };
 
-  clear = (event) => {
+  clear = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     if (this.state.selected.length > 0) {
       this.updateSelectedValue([]);
@@ -266,7 +332,7 @@ export default class Typeahead extends Component {
     });
   };
 
-  removeChip = (option) => {
+  removeChip = (option: TypeaheadOption<T>) => {
     const { selected } = this.state;
 
     if (selected.length > 0) {
@@ -274,8 +340,8 @@ export default class Typeahead extends Component {
     }
   };
 
-  renderChip = (option, idx) => {
-    const valid = this.props.validateChip(option);
+  renderChip = (option: TypeaheadOption<T>, idx: number): ReactNode => {
+    const valid = this.props.validateChip?.(option);
 
     return (
       <Chip
@@ -299,7 +365,10 @@ export default class Typeahead extends Component {
     allowNew,
     showNewEntry,
     dropdownOpen,
-  }) => {
+  }: Pick<TypeaheadProps<T>, 'footer' | 'options' | 'id' | 'allowNew' | 'showNewEntry'> &
+    Pick<TypeaheadState<T>, 'keyboardFocusedOptionIndex' | 'query'> & {
+      dropdownOpen?: boolean;
+    }) => {
     const optionsToRender = [...options];
     if (
       allowNew &&
@@ -364,6 +433,7 @@ export default class Typeahead extends Component {
     const menu = this.renderMenu({
       footer,
       options,
+      id,
       keyboardFocusedOptionIndex,
       query,
       allowNew,
@@ -384,7 +454,7 @@ export default class Typeahead extends Component {
           'typeahead--multiple': multiple,
           open: dropdownOpen,
         })}
-        onClick={this.stopPropagation}
+        onClick={stopPropagation}
       >
         <div
           className={classNames('form-group', {
@@ -409,6 +479,7 @@ export default class Typeahead extends Component {
                 selected,
                 maxHeight,
               }}
+              id={id}
               name={name}
               value={query}
               typeaheadId={id}
@@ -435,75 +506,3 @@ export default class Typeahead extends Component {
     );
   }
 }
-
-Typeahead.propTypes = {
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      note: PropTypes.string,
-      secondary: PropTypes.string,
-      value: PropTypes.object,
-    }),
-  ).isRequired,
-  initialValue: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      note: PropTypes.string,
-      secondary: PropTypes.string,
-    }),
-  ),
-  onChange: PropTypes.func.isRequired,
-  allowNew: PropTypes.bool,
-  autoFocus: PropTypes.bool,
-  clearable: PropTypes.bool,
-  multiple: PropTypes.bool,
-  showSuggestions: PropTypes.bool,
-  showNewEntry: PropTypes.bool,
-  searchDelay: PropTypes.number,
-  maxHeight: PropTypes.number,
-  minQueryLength: PropTypes.number,
-  addon: PropTypes.node,
-  placeholder: PropTypes.string,
-  alert: PropTypes.shape({
-    message: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['error', 'warning', 'neutral']).isRequired,
-  }),
-  footer: PropTypes.node,
-  validateChip: PropTypes.func,
-  onSearch: PropTypes.func,
-  onBlur: PropTypes.func,
-  onInputChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  chipSeparators: PropTypes.arrayOf(PropTypes.string),
-  size: PropTypes.oneOf(['md', 'lg']),
-  inputAutoComplete: PropTypes.string,
-  autoFillOnBlur: PropTypes.bool,
-};
-
-Typeahead.defaultProps = {
-  allowNew: false,
-  autoFocus: false,
-  clearable: true,
-  multiple: false,
-  maxHeight: null,
-  showSuggestions: true,
-  showNewEntry: true,
-  searchDelay: SEARCH_DELAY,
-  minQueryLength: DEFAULT_MIN_QUERY_LENGTH,
-  addon: null,
-  placeholder: null,
-  alert: null,
-  footer: null,
-  size: Size.MEDIUM,
-  chipSeparators: [],
-  initialValue: [],
-  onSearch: null,
-  onBlur: null,
-  onInputChange: null,
-  onFocus: null,
-  validateChip: () => true,
-  inputAutoComplete: 'new-password',
-  autoFillOnBlur: true,
-};

package/src/typeahead/index.ts

@@ -0,0 +1,4 @@
+import { Typeahead, type TypeaheadProps } from './Typeahead';
+import type { TypeaheadOption } from './Typeahead';
+
+export { Typeahead, TypeaheadOption, TypeaheadProps };

package/src/typeahead/typeaheadInput/{TypeaheadInput.js → TypeaheadInput.tsx}

@@ -2,16 +2,42 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import { Component } from 'react';
+import { Component, ReactNode } from 'react';
 
 import { Input } from '../../inputs/Input';
+import { TypeaheadOption, TypeaheadProps } from '../Typeahead';
 
 const DEFAULT_INPUT_MIN_WIDTH = 10;
 
-export default class TypeaheadInput extends Component {
-  constructor() {
-    super();
+export type TypeaheadInputProps<T> = {
+  typeaheadId: string;
+  value: string;
+  selected: TypeaheadOption<T>[];
+  optionsShown?: boolean;
+  autoComplete: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
+  onFocus: () => void;
+  onPaste: React.ClipboardEventHandler<HTMLInputElement>;
+  renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;
+} & Pick<
+  TypeaheadProps<T>,
+  'id' | 'name' | 'autoFocus' | 'multiple' | 'placeholder' | 'maxHeight' | 'onFocus'
+>;
+
+type TypeaheadInputState = {
+  inputWidth: number;
+};
+
+export default class TypeaheadInput<T> extends Component<
+  TypeaheadInputProps<T>,
+  TypeaheadInputState
+> {
+  inputRef: HTMLInputElement | null = null;
+  sizerRef: HTMLDivElement | null = null;
+
+  constructor(props: TypeaheadInputProps<T>) {
+    super(props);
     this.state = {
       inputWidth: DEFAULT_INPUT_MIN_WIDTH,
     };
@@ -20,11 +46,11 @@ export default class TypeaheadInput extends Component {
   componentDidMount() {
     const { autoFocus } = this.props;
     if (autoFocus) {
-      this.inputRef.focus();
+      this.inputRef?.focus();
     }
   }
 
-  componentDidUpdate(previousProps) {
+  componentDidUpdate(previousProps: TypeaheadInputProps<T>) {
     if (previousProps.value !== this.props.value && this.props.multiple) {
       this.recalculateWidth();
     }
@@ -33,7 +59,9 @@ export default class TypeaheadInput extends Component {
   recalculateWidth = () => {
     requestAnimationFrame(() => {
       this.setState({
-        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.scrollWidth + 10),
+        inputWidth: this.sizerRef
+          ? Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.scrollWidth + 10)
+          : DEFAULT_INPUT_MIN_WIDTH,
       });
     });
   };
@@ -41,12 +69,12 @@ export default class TypeaheadInput extends Component {
   renderInput = () => {
     const {
       typeaheadId,
-      autoFocus,
+      autoFocus = false,
       multiple,
       name,
-      optionsShown,
-      placeholder,
-      selected,
+      optionsShown = false,
+      placeholder = '',
+      selected = [],
       value,
       onChange,
       onKeyDown,
@@ -85,14 +113,14 @@ export default class TypeaheadInput extends Component {
   };
 
   render() {
-    const { multiple, selected, value, maxHeight, renderChip } = this.props;
+    const { multiple, selected = [], value, maxHeight = null, renderChip } = this.props;
 
     return multiple ? (
       <div
         className="form-control typeahead__input-container"
-        style={maxHeight && { maxHeight }}
+        style={{ maxHeight: maxHeight ?? undefined }}
         onClick={() => {
-          this.inputRef.focus();
+          this.inputRef?.focus();
         }}
       >
         <div className="typeahead__input-wrapper">
@@ -115,30 +143,3 @@ export default class TypeaheadInput extends Component {
     );
   }
 }
-
-TypeaheadInput.propTypes = {
-  typeaheadId: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  autoFocus: PropTypes.bool,
-  multiple: PropTypes.bool.isRequired,
-  value: PropTypes.string.isRequired,
-  selected: PropTypes.arrayOf(PropTypes.object),
-  placeholder: PropTypes.string,
-  optionsShown: PropTypes.bool,
-  maxHeight: PropTypes.number,
-  autoComplete: PropTypes.string.isRequired,
-
-  onChange: PropTypes.func.isRequired,
-  renderChip: PropTypes.func.isRequired,
-  onKeyDown: PropTypes.func.isRequired,
-  onFocus: PropTypes.func.isRequired,
-  onPaste: PropTypes.func.isRequired,
-};
-
-TypeaheadInput.defaultProps = {
-  autoFocus: false,
-  maxHeight: null,
-  placeholder: '',
-  optionsShown: false,
-  selected: [],
-};

package/src/typeahead/typeaheadOption/{TypeaheadOption.js → TypeaheadOption.tsx}

@@ -1,11 +1,18 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
+import { TypeaheadOption } from '../Typeahead';
 import highlight from '../util/highlight';
 
-const Option = (props) => {
-  const { option, selected, onClick, query } = props;
+export type TypeaheadOptionProps<T> = {
+  option: TypeaheadOption<T>;
+  selected?: boolean;
+  onClick?: React.MouseEventHandler;
+  query?: string;
+};
+
+const Option = <T,>(props: TypeaheadOptionProps<T>) => {
+  const { option, selected = false, onClick = () => {}, query = '' } = props;
   const { label, note, secondary } = option;
 
   return (
@@ -27,21 +34,4 @@ const Option = (props) => {
   );
 };
 
-Option.propTypes = {
-  option: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    note: PropTypes.string,
-    secondary: PropTypes.string,
-  }).isRequired,
-  query: PropTypes.string,
-  selected: PropTypes.bool,
-  onClick: PropTypes.func,
-};
-
-Option.defaultProps = {
-  selected: false,
-  query: '',
-  onClick: () => {},
-};
-
 export default Option;

package/src/typeahead/index.js

@@ -1,3 +0,0 @@
-import Typeahead from './Typeahead';
-
-export default Typeahead;