From 2b0b640ff2058f1ea52b5b1d2799116bbcfb0918 Mon Sep 17 00:00:00 2001
From: fredzia <fredziaga@gmail.com>
Date: Wed, 29 Oct 2025 11:25:50 -0300
Subject: [PATCH 1/3] feat: add useEscapeClose hook for handling escape key
 events

---
 packages/shira-ui/src/hooks/index.ts          |  1 +
 .../shira-ui/src/hooks/useEscapeClose.tsx     | 29 +++++++++++++++++++
 packages/shira-ui/src/index.ts                |  1 +
 3 files changed, 31 insertions(+)
 create mode 100644 packages/shira-ui/src/hooks/index.ts
 create mode 100644 packages/shira-ui/src/hooks/useEscapeClose.tsx

diff --git a/packages/shira-ui/src/hooks/index.ts b/packages/shira-ui/src/hooks/index.ts
new file mode 100644
index 00000000..38beddf8
--- /dev/null
+++ b/packages/shira-ui/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useEscapeClose';
\ No newline at end of file
diff --git a/packages/shira-ui/src/hooks/useEscapeClose.tsx b/packages/shira-ui/src/hooks/useEscapeClose.tsx
new file mode 100644
index 00000000..d89c3fdc
--- /dev/null
+++ b/packages/shira-ui/src/hooks/useEscapeClose.tsx
@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+
+type UseEscapeCloseOptions = {
+  when: boolean;
+  onClose: () => void;
+  target?: Document | HTMLElement | Window | null;
+  stopPropagation?: boolean;
+};
+
+export function useEscapeClose({
+  when,
+  onClose,
+  target,
+  stopPropagation = true,
+}: UseEscapeCloseOptions) {
+  useEffect(() => {
+    if (!when || !target) return;
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" || e.key === "Esc") {
+        if (stopPropagation) e.stopPropagation();
+        onClose();
+      }
+    };
+
+    target.addEventListener("keydown", onKeyDown);
+    return () => target.removeEventListener("keydown", onKeyDown);
+  }, [when, onClose, target, stopPropagation]);
+}
diff --git a/packages/shira-ui/src/index.ts b/packages/shira-ui/src/index.ts
index a850ceb9..06713ebf 100644
--- a/packages/shira-ui/src/index.ts
+++ b/packages/shira-ui/src/index.ts
@@ -1,4 +1,5 @@
 // shira-ui/src/index.ts
 export * from './components'
 export * from './theme'
+export * from './hooks';
 export { default as styled, createGlobalStyle } from 'styled-components';
\ No newline at end of file

From d9e0d5eb617d2524dbbcb627b93b73db82c7a47d Mon Sep 17 00:00:00 2001
From: fredzia <fredziaga@gmail.com>
Date: Wed, 29 Oct 2025 11:26:29 -0300
Subject: [PATCH 2/3] feat: implement escape key handling for modal close
 functionality

---
 .../modals/CreateQuizModal/index.tsx          | 24 ++++++++++---------
 .../shira-ui/src/components/Modal/Modal.tsx   | 21 ++++++++++------
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/apps/spaces/src/components/modals/CreateQuizModal/index.tsx b/apps/spaces/src/components/modals/CreateQuizModal/index.tsx
index 2b91b3a6..0668757e 100644
--- a/apps/spaces/src/components/modals/CreateQuizModal/index.tsx
+++ b/apps/spaces/src/components/modals/CreateQuizModal/index.tsx
@@ -16,6 +16,11 @@ export const CreateQuizModal: FunctionComponent<Props> = ({
 
   const [title, handleTitle] = useState('')
 
+  const handleClose = () => {
+    setIsModalOpen(false);
+    handleTitle("");
+  };
+
   return (
     <Modal
       isOpen={isModalOpen}
@@ -26,19 +31,16 @@ export const CreateQuizModal: FunctionComponent<Props> = ({
       onPrimaryClick={() => {
         onCreate(title)
         setIsModalOpen(false);
-        handleTitle('')
-      }}
-      onSecondaryClick={() => {
-        setIsModalOpen(false)
-        handleTitle('')
       }}
+      onSecondaryClick={handleClose}
+      onClose={handleClose}
     >
-      <FormContent>        
-          <TextInput
-            label="Quiz name"
-            value={title}
-            onChange={(e) => handleTitle(e.target.value)}
-          />
+      <FormContent>
+        <TextInput
+          label="Quiz name"
+          value={title}
+          onChange={(e) => handleTitle(e.target.value)}
+        />
       </FormContent>
     </Modal>
   )
diff --git a/packages/shira-ui/src/components/Modal/Modal.tsx b/packages/shira-ui/src/components/Modal/Modal.tsx
index 75ea6da5..582103d3 100644
--- a/packages/shira-ui/src/components/Modal/Modal.tsx
+++ b/packages/shira-ui/src/components/Modal/Modal.tsx
@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { Button } from '../Button';
 import { SubHeading2 } from '../Typography';
+import { useEscapeClose } from '../../hooks/useEscapeClose';
 
 export interface ModalProps {
   isOpen: boolean;
@@ -17,6 +18,8 @@ export interface ModalProps {
   onLeftClick?: () => void
   leftButtonText?: string
   className?: string;
+
+  onClose?: () => void;
 }
 
 export enum ModalType {
@@ -29,7 +32,6 @@ const modalTypeColors = {
   'primary': '#849D29'
 }
 
-
 export const Modal: React.FC<ModalProps> = ({
   isOpen,
   title,
@@ -43,7 +45,8 @@ export const Modal: React.FC<ModalProps> = ({
   onLeftClick,
   leftButtonText,
   className,
-  type = 'primary'
+  type = 'primary',
+  onClose
 }) => {
 
   useEffect(() => {
@@ -58,6 +61,11 @@ export const Modal: React.FC<ModalProps> = ({
     };
   }, [isOpen]);
 
+  useEscapeClose({
+    when: isOpen,
+    onClose: onClose ?? onSecondaryClick ?? (() => { }),
+  });
+
   if (!isOpen) return null;
 
   return (
@@ -65,7 +73,7 @@ export const Modal: React.FC<ModalProps> = ({
       <Overlay>
         <ModalContainer className={className}>
           <Header>
-            { titleIcon }
+            {titleIcon}
             <SubHeading2>{title}</SubHeading2>
           </Header>
 
@@ -75,8 +83,8 @@ export const Modal: React.FC<ModalProps> = ({
 
           <Footer>
             <div>
-              { onLeftClick && (
-                <Button  
+              {onLeftClick && (
+                <Button
                   text={leftButtonText}
                   type='primary'
                   color={modalTypeColors[ModalType.Danger]}
@@ -85,7 +93,7 @@ export const Modal: React.FC<ModalProps> = ({
               )}
             </div>
             <div>
-              { onSecondaryClick && (
+              {onSecondaryClick && (
                 <Button
                   text={secondaryButtonText}
                   type="outline"
@@ -107,7 +115,6 @@ export const Modal: React.FC<ModalProps> = ({
   );
 };
 
-
 const Overlay = styled.div`
   position: fixed;
   top: 0;

From 4d0bc6cc9f81d795788845957f2147c0144b7a79 Mon Sep 17 00:00:00 2001
From: fredzia <fredziaga@gmail.com>
Date: Wed, 29 Oct 2025 12:55:34 -0300
Subject: [PATCH 3/3] feat: add useEnterSubmit hook for handling Enter key
 events in Modal

---
 .../shira-ui/src/components/Modal/Modal.tsx   |  7 +-
 packages/shira-ui/src/hooks/index.ts          |  3 +-
 .../shira-ui/src/hooks/useEnterSubmit.tsx     | 70 +++++++++++++++++++
 .../shira-ui/src/hooks/useEscapeClose.tsx     |  9 ++-
 4 files changed, 84 insertions(+), 5 deletions(-)
 create mode 100644 packages/shira-ui/src/hooks/useEnterSubmit.tsx

diff --git a/packages/shira-ui/src/components/Modal/Modal.tsx b/packages/shira-ui/src/components/Modal/Modal.tsx
index 582103d3..e8c1db2d 100644
--- a/packages/shira-ui/src/components/Modal/Modal.tsx
+++ b/packages/shira-ui/src/components/Modal/Modal.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { Button } from '../Button';
 import { SubHeading2 } from '../Typography';
-import { useEscapeClose } from '../../hooks/useEscapeClose';
+import { useEscapeClose, useEnterSubmit } from '../../hooks';
 
 export interface ModalProps {
   isOpen: boolean;
@@ -66,6 +66,11 @@ export const Modal: React.FC<ModalProps> = ({
     onClose: onClose ?? onSecondaryClick ?? (() => { }),
   });
 
+  useEnterSubmit({
+    when: isOpen,
+    onEnter: onPrimaryClick,
+  });
+
   if (!isOpen) return null;
 
   return (
diff --git a/packages/shira-ui/src/hooks/index.ts b/packages/shira-ui/src/hooks/index.ts
index 38beddf8..88bca6ce 100644
--- a/packages/shira-ui/src/hooks/index.ts
+++ b/packages/shira-ui/src/hooks/index.ts
@@ -1 +1,2 @@
-export * from './useEscapeClose';
\ No newline at end of file
+export * from './useEscapeClose';
+export * from './useEnterSubmit';
\ No newline at end of file
diff --git a/packages/shira-ui/src/hooks/useEnterSubmit.tsx b/packages/shira-ui/src/hooks/useEnterSubmit.tsx
new file mode 100644
index 00000000..35259be1
--- /dev/null
+++ b/packages/shira-ui/src/hooks/useEnterSubmit.tsx
@@ -0,0 +1,70 @@
+import { useEffect } from "react";
+
+type Options = {
+  when: boolean;
+  onEnter: () => void;
+  target?: Window | Document | HTMLElement | null;
+  preventDefault?: boolean;
+  stopPropagation?: boolean;
+  ignoreWhenTextarea?: boolean;
+  ignoreWithModifier?: boolean;
+};
+
+export function useEnterSubmit({
+  when,
+  onEnter,
+  target,
+  preventDefault = true,
+  stopPropagation = false,
+  ignoreWhenTextarea = true,
+  ignoreWithModifier = true,
+}: Options) {
+  useEffect(() => {
+    if (!when) return;
+
+    const t =
+      target ??
+      (typeof window !== "undefined"
+        ? window
+        : typeof document !== "undefined"
+          ? document
+          : null);
+
+    if (!t) return;
+
+    const handler = (e: KeyboardEvent) => {
+      if (e.isComposing) return;
+      if (ignoreWithModifier && (e.altKey || e.ctrlKey || e.metaKey)) return;
+      if (e.repeat) return;
+
+      const keyIsEnter =
+        e.key === "Enter" || e.code === "Enter" || e.key === "NumpadEnter";
+
+      if (!keyIsEnter) return;
+
+      const active = (document && document.activeElement) as HTMLElement | null;
+      if (
+        ignoreWhenTextarea &&
+        active &&
+        active.tagName === "TEXTAREA"
+      ) {
+        return;
+      }
+
+      if (preventDefault) e.preventDefault();
+      if (stopPropagation) e.stopPropagation();
+      onEnter();
+    };
+
+    t.addEventListener("keydown", handler);
+    return () => t.removeEventListener("keydown", handler);
+  }, [
+    when,
+    onEnter,
+    target,
+    preventDefault,
+    stopPropagation,
+    ignoreWhenTextarea,
+    ignoreWithModifier,
+  ]);
+}
diff --git a/packages/shira-ui/src/hooks/useEscapeClose.tsx b/packages/shira-ui/src/hooks/useEscapeClose.tsx
index d89c3fdc..e55d9349 100644
--- a/packages/shira-ui/src/hooks/useEscapeClose.tsx
+++ b/packages/shira-ui/src/hooks/useEscapeClose.tsx
@@ -14,7 +14,10 @@ export function useEscapeClose({
   stopPropagation = true,
 }: UseEscapeCloseOptions) {
   useEffect(() => {
-    if (!when || !target) return;
+    if (!when) return;
+
+    const t = target ?? (typeof document !== "undefined" ? document : null);
+    if (!t) return;
 
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape" || e.key === "Esc") {
@@ -23,7 +26,7 @@ export function useEscapeClose({
       }
     };
 
-    target.addEventListener("keydown", onKeyDown);
-    return () => target.removeEventListener("keydown", onKeyDown);
+    t.addEventListener("keydown", onKeyDown);
+    return () => t.removeEventListener("keydown", onKeyDown);
   }, [when, onClose, target, stopPropagation]);
 }