[v2] Fixed work with flow >= 0.85, update to 0.91

.flowconfig

@@ -3,13 +3,18 @@
 ./dist/.*
 .*/node_modules/cypress/.*
 .*/node_modules/@atlaskit/tooltip/dist/cjs/components/Marshal.js.flow
+.*/node_modules/@atlaskit/layer-manager/dist/cjs/components/FocusLock/index.js.flow
+.*/node_modules/@atlaskit/layer-manager/dist/cjs/components/gateway/components/Gateway.js.flow
+.*/node_modules/@atlaskit/layer-manager/dist/cjs/components/withRenderTarget.js.flow
 
 [include]
 
 [libs]
 flow-typed
 
 [lints]
+unclear-type=warn
+untyped-type-import=error
 
 [options]
 module.name_mapper='\!\!raw-loader\!.*' -> '<PROJECT_ROOT>/typings/raw-loader.js'

docs/App/Footer.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react';
+import React, { type Node } from 'react';
 
 // const smallDevice = '@media (max-width: 769px)';
 const largeDevice = '@media (min-width: 770px)';
@@ -53,7 +53,7 @@ const A = props => (
   />
 );
 
-export default function Footer() {
+export default function Footer(): Node {
   return (
     <Wrapper>
       <Container>

docs/App/Header.js

@@ -1,7 +1,7 @@
 // @flow
 
 import fetch from 'unfetch';
-import React, { Component } from 'react';
+import React, { Component, type Node } from 'react';
 import { withRouter } from 'react-router-dom';
 
 import Select from '../../src';
@@ -50,7 +50,7 @@ function getLabel({ icon, label }) {
 }
 
 const headerSelectStyles = {
-  control: (base, { isFocused }) => ({
+  control: ({ isFocused, ...base }) => ({
     ...base,
     backgroundClip: 'padding-box',
     borderColor: 'rgba(0,0,0,0.1)',
@@ -104,7 +104,7 @@ const Container = props => (
   />
 );
 
-type HeaderProps = RouterProps & { children: any };
+type HeaderProps = RouterProps & { children: Node };
 type HeaderState = { contentHeight: 'auto' | number, stars: number };
 
 const apiUrl = 'https://api.github.com/repos/jedwatson/react-select';
@@ -251,10 +251,14 @@ const Content = ({ onChange, stars }) => (
     >
       <div className="animate-dropin">
         <Select
-          getOptionLabel={getLabel}
+          formatOptionLabel={getLabel}
           isSearchable={false}
           options={changes}
-          onChange={onChange}
+          onChange={option => {
+            if (option && !Array.isArray(option)) {
+              onChange(option);
+            }
+          }}
           value={null}
           placeholder="🎉 What's new in V2"
           styles={headerSelectStyles}

docs/App/components.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Component } from 'react';
+import React, { Component, type ElementConfig } from 'react';
 import { Link, withRouter } from 'react-router-dom';
 
 const navWidth = 180;
@@ -78,7 +78,7 @@ export const PrimaryNav = (props: any) => (
     />
   </div>
 );
-type PrimaryNavItemProps = { selected: boolean };
+type PrimaryNavItemProps = ElementConfig<typeof Link> & { selected: boolean };
 export const PrimaryNavItem = ({ selected, ...props }: PrimaryNavItemProps) => (
   <Link
     css={{

docs/examples/CustomDropdownIndicator.js

@@ -1,12 +1,14 @@
 // @flow
 
-import React from 'react';
+import React, { type ElementConfig } from 'react';
 import EmojiIcon from '@atlaskit/icon/glyph/emoji';
 import Select, { components } from '../../src';
 import { colourOptions } from '../data';
 
-const DropdownIndicator = (props) => {
-  return components.DropdownIndicator && (
+const DropdownIndicator = (
+  props: ElementConfig<typeof components.DropdownIndicator>
+) => {
+  return (
     <components.DropdownIndicator {...props}>
       <EmojiIcon
         primaryColor={colourOptions[2].color}

docs/pages/upgradeGuide/props.js

@@ -269,8 +269,11 @@ class PropChanges extends Component<
           isMulti
           closeMenuOnSelect={false}
           hideSelectedOptions={false}
-          onChange={options =>
-            this.setState({ selectedOptions: options.map(opt => opt.value) })}
+          onChange={options => {
+            if (Array.isArray(options)) {
+              this.setState({ selectedOptions: options.map(opt => opt.value) });
+            }
+          }}
           options={allOptions}
           components={{
             Option: InputOption
@@ -280,7 +283,11 @@ class PropChanges extends Component<
         <h4>Sort Props</h4>
         <Select
           defaultValue={filterOptions[0]}
-          onChange={option => this.setState({ filterValue: option.value })}
+          onChange={option => {
+            if (!Array.isArray(option)) {
+              this.setState({ filterValue: option? option.value : '' });
+            }
+          }}
           options={filterOptions}
         />
         <Table>

flow-typed/npm/react-router-dom_v4.x.x.js

@@ -0,0 +1,174 @@
+// flow-typed signature: b7f98c6a7afc32bb93cf5d468d7d757a
+// flow-typed version: b999c93144/react-router-dom_v4.x.x/flow_>=v0.63.x
+
+declare module "react-router-dom" {
+  declare export var BrowserRouter: React$ComponentType<{|
+    basename?: string,
+    forceRefresh?: boolean,
+    getUserConfirmation?: GetUserConfirmation,
+    keyLength?: number,
+    children?: React$Node
+  |}>
+
+  declare export var HashRouter: React$ComponentType<{|
+    basename?: string,
+    getUserConfirmation?: GetUserConfirmation,
+    hashType?: "slash" | "noslash" | "hashbang",
+    children?: React$Node
+  |}>
+
+  declare export var Link: React$ComponentType<{
+    className?: string,
+    to: string | LocationShape,
+    replace?: boolean,
+    children?: React$Node
+  }>
+
+  declare export var NavLink: React$ComponentType<{
+    to: string | LocationShape,
+    activeClassName?: string,
+    className?: string,
+    activeStyle?: Object,
+    style?: Object,
+    isActive?: (match: Match, location: Location) => boolean,
+    children?: React$Node,
+    exact?: boolean,
+    strict?: boolean
+  }>
+
+  // NOTE: Below are duplicated from react-router. If updating these, please
+  // update the react-router and react-router-native types as well.
+  declare export type Location = {
+    pathname: string,
+    search: string,
+    hash: string,
+    state?: any,
+    key?: string
+  };
+
+  declare export type LocationShape = {
+    pathname?: string,
+    search?: string,
+    hash?: string,
+    state?: any
+  };
+
+  declare export type HistoryAction = "PUSH" | "REPLACE" | "POP";
+
+  declare export type RouterHistory = {
+    length: number,
+    location: Location,
+    action: HistoryAction,
+    listen(
+      callback: (location: Location, action: HistoryAction) => void
+    ): () => void,
+    push(path: string | LocationShape, state?: any): void,
+    replace(path: string | LocationShape, state?: any): void,
+    go(n: number): void,
+    goBack(): void,
+    goForward(): void,
+    canGo?: (n: number) => boolean,
+    block(
+      callback: (location: Location, action: HistoryAction) => boolean
+    ): void,
+    // createMemoryHistory
+    index?: number,
+    entries?: Array<Location>
+  };
+
+  declare export type Match = {
+    params: { [key: string]: ?string },
+    isExact: boolean,
+    path: string,
+    url: string
+  };
+
+  declare export type ContextRouter = {|
+    history: RouterHistory,
+    location: Location,
+    match: Match,
+    staticContext?: StaticRouterContext
+  |};
+
+  declare type ContextRouterVoid = {
+    history: RouterHistory | void,
+    location: Location | void,
+    match: Match | void,
+    staticContext?: StaticRouterContext | void
+  };
+
+  declare export type GetUserConfirmation = (
+    message: string,
+    callback: (confirmed: boolean) => void
+  ) => void;
+
+  declare export type StaticRouterContext = {
+    url?: string
+  };
+
+  declare export var StaticRouter: React$ComponentType<{|
+    basename?: string,
+    location?: string | Location,
+    context: StaticRouterContext,
+    children?: React$Node
+  |}>
+
+  declare export var MemoryRouter: React$ComponentType<{|
+    initialEntries?: Array<LocationShape | string>,
+    initialIndex?: number,
+    getUserConfirmation?: GetUserConfirmation,
+    keyLength?: number,
+    children?: React$Node
+  |}>
+
+  declare export var Router: React$ComponentType<{|
+    history: RouterHistory,
+    children?: React$Node
+  |}>
+
+  declare export var Prompt: React$ComponentType<{|
+    message: string | ((location: Location) => string | boolean),
+    when?: boolean
+  |}>
+
+  declare export var Redirect: React$ComponentType<{|
+    to: string | LocationShape,
+    push?: boolean,
+    from?: string,
+    exact?: boolean,
+    strict?: boolean
+  |}>
+
+  declare export var Route: React$ComponentType<{|
+    component?: React$ComponentType<*>,
+    render?: (router: ContextRouter) => React$Node,
+    children?: React$ComponentType<ContextRouter> | React$Node,
+    path?: string | Array<string>,
+    exact?: boolean,
+    strict?: boolean,
+    location?: LocationShape,
+    sensitive?: boolean
+  |}>
+
+  declare export var Switch: React$ComponentType<{|
+    children?: React$Node,
+    location?: Location
+  |}>
+
+  declare export function withRouter<Props : {}, Component: React$ComponentType<Props>>(WrappedComponent: Component) : React$ComponentType<$Diff<React$ElementConfig<$Supertype<Component>>, ContextRouterVoid>>;
+
+  declare type MatchPathOptions = {
+    path?: string,
+    exact?: boolean,
+    sensitive?: boolean,
+    strict?: boolean
+  };
+
+  declare export function matchPath(
+    pathname: string,
+    options?: MatchPathOptions | string,
+    parent?: Match
+  ): null | Match;
+
+  declare export function generatePath(pattern?: string, params?: Object): string;
+}

package.json

@@ -55,7 +55,7 @@
     "eslint": "^4.6.1",
     "eslint-plugin-react": "^7.3.0",
     "extract-react-types-loader": "^0.3.0",
-    "flow-bin": "^0.72.0",
+    "flow-bin": "^0.91.0",
     "gh-pages": "^1.1.0",
     "html-webpack-plugin": "^2.30.1",
     "husky": "^0.14.3",