layerchart 2.0.0-next.52 → 2.0.0-next.54

package/dist/components/index.d.ts

@@ -66,6 +66,8 @@ export { default as GeoProjection } from './GeoProjection.svelte';
 export * from './GeoProjection.svelte';
 export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
 export * from './GeoEdgeFade.svelte';
+export { default as GeoClipPath } from './GeoClipPath.svelte';
+export * from './GeoClipPath.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
 export * from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';

package/dist/components/index.js

@@ -66,6 +66,8 @@ export { default as GeoProjection } from './GeoProjection.svelte';
 export * from './GeoProjection.svelte';
 export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
 export * from './GeoEdgeFade.svelte';
+export { default as GeoClipPath } from './GeoClipPath.svelte';
+export * from './GeoClipPath.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
 export * from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';

package/dist/components/tooltip/Tooltip.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" module>
   import type { HTMLAttributes } from 'svelte/elements';
+  import type { PortalOptions } from '@layerstack/svelte-actions';
   import type { Without } from '../../utils/types.js';
   import type { Placement } from '../types.js';
 
@@ -49,6 +50,14 @@
      */
     motion?: MotionProp;
 
+    /**
+     * Duration of the fade in/out transition in milliseconds.
+     * Set to `0` to disable the fade transition.
+     *
+     * @default 100
+     */
+    fadeDuration?: number;
+
     /**
      * Allow pointer events.  Disabled by default to reduce accidental selection, but useful to
      * enable to allow interactive tooltips (using `locked`)
@@ -132,6 +141,15 @@
       content?: HTMLAttributes<HTMLElement>;
     };
 
+    /**
+     * Portal the tooltip outside the chart DOM hierarchy to avoid overflow clipping.
+     * Pass `true` to portal to `.PortalTarget` or `document.body`, a string CSS selector,
+     * an HTMLElement, or `false` to disable.
+     *
+     * @default true
+     */
+    portal?: PortalOptions;
+
     /**
      * Optionally pass the chart's context to the tooltip to get
      * type inference for the data.
@@ -146,6 +164,7 @@
 <script lang="ts" generics="T = any">
   import { fade } from 'svelte/transition';
   import { cls } from '@layerstack/tailwind';
+  import { portal as portalAction } from '@layerstack/svelte-actions';
 
   import { isScaleBand } from '../../utils/scales.svelte.js';
   import { getChartContext } from '../../contexts/chart.js';
@@ -157,8 +176,10 @@
     anchor = 'top-left',
     classes = {},
     contained = 'container',
+    fadeDuration = 100,
     motion = 'spring',
     pointerEvents = false,
+    portal: portalProp = true,
     variant = 'default',
     x = 'pointer',
     xOffset = x === 'pointer' ? 10 : 0,
@@ -189,12 +210,23 @@
     return value + (align === 'end' ? -additionalOffset : additionalOffset) - alignOffset;
   }
 
+  const isPortaled = $derived(
+    typeof portalProp === 'boolean' ? portalProp : portalProp?.enabled !== false
+  );
+
   const positions = $derived.by(() => {
     // if no data or tooltip size is not known yet, return null
     if (!ctx.tooltip.data || tooltipWidth === null || tooltipHeight === null) {
       return { x: null, y: null };
     }
 
+    // When portaled, we need the container's viewport rect to convert coordinates
+    const containerRect = isPortaled ? ctx.containerRef?.getBoundingClientRect() : null;
+    // If portaled but container rect not available yet, bail
+    if (isPortaled && !containerRect) {
+      return { x: null, y: null };
+    }
+
     const xBandOffset = isScaleBand(ctx.xScale)
       ? ctx.xScale.step() / 2 - (ctx.xScale.padding() * ctx.xScale.step()) / 2
       : 0;
@@ -279,44 +311,75 @@
     rect.right = rect.left + tooltipWidth;
 
     if (contained === 'container') {
-      // Only attempt repositioning if not fixed (ie. `pointer`/`data`)
-      if (typeof x !== 'number') {
-        // Check if outside of container and swap align side accordingly
-        if ((xAlign === 'start' || xAlign === 'center') && rect.right > ctx.containerWidth) {
-          rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
-        }
-        if ((xAlign === 'end' || xAlign === 'center') && rect.left < ctx.padding.left) {
-          rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
+      if (isPortaled && containerRect) {
+        // Containment in viewport coordinates
+        if (typeof x !== 'number') {
+          if (
+            (xAlign === 'start' || xAlign === 'center') &&
+            containerRect.left + rect.right > containerRect.right
+          ) {
+            rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
+          }
+          if (
+            (xAlign === 'end' || xAlign === 'center') &&
+            containerRect.left + rect.left < containerRect.left + ctx.padding.left
+          ) {
+            rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
+          }
         }
-      }
-      rect.right = rect.left + tooltipWidth;
+        rect.right = rect.left + tooltipWidth;
 
-      if (typeof y !== 'number') {
-        if ((yAlign === 'start' || yAlign === 'center') && rect.bottom > ctx.containerHeight) {
-          rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
+        if (typeof y !== 'number') {
+          if (
+            (yAlign === 'start' || yAlign === 'center') &&
+            containerRect.top + rect.bottom > containerRect.bottom
+          ) {
+            rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
+          }
+          if (
+            (yAlign === 'end' || yAlign === 'center') &&
+            containerRect.top + rect.top < containerRect.top + ctx.padding.top
+          ) {
+            rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
+          }
         }
-        if ((yAlign === 'end' || yAlign === 'center') && rect.top < ctx.padding.top) {
-          rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
+        rect.bottom = rect.top + tooltipHeight;
+      } else {
+        // Original non-portaled container containment
+        if (typeof x !== 'number') {
+          // Check if outside of container and swap align side accordingly
+          if ((xAlign === 'start' || xAlign === 'center') && rect.right > ctx.containerWidth) {
+            rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
+          }
+          if ((xAlign === 'end' || xAlign === 'center') && rect.left < ctx.padding.left) {
+            rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
+          }
+        }
+        rect.right = rect.left + tooltipWidth;
+
+        if (typeof y !== 'number') {
+          if ((yAlign === 'start' || yAlign === 'center') && rect.bottom > ctx.containerHeight) {
+            rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
+          }
+          if ((yAlign === 'end' || yAlign === 'center') && rect.top < ctx.padding.top) {
+            rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
+          }
         }
+        rect.bottom = rect.top + 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 (rootRef?.parentElement) {
-        const parentViewportRect = rootRef.parentElement.getBoundingClientRect();
-
-        // Only attempt repositioning if not fixed (ie. `pointer`/`data`)
+      if (isPortaled && containerRect) {
+        // Already in viewport coordinates, just clamp to window
         if (typeof x !== 'number') {
           if (
             (xAlign === 'start' || xAlign === 'center') &&
-            parentViewportRect.left + rect.right > window.innerWidth
+            containerRect.left + rect.right > window.innerWidth
           ) {
             rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
           }
           if (
             (xAlign === 'end' || xAlign === 'center') &&
-            parentViewportRect.left + rect.left < 0
+            containerRect.left + rect.left < 0
           ) {
             rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
           }
@@ -326,20 +389,67 @@
         if (typeof y !== 'number') {
           if (
             (yAlign === 'start' || yAlign === 'center') &&
-            parentViewportRect.top + rect.bottom > window.innerHeight
+            containerRect.top + rect.bottom > window.innerHeight
           ) {
             rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
           }
-          if ((yAlign === 'end' || yAlign === 'center') && parentViewportRect.top + rect.top < 0) {
+          if (
+            (yAlign === 'end' || yAlign === 'center') &&
+            containerRect.top + rect.top < 0
+          ) {
             rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
           }
         }
         rect.bottom = rect.top + tooltipHeight;
+      } else {
+        // Original non-portaled window containment
+        // Root <div> won't be available on initial mount
+        if (rootRef?.parentElement) {
+          const parentViewportRect = rootRef.parentElement.getBoundingClientRect();
+
+          // Only attempt repositioning if not fixed (ie. `pointer`/`data`)
+          if (typeof x !== 'number') {
+            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 (typeof y !== 'number') {
+            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;
+        }
       }
     }
+
+    // When portaled, convert from container-relative to viewport-relative coordinates
+    const offsetX = isPortaled && containerRect ? containerRect.left : 0;
+    const offsetY = isPortaled && containerRect ? containerRect.top : 0;
+
     return {
-      x: rect.left,
-      y: rect.top,
+      x: rect.left + offsetX,
+      y: rect.top + offsetY,
     };
   });
 
@@ -356,11 +466,13 @@
 {#if ctx.tooltip.data}
   <div
     {...props.root}
+    use:portalAction={portalProp}
     class={cls('lc-tooltip-root', classes.root, props.root?.class)}
     class:disablePointerEvents={pointerEvents === false}
+    class:portaled={isPortaled}
     style:top="{motionY.current}px"
     style:left="{motionX.current}px"
-    transition:fade={{ duration: 100 }}
+    transition:fade={{ duration: fadeDuration }}
     bind:clientWidth={tooltipWidth}
     bind:clientHeight={tooltipHeight}
     bind:this={rootRef}
@@ -392,6 +504,10 @@
       z-index: 50;
       user-select: none;
 
+      &.portaled {
+        position: fixed;
+      }
+
       &.disablePointerEvents {
         pointer-events: none;
       }

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

@@ -1,4 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
+import type { PortalOptions } from '@layerstack/svelte-actions';
 import type { Without } from '../../utils/types.js';
 import type { Placement } from '../types.js';
 export type Align = 'start' | 'center' | 'end';
@@ -41,6 +42,13 @@ export type TooltipPropsWithoutHTML<T = any> = {
      * @default "spring"
      */
     motion?: MotionProp;
+    /**
+     * Duration of the fade in/out transition in milliseconds.
+     * Set to `0` to disable the fade transition.
+     *
+     * @default 100
+     */
+    fadeDuration?: number;
     /**
      * Allow pointer events.  Disabled by default to reduce accidental selection, but useful to
      * enable to allow interactive tooltips (using `locked`)
@@ -115,6 +123,14 @@ export type TooltipPropsWithoutHTML<T = any> = {
          */
         content?: HTMLAttributes<HTMLElement>;
     };
+    /**
+     * Portal the tooltip outside the chart DOM hierarchy to avoid overflow clipping.
+     * Pass `true` to portal to `.PortalTarget` or `document.body`, a string CSS selector,
+     * an HTMLElement, or `false` to disable.
+     *
+     * @default true
+     */
+    portal?: PortalOptions;
     /**
      * Optionally pass the chart's context to the tooltip to get
      * type inference for the data.

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

@@ -0,0 +1 @@
+export {};