@mui/x-date-pickers 7.6.0 → 7.6.2

package/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/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/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/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/internals/components/PickersToolbarButton.d.ts

@@ -12,4 +12,4 @@ export interface PickersToolbarButtonProps extends ExtendMui<ButtonProps, 'value
     classes?: Partial<PickersToolbarButtonClasses>;
     width?: number;
 }
-export declare const PickersToolbarButton: React.FunctionComponent<PickersToolbarButtonProps>;
+export declare const PickersToolbarButton: React.ForwardRefExoticComponent<Omit<PickersToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/internals/hooks/useField/buildSectionsFromFormat.d.ts

@@ -4,7 +4,7 @@ interface BuildSectionsFromFormatParams<TDate extends PickerValidDate> {
     utils: MuiPickersAdapter<TDate>;
     format: string;
     formatDensity: 'dense' | 'spacious';
-    isRTL: boolean;
+    isRtl: boolean;
     timezone: PickersTimezone;
     shouldRespectLeadingZeros: boolean;
     localeText: PickersLocaleText<TDate>;

package/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/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/internals/hooks/useField/useField.types.d.ts

@@ -220,10 +220,10 @@ export interface FieldValueManager<TValue, TDate extends PickerValidDate, TSecti
      * @template TSection
      * @param {TSection[]} sections The current section list.
      * @param {string} localizedDigits The conversion table from localized to 0-9 digits.
-     * @param {boolean} isRTL `true` if the current orientation is "right to left"
+     * @param {boolean} isRtl `true` if the current orientation is "right to left"
      * @returns {string} The string value to render in the input.
      */
-    getV6InputValueFromSections: (sections: TSection[], localizedDigits: string[], isRTL: boolean) => string;
+    getV6InputValueFromSections: (sections: TSection[], localizedDigits: string[], isRtl: boolean) => string;
     /**
      * Creates the string value to render in the input based on the current section list.
      * @template TSection

package/internals/hooks/useField/useField.utils.d.ts

@@ -29,7 +29,7 @@ export declare const doesSectionFormatHaveLeadingZeros: <TDate extends PickerVal
  */
 export declare const getDateFromDateSections: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, sections: FieldSection[], localizedDigits: string[]) => TDate;
 export declare const createDateStrForV7HiddenInputFromSections: (sections: FieldSection[]) => string;
-export declare const createDateStrForV6InputFromSections: (sections: FieldSection[], localizedDigits: string[], isRTL: boolean) => string;
+export declare const createDateStrForV6InputFromSections: (sections: FieldSection[], localizedDigits: string[], isRtl: boolean) => string;
 export declare const getSectionsBoundaries: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, localizedDigits: string[], timezone: PickersTimezone) => FieldSectionsValueBoundaries<TDate>;
 export declare const validateSections: <TSection extends FieldSection>(sections: TSection[], valueType: FieldValueType) => void;
 export declare const mergeDateIntoReferenceDate: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, timezone: PickersTimezone, dateToTransferFrom: TDate, sections: FieldSection[], referenceDate: TDate, shouldLimitToEditedSections: boolean) => TDate;

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

package/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/internals/hooks/useField/useFieldV6TextField.d.ts

@@ -20,6 +20,6 @@ type FieldSectionWithPositions<TSection> = TSection & {
      */
     endInInput: number;
 };
-export declare const addPositionPropertiesToSections: <TSection extends FieldSection>(sections: TSection[], localizedDigits: string[], isRTL: boolean) => FieldSectionWithPositions<TSection>[];
+export declare const addPositionPropertiesToSections: <TSection extends FieldSection>(sections: TSection[], localizedDigits: string[], isRtl: boolean) => FieldSectionWithPositions<TSection>[];
 export declare const useFieldV6TextField: UseFieldTextField<false>;
 export {};

package/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/internals/hooks/usePicker/usePickerLayoutProps.d.ts

@@ -15,6 +15,7 @@ export interface UsePickerLayoutProps {
 }
 export interface UsePickerLayoutPropsResponseLayoutProps<TValue, TView extends DateOrTimeViewWithMeridiem> extends UsePickerValueLayoutResponse<TValue>, UsePickerViewsLayoutResponse<TView>, UsePickerLayoutProps {
     isLandscape: boolean;
+    isRtl: boolean;
     wrapperVariant: WrapperVariant;
     isValid: (value: TValue) => boolean;
 }

package/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/modern/AdapterDayjs/AdapterDayjs.js

@@ -256,7 +256,11 @@ export 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/modern/DateCalendar/DayCalendar.js

@@ -6,7 +6,8 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import Typography from '@mui/material/Typography';
 import { useSlotProps } from '@mui/base/utils';
-import { styled, useTheme, useThemeProps } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
+import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_useControlled as useControlled } from '@mui/utils';
 import clsx from 'clsx';
 import { PickersDay } from '../PickersDay/PickersDay';
@@ -249,8 +250,7 @@ export function DayCalendar(inProps) {
   } = props;
   const now = useNow(timezone);
   const classes = useUtilityClasses(props);
-  const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const isDateDisabled = useIsDateDisabled({
     shouldDisableDate,
     shouldDisableMonth,
@@ -295,13 +295,13 @@ export 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 = 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
           });
@@ -311,13 +311,13 @@ export 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 = 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
           });