@mui/material 5.10.12 → 5.10.14

package/modern/ImageListItem/ImageListItem.js

@@ -13,7 +13,6 @@ import useThemeProps from '../styles/useThemeProps';
 import isMuiElement from '../utils/isMuiElement';
 import imageListItemClasses, { getImageListItemUtilityClass } from './imageListItemClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -25,7 +24,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getImageListItemUtilityClass, classes);
 };
-
 const ImageListItemRoot = styled('li', {
   name: 'MuiImageListItem',
   slot: 'Root',
@@ -67,31 +65,29 @@ const ImageListItem = /*#__PURE__*/React.forwardRef(function ImageListItem(inPro
   const props = useThemeProps({
     props: inProps,
     name: 'MuiImageListItem'
-  }); // TODO: - Use jsdoc @default?: "cols rows default values are for docs only"
+  });
 
+  // TODO: - Use jsdoc @default?: "cols rows default values are for docs only"
   const {
-    children,
-    className,
-    cols = 1,
-    component = 'li',
-    rows = 1,
-    style
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      children,
+      className,
+      cols = 1,
+      component = 'li',
+      rows = 1,
+      style
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     rowHeight = 'auto',
     gap,
     variant
   } = React.useContext(ImageListContext);
   let height = 'auto';
-
   if (variant === 'woven') {
     height = undefined;
   } else if (rowHeight !== 'auto') {
     height = rowHeight * rows + gap * (rows - 1);
   }
-
   const ownerState = _extends({}, props, {
     cols,
     component,
@@ -100,7 +96,6 @@ const ImageListItem = /*#__PURE__*/React.forwardRef(function ImageListItem(inPro
     rows,
     variant
   });
-
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(ImageListItemRoot, _extends({
     as: component,
@@ -118,69 +113,56 @@ const ImageListItem = /*#__PURE__*/React.forwardRef(function ImageListItem(inPro
       if (! /*#__PURE__*/React.isValidElement(child)) {
         return null;
       }
-
       if (process.env.NODE_ENV !== 'production') {
         if (isFragment(child)) {
           console.error(["MUI: The ImageListItem component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
         }
       }
-
       if (child.type === 'img' || isMuiElement(child, ['Image'])) {
         return /*#__PURE__*/React.cloneElement(child, {
           className: clsx(classes.img, child.props.className)
         });
       }
-
       return child;
     })
   }));
 });
-process.env.NODE_ENV !== "production" ? ImageListItem.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? ImageListItem.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, normally an `<img>`.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * Width of the item in number of grid columns.
    * @default 1
    */
   cols: integerPropType,
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-
   /**
    * Height of the item in number of grid rows.
    * @default 1
    */
   rows: integerPropType,
-
   /**
    * @ignore
    */
   style: PropTypes.object,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/ImageListItemBar/ImageListItemBar.js

@@ -11,7 +11,6 @@ import capitalize from '../utils/capitalize';
 import { getImageListItemBarUtilityClass } from './imageListItemBarClasses';
 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, getImageListItemBarUtilityClass, classes);
 };
-
 const ImageListItemBarRoot = styled('div', {
   name: 'MuiImageListItemBar',
   slot: 'Root',
@@ -138,22 +136,19 @@ const ImageListItemBar = /*#__PURE__*/React.forwardRef(function ImageListItemBar
     props: inProps,
     name: 'MuiImageListItemBar'
   });
-
   const {
-    actionIcon,
-    actionPosition = 'right',
-    className,
-    subtitle,
-    title,
-    position = 'bottom'
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      actionIcon,
+      actionPosition = 'right',
+      className,
+      subtitle,
+      title,
+      position = 'bottom'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
     position,
     actionPosition
   });
-
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(ImageListItemBarRoot, _extends({
     ownerState: ownerState,
@@ -177,57 +172,46 @@ const ImageListItemBar = /*#__PURE__*/React.forwardRef(function ImageListItemBar
     }) : null]
   }));
 });
-process.env.NODE_ENV !== "production" ? ImageListItemBar.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? ImageListItemBar.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"     |
   // ----------------------------------------------------------------------
-
   /**
    * An IconButton element to be used as secondary action target
    * (primary action target is the item itself).
    */
   actionIcon: PropTypes.node,
-
   /**
    * Position of secondary action IconButton.
    * @default 'right'
    */
   actionPosition: PropTypes.oneOf(['left', 'right']),
-
   /**
    * @ignore
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * Position of the title bar.
    * @default 'bottom'
    */
   position: PropTypes.oneOf(['below', 'bottom', 'top']),
-
   /**
    * String or element serving as subtitle (support text).
    */
   subtitle: PropTypes.node,
-
   /**
    * 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]),
-
   /**
    * Title to be displayed.
    */

package/modern/Input/Input.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "type"];
+const _excluded = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
@@ -11,7 +11,6 @@ import useThemeProps from '../styles/useThemeProps';
 import inputClasses, { getInputUtilityClass } from './inputClasses';
 import { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput } from '../InputBase/InputBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -24,7 +23,6 @@ const useUtilityClasses = ownerState => {
   const composedClasses = composeClasses(slots, getInputUtilityClass, classes);
   return _extends({}, classes, composedClasses);
 };
-
 const InputRoot = styled(InputBaseRoot, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
   name: 'MuiInput',
@@ -41,11 +39,9 @@ const InputRoot = styled(InputBaseRoot, {
 }) => {
   const light = theme.palette.mode === 'light';
   let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
-
   if (theme.vars) {
     bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`;
   }
-
   return _extends({
     position: 'relative'
   }, ownerState.formControl && {
@@ -67,8 +63,8 @@ const InputRoot = styled(InputBaseRoot, {
         easing: theme.transitions.easing.easeOut
       }),
       pointerEvents: 'none' // Transparent to the hover style.
-
     },
+
     [`&.${inputClasses.focused}:after`]: {
       // translateX(0) is a workaround for Safari transform scale bug
       // See https://github.com/mui/material-ui/issues/31766
@@ -77,8 +73,8 @@ const InputRoot = styled(InputBaseRoot, {
     [`&.${inputClasses.error}:after`]: {
       borderBottomColor: (theme.vars || theme).palette.error.main,
       transform: 'scaleX(1)' // error is always underlined in red
-
     },
+
     '&:before': {
       borderBottom: `1px solid ${bottomLineColor}`,
       left: 0,
@@ -91,8 +87,8 @@ const InputRoot = styled(InputBaseRoot, {
         duration: theme.transitions.duration.shorter
       }),
       pointerEvents: 'none' // Transparent to the hover style.
-
     },
+
     [`&:hover:not(.${inputClasses.disabled}):before`]: {
       borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
       // Reset on touch devices, it doesn't add specificity
@@ -115,18 +111,18 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
     props: inProps,
     name: 'MuiInput'
   });
-
   const {
-    disableUnderline,
-    components = {},
-    componentsProps: componentsPropsProp,
-    fullWidth = false,
-    inputComponent = 'input',
-    multiline = false,
-    type = 'text'
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      disableUnderline,
+      components = {},
+      componentsProps: componentsPropsProp,
+      fullWidth = false,
+      inputComponent = 'input',
+      multiline = false,
+      slotProps,
+      slots = {},
+      type = 'text'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const classes = useUtilityClasses(props);
   const ownerState = {
     disableUnderline
@@ -136,13 +132,15 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
       ownerState
     }
   };
-  const componentsProps = componentsPropsProp ? deepmerge(componentsPropsProp, inputComponentsProps) : inputComponentsProps;
+  const componentsProps = slotProps ?? componentsPropsProp ? deepmerge(slotProps ?? componentsPropsProp, inputComponentsProps) : inputComponentsProps;
+  const RootSlot = slots.root ?? components.Root ?? InputRoot;
+  const InputSlot = slots.input ?? components.Input ?? InputInput;
   return /*#__PURE__*/_jsx(InputBase, _extends({
-    components: _extends({
-      Root: InputRoot,
-      Input: InputInput
-    }, components),
-    componentsProps: componentsProps,
+    slots: {
+      root: RootSlot,
+      input: InputSlot
+    },
+    slotProps: componentsProps,
     fullWidth: fullWidth,
     inputComponent: inputComponent,
     multiline: multiline,
@@ -152,144 +150,126 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
     classes: classes
   }));
 });
-process.env.NODE_ENV !== "production" ? Input.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Input.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"     |
   // ----------------------------------------------------------------------
-
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
    * The name can be confusing, as it's more like an autofill.
    * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
    */
   autoComplete: PropTypes.string,
-
   /**
    * If `true`, the `input` element is focused during the first mount.
    */
   autoFocus: PropTypes.bool,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * The color of the component.
    * 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).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
-  color: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
-
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
   /**
-   * The components used for each slot inside the InputBase.
-   * 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({
     Input: PropTypes.elementType,
     Root: PropTypes.elementType
   }),
-
   /**
-   * The props used for each slot inside the Input.
+   * 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({
     input: PropTypes.object,
     root: PropTypes.object
   }),
-
   /**
    * The default value. Use when the component is not controlled.
    */
   defaultValue: PropTypes.any,
-
   /**
    * If `true`, the component is disabled.
    * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
   disabled: PropTypes.bool,
-
   /**
    * If `true`, the `input` will not have an underline.
    */
   disableUnderline: PropTypes.bool,
-
   /**
    * End `InputAdornment` for this component.
    */
   endAdornment: PropTypes.node,
-
   /**
    * If `true`, the `input` will indicate an error.
    * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
   error: PropTypes.bool,
-
   /**
    * If `true`, the `input` will take up the full width of its container.
    * @default false
    */
   fullWidth: PropTypes.bool,
-
   /**
    * The id of the `input` element.
    */
   id: PropTypes.string,
-
   /**
    * The component used for the `input` element.
    * Either a string to use a HTML element or a component.
    * @default 'input'
    */
   inputComponent: PropTypes.elementType,
-
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
    * @default {}
    */
   inputProps: PropTypes.object,
-
   /**
    * Pass a ref to the `input` element.
    */
   inputRef: refType,
-
   /**
    * If `dense`, will adjust vertical spacing. This is normally obtained via context from
    * FormControl.
    * The prop defaults to the value (`'none'`) inherited from the parent FormControl component.
    */
   margin: PropTypes.oneOf(['dense', 'none']),
-
   /**
    * Maximum number of rows to display when multiline option is set to true.
    */
   maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /**
    * Minimum number of rows to display when multiline option is set to true.
    */
   minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /**
    * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
    * @default false
    */
   multiline: PropTypes.bool,
-
   /**
    * Name attribute of the `input` element.
    */
   name: PropTypes.string,
-
   /**
    * Callback fired when the value is changed.
    *
@@ -297,45 +277,60 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
    * You can pull out the new value by accessing `event.target.value` (string).
    */
   onChange: PropTypes.func,
-
   /**
    * The short hint displayed in the `input` before the user enters a value.
    */
   placeholder: PropTypes.string,
-
   /**
    * It prevents the user from changing the value of the field
    * (not from interacting with the field).
    */
   readOnly: PropTypes.bool,
-
   /**
    * If `true`, the `input` element is required.
    * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
   required: PropTypes.bool,
-
   /**
    * Number of rows to display when multiline option is set to true.
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
+  /**
+   * 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({
+    input: PropTypes.object,
+    root: 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({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * Start `InputAdornment` for this component.
    */
   startAdornment: PropTypes.node,
-
   /**
    * 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]),
-
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
    * @default 'text'
    */
   type: PropTypes.string,
-
   /**
    * The value of the `input` element, required for a controlled component.
    */

package/modern/Input/inputClasses.js

@@ -5,7 +5,5 @@ import { inputBaseClasses } from '../InputBase';
 export function getInputUtilityClass(slot) {
   return generateUtilityClass('MuiInput', slot);
 }
-
 const inputClasses = _extends({}, inputBaseClasses, generateUtilityClasses('MuiInput', ['root', 'underline', 'input']));
-
 export default inputClasses;