Make ref optional in @mui/base

[Janpot]

Attempt at addressing issues in #43555

It seems to me like this should be optional, but I'm not quite sure if I'm creating some 2nd order effects. Putting it up on a separate PR for review.

[mui-bot]

Netlify deploy preview

https://deploy-preview-43792--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against ceae0a1

[michaldudak]

The types you're editing are types of props supplied to slot components.
So if you're doing <Button slot={{ root: MyButton }} />, MyButton will accept these props. Since we control these, we can be sure that refs are present, so they are not optional. I wonder if setting them as optional would actually be a breaking change.

[Janpot]

Since we control these, we can be sure that refs are present, so they are not optional.

IIUC, forwardRef always turned the ref optional on its return type, regardless of the props. So this was already not enforced.

I wonder if setting them as optional would actually be a breaking change.

If this was only there to enforce it internally, then I don't think this would be a breaking change. And if the previous point is true, then it wasn't working as intended anyways.

[michaldudak]

Side note: I wanted top verify the PR on the preview site's codesandbox, but for some reason there's no Netlify build for it

[michaldudak]

IIUC, forwardRef always turned the ref optional on its return type, regardless of the props.

Not optional, but nullable:

ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;

Also, forwardRef won't be used in React 19, so we'll rely on what's defined in the props directly.

---

But anyway, you're right that it shouldn't be a problem today for React < 19 users.

[Janpot]

Not optional, but nullable:

I meant the property in the resulting component after calling forwardRef. But I guess that's irrelevant when it comes to enforcing this on our side, we'd be satisfying the interface, not the component.

Alternatives that I could come up with:

• Recommend usage of React.PropsWithoutRef

  const Root = React.forwardRef(function Root(
    props: React.PropsWithoutRef<BadgeRootSlotProps>,
    ref: React.ForwardedRef<HTMLSpanElement>,
  ) {
    // ...

• Recommend specifying the generic types in React.forwardRef:

  const Root = React.forwardRef<HTMLSpanElement, BadgeRootSlotProps>(function Root(props, ref) {
    // ...

Both of which would be breaking on the user side. I can't think of a situation where the user would rely on this property being required.

I've changed base to master and pushed an empty commit to trigger a netlify build