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

package/dist/react/index.esm.js

@@ -2273,9 +2273,11 @@ const OzContext = 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.
@@ -2288,6 +2290,7 @@ function OzElements({ sessionUrl, getSessionKey, fetchWaxKey, pubKey, frameBaseU
     const [mountedCount, setMountedCount] = useState(0);
     const [readyCount, setReadyCount] = useState(0);
     const [tokenizeCount, setTokenizeCount] = useState(0);
+    const [changeTick, setChangeTick] = useState(0);
     const onLoadErrorRef = useRef(onLoadError);
     onLoadErrorRef.current = onLoadError;
     const onWaxRefreshRef = useRef(onSessionRefresh !== null && onSessionRefresh !== void 0 ? onSessionRefresh : onWaxRefresh);
@@ -2410,7 +2413,8 @@ function OzElements({ sessionUrl, getSessionKey, fetchWaxKey, pubKey, frameBaseU
         setReadyCount(n => Math.max(0, n - 1));
     }, []);
     const notifyTokenize = useCallback(() => setTokenizeCount(n => n + 1), []);
-    const value = useMemo(() => ({ vault, initError, notifyMount, notifyReady, notifyUnmount, notifyTokenize, mountedCount, readyCount, tokenizeCount }), [vault, initError, notifyMount, notifyReady, notifyUnmount, notifyTokenize, mountedCount, readyCount, tokenizeCount]);
+    const notifyChange = useCallback(() => setChangeTick(n => n + 1), []);
+    const value = useMemo(() => ({ vault, initError, notifyMount, notifyReady, notifyUnmount, notifyTokenize, notifyChange, mountedCount, readyCount, tokenizeCount, changeTick }), [vault, initError, notifyMount, notifyReady, notifyUnmount, notifyTokenize, notifyChange, mountedCount, readyCount, tokenizeCount, changeTick]);
     return jsx(OzContext.Provider, { value: value, children: children });
 }
 /**
@@ -2419,23 +2423,41 @@ function OzElements({ sessionUrl, getSessionKey, fetchWaxKey, pubKey, frameBaseU
  */
 function useOzElements() {
     var _a, _b;
-    const { vault, initError, mountedCount, readyCount, notifyTokenize, tokenizeCount } = useContext(OzContext);
+    const { vault, initError, mountedCount, readyCount, notifyTokenize, notifyChange, tokenizeCount } = useContext(OzContext);
     const createToken = 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 = 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 = useCallback(() => {
         vault === null || vault === void 0 ? void 0 : vault.reset();
     }, [vault]);
@@ -2477,7 +2499,7 @@ function OzFieldBase({ type, variant, style, placeholder, disabled, loadTimeoutM
     const elementRef = useRef(null);
     const [loaded, setLoaded] = useState(false);
     const [loadError, setLoadError] = useState(null);
-    const { vault, notifyMount, notifyReady, notifyUnmount } = useContext(OzContext);
+    const { vault, notifyMount, notifyReady, notifyUnmount, notifyChange } = useContext(OzContext);
     const onChangeRef = useRef(onChange);
     const onFocusRef = useRef(onFocus);
     const onBlurRef = useRef(onBlur);
@@ -2509,7 +2531,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) => {