feat: update react-transition-group@2.5.0

BREAKING CHANGE: transitionLeaveTimeout -> transitionExitTimeout

package.json

@@ -70,7 +70,7 @@
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
     "react-gemini-scrollbar": "2.3.x",
-    "react-transition-group": "1.2.x",
+    "react-transition-group": "2.5.0",
     "semantic-release": "^15.13.3",
     "source-map-loader": "0.1.5",
     "stylelint": "7.10.1",
@@ -84,7 +84,7 @@
     "cnvs": "1.1.14",
     "react": ">= 16.8.0",
     "react-dom": ">= 16.8.0",
-    "react-transition-group": "1.2.x",
+    "react-transition-group": ">= 2.5.0",
     "react-gemini-scrollbar": "^2.1.5 || ^2.3.0"
   },
   "scripts": {

src/Dropdown/Dropdown.js

@@ -2,7 +2,7 @@ import classNames from "classnames";
 import GeminiScrollbar from "react-gemini-scrollbar";
 import React from "react";
 import PropTypes from "prop-types";
-import { CSSTransitionGroup } from "react-transition-group";
+import { CSSTransition } from "react-transition-group";
 import ReactDOM from "react-dom";
 
 import BindMixin from "../Mixin/BindMixin";
@@ -383,6 +383,7 @@ class Dropdown extends Util.mixin(BindMixin) {
 
       dropdownMenu = (
         <span
+          key="dropdown-menu-key"
           className={dropdownMenuClassSet}
           role="menu"
           ref={this.setDropdownMenuRef}
@@ -405,13 +406,15 @@ class Dropdown extends Util.mixin(BindMixin) {
 
     if (props.transition) {
       dropdownMenu = (
-        <CSSTransitionGroup
-          transitionName={transitionName}
-          transitionEnterTimeout={props.transitionEnterTimeout}
-          transitionLeaveTimeout={props.transitionLeaveTimeout}
+        <CSSTransition
+          classNames={transitionName}
+          timeout={{
+            enter: props.transitionEnterTimeout,
+            exit: props.transitionExitTimeout
+          }}
         >
           {dropdownMenu}
-        </CSSTransitionGroup>
+        </CSSTransition>
       );
     }
 
@@ -442,7 +445,7 @@ Dropdown.defaultProps = {
   transition: false,
   transitionName: "dropdown-menu",
   transitionEnterTimeout: 250,
-  transitionLeaveTimeout: 250,
+  transitionExitTimeout: 250,
   onItemSelection: () => {},
   useGemini: true,
   trigger: <DropdownListTrigger />,
@@ -491,7 +494,7 @@ Dropdown.propTypes = {
   transitionName: PropTypes.string,
   // Transition lengths
   transitionEnterTimeout: PropTypes.number,
-  transitionLeaveTimeout: PropTypes.number,
+  transitionExitTimeout: PropTypes.number,
   trigger: PropTypes.element,
   // Option to use Gemini scrollbar. Defaults to true.
   useGemini: PropTypes.bool,

src/Dropdown/styles.less

@@ -9,7 +9,7 @@
   }
 }
 
-@keyframes dropdown-down-leave {
+@keyframes dropdown-down-exit {
 
   0% {
     transform: translateY(0);
@@ -31,7 +31,7 @@
   }
 }
 
-@keyframes dropdown-up-leave {
+@keyframes dropdown-up-exit {
 
   0% {
     transform: translateY(0);
@@ -153,17 +153,17 @@
   animation: dropdown-fade-in 250ms both, dropdown-down-enter 250ms both;
 }
 
-.dropdown-menu-down-leave {
-  animation: dropdown-fade-out 250ms both, dropdown-down-leave 250ms both;
+.dropdown-menu-down-exit {
+  animation: dropdown-fade-out 250ms both, dropdown-down-exit 250ms both;
   z-index: 3;
 }
 
 .dropdown-menu-up-enter {
   animation: dropdown-fade-in 250ms both, dropdown-up-enter 250ms both;
 }
 
-.dropdown-menu-up-leave {
-  animation: dropdown-fade-out 250ms both, dropdown-up-leave 250ms both;
+.dropdown-menu-up-exit {
+  animation: dropdown-fade-out 250ms both, dropdown-up-exit 250ms both;
   z-index: 3;
 }
 

src/List/List.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { CSSTransitionGroup } from "react-transition-group";
+import { CSSTransition } from "react-transition-group";
 
 import ListItem from "./ListItem";
 import Util from "../Util/Util";
@@ -16,7 +16,7 @@ class List extends React.Component {
         "content",
         "transitionName",
         "transitionEnterTimeout",
-        "transitionLeaveTimeout"
+        "transitionExitTimeout"
       ]);
 
       if (Util.isArrayLike(item.content)) {
@@ -26,9 +26,11 @@ class List extends React.Component {
             key={key}
             tag={item.tag}
             transition={true}
-            transitionName={props.transitionName}
-            transitionEnterTimeout={props.transitionEnterTimeout}
-            transitionLeaveTimeout={props.transitionLeaveTimeout}
+            timeout={{
+              enter: props.transitionEnterTimeout,
+              exit: props.transitionExitTimeout
+            }}
+            classNames={props.transitionName}
           >
             {this.getListItems(item.content, childIndex)}
           </ListItem>
@@ -54,16 +56,16 @@ class List extends React.Component {
 
     if (props.transition) {
       return (
-        <CSSTransitionGroup
-          {...htmlAttributes}
+        <CSSTransition
           className={props.className}
-          component={Tag}
-          transitionName={props.transitionName}
-          transitionEnterTimeout={props.transitionEnterTimeout}
-          transitionLeaveTimeout={props.transitionLeaveTimeout}
+          classNames={props.transitionName}
+          timeout={{
+            exit: props.transitionExitTimeout,
+            enter: props.transitionEnterTimeout
+          }}
         >
-          {this.getListItems(props.content)}
-        </CSSTransitionGroup>
+          <Tag>{this.getListItems(props.content)}</Tag>
+        </CSSTransition>
       );
     }
 
@@ -81,7 +83,7 @@ List.defaultProps = {
   transition: true,
   transitionName: "list-item",
   transitionEnterTimeout: 500,
-  transitionLeaveTimeout: 500
+  transitionExitTimeout: 500
 };
 
 List.propTypes = {
@@ -109,7 +111,7 @@ List.propTypes = {
   transitionName: PropTypes.string,
   // Transition lengths
   transitionEnterTimeout: PropTypes.number,
-  transitionLeaveTimeout: PropTypes.number
+  transitionExitTimeout: PropTypes.number
 };
 
 module.exports = List;

src/List/ListItem.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { CSSTransitionGroup } from "react-transition-group";
+import { CSSTransition } from "react-transition-group";
 
 import Util from "../Util/Util";
 
@@ -14,13 +14,9 @@ class ListItem extends React.Component {
 
     if (props.transition) {
       return (
-        <CSSTransitionGroup
-          {...htmlAttributes}
-          className={props.className}
-          component={props.tag}
-        >
-          {props.children}
-        </CSSTransitionGroup>
+        <CSSTransition {...htmlAttributes} className={props.className}>
+          <Tag>{props.children}</Tag>
+        </CSSTransition>
       );
     }
 

src/List/styles.less

@@ -28,6 +28,6 @@
   animation: list-fade-in-left 500ms;
 }
 
-.list-item-leave {
+.list-item-exit {
   animation: list-fade-out-right 500ms;
 }

src/Modal/ModalContents.js

@@ -6,11 +6,11 @@ import React from "react";
 import PropTypes from "prop-types";
 /**
  * Lifecycle of a Modal:
- * initial page load -> empty ReactCSSTransitionGroup
+ * initial page load -> empty TransitionGroup
  * interaction changes open to true -> render modal content without scrollbars
  * get height of content -> rerender modal content and cap the height
  */
-import { CSSTransitionGroup } from "react-transition-group";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
 
 import BindMixin from "../Mixin/BindMixin";
 import DOMUtil from "../Util/DOMUtil";
@@ -380,18 +380,19 @@ class ModalContents extends Util.mixin(BindMixin) {
     }
 
     return (
-      <CSSTransitionGroup
-        transitionAppear={props.transitionAppear}
-        transitionEnter={props.transitionEnter}
-        transitionLeave={props.transitionLeave}
-        transitionName={props.transitionNameModal}
-        transitionAppearTimeout={props.transitionAppearTimeoutModal}
-        transitionEnterTimeout={props.transitionEnterTimeoutModal}
-        transitionLeaveTimeout={props.transitionLeaveTimeoutModal}
-        component="div"
+      <CSSTransition
+        appear={props.transitionAppear}
+        enter={props.transitionEnter}
+        exit={props.transitionExit}
+        classNames={props.transitionNameModal}
+        timeout={{
+          enter: props.transitionEnterTimeout,
+          exit: props.transitionExitTimeout,
+          appear: props.transitionAppearTimeoutModal
+        }}
       >
-        {modalContent}
-      </CSSTransitionGroup>
+        <div>{modalContent}</div>
+      </CSSTransition>
     );
   }
 }
@@ -409,10 +410,10 @@ ModalContents.defaultProps = {
   transitionNameModal: "modal",
   transitionAppearTimeoutModal: 300,
   transitionEnterTimeoutModal: 300,
-  transitionLeaveTimeoutModal: 300,
+  transitionExitTimeoutModal: 300,
   transitionAppear: true,
   transitionEnter: true,
-  transitionLeave: true,
+  transitionExit: true,
   useGemini: true,
 
   // Default classes.
@@ -455,11 +456,11 @@ ModalContents.propTypes = {
   // Transition lengths, must be non-zero
   transitionAppearTimeoutModal: PropTypes.number,
   transitionEnterTimeoutModal: PropTypes.number,
-  transitionLeaveTimeoutModal: PropTypes.number,
+  transitionExitTimeoutModal: PropTypes.number,
   // Optionally disable transitions
   transitionAppear: PropTypes.bool,
   transitionEnter: PropTypes.bool,
-  transitionLeave: PropTypes.bool,
+  transitionExit: PropTypes.bool,
   // Option to use Gemini scrollbar. Defaults to true.
   useGemini: PropTypes.bool,
 

src/Modal/styles.less

@@ -69,7 +69,7 @@
     }
   }
 
-  .modal-leave {
+  .modal-exit {
 
     .modal {
       opacity: 1;
@@ -80,7 +80,7 @@
       opacity: 1;
     }
 
-    &.modal-leave-active {
+    &.modal-exit-active {
 
       .modal {
         opacity: 0;

src/Table/styles.less

@@ -66,6 +66,6 @@
   animation: table-fade-in-left 0.5s;
 }
 
-.table-row-leave {
+.table-row-exit {
   animation: table-fade-out-right 0.5s;
 }