Merge branch 'master' into memoize-strip-diacritics-for-input

.changeset/bright-tigers-tie.md

@@ -0,0 +1,5 @@
+---
+'react-select': minor
+---
+
+Use accessor props to get value and label in `compareOption`

.changeset/calm-pianos-joke.md

@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Set event listeners to be non-passive to remove Chrome console warnings

.changeset/shaggy-chairs-poke.md

@@ -0,0 +1,6 @@
+---
+'@react-select/docs': minor
+'react-select': minor
+---
+
+Add ariaLiveMessages prop for internationalization and other customizations

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 
 docker_defaults: &docker_defaults
     docker:
-        - image: cypress/base:8
+        - image: cypress/browsers:node12.18.0-chrome83-ff77
           environment:
               TERM: xterm
     working_directory: ~/project/repo
@@ -17,9 +17,10 @@ install_steps: &install_steps
         - restore_cache:
               name: Restore node_modules cache
               keys:
-                  - dependency-cache-{{ .Branch }}-{{ checksum "package.json" }}
+                  - dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
                   - dependency-cache-{{ .Branch }}-
                   - dependency-cache-
+                  - cache-{{ checksum "package.json" }}
         - run:
               name: Installing Dependencies
               command: |
@@ -28,7 +29,7 @@ install_steps: &install_steps
               name: Save node_modules cache
               key: dependency-cache-{{ .Branch }}-{{ checksum "package.json" }}
               paths:
-                  - node_modules/
+                  - ~/.cache
         - persist_to_workspace:
               root: ~/project
               paths:
@@ -56,6 +57,7 @@ jobs:
             - run:
                   name: Running unit tests
                   command: |
+                      yarn prettier:check
                       yarn lint
                       yarn flow check --flowconfig-name=.flowconfig-ci
                       yarn test:jest
@@ -67,4 +69,7 @@ jobs:
             - run:
                   name: Running E2E tests
                   command: |
+                      yarn global add cypress
+                      yarn install --silent
+                      yarn cypress install
                       yarn e2e

.codesandbox/ci.json

@@ -0,0 +1,8 @@
+
+
+{
+  "buildCommand": "build",
+  "packages": ["packages/*"],
+  "sandboxes": ["nfmxw"]
+}
+

.eslintignore

@@ -1,7 +1,7 @@
 coverage/*
 cypress/plugins/*
 cypress/support/*
-dist/*
+**/dist/*
 flow-typed/*
 lib/*
 node_modules/*

.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+  extends: ['plugin:react-hooks/recommended'],
   parser: 'babel-eslint',
   env: {
     browser: true,
@@ -14,7 +15,7 @@ module.exports = {
         argsIgnorePattern: '^event$',
         ignoreRestSiblings: true,
         vars: 'all',
-        varsIgnorePattern: 'jsx|emotionJSX'
+        varsIgnorePattern: 'jsx|emotionJSX',
       },
     ],
     curly: [2, 'multi-line'],

.github/ISSUE_TEMPLATE.md

@@ -3,13 +3,21 @@
 Before creating an issue...
 
 # Are you asking a question?
-Please don't file GitHub issues to ask questions. Use Stack Overflow with a [#react-select](http://stackoverflow.com/questions/tagged/react-select) tag
+Please don't file GitHub issues to ask questions. Use Stack Overflow with a [#react-select](http://stackoverflow.com/questions/tagged/react-select) tag.
 
 
 # Are you reporting a bug or runtime error?
 Please include a test case that demonstrates the issue you're reporting!
+
 This is very helpful to maintainers in order to help us see the issue you're seeing.
 
+Please note we are currently only directing our efforts towards the current major (v3) version and beyond.
+
+We understand this might be inconvenient but it is in the best interest of supporting the broader community and to sustain the `react-select` project going forward.
+
+To report bugs against react-select v3 please fork the following code-sandbox:
+https://codesandbox.io/s/react-select-v3-sandbox-jgdch
+
 To report bugs against react-select v2 please fork the following code-sandbox:
 https://codesandbox.io/s/k5rvn9z3lv
 

.github/workflows/release.yml

@@ -12,6 +12,9 @@ jobs:
     steps:
       - name: Checkout Repo
         uses: actions/checkout@master
+        with:
+          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits 
+          fetch-depth: 0
 
       - name: Setup Node.js 10.x
         uses: actions/setup-node@master

.nvmrc

@@ -1 +1 @@
-10
+12

.prettierignore

@@ -1 +1,8 @@
-package.json
+coverage/*
+cypress/plugins/*
+cypress/support/*
+**/dist/*
+flow-typed/*
+lib/*
+node_modules/*
+**/node_modules/*

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018 Jed Watson
+Copyright (c) 2021 Jed Watson
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -9,10 +9,10 @@ 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.
-
 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.
 
+For the story behind this component, watch Jed's talk at React Conf 2019 - [building React Select](https://youtu.be/yS0jUnmBujE)
+
 Features include:
 
 - Flexible approach to data, with customisable functions
@@ -21,11 +21,11 @@ Features include:
 - 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.
-
-See our [upgrade guide](https://react-select.com/upgrade-guide) for a breakdown on how to upgrade from v1 to v2.
+## Using an older version?
 
-The old docs and examples will continue to be available at [v1.react-select.com](https://v1.react-select.com).
+- [v2 to v3 upgrade guide](https://github.com/JedWatson/react-select/issues/3585)
+- [v1 to v2 upgrade guide](https://react-select.com/upgrade-guide)
+- React Select v1 documentation and examples are available at [v1.react-select.com](https://v1.react-select.com)
 
 # Installation and usage
 
@@ -36,7 +36,7 @@ yarn add react-select
 ```
 
 Then use it in your app:
-
+#### With React Component
 ```js
 import React from 'react';
 import Select from 'react-select';
@@ -71,6 +71,32 @@ class App extends React.Component {
 }
 ```
 
+#### With React Hooks
+```js
+import React, { useState } from "react";
+import Select from "react-select";
+
+const options = [
+  { value: 'chocolate', label: 'Chocolate' },
+  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'vanilla', label: 'Vanilla' },
+];
+
+export default function App() {
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  return (
+    <div className="App">
+      <Select
+        defaultValue={selectedOption}
+        onChange={setSelectedOption}
+        options={options}
+      />
+    </div>
+  );
+}
+```
+
 ## Props
 
 Common props you may want to specify include:
@@ -126,10 +152,10 @@ Check the docs for more information on:
 
 Thank you to everyone who has contributed to this project. It's been a wild ride.
 
-If you like React Select, you should [follow me on twitter](https://twitter.com/jedwatson)
+If you like React Select, you should [follow me on twitter](https://twitter.com/jedwatson)!
 
-Shout out to [Joss Mackison](https://github.com/jossmac), [Charles Lee](https://github.com/gwyneplaine), [Ben Conolly](https://github.com/Noviny), [Dave Brotherstone](https://github.com/bruderstein), [Brian Vaughn](https://github.com/bvaughn), and the Atlassian Design System team ❤️
+Shout out to [Joss Mackison](https://github.com/jossmac), [Charles Lee](https://github.com/gwyneplaine), [Ben Conolly](https://github.com/Noviny), [Tom Walker](https://github.com/bladey), [Nathan Bierema](https://github.com/Methuselah96), [Eric Bonow](https://github.com/ebonow), [Mitchell Hamilton](https://github.com/mitchellhamilton), [Dave Brotherstone](https://github.com/bruderstein), [Brian Vaughn](https://github.com/bvaughn), and the [Atlassian Design System](https://atlassian.design) team who along with many other contributors have made this possible ❤️
 
 ## License
 
-MIT Licensed. Copyright (c) Jed Watson 2019.
+MIT Licensed. Copyright (c) Jed Watson 2021.

babel.config.js

@@ -1,11 +1,8 @@
 module.exports = {
   plugins: [
-    'emotion',
+    '@emotion/babel-plugin',
     ['@babel/plugin-proposal-class-properties', { loose: true }],
+    '@babel/plugin-transform-runtime',
   ],
-  presets: [
-    ['@babel/preset-env', { loose: true }],
-    '@babel/preset-react',
-    '@babel/preset-flow',
-  ],
+  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
 };