pradel · longpoll · May 29, 2025 · May 29, 2025 · May 29, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 # Changelog
 
+## [6.4.3](https://github.com/pradel/react-responsive-modal/compare/v6.4.2...v6.4.3) (2025-05-29)
 ## [6.4.2](https://github.com/pradel/react-responsive-modal/compare/v6.4.1...v6.4.2) (2023-06-19)
 
 

diff --git a/package.json b/package.json
@@ -23,6 +23,6 @@
     "lint-staged": "10.5.1",
     "prettier": "2.1.2"
   },
-  "version": "6.4.2",
+  "version": "6.4.3",
   "packageManager": "[email protected]"
 }
diff --git a/react-responsive-modal/__tests__/index.test.tsx b/react-responsive-modal/__tests__/index.test.tsx
@@ -1,5 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 import { fireEvent, render, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { Modal } from '../src';
 
 describe('modal', () => {

diff --git a/react-responsive-modal/package.json b/react-responsive-modal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-modal",
-  "version": "6.4.1",
+  "version": "6.4.3",
   "description": "A simple responsive and accessible react modal",
   "license": "MIT",
   "main": "dist/index.js",
@@ -55,32 +55,33 @@
     }
   ],
   "dependencies": {
-    "@bedrock-layout/use-forwarded-ref": "^1.3.1",
+    "@bedrock-layout/use-forwarded-ref": "^2.0.17",
     "body-scroll-lock": "^3.1.5",
     "classnames": "^2.3.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17 || ^18",
-    "react-dom": "^16.8.0 || ^17 || ^18"
+    "react": "^16.8.0 || ^17 || ^18 || ^19",
+    "react-dom": "*"
   },
   "devDependencies": {
-    "@size-limit/preset-small-lib": "4.7.0",
-    "@testing-library/jest-dom": "5.11.6",
-    "@testing-library/react": "11.1.2",
-    "@types/body-scroll-lock": "2.6.1",
-    "@types/classnames": "2.2.11",
-    "@types/node": "14.14.7",
-    "@types/react": "16.9.56",
-    "@types/react-dom": "16.9.9",
+    "@size-limit/preset-small-lib": "11.2.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.3.0",
+    "@types/body-scroll-lock": "3.1.2",
+    "@types/classnames": "2.3.4",
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "babel-jest": "26.6.3",
     "cypress": "5.6.0",
-    "husky": "4.3.0",
+    "husky": "9.1.7",
     "prettier": "2.1.2",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "size-limit": "4.7.0",
+    "react": "^19",
+    "react-dom": "^19",
+    "size-limit": "11.2.0",
     "tsdx": "0.14.1",
-    "tslib": "2.0.3",
-    "typescript": "4.0.5"
+    "tslib": "2.8.1",
+    "typescript": "5.8.3"
   }
 }
diff --git a/react-responsive-modal/src/CloseIcon.tsx b/react-responsive-modal/src/CloseIcon.tsx
@@ -18,14 +18,14 @@ interface CloseIconProps {
   onClick: () => void;
 }
 
-const CloseIcon = ({
+const CloseIcon: React.FC<CloseIconProps> = ({
   classes,
   classNames,
   styles,
   id,
   closeIcon,
   onClick,
-}: CloseIconProps) => (
+}) => (
   <button
     id={id}
     className={cx(classes.closeButton, classNames?.closeButton)}

diff --git a/react-responsive-modal/src/FocusTrap.tsx b/react-responsive-modal/src/FocusTrap.tsx
@@ -12,7 +12,7 @@ interface FocusTrapProps {
 }
 
 export const FocusTrap = ({ container, initialFocusRef }: FocusTrapProps) => {
-  const refLastFocus = useRef<HTMLElement | null>();
+  const refLastFocus = useRef<HTMLElement | null>(null);
   /**
    * Handle focus lock on the modal
    */

diff --git a/react-responsive-modal/src/index.tsx b/react-responsive-modal/src/index.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import ReactDom from 'react-dom';
+import { createPortal } from 'react-dom';
 import cx from 'classnames';
+import { useForwardedRef } from '@bedrock-layout/use-forwarded-ref';
 import CloseIcon from './CloseIcon';
 import { FocusTrap } from './FocusTrap';
 import { modalManager, useModalManager } from './modalManager';
 import { useScrollLock } from './useScrollLock';
 import { isBrowser } from './utils';
-import useForwardedRef from '@bedrock-layout/use-forwarded-ref';
 
 const classes = {
   root: 'react-responsive-modal-root',
@@ -310,74 +310,74 @@ export const Modal = React.forwardRef(
       : classNames?.modalAnimationOut ?? classes.modalAnimationOut;
 
     return showPortal && containerModal
-      ? ReactDom.createPortal(
+      ? createPortal(
+        <div
+          className={cx(classes.root, classNames?.root)}
+          style={styles?.root}
+          data-testid="root"
+        >
           <div
-            className={cx(classes.root, classNames?.root)}
-            style={styles?.root}
-            data-testid="root"
+            className={cx(classes.overlay, classNames?.overlay)}
+            data-testid="overlay"
+            aria-hidden={true}
+            style={{
+              animation: `${overlayAnimation} ${animationDuration}ms`,
+              ...styles?.overlay,
+            }}
+          />
+          <div
+            ref={refModal}
+            id={containerId}
+            className={cx(
+              classes.modalContainer,
+              center && classes.modalContainerCenter,
+              classNames?.modalContainer
+            )}
+            style={styles?.modalContainer}
+            data-testid="modal-container"
+            onClick={handleClickOverlay}
           >
             <div
-              className={cx(classes.overlay, classNames?.overlay)}
-              data-testid="overlay"
-              aria-hidden={true}
+              ref={refDialog}
+              className={cx(classes.modal, classNames?.modal)}
               style={{
-                animation: `${overlayAnimation} ${animationDuration}ms`,
-                ...styles?.overlay,
+                animation: `${modalAnimation} ${animationDuration}ms`,
+                ...styles?.modal,
               }}
-            />
-            <div
-              ref={refModal}
-              id={containerId}
-              className={cx(
-                classes.modalContainer,
-                center && classes.modalContainerCenter,
-                classNames?.modalContainer
-              )}
-              style={styles?.modalContainer}
-              data-testid="modal-container"
-              onClick={handleClickOverlay}
+              onMouseDown={handleModalEvent}
+              onMouseUp={handleModalEvent}
+              onClick={handleModalEvent}
+              onAnimationEnd={handleAnimationEnd}
+              id={modalId}
+              role={role}
+              aria-modal="true"
+              aria-labelledby={ariaLabelledby}
+              aria-describedby={ariaDescribedby}
+              data-testid="modal"
+              tabIndex={-1}
             >
-              <div
-                ref={refDialog}
-                className={cx(classes.modal, classNames?.modal)}
-                style={{
-                  animation: `${modalAnimation} ${animationDuration}ms`,
-                  ...styles?.modal,
-                }}
-                onMouseDown={handleModalEvent}
-                onMouseUp={handleModalEvent}
-                onClick={handleModalEvent}
-                onAnimationEnd={handleAnimationEnd}
-                id={modalId}
-                role={role}
-                aria-modal="true"
-                aria-labelledby={ariaLabelledby}
-                aria-describedby={ariaDescribedby}
-                data-testid="modal"
-                tabIndex={-1}
-              >
-                {focusTrapped && (
-                  <FocusTrap
-                    container={refDialog}
-                    initialFocusRef={initialFocusRef}
-                  />
-                )}
-                {children}
-                {showCloseIcon && (
-                  <CloseIcon
-                    classes={classes}
-                    classNames={classNames}
-                    styles={styles}
-                    closeIcon={closeIcon}
-                    onClick={onClose}
-                    id={closeIconId}
-                  />
-                )}
-              </div>
+              {focusTrapped && (
+                <FocusTrap
+                  container={refDialog}
+                  initialFocusRef={initialFocusRef}
+                />
+              )}
+              {children}
+              {showCloseIcon && (
+                <CloseIcon
+                  classes={classes}
+                  classNames={classNames}
+                  styles={styles}
+                  closeIcon={closeIcon}
+                  onClick={onClose}
+                  id={closeIconId}
+                />
+              )}
             </div>
-          </div>,
-          containerModal
-        )
+          </div>
+        </div>,
+        containerModal
+      )
       : null;
   }
 );

diff --git a/react-responsive-modal/src/useScrollLock.ts b/react-responsive-modal/src/useScrollLock.ts
@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 
 export const useScrollLock = (
-  refModal: React.RefObject<Element>,
+  refModal: React.RefObject<Element | null>,
   open: boolean,
   showPortal: boolean,
   blockScroll: boolean,