@juspay/svelte-ui-components 4.5.0 → 4.7.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/KeyboardInput/KeyboardInput.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
   import type { KeyboardInputProperties } from './properties';
 
-  let { keys, separator = '+', testId, onclick, classes }: KeyboardInputProperties = $props();
+  let {
+    keys,
+    separator = '+',
+    testId,
+    onclick,
+    classes,
+    literal = false
+  }: KeyboardInputProperties = $props();
 
   const KEY_SYMBOLS: Record<string, string> = {
     cmd: '\u2318',
@@ -28,6 +35,9 @@
   let interactive = $derived(typeof onclick === 'function');
 
   function getSymbol(key: string): string {
+    if (literal) {
+      return key;
+    }
     return KEY_SYMBOLS[key.toLowerCase()] ?? key;
   }
 

package/dist/KeyboardInput/properties.d.ts

@@ -6,6 +6,15 @@ export type OptionalKeyboardInputProperties = {
     separator?: string;
     testId?: string;
     classes?: string;
+    /**
+     * When true, every key renders exactly as given — the built-in KEY_SYMBOLS
+     * table (`space` → ␣, `tab` → ⇥, `cmd` → ⌘, …) is bypassed entirely.
+     * Defaults to false, so existing consumers keep today's glyph substitution
+     * unchanged. Use this when the word itself is the label that must appear
+     * (e.g. a "Hold SPACE" caption or a physical-key caption reading "Tab"),
+     * not the typographic symbol.
+     */
+    literal?: boolean;
 };
 export type KeyboardInputEventProperties = {
     onclick?: (event: MouseEvent) => void;