refactor(select-field): migrate SelectField from Flow to TypeScript

src/components/select-field/MultiSelectField.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { injectIntl } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+
+import type { SelectOptionProp } from './props';
+import BaseSelectField from './BaseSelectField';
+import type { BaseSelectFieldProps } from './BaseSelectField';
+import CLEAR from './constants';
+import messages from './messages';
+
+export interface MultiSelectFieldProps
+    extends Partial<Omit<BaseSelectFieldProps, 'intl' | 'multiple' | 'onChange' | 'options'>> {
+    /** Intl object provided by injectIntl */
+    intl: IntlShape;
+    /** Function will be called with an array of all selected options after user selects a new option */
+    onChange: (selectedOptions: Array<SelectOptionProp>) => void;
+    /** List of options (displayText, value) */
+    options: Array<SelectOptionProp>;
+    /** Boolean to determine whether or not to show the clear option */
+    shouldShowClearOption?: boolean;
+    /** Whether to show the search field */
+    shouldShowSearchInput?: boolean;
+}
+
+const optionsWithClearOption = (
+    options: Array<SelectOptionProp>,
+    shouldShowClearOption: boolean | undefined,
+    intl: IntlShape,
+) => {
+    return shouldShowClearOption
+        ? [
+              {
+                  value: CLEAR,
+                  displayText: intl.formatMessage(messages.clearAll),
+              },
+              ...options,
+          ]
+        : options;
+};
+
+const MultiSelectField = ({ intl, options, shouldShowClearOption, ...rest }: MultiSelectFieldProps) => (
+    <BaseSelectField
+        {...rest}
+        shouldShowClearOption={shouldShowClearOption}
+        options={optionsWithClearOption(options, shouldShowClearOption, intl)}
+        multiple
+    />
+);
+
+export { MultiSelectField as MultiSelectFieldBase };
+export default injectIntl(MultiSelectField);

src/components/select-field/SelectField.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import getProp from 'lodash/get';
+import type { FieldProps } from 'formik';
+
+import SingleSelectPrimitive from './SingleSelectField';
+import MultiSelectPrimitive from './MultiSelectField';
+
+import type { BaseSelectFieldProps } from './BaseSelectField';
+import type { SelectOptionValueProp, SelectOptionProp } from './props';
+
+export interface SelectFieldProps
+    extends FieldProps,
+        Partial<Omit<BaseSelectFieldProps, 'error' | 'intl' | 'multiple' | 'onChange' | 'options' | 'selectedValues'>> {
+    /** Whether more than one option can be selected */
+    multiple?: boolean;
+    /** List of options (displayText, value) */
+    options: Array<SelectOptionProp>;
+}
+
+const createFakeSyntheticEvent = (name: string, value: SelectOptionValueProp | Array<SelectOptionValueProp>) => ({
+    currentTarget: { name, value },
+    target: { name, value },
+});
+
+function onSelect(
+    name: string,
+    onChange: (event: ReturnType<typeof createFakeSyntheticEvent>) => void,
+    options: { value: SelectOptionValueProp } | Array<{ value: SelectOptionValueProp }>,
+) {
+    const value = Array.isArray(options) ? options.map(option => option.value) : options.value;
+    onChange(createFakeSyntheticEvent(name, value));
+}
+
+const SelectField = ({ field, form, multiple, ...rest }: SelectFieldProps) => {
+    const { onChange, name, value } = field;
+    const { errors, touched } = form;
+    const isTouched = getProp(touched, name);
+    const error = (isTouched ? getProp(errors, name) : null) as React.ReactNode;
+
+    if (multiple) {
+        return (
+            <MultiSelectPrimitive
+                {...field}
+                {...rest}
+                error={error}
+                onChange={options => onSelect(name, onChange, options)}
+                options={rest.options}
+                selectedValues={value || []}
+            />
+        );
+    }
+
+    return (
+        <SingleSelectPrimitive
+            {...field}
+            {...rest}
+            error={error}
+            onChange={options => onSelect(name, onChange, options)}
+            options={rest.options}
+            selectedValue={value || null}
+        />
+    );
+};
+
+export { onSelect };
+export default SelectField;

src/components/select-field/SelectFieldDropdown.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import type { SelectOptionValueProp } from './props';
+import type { PopperChildrenProps } from '../popper/props';
+
+export const OVERLAY_SCROLLABLE_CLASS = 'bdl-SelectField-overlay--scrollable';
+
+export interface SelectFieldDropdownProps extends PopperChildrenProps {
+    /** Dropdown list content */
+    children: React.ReactNode;
+    /** Ref forwarded to the dropdown list element */
+    innerRef?: React.Ref<HTMLUListElement>;
+    /** Whether the dropdown list is scrollable */
+    isScrollable?: boolean;
+    /** Whether more than one option can be selected */
+    multiple?: boolean;
+    /** ID applied to the listbox for aria-owns */
+    selectFieldID: string;
+    /** Currently selected option values */
+    selectedValues: Array<SelectOptionValueProp>;
+}
+
+class SelectFieldDropdown extends React.Component<SelectFieldDropdownProps> {
+    componentDidUpdate({ selectedValues: prevSelectedValues }: SelectFieldDropdownProps) {
+        const { multiple, scheduleUpdate, selectedValues } = this.props;
+        if (multiple && scheduleUpdate && prevSelectedValues !== selectedValues) {
+            scheduleUpdate();
+        }
+    }
+
+    render() {
+        const { children, innerRef, style, placement, isScrollable, multiple, selectFieldID } = this.props;
+
+        const listboxProps: { 'aria-multiselectable'?: boolean } = {};
+        if (multiple) {
+            listboxProps['aria-multiselectable'] = true;
+        }
+
+        return (
+            <ul
+                ref={innerRef}
+                style={style}
+                data-placement={placement}
+                className={classNames('bdl-SelectFieldDropdown', 'overlay', {
+                    [OVERLAY_SCROLLABLE_CLASS]: isScrollable,
+                })}
+                id={selectFieldID}
+                role="listbox"
+                // preventDefault on mousedown so blur doesn't happen before click
+                onMouseDown={event => event.preventDefault()}
+                {...listboxProps}
+            >
+                {children}
+            </ul>
+        );
+    }
+}
+
+export default React.forwardRef<HTMLUListElement, SelectFieldDropdownProps>((props, ref) => (
+    <SelectFieldDropdown {...props} innerRef={ref} />
+));

src/components/select-field/SingleSelectField.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import omit from 'lodash/omit';
+import { injectIntl } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+
+import BaseSelectField from './BaseSelectField';
+import type { BaseSelectFieldProps } from './BaseSelectField';
+import type { SelectOptionValueProp, SelectOptionProp } from './props';
+import CLEAR from './constants';
+import messages from './messages';
+
+export interface SingleSelectFieldProps
+    extends Partial<
+        Omit<BaseSelectFieldProps, 'intl' | 'multiple' | 'onChange' | 'options' | 'placeholder' | 'selectedValues'>
+    > {
+    /** Multi-select specific prop that is stripped before forwarding to BaseSelectField */
+    defaultValue?: SelectOptionValueProp;
+    /** The type of the field */
+    fieldType?: string;
+    /** Intl object provided by injectIntl */
+    intl: IntlShape;
+    /** The select field is disabled if true */
+    isDisabled?: boolean;
+    /** The select field overlay (dropdown) will have a scrollbar and max-height if true */
+    isScrollable?: boolean;
+    /** Multi-select specific prop that is stripped before forwarding to BaseSelectField */
+    multiple?: boolean;
+    /** Function will be called with the selected option after user selects a new option */
+    onChange: (option: SelectOptionProp | { value: null }, fieldType?: string) => void;
+    /** List of options (displayText, value) */
+    options: Array<SelectOptionProp>;
+    /** The placeholder text for the field */
+    placeholder?: string | React.ReactNode;
+    /** The currently selected option value */
+    selectedValue?: SelectOptionValueProp;
+    /** Whether to show the Clear All option */
+    shouldShowClearOption?: boolean;
+}
+
+class SingleSelectField extends React.Component<SingleSelectFieldProps> {
+    handleChange = (selectedOptions: Array<SelectOptionProp>) => {
+        const { onChange, fieldType } = this.props;
+
+        // There should only ever be 1 selected item
+        if (onChange && selectedOptions.length === 1) {
+            onChange(selectedOptions[0], fieldType);
+        } else if (selectedOptions.length === 0) {
+            onChange({ value: null });
+        }
+    };
+
+    render() {
+        const { intl, isDisabled, selectedValue, placeholder, shouldShowClearOption, options, ...rest } = this.props;
+
+        // @TODO: Invariant testing
+        // 1) selectedValue is required to be contained in the options
+        // 2) # of options should be non-zero
+
+        // Make sure to omit passed props that could be interpreted incorrectly by the base component
+        const selectFieldProps = omit(rest, ['defaultValue', 'multiple', 'onChange']) as Partial<BaseSelectFieldProps>;
+
+        // If selectedValue is passed in, map it to the multi selected equivalent
+        const isFieldSelected = selectedValue !== null;
+        selectFieldProps.selectedValues = !isFieldSelected ? [] : [selectedValue];
+
+        const optionsWithClearOption = shouldShowClearOption
+            ? [
+                  {
+                      value: CLEAR,
+                      displayText: intl.formatMessage(messages.clearAll),
+                  },
+                  ...options,
+              ]
+            : options;
+
+        return (
+            <BaseSelectField
+                className={!isFieldSelected && placeholder ? 'placeholder' : ''}
+                isDisabled={isDisabled}
+                onChange={this.handleChange}
+                placeholder={placeholder}
+                options={optionsWithClearOption}
+                shouldShowClearOption={shouldShowClearOption}
+                {...selectFieldProps}
+            />
+        );
+    }
+}
+
+export { SingleSelectField as SingleSelectFieldBase };
+export default injectIntl(SingleSelectField);