diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js index eef70ec528fcd4..1849bd69a9d238 100644 --- 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 index 4ca989cf10592e..bb9d8b85cafb3d 100644 --- 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 index 0a292d37b0d2cf..8fb919b0fb70da 100644 --- 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 index c25b1ac6c4bdb6..29b80a6a3ec953 100644 --- 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 index 715286a41a4458..3f51141d0587a9 100644 --- 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 index dcf47bd122362d..882e57bcf04e24 100644 --- 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 index 42b1c83a4757cf..096e13f1c25555 100644 --- 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 index c2fdad8acb5f9e..9dcdd8fe8efbc3 100644 --- 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 index 7a792e706e5d36..99f8ffae9f2b4d 100644 --- 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 (
@@ -79,7 +75,7 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions( title={getItemAriaLabel('first', page)} {...firstButtonSlotProps} > - {theme.direction === 'rtl' ? ( + {isRtl ? ( ) : ( @@ -94,7 +90,7 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions( title={getItemAriaLabel('previous', page)} {...(previousButtonSlotProps ?? backIconButtonProps)} > - {theme.direction === 'rtl' ? ( + {isRtl ? ( ) : ( @@ -108,7 +104,7 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions( title={getItemAriaLabel('next', page)} {...(nextButtonSlotProps ?? nextIconButtonProps)} > - {theme.direction === 'rtl' ? ( + {isRtl ? ( ) : ( @@ -122,7 +118,7 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions( title={getItemAriaLabel('last', page)} {...lastButtonSlotProps} > - {theme.direction === 'rtl' ? ( + {isRtl ? ( ) : ( diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js index 31a26e7f16b83a..dfbcd083803bd0 100644 --- 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 index 88d6d7e563d55b..fa17187fdbb82d 100644 --- 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 : {childrenProp}; 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 new file mode 100644 index 00000000000000..2572ebe7c8b259 --- /dev/null +++ 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; +export const useRtl: () => boolean; + +export default RtlProvider; diff --git a/packages/mui-system/src/RtlProvider/index.js b/packages/mui-system/src/RtlProvider/index.js new file mode 100644 index 00000000000000..17c01ee6d6b564 --- /dev/null +++ b/packages/mui-system/src/RtlProvider/index.js @@ -0,0 +1,20 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; + +const RtlContext = React.createContext(); + +function RtlProvider({ value, ...props }) { + return ; +} + +RtlProvider.propTypes = { + children: PropTypes.node, + value: PropTypes.bool, +}; + +export const useRtl = () => { + const value = React.useContext(RtlContext); + return value ?? false; +}; + +export default RtlProvider; diff --git a/packages/mui-system/src/ThemeProvider/ThemeProvider.js b/packages/mui-system/src/ThemeProvider/ThemeProvider.js index 48d4e8a3d97dda..760b4c4645ee50 100644 --- a/packages/mui-system/src/ThemeProvider/ThemeProvider.js +++ b/packages/mui-system/src/ThemeProvider/ThemeProvider.js @@ -8,6 +8,7 @@ import { import exactProp from '@mui/utils/exactProp'; import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine'; import useThemeWithoutDefault from '../useThemeWithoutDefault'; +import RtlProvider from '../RtlProvider'; const EMPTY_THEME = {}; @@ -61,11 +62,12 @@ function ThemeProvider(props) { const engineTheme = useThemeScoping(themeId, upperTheme, localTheme); const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true); + const rtlValue = engineTheme.direction === 'rtl'; return ( - {children} + {children} ); diff --git a/packages/mui-system/src/ThemeProvider/ThemeProvider.test.js b/packages/mui-system/src/ThemeProvider/ThemeProvider.test.js index febe6050490f54..f6eccf9e8dd104 100644 --- a/packages/mui-system/src/ThemeProvider/ThemeProvider.test.js +++ b/packages/mui-system/src/ThemeProvider/ThemeProvider.test.js @@ -4,6 +4,7 @@ import { createRenderer } from '@mui-internal/test-utils'; import { useTheme as usePrivateTheme } from '@mui/private-theming'; import { ThemeContext } from '@mui/styled-engine'; import { ThemeProvider } from '@mui/system'; +import { useRtl } from '@mui/system/RtlProvider'; const useEngineTheme = () => React.useContext(ThemeContext); @@ -277,4 +278,25 @@ describe('ThemeProvider', () => { ' outerTheme} />', ]); }); + + it('sets the correct value for the RtlProvider based on the theme.direction', () => { + let rtlValue = null; + function Test() { + rtlValue = useRtl(); + return null; + } + render( + + + , + ); + expect(rtlValue).to.equal(true); + + render( + + + , + ); + expect(rtlValue).to.equal(false); + }); }); diff --git a/packages/mui-system/src/index.js b/packages/mui-system/src/index.js index d44e83fc65a04d..b7215ef8dee1b4 100644 --- a/packages/mui-system/src/index.js +++ b/packages/mui-system/src/index.js @@ -64,6 +64,8 @@ export { default as unstable_cssVarsParser } from './cssVars/cssVarsParser'; export { default as unstable_prepareCssVars } from './cssVars/prepareCssVars'; export { default as unstable_createCssVarsTheme } from './cssVars/createCssVarsTheme'; export { default as responsivePropType } from './responsivePropType'; +export { default as RtlProvider } from './RtlProvider'; +export * from './RtlProvider'; /** ----------------- */ /** Layout components */ diff --git a/packages/zero-runtime/src/RtlProvider/index.ts b/packages/zero-runtime/src/RtlProvider/index.ts new file mode 100644 index 00000000000000..811b0c2c514f04 --- /dev/null +++ b/packages/zero-runtime/src/RtlProvider/index.ts @@ -0,0 +1 @@ +export { default as RtlProvider, useRtl } from '@mui/system/RtlProvider';