@mui/styled-engine-sc 5.14.12 → 6.0.0-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.14.13
+
+<!-- generated comparing v5.14.12..master -->
+
+_Oct 10, 2023_
+
+A big thanks to the 22 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Added support for `styled-components` v6 (#39042) @mnajdova
+
+### `@mui/material@5.14.13`
+
+- [Checkbox] Fix checkbox hover bg with extendTheme (#39319) @brijeshb42
+- [Chip] Outlined Chip variant is wider than the Filled counterpart (#39342) @chirag3003
+- [Select] Add notice about select's a11y improvement on v5.14.12 changelog (#39310) @DiegoAndai
+- [Typography] Color prop check for primitive type (#39071) @DarhkVoyd
+- [Pagination] Fix background color on hover and keyboard focus when using CSS theme variables (#39220) @ValkonX33
+- [Popper] Add missing `styleOverrides` Popper type in theme (#39154) @axelbostrom
+- [Slider] Support all default palette colors in TypeScript (#39058) @gugudwt
+
+### `@mui/base@5.0.0-beta.19`
+
+- [Menu] Add the anchor prop (#39297) @michaldudak
+
+### `@mui/material-next@6.0.0-alpha.105`
+
+- [Menu] Copy v5 Menu components (#39301) @mnajdova
+
+### `@mui/joy@5.0.0-beta.10`
+
+- [Autocomplete] Add `type=button` to clear button (#39263) @brijeshb42
+- [Button] Fix the text wrap issue (#38696) @atharva3333
+- [Drawer] Apply color inversion to content slot instead (#39312) @siriwatknp
+- [Switch] Fix missing class name (#39327) @Bestwebdesign
+
+### `@mui/styled-engine-sc@6.0.0-alpha.1`
+
+- &#8203;<!-- 03 -->[system] Add support for `styled-components` v6 (#39042) @mnajdova
+
+### Docs
+
+- [joy-ui] Adjust the templates page card design (#39369) @danilo-leal
+- Rename the Data Grid "Quick filter" to "Search" (#37724) @alexfauquette
+- Remove obsolete translations (#39221) @mbrookes
+- Update link to add custom color in palette (#39359) @ZeeshanTamboli
+- Denser code demo @oliviertassinari
+- Set up MD3 experiments pages (#39323) @mj12albert
+- [Drawer] Fix right anchored persistent drawer intercepts click when it is closed (#39318) @ZeeshanTamboli
+- [joy-ui] Revise the Color Inversion page (#39306) @danilo-leal
+- [joy-ui] Remove redundant `error` prop from input validation demo (#39280) @sai6855
+- [material-ui] Rename themed components doc, fix typos (#39368) @samuelsycamore
+- [material-ui] Adjust the Material You Chip section (#39325) @danilo-leal
+- [system] Add documentation on how to augment custom theme types for the `sx` prop callback (#39259) @3xp10it3r
+- [joy-ui][Input] Add debounce input demo (#39300) @sai6855
+
+### Core
+
+- [docs-infra] Improve the open diamond sponsor spot callout (#39332) @danilo-leal
+- [docs-infra] Fix Code Sandbox download issue (#39317) @ARJ2160
+- [docs-infra] Remove overflow: hidden for demo gradient bg (#39225) @oliviertassinari
+- [website] Fix footer responsiveness (#39355) @danilo-leal
+- [website] Host Figma redirections in the store for now @oliviertassinari
+
+All contributors of this release in alphabetical order: @3xp10it3r, @alexfauquette, @ARJ2160, @atharva3333, @axelbostrom, @Bestwebdesign, @brijeshb42, @chirag3003, @danilo-leal, @DarhkVoyd, @DiegoAndai, @gugudwt, @mbrookes, @michaldudak, @mj12albert, @mnajdova, @oliviertassinari, @sai6855, @samuelsycamore, @siriwatknp, @ValkonX33, @ZeeshanTamboli
+
 ## 5.14.12
 
 <!-- generated comparing v5.14.11..master -->
@@ -10,6 +75,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som
 
 - 🎨 Introduced color inversion utilities to Joy UI (#38916) @siriwatknp
 - 🚀 Added Chip and related TextField components to Material You @DiegoAndai, @mj12albert
+- 🏗️ Improve the Select's component a11y by adding the combobox role and aria-controls attribute (#38785) @xulingzhihou. If your tests require selecting the trigger element by the "button" role, then you'll have to change it to use the "combobox" role instead
 
 ### `@mui/material@5.14.12`
 

package/GlobalStyles/GlobalStyles.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { CSSObject, InterpolationFunction } from 'styled-components';
+import { CSSObject, StyleFunction } from 'styled-components';
 
-export interface GlobalStylesProps<Theme = {}> {
+export interface GlobalStylesProps<Theme extends object = {}> {
   defaultTheme?: object;
-  styles: string | CSSObject | InterpolationFunction<Theme>;
+  styles: string | CSSObject | StyleFunction<Theme>;
 }
 
-export default function Global<Theme = {}>(props: GlobalStylesProps<Theme>): React.ReactElement;
+export default function Global<Theme extends object = {}>(
+  props: GlobalStylesProps<Theme>,
+): React.ReactElement;

package/index.d.ts

@@ -1,17 +1,68 @@
 import * as React from 'react';
 import * as CSS from 'csstype';
-import {
-  AnyStyledComponent,
-  StyledConfig,
-  StyledComponent,
-  StyledComponentPropsWithRef,
-  StyledComponentInnerComponent,
-  StyledComponentInnerOtherProps,
-  StyledComponentInnerAttrs,
-  ThemedStyledProps,
-  StyledComponentBase,
-  Keyframes,
-} from 'styled-components';
+import * as hoistNonReactStatics from 'hoist-non-react-statics';
+
+type WithOptionalTheme<P extends { theme?: T | undefined }, T> = OmitU<P, 'theme'> & {
+  theme?: T | undefined;
+};
+
+// Helper type operators
+// Pick that distributes over union types
+export type PickU<T, K extends keyof T> = T extends any ? { [P in K]: T[P] } : never;
+export type OmitU<T, K extends keyof T> = T extends any ? PickU<T, Exclude<keyof T, K>> : 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, D> = P extends any
+  ? string extends keyof P
+    ? P
+    : PickU<P, Exclude<keyof P, keyof D>> &
+        Partial<PickU<P, Extract<keyof P, keyof D>>> &
+        Partial<PickU<D, Exclude<keyof D, keyof P>>>
+  : never;
+
+export type IntrinsicElementsKeys = keyof JSX.IntrinsicElements;
+type ReactDefaultizedProps<C, P> = C extends { defaultProps: infer D } ? Defaultize<P, D> : P;
+
+type MakeAttrsOptional<
+  C extends string | React.ComponentType<any>,
+  O extends object,
+  A extends keyof P,
+  P = React.ComponentPropsWithRef<
+    C extends IntrinsicElementsKeys | React.ComponentType<any> ? C : never
+  >,
+> =
+  // Distribute unions early to avoid quadratic expansion
+  P extends any ? OmitU<ReactDefaultizedProps<C, P> & O, A> & Partial<PickU<P & O, A>> : never;
+
+export type StyledComponentProps<
+  // The Component from whose props are derived
+  C extends string | React.ComponentType<any>,
+  // 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<any> = C,
+> =
+  // Distribute O if O is a union type
+  O extends object
+    ? WithOptionalTheme<MakeAttrsOptional<C, O, A> & MakeAttrsOptional<FAsC, O, A>, T>
+    : never;
+
+export interface ThemeProps<T> {
+  theme: T;
+}
+
+export type ThemedStyledProps<P, T> = P & ThemeProps<T>;
+
+export interface Keyframes {
+  getName(): string;
+}
 
 export * from 'styled-components';
 export { default } from 'styled-components';
@@ -83,6 +134,95 @@ export type FlattenSimpleInterpolation = ReadonlyArray<SimpleInterpolation>;
 
 export type InterpolationFunction<P> = (props: P) => Interpolation<P>;
 
+// abuse Pick to strip the call signature from ForwardRefExoticComponent
+type ForwardRefExoticBase<P> = PickU<
+  React.ForwardRefExoticComponent<P>,
+  keyof React.ForwardRefExoticComponent<any>
+>;
+
+type StyledComponentPropsWithAs<
+  C extends string | React.ComponentType<any>,
+  T extends object,
+  O extends object,
+  A extends keyof any,
+  AsC extends string | React.ComponentType<any> = C,
+  FAsC extends string | React.ComponentType<any> = C,
+> = StyledComponentProps<C, T, O, A, FAsC> & {
+  as?: AsC | undefined;
+  forwardedAs?: FAsC | undefined;
+};
+
+export type StyledComponent<
+  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
+  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<C, T, O, A> &
+    hoistNonReactStatics.NonReactStatics<C extends React.ComponentType<any> ? C : never>;
+
+// any doesn't count as assignable to never in the extends clause, and we default A to never
+export type AnyStyledComponent =
+  | StyledComponent<any, any, any, any>
+  | StyledComponent<any, any, any>;
+
+export type StyledComponentInnerComponent<C extends React.ComponentType<any>> =
+  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;
+
+export interface StyledComponentBase<
+  C extends string | React.ComponentType<any>,
+  T extends object,
+  O extends object = {},
+  A extends keyof any = never,
+> extends ForwardRefExoticBase<StyledComponentProps<C, T, O, A>> {
+  // add our own fake call signature to implement the polymorphic 'as' prop
+  (
+    props: StyledComponentProps<C, T, O, A> & {
+      as?: never | undefined;
+      forwardedAs?: never | undefined;
+    },
+  ): React.ReactElement<StyledComponentProps<C, T, O, A>>;
+  <
+    AsC extends string | React.ComponentType<any> = C,
+    FAsC extends string | React.ComponentType<any> = AsC,
+  >(
+    props: StyledComponentPropsWithAs<AsC, T, O, A, AsC, FAsC>,
+  ): React.ReactElement<StyledComponentPropsWithAs<AsC, T, O, A, AsC, FAsC>>;
+
+  withComponent<WithC extends AnyStyledComponent>(
+    component: WithC,
+  ): StyledComponent<
+    StyledComponentInnerComponent<WithC>,
+    T,
+    O & StyledComponentInnerOtherProps<WithC>,
+    A | StyledComponentInnerAttrs<WithC>
+  >;
+  withComponent<WithC extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(
+    component: WithC,
+  ): StyledComponent<WithC, T, O, A>;
+}
+
 // remove the call signature from StyledComponent so Interpolation can still infer InterpolationFunction
 type StyledComponentInterpolation =
   | Pick<StyledComponentBase<any, any, any, any>, keyof StyledComponentBase<any, any>>
@@ -96,6 +236,12 @@ type ThemedStyledComponentFactories<T extends object> = {
   [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunctionBase<TTag, T>;
 };
 
+export type StyledComponentPropsWithRef<
+  C extends keyof 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>,
@@ -128,6 +274,16 @@ export interface ThemedStyledFunction<
   A extends keyof any = never,
 > extends ThemedStyledFunctionBase<C, T, O, A> {}
 
+// Config to be used with withConfig
+export interface StyledConfig<O extends object = {}> {
+  // TODO: Add all types from the original StyledComponentWrapperProperties
+  componentId?: string;
+  displayName?: string;
+  shouldForwardProp?:
+    | ((prop: keyof O, defaultValidatorFn: (prop: keyof O) => boolean) => boolean)
+    | undefined;
+}
+
 // same as ThemedBaseStyledInterface in styled-components, but with added options & common props for MUI components
 export interface ThemedBaseStyledInterface<
   MUIStyledCommonProps extends object,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/styled-engine-sc v5.14.12
+ * @mui/styled-engine-sc v6.0.0-alpha.1
  *
  * @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 v5.14.12
+ * @mui/styled-engine-sc v6.0.0-alpha.1
  *
  * @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 v5.14.12
+ * @mui/styled-engine-sc v6.0.0-alpha.1
  *
  * @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 v5.14.12
+ * @mui/styled-engine-sc v6.0.0-alpha.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/styled-engine-sc",
-  "version": "5.14.12",
+  "version": "6.0.0-alpha.1",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for styled-components.",
@@ -31,13 +31,7 @@
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {
-    "@types/styled-components": "^5.1.14",
-    "styled-components": "^5.3.1"
-  },
-  "peerDependenciesMeta": {
-    "@types/styled-components": {
-      "optional": true
-    }
+    "styled-components": "^6.0.0"
   },
   "sideEffects": false,
   "publishConfig": {