MM-69835 Update to support React 19

.gitattributes

@@ -1,4 +1,4 @@
 amd/* linguist-generated=true
-es/* linguist-generated=true
+es/**/* linguist-generated=true
 dist/* linguist-generated=true
-lib/* linguist-generated=true
+lib/**/* linguist-generated=true

karma.conf.js

@@ -68,7 +68,7 @@ module.exports = config => {
       }
     },
 
-    browsers: env.BROWSER ? env.BROWSER.split(',') : ['Chrome'],
+    browsers: env.BROWSER ? env.BROWSER.split(',') : ['ChromeHeadless'],
 
     singleRun: env.CONTINUOUS_INTEGRATION === 'true'
   });

package.json

@@ -67,7 +67,6 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
-    "@cfaester/enzyme-adapter-react-18": "^0.8.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -82,7 +81,6 @@
     "colors": "^1.2.1",
     "create-react-class": "^15.6.3",
     "cross-env": "^5.2.0",
-    "enzyme": "^3.1.0",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-config-prettier": "^2.9.0",
@@ -110,9 +108,9 @@
     "mocha": "^5.2.0",
     "patch-package": "^8.0.0",
     "prettier": "^1.12.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-test-renderer": "^18.3.1",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "react-test-renderer": "19.2.7",
     "release-script": "^1.0.2",
     "sinon": "^2.3.2",
     "sinon-chai": "^2.8.0",
@@ -126,9 +124,9 @@
     "keycode": "^2.2.0",
     "prop-types": "^15.6.1",
     "prop-types-extra": "^1.0.1",
-    "react-overlays": "^0.9.3",
+    "react-overlays": "^5.2.0",
     "react-prop-types": "^0.4.0",
-    "react-transition-group": "^2.0.0",
+    "react-transition-group": "^4.4.0",
     "uncontrollable": "^5.0.0",
     "warning": "^3.0.0"
   },

patches/react-overlays+5.2.1.patch

@@ -0,0 +1,52 @@
+diff --git a/node_modules/react-overlays/cjs/Modal.js b/node_modules/react-overlays/cjs/Modal.js
+index 2247ad0..71c9f4a 100644
+--- a/node_modules/react-overlays/cjs/Modal.js
++++ b/node_modules/react-overlays/cjs/Modal.js
+@@ -215,7 +215,7 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+     }
+   });
+   var handleDocumentKeyDown = (0, _useEventCallback["default"])(function (e) {
+-    if (keyboard && e.keyCode === 27 && modal.isTopModal()) {
++    if (keyboard && (e.keyCode === 27 || e.key === 'Escape') && modal.isTopModal()) {
+       onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(e);
+
+       if (!e.defaultPrevented) {
+diff --git a/node_modules/react-overlays/cjs/useRootClose.js b/node_modules/react-overlays/cjs/useRootClose.js
+index 3fc40a7..cc16674 100644
+--- a/node_modules/react-overlays/cjs/useRootClose.js
++++ b/node_modules/react-overlays/cjs/useRootClose.js
+@@ -66,7 +66,7 @@ function useRootClose(ref, onRootClose, _temp) {
+     }
+   });
+   var handleKeyUp = (0, _useEventCallback["default"])(function (e) {
+-    if (e.keyCode === escapeKeyCode) {
++    if (e.keyCode === escapeKeyCode || e.key === 'Escape') {
+       onClose(e);
+     }
+   });
+diff --git a/node_modules/react-overlays/esm/Modal.js b/node_modules/react-overlays/esm/Modal.js
+index 42f79e4..a12ebac 100644
+--- a/node_modules/react-overlays/esm/Modal.js
++++ b/node_modules/react-overlays/esm/Modal.js
+@@ -193,7 +193,7 @@ var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
+     }
+   });
+   var handleDocumentKeyDown = useEventCallback(function (e) {
+-    if (keyboard && e.keyCode === 27 && modal.isTopModal()) {
++    if (keyboard && (e.keyCode === 27 || e.key === 'Escape') && modal.isTopModal()) {
+       onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(e);
+
+       if (!e.defaultPrevented) {
+diff --git a/node_modules/react-overlays/esm/useRootClose.js b/node_modules/react-overlays/esm/useRootClose.js
+index 8c7882c..30d0d56 100644
+--- a/node_modules/react-overlays/esm/useRootClose.js
++++ b/node_modules/react-overlays/esm/useRootClose.js
+@@ -53,7 +53,7 @@ function useRootClose(ref, onRootClose, _temp) {
+     }
+   });
+   var handleKeyUp = useEventCallback(function (e) {
+-    if (e.keyCode === escapeKeyCode) {
++    if (e.keyCode === escapeKeyCode || e.key === 'Escape') {
+       onClose(e);
+     }
+   });

src/ButtonGroup.js

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import all from 'prop-types-extra/lib/all';
+import warning from 'warning';
 
 import Button from './Button';
 import {
@@ -19,13 +19,7 @@ const propTypes = {
    * Display block buttons; only useful when used with the "vertical" prop.
    * @type {bool}
    */
-  block: all(
-    PropTypes.bool,
-    ({ block, vertical }) =>
-      block && !vertical
-        ? new Error('`block` requires `vertical` to be set to have any effect')
-        : null
-  )
+  block: PropTypes.bool
 };
 
 const defaultProps = {
@@ -39,6 +33,11 @@ class ButtonGroup extends React.Component {
     const { block, justified, vertical, className, ...props } = this.props;
     const [bsProps, elementProps] = splitBsProps(props);
 
+    warning(
+      !(block && !vertical),
+      '`block` requires `vertical` to be set to have any effect'
+    );
+
     const classes = {
       ...getClassSet(bsProps),
       [prefix(bsProps)]: !vertical,

src/CarouselItem.js

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
 import transition from 'dom-helpers/transition';
 
 const propTypes = {
@@ -29,6 +28,7 @@ class CarouselItem extends React.Component {
       direction: null
     };
 
+    this.containerRef = React.createRef();
     this.isUnmounted = false;
   }
 
@@ -43,7 +43,7 @@ class CarouselItem extends React.Component {
     const prevActive = prevProps.active;
 
     if (!active && prevActive) {
-      transition.end(ReactDOM.findDOMNode(this), this.handleAnimateOutEnd);
+      transition.end(this.containerRef.current, this.handleAnimateOutEnd);
     }
 
     if (active !== prevActive) {
@@ -99,7 +99,13 @@ class CarouselItem extends React.Component {
       classes[this.state.direction] = true;
     }
 
-    return <div {...props} className={classNames(className, classes)} />;
+    return (
+      <div
+        ref={this.containerRef}
+        {...props}
+        className={classNames(className, classes)}
+      />
+    );
   }
 }
 

src/Collapse.js

@@ -11,6 +11,7 @@ import Transition, {
 
 import capitalize from './utils/capitalize';
 import createChainedFunction from './utils/createChainedFunction';
+import { getElementRef, makeMergedRef } from './utils/mergeRefs';
 
 const MARGINS = {
   height: ['marginTop', 'marginBottom'],
@@ -134,6 +135,12 @@ const defaultProps = {
 };
 
 class Collapse extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.childRef = React.createRef();
+  }
+
   getDimension() {
     return typeof this.props.dimension === 'function'
       ? this.props.dimension()
@@ -146,31 +153,34 @@ class Collapse extends React.Component {
   }
 
   /* -- Expanding -- */
-  handleEnter = elem => {
-    elem.style[this.getDimension()] = '0';
+  handleEnter = () => {
+    this.childRef.current.style[this.getDimension()] = '0';
   };
 
-  handleEntering = elem => {
+  handleEntering = () => {
     const dimension = this.getDimension();
-    elem.style[dimension] = this._getScrollDimensionValue(elem, dimension);
+    this.childRef.current.style[dimension] = this._getScrollDimensionValue(
+      this.childRef.current,
+      dimension
+    );
   };
 
-  handleEntered = elem => {
-    elem.style[this.getDimension()] = null;
+  handleEntered = () => {
+    this.childRef.current.style[this.getDimension()] = null;
   };
 
   /* -- Collapsing -- */
-  handleExit = elem => {
+  handleExit = () => {
     const dimension = this.getDimension();
-    elem.style[dimension] = `${this.props.getDimensionValue(
+    this.childRef.current.style[dimension] = `${this.props.getDimensionValue(
       dimension,
-      elem
+      this.childRef.current
     )}px`;
-    triggerBrowserReflow(elem);
+    triggerBrowserReflow(this.childRef.current);
   };
 
-  handleExiting = elem => {
-    elem.style[this.getDimension()] = '0';
+  handleExiting = () => {
+    this.childRef.current.style[this.getDimension()] = '0';
   };
 
   render() {
@@ -197,10 +207,13 @@ class Collapse extends React.Component {
     const handleExit = createChainedFunction(this.handleExit, onExit);
     const handleExiting = createChainedFunction(this.handleExiting, onExiting);
 
+    const ref = makeMergedRef([this.childRef, getElementRef(children)]);
+
     return (
       <Transition
         {...props}
         aria-expanded={props.role ? props.in : null}
+        nodeRef={this.childRef}
         onEnter={handleEnter}
         onEntering={handleEntering}
         onEntered={handleEntered}
@@ -210,6 +223,7 @@ class Collapse extends React.Component {
         {(state, innerProps) =>
           React.cloneElement(children, {
             ...innerProps,
+            ref,
             className: classNames(
               className,
               children.props.className,

src/ControlLabel.js

@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import warning from 'warning';
 
+import FormGroupContext from './FormGroupContext';
 import { bsClass, getClassSet, splitBsProps } from './utils/bootstrapUtils';
 
 const propTypes = {
@@ -17,13 +18,9 @@ const defaultProps = {
   srOnly: false
 };
 
-const contextTypes = {
-  $bs_formGroup: PropTypes.object
-};
-
 class ControlLabel extends React.Component {
   render() {
-    const formGroup = this.context.$bs_formGroup;
+    const formGroup = this.context;
     const controlId = formGroup && formGroup.controlId;
 
     const { htmlFor = controlId, srOnly, className, ...props } = this.props;
@@ -51,6 +48,6 @@ class ControlLabel extends React.Component {
 
 ControlLabel.propTypes = propTypes;
 ControlLabel.defaultProps = defaultProps;
-ControlLabel.contextTypes = contextTypes;
+ControlLabel.contextType = FormGroupContext;
 
 export default bsClass('control-label', ControlLabel);