0.9.7

Inserting and deleting the CSS ':focus' rule triggers styles recalculation for the
entire DOM tree which results in performance degradation on focus and makes the
keyboard very slow to open in Safari iOS.

This commit fixes the issue by picking up the upstream changes to the W3C
focus-visible polyfill. A class name is applied to elements when they receive
focus via keyboard. The related CSS rule is inserted only once into the style
sheet. This performs much better since the browser needs to recalculate styles
only for the focused element and its small subtree.

Fix #1155
Close #1169

README.md

@@ -74,8 +74,8 @@ recipes" guide.
 Examples of using React Native for Web with other web tools:
 
 * [Docz](https://github.com/pedronauck/docz-plugin-react-native)
-* [Gatsby](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-react-native-web)
+* [Gatsby](https://github.com/slorber/gatsby-plugin-react-native-web)
-* [Next.js](https://github.com/zeit/next.js/tree/master/examples/with-react-native-web)
+* [Next.js](https://github.com/zeit/next.js/tree/master/examples/with-react-native-web) (and [example recipes](https://gist.github.com/necolas/f9034091723f1b279be86c7429eb0c96))
 * [Phenomic](https://github.com/phenomic/phenomic/tree/master/examples/react-native-web-app)
 * [Razzle](https://github.com/jaredpalmer/razzle/tree/master/examples/with-react-native-web)
 * [Storybook](https://github.com/necolas/react-native-web/tree/master/packages/website/storybook/.storybook)

docs/guides/getting-started.md

@@ -24,20 +24,13 @@ yarn add react-art
 
 ## Starter kits
 
-Web: [create-react-app](https://github.com/facebookincubator/create-react-app)
+[create-react-app](https://github.com/facebookincubator/create-react-app)
 includes built-in support for aliasing `react-native-web` to `react-native`.
 
 ```
 create-react-app my-app
 ```
 
-Multi-platform: [create-react-native-app](https://github.com/react-community/create-react-native-app)
-includes experimental support for Web.
-
-```
-create-react-native-app my-app --with-web-support
-```
-
 ## Configuring a module bundler
 
 If you have a custom setup, you may choose to configure your module bundler to

docs/guides/multi-platform-apps.md

@@ -54,7 +54,7 @@ from your web app build. To help with this, you can install the following Babel
 plugin:
 
 ```
-yarn install --dev babel-plugin-react-native-web
+yarn add --dev babel-plugin-react-native-web
 ```
 
 Create a `web/webpack.config.js` file:

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "0.8.11",
+  "version": "0.9.7",
   "name": "react-native-web-monorepo",
   "scripts": {
     "clean": "del ./packages/*/dist",
@@ -39,8 +39,8 @@
     "babel-preset-react-native": "^4.0.0",
     "caniuse-api": "^2.0.0",
     "del-cli": "^1.1.0",
-    "enzyme": "^3.3.0",
+    "enzyme": "^3.6.0",
-    "enzyme-adapter-react-16": "^1.1.0",
+    "enzyme-adapter-react-16": "^1.5.0",
     "enzyme-to-json": "^3.3.3",
     "eslint": "^4.19.1",
     "eslint-config-prettier": "^2.9.0",
@@ -54,10 +54,10 @@
     "lint-staged": "^7.1.0",
     "npm-run-all": "^4.1.3",
     "prettier": "^1.12.1",
-    "react": "^16.4.1",
+    "react": "^16.5.1",
-    "react-art": "^16.4.1",
+    "react-art": "^16.5.1",
-    "react-dom": "^16.4.1",
+    "react-dom": "^16.5.1",
-    "react-test-renderer": "^16.4.1"
+    "react-test-renderer": "^16.5.1"
   },
   "workspaces": [
     "packages/*"

packages/babel-plugin-react-native-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-react-native-web",
-  "version": "0.8.11",
+  "version": "0.9.7",
   "description": "Babel plugin for React Native for Web",
   "main": "index.js",
   "devDependencies": {

packages/benchmarks/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "benchmarks",
-  "version": "0.8.11",
+  "version": "0.9.7",
   "scripts": {
     "build": "mkdir -p dist && cp -f index.html dist/index.html && ./node_modules/.bin/webpack-cli --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 -"
@@ -14,11 +14,11 @@
     "fela": "^6.1.9",
     "glamor": "2.20.40",
     "radium": "^0.24.0",
-    "react": "^16.4.1",
+    "react": "^16.5.1",
-    "react-dom": "^16.4.1",
+    "react-dom": "^16.5.1",
     "react-fela": "^7.3.1",
     "react-jss": "^8.6.1",
-    "react-native-web": "0.8.11",
+    "react-native-web": "0.9.7",
     "reactxp": "^1.3.0",
     "styled-components": "^3.3.3",
     "styled-jsx": "^2.2.7",
@@ -26,7 +26,7 @@
     "styletron-react": "^4.3.1"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "0.8.11",
+    "babel-plugin-react-native-web": "0.9.7",
     "css-loader": "^1.0.0",
     "style-loader": "^0.21.0",
     "url-loader": "^1.0.1",

packages/examples/package.json

@@ -1,19 +1,19 @@
 {
   "private": true,
   "name": "react-native-examples",
-  "version": "0.8.11",
+  "version": "0.9.7",
   "scripts": {
     "build": "mkdir -p dist && cp -f src/index.html dist/index.html && ./node_modules/.bin/webpack-cli --config ./webpack.config.js",
     "release": "yarn build && git checkout gh-pages && rm -rf ../../examples && mv dist ../../examples && git add -A && git commit -m \"Examples deploy\" && git push origin gh-pages && git checkout -"
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "react": "^16.4.1",
+    "react": "^16.5.1",
-    "react-dom": "^16.4.1",
+    "react-dom": "^16.5.1",
-    "react-native-web": "0.8.11"
+    "react-native-web": "0.9.7"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "0.8.11",
+    "babel-plugin-react-native-web": "0.9.7",
     "babel-plugin-transform-runtime": "^6.23.0",
     "file-loader": "^1.1.11",
     "webpack": "^4.8.1",

packages/react-native-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-web",
-  "version": "0.8.11",
+  "version": "0.9.7",
   "description": "React Native for Web",
   "module": "dist/index.js",
   "main": "dist/cjs/index.js",
@@ -25,9 +25,9 @@
     "react-timer-mixin": "^0.13.3"
   },
   "peerDependencies": {
-    "react": "16.4.x",
+    "react": ">=16.5.1",
-    "react-art": "16.4.x",
+    "react-art": ">=16.5.1",
-    "react-dom": "16.4.x"
+    "react-dom": ">=16.5.1"
   },
   "author": "Nicolas Gallagher",
   "license": "MIT",

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

@@ -8,11 +8,16 @@
  * @flow
  */
 
+let clipboardAvailable;
+
 export default class Clipboard {
   static isAvailable() {
-    return (
+    if (clipboardAvailable === undefined) {
-      typeof document.queryCommandSupported === 'function' && document.queryCommandSupported('copy')
+      clipboardAvailable =
-    );
+        typeof document.queryCommandSupported === 'function' &&
+        document.queryCommandSupported('copy');
+    }
+    return clipboardAvailable;
   }
 
   static getString(): Promise<string> {

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

@@ -279,15 +279,13 @@ const styles = StyleSheet.create({
     ...commonStyle,
     flexDirection: 'column',
     overflowX: 'hidden',
-    overflowY: 'auto',
+    overflowY: 'auto'
-    touchAction: 'pan-y'
   },
   baseHorizontal: {
     ...commonStyle,
     flexDirection: 'row',
     overflowX: 'auto',
-    overflowY: 'hidden',
+    overflowY: 'hidden'
-    touchAction: 'pan-x'
   },
   contentContainerHorizontal: {
     flexDirection: 'row'

packages/react-native-web/src/exports/StyleSheet/__tests__/i18nStyle-test.js

@@ -32,11 +32,13 @@ describe('StyleSheet/i18nStyle', () => {
     test('converts end/start values', () => {
       const initial = {
         float: 'start',
-        textAlign: 'end'
+        textAlign: 'end',
+        transitionProperty: 'marginStart'
       };
       const expected = {
         float: 'left',
-        textAlign: 'right'
+        textAlign: 'right',
+        transitionProperty: 'marginLeft'
       };
       expect(i18nStyle(initial)).toEqual(expected);
     });
@@ -56,7 +58,8 @@ describe('StyleSheet/i18nStyle', () => {
         clear: 'left',
         float: 'left',
         textAlign: 'right',
-        textShadowOffset: { width: '1rem', height: 10 }
+        textShadowOffset: { width: '1rem', height: 10 },
+        transitionProperty: 'marginLeft'
       };
       expect(i18nStyle(initial)).toEqual(initial);
     });
@@ -116,11 +119,13 @@ describe('StyleSheet/i18nStyle', () => {
       test('converts end/start values', () => {
         const initial = {
           float: 'start',
-          textAlign: 'end'
+          textAlign: 'end',
+          transitionProperty: 'marginStart'
         };
         const expected = {
           float: 'right',
-          textAlign: 'left'
+          textAlign: 'left',
+          transitionProperty: 'marginRight'
         };
         expect(i18nStyle(initial)).toEqual(expected);
       });
@@ -140,7 +145,8 @@ describe('StyleSheet/i18nStyle', () => {
           clear: 'left',
           float: 'left',
           textAlign: 'right',
-          textShadowOffset: { width: '1rem', height: 10 }
+          textShadowOffset: { width: '1rem', height: 10 },
+          transitionProperty: 'marginLeft'
         };
         expect(i18nStyle(initial)).toEqual(initial);
       });
@@ -183,11 +189,13 @@ describe('StyleSheet/i18nStyle', () => {
       test('converts end/start values', () => {
         const initial = {
           float: 'start',
-          textAlign: 'end'
+          textAlign: 'end',
+          transitionProperty: 'marginStart'
         };
         const expected = {
           float: 'right',
-          textAlign: 'left'
+          textAlign: 'left',
+          transitionProperty: 'marginRight'
         };
         expect(i18nStyle(initial)).toEqual(expected);
       });
@@ -212,12 +220,14 @@ describe('StyleSheet/i18nStyle', () => {
         const initial = {
           float: 'left',
           textAlign: 'right',
-          textShadowOffset: { width: '1rem', height: 10 }
+          textShadowOffset: { width: '1rem', height: 10 },
+          transitionProperty: 'marginLeft'
         };
         const expected = {
           float: 'right',
           textAlign: 'left',
-          textShadowOffset: { width: '-1rem', height: 10 }
+          textShadowOffset: { width: '-1rem', height: 10 },
+          transitionProperty: 'marginRight'
         };
         expect(i18nStyle(initial)).toEqual(expected);
       });

packages/react-native-web/src/exports/StyleSheet/i18nStyle.js

@@ -116,6 +116,19 @@ const i18nStyle = originalStyle => {
       }
     }
 
+    // BiDi flip transitionProperty value
+    if (prop === 'transitionProperty') {
+      // BiDi flip properties
+      if (PROPERTIES_I18N.hasOwnProperty(value)) {
+        // convert start/end
+        const convertedValue = PROPERTIES_I18N[originalValue];
+        value = isRTL ? PROPERTIES_FLIP[convertedValue] : convertedValue;
+      } else if (isRTL && doLeftAndRightSwapInRTL && PROPERTIES_FLIP[originalValue]) {
+        value = PROPERTIES_FLIP[originalValue];
+      }
+    }
+
+    // Create finalized style
     if (isRTL && prop === 'textShadowOffset') {
       nextStyle[prop] = value;
       nextStyle[prop].width = additiveInverse(value.width);

packages/react-native-web/src/exports/StyleSheet/modality.js

@@ -11,125 +11,250 @@
  * 1. a keydown event occurred immediately before a focus event;
  * 2. a focus event happened on an element which requires keyboard interaction (e.g., a text field);
  *
- * Based on https://github.com/WICG/focus-ring
+ * This software or document includes material copied from or derived from https://github.com/WICG/focus-visible.
+ * Copyright © 2018 W3C® (MIT, ERCIM, Keio, Beihang).
+ * W3C Software Notice and License: https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
  *
  * @noflow
  */
 
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+import hash from '../../vendor/hash';
 
-const rule = ':focus { outline: none; }';
+const focusVisibleClass =
-let ruleExists = false;
+  'rn-' + (process.env.NODE_ENV !== 'production' ? 'focusVisible-' : '') + hash('focus-visible');
+
+const rule = `:focus:not(.${focusVisibleClass}) { outline: none; }`;
 
 const modality = styleElement => {
   if (!canUseDOM) {
     return;
   }
 
-  let hadKeyboardEvent = false;
+  let hadKeyboardEvent = true;
-  let keyboardThrottleTimeoutID = 0;
+  let hadFocusVisibleRecently = false;
+  let hadFocusVisibleRecentlyTimeout = null;
 
-  const proto = window.Element.prototype;
+  const inputTypesWhitelist = {
-  const matches =
+    text: true,
-    proto.matches ||
+    search: true,
-    proto.mozMatchesSelector ||
+    url: true,
-    proto.msMatchesSelector ||
+    tel: true,
-    proto.webkitMatchesSelector;
+    email: true,
+    password: true,
+    number: true,
+    date: true,
+    month: true,
+    week: true,
+    time: true,
+    datetime: true,
+    'datetime-local': true
+  };
 
-  // These elements should always have a focus ring drawn, because they are
+  /**
-  // associated with switching to a keyboard modality.
+   * Helper function for legacy browsers and iframes which sometimes focus
-  const keyboardModalityWhitelist = [
+   * elements like document, body, and non-interactive SVG.
-    'input:not([type])',
+   */
-    'input[type=text]',
+  function isValidFocusTarget(el) {
-    'input[type=search]',
+    if (
-    'input[type=url]',
+      el &&
-    'input[type=tel]',
+      el !== document &&
-    'input[type=email]',
+      el.nodeName !== 'HTML' &&
-    'input[type=password]',
+      el.nodeName !== 'BODY' &&
-    'input[type=number]',
+      'classList' in el &&
-    'input[type=date]',
+      'contains' in el.classList
-    'input[type=month]',
+    ) {
-    'input[type=week]',
+      return true;
-    'input[type=time]',
+    }
-    'input[type=datetime]',
+    return false;
-    'input[type=datetime-local]',
+  }
-    'textarea',
-    '[role=textbox]'
-  ].join(',');
 
   /**
    * Computes whether the given element should automatically trigger the
-   * `focus-ring`.
+   * `focus-visible` class being added, i.e. whether it should always match
+   * `:focus-visible` when focused.
    */
-  const focusTriggersKeyboardModality = el => {
+  function focusTriggersKeyboardModality(el) {
-    if (matches) {
+    const type = el.type;
-      return matches.call(el, keyboardModalityWhitelist) && matches.call(el, ':not([readonly])');
+    const tagName = el.tagName;
-    } else {
+    const isReadOnly = el.readOnly;
-      return false;
-    }
-  };
 
-  /**
+    if (tagName === 'INPUT' && inputTypesWhitelist[type] && !isReadOnly) {
-   * Add the focus ring style
+      return true;
-   */
-  const addFocusRing = () => {
-    if (styleElement && ruleExists) {
-      styleElement.sheet.deleteRule(0);
-      ruleExists = false;
     }
-  };
 
-  /**
+    if (tagName === 'TEXTAREA' && !isReadOnly) {
-   * Remove the focus ring style
+      return true;
-   */
-  const removeFocusRing = () => {
-    if (styleElement && !ruleExists) {
-      styleElement.sheet.insertRule(rule, 0);
-      ruleExists = true;
     }
-  };
 
-  /**
+    if (el.isContentEditable) {
-   * On `keydown`, set `hadKeyboardEvent`, to be removed 100ms later if there
+      return true;
-   * are no further keyboard events. The 100ms throttle handles cases where
-   * focus is redirected programmatically after a keyboard event, such as
-   * opening a menu or dialog.
-   */
-  const handleKeyDown = e => {
-    hadKeyboardEvent = true;
-    if (keyboardThrottleTimeoutID !== 0) {
-      clearTimeout(keyboardThrottleTimeoutID);
     }
-    keyboardThrottleTimeoutID = setTimeout(() => {
-      hadKeyboardEvent = false;
-      keyboardThrottleTimeoutID = 0;
-    }, 100);
-  };
 
-  /**
+    return false;
-   * Display the focus-ring when the keyboard was used to focus
-   */
-  const handleFocus = e => {
-    if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) {
-      addFocusRing();
-    }
-  };
-
-  /**
-   * Remove the focus-ring when the keyboard was used to focus
-   */
-  const handleBlur = () => {
-    if (!hadKeyboardEvent) {
-      removeFocusRing();
-    }
-  };
-
-  if (document.body && document.body.addEventListener) {
-    removeFocusRing();
-    document.body.addEventListener('keydown', handleKeyDown, true);
-    document.body.addEventListener('focus', handleFocus, true);
-    document.body.addEventListener('blur', handleBlur, true);
   }
+
+  /**
+   * Add the `focus-visible` class to the given element if it was not added by
+   * the author.
+   */
+  function addFocusVisibleClass(el) {
+    if (el.classList.contains(focusVisibleClass)) {
+      return;
+    }
+    el.classList.add(focusVisibleClass);
+  }
+
+  /**
+   * Remove the `focus-visible` class from the given element if it was not
+   * originally added by the author.
+   */
+  function removeFocusVisibleClass(el) {
+    el.classList.remove(focusVisibleClass);
+  }
+
+  /**
+   * Treat `keydown` as a signal that the user is in keyboard modality.
+   * Apply `focus-visible` to any current active element and keep track
+   * of our keyboard modality state with `hadKeyboardEvent`.
+   */
+  function onKeyDown(e) {
+    if (e.key !== 'Tab' && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
+      return;
+    }
+
+    if (isValidFocusTarget(document.activeElement)) {
+      addFocusVisibleClass(document.activeElement);
+    }
+
+    hadKeyboardEvent = true;
+  }
+
+  /**
+   * If at any point a user clicks with a pointing device, ensure that we change
+   * the modality away from keyboard.
+   * This avoids the situation where a user presses a key on an already focused
+   * element, and then clicks on a different element, focusing it with a
+   * pointing device, while we still think we're in keyboard modality.
+   */
+  function onPointerDown(e) {
+    hadKeyboardEvent = false;
+  }
+
+  /**
+   * On `focus`, add the `focus-visible` class to the target if:
+   * - the target received focus as a result of keyboard navigation, or
+   * - the event target is an element that will likely require interaction
+   *   via the keyboard (e.g. a text box)
+   */
+  function onFocus(e) {
+    // Prevent IE from focusing the document or HTML element.
+    if (!isValidFocusTarget(e.target)) {
+      return;
+    }
+
+    if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) {
+      addFocusVisibleClass(e.target);
+    }
+  }
+
+  /**
+   * On `blur`, remove the `focus-visible` class from the target.
+   */
+  function onBlur(e) {
+    if (!isValidFocusTarget(e.target)) {
+      return;
+    }
+
+    if (e.target.classList.contains(focusVisibleClass)) {
+      // To detect a tab/window switch, we look for a blur event followed
+      // rapidly by a visibility change.
+      // If we don't see a visibility change within 100ms, it's probably a
+      // regular focus change.
+      hadFocusVisibleRecently = true;
+      window.clearTimeout(hadFocusVisibleRecentlyTimeout);
+      hadFocusVisibleRecentlyTimeout = window.setTimeout(function() {
+        hadFocusVisibleRecently = false;
+        window.clearTimeout(hadFocusVisibleRecentlyTimeout);
+      }, 100);
+      removeFocusVisibleClass(e.target);
+    }
+  }
+
+  /**
+   * If the user changes tabs, keep track of whether or not the previously
+   * focused element had .focus-visible.
+   */
+  function onVisibilityChange(e) {
+    if (document.visibilityState === 'hidden') {
+      // If the tab becomes active again, the browser will handle calling focus
+      // on the element (Safari actually calls it twice).
+      // If this tab change caused a blur on an element with focus-visible,
+      // re-apply the class when the user switches back to the tab.
+      if (hadFocusVisibleRecently) {
+        hadKeyboardEvent = true;
+      }
+      addInitialPointerMoveListeners();
+    }
+  }
+
+  /**
+   * Add a group of listeners to detect usage of any pointing devices.
+   * These listeners will be added when the polyfill first loads, and anytime
+   * the window is blurred, so that they are active when the window regains
+   * focus.
+   */
+  function addInitialPointerMoveListeners() {
+    document.addEventListener('mousemove', onInitialPointerMove);
+    document.addEventListener('mousedown', onInitialPointerMove);
+    document.addEventListener('mouseup', onInitialPointerMove);
+    document.addEventListener('pointermove', onInitialPointerMove);
+    document.addEventListener('pointerdown', onInitialPointerMove);
+    document.addEventListener('pointerup', onInitialPointerMove);
+    document.addEventListener('touchmove', onInitialPointerMove);
+    document.addEventListener('touchstart', onInitialPointerMove);
+    document.addEventListener('touchend', onInitialPointerMove);
+  }
+
+  function removeInitialPointerMoveListeners() {
+    document.removeEventListener('mousemove', onInitialPointerMove);
+    document.removeEventListener('mousedown', onInitialPointerMove);
+    document.removeEventListener('mouseup', onInitialPointerMove);
+    document.removeEventListener('pointermove', onInitialPointerMove);
+    document.removeEventListener('pointerdown', onInitialPointerMove);
+    document.removeEventListener('pointerup', onInitialPointerMove);
+    document.removeEventListener('touchmove', onInitialPointerMove);
+    document.removeEventListener('touchstart', onInitialPointerMove);
+    document.removeEventListener('touchend', onInitialPointerMove);
+  }
+
+  /**
+   * When the polfyill first loads, assume the user is in keyboard modality.
+   * If any event is received from a pointing device (e.g. mouse, pointer,
+   * touch), turn off keyboard modality.
+   * This accounts for situations where focus enters the page from the URL bar.
+   */
+  function onInitialPointerMove(e) {
+    // Work around a Safari quirk that fires a mousemove on <html> whenever the
+    // window blurs, even if you're tabbing out of the page. ¯\_(ツ)_/¯
+    if (e.target.nodeName === 'HTML') {
+      return;
+    }
+
+    hadKeyboardEvent = false;
+    removeInitialPointerMoveListeners();
+  }
+
+  styleElement.sheet.insertRule(rule, 0);
+
+  document.addEventListener('keydown', onKeyDown, true);
+  document.addEventListener('mousedown', onPointerDown, true);
+  document.addEventListener('pointerdown', onPointerDown, true);
+  document.addEventListener('touchstart', onPointerDown, true);
+  document.addEventListener('focus', onFocus, true);
+  document.addEventListener('blur', onBlur, true);
+  document.addEventListener('visibilitychange', onVisibilityChange, true);
+  addInitialPointerMoveListeners();
 };
 
 export default modality;

packages/react-native-web/src/exports/Text/TextPropTypes.js

@@ -21,6 +21,7 @@ const TextPropTypes = {
   accessible: bool,
   children: any,
   importantForAccessibility: oneOf(['auto', 'no', 'no-hide-descendants', 'yes']),
+  nativeID: string,
   numberOfLines: number,
   onBlur: func,
   onContextMenu: func,

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

@@ -7,12 +7,14 @@
  * @flow
  */
 
+import ColorPropType from '../ColorPropType';
 import TextStylePropTypes from '../Text/TextStylePropTypes';
 import { oneOf } from 'prop-types';
 
 const TextInputStylePropTypes = {
   ...TextStylePropTypes,
   /* @platform web */
+  caretColor: ColorPropType,
   resize: oneOf(['none', 'vertical', 'horizontal', 'both'])
 };
 

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

@@ -175,8 +175,6 @@ class TextInput extends Component<*> {
     const {
       autoCorrect,
       editable,
-      /* eslint-disable */
-      inputAccessoryViewID,
       keyboardType,
       multiline,
       numberOfLines,
@@ -193,22 +191,34 @@ class TextInput extends Component<*> {
       selectTextOnFocus,
       spellCheck,
       /* react-native compat */
+      accessibilityViewIsModal,
+      allowFontScaling,
       caretHidden,
       clearButtonMode,
       dataDetectorTypes,
       disableFullscreenUI,
       enablesReturnKeyAutomatically,
+      hitSlop,
       inlineImageLeft,
       inlineImagePadding,
+      inputAccessoryViewID,
       keyboardAppearance,
+      needsOffscreenAlphaCompositing,
+      onAccessibilityTap,
       onContentSizeChange,
       onEndEditing,
+      onMagicTap,
       onScroll,
+      removeClippedSubviews,
+      renderToHardwareTextureAndroid,
       returnKeyLabel,
       returnKeyType,
+      scrollEnabled,
       selectionColor,
       selectionState,
+      shouldRasterizeIOS,
       textBreakStrategy,
+      textContentType,
       underlineColorAndroid,
       /* eslint-enable */
       ...otherProps

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

@@ -696,9 +696,16 @@ const TouchableMixin = {
     const touch = TouchEventUtils.extractSingleTouch(e.nativeEvent);
     const pageX = touch && touch.pageX;
     const pageY = touch && touch.pageY;
-    const locationX = touch && touch.locationX;
+    this.pressInLocation = {
-    const locationY = touch && touch.locationY;
+      pageX,
-    this.pressInLocation = { pageX, pageY, locationX, locationY };
+      pageY,
+      get locationX() {
+        return touch && touch.locationX;
+      },
+      get locationY() {
+        return touch && touch.locationY;
+      }
+    };
   },
 
   _getDistanceBetweenPoints: function(aX: number, aY: number, bX: number, bY: number) {

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

@@ -2,8 +2,8 @@
 
 import UIManager from '..';
 
-const createStyledNode = (style = {}) => {
+const createStyledNode = (name = 'div', style = {}) => {
-  const root = document.createElement('div');
+  const root = document.createElement(name);
   Object.keys(style).forEach(prop => {
     root.style[prop] = style[prop];
   });
@@ -18,6 +18,29 @@ const componentStub = {
 };
 
 describe('apis/UIManager', () => {
+  describe('focus', () => {
+    test('sets tabIndex="-1" on elements not programmatically focusable by default', () => {
+      const node = createStyledNode();
+      UIManager.focus(node);
+      expect(node.getAttribute('tabIndex')).toEqual('-1');
+    });
+
+    test('doesn\'t set tabIndex="-1" on elements with an existing tabIndex', () => {
+      const node = createStyledNode();
+      node.tabIndex = 0;
+      UIManager.focus(node);
+      expect(node.getAttribute('tabIndex')).toEqual('0');
+    });
+
+    test('doesn\'t set tabIndex="-1" on elements focusable by default', () => {
+      ['a', 'input', 'select', 'textarea'].forEach(name => {
+        const node = createStyledNode(name);
+        UIManager.focus(node);
+        expect(node.getAttribute('tabIndex')).toBeNull();
+      });
+    });
+  });
+
   describe('updateView', () => {
     test('supports className alias for class', () => {
       const node = createStyledNode();
@@ -27,7 +50,7 @@ describe('apis/UIManager', () => {
     });
 
     test('adds correct DOM styles to existing style', () => {
-      const node = createStyledNode({ color: 'red' });
+      const node = createStyledNode('div', { color: 'red' });
       const props = { style: { marginTop: 0, marginBottom: 0, opacity: 0 } };
       UIManager.updateView(node, props, componentStub);
       expect(node.getAttribute('style')).toEqual(
@@ -36,7 +59,7 @@ describe('apis/UIManager', () => {
     });
 
     test('replaces input and textarea text', () => {
-      const node = createStyledNode();
+      const node = createStyledNode('textarea');
       node.value = 'initial';
       const textProp = { text: 'expected-text' };
       const valueProp = { value: 'expected-value' };

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

@@ -37,6 +37,13 @@ const measureLayout = (node, relativeToNativeNode, callback) => {
   }
 };
 
+const focusableElements = {
+  A: true,
+  INPUT: true,
+  SELECT: true,
+  TEXTAREA: true
+};
+
 const UIManager = {
   blur(node) {
     try {
@@ -46,6 +53,13 @@ const UIManager = {
 
   focus(node) {
     try {
+      const name = node.nodeName;
+      // A tabIndex of -1 allows element to be programmatically focused but
+      // prevents keyboard focus, so we don't want to set the value on elements
+      // that support keyboard focus by default.
+      if (node.getAttribute('tabIndex') == null && focusableElements[name] == null) {
+        node.setAttribute('tabIndex', '-1');
+      }
       node.focus();
     } catch (err) {}
   },

packages/react-native-web/src/exports/View/ViewPropTypes.js

@@ -38,6 +38,7 @@ export type ViewProps = {
   children?: any,
   hitSlop?: EdgeInsetsProp,
   importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants',
+  nativeID?: string,
   onBlur?: Function,
   onClick?: Function,
   onClickCapture?: Function,
@@ -87,6 +88,7 @@ const ViewPropTypes = {
   children: any,
   hitSlop: EdgeInsetsPropType,
   importantForAccessibility: oneOf(['auto', 'no', 'no-hide-descendants', 'yes']),
+  nativeID: string,
   onBlur: func,
   onClick: func,
   onClickCapture: func,

packages/react-native-web/src/exports/View/filterSupportedProps.js

@@ -8,6 +8,7 @@ const whitelist = {
   children: true,
   disabled: true,
   importantForAccessibility: true,
+  nativeID: true,
   onBlur: true,
   onContextMenu: true,
   onFocus: true,

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

@@ -9,14 +9,12 @@
 
 import AccessibilityUtil from '../../modules/AccessibilityUtil';
 import createDOMProps from '../../modules/createDOMProps';
+import { injectEventPluginsByName } from 'react-dom/unstable-native-dependencies';
 import normalizeNativeEvent from '../../modules/normalizeNativeEvent';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import ResponderEventPlugin from '../../modules/ResponderEventPlugin';
 
-const { EventPluginHub } = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+injectEventPluginsByName({
-
-EventPluginHub.injection.injectEventPluginsByName({
   ResponderEventPlugin
 });
 

packages/react-native-web/src/modules/ResponderEventPlugin/index.js

@@ -44,6 +44,9 @@ if (!ResponderEventPlugin.eventTypes.responderMove.dependencies) {
 }
 
 let lastActiveTouchTimestamp = null;
+// The length of time after a touch that we ignore the browser's emulated mouse events
+// https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events
+const EMULATED_MOUSE_THERSHOLD_MS = 1000;
 
 const originalExtractEvents = ResponderEventPlugin.extractEvents;
 ResponderEventPlugin.extractEvents = (topLevelType, targetInst, nativeEvent, nativeEventTarget) => {
@@ -55,7 +58,7 @@ ResponderEventPlugin.extractEvents = (topLevelType, targetInst, nativeEvent, nat
     lastActiveTouchTimestamp = Date.now();
   } else if (lastActiveTouchTimestamp && eventType.indexOf('mouse') > -1) {
     const now = Date.now();
-    shouldSkipMouseAfterTouch = now - lastActiveTouchTimestamp < 250;
+    shouldSkipMouseAfterTouch = now - lastActiveTouchTimestamp < EMULATED_MOUSE_THERSHOLD_MS;
   }
 
   if (

packages/react-native-web/src/modules/applyLayout/index.js

@@ -63,14 +63,15 @@ const observe = instance => {
 };
 
 const unobserve = instance => {
-  delete registry[instance._layoutId];
   if (resizeObserver) {
     const node = findNodeHandle(instance);
     if (node) {
+      delete registry[node._layoutId];
       delete node._layoutId;
       resizeObserver.unobserve(node);
     }
   } else {
+    delete registry[instance._layoutId];
     delete instance._layoutId;
   }
 };
@@ -97,7 +98,9 @@ const applyLayout = Component => {
     function componentDidMount() {
       this._layoutState = emptyObject;
       this._isMounted = true;
-      observe(this);
+      if (this.props.onLayout) {
+        observe(this);
+      }
     }
   );
 
@@ -116,7 +119,9 @@ const applyLayout = Component => {
     componentWillUnmount,
     function componentWillUnmount() {
       this._isMounted = false;
-      unobserve(this);
+      if (this.props.onLayout) {
+        unobserve(this);
+      }
     }
   );
 

packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js

@@ -183,6 +183,12 @@ describe('modules/createDOMProps', () => {
     expect(props['aria-hidden']).toEqual(true);
   });
 
+  test('prop "nativeID" becomes "id"', () => {
+    const nativeID = 'Example.nativeID';
+    const props = createProps({ nativeID });
+    expect(props.id).toEqual(nativeID);
+  });
+
   test('prop "testID" becomes "data-testid"', () => {
     const testID = 'Example.testID';
     const props = createProps({ testID });

packages/react-native-web/src/modules/createDOMProps/index.js

@@ -77,6 +77,7 @@ const createDOMProps = (component, props, styleResolver) => {
     accessibilityLabel,
     accessibilityLiveRegion,
     importantForAccessibility,
+    nativeID,
     placeholderTextColor,
     pointerEvents,
     style: providedStyle,
@@ -164,10 +165,15 @@ const createDOMProps = (component, props, styleResolver) => {
   }
 
   // OTHER
+  // Native element ID
+  if (nativeID && nativeID.constructor === String) {
+    domProps.id = nativeID;
+  }
   // Link security and automation test ids
   if (component === 'a' && domProps.target === '_blank') {
     domProps.rel = `${domProps.rel || ''} noopener noreferrer`;
   }
+  // Automated test IDs
   if (testID && testID.constructor === String) {
     domProps['data-testid'] = testID;
   }

packages/react-native-web/src/modules/normalizeNativeEvent/index.js

@@ -78,6 +78,7 @@ function normalizeTouchEvent(nativeEvent) {
     typeof nativeEvent.stopPropagation === 'function'
       ? nativeEvent.stopPropagation.bind(nativeEvent)
       : emptyFunction;
+  const singleChangedTouch = changedTouches[0];
 
   const event = {
     _normalized: true,
@@ -85,11 +86,15 @@ function normalizeTouchEvent(nativeEvent) {
     cancelable: nativeEvent.cancelable,
     changedTouches,
     defaultPrevented: nativeEvent.defaultPrevented,
-    identifier: undefined,
+    identifier: singleChangedTouch ? singleChangedTouch.identifier : undefined,
-    locationX: undefined,
+    get locationX() {
-    locationY: undefined,
+      return singleChangedTouch ? singleChangedTouch.locationX : undefined;
-    pageX: nativeEvent.pageX,
+    },
-    pageY: nativeEvent.pageY,
+    get locationY() {
+      return singleChangedTouch ? singleChangedTouch.locationY : undefined;
+    },
+    pageX: singleChangedTouch ? singleChangedTouch.pageX : nativeEvent.pageX,
+    pageY: singleChangedTouch ? singleChangedTouch.pageY : nativeEvent.pageY,
     preventDefault,
     stopImmediatePropagation,
     stopPropagation,
@@ -102,14 +107,6 @@ function normalizeTouchEvent(nativeEvent) {
     which: nativeEvent.which
   };
 
-  if (changedTouches[0]) {
-    event.identifier = changedTouches[0].identifier;
-    event.pageX = changedTouches[0].pageX;
-    event.pageY = changedTouches[0].pageY;
-    event.locationX = changedTouches[0].locationX;
-    event.locationY = changedTouches[0].locationY;
-  }
-
   return event;
 }
 
@@ -164,8 +161,12 @@ function normalizeMouseEvent(nativeEvent) {
     changedTouches: touches,
     defaultPrevented: nativeEvent.defaultPrevented,
     identifier: touches[0].identifier,
-    locationX: touches[0].locationX,
+    get locationX() {
-    locationY: touches[0].locationY,
+      return touches[0].locationX;
+    },
+    get locationY() {
+      return touches[0].locationY;
+    },
     pageX: nativeEvent.pageX,
     pageY: nativeEvent.pageY,
     preventDefault,

packages/react-native-web/src/vendor/react-native/LayoutAnimation/index.js

@@ -11,7 +11,7 @@
 import PropTypes from 'prop-types';
 import UIManager from '../../../exports/UIManager';
 
-const __DEV__ = process.env.NODE !== 'production';
+const __DEV__ = process.env.NODE_ENV !== 'production';
 const { checkPropTypes } = PropTypes;
 
 const Types = {

packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js

@@ -410,7 +410,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   }
 
   static defaultProps = {
-    disableVirtualization: false,
+    disableVirtualization: process.env.NODE_ENV === 'test',
     horizontal: false,
     initialNumToRender: 10,
     keyExtractor: (item: Item, index: number) => {
@@ -1562,6 +1562,7 @@ class CellRenderer extends React.Component<
       renderItem: renderItemType,
     },
     prevCellKey: ?string,
+    style: ?DangerouslyImpreciseStyleProp,
   },
   $FlowFixMeState,
 > {
@@ -1630,6 +1631,7 @@ class CellRenderer extends React.Component<
       index,
       inversionStyle,
       parentProps,
+      style,
     } = this.props;
     const {renderItem, getItemLayout} = parentProps;
     invariant(renderItem, 'no renderItem!');
@@ -1649,9 +1651,9 @@ class CellRenderer extends React.Component<
     );
     const cellStyle = inversionStyle
       ? horizontal
-        ? [{flexDirection: 'row-reverse'}, inversionStyle]
+        ? [styles.rowReverse, inversionStyle, style]
-        : [{flexDirection: 'column-reverse'}, inversionStyle]
+        : [styles.columnReverse, inversionStyle, style]
-      : horizontal ? [{flexDirection: 'row'}, inversionStyle] : inversionStyle;
+      : horizontal ? [styles.row, inversionStyle, style] : [inversionStyle, style];
     if (!CellRendererComponent) {
       return (
         <View style={cellStyle} onLayout={onLayout}>
@@ -1702,6 +1704,15 @@ const styles = StyleSheet.create({
   horizontallyInverted: {
     transform: [{scaleX: -1}],
   },
+  row: {
+    flexDirection: 'row'
+  },
+  rowReverse: {
+    flexDirection: 'row-reverse'
+  },
+  columnReverse: {
+    flexDirection: 'column-reverse'
+  }
 });
 
 export default VirtualizedList;

packages/website/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "website",
-  "version": "0.8.11",
+  "version": "0.9.7",
   "scripts": {
     "build": "build-storybook -o ./dist -c ./storybook/.storybook",
     "start": "start-storybook -p 9001 -c ./storybook/.storybook",
@@ -10,12 +10,12 @@
   "dependencies": {
     "@storybook/addon-options": "^3.4.3",
     "@storybook/react": "^3.4.3",
-    "react": "^16.4.1",
+    "react": "^16.5.1",
-    "react-dom": "^16.4.1",
+    "react-dom": "^16.5.1",
-    "react-native-web": "0.8.11"
+    "react-native-web": "0.9.7"
   },
   "devDependencies": {
-    "babel-plugin-react-native-web": "0.8.11",
+    "babel-plugin-react-native-web": "0.9.7",
     "url-loader": "^1.0.1",
     "webpack": "^4.8.1"
   }

packages/website/storybook/1-components/Text/TextScreen.js

@@ -116,6 +116,12 @@ const TextScreen = () => (
         ]}
       />
 
+      <DocItem
+        name="nativeID"
+        typeInfo="?string"
+        description="Used to locate this view from any native DOM code, or to define accessibility relationships. This is rendered to the native 'id' DOM attribute"
+      />
+
       <DocItem
         name="numberOfLines"
         typeInfo="?number"

packages/website/storybook/1-components/Touchable/examples/CustomStyleOverrides.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { processColor, StyleSheet, View, Text, TouchableHighlight } from 'react-native';
+import { StyleSheet, View, Text, TouchableHighlight } from 'react-native';
 
 export default class TouchableCustomStyleOverridesExample extends React.Component {
   buttons = ['One', 'Two', 'Three'];
@@ -26,7 +26,7 @@ export default class TouchableCustomStyleOverridesExample extends React.Componen
               key={button}
               onPress={this.select(button)}
               style={[styles.touchable, this.state[button] && styles.blue]}
-              underlayColor={processColor('#1B95E0', 0.125)}
+              underlayColor="#1b95e020"
             >
               <Text style={[!this.state[button] && styles.text]}>{button}</Text>
             </TouchableHighlight>
@@ -39,7 +39,7 @@ export default class TouchableCustomStyleOverridesExample extends React.Componen
 
 const styles = StyleSheet.create({
   blue: {
-    backgroundColor: processColor('#1B95E0', 0.25),
+    backgroundColor: '#1b95e040',
     borderColor: '#1B95E0'
   },
   text: {

packages/website/storybook/1-components/View/ViewScreen.js

@@ -119,6 +119,12 @@ const ViewScreen = () => (
         ]}
       />
 
+      <DocItem
+        name="nativeID"
+        typeInfo="?string"
+        description="Used to locate this view from any native DOM code, or to define accessibility relationships. This is rendered to the native 'id' DOM attribute"
+      />
+
       <DocItem name="onBlur" typeInfo="?function" />
       <DocItem name="onContextMenu" typeInfo="?function" />
       <DocItem name="onFocus" typeInfo="?function" />

packages/website/storybook/ui-explorer/AppText.js

@@ -14,12 +14,12 @@ class AppText extends React.PureComponent {
   };
 
   render() {
-    const { style, ...rest } = this.props;
+    const { accessibilityRole, style, ...rest } = this.props;
     const isInAParentText = this.context;
     return (
       <Text
         {...rest}
-        accessibilityRole={rest.href ? 'link' : undefined}
+        accessibilityRole={rest.href ? 'link' : accessibilityRole}
         style={[!isInAParentText && styles.baseText, style, rest.href && styles.link]}
       />
     );

packages/website/storybook/ui-explorer/Section.js

@@ -8,7 +8,11 @@ import AppText from './AppText';
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-const SectionTitle = ({ children }) => <AppText style={styles.sectionTitle}>{children}</AppText>;
+const SectionTitle = ({ children }) => (
+  <AppText accessibilityRole="heading" aria-level="2" style={styles.sectionTitle}>
+    {children}
+  </AppText>
+);
 
 const Section = ({ children, title }) => (
   <View>

packages/website/storybook/ui-explorer/UIExplorer.js

@@ -10,7 +10,11 @@ import insertBetween from './insertBetween';
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-const Title = ({ children }) => <AppText style={styles.title}>{children}</AppText>;
+const Title = ({ children }) => (
+  <AppText accessibilityRole="heading" style={styles.title}>
+    {children}
+  </AppText>
+);
 
 export const Description = ({ children }) => (
   <AppText style={styles.description}>

yarn.lock

@@ -3568,25 +3568,25 @@ envinfo@^5.7.0:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-5.10.0.tgz#503a9774ae15b93ea68bdfae2ccd6306624ea6df"
 
-enzyme-adapter-react-16@^1.1.0:
+enzyme-adapter-react-16@^1.5.0:
-  version "1.1.1"
+  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.1.1.tgz#a8f4278b47e082fbca14f5bfb1ee50ee650717b4"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.5.0.tgz#50af8d76a45fe0915de932bd95d34cdca75c0be3"
   dependencies:
-    enzyme-adapter-utils "^1.3.0"
+    enzyme-adapter-utils "^1.8.0"
-    lodash "^4.17.4"
+    function.prototype.name "^1.1.0"
-    object.assign "^4.0.4"
+    object.assign "^4.1.0"
     object.values "^1.0.4"
-    prop-types "^15.6.0"
+    prop-types "^15.6.2"
-    react-reconciler "^0.7.0"
+    react-is "^16.4.2"
     react-test-renderer "^16.0.0-0"
 
-enzyme-adapter-utils@^1.3.0:
+enzyme-adapter-utils@^1.8.0:
-  version "1.3.0"
+  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.3.0.tgz#d6c85756826c257a8544d362cc7a67e97ea698c7"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.8.0.tgz#ee9f07250663a985f1f2caaf297720787da559f1"
   dependencies:
-    lodash "^4.17.4"
+    function.prototype.name "^1.1.0"
-    object.assign "^4.0.4"
+    object.assign "^4.1.0"
-    prop-types "^15.6.0"
+    prop-types "^15.6.2"
 
 enzyme-to-json@^3.3.3:
   version "3.3.4"
@@ -3594,26 +3594,29 @@ enzyme-to-json@^3.3.3:
   dependencies:
     lodash "^4.17.4"
 
-enzyme@^3.3.0:
+enzyme@^3.6.0:
-  version "3.3.0"
+  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.3.0.tgz#0971abd167f2d4bf3f5bd508229e1c4b6dc50479"
+  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.6.0.tgz#d213f280a258f61e901bc663d4cc2d6fd9a9dec8"
   dependencies:
+    array.prototype.flat "^1.2.1"
     cheerio "^1.0.0-rc.2"
-    function.prototype.name "^1.0.3"
+    function.prototype.name "^1.1.0"
-    has "^1.0.1"
+    has "^1.0.3"
     is-boolean-object "^1.0.0"
-    is-callable "^1.1.3"
+    is-callable "^1.1.4"
     is-number-object "^1.0.3"
     is-string "^1.0.4"
     is-subset "^0.1.1"
-    lodash "^4.17.4"
+    lodash.escape "^4.0.1"
-    object-inspect "^1.5.0"
+    lodash.isequal "^4.5.0"
+    object-inspect "^1.6.0"
     object-is "^1.0.1"
     object.assign "^4.1.0"
     object.entries "^1.0.4"
     object.values "^1.0.4"
     raf "^3.4.0"
     rst-selector-parser "^2.2.3"
+    string.prototype.trim "^1.1.2"
 
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
@@ -3634,7 +3637,7 @@ error@^7.0.2:
     string-template "~0.2.1"
     xtend "~4.0.0"
 
-es-abstract@^1.10.0, es-abstract@^1.12.0, es-abstract@^1.4.3, es-abstract@^1.5.1, es-abstract@^1.6.1, es-abstract@^1.7.0, es-abstract@^1.9.0:
+es-abstract@^1.10.0, es-abstract@^1.12.0, es-abstract@^1.4.3, es-abstract@^1.5.0, es-abstract@^1.5.1, es-abstract@^1.6.1, es-abstract@^1.7.0, es-abstract@^1.9.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165"
   dependencies:
@@ -4414,7 +4417,7 @@ function-bind@^1.0.2, function-bind@^1.1.0, function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
 
-function.prototype.name@^1.0.3, function.prototype.name@^1.1.0:
+function.prototype.name@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.0.tgz#8bd763cc0af860a859cc5d49384d74b932cd2327"
   dependencies:
@@ -5231,7 +5234,7 @@ is-builtin-module@^1.0.0:
   dependencies:
     builtin-modules "^1.0.0"
 
-is-callable@^1.1.1, is-callable@^1.1.3:
+is-callable@^1.1.1, is-callable@^1.1.3, is-callable@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
 
@@ -6363,6 +6366,10 @@ lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
 
+lodash.escape@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
+
 lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
@@ -6375,6 +6382,10 @@ lodash.isarray@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+
 lodash.isplainobject@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
@@ -7111,7 +7122,7 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-inspect@^1.5.0:
+object-inspect@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.6.0.tgz#c70b6cbf72f274aab4c34c0c82f5167bf82cf15b"
 
@@ -7129,7 +7140,7 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
-object.assign@^4.0.4, object.assign@^4.1.0:
+object.assign@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
   dependencies:
@@ -8097,16 +8108,16 @@ react-addons-shallow-compare@^15.6.2:
     fbjs "^0.8.4"
     object-assign "^4.1.0"
 
-react-art@^16.4.1:
+react-art@^16.5.1:
-  version "16.4.1"
+  version "16.5.1"
-  resolved "https://registry.yarnpkg.com/react-art/-/react-art-16.4.1.tgz#3544c13038d7ddfe8b1cc1170b02d99492c03b50"
+  resolved "https://registry.yarnpkg.com/react-art/-/react-art-16.5.1.tgz#534a265dafc5c0e310da9ef9afbf76d6e221be56"
   dependencies:
     art "^0.10.1"
     create-react-class "^15.6.2"
-    fbjs "^0.8.16"
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.0"
+    prop-types "^15.6.2"
+    schedule "^0.4.0"
 
 react-deep-force-update@^1.0.0:
   version "1.1.1"
@@ -8147,14 +8158,14 @@ react-docgen@^3.0.0-beta11:
     node-dir "^0.1.10"
     recast "^0.12.6"
 
-react-dom@^16.4.1:
+react-dom@^16.5.1:
-  version "16.4.1"
+  version "16.5.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.1.tgz#7f8b0223b3a5fbe205116c56deb85de32685dad6"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.5.1.tgz#29d0c5a01ed3b6b4c14309aa91af6ec4eb4f292c"
   dependencies:
-    fbjs "^0.8.16"
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.0"
+    prop-types "^15.6.2"
+    schedule "^0.4.0"
 
 react-error-overlay@^4.0.0:
   version "4.0.0"
@@ -8204,6 +8215,10 @@ react-is@^16.3.1, react-is@^16.4.1:
   version "16.4.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"
 
+react-is@^16.4.2, react-is@^16.5.1:
+  version "16.5.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.1.tgz#c6e8734fd548a22e1cef4fd0833afbeb433b85ee"
+
 react-jss@^8.6.1:
   version "8.6.1"
   resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-8.6.1.tgz#a06e2e1d2c4d91b4d11befda865e6c07fbd75252"
@@ -8234,15 +8249,6 @@ react-proxy@^1.1.7:
     lodash "^4.6.1"
     react-deep-force-update "^1.0.0"
 
-react-reconciler@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.7.0.tgz#9614894103e5f138deeeb5eabaf3ee80eb1d026d"
-  dependencies:
-    fbjs "^0.8.16"
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.0"
-
 react-split-pane@^0.1.77:
   version "0.1.81"
   resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.81.tgz#b1e8b82e0a6edd10f18fd639a5f512db3cbbb4e6"
@@ -8258,7 +8264,7 @@ react-style-proptype@^3.0.0:
   dependencies:
     prop-types "^15.5.4"
 
-react-test-renderer@^16.0.0-0, react-test-renderer@^16.4.1:
+react-test-renderer@^16.0.0-0:
   version "16.4.1"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.1.tgz#f2fb30c2c7b517db6e5b10ed20bb6b0a7ccd8d70"
   dependencies:
@@ -8267,6 +8273,15 @@ react-test-renderer@^16.0.0-0, react-test-renderer@^16.4.1:
     prop-types "^15.6.0"
     react-is "^16.4.1"
 
+react-test-renderer@^16.5.1:
+  version "16.5.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.5.1.tgz#17f020fb0cf884cadebb5240d9d9c23452f18299"
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    react-is "^16.5.1"
+    schedule "^0.4.0"
+
 react-timer-mixin@^0.13.3:
   version "0.13.3"
   resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.3.tgz#0da8b9f807ec07dc3e854d082c737c65605b3d22"
@@ -8298,14 +8313,14 @@ react-treebeard@^2.1.0:
     shallowequal "^0.2.2"
     velocity-react "^1.3.1"
 
-react@^16.4.1:
+react@^16.5.1:
-  version "16.4.1"
+  version "16.5.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.5.1.tgz#8cb8e9f8cdcb4bde41c9a138bfbf907e66132372"
   dependencies:
-    fbjs "^0.8.16"
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.0"
+    prop-types "^15.6.2"
+    schedule "^0.4.0"
 
 reactxp@^1.3.0:
   version "1.3.0"
@@ -8836,6 +8851,12 @@ sax@^1.2.4, sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
+schedule@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/schedule/-/schedule-0.4.0.tgz#fa20cfd0bfbf91c47d02272fd7096780d3170bbb"
+  dependencies:
+    object-assign "^4.1.1"
+
 schema-utils@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
@@ -9299,6 +9320,14 @@ string.prototype.padstart@^3.0.0:
     es-abstract "^1.4.3"
     function-bind "^1.0.2"
 
+string.prototype.trim@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz#d04de2c89e137f4d7d206f086b5ed2fae6be8cea"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.5.0"
+    function-bind "^1.0.2"
+
 string_decoder@^1.0.0, string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"