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

package/CHANGELOG.md

@@ -1,5 +1,143 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.14.14
+
+<!-- generated comparing v5.14.13..master -->
+
+_Oct 17, 2023_
+
+A big thanks to the 24 contributors who made this release possible. Here are some highlights ✨:
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.14.14`
+
+- &#8203;<!-- 29 -->[material-ui][AppBar] Support all default palette colors in TypeScript (#39389) @BreakBB
+- &#8203;<!-- 28 -->[material-ui][AvatarGroup] Add `renderSurplus` prop (#39283) @uuxxx
+- &#8203;<!-- 25 -->[material-ui][Box] Fix system properties has incorrect `Theme` interface when applied directly (#39404) @Semigradsky
+- &#8203;<!-- 04 -->[material-ui][Pagination] Update `type` parameter of `getItemAriaLabel` prop (#39390) @Simer13
+- &#8203;<!-- 06 -->[material][tab] Show/hide scroll buttons for dynamically added children (#39415) @brijeshb42
+
+### `@mui/base@5.0.0-beta.20`
+
+- &#8203;<!-- 26 -->[base-ui][Menu] Do not reopen the menu after clicking on a trigger in Safari (#39393) @michaldudak
+
+### `@mui/material-next@6.0.0-alpha.106`
+
+- &#8203;<!-- 23 -->[Divider][material-next] Add Divider component (#39179) @Best-Sardar
+
+### `@mui/joy@5.0.0-beta.11`
+
+- &#8203;<!-- 08 -->[joy-ui][List] Add the `marker` prop (#39313) @siriwatknp
+- &#8203;<!-- 07 -->[joy-ui][Skeleton] Fix semi-transparent scenario when with surface components and color inversion (#39400) @TheNatkat
+- &#8203;<!-- 06 -->[joy-ui][Textarea] Fix focus ring for error state (#39391) @vineetjk
+
+### `@mui/icons-material@5.14.14`
+
+- &#8203;<!-- 09 -->[icons] Fix VoiceChatOutlined showing the wrong icon (#39418) @devuser200
+
+### `@mui/system@5.14.14`
+
+- &#8203;<!-- 03 -->[mui-system][style] bug fix for style value check color in nullable object (#39457) @DarhkVoyd
+
+### `@mui/styled-engine-sc@6.0.0-alpha.2`
+
+- &#8203;<!-- 05 -->[styled-engine-sc] Fix TS issues because of missing types (#39395) @mnajdova
+
+### Docs
+
+- &#8203;<!-- 27 -->[docs][base-ui] Renaming demos to BaseXxx (#39104) @christophermorin
+- &#8203;<!-- 26 -->[docs] Accessibility in Base UI (#39264) @michaldudak
+- &#8203;<!-- 22 -->[docs] Fix 301 redirection @oliviertassinari
+- &#8203;<!-- 21 -->[docs] Improve Base UI table of contents for APIs (#39412) @ZeeshanTamboli
+- &#8203;<!-- 20 -->[docs] Adjust design kits-related content (#39367) @danilo-leal
+- &#8203;<!-- 19 -->[docs] Revise the Contributing Guide (#39190) @samuelsycamore
+- &#8203;<!-- 12 -->[docs][joy-ui] Fix row hover prop name in the Table page (#39431) @adrienbrault
+- &#8203;<!-- 11 -->[docs][joy-ui] Fix color inversion demos (#39403) @danilo-leal
+- &#8203;<!-- 10 -->[docs][material-ui] Remove irrelevant TODO from Snackbar demo (#39396) @ZeeshanTamboli
+- &#8203;<!-- 06 -->[docs][material-ui][Table] Bug in "Sorting & Selecting" demo (#39426) @codewithrabeeh
+- &#8203;<!-- 05 -->[docs][joy-ui][typography] Update docs after lineHeight changes (#39366) @zanivan
+
+### Core
+
+- &#8203;<!-- 24 -->[core] Fix multiple typos across the repo (#39422) @parikshitadhikari
+- &#8203;<!-- 18 -->[docs-infra] Add refinements to the API content design (#39425) @danilo-leal
+- &#8203;<!-- 17 -->[docs-infra] Add a min height to the layout component (#39416) @danilo-leal
+- &#8203;<!-- 16 -->[docs-infra] Prevent horizontal scroll in the TOC (#39417) @danilo-leal
+- &#8203;<!-- 15 -->[docs-infra] Add a collapsible list & table views to the API content display (#38265) @alexfauquette
+- &#8203;<!-- 14 -->[docs-infra] Adjust the `kbd` tag styles (#39397) @danilo-leal
+- &#8203;<!-- 13 -->[docs-infra] Fix strong style regression (#39384) @oliviertassinari
+- &#8203;<!-- 04 -->[website] Add the LinkedIn profile to the contributors section on the About page (#39455) @chhawinder
+- &#8203;<!-- 03 -->[website] Update new role template (#39386) @oliviertassinari
+- &#8203;<!-- 02 -->[website] Add stray design fine-tunning to the Pricing page (#39472) @danilo-leal
+- &#8203;<!-- 01 -->[website] Fix career anchor link to perks & benefits @oliviertassinari
+
+All contributors of this release in alphabetical order: @adrienbrault, @alexfauquette, @Best-Sardar, @BreakBB, @brijeshb42, @chhawinder, @christophermorin, @codewithrabeeh, @danilo-leal, @DarhkVoyd, @devuser200, @michaldudak, @mnajdova, @oliviertassinari, @parikshitadhikari, @samuelsycamore, @Semigradsky, @Simer13, @siriwatknp, @TheNatkat, @uuxxx, @vineetjk, @zanivan, @ZeeshanTamboli
+
+## 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 +148,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,101 @@ 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>
+  | 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 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 +242,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 +280,23 @@ export interface ThemedStyledFunction<
   A extends keyof any = never,
 > extends ThemedStyledFunctionBase<C, T, O, A> {}
 
+export type CreateStyledComponent<
+  ComponentProps extends {},
+  SpecificComponentProps extends {} = {},
+  JSXProps extends {} = {},
+  T extends object = {},
+> = ThemedStyledFunction<React.ComponentType<ComponentProps>, T, SpecificComponentProps & JSXProps>;
+
+// 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,
@@ -156,3 +325,22 @@ export type CreateMUIStyled<
   MuiStyledOptions extends object = {},
   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 interface MUIStyledComponent<
+  ComponentProps extends {},
+  SpecificComponentProps extends {} = {},
+  JSXProps extends {} = {},
+> extends React.FC<ComponentProps & SpecificComponentProps & JSXProps> {
+  withComponent<C extends React.ComponentClass<React.ComponentProps<C>>>(
+    component: C,
+  ): MUIStyledComponent<ComponentProps & PropsOf<C>, {}, { ref?: React.Ref<InstanceType<C>> }>;
+  withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(
+    component: C,
+  ): MUIStyledComponent<ComponentProps & PropsOf<C>>;
+  withComponent<Tag extends keyof JSX.IntrinsicElements>(
+    tag: Tag,
+  ): MUIStyledComponent<ComponentProps, JSX.IntrinsicElements[Tag]>;
+}

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/styled-engine-sc v5.14.12
+ * @mui/styled-engine-sc v6.0.0-alpha.2
  *
  * @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.2
  *
  * @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.2
  *
  * @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.2
  *
  * @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.2",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for styled-components.",
@@ -28,16 +28,11 @@
   "dependencies": {
     "@babel/runtime": "^7.23.1",
     "csstype": "^3.1.2",
+    "hoist-non-react-statics": "^3.3.2",
     "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": {