@mui/x-date-pickers 7.6.0 → 7.6.2

package/modern/internals/hooks/useField/useFieldState.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';
-import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import { useUtils, useLocaleText, useLocalizationContext } from '../useUtils';
 import { mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections, parseSelectedSections, getLocalizedDigits } from './useField.utils';
 import { buildSectionsFromFormat } from './buildSectionsFromFormat';
@@ -11,8 +11,7 @@ export const useFieldState = params => {
   const utils = useUtils();
   const localeText = useLocaleText();
   const adapter = useLocalizationContext();
-  const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const {
     valueManager,
     fieldValueManager,
@@ -56,8 +55,8 @@ export const useFieldState = params => {
     formatDensity,
     shouldRespectLeadingZeros,
     enableAccessibleFieldDOMStructure,
-    isRTL
-  })), [fieldValueManager, format, localeText, localizedDigits, isRTL, shouldRespectLeadingZeros, utils, formatDensity, timezone, enableAccessibleFieldDOMStructure]);
+    isRtl
+  })), [fieldValueManager, format, localeText, localizedDigits, isRtl, shouldRespectLeadingZeros, utils, formatDensity, timezone, enableAccessibleFieldDOMStructure]);
   const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(valueFromTheOutside);
     validateSections(sections, valueType);
@@ -164,7 +163,7 @@ export const useFieldState = params => {
         formatDensity,
         shouldRespectLeadingZeros,
         enableAccessibleFieldDOMStructure,
-        isRTL
+        isRtl
       });
       return mergeDateIntoReferenceDate(utils, timezone, date, sections, referenceDate, false);
     };
@@ -234,7 +233,7 @@ export const useFieldState = params => {
     setState(prevState => _extends({}, prevState, {
       sections
     }));
-  }, [format, utils.locale, isRTL]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [format, utils.locale, isRtl]); // eslint-disable-line react-hooks/exhaustive-deps
 
   React.useEffect(() => {
     let shouldUpdate;

package/modern/internals/hooks/useField/useFieldV6TextField.js

@@ -1,18 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
 import { getActiveElement } from '../../utils/utils';
 import { getSectionVisibleValue, isAndroid } from './useField.utils';
 const cleanString = dirtyString => dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
-export const addPositionPropertiesToSections = (sections, localizedDigits, isRTL) => {
+export const addPositionPropertiesToSections = (sections, localizedDigits, isRtl) => {
   let position = 0;
-  let positionInInput = isRTL ? 1 : 0;
+  let positionInInput = isRtl ? 1 : 0;
   const newSections = [];
   for (let i = 0; i < sections.length; i += 1) {
     const section = sections[i];
-    const renderedValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr', localizedDigits);
+    const renderedValue = getSectionVisibleValue(section, isRtl ? 'input-rtl' : 'input-ltr', localizedDigits);
     const sectionStr = `${section.startSeparator}${renderedValue}${section.endSeparator}`;
     const sectionLength = cleanString(sectionStr).length;
     const sectionLengthInInput = sectionStr.length;
@@ -34,8 +34,7 @@ export const addPositionPropertiesToSections = (sections, localizedDigits, isRTL
   return newSections;
 };
 export const useFieldV6TextField = params => {
-  const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const focusTimeoutRef = React.useRef();
   const {
     forwardedProps: {
@@ -68,7 +67,7 @@ export const useFieldV6TextField = params => {
   } = params;
   const inputRef = React.useRef(null);
   const handleRef = useForkRef(inputRefProp, inputRef);
-  const sections = React.useMemo(() => addPositionPropertiesToSections(state.sections, localizedDigits, isRTL), [state.sections, localizedDigits, isRTL]);
+  const sections = React.useMemo(() => addPositionPropertiesToSections(state.sections, localizedDigits, isRtl), [state.sections, localizedDigits, isRtl]);
   const interactions = React.useMemo(() => ({
     syncSelectionToDOM: () => {
       if (!inputRef.current) {
@@ -241,7 +240,7 @@ export const useFieldV6TextField = params => {
     if (parsedSelectedSections === 'all' && cleanValueStr.length === 1) {
       keyPressed = cleanValueStr;
     } else {
-      const prevValueStr = cleanString(fieldValueManager.getV6InputValueFromSections(sections, localizedDigits, isRTL));
+      const prevValueStr = cleanString(fieldValueManager.getV6InputValueFromSections(sections, localizedDigits, isRtl));
       let startOfDiffIndex = -1;
       let endOfDiffIndex = -1;
       for (let i = 0; i < prevValueStr.length; i += 1) {
@@ -281,9 +280,9 @@ export const useFieldV6TextField = params => {
     if (inPlaceholder !== undefined) {
       return inPlaceholder;
     }
-    return fieldValueManager.getV6InputValueFromSections(getSectionsFromValue(valueManager.emptyValue), localizedDigits, isRTL);
-  }, [inPlaceholder, fieldValueManager, getSectionsFromValue, valueManager.emptyValue, localizedDigits, isRTL]);
-  const valueStr = React.useMemo(() => state.tempValueStrAndroid ?? fieldValueManager.getV6InputValueFromSections(state.sections, localizedDigits, isRTL), [state.sections, fieldValueManager, state.tempValueStrAndroid, localizedDigits, isRTL]);
+    return fieldValueManager.getV6InputValueFromSections(getSectionsFromValue(valueManager.emptyValue), localizedDigits, isRtl);
+  }, [inPlaceholder, fieldValueManager, getSectionsFromValue, valueManager.emptyValue, localizedDigits, isRtl]);
+  const valueStr = React.useMemo(() => state.tempValueStrAndroid ?? fieldValueManager.getV6InputValueFromSections(state.sections, localizedDigits, isRtl), [state.sections, fieldValueManager, state.tempValueStrAndroid, localizedDigits, isRtl]);
   React.useEffect(() => {
     // Select all the sections when focused on mount (`autoFocus = true` on the input)
     if (inputRef.current && inputRef.current === getActiveElement(document)) {

package/modern/internals/hooks/usePicker/usePickerLayoutProps.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { useRtl } from '@mui/system/RtlProvider';
 import { useIsLandscape } from '../useIsLandscape';
 
 /**
@@ -19,8 +20,10 @@ export const usePickerLayoutProps = ({
     orientation
   } = props;
   const isLandscape = useIsLandscape(propsFromPickerViews.views, orientation);
+  const isRtl = useRtl();
   const layoutProps = _extends({}, propsFromPickerViews, propsFromPickerValue, {
     isLandscape,
+    isRtl,
     wrapperVariant,
     disabled: props.disabled,
     readOnly: props.readOnly

package/node/AdapterDayjs/AdapterDayjs.js

@@ -264,7 +264,11 @@ class AdapterDayjs {
         if ((fixedValue.$offset ?? 0) === (value.$offset ?? 0)) {
           return value;
         }
-        return fixedValue;
+        // Change only what is needed to avoid creating a new object with unwanted data
+        // Especially important when used in an environment where utc or timezone dates are used only in some places
+        // Reference: https://github.com/mui/mui-x/issues/13290
+        // @ts-ignore
+        value.$offset = fixedValue.$offset;
       }
       return value;
     };

package/node/DateCalendar/DayCalendar.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _utils = require("@mui/base/utils");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _styles = require("@mui/material/styles");
 var _utils2 = require("@mui/utils");
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -258,8 +259,7 @@ function DayCalendar(inProps) {
   } = props;
   const now = (0, _useUtils.useNow)(timezone);
   const classes = useUtilityClasses(props);
-  const theme = (0, _styles.useTheme)();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = (0, _RtlProvider.useRtl)();
   const isDateDisabled = (0, _useIsDateDisabled.useIsDateDisabled)({
     shouldDisableDate,
     shouldDisableMonth,
@@ -304,13 +304,13 @@ function DayCalendar(inProps) {
         break;
       case 'ArrowLeft':
         {
-          const newFocusedDayDefault = utils.addDays(day, isRTL ? 1 : -1);
-          const nextAvailableMonth = utils.addMonths(day, isRTL ? 1 : -1);
+          const newFocusedDayDefault = utils.addDays(day, isRtl ? 1 : -1);
+          const nextAvailableMonth = utils.addMonths(day, isRtl ? 1 : -1);
           const closestDayToFocus = (0, _dateUtils.findClosestEnabledDate)({
             utils,
             date: newFocusedDayDefault,
-            minDate: isRTL ? newFocusedDayDefault : utils.startOfMonth(nextAvailableMonth),
-            maxDate: isRTL ? utils.endOfMonth(nextAvailableMonth) : newFocusedDayDefault,
+            minDate: isRtl ? newFocusedDayDefault : utils.startOfMonth(nextAvailableMonth),
+            maxDate: isRtl ? utils.endOfMonth(nextAvailableMonth) : newFocusedDayDefault,
             isDateDisabled,
             timezone
           });
@@ -320,13 +320,13 @@ function DayCalendar(inProps) {
         }
       case 'ArrowRight':
         {
-          const newFocusedDayDefault = utils.addDays(day, isRTL ? -1 : 1);
-          const nextAvailableMonth = utils.addMonths(day, isRTL ? -1 : 1);
+          const newFocusedDayDefault = utils.addDays(day, isRtl ? -1 : 1);
+          const nextAvailableMonth = utils.addMonths(day, isRtl ? -1 : 1);
           const closestDayToFocus = (0, _dateUtils.findClosestEnabledDate)({
             utils,
             date: newFocusedDayDefault,
-            minDate: isRTL ? utils.startOfMonth(nextAvailableMonth) : newFocusedDayDefault,
-            maxDate: isRTL ? newFocusedDayDefault : utils.endOfMonth(nextAvailableMonth),
+            minDate: isRtl ? utils.startOfMonth(nextAvailableMonth) : newFocusedDayDefault,
+            maxDate: isRtl ? newFocusedDayDefault : utils.endOfMonth(nextAvailableMonth),
             isDateDisabled,
             timezone
           });

package/node/DateTimePicker/DateTimePickerToolbar.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DateTimePickerToolbar = DateTimePickerToolbar;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -29,14 +30,14 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    theme,
-    isLandscape
+    isLandscape,
+    isRtl
   } = ownerState;
   const slots = {
     root: ['root'],
     dateContainer: ['dateContainer'],
-    timeContainer: ['timeContainer', theme.direction === 'rtl' && 'timeLabelReverse'],
-    timeDigitsContainer: ['timeDigitsContainer', theme.direction === 'rtl' && 'timeLabelReverse'],
+    timeContainer: ['timeContainer', isRtl && 'timeLabelReverse'],
+    timeDigitsContainer: ['timeDigitsContainer', isRtl && 'timeLabelReverse'],
     separator: ['separator'],
     ampmSelection: ['ampmSelection', isLandscape && 'ampmLandscape'],
     ampmLabel: ['ampmLabel']
@@ -97,50 +98,59 @@ const DateTimePickerToolbarTimeContainer = (0, _styles.styled)('div', {
   name: 'MuiDateTimePickerToolbar',
   slot: 'TimeContainer',
   overridesResolver: (props, styles) => styles.timeContainer
-})(({
-  theme
-}) => {
-  return (0, _extends2.default)({
-    display: 'flex',
-    flexDirection: 'row'
-  }, theme.direction === 'rtl' && {
-    flexDirection: 'row-reverse'
+})({
+  display: 'flex',
+  flexDirection: 'row',
+  variants: [{
+    props: {
+      isRtl: true
+    },
+    style: {
+      flexDirection: 'row-reverse'
+    }
   }, {
-    variants: [{
-      props: ({
-        isLandscape,
-        toolbarVariant
-      }) => isLandscape && toolbarVariant !== 'desktop',
-      style: (0, _extends2.default)({
-        flexDirection: 'column'
-      }, theme.direction === 'rtl' && {
-        flexDirection: 'column-reverse'
-      })
-    }, {
-      props: {
-        toolbarVariant: 'desktop',
-        isLandscape: false
-      },
-      style: {
-        gap: 9,
-        marginRight: 4,
-        alignSelf: 'flex-end'
-      }
-    }]
-  });
+    props: {
+      toolbarVariant: 'desktop',
+      isLandscape: false
+    },
+    style: {
+      gap: 9,
+      marginRight: 4,
+      alignSelf: 'flex-end'
+    }
+  }, {
+    props: ({
+      isLandscape,
+      toolbarVariant
+    }) => isLandscape && toolbarVariant !== 'desktop',
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: ({
+      isLandscape,
+      toolbarVariant,
+      isRtl
+    }) => isLandscape && toolbarVariant !== 'desktop' && isRtl,
+    style: {
+      flexDirection: 'column-reverse'
+    }
+  }]
 });
 const DateTimePickerToolbarTimeDigitsContainer = (0, _styles.styled)('div', {
   name: 'MuiDateTimePickerToolbar',
   slot: 'TimeDigitsContainer',
   overridesResolver: (props, styles) => styles.timeDigitsContainer
-})(({
-  theme
-}) => (0, _extends2.default)({
-  display: 'flex'
-}, theme.direction === 'rtl' && {
-  flexDirection: 'row-reverse'
-}, {
+})({
+  display: 'flex',
   variants: [{
+    props: {
+      isRtl: true
+    },
+    style: {
+      flexDirection: 'row-reverse'
+    }
+  }, {
     props: {
       toolbarVariant: 'desktop'
     },
@@ -148,7 +158,7 @@ const DateTimePickerToolbarTimeDigitsContainer = (0, _styles.styled)('div', {
       gap: 1.5
     }
   }]
-}));
+});
 const DateTimePickerToolbarSeparator = (0, _styles.styled)(_PickersToolbarText.PickersToolbarText, {
   name: 'MuiDateTimePickerToolbar',
   slot: 'Separator',
@@ -229,7 +239,10 @@ function DateTimePickerToolbar(inProps) {
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = props;
+  const isRtl = (0, _RtlProvider.useRtl)();
+  const ownerState = (0, _extends2.default)({}, props, {
+    isRtl
+  });
   const utils = (0, _useUtils.useUtils)();
   const {
     meridiemMode,
@@ -238,10 +251,7 @@ function DateTimePickerToolbar(inProps) {
   const showAmPmControl = Boolean(ampm && !ampmInClock);
   const isDesktop = toolbarVariant === 'desktop';
   const localeText = (0, _useUtils.useLocaleText)();
-  const theme = (0, _styles.useTheme)();
-  const classes = useUtilityClasses((0, _extends2.default)({}, ownerState, {
-    theme
-  }));
+  const classes = useUtilityClasses(ownerState);
   const toolbarTitle = inToolbarTitle ?? localeText.dateTimePickerToolbarTitle;
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
   const dateText = React.useMemo(() => {

package/node/DesktopDateTimePicker/DesktopDateTimePickerLayout.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DesktopDateTimePickerLayout = DesktopDateTimePickerLayout;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
 var _PickersLayout = require("../PickersLayout");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -17,6 +19,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * @ignore - internal component.
  */
 function DesktopDateTimePickerLayout(props) {
+  const isRtl = (0, _RtlProvider.useRtl)();
   const {
     toolbar,
     tabs,
@@ -32,6 +35,9 @@ function DesktopDateTimePickerLayout(props) {
     classes
   } = props;
   const isActionBarVisible = actionBar && (actionBar.props.actions?.length ?? 0) > 0;
+  const ownerState = (0, _extends2.default)({}, props, {
+    isRtl
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickersLayout.PickersLayoutRoot, {
     ref: ref,
     className: (0, _clsx.default)(className, _PickersLayout.pickersLayoutClasses.root, classes?.root),
@@ -44,7 +50,7 @@ function DesktopDateTimePickerLayout(props) {
         gridRow: 5
       }
     }, ...(Array.isArray(sx) ? sx : [sx])],
-    ownerState: props,
+    ownerState: ownerState,
     children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickersLayout.PickersLayoutContentWrapper, {
       className: (0, _clsx.default)(_PickersLayout.pickersLayoutClasses.contentWrapper, classes?.contentWrapper),
       sx: {
@@ -72,6 +78,10 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
   className: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   isLandscape: _propTypes.default.bool.isRequired,
+  /**
+   * `true` if the application is in right-to-left direction.
+   */
+  isRtl: _propTypes.default.bool.isRequired,
   isValid: _propTypes.default.func.isRequired,
   onAccept: _propTypes.default.func.isRequired,
   onCancel: _propTypes.default.func.isRequired,

package/node/MonthCalendar/MonthCalendar.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _system = require("@mui/system");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _PickersMonth = require("./PickersMonth");
@@ -109,7 +109,7 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
     valueManager: _valueManagers.singleItemValueManager
   });
   const now = (0, _useUtils.useNow)(timezone);
-  const theme = (0, _system.useTheme)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const utils = (0, _useUtils.useUtils)();
   const referenceDate = React.useMemo(() => _valueManagers.singleItemValueManager.getInitialReferenceValue({
     value,
@@ -189,11 +189,11 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
         event.preventDefault();
         break;
       case 'ArrowLeft':
-        focusMonth((monthsInYear + month + (theme.direction === 'ltr' ? -1 : 1)) % monthsInYear);
+        focusMonth((monthsInYear + month + (isRtl ? 1 : -1)) % monthsInYear);
         event.preventDefault();
         break;
       case 'ArrowRight':
-        focusMonth((monthsInYear + month + (theme.direction === 'ltr' ? 1 : -1)) % monthsInYear);
+        focusMonth((monthsInYear + month + (isRtl ? -1 : 1)) % monthsInYear);
         event.preventDefault();
         break;
       default:

package/node/PickersLayout/PickersLayout.js

@@ -30,9 +30,7 @@ const PickersLayoutRoot = exports.PickersLayoutRoot = (0, _styles.styled)('div',
   name: 'MuiPickersLayout',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
-})(({
-  theme
-}) => ({
+})({
   display: 'grid',
   gridAutoColumns: 'max-content auto max-content',
   gridAutoRows: 'max-content auto max-content',
@@ -46,7 +44,7 @@ const PickersLayoutRoot = exports.PickersLayoutRoot = (0, _styles.styled)('div',
     },
     style: {
       [`& .${_pickersLayoutClasses.pickersLayoutClasses.toolbar}`]: {
-        gridColumn: theme.direction === 'rtl' ? 3 : 1,
+        gridColumn: 1,
         gridRow: '2 / 3'
       },
       [`.${_pickersLayoutClasses.pickersLayoutClasses.shortcuts}`]: {
@@ -54,6 +52,16 @@ const PickersLayoutRoot = exports.PickersLayoutRoot = (0, _styles.styled)('div',
         gridRow: 1
       }
     }
+  }, {
+    props: {
+      isLandscape: true,
+      isRtl: true
+    },
+    style: {
+      [`& .${_pickersLayoutClasses.pickersLayoutClasses.toolbar}`]: {
+        gridColumn: 3
+      }
+    }
   }, {
     props: {
       isLandscape: false
@@ -64,12 +72,22 @@ const PickersLayoutRoot = exports.PickersLayoutRoot = (0, _styles.styled)('div',
         gridRow: 1
       },
       [`& .${_pickersLayoutClasses.pickersLayoutClasses.shortcuts}`]: {
-        gridColumn: theme.direction === 'rtl' ? 3 : 1,
+        gridColumn: 1,
         gridRow: '2 / 3'
       }
     }
+  }, {
+    props: {
+      isLandscape: false,
+      isRtl: true
+    },
+    style: {
+      [`& .${_pickersLayoutClasses.pickersLayoutClasses.shortcuts}`]: {
+        gridColumn: 3
+      }
+    }
   }]
-}));
+});
 const PickersLayoutContentWrapper = exports.PickersLayoutContentWrapper = (0, _styles.styled)('div', {
   name: 'MuiPickersLayout',
   slot: 'ContentWrapper',
@@ -109,13 +127,12 @@ const PickersLayout = exports.PickersLayout = function PickersLayout(inProps) {
     ref,
     wrapperVariant
   } = props;
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(props);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersLayoutRoot, {
     ref: ref,
     sx: sx,
     className: (0, _clsx.default)(className, classes.root),
-    ownerState: ownerState,
+    ownerState: props,
     children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersLayoutContentWrapper, {
       className: classes.contentWrapper,
       children: wrapperVariant === 'desktop' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
@@ -139,6 +156,10 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   className: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   isLandscape: _propTypes.default.bool.isRequired,
+  /**
+   * `true` if the application is in right-to-left direction.
+   */
+  isRtl: _propTypes.default.bool.isRequired,
   isValid: _propTypes.default.func.isRequired,
   onAccept: _propTypes.default.func.isRequired,
   onCancel: _propTypes.default.func.isRequired,

package/node/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -17,6 +17,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _utils2 = require("@mui/base/utils");
 var _visuallyHidden = _interopRequireDefault(require("@mui/utils/visuallyHidden"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _pickersInputBaseClasses = require("./pickersInputBaseClasses");
 var _PickersSectionList = require("../../PickersSectionList");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -56,7 +57,7 @@ const PickersInputBaseSectionsContainer = exports.PickersInputBaseSectionsContai
   overridesResolver: (props, styles) => styles.sectionsContainer
 })(({
   theme
-}) => (0, _extends2.default)({
+}) => ({
   padding: '4px 0 5px',
   fontFamily: theme.typography.fontFamily,
   fontSize: 'inherit',
@@ -69,11 +70,15 @@ const PickersInputBaseSectionsContainer = exports.PickersInputBaseSectionsContai
   overflow: 'hidden',
   letterSpacing: 'inherit',
   // Baseline behavior
-  width: '182px'
-}, theme.direction === 'rtl' && {
-  textAlign: 'right /*! @noflip */'
-}, {
+  width: '182px',
   variants: [{
+    props: {
+      isRtl: true
+    },
+    style: {
+      textAlign: 'right /*! @noflip */'
+    }
+  }, {
     props: {
       size: 'small'
     },
@@ -204,6 +209,7 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
   const rootRef = React.useRef(null);
   const handleRootRef = (0, _useForkRef.default)(ref, rootRef);
   const handleInputRef = (0, _useForkRef.default)(inputProps?.ref, inputRef);
+  const isRtl = (0, _RtlProvider.useRtl)();
   const muiFormControl = (0, _FormControl.useFormControl)();
   if (!muiFormControl) {
     throw new Error('MUI X: PickersInputBase should always be used inside a PickersTextField component');
@@ -232,7 +238,9 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
       muiFormControl.onFilled();
     }
   }, [muiFormControl, areAllSectionsEmpty]);
-  const ownerState = (0, _extends2.default)({}, props, muiFormControl);
+  const ownerState = (0, _extends2.default)({}, props, muiFormControl, {
+    isRtl
+  });
   const classes = useUtilityClasses(ownerState);
   const InputRoot = slots?.root || PickersInputBaseRoot;
   const inputRootProps = (0, _utils2.useSlotProps)({