0.3.4

Fix #501

.flowconfig

@@ -3,7 +3,6 @@
 
 [ignore]
 <PROJECT_ROOT>/.*/__tests__/.*
-<PROJECT_ROOT>/packages/benchmarks/.*
 <PROJECT_ROOT>/packages/.*/dist/.*
 <PROJECT_ROOT>/website/.*
 .*/node_modules/babel-plugin-transform-react-remove-prop-types/*

.github/CONTRIBUTING.md

@@ -85,10 +85,18 @@ yarn compile --watch
 
 ## Benchmarks
 
-To run the performance benchmarks in a browser (opening `./packages/benchmarks/index.html`):
+To run the benchmarks locally:
 
 ```
 yarn benchmarks
+open ./packages/benchmarks/dist/index.html
+```
+
+To develop against these benchmarks:
+
+```
+yarn compile --watch
+yarn benchmarks --watch
 ```
 
 ### New Features

lerna.json

@@ -1,6 +1,6 @@
 {
   "lerna": "2.5.1",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "packages": [

packages/benchmarks/README.md

@@ -5,7 +5,7 @@ Try the [benchmarks app](https://necolas.github.io/react-native-web/benchmarks)
 To run the benchmarks locally:
 
 ```
-yarn benchmark
+yarn benchmarks
 open ./packages/benchmarks/dist/index.html
 ```
 
@@ -13,7 +13,7 @@ Develop against these benchmarks:
 
 ```
 yarn compile --watch
-yarn benchmark --watch
+yarn benchmarks --watch
 ```
 
 ## Notes

packages/benchmarks/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "benchmarks",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "scripts": {
     "build": "mkdir -p dist && cp -f index.html dist/index.html && webpack --config ./webpack.config.js",
     "release": "yarn build && git checkout gh-pages && rm -rf ../../benchmarks && mv dist ../../benchmarks && git add -A && git commit -m \"Benchmarks deploy\" && git push origin gh-pages && git checkout -"
@@ -11,20 +11,21 @@
     "classnames": "^2.2.5",
     "d3-scale-chromatic": "^1.1.1",
     "emotion": "8.0.12",
-    "fela": "5.0.0",
+    "fela": "6.1.3",
     "glamor": "2.20.40",
-    "radium": "0.21.0",
+    "radium": "0.21.2",
     "react": "^16.2.0",
     "react-component-benchmark": "^0.0.4",
     "react-dom": "^16.2.0",
-    "react-fela": "5.0.0",
+    "react-fela": "6.2.4",
     "react-jss": "8.2.1",
-    "react-native-web": "^0.3.2",
-    "reactxp": "0.51.0-alpha.9",
-    "styled-components": "2.4.0",
-    "styled-jsx": "2.2.1",
-    "styletron-client": "3.0.2",
-    "styletron-react": "3.0.3"
+    "react-native-web": "^0.3.4",
+    "reactxp": "0.51.2",
+    "style-loader": "0.20.1",
+    "styled-components": "3.1.2",
+    "styled-jsx": "2.2.2",
+    "styletron-client": "3.0.4",
+    "styletron-react": "3.0.4"
   },
   "devDependencies": {
     "babel-plugin-react-native-web": "^0.3.3",

packages/benchmarks/src/app/App.js

@@ -100,6 +100,9 @@ export default class App extends Component {
                     libraryName={r.libraryName}
                     libraryVersion={r.libraryVersion}
                     mean={r.mean}
+                    meanLayout={r.meanLayout}
+                    meanScripting={r.meanScripting}
+                    runTime={r.runTime}
                     sampleCount={r.sampleCount}
                     stdDev={r.stdDev}
                   />
@@ -129,6 +132,7 @@ export default class App extends Component {
                   <View ref={this._setBenchWrapperRef}>
                     <Benchmark
                       component={Component}
+                      forceLayout={true}
                       getComponentProps={getComponentProps}
                       onComplete={this._createHandleComplete({
                         sampleCount,
@@ -282,6 +286,7 @@ const styles = StyleSheet.create({
   },
   picker: {
     ...StyleSheet.absoluteFillObject,
+    appearance: 'none',
     opacity: 0,
     width: '100%'
   },

packages/benchmarks/src/app/Benchmark/index.js

@@ -1,5 +1,7 @@
-// @flow
 /* global $Values */
+/**
+ * @flow
+ */
 import * as Timing from './timing';
 import React, { Component } from 'react';
 import { getMean, getMedian, getStdDev } from './math';
@@ -12,8 +14,6 @@ export const BenchmarkType = {
   UNMOUNT: 'unmount'
 };
 
-const emptyObject = {};
-
 const shouldRender = (cycle: number, type: $Values<typeof BenchmarkType>): boolean => {
   switch (type) {
     // Render every odd iteration (first, third, etc)
@@ -66,7 +66,8 @@ const sortNumbers = (a: number, b: number): number => a - b;
 
 type BenchmarkPropsType = {
   component: typeof React.Component,
-  getComponentProps?: Function,
+  forceLayout?: boolean,
+  getComponentProps: Function,
   onComplete: (x: BenchResultsType) => void,
   sampleCount: number,
   timeout: number,
@@ -74,7 +75,7 @@ type BenchmarkPropsType = {
 };
 
 type BenchmarkStateType = {
-  getComponentProps: Function,
+  componentProps: Object,
   cycle: number,
   running: boolean
 };
@@ -84,13 +85,13 @@ type BenchmarkStateType = {
  * TODO: documentation
  */
 export default class Benchmark extends Component<BenchmarkPropsType, BenchmarkStateType> {
+  _raf: ?Function;
   _startTime: number;
   _samples: Array<SampleTimingType>;
 
   static displayName = 'Benchmark';
 
   static defaultProps = {
-    getComponentProps: () => emptyObject,
     sampleCount: 50,
     timeout: 10000, // 10 seconds
     type: BenchmarkType.MOUNT
@@ -100,9 +101,11 @@ export default class Benchmark extends Component<BenchmarkPropsType, BenchmarkSt
 
   constructor(props: BenchmarkPropsType, context?: {}) {
     super(props, context);
+    const cycle = 0;
+    const componentProps = props.getComponentProps({ cycle });
     this.state = {
-      getComponentProps: props.getComponentProps,
-      cycle: 0,
+      componentProps,
+      cycle,
       running: false
     };
     this._startTime = 0;
@@ -110,7 +113,9 @@ export default class Benchmark extends Component<BenchmarkPropsType, BenchmarkSt
   }
 
   componentWillReceiveProps(nextProps: BenchmarkPropsType) {
-    this.setState(state => ({ getComponentProps: nextProps.getComponentProps }));
+    if (nextProps) {
+      this.setState(state => ({ componentProps: nextProps.getComponentProps(state.cycle) }));
+    }
   }
 
   componentWillUpdate(nextProps: BenchmarkPropsType, nextState: BenchmarkStateType) {
@@ -120,11 +125,20 @@ export default class Benchmark extends Component<BenchmarkPropsType, BenchmarkSt
   }
 
   componentDidUpdate() {
-    const { sampleCount, timeout, type } = this.props;
+    const { forceLayout, sampleCount, timeout, type } = this.props;
     const { cycle, running } = this.state;
 
     if (running && shouldRecord(cycle, type)) {
-      this._samples[cycle].end = Timing.now();
+      this._samples[cycle].scriptingEnd = Timing.now();
+
+      // force style recalc that would otherwise happen before the next frame
+      if (forceLayout) {
+        this._samples[cycle].layoutStart = Timing.now();
+        if (document.body) {
+          document.body.offsetWidth;
+        }
+        this._samples[cycle].layoutEnd = Timing.now();
+      }
     }
 
     if (running) {
@@ -138,20 +152,18 @@ export default class Benchmark extends Component<BenchmarkPropsType, BenchmarkSt
   }
 
   componentWillUnmount() {
-    if (this.raf) {
-      window.cancelAnimationFrame(this.raf);
+    if (this._raf) {
+      window.cancelAnimationFrame(this._raf);
     }
   }
 
   render() {
     const { component: Component, type } = this.props;
-    const { getComponentProps, cycle, running } = this.state;
+    const { componentProps, cycle, running } = this.state;
     if (running && shouldRecord(cycle, type)) {
-      this._samples[cycle] = { start: Timing.now() };
+      this._samples[cycle] = { scriptingStart: Timing.now() };
     }
-    return running && shouldRender(cycle, type) ? (
-      <Component {...getComponentProps({ cycle })} />
-    ) : null;
+    return running && shouldRender(cycle, type) ? <Component {...componentProps} /> : null;
   }
 
   start() {
@@ -163,17 +175,21 @@ export default class Benchmark extends Component<BenchmarkPropsType, BenchmarkSt
     const { getComponentProps, type } = this.props;
     const { cycle } = this.state;
 
-    // Calculate the component props outside of the time recording (render)
-    // so that it doesn't skew results
-    const getNextProps =
-      type === BenchmarkType.UPDATE
-        ? obj => ({ ...getComponentProps(obj), 'data-test': cycle })
-        : getComponentProps;
+    let componentProps;
+    if (getComponentProps) {
+      // Calculate the component props outside of the time recording (render)
+      // so that it doesn't skew results
+      componentProps = getComponentProps({ cycle });
+      // make sure props always change for update tests
+      if (type === BenchmarkType.UPDATE) {
+        componentProps['data-test'] = cycle;
+      }
+    }
 
-    this.raf = window.requestAnimationFrame(() => {
+    this._raf = window.requestAnimationFrame(() => {
       this.setState((state: BenchmarkStateType) => ({
-        getComponentProps: getNextProps,
-        cycle: state.cycle + 1
+        cycle: state.cycle + 1,
+        componentProps
       }));
     });
   }
@@ -182,10 +198,16 @@ export default class Benchmark extends Component<BenchmarkPropsType, BenchmarkSt
     return this._samples.reduce(
       (
         memo: Array<FullSampleTimingType>,
-        { start, end: endTime }: SampleTimingType
+        { scriptingStart, scriptingEnd, layoutStart, layoutEnd }: SampleTimingType
       ): Array<FullSampleTimingType> => {
-        const end = endTime || 0;
-        memo.push({ start, end, elapsed: end - start });
+        memo.push({
+          start: scriptingStart,
+          end: layoutEnd || scriptingEnd || 0,
+          scriptingStart,
+          scriptingEnd: scriptingEnd || 0,
+          layoutStart,
+          layoutEnd
+        });
         return memo;
       },
       []
@@ -199,11 +221,13 @@ export default class Benchmark extends Component<BenchmarkPropsType, BenchmarkSt
     this.setState(() => ({ running: false, cycle: 0 }));
 
     const runTime = endTime - this._startTime;
-    const sortedElapsedTimes = samples
-      .map(({ elapsed }: { elapsed: number }): number => elapsed)
+    const sortedElapsedTimes = samples.map(({ start, end }) => end - start).sort(sortNumbers);
+    const sortedScriptingElapsedTimes = samples
+      .map(({ scriptingStart, scriptingEnd }) => scriptingEnd - scriptingStart)
+      .sort(sortNumbers);
+    const sortedLayoutElapsedTimes = samples
+      .map(({ layoutStart, layoutEnd }) => (layoutEnd || 0) - (layoutStart || 0))
       .sort(sortNumbers);
-    const mean = getMean(sortedElapsedTimes);
-    const stdDev = getStdDev(sortedElapsedTimes);
 
     onComplete({
       startTime: this._startTime,
@@ -214,8 +238,10 @@ export default class Benchmark extends Component<BenchmarkPropsType, BenchmarkSt
       max: sortedElapsedTimes[sortedElapsedTimes.length - 1],
       min: sortedElapsedTimes[0],
       median: getMedian(sortedElapsedTimes),
-      mean,
-      stdDev
+      mean: getMean(sortedElapsedTimes),
+      stdDev: getStdDev(sortedElapsedTimes),
+      meanLayout: getMean(sortedLayoutElapsedTimes),
+      meanScripting: getMean(sortedScriptingElapsedTimes)
     });
   }
 }

packages/benchmarks/src/app/Benchmark/types.js

@@ -1,4 +1,6 @@
-// @flow
+/**
+ * @flow
+ */
 export type BenchResultsType = {
   startTime: number,
   endTime: number,
@@ -9,20 +11,21 @@ export type BenchResultsType = {
   min: number,
   median: number,
   mean: number,
-  stdDev: number,
-  p70: number,
-  p95: number,
-  p99: number
+  stdDev: number
 };
 
 export type SampleTimingType = {
-  start: number,
-  end?: number,
-  elapsed?: number
+  scriptingStart: number,
+  scriptingEnd?: number,
+  layoutStart?: number,
+  layoutEnd?: number
 };
 
 export type FullSampleTimingType = {
   start: number,
   end: number,
-  elapsed: number
+  scriptingStart: number,
+  scriptingEnd: number,
+  layoutStart?: number,
+  layoutEnd?: number
 };

packages/benchmarks/src/app/Layout.js

@@ -19,11 +19,13 @@ export default class Layout extends Component {
     const { widescreen } = this.state;
     return (
       <View onLayout={this._handleLayout} style={[styles.root, widescreen && styles.row]}>
-        <View style={widescreen ? styles.grow : styles.stackPanel}>{viewPanel}</View>
+        <View style={[widescreen ? styles.grow : styles.stackPanel, styles.layer]}>
+          {viewPanel}
+        </View>
         <View style={styles.grow}>
-          <View style={styles.grow}>{listPanel}</View>
+          <View style={[styles.grow, styles.layer]}>{listPanel}</View>
           <View style={styles.divider} />
-          <View>{actionPanel}</View>
+          <View style={styles.layer}>{actionPanel}</View>
         </View>
       </View>
     );
@@ -59,5 +61,8 @@ const styles = StyleSheet.create({
   },
   stackPanel: {
     height: '33.33%'
+  },
+  layer: {
+    transform: [{ translateZ: '0' }]
   }
 });

packages/benchmarks/src/app/ReportCard.js

@@ -8,37 +8,49 @@ const fmt = (time: number) => {
   return 10 / i > 1 ? `0${i}` : i;
 };
 
-const ReportCard = ({ benchmarkName, libraryName, sampleCount, mean, stdDev, libraryVersion }) => {
-  const sampleCountText = sampleCount != null ? `(${sampleCount})` : '';
+class ReportCard extends React.PureComponent {
+  render() {
+    const {
+      benchmarkName,
+      libraryName,
+      sampleCount,
+      mean,
+      meanLayout,
+      meanScripting,
+      stdDev,
+      libraryVersion
+    } = this.props;
 
-  return (
-    <View style={styles.root}>
-      <View style={styles.left}>
-        <Text numberOfLines={1} style={styles.bold}>
-          {`${libraryName}${libraryVersion ? '@' + libraryVersion : ''}`}
-        </Text>
-        <Text numberOfLines={1}>
-          {benchmarkName} {sampleCountText}
-        </Text>
+    const sampleCountText = sampleCount != null ? `(${sampleCount})` : '';
+
+    return (
+      <View style={styles.root}>
+        <View style={styles.left}>
+          <Text numberOfLines={1} style={styles.bold}>
+            {`${libraryName}${libraryVersion ? '@' + libraryVersion : ''}`}
+          </Text>
+          <Text numberOfLines={1}>
+            {benchmarkName} {sampleCountText}
+          </Text>
+        </View>
+        <View style={styles.right}>
+          {mean ? (
+            <Fragment>
+              <Text style={[styles.bold, styles.monoFont]}>
+                {fmt(mean)} ±{fmt(stdDev)} ms
+              </Text>
+              <Text style={[styles.smallText, styles.monoFont]}>
+                (S/L) {fmt(meanScripting)} / {fmt(meanLayout)} ms
+              </Text>
+            </Fragment>
+          ) : (
+            <Text style={styles.bold}>In progress…</Text>
+          )}
+        </View>
       </View>
-      <View style={styles.right}>
-        {mean ? (
-          <Fragment>
-            <Text style={[styles.bold, styles.monoFont]}>
-              {fmt(mean)} ±{fmt(stdDev)} ms
-            </Text>
-            <Text style={[styles.monoFont, styles.centerText]}>
-              <Text style={styles.smallText}>Σ = </Text>
-              <Text>{Math.round(mean * sampleCount)} ms</Text>
-            </Text>
-          </Fragment>
-        ) : (
-          <Text style={styles.bold}>In progress…</Text>
-        )}
-      </View>
-    </View>
-  );
-};
+    );
+  }
+}
 
 const styles = StyleSheet.create({
   root: {

packages/benchmarks/src/app/Text.js

@@ -1,9 +1,5 @@
 /* eslint-disable react/prop-types */
 
-/**
- * @flow
- */
-
 import { bool } from 'prop-types';
 import React from 'react';
 import { StyleSheet, Text } from 'react-native';

packages/benchmarks/src/cases/SierpinskiTriangle.js

@@ -53,35 +53,34 @@ class SierpinskiTriangle extends React.Component {
 
       s /= 2;
 
-      return [
-        <SierpinskiTriangle
-          components={components}
-          depth={1}
-          key={1}
-          renderCount={renderCount}
-          s={s}
-          x={x}
-          y={y - s / 2}
-        />,
-        <SierpinskiTriangle
-          components={components}
-          depth={2}
-          key={2}
-          renderCount={renderCount}
-          s={s}
-          x={x - s}
-          y={y + s / 2}
-        />,
-        <SierpinskiTriangle
-          components={components}
-          depth={3}
-          key={3}
-          renderCount={renderCount}
-          s={s}
-          x={x + s}
-          y={y + s / 2}
-        />
-      ];
+      return (
+        <React.Fragment>
+          <SierpinskiTriangle
+            components={components}
+            depth={1}
+            renderCount={renderCount}
+            s={s}
+            x={x}
+            y={y - s / 2}
+          />
+          <SierpinskiTriangle
+            components={components}
+            depth={2}
+            renderCount={renderCount}
+            s={s}
+            x={x - s}
+            y={y + s / 2}
+          />
+          <SierpinskiTriangle
+            components={components}
+            depth={3}
+            renderCount={renderCount}
+            s={s}
+            x={x + s}
+            y={y + s / 2}
+          />
+        </React.Fragment>
+      );
     } else {
       return <span style={{ color: 'white' }}>No implementation available</span>;
     }

packages/benchmarks/src/impl.js

@@ -1,5 +1,3 @@
-/* @flow */
-
 import { type Component } from 'react';
 import packageJson from '../package.json';
 

packages/benchmarks/src/implementations/react-jss/Dot.js

@@ -0,0 +1,26 @@
+/* eslint-disable react/prop-types */
+import injectSheet from 'react-jss';
+import React from 'react';
+
+const Dot = ({ classes, children }) => <div className={classes.root}>{children}</div>;
+
+const styles = {
+  root: {
+    position: 'absolute',
+    cursor: 'pointer',
+    width: 0,
+    height: 0,
+    borderColor: 'transparent',
+    borderStyle: 'solid',
+    borderTopWidth: 0,
+    transform: 'translate(50%, 50%)',
+    borderBottomColor: ({ color }) => color,
+    borderRightWidth: ({ size }) => size / 2,
+    borderBottomWidth: ({ size }) => size / 2,
+    borderLeftWidth: ({ size }) => size / 2,
+    marginLeft: ({ x }) => x,
+    marginTop: ({ y }) => y
+  }
+};
+
+export default injectSheet(styles)(Dot);

packages/benchmarks/src/implementations/react-jss/index.js

@@ -1,9 +1,11 @@
 import Box from './Box';
+import Dot from './Dot';
 import Provider from './Provider';
 import View from './View';
 
 export default {
   Box,
+  Dot,
   Provider,
   View
 };

packages/react-native-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-web",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "React Native for Web",
   "main": "dist/index.js",
   "files": [

packages/react-native-web/src/exports/Image/index.js

@@ -108,7 +108,13 @@ class Image extends Component<*, State> {
     onLoadStart: func,
     resizeMode: oneOf(Object.keys(ImageResizeMode)),
     source: ImageSourcePropType,
-    style: StyleSheetPropType(ImageStylePropTypes)
+    style: StyleSheetPropType(ImageStylePropTypes),
+    // compatibility with React Native
+    /* eslint-disable react/sort-prop-types */
+    blurRadius: number,
+    capInsets: shape({ top: number, left: number, bottom: number, right: number }),
+    resizeMethod: oneOf(['auto', 'resize', 'scale'])
+    /* eslint-enable react/sort-prop-types */
   };
 
   static defaultProps = {
@@ -184,10 +190,13 @@ class Image extends Component<*, State> {
       source,
       testID,
       /* eslint-disable */
+      blurRadius,
+      capInsets,
       onError,
       onLoad,
       onLoadEnd,
       onLoadStart,
+      resizeMethod,
       resizeMode,
       /* eslint-enable */
       ...other

packages/react-native-web/src/exports/TextInput/__tests__/index-test.js

@@ -350,12 +350,6 @@ describe('components/TextInput', () => {
     // assert.equal(input.node.selectionStart, 0)
   });
 
-  test('prop "value"', () => {
-    const value = 'value';
-    const input = findNativeInput(shallow(<TextInput value={value} />));
-    expect(input.prop('value')).toEqual(value);
-  });
-
   describe('prop "selection"', () => {
     test('set cursor location', () => {
       const cursorLocation = { start: 3, end: 3 };
@@ -374,4 +368,21 @@ describe('components/TextInput', () => {
       expect(inputCustomSelection.instance().selectionEnd).toEqual(cursorLocation.end);
     });
   });
+
+  test('prop "spellCheck"', () => {
+    // default (inherets from autoCorrect)
+    let input = findNativeInput(shallow(<TextInput />));
+    expect(input.prop('spellCheck')).toEqual(true);
+    input = findNativeInput(shallow(<TextInput autoCorrect={false} />));
+    expect(input.prop('spellCheck')).toEqual(false);
+    // false
+    input = findNativeInput(shallow(<TextInput spellCheck={false} />));
+    expect(input.prop('spellCheck')).toEqual(false);
+  });
+
+  test('prop "value"', () => {
+    const value = 'value';
+    const input = findNativeInput(shallow(<TextInput value={value} />));
+    expect(input.prop('value')).toEqual(value);
+  });
 });

packages/react-native-web/src/exports/TextInput/index.js

@@ -110,6 +110,7 @@ class TextInput extends Component<*> {
       start: number.isRequired,
       end: number
     }),
+    spellCheck: bool,
     style: StyleSheetPropType(TextInputStylePropTypes),
     value: string,
     /* react-native compat */
@@ -130,7 +131,6 @@ class TextInput extends Component<*> {
     returnKeyType: string,
     selectionColor: ColorPropType,
     selectionState: any,
-    spellCheck: bool,
     textBreakStrategy: string,
     underlineColorAndroid: ColorPropType
     /* eslint-enable */
@@ -185,6 +185,7 @@ class TextInput extends Component<*> {
       onSubmitEditing,
       selection,
       selectTextOnFocus,
+      spellCheck,
       /* react-native compat */
       caretHidden,
       clearButtonMode,
@@ -202,7 +203,6 @@ class TextInput extends Component<*> {
       returnKeyType,
       selectionColor,
       selectionState,
-      spellCheck,
       textBreakStrategy,
       underlineColorAndroid,
       /* eslint-enable */
@@ -250,6 +250,7 @@ class TextInput extends Component<*> {
       onSelect: normalizeEventHandler(this._handleSelectionChange),
       readOnly: !editable,
       ref: this._setNode,
+      spellCheck: spellCheck != null ? spellCheck : autoCorrect,
       style: [styles.initial, style]
     });
 

website/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "website",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "scripts": {
     "build": "build-storybook -o ./dist -c ./storybook/.storybook",
     "start": "start-storybook -p 9001 -c ./storybook/.storybook",
@@ -12,7 +12,7 @@
     "@storybook/react": "^3.3.6",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-native-web": "^0.3.2"
+    "react-native-web": "^0.3.4"
   },
   "devDependencies": {
     "babel-plugin-react-native-web": "^0.3.3",

website/storybook/1-components/TextInput/TextInputScreen.js

@@ -95,7 +95,7 @@ const TextInputScreen = () => (
       <DocItem
         name="autoCorrect"
         typeInfo="?boolean = true"
-        description="Automatically correct spelling mistakes (only available in iOS Safari)."
+        description="Automatically correct spelling mistakes. (Only available in iOS Safari.)"
       />
 
       <DocItem
@@ -286,6 +286,12 @@ nativeEvent: { key: keyValue } }`}</Code>{' '}
         }}
       />
 
+      <DocItem
+        name="spellCheck"
+        typeInfo="?boolean"
+        description="If false, disables spell-check style (i.e. red underlines). The default value is inherited from autoCorrect. (Only available in supporting browsers)."
+      />
+
       <DocItem
         name="style"
         typeInfo="?style"

yarn.lock

@@ -255,10 +255,14 @@
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/inline-style-prefixer/-/inline-style-prefixer-3.0.1.tgz#8541e636b029124b747952e9a28848286d2b5bf6"
 
-"@types/lodash@^4.14.64", "@types/lodash@^4.14.78":
+"@types/lodash@^4.14.64":
   version "4.14.91"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.91.tgz#794611b28056d16b5436059c6d800b39d573cd3a"
 
+"@types/lodash@^4.14.78":
+  version "4.14.97"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.97.tgz#7262d6d5fc5e87cdb3f68eb33accd4024f2b211e"
+
 "@types/node@*":
   version "8.5.2"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.5.2.tgz#83b8103fa9a2c2e83d78f701a9aa7c9539739aa5"
@@ -270,10 +274,14 @@
     "@types/node" "*"
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.0.0", "@types/react@^16.0.18":
+"@types/react@*", "@types/react@^16.0.18":
   version "16.0.31"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.31.tgz#5285da62f3ac62b797f6d0729a1d6181f3180c3e"
 
+"@types/react@^16.0.0":
+  version "16.0.35"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.35.tgz#7ce8a83cad9690fd965551fc513217a74fc9e079"
+
 JSONStream@^1.0.4:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.2.tgz#c102371b6ec3a7cf3b847ca00c20bb0fce4c6dea"
@@ -2610,12 +2618,6 @@ css-in-js-utils@2.0.0, css-in-js-utils@^2.0.0:
   dependencies:
     hyphenate-style-name "^1.0.2"
 
-css-in-js-utils@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-1.0.3.tgz#9ac7e02f763cf85d94017666565ed68a5b5f3215"
-  dependencies:
-    hyphenate-style-name "^1.0.2"
-
 css-loader@^0.28.8:
   version "0.28.8"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.8.tgz#ff36381464dea18fe60f2601a060ba6445886bd5"
@@ -3329,12 +3331,6 @@ eslint-config-prettier@^2.9.0:
   dependencies:
     get-stdin "^5.0.1"
 
-eslint-plugin-cup@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-cup/-/eslint-plugin-cup-1.0.0.tgz#6ceced9a06d29e6e7bdc76ca9e398c9bf53072be"
-  dependencies:
-    globals "^10.0.0"
-
 eslint-plugin-promise@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.6.0.tgz#54b7658c8f454813dc2a870aff8152ec4969ba75"
@@ -3623,14 +3619,24 @@ fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.9"
 
-fela-dom@^5.0.0:
-  version "5.0.8"
-  resolved "https://registry.npmjs.org/fela-dom/-/fela-dom-5.0.8.tgz#e793596b01075aec0b89b67935db70a2d6dc0da8"
+fela-bindings@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/fela-bindings/-/fela-bindings-1.3.4.tgz#f48887dfed8c0948d851af14b18434d902cb034f"
   dependencies:
-    fela-tools "^5.0.7"
-    fela-utils "^6.0.1"
+    fast-loops "^1.0.0"
+    fela-dom "^7.0.4"
+    fela-tools "^5.1.2"
+    shallow-equal "^1.0.0"
 
-fela-tools@^5.0.0, fela-tools@^5.0.7:
+fela-dom@^7.0.4:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/fela-dom/-/fela-dom-7.0.4.tgz#30a159d12142c5cec376608a5dd1d4395462c4a0"
+  dependencies:
+    css-in-js-utils "^2.0.0"
+    fast-loops "^1.0.0"
+    fela-utils "^8.0.3"
+
+fela-tools@^5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/fela-tools/-/fela-tools-5.1.2.tgz#c6760b42d72116911c2c0341b6d880cfc11c76a8"
   dependencies:
@@ -3639,18 +3645,6 @@ fela-tools@^5.0.0, fela-tools@^5.0.7:
     fela "^6.1.3"
     fela-utils "^8.0.3"
 
-fela-utils@^5.0.0:
-  version "5.0.5"
-  resolved "https://registry.npmjs.org/fela-utils/-/fela-utils-5.0.5.tgz#6a89290c8aa6866d9a0b98f41408485edc454ada"
-  dependencies:
-    css-in-js-utils "^1.0.3"
-
-fela-utils@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/fela-utils/-/fela-utils-6.0.1.tgz#eb9c50a0fd984a194e2b984d176237ee349dcb7e"
-  dependencies:
-    css-in-js-utils "^2.0.0"
-
 fela-utils@^8.0.3:
   version "8.0.3"
   resolved "https://registry.npmjs.org/fela-utils/-/fela-utils-8.0.3.tgz#4a1728e7f5711e26f6f37da9c85a6b270c84c466"
@@ -3658,25 +3652,9 @@ fela-utils@^8.0.3:
     css-in-js-utils "^2.0.0"
     fast-loops "^1.0.0"
 
-fela@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/fela/-/fela-5.0.0.tgz#e3b4c58637ed8666263de36fcbad4030f90a989b"
-  dependencies:
-    css-in-js-utils "^1.0.3"
-    fela-tools "^5.0.0"
-    fela-utils "^5.0.0"
-
-fela@^5.0.0:
-  version "5.2.0"
-  resolved "https://registry.npmjs.org/fela/-/fela-5.2.0.tgz#62a88de0962f0374429f3aed284025cf032b6e36"
-  dependencies:
-    css-in-js-utils "^2.0.0"
-    fela-tools "^5.0.7"
-    fela-utils "^6.0.1"
-
-fela@^6.1.3:
+fela@6.1.3, fela@^6.1.3:
   version "6.1.3"
-  resolved "https://registry.npmjs.org/fela/-/fela-6.1.3.tgz#c3bc8726dada63c23914bed9ca79d902e61e9a74"
+  resolved "https://registry.yarnpkg.com/fela/-/fela-6.1.3.tgz#c3bc8726dada63c23914bed9ca79d902e61e9a74"
   dependencies:
     css-in-js-utils "2.0.0"
     fast-loops "^1.0.0"
@@ -6853,9 +6831,9 @@ querystring@0.2.0, querystring@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
 
-radium@0.21.0:
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/radium/-/radium-0.21.0.tgz#15ad5f7dccdc9b5a4d09e3c8f23dddcd8717f15b"
+radium@0.21.2:
+  version "0.21.2"
+  resolved "https://registry.yarnpkg.com/radium/-/radium-0.21.2.tgz#b7fbc52a8084a5f1f78c3389e639020507d2dfac"
   dependencies:
     array-find "^1.0.0"
     exenv "^1.2.1"
@@ -6970,12 +6948,12 @@ react-dom@^16.2.0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-react-fela@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/react-fela/-/react-fela-5.0.0.tgz#5412eb3a109f7bb95ff01aa375cbbbd6a3676762"
+react-fela@6.2.4:
+  version "6.2.4"
+  resolved "https://registry.yarnpkg.com/react-fela/-/react-fela-6.2.4.tgz#18e5984c22d8eb8921ed4c43500a5f7608b91c40"
   dependencies:
-    fela "^5.0.0"
-    fela-dom "^5.0.0"
+    fela-bindings "^1.3.4"
+    fela-dom "^7.0.4"
     prop-types "^15.5.8"
 
 react-fuzzy@^0.5.1:
@@ -7109,9 +7087,9 @@ react@^16.2.0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-reactxp@0.51.0-alpha.9:
-  version "0.51.0-alpha.9"
-  resolved "https://registry.yarnpkg.com/reactxp/-/reactxp-0.51.0-alpha.9.tgz#471ee6e7be65fe2461143eb6f49413cbb321b327"
+reactxp@0.51.2:
+  version "0.51.2"
+  resolved "https://registry.yarnpkg.com/reactxp/-/reactxp-0.51.2.tgz#c95f544bedff770a3e09881cf1599e0390b011f9"
   dependencies:
     "@types/lodash" "^4.14.78"
     "@types/react" "^16.0.0"
@@ -7537,7 +7515,7 @@ schema-utils@^0.3.0:
   dependencies:
     ajv "^5.0.0"
 
-schema-utils@^0.4.2:
+schema-utils@^0.4.2, schema-utils@^0.4.3:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.3.tgz#e2a594d3395834d5e15da22b48be13517859458e"
   dependencies:
@@ -7622,6 +7600,10 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+shallow-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.0.0.tgz#508d1838b3de590ab8757b011b25e430900945f7"
+
 shallowequal@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-0.2.2.tgz#1e32fd5bcab6ad688a4812cb0cc04efc75c7014e"
@@ -7930,6 +7912,13 @@ strong-log-transformer@^1.0.6:
     moment "^2.6.0"
     through "^2.3.4"
 
+style-loader@0.20.1:
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.20.1.tgz#33ac2bf4d5c65a8906bc586ad253334c246998d0"
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^0.4.3"
+
 style-loader@^0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.19.1.tgz#591ffc80bcefe268b77c5d9ebc0505d772619f85"
@@ -7937,9 +7926,9 @@ style-loader@^0.19.1:
     loader-utils "^1.0.2"
     schema-utils "^0.3.0"
 
-styled-components@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.4.0.tgz#086d0fd483d54638837fca3ea546a030b94adf75"
+styled-components@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.1.2.tgz#0769655335eb6800dc5f6691425f6f7fe1801e32"
   dependencies:
     buffer "^5.0.3"
     css-to-react-native "^2.0.3"
@@ -7948,11 +7937,12 @@ styled-components@2.4.0:
     is-plain-object "^2.0.1"
     prop-types "^15.5.4"
     stylis "^3.4.0"
+    stylis-rule-sheet "^0.0.7"
     supports-color "^3.2.3"
 
-styled-jsx@2.2.1, styled-jsx@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-2.2.1.tgz#8b38b9e53e5d9767e392595ab1afdc8426b3ba5d"
+styled-jsx@2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-2.2.2.tgz#f46fa55b52c99f271f522fe66178ea1528bdf04e"
   dependencies:
     babel-plugin-syntax-jsx "6.18.0"
     babel-types "6.26.0"
@@ -7962,40 +7952,39 @@ styled-jsx@2.2.1, styled-jsx@^2.2.1:
     stylis "3.4.5"
     stylis-rule-sheet "0.0.7"
 
-styletron-client@3.0.2, styletron-client@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/styletron-client/-/styletron-client-3.0.2.tgz#9b2853e8b94e6e94d70166b8403f27ab2d10c514"
+styletron-client@3.0.4, styletron-client@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/styletron-client/-/styletron-client-3.0.4.tgz#50c3fcdc7f45ed0693d68dc174bd0f2fa607cc57"
   dependencies:
-    styletron-core "^3.0.2"
+    styletron-core "^3.0.4"
 
-styletron-core@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/styletron-core/-/styletron-core-3.0.2.tgz#67513feed50fb39753f72e547d00dfdb619ae79f"
+styletron-core@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/styletron-core/-/styletron-core-3.0.4.tgz#648081572a8de30acbe3008cd283c421565444bb"
 
-styletron-react@3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/styletron-react/-/styletron-react-3.0.3.tgz#67d2932db82972e0ea60544b7d5b8c6d5aecd3a3"
+styletron-react@3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/styletron-react/-/styletron-react-3.0.4.tgz#fe7714778a809f6c2634b62a334fc0b6ba265a36"
   dependencies:
     "@types/react" "*"
-    eslint-plugin-cup "^1.0.0"
     prop-types "^15.6.0"
-    styletron-client "^3.0.2"
-    styletron-server "^3.0.2"
-    styletron-utils "^3.0.2"
+    styletron-client "^3.0.4"
+    styletron-server "^3.0.4"
+    styletron-utils "^3.0.4"
 
-styletron-server@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/styletron-server/-/styletron-server-3.0.2.tgz#0b989c833ed48437d68b728f65e9406fb8802de6"
+styletron-server@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/styletron-server/-/styletron-server-3.0.4.tgz#6bf24643b2ce84198d0fcb7c27308f00880c8dfd"
   dependencies:
-    styletron-core "^3.0.2"
+    styletron-core "^3.0.4"
 
-styletron-utils@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/styletron-utils/-/styletron-utils-3.0.2.tgz#3bd18f60d8a8534e19d500ffa052a2f1c6c31198"
+styletron-utils@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/styletron-utils/-/styletron-utils-3.0.4.tgz#6696320f6ade52383006c4d47e72c5c6a1f37b15"
   dependencies:
     inline-style-prefixer "^4.0.0"
 
-stylis-rule-sheet@0.0.7:
+stylis-rule-sheet@0.0.7, stylis-rule-sheet@^0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.7.tgz#5c51dc879141a61821c2094ba91d2cbcf2469c6c"