@mui/material 9.0.0-beta.1 → 9.0.1

package/Drawer/Drawer.mjs

@@ -14,8 +14,10 @@ import rootShouldForwardProp from "../styles/rootShouldForwardProp.mjs";
 import { styled, useTheme } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
+import useForkRef from "../utils/useForkRef.mjs";
 import { getDrawerUtilityClass } from "./drawerClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { FOCUSABLE_ATTRIBUTE } from "../utils/focusable.mjs";
 import { mergeSlotProps } from "../utils/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const overridesResolver = (props, styles) => {
@@ -58,10 +60,7 @@ const DrawerDockedRoot = styled('div', {
 });
 const DrawerPaper = styled(Paper, {
   name: 'MuiDrawer',
-  slot: 'Paper',
-  overridesResolver: (props, styles) => {
-    return [styles.paper];
-  }
+  slot: 'Paper'
 })(memoTheme(({
   theme
 }) => ({
@@ -197,9 +196,15 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
   // We use this state is order to skip the appear transition during the
   // initial mount of the component.
   const mounted = React.useRef(false);
+  const rootRef = React.useRef(null);
+  const handleRef = useForkRef(ref, rootRef);
   React.useEffect(() => {
     mounted.current = true;
   }, []);
+
+  // Resolve the container lazily so Slide reads the mounted modal root
+  // after refs are assigned, rather than the initial null ref during render.
+  const resolveSlideContainer = React.useCallback(() => rootRef.current, []);
   const anchorInvariant = getAnchor({
     direction: isRtl ? 'rtl' : 'ltr'
   }, anchorProp);
@@ -223,7 +228,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     }
   };
   const [RootSlot, rootSlotProps] = useSlot('root', {
-    ref,
+    ref: handleRef,
     elementType: DrawerRoot,
     className: clsx(classes.root, classes.modal, className),
     shouldForwardComponentProp: true,
@@ -234,6 +239,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       ...ModalProps
     },
     additionalProps: {
+      closeAfterTransition: true,
       open,
       onClose,
       hideBackdrop,
@@ -256,13 +262,15 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       square: true,
       ...(variant === 'temporary' && {
         role: 'dialog',
-        'aria-modal': 'true'
+        'aria-modal': 'true',
+        [FOCUSABLE_ATTRIBUTE]: '',
+        tabIndex: -1
       })
     }
   });
   const [DockedSlot, dockedSlotProps] = useSlot('docked', {
     elementType: DrawerDockedRoot,
-    ref,
+    ref: handleRef,
     className: clsx(classes.root, classes.docked, className),
     ownerState,
     externalForwardedProps,
@@ -276,7 +284,10 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       in: open,
       direction: oppositeDirection[anchorInvariant],
       timeout: transitionDuration,
-      appear: mounted.current
+      appear: mounted.current,
+      ...(variant === 'temporary' && (slots.transition == null || slots.transition === Slide) && {
+        container: resolveSlideContainer
+      })
     }
   });
   const drawer = /*#__PURE__*/_jsx(PaperSlot, {

package/Fab/Fab.d.mts

@@ -68,12 +68,12 @@ export type FabTypeMap<AdditionalProps = {}, RootComponent extends React.Element
  *
  * Demos:
  *
- * - [Floating Action Button](https://next.mui.com/material-ui/react-floating-action-button/)
+ * - [Floating Action Button](https://mui.com/material-ui/react-floating-action-button/)
  *
  * API:
  *
- * - [Fab API](https://next.mui.com/material-ui/api/fab/)
- * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
+ * - [Fab API](https://mui.com/material-ui/api/fab/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
  */
 declare const Fab: ExtendButtonBase<FabTypeMap>;
 export type FabProps<RootComponent extends React.ElementType = FabTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<FabTypeMap<AdditionalProps, RootComponent>, RootComponent> & {

package/Fab/Fab.d.ts

@@ -68,12 +68,12 @@ export type FabTypeMap<AdditionalProps = {}, RootComponent extends React.Element
  *
  * Demos:
  *
- * - [Floating Action Button](https://next.mui.com/material-ui/react-floating-action-button/)
+ * - [Floating Action Button](https://mui.com/material-ui/react-floating-action-button/)
  *
  * API:
  *
- * - [Fab API](https://next.mui.com/material-ui/api/fab/)
- * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
+ * - [Fab API](https://mui.com/material-ui/api/fab/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
  */
 declare const Fab: ExtendButtonBase<FabTypeMap>;
 export type FabProps<RootComponent extends React.ElementType = FabTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<FabTypeMap<AdditionalProps, RootComponent>, RootComponent> & {

package/Fab/Fab.js

@@ -194,6 +194,12 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     variant
   };
   const classes = useUtilityClasses(ownerState);
+
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(FabRoot, {
     className: (0, _clsx.default)(classes.root, className),
     component: component,
@@ -204,7 +210,7 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     ownerState: ownerState,
     ref: ref,
     ...other,
-    classes: classes,
+    classes: forwardedClasses,
     children: children
   });
 });

package/Fab/Fab.mjs

@@ -187,6 +187,12 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     variant
   };
   const classes = useUtilityClasses(ownerState);
+
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   return /*#__PURE__*/_jsx(FabRoot, {
     className: clsx(classes.root, className),
     component: component,
@@ -197,7 +203,7 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     ownerState: ownerState,
     ref: ref,
     ...other,
-    classes: classes,
+    classes: forwardedClasses,
     children: children
   });
 });

package/Fade/Fade.d.mts

@@ -33,16 +33,16 @@ export interface FadeProps extends Omit<TransitionProps, 'children'> {
 }
 
 /**
- * The Fade transition is used by the [Modal](https://next.mui.com/material-ui/react-modal/) component.
+ * The Fade transition is used by the [Modal](https://mui.com/material-ui/react-modal/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *
- * - [Transitions](https://next.mui.com/material-ui/transitions/)
+ * - [Transitions](https://mui.com/material-ui/transitions/)
  *
  * API:
  *
- * - [Fade API](https://next.mui.com/material-ui/api/fade/)
+ * - [Fade API](https://mui.com/material-ui/api/fade/)
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
 export default function Fade(props: FadeProps): React.JSX.Element;

package/Fade/Fade.d.ts

@@ -33,16 +33,16 @@ export interface FadeProps extends Omit<TransitionProps, 'children'> {
 }
 
 /**
- * The Fade transition is used by the [Modal](https://next.mui.com/material-ui/react-modal/) component.
+ * The Fade transition is used by the [Modal](https://mui.com/material-ui/react-modal/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *
- * - [Transitions](https://next.mui.com/material-ui/transitions/)
+ * - [Transitions](https://mui.com/material-ui/transitions/)
  *
  * API:
  *
- * - [Fade API](https://next.mui.com/material-ui/api/fade/)
+ * - [Fade API](https://mui.com/material-ui/api/fade/)
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
 export default function Fade(props: FadeProps): React.JSX.Element;

package/Fade/Fade.js

@@ -22,8 +22,18 @@ const styles = {
   },
   entered: {
     opacity: 1
+  },
+  exiting: {
+    opacity: 0
+  },
+  exited: {
+    opacity: 0
   }
 };
+const hiddenStyles = {
+  opacity: 0,
+  visibility: 'hidden'
+};
 
 /**
  * The Fade transition is used by the [Modal](/material-ui/react-modal/) component.
@@ -49,27 +59,12 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     onExiting,
     style,
     timeout = defaultTimeout,
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = _reactTransitionGroup.Transition,
     ...other
   } = props;
-  const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactElementRef.default)(children), ref);
-  const normalizedTransitionCallback = callback => maybeIsAppearing => {
-    if (callback) {
-      const node = nodeRef.current;
-
-      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
-      if (maybeIsAppearing === undefined) {
-        callback(node);
-      } else {
-        callback(node, maybeIsAppearing);
-      }
-    }
-  };
-  const handleEntering = normalizedTransitionCallback(onEntering);
-  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
+  const handleEntering = (0, _utils.normalizedTransitionCallback)(nodeRef, onEntering);
+  const handleEnter = (0, _utils.normalizedTransitionCallback)(nodeRef, (node, isAppearing) => {
     (0, _utils.reflow)(node); // So the animation always start from the start.
 
     const transitionProps = (0, _utils.getTransitionProps)({
@@ -79,15 +74,14 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     }, {
       mode: 'enter'
     });
-    node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
     node.style.transition = theme.transitions.create('opacity', transitionProps);
     if (onEnter) {
       onEnter(node, isAppearing);
     }
   });
-  const handleEntered = normalizedTransitionCallback(onEntered);
-  const handleExiting = normalizedTransitionCallback(onExiting);
-  const handleExit = normalizedTransitionCallback(node => {
+  const handleEntered = (0, _utils.normalizedTransitionCallback)(nodeRef, onEntered);
+  const handleExiting = (0, _utils.normalizedTransitionCallback)(nodeRef, onExiting);
+  const handleExit = (0, _utils.normalizedTransitionCallback)(nodeRef, node => {
     const transitionProps = (0, _utils.getTransitionProps)({
       style,
       timeout,
@@ -95,23 +89,30 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     }, {
       mode: 'exit'
     });
-    node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
     node.style.transition = theme.transitions.create('opacity', transitionProps);
     if (onExit) {
       onExit(node);
     }
   });
-  const handleExited = normalizedTransitionCallback(onExited);
+  const handleExited = (0, _utils.normalizedTransitionCallback)(nodeRef, node => {
+    // Clear the transition CSS to release the compositor layer when the
+    // element is fully exited (prevents idle CPU usage on fixed elements
+    // like Backdrop). handleEnter re-sets it on the next open.
+    node.style.transition = '';
+    if (onExited) {
+      onExited(node);
+    }
+  });
   const handleAddEndListener = next => {
     if (addEndListener) {
       // Old call signature before `react-transition-group` implemented `nodeRef`
       addEndListener(nodeRef.current, next);
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.Transition, {
     appear: appear,
     in: inProp,
-    nodeRef: enableStrictModeCompat ? nodeRef : undefined,
+    nodeRef: nodeRef,
     onEnter: handleEnter,
     onEntered: handleEntered,
     onEntering: handleEntering,
@@ -125,14 +126,9 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
       ownerState,
       ...restChildProps
     }) => {
+      const childStyle = (0, _utils.getTransitionChildStyle)(state, inProp, styles, hiddenStyles, style, children.props.style);
       return /*#__PURE__*/React.cloneElement(children, {
-        style: {
-          opacity: 0,
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
-          ...styles[state],
-          ...style,
-          ...children.props.style
-        },
+        style: childStyle,
         ref: handleRef,
         ...restChildProps
       });

package/Fade/Fade.mjs

@@ -6,7 +6,7 @@ import { Transition } from 'react-transition-group';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import getReactElementRef from '@mui/utils/getReactElementRef';
 import { useTheme } from "../zero-styled/index.mjs";
-import { reflow, getTransitionProps } from "../transitions/utils.mjs";
+import { normalizedTransitionCallback, reflow, getTransitionProps, getTransitionChildStyle } from "../transitions/utils.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
@@ -15,8 +15,18 @@ const styles = {
   },
   entered: {
     opacity: 1
+  },
+  exiting: {
+    opacity: 0
+  },
+  exited: {
+    opacity: 0
   }
 };
+const hiddenStyles = {
+  opacity: 0,
+  visibility: 'hidden'
+};
 
 /**
  * The Fade transition is used by the [Modal](/material-ui/react-modal/) component.
@@ -42,27 +52,12 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     onExiting,
     style,
     timeout = defaultTimeout,
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = Transition,
     ...other
   } = props;
-  const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
-  const normalizedTransitionCallback = callback => maybeIsAppearing => {
-    if (callback) {
-      const node = nodeRef.current;
-
-      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
-      if (maybeIsAppearing === undefined) {
-        callback(node);
-      } else {
-        callback(node, maybeIsAppearing);
-      }
-    }
-  };
-  const handleEntering = normalizedTransitionCallback(onEntering);
-  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
+  const handleEntering = normalizedTransitionCallback(nodeRef, onEntering);
+  const handleEnter = normalizedTransitionCallback(nodeRef, (node, isAppearing) => {
     reflow(node); // So the animation always start from the start.
 
     const transitionProps = getTransitionProps({
@@ -72,15 +67,14 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     }, {
       mode: 'enter'
     });
-    node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
     node.style.transition = theme.transitions.create('opacity', transitionProps);
     if (onEnter) {
       onEnter(node, isAppearing);
     }
   });
-  const handleEntered = normalizedTransitionCallback(onEntered);
-  const handleExiting = normalizedTransitionCallback(onExiting);
-  const handleExit = normalizedTransitionCallback(node => {
+  const handleEntered = normalizedTransitionCallback(nodeRef, onEntered);
+  const handleExiting = normalizedTransitionCallback(nodeRef, onExiting);
+  const handleExit = normalizedTransitionCallback(nodeRef, node => {
     const transitionProps = getTransitionProps({
       style,
       timeout,
@@ -88,23 +82,30 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     }, {
       mode: 'exit'
     });
-    node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
     node.style.transition = theme.transitions.create('opacity', transitionProps);
     if (onExit) {
       onExit(node);
     }
   });
-  const handleExited = normalizedTransitionCallback(onExited);
+  const handleExited = normalizedTransitionCallback(nodeRef, node => {
+    // Clear the transition CSS to release the compositor layer when the
+    // element is fully exited (prevents idle CPU usage on fixed elements
+    // like Backdrop). handleEnter re-sets it on the next open.
+    node.style.transition = '';
+    if (onExited) {
+      onExited(node);
+    }
+  });
   const handleAddEndListener = next => {
     if (addEndListener) {
       // Old call signature before `react-transition-group` implemented `nodeRef`
       addEndListener(nodeRef.current, next);
     }
   };
-  return /*#__PURE__*/_jsx(TransitionComponent, {
+  return /*#__PURE__*/_jsx(Transition, {
     appear: appear,
     in: inProp,
-    nodeRef: enableStrictModeCompat ? nodeRef : undefined,
+    nodeRef: nodeRef,
     onEnter: handleEnter,
     onEntered: handleEntered,
     onEntering: handleEntering,
@@ -118,14 +119,9 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
       ownerState,
       ...restChildProps
     }) => {
+      const childStyle = getTransitionChildStyle(state, inProp, styles, hiddenStyles, style, children.props.style);
       return /*#__PURE__*/React.cloneElement(children, {
-        style: {
-          opacity: 0,
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
-          ...styles[state],
-          ...style,
-          ...children.props.style
-        },
+        style: childStyle,
         ref: handleRef,
         ...restChildProps
       });

package/FilledInput/FilledInput.d.mts

@@ -20,6 +20,10 @@ export interface FilledInputProps extends StandardProps<InputBaseProps> {
    * @default false
    */
   disableUnderline?: boolean | undefined;
+  /**
+   * @internal
+   */
+  notched?: boolean | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -30,12 +34,12 @@ export interface FilledInputProps extends StandardProps<InputBaseProps> {
  *
  * Demos:
  *
- * - [Text Field](https://next.mui.com/material-ui/react-text-field/)
+ * - [Text Field](https://mui.com/material-ui/react-text-field/)
  *
  * API:
  *
- * - [FilledInput API](https://next.mui.com/material-ui/api/filled-input/)
- * - inherits [InputBase API](https://next.mui.com/material-ui/api/input-base/)
+ * - [FilledInput API](https://mui.com/material-ui/api/filled-input/)
+ * - inherits [InputBase API](https://mui.com/material-ui/api/input-base/)
  */
 declare const FilledInput: ((props: FilledInputProps) => React.JSX.Element) & {
   muiName: string;

package/FilledInput/FilledInput.d.ts

@@ -20,6 +20,10 @@ export interface FilledInputProps extends StandardProps<InputBaseProps> {
    * @default false
    */
   disableUnderline?: boolean | undefined;
+  /**
+   * @internal
+   */
+  notched?: boolean | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -30,12 +34,12 @@ export interface FilledInputProps extends StandardProps<InputBaseProps> {
  *
  * Demos:
  *
- * - [Text Field](https://next.mui.com/material-ui/react-text-field/)
+ * - [Text Field](https://mui.com/material-ui/react-text-field/)
  *
  * API:
  *
- * - [FilledInput API](https://next.mui.com/material-ui/api/filled-input/)
- * - inherits [InputBase API](https://next.mui.com/material-ui/api/input-base/)
+ * - [FilledInput API](https://mui.com/material-ui/api/filled-input/)
+ * - inherits [InputBase API](https://mui.com/material-ui/api/input-base/)
  */
 declare const FilledInput: ((props: FilledInputProps) => React.JSX.Element) & {
   muiName: string;

package/FilledInput/FilledInput.js

@@ -201,28 +201,20 @@ const FilledInputInput = (0, _zeroStyled.styled)(_InputBase2.InputBaseInput, {
   paddingRight: 12,
   paddingBottom: 8,
   paddingLeft: 12,
-  ...(!theme.vars && {
-    '&:-webkit-autofill': {
+  '&:-webkit-autofill': {
+    ...(!theme.vars && {
       WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
       WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
-      caretColor: theme.palette.mode === 'light' ? null : '#fff',
-      borderTopLeftRadius: 'inherit',
-      borderTopRightRadius: 'inherit'
-    }
-  }),
-  ...(theme.vars && {
-    '&:-webkit-autofill': {
-      borderTopLeftRadius: 'inherit',
-      borderTopRightRadius: 'inherit'
-    },
-    [theme.getColorSchemeSelector('dark')]: {
-      '&:-webkit-autofill': {
-        WebkitBoxShadow: '0 0 0 100px #266798 inset',
-        WebkitTextFillColor: '#fff',
-        caretColor: '#fff'
-      }
-    }
-  }),
+      caretColor: theme.palette.mode === 'light' ? null : '#fff'
+    }),
+    borderTopLeftRadius: 'inherit',
+    borderTopRightRadius: 'inherit',
+    ...(theme.vars && theme.applyStyles('dark', {
+      WebkitBoxShadow: '0 0 0 100px #266798 inset',
+      WebkitTextFillColor: '#fff',
+      caretColor: '#fff'
+    }))
+  },
   variants: [{
     props: {
       size: 'small'
@@ -285,6 +277,8 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
     // declare here to prevent spreading to DOM
     inputComponent = 'input',
     multiline = false,
+    notched,
+    // declare here to prevent spreading to DOM
     slotProps,
     slots = {},
     type = 'text',
@@ -428,6 +422,10 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
    * Name attribute of the `input` element.
    */
   name: _propTypes.default.string,
+  /**
+   * @internal
+   */
+  notched: _propTypes.default.bool,
   /**
    * Callback fired when the value is changed.
    *

package/FilledInput/FilledInput.mjs

@@ -194,28 +194,20 @@ const FilledInputInput = styled(InputBaseInput, {
   paddingRight: 12,
   paddingBottom: 8,
   paddingLeft: 12,
-  ...(!theme.vars && {
-    '&:-webkit-autofill': {
+  '&:-webkit-autofill': {
+    ...(!theme.vars && {
       WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
       WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
-      caretColor: theme.palette.mode === 'light' ? null : '#fff',
-      borderTopLeftRadius: 'inherit',
-      borderTopRightRadius: 'inherit'
-    }
-  }),
-  ...(theme.vars && {
-    '&:-webkit-autofill': {
-      borderTopLeftRadius: 'inherit',
-      borderTopRightRadius: 'inherit'
-    },
-    [theme.getColorSchemeSelector('dark')]: {
-      '&:-webkit-autofill': {
-        WebkitBoxShadow: '0 0 0 100px #266798 inset',
-        WebkitTextFillColor: '#fff',
-        caretColor: '#fff'
-      }
-    }
-  }),
+      caretColor: theme.palette.mode === 'light' ? null : '#fff'
+    }),
+    borderTopLeftRadius: 'inherit',
+    borderTopRightRadius: 'inherit',
+    ...(theme.vars && theme.applyStyles('dark', {
+      WebkitBoxShadow: '0 0 0 100px #266798 inset',
+      WebkitTextFillColor: '#fff',
+      caretColor: '#fff'
+    }))
+  },
   variants: [{
     props: {
       size: 'small'
@@ -278,6 +270,8 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
     // declare here to prevent spreading to DOM
     inputComponent = 'input',
     multiline = false,
+    notched,
+    // declare here to prevent spreading to DOM
     slotProps,
     slots = {},
     type = 'text',
@@ -421,6 +415,10 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
    * Name attribute of the `input` element.
    */
   name: PropTypes.string,
+  /**
+   * @internal
+   */
+  notched: PropTypes.bool,
   /**
    * Callback fired when the value is changed.
    *

package/FormControl/FormControl.d.mts

@@ -89,7 +89,7 @@ export interface FormControlTypeMap<AdditionalProps = {}, RootComponent extends
  * * Input
  * * InputLabel
  *
- * You can find one composition example below and more going to [the demos](https://next.mui.com/material-ui/react-text-field/#components).
+ * You can find one composition example below and more going to [the demos](https://mui.com/material-ui/react-text-field/#components).
  *
  * ```jsx
  * <FormControl>
@@ -104,15 +104,15 @@ export interface FormControlTypeMap<AdditionalProps = {}, RootComponent extends
  *
  * Demos:
  *
- * - [Checkbox](https://next.mui.com/material-ui/react-checkbox/)
- * - [Number Field](https://next.mui.com/material-ui/react-number-field/)
- * - [Radio Group](https://next.mui.com/material-ui/react-radio-button/)
- * - [Switch](https://next.mui.com/material-ui/react-switch/)
- * - [Text Field](https://next.mui.com/material-ui/react-text-field/)
+ * - [Checkbox](https://mui.com/material-ui/react-checkbox/)
+ * - [Number Field](https://mui.com/material-ui/react-number-field/)
+ * - [Radio Group](https://mui.com/material-ui/react-radio-button/)
+ * - [Switch](https://mui.com/material-ui/react-switch/)
+ * - [Text Field](https://mui.com/material-ui/react-text-field/)
  *
  * API:
  *
- * - [FormControl API](https://next.mui.com/material-ui/api/form-control/)
+ * - [FormControl API](https://mui.com/material-ui/api/form-control/)
  */
 declare const FormControl: OverridableComponent<FormControlTypeMap>;
 export type FormControlProps<RootComponent extends React.ElementType = FormControlTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<FormControlTypeMap<AdditionalProps, RootComponent>, RootComponent> & {