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

package/modern/internals/components/PickersToolbarText.js

@@ -1,35 +1,29 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "selected", "value"];
+const _excluded = ["className", "classes", "selected", "value"];
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { getPickersToolbarTextUtilityClass, pickersToolbarTextClasses } from "./pickersToolbarTextClasses.js";
+import { getPickersToolbarTextUtilityClass } from "./pickersToolbarTextClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    selected
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
-    root: ['root', selected && 'selected']
+    root: ['root']
   };
   return composeClasses(slots, getPickersToolbarTextUtilityClass, classes);
 };
 const PickersToolbarTextRoot = styled(Typography, {
   name: 'MuiPickersToolbarText',
   slot: 'Root',
-  overridesResolver: (_, styles) => [styles.root, {
-    [`&.${pickersToolbarTextClasses.selected}`]: styles.selected
-  }]
+  overridesResolver: (_, styles) => [styles.root]
 })(({
   theme
 }) => ({
   transition: theme.transitions.create('color'),
   color: (theme.vars || theme).palette.text.secondary,
-  [`&.${pickersToolbarTextClasses.selected}`]: {
+  [`&[data-selected]`]: {
     color: (theme.vars || theme).palette.text.primary
   }
 }));
@@ -40,14 +34,18 @@ export const PickersToolbarText = /*#__PURE__*/React.forwardRef(function Pickers
   });
   const {
       className,
+      classes: classesProp,
+      selected,
       value
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/_jsx(PickersToolbarTextRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
     component: "span"
+  }, selected && {
+    'data-selected': true
   }, other, {
     children: value
   }));

package/modern/internals/hooks/usePicker/usePicker.js

@@ -40,8 +40,8 @@ export const usePicker = ({
     localeText,
     valueManager,
     variant,
-    views: pickerViewsResponse.views,
-    paramsFromUsePickerValue: pickerValueResponse.provider
+    paramsFromUsePickerValue: pickerValueResponse.provider,
+    paramsFromUsePickerViews: pickerViewsResponse.provider
   });
   return {
     // Picker value
@@ -50,7 +50,7 @@ export const usePicker = ({
     fieldProps: pickerValueResponse.fieldProps,
     // Picker views
     renderCurrentView: pickerViewsResponse.renderCurrentView,
-    hasUIView: pickerViewsResponse.hasUIView,
+    hasUIView: pickerViewsResponse.provider.hasUIView,
     shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
     // Picker layout
     layoutProps: _extends({}, pickerViewsResponse.layoutProps, pickerValueResponse.layoutProps),

package/modern/internals/hooks/usePicker/usePickerProvider.js

@@ -40,11 +40,11 @@ export function usePickerProvider(parameters) {
     valueManager,
     localeText,
     variant,
-    views,
-    paramsFromUsePickerValue
+    paramsFromUsePickerValue,
+    paramsFromUsePickerViews
   } = parameters;
   const utils = useUtils();
-  const orientation = usePickerOrientation(views, props.orientation);
+  const orientation = usePickerOrientation(paramsFromUsePickerViews.views, props.orientation);
   const ownerState = React.useMemo(() => ({
     isPickerValueEmpty: valueManager.areValuesEqual(utils, paramsFromUsePickerValue.value, valueManager.emptyValue),
     isPickerOpen: paramsFromUsePickerValue.contextValue.open,
@@ -70,6 +70,10 @@ export function usePickerProvider(parameters) {
 }
 
 /**
- * Props used to create the private context.
+ * Props used to create the picker's contexts.
  * Those props are exposed on all the pickers.
+ */
+
+/**
+ * Props used to create the picker's contexts and that are not available on static pickers.
  */

package/modern/internals/hooks/usePicker/usePickerViews.js

@@ -11,10 +11,6 @@ import { isTimeView } from "../../utils/time-utils.js";
  * Props used to handle the views that are common to all pickers.
  */
 
-/**
- * Props used to handle the views of the pickers.
- */
-
 /**
  * Props used to handle the value of the pickers.
  */
@@ -132,11 +128,14 @@ export const usePickerViews = ({
     view: popperView,
     onViewChange: setView
   };
-  return {
+  const providerParams = {
     hasUIView,
-    views,
+    views
+  };
+  return {
     shouldRestoreFocus,
     layoutProps,
+    provider: providerParams,
     renderCurrentView: () => {
       if (popperView == null) {
         return null;

package/modern/internals/hooks/useToolbarOwnerState.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useRtl } from '@mui/system/RtlProvider';
+import { usePickerPrivateContext } from "./usePickerPrivateContext.js";
+export function useToolbarOwnerState() {
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const isRtl = useRtl();
+  return React.useMemo(() => _extends({}, pickerOwnerState, {
+    toolbarDirection: isRtl ? 'rtl' : 'ltr'
+  }), [pickerOwnerState, isRtl]);
+}

package/modern/internals/index.js

@@ -16,6 +16,7 @@ export { useFieldOwnerState } from "./hooks/useFieldOwnerState.js";
 export { usePicker } from "./hooks/usePicker/index.js";
 export { usePickerPrivateContext } from "./hooks/usePickerPrivateContext.js";
 export { useStaticPicker } from "./hooks/useStaticPicker/index.js";
+export { useToolbarOwnerState } from "./hooks/useToolbarOwnerState.js";
 export { useLocalizationContext, useDefaultDates, useUtils, useNow } from "./hooks/useUtils.js";
 export { useViews } from "./hooks/useViews.js";
 export { usePreviousMonthDisabled, useNextMonthDisabled } from "./hooks/date-helpers-hooks.js";
@@ -29,4 +30,5 @@ export { useDefaultReduceAnimations } from "./hooks/useDefaultReduceAnimations.j
 export { applyDefaultViewProps } from "./utils/views.js";
 export { DayCalendar } from "../DateCalendar/DayCalendar.js";
 export { useCalendarState } from "../DateCalendar/useCalendarState.js";
-export { isInternalTimeView, isTimeView } from "./utils/time-utils.js";
+export { isInternalTimeView, isTimeView } from "./utils/time-utils.js";
+export { DateTimePickerToolbarForceDesktopVariant } from "../DateTimePicker/DateTimePickerToolbar.js";

package/modern/locales/roRO.js

@@ -17,11 +17,10 @@ const roROPickers = {
   // DateRange labels
   start: 'Început',
   end: 'Sfârșit',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'Data de început',
+  startTime: 'Ora de început',
+  endDate: 'Data de sfârșit',
+  endTime: 'Ora de sfârșit',
   // Action bar
   cancelButtonLabel: 'Anulare',
   clearButtonLabel: 'Ștergere',
@@ -55,23 +54,21 @@ const roROPickers = {
   fieldYearPlaceholder: params => 'A'.repeat(params.digitAmount),
   fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'LLLL' : 'LL',
   fieldDayPlaceholder: () => 'ZZ',
-  // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'ZZZZ' : 'ZZ',
   fieldHoursPlaceholder: () => 'hh',
   fieldMinutesPlaceholder: () => 'mm',
   fieldSecondsPlaceholder: () => 'ss',
-  fieldMeridiemPlaceholder: () => 'aa'
-
+  fieldMeridiemPlaceholder: () => 'aa',
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
-  // meridiem: 'Meridiem',
-
+  year: 'An',
+  month: 'Luna',
+  day: 'Ziua',
+  weekDay: 'Ziua saptămânii',
+  hours: 'Ore',
+  minutes: 'Minute',
+  seconds: 'Secunde',
+  meridiem: 'Meridiem',
   // Common
-  // empty: 'Empty',
+  empty: 'Gol'
 };
 export const roRO = getPickersLocalization(roROPickers);

package/node/DatePicker/DatePickerToolbar.js

@@ -20,12 +20,10 @@ var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _datePickerToolbarClasses = require("./datePickerToolbarClasses");
 var _dateUtils = require("../internals/utils/date-utils");
+var _useToolbarOwnerState = require("../internals/hooks/useToolbarOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views", "className", "onViewChange", "view"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views", "className", "classes", "onViewChange", "view"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     title: ['title']
@@ -44,7 +42,7 @@ const DatePickerToolbarTitle = (0, _styles.styled)(_Typography.default, {
 })({
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       margin: 'auto 16px auto auto'
@@ -72,12 +70,14 @@ const DatePickerToolbar = exports.DatePickerToolbar = /*#__PURE__*/React.forward
       toolbarFormat,
       toolbarPlaceholder = '––',
       views,
-      className
+      className,
+      classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const utils = (0, _useUtils.useUtils)();
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
-  const classes = useUtilityClasses(props);
+  const ownerState = (0, _useToolbarOwnerState.useToolbarOwnerState)();
+  const classes = useUtilityClasses(classesProp);
   const dateText = React.useMemo(() => {
     if (!value) {
       return toolbarPlaceholder;
@@ -88,7 +88,6 @@ const DatePickerToolbar = exports.DatePickerToolbar = /*#__PURE__*/React.forward
     }, true);
     return utils.formatByString(value, formatFromViews);
   }, [value, toolbarFormat, toolbarPlaceholder, utils, views]);
-  const ownerState = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DatePickerToolbarRoot, (0, _extends2.default)({
     ref: ref,
     toolbarTitle: translations.datePickerToolbarTitle,

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),