Feat: `NewRefProp`

[yishayhaz]

Resolves #3483

Playground: playgrounds/react/pages/menu/test-menu.tsx

How

I created a new NewRefProp type, but we could easily refactor the existing RefProp type.

export type NewRefProp<T extends ElementType> = unknown extends ComponentPropsWithRef<T>['ref']
  ? {}
  : { ref?: ComponentPropsWithRef<T>['ref'] }

1. While checking for unknown helps to hide ref from potential props when it's not applicable, this approach might not cover all cases. If ref appears as unknown but the component actually expects it, our method might not work as intended. In such scenarios, we may need to consider removing the condition from the type. I personally think it's okay to force typing components properly.

2. I'm currently using React.ComponentWithRef. While I could manually construct the type, adding support for ref callbacks triggers a warning from React.

Important to note

For cases where ref is used as a regular prop (e.g., ({ ref }: { ref: boolean }) => null), React overrides the prop to be optional ref?: boolean. Additionally, using ref as a string causes issues. This problem also exists with the current implementation. As a best practice, users should avoid naming props ref unless they're used as refs.

@RobinMalfait

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 27, 2024 5:48pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 27, 2024 5:48pm