@mui/material 7.3.4 → 7.3.6

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/Zoom/Zoom.d.ts

@@ -34,7 +34,7 @@ export interface ZoomProps extends TransitionProps {
 
 /**
  * The Zoom transition can be used for the floating variant of the
- * [Button](https://mui.com/material-ui/react-button/#floating-action-buttons) component.
+ * [Button](https://mui.com/material-ui/react-floating-action-button/#animation) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:

package/esm/Zoom/Zoom.js

@@ -20,7 +20,7 @@ const styles = {
 
 /**
  * The Zoom transition can be used for the floating variant of the
- * [Button](/material-ui/react-button/#floating-action-buttons) component.
+ * [Button](/material-ui/react-floating-action-button/#animation) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {

package/esm/index.js

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

package/esm/internal/svg-icons/Add.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import { createSvgIcon } from "../../utils/index.js";
 
 /**

package/esm/internal/svg-icons/ArrowDownward.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/ArrowDropDown.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/Cancel.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/CheckBox.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/CheckBoxOutlineBlank.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/CheckCircle.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/Close.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/ErrorOutline.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/FirstPage.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/IndeterminateCheckBox.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/InfoOutlined.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/KeyboardArrowLeft.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/KeyboardArrowRight.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/LastPage.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/MoreHoriz.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/NavigateBefore.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/NavigateNext.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/Person.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/RadioButtonChecked.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/RadioButtonUnchecked.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/ReportProblemOutlined.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/Star.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/StarBorder.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/SuccessOutlined.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/internal/svg-icons/Warning.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import createSvgIcon from "../../utils/createSvgIcon.js";
 
 /**

package/esm/locale/caES.js

@@ -1,28 +1,31 @@
 export const caES = {
   components: {
-    // MuiBreadcrumbs: {
-    //   defaultProps: {
-    //    expandText: 'Show path',
-    //   },
-    // },
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'Mostra el camí'
+      }
+    },
     MuiTablePagination: {
       defaultProps: {
-        // getItemAriaLabel: (type) => {
-        //   if (type === 'first') {
-        //     return 'Go to first page';
-        //   }
-        //   if (type === 'last') {
-        //     return 'Go to last page';
-        //   }
-        //   if (type === 'next') {
-        //     return 'Go to next page';
-        //   }
-        //   // if (type === 'previous') {
-        //   return 'Go to previous page';
-        // },
-        labelRowsPerPage: 'Files per pàgina:'
-        // labelDisplayedRows: ({ from, to, count }) =>
-        //   `${from}–${to} de ${count !== -1 ? count : `more than ${to}`}`,
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'Ves a la primera pàgina';
+          }
+          if (type === 'last') {
+            return "Ves a l'última pàgina";
+          }
+          if (type === 'next') {
+            return 'Ves a la pàgina següent';
+          }
+          // if (type === 'previous') {
+          return 'Ves a la pàgina anterior';
+        },
+        labelRowsPerPage: 'Files per pàgina:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} de ${count !== -1 ? count : `més de ${to}`}`
       }
     },
     MuiRating: {
@@ -44,27 +47,27 @@ export const caES = {
       defaultProps: {
         closeText: 'Tancat'
       }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'Navegació entre pàgines',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : 'Ves a la '}pàgina ${page}`;
+          }
+          if (type === 'first') {
+            return 'Ves a la primera pàgina';
+          }
+          if (type === 'last') {
+            return "Ves a l'última pàgina";
+          }
+          if (type === 'next') {
+            return 'Ves a la pàgina següent';
+          }
+          // if (type === 'previous') {
+          return 'Ves a la pàgina anterior';
+        }
+      }
     }
-    // MuiPagination: {
-    //   defaultProps: {
-    //     'aria-label': 'Pagination navigation',
-    //     getItemAriaLabel: (type, page, selected) => {
-    //       if (type === 'page') {
-    //         return `${selected ? '' : 'Go to '}page ${page}`;
-    //       }
-    //       if (type === 'first') {
-    //         return 'Go to first page';
-    //       }
-    //       if (type === 'last') {
-    //         return 'Go to last page';
-    //       }
-    //       if (type === 'next') {
-    //         return 'Go to next page';
-    //       }
-    //       // if (type === 'previous') {
-    //       return 'Go to previous page';
-    //     },
-    //   },
-    // },
   }
 };

package/esm/styles/ThemeProvider.d.ts

@@ -72,5 +72,5 @@ export interface ThemeProviderProps<Theme = DefaultTheme> extends ThemeProviderC
 export default function ThemeProvider<Theme = DefaultTheme>({
   theme,
   ...props
-}: ThemeProviderProps<Theme>): React.JSX.Element;
+}: ThemeProviderProps<Theme>): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/styles/ThemeProviderWithVars.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
 import { SupportedColorScheme } from "./createThemeWithVars.js";
 declare const useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, deprecatedGetInitColorSchemeScript: typeof import("@mui/system/InitColorSchemeScript").default;
-declare function Experimental_CssVarsProvider(props: any): React.JSX.Element;
+declare function Experimental_CssVarsProvider(props: any): import("react/jsx-runtime").JSX.Element;
 declare const getInitColorSchemeScript: typeof deprecatedGetInitColorSchemeScript;
 /**
  * TODO: remove this export in v7
@@ -26,7 +25,7 @@ declare const getInitColorSchemeScript: typeof deprecatedGetInitColorSchemeScrip
  *
  * To see the full documentation, check out https://mui.com/material-ui/customization/css-theme-variables/usage/.
  */
-export declare const CssVarsProvider: (props: React.PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
+export declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
   theme?: {
     cssVariables?: false;
     cssVarPrefix?: string;

package/esm/styles/ThemeProviderWithVars.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import styleFunctionSx from '@mui/system/styleFunctionSx';
 import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
 import createTheme from "./createTheme.js";

package/esm/styles/createThemeFoundation.d.ts

@@ -1,5 +1,5 @@
 import { OverridableStringUnion } from '@mui/types';
-import { SxConfig, SxProps, CSSObject, ApplyStyles, Theme as SystemTheme } from '@mui/system';
+import { SxConfig, SxProps, CSSObject, ApplyStyles, Theme as SystemTheme, Shape as SystemShape, ShapeOptions as SystemShapeOptions } from '@mui/system';
 import { ExtractTypographyTokens } from '@mui/system/cssVars';
 import { Palette, PaletteOptions } from "./createPalette.js";
 import { Shadows } from "./shadows.js";
@@ -152,6 +152,8 @@ export interface PaletteTableCell {
 export interface PaletteTooltip {
   bg: string;
 }
+export interface Shape extends SystemShape {}
+export interface ShapeOptions extends SystemShapeOptions {}
 export interface ColorSystemOptions {
   palette?: PaletteOptions & {
     background?: Partial<PaletteBackgroundChannel>;
@@ -224,7 +226,7 @@ export interface ThemeVars {
   opacity: Opacity;
   overlays: Overlays;
   shadows: Shadows;
-  shape: SystemTheme['shape'];
+  shape: Shape;
   spacing: string;
   zIndex: ZIndex;
 }
@@ -256,7 +258,7 @@ export interface CssVarsTheme extends ColorSystem {
   generateSpacing: () => SystemTheme['spacing'];
   spacing: SystemTheme['spacing'];
   breakpoints: SystemTheme['breakpoints'];
-  shape: SystemTheme['shape'];
+  shape: Shape;
   typography: TypographyVariants;
   transitions: Transitions;
   shadows: Shadows;

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 } 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/esm/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/esm/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/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;