update calendar component api (#5777)

web-common/src/components/date-picker/Calendar.svelte

@@ -3,41 +3,60 @@
   import { DateTime } from "luxon";
   import { Interval } from "luxon";
 
-  export let dateSelection: DateTime<true> | undefined = undefined;
-  export let rangeSelection: Interval | undefined = undefined;
-  export let min: DateTime<true> | undefined = undefined;
+  type MaybeDate = DateTime<true> | DateTime<false> | undefined;
+
+  export let selection: MaybeDate | Interval<true> = undefined;
+  export let minDate: MaybeDate = undefined;
   export let visibleMonths = 1;
   export let selectingStart = true;
-  export let firstVisibleMonth: DateTime<true> =
-    rangeSelection?.start ?? dateSelection ?? DateTime.now();
-  export let singleDaySelection = dateSelection !== undefined;
+  export let firstVisibleMonth: MaybeDate = isValidDateTime(selection)
+    ? selection
+    : isValidInterval(selection)
+      ? selection.start
+      : DateTime.now();
+  export let singleDaySelection = isValidDateTime(selection);
   export let onSelectDay: (date: DateTime<true>) => void;
 
-  let potentialEnd: DateTime | undefined;
-  let potentialStart: DateTime | undefined;
+  let potentialEnd: DateTime<true> | undefined;
+  let potentialStart: DateTime<true> | undefined;
 
-  $: finalInterval = dateSelection
+  $: finalInterval = isValidDateTime(selection)
     ? (Interval.fromDateTimes(
-        dateSelection,
-        dateSelection.endOf("day"),
+        selection,
+        selection.endOf("day"),
       ) as Interval<true>)
-    : rangeSelection ?? Interval.invalid("No selection");
+    : isValidInterval(selection)
+      ? selection
+      : undefined;
+
+  $: firstMonth = isValidDateTime(firstVisibleMonth)
+    ? firstVisibleMonth
+    : DateTime.now();
 
   function onPan(direction: -1 | 1) {
-    firstVisibleMonth = firstVisibleMonth.plus({ month: direction });
+    firstMonth = firstMonth.plus({ month: direction });
+  }
+
+  function isValidDateTime(
+    value: MaybeDate | Interval<true>,
+  ): value is DateTime<true> {
+    return Boolean(value && value instanceof DateTime && value?.isValid);
+  }
+
+  function isValidInterval(
+    value: MaybeDate | Interval<true>,
+  ): value is Interval<true> {
+    return Boolean(value && value instanceof Interval && value?.isValid);
   }
 </script>
 
 <div class="flex gap-x-3 p-2 w-full min-w-56">
   {#each { length: visibleMonths } as month, i (month)}
     <Month
-      {min}
+      {minDate}
       {singleDaySelection}
       interval={finalInterval}
-      startDay={firstVisibleMonth
-        .plus({ month: i })
-        .set({ day: 1 })
-        .startOf("day")}
+      startDay={firstMonth.plus({ month: i }).set({ day: 1 }).startOf("day")}
       {selectingStart}
       {visibleMonths}
       visibleIndex={i}

web-common/src/components/date-picker/Day.svelte

@@ -2,8 +2,8 @@
   import { DateTime } from "luxon";
 
   export let date: DateTime<true>;
-  export let inclusiveEnd: DateTime<true>;
-  export let start: DateTime<true>;
+  export let inclusiveEnd: DateTime<true> | undefined;
+  export let start: DateTime<true> | undefined;
   export let outOfMonth: boolean;
   export let disabled: boolean;
   export let selectingStart: boolean;
@@ -15,14 +15,17 @@
 
   $: isEnd = areSameDay(inclusiveEnd, date);
   $: isStart = areSameDay(start, date);
-  $: afterEnd = date > inclusiveEnd;
-  $: beforeStart = date < start;
+  $: afterEnd = inclusiveEnd && date > inclusiveEnd;
+  $: beforeStart = start && date < start;
   $: inPotentialRange = Boolean(
-    (potentialEnd && date > start && date < potentialEnd) ||
-      (potentialStart && date > potentialStart && date < inclusiveEnd),
+    (start && potentialEnd && date > start && date < potentialEnd) ||
+      (inclusiveEnd &&
+        potentialStart &&
+        date > potentialStart &&
+        date < inclusiveEnd),
   );
   $: isNextDay = areSameDay(potentialStart?.plus({ day: 1 }), date);
-  $: inRange = !afterEnd && !beforeStart;
+  $: inRange = start && inclusiveEnd && !afterEnd && !beforeStart;
 
   function areSameDay(
     a: DateTime | undefined | null,

web-common/src/components/date-picker/Month.svelte

@@ -6,22 +6,22 @@
 
   export let startDay: DateTime<true>;
   export let startOfWeek = 0;
-  export let interval: Interval<true>;
+  export let interval: Interval<true> | undefined;
   export let selectingStart: boolean;
   export let visibleMonths = 2;
   export let visibleIndex: number;
   export let potentialEnd: DateTime | undefined;
   export let potentialStart: DateTime | undefined;
   export let singleDaySelection = false;
-  export let min: DateTime<true> | undefined;
+  export let minDate: DateTime<true> | DateTime<false> | undefined;
   export let onPan: (direction: 1 | -1) => void;
   export let onSelectDay: (date: DateTime<true>) => void;
 
   $: firstDay = startDay.startOf("month").weekday % 7;
 
   $: weekCount = Math.ceil((firstDay + startDay.daysInMonth) / 7);
 
-  $: inclusiveEnd = interval.end.minus({ millisecond: 0 });
+  $: inclusiveEnd = interval?.end.minus({ millisecond: 0 });
 
   $: days = Array.from({ length: weekCount * 7 }, (_, i) => {
     if (i < firstDay) {
@@ -84,14 +84,14 @@
         {date}
         {selectingStart}
         {inclusiveEnd}
-        {potentialEnd}
-        {potentialStart}
+        bind:potentialEnd
+        bind:potentialStart
         {singleDaySelection}
         {onSelectDay}
         {resetPotentialDates}
-        start={interval.start}
+        start={interval?.start}
         outOfMonth={date.month !== startDay.month}
-        disabled={Boolean(min && date < min)}
+        disabled={Boolean(minDate && date < minDate)}
       />
     {/each}
   </div>

web-common/src/features/dashboards/time-controls/super-pill/components/CalendarPlusDateInput.svelte

@@ -59,12 +59,14 @@
   }}
 />
 
-<Calendar
-  rangeSelection={calendarInterval}
-  {selectingStart}
-  {firstVisibleMonth}
-  onSelectDay={onValidDateInput}
-/>
+{#if calendarInterval.isValid}
+  <Calendar
+    selection={calendarInterval}
+    {selectingStart}
+    {firstVisibleMonth}
+    onSelectDay={onValidDateInput}
+  />
+{/if}
 
 <DropdownMenu.Separator />
 <div class="flex flex-col gap-y-2 px-2 pt-1 pb-2">