Merge pull request #3346 from JedWatson/revert-3260

Revert 3260

docs/App/GitHubButton.js

@@ -74,7 +74,7 @@ const StarButton = ({ count, repo }: Props) => (
         '&:before': {
           border: '4px solid transparent',
           borderRightColor: 'white',
-          content: ' ',
+          content: '" "',
           height: 0,
           left: -8,
           top: '50%',

docs/examples/CustomLoadingMessage.js

@@ -6,7 +6,7 @@ import { colourOptions } from '../data';
 const LoadingMessage = (props) => {
   return (
     <Tooltip content={'Custom Loading Message'}>
-      <div {...props} style={props.getStyles('loadingMessage', props)}>
+      <div {...props.innerProps} style={props.getStyles('loadingMessage', props)}>
           {props.children}
       </div>
     </Tooltip>

docs/examples/StyleCompositionExample.js

@@ -1,14 +1,15 @@
 import React from 'react';
+import { css } from 'emotion';
 import Select from '../../src';
 import { colourOptions } from '../data';
 
 const Option = (props: OptionProps) => {
-  const { children, className, cx, getStyles, isDisabled, isFocused, isSelected, innerRef, innerProps, emotion } = props;
+  const { children, className, cx, getStyles, isDisabled, isFocused, isSelected, innerRef, innerProps } = props;
   return (
     <div
       ref={innerRef}
       className={cx(
-        emotion.css(getStyles('option', props)),
+        css(getStyles('option', props)),
         {
           'option': true,
           'option--is-disabled': isDisabled,

docs/pages/styles/index.js

@@ -141,15 +141,10 @@ export default function Styles() {
     ~~~
 
     * prefix: is the value of the optional classNamePrefix,
-    * cssKey: is the uid generated by the invocation of the emotion.css method
+    * cssKey: is the uid generated by the invocation of the css method imported from emotion
     * state: an object declaring state based modifiers to be applied to our selector
     * className: any className prop specified for custom components will also be composed into the selector string produced by the cx functions
 
-    ### emotion
-    As of 2.2.0 we provide you with the emotion instance used for each Select instance.
-    By invoking the emotion.css method on our passed in css styles for each component
-    we can generate a className to be passed into the cx method specified above.
-
     ### getStyles
     Each component gets passed a getStyles method which has the following signature:
 
@@ -165,11 +160,13 @@ export default function Styles() {
 
     In the end configuring your custom component with the correct styling functionality should look like this
     ~~~
-    const CustomOption = ({ cx, children, emotion, getStyles, innerRef, ...props }) => (
+    import { css } from 'emotion';
+    
+    const CustomOption = ({ cx, children, getStyles, innerRef, ...props }) => (
       <div
         ref={innerRef}
         className={cx(
-          emotion.css(getStyles('option', props)),
+          css(getStyles('option', props)),
           {
             'option': true,
             'option--is-disabled': isDisabled,

package.json

@@ -13,7 +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",
     "raf": "^3.4.0",

src/Select.js

@@ -3,7 +3,6 @@
 import React, { Component, type ElementRef, type Node } from 'react';
 
 import memoizeOne from 'memoize-one';
-import createEmotion, { type Emotion } from 'create-emotion';
 import { MenuPlacer } from './components/Menu';
 import isEqual from './internal/react-fast-compare';
 
@@ -243,8 +242,6 @@ 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 = {
@@ -308,8 +305,6 @@ type ElRef = ElementRef<*>;
 
 let instanceId = 1;
 
-const getEmotion: ?string => Emotion = memoizeOne((nonce) => createEmotion(nonce ? { nonce } : {}));
-
 export default class Select extends Component<Props, State> {
   static defaultProps = defaultProps;
   state = {
@@ -331,7 +326,6 @@ export default class Select extends Component<Props, State> {
   clearFocusValueOnUpdate: boolean = false;
   commonProps: any; // TODO
   components: SelectComponents;
-  emotion: Emotion;
   hasGroups: boolean = false;
   initialTouchX: number = 0;
   initialTouchY: number = 0;
@@ -375,8 +369,6 @@ 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;
   }
@@ -729,7 +721,6 @@ export default class Select extends Component<Props, State> {
       setValue,
       selectProps: props,
       theme: this.getTheme(),
-      emotion: this.emotion
     };
   }
 
@@ -1001,7 +992,7 @@ export default class Select extends Component<Props, State> {
     if (!touch) {
       return;
     }
-    
+
     this.initialTouchX = touch.clientX;
     this.initialTouchY = touch.clientY;
     this.userIsDragging = false;
@@ -1391,7 +1382,6 @@ export default class Select extends Component<Props, State> {
           disabled={isDisabled}
           tabIndex={tabIndex}
           value=""
-          emotion={this.emotion}
         />
       );
     }
@@ -1425,7 +1415,6 @@ export default class Select extends Component<Props, State> {
         theme={theme}
         type="text"
         value={inputValue}
-        emotion={this.emotion}
         {...ariaAttributes}
       />
     );
@@ -1703,7 +1692,7 @@ export default class Select extends Component<Props, State> {
               onTopArrive={onMenuScrollToTop}
               onBottomArrive={onMenuScrollToBottom}
             >
-              <ScrollBlock emotion={this.emotion} isEnabled={menuShouldBlockScroll}>
+              <ScrollBlock isEnabled={menuShouldBlockScroll}>
                 <MenuList
                   {...commonProps}
                   innerRef={this.getMenuListRef}
@@ -1774,7 +1763,7 @@ export default class Select extends Component<Props, State> {
   renderLiveRegion() {
     if (!this.state.isFocused) return null;
     return (
-      <A11yText emotion={this.emotion} aria-live="assertive">
+      <A11yText aria-live="assertive">
         <p id="aria-selection-event">&nbsp;{this.state.ariaLiveSelection}</p>
         <p id="aria-context">&nbsp;{this.constructAriaLiveMessage()}</p>
       </A11yText>