Incorrect type for `ref` prop in components created by `createLeafComponent` helper in React Aria Component

[pawelblaszczyk5]

Provide a general summary of the issue here

Hello 👋

All components that are created with createLeafComponent helper (e.g. MenuItem, ListBoxItem) have incorrect type for the ref prop, because it's inferred from incorrect generic in the code (value type, instead of element)

If I try to console.log the ref value though it's correctly an underlying div element:

🤔 Expected Behavior?

ref prop should be properly typed as some kind of a HTML element

😯 Current Behavior

ref prop is typed with the generic for value

💁 Possible Solution

It seems like the generics here are a bit off:

https://github.com/adobe/react-spectrum/blob/826d9d450ab075f6e7aa6b4cdcda944b19b12acb/packages/%40react-aria/collections/src/CollectionBuilder.tsx#L159-L161

Currently both of React.RefAttributes in the return types utilize T generic which is used for the generic value of the item. If I change both of them to utilize E which is for element type, the component is properly typed now, but I've got an error by your ESLint configuration that generic T is defined but never used. Hence I didn't provide the PR 😄 But I hope my investigation will be helpful here.

Before:

After:

🔦 Context

At my work we've got internal design system built upon RAC and after upgrading to the latest version I've spotted that we're getting type errors when passing refs to components

🖥️ Steps to Reproduce

https://stackblitz.com/edit/vitejs-vite-7jspea?file=src%2FApp.tsx

1. Try to render e.g. Menu with MenuItem
2. Pass value to MenuItem
3. Try to pass a ref to MenuItem
4. Observe type error. It'll be either on the ref that it's not assignable to the value type or on the value that it's not assignable to HTMLDivElement.

I've used stackblitz instead of codesanbox, because Codesandbox with CRA didn't work for me properly (some strange errors and worse TS support).

Version

1.3.1 React Aria Components

What browsers are you seeing the problem on?

Other

If other, please specify.

N/A

What operating system are you using?

N/A

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for the issue and initial investigation! Looks like a bug.

[levrik]

I was also just hit by this and discovered this after looking into the .d.ts files that are shipping with React Aria Components.

- export const MenuItem: <T extends object>(props: MenuItemProps<T> & React.RefAttributes<T>) => React.ReactElement | null;
+ export const MenuItem: <T extends object, E extends Element>(props: MenuItemProps<T> & React.RefAttributes<E>) => React.ReactElement | null;

I don't know if these types are generated by this createLeafComponent helper mentioned by @pawelblaszczyk5 or if these typings are separate. Would be great to get this fixed!

[imkesin]

Is there already a PR open to address this issue? I took a quick scan, but didn't find anything obvious.

[snowystinger]

nothing at the moment if you want to make a contribution

[snowystinger]

closed by https://github.com/adobe/react-spectrum/pull/8507