@mui/x-date-pickers 7.6.0 → 7.6.2

package/modern/DateTimePicker/DateTimePickerToolbar.js

@@ -1,9 +1,10 @@
-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 = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "disabled", "readOnly", "toolbarVariant", "toolbarTitle", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled, useThemeProps, useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
+import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import { PickersToolbarText } from '../internals/components/PickersToolbarText';
@@ -20,14 +21,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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']
@@ -88,50 +89,59 @@ const DateTimePickerToolbarTimeContainer = styled('div', {
   name: 'MuiDateTimePickerToolbar',
   slot: 'TimeContainer',
   overridesResolver: (props, styles) => styles.timeContainer
-})(({
-  theme
-}) => {
-  return _extends({
-    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: _extends({
-        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 = styled('div', {
   name: 'MuiDateTimePickerToolbar',
   slot: 'TimeDigitsContainer',
   overridesResolver: (props, styles) => styles.timeDigitsContainer
-})(({
-  theme
-}) => _extends({
-  display: 'flex'
-}, theme.direction === 'rtl' && {
-  flexDirection: 'row-reverse'
-}, {
+})({
+  display: 'flex',
   variants: [{
+    props: {
+      isRtl: true
+    },
+    style: {
+      flexDirection: 'row-reverse'
+    }
+  }, {
     props: {
       toolbarVariant: 'desktop'
     },
@@ -139,7 +149,7 @@ const DateTimePickerToolbarTimeDigitsContainer = styled('div', {
       gap: 1.5
     }
   }]
-}));
+});
 const DateTimePickerToolbarSeparator = styled(PickersToolbarText, {
   name: 'MuiDateTimePickerToolbar',
   slot: 'Separator',
@@ -220,7 +230,10 @@ function DateTimePickerToolbar(inProps) {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = props;
+  const isRtl = useRtl();
+  const ownerState = _extends({}, props, {
+    isRtl
+  });
   const utils = useUtils();
   const {
     meridiemMode,
@@ -229,10 +242,7 @@ function DateTimePickerToolbar(inProps) {
   const showAmPmControl = Boolean(ampm && !ampmInClock);
   const isDesktop = toolbarVariant === 'desktop';
   const localeText = useLocaleText();
-  const theme = useTheme();
-  const classes = useUtilityClasses(_extends({}, 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/modern/DesktopDateTimePicker/DesktopDateTimePickerLayout.js

@@ -1,6 +1,8 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { useRtl } from '@mui/system/RtlProvider';
 import Divider from '@mui/material/Divider';
 import { PickersLayoutContentWrapper, PickersLayoutRoot, pickersLayoutClasses, usePickerLayout } from '../PickersLayout';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -8,6 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @ignore - internal component.
  */
 function DesktopDateTimePickerLayout(props) {
+  const isRtl = useRtl();
   const {
     toolbar,
     tabs,
@@ -23,6 +26,9 @@ function DesktopDateTimePickerLayout(props) {
     classes
   } = props;
   const isActionBarVisible = actionBar && (actionBar.props.actions?.length ?? 0) > 0;
+  const ownerState = _extends({}, props, {
+    isRtl
+  });
   return /*#__PURE__*/_jsxs(PickersLayoutRoot, {
     ref: ref,
     className: clsx(className, pickersLayoutClasses.root, classes?.root),
@@ -35,7 +41,7 @@ function DesktopDateTimePickerLayout(props) {
         gridRow: 5
       }
     }, ...(Array.isArray(sx) ? sx : [sx])],
-    ownerState: props,
+    ownerState: ownerState,
     children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/_jsxs(PickersLayoutContentWrapper, {
       className: clsx(pickersLayoutClasses.contentWrapper, classes?.contentWrapper),
       sx: {
@@ -63,6 +69,10 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
   className: PropTypes.string,
   disabled: PropTypes.bool,
   isLandscape: PropTypes.bool.isRequired,
+  /**
+   * `true` if the application is in right-to-left direction.
+   */
+  isRtl: PropTypes.bool.isRequired,
   isValid: PropTypes.func.isRequired,
   onAccept: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,

package/modern/MonthCalendar/MonthCalendar.js

@@ -4,7 +4,7 @@ const _excluded = ["className", "value", "defaultValue", "referenceDate", "disab
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useTheme } from '@mui/system';
+import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_useControlled as useControlled, unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { PickersMonth } from './PickersMonth';
@@ -99,7 +99,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     valueManager: singleItemValueManager
   });
   const now = useNow(timezone);
-  const theme = useTheme();
+  const isRtl = useRtl();
   const utils = useUtils();
   const referenceDate = React.useMemo(() => singleItemValueManager.getInitialReferenceValue({
     value,
@@ -179,11 +179,11 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
         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/modern/PickersLayout/PickersLayout.js

@@ -21,9 +21,7 @@ export const PickersLayoutRoot = 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',
@@ -37,7 +35,7 @@ export const PickersLayoutRoot = styled('div', {
     },
     style: {
       [`& .${pickersLayoutClasses.toolbar}`]: {
-        gridColumn: theme.direction === 'rtl' ? 3 : 1,
+        gridColumn: 1,
         gridRow: '2 / 3'
       },
       [`.${pickersLayoutClasses.shortcuts}`]: {
@@ -45,6 +43,16 @@ export const PickersLayoutRoot = styled('div', {
         gridRow: 1
       }
     }
+  }, {
+    props: {
+      isLandscape: true,
+      isRtl: true
+    },
+    style: {
+      [`& .${pickersLayoutClasses.toolbar}`]: {
+        gridColumn: 3
+      }
+    }
   }, {
     props: {
       isLandscape: false
@@ -55,12 +63,22 @@ export const PickersLayoutRoot = styled('div', {
         gridRow: 1
       },
       [`& .${pickersLayoutClasses.shortcuts}`]: {
-        gridColumn: theme.direction === 'rtl' ? 3 : 1,
+        gridColumn: 1,
         gridRow: '2 / 3'
       }
     }
+  }, {
+    props: {
+      isLandscape: false,
+      isRtl: true
+    },
+    style: {
+      [`& .${pickersLayoutClasses.shortcuts}`]: {
+        gridColumn: 3
+      }
+    }
   }]
-}));
+});
 export const PickersLayoutContentWrapper = styled('div', {
   name: 'MuiPickersLayout',
   slot: 'ContentWrapper',
@@ -100,13 +118,12 @@ const PickersLayout = function PickersLayout(inProps) {
     ref,
     wrapperVariant
   } = props;
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(props);
   return /*#__PURE__*/_jsxs(PickersLayoutRoot, {
     ref: ref,
     sx: sx,
     className: clsx(className, classes.root),
-    ownerState: ownerState,
+    ownerState: props,
     children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/_jsx(PickersLayoutContentWrapper, {
       className: classes.contentWrapper,
       children: wrapperVariant === 'desktop' ? /*#__PURE__*/_jsxs(React.Fragment, {
@@ -130,6 +147,10 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   className: PropTypes.string,
   disabled: PropTypes.bool,
   isLandscape: PropTypes.bool.isRequired,
+  /**
+   * `true` if the application is in right-to-left direction.
+   */
+  isRtl: PropTypes.bool.isRequired,
   isValid: PropTypes.func.isRequired,
   onAccept: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,

package/modern/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -11,6 +11,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '@mui/utils/capitalize';
 import { useSlotProps } from '@mui/base/utils';
 import visuallyHidden from '@mui/utils/visuallyHidden';
+import { useRtl } from '@mui/system/RtlProvider';
 import { pickersInputBaseClasses, getPickersInputBaseUtilityClass } from './pickersInputBaseClasses';
 import { Unstable_PickersSectionList as PickersSectionList, Unstable_PickersSectionListRoot as PickersSectionListRoot, Unstable_PickersSectionListSection as PickersSectionListSection, Unstable_PickersSectionListSectionSeparator as PickersSectionListSectionSeparator, Unstable_PickersSectionListSectionContent as PickersSectionListSectionContent } from '../../PickersSectionList';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -47,7 +48,7 @@ export const PickersInputBaseSectionsContainer = styled(PickersSectionListRoot,
   overridesResolver: (props, styles) => styles.sectionsContainer
 })(({
   theme
-}) => _extends({
+}) => ({
   padding: '4px 0 5px',
   fontFamily: theme.typography.fontFamily,
   fontSize: 'inherit',
@@ -60,11 +61,15 @@ export const PickersInputBaseSectionsContainer = styled(PickersSectionListRoot,
   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'
     },
@@ -195,6 +200,7 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
   const rootRef = React.useRef(null);
   const handleRootRef = useForkRef(ref, rootRef);
   const handleInputRef = useForkRef(inputProps?.ref, inputRef);
+  const isRtl = useRtl();
   const muiFormControl = useFormControl();
   if (!muiFormControl) {
     throw new Error('MUI X: PickersInputBase should always be used inside a PickersTextField component');
@@ -223,7 +229,9 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       muiFormControl.onFilled();
     }
   }, [muiFormControl, areAllSectionsEmpty]);
-  const ownerState = _extends({}, props, muiFormControl);
+  const ownerState = _extends({}, props, muiFormControl, {
+    isRtl
+  });
   const classes = useUtilityClasses(ownerState);
   const InputRoot = slots?.root || PickersInputBaseRoot;
   const inputRootProps = useSlotProps({

package/modern/TimePicker/TimePickerToolbar.js

@@ -1,10 +1,11 @@
-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 = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly", "className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { useTheme, styled, useThemeProps } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
+import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { PickersToolbarText } from '../internals/components/PickersToolbarText';
 import { PickersToolbarButton } from '../internals/components/PickersToolbarButton';
@@ -17,14 +18,14 @@ import { formatMeridiem } from '../internals/utils/date-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
-    theme,
     isLandscape,
-    classes
+    classes,
+    isRtl
   } = ownerState;
   const slots = {
     root: ['root'],
     separator: ['separator'],
-    hourMinuteLabel: ['hourMinuteLabel', isLandscape && 'hourMinuteLabelLandscape', theme.direction === 'rtl' && 'hourMinuteLabelReverse'],
+    hourMinuteLabel: ['hourMinuteLabel', isLandscape && 'hourMinuteLabelLandscape', isRtl && 'hourMinuteLabelReverse'],
     ampmSelection: ['ampmSelection', isLandscape && 'ampmLandscape'],
     ampmLabel: ['ampmLabel']
   };
@@ -51,16 +52,18 @@ const TimePickerToolbarHourMinuteLabel = styled('div', {
     [`&.${timePickerToolbarClasses.hourMinuteLabelLandscape}`]: styles.hourMinuteLabelLandscape,
     [`&.${timePickerToolbarClasses.hourMinuteLabelReverse}`]: styles.hourMinuteLabelReverse
   }, styles.hourMinuteLabel]
-})(({
-  theme
-}) => _extends({
+})({
   display: 'flex',
   justifyContent: 'flex-end',
-  alignItems: 'flex-end'
-}, theme.direction === 'rtl' && {
-  flexDirection: 'row-reverse'
-}, {
+  alignItems: 'flex-end',
   variants: [{
+    props: {
+      isRtl: true
+    },
+    style: {
+      flexDirection: 'row-reverse'
+    }
+  }, {
     props: {
       isLandscape: true
     },
@@ -68,7 +71,7 @@ const TimePickerToolbarHourMinuteLabel = styled('div', {
       marginTop: 'auto'
     }
   }]
-}));
+});
 const TimePickerToolbarAmPmSelection = styled('div', {
   name: 'MuiTimePickerToolbar',
   slot: 'AmPmSelection',
@@ -129,17 +132,17 @@ function TimePickerToolbar(inProps) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
   const localeText = useLocaleText();
-  const theme = useTheme();
+  const isRtl = useRtl();
   const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours'));
   const {
     meridiemMode,
     handleMeridiemChange
   } = useMeridiemMode(value, ampm, onChange);
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
-  const ownerState = props;
-  const classes = useUtilityClasses(_extends({}, ownerState, {
-    theme
-  }));
+  const ownerState = _extends({}, props, {
+    isRtl
+  });
+  const classes = useUtilityClasses(ownerState);
   const separator = /*#__PURE__*/_jsx(TimePickerToolbarSeparator, {
     tabIndex: -1,
     value: ":",

package/modern/YearCalendar/YearCalendar.js

@@ -4,7 +4,7 @@ const _excluded = ["autoFocus", "className", "value", "defaultValue", "reference
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useTheme } from '@mui/system';
+import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_useControlled as useControlled, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { PickersYear } from './PickersYear';
@@ -104,7 +104,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     valueManager: singleItemValueManager
   });
   const now = useNow(timezone);
-  const theme = useTheme();
+  const isRtl = useRtl();
   const utils = useUtils();
   const referenceDate = React.useMemo(() => singleItemValueManager.getInitialReferenceValue({
     value,
@@ -184,11 +184,11 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
         event.preventDefault();
         break;
       case 'ArrowLeft':
-        focusYear(year + (theme.direction === 'ltr' ? -1 : 1));
+        focusYear(year + (isRtl ? 1 : -1));
         event.preventDefault();
         break;
       case 'ArrowRight':
-        focusYear(year + (theme.direction === 'ltr' ? 1 : -1));
+        focusYear(year + (isRtl ? -1 : 1));
         event.preventDefault();
         break;
       default:

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.6.0
+ * @mui/x-date-pickers v7.6.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -6,7 +6,8 @@ const _excluded = ["children", "className", "slots", "slotProps", "isNextDisable
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
-import { useTheme, styled, useThemeProps } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
+import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useSlotProps } from '@mui/base/utils';
 import IconButton from '@mui/material/IconButton';
@@ -55,8 +56,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getPickersArrowSwitcherUtilityClass, classes);
 };
 export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function PickersArrowSwitcher(inProps, ref) {
-  const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const props = useThemeProps({
     props: inProps,
     name: 'MuiPickersArrowSwitcher'
@@ -152,7 +152,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
     ownerState: ownerState
   }, other, {
     children: [/*#__PURE__*/_jsx(PreviousIconButton, _extends({}, previousIconButtonProps, {
-      children: isRTL ? /*#__PURE__*/_jsx(RightArrowIcon, _extends({}, rightArrowIconProps)) : /*#__PURE__*/_jsx(LeftArrowIcon, _extends({}, leftArrowIconProps))
+      children: isRtl ? /*#__PURE__*/_jsx(RightArrowIcon, _extends({}, rightArrowIconProps)) : /*#__PURE__*/_jsx(LeftArrowIcon, _extends({}, leftArrowIconProps))
     })), children ? /*#__PURE__*/_jsx(Typography, {
       variant: "subtitle1",
       component: "span",
@@ -161,7 +161,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
       className: classes.spacer,
       ownerState: ownerState
     }), /*#__PURE__*/_jsx(NextIconButton, _extends({}, nextIconButtonProps, {
-      children: isRTL ? /*#__PURE__*/_jsx(LeftArrowIcon, _extends({}, leftArrowIconProps)) : /*#__PURE__*/_jsx(RightArrowIcon, _extends({}, rightArrowIconProps))
+      children: isRtl ? /*#__PURE__*/_jsx(LeftArrowIcon, _extends({}, leftArrowIconProps)) : /*#__PURE__*/_jsx(RightArrowIcon, _extends({}, rightArrowIconProps))
     }))]
   }));
 });

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

@@ -217,14 +217,14 @@ const buildSections = params => {
   return sections;
 };
 const postProcessSections = ({
-  isRTL,
+  isRtl,
   formatDensity,
   sections
 }) => {
   return sections.map(section => {
     const cleanSeparator = separator => {
       let cleanedSeparator = separator;
-      if (isRTL && cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
+      if (isRtl && cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
         cleanedSeparator = `\u2069${cleanedSeparator}\u2066`;
       }
       if (formatDensity === 'spacious' && ['/', '.', '-'].includes(cleanedSeparator)) {
@@ -239,7 +239,7 @@ const postProcessSections = ({
 };
 export const buildSectionsFromFormat = params => {
   let expandedFormat = expandFormat(params);
-  if (params.isRTL && params.enableAccessibleFieldDOMStructure) {
+  if (params.isRtl && params.enableAccessibleFieldDOMStructure) {
     expandedFormat = expandedFormat.split(' ').reverse().join(' ');
   }
   const escapedParts = getEscapedPartsFromFormat(_extends({}, params, {

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import { useValidation } from '../useValidation';
 import { useUtils } from '../useUtils';
 import { adjustSectionValue, getSectionOrder } from './useField.utils';
@@ -31,8 +31,7 @@ export const useField = params => {
     valueManager,
     validator
   } = params;
-  const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const stateResponse = useFieldState(params);
   const {
     state,
@@ -60,7 +59,7 @@ export const useField = params => {
   } = characterEditingResponse;
   const areAllSectionsEmpty = valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);
   const useFieldTextField = enableAccessibleFieldDOMStructure ? useFieldV7TextField : useFieldV6TextField;
-  const sectionOrder = React.useMemo(() => getSectionOrder(state.sections, isRTL && !enableAccessibleFieldDOMStructure), [state.sections, isRTL, enableAccessibleFieldDOMStructure]);
+  const sectionOrder = React.useMemo(() => getSectionOrder(state.sections, isRtl && !enableAccessibleFieldDOMStructure), [state.sections, isRtl, enableAccessibleFieldDOMStructure]);
   const {
     returnedValue,
     interactions

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

@@ -195,8 +195,9 @@ export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsVa
       return options[options.length - 1];
     }
     const currentOptionIndex = options.indexOf(section.value);
-    const newOptionIndex = (currentOptionIndex + options.length + delta) % options.length;
-    return options[newOptionIndex];
+    const newOptionIndex = (currentOptionIndex + delta) % options.length;
+    const clampedIndex = (newOptionIndex + options.length) % options.length;
+    return options[clampedIndex];
   };
   if (section.contentType === 'digit' || section.contentType === 'digit-with-letter') {
     return adjustDigitSection();
@@ -306,13 +307,13 @@ export const getDateFromDateSections = (utils, sections, localizedDigits) => {
 export const createDateStrForV7HiddenInputFromSections = sections => sections.map(section => {
   return `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`;
 }).join('');
-export const createDateStrForV6InputFromSections = (sections, localizedDigits, isRTL) => {
+export const createDateStrForV6InputFromSections = (sections, localizedDigits, isRtl) => {
   const formattedSections = sections.map(section => {
-    const dateValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr', localizedDigits);
+    const dateValue = getSectionVisibleValue(section, isRtl ? 'input-rtl' : 'input-ltr', localizedDigits);
     return `${section.startSeparator}${dateValue}${section.endSeparator}`;
   });
   const dateStr = formattedSections.join('');
-  if (!isRTL) {
+  if (!isRtl) {
     return dateStr;
   }