react-responsive-modal 5.2.6 → 6.2.0

package/src/lib/focusTrapJs.ts

@@ -1,4 +1,4 @@
-// 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
 
 export const candidateSelectors = [
   'input',
@@ -20,12 +20,39 @@ function isHidden(node: any) {
   );
 }
 
+function getCheckedRadio(nodes: any, form: any) {
+  for (var i = 0; i < nodes.length; i++) {
+    if (nodes[i].checked && nodes[i].form === form) {
+      return nodes[i];
+    }
+  }
+}
+
+function isNotRadioOrTabbableRadio(node: any) {
+  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);
+}
+
 export function getAllTabbingElements(parentElem: any) {
+  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);
     }
   }

package/src/modalManager.ts

@@ -1,37 +1,40 @@
-const modals: { element: HTMLDivElement; blockScroll: boolean }[] = [];
+import { Ref, useEffect } from 'react';
+
+let modals: Ref<Element>[] = [];
 
 /**
  * Handle the order of the modals.
  * Inspired by the material-ui implementation.
  */
-export default {
-  /**
-   * Return the modals array
-   */
-  modals: () => modals,
-
+export const modalManager = {
   /**
    * Register a new modal
    */
-  add: (newModal: HTMLDivElement, blockScroll: boolean) => {
-    if (modals.findIndex((modal) => modal.element === newModal) === -1) {
-      modals.push({ element: newModal, blockScroll });
-    }
+  add: (newModal: Ref<Element>) => {
+    modals.push(newModal);
   },
 
   /**
    * Remove a modal
    */
-  remove: (oldModal: HTMLDivElement) => {
-    const index = modals.findIndex((modal) => modal.element === oldModal);
-    if (index !== -1) {
-      modals.splice(index, 1);
-    }
+  remove: (oldModal: Ref<Element>) => {
+    modals = modals.filter((modal) => modal !== oldModal);
   },
 
   /**
-   * 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) =>
-    !!modals.length && modals[modals.length - 1]?.element === modal,
+  isTopModal: (modal: Ref<Element>) =>
+    !!modals.length && modals[modals.length - 1] === modal,
 };
+
+export function useModalManager(ref: Ref<Element>, open: boolean) {
+  useEffect(() => {
+    if (open) {
+      modalManager.add(ref);
+    }
+    return () => {
+      modalManager.remove(ref);
+    };
+  }, [open, ref]);
+}

package/src/useScrollLock.ts

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react';
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
+
+export const useScrollLock = (
+  refModal: React.RefObject<Element>,
+  open: boolean,
+  showPortal: boolean,
+  blockScroll: boolean,
+  reserveScrollBarGap?: boolean
+) => {
+  const oldRef = useRef<Element | null>(null);
+
+  useEffect(() => {
+    if (open && refModal.current && blockScroll) {
+      oldRef.current = refModal.current;
+      disableBodyScroll(refModal.current, { reserveScrollBarGap });
+    }
+    return () => {
+      if (oldRef.current) {
+        enableBodyScroll(oldRef.current);
+        oldRef.current = null;
+      }
+    };
+  }, [open, showPortal, refModal, blockScroll, reserveScrollBarGap]);
+};

package/src/utils.ts

@@ -1,17 +1 @@
-import noScroll from 'no-scroll';
-import modalManager from './modalManager';
-
 export const isBrowser = typeof window !== 'undefined';
-
-export const blockNoScroll = () => {
-  noScroll.on();
-};
-
-export const unblockNoScroll = () => {
-  // Restore the scroll only if there is no modal on the screen
-  // We filter the modals that are not affecting the scroll
-  const modals = modalManager.modals().filter((modal) => modal.blockScroll);
-  if (modals.length === 0) {
-    noScroll.off();
-  }
-};

package/styles.css

@@ -1,30 +1,50 @@
-.react-responsive-modal-overlay {
-  background: rgba(0, 0, 0, 0.75);
-  display: flex;
-  align-items: flex-start;
+.react-responsive-modal-root {
   position: fixed;
   top: 0;
+  bottom: 0;
   left: 0;
   right: 0;
+  z-index: 1000;
+}
+
+.react-responsive-modal-overlay {
+  background: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 0;
   bottom: 0;
-  overflow-y: auto;
+  left: 0;
+  right: 0;
+  z-index: -1;
+}
+
+.react-responsive-modal-container {
+  height: 100%;
+  outline: 0;
   overflow-x: hidden;
-  z-index: 1000;
-  padding: 1.2rem;
+  overflow-y: auto;
+  text-align: center;
+}
+
+/* Used to trick the browser to center the modal content properly  */
+.react-responsive-modal-containerCenter:after {
+  width: 0;
+  height: 100%;
+  content: '';
+  display: inline-block;
+  vertical-align: middle;
 }
 
 .react-responsive-modal-modal {
   max-width: 800px;
-  position: relative;
-  padding: 1.2rem;
+  display: inline-block;
+  text-align: left;
+  vertical-align: middle;
   background: #ffffff;
-  background-clip: padding-box;
   box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
-  margin: 0 auto;
-}
-
-.react-responsive-modal-modalCenter {
-  margin: auto;
+  margin: 1.2rem;
+  padding: 1.2rem;
+  position: relative;
+  overflow-y: auto;
 }
 
 .react-responsive-modal-closeButton {
@@ -38,20 +58,42 @@
   display: flex;
 }
 
-@keyframes react-responsive-modal-fadeIn {
+@keyframes react-responsive-modal-overlay-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes react-responsive-modal-overlay-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes react-responsive-modal-modal-in {
   0% {
+    transform: scale(0.96);
     opacity: 0;
   }
   100% {
+    transform: scale(100%);
     opacity: 1;
   }
 }
 
-@keyframes react-responsive-modal-fadeOut {
+@keyframes react-responsive-modal-modal-out {
   0% {
+    transform: scale(100%);
     opacity: 1;
   }
   100% {
+    transform: scale(0.96);
     opacity: 0;
   }
 }

package/CHANGELOG.md

@@ -1,41 +0,0 @@
-# Changelog
-
-### [5.2.6](https://www.github.com/pradel/react-responsive-modal/compare/v5.2.5...v5.2.6) (2020-11-07)
-
-
-### Miscellaneous
-
-* fix publishing ([f024bd5](https://www.github.com/pradel/react-responsive-modal/commit/f024bd588ff315f440cc090eb90595d6f165fb98))
-
-### [5.2.5](https://www.github.com/pradel/react-responsive-modal/compare/v5.2.4...v5.2.5) (2020-11-07)
-
-
-### Miscellaneous
-
-* fix build ([1a5f07c](https://www.github.com/pradel/react-responsive-modal/commit/1a5f07cb7a6f6682c01d487129309152e41b23c0))
-
-### [5.2.4](https://www.github.com/pradel/react-responsive-modal/compare/v5.2.3...v5.2.4) (2020-11-07)
-
-
-### Miscellaneous
-
-* trigger release ([d14af23](https://www.github.com/pradel/react-responsive-modal/commit/d14af2334292d9aaf81385ccfdcd0b7ff506a7cb))
-
-### [5.2.3](https://www.github.com/pradel/react-responsive-modal/compare/v5.2.2...v5.2.3) (2020-11-07)
-
-
-### Miscellaneous
-
-* upgrade dev dependencies ([6745a09](https://www.github.com/pradel/react-responsive-modal/commit/6745a09ddd26ac938f77615afc7ced8ff1703e62))
-
-### [5.2.2](https://www.github.com/pradel/react-responsive-modal/compare/v5.2.1...v5.2.2) (2020-11-07)
-
-
-### Bug Fixes
-
-* fix closing modal via close icon ([#437](https://www.github.com/pradel/react-responsive-modal/issues/437)) ([f13ee4a](https://www.github.com/pradel/react-responsive-modal/commit/f13ee4abfce63b156f64a8cf5ea5ea50dfff4e19))
-
-
-### Tests
-
-* add tests for body scroll blocking ([#438](https://www.github.com/pradel/react-responsive-modal/issues/438)) ([f4077b8](https://www.github.com/pradel/react-responsive-modal/commit/f4077b8f0f24d9e4b12107d8ebe7382d5dafbfef))

package/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2020 Léo Pradel
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.