added onAttemptClose handler to Modal

0xsequence · Dec 14, 2023 · d086446 · d086446
1 parent 36a0cea
commit d086446
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
@@ -21,7 +21,17 @@ const StoryWrapper: StoryFn<typeof Modal> = args => {
     <>
       <Button label="Open Modal" onClick={() => toggleModal(!isOpen)} />
       <AnimatePresence>
-        {isOpen && <Modal {...args} onClose={() => toggleModal(false)} />}
+        {isOpen && (
+          <Modal
+            {...args}
+            onClose={() => {
+              toggleModal(false)
+            }}
+            onAttemptClose={() => {
+              console.log('onAttemptClose')
+            }}
+          />
+        )}
       </AnimatePresence>
     </>
   )

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -19,6 +19,7 @@ export type ModalProps = {
   disableAnimation?: boolean
   isDismissible?: boolean
   onClose?: () => void
+  onAttemptClose?: () => void
   scroll?: boolean
   overlayProps?: MotionProps
   contentProps?: MotionProps
@@ -34,6 +35,7 @@ export const Modal = (props: PropsWithChildren<ModalProps>) => {
     disableAnimation = false,
     isDismissible = true,
     onClose,
+    onAttemptClose,
     scroll = true,
     size = 'lg',
     overlayProps,
@@ -71,6 +73,8 @@ export const Modal = (props: PropsWithChildren<ModalProps>) => {
             className={styles.contentVariants({ autoHeight, size })}
             forceMount
             onEscapeKeyDown={ev => {
+              onAttemptClose?.()
+
               if (isDismissible) {
                 onClose?.()
               } else {
@@ -82,6 +86,9 @@ export const Modal = (props: PropsWithChildren<ModalProps>) => {
                 ev.preventDefault()
               }
             }}
+            onPointerDownOutside={_ => {
+              onAttemptClose?.()
+            }}
           >
             <motion.div
               key="modal-content"
@@ -113,6 +120,9 @@ export const Modal = (props: PropsWithChildren<ModalProps>) => {
                     size="xs"
                     className={styles.close}
                     aria-label="Close"
+                    onClick={() => {
+                      onAttemptClose?.()
+                    }}
                   />
                 </ModalPrimitive.Close>
               )}