@quiltt/react 3.9.7 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @quiltt/react
 
+## 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
+
+- [#333](https://github.com/quiltt/quiltt-js/pull/333) [`5afca4a`](https://github.com/quiltt/quiltt-js/commit/5afca4a45f357afbb7f6af02088f86230f351e18) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Migrate to 'Navigate' message for URL handling
+
+### Patch Changes
+
+- Updated dependencies [[`5afca4a`](https://github.com/quiltt/quiltt-js/commit/5afca4a45f357afbb7f6af02088f86230f351e18)]:
+  - @quiltt/core@4.0.0
+
 ## 3.9.7
 
 ### Patch 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-CUeWVNqS.js';
+import { u as useQuilttConnector } from './useQuilttConnector-client-sRplTzek.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-CUeWVNqS.js → useQuilttConnector-client-sRplTzek.js}

@@ -2,12 +2,14 @@
 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 = "3.9.7";
+var version = "4.0.1";
 
 const useQuilttConnector = (connectorId, options)=>{
-    const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`);
+    const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`, {
+        nonce: options?.nonce
+    });
     const { session } = useQuilttSession();
     const [connector, setConnector] = useState();
     const [isOpening, setIsOpening] = useState(false);

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": "3.9.7",
+  "version": "4.0.1",
   "description": "React Components and Hooks for Quiltt Connector",
   "keywords": [
     "quiltt",
@@ -35,18 +35,18 @@
   "main": "dist/index.js",
   "dependencies": {
     "@apollo/client": "^3.12.4",
-    "@quiltt/core": "3.9.7"
+    "@quiltt/core": "4.0.1"
   },
   "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,7 +19,9 @@ export const useQuilttConnector = (
   connectorId?: string,
   options?: ConnectorSDKConnectorOptions
 ) => {
-  const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`)
+  const status = useScript(`${cdnBase}/v1/connector.js?agent=react-${version}`, {
+    nonce: options?.nonce,
+  })
   const { session } = useQuilttSession()
   const [connector, setConnector] = useState<ConnectorSDKConnector>()
   const [isOpening, setIsOpening] = useState<boolean>(false)

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
 }