@juspay/svelte-ui-components 2.80.8 → 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/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.8",
+  "version": "2.80.9",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",