@mui/material 6.1.2 → 6.1.4

package/Checkbox/Checkbox.js

@@ -141,6 +141,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     ownerState: ownerState,
     ref: ref,
     className: clsx(classes.root, className),
+    disableRipple: disableRipple,
     ...other,
     classes: classes
   });

package/Grid2/Grid2.d.ts

@@ -43,24 +43,29 @@ export interface GridBaseProps {
     offset?: ResponsiveStyleValue<GridOffset>;
     /**
      * @internal
-     * The level of the grid starts from `0`
-     * and increases when the grid nests inside another grid regardless of container or item.
+     * The level of the grid starts from `0` and increases when the grid nests
+     * inside another grid. Nesting is defined as a container Grid being a direct
+     * child of a container Grid.
      *
      * ```js
-     * <Grid> // level 0
-     *   <Grid> // level 1
-     *     <Grid> // level 2
-     *   <Grid> // level 1
+     * <Grid container> // level 0
+     *   <Grid container> // level 1
+     *     <Grid container> // level 2
      * ```
      *
-     * Only consecutive grid is considered nesting.
-     * A grid container will start at `0` if there are non-Grid element above it.
+     * Only consecutive grid is considered nesting. A grid container will start at
+     * `0` if there are non-Grid container element above it.
      *
      * ```js
-     * <Grid> // level 0
+     * <Grid container> // level 0
      *   <div>
-     *     <Grid> // level 0
-     *       <Grid> // level 1
+     *     <Grid container> // level 0
+     * ```
+     *
+     * ```js
+     * <Grid container> // level 0
+     *   <Grid>
+     *     <Grid container> // level 0
      * ```
      */
     unstable_level?: number;

package/Grid2/Grid2.js

@@ -2,6 +2,7 @@
 
 import PropTypes from 'prop-types';
 import { createGrid as createGrid2 } from '@mui/system/Grid';
+import requirePropFactory from "../utils/requirePropFactory.js";
 import { styled, useThemeProps } from "../styles/index.js";
 /**
  *
@@ -81,24 +82,29 @@ process.env.NODE_ENV !== "production" ? Grid2.propTypes /* remove-proptypes */ =
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * @internal
-   * The level of the grid starts from `0`
-   * and increases when the grid nests inside another grid regardless of container or item.
+   * The level of the grid starts from `0` and increases when the grid nests
+   * inside another grid. Nesting is defined as a container Grid being a direct
+   * child of a container Grid.
    *
    * ```js
-   * <Grid> // level 0
-   *   <Grid> // level 1
-   *     <Grid> // level 2
-   *   <Grid> // level 1
+   * <Grid container> // level 0
+   *   <Grid container> // level 1
+   *     <Grid container> // level 2
    * ```
    *
-   * Only consecutive grid is considered nesting.
-   * A grid container will start at `0` if there are non-Grid element above it.
+   * Only consecutive grid is considered nesting. A grid container will start at
+   * `0` if there are non-Grid container element above it.
    *
    * ```js
-   * <Grid> // level 0
+   * <Grid container> // level 0
    *   <div>
-   *     <Grid> // level 0
-   *       <Grid> // level 1
+   *     <Grid container> // level 0
+   * ```
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid>
+   *     <Grid container> // level 0
    * ```
    */
   unstable_level: PropTypes.number,
@@ -109,4 +115,16 @@ process.env.NODE_ENV !== "production" ? Grid2.propTypes /* remove-proptypes */ =
    */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap'])
 } : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  const Component = Grid2;
+  const requireProp = requirePropFactory('Grid2', Component);
+  // eslint-disable-next-line no-useless-concat
+  Component['propTypes' + ''] = {
+    // eslint-disable-next-line react/forbid-foreign-prop-types
+    ...Component.propTypes,
+    direction: requireProp('container'),
+    spacing: requireProp('container'),
+    wrap: requireProp('container')
+  };
+}
 export default Grid2;

package/IconButton/IconButton.js

@@ -49,12 +49,11 @@ const IconButtonRoot = styled(ButtonBase, {
     duration: theme.transitions.duration.shortest
   }),
   variants: [{
-    props: {
-      disableRipple: false
-    },
+    props: props => !props.disableRipple,
     style: {
+      '--IconButton-hoverBg': theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
       '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+        backgroundColor: 'var(--IconButton-hoverBg)',
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent'
@@ -113,17 +112,10 @@ const IconButtonRoot = styled(ButtonBase, {
   })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
-      color,
-      disableRipple: false
+      color
     },
     style: {
-      '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha((theme.vars || theme).palette[color].main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
+      '--IconButton-hoverBg': theme.vars ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha((theme.vars || theme).palette[color].main, theme.palette.action.hoverOpacity)
     }
   })), {
     props: {
@@ -164,7 +156,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     color = 'default',
     disabled = false,
     disableFocusRipple = false,
-    disableRipple = false,
     size = 'medium',
     ...other
   } = props;
@@ -174,7 +165,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     color,
     disabled,
     disableFocusRipple,
-    disableRipple,
     size
   };
   const classes = useUtilityClasses(ownerState);
@@ -183,7 +173,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     centerRipple: true,
     focusRipple: !disableFocusRipple,
     disabled: disabled,
-    disableRipple: disableRipple,
     ref: ref,
     ...other,
     ownerState: ownerState,

package/InputBase/InputBase.js

@@ -372,7 +372,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     if (!isControlled) {
       const element = event.target || inputRef.current;
       if (element == null) {
-        throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Expected valid input target. Did you use a custom \`inputComponent\` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info.` : _formatMuiErrorMessage(1));
+        throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: Expected valid input target. ' + 'Did you use a custom `inputComponent` and forget to forward refs? ' + 'See https://mui.com/r/input-component-ref-interface for more info.' : _formatMuiErrorMessage(1));
       }
       checkDirty({
         value: element.value

package/Modal/useModal.js

@@ -143,6 +143,12 @@ function useModal(parameters) {
       ...otherHandlers
     };
     return {
+      /*
+       * Marking an element with the role presentation indicates to assistive technology
+       * that this element should be ignored; it exists to support the web application and
+       * is not meant for humans to interact with directly.
+       * https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md
+       */
       role: 'presentation',
       ...externalEventHandlers,
       onKeyDown: createHandleKeyDown(externalEventHandlers),

package/OutlinedInput/OutlinedInput.js

@@ -46,6 +46,12 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
     [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
       borderColor: (theme.vars || theme).palette.text.primary
     },
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
+        borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+      }
+    },
     [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
       borderWidth: 2
     },
@@ -62,12 +68,6 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
       props: {},
       // to overide the above style
       style: {
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
-            borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
-          }
-        },
         [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
           borderColor: (theme.vars || theme).palette.error.main
         },

package/PigmentGrid/PigmentGrid.d.ts

@@ -40,29 +40,6 @@ export interface GridBaseProps {
      * Defines the offset of the grid.
      */
     offset?: ResponsiveStyleValue<number> | undefined;
-    /**
-     * @internal
-     * The level of the grid starts from `0`
-     * and increases when the grid nests inside another grid regardless of container or item.
-     *
-     * ```js
-     * <Grid> // level 0
-     *   <Grid> // level 1
-     *     <Grid> // level 2
-     *   <Grid> // level 1
-     * ```
-     *
-     * Only consecutive grid is considered nesting.
-     * A grid container will start at `0` if there are non-Grid element above it.
-     *
-     * ```js
-     * <Grid> // level 0
-     *   <div>
-     *     <Grid> // level 0
-     *       <Grid> // level 1
-     * ```
-     */
-    unstable_level?: number;
     /**
      * Defines the vertical space between the type `item` components.
      * It overrides the value of the `spacing` prop.

package/PigmentGrid/PigmentGrid.js

@@ -113,29 +113,6 @@ process.env.NODE_ENV !== "production" ? PigmentGrid.propTypes /* remove-proptype
    * @ignore
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * @internal
-   * The level of the grid starts from `0`
-   * and increases when the grid nests inside another grid regardless of container or item.
-   *
-   * ```js
-   * <Grid> // level 0
-   *   <Grid> // level 1
-   *     <Grid> // level 2
-   *   <Grid> // level 1
-   * ```
-   *
-   * Only consecutive grid is considered nesting.
-   * A grid container will start at `0` if there are non-Grid element above it.
-   *
-   * ```js
-   * <Grid> // level 0
-   *   <div>
-   *     <Grid> // level 0
-   *       <Grid> // level 1
-   * ```
-   */
-  unstable_level: PropTypes.number,
   /**
    * Defines the `flex-wrap` style property.
    * It's applied for all screen sizes.

package/PigmentHidden/PigmentHidden.js

@@ -166,6 +166,7 @@ process.env.NODE_ENV !== "production" ? HiddenCss.propTypes /* remove-proptypes
    */
   xsUp: PropTypes.bool
 } : void 0;
+
 /**
  *
  * Demos:

package/Select/SelectInput.js

@@ -347,7 +347,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     let selected;
     if (multiple) {
       if (!Array.isArray(value)) {
-        throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`value\` prop must be an array when using the \`Select\` component with \`multiple\`.` : _formatMuiErrorMessage(2));
+        throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `value` prop must be an array ' + 'when using the `Select` component with `multiple`.' : _formatMuiErrorMessage(2));
       }
       selected = value.some(v => areEqualValues(v, child.props.value));
       if (selected && computeDisplay) {

package/Slider/Slider.js

@@ -335,7 +335,7 @@ export const SliderThumb = styled('span', {
     }
   }))]
 })));
-export const SliderValueLabel = styled(BaseSliderValueLabel, {
+const SliderValueLabel = styled(BaseSliderValueLabel, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: (props, styles) => styles.valueLabel
@@ -420,6 +420,29 @@ export const SliderValueLabel = styled(BaseSliderValueLabel, {
     }
   }]
 })));
+process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.element.isRequired,
+  /**
+   * @ignore
+   */
+  index: PropTypes.number.isRequired,
+  /**
+   * @ignore
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * @ignore
+   */
+  value: PropTypes.number.isRequired
+} : void 0;
+export { SliderValueLabel };
 export const SliderMark = styled('span', {
   name: 'MuiSlider',
   slot: 'Mark',
@@ -759,40 +782,36 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       const percent = valueToPercent(value, min, max);
       const style = axisProps[axis].offset(percent);
       const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot;
-      return (
-        /*#__PURE__*/
-        /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */
-        _jsx(ValueLabelComponent, {
-          ...(!isHostComponent(ValueLabelComponent) && {
-            valueLabelFormat,
-            valueLabelDisplay,
-            value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
-            index,
-            open: open === index || active === index || valueLabelDisplay === 'on',
-            disabled
-          }),
-          ...valueLabelProps,
-          children: /*#__PURE__*/_jsx(ThumbSlot, {
+      return /*#__PURE__*/ /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */_jsx(ValueLabelComponent, {
+        ...(!isHostComponent(ValueLabelComponent) && {
+          valueLabelFormat,
+          valueLabelDisplay,
+          value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
+          index,
+          open: open === index || active === index || valueLabelDisplay === 'on',
+          disabled
+        }),
+        ...valueLabelProps,
+        children: /*#__PURE__*/_jsx(ThumbSlot, {
+          "data-index": index,
+          ...thumbProps,
+          className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
+          style: {
+            ...style,
+            ...getThumbStyle(index),
+            ...thumbProps.style
+          },
+          children: /*#__PURE__*/_jsx(InputSlot, {
             "data-index": index,
-            ...thumbProps,
-            className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
-            style: {
-              ...style,
-              ...getThumbStyle(index),
-              ...thumbProps.style
-            },
-            children: /*#__PURE__*/_jsx(InputSlot, {
-              "data-index": index,
-              "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
-              "aria-valuenow": scale(value),
-              "aria-labelledby": ariaLabelledby,
-              "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
-              value: values[index],
-              ...inputSliderProps
-            })
+            "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
+            "aria-valuenow": scale(value),
+            "aria-labelledby": ariaLabelledby,
+            "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
+            value: values[index],
+            ...inputSliderProps
           })
-        }, index)
-      );
+        })
+      }, index);
     })]
   });
 });

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.1.2
+ * @mui/material v6.1.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/Badge/Badge.js

@@ -210,16 +210,19 @@ const BadgeBadge = styled('span', {
     }
   }]
 })));
+function getAnchorOrigin(anchorOrigin) {
+  return {
+    vertical: anchorOrigin?.vertical ?? 'top',
+    horizontal: anchorOrigin?.horizontal ?? 'right'
+  };
+}
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const props = useDefaultProps({
     props: inProps,
     name: 'MuiBadge'
   });
   const {
-    anchorOrigin: anchorOriginProp = {
-      vertical: 'top',
-      horizontal: 'right'
-    },
+    anchorOrigin: anchorOriginProp,
     className,
     classes: classesProp,
     component,
@@ -249,7 +252,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     showZero
   });
   const prevProps = usePreviousProps({
-    anchorOrigin: anchorOriginProp,
+    anchorOrigin: getAnchorOrigin(anchorOriginProp),
     color: colorProp,
     overlap: overlapProp,
     variant: variantProp,
@@ -259,9 +262,10 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const {
     color = colorProp,
     overlap = overlapProp,
-    anchorOrigin = anchorOriginProp,
+    anchorOrigin: anchorOriginPropProp,
     variant = variantProp
   } = invisible ? prevProps : props;
+  const anchorOrigin = getAnchorOrigin(anchorOriginPropProp);
   const displayValue = variant !== 'dot' ? displayValueFromHook : undefined;
   const ownerState = {
     ...props,
@@ -320,8 +324,8 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
    * }
    */
   anchorOrigin: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['left', 'right']).isRequired,
-    vertical: PropTypes.oneOf(['bottom', 'top']).isRequired
+    horizontal: PropTypes.oneOf(['left', 'right']),
+    vertical: PropTypes.oneOf(['bottom', 'top'])
   }),
   /**
    * The content rendered within the badge.

package/modern/Checkbox/Checkbox.js

@@ -141,6 +141,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     ownerState: ownerState,
     ref: ref,
     className: clsx(classes.root, className),
+    disableRipple: disableRipple,
     ...other,
     classes: classes
   });

package/modern/Grid2/Grid2.js

@@ -2,6 +2,7 @@
 
 import PropTypes from 'prop-types';
 import { createGrid as createGrid2 } from '@mui/system/Grid';
+import requirePropFactory from "../utils/requirePropFactory.js";
 import { styled, useThemeProps } from "../styles/index.js";
 /**
  *
@@ -81,24 +82,29 @@ process.env.NODE_ENV !== "production" ? Grid2.propTypes /* remove-proptypes */ =
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * @internal
-   * The level of the grid starts from `0`
-   * and increases when the grid nests inside another grid regardless of container or item.
+   * The level of the grid starts from `0` and increases when the grid nests
+   * inside another grid. Nesting is defined as a container Grid being a direct
+   * child of a container Grid.
    *
    * ```js
-   * <Grid> // level 0
-   *   <Grid> // level 1
-   *     <Grid> // level 2
-   *   <Grid> // level 1
+   * <Grid container> // level 0
+   *   <Grid container> // level 1
+   *     <Grid container> // level 2
    * ```
    *
-   * Only consecutive grid is considered nesting.
-   * A grid container will start at `0` if there are non-Grid element above it.
+   * Only consecutive grid is considered nesting. A grid container will start at
+   * `0` if there are non-Grid container element above it.
    *
    * ```js
-   * <Grid> // level 0
+   * <Grid container> // level 0
    *   <div>
-   *     <Grid> // level 0
-   *       <Grid> // level 1
+   *     <Grid container> // level 0
+   * ```
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid>
+   *     <Grid container> // level 0
    * ```
    */
   unstable_level: PropTypes.number,
@@ -109,4 +115,16 @@ process.env.NODE_ENV !== "production" ? Grid2.propTypes /* remove-proptypes */ =
    */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap'])
 } : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  const Component = Grid2;
+  const requireProp = requirePropFactory('Grid2', Component);
+  // eslint-disable-next-line no-useless-concat
+  Component['propTypes' + ''] = {
+    // eslint-disable-next-line react/forbid-foreign-prop-types
+    ...Component.propTypes,
+    direction: requireProp('container'),
+    spacing: requireProp('container'),
+    wrap: requireProp('container')
+  };
+}
 export default Grid2;

package/modern/IconButton/IconButton.js

@@ -49,12 +49,11 @@ const IconButtonRoot = styled(ButtonBase, {
     duration: theme.transitions.duration.shortest
   }),
   variants: [{
-    props: {
-      disableRipple: false
-    },
+    props: props => !props.disableRipple,
     style: {
+      '--IconButton-hoverBg': theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
       '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+        backgroundColor: 'var(--IconButton-hoverBg)',
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent'
@@ -113,17 +112,10 @@ const IconButtonRoot = styled(ButtonBase, {
   })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
-      color,
-      disableRipple: false
+      color
     },
     style: {
-      '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha((theme.vars || theme).palette[color].main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
+      '--IconButton-hoverBg': theme.vars ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha((theme.vars || theme).palette[color].main, theme.palette.action.hoverOpacity)
     }
   })), {
     props: {
@@ -164,7 +156,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     color = 'default',
     disabled = false,
     disableFocusRipple = false,
-    disableRipple = false,
     size = 'medium',
     ...other
   } = props;
@@ -174,7 +165,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     color,
     disabled,
     disableFocusRipple,
-    disableRipple,
     size
   };
   const classes = useUtilityClasses(ownerState);
@@ -183,7 +173,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     centerRipple: true,
     focusRipple: !disableFocusRipple,
     disabled: disabled,
-    disableRipple: disableRipple,
     ref: ref,
     ...other,
     ownerState: ownerState,

package/modern/InputBase/InputBase.js

@@ -372,7 +372,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     if (!isControlled) {
       const element = event.target || inputRef.current;
       if (element == null) {
-        throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Expected valid input target. Did you use a custom \`inputComponent\` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info.` : _formatMuiErrorMessage(1));
+        throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: Expected valid input target. ' + 'Did you use a custom `inputComponent` and forget to forward refs? ' + 'See https://mui.com/r/input-component-ref-interface for more info.' : _formatMuiErrorMessage(1));
       }
       checkDirty({
         value: element.value

package/modern/Modal/useModal.js

@@ -143,6 +143,12 @@ function useModal(parameters) {
       ...otherHandlers
     };
     return {
+      /*
+       * Marking an element with the role presentation indicates to assistive technology
+       * that this element should be ignored; it exists to support the web application and
+       * is not meant for humans to interact with directly.
+       * https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md
+       */
       role: 'presentation',
       ...externalEventHandlers,
       onKeyDown: createHandleKeyDown(externalEventHandlers),