Merge branch 'master' of github.com:vadimka123/react-select into fix-…

…scroll-issue

.babelrc

@@ -0,0 +1,9 @@
+{
+  "plugins": ["emotion", "@babel/plugin-proposal-class-properties"],
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-flow"
+  ],
+  "ignore": ["node_modules"]
+}

.eslintignore

@@ -5,4 +5,3 @@ dist/*
 flow-typed/*
 lib/*
 node_modules/*
-**/node_modules/*

.eslintrc.js

@@ -14,7 +14,6 @@ module.exports = {
         argsIgnorePattern: '^event$',
         ignoreRestSiblings: true,
         vars: 'all',
-        varsIgnorePattern: 'jsx|emotionJSX'
       },
     ],
     curly: [2, 'multi-line'],

.flowconfig

@@ -1,7 +1,7 @@
 [ignore]
+./lib/.*
+./dist/.*
 .*/node_modules/cypress/.*
-
-[untyped]
 .*/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

README.md

@@ -1,5 +1,5 @@
 [![NPM](https://img.shields.io/npm/v/react-select.svg)](https://www.npmjs.com/package/react-select)
-[![CircleCI](https://circleci.com/gh/JedWatson/react-select/tree/master.svg?style=shield)](https://circleci.com/gh/JedWatson/react-select/tree/master)
+[![CircleCI](https://circleci.com/gh/JedWatson/react-select/tree/master.svg?style=svg)](https://circleci.com/gh/JedWatson/react-select/tree/master)
 [![Coverage Status](https://coveralls.io/repos/JedWatson/react-select/badge.svg?branch=master&service=github)](https://coveralls.io/github/JedWatson/react-select?branch=master)
 [![Supported by Thinkmill](https://thinkmill.github.io/badge/heart.svg)](http://thinkmill.com.au/?utm_source=github&utm_medium=badge&utm_campaign=react-select)
 
@@ -9,17 +9,17 @@ The Select control for [React](https://reactjs.com). Initially built for use in
 
 See [react-select.com](https://www.react-select.com) for live demos and comprehensive docs.
 
-See our [upgrade guide](https://github.com/JedWatson/react-select/issues/3585) for a breakdown on how to upgrade from v2 to v3.
+## Version 2 🎉
 
-React Select is funded by [Thinkmill](https://www.thinkmill.com.au) and [Atlassian](https://atlaskit.atlassian.com). It represents a whole new approach to developing powerful React.js components that _just work_ out of the box, while being extremely customisable.
+React Select v2.0.0 is a complete rewrite, funded by [Thinkmill](https://www.thinkmill.com.au) and [Atlassian](https://atlaskit.atlassian.com). It represents a whole new approach to developing powerful React.js components that _just work_ out of the box, while being extremely customisable.
 
-Features include:
+Improvements include:
 
-- Flexible approach to data, with customisable functions
-- Extensible styling API with [emotion](https://emotion.sh)
-- Component Injection API for complete control over the UI behaviour
-- Controllable state props and modular architecture
-- Long-requested features like option groups, portal support, animation, and more
+* Flexible approach to data, with customisable functions
+* Extensible styling API with [emotion](https://emotion.sh)
+* Component Injection API for complete control over the UI behaviour
+* Controllable state props and modular architecture
+* Long-requested features like option groups, portal support, animation, and more
 
 If you're interested in the background, watch Jed's [talk on React Select](https://youtu.be/Eb2wy-HNGMo) at ReactNYC in March 2018.
 
@@ -44,17 +44,17 @@ import Select from 'react-select';
 const options = [
   { value: 'chocolate', label: 'Chocolate' },
   { value: 'strawberry', label: 'Strawberry' },
-  { value: 'vanilla', label: 'Vanilla' },
+  { value: 'vanilla', label: 'Vanilla' }
 ];
 
 class App extends React.Component {
   state = {
     selectedOption: null,
-  };
-  handleChange = selectedOption => {
+  }
+  handleChange = (selectedOption) => {
     this.setState({ selectedOption });
     console.log(`Option selected:`, selectedOption);
-  };
+  }
   render() {
     const { selectedOption } = this.state;
 
@@ -73,51 +73,51 @@ class App extends React.Component {
 
 Common props you may want to specify include:
 
-- `autoFocus` - focus the control when it mounts
-- `className` - apply a className to the control
-- `classNamePrefix` - apply classNames to inner elements with the given prefix
-- `isDisabled` - disable the control
-- `isMulti` - allow the user to select multiple values
-- `isSearchable` - allow the user to search for matching options
-- `name` - generate an HTML input with this name, containing the current value
-- `onChange` - subscribe to change events
-- `options` - specify the options the user can select from
-- `placeholder` - change the text displayed when no option is selected
-- `value` - control the current value
+* `autoFocus` - focus the control when it mounts
+* `className` - apply a className to the control
+* `classNamePrefix` - apply classNames to inner elements with the given prefix
+* `isDisabled` - disable the control
+* `isMulti` - allow the user to select multiple values
+* `isSearchable` - allow the user to search for matching options
+* `name` - generate an HTML input with this name, containing the current value
+* `onChange` - subscribe to change events
+* `options` - specify the options the user can select from
+* `placeholder` - change the text displayed when no option is selected
+* `value` - control the current value
 
 See the [props documentation](https://www.react-select.com/props) for complete documentation on the props react-select supports.
 
 ## Controllable Props
 
 You can control the following props by providing values for them. If you don't, react-select will manage them for you.
 
-- `value` / `onChange` - specify the current value of the control
-- `menuIsOpen` / `onMenuOpen` / `onMenuClose` - control whether the menu is open
-- `inputValue` / `onInputChange` - control the value of the search input (changing this will update the available options)
+* `value` / `onChange` - specify the current value of the control
+* `menuIsOpen` / `onMenuOpen` / `onMenuClose` - control whether the menu is open
+* `inputValue` / `onInputChange` - control the value of the search input (changing this will update the available options)
 
 If you don't provide these props, you can set the initial value of the state they control:
 
-- `defaultValue` - set the initial value of the control
-- `defaultMenuIsOpen` - set the initial open value of the menu
-- `defaultInputValue` - set the initial value of the search input
+* `defaultValue` - set the initial value of the control
+* `defaultMenuIsOpen` - set the initial open value of the menu
+* `defaultInputValue` - set the initial value of the search input
 
 ## Methods
 
 React-select exposes two public methods:
 
-- `focus()` - focus the control programatically
-- `blur()` - blur the control programatically
+* `focus()` - focus the control programatically
+* `blur()` - blur the control programatically
 
 ## Customisation
 
 Check the docs for more information on:
 
-- [Customising the styles](https://www.react-select.com/styles)
-- [Using custom components](https://www.react-select.com/components)
-- [Using the built-in animated components](https://www.react-select.com/home#animated-components)
-- [Creating an async select](https://www.react-select.com/async)
-- [Allowing users to create new options](https://www.react-select.com/creatable)
-- [Advanced use-cases](https://www.react-select.com/advanced)
+* [Customising the styles](https://www.react-select.com/styles)
+* [Using custom components](https://www.react-select.com/components)
+* [Using the built-in animated components](https://www.react-select.com/home#animated-components)
+* [Creating an async select](https://www.react-select.com/async)
+* [Allowing users to create new options](https://www.react-select.com/creatable)
+* [Advanced use-cases](https://www.react-select.com/advanced)
 
 # Thanks
 
@@ -129,4 +129,4 @@ Shout out to [Joss Mackison](https://github.com/jossmac), [Charles Lee](https://
 
 ## License
 
-MIT Licensed. Copyright (c) Jed Watson 2019.
+MIT Licensed. Copyright (c) Jed Watson 2018.

docs/App/Footer.js

@@ -1,7 +1,6 @@
 // @flow
-/** @jsx jsx */
-import { type Node } from 'react';
-import { jsx } from '@emotion/core';
+
+import React, { type Node } from 'react';
 
 // const smallDevice = '@media (max-width: 769px)';
 const largeDevice = '@media (min-width: 770px)';
@@ -58,7 +57,7 @@ export default function Footer(): Node {
   return (
     <Wrapper>
       <Container>
-        <p>Copyright © Jed Watson, 2019. MIT Licensed.</p>
+        <p>Copyright © Jed Watson, 2018. MIT Licensed.</p>
         <p>
           Thanks to <A href="https://www.thinkmill.com.au">Thinkmill</A> and{' '}
           <A href="https://www.atlassian.com">Atlassian</A> for supporting this

docs/App/GitHubButton.js

@@ -1,6 +1,6 @@
 // @flow
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
+
+import React from 'react';
 
 type Props = { count: number, repo: string };
 

docs/App/Header.js

@@ -1,11 +1,10 @@
 // @flow
-/** @jsx jsx */
+
 import fetch from 'unfetch';
-import { Component, type Node } from 'react';
-import { jsx } from '@emotion/core';
+import React, { Component, type Node } from 'react';
 import { withRouter } from 'react-router-dom';
 
-import Select from 'react-select';
+import Select from '../../src';
 import type { RouterProps } from '../types';
 import GitHubButton from './GitHubButton';
 import TwitterButton from './TwitterButton';
@@ -176,6 +175,16 @@ class Header extends Component<HeaderProps, HeaderState> {
               }}
             >
               React Select
+              <small
+                css={{
+                  color: '#B2D4FF',
+                  fontSize: '0.5em',
+                  position: 'relative',
+                  marginLeft: '0.25em',
+                }}
+              >
+                v2
+              </small>
             </h1>
             <Content
               stars={stars}
@@ -251,7 +260,7 @@ const Content = ({ onChange, stars }) => (
             }
           }}
           value={null}
-          placeholder="🎉 Feature Highlights"
+          placeholder="🎉 What's new in V2"
           styles={headerSelectStyles}
         />
       </div>

docs/App/PageNav.js

@@ -1,11 +1,10 @@
 // @flow
-/** @jsx jsx */
-import { Component, type ElementRef } from 'react';
-import { jsx } from '@emotion/core';
+
+import React, { Component, type ElementRef } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 import type { RouterProps } from '../types';
-import { animatedScrollTo } from 'react-select/src/utils';
+import { animatedScrollTo } from '../../src/utils';
 import routes from './routes';
 import ScrollSpy from './ScrollSpy';
 import Sticky from './Sticky';

docs/App/TwitterButton.js

@@ -1,6 +1,6 @@
 // @flow
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
+
+import React from 'react';
 
 const TwitterButton = () => (
   <div css={{ alignItems: 'center', display: 'inline-flex' }}>

docs/App/components.js

@@ -1,8 +1,7 @@
 // @flow
-/** @jsx jsx */
-import { Component, type ElementConfig } from 'react';
+
+import React, { Component, type ElementConfig } from 'react';
 import { Link, withRouter } from 'react-router-dom';
-import { jsx } from '@emotion/core';
 
 const navWidth = 180;
 const appWidth = 800;

docs/ExampleWrapper.js

@@ -1,21 +1,23 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core'; // eslint-disable-line no-unused-vars
-import { Component } from 'react';
+import React, { Component } from 'react';
 import CodeSandboxer from 'react-codesandboxer';
+import { replaceImports } from 'codesandboxer';
 import { CodeBlock } from './markdown/renderer';
-import pkg from '../packages/react-select/package.json';
-import { defaultTheme } from 'react-select';
+import pkg from '../package.json';
+import { colors } from '../src/theme';
 import Svg from './Svg';
 
-const { colors } = defaultTheme;
-
 const gitInfo = {
   account: 'JedWatson',
   repository: 'react-select',
-  branch: 'master',
+  branch: 'v2',
   host: 'github',
 };
 
+const importReplacements = [
+  ['src/*', 'react-select/lib/'],
+  ['src', 'react-select'],
+];
+
 const sourceUrl = `https://github.com/${gitInfo.account}/react-select/tree/${
   gitInfo.branch
 }`;
@@ -26,14 +28,26 @@ export default class ExampleWrapper extends Component {
   handleEnter = () => this.setState({ isHovered: true });
   handleLeave = () => this.setState({ isHovered: false });
   renderCodeSample = () => {
-    console.log(raw);
     let { raw } = this.props;
     let { showCode } = this.state;
 
     if (!showCode || !raw) {
       return null;
     } else {
-      return <CodeBlock literal={raw.default} codeinfo={['jsx']} />;
+      return (
+        <CodeBlock
+          codeinfo={['jsx']}
+          /*
+            CodeSandboxer currently does not export its tools to resolve absolute
+            paths, so we replace on relative paths. This will cause incorrect
+            displays if our examples are not from docs/examples/file.js
+          */
+          literal={replaceImports(raw, [
+            ['../../src/*', 'react-select/lib/'],
+            ['../../src', 'react-select'],
+          ])}
+        />
+      );
     }
   };
 
@@ -70,10 +84,11 @@ export default class ExampleWrapper extends Component {
     if (isEditable) {
       return (
         <CodeSandboxer
-          example={raw.default}
+          example={raw}
           examplePath={urlPath}
           pkgJSON={pkg}
           gitInfo={gitInfo}
+          importReplacements={importReplacements}
           dependencies={{
             [pkg.name]: pkg.version,
           }}

docs/PropTypes/Async.js

@@ -1,7 +1,7 @@
 import { Component } from 'react';
 
-import { type AsyncProps, defaultProps } from 'react-select/src/Async';
+import { type AsyncProps, defaultProps } from '../../src/Async';
 
 export default class Select extends Component<AsyncProps> {
-  defaultProps = defaultProps;
+  defaultProps = defaultProps
 }

docs/PropTypes/Creatable.js

@@ -1,7 +1,7 @@
 import { Component } from 'react';
 
-import { type CreatableProps, defaultProps } from 'react-select/src/Creatable';
+import { type CreatableProps, defaultProps } from '../../src/Creatable';
 
 export default class Select extends Component<CreatableProps> {
-  defaultProps = defaultProps;
+  defaultProps = defaultProps
 }

docs/PropTypes/Select.js

@@ -1,5 +1,6 @@
 import { Component } from 'react';
-import { type Props, defaultProps } from 'react-select/src/Select';
+import { type Props, defaultProps } from '../../src/Select';
+
 
 export default class Select extends Component<Props> {
   defaultProps = defaultProps;

docs/PropTypes/components/ClearIndicator.js

@@ -1,4 +1,4 @@
 import { Component } from 'react';
-import { type IndicatorProps } from 'react-select/src/components/indicators';
+import { type IndicatorProps } from '../../../src/components/indicators';
 
 export default class ClearIndicator extends Component<IndicatorProps> {}

docs/PropTypes/components/Control.js

@@ -1,4 +1,4 @@
 import { Component } from 'react';
-import { type ControlProps } from 'react-select/src/components/Control';
+import { type ControlProps } from '../../../src/components/Control';
 
 export default class Control extends Component<ControlProps> {}

docs/PropTypes/components/DropdownIndicator.js

@@ -1,4 +1,4 @@
 import { Component } from 'react';
-import { type IndicatorProps } from 'react-select/src/components/indicators';
+import { type IndicatorProps } from '../../../src/components/indicators';
 
 export default class DropdownIndicator extends Component<IndicatorProps> {}