@juspay/svelte-ui-components 3.4.1 → 3.5.1

package/dist/Choicebox/Choicebox.svelte

@@ -9,14 +9,10 @@
     disabled = false,
     showIndicator = true,
     testId,
-    onclick: onclickLegacy,
-    onClick,
+    onclick,
     classes
   }: ChoiceboxProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onclick = $derived(onClick ?? onclickLegacy);
-
   function handleClick(): void {
     if (disabled) {
       return;

package/dist/Choicebox/properties.d.ts

@@ -12,5 +12,4 @@ export type OptionalChoiceboxProperties = {
 };
 export type ChoiceboxEventProperties = {
     onclick?: (selected: boolean) => void;
-    onClick?: (selected: boolean) => void;
 };

package/dist/ColorPicker/ColorPicker.svelte

@@ -22,17 +22,11 @@
     disabled = false,
     showValue = false,
     testId,
-    onchange: onchangeLegacy,
-    onChange,
-    oninput: oninputLegacy,
-    onInput,
+    onchange,
+    oninput,
     classes
   }: ColorPickerProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onchange = $derived(onChange ?? onchangeLegacy);
-  const oninput = $derived(onInput ?? oninputLegacy);
-
   // ── Internal state ──────────────────────────────────────────────
 
   let open = $state(false);
@@ -217,7 +211,7 @@
           disable={disabled}
           maxLength={7}
           classes="color-picker-text-input"
-          onInput={handleTextInput}
+          oninput={handleTextInput}
         />
       </div>
     {/if}
@@ -268,7 +262,7 @@
               value={hexInputValue}
               maxLength={7}
               classes="cp-field-input"
-              onInput={handleHexFieldInput}
+              oninput={handleHexFieldInput}
             />
             <span class="cp-field-label">HEX</span>
           </div>

package/dist/ColorPicker/properties.d.ts

@@ -11,7 +11,5 @@ export type OptionalColorPickerProperties = {
 };
 export type ColorPickerEventProperties = {
     onchange?: (value: string) => void;
-    onChange?: (value: string) => void;
     oninput?: (value: string) => void;
-    onInput?: (value: string) => void;
 };

package/dist/Combobox/Combobox.svelte

@@ -40,37 +40,19 @@
     createLabel = (query: string) => `Create "${query}"`,
     action,
     actionIcon,
-    onselect: onselectLegacy,
-    onSelect,
-    oninput: oninputLegacy,
-    onInput,
-    onopen: onopenLegacy,
-    onOpen,
-    onclose: oncloseLegacy,
-    onClose,
+    onselect,
+    oninput,
+    onopen,
+    onclose,
     onkeydown,
     onfocus,
     onblur,
-    onchange: onchangeLegacy,
-    onChange,
-    onadd: onaddLegacy,
-    onAdd,
-    onremove: onremoveLegacy,
-    onRemove,
-    oncreate: oncreateLegacy,
-    onCreate
+    onchange,
+    onadd,
+    onremove,
+    oncreate
   }: ComboboxProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onadd = $derived(onAdd ?? onaddLegacy);
-  const onchange = $derived(onChange ?? onchangeLegacy);
-  const onclose = $derived(onClose ?? oncloseLegacy);
-  const oncreate = $derived(onCreate ?? oncreateLegacy);
-  const oninput = $derived(onInput ?? oninputLegacy);
-  const onopen = $derived(onOpen ?? onopenLegacy);
-  const onremove = $derived(onRemove ?? onremoveLegacy);
-  const onselect = $derived(onSelect ?? onselectLegacy);
-
   let containerEl: HTMLDivElement | null = $state(null);
   let inputRef: ReturnType<typeof Input> | null = $state(null);
 
@@ -266,7 +248,7 @@
   function handleInput(val: string, event: Event) {
     inputValue = val;
     oninput?.(val);
-    inputEventProperties?.onInput?.(val, event);
+    inputEventProperties?.oninput?.(val, event);
     if (!open) {
       openDropdown();
     }
@@ -330,12 +312,12 @@
   function handleFocus(event: FocusEvent) {
     openDropdown();
     onfocus?.(event);
-    inputEventProperties?.onFocus?.(event);
+    inputEventProperties?.onfocus?.(event);
   }
 
   function handleBlur(event: FocusEvent) {
     onblur?.(event);
-    inputEventProperties?.onBlur?.(event);
+    inputEventProperties?.onblur?.(event);
   }
 
   function handleControlClick() {
@@ -400,10 +382,10 @@
         ariaAutocomplete="list"
         ariaControls={open ? listboxId : null}
         ariaActivedescendant={highlightedOptionId ?? null}
-        onInput={handleInput}
-        onKeyDown={handleKeydown}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
+        oninput={handleInput}
+        onkeydown={handleKeydown}
+        onfocus={handleFocus}
+        onblur={handleBlur}
       />
     </div>
     {#if typeof inputSuffix === 'function'}

package/dist/Combobox/properties.d.ts

@@ -61,26 +61,18 @@ export type OptionalComboboxProperties = {
 };
 export type ComboboxEventProperties = {
     onselect?: (item: ComboboxItem) => void;
-    onSelect?: (item: ComboboxItem) => void;
     oninput?: (value: string) => void;
-    onInput?: (value: string) => void;
     onopen?: () => void;
-    onOpen?: () => void;
     onclose?: () => void;
-    onClose?: () => void;
     onkeydown?: (event: KeyboardEvent) => void;
     onfocus?: (event: FocusEvent) => void;
     onblur?: (event: FocusEvent) => void;
     /** Multi-select: fires whenever the selection changes (add, remove, or create). */
     onchange?: (selected: string[]) => void;
-    onChange?: (selected: string[]) => void;
     /** Multi-select: fires when a value is added. */
     onadd?: (value: string) => void;
-    onAdd?: (value: string) => void;
     /** Multi-select: fires when a value is removed. */
     onremove?: (value: string) => void;
-    onRemove?: (value: string) => void;
     /** Fires when the create row is chosen, with the trimmed query. */
     oncreate?: (value: string) => void;
-    onCreate?: (value: string) => void;
 };

package/dist/CommandMenu/CommandMenu.svelte

@@ -14,17 +14,11 @@
     testId,
     itemIcon,
     searchIcon,
-    onselect: onselectLegacy,
-    onSelect,
-    onclose: oncloseLegacy,
-    onClose,
+    onselect,
+    onclose,
     classes
   }: CommandMenuProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onclose = $derived(onClose ?? oncloseLegacy);
-  const onselect = $derived(onSelect ?? onselectLegacy);
-
   let query = $state('');
   let activeIndex = $state(0);
   let inputElement: HTMLInputElement | null = $state(null);

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.
         });
       }