[all components] Only define preventBaseUIHandler on event handlers typing that actually contain it

[flaviendelangle]

Fixes #4088

I added support for event.preventBaseUIHandler() but we could also consider removing it from the types when it was not supported 👍

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/@base-ui/react@4089
  

  pnpm add https://pkg.pr.new/@base-ui/utils@4089
  

commit: 073e8a0

[mui-bot]

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui/react	0B(0.00%)	0B(0.00%)

Details of bundle changes

---

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

[aarongarciah]

we could also consider removing it from the types when it was not supported

I think this would make more sense. It'd signals wether an event handler can be prevented (i.e. does something on the Base UI side) or not.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	0314ef2
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/698f573a9b168c00082cfc3c
😎 Deploy Preview	https://deploy-preview-4089--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[flaviendelangle]

The tricky thing is that we have a single interface BaseUIComponentProps that applys the BaseUIEvent (which contains the faulty method) on ALL event handlers.

We could update the typing to reflect the truth but it would make the types a lot harder to maintain 😬

With that being said, it's broken on event handlers we do not define at all (like Accordion.Trigger onMouseDown) and we can't just define every single event handler...

For example:

Another solution is to make the callback nullable on all event handlers, but it's not pretty 😬

[flaviendelangle]

I'm exploring hardcoding the preventable events on a few components to see what it would mean in practice.

[flaviendelangle]

I migrated a few components, but this feels super fragile.
TS can't catch anything if we forget to mark an event as preventable or if we mark an eventable as preventable by mistake.

[atomiks]

Seems like this issue exists because only our internal props are marked with event.preventBaseUIHandler = () => {...}, instead of their props too (as in, the props unique to the JSX callsite)

It seems like if both sets of props are marked, then this issue would be fixed without needing to split types or define every handler upfront

It probably does have a non insignificant runtime cost in some cases though, in which case the type-level fix is better

[flaviendelangle]

It seems like if both sets of props are marked, then this issue would be fixed without needing to split types or define every handler upfront

That's another approach indeed, way better than marking all the event handlers that could potentially exist 😆

I think we can discuss it on today's meeting 👍