From 7ae325c16005b875c4f582259848f88cd9ec2787 Mon Sep 17 00:00:00 2001
From: roman <bonchevskyi@gmail.com>
Date: Tue, 18 Aug 2026 15:21:07 +0200
Subject: [PATCH] refactor(pill-selector-dropdown): migrate
 PillSelectorDropdown from Flow to TypeScript

---
 .../{Pill.js => Pill.js.flow}                 |   0
 .../pill-selector-dropdown/Pill.tsx           |  37 ++
 .../{PillSelector.js => PillSelector.js.flow} |   0
 .../pill-selector-dropdown/PillSelector.tsx   | 345 ++++++++++++++++++
 ...opdown.js => PillSelectorDropdown.js.flow} |   0
 ...es.js => PillSelectorDropdown.stories.tsx} |  81 ++--
 .../PillSelectorDropdown.tsx                  | 329 +++++++++++++++++
 ...d.js => PillSelectorDropdownField.js.flow} |   0
 .../PillSelectorDropdownField.tsx             | 166 +++++++++
 .../{RoundPill.js => RoundPill.js.flow}       |   0
 .../pill-selector-dropdown/RoundPill.tsx      | 146 ++++++++
 ...SuggestedPill.js => SuggestedPill.js.flow} |   0
 .../pill-selector-dropdown/SuggestedPill.tsx  |  58 +++
 ...dPillsRow.js => SuggestedPillsRow.js.flow} |   0
 .../SuggestedPillsRow.tsx                     |  55 +++
 .../__tests__/{Pill.test.js => Pill.test.tsx} |   1 +
 ...Selector.test.js => PillSelector.test.tsx} |  80 ++--
 ....test.js => PillSelectorDropdown.test.tsx} | 115 +++---
 ....js => PillSelectorDropdownField.test.tsx} |  57 +--
 .../{RoundPill.test.js => RoundPill.test.tsx} | 108 ++++--
 ...tedPill.test.js => SuggestedPill.test.tsx} |   7 +-
 ...lRow.test.js => SuggestedPillRow.test.tsx} |   7 +-
 .../{Pill.test.js.snap => Pill.test.tsx.snap} |   0
 ...est.js.snap => PillSelector.test.tsx.snap} |   0
 ...nap => PillSelectorDropdown.test.tsx.snap} |   0
 ...> PillSelectorDropdownField.test.tsx.snap} |   0
 ...l.test.js.snap => RoundPill.test.tsx.snap} |   0
 ...st.js.snap => SuggestedPill.test.tsx.snap} |   0
 ...js.snap => SuggestedPillRow.test.tsx.snap} |   0
 ...p => defaultDropdownRenderer.test.ts.snap} |   0
 ...est.js => defaultDropdownRenderer.test.ts} |   0
 ...ser.test.js => defaultInputParser.test.ts} |   5 +-
 ...rer.js => defaultDropdownRenderer.js.flow} |   0
 .../defaultDropdownRenderer.tsx               |  10 +
 ...utParser.js => defaultInputParser.js.flow} |   0
 .../defaultInputParser.ts                     |  43 +++
 ....test.js => defaultDropdownFilter.test.ts} |   0
 ...ter.test.js => waitForInputFilter.test.ts} |   1 -
 ...ilter.js => defaultDropdownFilter.js.flow} |   0
 .../filters/defaultDropdownFilter.ts          |  26 ++
 ...utFilter.js => waitForInputFilter.js.flow} |   0
 .../filters/waitForInputFilter.ts             |  19 +
 .../{flowTypes.js => flowTypes.js.flow}       |   0
 .../pill-selector-dropdown/flowTypes.ts       |  45 +++
 .../{index.js => index.js.flow}               |   0
 .../pill-selector-dropdown/index.ts           |   6 +
 .../pill-selector-dropdown/types.ts           |   9 +-
 47 files changed, 1550 insertions(+), 206 deletions(-)
 rename src/components/pill-selector-dropdown/{Pill.js => Pill.js.flow} (100%)
 create mode 100644 src/components/pill-selector-dropdown/Pill.tsx
 rename src/components/pill-selector-dropdown/{PillSelector.js => PillSelector.js.flow} (100%)
 create mode 100644 src/components/pill-selector-dropdown/PillSelector.tsx
 rename src/components/pill-selector-dropdown/{PillSelectorDropdown.js => PillSelectorDropdown.js.flow} (100%)
 rename src/components/pill-selector-dropdown/{PillSelectorDropdown.stories.js => PillSelectorDropdown.stories.tsx} (84%)
 create mode 100644 src/components/pill-selector-dropdown/PillSelectorDropdown.tsx
 rename src/components/pill-selector-dropdown/{PillSelectorDropdownField.js => PillSelectorDropdownField.js.flow} (100%)
 create mode 100644 src/components/pill-selector-dropdown/PillSelectorDropdownField.tsx
 rename src/components/pill-selector-dropdown/{RoundPill.js => RoundPill.js.flow} (100%)
 create mode 100644 src/components/pill-selector-dropdown/RoundPill.tsx
 rename src/components/pill-selector-dropdown/{SuggestedPill.js => SuggestedPill.js.flow} (100%)
 create mode 100644 src/components/pill-selector-dropdown/SuggestedPill.tsx
 rename src/components/pill-selector-dropdown/{SuggestedPillsRow.js => SuggestedPillsRow.js.flow} (100%)
 create mode 100644 src/components/pill-selector-dropdown/SuggestedPillsRow.tsx
 rename src/components/pill-selector-dropdown/__tests__/{Pill.test.js => Pill.test.tsx} (98%)
 rename src/components/pill-selector-dropdown/__tests__/{PillSelector.test.js => PillSelector.test.tsx} (87%)
 rename src/components/pill-selector-dropdown/__tests__/{PillSelectorDropdown.test.js => PillSelectorDropdown.test.tsx} (84%)
 rename src/components/pill-selector-dropdown/__tests__/{PillSelectorDropdownField.test.js => PillSelectorDropdownField.test.tsx} (81%)
 rename src/components/pill-selector-dropdown/__tests__/{RoundPill.test.js => RoundPill.test.tsx} (52%)
 rename src/components/pill-selector-dropdown/__tests__/{SuggestedPill.test.js => SuggestedPill.test.tsx} (91%)
 rename src/components/pill-selector-dropdown/__tests__/{SuggestedPillRow.test.js => SuggestedPillRow.test.tsx} (95%)
 rename src/components/pill-selector-dropdown/__tests__/__snapshots__/{Pill.test.js.snap => Pill.test.tsx.snap} (100%)
 rename src/components/pill-selector-dropdown/__tests__/__snapshots__/{PillSelector.test.js.snap => PillSelector.test.tsx.snap} (100%)
 rename src/components/pill-selector-dropdown/__tests__/__snapshots__/{PillSelectorDropdown.test.js.snap => PillSelectorDropdown.test.tsx.snap} (100%)
 rename src/components/pill-selector-dropdown/__tests__/__snapshots__/{PillSelectorDropdownField.test.js.snap => PillSelectorDropdownField.test.tsx.snap} (100%)
 rename src/components/pill-selector-dropdown/__tests__/__snapshots__/{RoundPill.test.js.snap => RoundPill.test.tsx.snap} (100%)
 rename src/components/pill-selector-dropdown/__tests__/__snapshots__/{SuggestedPill.test.js.snap => SuggestedPill.test.tsx.snap} (100%)
 rename src/components/pill-selector-dropdown/__tests__/__snapshots__/{SuggestedPillRow.test.js.snap => SuggestedPillRow.test.tsx.snap} (100%)
 rename src/components/pill-selector-dropdown/__tests__/__snapshots__/{defaultDropdownRenderer.test.js.snap => defaultDropdownRenderer.test.ts.snap} (100%)
 rename src/components/pill-selector-dropdown/__tests__/{defaultDropdownRenderer.test.js => defaultDropdownRenderer.test.ts} (100%)
 rename src/components/pill-selector-dropdown/__tests__/{defaultInputParser.test.js => defaultInputParser.test.ts} (97%)
 rename src/components/pill-selector-dropdown/{defaultDropdownRenderer.js => defaultDropdownRenderer.js.flow} (100%)
 create mode 100644 src/components/pill-selector-dropdown/defaultDropdownRenderer.tsx
 rename src/components/pill-selector-dropdown/{defaultInputParser.js => defaultInputParser.js.flow} (100%)
 create mode 100644 src/components/pill-selector-dropdown/defaultInputParser.ts
 rename src/components/pill-selector-dropdown/filters/__tests__/{defaultDropdownFilter.test.js => defaultDropdownFilter.test.ts} (100%)
 rename src/components/pill-selector-dropdown/filters/__tests__/{waitForInputFilter.test.js => waitForInputFilter.test.ts} (99%)
 rename src/components/pill-selector-dropdown/filters/{defaultDropdownFilter.js => defaultDropdownFilter.js.flow} (100%)
 create mode 100644 src/components/pill-selector-dropdown/filters/defaultDropdownFilter.ts
 rename src/components/pill-selector-dropdown/filters/{waitForInputFilter.js => waitForInputFilter.js.flow} (100%)
 create mode 100644 src/components/pill-selector-dropdown/filters/waitForInputFilter.ts
 rename src/components/pill-selector-dropdown/{flowTypes.js => flowTypes.js.flow} (100%)
 create mode 100644 src/components/pill-selector-dropdown/flowTypes.ts
 rename src/components/pill-selector-dropdown/{index.js => index.js.flow} (100%)
 create mode 100644 src/components/pill-selector-dropdown/index.ts

diff --git a/src/components/pill-selector-dropdown/Pill.js b/src/components/pill-selector-dropdown/Pill.js.flow
similarity index 100%
rename from src/components/pill-selector-dropdown/Pill.js
rename to src/components/pill-selector-dropdown/Pill.js.flow
diff --git a/src/components/pill-selector-dropdown/Pill.tsx b/src/components/pill-selector-dropdown/Pill.tsx
new file mode 100644
index 0000000000..ddafc521df
--- /dev/null
+++ b/src/components/pill-selector-dropdown/Pill.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import noop from 'lodash/noop';
+import classNames from 'classnames';
+
+export interface PillProps {
+    /** Whether the pill is disabled and cannot be removed */
+    isDisabled?: boolean;
+    /** Whether the pill is currently selected */
+    isSelected?: boolean;
+    /** Whether the pill value is valid */
+    isValid?: boolean;
+    /** Called when the remove control is clicked */
+    onRemove: () => void;
+    /** Display text for the pill */
+    text: string;
+}
+
+const Pill = ({ isDisabled = false, isSelected = false, isValid = true, onRemove, text }: PillProps) => {
+    const styles = classNames('bdl-Pill', 'pill', {
+        'is-selected': isSelected && !isDisabled,
+        'is-invalid': !isValid,
+        'is-disabled': isDisabled,
+        'bdl-is-disabled': isDisabled,
+    });
+    const onClick = isDisabled ? noop : onRemove;
+
+    return (
+        <span className={styles}>
+            <span className="bdl-Pill-text pill-text">{text}</span>
+            <span aria-hidden="true" className="close-btn" onClick={onClick}>
+                ✕
+            </span>
+        </span>
+    );
+};
+
+export default Pill;
diff --git a/src/components/pill-selector-dropdown/PillSelector.js b/src/components/pill-selector-dropdown/PillSelector.js.flow
similarity index 100%
rename from src/components/pill-selector-dropdown/PillSelector.js
rename to src/components/pill-selector-dropdown/PillSelector.js.flow
diff --git a/src/components/pill-selector-dropdown/PillSelector.tsx b/src/components/pill-selector-dropdown/PillSelector.tsx
new file mode 100644
index 0000000000..56a118e711
--- /dev/null
+++ b/src/components/pill-selector-dropdown/PillSelector.tsx
@@ -0,0 +1,345 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import uniqueId from 'lodash/uniqueId';
+import { List } from 'immutable';
+
+import Tooltip, { TooltipPosition, TooltipTheme, type TooltipProps } from '../tooltip';
+import { KEYS } from '../../constants';
+
+import RoundPill from './RoundPill';
+import Pill from './Pill';
+import SuggestedPillsRow from './SuggestedPillsRow';
+import type {
+    GetPillImageUrl,
+    Option,
+    OptionValue,
+    RoundOption,
+    SelectedOptions,
+    SuggestedPill,
+    SuggestedPills,
+    SuggestedPillsFilter,
+} from './flowTypes';
+
+function stopDefaultEvent(event: React.SyntheticEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+}
+
+function isImmutableOptions(selectedOptions: SelectedOptions): selectedOptions is List<Option> {
+    return typeof (selectedOptions as List<Option>).get === 'function';
+}
+
+function optionsToArray(selectedOptions: SelectedOptions): Array<Option> {
+    return isImmutableOptions(selectedOptions) ? selectedOptions.toArray() : selectedOptions;
+}
+
+export interface PillSelectorProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onInput'> {
+    /** If true, pills that fail validation are still rendered */
+    allowInvalidPills?: boolean;
+    /** CSS class for the textarea */
+    className?: string;
+    /** If true, the selector and pills are disabled */
+    disabled?: boolean;
+    /** Error message shown in the error tooltip */
+    error?: React.ReactNode;
+    /** Position of error message tooltip */
+    errorTooltipPosition?: TooltipProps['position'];
+    /** Called on pill render to get a specific class name to use for a particular option. Note: Only has effect when showRoundedPills is true. */
+    getPillClassName?: (option: Option) => string;
+    /** Function to retrieve the image URL associated with a pill */
+    getPillImageUrl?: GetPillImageUrl;
+    /** Ref forwarded to the wrapper span */
+    innerRef?: React.Ref<HTMLSpanElement>;
+    /** Additional props spread onto the textarea */
+    inputProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+    /** Allows disabling the textarea element without disabling the whole PillSelector */
+    isInputDisabled?: boolean;
+    /** Whether to show textarea in next line when focused */
+    isInputFocusedNextLine?: boolean;
+    /** Called when the textarea input event fires */
+    onInput: (event: React.FormEvent<HTMLTextAreaElement> | { target: { value: string } }) => void;
+    /** Called with the option and index when a pill is removed */
+    onRemove: (option: Option, index: number) => void;
+    /** Called when a suggested pill is added */
+    onSuggestedPillAdd?: (suggestedPill: SuggestedPill) => void;
+    /** Placeholder shown in the textarea when there are no pills */
+    placeholder?: string;
+    /** Selected options shown as pills */
+    selectedOptions?: SelectedOptions;
+    /** Whether to show avatars in pills (if rounded style is enabled) */
+    showAvatars?: boolean;
+    /** Whether to use rounded style for pills */
+    showRoundedPills?: boolean;
+    /** Suggested pills shown below the input */
+    suggestedPillsData?: SuggestedPills;
+    /** Suggested-pill field used to hide already selected values */
+    suggestedPillsFilter?: SuggestedPillsFilter;
+    /** Label shown before the suggested pills */
+    suggestedPillsTitle?: string;
+    /** Called to check if pill item data is valid */
+    validator?: (option: Option | OptionValue) => boolean;
+}
+
+interface PillSelectorState {
+    isFocused: boolean;
+    selectedIndex: number;
+}
+
+class PillSelectorBase extends React.Component<PillSelectorProps, PillSelectorState> {
+    static defaultProps = {
+        allowInvalidPills: false,
+        disabled: false,
+        error: '',
+        errorTooltipPosition: TooltipPosition.BOTTOM_LEFT,
+        inputProps: {},
+        placeholder: '',
+        selectedOptions: [] as SelectedOptions,
+        validator: () => true,
+    };
+
+    state: PillSelectorState = {
+        isFocused: false,
+        selectedIndex: -1,
+    };
+
+    getNumSelected = (): number => {
+        const { selectedOptions } = this.props;
+
+        return isImmutableOptions(selectedOptions) ? selectedOptions.size : selectedOptions.length;
+    };
+
+    getPillsByKey = (key: string): Array<Option[keyof Option]> => {
+        const { selectedOptions } = this.props;
+
+        return optionsToArray(selectedOptions).map(option => option[key as keyof Option]);
+    };
+
+    inputEl!: HTMLTextAreaElement;
+
+    handleClick = () => {
+        this.inputEl.focus();
+    };
+
+    handleFocus = () => {
+        this.setState({ isFocused: true });
+    };
+
+    handleBlur = () => {
+        this.setState({ isFocused: false });
+    };
+
+    hiddenEl!: HTMLSpanElement;
+
+    handleKeyDown = (event: React.KeyboardEvent) => {
+        const inputValue = this.inputEl.value;
+        const numPills = this.getNumSelected();
+        const { selectedIndex } = this.state;
+
+        switch (event.key) {
+            case KEYS.backspace: {
+                let index = -1;
+                if (selectedIndex >= 0) {
+                    // remove selected pill
+                    index = selectedIndex;
+                    this.resetSelectedIndex();
+                    this.inputEl.focus();
+                } else if (inputValue === '') {
+                    // remove last pill
+                    index = numPills - 1;
+                }
+                if (index >= 0) {
+                    const { onRemove, selectedOptions } = this.props;
+                    const selectedOption = isImmutableOptions(selectedOptions)
+                        ? selectedOptions.get(index)
+                        : selectedOptions[index];
+                    onRemove(selectedOption, index);
+                    stopDefaultEvent(event);
+                }
+                break;
+            }
+            case KEYS.arrowLeft:
+                if (selectedIndex >= 0) {
+                    // select previous pill
+                    this.setState({
+                        selectedIndex: Math.max(selectedIndex - 1, 0),
+                    });
+                    stopDefaultEvent(event);
+                } else if (inputValue === '' && numPills > 0) {
+                    // select last pill
+                    this.hiddenEl.focus();
+                    this.setState({ selectedIndex: numPills - 1 });
+                    stopDefaultEvent(event);
+                }
+                break;
+            case KEYS.arrowRight: {
+                if (selectedIndex >= 0) {
+                    const index = selectedIndex + 1;
+                    if (index >= numPills) {
+                        // deselect last pill
+                        this.resetSelectedIndex();
+                        this.inputEl.focus();
+                    } else {
+                        // select next pill
+                        this.setState({ selectedIndex: index });
+                    }
+                    stopDefaultEvent(event);
+                }
+                break;
+            }
+            // no default
+        }
+    };
+
+    errorMessageID = uniqueId('errorMessage');
+
+    hiddenRef = (hiddenEl: HTMLSpanElement | null) => {
+        if (hiddenEl) {
+            this.hiddenEl = hiddenEl;
+        }
+    };
+
+    resetSelectedIndex = () => {
+        if (this.state.selectedIndex !== -1) {
+            this.setState({ selectedIndex: -1 });
+        }
+    };
+
+    render() {
+        const { isFocused, selectedIndex } = this.state;
+        const {
+            allowInvalidPills,
+            className,
+            disabled,
+            error,
+            errorTooltipPosition,
+            getPillClassName,
+            getPillImageUrl,
+            inputProps,
+            isInputDisabled,
+            isInputFocusedNextLine,
+            onInput,
+            onRemove,
+            onSuggestedPillAdd,
+            placeholder,
+            innerRef,
+            selectedOptions,
+            showAvatars,
+            showRoundedPills,
+            suggestedPillsData,
+            suggestedPillsFilter,
+            suggestedPillsTitle,
+            validator,
+            ...rest
+        } = this.props;
+        const suggestedPillsEnabled = suggestedPillsData && suggestedPillsData.length > 0;
+        const hasError = !!error;
+        const classes = classNames('bdl-PillSelector', 'pill-selector-input-wrapper', {
+            'is-disabled': disabled,
+            'bdl-is-disabled': disabled,
+            'is-focused': isFocused,
+            'show-error': hasError,
+            'pill-selector-suggestions-enabled': suggestedPillsEnabled,
+            'bdl-PillSelector--suggestionsEnabled': suggestedPillsEnabled,
+        });
+        const ariaAttrs = {
+            'aria-invalid': hasError,
+            'aria-errormessage': this.errorMessageID,
+            'aria-describedby': this.errorMessageID,
+        };
+        const options = optionsToArray(selectedOptions);
+
+        return (
+            <Tooltip isShown={hasError} text={error || ''} position={errorTooltipPosition} theme={TooltipTheme.ERROR}>
+                {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+                <span
+                    className={classes}
+                    onBlur={this.handleBlur}
+                    onClick={this.handleClick}
+                    onFocus={this.handleFocus}
+                    onKeyDown={this.handleKeyDown}
+                    ref={innerRef}
+                >
+                    {showRoundedPills
+                        ? options.map((option: RoundOption, index: number) => {
+                              return (
+                                  <RoundPill
+                                      className={getPillClassName ? getPillClassName(option) : undefined}
+                                      getPillImageUrl={getPillImageUrl}
+                                      isValid={allowInvalidPills ? validator(option) : true}
+                                      isDisabled={disabled}
+                                      isSelected={index === selectedIndex}
+                                      key={option.value}
+                                      onRemove={onRemove.bind(this, option, index)}
+                                      text={option.displayText || option.text}
+                                      showAvatar={showAvatars}
+                                      id={option.id}
+                                      hasWarning={option.hasWarning}
+                                      isExternal={option.isExternalUser}
+                                      type={option.type}
+                                  />
+                              );
+                          })
+                        : options.map((option: Option, index: number) => {
+                              // TODO: This and associated types will be removed once all views are updates with round pills.
+                              return (
+                                  <Pill
+                                      isValid={allowInvalidPills ? validator(option) : true}
+                                      isDisabled={disabled}
+                                      isSelected={index === selectedIndex}
+                                      key={option.value}
+                                      onRemove={onRemove.bind(this, option, index)}
+                                      text={option.displayText || option.text}
+                                  />
+                              );
+                          })}
+
+                    {/* hidden element for focus/key events during pill selection */}
+                    <span
+                        aria-hidden="true"
+                        className="accessibility-hidden"
+                        onBlur={this.resetSelectedIndex}
+                        ref={this.hiddenRef}
+                        tabIndex={-1}
+                        data-testid="pill-selection-helper"
+                    />
+                    <textarea
+                        {...ariaAttrs}
+                        {...rest}
+                        {...inputProps}
+                        autoComplete="off"
+                        className={classNames('bdl-PillSelector-input', 'pill-selector-input', className, {
+                            'bdl-PillSelector-input--nextLine': isInputFocusedNextLine,
+                        })}
+                        disabled={disabled || isInputDisabled}
+                        onInput={onInput}
+                        placeholder={this.getNumSelected() === 0 ? placeholder : ''}
+                        ref={input => {
+                            if (input) {
+                                this.inputEl = input;
+                            }
+                        }}
+                    />
+                    <SuggestedPillsRow
+                        onSuggestedPillAdd={onSuggestedPillAdd}
+                        selectedPillsValues={this.getPillsByKey('value') as Array<string | number>}
+                        suggestedPillsFilter={suggestedPillsFilter}
+                        suggestedPillsData={suggestedPillsData}
+                        title={suggestedPillsTitle}
+                    />
+                    <span id={this.errorMessageID} className="accessibility-hidden" role="alert">
+                        {error}
+                    </span>
+                </span>
+            </Tooltip>
+        );
+    }
+}
+
+export { PillSelectorBase };
+
+const PillSelector = React.forwardRef<HTMLSpanElement, PillSelectorProps>((props, ref) => (
+    <PillSelectorBase {...props} innerRef={ref} />
+));
+PillSelector.displayName = 'PillSelector';
+
+export default PillSelector;
diff --git a/src/components/pill-selector-dropdown/PillSelectorDropdown.js b/src/components/pill-selector-dropdown/PillSelectorDropdown.js.flow
similarity index 100%
rename from src/components/pill-selector-dropdown/PillSelectorDropdown.js
rename to src/components/pill-selector-dropdown/PillSelectorDropdown.js.flow
diff --git a/src/components/pill-selector-dropdown/PillSelectorDropdown.stories.js b/src/components/pill-selector-dropdown/PillSelectorDropdown.stories.tsx
similarity index 84%
rename from src/components/pill-selector-dropdown/PillSelectorDropdown.stories.js
rename to src/components/pill-selector-dropdown/PillSelectorDropdown.stories.tsx
index 560d7773ed..c0fed689c8 100644
--- a/src/components/pill-selector-dropdown/PillSelectorDropdown.stories.js
+++ b/src/components/pill-selector-dropdown/PillSelectorDropdown.stories.tsx
@@ -1,10 +1,9 @@
-// @flow
 /* eslint-disable react-hooks/rules-of-hooks */
 import * as React from 'react';
-import type { Option } from 'components/pill-selector-dropdown/flowTypes';
 
 import ContactDatalistItem from '../contact-datalist-item';
 import PillSelectorDropdown from './PillSelectorDropdown';
+import type { Option } from './flowTypes';
 import notes from './PillSelectorDropdown.notes.md';
 
 import './PillSelectorDropdown.stories.scss';
@@ -20,9 +19,21 @@ const users = [
     { id: 7, name: 'ccc@foo.bar' },
 ];
 
-function generateProps({ setError, selectedOptions, setSelectedOptions, selectorOptions, setSelectorOptions }) {
-    const handleInput = value => {
-        const newSelectorOptions = [];
+function generateProps({
+    setError,
+    selectedOptions,
+    setSelectedOptions,
+    selectorOptions,
+    setSelectorOptions,
+}: {
+    setError: (error: string) => void;
+    selectedOptions: Option[];
+    setSelectedOptions: (options: Option[]) => void;
+    selectorOptions: Option[];
+    setSelectorOptions: (options: Option[]) => void;
+}) {
+    const handleInput = (value: string) => {
+        const newSelectorOptions: Option[] = [];
         if (value !== '') {
             users.forEach(user => {
                 if (user.name.toLowerCase().indexOf(value.toLowerCase()) !== -1) {
@@ -38,23 +49,23 @@ function generateProps({ setError, selectedOptions, setSelectedOptions, selector
         setError('');
     };
 
-    const handleSelect = pills => {
+    const handleSelect = (pills: Option[]) => {
         setSelectedOptions([...selectedOptions, ...pills]);
     };
 
-    const handleRemove = (option, index) => {
+    const handleRemove = (option: Option, index: number) => {
         const newSelectedOptions = [...selectedOptions];
         newSelectedOptions.splice(index, 1);
         setSelectedOptions(newSelectedOptions);
     };
 
-    const validator = text => {
+    const validator = (text: Option | string | number | null) => {
         // email input validation
         const pattern = /^[^\s<>@,]+@[^\s<>@,/\\]+\.[^\s<>@,]+$/i;
-        return pattern.test(((text: any): string));
+        return pattern.test(text as string);
     };
 
-    const validateForError = text => {
+    const validateForError = (text: string) => {
         const count = selectedOptions.length;
         let error = '';
 
@@ -77,8 +88,8 @@ function generateProps({ setError, selectedOptions, setSelectedOptions, selector
 
 export const empty = () => {
     const [error, setError] = React.useState('');
-    const [selectedOptions, setSelectedOptions] = React.useState<SelectedOptions>([]);
-    const [selectorOptions, setSelectorOptions] = React.useState<Array<Object>>([]);
+    const [selectedOptions, setSelectedOptions] = React.useState<Option[]>([]);
+    const [selectorOptions, setSelectorOptions] = React.useState<Option[]>([]);
     const { handleInput, handleRemove, handleSelect, validator, validateForError } = generateProps({
         setError,
         selectedOptions,
@@ -101,9 +112,7 @@ export const empty = () => {
             validator={validator}
         >
             {selectorOptions.map(option => (
-                <ContactDatalistItem key={option.value} name={option.displayText}>
-                    {option.displayText}
-                </ContactDatalistItem>
+                <ContactDatalistItem key={String(option.value)} name={option.displayText} />
             ))}
         </PillSelectorDropdown>
     );
@@ -111,7 +120,7 @@ export const empty = () => {
 
 export const withPills = () => {
     const [error, setError] = React.useState('');
-    const [selectedOptions, setSelectedOptions] = React.useState<SelectedOptions>([
+    const [selectedOptions, setSelectedOptions] = React.useState<Option[]>([
         {
             displayText: users[2].name,
             value: users[2].name,
@@ -126,7 +135,7 @@ export const withPills = () => {
         },
     ]);
 
-    const [selectorOptions, setSelectorOptions] = React.useState<Array<Object>>([]);
+    const [selectorOptions, setSelectorOptions] = React.useState<Option[]>([]);
 
     const { handleInput, handleRemove, handleSelect, validator, validateForError } = generateProps({
         setError,
@@ -150,9 +159,7 @@ export const withPills = () => {
             validator={validator}
         >
             {selectorOptions.map(option => (
-                <ContactDatalistItem key={option.value} name={option.value}>
-                    {option.displayText}
-                </ContactDatalistItem>
+                <ContactDatalistItem key={String(option.value)} name={String(option.value ?? '')} />
             ))}
         </PillSelectorDropdown>
     );
@@ -160,7 +167,7 @@ export const withPills = () => {
 
 export const showRoundedPills = () => {
     const [error, setError] = React.useState('');
-    const [selectedOptions, setSelectedOptions] = React.useState([
+    const [selectedOptions, setSelectedOptions] = React.useState<Option[]>([
         {
             displayText: users[2].name,
             value: users[2].name,
@@ -174,7 +181,7 @@ export const showRoundedPills = () => {
             value: users[4].name,
         },
     ]);
-    const [selectorOptions, setSelectorOptions] = React.useState([]);
+    const [selectorOptions, setSelectorOptions] = React.useState<Option[]>([]);
     const { handleInput, handleRemove, handleSelect, validator, validateForError } = generateProps({
         setError,
         selectedOptions,
@@ -198,9 +205,7 @@ export const showRoundedPills = () => {
             validator={validator}
         >
             {selectorOptions.map(option => (
-                <ContactDatalistItem key={option.value} name={option.value}>
-                    {option.displayText}
-                </ContactDatalistItem>
+                <ContactDatalistItem key={String(option.value)} name={String(option.value ?? '')} />
             ))}
         </PillSelectorDropdown>
     );
@@ -208,25 +213,28 @@ export const showRoundedPills = () => {
 
 export const showAvatars = () => {
     const [error, setError] = React.useState('');
-    const [selectedOptions, setSelectedOptions] = React.useState([
+    const [selectedOptions, setSelectedOptions] = React.useState<Option[]>([
         {
+            displayText: users[2].name,
             text: users[2].name,
             value: users[2].name,
             id: users[2].id,
         },
         {
+            displayText: users[1].name,
             text: users[1].name,
             value: users[1].name,
             id: users[1].id,
             isExternalUser: users[1].isExternalUser,
         },
         {
+            displayText: users[3].name,
             text: users[3].name,
             value: users[3].name,
             id: users[3].id,
         },
     ]);
-    const [selectorOptions, setSelectorOptions] = React.useState([]);
+    const [selectorOptions, setSelectorOptions] = React.useState<Option[]>([]);
     const { handleInput, handleRemove, handleSelect, validator, validateForError } = generateProps({
         setError,
         selectedOptions,
@@ -251,9 +259,7 @@ export const showAvatars = () => {
             validator={validator}
         >
             {selectorOptions.map(option => (
-                <ContactDatalistItem key={option.value} name={option.value}>
-                    {option.displayText}
-                </ContactDatalistItem>
+                <ContactDatalistItem key={String(option.value)} name={String(option.value ?? '')} />
             ))}
         </PillSelectorDropdown>
     );
@@ -273,13 +279,12 @@ export const customPillStyles = () => {
      *
      *
      */
-    const getPillClassName = ({ value }) => {
-        switch (value) {
-            case '2':
-                return 'is-custom';
-            default:
-                return '';
+    const getPillClassName = ({ value }: Option) => {
+        if (value === '2') {
+            return 'is-custom';
         }
+
+        return '';
     };
 
     const [error, setError] = React.useState('');
@@ -318,9 +323,7 @@ export const customPillStyles = () => {
             validator={validator}
         >
             {selectorOptions.map(option => (
-                <ContactDatalistItem key={option.value} name={option.displayText}>
-                    {option.displayText}
-                </ContactDatalistItem>
+                <ContactDatalistItem key={String(option.value)} name={option.displayText} />
             ))}
         </PillSelectorDropdown>
     );
diff --git a/src/components/pill-selector-dropdown/PillSelectorDropdown.tsx b/src/components/pill-selector-dropdown/PillSelectorDropdown.tsx
new file mode 100644
index 0000000000..2809c9d604
--- /dev/null
+++ b/src/components/pill-selector-dropdown/PillSelectorDropdown.tsx
@@ -0,0 +1,329 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { List } from 'immutable';
+import noop from 'lodash/noop';
+
+import parseCSV from '../../utils/parseCSV';
+import Label from '../label';
+import SelectorDropdown from '../selector-dropdown';
+
+import PillSelector from './PillSelector';
+import { ContactType } from '../../features/unified-share-modal/types';
+import type {
+    GetPillImageUrl,
+    Option,
+    OptionValue,
+    SelectedOptions,
+    SuggestedPill,
+    SuggestedPills,
+    SuggestedPillsFilter,
+} from './flowTypes';
+import type { TooltipProps } from '../tooltip';
+
+import './PillSelectorDropdown.scss';
+
+export interface PillSelectorDropdownProps {
+    /** If true, user can add pills not included in selector options */
+    allowCustomPills?: boolean;
+    /** If true, pills with errors are parsed as pills also */
+    allowInvalidPills?: boolean;
+    /** `DatalistItem` components for dropdown options to select */
+    children: React.ReactNode;
+    /** CSS class for the component */
+    className?: string;
+    /** If true, the input control is disabled so no more input can be made */
+    disabled?: boolean;
+    /** Index at which to insert a divider */
+    dividerIndex?: number;
+    /** A CSS selector matching the element to use as a boundary when auto-scrolling dropdown elements into view. When not provided, boundary will be determined by scrollIntoView utility function */
+    dropdownScrollBoundarySelector?: string;
+    /** Error message */
+    error?: React.ReactNode;
+    /** Position of error message tooltip */
+    errorTooltipPosition?: TooltipProps['position'];
+    /** Called on pill render to get a specific class name to use for a particular option. Note: Only has effect when showRoundedPills is true. */
+    getPillClassName?: (option: Option) => string;
+    /** Function to retrieve the image URL associated with a pill */
+    getPillImageUrl?: GetPillImageUrl;
+    /** Passed in by `SelectorDropdown` for accessibility */
+    inputProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+    /** Option to enable dynamic positioning with popper */
+    isPositionDynamic?: boolean;
+    /** Input label */
+    label?: React.ReactNode;
+    /** Called when pill selector input is blurred */
+    onBlur?: (
+        event?: React.FocusEvent<HTMLTextAreaElement> | { target: { name: string; value?: Array<Option> } },
+    ) => void;
+    /** Should update selectorOptions based on the given input value */
+    onInput: (
+        value: string,
+        event?:
+            | React.ChangeEvent<HTMLInputElement>
+            | React.ClipboardEvent<HTMLTextAreaElement>
+            | { target: { value: string } },
+    ) => void;
+    /** Called when creating pills */
+    onPillCreate?: (pills: Array<Option | ContactType>) => void;
+    /** Should update selectedOptions given the option and index to remove */
+    onRemove: (option: Option, index: number) => void;
+    /** Should update selectedOptions given an array of pills and the event */
+    onSelect: (pills: Array<Option>, event?: React.SyntheticEvent) => void;
+    /** Function adds a collaborator from suggested collabs to form */
+    onSuggestedPillAdd?: (suggestedPill: SuggestedPill) => void;
+    /** Optional title of the overlay */
+    overlayTitle?: string;
+    /** function to parse user input into an array of items to be validated and then added to pill selector. If this function is not passed, a default CSV parser is used. */
+    parseItems?: (inputValue: string) => Array<string | Option> | null | undefined;
+    /** A placeholder to show in the input when there are no pills */
+    placeholder?: string;
+    /** Array or Immutable list with data for the selected options shown as pills */
+    selectedOptions?: SelectedOptions;
+    /** Array or Immutable list with data for the dropdown options to select */
+    selectorOptions?: Array<Option> | List<Option>;
+    /** Determines whether or not input text is cleared automatically when it does not result in new pills being added */
+    shouldClearUnmatchedInput?: boolean;
+    /** Determines whether or not the first item is highlighted automatically when the dropdown opens */
+    shouldSetActiveItemOnOpen?: boolean;
+    /** show avatars (uses showRoundedPills) */
+    showAvatars?: boolean;
+    /** Use rounded style for pills */
+    showRoundedPills?: boolean;
+    /** Array of suggested collaborators */
+    suggestedPillsData?: SuggestedPills;
+    /** String decribes the datapoint to filter by so that items in the form are not shown in suggestions. */
+    suggestedPillsFilter?: SuggestedPillsFilter;
+    /** String describes the suggested pills */
+    suggestedPillsTitle?: string;
+    /** Validate the given input value, and update `error` prop if necessary */
+    validateForError?: (inputValue: string) => void;
+    /** Called to check if pill item data is valid. The `item` is passed in. */
+    validator?: (option: Option | OptionValue) => boolean;
+}
+
+interface PillSelectorDropdownState {
+    inputValue: string;
+    isInCompositionMode: boolean;
+}
+
+class PillSelectorDropdown extends React.Component<PillSelectorDropdownProps, PillSelectorDropdownState> {
+    static defaultProps = {
+        allowCustomPills: false,
+        allowInvalidPills: false,
+        disabled: false,
+        error: '',
+        inputProps: {},
+        label: '',
+        onBlur: noop,
+        onPillCreate: noop,
+        placeholder: '',
+        selectedOptions: [] as SelectedOptions,
+        selectorOptions: [] as Array<Option>,
+        shouldClearUnmatchedInput: false,
+        shouldSetActiveItemOnOpen: false,
+        validator: () => true,
+    };
+
+    state: PillSelectorDropdownState = { inputValue: '', isInCompositionMode: false };
+
+    parsePills = (inputValue: string) => {
+        const { allowInvalidPills, parseItems, validator } = this.props;
+        let pills = parseItems ? parseItems(inputValue) : parseCSV(inputValue);
+
+        if (!pills) {
+            return [];
+        }
+
+        if (!allowInvalidPills) {
+            pills = pills.filter(pill => validator(pill));
+        }
+
+        const normalizedPills = pills.map(pill =>
+            typeof pill === 'string'
+                ? {
+                      displayText: pill,
+                      text: pill, // deprecated, left for backwards compatibility
+                      value: pill,
+                  }
+                : pill,
+        );
+        return normalizedPills;
+    };
+
+    addPillsFromInput = (inputValue: string) => {
+        const {
+            allowCustomPills,
+            onPillCreate,
+            onSelect,
+            selectedOptions,
+            shouldClearUnmatchedInput,
+            validateForError,
+        } = this.props;
+
+        // Do nothing if custom pills are not allowed
+        if (!allowCustomPills) {
+            return;
+        }
+
+        // Parse pills from input
+        const pills = this.parsePills(inputValue);
+
+        // "Select" the pills
+        if (pills.length > 0) {
+            onSelect(pills);
+            onPillCreate(pills);
+
+            this.resetInputValue();
+        } else {
+            const selectedCount = Array.isArray(selectedOptions) ? selectedOptions.length : selectedOptions.size;
+            if (validateForError && (inputValue !== '' || selectedCount === 0)) {
+                /**
+                 * If no pills were added, but an inputValue exists or
+                 * there are no pills selected, check for errors
+                 */
+                validateForError(inputValue);
+            }
+            if (shouldClearUnmatchedInput) {
+                this.resetInputValue();
+            }
+        }
+    };
+
+    handleBlur = (
+        event?: React.FocusEvent<HTMLTextAreaElement> | { target: { name: string; value?: Array<Option> } },
+    ) => {
+        const { onBlur } = this.props;
+        const { inputValue } = this.state;
+        this.addPillsFromInput(inputValue);
+        onBlur(event);
+    };
+
+    handleInput = (event: React.ChangeEvent<HTMLInputElement> | { target: HTMLInputElement | { value: string } }) => {
+        const { target } = event;
+        const { value } = target;
+        this.setState({ inputValue: value });
+        this.props.onInput(value, event);
+    };
+
+    handleEnter = (event: React.SyntheticEvent) => {
+        const { isInCompositionMode, inputValue } = this.state;
+        if (!isInCompositionMode) {
+            event.preventDefault();
+            this.addPillsFromInput(inputValue);
+        }
+    };
+
+    handlePaste = (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
+        event.preventDefault();
+
+        const inputValue: string = event.clipboardData.getData('text');
+        this.setState({ inputValue });
+        this.props.onInput(inputValue, event);
+        this.addPillsFromInput(inputValue);
+    };
+
+    handleSelect = (index: number, event: React.SyntheticEvent) => {
+        const { onPillCreate, onSelect, selectorOptions } = this.props;
+        const selectedOption =
+            typeof (selectorOptions as List<Option>).get === 'function'
+                ? (selectorOptions as List<Option>).get(index)
+                : (selectorOptions as Array<Option>)[index];
+
+        onSelect([selectedOption], event);
+        onPillCreate([selectedOption]);
+
+        this.handleInput({ target: { value: '' } });
+    };
+
+    handleCompositionStart = () => {
+        this.setState({ isInCompositionMode: true });
+    };
+
+    handleCompositionEnd = () => {
+        this.setState({ isInCompositionMode: false });
+    };
+
+    resetInputValue = () => {
+        const { onInput } = this.props;
+
+        this.setState({ inputValue: '' });
+        onInput('');
+    };
+
+    render() {
+        const {
+            allowInvalidPills,
+            children,
+            className,
+            disabled,
+            dividerIndex,
+            dropdownScrollBoundarySelector,
+            error,
+            errorTooltipPosition,
+            getPillClassName,
+            getPillImageUrl,
+            inputProps,
+            isPositionDynamic,
+            label,
+            onRemove,
+            onSuggestedPillAdd,
+            overlayTitle,
+            placeholder,
+            selectedOptions,
+            showAvatars,
+            showRoundedPills,
+            suggestedPillsData,
+            suggestedPillsFilter,
+            suggestedPillsTitle,
+            shouldSetActiveItemOnOpen,
+            validator,
+        } = this.props;
+
+        const selectorDropdownElement = (
+            <SelectorDropdown
+                className={classNames('bdl-PillSelectorDropdown', 'pill-selector-wrapper', className)}
+                dividerIndex={dividerIndex}
+                isPositionDynamic={isPositionDynamic}
+                onEnter={this.handleEnter}
+                onSelect={this.handleSelect}
+                overlayTitle={overlayTitle}
+                scrollBoundarySelector={dropdownScrollBoundarySelector}
+                shouldSetActiveItemOnOpen={shouldSetActiveItemOnOpen}
+                selector={
+                    <PillSelector
+                        onChange={noop} // fix console error
+                        onCompositionEnd={this.handleCompositionEnd}
+                        onCompositionStart={this.handleCompositionStart}
+                        {...inputProps}
+                        allowInvalidPills={allowInvalidPills}
+                        disabled={disabled}
+                        error={error}
+                        errorTooltipPosition={errorTooltipPosition}
+                        getPillClassName={getPillClassName}
+                        getPillImageUrl={getPillImageUrl}
+                        onBlur={this.handleBlur}
+                        onInput={this.handleInput}
+                        onPaste={this.handlePaste}
+                        onRemove={onRemove}
+                        onSuggestedPillAdd={onSuggestedPillAdd}
+                        placeholder={placeholder}
+                        selectedOptions={selectedOptions}
+                        showAvatars={showAvatars && showRoundedPills}
+                        showRoundedPills={showRoundedPills}
+                        suggestedPillsData={suggestedPillsData}
+                        suggestedPillsFilter={suggestedPillsFilter}
+                        suggestedPillsTitle={suggestedPillsTitle}
+                        validator={validator}
+                        value={this.state.inputValue}
+                    />
+                }
+            >
+                {children}
+            </SelectorDropdown>
+        );
+
+        return label ? <Label text={label}>{selectorDropdownElement}</Label> : selectorDropdownElement;
+    }
+}
+
+export default PillSelectorDropdown;
diff --git a/src/components/pill-selector-dropdown/PillSelectorDropdownField.js b/src/components/pill-selector-dropdown/PillSelectorDropdownField.js.flow
similarity index 100%
rename from src/components/pill-selector-dropdown/PillSelectorDropdownField.js
rename to src/components/pill-selector-dropdown/PillSelectorDropdownField.js.flow
diff --git a/src/components/pill-selector-dropdown/PillSelectorDropdownField.tsx b/src/components/pill-selector-dropdown/PillSelectorDropdownField.tsx
new file mode 100644
index 0000000000..450b35aaad
--- /dev/null
+++ b/src/components/pill-selector-dropdown/PillSelectorDropdownField.tsx
@@ -0,0 +1,166 @@
+import * as React from 'react';
+import getProp from 'lodash/get';
+import noop from 'lodash/noop';
+import type { FieldProps } from 'formik';
+
+import PillSelectorDropdown from './PillSelectorDropdown';
+import defaultDropdownRenderer from './defaultDropdownRenderer';
+import defaultDropdownFilter from './filters/defaultDropdownFilter';
+import defaultInputParser from './defaultInputParser';
+import type { Option, OptionValue } from './flowTypes';
+
+export interface PillSelectorDropdownFieldProps extends FieldProps {
+    /** CSS class for the component. */
+    className?: string;
+    /** Given selected values and input text, returns a list of filtered options. Defaults to defaultDropdownFilter. */
+    dropdownFilter?: (options: Array<Option>, selectedValues: Array<Option>, inputText: string) => Array<Option>;
+    /** Given options, renders the dropdown list. Defaults to defaultDropdownRenderer. */
+    dropdownRenderer?: (options: Array<Option>) => React.ReactNode;
+    /** A CSS selector matching the element to use as a boundary when auto-scrolling dropdown elements into view. When not provided, boundary will be determined by scrollIntoView utility function */
+    dropdownScrollBoundarySelector?: string;
+    /** Function to parse user input into an array of items. Defaults to CSV parser. */
+    inputParser?: (inputValue: string, options: Array<Option>, selectedOptions: Array<Option>) => Array<Option>;
+    /** If true, the user can add pills not included in the dropdown options. Defaults to true. */
+    isCustomInputAllowed?: boolean;
+    /** If true, the input control is disabled so no more input can be made. Defaults to false. */
+    isDisabled?: boolean;
+    /** Pill selector label. */
+    label?: React.ReactNode;
+    /** Function to intercept the user entered input to fetch options in the selector dropdown */
+    onInput?: (text: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Array of options shown in the dropdown. */
+    options?: Array<Option>;
+    /** A placeholder to show in the input when there are no pills. */
+    placeholder?: string;
+    /** Determines whether or not copy pasted text is cleared when it does not result in new pills being added */
+    shouldClearUnmatchedInput?: boolean;
+    /** Called to check if pill text is valid. The text is passed in. */
+    validator?: (option: Option | OptionValue) => boolean;
+}
+
+interface PillSelectorDropdownFieldState {
+    inputText: string;
+}
+
+class PillSelectorDropdownField extends React.PureComponent<
+    PillSelectorDropdownFieldProps,
+    PillSelectorDropdownFieldState
+> {
+    static defaultProps = {
+        dropdownFilter: defaultDropdownFilter,
+        dropdownRenderer: defaultDropdownRenderer,
+        inputParser: defaultInputParser,
+        isCustomInputAllowed: true,
+        isDisabled: false,
+        onInput: noop,
+        options: [] as Array<Option>,
+        shouldClearUnmatchedInput: false,
+    };
+
+    state: PillSelectorDropdownFieldState = { inputText: '' };
+
+    isValidOption({ displayText }: Option) {
+        return !!displayText && !!displayText.trim();
+    }
+
+    createFakeEventTarget(name: string, value?: Array<Option>) {
+        // Returns a dummy EventTarget like object that formik understands how to read
+        return { target: { name, value } };
+    }
+
+    handleBlur = (
+        event?:
+            | React.FocusEvent<HTMLTextAreaElement>
+            | React.ChangeEvent<HTMLInputElement>
+            | { target: { name: string; value?: Array<Option> } },
+    ) => {
+        const { field } = this.props;
+        const { name, onBlur } = field;
+        // Sets touched in formik for the pill selector field.
+        // Event may or may not be available at this time.
+        onBlur(event || this.createFakeEventTarget(name));
+    };
+
+    handleInput = (text: string, event?: React.ChangeEvent<HTMLInputElement>) => {
+        const { onInput } = this.props;
+        this.setState({ inputText: text });
+        onInput(text, event);
+        if (text === '') {
+            this.handleBlur(event);
+        }
+    };
+
+    handleSelect = (options: Array<Option>) => {
+        const { field } = this.props;
+        const { name, onChange, value = [] } = field;
+        const filteredOptions = options.filter(option => this.isValidOption(option));
+        onChange(this.createFakeEventTarget(name, [...value, ...filteredOptions]));
+    };
+
+    handleRemove = (option: Option, index: number) => {
+        const { field } = this.props;
+        const { name, onChange, value = [] } = field;
+        const options = value.slice();
+        options.splice(index, 1);
+        onChange(this.createFakeEventTarget(name, options));
+    };
+
+    handleParseItems = (inputValue: string): Array<Option> | null | undefined => {
+        const { field, inputParser, options } = this.props;
+        const { value: selectedOptions = [] } = field;
+        return inputParser(inputValue, options, selectedOptions);
+    };
+
+    render() {
+        const { inputText } = this.state;
+        const {
+            className,
+            dropdownFilter,
+            dropdownRenderer,
+            dropdownScrollBoundarySelector,
+            field,
+            form,
+            isCustomInputAllowed,
+            isDisabled,
+            label,
+            options,
+            placeholder,
+            shouldClearUnmatchedInput,
+            validator,
+        } = this.props;
+        const { name, value = [] } = field;
+        const { errors, touched } = form;
+        const isTouched = getProp(touched, name);
+        const error = isTouched ? getProp(errors, name) : null;
+        const filteredOptions: Array<Option> = dropdownFilter(options, value, inputText);
+        const inputProps = { name }; // so that events generated have event.target.name
+
+        return (
+            <PillSelectorDropdown
+                allowCustomPills={isCustomInputAllowed}
+                allowInvalidPills
+                className={className}
+                disabled={isDisabled}
+                dropdownScrollBoundarySelector={dropdownScrollBoundarySelector}
+                inputProps={inputProps}
+                label={label}
+                error={error as React.ReactNode}
+                onBlur={this.handleBlur}
+                onInput={this.handleInput}
+                onRemove={this.handleRemove}
+                onSelect={this.handleSelect}
+                parseItems={this.handleParseItems}
+                placeholder={placeholder}
+                selectedOptions={value}
+                selectorOptions={filteredOptions}
+                shouldClearUnmatchedInput={shouldClearUnmatchedInput}
+                shouldSetActiveItemOnOpen
+                validator={validator}
+            >
+                {dropdownRenderer(filteredOptions)}
+            </PillSelectorDropdown>
+        );
+    }
+}
+
+export default PillSelectorDropdownField;
diff --git a/src/components/pill-selector-dropdown/RoundPill.js b/src/components/pill-selector-dropdown/RoundPill.js.flow
similarity index 100%
rename from src/components/pill-selector-dropdown/RoundPill.js
rename to src/components/pill-selector-dropdown/RoundPill.js.flow
diff --git a/src/components/pill-selector-dropdown/RoundPill.tsx b/src/components/pill-selector-dropdown/RoundPill.tsx
new file mode 100644
index 0000000000..a17c4871d2
--- /dev/null
+++ b/src/components/pill-selector-dropdown/RoundPill.tsx
@@ -0,0 +1,146 @@
+import * as React from 'react';
+import noop from 'lodash/noop';
+import classNames from 'classnames';
+import X from '../../icon/fill/X16';
+import LabelPill from '../label-pill';
+import { LabelPillSize } from '../label-pill/LabelPill';
+import Avatar from '../avatar';
+
+import type { GetPillImageUrl } from './flowTypes';
+
+import './RoundPill.scss';
+
+export interface RoundPillProps {
+    /** Additional CSS class for the pill */
+    className?: string;
+    /** Function to retrieve the image URL associated with a pill */
+    getPillImageUrl?: GetPillImageUrl;
+    /** Whether the pill should show a warning style */
+    hasWarning?: boolean;
+    /** Identifier passed to getPillImageUrl and the avatar */
+    id?: string | number;
+    /** Whether the pill is disabled and cannot be removed */
+    isDisabled?: boolean;
+    /** Whether the avatar should be labeled as external */
+    isExternal?: boolean;
+    /** Whether the pill is currently selected */
+    isSelected?: boolean;
+    /** Whether the pill value is valid */
+    isValid?: boolean;
+    /** Called when the remove control is clicked */
+    onRemove: () => void;
+    /** Whether to show an avatar in the pill */
+    showAvatar?: boolean;
+    /** Display text for the pill */
+    text: string;
+    /** Optional type passed to getPillImageUrl */
+    type?: string | null;
+}
+
+interface RoundPillState {
+    avatarUrl?: string | null;
+}
+
+const RemoveButton = ({ onClick, ...rest }: { onClick: () => void } & Record<string, unknown>) => (
+    // X's SVGProps omit onClick; LabelPill.Icon forwards the handler at runtime
+    <X {...({ ...rest, onClick, 'aria-hidden': 'true' } as React.ComponentProps<typeof X>)} />
+);
+
+class RoundPill extends React.PureComponent<RoundPillProps, RoundPillState> {
+    static defaultProps = {
+        isDisabled: false,
+        isSelected: false,
+        isValid: true,
+        hasWarning: false,
+        showAvatar: false,
+    };
+
+    state: RoundPillState = {
+        avatarUrl: undefined,
+    };
+
+    isMounted: boolean = false;
+
+    getStyles = (): string => {
+        const { className, isSelected, isDisabled, hasWarning, isValid } = this.props;
+
+        return classNames('bdl-RoundPill', className, {
+            'bdl-RoundPill--selected': isSelected && !isDisabled,
+            'bdl-RoundPill--disabled': isDisabled,
+            'bdl-RoundPill--warning': hasWarning,
+            'bdl-RoundPill--error': !isValid,
+        });
+    };
+
+    handleClickRemove = () => {
+        const { isDisabled, onRemove } = this.props;
+        return isDisabled ? noop : onRemove();
+    };
+
+    /**
+     * Success handler for getting avatar url
+     *
+     * @param {string} [avatarUrl] the user avatar url
+     */
+    getAvatarUrlHandler = (avatarUrl?: string | null) => {
+        if (this.isMounted) {
+            this.setState({
+                avatarUrl,
+            });
+        }
+    };
+
+    /**
+     * Gets the avatar URL for the user from the getPillImageUrl prop
+     *
+     * @return {void}
+     */
+    getAvatarUrl() {
+        const { getPillImageUrl, id, type } = this.props;
+        Promise.resolve(getPillImageUrl && id ? getPillImageUrl({ id, type }) : undefined)
+            .then(this.getAvatarUrlHandler)
+            .catch(() => {
+                // noop
+            });
+    }
+
+    componentDidMount() {
+        this.isMounted = true;
+        this.getAvatarUrl();
+    }
+
+    componentWillUnmount() {
+        this.isMounted = false;
+    }
+
+    render() {
+        const { id, isExternal, showAvatar, text } = this.props;
+        const { avatarUrl } = this.state;
+        const LabelPillIcon = LabelPill.Icon as unknown as React.ComponentType<Record<string, unknown>>;
+
+        return (
+            <LabelPill.Pill size={LabelPillSize.LARGE} className={this.getStyles()}>
+                {showAvatar ? (
+                    <LabelPillIcon
+                        Component={Avatar}
+                        className="bdl-RoundPill-avatar"
+                        avatarUrl={avatarUrl}
+                        id={id}
+                        isExternal={isExternal}
+                        name={text}
+                        size="small"
+                        shouldShowExternal
+                    />
+                ) : null}
+                <LabelPill.Text className="bdl-RoundPill-text">{text}</LabelPill.Text>
+                <LabelPillIcon
+                    className="bdl-RoundPill-closeBtn"
+                    Component={RemoveButton}
+                    onClick={this.handleClickRemove}
+                />
+            </LabelPill.Pill>
+        );
+    }
+}
+
+export default RoundPill;
diff --git a/src/components/pill-selector-dropdown/SuggestedPill.js b/src/components/pill-selector-dropdown/SuggestedPill.js.flow
similarity index 100%
rename from src/components/pill-selector-dropdown/SuggestedPill.js
rename to src/components/pill-selector-dropdown/SuggestedPill.js.flow
diff --git a/src/components/pill-selector-dropdown/SuggestedPill.tsx b/src/components/pill-selector-dropdown/SuggestedPill.tsx
new file mode 100644
index 0000000000..c375f5154f
--- /dev/null
+++ b/src/components/pill-selector-dropdown/SuggestedPill.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+import { ButtonType } from '../button';
+import PlainButton from '../plain-button';
+import Tooltip, { TooltipPosition } from '../tooltip';
+import { KEYS } from '../../constants';
+
+import { type SuggestedPill as SuggestedPillType } from './flowTypes';
+
+import './SuggestedPillsRow.scss';
+
+export interface SuggestedPillProps {
+    /** Email address shown in the tooltip and used as the added pill value */
+    email: string;
+    /** Unique identifier for the suggested pill */
+    id: number;
+    /** Display name shown on the suggested pill */
+    name: string;
+    /** Called with the suggested pill payload when the user adds it */
+    onAdd: (suggestedPill: SuggestedPillType) => void;
+}
+
+const SuggestedPill = ({ email, id, name, onAdd }: SuggestedPillProps) => {
+    const addSuggestedPill = (event: React.SyntheticEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+
+        // TODO: refactor this so inline conversions aren't required at every usage
+        onAdd({
+            email,
+            id,
+            name,
+            text: name,
+            type: 'user',
+            value: email,
+        });
+    };
+
+    const handleKeyPress = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+        if (event.key === KEYS.enter) {
+            addSuggestedPill(event);
+        }
+    };
+
+    return (
+        <Tooltip position={TooltipPosition.BOTTOM_CENTER} text={email}>
+            <PlainButton
+                className="suggested-pill-invisible-button"
+                onClick={addSuggestedPill}
+                onKeyDown={handleKeyPress}
+                type={ButtonType.BUTTON}
+            >
+                <span className="bdl-Pill-text pill-text suggested-pill">{name}</span>
+            </PlainButton>
+        </Tooltip>
+    );
+};
+
+export default SuggestedPill;
diff --git a/src/components/pill-selector-dropdown/SuggestedPillsRow.js b/src/components/pill-selector-dropdown/SuggestedPillsRow.js.flow
similarity index 100%
rename from src/components/pill-selector-dropdown/SuggestedPillsRow.js
rename to src/components/pill-selector-dropdown/SuggestedPillsRow.js.flow
diff --git a/src/components/pill-selector-dropdown/SuggestedPillsRow.tsx b/src/components/pill-selector-dropdown/SuggestedPillsRow.tsx
new file mode 100644
index 0000000000..63eab7dce2
--- /dev/null
+++ b/src/components/pill-selector-dropdown/SuggestedPillsRow.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import noop from 'lodash/noop';
+
+import SuggestedPill from './SuggestedPill';
+import type { SuggestedPill as SuggestedPillType, SuggestedPills, SuggestedPillsFilter } from './flowTypes';
+
+import './SuggestedPillsRow.scss';
+
+export interface SuggestedPillsRowProps {
+    /** Called when a suggested pill is added */
+    onSuggestedPillAdd?: (suggestedPill: SuggestedPillType) => void;
+    /** Values of already selected pills used to hide matching suggestions */
+    selectedPillsValues?: Array<string | number>;
+    /** Suggested pills to show */
+    suggestedPillsData?: SuggestedPills;
+    /** Suggested-pill field used to match against selectedPillsValues */
+    suggestedPillsFilter?: SuggestedPillsFilter;
+    /** Label shown before the suggested pills */
+    title?: string;
+}
+
+const SuggestedPillsRow = ({
+    onSuggestedPillAdd = noop,
+    selectedPillsValues = [],
+    suggestedPillsData = [],
+    suggestedPillsFilter = 'id',
+    title,
+}: SuggestedPillsRowProps) => {
+    // Prevents pills from being rendered that are in the form by checking for value (id or custom value)
+    const filteredSuggestedPillData = suggestedPillsData.filter(item => {
+        const filterValue = item[suggestedPillsFilter];
+        return filterValue === undefined || !selectedPillsValues.includes(filterValue);
+    });
+
+    if (filteredSuggestedPillData.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className="pill-selector-suggested">
+            <span>{title}</span>
+            {filteredSuggestedPillData.map(item => (
+                <SuggestedPill
+                    key={item.id}
+                    email={item.email}
+                    id={item.id}
+                    name={item.name}
+                    onAdd={onSuggestedPillAdd}
+                />
+            ))}
+        </div>
+    );
+};
+
+export default SuggestedPillsRow;
diff --git a/src/components/pill-selector-dropdown/__tests__/Pill.test.js b/src/components/pill-selector-dropdown/__tests__/Pill.test.tsx
similarity index 98%
rename from src/components/pill-selector-dropdown/__tests__/Pill.test.js
rename to src/components/pill-selector-dropdown/__tests__/Pill.test.tsx
index 01a9ca3184..e6b5ef9984 100644
--- a/src/components/pill-selector-dropdown/__tests__/Pill.test.js
+++ b/src/components/pill-selector-dropdown/__tests__/Pill.test.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { shallow } from 'enzyme';
 
 import Pill from '../Pill';
 
diff --git a/src/components/pill-selector-dropdown/__tests__/PillSelector.test.js b/src/components/pill-selector-dropdown/__tests__/PillSelector.test.tsx
similarity index 87%
rename from src/components/pill-selector-dropdown/__tests__/PillSelector.test.js
rename to src/components/pill-selector-dropdown/__tests__/PillSelector.test.tsx
index 6b42d6e7f4..d5a5d386dc 100644
--- a/src/components/pill-selector-dropdown/__tests__/PillSelector.test.js
+++ b/src/components/pill-selector-dropdown/__tests__/PillSelector.test.tsx
@@ -4,8 +4,11 @@ import { List, Record } from 'immutable';
 import sinon from 'sinon';
 
 import { PillSelectorBase as PillSelector } from '../PillSelector';
+import type { Option, OptionValue } from '../flowTypes';
 
 const sandbox = sinon.sandbox.create();
+const getInstance = (wrapper: { instance: () => React.Component }) =>
+    wrapper.instance() as InstanceType<typeof PillSelector>;
 
 describe('components/pill-selector-dropdown/PillSelector', () => {
     const onInputStub = sandbox.stub();
@@ -29,14 +32,14 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
             const selector = wrapper.find('.bdl-PillSelector');
 
             expect(wrapper.find('Tooltip').exists()).toBe(true);
-            expect(selector.length).toBe(1);
-            expect(input.length).toBe(1);
+            expect(selector).toHaveLength(1);
+            expect(input).toHaveLength(1);
             expect(input.prop('onInput')).toEqual(onInputStub);
             expect(input.prop('placeholder')).toEqual(placeholder);
         });
 
         test('should render disabled component', () => {
-            const wrapper = shallow(<PillSelector disabled onInput={() => {}} onRemove={() => {}} />);
+            const wrapper = shallow(<PillSelector disabled onInput={onInputStub} onRemove={onRemoveStub} />);
 
             expect(wrapper).toMatchSnapshot();
         });
@@ -52,14 +55,14 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
             const wrapper = shallow(<PillSelector onInput={onInputStub} onRemove={onRemoveStub} />);
             wrapper.setState({ isFocused: true });
 
-            expect(wrapper.find('.is-focused').length).toBe(1);
+            expect(wrapper.find('.is-focused')).toHaveLength(1);
         });
 
         test('should not add is-focused class when input is not focused', () => {
             const wrapper = shallow(<PillSelector onInput={onInputStub} onRemove={onRemoveStub} />);
             wrapper.setState({ isFocused: false });
 
-            expect(wrapper.find('.is-focused').length).toBe(0);
+            expect(wrapper.find('.is-focused')).toHaveLength(0);
         });
 
         test('should add bdl-PillSelector-input--nextLine class when prop is set to true', () => {
@@ -67,25 +70,25 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
                 <PillSelector onInput={onInputStub} onRemove={onRemoveStub} isInputFocusedNextLine />,
             );
 
-            expect(wrapper.find('.bdl-PillSelector-input--nextLine').length).toBe(1);
+            expect(wrapper.find('.bdl-PillSelector-input--nextLine')).toHaveLength(1);
         });
 
         test('should not add bdl-PillSelector-input--nextLine class when prop is not given', () => {
             const wrapper = shallow(<PillSelector onInput={onInputStub} onRemove={onRemoveStub} />);
 
-            expect(wrapper.find('.bdl-PillSelector-input--nextLine').length).toBe(0);
+            expect(wrapper.find('.bdl-PillSelector-input--nextLine')).toHaveLength(0);
         });
 
         test('should add show-error class when error is given', () => {
             const wrapper = shallow(<PillSelector error="hello" onInput={onInputStub} onRemove={onRemoveStub} />);
 
-            expect(wrapper.find('.show-error').length).toBe(1);
+            expect(wrapper.find('.show-error')).toHaveLength(1);
         });
 
         test('should not add show-error class when error is not given', () => {
             const wrapper = shallow(<PillSelector onInput={onInputStub} onRemove={onRemoveStub} />);
 
-            expect(wrapper.find('.show-error').length).toBe(0);
+            expect(wrapper.find('.show-error')).toHaveLength(0);
         });
 
         test('should render pills when there are selected options using legacy text attribute', () => {
@@ -97,7 +100,7 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
                 <PillSelector onInput={onInputStub} onRemove={onRemoveStub} selectedOptions={options} />,
             );
 
-            expect(wrapper.find('Pill').length).toBe(2);
+            expect(wrapper.find('Pill')).toHaveLength(2);
         });
 
         test('should render RoundPill instead of standard Pill when showRoundedPills prop is true', () => {
@@ -111,7 +114,7 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
                 />,
             );
 
-            expect(wrapper.find('RoundPill').length).toBe(1);
+            expect(wrapper.find('RoundPill')).toHaveLength(1);
         });
 
         test('should render pills when there are selected options', () => {
@@ -124,16 +127,17 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
             );
 
             const pills = wrapper.find('Pill');
-            expect(pills.length).toBe(2);
+            expect(pills).toHaveLength(2);
             expect(pills.at(0).prop('isValid')).toBeTruthy();
             expect(pills.at(1).prop('isValid')).toBeTruthy();
         });
 
         test('should render invalid pills when validator is provided and allowInvalidPills is true', () => {
-            const validator = ({ displayText }) => {
+            const validator = (option: Option | OptionValue) => {
                 // W3C type="email" input validation
                 const pattern = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-                return pattern.test(displayText);
+                const displayText = typeof option === 'object' && option !== null ? option.displayText : String(option);
+                return pattern.test(displayText || '');
             };
             const options = [
                 { displayText: 'test', value: 'test' },
@@ -149,13 +153,13 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
                 />,
             );
             const pills = wrapper.find('Pill');
-            expect(pills.length).toBe(2);
+            expect(pills).toHaveLength(2);
             expect(pills.at(0).prop('isValid')).toBeFalsy();
             expect(pills.at(1).prop('isValid')).toBeFalsy();
         });
 
         test('should render round pills using the class name returned by getPillClassName', () => {
-            const getPillClassName = ({ className }) => className;
+            const getPillClassName = (option: Option & { className?: string }) => option.className || '';
             const options = [
                 { displayText: 'Pill 1', value: '1', className: 'MyClass1' },
                 { displayText: 'Pill 2', value: '2', className: 'MyClass2' },
@@ -178,15 +182,15 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
         });
 
         test('should render pills when selected options are immutable', () => {
-            const options = new List([
-                new OptionRecord({ text: 'test', value: 'test' }),
-                new OptionRecord({ text: 'blah', value: 'hi' }),
+            const options = List([
+                OptionRecord({ text: 'test', value: 'test' }),
+                OptionRecord({ text: 'blah', value: 'hi' }),
             ]);
             const wrapper = shallow(
                 <PillSelector onInput={onInputStub} onRemove={onRemoveStub} selectedOptions={options} />,
             );
 
-            expect(wrapper.find('Pill').length).toBe(2);
+            expect(wrapper.find('Pill')).toHaveLength(2);
         });
 
         test('should render pill as selected when selected index is set', () => {
@@ -207,9 +211,9 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
         test('should render hidden pill selection helper', () => {
             const wrapper = shallow(<PillSelector onInput={onInputStub} onRemove={onRemoveStub} />);
             const hidden = wrapper.find('[data-testid="pill-selection-helper"]');
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
 
-            expect(hidden.length).toBe(1);
+            expect(hidden).toHaveLength(1);
             expect(hidden.prop('onBlur')).toEqual(instance.resetSelectedIndex);
         });
 
@@ -236,7 +240,7 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
         test('should pass through additional props when specified', () => {
             const value = 'test';
             const wrapper = shallow(
-                <PillSelector onChange={() => {}} onInput={onInputStub} onRemove={onRemoveStub} value={value} />,
+                <PillSelector onChange={jest.fn()} onInput={onInputStub} onRemove={onRemoveStub} value={value} />,
             );
 
             expect(wrapper.find('textarea').prop('value')).toEqual(value);
@@ -252,7 +256,7 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
         });
 
         test('should not render placeholder when there are immutable pills', () => {
-            const options = new List([new OptionRecord({ text: 'test', value: 'test' })]);
+            const options = List([OptionRecord({ text: 'test', value: 'test' })]);
             const wrapper = shallow(
                 <PillSelector onInput={onInputStub} onRemove={onRemoveStub} selectedOptions={options} />,
             );
@@ -292,12 +296,12 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
 
     describe('onKeyDown - Backspace', () => {
         test('should remove selected pill when backspace is pressed', () => {
-            const option = { text: 'test', value: 'test' };
+            const option = { text: 'test', value: 'test' } as const;
             const options = [option, { text: 'blah', value: 'blah' }];
             const wrapper = mount(
                 <PillSelector onInput={onInputStub} onRemove={onRemoveStub} selectedOptions={options} />,
             );
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             act(() => {
                 wrapper.setState({ selectedIndex: 0 });
             });
@@ -316,7 +320,7 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
 
         test('should not prevent default when backspace is pressed and the input has value', () => {
             const wrapper = mount(
-                <PillSelector onChange={() => {}} onInput={onInputStub} onRemove={onRemoveStub} value="test" />,
+                <PillSelector onChange={jest.fn()} onInput={onInputStub} onRemove={onRemoveStub} value="test" />,
             );
             wrapper.find('.bdl-PillSelector').simulate('keyDown', {
                 key: 'Backspace',
@@ -326,7 +330,7 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
         });
 
         test('should call onRemove() when backspace is pressed and there are pills but no input value', () => {
-            const option = { text: 'test', value: 'test' };
+            const option = { text: 'test', value: 'test' } as const;
             const options = [{ text: 'blah', value: 'blah' }, option];
             const wrapper = mount(
                 <PillSelector onInput={onInputStub} onRemove={onRemoveStub} selectedOptions={options} />,
@@ -340,8 +344,8 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
         });
 
         test('should call onRemove() when backspace is pressed and there are immutable pills but no input value', () => {
-            const option = new OptionRecord({ text: 'test', value: 'test' });
-            const options = new List([new OptionRecord({ text: 'blah', value: 'blah' }), option]);
+            const option = OptionRecord({ text: 'test', value: 'test' });
+            const options = List([OptionRecord({ text: 'blah', value: 'blah' }), option]);
             const wrapper = mount(
                 <PillSelector onInput={onInputStub} onRemove={onRemoveStub} selectedOptions={options} />,
             );
@@ -417,7 +421,7 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
 
         test('should not prevent default when left arrow is pressed and the input has value', () => {
             const wrapper = mount(
-                <PillSelector onChange={() => {}} onInput={onInputStub} onRemove={onRemoveStub} value="test" />,
+                <PillSelector onChange={jest.fn()} onInput={onInputStub} onRemove={onRemoveStub} value="test" />,
             );
             wrapper.find('.bdl-PillSelector').simulate('keyDown', {
                 key: 'ArrowLeft',
@@ -436,7 +440,7 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
             const wrapper = mount(
                 <PillSelector onInput={onInputStub} onRemove={onRemoveStub} selectedOptions={options} />,
             );
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             act(() => {
                 wrapper.setState({ selectedIndex: 1 });
             });
@@ -484,22 +488,22 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
 
     describe('onRemove', () => {
         test('should call onRemove() when pill onRemove is triggered', () => {
-            const option = { text: 'test', value: 'test' };
+            const option = { text: 'test', value: 'test' } as const;
             const options = [option, { text: 'blah', value: 'blah' }];
             const wrapper = shallow(
                 <PillSelector onInput={onInputStub} onRemove={onRemoveStub} selectedOptions={options} />,
             );
-            wrapper.find('Pill').at(0).prop('onRemove')();
+            (wrapper.find('Pill').at(0).prop('onRemove') as () => void)();
             expect(onRemoveStub.calledWith(option, 0)).toBe(true);
         });
 
         test('should call onRemove() when immutable pill onRemove is triggered', () => {
-            const option = new OptionRecord({ text: 'test', value: 'test' });
-            const options = new List([option, new OptionRecord({ text: 'blah', value: 'blah' })]);
+            const option = OptionRecord({ text: 'test', value: 'test' });
+            const options = List([option, OptionRecord({ text: 'blah', value: 'blah' })]);
             const wrapper = shallow(
                 <PillSelector onInput={onInputStub} onRemove={onRemoveStub} selectedOptions={options} />,
             );
-            wrapper.find('Pill').at(0).prop('onRemove')();
+            (wrapper.find('Pill').at(0).prop('onRemove') as () => void)();
             expect(onRemoveStub.calledWith(option, 0)).toBe(true);
         });
     });
@@ -507,7 +511,7 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
     describe('resetSelectedIndex()', () => {
         test('should reset selected index when called', () => {
             const wrapper = shallow(<PillSelector onInput={onInputStub} onRemove={onRemoveStub} />);
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             act(() => {
                 wrapper.setState({ selectedIndex: 1 });
             });
diff --git a/src/components/pill-selector-dropdown/__tests__/PillSelectorDropdown.test.js b/src/components/pill-selector-dropdown/__tests__/PillSelectorDropdown.test.tsx
similarity index 84%
rename from src/components/pill-selector-dropdown/__tests__/PillSelectorDropdown.test.js
rename to src/components/pill-selector-dropdown/__tests__/PillSelectorDropdown.test.tsx
index 90be881378..437b59a492 100644
--- a/src/components/pill-selector-dropdown/__tests__/PillSelectorDropdown.test.js
+++ b/src/components/pill-selector-dropdown/__tests__/PillSelectorDropdown.test.tsx
@@ -1,7 +1,19 @@
 import * as React from 'react';
+import { shallow } from 'enzyme';
 import { List, Record } from 'immutable';
 
 import PillSelectorDropdown from '../PillSelectorDropdown';
+import type { Option } from '../flowTypes';
+
+const getInstance = (wrapper: { instance: () => React.Component }) =>
+    wrapper.instance() as InstanceType<typeof PillSelectorDropdown> & {
+        addPillsFromInput: (inputValue?: string) => void;
+        handleBlur: (event?: unknown) => void;
+        handleEnter: (event?: unknown) => void;
+        handlePaste: (event?: unknown) => void;
+        handleSelect: (index: number, event?: unknown) => void;
+        parsePills: ((inputValue: string) => unknown[]) & jest.Mock;
+    };
 
 describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
     const OptionRecord = Record({
@@ -9,7 +21,8 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
         value: '',
     });
 
-    const getWrapper = (props, children) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const getWrapper = (props: any = {}, children?: any): any => {
         const options = children || (
             <>
                 <div>Option 1</div>
@@ -34,7 +47,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
             const className = 'test';
             const children = 'hi';
             const wrapper = getWrapper({ className }, children);
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             const selectorDropdown = wrapper.find('SelectorDropdown');
 
             expect(selectorDropdown.is('SelectorDropdown')).toBe(true);
@@ -46,20 +59,22 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
         });
 
         test('should render pill selector', () => {
-            const inputProps = { 'aria-label': 'test' };
+            const inputProps = { 'aria-label': 'test' } as const;
             const wrapper = getWrapper({ inputProps });
             wrapper.setState({ inputValue: 'value' });
-            const pillSelector = shallow(wrapper.find('SelectorDropdown').prop('selector'));
-            const wrapperInstance = wrapper.instance();
+            const pillSelector = shallow(wrapper.find('SelectorDropdown').prop('selector') as React.ReactElement);
+            const wrapperInstance = getInstance(wrapper);
             expect(pillSelector.prop('onInput')).toEqual(wrapperInstance.handleInput);
             expect(pillSelector.prop('onPaste')).toEqual(wrapperInstance.handlePaste);
-            expect(pillSelector.dive().instance().props.value).toEqual('value');
+            expect((pillSelector.dive().instance() as unknown as { props: { value: string } }).props.value).toEqual(
+                'value',
+            );
         });
 
         test('should render disabled pill selector', () => {
             const wrapper = getWrapper({ disabled: true });
 
-            wrapper.setState();
+            wrapper.update();
 
             expect(wrapper).toMatchSnapshot();
         });
@@ -67,7 +82,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
         test('should call addPillsFromInput when pill selector is blurred', () => {
             const wrapper = getWrapper();
             wrapper.setState({ inputValue: 'value' });
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             const addPillsFromInputMock = jest.fn();
             instance.addPillsFromInput = addPillsFromInputMock;
             instance.handleBlur();
@@ -77,8 +92,8 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
         test.each([
             ['test', true],
             ['', false],
-        ])('should render Label component when label exists', (value, expected) => {
-            const labelProp = { label: value };
+        ])('should render Label component when label exists', (value: string, expected: boolean) => {
+            const labelProp = { label: value } as const;
             const wrapper = getWrapper(labelProp);
             expect(wrapper.exists('Label')).toBe(expected);
         });
@@ -87,7 +102,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
     describe('parsePills', () => {
         test('should return a formatted map of pills', () => {
             const wrapper = getWrapper();
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             const inputValues = 'value1, value2,value3';
             wrapper.setState({ inputValue: inputValues });
 
@@ -100,14 +115,14 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
         });
 
         test('should only return pills that pass validator if one is provided and allowInvalidPills is false', () => {
-            const validator = text => {
+            const validator = (text: string) => {
                 // W3C type="email" input validation
                 const pattern = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
                 return pattern.test(text);
             };
 
             const wrapper = getWrapper({ validator });
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             const inputValues = 'aaron@example.com, bademail,hello@gmail.com';
             wrapper.setState({
                 inputValue: inputValues,
@@ -121,7 +136,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
         });
 
         test('should ignore validator if one is provided but allowInvalidPills is true', () => {
-            const validator = text => {
+            const validator = (text: string) => {
                 // W3C type="email" input validation
                 const pattern = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
                 return pattern.test(text);
@@ -129,7 +144,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
 
             const wrapper = getWrapper({ allowInvalidPills: true, validator });
 
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             const inputValues = 'aaron@example.com, bademail, hello@gmail.com';
             wrapper.setState({
                 inputValue: inputValues,
@@ -147,10 +162,10 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
             const wrapper = getWrapper({ allowInvalidPills: true });
             wrapper.setState({ inputValue: 'a,b' });
 
-            const { parsePills } = wrapper.instance();
-            const stringParser = input => input.split(',');
-            const optionParser = input =>
-                input.split(',').map(token => ({
+            const { parsePills } = getInstance(wrapper);
+            const stringParser = (input: string) => input.split(',');
+            const optionParser = (input: string) =>
+                input.split(',').map((token: string) => ({
                     customProp: token,
                 }));
 
@@ -185,7 +200,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
             const onPillCreateMock = jest.fn();
             const onSelectMock = jest.fn();
             const wrapper = getWrapper({ onPillCreate: onPillCreateMock, onSelect: onSelectMock });
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             const inputValue = 'value';
             wrapper.setState({ inputValue });
 
@@ -212,7 +227,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
                 validateForError: validateForErrorMock,
             });
 
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             instance.parsePills = jest.fn().mockReturnValue(pills);
             instance.addPillsFromInput();
 
@@ -224,7 +239,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
         });
 
         test('should call props.validateForError if no pills were added but input exists', () => {
-            const pills = [];
+            const pills: Array<Option> = [];
             const selectedOptions = [{ text: 'a pill', value: 'pill' }];
             const onInputMock = jest.fn();
             const onPillCreateMock = jest.fn();
@@ -239,7 +254,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
                 validateForError: validateForErrorMock,
             });
 
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             wrapper.setState({ inputValue: 'value1' });
             instance.parsePills = jest.fn().mockReturnValue(pills);
             instance.addPillsFromInput();
@@ -251,8 +266,8 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
         });
 
         test('should call props.validateForError if no pills were added and no options are selected', () => {
-            const pills = [];
-            const selectedOptions = [];
+            const pills: Array<Option> = [];
+            const selectedOptions: Array<Option> = [];
             const onInputMock = jest.fn();
             const onPillCreateMock = jest.fn();
             const onSelectMock = jest.fn();
@@ -266,7 +281,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
                 validateForError: validateForErrorMock,
             });
 
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             wrapper.setState({ inputValue: '' });
             instance.parsePills = jest.fn().mockReturnValue(pills);
             instance.addPillsFromInput();
@@ -278,7 +293,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
         });
 
         test('should not call props.validateForError if no pills were added, input is empty, and options are selected', () => {
-            const pills = [];
+            const pills: Array<Option> = [];
             const selectedOptions = [{ text: 'a pill', value: 'pill' }];
             const onInputMock = jest.fn();
             const onPillCreateMock = jest.fn();
@@ -293,7 +308,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
                 validateForError: validateForErrorMock,
             });
 
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             const inputValue = '';
             wrapper.setState({ inputValue });
             instance.parsePills = jest.fn().mockReturnValue(pills);
@@ -316,7 +331,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
 
             const onInput = jest.fn();
             const initialValue = 'abc';
-            const { addPillsFromInput } = wrapper.instance();
+            const { addPillsFromInput } = getInstance(wrapper);
 
             wrapper.setProps({ onInput, parseItems: () => [] });
             wrapper.setState({ inputValue: initialValue });
@@ -341,7 +356,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
         test('should update inputValue state when called', () => {
             const wrapper = getWrapper();
 
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
 
             instance.handleInput({ target: { value: 'test' } });
 
@@ -351,7 +366,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
         test('should call onInput() with value when called', () => {
             const onInputMock = jest.fn();
             const wrapper = getWrapper({ onInput: onInputMock });
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
 
             instance.handleInput({ target: { value: 'test' } });
 
@@ -362,8 +377,8 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
     describe('handleEnter()', () => {
         test('should do nothing when in composition mode', () => {
             const wrapper = getWrapper();
-            const instance = wrapper.instance();
-            const event = { preventDefault: jest.fn() };
+            const instance = getInstance(wrapper);
+            const event = { preventDefault: jest.fn() } as const;
             instance.addPillsFromInput = jest.fn();
             instance.handleCompositionStart();
             instance.handleEnter(event);
@@ -375,7 +390,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
             const wrapper = getWrapper();
             const addPillsFromInputMock = jest.fn();
             const preventDefaultMock = jest.fn();
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
 
             instance.addPillsFromInput = addPillsFromInputMock;
 
@@ -400,7 +415,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
                     },
                 },
                 preventDefault: jest.fn(),
-            };
+            } as const;
             const wrapper = getWrapper({
                 allowCustomPills: true,
                 allowInvalidPills: false,
@@ -408,7 +423,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
                 onPillCreate: onPillCreateMock,
                 validator: () => false,
             });
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
 
             instance.handlePaste(mockEvent);
 
@@ -427,13 +442,13 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
                     },
                 },
                 preventDefault: jest.fn(),
-            };
+            } as const;
             const wrapper = getWrapper({
                 allowCustomPills: true,
                 onInput: onInputMock,
                 onPillCreate: onPillCreateMock,
             });
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
 
             instance.handlePaste(mockEvent);
 
@@ -444,7 +459,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
 
     describe('handleSelect', () => {
         test('should call onSelect() with option and event when called', () => {
-            const option = { text: 'b', value: 'b' };
+            const option = { text: 'b', value: 'b' } as const;
             const options = [{ text: 'a', value: 'a' }, option];
             const onSelectMock = jest.fn();
             const onPillCreateMock = jest.fn();
@@ -453,8 +468,8 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
                 onPillCreate: onPillCreateMock,
                 selectorOptions: options,
             });
-            const instance = wrapper.instance();
-            const event = { type: 'click' };
+            const instance = getInstance(wrapper);
+            const event = { type: 'click' } as const;
 
             instance.handleSelect(1, event);
 
@@ -463,8 +478,8 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
         });
 
         test('should call onSelect() with immutable option and event when called', () => {
-            const option = new OptionRecord({ text: 'b', value: 'b' });
-            const options = new List([new OptionRecord({ text: 'a', value: 'a' }), option]);
+            const option = OptionRecord({ text: 'b', value: 'b' });
+            const options = List([OptionRecord({ text: 'a', value: 'a' }), option]);
             const onSelectMock = jest.fn();
             const onPillCreateMock = jest.fn();
             const wrapper = getWrapper({
@@ -472,8 +487,8 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
                 onPillCreate: onPillCreateMock,
                 selectorOptions: options,
             });
-            const instance = wrapper.instance();
-            const event = { type: 'click' };
+            const instance = getInstance(wrapper);
+            const event = { type: 'click' } as const;
 
             instance.handleSelect(1, event);
 
@@ -485,7 +500,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
             const options = [{ text: 'a', value: 'a' }];
             const handleInputMock = jest.fn();
             const wrapper = getWrapper({ selectorOptions: options });
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             instance.handleInput = handleInputMock;
             instance.handleSelect(0, {});
             expect(handleInputMock).toBeCalledWith({ target: { value: '' } });
@@ -496,8 +511,8 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
         test('should call onBlur() and addPillsFromInput() when underlying input is blurred', () => {
             const onBlur = jest.fn();
             const wrapper = getWrapper({ onBlur });
-            const instance = wrapper.instance();
-            const event = { type: 'blur' };
+            const instance = getInstance(wrapper);
+            const event = { type: 'blur' } as const;
 
             instance.addPillsFromInput = jest.fn();
             instance.handleBlur(event);
@@ -510,7 +525,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
     describe('handleCompositionStart()', () => {
         test('should set composition mode', () => {
             const wrapper = getWrapper();
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             instance.setState = jest.fn();
             instance.handleCompositionStart();
             expect(instance.setState).toHaveBeenCalledWith({ isInCompositionMode: true });
@@ -520,7 +535,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
     describe('handleCompositionEnd()', () => {
         test('should unset composition mode', () => {
             const wrapper = getWrapper();
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             instance.setState = jest.fn();
             instance.handleCompositionEnd();
             expect(instance.setState).toHaveBeenCalledWith({ isInCompositionMode: false });
diff --git a/src/components/pill-selector-dropdown/__tests__/PillSelectorDropdownField.test.js b/src/components/pill-selector-dropdown/__tests__/PillSelectorDropdownField.test.tsx
similarity index 81%
rename from src/components/pill-selector-dropdown/__tests__/PillSelectorDropdownField.test.js
rename to src/components/pill-selector-dropdown/__tests__/PillSelectorDropdownField.test.tsx
index 3d63aa8f08..4f9ce5e278 100644
--- a/src/components/pill-selector-dropdown/__tests__/PillSelectorDropdownField.test.js
+++ b/src/components/pill-selector-dropdown/__tests__/PillSelectorDropdownField.test.tsx
@@ -1,13 +1,24 @@
-// @flow
-
 import * as React from 'react';
+import { shallow } from 'enzyme';
+
 import defaultInputParser from '../defaultInputParser';
 import PillSelectorDropdownField from '../PillSelectorDropdownField';
 
 jest.mock('../defaultInputParser', () => jest.fn());
 
+const getInstance = (wrapper: { instance: () => React.Component }) =>
+    wrapper.instance() as InstanceType<typeof PillSelectorDropdownField> & {
+        createFakeEventTarget: (name: string, value?: unknown) => { target: { name: string; value?: unknown } };
+        handleBlur: (event?: unknown) => void;
+        handleInput: (text: string, event?: unknown) => void;
+        handleRemove: (option: unknown, index: number) => void;
+        handleSelect: (options: Array<{ displayText?: string; value?: string }>) => void;
+    };
+
 describe('components/pill-selector-dropdown/PillSelectorDropdownField', () => {
-    const getWrapper = props => shallow(<PillSelectorDropdownField field={{}} form={{}} {...props} />);
+    // Enzyme tests pass partial Formik field/form stubs
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const getWrapper = (props: any = {}): any => shallow(<PillSelectorDropdownField field={{}} form={{}} {...props} />);
 
     test('should render PillSelectorDropdown with default dropdown renderer', () => {
         const wrapper = getWrapper({
@@ -45,7 +56,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdownField', () => {
     describe('createFakeEventTarget()', () => {
         test('should return a event target like object', () => {
             const wrapper = getWrapper();
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             expect(instance.createFakeEventTarget('foo', 'bar')).toEqual({
                 target: { name: 'foo', value: 'bar' },
             });
@@ -55,7 +66,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdownField', () => {
     describe('handleInput()', () => {
         test('should set input value in state', () => {
             const wrapper = getWrapper();
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             instance.setState = jest.fn();
             instance.handleInput('foo');
             expect(instance.setState).toHaveBeenCalledWith({ inputText: 'foo' });
@@ -63,7 +74,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdownField', () => {
 
         test('should call handleBlur() when input text is cleared out', () => {
             const wrapper = getWrapper();
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             instance.handleBlur = jest.fn();
             instance.setState = jest.fn();
             instance.forceUpdate();
@@ -74,7 +85,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdownField', () => {
 
         test('should be called when underlying pill selector onInput is called', () => {
             const wrapper = getWrapper();
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             instance.handleInput = jest.fn();
             instance.forceUpdate();
             wrapper.prop('onInput')();
@@ -84,7 +95,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdownField', () => {
         test('should call its onInput prop when provided', () => {
             const onInput = jest.fn();
             const wrapper = getWrapper({ onInput });
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             instance.handleInput('foo');
             expect(onInput).toHaveBeenCalledWith('foo', undefined);
         });
@@ -100,7 +111,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdownField', () => {
                     value: [{ displayText: 'foo' }],
                 },
             });
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             instance.setState = jest.fn();
             instance.handleSelect([{ displayText: 'bar' }]);
             expect(onChange).toHaveBeenCalledWith({
@@ -117,7 +128,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdownField', () => {
                     value: [{ displayText: 'foo' }],
                 },
             });
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             instance.setState = jest.fn();
             instance.handleSelect([{ displayText: '   ' }, { displayText: '   ' }]);
             expect(onChange).toHaveBeenCalledWith({
@@ -127,7 +138,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdownField', () => {
 
         test('should be called when onSelect is called', () => {
             const wrapper = getWrapper();
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             instance.handleSelect = jest.fn();
             instance.forceUpdate();
             wrapper.prop('onSelect')();
@@ -145,7 +156,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdownField', () => {
                     value: ['foo', 'bar'],
                 },
             });
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             instance.setState = jest.fn();
             instance.handleRemove('bar', 1);
             expect(onChange).toHaveBeenCalledWith({ target: { name: 'pill', value: ['foo'] } });
@@ -153,7 +164,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdownField', () => {
 
         test('should be called when onRemove is called', () => {
             const wrapper = getWrapper();
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             instance.handleRemove = jest.fn();
             instance.forceUpdate();
             wrapper.prop('onRemove')();
@@ -168,7 +179,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdownField', () => {
                     onChange,
                 },
             });
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             instance.setState = jest.fn();
             instance.handleRemove('bar', 1);
             expect(onChange).toHaveBeenCalledWith({ target: { name: 'pill', value: [] } });
@@ -188,10 +199,10 @@ describe('components/pill-selector-dropdown/PillSelectorDropdownField', () => {
         ];
 
         test('should call default parser when inputParser is not provided', () => {
-            const field = { value: [options[0]] };
+            const field = { value: [options[0]] } as const;
             const wrapper = getWrapper({ inputParser: undefined, options, field });
 
-            wrapper.instance().handleParseItems('abc');
+            getInstance(wrapper).handleParseItems('abc');
 
             expect(defaultInputParser).toHaveBeenCalledTimes(1);
             expect(defaultInputParser).toHaveBeenCalledWith('abc', options, field.value);
@@ -199,10 +210,10 @@ describe('components/pill-selector-dropdown/PillSelectorDropdownField', () => {
 
         test('should call inputParser with inputValue, options and selectedOptions', () => {
             const inputParser = jest.fn();
-            const field = { value: [options[0]] };
+            const field = { value: [options[0]] } as const;
             const wrapper = getWrapper({ inputParser, options, field });
 
-            wrapper.instance().handleParseItems('abc');
+            getInstance(wrapper).handleParseItems('abc');
 
             expect(inputParser).toHaveBeenCalledTimes(1);
             expect(inputParser).toHaveBeenCalledWith('abc', options, field.value);
@@ -210,10 +221,10 @@ describe('components/pill-selector-dropdown/PillSelectorDropdownField', () => {
 
         test('should default value to empty array when its not been initialized', () => {
             const inputParser = jest.fn();
-            const field = {};
+            const field: Record<string, unknown> = {} as Record<string, unknown>;
             const wrapper = getWrapper({ inputParser, options, field });
 
-            wrapper.instance().handleParseItems('abc');
+            getInstance(wrapper).handleParseItems('abc');
 
             expect(inputParser).toHaveBeenCalledTimes(1);
             expect(inputParser).toHaveBeenCalledWith('abc', options, []);
@@ -228,7 +239,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdownField', () => {
                     onBlur,
                 },
             });
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             instance.setState = jest.fn();
             instance.handleBlur('foo');
             expect(onBlur).toHaveBeenCalledWith('foo');
@@ -242,7 +253,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdownField', () => {
                     onBlur,
                 },
             });
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             instance.setState = jest.fn();
             instance.handleBlur();
             expect(onBlur).toHaveBeenCalledWith({ target: { name: 'pill' } });
@@ -250,7 +261,7 @@ describe('components/pill-selector-dropdown/PillSelectorDropdownField', () => {
 
         test('should be called when onBlur is called', () => {
             const wrapper = getWrapper();
-            const instance = wrapper.instance();
+            const instance = getInstance(wrapper);
             instance.handleBlur = jest.fn();
             instance.forceUpdate();
             wrapper.prop('onBlur')();
diff --git a/src/components/pill-selector-dropdown/__tests__/RoundPill.test.js b/src/components/pill-selector-dropdown/__tests__/RoundPill.test.tsx
similarity index 52%
rename from src/components/pill-selector-dropdown/__tests__/RoundPill.test.js
rename to src/components/pill-selector-dropdown/__tests__/RoundPill.test.tsx
index c6bf8fdf0b..dc2f5913bf 100644
--- a/src/components/pill-selector-dropdown/__tests__/RoundPill.test.js
+++ b/src/components/pill-selector-dropdown/__tests__/RoundPill.test.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { shallow } from 'enzyme';
+
 import RoundPill from '../RoundPill';
 
 describe('components/RoundPill-selector-dropdown/RoundPill', () => {
@@ -71,9 +73,15 @@ describe('components/RoundPill-selector-dropdown/RoundPill', () => {
 
     test('should do nothing when getPillImageUrl returns a rejected Promise', () => {
         const wrapper = shallow(
-            <RoundPill name="name" id="123" showAvatar getPillImageUrl={() => Promise.reject(new Error())} />,
+            <RoundPill
+                text="name"
+                onRemove={onRemoveStub}
+                id="123"
+                showAvatar
+                getPillImageUrl={() => Promise.reject(new Error())}
+            />,
         );
-        expect(wrapper.state('avatarUrl')).toBe(undefined);
+        expect(wrapper.state('avatarUrl')).toBeUndefined();
         const instance = wrapper.instance();
 
         instance.componentDidMount();
@@ -81,54 +89,76 @@ describe('components/RoundPill-selector-dropdown/RoundPill', () => {
         setImmediate(() => {
             wrapper.update();
             expect(wrapper.state('avatarUrl')).toBeUndefined();
-            expect(wrapper.find('LabelPillIcon').length).toBe(2);
-            expect(wrapper.find('LabelPillIcon[avatarUrl]').length).toBe(0);
+            expect(wrapper.find('LabelPillIcon')).toHaveLength(2);
+            expect(wrapper.find('LabelPillIcon[avatarUrl]')).toHaveLength(0);
         });
     });
 
     test.each([
-        [contact => `/test?id=${contact.id}`, '/test?id=123'],
-        [contact => Promise.resolve(`/test?id=${contact.id}`), '/test?id=123'],
-    ])('should use the avatar URL when the prop (and show avatar) are provided', (getPillImageUrl, expected) => {
-        const wrapper = shallow(<RoundPill name="name" id="123" showAvatar getPillImageUrl={getPillImageUrl} />);
-        expect(wrapper.state('avatarUrl')).toBe(undefined);
-        const instance = wrapper.instance();
+        [(contact: { id: string }) => `/test?id=${contact.id}`, '/test?id=123'],
+        [(contact: { id: string }) => Promise.resolve(`/test?id=${contact.id}`), '/test?id=123'],
+    ])(
+        'should use the avatar URL when the prop (and show avatar) are provided',
+        (getPillImageUrl: (contact: { id: string }) => string | Promise<string>, expected: string) => {
+            const wrapper = shallow(
+                <RoundPill text="name" onRemove={onRemoveStub} id="123" showAvatar getPillImageUrl={getPillImageUrl} />,
+            );
+            expect(wrapper.state('avatarUrl')).toBeUndefined();
+            const instance = wrapper.instance();
 
-        instance.componentDidMount();
+            instance.componentDidMount();
 
-        setImmediate(() => {
-            wrapper.update();
-            expect(wrapper.state('avatarUrl')).toBe(expected);
-            expect(wrapper.find('LabelPillIcon').length).toBe(2);
-            expect(wrapper.find('LabelPillIcon[avatarUrl]').props().avatarUrl).toEqual(expected);
-        });
-    });
+            setImmediate(() => {
+                wrapper.update();
+                expect(wrapper.state('avatarUrl')).toBe(expected);
+                expect(wrapper.find('LabelPillIcon')).toHaveLength(2);
+                expect((wrapper.find('LabelPillIcon[avatarUrl]').props() as { avatarUrl?: string }).avatarUrl).toEqual(
+                    expected,
+                );
+            });
+        },
+    );
 
     test('should not have the avatar URL when the id prop is missing', () => {
         const wrapper = shallow(
-            <RoundPill name="name" showAvatar getPillImageUrl={contact => `/test?id=${contact.id}`} />,
+            <RoundPill
+                text="name"
+                onRemove={onRemoveStub}
+                showAvatar
+                getPillImageUrl={(contact: { id: string }) => `/test?id=${contact.id}`}
+            />,
         );
 
-        expect(wrapper.find('LabelPillIcon').length).toBe(2);
-        expect(wrapper.find('LabelPillIcon[avatarUrl]').length).toBe(0);
+        expect(wrapper.find('LabelPillIcon')).toHaveLength(2);
+        expect(wrapper.find('LabelPillIcon[avatarUrl]')).toHaveLength(0);
     });
 
-    test.each([['user'], [undefined], [null]])('should have avatar URL when the type prop is %s', type => {
-        const contactID = '123';
-        const getPillImageUrlMock = jest.fn().mockImplementation(() => Promise.resolve(`/test?id=${contactID}`));
-        const wrapper = shallow(
-            <RoundPill name="name" id={contactID} type={type} showAvatar getPillImageUrl={getPillImageUrlMock} />,
-        );
-        expect(wrapper.state('avatarUrl')).toBe(undefined);
-        const instance = wrapper.instance();
-
-        instance.componentDidMount();
-
-        setImmediate(() => {
-            wrapper.update();
-            expect(wrapper.find('LabelPillIcon').length).toBe(2);
-            expect(wrapper.find('LabelPillIcon[avatarUrl]').length).toBe(1);
-            expect(getPillImageUrlMock).toHaveBeenCalledWith({ id: contactID, type });
-        });
-    });
+    test.each([['user'], [undefined], [null]])(
+        'should have avatar URL when the type prop is %s',
+        (type: string | undefined | null) => {
+            const contactID = '123';
+            const getPillImageUrlMock = jest.fn().mockImplementation(() => Promise.resolve(`/test?id=${contactID}`));
+            const wrapper = shallow(
+                <RoundPill
+                    text="name"
+                    onRemove={onRemoveStub}
+                    id={contactID}
+                    type={type}
+                    showAvatar
+                    getPillImageUrl={getPillImageUrlMock}
+                />,
+            );
+            expect(wrapper.state('avatarUrl')).toBeUndefined();
+            const instance = wrapper.instance();
+
+            instance.componentDidMount();
+
+            setImmediate(() => {
+                wrapper.update();
+                expect(wrapper.find('LabelPillIcon')).toHaveLength(2);
+                expect(wrapper.find('LabelPillIcon[avatarUrl]')).toHaveLength(1);
+                expect(getPillImageUrlMock).toHaveBeenCalledWith({ id: contactID, type });
+            });
+        },
+    );
 });
diff --git a/src/components/pill-selector-dropdown/__tests__/SuggestedPill.test.js b/src/components/pill-selector-dropdown/__tests__/SuggestedPill.test.tsx
similarity index 91%
rename from src/components/pill-selector-dropdown/__tests__/SuggestedPill.test.js
rename to src/components/pill-selector-dropdown/__tests__/SuggestedPill.test.tsx
index 7ccb03b7aa..134507365f 100644
--- a/src/components/pill-selector-dropdown/__tests__/SuggestedPill.test.js
+++ b/src/components/pill-selector-dropdown/__tests__/SuggestedPill.test.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
+import { shallow } from 'enzyme';
 
 import SuggestedPill from '../SuggestedPill';
 
 describe('components/pill-selector-dropdown/SuggestedPill', () => {
     const preventDefaultStub = jest.fn();
-    const basicEvent = { preventDefault: preventDefaultStub };
+    const basicEvent = { preventDefault: preventDefaultStub } as const;
     const getWrapper = (params = {}) =>
         shallow(<SuggestedPill email="foo@bar.com" id={123} name="Foo" onAdd={jest.fn()} {...params} />);
 
@@ -32,7 +33,7 @@ describe('components/pill-selector-dropdown/SuggestedPill', () => {
                 onAdd,
             });
 
-            const fakeEvent = { ...basicEvent, key: 'Enter' };
+            const fakeEvent = { ...basicEvent, key: 'Enter' } as const;
             wrapper.find('.suggested-pill-invisible-button').simulate('keyDown', fakeEvent);
 
             expect(onAdd).toHaveBeenCalled();
@@ -44,7 +45,7 @@ describe('components/pill-selector-dropdown/SuggestedPill', () => {
                 onAdd,
             });
 
-            const fakeEvent = { ...basicEvent, key: 'foo' };
+            const fakeEvent = { ...basicEvent, key: 'foo' } as const;
             wrapper.find('.suggested-pill-invisible-button').simulate('keyDown', fakeEvent);
 
             expect(onAdd).not.toHaveBeenCalled();
diff --git a/src/components/pill-selector-dropdown/__tests__/SuggestedPillRow.test.js b/src/components/pill-selector-dropdown/__tests__/SuggestedPillRow.test.tsx
similarity index 95%
rename from src/components/pill-selector-dropdown/__tests__/SuggestedPillRow.test.js
rename to src/components/pill-selector-dropdown/__tests__/SuggestedPillRow.test.tsx
index f078bde4b7..042d00af53 100644
--- a/src/components/pill-selector-dropdown/__tests__/SuggestedPillRow.test.js
+++ b/src/components/pill-selector-dropdown/__tests__/SuggestedPillRow.test.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { shallow } from 'enzyme';
 
 import SuggestedPillsRow from '../SuggestedPillsRow';
 
@@ -11,19 +12,19 @@ describe('components/pill-selector-dropdown/SuggestedPillsRow', () => {
             id: collabID1,
             email: 'foo@box.com',
             name: 'Foo',
-        };
+        } as const;
 
         const collabID2 = 987;
         const collab2 = {
             ...collab1,
             id: collabID2,
-        };
+        } as const;
 
         const collabID3 = 456;
         const collab3 = {
             ...collab1,
             id: collabID3,
-        };
+        } as const;
 
         test('should render the SuggestedCollabPill', () => {
             const wrapper = getWrapper({
diff --git a/src/components/pill-selector-dropdown/__tests__/__snapshots__/Pill.test.js.snap b/src/components/pill-selector-dropdown/__tests__/__snapshots__/Pill.test.tsx.snap
similarity index 100%
rename from src/components/pill-selector-dropdown/__tests__/__snapshots__/Pill.test.js.snap
rename to src/components/pill-selector-dropdown/__tests__/__snapshots__/Pill.test.tsx.snap
diff --git a/src/components/pill-selector-dropdown/__tests__/__snapshots__/PillSelector.test.js.snap b/src/components/pill-selector-dropdown/__tests__/__snapshots__/PillSelector.test.tsx.snap
similarity index 100%
rename from src/components/pill-selector-dropdown/__tests__/__snapshots__/PillSelector.test.js.snap
rename to src/components/pill-selector-dropdown/__tests__/__snapshots__/PillSelector.test.tsx.snap
diff --git a/src/components/pill-selector-dropdown/__tests__/__snapshots__/PillSelectorDropdown.test.js.snap b/src/components/pill-selector-dropdown/__tests__/__snapshots__/PillSelectorDropdown.test.tsx.snap
similarity index 100%
rename from src/components/pill-selector-dropdown/__tests__/__snapshots__/PillSelectorDropdown.test.js.snap
rename to src/components/pill-selector-dropdown/__tests__/__snapshots__/PillSelectorDropdown.test.tsx.snap
diff --git a/src/components/pill-selector-dropdown/__tests__/__snapshots__/PillSelectorDropdownField.test.js.snap b/src/components/pill-selector-dropdown/__tests__/__snapshots__/PillSelectorDropdownField.test.tsx.snap
similarity index 100%
rename from src/components/pill-selector-dropdown/__tests__/__snapshots__/PillSelectorDropdownField.test.js.snap
rename to src/components/pill-selector-dropdown/__tests__/__snapshots__/PillSelectorDropdownField.test.tsx.snap
diff --git a/src/components/pill-selector-dropdown/__tests__/__snapshots__/RoundPill.test.js.snap b/src/components/pill-selector-dropdown/__tests__/__snapshots__/RoundPill.test.tsx.snap
similarity index 100%
rename from src/components/pill-selector-dropdown/__tests__/__snapshots__/RoundPill.test.js.snap
rename to src/components/pill-selector-dropdown/__tests__/__snapshots__/RoundPill.test.tsx.snap
diff --git a/src/components/pill-selector-dropdown/__tests__/__snapshots__/SuggestedPill.test.js.snap b/src/components/pill-selector-dropdown/__tests__/__snapshots__/SuggestedPill.test.tsx.snap
similarity index 100%
rename from src/components/pill-selector-dropdown/__tests__/__snapshots__/SuggestedPill.test.js.snap
rename to src/components/pill-selector-dropdown/__tests__/__snapshots__/SuggestedPill.test.tsx.snap
diff --git a/src/components/pill-selector-dropdown/__tests__/__snapshots__/SuggestedPillRow.test.js.snap b/src/components/pill-selector-dropdown/__tests__/__snapshots__/SuggestedPillRow.test.tsx.snap
similarity index 100%
rename from src/components/pill-selector-dropdown/__tests__/__snapshots__/SuggestedPillRow.test.js.snap
rename to src/components/pill-selector-dropdown/__tests__/__snapshots__/SuggestedPillRow.test.tsx.snap
diff --git a/src/components/pill-selector-dropdown/__tests__/__snapshots__/defaultDropdownRenderer.test.js.snap b/src/components/pill-selector-dropdown/__tests__/__snapshots__/defaultDropdownRenderer.test.ts.snap
similarity index 100%
rename from src/components/pill-selector-dropdown/__tests__/__snapshots__/defaultDropdownRenderer.test.js.snap
rename to src/components/pill-selector-dropdown/__tests__/__snapshots__/defaultDropdownRenderer.test.ts.snap
diff --git a/src/components/pill-selector-dropdown/__tests__/defaultDropdownRenderer.test.js b/src/components/pill-selector-dropdown/__tests__/defaultDropdownRenderer.test.ts
similarity index 100%
rename from src/components/pill-selector-dropdown/__tests__/defaultDropdownRenderer.test.js
rename to src/components/pill-selector-dropdown/__tests__/defaultDropdownRenderer.test.ts
diff --git a/src/components/pill-selector-dropdown/__tests__/defaultInputParser.test.js b/src/components/pill-selector-dropdown/__tests__/defaultInputParser.test.ts
similarity index 97%
rename from src/components/pill-selector-dropdown/__tests__/defaultInputParser.test.js
rename to src/components/pill-selector-dropdown/__tests__/defaultInputParser.test.ts
index b73a9357bf..78aa4190e6 100644
--- a/src/components/pill-selector-dropdown/__tests__/defaultInputParser.test.js
+++ b/src/components/pill-selector-dropdown/__tests__/defaultInputParser.test.ts
@@ -1,7 +1,8 @@
 import defaultInputParser from '../defaultInputParser';
+import type { Option } from '../flowTypes';
 
 describe('components/pill-selector-dropdown/defaultInputParser', () => {
-    let options;
+    let options: Array<Option>;
 
     beforeEach(() => {
         options = [
@@ -45,7 +46,7 @@ describe('components/pill-selector-dropdown/defaultInputParser', () => {
     });
 
     test('should only map manual input tokens that are an exact, case insensitive match', () => {
-        let mappedOptions;
+        let mappedOptions: Array<Option>;
         let inputValue = 'Korea';
 
         mappedOptions = defaultInputParser(inputValue, options, []);
diff --git a/src/components/pill-selector-dropdown/defaultDropdownRenderer.js b/src/components/pill-selector-dropdown/defaultDropdownRenderer.js.flow
similarity index 100%
rename from src/components/pill-selector-dropdown/defaultDropdownRenderer.js
rename to src/components/pill-selector-dropdown/defaultDropdownRenderer.js.flow
diff --git a/src/components/pill-selector-dropdown/defaultDropdownRenderer.tsx b/src/components/pill-selector-dropdown/defaultDropdownRenderer.tsx
new file mode 100644
index 0000000000..953f1a2dc8
--- /dev/null
+++ b/src/components/pill-selector-dropdown/defaultDropdownRenderer.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+import DatalistItem from '../datalist-item';
+import type { Option } from './flowTypes';
+
+function defaultDropdownRenderer(options: Array<Option>): React.ReactNode {
+    return options.map(({ displayText, value }: Option) => <DatalistItem key={value}>{displayText}</DatalistItem>);
+}
+
+export default defaultDropdownRenderer;
diff --git a/src/components/pill-selector-dropdown/defaultInputParser.js b/src/components/pill-selector-dropdown/defaultInputParser.js.flow
similarity index 100%
rename from src/components/pill-selector-dropdown/defaultInputParser.js
rename to src/components/pill-selector-dropdown/defaultInputParser.js.flow
diff --git a/src/components/pill-selector-dropdown/defaultInputParser.ts b/src/components/pill-selector-dropdown/defaultInputParser.ts
new file mode 100644
index 0000000000..b66c47a4b7
--- /dev/null
+++ b/src/components/pill-selector-dropdown/defaultInputParser.ts
@@ -0,0 +1,43 @@
+import uniqBy from 'lodash/uniqBy';
+import escapeRegExp from 'lodash/escapeRegExp';
+
+import parseCSV from '../../utils/parseCSV';
+
+import type { Option } from './flowTypes';
+
+// Custom input parser for the PillSelectorDropdownField that automatically maps
+// a list of comma separated values to their respective Option objects. The parser
+// will try to find exact but case-insenstive matches using the option's displayText
+// property. If a token does not match displayText, the parser will also try to match
+// the string representation of the value property. This last match is useful for country
+// codes and other similar use cases.
+function defaultInputParser(inputValue: string, options: Array<Option>, selectedOptions: Array<Option>): Array<Option> {
+    let mappedOptions;
+    const inputTokens = parseCSV(inputValue);
+
+    mappedOptions = inputTokens.map((inputToken: string): Option => {
+        const trimmedInputToken = inputToken.replace(/\s/g, '');
+        const escapedInputToken = escapeRegExp(trimmedInputToken);
+        const regex = new RegExp(`^${escapedInputToken}$`, 'i');
+
+        const existingOption = options.find(
+            ({ displayText, value }: Option) =>
+                // Match name without whitespace or commas
+                regex.test((displayText || '').replace(/\s|,/g, '')) || regex.test(String(value)),
+        );
+        const mappedOption = existingOption || {
+            displayText: inputToken,
+            value: inputToken,
+        };
+        return mappedOption;
+    });
+    // Remove duplicate values
+    mappedOptions = uniqBy(mappedOptions, (mappedOption: Option) => mappedOption.value);
+    // Remove previously selected values
+    mappedOptions = mappedOptions.filter(
+        mappedOption => !selectedOptions.some(selectedOption => mappedOption.value === selectedOption.value),
+    );
+    return mappedOptions;
+}
+
+export default defaultInputParser;
diff --git a/src/components/pill-selector-dropdown/filters/__tests__/defaultDropdownFilter.test.js b/src/components/pill-selector-dropdown/filters/__tests__/defaultDropdownFilter.test.ts
similarity index 100%
rename from src/components/pill-selector-dropdown/filters/__tests__/defaultDropdownFilter.test.js
rename to src/components/pill-selector-dropdown/filters/__tests__/defaultDropdownFilter.test.ts
diff --git a/src/components/pill-selector-dropdown/filters/__tests__/waitForInputFilter.test.js b/src/components/pill-selector-dropdown/filters/__tests__/waitForInputFilter.test.ts
similarity index 99%
rename from src/components/pill-selector-dropdown/filters/__tests__/waitForInputFilter.test.js
rename to src/components/pill-selector-dropdown/filters/__tests__/waitForInputFilter.test.ts
index 6835c79016..8081eb5499 100644
--- a/src/components/pill-selector-dropdown/filters/__tests__/waitForInputFilter.test.js
+++ b/src/components/pill-selector-dropdown/filters/__tests__/waitForInputFilter.test.ts
@@ -1,4 +1,3 @@
-// @flow
 import waitForInputFilter from '../waitForInputFilter';
 
 describe('components/pill-selector-dropdown/filters/waitForInputFilter', () => {
diff --git a/src/components/pill-selector-dropdown/filters/defaultDropdownFilter.js b/src/components/pill-selector-dropdown/filters/defaultDropdownFilter.js.flow
similarity index 100%
rename from src/components/pill-selector-dropdown/filters/defaultDropdownFilter.js
rename to src/components/pill-selector-dropdown/filters/defaultDropdownFilter.js.flow
diff --git a/src/components/pill-selector-dropdown/filters/defaultDropdownFilter.ts b/src/components/pill-selector-dropdown/filters/defaultDropdownFilter.ts
new file mode 100644
index 0000000000..537272f95e
--- /dev/null
+++ b/src/components/pill-selector-dropdown/filters/defaultDropdownFilter.ts
@@ -0,0 +1,26 @@
+import isEqual from 'lodash/isEqual';
+import type { Option } from '../flowTypes';
+
+type Filter = (option: Option) => boolean;
+
+// Filter out anything that has already been selected to prevent duplicates
+function getDuplicatesFilter(selectedValues?: Array<Option> | null): Filter {
+    const values = Array.isArray(selectedValues) ? selectedValues : [];
+    return (option: Option) => !values.find(value => isEqual(value, option));
+}
+
+// Filter out anything that does not match the display text of the options
+function getTextFilter(inputText?: string): Filter {
+    const text = inputText || '';
+    return (option: Option) => (option.displayText || '').toLowerCase().includes(text.toLowerCase());
+}
+
+function defaultDropdownFilter(
+    options: Array<Option>,
+    selectedValues?: Array<Option> | null,
+    inputText?: string,
+): Array<Option> {
+    return options.filter(getDuplicatesFilter(selectedValues)).filter(getTextFilter(inputText));
+}
+
+export default defaultDropdownFilter;
diff --git a/src/components/pill-selector-dropdown/filters/waitForInputFilter.js b/src/components/pill-selector-dropdown/filters/waitForInputFilter.js.flow
similarity index 100%
rename from src/components/pill-selector-dropdown/filters/waitForInputFilter.js
rename to src/components/pill-selector-dropdown/filters/waitForInputFilter.js.flow
diff --git a/src/components/pill-selector-dropdown/filters/waitForInputFilter.ts b/src/components/pill-selector-dropdown/filters/waitForInputFilter.ts
new file mode 100644
index 0000000000..900abfac55
--- /dev/null
+++ b/src/components/pill-selector-dropdown/filters/waitForInputFilter.ts
@@ -0,0 +1,19 @@
+import defaultDropdownFilter from './defaultDropdownFilter';
+
+import type { Option } from '../flowTypes';
+
+// Same as default filter except that it won't show the selector dropdown until the user begins typing
+// (as opposed to showing it when the input is focused)
+function waitForInputFilter(
+    options: Array<Option>,
+    selectedValues?: Array<Option> | null,
+    inputText?: string,
+): Array<Option> {
+    if (inputText?.length) {
+        return defaultDropdownFilter(options, selectedValues, inputText);
+    }
+
+    return [];
+}
+
+export default waitForInputFilter;
diff --git a/src/components/pill-selector-dropdown/flowTypes.js b/src/components/pill-selector-dropdown/flowTypes.js.flow
similarity index 100%
rename from src/components/pill-selector-dropdown/flowTypes.js
rename to src/components/pill-selector-dropdown/flowTypes.js.flow
diff --git a/src/components/pill-selector-dropdown/flowTypes.ts b/src/components/pill-selector-dropdown/flowTypes.ts
new file mode 100644
index 0000000000..a00e55186b
--- /dev/null
+++ b/src/components/pill-selector-dropdown/flowTypes.ts
@@ -0,0 +1,45 @@
+import { List } from 'immutable';
+
+export type OptionValue = string | number | null;
+
+export type Option = {
+    displayText?: string;
+    hasWarning?: boolean;
+    id?: string | number;
+    isExternalUser?: boolean;
+    /** @deprecated Use displayText. Kept for backwards compatibility. */
+    text?: string;
+    type?: string;
+    value: OptionValue;
+};
+
+export type SelectedOptions = Array<Option> | List<Option>;
+
+export type SuggestedPill = {
+    email: string;
+    id: number;
+    name: string;
+    text?: string;
+    type?: string;
+    value?: string;
+};
+
+export type RoundOption = {
+    hasWarning?: boolean;
+    id?: number | string;
+    isExternalUser?: boolean;
+    type?: string;
+} & Option;
+
+export type SelectedRoundOptions = Array<RoundOption> | List<RoundOption>;
+
+export type SuggestedPills = Array<SuggestedPill>;
+
+export type SuggestedPillsFilter = keyof SuggestedPill;
+
+export type GetPillImageUrlData = {
+    id: string | number;
+    [key: string]: unknown;
+};
+
+export type GetPillImageUrl = (data: GetPillImageUrlData) => string | Promise<string | null | undefined>;
diff --git a/src/components/pill-selector-dropdown/index.js b/src/components/pill-selector-dropdown/index.js.flow
similarity index 100%
rename from src/components/pill-selector-dropdown/index.js
rename to src/components/pill-selector-dropdown/index.js.flow
diff --git a/src/components/pill-selector-dropdown/index.ts b/src/components/pill-selector-dropdown/index.ts
new file mode 100644
index 0000000000..d26d008b18
--- /dev/null
+++ b/src/components/pill-selector-dropdown/index.ts
@@ -0,0 +1,6 @@
+export { default } from './PillSelectorDropdown';
+export { default as PillSelectorDropdownField } from './PillSelectorDropdownField';
+export { default as defaultDropdownFilter } from './filters/defaultDropdownFilter';
+export { default as waitForInputFilter } from './filters/waitForInputFilter';
+export type { PillSelectorDropdownProps } from './PillSelectorDropdown';
+export type { PillSelectorDropdownFieldProps } from './PillSelectorDropdownField';
diff --git a/src/components/pill-selector-dropdown/types.ts b/src/components/pill-selector-dropdown/types.ts
index c83acbedf4..db1c36155d 100644
--- a/src/components/pill-selector-dropdown/types.ts
+++ b/src/components/pill-selector-dropdown/types.ts
@@ -1,8 +1 @@
-export interface SuggestedPillType {
-    email: string;
-    id: number;
-    name: string;
-    text?: string;
-    type?: string;
-    value?: string;
-}
+export type { SuggestedPill as SuggestedPillType } from './flowTypes';