chore: upgrade react-transition-group

fork/react-bootstrap/package.json

@@ -63,9 +63,9 @@
     "keycode": "^2.2.1",
     "prop-types": "^15.8.1",
     "prop-types-extra": "^1.1.1",
-    "react-overlays": "^0.9.3",
+    "react-overlays": "^5.2.1",
     "react-prop-types": "^0.4.0",
-    "react-transition-group": "^2.9.0",
+    "react-transition-group": "^4.4.5",
     "uncontrollable": "^7.2.1",
     "warning": "^3.0.0"
   },

fork/react-bootstrap/src/DropdownMenu.js

@@ -3,13 +3,24 @@ import keycode from 'keycode';
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import RootCloseWrapper from 'react-overlays/lib/RootCloseWrapper';
+import useRootClose from 'react-overlays/cjs/useRootClose';
+
+function RootCloseWrapper(props) {
+  /**  ref: React.RefObject<Element> | Element | null | undefined,
+  onRootClose: (e: Event) => void,
+  { disabled, clickTrigger = 'click' }: RootCloseOptions = {}, */
+  useRootClose(props.myRef, props.onRootClose, {
+    disabled: props.disabled,
+    clickTrigger: props.clickTrigger,
+  });
+  return props.children;
+}
 
 import {
   bsClass,
   getClassSet,
   prefix,
-  splitBsPropsAndOmit
+  splitBsPropsAndOmit,
 } from './utils/bootstrapUtils';
 import createChainedFunction from './utils/createChainedFunction';
 import ValidComponentChildren from './utils/ValidComponentChildren';
@@ -20,12 +31,12 @@ const propTypes = {
   onClose: PropTypes.func,
   labelledBy: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   onSelect: PropTypes.func,
-  rootCloseEvent: PropTypes.oneOf(['click', 'mousedown'])
+  rootCloseEvent: PropTypes.oneOf(['click', 'mousedown']),
 };
 
 const defaultProps = {
   bsRole: 'menu',
-  pullRight: false
+  pullRight: false,
 };
 
 class DropdownMenu extends React.Component {
@@ -34,6 +45,7 @@ class DropdownMenu extends React.Component {
 
     this.handleRootClose = this.handleRootClose.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.myRef = React.createRef();
   }
 
   getFocusableMenuItems() {
@@ -110,28 +122,30 @@ class DropdownMenu extends React.Component {
 
     const classes = {
       ...getClassSet(bsProps),
-      [prefix(bsProps, 'right')]: pullRight
+      [prefix(bsProps, 'right')]: pullRight,
     };
 
     return (
       <RootCloseWrapper
         disabled={!open}
         onRootClose={this.handleRootClose}
         event={rootCloseEvent}
+        myRef={this.myRef}
       >
         <ul
           {...elementProps}
           role="menu"
+          ref={this.myRef}
           className={classNames(className, classes)}
           aria-labelledby={labelledBy}
         >
-          {ValidComponentChildren.map(children, child =>
+          {ValidComponentChildren.map(children, (child) =>
             React.cloneElement(child, {
               onKeyDown: createChainedFunction(
                 child.props.onKeyDown,
                 this.handleKeyDown
               ),
-              onSelect: createChainedFunction(child.props.onSelect, onSelect)
+              onSelect: createChainedFunction(child.props.onSelect, onSelect),
             })
           )}
         </ul>

fork/react-bootstrap/src/Modal.js

@@ -6,8 +6,8 @@ import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import BaseModal from 'react-overlays/lib/Modal';
-import isOverflowing from 'react-overlays/lib/utils/isOverflowing';
+import BaseModal from 'react-overlays/cjs/Modal';
+import isOverflowing from 'react-overlays/cjs/isOverflowing';
 import elementType from 'prop-types-extra/lib/elementType';
 
 import Fade from './Fade';
@@ -119,19 +119,19 @@ const propTypes = {
   /**
    * @private
    */
-  container: BaseModal.propTypes.container
+  container: BaseModal.propTypes.container,
 };
 
 const defaultProps = {
   ...BaseModal.defaultProps,
   animation: true,
-  dialogComponentClass: ModalDialog
+  dialogComponentClass: ModalDialog,
 };
 
 const childContextTypes = {
   $bs_modal: PropTypes.shape({
-    onHide: PropTypes.func
-  })
+    onHide: PropTypes.func,
+  }),
 };
 
 /* eslint-disable no-use-before-define, react/no-multi-comp */
@@ -156,15 +156,15 @@ class Modal extends React.Component {
     this.setModalRef = this.setModalRef.bind(this);
 
     this.state = {
-      style: {}
+      style: {},
     };
   }
 
   getChildContext() {
     return {
       $bs_modal: {
-        onHide: this.props.onHide
-      }
+        onHide: this.props.onHide,
+      },
     };
   }
 
@@ -225,16 +225,16 @@ class Modal extends React.Component {
         paddingLeft:
           !bodyIsOverflowing && modalIsOverflowing
             ? getScrollbarSize()
-            : undefined
-      }
+            : undefined,
+      },
     });
   }
 
   handleDialogBackdropMouseDown = () => {
     this._waitingForMouseUp = true;
   };
 
-  handleMouseUp = ev => {
+  handleMouseUp = (ev) => {
     const dialogNode = this._modal.getDialogElement();
     if (this._waitingForMouseUp && ev.target === dialogNode) {
       this._ignoreBackdropClick = true;

fork/react-bootstrap/src/Modal.test.js

@@ -2,7 +2,7 @@ import events from 'dom-helpers/events';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactTestUtils from 'react-dom/test-utils';
-import BaseModal from 'react-overlays/lib/Modal';
+import BaseModal from 'react-overlays/cjs/Modal';
 
 import Modal from '../src/Modal';
 

fork/react-bootstrap/src/Overlay.js

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React, { cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import BaseOverlay from 'react-overlays/lib/Overlay';
+import BaseOverlay from 'react-overlays/cjs/Overlay';
 import elementType from 'prop-types-extra/lib/elementType';
 
 import Fade from './Fade';
@@ -61,14 +61,14 @@ const propTypes = {
   /**
    * Sets the direction of the Overlay.
    */
-  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
+  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
 };
 
 const defaultProps = {
   animation: Fade,
   rootClose: false,
   show: false,
-  placement: 'right'
+  placement: 'right',
 };
 
 class Overlay extends React.Component {
@@ -81,7 +81,7 @@ class Overlay extends React.Component {
 
     if (!transition) {
       child = cloneElement(children, {
-        className: classNames(children.props.className, 'in')
+        className: classNames(children.props.className, 'in'),
       });
     } else {
       child = children;

fork/react-bootstrap/test/ModalSpec.js

@@ -2,7 +2,7 @@ import events from 'dom-helpers/events';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactTestUtils from 'react-dom/test-utils';
-import BaseModal from 'react-overlays/lib/Modal';
+import BaseModal from 'react-overlays/cjs/Modal';
 
 import Modal from '../src/Modal';
 
@@ -33,7 +33,7 @@ describe('<Modal>', () => {
     assert.ok(instance._modal.getDialogElement().querySelector('strong'));
   });
 
-  it('Should close the modal when the modal dialog is clicked', done => {
+  it('Should close the modal when the modal dialog is clicked', (done) => {
     const doneOp = () => {
       done();
     };
@@ -66,7 +66,7 @@ describe('<Modal>', () => {
     expect(onHideSpy).to.not.have.been.called;
   });
 
-  it('Should close the modal when the modal close button is clicked', done => {
+  it('Should close the modal when the modal close button is clicked', (done) => {
     const doneOp = () => {
       done();
     };
@@ -205,7 +205,7 @@ describe('<Modal>', () => {
     assert.equal(instance._modal.getDialogElement().className, 'custom-dialog');
   });
 
-  it('Should pass transition callbacks to Transition', done => {
+  it('Should pass transition callbacks to Transition', (done) => {
     let count = 0;
     const increment = () => {
       ++count;
@@ -252,7 +252,7 @@ describe('<Modal>', () => {
           super(props, context);
 
           this.state = {
-            show: true
+            show: true,
           };
         }
 

packages/components/package.json

@@ -43,6 +43,7 @@
     "classnames": "^2.3.2",
     "d3": "^7.8.5",
     "date-fns": "^1.30.1",
+    "dom-helpers": "^5.0.1",
     "focus-outline-manager": "^1.0.2",
     "immutable": "^3.8.2",
     "invariant": "^2.2.4",
@@ -58,7 +59,7 @@
     "react-immutable-proptypes": "^2.2.0",
     "react-is": "^17.0.0",
     "react-popper": "^2.3.0",
-    "react-transition-group": "^2.9.0",
+    "react-transition-group": "^4.4.5",
     "react-use": "^17.4.0",
     "react-virtualized": "^9.22.5",
     "reactour": "^1.19.1",

packages/design-system/package.json

@@ -41,7 +41,7 @@
     "modern-css-reset": "^1.4.0",
     "polished": "^4.2.2",
     "react-use": "^17.4.0",
-    "react-transition-group": "^2.2.9",
+    "react-transition-group": "^4.4.5",
     "typeface-inconsolata": "^1.1.13",
     "typeface-source-sans-pro": "^1.1.13"
   },
@@ -74,7 +74,7 @@
     "@types/react-is": "^18.2.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "@types/react-transition-group": "^2.9.2",
+    "@types/react-transition-group": "^4.4.8",
     "browser-sync": "^2.29.3",
     "browser-sync-webpack-plugin": "^2.3.0",
     "concurrently": "^7.6.0",

packages/stepper/package.json

@@ -55,7 +55,7 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^13.3.0",
     "react-redux": "^7.2.9",
-    "react-transition-group": "^2.9.0"
+    "react-transition-group": "^4.4.5"
   },
   "peerDependencies": {
     "i18next": "^23.5.1",
@@ -64,7 +64,7 @@
     "react-dom": ">= 16.14.0",
     "react-hook-form": ">=6.15.8",
     "react-i18next": "^13.3.0",
-    "react-transition-group": "^2.3.1"
+    "react-transition-group": "^4.4.5"
   },
   "publishConfig": {
     "access": "public"