@mui/styled-engine-sc 6.0.0-alpha.2 → 6.0.0-alpha.20

package/README.md

@@ -7,4 +7,4 @@ It's designed for developers who would like to use `styled-components` as the ma
 
 <!-- #default-branch-switch -->
 
-Visit [https://mui.com/material-ui/guides/styled-components/](https://mui.com/material-ui/guides/styled-components/) to view the full documentation.
+Visit [https://next.mui.com/material-ui/integrations/styled-components/](https://next.mui.com/material-ui/integrations/styled-components/) to view the full documentation.

package/index.d.ts

@@ -108,7 +108,10 @@ export interface CSSObject
     Omit<CSSOthersObject, 'variants'> {}
 
 interface CSSObjectWithVariants<Props> extends Omit<CSSObject, 'variants'> {
-  variants: Array<{ props: Props; variants: CSSObject }>;
+  variants: Array<{
+    props: Props | ((props: Props) => boolean);
+    style: CSSObject;
+  }>;
 }
 
 export type FalseyValue = undefined | null | false;
@@ -170,31 +173,21 @@ export type AnyStyledComponent =
   | 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 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;
+      ? 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>,
@@ -292,32 +285,85 @@ export interface StyledConfig<O extends object = {}> {
   // 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<Props, ForwardedProps extends keyof Props = keyof Props> {
+  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<
   MUIStyledCommonProps extends object,
   MuiStyledOptions extends object,
-  T extends object,
-> extends ThemedStyledComponentFactories<T> {
-  <C extends AnyStyledComponent>(
+  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?: StyledConfig<any> & MuiStyledOptions,
-  ): ThemedStyledFunction<
-    StyledComponentInnerComponent<C>,
-    T,
-    StyledComponentInnerOtherProps<C> & MUIStyledCommonProps,
-    StyledComponentInnerAttrs<C>
+    options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps> & MuiStyledOptions,
+  ): CreateStyledComponent<
+    Pick<PropsOf<C>, ForwardedProps> & MUIStyledCommonProps,
+    {},
+    {
+      ref?: React.Ref<InstanceType<C>>;
+    },
+    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>>;
+    },
+    Theme
   >;
-  <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
+
+  <
+    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<any> & MuiStyledOptions,
-  ): ThemedStyledFunction<C, T, MUIStyledCommonProps>;
+    options?: StyledConfig<PropsOf<C> & MUIStyledCommonProps> & MuiStyledOptions,
+  ): CreateStyledComponent<PropsOf<C> & MUIStyledCommonProps, {}, {}, Theme>;
+
+  <
+    Tag extends keyof JSX.IntrinsicElements,
+    ForwardedProps extends keyof JSX.IntrinsicElements[Tag] = keyof JSX.IntrinsicElements[Tag],
+  >(
+    tag: Tag,
+    options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps> & MuiStyledOptions,
+  ): CreateStyledComponent<
+    MUIStyledCommonProps,
+    Pick<JSX.IntrinsicElements[Tag], ForwardedProps>,
+    {},
+    Theme
+  >;
+
+  <Tag extends keyof JSX.IntrinsicElements>(
+    tag: Tag,
+    options?: StyledConfig<MUIStyledCommonProps> & MuiStyledOptions,
+  ): CreateStyledComponent<MUIStyledCommonProps, JSX.IntrinsicElements[Tag], {}, Theme>;
 }
 
 export type CreateMUIStyled<

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/styled-engine-sc v6.0.0-alpha.2
+ * @mui/styled-engine-sc v6.0.0-alpha.20
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/styled-engine-sc v6.0.0-alpha.2
+ * @mui/styled-engine-sc v6.0.0-alpha.20
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/styled-engine-sc v6.0.0-alpha.2
+ * @mui/styled-engine-sc v6.0.0-alpha.20
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/styled-engine-sc v6.0.0-alpha.2
+ * @mui/styled-engine-sc v6.0.0-alpha.20
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -46,8 +46,8 @@ Object.defineProperty(exports, "keyframes", {
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _StyledEngineProvider = _interopRequireDefault(require("./StyledEngineProvider"));
 var _GlobalStyles = _interopRequireDefault(require("./GlobalStyles"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function styled(tag, options) {
   let stylesFactory;
   if (options) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/styled-engine-sc",
-  "version": "6.0.0-alpha.2",
+  "version": "6.0.0-alpha.20",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for styled-components.",
@@ -20,14 +20,14 @@
   "bugs": {
     "url": "https://github.com/mui/material-ui/issues"
   },
-  "homepage": "https://mui.com/material-ui/guides/styled-components/",
+  "homepage": "https://mui.com/material-ui/integrations/styled-components/",
   "funding": {
     "type": "opencollective",
-    "url": "https://opencollective.com/mui"
+    "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.1",
-    "csstype": "^3.1.2",
+    "@babel/runtime": "^7.24.4",
+    "csstype": "^3.1.3",
     "hoist-non-react-statics": "^3.3.2",
     "prop-types": "^15.8.1"
   },
@@ -36,7 +36,8 @@
   },
   "sideEffects": false,
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "directory": "build"
   },
   "engines": {
     "node": ">=12.0.0"