@mui/material 5.10.12 → 5.10.14

package/modern/Accordion/Accordion.js

@@ -16,7 +16,6 @@ import useControlled from '../utils/useControlled';
 import accordionClasses, { getAccordionUtilityClass } from './accordionClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -31,7 +30,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getAccordionUtilityClass, classes);
 };
-
 const AccordionRoot = styled(Paper, {
   name: 'MuiAccordion',
   slot: 'Root',
@@ -118,21 +116,19 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     props: inProps,
     name: 'MuiAccordion'
   });
-
   const {
-    children: childrenProp,
-    className,
-    defaultExpanded = false,
-    disabled = false,
-    disableGutters = false,
-    expanded: expandedProp,
-    onChange,
-    square = false,
-    TransitionComponent = Collapse,
-    TransitionProps
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      children: childrenProp,
+      className,
+      defaultExpanded = false,
+      disabled = false,
+      disableGutters = false,
+      expanded: expandedProp,
+      onChange,
+      square = false,
+      TransitionComponent = Collapse,
+      TransitionProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const [expanded, setExpandedState] = useControlled({
     controlled: expandedProp,
     default: defaultExpanded,
@@ -141,7 +137,6 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
   });
   const handleChange = React.useCallback(event => {
     setExpandedState(!expanded);
-
     if (onChange) {
       onChange(event, !expanded);
     }
@@ -153,14 +148,12 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     disableGutters,
     toggle: handleChange
   }), [expanded, disabled, disableGutters, handleChange]);
-
   const ownerState = _extends({}, props, {
     square,
     disabled,
     disableGutters,
     expanded
   });
-
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(AccordionRoot, _extends({
     className: clsx(classes.root, className),
@@ -185,65 +178,52 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     }))]
   }));
 });
-process.env.NODE_ENV !== "production" ? Accordion.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * The content of the component.
    */
   children: chainPropTypes(PropTypes.node.isRequired, props => {
     const summary = React.Children.toArray(props.children)[0];
-
     if (isFragment(summary)) {
       return new Error("MUI: The Accordion doesn't accept a Fragment as a child. " + 'Consider providing an array instead.');
     }
-
     if (! /*#__PURE__*/React.isValidElement(summary)) {
       return new Error('MUI: Expected the first child of Accordion to be a valid element.');
     }
-
     return null;
   }),
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * If `true`, expands the accordion by default.
    * @default false
    */
   defaultExpanded: PropTypes.bool,
-
   /**
    * If `true`, the component is disabled.
    * @default false
    */
   disabled: PropTypes.bool,
-
   /**
    * If `true`, it removes the margin between two expanded accordion items and the increase of height.
    * @default false
    */
   disableGutters: PropTypes.bool,
-
   /**
    * If `true`, expands the accordion, otherwise collapse it.
    * Setting this prop enables control over the accordion.
    */
   expanded: PropTypes.bool,
-
   /**
    * Callback fired when the expand/collapse state is changed.
    *
@@ -251,25 +231,21 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes
    * @param {boolean} expanded The `expanded` state of the accordion.
    */
   onChange: PropTypes.func,
-
   /**
    * If `true`, rounded corners are disabled.
    * @default false
    */
   square: PropTypes.bool,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-
   /**
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Collapse
    */
   TransitionComponent: PropTypes.elementType,
-
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.

package/modern/Accordion/AccordionContext.js

@@ -1,13 +1,11 @@
 import * as React from 'react';
+
 /**
  * @ignore - internal component.
  * @type {React.Context<{} | {expanded: boolean, disabled: boolean, toggle: () => void}>}
  */
-
 const AccordionContext = /*#__PURE__*/React.createContext({});
-
 if (process.env.NODE_ENV !== 'production') {
   AccordionContext.displayName = 'AccordionContext';
 }
-
 export default AccordionContext;

package/modern/AccordionActions/AccordionActions.js

@@ -9,7 +9,6 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getAccordionActionsUtilityClass } from './accordionActionsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -20,7 +19,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getAccordionActionsUtilityClass, classes);
 };
-
 const AccordionActionsRoot = styled('div', {
   name: 'MuiAccordionActions',
   slot: 'Root',
@@ -47,17 +45,14 @@ const AccordionActions = /*#__PURE__*/React.forwardRef(function AccordionActions
     props: inProps,
     name: 'MuiAccordionActions'
   });
-
   const {
-    className,
-    disableSpacing = false
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      className,
+      disableSpacing = false
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
     disableSpacing
   });
-
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(AccordionActionsRoot, _extends({
     className: clsx(classes.root, className),
@@ -65,35 +60,28 @@ const AccordionActions = /*#__PURE__*/React.forwardRef(function AccordionActions
     ownerState: ownerState
   }, other));
 });
-process.env.NODE_ENV !== "production" ? AccordionActions.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? AccordionActions.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * The content of the component.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * If `true`, the actions do not have additional margin.
    * @default false
    */
   disableSpacing: PropTypes.bool,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/AccordionDetails/AccordionDetails.js

@@ -9,7 +9,6 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getAccordionDetailsUtilityClass } from './accordionDetailsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -19,7 +18,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getAccordionDetailsUtilityClass, classes);
 };
-
 const AccordionDetailsRoot = styled('div', {
   name: 'MuiAccordionDetails',
   slot: 'Root',
@@ -34,12 +32,10 @@ const AccordionDetails = /*#__PURE__*/React.forwardRef(function AccordionDetails
     props: inProps,
     name: 'MuiAccordionDetails'
   });
-
   const {
-    className
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(AccordionDetailsRoot, _extends({
@@ -48,29 +44,23 @@ const AccordionDetails = /*#__PURE__*/React.forwardRef(function AccordionDetails
     ownerState: ownerState
   }, other));
 });
-process.env.NODE_ENV !== "production" ? AccordionDetails.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? AccordionDetails.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * The content of the component.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/AccordionSummary/AccordionSummary.js

@@ -12,7 +12,6 @@ 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 useUtilityClasses = ownerState => {
   const {
     classes,
@@ -28,7 +27,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getAccordionSummaryUtilityClass, classes);
 };
-
 const AccordionSummaryRoot = styled(ButtonBase, {
   name: 'MuiAccordionSummary',
   slot: 'Root',
@@ -101,39 +99,33 @@ const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary
     props: inProps,
     name: 'MuiAccordionSummary'
   });
-
   const {
-    children,
-    className,
-    expandIcon,
-    focusVisibleClassName,
-    onClick
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      children,
+      className,
+      expandIcon,
+      focusVisibleClassName,
+      onClick
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     disabled = false,
     disableGutters,
     expanded,
     toggle
   } = React.useContext(AccordionContext);
-
   const handleChange = event => {
     if (toggle) {
       toggle(event);
     }
-
     if (onClick) {
       onClick(event);
     }
   };
-
   const ownerState = _extends({}, props, {
     expanded,
     disabled,
     disableGutters
   });
-
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(AccordionSummaryRoot, _extends({
     focusRipple: false,
@@ -158,34 +150,27 @@ const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary
     })]
   }));
 });
-process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * The content of the component.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The icon to display as the expand indicator.
    */
   expandIcon: PropTypes.node,
-
   /**
    * This prop can help identify which element has keyboard focus.
    * The class name will be applied when the element gains the focus through keyboard interaction.
@@ -195,12 +180,10 @@ process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes
    * if needed.
    */
   focusVisibleClassName: PropTypes.string,
-
   /**
    * @ignore
    */
   onClick: PropTypes.func,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/Alert/Alert.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "variant"];
+const _excluded = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "slotProps", "slots", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -19,7 +19,6 @@ import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined';
 import CloseIcon from '../internal/svg-icons/Close';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     variant,
@@ -35,7 +34,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getAlertUtilityClass, classes);
 };
-
 const AlertRoot = styled(Paper, {
   name: 'MuiAlert',
   slot: 'Root',
@@ -132,33 +130,34 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
     props: inProps,
     name: 'MuiAlert'
   });
-
   const {
-    action,
-    children,
-    className,
-    closeText = 'Close',
-    color,
-    components = {},
-    componentsProps = {},
-    icon,
-    iconMapping = defaultIconMapping,
-    onClose,
-    role = 'alert',
-    severity = 'success',
-    variant = 'standard'
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      action,
+      children,
+      className,
+      closeText = 'Close',
+      color,
+      components = {},
+      componentsProps = {},
+      icon,
+      iconMapping = defaultIconMapping,
+      onClose,
+      role = 'alert',
+      severity = 'success',
+      slotProps = {},
+      slots = {},
+      variant = 'standard'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
     color,
     severity,
     variant
   });
-
   const classes = useUtilityClasses(ownerState);
-  const AlertCloseButton = components.CloseButton ?? IconButton;
-  const AlertCloseIcon = components.CloseIcon ?? CloseIcon;
+  const AlertCloseButton = slots.closeButton ?? components.CloseButton ?? IconButton;
+  const AlertCloseIcon = slots.closeIcon ?? components.CloseIcon ?? CloseIcon;
+  const closeButtonProps = slotProps.closeButton ?? componentsProps.closeButton;
+  const closeIconProps = slotProps.closeIcon ?? componentsProps.closeIcon;
   return /*#__PURE__*/_jsxs(AlertRoot, _extends({
     role: role,
     elevation: 0,
@@ -187,42 +186,35 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
         title: closeText,
         color: "inherit",
         onClick: onClose
-      }, componentsProps.closeButton, {
+      }, closeButtonProps, {
         children: /*#__PURE__*/_jsx(AlertCloseIcon, _extends({
           fontSize: "small"
-        }, componentsProps.closeIcon))
+        }, closeIconProps))
       }))
     }) : null]
   }));
 });
-process.env.NODE_ENV !== "production" ? Alert.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Alert.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * The action to display. It renders after the message, at the end of the alert.
    */
   action: PropTypes.node,
-
   /**
    * The content of the component.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * Override the default label for the *close popup* icon button.
    *
@@ -230,42 +222,43 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
    * @default 'Close'
    */
   closeText: PropTypes.string,
-
   /**
    * The color of the component. Unless provided, the value is taken from the `severity` prop.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    */
-  color: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['error', 'info', 'success', 'warning']), PropTypes.string]),
-
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'success', 'warning']), PropTypes.string]),
   /**
-   * The components used for each slot inside the Alert.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
     CloseButton: PropTypes.elementType,
     CloseIcon: PropTypes.elementType
   }),
-
   /**
-   * The props used for each slot inside.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({
     closeButton: PropTypes.object,
     closeIcon: PropTypes.object
   }),
-
   /**
    * Override the icon displayed before the children.
    * Unless provided, the icon is mapped to the value of the `severity` prop.
    * Set to `false` to remove the `icon`.
    */
   icon: PropTypes.node,
-
   /**
    * The component maps the `severity` prop to a range of different icons,
    * for instance success to `<SuccessOutlined>`.
@@ -278,37 +271,53 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
     success: PropTypes.node,
     warning: PropTypes.node
   }),
-
   /**
    * Callback fired when the component requests to be closed.
    * When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.
    * @param {React.SyntheticEvent} event The event source of the callback.
    */
   onClose: PropTypes.func,
-
   /**
    * The ARIA role attribute of the element.
    * @default 'alert'
    */
   role: PropTypes.string,
-
   /**
    * The severity of the alert. This defines the color and icon used.
    * @default 'success'
    */
   severity: PropTypes.oneOf(['error', 'info', 'success', 'warning']),
-
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    closeButton: PropTypes.object,
+    closeIcon: PropTypes.object
+  }),
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    closeButton: PropTypes.elementType,
+    closeIcon: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-
   /**
    * The variant to use.
    * @default 'standard'
    */
-  variant: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['filled', 'outlined', 'standard']), PropTypes.string])
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['filled', 'outlined', 'standard']), PropTypes.string])
 } : void 0;
 export default Alert;