@rpg-engine/long-bow 0.8.58 → 0.8.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.58",
+  "version": "0.8.60",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/ConfirmModal.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useCallback } from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 import ModalPortal from './Abstractions/ModalPortal';
 import { Button, ButtonTypes } from './Button';
@@ -23,33 +23,48 @@ export const ConfirmModal: React.FC<IConfirmModalProps> = ({
   onClose,
   message = 'Are you sure?',
 }) => {
-  // Add a small delay to prevent accidental closes
-  const handleConfirm = (e: React.MouseEvent | React.TouchEvent) => {
-    e.preventDefault();
+  const handleConfirm = useCallback(
+    (e: React.PointerEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onConfirm();
+    },
+    [onConfirm]
+  );
+
+  const handleClose = useCallback(
+    (e: React.PointerEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onClose();
+    },
+    [onClose]
+  );
+
+  // Fix type issues by separating event handlers for different event types
+  const stopPropagationClick = useCallback((e: React.MouseEvent) => {
     e.stopPropagation();
-    onConfirm();
-  };
+  }, []);
 
-  const handleClose = (e: React.MouseEvent | React.TouchEvent) => {
-    e.preventDefault();
+  const stopPropagationTouch = useCallback((e: React.TouchEvent) => {
     e.stopPropagation();
-    onClose();
-  };
+  }, []);
 
-  const stopPropagation = (e: React.MouseEvent | React.TouchEvent) => {
+  const stopPropagationPointer = useCallback((e: React.PointerEvent) => {
     e.stopPropagation();
-  };
+  }, []);
 
   return (
     <ModalPortal>
       <GlobalStyle />
-      <Overlay onClick={handleClose} />
+      <Overlay onPointerDown={handleClose} />
       <ModalContainer>
         <ModalContent
-          onClick={stopPropagation}
-          onTouchStart={stopPropagation}
-          onTouchEnd={stopPropagation}
-          onTouchMove={stopPropagation}
+          onClick={stopPropagationClick}
+          onTouchStart={stopPropagationTouch}
+          onTouchEnd={stopPropagationTouch}
+          onTouchMove={stopPropagationTouch}
+          onPointerDown={stopPropagationPointer}
         >
           <MessageContainer>
             {typeof message === 'string' ? (
@@ -63,14 +78,14 @@ export const ConfirmModal: React.FC<IConfirmModalProps> = ({
             <CancelButtonWrapper>
               <Button
                 buttonType={ButtonTypes.RPGUIButton}
-                onClick={handleClose}
+                onPointerDown={handleClose}
               >
                 No
               </Button>
             </CancelButtonWrapper>
             <Button
               buttonType={ButtonTypes.RPGUIButton}
-              onClick={handleConfirm}
+              onPointerDown={handleConfirm}
             >
               Yes
             </Button>