@transferwise/components 46.11.0 → 46.12.0

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,10 +25,80 @@ 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 default class Typeahead<T> extends Component<TypeaheadProps<T>, TypeaheadState<T>> {
+  declare props: TypeaheadProps<T> &
+    Required<Pick<TypeaheadProps<T>, keyof typeof Typeahead.defaultProps>>;
+
+  static defaultProps = {
+    allowNew: false,
+    autoFillOnBlur: true,
+    autoFocus: false,
+    chipSeparators: [],
+    clearable: true,
+    initialValue: [],
+    inputAutoComplete: 'new-password',
+    minQueryLength: DEFAULT_MIN_QUERY_LENGTH,
+    multiple: false,
+    searchDelay: SEARCH_DELAY,
+    showSuggestions: true,
+    showNewEntry: true,
+    size: Size.MEDIUM,
+    validateChip: () => true,
+  } satisfies Partial<TypeaheadProps<unknown>>;
+
+  constructor(props: TypeaheadProps<T>) {
     super(props);
-    const { searchDelay, initialValue, multiple } = props;
+    const { searchDelay, initialValue, multiple } = this.props;
     this.handleSearchDebounced = debounce(this.handleSearch, searchDelay);
     const initialQuery = !multiple && initialValue.length > 0 ? initialValue[0].label : '';
     this.state = {
@@ -34,10 +106,14 @@ export default class Typeahead extends Component {
       errorState: false,
       query: initialQuery,
       keyboardFocusedOptionIndex: null,
+      optionsShown: false,
+      isFocused: false,
     };
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  handleSearchDebounced: DebouncedFunc<Typeahead<T>['handleSearch']>;
+
+  UNSAFE_componentWillReceiveProps(nextProps: TypeaheadProps<T>) {
     if (nextProps.multiple !== this.props.multiple) {
       this.setState((previousState) => {
         const { selected } = previousState;
@@ -48,6 +124,7 @@ export default class Typeahead extends Component {
           };
         }
         return {
+          selected: previousState.selected,
           query: '',
         };
       });
@@ -59,20 +136,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 +167,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 +186,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 +206,7 @@ export default class Typeahead extends Component {
           break;
         case 'Enter':
           event.preventDefault();
-          if (options[keyboardFocusedOptionIndex]) {
+          if (keyboardFocusedOptionIndex != null && options[keyboardFocusedOptionIndex]) {
             this.selectItem(options[keyboardFocusedOptionIndex]);
           } else if (allowNew && query.trim()) {
             this.selectItem({ label: query });
@@ -150,7 +223,7 @@ export default class Typeahead extends Component {
     }
   };
 
-  moveFocusedOption(offset) {
+  moveFocusedOption(offset: number) {
     this.setState((previousState) => {
       const { keyboardFocusedOptionIndex } = previousState;
       const { options } = this.props;
@@ -164,7 +237,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 +256,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 +311,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 +320,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 +331,7 @@ export default class Typeahead extends Component {
     });
   };
 
-  removeChip = (option) => {
+  removeChip = (option: TypeaheadOption<T>) => {
     const { selected } = this.state;
 
     if (selected.length > 0) {
@@ -274,8 +339,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 +364,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 +432,7 @@ export default class Typeahead extends Component {
     const menu = this.renderMenu({
       footer,
       options,
+      id,
       keyboardFocusedOptionIndex,
       query,
       allowNew,
@@ -371,10 +440,11 @@ export default class Typeahead extends Component {
       dropdownOpen,
     });
 
-    const hasError = errorState || (alert && alert.type === Sentiment.ERROR);
-    const displayAlert = (!errorState && alert) || (alert && alert.type === Sentiment.ERROR);
-    const hasWarning = displayAlert && alert.type === Sentiment.WARNING;
-    const hasInfo = displayAlert && alert.type === Sentiment.NEUTRAL;
+    const alertType = alert?.type ?? Sentiment.NEUTRAL;
+    const hasError = errorState || (alert && alertType === Sentiment.ERROR);
+    const displayAlert = (!errorState && alert) || (alert && alertType === Sentiment.ERROR);
+    const hasWarning = displayAlert && alertType === Sentiment.WARNING;
+    const hasInfo = displayAlert && alertType === Sentiment.NEUTRAL;
     return (
       <div
         id={id}
@@ -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,2 @@
+export { default } from './Typeahead';
+export type { TypeaheadOption, TypeaheadProps } from './Typeahead';

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

@@ -23,6 +23,7 @@ describe('Typeahead input', () => {
       onPaste: jest.fn(),
       onChange: jest.fn(),
       autoComplete: 'off',
+      selected: [],
     };
 
     component = shallow(<TypeaheadInput {...props} />);

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

@@ -2,16 +2,39 @@
 /* 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, createRef, 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'>;
+
+type TypeaheadInputState = {
+  inputWidth: number;
+};
+
+export default class TypeaheadInput<T> extends Component<
+  TypeaheadInputProps<T>,
+  TypeaheadInputState
+> {
+  inputRef = createRef<HTMLInputElement>();
+  sizerRef = createRef<HTMLDivElement>();
+
+  constructor(props: TypeaheadInputProps<T>) {
+    super(props);
     this.state = {
       inputWidth: DEFAULT_INPUT_MIN_WIDTH,
     };
@@ -20,11 +43,11 @@ export default class TypeaheadInput extends Component {
   componentDidMount() {
     const { autoFocus } = this.props;
     if (autoFocus) {
-      this.inputRef.focus();
+      this.inputRef.current?.focus();
     }
   }
 
-  componentDidUpdate(previousProps) {
+  componentDidUpdate(previousProps: TypeaheadInputProps<T>) {
     if (previousProps.value !== this.props.value && this.props.multiple) {
       this.recalculateWidth();
     }
@@ -33,7 +56,7 @@ export default class TypeaheadInput extends Component {
   recalculateWidth = () => {
     requestAnimationFrame(() => {
       this.setState({
-        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.scrollWidth + 10),
+        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10),
       });
     });
   };
@@ -59,9 +82,7 @@ export default class TypeaheadInput extends Component {
     const hasPlaceholder = !multiple || selected.length === 0;
     return (
       <Input
-        ref={(reference) => {
-          this.inputRef = reference;
-        }}
+        ref={this.inputRef}
         className={classnames(multiple && 'typeahead__input')}
         name={name}
         id={`input-${typeaheadId}`}
@@ -90,9 +111,9 @@ export default class TypeaheadInput extends Component {
     return multiple ? (
       <div
         className="form-control typeahead__input-container"
-        style={maxHeight && { maxHeight }}
+        style={{ maxHeight }}
         onClick={() => {
-          this.inputRef.focus();
+          this.inputRef.current?.focus();
         }}
       >
         <div className="typeahead__input-wrapper">
@@ -101,12 +122,7 @@ export default class TypeaheadInput extends Component {
           {this.renderInput()}
           <div className="typeahead__input-aligner" />
         </div>
-        <div
-          ref={(reference) => {
-            this.sizerRef = reference;
-          }}
-          className="sizer form-control typeahead__input"
-        >
+        <div ref={this.sizerRef} className="sizer form-control typeahead__input">
           {value}
         </div>
       </div>
@@ -115,30 +131,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/util/{highlight.js → highlight.tsx}

@@ -1,4 +1,4 @@
-export default function highlight(value, query) {
+export default function highlight(value: string, query: string) {
   if (value && query) {
     const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
     const highlightEnd = highlightStart + query.trim().length;

package/src/typeahead/index.js

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