Skip to content

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

Merged
joseazevedo88 merged 3 commits into
mainfrom
feat/charts-visx-4
Jul 27, 2026
Merged

chore(charts): bump visx to v4 for React 19 compatibility#2812
joseazevedo88 merged 3 commits into
mainfrom
feat/charts-visx-4

Conversation

@joseazevedo88

Copy link
Copy Markdown
Contributor

What

Bumps all @visx/* dependencies in @frontify/fondue-charts from ^3.12.0 to ^4.0.0. visx was one of the remaining deps blocking React 19 (v3 peers only allow React 16–18; v4 allows 18 or 19). The package's own peer range stays react: ^18 — widening it is a separate, fondue-wide step.

Changes

  • @visx/* → ^4.0.0 (11 runtime deps + @visx/mock-data).
  • New explicit dependency @react-spring/web: ^10.1.2 — it's a required peer of @visx/xychart that was never declared anywhere; we'd been silently relying on pnpm's autoInstallPeers, which had resolved a stale 9.7.3. v4 requires ^9.7.5 || ^10; the v10 line is the one that also supports React 19, so pinning 9.x would recreate the same blocker one level deeper.
  • Import fixes (8 files, type-only) — visx 4 added exports maps, so deep lib/ imports no longer resolve:
    • TooltipInPortalProps now imported from the @visx/tooltip root (re-exported there)
    • PieArcDatum now imported from d3-shape (visx's type is a direct alias of it; matches existing d3-shape type imports in the same files)
    • TooltipDatum defined locally in getTooltipEntries.ts (no longer exported by @visx/xychart)
  • Fix: LineChart console error on mount (<rect> attribute height: A negative value is not valid) — SeriesClipPath computed clip rect heights from scales before ParentSize measured the container; visx 4's reworked responsive internals surfaced the unguarded math on the first render frame. Geometry is now clamped to ≥ 0; settled renders are unaffected. Also removes three @ts-expect-error directives by reading scale ranges via destructuring-with-defaults.
  • Fix: PieChart arcs showed a focus ring on mouse click — Chromium paints the UA focus ring for SVG elements on plain :focus (not :focus-visible), so the tabIndex arcs rang on click. Pre-existing behavior (v3 identical), fixed while in here: outline suppressed for :focus:not(:focus-visible), keyboard focus ring unchanged.

@joseazevedo88
joseazevedo88 requested review from a team as code owners July 27, 2026 08:44
@changeset-bot

changeset-bot Bot commented Jul 27, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 8f37761

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@frontify/fondue-charts Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@joseazevedo88
joseazevedo88 removed the request for review from Zekvyrin July 27, 2026 08:45
@netlify

netlify Bot commented Jul 27, 2026

Copy link
Copy Markdown

Deploy Preview for fondue-components ready!

Name Link
🔨 Latest commit 8f37761
🔍 Latest deploy log https://app.netlify.com/projects/fondue-components/deploys/6a671a7b4ab27700082623c4
😎 Deploy Preview https://deploy-preview-2812.components.fondue-components.frontify.com
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@joseazevedo88
joseazevedo88 merged commit 8d06f91 into main Jul 27, 2026
20 checks passed
@joseazevedo88
joseazevedo88 deleted the feat/charts-visx-4 branch July 27, 2026 08:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants