Add CSP Nonce option to Select component

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

@@ -12,8 +12,9 @@
     "url": "https://github.com/JedWatson/react-select.git"
   },
   "dependencies": {
+    "@emotion/memoize": "^0.7.1",
     "classnames": "^2.2.5",
-    "emotion": "^9.1.2",
+    "create-emotion": "^10.0.4",
     "memoize-one": "^4.0.0",
     "prop-types": "^15.6.0",
     "raf": "^3.4.0",

src/Select.js

@@ -3,6 +3,8 @@
 import React, { Component, type ElementRef, type Node } from 'react';
 
 import memoizeOne from 'memoize-one';
+import memoize from '@emotion/memoize';
+import createEmotion from 'create-emotion';
 import { MenuPlacer } from './components/Menu';
 import isEqual from './internal/react-fast-compare';
 
@@ -242,6 +244,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 = {
@@ -305,6 +309,8 @@ type ElRef = ElementRef<*>;
 
 let instanceId = 1;
 
+const getEmotion = memoize(nonce => createEmotion(nonce ? { nonce } : {}));
+
 export default class Select extends Component<Props, State> {
   static defaultProps = defaultProps;
   state = {
@@ -369,6 +375,8 @@ export default class Select extends Component<Props, State> {
     const selectValue = cleanValue(value);
     const menuOptions = this.buildMenuOptions(props, selectValue);
 
+    this.emotion = getEmotion(props.nonce);
+
     this.state.menuOptions = menuOptions;
     this.state.selectValue = selectValue;
   }
@@ -721,6 +729,7 @@ export default class Select extends Component<Props, State> {
       setValue,
       selectProps: props,
       theme: this.getTheme(),
+      emotion: this.emotion
     };
   }
 
@@ -1370,6 +1379,7 @@ export default class Select extends Component<Props, State> {
           disabled={isDisabled}
           tabIndex={tabIndex}
           value=""
+          emotion={this.emotion}
         />
       );
     }
@@ -1402,6 +1412,7 @@ export default class Select extends Component<Props, State> {
         theme={theme}
         type="text"
         value={inputValue}
+        emotion={this.emotion}
         {...ariaAttributes}
       />
     );
@@ -1427,8 +1438,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}
@@ -1679,7 +1690,7 @@ export default class Select extends Component<Props, State> {
               onTopArrive={onMenuScrollToTop}
               onBottomArrive={onMenuScrollToBottom}
             >
-              <ScrollBlock isEnabled={menuShouldBlockScroll}>
+              <ScrollBlock emotion={this.emotion} isEnabled={menuShouldBlockScroll}>
                 <MenuList
                   {...commonProps}
                   innerRef={this.getMenuListRef}
@@ -1750,7 +1761,7 @@ export default class Select extends Component<Props, State> {
   renderLiveRegion() {
     if (!this.state.isFocused) return null;
     return (
-      <A11yText aria-live="assertive">
+      <A11yText emotion={this.emotion} aria-live="assertive">
         <p id="aria-selection-event">&nbsp;{this.state.ariaLiveSelection}</p>
         <p id="aria-context">&nbsp;{this.constructAriaLiveMessage()}</p>
       </A11yText>