UNPKG

5.27 kBTypeScriptView Raw
1import { ComponentSelector, Interpolation } from '@emotion/serialize';
2import { ReactJSXIntrinsicElements } from "./jsx-namespace.js";
3import { PropsOf, Theme } from '@emotion/react';
4/** Same as StyledOptions but shouldForwardProp must be a type guard */
5export interface FilteringStyledOptions<Props = Record<string, any>, ForwardedProps extends keyof Props & string = keyof Props & string> {
6 label?: string;
7 shouldForwardProp?: (propName: string) => propName is ForwardedProps;
8 target?: string;
9}
10export interface StyledOptions<Props = Record<string, any>> {
11 label?: string;
12 shouldForwardProp?: (propName: string) => boolean;
13 target?: string;
14}
15/**
16 * @typeparam ComponentProps Props which will be included when withComponent is called
17 * @typeparam SpecificComponentProps Props which will *not* be included when withComponent is called
18 */
19export interface StyledComponent<ComponentProps extends {}, SpecificComponentProps extends {} = {}, JSXProps extends {} = {}> extends React.FC<ComponentProps & SpecificComponentProps & JSXProps>, ComponentSelector {
20 withComponent<C extends React.ComponentClass<React.ComponentProps<C>>>(component: C): StyledComponent<ComponentProps & PropsOf<C>, {}, {
21 ref?: React.Ref<InstanceType<C>>;
22 }>;
23 withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(component: C): StyledComponent<ComponentProps & PropsOf<C>>;
24 withComponent<Tag extends keyof ReactJSXIntrinsicElements>(tag: Tag): StyledComponent<ComponentProps, ReactJSXIntrinsicElements[Tag]>;
25}
26/**
27 * @typeparam ComponentProps Props which will be included when withComponent is called
28 * @typeparam SpecificComponentProps Props which will *not* be included when withComponent is called
29 */
30export interface CreateStyledComponent<ComponentProps extends {}, SpecificComponentProps extends {} = {}, JSXProps extends {} = {}> {
31 (template: TemplateStringsArray, ...styles: Array<Interpolation<ComponentProps & SpecificComponentProps & {
32 theme: Theme;
33 }>>): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
34 /**
35 * @typeparam AdditionalProps Additional props to add to your styled component
36 */
37 <AdditionalProps extends {}>(template: TemplateStringsArray, ...styles: Array<Interpolation<ComponentProps & SpecificComponentProps & AdditionalProps & {
38 theme: Theme;
39 }>>): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps, JSXProps>;
40 /**
41 * @typeparam AdditionalProps Additional props to add to your styled component
42 */
43 <AdditionalProps extends {} = {}>(...styles: Array<Interpolation<ComponentProps & SpecificComponentProps & AdditionalProps & {
44 theme: Theme;
45 }>>): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps, JSXProps>;
46}
47/**
48 * @desc
49 * This function accepts a React component or tag ('div', 'a' etc).
50 *
51 * @example styled(MyComponent)({ width: 100 })
52 * @example styled(MyComponent)(myComponentProps => ({ width: myComponentProps.width })
53 * @example styled('div')({ width: 100 })
54 * @example styled('div')<Props>(props => ({ width: props.width })
55 */
56export interface CreateStyled {
57 <C extends React.ComponentClass<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> & string = keyof React.ComponentProps<C> & string>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & {
58 theme?: Theme;
59 }, {}, {
60 ref?: React.Ref<InstanceType<C>>;
61 }>;
62 <C extends React.ComponentClass<React.ComponentProps<C>>>(component: C, options?: StyledOptions<React.ComponentProps<C>>): CreateStyledComponent<PropsOf<C> & {
63 theme?: Theme;
64 }, {}, {
65 ref?: React.Ref<InstanceType<C>>;
66 }>;
67 <C extends React.ComponentType<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> & string = keyof React.ComponentProps<C> & string>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & {
68 theme?: Theme;
69 }>;
70 <C extends React.ComponentType<React.ComponentProps<C>>>(component: C, options?: StyledOptions<React.ComponentProps<C>>): CreateStyledComponent<PropsOf<C> & {
71 theme?: Theme;
72 }>;
73 <Tag extends keyof ReactJSXIntrinsicElements, ForwardedProps extends keyof ReactJSXIntrinsicElements[Tag] & string = keyof ReactJSXIntrinsicElements[Tag] & string>(tag: Tag, options: FilteringStyledOptions<ReactJSXIntrinsicElements[Tag], ForwardedProps>): CreateStyledComponent<{
74 theme?: Theme;
75 as?: React.ElementType;
76 }, Pick<ReactJSXIntrinsicElements[Tag], ForwardedProps>>;
77 <Tag extends keyof ReactJSXIntrinsicElements>(tag: Tag, options?: StyledOptions<ReactJSXIntrinsicElements[Tag]>): CreateStyledComponent<{
78 theme?: Theme;
79 as?: React.ElementType;
80 }, ReactJSXIntrinsicElements[Tag]>;
81}
82export type ElementType = React.ElementType & {
83 defaultProps?: Partial<any>;
84 __emotion_real?: ElementType;
85 __emotion_base?: ElementType;
86 __emotion_styles?: Interpolation<Theme>[];
87 __emotion_forwardProp?: (propName: string) => boolean;
88};