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

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/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/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
 

package/TimeClock/Clock.js

@@ -11,20 +11,17 @@ import { useUtils } from "../internals/hooks/useUtils.js";
 import { CLOCK_HOUR_WIDTH, getHours, getMinutes } from "./shared.js";
 import { getClockUtilityClass } from "./clockClasses.js";
 import { formatMeridiem } from "../internals/utils/date-utils.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "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 composeClasses(slots, getClockUtilityClass, classes);
@@ -78,7 +75,7 @@ const ClockSquareMask = styled('div', {
   userSelect: 'none',
   variants: [{
     props: {
-      disabled: false
+      isClockDisabled: false
     },
     style: {
       '@media (pointer: fine)': {
@@ -182,13 +179,20 @@ export function Clock(inProps) {
     viewValue,
     disabled = false,
     readOnly,
-    className
+    className,
+    classes: classesProp
   } = props;
-  const ownerState = props;
   const utils = useUtils();
   const translations = usePickerTranslations();
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, 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) => {
@@ -236,12 +240,7 @@ export 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.
@@ -302,9 +301,7 @@ export function Clock(inProps) {
         onTouchEnd: handleTouchEnd,
         onMouseUp: handleMouseUp,
         onMouseMove: handleMouseMove,
-        ownerState: {
-          disabled
-        },
+        ownerState: ownerState,
         className: classes.squareMask
       }), !isSelectedTimeDisabled && /*#__PURE__*/_jsxs(React.Fragment, {
         children: [/*#__PURE__*/_jsx(ClockPin, {
@@ -313,7 +310,7 @@ export function Clock(inProps) {
           type: type,
           viewValue: viewValue,
           isInner: isPointerInner,
-          hasSelected: hasSelected
+          isBetweenTwoClockValues: isPointerBetweenTwoClockValues
         })]
       }), /*#__PURE__*/_jsx(ClockWrapper, {
         "aria-activedescendant": selectedId,

package/TimeClock/ClockNumber.js

@@ -1,21 +1,17 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "disabled", "index", "inner", "label", "selected"];
+const _excluded = ["className", "classes", "disabled", "index", "inner", "label", "selected"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from "./shared.js";
 import { getClockNumberUtilityClass, clockNumberClasses } from "./clockNumberClasses.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    selected,
-    disabled
-  } = ownerState;
+const useUtilityClasses = (classes, ownerState) => {
   const slots = {
-    root: ['root', selected && 'selected', disabled && 'disabled']
+    root: ['root', ownerState.isClockNumberSelected && 'selected', ownerState.isClockNumberDisabled && 'disabled']
   };
   return composeClasses(slots, getClockNumberUtilityClass, classes);
 };
@@ -52,7 +48,7 @@ const ClockNumberRoot = styled('span', {
   },
   variants: [{
     props: {
-      inner: true
+      isClockNumberInInnerRing: true
     },
     style: _extends({}, theme.typography.body2, {
       color: (theme.vars || theme).palette.text.secondary
@@ -70,6 +66,7 @@ export function ClockNumber(inProps) {
   });
   const {
       className,
+      classes: classesProp,
       disabled,
       index,
       inner,
@@ -77,8 +74,15 @@ export function ClockNumber(inProps) {
       selected
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, 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 = (CLOCK_WIDTH - CLOCK_HOUR_WIDTH - 2) / 2 * (inner ? 0.65 : 1);
   const x = Math.round(Math.cos(angle) * length);

package/TimeClock/ClockPointer.d.ts

@@ -2,7 +2,12 @@ import * as React from 'react';
 import { TimeView } from '../models';
 import { ClockPointerClasses } from './clockPointerClasses';
 export interface ClockPointerProps extends React.HTMLAttributes<HTMLDivElement> {
-    hasSelected: boolean;
+    /**
+     * `true` if the pointer is between two clock values.
+     * On the `hours` view, it is always false.
+     * On the `minutes` view, it is true if the pointer is on a value that is not a multiple of 5.
+     */
+    isBetweenTwoClockValues: boolean;
     isInner: boolean;
     type: TimeView;
     viewValue: number;

package/TimeClock/ClockPointer.js

@@ -1,17 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "hasSelected", "isInner", "type", "viewValue"];
+const _excluded = ["className", "classes", "isBetweenTwoClockValues", "isInner", "type", "viewValue"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from "./shared.js";
 import { getClockPointerUtilityClass } from "./clockPointerClasses.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'],
     thumb: ['thumb']
@@ -33,7 +31,7 @@ const ClockPointerRoot = styled('div', {
   transformOrigin: 'center bottom 0px',
   variants: [{
     props: {
-      shouldAnimate: true
+      isClockPointerAnimated: true
     },
     style: {
       transition: theme.transitions.create(['transform', 'height'])
@@ -58,7 +56,7 @@ const ClockPointerThumb = styled('div', {
   boxSizing: 'content-box',
   variants: [{
     props: {
-      hasSelected: true
+      isBetweenTwoClockValues: false
     },
     style: {
       backgroundColor: (theme.vars || theme).palette.primary.main
@@ -76,6 +74,8 @@ export function ClockPointer(inProps) {
   });
   const {
       className,
+      classes: classesProp,
+      isBetweenTwoClockValues,
       isInner,
       type,
       viewValue
@@ -85,10 +85,14 @@ export function ClockPointer(inProps) {
   React.useEffect(() => {
     previousType.current = type;
   }, [type]);
-  const ownerState = _extends({}, props, {
-    shouldAnimate: previousType.current !== type
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    isClockPointerAnimated: previousType.current !== type,
+    isClockPointerBetweenTwoValues: isBetweenTwoClockValues
   });
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   const getAngleStyle = () => {
     const max = type === 'hours' ? 12 : 60;
     let angle = 360 / max * viewValue;

package/TimeClock/TimeClock.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "ampmInClock", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "showViewSwitcher", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "timezone"];
+const _excluded = ["ampm", "ampmInClock", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "showViewSwitcher", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "classes", "disabled", "readOnly", "timezone"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -21,11 +21,9 @@ import { getHourNumbers, getMinutesNumbers } from "./ClockNumbers.js";
 import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithTimezone.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useClockReferenceDate } from "../internals/hooks/useClockReferenceDate.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     arrowSwitcher: ['arrowSwitcher']
@@ -93,6 +91,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       focusedView,
       onFocusedViewChange,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       timezone: timezoneProp
@@ -120,6 +119,10 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
   });
   const translations = usePickerTranslations();
   const now = useNow(timezone);
+  const selectedId = useId();
+  const {
+    ownerState
+  } = usePickerPrivateContext();
   const {
     view,
     setView,
@@ -214,7 +217,6 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         throw new Error('not supported');
     }
   }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
-  const selectedId = useId();
   const viewProps = React.useMemo(() => {
     switch (view) {
       case 'hours':
@@ -279,8 +281,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         throw new Error('You must provide the type for ClockView');
     }
   }, [view, utils, value, ampm, translations.hoursClockNumberText, translations.minutesClockNumberText, translations.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, isTimeDisabled, selectedId, disabled]);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/_jsxs(TimeClockRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),

package/TimeField/useTimeField.d.ts

@@ -1,2 +1,2 @@
 import { UseTimeFieldProps } from './TimeField.types';
-export declare const useTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps> & Required<Pick<UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "formatDensity" | "enableAccessibleFieldDOMStructure" | "selectedSections" | "onSelectedSectionsChange" | "timezone" | "unstableFieldRef" | "referenceDate" | "shouldRespectLeadingZeros" | "ampm" | keyof import("../internals").BaseTimeValidationProps | keyof import("../internals").TimeValidationProps | "dateSeparator">>;
+export declare const useTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps> & Required<Pick<UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "ampm" | "timezone" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "enableAccessibleFieldDOMStructure" | keyof import("../internals").BaseTimeValidationProps | keyof import("../internals").TimeValidationProps | "dateSeparator">>;

package/TimePicker/TimePickerToolbar.js

@@ -2,11 +2,10 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "className"];
+const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "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 { PickersToolbarText } from "../internals/components/PickersToolbarText.js";
@@ -19,18 +18,18 @@ import { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.js";
 import { getTimePickerToolbarUtilityClass, timePickerToolbarClasses } from "./timePickerToolbarClasses.js";
 import { formatMeridiem } from "../internals/utils/date-utils.js";
 import { usePickerContext } from "../hooks/index.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 {
-    isLandscape,
-    classes,
-    isRtl
+    pickerOrientation,
+    toolbarDirection
   } = ownerState;
   const slots = {
     root: ['root'],
     separator: ['separator'],
-    hourMinuteLabel: ['hourMinuteLabel', isLandscape && 'hourMinuteLabelLandscape', isRtl && 'hourMinuteLabelReverse'],
-    ampmSelection: ['ampmSelection', isLandscape && 'ampmLandscape'],
+    hourMinuteLabel: ['hourMinuteLabel', pickerOrientation === 'landscape' && 'hourMinuteLabelLandscape', toolbarDirection === 'rtl' && 'hourMinuteLabelReverse'],
+    ampmSelection: ['ampmSelection', pickerOrientation === 'landscape' && 'ampmLandscape'],
     ampmLabel: ['ampmLabel']
   };
   return composeClasses(slots, getTimePickerToolbarUtilityClass, classes);
@@ -62,14 +61,14 @@ const TimePickerToolbarHourMinuteLabel = styled('div', {
   alignItems: 'flex-end',
   variants: [{
     props: {
-      isRtl: true
+      toolbarDirection: 'rtl'
     },
     style: {
       flexDirection: 'row-reverse'
     }
   }, {
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       marginTop: 'auto'
@@ -94,7 +93,7 @@ const TimePickerToolbarAmPmSelection = styled('div', {
   },
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       margin: '4px 0 auto',
@@ -129,12 +128,14 @@ function TimePickerToolbar(inProps) {
       view,
       onViewChange,
       views,
-      className
+      className,
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
   const translations = usePickerTranslations();
-  const isRtl = useRtl();
+  const ownerState = useToolbarOwnerState();
+  const classes = useUtilityClasses(classesProp, ownerState);
   const {
     disabled,
     readOnly
@@ -145,10 +146,6 @@ function TimePickerToolbar(inProps) {
     handleMeridiemChange
   } = useMeridiemMode(value, ampm, onChange);
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
-  const ownerState = _extends({}, props, {
-    isRtl
-  });
-  const classes = useUtilityClasses(ownerState);
   const separator = /*#__PURE__*/_jsx(TimePickerToolbarSeparator, {
     tabIndex: -1,
     value: ":",