Upgrades Emotion to v11

.changeset/olive-toys-try.md

@@ -0,0 +1,6 @@
+---
+'@react-select/docs': minor
+'react-select': minor
+---
+
+Upgrades Emotion dependency to v11.0.0

babel.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: [
-    'emotion',
+    '@emotion/babel-plugin',
     ['@babel/plugin-proposal-class-properties', { loose: true }],
     '@babel/plugin-transform-runtime',
   ],

docs/App/Footer.js

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

docs/App/GitHubButton.js

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

docs/App/Header.js

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import fetch from 'unfetch';
 import { Component, type Node } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { withRouter } from 'react-router-dom';
 
 import Select from 'react-select';

docs/App/PageNav.js

@@ -1,7 +1,7 @@
 // @flow
 /** @jsx jsx */
 import { Component, type ElementRef } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { Route, Switch } from 'react-router-dom';
 
 import type { RouterProps } from '../types';

docs/App/TwitterButton.js

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

docs/App/components.js

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

docs/ExampleWrapper.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core'; // eslint-disable-line no-unused-vars
+import { jsx } from '@emotion/react'; // eslint-disable-line no-unused-vars
 import { Component } from 'react';
 import CodeSandboxer from 'react-codesandboxer';
 import { CodeBlock } from './markdown/renderer';

docs/Svg.js

@@ -1,6 +1,6 @@
 // @flow
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
 const Svg = ({ size, ...props }: { size: number }) => (
   <svg

docs/examples/Experimental.js

@@ -1,7 +1,7 @@
 // @flow
 /** @jsx jsx */
 import { Component } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import moment from 'moment';
 import chrono from 'chrono-node';
 

docs/examples/Popout.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { Component } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button';
 
 import Select from 'react-select';

docs/examples/StyleCompositionExample.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Select from 'react-select';
 import { colourOptions } from '../data';
 

docs/markdown/renderer.js

@@ -1,7 +1,7 @@
 // @flow
 /** @jsx emotionJSX */
 import md from 'react-markings';
-import { jsx as emotionJSX } from '@emotion/core'; // eslint-disable-line no-unused-vars
+import { jsx as emotionJSX } from '@emotion/react'; // eslint-disable-line no-unused-vars
 import { Link as RRLink } from 'react-router-dom';
 
 import Svg from '../Svg';

docs/package.json

@@ -17,9 +17,9 @@
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.4.4",
-    "@emotion/core": "^10.0.9",
+    "@emotion/babel-plugin": "^11.0.0",
+    "@emotion/react": "^11.1.1",
     "babel-loader": "^8.0.0",
-    "babel-plugin-emotion": "^10.0.9",
     "chroma-js": "^1.3.6",
     "chrono-node": "^1.3.5",
     "codesandboxer": "^0.1.1",

docs/styled-components.js

@@ -1,6 +1,6 @@
 // @flow
 /** @jsx emotionJSX */
-import { jsx as emotionJSX } from '@emotion/core';
+import { jsx as emotionJSX } from '@emotion/react';
 
 import SyntaxHighlighter, {
   registerLanguage,

package.json

@@ -25,9 +25,10 @@
     "@babel/runtime": "^7.4.4",
     "@changesets/cli": "^2.0.3",
     "@changesets/get-github-info": "^0.2.1",
-    "@emotion/cache": "^10.0.9",
-    "@emotion/core": "^10.0.9",
-    "@emotion/css": "^10.0.9",
+    "@emotion/babel-plugin": "^11.0.0",
+    "@emotion/cache": "^11.0.0",
+    "@emotion/css": "^11.0.0",
+    "@emotion/react": "^11.1.1",
     "@preconstruct/cli": "^1.0.0",
     "@testing-library/dom": "7.0.4",
     "@testing-library/jest-dom": "5.1.1",
@@ -37,7 +38,6 @@
     "babel-eslint": "^9.0.0",
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.0",
-    "babel-plugin-emotion": "^10.0.9",
     "bolt-check": "^0.3.0",
     "chroma-js": "^1.3.6",
     "chrono-node": "^1.3.5",

packages/react-select/package.json

@@ -10,9 +10,9 @@
   "repository": "https://github.com/JedWatson/react-select/tree/master/packages/react-select",
   "dependencies": {
     "@babel/runtime": "^7.4.4",
-    "@emotion/cache": "^10.0.9",
-    "@emotion/core": "^10.0.9",
-    "@emotion/css": "^10.0.9",
+    "@emotion/cache": "^11.0.0",
+    "@emotion/css": "^11.0.0",
+    "@emotion/react": "^11.1.1",
     "memoize-one": "^5.0.0",
     "prop-types": "^15.6.0",
     "react-input-autosize": "^3.0.0",

packages/react-select/src/NonceProvider.js

@@ -1,24 +1,28 @@
 // @flow
 import React, { Component, type Node } from 'react';
-import { CacheProvider } from '@emotion/core';
+import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import memoizeOne from 'memoize-one';
 
 type NonceProviderProps = {
   nonce: string,
   children: Node,
+  key: string,
 };
 
 export default class NonceProvider extends Component<NonceProviderProps> {
   constructor(props: NonceProviderProps) {
     super(props);
     this.createEmotionCache = memoizeOne(this.createEmotionCache);
   }
-  createEmotionCache = (nonce: string) => {
-    return createCache({ nonce });
+  createEmotionCache = (nonce: string, key: string) => {
+    return createCache({ nonce, key });
   };
   render() {
-    const emotionCache = this.createEmotionCache(this.props.nonce);
+    const emotionCache = this.createEmotionCache(
+      this.props.nonce,
+      this.props.key
+    );
     return (
       <CacheProvider value={emotionCache}>{this.props.children}</CacheProvider>
     );

packages/react-select/src/__tests__/__snapshots__/Async.test.js.snap

@@ -6,13 +6,17 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
+
+
+
+
 .emotion-7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: hsl(0,0%,100%);
-  border-color: hsl(0,0%,80%);
+  background-color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 80%);
   border-radius: 4px;
   border-style: solid;
   border-width: 1px;
@@ -21,23 +25,25 @@ exports[`defaults - snapshot 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   min-height: 38px;
-  outline: 0 !important;
+  outline: 0!important;
   position: relative;
   -webkit-transition: all 100ms;
   transition: all 100ms;
   box-sizing: border-box;
 }
 
+
+
 .emotion-7:hover {
-  border-color: hsl(0,0%,70%);
+  border-color: hsl(0, 0%, 70%);
 }
 
 .emotion-2 {
@@ -52,6 +58,7 @@ exports[`defaults - snapshot 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
+  -webkit-box-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -63,12 +70,13 @@ exports[`defaults - snapshot 1`] = `
 }
 
 .emotion-0 {
-  color: hsl(0,0%,50%);
+  color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   box-sizing: border-box;
@@ -79,7 +87,7 @@ exports[`defaults - snapshot 1`] = `
   padding-bottom: 2px;
   padding-top: 2px;
   visibility: visible;
-  color: hsl(0,0%,20%);
+  color: hsl(0, 0%, 20%);
   box-sizing: border-box;
 }
 
@@ -105,15 +113,15 @@ exports[`defaults - snapshot 1`] = `
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
-  background-color: hsl(0,0%,80%);
+  background-color: hsl(0, 0%, 80%);
   margin-bottom: 8px;
   margin-top: 8px;
   width: 1px;
   box-sizing: border-box;
 }
 
 .emotion-5 {
-  color: hsl(0,0%,80%);
+  color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -125,7 +133,7 @@ exports[`defaults - snapshot 1`] = `
 }
 
 .emotion-5:hover {
-  color: hsl(0,0%,60%);
+  color: hsl(0, 0%, 60%);
 }
 
 .emotion-4 {