@mui/material 7.3.7 → 7.3.8

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]
+      children: icon || iconMapping[severity] || defaultIconMapping[severity]
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(MessageSlot, {
       ...messageSlotProps,
       children: children

package/AppBar/AppBar.js

@@ -33,7 +33,7 @@ const useUtilityClasses = ownerState => {
 
 // var2 is the fallback.
 // Ex. var1: 'var(--a)', var2: 'var(--b)'; return: 'var(--a, var(--b))'
-const joinVars = (var1, var2) => var1 ? `${var1?.replace(')', '')}, ${var2})` : var2;
+const joinVars = (var1, var2) => var1 ? `${var1.replace(')', '')}, ${var2})` : var2;
 const AppBarRoot = (0, _zeroStyled.styled)(_Paper.default, {
   name: 'MuiAppBar',
   slot: 'Root',

package/Autocomplete/Autocomplete.d.ts

@@ -283,7 +283,7 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    * @returns {ReactNode}
    */
   renderOption?: (props: React.HTMLAttributes<HTMLLIElement> & {
-    key: any;
+    key: React.Key;
   }, option: Value, state: AutocompleteRenderOptionState, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode;
   /**
    * Render the selected value when doing multiple selections.

package/Autocomplete/Autocomplete.js

@@ -669,7 +669,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       children: renderInput({
         id,
         disabled,
-        fullWidth: true,
+        fullWidth: props.fullWidth ?? true,
         size: size === 'small' ? 'small' : undefined,
         InputLabelProps: getInputLabelProps(),
         InputProps: {

package/Badge/Badge.js

@@ -100,110 +100,6 @@ const BadgeBadge = (0, _zeroStyled.styled)('span', {
       minWidth: RADIUS_DOT * 2,
       padding: 0
     }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular',
-    style: {
-      top: 0,
-      right: 0,
-      transform: 'scale(1) translate(50%, -50%)',
-      transformOrigin: '100% 0%',
-      [`&.${_badgeClasses.default.invisible}`]: {
-        transform: 'scale(0) translate(50%, -50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular',
-    style: {
-      bottom: 0,
-      right: 0,
-      transform: 'scale(1) translate(50%, 50%)',
-      transformOrigin: '100% 100%',
-      [`&.${_badgeClasses.default.invisible}`]: {
-        transform: 'scale(0) translate(50%, 50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular',
-    style: {
-      top: 0,
-      left: 0,
-      transform: 'scale(1) translate(-50%, -50%)',
-      transformOrigin: '0% 0%',
-      [`&.${_badgeClasses.default.invisible}`]: {
-        transform: 'scale(0) translate(-50%, -50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular',
-    style: {
-      bottom: 0,
-      left: 0,
-      transform: 'scale(1) translate(-50%, 50%)',
-      transformOrigin: '0% 100%',
-      [`&.${_badgeClasses.default.invisible}`]: {
-        transform: 'scale(0) translate(-50%, 50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular',
-    style: {
-      top: '14%',
-      right: '14%',
-      transform: 'scale(1) translate(50%, -50%)',
-      transformOrigin: '100% 0%',
-      [`&.${_badgeClasses.default.invisible}`]: {
-        transform: 'scale(0) translate(50%, -50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular',
-    style: {
-      bottom: '14%',
-      right: '14%',
-      transform: 'scale(1) translate(50%, 50%)',
-      transformOrigin: '100% 100%',
-      [`&.${_badgeClasses.default.invisible}`]: {
-        transform: 'scale(0) translate(50%, 50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular',
-    style: {
-      top: '14%',
-      left: '14%',
-      transform: 'scale(1) translate(-50%, -50%)',
-      transformOrigin: '0% 0%',
-      [`&.${_badgeClasses.default.invisible}`]: {
-        transform: 'scale(0) translate(-50%, -50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular',
-    style: {
-      bottom: '14%',
-      left: '14%',
-      transform: 'scale(1) translate(-50%, 50%)',
-      transformOrigin: '0% 100%',
-      [`&.${_badgeClasses.default.invisible}`]: {
-        transform: 'scale(0) translate(-50%, 50%)'
-      }
-    }
   }, {
     props: {
       invisible: true
@@ -214,6 +110,29 @@ const BadgeBadge = (0, _zeroStyled.styled)('span', {
         duration: theme.transitions.duration.leavingScreen
       })
     }
+  }, {
+    style: ({
+      ownerState
+    }) => {
+      const {
+        vertical,
+        horizontal
+      } = ownerState.anchorOrigin;
+      const offset = ownerState.overlap === 'circular' ? '14%' : 0;
+      return {
+        '--Badge-translateX': horizontal === 'right' ? '50%' : '-50%',
+        '--Badge-translateY': vertical === 'top' ? '-50%' : '50%',
+        top: vertical === 'top' ? offset : 'initial',
+        bottom: vertical === 'bottom' ? offset : 'initial',
+        right: horizontal === 'right' ? offset : 'initial',
+        left: horizontal === 'left' ? offset : 'initial',
+        transform: 'scale(1) translate(var(--Badge-translateX), var(--Badge-translateY))',
+        transformOrigin: `${horizontal === 'right' ? '100%' : '0%'} ${vertical === 'top' ? '0%' : '100%'}`,
+        [`&.${_badgeClasses.default.invisible}`]: {
+          transform: 'scale(0) translate(var(--Badge-translateX), var(--Badge-translateY))'
+        }
+      };
+    }
   }]
 })));
 function getAnchorOrigin(anchorOrigin) {

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.3.8
+
+<!-- generated comparing v7.3.7..master -->
+
+_Feb 12, 2026_
+
+A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+### `@mui/material@7.3.8`
+
+- [alert] Revert removing default icon mapping fallback (#47629) @ZeeshanTamboli
+- [app-bar] Fix optional chaining in joinVars function (#47739) @sai6855
+- [autocomplete] Fix scroll position resetting on reopen with `disableCloseOnSelect` (#47248) @ZeeshanTamboli
+- [autocomplete] Pass fullWidth prop to input, with default as true (#47663) @silviuaavram
+- [badge] Refactor variant styles generation (#47742) @sai6855
+- [chip] Remove unnecessary `onDelete` check (#47753) @ZeeshanTamboli
+- [switch][checkbox][radio] Remove `aria-disabled` from root span (#46318) @KirankumarAmbati
+- [collapse] Remove unnecessary string concatenation (#47745) @sai6855
+- [drawer] `persistent` and `permanent` variant Drawers should not override the styles via theme using `modal` class (#47581) @ZeeshanTamboli
+- [tabs] Add ability to extend Tabs variant (#47590) @aditya1906
+- [useAutocomplete] Add aria-multiselectable to listbox props when multiple is true (#47632) @silviuaavram
+- [useAutocomplete] Use `React.Key` instead of `any` for `key` prop (#47619) @sonixx02
+
+#### Core
+
+- Revert "[docs-infra] Add Cookie Banner and Analytics Provider (#47445)" (868d23e) @dav-is
+- Revert "[docs-infra] Update Cookie Consent Dialog styling and content (#47718)" (ae29d03) @dav-is
+- [api-docs-builder] Validate slots prop and Slots interface export consistency (#47623) @Janpot
+- [code-infra] Remove `window.muiDocConfig` (#47737) @Janpot
+- [code-infra] Fix flaky Select test on Webkit (#47728) @Janpot
+- [code-infra] Remove usage of NODE_ENV=test (#47692) @Janpot
+- [code-infra] Prepare eslint rule rename (#47702) @Janpot
+- [code-infra] Next.js 15.5.11 (security update) (#47697) @Janpot
+- [code-infra] Fix Tooltip tests flakyness (#47669) @Janpot
+- [code-infra] Improve instructions for error messages (#47668) @Janpot
+- [code-infra] Add initial agent instructions (#47655) @Janpot
+- [code-infra] Update broken links checker (#47633) @Janpot
+- [code-infra] Improve Tooltip leaveDelay test (#47624) @Janpot
+- [code-infra] Fix internal broken links (#47607) @Janpot
+- [docs-infra] Resolve a few 301s in our docs (#47746) @Janpot
+- [docs-infra] Update Cookie Consent Dialog styling and content (#47718) @dav-is
+- [docs-infra] Add Cookie Banner and Analytics Provider (#47445) @dav-is
+- [docs-infra] Make sure /customers page has a h1 (#47615) @Janpot
+- [docs-infra] Fix privacy link (#47614) @Janpot
+- [docs-infra] Resolve a few 301s (#47579) @Janpot
+- [internal] Remove unused sponsor files (#47741) @oliviertassinari
+- [markdown] Fix some broken hash links (#47609) @Janpot
+- [test] Cleanup Table tests TODOs (#47656) @Ocheretovich
+
+### Docs
+
+- [website] unclickable banner in the pricing page (#47634) @aemartos
+- [blog] Company Update: What we've been working on (and why) (#47626) @alelthomas
+- [docs] Remove outdated notifications (#47743) @bernardobelchior
+- [docs] Make Demo component product-agnostic (#47635) @Janpot
+- [docs] Copyedit the Number Field doc (#47469) @mapache-salvaje
+- [docs] Fix Roboto font not loading in iframe demos (#47660) @Janpot
+- [docs] Replace Checkbox with Icons in Combobox examples (#47654) @silviuaavram
+- [docs] Fix punctuation in TypeScript guide description (#47617) @nodirbekprogrammer
+
+All contributors of this release in alphabetical order: @aditya1906, @aemartos, @alelthomas, @bernardobelchior, @dav-is, @Janpot, @KirankumarAmbati, @mapache-salvaje, @nodirbekprogrammer, @Ocheretovich, @oliviertassinari, @sai6855, @silviuaavram, @sonixx02, @ZeeshanTamboli
+
 ## 7.3.7
 
 <!-- generated comparing v7.3.6..master -->

package/Chip/Chip.js

@@ -388,9 +388,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   const handleDeleteIconClick = event => {
     // Stop the event from bubbling up to the `Chip`
     event.stopPropagation();
-    if (onDelete) {
-      onDelete(event);
-    }
+    onDelete(event);
   };
   const handleKeyDown = event => {
     // Ignore events from children of `Chip`.

package/Collapse/Collapse.js

@@ -29,11 +29,11 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['root', `${orientation}`],
+    root: ['root', orientation],
     entered: ['entered'],
     hidden: ['hidden'],
-    wrapper: ['wrapper', `${orientation}`],
-    wrapperInner: ['wrapperInner', `${orientation}`]
+    wrapper: ['wrapper', orientation],
+    wrapperInner: ['wrapperInner', orientation]
   };
   return (0, _composeClasses.default)(slots, _collapseClasses.getCollapseUtilityClass, classes);
 };

package/Drawer/Drawer.js

@@ -31,7 +31,7 @@ const overridesResolver = (props, styles) => {
   const {
     ownerState
   } = props;
-  return [styles.root, (ownerState.variant === 'permanent' || ownerState.variant === 'persistent') && styles.docked, styles.modal];
+  return [styles.root, (ownerState.variant === 'permanent' || ownerState.variant === 'persistent') && styles.docked, ownerState.variant === 'temporary' && styles.modal];
 };
 const useUtilityClasses = ownerState => {
   const {

package/GridLegacy/GridLegacy.js

@@ -38,7 +38,7 @@ var _gridLegacyClasses = _interopRequireWildcard(require("./gridLegacyClasses"))
 var _jsxRuntime = require("react/jsx-runtime");
 let warnedOnce = false;
 function warnAboutDeprecatedGridLegacy() {
-  if (!warnedOnce && process.env.NODE_ENV === 'development') {
+  if (!warnedOnce && process.env.NODE_ENV !== 'production') {
     warnedOnce = true;
     console.warn('MUI: The GridLegacy component is deprecated. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.\n');
   }

package/Popover/Popover.js

@@ -157,7 +157,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     const anchorRect = anchorElement.getBoundingClientRect();
     if (process.env.NODE_ENV !== 'production') {
       const box = anchorElement.getBoundingClientRect();
-      if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+      if (!globalThis.MUI_TEST_ENV && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
         console.warn(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
       }
     }
@@ -408,7 +408,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
       const resolvedAnchorEl = resolveAnchorEl(props.anchorEl);
       if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {
         const box = resolvedAnchorEl.getBoundingClientRect();
-        if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+        if (process.env.NODE_ENV !== 'production' && !globalThis.MUI_TEST_ENV && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
           return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
         }
       } else {

package/Popper/BasePopper.js

@@ -112,7 +112,7 @@ const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props
     if (process.env.NODE_ENV !== 'production') {
       if (resolvedAnchorElement && isHTMLElement(resolvedAnchorElement) && resolvedAnchorElement.nodeType === 1) {
         const box = resolvedAnchorElement.getBoundingClientRect();
-        if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+        if (!globalThis.MUI_TEST_ENV && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
           console.warn(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
         }
       }
@@ -274,7 +274,7 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
       const resolvedAnchorEl = resolveAnchorEl(props.anchorEl);
       if (resolvedAnchorEl && isHTMLElement(resolvedAnchorEl) && resolvedAnchorEl.nodeType === 1) {
         const box = resolvedAnchorEl.getBoundingClientRect();
-        if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+        if (process.env.NODE_ENV !== 'production' && !globalThis.MUI_TEST_ENV && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
           return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
         }
       } else if (!resolvedAnchorEl || typeof resolvedAnchorEl.getBoundingClientRect !== 'function' || isVirtualElement(resolvedAnchorEl) && resolvedAnchorEl.contextElement != null && resolvedAnchorEl.contextElement.nodeType !== 1) {

package/Slide/Slide.js

@@ -270,7 +270,7 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ =
       const resolvedContainer = resolveContainer(props.container);
       if (resolvedContainer && resolvedContainer.nodeType === 1) {
         const box = resolvedContainer.getBoundingClientRect();
-        if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+        if (process.env.NODE_ENV !== 'production' && !globalThis.MUI_TEST_ENV && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
           return new Error(['MUI: The `container` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
         }
       } else if (!resolvedContainer || typeof resolvedContainer.getBoundingClientRect !== 'function' || resolvedContainer.contextElement != null && resolvedContainer.contextElement.nodeType !== 1) {

package/Tabs/Tabs.d.ts

@@ -8,6 +8,7 @@ import { OverridableComponent, OverrideProps } from "../OverridableComponent/ind
 import { TabsClasses } from "./tabsClasses.js";
 import SvgIcon from "../SvgIcon/index.js";
 export interface TabsPropsIndicatorColorOverrides {}
+export interface TabsPropsVariantOverrides {}
 export interface TabsRootSlotPropsOverrides {}
 export interface TabsScrollerSlotPropsOverrides {}
 export interface TabsListSlotPropsOverrides {}
@@ -234,7 +235,7 @@ export interface TabsOwnProps extends TabsSlotsAndSlotProps {
    *  - `standard` will render the default state.
    * @default 'standard'
    */
-  variant?: 'standard' | 'scrollable' | 'fullWidth';
+  variant?: OverridableStringUnion<'standard' | 'scrollable' | 'fullWidth', TabsPropsVariantOverrides>;
   /**
    * If `true`, the scrollbar is visible. It can be useful when displaying
    * a long vertical list of tabs.

package/Tabs/Tabs.js

@@ -385,7 +385,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         }
         tabMeta = tab ? tab.getBoundingClientRect() : null;
         if (process.env.NODE_ENV !== 'production') {
-          if (process.env.NODE_ENV !== 'test' && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 &&
+          if (!globalThis.MUI_TEST_ENV && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 &&
           // if the whole Tabs component is hidden, don't warn
           tabsMeta.clientWidth !== 0) {
             tabsMeta = null;

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]
+      children: icon || iconMapping[severity] || defaultIconMapping[severity]
     }) : null, /*#__PURE__*/_jsx(MessageSlot, {
       ...messageSlotProps,
       children: children

package/esm/AppBar/AppBar.js

@@ -26,7 +26,7 @@ const useUtilityClasses = ownerState => {
 
 // var2 is the fallback.
 // Ex. var1: 'var(--a)', var2: 'var(--b)'; return: 'var(--a, var(--b))'
-const joinVars = (var1, var2) => var1 ? `${var1?.replace(')', '')}, ${var2})` : var2;
+const joinVars = (var1, var2) => var1 ? `${var1.replace(')', '')}, ${var2})` : var2;
 const AppBarRoot = styled(Paper, {
   name: 'MuiAppBar',
   slot: 'Root',

package/esm/Autocomplete/Autocomplete.d.ts

@@ -283,7 +283,7 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    * @returns {ReactNode}
    */
   renderOption?: (props: React.HTMLAttributes<HTMLLIElement> & {
-    key: any;
+    key: React.Key;
   }, option: Value, state: AutocompleteRenderOptionState, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode;
   /**
    * Render the selected value when doing multiple selections.

package/esm/Autocomplete/Autocomplete.js

@@ -657,7 +657,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       children: renderInput({
         id,
         disabled,
-        fullWidth: true,
+        fullWidth: props.fullWidth ?? true,
         size: size === 'small' ? 'small' : undefined,
         InputLabelProps: getInputLabelProps(),
         InputProps: {

package/esm/Badge/Badge.js

@@ -93,110 +93,6 @@ const BadgeBadge = styled('span', {
       minWidth: RADIUS_DOT * 2,
       padding: 0
     }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular',
-    style: {
-      top: 0,
-      right: 0,
-      transform: 'scale(1) translate(50%, -50%)',
-      transformOrigin: '100% 0%',
-      [`&.${badgeClasses.invisible}`]: {
-        transform: 'scale(0) translate(50%, -50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular',
-    style: {
-      bottom: 0,
-      right: 0,
-      transform: 'scale(1) translate(50%, 50%)',
-      transformOrigin: '100% 100%',
-      [`&.${badgeClasses.invisible}`]: {
-        transform: 'scale(0) translate(50%, 50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular',
-    style: {
-      top: 0,
-      left: 0,
-      transform: 'scale(1) translate(-50%, -50%)',
-      transformOrigin: '0% 0%',
-      [`&.${badgeClasses.invisible}`]: {
-        transform: 'scale(0) translate(-50%, -50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular',
-    style: {
-      bottom: 0,
-      left: 0,
-      transform: 'scale(1) translate(-50%, 50%)',
-      transformOrigin: '0% 100%',
-      [`&.${badgeClasses.invisible}`]: {
-        transform: 'scale(0) translate(-50%, 50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular',
-    style: {
-      top: '14%',
-      right: '14%',
-      transform: 'scale(1) translate(50%, -50%)',
-      transformOrigin: '100% 0%',
-      [`&.${badgeClasses.invisible}`]: {
-        transform: 'scale(0) translate(50%, -50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular',
-    style: {
-      bottom: '14%',
-      right: '14%',
-      transform: 'scale(1) translate(50%, 50%)',
-      transformOrigin: '100% 100%',
-      [`&.${badgeClasses.invisible}`]: {
-        transform: 'scale(0) translate(50%, 50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular',
-    style: {
-      top: '14%',
-      left: '14%',
-      transform: 'scale(1) translate(-50%, -50%)',
-      transformOrigin: '0% 0%',
-      [`&.${badgeClasses.invisible}`]: {
-        transform: 'scale(0) translate(-50%, -50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular',
-    style: {
-      bottom: '14%',
-      left: '14%',
-      transform: 'scale(1) translate(-50%, 50%)',
-      transformOrigin: '0% 100%',
-      [`&.${badgeClasses.invisible}`]: {
-        transform: 'scale(0) translate(-50%, 50%)'
-      }
-    }
   }, {
     props: {
       invisible: true
@@ -207,6 +103,29 @@ const BadgeBadge = styled('span', {
         duration: theme.transitions.duration.leavingScreen
       })
     }
+  }, {
+    style: ({
+      ownerState
+    }) => {
+      const {
+        vertical,
+        horizontal
+      } = ownerState.anchorOrigin;
+      const offset = ownerState.overlap === 'circular' ? '14%' : 0;
+      return {
+        '--Badge-translateX': horizontal === 'right' ? '50%' : '-50%',
+        '--Badge-translateY': vertical === 'top' ? '-50%' : '50%',
+        top: vertical === 'top' ? offset : 'initial',
+        bottom: vertical === 'bottom' ? offset : 'initial',
+        right: horizontal === 'right' ? offset : 'initial',
+        left: horizontal === 'left' ? offset : 'initial',
+        transform: 'scale(1) translate(var(--Badge-translateX), var(--Badge-translateY))',
+        transformOrigin: `${horizontal === 'right' ? '100%' : '0%'} ${vertical === 'top' ? '0%' : '100%'}`,
+        [`&.${badgeClasses.invisible}`]: {
+          transform: 'scale(0) translate(var(--Badge-translateX), var(--Badge-translateY))'
+        }
+      };
+    }
   }]
 })));
 function getAnchorOrigin(anchorOrigin) {

package/esm/Chip/Chip.js

@@ -381,9 +381,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   const handleDeleteIconClick = event => {
     // Stop the event from bubbling up to the `Chip`
     event.stopPropagation();
-    if (onDelete) {
-      onDelete(event);
-    }
+    onDelete(event);
   };
   const handleKeyDown = event => {
     // Ignore events from children of `Chip`.

package/esm/Collapse/Collapse.js

@@ -22,11 +22,11 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['root', `${orientation}`],
+    root: ['root', orientation],
     entered: ['entered'],
     hidden: ['hidden'],
-    wrapper: ['wrapper', `${orientation}`],
-    wrapperInner: ['wrapperInner', `${orientation}`]
+    wrapper: ['wrapper', orientation],
+    wrapperInner: ['wrapperInner', orientation]
   };
   return composeClasses(slots, getCollapseUtilityClass, classes);
 };

package/esm/Drawer/Drawer.js

@@ -22,7 +22,7 @@ const overridesResolver = (props, styles) => {
   const {
     ownerState
   } = props;
-  return [styles.root, (ownerState.variant === 'permanent' || ownerState.variant === 'persistent') && styles.docked, styles.modal];
+  return [styles.root, (ownerState.variant === 'permanent' || ownerState.variant === 'persistent') && styles.docked, ownerState.variant === 'temporary' && styles.modal];
 };
 const useUtilityClasses = ownerState => {
   const {

package/esm/GridLegacy/GridLegacy.js

@@ -25,7 +25,7 @@ import gridLegacyClasses, { getGridLegacyUtilityClass } from "./gridLegacyClasse
 import { jsx as _jsx } from "react/jsx-runtime";
 let warnedOnce = false;
 function warnAboutDeprecatedGridLegacy() {
-  if (!warnedOnce && process.env.NODE_ENV === 'development') {
+  if (!warnedOnce && process.env.NODE_ENV !== 'production') {
     warnedOnce = true;
     console.warn('MUI: The GridLegacy component is deprecated. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.\n');
   }

package/esm/Popover/Popover.js

@@ -148,7 +148,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     const anchorRect = anchorElement.getBoundingClientRect();
     if (process.env.NODE_ENV !== 'production') {
       const box = anchorElement.getBoundingClientRect();
-      if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+      if (!globalThis.MUI_TEST_ENV && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
         console.warn(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
       }
     }
@@ -399,7 +399,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
       const resolvedAnchorEl = resolveAnchorEl(props.anchorEl);
       if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {
         const box = resolvedAnchorEl.getBoundingClientRect();
-        if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+        if (process.env.NODE_ENV !== 'production' && !globalThis.MUI_TEST_ENV && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
           return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
         }
       } else {

package/esm/Popper/BasePopper.js

@@ -105,7 +105,7 @@ const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props
     if (process.env.NODE_ENV !== 'production') {
       if (resolvedAnchorElement && isHTMLElement(resolvedAnchorElement) && resolvedAnchorElement.nodeType === 1) {
         const box = resolvedAnchorElement.getBoundingClientRect();
-        if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+        if (!globalThis.MUI_TEST_ENV && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
           console.warn(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
         }
       }
@@ -267,7 +267,7 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
       const resolvedAnchorEl = resolveAnchorEl(props.anchorEl);
       if (resolvedAnchorEl && isHTMLElement(resolvedAnchorEl) && resolvedAnchorEl.nodeType === 1) {
         const box = resolvedAnchorEl.getBoundingClientRect();
-        if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+        if (process.env.NODE_ENV !== 'production' && !globalThis.MUI_TEST_ENV && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
           return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
         }
       } else if (!resolvedAnchorEl || typeof resolvedAnchorEl.getBoundingClientRect !== 'function' || isVirtualElement(resolvedAnchorEl) && resolvedAnchorEl.contextElement != null && resolvedAnchorEl.contextElement.nodeType !== 1) {

package/esm/Slide/Slide.js

@@ -263,7 +263,7 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ =
       const resolvedContainer = resolveContainer(props.container);
       if (resolvedContainer && resolvedContainer.nodeType === 1) {
         const box = resolvedContainer.getBoundingClientRect();
-        if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+        if (process.env.NODE_ENV !== 'production' && !globalThis.MUI_TEST_ENV && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
           return new Error(['MUI: The `container` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
         }
       } else if (!resolvedContainer || typeof resolvedContainer.getBoundingClientRect !== 'function' || resolvedContainer.contextElement != null && resolvedContainer.contextElement.nodeType !== 1) {

package/esm/Tabs/Tabs.d.ts

@@ -8,6 +8,7 @@ import { OverridableComponent, OverrideProps } from "../OverridableComponent/ind
 import { TabsClasses } from "./tabsClasses.js";
 import SvgIcon from "../SvgIcon/index.js";
 export interface TabsPropsIndicatorColorOverrides {}
+export interface TabsPropsVariantOverrides {}
 export interface TabsRootSlotPropsOverrides {}
 export interface TabsScrollerSlotPropsOverrides {}
 export interface TabsListSlotPropsOverrides {}
@@ -234,7 +235,7 @@ export interface TabsOwnProps extends TabsSlotsAndSlotProps {
    *  - `standard` will render the default state.
    * @default 'standard'
    */
-  variant?: 'standard' | 'scrollable' | 'fullWidth';
+  variant?: OverridableStringUnion<'standard' | 'scrollable' | 'fullWidth', TabsPropsVariantOverrides>;
   /**
    * If `true`, the scrollbar is visible. It can be useful when displaying
    * a long vertical list of tabs.

package/esm/Tabs/Tabs.js

@@ -378,7 +378,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         }
         tabMeta = tab ? tab.getBoundingClientRect() : null;
         if (process.env.NODE_ENV !== 'production') {
-          if (process.env.NODE_ENV !== 'test' && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 &&
+          if (!globalThis.MUI_TEST_ENV && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 &&
           // if the whole Tabs component is hidden, don't warn
           tabsMeta.clientWidth !== 0) {
             tabsMeta = null;

package/esm/index.js

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

package/esm/internal/SwitchBase.js

@@ -192,7 +192,6 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     additionalProps: {
       centerRipple: true,
       focusRipple: !disableFocusRipple,
-      disabled,
       role: undefined,
       tabIndex: null
     }

package/esm/useAutocomplete/useAutocomplete.d.ts

@@ -362,7 +362,7 @@ export interface UseAutocompleteReturnValue<Value, Multiple extends boolean | un
    * @returns props that should be spread on the li element
    */
   getOptionProps: (renderedOption: UseAutocompleteRenderedOption<Value>) => React.HTMLAttributes<HTMLLIElement> & {
-    key: any;
+    key: React.Key;
   };
   /**
    * Id for the Autocomplete.

package/esm/useAutocomplete/useAutocomplete.js

@@ -486,10 +486,10 @@ function useAutocomplete(props) {
     }, [componentName]);
   }
   React.useEffect(() => {
-    if (filteredOptionsChanged || popupOpen) {
+    if (filteredOptionsChanged || popupOpen && !disableCloseOnSelect) {
       syncHighlightedIndex();
     }
-  }, [syncHighlightedIndex, filteredOptionsChanged, popupOpen]);
+  }, [syncHighlightedIndex, filteredOptionsChanged, popupOpen, disableCloseOnSelect]);
   const handleOpen = event => {
     if (open) {
       return;
@@ -1043,6 +1043,7 @@ function useAutocomplete(props) {
       role: 'listbox',
       id: `${id}-listbox`,
       'aria-labelledby': `${id}-label`,
+      'aria-multiselectable': multiple || undefined,
       ref: handleListboxRef,
       onMouseDown: event => {
         // Prevent blur

package/esm/version/index.js

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

package/index.js

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

package/internal/SwitchBase.js

@@ -199,7 +199,6 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     additionalProps: {
       centerRipple: true,
       focusRipple: !disableFocusRipple,
-      disabled,
       role: undefined,
       tabIndex: null
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "7.3.7",
+  "version": "7.3.8",
   "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": [
@@ -25,7 +25,7 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.4",
+    "@babel/runtime": "^7.28.6",
     "@popperjs/core": "^2.11.8",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
@@ -33,10 +33,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^19.2.3",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^7.3.7",
-    "@mui/system": "^7.3.7",
-    "@mui/utils": "^7.3.7",
-    "@mui/types": "^7.4.10"
+    "@mui/core-downloads-tracker": "^7.3.8",
+    "@mui/system": "^7.3.8",
+    "@mui/types": "^7.4.11",
+    "@mui/utils": "^7.3.8"
   },
   "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.7"
+    "@mui/material-pigment-css": "^7.3.8"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/useAutocomplete/useAutocomplete.d.ts

@@ -362,7 +362,7 @@ export interface UseAutocompleteReturnValue<Value, Multiple extends boolean | un
    * @returns props that should be spread on the li element
    */
   getOptionProps: (renderedOption: UseAutocompleteRenderedOption<Value>) => React.HTMLAttributes<HTMLLIElement> & {
-    key: any;
+    key: React.Key;
   };
   /**
    * Id for the Autocomplete.

package/useAutocomplete/useAutocomplete.js

@@ -494,10 +494,10 @@ function useAutocomplete(props) {
     }, [componentName]);
   }
   React.useEffect(() => {
-    if (filteredOptionsChanged || popupOpen) {
+    if (filteredOptionsChanged || popupOpen && !disableCloseOnSelect) {
       syncHighlightedIndex();
     }
-  }, [syncHighlightedIndex, filteredOptionsChanged, popupOpen]);
+  }, [syncHighlightedIndex, filteredOptionsChanged, popupOpen, disableCloseOnSelect]);
   const handleOpen = event => {
     if (open) {
       return;
@@ -1051,6 +1051,7 @@ function useAutocomplete(props) {
       role: 'listbox',
       id: `${id}-listbox`,
       'aria-labelledby': `${id}-label`,
+      'aria-multiselectable': multiple || undefined,
       ref: handleListboxRef,
       onMouseDown: event => {
         // Prevent blur

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