@juspay/svelte-ui-components 4.7.0 → 4.8.0

package/dist/Snippet/Snippet.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+  import { onDestroy } from 'svelte';
   import type { SnippetProperties } from './properties';
   import Button from '../Button/Button.svelte';
   import copySvg from '../assets/copy.svg?raw';
+  import { createCopyResetTimer } from './copyResetTimer';
 
   let {
     text,
@@ -9,20 +11,31 @@
     showCopyButton = true,
     testId,
     copyIcon,
+    copiedLabel = 'Copied!',
+    copyResetMs = 2000,
     oncopy,
     classes
   }: SnippetProperties = $props();
 
   let copied = $state(false);
 
+  // The reset timer used to be a bare setTimeout with nothing clearing it: a
+  // second copy before the first one's timer fired left two timers racing to
+  // flip `copied`, and navigating away mid-flash left the timer armed against
+  // a destroyed component. `createCopyResetTimer` (unit-tested on its own in
+  // copyResetTimer.test.ts) guarantees only one timer is ever pending, and
+  // onDestroy guarantees it never outlives the component it targets.
+  const resetTimer = createCopyResetTimer();
+  onDestroy(resetTimer.cancel);
+
   async function handleCopy() {
     try {
       await navigator.clipboard.writeText(text);
       copied = true;
       oncopy?.();
-      setTimeout(() => {
+      resetTimer.arm(() => {
         copied = false;
-      }, 2000);
+      }, copyResetMs);
     } catch {
       // Clipboard API unavailable (non-secure context, iframe restrictions)
     }
@@ -42,7 +55,7 @@
     <div class="snippet-copy">
       <Button onclick={handleCopy} ariaLabel="Copy to clipboard">
         {#if copied}
-          <span class="snippet-copied">Copied!</span>
+          <span class="snippet-copied" aria-live="polite">{copiedLabel}</span>
         {:else if typeof copyIcon === 'function'}
           {@render copyIcon()}
         {:else}

package/dist/Snippet/copyResetTimer.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Manages the single "revert the copied-feedback flag" timer behind Snippet's
+ * copy button (#530). Extracted as a plain, Svelte-free module so the timer
+ * safety this fixes -- never leaving two timers racing after a fast double
+ * copy, never firing against a component that has already unmounted -- is
+ * unit-testable on its own, the same way `Tooltip/tooltip-action.ts` keeps
+ * its DOM-timing logic outside the component.
+ */
+export type CopyResetTimer = {
+    /**
+     * (Re)arms the timer: clears any timer already pending, then schedules
+     * `onReset` to run after `delayMs`.
+     */
+    arm: (onReset: () => void, delayMs: number) => void;
+    /**
+     * Cancels a pending timer, if any. Safe to call when nothing is pending --
+     * this is what Snippet calls from `onDestroy`.
+     */
+    cancel: () => void;
+};
+export declare function createCopyResetTimer(): CopyResetTimer;

package/dist/Snippet/copyResetTimer.js

@@ -0,0 +1,20 @@
+export function createCopyResetTimer() {
+    let handle = null;
+    return {
+        arm(onReset, delayMs) {
+            if (handle !== null) {
+                clearTimeout(handle);
+            }
+            handle = setTimeout(() => {
+                handle = null;
+                onReset();
+            }, delayMs);
+        },
+        cancel() {
+            if (handle !== null) {
+                clearTimeout(handle);
+                handle = null;
+            }
+        }
+    };
+}

package/dist/Snippet/properties.d.ts

@@ -8,6 +8,10 @@ export type OptionalSnippetProperties = {
     showCopyButton?: boolean;
     testId?: string;
     copyIcon?: Snippet;
+    /** Text shown in place of the copy icon after a successful copy. Defaults to `'Copied!'`. */
+    copiedLabel?: string;
+    /** Milliseconds before the copied feedback reverts to the copy icon. Defaults to `2000`. */
+    copyResetMs?: number;
     classes?: string;
 };
 export type SnippetEventProperties = {

package/dist-wc/index.js

@@ -17671,21 +17671,40 @@ customElements.define("sui-sheet", create_custom_element(Sheet_wc, {
 }, ["default", "footer"], [], { mode: "open" }));
 //#endregion
 //#region src/lib/assets/copy.svg?raw
-var copy_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect>\n  <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path>\n</svg>\n", root$30 = /* @__PURE__ */ from_html("<span class=\"snippet-copied svelte-ql5iye\">Copied!</span>"), root_1$27 = /* @__PURE__ */ from_html("<span class=\"snippet-copy-icon svelte-ql5iye\"></span>"), root_2$21 = /* @__PURE__ */ from_html("<div class=\"snippet-copy svelte-ql5iye\"><!></div>"), root_3$19 = /* @__PURE__ */ from_html("<div><code class=\"snippet-code svelte-ql5iye\"><span class=\"snippet-prompt svelte-ql5iye\"> </span> <span class=\"snippet-text svelte-ql5iye\"> </span></code> <!></div>"), $$css$32 = {
+var copy_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect>\n  <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path>\n</svg>\n";
+//#endregion
+//#region src/lib/Snippet/copyResetTimer.ts
+function createCopyResetTimer() {
+	let e = null;
+	return {
+		arm(t, n) {
+			e !== null && clearTimeout(e), e = setTimeout(() => {
+				e = null, t();
+			}, n);
+		},
+		cancel() {
+			e !== null && (clearTimeout(e), e = null);
+		}
+	};
+}
+//#endregion
+//#region src/lib/Snippet/Snippet.svelte
+var root$30 = /* @__PURE__ */ from_html("<span class=\"snippet-copied svelte-ql5iye\" aria-live=\"polite\"> </span>"), root_1$27 = /* @__PURE__ */ from_html("<span class=\"snippet-copy-icon svelte-ql5iye\"></span>"), root_2$21 = /* @__PURE__ */ from_html("<div class=\"snippet-copy svelte-ql5iye\"><!></div>"), root_3$19 = /* @__PURE__ */ from_html("<div><code class=\"snippet-code svelte-ql5iye\"><span class=\"snippet-prompt svelte-ql5iye\"> </span> <span class=\"snippet-text svelte-ql5iye\"> </span></code> <!></div>"), $$css$32 = {
 	hash: "svelte-ql5iye",
 	code: ".snippet.svelte-ql5iye {display:flex;align-items:center;justify-content:space-between;gap:var(--snippet-gap, 8px);background:var(--snippet-background, #1e1e1e);border:var(--snippet-border, 1px solid #333);border-radius:var(--snippet-border-radius, var(--radius, 4px));padding:var(--snippet-padding, 12px 16px);font-family:var(--snippet-font-family, monospace);font-size:var(--snippet-font-size, 14px);color:var(--snippet-color, #e0e0e0);margin:var(--snippet-margin, 0);}.snippet-code.svelte-ql5iye {display:flex;align-items:center;overflow:hidden;flex:1;min-width:0;}.snippet-prompt.svelte-ql5iye {color:var(--snippet-prompt-color, #888);margin-right:var(--snippet-prompt-margin-right, 8px);flex-shrink:0;}.snippet-text.svelte-ql5iye {color:var(--snippet-text-color, #e0e0e0);font-family:var(--snippet-text-font-family, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.snippet-copy.svelte-ql5iye {--button-color: var(--snippet-copy-background, transparent);--button-text-color: var(--snippet-copy-color, #888);--button-border: var(--snippet-copy-border, none);--button-padding: var(--snippet-copy-padding, 4px);--button-border-radius: var(--snippet-copy-border-radius, var(--radius, 4px));--cursor: var(--snippet-copy-cursor, pointer);--button-hover-color: var(--snippet-copy-hover-background, #333);display:flex;align-items:center;justify-content:center;flex-shrink:0;}.snippet-copy-icon.svelte-ql5iye {display:inline-flex;align-items:center;justify-content:center;width:var(--snippet-copy-size, 16px);height:var(--snippet-copy-size, 16px);}.snippet-copy-icon.svelte-ql5iye svg {width:100%;height:100%;}.snippet-copied.svelte-ql5iye {color:var(--snippet-copied-color, #4caf50);font-size:var(--snippet-copied-font-size, 12px);font-family:var(--snippet-font-family, monospace);}"
 };
 function Snippet(e, t) {
 	push(t, !0), append_styles$1(e, $$css$32);
-	let n = prop(t, "text", 7), i = prop(t, "prompt", 7, "$"), a = prop(t, "showCopyButton", 7, !0), o = prop(t, "testId", 7), s = prop(t, "copyIcon", 7), c = prop(t, "oncopy", 7), l = prop(t, "classes", 7), u = /* @__PURE__ */ state(!1);
-	async function f() {
+	let n = prop(t, "text", 7), i = prop(t, "prompt", 7, "$"), a = prop(t, "showCopyButton", 7, !0), o = prop(t, "testId", 7), s = prop(t, "copyIcon", 7), c = prop(t, "copiedLabel", 7, "Copied!"), l = prop(t, "copyResetMs", 7, 2e3), u = prop(t, "oncopy", 7), f = prop(t, "classes", 7), p = /* @__PURE__ */ state(!1), h = createCopyResetTimer();
+	onDestroy(h.cancel);
+	async function S() {
 		try {
-			await navigator.clipboard.writeText(n()), set(u, !0), c()?.(), setTimeout(() => {
-				set(u, !1);
-			}, 2e3);
+			await navigator.clipboard.writeText(n()), set(p, !0), u()?.(), h.arm(() => {
+				set(p, !1);
+			}, l());
 		} catch {}
 	}
-	var p = {
+	var C = {
 		get text() {
 			return n();
 		},
@@ -17716,49 +17735,62 @@ function Snippet(e, t) {
 		set copyIcon(e) {
 			s(e), flushSync();
 		},
-		get oncopy() {
+		get copiedLabel() {
 			return c();
 		},
-		set oncopy(e) {
+		set copiedLabel(e = "Copied!") {
 			c(e), flushSync();
 		},
-		get classes() {
+		get copyResetMs() {
 			return l();
 		},
-		set classes(e) {
+		set copyResetMs(e = 2e3) {
 			l(e), flushSync();
+		},
+		get oncopy() {
+			return u();
+		},
+		set oncopy(e) {
+			u(e), flushSync();
+		},
+		get classes() {
+			return f();
+		},
+		set classes(e) {
+			f(e), flushSync();
 		}
-	}, h = root_3$19(), S = child(h), C = child(S), k = child(C, !0);
-	reset(C);
-	var R = sibling(C, 2), te = child(R, !0);
-	reset(R), reset(S);
-	var ne = sibling(S, 2), re = (e) => {
+	}, k = root_3$19(), R = child(k), te = child(R), ne = child(te, !0);
+	reset(te);
+	var re = sibling(te, 2), G = child(re, !0);
+	reset(re), reset(R);
+	var be = sibling(R, 2), Me = (e) => {
 		var t = root_2$21();
 		Button(child(t), {
-			onclick: f,
+			onclick: S,
 			ariaLabel: "Copy to clipboard",
 			children: (e, t) => {
 				var n = comment(), i = first_child(n), a = (e) => {
-					append(e, root$30());
+					var t = root$30(), n = child(t, !0);
+					reset(t), template_effect(() => set_text(n, c())), append(e, t);
 				}, o = (e) => {
 					var t = comment();
 					snippet(first_child(t), s), append(e, t);
-				}, c = (e) => {
+				}, l = (e) => {
 					var t = root_1$27();
 					html(t, () => copy_default, !0), reset(t), append(e, t);
 				};
 				if_block(i, (e) => {
-					get(u) ? e(a) : typeof s() == "function" ? e(o, 1) : e(c, -1);
+					get(p) ? e(a) : typeof s() == "function" ? e(o, 1) : e(l, -1);
 				}), append(e, n);
 			},
 			$$slots: { default: !0 }
 		}), reset(t), append(e, t);
 	};
-	return if_block(ne, (e) => {
-		a() && e(re);
-	}), reset(h), template_effect(() => {
-		set_class(h, 1, `snippet ${l() ?? "" ?? ""}`, "svelte-ql5iye"), set_attribute(h, "data-pw", typeof o() == "string" ? o() : null), set_attribute(h, "testid", typeof o() == "string" ? o() : null), set_text(k, i()), set_text(te, n());
-	}), append(e, h), pop(p);
+	return if_block(be, (e) => {
+		a() && e(Me);
+	}), reset(k), template_effect(() => {
+		set_class(k, 1, `snippet ${f() ?? "" ?? ""}`, "svelte-ql5iye"), set_attribute(k, "data-pw", typeof o() == "string" ? o() : null), set_attribute(k, "testid", typeof o() == "string" ? o() : null), set_text(ne, i()), set_text(G, n());
+	}), append(e, k), pop(C);
 }
 create_custom_element(Snippet, {
 	text: {},
@@ -17766,6 +17798,8 @@ create_custom_element(Snippet, {
 	showCopyButton: {},
 	testId: {},
 	copyIcon: {},
+	copiedLabel: {},
+	copyResetMs: {},
 	oncopy: {},
 	classes: {}
 }, [], [], { mode: "open" });
@@ -17805,6 +17839,16 @@ customElements.define("sui-snippet", create_custom_element(Snippet_wc, {
 		attribute: "test-id",
 		type: "String"
 	},
+	copiedLabel: {
+		attribute: "copied-label",
+		reflect: !0,
+		type: "String"
+	},
+	copyResetMs: {
+		attribute: "copy-reset-ms",
+		reflect: !0,
+		type: "Number"
+	},
 	classes: { type: "String" },
 	oncopy: { type: "Object" },
 	copyIcon: { type: "Object" }

package/package.json

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