@mui/material 6.4.11 → 6.4.12

package/node/OutlinedInput/OutlinedInput.js

@@ -21,6 +21,7 @@ var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/c
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _outlinedInputClasses = _interopRequireWildcard(require("./outlinedInputClasses"));
 var _InputBase = _interopRequireWildcard(require("../InputBase/InputBase"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -185,7 +186,6 @@ const OutlinedInputInput = (0, _zeroStyled.styled)(_InputBase.InputBaseInput, {
   }]
 })));
 const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
-  var _React$Fragment;
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiOutlinedInput'
@@ -198,6 +198,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     multiline = false,
     notched,
     slots = {},
+    slotProps = {},
     type = 'text',
     ...other
   } = props;
@@ -223,17 +224,29 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
   };
   const RootSlot = slots.root ?? components.Root ?? OutlinedInputRoot;
   const InputSlot = slots.input ?? components.Input ?? OutlinedInputInput;
+  const [NotchedSlot, notchedProps] = (0, _useSlot.default)('notchedOutline', {
+    elementType: NotchedOutlineRoot,
+    className: classes.notchedOutline,
+    shouldForwardComponentProp: true,
+    ownerState,
+    externalForwardedProps: {
+      slots,
+      slotProps
+    },
+    additionalProps: {
+      label: label != null && label !== '' && fcs.required ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+        children: [label, "\u2009", '*']
+      }) : label
+    }
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBase.default, {
     slots: {
       root: RootSlot,
       input: InputSlot
     },
-    renderSuffix: state => /*#__PURE__*/(0, _jsxRuntime.jsx)(NotchedOutlineRoot, {
-      ownerState: ownerState,
-      className: classes.notchedOutline,
-      label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-        children: [label, "\u2009", '*']
-      })) : label,
+    slotProps: slotProps,
+    renderSuffix: state => /*#__PURE__*/(0, _jsxRuntime.jsx)(NotchedSlot, {
+      ...notchedProps,
       notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)
     }),
     fullWidth: fullWidth,
@@ -384,15 +397,22 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
    * Number of rows to display when multiline option is set to true.
    */
   rows: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    input: _propTypes.default.object,
+    notchedOutline: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.object
+  }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: _propTypes.default.shape({
     input: _propTypes.default.elementType,
+    notchedOutline: _propTypes.default.elementType,
     root: _propTypes.default.elementType
   }),
   /**

package/node/index.js

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

package/node/styles/ThemeProvider.js

@@ -16,27 +16,27 @@ function ThemeProvider({
   theme,
   ...props
 }) {
-  if (typeof theme === 'function') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProviderNoVars.default, {
-      theme: theme,
-      ...props
-    });
-  }
-  const muiTheme = _identifier.default in theme ? theme[_identifier.default] : theme;
-  if (!('colorSchemes' in muiTheme)) {
-    if (!('vars' in muiTheme)) {
-      // For non-CSS variables themes, set `vars` to null to prevent theme inheritance from the upper theme.
-      // The example use case is the docs demo that uses ThemeProvider to customize the theme while the upper theme is using CSS variables.
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProviderNoVars.default, {
-        theme: {
+  const noVarsTheme = React.useMemo(() => {
+    if (typeof theme === 'function') {
+      return theme;
+    }
+    const muiTheme = _identifier.default in theme ? theme[_identifier.default] : theme;
+    if (!('colorSchemes' in muiTheme)) {
+      if (!('vars' in muiTheme)) {
+        // For non-CSS variables themes, set `vars` to null to prevent theme inheritance from the upper theme.
+        // The example use case is the docs demo that uses ThemeProvider to customize the theme while the upper theme is using CSS variables.
+        return {
           ...theme,
           vars: null
-        },
-        ...props
-      });
+        };
+      }
+      return theme;
     }
+    return null;
+  }, [theme]);
+  if (noVarsTheme) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProviderNoVars.default, {
-      theme: theme,
+      theme: noVarsTheme,
       ...props
     });
   }

package/node/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "6.4.11";
+const version = exports.version = "6.4.12";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("4");
-const patch = exports.patch = Number("11");
+const patch = exports.patch = Number("12");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.4.11",
+  "version": "6.4.12",
   "private": false,
   "author": "MUI Team",
   "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 @@
     "prop-types": "^15.8.1",
     "react-is": "^19.0.0",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^6.4.11",
-    "@mui/system": "^6.4.11",
+    "@mui/system": "^6.4.12",
+    "@mui/core-downloads-tracker": "^6.4.12",
     "@mui/types": "~7.2.24",
     "@mui/utils": "^6.4.9"
   },
@@ -46,7 +46,7 @@
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@mui/material-pigment-css": "^6.4.11"
+    "@mui/material-pigment-css": "^6.4.12"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/styles/ThemeProvider.js

@@ -9,27 +9,27 @@ export default function ThemeProvider({
   theme,
   ...props
 }) {
-  if (typeof theme === 'function') {
-    return /*#__PURE__*/_jsx(ThemeProviderNoVars, {
-      theme: theme,
-      ...props
-    });
-  }
-  const muiTheme = THEME_ID in theme ? theme[THEME_ID] : theme;
-  if (!('colorSchemes' in muiTheme)) {
-    if (!('vars' in muiTheme)) {
-      // For non-CSS variables themes, set `vars` to null to prevent theme inheritance from the upper theme.
-      // The example use case is the docs demo that uses ThemeProvider to customize the theme while the upper theme is using CSS variables.
-      return /*#__PURE__*/_jsx(ThemeProviderNoVars, {
-        theme: {
+  const noVarsTheme = React.useMemo(() => {
+    if (typeof theme === 'function') {
+      return theme;
+    }
+    const muiTheme = THEME_ID in theme ? theme[THEME_ID] : theme;
+    if (!('colorSchemes' in muiTheme)) {
+      if (!('vars' in muiTheme)) {
+        // For non-CSS variables themes, set `vars` to null to prevent theme inheritance from the upper theme.
+        // The example use case is the docs demo that uses ThemeProvider to customize the theme while the upper theme is using CSS variables.
+        return {
           ...theme,
           vars: null
-        },
-        ...props
-      });
+        };
+      }
+      return theme;
     }
+    return null;
+  }, [theme]);
+  if (noVarsTheme) {
     return /*#__PURE__*/_jsx(ThemeProviderNoVars, {
-      theme: theme,
+      theme: noVarsTheme,
       ...props
     });
   }

package/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.4.11";
+export const version = "6.4.12";
 export const major = Number("6");
 export const minor = Number("4");
-export const patch = Number("11");
+export const patch = Number("12");
 export const prerelease = undefined;
 export default version;