Press escape to close new modal

src/components/ui/modal/Modal.tsx

@@ -1,5 +1,13 @@
 import style from "./Modal.module.scss";
-import { createContext, JSXElement, Show, useContext } from "solid-js";
+import {
+  createContext,
+  createEffect,
+  JSXElement,
+  onCleanup,
+  onMount,
+  Show,
+  useContext,
+} from "solid-js";
 import Button, { ButtonProps } from "../Button";
 import Icon from "../icon/Icon";
 import { cn } from "@/common/classNames";
@@ -13,6 +21,10 @@ interface RootProps {
   children: JSXElement;
   close?: () => void;
   class?: string;
+  /**
+   @default true
+  */
+  closeOnEscape?: boolean;
 }
 const Root = (props: RootProps) => {
   const { isMobileWidth } = useWindowProperties();
@@ -21,6 +33,17 @@ const Root = (props: RootProps) => {
     if (event.target === event.currentTarget) props.close?.();
   };
 
+  onMount(() => {
+    const closeOnEscape = props.closeOnEscape ?? true;
+    if (!closeOnEscape) return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") props.close?.();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    onCleanup(() => document.removeEventListener("keydown", onKeyDown));
+  });
+
   return (
     <ModalContext.Provider value={{ close: props.close }}>
       <div