package.index.d.ts Maven / Gradle / Ivy

Go to download
import * as CSS from 'csstype';
import { StyledComponent, StyledOptions } from '@emotion/styled';
import { PropsOf } from '@emotion/react';

export * from '@emotion/styled';
export { default } from '@emotion/styled';
export { ThemeContext, keyframes, css } from '@emotion/react';

export { default as StyledEngineProvider } from './StyledEngineProvider';

export { default as GlobalStyles } from './GlobalStyles';
export * from './GlobalStyles';

export type MUIStyledComponent<
  ComponentProps extends {},
  SpecificComponentProps extends {} = {},
  JSXProps extends {} = {},
> = StyledComponent;

/**
 * For internal usage in `@mui/system` package
 */
// eslint-disable-next-line @typescript-eslint/naming-convention
export function internal_processStyles(
  tag: React.ElementType,
  processor: (styles: any) => any,
): void;

export interface SerializedStyles {
  name: string;
  styles: string;
  map?: string;
  next?: SerializedStyles;
}

export type CSSProperties = CSS.PropertiesFallback;
export type CSSPropertiesWithMultiValues = {
  [K in keyof CSSProperties]: CSSProperties[K] | ReadonlyArray>;
};

// TODO v6 - check if we can drop the unknown, as it breaks the autocomplete
// For more info on why it was added, see https://github.com/mui/material-ui/pull/26228
export type CSSPseudos = { [K in CSS.Pseudos]?: unknown | CSSObject };

// TODO v6 - check if we can drop the unknown, as it breaks the autocomplete
// For more info on why it was added, see https://github.com/mui/material-ui/pull/26228
export interface CSSOthersObject {
  [propertiesName: string]: unknown | CSSInterpolation;
}
export type CSSPseudosForCSSObject = { [K in CSS.Pseudos]?: CSSObject };

export interface ArrayCSSInterpolation extends ReadonlyArray {}

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;
  }>;
}

export interface ComponentSelector {
  __emotion_styles: any;
}

export type Keyframes = {
  name: string;
  styles: string;
  anim: number;
  toString: () => string;
} & string;

export type Equal = A extends B ? (B extends A ? T : F) : F;

export type InterpolationPrimitive =
  | null
  | undefined
  | boolean
  | number
  | string
  | ComponentSelector
  | Keyframes
  | SerializedStyles
  | CSSObject;

export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation;

export interface FunctionInterpolation {
  (props: Props): Interpolation;
}

export interface ArrayInterpolation extends ReadonlyArray> {}

export type Interpolation =
  | InterpolationPrimitive
  | CSSObjectWithVariants
  | ArrayInterpolation
  | FunctionInterpolation;

export function shouldForwardProp(propName: PropertyKey): boolean;

/** Same as StyledOptions but shouldForwardProp must be a type guard */
export interface FilteringStyledOptions {
  label?: string;
  shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps;
  target?: string;
}

/**
 * @typeparam ComponentProps  Props which will be included when withComponent is called
 * @typeparam SpecificComponentProps  Props which will *not* be included when withComponent is called
 */
export interface CreateStyledComponent<
  ComponentProps extends {},
  SpecificComponentProps extends {} = {},
  JSXProps extends {} = {},
  T extends object = {},
> {
  (
    ...styles: Array>
  ): StyledComponent;

  /**
   * @typeparam AdditionalProps  Additional props to add to your styled component
   */
  (
    ...styles: Array<
      Interpolation
    >
  ): StyledComponent;

  (
    template: TemplateStringsArray,
    ...styles: Array>
  ): StyledComponent;

  /**
   * @typeparam AdditionalProps  Additional props to add to your styled component
   */
  (
    template: TemplateStringsArray,
    ...styles: Array<
      Interpolation
    >
  ): StyledComponent;
}

export interface CreateMUIStyled<
  MUIStyledCommonProps extends {},
  MuiStyledOptions,
  Theme extends object,
> {
  <
    C extends React.ComponentClass>,
    ForwardedProps extends keyof React.ComponentProps = keyof React.ComponentProps,
  >(
    component: C,
    options: FilteringStyledOptions, ForwardedProps> & MuiStyledOptions,
  ): CreateStyledComponent<
    Pick, ForwardedProps> & MUIStyledCommonProps,
    {},
    {
      ref?: React.Ref>;
    },
    Theme
  >;

  >>(
    component: C,
    options?: StyledOptions & MUIStyledCommonProps> & MuiStyledOptions,
  ): CreateStyledComponent<
    PropsOf & MUIStyledCommonProps,
    {},
    {
      ref?: React.Ref>;
    },
    Theme
  >;

  <
    C extends React.JSXElementConstructor>,
    ForwardedProps extends keyof React.ComponentProps = keyof React.ComponentProps,
  >(
    component: C,
    options: FilteringStyledOptions, ForwardedProps> & MuiStyledOptions,
  ): CreateStyledComponent, ForwardedProps> & MUIStyledCommonProps, {}, {}, Theme>;

  >>(
    component: C,
    options?: StyledOptions & MUIStyledCommonProps> & MuiStyledOptions,
  ): CreateStyledComponent & MUIStyledCommonProps, {}, {}, Theme>;

  <
    Tag extends keyof JSX.IntrinsicElements,
    ForwardedProps extends keyof JSX.IntrinsicElements[Tag] = keyof JSX.IntrinsicElements[Tag],
  >(
    tag: Tag,
    options: FilteringStyledOptions & MuiStyledOptions,
  ): CreateStyledComponent<
    MUIStyledCommonProps,
    Pick,
    {},
    Theme
  >;

  (
    tag: Tag,
    options?: StyledOptions & MuiStyledOptions,
  ): CreateStyledComponent;
}