@mui/material 6.0.0-beta.1 → 6.0.0-beta.3

package/Fade/Fade.js

@@ -7,6 +7,7 @@ import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
+import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   entering: {
@@ -47,7 +48,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
   } = props;
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, children.ref, ref);
+  const handleRef = useForkRef(nodeRef, getChildRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/Grow/Grow.js

@@ -8,6 +8,7 @@ import { Transition } from 'react-transition-group';
 import { useTheme } from '../zero-styled';
 import { getTransitionProps, reflow } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
+import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 function getScale(value) {
   return `scale(${value}, ${value ** 2})`;
@@ -57,7 +58,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const autoTimeout = React.useRef();
   const theme = useTheme();
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, children.ref, ref);
+  const handleRef = useForkRef(nodeRef, getChildRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/Paper/Paper.js

@@ -100,7 +100,7 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
       ...(variant === 'elevation' && {
         '--Paper-shadow': (theme.vars || theme).shadows[elevation],
         ...(theme.vars && {
-          '--Paper-overlay': theme.overlays?.[elevation]
+          '--Paper-overlay': theme.vars.overlays?.[elevation]
         }),
         ...(!theme.vars && theme.palette.mode === 'dark' && {
           '--Paper-overlay': `linear-gradient(${alpha('#fff', getOverlayAlpha(elevation))}, ${alpha('#fff', getOverlayAlpha(elevation))})`

package/Rating/Rating.d.ts

@@ -44,7 +44,7 @@ export interface RatingProps
    * @param {number} value The rating label's value to format.
    * @returns {string}
    * @default function defaultLabelText(value) {
-   *   return `${value} Star${value !== 1 ? 's' : ''}`;
+   *   return `${value || '0'} Star${value !== 1 ? 's' : ''}`;
    * }
    */
   getLabelText?: (value: number) => string;

package/Rating/Rating.js

@@ -303,7 +303,7 @@ const defaultEmptyIcon = /*#__PURE__*/_jsx(StarBorder, {
   fontSize: "inherit"
 });
 function defaultLabelText(value) {
-  return `${value} Star${value !== 1 ? 's' : ''}`;
+  return `${value || '0'} Star${value !== 1 ? 's' : ''}`;
 }
 const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   const props = useDefaultProps({
@@ -588,7 +588,7 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
    * @param {number} value The rating label's value to format.
    * @returns {string}
    * @default function defaultLabelText(value) {
-   *   return `${value} Star${value !== 1 ? 's' : ''}`;
+   *   return `${value || '0'} Star${value !== 1 ? 's' : ''}`;
    * }
    */
   getLabelText: PropTypes.func,

package/Select/selectClasses.d.ts

@@ -7,6 +7,8 @@ export interface SelectClasses {
     multiple: string;
     /** Styles applied to the select component if `variant="filled"`. */
     filled: string;
+    /** Styles applied to the select component if it is focused. */
+    focused: string;
     /** Styles applied to the select component if `variant="outlined"`. */
     outlined: string;
     /** Styles applied to the select component if `variant="standard"`. */

package/Slide/Slide.js

@@ -11,6 +11,7 @@ import useForkRef from '../utils/useForkRef';
 import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import { ownerWindow } from '../utils';
+import getChildRef from '../utils/getChildRef';
 
 // Translate the node so it can't be seen on the screen.
 // Later, we're going to translate the node back to its original location with `none`.
@@ -105,7 +106,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     ...other
   } = props;
   const childrenRef = React.useRef(null);
-  const handleRef = useForkRef(children.ref, childrenRef, ref);
+  const handleRef = useForkRef(getChildRef(children), childrenRef, ref);
   const normalizedTransitionCallback = callback => isAppearing => {
     if (callback) {
       // onEnterXxx and onExitXxx callbacks have a different arguments.length value.

package/Tooltip/Tooltip.js

@@ -20,6 +20,7 @@ import useForkRef from '../utils/useForkRef';
 import useId from '../utils/useId';
 import useControlled from '../utils/useControlled';
 import tooltipClasses, { getTooltipUtilityClass } from './tooltipClasses';
+import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
@@ -510,7 +511,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleRef = useForkRef(children.ref, setChildNode, ref);
+  const handleRef = useForkRef(getChildRef(children), setChildNode, ref);
 
   // There is no point in displaying an empty tooltip.
   // So we exclude all falsy values, except 0, which is valid.

package/Typography/Typography.d.ts

@@ -38,6 +38,7 @@ export interface TypographyOwnProps extends SystemProps<Theme> {
   /**
    * If `true`, the element will be a paragraph element.
    * @default false
+   * @deprecated Use the `component` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   paragraph?: boolean;
   /**

package/Typography/Typography.js

@@ -214,6 +214,7 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes
   /**
    * If `true`, the element will be a paragraph element.
    * @default false
+   * @deprecated Use the `component` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   paragraph: PropTypes.bool,
   /**

package/Typography/typographyClasses.d.ts

@@ -41,7 +41,10 @@ export interface TypographyClasses {
     noWrap: string;
     /** Styles applied to the root element if `gutterBottom={true}`. */
     gutterBottom: string;
-    /** Styles applied to the root element if `paragraph={true}`. */
+    /**
+     * Styles applied to the root element if `paragraph={true}`.
+     * @deprecated
+     */
     paragraph: string;
 }
 export type TypographyClassKey = keyof TypographyClasses;

package/Zoom/Zoom.js

@@ -7,6 +7,7 @@ import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
+import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   entering: {
@@ -47,7 +48,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     ...other
   } = props;
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, children.ref, ref);
+  const handleRef = useForkRef(nodeRef, getChildRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-beta.1
+ * @mui/material v6.0.0-beta.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/Fade/Fade.js

@@ -7,6 +7,7 @@ import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
+import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   entering: {
@@ -47,7 +48,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
   } = props;
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, children.ref, ref);
+  const handleRef = useForkRef(nodeRef, getChildRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/modern/Grow/Grow.js

@@ -8,6 +8,7 @@ import { Transition } from 'react-transition-group';
 import { useTheme } from '../zero-styled';
 import { getTransitionProps, reflow } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
+import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 function getScale(value) {
   return `scale(${value}, ${value ** 2})`;
@@ -57,7 +58,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const autoTimeout = React.useRef();
   const theme = useTheme();
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, children.ref, ref);
+  const handleRef = useForkRef(nodeRef, getChildRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/modern/Paper/Paper.js

@@ -100,7 +100,7 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
       ...(variant === 'elevation' && {
         '--Paper-shadow': (theme.vars || theme).shadows[elevation],
         ...(theme.vars && {
-          '--Paper-overlay': theme.overlays?.[elevation]
+          '--Paper-overlay': theme.vars.overlays?.[elevation]
         }),
         ...(!theme.vars && theme.palette.mode === 'dark' && {
           '--Paper-overlay': `linear-gradient(${alpha('#fff', getOverlayAlpha(elevation))}, ${alpha('#fff', getOverlayAlpha(elevation))})`

package/modern/Rating/Rating.js

@@ -303,7 +303,7 @@ const defaultEmptyIcon = /*#__PURE__*/_jsx(StarBorder, {
   fontSize: "inherit"
 });
 function defaultLabelText(value) {
-  return `${value} Star${value !== 1 ? 's' : ''}`;
+  return `${value || '0'} Star${value !== 1 ? 's' : ''}`;
 }
 const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   const props = useDefaultProps({
@@ -588,7 +588,7 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
    * @param {number} value The rating label's value to format.
    * @returns {string}
    * @default function defaultLabelText(value) {
-   *   return `${value} Star${value !== 1 ? 's' : ''}`;
+   *   return `${value || '0'} Star${value !== 1 ? 's' : ''}`;
    * }
    */
   getLabelText: PropTypes.func,

package/modern/Slide/Slide.js

@@ -11,6 +11,7 @@ import useForkRef from '../utils/useForkRef';
 import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import { ownerWindow } from '../utils';
+import getChildRef from '../utils/getChildRef';
 
 // Translate the node so it can't be seen on the screen.
 // Later, we're going to translate the node back to its original location with `none`.
@@ -105,7 +106,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     ...other
   } = props;
   const childrenRef = React.useRef(null);
-  const handleRef = useForkRef(children.ref, childrenRef, ref);
+  const handleRef = useForkRef(getChildRef(children), childrenRef, ref);
   const normalizedTransitionCallback = callback => isAppearing => {
     if (callback) {
       // onEnterXxx and onExitXxx callbacks have a different arguments.length value.

package/modern/Tooltip/Tooltip.js

@@ -20,6 +20,7 @@ import useForkRef from '../utils/useForkRef';
 import useId from '../utils/useId';
 import useControlled from '../utils/useControlled';
 import tooltipClasses, { getTooltipUtilityClass } from './tooltipClasses';
+import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
@@ -510,7 +511,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleRef = useForkRef(children.ref, setChildNode, ref);
+  const handleRef = useForkRef(getChildRef(children), setChildNode, ref);
 
   // There is no point in displaying an empty tooltip.
   // So we exclude all falsy values, except 0, which is valid.

package/modern/Typography/Typography.js

@@ -214,6 +214,7 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes
   /**
    * If `true`, the element will be a paragraph element.
    * @default false
+   * @deprecated Use the `component` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   paragraph: PropTypes.bool,
   /**

package/modern/Zoom/Zoom.js

@@ -7,6 +7,7 @@ import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
+import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   entering: {
@@ -47,7 +48,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     ...other
   } = props;
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, children.ref, ref);
+  const handleRef = useForkRef(nodeRef, getChildRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-beta.1
+ * @mui/material v6.0.0-beta.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/styles/CssVarsProvider.js

@@ -16,7 +16,6 @@ const {
 } = createCssVarsProvider({
   themeId: THEME_ID,
   theme: defaultTheme,
-  attribute: defaultConfig.attribute,
   colorSchemeStorageKey: defaultConfig.colorSchemeStorageKey,
   modeStorageKey: defaultConfig.modeStorageKey,
   defaultColorScheme: {

package/modern/styles/createGetSelector.js

@@ -1,5 +1,17 @@
 import excludeVariablesFromRoot from './excludeVariablesFromRoot';
 export default (theme => (colorScheme, css) => {
+  const selector = theme.colorSchemeSelector;
+  let rule = selector;
+  if (selector === 'class') {
+    rule = '.%s';
+  }
+  if (selector === 'data') {
+    rule = '[data-%s]';
+  }
+  if (selector?.startsWith('data-') && !selector.includes('%s')) {
+    // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
+    rule = `[${selector}="%s"]`;
+  }
   if (theme.defaultColorScheme === colorScheme) {
     if (colorScheme === 'dark') {
       const excludedVariables = {};
@@ -7,15 +19,32 @@ export default (theme => (colorScheme, css) => {
         excludedVariables[cssVar] = css[cssVar];
         delete css[cssVar];
       });
+      if (rule === 'media') {
+        return {
+          ':root': css,
+          '@media (prefers-color-scheme: dark) { :root': excludedVariables
+        };
+      }
+      if (rule) {
+        return {
+          [rule.replace('%s', colorScheme)]: excludedVariables,
+          ':root': css
+        };
+      }
       return {
-        [`[${theme.attribute}="${String(colorScheme)}"]`]: excludedVariables,
-        [theme.colorSchemeSelector]: css
+        ':root': {
+          ...css,
+          ...excludedVariables
+        }
       };
     }
-    return `${theme.colorSchemeSelector}, [${theme.attribute}="${String(colorScheme)}"]`;
-  }
-  if (colorScheme) {
-    return `[${theme.attribute}="${String(colorScheme)}"]`;
+  } else if (colorScheme) {
+    if (rule === 'media') {
+      return `@media (prefers-color-scheme: ${String(colorScheme)}) { :root`;
+    }
+    if (rule) {
+      return rule.replace('%s', String(colorScheme));
+    }
   }
-  return theme.colorSchemeSelector;
+  return ':root';
 });

package/modern/styles/excludeVariablesFromRoot.js

@@ -1,5 +1,5 @@
 /**
- * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
+ * @internal These variables should not appear in the :root stylesheet when the `defaultColorScheme="dark"`
  */
 const excludeVariablesFromRoot = cssVarPrefix => [...[...Array(24)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index + 1}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkColor`];
 export default excludeVariablesFromRoot;