@mui/styled-engine 7.0.0-alpha.2 → 7.0.0-beta.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.0.0-beta.0
+
+<!-- generated comparing v7.0.0-alpha.2..master -->
+
+_Feb 26, 2025_
+
+A big thanks to the 8 contributors who made this release possible.
+
+### `@mui/material@7.0.0-beta.0`
+
+- [Modal][Dialog] Remove deprecated `onBackdropClick` (#45395) @DiegoAndai
+- [Grid] Improve Grid2 upgrade experience (#45304) @DiegoAndai
+- [Grid] Rename to GridLegacy (#45363) @DiegoAndai
+- [Grid2] Rename to Grid (#45381) @DiegoAndai
+- Remove SvgIcon data-testid in production (#45333) @Janpot
+- Allow nested theme creation with `vars` (#45335) @siriwatknp
+- [Rating] Deprecate \*Props and complete `slots`, `slotProps` (#45295) @harry-whorlow
+- [Slider] Fix css class selector in migration guide (#45402) @sai6855
+- [Slider] Fix spacings in .md files (#45388) @sai6855
+- [styles] Remove deprecated exports (#45397) @DiegoAndai
+- [Menu] Deprecate \*Props and complete `slots`, `slotProps` (#44913) @siriwatknp
+- [StepButton] Remove StepIconButton type (#45396) @DiegoAndai
+
+### Docs
+
+- [Autocomplete] Remove unnecessary renderTags prop from Sizes demo (#45401) @ZeeshanTamboli
+- Add `overriding-component-structure` doc to Material UI (#45186) @siriwatknp
+- Fix typo in slider docs (#45390) @sai6855
+- Fix Context Menu selection lost on Safari (#44903) @NooBat
+
+### Core
+
+- [code-infra] Fix types for @mui/styled-engine (#45413) @Janpot
+- [docs-infra] Fix theme toggle call (#45400) @siriwatknp
+- [docs-infra] Add `color-scheme` to document in iframe demos (#45406) @KenanYusuf
+- [docs-infra] Revert to use deprecated `CssVarsProvider` for MUI X (#45371) @siriwatknp
+- [docs-infra] Fix dark mode flicker for API pages (#45354) @siriwatknp
+- [examples] Remove unnecessary comma in Material UI Vite JS example (#45370) @ZeeshanTamboli
+- [test] Remove unused renderTags prop and fix key warning in Autocomplete regression test (#45410) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @DiegoAndai, @harry-whorlow, @Janpot, @KenanYusuf, @NooBat, @sai6855, @siriwatknp, @ZeeshanTamboli
+
 ## 7.0.0-alpha.2
 
 <!-- generated comparing v7.0.0-alpha.1..master -->

package/esm/GlobalStyles/GlobalStyles.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Interpolation } from '@emotion/react';
+export interface GlobalStylesProps<Theme = {}> {
+  defaultTheme?: object;
+  styles: Interpolation<Theme>;
+}
+export default function GlobalStyles<Theme = {}>(props: GlobalStylesProps<Theme>): React.JSX.Element;

package/esm/GlobalStyles/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./GlobalStyles.js";
+export * from "./GlobalStyles.js";

package/esm/StyledEngineProvider/StyledEngineProvider.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface StyledEngineProviderProps {
+  children?: React.ReactNode;
+  injectFirst?: boolean;
+}
+export default function StyledEngineProvider(props: StyledEngineProviderProps): React.JSX.Element;

package/esm/StyledEngineProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./StyledEngineProvider.js";
+export * from "./StyledEngineProvider.js";

package/esm/index.d.ts

@@ -0,0 +1,119 @@
+import * as CSS from 'csstype';
+import { StyledComponent, StyledOptions } from '@emotion/styled';
+import { PropsOf } from '@emotion/react';
+export * from '@emotion/styled';
+export { default } from '@emotion/styled';
+export { ThemeContext, keyframes, css } from '@emotion/react';
+export { default as StyledEngineProvider } from "./StyledEngineProvider/index.js";
+export { default as GlobalStyles } from "./GlobalStyles/index.js";
+export * from "./GlobalStyles/index.js";
+export type MUIStyledComponent<ComponentProps extends {}, SpecificComponentProps extends {} = {}, JSXProps extends {} = {}> = StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+
+/**
+ * For internal usage in `@mui/system` package
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_mutateStyles(tag: React.ElementType, processor: (styles: any) => any): void;
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_serializeStyles<P>(styles: Interpolation<P>): object;
+export interface SerializedStyles {
+  name: string;
+  styles: string;
+  map?: string;
+  next?: SerializedStyles;
+}
+export type CSSProperties = CSS.PropertiesFallback<number | string>;
+export type CSSPropertiesWithMultiValues = { [K in keyof CSSProperties]: CSSProperties[K] | ReadonlyArray<Extract<CSSProperties[K], string>> };
+
+// TODO v6 - check if we can drop the unknown, as it breaks the autocomplete
+// For more info on why it was added, see https://github.com/mui/material-ui/pull/26228
+export type CSSPseudos = { [K in CSS.Pseudos]?: unknown | CSSObject };
+
+// TODO v6 - check if we can drop the unknown, as it breaks the autocomplete
+// For more info on why it was added, see https://github.com/mui/material-ui/pull/26228
+export interface CSSOthersObject {
+  [propertiesName: string]: unknown | CSSInterpolation;
+}
+export type CSSPseudosForCSSObject = { [K in CSS.Pseudos]?: CSSObject };
+export interface ArrayCSSInterpolation extends ReadonlyArray<CSSInterpolation> {}
+export interface CSSOthersObjectForCSSObject {
+  [propertiesName: string]: CSSInterpolation;
+}
+
+// Omit variants as a key, because we have a special handling for it
+export interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos, Omit<CSSOthersObject, 'variants'> {}
+interface CSSObjectWithVariants<Props> extends Omit<CSSObject, 'variants'> {
+  variants: Array<{
+    props: Props | ((props: Props) => boolean);
+    style: CSSObject | ((args: Props extends {
+      theme: any;
+    } ? {
+      theme: Props['theme'];
+    } : any) => CSSObject);
+  }>;
+}
+export interface ComponentSelector {
+  __emotion_styles: any;
+}
+export type Keyframes = {
+  name: string;
+  styles: string;
+  anim: number;
+  toString: () => string;
+} & string;
+export type Equal<A, B, T, F> = A extends B ? (B extends A ? T : F) : F;
+export type InterpolationPrimitive = null | undefined | boolean | number | string | ComponentSelector | Keyframes | SerializedStyles | CSSObject;
+export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation;
+export interface FunctionInterpolation<Props> {
+  (props: Props): Interpolation<Props>;
+}
+export interface ArrayInterpolation<Props> extends ReadonlyArray<Interpolation<Props>> {}
+export type Interpolation<Props> = InterpolationPrimitive | CSSObjectWithVariants<Props> | ArrayInterpolation<Props> | FunctionInterpolation<Props>;
+export function shouldForwardProp(propName: PropertyKey): boolean;
+
+/** Same as StyledOptions but shouldForwardProp must be a type guard */
+export interface FilteringStyledOptions<Props, ForwardedProps extends keyof Props = keyof Props> {
+  label?: string;
+  shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps;
+  target?: string;
+}
+
+/**
+ * @typeparam ComponentProps  Props which will be included when withComponent is called
+ * @typeparam SpecificComponentProps  Props which will *not* be included when withComponent is called
+ */
+export interface CreateStyledComponent<ComponentProps extends {}, SpecificComponentProps extends {} = {}, JSXProps extends {} = {}, T extends object = {}> {
+  (...styles: Array<Interpolation<ComponentProps & SpecificComponentProps & {
+    theme: T;
+  }>>): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+
+  /**
+   * @typeparam AdditionalProps  Additional props to add to your styled component
+   */
+  <AdditionalProps extends {}>(...styles: Array<Interpolation<ComponentProps & SpecificComponentProps & AdditionalProps & {
+    theme: T;
+  }>>): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps, JSXProps>;
+  (template: TemplateStringsArray, ...styles: Array<Interpolation<ComponentProps & SpecificComponentProps & {
+    theme: T;
+  }>>): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+
+  /**
+   * @typeparam AdditionalProps  Additional props to add to your styled component
+   */
+  <AdditionalProps extends {}>(template: TemplateStringsArray, ...styles: Array<Interpolation<ComponentProps & SpecificComponentProps & AdditionalProps & {
+    theme: T;
+  }>>): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps, JSXProps>;
+}
+export interface CreateMUIStyled<MUIStyledCommonProps extends {}, MuiStyledOptions, Theme extends object> {
+  <C extends React.ComponentClass<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, {}, {
+    ref?: React.Ref<InstanceType<C>>;
+  }, Theme>;
+  <C extends React.ComponentClass<React.ComponentProps<C>>>(component: C, options?: StyledOptions<PropsOf<C> & MUIStyledCommonProps> & MuiStyledOptions): CreateStyledComponent<PropsOf<C> & MUIStyledCommonProps, {}, {
+    ref?: React.Ref<InstanceType<C>>;
+  }, Theme>;
+  <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?: StyledOptions<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?: StyledOptions<MUIStyledCommonProps> & MuiStyledOptions): CreateStyledComponent<MUIStyledCommonProps, React.JSX.IntrinsicElements[Tag], {}, Theme>;
+}

package/esm/index.js

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

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/styled-engine v7.0.0-alpha.2
+ * @mui/styled-engine v7.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 v7.0.0-alpha.2
+ * @mui/styled-engine v7.0.0-beta.0
  *
  * @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",
-  "version": "7.0.0-alpha.2",
+  "version": "7.0.0-beta.0",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for emotion.",