remove @lit-labs/react dependency

packages/react/jest.config.js

@@ -52,5 +52,5 @@ module.exports = {
     '<rootDir>/src/utils/__tests__/invariant.test.ts',
     '<rootDir>/src/utils/__tests__/warning.test.ts',
   ],
-  transformIgnorePatterns: ['node_modules/(?!@github/[a-z-]+-element|@lit-labs/react|@oddbird/popover-polyfill)'],
+  transformIgnorePatterns: ['node_modules/(?!@github/[a-z-]+-element|@oddbird/popover-polyfill)'],
 }

packages/react/package.json

@@ -83,7 +83,6 @@
   "dependencies": {
     "@github/relative-time-element": "^4.4.5",
     "@github/tab-container-element": "4.8.2",
-    "@lit-labs/react": "1.2.1",
     "@oddbird/popover-polyfill": "^0.5.2",
     "@primer/behaviors": "^1.8.0",
     "@primer/live-region-element": "^0.7.1",

packages/react/rollup.config.mjs

@@ -42,7 +42,6 @@ const ESM_ONLY = new Set([
   '@github/paste-markdown',
   '@github/relative-time-element',
   '@github/tab-container-element',
-  '@lit-labs/react',
   '@oddbird/popover-polyfill',
 ])
 const dependencies = [

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

@@ -1,37 +1,57 @@
-import React from 'react'
+import React, { forwardRef, useEffect, useRef, useImperativeHandle } from 'react'
 import styled from 'styled-components'
-import type {EventName} from '@lit-labs/react'
-import {createComponent as create} from '@lit-labs/react'
 import sx from '../sx'
 
-type EventNames = Record<string, EventName | string>
-const rename = (str: string): string => str[0].toUpperCase() + str.slice(1).replace(/(-\w)/g, s => s[1].toUpperCase())
+type WebComponentEventMap = Record<string, string>
+const rename = (str: string): string =>
+  str[0].toUpperCase() + str.slice(1).replace(/(-\w)/g, s => s[1].toUpperCase())
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export const createComponent = <I extends HTMLElement, E extends EventNames = {}>(
+export const createComponent = <I extends HTMLElement, E extends WebComponentEventMap = {}>(
   elementClass: new () => I,
   tagName: string,
   events: E | undefined = undefined,
 ) => {
-  const output = Object.assign(
-    Object.assign(
-      styled(
-        create<I, E>({
-          tagName,
-          elementClass,
-          react: React,
-          events,
-        }),
-      ),
-      {
-        displayName: rename(tagName),
-      },
-    )(sx),
-    {
-      displayName: rename(tagName),
-    },
-  )
-
-  return output
+  const Component = forwardRef<I, Record<string, any>>((props, ref) => {
+    const internalRef = useRef<I>(null)
+    useImperativeHandle(ref, () => internalRef.current as I)
+    useEffect(() => {
+      const element = internalRef.current
+      if (!element || !events) return
+
+      const cleanupFunctions: (() => void)[] = []
+
+      Object.keys(events).forEach(reactPropName => {
+        const customEventName = events[reactPropName]
+        const eventHandler = props[reactPropName]
+
+        if (eventHandler && typeof eventHandler === 'function') {
+          element.addEventListener(customEventName, eventHandler)
+          cleanupFunctions.push(() => element.removeEventListener(customEventName, eventHandler))
+        }
+      })
+      return () => {
+        cleanupFunctions.forEach(cleanup => cleanup())
+      }
+    }, [props, events]) 
+
+    const elementProps: Record<string, any> = { ...props }
+
+    if (events) {
+      Object.keys(events).forEach(propName => {
+        delete elementProps[propName]
+      })
+    }
+
+    return React.createElement(tagName, {
+      ref: internalRef, 
+      ...elementProps,
+    })
+  })
+
+  const StyledComponent = styled(Component)(sx)
+  StyledComponent.displayName = rename(tagName)
+
+  return StyledComponent
 }
 
 export default createComponent