@juspay/svelte-ui-components 4.55.1 → 4.55.2

package/dist/TypewriterText/TypewriterText.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount, onDestroy, untrack } from 'svelte';
+  import { onDestroy, untrack } from 'svelte';
   import { prefersReducedMotion } from '../utils';
   import type { TypewriterTextProperties, TypewriterCharacterDelayRange } from './properties';
 
@@ -38,6 +38,7 @@
   let displayedText = $state('');
   let currentIndex = $state(0);
   let timeoutId = $state<ReturnType<typeof setTimeout> | null>(null);
+  let destroyed = false;
 
   // Where typing left off, so newly streamed-in text continues rather than restarts.
   let previousTextLength = $state(0);
@@ -114,6 +115,10 @@
   };
 
   const typeNextCharacter = (): void => {
+    if (destroyed) {
+      return;
+    }
+    timeoutId = null;
     // Typing IS the animation here, so a reduced-motion request has to suppress the
     // reveal itself rather than a transition around it: disclose the text instead.
     // `ChatController` already bypasses its own drain loop on this setting, and the two
@@ -135,6 +140,10 @@
       displayedText = text.substring(0, currentIndex + 1);
       currentIndex++;
       onprogress?.({ index: currentIndex, total: text.length, displayedText });
+      // A progress callback may synchronously remove its own component.
+      if (destroyed) {
+        return;
+      }
       timeoutId = setTimeout(
         typeNextCharacter,
         resolveTypingDelay(revealedCharacter, revealedCharacterIndex)
@@ -185,16 +194,11 @@
     }
   });
 
-  onMount(() => {
-    if (text.length > 0) {
-      previousTextLength = text.length;
-      typeNextCharacter();
-    }
-  });
-
   onDestroy(() => {
+    destroyed = true;
     if (timeoutId !== null) {
       clearTimeout(timeoutId);
+      timeoutId = null;
     }
   });
 </script>

package/dist-wc/index.js

@@ -53441,54 +53441,55 @@ function TypewriterText(e, t) {
 	function k() {
 		return C ??= Promise.resolve().then(() => (init_markdown(), markdown_exports)), C;
 	}
-	let R = /* @__PURE__ */ user_derived(() => o() === !0 ? k() : null), te = /* @__PURE__ */ user_derived(() => typeof s() == "object" && s() !== null && !Array.isArray(s()) ? s() : {}), ne = /* @__PURE__ */ state(""), G = /* @__PURE__ */ state(0), re = /* @__PURE__ */ state(null), be = /* @__PURE__ */ state(0), Me = /* @__PURE__ */ state(0), Re = new Set([" ", "\n"]), Ue = (e) => {
+	let R = /* @__PURE__ */ user_derived(() => o() === !0 ? k() : null), te = /* @__PURE__ */ user_derived(() => typeof s() == "object" && s() !== null && !Array.isArray(s()) ? s() : {}), ne = /* @__PURE__ */ state(""), G = /* @__PURE__ */ state(0), re = /* @__PURE__ */ state(null), be = !1, Me = /* @__PURE__ */ state(0), Re = /* @__PURE__ */ state(0), Ue = new Set([" ", "\n"]), it = (e) => {
 		let t = 0;
-		for (let n of e) Re.has(n) && (t += 1);
+		for (let n of e) Ue.has(n) && (t += 1);
 		return t;
-	}, it = new Set([
+	}, at = new Set([
 		",",
 		".",
 		"?",
 		"!"
-	]), at = /\d/, ot = (e) => e.min + Math.random() * (e.max - e.min), ct = (e, t) => typeof u() == "function" ? u()({
+	]), ot = /\d/, ct = (e) => e.min + Math.random() * (e.max - e.min), lt = (e, t) => typeof u() == "function" ? u()({
 		character: e,
 		index: t,
-		wordCount: get(Me)
-	}) : l() ? at.test(e) && l().digit ? ot(l().digit) : Re.has(e) && l().whitespace ? ot(l().whitespace) : it.has(e) && l().punctuation ? ot(l().punctuation) : l().default ? ot(l().default) : i() : i(), lt = () => {
+		wordCount: get(Re)
+	}) : l() ? ot.test(e) && l().digit ? ct(l().digit) : Ue.has(e) && l().whitespace ? ct(l().whitespace) : at.has(e) && l().punctuation ? ct(l().punctuation) : l().default ? ct(l().default) : i() : i(), ut = () => {
 		get(re) !== null && (clearTimeout(get(re)), set(re, null));
 		let e = get(G) < n().length;
-		set(ne, n(), !0), set(G, n().length, !0), set(Me, Ue(n()), !0), e && f()?.({
+		set(ne, n(), !0), set(G, n().length, !0), set(Re, it(n()), !0), e && f()?.({
 			index: get(G),
 			total: n().length,
 			displayedText: get(ne)
 		});
-	}, ut = () => {
-		if (prefersReducedMotion()) {
-			lt();
-			return;
-		}
-		if (get(G) < n().length) {
-			let e = n()[get(G)], t = get(G);
-			Re.has(e) && update(Me), set(ne, n().substring(0, get(G) + 1), !0), update(G), f()?.({
-				index: get(G),
-				total: n().length,
-				displayedText: get(ne)
-			}), set(re, setTimeout(ut, ct(e, t)), !0);
+	}, dt = () => {
+		if (!be) {
+			if (set(re, null), prefersReducedMotion()) {
+				ut();
+				return;
+			}
+			if (get(G) < n().length) {
+				let e = n()[get(G)], t = get(G);
+				if (Ue.has(e) && update(Re), set(ne, n().substring(0, get(G) + 1), !0), update(G), f()?.({
+					index: get(G),
+					total: n().length,
+					displayedText: get(ne)
+				}), be) return;
+				set(re, setTimeout(dt, lt(e, t)), !0);
+			}
 		}
 	};
 	user_effect(() => {
 		let e = n();
 		untrack(() => {
-			e.length >= get(be) && e.startsWith(get(ne)) || (get(re) !== null && (clearTimeout(get(re)), set(re, null)), set(ne, ""), set(G, 0), set(be, 0), set(Me, 0)), e.length > 0 && e.length > get(be) && (get(G) >= get(be) && (get(re) !== null && (clearTimeout(get(re)), set(re, null)), ut()), set(be, e.length, !0));
+			e.length >= get(Me) && e.startsWith(get(ne)) || (get(re) !== null && (clearTimeout(get(re)), set(re, null)), set(ne, ""), set(G, 0), set(Me, 0), set(Re, 0)), e.length > 0 && e.length > get(Me) && (get(G) >= get(Me) && (get(re) !== null && (clearTimeout(get(re)), set(re, null)), dt()), set(Me, e.length, !0));
 		});
 	}), user_effect(() => {
-		!a() && n().length > 0 && lt();
-	}), onMount(() => {
-		n().length > 0 && (set(be, n().length, !0), ut());
+		!a() && n().length > 0 && ut();
 	}), onDestroy(() => {
-		get(re) !== null && clearTimeout(get(re));
+		be = !0, get(re) !== null && (clearTimeout(get(re)), set(re, null));
 	});
-	var dt = {
+	var ft = {
 		get text() {
 			return n();
 		},
@@ -53561,9 +53562,9 @@ function TypewriterText(e, t) {
 		set classes(e) {
 			S(e), flushSync();
 		}
-	}, ft = root$16();
-	let pt;
-	var mt = child(ft), ht = (e) => {
+	}, pt = root$16();
+	let mt;
+	var ht = child(pt), gt = (e) => {
 		var t = comment();
 		await_block(first_child(t), () => get(R), (e) => {
 			var t = text();
@@ -53583,10 +53584,10 @@ function TypewriterText(e, t) {
 			var t = text();
 			template_effect(() => set_text(t, get(ne))), append(e, t);
 		}), append(e, t);
-	}, gt = (e) => {
+	}, _t = (e) => {
 		var t = comment();
 		html(first_child(t), () => c()(get(ne))), append(e, t);
-	}, _t = (e) => {
+	}, vt = (e) => {
 		var t = comment();
 		each(first_child(t), 17, () => get(ne).split(""), index, (e, t, n) => {
 			var i = comment();
@@ -53595,15 +53596,15 @@ function TypewriterText(e, t) {
 				index: n
 			})), append(e, i);
 		}), append(e, t);
-	}, vt = (e) => {
+	}, yt = (e) => {
 		var t = text();
 		template_effect(() => set_text(t, get(ne))), append(e, t);
 	};
-	return if_block(mt, (e) => {
-		o() === !0 ? e(ht) : typeof c() == "function" ? e(gt, 1) : p() ? e(_t, 2) : e(vt, -1);
-	}), reset(ft), template_effect(() => {
-		pt = set_class(ft, 1, `typewriter-text ${S() ?? "" ?? ""}`, "svelte-12jnsxo", pt, { plain: o() !== !0 && typeof c() != "function" }), set_attribute(ft, "data-pw", typeof h() == "string" ? h() : null), set_attribute(ft, "testid", typeof h() == "string" ? h() : null);
-	}), append(e, ft), pop(dt);
+	return if_block(ht, (e) => {
+		o() === !0 ? e(gt) : typeof c() == "function" ? e(_t, 1) : p() ? e(vt, 2) : e(yt, -1);
+	}), reset(pt), template_effect(() => {
+		mt = set_class(pt, 1, `typewriter-text ${S() ?? "" ?? ""}`, "svelte-12jnsxo", mt, { plain: o() !== !0 && typeof c() != "function" }), set_attribute(pt, "data-pw", typeof h() == "string" ? h() : null), set_attribute(pt, "testid", typeof h() == "string" ? h() : null);
+	}), append(e, pt), pop(ft);
 }
 create_custom_element(TypewriterText, {
 	text: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "4.55.1",
+  "version": "4.55.2",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",