@transferwise/components 0.0.0-experimental-4d1e1cf → 0.0.0-experimental-a53ae95

package/src/test-utils/window-mock.ts

@@ -1,30 +1,14 @@
+import {
+  mockMatchMedia as baseMockMatchMedia,
+  mockResizeObserver as baseMockResizeObserver,
+} from '../mocks';
+
 export function mockMatchMedia() {
-  Object.defineProperty(window, 'matchMedia', {
-    writable: true,
-    value: jest.fn().mockImplementation((query: string) => {
-      const matches = /^\(min-width: ([0-9]+)px\)$/.exec(query);
-      const minWidth = matches != null ? Number(matches[1]) : undefined;
-      return {
-        matches: minWidth != null ? window.innerWidth >= minWidth : false,
-        media: query,
-        onchange: null,
-        addListener: jest.fn(), // deprecated
-        removeListener: jest.fn(), // deprecated
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      };
-    }),
-  });
+  baseMockMatchMedia(jest);
 }
 
 export function mockResizeObserver() {
   // mock ResizeObserver because it's not implemented in jsdoc lib
   // https://github.com/jsdom/jsdom/issues/3368
-  // eslint-disable-next-line compat/compat
-  window.ResizeObserver = class ResizeObserver {
-    observe = jest.fn();
-    unobserve = jest.fn();
-    disconnect = jest.fn();
-  };
+  baseMockResizeObserver(jest);
 }

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

@@ -4,20 +4,18 @@
 
 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 { Component, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { Component } from 'react';
 
 import Chip from '../chips/Chip';
-import { Size, Sentiment, SizeMedium, SizeLarge } from '../common';
+import { Size, Sentiment } 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';
@@ -25,81 +23,8 @@ import TypeaheadOption from './typeaheadOption/TypeaheadOption';
 const DEFAULT_MIN_QUERY_LENGTH = 3;
 const SEARCH_DELAY = 200;
 
-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 = {
-    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>) {
+export default class Typeahead extends Component {
+  constructor(props) {
     super(props);
     const { searchDelay, initialValue, multiple } = props;
     this.handleSearchDebounced = debounce(this.handleSearch, searchDelay);
@@ -112,9 +37,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     };
   }
 
-  handleSearchDebounced: DebouncedFunc<(query: string) => void>;
-
-  UNSAFE_componentWillReceiveProps(nextProps: TypeaheadProps<T>) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.multiple !== this.props.multiple) {
       this.setState((previousState) => {
         const { selected } = previousState;
@@ -126,7 +49,6 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
         }
         return {
           query: '',
-          selected: previousState.selected,
         };
       });
     }
@@ -137,16 +59,20 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
   }
 
   handleOnFocus = () => {
+    const { onFocus } = this.props;
     this.showMenu();
-    this.props.onFocus?.();
+
+    if (onFocus) {
+      this.props.onFocus();
+    }
   };
 
-  onOptionSelected = (event: React.MouseEvent, item: TypeaheadOption<T>) => {
+  onOptionSelected = (event, item) => {
     event.preventDefault();
     this.selectItem(item);
   };
 
-  handleOnChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+  handleOnChange = (event) => {
     const { optionsShown, selected } = this.state;
     const { multiple, onInputChange } = this.props;
 
@@ -168,7 +94,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     });
   };
 
-  handleOnPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {
+  handleOnPaste = (event) => {
     const { allowNew, multiple, chipSeparators } = this.props;
     const { selected } = this.state;
 
@@ -187,7 +113,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     }
   };
 
-  handleOnKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
+  handleOnKeyDown = (event) => {
     const { showSuggestions, allowNew, multiple, chipSeparators, options } = this.props;
     const { keyboardFocusedOptionIndex, query, selected } = this.state;
     const chipsMode = !showSuggestions && allowNew && multiple;
@@ -207,7 +133,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
           break;
         case 'Enter':
           event.preventDefault();
-          if (keyboardFocusedOptionIndex && options[keyboardFocusedOptionIndex]) {
+          if (options[keyboardFocusedOptionIndex]) {
             this.selectItem(options[keyboardFocusedOptionIndex]);
           } else if (allowNew && query.trim()) {
             this.selectItem({ label: query });
@@ -224,7 +150,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     }
   };
 
-  moveFocusedOption(offset: number) {
+  moveFocusedOption(offset) {
     this.setState((previousState) => {
       const { keyboardFocusedOptionIndex } = previousState;
       const { options } = this.props;
@@ -238,7 +164,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     });
   }
 
-  selectItem = (item: TypeaheadOption<T>) => {
+  selectItem = (item) => {
     const { multiple } = this.props;
     let selected = [...this.state.selected];
     let query;
@@ -257,7 +183,15 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     });
   };
 
-  handleSearch = (query: string) => {
+  stopPropagation = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (event.nativeEvent && event.nativeEvent.stopImmediatePropagation) {
+      event.nativeEvent.stopImmediatePropagation();
+    }
+  };
+
+  handleSearch = (query) => {
     const { onSearch } = this.props;
     if (onSearch) {
       onSearch(query);
@@ -312,7 +246,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     );
   };
 
-  updateSelectedValue = (selected: TypeaheadOption<T>[]) => {
+  updateSelectedValue = (selected) => {
     const { onChange, validateChip } = this.props;
 
     const errorState = selected.some((chip) => !validateChip(chip));
@@ -321,7 +255,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     });
   };
 
-  clear = (event: React.MouseEvent<HTMLButtonElement>) => {
+  clear = (event) => {
     event.preventDefault();
     if (this.state.selected.length > 0) {
       this.updateSelectedValue([]);
@@ -332,7 +266,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     });
   };
 
-  removeChip = (option: TypeaheadOption<T>) => {
+  removeChip = (option) => {
     const { selected } = this.state;
 
     if (selected.length > 0) {
@@ -340,8 +274,8 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     }
   };
 
-  renderChip = (option: TypeaheadOption<T>, idx: number): ReactNode => {
-    const valid = this.props.validateChip?.(option);
+  renderChip = (option, idx) => {
+    const valid = this.props.validateChip(option);
 
     return (
       <Chip
@@ -365,10 +299,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     allowNew,
     showNewEntry,
     dropdownOpen,
-  }: Pick<TypeaheadProps<T>, 'footer' | 'options' | 'id' | 'allowNew' | 'showNewEntry'> &
-    Pick<TypeaheadState<T>, 'keyboardFocusedOptionIndex' | 'query'> & {
-      dropdownOpen?: boolean;
-    }) => {
+  }) => {
     const optionsToRender = [...options];
     if (
       allowNew &&
@@ -387,7 +318,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
       >
         <ul className="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
           {optionsToRender.map((option, idx) => (
-            <TypeaheadOption<T>
+            <TypeaheadOption
               key={`${option.label}${idx.toString()}`}
               query={query}
               option={option}
@@ -433,7 +364,6 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     const menu = this.renderMenu({
       footer,
       options,
-      id,
       keyboardFocusedOptionIndex,
       query,
       allowNew,
@@ -454,7 +384,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
           'typeahead--multiple': multiple,
           open: dropdownOpen,
         })}
-        onClick={stopPropagation}
+        onClick={this.stopPropagation}
       >
         <div
           className={classNames('form-group', {
@@ -470,7 +400,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
           >
             {addon && <span className="input-group-addon input-group-addon--search">{addon}</span>}
 
-            <TypeaheadInput<T>
+            <TypeaheadInput
               {...{
                 autoFocus,
                 multiple,
@@ -479,7 +409,6 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
                 selected,
                 maxHeight,
               }}
-              id={id}
               name={name}
               value={query}
               typeaheadId={id}
@@ -506,3 +435,75 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
     );
   }
 }
+
+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/{Typeahead.story.tsx → Typeahead.story.js}

@@ -1,19 +1,18 @@
 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, { type TypeaheadOption } from './Typeahead';
+import Typeahead from './Typeahead';
 
 export default {
   component: Typeahead,
   title: 'Forms/Typeahead',
 };
 
-const validateChip = (option: TypeaheadOption) => {
+const validateChip = (option) => {
   // 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,
@@ -44,7 +43,7 @@ export const createable = () => {
   );
 };
 
-createable.play = async ({ canvasElement }: StoryContext) => {
+createable.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await userEvent.type(canvas.getByRole('combobox'), 'chip{Enter}chip2{Enter}');
 };
@@ -77,7 +76,7 @@ export const Basic = () => {
   ]);
 
   const validateChipWhenMultiple = () => {
-    return multiple && allowNew ? (option: TypeaheadOption) => validateChip(option) : undefined;
+    return multiple && allowNew ? (option) => validateChip(option) : undefined;
   };
 
   const multiple = boolean('multiple', false);
@@ -102,8 +101,8 @@ export const Basic = () => {
       showNewEntry={showNewEntry}
       placeholder="placeholder"
       chipSeparators={[',', ' ']}
-      validateChip={validateChipWhenMultiple()}
-      alert={showAlert ? { message: `Couldn't add item`, type: alertType } : undefined}
+      validateChip={validateChipWhenMultiple}
+      alert={showAlert && { message: `Couldn't add item`, type: alertType }}
       addon={<SearchIcon size={24} />}
       options={options}
       inputAutoComplete="off"
@@ -116,7 +115,7 @@ export const Basic = () => {
   );
 };
 
-Basic.play = async ({ canvasElement }: StoryContext) => {
+Basic.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await userEvent.type(canvas.getByRole('combobox'), 'abc{ArrowDown}');
 };

package/src/typeahead/index.js

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

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

@@ -2,42 +2,16 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import classnames from 'classnames';
-import { Component, createRef, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { Component } from 'react';
 
 import { Input } from '../../inputs/Input';
-import { TypeaheadOption, TypeaheadProps } from '../Typeahead';
 
 const DEFAULT_INPUT_MIN_WIDTH = 10;
 
-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 = createRef<HTMLInputElement>();
-  sizerRef = createRef<HTMLDivElement>();
-
-  constructor(props: TypeaheadInputProps<T>) {
-    super(props);
+export default class TypeaheadInput extends Component {
+  constructor() {
+    super();
     this.state = {
       inputWidth: DEFAULT_INPUT_MIN_WIDTH,
     };
@@ -46,11 +20,11 @@ export default class TypeaheadInput<T> extends Component<
   componentDidMount() {
     const { autoFocus } = this.props;
     if (autoFocus) {
-      this.inputRef.current?.focus();
+      this.inputRef.focus();
     }
   }
 
-  componentDidUpdate(previousProps: TypeaheadInputProps<T>) {
+  componentDidUpdate(previousProps) {
     if (previousProps.value !== this.props.value && this.props.multiple) {
       this.recalculateWidth();
     }
@@ -59,7 +33,7 @@ export default class TypeaheadInput<T> extends Component<
   recalculateWidth = () => {
     requestAnimationFrame(() => {
       this.setState({
-        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10),
+        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.scrollWidth + 10),
       });
     });
   };
@@ -67,12 +41,12 @@ export default class TypeaheadInput<T> extends Component<
   renderInput = () => {
     const {
       typeaheadId,
-      autoFocus = false,
+      autoFocus,
       multiple,
       name,
-      optionsShown = false,
-      placeholder = '',
-      selected = [],
+      optionsShown,
+      placeholder,
+      selected,
       value,
       onChange,
       onKeyDown,
@@ -85,7 +59,9 @@ export default class TypeaheadInput<T> extends Component<
     const hasPlaceholder = !multiple || selected.length === 0;
     return (
       <Input
-        ref={this.inputRef}
+        ref={(reference) => {
+          this.inputRef = reference;
+        }}
         className={classnames(multiple && 'typeahead__input')}
         name={name}
         id={`input-${typeaheadId}`}
@@ -109,14 +85,14 @@ export default class TypeaheadInput<T> extends Component<
   };
 
   render() {
-    const { multiple, selected = [], value, maxHeight = null, renderChip } = this.props;
+    const { multiple, selected, value, maxHeight, renderChip } = this.props;
 
     return multiple ? (
       <div
         className="form-control typeahead__input-container"
-        style={{ maxHeight: maxHeight ?? undefined }}
+        style={maxHeight && { maxHeight }}
         onClick={() => {
-          this.inputRef.current?.focus();
+          this.inputRef.focus();
         }}
       >
         <div className="typeahead__input-wrapper">
@@ -125,7 +101,12 @@ export default class TypeaheadInput<T> extends Component<
           {this.renderInput()}
           <div className="typeahead__input-aligner" />
         </div>
-        <div ref={this.sizerRef} className="sizer form-control typeahead__input">
+        <div
+          ref={(reference) => {
+            this.sizerRef = reference;
+          }}
+          className="sizer form-control typeahead__input"
+        >
           {value}
         </div>
       </div>
@@ -134,3 +115,30 @@ export default class TypeaheadInput<T> 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.tsx → TypeaheadOption.js}

@@ -1,18 +1,11 @@
 /* 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';
 
-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 Option = (props) => {
+  const { option, selected, onClick, query } = props;
   const { label, note, secondary } = option;
 
   return (
@@ -34,4 +27,21 @@ const Option = <T,>(props: TypeaheadOptionProps<T>) => {
   );
 };
 
+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.tsx → highlight.js}

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