search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.81k stars 1.07k forks source link

Feat: `NewRefProp` #3496

Open yishayhaz opened 3 days ago

yishayhaz commented 3 days ago

Resolves #3483

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

image

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.

vercel[bot] commented 3 days ago

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