@mui/material 5.15.13 → 5.15.15

package/legacy/SvgIcon/SvgIcon.js

@@ -38,7 +38,7 @@ var SvgIconRoot = styled('svg', {
     height: '1em',
     display: 'inline-block',
     // the <svg> will define the property that has `currentColor`
-    // e.g. heroicons uses fill="none" and stroke="currentColor"
+    // for example heroicons uses fill="none" and stroke="currentColor"
     fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
     flexShrink: 0,
     transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {

package/legacy/index.js

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

package/legacy/styles/experimental_extendTheme.js

@@ -38,7 +38,7 @@ function setColorChannel(obj, key) {
   if (!("".concat(key, "Channel") in obj)) {
     // custom channel token is not provided, generate one.
     // if channel token can't be generated, show a warning.
-    obj["".concat(key, "Channel")] = safeColorChannel(toRgb(obj[key]), "MUI: Can't create `palette.".concat(key, "Channel` because `palette.").concat(key, "` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().") + '\n' + "To suppress this warning, you need to explicitly provide the `palette.".concat(key, "Channel` as a string (in rgb format, e.g. \"12 12 12\") or undefined if you want to remove the channel token."));
+    obj["".concat(key, "Channel")] = safeColorChannel(toRgb(obj[key]), "MUI: Can't create `palette.".concat(key, "Channel` because `palette.").concat(key, "` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().") + '\n' + "To suppress this warning, you need to explicitly provide the `palette.".concat(key, "Channel` as a string (in rgb format, for example \"12 12 12\") or undefined if you want to remove the channel token."));
   }
 }
 var silent = function silent(fn) {

package/legacy/styles/rootShouldForwardProp.js

@@ -0,0 +1,5 @@
+import slotShouldForwardProp from './slotShouldForwardProp';
+var rootShouldForwardProp = function rootShouldForwardProp(prop) {
+  return slotShouldForwardProp(prop) && prop !== 'classes';
+};
+export default rootShouldForwardProp;

package/legacy/styles/slotShouldForwardProp.js

@@ -0,0 +1,5 @@
+// copied from @mui/system/createStyled
+function slotShouldForwardProp(prop) {
+  return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
+}
+export default slotShouldForwardProp;

package/legacy/styles/styled.js

@@ -1,12 +1,11 @@
 'use client';
 
-import createStyled, { shouldForwardProp } from '@mui/system/createStyled';
+import createStyled from '@mui/system/createStyled';
 import defaultTheme from './defaultTheme';
 import THEME_ID from './identifier';
-export var rootShouldForwardProp = function rootShouldForwardProp(prop) {
-  return shouldForwardProp(prop) && prop !== 'classes';
-};
-export var slotShouldForwardProp = shouldForwardProp;
+import rootShouldForwardProp from './rootShouldForwardProp';
+export { default as slotShouldForwardProp } from './slotShouldForwardProp';
+export { default as rootShouldForwardProp } from './rootShouldForwardProp';
 var styled = createStyled({
   themeId: THEME_ID,
   defaultTheme: defaultTheme,

package/legacy/usePagination/usePagination.js

@@ -76,7 +76,7 @@ export default function usePagination() {
   endPages.length > 0 ? endPages[0] - 2 : count - 1);
 
   // Basic list of items to render
-  // e.g. itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
+  // for example itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
   var itemList = [].concat(_toConsumableArray(showFirstButton ? ['first'] : []), _toConsumableArray(hidePrevButton ? [] : ['previous']), _toConsumableArray(startPages), _toConsumableArray(siblingsStart > boundaryCount + 2 ? ['start-ellipsis'] : boundaryCount + 1 < count - boundaryCount ? [boundaryCount + 1] : []), _toConsumableArray(range(siblingsStart, siblingsEnd)), _toConsumableArray(siblingsEnd < count - boundaryCount - 1 ? ['end-ellipsis'] : count - boundaryCount > boundaryCount ? [count - boundaryCount] : []), _toConsumableArray(endPages), _toConsumableArray(hideNextButton ? [] : ['next']), _toConsumableArray(showLastButton ? ['last'] : []));
 
   // Map the button type to its page number

package/modern/Accordion/Accordion.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "slots", "slotProps", "TransitionComponent", "TransitionProps"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
@@ -9,8 +9,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Collapse from '../Collapse';
 import Paper from '../Paper';
 import AccordionContext from './AccordionContext';
@@ -19,6 +18,7 @@ import useSlot from '../utils/useSlot';
 import accordionClasses, { getAccordionUtilityClass } from './accordionClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiAccordion');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -92,27 +92,34 @@ const AccordionRoot = styled(Paper, {
     }
   };
 }, ({
-  theme,
-  ownerState
-}) => _extends({}, !ownerState.square && {
-  borderRadius: 0,
-  '&:first-of-type': {
-    borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
-    borderTopRightRadius: (theme.vars || theme).shape.borderRadius
-  },
-  '&:last-of-type': {
-    borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
-    borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
-    // Fix a rendering issue on Edge
-    '@supports (-ms-ime-align: auto)': {
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0
+  theme
+}) => ({
+  variants: [{
+    props: props => !props.square,
+    style: {
+      borderRadius: 0,
+      '&:first-of-type': {
+        borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+        borderTopRightRadius: (theme.vars || theme).shape.borderRadius
+      },
+      '&:last-of-type': {
+        borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+        borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
+        // Fix a rendering issue on Edge
+        '@supports (-ms-ime-align: auto)': {
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0
+        }
+      }
     }
-  }
-}, !ownerState.disableGutters && {
-  [`&.${accordionClasses.expanded}`]: {
-    margin: '16px 0'
-  }
+  }, {
+    props: props => !props.disableGutters,
+    style: {
+      [`&.${accordionClasses.expanded}`]: {
+        margin: '16px 0'
+      }
+    }
+  }]
 }));
 const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {
   const props = useThemeProps({

package/modern/AccordionActions/AccordionActions.js

@@ -1,16 +1,16 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "disableSpacing"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getAccordionActionsUtilityClass } from './accordionActionsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiAccordionActions');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -30,18 +30,20 @@ const AccordionActionsRoot = styled('div', {
     } = props;
     return [styles.root, !ownerState.disableSpacing && styles.spacing];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   display: 'flex',
   alignItems: 'center',
   padding: 8,
-  justifyContent: 'flex-end'
-}, !ownerState.disableSpacing && {
-  '& > :not(style) ~ :not(style)': {
-    marginLeft: 8
-  }
-}));
+  justifyContent: 'flex-end',
+  variants: [{
+    props: props => !props.disableSpacing,
+    style: {
+      '& > :not(style) ~ :not(style)': {
+        marginLeft: 8
+      }
+    }
+  }]
+});
 const AccordionActions = /*#__PURE__*/React.forwardRef(function AccordionActions(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/modern/AccordionDetails/AccordionDetails.js

@@ -7,10 +7,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getAccordionDetailsUtilityClass } from './accordionDetailsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiAccordionDetails');
 const useUtilityClasses = ownerState => {
   const {
     classes

package/modern/AccordionSummary/AccordionSummary.js

@@ -1,19 +1,19 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import ButtonBase from '../ButtonBase';
 import AccordionContext from '../Accordion/AccordionContext';
 import accordionSummaryClasses, { getAccordionSummaryUtilityClass } from './accordionSummaryClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiAccordionSummary');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -34,13 +34,12 @@ const AccordionSummaryRoot = styled(ButtonBase, {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const transition = {
     duration: theme.transitions.duration.shortest
   };
-  return _extends({
+  return {
     display: 'flex',
     minHeight: 48,
     padding: theme.spacing(0, 2),
@@ -53,31 +52,38 @@ const AccordionSummaryRoot = styled(ButtonBase, {
     },
     [`&:hover:not(.${accordionSummaryClasses.disabled})`]: {
       cursor: 'pointer'
-    }
-  }, !ownerState.disableGutters && {
-    [`&.${accordionSummaryClasses.expanded}`]: {
-      minHeight: 64
-    }
-  });
+    },
+    variants: [{
+      props: props => !props.disableGutters,
+      style: {
+        [`&.${accordionSummaryClasses.expanded}`]: {
+          minHeight: 64
+        }
+      }
+    }]
+  };
 });
 const AccordionSummaryContent = styled('div', {
   name: 'MuiAccordionSummary',
   slot: 'Content',
   overridesResolver: (props, styles) => styles.content
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   display: 'flex',
   flexGrow: 1,
-  margin: '12px 0'
-}, !ownerState.disableGutters && {
-  transition: theme.transitions.create(['margin'], {
-    duration: theme.transitions.duration.shortest
-  }),
-  [`&.${accordionSummaryClasses.expanded}`]: {
-    margin: '20px 0'
-  }
+  margin: '12px 0',
+  variants: [{
+    props: props => !props.disableGutters,
+    style: {
+      transition: theme.transitions.create(['margin'], {
+        duration: theme.transitions.duration.shortest
+      }),
+      [`&.${accordionSummaryClasses.expanded}`]: {
+        margin: '20px 0'
+      }
+    }
+  }]
 }));
 const AccordionSummaryExpandIconWrapper = styled('div', {
   name: 'MuiAccordionSummary',

package/modern/Autocomplete/Autocomplete.js

@@ -24,14 +24,14 @@ import outlinedInputClasses from '../OutlinedInput/outlinedInputClasses';
 import filledInputClasses from '../FilledInput/filledInputClasses';
 import ClearIcon from '../internal/svg-icons/Close';
 import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses';
 import capitalize from '../utils/capitalize';
 import useForkRef from '../utils/useForkRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
+const useThemeProps = createUseThemeProps('MuiAutocomplete');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -90,9 +90,7 @@ const AutocompleteRoot = styled('div', {
       [`& .${autocompleteClasses.input}`]: inputFocused && styles.inputFocused
     }, styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   [`&.${autocompleteClasses.focused} .${autocompleteClasses.clearIndicator}`]: {
     visibility: 'visible'
   },
@@ -101,17 +99,11 @@ const AutocompleteRoot = styled('div', {
     [`&:hover .${autocompleteClasses.clearIndicator}`]: {
       visibility: 'visible'
     }
-  }
-}, ownerState.fullWidth && {
-  width: '100%'
-}, {
-  [`& .${autocompleteClasses.tag}`]: _extends({
+  },
+  [`& .${autocompleteClasses.tag}`]: {
     margin: 3,
     maxWidth: 'calc(100% - 6px)'
-  }, ownerState.size === 'small' && {
-    margin: 2,
-    maxWidth: 'calc(100% - 4px)'
-  }),
+  },
   [`& .${autocompleteClasses.inputRoot}`]: {
     flexWrap: 'wrap',
     [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
@@ -200,14 +192,39 @@ const AutocompleteRoot = styled('div', {
       paddingBottom: 9
     }
   },
-  [`& .${autocompleteClasses.input}`]: _extends({
+  [`& .${autocompleteClasses.input}`]: {
     flexGrow: 1,
     textOverflow: 'ellipsis',
     opacity: 0
-  }, ownerState.inputFocused && {
-    opacity: 1
-  })
-}));
+  },
+  variants: [{
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      [`& .${autocompleteClasses.tag}`]: {
+        margin: 2,
+        maxWidth: 'calc(100% - 4px)'
+      }
+    }
+  }, {
+    props: {
+      inputFocused: true
+    },
+    style: {
+      [`& .${autocompleteClasses.input}`]: {
+        opacity: 1
+      }
+    }
+  }]
+});
 const AutocompleteEndAdornment = styled('div', {
   name: 'MuiAutocomplete',
   slot: 'EndAdornment',
@@ -234,14 +251,18 @@ const AutocompletePopupIndicator = styled(IconButton, {
   overridesResolver: ({
     ownerState
   }, styles) => _extends({}, styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen)
-})(({
-  ownerState
-}) => _extends({
+})({
   padding: 2,
-  marginRight: -2
-}, ownerState.popupOpen && {
-  transform: 'rotate(180deg)'
-}));
+  marginRight: -2,
+  variants: [{
+    props: {
+      popupOpen: true
+    },
+    style: {
+      transform: 'rotate(180deg)'
+    }
+  }]
+});
 const AutocompletePopper = styled(Popper, {
   name: 'MuiAutocomplete',
   slot: 'Popper',
@@ -254,12 +275,17 @@ const AutocompletePopper = styled(Popper, {
     }, styles.popper, ownerState.disablePortal && styles.popperDisablePortal];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
-  zIndex: (theme.vars || theme).zIndex.modal
-}, ownerState.disablePortal && {
-  position: 'absolute'
+  theme
+}) => ({
+  zIndex: (theme.vars || theme).zIndex.modal,
+  variants: [{
+    props: {
+      disablePortal: true
+    },
+    style: {
+      position: 'absolute'
+    }
+  }]
 }));
 const AutocompletePaper = styled(Paper, {
   name: 'MuiAutocomplete',
@@ -571,7 +597,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     }))
   }));
   let autocompletePopper = null;
-  if (!loading && groupedOptions.length > 0) {
+  if (groupedOptions.length > 0) {
     autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteListbox, _extends({
       as: ListboxComponent,
       className: classes.listbox,
@@ -908,7 +934,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   ListboxProps: PropTypes.object,
   /**
    * If `true`, the component is in a loading state.
-   * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. `options` are empty).
+   * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).
    * @default false
    */
   loading: PropTypes.bool,

package/modern/CircularProgress/CircularProgress.js

@@ -213,7 +213,7 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-pro
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.
-   * If using a string, you need to provide the CSS unit, e.g. '3rem'.
+   * If using a string, you need to provide the CSS unit, for example '3rem'.
    * @default 40
    */
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/modern/Icon/Icon.js

@@ -104,7 +104,7 @@ process.env.NODE_ENV !== "production" ? Icon.propTypes /* remove-proptypes */ =
   // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
-   * other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
+   * other base class that suits the icon font you're using (for example material-icons-rounded, fas, etc).
    * @default 'material-icons'
    */
   baseClassName: PropTypes.string,

package/modern/RadioGroup/RadioGroup.js

@@ -2,21 +2,36 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["actions", "children", "defaultValue", "name", "onChange", "value"];
+const _excluded = ["actions", "children", "className", "defaultValue", "name", "onChange", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import composeClasses from '@mui/utils/composeClasses';
 import FormGroup from '../FormGroup';
+import { getRadioGroupUtilityClass } from './radioGroupClasses';
 import useForkRef from '../utils/useForkRef';
 import useControlled from '../utils/useControlled';
 import RadioGroupContext from './RadioGroupContext';
 import useId from '../utils/useId';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = props => {
+  const {
+    classes,
+    row,
+    error
+  } = props;
+  const slots = {
+    root: ['root', row && 'row', error && 'error']
+  };
+  return composeClasses(slots, getRadioGroupUtilityClass, classes);
+};
 const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
   const {
       // private
       // eslint-disable-next-line react/prop-types
       actions,
       children,
+      className,
       defaultValue,
       name: nameProp,
       onChange,
@@ -24,6 +39,7 @@ const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref)
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootRef = React.useRef(null);
+  const classes = useUtilityClasses(props);
   const [value, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -56,7 +72,8 @@ const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref)
     value: contextValue,
     children: /*#__PURE__*/_jsx(FormGroup, _extends({
       role: "radiogroup",
-      ref: handleRef
+      ref: handleRef,
+      className: clsx(classes.root, className)
     }, other, {
       children: children
     }))
@@ -71,6 +88,10 @@ process.env.NODE_ENV !== "production" ? RadioGroup.propTypes /* remove-proptypes
    * The content of the component.
    */
   children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */

package/modern/RadioGroup/index.js

@@ -1,4 +1,6 @@
 'use client';
 
 export { default } from './RadioGroup';
-export { default as useRadioGroup } from './useRadioGroup';
+export { default as useRadioGroup } from './useRadioGroup';
+export { default as radioGroupClasses } from './radioGroupClasses';
+export * from './radioGroupClasses';

package/modern/RadioGroup/radioGroupClasses.js

@@ -0,0 +1,7 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+export function getRadioGroupUtilityClass(slot) {
+  return generateUtilityClass('MuiRadioGroup', slot);
+}
+const radioGroupClasses = generateUtilityClasses('MuiRadioGroup', ['root', 'row', 'error']);
+export default radioGroupClasses;