import * as React from 'react';
import * as CSS from 'csstype';
import * as hoistNonReactStatics from 'hoist-non-react-statics';
type WithOptionalTheme
= OmitU
& {
theme?: T | undefined;
};
// Helper type operators
// Pick that distributes over union types
export type PickU = T extends any ? { [P in K]: T[P] } : never;
export type OmitU = T extends any ? PickU> : never;
// Any prop that has a default prop becomes optional, but its type is unchanged
// Undeclared default props are augmented into the resulting allowable attributes
// If declared props have indexed properties, ignore default props entirely as keyof gets widened
// Wrap in an outer-level conditional type to allow distribution over props that are unions
type Defaultize = P extends any ? string extends keyof P ? P : PickU
> & Partial>> & Partial>> : never;
export type IntrinsicElementsKeys = keyof React.JSX.IntrinsicElements;
type ReactDefaultizedProps = C extends {
defaultProps: infer D;
} ? Defaultize : P;
type MakeAttrsOptional, O extends object, A extends keyof P, P = React.ComponentPropsWithRef ? C : never>> =
// Distribute unions early to avoid quadratic expansion
P extends any ? OmitU & O, A> & Partial> : never;
export type StyledComponentProps<
// The Component from whose props are derived
C extends string | React.ComponentType,
// The Theme from the current context
T extends object,
// The other props added by the template
O extends object,
// The props that are made optional by .attrs
A extends keyof any,
// The Component passed with "forwardedAs" prop
FAsC extends string | React.ComponentType = C> =
// Distribute O if O is a union type
O extends object ? WithOptionalTheme & MakeAttrsOptional, T> : never;
export interface ThemeProps {
theme: T;
}
export type ThemedStyledProps = P & ThemeProps;
export interface Keyframes {
getName(): string;
}
export * from 'styled-components';
export { default } from 'styled-components';
export { default as StyledEngineProvider } from "./StyledEngineProvider/index.js";
export { default as GlobalStyles } from "./GlobalStyles/index.js";
export * from "./GlobalStyles/index.js";
/**
* For internal usage in `@mui/system` package
*/
// eslint-disable-next-line @typescript-eslint/naming-convention
export function internal_mutateStyles(tag: React.ElementType, processor: (styles: any) => any): void;
// Not needed anymore, but fixes https://github.com/mui/material-ui/issues/44112
// TODO: Remove it in v7
// eslint-disable-next-line @typescript-eslint/naming-convention
export function internal_processStyles(tag: React.ElementType, processor: (styles: any) => any): void;
// eslint-disable-next-line @typescript-eslint/naming-convention
export function internal_serializeStyles(styles: Interpolation
): object;
// These are the same as the ones in @mui/styled-engine
// CSS.PropertiesFallback are necessary so that we support spreading of the mixins. For example:
// '@font-face'?: Fontface | Fontface[]
export type CSSProperties = CSS.PropertiesFallback;
export type CSSPropertiesWithMultiValues = { [K in keyof CSSProperties]: CSSProperties[K] | Array> };
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 {}
export interface CSSOthersObjectForCSSObject {
[propertiesName: string]: CSSInterpolation;
}
// Omit variants as a key, because we have a special handling for it
export interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos, Omit {}
interface CSSObjectWithVariants extends Omit {
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 = InterpolationValue | CSSObjectWithVariants
| InterpolationFunction
| FlattenInterpolation
;
// cannot be made a self-referential interface, breaks WithPropNested
// see https://github.com/microsoft/TypeScript/issues/34796
export type FlattenInterpolation
= ReadonlyArray>;
export type InterpolationValue = string | number | FalseyValue | Keyframes | StyledComponentInterpolation | CSSObject;
export type SimpleInterpolation = InterpolationValue | FlattenSimpleInterpolation;
// adapter for compatibility with @mui/styled-engine
export type CSSInterpolation = SimpleInterpolation;
export type FlattenSimpleInterpolation = ReadonlyArray;
export type InterpolationFunction = (props: P) => Interpolation
;
// abuse Pick to strip the call signature from ForwardRefExoticComponent
type ForwardRefExoticBase
= PickU, keyof React.ForwardRefExoticComponent>;
type StyledComponentPropsWithAs, T extends object, O extends object, A extends keyof any, AsC extends string | React.ComponentType = C, FAsC extends string | React.ComponentType = C> = StyledComponentProps & {
as?: AsC | undefined;
forwardedAs?: FAsC | undefined;
};
export type StyledComponent, T extends object = {}, O extends object = {}, A extends keyof any = never> =
// the "string" allows this to be used as an object key
// I really want to avoid this if possible but it's the only way to use nesting with object styles...
string & StyledComponentBase & hoistNonReactStatics.NonReactStatics ? C : never>;
// any doesn't count as assignable to never in the extends clause, and we default A to never
export type AnyStyledComponent = StyledComponent | StyledComponent | React.FunctionComponent | React.ComponentType;
export type StyledComponentInnerComponent = C extends StyledComponent ? I : C extends StyledComponent ? I : C;
export type StyledComponentInnerOtherProps = C extends StyledComponent ? O : C extends StyledComponent ? O : never;
export type StyledComponentInnerAttrs = C extends StyledComponent ? A : never;
export interface StyledComponentBase, T extends object, O extends object = {}, A extends keyof any = never> extends ForwardRefExoticBase> {
// add our own fake call signature to implement the polymorphic 'as' prop
(props: StyledComponentProps & {
as?: never | undefined;
forwardedAs?: never | undefined;
}): React.ReactElement>;
= C, FAsC extends string | React.ComponentType = AsC>(props: StyledComponentPropsWithAs): React.ReactElement>;
withComponent(component: WithC): StyledComponent, T, O & StyledComponentInnerOtherProps, A | StyledComponentInnerAttrs>;
withComponent>(component: WithC): StyledComponent;
}
// remove the call signature from StyledComponent so Interpolation can still infer InterpolationFunction
type StyledComponentInterpolation = Pick, keyof StyledComponentBase> | Pick, keyof StyledComponentBase>;
// These are typings coming from styled-components
// They are adjusted to accept the extended options coming from mui
type AnyIfEmpty = keyof T extends never ? any : T;
type ThemedStyledComponentFactories = { [TTag in keyof React.JSX.IntrinsicElements]: ThemedStyledFunctionBase };
export type StyledComponentPropsWithRef> = C extends AnyStyledComponent ? React.ComponentPropsWithRef> : React.ComponentPropsWithRef;
// Same as in styled-components, but copied here so that it would use the Interpolation & CSS typings from above
export interface ThemedStyledFunctionBase, T extends object, O extends object = {}, A extends keyof any = never> {
(first: TemplateStringsArray): StyledComponent;
(first: TemplateStringsArray | CSSObject | InterpolationFunction & O, T>>, ...other: Array & O, T>>>): StyledComponent;
(first: TemplateStringsArray | CSSObject | InterpolationFunction & O & U, T>>, ...other: Array & O & U, T>>>): StyledComponent;
}
// same as ThemedStyledFunction in styled-components, but without attrs, and withConfig
export interface ThemedStyledFunction, T extends object, O extends object = {}, A extends keyof any = never> extends ThemedStyledFunctionBase {}
export type CreateStyledComponent = ThemedStyledFunction, T, SpecificComponentProps & JSXProps>;
// Config to be used with withConfig
export interface StyledConfig {
// TODO: Add all types from the original StyledComponentWrapperProperties
componentId?: string;
displayName?: string;
label?: string;
target?: string;
shouldForwardProp?: ((prop: keyof O, defaultValidatorFn: (prop: keyof O) => boolean) => boolean) | undefined;
}
/** Same as StyledConfig but shouldForwardProp must be a type guard */
export interface FilteringStyledOptions {
componentId?: string;
displayName?: string;
label?: string;
shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps;
target?: string;
}
// same as ThemedBaseStyledInterface in styled-components, but with added options & common props for MUI components
export interface ThemedBaseStyledInterface extends ThemedStyledComponentFactories {
>, ForwardedProps extends keyof React.ComponentProps = keyof React.ComponentProps>(component: C, options: FilteringStyledOptions, ForwardedProps> & MuiStyledOptions): CreateStyledComponent, ForwardedProps> & MUIStyledCommonProps, {}, {
ref?: React.Ref>;
}, Theme>;
>>(component: C, options?: StyledConfig & MUIStyledCommonProps> & MuiStyledOptions): CreateStyledComponent & MUIStyledCommonProps, {}, {
ref?: React.Ref>;
}, Theme>;
>, ForwardedProps extends keyof React.ComponentProps = keyof React.ComponentProps>(component: C, options: FilteringStyledOptions, ForwardedProps> & MuiStyledOptions): CreateStyledComponent, ForwardedProps> & MUIStyledCommonProps, {}, {}, Theme>;
>>(component: C, options?: StyledConfig & MUIStyledCommonProps> & MuiStyledOptions): CreateStyledComponent & MUIStyledCommonProps, {}, {}, Theme>;
(tag: Tag, options: FilteringStyledOptions & MuiStyledOptions): CreateStyledComponent, {}, Theme>;
(tag: Tag, options?: StyledConfig & MuiStyledOptions): CreateStyledComponent;
}
export type CreateMUIStyled = ThemedBaseStyledInterface>;
export type PropsOf> = React.JSX.LibraryManagedAttributes>;
export interface MUIStyledComponent extends React.FC {
withComponent>>(component: C): MUIStyledComponent, {}, {
ref?: React.Ref>;
}>;
withComponent>>(component: C): MUIStyledComponent>;
withComponent(tag: Tag): MUIStyledComponent;
}