react-responsive-modal 5.2.6 → 6.2.0

package/README.md

@@ -3,7 +3,6 @@
 [![npm version](https://img.shields.io/npm/v/react-responsive-modal.svg)](https://www.npmjs.com/package/react-responsive-modal)
 [![npm downloads per month](https://img.shields.io/npm/dm/react-responsive-modal.svg)](https://www.npmjs.com/package/react-responsive-modal)
 [![codecov](https://img.shields.io/codecov/c/github/pradel/react-responsive-modal/master.svg)](https://codecov.io/gh/pradel/react-responsive-modal)
-[![dependencies Status](https://david-dm.org/pradel/react-responsive-modal/status.svg)](https://david-dm.org/pradel/react-responsive-modal)
 
 A simple responsive and accessible react modal.
 
@@ -13,6 +12,8 @@ A simple responsive and accessible react modal.
 - Multiple modals.
 - Accessible modals.
 - Easily customizable via props.
+- Typescript support
+- [Small bundle size](https://bundlephobia.com/result?p=react-responsive-modal)
 
 ## Documentation
 
@@ -21,12 +22,6 @@ A simple responsive and accessible react modal.
   - [Usage](https://react-responsive-modal.leopradel.com/#usage)
   - [Props](https://react-responsive-modal.leopradel.com/#props)
   - [Licence](https://react-responsive-modal.leopradel.com/#license)
-- [Examples](https://react-responsive-modal.leopradel.com/examples)
-  - [Centered modal](https://react-responsive-modal.leopradel.com/examples#centered-modal)
-  - [Multiple modal](https://react-responsive-modal.leopradel.com/examples#multiple-modal)
-  - [Custom styling](https://react-responsive-modal.leopradel.com/examples#custom-styling)
-  - [Custom animation](https://react-responsive-modal.leopradel.com/examples#custom-animation)
-  - [Custom container](https://react-responsive-modal.leopradel.com/examples#custom-container)
 
 ## Installation
 

package/dist/CloseIcon.d.ts

@@ -13,7 +13,7 @@ interface CloseIconProps {
     classes: {
         closeButton?: string;
     };
-    onClickCloseIcon: () => void;
+    onClick: () => void;
 }
-declare const CloseIcon: ({ classes, classNames, styles, id, closeIcon, onClickCloseIcon, }: CloseIconProps) => JSX.Element;
+declare const CloseIcon: ({ classes, classNames, styles, id, closeIcon, onClick, }: CloseIconProps) => JSX.Element;
 export default CloseIcon;

package/dist/FocusTrap.d.ts

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

package/dist/index.d.ts

@@ -30,6 +30,8 @@ export interface ModalProps {
     blockScroll?: boolean;
     /**
      * Show the close icon.
+     *
+     * Default to true.
      */
     showCloseIcon?: boolean;
     /**
@@ -46,28 +48,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;
@@ -75,7 +89,7 @@ export interface ModalProps {
     /**
      * Animation duration in milliseconds.
      *
-     * Default to 500.
+     * Default to 300.
      */
     animationDuration?: number;
     /**
@@ -92,6 +106,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
      */
@@ -114,5 +132,5 @@ export interface ModalProps {
     onAnimationEnd?: () => void;
     children?: React.ReactNode;
 }
-export declare const Modal: ({ open, center, blockScroll, closeOnEsc, closeOnOverlayClick, container, showCloseIcon, closeIconId, closeIcon, focusTrapped, animationDuration, classNames, styles, role, ariaDescribedby, ariaLabelledby, modalId, onClose, onEscKeyDown, onOverlayClick, onAnimationEnd, children, }: ModalProps) => React.ReactPortal | null;
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/dist/modalManager.d.ts

@@ -1,26 +1,20 @@
-declare const _default: {
-    /**
-     * Return the modals array
-     */
-    modals: () => {
-        element: HTMLDivElement;
-        blockScroll: boolean;
-    }[];
+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: HTMLDivElement, blockScroll: boolean) => void;
+    add: (newModal: Ref<Element>) => void;
     /**
      * Remove a modal
      */
-    remove: (oldModal: HTMLDivElement) => void;
+    remove: (oldModal: Ref<Element>) => void;
     /**
-     * Check if the modal is the first one on the screen
+     * When multiple modals are rendered will return true if current modal is the last one
      */
-    isTopModal: (modal: HTMLDivElement) => boolean;
+    isTopModal: (modal: Ref<Element>) => boolean;
 };
-/**
- * Handle the order of the modals.
- * Inspired by the material-ui implementation.
- */
-export default _default;
+export declare function useModalManager(ref: Ref<Element>, open: boolean): void;

package/dist/react-responsive-modal.cjs.development.js

@@ -8,7 +8,8 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var ReactDom = _interopDefault(require('react-dom'));
 var cx = _interopDefault(require('classnames'));
-var noScroll = _interopDefault(require('no-scroll'));
+var bodyScrollLock = require('body-scroll-lock');
+var useForwardedRef = _interopDefault(require('@bedrock-layout/use-forwarded-ref'));
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -34,17 +35,16 @@ var CloseIcon = function CloseIcon(_ref) {
       styles = _ref.styles,
       id = _ref.id,
       closeIcon = _ref.closeIcon,
-      onClickCloseIcon = _ref.onClickCloseIcon;
+      onClick = _ref.onClick;
   return React__default.createElement("button", {
     id: id,
     className: cx(classes.closeButton, classNames == null ? void 0 : classNames.closeButton),
     style: styles == null ? void 0 : styles.closeButton,
-    onClick: onClickCloseIcon,
+    onClick: onClick,
     "data-testid": "close-button"
   }, closeIcon ? closeIcon : React__default.createElement("svg", {
     className: classNames == null ? void 0 : classNames.closeIcon,
     style: styles == null ? void 0 : styles.closeIcon,
-    xmlns: "http://www.w3.org/2000/svg",
     width: 28,
     height: 28,
     viewBox: "0 0 36 36",
@@ -54,74 +54,9 @@ var CloseIcon = function CloseIcon(_ref) {
   })));
 };
 
-var _modals = [];
-/**
- * Handle the order of the modals.
- * Inspired by the material-ui implementation.
- */
-
-var modalManager = {
-  /**
-   * Return the modals array
-   */
-  modals: function modals() {
-    return _modals;
-  },
-
-  /**
-   * Register a new modal
-   */
-  add: function add(newModal, blockScroll) {
-    if (_modals.findIndex(function (modal) {
-      return modal.element === newModal;
-    }) === -1) {
-      _modals.push({
-        element: newModal,
-        blockScroll: blockScroll
-      });
-    }
-  },
-
-  /**
-   * Remove a modal
-   */
-  remove: function remove(oldModal) {
-    var index = _modals.findIndex(function (modal) {
-      return modal.element === oldModal;
-    });
-
-    if (index !== -1) {
-      _modals.splice(index, 1);
-    }
-  },
-
-  /**
-   * Check if the modal is the first one on the screen
-   */
-  isTopModal: function isTopModal(modal) {
-    var _modals2;
-
-    return !!_modals.length && ((_modals2 = _modals[_modals.length - 1]) == null ? void 0 : _modals2.element) === modal;
-  }
-};
-
 var isBrowser = typeof window !== 'undefined';
-var blockNoScroll = function blockNoScroll() {
-  noScroll.on();
-};
-var unblockNoScroll = function unblockNoScroll() {
-  // Restore the scroll only if there is no modal on the screen
-  // We filter the modals that are not affecting the scroll
-  var modals = modalManager.modals().filter(function (modal) {
-    return modal.blockScroll;
-  });
-
-  if (modals.length === 0) {
-    noScroll.off();
-  }
-};
 
-// https://github.com/alexandrzavalii/focus-trap-js/blob/master/src/index.js v1.0.9
+// https://github.com/alexandrzavalii/focus-trap-js/blob/master/src/index.js v1.1.0
 var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'];
 
 function isHidden(node) {
@@ -130,14 +65,34 @@ function isHidden(node) {
   return node.offsetParent === null || getComputedStyle(node).visibility === 'hidden';
 }
 
+function getCheckedRadio(nodes, form) {
+  for (var i = 0; i < nodes.length; i++) {
+    if (nodes[i].checked && nodes[i].form === form) {
+      return nodes[i];
+    }
+  }
+}
+
+function isNotRadioOrTabbableRadio(node) {
+  if (node.tagName !== 'INPUT' || node.type !== 'radio' || !node.name) {
+    return true;
+  }
+
+  var radioScope = node.form || node.ownerDocument;
+  var radioSet = radioScope.querySelectorAll('input[type="radio"][name="' + node.name + '"]');
+  var checked = getCheckedRadio(radioSet, node.form);
+  return checked === node || checked === undefined && radioSet[0] === node;
+}
+
 function getAllTabbingElements(parentElem) {
+  var currentActiveElement = document.activeElement;
   var tabbableNodes = parentElem.querySelectorAll(candidateSelectors.join(','));
   var onlyTabbable = [];
 
   for (var i = 0; i < tabbableNodes.length; i++) {
     var node = tabbableNodes[i];
 
-    if (!node.disabled && getTabindex(node) > -1 && !isHidden(node)) {
+    if (currentActiveElement === node || !node.disabled && getTabindex(node) > -1 && !isHidden(node) && isNotRadioOrTabbableRadio(node)) {
       onlyTabbable.push(node);
     }
   }
@@ -191,7 +146,8 @@ function isContentEditable(node) {
 }
 
 var FocusTrap = function FocusTrap(_ref) {
-  var container = _ref.container;
+  var container = _ref.container,
+      initialFocusRef = _ref.initialFocusRef;
   var refLastFocus = React.useRef();
   /**
    * Handle focus lock on the modal
@@ -210,9 +166,7 @@ var FocusTrap = function FocusTrap(_ref) {
 
 
     if (isBrowser && (container == null ? void 0 : container.current)) {
-      var allTabbingElements = getAllTabbingElements(container.current);
-
-      if (allTabbingElements[0]) {
+      var savePreviousFocus = function savePreviousFocus() {
         // First we save the last focused element
         // only if it's a focusable element
         if (candidateSelectors.findIndex(function (selector) {
@@ -222,8 +176,23 @@ var FocusTrap = function FocusTrap(_ref) {
         }) !== -1) {
           refLastFocus.current = document.activeElement;
         }
+      };
+
+      if (initialFocusRef) {
+        savePreviousFocus(); // We need to schedule focusing on a next frame - this allows to focus on the modal root
+
+        requestAnimationFrame(function () {
+          var _initialFocusRef$curr;
 
-        allTabbingElements[0].focus();
+          (_initialFocusRef$curr = initialFocusRef.current) == null ? void 0 : _initialFocusRef$curr.focus();
+        });
+      } else {
+        var allTabbingElements = getAllTabbingElements(container.current);
+
+        if (allTabbingElements[0]) {
+          savePreviousFocus();
+          allTabbingElements[0].focus();
+        }
       }
     }
 
@@ -236,20 +205,85 @@ var FocusTrap = function FocusTrap(_ref) {
         (_refLastFocus$current = refLastFocus.current) == null ? void 0 : _refLastFocus$current.focus();
       }
     };
-  }, [container]);
+  }, [container, initialFocusRef]);
   return null;
 };
 
+var modals = [];
+/**
+ * Handle the order of the modals.
+ * Inspired by the material-ui implementation.
+ */
+
+var modalManager = {
+  /**
+   * Register a new modal
+   */
+  add: function add(newModal) {
+    modals.push(newModal);
+  },
+
+  /**
+   * Remove a modal
+   */
+  remove: function remove(oldModal) {
+    modals = modals.filter(function (modal) {
+      return modal !== oldModal;
+    });
+  },
+
+  /**
+   * When multiple modals are rendered will return true if current modal is the last one
+   */
+  isTopModal: function isTopModal(modal) {
+    return !!modals.length && modals[modals.length - 1] === modal;
+  }
+};
+function useModalManager(ref, open) {
+  React.useEffect(function () {
+    if (open) {
+      modalManager.add(ref);
+    }
+
+    return function () {
+      modalManager.remove(ref);
+    };
+  }, [open, ref]);
+}
+
+var useScrollLock = function useScrollLock(refModal, open, showPortal, blockScroll, reserveScrollBarGap) {
+  var oldRef = React.useRef(null);
+  React.useEffect(function () {
+    if (open && refModal.current && blockScroll) {
+      oldRef.current = refModal.current;
+      bodyScrollLock.disableBodyScroll(refModal.current, {
+        reserveScrollBarGap: reserveScrollBarGap
+      });
+    }
+
+    return function () {
+      if (oldRef.current) {
+        bodyScrollLock.enableBodyScroll(oldRef.current);
+        oldRef.current = null;
+      }
+    };
+  }, [open, showPortal, refModal, blockScroll, reserveScrollBarGap]);
+};
+
 var 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',
-  closeButton: 'react-responsive-modal-closeButton',
-  animationIn: 'react-responsive-modal-fadeIn',
-  animationOut: 'react-responsive-modal-fadeOut'
+  modalAnimationIn: 'react-responsive-modal-modal-in',
+  modalAnimationOut: 'react-responsive-modal-modal-out',
+  closeButton: 'react-responsive-modal-closeButton'
 };
-var Modal = function Modal(_ref) {
-  var _classNames$animation, _classNames$animation2;
+var Modal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var _classNames$overlayAn, _classNames$overlayAn2, _classNames$modalAnim, _classNames$modalAnim2;
 
   var open = _ref.open,
       center = _ref.center,
@@ -266,8 +300,10 @@ var Modal = function Modal(_ref) {
       closeIcon = _ref.closeIcon,
       _ref$focusTrapped = _ref.focusTrapped,
       focusTrapped = _ref$focusTrapped === void 0 ? true : _ref$focusTrapped,
+      _ref$initialFocusRef = _ref.initialFocusRef,
+      initialFocusRef = _ref$initialFocusRef === void 0 ? undefined : _ref$initialFocusRef,
       _ref$animationDuratio = _ref.animationDuration,
-      animationDuration = _ref$animationDuratio === void 0 ? 500 : _ref$animationDuratio,
+      animationDuration = _ref$animationDuratio === void 0 ? 300 : _ref$animationDuratio,
       classNames = _ref.classNames,
       styles = _ref.styles,
       _ref$role = _ref.role,
@@ -279,7 +315,9 @@ var Modal = function Modal(_ref) {
       onEscKeyDown = _ref.onEscKeyDown,
       onOverlayClick = _ref.onOverlayClick,
       onAnimationEnd = _ref.onAnimationEnd,
-      children = _ref.children;
+      children = _ref.children,
+      reserveScrollBarGap = _ref.reserveScrollBarGap;
+  var refDialog = useForwardedRef(ref);
   var refModal = React.useRef(null);
   var refShouldClose = React.useRef(null);
   var refContainer = React.useRef(null); // Lazily create the ref instance
@@ -293,15 +331,14 @@ var Modal = function Modal(_ref) {
 
   var _useState = React.useState(false),
       showPortal = _useState[0],
-      setShowPortal = _useState[1];
+      setShowPortal = _useState[1]; // Hook used to manage multiple modals opened at the same time
 
-  var handleOpen = function handleOpen() {
-    modalManager.add(refContainer.current, blockScroll);
 
-    if (blockScroll) {
-      blockNoScroll();
-    }
+  useModalManager(refModal, open); // Hook used to manage the scroll
 
+  useScrollLock(refModal, open, showPortal, blockScroll, reserveScrollBarGap);
+
+  var handleOpen = function handleOpen() {
     if (refContainer.current && !container && !document.body.contains(refContainer.current)) {
       document.body.appendChild(refContainer.current);
     }
@@ -310,12 +347,6 @@ var Modal = function Modal(_ref) {
   };
 
   var handleClose = function handleClose() {
-    modalManager.remove(refContainer.current);
-
-    if (blockScroll) {
-      unblockNoScroll();
-    }
-
     if (refContainer.current && !container && document.body.contains(refContainer.current)) {
       document.body.removeChild(refContainer.current);
     }
@@ -325,7 +356,7 @@ var Modal = function Modal(_ref) {
 
   var handleKeydown = function handleKeydown(event) {
     // Only the last modal need to be escaped when pressing the esc key
-    if (event.keyCode !== 27 || !modalManager.isTopModal(refContainer.current)) {
+    if (event.keyCode !== 27 || !modalManager.isTopModal(refModal)) {
       return;
     }
 
@@ -338,8 +369,8 @@ var Modal = function Modal(_ref) {
 
   React.useEffect(function () {
     return function () {
-      // When the component is unmounted directly we want to unblock the scroll
       if (showPortal) {
+        // When the modal is closed or removed directly, cleanup the listeners
         handleClose();
       }
     };
@@ -376,10 +407,6 @@ var Modal = function Modal(_ref) {
     refShouldClose.current = false;
   };
 
-  var handleClickCloseIcon = function handleClickCloseIcon() {
-    onClose();
-  };
-
   var handleAnimationEnd = function handleAnimationEnd() {
     if (!open) {
       setShowPortal(false);
@@ -389,38 +416,54 @@ var Modal = function Modal(_ref) {
   };
 
   var containerModal = container || refContainer.current;
+  var overlayAnimation = open ? (_classNames$overlayAn = classNames == null ? void 0 : classNames.overlayAnimationIn) != null ? _classNames$overlayAn : classes.overlayAnimationIn : (_classNames$overlayAn2 = classNames == null ? void 0 : classNames.overlayAnimationOut) != null ? _classNames$overlayAn2 : classes.overlayAnimationOut;
+  var modalAnimation = open ? (_classNames$modalAnim = classNames == null ? void 0 : classNames.modalAnimationIn) != null ? _classNames$modalAnim : classes.modalAnimationIn : (_classNames$modalAnim2 = classNames == null ? void 0 : classNames.modalAnimationOut) != null ? _classNames$modalAnim2 : classes.modalAnimationOut;
   return showPortal && containerModal ? ReactDom.createPortal(React__default.createElement("div", {
-    style: _extends({
-      animation: (open ? (_classNames$animation = classNames == null ? void 0 : classNames.animationIn) != null ? _classNames$animation : classes.animationIn : (_classNames$animation2 = classNames == null ? void 0 : classNames.animationOut) != null ? _classNames$animation2 : classes.animationOut) + " " + animationDuration + "ms"
-    }, styles == null ? void 0 : styles.overlay),
-    className: cx(classes.overlay, classNames == null ? void 0 : classNames.overlay),
-    onClick: handleClickOverlay,
-    onAnimationEnd: handleAnimationEnd,
-    "data-testid": "overlay"
+    className: cx(classes.root, classNames == null ? void 0 : classNames.root),
+    style: styles == null ? void 0 : styles.root,
+    "data-testid": "root"
   }, React__default.createElement("div", {
+    className: cx(classes.overlay, classNames == null ? void 0 : classNames.overlay),
+    "data-testid": "overlay",
+    "aria-hidden": true,
+    style: _extends({
+      animation: overlayAnimation + " " + animationDuration + "ms"
+    }, styles == null ? void 0 : styles.overlay)
+  }), React__default.createElement("div", {
     ref: refModal,
-    className: cx(classes.modal, center && classes.modalCenter, classNames == null ? void 0 : classNames.modal),
-    style: styles == null ? void 0 : styles.modal,
+    className: cx(classes.modalContainer, center && classes.modalContainerCenter, classNames == null ? void 0 : classNames.modalContainer),
+    style: styles == null ? void 0 : styles.modalContainer,
+    "data-testid": "modal-container",
+    onClick: handleClickOverlay
+  }, React__default.createElement("div", {
+    ref: refDialog,
+    className: cx(classes.modal, classNames == null ? void 0 : classNames.modal),
+    style: _extends({
+      animation: modalAnimation + " " + animationDuration + "ms"
+    }, styles == null ? void 0 : 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"
+    "data-testid": "modal",
+    tabIndex: -1
   }, focusTrapped && React__default.createElement(FocusTrap, {
-    container: refModal
+    container: refDialog,
+    initialFocusRef: initialFocusRef
   }), children, showCloseIcon && React__default.createElement(CloseIcon, {
     classes: classes,
     classNames: classNames,
     styles: styles,
     closeIcon: closeIcon,
-    onClickCloseIcon: handleClickCloseIcon,
+    onClick: onClose,
     id: closeIconId
-  }))), containerModal) : null;
-};
+  })))), containerModal) : null;
+});
 
 exports.Modal = Modal;
 exports.default = Modal;