chore(charts): bump visx to v4 for React 19 compatibility

.changeset/brown-geese-shine.md

@@ -0,0 +1,5 @@
+---
+'@frontify/fondue-charts': patch
+---
+
+Bump `@visx/*` dependencies to v4 and add an explicit `@react-spring/web` v10 dependency, making the chart internals compatible with React 19 (the package's own peer range is unchanged). Also fixes a transient invalid negative-height clip-path rect on LineChart's first render (console error on mount), and PieChart arcs no longer show a focus ring on mouse click (keyboard focus still does).

packages/charts/package.json

@@ -53,17 +53,18 @@
         "react-dom": "^18"
     },
     "dependencies": {
-        "@visx/axis": "^3.12.0",
-        "@visx/glyph": "^3.12.0",
-        "@visx/grid": "^3.12.0",
-        "@visx/group": "^3.12.0",
-        "@visx/hierarchy": "^3.12.0",
-        "@visx/responsive": "^3.12.0",
-        "@visx/scale": "^3.12.0",
-        "@visx/shape": "^3.12.0",
-        "@visx/text": "^3.12.0",
-        "@visx/tooltip": "^3.12.0",
-        "@visx/xychart": "^3.12.0",
+        "@react-spring/web": "^10.1.2",
+        "@visx/axis": "^4.0.0",
+        "@visx/glyph": "^4.0.0",
+        "@visx/grid": "^4.0.0",
+        "@visx/group": "^4.0.0",
+        "@visx/hierarchy": "^4.0.0",
+        "@visx/responsive": "^4.0.0",
+        "@visx/scale": "^4.0.0",
+        "@visx/shape": "^4.0.0",
+        "@visx/text": "^4.0.0",
+        "@visx/tooltip": "^4.0.0",
+        "@visx/xychart": "^4.0.0",
         "lodash-es": "^4.18.1"
     },
     "devDependencies": {
@@ -87,7 +88,7 @@
         "@types/react": "^18.3.27",
         "@types/react-dom": "^18.3.7",
         "@typescript/native-preview": "7.0.0-dev.20260421.2",
-        "@visx/mock-data": "^3.12.0",
+        "@visx/mock-data": "^4.0.0",
         "@vitejs/plugin-react": "^4.7.0",
         "@vitest/coverage-v8": "^3.2.4",
         "@vitest/ui": "^3.2.4",

packages/charts/src/components/LineChart/components/Series/components/SeriesClipPath.tsx

@@ -13,33 +13,30 @@ type SeriesClipPathProps = {
 export const SeriesClipPath = ({ highlightNegativeValues }: SeriesClipPathProps) => {
     const dataContext = useContext(DataContext);
     const { xScale, yScale } = dataContext;
-    const xScaleRange = [Number(xScale?.range()[0] ?? 0), Number(xScale?.range()[1] ?? 0)];
-    const yScaleRange = [Number(yScale?.range()[0] ?? 0), Number(yScale?.range()[1] ?? 0)];
+    const [xStart = 0, xEnd = 0] = (xScale?.range() ?? []).map(Number);
+    const [yBottom = 0, yTop = 0] = (yScale?.range() ?? []).map(Number);
     const y0 = Number(yScale?.(0) ?? 0);
 
-    // @ts-expect-error Wrong typing in the original code
-    const rectWidth = xScaleRange[1] - xScaleRange[0];
-    // @ts-expect-error Wrong typing in the original code
-    const rectHeight = yScaleRange[0] - yScaleRange[1];
+    // clamp to 0: scales are degenerate on the first, unmeasured render
+    const rectWidth = Math.max(0, xEnd - xStart);
+    const rectHeight = Math.max(0, yBottom - yTop);
 
     return (
         <defs>
             <clipPath id={POSITIVE_CLIP_PATH_ID}>
                 <rect
-                    x={xScaleRange[0]}
-                    y={yScaleRange[1]}
+                    x={xStart}
+                    y={yTop}
                     width={rectWidth}
-                    // @ts-expect-error Wrong typing in the original code
-                    height={highlightNegativeValues ? y0 - yScaleRange[1] : rectHeight}
+                    height={highlightNegativeValues ? Math.max(0, y0 - yTop) : rectHeight}
                 />
             </clipPath>
             <clipPath id={NEGATIVE_CLIP_PATH_ID}>
                 <rect
-                    x={xScaleRange[0]}
+                    x={xStart}
                     y={y0}
                     width={rectWidth}
-                    // @ts-expect-error Wrong typing in the original code
-                    height={highlightNegativeValues ? yScaleRange[0] - y0 : 0}
+                    height={highlightNegativeValues ? Math.max(0, yBottom - y0) : 0}
                 />
             </clipPath>
         </defs>

packages/charts/src/components/LinearGauge/components/LinearGaugeTooltip.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { type TooltipInPortalProps } from '@visx/tooltip/lib/hooks/useTooltipInPortal';
+import { type TooltipInPortalProps } from '@visx/tooltip';
 import { type FC } from 'react';
 
 import { TOOLTIP_OFFSET } from '@components/Treemap/components/TreemapTooltip/constants';

packages/charts/src/components/PieChart/PieChart.module.scss

@@ -11,4 +11,9 @@
     @media (min-width: 768px) {
         gap: var(--spacing-large);
     }
+
+    /* SVG elements get the browser focus ring on plain :focus (not :focus-visible), so mouse clicks would paint it */
+    path[tabindex]:focus:not(:focus-visible) {
+        outline: none;
+    }
 }

packages/charts/src/components/PieChart/components/Arc.tsx

@@ -1,7 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { type PieArcDatum } from '@visx/shape/lib/shapes/Pie';
-import { type Arc as ArcType } from 'd3-shape';
+import { type Arc as ArcType, type PieArcDatum } from 'd3-shape';
 import { type Dispatch, Fragment, type SetStateAction, useState } from 'react';
 
 import { type Padding, type PieChartDatum } from '@components/PieChart';

packages/charts/src/components/PieChart/components/ArcPath.tsx

@@ -1,7 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { type PieArcDatum } from '@visx/shape/lib/shapes/Pie';
-import { type Arc } from 'd3-shape';
+import { type Arc, type PieArcDatum } from 'd3-shape';
 import { useState } from 'react';
 
 import { type PieChartDatum } from '@components/PieChart';

packages/charts/src/components/PieChart/components/Label.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { type PieArcDatum } from '@visx/shape/lib/shapes/Pie';
+import { type PieArcDatum } from 'd3-shape';
 import { type Dispatch, type SetStateAction, useEffect } from 'react';
 
 import { type Padding, type PieChartDatum } from '@components/PieChart';

packages/charts/src/components/PieChart/helpers/resizeArcIfZero.spec.ts

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { type PieArcDatum } from '@visx/shape/lib/shapes/Pie';
+import { type PieArcDatum } from 'd3-shape';
 import { describe, expect, it } from 'vitest';
 
 import { type PieChartDatum } from '@components/PieChart';

packages/charts/src/components/PieChart/helpers/resizeArcIfZero.ts

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { type PieArcDatum } from '@visx/shape/lib/shapes/Pie';
+import { type PieArcDatum } from 'd3-shape';
 
 import { type PieChartDatum } from '@components/PieChart';
 

packages/charts/src/components/Treemap/components/TreemapTooltip/TreemapTooltip.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { type TooltipInPortalProps } from '@visx/tooltip/lib/hooks/useTooltipInPortal';
+import { type TooltipInPortalProps } from '@visx/tooltip';
 import { type FC } from 'react';
 
 import { TOOLTIP_OFFSET } from '@components/Treemap/components/TreemapTooltip/constants';

packages/charts/src/components/common/components/Tooltip/helpers/getTooltipEntries.spec.ts

@@ -1,11 +1,10 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { type TooltipDatum } from '@visx/xychart/lib/types/tooltip';
 import { describe, expect, it, vi } from 'vitest';
 
 import { type LineChartDataPoint } from '@components/LineChart';
 
-import { getTooltipEntries } from './getTooltipEntries';
+import { getTooltipEntries, type TooltipDatum } from './getTooltipEntries';
 
 describe('getTooltipEntries', () => {
     it('returns the expected data', () => {

packages/charts/src/components/common/components/Tooltip/helpers/getTooltipEntries.ts

@@ -1,13 +1,17 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { type TooltipDatum } from '@visx/xychart/lib/types/tooltip';
-
 import { type BarChartDataPoint } from '@components/BarChart';
 import { type LineChartDataPoint } from '@components/LineChart';
 import { getDataPointValue } from '@components/common/components/Tooltip/helpers/getDataPointValue';
 import { isNoDataKey } from '@components/common/components/Tooltip/helpers/isNoDataKey';
 import { type ValueFormatter } from '@components/common/types';
 
+export type TooltipDatum<Datum extends object> = {
+    key: string;
+    index: number;
+    datum: Datum;
+};
+
 export const getTooltipEntries = (
     missingValueLabel: string,
     colorAccessor: (key: string) => string | undefined,