@quiltt/react 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @quiltt/react
 
+## 4.1.0
+
+### Minor Changes
+
+- [#342](https://github.com/quiltt/quiltt-js/pull/342) [`6a387ba`](https://github.com/quiltt/quiltt-js/commit/6a387ba0db77912df85c6cd1924f63edf50f9cdd) Thanks [@sirwolfgang](https://github.com/sirwolfgang)! - Create useQuilttInstitutions hook
+
+### Patch Changes
+
+- Updated dependencies [[`6a387ba`](https://github.com/quiltt/quiltt-js/commit/6a387ba0db77912df85c6cd1924f63edf50f9cdd)]:
+  - @quiltt/core@4.1.0
+
+## 4.0.1
+
+### Patch Changes
+
+- [#343](https://github.com/quiltt/quiltt-js/pull/343) [`da152b7`](https://github.com/quiltt/quiltt-js/commit/da152b7f42606defde5f55488632bcdc095be592) Thanks [@sirwolfgang](https://github.com/sirwolfgang)! - Add the ability to set nonce for the Quiltt SDK Script
+
+- Updated dependencies [[`da152b7`](https://github.com/quiltt/quiltt-js/commit/da152b7f42606defde5f55488632bcdc095be592)]:
+  - @quiltt/core@4.0.1
+
 ## 4.0.0
 
 ### Major Changes

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Maybe, QuilttJWT, UsernamePayload, UnprocessableData, AuthAPI, PasscodePayload, ConnectorSDKConnectorOptions, ConnectorSDKCallbacks } from '@quiltt/core';
 export * from '@quiltt/core';
-import { RefObject, useLayoutEffect, Dispatch, SetStateAction, FC, PropsWithChildren, JSX, ComponentType, ElementType, MouseEvent } from 'react';
+import { RefObject, useEffect, Dispatch, SetStateAction, FC, PropsWithChildren, JSX, ComponentType, ElementType, MouseEvent } from 'react';
 import { useApolloClient } from '@apollo/client/react/hooks/useApolloClient.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -13,7 +13,7 @@ declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K
  * This hook is a browser hook. But React code could be generated from the server without the Window API.
  * This hook switches between useEffect and useLayoutEffect following the execution environment.
  */
-declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+declare const useIsomorphicLayoutEffect: typeof useEffect;
 
 type SetSession = Dispatch<SetStateAction<Maybe<string> | undefined>>;
 /**
@@ -153,4 +153,5 @@ type QuilttContainerProps<T extends ElementType> = PropsWithChildren<{
  */
 declare const QuilttContainer: <T extends ElementType = "div">({ as, connectorId, connectionId, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, children, ...props }: QuilttContainerProps<T> & PropsOf<T>) => react_jsx_runtime.JSX.Element;
 
-export { type AuthenticateSession, type IdentifySession, type ImportSession, QuilttAuthProvider, QuilttButton, QuilttContainer, QuilttProvider, QuilttSettingsProvider, type RevokeSession, type SetSession, type UseQuilttSession, useAuthenticateSession, useEventListener, useIdentifySession, useImportSession, useIsomorphicLayoutEffect, useQuilttClient, useQuilttConnector, useQuilttSession, useQuilttSettings, useRevokeSession, useSession, useStorage };
+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 };

package/dist/index.js

@@ -4,7 +4,7 @@ export { u as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect-clie
 import { Q as QuilttAuthProvider } from './QuilttAuthProvider-client-CER-TOln.js';
 export { b as useAuthenticateSession, a as useIdentifySession, u as useImportSession, c as useRevokeSession } from './QuilttAuthProvider-client-CER-TOln.js';
 export { u as useQuilttClient } from './useQuilttClient-client-CAAUait1.js';
-import { u as useQuilttConnector } from './useQuilttConnector-client-CGhW0L-V.js';
+import { u as useQuilttConnector } from './useQuilttConnector-client-BB7kw8vs.js';
 export { u as useQuilttSession } from './useQuilttSession-client-D2mjVT4S.js';
 export { u as useQuilttSettings } from './useQuilttSettings-client-BOCBjFXe.js';
 export { u as useSession } from './useSession-client-CCAvnROP.js';
@@ -26,6 +26,7 @@ const QuilttButton = ({ as, connectorId, connectionId, institution, onEvent, onO
     const { open } = useQuilttConnector(connectorId, {
         connectionId,
         institution,
+        nonce: props?.nonce,
         onEvent,
         onOpen,
         onLoad,
@@ -58,6 +59,7 @@ const QuilttButton = ({ as, connectorId, connectionId, institution, onEvent, onO
  * one Container at a time.
  */ const QuilttContainer = ({ as, connectorId, connectionId, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, children, ...props })=>{
     useQuilttConnector(connectorId, {
+        nonce: props?.nonce,
         onEvent,
         onLoad,
         onExit,

package/dist/{useQuilttConnector-client-CGhW0L-V.js → useQuilttConnector-client-BB7kw8vs.js}

@@ -2,13 +2,17 @@
 import { useState, useEffect, useCallback } from 'react';
 import { cdnBase } from '@quiltt/core';
 import { u as useQuilttSession } from './useQuilttSession-client-D2mjVT4S.js';
-import { u as useScript } from './useScript-client-CWRBlZBC.js';
+import { u as useScript } from './useScript-client-JCgaTW9n.js';
 
-var version = "4.0.0";
+var version = "4.1.0";
 
 const useQuilttConnector = (connectorId, options)=>{
-    const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`);
-    const { session } = useQuilttSession();
+    const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`, {
+        nonce: options?.nonce
+    });
+    // This ensures we're not destructuring `session` before the script has loaded
+    const useQuilttSessionReturn = useQuilttSession();
+    const session = useQuilttSessionReturn?.session || null;
     const [connector, setConnector] = useState();
     const [isOpening, setIsOpening] = useState(false);
     // Set Session

package/dist/{useScript-client-CWRBlZBC.js → useScript-client-JCgaTW9n.js}

@@ -42,6 +42,9 @@ function useScript(src, options) {
             scriptNode = document.createElement('script');
             scriptNode.src = src;
             scriptNode.async = true;
+            if (options?.nonce && options.nonce.trim() !== '') {
+                scriptNode.nonce = options.nonce;
+            }
             scriptNode.setAttribute('data-status', 'loading');
             document.body.appendChild(scriptNode);
             // Store status in attribute on script
@@ -73,10 +76,14 @@ function useScript(src, options) {
                 scriptNode.removeEventListener('load', setStateFromEvent);
                 scriptNode.removeEventListener('error', setStateFromEvent);
             }
+            if (scriptNode && options?.removeOnUnmount) {
+                scriptNode.remove();
+            }
         };
     }, [
         src,
         options?.shouldPreventLoad,
+        options?.nonce,
         options?.removeOnUnmount
     ]);
     return status;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "React Components and Hooks for Quiltt Connector",
   "keywords": [
     "quiltt",
@@ -35,18 +35,19 @@
   "main": "dist/index.js",
   "dependencies": {
     "@apollo/client": "^3.12.4",
-    "@quiltt/core": "4.0.0"
+    "use-debounce": "^10.0.4",
+    "@quiltt/core": "4.1.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@types/node": "22.13.10",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/node": "22.14.1",
+    "@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.7.3"
+    "typescript": "5.8.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",

package/src/components/QuilttButton.tsx

@@ -47,6 +47,7 @@ export const QuilttButton = <T extends ElementType = 'button'>({
   const { open } = useQuilttConnector(connectorId, {
     connectionId,
     institution,
+    nonce: props?.nonce, // Pass nonce for script loading if needed
     onEvent,
     onOpen,
     onLoad,

package/src/components/QuilttContainer.tsx

@@ -31,6 +31,7 @@ export const QuilttContainer = <T extends ElementType = 'div'>({
   ...props
 }: QuilttContainerProps<T> & PropsOf<T>) => {
   useQuilttConnector(connectorId, {
+    nonce: props?.nonce, // Pass nonce for script loading if needed
     onEvent,
     onLoad,
     onExit,

package/src/hooks/useQuilttConnector.ts

@@ -19,8 +19,14 @@ export const useQuilttConnector = (
   connectorId?: string,
   options?: ConnectorSDKConnectorOptions
 ) => {
-  const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`)
-  const { session } = useQuilttSession()
+  const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`, {
+    nonce: options?.nonce,
+  })
+
+  // This ensures we're not destructuring `session` before the script has loaded
+  const useQuilttSessionReturn = useQuilttSession()
+  const session = useQuilttSessionReturn?.session || null
+
   const [connector, setConnector] = useState<ConnectorSDKConnector>()
   const [isOpening, setIsOpening] = useState<boolean>(false)
 

package/src/hooks/useQuilttInstitutions.ts

@@ -0,0 +1,124 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+import { useDebounce } from 'use-debounce'
+
+import { InstitutionsAPI } from '@quiltt/core'
+import type { ErrorData, InstitutionsData } from '@quiltt/core'
+
+import { version } from '@/version'
+import useSession from './useSession'
+
+export type UseQuilttInstitutions = (
+  connectorId: string,
+  onErrorCallback?: (msg: string) => void
+) => {
+  searchTerm: string
+  searchResults: InstitutionsData
+  isSearching: boolean
+  setSearchTerm: (term: string) => void
+}
+
+export const useQuilttInstitutions: 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<InstitutionsData>([])
+
+  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: string) => {
+    if (term.trim().length < 2) {
+      setSearchResults([])
+      setIsSearching(false)
+      return
+    }
+
+    setIsSearching(true)
+    setSearchTermInput(term)
+  }, [])
+
+  const handleError = useCallback(
+    (message: string) => {
+      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 as InstitutionsData)
+          } else {
+            handleError((response.data as ErrorData).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 default useQuilttInstitutions

package/src/hooks/useScript.ts

@@ -6,6 +6,7 @@ export type UseScriptStatus = 'idle' | 'loading' | 'ready' | 'error'
 export interface UseScriptOptions {
   shouldPreventLoad?: boolean
   removeOnUnmount?: boolean
+  nonce?: string
 }
 
 // Cached script statuses
@@ -58,6 +59,9 @@ export function useScript(src: string | null, options?: UseScriptOptions): UseSc
       scriptNode = document.createElement('script')
       scriptNode.src = src
       scriptNode.async = true
+      if (options?.nonce && options.nonce.trim() !== '') {
+        scriptNode.nonce = options.nonce
+      }
       scriptNode.setAttribute('data-status', 'loading')
       document.body.appendChild(scriptNode)
 
@@ -100,7 +104,7 @@ export function useScript(src: string | null, options?: UseScriptOptions): UseSc
         scriptNode.remove()
       }
     }
-  }, [src, options?.shouldPreventLoad, options?.removeOnUnmount])
+  }, [src, options?.shouldPreventLoad, options?.nonce, options?.removeOnUnmount])
 
   return status
 }