@juspay/svelte-ui-components 4.6.0 → 4.8.0

package/dist/HITL/HITL.svelte

@@ -5,7 +5,13 @@
   import Card from '../Card/Card.svelte';
   import Progress from '../Progress/Progress.svelte';
   import { pauseAllConfirmationTimers } from './timers';
-  import type { HITLAction, HITLProperties, HITLResponse, HITLSection } from './properties';
+  import type {
+    HITLAction,
+    HITLExtraAction,
+    HITLProperties,
+    HITLResponse,
+    HITLSection
+  } from './properties';
 
   /**
    * Human-in-the-loop approval card: the assistant wants to run an action and the
@@ -43,6 +49,8 @@
     cancelTestId,
     completionTestId,
     completionTextTestId,
+    actions,
+    children,
     classes
   }: HITLProperties = $props();
 
@@ -180,6 +188,20 @@
     await decide(action);
   };
 
+  // An extra action (e.g. "Deny with instructions") is a side path, not a
+  // decision — it never settles the card, so `onconfirm` never fires for it.
+  // It still counts as interacting with the card: pause this card's own
+  // countdown and every sibling's, exactly like clicking confirm or cancel.
+  const selectExtraAction = (action: HITLExtraAction): void => {
+    if (decisionPending || isProcessing || isCompleted) {
+      return;
+    }
+    pauseAllConfirmationTimers.set(true);
+    stopCountdown();
+    clearAutoCancel();
+    action.onSelect();
+  };
+
   onMount(() => {
     if (isHistoryMode) {
       return;
@@ -375,6 +397,11 @@
           </span>
         </div>
       {:else}
+        {#if children}
+          <div class="extra-content">
+            {@render children()}
+          </div>
+        {/if}
         <div class="action-buttons">
           <div class="cancel-button">
             <Button
@@ -385,6 +412,19 @@
               onclick={() => interact('rejected')}
             />
           </div>
+          {#each actions ?? [] as action, index (action.testId ?? `${index}-${action.label}`)}
+            <div class="extra-action-button">
+              <Button
+                variant="secondary"
+                text={action.label}
+                enable={!isProcessing}
+                testId={action.testId ?? (testId && `${testId}-action-${index}`)}
+                classes={action.classes}
+                ariaLabel={action.ariaLabel}
+                onclick={() => selectExtraAction(action)}
+              />
+            </div>
+          {/each}
           <div class="confirm-button">
             {#if countdownActive}
               <div class="progress-anchor">
@@ -480,6 +520,13 @@
     text-transform: capitalize;
   }
 
+  /* Rendered only when `children` is supplied; the flex gap on
+     .confirmation-body already spaces it from the params above and the
+     action-buttons row below, so no default-behavior change when it's absent. */
+  .extra-content {
+    width: 100%;
+  }
+
   .action-buttons {
     display: flex;
     gap: var(--hitl-buttons-gap, 0.75rem);
@@ -487,7 +534,8 @@
   }
 
   .cancel-button,
-  .confirm-button {
+  .confirm-button,
+  .extra-action-button {
     flex: 1;
     position: relative;
     --button-width: 100%;

package/dist/HITL/properties.d.ts

@@ -15,6 +15,23 @@ export type HITLInitialState = {
     /** `'EXPIRED'` renders the timed-out completion state. */
     status?: string;
 };
+/**
+ * A side action rendered beside confirm/cancel — e.g. "Deny with instructions"
+ * opening a compose panel, or a third disposition a plain approve/reject can't
+ * express. Selecting one does NOT settle the card: no completion state, no
+ * `onconfirm`. It only pauses the countdown (own and siblings', like any other
+ * interaction) and calls `onSelect` — settling, if any, is the caller's job.
+ */
+export type HITLExtraAction = {
+    label: string;
+    onSelect: () => void;
+    /** `data-pw` for this action's button (default: `<testId>-action-<index>`). */
+    testId?: string;
+    /** Class string on this action's Button, e.g. to pick a variant. */
+    classes?: string;
+    /** Accessible name for this action's Button, when `label` alone isn't descriptive enough. */
+    ariaLabel?: string;
+};
 export type HITLProperties = OptionalHITLProperties & MandatoryHITLProperties;
 export type MandatoryHITLProperties = {
     confirmationId: string;
@@ -67,5 +84,16 @@ export type OptionalHITLProperties = {
     completionTestId?: string;
     /** Override the completion text's test id (default: `<testId>-completion-text`). */
     completionTextTestId?: string;
+    /**
+     * Extra side actions rendered between cancel and confirm — e.g. "Deny with
+     * instructions". None of these settle the card; see `HITLExtraAction`.
+     */
+    actions?: HITLExtraAction[];
+    /**
+     * Arbitrary extra controls — free-text input, multi-select chips — rendered
+     * in the body above the action row while the card is pending. Never shown
+     * once the card is completed or in history mode.
+     */
+    children?: Snippet;
     classes?: string;
 };

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 = {