Add CSP Nonce option to Select component

Closes #2917

docs/pages/props/index.js

@@ -58,6 +58,7 @@ export default function Api() {
       selectOption: OptionType => void,
       selectProps: any,
       setValue: (ValueType, ActionTypes) => void,
+      emotion: any,
     }
 
     // passed as the second argument to \`onChange\`

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "classnames": "^2.2.5",
+    "create-emotion": "^10.0.4",
     "emotion": "^9.1.2",
     "memoize-one": "^4.0.0",
     "prop-types": "^15.6.0",

src/Select.js

@@ -3,6 +3,7 @@
 import React, { Component, type ElementRef, type Node } from 'react';
 
 import memoizeOne from 'memoize-one';
+import createEmotion from 'create-emotion';
 import { MenuPlacer } from './components/Menu';
 import isEqual from './internal/react-fast-compare';
 
@@ -242,6 +243,8 @@ export type Props = {
   tabSelectsValue: boolean,
   /* The value of the select; reflected by the selected option */
   value: ValueType,
+  /* A CSP Nonce which will be used in injected style sheets */
+  nonce?: string
 };
 
 export const defaultProps = {
@@ -369,6 +372,8 @@ export default class Select extends Component<Props, State> {
     const selectValue = cleanValue(value);
     const menuOptions = this.buildMenuOptions(props, selectValue);
 
+    this.emotion = createEmotion(props.nonce ? { nonce: props.nonce } : {});
+
     this.state.menuOptions = menuOptions;
     this.state.selectValue = selectValue;
   }
@@ -721,6 +726,7 @@ export default class Select extends Component<Props, State> {
       setValue,
       selectProps: props,
       theme: this.getTheme(),
+      emotion: this.emotion
     };
   }
 
@@ -1427,8 +1433,8 @@ export default class Select extends Component<Props, State> {
 
     if (!this.hasValue() || !controlShouldRenderValue) {
       return inputValue ? null : (
-        <Placeholder 
-          {...commonProps} 
+        <Placeholder
+          {...commonProps}
           key="placeholder"
           isDisabled={isDisabled}
           isFocused={isFocused}