fix: Infer propertly the own props in complex polymorphic components

Author: GianlucaGuarini

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [18.x, 20.x, 22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

index.d.ts

@@ -10,7 +10,9 @@ import type {
 } from 'react';
 
 // Utility type to merge two types
-type Merge<T, U> = Omit<T, keyof U> & U;
+type Merge<T, U> = {
+  [K in keyof T as K extends keyof U ? never : K]: T[K];
+} & U;
 
 // Props type with an "as" prop that allows specifying the element type
 export type PropsWithAs<
@@ -42,14 +44,14 @@ export type PolymorphicExoticProps<
   P,
   T extends ElementType,
   S extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements,
-> = T extends ExoticComponent<infer U> ? PolymorphicProps<Merge<P, PropsWithoutAs<PropsWithoutRef<U>>>, T, S> : never;
+> = T extends ExoticComponent<infer U> ? PolymorphicProps<Merge<PropsWithoutAs<PropsWithoutRef<U>>, P>, T, S> : never;
 
 // Polymorphic props type for functional components
 export type PolymorphicFunctionalProps<
   P,
   T extends ElementType,
   S extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements,
-> = T extends FC<infer U> ? PolymorphicProps<Merge<P, PropsWithoutAs<PropsWithoutRef<U>>>, T, S> : never;
+> = T extends FC<infer U> ? PolymorphicProps<Merge<PropsWithoutAs<PropsWithoutRef<U>>, P>, T, S> : never;
 
 // Type for the forwarded ref of a component
 export type PolymorphicForwardedRef<C extends ElementType> = ComponentPropsWithRef<C>['ref'];

package-lock.json

@@ -42,13 +42,13 @@
   "homepage": "https://github.com/axa-ch/react-polymorphic-types#readme",
   "devDependencies": {
     "@axa-ch/easy-config": "2.1.1",
-    "@biomejs/biome": "1.8.3",
-    "framer-motion": "^11.5.4",
+    "@biomejs/biome": "1.9.3",
+    "framer-motion": "^11.11.7",
     "prettier": "3.3.3",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.3"
   },
   "dependencies": {
-    "@types/react": "^18.3.5",
+    "@types/react": "^18.3.11",
     "react": "^18.3.1"
   }
 }