@mui/material 7.3.4 → 7.3.6

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 } from "./createThemeFoundation.js";
+import { CssVarsTheme, CssVarsPalette, ColorSystemOptions, Shape, ShapeOptions, SupportedColorScheme } from "./createThemeFoundation.js";
 
 /**
  * To disable custom properties, use module augmentation
@@ -27,6 +27,7 @@ export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'>, CssVar
   components?: Components<Omit<Theme, 'components'>>;
   palette?: PaletteOptions;
   shadows?: Shadows;
+  shape?: ShapeOptions;
   transitions?: TransitionsOptions;
   typography?: TypographyVariantsOptions | ((palette: Palette) => TypographyVariantsOptions);
   zIndex?: ZIndexOptions;
@@ -40,17 +41,19 @@ export interface BaseTheme extends SystemTheme {
     enabled: true;
   } ? CssVarsPalette : {});
   shadows: Shadows;
+  shape: Shape;
   transitions: Transitions;
   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

@@ -1,15 +1,15 @@
 import { ThemeOptions, Theme } from "./createThemeNoVars.js";
 import { Components } from "./components.js";
-import { DefaultColorScheme, ColorSchemeOverrides, ExtendedColorScheme, SupportedColorScheme, Opacity, Overlays, PaletteBackgroundChannel, PaletteCommonChannel, PaletteColorChannel, PaletteActionChannel, PaletteTextChannel, PaletteAlert, PaletteAppBar, PaletteAvatar, PaletteButton, PaletteChip, PaletteFilledInput, PaletteLinearProgress, PaletteSkeleton, PaletteSlider, PaletteSnackbarContent, PaletteSpeedDialAction, PaletteStepConnector, PaletteStepContent, PaletteSwitch, PaletteTableCell, PaletteTooltip, ColorSystemOptions, CssVarsPalette, ColorSystem, ThemeVars, ThemeCssVarOverrides, ThemeCssVar, CssVarsTheme } from "./createThemeFoundation.js";
+import { DefaultColorScheme, ColorSchemeOverrides, ExtendedColorScheme, SupportedColorScheme, Opacity, Overlays, PaletteBackgroundChannel, PaletteCommonChannel, PaletteColorChannel, PaletteActionChannel, PaletteTextChannel, PaletteAlert, PaletteAppBar, PaletteAvatar, PaletteButton, PaletteChip, PaletteFilledInput, PaletteLinearProgress, PaletteSkeleton, PaletteSlider, PaletteSnackbarContent, PaletteSpeedDialAction, PaletteStepConnector, PaletteStepContent, PaletteSwitch, PaletteTableCell, PaletteTooltip, ColorSystemOptions, CssVarsPalette, ColorSystem, ThemeVars, ThemeCssVarOverrides, ThemeCssVar, CssVarsTheme, Shape, ShapeOptions } from "./createThemeFoundation.js";
 
 // Re-export all types from foundation to maintain backward compatibility
-export type { DefaultColorScheme, ColorSchemeOverrides, ExtendedColorScheme, SupportedColorScheme, Opacity, Overlays, PaletteBackgroundChannel, PaletteCommonChannel, PaletteColorChannel, PaletteActionChannel, PaletteTextChannel, PaletteAlert, PaletteAppBar, PaletteAvatar, PaletteButton, PaletteChip, PaletteFilledInput, PaletteLinearProgress, PaletteSkeleton, PaletteSlider, PaletteSnackbarContent, PaletteSpeedDialAction, PaletteStepConnector, PaletteStepContent, PaletteSwitch, PaletteTableCell, PaletteTooltip, ColorSystemOptions, CssVarsPalette, ColorSystem, ThemeVars, ThemeCssVarOverrides, ThemeCssVar, CssVarsTheme };
+export type { DefaultColorScheme, ColorSchemeOverrides, ExtendedColorScheme, SupportedColorScheme, Opacity, Overlays, PaletteBackgroundChannel, PaletteCommonChannel, PaletteColorChannel, PaletteActionChannel, PaletteTextChannel, PaletteAlert, PaletteAppBar, PaletteAvatar, PaletteButton, PaletteChip, PaletteFilledInput, PaletteLinearProgress, PaletteSkeleton, PaletteSlider, PaletteSnackbarContent, PaletteSpeedDialAction, PaletteStepConnector, PaletteStepContent, PaletteSwitch, PaletteTableCell, PaletteTooltip, ColorSystemOptions, CssVarsPalette, ColorSystem, ThemeVars, ThemeCssVarOverrides, ThemeCssVar, CssVarsTheme, Shape, ShapeOptions };
 export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'components'> {
   /**
    * 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/styles/index.d.ts

@@ -59,7 +59,7 @@ export { default as withTheme } from "./withTheme.js";
 export * from "./ThemeProviderWithVars.js";
 export type { StorageManager } from '@mui/system/cssVars';
 export { default as extendTheme } from "./createThemeWithVars.js";
-export type { ColorSchemeOverrides, SupportedColorScheme, ColorSystem, CssVarsPalette, Opacity, Overlays, PaletteAlert, PaletteActionChannel, PaletteAppBar, PaletteAvatar, PaletteChip, PaletteColorChannel, PaletteCommonChannel, PaletteFilledInput, PaletteLinearProgress, PaletteSkeleton, PaletteSlider, PaletteSnackbarContent, PaletteSpeedDialAction, PaletteStepConnector, PaletteStepContent, PaletteSwitch, PaletteTableCell, PaletteTextChannel, PaletteTooltip, CssVarsThemeOptions, CssVarsTheme, ThemeVars, ThemeCssVar, ThemeCssVarOverrides, ColorSystemOptions } from "./createThemeWithVars.js";
+export type { ColorSchemeOverrides, SupportedColorScheme, ColorSystem, CssVarsPalette, Opacity, Overlays, PaletteAlert, PaletteActionChannel, PaletteAppBar, PaletteAvatar, PaletteChip, PaletteColorChannel, PaletteCommonChannel, PaletteFilledInput, PaletteLinearProgress, PaletteSkeleton, PaletteSlider, PaletteSnackbarContent, PaletteSpeedDialAction, PaletteStepConnector, PaletteStepContent, PaletteSwitch, PaletteTableCell, PaletteTextChannel, PaletteTooltip, CssVarsThemeOptions, CssVarsTheme, ThemeVars, ThemeCssVar, ThemeCssVarOverrides, ColorSystemOptions, Shape, ShapeOptions } from "./createThemeWithVars.js";
 export { default as getOverlayAlpha } from "./getOverlayAlpha.js";
 export { default as shouldSkipGeneratingVar } from "./shouldSkipGeneratingVar.js";
 

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

package/zero-styled/index.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Interpolation } from '@mui/system';
 import { extendSxProp } from '@mui/system/styleFunctionSx';
 import { Theme } from "../styles/createTheme.js";
@@ -7,6 +6,6 @@ export { css, keyframes } from '@mui/system';
 export { default as styled } from "../styles/styled.js";
 export declare function globalCss(styles: Interpolation<{
   theme: Theme;
-}>): (props: Record<string, any>) => React.JSX.Element;
+}>): (props: Record<string, any>) => import("react/jsx-runtime").JSX.Element;
 export declare function internal_createExtendSxProp(): typeof extendSxProp;
 export { useTheme };

package/zero-styled/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -31,7 +30,6 @@ Object.defineProperty(exports, "useTheme", {
     return _useTheme.default;
   }
 });
-var React = _interopRequireWildcard(require("react"));
 var _styleFunctionSx = require("@mui/system/styleFunctionSx");
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _GlobalStyles = _interopRequireDefault(require("../GlobalStyles"));