Prioritize component's own props (#58)

* Fix for prop collision issues. * add changeset * Docs update
embellishing · Jun 29, 2024 · 2a74e6b · 2a74e6b
1 parent 4ba4be8
commit 2a74e6b
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 23 deletions.
diff --git a/.changeset/tricky-steaks-leave.md 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
@@ -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
@@ -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,30 +61,34 @@ 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?: {
  [Name in InlineConditionName]: ValidConditionName<Name> &
  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