refactor(react): component props type

Author: segunadebayo

.changeset/fix-root-provider-jsx-props.md

@@ -1,5 +1,9 @@
 ---
-"@pandacss/generator": patch
+'@pandacss/generator': patch
 ---
 
-Fix type issue where `withRootProvider` from style context incorrectly allowed JSX style props to be passed through to the root component. The root provider now correctly accepts only component props, unstyled prop, and recipe variant props, excluding JSX style props.
+- **Style Context**: Fix type issue where `withRootProvider` from style context incorrectly allowed JSX style props to
+  be passed through to the root component.
+
+- **React**: Fix issue where combining wrapping a style context component with `styled` caused `ref` to be incorrectly
+  typed

packages/generator/src/artifacts/react-jsx/create-style-context.ts

@@ -113,8 +113,8 @@ export function generateReactCreateStyleContext(ctx: Context) {
     dts: outdent`
     ${ctx.file.importType('SlotRecipeRuntimeFn, RecipeVariantProps', '../types/recipe')}
     ${ctx.file.importType('JsxHTMLProps, JsxStyleProps, Assign', '../types/system-types')}
-    ${ctx.file.importType('JsxFactoryOptions', '../types/jsx')}
-    import type { ComponentType, ElementType, ComponentPropsWithoutRef, ElementRef, Ref } from 'react'
+    ${ctx.file.importType('JsxFactoryOptions, ComponentProps', '../types/jsx')}
+    import type { ComponentType, ElementType } from 'react'
 
     interface UnstyledProps {
       unstyled?: boolean | undefined
@@ -130,10 +130,6 @@ export function generateReactCreateStyleContext(ctx: Context) {
     
     type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
     
-    type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
-      ref?: Ref<ElementRef<T>> | undefined
-    }
-
     interface WithProviderOptions<P = {}> {
       defaultProps?: Partial<P> | undefined
     }

packages/generator/src/artifacts/react-jsx/types.ts

@@ -10,7 +10,7 @@ ${ctx.file.importType(upperName, '../types/jsx')}
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: outdent`
-import type { ComponentPropsWithoutRef, ElementType, ElementRef, JSX, Ref } from 'react'
+import type { ElementType, JSX, ComponentPropsWithRef, ComponentType, Component } from 'react'
 ${ctx.file.importType('RecipeDefinition, RecipeSelection, RecipeVariantRecord', './recipe')}
 ${ctx.file.importType(
   'Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty',
@@ -35,9 +35,9 @@ export interface AsProps {
   as?: ElementType | undefined
 }
 
-export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
-  ref?: Ref<ElementRef<T>>
-}
+export type ComponentProps<T extends ElementType> = T extends ComponentType<infer P> | Component<infer P>
+  ? JSX.LibraryManagedAttributes<T, P>
+  : ComponentPropsWithRef<T>
 
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
   (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element

packages/studio/styled-system/jsx/create-style-context.d.ts

@@ -1,8 +1,8 @@
 /* eslint-disable */
 import type { SlotRecipeRuntimeFn, RecipeVariantProps } from '../types/recipe';
 import type { JsxHTMLProps, JsxStyleProps, Assign } from '../types/system-types';
-import type { JsxFactoryOptions } from '../types/jsx';
-import type { ComponentType, ElementType, ComponentPropsWithoutRef, ElementRef, Ref } from 'react'
+import type { JsxFactoryOptions, ComponentProps } from '../types/jsx';
+import type { ComponentType, ElementType } from 'react'
 
 interface UnstyledProps {
   unstyled?: boolean | undefined
@@ -18,10 +18,6 @@ type SlotRecipe = SvaFn | SlotRecipeFn
 
 type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
 
-type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
-  ref?: Ref<ElementRef<T>> | undefined
-}
-
 interface WithProviderOptions<P = {}> {
   defaultProps?: Partial<P> | undefined
 }

packages/studio/styled-system/types/jsx.d.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import type { ComponentPropsWithoutRef, ElementType, ElementRef, JSX, Ref } from 'react'
+import type { ElementType, JSX, ComponentPropsWithRef, ComponentType, Component } from 'react'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe';
 import type { Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty } from './system-types';
 
@@ -21,9 +21,9 @@ export interface AsProps {
   as?: ElementType | undefined
 }
 
-export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
-  ref?: Ref<ElementRef<T>>
-}
+export type ComponentProps<T extends ElementType> = T extends ComponentType<infer P> | Component<infer P>
+  ? JSX.LibraryManagedAttributes<T, P>
+  : ComponentPropsWithRef<T>
 
 export interface PandaComponent<T extends ElementType, P extends Dict = {}> {
   (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element

sandbox/next-js-pages/src/pages/index.tsx

@@ -1,12 +1,21 @@
+import { useRef } from 'react'
+import { styled } from '../../styled-system/jsx'
 import { stack } from '../../styled-system/patterns'
 import * as Custom from '../components/custom'
 
+const Root = styled(Custom.Root, {
+  base: {
+    color: 'pink',
+  },
+})
+
 export default function Home() {
+  const ref = useRef<HTMLDivElement | null>(null)
   return (
     <div className={stack({ fontSize: '2xl', fontWeight: 'bold', padding: '4' })}>
-      <Custom.Root>
+      <Root ref={ref}>
         <Custom.Label>Hello</Custom.Label>
-      </Custom.Root>
+      </Root>
     </div>
   )
 }