1 |
|
2 |
|
3 |
|
4 | import * as React from 'react'
|
5 | import { ComponentSelector, Interpolation } from '@emotion/serialize'
|
6 | import { PropsOf, Theme } from '@emotion/react'
|
7 | import { ReactJSXIntrinsicElements } from './jsx-namespace'
|
8 |
|
9 | export {
|
10 | ArrayInterpolation,
|
11 | CSSObject,
|
12 | FunctionInterpolation
|
13 | } from '@emotion/serialize'
|
14 |
|
15 | export { ComponentSelector, Interpolation }
|
16 |
|
17 |
|
18 | export interface FilteringStyledOptions<
|
19 | Props = Record<string, any>,
|
20 | ForwardedProps extends keyof Props & string = keyof Props & string
|
21 | > {
|
22 | label?: string
|
23 | shouldForwardProp?: (propName: string) => propName is ForwardedProps
|
24 | target?: string
|
25 | }
|
26 |
|
27 | export interface StyledOptions<Props = Record<string, any>> {
|
28 | label?: string
|
29 | shouldForwardProp?: (propName: string) => boolean
|
30 | target?: string
|
31 | }
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 | export interface StyledComponent<
|
38 | ComponentProps extends {},
|
39 | SpecificComponentProps extends {} = {},
|
40 | JSXProps extends {} = {}
|
41 | > extends React.FC<ComponentProps & SpecificComponentProps & JSXProps>,
|
42 | ComponentSelector {
|
43 | withComponent<C extends React.ComponentClass<React.ComponentProps<C>>>(
|
44 | component: C
|
45 | ): StyledComponent<
|
46 | ComponentProps & PropsOf<C>,
|
47 | {},
|
48 | { ref?: React.Ref<InstanceType<C>> }
|
49 | >
|
50 | withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(
|
51 | component: C
|
52 | ): StyledComponent<ComponentProps & PropsOf<C>>
|
53 | withComponent<Tag extends keyof ReactJSXIntrinsicElements>(
|
54 | tag: Tag
|
55 | ): StyledComponent<ComponentProps, ReactJSXIntrinsicElements[Tag]>
|
56 | }
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 | export interface CreateStyledComponent<
|
63 | ComponentProps extends {},
|
64 | SpecificComponentProps extends {} = {},
|
65 | JSXProps extends {} = {}
|
66 | > {
|
67 | (
|
68 | template: TemplateStringsArray,
|
69 | ...styles: Array<
|
70 | Interpolation<ComponentProps & SpecificComponentProps & { theme: Theme }>
|
71 | >
|
72 | ): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>
|
73 |
|
74 | |
75 |
|
76 |
|
77 | <AdditionalProps extends {}>(
|
78 | template: TemplateStringsArray,
|
79 | ...styles: Array<
|
80 | Interpolation<
|
81 | ComponentProps &
|
82 | SpecificComponentProps &
|
83 | AdditionalProps & { theme: Theme }
|
84 | >
|
85 | >
|
86 | ): StyledComponent<
|
87 | ComponentProps & AdditionalProps,
|
88 | SpecificComponentProps,
|
89 | JSXProps
|
90 | >
|
91 |
|
92 | |
93 |
|
94 |
|
95 | <AdditionalProps extends {} = {}>(
|
96 | ...styles: Array<
|
97 | Interpolation<
|
98 | ComponentProps &
|
99 | SpecificComponentProps &
|
100 | AdditionalProps & { theme: Theme }
|
101 | >
|
102 | >
|
103 | ): StyledComponent<
|
104 | ComponentProps & AdditionalProps,
|
105 | SpecificComponentProps,
|
106 | JSXProps
|
107 | >
|
108 | }
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 |
|
117 |
|
118 |
|
119 | export interface CreateStyled {
|
120 | <
|
121 | C extends React.ComponentClass<React.ComponentProps<C>>,
|
122 | ForwardedProps extends keyof React.ComponentProps<C> &
|
123 | string = keyof React.ComponentProps<C> & string
|
124 | >(
|
125 | component: C,
|
126 | options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
|
127 | ): CreateStyledComponent<
|
128 | Pick<PropsOf<C>, ForwardedProps> & {
|
129 | theme?: Theme
|
130 | },
|
131 | {},
|
132 | {
|
133 | ref?: React.Ref<InstanceType<C>>
|
134 | }
|
135 | >
|
136 |
|
137 | <C extends React.ComponentClass<React.ComponentProps<C>>>(
|
138 | component: C,
|
139 | options?: StyledOptions<React.ComponentProps<C>>
|
140 | ): CreateStyledComponent<
|
141 | PropsOf<C> & {
|
142 | theme?: Theme
|
143 | },
|
144 | {},
|
145 | {
|
146 | ref?: React.Ref<InstanceType<C>>
|
147 | }
|
148 | >
|
149 |
|
150 | <
|
151 | C extends React.ComponentType<React.ComponentProps<C>>,
|
152 | ForwardedProps extends keyof React.ComponentProps<C> &
|
153 | string = keyof React.ComponentProps<C> & string
|
154 | >(
|
155 | component: C,
|
156 | options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
|
157 | ): CreateStyledComponent<
|
158 | Pick<PropsOf<C>, ForwardedProps> & {
|
159 | theme?: Theme
|
160 | }
|
161 | >
|
162 |
|
163 | <C extends React.ComponentType<React.ComponentProps<C>>>(
|
164 | component: C,
|
165 | options?: StyledOptions<React.ComponentProps<C>>
|
166 | ): CreateStyledComponent<
|
167 | PropsOf<C> & {
|
168 | theme?: Theme
|
169 | }
|
170 | >
|
171 |
|
172 | <
|
173 | Tag extends keyof ReactJSXIntrinsicElements,
|
174 | ForwardedProps extends keyof ReactJSXIntrinsicElements[Tag] &
|
175 | string = keyof ReactJSXIntrinsicElements[Tag] & string
|
176 | >(
|
177 | tag: Tag,
|
178 | options: FilteringStyledOptions<
|
179 | ReactJSXIntrinsicElements[Tag],
|
180 | ForwardedProps
|
181 | >
|
182 | ): CreateStyledComponent<
|
183 | { theme?: Theme; as?: React.ElementType },
|
184 | Pick<ReactJSXIntrinsicElements[Tag], ForwardedProps>
|
185 | >
|
186 |
|
187 | <Tag extends keyof ReactJSXIntrinsicElements>(
|
188 | tag: Tag,
|
189 | options?: StyledOptions<ReactJSXIntrinsicElements[Tag]>
|
190 | ): CreateStyledComponent<
|
191 | { theme?: Theme; as?: React.ElementType },
|
192 | ReactJSXIntrinsicElements[Tag]
|
193 | >
|
194 | }
|
195 |
|
196 | declare const styled: CreateStyled
|
197 | export default styled
|