fix: update return type for @types/react

[alvarlagerlof]

Issue

In @types/react version 2.14 (could have started earlier), the return type of PolymorphicForwardRefExoticComponent started being incorrect causing a TS error.

Example code

import type {
  PolymorphicForwardRefExoticComponent,
  PolymorphicPropsWithRef,
  PolymorphicPropsWithoutRef,
} from 'react-polymorphic-types'

type BaseButtonDefaultElement = 'button'

const PrimaryButton: PolymorphicForwardRefExoticComponent<
  PrimaryButtonProps,
  BaseButtonDefaultElement
> = forwardRef(function PrimaryButton<T extends React.ElementType = BaseButtonDefaultElement>(
  props: PolymorphicPropsWithoutRef<PrimaryButtonProps, T>,
  ref: React.ForwardedRef<Element>,
) {
  ...
}

Example error

Type 'ForwardRefExoticComponent<Omit<Omit<SVGProps<SVGSymbolElement>, "ref"> | Omit<DetailedHTMLProps<ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>, "ref"> | ... 121 more ... | Omit<...>, keyof BaseButtonCommonProps | ... 3 more ... | "as"> & PrimaryButtonProps & { ...; } & RefAttributes<...>>' is not assignable to type 'PolymorphicForwardRefExoticComponent<PrimaryButtonProps, "button">'.
  Type 'ForwardRefExoticComponent<Omit<Omit<SVGProps<SVGSymbolElement>, "ref"> | Omit<DetailedHTMLProps<ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>, "ref"> | ... 121 more ... | Omit<...>, keyof BaseButtonCommonProps | ... 3 more ... | "as"> & PrimaryButtonProps & { ...; } & RefAttributes<...>>' is not assignable to type '<InstanceT extends ElementType<any> = "button">(props: PolymorphicPropsWithRef<PrimaryButtonProps, InstanceT>) => ReactElement<any, string | JSXElementConstructor<...>> | null'.
    Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | null'.
      Type 'undefined' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | null'.ts(2322)

Proposed solution

When changing it to return React.ReactNode instead of React.ReactElement, the type error goes away. I've tested this in our internal codebase and everything seems to work as expected.

[gynekolog]

The pull request may close the #12

[TheWashiba]

@kripod

[kripod]

I wouldn’t recommend using this project anymore, as outlined over here: kripod/react-polymorphic-box#25 (comment)

I’d suggest using a render prop instead of as, because the latter can’t have prop mappings.

---

@TheWashiba Please be respectful towards OSS contributors. Your behavior is the primary reason I’m tired of maintaining projects like this one. I’m calling this out loud – enough is enough. Feel free to fork the project and create a fix on your own if you want to.

People like you made me burn out. I’ve consciously decided to distance myself from OSS due to its adverse effects on mental health. Maintainers don’t own you a single thing, especially considering the fact that you don’t seem to sponsor any of them.

[TheWashiba]

My apologies @kripod, no disrespect intended here. This finally solved my issue and I was just too hasty to get it merged.

Thank you for your contributions, sincerely

[mihkeleidast]

Note that this change breaks support for older TypeScript versions. To keep support for both, it is necessary to add a separate index.d.ts file for older versions and configure typesVersions in package.json: https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html#version-selection-with-typesversions

Scratch that, see my next suggestion for a better solution.

[mihkeleidast]

Suggested change

	): React.ReactNode | null;
	): ReturnType<React.FunctionComponent>;

Found this works better, with different combinations of TS and React types versions, this library wants to always return whatever React itself returns.

[alvarlagerlof]

Closing because no review activity