@mui/styled-engine-sc 5.0.3 → 5.4.1

package/index.d.ts

@@ -1,9 +1,140 @@
+import * as React from 'react';
+import * as CSS from 'csstype';
+import {
+  AnyStyledComponent,
+  StyledConfig,
+  StyledComponent,
+  StyledComponentPropsWithRef,
+  StyledComponentInnerComponent,
+  StyledComponentInnerOtherProps,
+  StyledComponentInnerAttrs,
+  ThemedStyledProps,
+  StyledComponentBase,
+  Keyframes,
+} from 'styled-components';
+
 export * from 'styled-components';
 export { default } from 'styled-components';
 
 export { default as StyledEngineProvider } from './StyledEngineProvider';
 
-export { ThemeContext, keyframes, css } from 'styled-components';
-
 export { default as GlobalStyles } from './GlobalStyles';
 export * from './GlobalStyles';
+
+// 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<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, CSSOthersObject {}
+
+export type FalseyValue = undefined | null | false;
+export type Interpolation<P> =
+  | InterpolationValue
+  | InterpolationFunction<P>
+  | FlattenInterpolation<P>;
+// cannot be made a self-referential interface, breaks WithPropNested
+// see https://github.com/microsoft/TypeScript/issues/34796
+export type FlattenInterpolation<P> = ReadonlyArray<Interpolation<P>>;
+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<SimpleInterpolation>;
+
+export type InterpolationFunction<P> = (props: P) => Interpolation<P>;
+
+// remove the call signature from StyledComponent so Interpolation can still infer InterpolationFunction
+type StyledComponentInterpolation =
+  | Pick<StyledComponentBase<any, any, any, any>, keyof StyledComponentBase<any, any>>
+  | Pick<StyledComponentBase<any, any, any>, keyof StyledComponentBase<any, any>>;
+
+// These are typings coming from styled-components
+// They are adjusted to accept the extended options coming from mui
+type AnyIfEmpty<T extends object> = keyof T extends never ? any : T;
+
+type ThemedStyledComponentFactories<T extends object> = {
+  [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunctionBase<TTag, T>;
+};
+
+// Same as in styled-components, but copied here so that it would use the Interpolation & CSS typings from above
+export interface ThemedStyledFunctionBase<
+  C extends keyof 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>>,
+    ...rest: 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>>,
+    ...rest: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>>
+  ): StyledComponent<C, T, O & U, A>;
+}
+
+// same as ThemedStyledFunction in styled-components, but without attrs, and withConfig
+export interface ThemedStyledFunction<
+  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
+  T extends object,
+  O extends object = {},
+  A extends keyof any = never,
+> extends ThemedStyledFunctionBase<C, T, O, A> {}
+
+// same as ThemedBaseStyledInterface in styled-components, but with added options & common props for MUI components
+export interface ThemedBaseStyledInterface<
+  MUIStyledCommonProps extends object,
+  MuiStyledOptions extends object,
+  T extends object,
+> extends ThemedStyledComponentFactories<T> {
+  <C extends AnyStyledComponent>(
+    component: C,
+    options?: StyledConfig<any> & MuiStyledOptions,
+  ): ThemedStyledFunction<
+    StyledComponentInnerComponent<C>,
+    T,
+    StyledComponentInnerOtherProps<C> & MUIStyledCommonProps,
+    StyledComponentInnerAttrs<C>
+  >;
+  <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(
+    // unfortunately using a conditional type to validate that it can receive a `theme?: Theme`
+    // causes tests to fail in TS 3.1
+    component: C,
+    options?: StyledConfig<any> & MuiStyledOptions,
+  ): ThemedStyledFunction<C, T, MUIStyledCommonProps>;
+}
+
+export type CreateMUIStyled<
+  MUIStyledCommonProps extends object = {},
+  MuiStyledOptions extends object = {},
+  T extends object = {},
+> = ThemedBaseStyledInterface<MUIStyledCommonProps, MuiStyledOptions, AnyIfEmpty<T>>;

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.3
+/** @license MUI v5.4.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -17,7 +17,7 @@ export default function styled(tag, options) {
   }
 
   if (process.env.NODE_ENV !== 'production') {
-    return (...styles) => {
+    const fn = (...styles) => {
       const component = typeof tag === 'string' ? `"${tag}"` : 'component';
 
       if (styles.length === 0) {
@@ -28,9 +28,12 @@ export default function styled(tag, options) {
 
       return stylesFactory(...styles);
     };
+
+    fn.withConfig = stylesFactory.withConfig;
+    return fn;
   }
 
-  return (...styles) => stylesFactory(...styles);
+  return stylesFactory;
 }
 export { ThemeContext, keyframes, css } from 'styled-components';
 export { default as StyledEngineProvider } from './StyledEngineProvider';

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.3
+/** @license MUI v5.4.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -17,7 +17,7 @@ export default function styled(tag, options) {
   }
 
   if (process.env.NODE_ENV !== 'production') {
-    return function () {
+    var fn = function fn() {
       var component = typeof tag === 'string' ? "\"".concat(tag, "\"") : 'component';
 
       for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -34,11 +34,12 @@ export default function styled(tag, options) {
 
       return stylesFactory.apply(void 0, styles);
     };
+
+    fn.withConfig = stylesFactory.withConfig;
+    return fn;
   }
 
-  return function () {
-    return stylesFactory.apply(void 0, arguments);
-  };
+  return stylesFactory;
 }
 export { ThemeContext, keyframes, css } from 'styled-components';
 export { default as StyledEngineProvider } from './StyledEngineProvider';

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.3
+/** @license MUI v5.4.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -17,7 +17,7 @@ export default function styled(tag, options) {
   }
 
   if (process.env.NODE_ENV !== 'production') {
-    return (...styles) => {
+    const fn = (...styles) => {
       const component = typeof tag === 'string' ? `"${tag}"` : 'component';
 
       if (styles.length === 0) {
@@ -28,9 +28,12 @@ export default function styled(tag, options) {
 
       return stylesFactory(...styles);
     };
+
+    fn.withConfig = stylesFactory.withConfig;
+    return fn;
   }
 
-  return (...styles) => stylesFactory(...styles);
+  return stylesFactory;
 }
 export { ThemeContext, keyframes, css } from 'styled-components';
 export { default as StyledEngineProvider } from './StyledEngineProvider';

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.3
+/** @license MUI v5.4.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,35 +10,35 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = styled;
-Object.defineProperty(exports, "ThemeContext", {
+Object.defineProperty(exports, "GlobalStyles", {
   enumerable: true,
   get: function () {
-    return _styledComponents.ThemeContext;
+    return _GlobalStyles.default;
   }
 });
-Object.defineProperty(exports, "keyframes", {
+Object.defineProperty(exports, "StyledEngineProvider", {
   enumerable: true,
   get: function () {
-    return _styledComponents.keyframes;
+    return _StyledEngineProvider.default;
   }
 });
-Object.defineProperty(exports, "css", {
+Object.defineProperty(exports, "ThemeContext", {
   enumerable: true,
   get: function () {
-    return _styledComponents.css;
+    return _styledComponents.ThemeContext;
   }
 });
-Object.defineProperty(exports, "StyledEngineProvider", {
+Object.defineProperty(exports, "css", {
   enumerable: true,
   get: function () {
-    return _StyledEngineProvider.default;
+    return _styledComponents.css;
   }
 });
-Object.defineProperty(exports, "GlobalStyles", {
+exports.default = styled;
+Object.defineProperty(exports, "keyframes", {
   enumerable: true,
   get: function () {
-    return _GlobalStyles.default;
+    return _styledComponents.keyframes;
   }
 });
 
@@ -65,7 +65,7 @@ function styled(tag, options) {
   }
 
   if (process.env.NODE_ENV !== 'production') {
-    return (...styles) => {
+    const fn = (...styles) => {
       const component = typeof tag === 'string' ? `"${tag}"` : 'component';
 
       if (styles.length === 0) {
@@ -76,7 +76,10 @@ function styled(tag, options) {
 
       return stylesFactory(...styles);
     };
+
+    fn.withConfig = stylesFactory.withConfig;
+    return fn;
   }
 
-  return (...styles) => stylesFactory(...styles);
+  return stylesFactory;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/styled-engine-sc",
-  "version": "5.0.3",
+  "version": "5.4.1",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for styled-components.",
@@ -8,22 +8,22 @@
   "keywords": [
     "react",
     "react-component",
-    "material-ui",
+    "mui",
     "styled-components"
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui-org/material-ui.git",
+    "url": "https://github.com/mui/material-ui.git",
     "directory": "packages/mui-styled-engine-sc"
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/mui-org/material-ui/issues"
+    "url": "https://github.com/mui/material-ui/issues"
   },
   "homepage": "https://mui.com/guides/styled-engine/",
   "funding": {
     "type": "opencollective",
-    "url": "https://opencollective.com/material-ui"
+    "url": "https://opencollective.com/mui"
   },
   "dependencies": {
     "prop-types": "^15.7.2"