@mui/x-date-pickers 8.0.0-alpha.2 → 8.0.0-alpha.4

package/DateTimePicker/DateTimePickerToolbar.js

@@ -2,13 +2,13 @@
 
 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", "toolbarVariant", "toolbarTitle", "className"];
+const _excluded = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "toolbarTitle", "className", "classes"];
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import clsx from 'clsx';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import { PickersToolbarText } from "../internals/components/PickersToolbarText.js";
 import { PickersToolbar } from "../internals/components/PickersToolbar.js";
 import { PickersToolbarButton } from "../internals/components/PickersToolbarButton.js";
@@ -21,20 +21,20 @@ import { formatMeridiem } from "../internals/utils/date-utils.js";
 import { pickersToolbarTextClasses } from "../internals/components/pickersToolbarTextClasses.js";
 import { pickersToolbarClasses } from "../internals/components/pickersToolbarClasses.js";
 import { usePickerContext } from "../hooks/usePickerContext.js";
+import { useToolbarOwnerState } from "../internals/hooks/useToolbarOwnerState.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    classes,
-    isLandscape,
-    isRtl
+    pickerOrientation,
+    toolbarDirection
   } = ownerState;
   const slots = {
     root: ['root'],
     dateContainer: ['dateContainer'],
-    timeContainer: ['timeContainer', isRtl && 'timeLabelReverse'],
-    timeDigitsContainer: ['timeDigitsContainer', isRtl && 'timeLabelReverse'],
+    timeContainer: ['timeContainer', toolbarDirection === 'rtl' && 'timeLabelReverse'],
+    timeDigitsContainer: ['timeDigitsContainer', toolbarDirection === 'rtl' && 'timeLabelReverse'],
     separator: ['separator'],
-    ampmSelection: ['ampmSelection', isLandscape && 'ampmLandscape'],
+    ampmSelection: ['ampmSelection', pickerOrientation === 'landscape' && 'ampmLandscape'],
     ampmLabel: ['ampmLabel']
   };
   return composeClasses(slots, getDateTimePickerToolbarUtilityClass, classes);
@@ -42,7 +42,8 @@ const useUtilityClasses = ownerState => {
 const DateTimePickerToolbarRoot = styled(PickersToolbar, {
   name: 'MuiDateTimePickerToolbar',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (props, styles) => styles.root,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'toolbarVariant'
 })(({
   theme
 }) => ({
@@ -64,7 +65,7 @@ const DateTimePickerToolbarRoot = styled(PickersToolbar, {
   }, {
     props: {
       toolbarVariant: 'desktop',
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
@@ -72,7 +73,7 @@ const DateTimePickerToolbarRoot = styled(PickersToolbar, {
   }, {
     props: {
       toolbarVariant: 'desktop',
-      isLandscape: false
+      pickerOrientation: 'portrait'
     },
     style: {
       paddingLeft: 24,
@@ -92,13 +93,14 @@ const DateTimePickerToolbarDateContainer = styled('div', {
 const DateTimePickerToolbarTimeContainer = styled('div', {
   name: 'MuiDateTimePickerToolbar',
   slot: 'TimeContainer',
-  overridesResolver: (props, styles) => styles.timeContainer
+  overridesResolver: (props, styles) => styles.timeContainer,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'toolbarVariant'
 })({
   display: 'flex',
   flexDirection: 'row',
   variants: [{
     props: {
-      isRtl: true
+      toolbarDirection: 'rtl'
     },
     style: {
       flexDirection: 'row-reverse'
@@ -106,7 +108,7 @@ const DateTimePickerToolbarTimeContainer = styled('div', {
   }, {
     props: {
       toolbarVariant: 'desktop',
-      isLandscape: false
+      pickerOrientation: 'portrait'
     },
     style: {
       gap: 9,
@@ -115,18 +117,18 @@ const DateTimePickerToolbarTimeContainer = styled('div', {
     }
   }, {
     props: ({
-      isLandscape,
+      pickerOrientation,
       toolbarVariant
-    }) => isLandscape && toolbarVariant !== 'desktop',
+    }) => pickerOrientation === 'landscape' && toolbarVariant !== 'desktop',
     style: {
       flexDirection: 'column'
     }
   }, {
     props: ({
-      isLandscape,
+      pickerOrientation,
       toolbarVariant,
-      isRtl
-    }) => isLandscape && toolbarVariant !== 'desktop' && isRtl,
+      toolbarDirection
+    }) => pickerOrientation === 'landscape' && toolbarVariant !== 'desktop' && toolbarDirection === 'rtl',
     style: {
       flexDirection: 'column-reverse'
     }
@@ -135,12 +137,13 @@ const DateTimePickerToolbarTimeContainer = styled('div', {
 const DateTimePickerToolbarTimeDigitsContainer = styled('div', {
   name: 'MuiDateTimePickerToolbar',
   slot: 'TimeDigitsContainer',
-  overridesResolver: (props, styles) => styles.timeDigitsContainer
+  overridesResolver: (props, styles) => styles.timeDigitsContainer,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'toolbarVariant'
 })({
   display: 'flex',
   variants: [{
     props: {
-      isRtl: true
+      toolbarDirection: 'rtl'
     },
     style: {
       flexDirection: 'row-reverse'
@@ -157,7 +160,8 @@ const DateTimePickerToolbarTimeDigitsContainer = styled('div', {
 const DateTimePickerToolbarSeparator = styled(PickersToolbarText, {
   name: 'MuiDateTimePickerToolbar',
   slot: 'Separator',
-  overridesResolver: (props, styles) => styles.separator
+  overridesResolver: (props, styles) => styles.separator,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'toolbarVariant'
 })({
   margin: '0 4px 0 2px',
   cursor: 'default',
@@ -190,7 +194,7 @@ const DateTimePickerToolbarAmPmSelection = styled('div', {
   },
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       margin: '4px 0 auto',
@@ -201,6 +205,12 @@ const DateTimePickerToolbarAmPmSelection = styled('div', {
   }]
 });
 
+/**
+ * If this context value is set to true, the toolbar will always be rendered in the desktop mode.
+ * This is used by the Date Time Range Picker Toolbar.
+ */
+export const DateTimePickerToolbarForceDesktopVariant = /*#__PURE__*/React.createContext(false);
+
 /**
  * Demos:
  *
@@ -227,28 +237,28 @@ function DateTimePickerToolbar(inProps) {
       toolbarFormat,
       toolbarPlaceholder = '––',
       views,
-      toolbarVariant = 'mobile',
       toolbarTitle: inToolbarTitle,
-      className
+      className,
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const isRtl = useRtl();
   const {
     disabled,
-    readOnly
+    readOnly,
+    variant
   } = usePickerContext();
-  const ownerState = _extends({}, props, {
-    isRtl
-  });
+  const ownerState = useToolbarOwnerState();
+  const classes = useUtilityClasses(classesProp, ownerState);
   const utils = useUtils();
   const {
     meridiemMode,
     handleMeridiemChange
   } = useMeridiemMode(value, ampm, onChange);
-  const showAmPmControl = Boolean(ampm && !ampmInClock);
-  const isDesktop = toolbarVariant === 'desktop';
   const translations = usePickerTranslations();
-  const classes = useUtilityClasses(ownerState);
+  const forceDesktopVariant = React.useContext(DateTimePickerToolbarForceDesktopVariant);
+  const toolbarVariant = forceDesktopVariant ? 'desktop' : variant;
+  const isDesktop = toolbarVariant === 'desktop';
+  const showAmPmControl = Boolean(ampm && !ampmInClock);
   const toolbarTitle = inToolbarTitle ?? translations.dateTimePickerToolbarTitle;
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
   const dateText = React.useMemo(() => {
@@ -263,7 +273,8 @@ function DateTimePickerToolbar(inProps) {
   return /*#__PURE__*/_jsxs(DateTimePickerToolbarRoot, _extends({
     isLandscape: isLandscape,
     className: clsx(classes.root, className),
-    toolbarTitle: toolbarTitle
+    toolbarTitle: toolbarTitle,
+    toolbarVariant: toolbarVariant
   }, other, {
     ownerState: ownerState,
     children: [/*#__PURE__*/_jsxs(DateTimePickerToolbarDateContainer, {
@@ -285,9 +296,11 @@ function DateTimePickerToolbar(inProps) {
     }), /*#__PURE__*/_jsxs(DateTimePickerToolbarTimeContainer, {
       className: classes.timeContainer,
       ownerState: ownerState,
+      toolbarVariant: toolbarVariant,
       children: [/*#__PURE__*/_jsxs(DateTimePickerToolbarTimeDigitsContainer, {
         className: classes.timeDigitsContainer,
         ownerState: ownerState,
+        toolbarVariant: toolbarVariant,
         children: [views.includes('hours') && /*#__PURE__*/_jsxs(React.Fragment, {
           children: [/*#__PURE__*/_jsx(PickersToolbarButton, {
             variant: isDesktop ? 'h5' : 'h3',
@@ -299,7 +312,8 @@ function DateTimePickerToolbar(inProps) {
             variant: isDesktop ? 'h5' : 'h3',
             value: ":",
             className: classes.separator,
-            ownerState: ownerState
+            ownerState: ownerState,
+            toolbarVariant: toolbarVariant
           }), /*#__PURE__*/_jsx(PickersToolbarButton, {
             variant: isDesktop ? 'h5' : 'h3',
             width: isDesktop && !isLandscape ? MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
@@ -313,7 +327,8 @@ function DateTimePickerToolbar(inProps) {
             variant: isDesktop ? 'h5' : 'h3',
             value: ":",
             className: classes.separator,
-            ownerState: ownerState
+            ownerState: ownerState,
+            toolbarVariant: toolbarVariant
           }), /*#__PURE__*/_jsx(PickersToolbarButton, {
             variant: isDesktop ? 'h5' : 'h3',
             width: isDesktop && !isLandscape ? MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
@@ -393,7 +408,6 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization.
    */
   toolbarTitle: PropTypes.node,
-  toolbarVariant: PropTypes.oneOf(['desktop', 'mobile']),
   value: PropTypes.object,
   /**
    * Currently visible picker view.

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -131,8 +131,7 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
       }),
       toolbar: _extends({
         hidden: true,
-        ampmInClock,
-        toolbarVariant: 'desktop'
+        ampmInClock
       }, defaultizedProps.slotProps?.toolbar),
       tabs: _extends({
         hidden: true

package/DigitalClock/DigitalClock.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "timeStep", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "onChange", "view", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "views", "skipDisabled", "timezone"];
+const _excluded = ["ampm", "timeStep", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "onChange", "view", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "classes", "disabled", "readOnly", "views", "skipDisabled", "timezone"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -24,11 +24,9 @@ import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithT
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useClockReferenceDate } from "../internals/hooks/useClockReferenceDate.js";
 import { getFocusedListItemIndex } from "../internals/utils/utils.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     list: ['list'],
@@ -49,7 +47,7 @@ const DigitalClockRoot = styled(PickerViewRoot, {
   maxHeight: DIGITAL_CLOCK_VIEW_HEIGHT,
   variants: [{
     props: {
-      alreadyRendered: true
+      hasDigitalClockAlreadyBeenRendered: true
     },
     style: {
       '@media (prefers-reduced-motion: no-preference)': {
@@ -133,6 +131,7 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
       focusedView,
       onFocusedViewChange,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       views = ['hours'],
@@ -155,15 +154,18 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
   });
   const translations = usePickerTranslations();
   const now = useNow(timezone);
-  const ownerState = React.useMemo(() => _extends({}, props, {
-    alreadyRendered: !!containerRef.current
-  }), [props]);
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    hasDigitalClockAlreadyBeenRendered: !!containerRef.current
+  });
+  const classes = useUtilityClasses(classesProp);
   const ClockItem = slots?.digitalClockItem ?? DigitalClockItem;
   const clockItemProps = useSlotProps({
     elementType: ClockItem,
     externalSlotProps: slotProps?.digitalClockItem,
-    ownerState: {},
+    ownerState,
     className: classes.item
   });
   const valueOrReferenceDate = useClockReferenceDate({

package/DigitalClock/DigitalClock.types.d.ts

@@ -3,7 +3,7 @@ import { SlotComponentProps } from '@mui/utils';
 import MenuItem from '@mui/material/MenuItem';
 import { DigitalClockClasses } from './digitalClockClasses';
 import { BaseClockProps, DigitalClockOnlyProps, ExportedBaseClockProps } from '../internals/models/props/time';
-import { TimeView } from '../models';
+import { PickerOwnerState, TimeView } from '../models';
 export interface ExportedDigitalClockProps extends ExportedBaseClockProps, DigitalClockOnlyProps {
 }
 export interface DigitalClockSlots {
@@ -14,7 +14,7 @@ export interface DigitalClockSlots {
     digitalClockItem?: React.ElementType;
 }
 export interface DigitalClockSlotProps {
-    digitalClockItem?: SlotComponentProps<typeof MenuItem, {}, Record<string, any>>;
+    digitalClockItem?: SlotComponentProps<typeof MenuItem, {}, DigitalClockOwnerState>;
 }
 export interface DigitalClockProps extends ExportedDigitalClockProps, BaseClockProps<Extract<TimeView, 'hours'>> {
     /**
@@ -37,3 +37,9 @@ export interface DigitalClockProps extends ExportedDigitalClockProps, BaseClockP
      */
     slotProps?: DigitalClockSlotProps;
 }
+export interface DigitalClockOwnerState extends PickerOwnerState {
+    /**
+     * `true` if this is not the initial render of the digital clock.
+     */
+    hasDigitalClockAlreadyBeenRendered: boolean;
+}

package/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "timeSteps", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "skipDisabled", "timezone"];
+const _excluded = ["ampm", "timeSteps", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "classes", "disabled", "readOnly", "skipDisabled", "timezone"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -23,11 +23,9 @@ import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithT
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useClockReferenceDate } from "../internals/hooks/useClockReferenceDate.js";
 import { formatMeridiem } from "../internals/utils/date-utils.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -86,6 +84,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       focusedView: inFocusedView,
       onFocusedViewChange,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       skipDisabled = false,
@@ -319,8 +318,10 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       });
     }, {});
   }, [views, buildViewProps]);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState
+  } = usePickerPrivateContext();
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/_jsx(MultiSectionDigitalClockRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["autoFocus", "onChange", "className", "disabled", "readOnly", "items", "active", "slots", "slotProps", "skipDisabled"];
+const _excluded = ["autoFocus", "onChange", "className", "classes", "disabled", "readOnly", "items", "active", "slots", "slotProps", "skipDisabled"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { alpha, styled, useThemeProps } from '@mui/material/styles';
@@ -11,11 +11,9 @@ import useForkRef from '@mui/utils/useForkRef';
 import { getMultiSectionDigitalClockSectionUtilityClass } from "./multiSectionDigitalClockSectionClasses.js";
 import { DIGITAL_CLOCK_VIEW_HEIGHT, MULTI_SECTION_CLOCK_SECTION_WIDTH } from "../internals/constants/dimensions.js";
 import { getFocusedListItemIndex } from "../internals/utils/utils.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     item: ['item']
@@ -55,7 +53,7 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
   },
   variants: [{
     props: {
-      alreadyRendered: true
+      hasDigitalClockAlreadyBeenRendered: true
     },
     style: {
       '@media (prefers-reduced-motion: no-preference)': {
@@ -107,6 +105,7 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
       autoFocus,
       onChange,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       items,
@@ -116,10 +115,13 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
       skipDisabled
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = React.useMemo(() => _extends({}, props, {
-    alreadyRendered: !!containerRef.current
-  }), [props]);
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    hasDigitalClockAlreadyBeenRendered: !!containerRef.current
+  });
+  const classes = useUtilityClasses(classesProp);
   const DigitalClockSectionItem = slots?.digitalClockSectionItem ?? MultiSectionDigitalClockSectionItem;
   React.useEffect(() => {
     if (containerRef.current === null) {

package/PickersActionBar/PickersActionBar.js

@@ -5,10 +5,17 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["onAccept", "onClear", "onCancel", "onSetToday", "actions"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import DialogActions from '@mui/material/DialogActions';
 import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const PickersActionBarRoot = styled(DialogActions, {
+  name: 'MuiPickersLayout',
+  slot: 'ActionBar',
+  overridesResolver: (_, styles) => styles.actionBar
+})({});
+
 /**
  * Demos:
  *
@@ -58,7 +65,7 @@ function PickersActionBar(props) {
         return null;
     }
   });
-  return /*#__PURE__*/_jsx(DialogActions, _extends({}, other, {
+  return /*#__PURE__*/_jsx(PickersActionBarRoot, _extends({}, other, {
     children: buttons
   }));
 }

package/PickersLayout/PickersLayout.js

@@ -48,7 +48,7 @@ export const PickersLayoutRoot = styled('div', {
   }, {
     props: {
       pickerOrientation: 'landscape',
-      isRtl: true
+      layoutDirection: 'rtl'
     },
     style: {
       [`& .${pickersLayoutClasses.toolbar}`]: {
@@ -72,7 +72,7 @@ export const PickersLayoutRoot = styled('div', {
   }, {
     props: {
       pickerOrientation: 'portrait',
-      isRtl: true
+      layoutDirection: 'rtl'
     },
     style: {
       [`& .${pickersLayoutClasses.shortcuts}`]: {

package/PickersLayout/PickersLayout.types.d.ts

@@ -31,9 +31,11 @@ export interface ExportedPickersLayoutSlots<TValue extends PickerValidValue, TVi
 }
 export interface PickerLayoutOwnerState extends PickerOwnerState {
     /**
-     * `true` if the application is in right-to-left direction.
+     * The direction of the layout.
+     * Is equal to "ltr" when the layout is in left-to-right direction.
+     * Is equal to "rtl" when the layout is in right-to-left direction.
      */
-    isRtl: boolean;
+    layoutDirection: 'ltr' | 'rtl';
 }
 export interface ExportedPickersLayoutSlotProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> {
     /**

package/PickersLayout/usePickerLayout.js

@@ -59,9 +59,9 @@ const usePickerLayout = props => {
     // - For pickers value: PickerValidDate | null
     // - For range pickers value: [PickerValidDate | null, PickerValidDate | null]
   } = props;
-  const ownerState = _extends({}, pickerOwnerState, {
-    isRtl
-  });
+  const ownerState = React.useMemo(() => _extends({}, pickerOwnerState, {
+    layoutDirection: isRtl ? 'rtl' : 'ltr'
+  }), [pickerOwnerState, isRtl]);
   const classes = useUtilityClasses(classesProp, ownerState);
 
   // Action bar

package/PickersShortcuts/PickersShortcuts.js

@@ -5,12 +5,19 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"],
   _excluded2 = ["getValue"];
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import Chip from '@mui/material/Chip';
 import { VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const PickersShortcutsRoot = styled(List, {
+  name: 'MuiPickersLayout',
+  slot: 'Shortcuts',
+  overridesResolver: (_, styles) => styles.shortcuts
+})({});
+
 /**
  * Demos:
  *
@@ -47,7 +54,7 @@ function PickersShortcuts(props) {
       disabled: !isValid(newValue)
     });
   });
-  return /*#__PURE__*/_jsx(List, _extends({
+  return /*#__PURE__*/_jsx(PickersShortcutsRoot, _extends({
     dense: true,
     sx: [{
       maxHeight: VIEW_HEIGHT,

package/README.md

@@ -1,7 +1,7 @@
 # MUI X Date Pickers
 
 This package is the Community plan edition of the Date and Time Picker components.
-It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
+It's part of [MUI X](https://mui.com/x/), an open-core extension of our Core libraries, with advanced components.
 
 ## Installation