Feat dismissible modal (#525)

* feat(modal): add dismissible prop (#497)

* feat(modal): close on Escape keydown functionality (#497)

Author: mortezasabihi

src/docs/pages/ModalPage.tsx

@@ -45,6 +45,36 @@ const ModalPage: FC = () => {
         </>
       ),
     },
+    {
+      title: 'Dismissable modal',
+      code: (
+        <>
+          <Button onClick={() => setOpenModal('dismissible')}>Toggle modal</Button>
+          <Modal dismissible show={openModal === 'dismissible'} onClose={() => setOpenModal(undefined)}>
+            <Modal.Header>Terms of Service</Modal.Header>
+            <Modal.Body>
+              <div className="space-y-6">
+                <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+                  With less than a month to go before the European Union enacts new consumer privacy laws for its
+                  citizens, companies around the world are updating their terms of service agreements to comply.
+                </p>
+                <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+                  The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is
+                  meant to ensure a common set of data rights in the European Union. It requires organizations to notify
+                  users as soon as possible of high-risk data breaches that could personally affect them.
+                </p>
+              </div>
+            </Modal.Body>
+            <Modal.Footer>
+              <Button onClick={() => setOpenModal(undefined)}>I accept</Button>
+              <Button color="gray" onClick={() => setOpenModal(undefined)}>
+                Decline
+              </Button>
+            </Modal.Footer>
+          </Modal>
+        </>
+      ),
+    },
     {
       title: 'Pop-up modal',
       code: (

src/lib/components/Modal/Modal.spec.tsx

@@ -34,6 +34,44 @@ describe('Components / Modal', () => {
     await waitFor(() => expect(root.childNodes.length).toBe(0));
   });
 
+  it('should be closed by clicking outside if the "dismissible" prop is passed.', async () => {
+    const root = document.createElement('div');
+    const user = userEvent.setup();
+
+    render(<TestModal root={root} dismissible />);
+
+    const openButton = screen.getByRole('button');
+
+    await user.click(openButton);
+
+    const modal = within(root).getByRole('dialog');
+
+    expect(modal).toHaveAttribute('aria-hidden', 'false');
+
+    await user.click(modal);
+
+    expect(modal).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('should be closed by Esc key press.', async () => {
+    const root = document.createElement('div');
+    const user = userEvent.setup();
+
+    render(<TestModal root={root} dismissible />);
+
+    const openButton = screen.getByRole('button');
+
+    await user.click(openButton);
+
+    const modal = within(root).getByRole('dialog');
+
+    expect(modal).toHaveAttribute('aria-hidden', 'false');
+
+    await user.keyboard('[Escape]');
+
+    expect(modal).toHaveAttribute('aria-hidden', 'true');
+  });
+
   describe('A11y', () => {
     it('should have `role="dialog"`', async () => {
       const user = userEvent.setup();
@@ -90,7 +128,7 @@ describe('Components / Modal', () => {
   });
 });
 
-const TestModal = ({ root }: Pick<ModalProps, 'root'>): JSX.Element => {
+const TestModal = ({ root, dismissible = false }: Pick<ModalProps, 'root' | 'dismissible'>): JSX.Element => {
   const [open, setOpen] = useState(false);
 
   const setInputRef = useCallback(
@@ -105,7 +143,7 @@ const TestModal = ({ root }: Pick<ModalProps, 'root'>): JSX.Element => {
   return (
     <>
       <Button onClick={() => setOpen(true)}>Toggle modal</Button>
-      <Modal root={root} show={open} onClose={() => setOpen(false)}>
+      <Modal dismissible={dismissible} root={root} show={open} onClose={() => setOpen(false)}>
         <Modal.Header>Terms of Service</Modal.Header>
         <Modal.Body>
           <div className="space-y-6">

src/lib/components/Modal/Modal.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
-import { ComponentProps, FC, PropsWithChildren, useEffect, useRef } from 'react';
+import { ComponentProps, FC, MouseEvent, PropsWithChildren, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
+import { useKeyDown } from '../../hooks';
 import type { FlowbiteBoolean, FlowbitePositions, FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 import { ModalBody } from './ModalBody';
@@ -51,6 +52,7 @@ export interface ModalProps extends PropsWithChildren<ComponentProps<'div'>> {
   root?: HTMLElement;
   show?: boolean;
   size?: keyof ModalSizes;
+  dismissible?: boolean;
 }
 
 const ModalComponent: FC<ModalProps> = ({
@@ -60,6 +62,7 @@ const ModalComponent: FC<ModalProps> = ({
   popup,
   size = '2xl',
   position = 'center',
+  dismissible = false,
   onClose,
   className,
   ...props
@@ -93,13 +96,26 @@ const ModalComponent: FC<ModalProps> = ({
     };
   }, []);
 
+  useKeyDown('Escape', () => {
+    if (dismissible && onClose) {
+      onClose();
+    }
+  });
+
+  const handleOnClick = (e: MouseEvent<HTMLDivElement>) => {
+    if (dismissible && e.target === e.currentTarget && onClose) {
+      onClose();
+    }
+  };
+
   return createPortal(
     <ModalContext.Provider value={{ popup, onClose }}>
       <div
         aria-hidden={!show}
         className={classNames(theme.base, theme.positions[position], show ? theme.show.on : theme.show.off, className)}
         data-testid="modal"
         role="dialog"
+        onClick={handleOnClick}
         {...props}
       >
         <div className={classNames(theme.content.base, theme.sizes[size])}>

src/lib/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useKeyDown } from './useKeyDown';

src/lib/hooks/useKeyDown.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+const useKeyDown = (key: string, callback: () => void) => {
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === key) {
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [key, callback]);
+};
+
+export default useKeyDown;