@mui/material 7.0.0-alpha.2 → 7.0.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.0.0-beta.1
+
+<!-- generated comparing v7.0.0-beta.0..master -->
+
+_Feb 27, 2025_
+
+This release fixes incorrect build output from the previous release (`beta.0`).
+
+### Core
+
+- [code-infra] Fix build:types script omitting folders with a dot in their name (#45422) @Janpot
+- [release] Fix versions (#45420) @mj12albert
+
+All contributors of this release in alphabetical order: @Janpot, @mj12albert
+
+## 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/Dialog/Dialog.d.ts

@@ -111,11 +111,6 @@ export interface DialogProps extends Omit<StandardProps<ModalProps, 'children'>,
    * @default 'sm'
    */
   maxWidth?: Breakpoint | false;
-  /**
-   * Callback fired when the backdrop is clicked.
-   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
-   */
-  onBackdropClick?: ModalProps['onBackdropClick'];
   /**
    * Callback fired when the component requests to be closed.
    *

package/Dialog/Dialog.js

@@ -219,7 +219,6 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     fullScreen = false,
     fullWidth = false,
     maxWidth = 'sm',
-    onBackdropClick,
     onClick,
     onClose,
     open,
@@ -258,9 +257,6 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
       return;
     }
     backdropClick.current = null;
-    if (onBackdropClick) {
-      onBackdropClick(event);
-    }
     if (onClose) {
       onClose(event, 'backdropClick');
     }
@@ -437,11 +433,6 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * @default 'sm'
    */
   maxWidth: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), _propTypes.default.string]),
-  /**
-   * Callback fired when the backdrop is clicked.
-   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
-   */
-  onBackdropClick: _propTypes.default.func,
   /**
    * @ignore
    */

package/Grid/Grid.d.ts

@@ -1,77 +1,17 @@
-import * as React from 'react';
-import { ResponsiveStyleValue, SxProps, SystemProps, Breakpoint, BreakpointOverrides } from '@mui/system';
-import { IfEquals } from '@mui/types';
-import { Theme } from "../styles/index.js";
-import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
-import { GridClasses } from "./gridClasses.js";
+import { SxProps, SystemProps } from '@mui/system';
+import { OverridableComponent, OverrideProps } from '@mui/types';
+import { Theme, Breakpoint } from "../styles/index.js";
+type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
 export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
 export type GridSpacing = number | string;
 export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-export type GridSize = 'auto' | number;
-export interface RegularBreakpoints {
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for the `lg` breakpoint and wider screens if not overridden.
-   * @default false
-   */
-  lg?: boolean | GridSize;
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for the `md` breakpoint and wider screens if not overridden.
-   * @default false
-   */
-  md?: boolean | GridSize;
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for the `sm` breakpoint and wider screens if not overridden.
-   * @default false
-   */
-  sm?: boolean | GridSize;
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for the `xl` breakpoint and wider screens if not overridden.
-   * @default false
-   */
-  xl?: boolean | GridSize;
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for all the screen sizes with the lowest priority.
-   * @default false
-   */
-  xs?: boolean | GridSize;
-}
-type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridSize>>;
-interface BreakpointOverridesEmpty {}
-type Breakpoints = IfEquals<BreakpointOverrides, BreakpointOverridesEmpty, RegularBreakpoints, CustomBreakpoints>;
-export interface GridOwnProps extends SystemProps<Theme>, Breakpoints {
+export type GridSize = 'auto' | 'grow' | number | false;
+export type GridOffset = 'auto' | number;
+export interface GridBaseProps {
   /**
    * The content of the component.
    */
   children?: React.ReactNode;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<GridClasses>;
   /**
    * The number of columns.
    * @default 12
@@ -95,48 +35,68 @@ export interface GridOwnProps extends SystemProps<Theme>, Breakpoints {
    */
   direction?: ResponsiveStyleValue<GridDirection>;
   /**
-   * If `true`, the component will have the flex *item* behavior.
-   * You should be wrapping *items* with a *container*.
-   * @default false
-   */
-  item?: boolean;
+   * Defines the offset value for the type `item` components.
+   */
+  offset?: ResponsiveStyleValue<GridOffset>;
+  /**
+   * @internal
+   * The level of the grid starts from `0` and increases when the grid nests
+   * inside another grid. Nesting is defined as a container Grid being a direct
+   * child of a container Grid.
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid container> // level 1
+   *     <Grid container> // level 2
+   * ```
+   *
+   * Only consecutive grid is considered nesting. A grid container will start at
+   * `0` if there are non-Grid container element above it.
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <div>
+   *     <Grid container> // level 0
+   * ```
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid>
+   *     <Grid container> // level 0
+   * ```
+   */
+  unstable_level?: number;
   /**
    * Defines the vertical space between the type `item` components.
    * It overrides the value of the `spacing` prop.
    */
   rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+  /**
+   * Defines the size of the the type `item` components.
+   */
+  size?: ResponsiveStyleValue<GridSize>;
   /**
    * Defines the space between the type `item` components.
    * It can only be used on a type `container` component.
    * @default 0
    */
-  spacing?: ResponsiveStyleValue<GridSpacing>;
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx?: SxProps<Theme>;
+  spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
   /**
    * Defines the `flex-wrap` style property.
    * It's applied for all screen sizes.
    * @default 'wrap'
    */
   wrap?: GridWrap;
-  /**
-   * If `true`, it sets `min-width: 0` on the item.
-   * Refer to the limitations section of the documentation to better understand the use case.
-   * @default false
-   */
-  zeroMinWidth?: boolean;
 }
-
-/**
- * @deprecated Use the [`Grid2`](https://mui.com/material-ui/react-grid2/) component instead.
- */
-export interface GridTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
-  props: AdditionalProps & GridOwnProps;
-  defaultComponent: RootComponent;
+export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P & GridBaseProps & {
+    sx?: SxProps<Theme>;
+  } & SystemProps<Theme>;
+  defaultComponent: D;
 }
-
+export type GridProps<D extends React.ElementType = GridTypeMap['defaultComponent'], P = {
+  component?: React.ElementType;
+}> = OverrideProps<GridTypeMap<P, D>, D>;
 /**
  *
  * Demos:
@@ -146,15 +106,6 @@ export interface GridTypeMap<AdditionalProps = {}, RootComponent extends React.E
  * API:
  *
  * - [Grid API](https://next.mui.com/material-ui/api/grid/)
- *
- * @deprecated Use the [`Grid2`](https://mui.com/material-ui/react-grid2/) component instead.
  */
 declare const Grid: OverridableComponent<GridTypeMap>;
-
-/**
- * @deprecated Use the [`Grid2`](https://mui.com/material-ui/react-grid2/) component instead.
- */
-export type GridProps<RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
-};
 export default Grid;