baseui 10.10.0 → 10.12.0

package/select/select-component.js.flow

@@ -8,18 +8,18 @@ LICENSE file in the root directory of this source tree.
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
 
-import {getOverrides} from '../helpers/overrides.js';
+import { getOverrides } from '../helpers/overrides.js';
 import DeleteAlt from '../icon/delete-alt.js';
 import TriangleDownIcon from '../icon/triangle-down.js';
 import SearchIconComponent from '../icon/search.js';
-import {LocaleContext} from '../locale/index.js';
-import type {LocaleT} from '../locale/types.js';
-import {Popover, PLACEMENT} from '../popover/index.js';
-import {Spinner} from '../spinner/index.js';
-import {UIDConsumer} from 'react-uid';
+import { LocaleContext } from '../locale/index.js';
+import type { LocaleT } from '../locale/types.js';
+import { Popover, PLACEMENT } from '../popover/index.js';
+import { Spinner } from '../spinner/index.js';
+import { UIDConsumer } from 'react-uid';
 
 import AutosizeInput from './autosize-input.js';
-import {TYPE, STATE_CHANGE_TYPE} from './constants.js';
+import { TYPE, STATE_CHANGE_TYPE } from './constants.js';
 import defaultProps from './default-props.js';
 import SelectDropdown from './dropdown.js';
 import {
@@ -34,26 +34,20 @@ import {
   getLoadingIconStyles,
   StyledSearchIconContainer,
 } from './styled-components.js';
-import type {
-  PropsT,
-  SelectStateT,
-  ValueT,
-  OptionT,
-  ChangeActionT,
-} from './types.js';
-import {expandValue, normalizeOptions} from './utils/index.js';
+import type { PropsT, SelectStateT, ValueT, OptionT, ChangeActionT, ReactRefT } from './types.js';
+import { expandValue, normalizeOptions } from './utils/index.js';
 
 function Noop() {
   return null;
 }
 
-const isClick = event => event.type === 'click';
-const isLeftClick = event =>
+const isClick = (event) => event.type === 'click';
+const isLeftClick = (event) =>
   event.button !== null && event.button !== undefined && event.button === 0;
 
 const containsNode = (parent, child) => {
   if (__BROWSER__) {
-    // eslint-disable-next-line flowtype/no-weak-types
+    // flowlint-next-line unclear-type:off
     return child && parent && parent.contains((child: any));
   }
 };
@@ -72,17 +66,16 @@ export function isInteractive(rootTarget: EventTarget, rootElement: Element) {
   return false;
 }
 
-// eslint-disable-next-line flowtype/no-weak-types
 class Select extends React.Component<PropsT, SelectStateT> {
   static defaultProps = defaultProps;
 
   // anchor is a ref that refers to the outermost element rendered when the dropdown menu is not
   // open. This is required so that we can check if clicks are on/off the anchor element.
-  anchor: {current: HTMLElement | null} = React.createRef();
+  anchor: ReactRefT<HTMLElement> = React.createRef<HTMLElement>();
   // dropdown is a ref that refers to the popover element. This is required so that we can check if
   // clicks are on/off the dropdown element.
-  dropdown: {current: HTMLElement | null} = React.createRef();
-  input: React.ElementRef<*>;
+  dropdown: ReactRefT<HTMLElement> = React.createRef<HTMLElement>();
+  input: React.ElementRef<typeof HTMLInputElement>;
   // dragging is a flag to track whether a mobile device is currently scrolling versus clicking.
   dragging: boolean;
   // focusAfterClear is a flag to indicate that the dropdowm menu should open after a selected
@@ -125,11 +118,16 @@ class Select extends React.Component<PropsT, SelectStateT> {
     }
     this.isItMounted = true;
 
-    if (this.props.methodsRef) {
-      const {methodsRef} = this.props;
-
-      methodsRef.current = {
+    const { controlRef } = this.props;
+    if (controlRef && typeof controlRef !== 'function') {
+      controlRef.current = {
         setDropdownOpen: this.handleDropdownOpen.bind(this),
+        setInputValue: this.handleSetInputValue.bind(this),
+        setInputFocus: this.handleSetInputFocus.bind(this),
+        setInputBlur: this.handleSetInputBlur.bind(this),
+        // `focus` & `blur` below are for backwards compatibility and may be removed. Use setInputFocus and setInputBlur instead.
+        focus: this.handleSetInputFocus.bind(this),
+        blur: this.handleSetInputBlur.bind(this),
       };
     }
   }
@@ -171,6 +169,20 @@ class Select extends React.Component<PropsT, SelectStateT> {
     });
   }
 
+  handleSetInputValue(newInputValue: string) {
+    this.setState({
+      inputValue: newInputValue,
+    });
+  }
+
+  handleSetInputFocus() {
+    this.input.focus();
+  }
+
+  handleSetInputBlur() {
+    this.input.blur();
+  }
+
   // Handle touch outside on mobile to dismiss menu, ensures that the
   // touch target is not within the anchor DOM node.
   handleTouchOutside = (event: TouchEvent) => {
@@ -231,9 +243,9 @@ class Select extends React.Component<PropsT, SelectStateT> {
     if (!this.props.searchable) {
       this.focus();
       if (this.state.isOpen) {
-        this.setState({isOpen: false, isFocused: false});
+        this.setState({ isOpen: false, isFocused: false });
       } else {
-        this.setState({isOpen: true, isFocused: true});
+        this.setState({ isOpen: true, isFocused: true });
       }
 
       return;
@@ -252,7 +264,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
       // the provided text highlights rather than position's the cursor at the end of the input.
       if (this.input) this.input.value = '';
 
-      this.setState(prev => ({
+      this.setState((prev) => ({
         isOpen: !this.focusAfterClear && !prev.isOpen,
         isPseudoFocused: false,
       }));
@@ -360,7 +372,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
         }
         break;
       case 9: // tab
-        this.setState(prevState => ({
+        this.setState((prevState) => ({
           isPseudoFocused: false,
           isFocused: false,
           isOpen: false,
@@ -371,13 +383,9 @@ class Select extends React.Component<PropsT, SelectStateT> {
         }));
         break;
       case 27: // escape
-        if (
-          !this.state.isOpen &&
-          this.props.clearable &&
-          this.props.escapeClearsValue
-        ) {
+        if (!this.state.isOpen && this.props.clearable && this.props.escapeClearsValue) {
           this.clearValue(event);
-          this.setState({isFocused: false, isPseudoFocused: false});
+          this.setState({ isFocused: false, isPseudoFocused: false });
         }
         break;
       case 32: // space
@@ -386,31 +394,31 @@ class Select extends React.Component<PropsT, SelectStateT> {
         }
         event.preventDefault();
         if (!this.state.isOpen) {
-          this.setState({isOpen: true});
+          this.setState({ isOpen: true });
         }
         break;
       case 38: // up
         event.preventDefault();
         if (!this.state.isOpen) {
-          this.setState({isOpen: true});
+          this.setState({ isOpen: true });
         }
         break;
       case 40: // down
         event.preventDefault();
         if (!this.state.isOpen) {
-          this.setState({isOpen: true});
+          this.setState({ isOpen: true });
         }
         break;
       case 33: // page up
         event.preventDefault();
         if (!this.state.isOpen) {
-          this.setState({isOpen: true});
+          this.setState({ isOpen: true });
         }
         break;
       case 34: // page down
         event.preventDefault();
         if (!this.state.isOpen) {
-          this.setState({isOpen: true});
+          this.setState({ isOpen: true });
         }
         break;
       case 35: // end key
@@ -419,7 +427,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
         }
         event.preventDefault();
         if (!this.state.isOpen) {
-          this.setState({isOpen: true});
+          this.setState({ isOpen: true });
         }
         break;
       case 36: // home key
@@ -428,7 +436,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
         }
         event.preventDefault();
         if (!this.state.isOpen) {
-          this.setState({isOpen: true});
+          this.setState({ isOpen: true });
         }
         break;
       case 46: // delete
@@ -451,13 +459,13 @@ class Select extends React.Component<PropsT, SelectStateT> {
         $disabled: boolean,
         $isHighlighted: boolean,
       },
-    },
+    }
   ): React.Node =>
     option.isCreatable
       ? `${locale.select.create} “${option[this.props.labelKey]}”`
       : option[this.props.labelKey];
 
-  getValueLabel = ({option}: {option: OptionT}): React.Node => {
+  getValueLabel = ({ option }: { option: OptionT }): React.Node => {
     return option[this.props.labelKey];
   };
 
@@ -469,7 +477,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
       if (value === null || value === undefined) return [];
       value = [value];
     }
-    return value.map(value => expandValue(value, this.props));
+    return value.map((value) => expandValue(value, this.props));
   }
 
   setValue(value: ValueT, option: ?OptionT, type: ChangeActionT) {
@@ -484,33 +492,30 @@ class Select extends React.Component<PropsT, SelectStateT> {
 
   handleActiveDescendantChange = (id?: string) => {
     if (id) {
-      this.setState({activeDescendant: id});
+      this.setState({ activeDescendant: id });
     } else {
-      this.setState({activeDescendant: null});
+      this.setState({ activeDescendant: null });
     }
   };
 
-  handleInputRef = (input: React.ElementRef<*>) => {
+  // This method is to preserve backwards compatibility for users using controlRef to directly
+  // access the input element. This capability is not documented, and may be removed in the future.
+  //flowlint-next-line unclear-type:off
+  handleInputRef = (input: React.ElementRef<any>) => {
     this.input = input;
-    if (this.props.controlRef) {
-      if (typeof this.props.controlRef === 'function') {
-        this.props.controlRef(input);
-      } else {
-        this.props.controlRef.current = input;
-      }
+    if (this.props.controlRef && typeof this.props.controlRef === 'function') {
+      this.props.controlRef(input);
     }
   };
 
-  selectValue = ({item}: {item: OptionT}) => {
+  selectValue = ({ item }: { item: OptionT }) => {
     if (item.disabled) {
       return;
     }
     this.justSelected = true;
     // NOTE: we add/set the value in a callback to make sure the
     // input value is empty to avoid styling issues in Chrome
-    const updatedValue = this.props.onSelectResetsInput
-      ? ''
-      : this.state.inputValue;
+    const updatedValue = this.props.onSelectResetsInput ? '' : this.state.inputValue;
     if (this.props.multi) {
       this.setState(
         {
@@ -519,16 +524,12 @@ class Select extends React.Component<PropsT, SelectStateT> {
         },
         () => {
           const valueArray = this.props.value;
-          if (
-            valueArray.some(
-              i => i[this.props.valueKey] === item[this.props.valueKey],
-            )
-          ) {
+          if (valueArray.some((i) => i[this.props.valueKey] === item[this.props.valueKey])) {
             this.removeValue(item);
           } else {
             this.addValue(item);
           }
-        },
+        }
       );
     } else {
       this.focus();
@@ -541,7 +542,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
         },
         () => {
           this.setValue([item], item, STATE_CHANGE_TYPE.select);
-        },
+        }
       );
     }
   };
@@ -558,12 +559,9 @@ class Select extends React.Component<PropsT, SelectStateT> {
     }
     const valueLength = this.props.value.length;
     const renderLabel = this.props.getValueLabel || this.getValueLabel;
-    const labelForInput = renderLabel({option: item, index: valueLength - 1});
+    const labelForInput = renderLabel({ option: item, index: valueLength - 1 });
     // label might not be a string, it might be a Node of another kind.
-    if (
-      !this.props.backspaceClearsInputValue &&
-      typeof labelForInput === 'string'
-    ) {
+    if (!this.props.backspaceClearsInputValue && typeof labelForInput === 'string') {
       const remainingInput = labelForInput.slice(0, -1);
       this.setState({
         inputValue: remainingInput,
@@ -585,11 +583,9 @@ class Select extends React.Component<PropsT, SelectStateT> {
   removeValue = (item: OptionT) => {
     const valueArray = [...this.props.value];
     this.setValue(
-      valueArray.filter(
-        i => i[this.props.valueKey] !== item[this.props.valueKey],
-      ),
+      valueArray.filter((i) => i[this.props.valueKey] !== item[this.props.valueKey]),
       item,
-      STATE_CHANGE_TYPE.remove,
+      STATE_CHANGE_TYPE.remove
     );
     this.focus();
   };
@@ -598,9 +594,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
     if (isClick(event) && !isLeftClick(event)) return;
 
     if (this.props.value) {
-      const resetValue = this.props.value.filter(
-        item => item.clearableValue === false,
-      );
+      const resetValue = this.props.value.filter((item) => item.clearableValue === false);
       this.setValue(resetValue, null, STATE_CHANGE_TYPE.clear);
     }
     this.setState({
@@ -613,10 +607,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
   };
 
   shouldShowPlaceholder = () => {
-    return !(
-      this.state.inputValue ||
-      (this.props.value && this.props.value.length)
-    );
+    return !(this.state.inputValue || (this.props.value && this.props.value.length));
   };
 
   shouldShowValue = () => {
@@ -626,15 +617,15 @@ class Select extends React.Component<PropsT, SelectStateT> {
   renderLoading() {
     if (!this.props.isLoading) return;
     const sharedProps = this.getSharedProps();
-    const {overrides = {}} = this.props;
+    const { overrides = {} } = this.props;
     const [LoadingIndicator, loadingIndicatorProps] = getOverrides(
       overrides.LoadingIndicator,
-      Spinner,
+      Spinner
     );
     return (
       <LoadingIndicator
         size={16}
-        overrides={{Svg: {style: getLoadingIconStyles}}}
+        overrides={{ Svg: { style: getLoadingIconStyles } }}
         $silenceV11DeprecationWarning
         {...sharedProps}
         {...loadingIndicatorProps}
@@ -645,9 +636,9 @@ class Select extends React.Component<PropsT, SelectStateT> {
   renderValue(
     valueArray: ValueT,
     isOpen: boolean,
-    locale: LocaleT,
+    locale: LocaleT
   ): ?React.Node | Array<?React.Node> {
-    const {overrides = {}} = this.props;
+    const { overrides = {} } = this.props;
     const sharedProps = this.getSharedProps();
     const renderLabel = this.props.getValueLabel || this.getValueLabel;
     const Value = this.props.valueComponent || Noop;
@@ -656,19 +647,18 @@ class Select extends React.Component<PropsT, SelectStateT> {
     }
     if (this.props.multi) {
       return valueArray.map((value, i) => {
-        const disabled =
-          sharedProps.$disabled || value.clearableValue === false;
+        const disabled = sharedProps.$disabled || value.clearableValue === false;
         return (
           <Value
             value={value}
             key={`value-${i}-${value[this.props.valueKey]}`}
             removeValue={() => this.removeValue(value)}
             disabled={disabled}
-            overrides={{Tag: overrides.Tag, MultiValue: overrides.MultiValue}}
+            overrides={{ Tag: overrides.Tag, MultiValue: overrides.MultiValue }}
             {...sharedProps}
             $disabled={disabled}
           >
-            {renderLabel({option: value, index: i})}
+            {renderLabel({ option: value, index: i })}
           </Value>
         );
       });
@@ -677,25 +667,25 @@ class Select extends React.Component<PropsT, SelectStateT> {
         <Value
           value={valueArray[0][this.props.valueKey]}
           disabled={this.props.disabled}
-          overrides={{SingleValue: overrides.SingleValue}}
+          overrides={{ SingleValue: overrides.SingleValue }}
           {...sharedProps}
         >
-          {renderLabel({option: valueArray[0]})}
+          {renderLabel({ option: valueArray[0] })}
         </Value>
       );
     }
   }
 
   renderInput(listboxId: string) {
-    const {overrides = {}} = this.props;
+    const { overrides = {} } = this.props;
     const [InputContainer, inputContainerProps] = getOverrides(
       overrides.InputContainer,
-      StyledInputContainer,
+      StyledInputContainer
     );
     const sharedProps = this.getSharedProps();
     const isOpen = this.state.isOpen;
     const selected = this.getValueArray(this.props.value)
-      .map(v => v[this.props.labelKey])
+      .map((v) => v[this.props.labelKey])
       .join(', ');
     const selectedLabel = selected.length ? `Selected ${selected}. ` : '';
     const label = `${selectedLabel}${this.props['aria-label'] || ''}`;
@@ -718,6 +708,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
           {...sharedProps}
           {...inputContainerProps}
         >
+          {/* $FlowExpectedError[cannot-spread-inexact] */}
           <input
             aria-hidden
             id={this.props.id || null}
@@ -732,7 +723,8 @@ class Select extends React.Component<PropsT, SelectStateT> {
             tabIndex={-1}
             {...(overrides.Input
               ? overrides.Input.props
-                ? overrides.Input.props
+                ? // $FlowExpectedError[not-an-object]
+                  overrides.Input.props
                 : {}
               : {})}
           />
@@ -759,7 +751,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
           inputRef={this.handleInputRef}
           onChange={this.handleInputChange}
           onFocus={this.handleInputFocus}
-          overrides={{Input: overrides.Input}}
+          overrides={{ Input: overrides.Input }}
           required={(this.props.required && !this.props.value.length) || null}
           role="combobox"
           value={this.state.inputValue}
@@ -772,24 +764,16 @@ class Select extends React.Component<PropsT, SelectStateT> {
 
   renderClear() {
     const isValueEntered = Boolean(
-      (this.props.value && this.props.value.length) || this.state.inputValue,
+      (this.props.value && this.props.value.length) || this.state.inputValue
     );
 
-    if (
-      !this.props.clearable ||
-      this.props.disabled ||
-      this.props.isLoading ||
-      !isValueEntered
-    ) {
+    if (!this.props.clearable || this.props.disabled || this.props.isLoading || !isValueEntered) {
       return;
     }
 
     const sharedProps = this.getSharedProps();
-    const {overrides = {}} = this.props;
-    const [ClearIcon, clearIconProps] = getOverrides(
-      overrides.ClearIcon,
-      DeleteAlt,
-    );
+    const { overrides = {} } = this.props;
+    const [ClearIcon, clearIconProps] = getOverrides(overrides.ClearIcon, DeleteAlt);
     const ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
 
     return (
@@ -802,13 +786,9 @@ class Select extends React.Component<PropsT, SelectStateT> {
           Svg: {
             component: StyledClearIcon,
             props:
-              overrides.ClearIcon && overrides.ClearIcon.props
-                ? overrides.ClearIcon.props
-                : {},
+              overrides.ClearIcon && overrides.ClearIcon.props ? overrides.ClearIcon.props : {},
             style:
-              overrides.ClearIcon && overrides.ClearIcon.style
-                ? overrides.ClearIcon.style
-                : {},
+              overrides.ClearIcon && overrides.ClearIcon.style ? overrides.ClearIcon.style : {},
           },
         }}
         {...sharedProps}
@@ -821,11 +801,8 @@ class Select extends React.Component<PropsT, SelectStateT> {
     if (this.props.type !== TYPE.select) {
       return null;
     }
-    const {overrides = {}} = this.props;
-    const [SelectArrow, selectArrowProps] = getOverrides(
-      overrides.SelectArrow,
-      TriangleDownIcon,
-    );
+    const { overrides = {} } = this.props;
+    const [SelectArrow, selectArrowProps] = getOverrides(overrides.SelectArrow, TriangleDownIcon);
     const sharedProps = this.getSharedProps();
     return (
       <SelectArrow
@@ -854,24 +831,17 @@ class Select extends React.Component<PropsT, SelectStateT> {
     if (this.props.type !== TYPE.search) {
       return null;
     }
-    const {overrides = {}} = this.props;
+    const { overrides = {} } = this.props;
     const [SearchIconContainer, searchIconContainerProps] = getOverrides(
       overrides.SearchIconContainer,
-      StyledSearchIconContainer,
-    );
-    const [SearchIcon, searchIconProps] = getOverrides(
-      overrides.SearchIcon,
-      SearchIconComponent,
+      StyledSearchIconContainer
     );
+    const [SearchIcon, searchIconProps] = getOverrides(overrides.SearchIcon, SearchIconComponent);
     const sharedProps = this.getSharedProps();
 
     return (
       // TODO(v11): remove searchIconProps from SearchIconContainer
-      <SearchIconContainer
-        {...sharedProps}
-        {...searchIconProps}
-        {...searchIconContainerProps}
-      >
+      <SearchIconContainer {...sharedProps} {...searchIconProps} {...searchIconContainerProps}>
         <SearchIcon size={16} title={'search'} {...searchIconProps} />
       </SearchIconContainer>
     );
@@ -881,22 +851,15 @@ class Select extends React.Component<PropsT, SelectStateT> {
     const filterValue = this.state.inputValue.trim();
     // apply filter function
     if (this.props.filterOptions) {
-      this.options = this.props.filterOptions(
-        this.options,
-        filterValue,
-        excludeOptions,
-        {
-          valueKey: this.props.valueKey,
-          labelKey: this.props.labelKey,
-        },
-      );
+      this.options = this.props.filterOptions(this.options, filterValue, excludeOptions, {
+        valueKey: this.props.valueKey,
+        labelKey: this.props.labelKey,
+      });
     }
     // can user create a new option + there's no exact match already
     const filterDoesNotMatchOption = this.props.ignoreCase
-      ? opt =>
-          opt[this.props.labelKey].toLowerCase() !==
-          filterValue.toLowerCase().trim()
-      : opt => opt[this.props.labelKey] !== filterValue.trim();
+      ? (opt) => opt[this.props.labelKey].toLowerCase() !== filterValue.toLowerCase().trim()
+      : (opt) => opt[this.props.labelKey] !== filterValue.trim();
     if (
       filterValue &&
       this.props.creatable &&
@@ -928,7 +891,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
       type,
       value,
     } = this.props;
-    const {isOpen, isFocused, isPseudoFocused} = this.state;
+    const { isOpen, isFocused, isPseudoFocused } = this.state;
     return {
       $clearable: clearable,
       $creatable: creatable,
@@ -951,20 +914,13 @@ class Select extends React.Component<PropsT, SelectStateT> {
   render() {
     this.options = normalizeOptions(this.props.options);
 
-    const {
-      overrides = {},
-      type,
-      multi,
-      noResultsMsg,
-      value,
-      filterOutSelected,
-    } = this.props;
+    const { overrides = {}, type, multi, noResultsMsg, value, filterOutSelected } = this.props;
 
     if (__DEV__) {
       // value may be nullish, only warn if value is defined
       if (value && !Array.isArray(value)) {
         console.warn(
-          'The Select component expects an array as the value prop. For more information, please visit the docs at https://baseweb.design/components/select/',
+          'The Select component expects an array as the value prop. For more information, please visit the docs at https://baseweb.design/components/select/'
         );
       }
     }
@@ -972,30 +928,22 @@ class Select extends React.Component<PropsT, SelectStateT> {
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
     const [ControlContainer, controlContainerProps] = getOverrides(
       overrides.ControlContainer,
-      StyledControlContainer,
+      StyledControlContainer
     );
     const [ValueContainer, valueContainerProps] = getOverrides(
       overrides.ValueContainer,
-      StyledValueContainer,
+      StyledValueContainer
     );
     const [IconsContainer, iconsContainerProps] = getOverrides(
       overrides.IconsContainer,
-      StyledIconsContainer,
-    );
-    const [PopoverOverride, popoverProps] = getOverrides(
-      overrides.Popover,
-      Popover,
-    );
-    const [Placeholder, placeholderProps] = getOverrides(
-      overrides.Placeholder,
-      StyledPlaceholder,
+      StyledIconsContainer
     );
+    const [PopoverOverride, popoverProps] = getOverrides(overrides.Popover, Popover);
+    const [Placeholder, placeholderProps] = getOverrides(overrides.Placeholder, StyledPlaceholder);
     const sharedProps = this.getSharedProps();
 
     const valueArray = this.getValueArray(value);
-    const options = this.filterOptions(
-      multi && filterOutSelected ? valueArray : null,
-    );
+    const options = this.filterOptions(multi && filterOutSelected ? valueArray : null);
     const isOpen = this.state.isOpen;
     sharedProps.$isOpen = isOpen;
 
@@ -1003,22 +951,22 @@ class Select extends React.Component<PropsT, SelectStateT> {
       if (this.props.error && this.props.positive) {
         // eslint-disable-next-line no-console
         console.warn(
-          `[Select] \`error\` and \`positive\` are both set to \`true\`. \`error\` will take precedence but this may not be what you want.`,
+          `[Select] \`error\` and \`positive\` are both set to \`true\`. \`error\` will take precedence but this may not be what you want.`
         );
       }
     }
 
     return (
       <UIDConsumer>
-        {listboxId => (
+        {(listboxId) => (
           <LocaleContext.Consumer>
-            {locale => (
+            {(locale) => (
               <PopoverOverride
                 // Popover does not provide ability to forward refs through, and if we were to simply
                 // apply the ref to the Root component below it would be overwritten before the popover
                 // renders it. Using this strategy, we will get a ref to the popover, then reuse its
                 // anchorRef so we can check if clicks are on the select component or not.
-                // eslint-disable-next-line flowtype/no-weak-types
+                // flowlint-next-line unclear-type:off
                 innerRef={(ref: any) => {
                   if (!ref) return;
                   this.anchor = ref.anchorRef;
@@ -1034,8 +982,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
                     error: this.props.error,
                     positive: this.props.positive,
                     getOptionLabel:
-                      this.props.getOptionLabel ||
-                      this.getOptionLabel.bind(this, locale),
+                      this.props.getOptionLabel || this.getOptionLabel.bind(this, locale),
                     id: listboxId,
                     isLoading: this.props.isLoading,
                     labelKey: this.props.labelKey,
@@ -1052,18 +999,11 @@ class Select extends React.Component<PropsT, SelectStateT> {
                     type,
                     value: valueArray,
                     valueKey: this.props.valueKey,
-                    width: this.anchor.current
-                      ? this.anchor.current.clientWidth
-                      : null,
+                    width: this.anchor.current ? this.anchor.current.clientWidth : null,
                     keyboardControlNode: this.anchor,
                   };
 
-                  return (
-                    <SelectDropdown
-                      innerRef={this.dropdown}
-                      {...dropdownProps}
-                    />
-                  );
+                  return <SelectDropdown innerRef={this.dropdown} {...dropdownProps} />;
                 }}
                 placement={PLACEMENT.bottom}
                 {...popoverProps}