@juspay/svelte-ui-components 2.85.0 → 2.87.0

package/dist/LineChart/properties.d.ts

@@ -103,6 +103,15 @@ export type OptionalLineChartProperties = {
     tooltipSnippet?: Snippet<[LineChartTooltipContext]>;
     /** Content rendered when all series are empty. */
     empty?: Snippet;
+    /** One tooltip listing every series at the hovered x (Highcharts shared tooltip).
+     *  Defaults to true for multi-series charts; single-series behavior is unchanged. */
+    sharedTooltip?: boolean;
+    /** Legend items become click/keyboard toggles for series visibility. */
+    interactiveLegend?: boolean;
+    /** Hide the legend when the measured chart width is below this px value; 0 disables. */
+    hideLegendBelow?: number;
+    /** Render the tooltip into document.body so scroll/overflow ancestors never clip it. */
+    tooltipPortal?: boolean;
     /** Value for the data-pw attribute on the chart container. */
     testId?: string;
     /** CSS class string applied to the top-level element. */

package/dist/Sheet/Sheet.svelte

@@ -1,3 +1,24 @@
+<script lang="ts" module>
+  // Reference-counted so two Sheets open at once (or a Sheet nested inside
+  // another scroll-locking surface) don't have the second one's close clobber
+  // the first one's still-needed lock.
+  let scrollLockCount = 0;
+
+  function lockScroll() {
+    if (scrollLockCount === 0) {
+      document.body.style.overflow = 'hidden';
+    }
+    scrollLockCount += 1;
+  }
+
+  function unlockScroll() {
+    scrollLockCount = Math.max(0, scrollLockCount - 1);
+    if (scrollLockCount === 0) {
+      document.body.style.overflow = '';
+    }
+  }
+</script>
+
 <script lang="ts">
   import type { SheetProperties } from './properties';
   import { fly, fade } from 'svelte/transition';
@@ -9,6 +30,7 @@
     side = 'right',
     title,
     showOverlay = true,
+    dismissOnOutsideClick = showOverlay,
     showCloseButton = true,
     testId,
     content,
@@ -41,7 +63,10 @@
   }
 
   function handleOverlayClick(event: MouseEvent) {
-    if (event.target === overlayDiv) {
+    // Gate dismissal on dismissOnOutsideClick explicitly, not on the overlay's
+    // pointer-events alone: a visible-but-non-dismissible overlay still needs to
+    // catch (and swallow) the click to block the page underneath, without closing.
+    if (event.target === overlayDiv && dismissOnOutsideClick) {
       close();
     }
   }
@@ -71,14 +96,6 @@
     }
   }
 
-  function lockScroll() {
-    document.body.style.overflow = 'hidden';
-  }
-
-  function unlockScroll() {
-    document.body.style.overflow = '';
-  }
-
   function scrollLockAction(_node: HTMLElement) {
     lockScroll();
     tick().then(() => {
@@ -110,7 +127,10 @@
   <div
     bind:this={overlayDiv}
     use:scrollLockAction
-    class="sheet-overlay {showOverlay ? 'overlay-active' : 'overlay-inactive'} {classes ?? ''}"
+    class="sheet-overlay {showOverlay ? 'overlay-visible' : 'overlay-invisible'} {showOverlay ||
+    dismissOnOutsideClick
+      ? 'overlay-interactive'
+      : 'overlay-noninteractive'} {classes ?? ''}"
     onclick={handleOverlayClick}
     onkeydown={handleKeyDown}
     role="button"
@@ -170,12 +190,19 @@
     -webkit-tap-highlight-color: transparent;
   }
 
-  .overlay-active {
+  .overlay-visible {
     background-color: var(--sheet-overlay-background, #00000066);
+  }
+
+  .overlay-invisible {
+    background-color: transparent;
+  }
+
+  .overlay-interactive {
     pointer-events: auto;
   }
 
-  .overlay-inactive {
+  .overlay-noninteractive {
     pointer-events: none;
   }
 
@@ -190,39 +217,44 @@
     outline: none;
   }
 
+  /* --sheet-top/-right/-bottom/-left all default to the previous hardcoded
+     edge-to-edge values below, so an unconfigured Sheet renders unchanged.
+     Overriding one (e.g. --sheet-top to clear a fixed header, or --sheet-bottom:
+     auto to size to content) turns the panel from an edge-to-edge slide-in into
+     an anchored floating panel, without needing a different component. */
   .sheet-panel.left,
   .sheet-panel.right {
-    top: 0;
-    bottom: 0;
+    top: var(--sheet-top, 0);
+    bottom: var(--sheet-bottom, 0);
     width: var(--sheet-width, 400px);
     max-width: var(--sheet-max-width, 100vw);
   }
 
   .sheet-panel.left {
-    left: 0;
+    left: var(--sheet-left, 0);
     border-right: var(--sheet-border, none);
   }
 
   .sheet-panel.right {
-    right: 0;
+    right: var(--sheet-right, 0);
     border-left: var(--sheet-border, none);
   }
 
   .sheet-panel.top,
   .sheet-panel.bottom {
-    left: 0;
-    right: 0;
+    left: var(--sheet-left, 0);
+    right: var(--sheet-right, 0);
     height: var(--sheet-height, 300px);
     max-height: var(--sheet-max-height, 100vh);
   }
 
   .sheet-panel.top {
-    top: 0;
+    top: var(--sheet-top, 0);
     border-bottom: var(--sheet-border, none);
   }
 
   .sheet-panel.bottom {
-    bottom: 0;
+    bottom: var(--sheet-bottom, 0);
     border-top: var(--sheet-border, none);
   }
 

package/dist/Sheet/properties.d.ts

@@ -9,6 +9,14 @@ export type OptionalSheetProperties = {
     side?: SheetSide;
     title?: string;
     showOverlay?: boolean;
+    /**
+     * Whether clicking outside the panel dismisses the sheet, independent of
+     * `showOverlay`'s visual tint. Defaults to mirroring `showOverlay`, so
+     * existing behavior is unchanged unless this is set explicitly. Set this to
+     * `true` alongside `showOverlay={false}` for a dismissible sheet with no
+     * dimming backdrop — e.g. an anchored dropdown-style panel.
+     */
+    dismissOnOutsideClick?: boolean;
     showCloseButton?: boolean;
     testId?: string;
     footer?: Snippet;

package/dist/_chart/Axis.svelte

@@ -10,6 +10,10 @@
     showGridlines = false,
     gridlineLength = 0,
     label,
+    rotateTicks = false,
+    tickEvery = 1,
+    labelOffset = 36,
+    integerTicks = false,
     classes
   }: AxisProperties = $props();
 
@@ -19,7 +23,7 @@
 
   let tickValues = $derived.by(() => {
     if ('ticks' in scale && typeof scale.ticks === 'function') {
-      return scale.ticks(tickCount);
+      return scale.ticks(tickCount, integerTicks);
     }
     if ('domain' in scale && Array.isArray(scale.domain)) {
       return scale.domain;
@@ -47,14 +51,27 @@
       {@const x = positionTick(tick)}
       <g class="tick" transform="translate({x}, 0)">
         <line class="tick-mark" y2={orientation === 'bottom' ? TICK_SIZE : -TICK_SIZE} />
-        <text
-          class="tick-label"
-          y={orientation === 'bottom' ? TICK_SIZE + 4 : -(TICK_SIZE + 4)}
-          text-anchor="middle"
-          dominant-baseline={orientation === 'bottom' ? 'hanging' : 'auto'}
-        >
-          {format(tick)}
-        </text>
+        {#if i % tickEvery === 0}
+          {#if rotateTicks && orientation === 'bottom'}
+            <text
+              class="tick-label"
+              transform="translate(0, {TICK_SIZE + 4}) rotate(-45)"
+              text-anchor="end"
+              dominant-baseline="auto"
+            >
+              {format(tick)}
+            </text>
+          {:else}
+            <text
+              class="tick-label"
+              y={orientation === 'bottom' ? TICK_SIZE + 4 : -(TICK_SIZE + 4)}
+              text-anchor="middle"
+              dominant-baseline={orientation === 'bottom' ? 'hanging' : 'auto'}
+            >
+              {format(tick)}
+            </text>
+          {/if}
+        {/if}
         {#if showGridlines && gridlineLength > 0}
           <line
             class="gridline"
@@ -68,7 +85,7 @@
       <text
         class="axis-label"
         x={(scale.range[0] + scale.range[1]) / 2}
-        y={orientation === 'bottom' ? 36 : -30}
+        y={orientation === 'bottom' ? labelOffset : -30}
         text-anchor="middle"
       >
         {label}
@@ -113,30 +130,30 @@
 
 <style>
   .axis-line {
-    stroke: var(--chart-axis-color, #666);
+    stroke: var(--chart-axis-color, light-dark(#666, #9ca3af));
     stroke-width: var(--chart-axis-stroke-width, 1);
   }
 
   .tick-mark {
-    stroke: var(--chart-axis-color, #666);
+    stroke: var(--chart-axis-color, light-dark(#666, #9ca3af));
     stroke-width: var(--chart-axis-stroke-width, 1);
   }
 
   .tick-label {
-    fill: var(--chart-axis-color, #666);
+    fill: var(--chart-axis-color, light-dark(#666, #9ca3af));
     font-size: var(--chart-axis-font-size, 11px);
     font-family: var(--chart-axis-font-family, inherit);
   }
 
   .axis-label {
-    fill: var(--chart-axis-label-color, #333);
+    fill: var(--chart-axis-label-color, light-dark(#333, #e5e7eb));
     font-size: var(--chart-axis-label-font-size, 12px);
     font-family: var(--chart-axis-font-family, inherit);
     font-weight: 500;
   }
 
   .gridline {
-    stroke: var(--chart-gridline-color, #e0e0e0);
+    stroke: var(--chart-gridline-color, light-dark(#e0e0e0, #374151));
     stroke-opacity: var(--chart-gridline-opacity, 0.5);
     stroke-dasharray: var(--chart-gridline-dash, 4 4);
   }

package/dist/_chart/ChartTooltip.svelte

@@ -1,83 +1,161 @@
 <script lang="ts">
-  import type { ChartTooltipProperties } from './types';
+  import type { ChartTooltipProperties, TooltipData } from './types';
+  import { computeTooltipPosition } from './tooltipPosition';
 
-  let { data, mouseX = 0, mouseY = 0, customSnippet, classes }: ChartTooltipProperties = $props();
-
-  const OFFSET = 12;
+  let {
+    data,
+    mouseX = 0,
+    mouseY = 0,
+    anchor = null,
+    portal = false,
+    originEl = null,
+    unstyled = false,
+    content,
+    customSnippet,
+    classes
+  }: ChartTooltipProperties = $props();
 
   let tooltipEl = $state<HTMLDivElement | null>(null);
   let tooltipWidth = $state(0);
   let tooltipHeight = $state(0);
+  // Portal position depends on untracked DOM reads (originEl rect, viewport
+  // size); bump a tick on scroll/resize so the $derived re-runs while open.
+  let portalTick = $state(0);
 
-  // Clamp against the positioned chart container so the tooltip never spills past
-  // (and gets clipped by) an overflow:hidden edge. Re-read on each measure/move.
-  const containerWidth = $derived(tooltipEl?.offsetParent?.clientWidth ?? Number.POSITIVE_INFINITY);
-  const containerHeight = $derived(
-    tooltipEl?.offsetParent?.clientHeight ?? Number.POSITIVE_INFINITY
-  );
-
-  // Horizontal: flip to the left of the cursor when it would overflow the right edge.
-  const left = $derived.by(() => {
-    let value = mouseX + OFFSET;
-    if (value + tooltipWidth > containerWidth) {
-      value = mouseX - tooltipWidth - OFFSET;
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    if (!portal || data === null || typeof window === 'undefined') {
+      return;
     }
-    return Math.max(0, value);
+    const bump = () => {
+      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);
+    };
   });
 
-  // Vertical: keep the tooltip within the container's top and bottom edges.
-  const top = $derived.by(() => {
-    let value = mouseY - OFFSET;
-    if (value + tooltipHeight > containerHeight) {
-      value = containerHeight - tooltipHeight;
+  /**
+   * Svelte action: relocates the tooltip to document.body so a position:fixed
+   * tooltip is never clipped by an overflow/scroll ancestor. `use:` actions
+   * never run during SSR.
+   */
+  const portalToBody = (node: HTMLElement) => {
+    document.body.appendChild(node);
+    return { destroy: () => node.remove() };
+  };
+
+  const pos = $derived.by(() => {
+    const tooltip = { width: tooltipWidth, height: tooltipHeight };
+    if (portal) {
+      void portalTick;
+      // Convert container coords to viewport coords and clamp to the viewport.
+      const rect = originEl?.getBoundingClientRect();
+      const dx = rect?.left ?? 0;
+      const dy = rect?.top ?? 0;
+      const container =
+        typeof window === 'undefined'
+          ? { width: Number.POSITIVE_INFINITY, height: Number.POSITIVE_INFINITY }
+          : { width: window.innerWidth, height: window.innerHeight };
+      return computeTooltipPosition({
+        mouseX: mouseX + dx,
+        mouseY: mouseY + dy,
+        anchor: anchor === null ? null : { ...anchor, x: anchor.x + dx, y: anchor.y + dy },
+        tooltip,
+        container
+      });
     }
-    return Math.max(0, value);
+    const container = {
+      width: tooltipEl?.offsetParent?.clientWidth ?? Number.POSITIVE_INFINITY,
+      height: tooltipEl?.offsetParent?.clientHeight ?? Number.POSITIVE_INFINITY
+    };
+    return computeTooltipPosition({ mouseX, mouseY, anchor, tooltip, container });
   });
 </script>
 
-{#if data !== null}
-  <div
-    bind:this={tooltipEl}
-    bind:clientWidth={tooltipWidth}
-    bind:clientHeight={tooltipHeight}
-    class="chart-tooltip {classes ?? ''}"
-    style="left: {left}px; top: {top}px;"
-  >
-    {#if typeof customSnippet === 'function'}
-      {@render customSnippet(data)}
-    {:else}
-      {#if data.title}
-        <div class="tooltip-title">{data.title}</div>
-      {/if}
-      {#each data.items as item, i (i)}
-        <div class="tooltip-item">
-          {#if item.color}
-            <span class="tooltip-swatch" style="background: {item.color}"></span>
-          {/if}
-          <span class="tooltip-label">{item.label}</span>
-          <span class="tooltip-value">{item.value}</span>
-        </div>
-      {/each}
+{#snippet inner(tooltipData: TooltipData)}
+  {#if content}
+    {@render content()}
+  {:else if typeof customSnippet === 'function'}
+    {@render customSnippet(tooltipData)}
+  {:else}
+    {#if tooltipData.title}
+      <div class="tooltip-title">{tooltipData.title}</div>
     {/if}
-  </div>
+    {#each tooltipData.items as item, i (i)}
+      <div class="tooltip-item">
+        {#if item.color}
+          <span class="tooltip-swatch" style="background: {item.color}"></span>
+        {/if}
+        <span class="tooltip-label">{item.label}</span>
+        <span class="tooltip-value">{item.value}</span>
+      </div>
+    {/each}
+  {/if}
+{/snippet}
+
+{#if data !== null}
+  {#if portal}
+    <div
+      bind:this={tooltipEl}
+      bind:clientWidth={tooltipWidth}
+      bind:clientHeight={tooltipHeight}
+      class="chart-tooltip portal {unstyled ? 'unstyled' : ''} {classes ?? ''}"
+      style="left: {pos.left}px; top: {pos.top}px;"
+      use:portalToBody
+    >
+      {@render inner(data)}
+    </div>
+  {:else}
+    <div
+      bind:this={tooltipEl}
+      bind:clientWidth={tooltipWidth}
+      bind:clientHeight={tooltipHeight}
+      class="chart-tooltip {unstyled ? 'unstyled' : ''} {classes ?? ''}"
+      style="left: {pos.left}px; top: {pos.top}px;"
+    >
+      {@render inner(data)}
+    </div>
+  {/if}
 {/if}
 
 <style>
   .chart-tooltip {
     position: absolute;
     z-index: var(--chart-tooltip-z-index, 10);
-    background: var(--chart-tooltip-background, rgba(0, 0, 0, 0.85));
-    color: var(--chart-tooltip-color, #fff);
+    background: var(--chart-tooltip-background, light-dark(rgba(0, 0, 0, 0.85), #1f2937));
+    color: var(--chart-tooltip-color, light-dark(#fff, #f3f4f6));
     font-size: var(--chart-tooltip-font-size, 12px);
     font-family: var(--chart-font-family, inherit);
     padding: var(--chart-tooltip-padding, 8px 12px);
     border-radius: var(--chart-tooltip-border-radius, var(--radius, 4px));
     box-shadow: var(--chart-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, 0.2));
+    border: 1px solid
+      var(
+        --chart-tooltip-border-color,
+        light-dark(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.08))
+      );
     pointer-events: none;
     max-width: var(--chart-tooltip-max-width, 280px);
     width: fit-content;
   }
 
+  .chart-tooltip.portal {
+    position: fixed;
+  }
+
+  .chart-tooltip.unstyled {
+    background: none;
+    padding: 0;
+    border: none;
+    box-shadow: none;
+    border-radius: 0;
+    max-width: none;
+  }
+
   .tooltip-title {
     font-weight: 600;
     margin-bottom: 4px;

package/dist/_chart/Legend.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { LegendProperties } from './types';
 
-  let { items, position = 'bottom', customSnippet, classes }: LegendProperties = $props();
+  let { items, position = 'bottom', onToggle, customSnippet, classes }: LegendProperties = $props();
 </script>
 
 {#if items.length > 0}
@@ -10,10 +10,23 @@
       {@render customSnippet(items)}
     {:else}
       {#each items as item, i (i)}
-        <div class="legend-item">
-          <span class="legend-swatch" style="background: {item.color}"></span>
-          <span class="legend-label">{item.label}</span>
-        </div>
+        {#if typeof onToggle === 'function'}
+          <button
+            type="button"
+            class="legend-item legend-toggle"
+            class:legend-hidden={item.hidden}
+            aria-pressed={!item.hidden}
+            onclick={() => onToggle(i)}
+          >
+            <span class="legend-swatch" style="background: {item.color}"></span>
+            <span class="legend-label">{item.label}</span>
+          </button>
+        {:else}
+          <div class="legend-item">
+            <span class="legend-swatch" style="background: {item.color}"></span>
+            <span class="legend-label">{item.label}</span>
+          </div>
+        {/if}
       {/each}
     {/if}
   </div>
@@ -54,6 +67,23 @@
 
   .legend-label {
     font-size: var(--chart-legend-font-size, 12px);
-    color: var(--chart-legend-color, #333);
+    color: var(--chart-legend-color, light-dark(#333, #e5e7eb));
+  }
+
+  .legend-toggle {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .legend-hidden .legend-swatch {
+    opacity: 0.25;
+  }
+
+  .legend-hidden .legend-label {
+    color: var(--chart-legend-hidden-color, light-dark(#bbb, #555));
   }
 </style>

package/dist/_chart/geometry.d.ts

@@ -1,25 +1,35 @@
 import type { Margin, ChartDimensions, PieSliceLayout, ComputedSankeyNode, ComputedSankeyLink, StackedPoint } from './types';
+import { type FontSpec } from './measure';
 export declare function computeChartDimensions(width: number, height: number, margin?: Partial<Margin>): ChartDimensions;
+export type AutoLayoutInput = {
+    width: number;
+    height: number;
+    yTickLabels: string[];
+    xTickLabels: string[];
+    y2TickLabels?: string[];
+    font?: FontSpec;
+    hasXAxisLabel?: boolean;
+    hasYAxisLabel?: boolean;
+    hasY2AxisLabel?: boolean;
+    base?: Partial<Margin>;
+};
+export type AutoLayout = ChartDimensions & {
+    xRotate: boolean;
+    xEvery: number;
+    /**
+     * Baseline y for the bottom-axis title, already inside the reserved title
+     * band — pass straight to Axis.labelOffset, no extra padding needed.
+     */
+    xLabelOffset: number;
+};
 /**
- * Measures rendered text width via a shared offscreen canvas context.
- * Returns null when measurement is unavailable (SSR, or the environment
- * provides no working 2D canvas — e.g. jsdom) so callers can fall back to
- * a fixed layout instead of acting on a bogus 0.
- */
-export declare function measureTextWidth(text: string, font: string): number | null;
-/**
- * Left margin for a horizontal bar chart's category axis, sized to fit the
- * widest category label. Category tick labels render right-aligned 10px left
- * of the axis line (tick mark 6px + 4px gap), so any label wider than
- * `margin.left - 10` bleeds out of the SVG and gets clipped by the page.
- *
- * - Never shrinks below `fallback` (the legacy fixed gutter), so charts whose
- *   labels already fit keep their exact current layout.
- * - Caps at 45% of the chart width so one pathological label cannot crush the
- *   plot area; past the cap the label bleeds as before, but the plot survives.
- * - `widestLabelWidth === null` (SSR / unmeasurable) keeps the legacy gutter.
+ * Measured, Highcharts-style margins: gutters grow to fit formatted tick labels
+ * (instead of clipping) and the bottom axis rotates/thins its labels when the
+ * per-category step is too narrow. Order matters to avoid feedback loops:
+ * left/right derive from label text only, then innerWidth decides x rotation,
+ * then bottom derives from the rotation outcome.
  */
-export declare function computeHorizontalCategoryGutter(widestLabelWidth: number | null, chartWidth: number, fallback?: number): number;
+export declare function computeAutoLayout(input: AutoLayoutInput): AutoLayout;
 export declare function computePieLayout(data: Array<{
     label: string;
     value: number;