@mui/material 9.1.1 → 9.1.2

package/Avatar/Avatar.js

@@ -118,6 +118,8 @@ function useLoaded(src, srcSet, crossOrigin, referrerPolicy) {
     if (!src && !srcSet) {
       return undefined;
     }
+
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setLoaded(false);
     let active = true;
     const image = new Image();

package/Avatar/Avatar.mjs

@@ -111,6 +111,8 @@ function useLoaded(src, srcSet, crossOrigin, referrerPolicy) {
     if (!src && !srcSet) {
       return undefined;
     }
+
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setLoaded(false);
     let active = true;
     const image = new Image();

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # [Versions](https://mui.com/material-ui/getting-started/versions/)
 
+## 9.1.2
+
+<!-- generated comparing v9.1.1..master -->
+
+_Jun 23, 2026_
+
+A big thanks to the 5 contributors who made this release possible.
+
+### `@mui/material@9.1.2`
+
+- [autocomplete] Don't submit forms when committing `freeSolo` value with Enter key (#48679) @mj12albert
+- [transitions] Fix RTG import in ESM (#48645) @mj12albert
+
+### `@mui/system@9.1.2`
+
+- [InitColorSchemeScript] Fix script tag warning in Next.js 16 dev mode (#48671) @siriwatknp
+
+### Docs
+
+- Fix typos in release instructions (#48687) @brijeshb42
+- Update @mui/x-* packages to latest (#48661) @Janpot
+
+### Core
+
+- [code-infra] Convert leaf @mui/system .js+.d.ts pairs to TypeScript (part 1) (#48578) @Janpot
+- [code-infra] Bump to latest code-infra packages (#48672) @brijeshb42
+- [code-infra] Resolve remaining minimatch advisory (#48662) @Janpot
+- [code-infra] Bump nx to resolve minimatch advisory (#48658) @Janpot
+- [core] Drop @babel/* pnpm overrides (#48710) @Janpot
+- [docs-infra] Revert "Pin StackBlitz demo vite to v7 and plugin-react to v5" (#48709) @Janpot
+- [docs-infra] Fix code-block copy button broken on direct page load (#48653) @brijeshb42
+- [test] Stabilize Data Grid demo data in Argos screenshots (#48654) @LukasTy
+
+
+All contributors of this release in alphabetical order: @brijeshb42, @Janpot, @LukasTy, @mj12albert, @siriwatknp
+
 ## 9.1.1
 
 <!-- generated comparing v9.1.0..master -->

package/InputBase/InputBase.js

@@ -330,6 +330,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   // We need to book keep the focused state manually.
   React.useEffect(() => {
     if (!muiFormControl && disabled && focused) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setFocused(false);
       if (onBlur) {
         onBlur();

package/InputBase/InputBase.mjs

@@ -321,6 +321,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   // We need to book keep the focused state manually.
   React.useEffect(() => {
     if (!muiFormControl && disabled && focused) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setFocused(false);
       if (onBlur) {
         onBlur();

package/NoSsr/NoSsr.js

@@ -43,6 +43,7 @@ function NoSsr(props) {
   }, [defer]);
   React.useEffect(() => {
     if (defer) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setMountedState(true);
     }
   }, [defer]);

package/NoSsr/NoSsr.mjs

@@ -36,6 +36,7 @@ function NoSsr(props) {
   }, [defer]);
   React.useEffect(() => {
     if (defer) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setMountedState(true);
     }
   }, [defer]);

package/Popper/BasePopper.js

@@ -92,17 +92,12 @@ const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props
    * modifiers.flip is essentially a flip for controlled/uncontrolled behavior
    */
   const [placement, setPlacement] = React.useState(rtlPlacement);
-  const [resolvedAnchorElement, setResolvedAnchorElement] = React.useState(resolveAnchorEl(anchorEl));
+  const resolvedAnchorElement = React.useMemo(() => resolveAnchorEl(anchorEl), [anchorEl]);
   React.useEffect(() => {
     if (popperRef.current) {
       popperRef.current.forceUpdate();
     }
   });
-  React.useEffect(() => {
-    if (anchorEl) {
-      setResolvedAnchorElement(resolveAnchorEl(anchorEl));
-    }
-  }, [anchorEl]);
   (0, _useEnhancedEffect.default)(() => {
     if (!resolvedAnchorElement || !open) {
       return undefined;

package/Popper/BasePopper.mjs

@@ -85,17 +85,12 @@ const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props
    * modifiers.flip is essentially a flip for controlled/uncontrolled behavior
    */
   const [placement, setPlacement] = React.useState(rtlPlacement);
-  const [resolvedAnchorElement, setResolvedAnchorElement] = React.useState(resolveAnchorEl(anchorEl));
+  const resolvedAnchorElement = React.useMemo(() => resolveAnchorEl(anchorEl), [anchorEl]);
   React.useEffect(() => {
     if (popperRef.current) {
       popperRef.current.forceUpdate();
     }
   });
-  React.useEffect(() => {
-    if (anchorEl) {
-      setResolvedAnchorElement(resolveAnchorEl(anchorEl));
-    }
-  }, [anchorEl]);
   useEnhancedEffect(() => {
     if (!resolvedAnchorElement || !open) {
       return undefined;

package/Tabs/Tabs.js

@@ -615,6 +615,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     return undefined;
   }, [scrollable, scrollButtons, updateScrollObserver, childrenProp?.length]);
   React.useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setMounted(true);
   }, []);
   React.useEffect(() => {

package/Tabs/Tabs.mjs

@@ -608,6 +608,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     return undefined;
   }, [scrollable, scrollButtons, updateScrollObserver, childrenProp?.length]);
   React.useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setMounted(true);
   }, []);
   React.useEffect(() => {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v9.1.1
+ * @mui/material v9.1.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/material v9.1.1
+ * @mui/material v9.1.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internal/Transition.js

@@ -12,11 +12,14 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useValueAsRef = _interopRequireDefault(require("@mui/utils/useValueAsRef"));
-var _TransitionGroupContext = _interopRequireDefault(require("react-transition-group/TransitionGroupContext"));
+var _TransitionGroupContext = _interopRequireDefault(require("react-transition-group/cjs/TransitionGroupContext.js"));
 var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 // Material UI transitions must still work inside react-transition-group's TransitionGroup.
 // Import only its context module; do not import its Transition or TransitionGroup components.
+// Use RTG's explicit CJS file for Node ESM/SSR; package.json's `browser` field redirects
+// browser bundles to RTG's ESM file.
+// eslint-disable-next-line import/extensions -- Node ESM needs the explicit .js extension.
 
 function resolveTimeouts(timeout) {
   if (timeout == null) {

package/internal/Transition.mjs

@@ -7,7 +7,10 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useValueAsRef from '@mui/utils/useValueAsRef';
 // Material UI transitions must still work inside react-transition-group's TransitionGroup.
 // Import only its context module; do not import its Transition or TransitionGroup components.
-import TransitionGroupContext from 'react-transition-group/TransitionGroupContext';
+// Use RTG's explicit CJS file for Node ESM/SSR; package.json's `browser` field redirects
+// browser bundles to RTG's ESM file.
+// eslint-disable-next-line import/extensions -- Node ESM needs the explicit .js extension.
+import TransitionGroupContext from 'react-transition-group/cjs/TransitionGroupContext.js';
 import { reflow } from "../transitions/utils.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 function resolveTimeouts(timeout) {

package/internal/react-transition-group.d.mts

@@ -5,4 +5,12 @@ declare module 'react-transition-group/TransitionGroupContext' {
   }
   const TransitionGroupContext: React.Context<TransitionGroupContextValue | null>;
   export default TransitionGroupContext;
+}
+declare module 'react-transition-group/cjs/TransitionGroupContext.js' {
+  import * as React from 'react';
+  interface TransitionGroupContextValue {
+    isMounting: boolean;
+  }
+  const TransitionGroupContext: React.Context<TransitionGroupContextValue | null>;
+  export default TransitionGroupContext;
 }

package/internal/react-transition-group.d.ts

@@ -5,4 +5,12 @@ declare module 'react-transition-group/TransitionGroupContext' {
   }
   const TransitionGroupContext: React.Context<TransitionGroupContextValue | null>;
   export default TransitionGroupContext;
+}
+declare module 'react-transition-group/cjs/TransitionGroupContext.js' {
+  import * as React from 'react';
+  interface TransitionGroupContextValue {
+    isMounting: boolean;
+  }
+  const TransitionGroupContext: React.Context<TransitionGroupContextValue | null>;
+  export default TransitionGroupContext;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "9.1.1",
+  "version": "9.1.2",
   "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.",
   "license": "MIT",
@@ -33,8 +33,8 @@
     "prop-types": "^15.8.1",
     "react-is": "^19.2.6",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^9.1.1",
-    "@mui/system": "^9.1.1",
+    "@mui/system": "^9.1.2",
+    "@mui/core-downloads-tracker": "^9.1.2",
     "@mui/types": "^9.1.1",
     "@mui/utils": "^9.1.1"
   },
@@ -67,6 +67,9 @@
   "engines": {
     "node": ">=14.0.0"
   },
+  "browser": {
+    "react-transition-group/cjs/TransitionGroupContext.js": "react-transition-group/esm/TransitionGroupContext.js"
+  },
   "pigment-css": {
     "vite": {
       "include": [

package/useAutocomplete/useAutocomplete.js

@@ -267,6 +267,7 @@ function useAutocomplete(props) {
   // Ensure the focusedItem is never inconsistent
   React.useEffect(() => {
     if (multiple && focusedItem > value.length - 1) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setFocusedItem(-1);
       focusItem(-1);
     }
@@ -853,13 +854,13 @@ function useAutocomplete(props) {
           break;
         case 'Enter':
           {
-            // In freeSolo, only select the highlighted option if the user hasn't
-            // typed new text (inputPristine) or explicitly interacted with an option
-            // (keyboard, mouse, or touch — any non-null reason). This lets typed
-            // text win over a programmatic highlight (reason=null, e.g. from
-            // syncHighlightedIndex matching a previous value) while still honoring
-            // deliberate user interactions like hovering a suggestion then pressing Enter.
-            const shouldSelectHighlighted = !freeSolo || inputPristine || highlightReasonRef.current !== null;
+            // In freeSolo, once the user has typed new text, Enter should commit that text instead
+            // of treating a programmatic highlight as an intentional selection. Programmatic
+            // highlights include autoHighlight and syncHighlightedIndex matching a previous value.
+            const hasProgrammaticHighlight = popupOpen && highlightedIndexRef.current !== -1 && highlightReasonRef.current === null;
+            const shouldCommitFreeSoloOverProgrammaticHighlight = freeSolo && !inputPristine && hasProgrammaticHighlight;
+            const shouldSelectHighlighted = !freeSolo || inputPristine || !hasProgrammaticHighlight;
+            const shouldPreventSubmitAfterFreeSoloCommit = shouldCommitFreeSoloOverProgrammaticHighlight && !touchScrolledRef.current;
             if (highlightedIndexRef.current !== -1 && popupOpen && shouldSelectHighlighted &&
             // After a touch-scroll the highlight is stale (the user scrolled
             // past it), so skip selection until the next deliberate interaction.
@@ -879,8 +880,8 @@ function useAutocomplete(props) {
                 inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
               }
             } else if (freeSolo && inputValue !== '' && inputValueIsSelectedValue === false) {
-              if (multiple) {
-                // Allow people to add new values before they submit the form.
+              if (multiple || shouldPreventSubmitAfterFreeSoloCommit) {
+                // Allow people to commit the freeSolo value before they submit the form.
                 event.preventDefault();
               }
               selectNewValue(event, inputValue, 'createOption', 'freeSolo');

package/useAutocomplete/useAutocomplete.mjs

@@ -259,6 +259,7 @@ function useAutocomplete(props) {
   // Ensure the focusedItem is never inconsistent
   React.useEffect(() => {
     if (multiple && focusedItem > value.length - 1) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setFocusedItem(-1);
       focusItem(-1);
     }
@@ -845,13 +846,13 @@ function useAutocomplete(props) {
           break;
         case 'Enter':
           {
-            // In freeSolo, only select the highlighted option if the user hasn't
-            // typed new text (inputPristine) or explicitly interacted with an option
-            // (keyboard, mouse, or touch — any non-null reason). This lets typed
-            // text win over a programmatic highlight (reason=null, e.g. from
-            // syncHighlightedIndex matching a previous value) while still honoring
-            // deliberate user interactions like hovering a suggestion then pressing Enter.
-            const shouldSelectHighlighted = !freeSolo || inputPristine || highlightReasonRef.current !== null;
+            // In freeSolo, once the user has typed new text, Enter should commit that text instead
+            // of treating a programmatic highlight as an intentional selection. Programmatic
+            // highlights include autoHighlight and syncHighlightedIndex matching a previous value.
+            const hasProgrammaticHighlight = popupOpen && highlightedIndexRef.current !== -1 && highlightReasonRef.current === null;
+            const shouldCommitFreeSoloOverProgrammaticHighlight = freeSolo && !inputPristine && hasProgrammaticHighlight;
+            const shouldSelectHighlighted = !freeSolo || inputPristine || !hasProgrammaticHighlight;
+            const shouldPreventSubmitAfterFreeSoloCommit = shouldCommitFreeSoloOverProgrammaticHighlight && !touchScrolledRef.current;
             if (highlightedIndexRef.current !== -1 && popupOpen && shouldSelectHighlighted &&
             // After a touch-scroll the highlight is stale (the user scrolled
             // past it), so skip selection until the next deliberate interaction.
@@ -871,8 +872,8 @@ function useAutocomplete(props) {
                 inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
               }
             } else if (freeSolo && inputValue !== '' && inputValueIsSelectedValue === false) {
-              if (multiple) {
-                // Allow people to add new values before they submit the form.
+              if (multiple || shouldPreventSubmitAfterFreeSoloCommit) {
+                // Allow people to commit the freeSolo value before they submit the form.
                 event.preventDefault();
               }
               selectNewValue(event, inputValue, 'createOption', 'freeSolo');

package/useScrollTrigger/useScrollTrigger.js

@@ -36,6 +36,7 @@ function useScrollTrigger(options = {}) {
   const [trigger, setTrigger] = React.useState(() => getTrigger(store, other));
   React.useEffect(() => {
     if (target === null) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       return setTrigger(false);
     }
     const handleScroll = () => {

package/useScrollTrigger/useScrollTrigger.mjs

@@ -30,6 +30,7 @@ export default function useScrollTrigger(options = {}) {
   const [trigger, setTrigger] = React.useState(() => getTrigger(store, other));
   React.useEffect(() => {
     if (target === null) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       return setTrigger(false);
     }
     const handleScroll = () => {

package/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 = "9.1.1";
+const version = exports.version = "9.1.2";
 const major = exports.major = Number("9");
 const minor = exports.minor = Number("1");
-const patch = exports.patch = Number("1");
+const patch = exports.patch = Number("2");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package/version/index.mjs

@@ -1,6 +1,6 @@
-export const version = "9.1.1";
+export const version = "9.1.2";
 export const major = Number("9");
 export const minor = Number("1");
-export const patch = Number("1");
+export const patch = Number("2");
 export const prerelease = undefined;
 export default version;