[RtlProvider] Add component & hook (#41241)

mui · Mar 8, 2024 · 1e80616 · 1e80616
1 parent dab76c7
commit 1e80616
Show file tree

Hide file tree

Showing 17 changed files with 116 additions and 60 deletions.
diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js
@@ -4,6 +4,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';
@@ -137,8 +138,8 @@ 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;
 }
 
 /**
@@ -148,6 +149,7 @@ export function getAnchor(theme, anchor) {
 const Drawer = React.forwardRef(function Drawer(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiDrawer' });
   const theme = useTheme();
+  const isRtl = useRtl();
   const defaultTransitionDuration = {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen,
@@ -180,7 +182,7 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     mounted.current = true;
   }, []);
 
-  const anchorInvariant = getAnchor(theme, anchorProp);
+  const anchorInvariant = getAnchor({ direction: isRtl ? 'rtl' : 'ltr' }, anchorProp);
   const anchor = anchorProp;
 
   const ownerState = {

diff --git a/packages/mui-material/src/LinearProgress/LinearProgress.js b/packages/mui-material/src/LinearProgress/LinearProgress.js
@@ -5,8 +5,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';
@@ -283,7 +283,7 @@ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
   };
 
   const classes = useUtilityClasses(ownerState);
-  const theme = useTheme();
+  const isRtl = useRtl();
 
   const rootProps = {};
   const inlineStyles = { bar1: {}, bar2: {} };
@@ -294,7 +294,7 @@ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
       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}%)`;
@@ -308,7 +308,7 @@ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
   if (variant === 'buffer') {
     if (valueBuffer !== undefined) {
       let transform = (valueBuffer || 0) - 100;
-      if (theme.direction === 'rtl') {
+      if (isRtl) {
         transform = -transform;
       }
       inlineStyles.bar2.transform = `translateX(${transform}%)`;

diff --git a/packages/mui-material/src/Menu/Menu.js b/packages/mui-material/src/Menu/Menu.js
@@ -6,10 +6,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';
 
@@ -85,8 +85,7 @@ const Menu = React.forwardRef(function Menu(inProps, ref) {
     ...other
   } = props;
 
-  const theme = useTheme();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = useRtl();
 
   const ownerState = {
     ...props,
@@ -108,7 +107,9 @@ const Menu = React.forwardRef(function Menu(inProps, ref) {
 
   const handleEntering = (element, isAppearing) => {
     if (menuListActionsRef.current) {
-      menuListActionsRef.current.adjustStyleForScrollbar(element, theme);
+      menuListActionsRef.current.adjustStyleForScrollbar(element, {
+        direction: isRtl ? 'rtl' : 'ltr',
+      });
     }
 
     if (onEntering) {

diff --git a/packages/mui-material/src/MenuList/MenuList.js b/packages/mui-material/src/MenuList/MenuList.js
@@ -125,13 +125,13 @@ const MenuList = React.forwardRef(function MenuList(props, ref) {
   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'] =
+          listRef.current.style[direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] =
             scrollbarSize;
           listRef.current.style.width = `calc(100% + ${scrollbarSize})`;
         }

diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js
@@ -4,9 +4,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';
@@ -288,23 +288,22 @@ const PaginationItem = React.forwardRef(function PaginationItem(inProps, ref) {
     variant,
   };
 
-  const theme = useTheme();
+  const isRtl = useRtl();
   const classes = useUtilityClasses(ownerState);
 
-  const normalizedIcons =
-    theme.direction === 'rtl'
-      ? {
-          previous: slots.next || components.next || NavigateNextIcon,
-          next: slots.previous || components.previous || NavigateBeforeIcon,
-          last: slots.first || components.first || FirstPageIcon,
-          first: slots.last || components.last || LastPageIcon,
-        }
-      : {
-          previous: slots.previous || components.previous || NavigateBeforeIcon,
-          next: slots.next || components.next || NavigateNextIcon,
-          first: slots.first || components.first || FirstPageIcon,
-          last: slots.last || components.last || LastPageIcon,
-        };
+  const normalizedIcons = isRtl
+    ? {
+        previous: slots.next || components.next || NavigateNextIcon,
+        next: slots.previous || components.previous || NavigateBeforeIcon,
+        last: slots.first || components.first || FirstPageIcon,
+        first: slots.last || components.last || LastPageIcon,
+      }
+    : {
+        previous: slots.previous || components.previous || NavigateBeforeIcon,
+        next: slots.next || components.next || NavigateNextIcon,
+        first: slots.first || components.first || FirstPageIcon,
+        last: slots.last || components.last || LastPageIcon,
+      };
 
   const Icon = normalizedIcons[type];
 

diff --git a/packages/mui-material/src/Rating/Rating.js b/packages/mui-material/src/Rating/Rating.js
@@ -6,7 +6,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,
@@ -329,7 +329,7 @@ const Rating = React.forwardRef(function Rating(inProps, ref) {
   });
 
   const valueRounded = roundValueToPrecision(valueDerived, precision);
-  const theme = useTheme();
+  const isRtl = useRtl();
   const [{ hover, focus }, setState] = React.useState({
     hover: -1,
     focus: -1,
@@ -364,7 +364,7 @@ const Rating = React.forwardRef(function Rating(inProps, ref) {
 
     let percent;
 
-    if (theme.direction === 'rtl') {
+    if (isRtl) {
       percent = (right - event.clientX) / containerWidth;
     } else {
       percent = (event.clientX - left) / containerWidth;

diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js
@@ -7,9 +7,9 @@ import { isHostComponent, useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { useSlider, valueToPercent } from '@mui/base/useSlider';
 import { alpha, lighten, darken } from '@mui/system/colorManipulator';
+import { useRtl } from '@mui/system/RtlProvider';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { slotShouldForwardProp } from '../styles/styled';
-import useTheme from '../styles/useTheme';
 import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
 import BaseSliderValueLabel from './SliderValueLabel';
@@ -404,8 +404,7 @@ const Forward = ({ children }) => children;
 const Slider = React.forwardRef(function Slider(inputProps, ref) {
   const props = useThemeProps({ props: inputProps, name: 'MuiSlider' });
 
-  const theme = useTheme();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = useRtl();
 
   const {
     'aria-label': ariaLabel,

diff --git a/packages/mui-material/src/TabScrollButton/TabScrollButton.js b/packages/mui-material/src/TabScrollButton/TabScrollButton.js
@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
 import ButtonBase from '../ButtonBase';
-import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import tabScrollButtonClasses, { getTabScrollButtonUtilityClass } from './tabScrollButtonClasses';
@@ -59,8 +59,7 @@ const TabScrollButton = React.forwardRef(function TabScrollButton(inProps, ref)
     ...other
   } = props;
 
-  const theme = useTheme();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = useRtl();
 
   const ownerState = { isRtl, ...props };
 

diff --git a/packages/mui-material/src/TablePagination/TablePaginationActions.js b/packages/mui-material/src/TablePagination/TablePaginationActions.js
@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useRtl } from '@mui/system/RtlProvider';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
-import useTheme from '../styles/useTheme';
 import IconButton from '../IconButton';
 import LastPageIconDefault from '../internal/svg-icons/LastPage';
 import FirstPageIconDefault from '../internal/svg-icons/FirstPage';
@@ -28,7 +28,7 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions(
     ...other
   } = props;
 
-  const theme = useTheme();
+  const isRtl = useRtl();
 
   const handleFirstPageButtonClick = (event) => {
     onPageChange(event, 0);
@@ -55,19 +55,15 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions(
   const NextButtonIcon = slots.nextButtonIcon ?? KeyboardArrowRight;
   const PreviousButtonIcon = slots.previousButtonIcon ?? KeyboardArrowLeft;
 
-  const FirstButtonSlot = theme.direction === 'rtl' ? LastButton : FirstButton;
-  const PreviousButtonSlot = theme.direction === 'rtl' ? NextButton : PreviousButton;
-  const NextButtonSlot = theme.direction === 'rtl' ? PreviousButton : NextButton;
-  const LastButtonSlot = theme.direction === 'rtl' ? FirstButton : LastButton;
+  const FirstButtonSlot = isRtl ? LastButton : FirstButton;
+  const PreviousButtonSlot = isRtl ? NextButton : PreviousButton;
+  const NextButtonSlot = isRtl ? PreviousButton : NextButton;
+  const LastButtonSlot = isRtl ? FirstButton : LastButton;
 
-  const firstButtonSlotProps =
-    theme.direction === 'rtl' ? slotProps.lastButton : slotProps.firstButton;
-  const previousButtonSlotProps =
-    theme.direction === 'rtl' ? slotProps.nextButton : slotProps.previousButton;
-  const nextButtonSlotProps =
-    theme.direction === 'rtl' ? slotProps.previousButton : slotProps.nextButton;
-  const lastButtonSlotProps =
-    theme.direction === 'rtl' ? slotProps.firstButton : slotProps.lastButton;
+  const firstButtonSlotProps = isRtl ? slotProps.lastButton : slotProps.firstButton;
+  const previousButtonSlotProps = isRtl ? slotProps.nextButton : slotProps.previousButton;
+  const nextButtonSlotProps = isRtl ? slotProps.previousButton : slotProps.nextButton;
+  const lastButtonSlotProps = isRtl ? slotProps.firstButton : slotProps.lastButton;
 
   return (
     <div ref={ref} {...other}>
@@ -79,7 +75,7 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions(
           title={getItemAriaLabel('first', page)}
           {...firstButtonSlotProps}
         >
-          {theme.direction === 'rtl' ? (
+          {isRtl ? (
             <LastButtonIcon {...slotProps.lastButtonIcon} />
           ) : (
             <FirstButtonIcon {...slotProps.firstButtonIcon} />
@@ -94,7 +90,7 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions(
         title={getItemAriaLabel('previous', page)}
         {...(previousButtonSlotProps ?? backIconButtonProps)}
       >
-        {theme.direction === 'rtl' ? (
+        {isRtl ? (
           <NextButtonIcon {...slotProps.nextButtonIcon} />
         ) : (
           <PreviousButtonIcon {...slotProps.previousButtonIcon} />
@@ -108,7 +104,7 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions(
         title={getItemAriaLabel('next', page)}
         {...(nextButtonSlotProps ?? nextIconButtonProps)}
       >
-        {theme.direction === 'rtl' ? (
+        {isRtl ? (
           <PreviousButtonIcon {...slotProps.previousButtonIcon} />
         ) : (
           <NextButtonIcon {...slotProps.nextButtonIcon} />
@@ -122,7 +118,7 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions(
           title={getItemAriaLabel('last', page)}
           {...lastButtonSlotProps}
         >
-          {theme.direction === 'rtl' ? (
+          {isRtl ? (
             <FirstButtonIcon {...slotProps.firstButtonIcon} />
           ) : (
             <LastButtonIcon {...slotProps.lastButtonIcon} />

diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js
@@ -6,6 +6,7 @@ import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import useTheme from '../styles/useTheme';
@@ -231,7 +232,7 @@ let warnedOnceTabPresent = false;
 const Tabs = React.forwardRef(function Tabs(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiTabs' });
   const theme = useTheme();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
@@ -333,7 +334,7 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
         clientWidth: tabsNode.clientWidth,
         scrollLeft: tabsNode.scrollLeft,
         scrollTop: tabsNode.scrollTop,
-        scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, theme.direction),
+        scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, isRtl ? 'rtl' : 'ltr'),
         scrollWidth: tabsNode.scrollWidth,
         top: rect.top,
         bottom: rect.bottom,

diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js
@@ -7,6 +7,7 @@ import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import { appendOwnerState } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
+import { useRtl } from '@mui/system/RtlProvider';
 import styled from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
@@ -270,7 +271,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
   const children = React.isValidElement(childrenProp) ? childrenProp : <span>{childrenProp}</span>;
 
   const theme = useTheme();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = useRtl();
 
   const [childNode, setChildNode] = React.useState();
   const [arrowRef, setArrowRef] = React.useState(null);

diff --git a/packages/mui-system/src/RtlProvider/index.d.ts b/packages/mui-system/src/RtlProvider/index.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+interface RtlProviderProps {
+  children?: React.ReactNode;
+  value?: boolean;
+}
+
+declare const RtlProvider: React.FC<RtlProviderProps>;
+export const useRtl: () => boolean;
+
+export default RtlProvider;