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

package/node/DateTimePicker/DateTimePickerToolbar.js

@@ -7,14 +7,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DateTimePickerToolbar = DateTimePickerToolbar;
+exports.DateTimePickerToolbarForceDesktopVariant = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _RtlProvider = require("@mui/system/RtlProvider");
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _clsx = _interopRequireDefault(require("clsx"));
+var _createStyled = require("@mui/system/createStyled");
 var _PickersToolbarText = require("../internals/components/PickersToolbarText");
 var _PickersToolbar = require("../internals/components/PickersToolbar");
 var _PickersToolbarButton = require("../internals/components/PickersToolbarButton");
@@ -27,21 +28,21 @@ var _dateUtils = require("../internals/utils/date-utils");
 var _pickersToolbarTextClasses = require("../internals/components/pickersToolbarTextClasses");
 var _pickersToolbarClasses = require("../internals/components/pickersToolbarClasses");
 var _usePickerContext = require("../hooks/usePickerContext");
+var _useToolbarOwnerState = require("../internals/hooks/useToolbarOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "toolbarVariant", "toolbarTitle", "className"];
-const useUtilityClasses = ownerState => {
+const _excluded = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "toolbarTitle", "className", "classes"];
+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 (0, _composeClasses.default)(slots, _dateTimePickerToolbarClasses.getDateTimePickerToolbarUtilityClass, classes);
@@ -49,7 +50,8 @@ const useUtilityClasses = ownerState => {
 const DateTimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToolbar, {
   name: 'MuiDateTimePickerToolbar',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (props, styles) => styles.root,
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'toolbarVariant'
 })(({
   theme
 }) => ({
@@ -71,7 +73,7 @@ const DateTimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToo
   }, {
     props: {
       toolbarVariant: 'desktop',
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
@@ -79,7 +81,7 @@ const DateTimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToo
   }, {
     props: {
       toolbarVariant: 'desktop',
-      isLandscape: false
+      pickerOrientation: 'portrait'
     },
     style: {
       paddingLeft: 24,
@@ -99,13 +101,14 @@ const DateTimePickerToolbarDateContainer = (0, _styles.styled)('div', {
 const DateTimePickerToolbarTimeContainer = (0, _styles.styled)('div', {
   name: 'MuiDateTimePickerToolbar',
   slot: 'TimeContainer',
-  overridesResolver: (props, styles) => styles.timeContainer
+  overridesResolver: (props, styles) => styles.timeContainer,
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'toolbarVariant'
 })({
   display: 'flex',
   flexDirection: 'row',
   variants: [{
     props: {
-      isRtl: true
+      toolbarDirection: 'rtl'
     },
     style: {
       flexDirection: 'row-reverse'
@@ -113,7 +116,7 @@ const DateTimePickerToolbarTimeContainer = (0, _styles.styled)('div', {
   }, {
     props: {
       toolbarVariant: 'desktop',
-      isLandscape: false
+      pickerOrientation: 'portrait'
     },
     style: {
       gap: 9,
@@ -122,18 +125,18 @@ const DateTimePickerToolbarTimeContainer = (0, _styles.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'
     }
@@ -142,12 +145,13 @@ const DateTimePickerToolbarTimeContainer = (0, _styles.styled)('div', {
 const DateTimePickerToolbarTimeDigitsContainer = (0, _styles.styled)('div', {
   name: 'MuiDateTimePickerToolbar',
   slot: 'TimeDigitsContainer',
-  overridesResolver: (props, styles) => styles.timeDigitsContainer
+  overridesResolver: (props, styles) => styles.timeDigitsContainer,
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'toolbarVariant'
 })({
   display: 'flex',
   variants: [{
     props: {
-      isRtl: true
+      toolbarDirection: 'rtl'
     },
     style: {
       flexDirection: 'row-reverse'
@@ -164,7 +168,8 @@ const DateTimePickerToolbarTimeDigitsContainer = (0, _styles.styled)('div', {
 const DateTimePickerToolbarSeparator = (0, _styles.styled)(_PickersToolbarText.PickersToolbarText, {
   name: 'MuiDateTimePickerToolbar',
   slot: 'Separator',
-  overridesResolver: (props, styles) => styles.separator
+  overridesResolver: (props, styles) => styles.separator,
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'toolbarVariant'
 })({
   margin: '0 4px 0 2px',
   cursor: 'default',
@@ -197,7 +202,7 @@ const DateTimePickerToolbarAmPmSelection = (0, _styles.styled)('div', {
   },
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       margin: '4px 0 auto',
@@ -208,6 +213,12 @@ const DateTimePickerToolbarAmPmSelection = (0, _styles.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.
+ */
+const DateTimePickerToolbarForceDesktopVariant = exports.DateTimePickerToolbarForceDesktopVariant = /*#__PURE__*/React.createContext(false);
+
 /**
  * Demos:
  *
@@ -234,28 +245,28 @@ function DateTimePickerToolbar(inProps) {
       toolbarFormat,
       toolbarPlaceholder = '––',
       views,
-      toolbarVariant = 'mobile',
       toolbarTitle: inToolbarTitle,
-      className
+      className,
+      classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const isRtl = (0, _RtlProvider.useRtl)();
   const {
     disabled,
-    readOnly
+    readOnly,
+    variant
   } = (0, _usePickerContext.usePickerContext)();
-  const ownerState = (0, _extends2.default)({}, props, {
-    isRtl
-  });
+  const ownerState = (0, _useToolbarOwnerState.useToolbarOwnerState)();
+  const classes = useUtilityClasses(classesProp, ownerState);
   const utils = (0, _useUtils.useUtils)();
   const {
     meridiemMode,
     handleMeridiemChange
   } = (0, _dateHelpersHooks.useMeridiemMode)(value, ampm, onChange);
-  const showAmPmControl = Boolean(ampm && !ampmInClock);
-  const isDesktop = toolbarVariant === 'desktop';
   const translations = (0, _usePickerTranslations.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(() => {
@@ -270,7 +281,8 @@ function DateTimePickerToolbar(inProps) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarRoot, (0, _extends2.default)({
     isLandscape: isLandscape,
     className: (0, _clsx.default)(classes.root, className),
-    toolbarTitle: toolbarTitle
+    toolbarTitle: toolbarTitle,
+    toolbarVariant: toolbarVariant
   }, other, {
     ownerState: ownerState,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarDateContainer, {
@@ -292,9 +304,11 @@ function DateTimePickerToolbar(inProps) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarTimeContainer, {
       className: classes.timeContainer,
       ownerState: ownerState,
+      toolbarVariant: toolbarVariant,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarTimeDigitsContainer, {
         className: classes.timeDigitsContainer,
         ownerState: ownerState,
+        toolbarVariant: toolbarVariant,
         children: [views.includes('hours') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
             variant: isDesktop ? 'h5' : 'h3',
@@ -306,7 +320,8 @@ function DateTimePickerToolbar(inProps) {
             variant: isDesktop ? 'h5' : 'h3',
             value: ":",
             className: classes.separator,
-            ownerState: ownerState
+            ownerState: ownerState,
+            toolbarVariant: toolbarVariant
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
             variant: isDesktop ? 'h5' : 'h3',
             width: isDesktop && !isLandscape ? _dimensions.MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
@@ -320,7 +335,8 @@ function DateTimePickerToolbar(inProps) {
             variant: isDesktop ? 'h5' : 'h3',
             value: ":",
             className: classes.separator,
-            ownerState: ownerState
+            ownerState: ownerState,
+            toolbarVariant: toolbarVariant
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
             variant: isDesktop ? 'h5' : 'h3',
             width: isDesktop && !isLandscape ? _dimensions.MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
@@ -400,7 +416,6 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization.
    */
   toolbarTitle: _propTypes.default.node,
-  toolbarVariant: _propTypes.default.oneOf(['desktop', 'mobile']),
   value: _propTypes.default.object,
   /**
    * Currently visible picker view.

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -138,8 +138,7 @@ const DesktopDateTimePicker = exports.DesktopDateTimePicker = /*#__PURE__*/React
       }),
       toolbar: (0, _extends2.default)({
         hidden: true,
-        ampmInClock,
-        toolbarVariant: 'desktop'
+        ampmInClock
       }, defaultizedProps.slotProps?.toolbar),
       tabs: (0, _extends2.default)({
         hidden: true

package/node/DigitalClock/DigitalClock.js

@@ -30,12 +30,10 @@ var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _useClockReferenceDate = require("../internals/hooks/useClockReferenceDate");
 var _utils = require("../internals/utils/utils");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-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 useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+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"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     list: ['list'],
@@ -56,7 +54,7 @@ const DigitalClockRoot = (0, _styles.styled)(_PickerViewRoot.PickerViewRoot, {
   maxHeight: _dimensions.DIGITAL_CLOCK_VIEW_HEIGHT,
   variants: [{
     props: {
-      alreadyRendered: true
+      hasDigitalClockAlreadyBeenRendered: true
     },
     style: {
       '@media (prefers-reduced-motion: no-preference)': {
@@ -140,6 +138,7 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
       focusedView,
       onFocusedViewChange,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       views = ['hours'],
@@ -162,15 +161,18 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
   });
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const now = (0, _useUtils.useNow)(timezone);
-  const ownerState = React.useMemo(() => (0, _extends2.default)({}, props, {
-    alreadyRendered: !!containerRef.current
-  }), [props]);
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState: pickerOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const ownerState = (0, _extends2.default)({}, pickerOwnerState, {
+    hasDigitalClockAlreadyBeenRendered: !!containerRef.current
+  });
+  const classes = useUtilityClasses(classesProp);
   const ClockItem = slots?.digitalClockItem ?? DigitalClockItem;
   const clockItemProps = (0, _useSlotProps.default)({
     elementType: ClockItem,
     externalSlotProps: slotProps?.digitalClockItem,
-    ownerState: {},
+    ownerState,
     className: classes.item
   });
   const valueOrReferenceDate = (0, _useClockReferenceDate.useClockReferenceDate)({

package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -29,12 +29,10 @@ var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _useClockReferenceDate = require("../internals/hooks/useClockReferenceDate");
 var _dateUtils = require("../internals/utils/date-utils");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-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 useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+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"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -93,6 +91,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
       focusedView: inFocusedView,
       onFocusedViewChange,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       skipDisabled = false,
@@ -326,8 +325,10 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
       });
     }, {});
   }, [views, buildViewProps]);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(MultiSectionDigitalClockRoot, (0, _extends2.default)({
     ref: ref,
     className: (0, _clsx.default)(classes.root, className),

package/node/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -18,12 +18,10 @@ var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _multiSectionDigitalClockSectionClasses = require("./multiSectionDigitalClockSectionClasses");
 var _dimensions = require("../internals/constants/dimensions");
 var _utils = require("../internals/utils/utils");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoFocus", "onChange", "className", "disabled", "readOnly", "items", "active", "slots", "slotProps", "skipDisabled"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["autoFocus", "onChange", "className", "classes", "disabled", "readOnly", "items", "active", "slots", "slotProps", "skipDisabled"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     item: ['item']
@@ -63,7 +61,7 @@ const MultiSectionDigitalClockSectionRoot = (0, _styles.styled)(_MenuList.defaul
   },
   variants: [{
     props: {
-      alreadyRendered: true
+      hasDigitalClockAlreadyBeenRendered: true
     },
     style: {
       '@media (prefers-reduced-motion: no-preference)': {
@@ -115,6 +113,7 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
       autoFocus,
       onChange,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       items,
@@ -124,10 +123,13 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
       skipDisabled
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = React.useMemo(() => (0, _extends2.default)({}, props, {
-    alreadyRendered: !!containerRef.current
-  }), [props]);
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState: pickerOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const ownerState = (0, _extends2.default)({}, pickerOwnerState, {
+    hasDigitalClockAlreadyBeenRendered: !!containerRef.current
+  });
+  const classes = useUtilityClasses(classesProp);
   const DigitalClockSectionItem = slots?.digitalClockSectionItem ?? MultiSectionDigitalClockSectionItem;
   React.useEffect(() => {
     if (containerRef.current === null) {

package/node/PickersActionBar/PickersActionBar.js

@@ -11,11 +11,18 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
 var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["onAccept", "onClear", "onCancel", "onSetToday", "actions"];
+const PickersActionBarRoot = (0, _styles.styled)(_DialogActions.default, {
+  name: 'MuiPickersLayout',
+  slot: 'ActionBar',
+  overridesResolver: (_, styles) => styles.actionBar
+})({});
+
 /**
  * Demos:
  *
@@ -65,7 +72,7 @@ function PickersActionBar(props) {
         return null;
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogActions.default, (0, _extends2.default)({}, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersActionBarRoot, (0, _extends2.default)({}, other, {
     children: buttons
   }));
 }

package/node/PickersLayout/PickersLayout.js

@@ -55,7 +55,7 @@ const PickersLayoutRoot = exports.PickersLayoutRoot = (0, _styles.styled)('div',
   }, {
     props: {
       pickerOrientation: 'landscape',
-      isRtl: true
+      layoutDirection: 'rtl'
     },
     style: {
       [`& .${_pickersLayoutClasses.pickersLayoutClasses.toolbar}`]: {
@@ -79,7 +79,7 @@ const PickersLayoutRoot = exports.PickersLayoutRoot = (0, _styles.styled)('div',
   }, {
     props: {
       pickerOrientation: 'portrait',
-      isRtl: true
+      layoutDirection: 'rtl'
     },
     style: {
       [`& .${_pickersLayoutClasses.pickersLayoutClasses.shortcuts}`]: {

package/node/PickersLayout/usePickerLayout.js

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

package/node/PickersShortcuts/PickersShortcuts.js

@@ -10,6 +10,7 @@ exports.PickersShortcuts = PickersShortcuts;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _List = _interopRequireDefault(require("@mui/material/List"));
 var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
@@ -18,6 +19,12 @@ var _dimensions = require("../internals/constants/dimensions");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"],
   _excluded2 = ["getValue"];
+const PickersShortcutsRoot = (0, _styles.styled)(_List.default, {
+  name: 'MuiPickersLayout',
+  slot: 'Shortcuts',
+  overridesResolver: (_, styles) => styles.shortcuts
+})({});
+
 /**
  * Demos:
  *
@@ -54,7 +61,7 @@ function PickersShortcuts(props) {
       disabled: !isValid(newValue)
     });
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersShortcutsRoot, (0, _extends2.default)({
     dense: true,
     sx: [{
       maxHeight: _dimensions.VIEW_HEIGHT,

package/node/TimeClock/Clock.js

@@ -19,20 +19,17 @@ var _useUtils = require("../internals/hooks/useUtils");
 var _shared = require("./shared");
 var _clockClasses = require("./clockClasses");
 var _dateUtils = require("../internals/utils/date-utils");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    meridiemMode
-  } = ownerState;
+const useUtilityClasses = (classes, ownerState) => {
   const slots = {
     root: ['root'],
     clock: ['clock'],
     wrapper: ['wrapper'],
     squareMask: ['squareMask'],
     pin: ['pin'],
-    amButton: ['amButton', meridiemMode === 'am' && 'selected'],
-    pmButton: ['pmButton', meridiemMode === 'pm' && 'selected'],
+    amButton: ['amButton', ownerState.clockMeridiemMode === 'am' && 'selected'],
+    pmButton: ['pmButton', ownerState.clockMeridiemMode === 'pm' && 'selected'],
     meridiemText: ['meridiemText']
   };
   return (0, _utils.unstable_composeClasses)(slots, _clockClasses.getClockUtilityClass, classes);
@@ -86,7 +83,7 @@ const ClockSquareMask = (0, _styles.styled)('div', {
   userSelect: 'none',
   variants: [{
     props: {
-      disabled: false
+      isClockDisabled: false
     },
     style: {
       '@media (pointer: fine)': {
@@ -190,13 +187,20 @@ function Clock(inProps) {
     viewValue,
     disabled = false,
     readOnly,
-    className
+    className,
+    classes: classesProp
   } = props;
-  const ownerState = props;
   const utils = (0, _useUtils.useUtils)();
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
+  const {
+    ownerState: pickerOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const ownerState = (0, _extends2.default)({}, pickerOwnerState, {
+    isClockDisabled: disabled,
+    clockMeridiemMode: meridiemMode
+  });
   const isMoving = React.useRef(false);
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp, ownerState);
   const isSelectedTimeDisabled = isTimeDisabled(viewValue, type);
   const isPointerInner = !ampm && type === 'hours' && (viewValue < 1 || viewValue > 12);
   const handleValueChange = (newValue, isFinish) => {
@@ -244,12 +248,7 @@ function Clock(inProps) {
     }
     setTime(event.nativeEvent, 'finish');
   };
-  const hasSelected = React.useMemo(() => {
-    if (type === 'hours') {
-      return true;
-    }
-    return viewValue % 5 === 0;
-  }, [type, viewValue]);
+  const isPointerBetweenTwoClockValues = type === 'hours' ? false : viewValue % 5 !== 0;
   const keyboardControlStep = type === 'minutes' ? minutesStep : 1;
   const listboxRef = React.useRef(null);
   // Since this is rendered when a Popper is opened we can't use passive effects.
@@ -310,9 +309,7 @@ function Clock(inProps) {
         onTouchEnd: handleTouchEnd,
         onMouseUp: handleMouseUp,
         onMouseMove: handleMouseMove,
-        ownerState: {
-          disabled
-        },
+        ownerState: ownerState,
         className: classes.squareMask
       }), !isSelectedTimeDisabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ClockPin, {
@@ -321,7 +318,7 @@ function Clock(inProps) {
           type: type,
           viewValue: viewValue,
           isInner: isPointerInner,
-          hasSelected: hasSelected
+          isBetweenTwoClockValues: isPointerBetweenTwoClockValues
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ClockWrapper, {
         "aria-activedescendant": selectedId,

package/node/TimeClock/ClockNumber.js

@@ -14,16 +14,12 @@ var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _shared = require("./shared");
 var _clockNumberClasses = require("./clockNumberClasses");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "disabled", "index", "inner", "label", "selected"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    selected,
-    disabled
-  } = ownerState;
+const _excluded = ["className", "classes", "disabled", "index", "inner", "label", "selected"];
+const useUtilityClasses = (classes, ownerState) => {
   const slots = {
-    root: ['root', selected && 'selected', disabled && 'disabled']
+    root: ['root', ownerState.isClockNumberSelected && 'selected', ownerState.isClockNumberDisabled && 'disabled']
   };
   return (0, _composeClasses.default)(slots, _clockNumberClasses.getClockNumberUtilityClass, classes);
 };
@@ -60,7 +56,7 @@ const ClockNumberRoot = (0, _styles.styled)('span', {
   },
   variants: [{
     props: {
-      inner: true
+      isClockNumberInInnerRing: true
     },
     style: (0, _extends2.default)({}, theme.typography.body2, {
       color: (theme.vars || theme).palette.text.secondary
@@ -78,6 +74,7 @@ function ClockNumber(inProps) {
   });
   const {
       className,
+      classes: classesProp,
       disabled,
       index,
       inner,
@@ -85,8 +82,15 @@ function ClockNumber(inProps) {
       selected
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState: pickerOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const ownerState = (0, _extends2.default)({}, pickerOwnerState, {
+    isClockNumberInInnerRing: inner,
+    isClockNumberSelected: selected,
+    isClockNumberDisabled: disabled
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
   const angle = index % 12 / 12 * Math.PI * 2 - Math.PI / 2;
   const length = (_shared.CLOCK_WIDTH - _shared.CLOCK_HOUR_WIDTH - 2) / 2 * (inner ? 0.65 : 1);
   const x = Math.round(Math.cos(angle) * length);