Forwarding refs for a polymorphic React component

[SaraRavasio]

Is your feature request related to a problem? Please describe.

At the moment, if I would try to use Box with a as='svg' viewBox='0 0 24 24' property, typescript will complain about the fact that viewBox is not a Box property, but that shouldn't be the case, as it is a property of svg. Plus, they should also allow passing and accepting the correct ref property.

The same goes for other components, especially Flex and Text.

I did my own local override implementation of the types taking inspiration from this article, but would be great if this would come directly from theme-ui.

import React from 'react';
import { Box as ThemeUIBox, BoxProps as ThemeUIBoxProps } from 'theme-ui';

import {
  PolymorphicComponentPropsWithRef,
  PolymorphicRef,
} from '../../../util/types';

export type BoxProps<C extends React.ElementType = 'div'> =
  PolymorphicComponentPropsWithRef<C, ThemeUIBoxProps>;

type BoxComponent = <C extends React.ElementType = 'div'>(
  props: BoxProps<C>
) => React.ReactElement | null;

export const Box: BoxComponent = React.forwardRef(
  <C extends React.ElementType = 'div'>(
    props: BoxProps<C>,
    ref?: PolymorphicRef<C>
  ) => <ThemeUIBox ref={ref} {...props} />
);

Thank you

[lachlanjc]

Thanks for the detailed issue! PR fixing this for everyone would be very welcomed :) Previous attempts to fix this have been too slow, unfortunately.

[hasparus]

Just FYI, the PR addressing this should attach tsc --diagnostics.

Personally, I think it's a footgun, and its every use case could be instead built with sx prop handled by JSX pragma. TypeScript can handle your JSX pragmas, so this shouldn't be a hard sell.

Radix UI's polymorphic package was pretty good, yet they still deprecated it in favor of asChild prop.