From 2a74e6b355e3b215e7f1b18f5cd854caef98ee78 Mon Sep 17 00:00:00 2001
From: Nick Saunders <nick@saunde.rs>
Date: Fri, 28 Jun 2024 17:59:37 -0700
Subject: [PATCH] Prioritize component's own props (#58)

* Fix for prop collision issues.

* add changeset

* Docs update
---
 .changeset/tricky-steaks-leave.md |  5 ++++
 docs/api/react.componentprops.md  | 16 ++++++++-----
 packages/react/src/component.d.ts | 39 +++++++++++++++++--------------
 3 files changed, 37 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/tricky-steaks-leave.md

diff --git a/.changeset/tricky-steaks-leave.md b/.changeset/tricky-steaks-leave.md
new file mode 100644
index 0000000..deef8d3
--- /dev/null
+++ b/.changeset/tricky-steaks-leave.md
@@ -0,0 +1,5 @@
+---
+"@embellish/react": patch
+---
+
+Avoid prop collision issues by prioritizing component's own props.
diff --git a/docs/api/react.componentprops.md b/docs/api/react.componentprops.md
index c1de2ca..68d4880 100644
--- a/docs/api/react.componentprops.md
+++ b/docs/api/react.componentprops.md
@@ -14,10 +14,7 @@ P,
 C extends string,
 Is extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>,
 InlineConditionName extends string,
-> = {
-    is?: Is;
-} & Omit<JSX.LibraryManagedAttributes<Is, ComponentPropsWithRef<Is>>, never> &
-(string extends C
+OwnProps = (string extends C
 ? unknown
 : {
     conditions?: {
@@ -37,7 +34,14 @@ Partial<{
     : PropName extends keyof P
     ? P[PropName]
     : never;
-}>;
+}>,
+> = {
+    is?: Is;
+} & Omit<
+JSX.LibraryManagedAttributes<Is, ComponentPropsWithRef<Is>>,
+keyof OwnProps
+> &
+OwnProps;
 ```
-**References:** [ComponentPropsWithRef](./react.componentpropswithref.md)<!-- -->, [ValidConditionName](./react.validconditionname.md)<!-- -->, [Condition](./react.condition.md)
+**References:** [ValidConditionName](./react.validconditionname.md)<!-- -->, [Condition](./react.condition.md)<!-- -->, [ComponentPropsWithRef](./react.componentpropswithref.md)
 
diff --git a/packages/react/src/component.d.ts b/packages/react/src/component.d.ts
index 0ab0511..cbc115a 100644
--- a/packages/react/src/component.d.ts
+++ b/packages/react/src/component.d.ts
@@ -52,6 +52,7 @@ export interface ComponentOptions<P, C extends string, DefaultIs> {
  * @typeParam C - Type of supported condition names
  * @typeParam Is - Type of element to render the component
  * @typeParam InlineConditionName - Type of inline condition names
+ * @typeParam OwnProps - Type of the component's own props
  *
  * @public
  */
@@ -60,10 +61,7 @@ export type ComponentProps<
   C extends string,
   Is extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>,
   InlineConditionName extends string,
-> = {
-  is?: Is;
-} & Omit<JSX.LibraryManagedAttributes<Is, ComponentPropsWithRef<Is>>, never> &
-  (string extends C
+  OwnProps = (string extends C
     ? unknown
     : {
         conditions?: {
@@ -71,19 +69,26 @@ export type ComponentProps<
             Condition<C>;
         };
       }) &
-  Partial<{
-    [PropName in
-      | keyof P
-      | (keyof P extends string
-          ? `${C | InlineConditionName}:${keyof P}`
-          : never)]: PropName extends `${C | InlineConditionName}:${infer BasePropName}`
-      ? BasePropName extends keyof P
-        ? P[BasePropName]
-        : never
-      : PropName extends keyof P
-        ? P[PropName]
-        : never;
-  }>;
+    Partial<{
+      [PropName in
+        | keyof P
+        | (keyof P extends string
+            ? `${C | InlineConditionName}:${keyof P}`
+            : never)]: PropName extends `${C | InlineConditionName}:${infer BasePropName}`
+        ? BasePropName extends keyof P
+          ? P[BasePropName]
+          : never
+        : PropName extends keyof P
+          ? P[PropName]
+          : never;
+    }>,
+> = {
+  is?: Is;
+} & Omit<
+  JSX.LibraryManagedAttributes<Is, ComponentPropsWithRef<Is>>,
+  keyof OwnProps
+> &
+  OwnProps;
 
 /**
  * Polymorphic component with first-class style props and conditional styling