@quiltt/react 4.2.0 → 4.2.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @quiltt/react
 
+## 4.2.2
+
+### Patch Changes
+
+- [#352](https://github.com/quiltt/quiltt-js/pull/352) [`45b3b32`](https://github.com/quiltt/quiltt-js/commit/45b3b3270b69b95c9553e149e15870be4f43af3b) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Fix useQuilttInstitutions export
+
+- Updated dependencies [[`45b3b32`](https://github.com/quiltt/quiltt-js/commit/45b3b3270b69b95c9553e149e15870be4f43af3b)]:
+  - @quiltt/core@4.2.2
+
+## 4.2.1
+
+### Patch Changes
+
+- [#350](https://github.com/quiltt/quiltt-js/pull/350) [`0233592`](https://github.com/quiltt/quiltt-js/commit/02335928bb872a6588c2ca81a1bd9a081053bd29) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Bugfix: early return in effect prevents reconnect from being called
+
+- Updated dependencies [[`0233592`](https://github.com/quiltt/quiltt-js/commit/02335928bb872a6588c2ca81a1bd9a081053bd29)]:
+  - @quiltt/core@4.2.1
+
 ## 4.2.0
 
 ### Minor Changes

package/dist/{QuilttAuthProvider-client-DLARZukU.js → QuilttAuthProvider-client-C25Tg4_a.js}

@@ -4,9 +4,10 @@ import { JsonWebTokenParse, QuilttClient, InMemoryCache } from '@quiltt/core';
 import '@apollo/client/react/hooks/useApolloClient.js';
 import './QuilttSettings-client-BK-0SQME.js';
 import './useSession-client-CCAvnROP.js';
+import 'use-debounce';
 import { jsx } from 'react/jsx-runtime';
 import { ApolloProvider } from '@apollo/client/react/context/ApolloProvider.js';
-import { u as useQuilttSession } from './useQuilttSession-client-Ddb55W0n.js';
+import { u as useQuilttSession } from './useQuilttSession-client-DhsbThvI.js';
 
 const useIdentifySession = (auth, setSession)=>{
     const identifySession = useCallback(async (payload, callbacks)=>{

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Maybe, QuilttJWT, UsernamePayload, UnprocessableData, AuthAPI, PasscodePayload, ConnectorSDKConnectorOptions, ConnectorSDKCallbacks } from '@quiltt/core';
+import { Maybe, QuilttJWT, UsernamePayload, UnprocessableData, AuthAPI, PasscodePayload, ConnectorSDKConnectorOptions, InstitutionsData, ConnectorSDKCallbacks } from '@quiltt/core';
 export * from '@quiltt/core';
 import { RefObject, useEffect, Dispatch, SetStateAction, FC, PropsWithChildren, JSX, ComponentType, ElementType, MouseEvent } from 'react';
 import { useApolloClient } from '@apollo/client/react/hooks/useApolloClient.js';
@@ -66,6 +66,14 @@ declare const useQuilttConnector: (connectorId?: string, options?: ConnectorSDKC
     open: () => void;
 };
 
+type UseQuilttInstitutions = (connectorId: string, onErrorCallback?: (msg: string) => void) => {
+    searchTerm: string;
+    searchResults: InstitutionsData;
+    isSearching: boolean;
+    setSearchTerm: (term: string) => void;
+};
+declare const useQuilttInstitutions: UseQuilttInstitutions;
+
 type UseQuilttSession = (environmentId?: string) => {
     session: Maybe<QuilttJWT> | undefined;
     importSession: ImportSession;
@@ -176,5 +184,5 @@ type QuilttContainerProps<T extends ElementType> = PropsWithChildren<{
  */
 declare const QuilttContainer: <T extends ElementType = "div">({ as, connectorId, connectionId, forceRemountOnConnectionChange, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, children, ...props }: QuilttContainerProps<T> & PropsOf<T>) => react_jsx_runtime.JSX.Element;
 
-export { QuilttAuthProvider, QuilttButton, QuilttContainer, QuilttProvider, QuilttSettingsProvider, useAuthenticateSession, useEventListener, useIdentifySession, useImportSession, useIsomorphicLayoutEffect, useQuilttClient, useQuilttConnector, useQuilttSession, useQuilttSettings, useRevokeSession, useSession, useStorage };
-export type { AuthenticateSession, IdentifySession, ImportSession, RevokeSession, SetSession, UseQuilttSession };
+export { QuilttAuthProvider, QuilttButton, QuilttContainer, QuilttProvider, QuilttSettingsProvider, useAuthenticateSession, useEventListener, useIdentifySession, useImportSession, useIsomorphicLayoutEffect, useQuilttClient, useQuilttConnector, useQuilttInstitutions, useQuilttSession, useQuilttSettings, useRevokeSession, useSession, useStorage };
+export type { AuthenticateSession, IdentifySession, ImportSession, RevokeSession, SetSession, UseQuilttInstitutions, UseQuilttSession };

package/dist/index.js

@@ -1,11 +1,12 @@
 export * from '@quiltt/core';
 export { u as useEventListener } from './useEventListener-client-DVM5xwKY.js';
 export { u as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect-client-DeTHOKz1.js';
-import { Q as QuilttAuthProvider, i as isDeepEqual } from './QuilttAuthProvider-client-DLARZukU.js';
-export { b as useAuthenticateSession, a as useIdentifySession, u as useImportSession, c as useRevokeSession } from './QuilttAuthProvider-client-DLARZukU.js';
+import { Q as QuilttAuthProvider, i as isDeepEqual } from './QuilttAuthProvider-client-C25Tg4_a.js';
+export { b as useAuthenticateSession, a as useIdentifySession, u as useImportSession, c as useRevokeSession } from './QuilttAuthProvider-client-C25Tg4_a.js';
 export { u as useQuilttClient } from './useQuilttClient-client-CAAUait1.js';
-import { u as useQuilttConnector } from './useQuilttConnector-client-BK7ybRZe.js';
-export { u as useQuilttSession } from './useQuilttSession-client-Ddb55W0n.js';
+import { u as useQuilttConnector } from './useQuilttConnector-client-BwpjuFHf.js';
+export { u as useQuilttInstitutions } from './useQuilttInstitutions-client-CdmGK6Wv.js';
+export { u as useQuilttSession } from './useQuilttSession-client-DhsbThvI.js';
 export { u as useQuilttSettings } from './useQuilttSettings-client-BOCBjFXe.js';
 export { u as useSession } from './useSession-client-CCAvnROP.js';
 export { u as useStorage } from './useStorage-client-DHcq3Kuh.js';

package/dist/{useQuilttConnector-client-BK7ybRZe.js → useQuilttConnector-client-BwpjuFHf.js}

@@ -1,10 +1,10 @@
 'use client';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { cdnBase } from '@quiltt/core';
-import { u as useQuilttSession } from './useQuilttSession-client-Ddb55W0n.js';
+import { u as useQuilttSession } from './useQuilttSession-client-DhsbThvI.js';
 import { u as useScript } from './useScript-client-JCgaTW9n.js';
 
-var version = "4.2.0";
+var version = "4.2.2";
 
 const useQuilttConnector = (connectorId, options)=>{
     const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`, {
@@ -20,50 +20,42 @@ const useQuilttConnector = (connectorId, options)=>{
     const prevConnectorIdRef = useRef(connectorId);
     const connectorCreatedRef = useRef(false);
     // Set Session
+    // biome-ignore lint/correctness/useExhaustiveDependencies: trigger effects when script status changes too
     useEffect(()=>{
         if (typeof Quiltt === 'undefined') return;
-        console.debug('[Quiltt] script status: ', status);
         Quiltt.authenticate(session?.token);
     }, [
         status,
         session?.token
     ]);
     // Set Connector
+    // biome-ignore lint/correctness/useExhaustiveDependencies: trigger effects when script status changes too
     useEffect(()=>{
         if (typeof Quiltt === 'undefined' || !connectorId) return;
-        console.debug('[Quiltt] script status: ', status);
         const currentConnectionId = options?.connectionId;
         const currentInstitution = options?.institution;
-        // Check if this is a connectionId change on the same connector
+        // Check for changes
         const connectionIdChanged = prevConnectionIdRef.current !== currentConnectionId;
         const connectorIdChanged = prevConnectorIdRef.current !== connectorId;
-        // If only connectionId changed (not the connectorId), the core SDK should handle this
-        // via the updated Handler.updateOptions method, so we don't need to recreate the connector
-        if (connectionIdChanged && !connectorIdChanged && connectorCreatedRef.current) {
-            // The SDK will automatically update the existing handler with new connectionId
-            // via the DocumentObserver -> Engine.onChange -> Handler.updateOptions flow
-            console.debug('[Quiltt] connectionId changed, SDK will handle update automatically');
-            // Update our refs
-            prevConnectionIdRef.current = currentConnectionId;
-            return;
-        }
-        // Only create new connector if we haven't created one yet or if connectorId changed
-        if (!connectorCreatedRef.current || connectorIdChanged) {
-            // Create new connector (initial mount or connectorId changed)
+        const hasChanges = connectionIdChanged || connectorIdChanged || !connectorCreatedRef.current;
+        // Update if there are changes, regardless of what the changes are
+        if (hasChanges) {
             if (currentConnectionId) {
+                // Always use reconnect when connectionId is available
                 setConnector(Quiltt.reconnect(connectorId, {
                     connectionId: currentConnectionId
                 }));
             } else {
+                // Use connect for new connections without connectionId
                 setConnector(Quiltt.connect(connectorId, {
                     institution: currentInstitution
                 }));
             }
+            // Update refs
             connectorCreatedRef.current = true;
+            prevConnectionIdRef.current = currentConnectionId;
+            prevConnectorIdRef.current = connectorId;
         }
-        // Update refs
-        prevConnectionIdRef.current = currentConnectionId;
-        prevConnectorIdRef.current = connectorId;
     }, [
         connectorId,
         options?.connectionId,
@@ -158,4 +150,4 @@ const useQuilttConnector = (connectorId, options)=>{
     };
 };
 
-export { useQuilttConnector as u };
+export { useQuilttConnector as u, version as v };

package/dist/useQuilttInstitutions-client-CdmGK6Wv.js

@@ -0,0 +1,89 @@
+'use client';
+import { useMemo, useState, useCallback, useEffect } from 'react';
+import { useDebounce } from 'use-debounce';
+import { InstitutionsAPI } from '@quiltt/core';
+import { v as version } from './useQuilttConnector-client-BwpjuFHf.js';
+import { u as useSession } from './useSession-client-CCAvnROP.js';
+
+const useQuilttInstitutions = (connectorId, onErrorCallback)=>{
+    const agent = useMemo(()=>{
+        // Try deprecated navigator.product first (still used in some RN versions)
+        if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
+            return `react-native-${version}`;
+        }
+        // Detect React Native by its unique environment characteristics
+        const isReactNative = !!// Has window (unlike Node.js)
+        (typeof window !== 'undefined' && // No document in window (unlike browsers)
+        typeof window.document === 'undefined' && // Has navigator (unlike Node.js)
+        typeof navigator !== 'undefined');
+        return isReactNative ? `react-native-${version}` : `react-${version}`;
+    }, []);
+    const institutionsAPI = useMemo(()=>new InstitutionsAPI(connectorId, agent), [
+        connectorId,
+        agent
+    ]);
+    const [session] = useSession();
+    const [searchTermInput, setSearchTermInput] = useState('');
+    const [searchTerm] = useDebounce(searchTermInput, 350);
+    const [searchResults, setSearchResults] = useState([]);
+    const [isSearching, setIsSearching] = useState(false);
+    /**
+   * Start Search
+   * This function is used to initiate a search for institutions based on the provided term with
+   * a minimum length of 2 characters. Debouncing is applied to avoid excessive API calls.
+   */ const startSearch = useCallback((term)=>{
+        if (term.trim().length < 2) {
+            setSearchResults([]);
+            setIsSearching(false);
+            return;
+        }
+        setIsSearching(true);
+        setSearchTermInput(term);
+    }, []);
+    const handleError = useCallback((message)=>{
+        const errorMessage = message || 'Unknown error occurred while searching institutions';
+        console.error('Quiltt Institutions Search Error:', errorMessage);
+        if (onErrorCallback) onErrorCallback(errorMessage);
+    }, [
+        onErrorCallback
+    ]);
+    /**
+   * Run Search
+   * This effect will run when the searchTerm changes and is at least 2 characters long.
+   */ useEffect(()=>{
+        if (!session?.token || !connectorId || !searchTerm || searchTerm.trim().length < 2) {
+            return;
+        }
+        const abortController = new AbortController();
+        institutionsAPI.search(session?.token, connectorId, searchTerm, abortController.signal).then((response)=>{
+            if (!abortController.signal.aborted) {
+                if (response.status === 200) {
+                    setSearchResults(response.data);
+                } else {
+                    handleError(response.data.message || 'Failed to fetch institutions');
+                }
+                setIsSearching(false);
+            }
+        }).catch((error)=>{
+            if (!abortController.signal.aborted) {
+                handleError(error.message);
+                setIsSearching(false);
+            }
+        });
+        return ()=>abortController.abort();
+    }, [
+        session?.token,
+        connectorId,
+        searchTerm,
+        institutionsAPI,
+        handleError
+    ]);
+    return {
+        searchTerm,
+        searchResults,
+        isSearching,
+        setSearchTerm: startSearch
+    };
+};
+
+export { useQuilttInstitutions as u };

package/dist/{useQuilttSession-client-Ddb55W0n.js → useQuilttSession-client-DhsbThvI.js}

@@ -1,7 +1,7 @@
 'use client';
 import { useCallback } from 'react';
 import { AuthAPI } from '@quiltt/core';
-import { u as useImportSession, a as useIdentifySession, b as useAuthenticateSession, c as useRevokeSession } from './QuilttAuthProvider-client-DLARZukU.js';
+import { u as useImportSession, a as useIdentifySession, b as useAuthenticateSession, c as useRevokeSession } from './QuilttAuthProvider-client-C25Tg4_a.js';
 import { u as useQuilttSettings } from './useQuilttSettings-client-BOCBjFXe.js';
 import { u as useSession } from './useSession-client-CCAvnROP.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react",
-  "version": "4.2.0",
+  "version": "4.2.2",
   "description": "React Components and Hooks for Quiltt Connector",
   "keywords": [
     "quiltt",
@@ -36,18 +36,18 @@
   "dependencies": {
     "@apollo/client": "^3.12.4",
     "use-debounce": "^10.0.4",
-    "@quiltt/core": "4.2.0"
+    "@quiltt/core": "4.2.2"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@types/node": "22.14.1",
+    "@types/node": "22.15.31",
     "@types/react": "18.3.20",
     "@types/react-dom": "18.3.5",
     "bunchee": "6.3.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "6.0.1",
-    "typescript": "5.8.2"
+    "typescript": "5.8.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",

package/src/hooks/index.ts

@@ -2,6 +2,7 @@ export * from './helpers'
 export * from './session'
 export * from './useQuilttClient'
 export * from './useQuilttConnector'
+export * from './useQuilttInstitutions'
 export * from './useQuilttSession'
 export * from './useQuilttSettings'
 export * from './useSession'

package/src/hooks/useQuilttConnector.ts

@@ -36,52 +36,41 @@ export const useQuilttConnector = (
   const connectorCreatedRef = useRef<boolean>(false)
 
   // Set Session
+  // biome-ignore lint/correctness/useExhaustiveDependencies: trigger effects when script status changes too
   useEffect(() => {
     if (typeof Quiltt === 'undefined') return
-    console.debug('[Quiltt] script status: ', status)
 
     Quiltt.authenticate(session?.token)
   }, [status, session?.token])
 
   // Set Connector
+  // biome-ignore lint/correctness/useExhaustiveDependencies: trigger effects when script status changes too
   useEffect(() => {
     if (typeof Quiltt === 'undefined' || !connectorId) return
-    console.debug('[Quiltt] script status: ', status)
 
     const currentConnectionId = options?.connectionId
     const currentInstitution = options?.institution
 
-    // Check if this is a connectionId change on the same connector
+    // Check for changes
     const connectionIdChanged = prevConnectionIdRef.current !== currentConnectionId
     const connectorIdChanged = prevConnectorIdRef.current !== connectorId
+    const hasChanges = connectionIdChanged || connectorIdChanged || !connectorCreatedRef.current
 
-    // If only connectionId changed (not the connectorId), the core SDK should handle this
-    // via the updated Handler.updateOptions method, so we don't need to recreate the connector
-    if (connectionIdChanged && !connectorIdChanged && connectorCreatedRef.current) {
-      // The SDK will automatically update the existing handler with new connectionId
-      // via the DocumentObserver -> Engine.onChange -> Handler.updateOptions flow
-      console.debug('[Quiltt] connectionId changed, SDK will handle update automatically')
-
-      // Update our refs
-      prevConnectionIdRef.current = currentConnectionId
-      return
-    }
-
-    // Only create new connector if we haven't created one yet or if connectorId changed
-    if (!connectorCreatedRef.current || connectorIdChanged) {
-      // Create new connector (initial mount or connectorId changed)
+    // Update if there are changes, regardless of what the changes are
+    if (hasChanges) {
       if (currentConnectionId) {
+        // Always use reconnect when connectionId is available
         setConnector(Quiltt.reconnect(connectorId, { connectionId: currentConnectionId }))
       } else {
+        // Use connect for new connections without connectionId
         setConnector(Quiltt.connect(connectorId, { institution: currentInstitution }))
       }
 
+      // Update refs
       connectorCreatedRef.current = true
+      prevConnectionIdRef.current = currentConnectionId
+      prevConnectorIdRef.current = connectorId
     }
-
-    // Update refs
-    prevConnectionIdRef.current = currentConnectionId
-    prevConnectorIdRef.current = connectorId
   }, [connectorId, options?.connectionId, options?.institution, status])
 
   // onEvent

package/src/hooks/useQuilttInstitutions.ts

@@ -7,7 +7,7 @@ import { useDebounce } from 'use-debounce'
 import { InstitutionsAPI } from '@quiltt/core'
 import type { ErrorData, InstitutionsData } from '@quiltt/core'
 
-import { version } from '@/version'
+import { version } from '../version'
 import useSession from './useSession'
 
 export type UseQuilttInstitutions = (