diff --git a/.eslintrc.js b/.eslintrc.js index e57f7f0d48..f9fcb20d1a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -14,6 +14,7 @@ module.exports = { argsIgnorePattern: '^event$', ignoreRestSiblings: true, vars: 'all', + varsIgnorePattern: 'jsx|emotionJSX' }, ], curly: [2, 'multi-line'], diff --git a/docs/App/Footer.js b/docs/App/Footer.js index 3ce938b2d2..be740670be 100644 --- a/docs/App/Footer.js +++ b/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)'; diff --git a/docs/App/GitHubButton.js b/docs/App/GitHubButton.js index 689ee433b8..01ffae7ac4 100644 --- a/docs/App/GitHubButton.js +++ b/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 }; diff --git a/docs/App/Header.js b/docs/App/Header.js index 4bab0d8770..3a7dd0e829 100644 --- a/docs/App/Header.js +++ b/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'; diff --git a/docs/App/PageNav.js b/docs/App/PageNav.js index 63f9ad3fa9..54502291ce 100644 --- a/docs/App/PageNav.js +++ b/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'; diff --git a/docs/App/TwitterButton.js b/docs/App/TwitterButton.js index f759b3c322..1721ca0b9e 100644 --- a/docs/App/TwitterButton.js +++ b/docs/App/TwitterButton.js @@ -1,6 +1,6 @@ // @flow - -import React from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; const TwitterButton = () => (
diff --git a/docs/App/components.js b/docs/App/components.js index c697170cce..25fc7fb8fe 100644 --- a/docs/App/components.js +++ b/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; diff --git a/docs/ExampleWrapper.js b/docs/ExampleWrapper.js index c8d989364e..d410c70d87 100644 --- a/docs/ExampleWrapper.js +++ b/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'; diff --git a/docs/Svg.js b/docs/Svg.js index 6b7b4b411f..f447953555 100644 --- a/docs/Svg.js +++ b/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 }) => ( ( ); -export const CodeBlock = ({ codeinfo, literal, nodeKey, ...props }) => { +export const CodeBlock = ({ codeinfo, literal, nodeKey, ...props }: any) => { const language = codeinfo[0]; return ( diff --git a/docs/styled-components.js b/docs/styled-components.js index 294ac29747..789e26954a 100644 --- a/docs/styled-components.js +++ b/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, diff --git a/package.json b/package.json index c26345a137..d931465f1f 100644 --- a/package.json +++ b/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", diff --git a/src/NonceProvider.js b/src/NonceProvider.js new file mode 100644 index 0000000000..f0daf31676 --- /dev/null +++ b/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 { + 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 ( + + {this.props.children} + + ); + } +} diff --git a/src/Select.js b/src/Select.js index 365055bf5b..e5bd667286 100644 --- a/src/Select.js +++ b/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 { static defaultProps = defaultProps; state = { @@ -1804,7 +1804,6 @@ export default class Select extends Component { const { className, id, isDisabled, menuIsOpen } = this.props; const { isFocused } = this.state; - const commonProps = (this.commonProps = this.getCommonProps()); return ( diff --git a/src/__tests__/__snapshots__/Async.test.js.snap b/src/__tests__/__snapshots__/Async.test.js.snap index 00ab8cc588..e2325c5ac8 100644 --- a/src/__tests__/__snapshots__/Async.test.js.snap +++ b/src/__tests__/__snapshots__/Async.test.js.snap @@ -161,7 +161,7 @@ exports[`defaults - snapshot 1`] = ` } >
@@ -359,7 +359,7 @@ exports[`defaults - snapshot 1`] = ` } >
Select...
@@ -736,7 +736,7 @@ exports[`defaults - snapshot 1`] = ` } >