emotion 9 --> emotion 10

.eslintrc.js

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

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,7 +1,8 @@
 // @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';

docs/App/PageNav.js

@@ -1,6 +1,7 @@
 // @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';

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;

docs/ExampleWrapper.js

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

docs/Svg.js

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

docs/Tests.js

@@ -240,7 +240,7 @@ export default function Tests() {
       <div id={'cypress-long-values'}>
         <Select
           id="long-value-select"
-          instsanceId="long-value-select"
+          instanceId="long-value-select"
           classNamePrefix="react-select"
           defaultValue={optionLength[3]}
           options={optionLength}

docs/examples/Experimental.js

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

docs/examples/Popout.js

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

docs/markdown/renderer.js

@@ -1,5 +1,7 @@
-import React from 'react';
+// @flow
+/** @jsx emotionJSX */
 import md from 'react-markings';
+import { jsx as emotionJSX } from '@emotion/core'; // eslint-disable-line no-unused-vars
 import { Link as RRLink } from 'react-router-dom';
 
 import Svg from '../Svg';
@@ -119,7 +121,7 @@ const Heading = props => {
 };
 
 // eslint-disable-next-line no-unused-vars
-export const Code = ({ children, inline, literal, nodeKey }) => (
+export const Code = ({ children, inline, literal, nodeKey }: any) => (
   <code
     css={{
       backgroundColor: 'rgba(38, 132, 255, 0.08)',
@@ -134,7 +136,7 @@ export const Code = ({ children, inline, literal, nodeKey }) => (
   </code>
 );
 
-export const CodeBlock = ({ codeinfo, literal, nodeKey, ...props }) => {
+export const CodeBlock = ({ codeinfo, literal, nodeKey, ...props }: any) => {
   const language = codeinfo[0];
 
   return (

docs/styled-components.js

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

package.json

@@ -12,6 +12,8 @@
     "url": "https://github.com/JedWatson/react-select.git"
   },
   "dependencies": {
+    "@emotion/cache": "^10.0.0",
+    "@emotion/core": "^10.0.5",
     "classnames": "^2.2.5",
     "emotion": "^9.1.2",
     "memoize-one": "^5.0.0",
@@ -49,7 +51,7 @@
     "css-loader": "^0.28.7",
     "cypress": "^1.4.1",
     "dotenv": "^5.0.1",
-    "enzyme": "^3.3.0",
+    "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.3.0",
     "eslint": "^4.6.1",

src/NonceProvider.js

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

src/Select.js

@@ -1,7 +1,6 @@
 // @flow
 
 import React, { Component, type ElementRef, type Node } from 'react';
-
 import memoizeOne from 'memoize-one';
 import { MenuPlacer } from './components/Menu';
 import isEqual from './internal/react-fast-compare';
@@ -307,6 +306,7 @@ type ElRef = ElementRef<*>;
 
 let instanceId = 1;
 
+
 export default class Select extends Component<Props, State> {
   static defaultProps = defaultProps;
   state = {
@@ -1804,7 +1804,6 @@ export default class Select extends Component<Props, State> {
 
     const { className, id, isDisabled, menuIsOpen } = this.props;
     const { isFocused } = this.state;
-
     const commonProps = (this.commonProps = this.getCommonProps());
 
     return (

src/__tests__/__snapshots__/Async.test.js.snap

@@ -161,7 +161,7 @@ exports[`defaults - snapshot 1`] = `
         }
       >
         <div
-          className="css-1pcexqc-container"
+          className="css-1pcexqc-container "
           onKeyDown={[Function]}
         >
           <Control
@@ -264,7 +264,7 @@ exports[`defaults - snapshot 1`] = `
             }
           >
             <div
-              className="css-bg1rzq-control"
+              className="css-bg1rzq-control "
               onMouseDown={[Function]}
               onTouchEnd={[Function]}
             >
@@ -359,7 +359,7 @@ exports[`defaults - snapshot 1`] = `
                 }
               >
                 <div
-                  className="css-1hwfws3"
+                  className="css-1hwfws3 "
                 >
                   <Placeholder
                     clearValue={[Function]}
@@ -454,7 +454,7 @@ exports[`defaults - snapshot 1`] = `
                     }
                   >
                     <div
-                      className="css-151xaom-placeholder"
+                      className="css-151xaom-placeholder "
                     >
                       Select...
                     </div>
@@ -736,7 +736,7 @@ exports[`defaults - snapshot 1`] = `
                 }
               >
                 <div
-                  className="css-1wy0on6"
+                  className="css-1wy0on6 "
                 >
                   <IndicatorSeparator
                     clearValue={[Function]}
@@ -830,7 +830,7 @@ exports[`defaults - snapshot 1`] = `
                     }
                   >
                     <span
-                      className="css-bgvzuu-indicatorSeparator"
+                      className="css-bgvzuu-indicatorSeparator "
                     />
                   </IndicatorSeparator>
                   <DropdownIndicator
@@ -933,7 +933,7 @@ exports[`defaults - snapshot 1`] = `
                   >
                     <div
                       aria-hidden="true"
-                      className="css-16pqwjk-indicatorContainer"
+                      className="css-16pqwjk-indicatorContainer "
                       onMouseDown={[Function]}
                       onTouchEnd={[Function]}
                     >

src/__tests__/__snapshots__/AsyncCreatable.test.js.snap

@@ -190,7 +190,7 @@ exports[`defaults - snapshot 1`] = `
           }
         >
           <div
-            className="css-1pcexqc-container"
+            className="css-1pcexqc-container "
             onKeyDown={[Function]}
           >
             <Control
@@ -298,7 +298,7 @@ exports[`defaults - snapshot 1`] = `
               }
             >
               <div
-                className="css-bg1rzq-control"
+                className="css-bg1rzq-control "
                 onMouseDown={[Function]}
                 onTouchEnd={[Function]}
               >
@@ -398,7 +398,7 @@ exports[`defaults - snapshot 1`] = `
                   }
                 >
                   <div
-                    className="css-1hwfws3"
+                    className="css-1hwfws3 "
                   >
                     <Placeholder
                       clearValue={[Function]}
@@ -498,7 +498,7 @@ exports[`defaults - snapshot 1`] = `
                       }
                     >
                       <div
-                        className="css-151xaom-placeholder"
+                        className="css-151xaom-placeholder "
                       >
                         Select...
                       </div>
@@ -790,7 +790,7 @@ exports[`defaults - snapshot 1`] = `
                   }
                 >
                   <div
-                    className="css-1wy0on6"
+                    className="css-1wy0on6 "
                   >
                     <IndicatorSeparator
                       clearValue={[Function]}
@@ -889,7 +889,7 @@ exports[`defaults - snapshot 1`] = `
                       }
                     >
                       <span
-                        className="css-bgvzuu-indicatorSeparator"
+                        className="css-bgvzuu-indicatorSeparator "
                       />
                     </IndicatorSeparator>
                     <DropdownIndicator
@@ -997,7 +997,7 @@ exports[`defaults - snapshot 1`] = `
                     >
                       <div
                         aria-hidden="true"
-                        className="css-16pqwjk-indicatorContainer"
+                        className="css-16pqwjk-indicatorContainer "
                         onMouseDown={[Function]}
                         onTouchEnd={[Function]}
                       >

src/components/Control.js

@@ -1,6 +1,8 @@
 // @flow
-import React, { type Node, type ElementRef } from 'react';
-import { css as emotionCSS } from 'emotion';
+/** @jsx jsx */
+import { type Node, type ElementRef } from 'react';
+import { jsx } from '@emotion/core';
+
 import type { CommonProps, PropsWithStyles } from '../types';
 
 type State = {
@@ -58,12 +60,17 @@ const Control = (props: ControlProps) => {
   return (
     <div
       ref={innerRef}
-      className={cx(emotionCSS(getStyles('control', props)), {
-        'control': true,
-        'control--is-disabled': isDisabled,
-        'control--is-focused': isFocused,
-        'control--menu-is-open': menuIsOpen
-      }, className)}
+      css={getStyles('control', props)}
+      className={cx(
+        null,
+        {
+          'control': true,
+          'control--is-disabled': isDisabled,
+          'control--is-focused': isFocused,
+          'control--menu-is-open': menuIsOpen
+        },
+        className
+      )}
       {...innerProps}
     >
       {children}