@mui/material 7.3.6 → 7.3.7

package/Accordion/Accordion.d.ts

@@ -75,12 +75,12 @@ export interface AccordionOwnProps {
    */
   disabled?: boolean;
   /**
-   * If `true`, it removes the margin between two expanded accordion items and the increase of height.
+   * If `true`, it removes the margin between two expanded accordion items and prevents the increased height when expanded.
    * @default false
    */
   disableGutters?: boolean;
   /**
-   * If `true`, expands the accordion, otherwise collapse it.
+   * If `true`, expands the accordion, otherwise collapses it.
    * Setting this prop enables control over the accordion.
    */
   expanded?: boolean;

package/Accordion/Accordion.js

@@ -149,7 +149,6 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     disableGutters = false,
     expanded: expandedProp,
     onChange,
-    square = false,
     slots = {},
     slotProps = {},
     TransitionComponent: TransitionComponentProp,
@@ -177,7 +176,6 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
   }), [expanded, disabled, disableGutters, handleChange]);
   const ownerState = {
     ...props,
-    square,
     disabled,
     disableGutters,
     expanded
@@ -204,10 +202,7 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     className: (0, _clsx.default)(classes.root, className),
     shouldForwardComponentProp: true,
     ownerState,
-    ref,
-    additionalProps: {
-      square
-    }
+    ref
   });
   const [AccordionHeadingSlot, accordionProps] = (0, _useSlot.default)('heading', {
     elementType: AccordionHeading,
@@ -287,12 +282,12 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    */
   disabled: _propTypes.default.bool,
   /**
-   * If `true`, it removes the margin between two expanded accordion items and the increase of height.
+   * If `true`, it removes the margin between two expanded accordion items and prevents the increased height when expanded.
    * @default false
    */
   disableGutters: _propTypes.default.bool,
   /**
-   * If `true`, expands the accordion, otherwise collapse it.
+   * If `true`, expands the accordion, otherwise collapses it.
    * Setting this prop enables control over the accordion.
    */
   expanded: _propTypes.default.bool,
@@ -323,11 +318,6 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
     root: _propTypes.default.elementType,
     transition: _propTypes.default.elementType
   }),
-  /**
-   * If `true`, rounded corners are disabled.
-   * @default false
-   */
-  square: _propTypes.default.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Alert/Alert.js

@@ -237,7 +237,7 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
     ...rootSlotProps,
     children: [icon !== false ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconSlot, {
       ...iconSlotProps,
-      children: icon || iconMapping[severity] || defaultIconMapping[severity]
+      children: icon || iconMapping[severity]
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(MessageSlot, {
       ...messageSlotProps,
       children: children

package/AppBar/AppBar.js

@@ -108,7 +108,8 @@ const AppBarRoot = (0, _zeroStyled.styled)(_Paper.default, {
       color: 'inherit'
     },
     style: {
-      '--AppBar-color': 'inherit'
+      '--AppBar-color': 'inherit',
+      color: 'var(--AppBar-color)'
     }
   }, {
     props: {

package/Backdrop/Backdrop.js

@@ -114,7 +114,6 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, {
       "aria-hidden": true,
       ...rootProps,
-      classes: classes,
       ref: ref,
       children: children
     })

package/ButtonGroup/ButtonGroup.js

@@ -76,7 +76,13 @@ const ButtonGroupRoot = (0, _zeroStyled.styled)('div', {
       variant: 'contained'
     },
     style: {
-      boxShadow: (theme.vars || theme).shadows[2]
+      boxShadow: (theme.vars || theme).shadows[2],
+      [`& .${_buttonGroupClasses.default.grouped}`]: {
+        boxShadow: 'none',
+        '&:hover': {
+          boxShadow: 'none'
+        }
+      }
     }
   }, {
     props: {
@@ -227,16 +233,7 @@ const ButtonGroupRoot = (0, _zeroStyled.styled)('div', {
     }
   }))],
   [`& .${_buttonGroupClasses.default.grouped}`]: {
-    minWidth: 40,
-    boxShadow: 'none',
-    props: {
-      variant: 'contained'
-    },
-    style: {
-      '&:hover': {
-        boxShadow: 'none'
-      }
-    }
+    minWidth: 40
   }
 })));
 const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, ref) {

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.3.7
+
+<!-- generated comparing v7.3.6..master -->
+
+_Jan 8, 2026_
+
+A big thanks to the 16 contributors who made this release possible.
+
+### `@mui/material@7.3.7`
+
+- [accordion] Remove unnecessary handling of `square` prop on Accordion Root (#47457) @ZeeshanTamboli
+- [alert] Remove unnecessary default icon mapping fallback (#47460) @ZeeshanTamboli
+- [appbar] Fix inherit color CSS variable not getting applied (#47518) @ZeeshanTamboli
+- [autocomplete] Fix `ArrowLeft`, `Backspace` & `Delete` behavior for multiple and single-value rendering with proper caret handling (#47411) @jnbain
+- [backdrop] Remove unnecessary passing of `classes` from root slot (#47519) @ZeeshanTamboli
+- [button-group] Fix styles when variant is `contained` (#47499) @ZeeshanTamboli
+- [card-action-area] Remove incorrect root ref being forwarded to focus highlight component (#47523) @ZeeshanTamboli
+- [checkbox] Fix readonly checkboxes (#47503) @mj12albert
+- [click-away-listener] Tighten the parameter type of createHandleSynthetic method (#47525) @ZeeshanTamboli
+- [dialog] Fix backdrop theme style overrides (#47544) @ZeeshanTamboli
+- [focus-trap] Compute `activeElement` inside `loopFocus` on every keydown (#47566) @ZeeshanTamboli
+- [modal] Take non-integer padding-right into consideration when scroll locking (#47420) @Zache
+- [select] Fix dropdown width does not match trigger width on window resize (#47526) @AarishMansur
+- [tabs] Fix passing incorrect slot name props (scrollButton → scrollButtons) (#47215) @rithik56
+
+### Docs
+
+- [card] Fix key warning (#47524) @ZeeshanTamboli
+- [dialog] Replace TranstionProps with slotProps.transition (#47569) @sai6855
+- [number-field] Use stable Base UI package (#47504) @siriwatknp
+- [snackbar] Replace TransitionComponent with slots.transition (#47570) @sai6855
+- Fix incorrect indentation in migration guide (#47571) @sai6855
+- Enable MUI chat on Material UI demos (#46837) @siriwatknp
+- Add docs and website banner for Dev survey'25 (#47521) @prakhargupta1
+- Update Tailwind CSS v4 + Next.js Pages Router docs (#47546) @atharva3333
+- Add warning callout to Sync plugin doc (#47511) @mapache-salvaje
+- Update typo in TailwindCSS v4 integration with Next.js docs (#47512) @TimKraemer
+- Fix link to contributing guide (#47473) @oliviertassinari
+- Improve description of Accordion props (#47459) @ZeeshanTamboli
+
+### Core
+
+- [blog] Whats new since MUI X v8 [DX-51] (#47140) @joserodolfofreitas
+- [code-infra] Fix React@next CI job (#47493) @Janpot
+- [code-infra] Move font loading to @mui/docs (#47385) @Janpot
+- [code-infra] Fix CI for React 18 (#47560) @Janpot
+- [code-infra] Prevent legacy browsers tests from updating (#47496) @Janpot
+- [code-infra] Move `@mui/internal-test-utils` to code infra repo (#47422) @Janpot
+- [code-infra] Fix React@next CI job (#47493) @Janpot
+- [examples] Update Next.js versions to v16 in Next.js examples (DX-57) (#47453) @alelthomas
+- [internal] Bump Next.js & React version to avoid security vulnerability (#47427) @oliviertassinari
+- [test] Use plain playwright for e2e (#47410) @mj12albert
+- [test] Fix react-18 tests (#47407) @Janpot
+
+All contributors of this release in alphabetical order: @AarishMansur, @alelthomas, @atharva3333, @bricefrisco, @Janpot, @jnbain, @joserodolfofreitas, @mapache-salvaje, @mj12albert, @oliviertassinari, @prakhargupta1, @rithik56, @siriwatknp, @TimKraemer, @Zache, @ZeeshanTamboli
+
 ## 7.3.6
 
 <!-- generated comparing v7.3.5..master -->
@@ -753,7 +809,7 @@ A big thanks to the 7 contributors who made this release possible.
 - Fix `Grid`, `GridLegacy`, `Stack`, `Badge`, `Select`, `Autocomplete` demos CSS variables (#45693) @DiegoAndai
 - Add "Material UI v7 is here" to the notifications (#45694) @DiegoAndai
 - Fix `Breadcrumbs`, `List`, `Divider`, and `Typography` dark mode demos (#45692) @siriwatknp
-- Fix Material Icons page in dark mode (#45691) @mnajdova
+- Fix Material Icons page in dark mode (#45691) @mnajdova
 
 All contributors of this release in alphabetical order: @aarongarciah, @DiegoAndai, @eduter, @Janpot, @micttyoid, @mnajdova, @siriwatknp
 

package/CardActionArea/CardActionArea.js

@@ -106,7 +106,6 @@ const CardActionArea = /*#__PURE__*/React.forwardRef(function CardActionArea(inP
     elementType: CardActionAreaFocusHighlight,
     externalForwardedProps,
     ownerState,
-    ref,
     className: classes.focusHighlight
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {

package/Dialog/Dialog.js

@@ -26,8 +26,7 @@ var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const DialogBackdrop = (0, _zeroStyled.styled)(_Backdrop.default, {
   name: 'MuiDialog',
-  slot: 'Backdrop',
-  overrides: (props, styles) => styles.backdrop
+  slot: 'Backdrop'
 })({
   // Improve scrollable dialog support.
   zIndex: -1
@@ -42,6 +41,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root'],
+    backdrop: ['backdrop'],
     container: ['container', `scroll${(0, _capitalize.default)(scroll)}`],
     paper: ['paper', `paperScroll${(0, _capitalize.default)(scroll)}`, `paperWidth${(0, _capitalize.default)(String(maxWidth))}`, fullWidth && 'paperFullWidth', fullScreen && 'paperFullScreen']
   };
@@ -292,7 +292,8 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     elementType: DialogBackdrop,
     shouldForwardComponentProp: true,
     externalForwardedProps,
-    ownerState
+    ownerState,
+    className: classes.backdrop
   });
   const [PaperSlot, paperSlotProps] = (0, _useSlot.default)('paper', {
     elementType: DialogPaper,

package/Dialog/dialogClasses.d.ts

@@ -1,6 +1,8 @@
 export interface DialogClasses {
   /** Styles applied to the root element. */
   root: string;
+  /** Styles applied to the backdrop element. */
+  backdrop: string;
   /** Styles applied to the container element if `scroll="paper"`. */
   scrollPaper: string;
   /** Styles applied to the container element if `scroll="body"`. */

package/Dialog/dialogClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getDialogUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiDialog', slot);
 }
-const dialogClasses = (0, _generateUtilityClasses.default)('MuiDialog', ['root', 'scrollPaper', 'scrollBody', 'container', 'paper', 'paperScrollPaper', 'paperScrollBody', 'paperWidthFalse', 'paperWidthXs', 'paperWidthSm', 'paperWidthMd', 'paperWidthLg', 'paperWidthXl', 'paperFullWidth', 'paperFullScreen']);
+const dialogClasses = (0, _generateUtilityClasses.default)('MuiDialog', ['root', 'backdrop', 'scrollPaper', 'scrollBody', 'container', 'paper', 'paperScrollPaper', 'paperScrollBody', 'paperWidthFalse', 'paperWidthXs', 'paperWidthSm', 'paperWidthMd', 'paperWidthLg', 'paperWidthXl', 'paperFullWidth', 'paperFullScreen']);
 var _default = exports.default = dialogClasses;

package/Modal/ModalManager.js

@@ -25,7 +25,7 @@ function ariaHidden(element, hide) {
   }
 }
 function getPaddingRight(element) {
-  return parseInt((0, _ownerWindow.default)(element).getComputedStyle(element).paddingRight, 10) || 0;
+  return parseFloat((0, _ownerWindow.default)(element).getComputedStyle(element).paddingRight) || 0;
 }
 function isAriaHiddenForbiddenOnElement(element) {
   // The forbidden HTML tags are the ones from ARIA specification that

package/README.md

@@ -33,7 +33,7 @@ Our documentation features [a collection of example projects using Material UI]
 
 ## Contributing
 
-Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.
+Read the [contributing guide](../../CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.
 
 Contributing to Material UI is about more than just issues and pull requests!
 There are many other ways to [support Material UI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base.
@@ -49,7 +49,7 @@ Future plans and high-priority features and enhancements can be found in the [ro
 ## License
 
 This project is licensed under the terms of the
-[MIT license](/LICENSE).
+[MIT license](../../LICENSE).
 
 ## Security
 

package/Select/SelectInput.js

@@ -184,6 +184,22 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     node: inputRef.current,
     value
   }), [value]);
+  const open = displayNode !== null && openState;
+  React.useEffect(() => {
+    if (!open || !anchorElement || autoWidth) {
+      return undefined;
+    }
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver(() => {
+      setMenuMinWidthState(anchorElement.clientWidth);
+    });
+    observer.observe(anchorElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [open, anchorElement, autoWidth]);
 
   // Resize menu on `defaultOpen` automatic toggle.
   React.useEffect(() => {
@@ -219,8 +235,8 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     return undefined;
   }, [labelId]);
-  const update = (open, event) => {
-    if (open) {
+  const update = (openParam, event) => {
+    if (openParam) {
       if (onOpen) {
         onOpen(event);
       }
@@ -229,7 +245,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     if (!isOpenControlled) {
       setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
-      setOpenState(open);
+      setOpenState(openParam);
     }
   };
   const handleMouseDown = event => {
@@ -316,7 +332,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onKeyDown?.(event);
     }
   };
-  const open = displayNode !== null && openState;
   const handleBlur = event => {
     // if open event.stopImmediatePropagation
     if (!open && onBlur) {

package/Tabs/Tabs.d.ts

@@ -87,7 +87,7 @@ export type TabsSlotsAndSlotProps = CreateSlotsAndSlotProps<TabsSlots, {
    */
   indicator: SlotProps<'span', TabsIndicatorSlotPropsOverrides, TabsOwnerState>;
   /**
-   * Props forwarded to the scrollButton slot.
+   * Props forwarded to the scrollButtons slot.
    * By default, the available props are based on the [TabScrollButton](https://mui.com/material-ui/api/tab-scroll-button/#props) component.
    */
   scrollButtons: SlotProps<typeof TabScrollButton, TabsScrollButtonsSlotPropsOverrides, TabsOwnerState>;

package/Tabs/Tabs.js

@@ -352,7 +352,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     slots,
     slotProps: {
       indicator: TabIndicatorProps,
-      scrollButton: TabScrollButtonProps,
+      scrollButtons: TabScrollButtonProps,
       ...slotProps
     }
   };

package/Unstable_TrapFocus/FocusTrap.js

@@ -155,12 +155,12 @@ function FocusTrap(props) {
       return;
     }
     const doc = (0, _ownerDocument.default)(rootRef.current);
-    const activeElement = (0, _getActiveElement.default)(doc);
     const loopFocus = nativeEvent => {
       lastKeydown.current = nativeEvent;
       if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
         return;
       }
+      const activeElement = (0, _getActiveElement.default)(doc);
 
       // Make sure the next tab starts from the right place.
       // activeElement refers to the origin.

package/esm/Accordion/Accordion.d.ts

@@ -75,12 +75,12 @@ export interface AccordionOwnProps {
    */
   disabled?: boolean;
   /**
-   * If `true`, it removes the margin between two expanded accordion items and the increase of height.
+   * If `true`, it removes the margin between two expanded accordion items and prevents the increased height when expanded.
    * @default false
    */
   disableGutters?: boolean;
   /**
-   * If `true`, expands the accordion, otherwise collapse it.
+   * If `true`, expands the accordion, otherwise collapses it.
    * Setting this prop enables control over the accordion.
    */
   expanded?: boolean;

package/esm/Accordion/Accordion.js

@@ -142,7 +142,6 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     disableGutters = false,
     expanded: expandedProp,
     onChange,
-    square = false,
     slots = {},
     slotProps = {},
     TransitionComponent: TransitionComponentProp,
@@ -170,7 +169,6 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
   }), [expanded, disabled, disableGutters, handleChange]);
   const ownerState = {
     ...props,
-    square,
     disabled,
     disableGutters,
     expanded
@@ -197,10 +195,7 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     className: clsx(classes.root, className),
     shouldForwardComponentProp: true,
     ownerState,
-    ref,
-    additionalProps: {
-      square
-    }
+    ref
   });
   const [AccordionHeadingSlot, accordionProps] = useSlot('heading', {
     elementType: AccordionHeading,
@@ -280,12 +275,12 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    */
   disabled: PropTypes.bool,
   /**
-   * If `true`, it removes the margin between two expanded accordion items and the increase of height.
+   * If `true`, it removes the margin between two expanded accordion items and prevents the increased height when expanded.
    * @default false
    */
   disableGutters: PropTypes.bool,
   /**
-   * If `true`, expands the accordion, otherwise collapse it.
+   * If `true`, expands the accordion, otherwise collapses it.
    * Setting this prop enables control over the accordion.
    */
   expanded: PropTypes.bool,
@@ -316,11 +311,6 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
     root: PropTypes.elementType,
     transition: PropTypes.elementType
   }),
-  /**
-   * If `true`, rounded corners are disabled.
-   * @default false
-   */
-  square: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/Alert/Alert.js

@@ -230,7 +230,7 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
     ...rootSlotProps,
     children: [icon !== false ? /*#__PURE__*/_jsx(IconSlot, {
       ...iconSlotProps,
-      children: icon || iconMapping[severity] || defaultIconMapping[severity]
+      children: icon || iconMapping[severity]
     }) : null, /*#__PURE__*/_jsx(MessageSlot, {
       ...messageSlotProps,
       children: children

package/esm/AppBar/AppBar.js

@@ -101,7 +101,8 @@ const AppBarRoot = styled(Paper, {
       color: 'inherit'
     },
     style: {
-      '--AppBar-color': 'inherit'
+      '--AppBar-color': 'inherit',
+      color: 'var(--AppBar-color)'
     }
   }, {
     props: {

package/esm/Backdrop/Backdrop.js

@@ -107,7 +107,6 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     children: /*#__PURE__*/_jsx(RootSlot, {
       "aria-hidden": true,
       ...rootProps,
-      classes: classes,
       ref: ref,
       children: children
     })

package/esm/ButtonGroup/ButtonGroup.js

@@ -69,7 +69,13 @@ const ButtonGroupRoot = styled('div', {
       variant: 'contained'
     },
     style: {
-      boxShadow: (theme.vars || theme).shadows[2]
+      boxShadow: (theme.vars || theme).shadows[2],
+      [`& .${buttonGroupClasses.grouped}`]: {
+        boxShadow: 'none',
+        '&:hover': {
+          boxShadow: 'none'
+        }
+      }
     }
   }, {
     props: {
@@ -220,16 +226,7 @@ const ButtonGroupRoot = styled('div', {
     }
   }))],
   [`& .${buttonGroupClasses.grouped}`]: {
-    minWidth: 40,
-    boxShadow: 'none',
-    props: {
-      variant: 'contained'
-    },
-    style: {
-      '&:hover': {
-        boxShadow: 'none'
-      }
-    }
+    minWidth: 40
   }
 })));
 const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, ref) {

package/esm/CardActionArea/CardActionArea.js

@@ -99,7 +99,6 @@ const CardActionArea = /*#__PURE__*/React.forwardRef(function CardActionArea(inP
     elementType: CardActionAreaFocusHighlight,
     externalForwardedProps,
     ownerState,
-    ref,
     className: classes.focusHighlight
   });
   return /*#__PURE__*/_jsxs(RootSlot, {

package/esm/Dialog/Dialog.js

@@ -19,8 +19,7 @@ import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DialogBackdrop = styled(Backdrop, {
   name: 'MuiDialog',
-  slot: 'Backdrop',
-  overrides: (props, styles) => styles.backdrop
+  slot: 'Backdrop'
 })({
   // Improve scrollable dialog support.
   zIndex: -1
@@ -35,6 +34,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root'],
+    backdrop: ['backdrop'],
     container: ['container', `scroll${capitalize(scroll)}`],
     paper: ['paper', `paperScroll${capitalize(scroll)}`, `paperWidth${capitalize(String(maxWidth))}`, fullWidth && 'paperFullWidth', fullScreen && 'paperFullScreen']
   };
@@ -285,7 +285,8 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     elementType: DialogBackdrop,
     shouldForwardComponentProp: true,
     externalForwardedProps,
-    ownerState
+    ownerState,
+    className: classes.backdrop
   });
   const [PaperSlot, paperSlotProps] = useSlot('paper', {
     elementType: DialogPaper,

package/esm/Dialog/dialogClasses.d.ts

@@ -1,6 +1,8 @@
 export interface DialogClasses {
   /** Styles applied to the root element. */
   root: string;
+  /** Styles applied to the backdrop element. */
+  backdrop: string;
   /** Styles applied to the container element if `scroll="paper"`. */
   scrollPaper: string;
   /** Styles applied to the container element if `scroll="body"`. */

package/esm/Dialog/dialogClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getDialogUtilityClass(slot) {
   return generateUtilityClass('MuiDialog', slot);
 }
-const dialogClasses = generateUtilityClasses('MuiDialog', ['root', 'scrollPaper', 'scrollBody', 'container', 'paper', 'paperScrollPaper', 'paperScrollBody', 'paperWidthFalse', 'paperWidthXs', 'paperWidthSm', 'paperWidthMd', 'paperWidthLg', 'paperWidthXl', 'paperFullWidth', 'paperFullScreen']);
+const dialogClasses = generateUtilityClasses('MuiDialog', ['root', 'backdrop', 'scrollPaper', 'scrollBody', 'container', 'paper', 'paperScrollPaper', 'paperScrollBody', 'paperWidthFalse', 'paperWidthXs', 'paperWidthSm', 'paperWidthMd', 'paperWidthLg', 'paperWidthXl', 'paperFullWidth', 'paperFullScreen']);
 export default dialogClasses;

package/esm/Modal/ModalManager.js

@@ -17,7 +17,7 @@ export function ariaHidden(element, hide) {
   }
 }
 function getPaddingRight(element) {
-  return parseInt(ownerWindow(element).getComputedStyle(element).paddingRight, 10) || 0;
+  return parseFloat(ownerWindow(element).getComputedStyle(element).paddingRight) || 0;
 }
 function isAriaHiddenForbiddenOnElement(element) {
   // The forbidden HTML tags are the ones from ARIA specification that

package/esm/Select/SelectInput.js

@@ -177,6 +177,22 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     node: inputRef.current,
     value
   }), [value]);
+  const open = displayNode !== null && openState;
+  React.useEffect(() => {
+    if (!open || !anchorElement || autoWidth) {
+      return undefined;
+    }
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver(() => {
+      setMenuMinWidthState(anchorElement.clientWidth);
+    });
+    observer.observe(anchorElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [open, anchorElement, autoWidth]);
 
   // Resize menu on `defaultOpen` automatic toggle.
   React.useEffect(() => {
@@ -212,8 +228,8 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     return undefined;
   }, [labelId]);
-  const update = (open, event) => {
-    if (open) {
+  const update = (openParam, event) => {
+    if (openParam) {
       if (onOpen) {
         onOpen(event);
       }
@@ -222,7 +238,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     if (!isOpenControlled) {
       setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
-      setOpenState(open);
+      setOpenState(openParam);
     }
   };
   const handleMouseDown = event => {
@@ -309,7 +325,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onKeyDown?.(event);
     }
   };
-  const open = displayNode !== null && openState;
   const handleBlur = event => {
     // if open event.stopImmediatePropagation
     if (!open && onBlur) {

package/esm/Tabs/Tabs.d.ts

@@ -87,7 +87,7 @@ export type TabsSlotsAndSlotProps = CreateSlotsAndSlotProps<TabsSlots, {
    */
   indicator: SlotProps<'span', TabsIndicatorSlotPropsOverrides, TabsOwnerState>;
   /**
-   * Props forwarded to the scrollButton slot.
+   * Props forwarded to the scrollButtons slot.
    * By default, the available props are based on the [TabScrollButton](https://mui.com/material-ui/api/tab-scroll-button/#props) component.
    */
   scrollButtons: SlotProps<typeof TabScrollButton, TabsScrollButtonsSlotPropsOverrides, TabsOwnerState>;

package/esm/Tabs/Tabs.js

@@ -345,7 +345,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     slots,
     slotProps: {
       indicator: TabIndicatorProps,
-      scrollButton: TabScrollButtonProps,
+      scrollButtons: TabScrollButtonProps,
       ...slotProps
     }
   };

package/esm/Unstable_TrapFocus/FocusTrap.js

@@ -148,12 +148,12 @@ function FocusTrap(props) {
       return;
     }
     const doc = ownerDocument(rootRef.current);
-    const activeElement = getActiveElement(doc);
     const loopFocus = nativeEvent => {
       lastKeydown.current = nativeEvent;
       if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
         return;
       }
+      const activeElement = getActiveElement(doc);
 
       // Make sure the next tab starts from the right place.
       // activeElement refers to the origin.

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v7.3.6
+ * @mui/material v7.3.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internal/SwitchBase.js

@@ -135,7 +135,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
   };
   const handleInputChange = event => {
     // Workaround for https://github.com/facebook/react/issues/9023
-    if (event.nativeEvent.defaultPrevented) {
+    if (event.nativeEvent.defaultPrevented || readOnly) {
       return;
     }
     const newChecked = event.target.checked;

package/esm/locale/arEG.js

@@ -38,7 +38,7 @@ export const arEG = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'جار التحميل...',
+        loadingText: 'جار التحميل…',
         noOptionsText: 'لا يوجد خيارات',
         openText: 'فتح'
       }

package/esm/locale/arSA.js

@@ -38,7 +38,7 @@ export const arSA = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'جار التحميل...',
+        loadingText: 'جار التحميل…',
         noOptionsText: 'لا توجد خيارات',
         openText: 'فتح'
       }

package/esm/locale/arSD.js

@@ -38,7 +38,7 @@ export const arSD = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'جار التحميل...',
+        loadingText: 'جار التحميل…',
         noOptionsText: 'لا يوجد خيارات',
         openText: 'فتح'
       }

package/esm/locale/kuCKB.js

@@ -38,7 +38,7 @@ export const kuCKB = {
       defaultProps: {
         clearText: 'سڕینەوە',
         closeText: 'داخستن',
-        loadingText: 'لە بارکردندایە...',
+        loadingText: 'لە بارکردندایە…',
         noOptionsText: 'هیچ بژاردەیەک نیە',
         openText: 'کردنەوە'
       }

package/esm/locale/neNP.js

@@ -42,7 +42,7 @@ export const neNP = {
       defaultProps: {
         clearText: 'खाली गर्नुहोस्',
         closeText: 'बन्द गर्नुहोस्',
-        loadingText: 'लोड हुँदै...',
+        loadingText: 'लोड हुँदै…',
         noOptionsText: 'कुनै विकल्प छैन',
         openText: 'खोल्नुहोस्'
       }

package/esm/useAutocomplete/useAutocomplete.js

@@ -584,9 +584,17 @@ function useAutocomplete(props) {
       handleClose(event, 'toggleInput');
     }
     let nextItem = focusedItem;
-    if (focusedItem === -1) {
-      if (inputValue === '' && direction === 'previous') {
-        nextItem = value.length - 1;
+
+    // When moving focus from the input to tags with ArrowLeft,
+    // always jump to the last tag (if any) from the input.
+    if (focusedItem === -1 && direction === 'previous') {
+      nextItem = value.length - 1;
+      // In freeSolo, clear any draft text so it doesn't "come back" later.
+      if (freeSolo && inputValue !== '') {
+        setInputValueState('');
+        if (onInputChange) {
+          onInputChange(event, '', 'reset');
+        }
       }
     } else {
       nextItem += direction === 'next' ? 1 : -1;
@@ -693,13 +701,34 @@ function useAutocomplete(props) {
           handleOpen(event);
           break;
         case 'ArrowLeft':
-          if (!multiple && renderValue && value != null) {
-            setFocusedItem(0);
-            focusItem(0);
-          } else {
-            handleFocusItem(event, 'previous');
+          {
+            const input = inputRef.current;
+            // Only handle ArrowLeft when the caret is at the start of the input.
+            // Otherwise let the browser move the caret normally.
+            const caretAtStart = input && input.selectionStart === 0 && input.selectionEnd === 0;
+            if (!caretAtStart) {
+              // Let the browser handle normal cursor movement
+              return;
+            }
+
+            // Single-value rendering: move focus from input to the single tag.
+            if (!multiple && renderValue && value != null) {
+              // Moving from input to single tag; clear freeSolo draft text,
+              // so it doesn't reappear when we move back.
+              if (freeSolo && inputValue !== '') {
+                setInputValueState('');
+                if (onInputChange) {
+                  onInputChange(event, '', 'reset');
+                }
+              }
+              setFocusedItem(0);
+              focusItem(0);
+            } else {
+              // Multi-value: delegate to tag navigation helper.
+              handleFocusItem(event, 'previous');
+            }
+            break;
           }
-          break;
         case 'ArrowRight':
           if (!multiple && renderValue) {
             setFocusedItem(-1);
@@ -757,10 +786,10 @@ function useAutocomplete(props) {
               option: value[index]
             });
           }
-          if (!multiple && renderValue && !readOnly) {
-            setValueState(null);
-            setFocusedItem(-1);
-            focusItem(-1);
+          if (!multiple && renderValue && !readOnly && inputValue === '') {
+            handleValue(event, null, 'removeOption', {
+              option: value
+            });
           }
           break;
         case 'Delete':
@@ -773,10 +802,12 @@ function useAutocomplete(props) {
               option: value[index]
             });
           }
-          if (!multiple && renderValue && !readOnly) {
-            setValueState(null);
-            setFocusedItem(-1);
-            focusItem(-1);
+          if (!multiple && renderValue && !readOnly && inputValue === '') {
+            // Single-value rendering: Delete on empty input removes
+            // the single rendered option, same "removeOption" reason as multiple.
+            handleValue(event, null, 'removeOption', {
+              option: value
+            });
           }
           break;
         default:
@@ -826,7 +857,9 @@ function useAutocomplete(props) {
       }
     }
     if (newValue === '') {
-      if (!disableClearable && !multiple) {
+      // For normal single-select, clearing the input clears the value.
+      // For renderValue (chip-style single), only Backspace/Delete clear the value.
+      if (!disableClearable && !multiple && !renderValue) {
         handleValue(event, null, 'clear');
       }
     } else {

package/esm/version/index.js

@@ -1,6 +1,6 @@
-export const version = "7.3.6";
+export const version = "7.3.7";
 export const major = Number("7");
 export const minor = Number("3");
-export const patch = Number("6");
+export const patch = Number("7");
 export const prerelease = undefined;
 export default version;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v7.3.6
+ * @mui/material v7.3.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internal/SwitchBase.js

@@ -142,7 +142,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
   };
   const handleInputChange = event => {
     // Workaround for https://github.com/facebook/react/issues/9023
-    if (event.nativeEvent.defaultPrevented) {
+    if (event.nativeEvent.defaultPrevented || readOnly) {
       return;
     }
     const newChecked = event.target.checked;

package/locale/arEG.js

@@ -44,7 +44,7 @@ const arEG = exports.arEG = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'جار التحميل...',
+        loadingText: 'جار التحميل…',
         noOptionsText: 'لا يوجد خيارات',
         openText: 'فتح'
       }

package/locale/arSA.js

@@ -44,7 +44,7 @@ const arSA = exports.arSA = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'جار التحميل...',
+        loadingText: 'جار التحميل…',
         noOptionsText: 'لا توجد خيارات',
         openText: 'فتح'
       }

package/locale/arSD.js

@@ -44,7 +44,7 @@ const arSD = exports.arSD = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'جار التحميل...',
+        loadingText: 'جار التحميل…',
         noOptionsText: 'لا يوجد خيارات',
         openText: 'فتح'
       }

package/locale/kuCKB.js

@@ -44,7 +44,7 @@ const kuCKB = exports.kuCKB = {
       defaultProps: {
         clearText: 'سڕینەوە',
         closeText: 'داخستن',
-        loadingText: 'لە بارکردندایە...',
+        loadingText: 'لە بارکردندایە…',
         noOptionsText: 'هیچ بژاردەیەک نیە',
         openText: 'کردنەوە'
       }

package/locale/neNP.js

@@ -48,7 +48,7 @@ const neNP = exports.neNP = {
       defaultProps: {
         clearText: 'खाली गर्नुहोस्',
         closeText: 'बन्द गर्नुहोस्',
-        loadingText: 'लोड हुँदै...',
+        loadingText: 'लोड हुँदै…',
         noOptionsText: 'कुनै विकल्प छैन',
         openText: 'खोल्नुहोस्'
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "7.3.6",
+  "version": "7.3.7",
   "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.",
   "keywords": [
@@ -29,14 +29,14 @@
     "@popperjs/core": "^2.11.8",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
-    "csstype": "^3.1.3",
+    "csstype": "^3.2.3",
     "prop-types": "^15.8.1",
-    "react-is": "^19.2.0",
+    "react-is": "^19.2.3",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^7.3.6",
-    "@mui/system": "^7.3.6",
-    "@mui/types": "^7.4.9",
-    "@mui/utils": "^7.3.6"
+    "@mui/core-downloads-tracker": "^7.3.7",
+    "@mui/system": "^7.3.7",
+    "@mui/utils": "^7.3.7",
+    "@mui/types": "^7.4.10"
   },
   "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": "^7.3.6"
+    "@mui/material-pigment-css": "^7.3.7"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/useAutocomplete/useAutocomplete.js

@@ -592,9 +592,17 @@ function useAutocomplete(props) {
       handleClose(event, 'toggleInput');
     }
     let nextItem = focusedItem;
-    if (focusedItem === -1) {
-      if (inputValue === '' && direction === 'previous') {
-        nextItem = value.length - 1;
+
+    // When moving focus from the input to tags with ArrowLeft,
+    // always jump to the last tag (if any) from the input.
+    if (focusedItem === -1 && direction === 'previous') {
+      nextItem = value.length - 1;
+      // In freeSolo, clear any draft text so it doesn't "come back" later.
+      if (freeSolo && inputValue !== '') {
+        setInputValueState('');
+        if (onInputChange) {
+          onInputChange(event, '', 'reset');
+        }
       }
     } else {
       nextItem += direction === 'next' ? 1 : -1;
@@ -701,13 +709,34 @@ function useAutocomplete(props) {
           handleOpen(event);
           break;
         case 'ArrowLeft':
-          if (!multiple && renderValue && value != null) {
-            setFocusedItem(0);
-            focusItem(0);
-          } else {
-            handleFocusItem(event, 'previous');
+          {
+            const input = inputRef.current;
+            // Only handle ArrowLeft when the caret is at the start of the input.
+            // Otherwise let the browser move the caret normally.
+            const caretAtStart = input && input.selectionStart === 0 && input.selectionEnd === 0;
+            if (!caretAtStart) {
+              // Let the browser handle normal cursor movement
+              return;
+            }
+
+            // Single-value rendering: move focus from input to the single tag.
+            if (!multiple && renderValue && value != null) {
+              // Moving from input to single tag; clear freeSolo draft text,
+              // so it doesn't reappear when we move back.
+              if (freeSolo && inputValue !== '') {
+                setInputValueState('');
+                if (onInputChange) {
+                  onInputChange(event, '', 'reset');
+                }
+              }
+              setFocusedItem(0);
+              focusItem(0);
+            } else {
+              // Multi-value: delegate to tag navigation helper.
+              handleFocusItem(event, 'previous');
+            }
+            break;
           }
-          break;
         case 'ArrowRight':
           if (!multiple && renderValue) {
             setFocusedItem(-1);
@@ -765,10 +794,10 @@ function useAutocomplete(props) {
               option: value[index]
             });
           }
-          if (!multiple && renderValue && !readOnly) {
-            setValueState(null);
-            setFocusedItem(-1);
-            focusItem(-1);
+          if (!multiple && renderValue && !readOnly && inputValue === '') {
+            handleValue(event, null, 'removeOption', {
+              option: value
+            });
           }
           break;
         case 'Delete':
@@ -781,10 +810,12 @@ function useAutocomplete(props) {
               option: value[index]
             });
           }
-          if (!multiple && renderValue && !readOnly) {
-            setValueState(null);
-            setFocusedItem(-1);
-            focusItem(-1);
+          if (!multiple && renderValue && !readOnly && inputValue === '') {
+            // Single-value rendering: Delete on empty input removes
+            // the single rendered option, same "removeOption" reason as multiple.
+            handleValue(event, null, 'removeOption', {
+              option: value
+            });
           }
           break;
         default:
@@ -834,7 +865,9 @@ function useAutocomplete(props) {
       }
     }
     if (newValue === '') {
-      if (!disableClearable && !multiple) {
+      // For normal single-select, clearing the input clears the value.
+      // For renderValue (chip-style single), only Backspace/Delete clear the value.
+      if (!disableClearable && !multiple && !renderValue) {
         handleValue(event, null, 'clear');
       }
     } else {

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