DataViews: use Menu from @wordpress/ui

[oandregal]

Part of #81230

Note

Built on top of #79560 (Menu), which should land first.

What?

Migrates all menus in the @wordpress/dataviews package from the private Menu component in @wordpress/components to the new Menu component in @wordpress/ui:

• Item actions dropdown (table, grid, and list layouts).
• List layout actions dropdown (shares ActionsMenuGroup with the above).
• Table / picker-table column header menu (sorting, add filter, move, insert left/right submenus, hide).
• Filters "Add filter" menu.
• View config layout switcher (ViewTypeMenu).

No usages of the old component remain in the package. The popover-style dropdowns (the "View options" panel, filter chips, modals) never used Menu and are untouched.

Why?

See #81230

Dogfoods the new design-system Menu (#79560) in a real product surface, and removes five more consumers of the @wordpress/components private APIs from a bundled package.

How?

Mechanical API mapping, preserving the existing interaction behaviour.

Testing Instructions

1. Open the Site Editor → Pages (or any DataViews screen).
2. Item actions: click the ⋮ "Actions" button on a row/card. Verify actions run, modals open, and focus returns to the trigger when the menu closes.
3. Column header menu (table layout): click a column header. Verify sorting radio options reflect and update the current sort, "Add filter" opens the filter, "Move left/right" work (including disabled states at the edges), "Insert left/right" submenus list hidden fields, and "Hide column" works.
4. Filters: with hidden filters available, click "Add filter" and add one. When all filters are visible, verify the button is disabled but still focusable, and the menu doesn't open.
5. Layout switcher: with multiple layouts configured, use the "Layout" button and switch between Table/Grid/List. The menu should close on selection.
6. Check RTL (e.g. ?wp_lang=ar... or set the site language) for submenu direction and move left/right behavior.

Testing Instructions for Keyboard

1. Tab to any of the menu triggers above and open with Enter, Space, or ArrowDown.
2. Verify arrow keys move through items, typeahead works, Esc closes and returns focus to the trigger.
3. In submenus ("Insert left/right"), ArrowRight opens and ArrowLeft closes (inverted in RTL).
4. In the list layout, focus the ⋮ actions button of a row: ArrowDown/ArrowUp must move to the next/previous row's actions button (not open the menu); Enter/Space opens it.
5. With a disabled "Add filter" or "Actions" button, verify it is still reachable with Tab, and no key opens a menu.

Use of AI Tools

This PR was authored with Claude Code (Claude Fable 5); the migration, commit structure, and this description were AI-generated under human direction, then reviewed by the PR author.

[oandregal]

One of the differences from the existing component is that the new one doesn't track how many items does it have to handle disability. This is so this works (note how the "Add filter" remains focusable when there's no more filters to add):

Screen.Recording.2026-08-18.at.13.15.50.mov

[oandregal]

This highlights one difference between AriaKit and BaseUI. AriaKit checked if the default event was canceled (example): if so, it would not trigger its own. But BaseUI does not do this, hence the need for stopPropagation.

[oandregal]

This highlights differences between how AriaKit and BaseUI mount the components: it was sync in the former and it's async in the latter.

[github-actions]

Size Change: +86.2 kB (+1.1%)

Total Size: 7.9 MB

📦 View Changed

Filename	Size	Change
build/scripts/block-editor/index.min.js	474 kB	+11 B (0%)
build/scripts/edit-site/index.min.js	380 kB	+29.1 kB (+8.29%)	🔍
build/scripts/editor/index.min.js	577 kB	+27.7 kB (+5.04%)	🔍
build/scripts/media-utils/index.min.js	197 kB	+29.4 kB (+17.52%)	⚠️

_{compressed-size-action}

[ciampo]

@oandregal original PR merged.

I recommend you review the commits from the last day as they could be some breaking changes (for sure, now, consumers are forced to use ItemLabel inside Item , instead of plain text

[oandregal]

Thanks, Marco, I'll get this one ready.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[oandregal]

Code looks good and tested all scenarios work as expected. This is ready.

[ciampo]

LGTM 🚀

Optional, but we should consider adding an ellipsis to those menu items that more input or confirmation before completion, such as as Delete, Rename, and Duplicate

[ciampo]

We shouldn't need to nest Menu.Group inside Menu.RadioGroup, here and everywhere elze in the PR

[oandregal]

Removed it from this instance. The other usages of Menu.Group I found are nested within Menu.Popup, which I understand is correct? Happy to follow up on this if I got it wrong.

[ciampo]

You're correct, my previous comment wasn't clear. All good!

[oandregal]

Optional, but we should consider adding an ellipsis to those menu items that more input or confirmation before completion, such as as Delete, Rename, and Duplicate

👍 I'll look at this separately.

[ciampo]

@oandregal good to merge!

[oandregal]

Optional, but we should consider adding an ellipsis to those menu items that more input or confirmation before completion, such as as Delete, Rename, and Duplicate

Prepared #81994 to look into this.