Adding normal component support to motion.create (#2943)

* Updating * Fixing tests
motiondivision · Dec 13, 2024 · 4cfd7aa · 4cfd7aa
1 parent 5f420cc
commit 4cfd7aa
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 14 deletions.
diff --git a/packages/framer-motion/src/motion/__tests__/custom.test.tsx b/packages/framer-motion/src/motion/__tests__/custom.test.tsx
@@ -8,7 +8,7 @@ interface Props {
     foo: boolean
 }
 
-function runTests(name: string, motionFactory: any) {
+function runTests(name: string, motionFactory: typeof motion.create) {
     describe(name, () => {
         test("accepts custom types", () => {
             const BaseComponent = React.forwardRef(
@@ -24,6 +24,16 @@ function runTests(name: string, motionFactory: any) {
             render(<Component />)
         })
 
+        test("accepts normal component", () => {
+            const MotionComponent = motionFactory((props: Props) =>
+                props.foo ? <div /> : null
+            )
+
+            const Component = () => <MotionComponent foo />
+
+            render(<Component />)
+        })
+
         test("doesn't forward motion props but does forward custom props", () => {
             let animate: any
             let foo: boolean = false

diff --git a/packages/framer-motion/src/render/components/create-factory.ts b/packages/framer-motion/src/render/components/create-factory.ts
@@ -12,9 +12,7 @@ import { createUseRender } from "../dom/use-render"
 
 type MotionComponent<T, P> = T extends keyof DOMMotionComponents
     ? DOMMotionComponents[T]
-    : React.ForwardRefExoticComponent<
-          MotionComponentProps<React.PropsWithChildren<P>>
-      >
+    : React.ComponentType<MotionComponentProps<React.PropsWithChildren<P>>>
 
 export function createMotionComponentFactory(
     preloadedFeatures?: FeaturePackages,
@@ -24,7 +22,7 @@ export function createMotionComponentFactory(
         Props,
         TagName extends keyof DOMMotionComponents | string = "div"
     >(
-        Component: TagName | string | React.ForwardRefExoticComponent<Props>,
+        Component: TagName | string | React.ComponentType<Props>,
         { forwardMotionProps } = { forwardMotionProps: false }
     ) {
         const baseConfig = isSVGComponent(Component)

diff --git a/packages/framer-motion/src/render/components/create-proxy.ts b/packages/framer-motion/src/render/components/create-proxy.ts
@@ -8,9 +8,10 @@ import type { createMotionComponent } from "./motion/create"
  * incorrect relative paths in the exported types and API Extractor throws
  * a wobbly.
  */
-export type CustomDomComponent<Props> = React.ForwardRefExoticComponent<
-    React.PropsWithoutRef<Props & MotionProps> &
-        React.RefAttributes<SVGElement | HTMLElement>
+type ComponentProps<Props> = React.PropsWithoutRef<Props & MotionProps> &
+    React.RefAttributes<SVGElement | HTMLElement>
+export type CustomDomComponent<Props> = React.ComponentType<
+    ComponentProps<Props>
 >
 
 export function createDOMMotionComponentProxy(

diff --git a/packages/framer-motion/src/render/dom/utils/is-svg-component.ts b/packages/framer-motion/src/render/dom/utils/is-svg-component.ts
@@ -1,12 +1,7 @@
 import * as React from "react"
 import { lowercaseSVGElements } from "../../svg/lowercase-elements"
 
-export function isSVGComponent(
-    Component:
-        | string
-        | React.ForwardRefExoticComponent<unknown>
-        | React.ComponentType<React.PropsWithChildren<unknown>>
-) {
+export function isSVGComponent(Component: string | React.ComponentType<any>) {
     if (
         /**
          * If it's not a string, it's a custom React component. Currently we only support