@ozura/elements 1.3.1-next.70 → 1.3.1-next.72

package/dist/react/index.cjs.js

@@ -2275,9 +2275,11 @@ const OzContext = react.createContext({
     notifyUnmount: () => { },
     notifyMount: () => { },
     notifyTokenize: () => { },
+    notifyChange: () => { },
     mountedCount: 0,
     readyCount: 0,
     tokenizeCount: 0,
+    changeTick: 0,
 });
 /**
  * Creates and owns an OzVault instance for the lifetime of this component.
@@ -2290,6 +2292,7 @@ function OzElements({ sessionUrl, getSessionKey, fetchWaxKey, pubKey, frameBaseU
     const [mountedCount, setMountedCount] = react.useState(0);
     const [readyCount, setReadyCount] = react.useState(0);
     const [tokenizeCount, setTokenizeCount] = react.useState(0);
+    const [changeTick, setChangeTick] = react.useState(0);
     const onLoadErrorRef = react.useRef(onLoadError);
     onLoadErrorRef.current = onLoadError;
     const onWaxRefreshRef = react.useRef(onSessionRefresh !== null && onSessionRefresh !== void 0 ? onSessionRefresh : onWaxRefresh);
@@ -2412,7 +2415,8 @@ function OzElements({ sessionUrl, getSessionKey, fetchWaxKey, pubKey, frameBaseU
         setReadyCount(n => Math.max(0, n - 1));
     }, []);
     const notifyTokenize = react.useCallback(() => setTokenizeCount(n => n + 1), []);
-    const value = react.useMemo(() => ({ vault, initError, notifyMount, notifyReady, notifyUnmount, notifyTokenize, mountedCount, readyCount, tokenizeCount }), [vault, initError, notifyMount, notifyReady, notifyUnmount, notifyTokenize, mountedCount, readyCount, tokenizeCount]);
+    const notifyChange = react.useCallback(() => setChangeTick(n => n + 1), []);
+    const value = react.useMemo(() => ({ vault, initError, notifyMount, notifyReady, notifyUnmount, notifyTokenize, notifyChange, mountedCount, readyCount, tokenizeCount, changeTick }), [vault, initError, notifyMount, notifyReady, notifyUnmount, notifyTokenize, notifyChange, mountedCount, readyCount, tokenizeCount, changeTick]);
     return jsxRuntime.jsx(OzContext.Provider, { value: value, children: children });
 }
 /**
@@ -2420,28 +2424,49 @@ function OzElements({ sessionUrl, getSessionKey, fetchWaxKey, pubKey, frameBaseU
  * an `<OzElements>` provider tree.
  */
 function useOzElements() {
-    const { vault, initError, mountedCount, readyCount, notifyTokenize, tokenizeCount } = react.useContext(OzContext);
+    var _a, _b;
+    const { vault, initError, mountedCount, readyCount, notifyTokenize, notifyChange, tokenizeCount } = react.useContext(OzContext);
     const createToken = react.useCallback(async (options) => {
         if (!vault) {
             return Promise.reject(new OzError('useOzElements must be called inside an <OzElements> provider.'));
         }
-        const result = await vault.createToken(options);
-        notifyTokenize();
-        return result;
-    }, [vault, notifyTokenize]);
+        // Start the call so vault._tokenizing flips synchronously, then notify so
+        // `isTokenizing` re-renders as `true`. Notify again on settle so it returns
+        // to `false`. (vault.isTokenizing is a plain getter — nothing else would
+        // trigger a render while the call is in flight.)
+        const promise = vault.createToken(options);
+        notifyChange();
+        try {
+            const result = await promise;
+            notifyTokenize();
+            return result;
+        }
+        finally {
+            notifyChange();
+        }
+    }, [vault, notifyTokenize, notifyChange]);
     const createBankToken = react.useCallback(async (options) => {
         if (!vault) {
             return Promise.reject(new OzError('useOzElements must be called inside an <OzElements> provider.'));
         }
-        const result = await vault.createBankToken(options);
-        notifyTokenize();
-        return result;
-    }, [vault, notifyTokenize]);
+        const promise = vault.createBankToken(options);
+        notifyChange();
+        try {
+            const result = await promise;
+            notifyTokenize();
+            return result;
+        }
+        finally {
+            notifyChange();
+        }
+    }, [vault, notifyTokenize, notifyChange]);
     const reset = react.useCallback(() => {
         vault === null || vault === void 0 ? void 0 : vault.reset();
     }, [vault]);
     const ready = vault !== null && vault.isReady && mountedCount > 0 && readyCount >= mountedCount;
-    return { createToken, createBankToken, reset, ready, initError, tokenizeCount };
+    const isComplete = (_a = vault === null || vault === void 0 ? void 0 : vault.isComplete) !== null && _a !== void 0 ? _a : false;
+    const isTokenizing = (_b = vault === null || vault === void 0 ? void 0 : vault.isTokenizing) !== null && _b !== void 0 ? _b : false;
+    return { createToken, createBankToken, reset, ready, initError, tokenizeCount, isComplete, isTokenizing };
 }
 const SKELETON_STYLE = {
     height: 46,
@@ -2476,7 +2501,7 @@ function OzFieldBase({ type, variant, style, placeholder, disabled, loadTimeoutM
     const elementRef = react.useRef(null);
     const [loaded, setLoaded] = react.useState(false);
     const [loadError, setLoadError] = react.useState(null);
-    const { vault, notifyMount, notifyReady, notifyUnmount } = react.useContext(OzContext);
+    const { vault, notifyMount, notifyReady, notifyUnmount, notifyChange } = react.useContext(OzContext);
     const onChangeRef = react.useRef(onChange);
     const onFocusRef = react.useRef(onFocus);
     const onBlurRef = react.useRef(onBlur);
@@ -2508,7 +2533,7 @@ function OzFieldBase({ type, variant, style, placeholder, disabled, loadTimeoutM
             notifyReady();
             (_a = onReadyRef.current) === null || _a === void 0 ? void 0 : _a.call(onReadyRef);
         });
-        element.on('change', (e) => { var _a; return (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, e); });
+        element.on('change', (e) => { var _a; (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, e); notifyChange(); });
         element.on('focus', () => { var _a; return (_a = onFocusRef.current) === null || _a === void 0 ? void 0 : _a.call(onFocusRef); });
         element.on('blur', () => { var _a; return (_a = onBlurRef.current) === null || _a === void 0 ? void 0 : _a.call(onBlurRef); });
         element.on('loaderror', (e) => {