Modal Upgrades

components/ui/Modal/Modal.module.css

@@ -4,7 +4,7 @@
 }
 
 .modal {
-  @apply bg-primary p-12 border border-accents-2;
+  @apply bg-primary p-12 border border-accents-2 relative;
 }
 
 .modal:focus {

components/ui/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef, useEffect } from 'react'
+import { FC, useRef, useEffect, useCallback } from 'react'
 import Portal from '@reach/portal'
 import s from './Modal.module.css'
 import { Cross } from '@components/icons'
@@ -7,26 +7,37 @@ import {
   enableBodyScroll,
   clearAllBodyScrollLocks,
 } from 'body-scroll-lock'
-
+import FocusTrap from 'focus-trap-react'
 interface Props {
   className?: string
   children?: any
   open?: boolean
   onClose: () => void
+  onEnter?: () => void | null
 }
 
-const Modal: FC<Props> = ({ children, open, onClose }) => {
+// Todo: Drag focus to component
+
+const Modal: FC<Props> = ({ children, open, onClose, onEnter = null }) => {
   const ref = useRef() as React.MutableRefObject<HTMLDivElement>
 
+  const handleKey = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Escape') {
+      return onClose()
+    }
+  }
+
   useEffect(() => {
     if (ref.current) {
       if (open) {
         disableBodyScroll(ref.current)
+        window.addEventListener('keydown', handleKey)
       } else {
         enableBodyScroll(ref.current)
       }
     }
     return () => {
+      window.removeEventListener('keydown', handleKey)
       clearAllBodyScrollLocks()
     }
   }, [open])
@@ -34,20 +45,21 @@ const Modal: FC<Props> = ({ children, open, onClose }) => {
   return (
     <Portal>
       {open ? (
-        <div className={s.root} ref={ref}>
-          <div className={s.modal}>
-            <div className="h-7 flex items-center justify-end w-full">
+        <FocusTrap>
+          <div className={s.root} ref={ref}>
+            <div className={s.modal}>
               <button
                 onClick={() => onClose()}
                 aria-label="Close panel"
-                className="hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none"
+                className="hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none absolute right-0 top-0 m-6"
               >
                 <Cross className="h-6 w-6" />
               </button>
+
+              <div>{children}</div>
             </div>
-            {children}
           </div>
-        </div>
+        </FocusTrap>
       ) : null}
     </Portal>
   )

package.json

@@ -52,6 +52,7 @@
     "bowser": "^2.11.0",
     "classnames": "^2.2.6",
     "email-validator": "^2.0.4",
+    "focus-trap-react": "^8.3.2",
     "js-cookie": "^2.2.1",
     "keen-slider": "^5.2.4",
     "lodash.random": "^3.2.0",

yarn.lock

@@ -2047,6 +2047,20 @@ flatten@^1.0.2:
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
   integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
 
+focus-trap-react@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-8.3.2.tgz#b319888b57c7d7e63ce9f5c9a3b687df64c03369"
+  integrity sha512-sy4zUjlyC2szBejQ9RVf6WCeA+9fWbxrK6fo+jnrMvfiP5rbuzuK6461V6Q7YsEsHwZolVL3AthlfFfIvZrPwg==
+  dependencies:
+    focus-trap "^6.2.2"
+
+focus-trap@^6.2.2:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-6.2.3.tgz#1f1443063f08241020d4ffb269bab9847ada97b7"
+  integrity sha512-87orNbj6UqKEDxmqDfYBDLBbqgxNIA5cXUBvHCt7dZ8/L0KTuzkjKoI0xXHU+5TyI9fImqfOJyvEkXYmZeClZA==
+  dependencies:
+    tabbable "^5.1.4"
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -4463,6 +4477,11 @@ swr@0.3.6:
   dependencies:
     dequal "2.0.2"
 
+tabbable@^5.1.4:
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.1.5.tgz#efec48ede268d511c261e3b81facbb4782a35147"
+  integrity sha512-oVAPrWgLLqrbvQE8XqcU7CVBq6SQbaIbHkhOca3u7/jzuQvyZycrUKPCGr04qpEIUslmUlULbSeN+m3QrKEykA==
+
 tailwindcss@^1.9:
   version "1.9.6"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.9.6.tgz#0c5089911d24e1e98e592a31bfdb3d8f34ecf1a0"