baseui 10.10.0 → 10.11.0

package/menu/menu.js.flow

@@ -6,25 +6,21 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {LocaleContext} from '../locale/index.js';
+import { LocaleContext } from '../locale/index.js';
 // Components
-import {
-  StyledList,
-  StyledEmptyState,
-  StyledOptgroupHeader,
-} from './styled-components.js';
+import { StyledList, StyledEmptyState, StyledOptgroupHeader } from './styled-components.js';
 import OptionList from './option-list.js';
-import {getOverrides} from '../helpers/overrides.js';
+import { getOverrides } from '../helpers/overrides.js';
 // Types
-import type {StatelessMenuPropsT} from './types.js';
-import type {LocaleT} from '../locale/types.js';
+import type { StatelessMenuPropsT } from './types.js';
+import type { LocaleT } from '../locale/types.js';
 
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
 export default function Menu(props: StatelessMenuPropsT) {
   const {
     overrides = {},
-    ariaLabel = 'Menu',
+    'aria-label': ariaLabel = 'Menu',
     rootRef = React.createRef(),
     focusMenu = () => {},
     unfocusMenu = () => {},
@@ -48,18 +44,13 @@ export default function Menu(props: StatelessMenuPropsT) {
 
   const [List, listProps] = getOverrides(overrides.List, StyledList);
   const [Option, optionProps] = getOverrides(overrides.Option, OptionList);
-  const [EmptyState, emptyStateProps] = getOverrides(
-    overrides.EmptyState,
-    StyledEmptyState,
-  );
+  const [EmptyState, emptyStateProps] = getOverrides(overrides.EmptyState, StyledEmptyState);
   const [OptgroupHeader, optgroupHeaderProps] = getOverrides(
     overrides.OptgroupHeader,
-    StyledOptgroupHeader,
+    StyledOptgroupHeader
   );
 
-  const groupedItems = Array.isArray(props.items)
-    ? {__ungrouped: props.items}
-    : props.items;
+  const groupedItems = Array.isArray(props.items) ? { __ungrouped: props.items } : props.items;
   const optgroups = Object.keys(groupedItems);
   const [elements] = optgroups.reduce(
     ([els, itemIndex], optgroup) => {
@@ -67,12 +58,12 @@ export default function Menu(props: StatelessMenuPropsT) {
         els.push(
           <OptgroupHeader key={optgroup} {...optgroupHeaderProps}>
             {optgroup}
-          </OptgroupHeader>,
+          </OptgroupHeader>
         );
       }
       const groupItems = groupedItems[optgroup].map((item, index) => {
         itemIndex = itemIndex + 1;
-        const {getRequiredItemProps = (item, index) => ({})} = props;
+        const { getRequiredItemProps = (item, index) => ({}) } = props;
 
         const {
           disabled,
@@ -102,10 +93,10 @@ export default function Menu(props: StatelessMenuPropsT) {
       });
       return [els.concat(groupItems), itemIndex];
     },
-    [[], -1],
+    [[], -1]
   );
 
-  const isEmpty = optgroups.every(optgroup => !groupedItems[optgroup].length);
+  const isEmpty = optgroups.every((optgroup) => !groupedItems[optgroup].length);
 
   return (
     <LocaleContext.Consumer>
@@ -118,9 +109,9 @@ export default function Menu(props: StatelessMenuPropsT) {
           onMouseEnter={focusMenu}
           onMouseLeave={handleMouseLeave}
           onMouseOver={focusMenu}
-          onFocus={forkFocus({onFocus: focusMenu}, handleFocus)}
-          onBlur={forkBlur({onBlur: unfocusMenu}, handleBlur)}
-          onKeyDown={event => {
+          onFocus={forkFocus({ onFocus: focusMenu }, handleFocus)}
+          onBlur={forkBlur({ onBlur: unfocusMenu }, handleBlur)}
+          onKeyDown={(event) => {
             if (props.isFocused) {
               handleKeyDown(event);
             }

package/menu/nested-menus.js.flow

@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import type {NestedMenuRefT, NestedMenuContextT} from './types.js';
+import type { NestedMenuRefT, NestedMenuContextT } from './types.js';
 
 type StateT = {
   nestedMenuHoverIndex: number,
@@ -19,17 +19,15 @@ type PropsT = {
   children: React.Node,
 };
 
-export const NestedMenuContext: React.Context<NestedMenuContextT> = React.createContext(
-  {
-    addMenuToNesting: () => {},
-    removeMenuFromNesting: () => {},
-    getParentMenu: () => {},
-    getChildMenu: () => {},
-    nestedMenuHoverIndex: -1,
-    isNestedMenuVisible: () => false,
-    mountRef: {current: null},
-  },
-);
+export const NestedMenuContext: React.Context<NestedMenuContextT> = React.createContext({
+  addMenuToNesting: () => {},
+  removeMenuFromNesting: () => {},
+  getParentMenu: () => {},
+  getChildMenu: () => {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: () => false,
+  mountRef: { current: null },
+});
 
 function isSame(a: ?HTMLElement, b: ?HTMLElement) {
   if (!a || !b) {
@@ -40,20 +38,20 @@ function isSame(a: ?HTMLElement, b: ?HTMLElement) {
 }
 
 export default class NestedMenus extends React.Component<PropsT, StateT> {
-  state = {menus: [], nestedMenuHoverIndex: -1};
-  mountRef = (React.createRef(): {current: HTMLElement | null});
+  state = { menus: [], nestedMenuHoverIndex: -1 };
+  mountRef = (React.createRef(): { current: HTMLElement | null });
   mouseLeaveTimeoueId = null;
 
   handleMenuMouseLeave = (event: MouseEvent) => {
     this.mouseLeaveTimeoueId = setTimeout(() => {
-      this.setState({nestedMenuHoverIndex: -1});
+      this.setState({ nestedMenuHoverIndex: -1 });
     }, 200);
   };
 
   handleMenuMouseEnter = (event: MouseEvent) => {
     if (__BROWSER__) {
       clearTimeout(this.mouseLeaveTimeoueId);
-      const index = this.state.menus.findIndex(m => {
+      const index = this.state.menus.findIndex((m) => {
         return (
           m.current &&
           event.currentTarget instanceof Node &&
@@ -61,7 +59,7 @@ export default class NestedMenus extends React.Component<PropsT, StateT> {
         );
       });
 
-      this.setState({nestedMenuHoverIndex: index});
+      this.setState({ nestedMenuHoverIndex: index });
     }
   };
 
@@ -74,14 +72,14 @@ export default class NestedMenus extends React.Component<PropsT, StateT> {
       element.addEventListener('mouseenter', this.handleMenuMouseEnter);
       element.addEventListener('mouseleave', this.handleMenuMouseLeave);
 
-      this.setState(state => {
-        return {menus: [...state.menus, ref]};
+      this.setState((state) => {
+        return { menus: [...state.menus, ref] };
       });
     }
   };
 
   removeMenuFromNesting = (ref: NestedMenuRefT) => {
-    this.setState(state => {
+    this.setState((state) => {
       for (const r of this.state.menus) {
         if (r.current && isSame(r.current, ref.current)) {
           const element = r.current;
@@ -90,16 +88,16 @@ export default class NestedMenus extends React.Component<PropsT, StateT> {
         }
       }
 
-      const nextMenus = state.menus.filter(r => {
+      const nextMenus = state.menus.filter((r) => {
         return r.current && !isSame(r.current, ref.current);
       });
 
-      return {menus: nextMenus};
+      return { menus: nextMenus };
     });
   };
 
   findMenuIndexByRef = (ref: NestedMenuRefT) => {
-    return this.state.menus.findIndex(r => isSame(r.current, ref.current));
+    return this.state.menus.findIndex((r) => isSame(r.current, ref.current));
   };
 
   getParentMenu = (ref: NestedMenuRefT): ?NestedMenuRefT => {

package/menu/option-list.js.flow

@@ -8,18 +8,21 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {LocaleContext} from '../locale/index.js';
-import {getOverrides} from '../helpers/overrides.js';
+import { LocaleContext } from '../locale/index.js';
+import { getOverrides } from '../helpers/overrides.js';
 
-import {OPTION_LIST_SIZE} from './constants.js';
+import { OPTION_LIST_SIZE } from './constants.js';
 import MaybeChildMenu from './maybe-child-menu.js';
-import {StyledListItem, StyledListItemAnchor} from './styled-components.js';
-import type {OptionListPropsT} from './types.js';
+import { StyledListItem, StyledListItemAnchor } from './styled-components.js';
+import type { OptionListPropsT } from './types.js';
 
-function OptionList(props: OptionListPropsT, ref: React.ElementRef<*>) {
+function OptionList(
+  props: OptionListPropsT,
+  ref?: { current: null | HTMLElement, ... } | ((null | HTMLElement) => mixed)
+) {
   const {
     getChildMenu,
-    getItemLabel = item => (item ? item.label : ''),
+    getItemLabel = (item) => (item ? item.label : ''),
     item,
     onClick = () => {},
     onMouseEnter = () => {},
@@ -32,16 +35,13 @@ function OptionList(props: OptionListPropsT, ref: React.ElementRef<*>) {
     ...restProps
   } = props;
 
-  const [ListItem, listItemProps] = getOverrides(
-    overrides.ListItem,
-    StyledListItem,
-  );
+  const [ListItem, listItemProps] = getOverrides(overrides.ListItem, StyledListItem);
   const [ListItemAnchor, listItemAnchorProps] = getOverrides(
     overrides.ListItemAnchor,
-    StyledListItemAnchor,
+    StyledListItemAnchor
   );
 
-  const getItem = item => {
+  const getItem = (item) => {
     if (item.href && renderHrefAsAnchor) {
       return (
         <ListItemAnchor $item={item} href={item.href} {...listItemAnchorProps}>
@@ -55,7 +55,7 @@ function OptionList(props: OptionListPropsT, ref: React.ElementRef<*>) {
 
   return (
     <LocaleContext.Consumer>
-      {locale => (
+      {(locale) => (
         <MaybeChildMenu
           getChildMenu={getChildMenu}
           isOpen={!!$isHighlighted}
@@ -68,9 +68,7 @@ function OptionList(props: OptionListPropsT, ref: React.ElementRef<*>) {
           <ListItem
             ref={ref}
             aria-label={
-              getChildMenu && getChildMenu(item)
-                ? locale.menu.parentMenuItemAriaLabel
-                : null
+              getChildMenu && getChildMenu(item) ? locale.menu.parentMenuItemAriaLabel : null
             }
             item={item}
             onClick={onClick}
@@ -80,7 +78,7 @@ function OptionList(props: OptionListPropsT, ref: React.ElementRef<*>) {
             {...restProps}
             {...listItemProps}
           >
-            {getItem({isHighlighted: $isHighlighted, ...item})}
+            {getItem({ isHighlighted: $isHighlighted, ...item })}
           </ListItem>
         </MaybeChildMenu>
       )}

package/menu/option-profile.js

@@ -39,6 +39,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+// flowlint-next-line unclear-type:off
 function OptionProfile(props, ref) {
   var item = props.item,
       getChildMenu = props.getChildMenu,
@@ -96,6 +97,7 @@ function OptionProfile(props, ref) {
       body = _getProfileItemLabels.body;
 
   return /*#__PURE__*/React.createElement(_maybeChildMenu.default, {
+    ref: ref,
     getChildMenu: getChildMenu,
     isOpen: !!$isHighlighted,
     item: item,

package/menu/option-profile.js.flow

@@ -18,11 +18,12 @@ import {
   StyledProfileSubtitle,
   StyledProfileBody,
 } from './styled-components.js';
-import {getOverrides} from '../helpers/overrides.js';
+import { getOverrides } from '../helpers/overrides.js';
 // Types
-import type {OptionProfilePropsT} from './types.js';
+import type { OptionProfilePropsT } from './types.js';
 
-function OptionProfile(props: OptionProfilePropsT, ref: React.ElementRef<*>) {
+// flowlint-next-line unclear-type:off
+function OptionProfile(props: OptionProfilePropsT, ref: React.ElementRef<any>) {
   const {
     item,
     getChildMenu,
@@ -38,38 +39,33 @@ function OptionProfile(props: OptionProfilePropsT, ref: React.ElementRef<*>) {
 
   const [ListItemProfile, listItemProfileProps] = getOverrides(
     overrides.ListItemProfile,
-    StyledListItemProfile,
+    StyledListItemProfile
   );
   const [ProfileImgContainer, profileImgContainerProps] = getOverrides(
     overrides.ProfileImgContainer,
-    StyledProfileImgContainer,
-  );
-  const [ProfileImg, profileImgProps] = getOverrides(
-    overrides.ProfileImg,
-    StyledProfileImg,
+    StyledProfileImgContainer
   );
+  const [ProfileImg, profileImgProps] = getOverrides(overrides.ProfileImg, StyledProfileImg);
   const [ProfileLabelsContainer, profileLabelsContainerProps] = getOverrides(
     overrides.ProfileLabelsContainer,
-    StyledProfileLabelsContainer,
+    StyledProfileLabelsContainer
   );
   const [ProfileTitle, profileTitleProps] = getOverrides(
     overrides.ProfileTitle,
-    StyledProfileTitle,
+    StyledProfileTitle
   );
   const [ProfileSubtitle, profileSubtitleProps] = getOverrides(
     overrides.ProfileSubtitle,
-    StyledProfileSubtitle,
-  );
-  const [ProfileBody, profileBodyProps] = getOverrides(
-    overrides.ProfileBody,
-    StyledProfileBody,
+    StyledProfileSubtitle
   );
+  const [ProfileBody, profileBodyProps] = getOverrides(overrides.ProfileBody, StyledProfileBody);
 
   const ItemImg = getProfileItemImg(item);
-  const {title, subtitle, body} = getProfileItemLabels(item);
+  const { title, subtitle, body } = getProfileItemLabels(item);
 
   return (
     <MaybeChildMenu
+      ref={ref}
       getChildMenu={getChildMenu}
       isOpen={!!$isHighlighted}
       item={item}
@@ -82,11 +78,7 @@ function OptionProfile(props: OptionProfilePropsT, ref: React.ElementRef<*>) {
           {ItemImg &&
             (typeof ItemImg === 'string' ? (
               // Render img src string wrapped with image component
-              <ProfileImg
-                src={ItemImg}
-                alt={getProfileItemImgText(item)}
-                {...profileImgProps}
-              />
+              <ProfileImg src={ItemImg} alt={getProfileItemImgText(item)} {...profileImgProps} />
             ) : (
               // Or just render the entire component user specified
               <ItemImg {...profileImgProps} />
@@ -94,11 +86,7 @@ function OptionProfile(props: OptionProfilePropsT, ref: React.ElementRef<*>) {
         </ProfileImgContainer>
         <ProfileLabelsContainer {...profileLabelsContainerProps}>
           {title && <ProfileTitle {...profileTitleProps}>{title}</ProfileTitle>}
-          {subtitle && (
-            <ProfileSubtitle {...profileSubtitleProps}>
-              {subtitle}
-            </ProfileSubtitle>
-          )}
+          {subtitle && <ProfileSubtitle {...profileSubtitleProps}>{subtitle}</ProfileSubtitle>}
           {body && <ProfileBody {...profileBodyProps}>{body}</ProfileBody>}
         </ProfileLabelsContainer>
       </ListItemProfile>
@@ -106,9 +94,7 @@ function OptionProfile(props: OptionProfilePropsT, ref: React.ElementRef<*>) {
   );
 }
 
-const forwarded = React.forwardRef<OptionProfilePropsT, HTMLElement>(
-  OptionProfile,
-);
+const forwarded = React.forwardRef<OptionProfilePropsT, HTMLElement>(OptionProfile);
 forwarded.displayName = 'OptionProfile';
 
 export default forwarded;

package/menu/stateful-container.js

@@ -374,9 +374,7 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
       var rootRef = this.props.rootRef ? this.props.rootRef : this.rootRef;
 
       if (typeof document !== 'undefined') {
-        if (rootRef.current
-        /** This condition added to satisfy Flow */
-        && this.state.highlightedIndex > -1 && this.refList[this.state.highlightedIndex]) {
+        if (rootRef.current && this.state.highlightedIndex > -1 && this.refList[this.state.highlightedIndex]) {
           (0, _utils.scrollItemIntoView)(this.refList[this.state.highlightedIndex].current, rootRef.current, this.state.highlightedIndex === 0, this.state.highlightedIndex === this.getItems().length - 1, 'center');
         }
 
@@ -436,7 +434,7 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
           highlightedIndex: -1
         });
       }
-    } // One array to hold all of list item refs
+    } // One array to hold all list item refs
 
   }, {
     key: "internalSetState",
@@ -492,6 +490,7 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
 _defineProperty(MenuStatefulContainerInner, "defaultProps", DEFAULT_PROPS);
 
 var MenuStatefulContainer = function MenuStatefulContainer(props) {
+  //$FlowExpectedError[cannot-spread-inexact]
   return /*#__PURE__*/React.createElement(MenuStatefulContainerInner, _extends({
     uidSeed: (0, _reactUid.useUIDSeed)()
   }, props));

package/menu/stateful-container.js.flow

@@ -7,8 +7,8 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 // Files
-import {STATE_CHANGE_TYPES, KEY_STRINGS} from './constants.js';
-import {scrollItemIntoView} from './utils.js';
+import { STATE_CHANGE_TYPES, KEY_STRINGS } from './constants.js';
+import { scrollItemIntoView } from './utils.js';
 // Types
 import type {
   StatefulContainerPropsT,
@@ -16,8 +16,9 @@ import type {
   GetRequiredItemPropsFnT,
   RenderPropsT,
   StateReducerFnT,
+  ItemT,
 } from './types.js';
-import {useUIDSeed} from 'react-uid';
+import { useUIDSeed } from 'react-uid';
 
 const DEFAULT_PROPS = {
   // keeping it in defaultProps to satisfy Flow
@@ -27,7 +28,7 @@ const DEFAULT_PROPS = {
     isFocused: false,
   },
   typeAhead: true,
-  keyboardControlNode: {current: null},
+  keyboardControlNode: ({ current: null }: { current: null | HTMLElement }),
   stateReducer: ((changeType, changes) => changes: StateReducerFnT),
   onItemSelect: () => {},
   getRequiredItemProps: () => ({}),
@@ -43,8 +44,10 @@ const DEFAULT_PROPS = {
 };
 
 class MenuStatefulContainerInner extends React.Component<
-  StatefulContainerPropsT & {uidSeed: (item: number) => string},
-  StatefulContainerStateT,
+  StatefulContainerPropsT & { uidSeed: (item: number) => string } & {
+    getRequiredItemProps: GetRequiredItemPropsFnT,
+  },
+  StatefulContainerStateT
 > {
   static defaultProps = DEFAULT_PROPS;
 
@@ -55,7 +58,7 @@ class MenuStatefulContainerInner extends React.Component<
 
   // We need to have access to the root component user renders
   // to correctly facilitate keyboard scrolling behavior
-  rootRef = (React.createRef(): {current: HTMLElement | null});
+  rootRef = (React.createRef<HTMLElement>(): { current: null | HTMLElement });
   keyboardControlNode = this.props.keyboardControlNode.current;
   getItems() {
     if (Array.isArray(this.props.items)) {
@@ -72,7 +75,7 @@ class MenuStatefulContainerInner extends React.Component<
     const rootRef = this.props.rootRef ? this.props.rootRef : this.rootRef;
     if (__BROWSER__) {
       if (
-        rootRef.current /** This condition added to satisfy Flow */ &&
+        rootRef.current &&
         this.state.highlightedIndex > -1 &&
         this.refList[this.state.highlightedIndex]
       ) {
@@ -81,7 +84,7 @@ class MenuStatefulContainerInner extends React.Component<
           rootRef.current,
           this.state.highlightedIndex === 0,
           this.state.highlightedIndex === this.getItems().length - 1,
-          'center',
+          'center'
         );
       }
 
@@ -107,28 +110,18 @@ class MenuStatefulContainerInner extends React.Component<
     }
   }
 
-  componentDidUpdate(
-    prevProps: StatefulContainerPropsT,
-    prevState: StatefulContainerStateT,
-  ) {
+  componentDidUpdate(prevProps: StatefulContainerPropsT, prevState: StatefulContainerStateT) {
     if (__BROWSER__) {
       if (!prevState.isFocused && this.state.isFocused) {
         if (this.keyboardControlNode)
           this.keyboardControlNode.addEventListener('keydown', this.onKeyDown);
       } else if (prevState.isFocused && !this.state.isFocused) {
         if (this.keyboardControlNode)
-          this.keyboardControlNode.removeEventListener(
-            'keydown',
-            this.onKeyDown,
-          );
+          this.keyboardControlNode.removeEventListener('keydown', this.onKeyDown);
       }
     }
     var range = this.getItems().length;
-    if (
-      this.props.forceHighlight &&
-      this.state.highlightedIndex === -1 &&
-      range > 0
-    ) {
+    if (this.props.forceHighlight && this.state.highlightedIndex === -1 && range > 0) {
       this.internalSetState(STATE_CHANGE_TYPES.enter, {
         highlightedIndex: 0,
       });
@@ -149,35 +142,33 @@ class MenuStatefulContainerInner extends React.Component<
       !this.props.isNestedMenuVisible(this.rootRef) &&
       !this.props.forceHighlight
     ) {
-      this.setState({highlightedIndex: -1});
+      this.setState({ highlightedIndex: -1 });
     }
   }
 
-  // One array to hold all of list item refs
-  refList: Array<React$ElementRef<*>> = [];
+  // One array to hold all list item refs
+  refList: Array<{ current: null | HTMLElement }> = [];
   // list of ids applied to list items. used to set aria-activedescendant
   optionIds: string[] = [];
   //characters input from keyboard, will automatically be clear after some time
   typeAheadChars: string = '';
-  //count time for each continous keyboard input
-  typeAheadTimeOut: * = null;
+  //count time for each continuous keyboard input
+  typeAheadTimeOut: null | TimeoutID = null;
 
   // Internal set state function that will also invoke stateReducer
 
   internalSetState(
     changeType: $Keys<typeof STATE_CHANGE_TYPES>,
-    changes: $Shape<StatefulContainerStateT>,
+    changes: $Shape<StatefulContainerStateT>
   ) {
-    const {stateReducer} = this.props;
+    const { stateReducer } = this.props;
 
     if (
       this.props.onActiveDescendantChange &&
       typeof changes.highlightedIndex === 'number' &&
       this.state.highlightedIndex !== changes.highlightedIndex
     ) {
-      this.props.onActiveDescendantChange(
-        this.optionIds[changes.highlightedIndex],
-      );
+      this.props.onActiveDescendantChange(this.optionIds[changes.highlightedIndex]);
     }
 
     this.setState(stateReducer(changeType, changes, this.state));
@@ -260,7 +251,7 @@ class MenuStatefulContainerInner extends React.Component<
         // $FlowFixMe
         rootRef.current,
         nextIndex === 0,
-        nextIndex === list.length - 1,
+        nextIndex === list.length - 1
       );
     }
   };
@@ -317,33 +308,25 @@ class MenuStatefulContainerInner extends React.Component<
         // $FlowFixMe
         rootRef.current,
         nextIndex === 0,
-        nextIndex === this.getItems().length - 1,
+        nextIndex === this.getItems().length - 1
       );
     }
   };
 
   // Handler for enter key
   handleEnterKey = (event: KeyboardEvent) => {
-    const {onItemSelect} = this.props;
-    const {highlightedIndex} = this.state;
+    const { onItemSelect } = this.props;
+    const { highlightedIndex } = this.state;
     const items = this.getItems();
-    if (
-      items[highlightedIndex] &&
-      onItemSelect &&
-      !items[highlightedIndex].disabled
-    ) {
+    if (items[highlightedIndex] && onItemSelect && !items[highlightedIndex].disabled) {
       event.preventDefault();
-      onItemSelect({item: items[highlightedIndex], event});
+      onItemSelect({ item: items[highlightedIndex], event });
     }
   };
 
-  handleItemClick = (
-    index: number,
-    item: *,
-    event: SyntheticMouseEvent<HTMLElement>,
-  ) => {
+  handleItemClick = (index: number, item: ItemT, event: SyntheticMouseEvent<HTMLElement>) => {
     if (this.props.onItemSelect && !item.disabled) {
-      this.props.onItemSelect({item, event});
+      this.props.onItemSelect({ item, event });
       this.internalSetState(STATE_CHANGE_TYPES.click, {
         highlightedIndex: index,
         activedescendantId: this.optionIds[index],
@@ -367,12 +350,11 @@ class MenuStatefulContainerInner extends React.Component<
       this.refList[index] = itemRef;
       this.optionIds[index] = this.props.uidSeed(index);
     }
-    const {
-      disabled: disabledVal,
-      ...requiredItemProps
-    } = this.props.getRequiredItemProps(item, index);
-    const disabled =
-      typeof disabledVal === 'boolean' ? disabledVal : !!item.disabled;
+    const { disabled: disabledVal, ...requiredItemProps } = this.props.getRequiredItemProps(
+      item,
+      index
+    );
+    const disabled = typeof disabledVal === 'boolean' ? disabledVal : !!item.disabled;
     return {
       id: requiredItemProps.id || this.optionIds[index],
       disabled,
@@ -407,7 +389,7 @@ class MenuStatefulContainerInner extends React.Component<
           highlightedIndex: 0,
         });
       } else {
-        this.internalSetState(STATE_CHANGE_TYPES.focus, {isFocused: true});
+        this.internalSetState(STATE_CHANGE_TYPES.focus, { isFocused: true });
       }
 
       rootRef.current.focus();
@@ -415,7 +397,7 @@ class MenuStatefulContainerInner extends React.Component<
   };
 
   unfocusMenu = () => {
-    this.internalSetState(STATE_CHANGE_TYPES.focus, {isFocused: false});
+    this.internalSetState(STATE_CHANGE_TYPES.focus, { isFocused: false });
   };
 
   resetMenu = () => {
@@ -448,23 +430,21 @@ class MenuStatefulContainerInner extends React.Component<
         ...restProps,
         rootRef: this.props.rootRef ? this.props.rootRef : this.rootRef,
         activedescendantId: this.optionIds[this.state.highlightedIndex],
-        getRequiredItemProps: (item, index) =>
-          this.getRequiredItemProps(item, index),
+        getRequiredItemProps: (item, index) => this.getRequiredItemProps(item, index),
         handleMouseLeave: this.handleMouseLeave,
         highlightedIndex: this.state.highlightedIndex,
         isFocused: this.state.isFocused,
-        handleKeyDown: this.props.keyboardControlNode.current
-          ? event => {}
-          : this.onKeyDown,
+        handleKeyDown: this.props.keyboardControlNode.current ? (event) => {} : this.onKeyDown,
         focusMenu: this.focusMenu,
         unfocusMenu: this.unfocusMenu,
-      }: RenderPropsT),
+      }: RenderPropsT)
     );
   }
 }
 
 // Remove when MenuStatefulContainer is converted to a functional component.
 const MenuStatefulContainer = (props: StatefulContainerPropsT) => {
+  //$FlowExpectedError[cannot-spread-inexact]
   return <MenuStatefulContainerInner uidSeed={useUIDSeed()} {...props} />;
 };