baseui 10.9.2 → 10.11.1

package/rating/emoticon-rating.js.flow

@@ -8,61 +8,50 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import type {EmoticonRatingPropsT, RatingStateT} from './types.js';
-import {StyledRoot, StyledEmoticon} from './styled-components.js';
-import {getOverrides} from '../helpers/overrides.js';
-import {ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT} from './utils.js';
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
-
-class EmoticonRating extends React.Component<
-  EmoticonRatingPropsT,
-  RatingStateT,
-> {
+import type { EmoticonRatingPropsT, RatingStateT } from './types.js';
+import { StyledRoot, StyledEmoticon } from './styled-components.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT } from './utils.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
+
+class EmoticonRating extends React.Component<EmoticonRatingPropsT, RatingStateT> {
   static defaultProps = {
     overrides: {},
     readOnly: false,
   };
 
-  state = {isFocusVisible: false, previewIndex: undefined};
+  state = { isFocusVisible: false, previewIndex: undefined };
 
   selectItem = (value: number) => {
-    const {onChange} = this.props;
+    const { onChange } = this.props;
 
-    onChange && onChange({value});
-    this.setState({previewIndex: undefined});
+    onChange && onChange({ value });
+    this.setState({ previewIndex: undefined });
   };
 
   updatePreview = (previewIndex?: number) => {
-    this.setState({previewIndex});
+    this.setState({ previewIndex });
   };
 
   handleFocus = (event: SyntheticEvent<>) => {
     if (isFocusVisible(event)) {
-      this.setState({isFocusVisible: true});
+      this.setState({ isFocusVisible: true });
     }
   };
 
   handleBlur = (event: SyntheticEvent<>) => {
     if (this.state.isFocusVisible !== false) {
-      this.setState({isFocusVisible: false});
+      this.setState({ isFocusVisible: false });
     }
   };
 
   renderRatingContents = () => {
-    const {
-      overrides = {},
-      value = -1,
-      size = 44,
-      readOnly = false,
-    } = this.props;
-    const {previewIndex} = this.state;
-
-    const [Emoticon, emoticonProps] = getOverrides(
-      overrides.Item,
-      StyledEmoticon,
-    );
+    const { overrides = {}, value = -1, size = 44, readOnly = false } = this.props;
+    const { previewIndex } = this.state;
+
+    const [Emoticon, emoticonProps] = getOverrides(overrides.Item, StyledEmoticon);
     const ratings = [];
-    const refs = [{current: null}];
+    const refs = [{ current: null }];
     for (let x = 1; x <= 5; x++) {
       const isFocusable = x === value || (value < 1 && x === 1);
       const starRef = React.createRef<HTMLLIElement>();
@@ -72,7 +61,7 @@ class EmoticonRating extends React.Component<
         <Emoticon
           key={x}
           role="radio"
-          // eslint-disable-next-line flowtype/no-weak-types
+          // flowlint-next-line unclear-type:off
           ref={(starRef: any)}
           tabIndex={isFocusable ? '0' : '-1'}
           aria-setsize={5}
@@ -81,9 +70,7 @@ class EmoticonRating extends React.Component<
           aria-disabled={readOnly}
           $size={size}
           $index={x}
-          $isActive={
-            previewIndex !== undefined ? x === previewIndex : x === value
-          }
+          $isActive={previewIndex !== undefined ? x === previewIndex : x === value}
           $isSelected={x === previewIndex}
           $isFocusVisible={this.state.isFocusVisible && isFocusable}
           $isReadOnly={readOnly}
@@ -93,7 +80,7 @@ class EmoticonRating extends React.Component<
             }
             this.selectItem(x);
           }}
-          onKeyDown={e => {
+          onKeyDown={(e) => {
             if (readOnly) {
               return;
             }
@@ -120,7 +107,7 @@ class EmoticonRating extends React.Component<
           onFocus={forkFocus(emoticonProps, this.handleFocus)}
           onBlur={forkBlur(emoticonProps, this.handleBlur)}
           {...emoticonProps}
-        />,
+        />
       );
     }
 
@@ -128,16 +115,15 @@ class EmoticonRating extends React.Component<
   };
 
   render() {
-    const {overrides = {}} = this.props;
+    const { overrides = {} } = this.props;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
 
     return (
       <Root
         data-baseweb="emoticon-rating"
         role="radiogroup"
-        onBlur={e => {
-          if (!e.currentTarget.contains(e.relatedTarget))
-            this.updatePreview(undefined);
+        onBlur={(e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) this.updatePreview(undefined);
         }}
         onMouseLeave={() => this.updatePreview(undefined)}
         {...rootProps}

package/rating/index.js.flow

@@ -7,8 +7,8 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-export {default as StarRating} from './star-rating.js';
-export {default as EmoticonRating} from './emoticon-rating.js';
+export { default as StarRating } from './star-rating.js';
+export { default as EmoticonRating } from './emoticon-rating.js';
 export * from './styled-components.js';
 export type * from './types.js';
 

package/rating/star-rating.js

@@ -141,7 +141,7 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
         ratings.push( /*#__PURE__*/React.createElement(Star, _extends({
           key: x,
           role: "radio",
-          title: "rating" // eslint-disable-next-line flowtype/no-weak-types
+          title: "rating" // flowlint-next-line unclear-type:off
           ,
           ref: starRef,
           tabIndex: isFocusable ? '0' : '-1',

package/rating/star-rating.js.flow

@@ -8,11 +8,11 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import type {StarRatingPropsT, RatingStateT} from './types.js';
-import {StyledRoot, StyledStar} from './styled-components.js';
-import {getOverrides} from '../helpers/overrides.js';
-import {ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT} from './utils.js';
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
+import type { StarRatingPropsT, RatingStateT } from './types.js';
+import { StyledRoot, StyledStar } from './styled-components.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT } from './utils.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
 class StarRating extends React.Component<StarRatingPropsT, RatingStateT> {
   static defaultProps = {
@@ -21,44 +21,38 @@ class StarRating extends React.Component<StarRatingPropsT, RatingStateT> {
     readOnly: false,
   };
 
-  state = {isFocusVisible: false, previewIndex: undefined};
+  state = { isFocusVisible: false, previewIndex: undefined };
 
   selectItem = (value: number) => {
-    const {onChange} = this.props;
+    const { onChange } = this.props;
 
-    onChange && onChange({value});
-    this.setState({previewIndex: undefined});
+    onChange && onChange({ value });
+    this.setState({ previewIndex: undefined });
   };
 
   updatePreview = (previewIndex?: number) => {
-    this.setState({previewIndex});
+    this.setState({ previewIndex });
   };
 
   handleFocus = (event: SyntheticEvent<>) => {
     if (isFocusVisible(event)) {
-      this.setState({isFocusVisible: true});
+      this.setState({ isFocusVisible: true });
     }
   };
 
   handleBlur = (event: SyntheticEvent<>) => {
     if (this.state.isFocusVisible !== false) {
-      this.setState({isFocusVisible: false});
+      this.setState({ isFocusVisible: false });
     }
   };
 
   renderRatingContents = () => {
-    const {
-      overrides = {},
-      value = -1,
-      numItems,
-      size = 22,
-      readOnly = false,
-    } = this.props;
-    const {previewIndex} = this.state;
+    const { overrides = {}, value = -1, numItems, size = 22, readOnly = false } = this.props;
+    const { previewIndex } = this.state;
     const [Star, starProps] = getOverrides(overrides.Item, StyledStar);
 
     const ratings = [];
-    const refs = [{current: null}];
+    const refs = [{ current: null }];
     for (let x = 1; x <= numItems; x++) {
       const isFocusable = x === value || (value < 1 && x === 1);
       const starRef = React.createRef<HTMLLIElement>();
@@ -68,7 +62,7 @@ class StarRating extends React.Component<StarRatingPropsT, RatingStateT> {
           key={x}
           role="radio"
           title="rating"
-          // eslint-disable-next-line flowtype/no-weak-types
+          // flowlint-next-line unclear-type:off
           ref={(starRef: any)}
           tabIndex={isFocusable ? '0' : '-1'}
           aria-setsize={numItems}
@@ -77,12 +71,8 @@ class StarRating extends React.Component<StarRatingPropsT, RatingStateT> {
           aria-disabled={readOnly}
           $size={size}
           $index={x}
-          $isActive={
-            previewIndex !== undefined ? x <= previewIndex : x <= value
-          }
-          $isPartialActive={
-            previewIndex !== undefined ? false : x <= value + 0.5
-          }
+          $isActive={previewIndex !== undefined ? x <= previewIndex : x <= value}
+          $isPartialActive={previewIndex !== undefined ? false : x <= value + 0.5}
           $isSelected={x === previewIndex}
           $isFocusVisible={this.state.isFocusVisible && isFocusable}
           $isReadOnly={readOnly}
@@ -92,7 +82,7 @@ class StarRating extends React.Component<StarRatingPropsT, RatingStateT> {
             }
             this.selectItem(x);
           }}
-          onKeyDown={e => {
+          onKeyDown={(e) => {
             if (readOnly) {
               return;
             }
@@ -118,7 +108,7 @@ class StarRating extends React.Component<StarRatingPropsT, RatingStateT> {
           {...starProps}
           onFocus={forkFocus(starProps, this.handleFocus)}
           onBlur={forkBlur(starProps, this.handleBlur)}
-        />,
+        />
       );
     }
 
@@ -126,16 +116,15 @@ class StarRating extends React.Component<StarRatingPropsT, RatingStateT> {
   };
 
   render() {
-    const {overrides = {}} = this.props;
+    const { overrides = {} } = this.props;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
 
     return (
       <Root
         data-baseweb="star-rating"
         role="radiogroup"
-        onBlur={e => {
-          if (!e.currentTarget.contains(e.relatedTarget))
-            this.updatePreview(undefined);
+        onBlur={(e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) this.updatePreview(undefined);
         }}
         onMouseLeave={() => this.updatePreview(undefined)}
         {...rootProps}

package/rating/styled-components.js.flow

@@ -7,8 +7,8 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-import {styled} from '../styles/index.js';
-import type {StyledRootPropsT, StyledRatingItemPropsT} from './types.js';
+import { styled } from '../styles/index.js';
+import type { StyledRootPropsT, StyledRatingItemPropsT } from './types.js';
 import {
   starSVG,
   angryRatingSVG,
@@ -18,7 +18,7 @@ import {
   veryHappyRatingSVG,
 } from './svg-icons.js';
 
-export const StyledRoot = styled<StyledRootPropsT>('ul', ({$theme}) => {
+export const StyledRoot = styled<StyledRootPropsT>('ul', ({ $theme }) => {
   return {
     marginLeft: 0,
     marginRight: 0,
@@ -37,15 +37,7 @@ export const StyledRoot = styled<StyledRootPropsT>('ul', ({$theme}) => {
 
 export const StyledStar = styled<StyledRatingItemPropsT>(
   'li',
-  ({
-    $theme,
-    $isActive,
-    $isPartialActive,
-    $isSelected,
-    $isFocusVisible,
-    $isReadOnly,
-    $size,
-  }) => {
+  ({ $theme, $isActive, $isPartialActive, $isSelected, $isFocusVisible, $isReadOnly, $size }) => {
     let starStroke = $theme.colors.ratingStroke;
     let starFill = $theme.colors.ratingInactiveFill;
     let prePartialStarStroke;
@@ -79,10 +71,7 @@ export const StyledStar = styled<StyledRatingItemPropsT>(
       position: 'relative',
       ':after': {
         transition: `all ${$theme.animation.timing400}`,
-        content:
-          `url('data:image/svg+xml,` +
-          starSVG(starFill, starStroke, $size) +
-          `')`,
+        content: `url('data:image/svg+xml,` + starSVG(starFill, starStroke, $size) + `')`,
         height: '100%',
       },
       ':before':
@@ -108,20 +97,12 @@ export const StyledStar = styled<StyledRatingItemPropsT>(
     };
 
     return styles;
-  },
+  }
 );
 
 export const StyledEmoticon = styled<StyledRatingItemPropsT>(
   'li',
-  ({
-    $theme,
-    $isActive,
-    $isSelected,
-    $index = 1,
-    $isFocusVisible,
-    $isReadOnly,
-    $size,
-  }) => {
+  ({ $theme, $isActive, $isSelected, $index = 1, $isFocusVisible, $isReadOnly, $size }) => {
     let emoticonFill = $theme.colors.ratingInactiveFill;
 
     if ($isActive) {
@@ -160,7 +141,7 @@ export const StyledEmoticon = styled<StyledRatingItemPropsT>(
     };
 
     return styles;
-  },
+  }
 );
 
 declare var __DEV__: boolean;

package/rating/types.js.flow

@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import type {ThemeT} from '../styles/types.js';
-import type {OverrideT} from '../helpers/overrides.js';
+import type { ThemeT } from '../styles/types.js';
+import type { OverrideT } from '../helpers/overrides.js';
 
 export type RatingOverridesT = {
   Root?: OverrideT,
@@ -22,7 +22,7 @@ export type StarRatingPropsT = {
   numItems: number,
   readOnly?: boolean,
   /** Callback that's called with the newly selected value. */
-  onChange?: ({value: number}) => mixed,
+  onChange?: ({ value: number }) => mixed,
   size?: number,
 };
 
@@ -32,7 +32,7 @@ export type EmoticonRatingPropsT = {
   value?: number,
   readOnly?: boolean,
   /** Callback that's called with the newly selected value. */
-  onChange?: ({value: number}) => mixed,
+  onChange?: ({ value: number }) => mixed,
   size?: number,
 };
 

package/select/autosize-input.js

@@ -153,8 +153,7 @@ var AutosizeInput = /*#__PURE__*/function (_React$Component) {
         ref: inputRef
       }, inputProps)), /*#__PURE__*/React.createElement(_styledComponents.StyledInputSizer, {
         $size: this.props.$size,
-        ref: this.sizerRef // $FlowFixMe checking for $style before use
-        ,
+        ref: this.sizerRef,
         $style: inputProps.$style ? inputProps.$style : null
       }, sizerValue));
     }

package/select/autosize-input.js.flow

@@ -7,19 +7,19 @@ LICENSE file in the root directory of this source tree.
 // @flow
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
-import {StyledInput, StyledInputSizer} from './styled-components.js';
-import {getOverrides} from '../helpers/overrides.js';
-import type {AutosizeInputPropsT, AutosizeInputStateT} from './types.js';
+import { StyledInput, StyledInputSizer } from './styled-components.js';
+import { getOverrides } from '../helpers/overrides.js';
+import type { AutosizeInputPropsT, AutosizeInputStateT } from './types.js';
 
 export default class AutosizeInput extends React.Component<
   AutosizeInputPropsT,
-  AutosizeInputStateT,
+  AutosizeInputStateT
 > {
   mounted: boolean;
   sizer: ?HTMLElement;
 
   static defaultProps = {
-    inputRef: (React.createRef(): {current: HTMLInputElement | null}),
+    inputRef: (React.createRef(): { current: HTMLInputElement | null }),
     value: '',
     overrides: {},
   };
@@ -30,10 +30,7 @@ export default class AutosizeInput extends React.Component<
     this.mounted = true;
     this.updateInputWidth();
   }
-  componentDidUpdate(
-    prevProps: AutosizeInputPropsT,
-    prevState: AutosizeInputStateT,
-  ) {
+  componentDidUpdate(prevProps: AutosizeInputPropsT, prevState: AutosizeInputStateT) {
     this.updateInputWidth();
   }
   componentWillUnmount() {
@@ -43,11 +40,7 @@ export default class AutosizeInput extends React.Component<
     this.sizer = el;
   };
   updateInputWidth() {
-    if (
-      !this.mounted ||
-      !this.sizer ||
-      typeof this.sizer.scrollWidth === 'undefined'
-    ) {
+    if (!this.mounted || !this.sizer || typeof this.sizer.scrollWidth === 'undefined') {
       return;
     }
     const newInputWidth = this.sizer.scrollWidth + 2;
@@ -55,11 +48,11 @@ export default class AutosizeInput extends React.Component<
       newInputWidth !== this.state.inputWidth &&
       this.sizer.scrollWidth !== this.state.inputWidth
     ) {
-      this.setState({inputWidth: newInputWidth});
+      this.setState({ inputWidth: newInputWidth });
     }
   }
   render() {
-    const {overrides = {}, inputRef, ...restProps} = this.props;
+    const { overrides = {}, inputRef, ...restProps } = this.props;
     const [Input, inputProps] = getOverrides(overrides.Input, StyledInput);
     const sizerValue = [this.props.defaultValue, this.props.value, ''].reduce(
       (previousValue, currentValue) => {
@@ -67,7 +60,7 @@ export default class AutosizeInput extends React.Component<
           return previousValue;
         }
         return currentValue;
-      },
+      }
     );
     const componentInputProps = {
       ...restProps,
@@ -80,7 +73,6 @@ export default class AutosizeInput extends React.Component<
         <StyledInputSizer
           $size={this.props.$size}
           ref={this.sizerRef}
-          // $FlowFixMe checking for $style before use
           $style={inputProps.$style ? inputProps.$style : null}
         >
           {sizerValue}

package/select/constants.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {SIZE} from '../input/index.js';
+export { SIZE } from '../input/index.js';
 
 export const TYPE = {
   select: 'select',

package/select/default-props.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import defaultFilterOptions from './utils/default-filter-options.js';
-import {TYPE, SIZE} from './constants.js';
+import { TYPE, SIZE } from './constants.js';
 
 const defaultProps = {
   'aria-label': null,

package/select/dropdown.js

@@ -188,7 +188,7 @@ var SelectDropdown = /*#__PURE__*/function (_React$Component) {
         $type: type,
         $width: width
       };
-    } // eslint-disable-next-line flowtype/no-weak-types
+    } // flowlint-next-line unclear-type:off
 
   }, {
     key: "render",
@@ -275,7 +275,6 @@ var SelectDropdown = /*#__PURE__*/function (_React$Component) {
                   }),
                   // slightly hacky way to handle the list item style overrides
                   // since the menu component doesn't provide a top level overrides for it
-                  // $FlowFixMe
                   style: listItemProps.$style
                 }
               },

package/select/dropdown.js.flow

@@ -12,9 +12,9 @@ import {
   StyledDropdownListItem,
   StyledOptionContent,
 } from './styled-components.js';
-import {StatefulMenu} from '../menu/index.js';
-import type {DropdownPropsT, OptionT, ValueT} from './types.js';
-import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
+import { StatefulMenu } from '../menu/index.js';
+import type { DropdownPropsT, OptionT, ValueT } from './types.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 
 function groupOptions(options: ValueT) {
   return options.reduce(
@@ -29,22 +29,13 @@ function groupOptions(options: ValueT) {
       }
       return groups;
     },
-    {__ungrouped: []},
+    { __ungrouped: [] }
   );
 }
 
 export default class SelectDropdown extends React.Component<DropdownPropsT> {
   getSharedProps() {
-    const {
-      error,
-      isLoading,
-      multi,
-      required,
-      size,
-      searchable,
-      type,
-      width,
-    } = this.props;
+    const { error, isLoading, multi, required, size, searchable, type, width } = this.props;
     return {
       $error: error,
       $isLoading: isLoading,
@@ -56,20 +47,18 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
       $width: width,
     };
   }
-  // eslint-disable-next-line flowtype/no-weak-types
-  getItemLabel = (option: {[string]: any}) => {
-    const {getOptionLabel, overrides = {}, value, valueKey} = this.props;
+  // flowlint-next-line unclear-type:off
+  getItemLabel = (option: { [string]: any }) => {
+    const { getOptionLabel, overrides = {}, value, valueKey } = this.props;
 
     const [OptionContent, optionContentProps] = getOverrides(
       overrides.OptionContent,
-      StyledOptionContent,
+      StyledOptionContent
     );
 
     let $selected;
     if (Array.isArray(value)) {
-      $selected = !!value.find(
-        selected => selected && selected[valueKey] === option[valueKey],
-      );
+      $selected = !!value.find((selected) => selected && selected[valueKey] === option[valueKey]);
     } else {
       $selected = value[valueKey] === option[valueKey];
     }
@@ -88,7 +77,7 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
         {...optionSharedProps}
         {...optionContentProps}
       >
-        {getOptionLabel({option, optionState: optionSharedProps})}
+        {getOptionLabel({ option, optionState: optionSharedProps })}
       </OptionContent>
     );
   };
@@ -98,7 +87,7 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
   };
 
   getHighlightedIndex = () => {
-    const {value, options, valueKey} = this.props;
+    const { value, options, valueKey } = this.props;
     // Highlight only first value as menu supports only a single highlight index
     let firstValue: OptionT = {};
 
@@ -109,9 +98,7 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
     }
 
     if (Object.keys(firstValue).length > 0) {
-      const a = options.findIndex(
-        option => option && option[valueKey] === firstValue[valueKey],
-      );
+      const a = options.findIndex((option) => option && option[valueKey] === firstValue[valueKey]);
       return a === -1 ? 0 : a;
     }
     return 0;
@@ -130,16 +117,15 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
     } = this.props;
     const [DropdownContainer, dropdownContainerProps] = getOverrides(
       overrides.DropdownContainer,
-      StyledDropdownContainer,
+      StyledDropdownContainer
     );
     const [ListItem, listItemProps] = getOverrides(
       overrides.DropdownListItem,
-      StyledDropdownListItem,
+      StyledDropdownListItem
     );
     const [
       OverriddenStatefulMenu,
-      // $FlowFixMe
-      {overrides: statefulMenuOverrides = {}, ...restStatefulMenuProps},
+      { overrides: statefulMenuOverrides = {}, ...restStatefulMenuProps },
     ] = getOverrides(overrides.StatefulMenu, StatefulMenu);
     const highlightedIndex = this.getHighlightedIndex();
     const groupedOptions = groupOptions(options);
@@ -152,7 +138,7 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
       >
         <OverriddenStatefulMenu
           noResultsMsg={noResultsMsg}
-          onActiveDescendantChange={id => {
+          onActiveDescendantChange={(id) => {
             if (this.props.onActiveDescendantChange) {
               this.props.onActiveDescendantChange(id);
             }
@@ -171,7 +157,7 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
             {
               List: {
                 component: StyledDropdown,
-                style: p => ({
+                style: (p) => ({
                   maxHeight: p.$maxHeight || null,
                 }),
                 props: {
@@ -189,10 +175,9 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
                   overrides: {
                     ListItem: {
                       component: ListItem,
-                      props: {...listItemProps, role: 'option'},
+                      props: { ...listItemProps, role: 'option' },
                       // slightly hacky way to handle the list item style overrides
                       // since the menu component doesn't provide a top level overrides for it
-                      // $FlowFixMe
                       style: listItemProps.$style,
                     },
                   },
@@ -204,7 +189,7 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
               List: overrides.Dropdown || {},
               Option: overrides.DropdownOption || {},
               ...statefulMenuOverrides,
-            },
+            }
           )}
           {...restStatefulMenuProps}
         />