layerchart 2.0.0-next.6 → 2.0.0-next.60

package/dist/components/tooltip/Tooltip.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import type { HTMLAttributes } from 'svelte/elements';
+  import type { PortalOptions } from '@layerstack/svelte-actions/portal';
   import type { Without } from '../../utils/types.js';
-  import type { TooltipPayload } from './tooltipMetaContext.js';
   import type { Placement } from '../types.js';
 
   export type Align = 'start' | 'center' | 'end';
@@ -50,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`)
@@ -103,15 +111,6 @@
            * The chart data that triggered the tooltip.
            */
           data: T;
-
-          /**
-           * An array of tooltip payloads, each containing data for a specific series,
-           * along with their own `payload` property that contains the same data as `data`.
-           *
-           * This is useful when working with the simplified charts, such as `AreaChart`, `BarChart`,
-           * `PieChart`, etc., where series construction is handled internally.
-           */
-          payload: TooltipPayload[];
         },
       ]
     >;
@@ -142,11 +141,20 @@
       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.
      */
-    context?: ChartContextValue<T, any, any>;
+    context?: ChartState<T, any, any>;
   };
 
   export type TooltipProps<T = any> = TooltipPropsWithoutHTML<T> &
@@ -156,20 +164,22 @@
 <script lang="ts" generics="T = any">
   import { fade } from 'svelte/transition';
   import { cls } from '@layerstack/tailwind';
+  import { portal as portalAction } from '@layerstack/svelte-actions/portal';
 
   import { isScaleBand } from '../../utils/scales.svelte.js';
-  import { getChartContext, type ChartContextValue } from '../Chart.svelte';
-  import { getTooltipContext } from './TooltipContext.svelte';
+  import { getChartContext } from '../../contexts/chart.js';
+  import type { ChartState } from '../../states/chart.svelte.js';
   import { createMotion, type MotionProp } from '../../utils/motion.svelte.js';
-  import { untrack, type Snippet } from 'svelte';
-  import { layerClass } from '../../utils/attributes.js';
+  import { type Snippet } from 'svelte';
 
   let {
     anchor = 'top-left',
     classes = {},
     contained = 'container',
+    fadeDuration = 100,
     motion = 'spring',
     pointerEvents = false,
+    portal: portalProp = true,
     variant = 'default',
     x = 'pointer',
     xOffset = x === 'pointer' ? 10 : 0,
@@ -191,33 +201,47 @@
   });
 
   const ctx = getChartContext();
-  const tooltipCtx = getTooltipContext();
 
-  let tooltipWidth = $state(0);
-  let tooltipHeight = $state(0);
+  let tooltipWidth = $state<number | null>(null);
+  let tooltipHeight = $state<number | null>(null);
 
   function alignValue(value: number, align: Align, additionalOffset: number, tooltipSize: number) {
     const alignOffset = align === 'center' ? tooltipSize / 2 : align === 'end' ? tooltipSize : 0;
     return value + (align === 'end' ? -additionalOffset : additionalOffset) - alignOffset;
   }
 
+  const isPortaled = $derived(
+    typeof portalProp === 'boolean' ? portalProp : portalProp?.enabled !== false
+  );
+
   const positions = $derived.by(() => {
-    if (!tooltipCtx.data) {
-      // if no data, fallback?
-      const tooltipX = untrack(() => tooltipCtx.x);
-      const tooltipY = untrack(() => tooltipCtx.y);
-      return { x: tooltipX, y: tooltipY };
+    // 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;
 
+    const rawXGet = x === 'data' ? ctx.xGet(ctx.tooltip.data) : undefined;
+    const xFromData = Array.isArray(rawXGet)
+      ? (rawXGet[0] + rawXGet[rawXGet.length - 1]) / 2
+      : rawXGet;
+
     const xValue: number =
       typeof x === 'number'
         ? x
         : x === 'data'
-          ? ctx.xGet(tooltipCtx.data) + ctx.padding.left + xBandOffset
-          : tooltipCtx.x;
+          ? xFromData + ctx.padding.left + xBandOffset
+          : ctx.tooltip.x;
 
     let xAlign: Align = 'start';
     switch (anchor) {
@@ -243,12 +267,17 @@
     const yBandOffset = isScaleBand(ctx.yScale)
       ? ctx.yScale.step() / 2 - (ctx.yScale.padding() * ctx.yScale.step()) / 2
       : 0;
+    const rawYGet = y === 'data' ? ctx.yGet(ctx.tooltip.data) : undefined;
+    const yFromData = Array.isArray(rawYGet)
+      ? (rawYGet[0] + rawYGet[rawYGet.length - 1]) / 2
+      : rawYGet;
+
     const yValue: number =
       typeof y === 'number'
         ? y
         : y === 'data'
-          ? ctx.yGet(tooltipCtx.data) + ctx.padding.top + yBandOffset
-          : tooltipCtx.y;
+          ? yFromData + ctx.padding.top + yBandOffset
+          : ctx.tooltip.y;
 
     let yAlign: Align = 'start';
     switch (anchor) {
@@ -282,45 +311,73 @@
     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
-          ) {
+          if ((xAlign === 'end' || xAlign === 'center') && containerRect.left + rect.left < 0) {
             rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
           }
         }
@@ -329,82 +386,171 @@
         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,
     };
   });
 
-  const motionX = createMotion(tooltipCtx.x, () => positions.x, motion);
-  const motionY = createMotion(tooltipCtx.y, () => positions.y, motion);
+  const motionX = createMotion(null, () => positions.x, motion);
+  const motionY = createMotion(null, () => positions.y, motion);
 
   $effect(() => {
-    if (!tooltipCtx.data) {
-      tooltipCtx.isHoveringTooltipContent = false;
+    if (!ctx.tooltip.data) {
+      ctx.tooltip.isHoveringTooltipContent = false;
     }
   });
 </script>
 
-{#if tooltipCtx.data}
+{#if ctx.tooltip.data}
   <div
     {...props.root}
-    class={cls(
-      layerClass('tooltip-root'),
-      'absolute z-50 select-none',
-      !pointerEvents && 'pointer-events-none',
-      classes.root,
-      props.root?.class
-    )}
+    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}
     onpointerenter={() => {
-      tooltipCtx.isHoveringTooltipContent = true;
+      ctx.tooltip.isHoveringTooltipContent = true;
     }}
     onpointerleave={() => {
-      tooltipCtx.isHoveringTooltipContent = false;
+      ctx.tooltip.isHoveringTooltipContent = false;
     }}
   >
     <div
       {...props.container}
-      class={cls(
-        layerClass('tooltip-container'),
-        variant !== 'none' && ['text-sm py-1 px-2 h-full rounded-sm elevation-1'],
-        {
-          default: [
-            'bg-surface-100/90 dark:bg-surface-300/90 backdrop-filter backdrop-blur-[2px] text-surface-content',
-            '[&_.label]:text-surface-content/75',
-          ],
-          invert: [
-            'bg-surface-content/90 backdrop-filter backdrop-blur-[2px] text-surface-100 border border-surface-content',
-            '[&_.label]:text-surface-100/50',
-          ],
-          none: '',
-        }[variant],
-        classes.container,
-        props.container?.class,
-        className
-      )}
+      class={cls('lc-tooltip-container', classes.container, props.container?.class, className)}
+      data-variant={variant}
     >
       {#if children}
-        <div {...props.content} class={cls(layerClass('tooltip-content'), classes.content)}>
-          {@render children({ data: tooltipCtx.data, payload: tooltipCtx.payload })}
+        <div {...props.content} class={cls('lc-tooltip-content', classes.content)}>
+          {@render children({ data: ctx.tooltip.data })}
         </div>
       {/if}
     </div>
   </div>
 {/if}
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-root) {
+      position: absolute;
+      z-index: 50;
+      user-select: none;
+
+      &.portaled {
+        position: fixed;
+      }
+
+      &.disablePointerEvents {
+        pointer-events: none;
+      }
+    }
+
+    :where(.lc-tooltip-container) {
+      &:not([data-variant='none']) {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        padding: 4px 8px;
+        height: 100%;
+        border-radius: 0.25rem; /* rounded-sm */
+        box-shadow: /* elevation-1 */
+          0px 2px 1px -1px hsl(0 0% 0% / 20%),
+          0px 1px 1px 0px hsl(0 0% 0% / 14%),
+          0px 1px 3px 0px hsl(0 0% 0% / 12%);
+        /* STYLE-TODO: vendor prefix (-webkit?) */
+        backdrop-filter: blur(2px);
+      }
+
+      &[data-variant='default'] {
+        color: var(--color-surface-content, currentColor);
+        background-color: color-mix(
+          in oklab,
+          light-dark(var(--color-surface-100, white), var(--color-surface-300, black)) 90%,
+          transparent
+        );
+
+        :global(& .label) {
+          color: color-mix(in oklab, var(--color-surface-content, currentColor) 75%, transparent);
+        }
+      }
+
+      &[data-variant='invert'] {
+        color: var(--color-surface-100, light-dark(white, black));
+        background-color: color-mix(
+          in oklab,
+          var(--color-surface-content, currentColor) 90%,
+          transparent
+        );
+
+        :global(& .label) {
+          color: color-mix(
+            in oklab,
+            var(--color-surface-100, light-dark(white, black)) 50%,
+            transparent
+          );
+        }
+      }
+    }
+  }
+</style>

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

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
+import type { PortalOptions } from '@layerstack/svelte-actions/portal';
 import type { Without } from '../../utils/types.js';
-import type { TooltipPayload } from './tooltipMetaContext.js';
 import type { Placement } from '../types.js';
 export type Align = 'start' | 'center' | 'end';
 export type TooltipPropsWithoutHTML<T = any> = {
@@ -42,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`)
@@ -90,14 +97,6 @@ export type TooltipPropsWithoutHTML<T = any> = {
              * The chart data that triggered the tooltip.
              */
             data: T;
-            /**
-             * An array of tooltip payloads, each containing data for a specific series,
-             * along with their own `payload` property that contains the same data as `data`.
-             *
-             * This is useful when working with the simplified charts, such as `AreaChart`, `BarChart`,
-             * `PieChart`, etc., where series construction is handled internally.
-             */
-            payload: TooltipPayload[];
         }
     ]>;
     /**
@@ -124,20 +123,35 @@ 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.
      */
-    context?: ChartContextValue<T, any, any>;
+    context?: ChartState<T, any, any>;
 };
 export type TooltipProps<T = any> = TooltipPropsWithoutHTML<T> & Without<HTMLAttributes<HTMLElement>, TooltipPropsWithoutHTML<T>>;
-import { type ChartContextValue } from '../Chart.svelte';
+import type { ChartState } from '../../states/chart.svelte.js';
 import { type MotionProp } from '../../utils/motion.svelte.js';
 import { type Snippet } from 'svelte';
+declare function $$render<T = any>(): {
+    props: TooltipProps<T>;
+    exports: {};
+    bindings: "rootRef";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T = any> {
-    props(): TooltipProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "rootRef";
     exports(): {};
 }

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

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