react-responsive-modal 5.2.6 → 6.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-modal",
-  "version": "5.2.6",
+  "version": "6.2.0",
   "description": "A simple responsive and accessible react modal",
   "license": "MIT",
   "main": "dist/index.js",
@@ -12,10 +12,7 @@
     "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint",
     "prepare": "tsdx build",
-    "docz:dev": "docz dev",
-    "docz:build": "docz build",
-    "size": "size-limit",
-    "prettier": "prettier --write \"**/*.{js,ts,tsx,css,scss,json,md,mdx}\""
+    "size": "size-limit"
   },
   "files": [
     "dist",
@@ -26,18 +23,13 @@
     "setupFilesAfterEnv": [
       "./__tests__/setupTests.ts"
     ],
+    "modulePathIgnorePatterns": [
+      "cypress"
+    ],
     "coveragePathIgnorePatterns": [
       "src/lib"
     ]
   },
-  "prettier": {
-    "singleQuote": true
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
-  },
   "keywords": [
     "react",
     "responsive",
@@ -55,16 +47,17 @@
   "size-limit": [
     {
       "path": "dist/react-responsive-modal.cjs.production.min.js",
-      "limit": "3.1 KB"
+      "limit": "4.1 KB"
     },
     {
       "path": "dist/react-responsive-modal.esm.js",
-      "limit": "3.1 KB"
+      "limit": "4.1 KB"
     }
   ],
   "dependencies": {
-    "classnames": "^2.2.6",
-    "no-scroll": "^2.1.1"
+    "@bedrock-layout/use-forwarded-ref": "^1.1.4",
+    "body-scroll-lock": "^3.1.5",
+    "classnames": "^2.2.6"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17",
@@ -72,21 +65,19 @@
   },
   "devDependencies": {
     "@size-limit/preset-small-lib": "4.7.0",
-    "@testing-library/jest-dom": "5.11.5",
-    "@testing-library/react": "11.1.1",
+    "@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/no-scroll": "2.1.0",
-    "@types/node": "14.14.6",
+    "@types/node": "14.14.7",
     "@types/react": "16.9.56",
     "@types/react-dom": "16.9.9",
-    "@types/react-transition-group": "4.4.0",
-    "docz": "2.3.1",
-    "gatsby": "2.23.11",
-    "gatsby-theme-docz": "2.3.1",
+    "babel-jest": "26.6.3",
+    "cypress": "5.6.0",
     "husky": "4.3.0",
     "prettier": "2.1.2",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
     "size-limit": "4.7.0",
     "tsdx": "0.14.1",
     "tslib": "2.0.3",

package/src/CloseIcon.tsx

@@ -15,7 +15,7 @@ interface CloseIconProps {
   classes: {
     closeButton?: string;
   };
-  onClickCloseIcon: () => void;
+  onClick: () => void;
 }
 
 const CloseIcon = ({
@@ -24,13 +24,13 @@ const CloseIcon = ({
   styles,
   id,
   closeIcon,
-  onClickCloseIcon,
+  onClick,
 }: CloseIconProps) => (
   <button
     id={id}
     className={cx(classes.closeButton, classNames?.closeButton)}
     style={styles?.closeButton}
-    onClick={onClickCloseIcon}
+    onClick={onClick}
     data-testid="close-button"
   >
     {closeIcon ? (
@@ -39,7 +39,6 @@ const CloseIcon = ({
       <svg
         className={classNames?.closeIcon}
         style={styles?.closeIcon}
-        xmlns="http://www.w3.org/2000/svg"
         width={28}
         height={28}
         viewBox="0 0 36 36"

package/src/FocusTrap.tsx

@@ -8,9 +8,10 @@ import {
 
 interface FocusTrapProps {
   container?: React.RefObject<HTMLElement> | null;
+  initialFocusRef?: React.RefObject<HTMLElement>;
 }
 
-export const FocusTrap = ({ container }: FocusTrapProps) => {
+export const FocusTrap = ({ container, initialFocusRef }: FocusTrapProps) => {
   const refLastFocus = useRef<HTMLElement | null>();
   /**
    * Handle focus lock on the modal
@@ -27,8 +28,7 @@ export const FocusTrap = ({ container }: FocusTrapProps) => {
     }
     // On mount we focus on the first focusable element in the modal if there is one
     if (isBrowser && container?.current) {
-      const allTabbingElements = getAllTabbingElements(container.current);
-      if (allTabbingElements[0]) {
+      const savePreviousFocus = () => {
         // First we save the last focused element
         // only if it's a focusable element
         if (
@@ -38,7 +38,20 @@ export const FocusTrap = ({ container }: FocusTrapProps) => {
         ) {
           refLastFocus.current = document.activeElement as HTMLElement;
         }
-        allTabbingElements[0].focus();
+      };
+
+      if (initialFocusRef) {
+        savePreviousFocus();
+        // We need to schedule focusing on a next frame - this allows to focus on the modal root
+        requestAnimationFrame(() => {
+          initialFocusRef.current?.focus();
+        });
+      } else {
+        const allTabbingElements = getAllTabbingElements(container.current);
+        if (allTabbingElements[0]) {
+          savePreviousFocus();
+          allTabbingElements[0].focus();
+        }
       }
     }
     return () => {
@@ -48,7 +61,7 @@ export const FocusTrap = ({ container }: FocusTrapProps) => {
         refLastFocus.current?.focus();
       }
     };
-  }, [container]);
+  }, [container, initialFocusRef]);
 
   return null;
 };

package/src/index.tsx

@@ -1,18 +1,24 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import ReactDom from 'react-dom';
 import cx from 'classnames';
 import CloseIcon from './CloseIcon';
 import { FocusTrap } from './FocusTrap';
-import modalManager from './modalManager';
-import { isBrowser, blockNoScroll, unblockNoScroll } from './utils';
+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',
   overlay: 'react-responsive-modal-overlay',
+  overlayAnimationIn: 'react-responsive-modal-overlay-in',
+  overlayAnimationOut: 'react-responsive-modal-overlay-out',
+  modalContainer: 'react-responsive-modal-container',
+  modalContainerCenter: 'react-responsive-modal-containerCenter',
   modal: 'react-responsive-modal-modal',
-  modalCenter: 'react-responsive-modal-modalCenter',
+  modalAnimationIn: 'react-responsive-modal-modal-in',
+  modalAnimationOut: 'react-responsive-modal-modal-out',
   closeButton: 'react-responsive-modal-closeButton',
-  animationIn: 'react-responsive-modal-fadeIn',
-  animationOut: 'react-responsive-modal-fadeOut',
 };
 
 export interface ModalProps {
@@ -46,6 +52,8 @@ export interface ModalProps {
   blockScroll?: boolean;
   /**
    * Show the close icon.
+   *
+   * Default to true.
    */
   showCloseIcon?: boolean;
   /**
@@ -62,28 +70,40 @@ export interface ModalProps {
    * Default to true.
    */
   focusTrapped?: boolean;
+  /**
+   * Element to focus when focus trap is used.
+   *
+   * Default to undefined.
+   */
+  initialFocusRef?: React.RefObject<HTMLElement>;
   /**
    * You can specify a container prop which should be of type `Element`.
    * The portal will be rendered inside that element.
    * The default behavior will create a div node and render it at the at the end of document.body.
    */
-  container?: Element;
+  container?: Element | null;
   /**
    * An object containing classNames to style the modal.
    */
   classNames?: {
+    root?: string;
     overlay?: string;
+    overlayAnimationIn?: string;
+    overlayAnimationOut?: string;
+    modalContainer?: string;
     modal?: string;
+    modalAnimationIn?: string;
+    modalAnimationOut?: string;
     closeButton?: string;
     closeIcon?: string;
-    animationIn?: string;
-    animationOut?: string;
   };
   /**
    * An object containing the styles objects to style the modal.
    */
   styles?: {
+    root?: React.CSSProperties;
     overlay?: React.CSSProperties;
+    modalContainer?: React.CSSProperties;
     modal?: React.CSSProperties;
     closeButton?: React.CSSProperties;
     closeIcon?: React.CSSProperties;
@@ -91,7 +111,7 @@ export interface ModalProps {
   /**
    * Animation duration in milliseconds.
    *
-   * Default to 500.
+   * Default to 300.
    */
   animationDuration?: number;
   /**
@@ -108,6 +128,10 @@ export interface ModalProps {
    * ARIA description for modal
    */
   ariaDescribedby?: string;
+  /**
+   * Avoid unpleasant flickering effect when body overflow is hidden. For more information see https://www.npmjs.com/package/body-scroll-lock 
+   */
+  reserveScrollBarGap?: boolean;
   /**
    * id attribute for modal
    */
@@ -133,197 +157,223 @@ export interface ModalProps {
   children?: React.ReactNode;
 }
 
-export const Modal = ({
-  open,
-  center,
-  blockScroll = true,
-  closeOnEsc = true,
-  closeOnOverlayClick = true,
-  container,
-  showCloseIcon = true,
-  closeIconId,
-  closeIcon,
-  focusTrapped = true,
-  animationDuration = 500,
-  classNames,
-  styles,
-  role = 'dialog',
-  ariaDescribedby,
-  ariaLabelledby,
-  modalId,
-  onClose,
-  onEscKeyDown,
-  onOverlayClick,
-  onAnimationEnd,
-  children,
-}: ModalProps) => {
-  const refModal = useRef<HTMLDivElement>(null);
-  const refShouldClose = useRef<boolean | null>(null);
-  const refContainer = useRef<HTMLDivElement | null>(null);
-  // Lazily create the ref instance
-  // https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
-  if (refContainer.current === null && isBrowser) {
-    refContainer.current = document.createElement('div');
-  }
+export const Modal = React.forwardRef(
+  (
+    {
+      open,
+      center,
+      blockScroll = true,
+      closeOnEsc = true,
+      closeOnOverlayClick = true,
+      container,
+      showCloseIcon = true,
+      closeIconId,
+      closeIcon,
+      focusTrapped = true,
+      initialFocusRef = undefined,
+      animationDuration = 300,
+      classNames,
+      styles,
+      role = 'dialog',
+      ariaDescribedby,
+      ariaLabelledby,
+      modalId,
+      onClose,
+      onEscKeyDown,
+      onOverlayClick,
+      onAnimationEnd,
+      children,
+      reserveScrollBarGap,
+    }: ModalProps,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) => {
+    const refDialog = useForwardedRef(ref);
+    const refModal = useRef<HTMLDivElement>(null);
+    const refShouldClose = useRef<boolean | null>(null);
+    const refContainer = useRef<HTMLDivElement | null>(null);
+    // Lazily create the ref instance
+    // https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
+    if (refContainer.current === null && isBrowser) {
+      refContainer.current = document.createElement('div');
+    }
 
-  // The value should be false for srr, that way when the component is hydrated client side,
-  // it will match the server rendered content
-  const [showPortal, setShowPortal] = useState(false);
+    // The value should be false for srr, that way when the component is hydrated client side,
+    // it will match the server rendered content
+    const [showPortal, setShowPortal] = useState(false);
 
-  const handleOpen = () => {
-    modalManager.add(refContainer.current!, blockScroll);
-    if (blockScroll) {
-      blockNoScroll();
-    }
-    if (
-      refContainer.current &&
-      !container &&
-      !document.body.contains(refContainer.current)
-    ) {
-      document.body.appendChild(refContainer.current);
-    }
-    document.addEventListener('keydown', handleKeydown);
-  };
+    // Hook used to manage multiple modals opened at the same time
+    useModalManager(refModal, open);
 
-  const handleClose = () => {
-    modalManager.remove(refContainer.current!);
-    if (blockScroll) {
-      unblockNoScroll();
-    }
-    if (
-      refContainer.current &&
-      !container &&
-      document.body.contains(refContainer.current)
-    ) {
-      document.body.removeChild(refContainer.current);
-    }
-    document.removeEventListener('keydown', handleKeydown);
-  };
+    // Hook used to manage the scroll
+    useScrollLock(refModal, open, showPortal, blockScroll, reserveScrollBarGap);
 
-  const handleKeydown = (event: KeyboardEvent) => {
-    // Only the last modal need to be escaped when pressing the esc key
-    if (
-      event.keyCode !== 27 ||
-      !modalManager.isTopModal(refContainer.current!)
-    ) {
-      return;
-    }
+    const handleOpen = () => {
+      if (
+        refContainer.current &&
+        !container &&
+        !document.body.contains(refContainer.current)
+      ) {
+        document.body.appendChild(refContainer.current);
+      }
 
-    onEscKeyDown?.(event);
+      document.addEventListener('keydown', handleKeydown);
+    };
 
-    if (closeOnEsc) {
-      onClose();
-    }
-  };
+    const handleClose = () => {
+      if (
+        refContainer.current &&
+        !container &&
+        document.body.contains(refContainer.current)
+      ) {
+        document.body.removeChild(refContainer.current);
+      }
+      document.removeEventListener('keydown', handleKeydown);
+    };
+
+    const handleKeydown = (event: KeyboardEvent) => {
+      // Only the last modal need to be escaped when pressing the esc key
+      if (event.keyCode !== 27 || !modalManager.isTopModal(refModal)) {
+        return;
+      }
+
+      onEscKeyDown?.(event);
 
-  useEffect(() => {
-    return () => {
-      // When the component is unmounted directly we want to unblock the scroll
-      if (showPortal) {
-        handleClose();
+      if (closeOnEsc) {
+        onClose();
       }
     };
-  }, [showPortal]);
 
-  useEffect(() => {
-    // If the open prop is changing, we need to open the modal
-    // This is also called on the first render if the open prop is true when the modal is created
-    if (open && !showPortal) {
-      setShowPortal(true);
-      handleOpen();
-    }
-  }, [open]);
+    useEffect(() => {
+      return () => {
+        if (showPortal) {
+          // When the modal is closed or removed directly, cleanup the listeners
+          handleClose();
+        }
+      };
+    }, [showPortal]);
 
-  const handleClickOverlay = (
-    event: React.MouseEvent<HTMLDivElement, MouseEvent>
-  ) => {
-    if (refShouldClose.current === null) {
-      refShouldClose.current = true;
-    }
+    useEffect(() => {
+      // If the open prop is changing, we need to open the modal
+      // This is also called on the first render if the open prop is true when the modal is created
+      if (open && !showPortal) {
+        setShowPortal(true);
+        handleOpen();
+      }
+    }, [open]);
 
-    if (!refShouldClose.current) {
-      refShouldClose.current = null;
-      return;
-    }
+    const handleClickOverlay = (
+      event: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ) => {
+      if (refShouldClose.current === null) {
+        refShouldClose.current = true;
+      }
 
-    onOverlayClick?.(event);
+      if (!refShouldClose.current) {
+        refShouldClose.current = null;
+        return;
+      }
 
-    if (closeOnOverlayClick) {
-      onClose();
-    }
+      onOverlayClick?.(event);
 
-    refShouldClose.current = null;
-  };
+      if (closeOnOverlayClick) {
+        onClose();
+      }
 
-  const handleModalEvent = () => {
-    refShouldClose.current = false;
-  };
+      refShouldClose.current = null;
+    };
 
-  const handleClickCloseIcon = () => {
-    onClose();
-  };
+    const handleModalEvent = () => {
+      refShouldClose.current = false;
+    };
 
-  const handleAnimationEnd = () => {
-    if (!open) {
-      setShowPortal(false);
-    }
+    const handleAnimationEnd = () => {
+      if (!open) {
+        setShowPortal(false);
+      }
 
-    onAnimationEnd?.();
-  };
+      onAnimationEnd?.();
+    };
+
+    const containerModal = container || refContainer.current;
 
-  const containerModal = container || refContainer.current;
+    const overlayAnimation = open
+      ? classNames?.overlayAnimationIn ?? classes.overlayAnimationIn
+      : classNames?.overlayAnimationOut ?? classes.overlayAnimationOut;
 
-  return showPortal && containerModal
-    ? ReactDom.createPortal(
-        <div
-          style={{
-            animation: `${
-              open
-                ? classNames?.animationIn ?? classes.animationIn
-                : classNames?.animationOut ?? classes.animationOut
-            } ${animationDuration}ms`,
-            ...styles?.overlay,
-          }}
-          className={cx(classes.overlay, classNames?.overlay)}
-          onClick={handleClickOverlay}
-          onAnimationEnd={handleAnimationEnd}
-          data-testid="overlay"
-        >
+    const modalAnimation = open
+      ? classNames?.modalAnimationIn ?? classes.modalAnimationIn
+      : classNames?.modalAnimationOut ?? classes.modalAnimationOut;
+
+    return showPortal && containerModal
+      ? ReactDom.createPortal(
           <div
-            ref={refModal}
-            className={cx(
-              classes.modal,
-              center && classes.modalCenter,
-              classNames?.modal
-            )}
-            style={styles?.modal}
-            onMouseDown={handleModalEvent}
-            onMouseUp={handleModalEvent}
-            onClick={handleModalEvent}
-            id={modalId}
-            role={role}
-            aria-modal="true"
-            aria-labelledby={ariaLabelledby}
-            aria-describedby={ariaDescribedby}
-            data-testid="modal"
+            className={cx(classes.root, classNames?.root)}
+            style={styles?.root}
+            data-testid="root"
           >
-            {focusTrapped && <FocusTrap container={refModal} />}
-            {children}
-            {showCloseIcon && (
-              <CloseIcon
-                classes={classes}
-                classNames={classNames}
-                styles={styles}
-                closeIcon={closeIcon}
-                onClickCloseIcon={handleClickCloseIcon}
-                id={closeIconId}
-              />
-            )}
-          </div>
-        </div>,
-        containerModal
-      )
-    : null;
-};
+            <div
+              className={cx(classes.overlay, classNames?.overlay)}
+              data-testid="overlay"
+              aria-hidden={true}
+              style={{
+                animation: `${overlayAnimation} ${animationDuration}ms`,
+                ...styles?.overlay,
+              }}
+            />
+            <div
+              ref={refModal}
+              className={cx(
+                classes.modalContainer,
+                center && classes.modalContainerCenter,
+                classNames?.modalContainer
+              )}
+              style={styles?.modalContainer}
+              data-testid="modal-container"
+              onClick={handleClickOverlay}
+            >
+              <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>
+            </div>
+          </div>,
+          containerModal
+        )
+      : null;
+  }
+);
 
 export default Modal;