React 16 and Enzyme 3 migration

package.json

@@ -36,11 +36,9 @@
     "@types/dom4": "^1.5.20",
     "@types/enzyme": "^2.8.0",
     "@types/mocha": "^2.2.43",
-    "@types/pure-render-decorator": "^0.2.28",
-    "@types/react": "^16.0.14",
-    "@types/react-addons-css-transition-group": "^15.0.3",
-    "@types/react-addons-transition-group": "^15.0.1",
-    "@types/react-dom": "^16.0.1",
+    "@types/react": "^16.0.28",
+    "@types/react-transition-group": "^2.0.6",
+    "@types/react-dom": "^16.0.3",
     "@types/sinon": "^2.3.7",
     "@types/tether": "^1.4.3",
     "@types/webpack": "^3.8.0",

packages/core/package.json

@@ -35,14 +35,13 @@
     "classnames": "^2.2",
     "dom4": "^1.8",
     "normalize.css": "4.1.1",
-    "pure-render-decorator": "^1.1",
     "tether": "^1.4",
     "tslib": "^1.5.0"
   },
   "peerDependencies": {
-    "react": "^16.0.0 || ^15.0.1 || ^0.14",
-    "react-addons-css-transition-group": "^15.0.1 || ^0.14",
-    "react-dom": "^16.0.0 || ^15.0.1 || ^0.14"
+    "react": "^16.0.0",
+    "react-transition-group" :"^2.2.1",
+    "react-dom": "^16.0.0"
   },
   "devDependencies": {
     "@blueprintjs/karma-build-scripts": "^0.2.0",
@@ -53,10 +52,10 @@
     "mocha": "^4.0.1",
     "node-sass": "^4.7.2",
     "npm-run-all": "^4.1.1",
-    "react": "^15.6.1",
-    "react-addons-css-transition-group": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "react-test-renderer": "^15.6.1",
+    "react": "^16.2.0",
+    "react-transition-group": "^2.2.1",
+    "react-dom": "^16.2.0",
+    "react-test-renderer": "^16.2.0",
     "tslint": "^5.8.0",
     "typescript": "~2.4.2",
     "webpack": "^3.9.1"

packages/core/src/common/_react-transition.scss

@@ -2,12 +2,12 @@
 // Licensed under the terms of the LICENSE file distributed with this project.
 
 /*
-A mixin to generate the classes for a React CSSTransitionGroup which animates any number of CSS
+A mixin to generate the classes for a React CSSTransition which animates any number of CSS
 properties at once.
 
 Transitioned properties are specificed as a map of property names to lists of (inital value, final
 value). For enter & appear transitions, each property will transition from its initial to its final
-value. For leave transitions, each property will transition in reverse, from final to initial.
+value. For exit transitions, each property will transition in reverse, from final to initial.
 
 **Simple example:**
 `@include react-transition("pt-popover", (opacity: 0 1), $before: "&");`
@@ -39,17 +39,17 @@ $after: selector text to insert after transiton name (to select children)
     $before, $after
   );
   @include react-transition-phase(
-    $name, "leave", $properties,
+    $name, "exit", $properties,
     $duration, $easing, $delay,
     $before, $after
   );
 }
 
 /*
-A mixin to generate the classes for one phase of a React CSSTransitionGroup.
-`$phase` must be `appear` or `enter` or `leave`.
+A mixin to generate the classes for one phase of a React CSSTransition.
+`$phase` must be `appear` or `enter` or `exit`.
 If `enter` phase is given then `appear` phase will be generated at the same time.
-If `leave` phase is given then property values are animated in reverse, from final to initial.
+If `exit` phase is given then property values are animated in reverse, from final to initial.
 
 **Example:**
 @include react-transition-phase(pt-toast, enter, $enter-translate, $before: "&");
@@ -68,11 +68,11 @@ If `leave` phase is given then property values are animated in reverse, from fin
   $start-index: 1;
   $end-index: 2;
 
-  @if ($phase == "leave") {
+  @if ($phase == "exit") {
     $start-index: 2;
     $end-index: 1;
   } @else if ($phase != "enter" and $phase != "appear") {
-    @error "Unknown transition phase: #{$phase}. Expected appear|enter|leave.";
+    @error "Unknown transition phase: #{$phase}. Expected appear|enter|exit.";
   }
 
   #{transition-name($phase, $name, $before, $after)} {

packages/core/src/common/abstractComponent.ts

@@ -11,7 +11,7 @@ import { isNodeEnv } from "./utils";
  * An abstract component that Blueprint components can extend
  * in order to add some common functionality like runtime props validation.
  */
-export abstract class AbstractComponent<P, S> extends React.Component<P, S> {
+export abstract class AbstractComponent<P, S> extends React.PureComponent<P, S> {
     /** Component displayName should be `public static`. This property exists to prevent incorrect usage. */
     protected displayName: never;
 

packages/core/src/components/button/buttonGroup.tsx

@@ -5,7 +5,6 @@
  */
 
 import * as classNames from "classnames";
-import * as PureRender from "pure-render-decorator";
 import * as React from "react";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
@@ -38,8 +37,7 @@ export interface IButtonGroupProps extends IProps, React.HTMLProps<HTMLDivElemen
 
 // this component is simple enough that tests would be purely tautological.
 /* istanbul ignore next */
-@PureRender
-export class ButtonGroup extends React.Component<IButtonGroupProps, {}> {
+export class ButtonGroup extends React.PureComponent<IButtonGroupProps, {}> {
     public static displayName = "Blueprint.ButtonGroup";
 
     public render() {

packages/core/src/components/callout/callout.tsx

@@ -5,7 +5,6 @@
  */
 
 import * as classNames from "classnames";
-import * as PureRender from "pure-render-decorator";
 import * as React from "react";
 
 import { Classes, IIntentProps, IProps } from "../../common";
@@ -25,8 +24,7 @@ export interface ICalloutProps extends IIntentProps, IProps {
     title?: string;
 }
 
-@PureRender
-export class Callout extends React.Component<ICalloutProps & React.HTMLAttributes<HTMLDivElement>, {}> {
+export class Callout extends React.PureComponent<ICalloutProps & React.HTMLAttributes<HTMLDivElement>, {}> {
     public render() {
         const { className, children, iconName, intent, title, ...htmlProps } = this.props;
         const classes = classNames(

packages/core/src/components/card/card.tsx

@@ -5,7 +5,6 @@
  */
 
 import * as classNames from "classnames";
-import * as PureRender from "pure-render-decorator";
 import * as React from "react";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
@@ -54,8 +53,7 @@ const ELEVATION_CLASSES = [
     Classes.ELEVATION_4,
 ];
 
-@PureRender
-export class Card extends React.Component<ICardProps, {}> {
+export class Card extends React.PureComponent<ICardProps, {}> {
     public static displayName = "Blueprint.Card";
     public static defaultProps: ICardProps = {
         elevation: Elevation.ZERO,

packages/core/src/components/dialog/dialog.tsx

@@ -56,7 +56,7 @@ export interface IDialogProps extends IOverlayableProps, IBackdropProps, IProps
     title?: string | JSX.Element;
 
     /**
-     * Name of the transition for internal `CSSTransitionGroup`.
+     * Name of the transition for internal `CSSTransition`.
      * Providing your own name here will require defining new CSS transition properties.
      */
     transitionName?: string;

packages/core/src/components/editable-text/editableText.tsx

@@ -5,7 +5,6 @@
  */
 
 import * as classNames from "classnames";
-import * as PureRender from "pure-render-decorator";
 import * as React from "react";
 
 import { AbstractComponent } from "../../common/abstractComponent";
@@ -105,7 +104,6 @@ export interface IEditableTextState {
 const BUFFER_WIDTH_EDGE = 5;
 const BUFFER_WIDTH_IE = 30;
 
-@PureRender
 export class EditableText extends AbstractComponent<IEditableTextProps, IEditableTextState> {
     public static defaultProps: IEditableTextProps = {
         confirmOnEnterKey: false,

packages/core/src/components/forms/controlGroup.tsx

@@ -5,7 +5,6 @@
  */
 
 import * as classNames from "classnames";
-import * as PureRender from "pure-render-decorator";
 import * as React from "react";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
@@ -24,8 +23,7 @@ export interface IControlGroupProps extends React.AllHTMLAttributes<HTMLDivEleme
 
 // this component is simple enough that tests would be purely tautological.
 /* istanbul ignore next */
-@PureRender
-export class ControlGroup extends React.Component<IControlGroupProps, {}> {
+export class ControlGroup extends React.PureComponent<IControlGroupProps, {}> {
     public static displayName = "Blueprint.ControlGroup";
 
     public render() {

packages/core/src/components/forms/fileUpload.tsx

@@ -5,7 +5,6 @@
  */
 
 import * as classNames from "classnames";
-import * as PureRender from "pure-render-decorator";
 import * as React from "react";
 import { Utils } from "../../common";
 import * as Classes from "../../common/classes";
@@ -57,8 +56,7 @@ export interface IFileUploadProps extends React.AllHTMLAttributes<HTMLLabelEleme
 
 // TODO: write tests (ignoring for now to get a build passing quickly)
 /* istanbul ignore next */
-@PureRender
-export class FileUpload extends React.Component<IFileUploadProps, {}> {
+export class FileUpload extends React.PureComponent<IFileUploadProps, {}> {
     public static displayName = "Blueprint.FileUpload";
 
     public static defaultProps: IFileUploadProps = {

packages/core/src/components/forms/formGroup.tsx

@@ -5,7 +5,6 @@
  */
 
 import * as classNames from "classnames";
-import * as PureRender from "pure-render-decorator";
 import * as React from "react";
 import * as Classes from "../../common/classes";
 import { IIntentProps, IProps } from "../../common/props";
@@ -44,8 +43,7 @@ export interface IFormGroupProps extends IIntentProps, IProps {
     requiredLabel?: boolean | React.ReactNode;
 }
 
-@PureRender
-export class FormGroup extends React.Component<IFormGroupProps, {}> {
+export class FormGroup extends React.PureComponent<IFormGroupProps, {}> {
     /**
      * Element used to render `required` message when a boolean value is provided for that prop.
      * Modifying the value of this property will change the default globally in your app.

packages/core/src/components/forms/inputGroup.tsx

@@ -5,7 +5,6 @@
  */
 
 import * as classNames from "classnames";
-import * as PureRender from "pure-render-decorator";
 import * as React from "react";
 
 import * as Classes from "../../common/classes";
@@ -46,8 +45,7 @@ export interface IInputGroupState {
     rightElementWidth?: number;
 }
 
-@PureRender
-export class InputGroup extends React.Component<HTMLInputProps & IInputGroupProps, IInputGroupState> {
+export class InputGroup extends React.PureComponent<HTMLInputProps & IInputGroupProps, IInputGroupState> {
     public static displayName = "Blueprint.InputGroup";
 
     public state: IInputGroupState = {

packages/core/src/components/forms/label.tsx

@@ -5,7 +5,6 @@
  */
 
 import * as classNames from "classnames";
-import * as PureRender from "pure-render-decorator";
 import * as React from "react";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
@@ -26,8 +25,7 @@ export interface ILabelProps extends React.AllHTMLAttributes<HTMLDivElement>, IP
 
 // this component is simple enough that tests would be purely tautological.
 /* istanbul ignore next */
-@PureRender
-export class Label extends React.Component<ILabelProps, {}> {
+export class Label extends React.PureComponent<ILabelProps, {}> {
     public static displayName = "Blueprint.Label";
 
     public render() {

packages/core/src/components/forms/numericInput.tsx

@@ -5,7 +5,6 @@
  */
 
 import * as classNames from "classnames";
-import * as PureRender from "pure-render-decorator";
 import * as React from "react";
 
 import {
@@ -129,7 +128,6 @@ enum IncrementDirection {
     UP = +1,
 }
 
-@PureRender
 export class NumericInput extends AbstractComponent<HTMLInputProps & INumericInputProps, INumericInputState> {
     public static displayName = "Blueprint.NumericInput";
 

packages/core/src/components/forms/textArea.tsx

@@ -5,7 +5,6 @@
  */
 
 import * as classNames from "classnames";
-import * as PureRender from "pure-render-decorator";
 import * as React from "react";
 import * as Classes from "../../common/classes";
 import { IIntentProps, IProps } from "../../common/props";
@@ -24,8 +23,7 @@ export interface ITextAreaProps extends React.AllHTMLAttributes<HTMLTextAreaElem
 
 // this component is simple enough that tests would be purely tautological.
 /* istanbul ignore next */
-@PureRender
-export class TextArea extends React.Component<ITextAreaProps, {}> {
+export class TextArea extends React.PureComponent<ITextAreaProps, {}> {
     public static displayName = "Blueprint.TextArea";
 
     public render() {

packages/core/src/components/icon/icon.tsx

@@ -5,7 +5,6 @@
  */
 
 import * as classNames from "classnames";
-import * as PureRender from "pure-render-decorator";
 import * as React from "react";
 
 import { Classes, IIntentProps, IProps } from "../../common";
@@ -31,8 +30,7 @@ export interface IIconProps extends IIntentProps, IProps {
     iconSize?: 16 | 20 | "inherit";
 }
 
-@PureRender
-export class Icon extends React.Component<IIconProps & React.HTMLAttributes<HTMLSpanElement>, never> {
+export class Icon extends React.PureComponent<IIconProps & React.HTMLAttributes<HTMLSpanElement>, never> {
     public static displayName = "Blueprint.Icon";
 
     public static readonly SIZE_STANDARD = 16 as 16;

packages/core/src/components/navbar/navbar.tsx

@@ -5,7 +5,6 @@
  */
 
 import * as classNames from "classnames";
-import * as PureRender from "pure-render-decorator";
 import * as React from "react";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
@@ -23,8 +22,7 @@ export interface INavbarProps extends React.HTMLProps<HTMLDivElement>, IProps {
 
 // this component is simple enough that tests would be purely tautological.
 /* istanbul ignore next */
-@PureRender
-export class Navbar extends React.Component<INavbarProps, {}> {
+export class Navbar extends React.PureComponent<INavbarProps, {}> {
     public static displayName = "Blueprint.Navbar";
 
     public static Divider = NavbarDivider;

packages/core/src/components/navbar/navbarDivider.tsx

@@ -5,7 +5,6 @@
  */
 
 import * as classNames from "classnames";
-import * as PureRender from "pure-render-decorator";
 import * as React from "react";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
@@ -18,8 +17,7 @@ export interface INavbarDividerProps extends React.HTMLProps<HTMLDivElement>, IP
 
 // this component is simple enough that tests would be purely tautological.
 /* istanbul ignore next */
-@PureRender
-export class NavbarDivider extends React.Component<INavbarDividerProps, {}> {
+export class NavbarDivider extends React.PureComponent<INavbarDividerProps, {}> {
     public static displayName = "Blueprint.NavbarDivider";
 
     public render() {

packages/core/src/components/navbar/navbarGroup.tsx

@@ -5,7 +5,6 @@
  */
 
 import * as classNames from "classnames";
-import * as PureRender from "pure-render-decorator";
 import * as React from "react";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
@@ -20,8 +19,7 @@ export interface INavbarGroupProps extends React.HTMLProps<HTMLDivElement>, IPro
 
 // this component is simple enough that tests would be purely tautological.
 /* istanbul ignore next */
-@PureRender
-export class NavbarGroup extends React.Component<INavbarGroupProps, {}> {
+export class NavbarGroup extends React.PureComponent<INavbarGroupProps, {}> {
     public static displayName = "Blueprint.NavbarGroup";
 
     public static defaultProps: INavbarGroupProps = {