Silence console warnings 🔇🙉

docs/components/DropdownButtonView.jsx

@@ -29,7 +29,7 @@ export default class DropdownButtonView extends Component {
     this.byeTimerID = null;
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.moreSamples();
   }
 

docs/components/Table2BetaView.jsx

@@ -75,7 +75,7 @@ export default class Table2BetaView extends React.PureComponent {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this._reload(5000);
   }
 

docs/components/TableView.jsx

@@ -23,7 +23,7 @@ export default class TableView extends PureComponent {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this._reload(5000);
   }
 

docs/components/View.jsx

@@ -7,7 +7,7 @@ import { Button, polyfillMediaQueries } from "src";
 import "./View.less";
 
 export default class View extends Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     document.title = `${View.WINDOW_TITLE_PREFIX}${this.props.title}`;
 
     polyfillMediaQueries();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clever-components",
-  "version": "2.69.4",
+  "version": "2.69.5",
   "description": "A library of helpful React components and less styles",
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
     "prop-types": "^15.5.10",
     "react-accessible-accordion": "^1.0.2",
     "react-autosize-textarea": "^7.0.0",
-    "react-bootstrap": "0.32.1",
+    "react-bootstrap": "^0.33.1",
     "react-copy-to-clipboard": "^4.3.1",
     "react-datepicker": "~1.6.0",
     "react-datetime": "^2.14.0",
@@ -48,7 +48,7 @@
     "react-responsive": "^8.0.3",
     "react-select": "~1.2.1",
     "react-sticky": "^6.0.1",
-    "react-transition-group": "~1.2.0",
+    "react-transition-group": "^2.9.0",
     "short-number": "^1.0.6",
     "tether": "^1.4.0"
   },
@@ -59,6 +59,7 @@
     "@types/react": "^16.9.49",
     "@types/react-datepicker": "^1.8.0",
     "@types/react-linkify": "^1.0.0",
+    "@types/react-transition-group": "^2.9.2",
     "@typescript-eslint/eslint-plugin": "^1.9.0",
     "@typescript-eslint/parser": "^1.9.0",
     "autoprefixer": "^6.5.3",

src/LeftNav/LeftNav.less

@@ -89,11 +89,11 @@
   }
 }
 
-.LeftNav--subnav--content--anim-leave {
+.LeftNav--subnav--content--anim-exit {
   .animateOpacity;
   opacity: 1;
 
-  &.LeftNav--subnav--content--anim-leave-active {
+  &.LeftNav--subnav--content--anim-exit-active {
     opacity: 0;
   }
 }

src/LeftNav/LeftNav.tsx

@@ -2,7 +2,7 @@ import * as PropTypes from "prop-types";
 import * as React from "react";
 import * as _ from "lodash";
 import * as classnames from "classnames";
-import { CSSTransitionGroup } from "react-transition-group";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
 import * as RootCloseWrapper from "react-overlays/lib/RootCloseWrapper";
 
 import MorePropTypes from "../utils/MorePropTypes";
@@ -146,15 +146,18 @@ export class LeftNav extends React.PureComponent<Props, State> {
           <div className={classnames(cssClass.TOPNAV, _collapsed && cssClass.TOPNAV_COLLAPSED)}>
             {navItems}
           </div>
-          <CSSTransitionGroup
+          <TransitionGroup
             className={classnames(cssClass.SUBNAV, openChild && cssClass.SUBNAV_OPEN)}
-            transitionEnterTimeout={WIDTH_TRANSITION_DURATION_MS}
-            transitionLeaveTimeout={WIDTH_TRANSITION_DURATION_MS}
-            component="div"
-            transitionName={cssClass.SUBNAV_CONTENT_ANIM}
           >
-            {openChild && <div className={cssClass.SUBNAV_CONTENT}>{openChild.props.children}</div>}
-          </CSSTransitionGroup>
+            {openChild && (
+              <CSSTransition
+                classNames={cssClass.SUBNAV_CONTENT_ANIM}
+                timeout={WIDTH_TRANSITION_DURATION_MS}
+              >
+                <div className={cssClass.SUBNAV_CONTENT}>{openChild.props.children}</div>
+              </CSSTransition>
+            )}
+          </TransitionGroup>
         </nav>
       </RootCloseWrapper>
     );

src/Menu/MenuItem.tsx

@@ -60,8 +60,10 @@ export default class MenuItem extends React.PureComponent<Props> {
     this._updateFocus(this.props);
   }
 
-  componentWillReceiveProps(nextProps) {
-    this._updateFocus(nextProps);
+  componentDidUpdate(prevProps: Props) {
+    if (this.props.focused !== prevProps.focused) {
+      this._updateFocus(this.props);
+    }
   }
 
   render() {
@@ -120,7 +122,7 @@ export default class MenuItem extends React.PureComponent<Props> {
     );
   }
 
-  _updateFocus(props) {
+  _updateFocus(props: Props) {
     if (props.focused) {
       if (this._containerEl && this._containerEl.focus) {
         setTimeout(() => this._containerEl.focus());

src/ToastStack/ToastStack.less

@@ -10,7 +10,7 @@
 .ToastStack--notificationWrapper {
   .margin--bottom--xs;
   .margin--x--xs;
-  // We need to set an explicit initial value for the leave animation to work properly. No
+  // We need to set an explicit initial value for the exit animation to work properly. No
   // notifications should actually hit this limit.
   max-height: 10rem;
 }
@@ -28,7 +28,7 @@
   transition: all @timingPromptly ease-out;
 }
 
-.ToastStack--animation-leave.ToastStack--animation-leave-active {
+.ToastStack--animation-exit.ToastStack--animation-exit-active {
   opacity: 0;
   transform: translateY(-100%);
   margin-bottom: 0;

src/ToastStack/ToastStack.tsx

@@ -1,7 +1,7 @@
 import * as classnames from "classnames";
 import * as React from "react";
 import * as _ from "lodash";
-import { CSSTransitionGroup } from "react-transition-group";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
 import { ToastNotification } from "./ToastNotification";
 
 import { ActionProps } from "./ToastNotification";
@@ -79,29 +79,26 @@ export class ToastStack extends React.PureComponent<Props> {
     const { className, clearNotification, notificationClassName, notifications } = this.props;
 
     const toasts = notifications.map((n) => (
-      <div className={cssClass.NOTIFICATION_WRAPPER} key={n.id}>
-        <ToastNotification
-          action={n.action}
-          className={notificationClassName}
-          onClose={() => clearNotification(n.id)}
-          showCloseButton={n.showCloseButton}
-          type={n.type}
-          closeButtonAriaLabel={n.closeButtonAriaLabel}
-        >
-          {n.content}
-        </ToastNotification>
-      </div>
+      <CSSTransition classNames={cssClass.ANIMATION} key={n.id} timeout={{ enter: 200, exit: 400 }}>
+        <div className={cssClass.NOTIFICATION_WRAPPER}>
+          <ToastNotification
+            action={n.action}
+            className={notificationClassName}
+            onClose={() => clearNotification(n.id)}
+            showCloseButton={n.showCloseButton}
+            type={n.type}
+            closeButtonAriaLabel={n.closeButtonAriaLabel}
+          >
+            {n.content}
+          </ToastNotification>
+        </div>
+      </CSSTransition>
     ));
 
     return (
-      <CSSTransitionGroup
-        className={classnames(cssClass.CONTAINER, className)}
-        transitionName={cssClass.ANIMATION}
-        transitionEnterTimeout={200}
-        transitionLeaveTimeout={400}
-      >
+      <TransitionGroup className={classnames(cssClass.CONTAINER, className)}>
         {toasts}
-      </CSSTransitionGroup>
+      </TransitionGroup>
     );
   }
 }

webpack.config.js

@@ -57,4 +57,5 @@ module.exports = {
     // to <laptop-ip>:<port> from the device.
     // disableHostCheck: true
   },
+  devtool: "eval-cheap-source-map",
 };