@juspay/svelte-ui-components 2.63.1 → 2.64.1

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -5,6 +5,7 @@
   import Calendar from '../Calendar/Calendar.svelte';
   import Button from '../Button/Button.svelte';
   import chevronDownSvg from '../assets/chevron-down.svg?raw';
+  import checkmarkSvg from '../assets/checkmark.svg?raw';
 
   let {
     rangeStart = $bindable(null),
@@ -16,6 +17,7 @@
     disabledDates = [],
     maxRangeDays = null,
     presets = null,
+    presetCheckmark = false,
     placeholder = 'Select date',
     dualMonth,
     timePicker,
@@ -110,6 +112,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.
@@ -192,8 +201,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;
@@ -264,6 +274,7 @@
       if (draftStart !== null && draftEnd !== null) {
         rangeStart = draftStart;
         rangeEnd = draftEnd;
+        committedPresetLabel = selectedPresetLabel;
         onapply?.({ rangeStart: draftStart, rangeEnd: draftEnd, presetLabel: selectedPresetLabel });
       }
       if (
@@ -282,6 +293,7 @@
     } else {
       if (draftValue !== null) {
         value = draftValue;
+        committedPresetLabel = selectedPresetLabel;
         onapplysingle?.({ date: draftValue, presetLabel: selectedPresetLabel });
       }
     }
@@ -291,6 +303,7 @@
   function handleClear(): void {
     value = null;
     draftValue = null;
+    committedPresetLabel = null;
     onclear?.();
     closePicker();
   }
@@ -545,11 +558,16 @@
                 type="button"
                 class="drp-preset-item"
                 class:drp-preset-active={isPresetActive(preset)}
+                class:drp-preset-checkable={presetCheckmark}
                 role="option"
                 aria-selected={isPresetActive(preset)}
                 onclick={() => handlePreset(preset)}
               >
                 {preset.label}
+                {#if presetCheckmark && isPresetActive(preset)}
+                  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                  <span class="drp-preset-check" aria-hidden="true">{@html checkmarkSvg}</span>
+                {/if}
               </button>
             {/each}
           </div>
@@ -786,6 +804,29 @@
     background: var(--drp-preset-active-hover-background, #333333);
   }
 
+  /* Opt-in checkmark layout: reserve a trailing slot so the active preset's tick
+     sits flush-right while the label stays left. A preset with no tick (or a
+     label-only preset) keeps its single flex child at the start, unchanged. */
+  .drp-preset-checkable {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--drp-preset-check-gap, 8px);
+  }
+
+  .drp-preset-check {
+    display: inline-flex;
+    flex-shrink: 0;
+    width: var(--drp-preset-check-size, 16px);
+    height: var(--drp-preset-check-size, 16px);
+    color: var(--drp-preset-check-color, inherit);
+  }
+
+  .drp-preset-check :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
   /* ── Calendar area ── */
   .drp-calendars {
     display: flex;

package/dist/DateRangePicker/properties.d.ts

@@ -33,6 +33,12 @@ export type OptionalDateRangePickerProperties = {
     maxRangeDays?: number | null;
     /** Preset options shown in the sidebar. Omit to hide the sidebar. */
     presets?: DateRangePreset[] | null;
+    /**
+     * Show a trailing checkmark on the active preset in the sidebar. Opt-in, so
+     * existing layouts are unchanged; the active preset is always distinguished by
+     * its highlighted background regardless of this flag. Default: false.
+     */
+    presetCheckmark?: boolean;
     /** Placeholder shown when no range is selected. */
     placeholder?: string;
     /** Show two months side by side. Defaults to true for range mode, false for single. */

package/package.json

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