@mui/material 5.15.12 → 5.15.14

package/LinearProgress/LinearProgress.js

@@ -16,8 +16,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';
@@ -255,7 +255,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: {},
@@ -267,7 +267,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}%)`;
@@ -278,7 +278,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/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";
@@ -89,8 +89,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,
@@ -106,7 +105,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/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/OverridableComponent.d.ts

@@ -11,7 +11,7 @@ export interface OverridableComponent<TypeMap extends OverridableTypeMap> {
   // If you make any changes to this interface, please make sure to update the
   // `OverridableComponent` type in `mui-types/index.d.ts` as well.
   // Also, there are types in Base UI that have a similar shape to this interface
-  // (e.g. SelectType, OptionType, etc.).
+  // (for example SelectType, OptionType, etc.).
   <RootComponent extends React.ElementType>(
     props: {
       /**

package/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/Popper/Popper.d.ts

@@ -2,7 +2,7 @@ import { PopperProps as BasePopperProps } from '@mui/base/Popper';
 import { SxProps } from '@mui/system';
 import * as React from 'react';
 import { Theme } from '../styles';
-export type PopperProps = Omit<BasePopperProps, 'direction'> & {
+export interface PopperProps extends Omit<BasePopperProps, 'direction'> {
     /**
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
@@ -25,7 +25,7 @@ export type PopperProps = Omit<BasePopperProps, 'direction'> & {
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
     sx?: SxProps<Theme>;
-};
+}
 /**
  *
  * Demos:
@@ -38,28 +38,5 @@ export type PopperProps = Omit<BasePopperProps, 'direction'> & {
  *
  * - [Popper API](https://mui.com/material-ui/api/popper/)
  */
-declare const Popper: React.ForwardRefExoticComponent<Omit<BasePopperProps, "direction"> & {
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-    /**
-     * The components used for each slot inside the Popper.
-     * Either a string to use a HTML element or a component.
-     * @default {}
-     */
-    components?: {
-        Root?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-    } | undefined;
-    /**
-     * The props used for each slot inside the Popper.
-     * @default {}
-     */
-    componentsProps?: BasePopperProps['slotProps'];
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme> | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
 export default Popper;

package/README.md

@@ -33,7 +33,7 @@ Our documentation features [a collection of example projects using Material UI]
 Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.
 
 Contributing to Material UI is about more than just issues and pull requests!
-There are many other ways to [support MUI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base.
+There are many other ways to [support Material UI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base.
 
 ## Changelog
 
@@ -41,7 +41,7 @@ The [changelog](https://github.com/mui/material-ui/releases) is regularly update
 
 ## Roadmap
 
-Future plans and high-priority features and enhancements can be found in our [roadmap](https://mui.com/material-ui/discover-more/roadmap/).
+Future plans and high-priority features and enhancements can be found in the [roadmap](https://mui.com/material-ui/discover-more/roadmap/).
 
 ## License
 

package/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;

package/Select/Select.d.ts

@@ -148,7 +148,7 @@ export interface BaseSelectProps<Value = unknown>
    * The variant to use.
    * @default 'outlined'
    */
-  variant?: 'filled' | 'standard' | 'outlined';
+  variant?: SelectVariants;
 }
 
 export interface FilledSelectProps extends Omit<FilledInputProps, 'value' | 'onChange'> {
@@ -172,20 +172,15 @@ export interface OutlinedSelectProps extends Omit<OutlinedInputProps, 'value' |
    * The variant to use.
    * @default 'outlined'
    */
-  variant: 'outlined';
+  variant?: 'outlined';
 }
 
 export type SelectVariants = 'outlined' | 'standard' | 'filled';
 
-export type SelectProps<
-  Value = unknown,
-  Variant extends SelectVariants = SelectVariants,
-> = BaseSelectProps<Value> &
-  (Variant extends 'filled'
-    ? FilledSelectProps
-    : Variant extends 'standard'
-      ? StandardSelectProps
-      : OutlinedSelectProps);
+export type SelectProps<Value = unknown> =
+  | (FilledSelectProps & BaseSelectProps<Value>)
+  | (StandardSelectProps & BaseSelectProps<Value>)
+  | (OutlinedSelectProps & BaseSelectProps<Value>);
 
 /**
  *
@@ -198,15 +193,8 @@ export type SelectProps<
  * - [Select API](https://mui.com/material-ui/api/select/)
  * - inherits [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/)
  */
-
-export default function Select<Value = unknown, Variant extends SelectVariants = 'outlined'>(
-  props: {
-    /**
-     * The variant to use.
-     * @default 'outlined'
-     */
-    variant?: Variant;
-  } & Omit<SelectProps<Value, Variant>, 'variant'>,
+export default function Select<Value = unknown>(
+  props: SelectProps<Value>,
 ): JSX.Element & {
   muiName: string;
 };