@mui/material 9.0.0 → 9.1.0

package/Grow/Grow.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
 var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
-var _reactTransitionGroup = require("react-transition-group");
+var _Transition = _interopRequireDefault(require("../internal/Transition"));
+var _useReducedMotion = _interopRequireDefault(require("../transitions/useReducedMotion"));
 var _zeroStyled = require("../zero-styled");
 var _utils = require("../transitions/utils");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
@@ -47,13 +47,13 @@ const hiddenStyles = {
 /**
  * The Grow transition is used by the [Tooltip](/material-ui/react-tooltip/) and
  * [Popover](/material-ui/react-popover/) components.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const {
     addEndListener,
     appear = true,
     children,
+    disablePrefersReducedMotion = false,
     easing,
     in: inProp,
     onEnter,
@@ -66,15 +66,16 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
     timeout = 'auto',
     ...other
   } = props;
-  const timer = (0, _useTimeout.default)();
-  const autoTimeout = React.useRef();
+  const autoTimeout = React.useRef(null);
   const theme = (0, _zeroStyled.useTheme)();
+  const reducedMotion = (0, _useReducedMotion.default)(theme.motion.reducedMotion, disablePrefersReducedMotion);
   const nodeRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactElementRef.default)(children), ref);
   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.
-
+    if (!reducedMotion.shouldReduceMotion) {
+      (0, _utils.reflow)(node); // Force layout so the animation starts from the initial styles.
+    }
     const {
       duration: transitionDuration,
       delay,
@@ -87,18 +88,23 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       mode: 'enter'
     });
     let duration;
-    if (timeout === 'auto') {
+    if (timeout === 'auto' && !reducedMotion.shouldReduceMotion) {
       duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
       autoTimeout.current = duration;
     } else {
       duration = transitionDuration;
+      autoTimeout.current = null;
     }
-    node.style.transition = [theme.transitions.create('opacity', {
+    const transitionTiming = reducedMotion.getTransitionTiming({
       duration,
       delay
+    });
+    node.style.transition = [theme.transitions.create('opacity', {
+      duration: transitionTiming.duration,
+      delay: transitionTiming.delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
-      delay,
+      duration: typeof transitionTiming.duration === 'string' ? transitionTiming.duration : transitionTiming.duration * 0.666,
+      delay: transitionTiming.delay,
       easing: transitionTimingFunction
     })].join(',');
     if (onEnter) {
@@ -120,18 +126,23 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       mode: 'exit'
     });
     let duration;
-    if (timeout === 'auto') {
+    if (timeout === 'auto' && !reducedMotion.shouldReduceMotion) {
       duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
       autoTimeout.current = duration;
     } else {
       duration = transitionDuration;
+      autoTimeout.current = null;
     }
-    node.style.transition = [theme.transitions.create('opacity', {
+    const transitionTiming = reducedMotion.getTransitionTiming({
       duration,
       delay
+    });
+    node.style.transition = [theme.transitions.create('opacity', {
+      duration: transitionTiming.duration,
+      delay: transitionTiming.delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
-      delay: delay || duration * 0.333,
+      duration: typeof transitionTiming.duration === 'string' ? transitionTiming.duration : transitionTiming.duration * 0.666,
+      delay: transitionTiming.delay || (typeof transitionTiming.duration === 'string' ? transitionTiming.duration : transitionTiming.duration * 0.333),
       easing: transitionTimingFunction
     })].join(',');
     node.style.opacity = 0;
@@ -146,16 +157,10 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       onExited(node);
     }
   });
-  const handleAddEndListener = next => {
-    if (timeout === 'auto') {
-      timer.start(autoTimeout.current || 0, next);
-    }
-    if (addEndListener) {
-      // Old call signature before `react-transition-group` implemented `nodeRef`
-      addEndListener(nodeRef.current, next);
-    }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.Transition, {
+  const handleAddEndListener = addEndListener ? next => {
+    addEndListener(nodeRef.current, next);
+  } : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Transition.default, {
     appear: appear,
     in: inProp,
     nodeRef: nodeRef,
@@ -166,12 +171,16 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
     onExited: handleExited,
     onExiting: handleExiting,
     addEndListener: handleAddEndListener,
+    getAutoTimeout: timeout === 'auto' ? () => autoTimeout.current : undefined,
+    reduceMotion: reducedMotion.shouldReduceMotion,
     timeout: timeout === 'auto' ? null : timeout,
     ...other,
     children: (state, {
       ownerState,
       ...restChildProps
     }) => {
+      // Do not pass ownerState to a DOM child. ownerState is only for
+      // Material UI styling, and React would treat it as an invalid DOM attribute.
       const childStyle = (0, _utils.getTransitionChildStyle)(state, inProp, styles, hiddenStyles, style, children.props.style);
       return /*#__PURE__*/React.cloneElement(children, {
         style: childStyle,
@@ -187,9 +196,12 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ =
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * Add a custom transition end trigger. Called with the transitioning DOM
-   * node and a done callback. Allows for more fine grained transition end
-   * logic. Note: Timeouts are still used as a fallback if provided.
+   * Add a custom transition end trigger.
+   * Use it when you need custom logic to decide when the transition has ended.
+   * Note: Timeouts are still used as a fallback if provided.
+   *
+   * @param {HTMLElement} node The transitioning DOM node.
+   * @param {Function} done Call this when the transition has finished.
    */
   addEndListener: _propTypes.default.func,
   /**
@@ -202,6 +214,11 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ =
    * A single child content element.
    */
   children: _elementAcceptingRef.default.isRequired,
+  /**
+   * If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
+   * @default false
+   */
+  disablePrefersReducedMotion: _propTypes.default.bool,
   /**
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.

package/Grow/Grow.mjs

@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import useTimeout from '@mui/utils/useTimeout';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import getReactElementRef from '@mui/utils/getReactElementRef';
-import { Transition } from 'react-transition-group';
+import Transition from "../internal/Transition.mjs";
+import useReducedMotion from "../transitions/useReducedMotion.mjs";
 import { useTheme } from "../zero-styled/index.mjs";
 import { normalizedTransitionCallback, getTransitionProps, getTransitionChildStyle, reflow } from "../transitions/utils.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
@@ -40,13 +40,13 @@ const hiddenStyles = {
 /**
  * The Grow transition is used by the [Tooltip](/material-ui/react-tooltip/) and
  * [Popover](/material-ui/react-popover/) components.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const {
     addEndListener,
     appear = true,
     children,
+    disablePrefersReducedMotion = false,
     easing,
     in: inProp,
     onEnter,
@@ -59,15 +59,16 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
     timeout = 'auto',
     ...other
   } = props;
-  const timer = useTimeout();
-  const autoTimeout = React.useRef();
+  const autoTimeout = React.useRef(null);
   const theme = useTheme();
+  const reducedMotion = useReducedMotion(theme.motion.reducedMotion, disablePrefersReducedMotion);
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
   const handleEntering = normalizedTransitionCallback(nodeRef, onEntering);
   const handleEnter = normalizedTransitionCallback(nodeRef, (node, isAppearing) => {
-    reflow(node); // So the animation always start from the start.
-
+    if (!reducedMotion.shouldReduceMotion) {
+      reflow(node); // Force layout so the animation starts from the initial styles.
+    }
     const {
       duration: transitionDuration,
       delay,
@@ -80,18 +81,23 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       mode: 'enter'
     });
     let duration;
-    if (timeout === 'auto') {
+    if (timeout === 'auto' && !reducedMotion.shouldReduceMotion) {
       duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
       autoTimeout.current = duration;
     } else {
       duration = transitionDuration;
+      autoTimeout.current = null;
     }
-    node.style.transition = [theme.transitions.create('opacity', {
+    const transitionTiming = reducedMotion.getTransitionTiming({
       duration,
       delay
+    });
+    node.style.transition = [theme.transitions.create('opacity', {
+      duration: transitionTiming.duration,
+      delay: transitionTiming.delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
-      delay,
+      duration: typeof transitionTiming.duration === 'string' ? transitionTiming.duration : transitionTiming.duration * 0.666,
+      delay: transitionTiming.delay,
       easing: transitionTimingFunction
     })].join(',');
     if (onEnter) {
@@ -113,18 +119,23 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       mode: 'exit'
     });
     let duration;
-    if (timeout === 'auto') {
+    if (timeout === 'auto' && !reducedMotion.shouldReduceMotion) {
       duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
       autoTimeout.current = duration;
     } else {
       duration = transitionDuration;
+      autoTimeout.current = null;
     }
-    node.style.transition = [theme.transitions.create('opacity', {
+    const transitionTiming = reducedMotion.getTransitionTiming({
       duration,
       delay
+    });
+    node.style.transition = [theme.transitions.create('opacity', {
+      duration: transitionTiming.duration,
+      delay: transitionTiming.delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
-      delay: delay || duration * 0.333,
+      duration: typeof transitionTiming.duration === 'string' ? transitionTiming.duration : transitionTiming.duration * 0.666,
+      delay: transitionTiming.delay || (typeof transitionTiming.duration === 'string' ? transitionTiming.duration : transitionTiming.duration * 0.333),
       easing: transitionTimingFunction
     })].join(',');
     node.style.opacity = 0;
@@ -139,15 +150,9 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       onExited(node);
     }
   });
-  const handleAddEndListener = next => {
-    if (timeout === 'auto') {
-      timer.start(autoTimeout.current || 0, next);
-    }
-    if (addEndListener) {
-      // Old call signature before `react-transition-group` implemented `nodeRef`
-      addEndListener(nodeRef.current, next);
-    }
-  };
+  const handleAddEndListener = addEndListener ? next => {
+    addEndListener(nodeRef.current, next);
+  } : undefined;
   return /*#__PURE__*/_jsx(Transition, {
     appear: appear,
     in: inProp,
@@ -159,12 +164,16 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
     onExited: handleExited,
     onExiting: handleExiting,
     addEndListener: handleAddEndListener,
+    getAutoTimeout: timeout === 'auto' ? () => autoTimeout.current : undefined,
+    reduceMotion: reducedMotion.shouldReduceMotion,
     timeout: timeout === 'auto' ? null : timeout,
     ...other,
     children: (state, {
       ownerState,
       ...restChildProps
     }) => {
+      // Do not pass ownerState to a DOM child. ownerState is only for
+      // Material UI styling, and React would treat it as an invalid DOM attribute.
       const childStyle = getTransitionChildStyle(state, inProp, styles, hiddenStyles, style, children.props.style);
       return /*#__PURE__*/React.cloneElement(children, {
         style: childStyle,
@@ -180,9 +189,12 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ =
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * Add a custom transition end trigger. Called with the transitioning DOM
-   * node and a done callback. Allows for more fine grained transition end
-   * logic. Note: Timeouts are still used as a fallback if provided.
+   * Add a custom transition end trigger.
+   * Use it when you need custom logic to decide when the transition has ended.
+   * Note: Timeouts are still used as a fallback if provided.
+   *
+   * @param {HTMLElement} node The transitioning DOM node.
+   * @param {Function} done Call this when the transition has finished.
    */
   addEndListener: PropTypes.func,
   /**
@@ -195,6 +207,11 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ =
    * A single child content element.
    */
   children: elementAcceptingRef.isRequired,
+  /**
+   * If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
+   * @default false
+   */
+  disablePrefersReducedMotion: PropTypes.bool,
   /**
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.

package/IconButton/IconButton.js

@@ -21,6 +21,7 @@ var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _CircularProgress = _interopRequireDefault(require("../CircularProgress"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _iconButtonClasses = _interopRequireWildcard(require("./iconButtonClasses"));
+var _utils2 = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -56,7 +57,7 @@ const IconButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   padding: 8,
   borderRadius: '50%',
   color: (theme.vars || theme).palette.action.active,
-  transition: theme.transitions.create('background-color', {
+  ...(0, _utils2.getTransitionStyles)(theme, 'background-color', {
     duration: theme.transitions.duration.shortest
   }),
   variants: [{
@@ -118,14 +119,7 @@ const IconButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
       color
     },
     style: {
-      color: (theme.vars || theme).palette[color].main
-    }
-  })), ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()) // check all the used fields in the style below
-  .map(([color]) => ({
-    props: {
-      color
-    },
-    style: {
+      color: (theme.vars || theme).palette[color].main,
       '--IconButton-hoverBg': theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity)
     }
   })), {

package/IconButton/IconButton.mjs

@@ -14,6 +14,7 @@ import ButtonBase from "../ButtonBase/index.mjs";
 import CircularProgress from "../CircularProgress/index.mjs";
 import capitalize from "../utils/capitalize.mjs";
 import iconButtonClasses, { getIconButtonUtilityClass } from "./iconButtonClasses.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -49,7 +50,7 @@ const IconButtonRoot = styled(ButtonBase, {
   padding: 8,
   borderRadius: '50%',
   color: (theme.vars || theme).palette.action.active,
-  transition: theme.transitions.create('background-color', {
+  ...getTransitionStyles(theme, 'background-color', {
     duration: theme.transitions.duration.shortest
   }),
   variants: [{
@@ -111,14 +112,7 @@ const IconButtonRoot = styled(ButtonBase, {
       color
     },
     style: {
-      color: (theme.vars || theme).palette[color].main
-    }
-  })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
-  .map(([color]) => ({
-    props: {
-      color
-    },
-    style: {
+      color: (theme.vars || theme).palette[color].main,
       '--IconButton-hoverBg': theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity)
     }
   })), {

package/Input/Input.d.mts

@@ -13,6 +13,10 @@ export interface InputProps 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.
    */

package/Input/Input.d.ts

@@ -13,6 +13,10 @@ export interface InputProps 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.
    */

package/Input/Input.js

@@ -20,6 +20,7 @@ var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/c
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _inputLabelClasses = _interopRequireDefault(require("../InputLabel/inputLabelClasses"));
 var _inputClasses = _interopRequireWildcard(require("./inputClasses"));
+var _utils = require("../transitions/utils");
 var _InputBase2 = require("../InputBase/InputBase");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
@@ -79,7 +80,7 @@ const InputRoot = (0, _zeroStyled.styled)(_InputBase2.InputBaseRoot, {
           position: 'absolute',
           right: 0,
           transform: 'scaleX(0)',
-          transition: theme.transitions.create('transform', {
+          ...(0, _utils.getTransitionStyles)(theme, 'transform', {
             duration: theme.transitions.duration.shorter,
             easing: theme.transitions.easing.easeOut
           }),
@@ -102,7 +103,7 @@ const InputRoot = (0, _zeroStyled.styled)(_InputBase2.InputBaseRoot, {
           content: '""',
           position: 'absolute',
           right: 0,
-          transition: theme.transitions.create('border-bottom-color', {
+          ...(0, _utils.getTransitionStyles)(theme, 'border-bottom-color', {
             duration: theme.transitions.duration.shorter
           }),
           pointerEvents: 'none' // Transparent to the hover style.
@@ -146,6 +147,8 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
     fullWidth = false,
     inputComponent = 'input',
     multiline = false,
+    notched,
+    // declare here to prevent spreading to DOM
     slotProps,
     slots = {},
     type = 'text',
@@ -274,6 +277,10 @@ process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ =
    * Name attribute of the `input` element.
    */
   name: _propTypes.default.string,
+  /**
+   * @internal
+   */
+  notched: _propTypes.default.bool,
   /**
    * Callback fired when the value is changed.
    *

package/Input/Input.mjs

@@ -13,6 +13,7 @@ import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFil
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import inputLabelClasses from "../InputLabel/inputLabelClasses.mjs";
 import inputClasses, { getInputUtilityClass } from "./inputClasses.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from "../InputBase/InputBase.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -72,7 +73,7 @@ const InputRoot = styled(InputBaseRoot, {
           position: 'absolute',
           right: 0,
           transform: 'scaleX(0)',
-          transition: theme.transitions.create('transform', {
+          ...getTransitionStyles(theme, 'transform', {
             duration: theme.transitions.duration.shorter,
             easing: theme.transitions.easing.easeOut
           }),
@@ -95,7 +96,7 @@ const InputRoot = styled(InputBaseRoot, {
           content: '""',
           position: 'absolute',
           right: 0,
-          transition: theme.transitions.create('border-bottom-color', {
+          ...getTransitionStyles(theme, 'border-bottom-color', {
             duration: theme.transitions.duration.shorter
           }),
           pointerEvents: 'none' // Transparent to the hover style.
@@ -139,6 +140,8 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
     fullWidth = false,
     inputComponent = 'input',
     multiline = false,
+    notched,
+    // declare here to prevent spreading to DOM
     slotProps,
     slots = {},
     type = 'text',
@@ -267,6 +270,10 @@ process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ =
    * Name attribute of the `input` element.
    */
   name: PropTypes.string,
+  /**
+   * @internal
+   */
+  notched: PropTypes.bool,
   /**
    * Callback fired when the value is changed.
    *

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.

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.