@mui/material 9.0.0-beta.1 → 9.0.1

package/InputAdornment/InputAdornment.d.ts

@@ -46,11 +46,11 @@ export interface InputAdornmentTypeMap<AdditionalProps = {}, RootComponent exten
  *
  * Demos:
  *
- * - [Text Field](https://next.mui.com/material-ui/react-text-field/)
+ * - [Text Field](https://mui.com/material-ui/react-text-field/)
  *
  * API:
  *
- * - [InputAdornment API](https://next.mui.com/material-ui/api/input-adornment/)
+ * - [InputAdornment API](https://mui.com/material-ui/api/input-adornment/)
  */
 declare const InputAdornment: OverridableComponent<InputAdornmentTypeMap>;
 export type InputAdornmentProps<RootComponent extends React.ElementType = InputAdornmentTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<InputAdornmentTypeMap<AdditionalProps, RootComponent>, RootComponent> & {

package/InputBase/InputBase.d.mts

@@ -13,8 +13,9 @@ export interface InputBaseProps extends StandardProps<React.HTMLAttributes<HTMLD
  * which by default is an input or textarea. Since these handlers differ from the
  * ones inherited by `React.HTMLAttributes<HTMLDivElement>` we need to omit them.
  */
-'children' | 'defaultValue' | 'onBlur' | 'onChange' | 'onFocus' | 'onInvalid' | 'onKeyDown' | 'onKeyUp'> {
+'children' | 'defaultValue' | 'onBlur' | 'onChange' | 'onFocus' | 'onInvalid' | 'onKeyDown' | 'onKeyUp' | 'aria-label'> {
   'aria-describedby'?: string | undefined;
+  'aria-label'?: string | undefined;
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
    * The name can be confusing, as it's more like an autofill.
@@ -211,10 +212,10 @@ export interface InputBaseComponentProps extends React.HTMLAttributes<HTMLInputE
  *
  * Demos:
  *
- * - [Text Field](https://next.mui.com/material-ui/react-text-field/)
+ * - [Text Field](https://mui.com/material-ui/react-text-field/)
  *
  * API:
  *
- * - [InputBase API](https://next.mui.com/material-ui/api/input-base/)
+ * - [InputBase API](https://mui.com/material-ui/api/input-base/)
  */
 export default function InputBase(props: InputBaseProps): React.JSX.Element;

package/InputBase/InputBase.d.ts

@@ -13,8 +13,9 @@ export interface InputBaseProps extends StandardProps<React.HTMLAttributes<HTMLD
  * which by default is an input or textarea. Since these handlers differ from the
  * ones inherited by `React.HTMLAttributes<HTMLDivElement>` we need to omit them.
  */
-'children' | 'defaultValue' | 'onBlur' | 'onChange' | 'onFocus' | 'onInvalid' | 'onKeyDown' | 'onKeyUp'> {
+'children' | 'defaultValue' | 'onBlur' | 'onChange' | 'onFocus' | 'onInvalid' | 'onKeyDown' | 'onKeyUp' | 'aria-label'> {
   'aria-describedby'?: string | undefined;
+  'aria-label'?: string | undefined;
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
    * The name can be confusing, as it's more like an autofill.
@@ -211,10 +212,10 @@ export interface InputBaseComponentProps extends React.HTMLAttributes<HTMLInputE
  *
  * Demos:
  *
- * - [Text Field](https://next.mui.com/material-ui/react-text-field/)
+ * - [Text Field](https://mui.com/material-ui/react-text-field/)
  *
  * API:
  *
- * - [InputBase API](https://next.mui.com/material-ui/api/input-base/)
+ * - [InputBase API](https://mui.com/material-ui/api/input-base/)
  */
 export default function InputBase(props: InputBaseProps): React.JSX.Element;

package/InputBase/InputBase.js

@@ -16,19 +16,22 @@ var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _isHostComponent = _interopRequireDefault(require("@mui/utils/isHostComponent"));
 var _TextareaAutosize = _interopRequireDefault(require("../TextareaAutosize"));
-var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _FormControlContext = _interopRequireDefault(require("../FormControl/FormControlContext"));
-var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
+var _useFormControl = require("../FormControl/useFormControl");
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
+var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
+var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
 var _utils = require("./utils");
 var _inputBaseClasses = _interopRequireWildcard(require("./inputBaseClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _InputGlobalStyles;
+const MUI_AUTO_FILL = 'mui-auto-fill';
+const MUI_AUTO_FILL_CANCEL = 'mui-auto-fill-cancel';
 const rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -193,11 +196,11 @@ const InputBaseInput = exports.InputBaseInput = (0, _zeroStyled.styled)('input',
         ownerState
       }) => !ownerState.disableInjectingGlobalStyles,
       style: {
-        animationName: 'mui-auto-fill-cancel',
+        animationName: MUI_AUTO_FILL_CANCEL,
         animationDuration: '10ms',
         '&:-webkit-autofill': {
           animationDuration: '5000s',
-          animationName: 'mui-auto-fill'
+          animationName: MUI_AUTO_FILL
         }
       }
     }, {
@@ -228,14 +231,16 @@ const InputBaseInput = exports.InputBaseInput = (0, _zeroStyled.styled)('input',
   };
 }));
 const InputGlobalStyles = (0, _zeroStyled.globalCss)({
-  '@keyframes mui-auto-fill': {
+  // Keep keyframes non-empty for Emotion production builds. Animation properties are ignored
+  // inside keyframes, avoiding the visible display animation triggered by Chrome 117+.
+  [`@keyframes ${MUI_AUTO_FILL}`]: {
     from: {
-      display: 'block'
+      animationName: MUI_AUTO_FILL
     }
   },
-  '@keyframes mui-auto-fill-cancel': {
+  [`@keyframes ${MUI_AUTO_FILL_CANCEL}`]: {
     from: {
-      display: 'block'
+      animationName: MUI_AUTO_FILL_CANCEL
     }
   }
 });
@@ -252,6 +257,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   });
   const {
     'aria-describedby': ariaDescribedby,
+    'aria-label': ariaLabel,
     autoComplete,
     autoFocus,
     className,
@@ -303,7 +309,10 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   }, []);
   const handleInputRef = (0, _useForkRef.default)(inputRef, inputRefProp, inputPropsProp.ref, handleInputRefWarning);
   const [focused, setFocused] = React.useState(false);
-  const muiFormControl = (0, _useFormControl.default)();
+  const [fcs, muiFormControl] = (0, _useFormControl.useFormControlState)({
+    props,
+    states: ['color', 'disabled', 'error', 'hiddenLabel', 'size', 'required', 'filled']
+  });
   if (process.env.NODE_ENV !== 'production') {
     // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -314,11 +323,6 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       return undefined;
     }, [muiFormControl]);
   }
-  const fcs = (0, _formControlState.default)({
-    props,
-    muiFormControl,
-    states: ['color', 'disabled', 'error', 'hiddenLabel', 'size', 'required', 'filled']
-  });
   fcs.focused = muiFormControl ? muiFormControl.focused : focused;
 
   // The blur won't fire when the disabled state is set on a focused input.
@@ -349,6 +353,32 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       });
     }
   }, [value, checkDirty, isControlled]);
+
+  // Sync focused state when autoFocus is used in SSR.
+  // If the browser focused the element before hydration, the onFocus handler never
+  // fires. If it did not, React hydration does not call focus() for autoFocus.
+  (0, _useEnhancedEffect.default)(() => {
+    if (!autoFocus) {
+      return;
+    }
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    const doc = (0, _ownerDocument.default)(input);
+    const activeElement = (0, _getActiveElement.default)(doc);
+    const noElementFocused = activeElement == null || activeElement === doc.body || activeElement === doc.documentElement;
+    if (input === activeElement) {
+      if (muiFormControl && muiFormControl.onFocus) {
+        muiFormControl.onFocus();
+      } else {
+        setFocused(true);
+      }
+    } else if (noElementFocused) {
+      input.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoFocus]);
   const handleFocus = event => {
     if (onFocus) {
       onFocus(event);
@@ -437,7 +467,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   }
   const handleAutoFill = event => {
     // Provide a fake value as Chrome might not let you access it for security reasons.
-    checkDirty(event.animationName === 'mui-auto-fill-cancel' ? inputRef.current : {
+    checkDirty(event.animationName === MUI_AUTO_FILL_CANCEL ? inputRef.current : {
       value: 'x'
     });
   };
@@ -489,6 +519,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
           "aria-invalid": fcs.error,
           "aria-describedby": ariaDescribedby,
+          "aria-label": ariaLabel,
           autoComplete: autoComplete,
           autoFocus: autoFocus,
           defaultValue: defaultValue,
@@ -534,6 +565,10 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes /* remove-proptypes
    * @ignore
    */
   'aria-describedby': _propTypes.default.string,
+  /**
+   * @ignore
+   */
+  'aria-label': _propTypes.default.string,
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
    * The name can be confusing, as it's more like an autofill.

package/InputBase/InputBase.mjs

@@ -10,18 +10,21 @@ import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import isHostComponent from '@mui/utils/isHostComponent';
 import TextareaAutosize from "../TextareaAutosize/index.mjs";
-import formControlState from "../FormControl/formControlState.mjs";
 import FormControlContext from "../FormControl/FormControlContext.mjs";
-import useFormControl from "../FormControl/useFormControl.mjs";
+import { useFormControlState } from "../FormControl/useFormControl.mjs";
 import { styled, globalCss } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import capitalize from "../utils/capitalize.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
 import useEnhancedEffect from "../utils/useEnhancedEffect.mjs";
+import ownerDocument from "../utils/ownerDocument.mjs";
+import getActiveElement from "../utils/getActiveElement.mjs";
 import { isFilled } from "./utils.mjs";
 import inputBaseClasses, { getInputBaseUtilityClass } from "./inputBaseClasses.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MUI_AUTO_FILL = 'mui-auto-fill';
+const MUI_AUTO_FILL_CANCEL = 'mui-auto-fill-cancel';
 export const rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -184,11 +187,11 @@ export const InputBaseInput = styled('input', {
         ownerState
       }) => !ownerState.disableInjectingGlobalStyles,
       style: {
-        animationName: 'mui-auto-fill-cancel',
+        animationName: MUI_AUTO_FILL_CANCEL,
         animationDuration: '10ms',
         '&:-webkit-autofill': {
           animationDuration: '5000s',
-          animationName: 'mui-auto-fill'
+          animationName: MUI_AUTO_FILL
         }
       }
     }, {
@@ -219,14 +222,16 @@ export const InputBaseInput = styled('input', {
   };
 }));
 const InputGlobalStyles = globalCss({
-  '@keyframes mui-auto-fill': {
+  // Keep keyframes non-empty for Emotion production builds. Animation properties are ignored
+  // inside keyframes, avoiding the visible display animation triggered by Chrome 117+.
+  [`@keyframes ${MUI_AUTO_FILL}`]: {
     from: {
-      display: 'block'
+      animationName: MUI_AUTO_FILL
     }
   },
-  '@keyframes mui-auto-fill-cancel': {
+  [`@keyframes ${MUI_AUTO_FILL_CANCEL}`]: {
     from: {
-      display: 'block'
+      animationName: MUI_AUTO_FILL_CANCEL
     }
   }
 });
@@ -243,6 +248,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   });
   const {
     'aria-describedby': ariaDescribedby,
+    'aria-label': ariaLabel,
     autoComplete,
     autoFocus,
     className,
@@ -294,7 +300,10 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   }, []);
   const handleInputRef = useForkRef(inputRef, inputRefProp, inputPropsProp.ref, handleInputRefWarning);
   const [focused, setFocused] = React.useState(false);
-  const muiFormControl = useFormControl();
+  const [fcs, muiFormControl] = useFormControlState({
+    props,
+    states: ['color', 'disabled', 'error', 'hiddenLabel', 'size', 'required', 'filled']
+  });
   if (process.env.NODE_ENV !== 'production') {
     // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -305,11 +314,6 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       return undefined;
     }, [muiFormControl]);
   }
-  const fcs = formControlState({
-    props,
-    muiFormControl,
-    states: ['color', 'disabled', 'error', 'hiddenLabel', 'size', 'required', 'filled']
-  });
   fcs.focused = muiFormControl ? muiFormControl.focused : focused;
 
   // The blur won't fire when the disabled state is set on a focused input.
@@ -340,6 +344,32 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       });
     }
   }, [value, checkDirty, isControlled]);
+
+  // Sync focused state when autoFocus is used in SSR.
+  // If the browser focused the element before hydration, the onFocus handler never
+  // fires. If it did not, React hydration does not call focus() for autoFocus.
+  useEnhancedEffect(() => {
+    if (!autoFocus) {
+      return;
+    }
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    const doc = ownerDocument(input);
+    const activeElement = getActiveElement(doc);
+    const noElementFocused = activeElement == null || activeElement === doc.body || activeElement === doc.documentElement;
+    if (input === activeElement) {
+      if (muiFormControl && muiFormControl.onFocus) {
+        muiFormControl.onFocus();
+      } else {
+        setFocused(true);
+      }
+    } else if (noElementFocused) {
+      input.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoFocus]);
   const handleFocus = event => {
     if (onFocus) {
       onFocus(event);
@@ -428,7 +458,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   }
   const handleAutoFill = event => {
     // Provide a fake value as Chrome might not let you access it for security reasons.
-    checkDirty(event.animationName === 'mui-auto-fill-cancel' ? inputRef.current : {
+    checkDirty(event.animationName === MUI_AUTO_FILL_CANCEL ? inputRef.current : {
       value: 'x'
     });
   };
@@ -480,6 +510,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
         children: /*#__PURE__*/_jsx(Input, {
           "aria-invalid": fcs.error,
           "aria-describedby": ariaDescribedby,
+          "aria-label": ariaLabel,
           autoComplete: autoComplete,
           autoFocus: autoFocus,
           defaultValue: defaultValue,
@@ -525,6 +556,10 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes /* remove-proptypes
    * @ignore
    */
   'aria-describedby': PropTypes.string,
+  /**
+   * @ignore
+   */
+  'aria-label': PropTypes.string,
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
    * The name can be confusing, as it's more like an autofill.

package/InputLabel/InputLabel.d.mts

@@ -65,13 +65,13 @@ export type InputLabelTypeMap<AdditionalProps = {}, RootComponent extends React.
  *
  * Demos:
  *
- * - [Number Field](https://next.mui.com/material-ui/react-number-field/)
- * - [Text Field](https://next.mui.com/material-ui/react-text-field/)
+ * - [Number Field](https://mui.com/material-ui/react-number-field/)
+ * - [Text Field](https://mui.com/material-ui/react-text-field/)
  *
  * API:
  *
- * - [InputLabel API](https://next.mui.com/material-ui/api/input-label/)
- * - inherits [FormLabel API](https://next.mui.com/material-ui/api/form-label/)
+ * - [InputLabel API](https://mui.com/material-ui/api/input-label/)
+ * - inherits [FormLabel API](https://mui.com/material-ui/api/form-label/)
  */
 declare const InputLabel: OverridableComponent<InputLabelTypeMap>;
 export type InputLabelProps<RootComponent extends React.ElementType = InputLabelTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<InputLabelTypeMap<AdditionalProps, RootComponent>, RootComponent> & {

package/InputLabel/InputLabel.d.ts

@@ -65,13 +65,13 @@ export type InputLabelTypeMap<AdditionalProps = {}, RootComponent extends React.
  *
  * Demos:
  *
- * - [Number Field](https://next.mui.com/material-ui/react-number-field/)
- * - [Text Field](https://next.mui.com/material-ui/react-text-field/)
+ * - [Number Field](https://mui.com/material-ui/react-number-field/)
+ * - [Text Field](https://mui.com/material-ui/react-text-field/)
  *
  * API:
  *
- * - [InputLabel API](https://next.mui.com/material-ui/api/input-label/)
- * - inherits [FormLabel API](https://next.mui.com/material-ui/api/form-label/)
+ * - [InputLabel API](https://mui.com/material-ui/api/input-label/)
+ * - inherits [FormLabel API](https://mui.com/material-ui/api/form-label/)
  */
 declare const InputLabel: OverridableComponent<InputLabelTypeMap>;
 export type InputLabelProps<RootComponent extends React.ElementType = InputLabelTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<InputLabelTypeMap<AdditionalProps, RootComponent>, RootComponent> & {

package/InputLabel/InputLabel.js

@@ -11,8 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
-var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
+var _useFormControl = require("../FormControl/useFormControl");
 var _FormLabel = _interopRequireWildcard(require("../FormLabel"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
@@ -190,16 +189,14 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
     className,
     ...other
   } = props;
-  const muiFormControl = (0, _useFormControl.default)();
+  const [fcs, muiFormControl] = (0, _useFormControl.useFormControlState)({
+    props,
+    states: ['size', 'variant', 'required', 'focused']
+  });
   let shrink = shrinkProp;
   if (typeof shrink === 'undefined' && muiFormControl) {
     shrink = muiFormControl.filled || muiFormControl.focused || muiFormControl.adornedStart;
   }
-  const fcs = (0, _formControlState.default)({
-    props,
-    muiFormControl,
-    states: ['size', 'variant', 'required', 'focused']
-  });
   const ownerState = {
     ...props,
     disableAnimation,

package/InputLabel/InputLabel.mjs

@@ -4,8 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
-import formControlState from "../FormControl/formControlState.mjs";
-import useFormControl from "../FormControl/useFormControl.mjs";
+import { useFormControlState } from "../FormControl/useFormControl.mjs";
 import FormLabel, { formLabelClasses } from "../FormLabel/index.mjs";
 import capitalize from "../utils/capitalize.mjs";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.mjs";
@@ -183,16 +182,14 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
     className,
     ...other
   } = props;
-  const muiFormControl = useFormControl();
+  const [fcs, muiFormControl] = useFormControlState({
+    props,
+    states: ['size', 'variant', 'required', 'focused']
+  });
   let shrink = shrinkProp;
   if (typeof shrink === 'undefined' && muiFormControl) {
     shrink = muiFormControl.filled || muiFormControl.focused || muiFormControl.adornedStart;
   }
-  const fcs = formControlState({
-    props,
-    muiFormControl,
-    states: ['size', 'variant', 'required', 'focused']
-  });
   const ownerState = {
     ...props,
     disableAnimation,

package/LinearProgress/LinearProgress.d.mts

@@ -18,18 +18,28 @@ export interface LinearProgressProps extends StandardProps<React.HTMLAttributes<
    * @default 'primary'
    */
   color?: OverridableStringUnion<'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit', LinearProgressPropsColorOverrides> | undefined;
+  /**
+   * The maximum value for the progress indicator for the determinate and buffer variants.
+   * @default 100
+   */
+  max?: number | undefined;
+  /**
+   * The minimum value for the progress indicator for the determinate and buffer variants.
+   * @default 0
+   */
+  min?: number | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx?: SxProps<Theme> | undefined;
   /**
    * The value of the progress indicator for the determinate and buffer variants.
-   * Value between 0 and 100.
+   * Value between `min` and `max`.
    */
   value?: number | undefined;
   /**
    * The value for the buffer variant.
-   * Value between 0 and 100.
+   * Value between `min` and `max`.
    */
   valueBuffer?: number | undefined;
   /**
@@ -49,10 +59,10 @@ export interface LinearProgressProps extends StandardProps<React.HTMLAttributes<
  *
  * Demos:
  *
- * - [Progress](https://next.mui.com/material-ui/react-progress/)
+ * - [Progress](https://mui.com/material-ui/react-progress/)
  *
  * API:
  *
- * - [LinearProgress API](https://next.mui.com/material-ui/api/linear-progress/)
+ * - [LinearProgress API](https://mui.com/material-ui/api/linear-progress/)
  */
 export default function LinearProgress(props: LinearProgressProps): React.JSX.Element;

package/LinearProgress/LinearProgress.d.ts

@@ -18,18 +18,28 @@ export interface LinearProgressProps extends StandardProps<React.HTMLAttributes<
    * @default 'primary'
    */
   color?: OverridableStringUnion<'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit', LinearProgressPropsColorOverrides> | undefined;
+  /**
+   * The maximum value for the progress indicator for the determinate and buffer variants.
+   * @default 100
+   */
+  max?: number | undefined;
+  /**
+   * The minimum value for the progress indicator for the determinate and buffer variants.
+   * @default 0
+   */
+  min?: number | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx?: SxProps<Theme> | undefined;
   /**
    * The value of the progress indicator for the determinate and buffer variants.
-   * Value between 0 and 100.
+   * Value between `min` and `max`.
    */
   value?: number | undefined;
   /**
    * The value for the buffer variant.
-   * Value between 0 and 100.
+   * Value between `min` and `max`.
    */
   valueBuffer?: number | undefined;
   /**
@@ -49,10 +59,10 @@ export interface LinearProgressProps extends StandardProps<React.HTMLAttributes<
  *
  * Demos:
  *
- * - [Progress](https://next.mui.com/material-ui/react-progress/)
+ * - [Progress](https://mui.com/material-ui/react-progress/)
  *
  * API:
  *
- * - [LinearProgress API](https://next.mui.com/material-ui/api/linear-progress/)
+ * - [LinearProgress API](https://mui.com/material-ui/api/linear-progress/)
  */
 export default function LinearProgress(props: LinearProgressProps): React.JSX.Element;

package/LinearProgress/LinearProgress.js

@@ -342,6 +342,8 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
   const {
     className,
     color = 'primary',
+    max: maxProp,
+    min: minProp,
     value,
     valueBuffer,
     variant = 'indeterminate',
@@ -352,6 +354,13 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
     color,
     variant
   };
+  if (process.env.NODE_ENV !== 'production') {
+    if (['indeterminate', 'query'].includes(variant) && (minProp !== undefined || maxProp !== undefined)) {
+      console.warn(`MUI: You have provided the \`min\` or \`max\` props with an 'indeterminate' or 'query' variant. These props will have no effect.`);
+    }
+  }
+  const min = minProp ?? 0;
+  const max = maxProp ?? 100;
   const classes = useUtilityClasses(ownerState);
   const isRtl = (0, _RtlProvider.useRtl)();
   const rootProps = {};
@@ -361,25 +370,38 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
   };
   if (variant === 'determinate' || variant === 'buffer') {
     if (value !== undefined) {
-      rootProps['aria-valuenow'] = Math.round(value);
-      rootProps['aria-valuemin'] = 0;
-      rootProps['aria-valuemax'] = 100;
-      let transform = value - 100;
+      if (process.env.NODE_ENV !== 'production') {
+        if (value < min || value > max || min >= max) {
+          console.error(`MUI: The min, max, and value props in LinearProgress should be numbers where min < max and min <= value <= max. Received min=${min}, max=${max}, value=${value}.`);
+        }
+      }
+      const range = max - min;
+      let transform = (value - min) / range * 100 - 100;
       if (isRtl) {
         transform = -transform;
       }
-      inlineStyles.bar1.transform = `translateX(${transform}%)`;
+      inlineStyles.bar1.transform = range > 0 ? `translateX(${transform}%)` : 'translateX(-100%)'; // empty-state fallback when range is invalid
+
+      rootProps['aria-valuenow'] = value;
+      rootProps['aria-valuemin'] = min;
+      rootProps['aria-valuemax'] = max;
     } else if (process.env.NODE_ENV !== 'production') {
-      console.error('MUI: You need to provide a value prop ' + 'when using the determinate or buffer variant of LinearProgress .');
+      console.error('MUI: You need to provide a value prop ' + 'when using the determinate or buffer variant of LinearProgress.');
     }
   }
   if (variant === 'buffer') {
     if (valueBuffer !== undefined) {
-      let transform = (valueBuffer || 0) - 100;
+      if (process.env.NODE_ENV !== 'production') {
+        if (valueBuffer < min || valueBuffer > max || valueBuffer < value || min >= max) {
+          console.error(`MUI: The min, max, value, and valueBuffer props in LinearProgress should be numbers where min < max and min <= value <= valueBuffer <= max. Received min=${min}, max=${max}, value=${value}, valueBuffer=${valueBuffer}.`);
+        }
+      }
+      const range = max - min;
+      let transform = (valueBuffer - min) / range * 100 - 100;
       if (isRtl) {
         transform = -transform;
       }
-      inlineStyles.bar2.transform = `translateX(${transform}%)`;
+      inlineStyles.bar2.transform = range > 0 ? `translateX(${transform}%)` : 'translateX(-100%)'; // empty-state fallback when range is invalid
     } else if (process.env.NODE_ENV !== 'production') {
       console.error('MUI: You need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.');
     }
@@ -425,18 +447,28 @@ process.env.NODE_ENV !== "production" ? LinearProgress.propTypes /* remove-propt
    * @default 'primary'
    */
   color: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['inherit', 'primary', 'secondary']), _propTypes.default.string]),
+  /**
+   * The maximum value for the progress indicator for the determinate and buffer variants.
+   * @default 100
+   */
+  max: _propTypes.default.number,
+  /**
+   * The minimum value for the progress indicator for the determinate and buffer variants.
+   * @default 0
+   */
+  min: _propTypes.default.number,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   /**
    * The value of the progress indicator for the determinate and buffer variants.
-   * Value between 0 and 100.
+   * Value between `min` and `max`.
    */
   value: _propTypes.default.number,
   /**
    * The value for the buffer variant.
-   * Value between 0 and 100.
+   * Value between `min` and `max`.
    */
   valueBuffer: _propTypes.default.number,
   /**