@mui/x-date-pickers 7.6.1 → 7.6.2

package/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/CHANGELOG.md

@@ -3,6 +3,72 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.6.2
+
+_Jun 6, 2024_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 Adds Date and Time Pickers accessibility page
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.6.2`
+
+- [DataGrid] Add the `areElementSizesEqual` utility to improve code readability (#13254) @layerok
+- [DataGrid] Clean up IE remnants from the codebase (#13390) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@7.6.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.6.2`.
+
+#### `@mui/x-data-grid-premium@7.6.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.6.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.6.2`
+
+- [fields] Fix `PageUp` and `PageDown` editing on letter sections (#13310) @arthurbalduini
+- [pickers] Fix `AdapterDayjs` timezone behavior (#13362) @LukasTy
+- [pickers] Use `useRtl` instead of `useTheme` to access direction (#13363) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.6.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.6.2`.
+
+### Charts
+
+#### `@mui/x-charts@7.6.2`
+
+- [charts] Add `Initializable` type and behaviour to allow checking if a complex context has been initialized. (#13365) @JCQuintas
+- [charts] Fix some props not working in `xAxis` and `yAxis` (#13372) @Valyok26
+- [charts] Harmonize charts types (#13366) @alexfauquette
+- [charts] Introduce plugins system (#13367) @alexfauquette
+- [charts] Simplify plugin types (#13396) @JCQuintas
+
+### Docs
+
+- [docs] Add badges like in Material UI @oliviertassinari
+- [docs] Update twitter.com to x.com @oliviertassinari
+- [docs] Fix the description of `tickInterval` (#13355) @alexfauquette
+- [docs] Adjust the code example for `quickFilterValues` (#12919) @michelengelen
+- [docs] Create Pickers accessibility page (#13274) @arthurbalduini
+
+### Core
+
+- [core] Comment on `CSS.escape` for the future @oliviertassinari
+- [core] Fix `l10n` action setup (#13382) @LukasTy
+- [core] Fixes in preparation for React 18.3 (#13378) @LukasTy
+- [core] Remove explicit `marked` dependency (#13383) @LukasTy
+- [core] Remove unused `@types/prettier` dependency (#13389) @LukasTy
+- [core] Add `docs/.env.local` to `.gitignore` (#13377) @KenanYusuf
+
 ## 7.6.1
 
 _May 31, 2024_

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

package/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/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/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/PickersLayout/PickersLayout.d.ts

@@ -3,9 +3,7 @@ import { PickersLayoutProps } from './PickersLayout.types';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { PickerValidDate } from '../models';
 export declare const PickersLayoutRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    ownerState: {
-        isLandscape: boolean;
-    };
+    ownerState: PickersLayoutProps<any, any, any>;
 }, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const PickersLayoutContentWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 /**

package/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/PickersLayout/PickersLayout.types.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 import { SlotComponentProps } from '@mui/base/utils';
-import { PickersActionBarProps } from '../PickersActionBar';
+import { PickersActionBar, PickersActionBarProps } from '../PickersActionBar';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs';
 import { UsePickerLayoutPropsResponseLayoutProps } from '../internals/hooks/usePicker/usePickerLayoutProps';
 import { PickersLayoutClasses } from './pickersLayoutClasses';
 import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../internals/models/common';
 import { PickersShortcutsProps } from '../PickersShortcuts';
-import { ExportedPickersShortcutProps } from '../PickersShortcuts/PickersShortcuts';
+import { ExportedPickersShortcutProps, PickersShortcuts } from '../PickersShortcuts/PickersShortcuts';
 import { PickerValidDate } from '../models';
 export interface ExportedPickersLayoutSlots<TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> {
     /**
@@ -37,11 +37,11 @@ export interface ExportedPickersLayoutSlotProps<TValue, TDate extends PickerVali
     /**
      * Props passed down to the action bar component.
      */
-    actionBar?: SlotComponentProps<React.ComponentType<Omit<PickersActionBarProps, 'onAccept' | 'onClear' | 'onCancel' | 'onSetToday'>>, {}, PickersLayoutActionBarOwnerState<TValue, TDate, TView>>;
+    actionBar?: SlotComponentProps<typeof PickersActionBar, {}, PickersLayoutActionBarOwnerState<TValue, TDate, TView>>;
     /**
      * Props passed down to the shortcuts component.
      */
-    shortcuts?: SlotComponentProps<React.ComponentType<PickersShortcutsProps<TValue>>, {}, PickersShortcutsOwnerState<TValue>>;
+    shortcuts?: SlotComponentProps<typeof PickersShortcuts, {}, PickersShortcutsOwnerState<TValue>>;
     /**
      * Props passed down to the layoutRoot component.
      */
@@ -94,6 +94,10 @@ export interface PickersLayoutProps<TValue, TDate extends PickerValidDate, TView
      * @default {}
      */
     slotProps?: PickersLayoutSlotProps<TValue, TDate, TView>;
+    /**
+     * `true` if the application is in right-to-left direction.
+     */
+    isRtl: boolean;
 }
 export interface SubComponents<TValue> {
     toolbar: React.ReactElement<ExportedBaseToolbarProps> | null;

package/PickersTextField/PickersInputBase/PickersInputBase.d.ts

@@ -8,6 +8,7 @@ export declare const PickersInputBaseSectionsContainer: import("@emotion/styled"
     ownerState: OwnerStateType;
 }, {}, {}>;
 interface OwnerStateType extends FormControlState, Omit<PickersInputBaseProps, keyof FormControlState> {
+    isRtl: boolean;
 }
 /**
  * @ignore - internal component.

package/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({