layerchart 0.70.4 → 0.71.1

package/dist/components/Bar.svelte

@@ -118,7 +118,7 @@
     {spring}
     {tweened}
     {stroke}
-    stroke-width={strokeWidth}
+    {strokeWidth}
     rx={radius}
     {...dimensions}
     {...$$restProps}
@@ -135,7 +135,7 @@
     {spring}
     {tweened}
     {stroke}
-    stroke-width={strokeWidth}
+    {strokeWidth}
     {...$$restProps}
     on:click
     on:pointerenter

package/dist/components/Spline.svelte

@@ -238,6 +238,7 @@
       marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
       marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
       marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
+      {...$$restProps}
       in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
       on:click
       on:pointerenter

package/dist/components/tooltip/Tooltip.svelte

@@ -31,7 +31,7 @@
     | 'bottom-right';
   export let anchor: Placement = 'top-left';
 
-  export let contained: 'container' | false = 'container'; // TODO: Support 'window' using getBoundingClientRect()
+  export let contained: 'container' | 'window' | false = 'container';
   export let variant: 'default' | 'invert' | 'none' = 'default';
 
   /** Set to `false` to disable spring transitions */
@@ -134,8 +134,8 @@
     rect.bottom = rect.top + tooltipHeight;
     rect.right = rect.left + tooltipWidth;
 
-    // Check if outside of container and swap align side accordingly
     if (contained === 'container') {
+      // Check if outside of container and swap align side accordingly
       if ((xAlign === 'start' || xAlign === 'center') && rect.right > $containerWidth) {
         rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
       }
@@ -151,11 +151,40 @@
         rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
       }
       rect.bottom = rect.top + tooltipHeight;
+    } else if (contained === 'window') {
+      // Check if outside of window / viewport and swap align side accordingly
+      // Root <div> won't be available on initial mount
+      if (rootEl?.parentElement) {
+        const parentViewportRect = rootEl.parentElement.getBoundingClientRect();
+        if (
+          (xAlign === 'start' || xAlign === 'center') &&
+          parentViewportRect.left + rect.right > window.innerWidth
+        ) {
+          rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
+        }
+        if ((xAlign === 'end' || xAlign === 'center') && parentViewportRect.left + rect.left < 0) {
+          rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
+        }
+        rect.right = rect.left + tooltipWidth;
+
+        if (
+          (yAlign === 'start' || yAlign === 'center') &&
+          parentViewportRect.top + rect.bottom > window.innerHeight
+        ) {
+          rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
+        }
+        if ((yAlign === 'end' || yAlign === 'center') && parentViewportRect.top + rect.top < 0) {
+          rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
+        }
+        rect.bottom = rect.top + tooltipHeight;
+      }
     }
 
     $yPos = rect.top;
     $xPos = rect.left;
   }
+
+  let rootEl: HTMLDivElement;
 </script>
 
 {#if $tooltip.data}
@@ -166,6 +195,7 @@
     transition:fade={{ duration: 100 }}
     bind:clientWidth={tooltipWidth}
     bind:clientHeight={tooltipHeight}
+    bind:this={rootEl}
   >
     <div
       class={cls(

package/dist/components/tooltip/Tooltip.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         xOffset?: number | undefined;
         yOffset?: number | undefined;
         anchor?: ("center" | "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
-        contained?: "container" | false | undefined;
+        contained?: "container" | "window" | false | undefined;
         variant?: "default" | "invert" | "none" | undefined;
         motion?: boolean | undefined;
         classes?: {

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.70.4",
+  "version": "0.71.1",
   "devDependencies": {
     "@changesets/cli": "^2.27.10",
     "@mdi/js": "^7.4.47",