react-responsive-modal 4.0.1 → 5.0.3

package/src/CloseIcon.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import cx from 'classnames';
+
+interface CloseIconProps {
+  id?: string;
+  closeIcon?: React.ReactNode;
+  styles?: {
+    closeButton?: React.CSSProperties;
+    closeIcon?: React.CSSProperties;
+  };
+  classNames?: {
+    closeButton?: string;
+    closeIcon?: string;
+  };
+  classes: {
+    closeButton?: string;
+  };
+  onClickCloseIcon: () => void;
+}
+
+const CloseIcon = ({
+  classes,
+  classNames,
+  styles,
+  id,
+  closeIcon,
+  onClickCloseIcon,
+}: CloseIconProps) => (
+  <button
+    id={id}
+    className={cx(classes.closeButton, classNames?.closeButton)}
+    style={styles?.closeButton}
+    onClick={onClickCloseIcon}
+    data-testid="close-button"
+  >
+    {closeIcon ? (
+      closeIcon
+    ) : (
+      <svg
+        className={classNames?.closeIcon}
+        style={styles?.closeIcon}
+        xmlns="http://www.w3.org/2000/svg"
+        width={28}
+        height={28}
+        viewBox="0 0 36 36"
+        data-testid="close-icon"
+      >
+        <path d="M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z" />
+      </svg>
+    )}
+  </button>
+);
+
+export default CloseIcon;

package/src/FocusTrap.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useRef } from 'react';
+import { isBrowser } from './utils';
+import {
+  tabTrappingKey,
+  candidateSelectors,
+  getAllTabbingElements,
+} from './focusTrapJs';
+
+interface FocusTrapProps {
+  container?: React.RefObject<HTMLElement> | null;
+}
+
+export const FocusTrap = ({ container }: FocusTrapProps) => {
+  const refLastFocus = useRef<HTMLElement | null>();
+  /**
+   * Handle focus lock on the modal
+   */
+  useEffect(() => {
+    const handleKeyEvent = (event: KeyboardEvent) => {
+      if (container?.current) {
+        tabTrappingKey(event, container.current);
+      }
+    };
+
+    if (isBrowser) {
+      document.addEventListener('keydown', handleKeyEvent);
+    }
+    // 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]) {
+        // First we save the last focused element
+        // only if it's a focusable element
+        if (
+          candidateSelectors.findIndex((selector) =>
+            document.activeElement?.matches(selector)
+          ) !== -1
+        ) {
+          refLastFocus.current = document.activeElement as HTMLElement;
+        }
+        allTabbingElements[0].focus();
+      }
+    }
+    return () => {
+      if (isBrowser) {
+        document.removeEventListener('keydown', handleKeyEvent);
+        // On unmount we restore the focus to the last focused element
+        refLastFocus.current?.focus();
+      }
+    };
+  }, [container]);
+
+  return null;
+};

package/src/focusTrapJs.ts

@@ -0,0 +1,79 @@
+// https://github.com/alexandrzavalii/focus-trap-js/blob/master/src/index.js v1.0.9
+
+export const candidateSelectors = [
+  'input',
+  'select',
+  'textarea',
+  'a[href]',
+  'button',
+  '[tabindex]',
+  'audio[controls]',
+  'video[controls]',
+  '[contenteditable]:not([contenteditable="false"])',
+];
+
+function isHidden(node: any) {
+  // offsetParent being null will allow detecting cases where an element is invisible or inside an invisible element,
+  // as long as the element does not use position: fixed. For them, their visibility has to be checked directly as well.
+  return (
+    node.offsetParent === null || getComputedStyle(node).visibility === 'hidden'
+  );
+}
+
+export function getAllTabbingElements(parentElem: any) {
+  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)) {
+      onlyTabbable.push(node);
+    }
+  }
+  return onlyTabbable;
+}
+
+export function tabTrappingKey(event: any, parentElem: any) {
+  // check if current event keyCode is tab
+  if (!event || event.key !== 'Tab') return;
+
+  if (!parentElem || !parentElem.contains) {
+    if (process && process.env.NODE_ENV === 'development') {
+      console.warn('focus-trap-js: parent element is not defined');
+    }
+    return false;
+  }
+
+  if (!parentElem.contains(event.target)) {
+    return false;
+  }
+
+  var allTabbingElements = getAllTabbingElements(parentElem);
+  var firstFocusableElement = allTabbingElements[0];
+  var lastFocusableElement = allTabbingElements[allTabbingElements.length - 1];
+
+  if (event.shiftKey && event.target === firstFocusableElement) {
+    lastFocusableElement.focus();
+    event.preventDefault();
+    return true;
+  } else if (!event.shiftKey && event.target === lastFocusableElement) {
+    firstFocusableElement.focus();
+    event.preventDefault();
+    return true;
+  }
+  return false;
+}
+
+function getTabindex(node: any) {
+  var tabindexAttr = parseInt(node.getAttribute('tabindex'), 10);
+
+  if (!isNaN(tabindexAttr)) return tabindexAttr;
+  // Browsers do not return tabIndex correctly for contentEditable nodes;
+  // so if they don't have a tabindex attribute specifically set, assume it's 0.
+
+  if (isContentEditable(node)) return 0;
+  return node.tabIndex;
+}
+
+function isContentEditable(node: any) {
+  return node.getAttribute('contentEditable');
+}

package/src/index.tsx

@@ -0,0 +1,339 @@
+import React, { useEffect, useState, useRef } 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';
+
+const classes = {
+  overlay: 'react-responsive-modal-overlay',
+  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',
+};
+
+interface ModalProps {
+  /**
+   * Control if the modal is open or not.
+   */
+  open: boolean;
+  /**
+   * Should the dialog be centered.
+   *
+   * Default to false.
+   */
+  center?: boolean;
+  /**
+   * Is the modal closable when user press esc key.
+   *
+   * Default to true.
+   */
+  closeOnEsc?: boolean;
+  /**
+   * Is the modal closable when user click on overlay.
+   *
+   * Default to true.
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * Whether to block scrolling when dialog is open.
+   *
+   * Default to true.
+   */
+  blockScroll?: boolean;
+  /**
+   * Show the close icon.
+   */
+  showCloseIcon?: boolean;
+  /**
+   * id attribute for the close icon button.
+   */
+  closeIconId?: string;
+  /**
+   * Custom icon to render (svg, img, etc...).
+   */
+  closeIcon?: React.ReactNode;
+  /**
+   * When the modal is open, trap focus within it.
+   *
+   * Default to true.
+   */
+  focusTrapped?: boolean;
+  /**
+   * 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;
+  /**
+   * An object containing classNames to style the modal.
+   */
+  classNames?: {
+    overlay?: string;
+    modal?: string;
+    closeButton?: string;
+    closeIcon?: string;
+    animationIn?: string;
+    animationOut?: string;
+  };
+  /**
+   * An object containing the styles objects to style the modal.
+   */
+  styles?: {
+    overlay?: React.CSSProperties;
+    modal?: React.CSSProperties;
+    closeButton?: React.CSSProperties;
+    closeIcon?: React.CSSProperties;
+  };
+  /**
+   * Animation duration in milliseconds.
+   *
+   * Default to 500.
+   */
+  animationDuration?: number;
+  /**
+   * ARIA role for modal
+   *
+   * Default to 'dialog'.
+   */
+  role?: string;
+  /**
+   * ARIA label for modal
+   */
+  ariaLabelledby?: string;
+  /**
+   * ARIA description for modal
+   */
+  ariaDescribedby?: string;
+  /**
+   * id attribute for modal
+   */
+  modalId?: string;
+  /**
+   * Callback fired when the Modal is requested to be closed by a click on the overlay or when user press esc key.
+   */
+  onClose: () => void;
+  /**
+   * Callback fired when the escape key is pressed.
+   */
+  onEscKeyDown?: (event: KeyboardEvent) => void;
+  /**
+   * Callback fired when the overlay is clicked.
+   */
+  onOverlayClick?: (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ) => void;
+  /**
+   * Callback fired when the Modal has exited and the animation is finished.
+   */
+  onAnimationEnd?: () => void;
+  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');
+  }
+
+  const [showPortal, setShowPortal] = useState(open);
+
+  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);
+  };
+
+  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);
+  };
+
+  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;
+    }
+
+    if (onEscKeyDown) {
+      onEscKeyDown(event);
+    }
+
+    if (closeOnEsc) {
+      onClose();
+    }
+  };
+
+  useEffect(() => {
+    // When the modal is rendered first time we want to block the scroll
+    if (open) {
+      handleOpen();
+    }
+    return () => {
+      // When the component is unmounted directly we want to unblock the scroll
+      if (showPortal) {
+        handleClose();
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    // If the open prop is changing, we need to open the modal
+    if (open && !showPortal) {
+      setShowPortal(true);
+      handleOpen();
+    }
+  }, [open]);
+
+  const handleClickOverlay = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ) => {
+    if (refShouldClose.current === null) {
+      refShouldClose.current = true;
+    }
+
+    if (!refShouldClose.current) {
+      refShouldClose.current = null;
+      return;
+    }
+
+    if (onOverlayClick) {
+      onOverlayClick(event);
+    }
+
+    if (closeOnOverlayClick) {
+      onClose();
+    }
+
+    refShouldClose.current = null;
+  };
+
+  const handleModalEvent = () => {
+    refShouldClose.current = false;
+  };
+
+  const handleClickCloseIcon = () => {
+    onClose();
+  };
+
+  const handleAnimationEnd = () => {
+    if (!open) {
+      setShowPortal(false);
+      handleClose();
+    }
+
+    if (blockScroll) {
+      unblockNoScroll();
+    }
+
+    if (onAnimationEnd) {
+      onAnimationEnd();
+    }
+  };
+
+  return showPortal
+    ? 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"
+        >
+          <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"
+          >
+            {focusTrapped && <FocusTrap container={refModal} />}
+            {children}
+            {showCloseIcon && (
+              <CloseIcon
+                classes={classes}
+                classNames={classNames}
+                styles={styles}
+                closeIcon={closeIcon}
+                onClickCloseIcon={handleClickCloseIcon}
+                id={closeIconId}
+              />
+            )}
+          </div>
+        </div>,
+        container || refContainer.current!
+      )
+    : null;
+};
+
+export default Modal;

package/src/modalManager.ts

@@ -0,0 +1,37 @@
+const modals: { element: HTMLDivElement; blockScroll: boolean }[] = [];
+
+/**
+ * Handle the order of the modals.
+ * Inspired by the material-ui implementation.
+ */
+export default {
+  /**
+   * Return the modals array
+   */
+  modals: () => modals,
+
+  /**
+   * Register a new modal
+   */
+  add: (newModal: HTMLDivElement, blockScroll: boolean) => {
+    if (modals.findIndex((modal) => modal.element === newModal) === -1) {
+      modals.push({ element: newModal, blockScroll });
+    }
+  },
+
+  /**
+   * Remove a modal
+   */
+  remove: (oldModal: HTMLDivElement) => {
+    const index = modals.findIndex((modal) => modal.element === oldModal);
+    if (index !== -1) {
+      modals.splice(index, 1);
+    }
+  },
+
+  /**
+   * Check if the modal is the first one on the screen
+   */
+  isTopModal: (modal: HTMLDivElement) =>
+    !!modals.length && modals[modals.length - 1]?.element === modal,
+};

package/src/utils.ts

@@ -0,0 +1,17 @@
+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/{src/styles.css → styles.css}

@@ -1,4 +1,4 @@
-.overlay {
+.react-responsive-modal-overlay {
   background: rgba(0, 0, 0, 0.75);
   display: flex;
   align-items: flex-start;
@@ -12,7 +12,8 @@
   z-index: 1000;
   padding: 1.2rem;
 }
-.modal {
+
+.react-responsive-modal-modal {
   max-width: 800px;
   position: relative;
   padding: 1.2rem;
@@ -21,31 +22,36 @@
   box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
   margin: 0 auto;
 }
-.modalCenter {
+
+.react-responsive-modal-modalCenter {
   margin: auto;
 }
-.closeButton {
+
+.react-responsive-modal-closeButton {
   position: absolute;
   top: 14px;
   right: 14px;
   border: none;
   padding: 0;
+  cursor: pointer;
   background-color: transparent;
   display: flex;
 }
-.closeIcon {
-}
-.transitionEnter {
-  opacity: 0.01;
-}
-.transitionEnterActive {
-  opacity: 1;
-  transition: opacity 500ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.transitionExit {
-  opacity: 1;
-}
-.transitionExitActive {
-  opacity: 0.01;
-  transition: opacity 500ms cubic-bezier(0.23, 1, 0.32, 1);
+
+@keyframes react-responsive-modal-fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes react-responsive-modal-fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }