From 1fc695685c331dbce5b37e8522658ec8f5f7e5f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Teixeira?= <joao@indielayer.com>
Date: Tue, 26 Mar 2024 12:00:02 +0000
Subject: [PATCH] fix(modal): center align and arrow navigation (#63)

---
 .changeset/tough-terms-allow.md               |  5 ++++
 packages/ui/src/components/form/Form.vue      |  2 +-
 packages/ui/src/components/modal/Modal.vue    |  1 +
 .../modal/theme/Modal.base.theme.ts           |  2 +-
 packages/ui/src/composables/useFocusTrap.ts   | 23 -------------------
 5 files changed, 8 insertions(+), 25 deletions(-)
 create mode 100644 .changeset/tough-terms-allow.md

diff --git a/.changeset/tough-terms-allow.md b/.changeset/tough-terms-allow.md
new file mode 100644
index 00000000..1d11650b
--- /dev/null
+++ b/.changeset/tough-terms-allow.md
@@ -0,0 +1,5 @@
+---
+"@indielayer/ui": patch
+---
+
+fix(modal): center align and arrow navigation
diff --git a/packages/ui/src/components/form/Form.vue b/packages/ui/src/components/form/Form.vue
index a274553a..14db42bb 100644
--- a/packages/ui/src/components/form/Form.vue
+++ b/packages/ui/src/components/form/Form.vue
@@ -145,7 +145,7 @@ const { styles, classes, className } = useTheme('Form', {}, props)
       </div>
     </slot>
 
-    <fieldset :disabled="disabled" :class="classes.content">
+    <fieldset :disabled="disabled" :class="classes.content" class="contents">
       <slot></slot>
     </fieldset>
 
diff --git a/packages/ui/src/components/modal/Modal.vue b/packages/ui/src/components/modal/Modal.vue
index 7ea0a2ff..efff8a1a 100644
--- a/packages/ui/src/components/modal/Modal.vue
+++ b/packages/ui/src/components/modal/Modal.vue
@@ -188,6 +188,7 @@ defineExpose({ open, close })
         <component
           :is="isForm ? XForm : 'div'"
           ref="modalRef"
+          class="max-h-full"
           :disabled="formDisabled"
           :auto-validate="formAutoValidate"
           :title="formTitle"
diff --git a/packages/ui/src/components/modal/theme/Modal.base.theme.ts b/packages/ui/src/components/modal/theme/Modal.base.theme.ts
index 5d607691..6e9c8c9d 100644
--- a/packages/ui/src/components/modal/theme/Modal.base.theme.ts
+++ b/packages/ui/src/components/modal/theme/Modal.base.theme.ts
@@ -18,7 +18,7 @@ const theme: ModalTheme = {
 
       if (props.position === 'top') classes.push('items-start')
       else if (props.position === 'bottom') classes.push('items-end')
-      else classes.push('sm:items-end items-center')
+      else classes.push('items-end sm:items-center')
 
       return classes
     },
diff --git a/packages/ui/src/composables/useFocusTrap.ts b/packages/ui/src/composables/useFocusTrap.ts
index ea2699e4..925f3376 100644
--- a/packages/ui/src/composables/useFocusTrap.ts
+++ b/packages/ui/src/composables/useFocusTrap.ts
@@ -64,29 +64,6 @@ export function useFocusTrap() {
         lastEl?.focus()
       }
 
-    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
-      event.preventDefault()
-      const currentEl = document.activeElement as HTMLElement
-      const index = focusable.indexOf(currentEl)
-      const previousEl = focusable[index - 1]
-
-      if (previousEl) {
-        previousEl.focus()
-      } else if (lastFocusableEl) {
-        lastFocusableEl.focus()
-      }
-
-    } else if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
-      event.preventDefault()
-      const currentEl = document.activeElement as HTMLElement
-      const index = focusable.indexOf(currentEl)
-      const nextElement = focusable[index + 1]
-
-      if (nextElement) {
-        nextElement.focus()
-      } else if (firstFocusableEl) {
-        firstFocusableEl.focus()
-      }
     }
   }