@mui/material 6.1.3 → 6.1.5

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/Dialog/Dialog.d.ts

@@ -15,6 +15,12 @@ export interface DialogProps extends StandardProps<ModalProps, 'children'> {
    * The id(s) of the element(s) that label the dialog.
    */
   'aria-labelledby'?: string;
+  /**
+   * Informs assistive technologies that the element is modal.
+   * It's added on the element with role="dialog".
+   * @default true
+   */
+  'aria-modal'?: boolean | 'true' | 'false';
   /**
    * Dialog children, usually the included sub-components.
    */

package/Dialog/Dialog.js

@@ -202,6 +202,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
   const {
     'aria-describedby': ariaDescribedby,
     'aria-labelledby': ariaLabelledbyProp,
+    'aria-modal': ariaModal = true,
     BackdropComponent,
     BackdropProps,
     children,
@@ -296,6 +297,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
           role: "dialog",
           "aria-describedby": ariaDescribedby,
           "aria-labelledby": ariaLabelledby,
+          "aria-modal": ariaModal,
           ...PaperProps,
           className: clsx(classes.paper, PaperProps.className),
           ownerState: ownerState,
@@ -321,6 +323,12 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * The id(s) of the element(s) that label the dialog.
    */
   'aria-labelledby': PropTypes.string,
+  /**
+   * Informs assistive technologies that the element is modal.
+   * It's added on the element with role="dialog".
+   * @default true
+   */
+  'aria-modal': PropTypes.oneOfType([PropTypes.oneOf(['false', 'true']), PropTypes.bool]),
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
    * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.

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/PigmentHidden/PigmentHidden.js

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

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.3
+ * @mui/material v6.1.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/Autocomplete/Autocomplete.js

@@ -533,7 +533,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots: {
-      listbox: ListboxComponentProp,
       paper: PaperComponentProp,
       popper: PopperComponentProp,
       ...slots
@@ -546,7 +545,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     }
   };
   const [ListboxSlot, listboxProps] = useSlot('listbox', {
-    elementType: 'ul',
+    elementType: AutocompleteListbox,
     externalForwardedProps,
     ownerState,
     className: classes.listbox,
@@ -662,8 +661,12 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   });
   let autocompletePopper = null;
   if (groupedOptions.length > 0) {
-    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/_jsx(AutocompleteListbox, {
-      as: ListboxSlot,
+    autocompletePopper = renderAutocompletePopperChildren(
+    /*#__PURE__*/
+    // TODO v7: remove `as` prop and move ListboxComponentProp to externalForwardedProps or remove ListboxComponentProp entirely
+    // https://github.com/mui/material-ui/pull/43994#issuecomment-2401945800
+    _jsx(ListboxSlot, {
+      as: ListboxComponentProp,
       ...listboxProps,
       children: groupedOptions.map((option, index) => {
         if (groupBy) {
@@ -710,7 +713,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           ref: setAnchorEl,
           className: classes.inputRoot,
           startAdornment,
-          onMouseDown: event => handleInputMouseDown(event),
+          onMouseDown: event => {
+            if (event.target === event.currentTarget) {
+              handleInputMouseDown(event);
+            }
+          },
           ...((hasClearIcon || hasPopupIcon) && {
             endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
               className: classes.endAdornment,

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/Dialog/Dialog.js

@@ -202,6 +202,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
   const {
     'aria-describedby': ariaDescribedby,
     'aria-labelledby': ariaLabelledbyProp,
+    'aria-modal': ariaModal = true,
     BackdropComponent,
     BackdropProps,
     children,
@@ -296,6 +297,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
           role: "dialog",
           "aria-describedby": ariaDescribedby,
           "aria-labelledby": ariaLabelledby,
+          "aria-modal": ariaModal,
           ...PaperProps,
           className: clsx(classes.paper, PaperProps.className),
           ownerState: ownerState,
@@ -321,6 +323,12 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * The id(s) of the element(s) that label the dialog.
    */
   'aria-labelledby': PropTypes.string,
+  /**
+   * Informs assistive technologies that the element is modal.
+   * It's added on the element with role="dialog".
+   * @default true
+   */
+  'aria-modal': PropTypes.oneOfType([PropTypes.oneOf(['false', 'true']), PropTypes.bool]),
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
    * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.

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/PigmentHidden/PigmentHidden.js

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

package/modern/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/modern/index.js

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