Merge branch 'master' into master

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 
 docker_defaults: &docker_defaults
     docker:
-        - image: cypress/browsers:node12.18.0-chrome83-ff77
+        - image: cypress/browsers:node16.17.1-chrome106-ff105-edge
           environment:
               TERM: xterm
     working_directory: ~/project/repo

.codesandbox/ci.json

@@ -1,5 +1,6 @@
 {
   "buildCommand": "build",
   "packages": ["packages/*"],
-  "sandboxes": ["nfmxw"]
+  "sandboxes": ["nfmxw"],
+  "node": "16"
 }

.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: 'npm'
+    directory: '/'
+    schedule:
+      interval: 'weekly'
+    ignore:
+      - dependency-name: '*'
+        update-types:
+          ['version-update:semver-minor', 'version-update:semver-patch']

.github/workflows/release.yml

@@ -5,8 +5,15 @@ on:
     branches:
       - master
 
+permissions:
+  contents: read
+
 jobs:
   release:
+    permissions:
+      # for changesets/action
+      contents: write
+      pull-requests: write
     name: Release
     runs-on: ubuntu-latest
     steps:
@@ -16,10 +23,10 @@ jobs:
           # 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
+      - name: Setup Node.js 16.x
         uses: actions/setup-node@master
         with:
-          node-version: 10.x
+          node-version: 16.x
 
       - name: Install Yarn
         run: npm install --global yarn

.nvmrc

@@ -1 +1 @@
-12
+16

README.md

@@ -5,7 +5,7 @@
 
 # React-Select
 
-The Select control for [React](https://reactjs.com). Initially built for use in [KeystoneJS](http://www.keystonejs.com).
+The Select control for [React](https://reactjs.org). Initially built for use in [KeystoneJS](https://www.keystonejs.com).
 
 See [react-select.com](https://www.react-select.com) for live demos and comprehensive docs.
 
@@ -136,8 +136,8 @@ If you don't provide these props, you can set the initial value of the state the
 
 React-select exposes two public methods:
 
-- `focus()` - focus the control programatically
-- `blur()` - blur the control programatically
+- `focus()` - focus the control programmatically
+- `blur()` - blur the control programmatically
 
 ## Customisation
 
@@ -151,15 +151,15 @@ Check the docs for more information on:
 - [Advanced use-cases](https://www.react-select.com/advanced)
 - [TypeScript guide](https://www.react-select.com/typescript)
 
-## Typescript
+## TypeScript
 
-The v5 release represents a rewrite from JavaScript to Typescript. The types for v4 and earlier releases are available at [@types](https://www.npmjs.com/package/@types/react-select). See the [TypeScript guide](https://www.react-select.com/typescript) for how to use the types starting with v5.
+The v5 release represents a rewrite from JavaScript to TypeScript. The types for v4 and earlier releases are available at [@types](https://www.npmjs.com/package/@types/react-select). See the [TypeScript guide](https://www.react-select.com/typescript) for how to use the types starting with v5.
 
 # Thanks
 
 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), [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 ❤️
 

docs/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @react-select/docs
 
+## 3.1.2
+
+### Patch Changes
+
+- [`0ca2d5ba`](https://github.com/JedWatson/react-select/commit/0ca2d5ba4aa42fb2a1bf033bcee660a293e39e50) [#5431](https://github.com/JedWatson/react-select/pull/5431) Thanks [@nderkim](https://github.com/nderkim)! - Change `class` components to `functional` components
+
+- Updated dependencies [0ca2d5ba]:
+  - react-select@undefined
+
 ## 3.1.1
 
 ### Patch Changes
@@ -44,7 +53,7 @@
 
 ### Minor Changes
 
-- [2baf5a9d](https://github.com/JedWatson/react-select/commit/2baf5a9df2f4f56f9c9374fcb879cb5259a6d8d0) [#4414](https://github.com/JedWatson/react-select/pull/4414) Thanks [@ebonow](https://github.com/ebonow)! - Add ariaLiveMessages prop for internationalization and other customizations
+- [2baf5a9d](https://github.com/JedWatson/react-select/commit/2baf5a9df2f4f56f9c9374fcb879cb5259a6d8d0) [#4414](https://github.com/JedWatson/react-select/pull/4414) Thanks [@ebonow](https://github.com/ebonow)! - Add ariaLiveMessages prop for internationalization and other customisations
 
 ### Patch Changes
 

docs/ExampleWrapper.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react'; // eslint-disable-line no-unused-vars
 import { CSSObject } from '@emotion/serialize';
-import { Component } from 'react';
+import { ReactNode, useState } from 'react';
 import CodeSandboxer, { GitInfo } from 'react-codesandboxer';
 import { CodeBlock } from './markdown/renderer';
 import pkg from '../packages/react-select/package.json';
@@ -20,99 +20,69 @@ const gitInfo: GitInfo = {
 const sourceUrl = `https://github.com/${gitInfo.account}/react-select/tree/${gitInfo.branch}`;
 
 interface Props {
+  children?: ReactNode;
   readonly label: string;
   readonly raw: { readonly default: string };
   readonly urlPath: string;
   readonly isEditable?: boolean;
 }
 
-interface State {
-  readonly showCode: boolean;
-}
-
-export default class ExampleWrapper extends Component<Props, State> {
-  state: State = { showCode: false };
-  static defaultProps = { isEditable: true };
-
-  renderCodeSample = () => {
-    let { raw } = this.props;
-    let { showCode } = this.state;
-
-    if (!showCode || !raw) {
-      return null;
-    } else {
-      return <CodeBlock literal={raw.default} codeinfo={['jsx']} />;
-    }
-  };
-
-  renderSourceViewOption = () => {
-    let { raw } = this.props;
-    let { showCode } = this.state;
-
-    if (!raw) {
-      return (
-        <AAction
-          href={`${sourceUrl}/${this.props.urlPath}`}
-          target="_blank"
-          title="View Source"
-        >
-          <SourceIcon />
-        </AAction>
-      );
-    } else {
-      return (
-        <ButtonAction
-          onClick={() => this.setState({ showCode: !showCode })}
-          title="View Source"
-        >
-          <SourceIcon />
-        </ButtonAction>
-      );
-    }
-  };
-
-  renderCSBButton = () => {
-    let { isEditable, raw, urlPath } = this.props;
+export default ({
+  children,
+  label,
+  raw,
+  urlPath,
+  isEditable = true,
+}: Props) => {
+  const [showCode, setShowCode] = useState(false);
 
-    if (isEditable) {
-      return (
-        <CodeSandboxer
-          example={raw.default}
-          examplePath={urlPath}
-          pkgJSON={pkg}
-          gitInfo={gitInfo}
-          dependencies={{
-            [pkg.name]: pkg.version,
-          }}
-        >
-          {({ isLoading }) => (
-            <ButtonAction title="Edit in CodeSandbox">
-              {isLoading ? <Spinner /> : <NewWindowIcon />}
+  return (
+    <div>
+      <ExampleHeading>
+        <h4>{label}</h4>
+        <Actions>
+          {raw ? (
+            <ButtonAction
+              onClick={() => setShowCode((prev) => !prev)}
+              title="View Source"
+            >
+              <SourceIcon />
             </ButtonAction>
+          ) : (
+            <AAction
+              href={`${sourceUrl}/${urlPath}`}
+              target="_blank"
+              title="View Source"
+            >
+              <SourceIcon />
+            </AAction>
           )}
-        </CodeSandboxer>
-      );
-    } else {
-      return null;
-    }
-  };
-
-  render() {
-    return (
-      <div>
-        <ExampleHeading>
-          <h4>{this.props.label}</h4>
-          <Actions>
-            {this.renderSourceViewOption()}
-            {this.renderCSBButton()}
-          </Actions>
-        </ExampleHeading>
-        {this.renderCodeSample()}
-        {this.props.children}
-      </div>
-    );
-  }
-}
+          {isEditable ? (
+            <CodeSandboxer
+              example={raw.default}
+              examplePath={urlPath}
+              pkgJSON={pkg}
+              gitInfo={gitInfo}
+              dependencies={{
+                [pkg.name]: pkg.version,
+              }}
+            >
+              {({ isLoading }) => (
+                <ButtonAction title="Edit in CodeSandbox">
+                  {isLoading ? <Spinner /> : <NewWindowIcon />}
+                </ButtonAction>
+              )}
+            </CodeSandboxer>
+          ) : null}
+        </Actions>
+      </ExampleHeading>
+      {showCode && raw ? (
+        <CodeBlock literal={raw.default} codeinfo={['jsx']} />
+      ) : null}
+      {children}
+    </div>
+  );
+};
 
 const ExampleHeading = (props: any) => (
   <div
@@ -213,7 +183,7 @@ const Actions = (props: JSX.IntrinsicElements['div']) => (
       alignItems: 'center',
       display: 'flex',
       justifyContent: 'flex-end',
-      opacity: 0.2,
+      opacity: 0.8,
       transition: 'opacity 140ms',
       transitionDelay: '140ms',