@mui/material 5.10.12 → 5.10.14

package/modern/Modal/Modal.js

@@ -11,11 +11,9 @@ import useThemeProps from '../styles/useThemeProps';
 import Backdrop from '../Backdrop';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const modalClasses = modalUnstyledClasses;
-
 const extendUtilityClasses = ownerState => {
   return ownerState.classes;
 };
-
 const ModalRoot = styled('div', {
   name: 'MuiModal',
   slot: 'Root',
@@ -47,6 +45,7 @@ const ModalBackdrop = styled(Backdrop, {
 })({
   zIndex: -1
 });
+
 /**
  * Modal is a lower-level construct that is leveraged by the following components:
  *
@@ -60,36 +59,33 @@ const ModalBackdrop = styled(Backdrop, {
  *
  * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
  */
-
 const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   const props = useThemeProps({
     name: 'MuiModal',
     props: inProps
   });
-
   const {
-    BackdropComponent = ModalBackdrop,
-    BackdropProps,
-    closeAfterTransition = false,
-    children,
-    component,
-    components = {},
-    componentsProps = {},
-    disableAutoFocus = false,
-    disableEnforceFocus = false,
-    disableEscapeKeyDown = false,
-    disablePortal = false,
-    disableRestoreFocus = false,
-    disableScrollLock = false,
-    hideBackdrop = false,
-    keepMounted = false,
-    slotProps,
-    slots,
-    // eslint-disable-next-line react/prop-types
-    theme
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      BackdropComponent = ModalBackdrop,
+      BackdropProps,
+      closeAfterTransition = false,
+      children,
+      component,
+      components = {},
+      componentsProps = {},
+      disableAutoFocus = false,
+      disableEnforceFocus = false,
+      disableEscapeKeyDown = false,
+      disablePortal = false,
+      disableRestoreFocus = false,
+      disableScrollLock = false,
+      hideBackdrop = false,
+      keepMounted = false,
+      slotProps,
+      slots,
+      // eslint-disable-next-line react/prop-types
+      theme
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const [exited, setExited] = React.useState(true);
   const commonProps = {
     closeAfterTransition,
@@ -102,11 +98,9 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     hideBackdrop,
     keepMounted
   };
-
   const ownerState = _extends({}, props, commonProps, {
     exited
   });
-
   const classes = extendUtilityClasses(ownerState);
   const RootSlot = slots?.root ?? components.Root ?? ModalRoot;
   const BackdropSlot = slots?.backdrop ?? components.Backdrop ?? BackdropComponent;
@@ -133,14 +127,11 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     children: children
   }));
 });
-process.env.NODE_ENV !== "production" ? Modal.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Modal.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"     |
   // ----------------------------------------------------------------------
-
   /**
    * 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.
@@ -156,54 +147,54 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    * })
    */
   BackdropComponent: PropTypes.elementType,
-
   /**
    * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
    * @deprecated Use `slotProps.backdrop` instead.
    */
   BackdropProps: PropTypes.object,
-
   /**
    * A single child content element.
    */
   children: elementAcceptingRef.isRequired,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * When set to true the Modal waits until a nested Transition is completed before closing.
    * @default false
    */
   closeAfterTransition: PropTypes.bool,
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-
   /**
-   * The components used for each slot inside the Modal.
-   * 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({
     Backdrop: PropTypes.elementType,
     Root: PropTypes.elementType
   }),
-
   /**
-   * The props used for each slot inside the Modal.
+   * 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({
     backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
-
   /**
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
@@ -211,10 +202,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */
-  container: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([HTMLElementType, PropTypes.func]),
-
+  container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.func]),
   /**
    * If `true`, the modal will not automatically shift focus to itself when it opens, and
    * replace it to the last focused element when it closes.
@@ -225,7 +213,6 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    * @default false
    */
   disableAutoFocus: PropTypes.bool,
-
   /**
    * If `true`, the modal will not prevent focus from leaving the modal while open.
    *
@@ -234,38 +221,32 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    * @default false
    */
   disableEnforceFocus: PropTypes.bool,
-
   /**
    * If `true`, hitting escape will not fire the `onClose` callback.
    * @default false
    */
   disableEscapeKeyDown: PropTypes.bool,
-
   /**
    * The `children` will be under the DOM hierarchy of the parent component.
    * @default false
    */
   disablePortal: PropTypes.bool,
-
   /**
    * If `true`, the modal will not restore focus to previously focused element once
    * modal is hidden or unmounted.
    * @default false
    */
   disableRestoreFocus: PropTypes.bool,
-
   /**
    * Disable the scroll lock behavior.
    * @default false
    */
   disableScrollLock: PropTypes.bool,
-
   /**
    * If `true`, the backdrop is not rendered.
    * @default false
    */
   hideBackdrop: PropTypes.bool,
-
   /**
    * Always keep the children in the DOM.
    * This prop can be useful in SEO situation or
@@ -273,13 +254,11 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    * @default false
    */
   keepMounted: PropTypes.bool,
-
   /**
    * Callback fired when the backdrop is clicked.
    * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
   onBackdropClick: PropTypes.func,
-
   /**
    * Callback fired when the component requests to be closed.
    * The `reason` parameter can optionally be used to control the response to `onClose`.
@@ -288,12 +267,10 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
    */
   onClose: PropTypes.func,
-
   /**
    * If `true`, the component is shown.
    */
   open: PropTypes.bool.isRequired,
-
   /**
    * The props used for each slot inside the Modal.
    * @default {}
@@ -302,7 +279,6 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
     backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
-
   /**
    * The components used for each slot inside the Modal.
    * Either a string to use a HTML element or a component.
@@ -312,7 +288,6 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
     backdrop: PropTypes.elementType,
     root: PropTypes.elementType
   }),
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/NativeSelect/NativeSelect.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "children", "classes", "IconComponent", "input", "inputProps", "variant"],
-      _excluded2 = ["root"];
+  _excluded2 = ["root"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -14,7 +14,6 @@ import Input from '../Input';
 import useThemeProps from '../styles/useThemeProps';
 import { getNativeSelectUtilityClasses } from './nativeSelectClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -24,44 +23,35 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getNativeSelectUtilityClasses, classes);
 };
-
 const defaultInput = /*#__PURE__*/_jsx(Input, {});
 /**
  * An alternative to `<Select native />` with a much smaller bundle size footprint.
  */
-
-
 const NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(inProps, ref) {
   const props = useThemeProps({
     name: 'MuiNativeSelect',
     props: inProps
   });
-
   const {
-    className,
-    children,
-    classes: classesProp = {},
-    IconComponent = ArrowDropDownIcon,
-    input = defaultInput,
-    inputProps
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      className,
+      children,
+      classes: classesProp = {},
+      IconComponent = ArrowDropDownIcon,
+      input = defaultInput,
+      inputProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
     muiFormControl,
     states: ['variant']
   });
-
   const ownerState = _extends({}, props, {
     classes: classesProp
   });
-
   const classes = useUtilityClasses(ownerState);
-
   const otherClasses = _objectWithoutPropertiesLoose(classesProp, _excluded2);
-
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: /*#__PURE__*/React.cloneElement(input, _extends({
       // Most of the logic is implemented in `NativeSelectInput`.
@@ -80,48 +70,39 @@ const NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(inProps
     }))
   });
 });
-process.env.NODE_ENV !== "production" ? NativeSelect.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? NativeSelect.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 option elements to populate the select with.
    * Can be some `<option>` elements.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    * @default {}
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The icon that displays the arrow.
    * @default ArrowDropDownIcon
    */
   IconComponent: PropTypes.elementType,
-
   /**
    * An `Input` element; does not have to be a material-ui specific `Input`.
    * @default <Input />
    */
   input: PropTypes.element,
-
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attributes) applied to the `select` element.
    */
   inputProps: PropTypes.object,
-
   /**
    * Callback fired when a menu item is selected.
    *
@@ -129,17 +110,14 @@ process.env.NODE_ENV !== "production" ? NativeSelect.propTypes
    * You can pull out the new value by accessing `event.target.value` (string).
    */
   onChange: PropTypes.func,
-
   /**
    * 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 `input` value. The DOM API casts this to a string.
    */
   value: PropTypes.any,
-
   /**
    * The variant to use.
    */

package/modern/NativeSelect/NativeSelectInput.js

@@ -11,7 +11,6 @@ import nativeSelectClasses, { getNativeSelectUtilityClasses } from './nativeSele
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -26,7 +25,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getNativeSelectUtilityClasses, classes);
 };
-
 export const nativeSelectSelectStyles = ({
   ownerState,
   theme
@@ -41,12 +39,14 @@ export const nativeSelectSelectStyles = ({
   borderRadius: 0,
   // Reset
   cursor: 'pointer',
-  '&:focus': {
-    // Show that it's not an text input
-    backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)',
+  '&:focus': _extends({}, theme.vars ? {
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.05)`
+  } : {
+    backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)'
+  }, {
     borderRadius: 0 // Reset Chrome style
+  }),
 
-  },
   // Remove IE11 arrow
   '&::-ms-expand': {
     display: 'none'
@@ -58,24 +58,23 @@ export const nativeSelectSelectStyles = ({
     height: 'auto'
   },
   '&:not([multiple]) option, &:not([multiple]) optgroup': {
-    backgroundColor: theme.palette.background.paper
+    backgroundColor: (theme.vars || theme).palette.background.paper
   },
   // Bump specificity to allow extending custom inputs
   '&&&': {
     paddingRight: 24,
     minWidth: 16 // So it doesn't collapse.
-
   }
 }, ownerState.variant === 'filled' && {
   '&&&': {
     paddingRight: 32
   }
 }, ownerState.variant === 'outlined' && {
-  borderRadius: theme.shape.borderRadius,
+  borderRadius: (theme.vars || theme).shape.borderRadius,
   '&:focus': {
-    borderRadius: theme.shape.borderRadius // Reset the reset for Chrome style
-
+    borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
   },
+
   '&&&': {
     paddingRight: 32
   }
@@ -105,9 +104,9 @@ export const nativeSelectIconStyles = ({
   // Center vertically, height is 1em
   pointerEvents: 'none',
   // Don't block pointer events on the select under the icon.
-  color: theme.palette.action.active,
+  color: (theme.vars || theme).palette.action.active,
   [`&.${nativeSelectClasses.disabled}`]: {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }
 }, ownerState.open && {
   transform: 'rotate(180deg)'
@@ -126,25 +125,23 @@ const NativeSelectIcon = styled('svg', {
     return [styles.icon, ownerState.variant && styles[`icon${capitalize(ownerState.variant)}`], ownerState.open && styles.iconOpen];
   }
 })(nativeSelectIconStyles);
+
 /**
  * @ignore - internal component.
  */
-
 const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInput(props, ref) {
   const {
-    className,
-    disabled,
-    IconComponent,
-    inputRef,
-    variant = 'standard'
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      className,
+      disabled,
+      IconComponent,
+      inputRef,
+      variant = 'standard'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
     disabled,
     variant
   });
-
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(NativeSelectSelect, _extends({
@@ -165,44 +162,36 @@ process.env.NODE_ENV !== "production" ? NativeSelectInput.propTypes = {
    * Can be some `<option>` elements.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
   classes: PropTypes.object,
-
   /**
    * The CSS class name of the select element.
    */
   className: PropTypes.string,
-
   /**
    * If `true`, the select is disabled.
    */
   disabled: PropTypes.bool,
-
   /**
    * The icon that displays the arrow.
    */
   IconComponent: PropTypes.elementType.isRequired,
-
   /**
    * Use that prop to pass a ref to the native select element.
    * @deprecated
    */
   inputRef: refType,
-
   /**
    * @ignore
    */
   multiple: PropTypes.bool,
-
   /**
    * Name attribute of the `select` or hidden `input` element.
    */
   name: PropTypes.string,
-
   /**
    * Callback fired when a menu item is selected.
    *
@@ -210,12 +199,10 @@ process.env.NODE_ENV !== "production" ? NativeSelectInput.propTypes = {
    * You can pull out the new value by accessing `event.target.value` (string).
    */
   onChange: PropTypes.func,
-
   /**
    * The input value.
    */
   value: PropTypes.any,
-
   /**
    * The variant to use.
    */

package/modern/OutlinedInput/NotchedOutline.js

@@ -1,8 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-
 var _span;
-
 const _excluded = ["children", "classes", "className", "label", "notched"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -70,25 +68,22 @@ const NotchedOutlineLegend = styled('legend')(({
     delay: 50
   })
 })));
+
 /**
  * @ignore - internal component.
  */
-
 export default function NotchedOutline(props) {
   const {
-    className,
-    label,
-    notched
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      className,
+      label,
+      notched
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const withLabel = label != null && label !== '';
-
   const ownerState = _extends({}, props, {
     notched,
     withLabel
   });
-
   return /*#__PURE__*/_jsx(NotchedOutlineRoot, _extends({
     "aria-hidden": true,
     className: className,
@@ -111,28 +106,23 @@ process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes = {
    * The content of the component.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The label.
    */
   label: PropTypes.node,
-
   /**
    * If `true`, the outline is notched to accommodate the label.
    */
   notched: PropTypes.bool.isRequired,
-
   /**
    * @ignore
    */