1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | declare global {
|
18 | namespace NodeJS {
|
19 |
|
20 | interface ReadableStream {}
|
21 | }
|
22 | }
|
23 |
|
24 | import * as CSS from 'csstype';
|
25 | import * as React from 'react';
|
26 | import * as hoistNonReactStatics from 'hoist-non-react-statics';
|
27 |
|
28 | export type CSSProperties = CSS.Properties<string | number>;
|
29 |
|
30 | export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject };
|
31 |
|
32 | export interface CSSObject extends CSSProperties, CSSPseudos {
|
33 | [key: string]: CSSObject | string | number | undefined;
|
34 | }
|
35 |
|
36 | export type CSSKeyframes = object & { [key: string]: CSSObject };
|
37 |
|
38 | export interface ThemeProps<T> {
|
39 | theme: T;
|
40 | }
|
41 |
|
42 | export type ThemedStyledProps<P, T> = P & ThemeProps<T>;
|
43 | export type StyledProps<P> = ThemedStyledProps<P, AnyIfEmpty<DefaultTheme>>;
|
44 | export type IntrinsicElementsKeys = keyof JSX.IntrinsicElements;
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 | type Defaultize<P, D> = P extends any
|
51 | ? string extends keyof P
|
52 | ? P
|
53 | : Pick<P, Exclude<keyof P, keyof D>> &
|
54 | Partial<Pick<P, Extract<keyof P, keyof D>>> &
|
55 | Partial<Pick<D, Exclude<keyof D, keyof P>>>
|
56 | : never;
|
57 |
|
58 | type ReactDefaultizedProps<C, P> = C extends { defaultProps: infer D } ? Defaultize<P, D> : P;
|
59 |
|
60 | type MakeAttrsOptional<C extends string | React.ComponentType<any>, O extends object, A extends keyof any> = Omit<
|
61 | ReactDefaultizedProps<
|
62 | C,
|
63 | React.ComponentPropsWithRef<C extends IntrinsicElementsKeys | React.ComponentType<any> ? C : never>
|
64 | > &
|
65 | O,
|
66 | A
|
67 | > &
|
68 | Partial<
|
69 | Pick<React.ComponentPropsWithRef<C extends IntrinsicElementsKeys | React.ComponentType<any> ? C : never> & O, A>
|
70 | >;
|
71 |
|
72 | export type StyledComponentProps<
|
73 |
|
74 | C extends string | React.ComponentType<any>,
|
75 |
|
76 | T extends object,
|
77 |
|
78 | O extends object,
|
79 |
|
80 | A extends keyof any,
|
81 |
|
82 | AsC extends string | React.ComponentType<any> = C,
|
83 |
|
84 | FAsC extends string | React.ComponentType<any> = C
|
85 | > =
|
86 |
|
87 | O extends object
|
88 | ? WithOptionalTheme<
|
89 | MakeAttrsOptional<C, O, A> & MakeAttrsOptional<AsC, O, A> & MakeAttrsOptional<FAsC, O, A>,
|
90 | T
|
91 | > &
|
92 | WithChildrenIfReactComponentClass<C>
|
93 | : never;
|
94 |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 | type WithChildrenIfReactComponentClass<C extends string | React.ComponentType<any>> = C extends React.ComponentClass<
|
100 | any
|
101 | >
|
102 | ? { children?: React.ReactNode }
|
103 | : {};
|
104 |
|
105 | type StyledComponentPropsWithAs<
|
106 | C extends string | React.ComponentType<any>,
|
107 | T extends object,
|
108 | O extends object,
|
109 | A extends keyof any,
|
110 | AsC extends string | React.ComponentType<any> = C,
|
111 | FAsC extends string | React.ComponentType<any> = C
|
112 | > = StyledComponentProps<C, T, O, A, AsC, FAsC> & { as?: AsC; forwardedAs?: FAsC };
|
113 |
|
114 | export type FalseyValue = undefined | null | false;
|
115 | export type Interpolation<P> = InterpolationValue | InterpolationFunction<P> | FlattenInterpolation<P>;
|
116 |
|
117 |
|
118 | export type FlattenInterpolation<P> = ReadonlyArray<Interpolation<P>>;
|
119 | export type InterpolationValue = string | number | FalseyValue | Keyframes | StyledComponentInterpolation | CSSObject;
|
120 | export type SimpleInterpolation = InterpolationValue | FlattenSimpleInterpolation;
|
121 | export type FlattenSimpleInterpolation = ReadonlyArray<SimpleInterpolation>;
|
122 |
|
123 | export type InterpolationFunction<P> = (props: P) => Interpolation<P>;
|
124 |
|
125 | type Attrs<P, A extends Partial<P>, T> = ((props: ThemedStyledProps<P, T>) => A) | A;
|
126 |
|
127 | export type ThemedGlobalStyledClassProps<P, T> = WithOptionalTheme<P, T> & {
|
128 | suppressMultiMountWarning?: boolean;
|
129 | };
|
130 |
|
131 | export interface GlobalStyleComponent<P, T> extends React.ComponentClass<ThemedGlobalStyledClassProps<P, T>> {}
|
132 |
|
133 | // remove the call signature from StyledComponent so Interpolation can still infer InterpolationFunction
|
134 | type StyledComponentInterpolation =
|
135 | | Pick<StyledComponentBase<any, any, any, any>, keyof StyledComponentBase<any, any>>
|
136 | | Pick<StyledComponentBase<any, any, any>, keyof StyledComponentBase<any, any>>;
|
137 |
|
138 | // abuse Pick to strip the call signature from ForwardRefExoticComponent
|
139 | type ForwardRefExoticBase<P> = Pick<React.ForwardRefExoticComponent<P>, keyof React.ForwardRefExoticComponent<any>>;
|
140 |
|
141 | // Config to be used with withConfig
|
142 | export interface StyledConfig<O extends object = {}> {
|
143 | // TODO: Add all types from the original StyledComponentWrapperProperties
|
144 | shouldForwardProp?: (prop: keyof O, defaultValidatorFn: (prop: keyof O) => boolean) => boolean;
|
145 | }
|
146 |
|
147 |
|
148 | type ReactDefaultProps<C> = C extends { defaultProps: infer D } ? D : never;
|
149 |
|
150 |
|
151 | export type AnyStyledComponent = StyledComponent<any, any, any, any> | StyledComponent<any, any, any>;
|
152 |
|
153 | export type StyledComponent<
|
154 | C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
|
155 | T extends object,
|
156 | O extends object = {},
|
157 | A extends keyof any = never
|
158 | > =
|
159 |
|
160 | string &
|
161 | StyledComponentBase<C, T, O, A> &
|
162 | hoistNonReactStatics.NonReactStatics<C extends React.ComponentType<any> ? C : never>;
|
163 |
|
164 | export interface StyledComponentBase<
|
165 | C extends string | React.ComponentType<any>,
|
166 | T extends object,
|
167 | O extends object = {},
|
168 | A extends keyof any = never
|
169 | > extends ForwardRefExoticBase<StyledComponentProps<C, T, O, A>> {
|
170 |
|
171 | (props: StyledComponentProps<C, T, O, A> & { as?: never; forwardedAs?: never }): React.ReactElement<
|
172 | StyledComponentProps<C, T, O, A>
|
173 | >;
|
174 | <AsC extends string | React.ComponentType<any> = C, FAsC extends string | React.ComponentType<any> = C>(
|
175 | props: StyledComponentPropsWithAs<C, T, O, A, AsC, FAsC>,
|
176 | ): React.ReactElement<StyledComponentPropsWithAs<C, T, O, A, AsC, FAsC>>;
|
177 |
|
178 | withComponent<WithC extends AnyStyledComponent>(
|
179 | component: WithC,
|
180 | ): StyledComponent<
|
181 | StyledComponentInnerComponent<WithC>,
|
182 | T,
|
183 | O & StyledComponentInnerOtherProps<WithC>,
|
184 | A | StyledComponentInnerAttrs<WithC>
|
185 | >;
|
186 | withComponent<WithC extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(
|
187 | component: WithC,
|
188 | ): StyledComponent<WithC, T, O, A>;
|
189 | }
|
190 |
|
191 | export interface ThemedStyledFunctionBase<
|
192 | C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
|
193 | T extends object,
|
194 | O extends object = {},
|
195 | A extends keyof any = never
|
196 | > {
|
197 | (first: TemplateStringsArray): StyledComponent<C, T, O, A>;
|
198 | (
|
199 | first:
|
200 | | TemplateStringsArray
|
201 | | CSSObject
|
202 | | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O, T>>,
|
203 | ...rest: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O, T>>>
|
204 | ): StyledComponent<C, T, O, A>;
|
205 | <U extends object>(
|
206 | first:
|
207 | | TemplateStringsArray
|
208 | | CSSObject
|
209 | | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>,
|
210 | ...rest: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>>
|
211 | ): StyledComponent<C, T, O & U, A>;
|
212 | }
|
213 |
|
214 | export interface ThemedStyledFunction<
|
215 | C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
|
216 | T extends object,
|
217 | O extends object = {},
|
218 | A extends keyof any = never
|
219 | > extends ThemedStyledFunctionBase<C, T, O, A> {
|
220 |
|
221 |
|
222 | attrs<
|
223 | U,
|
224 | NewA extends Partial<StyledComponentPropsWithRef<C> & U> & {
|
225 | [others: string]: any;
|
226 | } = {}
|
227 | >(
|
228 | attrs: Attrs<StyledComponentPropsWithRef<C> & U, NewA, T>,
|
229 | ): ThemedStyledFunction<C, T, O & NewA, A | keyof NewA>;
|
230 |
|
231 | withConfig: <Props extends O = O>(
|
232 | config: StyledConfig<StyledComponentPropsWithRef<C> & Props>,
|
233 | ) => ThemedStyledFunction<C, T, Props, A>;
|
234 | }
|
235 |
|
236 | export type StyledFunction<C extends keyof JSX.IntrinsicElements | React.ComponentType<any>> = ThemedStyledFunction<
|
237 | C,
|
238 | any
|
239 | >;
|
240 |
|
241 | type ThemedStyledComponentFactories<T extends object> = {
|
242 | [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<TTag, T>;
|
243 | };
|
244 |
|
245 | export type StyledComponentInnerComponent<C extends React.ComponentType<any>> = C extends StyledComponent<
|
246 | infer I,
|
247 | any,
|
248 | any,
|
249 | any
|
250 | >
|
251 | ? I
|
252 | : C extends StyledComponent<infer I, any, any>
|
253 | ? I
|
254 | : C;
|
255 | export type StyledComponentPropsWithRef<
|
256 | C extends keyof JSX.IntrinsicElements | React.ComponentType<any>
|
257 | > = C extends AnyStyledComponent
|
258 | ? React.ComponentPropsWithRef<StyledComponentInnerComponent<C>>
|
259 | : React.ComponentPropsWithRef<C>;
|
260 | export type StyledComponentInnerOtherProps<C extends AnyStyledComponent> = C extends StyledComponent<
|
261 | any,
|
262 | any,
|
263 | infer O,
|
264 | any
|
265 | >
|
266 | ? O
|
267 | : C extends StyledComponent<any, any, infer O>
|
268 | ? O
|
269 | : never;
|
270 | export type StyledComponentInnerAttrs<C extends AnyStyledComponent> = C extends StyledComponent<any, any, any, infer A>
|
271 | ? A
|
272 | : never;
|
273 |
|
274 | export interface ThemedBaseStyledInterface<T extends object> extends ThemedStyledComponentFactories<T> {
|
275 | <C extends AnyStyledComponent>(component: C): ThemedStyledFunction<
|
276 | StyledComponentInnerComponent<C>,
|
277 | T,
|
278 | StyledComponentInnerOtherProps<C>,
|
279 | StyledComponentInnerAttrs<C>
|
280 | >;
|
281 | <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(
|
282 |
|
283 |
|
284 | component: C,
|
285 | ): ThemedStyledFunction<C, T>;
|
286 | }
|
287 |
|
288 | export type ThemedStyledInterface<T extends object> = ThemedBaseStyledInterface<AnyIfEmpty<T>>;
|
289 | export type StyledInterface = ThemedStyledInterface<DefaultTheme>;
|
290 |
|
291 | export interface BaseThemedCssFunction<T extends object> {
|
292 | (first: TemplateStringsArray | CSSObject, ...interpolations: SimpleInterpolation[]): FlattenSimpleInterpolation;
|
293 | (
|
294 | first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<{}, T>>,
|
295 | ...interpolations: Array<Interpolation<ThemedStyledProps<{}, T>>>
|
296 | ): FlattenInterpolation<ThemedStyledProps<{}, T>>;
|
297 | <P extends object>(
|
298 | first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<P, T>>,
|
299 | ...interpolations: Array<Interpolation<ThemedStyledProps<P, T>>>
|
300 | ): FlattenInterpolation<ThemedStyledProps<P, T>>;
|
301 | }
|
302 |
|
303 | export type ThemedCssFunction<T extends object> = BaseThemedCssFunction<AnyIfEmpty<T>>;
|
304 |
|
305 |
|
306 | type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
|
307 | type WithOptionalTheme<P extends { theme?: T }, T> = Omit<P, 'theme'> & {
|
308 | theme?: T;
|
309 | };
|
310 | type AnyIfEmpty<T extends object> = keyof T extends never ? any : T;
|
311 |
|
312 | export interface ThemedStyledComponentsModule<T extends object, U extends object = T> {
|
313 | default: ThemedStyledInterface<T>;
|
314 |
|
315 | css: ThemedCssFunction<T>;
|
316 |
|
317 |
|
318 | keyframes(strings: TemplateStringsArray | CSSKeyframes, ...interpolations: SimpleInterpolation[]): Keyframes;
|
319 |
|
320 | createGlobalStyle<P extends object = {}>(
|
321 | first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<P, T>>,
|
322 | ...interpolations: Array<Interpolation<ThemedStyledProps<P, T>>>
|
323 | ): GlobalStyleComponent<P, T>;
|
324 |
|
325 | withTheme: WithThemeFnInterface<T>;
|
326 | ThemeProvider: ThemeProviderComponent<T, U>;
|
327 | ThemeConsumer: React.Consumer<T>;
|
328 | ThemeContext: React.Context<T>;
|
329 | useTheme(): T;
|
330 |
|
331 |
|
332 | isStyledComponent: typeof isStyledComponent;
|
333 |
|
334 | ServerStyleSheet: typeof ServerStyleSheet;
|
335 | StyleSheetManager: typeof StyleSheetManager;
|
336 | }
|
337 |
|
338 | declare const styled: StyledInterface;
|
339 |
|
340 | export const css: ThemedCssFunction<DefaultTheme>;
|
341 |
|
342 | export type BaseWithThemeFnInterface<T extends object> = <C extends React.ComponentType<any>>(
|
343 |
|
344 |
|
345 | component: React.ComponentProps<C> extends { theme?: T } ? C : never,
|
346 | ) => React.ForwardRefExoticComponent<WithOptionalTheme<React.ComponentPropsWithRef<C>, T>>;
|
347 | export type WithThemeFnInterface<T extends object> = BaseWithThemeFnInterface<AnyIfEmpty<T>>;
|
348 | export const withTheme: WithThemeFnInterface<DefaultTheme>;
|
349 |
|
350 | export function useTheme(): DefaultTheme;
|
351 |
|
352 |
|
353 |
|
354 |
|
355 |
|
356 |
|
357 |
|
358 |
|
359 | export interface DefaultTheme {}
|
360 |
|
361 | export interface ThemeProviderProps<T extends object, U extends object = T> {
|
362 | children?: React.ReactNode;
|
363 | theme: T | ((theme: U) => T);
|
364 | }
|
365 | export type BaseThemeProviderComponent<T extends object, U extends object = T> = React.ComponentClass<
|
366 | ThemeProviderProps<T, U>
|
367 | >;
|
368 | export type ThemeProviderComponent<T extends object, U extends object = T> = BaseThemeProviderComponent<
|
369 | AnyIfEmpty<T>,
|
370 | AnyIfEmpty<U>
|
371 | >;
|
372 | export const ThemeProvider: ThemeProviderComponent<AnyIfEmpty<DefaultTheme>>;
|
373 | // NOTE: this technically starts as undefined, but allowing undefined is unhelpful when used correctly
|
374 | export const ThemeContext: React.Context<AnyIfEmpty<DefaultTheme>>;
|
375 | export const ThemeConsumer: typeof ThemeContext['Consumer'];
|
376 |
|
377 | export interface Keyframes {
|
378 | getName(): string;
|
379 | }
|
380 |
|
381 | export function keyframes(
|
382 | strings: TemplateStringsArray | CSSKeyframes,
|
383 | ...interpolations: SimpleInterpolation[]
|
384 | ): Keyframes;
|
385 |
|
386 | export function createGlobalStyle<P extends object = {}>(
|
387 | first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<P, DefaultTheme>>,
|
388 | ...interpolations: Array<Interpolation<ThemedStyledProps<P, DefaultTheme>>>
|
389 | ): GlobalStyleComponent<P, DefaultTheme>;
|
390 |
|
391 | export function isStyledComponent(target: any): target is StyledComponent<any, any>;
|
392 |
|
393 | export class ServerStyleSheet {
|
394 | collectStyles(tree: React.ReactNode): React.ReactElement<{ sheet: ServerStyleSheet }>;
|
395 |
|
396 | getStyleTags(): string;
|
397 | getStyleElement(): Array<React.ReactElement<{}>>;
|
398 | interleaveWithNodeStream(readableStream: NodeJS.ReadableStream): NodeJS.ReadableStream;
|
399 | readonly instance: this;
|
400 | seal(): void;
|
401 | }
|
402 |
|
403 | export type StylisPlugin = (
|
404 | context: number,
|
405 | selector: string[],
|
406 | parent: string[],
|
407 | content: string,
|
408 | line: number,
|
409 | column: number,
|
410 | length: number,
|
411 | ) => string | void;
|
412 |
|
413 | export interface StyleSheetManagerProps {
|
414 | disableCSSOMInjection?: boolean;
|
415 | disableVendorPrefixes?: boolean;
|
416 | stylisPlugins?: StylisPlugin[];
|
417 | sheet?: ServerStyleSheet;
|
418 | target?: HTMLElement;
|
419 | }
|
420 |
|
421 | export class StyleSheetManager extends React.Component<StyleSheetManagerProps> {}
|
422 |
|
423 |
|
424 |
|
425 |
|
426 |
|
427 |
|
428 |
|
429 |
|
430 |
|
431 |
|
432 |
|
433 |
|
434 |
|
435 |
|
436 |
|
437 |
|
438 |
|
439 |
|
440 |
|
441 |
|
442 |
|
443 |
|
444 |
|
445 |
|
446 |
|
447 |
|
448 |
|
449 |
|
450 | export type CSSProp<T = AnyIfEmpty<DefaultTheme>> = string | CSSObject | FlattenInterpolation<ThemeProps<T>>;
|
451 |
|
452 | export default styled;
|