@juspay/svelte-ui-components 2.80.7 → 2.80.9

package/dist/Button/Button.svelte

@@ -248,6 +248,12 @@
   .button-text {
     order: var(--button-text-order, 3);
     display: var(--button-text-display);
+
+    /* With nowrap as the default, a label longer than the button's box would
+       otherwise bleed past it — truncate with an ellipsis instead. Full labels
+       stay available via the button's accessible name / title at the call site. */
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .button-el:hover:not(.disabled) {

package/dist/Calendar/Calendar.svelte

@@ -154,6 +154,12 @@
     return n;
   }
 
+  function endOfDay(d: Date): Date {
+    const newDate = new SvelteDate(d);
+    newDate.setHours(23, 59, 59, 999);
+    return newDate;
+  }
+
   function isSameDay(a: Date, b: Date): boolean {
     return (
       a.getFullYear() === b.getFullYear() &&
@@ -206,6 +212,8 @@
         if (date.getTime() < normalizeDate(start).getTime()) {
           rangeEnd = start;
           rangeStart = date;
+        } else if (isSameDay(date, start)) {
+          rangeEnd = endOfDay(date);
         } else {
           rangeEnd = date;
         }

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -347,10 +347,10 @@
       if (draftStart !== null && draftEnd !== null) {
         // Fold the time-of-day inputs onto the committed dates when time selection is on.
         const appliedStart = showTimeSelection
-          ? (applyTimeDisplay(draftStart, startTimeDisplay) ?? draftStart)
+          ? (applyTimeDisplay(draftStart, startTimeDisplay, 'start') ?? draftStart)
           : draftStart;
         const appliedEnd = showTimeSelection
-          ? (applyTimeDisplay(draftEnd, endTimeDisplay) ?? draftEnd)
+          ? (applyTimeDisplay(draftEnd, endTimeDisplay, 'end') ?? draftEnd)
           : draftEnd;
         rangeStart = appliedStart;
         rangeEnd = appliedEnd;

package/dist/DateRangePicker/properties.d.ts

@@ -16,6 +16,7 @@ export type DateRangePreset = {
 export type DateRangePickerMode = 'range' | 'single';
 export type DateRangePickerAlign = 'left' | 'right';
 export type DateRangePickerTimeLayout = 'toggle' | 'inline';
+export type TimeDisplayBoundary = 'start' | 'end';
 export type OptionalDateRangePickerProperties = {
     /** Currently selected start of range (bindable). */
     rangeStart?: Date | null;

package/dist/DateRangePicker/timeUtils.d.ts

@@ -1,3 +1,4 @@
+import type { TimeDisplayBoundary } from './properties';
 /** Matches a 12-hour clock display such as "2:30 PM" or "02:05 am". */
 export declare const TIME_DISPLAY_PATTERN: RegExp;
 /** Parse a 12-hour display string into 24-hour hours/minutes, or null when invalid. */
@@ -8,6 +9,6 @@ export declare const parseTimeDisplay: (display: string) => {
 /** Format a Date's time-of-day as a 12-hour display string, e.g. "02:30 PM". */
 export declare const formatTimeDisplay: (date: Date) => string;
 /** Return a new Date with the time-of-day from a 12-hour display string applied, or null when invalid. */
-export declare const applyTimeDisplay: (date: Date, display: string) => Date | null;
+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;

package/dist/DateRangePicker/timeUtils.js

@@ -1,4 +1,3 @@
-// Time-of-day helpers for the DateRangePicker's built-in date + time inputs.
 /** Matches a 12-hour clock display such as "2:30 PM" or "02:05 am". */
 export const TIME_DISPLAY_PATTERN = /^(1[0-2]|0?[1-9]):([0-5][0-9])\s?(AM|PM)$/i;
 const pad = (n) => n.toString().padStart(2, '0');
@@ -27,13 +26,18 @@ export const formatTimeDisplay = (date) => {
     return `${pad(hours12)}:${pad(date.getMinutes())} ${meridiem}`;
 };
 /** Return a new Date with the time-of-day from a 12-hour display string applied, or null when invalid. */
-export const applyTimeDisplay = (date, display) => {
+export const applyTimeDisplay = (date, display, boundary) => {
     const parsed = parseTimeDisplay(display);
     if (parsed === null) {
         return null;
     }
     const next = new Date(date.getTime());
-    next.setHours(parsed.hours, parsed.minutes, 0, 0);
+    if (boundary === 'end') {
+        next.setHours(parsed.hours, parsed.minutes, 59, 999);
+    }
+    else {
+        next.setHours(parsed.hours, parsed.minutes, 0, 0);
+    }
     return next;
 };
 /** Minutes-since-midnight for ordering comparisons, or null when the display is invalid. */

package/dist/Tooltip/Tooltip.svelte

@@ -18,6 +18,77 @@
   let visible = $state(false);
   let delayTimeout = $state<ReturnType<typeof setTimeout> | null>(null);
 
+  /**
+   * Cross-axis shift (px) applied to the inline bubble so it stays inside the
+   * viewport: horizontal for top/bottom tooltips, vertical for left/right ones.
+   * The arrow compensates by the same amount, so it keeps pointing at the trigger.
+   */
+  let bubbleShift = $state(0);
+
+  /** Minimum gap kept between the bubble and the viewport edge. */
+  const VIEWPORT_MARGIN = 8;
+
+  /** Opposite side per position, used to flip a bubble whose main axis overflows. */
+  const OPPOSITE_POSITION: Record<TooltipPosition, TooltipPosition> = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left'
+  };
+
+  /**
+   * Set when the bubble's own side overflows the viewport (e.g. a `right`
+   * tooltip on a trigger near the right screen edge): the bubble renders on
+   * the opposite side instead, where cross-axis shifting alone cannot help.
+   */
+  let flipped = $state(false);
+
+  const displayPosition = $derived(flipped ? OPPOSITE_POSITION[position] : position);
+
+  const mainAxisOverflows = (bubbleRect: DOMRect, pos: TooltipPosition): boolean => {
+    if (pos === 'right') {
+      return bubbleRect.right > window.innerWidth - VIEWPORT_MARGIN;
+    }
+    if (pos === 'left') {
+      return bubbleRect.left < VIEWPORT_MARGIN;
+    }
+    if (pos === 'top') {
+      return bubbleRect.top < VIEWPORT_MARGIN;
+    }
+    return bubbleRect.bottom > window.innerHeight - VIEWPORT_MARGIN;
+  };
+
+  /**
+   * Action for the inline (non-portal) bubble: on mount it measures the bubble's
+   * natural position (shift is 0 and no flip is applied at that point) and keeps
+   * it inside the viewport — flipping to the opposite side when its own side
+   * overflows, and shifting along the cross axis when the perpendicular edges
+   * clip. Flipping mirrors only the main axis, so the cross-axis measurement
+   * stays valid after a flip. On unmount both reset so the next show starts
+   * from the natural position.
+   */
+  const clampInlineBubble = (node: HTMLElement): { destroy: () => void } => {
+    if (typeof window !== 'undefined') {
+      const bubbleRect = node.getBoundingClientRect();
+      flipped = mainAxisOverflows(bubbleRect, position);
+      if (position === 'top' || position === 'bottom') {
+        const overflowRight = bubbleRect.right - (window.innerWidth - VIEWPORT_MARGIN);
+        const overflowLeft = VIEWPORT_MARGIN - bubbleRect.left;
+        bubbleShift = overflowRight > 0 ? -overflowRight : overflowLeft > 0 ? overflowLeft : 0;
+      } else {
+        const overflowBottom = bubbleRect.bottom - (window.innerHeight - VIEWPORT_MARGIN);
+        const overflowTop = VIEWPORT_MARGIN - bubbleRect.top;
+        bubbleShift = overflowBottom > 0 ? -overflowBottom : overflowTop > 0 ? overflowTop : 0;
+      }
+    }
+    return {
+      destroy: () => {
+        bubbleShift = 0;
+        flipped = false;
+      }
+    };
+  };
+
   /** Reference to the trigger wrapper element, used for `getBoundingClientRect` in portal mode. */
   let containerEl: HTMLDivElement | null = $state(null);
 
@@ -86,6 +157,76 @@
     return `${base}top:50%;right:100%;transform:translateY(-50%);border-width:${arrowSize}px ${arrowSize}px ${arrowSize}px 0;border-color:${t} ${bg} ${t} ${t};`;
   };
 
+  /**
+   * Flips an appended portal bubble to the opposite side of the trigger when
+   * its own side overflows the viewport, repositioning the bubble and its
+   * arrow. Returns the side the bubble ends up on.
+   */
+  const flipPortalBubbleIfNeeded = (
+    bubble: HTMLDivElement,
+    rect: DOMRect,
+    pos: TooltipPosition
+  ): TooltipPosition => {
+    if (typeof window === 'undefined') {
+      return pos;
+    }
+    const bubbleRect = bubble.getBoundingClientRect();
+    if (!mainAxisOverflows(bubbleRect, pos)) {
+      return pos;
+    }
+    const flippedPos = OPPOSITE_POSITION[pos];
+    const coords = computePortalCoords(rect, flippedPos);
+    bubble.style.top = `${coords.top}px`;
+    bubble.style.left = `${coords.left}px`;
+    bubble.style.transform = coords.transform;
+    const arrowEl = bubble.firstElementChild;
+    if (arrowEl instanceof HTMLElement) {
+      arrowEl.style.cssText = computeArrowStyle(flippedPos);
+    }
+    return flippedPos;
+  };
+
+  /**
+   * Shifts an appended portal bubble back inside the viewport (cross-axis only)
+   * and moves its arrow the opposite way so it still points at the trigger.
+   * Margins are used so the shift composes with the centring transform.
+   */
+  const clampPortalBubble = (bubble: HTMLDivElement, pos: TooltipPosition): void => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    const bubbleRect = bubble.getBoundingClientRect();
+    let shiftX = 0;
+    let shiftY = 0;
+    if (pos === 'top' || pos === 'bottom') {
+      if (bubbleRect.right > window.innerWidth - VIEWPORT_MARGIN) {
+        shiftX = window.innerWidth - VIEWPORT_MARGIN - bubbleRect.right;
+      } else if (bubbleRect.left < VIEWPORT_MARGIN) {
+        shiftX = VIEWPORT_MARGIN - bubbleRect.left;
+      }
+    } else {
+      if (bubbleRect.bottom > window.innerHeight - VIEWPORT_MARGIN) {
+        shiftY = window.innerHeight - VIEWPORT_MARGIN - bubbleRect.bottom;
+      } else if (bubbleRect.top < VIEWPORT_MARGIN) {
+        shiftY = VIEWPORT_MARGIN - bubbleRect.top;
+      }
+    }
+    if (shiftX === 0 && shiftY === 0) {
+      return;
+    }
+    bubble.style.marginLeft = `${shiftX}px`;
+    bubble.style.marginTop = `${shiftY}px`;
+    const arrowEl = bubble.firstElementChild;
+    if (arrowEl instanceof HTMLElement) {
+      if (shiftX !== 0) {
+        arrowEl.style.left = `calc(50% - ${shiftX}px)`;
+      }
+      if (shiftY !== 0) {
+        arrowEl.style.top = `calc(50% - ${shiftY}px)`;
+      }
+    }
+  };
+
   const createPortalBubble = (rect: DOMRect, pos: TooltipPosition): HTMLDivElement | null => {
     if (typeof document === 'undefined') {
       return null;
@@ -159,6 +300,8 @@
         portalBubbleEl = createPortalBubble(rect, pos);
         if (portalBubbleEl !== null) {
           document.body.appendChild(portalBubbleEl);
+          const effectivePos = flipPortalBubbleIfNeeded(portalBubbleEl, rect, pos);
+          clampPortalBubble(portalBubbleEl, effectivePos);
         }
       }
     };
@@ -217,7 +360,12 @@
   {/if}
   {@render children()}
   {#if visible && !usePortal}
-    <div class="tooltip-bubble {position}" role="tooltip">
+    <div
+      use:clampInlineBubble
+      class="tooltip-bubble {displayPosition}"
+      role="tooltip"
+      style:--tooltip-shift="{bubbleShift}px"
+    >
       <div class="tooltip-arrow"></div>
       {#if typeof content === 'function'}
         {@render content()}
@@ -266,16 +414,18 @@
     border-style: solid;
   }
 
-  /* Top position */
+  /* Top position. --tooltip-shift is the viewport-edge clamp: the bubble slides
+     along its cross axis to stay on screen while the arrow compensates the other
+     way so it keeps pointing at the trigger. */
   .top {
     bottom: calc(100% + var(--tooltip-offset, 8px));
     left: 50%;
-    transform: translateX(-50%);
+    transform: translateX(calc(-50% + var(--tooltip-shift, 0px)));
   }
 
   .top .tooltip-arrow {
     top: 100%;
-    left: 50%;
+    left: calc(50% - var(--tooltip-shift, 0px));
     transform: translateX(-50%);
     border-width: var(--tooltip-arrow-size, 5px) var(--tooltip-arrow-size, 5px) 0
       var(--tooltip-arrow-size, 5px);
@@ -287,12 +437,12 @@
   .bottom {
     top: calc(100% + var(--tooltip-offset, 8px));
     left: 50%;
-    transform: translateX(-50%);
+    transform: translateX(calc(-50% + var(--tooltip-shift, 0px)));
   }
 
   .bottom .tooltip-arrow {
     bottom: 100%;
-    left: 50%;
+    left: calc(50% - var(--tooltip-shift, 0px));
     transform: translateX(-50%);
     border-width: 0 var(--tooltip-arrow-size, 5px) var(--tooltip-arrow-size, 5px)
       var(--tooltip-arrow-size, 5px);
@@ -304,12 +454,12 @@
   .left {
     right: calc(100% + var(--tooltip-offset, 8px));
     top: 50%;
-    transform: translateY(-50%);
+    transform: translateY(calc(-50% + var(--tooltip-shift, 0px)));
   }
 
   .left .tooltip-arrow {
     left: 100%;
-    top: 50%;
+    top: calc(50% - var(--tooltip-shift, 0px));
     transform: translateY(-50%);
     border-width: var(--tooltip-arrow-size, 5px) 0 var(--tooltip-arrow-size, 5px)
       var(--tooltip-arrow-size, 5px);
@@ -321,12 +471,12 @@
   .right {
     left: calc(100% + var(--tooltip-offset, 8px));
     top: 50%;
-    transform: translateY(-50%);
+    transform: translateY(calc(-50% + var(--tooltip-shift, 0px)));
   }
 
   .right .tooltip-arrow {
     right: 100%;
-    top: 50%;
+    top: calc(50% - var(--tooltip-shift, 0px));
     transform: translateY(-50%);
     border-width: var(--tooltip-arrow-size, 5px) var(--tooltip-arrow-size, 5px)
       var(--tooltip-arrow-size, 5px) 0;

package/package.json

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