feat(Modal): added noUnmount prop to disable modal unmount when closed

Author: liamross

src/components/Modal/Modal.stories.tsx

@@ -1,5 +1,5 @@
 import { boolean, text } from '@storybook/addon-knobs';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { action } from '../../storybook-helpers/action/action';
 import { Button } from '../Button';
 import { Modal } from '../Modal';
@@ -88,3 +88,33 @@ export const Scrolling = () => (
     <p style={{ whiteSpace: 'pre-wrap' }}>{lorem}</p>
   </Modal>
 );
+
+const Timer = () => {
+  const [seconds, setSeconds] = useState(0);
+  useEffect(() => {
+    const increment = () => setSeconds(prev => prev + 1);
+    const timer = window.setInterval(increment, 1000);
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, []);
+  return (
+    <p>
+      Time passed: {seconds} second{seconds === 1 ? '' : 's'}
+    </p>
+  );
+};
+
+export const UnmountExample = () => {
+  const noUnmount = boolean('noUnmount', false);
+  return (
+    <Modal
+      open={boolean('open', true)}
+      onClose={action('onClose')}
+      noUnmount={noUnmount}
+      heading={noUnmount ? 'noUnmount true, time will persist' : 'noUnmount false, time will reset'}
+    >
+      <Timer />
+    </Modal>
+  );
+};

src/components/Modal/Modal.tsx

@@ -47,6 +47,10 @@ export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
    * Modal does not have a max width.
    */
   fullWidth?: boolean;
+  /**
+   * Do not unmount the modal when it is closed.
+   */
+  noUnmount?: boolean;
   /**
    * Class for the outermost wrapper
    */
@@ -71,6 +75,7 @@ export const Modal: FC<ModalProps> = ({
   open,
   onClose,
   fullWidth,
+  noUnmount,
   wrapperClassName,
   closeLabel = 'Close',
   children,
@@ -82,6 +87,8 @@ export const Modal: FC<ModalProps> = ({
 }) => {
   const { mounted } = useUnmountDelay(open);
 
+  const unlocked = noUnmount && !mounted;
+
   const headingId = useMemo(() => getStringId('modal_heading'), []);
   const bodyId = useMemo(() => getStringId('modal_body'), []);
 
@@ -96,7 +103,7 @@ export const Modal: FC<ModalProps> = ({
     return;
   }, [closeOnEscape, onClose, open]);
 
-  const backgroundIsButton = !!(closeOnBackgroundClick && onClose);
+  const backgroundIsButton = !!(open && closeOnBackgroundClick && onClose);
 
   const modalWrapperClass = classnames(
     'ui__base ui__modal__wrapper',
@@ -107,7 +114,13 @@ export const Modal: FC<ModalProps> = ({
     wrapperClassName,
   );
 
-  const modalClass = classnames('ui__modal', className);
+  const modalClass = classnames(
+    'ui__modal',
+    {
+      'ui__modal--hidden': unlocked,
+    },
+    className,
+  );
 
   const bodyClass = classnames('ui__modal__body', {
     'ui__modal__body--noButton': !buttonGroup,
@@ -120,9 +133,9 @@ export const Modal: FC<ModalProps> = ({
         className={modalWrapperClass}
         onClick={backgroundIsButton ? onClose : undefined}
       >
-        {mounted ? (
+        {noUnmount || mounted ? (
           <div className="ui__modal__paddingFix">
-            <FocusTrap focusLastOnUnlock locked>
+            <FocusTrap focusLastOnUnlock locked={!unlocked}>
               <div
                 aria-labelledby={heading ? headingId : undefined}
                 aria-describedby={bodyId}

src/components/Modal/_Modal.scss

@@ -42,6 +42,10 @@
   overflow: hidden;
   width: 100%;
 
+  &--hidden {
+    display: none;
+  }
+
   &__top {
     display: flex;