@transferwise/components 0.0.0-experimental-77b2752 → 0.0.0-experimental-c9a3ec4

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

@@ -4,10 +4,10 @@
 
 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';
@@ -23,10 +23,59 @@ 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 type TypeaheadProps<T> = {
+  id: string;
+  name: string;
+  options: TypeaheadOption<T>[];
+  initialValue?: TypeaheadOption<T>[];
+  onChange: (options: TypeaheadOption<T>[]) => void;
+  allowNew?: boolean;
+  autoFocus?: boolean;
+  clearable?: boolean;
+  multiple?: boolean;
+  showSuggestions?: boolean;
+  showNewEntry?: boolean;
+  searchDelay?: number;
+  maxHeight?: number;
+  minQueryLength?: number;
+  addon?: ReactNode;
+  placeholder?: string;
+  alert?: {
+    message: string;
+    type: 'error' | 'warning' | 'neutral';
+  };
+  footer: ReactNode;
+  validateChip?: (chip: TypeaheadOption<T>) => boolean;
+  onSearch?: (query: string) => void;
+  onBlur?: () => void;
+  onInputChange?: (query: string) => void;
+  onFocus?: () => void;
+  chipSeparators?: string[];
+  size?: 'md' | 'lg';
+  inputAutoComplete?: string;
+  autoFillOnBlur?: boolean;
+};
+
+type TypeaheadState<T> = {
+  selected: TypeaheadOption<T>[];
+  keyboardFocusedOptionIndex: number | null;
+  errorState: boolean;
+  query: string;
+  optionsShown?: boolean;
+  isFocused?: boolean;
+};
+
+export default class Typeahead<T> extends Component<TypeaheadProps<T>, TypeaheadState<T>> {
+  constructor(props: TypeaheadProps<T>) {
     super(props);
-    const { searchDelay, initialValue, multiple } = props;
+    const { searchDelay = SEARCH_DELAY, initialValue = [], multiple } = props;
     this.handleSearchDebounced = debounce(this.handleSearch, searchDelay);
     const initialQuery = !multiple && initialValue.length > 0 ? initialValue[0].label : '';
     this.state = {
@@ -37,7 +86,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 +100,7 @@ export default class Typeahead extends Component {
         }
         return {
           query: '',
+          selected: previousState.selected,
         };
       });
     }
@@ -59,20 +111,17 @@ 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) => {
+  // START HERE
+  handleOnChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     const { optionsShown, selected } = this.state;
     const { multiple, onInputChange } = this.props;
 
@@ -94,8 +143,8 @@ export default class Typeahead extends Component {
     });
   };
 
-  handleOnPaste = (event) => {
-    const { allowNew, multiple, chipSeparators } = this.props;
+  handleOnPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {
+    const { allowNew = false, multiple = false, chipSeparators = [] } = this.props;
     const { selected } = this.state;
 
     if (allowNew && multiple && chipSeparators.length > 0) {
@@ -113,8 +162,14 @@ export default class Typeahead extends Component {
     }
   };
 
-  handleOnKeyDown = (event) => {
-    const { showSuggestions, allowNew, multiple, chipSeparators, options } = this.props;
+  handleOnKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
+    const {
+      showSuggestions = true,
+      allowNew = false,
+      multiple = false,
+      chipSeparators = [],
+      options,
+    } = this.props;
     const { keyboardFocusedOptionIndex, query, selected } = this.state;
     const chipsMode = !showSuggestions && allowNew && multiple;
 
@@ -133,7 +188,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 +205,7 @@ export default class Typeahead extends Component {
     }
   };
 
-  moveFocusedOption(offset) {
+  moveFocusedOption(offset: number) {
     this.setState((previousState) => {
       const { keyboardFocusedOptionIndex } = previousState;
       const { options } = this.props;
@@ -164,7 +219,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,7 +238,7 @@ export default class Typeahead extends Component {
     });
   };
 
-  stopPropagation = (event) => {
+  stopPropagation = (event: React.MouseEvent) => {
     event.stopPropagation();
     event.preventDefault();
     if (event.nativeEvent && event.nativeEvent.stopImmediatePropagation) {
@@ -191,7 +246,7 @@ export default class Typeahead extends Component {
     }
   };
 
-  handleSearch = (query) => {
+  handleSearch = (query: string) => {
     const { onSearch } = this.props;
     if (onSearch) {
       onSearch(query);
@@ -246,8 +301,8 @@ export default class Typeahead extends Component {
     );
   };
 
-  updateSelectedValue = (selected) => {
-    const { onChange, validateChip } = this.props;
+  updateSelectedValue = (selected: TypeaheadOption<T>[]) => {
+    const { onChange, validateChip = () => true } = this.props;
 
     const errorState = selected.some((chip) => !validateChip(chip));
     this.setState({ selected, errorState }, () => {
@@ -255,7 +310,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 +321,7 @@ export default class Typeahead extends Component {
     });
   };
 
-  removeChip = (option) => {
+  removeChip = (option: TypeaheadOption<T>) => {
     const { selected } = this.state;
 
     if (selected.length > 0) {
@@ -274,8 +329,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 +354,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 &&
@@ -338,21 +396,21 @@ export default class Typeahead extends Component {
     const {
       id,
       placeholder,
-      multiple,
-      size,
-      addon,
+      multiple = false,
+      size = Size.MEDIUM,
+      addon = null,
       name,
-      clearable,
-      allowNew,
-      footer,
-      showSuggestions,
-      showNewEntry,
+      clearable = true,
+      allowNew = false,
+      footer = null,
+      showSuggestions = true,
+      showNewEntry = true,
       options,
-      minQueryLength,
-      autoFocus,
-      maxHeight,
-      alert,
-      inputAutoComplete,
+      minQueryLength = DEFAULT_MIN_QUERY_LENGTH,
+      autoFocus = false,
+      maxHeight = null,
+      alert = null,
+      inputAutoComplete = 'new-password',
     } = this.props;
 
     const { errorState, query, selected, optionsShown, keyboardFocusedOptionIndex } = this.state;
@@ -364,6 +422,7 @@ export default class Typeahead extends Component {
     const menu = this.renderMenu({
       footer,
       options,
+      id,
       keyboardFocusedOptionIndex,
       query,
       allowNew,
@@ -435,75 +494,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/typeaheadInput/{TypeaheadInput.js → TypeaheadInput.tsx}

@@ -2,16 +2,44 @@
 /* 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 } from '../Typeahead';
 
 const DEFAULT_INPUT_MIN_WIDTH = 10;
 
-export default class TypeaheadInput extends Component {
-  constructor() {
-    super();
+export type TypeaheadInputProps<T> = {
+  typeaheadId: string;
+  name: string;
+  autoFocus?: boolean;
+  multiple: boolean;
+  value: string;
+  selected: TypeaheadOption<T>[];
+  placeholder?: string;
+  optionsShown?: boolean;
+  maxHeight: number | null;
+  autoComplete: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
+  onFocus: () => void;
+  onPaste: React.ClipboardEventHandler<HTMLInputElement>;
+  renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;
+};
+
+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 +48,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 +61,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 +71,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 +115,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 +145,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;