[react] Fix typings for QuilttButton onLoad handler (#313)

* [react] Fix typings for QuilttButton onLoad handler

* Add changeset

* Fixes from code review

.changeset/olive-scissors-pretend.md

@@ -0,0 +1,7 @@
+---
+"@quiltt/react": patch
+"@quiltt/core": patch
+"@quiltt/react-native": patch
+---
+
+Update typings for QuilttButton onLoad handler

packages/react/src/components/QuilttButton.tsx

@@ -1,17 +1,30 @@
-import type { PropsWithChildren } from 'react'
+import type { MouseEvent, PropsWithChildren } from 'react'
 
 import type { ConnectorSDKCallbacks } from '@quiltt/core'
 
 import { useQuilttConnector } from '../hooks/useQuilttConnector'
 import type { AnyTag, PropsOf } from '../types'
 
+// Base button props without callback-specific properties
+type BaseQuilttButtonProps<T extends AnyTag> = {
+  as?: T
+  connectorId: string
+  connectionId?: string // For Reconnect Mode
+  institution?: string // For Connect Mode
+  // Override the native onClick handler
+  onClick?: (event: MouseEvent<HTMLElement>) => void
+}
+
+// Separate SDK callback types
+type QuilttCallbackProps = Omit<ConnectorSDKCallbacks, 'onLoad'> & {
+  // Separate the SDK onLoad from the HTML onLoad to avoid conflicts
+  onLoad?: ConnectorSDKCallbacks['onLoad'] // Handles SDK initialization
+  onHtmlLoad?: React.ReactEventHandler<HTMLElement> // Handles DOM element load
+}
+
+// Combined type for the full component
 type QuilttButtonProps<T extends AnyTag> = PropsWithChildren<
-  {
-    as?: T
-    connectorId: string
-    connectionId?: string // For Reconnect Mode
-    institution?: string // For Connect Mode
-  } & ConnectorSDKCallbacks
+  BaseQuilttButtonProps<T> & QuilttCallbackProps
 >
 
 export const QuilttButton = <T extends AnyTag = 'button'>({
@@ -26,6 +39,8 @@ export const QuilttButton = <T extends AnyTag = 'button'>({
   onExitSuccess,
   onExitAbort,
   onExitError,
+  onClick,
+  onHtmlLoad,
   children,
   ...props
 }: QuilttButtonProps<T> & PropsOf<T>) => {
@@ -43,8 +58,19 @@ export const QuilttButton = <T extends AnyTag = 'button'>({
 
   const Button = as || 'button'
 
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    // Call the user's onClick handler first to allow for:
+    // 1. Pre-open validation
+    // 2. Preventing opening via event.preventDefault()
+    // 3. Setting up state before connector opens
+    if (onClick) onClick(event)
+
+    // Then open the Quiltt connector
+    open()
+  }
+
   return (
-    <Button onClick={open} quiltt-connection={connectionId} {...props}>
+    <Button onClick={handleClick} onLoad={onHtmlLoad} quiltt-connection={connectionId} {...props}>
       {children}
     </Button>
   )

turbo.json

@@ -3,7 +3,7 @@
   "tasks": {
     "build": {
       "dependsOn": ["prebuild", "^build"],
-      "outputs": ["dist/**", ".next/**"]
+      "outputs": ["dist/**", ".next/**", "ios/**", "android/**"]
     },
     "clean": {
       "cache": false,