@juspay/svelte-ui-components 2.64.0 → 2.65.0

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -21,6 +21,7 @@
     placeholder = 'Select date',
     dualMonth,
     timePicker,
+    align = 'left',
     compareStart = $bindable(null),
     compareEnd = $bindable(null),
     compareCalendar,
@@ -112,6 +113,13 @@
 
   let activePresetLabel: string | null = $state(resolvedInitialPresetLabel);
 
+  // The preset whose range is currently committed (seeded from initialPresetLabel,
+  // updated on every Apply). Unlike activePresetLabel — which is cleared the moment
+  // the user interacts so the trigger can fall back to a date range — this survives
+  // the open/apply cycle so re-opening the picker re-highlights the committed preset
+  // by label instead of date-matching (which lights up every same-day preset at once).
+  let committedPresetLabel: string | null = $state(resolvedInitialPresetLabel);
+
   // Seed draft from initialPresetLabel whenever presets become available so
   // the calendar shows the preset's date selection when the picker is first
   // opened — even if presets arrive asynchronously after initial render.
@@ -194,8 +202,9 @@
     draftCompareStart = compareStart;
     draftCompareEnd = compareEnd;
 
-    // Reset preset tracking so each picker session starts clean.
-    selectedPresetLabel = null;
+    // Re-seed the session from the committed preset so the sidebar re-highlights it
+    // by label. A direct calendar click later clears this, reverting to date matching.
+    selectedPresetLabel = committedPresetLabel;
 
     // Navigate left calendar so it shows the committed start month (or today)
     const anchor = rangeStart !== null ? rangeStart : value !== null ? value : now;
@@ -266,6 +275,7 @@
       if (draftStart !== null && draftEnd !== null) {
         rangeStart = draftStart;
         rangeEnd = draftEnd;
+        committedPresetLabel = selectedPresetLabel;
         onapply?.({ rangeStart: draftStart, rangeEnd: draftEnd, presetLabel: selectedPresetLabel });
       }
       if (
@@ -284,6 +294,7 @@
     } else {
       if (draftValue !== null) {
         value = draftValue;
+        committedPresetLabel = selectedPresetLabel;
         onapplysingle?.({ date: draftValue, presetLabel: selectedPresetLabel });
       }
     }
@@ -293,6 +304,7 @@
   function handleClear(): void {
     value = null;
     draftValue = null;
+    committedPresetLabel = null;
     onclear?.();
     closePicker();
   }
@@ -524,6 +536,8 @@
     <div
       bind:this={panelRef}
       class="drp-panel"
+      class:drp-panel-align-left={align === 'left'}
+      class:drp-panel-align-right={align === 'right'}
       role="dialog"
       aria-label="Date range picker"
       aria-modal="true"
@@ -736,7 +750,6 @@
   .drp-panel {
     position: absolute;
     top: calc(100% + var(--drp-panel-offset, 6px));
-    left: 0;
     z-index: var(--drp-panel-z-index, 1000);
     background: var(--drp-panel-background, inherit);
     border: var(--drp-panel-border, 1px solid #e0e0e0);
@@ -749,6 +762,16 @@
     overflow: hidden;
   }
 
+  .drp-panel-align-left {
+    left: 0;
+    right: auto;
+  }
+
+  .drp-panel-align-right {
+    right: 0;
+    left: auto;
+  }
+
   .drp-panel-inner {
     display: flex;
     flex-direction: row;

package/dist/DateRangePicker/properties.d.ts

@@ -14,6 +14,7 @@ export type DateRangePreset = {
     group?: string;
 };
 export type DateRangePickerMode = 'range' | 'single';
+export type DateRangePickerAlign = 'left' | 'right';
 export type OptionalDateRangePickerProperties = {
     /** Currently selected start of range (bindable). */
     rangeStart?: Date | null;
@@ -43,6 +44,8 @@ export type OptionalDateRangePickerProperties = {
     placeholder?: string;
     /** Show two months side by side. Defaults to true for range mode, false for single. */
     dualMonth?: boolean;
+    /** Align the dropdown panel to the left or right edge of the trigger. Default: 'left'. */
+    align?: DateRangePickerAlign;
     /** Snippet rendered in the time-picker slot. Consumer controls all time UI. */
     timePicker?: Snippet;
     /** Start of compare range (bindable). Used when compareCalendar snippet is provided. */

package/package.json

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