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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (146) hide show
  1. package/CHANGELOG.md +57 -0
  2. package/Dialog/Dialog.d.ts +0 -5
  3. package/Dialog/Dialog.js +0 -9
  4. package/Grid/Grid.d.ts +51 -100
  5. package/Grid/Grid.js +68 -515
  6. package/Grid/gridClasses.d.ts +0 -38
  7. package/Grid/gridClasses.js +1 -1
  8. package/Grid/index.js +12 -2
  9. package/GridLegacy/GridLegacy.d.ts +160 -0
  10. package/GridLegacy/GridLegacy.js +601 -0
  11. package/{Grid/GridContext.js → GridLegacy/GridLegacyContext.js} +3 -3
  12. package/GridLegacy/gridLegacyClasses.d.ts +48 -0
  13. package/{Grid2/grid2Classes.js → GridLegacy/gridLegacyClasses.js} +5 -5
  14. package/GridLegacy/index.d.ts +4 -0
  15. package/GridLegacy/index.js +35 -0
  16. package/Menu/Menu.d.ts +68 -1
  17. package/Menu/Menu.js +52 -17
  18. package/Modal/Modal.d.ts +0 -5
  19. package/Modal/Modal.js +0 -9
  20. package/PigmentGrid/PigmentGrid.d.ts +1 -1
  21. package/PigmentGrid/PigmentGrid.js +2 -2
  22. package/PigmentGrid/index.d.ts +1 -1
  23. package/PigmentGrid/index.js +4 -4
  24. package/Rating/Rating.d.ts +52 -1
  25. package/Rating/Rating.js +132 -46
  26. package/Select/SelectInput.js +8 -8
  27. package/StepButton/StepButton.d.ts +0 -5
  28. package/esm/Dialog/Dialog.d.ts +0 -5
  29. package/esm/Dialog/Dialog.js +0 -9
  30. package/esm/Grid/Grid.d.ts +51 -100
  31. package/esm/Grid/Grid.js +68 -508
  32. package/esm/Grid/gridClasses.d.ts +0 -38
  33. package/esm/Grid/gridClasses.js +1 -1
  34. package/esm/Grid/index.js +1 -0
  35. package/esm/GridLegacy/GridLegacy.d.ts +160 -0
  36. package/esm/GridLegacy/GridLegacy.js +588 -0
  37. package/esm/GridLegacy/GridLegacyContext.js +12 -0
  38. package/esm/GridLegacy/gridLegacyClasses.d.ts +48 -0
  39. package/esm/{Grid2/grid2Classes.js → GridLegacy/gridLegacyClasses.js} +4 -4
  40. package/esm/GridLegacy/index.d.ts +4 -0
  41. package/esm/GridLegacy/index.js +3 -0
  42. package/esm/Menu/Menu.d.ts +68 -1
  43. package/esm/Menu/Menu.js +52 -17
  44. package/esm/Modal/Modal.d.ts +0 -5
  45. package/esm/Modal/Modal.js +0 -9
  46. package/esm/PigmentGrid/PigmentGrid.d.ts +1 -1
  47. package/esm/PigmentGrid/PigmentGrid.js +2 -2
  48. package/esm/PigmentGrid/index.d.ts +1 -1
  49. package/esm/PigmentGrid/index.js +1 -1
  50. package/esm/Rating/Rating.d.ts +52 -1
  51. package/esm/Rating/Rating.js +131 -45
  52. package/esm/Select/SelectInput.js +8 -8
  53. package/esm/StepButton/StepButton.d.ts +0 -5
  54. package/esm/index.d.ts +3 -8
  55. package/esm/index.js +3 -3
  56. package/esm/styles/components.d.ts +5 -5
  57. package/esm/styles/createTheme.d.ts +0 -1
  58. package/esm/styles/createTheme.js +0 -1
  59. package/esm/styles/createThemeNoVars.d.ts +0 -6
  60. package/esm/styles/createThemeNoVars.js +7 -12
  61. package/esm/styles/index.d.ts +1 -5
  62. package/esm/styles/index.js +1 -2
  63. package/esm/styles/overrides.d.ts +2 -2
  64. package/esm/styles/props.d.ts +2 -2
  65. package/esm/utils/createSvgIcon.d.ts +1 -1
  66. package/esm/utils/createSvgIcon.js +1 -1
  67. package/esm/version/index.js +2 -2
  68. package/index.d.ts +3 -8
  69. package/index.js +9 -9
  70. package/modern/Dialog/Dialog.d.ts +0 -5
  71. package/modern/Dialog/Dialog.js +0 -9
  72. package/modern/Grid/Grid.d.ts +51 -100
  73. package/modern/Grid/Grid.js +68 -508
  74. package/modern/Grid/gridClasses.d.ts +0 -38
  75. package/modern/Grid/gridClasses.js +1 -1
  76. package/modern/Grid/index.js +1 -0
  77. package/modern/GridLegacy/GridLegacy.d.ts +160 -0
  78. package/modern/GridLegacy/GridLegacy.js +588 -0
  79. package/modern/GridLegacy/GridLegacyContext.js +12 -0
  80. package/modern/GridLegacy/gridLegacyClasses.d.ts +48 -0
  81. package/modern/{Grid2/grid2Classes.js → GridLegacy/gridLegacyClasses.js} +4 -4
  82. package/modern/GridLegacy/index.d.ts +4 -0
  83. package/modern/GridLegacy/index.js +3 -0
  84. package/modern/Menu/Menu.d.ts +68 -1
  85. package/modern/Menu/Menu.js +52 -17
  86. package/modern/Modal/Modal.d.ts +0 -5
  87. package/modern/Modal/Modal.js +0 -9
  88. package/modern/PigmentGrid/PigmentGrid.d.ts +1 -1
  89. package/modern/PigmentGrid/PigmentGrid.js +2 -2
  90. package/modern/PigmentGrid/index.d.ts +1 -1
  91. package/modern/PigmentGrid/index.js +1 -1
  92. package/modern/Rating/Rating.d.ts +52 -1
  93. package/modern/Rating/Rating.js +131 -45
  94. package/modern/Select/SelectInput.js +8 -8
  95. package/modern/StepButton/StepButton.d.ts +0 -5
  96. package/modern/index.d.ts +3 -8
  97. package/modern/index.js +3 -3
  98. package/modern/styles/components.d.ts +5 -5
  99. package/modern/styles/createTheme.d.ts +0 -1
  100. package/modern/styles/createTheme.js +0 -1
  101. package/modern/styles/createThemeNoVars.d.ts +0 -6
  102. package/modern/styles/createThemeNoVars.js +7 -12
  103. package/modern/styles/index.d.ts +1 -5
  104. package/modern/styles/index.js +1 -2
  105. package/modern/styles/overrides.d.ts +2 -2
  106. package/modern/styles/props.d.ts +2 -2
  107. package/modern/utils/createSvgIcon.d.ts +1 -1
  108. package/modern/utils/createSvgIcon.js +1 -1
  109. package/modern/version/index.js +2 -2
  110. package/package.json +4 -4
  111. package/styles/components.d.ts +5 -5
  112. package/styles/createTheme.d.ts +0 -1
  113. package/styles/createTheme.js +1 -8
  114. package/styles/createThemeNoVars.d.ts +0 -6
  115. package/styles/createThemeNoVars.js +7 -13
  116. package/styles/index.d.ts +1 -5
  117. package/styles/index.js +1 -15
  118. package/styles/overrides.d.ts +2 -2
  119. package/styles/props.d.ts +2 -2
  120. package/tsconfig.build.tsbuildinfo +1 -1
  121. package/utils/createSvgIcon.d.ts +1 -1
  122. package/utils/createSvgIcon.js +1 -1
  123. package/version/index.js +2 -2
  124. package/Grid2/Grid2.d.ts +0 -111
  125. package/Grid2/Grid2.js +0 -144
  126. package/Grid2/grid2Classes.d.ts +0 -10
  127. package/Grid2/index.d.ts +0 -4
  128. package/Grid2/index.js +0 -45
  129. package/StyledEngineProvider/index.d.ts +0 -4
  130. package/StyledEngineProvider/index.js +0 -12
  131. package/esm/Grid/GridContext.js +0 -12
  132. package/esm/Grid2/Grid2.d.ts +0 -111
  133. package/esm/Grid2/Grid2.js +0 -138
  134. package/esm/Grid2/grid2Classes.d.ts +0 -10
  135. package/esm/Grid2/index.d.ts +0 -4
  136. package/esm/Grid2/index.js +0 -4
  137. package/esm/StyledEngineProvider/index.d.ts +0 -4
  138. package/esm/StyledEngineProvider/index.js +0 -1
  139. package/modern/Grid/GridContext.js +0 -12
  140. package/modern/Grid2/Grid2.d.ts +0 -111
  141. package/modern/Grid2/Grid2.js +0 -138
  142. package/modern/Grid2/grid2Classes.d.ts +0 -10
  143. package/modern/Grid2/index.d.ts +0 -4
  144. package/modern/Grid2/index.js +0 -4
  145. package/modern/StyledEngineProvider/index.d.ts +0 -4
  146. package/modern/StyledEngineProvider/index.js +0 -1
@@ -500,16 +500,16 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
500
500
  horizontal: 'center'
501
501
  },
502
502
  ...MenuProps,
503
- MenuListProps: {
504
- 'aria-labelledby': labelId,
505
- role: 'listbox',
506
- 'aria-multiselectable': multiple ? 'true' : undefined,
507
- disableListWrap: true,
508
- id: listboxId,
509
- ...MenuProps.MenuListProps
510
- },
511
503
  slotProps: {
512
504
  ...MenuProps.slotProps,
505
+ list: {
506
+ 'aria-labelledby': labelId,
507
+ role: 'listbox',
508
+ 'aria-multiselectable': multiple ? 'true' : undefined,
509
+ disableListWrap: true,
510
+ id: listboxId,
511
+ ...MenuProps.MenuListProps
512
+ },
513
513
  paper: {
514
514
  ...paperProps,
515
515
  style: {
@@ -4,11 +4,6 @@ import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from "..
4
4
  import { OverrideProps } from "../OverridableComponent/index.js";
5
5
  import { Theme } from "../styles/index.js";
6
6
  import { StepButtonClasses } from "./stepButtonClasses.js";
7
-
8
- /**
9
- * @deprecated use `StepButtonProps['icon']` instead.
10
- */
11
- export type StepButtonIcon = React.ReactNode;
12
7
  export interface StepButtonOwnProps {
13
8
  /**
14
9
  * Can be a `StepLabel` or a node to place inside `StepLabel` as children.
package/modern/index.d.ts CHANGED
@@ -147,10 +147,10 @@ export { default as FormHelperText } from "./FormHelperText/index.js";
147
147
  export * from "./FormHelperText/index.js";
148
148
  export { default as FormLabel } from "./FormLabel/index.js";
149
149
  export * from "./FormLabel/index.js";
150
+ export { default as GridLegacy } from "./GridLegacy/index.js";
151
+ export { GridLegacyProps, GridLegacyTypeMap } from "./GridLegacy/index.js";
150
152
  export { default as Grid } from "./Grid/index.js";
151
- export { GridProps, GridTypeMap } from "./Grid/index.js";
152
- export { default as Grid2 } from "./Grid2/index.js";
153
- export * from "./Grid2/index.js";
153
+ export * from "./Grid/index.js";
154
154
  export { default as Grow } from "./Grow/index.js";
155
155
  export * from "./Grow/index.js";
156
156
  export { default as Icon } from "./Icon/index.js";
@@ -316,11 +316,6 @@ export * from "./useAutocomplete/index.js";
316
316
  export { default as GlobalStyles } from "./GlobalStyles/index.js";
317
317
  export * from "./GlobalStyles/index.js";
318
318
  export * from "./version/index.js";
319
-
320
- /**
321
- * @deprecated will be removed in v5.beta, please use StyledEngineProvider from @mui/material/styles instead
322
- */
323
- export { StyledEngineProvider } from "./styles/index.js";
324
319
  export { unstable_composeClasses } from '@mui/utils';
325
320
  export { default as generateUtilityClass } from "./generateUtilityClass/index.js";
326
321
  export * from "./generateUtilityClass/index.js";
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/material v7.0.0-alpha.2
2
+ * @mui/material v7.0.0-beta.1
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -108,9 +108,9 @@ export { default as FormHelperText } from "./FormHelperText/index.js";
108
108
  export * from "./FormHelperText/index.js";
109
109
  export { default as FormLabel } from "./FormLabel/index.js";
110
110
  export * from "./FormLabel/index.js";
111
+ export { default as GridLegacy } from "./GridLegacy/index.js";
111
112
  export { default as Grid } from "./Grid/index.js";
112
- export { default as Grid2 } from "./Grid2/index.js";
113
- export * from "./Grid2/index.js";
113
+ export * from "./Grid/index.js";
114
114
  export { default as Grow } from "./Grow/index.js";
115
115
  export * from "./Grow/index.js";
116
116
  export { default as Icon } from "./Icon/index.js";
@@ -222,16 +222,16 @@ export interface Components<Theme = unknown> {
222
222
  styleOverrides?: ComponentsOverrides<Theme>['MuiFormLabel'];
223
223
  variants?: ComponentsVariants<Theme>['MuiFormLabel'];
224
224
  };
225
+ MuiGridLegacy?: {
226
+ defaultProps?: ComponentsProps['MuiGridLegacy'];
227
+ styleOverrides?: ComponentsOverrides<Theme>['MuiGridLegacy'];
228
+ variants?: ComponentsVariants<Theme>['MuiGridLegacy'];
229
+ };
225
230
  MuiGrid?: {
226
231
  defaultProps?: ComponentsProps['MuiGrid'];
227
232
  styleOverrides?: ComponentsOverrides<Theme>['MuiGrid'];
228
233
  variants?: ComponentsVariants<Theme>['MuiGrid'];
229
234
  };
230
- MuiGrid2?: {
231
- defaultProps?: ComponentsProps['MuiGrid2'];
232
- styleOverrides?: ComponentsOverrides<Theme>['MuiGrid2'];
233
- variants?: ComponentsVariants<Theme>['MuiGrid2'];
234
- };
235
235
  MuiImageList?: {
236
236
  defaultProps?: ComponentsProps['MuiImageList'];
237
237
  styleOverrides?: ComponentsOverrides<Theme>['MuiImageList'];
@@ -1,6 +1,5 @@
1
1
  import { CssVarsThemeOptions } from "./createThemeWithVars.js";
2
2
  import { Theme, ThemeOptions } from "./createThemeNoVars.js";
3
- export { createMuiTheme } from "./createThemeNoVars.js";
4
3
  export type { ThemeOptions, Theme, CssThemeVariables } from "./createThemeNoVars.js";
5
4
  /**
6
5
  * Generate a theme base on the options received.
@@ -1,7 +1,6 @@
1
1
  import createPalette from "./createPalette.js";
2
2
  import createThemeWithVars from "./createThemeWithVars.js";
3
3
  import createThemeNoVars from "./createThemeNoVars.js";
4
- export { createMuiTheme } from "./createThemeNoVars.js";
5
4
  // eslint-disable-next-line consistent-return
6
5
  function attachColorScheme(theme, scheme, colorScheme) {
7
6
  if (!theme.colorSchemes) {
@@ -61,12 +61,6 @@ export interface Theme extends BaseTheme, CssVarsProperties {
61
61
  unstable_sxConfig: SxConfig;
62
62
  }
63
63
 
64
- /**
65
- * @deprecated
66
- * Use `import { createTheme } from '@mui/material/styles'` instead.
67
- */
68
- export function createMuiTheme(options?: ThemeOptions, ...args: object[]): Theme;
69
-
70
64
  /**
71
65
  * Generate a theme base on the options received.
72
66
  * @param options Takes an incomplete theme object and adds the missing parts.
@@ -21,8 +21,13 @@ function createThemeNoVars(options = {}, ...args) {
21
21
  shape: shapeInput,
22
22
  ...other
23
23
  } = options;
24
- if (options.vars) {
25
- throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' + 'Please use another name.' : _formatMuiErrorMessage(20));
24
+ if (options.vars &&
25
+ // The error should throw only for the root theme creation because user is not allowed to use a custom node `vars`.
26
+ // `generateThemeVars` is the closest identifier for checking that the `options` is a result of `createTheme` with CSS variables so that user can create new theme for nested ThemeProvider.
27
+ options.generateThemeVars === undefined) {
28
+ throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' +
29
+ // #host-reference
30
+ 'Please use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : _formatMuiErrorMessage(20));
26
31
  }
27
32
  const palette = createPalette(paletteInput);
28
33
  const systemTheme = systemCreateTheme(options);
@@ -83,14 +88,4 @@ function createThemeNoVars(options = {}, ...args) {
83
88
 
84
89
  return muiTheme;
85
90
  }
86
- let warnedOnce = false;
87
- export function createMuiTheme(...args) {
88
- if (process.env.NODE_ENV !== 'production') {
89
- if (!warnedOnce) {
90
- warnedOnce = true;
91
- console.error(['MUI: the createMuiTheme function was renamed to createTheme.', '', "You should use `import { createTheme } from '@mui/material/styles'`"].join('\n'));
92
- }
93
- }
94
- return createThemeNoVars(...args);
95
- }
96
91
  export default createThemeNoVars;
@@ -1,5 +1,5 @@
1
1
  export { default as THEME_ID } from "./identifier.js";
2
- export { default as createTheme, default as unstable_createMuiStrictModeTheme, createMuiTheme, ThemeOptions, Theme, CssThemeVariables } from "./createTheme.js";
2
+ export { default as createTheme, default as unstable_createMuiStrictModeTheme, ThemeOptions, Theme, CssThemeVariables } from "./createTheme.js";
3
3
  export { default as adaptV4Theme, DeprecatedThemeOptions } from "./adaptV4Theme.js";
4
4
  export { Shadows } from "./shadows.js";
5
5
  export { ZIndex } from "./zIndex.js";
@@ -21,10 +21,6 @@ export { default as useTheme } from "./useTheme.js";
21
21
  export { default as useThemeProps } from "./useThemeProps.js";
22
22
  export * from "./useThemeProps.js";
23
23
  export { default as styled } from "./styled.js";
24
- /**
25
- * @deprecated will be removed in v5.beta, please use styled from @mui/material/styles instead
26
- */
27
- export { default as experimentalStyled } from "./styled.js";
28
24
  export { default as ThemeProvider } from "./ThemeProvider.js";
29
25
  export { ComponentsProps, ComponentsPropsList } from "./props.js";
30
26
  export { ComponentsVariants } from "./variants.js";
@@ -8,7 +8,7 @@ export { unstable_createBreakpoints } from '@mui/system/createBreakpoints';
8
8
  export function experimental_sx() {
9
9
  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.' + 'For more details, see https://github.com/mui/material-ui/pull/35150.' : _formatMuiErrorMessage(19));
10
10
  }
11
- export { default as createTheme, createMuiTheme } from "./createTheme.js";
11
+ export { default as createTheme } from "./createTheme.js";
12
12
  export { default as unstable_createMuiStrictModeTheme } from "./createMuiStrictModeTheme.js";
13
13
  export { default as createStyles } from "./createStyles.js";
14
14
  export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from "./cssUtils.js";
@@ -18,7 +18,6 @@ export { default as createColorScheme } from "./createColorScheme.js";
18
18
  export { default as useTheme } from "./useTheme.js";
19
19
  export { default as useThemeProps } from "./useThemeProps.js";
20
20
  export { default as styled } from "./styled.js";
21
- export { default as experimentalStyled } from "./styled.js";
22
21
  export { default as ThemeProvider } from "./ThemeProvider.js";
23
22
  export { StyledEngineProvider } from '@mui/system';
24
23
  // The legacy utilities from @mui/styles
@@ -44,8 +44,8 @@ import { FormControlLabelClassKey } from "../FormControlLabel/index.js";
44
44
  import { FormGroupClassKey } from "../FormGroup/index.js";
45
45
  import { FormHelperTextClassKey } from "../FormHelperText/index.js";
46
46
  import { FormLabelClassKey } from "../FormLabel/index.js";
47
+ import { GridLegacyClassKey } from "../GridLegacy/index.js";
47
48
  import { GridClassKey } from "../Grid/index.js";
48
- import { Grid2ClassKey } from "../Grid2/index.js";
49
49
  import { IconButtonClassKey } from "../IconButton/index.js";
50
50
  import { IconClassKey } from "../Icon/index.js";
51
51
  import { ImageListClassKey } from "../ImageList/index.js";
@@ -168,8 +168,8 @@ export interface ComponentNameToClassKey {
168
168
  MuiFormGroup: FormGroupClassKey;
169
169
  MuiFormHelperText: FormHelperTextClassKey;
170
170
  MuiFormLabel: FormLabelClassKey;
171
+ MuiGridLegacy: GridLegacyClassKey;
171
172
  MuiGrid: GridClassKey;
172
- MuiGrid2: Grid2ClassKey;
173
173
  MuiIcon: IconClassKey;
174
174
  MuiIconButton: IconButtonClassKey;
175
175
  MuiImageList: ImageListClassKey;
@@ -42,8 +42,8 @@ import { FormControlProps } from "../FormControl/index.js";
42
42
  import { FormGroupProps } from "../FormGroup/index.js";
43
43
  import { FormHelperTextProps } from "../FormHelperText/index.js";
44
44
  import { FormLabelProps } from "../FormLabel/index.js";
45
+ import { GridLegacyProps } from "../GridLegacy/index.js";
45
46
  import { GridProps } from "../Grid/index.js";
46
- import { Grid2Props } from "../Grid2/index.js";
47
47
  import { IconButtonProps } from "../IconButton/index.js";
48
48
  import { IconProps } from "../Icon/index.js";
49
49
  import { ImageListProps } from "../ImageList/index.js";
@@ -163,8 +163,8 @@ export interface ComponentsPropsList {
163
163
  MuiFormGroup: FormGroupProps;
164
164
  MuiFormHelperText: FormHelperTextProps;
165
165
  MuiFormLabel: FormLabelProps;
166
+ MuiGridLegacy: GridLegacyProps;
166
167
  MuiGrid: GridProps;
167
- MuiGrid2: Grid2Props;
168
168
  MuiImageList: ImageListProps;
169
169
  MuiImageListItem: ImageListItemProps;
170
170
  MuiImageListItemBar: ImageListItemBarProps;
@@ -1,2 +1,2 @@
1
- import SvgIcon from '@mui/material/SvgIcon';
1
+ import SvgIcon from "../SvgIcon/index.js";
2
2
  export default function createSvgIcon(path: React.ReactNode, displayName: string): typeof SvgIcon;
@@ -10,7 +10,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
10
10
  export default function createSvgIcon(path, displayName) {
11
11
  function Component(props, ref) {
12
12
  return /*#__PURE__*/_jsx(SvgIcon, {
13
- "data-testid": `${displayName}Icon`,
13
+ "data-testid": process.env.NODE_ENV !== 'production' ? `${displayName}Icon` : undefined,
14
14
  ref: ref,
15
15
  ...props,
16
16
  children: path
@@ -1,6 +1,6 @@
1
- export const version = "7.0.0-alpha.2";
1
+ export const version = "7.0.0-beta.1";
2
2
  export const major = Number("7");
3
3
  export const minor = Number("0");
4
4
  export const patch = Number("0");
5
- export const prerelease = "alpha.2";
5
+ export const prerelease = "beta.1";
6
6
  export default version;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/material",
3
- "version": "7.0.0-alpha.2",
3
+ "version": "7.0.0-beta.1",
4
4
  "private": false,
5
5
  "author": "MUI Team",
6
6
  "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -35,8 +35,8 @@
35
35
  "prop-types": "^15.8.1",
36
36
  "react-is": "^19.0.0",
37
37
  "react-transition-group": "^4.4.5",
38
- "@mui/core-downloads-tracker": "^7.0.0-alpha.2",
39
- "@mui/system": "7.0.0-alpha.2",
38
+ "@mui/core-downloads-tracker": "^7.0.0-beta.1",
39
+ "@mui/system": "7.0.0-beta.1",
40
40
  "@mui/types": "^7.2.22",
41
41
  "@mui/utils": "7.0.0-alpha.2"
42
42
  },
@@ -46,7 +46,7 @@
46
46
  "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
47
47
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
48
48
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
49
- "@mui/material-pigment-css": "7.0.0-alpha.2"
49
+ "@mui/material-pigment-css": "7.0.0-beta.1"
50
50
  },
51
51
  "peerDependenciesMeta": {
52
52
  "@types/react": {
@@ -222,16 +222,16 @@ export interface Components<Theme = unknown> {
222
222
  styleOverrides?: ComponentsOverrides<Theme>['MuiFormLabel'];
223
223
  variants?: ComponentsVariants<Theme>['MuiFormLabel'];
224
224
  };
225
+ MuiGridLegacy?: {
226
+ defaultProps?: ComponentsProps['MuiGridLegacy'];
227
+ styleOverrides?: ComponentsOverrides<Theme>['MuiGridLegacy'];
228
+ variants?: ComponentsVariants<Theme>['MuiGridLegacy'];
229
+ };
225
230
  MuiGrid?: {
226
231
  defaultProps?: ComponentsProps['MuiGrid'];
227
232
  styleOverrides?: ComponentsOverrides<Theme>['MuiGrid'];
228
233
  variants?: ComponentsVariants<Theme>['MuiGrid'];
229
234
  };
230
- MuiGrid2?: {
231
- defaultProps?: ComponentsProps['MuiGrid2'];
232
- styleOverrides?: ComponentsOverrides<Theme>['MuiGrid2'];
233
- variants?: ComponentsVariants<Theme>['MuiGrid2'];
234
- };
235
235
  MuiImageList?: {
236
236
  defaultProps?: ComponentsProps['MuiImageList'];
237
237
  styleOverrides?: ComponentsOverrides<Theme>['MuiImageList'];
@@ -1,6 +1,5 @@
1
1
  import { CssVarsThemeOptions } from "./createThemeWithVars.js";
2
2
  import { Theme, ThemeOptions } from "./createThemeNoVars.js";
3
- export { createMuiTheme } from "./createThemeNoVars.js";
4
3
  export type { ThemeOptions, Theme, CssThemeVariables } from "./createThemeNoVars.js";
5
4
  /**
6
5
  * Generate a theme base on the options received.
@@ -1,20 +1,13 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
- Object.defineProperty(exports, "createMuiTheme", {
9
- enumerable: true,
10
- get: function () {
11
- return _createThemeNoVars.createMuiTheme;
12
- }
13
- });
14
7
  exports.default = createTheme;
15
8
  var _createPalette = _interopRequireDefault(require("./createPalette"));
16
9
  var _createThemeWithVars = _interopRequireDefault(require("./createThemeWithVars"));
17
- var _createThemeNoVars = _interopRequireWildcard(require("./createThemeNoVars"));
10
+ var _createThemeNoVars = _interopRequireDefault(require("./createThemeNoVars"));
18
11
  // eslint-disable-next-line consistent-return
19
12
  function attachColorScheme(theme, scheme, colorScheme) {
20
13
  if (!theme.colorSchemes) {
@@ -61,12 +61,6 @@ export interface Theme extends BaseTheme, CssVarsProperties {
61
61
  unstable_sxConfig: SxConfig;
62
62
  }
63
63
 
64
- /**
65
- * @deprecated
66
- * Use `import { createTheme } from '@mui/material/styles'` instead.
67
- */
68
- export function createMuiTheme(options?: ThemeOptions, ...args: object[]): Theme;
69
-
70
64
  /**
71
65
  * Generate a theme base on the options received.
72
66
  * @param options Takes an incomplete theme object and adds the missing parts.
@@ -5,7 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.createMuiTheme = createMuiTheme;
9
8
  exports.default = void 0;
10
9
  var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
11
10
  var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
@@ -30,8 +29,13 @@ function createThemeNoVars(options = {}, ...args) {
30
29
  shape: shapeInput,
31
30
  ...other
32
31
  } = options;
33
- if (options.vars) {
34
- throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' + 'Please use another name.' : (0, _formatMuiErrorMessage2.default)(20));
32
+ if (options.vars &&
33
+ // The error should throw only for the root theme creation because user is not allowed to use a custom node `vars`.
34
+ // `generateThemeVars` is the closest identifier for checking that the `options` is a result of `createTheme` with CSS variables so that user can create new theme for nested ThemeProvider.
35
+ options.generateThemeVars === undefined) {
36
+ throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' +
37
+ // #host-reference
38
+ 'Please use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : (0, _formatMuiErrorMessage2.default)(20));
35
39
  }
36
40
  const palette = (0, _createPalette.default)(paletteInput);
37
41
  const systemTheme = (0, _createTheme.default)(options);
@@ -92,14 +96,4 @@ function createThemeNoVars(options = {}, ...args) {
92
96
 
93
97
  return muiTheme;
94
98
  }
95
- let warnedOnce = false;
96
- function createMuiTheme(...args) {
97
- if (process.env.NODE_ENV !== 'production') {
98
- if (!warnedOnce) {
99
- warnedOnce = true;
100
- console.error(['MUI: the createMuiTheme function was renamed to createTheme.', '', "You should use `import { createTheme } from '@mui/material/styles'`"].join('\n'));
101
- }
102
- }
103
- return createThemeNoVars(...args);
104
- }
105
99
  var _default = exports.default = createThemeNoVars;
package/styles/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export { default as THEME_ID } from "./identifier.js";
2
- export { default as createTheme, default as unstable_createMuiStrictModeTheme, createMuiTheme, ThemeOptions, Theme, CssThemeVariables } from "./createTheme.js";
2
+ export { default as createTheme, default as unstable_createMuiStrictModeTheme, ThemeOptions, Theme, CssThemeVariables } from "./createTheme.js";
3
3
  export { default as adaptV4Theme, DeprecatedThemeOptions } from "./adaptV4Theme.js";
4
4
  export { Shadows } from "./shadows.js";
5
5
  export { ZIndex } from "./zIndex.js";
@@ -21,10 +21,6 @@ export { default as useTheme } from "./useTheme.js";
21
21
  export { default as useThemeProps } from "./useThemeProps.js";
22
22
  export * from "./useThemeProps.js";
23
23
  export { default as styled } from "./styled.js";
24
- /**
25
- * @deprecated will be removed in v5.beta, please use styled from @mui/material/styles instead
26
- */
27
- export { default as experimentalStyled } from "./styled.js";
28
24
  export { default as ThemeProvider } from "./ThemeProvider.js";
29
25
  export { ComponentsProps, ComponentsPropsList } from "./props.js";
30
26
  export { ComponentsVariants } from "./variants.js";
package/styles/index.js CHANGED
@@ -25,7 +25,6 @@ var _exportNames = {
25
25
  StyledEngineProvider: true,
26
26
  unstable_createBreakpoints: true,
27
27
  createTheme: true,
28
- createMuiTheme: true,
29
28
  unstable_createMuiStrictModeTheme: true,
30
29
  createStyles: true,
31
30
  unstable_getUnit: true,
@@ -38,7 +37,6 @@ var _exportNames = {
38
37
  useTheme: true,
39
38
  useThemeProps: true,
40
39
  styled: true,
41
- experimentalStyled: true,
42
40
  ThemeProvider: true,
43
41
  makeStyles: true,
44
42
  withStyles: true,
@@ -87,12 +85,6 @@ Object.defineProperty(exports, "createColorScheme", {
87
85
  return _createColorScheme.default;
88
86
  }
89
87
  });
90
- Object.defineProperty(exports, "createMuiTheme", {
91
- enumerable: true,
92
- get: function () {
93
- return _createTheme.createMuiTheme;
94
- }
95
- });
96
88
  Object.defineProperty(exports, "createStyles", {
97
89
  enumerable: true,
98
90
  get: function () {
@@ -147,12 +139,6 @@ Object.defineProperty(exports, "emphasize", {
147
139
  return _system.emphasize;
148
140
  }
149
141
  });
150
- Object.defineProperty(exports, "experimentalStyled", {
151
- enumerable: true,
152
- get: function () {
153
- return _styled.default;
154
- }
155
- });
156
142
  Object.defineProperty(exports, "experimental_extendTheme", {
157
143
  enumerable: true,
158
144
  get: function () {
@@ -315,7 +301,7 @@ var _identifier = _interopRequireDefault(require("./identifier"));
315
301
  var _adaptV4Theme = _interopRequireDefault(require("./adaptV4Theme"));
316
302
  var _system = require("@mui/system");
317
303
  var _createBreakpoints = require("@mui/system/createBreakpoints");
318
- var _createTheme = _interopRequireWildcard(require("./createTheme"));
304
+ var _createTheme = _interopRequireDefault(require("./createTheme"));
319
305
  var _createMuiStrictModeTheme = _interopRequireDefault(require("./createMuiStrictModeTheme"));
320
306
  var _createStyles = _interopRequireDefault(require("./createStyles"));
321
307
  var _cssUtils = require("./cssUtils");
@@ -44,8 +44,8 @@ import { FormControlLabelClassKey } from "../FormControlLabel/index.js";
44
44
  import { FormGroupClassKey } from "../FormGroup/index.js";
45
45
  import { FormHelperTextClassKey } from "../FormHelperText/index.js";
46
46
  import { FormLabelClassKey } from "../FormLabel/index.js";
47
+ import { GridLegacyClassKey } from "../GridLegacy/index.js";
47
48
  import { GridClassKey } from "../Grid/index.js";
48
- import { Grid2ClassKey } from "../Grid2/index.js";
49
49
  import { IconButtonClassKey } from "../IconButton/index.js";
50
50
  import { IconClassKey } from "../Icon/index.js";
51
51
  import { ImageListClassKey } from "../ImageList/index.js";
@@ -168,8 +168,8 @@ export interface ComponentNameToClassKey {
168
168
  MuiFormGroup: FormGroupClassKey;
169
169
  MuiFormHelperText: FormHelperTextClassKey;
170
170
  MuiFormLabel: FormLabelClassKey;
171
+ MuiGridLegacy: GridLegacyClassKey;
171
172
  MuiGrid: GridClassKey;
172
- MuiGrid2: Grid2ClassKey;
173
173
  MuiIcon: IconClassKey;
174
174
  MuiIconButton: IconButtonClassKey;
175
175
  MuiImageList: ImageListClassKey;
package/styles/props.d.ts CHANGED
@@ -42,8 +42,8 @@ import { FormControlProps } from "../FormControl/index.js";
42
42
  import { FormGroupProps } from "../FormGroup/index.js";
43
43
  import { FormHelperTextProps } from "../FormHelperText/index.js";
44
44
  import { FormLabelProps } from "../FormLabel/index.js";
45
+ import { GridLegacyProps } from "../GridLegacy/index.js";
45
46
  import { GridProps } from "../Grid/index.js";
46
- import { Grid2Props } from "../Grid2/index.js";
47
47
  import { IconButtonProps } from "../IconButton/index.js";
48
48
  import { IconProps } from "../Icon/index.js";
49
49
  import { ImageListProps } from "../ImageList/index.js";
@@ -163,8 +163,8 @@ export interface ComponentsPropsList {
163
163
  MuiFormGroup: FormGroupProps;
164
164
  MuiFormHelperText: FormHelperTextProps;
165
165
  MuiFormLabel: FormLabelProps;
166
+ MuiGridLegacy: GridLegacyProps;
166
167
  MuiGrid: GridProps;
167
- MuiGrid2: Grid2Props;
168
168
  MuiImageList: ImageListProps;
169
169
  MuiImageListItem: ImageListItemProps;
170
170
  MuiImageListItemBar: ImageListItemBarProps;