@juspay/svelte-ui-components 2.29.0 → 2.31.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

@@ -13,11 +13,13 @@
     disabled = false,
     bottomContent,
     optionIndicator,
+    triggerSummary,
     testId,
     itemTestId,
     onchange,
     classes,
-    open = $bindable(false)
+    open = $bindable(false),
+    dropdownAlign = 'left'
   }: SelectProperties = $props();
 
   function normalizeItems(source: SelectItem[] | string[]): SelectItem[] {
@@ -255,30 +257,48 @@
     tabindex={disabled ? -1 : searchable ? -1 : 0}
   >
     {#if multiple}
-      {#each value as id (id)}
-        <Pill
-          text={getLabel(id)}
-          dismissible
-          {disabled}
-          ondismiss={() => removeItem(id)}
-          {...typeof testId === 'string' ? { testId: `${testId}-pill-${id}` } : {}}
-        />
-      {/each}
-      {#if searchable}
-        <input
-          class="select-search"
-          type="text"
-          value={query}
-          oninput={handleSearchInput}
-          onfocus={handleSearchFocus}
-          bind:this={searchInputEl}
-          placeholder={value.length === 0 ? placeholder : ''}
-          {disabled}
-          autocomplete="off"
-          tabindex={disabled ? -1 : 0}
-        />
-      {:else if value.length === 0}
-        <span class="select-placeholder">{placeholder}</span>
+      {#if typeof triggerSummary === 'function'}
+        {@render triggerSummary({ value, items })}
+        {#if searchable}
+          <input
+            class="select-search"
+            type="text"
+            value={query}
+            oninput={handleSearchInput}
+            onfocus={handleSearchFocus}
+            bind:this={searchInputEl}
+            placeholder={value.length === 0 ? placeholder : ''}
+            {disabled}
+            autocomplete="off"
+            tabindex={disabled ? -1 : 0}
+          />
+        {/if}
+      {:else}
+        {#each value as id (id)}
+          <Pill
+            text={getLabel(id)}
+            dismissible
+            {disabled}
+            ondismiss={() => removeItem(id)}
+            {...typeof testId === 'string' ? { testId: `${testId}-pill-${id}` } : {}}
+          />
+        {/each}
+        {#if searchable}
+          <input
+            class="select-search"
+            type="text"
+            value={query}
+            oninput={handleSearchInput}
+            onfocus={handleSearchFocus}
+            bind:this={searchInputEl}
+            placeholder={value.length === 0 ? placeholder : ''}
+            {disabled}
+            autocomplete="off"
+            tabindex={disabled ? -1 : 0}
+          />
+        {:else if value.length === 0}
+          <span class="select-placeholder">{placeholder}</span>
+        {/if}
       {/if}
     {:else if searchable}
       <input
@@ -303,7 +323,13 @@
   </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}
@@ -457,6 +483,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

@@ -25,6 +25,13 @@ export type OptionalSelectProperties = {
     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';
+    /** Snippet for rendering a compact trigger summary in multiple mode instead of one Pill per selected value. Receives `{ value, items }` so the consumer can compute e.g. "All" / "3 selected". When not provided the default Pill-per-value behaviour is used. */
+    triggerSummary?: import('svelte').Snippet<[{
+        value: string[];
+        items: SelectItem[];
+    }]>;
 };
 export type SelectEventProperties = {
     onchange?: (value: string[]) => void;

package/package.json

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