@mui/material 9.0.0 → 9.1.0

package/InputBase/InputBase.js

@@ -16,19 +16,23 @@ 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 _utils2 = require("../transitions/utils");
 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
@@ -126,7 +130,7 @@ const InputBaseInput = exports.InputBaseInput = (0, _zeroStyled.styled)('input',
     } : {
       opacity: light ? 0.42 : 0.5
     }),
-    transition: theme.transitions.create('opacity', {
+    ...(0, _utils2.getTransitionStyles)(theme, 'opacity', {
       duration: theme.transitions.duration.shorter
     })
   };
@@ -193,11 +197,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 +232,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 +258,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   });
   const {
     'aria-describedby': ariaDescribedby,
+    'aria-label': ariaLabel,
     autoComplete,
     autoFocus,
     className,
@@ -303,7 +310,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 +324,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 +354,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 +468,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 +520,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 +566,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,22 @@ 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 { getTransitionStyles } from "../transitions/utils.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
@@ -117,7 +121,7 @@ export const InputBaseInput = styled('input', {
     } : {
       opacity: light ? 0.42 : 0.5
     }),
-    transition: theme.transitions.create('opacity', {
+    ...getTransitionStyles(theme, 'opacity', {
       duration: theme.transitions.duration.shorter
     })
   };
@@ -184,11 +188,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 +223,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 +249,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   });
   const {
     'aria-describedby': ariaDescribedby,
+    'aria-label': ariaLabel,
     autoComplete,
     autoFocus,
     className,
@@ -294,7 +301,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 +315,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 +345,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 +459,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 +511,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 +557,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.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"));
@@ -20,6 +19,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _inputLabelClasses = require("./inputLabelClasses");
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -96,7 +96,7 @@ const InputLabelRoot = (0, _zeroStyled.styled)(_FormLabel.default, {
       ownerState
     }) => !ownerState.disableAnimation,
     style: {
-      transition: theme.transitions.create(['color', 'transform', 'max-width'], {
+      ...(0, _utils.getTransitionStyles)(theme, ['color', 'transform', 'max-width'], {
         duration: theme.transitions.duration.shorter,
         easing: theme.transitions.easing.easeOut
       })
@@ -190,16 +190,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";
@@ -13,6 +12,7 @@ import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import { getInputLabelUtilityClasses } from "./inputLabelClasses.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -89,7 +89,7 @@ const InputLabelRoot = styled(FormLabel, {
       ownerState
     }) => !ownerState.disableAnimation,
     style: {
-      transition: theme.transitions.create(['color', 'transform', 'max-width'], {
+      ...getTransitionStyles(theme, ['color', 'transform', 'max-width'], {
         duration: theme.transitions.duration.shorter,
         easing: theme.transitions.easing.easeOut
       })
@@ -183,16 +183,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/LICENSE

@@ -1,4 +1,4 @@
-The MIT License (MIT)
+MIT License
 
 Copyright (c) 2014 Call-Em-All
 

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;
   /**

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;
   /**