@mui/material 6.1.3 → 6.1.5

package/node/styles/createThemeNoVars.js

@@ -18,6 +18,7 @@ var _createTypography = _interopRequireDefault(require("./createTypography"));
 var _shadows = _interopRequireDefault(require("./shadows"));
 var _createTransitions = _interopRequireDefault(require("./createTransitions"));
 var _zIndex = _interopRequireDefault(require("./zIndex"));
+var _stringifyTheme = require("./stringifyTheme");
 function createThemeNoVars(options = {}, ...args) {
   const {
     breakpoints: breakpointsInput,
@@ -87,6 +88,8 @@ function createThemeNoVars(options = {}, ...args) {
       theme: this
     });
   };
+  muiTheme.toRuntimeSource = _stringifyTheme.stringifyTheme; // for Pigment CSS integration
+
   return muiTheme;
 }
 let warnedOnce = false;

package/node/useAutocomplete/useAutocomplete.js

@@ -844,7 +844,6 @@ function useAutocomplete(props) {
   const handleInputMouseDown = event => {
     if (!disabledProp && (inputValue === '' || !open)) {
       handlePopupIndicator(event);
-      event.stopPropagation();
     }
   };
   let dirty = freeSolo && inputValue.length > 0;
@@ -921,8 +920,7 @@ function useAutocomplete(props) {
     getPopupIndicatorProps: () => ({
       tabIndex: -1,
       type: 'button',
-      onClick: handlePopupIndicator,
-      onMouseDown: event => event.stopPropagation()
+      onClick: handlePopupIndicator
     }),
     getTagProps: ({
       index

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.1.3";
+const version = exports.version = "6.1.5";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("1");
-const patch = exports.patch = Number("3");
+const patch = exports.patch = Number("5");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.1.3",
+  "version": "6.1.5",
   "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.",
@@ -27,7 +27,7 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.6",
+    "@babel/runtime": "^7.25.7",
     "@popperjs/core": "^2.11.8",
     "@types/react-transition-group": "^4.4.11",
     "clsx": "^2.1.1",
@@ -35,10 +35,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^6.1.3",
-    "@mui/system": "^6.1.3",
+    "@mui/core-downloads-tracker": "^6.1.5",
+    "@mui/system": "^6.1.5",
     "@mui/types": "^7.2.18",
-    "@mui/utils": "^6.1.3"
+    "@mui/utils": "^6.1.5"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -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.1.3"
+    "@mui/material-pigment-css": "^6.1.5"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/styles/createPalette.js

@@ -9,70 +9,76 @@ import orange from "../colors/orange.js";
 import blue from "../colors/blue.js";
 import lightBlue from "../colors/lightBlue.js";
 import green from "../colors/green.js";
-export const light = {
-  // The colors used to style the text.
-  text: {
-    // The most important text.
-    primary: 'rgba(0, 0, 0, 0.87)',
-    // Secondary text.
-    secondary: 'rgba(0, 0, 0, 0.6)',
-    // Disabled text have even lower visual prominence.
-    disabled: 'rgba(0, 0, 0, 0.38)'
-  },
-  // The color used to divide different elements.
-  divider: 'rgba(0, 0, 0, 0.12)',
-  // The background colors used to style the surfaces.
-  // Consistency between these values is important.
-  background: {
-    paper: common.white,
-    default: common.white
-  },
-  // The colors used to style the action elements.
-  action: {
-    // The color of an active action like an icon button.
-    active: 'rgba(0, 0, 0, 0.54)',
-    // The color of an hovered action.
-    hover: 'rgba(0, 0, 0, 0.04)',
-    hoverOpacity: 0.04,
-    // The color of a selected action.
-    selected: 'rgba(0, 0, 0, 0.08)',
-    selectedOpacity: 0.08,
-    // The color of a disabled action.
-    disabled: 'rgba(0, 0, 0, 0.26)',
-    // The background color of a disabled action.
-    disabledBackground: 'rgba(0, 0, 0, 0.12)',
-    disabledOpacity: 0.38,
-    focus: 'rgba(0, 0, 0, 0.12)',
-    focusOpacity: 0.12,
-    activatedOpacity: 0.12
-  }
-};
-export const dark = {
-  text: {
-    primary: common.white,
-    secondary: 'rgba(255, 255, 255, 0.7)',
-    disabled: 'rgba(255, 255, 255, 0.5)',
-    icon: 'rgba(255, 255, 255, 0.5)'
-  },
-  divider: 'rgba(255, 255, 255, 0.12)',
-  background: {
-    paper: '#121212',
-    default: '#121212'
-  },
-  action: {
-    active: common.white,
-    hover: 'rgba(255, 255, 255, 0.08)',
-    hoverOpacity: 0.08,
-    selected: 'rgba(255, 255, 255, 0.16)',
-    selectedOpacity: 0.16,
-    disabled: 'rgba(255, 255, 255, 0.3)',
-    disabledBackground: 'rgba(255, 255, 255, 0.12)',
-    disabledOpacity: 0.38,
-    focus: 'rgba(255, 255, 255, 0.12)',
-    focusOpacity: 0.12,
-    activatedOpacity: 0.24
-  }
-};
+function getLight() {
+  return {
+    // The colors used to style the text.
+    text: {
+      // The most important text.
+      primary: 'rgba(0, 0, 0, 0.87)',
+      // Secondary text.
+      secondary: 'rgba(0, 0, 0, 0.6)',
+      // Disabled text have even lower visual prominence.
+      disabled: 'rgba(0, 0, 0, 0.38)'
+    },
+    // The color used to divide different elements.
+    divider: 'rgba(0, 0, 0, 0.12)',
+    // The background colors used to style the surfaces.
+    // Consistency between these values is important.
+    background: {
+      paper: common.white,
+      default: common.white
+    },
+    // The colors used to style the action elements.
+    action: {
+      // The color of an active action like an icon button.
+      active: 'rgba(0, 0, 0, 0.54)',
+      // The color of an hovered action.
+      hover: 'rgba(0, 0, 0, 0.04)',
+      hoverOpacity: 0.04,
+      // The color of a selected action.
+      selected: 'rgba(0, 0, 0, 0.08)',
+      selectedOpacity: 0.08,
+      // The color of a disabled action.
+      disabled: 'rgba(0, 0, 0, 0.26)',
+      // The background color of a disabled action.
+      disabledBackground: 'rgba(0, 0, 0, 0.12)',
+      disabledOpacity: 0.38,
+      focus: 'rgba(0, 0, 0, 0.12)',
+      focusOpacity: 0.12,
+      activatedOpacity: 0.12
+    }
+  };
+}
+export const light = getLight();
+function getDark() {
+  return {
+    text: {
+      primary: common.white,
+      secondary: 'rgba(255, 255, 255, 0.7)',
+      disabled: 'rgba(255, 255, 255, 0.5)',
+      icon: 'rgba(255, 255, 255, 0.5)'
+    },
+    divider: 'rgba(255, 255, 255, 0.12)',
+    background: {
+      paper: '#121212',
+      default: '#121212'
+    },
+    action: {
+      active: common.white,
+      hover: 'rgba(255, 255, 255, 0.08)',
+      hoverOpacity: 0.08,
+      selected: 'rgba(255, 255, 255, 0.16)',
+      selectedOpacity: 0.16,
+      disabled: 'rgba(255, 255, 255, 0.3)',
+      disabledBackground: 'rgba(255, 255, 255, 0.12)',
+      disabledOpacity: 0.38,
+      focus: 'rgba(255, 255, 255, 0.12)',
+      focusOpacity: 0.12,
+      activatedOpacity: 0.24
+    }
+  };
+}
+export const dark = getDark();
 function addLightOrDark(intent, direction, shade, tonalOffset) {
   const tonalOffsetLight = tonalOffset.light || tonalOffset;
   const tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
@@ -224,12 +230,14 @@ export default function createPalette(palette) {
     }
     return color;
   };
-  const modes = {
-    dark,
-    light
-  };
+  let modeHydrated;
+  if (mode === 'light') {
+    modeHydrated = getLight();
+  } else if (mode === 'dark') {
+    modeHydrated = getDark();
+  }
   if (process.env.NODE_ENV !== 'production') {
-    if (!modes[mode]) {
+    if (!modeHydrated) {
       console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
     }
   }
@@ -288,7 +296,7 @@ export default function createPalette(palette) {
     // E.g., shift from Red 500 to Red 300 or Red 700.
     tonalOffset,
     // The light and dark mode object.
-    ...modes[mode]
+    ...modeHydrated
   }, other);
   return paletteOutput;
 }

package/styles/createThemeNoVars.js

@@ -9,6 +9,7 @@ import createTypography from "./createTypography.js";
 import shadows from "./shadows.js";
 import createTransitions from "./createTransitions.js";
 import zIndex from "./zIndex.js";
+import { stringifyTheme } from "./stringifyTheme.js";
 function createThemeNoVars(options = {}, ...args) {
   const {
     breakpoints: breakpointsInput,
@@ -78,6 +79,8 @@ function createThemeNoVars(options = {}, ...args) {
       theme: this
     });
   };
+  muiTheme.toRuntimeSource = stringifyTheme; // for Pigment CSS integration
+
   return muiTheme;
 }
 let warnedOnce = false;

package/useAutocomplete/useAutocomplete.js

@@ -838,7 +838,6 @@ function useAutocomplete(props) {
   const handleInputMouseDown = event => {
     if (!disabledProp && (inputValue === '' || !open)) {
       handlePopupIndicator(event);
-      event.stopPropagation();
     }
   };
   let dirty = freeSolo && inputValue.length > 0;
@@ -915,8 +914,7 @@ function useAutocomplete(props) {
     getPopupIndicatorProps: () => ({
       tabIndex: -1,
       type: 'button',
-      onClick: handlePopupIndicator,
-      onMouseDown: event => event.stopPropagation()
+      onClick: handlePopupIndicator
     }),
     getTagProps: ({
       index

package/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.3";
+export const version = "6.1.5";
 export const major = Number("6");
 export const minor = Number("1");
-export const patch = Number("3");
+export const patch = Number("5");
 export const prerelease = undefined;
 export default version;