[mergeProps] TypeScript error with data-* attributes
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Bug report
## Summary
When using `mergeProps` with `useRender`, TypeScript reports an error for `data-*` attributes even though they are valid HTML attributes.
## Steps to reproduce
```tsx
import { useRender } from "@base-ui/react/use-render";
import { mergeProps } from "@base-ui/react/merge-props";
function Title({ render, className, ...props }: useRender.ComponentProps<"div">) {
return useRender({
render,
defaultTagName: "div",
props: mergeProps<"div">(
{
className: "my-class",
"data-slot": "title", // ❌ TypeScript error
},
props
),
});
}
```
## Expected behavior
`data-*` attributes should be accepted without TypeScript errors, as they are valid HTML attributes.
## Actual behavior
TypeScript reports:
```
Object literal may only specify known properties, and '"data-slot"' does not exist in type 'WithBaseUIEvent, HTMLDivElement>>'
```
## Context
- `@base-ui/react` version: 1.0.0
- TypeScript version: 5.x
## Related
This is related to #2370, which fixed the same issue for `useRender.ElementProps`. However, the fix was not applied to `mergeProps`.
Contributor guide
Assessment
This issue has not been assessed yet.