@mui/material 5.11.10 → 5.11.11

package/generateUtilityClasses/index.d.ts

@@ -1 +1 @@
-export { unstable_generateUtilityClasses as default } from '@mui/utils';
+export { unstable_generateUtilityClasses as default } from '@mui/utils';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.10
+ * @mui/material v5.11.11
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internal/switchBaseClasses.d.ts

@@ -1,12 +1,12 @@
-export interface SwitchBaseClasses {
-    root: string;
-    checked: string;
-    disabled: string;
-    input: string;
-    edgeStart: string;
-    edgeEnd: string;
-}
-export type SwitchBaseClassKey = keyof SwitchBaseClasses;
-export declare function getSwitchBaseUtilityClass(slot: string): string;
-declare const switchBaseClasses: SwitchBaseClasses;
-export default switchBaseClasses;
+export interface SwitchBaseClasses {
+    root: string;
+    checked: string;
+    disabled: string;
+    input: string;
+    edgeStart: string;
+    edgeEnd: string;
+}
+export type SwitchBaseClassKey = keyof SwitchBaseClasses;
+export declare function getSwitchBaseUtilityClass(slot: string): string;
+declare const switchBaseClasses: SwitchBaseClasses;
+export default switchBaseClasses;

package/legacy/Badge/Badge.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { usePreviousProps } from '@mui/utils';
 import composeClasses from '@mui/base/composeClasses';
-import { useBadge } from '@mui/base/BadgeUnstyled';
+import useBadge from '@mui/base/useBadge';
 import { useSlotProps } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';

package/legacy/Container/Container.js

@@ -1,4 +1,3 @@
-/* eslint-disable material-ui/mui-name-matches-component-name */
 import PropTypes from 'prop-types';
 import { createContainer } from '@mui/system';
 import capitalize from '../utils/capitalize';

package/legacy/InputBase/InputBase.js

@@ -439,7 +439,7 @@ var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
       ref: ref,
       onClick: handleClick
     }, other, {
-      className: clsx(classes.root, rootProps.className, className),
+      className: clsx(classes.root, rootProps.className, className, readOnly && 'MuiInputBase-readOnly'),
       children: [startAdornment, /*#__PURE__*/_jsx(FormControlContext.Provider, {
         value: null,
         children: /*#__PURE__*/_jsx(Input, _extends({
@@ -466,7 +466,7 @@ var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
           ownerState: _extends({}, ownerState, inputProps.ownerState)
         }, {
           ref: handleInputRef,
-          className: clsx(classes.input, inputProps.className),
+          className: clsx(classes.input, inputProps.className, readOnly && 'MuiInputBase-readOnly'),
           onBlur: handleBlur,
           onChange: handleChange,
           onFocus: handleFocus

package/legacy/InputLabel/InputLabel.js

@@ -94,7 +94,9 @@ var InputLabelRoot = styled(FormLabel, {
   }, ownerState.shrink && {
     userSelect: 'none',
     pointerEvents: 'auto',
-    maxWidth: 'calc(133% - 24px)',
+    // Theoretically, we should have (8+5)*2/0.75 = 34px
+    // but it feels a better when it bleeds a bit on the left, so 32px.
+    maxWidth: 'calc(133% - 32px)',
     transform: 'translate(14px, -9px) scale(0.75)'
   }));
 });

package/legacy/ListSubheader/ListSubheader.js

@@ -86,6 +86,7 @@ var ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inProps
     ownerState: ownerState
   }, other));
 });
+ListSubheader.muiSkipListHighlight = true;
 process.env.NODE_ENV !== "production" ? ListSubheader.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/legacy/MenuList/MenuList.js

@@ -196,6 +196,13 @@ var MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
         activeItemIndex = index;
       }
     }
+    if (activeItemIndex === index && (child.props.disabled || child.props.muiSkipListHighlight || child.type.muiSkipListHighlight)) {
+      activeItemIndex += 1;
+      if (activeItemIndex >= children.length) {
+        // there are no focusable items within the list.
+        activeItemIndex = -1;
+      }
+    }
   });
   var items = React.Children.map(children, function (child, index) {
     if (index === activeItemIndex) {

package/legacy/Modal/Modal.js

@@ -2,6 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import ModalUnstyled, { modalUnstyledClasses } from '@mui/base/ModalUnstyled';
 import { isHostComponent, resolveComponentProps } from '@mui/base/utils';
 import { elementAcceptingRef, HTMLElementType } from '@mui/utils';
@@ -10,9 +11,6 @@ import useThemeProps from '../styles/useThemeProps';
 import Backdrop from '../Backdrop';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var modalClasses = modalUnstyledClasses;
-var extendUtilityClasses = function extendUtilityClasses(ownerState) {
-  return ownerState.classes;
-};
 var ModalRoot = styled('div', {
   name: 'MuiModal',
   slot: 'Root',
@@ -66,6 +64,8 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   var _props$BackdropCompon = props.BackdropComponent,
     BackdropComponent = _props$BackdropCompon === void 0 ? ModalBackdrop : _props$BackdropCompon,
     BackdropProps = props.BackdropProps,
+    classes = props.classes,
+    className = props.className,
     _props$closeAfterTran = props.closeAfterTransition,
     closeAfterTransition = _props$closeAfterTran === void 0 ? false : _props$closeAfterTran,
     children = props.children,
@@ -93,7 +93,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     slotProps = props.slotProps,
     slots = props.slots,
     theme = props.theme,
-    other = _objectWithoutProperties(props, ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"]);
+    other = _objectWithoutProperties(props, ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"]);
   var _React$useState = React.useState(true),
     exited = _React$useState[0],
     setExited = _React$useState[1];
@@ -111,7 +111,6 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   var ownerState = _extends({}, props, commonProps, {
     exited: exited
   });
-  var classes = extendUtilityClasses(ownerState);
   var RootSlot = (_ref2 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref2 : ModalRoot;
   var BackdropSlot = (_ref3 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref3 : BackdropComponent;
   var rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
@@ -126,10 +125,14 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
         return _extends({}, resolveComponentProps(rootSlotProps, ownerState), !isHostComponent(RootSlot) && {
           as: component,
           theme: theme
+        }, {
+          className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
         });
       },
       backdrop: function backdrop() {
-        return _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState));
+        return _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState), {
+          className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, classes == null ? void 0 : classes.backdrop)
+        });
       }
     },
     onTransitionEnter: function onTransitionEnter() {
@@ -139,9 +142,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       return setExited(true);
     },
     ref: ref
-  }, other, {
-    classes: classes
-  }, commonProps, {
+  }, other, commonProps, {
     children: children
   }));
 });
@@ -178,6 +179,10 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * When set to true the Modal waits until a nested Transition is completed before closing.
    * @default false

package/legacy/OutlinedInput/OutlinedInput.js

@@ -161,7 +161,7 @@ var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps
         ownerState: ownerState,
         className: classes.notchedOutline,
         label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
-          children: [label, "\xA0", '*']
+          children: [label, "\u2009", '*']
         })) : label,
         notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)
       });

package/legacy/Rating/Rating.js

@@ -44,7 +44,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     emptyValueFocused = ownerState.emptyValueFocused,
     focusVisible = ownerState.focusVisible;
   var slots = {
-    root: ['root', "size".concat(capitalize(size)), disabled && 'disabled', focusVisible && 'focusVisible', readOnly && 'readyOnly'],
+    root: ['root', "size".concat(capitalize(size)), disabled && 'disabled', focusVisible && 'focusVisible', readOnly && 'readOnly'],
     label: ['label', 'pristine'],
     labelEmptyValue: [emptyValueFocused && 'labelEmptyValueActive'],
     icon: ['icon'],
@@ -459,7 +459,7 @@ var Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     ref: handleRef,
     onMouseMove: handleMouseMove,
     onMouseLeave: handleMouseLeave,
-    className: clsx(classes.root, className),
+    className: clsx(classes.root, className, readOnly && 'MuiRating-readOnly'),
     ownerState: ownerState,
     role: readOnly ? 'img' : null,
     "aria-label": readOnly ? getLabelText(value) : null

package/legacy/Select/SelectInput.js

@@ -336,8 +336,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       computeDisplay = true;
     }
   }
-  var items = childrenArray.map(function (child, index, arr) {
-    var _arr$, _arr$$props, _arr$2, _arr$2$props;
+  var items = childrenArray.map(function (child) {
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return null;
     }
@@ -366,25 +365,6 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
     if (selected) {
       foundMatch = true;
     }
-    if (child.props.value === undefined) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        'aria-readonly': true,
-        role: 'option'
-      });
-    }
-    var isFirstSelectableElement = function isFirstSelectableElement() {
-      if (value) {
-        return selected;
-      }
-      var firstSelectableElement = arr.find(function (item) {
-        var _item$props;
-        return (item == null ? void 0 : (_item$props = item.props) == null ? void 0 : _item$props.value) !== undefined && item.props.disabled !== true;
-      });
-      if (child === firstSelectableElement) {
-        return true;
-      }
-      return selected;
-    };
     return /*#__PURE__*/React.cloneElement(child, {
       'aria-selected': selected ? 'true' : 'false',
       onClick: handleItemClick(child),
@@ -400,7 +380,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
         }
       },
       role: 'option',
-      selected: ((_arr$ = arr[0]) == null ? void 0 : (_arr$$props = _arr$.props) == null ? void 0 : _arr$$props.value) === undefined || ((_arr$2 = arr[0]) == null ? void 0 : (_arr$2$props = _arr$2.props) == null ? void 0 : _arr$2$props.disabled) === true ? isFirstSelectableElement() : selected,
+      selected: selected,
       value: undefined,
       // The value is most likely not a valid HTML attribute.
       'data-value': child.props.value // Instead, we provide it as a data attribute.

package/legacy/Slider/Slider.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { chainPropTypes } from '@mui/utils';
 import { isHostComponent, useSlotProps, unstable_composeClasses as composeClasses } from '@mui/base';
-import { useSlider } from '@mui/base/SliderUnstyled';
+import useSlider, { valueToPercent } from '@mui/base/useSlider';
 import { alpha, lighten, darken } from '@mui/system';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { slotShouldForwardProp } from '../styles/styled';
@@ -17,9 +17,6 @@ import SliderValueLabel from './SliderValueLabel';
 import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var valueToPercent = function valueToPercent(value, min, max) {
-  return (value - min) * 100 / (max - min);
-};
 function Identity(x) {
   return x;
 }
@@ -587,7 +584,8 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     elementType: ThumbSlot,
     getSlotProps: getThumbProps,
     externalSlotProps: thumbSlotProps,
-    ownerState: _extends({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState)
+    ownerState: _extends({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState),
+    className: classes.thumb
   });
   var valueLabelProps = useSlotProps({
     elementType: ValueLabelSlot,
@@ -604,7 +602,8 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   var markLabelProps = useSlotProps({
     elementType: MarkLabelSlot,
     externalSlotProps: markLabelSlotProps,
-    ownerState: ownerState
+    ownerState: ownerState,
+    className: classes.markLabel
   });
   var inputSliderProps = useSlotProps({
     elementType: InputSlot,
@@ -647,8 +646,10 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       var percent = valueToPercent(value, min, max);
       var style = axisProps[axis].offset(percent);
       var ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot;
-      return /*#__PURE__*/_jsx(React.Fragment, {
-        children: /*#__PURE__*/_jsx(ValueLabelComponent, _extends({}, !isHostComponent(ValueLabelComponent) && {
+      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, _extends({}, !isHostComponent(ValueLabelComponent) && {
           valueLabelFormat: valueLabelFormat,
           valueLabelDisplay: valueLabelDisplay,
           value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
@@ -657,8 +658,7 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
           disabled: disabled
         }, valueLabelProps, {
           children: /*#__PURE__*/_jsx(ThumbSlot, _extends({
-            "data-index": index,
-            "data-focusvisible": focusedThumbIndex === index
+            "data-index": index
           }, thumbProps, {
             className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
             style: _extends({}, style, {
@@ -673,8 +673,8 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
               value: values[index]
             }, inputSliderProps))
           }))
-        }))
-      }, index);
+        }), index)
+      );
     })]
   }));
 });
@@ -715,6 +715,10 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the

package/legacy/Snackbar/Snackbar.js

@@ -3,13 +3,12 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses, useSlotProps } from '@mui/base';
 import ClickAwayListener from '@mui/base/ClickAwayListener';
+import useSnackbar from '@mui/base/useSnackbar';
 import styled from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
-import useEventCallback from '../utils/useEventCallback';
 import capitalize from '../utils/capitalize';
 import Grow from '../Grow';
 import SnackbarContent from '../SnackbarContent';
@@ -114,78 +113,28 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     anchorOrigin: {
       vertical: vertical,
       horizontal: horizontal
-    }
+    },
+    autoHideDuration: autoHideDuration,
+    disableWindowBlurListener: disableWindowBlurListener,
+    TransitionComponent: TransitionComponent,
+    transitionDuration: transitionDuration
   });
   var classes = useUtilityClasses(ownerState);
-  var timerAutoHide = React.useRef();
+  var _useSnackbar = useSnackbar(_extends({}, ownerState, {
+      ref: ref
+    })),
+    getRootProps = _useSnackbar.getRootProps,
+    onClickAway = _useSnackbar.onClickAway;
   var _React$useState = React.useState(true),
     exited = _React$useState[0],
     setExited = _React$useState[1];
-  var handleClose = useEventCallback(function () {
-    if (onClose) {
-      onClose.apply(void 0, arguments);
-    }
+  var rootProps = useSlotProps({
+    elementType: SnackbarRoot,
+    getSlotProps: getRootProps,
+    externalForwardedProps: other,
+    ownerState: ownerState,
+    className: [classes.root, className]
   });
-  var setAutoHideTimer = useEventCallback(function (autoHideDurationParam) {
-    if (!onClose || autoHideDurationParam == null) {
-      return;
-    }
-    clearTimeout(timerAutoHide.current);
-    timerAutoHide.current = setTimeout(function () {
-      handleClose(null, 'timeout');
-    }, autoHideDurationParam);
-  });
-  React.useEffect(function () {
-    if (open) {
-      setAutoHideTimer(autoHideDuration);
-    }
-    return function () {
-      clearTimeout(timerAutoHide.current);
-    };
-  }, [open, autoHideDuration, setAutoHideTimer]);
-
-  // Pause the timer when the user is interacting with the Snackbar
-  // or when the user hide the window.
-  var handlePause = function handlePause() {
-    clearTimeout(timerAutoHide.current);
-  };
-
-  // Restart the timer when the user is no longer interacting with the Snackbar
-  // or when the window is shown back.
-  var handleResume = React.useCallback(function () {
-    if (autoHideDuration != null) {
-      setAutoHideTimer(resumeHideDuration != null ? resumeHideDuration : autoHideDuration * 0.5);
-    }
-  }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
-  var handleFocus = function handleFocus(event) {
-    if (onFocus) {
-      onFocus(event);
-    }
-    handlePause();
-  };
-  var handleMouseEnter = function handleMouseEnter(event) {
-    if (onMouseEnter) {
-      onMouseEnter(event);
-    }
-    handlePause();
-  };
-  var handleBlur = function handleBlur(event) {
-    if (onBlur) {
-      onBlur(event);
-    }
-    handleResume();
-  };
-  var handleMouseLeave = function handleMouseLeave(event) {
-    if (onMouseLeave) {
-      onMouseLeave(event);
-    }
-    handleResume();
-  };
-  var handleClickAway = function handleClickAway(event) {
-    if (onClose) {
-      onClose(event, 'clickaway');
-    }
-  };
   var handleExited = function handleExited(node) {
     setExited(true);
     if (onExited) {
@@ -198,63 +147,15 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
       onEnter(node, isAppearing);
     }
   };
-  React.useEffect(function () {
-    // TODO: window global should be refactored here
-    if (!disableWindowBlurListener && open) {
-      window.addEventListener('focus', handleResume);
-      window.addEventListener('blur', handlePause);
-      return function () {
-        window.removeEventListener('focus', handleResume);
-        window.removeEventListener('blur', handlePause);
-      };
-    }
-    return undefined;
-  }, [disableWindowBlurListener, handleResume, open]);
-  React.useEffect(function () {
-    if (!open) {
-      return undefined;
-    }
-
-    /**
-     * @param {KeyboardEvent} nativeEvent
-     */
-    function handleKeyDown(nativeEvent) {
-      if (!nativeEvent.defaultPrevented) {
-        // IE11, Edge (prior to using Bink?) use 'Esc'
-        if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
-          // not calling `preventDefault` since we don't know if people may ignore this event e.g. a permanently open snackbar
-          if (onClose) {
-            onClose(nativeEvent, 'escapeKeyDown');
-          }
-        }
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown);
-    return function () {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [exited, open, onClose]);
 
   // So we only render active snackbars.
   if (!open && exited) {
     return null;
   }
   return /*#__PURE__*/_jsx(ClickAwayListener, _extends({
-    onClickAway: handleClickAway
+    onClickAway: onClickAway
   }, ClickAwayListenerProps, {
-    children: /*#__PURE__*/_jsx(SnackbarRoot, _extends({
-      className: clsx(classes.root, className),
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      ownerState: ownerState,
-      ref: ref
-      // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
-      // See https://github.com/mui/material-ui/issues/29080
-      ,
-      role: "presentation"
-    }, other, {
+    children: /*#__PURE__*/_jsx(SnackbarRoot, _extends({}, rootProps, {
       children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
         appear: true,
         in: open,