@mui/material 9.1.0 → 9.1.2

package/Autocomplete/Autocomplete.d.mts

@@ -171,7 +171,11 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    */
   forcePopupIcon?: true | false | 'auto' | undefined;
   /**
-   * If `true`, the input will take up the full width of its container.
+   * If `true`, the input takes up the full width of its container.
+   *
+   * `Autocomplete` treats `undefined` and `false` differently.
+   * If `undefined`, the inner input takes up the full width of its container.
+   * If `false`, the inner input is restricted to its intrinsic width.
    * @default false
    */
   fullWidth?: boolean | undefined;

package/Autocomplete/Autocomplete.d.ts

@@ -171,7 +171,11 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    */
   forcePopupIcon?: true | false | 'auto' | undefined;
   /**
-   * If `true`, the input will take up the full width of its container.
+   * If `true`, the input takes up the full width of its container.
+   *
+   * `Autocomplete` treats `undefined` and `false` differently.
+   * If `undefined`, the inner input takes up the full width of its container.
+   * If `false`, the inner input is restricted to its intrinsic width.
    * @default false
    */
   fullWidth?: boolean | undefined;

package/Autocomplete/Autocomplete.js

@@ -944,7 +944,11 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    */
   freeSolo: _propTypes.default.bool,
   /**
-   * If `true`, the input will take up the full width of its container.
+   * If `true`, the input takes up the full width of its container.
+   *
+   * `Autocomplete` treats `undefined` and `false` differently.
+   * If `undefined`, the inner input takes up the full width of its container.
+   * If `false`, the inner input is restricted to its intrinsic width.
    * @default false
    */
   fullWidth: _propTypes.default.bool,

package/Autocomplete/Autocomplete.mjs

@@ -932,7 +932,11 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    */
   freeSolo: PropTypes.bool,
   /**
-   * If `true`, the input will take up the full width of its container.
+   * If `true`, the input takes up the full width of its container.
+   *
+   * `Autocomplete` treats `undefined` and `false` differently.
+   * If `undefined`, the inner input takes up the full width of its container.
+   * If `false`, the inner input is restricted to its intrinsic width.
    * @default false
    */
   fullWidth: PropTypes.bool,

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/ButtonBase/TouchRipple.js

@@ -212,6 +212,23 @@ const TouchRippleRipple = exports.TouchRippleRipple = (0, _zeroStyled.styled)(_R
     transform: scale(1);
   }
 
+  /*
+   * Order matters: 'child', 'childLeaving' and 'childPulsate' apply to the same
+   * element with equal specificity, so the later rule wins. 'child' must come
+   * before 'childLeaving' so the leaving 'opacity: 0' takes precedence. A focus
+   * (pulsate) ripple keeps 'pulsateKeyframe' (no opacity animation) on exit, so
+   * it relies on this static 'opacity: 0' to disappear on blur instead of
+   * lingering until removal.
+   */
+  & .${_touchRippleClasses.default.child} {
+    opacity: 1;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+
   & .${_touchRippleClasses.default.childLeaving} {
     opacity: 0;
   }
@@ -226,15 +243,6 @@ const TouchRippleRipple = exports.TouchRippleRipple = (0, _zeroStyled.styled)(_R
   ${({
   theme
 }) => getAnimationStyles(theme)}
-
-  & .${_touchRippleClasses.default.child} {
-    opacity: 1;
-    display: block;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: currentColor;
-  }
 `;
 
 /**

package/ButtonBase/TouchRipple.mjs

@@ -205,6 +205,23 @@ export const TouchRippleRipple = styled(Ripple, {
     transform: scale(1);
   }
 
+  /*
+   * Order matters: 'child', 'childLeaving' and 'childPulsate' apply to the same
+   * element with equal specificity, so the later rule wins. 'child' must come
+   * before 'childLeaving' so the leaving 'opacity: 0' takes precedence. A focus
+   * (pulsate) ripple keeps 'pulsateKeyframe' (no opacity animation) on exit, so
+   * it relies on this static 'opacity: 0' to disappear on blur instead of
+   * lingering until removal.
+   */
+  & .${touchRippleClasses.child} {
+    opacity: 1;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+
   & .${touchRippleClasses.childLeaving} {
     opacity: 0;
   }
@@ -219,15 +236,6 @@ export const TouchRippleRipple = styled(Ripple, {
   ${({
   theme
 }) => getAnimationStyles(theme)}
-
-  & .${touchRippleClasses.child} {
-    opacity: 1;
-    display: block;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: currentColor;
-  }
 `;
 
 /**

package/CHANGELOG.md

@@ -1,5 +1,79 @@
 # [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 -->
+
+_Jun 11, 2026_
+
+A big thanks to the 9 contributors who made this release possible.
+
+### `@mui/material@9.1.1`
+
+- [Autocomplete] Update fullWidth prop documentation (#48626) @vipin8797
+- [ButtonBase] Fix focus ripple lingering after blur (#48650) @siriwatknp
+- [InitColorSchemeScript] Server-render in tests for React 19.3 (#48604) @Janpot
+- [Transition] Mount child in same commit when opening from unmounted (#48649) @siriwatknp
+
+### `@mui/styled-engine@9.1.1`
+
+- [styled-engine] Prevent enableCssLayer styles from being overridden by unlayered styles (#48603) @Janpot
+
+### Docs
+
+- Send SOURCE to Brevo on newsletter subscribe (#48633) @aemartos
+- fix TypeScript heading capitalization (#48619) @ifer47
+- Remove outdated security section (#48628) @oliviertassinari
+- [legal] Update EULA links on website (#48642) @rluzists1
+
+### Core
+
+- Update dependencies to resolve Dependabot security alerts (#48641) @Janpot
+- [core-docs] Pin StackBlitz demo vite to v7 and plugin-react to v5 (#48643) @Janpot
+- [code-infra] Port codebase to use tsgo (#48616) @brijeshb42
+- [docs-infra] Fix immutable cache headers for /\_next/static assets (#48655) @brijeshb42
+- [docs-infra] Run link checker during docs build instead of as separate CI step (#48634) @Janpot
+- [docs-infra] Support turbopack for docs (#48569) @brijeshb42
+- [test] Cover docs landing-page composites with Argos (#48589) @LukasTy
+
+All contributors of this release in alphabetical order: @aemartos, @brijeshb42, @ifer47, @Janpot, @LukasTy, @oliviertassinari, @rluzists1, @siriwatknp, @vipin8797
+
 ## 9.1.0
 
 <!-- generated comparing v9.0.1..master -->

package/InitColorSchemeScript/InitColorSchemeScript.d.mts

@@ -1,9 +1,9 @@
 export declare const defaultConfig: {
-  readonly attribute: "data-mui-color-scheme";
-  readonly colorSchemeStorageKey: "mui-color-scheme";
-  readonly defaultLightColorScheme: "light";
-  readonly defaultDarkColorScheme: "dark";
-  readonly modeStorageKey: "mui-mode";
+  readonly attribute: 'data-mui-color-scheme';
+  readonly colorSchemeStorageKey: 'mui-color-scheme';
+  readonly defaultLightColorScheme: 'light';
+  readonly defaultDarkColorScheme: 'dark';
+  readonly modeStorageKey: 'mui-mode';
 };
 export interface InitColorSchemeScriptProps {
   /**

package/InitColorSchemeScript/InitColorSchemeScript.d.ts

@@ -1,9 +1,9 @@
 export declare const defaultConfig: {
-  readonly attribute: "data-mui-color-scheme";
-  readonly colorSchemeStorageKey: "mui-color-scheme";
-  readonly defaultLightColorScheme: "light";
-  readonly defaultDarkColorScheme: "dark";
-  readonly modeStorageKey: "mui-mode";
+  readonly attribute: 'data-mui-color-scheme';
+  readonly colorSchemeStorageKey: 'mui-color-scheme';
+  readonly defaultLightColorScheme: 'light';
+  readonly defaultDarkColorScheme: 'dark';
+  readonly modeStorageKey: 'mui-mode';
 };
 export interface InitColorSchemeScriptProps {
   /**

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/Select/utils/SelectFocusSourceContext.d.mts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-declare function useSelectFocusSource(): "touch" | "mouse" | "keyboard" | null;
-declare const SelectFocusSourceProvider: React.Provider<"touch" | "mouse" | "keyboard" | null>;
+declare function useSelectFocusSource(): "keyboard" | "mouse" | "touch" | null;
+declare const SelectFocusSourceProvider: React.Provider<"keyboard" | "mouse" | "touch" | null>;
 export { useSelectFocusSource, SelectFocusSourceProvider };

package/Select/utils/SelectFocusSourceContext.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-declare function useSelectFocusSource(): "touch" | "mouse" | "keyboard" | null;
-declare const SelectFocusSourceProvider: React.Provider<"touch" | "mouse" | "keyboard" | null>;
+declare function useSelectFocusSource(): "keyboard" | "mouse" | "touch" | null;
+declare const SelectFocusSourceProvider: React.Provider<"keyboard" | "mouse" | "touch" | null>;
 export { useSelectFocusSource, SelectFocusSourceProvider };

package/Slider/SliderValueLabel.d.mts

@@ -7,7 +7,7 @@ declare function SliderValueLabel(props: SliderValueLabelProps): React.ReactElem
   className?: string | undefined;
   children?: React.ReactNode;
 }, string | React.JSXElementConstructor<any>> | null;
+export default SliderValueLabel;
 declare namespace SliderValueLabel {
   var propTypes: any;
-}
-export default SliderValueLabel;
+}

package/Slider/SliderValueLabel.d.ts

@@ -7,7 +7,7 @@ declare function SliderValueLabel(props: SliderValueLabelProps): React.ReactElem
   className?: string | undefined;
   children?: React.ReactNode;
 }, string | React.JSXElementConstructor<any>> | null;
+export default SliderValueLabel;
 declare namespace SliderValueLabel {
   var propTypes: any;
-}
-export default SliderValueLabel;
+}

package/Step/StepContext.d.mts

@@ -11,7 +11,7 @@ export interface StepContextType {
 /**
  * Provides information about the current step in Stepper.
  */
-declare const StepContext: React.Context<{} | StepContextType>;
+declare const StepContext: React.Context<StepContextType | {}>;
 /**
  * Returns the current StepContext or an empty object if no StepContext
  * has been defined in the component tree.

package/Step/StepContext.d.ts

@@ -11,7 +11,7 @@ export interface StepContextType {
 /**
  * Provides information about the current step in Stepper.
  */
-declare const StepContext: React.Context<{} | StepContextType>;
+declare const StepContext: React.Context<StepContextType | {}>;
 /**
  * Returns the current StepContext or an empty object if no StepContext
  * has been defined in the component tree.

package/Stepper/StepperContext.d.mts

@@ -11,7 +11,7 @@ export interface StepperContextType {
 /**
  * Provides information about the current step in Stepper.
  */
-declare const StepperContext: React.Context<{} | StepperContextType>;
+declare const StepperContext: React.Context<StepperContextType | {}>;
 /**
  * Returns the current StepperContext or an empty object if no StepperContext
  * has been defined in the component tree.

package/Stepper/StepperContext.d.ts

@@ -11,7 +11,7 @@ export interface StepperContextType {
 /**
  * Provides information about the current step in Stepper.
  */
-declare const StepperContext: React.Context<{} | StepperContextType>;
+declare const StepperContext: React.Context<StepperContextType | {}>;
 /**
  * Returns the current StepperContext or an empty object if no StepperContext
  * has been defined in the component tree.

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.0
+ * @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.0
+ * @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) {
@@ -100,6 +103,16 @@ function Transition(props) {
   });
   const statusRef = React.useRef(status);
   statusRef.current = status;
+
+  // Opening from `unmounted`: mount the child in the same commit that `in` turns
+  // true so its ref is attached before effects run. react-transition-group did
+  // this by deriving the status from props during render; handling it in a
+  // layout effect instead would add a commit where the child is still null,
+  // breaking consumers that read the ref right after `in` flips.
+  if (inProp && status === 'unmounted') {
+    statusRef.current = 'exited';
+    setStatus('exited');
+  }
   const shouldAppearOnMountRef = React.useRef(inProp && shouldEnterOnMount);
   const mountedRef = React.useRef(false);
   const nextCallbackRef = React.useRef(null);
@@ -284,7 +297,8 @@ function Transition(props) {
   }, [cancelPendingCallback, updateStatus]);
 
   // Reconcile the rendered status after `in` or status changes:
-  // - opening from unmounted first renders the child as exited so refs exist.
+  // - opening from unmounted is handled during render (see above) so the child
+  //   is committed as exited with its ref attached before this effect runs.
   // - unmountOnExit removes the child after the exited state commits.
   // This matches react-transition-group's observable status steps without
   // running work after unrelated commits.
@@ -294,12 +308,7 @@ function Transition(props) {
     }
     const current = statusRef.current;
     if (inProp) {
-      if (current === 'unmounted') {
-        // Opening from unmounted needs one render with the child present so
-        // refs are attached before the enter animation starts.
-        statusRef.current = 'exited';
-        setStatus('exited');
-      } else if (current !== 'entering' && current !== 'entered') {
+      if (current !== 'entering' && current !== 'entered') {
         updateStatus(false, 'entering');
       }
     } else if (current === 'entering' || current === 'entered') {

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) {
@@ -92,6 +95,16 @@ function Transition(props) {
   });
   const statusRef = React.useRef(status);
   statusRef.current = status;
+
+  // Opening from `unmounted`: mount the child in the same commit that `in` turns
+  // true so its ref is attached before effects run. react-transition-group did
+  // this by deriving the status from props during render; handling it in a
+  // layout effect instead would add a commit where the child is still null,
+  // breaking consumers that read the ref right after `in` flips.
+  if (inProp && status === 'unmounted') {
+    statusRef.current = 'exited';
+    setStatus('exited');
+  }
   const shouldAppearOnMountRef = React.useRef(inProp && shouldEnterOnMount);
   const mountedRef = React.useRef(false);
   const nextCallbackRef = React.useRef(null);
@@ -276,7 +289,8 @@ function Transition(props) {
   }, [cancelPendingCallback, updateStatus]);
 
   // Reconcile the rendered status after `in` or status changes:
-  // - opening from unmounted first renders the child as exited so refs exist.
+  // - opening from unmounted is handled during render (see above) so the child
+  //   is committed as exited with its ref attached before this effect runs.
   // - unmountOnExit removes the child after the exited state commits.
   // This matches react-transition-group's observable status steps without
   // running work after unrelated commits.
@@ -286,12 +300,7 @@ function Transition(props) {
     }
     const current = statusRef.current;
     if (inProp) {
-      if (current === 'unmounted') {
-        // Opening from unmounted needs one render with the child present so
-        // refs are attached before the enter animation starts.
-        statusRef.current = 'exited';
-        setStatus('exited');
-      } else if (current !== 'entering' && current !== 'entered') {
+      if (current !== 'entering' && current !== 'entered') {
         updateStatus(false, 'entering');
       }
     } else if (current === 'entering' || current === 'entered') {

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.0",
+  "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,10 +33,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^19.2.6",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^9.1.0",
-    "@mui/types": "^9.0.0",
-    "@mui/utils": "^9.1.0",
-    "@mui/system": "^9.1.0"
+    "@mui/system": "^9.1.2",
+    "@mui/core-downloads-tracker": "^9.1.2",
+    "@mui/types": "^9.1.1",
+    "@mui/utils": "^9.1.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -44,7 +44,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": "^9.1.0"
+    "@mui/material-pigment-css": "^9.1.1"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -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/styles/ThemeProviderWithVars.d.mts

@@ -27,19 +27,19 @@ declare const getInitColorSchemeScript: typeof deprecatedGetInitColorSchemeScrip
  */
 export declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
   theme?: {
-    cssVariables?: false | undefined;
-    cssVarPrefix?: string | undefined;
-    colorSchemes: Partial<Record<SupportedColorScheme, any>>;
-    colorSchemeSelector?: "media" | "class" | "data" | string | undefined;
-  } | {
     $$material: {
       cssVariables?: false | undefined;
       cssVarPrefix?: string | undefined;
       colorSchemes: Partial<Record<SupportedColorScheme, any>>;
-      colorSchemeSelector?: "media" | "class" | "data" | string | undefined;
+      colorSchemeSelector?: 'media' | 'class' | 'data' | string | undefined;
     };
+  } | {
+    cssVariables?: false | undefined;
+    cssVarPrefix?: string | undefined;
+    colorSchemes: Partial<Record<SupportedColorScheme, any>>;
+    colorSchemeSelector?: 'media' | 'class' | 'data' | string | undefined;
   } | undefined;
-  defaultMode?: "light" | "dark" | "system" | undefined;
+  defaultMode?: 'light' | 'dark' | 'system' | undefined;
   documentNode?: Document | null | undefined;
   colorSchemeNode?: Element | null | undefined;
   storageManager?: import("@mui/system").StorageManager | null | undefined;

package/styles/ThemeProviderWithVars.d.ts

@@ -27,19 +27,19 @@ declare const getInitColorSchemeScript: typeof deprecatedGetInitColorSchemeScrip
  */
 export declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
   theme?: {
-    cssVariables?: false | undefined;
-    cssVarPrefix?: string | undefined;
-    colorSchemes: Partial<Record<SupportedColorScheme, any>>;
-    colorSchemeSelector?: "media" | "class" | "data" | string | undefined;
-  } | {
     $$material: {
       cssVariables?: false | undefined;
       cssVarPrefix?: string | undefined;
       colorSchemes: Partial<Record<SupportedColorScheme, any>>;
-      colorSchemeSelector?: "media" | "class" | "data" | string | undefined;
+      colorSchemeSelector?: 'media' | 'class' | 'data' | string | undefined;
     };
+  } | {
+    cssVariables?: false | undefined;
+    cssVarPrefix?: string | undefined;
+    colorSchemes: Partial<Record<SupportedColorScheme, any>>;
+    colorSchemeSelector?: 'media' | 'class' | 'data' | string | undefined;
   } | undefined;
-  defaultMode?: "light" | "dark" | "system" | undefined;
+  defaultMode?: 'light' | 'dark' | 'system' | undefined;
   documentNode?: Document | null | undefined;
   colorSchemeNode?: Element | null | undefined;
   storageManager?: import("@mui/system").StorageManager | null | undefined;

package/styles/createGetSelector.d.mts

@@ -1,10 +1,10 @@
 declare const _default: <T extends {
   rootSelector?: string | undefined;
-  colorSchemeSelector?: "media" | "class" | "data" | string | undefined;
+  colorSchemeSelector?: 'media' | 'class' | 'data' | string | undefined;
   colorSchemes?: Record<string, any> | undefined;
   defaultColorScheme?: string | undefined;
   cssVarPrefix?: string | undefined;
-}>(theme: T) => (colorScheme: keyof T["colorSchemes"] | undefined, css: Record<string, any>) => string | {
+}>(theme: T) => (colorScheme: keyof T['colorSchemes'] | undefined, css: Record<string, any>) => string | {
   [x: string]: Record<string, any>;
   "@media (prefers-color-scheme: dark)": {
     [x: string]: Record<string, any>;

package/styles/createGetSelector.d.ts

@@ -1,10 +1,10 @@
 declare const _default: <T extends {
   rootSelector?: string | undefined;
-  colorSchemeSelector?: "media" | "class" | "data" | string | undefined;
+  colorSchemeSelector?: 'media' | 'class' | 'data' | string | undefined;
   colorSchemes?: Record<string, any> | undefined;
   defaultColorScheme?: string | undefined;
   cssVarPrefix?: string | undefined;
-}>(theme: T) => (colorScheme: keyof T["colorSchemes"] | undefined, css: Record<string, any>) => string | {
+}>(theme: T) => (colorScheme: keyof T['colorSchemes'] | undefined, css: Record<string, any>) => string | {
   [x: string]: Record<string, any>;
   "@media (prefers-color-scheme: dark)": {
     [x: string]: Record<string, any>;

package/styles/identifier.d.mts

@@ -1,2 +1,2 @@
-declare const _default: "$$material";
+declare const _default = "$$material";
 export default _default;

package/styles/identifier.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "$$material";
+declare const _default = "$$material";
 export default _default;

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/utils/memoTheme.d.mts

@@ -3,5 +3,5 @@ declare const memoTheme: (styleFn: (props: {
   theme: Theme;
 }) => import("@mui/styled-engine").CSSInterpolation) => (props: {
   theme: Theme;
-}) => string | number | boolean | import("@mui/styled-engine").ComponentSelector | import("@mui/styled-engine").Keyframes | import("@mui/styled-engine").SerializedStyles | import("@mui/styled-engine").CSSObject | import("@mui/styled-engine").ArrayCSSInterpolation | null;
+}) => string | number | boolean | import("@mui/styled-engine").ArrayCSSInterpolation | import("@mui/styled-engine").CSSObject | import("@mui/styled-engine").ComponentSelector | import("@mui/styled-engine").SerializedStyles | import("@mui/styled-engine").Keyframes | null;
 export default memoTheme;

package/utils/memoTheme.d.ts

@@ -3,5 +3,5 @@ declare const memoTheme: (styleFn: (props: {
   theme: Theme;
 }) => import("@mui/styled-engine").CSSInterpolation) => (props: {
   theme: Theme;
-}) => string | number | boolean | import("@mui/styled-engine").ComponentSelector | import("@mui/styled-engine").Keyframes | import("@mui/styled-engine").SerializedStyles | import("@mui/styled-engine").CSSObject | import("@mui/styled-engine").ArrayCSSInterpolation | null;
+}) => string | number | boolean | import("@mui/styled-engine").ArrayCSSInterpolation | import("@mui/styled-engine").CSSObject | import("@mui/styled-engine").ComponentSelector | import("@mui/styled-engine").SerializedStyles | import("@mui/styled-engine").Keyframes | null;
 export default memoTheme;

package/utils/useSlot.d.mts

@@ -77,5 +77,5 @@ name: T, parameters: (T extends 'root' ? {
 }): [ElementType, {
   className: string;
   ownerState: OwnerState & SlotOwnerState;
-} & AdditionalProps & SlotProps & ExternalSlotProps & ExtractComponentProps<Exclude<Exclude<ExternalForwardedProps["slotProps"], undefined>[T], undefined>>];
+} & AdditionalProps & SlotProps & ExternalSlotProps & ExtractComponentProps<Exclude<Exclude<ExternalForwardedProps['slotProps'], undefined>[T], undefined>>];
 export {};

package/utils/useSlot.d.ts

@@ -77,5 +77,5 @@ name: T, parameters: (T extends 'root' ? {
 }): [ElementType, {
   className: string;
   ownerState: OwnerState & SlotOwnerState;
-} & AdditionalProps & SlotProps & ExternalSlotProps & ExtractComponentProps<Exclude<Exclude<ExternalForwardedProps["slotProps"], undefined>[T], undefined>>];
+} & AdditionalProps & SlotProps & ExternalSlotProps & ExtractComponentProps<Exclude<Exclude<ExternalForwardedProps['slotProps'], undefined>[T], undefined>>];
 export {};

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