fix: use new react-transition-group api

src/CarouselItem.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Transition } from 'react-transition-group';
-import { mapToCssModules, TransitionTimeouts, TransitionStatuses, tagPropType } from './utils';
+import { mapToCssModules, TransitionTimeouts, TransitionStatuses, tagPropType, mergeRefs } from './utils';
 
 class CarouselItem extends React.Component {
   constructor(props) {
@@ -19,37 +19,40 @@ class CarouselItem extends React.Component {
     this.onExited = this.onExited.bind(this);
   }
 
-  onEnter(node, isAppearing) {
+  onEnter(isAppearing) {
     this.setState({ startAnimation: false });
-    this.props.onEnter(node, isAppearing);
+    this.props.onEnter(this.nodeRef.current, isAppearing);
   }
 
-  onEntering(node, isAppearing) {
+  onEntering(isAppearing) {
     // getting this variable triggers a reflow
-    const offsetHeight = node.offsetHeight;
+    const offsetHeight = this.nodeRef.current.offsetHeight;
     this.setState({ startAnimation: true });
-    this.props.onEntering(node, isAppearing);
+    this.props.onEntering(this.nodeRef.current, isAppearing);
     return offsetHeight;
   }
 
-  onExit(node) {
+  onExit() {
     this.setState({ startAnimation: false });
-    this.props.onExit(node);
+    this.props.onExit(this.nodeRef.current);
   }
 
-  onExiting(node) {
+  onExiting() {
     this.setState({ startAnimation: true });
-    node.dispatchEvent(new CustomEvent('slide.bs.carousel'));
-    this.props.onExiting(node);
+    this.nodeRef.current.dispatchEvent(new CustomEvent('slide.bs.carousel'));
+    this.props.onExiting(this.nodeRef.current);
   }
 
-  onExited(node) {
-    node.dispatchEvent(new CustomEvent('slid.bs.carousel'));
-    this.props.onExited(node);
+  onExited() {
+    this.nodeRef.current.dispatchEvent(new CustomEvent('slid.bs.carousel'));
+    this.props.onExited(this.nodeRef.current);
   }
 
+  nodeRef = React.createRef()
+
   render() {
     const { in: isIn, children, cssModule, slide, tag: Tag, className, ...transitionProps } = this.props;
+    const mergedRefs = mergeRefs(this.nodeRef, this.props.nodeRef)
 
     return (
       <Transition
@@ -62,6 +65,7 @@ class CarouselItem extends React.Component {
         onExit={this.onExit}
         onExiting={this.onExiting}
         onExited={this.onExited}
+        nodeRef={this.nodeRef}
       >
         {(status) => {
           const { direction } = this.context;
@@ -80,7 +84,7 @@ class CarouselItem extends React.Component {
           ), cssModule);
 
           return (
-            <Tag className={itemClasses}>
+            <Tag className={itemClasses} ref={mergedRefs}>
               {children}
             </Tag>
           );

src/Collapse.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Transition } from 'react-transition-group';
-import { mapToCssModules, omit, pick, TransitionTimeouts, TransitionPropTypeKeys, TransitionStatuses, tagPropType } from './utils';
+import { mapToCssModules, omit, pick, TransitionTimeouts, TransitionPropTypeKeys, TransitionStatuses, tagPropType, mergeRefs } from './utils';
 
 const propTypes = {
   ...Transition.propTypes,
@@ -62,33 +62,35 @@ class Collapse extends Component {
     return this.props.horizontal ? node.scrollWidth : node.scrollHeight;
   }
 
-  onEntering(node, isAppearing) {
-    this.setState({ dimension: this.getDimension(node) });
-    this.props.onEntering(node, isAppearing);
+  onEntering(isAppearing) {
+    this.setState({ dimension: this.getDimension(this.nodeRef.current) });
+    this.props.onEntering(this.nodeRef.current, isAppearing);
   }
 
-  onEntered(node, isAppearing) {
+  onEntered(isAppearing) {
     this.setState({ dimension: null });
-    this.props.onEntered(node, isAppearing);
+    this.props.onEntered(this.nodeRef.current, isAppearing);
   }
 
-  onExit(node) {
-    this.setState({ dimension: this.getDimension(node) });
-    this.props.onExit(node);
+  onExit() {
+    this.setState({ dimension: this.getDimension(this.nodeRef.current) });
+    this.props.onExit(this.nodeRef.current);
   }
 
-  onExiting(node) {
+  onExiting() {
     // getting this variable triggers a reflow
-    const _unused = this.getDimension(node); // eslint-disable-line no-unused-vars
+    const _unused = this.getDimension(this.nodeRef.current); // eslint-disable-line no-unused-vars
     this.setState({ dimension: 0 });
-    this.props.onExiting(node);
+    this.props.onExiting(this.nodeRef.current);
   }
 
-  onExited(node) {
+  onExited() {
     this.setState({ dimension: null });
-    this.props.onExited(node);
+    this.props.onExited(this.nodeRef.current);
   }
 
+  nodeRef = React.createRef()
+
   render() {
     const {
       tag: Tag,
@@ -99,13 +101,16 @@ class Collapse extends Component {
       cssModule,
       children,
       innerRef,
+      nodeRef,
       ...otherProps
     } = this.props;
 
     const { dimension } = this.state;
 
     const transitionProps = pick(otherProps, TransitionPropTypeKeys);
     const childProps = omit(otherProps, TransitionPropTypeKeys);
+    const mergedRefs = mergeRefs(this.nodeRef, this.props.innerRef, this.props.nodeRef)
+
     return (
       <Transition
         {...transitionProps}
@@ -115,6 +120,7 @@ class Collapse extends Component {
         onExit={this.onExit}
         onExiting={this.onExiting}
         onExited={this.onExited}
+        nodeRef={this.nodeRef}
       >
         {(status) => {
           let collapseClass = getTransitionClass(status);
@@ -130,7 +136,7 @@ class Collapse extends Component {
               {...childProps}
               style={{ ...childProps.style, ...style }}
               className={classes}
-              ref={this.props.innerRef}
+              ref={mergedRefs}
             >
               {children}
             </Tag>

src/Fade.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Transition } from 'react-transition-group';
-import { mapToCssModules, omit, pick, TransitionPropTypeKeys, TransitionTimeouts, tagPropType } from './utils';
+import { mapToCssModules, omit, pick, TransitionPropTypeKeys, TransitionTimeouts, tagPropType, mergeRefs } from './utils';
 
 const propTypes = {
   ...Transition.propTypes,
@@ -43,14 +43,17 @@ function Fade(props) {
     cssModule,
     children,
     innerRef,
+    nodeRef: propsNodeRef,
     ...otherProps
   } = props;
 
   const transitionProps = pick(otherProps, TransitionPropTypeKeys);
   const childProps = omit(otherProps, TransitionPropTypeKeys);
+  const nodeRef = React.useRef()
+  const mergedRefs = React.useCallback(mergeRefs(nodeRef, innerRef, propsNodeRef), [nodeRef, innerRef, propsNodeRef]);
 
   return (
-    <Transition {...transitionProps}>
+    <Transition {...transitionProps} nodeRef={nodeRef}>
       {(status) => {
         const isActive = status === 'entered';
         const classes = mapToCssModules(classNames(
@@ -59,7 +62,7 @@ function Fade(props) {
           isActive && baseClassActive
         ), cssModule);
         return (
-          <Tag className={classes} {...childProps} ref={innerRef}>
+          <Tag className={classes} {...childProps} ref={mergedRefs}>
             {children}
           </Tag>
         );

src/__tests__/Carousel.spec.js

@@ -1,11 +1,17 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { Carousel } from '../';
+import { Carousel as CarouselComponent } from '../';
 import CarouselItem from '../CarouselItem';
 import CarouselIndicators from '../CarouselIndicators';
 import CarouselControl from '../CarouselControl';
 import CarouselCaption from '../CarouselCaption';
 
+class Carousel extends CarouselComponent {
+  render() {
+    return <React.StrictMode>{super.render()}</React.StrictMode>
+  }
+}
+
 describe('Carousel', () => {
   beforeEach(() => {
     jest.useFakeTimers();

src/__tests__/Collapse.spec.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { Collapse } from '../';
+import { Collapse as CollapseComponent } from '../';
+
+class Collapse extends CollapseComponent {
+  render() {
+    return <React.StrictMode>{super.render()}</React.StrictMode>
+  }
+}
 
 describe('Collapse', () => {
   let isOpen;

src/__tests__/Fade.spec.js

@@ -1,7 +1,15 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { TransitionGroup } from 'react-transition-group';
-import { Fade } from '../';
+import { Fade as FadeComponent } from '../';
+
+function Fade(props) {
+  return (
+    <React.StrictMode>
+      <FadeComponent {...props} />
+    </React.StrictMode>
+  )
+}
 
 class Helper extends React.Component {
   constructor(props) {

src/utils.js

@@ -113,16 +113,16 @@ export function deprecated(propType, explanation) {
 }
 
 // Shim Element if needed (e.g. in Node environment)
-const Element = (typeof window === 'object' && window.Element) || function() {};
+const Element = (typeof window === 'object' && window.Element) || function () { };
 
 export function DOMElement(props, propName, componentName) {
   if (!(props[propName] instanceof Element)) {
     return new Error(
       'Invalid prop `' +
-        propName +
-        '` supplied to `' +
-        componentName +
-        '`. Expected prop to be an instance of Element. Validation failed.'
+      propName +
+      '` supplied to `' +
+      componentName +
+      '`. Expected prop to be an instance of Element. Validation failed.'
     );
   }
 }
@@ -228,9 +228,9 @@ export function isReactRefObj(target) {
 
 function getTag(value) {
   if (value == null) {
-        return value === undefined ? '[object Undefined]' : '[object Null]'
-    }
-    return Object.prototype.toString.call(value)
+    return value === undefined ? '[object Undefined]' : '[object Null]'
+  }
+  return Object.prototype.toString.call(value)
 }
 
 export function toNumber(value) {
@@ -371,3 +371,13 @@ export const focusableElements = [
   'video[controls]',
   '[contenteditable]:not([contenteditable="false"])',
 ];
+
+export function mergeRefs(ref1, ref2, ref3) {
+  return (value) => [ref1, ref2, ref3].filter(Boolean).forEach(ref => {
+    if (typeof ref === 'function') {
+      ref(value)
+    } else if (ref != null) {
+      ref.current = value
+    }
+  })
+}