[labs/react] better union / intersection of ReactComponent Props and …

…Web Component attributes (#3072)

* flatter faster types for UserProps

* ignore events on react props

* add changeset

* better name for stripped element

* remove duplicate types

* union types in order introduced

* update changeset to patch, no breaking changes

* remove TODO, this PR resolves that TODO

.changeset/calm-bottles-laugh.md

@@ -0,0 +1,5 @@
+---
+'@lit-labs/react': patch
+---
+
+Avoid nested component props type declarations. Incrementally define what types are needed rather than nesting.

packages/labs/react/src/create-component.ts

@@ -135,14 +135,10 @@ export const createComponent = <I extends HTMLElement, E extends Events = {}>(
 
   // Props the user is allowed to use, includes standard attributes, children,
   // ref, as well as special event and element properties.
-  // TODO: we might need to omit more properties from HTMLElement than just
-  // 'children', but 'children' is special to JSX, so we must at least do that.
-  type UserProps = React.PropsWithChildren<
-    React.PropsWithRef<
-      Partial<Omit<I, 'children'>> &
-        Partial<EventProps<E>> &
-        Omit<React.HTMLAttributes<HTMLElement>, keyof E>
-    >
+  type ReactProps = Omit<React.HTMLAttributes<I>, keyof E>;
+  type ElementWithoutPropsOrEvents = Omit<I, keyof E | keyof ReactProps>;
+  type UserProps = Partial<
+    ReactProps & ElementWithoutPropsOrEvents & EventProps<E>
   >;
 
   // Props used by this component wrapper. This is the UserProps and the