Bump @wordpress/dataviews to 17.2.0 (with editor, components, private-apis, theme, ui)

[arthur791004]

Proposed Changes

• Bump @wordpress/dataviews to 17.2.0.
• Bump the WordPress packages that have to move with it: @wordpress/editor to 14.51.0, @wordpress/components to 37.0.0, @wordpress/private-apis to 1.51.0, @wordpress/theme to 1.0.0, @wordpress/ui to 0.18.0.
• Migrate the design tokens @wordpress/theme renamed, and hold the previous button font weight.
• Pass rel explicitly at the two call sites that relied on ExternalLink supplying it.
• Stop the production module collector treating optionalDependencies as required, which was breaking the Docker image build.
• Drop a stale focus workaround in our forked Tabs, stop the sidebar clipping focus rings, let Jest transform @wordpress/theme, and polyfill CSS.supports for JSDOM.

Why are these changes being made?

We want DataViews 17. 17.2.0 fixes the infinite-scroll list jumping while pages load — the footer's visibility no longer depends on the loading state, so it stops mounting mid-load and resizing the scroll container. That's the behaviour the site logs screen runs into.

DataViews 17.2.0 can't land alone. It requires @ariakit/react ^0.4.32, and since the lockfile has to stay deduped, that moves the whole tree to Ariakit 0.4.35. Our @wordpress/components was on 35, which targets the ^0.4.22 era — two generations behind. These packages are released in lockstep, so they move together:

Package	Declares
components 35	ariakit ^0.4.22
components 36	ariakit ^0.4.29
components 37	ariakit ^0.4.32

Pulling components up to 37 then exposed three more mismatches with packages that had been left behind. Each was verified as passing on trunk beforehand, so none of them are pre-existing:

• private-apis 1.48.0 doesn't list @wordpress/global-styles-engine among the modules allowed to opt in to unstable APIs, so importing it threw. 1.51.0 lists it.
• theme 0.15.0 never defined 25 of the --wpds-* tokens components 37 reads, including the focus ring colour and both font weight tokens. Button text and focus rings were resolving to whatever they inherited instead of to design system values. 1.0.0 defines them.
• CSS.supports is now called by Ariakit for feature detection and isn't implemented in JSDOM. Polyfilled next to the existing ResizeObserver and matchMedia shims in the shared package test setup.
• theme 1.0.0 is ESM-only — it declares "type": "module" and its export map offers nothing but .mjs. Jest doesn't transform node_modules, so every suite that reached it through @wordpress/components failed to load. It joins the existing transform exceptions.
• ui 0.17.0 accepts only react-dom ^18, which dragged its whole peer group down to ^18.3.1 and put our React 19 out of range, failing the install outright. 0.18.0 accepts ^18 || ^19.
• The Docker image build broke, and this one took some finding. theme 1.0.0 adds esbuild and vite as peer dependencies where 0.15.0 had only react, react-dom and stylelint. bin/copy-production-modules.js walks peer dependencies, so it now reaches esbuild — which ships one prebuilt binary per platform as optionalDependencies, exactly one of which is ever installed. The script only ever derived "optional" from peerDependenciesMeta, so it walked those binaries as required and aborted on the first one missing. It now honours a package's own optionalDependencies too. Nothing platform-specific: it fails identically anywhere, and only under CALYPSO_ENV=production, which is why it appears in the Docker build and never in local development.

Bumping theme to 1.0.0 renames tokens we consume — --wpds-color-bg-* to background-*, fg-* to foreground-*, stroke-focus-brand to stroke-focus — migrated across 7 files.

Two visible fixes fall out of the same tree, both confirmed in a browser:

• Button font weight. theme 1.0.0 sets --wpds-typography-font-weight-emphasis to 600, where components 35 used 499. We pin 499 so button text keeps its current weight.
• Clipped focus rings. The sidebar's expandable panel clips its contents, with a 2px margin that used to be enough. Ariakit now draws focus rings 4px out (a 2px ring at a 2px offset), so they were being sliced into a stray line. The clip margin now matches.

Considerations

Three deliberate calls worth a look:

• Tabs focus behaviour changed, and this is user-visible rather than just a test update. Our fork carried a useEffect that force-synced Ariakit's active tab to the focused element; upstream removed it once Ariakit handled this natively. Changing the controlled selection while the tablist holds focus now moves focus to the newly selected tab. This is upstream's intended behaviour, not something introduced here — @wordpress/components@37.0.0 ships the same expectation in its own test suite, and ours are updated to match.

• Pinning the font weight to 499 is a deviation, not a repair: 600 is the design system's intended value. It's pinned to avoid a repo-wide weight change riding along with a dependency bump, and it's commented where applied so it can be dropped deliberately later. Calypso and the dashboard load separate entry stylesheets, so the override lives in both.

• ExternalLink no longer sets rel by default. Upstream removed it and asks consumers who relied on it to pass it themselves (Gutenberg #79743). We render roughly 370 of these, so this is worth knowing about even though it needs no sweep: the component still emits target="_blank", and browsers have implied rel="noopener" for that since 2021, so nothing becomes more exposed to tabnabbing. rel="external" was only ever semantic. Two call sites passed a partial rel and leaned on the component to merge external noopener into it — one said so in a comment — and now pass the value they actually want. We follow upstream rather than restoring the old default behind a wrapper, which would mean diverging from the component permanently.

• One .yarnrc.yml entry suppresses rather than fixes. After the ui bump the install still failed on a second react-dom peer group, and that one can't be satisfied by any version: @vgs/collect-js-react and social-logos cap React at 18 while @wordpress/commands wants ^18 || ^19. It is already unsatisfiable on trunk, where it stays quiet because .yarnrc.yml discards these warnings when Yarn attributes them to a @wordpress package. Yarn names an arbitrary member of the group and the bumps changed which one, so the existing filter is extended to cover it — CI and a local machine named different members, so it matches both. Worth knowing this hides a real inconsistency that only a wider React 19 migration resolves. Verified as pre-existing: zero of these errors on trunk against two here, with react-dom@19.2.7 resolving identically in both lockfiles.

• The production image now carries esbuild and vite. They are peer dependencies of theme 1.0.0, and the module collector ships what it walks — it already shipped stylelint for the same reason before this branch. The fix here stops the build failing but does not stop them being shipped, so the server image gains some build tooling it has no use for. Not shipping peer dependencies at all would be the deeper fix, but that changes shared build tooling for every consumer and does not belong in a dependency bump.

• Pinning Ariakit back was considered and rejected. @wordpress/components@35's own ^0.4.22 range still resolves up to 0.4.35, so it wouldn't have avoided the change, and forcing 0.4.26 globally would put DataViews 17 below its declared minimum.

apps/agents-manager stays on @wordpress/components@^28.23.0; it was already a separate copy on trunk and is left alone. --wpds-dimension-base was removed in theme 1.0.0 — its one remaining usage has a 4px fallback matching the old value, so it computes identically, but it's a dangling reference worth cleaning up separately.

Testing Instructions

Automated, all green locally:

• yarn install
• yarn test-client — 1945 suites / 16973 tests
• yarn test-packages — 485 suites / 7335 tests
• yarn test-apps — 16 suites / 154 tests
• yarn test-server — 14 suites / 351 tests
• yarn typecheck-client, yarn typecheck-packages
• yarn dedupe --check
• yarn stylelint and yarn eslint on the touched files
• A full production build in the Docker image's environment — CALYPSO_ENV=production BUILD_TRANSLATION_CHUNKS=true WORKERS=4 NODE_OPTIONS=--max-old-space-size=8192 yarn run build — which is the combination that exercises the client bundle, the language chunks and the production module collector. Worth using rather than a plain yarn run build when checking this branch, since without CALYPSO_ENV=production none of those three steps run and the build passes while the image still fails.

Manually confirmed so far, in a browser:

• Dashboard site logs — renders, sidebar focus rings no longer clipped, button text keeps its previous weight.
• Checkout with a populated cart — order summary, billing, payment method radios, Stripe card fields, totals and the "Pay now" button all render correctly.
• Onboarding stepper, both the domain step and the plans grid — step indicator, plan cards, badges, strikethrough pricing and button variants all correct.
• No React or component errors in the console on any of the above; the only entries are external services blocked locally.

Everything below still needs a pass. Screens are listed by how directly this PR touches them.

Controlled tabs — the actual behaviour change

These are the only four call sites that drive the selection from outside. Tab into the tablist so a tab holds keyboard focus, change the selection, then press the arrow keys: focus now follows the newly selected tab, and arrow navigation continues from there. Worth a keyboard-only and screen-reader pass.

Screen	Where
Site → Performance, Core Web Vitals tabs	/sites/:slug/performance
Site → Performance, backend tabs	/sites/:slug/performance
Plugin detail tabs	/plugins/…
Notifications panel	notifications panel

DataViews infinite scroll — what 17.2.0 fixes

The only three surfaces that opt in. On a list of more than ~50 rows, scroll to the bottom a few times: the footer should no longer appear mid-load and resize the scroll container, and the list should not jump while a page loads.

Screen	Where
Site logs, PHP and web server	/sites/:slug/logs
Blocked sites	/me/blocked-sites
Domain transfer, site picker	domain transfer flow

Focus rings, font weight and composite widgets

• Tab through the dashboard sidebar, including an expanded section such as Logs, and check focus rings are drawn whole rather than clipped.
• Check button and menu text weight looks unchanged against trunk across a few surfaces.
• Date range presets — keyboard navigation through the preset list (arrows, Home, End): site backups, agency site activity, the logs date control, and the classic date range / stats date control.
• Breadcrumbs are shared by every dashboard page header. Narrow the viewport until they collapse, then open the middle-items dropdown. Expected to be unaffected — the test failure there was a JSDOM gap, not a product bug — so this is a confirmation.
• Spot-check a few external links (reader post cards, Mastodon tag feeds, activity log entries): they should still open in a new tab, now without a rel attribute unless the call site sets one.

Wider sweep

@wordpress/components moves two majors and @wordpress/theme moves a major, which together are the widest blast radius here. Spacing, focus rings, colours and design tokens can drift in ways the type checks and unit tests do not catch. Checkout and the stepper are covered above; still unchecked are the Help Center, the domains, emails and billing history lists, and — for @wordpress/editor and private-apis — the block editor, block notes commenting and global styles.

Dark mode is the biggest remaining gap: client/lib/color-scheme/dark-theme.scss is one of the files whose tokens were renamed, and nothing verified so far exercises it.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• For UI changes, have you tested the affected components in dark mode?
• Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

🤖 Generated with Claude Code

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-190155

Jetpack Cloud Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-190155&env=jetpack

Automattic for Agencies Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-190155&env=a8c-for-agencies

Dashboard Live (dotcom) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-190155&env=dashboard

Dashboard Live (A4A) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-190155&env=dashboard-a4a

[github-actions]

Looks like one of the E2E tests has failed.

You can fix them following these steps:

1. Check out this branch locally:

   gh pr checkout 112947

2. Start Claude Code in the repo:

   claude

3. Run the /fix-e2e-tests skill, passing this PR number:

   /fix-e2e-tests 112947