chore(deps): bump react-transition-group from 2.3.1 to 4.4.2

package.json

@@ -264,11 +264,11 @@
     "classnames": "^2.2.3",
     "prop-types": "^15.5.8",
     "react-popper": "^2.2.4",
-    "react-transition-group": "^2.3.1"
+    "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.3.0"
+    "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.10",

src/Carousel.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import CarouselItem from './CarouselItem';
+import { CarouselContext } from './CarouselContext';
 import { mapToCssModules } from './utils';
 
 const SWIPE_THRESHOLD = 40;
@@ -24,7 +25,7 @@ class Carousel extends React.Component {
     };
   }
 
-  getChildContext() {
+  getContextValue() {
     return { direction: this.state.direction };
   }
 
@@ -188,7 +189,9 @@ class Carousel extends React.Component {
     if (slidesOnly) {
       return (
         <div className={outerClasses} onMouseEnter={this.hoverStart} onMouseLeave={this.hoverEnd}>
-          {this.renderItems(children, innerClasses)}
+          <CarouselContext.Provider value={this.getContextValue()}>
+            {this.renderItems(children, innerClasses)}
+          </CarouselContext.Provider>
         </div>
       );
     }
@@ -201,9 +204,11 @@ class Carousel extends React.Component {
 
       return (
         <div className={outerClasses} onMouseEnter={this.hoverStart} onMouseLeave={this.hoverEnd}>
-          {this.renderItems(carouselItems, innerClasses)}
-          {controlLeft}
-          {controlRight}
+          <CarouselContext.Provider value={this.getContextValue()}>
+            {this.renderItems(carouselItems, innerClasses)}
+            {controlLeft}
+            {controlRight}
+          </CarouselContext.Provider>
         </div>
       );
     }
@@ -223,10 +228,12 @@ class Carousel extends React.Component {
     return (
       <div className={outerClasses} onMouseEnter={this.hoverStart} onMouseLeave={this.hoverEnd}
         onTouchStart={this.handleTouchStart} onTouchEnd={this.handleTouchEnd}>
-        {wrappedIndicators}
-        {this.renderItems(carouselItems, innerClasses)}
-        {controlLeft}
-        {controlRight}
+        <CarouselContext.Provider value={this.getContextValue()}>
+          {wrappedIndicators}
+          {this.renderItems(carouselItems, innerClasses)}
+          {controlLeft}
+          {controlRight}
+        </CarouselContext.Provider>
       </div>
     );
   }

src/CarouselContext.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+/**
+ * CarouselContext
+ * {
+ *  direction: PropTypes.oneOf(['start', 'end']).isRequired,
+ * }
+ */
+export const CarouselContext = React.createContext({});