@juspay/svelte-ui-components 2.111.1 → 2.111.2

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-  import type { DateRangePickerProperties, DateRangePreset } from './properties';
+  import type {
+    DateRangePickerProperties,
+    DateRangePreset,
+    TimeDisplayBoundary
+  } from './properties';
   import { tick, untrack } from 'svelte';
   import { SvelteDate } from 'svelte/reactivity';
   import Calendar from '../Calendar/Calendar.svelte';
@@ -11,6 +15,7 @@
     TIME_DISPLAY_PATTERN,
     applyTimeDisplay,
     formatTimeDisplay,
+    parseDateDisplay,
     toMinutesOfDay
   } from './timeUtils';
 
@@ -80,6 +85,23 @@
   let endTimeDisplay: string = $state('11:59 PM');
   let showTimeRow: boolean = $state(false);
 
+  // Typed text for the built-in date inputs (showDateInputs, range mode). The displayed
+  // text is *derived* from draftStart/draftEnd — the single source of truth — so it can
+  // never go stale relative to a draft change made elsewhere (preset pick, calendar
+  // click, the initialPresetLabel seed effect, ...). While the user is actively editing
+  // a field, its edit buffer holds the in-progress text instead (a half-typed string
+  // must never reach the calendar grid or Apply's canApply check); the buffer resets to
+  // null — falling back to the canonical formatted date — on every successful or
+  // rejected commit, see commitTypedDate.
+  let startDateEditBuffer: string | null = $state(null);
+  let endDateEditBuffer: string | null = $state(null);
+  const startDateInputText: string = $derived(
+    startDateEditBuffer ?? (draftStart !== null ? formatDate(draftStart) : '')
+  );
+  const endDateInputText: string = $derived(
+    endDateEditBuffer ?? (draftEnd !== null ? formatDate(draftEnd) : '')
+  );
+
   // Inline time layout (timeSelectionLayout="inline"): the start/end time inputs
   // render beside their date inputs on the same row, always visible — no clock
   // toggle and no collapsible row. All seeding/validation/fold logic is shared
@@ -99,11 +121,14 @@
 
   // 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.
+  // completed. Falls back to the raw disabledDates otherwise. Always returns a
+  // callable predicate (rather than sometimes the raw Date[]/predicate union) so
+  // it can be called directly — by both the Calendar grid and isDateSelectable's
+  // typed-date validation — without a union-type call-signature error.
   const rangeConstrainedDisabledDates = $derived.by(() => {
     const limit = maxRangeDays;
     if (limit === null) {
-      return disabledDates;
+      return (date: Date): boolean => isBaseDisabledDate(date);
     }
     const anchor = draftStart;
     const selecting = anchor !== null && draftEnd === null;
@@ -200,10 +225,6 @@
     return d.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' });
   }
 
-  // Read-only date-input box contents (opt-in via showDateInputs), reflecting the draft.
-  const draftStartDateLabel: string = $derived(draftStart !== null ? formatDate(draftStart) : '');
-  const draftEndDateLabel: string = $derived(draftEnd !== null ? formatDate(draftEnd) : '');
-
   const isStartTimeValid: boolean = $derived(TIME_DISPLAY_PATTERN.test(startTimeDisplay.trim()));
   const isEndTimeValid: boolean = $derived(TIME_DISPLAY_PATTERN.test(endTimeDisplay.trim()));
   // Apply is blocked while a time is malformed, or while both ends fall on the same
@@ -259,6 +280,13 @@
     // by label. A direct calendar click later clears this, reverting to date matching.
     selectedPresetLabel = committedPresetLabel;
 
+    // Discard any in-progress typed text from a previous session — the date-input
+    // display text is derived from draftStart/draftEnd above, so it already reflects
+    // whatever draft this open seeds (including a later re-seed from initialPresetLabel,
+    // which runs in an $effect.pre after this synchronous assignment).
+    startDateEditBuffer = null;
+    endDateEditBuffer = null;
+
     // Seed the time inputs from the committed range's time-of-day, and collapse the
     // time row so each open starts from the date view.
     if (showTimeSelection) {
@@ -407,6 +435,8 @@
       draftEnd = rangeEnd;
       draftValue = value;
       selectedPresetLabel = committedPresetLabel;
+      startDateEditBuffer = null;
+      endDateEditBuffer = null;
       const anchor = rangeStart !== null ? rangeStart : value !== null ? value : now;
       leftYear = anchor.getFullYear();
       leftMonth = anchor.getMonth();
@@ -420,6 +450,10 @@
     if (mode === 'range') {
       draftStart = start;
       draftEnd = end;
+      // Discard any in-progress typed text — the date-input display text is derived
+      // from draftStart/draftEnd, so it already reflects the preset's own start/end.
+      startDateEditBuffer = null;
+      endDateEditBuffer = null;
       // Reseed the time-of-day inputs from the preset's own start/end so a
       // time-bearing preset (e.g. "Last 30 minutes" / "Last 12 Hours") is not
       // silently overwritten by a stale display string in handleApply's
@@ -443,6 +477,9 @@
     draftEnd = event.rangeEnd;
     // A direct calendar click is not a preset selection.
     selectedPresetLabel = null;
+    // Discard any in-progress typed text in favor of the calendar's own selection.
+    startDateEditBuffer = null;
+    endDateEditBuffer = null;
     if (showTimeSelection) {
       startTimeDisplay = '12:00 AM';
       endTimeDisplay = isSameDay(event.rangeEnd, now) ? formatTimeDisplay(now) : '11:59 PM';
@@ -455,6 +492,177 @@
     selectedPresetLabel = null;
   }
 
+  // Whether a typed date passes the same minDate/maxDate/disabledDates/maxRangeDays
+  // constraints the calendar grid itself enforces — a typed date must never commit
+  // somewhere the grid would have refused to let the user click. Checks
+  // rangeConstrainedDisabledDates (not just the raw disabledDates) so a typed end date
+  // that would blow past maxRangeDays mid-selection is rejected exactly like a click on
+  // the same grid cell would be.
+  function isDateSelectable(date: Date): boolean {
+    if (minDate !== null) {
+      const normalizedMinDate = new SvelteDate(
+        minDate.getFullYear(),
+        minDate.getMonth(),
+        minDate.getDate()
+      );
+      if (date.getTime() < normalizedMinDate.getTime()) {
+        return false;
+      }
+    }
+    if (maxDate !== null) {
+      const normalizedMaxDate = new SvelteDate(
+        maxDate.getFullYear(),
+        maxDate.getMonth(),
+        maxDate.getDate()
+      );
+      if (date.getTime() > normalizedMaxDate.getTime()) {
+        return false;
+      }
+    }
+    return !rangeConstrainedDisabledDates(date);
+  }
+
+  // The single acceptance rule for a typed date, shared by the live invalid-border
+  // feedback and by commitTypedDate. Keeping one predicate is the point: while these
+  // were two separate expressions, the border could stay clean for a date that commit
+  // then silently rejected, leaving no cue as to why the field reverted.
+  //
+  // Three ways a parsed date is refused:
+  //   1. it isn't selectable at all (minDate/maxDate/disabled, and the maxRangeDays
+  //      span while a range is mid-selection),
+  //   2. it crosses the opposite boundary (a start after the end, or vice versa),
+  //   3. it would stretch an *already-complete* range past maxRangeDays.
+  // Case 3 is not covered by isDateSelectable: rangeConstrainedDisabledDates only
+  // applies its span check while `selecting` is true (draftStart set, draftEnd still
+  // null). Once both boundaries exist that guard goes quiet, so retyping either one
+  // could otherwise commit a range longer than the calendar grid would ever allow.
+  function isTypedDateAcceptable(boundary: TimeDisplayBoundary, candidate: Date): boolean {
+    if (!isDateSelectable(candidate)) {
+      return false;
+    }
+    const otherBoundaryDate = boundary === 'start' ? draftEnd : draftStart;
+    if (otherBoundaryDate === null) {
+      return true;
+    }
+    const crossesOtherBoundary =
+      boundary === 'start'
+        ? candidate.getTime() > otherBoundaryDate.getTime()
+        : candidate.getTime() < otherBoundaryDate.getTime();
+    if (crossesOtherBoundary) {
+      return false;
+    }
+    if (maxRangeDays !== null) {
+      const spanDays =
+        Math.abs(Math.round((candidate.getTime() - otherBoundaryDate.getTime()) / MS_PER_DAY)) + 1;
+      if (spanDays > maxRangeDays) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  // Live validity feedback for the typed date-input text, mirroring isStartTimeValid /
+  // isEndTimeValid — the field is flagged invalid as soon as the typed text can't parse
+  // into a date this picker would accept, matching the time input's parse-as-you-type
+  // styling. Empty text is not flagged invalid; nothing has been typed yet.
+  const isStartDateValid: boolean = $derived.by(() => {
+    const trimmedStartDateText = startDateInputText.trim();
+    if (trimmedStartDateText === '') {
+      return true;
+    }
+    const parsedStartDate = parseDateDisplay(startDateInputText);
+    return parsedStartDate !== null && isTypedDateAcceptable('start', parsedStartDate);
+  });
+  const isEndDateValid: boolean = $derived.by(() => {
+    const trimmedEndDateText = endDateInputText.trim();
+    if (trimmedEndDateText === '') {
+      return true;
+    }
+    const parsedEndDate = parseDateDisplay(endDateInputText);
+    return parsedEndDate !== null && isTypedDateAcceptable('end', parsedEndDate);
+  });
+
+  // True when date's month is already one of the two visible calendar months (or the
+  // single visible month outside dual-month mode) — used to avoid an unnecessary
+  // re-navigation/remount when a typed date is already on screen.
+  function isMonthVisible(date: Date): boolean {
+    const isLeftMonthVisible = date.getFullYear() === leftYear && date.getMonth() === leftMonth;
+    if (!isDualMonth) {
+      return isLeftMonthVisible;
+    }
+    const rightMonth = new SvelteDate(leftYear, leftMonth + 1, 1);
+    const isRightMonthVisible =
+      date.getFullYear() === rightMonth.getFullYear() && date.getMonth() === rightMonth.getMonth();
+    return isLeftMonthVisible || isRightMonthVisible;
+  }
+
+  function navigateCalendarTo(date: Date): void {
+    if (isMonthVisible(date)) {
+      return;
+    }
+    leftYear = date.getFullYear();
+    leftMonth = date.getMonth();
+    calendarKey++;
+  }
+
+  // Discard one boundary's in-progress edit buffer, falling back to the derived display
+  // of its current draft value. Used both to normalize a successful commit and to revert
+  // a rejected/unparseable one.
+  function clearDateEditBuffer(boundary: TimeDisplayBoundary): void {
+    if (boundary === 'start') {
+      startDateEditBuffer = null;
+    } else {
+      endDateEditBuffer = null;
+    }
+  }
+
+  // Record the in-progress typed text for one date-input boundary as the user types.
+  function handleDateInputChange(event: Event, boundary: TimeDisplayBoundary): void {
+    if (!(event.currentTarget instanceof HTMLInputElement)) {
+      return;
+    }
+    if (boundary === 'start') {
+      startDateEditBuffer = event.currentTarget.value;
+    } else {
+      endDateEditBuffer = event.currentTarget.value;
+    }
+  }
+
+  // Parse and commit the typed text for one date-input boundary (called on blur and on
+  // Enter). Invalid text (unparseable, outside minDate/maxDate, disabled, exceeding
+  // maxRangeDays, or crossing the other boundary) is rejected — the field reverts to the
+  // last valid value instead of committing garbage into draftStart/draftEnd. A no-op
+  // when the field was never edited (buffer already null — nothing to commit).
+  function commitTypedDate(boundary: TimeDisplayBoundary): void {
+    const editBuffer = boundary === 'start' ? startDateEditBuffer : endDateEditBuffer;
+    if (editBuffer === null) {
+      return;
+    }
+    const parsedDate = parseDateDisplay(editBuffer);
+
+    if (parsedDate === null || !isTypedDateAcceptable(boundary, parsedDate)) {
+      clearDateEditBuffer(boundary);
+      return;
+    }
+
+    if (boundary === 'start') {
+      draftStart = parsedDate;
+    } else {
+      draftEnd = parsedDate;
+    }
+    // A typed date is a custom selection, same as a direct calendar click.
+    selectedPresetLabel = null;
+    navigateCalendarTo(parsedDate);
+    clearDateEditBuffer(boundary);
+  }
+
+  function handleDateInputKeyDown(event: KeyboardEvent, boundary: TimeDisplayBoundary): void {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      commitTypedDate(boundary);
+    }
+  }
+
   // Close on outside-click
   function handleDocumentClick(event: MouseEvent): void {
     if (!isOpen && !openCompare) {
@@ -705,13 +913,21 @@
               <div class="drp-date-input-row">
                 {#if isInlineTime}
                   <div class="drp-date-time-group">
-                    <div
-                      class="drp-date-input"
-                      data-pw={testId ? `${testId}-start-date` : null}
-                      testID={testId ? `${testId}-start-date` : null}
-                    >
-                      <span class="drp-date-input-value">{draftStartDateLabel || 'Start date'}</span
-                      >
+                    <div class="drp-date-input" class:drp-date-input-invalid={!isStartDateValid}>
+                      <input
+                        type="text"
+                        class="drp-date-input-value"
+                        value={startDateInputText}
+                        oninput={(event) => handleDateInputChange(event, 'start')}
+                        maxlength="32"
+                        placeholder="Start date"
+                        aria-label="Start date"
+                        aria-invalid={!isStartDateValid}
+                        onblur={() => commitTypedDate('start')}
+                        onkeydown={(event) => handleDateInputKeyDown(event, 'start')}
+                        data-pw={testId ? `${testId}-start-date` : null}
+                        testID={testId ? `${testId}-start-date` : null}
+                      />
                     </div>
                     <div
                       class="drp-time-input drp-time-input-inline"
@@ -735,12 +951,21 @@
                   <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                   <span class="drp-datetime-arrow" aria-hidden="true">{@html chevronRightSvg}</span>
                   <div class="drp-date-time-group">
-                    <div
-                      class="drp-date-input"
-                      data-pw={testId ? `${testId}-end-date` : null}
-                      testID={testId ? `${testId}-end-date` : null}
-                    >
-                      <span class="drp-date-input-value">{draftEndDateLabel || 'End date'}</span>
+                    <div class="drp-date-input" class:drp-date-input-invalid={!isEndDateValid}>
+                      <input
+                        type="text"
+                        class="drp-date-input-value"
+                        value={endDateInputText}
+                        oninput={(event) => handleDateInputChange(event, 'end')}
+                        maxlength="32"
+                        placeholder="End date"
+                        aria-label="End date"
+                        aria-invalid={!isEndDateValid}
+                        onblur={() => commitTypedDate('end')}
+                        onkeydown={(event) => handleDateInputKeyDown(event, 'end')}
+                        data-pw={testId ? `${testId}-end-date` : null}
+                        testID={testId ? `${testId}-end-date` : null}
+                      />
                     </div>
                     <div
                       class="drp-time-input drp-time-input-inline"
@@ -762,21 +987,39 @@
                     </div>
                   </div>
                 {:else}
-                  <div
-                    class="drp-date-input"
-                    data-pw={testId ? `${testId}-start-date` : null}
-                    testID={testId ? `${testId}-start-date` : null}
-                  >
-                    <span class="drp-date-input-value">{draftStartDateLabel || 'Start date'}</span>
+                  <div class="drp-date-input" class:drp-date-input-invalid={!isStartDateValid}>
+                    <input
+                      type="text"
+                      class="drp-date-input-value"
+                      value={startDateInputText}
+                      oninput={(event) => handleDateInputChange(event, 'start')}
+                      maxlength="32"
+                      placeholder="Start date"
+                      aria-label="Start date"
+                      aria-invalid={!isStartDateValid}
+                      onblur={() => commitTypedDate('start')}
+                      onkeydown={(event) => handleDateInputKeyDown(event, 'start')}
+                      data-pw={testId ? `${testId}-start-date` : null}
+                      testID={testId ? `${testId}-start-date` : null}
+                    />
                   </div>
                   <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                   <span class="drp-datetime-arrow" aria-hidden="true">{@html chevronRightSvg}</span>
-                  <div
-                    class="drp-date-input"
-                    data-pw={testId ? `${testId}-end-date` : null}
-                    testID={testId ? `${testId}-end-date` : null}
-                  >
-                    <span class="drp-date-input-value">{draftEndDateLabel || 'End date'}</span>
+                  <div class="drp-date-input" class:drp-date-input-invalid={!isEndDateValid}>
+                    <input
+                      type="text"
+                      class="drp-date-input-value"
+                      value={endDateInputText}
+                      oninput={(event) => handleDateInputChange(event, 'end')}
+                      maxlength="32"
+                      placeholder="End date"
+                      aria-label="End date"
+                      aria-invalid={!isEndDateValid}
+                      onblur={() => commitTypedDate('end')}
+                      onkeydown={(event) => handleDateInputKeyDown(event, 'end')}
+                      data-pw={testId ? `${testId}-end-date` : null}
+                      testID={testId ? `${testId}-end-date` : null}
+                    />
                   </div>
                   {#if showTimeSelection}
                     <button
@@ -1218,15 +1461,30 @@
     background: var(--drp-date-input-background, #ffffff);
   }
 
+  .drp-date-input-invalid {
+    border-color: var(--drp-date-input-invalid-border, #e5484d);
+  }
+
   .drp-date-input-value {
     display: block;
+    width: 100%;
+    min-width: 0;
+    padding: 0;
+    border: none;
+    outline: none;
+    background: transparent;
     color: var(--drp-date-input-color, #333333);
     font-size: var(--drp-date-input-font-size, 13px);
+    font-family: inherit;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
+  .drp-date-input-value::placeholder {
+    color: var(--drp-date-input-placeholder-color, #aaaaaa);
+  }
+
   .drp-datetime-arrow {
     flex-shrink: 0;
     display: inline-flex;

package/dist/DateRangePicker/properties.d.ts

@@ -43,8 +43,13 @@ export type OptionalDateRangePickerProperties = {
      */
     presetCheckmark?: boolean;
     /**
-     * Show read-only start/end date boxes at the top of the calendar area (range mode),
-     * reflecting the current draft selection. Opt-in. Default: false.
+     * Show typeable start/end date boxes at the top of the calendar area (range mode).
+     * Each box seeds from the current draft selection and can be edited directly by
+     * typing a date; the typed text is parsed and committed on blur or Enter. Accepts
+     * the component's own display format ("Jul 10, 2026"), numeric "M/D/YYYY", or ISO
+     * "YYYY-MM-DD". Unparseable, out-of-range (minDate/maxDate), disabled, or
+     * boundary-crossing (start after end, or vice versa) input is rejected — the field
+     * reverts to its last valid value instead of committing garbage. Opt-in. Default: false.
      */
     showDateInputs?: boolean;
     /**

package/dist/DateRangePicker/timeUtils.d.ts

@@ -12,3 +12,9 @@ export declare const formatTimeDisplay: (date: Date) => string;
 export declare const applyTimeDisplay: (date: Date, display: string, boundary: TimeDisplayBoundary) => Date | null;
 /** Minutes-since-midnight for ordering comparisons, or null when the display is invalid. */
 export declare const toMinutesOfDay: (display: string) => number | null;
+/**
+ * Parse a typed calendar-date string into a local-midnight Date, or null when the text is
+ * unparseable or names a calendar date that does not exist (e.g. "Feb 30, 2026"). Accepts the
+ * component's own display format ("Jul 10, 2026"), numeric "M/D/YYYY", and ISO "YYYY-MM-DD".
+ */
+export declare const parseDateDisplay: (display: string) => Date | null;

package/dist/DateRangePicker/timeUtils.js

@@ -45,3 +45,74 @@ export const toMinutesOfDay = (display) => {
     const parsed = parseTimeDisplay(display);
     return parsed === null ? null : parsed.hours * 60 + parsed.minutes;
 };
+const SHORT_MONTH_NAMES = [
+    'jan',
+    'feb',
+    'mar',
+    'apr',
+    'may',
+    'jun',
+    'jul',
+    'aug',
+    'sep',
+    'oct',
+    'nov',
+    'dec'
+];
+/** Matches the DateRangePicker's own display format, e.g. "Jul 10, 2026" or "Jul 10 2026". */
+const MONTH_NAME_DATE_PATTERN = /^([A-Za-z]{3,})\.?\s+(\d{1,2}),?\s+(\d{4})$/;
+/** Matches numeric "M/D/YYYY" or "M-D-YYYY" input. */
+const NUMERIC_SLASH_DATE_PATTERN = /^(\d{1,2})[/-](\d{1,2})[/-](\d{4})$/;
+/** Matches ISO "YYYY-MM-DD" input. */
+const ISO_DATE_PATTERN = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;
+/**
+ * Build a local-midnight Date for the given calendar parts.
+ *
+ * `new Date(year, ...)` maps years 0-99 onto 1900-1999, so a literal the parser accepts
+ * as four digits — "0050-01-01" — would silently land in 1950. setFullYear has no such
+ * remapping, so the date is constructed neutrally and then stamped.
+ */
+const localMidnightFromParts = (year, monthIndex, day) => {
+    const date = new Date();
+    date.setFullYear(year, monthIndex, day);
+    date.setHours(0, 0, 0, 0);
+    return date;
+};
+const daysInMonth = (year, monthIndex) => 
+// Day 0 of the next month is the last day of this one.
+localMidnightFromParts(year, monthIndex + 1, 0).getDate();
+/** Build a local-midnight Date from year/monthIndex/day, or null when the calendar date does not exist. */
+const buildDateFromParts = (year, monthIndex, day) => {
+    if (monthIndex < 0 || monthIndex > 11 || day < 1 || day > daysInMonth(year, monthIndex)) {
+        return null;
+    }
+    return localMidnightFromParts(year, monthIndex, day);
+};
+/**
+ * Parse a typed calendar-date string into a local-midnight Date, or null when the text is
+ * unparseable or names a calendar date that does not exist (e.g. "Feb 30, 2026"). Accepts the
+ * component's own display format ("Jul 10, 2026"), numeric "M/D/YYYY", and ISO "YYYY-MM-DD".
+ */
+export const parseDateDisplay = (display) => {
+    const trimmedDisplay = display.trim();
+    if (trimmedDisplay === '') {
+        return null;
+    }
+    const isoMatch = ISO_DATE_PATTERN.exec(trimmedDisplay);
+    if (isoMatch !== null) {
+        return buildDateFromParts(Number(isoMatch[1]), Number(isoMatch[2]) - 1, Number(isoMatch[3]));
+    }
+    const monthNameMatch = MONTH_NAME_DATE_PATTERN.exec(trimmedDisplay);
+    if (monthNameMatch !== null) {
+        const monthIndex = SHORT_MONTH_NAMES.indexOf(monthNameMatch[1].slice(0, 3).toLowerCase());
+        if (monthIndex === -1) {
+            return null;
+        }
+        return buildDateFromParts(Number(monthNameMatch[3]), monthIndex, Number(monthNameMatch[2]));
+    }
+    const slashMatch = NUMERIC_SLASH_DATE_PATTERN.exec(trimmedDisplay);
+    if (slashMatch !== null) {
+        return buildDateFromParts(Number(slashMatch[3]), Number(slashMatch[1]) - 1, Number(slashMatch[2]));
+    }
+    return null;
+};

package/package.json

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