@mui/material 7.3.5 → 7.3.6

package/esm/Snackbar/Snackbar.js

@@ -157,9 +157,7 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
   const {
     getRootProps,
     onClickAway
-  } = useSnackbar({
-    ...ownerState
-  });
+  } = useSnackbar(ownerState);
   const [exited, setExited] = React.useState(true);
   const handleExited = node => {
     setExited(true);

package/esm/Tabs/Tabs.js

@@ -19,6 +19,7 @@ import useEventCallback from "../utils/useEventCallback.js";
 import tabsClasses, { getTabsUtilityClass } from "./tabsClasses.js";
 import ownerDocument from "../utils/ownerDocument.js";
 import ownerWindow from "../utils/ownerWindow.js";
+import getActiveElement from "../utils/getActiveElement.js";
 import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const nextItem = (list, item) => {
@@ -697,11 +698,11 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       return;
     }
     const list = tabListRef.current;
-    const currentFocus = ownerDocument(list).activeElement;
+    const currentFocus = getActiveElement(ownerDocument(list));
     // Keyboard navigation assumes that [role="tab"] are siblings
     // though we might warn in the future about nested, interactive elements
     // as a a11y violation
-    const role = currentFocus.getAttribute('role');
+    const role = currentFocus?.getAttribute('role');
     if (role !== 'tab') {
       return;
     }

package/esm/TextField/TextField.d.ts

@@ -47,22 +47,27 @@ export interface TextFieldSlots {
    */
   select: React.ElementType;
 }
+export interface TextFieldRootSlotPropsOverrides {}
+export interface TextFieldInputSlotPropsOverrides {}
+export interface TextFieldInputLabelSlotPropsOverrides {}
+export interface TextFieldFormHelperTextSlotPropsOverrides {}
+export interface TextFieldSelectSlotPropsOverrides {}
 export type TextFieldSlotsAndSlotProps<InputPropsType> = CreateSlotsAndSlotProps<TextFieldSlots, {
   /**
    * Props forwarded to the root slot.
    * By default, the available props are based on the [FormControl](https://mui.com/material-ui/api/form-control/#props) component.
    */
-  root: SlotProps<React.ElementType<FormControlProps>, {}, TextFieldOwnerState>;
+  root: SlotProps<React.ElementType<FormControlProps>, TextFieldRootSlotPropsOverrides, TextFieldOwnerState>;
   /**
    * Props forwarded to the input slot.
    * By default, the available props are based on the [Input](https://mui.com/material-ui/api/input/#props) component.
    */
-  input: SlotProps<React.ElementType<InputPropsType>, {}, TextFieldOwnerState>;
+  input: SlotProps<React.ElementType<InputPropsType>, TextFieldInputSlotPropsOverrides, TextFieldOwnerState>;
   /**
    * Props forwarded to the input label slot.
    * By default, the available props are based on the [InputLabel](https://mui.com/material-ui/api/input-label/#props) component.
    */
-  inputLabel: SlotProps<React.ElementType<InputLabelProps>, {}, TextFieldOwnerState>;
+  inputLabel: SlotProps<React.ElementType<InputLabelProps>, TextFieldInputLabelSlotPropsOverrides, TextFieldOwnerState>;
   /**
    * Props forwarded to the html input slot.
    * By default, the available props are based on the html input element.
@@ -72,12 +77,12 @@ export type TextFieldSlotsAndSlotProps<InputPropsType> = CreateSlotsAndSlotProps
    * Props forwarded to the form helper text slot.
    * By default, the available props are based on the [FormHelperText](https://mui.com/material-ui/api/form-helper-text/#props) component.
    */
-  formHelperText: SlotProps<React.ElementType<FormHelperTextProps>, {}, TextFieldOwnerState>;
+  formHelperText: SlotProps<React.ElementType<FormHelperTextProps>, TextFieldFormHelperTextSlotPropsOverrides, TextFieldOwnerState>;
   /**
    * Props forwarded to the select slot.
    * By default, the available props are based on the [Select](https://mui.com/material-ui/api/select/#props) component.
    */
-  select: SlotProps<React.ElementType<SelectProps>, {}, TextFieldOwnerState>;
+  select: SlotProps<React.ElementType<SelectProps>, TextFieldSelectSlotPropsOverrides, TextFieldOwnerState>;
 }>;
 export interface BaseTextFieldProps extends StandardProps<FormControlProps,
 // event handlers are declared on derived interfaces

package/esm/Unstable_TrapFocus/FocusTrap.js

@@ -8,6 +8,7 @@ import ownerDocument from '@mui/utils/ownerDocument';
 import getReactElementRef from '@mui/utils/getReactElementRef';
 import exactProp from '@mui/utils/exactProp';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
+import getActiveElement from "../utils/getActiveElement.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Inspired by https://github.com/focus-trap/tabbable
 const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
@@ -111,7 +112,8 @@ function FocusTrap(props) {
       return;
     }
     const doc = ownerDocument(rootRef.current);
-    if (!rootRef.current.contains(doc.activeElement)) {
+    const activeElement = getActiveElement(doc);
+    if (!rootRef.current.contains(activeElement)) {
       if (!rootRef.current.hasAttribute('tabIndex')) {
         if (process.env.NODE_ENV !== 'production') {
           console.error(['MUI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n'));
@@ -146,6 +148,7 @@ 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') {
@@ -153,8 +156,8 @@ function FocusTrap(props) {
       }
 
       // Make sure the next tab starts from the right place.
-      // doc.activeElement refers to the origin.
-      if (doc.activeElement === rootRef.current && nativeEvent.shiftKey) {
+      // activeElement refers to the origin.
+      if (activeElement === rootRef.current && nativeEvent.shiftKey) {
         // We need to ignore the next contain as
         // it will try to move the focus back to the rootRef element.
         ignoreNextEnforceFocus.current = true;
@@ -171,23 +174,24 @@ function FocusTrap(props) {
       if (rootElement === null) {
         return;
       }
+      const activeEl = getActiveElement(doc);
       if (!doc.hasFocus() || !isEnabled() || ignoreNextEnforceFocus.current) {
         ignoreNextEnforceFocus.current = false;
         return;
       }
 
       // The focus is already inside
-      if (rootElement.contains(doc.activeElement)) {
+      if (rootElement.contains(activeEl)) {
         return;
       }
 
       // The disableEnforceFocus is set and the focus is outside of the focus trap (and sentinel nodes)
-      if (disableEnforceFocus && doc.activeElement !== sentinelStart.current && doc.activeElement !== sentinelEnd.current) {
+      if (disableEnforceFocus && activeEl !== sentinelStart.current && activeEl !== sentinelEnd.current) {
         return;
       }
 
       // if the focus event is not coming from inside the children's react tree, reset the refs
-      if (doc.activeElement !== reactFocusEventTarget.current) {
+      if (activeEl !== reactFocusEventTarget.current) {
         reactFocusEventTarget.current = null;
       } else if (reactFocusEventTarget.current !== null) {
         return;
@@ -196,7 +200,7 @@ function FocusTrap(props) {
         return;
       }
       let tabbable = [];
-      if (doc.activeElement === sentinelStart.current || doc.activeElement === sentinelEnd.current) {
+      if (activeEl === sentinelStart.current || activeEl === sentinelEnd.current) {
         tabbable = getTabbable(rootRef.current);
       }
 
@@ -228,7 +232,8 @@ function FocusTrap(props) {
     // The whatwg spec defines how the browser should behave but does not explicitly mention any events:
     // https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.
     const interval = setInterval(() => {
-      if (doc.activeElement && doc.activeElement.tagName === 'BODY') {
+      const activeEl = getActiveElement(doc);
+      if (activeEl && activeEl.tagName === 'BODY') {
         contain();
       }
     }, 50);

package/esm/index.js

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

package/esm/styles/createThemeNoVars.d.ts

@@ -1,4 +1,4 @@
-import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme, SxProps, CSSObject, SxConfig } from '@mui/system';
+import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme, SxProps, CSSObject, SxConfig, ApplyStyles } from '@mui/system';
 import { Mixins, MixinsOptions } from "./createMixins.js";
 import { Palette, PaletteOptions } from "./createPalette.js";
 import { TypographyVariants, TypographyVariantsOptions } from "./createTypography.js";
@@ -6,7 +6,7 @@ import { Shadows } from "./shadows.js";
 import { Transitions, TransitionsOptions } from "./createTransitions.js";
 import { ZIndex, ZIndexOptions } from "./zIndex.js";
 import { Components } from "./components.js";
-import { CssVarsTheme, CssVarsPalette, ColorSystemOptions, Shape, ShapeOptions } from "./createThemeFoundation.js";
+import { CssVarsTheme, CssVarsPalette, ColorSystemOptions, Shape, ShapeOptions, SupportedColorScheme } from "./createThemeFoundation.js";
 
 /**
  * To disable custom properties, use module augmentation
@@ -46,13 +46,14 @@ export interface BaseTheme extends SystemTheme {
   typography: TypographyVariants;
   zIndex: ZIndex;
   unstable_strictMode?: boolean;
+  applyStyles: ApplyStyles<SupportedColorScheme>;
 }
 
 // shut off automatic exporting for the `BaseTheme` above
 export {};
 type CssVarsProperties = CssThemeVariables extends {
   enabled: true;
-} ? Pick<CssVarsTheme, 'applyStyles' | 'colorSchemes' | 'colorSchemeSelector' | 'rootSelector' | 'cssVarPrefix' | 'defaultColorScheme' | 'getCssVar' | 'getColorSchemeSelector' | 'generateThemeVars' | 'generateStyleSheets' | 'generateSpacing' | 'shouldSkipGeneratingVar' | 'vars'> : Partial<Pick<CssVarsTheme, 'vars'>>;
+} ? Pick<CssVarsTheme, 'colorSchemes' | 'colorSchemeSelector' | 'rootSelector' | 'cssVarPrefix' | 'defaultColorScheme' | 'getCssVar' | 'getColorSchemeSelector' | 'generateThemeVars' | 'generateStyleSheets' | 'generateSpacing' | 'shouldSkipGeneratingVar' | 'vars'> : Partial<Pick<CssVarsTheme, 'vars'>>;
 
 /**
  * Our [TypeScript guide on theme customization](https://mui.com/material-ui/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.

package/esm/styles/createThemeWithVars.d.ts

@@ -9,7 +9,7 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
    * The strategy to generate CSS variables
    *
    * @example 'media'
-   * Generate CSS variables using [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
+   * Generate CSS variables using [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme)
    *
    * @example '.mode-%s'
    * Generate CSS variables within a class .mode-light, .mode-dark
@@ -25,7 +25,7 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
   cssVarPrefix?: string;
   /**
    * If `true`, the CSS color-scheme will not be set.
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme
    * @default false
    */
   disableCssColorScheme?: boolean;

package/esm/useAutocomplete/useAutocomplete.js

@@ -465,7 +465,7 @@ function useAutocomplete(props) {
   filteredOptions.length,
   // Don't sync the highlighted index with the value when multiple
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  multiple ? false : value, filterSelectedOptions, changeHighlightedIndex, setHighlightedIndex, popupOpen, inputValue, multiple]);
+  multiple ? false : value, changeHighlightedIndex, setHighlightedIndex, popupOpen, inputValue, multiple]);
   const handleListboxRef = useEventCallback(node => {
     setRef(listboxRef, node);
     if (!node) {
@@ -693,7 +693,8 @@ function useAutocomplete(props) {
           handleOpen(event);
           break;
         case 'ArrowLeft':
-          if (!multiple && renderValue) {
+          if (!multiple && renderValue && value != null) {
+            setFocusedItem(0);
             focusItem(0);
           } else {
             handleFocusItem(event, 'previous');
@@ -701,6 +702,7 @@ function useAutocomplete(props) {
           break;
         case 'ArrowRight':
           if (!multiple && renderValue) {
+            setFocusedItem(-1);
             focusItem(-1);
           } else {
             handleFocusItem(event, 'next');
@@ -757,6 +759,7 @@ function useAutocomplete(props) {
           }
           if (!multiple && renderValue && !readOnly) {
             setValueState(null);
+            setFocusedItem(-1);
             focusItem(-1);
           }
           break;
@@ -772,6 +775,7 @@ function useAutocomplete(props) {
           }
           if (!multiple && renderValue && !readOnly) {
             setValueState(null);
+            setFocusedItem(-1);
             focusItem(-1);
           }
           break;
@@ -781,6 +785,15 @@ function useAutocomplete(props) {
   };
   const handleFocus = event => {
     setFocused(true);
+
+    // When focusing the input, ensure any previously focused item (chip)
+    // is cleared so the input receives the visible caret and the
+    // input-focused styling is applied.
+    if (focusedItem !== -1) {
+      setFocusedItem(-1);
+      // Ensure DOM focus lands on the input
+      focusItem(-1);
+    }
     if (openOnFocus && !ignoreFocus.current) {
       handleOpen(event);
     }

package/esm/utils/getActiveElement.d.ts

@@ -0,0 +1,2 @@
+import getActiveElement from '@mui/utils/getActiveElement';
+export default getActiveElement;

package/esm/utils/getActiveElement.js

@@ -0,0 +1,2 @@
+import getActiveElement from '@mui/utils/getActiveElement';
+export default getActiveElement;

package/esm/version/index.js

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

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "7.3.5",
+  "version": "7.3.6",
   "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": [
@@ -33,10 +33,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^19.2.0",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^7.3.5",
-    "@mui/system": "^7.3.5",
-    "@mui/types": "^7.4.8",
-    "@mui/utils": "^7.3.5"
+    "@mui/core-downloads-tracker": "^7.3.6",
+    "@mui/system": "^7.3.6",
+    "@mui/types": "^7.4.9",
+    "@mui/utils": "^7.3.6"
   },
   "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.5"
+    "@mui/material-pigment-css": "^7.3.6"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/styles/createThemeNoVars.d.ts

@@ -1,4 +1,4 @@
-import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme, SxProps, CSSObject, SxConfig } from '@mui/system';
+import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme, SxProps, CSSObject, SxConfig, ApplyStyles } from '@mui/system';
 import { Mixins, MixinsOptions } from "./createMixins.js";
 import { Palette, PaletteOptions } from "./createPalette.js";
 import { TypographyVariants, TypographyVariantsOptions } from "./createTypography.js";
@@ -6,7 +6,7 @@ import { Shadows } from "./shadows.js";
 import { Transitions, TransitionsOptions } from "./createTransitions.js";
 import { ZIndex, ZIndexOptions } from "./zIndex.js";
 import { Components } from "./components.js";
-import { CssVarsTheme, CssVarsPalette, ColorSystemOptions, Shape, ShapeOptions } from "./createThemeFoundation.js";
+import { CssVarsTheme, CssVarsPalette, ColorSystemOptions, Shape, ShapeOptions, SupportedColorScheme } from "./createThemeFoundation.js";
 
 /**
  * To disable custom properties, use module augmentation
@@ -46,13 +46,14 @@ export interface BaseTheme extends SystemTheme {
   typography: TypographyVariants;
   zIndex: ZIndex;
   unstable_strictMode?: boolean;
+  applyStyles: ApplyStyles<SupportedColorScheme>;
 }
 
 // shut off automatic exporting for the `BaseTheme` above
 export {};
 type CssVarsProperties = CssThemeVariables extends {
   enabled: true;
-} ? Pick<CssVarsTheme, 'applyStyles' | 'colorSchemes' | 'colorSchemeSelector' | 'rootSelector' | 'cssVarPrefix' | 'defaultColorScheme' | 'getCssVar' | 'getColorSchemeSelector' | 'generateThemeVars' | 'generateStyleSheets' | 'generateSpacing' | 'shouldSkipGeneratingVar' | 'vars'> : Partial<Pick<CssVarsTheme, 'vars'>>;
+} ? Pick<CssVarsTheme, 'colorSchemes' | 'colorSchemeSelector' | 'rootSelector' | 'cssVarPrefix' | 'defaultColorScheme' | 'getCssVar' | 'getColorSchemeSelector' | 'generateThemeVars' | 'generateStyleSheets' | 'generateSpacing' | 'shouldSkipGeneratingVar' | 'vars'> : Partial<Pick<CssVarsTheme, 'vars'>>;
 
 /**
  * Our [TypeScript guide on theme customization](https://mui.com/material-ui/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.

package/styles/createThemeWithVars.d.ts

@@ -9,7 +9,7 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
    * The strategy to generate CSS variables
    *
    * @example 'media'
-   * Generate CSS variables using [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
+   * Generate CSS variables using [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme)
    *
    * @example '.mode-%s'
    * Generate CSS variables within a class .mode-light, .mode-dark
@@ -25,7 +25,7 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
   cssVarPrefix?: string;
   /**
    * If `true`, the CSS color-scheme will not be set.
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme
    * @default false
    */
   disableCssColorScheme?: boolean;

package/useAutocomplete/useAutocomplete.js

@@ -473,7 +473,7 @@ function useAutocomplete(props) {
   filteredOptions.length,
   // Don't sync the highlighted index with the value when multiple
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  multiple ? false : value, filterSelectedOptions, changeHighlightedIndex, setHighlightedIndex, popupOpen, inputValue, multiple]);
+  multiple ? false : value, changeHighlightedIndex, setHighlightedIndex, popupOpen, inputValue, multiple]);
   const handleListboxRef = (0, _useEventCallback.default)(node => {
     (0, _setRef.default)(listboxRef, node);
     if (!node) {
@@ -701,7 +701,8 @@ function useAutocomplete(props) {
           handleOpen(event);
           break;
         case 'ArrowLeft':
-          if (!multiple && renderValue) {
+          if (!multiple && renderValue && value != null) {
+            setFocusedItem(0);
             focusItem(0);
           } else {
             handleFocusItem(event, 'previous');
@@ -709,6 +710,7 @@ function useAutocomplete(props) {
           break;
         case 'ArrowRight':
           if (!multiple && renderValue) {
+            setFocusedItem(-1);
             focusItem(-1);
           } else {
             handleFocusItem(event, 'next');
@@ -765,6 +767,7 @@ function useAutocomplete(props) {
           }
           if (!multiple && renderValue && !readOnly) {
             setValueState(null);
+            setFocusedItem(-1);
             focusItem(-1);
           }
           break;
@@ -780,6 +783,7 @@ function useAutocomplete(props) {
           }
           if (!multiple && renderValue && !readOnly) {
             setValueState(null);
+            setFocusedItem(-1);
             focusItem(-1);
           }
           break;
@@ -789,6 +793,15 @@ function useAutocomplete(props) {
   };
   const handleFocus = event => {
     setFocused(true);
+
+    // When focusing the input, ensure any previously focused item (chip)
+    // is cleared so the input receives the visible caret and the
+    // input-focused styling is applied.
+    if (focusedItem !== -1) {
+      setFocusedItem(-1);
+      // Ensure DOM focus lands on the input
+      focusItem(-1);
+    }
     if (openOnFocus && !ignoreFocus.current) {
       handleOpen(event);
     }

package/utils/getActiveElement.d.ts

@@ -0,0 +1,2 @@
+import getActiveElement from '@mui/utils/getActiveElement';
+export default getActiveElement;

package/utils/getActiveElement.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _getActiveElement = _interopRequireDefault(require("@mui/utils/getActiveElement"));
+var _default = exports.default = _getActiveElement.default;

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