@mui/styled-engine-sc 6.0.0-alpha.8 → 6.0.0-beta.0

package/GlobalStyles/GlobalStyles.d.ts

@@ -8,4 +8,4 @@ export interface GlobalStylesProps<Theme extends object = {}> {
 
 export default function Global<Theme extends object = {}>(
   props: GlobalStylesProps<Theme>,
-): React.ReactElement;
+): React.ReactElement<any>;

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/StyledEngineProvider/StyledEngineProvider.d.ts

@@ -5,4 +5,4 @@ export interface StyledEngineProviderProps {
   injectFirst?: boolean;
 }
 
-export default function StyledEngineProvider(props: StyledEngineProviderProps): JSX.Element;
+export default function StyledEngineProvider(props: StyledEngineProviderProps): React.JSX.Element;

package/index.d.ts

@@ -23,7 +23,7 @@ type Defaultize<P, D> = P extends any
         Partial<PickU<D, Exclude<keyof D, keyof P>>>
   : never;
 
-export type IntrinsicElementsKeys = keyof JSX.IntrinsicElements;
+export type IntrinsicElementsKeys = keyof React.JSX.IntrinsicElements;
 type ReactDefaultizedProps<C, P> = C extends { defaultProps: infer D } ? Defaultize<P, D> : P;
 
 type MakeAttrsOptional<
@@ -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;
@@ -153,7 +156,7 @@ type StyledComponentPropsWithAs<
 };
 
 export type StyledComponent<
-  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
+  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
   T extends object = {},
   O extends object = {},
   A extends keyof any = never,
@@ -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>,
@@ -224,7 +217,7 @@ export interface StyledComponentBase<
     O & StyledComponentInnerOtherProps<WithC>,
     A | StyledComponentInnerAttrs<WithC>
   >;
-  withComponent<WithC extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(
+  withComponent<WithC extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>>(
     component: WithC,
   ): StyledComponent<WithC, T, O, A>;
 }
@@ -239,18 +232,18 @@ type StyledComponentInterpolation =
 type AnyIfEmpty<T extends object> = keyof T extends never ? any : T;
 
 type ThemedStyledComponentFactories<T extends object> = {
-  [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunctionBase<TTag, T>;
+  [TTag in keyof React.JSX.IntrinsicElements]: ThemedStyledFunctionBase<TTag, T>;
 };
 
 export type StyledComponentPropsWithRef<
-  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
+  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
 > = C extends AnyStyledComponent
   ? React.ComponentPropsWithRef<StyledComponentInnerComponent<C>>
   : React.ComponentPropsWithRef<C>;
 
 // 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>,
+  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
   T extends object,
   O extends object = {},
   A extends keyof any = never,
@@ -274,7 +267,7 @@ export interface ThemedStyledFunctionBase<
 
 // same as ThemedStyledFunction in styled-components, but without attrs, and withConfig
 export interface ThemedStyledFunction<
-  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
+  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
   T extends object,
   O extends object = {},
   A extends keyof any = never,
@@ -292,32 +285,87 @@ 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 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<
@@ -326,8 +374,9 @@ export type CreateMUIStyled<
   T extends object = {},
 > = ThemedBaseStyledInterface<MUIStyledCommonProps, MuiStyledOptions, AnyIfEmpty<T>>;
 
-export type PropsOf<C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> =
-  JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>;
+export type PropsOf<
+  C extends keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<any>,
+> = React.JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>;
 
 export interface MUIStyledComponent<
   ComponentProps extends {},
@@ -340,7 +389,7 @@ export interface MUIStyledComponent<
   withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(
     component: C,
   ): MUIStyledComponent<ComponentProps & PropsOf<C>>;
-  withComponent<Tag extends keyof JSX.IntrinsicElements>(
+  withComponent<Tag extends keyof React.JSX.IntrinsicElements>(
     tag: Tag,
-  ): MUIStyledComponent<ComponentProps, JSX.IntrinsicElements[Tag]>;
+  ): MUIStyledComponent<ComponentProps, React.JSX.IntrinsicElements[Tag]>;
 }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/styled-engine-sc v6.0.0-alpha.8
+ * @mui/styled-engine-sc v6.0.0-beta.0
  *
  * @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.8
+ * @mui/styled-engine-sc v6.0.0-beta.0
  *
  * @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.8
+ * @mui/styled-engine-sc v6.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -47,7 +47,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _StyledEngineProvider = _interopRequireDefault(require("./StyledEngineProvider"));
 var _GlobalStyles = _interopRequireDefault(require("./GlobalStyles"));
 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 && Object.prototype.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 _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.8",
+  "version": "6.0.0-beta.0",
   "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-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.5",
-    "csstype": "^3.1.2",
+    "@babel/runtime": "^7.24.7",
+    "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"

package/legacy/GlobalStyles/GlobalStyles.js

@@ -1,19 +0,0 @@
-import PropTypes from 'prop-types';
-import { createGlobalStyle } from 'styled-components';
-function isEmpty(obj) {
-  return obj === undefined || obj === null || Object.keys(obj).length === 0;
-}
-var GlobalStyles = createGlobalStyle(function (props) {
-  var styles = props.styles,
-    _props$defaultTheme = props.defaultTheme,
-    defaultTheme = _props$defaultTheme === void 0 ? {} : _props$defaultTheme;
-  if (typeof styles === 'function') {
-    return styles(isEmpty(props.theme) ? defaultTheme : props.theme);
-  }
-  return styles;
-});
-export default GlobalStyles;
-GlobalStyles.propTypes = {
-  defaultTheme: PropTypes.object,
-  styles: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.object, PropTypes.func])
-};

package/legacy/GlobalStyles/index.js

@@ -1 +0,0 @@
-export { default } from './GlobalStyles';

package/legacy/StyledEngineProvider/StyledEngineProvider.js

@@ -1,26 +0,0 @@
-import PropTypes from 'prop-types';
-export default function StyledEngineProvider(props) {
-  var injectFirst = props.injectFirst,
-    children = props.children;
-  if (injectFirst && typeof window !== 'undefined') {
-    var head = document.head;
-    if (!head.querySelector('[data-styled="active"]')) {
-      var injectFirstNode = document.createElement('style');
-      injectFirstNode.setAttribute('data-styled', 'active');
-      head.insertBefore(injectFirstNode, head.firstChild);
-    }
-  }
-  return children;
-}
-StyledEngineProvider.propTypes = {
-  /**
-   * Your component tree.
-   */
-  children: PropTypes.node,
-  /**
-   * By default, the styles are injected last in the <head> element of the page.
-   * As a result, they gain more specificity than any other style sheet.
-   * If you want to override MUI's styles, set this prop.
-   */
-  injectFirst: PropTypes.bool
-};

package/legacy/StyledEngineProvider/index.js

@@ -1 +0,0 @@
-export { default } from './StyledEngineProvider';

package/legacy/index.js

@@ -1,53 +0,0 @@
-/**
- * @mui/styled-engine-sc v6.0.0-alpha.8
- *
- * @license MIT
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import scStyled from 'styled-components';
-export default function styled(tag, options) {
-  var stylesFactory;
-  if (options) {
-    stylesFactory = scStyled(tag).withConfig({
-      displayName: options.label,
-      shouldForwardProp: options.shouldForwardProp
-    });
-  } else {
-    stylesFactory = scStyled(tag);
-  }
-  if (process.env.NODE_ENV !== 'production') {
-    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++) {
-        styles[_key] = arguments[_key];
-      }
-      if (styles.length === 0) {
-        console.error(["MUI: Seems like you called `styled(".concat(component, ")()` without a `style` argument."), 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join('\n'));
-      } else if (styles.some(function (style) {
-        return style === undefined;
-      })) {
-        console.error("MUI: the styled(".concat(component, ")(...args) API requires all its args to be defined."));
-      }
-      return stylesFactory.apply(void 0, styles);
-    };
-    fn.withConfig = stylesFactory.withConfig;
-    return fn;
-  }
-  return stylesFactory;
-}
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export var internal_processStyles = function internal_processStyles(tag, processor) {
-  // Styled-components attaches an instance to `componentStyle`.
-  // https://github.com/styled-components/styled-components/blob/da8151762dcf72735ffba358173d4c097f6d5888/packages/styled-components/src/models/StyledComponent.ts#L257
-  //
-  // The instance contains `rules` (the styles)
-  // https://github.com/styled-components/styled-components/blob/da8151762dcf72735ffba358173d4c097f6d5888/packages/styled-components/src/models/ComponentStyle.ts#L23
-  if (tag.componentStyle) {
-    tag.componentStyle.rules = processor(tag.componentStyle.rules);
-  }
-};
-export { ThemeContext, keyframes, css } from 'styled-components';
-export { default as StyledEngineProvider } from './StyledEngineProvider';
-export { default as GlobalStyles } from './GlobalStyles';