TypeScript: adjust Flex types

[kevin-st]

Description

Can the typings of the Flex component be optimized so that it correctly reflects the implementation?

Problem Statement/Justification

I was trying to setup a custom component with motion.create (from Framer Motion), because I don't want to wrap each of my components inside of a motion.div.

Looking at the typing information of motion.create we see that it requires a ForwardRefExoticComponent:

However, if we look at the types of the Flex component, we see that it's typed as a FunctionComponent.

And if we look at the flex.mjs module or inspect the Flex component in the browser with the devtools, we can see that the component in question is a forwarded ref:

So I guess the typings here aren't setup correctly.

Proposed Solution or API

I guess the only thing that would need to be done is changing this:

export declare const Flex: FunctionComponent<FlexProps>;

into this:

export declare const Flex: ForwardedRefExoticComponent<FlexProps>;

in order for the error to go away.

Alternatives

No response

Additional Information

No response

[kevin-st]

Adding onto this, I've just been looking at other files in the jsx directory (e.g. box, container, center, circle...) and it seems they have this same setup as described above. I guess these would need to be changed as well then if my findings are correct.

[segunadebayo]

Interesting. How about doing styled(motion.div) instead?

I'm not inclined to change the typings since React.ForwardRefExoticComponent would fade away in React 19

[kevin-st]

Using styled(motion.div) is indeed also an approach, didn't think of that yet.

I also read yesterday something about forwardRef going to be deprecated at some point in the future, so I understand why you don't want to change the typings.

Anyhow, whatever I wanted to accomplish has been fixed in the meantime, so thanks anyways!