UNPKG

@mui/styled-engine-sc

Version:

styled() API wrapper package for styled-components.

136 lines 12.2 kB
import { styled as scStyled } from 'styled-components'; import type * as React from 'react'; import type * as CSS from 'csstype'; import type * as hoistNonReactStatics from 'hoist-non-react-statics'; export type * from 'styled-components'; type WithOptionalTheme<P extends { theme?: T | undefined; }, T> = OmitU<P, 'theme'> & { theme?: T | undefined; }; export type PickU<T, K extends keyof T> = T extends any ? { [P in K]: T[P] } : never; export type OmitU<T, K extends keyof T> = T extends any ? PickU<T, Exclude<keyof T, K>> : never; type Defaultize<P, D> = P extends any ? string extends keyof P ? P : PickU<P, Exclude<keyof P, keyof D>> & Partial<PickU<P, Extract<keyof P, keyof D>>> & Partial<PickU<D, Exclude<keyof D, keyof P>>> : never; export type IntrinsicElementsKeys = keyof React.JSX.IntrinsicElements; type ReactDefaultizedProps<C, P> = C extends { defaultProps: infer D; } ? Defaultize<P, D> : P; type MakeAttrsOptional<C extends string | React.ComponentType<any>, O extends object, A extends keyof P, P = React.ComponentPropsWithRef<C extends IntrinsicElementsKeys | React.ComponentType<any> ? C : never>> = P extends any ? OmitU<ReactDefaultizedProps<C, P> & O, A> & Partial<PickU<P & O, A>> : never; export type StyledComponentProps<C extends string | React.ComponentType<any>, T extends object, O extends object, A extends keyof any, FAsC extends string | React.ComponentType<any> = C> = O extends object ? WithOptionalTheme<MakeAttrsOptional<C, O, A> & MakeAttrsOptional<FAsC, O, A>, T> : never; export interface ThemeProps<T> { theme: T; } export type ThemedStyledProps<P, T> = P & ThemeProps<T>; export interface Keyframes { getName(): string; } declare const _default: typeof scStyled; export default _default; /** * For internal usage in `@mui/system` package */ export declare function internal_mutateStyles(tag: React.ElementType, processor: (styles: any) => any): void; export declare function internal_processStyles(tag: React.ElementType, processor: (styles: any) => any): void; export declare function internal_serializeStyles<P>(styles: Interpolation<P>): object; export { ThemeContext, keyframes, css } from 'styled-components'; export { default as StyledEngineProvider } from "./StyledEngineProvider/index.mjs"; export { default as GlobalStyles } from "./GlobalStyles/index.mjs"; export type { GlobalStylesProps } from "./GlobalStyles/index.mjs"; export type CSSProperties = CSS.PropertiesFallback<number | string>; export type CSSPropertiesWithMultiValues = { [K in keyof CSSProperties]: CSSProperties[K] | Array<Extract<CSSProperties[K], string>> }; export type CSSPseudos = { [K in CSS.Pseudos]?: unknown | CSSObject }; export interface CSSOthersObject { [propertiesName: string]: unknown | CSSInterpolation; } export type CSSPseudosForCSSObject = { [K in CSS.Pseudos]?: CSSObject }; export interface ArrayCSSInterpolation extends Array<CSSInterpolation> {} export interface CSSOthersObjectForCSSObject { [propertiesName: string]: CSSInterpolation; } export interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos, Omit<CSSOthersObject, 'variants'> {} interface CSSObjectWithVariants<Props> extends Omit<CSSObject, 'variants'> { variants: Array<{ props: Props | ((props: Props) => boolean); style: CSSObject | ((args: Props extends { theme: any; } ? { theme: Props['theme']; } : any) => CSSObject); }>; } export type FalseyValue = undefined | null | false; export type Interpolation<P> = InterpolationValue | CSSObjectWithVariants<P> | InterpolationFunction<P> | FlattenInterpolation<P>; export type FlattenInterpolation<P> = ReadonlyArray<Interpolation<P>>; export type InterpolationValue = string | number | FalseyValue | Keyframes | StyledComponentInterpolation | CSSObject; export type SimpleInterpolation = InterpolationValue | FlattenSimpleInterpolation; export type CSSInterpolation = SimpleInterpolation; export type FlattenSimpleInterpolation = ReadonlyArray<SimpleInterpolation>; export type InterpolationFunction<P> = (props: P) => Interpolation<P>; type ForwardRefExoticBase<P> = PickU<React.ForwardRefExoticComponent<P>, keyof React.ForwardRefExoticComponent<any>>; type StyledComponentPropsWithAs<C extends string | React.ComponentType<any>, T extends object, O extends object, A extends keyof any, AsC extends string | React.ComponentType<any> = C, FAsC extends string | React.ComponentType<any> = C> = StyledComponentProps<C, T, O, A, FAsC> & { as?: AsC | undefined; forwardedAs?: FAsC | undefined; }; export type StyledComponent<C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>, T extends object = {}, O extends object = {}, A extends keyof any = never> = // the "string" allows this to be used as an object key string & StyledComponentBase<C, T, O, A> & hoistNonReactStatics.NonReactStatics<C extends React.ComponentType<any> ? C : never>; export type AnyStyledComponent = StyledComponent<any, any, any, any> | StyledComponent<any, any, any> | React.FunctionComponent<any> | React.ComponentType<any>; export type StyledComponentInnerComponent<C extends AnyStyledComponent> = C extends StyledComponent<infer I, any, any, any> ? I : C extends StyledComponent<infer I, any, any> ? I : C; export type StyledComponentInnerOtherProps<C extends AnyStyledComponent> = C extends StyledComponent<any, any, infer O, any> ? O : C extends StyledComponent<any, any, infer O> ? O : never; export type StyledComponentInnerAttrs<C extends AnyStyledComponent> = C extends StyledComponent<any, any, any, infer A> ? A : never; export interface StyledComponentBase<C extends string | React.ComponentType<any>, T extends object, O extends object = {}, A extends keyof any = never> extends ForwardRefExoticBase<StyledComponentProps<C, T, O, A>> { (props: StyledComponentProps<C, T, O, A> & { as?: never | undefined; forwardedAs?: never | undefined; }): React.ReactElement<StyledComponentProps<C, T, O, A>>; <AsC extends string | React.ComponentType<any> = C, FAsC extends string | React.ComponentType<any> = AsC>(props: StyledComponentPropsWithAs<AsC, T, O, A, AsC, FAsC>): React.ReactElement<StyledComponentPropsWithAs<AsC, T, O, A, AsC, FAsC>>; withComponent<WithC extends AnyStyledComponent>(component: WithC): StyledComponent<StyledComponentInnerComponent<WithC>, T, O & StyledComponentInnerOtherProps<WithC>, A | StyledComponentInnerAttrs<WithC>>; withComponent<WithC extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>>(component: WithC): StyledComponent<WithC, T, O, A>; } type StyledComponentInterpolation = Pick<StyledComponentBase<any, any, any, any>, keyof StyledComponentBase<any, any>> | Pick<StyledComponentBase<any, any, any>, keyof StyledComponentBase<any, any>>; type AnyIfEmpty<T extends object> = keyof T extends never ? any : T; type ThemedStyledComponentFactories<T extends object> = { [TTag in keyof React.JSX.IntrinsicElements]: ThemedStyledFunctionBase<TTag, T> }; export type StyledComponentPropsWithRef<C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>> = C extends AnyStyledComponent ? React.ComponentPropsWithRef<StyledComponentInnerComponent<C>> : React.ComponentPropsWithRef<C>; export interface ThemedStyledFunctionBase<C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>, T extends object, O extends object = {}, A extends keyof any = never> { (first: TemplateStringsArray): StyledComponent<C, T, O, A>; (first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O, T>>, ...other: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O, T>>>): StyledComponent<C, T, O, A>; <U extends object>(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>, ...other: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>>): StyledComponent<C, T, O & U, A>; } export interface ThemedStyledFunction<C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>, T extends object, O extends object = {}, A extends keyof any = never> extends ThemedStyledFunctionBase<C, T, O, A> {} export type CreateStyledComponent<ComponentProps extends {}, SpecificComponentProps extends {} = {}, JSXProps extends {} = {}, T extends object = {}> = ThemedStyledFunction<React.ComponentType<ComponentProps>, T, SpecificComponentProps & JSXProps>; export interface StyledConfig<O extends object = {}> { componentId?: string | undefined; displayName?: string | undefined; label?: string | undefined; target?: string | undefined; shouldForwardProp?: ((prop: keyof O, defaultValidatorFn: (prop: keyof O) => boolean) => boolean) | undefined; } /** Same as StyledConfig but shouldForwardProp must be a type guard */ export interface FilteringStyledOptions<Props, ForwardedProps extends keyof Props = keyof Props> { componentId?: string | undefined; displayName?: string | undefined; label?: string | undefined; shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps; target?: string | undefined; } export interface ThemedBaseStyledInterface<MUIStyledCommonProps extends object, MuiStyledOptions extends object, Theme extends object> extends ThemedStyledComponentFactories<Theme> { <C extends React.ComponentClass<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps> & MuiStyledOptions): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & MUIStyledCommonProps, {}, { ref?: React.Ref<InstanceType<C>> | undefined; }, Theme>; <C extends React.ComponentClass<React.ComponentProps<C>>>(component: C, options?: StyledConfig<PropsOf<C> & MUIStyledCommonProps> & MuiStyledOptions): CreateStyledComponent<PropsOf<C> & MUIStyledCommonProps, {}, { ref?: React.Ref<InstanceType<C>> | undefined; }, Theme>; <C extends React.JSXElementConstructor<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps> & MuiStyledOptions): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & MUIStyledCommonProps, {}, {}, Theme>; <C extends React.JSXElementConstructor<React.ComponentProps<C>>>(component: C, options?: StyledConfig<PropsOf<C> & MUIStyledCommonProps> & MuiStyledOptions): CreateStyledComponent<PropsOf<C> & MUIStyledCommonProps, {}, {}, Theme>; <Tag extends keyof React.JSX.IntrinsicElements, ForwardedProps extends keyof React.JSX.IntrinsicElements[Tag] = keyof React.JSX.IntrinsicElements[Tag]>(tag: Tag, options: FilteringStyledOptions<React.JSX.IntrinsicElements[Tag], ForwardedProps> & MuiStyledOptions): CreateStyledComponent<MUIStyledCommonProps, Pick<React.JSX.IntrinsicElements[Tag], ForwardedProps>, {}, Theme>; <Tag extends keyof React.JSX.IntrinsicElements>(tag: Tag, options?: StyledConfig<MUIStyledCommonProps> & MuiStyledOptions): CreateStyledComponent<MUIStyledCommonProps, React.JSX.IntrinsicElements[Tag], {}, Theme>; } export type CreateMUIStyled<MUIStyledCommonProps extends object = {}, MuiStyledOptions extends object = {}, T extends object = {}> = ThemedBaseStyledInterface<MUIStyledCommonProps, MuiStyledOptions, AnyIfEmpty<T>>; export type PropsOf<C extends keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<any>> = React.JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>; export interface MUIStyledComponent<ComponentProps extends {}, SpecificComponentProps extends {} = {}, JSXProps extends {} = {}> extends React.FC<ComponentProps & SpecificComponentProps & JSXProps> { withComponent<C extends React.ComponentClass<React.ComponentProps<C>>>(component: C): MUIStyledComponent<ComponentProps & PropsOf<C>, {}, { ref?: React.Ref<InstanceType<C>> | undefined; }>; withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(component: C): MUIStyledComponent<ComponentProps & PropsOf<C>>; withComponent<Tag extends keyof React.JSX.IntrinsicElements>(tag: Tag): MUIStyledComponent<ComponentProps, React.JSX.IntrinsicElements[Tag]>; }