react-responsive-modal 6.4.1 → 7.0.0

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "react-responsive-modal",
-  "version": "6.4.1",
+  "version": "7.0.0",
   "description": "A simple responsive and accessible react modal",
   "license": "MIT",
-  "main": "dist/index.js",
-  "module": "dist/react-responsive-modal.esm.js",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "typings": "dist/index.d.ts",
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build",
+    "start": "tsdown --watch",
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest",
+    "prepare": "tsdown",
     "size": "size-limit"
   },
   "files": [
@@ -19,17 +20,6 @@
     "src",
     "styles.css"
   ],
-  "jest": {
-    "setupFilesAfterEnv": [
-      "./__tests__/setupTests.ts"
-    ],
-    "modulePathIgnorePatterns": [
-      "cypress"
-    ],
-    "coveragePathIgnorePatterns": [
-      "src/lib"
-    ]
-  },
   "keywords": [
     "react",
     "responsive",
@@ -37,7 +27,11 @@
     "mobile",
     "flex"
   ],
-  "repository": "git+https://github.com/pradel/react-responsive-modal.git",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pradel/react-responsive-modal.git",
+    "directory": "react-responsive-modal"
+  },
   "author": "Léo Pradel",
   "bugs": {
     "url": "https://github.com/pradel/react-responsive-modal/issues"
@@ -46,41 +40,54 @@
   "funding": "https://github.com/sponsors/pradel",
   "size-limit": [
     {
-      "path": "dist/react-responsive-modal.cjs.production.min.js",
-      "limit": "4.1 KB"
+      "path": "dist/index.js",
+      "limit": "3.6 KB"
     },
     {
-      "path": "dist/react-responsive-modal.esm.js",
-      "limit": "4.1 KB"
+      "path": "dist/index.cjs",
+      "limit": "4.0 KB"
     }
   ],
   "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": "^16.8.0 || ^17 || ^18 || ^19"
   },
   "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",
-    "babel-jest": "26.6.3",
-    "cypress": "5.6.0",
-    "husky": "4.3.0",
-    "prettier": "2.1.2",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "size-limit": "4.7.0",
-    "tsdx": "0.14.1",
-    "tslib": "2.0.3",
-    "typescript": "4.0.5"
+    "@codecov/vite-plugin": "1.9.1",
+    "@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": "2.6.2",
+    "@types/classnames": "2.3.4",
+    "@types/node": "22.16.3",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
+    "@vitejs/plugin-react": "4.6.0",
+    "@vitest/coverage-istanbul": "3.2.4",
+    "cypress": "14.5.1",
+    "jsdom": "26.1.0",
+    "publint": "0.3.12",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "size-limit": "11.2.0",
+    "tsdown": "0.12.9",
+    "tslib": "2.8.1",
+    "typescript": "5.8.3",
+    "vitest": "3.2.4"
+  },
+  "types": "./dist/index.d.cts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json",
+    "./styles.css": "./styles.css"
   }
 }

package/src/FocusTrap.tsx

@@ -8,11 +8,11 @@ import {
 
 interface FocusTrapProps {
   container?: React.RefObject<HTMLElement> | null;
-  initialFocusRef?: React.RefObject<HTMLElement>;
+  initialFocusRef?: React.RefObject<HTMLElement | null>;
 }
 
 export const FocusTrap = ({ container, initialFocusRef }: FocusTrapProps) => {
-  const refLastFocus = useRef<HTMLElement | null>();
+  const refLastFocus = useRef<HTMLElement | null>(null);
   /**
    * Handle focus lock on the modal
    */
@@ -33,7 +33,7 @@ export const FocusTrap = ({ container, initialFocusRef }: FocusTrapProps) => {
         // only if it's a focusable element
         if (
           candidateSelectors.findIndex((selector) =>
-            document.activeElement?.matches(selector)
+            document.activeElement?.matches(selector),
           ) !== -1
         ) {
           refLastFocus.current = document.activeElement as HTMLElement;

package/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',
@@ -75,7 +75,7 @@ export interface ModalProps {
    *
    * Default to undefined.
    */
-  initialFocusRef?: React.RefObject<HTMLElement>;
+  initialFocusRef?: React.RefObject<HTMLElement | null>;
   /**
    * You can specify a container prop which should be of type `Element`.
    * The portal will be rendered inside that element.
@@ -152,7 +152,7 @@ export interface ModalProps {
    * Callback fired when the overlay is clicked.
    */
   onOverlayClick?: (
-    event: React.MouseEvent<HTMLDivElement, MouseEvent>
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
   ) => void;
   /**
    * Callback fired when the Modal has exited and the animation is finished.
@@ -190,7 +190,7 @@ export const Modal = React.forwardRef(
       children,
       reserveScrollBarGap,
     }: ModalProps,
-    ref: React.ForwardedRef<HTMLDivElement>
+    ref: React.ForwardedRef<HTMLDivElement>,
   ) => {
     const refDialog = useForwardedRef(ref);
     const refModal = useRef<HTMLDivElement>(null);
@@ -267,7 +267,7 @@ export const Modal = React.forwardRef(
     }, [open]);
 
     const handleClickOverlay = (
-      event: React.MouseEvent<HTMLDivElement, MouseEvent>
+      event: React.MouseEvent<HTMLDivElement, MouseEvent>,
     ) => {
       if (refShouldClose.current === null) {
         refShouldClose.current = true;
@@ -302,15 +302,15 @@ export const Modal = React.forwardRef(
     const containerModal = container || refContainer.current;
 
     const overlayAnimation = open
-      ? classNames?.overlayAnimationIn ?? classes.overlayAnimationIn
-      : classNames?.overlayAnimationOut ?? classes.overlayAnimationOut;
+      ? (classNames?.overlayAnimationIn ?? classes.overlayAnimationIn)
+      : (classNames?.overlayAnimationOut ?? classes.overlayAnimationOut);
 
     const modalAnimation = open
-      ? classNames?.modalAnimationIn ?? classes.modalAnimationIn
-      : classNames?.modalAnimationOut ?? classes.modalAnimationOut;
+      ? (classNames?.modalAnimationIn ?? classes.modalAnimationIn)
+      : (classNames?.modalAnimationOut ?? classes.modalAnimationOut);
 
     return showPortal && containerModal
-      ? ReactDom.createPortal(
+      ? createPortal(
           <div
             className={cx(classes.root, classNames?.root)}
             style={styles?.root}
@@ -331,7 +331,7 @@ export const Modal = React.forwardRef(
               className={cx(
                 classes.modalContainer,
                 center && classes.modalContainerCenter,
-                classNames?.modalContainer
+                classNames?.modalContainer,
               )}
               style={styles?.modalContainer}
               data-testid="modal-container"
@@ -376,10 +376,10 @@ export const Modal = React.forwardRef(
               </div>
             </div>
           </div>,
-          containerModal
+          containerModal,
         )
       : null;
-  }
+  },
 );
 
 export default Modal;

package/src/lib/focusTrapJs.ts

@@ -34,7 +34,7 @@ function isNotRadioOrTabbableRadio(node: any) {
   }
   var radioScope = node.form || node.ownerDocument;
   var radioSet = radioScope.querySelectorAll(
-    'input[type="radio"][name="' + node.name + '"]'
+    'input[type="radio"][name="' + node.name + '"]',
   );
   var checked = getCheckedRadio(radioSet, node.form);
   return checked === node || (checked === undefined && radioSet[0] === node);

package/src/useScrollLock.ts

@@ -2,11 +2,11 @@ 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,
-  reserveScrollBarGap?: boolean
+  reserveScrollBarGap?: boolean,
 ) => {
   const oldRef = useRef<Element | null>(null);
 

package/styles.css

@@ -58,6 +58,13 @@
   display: flex;
 }
 
+/* Used to fix a screen glitch issues with the animation see https://github.com/pradel/react-responsive-modal/issues/495 */
+.react-responsive-modal-overlay,
+.react-responsive-modal-container,
+.react-responsive-modal-modal {
+  animation-fill-mode: forwards !important;
+}
+
 @keyframes react-responsive-modal-overlay-in {
   0% {
     opacity: 0;

package/dist/CloseIcon.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-interface CloseIconProps {
-    id?: string;
-    closeIcon?: React.ReactNode;
-    styles?: {
-        closeButton?: React.CSSProperties;
-        closeIcon?: React.CSSProperties;
-    };
-    classNames?: {
-        closeButton?: string;
-        closeIcon?: string;
-    };
-    classes: {
-        closeButton?: string;
-    };
-    onClick: () => void;
-}
-declare const CloseIcon: ({ classes, classNames, styles, id, closeIcon, onClick, }: CloseIconProps) => JSX.Element;
-export default CloseIcon;

package/dist/FocusTrap.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-interface FocusTrapProps {
-    container?: React.RefObject<HTMLElement> | null;
-    initialFocusRef?: React.RefObject<HTMLElement>;
-}
-export declare const FocusTrap: ({ container, initialFocusRef }: FocusTrapProps) => null;
-export {};

package/dist/lib/focusTrapJs.d.ts

@@ -1,3 +0,0 @@
-export declare const candidateSelectors: string[];
-export declare function getAllTabbingElements(parentElem: any): any[];
-export declare function tabTrappingKey(event: any, parentElem: any): boolean | undefined;

package/dist/modalManager.d.ts

@@ -1,20 +0,0 @@
-import { Ref } from 'react';
-/**
- * Handle the order of the modals.
- * Inspired by the material-ui implementation.
- */
-export declare const modalManager: {
-    /**
-     * Register a new modal
-     */
-    add: (newModal: Ref<Element>) => void;
-    /**
-     * Remove a modal
-     */
-    remove: (oldModal: Ref<Element>) => void;
-    /**
-     * When multiple modals are rendered will return true if current modal is the last one
-     */
-    isTopModal: (modal: Ref<Element>) => boolean;
-};
-export declare function useModalManager(ref: Ref<Element>, open: boolean): void;