@mui/material 5.15.12 → 5.15.14

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',
@@ -550,6 +576,63 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const paperSlotProps = slotProps.paper ?? componentsProps.paper;
   const popperSlotProps = slotProps.popper ?? componentsProps.popper;
   const popupIndicatorSlotProps = slotProps.popupIndicator ?? componentsProps.popupIndicator;
+  const renderAutocompletePopperChildren = children => /*#__PURE__*/_jsx(AutocompletePopper, _extends({
+    as: PopperComponent,
+    disablePortal: disablePortal,
+    style: {
+      width: anchorEl ? anchorEl.clientWidth : null
+    },
+    ownerState: ownerState,
+    role: "presentation",
+    anchorEl: anchorEl,
+    open: popupOpen
+  }, popperSlotProps, {
+    className: clsx(classes.popper, popperSlotProps?.className),
+    children: /*#__PURE__*/_jsx(AutocompletePaper, _extends({
+      ownerState: ownerState,
+      as: PaperComponent
+    }, paperSlotProps, {
+      className: clsx(classes.paper, paperSlotProps?.className),
+      children: children
+    }))
+  }));
+  let autocompletePopper = null;
+  if (!loading && groupedOptions.length > 0) {
+    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteListbox, _extends({
+      as: ListboxComponent,
+      className: classes.listbox,
+      ownerState: ownerState
+    }, otherListboxProps, ListboxProps, {
+      ref: combinedListboxRef,
+      children: groupedOptions.map((option, index) => {
+        if (groupBy) {
+          return renderGroup({
+            key: option.key,
+            group: option.group,
+            children: option.options.map((option2, index2) => renderListOption(option2, option.index + index2))
+          });
+        }
+        return renderListOption(option, index);
+      })
+    })));
+  } else if (loading && groupedOptions.length === 0) {
+    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteLoading, {
+      className: classes.loading,
+      ownerState: ownerState,
+      children: loadingText
+    }));
+  } else if (groupedOptions.length === 0 && !freeSolo && !loading) {
+    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteNoOptions, {
+      className: classes.noOptions,
+      ownerState: ownerState,
+      role: "presentation",
+      onMouseDown: event => {
+        // Prevent input blur when interacting with the "no options" content
+        event.preventDefault();
+      },
+      children: noOptionsText
+    }));
+  }
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(AutocompleteRoot, _extends({
       ref: ref,
@@ -599,55 +682,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           readOnly
         }, getInputProps())
       })
-    })), anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, _extends({
-      as: PopperComponent,
-      disablePortal: disablePortal,
-      style: {
-        width: anchorEl ? anchorEl.clientWidth : null
-      },
-      ownerState: ownerState,
-      role: "presentation",
-      anchorEl: anchorEl,
-      open: popupOpen
-    }, popperSlotProps, {
-      className: clsx(classes.popper, popperSlotProps?.className),
-      children: /*#__PURE__*/_jsxs(AutocompletePaper, _extends({
-        ownerState: ownerState,
-        as: PaperComponent
-      }, paperSlotProps, {
-        className: clsx(classes.paper, paperSlotProps?.className),
-        children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
-          className: classes.loading,
-          ownerState: ownerState,
-          children: loadingText
-        }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/_jsx(AutocompleteNoOptions, {
-          className: classes.noOptions,
-          ownerState: ownerState,
-          role: "presentation",
-          onMouseDown: event => {
-            // Prevent input blur when interacting with the "no options" content
-            event.preventDefault();
-          },
-          children: noOptionsText
-        }) : null, groupedOptions.length > 0 ? /*#__PURE__*/_jsx(AutocompleteListbox, _extends({
-          as: ListboxComponent,
-          className: classes.listbox,
-          ownerState: ownerState
-        }, otherListboxProps, ListboxProps, {
-          ref: combinedListboxRef,
-          children: groupedOptions.map((option, index) => {
-            if (groupBy) {
-              return renderGroup({
-                key: option.key,
-                group: option.group,
-                children: option.options.map((option2, index2) => renderListOption(option2, option.index + index2))
-              });
-            }
-            return renderListOption(option, index);
-          })
-        })) : null]
-      }))
-    })) : null]
+    })), anchorEl ? autocompletePopper : null]
   });
 });
 process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptypes */ = {
@@ -899,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/Drawer/Drawer.js

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
 import Modal from '../Modal';
 import Slide from '../Slide';
 import Paper from '../Paper';
@@ -119,8 +120,10 @@ const oppositeDirection = {
 export function isHorizontal(anchor) {
   return ['left', 'right'].indexOf(anchor) !== -1;
 }
-export function getAnchor(theme, anchor) {
-  return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
+export function getAnchor({
+  direction
+}, anchor) {
+  return direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
 }
 
 /**
@@ -133,6 +136,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     name: 'MuiDrawer'
   });
   const theme = useTheme();
+  const isRtl = useRtl();
   const defaultTransitionDuration = {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen
@@ -166,7 +170,9 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
   React.useEffect(() => {
     mounted.current = true;
   }, []);
-  const anchorInvariant = getAnchor(theme, anchorProp);
+  const anchorInvariant = getAnchor({
+    direction: isRtl ? 'rtl' : 'ltr'
+  }, anchorProp);
   const anchor = anchorProp;
   const ownerState = _extends({}, props, {
     anchor,

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/LinearProgress/LinearProgress.js

@@ -9,8 +9,8 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { keyframes, css } from '@mui/system';
 import { darken, lighten } from '@mui/system/colorManipulator';
+import { useRtl } from '@mui/system/RtlProvider';
 import capitalize from '../utils/capitalize';
-import useTheme from '../styles/useTheme';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getLinearProgressUtilityClass } from './linearProgressClasses';
@@ -248,7 +248,7 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
     variant
   });
   const classes = useUtilityClasses(ownerState);
-  const theme = useTheme();
+  const isRtl = useRtl();
   const rootProps = {};
   const inlineStyles = {
     bar1: {},
@@ -260,7 +260,7 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
       rootProps['aria-valuemin'] = 0;
       rootProps['aria-valuemax'] = 100;
       let transform = value - 100;
-      if (theme.direction === 'rtl') {
+      if (isRtl) {
         transform = -transform;
       }
       inlineStyles.bar1.transform = `translateX(${transform}%)`;
@@ -271,7 +271,7 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
   if (variant === 'buffer') {
     if (valueBuffer !== undefined) {
       let transform = (valueBuffer || 0) - 100;
-      if (theme.direction === 'rtl') {
+      if (isRtl) {
         transform = -transform;
       }
       inlineStyles.bar2.transform = `translateX(${transform}%)`;

package/modern/Menu/Menu.js

@@ -11,10 +11,10 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { useSlotProps } from '@mui/base/utils';
 import HTMLElementType from '@mui/utils/HTMLElementType';
+import { useRtl } from '@mui/system/RtlProvider';
 import MenuList from '../MenuList';
 import Popover, { PopoverPaper } from '../Popover';
 import styled, { rootShouldForwardProp } from '../styles/styled';
-import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import { getMenuUtilityClass } from './menuClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -88,8 +88,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     } = props,
     TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
     other = _objectWithoutPropertiesLoose(props, _excluded2);
-  const theme = useTheme();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const ownerState = _extends({}, props, {
     autoFocus,
     disableAutoFocusItem,
@@ -105,7 +104,9 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
   const menuListActionsRef = React.useRef(null);
   const handleEntering = (element, isAppearing) => {
     if (menuListActionsRef.current) {
-      menuListActionsRef.current.adjustStyleForScrollbar(element, theme);
+      menuListActionsRef.current.adjustStyleForScrollbar(element, {
+        direction: isRtl ? 'rtl' : 'ltr'
+      });
     }
     if (onEntering) {
       onEntering(element, isAppearing);

package/modern/MenuList/MenuList.js

@@ -107,13 +107,15 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
     }
   }, [autoFocus]);
   React.useImperativeHandle(actions, () => ({
-    adjustStyleForScrollbar: (containerElement, theme) => {
+    adjustStyleForScrollbar: (containerElement, {
+      direction
+    }) => {
       // Let's ignore that piece of logic if users are already overriding the width
       // of the menu.
       const noExplicitWidth = !listRef.current.style.width;
       if (containerElement.clientHeight < listRef.current.clientHeight && noExplicitWidth) {
         const scrollbarSize = `${getScrollbarSize(ownerDocument(containerElement))}px`;
-        listRef.current.style[theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = scrollbarSize;
+        listRef.current.style[direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = scrollbarSize;
         listRef.current.style.width = `calc(100% + ${scrollbarSize})`;
       }
       return listRef.current;

package/modern/PaginationItem/PaginationItem.js

@@ -8,9 +8,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
+import { useRtl } from '@mui/system/RtlProvider';
 import useThemeProps from '../styles/useThemeProps';
 import paginationItemClasses, { getPaginationItemUtilityClass } from './paginationItemClasses';
-import useTheme from '../styles/useTheme';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import FirstPageIcon from '../internal/svg-icons/FirstPage';
@@ -234,9 +234,9 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     type,
     variant
   });
-  const theme = useTheme();
+  const isRtl = useRtl();
   const classes = useUtilityClasses(ownerState);
-  const normalizedIcons = theme.direction === 'rtl' ? {
+  const normalizedIcons = isRtl ? {
     previous: slots.next || components.next || NavigateNextIcon,
     next: slots.previous || components.previous || NavigateBeforeIcon,
     last: slots.first || components.first || FirstPageIcon,

package/modern/Rating/Rating.js

@@ -11,7 +11,7 @@ import clamp from '@mui/utils/clamp';
 import visuallyHidden from '@mui/utils/visuallyHidden';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import useTheme from '../styles/useTheme';
+import { useRtl } from '@mui/system/RtlProvider';
 import { capitalize, useForkRef, useIsFocusVisible, useControlled, unstable_useId as useId } from '../utils';
 import Star from '../internal/svg-icons/Star';
 import StarBorder from '../internal/svg-icons/StarBorder';
@@ -300,7 +300,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     name: 'Rating'
   });
   const valueRounded = roundValueToPrecision(valueDerived, precision);
-  const theme = useTheme();
+  const isRtl = useRtl();
   const [{
     hover,
     focus
@@ -335,7 +335,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
       width: containerWidth
     } = rootNode.getBoundingClientRect();
     let percent;
-    if (theme.direction === 'rtl') {
+    if (isRtl) {
       percent = (right - event.clientX) / containerWidth;
     } else {
       percent = (event.clientX - left) / containerWidth;