Skip to content

[floating-ui] Remove interaction wrappers#4757

Merged
atomiks merged 3 commits intomui:masterfrom
atomiks:codex/floating-ui-direct-interactions
May 11, 2026
Merged

[floating-ui] Remove interaction wrappers#4757
atomiks merged 3 commits intomui:masterfrom
atomiks:codex/floating-ui-direct-interactions

Conversation

@atomiks
Copy link
Copy Markdown
Contributor

@atomiks atomiks commented May 6, 2026

This removes the internal interaction wrapper hooks and keeps interaction prop merging at the call sites that still need it. Runtime code now uses direct hook props, while tests use a local helper for the old getter-style ergonomics.

Changes

  • Remove useInteractions from the Floating UI runtime exports and move the helper behavior into useTestInteractions for tests.
  • Remove useRole and spell out the small role/ARIA props directly in the Menu and test fixture call sites that used it.
  • Convert Select, Combobox, Menu, Navigation Menu, and Floating UI tests to merge direct interaction props.
  • Keep the wrapper-style prop getter only in test utilities.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 6, 2026

commit: ecb8299

@code-infra-dashboard
Copy link
Copy Markdown

code-infra-dashboard Bot commented May 6, 2026

Bundle size

Bundle Parsed size Gzip size
@base-ui/react ▼-1.63KB(-0.35%) ▼-720B(-0.48%)

Details of bundle changes

Performance

Total duration: 1,228.10 ms 🔺+207.63 ms(+20.3%) | Renders: 50 (+0) | Paint: 1,885.44 ms 🔺+336.41 ms(+21.7%)

Test Duration Renders
Tabs mount (200 instances) 255.85 ms 🔺+58.76 ms(+29.8%) 4 (+0)
Slider mount (300 instances) 181.15 ms 🔺+44.53 ms(+32.6%) 3 (+0)
Tooltip mount (300 contained roots) 60.03 ms 🔺+20.26 ms(+51.0%) 1 (+0)
Scroll Area mount (300 instances) 90.16 ms 🔺+16.00 ms(+21.6%) 3 (+0)
Popover mount (300 instances) 75.36 ms 🔺+14.58 ms(+24.0%) 1 (+0)

…and 7 more — details


Check out the code infra dashboard for more information about this PR.

@netlify
Copy link
Copy Markdown

netlify Bot commented May 6, 2026

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit ecb8299
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/6a017642f55963000832b4a0
😎 Deploy Preview https://deploy-preview-4757--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@atomiks atomiks added the internal Behind-the-scenes enhancement. Formerly called “core”. label May 7, 2026
@atomiks atomiks force-pushed the codex/floating-ui-direct-interactions branch 3 times, most recently from e572493 to 8d2d75d Compare May 7, 2026 02:59
@atomiks atomiks requested review from Copilot May 7, 2026 03:15
@atomiks atomiks force-pushed the codex/floating-ui-direct-interactions branch from 8d2d75d to 5f71c92 Compare May 7, 2026 03:19
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Removes Floating UI “interaction wrapper” hooks (useInteractions, useRole) from the runtime surface and updates Base UI components/tests to merge interaction props directly at call sites, while keeping a getter-style helper for tests (useTestInteractions) to preserve existing test ergonomics.

Changes:

  • Dropped runtime exports for useInteractions/useRole and updated internal types accordingly.
  • Updated Select/Combobox/Menu/Navigation Menu runtime code to explicitly merge hook props (and apply ARIA props directly where needed).
  • Converted Floating UI test fixtures and hook/component tests to use useTestInteractions and/or direct prop merging.

Reviewed changes

Copilot reviewed 33 out of 33 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
packages/react/test/useTestInteractions.ts Renames and rehomes the interactions prop-getter helper for tests (useTestInteractions).
packages/react/test/index.ts Re-exports useTestInteractions from test utilities.
packages/react/test/floating-ui-tests/Popover.tsx Updates fixture to use useTestInteractions and spells out dialog ARIA props.
packages/react/test/floating-ui-tests/Navigation.tsx Updates fixture to use useTestInteractions.
packages/react/test/floating-ui-tests/MenuOrientation.tsx Replaces useRole usage with explicit menu ARIA props + useTestInteractions.
packages/react/test/floating-ui-tests/Menu.tsx Replaces useRole usage with explicit menu ARIA props + useTestInteractions.
packages/react/test/floating-ui-tests/ListboxFocus.tsx Removes useRole and applies listbox role/id directly.
packages/react/test/floating-ui-tests/Grid.tsx Updates fixture to use useTestInteractions.
packages/react/test/floating-ui-tests/EmojiPicker.tsx Replaces useRole with local ARIA props object used via useTestInteractions.
packages/react/test/floating-ui-tests/ComplexGrid.tsx Updates fixture to use useTestInteractions.
packages/react/src/select/root/SelectRootContext.ts Replaces getItemProps API with static itemProps on context.
packages/react/src/select/root/SelectRoot.tsx Removes useInteractions; explicitly merges interaction props and stores popupProps/itemProps.
packages/react/src/select/item/SelectItem.tsx Consumes itemProps instead of calling getItemProps.
packages/react/src/navigation-menu/trigger/NavigationMenuTrigger.tsx Replaces useInteractions with mergeProps for reference interactions.
packages/react/src/menu/trigger/MenuTrigger.tsx Replaces useInteractions with direct prop merging for trigger interactions.
packages/react/src/menu/submenu-trigger/MenuSubmenuTrigger.tsx Replaces useInteractions with direct click.reference usage.
packages/react/src/menu/root/MenuRoot.tsx Removes useRole/useInteractions; builds trigger/popup/item props explicitly.
packages/react/src/floating-ui-react/types.ts Moves/adjusts exported types to reflect removal of wrappers.
packages/react/src/floating-ui-react/index.ts Removes runtime exports for useInteractions and useRole.
packages/react/src/floating-ui-react/hooks/useTypeahead.test.tsx Switches tests from useInteractions to useTestInteractions.
packages/react/src/floating-ui-react/hooks/useListNavigation.ts Updates docs to remove useRole() reference.
packages/react/src/floating-ui-react/hooks/useListNavigation.test.tsx Switches tests from useInteractions to useTestInteractions.
packages/react/src/floating-ui-react/hooks/useInteractions.test.tsx Removes tests for the deleted useInteractions hook.
packages/react/src/floating-ui-react/hooks/useHover.test.tsx Switches tests from useInteractions to useTestInteractions.
packages/react/src/floating-ui-react/hooks/useDismiss.test.tsx Switches tests from useInteractions to useTestInteractions.
packages/react/src/floating-ui-react/hooks/useClientPoint.test.tsx Switches tests from useInteractions to useTestInteractions.
packages/react/src/floating-ui-react/hooks/useClick.test.tsx Switches tests from useInteractions to useTestInteractions.
packages/react/src/floating-ui-react/components/FloatingFocusManager.test.tsx Switches tests from useInteractions (and useRole) to useTestInteractions + local ARIA props.
packages/react/src/floating-ui-react/components/FloatingDelayGroup.test.tsx Switches tests from useInteractions to useTestInteractions.
packages/react/src/floating-ui-react/hooks/useRole.ts Removes the deleted useRole hook implementation.
packages/react/src/combobox/store.ts Replaces getItemProps with stored itemProps in combobox state/selectors.
packages/react/src/combobox/root/AriaCombobox.tsx Removes useInteractions; explicitly merges input/popup/item props and stores them.
packages/react/src/combobox/item/ComboboxItem.tsx Consumes stored itemProps instead of calling getItemProps.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +134 to +145
const menuRoleProps = React.useMemo(
() => ({
reference: {
'aria-haspopup': 'menu' as const,
'aria-expanded': open,
'aria-controls': open ? context.floatingId : undefined,
},
floating: {
id: context.floatingId,
role: 'menu' as const,
},
}),
@atomiks atomiks marked this pull request as ready for review May 7, 2026 03:45
@atomiks
Copy link
Copy Markdown
Contributor Author

atomiks commented May 11, 2026

Code Review (GPT-5.5 + Opus 4.7)

Approve ✅: the two previously noted nits are addressed, and I do not see remaining actionable issues in the refreshed full-branch diff.

1. Remaining Bugs / Issues (None)

No remaining branch-relevant bugs or review nits found.

Previous Review Issues Status

The stale ElementProps.item callback contract was removed from the production Floating UI type surface, with the legacy callback shape kept inside the test-only helper where it is still needed.

The moved interaction-merging helper now has direct regression coverage for handler composition, undefined handlers, non-event on* props, return values, floating focusability props, item callback behavior, and memoized getters.

Behavior Preservation Assessment

The direct mergeProps call sites still preserve the old interaction handler order, and the inline ARIA replacements line up with the removed useRole behavior for Select, Combobox, Menu, Navigation Menu, and the Floating UI test fixtures.

Test Coverage Assessment

I verified the follow-up locally with pnpm test:jsdom useTestInteractions --no-watch, pnpm typescript, and pnpm eslint. GitHub CI has started on the pushed commit and is still pending at the time of this comment.

@atomiks atomiks merged commit 5f13ebe into mui:master May 11, 2026
23 checks passed
@atomiks atomiks deleted the codex/floating-ui-direct-interactions branch May 11, 2026 06:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

internal Behind-the-scenes enhancement. Formerly called “core”.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants