@sybilion/uilib 1.3.65 → 1.3.67

package/dist/esm/types/src/components/ui/Chart/Chart.helpers.d.ts

@@ -1,4 +1,20 @@
 import { ChartConfig } from './Chart.types';
+/** Recharts may reuse/mutate tooltip payload arrays across hovers — copy + dedupe by series key. */
+export type TooltipPayloadEntry = {
+    type?: string;
+    name?: string;
+    dataKey?: string;
+    value?: unknown;
+    payload?: unknown;
+    color?: string;
+};
+export type TooltipItem = TooltipPayloadEntry & {
+    type: string;
+    name: string;
+    value: number | [number, number];
+    color: string;
+};
+export declare function normalizeTooltipPayload(payload: readonly TooltipPayloadEntry[] | undefined | null): TooltipPayloadEntry[] | undefined;
 export declare function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string): {
     label?: React.ReactNode;
     icon?: React.ComponentType;

package/dist/esm/types/src/components/ui/Chart/components/ChartTooltipItem.d.ts

@@ -1,13 +1,6 @@
 import { ReactNode } from 'react';
+import { type TooltipItem } from '../Chart.helpers';
 import { ChartConfig } from '../Chart.types';
-type TooltipItem = {
-    type: string;
-    name: string;
-    value: number | [number, number];
-    payload: unknown;
-    color: string;
-    dataKey?: string;
-};
 type ChartTooltipItemProps = {
     item: TooltipItem;
     index: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.65",
+  "version": "1.3.67",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Chart/Chart.helpers.ts

@@ -1,5 +1,47 @@
 import { ChartConfig } from './Chart.types';
 
+/** Recharts may reuse/mutate tooltip payload arrays across hovers — copy + dedupe by series key. */
+export type TooltipPayloadEntry = {
+  type?: string;
+  name?: string;
+  dataKey?: string;
+  value?: unknown;
+  payload?: unknown;
+  color?: string;
+};
+
+export type TooltipItem = TooltipPayloadEntry & {
+  type: string;
+  name: string;
+  value: number | [number, number];
+  color: string;
+};
+
+export function normalizeTooltipPayload(
+  payload: readonly TooltipPayloadEntry[] | undefined | null,
+): TooltipPayloadEntry[] | undefined {
+  if (!payload?.length) return undefined;
+
+  const seen = new Set<string>();
+  const result: TooltipPayloadEntry[] = [];
+
+  for (const item of payload) {
+    if (
+      item.value === null ||
+      item.value === undefined ||
+      item.type === 'none'
+    ) {
+      continue;
+    }
+    const key = String(item.dataKey ?? item.name ?? result.length);
+    if (seen.has(key)) continue;
+    seen.add(key);
+    result.push({ ...item });
+  }
+
+  return result.length ? result : undefined;
+}
+
 export function getPayloadConfigFromPayload(
   config: ChartConfig,
   payload: unknown,

package/src/components/ui/Chart/components/BaseChartWrapper.tsx

@@ -21,6 +21,7 @@ import { chartRenderQueue } from '#uilib/utils/chartRenderQueue';
 import { Tooltip as ChartTooltip, ComposedChart, LineChart } from 'recharts';
 import { LegendPayload } from 'recharts/types/component/DefaultLegendContent';
 
+import { normalizeTooltipPayload } from '../Chart.helpers';
 import type { ChartConfig } from '../Chart.types';
 import { getPlotViewBox, resolveChartMargin } from '../tools/chartPlotGeometry';
 import { formatDate } from '../tools/formatters';
@@ -390,10 +391,7 @@ const BaseChartWrapperContent = forwardRef<
   const renderTooltipContent = (props: any) => {
     // Filter payload to exclude items with null/undefined values
     // This prevents showing stale data when hovering on dates without data points
-    const filteredPayload = props.payload?.filter(
-      (item: any) =>
-        item.value !== null && item.value !== undefined && item.type !== 'none',
-    );
+    const filteredPayload = normalizeTooltipPayload(props.payload);
 
     // If no valid payload items, render ChartTooltipContent with active=false and empty payload
     // This allows ChartTooltipContent to clear its lastTooltipData state

package/src/components/ui/Chart/components/ChartTooltipContent.tsx

@@ -2,21 +2,17 @@ import cn from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
 
 import { useChart } from '#uilib/components/ui/Chart/Chart.context';
-import { getPayloadConfigFromPayload } from '#uilib/components/ui/Chart/Chart.helpers';
+import {
+  type TooltipItem,
+  type TooltipPayloadEntry,
+  getPayloadConfigFromPayload,
+  normalizeTooltipPayload,
+} from '#uilib/components/ui/Chart/Chart.helpers';
 import { ChartTooltipContentProps } from '#uilib/components/ui/Chart/Chart.types';
 
 import S from '../Chart.styl';
 import { ChartTooltipItem } from './ChartTooltipItem';
 
-type TooltipItem = {
-  type: string;
-  name: string;
-  value: number | [number, number];
-  payload: unknown;
-  color: string;
-  dataKey?: string;
-};
-
 export function ChartTooltipContent({
   active,
   className,
@@ -41,32 +37,41 @@ export function ChartTooltipContent({
     label: string | number | undefined;
   } | null>(null);
 
+  const normalizedPayload = useMemo(
+    () => normalizeTooltipPayload(payload as TooltipPayloadEntry[] | undefined),
+    [payload],
+  );
+
   // Update last tooltip data when active
   useEffect(() => {
-    // Clear lastTooltipData immediately if label changed (prevents stale data)
-    // Only clear if label is explicitly provided and different (not undefined)
-    if (lastTooltipData && label && lastTooltipData.label !== label) {
-      setLastTooltipData(null);
-    }
-
-    if (active && payload?.length) {
-      setLastTooltipData({
-        active,
-        payload: payload as TooltipItem[],
-        label,
-      });
-    }
-    // Don't clear lastTooltipData when mouse moves out - keep it for position maintenance
-    // It will be cleared when label changes (above) or when new active data arrives
-  }, [active, payload, label]);
+    setLastTooltipData(prev => {
+      // Clear when label changed (prevents stale data)
+      let next = prev;
+      if (prev && label && prev.label !== label) {
+        next = null;
+      }
+
+      if (active && normalizedPayload?.length) {
+        return {
+          active: true,
+          payload: normalizedPayload as TooltipItem[],
+          label,
+        };
+      }
+
+      // Keep frozen snapshot when inactive (position maintenance in BaseChartWrapper)
+      if (!active && next) {
+        return { ...next, active: false };
+      }
+
+      return next;
+    });
+  }, [active, normalizedPayload, label]);
 
-  // Use last tooltip data if current is inactive, otherwise use current
-  // lastTooltipData is already cleared in useEffect if label changed, so safe to use here
-  const displayActive = active || (lastTooltipData?.active ?? false);
   const displayPayload: TooltipItem[] | undefined =
-    active && payload?.length
-      ? (payload as TooltipItem[])
-      : lastTooltipData?.payload;
+    active && normalizedPayload?.length
+      ? (normalizedPayload as TooltipItem[])
+      : (lastTooltipData?.payload as TooltipItem[] | undefined);
   const displayLabel = active ? label : lastTooltipData?.label;
 
   const tooltipLabel = useMemo(() => {

package/src/components/ui/Chart/components/ChartTooltipItem.tsx

@@ -1,19 +1,10 @@
 import cn from 'classnames';
 import { CSSProperties, ReactNode } from 'react';
 
-import { getPayloadConfigFromPayload } from '../Chart.helpers';
+import { getPayloadConfigFromPayload, type TooltipItem } from '../Chart.helpers';
 import S from '../Chart.styl';
 import { ChartConfig } from '../Chart.types';
 
-type TooltipItem = {
-  type: string;
-  name: string;
-  value: number | [number, number];
-  payload: unknown;
-  color: string;
-  dataKey?: string;
-};
-
 type ChartTooltipItemProps = {
   item: TooltipItem;
   index: number;