Creating custom Tooltip.Root component and maintaining types

[binhxn]

Hello,

I'm creating a custom Tooltip.Root wrapper to set default props, and maintain prop autocomplete when consuming it, but am having trouble with its types. Following the polymorphic docs, I was able to properly type my custom TooltipArrow component. However, when I tried to follow the same pattern for Tooltip.Arrow, it doesn't work. I've also attempted to use Polymorphic.OwnProps<typeof RadixTooltip.Root>, but that didn't seem to work either. Any ideas on how to approach this? I'd appreciate any suggestions!

Here's a Codesandbox repro. In App.tsx on line 11, you'll see a TS error in my attempt to add polymorphic (forwardRef) types to Tooltip.

edit: added clarification

[jjenzz]

Hi @binhxn 👋 Nice to see you here 🙂

This isn't working for you because you're trying to extend polymorphism for a part that isn't polymorphic:

This usually happens when one of our parts only renders a Provider. So in your case you can get away with just doing something like the following:

const Tooltip: React.FC<React.ComponentProps<typeof RadixTooltip.Root>> = ({ children, ...props }) => {
  return (
    <RadixTooltip.Root delayDuration={200} {...props}>
      {children}
    </RadixTooltip.Root>
  );
};

[binhxn]

@jjenzz Ahh, that makes sense. Looks like I misunderstood polymorphism (and TS in general). In any case, this is what I was looking for. Thank you for the explanation!

[mrmartineau]

FWIW I am using Theme UI and solved this a slightly different way.. I wanted to be able to style Radix component's using Theme UI's sx prop; here's a snippet for the Radix Tabs primitive:

/** @jsxRuntime classic */
/** @jsx jsx */
import { Root, Trigger, List, Content } from '@radix-ui/react-tabs'
import { ThemeUIStyleObject, jsx } from 'theme-ui'

interface StyledProps {
  sx?: ThemeUIStyleObject
}

export type TabsRootProps = React.ComponentProps<typeof Root> & StyledProps

export const Tabs = ({ sx, ...rest }: TabsRootProps): JSX.Element => {
  return <Root sx={{ ...sx }} {...rest} />
}

type TabsTriggerProps = React.ComponentProps<typeof Trigger> & StyledProps
export const TabsTrigger = ({ sx, ...rest }: TabsTriggerProps): JSX.Element => (
  <Trigger sx={{ variant: 'buttons.tab', ...sx }} {...rest} />
)

I am using the method defined here: https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/