@juspay/svelte-ui-components 2.28.3 → 2.30.0

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -13,6 +13,7 @@
     minDate = null,
     maxDate = null,
     disabledDates = [],
+    maxRangeDays = null,
     presets = null,
     placeholder = 'Select date',
     dualMonth,
@@ -44,6 +45,41 @@
   let draftCompareStart: Date | null = $state(null);
   let draftCompareEnd: Date | null = $state(null);
 
+  // Tracks the label of the currently active preset, or null when the user
+  // made a custom calendar selection (or before any selection is made).
+  let selectedPresetLabel: string | null = $state(null);
+
+  const MS_PER_DAY = 24 * 60 * 60 * 1000;
+
+  function isBaseDisabledDate(date: Date): boolean {
+    if (typeof disabledDates === 'function') {
+      return disabledDates(date);
+    }
+    return disabledDates.some((disabled) => isSameDay(disabled, date));
+  }
+
+  // When maxRangeDays is set, disable any date whose span from the in-progress
+  // start would exceed the limit (inclusive of both ends), until the range is
+  // completed. Falls back to the raw disabledDates otherwise.
+  const rangeConstrainedDisabledDates = $derived.by(() => {
+    const limit = maxRangeDays;
+    if (limit === null) {
+      return disabledDates;
+    }
+    const anchor = draftStart;
+    const selecting = anchor !== null && draftEnd === null;
+    return (date: Date): boolean => {
+      if (isBaseDisabledDate(date)) {
+        return true;
+      }
+      if (!selecting || anchor === null) {
+        return false;
+      }
+      const diffDays = Math.abs(Math.round((date.getTime() - anchor.getTime()) / MS_PER_DAY));
+      return diffDays > limit - 1;
+    };
+  });
+
   let isOpen: boolean = $state(false);
   let panelRef: HTMLDivElement | null = $state(null);
   let triggerRef: HTMLDivElement | null = $state(null);
@@ -93,6 +129,9 @@
     draftCompareStart = compareStart !== null ? compareStart : null;
     draftCompareEnd = compareEnd !== null ? compareEnd : null;
 
+    // Reset preset tracking so each picker session starts clean.
+    selectedPresetLabel = null;
+
     // Navigate left calendar so it shows the committed start month (or today)
     const anchor = rangeStart !== null ? rangeStart : value !== null ? value : now;
     leftYear = anchor.getFullYear();
@@ -120,7 +159,7 @@
       if (draftStart !== null && draftEnd !== null) {
         rangeStart = draftStart;
         rangeEnd = draftEnd;
-        onapply?.({ rangeStart: draftStart, rangeEnd: draftEnd });
+        onapply?.({ rangeStart: draftStart, rangeEnd: draftEnd, presetLabel: selectedPresetLabel });
       }
       if (
         typeof compareCalendar === 'function' &&
@@ -129,12 +168,16 @@
       ) {
         compareStart = draftCompareStart;
         compareEnd = draftCompareEnd;
-        onapplycompare?.({ compareStart: draftCompareStart, compareEnd: draftCompareEnd });
+        onapplycompare?.({
+          compareStart: draftCompareStart,
+          compareEnd: draftCompareEnd,
+          presetLabel: selectedPresetLabel
+        });
       }
     } else {
       if (draftValue !== null) {
         value = draftValue;
-        onapplysingle?.({ date: draftValue });
+        onapplysingle?.({ date: draftValue, presetLabel: selectedPresetLabel });
       }
     }
     closePicker();
@@ -147,6 +190,7 @@
 
   function handlePreset(preset: DateRangePreset): void {
     const { start, end } = preset.getValue();
+    selectedPresetLabel = preset.label;
     if (mode === 'range') {
       draftStart = start;
       draftEnd = end;
@@ -162,10 +206,14 @@
   function handleRangeSelect(event: { rangeStart: Date; rangeEnd: Date }): void {
     draftStart = event.rangeStart;
     draftEnd = event.rangeEnd;
+    // A direct calendar click is not a preset selection.
+    selectedPresetLabel = null;
   }
 
   function handleSingleSelect(event: { date: Date }): void {
     draftValue = event.date;
+    // A direct calendar click is not a preset selection.
+    selectedPresetLabel = null;
   }
 
   // Close on outside-click
@@ -313,7 +361,7 @@
                   {locale}
                   {minDate}
                   {maxDate}
-                  {disabledDates}
+                  disabledDates={rangeConstrainedDisabledDates}
                   initialMonth={leftInitialMonth}
                   onrangeselect={handleRangeSelect}
                   classes="drp-calendar-embedded"
@@ -327,7 +375,7 @@
                   {locale}
                   {minDate}
                   {maxDate}
-                  {disabledDates}
+                  disabledDates={rangeConstrainedDisabledDates}
                   initialMonth={rightInitialMonth}
                   onrangeselect={handleRangeSelect}
                   classes="drp-calendar-embedded"

package/dist/DateRangePicker/properties.d.ts

@@ -22,6 +22,8 @@ export type OptionalDateRangePickerProperties = {
     maxDate?: Date | null;
     /** Specific dates to disable, or a predicate. */
     disabledDates?: Date[] | ((date: Date) => boolean);
+    /** Maximum number of days a selected range may span, inclusive of both endpoints (range mode only). Once a start date is picked, dates that would exceed this span are disabled until the range is completed. Omit for no limit. */
+    maxRangeDays?: number | null;
     /** Preset options shown in the sidebar. Omit to hide the sidebar. */
     presets?: DateRangePreset[] | null;
     /** Placeholder shown when no range is selected. */
@@ -50,19 +52,22 @@ export type OptionalDateRangePickerProperties = {
     triggerIcon?: Snippet;
 };
 export type DateRangePickerEventProperties = {
-    /** Fired when the user clicks Apply in range mode. */
+    /** Fired when the user clicks Apply in range mode. presetLabel is the sidebar preset name if one was active, or null for a custom calendar selection. */
     onapply?: (event: {
         rangeStart: Date;
         rangeEnd: Date;
+        presetLabel: string | null;
     }) => void;
-    /** Fired when the user clicks Apply in single mode. */
+    /** 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;
-    /** Fired when the compare range is applied. */
+    /** 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;
     /** Fired when the user dismisses without applying. */
     oncancel?: () => void;

package/dist/Select/Select.svelte

@@ -14,9 +14,11 @@
     bottomContent,
     optionIndicator,
     testId,
+    itemTestId,
     onchange,
     classes,
-    open = $bindable(false)
+    open = $bindable(false),
+    dropdownAlign = 'left'
   }: SelectProperties = $props();
 
   function normalizeItems(source: SelectItem[] | string[]): SelectItem[] {
@@ -302,12 +304,17 @@
   </div>
 
   {#if open && !disabled}
-    <div class="select-dropdown" role="listbox" id={listboxId} aria-multiselectable={multiple}>
+    <div
+      class="select-dropdown"
+      class:select-dropdown-right={dropdownAlign === 'right'}
+      role="listbox"
+      id={listboxId}
+      aria-multiselectable={multiple}
+    >
       {#if filteredItems.length === 0}
         <div class="select-empty">No results</div>
       {:else}
         {#each filteredItems as item, index (item.id)}
-          <!-- svelte-ignore a11y_click_events_have_key_events -->
           <div
             class="select-option"
             class:multi={multiple}
@@ -317,6 +324,13 @@
             id={`${listboxId}-option-${index}`}
             aria-selected={value.includes(item.id)}
             tabindex="-1"
+            {...item.testId
+              ? { 'data-pw': item.testId }
+              : typeof itemTestId === 'string'
+                ? { 'data-pw': `${itemTestId}-${item.id}` }
+                : typeof testId === 'string'
+                  ? { 'data-pw': `${testId}-${item.id}` }
+                  : {}}
             onclick={() => selectItem(item.id)}
             onmouseenter={() => (highlightedIndex = index)}
           >
@@ -450,6 +464,13 @@
     z-index: var(--select-dropdown-z-index, 10);
   }
 
+  .select-dropdown-right {
+    left: auto;
+    right: 0;
+    min-width: 100%;
+    width: max-content;
+  }
+
   .select-option {
     padding: var(--select-option-padding, 8px 12px);
     color: var(--select-option-color, #333333);

package/dist/Select/properties.d.ts

@@ -3,6 +3,8 @@ export type SelectProperties = MandatorySelectProperties & OptionalSelectPropert
 export type SelectItem = {
     id: string;
     label: string;
+    /** Optional per-option test id, emitted as `data-pw` on the option element. */
+    testId?: string;
 };
 export type MandatorySelectProperties = {
     items: SelectItem[] | string[];
@@ -18,9 +20,13 @@ export type OptionalSelectProperties = {
         checked: boolean;
     }]>;
     testId?: string;
+    /** Fallback per-option test id prefix. Each option emits `data-pw="{itemTestId}-{id}"` when its own `item.testId` is not set. */
+    itemTestId?: string;
     classes?: string;
     /** Bindable. Controls whether the dropdown is open; the component writes back on open/close so parents can `bind:open` to observe or drive it. Unbound, the component manages its own state. */
     open?: boolean;
+    /** Horizontal anchor of the dropdown panel. `'left'` (default) anchors to the trigger's left edge; `'right'` anchors to the right edge so a content-wider panel hangs leftward instead of overflowing. */
+    dropdownAlign?: 'left' | 'right';
 };
 export type SelectEventProperties = {
     onchange?: (value: string[]) => void;

package/package.json

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