Skip to content

Commit e0fca65

Browse files
segunadebayosegunadebayo
committed
fix(style-context): default props in root provider
1 parent dff4eb9 commit e0fca65

File tree

7 files changed

+102
-33
lines changed

7 files changed

+102
-33
lines changed

‎.changeset/add-defaultprops-to-rootprovider.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
'@pandacss/generator': patch
3+
---
4+
5+
Fixes issue where `defaultProps` was not supported in `withRootProvider` across all framework implementations (React,
6+
Preact, Vue, Solid)
7+
8+
```tsx
9+
const RootProvider = withRootProvider(Component, {
10+
defaultProps: {
11+
className: 'root-provider',
12+
// other default props
13+
},
14+
})
15+
```

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

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,20 @@ export function generatePreactCreateStyleContext(ctx: Context) {
3333
)}
3434
}
3535
36-
const withRootProvider = (Component) => {
36+
const withRootProvider = (Component, options) => {
3737
const WithRootProvider = (props) => {
3838
const [variantProps, otherProps] = svaFn.splitVariantProps(props)
3939
4040
const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
4141
slotStyles._classNameMap = svaFn.classNameMap
4242
43+
const mergedProps = options?.defaultProps
44+
? { ...options.defaultProps, ...otherProps }
45+
: otherProps
46+
4347
return createElement(StyleContext.Provider, {
4448
value: slotStyles,
45-
children: createElement(Component, otherProps)
49+
children: createElement(Component, mergedProps)
4650
})
4751
}
4852
@@ -114,7 +118,11 @@ export function generatePreactCreateStyleContext(ctx: Context) {
114118
import type { ComponentType, ComponentProps, JSX } from 'preact/compat'
115119
116120
interface UnstyledProps {
117-
unstyled?: boolean
121+
unstyled?: boolean | undefined
122+
}
123+
124+
interface WithProviderOptions<P = {}> {
125+
defaultProps?: Partial<P> | undefined
118126
}
119127
120128
type ElementType = JSX.ElementType
@@ -138,16 +146,19 @@ export function generatePreactCreateStyleContext(ctx: Context) {
138146
>
139147
140148
export interface StyleContext<R extends SlotRecipe> {
141-
withRootProvider: <T extends ElementType>(Component: T) => StyleContextProvider<T, R>
149+
withRootProvider: <T extends ElementType>(
150+
Component: T,
151+
options?: WithProviderOptions<ComponentProps<T>> | undefined
152+
) => StyleContextProvider<T, R>
142153
withProvider: <T extends ElementType>(
143154
Component: T,
144155
slot: InferSlot<R>,
145-
options?: JsxFactoryOptions<ComponentProps<T>>
156+
options?: JsxFactoryOptions<ComponentProps<T>> | undefined
146157
) => StyleContextProvider<T, R>
147158
withContext: <T extends ElementType>(
148159
Component: T,
149160
slot: InferSlot<R>,
150-
options?: JsxFactoryOptions<ComponentProps<T>>
161+
options?: JsxFactoryOptions<ComponentProps<T>> | undefined
151162
) => StyleContextConsumer<T>
152163
}
153164

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

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,20 @@ export function generateReactCreateStyleContext(ctx: Context) {
3232
)}
3333
}
3434
35-
const withRootProvider = (Component) => {
35+
const withRootProvider = (Component, options) => {
3636
const WithRootProvider = (props) => {
3737
const [variantProps, otherProps] = svaFn.splitVariantProps(props)
3838
3939
const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
4040
slotStyles._classNameMap = svaFn.classNameMap
4141
42+
const mergedProps = options?.defaultProps
43+
? { ...options.defaultProps, ...otherProps }
44+
: otherProps
45+
4246
return createElement(StyleContext.Provider, {
4347
value: slotStyles,
44-
children: createElement(Component, otherProps)
48+
children: createElement(Component, mergedProps)
4549
})
4650
}
4751
@@ -113,7 +117,7 @@ export function generateReactCreateStyleContext(ctx: Context) {
113117
import type { ComponentType, ElementType, ComponentPropsWithoutRef, ElementRef, Ref } from 'react'
114118
115119
interface UnstyledProps {
116-
unstyled?: boolean
120+
unstyled?: boolean | undefined
117121
}
118122
119123
type SvaFn<S extends string = any> = SlotRecipeRuntimeFn<S, any>
@@ -127,7 +131,11 @@ export function generateReactCreateStyleContext(ctx: Context) {
127131
type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
128132
129133
type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
130-
ref?: Ref<ElementRef<T>>
134+
ref?: Ref<ElementRef<T>> | undefined
135+
}
136+
137+
interface WithProviderOptions<P = {}> {
138+
defaultProps?: Partial<P> | undefined
131139
}
132140
133141
type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
@@ -139,16 +147,19 @@ export function generateReactCreateStyleContext(ctx: Context) {
139147
>
140148
141149
export interface StyleContext<R extends SlotRecipe> {
142-
withRootProvider: <T extends ElementType>(Component: T) => StyleContextProvider<T, R>
150+
withRootProvider: <T extends ElementType>(
151+
Component: T,
152+
options?: WithProviderOptions<ComponentProps<T>> | undefined
153+
) => StyleContextProvider<T, R>
143154
withProvider: <T extends ElementType>(
144155
Component: T,
145156
slot: InferSlot<R>,
146-
options?: JsxFactoryOptions<ComponentProps<T>>
157+
options?: JsxFactoryOptions<ComponentProps<T>> | undefined
147158
) => StyleContextProvider<T, R>
148159
withContext: <T extends ElementType>(
149160
Component: T,
150161
slot: InferSlot<R>,
151-
options?: JsxFactoryOptions<ComponentProps<T>>
162+
options?: JsxFactoryOptions<ComponentProps<T>> | undefined
152163
) => StyleContextConsumer<T>
153164
}
154165

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

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -34,23 +34,25 @@ export function generateSolidCreateStyleContext(ctx: Context) {
3434
}
3535
3636
37-
const withRootProvider = (Component) => {
37+
const withRootProvider = (Component, options) => {
3838
const WithRootProvider = (props) => {
3939
const finalProps = createMemo(() => {
4040
const [variantProps, restProps] = svaFn.splitVariantProps(props)
4141
4242
const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
4343
slotStyles._classNameMap = svaFn.classNameMap
44+
45+
const mergedProps = options?.defaultProps ? mergeProps(options.defaultProps, restProps) : restProps
4446
45-
return { restProps, slotStyles }
47+
return { mergedProps, slotStyles }
4648
})
4749
4850
return createComponent(StyleContext.Provider, {
4951
value: finalProps().slotStyles,
5052
get children() {
5153
return createComponent(
5254
Component,
53-
mergeProps(finalProps().restProps, {
55+
mergeProps(finalProps().mergedProps, {
5456
get children() {
5557
return props.children
5658
},
@@ -139,7 +141,11 @@ export function generateSolidCreateStyleContext(ctx: Context) {
139141
import type { Component, JSX, ComponentProps } from 'solid-js'
140142
141143
interface UnstyledProps {
142-
unstyled?: boolean
144+
unstyled?: boolean | undefined
145+
}
146+
147+
interface WithProviderOptions<P = {}> {
148+
defaultProps?: Partial<P> | undefined
143149
}
144150
type ElementType<P extends Record<string, any> = {}> = keyof JSX.IntrinsicElements | Component<P>
145151
@@ -162,16 +168,19 @@ export function generateSolidCreateStyleContext(ctx: Context) {
162168
>
163169
164170
export interface StyleContext<R extends SlotRecipe> {
165-
withRootProvider: <T extends ElementType>(Component: T) => StyleContextProvider<T, R>
171+
withRootProvider: <T extends ElementType>(
172+
Component: T,
173+
options?: WithProviderOptions<ComponentProps<T>> | undefined
174+
) => StyleContextProvider<T, R>
166175
withProvider: <T extends ElementType>(
167176
Component: T,
168177
slot: InferSlot<R>,
169-
options?: JsxFactoryOptions<ComponentProps<T>>
178+
options?: JsxFactoryOptions<ComponentProps<T>> | undefined
170179
) => StyleContextProvider<T, R>
171180
withContext: <T extends ElementType>(
172181
Component: T,
173182
slot: InferSlot<R>,
174-
options?: JsxFactoryOptions<ComponentProps<T>>
183+
options?: JsxFactoryOptions<ComponentProps<T>> | undefined
175184
) => StyleContextConsumer<T>
176185
}
177186

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

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export function generateVueCreateStyleContext(ctx: Context) {
3232
)}
3333
}
3434
35-
const withRootProvider = (Component) => {
35+
const withRootProvider = (Component, options) => {
3636
const WithRootProvider = defineComponent({
3737
props: svaFn.variantKeys,
3838
setup(props, { slots }) {
@@ -46,7 +46,12 @@ export function generateVueCreateStyleContext(ctx: Context) {
4646
4747
provide(StyleContext, slotStyles)
4848
49-
return () => h(Component, otherProps, slots)
49+
const mergedProps = computed(() => {
50+
if (!options?.defaultProps) return otherProps
51+
return { ...options.defaultProps, ...otherProps }
52+
})
53+
54+
return () => h(Component, mergedProps.value, slots)
5055
},
5156
})
5257
@@ -137,7 +142,11 @@ export function generateVueCreateStyleContext(ctx: Context) {
137142
import type { Component, FunctionalComponent, NativeElements } from 'vue'
138143
139144
interface UnstyledProps {
140-
unstyled?: boolean
145+
unstyled?: boolean | undefined
146+
}
147+
148+
interface WithProviderOptions<P = {}> {
149+
defaultProps?: Partial<P> | undefined
141150
}
142151
143152
// Add v-model support types
@@ -174,16 +183,19 @@ export function generateVueCreateStyleContext(ctx: Context) {
174183
>
175184
176185
export interface StyleContext<R extends SlotRecipe> {
177-
withRootProvider: <T extends ElementType>(Component: T) => StyleContextProvider<T, R>
186+
withRootProvider: <T extends ElementType>(
187+
Component: T,
188+
options?: WithProviderOptions<ComponentProps<T>> | undefined
189+
) => StyleContextProvider<T, R>
178190
withProvider: <T extends ElementType>(
179191
Component: T,
180192
slot: InferSlot<R>,
181-
options?: JsxFactoryOptions<ComponentProps<T>>
193+
options?: JsxFactoryOptions<ComponentProps<T>> | undefined
182194
) => StyleContextProvider<T, R>
183195
withContext: <T extends ElementType>(
184196
Component: T,
185197
slot: InferSlot<R>,
186-
options?: JsxFactoryOptions<ComponentProps<T>>
198+
options?: JsxFactoryOptions<ComponentProps<T>> | undefined
187199
) => StyleContextConsumer<T>
188200
}
189201

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

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { JsxFactoryOptions } from '../types/jsx';
55
import type { ComponentType, ElementType, ComponentPropsWithoutRef, ElementRef, Ref } from 'react'
66

77
interface UnstyledProps {
8-
unstyled?: boolean
8+
unstyled?: boolean | undefined
99
}
1010

1111
type SvaFn<S extends string = any> = SlotRecipeRuntimeFn<S, any>
@@ -19,7 +19,11 @@ type SlotRecipe = SvaFn | SlotRecipeFn
1919
type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
2020

2121
type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
22-
ref?: Ref<ElementRef<T>>
22+
ref?: Ref<ElementRef<T>> | undefined
23+
}
24+
25+
interface WithProviderOptions<P = {}> {
26+
defaultProps?: Partial<P> | undefined
2327
}
2428

2529
type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
@@ -31,16 +35,19 @@ type StyleContextConsumer<T extends ElementType> = ComponentType<
3135
>
3236

3337
export interface StyleContext<R extends SlotRecipe> {
34-
withRootProvider: <T extends ElementType>(Component: T) => StyleContextProvider<T, R>
38+
withRootProvider: <T extends ElementType>(
39+
Component: T,
40+
options?: WithProviderOptions<ComponentProps<T>> | undefined
41+
) => StyleContextProvider<T, R>
3542
withProvider: <T extends ElementType>(
3643
Component: T,
3744
slot: InferSlot<R>,
38-
options?: JsxFactoryOptions<ComponentProps<T>>
45+
options?: JsxFactoryOptions<ComponentProps<T>> | undefined
3946
) => StyleContextProvider<T, R>
4047
withContext: <T extends ElementType>(
4148
Component: T,
4249
slot: InferSlot<R>,
43-
options?: JsxFactoryOptions<ComponentProps<T>>
50+
options?: JsxFactoryOptions<ComponentProps<T>> | undefined
4451
) => StyleContextConsumer<T>
4552
}
4653

‎packages/studio/styled-system/jsx/create-style-context.mjs‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,20 @@ export function createStyleContext(recipe) {
1919
return { ...slotStyles, ...restProps }
2020
}
2121

22-
const withRootProvider = (Component) => {
22+
const withRootProvider = (Component, options) => {
2323
const WithRootProvider = (props) => {
2424
const [variantProps, otherProps] = svaFn.splitVariantProps(props)
2525

2626
const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
2727
slotStyles._classNameMap = svaFn.classNameMap
2828

29+
const mergedProps = options?.defaultProps
30+
? { ...options.defaultProps, ...otherProps }
31+
: otherProps
32+
2933
return createElement(StyleContext.Provider, {
3034
value: slotStyles,
31-
children: createElement(Component, otherProps)
35+
children: createElement(Component, mergedProps)
3236
})
3337
}
3438

0 commit comments

Comments
 (0)