fix(OverflowMenu): export v12 prop types and extend div props by RobbieTheWagner · Pull Request #23148 · carbon-design-system/carbon

RobbieTheWagner · 2026-08-27T13:19:26Z

Two TypeScript gaps in the v12 OverflowMenu (OverflowMenu/next), found while adopting enable-v12-overflowmenu in a design system that wraps it.

1. OverflowMenuProps was not exported. Only the component was:

export { OverflowMenu };

Consumers wrapping the v12 component have no way to reference its props. The public OverflowMenu barrel is typed against the v11 prop set (it re-exports OverflowMenuProps from ./OverflowMenu), so anyone using the flag has to either restate the v12 props by hand or reach into the compiled output. Restating them means silent drift as the component evolves.

2. OverflowMenuProps did not extend the container's attributes. The implementation spreads rest props onto the container div:

const OverflowMenu = React.forwardRef(
  ({ autoAlign, children, className, label, /* … */, ...rest }, forwardRef) => {
    // …
    return (
      <div
        {...rest}          // ← container div
        className={containerClasses}

…but the interface did not extend HTMLAttributes / ComponentProps<'div'>, so DOM props were rejected by TypeScript even though they work at runtime:

error TS2322: Property 'onClick' does not exist on type
  'IntrinsicAttributes & OverflowMenuProps & RefAttributes<HTMLDivElement>'.

onClick on the container is a real use case — a menu inside a clickable row needs it to stopPropagation so opening the menu doesn't activate the row.

Both changes follow MenuButton, the closest sibling (same trigger + __container div shape), which already does exactly this:

// packages/react/src/components/MenuButton/index.tsx
export interface MenuButtonProps extends ComponentProps<'div'> { … }

Export style matches ComboButton: export { ComboButton, type ComboButtonProps };

Changelog

New

OverflowMenuProps (v12, OverflowMenu/next) is now exported alongside the component

Changed

OverflowMenuProps (v12) now extends ComponentProps<'div'>, matching the component's rest-prop spread onto the container element

Removed

n/a

Testing / Reviewing

Types only — no runtime change. To verify:

With enable-v12-overflowmenu enabled, pass onClick to OverflowMenu. It should now typecheck, and the handler fires on the container div.
import type { OverflowMenuProps } from '@carbon/react/lib/components/OverflowMenu/next' should resolve.
Declared prop types are not widened by the extends: menuAlignment still rejects anything outside 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'.

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

Reviewed every line of the diff
~~Updated documentation and storybook examples~~ — types-only change, no behavior or API surface to document beyond the exported type
Followed the
required v12 migration documentation
for any code change that affects v12, or struck through this item because
the PR does not affect v12
~~Wrote passing tests that cover this change~~ — no runtime behavior changes; the guarantee is compile-time, covered by the repo's existing typecheck
~~Addressed any impact on accessibility (a11y)~~ — no rendered output changes
~~Tested for cross-browser consistency~~ — no rendered output changes
Validated that this code is ready for review and status checks should pass

More details can be found in the pull request guide

github-actions · 2026-08-27T13:19:39Z

All contributors have signed the DCO.
_{Posted by the DCO Assistant Lite bot.}

The v12 OverflowMenu spreads its rest props onto the container div, but OverflowMenuProps did not extend the div's attributes, so DOM props such as onClick were rejected by TypeScript despite working at runtime. The interface was also unexported, leaving consumers unable to reference it without reaching into the compiled output. Match MenuButton, which exports its props and extends ComponentProps<'div'>. Signed-off-by: Robbie Wagner <2640861+RobbieTheWagner@users.noreply.github.com>

netlify · 2026-08-27T13:20:44Z

✅ Deploy Preview for v12-carbon-react ready!

Name	Link
🔨 Latest commit	`56fbd91`
🔍 Latest deploy log	https://app.netlify.com/projects/v12-carbon-react/deploys/6a90474737f87b00089acd1b
😎 Deploy Preview	https://deploy-preview-23148--v12-carbon-react.netlify.app
📱 Preview on mobile	Toggle 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.

netlify · 2026-08-27T13:21:14Z

✅ Deploy Preview for v12-carbon-web-components ready!

Name	Link
🔨 Latest commit	`56fbd91`
🔍 Latest deploy log	https://app.netlify.com/projects/v12-carbon-web-components/deploys/6a904747755e580008501912
😎 Deploy Preview	https://deploy-preview-23148--v12-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle 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.

netlify · 2026-08-27T13:23:05Z

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	`0c96e2e`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/6a903961da6bdd0008f9fe12
😎 Deploy Preview	https://deploy-preview-23148--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle 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.

netlify · 2026-08-27T13:23:39Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`0c96e2e`
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/6a903961603cdc00082f7982
😎 Deploy Preview	https://deploy-preview-23148--carbon-elements.netlify.app
📱 Preview on mobile	Toggle 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.

netlify · 2026-08-27T13:25:51Z

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	`56fbd91`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/6a9047470bb86100084cb1cd
😎 Deploy Preview	https://deploy-preview-23148--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle 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.

netlify · 2026-08-27T13:27:11Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`56fbd91`
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/6a904747e8158c00085c0b03
😎 Deploy Preview	https://deploy-preview-23148--carbon-elements.netlify.app
📱 Preview on mobile	Toggle 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.

codecov · 2026-08-27T13:33:07Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.65%. Comparing base (c6a9941) to head (56fbd91).
⚠️ Report is 7 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #23148      +/-   ##
==========================================
- Coverage   89.66%   89.65%   -0.01%     
==========================================
  Files         639      639              
  Lines       58865    58865              
  Branches     8267     8321      +54     
==========================================
- Hits        52780    52777       -3     
- Misses       5919     5922       +3     
  Partials      166      166

Flag	Coverage Δ
main-packages	`87.15% <100.00%> (-0.01%)`	⬇️
web-components	`90.52% <ø> (-0.01%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

RobbieTheWagner · 2026-08-27T14:13:44Z

I have read the DCO document and I hereby sign the DCO.

Exporting OverflowMenuProps both inline and in the export statement is a duplicate export. Keep the inline form, matching MenuButton. Extending the div's props also surfaced an existing unsoundness in the barrel: it types props as the v11 shape, which is button-based, and spreads them into the v12 component, which is div-based, so the DOM event handlers are not assignable. Make the conversion explicit, as the v11 branch already does for its ref. Signed-off-by: Robbie Wagner <2640861+RobbieTheWagner@users.noreply.github.com>

netlify · 2026-08-27T14:21:28Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`56fbd91`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/6a904747ffa49d000841a6e9
😎 Deploy Preview	https://deploy-preview-23148--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle 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.

RobbieTheWagner requested a review from a team as a code owner August 27, 2026 13:19

RobbieTheWagner requested review from 2nikhiltom and anamikaanu96 August 27, 2026 13:19

RobbieTheWagner force-pushed the fix/overflowmenu-v12-prop-types branch from 0c96e2e to fa3d302 Compare August 27, 2026 13:20

RobbieTheWagner deployed to @carbon/react storybook preview August 28, 2026 18:11 — with GitHub Actions View deployment

Navigation Menu

Uh oh!

fix(OverflowMenu): export v12 prop types and extend div props - #23148

fix(OverflowMenu): export v12 prop types and extend div props#23148
RobbieTheWagner wants to merge 2 commits into
carbon-design-system:mainfrom
RobbieTheWagner:fix/overflowmenu-v12-prop-types

RobbieTheWagner commented Aug 27, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 27, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Aug 27, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Aug 27, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Aug 27, 2026

Uh oh!

netlify Bot commented Aug 27, 2026

Uh oh!

netlify Bot commented Aug 27, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Aug 27, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Aug 27, 2026 •

edited

Loading

Uh oh!

RobbieTheWagner commented Aug 27, 2026

Uh oh!

netlify Bot commented Aug 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

RobbieTheWagner commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Testing / Reviewing

PR Checklist

Uh oh!

github-actions Bot commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify Bot commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v12-carbon-react ready!

Uh oh!

netlify Bot commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v12-carbon-web-components ready!

Uh oh!

netlify Bot commented Aug 27, 2026

✅ Deploy Preview for v11-carbon-web-components ready!

Uh oh!

netlify Bot commented Aug 27, 2026

✅ Deploy Preview for carbon-elements ready!

Uh oh!

netlify Bot commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v11-carbon-web-components ready!

Uh oh!

netlify Bot commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for carbon-elements ready!

Uh oh!

codecov Bot commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

RobbieTheWagner commented Aug 27, 2026

Uh oh!

netlify Bot commented Aug 27, 2026

✅ Deploy Preview for v11-carbon-react ready!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

RobbieTheWagner commented Aug 27, 2026 •

edited

Loading

github-actions Bot commented Aug 27, 2026 •

edited

Loading

netlify Bot commented Aug 27, 2026 •

edited

Loading

netlify Bot commented Aug 27, 2026 •

edited

Loading

netlify Bot commented Aug 27, 2026 •

edited

Loading

netlify Bot commented Aug 27, 2026 •

edited

Loading

codecov Bot commented Aug 27, 2026 •

edited

Loading