V3.0.0

.changeset/5877155c/changes.json

@@ -0,0 +1,10 @@
+{
+  "releases": [{ "name": "react-select", "type": "major" }],
+  "dependents": [
+    {
+      "name": "@react-select/docs",
+      "type": "patch",
+      "dependencies": ["react-select"]
+    }
+  ]
+}

.changeset/5877155c/changes.md

@@ -0,0 +1,5 @@
+- Upgrade emotion dependency from 9.x to 10.x [#3321](https://github.com/JedWatson/react-select/pull/3321)
+- Normalize Values [#3416](https://github.com/JedWatson/react-select/pull/3416)
+- Separate entrypoints for Async, Creatable and makeAnimated [#3541](https://github.com/JedWatson/react-select/pull/3541)
+- UMD builds deprecated
+- required react peer-dependecy of 16.8

.changeset/README.md

@@ -0,0 +1,36 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@atlaskit/build-releases`, a build tool that works with `bolt` to help you release components from a mono-repository. You can find the full documentation for it [here](https://www.npmjs.com/package/@atlaskit/build-releases)
+
+To help you get started though, here are some things you should know about this folder:
+
+## Changesets are automatically generated
+
+Changesets are generated by the `build-releases changeset` command, though it may have been given a new name within your repository. As long as you are following a changeset release flow, you shouldn't have any problems.
+
+## Each changeset is its own folder
+
+We use hashes by default for these folder names to avoid collisions when generating them, but there's no harm that will come from renaming them.
+
+## Changesets are automatically removed
+
+When `build-releases version` or equivalent command is run, all the changeset folders are removed. This is so we only ever use a changeset once. This makes this a very bad place to store any other information.
+
+## Changesets come in two parts
+
+You should treat these parts quite differently:
+
+- `changes.md` is a file you should feel free to edit as much as you want. It will be prepended to your changelog when you next run your version command.
+- `changes.json` is a file that includes information about releases, what should be versioned by the version command. We strongly recommend against editing this directly, as you may make a new changeset that puts your bolt repository into an invalid state.
+
+## I want to edit the information in a `changes.json` - how do I do it safely?
+
+The best option is to make a new changeset using the changeset command, copy over the `changes.md`, then delete the old changeset.
+
+## Can I rename the folder for my changeset?
+
+Absolutely! We need unique hashes to make changesets play nicely with git, but changing your folder from our hash to your own name isn't going to cause any problems.
+
+## Can I manually delete changesets?
+
+You can, but you should be aware this will remove the intent to release communicated by the changeset, and should be done with caution.

.changeset/config.js

@@ -0,0 +1,165 @@
+'use strict';
+require('dotenv').config();
+/*
+Hey, welcome to the changeset config! This file has been generated
+for you with the default configs we use, and some comments around
+what options mean, so that it's easy to customise your workflow.
+
+You should update this as you need to craft your workflow.
+
+Config provided by a CI command takes precedence over the contents of this file.
+
+If a config option isn't present here, we will fall back to the defaults.
+*/
+
+const changesetOptions = {
+  // If true, we will automatically commit the changeset when the command is run
+  commit: false,
+};
+
+// This function takes information about a changeset to generate an entry for it in your
+// changelog. We provide the full changeset object as well as the version.
+// It may be a good idea to replace the commit hash with a link to the commit.
+
+/* the default shape is:
+- [patch] ABCDEFG:
+
+  A summary message you wrote, indented
+*/
+
+function makeQuery(commitShas) {
+  return `
+    query {
+      ${commitShas
+        .map(
+          (commitSha, i) =>
+            `a${i}: search(
+          type: ISSUE
+          query: "sha:${commitSha}+repo:JedWatson/react-select"
+          first: 1
+        ) {
+          edges {
+            node {
+              ... on PullRequest {
+                number
+                author {
+                  login
+                }
+              }
+            }
+          }
+        }`
+        )
+        .join('\n')}}
+  `;
+}
+
+const fetch = require('node-fetch');
+const DataLoader = require('dataloader');
+
+const GHDataLoader = new DataLoader(async commitShas => {
+  if (!process.env.GITHUB_TOKEN) {
+    throw new Error(
+      'Please create a GitHub personal access token at https://github.com/settings/tokens/new and add it to a .env file in the root of the repository'
+    );
+  }
+  let data = await fetch(
+    `https://api.github.com/graphql?access_token=${process.env.GITHUB_TOKEN}`,
+    {
+      method: 'POST',
+      body: JSON.stringify({ query: makeQuery(commitShas) }),
+    }
+  ).then(x => x.json());
+
+  // this is mainly for the case where there's an authentication problem
+  if (!data.data) {
+    throw new Error(
+      'An error occurred when fetching data from GitHub\n' +
+        JSON.stringify(data)
+    );
+  }
+  return Object.values(data.data).map(({ edges }) => {
+    if (
+      edges[0] &&
+      edges[0].node &&
+      typeof edges[0].node.number === 'number' &&
+      edges[0].node.author &&
+      typeof edges[0].node.author.login === 'string'
+    ) {
+      return {
+        username: edges[0].node.author.login,
+        number: edges[0].node.number,
+      };
+    }
+    return null;
+  });
+});
+
+function getLinkedCommit(commitSha) {
+  return `[${commitSha}](https://github.com/JedWatson/react-select/commit/${commitSha})`;
+}
+
+const getReleaseLine = async (changeset, versionType) => {
+  const indentedSummary = changeset.summary
+    .split('\n')
+    .map(l => `  ${l}`.trimRight())
+    .join('\n');
+  let data = await GHDataLoader.load(changeset.commit);
+  if (data !== null) {
+    let { number, username } = data;
+    return `- [${versionType}] ${getLinkedCommit(
+      changeset.commit
+    )} [#${number}](https://github.com/JedWatson/react-select/pulls/${number}) Thanks [@${username}](https://github.com/${username}):\n\n${indentedSummary}`;
+  }
+  return `- [${versionType}] ${getLinkedCommit(
+    changeset.commit
+  )}:\n\n${indentedSummary}`;
+};
+
+// This function takes information about what dependencies we are updating in the package.
+// It provides an array of related changesets, as well as the dependencies updated.
+
+/*
+- Updated dependencies: [ABCDEFG]:
+- Updated dependencies: [HIJKLMN]:
+  - [email protected]
+  - [email protected]
+*/
+const getDependencyReleaseLine = async (changesets, dependenciesUpdated) => {
+  if (dependenciesUpdated.length === 0) return '';
+
+  const changesetLinks = changesets.map(
+    changeset =>
+      `- Updated dependencies [${getLinkedCommit(changeset.commit)}]:`
+  );
+
+  const updatedDepenenciesList = dependenciesUpdated.map(
+    dependency => `  - ${dependency.name}@${dependency.version}`
+  );
+
+  return [...changesetLinks, ...updatedDepenenciesList].join('\n');
+};
+
+const versionOptions = {
+  // If true, we will automatically commit the version updating when the command is run
+  commit: false,
+  // Adds a skipCI flag to the commit - only valid if `commit` is also true.
+  skipCI: false,
+  // Do not modify the `changelog.md` files for packages that are updated
+  noChangelog: false,
+  // A function that returns a string. It takes in options about a change. This allows you to customise your changelog entries
+  getReleaseLine,
+  // A function that returns a string. It takes in options about when a pacakge is updated because
+  getDependencyReleaseLine,
+};
+
+const publishOptions = {
+  // This sets whether unpublished packages are public by default. We err on the side of caution here.
+  public: true,
+};
+
+module.exports = {
+  versionOptions,
+  changesetOptions,
+  publishOptions,
+};

.eslintignore

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

.eslintrc.js

@@ -14,6 +14,7 @@ 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

HISTORY.md

@@ -1,4 +1,14 @@
 # React-Select
+
+## v3.0.0 / ????
+### Breaking
+* Upgrade emotion dependency from 9.x to 10.x [#3321](https://github.com/JedWatson/react-select/pull/3321)
+* Normalize Values [#]
+* Separate entrypoints for Async, Creatable and makeAnimated [#3541](https://github.com/JedWatson/react-select/pull/3541)
+* Animated components exports now removed, these can be retrieved from a call to makeAnimated();
+* UMD builds deprecated
+* required react peer-dependecy of 16.8
+
 ## v2.4.4 / 2019-05-27
 ### BugFixes
 * [#3540] Fixed active styles previously being applied to disabled options. Thanks [@risenforces](https://github.com/risenforces)

babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  plugins: ['emotion', '@babel/plugin-proposal-class-properties'],
+  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
+};

docs/App/Footer.js

@@ -1,6 +1,7 @@
 // @flow
-
-import React, { type Node } from 'react';
+/** @jsx jsx */
+import { type Node } from 'react';
+import { jsx } from '@emotion/core';
 
 // const smallDevice = '@media (max-width: 769px)';
 const largeDevice = '@media (min-width: 770px)';

docs/App/GitHubButton.js

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

docs/App/Header.js

@@ -1,10 +1,11 @@
 // @flow
-
+/** @jsx jsx */
 import fetch from 'unfetch';
-import React, { Component, type Node } from 'react';
+import { Component, type Node } from 'react';
+import { jsx } from '@emotion/core';
 import { withRouter } from 'react-router-dom';
 
-import Select from '../../src';
+import Select from 'react-select';
 import type { RouterProps } from '../types';
 import GitHubButton from './GitHubButton';
 import TwitterButton from './TwitterButton';
@@ -175,16 +176,6 @@ 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}
@@ -260,7 +251,7 @@ const Content = ({ onChange, stars }) => (
             }
           }}
           value={null}
-          placeholder="🎉 What's new in V2"
+          placeholder="🎉 Feature Highlights"
           styles={headerSelectStyles}
         />
       </div>

docs/App/PageNav.js

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

docs/App/TwitterButton.js

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

docs/App/components.js

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