@juspay/svelte-ui-components 2.96.0 → 2.96.1

package/dist/Menu/Menu.svelte

@@ -2,6 +2,7 @@
   import { tick, onMount } from 'svelte';
   import { SvelteMap } from 'svelte/reactivity';
   import Img from '../Img/Img.svelte';
+  import { computeMenuDropdownPosition } from './dropdownPosition';
   import type { MenuProperties, MenuItem, MenuPlacement } from './properties';
 
   let {
@@ -17,7 +18,8 @@
     role: menuRole = 'menu',
     ariaLabel: menuAriaLabel,
     id: menuId,
-    placement = 'bottom-left'
+    placement = 'bottom-left',
+    usePortal = false
   }: MenuProperties = $props();
 
   let itemRole = $derived(menuRole === 'listbox' ? 'option' : 'menuitem');
@@ -25,6 +27,11 @@
   let menuContainerEl: HTMLDivElement | null = $state(null);
   let menuListEl: HTMLDivElement | null = $state(null);
   let triggerEl: HTMLDivElement | null = $state(null);
+  let dropdownWidth = $state(0);
+  let dropdownHeight = $state(0);
+  // Portal placement reads untracked DOM (container rect, viewport); bump on
+  // scroll/resize so the derived style re-runs while the menu is open.
+  let portalTick = $state(0);
   let focusedIndex: number = $state(-1);
   let typeaheadQuery: string = $state('');
   let typeaheadTimer: ReturnType<typeof setTimeout> | null = $state(null);
@@ -65,6 +72,82 @@
     return `${vertical}-${horizontal}`;
   }
 
+  // Gap between trigger and portaled panel, matching the --menu-margin default.
+  const PORTAL_MENU_GAP = 4;
+
+  // Keep the portaled panel anchored to its trigger while the page scrolls or
+  // resizes. Mirrors the chart-tooltip portal pattern; $effect is the sanctioned
+  // reactive escape hatch here for untracked window listeners. Reposition work is
+  // coalesced into one animation frame so fast/inertial scrolling can't thrash
+  // layout with a getBoundingClientRect on every event.
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    if (!usePortal || !open || typeof window === 'undefined') {
+      return;
+    }
+    let frame: number | null = null;
+    const bump = (): void => {
+      if (frame !== null) {
+        return;
+      }
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        portalTick += 1;
+      });
+    };
+    window.addEventListener('scroll', bump, { capture: true, passive: true });
+    window.addEventListener('resize', bump);
+    return () => {
+      window.removeEventListener('scroll', bump, { capture: true });
+      window.removeEventListener('resize', bump);
+      if (frame !== null) {
+        cancelAnimationFrame(frame);
+      }
+    };
+  });
+
+  /**
+   * Svelte action: relocates the dropdown to document.body when usePortal is set,
+   * so a position:fixed panel is never clipped by an overflow/scroll ancestor
+   * (e.g. a table cell). No-op otherwise; `use:` actions never run during SSR.
+   */
+  const portalToBody = (node: HTMLElement) => {
+    if (!usePortal) {
+      return;
+    }
+    document.body.appendChild(node);
+    return { destroy: () => node.remove() };
+  };
+
+  let portalStyle = $derived.by(() => {
+    if (!usePortal || !open || menuContainerEl === null) {
+      return '';
+    }
+    void portalTick;
+    const containerRect = menuContainerEl.getBoundingClientRect();
+    const viewport =
+      typeof window === 'undefined'
+        ? { width: Number.POSITIVE_INFINITY, height: Number.POSITIVE_INFINITY }
+        : { width: window.innerWidth, height: window.innerHeight };
+    const { left, top } = computeMenuDropdownPosition({
+      container: {
+        left: containerRect.left,
+        right: containerRect.right,
+        top: containerRect.top,
+        bottom: containerRect.bottom
+      },
+      dropdown: { width: dropdownWidth, height: dropdownHeight },
+      placement: resolvedPlacement,
+      gap: PORTAL_MENU_GAP,
+      viewport
+    });
+    // Inline wins over the corner-class anchoring, so the portaled panel is
+    // driven entirely by these fixed coordinates. Default into the top-layer
+    // z-index band (root stacking context competes with modals/sheets); consumers
+    // still override via --menu-z-index.
+    return `position:fixed;left:${left}px;top:${top}px;right:auto;bottom:auto;margin:0;z-index:var(--menu-z-index,1000);`;
+  });
+
   let selectableItems: MenuItem[] = $derived(
     items.filter((item) => item.separator !== true && item.disabled !== true)
   );
@@ -231,11 +314,15 @@
   }
 
   function handleClickOutside(event: Event) {
+    // A portaled panel lives outside menuContainerEl, so a click on a separator
+    // or padding inside it is not contained — treat the panel node as "inside"
+    // too, matching the in-flow behaviour of not closing on such clicks.
     if (
       open &&
       event.target instanceof Node &&
       menuContainerEl !== null &&
-      !menuContainerEl.contains(event.target)
+      !menuContainerEl.contains(event.target) &&
+      !(menuListEl !== null && menuListEl.contains(event.target))
     ) {
       close();
     }
@@ -277,11 +364,15 @@
       class="menu-dropdown menu-dropdown-{placement === 'auto' ? resolvedPlacement : placement}"
       class:menu-dropdown-measuring={measuringPlacement}
       bind:this={menuListEl}
+      bind:clientWidth={dropdownWidth}
+      bind:clientHeight={dropdownHeight}
       role={menuRole}
       id={menuId}
       aria-label={menuAriaLabel}
       tabindex="-1"
+      style={portalStyle}
       onkeydown={handleMenuKeydown}
+      use:portalToBody
     >
       {#each items as item (item.value)}
         {#if item.separator === true}

package/dist/Menu/dropdownPosition.d.ts

@@ -0,0 +1,31 @@
+type Rect = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+type Size = {
+    width: number;
+    height: number;
+};
+export type MenuDropdownCorner = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+/**
+ * Pure placement for a portaled Menu dropdown. Returns viewport coordinates for
+ * a `position: fixed` panel anchored to `container` at the resolved corner,
+ * reproducing the in-flow CSS anchoring: `*-left` aligns the panel's left edge
+ * to the container's left, `*-right` aligns its right edge to the container's
+ * right; `bottom-*` sits below the container, `top-*` above it. A `gap` is added
+ * between panel and container, and the result is clamped to a viewport margin.
+ */
+export declare function computeMenuDropdownPosition(opts: {
+    container: Rect;
+    dropdown: Size;
+    placement: MenuDropdownCorner;
+    gap: number;
+    viewport: Size;
+    margin?: number;
+}): {
+    left: number;
+    top: number;
+};
+export {};

package/dist/Menu/dropdownPosition.js

@@ -0,0 +1,23 @@
+/**
+ * Pure placement for a portaled Menu dropdown. Returns viewport coordinates for
+ * a `position: fixed` panel anchored to `container` at the resolved corner,
+ * reproducing the in-flow CSS anchoring: `*-left` aligns the panel's left edge
+ * to the container's left, `*-right` aligns its right edge to the container's
+ * right; `bottom-*` sits below the container, `top-*` above it. A `gap` is added
+ * between panel and container, and the result is clamped to a viewport margin.
+ */
+export function computeMenuDropdownPosition(opts) {
+    const margin = opts.margin ?? 8;
+    const { container, dropdown, placement, gap, viewport } = opts;
+    const anchorsRight = placement === 'bottom-right' || placement === 'top-right';
+    const anchorsTop = placement === 'top-left' || placement === 'top-right';
+    let left = anchorsRight ? container.right - dropdown.width : container.left;
+    let top = anchorsTop ? container.top - dropdown.height - gap : container.bottom + gap;
+    if (Number.isFinite(viewport.width)) {
+        left = Math.max(margin, Math.min(left, viewport.width - dropdown.width - margin));
+    }
+    if (Number.isFinite(viewport.height)) {
+        top = Math.max(margin, Math.min(top, viewport.height - dropdown.height - margin));
+    }
+    return { left, top };
+}

package/dist/Menu/properties.d.ts

@@ -38,6 +38,19 @@ export type OptionalMenuProperties = {
      * / `--menu-dropdown-left` consumer tokens). Fixed corners anchor statically;
      * `'auto'` resolves the best-fitting corner against the viewport on open. */
     placement?: MenuPlacement;
+    /**
+     * When `true`, the dropdown panel is portaled to `document.body` and positioned
+     * `fixed` at the resolved `placement` corner, so an ancestor with
+     * `overflow: hidden` or a scroll container (e.g. a table cell) cannot clip it.
+     * Placement follows the trigger on scroll/resize. Defaults to `false` (in-flow
+     * `position: absolute`), which preserves the existing behaviour — including any
+     * consumer CSS that targets `.menu-dropdown` via an ancestor selector, since
+     * that only resolves while the panel stays inside the `.menu-container`. Opt in
+     * for Menus rendered inside clipping containers. When portaled the panel defaults
+     * to `z-index: 1000` (top-layer band); raise `--menu-z-index` if it must sit
+     * above an even higher overlay.
+     */
+    usePortal?: boolean;
 };
 export type MenuEventProperties = {
     onselect?: (item: MenuItem) => void;

package/dist/Select/Select.svelte

@@ -3,6 +3,7 @@
   import type { SelectItem, SelectProperties } from './properties';
   import Pill from '../Pill/Pill.svelte';
   import Img from '../Img/Img.svelte';
+  import { computeSelectDropdownPosition } from './dropdownPosition';
   import chevronDownSvg from '../assets/chevron-down.svg?raw';
   import checkmarkSvg from '../assets/checkmark.svg?raw';
 
@@ -29,7 +30,8 @@
     dropdownAlign = 'left',
     hierarchy = 'default',
     leftIcon,
-    leftIconTestId
+    leftIconTestId,
+    usePortal = false
   }: SelectProperties = $props();
 
   function normalizeItems(source: SelectItem[] | string[]): SelectItem[] {
@@ -42,6 +44,16 @@
   let containerEl: HTMLDivElement | null = $state(null);
   let searchInputEl: HTMLInputElement | null = $state(null);
   let triggerEl: HTMLDivElement | null = $state(null);
+  let dropdownEl: HTMLDivElement | null = $state(null);
+  let dropdownWidth = $state(0);
+  let dropdownHeight = $state(0);
+  // Portal placement reads untracked DOM (trigger rect, viewport size); bump on
+  // scroll/resize so the derived style re-runs while the dropdown is open.
+  let portalTick = $state(0);
+
+  // Gap between trigger and portaled panel, matching the --select-dropdown-gap
+  // default. The in-flow panel still honours the CSS var via its margin-top.
+  const PORTAL_DROPDOWN_GAP = 4;
 
   const listboxId = `select-listbox-${Math.random().toString(36).slice(2, 9)}`;
 
@@ -95,6 +107,77 @@
 
   let searchPlaceholder = $derived(open && displayText.length > 0 ? displayText : placeholder);
 
+  // Keep the portaled panel anchored to its trigger while the page scrolls or
+  // resizes. Mirrors the chart-tooltip portal pattern; $effect is the sanctioned
+  // reactive escape hatch here for untracked window listeners. Reposition work is
+  // coalesced into one animation frame so fast/inertial scrolling can't thrash
+  // layout with a getBoundingClientRect on every event.
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    if (!usePortal || !open || typeof window === 'undefined') {
+      return;
+    }
+    let frame: number | null = null;
+    const bump = (): void => {
+      if (frame !== null) {
+        return;
+      }
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        portalTick += 1;
+      });
+    };
+    window.addEventListener('scroll', bump, { capture: true, passive: true });
+    window.addEventListener('resize', bump);
+    return () => {
+      window.removeEventListener('scroll', bump, { capture: true });
+      window.removeEventListener('resize', bump);
+      if (frame !== null) {
+        cancelAnimationFrame(frame);
+      }
+    };
+  });
+
+  /**
+   * Svelte action: relocates the dropdown to document.body when usePortal is set,
+   * so a position:fixed panel is never clipped by an overflow/scroll ancestor
+   * (e.g. a table cell). No-op otherwise; `use:` actions never run during SSR.
+   */
+  const portalToBody = (node: HTMLElement) => {
+    if (!usePortal) {
+      return;
+    }
+    document.body.appendChild(node);
+    return { destroy: () => node.remove() };
+  };
+
+  let portalStyle = $derived.by(() => {
+    if (!usePortal || !open || triggerEl === null) {
+      return '';
+    }
+    void portalTick;
+    const rect = triggerEl.getBoundingClientRect();
+    const viewport =
+      typeof window === 'undefined'
+        ? { width: Number.POSITIVE_INFINITY, height: Number.POSITIVE_INFINITY }
+        : { width: window.innerWidth, height: window.innerHeight };
+    const placement = computeSelectDropdownPosition({
+      trigger: {
+        left: rect.left,
+        right: rect.right,
+        top: rect.top,
+        bottom: rect.bottom,
+        width: rect.width
+      },
+      dropdown: { width: dropdownWidth, height: dropdownHeight },
+      viewport,
+      align: dropdownAlign,
+      gap: PORTAL_DROPDOWN_GAP
+    });
+    const widthRule = placement.width === null ? '' : `width:${placement.width}px;`;
+    return `top:${placement.top}px;left:${placement.left}px;min-width:${placement.minWidth}px;${widthRule}`;
+  });
+
   async function openDropdown(): Promise<void> {
     if (disabled || open) {
       return;
@@ -173,8 +256,10 @@
     }
     highlightedIndex = next;
     await tick();
-    if (containerEl !== null) {
-      const el = containerEl.querySelector('.select-option.highlighted');
+    // Query the dropdown node itself, not containerEl, so highlight-scrolling
+    // keeps working once the panel is portaled out to <body>.
+    if (dropdownEl !== null) {
+      const el = dropdownEl.querySelector('.select-option.highlighted');
       if (el instanceof HTMLElement) {
         el.scrollIntoView({ block: 'nearest' });
       }
@@ -275,10 +360,14 @@
   }
 
   function handleClickOutside(event: Event): void {
+    // A portaled dropdown lives outside containerEl, so a click on an option is
+    // not contained by it — treat the dropdown node as "inside" too, otherwise a
+    // multi-select would close on every pick.
     if (
       event.target instanceof Node &&
       containerEl !== null &&
-      !containerEl.contains(event.target)
+      !containerEl.contains(event.target) &&
+      !(dropdownEl !== null && dropdownEl.contains(event.target))
     ) {
       close();
     }
@@ -393,9 +482,15 @@
     <div
       class="select-dropdown"
       class:select-dropdown-right={dropdownAlign === 'right'}
+      class:select-dropdown-portal={usePortal}
+      bind:this={dropdownEl}
+      bind:clientWidth={dropdownWidth}
+      bind:clientHeight={dropdownHeight}
       role="listbox"
       id={listboxId}
       aria-multiselectable={multiple}
+      style={portalStyle}
+      use:portalToBody
     >
       {#if filteredItems.length === 0}
         <div class="select-empty">No results</div>
@@ -626,6 +721,19 @@
     width: var(--select-dropdown-width, max-content);
   }
 
+  .select-dropdown.select-dropdown-portal {
+    /* Portaled to <body>: fixed positioning escapes overflow/scroll ancestors
+       (e.g. a table cell). Placement (top/left/width/min-width) is set inline
+       from the trigger rect, so neutralise the in-flow anchoring here. */
+    position: fixed;
+    right: auto;
+    margin-top: 0;
+    /* In the root stacking context the panel competes with modals/sheets rather
+       than painting above same-container siblings, so default it into the
+       top-layer band (consumers still override via --select-dropdown-z-index). */
+    z-index: var(--select-dropdown-z-index, 1000);
+  }
+
   .select-option {
     padding: var(--select-option-padding, 8px 12px);
     color: var(--select-option-color, #333333);

package/dist/Select/dropdownPosition.d.ts

@@ -0,0 +1,42 @@
+type TriggerRect = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    width: number;
+};
+type Size = {
+    width: number;
+    height: number;
+};
+export type SelectDropdownPlacement = {
+    left: number;
+    top: number;
+    /** Floor width for the panel — always at least the trigger width. */
+    minWidth: number;
+    /**
+     * Explicit width (px) for a left-aligned panel so it matches the trigger,
+     * reproducing the in-flow `left:0; right:0` default. `null` for a
+     * right-aligned panel, which keeps its content/`max-content` width.
+     */
+    width: number | null;
+    /** True when the panel was flipped above the trigger for lack of room below. */
+    flippedUp: boolean;
+};
+/**
+ * Pure placement for a portaled Select dropdown. Coordinates are viewport
+ * coordinates for a `position: fixed` panel anchored to `trigger`. Left-aligned
+ * panels match the trigger width; right-aligned panels hang leftward from the
+ * trigger's right edge using their measured content width. The panel flips above
+ * the trigger only when it cannot fit below and there is more room above, and is
+ * clamped horizontally to a viewport margin.
+ */
+export declare function computeSelectDropdownPosition(opts: {
+    trigger: TriggerRect;
+    dropdown: Size;
+    viewport: Size;
+    align: 'left' | 'right';
+    gap: number;
+    margin?: number;
+}): SelectDropdownPlacement;
+export {};

package/dist/Select/dropdownPosition.js

@@ -0,0 +1,25 @@
+/**
+ * Pure placement for a portaled Select dropdown. Coordinates are viewport
+ * coordinates for a `position: fixed` panel anchored to `trigger`. Left-aligned
+ * panels match the trigger width; right-aligned panels hang leftward from the
+ * trigger's right edge using their measured content width. The panel flips above
+ * the trigger only when it cannot fit below and there is more room above, and is
+ * clamped horizontally to a viewport margin.
+ */
+export function computeSelectDropdownPosition(opts) {
+    const margin = opts.margin ?? 8;
+    const { trigger, dropdown, viewport, align, gap } = opts;
+    const minWidth = trigger.width;
+    const width = align === 'left' ? trigger.width : null;
+    const effectiveWidth = Math.max(align === 'right' ? dropdown.width : trigger.width, trigger.width);
+    let left = align === 'right' ? trigger.right - effectiveWidth : trigger.left;
+    if (Number.isFinite(viewport.width)) {
+        const maxLeft = viewport.width - effectiveWidth - margin;
+        left = Math.max(margin, Math.min(left, maxLeft));
+    }
+    const spaceBelow = viewport.height - trigger.bottom;
+    const spaceAbove = trigger.top;
+    const flippedUp = dropdown.height > 0 && spaceBelow < dropdown.height + gap && spaceAbove > spaceBelow;
+    const top = flippedUp ? trigger.top - gap - dropdown.height : trigger.bottom + gap;
+    return { left, top, minWidth, width, flippedUp };
+}

package/dist/Select/properties.d.ts

@@ -66,6 +66,19 @@ export type OptionalSelectProperties = {
     leftIcon?: string;
     /** `data-pw` test id forwarded to the leading icon `<Img>` element. */
     leftIconTestId?: string;
+    /**
+     * When `true`, the dropdown panel is portaled to `document.body` and positioned
+     * `fixed` relative to the trigger, so an ancestor with `overflow: hidden` or a
+     * scroll container (e.g. a table cell) cannot clip it. Placement follows the
+     * trigger on scroll/resize and flips above the trigger when there is no room
+     * below. Defaults to `false` (in-flow `position: absolute`), which preserves the
+     * existing behaviour — including any consumer CSS that targets `.select-dropdown`
+     * via an ancestor selector, since that only resolves while the panel stays inside
+     * the `.select` container. Opt in for Selects rendered inside clipping containers.
+     * When portaled the panel defaults to `z-index: 1000` (top-layer band); raise
+     * `--select-dropdown-z-index` if it must sit above an even higher overlay.
+     */
+    usePortal?: boolean;
 };
 export type SelectEventProperties = {
     onchange?: (value: string[]) => void;

package/package.json

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