@juspay/svelte-ui-components 4.54.1 → 4.54.2

package/dist/SankeyChart/SankeyChart.svelte

@@ -18,6 +18,7 @@
   import { truncateToWidth } from '../_chart/labels';
   import {
     DEFAULT_CHART_CORNER_RADIUS,
+    CHART_LABEL_PLATE_PADDING,
     DEFAULT_CHART_MAX_HEIGHT,
     type TooltipAnchor
   } from '../_chart/types';
@@ -369,8 +370,10 @@
       measureText(truncateColumnLabel(label), colLabelFont).width,
       fontMetrics?.columnWidths[columnIndex] ?? 0
     );
-    const canvasLeft = -(marginX + firstColumnLabelGutter) + 2;
-    const canvasRight = plotWidth + lastColumnLabelGutter + marginX - 2;
+    // Inset by the plate padding: a header clamped any closer paints its plate
+    // outside the SVG, where it is clipped.
+    const canvasLeft = -(marginX + firstColumnLabelGutter) + CHART_LABEL_PLATE_PADDING;
+    const canvasRight = plotWidth + lastColumnLabelGutter + marginX - CHART_LABEL_PLATE_PADDING;
     const min = canvasLeft + textWidth / 2;
     const max = canvasRight - textWidth / 2;
     // Text wider than the whole canvas keeps its centre; the colWidth-based

package/dist/_chart/LabelPlate.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import { onMount, type Snippet } from 'svelte';
+  import { CHART_LABEL_PLATE_PADDING } from './types';
 
   let { children }: { children: Snippet } = $props();
   let group: SVGGElement | null = $state(null);
   let bounds: { x: number; y: number; width: number; height: number } | null = $state(null);
-  const PADDING = 3;
+  const PADDING = CHART_LABEL_PLATE_PADDING;
 
   onMount(() => {
     const text = group?.querySelector('text');

package/dist/_chart/types.d.ts

@@ -18,6 +18,12 @@ export declare const DEFAULT_CHART_CORNER_RADIUS = 4;
  * an explicit `maxHeight` to override it.
  */
 export declare const DEFAULT_CHART_MAX_HEIGHT = 420;
+/**
+ * Padding (px) a label plate draws around its text's bounding box. A label that
+ * is clamped to a canvas edge must stay at least this far inside it, otherwise
+ * its plate paints outside the SVG and is clipped there.
+ */
+export declare const CHART_LABEL_PLATE_PADDING = 3;
 export type Margin = {
     top: number;
     right: number;

package/dist/_chart/types.js

@@ -17,3 +17,9 @@ export const DEFAULT_CHART_CORNER_RADIUS = 4;
  * an explicit `maxHeight` to override it.
  */
 export const DEFAULT_CHART_MAX_HEIGHT = 420;
+/**
+ * Padding (px) a label plate draws around its text's bounding box. A label that
+ * is clamped to a canvas edge must stay at least this far inside it, otherwise
+ * its plate paints outside the SVG and is clipped there.
+ */
+export const CHART_LABEL_PLATE_PADDING = 3;

package/dist/utils.js

@@ -386,8 +386,14 @@ function scrollLocksFor(container) {
         locks = new WeakMap();
         Object.defineProperty(owner, scrollLocksKey, { value: locks });
     }
-    // The same real owner can be adopted into another document while held.
-    Object.defineProperty(activeOwner, activeScrollLocksKey, { value: locks, configurable: true });
+    // The same real owner can be adopted into another document while held. A sealed or
+    // non-extensible owner cannot carry the pointer, so it keeps only the document registry.
+    try {
+        Object.defineProperty(activeOwner, activeScrollLocksKey, { value: locks, configurable: true });
+    }
+    catch {
+        // Locking still works; adoption of such an owner while held is not tracked.
+    }
     return locks;
 }
 const bodyScrollReleases = [];
@@ -415,9 +421,15 @@ export function acquireScrollLock(container = typeof document === 'undefined' ?
                 ]);
             }
         }
-        lock = { count: 0, overflow };
+        lock = {
+            count: 0,
+            overflow,
+            originalCssText: container.style.cssText,
+            lockedCssText: ''
+        };
         scrollLocks.set(container, lock);
         container.style.setProperty('overflow', 'hidden', 'important');
+        lock.lockedCssText = container.style.cssText;
     }
     lock.count += 1;
     const heldLock = lock;
@@ -429,11 +441,18 @@ export function acquireScrollLock(container = typeof document === 'undefined' ?
         released = true;
         heldLock.count -= 1;
         if (heldLock.count === 0) {
-            container.style.removeProperty('overflow');
-            container.style.removeProperty('overflow-x');
-            container.style.removeProperty('overflow-y');
-            for (const [name, value, priority] of heldLock.overflow) {
-                container.style.setProperty(name, value, priority);
+            if (container.style.cssText === heldLock.lockedCssText) {
+                // Nothing else wrote to the inline style while held: put it back verbatim, which keeps the
+                // declaration order that removing and re-adding the overflow longhands would change.
+                container.style.cssText = heldLock.originalCssText;
+            }
+            else {
+                container.style.removeProperty('overflow');
+                container.style.removeProperty('overflow-x');
+                container.style.removeProperty('overflow-y');
+                for (const [name, value, priority] of heldLock.overflow) {
+                    container.style.setProperty(name, value, priority);
+                }
             }
             scrollLocks.delete(container);
             Reflect.deleteProperty(container, activeScrollLocksKey);

package/dist-wc/index.js

@@ -7078,10 +7078,14 @@ function scrollLocksFor(e) {
 	let t = e;
 	if (t[activeScrollLocksKey]) return t[activeScrollLocksKey];
 	let n = e.ownerDocument, i = n[scrollLocksKey];
-	return i || (i = /* @__PURE__ */ new WeakMap(), Object.defineProperty(n, scrollLocksKey, { value: i })), Object.defineProperty(t, activeScrollLocksKey, {
-		value: i,
-		configurable: !0
-	}), i;
+	i || (i = /* @__PURE__ */ new WeakMap(), Object.defineProperty(n, scrollLocksKey, { value: i }));
+	try {
+		Object.defineProperty(t, activeScrollLocksKey, {
+			value: i,
+			configurable: !0
+		});
+	} catch {}
+	return i;
 }
 var bodyScrollReleases = [];
 function acquireScrollLock(e = typeof document > "u" ? null : document.body) {
@@ -7099,15 +7103,20 @@ function acquireScrollLock(e = typeof document > "u" ? null : document.body) {
 		}
 		n = {
 			count: 0,
-			overflow: i
-		}, t.set(e, n), e.style.setProperty("overflow", "hidden", "important");
+			overflow: i,
+			originalCssText: e.style.cssText,
+			lockedCssText: ""
+		}, t.set(e, n), e.style.setProperty("overflow", "hidden", "important"), n.lockedCssText = e.style.cssText;
 	}
 	n.count += 1;
 	let i = n, a = !1;
 	return () => {
 		if (!a && (a = !0, --i.count, i.count === 0)) {
-			e.style.removeProperty("overflow"), e.style.removeProperty("overflow-x"), e.style.removeProperty("overflow-y");
-			for (let [t, n, a] of i.overflow) e.style.setProperty(t, n, a);
+			if (e.style.cssText === i.lockedCssText) e.style.cssText = i.originalCssText;
+			else {
+				e.style.removeProperty("overflow"), e.style.removeProperty("overflow-x"), e.style.removeProperty("overflow-y");
+				for (let [t, n, a] of i.overflow) e.style.setProperty(t, n, a);
+			}
 			t.delete(e), Reflect.deleteProperty(e, activeScrollLocksKey);
 		}
 	};
@@ -39075,7 +39084,7 @@ function SankeyChart(e, t) {
 		}
 		return e;
 	}), Gt = /* @__PURE__ */ user_derived(() => get(Bt).nodes.length > 0 ? Math.max(...get(Bt).nodes.map((e) => e.column)) + 1 : 0), qt = /* @__PURE__ */ user_derived(() => get(Gt) <= 1 ? get(Rt) : (get(Rt) - a()) / (get(Gt) - 1)), Zt = (e) => truncateToWidth(e, Math.max(0, get(qt) - 6), get(Mt)), Qt = (e, t) => {
-		let n = e * get(qt) + a() / 2, i = Math.max(measureText(Zt(t), get(Mt)).width, get(kt)?.columnWidths[e] ?? 0), o = -(ut() + get(Lt)) + 2, s = get(Rt) + get(It) + ut() - 2, c = o + i / 2, l = s - i / 2;
+		let n = e * get(qt) + a() / 2, i = Math.max(measureText(Zt(t), get(Mt)).width, get(kt)?.columnWidths[e] ?? 0), o = -(ut() + get(Lt)) + 3, s = get(Rt) + get(It) + ut() - 3, c = o + i / 2, l = s - i / 2;
 		return l < c ? n : Math.min(Math.max(n, c), l);
 	}, $t = (e) => e === 0 && ct() === "left" || e === get(Gt) - 1 && e !== 0 && lt() === "left", en = (e, t) => truncateToWidth(e, t === 0 && ct() === "left" ? Math.max(0, get(Lt) + ut() - 10 - at()) : t === get(Gt) - 1 && lt() === "right" ? Math.max(0, get(It) + ut() - 10 - at()) : Math.max(0, get(qt) - a() - 20 - at()), get(jt)), tn = /* @__PURE__ */ user_derived(() => {
 		let e = new SvelteMap();

package/package.json

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