@juspay/svelte-ui-components 3.5.0 → 3.5.1

package/dist/CommandMenu/properties.d.ts

@@ -22,7 +22,5 @@ export type OptionalCommandMenuProperties = {
 };
 export type CommandMenuEventProperties = {
     onselect?: (item: CommandItem) => void;
-    onSelect?: (item: CommandItem) => void;
     onclose?: () => void;
-    onClose?: () => void;
 };

package/dist/ContextMenu/ContextMenu.svelte

@@ -8,20 +8,12 @@
     maxHeight = '240px',
     testId,
     children,
-    onselect: onselectLegacy,
-    onSelect,
-    onopen: onopenLegacy,
-    onOpen,
-    onclose: oncloseLegacy,
-    onClose,
+    onselect,
+    onopen,
+    onclose,
     classes
   }: ContextMenuProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onclose = $derived(onClose ?? oncloseLegacy);
-  const onopen = $derived(onOpen ?? onopenLegacy);
-  const onselect = $derived(onSelect ?? onselectLegacy);
-
   let menuEl: HTMLDivElement | null = $state(null);
   let containerEl: HTMLDivElement | null = $state(null);
   let focusedIndex: number = $state(-1);

package/dist/ContextMenu/properties.d.ts

@@ -21,9 +21,6 @@ export type OptionalContextMenuProperties = {
 };
 export type ContextMenuEventProperties = {
     onselect?: (item: ContextMenuItem) => void;
-    onSelect?: (item: ContextMenuItem) => void;
     onopen?: () => void;
-    onOpen?: () => void;
     onclose?: () => void;
-    onClose?: () => void;
 };

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -54,28 +54,14 @@
     initialPresetLabel,
     compareTrigger,
     openCompare = $bindable(false),
-    onapply: onapplyLegacy,
-    onApply,
-    onapplysingle: onapplysingleLegacy,
-    onApplySingle,
-    onapplycompare: onapplycompareLegacy,
-    onApplyCompare,
-    oncancel: oncancelLegacy,
-    onCancel,
-    onopentoggle: onopentoggleLegacy,
-    onOpenToggle,
-    onclear: onclearLegacy,
-    onClear
+    onapply,
+    onapplysingle,
+    onapplycompare,
+    oncancel,
+    onopentoggle,
+    onclear
   }: DateRangePickerProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onapply = $derived(onApply ?? onapplyLegacy);
-  const onapplycompare = $derived(onApplyCompare ?? onapplycompareLegacy);
-  const onapplysingle = $derived(onApplySingle ?? onapplysingleLegacy);
-  const oncancel = $derived(onCancel ?? oncancelLegacy);
-  const onclear = $derived(onClear ?? onclearLegacy);
-  const onopentoggle = $derived(onOpenToggle ?? onopentoggleLegacy);
-
   const isDualMonth: boolean = $derived(
     typeof dualMonth === 'boolean' ? dualMonth : mode === 'range'
   );

package/dist/DateRangePicker/properties.d.ts

@@ -138,46 +138,27 @@ export type DateRangePickerEventProperties = {
         rangeEnd: Date;
         presetLabel: string | null;
     }) => void;
-    onApply?: (event: {
-        rangeStart: Date;
-        rangeEnd: Date;
-        presetLabel: string | null;
-    }) => void;
     /** Fired when the user clicks Apply in single mode. presetLabel is the sidebar preset name if one was active, or null for a custom calendar selection. */
     onapplysingle?: (event: {
         date: Date;
         presetLabel: string | null;
     }) => void;
-    onApplySingle?: (event: {
-        date: Date;
-        presetLabel: string | null;
-    }) => void;
     /** Fired when the compare range is applied. presetLabel is the sidebar preset name if one was active, or null for a custom calendar selection. */
     onapplycompare?: (event: {
         compareStart: Date;
         compareEnd: Date;
         presetLabel: string | null;
     }) => void;
-    onApplyCompare?: (event: {
-        compareStart: Date;
-        compareEnd: Date;
-        presetLabel: string | null;
-    }) => void;
     /** Fired when the user dismisses without applying. */
     oncancel?: () => void;
-    onCancel?: () => void;
     /** Fired whenever the picker opens or closes. */
     onopentoggle?: (event: {
         open: boolean;
     }) => void;
-    onOpenToggle?: (event: {
-        open: boolean;
-    }) => void;
     /**
      * Fired when the user clicks the Clear button in single mode (requires clearable=true).
      * value is reset to null before this callback is invoked.
      */
     onclear?: () => void;
-    onClear?: () => void;
 };
 export type DateRangePickerProperties = OptionalDateRangePickerProperties & DateRangePickerEventProperties;

package/dist/Draggable/Draggable.svelte

@@ -11,9 +11,9 @@
     step = 16,
     dragLabel = 'Drag to move',
     children,
-    onMoveStart,
-    onMove,
-    onMoveEnd,
+    onmovestart,
+    onmove,
+    onmoveend,
     testId,
     classes
   }: DraggableProperties = $props();
@@ -73,7 +73,7 @@
       baseY: y
     };
     event.currentTarget.setPointerCapture(event.pointerId);
-    onMoveStart?.({ x, y });
+    onmovestart?.({ x, y });
   }
 
   function moveDrag(event: PointerEvent & { currentTarget: HTMLElement }): void {
@@ -85,7 +85,7 @@
     const clamped = clamp(event.currentTarget, nextX, nextY);
     x = clamped.x;
     y = clamped.y;
-    onMove?.({ x, y });
+    onmove?.({ x, y });
   }
 
   function endDrag(event: PointerEvent & { currentTarget: HTMLElement }): void {
@@ -96,7 +96,7 @@
       event.currentTarget.releasePointerCapture(event.pointerId);
     }
     active = null;
-    onMoveEnd?.({ x, y });
+    onmoveend?.({ x, y });
   }
 
   function keyDrag(event: KeyboardEvent & { currentTarget: HTMLElement }): void {
@@ -124,7 +124,7 @@
       const clamped = clamp(event.currentTarget, nextX, nextY);
       x = clamped.x;
       y = clamped.y;
-      onMove?.({ x, y });
+      onmove?.({ x, y });
     }
   }
 </script>

package/dist/Draggable/properties.d.ts

@@ -20,7 +20,7 @@ export type OptionalDraggableProperties = {
     classes?: string;
 };
 export type DraggableEventProperties = {
-    onMoveStart?: (position: DragPosition) => void;
-    onMove?: (position: DragPosition) => void;
-    onMoveEnd?: (position: DragPosition) => void;
+    onmovestart?: (position: DragPosition) => void;
+    onmove?: (position: DragPosition) => void;
+    onmoveend?: (position: DragPosition) => void;
 };

package/dist/DualAxisBarChart/DualAxisBarChart.svelte

@@ -53,15 +53,11 @@
     interactiveLegend = false,
     hideLegendBelow = 360,
     tooltipSnippet,
-    onbarclick: onbarclickLegacy,
-    onBarClick,
+    onbarclick,
     testId,
     classes
   }: DualAxisBarChartProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onbarclick = $derived(onBarClick ?? onbarclickLegacy);
-
   // ── State ──────────────────────────────────────────────────────
 
   let containerEl: HTMLDivElement | null = $state(null);

package/dist/DualAxisBarChart/properties.d.ts

@@ -147,8 +147,4 @@ export type DualAxisBarChartEventProperties = {
         categoryIndex: number;
         context: DualAxisTooltipContext;
     }) => void;
-    onBarClick?: (event: {
-        categoryIndex: number;
-        context: DualAxisTooltipContext;
-    }) => void;
 };

package/dist/FileDropzoneTrigger/FileDropzoneTrigger.svelte

@@ -8,14 +8,10 @@
     heading,
     caption,
     compact = false,
-    onclick: onclickLegacy,
-    onClick,
+    onclick,
     testId,
     classes
   }: FileDropzoneTriggerProperties = $props();
-
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onclick = $derived(onClick ?? onclickLegacy);
 </script>
 
 {#if compact}

package/dist/FileDropzoneTrigger/properties.d.ts

@@ -21,5 +21,4 @@ export type OptionalFileDropzoneTriggerProperties = {
 export type FileDropzoneTriggerEventProperties = {
     /** Wire to `FileInput`'s `openFilePicker`. Non-compact only — compact relies on `FileInput`'s own whole-area click/drop handling. */
     onclick?: () => void;
-    onClick?: () => void;
 };

package/dist/FileInput/FileInput.svelte

@@ -9,16 +9,10 @@
     disabled = false,
     testId,
     classes,
-    onfiles: onfilesLegacy,
-    onFiles,
-    onerror: onerrorLegacy,
-    onError
+    onfiles,
+    onerror
   }: FileInputProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onerror = $derived(onError ?? onerrorLegacy);
-  const onfiles = $derived(onFiles ?? onfilesLegacy);
-
   let dragOver = $state(false);
   let inputEl: HTMLInputElement | null = $state(null);
   let pickerBusy = false;

package/dist/FileInput/properties.d.ts

@@ -14,7 +14,5 @@ export type FileInputProperties = {
     testId?: string;
     classes?: string;
     onfiles?: (files: File[]) => void;
-    onFiles?: (files: File[]) => void;
     onerror?: (message: string) => void;
-    onError?: (message: string) => void;
 };

package/dist/FunnelChart/FunnelChart.svelte

@@ -28,16 +28,10 @@
     testId,
     classes,
     empty,
-    onstageclick: onstageclickLegacy,
-    onStageClick,
-    onstagehover: onstagehoverLegacy,
-    onStageHover
+    onstageclick,
+    onstagehover
   }: FunnelChartProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onstageclick = $derived(onStageClick ?? onstageclickLegacy);
-  const onstagehover = $derived(onStageHover ?? onstagehoverLegacy);
-
   // ── State ──────────────────────────────────────────────────────
 
   let containerEl: HTMLDivElement | null = $state(null);

package/dist/FunnelChart/properties.d.ts

@@ -78,17 +78,9 @@ export type FunnelChartEventProperties = {
         index: number;
         stage: FunnelStage;
     }) => void;
-    onStageClick?: (event: {
-        index: number;
-        stage: FunnelStage;
-    }) => void;
     /** Fires when the user hovers over or leaves a stage bar. `null` on leave. */
     onstagehover?: (event: {
         index: number;
         stage: FunnelStage;
     } | null) => void;
-    onStageHover?: (event: {
-        index: number;
-        stage: FunnelStage;
-    } | null) => void;
 };

package/dist/Gallery/Gallery.svelte

@@ -28,12 +28,12 @@
     deleteIcon,
     itemFooter,
     testId,
-    onImageClick,
-    onEditClick,
-    onDeleteClick,
-    onOpen,
-    onDismiss,
-    onIndexChange,
+    onimageclick,
+    oneditclick,
+    ondeleteclick,
+    onopen,
+    onclose,
+    onchange,
     onkeydown,
     classes
   }: GalleryProperties = $props();
@@ -47,10 +47,10 @@
   let activeImage = $derived(images.at(activeIndex));
   let hasPrevious = $derived(loop ? images.length > 1 : activeIndex > 0);
   let hasNext = $derived(loop ? images.length > 1 : activeIndex < images.length - 1);
-  let itemsAreInteractive = $derived(enableLightbox || typeof onImageClick === 'function');
+  let itemsAreInteractive = $derived(enableLightbox || typeof onimageclick === 'function');
   let hasItemFooter = $derived(view === 'grid' && typeof itemFooter === 'function');
-  let showEditButton = $derived(typeof onEditClick === 'function');
-  let showDeleteButton = $derived(typeof onDeleteClick === 'function');
+  let showEditButton = $derived(typeof oneditclick === 'function');
+  let showDeleteButton = $derived(typeof ondeleteclick === 'function');
   let showItemActions = $derived(showEditButton || showDeleteButton);
 
   function lightboxAction(node: HTMLElement) {
@@ -78,12 +78,12 @@
     }
     activeIndex = index;
     open = true;
-    onOpen?.(index);
+    onopen?.(index);
   }
 
   function closeLightbox(): void {
     open = false;
-    onDismiss?.();
+    onclose?.();
   }
 
   async function goToIndex(index: number): Promise<void> {
@@ -91,7 +91,7 @@
       return;
     }
     activeIndex = index;
-    onIndexChange?.(activeIndex);
+    onchange?.(activeIndex);
     await tick();
     if (lightboxDiv !== null && !lightboxDiv.contains(document.activeElement)) {
       lightboxDiv.focus();
@@ -115,18 +115,18 @@
   }
 
   function handleImageClick(index: number, event: MouseEvent): void {
-    onImageClick?.(index, event);
+    onimageclick?.(index, event);
     if (enableLightbox) {
       openLightbox(index, event.currentTarget);
     }
   }
 
   function handleEditClick(index: number, event: MouseEvent): void {
-    onEditClick?.(index, event);
+    oneditclick?.(index, event);
   }
 
   function handleDeleteClick(index: number, event: MouseEvent): void {
-    onDeleteClick?.(index, event);
+    ondeleteclick?.(index, event);
   }
 
   function trapFocus(event: KeyboardEvent): void {

package/dist/Gallery/properties.d.ts

@@ -29,11 +29,11 @@ export type OptionalGalleryProperties = {
     classes?: string;
 };
 export type GalleryEventProperties = {
-    onImageClick?: (index: number, event: MouseEvent) => void;
-    onEditClick?: (index: number, event: MouseEvent) => void;
-    onDeleteClick?: (index: number, event: MouseEvent) => void;
-    onOpen?: (index: number) => void;
-    onDismiss?: () => void;
-    onIndexChange?: (index: number) => void;
+    onimageclick?: (index: number, event: MouseEvent) => void;
+    oneditclick?: (index: number, event: MouseEvent) => void;
+    ondeleteclick?: (index: number, event: MouseEvent) => void;
+    onopen?: (index: number) => void;
+    onclose?: () => void;
+    onchange?: (index: number) => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/HITL/HITL.svelte

@@ -20,13 +20,15 @@
     sections,
     functionArguments,
     hiddenKeys,
-    onConfirm,
+    onconfirm,
     confirmLabel = 'Confirm',
     cancelLabel = 'Cancel',
     countdownSeconds = 10,
     autoCancelSeconds = 0,
     isMicMuted = false,
-    onMicToggle = null,
+    // The resolver this replaced defaulted to null, and the call sites test for
+    // exactly null before awaiting it.
+    onmictoggle = null,
     isHistoryMode = false,
     initialState = null,
     approvedIcon,
@@ -66,7 +68,7 @@
   // History mode renders the settled state from props; live mode from local state.
   // A history card with no initialState renders as expired rather than falling
   // through to the pending interactive card — a replayed card must never be able
-  // to fire onConfirm.
+  // to fire onconfirm.
   const userResponse = $derived.by((): HITLResponse | null => {
     if (isHistoryMode) {
       if (initialState === null) {
@@ -109,9 +111,9 @@
   };
 
   const restoreMicState = async (): Promise<void> => {
-    if (onMicToggle !== null && originalMicState !== null && isMicMuted !== originalMicState) {
+    if (onmictoggle !== null && originalMicState !== null && isMicMuted !== originalMicState) {
       try {
-        await onMicToggle();
+        await onmictoggle();
       } catch {
         // Mic restoration is best-effort; a failure must not block the decision.
       }
@@ -131,7 +133,7 @@
     localResponse = action;
     isProcessing = true;
     try {
-      onConfirm?.({
+      onconfirm?.({
         confirmationId,
         action,
         approved: action !== 'rejected'
@@ -182,10 +184,10 @@
     if (isHistoryMode) {
       return;
     }
-    if (onMicToggle !== null) {
+    if (onmictoggle !== null) {
       originalMicState = isMicMuted;
       if (!isMicMuted) {
-        void Promise.resolve(onMicToggle()).catch(() => {
+        void Promise.resolve(onmictoggle()).catch(() => {
           // Auto-mute is best-effort.
         });
       }

package/dist/HITL/properties.d.ts

@@ -32,7 +32,7 @@ export type OptionalHITLProperties = {
     functionArguments?: Record<string, unknown>;
     /** Argument keys (case-insensitive) hidden from the generic formatting. */
     hiddenKeys?: string[];
-    onConfirm?: (event: HITLEvent) => void;
+    onconfirm?: (event: HITLEvent) => void;
     confirmLabel?: string;
     cancelLabel?: string;
     /**
@@ -47,7 +47,7 @@ export type OptionalHITLProperties = {
     autoCancelSeconds?: number;
     /** Current mic state — muted while the card is open, restored on decision. */
     isMicMuted?: boolean;
-    onMicToggle?: (() => void | Promise<void>) | null;
+    onmictoggle?: (() => void | Promise<void>) | null;
     /** Renders a settled card from `initialState` with no timers or buttons. */
     isHistoryMode?: boolean;
     initialState?: HITLInitialState | null;

package/dist/IframeViewer/IframeViewer.svelte

@@ -13,7 +13,8 @@
     credentialless,
     testId,
     classes,
-    onMessage = () => {}
+    // Called unguarded below, so it keeps the no-op default the resolver gave it.
+    onmessage = () => {}
   }: IframeViewerProperties = $props();
 
   let iframeEl: HTMLIFrameElement | null = $state(null);
@@ -33,7 +34,7 @@
     ) {
       return;
     }
-    onMessage(event);
+    onmessage(event);
   };
 
   onMount(() => {

package/dist/IframeViewer/properties.d.ts

@@ -36,5 +36,5 @@ export type IframeViewerEventProperties = {
      * Called with the `MessageEvent` for `postMessage` events whose origin is in
      * `allowedOrigins` and whose source is the embedded iframe window.
      */
-    onMessage?: (event: MessageEvent) => void;
+    onmessage?: (event: MessageEvent) => void;
 };